:root {
    --ease-premium: cubic-bezier(0.25, 0.8, 0.25, 1);
    --ease-smooth: cubic-bezier(0.4, 0.0, 0.2, 1);
    --ease-slide: cubic-bezier(0.16, 1, 0.3, 1);

    /* Unified light backgrounds */
    --bg-light: #F8F9FA;
    --bg-card: #FFFFFF;
}

/* Global light background for main page sections */
body {
    background-color: var(--bg-light);
}

/* Мягкие анимации появления: малые смещения, без рывков */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(15px) translateZ(0);
    }

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

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-15px) translateZ(0);
    }

    to {
        opacity: 1;
        transform: translateX(0) translateZ(0);
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(15px) translateZ(0);
    }

    to {
        opacity: 1;
        transform: translateX(0) translateZ(0);
    }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.98) translateZ(0);
    }

    to {
        opacity: 1;
        transform: scale(1) translateZ(0);
    }
}

@keyframes rotateIn {
    from {
        opacity: 0;
        transform: rotate(-4deg) scale(0.98) translateZ(0);
    }

    to {
        opacity: 1;
        transform: rotate(0deg) scale(1) translateZ(0);
    }
}

/* Оптимизированные улучшенные анимации */
@keyframes float-smooth {

    0%,
    100% {
        transform: translateY(0) rotate(0deg) translateZ(0);
    }

    50% {
        transform: translateY(-12px) rotate(1.5deg) translateZ(0);
    }
}

@keyframes glow-pulse {

    0%,
    100% {
        box-shadow: 0 0 20px rgba(37, 99, 221, 0.3);
        filter: brightness(1);
    }

    50% {
        box-shadow: 0 0 40px rgba(37, 99, 221, 0.6);
        filter: brightness(1.1);
    }
}

@keyframes slide-up-fade {
    from {
        opacity: 0;
        transform: translateY(15px) translateZ(0);
    }

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


@keyframes icon-bounce {

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

    50% {
        transform: translateY(-4px) scale(1.04) translateZ(0);
    }
}

/* Без скачка в конце: мягкое движение, финал к 65% */
@keyframes icon-bounce-step-card {
    0% {
        transform: translateY(0) scale(1) translateZ(0);
    }

    45% {
        transform: translateY(-4px) scale(1.04) translateZ(0);
    }

    65%,
    100% {
        transform: translateY(0) scale(1.04) translateZ(0);
    }
}

@keyframes gradient-shift {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

@keyframes bounce-slow {

    0%,
    100% {
        transform: translateY(0) translateZ(0);
    }

    50% {
        transform: translateY(-8px) translateZ(0);
    }
}

/* E-commerce background icons floating animation */
@keyframes float-ecom {

    0%,
    100% {
        transform: translateY(0px) translateX(0px) rotate(0deg) translateZ(0);
        opacity: 0.12;
    }

    25% {
        transform: translateY(-20px) translateX(15px) rotate(2deg) translateZ(0);
        opacity: 0.18;
    }

    50% {
        transform: translateY(-10px) translateX(-10px) rotate(-1deg) translateZ(0);
        opacity: 0.15;
    }

    75% {
        transform: translateY(-25px) translateX(5px) rotate(1deg) translateZ(0);
        opacity: 0.16;
    }
}

/* Новые стильные анимации */


/* Aurora flow animation for dark blocks */
@keyframes aurora-flow {
    0% {
        opacity: 0.3;
        transform: translateX(-50%) translateY(-50%) rotate(0deg) scale(1);
    }

    50% {
        opacity: 0.6;
        transform: translateX(-30%) translateY(-30%) rotate(180deg) scale(1.2);
    }

    100% {
        opacity: 0.3;
        transform: translateX(-50%) translateY(-50%) rotate(360deg) scale(1);
    }
}

/* Floating light orbs animation */


/* Color star twinkling for footer */


/* Gradient rotation animation */
@keyframes gradient-rotate {
    0% {
        background-position: 0% 0%;
    }

    50% {
        background-position: 100% 100%;
    }

    100% {
        background-position: 0% 0%;
    }
}

.animate-bounce-slow {
    animation: bounce-slow 3.2s var(--ease-in-out-smooth) infinite;
}

/* Анимация для иконок в карточках */
.step-card:hover .feature-icon i,
.feature-card:hover .feature-icon i,
.work-step:hover .work-step-icon i {
    animation: icon-bounce 0.52s var(--ease-in-out-smooth);
}

/* Современная анимация для кнопок — плавное свечение */
.btn-primary {
    position: relative;
    overflow: hidden;
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    will-change: transform, box-shadow;
    transition: 
        transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Внутреннее свечение при hover */
.btn-primary::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0) 50%, rgba(255,255,255,0.1) 100%);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.btn-primary:hover {
    transform: translateY(-3px) translateZ(0) scale(1.02);
    box-shadow: 
        0 10px 30px rgba(0, 122, 255, 0.35),
        0 4px 12px rgba(0, 122, 255, 0.2),
        inset 0 1px 0 rgba(255,255,255,0.2);
}

.btn-primary:hover::before {
    opacity: 1;
}

.btn-primary:active {
    transform: translateY(-1px) translateZ(0) scale(1);
    box-shadow: 0 4px 12px rgba(0, 122, 255, 0.25);
    transition: transform 0.1s ease, box-shadow 0.1s ease;
}

/* Анимация для логотипа */
.logo {
    transition: all 0.3s ease;
}

.logo:hover {
    transform: scale(1.05);
}

/* Removed: old large logo hover animation */

/* Подчёркивание активного пункта (опционально) */
.nav-links a {
    position: relative;
}

.nav-links a::after {
    content: '';
    position: absolute;
    bottom: 6px;
    left: 16px;
    right: 16px;
    height: 2px;
    background: #3B82F6;
    border-radius: 1px;
    transform: scaleX(0);
    transition: transform 0.25s ease;
    box-shadow: 0 0 8px rgba(59, 130, 246, 0.5);
}

.nav-links a:hover::after,
.nav-links a.active::after {
    transform: scaleX(1);
}

/* Active link styling for better visibility on dark backgrounds */
.nav-links a.active {
    color: #60A5FA;
}

/* Dark section navbar styling - improve contrast */
.navbar.navbar--over-dark .nav-links li a {
    color: rgba(255, 255, 255, 0.92);
}

.navbar.navbar--over-dark .nav-links li a:hover {
    background: rgba(255, 255, 255, 0.92);
    color: #0f172a;
    border-color: rgba(59, 130, 246, 0.85);
    text-shadow: none;
    box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.25);
}

.navbar.navbar--over-dark .nav-links a::after {
    background: #3B82F6;
    box-shadow: 0 0 10px rgba(59, 130, 246, 0.55);
}

.navbar.navbar--over-dark .nav-links a.active {
    color: rgba(255, 255, 255, 0.96);
}

.navbar.navbar--over-dark .nav-links li a:hover i {
    color: #2563eb;
}

/* Плавное появление с задержкой */
.animate-stagger-1 {
    animation: slide-up-fade var(--duration-slow) var(--ease-out-smooth) 0.1s both;
}

.animate-stagger-2 {
    animation: slide-up-fade var(--duration-slow) var(--ease-out-smooth) 0.2s both;
}

.animate-stagger-3 {
    animation: slide-up-fade var(--duration-slow) var(--ease-out-smooth) 0.3s both;
}

.animate-stagger-4 {
    animation: slide-up-fade var(--duration-slow) var(--ease-out-smooth) 0.4s both;
}

/* Классы для анимаций — плавное появление без лага, технологично */
.animate-on-scroll {
    opacity: 1;
    transform: translateY(0) translateZ(0);
    transition: opacity var(--duration-normal) var(--ease-smooth),
        transform var(--duration-normal) var(--ease-smooth);
    backface-visibility: hidden;
    will-change: transform;
}

/* Лёгкое смещение до анимации — контент всегда виден */
.js-enabled .animate-on-scroll:not(.animated) {
    opacity: 1;
    transform: translateY(12px) translateZ(0);
}

.animate-on-scroll.animated {
    opacity: 1;
    transform: translateY(0) translateZ(0);
    will-change: auto;
}

/* Каскадное появление карточек «Почему EcomVision» */
.process-steps .step-card:nth-child(1) {
    transition-delay: 0s;
}

.process-steps .step-card:nth-child(2) {
    transition-delay: 0.12s;
}

.process-steps .step-card:nth-child(3) {
    transition-delay: 0.24s;
}

/* Анимация для иконок при загрузке */
@keyframes icon-rotate-in {
    from {
        opacity: 0;
        transform: rotate(-180deg) scale(0.5) translateZ(0);
    }

    to {
        opacity: 1;
        transform: rotate(0deg) scale(1) translateZ(0);
    }
}

.feature-icon,
.work-step-icon,
.step-card>div:first-child {
    animation: icon-rotate-in 0.8s var(--ease-out-smooth) backwards;
}

.feature-icon:nth-child(1),
.work-step-icon:nth-child(1) {
    animation-delay: 0.1s;
}

.feature-icon:nth-child(2),
.work-step-icon:nth-child(2) {
    animation-delay: 0.2s;
}

.feature-icon:nth-child(3),
.work-step-icon:nth-child(3) {
    animation-delay: 0.3s;
}

.fade-in-up {
    animation: fadeInUp var(--duration-normal) var(--ease-smooth) forwards;
}

.fade-in-left {
    animation: fadeInLeft var(--duration-normal) var(--ease-smooth) forwards;
}

.fade-in-right {
    animation: fadeInRight var(--duration-normal) var(--ease-smooth) forwards;
}

.scale-in {
    animation: scaleIn var(--duration-normal) var(--ease-smooth) forwards;
}

.rotate-in {
    animation: rotateIn var(--duration-normal) var(--ease-smooth) forwards;
}

/* Hover эффекты для карточек — только transform и box-shadow для плавности */
.card-hover {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease;
    position: relative;
    overflow: hidden;
    backface-visibility: hidden;
    transform: translateZ(0);
}

.card-hover::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent);
    transition: transform 0.5s ease;
    transform: translateX(-100%) translateZ(0);
    z-index: 0;
    pointer-events: none;
}

.card-hover:hover::before {
    transform: translateX(200%) translateZ(0);
}

.card-hover:hover {
    transform: translateY(-4px) translateZ(0);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.card-hover:hover .feature-icon,
.card-hover:hover .work-step-icon {
    animation: icon-bounce 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    transform: scale(1.05) translateZ(0);
    transition: transform 0.25s ease;
}

/* Пульсирующая анимация для важных элементов */
@keyframes pulse {

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

    50% {
        opacity: 0.8;
        transform: scale(1.05) translateZ(0);
    }
}

.pulse-animation {
    animation: pulse 2s ease-in-out infinite;
    backface-visibility: hidden;
    transform: translateZ(0);
}

/* Улучшенная пульсация с эффектом свечения */
@keyframes pulse-glow-enhanced {

    0%,
    100% {
        opacity: 1;
        transform: scale(1) translateZ(0);
        box-shadow: 0 0 20px rgba(37, 99, 221, 0.3);
    }

    50% {
        opacity: 0.9;
        transform: scale(1.08) translateZ(0);
        box-shadow: 0 0 30px rgba(37, 99, 221, 0.5);
    }
}

.pulse-glow {
    animation: pulse-glow-enhanced 2s ease-in-out infinite;
    backface-visibility: hidden;
    transform: translateZ(0);
}

/* Google Sans — основной шрифт сайта (Medium; жирность 600/700 синтезируется браузером) */
@font-face {
    font-family: 'Google Sans';
    src:
        local('Google Sans'),
        local('Google Sans Medium'),
        url('assets/GoogleSans-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

:root {
    /* "Nicepay" Palette - Blue Variant */
    --primary: #2563EB;
    /* Vibrant Blue (Royal/Electric) */
    --primary-dark: #1E40AF;
    /* Dark Blue */
    --primary-light: #60A5FA;
    /* Light Blue */
    --secondary: #FFFFFF;
    /* White */

    --text-main: #1F2937;
    /* Dark Grey */
    --text-muted: #6B7280;
    /* Muted Grey */

    --bg-page: #F8F9FA;
    --bg-gradient-start: #EFF6FF;
    /* Very light blue */
    /* Light blue */

    --glass-bg: rgba(255, 255, 255, 0.7);
    --glass-border: 1px solid rgba(255, 255, 255, 0.6);

    --radius-capsule: 100px;
    --radius-sm: 12px;
    --radius-card: 24px;
    --radius-lg: 48px;
    --radius-xl: 60px;

    --font-main: 'Google Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* Типографика: шкала размеров и межбуквенный интервал под Google Sans */
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 2rem;
    --text-4xl: 2.5rem;
    --text-5xl: 3rem;
    --leading-tight: 1.25;
    --leading-normal: 1.5;
    --leading-relaxed: 1.625;
    --tracking-tight: -0.02em;
    --tracking-tighter: -0.03em;

    /* Accents */
    --accent-green: #10B981;

    /* Spacing scale для ровных отступов */
    --space-1: 8px;
    --space-2: 16px;
    --space-3: 24px;
    --space-4: 32px;
    --space-5: 40px;
    --space-6: 48px;
    --space-8: 64px;

    /* Единая логика анимаций: длительности (мс) и мягкие кривые */
    --duration-fast: 280ms;
    --duration-normal: 420ms;
    --duration-slow: 640ms;
    --ease-smooth: cubic-bezier(0.33, 0, 0.2, 1);
    --ease-out-smooth: cubic-bezier(0.33, 1, 0.2, 1);
    --ease-in-out-smooth: cubic-bezier(0.45, 0, 0.55, 1);

    /* Единая шкала секционных заголовков */
    --section-title-size: clamp(1.9rem, 4.2vw, 2.6rem);
    --section-title-line: 1.15;
    --section-title-letter: -0.025em;
    --section-header-gap: 56px;

    /* Ровные циклы плавающих элементов */
    --float-duration: 7.2s;
    --float-duration-delayed: 8.4s;
    --float-delay: 0.8s;
}

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

html {
    font-family: var(--font-main) !important;
    text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-main) !important;
    color: var(--text-main);
    background: var(--secondary);
    overflow-x: hidden;
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    font-weight: 500;
    letter-spacing: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Единая гарнитура для всех базовых элементов (перебивает Tailwind preflight) */
body * {
    font-family: inherit;
}

strong,
b {
    font-weight: 700;
}

/* Google Sans везде: кнопки, инпуты, ссылки, навбар, футер — единый шрифт */
button,
input,
select,
textarea,
a,
label,
.nav-links a,
.btn-primary,
.logo,
.logo-text,
.hero-text-wrapper,
.hero-text-wrapper h1,
.hero-text-wrapper p,
.navbar,
.ev-footer,
.custom-ev-footer,
.ev-footer-signoff,
.ev-footer-social-label {
    font-family: var(--font-main);
}

/* Иконки Font Awesome не переопределяем */
.ev-footer .fa,
.ev-footer i[class^="fa"],
.navbar .fa,
button .fa {
    font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands" !important;
}

/* Качество: фокус для клавиатурной навигации и доступности */
:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* Выделение текста в стиле бренда */
::selection {
    background: rgba(37, 99, 235, 0.2);
    color: var(--text-main);
}

/* Ссылка «Перейти к контенту» для клавиатуры и скринридеров */
.skip-link {
    position: absolute;
    top: -100px;
    left: var(--space-3);
    z-index: 10000;
    padding: 12px 20px;
    background: var(--primary);
    color: #fff;
    font-weight: 600;
    border-radius: 8px;
    transition: top var(--duration-fast) var(--ease-out-smooth);
}

.skip-link:focus {
    top: var(--space-3);
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* Изображения: не выходят за границы, сохраняют пропорции */
img {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}

/* Мобильная базовая линия: читаемый текст, без горизонтального скролла */
@media (max-width: 768px) {
    html {
        font-size: clamp(15px, 4vw, 16px);
    }

    body {
        word-wrap: break-word;
        overflow-x: hidden;
    }

    /* Исправление переноса слов в заголовках на мобильных */
    h1,
    h2,
    h3,
    h4 {
        word-break: normal;
        overflow-wrap: break-word;
        hyphens: none;
        -webkit-hyphens: none;
        -ms-hyphens: none;
    }

    /* Карточки услуг - предотвращаем разрыв слов */
    .service-card h3,
    .service-card-title,
    .card-title,
    .feature-title,
    .step-title {
        word-break: normal;
        overflow-wrap: normal;
        hyphens: none;
        -webkit-hyphens: none;
        white-space: normal;
        font-size: clamp(1rem, 4vw, 1.25rem);
    }
}


/* Базовая типографика — Google Sans, единая шкала */
h1,
h2,
h3,
h4 {
    font-family: var(--font-main);
    color: var(--text-main);
    letter-spacing: var(--tracking-tight);
    line-height: var(--leading-tight);
}

h1 {
    font-size: var(--text-4xl);
    font-weight: 700;
}

h2 {
    font-size: var(--text-3xl);
    font-weight: 700;
}

h3 {
    font-size: var(--text-2xl);
    font-weight: 600;
}

h4 {
    font-size: var(--text-xl);
    font-weight: 600;
}

h1,
h2,
h3,
h4 {
    text-wrap: balance;
}

@media (max-width: 640px) {
    h1 {
        font-size: clamp(1.9rem, 7vw, 2.3rem);
    }

    h2 {
        font-size: clamp(1.6rem, 6vw, 2rem);
    }

    h3 {
        font-size: clamp(1.25rem, 5vw, 1.6rem);
    }
}

p,
li {
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
}

small,
.text-sm {
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
}

a {
    text-decoration: none;
    color: inherit;
}

ul {
    list-style: none;
}

/* Utilities */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--space-3, 24px);
}

.section-title {
    text-align: center;
    max-width: 800px;
    margin: 0 auto var(--section-header-gap);
}

.section-title h2 {
    font-size: var(--section-title-size);
    font-weight: 700;
    font-family: var(--font-main);
    letter-spacing: var(--section-title-letter);
    line-height: var(--section-title-line);
}

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

.highlight {
    color: var(--primary);
    position: relative;
    display: inline;
    vertical-align: baseline;
    line-height: inherit;
    text-decoration: none;
}

/* Hero EcomVision — яркий iOS голубой с плавной анимацией блеска */
.hero-brand-glow {
    display: inline;
    position: relative;
    font-weight: 800;
    color: #007AFF !important;
    overflow: hidden;
}

.hero-brand-glow::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0) 35%,
            rgba(255, 255, 255, 0.6) 50%,
            rgba(255, 255, 255, 0) 65%,
            rgba(255, 255, 255, 0) 100%);
    background-size: 200% 100%;
    animation: minimalShine 3s ease-in-out infinite;
    pointer-events: none;
    mix-blend-mode: overlay;
}


@keyframes minimalShine {
    0% {
        background-position: -200% 0;
    }

    100% {
        background-position: 200% 0;
    }
}


/* Buttons — плавный hover с углублением цвета */
.btn-primary {
    background: linear-gradient(135deg, #2563EB 0%, #1E40AF 100%);
    color: #fff;
    padding: 12px 32px;
    border-radius: 50px;
    border: 2px solid transparent;
    font-weight: 600;
    display: inline-block;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.25);
}

.btn-text {
    color: var(--text-main);
    font-weight: 500;
    margin-right: 20px;
}

.btn-text:hover {
    color: var(--primary);
}

/* iOS Blue для Hero CTA и Navbar Contact Button — сплошной цвет */
.hero-text-wrapper .btn-primary,
.navbar .btn-primary {
    background: #007AFF !important;
    box-shadow: 0 6px 20px rgba(0, 122, 255, 0.35) !important;
    border: 2px solid transparent !important;
}

.hero-text-wrapper .btn-primary:hover,
.navbar .btn-primary:hover {
    background: #0066D6 !important;
    color: #fff !important;
    border: 2px solid rgba(255,255,255,0.2) !important;
    box-shadow: 
        0 14px 40px rgba(0, 122, 255, 0.45),
        0 6px 16px rgba(0, 122, 255, 0.25),
        inset 0 1px 0 rgba(255,255,255,0.15) !important;
}

/* CAPSULE NAVBAR — прозрачное стекло: градиент просвечивает, без резкого обрезания */
.navbar {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 1080px;
    font-family: var(--font-main);
    background: rgba(255, 255, 255, 0.28);
    backdrop-filter: blur(20px) saturate(1.1);
    -webkit-backdrop-filter: blur(20px) saturate(1.1);
    padding: 10px 24px;
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.03);
    z-index: 1000;
}

.navbar-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin: 0;
    padding: 0;
    position: relative;
    /* Needed for absolute centering */
}

.logo {
    font-weight: 700;
    font-size: 1.4rem;
    color: #111;
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 2;
    /* Ensure clickable */
}

.logo-text {
    white-space: nowrap;
}

.logo-with-mark img {
    width: 52px;
    height: 52px;
}

@media (max-width: 768px) {
    .logo-with-mark img {
        width: 48px;
        height: 48px;
    }
}

/* Removed: old large logo styles - now using compact 40x40 logo */

@media (max-width: 768px) {
    .logo-text {
        font-size: 1.1rem;
    }
}

/* Ссылки по центру — с иконками, округлые зоны наведения */
.nav-links {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-links li a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 16px;
    border: 1px solid transparent;
    font-family: var(--font-main);
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    transition: background 0.25s var(--ease-smooth), color 0.25s var(--ease-smooth);
}

.nav-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1;
    text-transform: uppercase;
    margin-left: 6px;
}

.nav-badge--new {
    background: #22c55e;
    color: #ffffff;
    box-shadow: 0 6px 16px rgba(34, 197, 94, 0.35);
}

.nav-links li a:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #3B82F6;
    text-shadow: 0 0 1px rgba(59, 130, 246, 0.3);
}

.nav-links li a i {
    font-size: 0.9rem;
    opacity: 0.85;
    transition: opacity 0.2s ease;
}

.nav-links li a:hover i {
    opacity: 1;
    color: var(--primary);
}

/* ========================================= */
/* MOBILE MENU - COMPLETE REWRITE */
/* ========================================= */

/* Hamburger Button - чистая иконка без обводки */
.hamburger-btn {
    display: none;
    position: relative;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    margin: 0;
    background: transparent;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    z-index: 9999;
    align-items: center;
    justify-content: center;
    transition: background 0.18s ease;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    user-select: none;
    outline: none;
    box-shadow: none;
}

.hamburger-btn:hover {
    background: rgba(0, 0, 0, 0.04);
}

.hamburger-btn:active,
.hamburger-btn.active {
    background: rgba(0, 0, 0, 0.08);
}

.hamburger-btn:focus {
    outline: none;
}

.hamburger-icon {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 24px;
    height: 18px;
    position: relative;
}

.hamburger-line {
    display: block;
    width: 100%;
    height: 2px;
    background: #111;
    border-radius: 1px;
    transition: transform 0.25s ease, opacity 0.2s ease;
    transform-origin: center;
}

.hamburger-btn.active .hamburger-line:nth-child(1) {
    transform: translateY(7.5px) rotate(45deg);
}

.hamburger-btn.active .hamburger-line:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}

.hamburger-btn.active .hamburger-line:nth-child(3) {
    transform: translateY(-7.5px) rotate(-45deg);
}

@media (max-width: 768px) {
    .hamburger-btn {
        display: flex !important;
    }
}

/* ============================================================
   Mobile Menu — premium glass panel with staggered animations
   ============================================================ */

/* Overlay — soft dim + blur */
.mobile-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    z-index: 9998;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.35s ease, visibility 0.35s;
}

.mobile-menu-overlay.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Dimmed backdrop */
.mobile-menu-overlay::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity 0.35s ease;
}

.mobile-menu-overlay.active::before {
    opacity: 1;
}

/* Panel — frosted glass with left accent stripe */
.mobile-menu-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 300px;
    max-width: 85vw;
    height: 100%;
    padding: 0 0 32px;
    display: flex;
    flex-direction: column;
    font-family: var(--font-main);
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(40px) saturate(1.4);
    -webkit-backdrop-filter: blur(40px) saturate(1.4);
    border-radius: 0 28px 28px 0;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-left: none;
    box-shadow:
        8px 0 40px rgba(0, 0, 0, 0.10),
        1px 0 0 rgba(255, 255, 255, 0.6) inset;
    transform: translateX(-105%);
    transition: transform 0.45s cubic-bezier(0.32, 0.72, 0, 1);
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    z-index: 1;
}

/* Gradient accent stripe on left edge */
.mobile-menu-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
    background: linear-gradient(180deg, #3b82f6, #8b5cf6 40%, #ec4899 70%, #f59e0b);
    border-radius: 0 2px 2px 0;
    z-index: 2;
}

.mobile-menu-overlay.active .mobile-menu-content {
    transform: translateX(0);
}

/* Header */
.mobile-menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 22px 18px;
    margin-bottom: 4px;
    position: relative;
}

.mobile-menu-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 22px;
    right: 22px;
    height: 1px;
    background: linear-gradient(90deg, rgba(37, 99, 235, 0.25), rgba(139, 92, 246, 0.15), transparent);
}

.mobile-menu-title {
    margin: 0;
    font-family: var(--font-main);
    font-size: 1.35rem;
    font-weight: 700;
    color: #111;
    letter-spacing: 0.02em;
}

/* Logo with gradient */
.mobile-menu-logo {
    font-family: var(--font-main);
    font-size: 1.35rem;
    font-weight: 800;
    background: linear-gradient(135deg, #2563eb, #7c3aed);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: -0.02em;
}

/* Close button — glass circle */
.mobile-menu-close {
    width: 38px;
    height: 38px;
    min-width: 38px;
    min-height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 50%;
    cursor: pointer;
    font-size: 0.95rem;
    color: #64748b;
    transition: background 0.25s, color 0.25s, transform 0.25s;
    -webkit-tap-highlight-color: transparent;
}

.mobile-menu-close:hover {
    background: rgba(239, 68, 68, 0.08);
    color: #ef4444;
}

.mobile-menu-close:active {
    transform: scale(0.9);
    background: rgba(239, 68, 68, 0.12);
}

/* Links container */
.mobile-menu-links {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 12px;
    width: 100%;
    flex: 1;
}

/* Individual link — staggered entrance */
.mobile-menu-link {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 13px 16px;
    background: transparent;
    border: none;
    border-radius: 16px;
    text-decoration: none;
    color: #1e293b;
    font-family: var(--font-main);
    font-size: 0.975rem;
    font-weight: 550;
    letter-spacing: 0.01em;
    opacity: 0;
    transform: translateX(-20px);
    transition:
        background 0.25s ease,
        color 0.25s ease,
        transform 0.4s cubic-bezier(0.32, 0.72, 0, 1),
        opacity 0.35s ease;
}

/* Staggered entrance delays */
.mobile-menu-overlay.active .mobile-menu-link {
    opacity: 1;
    transform: translateX(0);
}
.mobile-menu-overlay.active .mobile-menu-link:nth-child(1) { transition-delay: 0.08s; }
.mobile-menu-overlay.active .mobile-menu-link:nth-child(2) { transition-delay: 0.12s; }
.mobile-menu-overlay.active .mobile-menu-link:nth-child(3) { transition-delay: 0.16s; }
.mobile-menu-overlay.active .mobile-menu-link:nth-child(4) { transition-delay: 0.20s; }
.mobile-menu-overlay.active .mobile-menu-link:nth-child(5) { transition-delay: 0.24s; }
.mobile-menu-overlay.active .mobile-menu-link:nth-child(6) { transition-delay: 0.28s; }
.mobile-menu-overlay.active .mobile-menu-link:nth-child(7) { transition-delay: 0.32s; }
.mobile-menu-overlay.active .mobile-menu-link:nth-child(8) { transition-delay: 0.36s; }
.mobile-menu-overlay.active .mobile-menu-link:nth-child(9) { transition-delay: 0.40s; }

/* Reset delay on close for instant hide */
.mobile-menu-overlay:not(.active) .mobile-menu-link {
    transition-delay: 0s;
    transition-duration: 0.15s;
}

.mobile-menu-link .nav-badge {
    margin-left: 8px;
    font-size: 0.6rem;
    padding: 2px 6px;
}

/* Hover — soft tinted background */
.mobile-menu-link:hover {
    background: rgba(37, 99, 235, 0.06);
    color: #2563eb;
}

.mobile-menu-link:active {
    background: rgba(37, 99, 235, 0.10);
    transform: scale(0.98);
}

/* Icon — clean minimal style */
.mobile-menu-link i {
    width: 22px;
    min-width: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border-radius: 0;
    box-shadow: none;
    color: #94a3b8;
    font-size: 1rem;
    transition: color 0.25s ease;
}

.mobile-menu-link:hover i {
    color: #2563eb;
}

body.menu-open {
    overflow: hidden !important;
    position: fixed;
    width: 100%;
}

/* Footer */
.mobile-menu-footer {
    margin-top: auto;
    padding: 20px 22px 0;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 16px;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.35s ease 0.3s, transform 0.4s cubic-bezier(0.32, 0.72, 0, 1) 0.3s;
}

.mobile-menu-overlay.active .mobile-menu-footer {
    opacity: 1;
    transform: translateY(0);
}

.mobile-menu-overlay:not(.active) .mobile-menu-footer {
    transition-delay: 0s;
    transition-duration: 0.15s;
}

.mobile-menu-footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.03), transparent);
}

/* Contact CTA — gradient with glow */
.mobile-menu-contact-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 20px;
    background: linear-gradient(135deg, #2563eb, #7c3aed);
    border: none;
    border-radius: 14px;
    color: #fff;
    font-family: var(--font-main);
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.mobile-menu-contact-btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, transparent 40%, rgba(255, 255, 255, 0.15));
    pointer-events: none;
}

.mobile-menu-contact-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(37, 99, 235, 0.3), 0 2px 8px rgba(124, 58, 237, 0.2);
}

.mobile-menu-contact-btn:active {
    transform: translateY(0) scale(0.98);
}

.mobile-menu-contact-btn i {
    font-size: 1rem;
}

/* Social icons */
.mobile-menu-social {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.mobile-menu-social-link {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(0, 0, 0, 0.04);
    border-radius: 12px;
    color: #64748b;
    font-size: 1.2rem;
    text-decoration: none;
    transition: background 0.25s, color 0.25s, transform 0.25s, border-color 0.25s;
}

.mobile-menu-social-link:hover {
    border-color: rgba(37, 99, 235, 0.15);
    background: rgba(37, 99, 235, 0.08);
    color: var(--primary);
    transform: translateY(-2px);
}

.mobile-menu-social-link:active {
    transform: translateY(0) scale(0.95);
}

/* Блог — заголовки карточек крупнее, читаемо */
.blog-card h3 {
    font-size: 1.5rem !important;
    line-height: 1.35;
    font-weight: 700;
    letter-spacing: -0.01em;
}

@media (min-width: 768px) {
    .blog-card h3 {
        font-size: 1.625rem !important;
    }
}

.mobile-menu-links a.mobile-menu-link {
    font-size: inherit;
    font-weight: inherit;
}

.nav-links li a {
    color: var(--text-main);
}

.nav-links li a.active {
    color: var(--primary);
}

.nav-right {
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 2;
    /* Ensure clickable */
}

/* HERO SECTION - "Nicepay" Style */
.hero-centered {
    position: relative;
    padding-top: 140px;
    padding-bottom: 100px;
    overflow: visible;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    /* Прозрачный фон — градиент из ::before просвечивает, спрятан за навбар и за стеклянную панель */
    background: transparent;
}

/* Градиент опущен вниз — более плавный переход */
.hero-centered::before {
    content: '';
    position: absolute;
    top: 0;
    left: -30%;
    width: 160%;
    height: 120%;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(ellipse 300% 180% at 50% 98%,
            rgba(37, 99, 235, 0.035) 0%,
            rgba(37, 99, 235, 0.025) 20%,
            rgba(37, 99, 235, 0.015) 40%,
            rgba(37, 99, 235, 0.008) 60%,
            rgba(37, 99, 235, 0.003) 80%,
            transparent 100%);
}

/* Фоновые орбы в hero — мягкое свечение */
.bg-orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    filter: blur(80px);
    opacity: 0.35;
}

.bg-orb.orb-1 {
    width: 400px;
    height: 400px;
    top: 10%;
    left: -10%;
    background: radial-gradient(circle, rgba(37, 99, 235, 0.25) 0%, transparent 70%);
}

.bg-orb.orb-2 {
    width: 350px;
    height: 350px;
    bottom: 20%;
    right: -5%;
    background: radial-gradient(circle, rgba(16, 185, 129, 0.2) 0%, transparent 70%);
}

.bg-orb.orb-3 {
    width: 300px;
    height: 300px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(139, 92, 246, 0.15) 0%, transparent 70%);
}

/* ORBIT ANIMATION SYSTEM */
.orbit-system {
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    max-width: 100%;
    z-index: 0;
    /* Behind everything */
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
}

.orbit-ring {
    position: absolute;
    border: 1px solid rgba(0, 0, 0, 0.04);
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) translateZ(0);
    will-change: transform;
    backface-visibility: hidden;
}

/* Desktop: large orbits so axes extend further (red arcs on mockup) */
.ring-1 {
    width: 2500px;
    height: 2500px;
    animation: spin-ring 60s linear infinite;
    will-change: transform;
    backface-visibility: hidden;
}

.ring-2 {
    width: 3500px;
    height: 3500px;
    animation: spin-ring-reverse 80s linear infinite;
    will-change: transform;
    backface-visibility: hidden;
}

.ring-3 {
    width: 4500px;
    height: 4500px;
    border-color: rgba(0, 0, 0, 0.02);
    animation: spin-ring-slow 100s linear infinite;
    will-change: transform;
    backface-visibility: hidden;
}

.orbit-item {
    position: absolute;
    top: 50%;
    width: 50px;
    height: 50px;
    background: #FFFFFF;
    border-radius: 50%;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    color: #E5E7EB;
    /* Very Light Grey icon */
    z-index: 1;
    will-change: transform;
    backface-visibility: hidden;
    transform: translateZ(0);
}

/* Positioning items on rings */
/* Ring 1 Item - кольцо крутится по часовой, иконка компенсирует против часовой */
.ring-1 .orbit-item {
    left: -25px;
    /* On the edge */
    animation: counter-spin 60s linear infinite;
}


/* Иконки внутри orbit-item компенсируют вращение кольца */
.ring-1 .orbit-item i {
    animation: counter-spin 60s linear infinite;
    display: inline-block;
    will-change: transform;
}

/* Ring 2 Items - кольцо крутится против часовой, иконка компенсирует по часовой */
.ring-2 .item-wb {
    left: 50%;
    top: -25px;
    /* Top edge */
    animation: counter-spin-reverse 80s linear infinite;
}

.ring-2 .item-wb i {
    animation: counter-spin-reverse 80s linear infinite;
    display: inline-block;
    will-change: transform;
}

.ring-2 .item-analytics {
    left: 50%;
    bottom: -25px;
    top: auto;
    /* Bottom edge */
    animation: counter-spin-reverse 80s linear infinite;
}

.ring-2 .item-analytics i {
    animation: counter-spin-reverse 80s linear infinite;
    display: inline-block;
    will-change: transform;
}

@keyframes spin-ring {
    from {
        transform: translate(-50%, -50%) rotate(0deg) translateZ(0);
    }

    to {
        transform: translate(-50%, -50%) rotate(360deg) translateZ(0);
    }
}

@keyframes spin-ring-reverse {
    from {
        transform: translate(-50%, -50%) rotate(0deg) translateZ(0);
    }

    to {
        transform: translate(-50%, -50%) rotate(-360deg) translateZ(0);
    }
}

@keyframes spin-ring-slow {
    from {
        transform: translate(-50%, -50%) rotate(0deg) translateZ(0);
    }

    to {
        transform: translate(-50%, -50%) rotate(360deg) translateZ(0);
    }
}

@keyframes counter-spin {
    from {
        transform: rotate(0deg) translateZ(0);
    }

    to {
        transform: rotate(-360deg) translateZ(0);
    }
}

@keyframes counter-spin-reverse {
    from {
        transform: rotate(0deg) translateZ(0);
    }

    to {
        transform: rotate(360deg) translateZ(0);
    }
}

/* Обёртка карточки героя: сзади — градиент свечения, сверху — стекло */
.hero-card-wrap {
    position: relative;
    max-width: 900px;
    margin: 0 auto 60px;
    padding: 0;
    animation: hero-card-enter 0.92s var(--ease-out-smooth) 0.12s both;
}

@keyframes hero-card-enter {
    from {
        opacity: 0;
        transform: translateY(16px) scale(0.99) translateZ(0);
    }

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

/* Цветные блики сзади панели — играют через стекло, размыто и мягко */
.hero-card-blobs {
    position: absolute;
    inset: -60px;
    z-index: 0;
    pointer-events: none;
    border-radius: 52px;
    overflow: visible;
}

.hero-card-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.4;
    animation: hero-blob-float 18s var(--ease-in-out-smooth) infinite;
}

.hero-card-blob--1 {
    width: 240px;
    height: 240px;
    background: radial-gradient(circle, rgba(147, 197, 253, 0.6) 0%, rgba(59, 130, 246, 0.25) 60%, transparent 100%);
    top: 5%;
    left: 8%;
    animation-delay: 0s;
}

.hero-card-blob--2 {
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(196, 181, 253, 0.55) 0%, rgba(139, 92, 246, 0.2) 60%, transparent 100%);
    top: 15%;
    right: 8%;
    animation-delay: -4s;
}

.hero-card-blob--3 {
    width: 220px;
    height: 220px;
    background: radial-gradient(circle, rgba(191, 219, 254, 0.5) 0%, rgba(96, 165, 250, 0.22) 60%, transparent 100%);
    bottom: 15%;
    left: 12%;
    animation-delay: -8s;
}

.hero-card-blob--4 {
    width: 180px;
    height: 180px;
    background: radial-gradient(circle, rgba(224, 231, 255, 0.55) 0%, rgba(129, 140, 248, 0.2) 60%, transparent 100%);
    bottom: 8%;
    right: 10%;
    animation-delay: -12s;
}

@keyframes hero-blob-float {

    0%,
    100% {
        transform: translate(0, 0) scale(1) translateZ(0);
        opacity: 0.48;
    }

    33% {
        transform: translate(8px, -6px) scale(1.04) translateZ(0);
        opacity: 0.58;
    }

    66% {
        transform: translate(-4px, 5px) scale(0.98) translateZ(0);
        opacity: 0.52;
    }
}

.hero-text-wrapper {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 100%;
    margin: 0;
    isolation: isolate;

    /* iOS 26 Glass Effect: максимальное размытие для скрытия фона */
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(120px) saturate(2);
    -webkit-backdrop-filter: blur(120px) saturate(2);
    border: 1px solid rgba(255, 255, 255, 1);
    border-radius: 40px;
    padding: 50px 30px;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.5) inset,
        0 4px 24px rgba(0, 0, 0, 0.06),
        0 1px 0 rgba(255, 255, 255, 0.6) inset;
    transition: box-shadow var(--duration-normal) var(--ease-smooth), border-color var(--duration-normal) var(--ease-smooth);
}

/* Читаемость текста на Glass-панели — без объёма (без text-shadow) */
.hero-text-wrapper h1,
.hero-text-wrapper .hero-tagline-script {
    color: #111;
}

.hero-text-wrapper p {
    color: var(--text-main);
}

.hero-tagline-script {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.marketplace-logos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    width: 100%;
    max-width: 780px;
    margin: 0 auto 30px;
    align-items: center;
}

/* Главная: логотипы маркетплейсов (Group 1843) — без панельки, прямо на основном блоке */
.marketplace-logos-hero {
    max-width: 860px;
    margin-bottom: 28px;
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
}

.marketplace-logos-hero-img {
    max-height: 80px;
    min-height: 48px;
    width: auto;
    object-fit: contain;
    object-position: center;
    display: block;
    margin: 0 auto;
    border-radius: 12px;
    transition: transform 0.4s var(--ease-out-smooth);
}

.marketplace-logos-hero:hover .marketplace-logos-hero-img {
    transform: scale(1.04) translateY(-2px);
}

/* Group 210 (about) — лёгкая тень и анимация при наведении */
.group-210-img {
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06), 0 2px 10px rgba(0, 0, 0, 0.04);
    border-radius: 12px;
    transition: transform 0.4s var(--ease-out-smooth), box-shadow 0.4s var(--ease-smooth);
}

.group-210-img:hover {
    transform: scale(1.02) translateY(-3px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08), 0 6px 16px rgba(0, 0, 0, 0.05);
}

/* SVG маркетплейсов — как было: своё масштабирование, без растягивания под общие img */
.marketplace-logos-image {
    max-width: 100%;
    width: auto;
    height: auto;
    max-height: 72px;
    min-height: 44px;
    object-fit: contain;
    object-position: center;
    display: block;
    margin: 0 auto;
    transition: transform 0.3s ease;
    image-rendering: auto;
}

.marketplace-logos-image:hover,
.marketplace-logo-item:hover {
    transform: scale(1.1) translateY(-2px);
    filter: brightness(1.1);
}

.marketplace-logo-item {
    transition: all 0.3s var(--ease-premium);
    cursor: pointer;
}

.marketplace-logos-svg {
    max-width: 100%;
    width: 100%;
    height: auto;
    max-height: 60px;
    min-height: 40px;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
    transition: transform 0.3s ease;
    margin: 0 auto;
}

.marketplace-logos-svg:hover {
    transform: scale(1.05);
}

.marketplace-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 18px;
    transition: transform 0.3s ease;
}

.marketplace-logo:hover {
    transform: translateY(-2px);
}

.marketplace-logo-icon {
    max-width: 100%;
    height: 32px;
    width: auto;
    object-fit: contain;
    display: block;
}

@media (max-width: 768px) {
    .marketplace-logos-image {
        max-height: 56px;
    }

    .marketplace-logos-svg {
        max-height: 48px;
    }

    .marketplace-logo {
        padding: 6px 10px;
    }

    .marketplace-logo-icon {
        height: 26px;
    }
}

.hero-text-wrapper h1 {
    font-family: var(--font-main);
    font-size: clamp(var(--text-3xl), 6vw, var(--text-5xl));
    line-height: var(--leading-tight);
    font-weight: 700;
    margin-bottom: 24px;
    color: #111;
    letter-spacing: var(--tracking-tighter);
}

.hero-text-wrapper p {
    font-size: 1.1rem;
    color: var(--text-muted);
    margin-bottom: 32px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* Central Phone Mockup Area */
.hero-visual-container {
    position: relative;
    width: 320px;
    /* Phone width */
    height: 600px;
    /* Phone height approx */
    margin: 40px auto 0;
    z-index: 10;
    animation: slideUpFade 1.1s var(--ease-out-smooth) 0.2s forwards;
    opacity: 0;
    transform: translateY(28px) translateZ(0);
    max-width: 100%;
    padding: 0 20px;
}

/* Desktop: телефон чуть шире, снизу немного обрезаем */
@media (min-width: 769px) {
    .hero-visual-container {
        width: 380px;
        height: 712px;
    }

}

@keyframes slideUpFade {
    0% {
        opacity: 0;
        transform: translateY(28px) translateZ(0);
    }

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

/* The Phone Device */
.phone-mockup {
    width: 100%;
    height: 100%;
    background: #fff;
    border-radius: 40px;
    border: 8px solid #111;
    /* Bezel */
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    overflow: hidden;
    position: relative;
    z-index: 10;
}

/* Phone Screen Content (Placeholder for now) */
.phone-screen {
    width: 100%;
    height: 100%;
    background: #F9FAFB;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 40px;
}

.notch {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 24px;
    background: #111;
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
    z-index: 20;
}

/* App UI Inside Phone */
.app-header {
    width: 90%;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.app-logo-mark {
    width: 32px;
    height: 32px;
    background: var(--primary);
    border-radius: 8px;
}

.app-card-main {
    width: 85%;
    height: 140px;
    background: linear-gradient(135deg, var(--primary-light), var(--primary));
    border-radius: 20px;
    margin-bottom: 20px;
    box-shadow: 0 10px 20px rgba(139, 92, 246, 0.3);
}

/* FLOATING WIDGETS AROUND PHONE */
.float-card {
    position: absolute;
    background: rgba(255, 255, 255, 0.75);
    /* More transparent for glass effect */
    backdrop-filter: blur(20px) saturate(180%);
    /* Stronger blur and saturation */
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-radius: 24px;
    /* Slightly softer corners */
    padding: 14px 20px;
    /* Compact padding */
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.06);
    /* Softer shadow */
    border: 1px solid rgba(255, 255, 255, 0.5);
    z-index: 12;
    min-width: 160px;
}

/* 1. Top Left */
.float-card.top-left {
    top: 10%;
    right: 88%;
    transform: translateX(-10px);
}

/* 2. Bottom Left */
.float-card.bottom-left {
    top: 45%;
    right: 92%;
    transform: translateX(-30px);
}

/* 3. Top Right */
.float-card.top-right {
    top: 15%;
    left: 88%;
    transform: translateX(10px);
}

/* 4. Bottom Right */
.float-card.bottom-right {
    top: 48%;
    left: 90%;
    transform: translateX(20px);
}

/* Desktop: expand axes — float cards further from phone (match larger orbits) */
@media (min-width: 769px) {
    .float-card.top-left {
        right: 92%;
        transform: translateX(-20px);
    }

    .float-card.bottom-left {
        right: 94%;
        transform: translateX(-40px);
    }

    .float-card.top-right {
        left: 92%;
        transform: translateX(20px);
    }

    .float-card.bottom-right {
        left: 94%;
        transform: translateX(40px);
    }
}

/* Sample Widget Content Styles */
.widget-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.widget-icon {
    width: 52px;
    height: 52px;
    min-width: 52px;
    /* Prevent squashing */
    min-height: 52px;
    flex-shrink: 0;
    border-radius: 50%;
    background: linear-gradient(135deg, #F3F4F6 0%, #E5E7EB 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    transition: transform 0.3s var(--ease-smooth), box-shadow 0.3s var(--ease-smooth), background 0.3s var(--ease-smooth), color 0.3s var(--ease-smooth);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.widget-icon i {
    font-size: 1.3rem;
    line-height: 1;
    display: inline-block;
}

.float-card:hover .widget-icon {
    transform: scale(1.15) rotate(5deg);
    background: linear-gradient(135deg, var(--primary-light) 0%, var(--primary) 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(37, 99, 235, 0.3);
    animation: icon-bounce 0.52s var(--ease-in-out-smooth);
}

.widget-val {
    font-weight: 700;
    font-size: 1.1rem;
}

.widget-label {
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* Animation */


.animate-float {
    animation: float-smooth var(--float-duration) var(--ease-in-out-smooth) infinite;
}

.animate-float-delayed {
    animation: float-smooth var(--float-duration-delayed) var(--ease-in-out-smooth) infinite var(--float-delay);
}

/* Улучшенная анимация для плавающих карточек (GPU) */
@keyframes float-enhanced {

    0%,
    100% {
        transform: translateY(0) translateZ(0);
    }

    25% {
        transform: translateY(-12px) translateZ(0);
    }

    50% {
        transform: translateY(-8px) translateZ(0);
    }

    75% {
        transform: translateY(-15px) translateZ(0);
    }
}

.float-card.top-left {
    animation: float-enhanced 8s var(--ease-in-out-smooth) infinite;
}

.float-card.bottom-left {
    animation: float-enhanced 9s var(--ease-in-out-smooth) infinite 1s;
}

.float-card.top-right {
    animation: float-enhanced 7s var(--ease-in-out-smooth) infinite 0.5s;
}

.float-card.bottom-right {
    animation: float-enhanced 8.5s var(--ease-in-out-smooth) infinite 1.5s;
}

/* RESPONSIVE */
@media (max-width: 968px) {
    .navbar {
        width: 95%;
        /* Wider on mobile */
        max-width: 100%;
        padding: 10px 16px;
        /* Compact padding */
        top: 16px;
        /* Slightly higher */
        justify-content: space-between;
    }

    .navbar-container {
        display: grid;
        grid-template-columns: auto 1fr auto;
        align-items: center;
        column-gap: 12px;
    }

    .navbar .btn-primary {
        padding: 8px 16px;
        font-size: 0.85rem;
    }

    .satisfaction-banner {
        overflow: hidden;
        border-radius: 40px 40px 0 0;
        position: relative;
        z-index: 5;
        margin-top: -48px;
        padding-top: 48px;
    }

    .satisfaction-banner img,
    .satisfaction-banner-img {
        width: 100% !important;
        margin-left: 0 !important;
        margin-top: 0 !important;
        display: block;
    }

    /* Center Solution Cards (White Plaques) */
    .solution-visual-wrapper {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 24px 16px;
        min-height: auto !important;
        width: 100%;
    }

    .ui-mock-card {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        transform: none !important;
        margin: 0 auto;
        width: calc(100% - 32px) !important;
        max-width: 340px;
        box-sizing: border-box;
    }

    .ui-mock-card--placard {
        padding: 20px 16px 24px !important;
    }

    .ui-mock-card__traffic {
        position: absolute;
        top: 12px;
        left: 16px;
    }

    /* Выравнивание контента внутри карточек */
    .solution-card-modern {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .solution-card-modern .solution-content {
        width: 100%;
        text-align: center;
        padding: 24px 20px 32px;
    }

    .solution-card-modern .solution-content h3 {
        text-align: center;
    }

    .solution-card-modern .solution-content p {
        text-align: center;
    }

    .solution-card-modern .solution-tags {
        justify-content: center;
    }

    /* Mobile Slider Padding */
    .image-slider-section {
        padding: 0 0 40px 0 !important;
    }

    .image-slides-wrapper {
        min-height: 200px !important;
    }

    /* Reduce spacing from previous section */
    .features-security-section {
        padding-bottom: 10px !important;
    }

    /* Mobile FAQ List (Rectangles) */
    .faq-grid {
        display: flex;
        flex-direction: column;
        gap: 15px;
        grid-template-columns: 1fr !important;
    }

    .faq-card {
        width: 100%;
        min-height: auto;
        height: auto !important;
        aspect-ratio: auto !important;
    }

    .logo {
        position: static;
        transform: none;
        justify-self: center;
        max-width: 100%;
        z-index: 5;
        font-size: 1.2rem;
    }

    .nav-links {
        display: none;
    }

    .hamburger-btn {
        display: flex !important;
        pointer-events: auto !important;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
        z-index: 100001 !important;
        position: relative !important;
    }

    .hamburger-btn:focus {
        outline: none;
    }

    .nav-right {
        justify-self: end;
    }

    .container {
        padding-left: 16px;
        padding-right: 16px;
    }

    .process-steps {
        flex-direction: column;
    }

    .solution-row,
    .solution-row.reverse {
        flex-direction: column;
        gap: 40px;
        margin-bottom: 80px;
    }

    .faq-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    body {
        font-size: 15px;
        line-height: 1.55;
    }

    h1 {
        font-size: 2rem;
    }

    h2 {
        font-size: 1.5rem;
    }

    h3 {
        font-size: 1.2rem;
    }

    /* Убираем скрытие текста логотипа - показываем EcomVision */
    .logo-with-mark .logo-text {
        display: block !important;
        font-size: 1rem;
    }

    .navbar .btn-primary {
        padding: 8px 12px;
        font-size: 0.8rem;
    }

    .marketplace-logos {
        gap: 8px;
        margin-bottom: 24px;
    }

    .marketplace-logos-image {
        max-height: 60px;
    }

    .marketplace-logo {
        padding: 8px 12px;
        font-size: 0.85rem;
    }
}

/* PROCESS SECTION - Glass Cards */
.smooth-transition {
    position: relative;
    overflow: hidden;
}

/* Стык тёмного блока и баннера — без белых зазоров в углах */
.satisfaction-banner {
    position: relative;
    z-index: 10;
    margin-top: -160px;
}

.satisfaction-banner-img {
    width: 100%;
    display: block;
    border-radius: 0 0 40px 40px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.process-section {
    padding: 120px 0 160px;
    margin-top: -360px;
    position: relative;
    z-index: 20;
    background: linear-gradient(135deg,
            #0a0a0f 0%,
            /* Almost black */
            #0f0f1a 20%,
            /* Very dark blue-purple */
            #0d0d14 40%,
            /* Dark grey-blue */
            #12121d 60%,
            /* Subtle indigo */
            #0e0e16 80%,
            /* Dark blue-grey */
            #0a0a0f 100%
            /* Back to almost black */
        );
    background-size: 200% 200%;
    animation: gradient-rotate 20s ease infinite;
    border-radius: 40px;
    -webkit-mask-image: linear-gradient(to bottom, black calc(100% - 160px), transparent 100%);
    mask-image: linear-gradient(to bottom, black calc(100% - 160px), transparent 100%);
    color: #FFFFFF;
    overflow: hidden;
}

/* Aurora light effect overlay */
.process-section::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle at center,
            rgba(79, 70, 229, 0.08) 0%,
            rgba(99, 102, 241, 0.05) 25%,
            rgba(59, 130, 246, 0.03) 50%,
            transparent 70%);
    animation: aurora-flow 25s ease-in-out infinite;
    z-index: 0;
    pointer-events: none;
    mix-blend-mode: screen;
}

/* Grid pattern with purple-blue tint */
.process-section::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        linear-gradient(rgba(99, 102, 241, 0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(96, 165, 250, 0.02) 1px, transparent 1px);
    background-size: 40px 40px;
    z-index: 1;
    pointer-events: none;
    animation: pan-grid 20s linear infinite;
    opacity: 0.4;
}

@keyframes pan-grid {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: 40px 40px;
    }
}


/* Mobile: тёмный блок перекрывает телефон сверху и изображение 95% снизу */
@media (max-width: 768px) {
    .process-section {
        margin-top: -120px !important;
        padding: 60px 20px 40px 20px !important;
        margin-bottom: 0 !important;
        z-index: 20;
        /* Скругление только сверху для слияния с баннером */
        border-radius: 30px 30px 0 0;
        -webkit-mask-image: none !important;
        mask-image: none !important;
    }

    .process-section .section-title {
        margin-bottom: 32px !important;
    }

    .process-section .section-title h2 {
        font-size: 1.75rem !important;
        margin-bottom: 10px;
        line-height: 1.3;
    }

    .process-section .section-title p {
        font-size: 1rem !important;
        margin-top: 8px !important;
    }

    .process-section .process-steps {
        flex-direction: column;
        gap: 20px;
        margin-top: 20px;
    }

    .process-section .step-card {
        margin-bottom: 0;
        padding: 24px 20px;
    }

    /* Satisfaction Banner - Mobile Card Style */
    .satisfaction-banner {
        /* Убираем промежуток для слияния с верхним блоком */
        margin-top: -10px !important;
        padding-top: 0 !important;
        margin-bottom: 40px;

        /* На всю ширину для слияния */
        padding-left: 0;
        padding-right: 0;
        border-radius: 0;
        background: transparent;
    }

    .satisfaction-banner-img,
    .satisfaction-banner img {
        width: 100% !important;
        height: auto !important;
        margin-left: 0 !important;
        margin-top: 0 !important;
        display: block;

        /* Скругление только снизу */
        border-radius: 0 0 24px 24px !important;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    }

    .process-section::after {
        display: none;
        /* Hide any overlapping decorative elements */
    }

    .how-we-work-section {
        border-radius: 30px;
        margin-top: 0;
        /* Natural flow */
        background: var(--bg-light);
    }
}

.how-we-work-section {
    background: var(--bg-light);
    position: relative;
    border-radius: 40px;
    overflow: hidden;
    margin-top: -40px;
}

.features-security-section {
    background: var(--bg-light);
    position: relative;
}

.process-section .section-title h2 {
    color: #FFFFFF;
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1.25;
}

.process-section .section-title p {
    color: #9CA3AF;
}

.process-steps {
    display: flex;
    justify-content: space-between;
    gap: 30px;
    margin-top: 60px;
    position: relative;
    z-index: 2;
}

/* FOOTPRINT OVERLAY — removed: footprints.png missing, class unused in HTML */

/* INFographics HERO SLIDE */
.infographics-hero-section {
    padding: 48px 0;
    background: transparent;
    position: relative;
    overflow: visible;
}

@media (max-width: 1024px) {
    .infographics-hero-section {
        padding: 40px 0;
    }
}

@media (max-width: 768px) {
    .infographics-hero-section {
        padding: 32px 0;
    }
}

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

.infographics-hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 800px;
    height: 800px;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.06) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

.infographics-hero-card {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    background: #fff;
    border-radius: 28px;
    overflow: hidden;
    box-shadow: 0 16px 60px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.03);
    height: 100%;
    min-height: 360px;
    padding: 2.5rem 3rem;
    box-sizing: border-box;
    position: relative;
}

@media (max-width: 1024px) {
    .infographics-hero-card {
        padding: 2rem 2.5rem;
        min-height: 320px;
        gap: 1.5rem;
    }
}

@media (max-width: 768px) {
    .infographics-hero-card {
        padding: 1.5rem 1.25rem;
        min-height: auto;
        gap: 1.25rem;
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 480px) {
    .infographics-hero-card {
        padding: 1.25rem 1rem;
        gap: 1rem;
        border-radius: 16px;
    }
}

.infographics-hero-content {
    flex: 1 1 320px;
    max-width: 480px;
    position: relative;
    z-index: 2;
}

@media (max-width: 1024px) {
    .infographics-hero-content {
        flex: 1 1 280px;
        max-width: 420px;
    }
}

@media (max-width: 768px) {
    .infographics-hero-content {
        flex: 1 1 auto;
        max-width: 100%;
        text-align: center;
    }
}

.infographics-hero-title {
    font-size: var(--section-title-size);
    font-weight: 800;
    color: #111827;
    line-height: var(--section-title-line);
    margin: 0 0 0.75rem;
    letter-spacing: var(--section-title-letter);
}

@media (max-width: 1024px) {
    .infographics-hero-title {
        font-size: 1.75rem;
        margin: 0 0 0.625rem;
    }
}

@media (max-width: 768px) {
    .infographics-hero-title {
        font-size: 1.5rem;
        margin: 0 0 0.5rem;
    }
}

@media (max-width: 480px) {
    .infographics-hero-title {
        font-size: 1.25rem;
        margin: 0 0 0.5rem;
    }
}

.infographics-hero-tagline {
    font-size: 1.05rem;
    color: #6B7280;
    margin: 0 0 1.25rem;
    line-height: 1.6;
    letter-spacing: 0.01em;
}

@media (max-width: 768px) {
    .infographics-hero-tagline {
        font-size: 0.95rem;
        margin: 0 0 1rem;
    }
}

@media (max-width: 480px) {
    .infographics-hero-tagline {
        font-size: 0.875rem;
        margin: 0 0 0.75rem;
    }
}

.infographics-hero-dots {
    display: flex;
    gap: 8px;
    margin-bottom: 1.75rem;
}

.infographics-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.15);
    transition: background 0.2s;
}

.infographics-dot.active {
    background: var(--primary);
}

.btn-infographics-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 28px;
    font-size: 0.95rem;
    font-weight: 600;
    font-family: var(--font-main);
    color: #fff;
    background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.32, 0.72, 0, 1);
    box-shadow: 0 6px 20px rgba(59, 130, 246, 0.3);
}

@media (max-width: 768px) {
    .btn-infographics-more {
        padding: 10px 22px;
        font-size: 0.9rem;
        border-radius: 10px;
    }
}

@media (max-width: 480px) {
    .btn-infographics-more {
        padding: 9px 18px;
        font-size: 0.85rem;
        border-radius: 8px;
    }
}

.btn-infographics-more:hover {
    background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%);
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(59, 130, 246, 0.45);
}

.btn-infographics-more::after {
    content: '→';
    font-size: 1.1rem;
    transition: transform 0.3s ease;
}

.btn-infographics-more:hover::after {
    transform: translateX(4px);
}

.infographics-hero-visual {
    position: relative;
    flex: 1 1 360px;
    min-height: 240px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem;
}

@media (max-width: 1024px) {
    .infographics-hero-visual {
        flex: 1 1 320px;
        min-height: 200px;
        padding: 0.5rem;
    }
}

@media (max-width: 768px) {
    .infographics-hero-visual {
        flex: 1 1 auto;
        min-height: 180px;
        width: 100%;
        max-width: 100%;
        justify-content: center;
        padding: 0.5rem 0;
    }
}

@media (max-width: 480px) {
    .infographics-hero-visual {
        min-height: 160px;
    }
}

.infographics-hero-bg {
    position: absolute;
    inset: -40%;
    background: radial-gradient(ellipse 120% 100% at 50% 50%,
            rgba(37, 99, 221, 0.04) 0%,
            rgba(37, 99, 221, 0.025) 20%,
            rgba(37, 99, 221, 0.015) 35%,
            rgba(255, 255, 255, 0.3) 50%,
            rgba(255, 255, 255, 0.6) 70%,
            rgba(255, 255, 255, 0.95) 100%);
    border-radius: 32px;
    pointer-events: none;
    filter: blur(40px);
}

.infographics-hero-img {
    position: relative;
    max-width: 100%;
    height: auto;
    max-height: 260px;
    object-fit: contain;
}

/* Блок инфографики: сдержанный стиль, как в эталоне */
.infographics-hero-card--glass {
    background: #ffffff;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: none;
    position: relative;
    overflow: hidden;
    border-radius: 28px;
    transition: border-color 0.3s ease, background 0.3s ease;
}

.infographics-hero-card--glass:hover {
    border-color: rgba(0, 0, 0, 0.08);
    background: #fafafa;
}

.design-block-card.infographics-hero-card--glass {
    overflow: hidden;
}

/* Дизайн-блок: центральное свечение (как в примерах) */
.design-block-card {
    background: rgba(255, 255, 255, 0.78);
    padding-bottom: 3.5rem;
    overflow: hidden;
}

.design-block-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    opacity: 0.03;
    pointer-events: none;
    z-index: 0;
    border-radius: inherit;
}

.design-block-glow--center {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg,
            rgba(16, 185, 129, 0.06) 0%,
            rgba(52, 211, 153, 0.04) 30%,
            rgba(99, 102, 241, 0.03) 60%,
            rgba(16, 185, 129, 0.05) 100%);
    background-size: 400% 400%;
    animation: shimmer-center 8s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
    border-radius: inherit;
}

@keyframes shimmer-center {

    0%,
    100% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }
}

/* Дуга направлений: Фото — Инфографика — Веб-дизайн (стеклянные пилюли) */
.design-block-arc {
    position: absolute;
    bottom: 0.75rem;
    left: 1.25rem;
    top: auto;
    right: auto;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    z-index: 2;
    flex-wrap: wrap;
    justify-content: flex-start;
}

@media (max-width: 768px) {
    .design-block-arc {
        bottom: 0.5rem;
        left: 1rem;
        gap: 0.3rem;
    }
}

@media (max-width: 480px) {
    .design-block-arc {
        bottom: 0.4rem;
        left: 0.75rem;
        gap: 0.25rem;
    }
}

.design-arc-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.7rem;
    font-size: 0.7rem;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.8);
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 100px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    line-height: 1;
    letter-spacing: 0.02em;
}

@media (max-width: 768px) {
    .design-arc-pill {
        padding: 0.3rem 0.55rem;
        font-size: 0.625rem;
        gap: 0.25rem;
    }
}

@media (max-width: 480px) {
    .design-arc-pill {
        padding: 0.25rem 0.45rem;
        font-size: 0.55rem;
    }
}

.design-arc-pill i {
    font-size: 0.7rem;
    color: var(--primary);
    opacity: 0.9;
}

.design-arc-pill:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(37, 99, 221, 0.12);
}

.design-arc-pill--1 {
    transform: rotate(-4deg);
}

.design-arc-pill--1:hover {
    transform: rotate(-4deg) translateY(-2px);
}

.design-arc-pill--2 {
    transform: rotate(0deg);
}

.design-arc-pill--3 {
    transform: rotate(3deg);
}

.design-arc-pill--3:hover {
    transform: rotate(3deg) translateY(-2px);
}

/* Бейдж над заголовком */
.design-block-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #3B82F6;
    background: rgba(59, 130, 246, 0.1);
    padding: 5px 12px;
    border-radius: 100px;
    margin-bottom: 0.75rem;
    line-height: 1;
}

@media (max-width: 768px) {
    .design-block-badge {
        font-size: 0.625rem;
        padding: 4px 10px;
        margin-bottom: 0.5rem;
    }
}

@media (max-width: 480px) {
    .design-block-badge {
        font-size: 0.55rem;
        padding: 3px 8px;
        margin-bottom: 0.4rem;
    }
}

.design-block-title {
    position: relative;
    display: inline-block;
    padding: 0.15em 0;
    border-bottom: 2px solid rgba(37, 99, 221, 0.25);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}

/* Кнопка в стиле примера */
.btn-design-block {
    box-shadow: 0 4px 20px rgba(37, 99, 221, 0.25);
}

/* Нижний текстовый блок (как в примерах) */
.design-block-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 1rem 2rem 1.25rem;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.04), transparent);
    border-radius: 0 0 40px 40px;
    z-index: 1;
}

.design-block-footer-text {
    font-size: 0.9rem;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.75);
}

.design-block-footer-cta {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--primary);
    opacity: 0.9;
}

.design-block-dots-hidden {
    display: none;
}

@media (max-width: 768px) {
    .design-block-arc {
        top: 0.75rem;
        right: 0.75rem;
        gap: 0.35rem;
    }

    .design-arc-pill {
        padding: 0.35rem 0.6rem;
        font-size: 0.7rem;
    }

    .design-block-footer {
        padding: 0.75rem 1rem 1rem;
        flex-direction: column;
        align-items: flex-start;
    }
}

.infographics-hero-glow-right {
    display: none;
    /* Основной переливающийся фон в design-block-glow--center */
}

.infographics-hero-card--glass .infographics-hero-content,
.infographics-hero-card--glass .infographics-hero-visual {
    position: relative;
    z-index: 1;
}

.infographics-hero-visual--glass {
    align-items: center;
    justify-content: flex-start;
    padding: 1rem 0 1rem 0;
    position: relative;
    flex-wrap: nowrap;
    gap: 0.5rem;
}

/* Правая часть слайда «Инфографика» — ровная сетка под изображения */
.infographics-hero-floats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 10px 14px;
    align-items: center;
    justify-items: center;
    width: 240px;
    min-height: 220px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 20px;
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.05);
}

@media (max-width: 1024px) {
    .infographics-hero-floats {
        width: 200px;
        min-height: 180px;
        gap: 8px 12px;
        padding: 10px;
        border-radius: 16px;
    }
}

@media (max-width: 768px) {
    .infographics-hero-floats {
        width: 160px;
        min-height: 140px;
        gap: 6px 10px;
        padding: 8px;
        border-radius: 14px;
    }
}

@media (max-width: 480px) {
    .infographics-hero-floats {
        width: 130px;
        min-height: 110px;
        gap: 4px 6px;
        padding: 6px;
        border-radius: 12px;
    }
}

.infographics-hero-floats .infographics-hero-img {
    grid-column: 1 / -1;
    grid-row: 1 / -1;
    width: 100%;
    height: 100%;
    max-height: 280px;
    object-fit: contain;
    object-position: center;
    border-radius: 16px;
    box-shadow: none;
}

.infographics-hero-visual--glass .infographics-hero-img {
    max-height: 260px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    border-radius: 20px;
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.06);
}

@media (max-width: 1024px) {
    .infographics-hero-visual--glass .infographics-hero-img {
        max-height: 220px;
        border-radius: 16px;
    }
}

@media (max-width: 768px) {
    .infographics-hero-visual--glass .infographics-hero-img {
        max-height: 180px;
        border-radius: 14px;
    }
}

@media (max-width: 480px) {
    .infographics-hero-visual--glass .infographics-hero-img {
        max-height: 140px;
        border-radius: 12px;
    }
}

/* Каскад 1, 2, 3 — место и анимация без багов, кристально плавно */
.infographics-cascade {
    position: relative;
    width: 220px;
    height: 280px;
    flex-shrink: 0;
    margin-right: 0.75rem;
}

@media (max-width: 1024px) {
    .infographics-cascade {
        width: 180px;
        height: 240px;
        margin-right: 0.5rem;
    }
}

@media (max-width: 768px) {
    .infographics-cascade {
        width: 140px;
        height: 200px;
        margin-right: 0.5rem;
    }
}

@media (max-width: 480px) {
    .infographics-cascade {
        width: 110px;
        height: 160px;
        margin-right: 0.25rem;
    }
}

.infographics-cascade-item {
    position: absolute;
    width: 130px;
    background: transparent;
    border: none;
    box-shadow: none;
    overflow: visible;
    filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.10));
    transition:
        transform 0.5s cubic-bezier(0.23, 1, 0.32, 1),
        filter 0.5s cubic-bezier(0.23, 1, 0.32, 1);
    backface-visibility: hidden;
    cursor: pointer;
    pointer-events: auto;
    border-radius: 12px;
    will-change: transform, filter;
}

.infographics-cascade-item:hover {
    filter: drop-shadow(0 20px 40px rgba(59, 130, 246, 0.22))
            drop-shadow(0 6px 14px rgba(0, 0, 0, 0.10));
    animation-play-state: paused !important;
}

.infographics-cascade-item img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
    background: transparent;
    transition: filter 0.5s cubic-bezier(0.23, 1, 0.32, 1);
    border-radius: inherit;
}

.infographics-cascade-item:hover img {
    filter: brightness(1.05) saturate(1.08);
}

@media (max-width: 1024px) {
    .infographics-cascade-item {
        width: 110px;
    }
}

@media (max-width: 768px) {
    .infographics-cascade-item {
        width: 90px;
        border-radius: 10px;
    }
}

@media (max-width: 480px) {
    .infographics-cascade-item {
        width: 70px;
        border-radius: 8px;
    }
}

/* Позиции 1, 2, 3 — чётко слева от основного изображения, каскадом без сильного наложения */
.infographics-cascade-item--front {
    left: 0;
    top: 12%;
    z-index: 3;
    animation: cascadeEnterFront 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0s both, cascadeFloatFront 8s ease-in-out 0s infinite;
}

.infographics-cascade-item--mid {
    left: 48px;
    top: 28%;
    z-index: 2;
    animation: cascadeEnterMid 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both, cascadeFloatMid 8s ease-in-out 0.3s infinite;
}

.infographics-cascade-item--back {
    left: 92px;
    top: 44%;
    z-index: 1;
    animation: cascadeEnterBack 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both, cascadeFloatBack 8s ease-in-out 0.6s infinite;
}

/* При наведении карточка красиво выезжает с 3D эффектом */
.infographics-cascade-item--front:hover,
.infographics-cascade-item--mid:hover,
.infographics-cascade-item--back:hover {
    z-index: 10;
}

/* Передняя карточка — мягко влево-вверх */
.infographics-cascade-item--front:hover {
    transform: translateX(-18px) translateY(-22px) rotate(-8deg) scale(1.14) !important;
}

/* Средняя карточка — мягко вверх */
.infographics-cascade-item--mid:hover {
    transform: translateY(-26px) scale(1.14) !important;
}

/* Задняя карточка — мягко вправо-вверх */
.infographics-cascade-item--back:hover {
    transform: translateX(18px) translateY(-22px) rotate(8deg) scale(1.14) !important;
}

@keyframes cascadeEnterFront {
    from {
        opacity: 0;
        transform: rotate(-10deg) translateY(20px);
    }

    to {
        opacity: 1;
        transform: rotate(-10deg) translateY(0);
    }
}

@keyframes cascadeEnterMid {
    from {
        opacity: 0;
        transform: rotate(-1deg) translateY(20px);
    }

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

@keyframes cascadeEnterBack {
    from {
        opacity: 0;
        transform: rotate(9deg) translateY(20px);
    }

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

@keyframes cascadeFloatFront {
    0%, 100% { transform: rotate(-10deg) translateY(0); }
    50% { transform: rotate(-10deg) translateY(-3px); }
}

@keyframes cascadeFloatMid {
    0%, 100% { transform: rotate(-1deg) translateY(0); }
    50% { transform: rotate(-1deg) translateY(-3px); }
}

@keyframes cascadeFloatBack {
    0%, 100% { transform: rotate(9deg) translateY(0); }
    50% { transform: rotate(9deg) translateY(-3px); }
}

/* Анимация дуги в блоке инфографики (появление по очереди, без перезаписи rotate) */
@keyframes designPillIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.design-arc-pill--1 {
    animation: designPillIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both;
}

.design-arc-pill--2 {
    animation: designPillIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both;
}

.design-arc-pill--3 {
    animation: designPillIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.3s both;
}

@media (max-width: 768px) {
    .infographics-hero-card {
        padding: 1.75rem 1.5rem;
        flex-direction: column;
        text-align: center;
    }

    .infographics-hero-content {
        max-width: none;
    }

    .infographics-hero-dots {
        justify-content: center;
    }

    .infographics-hero-visual--glass {
        justify-content: center;
        padding: 1rem 0;
        flex-wrap: wrap;
    }

    .infographics-hero-visual--glass .infographics-hero-img {
        max-height: 280px;
    }

    .infographics-hero-floats {
        width: 100%;
        max-width: 260px;
        min-height: 220px;
        gap: 10px 14px;
        padding: 12px;
    }

    .infographics-hero-floats .infographics-hero-img {
        max-height: 240px;
    }

    .infographics-cascade {
        margin-right: 0;
        margin-bottom: 0.5rem;
        width: 200px;
        height: 240px;
        order: -1;
    }

    .infographics-cascade-item {
        width: 115px;
    }

    .infographics-cascade-item--front {
        left: 0;
        top: 8%;
    }

    .infographics-cascade-item--mid {
        left: 42px;
        top: 24%;
    }

    .infographics-cascade-item--back {
        left: 82px;
        top: 40%;
    }

    .infographics-cascade-item--front:hover {
        transform: 
            translateX(-25px) 
            translateY(-25px) 
            translateZ(40px)
            rotate(-10deg) 
            scale(1.15) !important;
    }

    .infographics-cascade-item--mid:hover {
        transform: 
            translateX(0px) 
            translateY(-30px) 
            translateZ(50px)
            rotate(0deg) 
            scale(1.18) !important;
    }

    .infographics-cascade-item--back:hover {
        transform: 
            translateX(25px) 
            translateY(-25px) 
            translateZ(40px)
            rotate(10deg) 
            scale(1.15) !important;
    }

    @keyframes cascadeFloatFront {

        0%,
        100% {
            transform: rotate(-10deg) translateY(0);
        }

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

    @keyframes cascadeFloatMid {

        0%,
        100% {
            transform: rotate(-1deg) translateY(0);
        }

        50% {
            transform: rotate(-1deg) translateY(-4px);
        }
    }

    @keyframes cascadeFloatBack {

        0%,
        100% {
            transform: rotate(9deg) translateY(0);
        }

        50% {
            transform: rotate(9deg) translateY(-4px);
        }
    }
}

/* =========================== */
/* DESIGN SERVICES SLIDER      */
/* =========================== */

.design-services-slider {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
}

.design-slides-container {
    position: relative;
    overflow: hidden;
    height: 420px;
    border-radius: 28px;
}

@media (max-width: 1024px) {
    .design-slides-container {
        height: 380px;
    }
}

@media (max-width: 768px) {
    .design-slides-container {
        height: auto;
        min-height: 480px;
        border-radius: 20px;
    }
}

@media (max-width: 480px) {
    .design-slides-container {
        min-height: 420px;
        border-radius: 16px;
    }
}

.design-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    transform: translateX(60px) scale(0.98);
    transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.6s cubic-bezier(0.4, 0, 0.2, 1),
        visibility 0s 0.6s;
    will-change: opacity, transform;
}

.design-slide--active {
    position: absolute;
    opacity: 1;
    visibility: visible;
    transform: translateX(0) scale(1);
    transition: opacity 0.55s cubic-bezier(0.32, 0.72, 0, 1),
        transform 0.55s cubic-bezier(0.32, 0.72, 0, 1),
        visibility 0s 0s;
}

.design-slide--prev {
    transform: translateX(-60px) scale(0.98);
}

/* Плавное появление контента слайда */
.design-slide-content-inner .infographics-hero-content,
.design-slide-content-inner .infographics-hero-visual,
.design-slide-content-inner .design-block-arc {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.design-slide--active .design-slide-content-inner .infographics-hero-content {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.08s;
}

.design-slide--active .design-slide-content-inner .infographics-hero-visual {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.16s;
}

.design-slide--active .design-slide-content-inner .design-block-arc {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.24s;
}

.design-slide-content-inner {
    display: contents;
}

.design-slide-cta {
    margin-top: 1rem;
}

@media (max-width: 768px) {
    .design-slide-cta {
        margin-top: 0.75rem;
    }
}

@media (max-width: 480px) {
    .design-slide-cta {
        margin-top: 0.5rem;
    }
}

/* Декоративная зона — вся правая часть, элементы по контуру интерактива */
.design-slide-decor--right {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 58%;
    max-width: 460px;
    pointer-events: none;
    z-index: 10;
}

.design-slide-decor--right .design-slide-sparkle,
.design-slide-decor--right .design-slide-star {
    position: absolute;
    margin: 0;
}

/* Слайд 1: Инфографика — хаотично вокруг карточек */
.design-slide[data-slide="1"] .design-slide-decor--right .decor-pos-a {
    top: -4%;
    left: 6%;
}

.design-slide[data-slide="1"] .design-slide-decor--right .decor-pos-b {
    top: 8%;
    left: 32%;
}

.design-slide[data-slide="1"] .design-slide-decor--right .decor-pos-c {
    top: 2%;
    right: 18%;
}

.design-slide[data-slide="1"] .design-slide-decor--right .decor-pos-d {
    top: 18%;
    right: 44%;
}

.design-slide[data-slide="1"] .design-slide-decor--right .decor-pos-e {
    top: 30%;
    right: -1%;
}

.design-slide[data-slide="1"] .design-slide-decor--right .decor-pos-f {
    top: 48%;
    right: 28%;
}

.design-slide[data-slide="1"] .design-slide-decor--right .decor-pos-g {
    bottom: 26%;
    right: -3%;
}

.design-slide[data-slide="1"] .design-slide-decor--right .decor-pos-h {
    bottom: -4%;
    right: 38%;
}

.design-slide[data-slide="1"] .design-slide-decor--right .decor-pos-i {
    bottom: 10%;
    left: 22%;
}

.design-slide[data-slide="1"] .design-slide-decor--right .decor-pos-j {
    bottom: -1%;
    left: -2%;
}

.design-slide[data-slide="1"] .design-slide-decor--right .decor-pos-k {
    top: 36%;
    left: 2%;
}

.design-slide[data-slide="1"] .design-slide-decor--right .decor-pos-l {
    bottom: 44%;
    left: 30%;
}

/* Слайд 2: Веб — более хаотичное облако */
.design-slide[data-slide="2"] .design-slide-decor--right .decor-pos-a {
    top: -3%;
    left: 18%;
}

.design-slide[data-slide="2"] .design-slide-decor--right .decor-pos-b {
    top: 6%;
    left: 46%;
}

.design-slide[data-slide="2"] .design-slide-decor--right .decor-pos-c {
    top: 4%;
    right: 26%;
}

.design-slide[data-slide="2"] .design-slide-decor--right .decor-pos-d {
    top: -2%;
    right: 12%;
}

.design-slide[data-slide="2"] .design-slide-decor--right .decor-pos-e {
    top: 34%;
    right: 48%;
}

.design-slide[data-slide="2"] .design-slide-decor--right .decor-pos-f {
    top: 54%;
    right: -3%;
}

.design-slide[data-slide="2"] .design-slide-decor--right .decor-pos-g {
    bottom: 30%;
    right: 14%;
}

.design-slide[data-slide="2"] .design-slide-decor--right .decor-pos-h {
    bottom: 6%;
    right: -2%;
}

.design-slide[data-slide="2"] .design-slide-decor--right .decor-pos-i {
    bottom: -4%;
    left: 36%;
}

.design-slide[data-slide="2"] .design-slide-decor--right .decor-pos-j {
    bottom: 18%;
    left: 6%;
}

.design-slide[data-slide="2"] .design-slide-decor--right .decor-pos-k {
    top: 24%;
    left: -2%;
}

.design-slide[data-slide="2"] .design-slide-decor--right .decor-pos-l {
    bottom: 40%;
    left: 22%;
}

/* Слайд 3: Фото — живое рассыпание */
.design-slide[data-slide="3"] .design-slide-decor--right .decor-pos-a {
    top: -3%;
    left: 4%;
}

.design-slide[data-slide="3"] .design-slide-decor--right .decor-pos-b {
    top: 10%;
    left: 34%;
}

.design-slide[data-slide="3"] .design-slide-decor--right .decor-pos-c {
    top: 0%;
    right: 16%;
}

.design-slide[data-slide="3"] .design-slide-decor--right .decor-pos-d {
    top: 22%;
    right: 46%;
}

.design-slide[data-slide="3"] .design-slide-decor--right .decor-pos-e {
    top: 36%;
    right: -3%;
}

.design-slide[data-slide="3"] .design-slide-decor--right .decor-pos-f {
    bottom: 34%;
    right: 28%;
}

.design-slide[data-slide="3"] .design-slide-decor--right .decor-pos-g {
    bottom: 12%;
    right: -2%;
}

.design-slide[data-slide="3"] .design-slide-decor--right .decor-pos-h {
    bottom: -4%;
    right: 24%;
}

.design-slide[data-slide="3"] .design-slide-decor--right .decor-pos-i {
    bottom: 8%;
    left: 18%;
}

.design-slide[data-slide="3"] .design-slide-decor--right .decor-pos-j {
    bottom: -2%;
    left: -2%;
}

.design-slide[data-slide="3"] .design-slide-decor--right .decor-pos-k {
    top: 50%;
    left: 2%;
}

.design-slide[data-slide="3"] .design-slide-decor--right .decor-pos-l {
    top: 30%;
    left: 24%;
}

/* Слайд 4: Бренд — более динамичная композиция */
.design-slide[data-slide="4"] .design-slide-decor--right .decor-pos-a {
    top: -2%;
    left: 14%;
}

.design-slide[data-slide="4"] .design-slide-decor--right .decor-pos-b {
    top: 4%;
    left: 44%;
}

.design-slide[data-slide="4"] .design-slide-decor--right .decor-pos-c {
    top: 6%;
    right: 20%;
}

.design-slide[data-slide="4"] .design-slide-decor--right .decor-pos-d {
    top: -3%;
    right: 10%;
}

.design-slide[data-slide="4"] .design-slide-decor--right .decor-pos-e {
    top: 40%;
    right: 46%;
}

.design-slide[data-slide="4"] .design-slide-decor--right .decor-pos-f {
    top: 60%;
    right: -3%;
}

.design-slide[data-slide="4"] .design-slide-decor--right .decor-pos-g {
    bottom: 20%;
    right: 16%;
}

.design-slide[data-slide="4"] .design-slide-decor--right .decor-pos-h {
    bottom: -3%;
    right: 34%;
}

.design-slide[data-slide="4"] .design-slide-decor--right .decor-pos-i {
    bottom: 6%;
    left: 26%;
}

.design-slide[data-slide="4"] .design-slide-decor--right .decor-pos-j {
    bottom: -1%;
    left: -1%;
}

.design-slide[data-slide="4"] .design-slide-decor--right .decor-pos-k {
    top: 34%;
    left: 2%;
}

.design-slide[data-slide="4"] .design-slide-decor--right .decor-pos-l {
    bottom: 36%;
    left: 20%;
}

/* Пузырьки — цвет под каждый слайд, разные размеры для динамики */
.design-slide-sparkle {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    pointer-events: none;
    animation: sparklePulse 3s ease-in-out infinite;
}

.design-slide-decor--right .decor-pos-b.design-slide-sparkle,
.design-slide-decor--right .decor-pos-e.design-slide-sparkle {
    width: 8px;
    height: 8px;
}

.design-slide-decor--right .decor-pos-g.design-slide-sparkle,
.design-slide-decor--right .decor-pos-l.design-slide-sparkle {
    width: 13px;
    height: 13px;
}

/* Слайд 1: Инфографика — бирюзово-зелёный (в тон блоку) */
.design-slide-sparkle--slide1 {
    background: radial-gradient(circle at 30% 30%, rgba(16, 185, 129, 0.55), rgba(52, 211, 153, 0.25));
    box-shadow: 0 0 20px rgba(16, 185, 129, 0.3);
}

/* Слайд 2: Веб — фиолетовый */
.design-slide-sparkle--slide2 {
    background: radial-gradient(circle at 30% 30%, rgba(139, 92, 246, 0.55), rgba(167, 139, 250, 0.25));
    box-shadow: 0 0 20px rgba(139, 92, 246, 0.3);
}

/* Слайд 3: Фото/видео — тёплый оранжевый */
.design-slide-sparkle--slide3 {
    background: radial-gradient(circle at 30% 30%, rgba(245, 158, 11, 0.55), rgba(251, 191, 36, 0.25));
    box-shadow: 0 0 20px rgba(245, 158, 11, 0.3);
}

/* Слайд 4: Бренд — градиент синий–зелёный */
.design-slide-sparkle--slide4 {
    background: radial-gradient(circle at 30% 30%, rgba(59, 130, 246, 0.5), rgba(16, 185, 129, 0.25));
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.25);
}

/* Звёзды AI — 4 угла (4 грани), разные размеры для стиля */
.design-slide-star {
    display: block;
    width: 11px;
    height: 11px;
    /* 4-конечная звезда: 4 вершины + 4 впадины */
    clip-path: polygon(50% 0%, 68% 32%, 100% 50%, 68% 68%, 50% 100%, 32% 68%, 0% 50%, 32% 32%);
    pointer-events: none;
    animation: starShine 4s ease-in-out infinite;
    -webkit-clip-path: polygon(50% 0%, 68% 32%, 100% 50%, 68% 68%, 50% 100%, 32% 68%, 0% 50%, 32% 32%);
}

.design-slide-decor--right .decor-pos-a.design-slide-star,
.design-slide-decor--right .decor-pos-c.design-slide-star {
    width: 14px;
    height: 14px;
}

.design-slide-decor--right .decor-pos-i.design-slide-star,
.design-slide-decor--right .decor-pos-k.design-slide-star {
    width: 9px;
    height: 9px;
}

.design-slide-star--slide1 {
    background: rgba(16, 185, 129, 0.9);
    box-shadow: 0 0 14px rgba(16, 185, 129, 0.6), 0 0 28px rgba(52, 211, 153, 0.35);
}

.design-slide-star--slide2 {
    background: rgba(139, 92, 246, 0.9);
    box-shadow: 0 0 14px rgba(139, 92, 246, 0.6), 0 0 28px rgba(167, 139, 250, 0.35);
}

.design-slide-star--slide3 {
    background: rgba(245, 158, 11, 0.9);
    box-shadow: 0 0 14px rgba(245, 158, 11, 0.6), 0 0 28px rgba(251, 191, 36, 0.35);
}

.design-slide-star--slide4 {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.95), rgba(16, 185, 129, 0.8));
    box-shadow: 0 0 14px rgba(59, 130, 246, 0.5), 0 0 28px rgba(16, 185, 129, 0.3);
}

@keyframes starShine {

    0%,
    100% {
        opacity: 0.8;
    }

    50% {
        opacity: 1;
    }
}

.design-slide-quote-bubble {
    position: absolute;
    background: white;
    padding: 12px 16px;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    max-width: 160px;
    z-index: 10;
    font-size: 0.8rem;
    color: #4B5563;
    line-height: 1.45;
    font-weight: 500;
    pointer-events: none;
    opacity: 0;
    transform: scale(0.9) translateY(8px);
    transition: opacity 0.5s var(--ease-slide) 0.6s, transform 0.5s var(--ease-slide) 0.6s;
}

.design-slide--active .design-slide-quote-bubble {
    opacity: 1;
    transform: scale(1) translateY(0);
}

.design-slide-quote-bubble::before {
    content: '"';
    font-size: 1.5rem;
    color: #3B82F6;
    font-family: var(--font-main);
    font-weight: 700;
    line-height: 0.8;
    display: block;
}

/* Цитата слева — не перекрывает правую анимацию */
.design-slide-quote-bubble--left {
    right: auto;
}

/* Акцентный текст — градиентный акцент */
.design-tagline-accent {
    font-weight: 700;
    background: linear-gradient(135deg, #3B82F6 0%, #8B5CF6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Slider Navigation */
.design-slider-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    margin-top: 1.5rem;
}

@media (max-width: 768px) {
    .design-slider-nav {
        margin-top: 1rem;
        gap: 1rem;
    }
}

@media (max-width: 480px) {
    .design-slider-nav {
        margin-top: 0.75rem;
        gap: 0.75rem;
    }
}

.design-slider-dots {
    display: flex;
    gap: 12px;
    padding: 8px 16px;
    background: rgba(0, 0, 0, 0.04);
    border-radius: 100px;
}

.design-slider-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.15);
    cursor: pointer;
    transition: all 0.35s cubic-bezier(0.32, 0.72, 0, 1);
    padding: 0;
}

.design-slider-dot:hover {
    background: rgba(59, 130, 246, 0.5);
    transform: scale(1.3);
}

.design-slider-dot--active {
    background: var(--primary);
    transform: scale(1.2);
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.15);
}

.design-slider-arrow {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    background: white;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-main);
    font-size: 1rem;
    transition: all 0.4s var(--ease-slide);
}

.design-slider-arrow:hover {
    background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);
    color: #fff;
    border-color: transparent;
    transform: scale(1.1);
    box-shadow: 0 12px 32px rgba(59, 130, 246, 0.35);
}

.design-slider-arrow:active {
    transform: scale(0.98);
}

@keyframes sparklePulse {

    0%,
    100% {
        opacity: 0.65;
    }

    50% {
        opacity: 1;
    }
}

/* Слайдер услуг: без теней, выделение границами */
.design-services-slider .infographics-hero-card {
    box-shadow: none;
}

.design-services-slider .design-arc-pill {
    box-shadow: none;
    border: 1px solid rgba(0, 0, 0, 0.06);
}

.design-services-slider .design-arc-pill:hover {
    box-shadow: none;
}

.design-services-slider .design-arc-pill i {
    color: var(--primary);
}

.design-services-slider .btn-design-block,
.design-services-slider .btn-infographics-more {
    box-shadow: none;
}

.design-services-slider .design-block-title {
    box-shadow: none;
}

/* Заголовки — сдержанно, как в эталоне */
.design-services-slider .infographics-hero-title {
    color: #111;
    border-bottom-color: rgba(0, 0, 0, 0.08);
}

.design-services-slider .infographics-hero-img {
    box-shadow: none;
    border: 1px solid rgba(0, 0, 0, 0.04);
    border-radius: 24px;
}

/* Cascade cards hover effects - восстанавливаем эффекты */
.design-services-slider .infographics-cascade-item {
    filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.10));
    transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1),
        filter 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

.design-services-slider .infographics-cascade-item:hover {
    filter: drop-shadow(0 20px 40px rgba(59, 130, 246, 0.22));
}

.design-services-slider .infographics-cascade-item--front:hover {
    transform: translateX(-18px) translateY(-22px) rotate(-8deg) scale(1.14) !important;
}

.design-services-slider .infographics-cascade-item--mid:hover {
    transform: translateY(-26px) scale(1.14) !important;
}

.design-services-slider .infographics-cascade-item--back:hover {
    transform: translateX(18px) translateY(-22px) rotate(8deg) scale(1.14) !important;
}

/* Добавляем glow-эффект при наведении на карточки */
.design-services-slider .infographics-cascade-item::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.3), rgba(147, 197, 253, 0.2));
    opacity: 0;
    z-index: -1;
    transition: opacity 0.4s ease;
    filter: blur(8px);
}

.design-services-slider .infographics-cascade-item:hover::after {
    opacity: 1;
}

.design-services-slider .web-mockup--browser {
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);
    border: 1px solid rgba(0, 0, 0, 0.06);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.design-services-slider .web-mockup--browser:hover {
    box-shadow: 0 30px 70px rgba(139, 92, 246, 0.2);
    border-color: rgba(139, 92, 246, 0.2);
    transform: translateY(-12px) scale(1.02);
}

.design-services-slider .web-mockup--mobile {
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.1);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.design-services-slider .web-mockup--mobile:hover {
    box-shadow: 0 24px 60px rgba(139, 92, 246, 0.18);
    transform: translateY(-8px) scale(1.02);
}

.design-services-slider .photo-placeholder,
.design-services-slider .photo-placeholder--video {
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
    border: 2px solid rgba(0, 0, 0, 0.05);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.design-services-slider .photo-placeholder:hover {
    box-shadow: 0 20px 50px rgba(245, 158, 11, 0.25);
    transform: scale(1.08);
}

.design-services-slider .photo-placeholder--video:hover {
    box-shadow: 0 20px 50px rgba(239, 68, 68, 0.2);
}

.design-services-slider .photo-badge,
.design-services-slider .photo-badge--video {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.design-services-slider .photo-card:hover {
    filter: none;
}

.design-services-slider .brand-circle,
.design-services-slider .brand-box,
.design-services-slider .brand-palette {
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(0, 0, 0, 0.06);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.design-services-slider .brand-circle:hover {
    box-shadow: 0 20px 50px rgba(59, 130, 246, 0.2);
    transform: translateY(-8px) scale(1.08);
}

.design-services-slider .brand-box:hover {
    box-shadow: 0 20px 50px rgba(16, 185, 129, 0.2);
    transform: translateY(-8px) scale(1.08);
}

.design-services-slider .brand-palette:hover {
    box-shadow: 0 20px 50px rgba(245, 158, 11, 0.2);
    transform: translateY(-8px) scale(1.08);
}

.design-services-slider .design-slide-quote-bubble {
    box-shadow: none;
    border: 1px solid rgba(0, 0, 0, 0.06);
}

/* Glow Variants — переливающиеся фоны для слайдов */
.design-block-glow--purple {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg,
            rgba(99, 102, 241, 0.06) 0%,
            rgba(139, 92, 246, 0.05) 35%,
            rgba(168, 85, 247, 0.04) 65%,
            rgba(124, 58, 237, 0.05) 100%);
    background-size: 400% 400%;
    animation: shimmer-purple 8s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
    border-radius: inherit;
}

@keyframes shimmer-purple {

    0%,
    100% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }
}

.design-block-glow--warm {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg,
            rgba(251, 191, 36, 0.06) 0%,
            rgba(245, 158, 11, 0.05) 30%,
            rgba(251, 146, 60, 0.04) 60%,
            rgba(234, 88, 12, 0.05) 100%);
    background-size: 400% 400%;
    animation: shimmer-warm 8s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
    border-radius: inherit;
}

@keyframes shimmer-warm {

    0%,
    100% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }
}

.design-block-glow--gradient {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg,
            rgba(37, 99, 221, 0.05) 0%,
            rgba(16, 185, 129, 0.05) 33%,
            rgba(245, 158, 11, 0.04) 66%,
            rgba(99, 102, 241, 0.04) 100%);
    background-size: 400% 400%;
    animation: shimmer-gradient 8s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
    border-radius: inherit;
}

@keyframes shimmer-gradient {

    0%,
    100% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }
}

/* Web Design Slide Visuals */
.design-visual-web {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

@media (max-width: 768px) {
    .design-visual-web {
        padding: 0.5rem;
    }
}

.web-mockup-stack {
    position: relative;
    display: flex;
    align-items: flex-end;
    gap: 0.75rem;
}

@media (max-width: 1024px) {
    .web-mockup-stack {
        transform: scale(0.9);
    }
}

@media (max-width: 768px) {
    .web-mockup-stack {
        transform: scale(0.75);
        gap: 0.5rem;
    }
}

@media (max-width: 480px) {
    .web-mockup-stack {
        transform: scale(0.6);
    }
}

.web-mockup--browser {
    width: 300px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.15),
        0 10px 20px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    animation: floatBrowser 6s ease-in-out infinite;
}

.web-mockup--browser:hover {
    transform: translateY(-12px) scale(1.03) rotate(-1deg);
    box-shadow: 0 35px 70px rgba(0, 0, 0, 0.18),
        0 15px 30px rgba(0, 0, 0, 0.1);
}

@keyframes floatBrowser {

    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(-8px) rotate(0.5deg);
    }
}

.browser-dots {
    display: flex;
    gap: 6px;
    padding: 10px 14px;
    background: #F3F4F6;
}

.browser-dots span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.browser-dots span:nth-child(1) {
    background: #EF4444;
}

.browser-dots span:nth-child(2) {
    background: #F59E0B;
}

.browser-dots span:nth-child(3) {
    background: #10B981;
}

.browser-content {
    padding: 16px;
    background: #fff;
}

.mock-header {
    height: 18px;
    min-width: 80px;
    padding: 0 8px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    background: #E5E7EB;
    border-radius: 6px;
    margin-bottom: 14px;
}

.mock-hero {
    height: 70px;
    background: linear-gradient(135deg, #3B82F6 0%, #2563EB 50%, #1D4ED8 100%);
    border-radius: 10px;
    margin-bottom: 14px;
    position: relative;
    overflow: hidden;
}

.mock-hero::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 30px;
    height: 30px;
    background: rgba(255, 255, 255, 0.25);
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.mock-hero::after {
    content: '';
    position: absolute;
    bottom: 10px;
    left: 16px;
    width: 45%;
    height: 8px;
    background: rgba(255, 255, 255, 0.4);
    border-radius: 4px;
}

.mock-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.mock-grid div {
    height: 35px;
    background: #F3F4F6;
    border-radius: 6px;
}

.web-mockup--mobile {
    width: 90px;
    background: linear-gradient(180deg, #1F2937 0%, #111827 100%);
    border-radius: 20px;
    padding: 10px 6px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25),
        0 8px 16px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    animation: floatMobile 6s ease-in-out 0.5s infinite;
}

.web-mockup--mobile:hover {
    transform: translateY(-15px) scale(1.08) rotate(2deg);
}

@keyframes floatMobile {

    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(-6px) rotate(-0.5deg);
    }
}

.mobile-notch {
    width: 40%;
    height: 6px;
    background: #333;
    border-radius: 3px;
    margin: 0 auto 8px;
}

.mobile-content {
    background: #fff;
    border-radius: 8px;
    padding: 8px;
}

.mock-header-sm {
    height: 12px;
    width: 70%;
    background: #E5E7EB;
    border-radius: 2px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mock-card-sm {
    height: 24px;
    background: #F3F4F6;
    border-radius: 4px;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Текст в мокапах */
.mock-text {
    font-size: 8px;
    font-weight: 700;
    color: #374151;
    letter-spacing: 0.03em;
    line-height: 1;
    white-space: nowrap;
}

.mock-text-lg {
    display: block;
    font-size: 8px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.95);
    text-align: center;
    padding-top: 12px;
    line-height: 1.2;
}

.mock-text-sm {
    display: block;
    font-size: 5px;
    color: rgba(255, 255, 255, 0.75);
    text-align: center;
    margin-top: 3px;
}

.mock-text-xs {
    font-size: 6px;
    font-weight: 600;
    color: #6B7280;
    text-align: center;
}

.mock-hero {
    height: 70px;
    background: linear-gradient(135deg, #3B82F6 0%, #2563EB 50%, #1D4ED8 100%);
    border-radius: 10px;
    margin-bottom: 14px;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

.mock-hero::before {
    content: '';
    position: absolute;
    top: 35%;
    left: 50%;
    width: 20px;
    height: 20px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.mock-grid div {
    height: 35px;
    background: #F3F4F6;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Photo Slide Visuals */
.design-visual-photo {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    min-height: 220px;
}

@media (max-width: 1024px) {
    .design-visual-photo {
        min-height: 180px;
        padding: 0.75rem;
    }
}

@media (max-width: 768px) {
    .design-visual-photo {
        min-height: 160px;
        padding: 0.5rem;
    }
}

@media (max-width: 480px) {
    .design-visual-photo {
        min-height: 140px;
    }
}

.photo-showcase {
    display: flex;
    gap: 1rem;
    align-items: center;
    perspective: 800px;
}

@media (max-width: 768px) {
    .photo-showcase {
        gap: 0.5rem;
        transform: scale(0.85);
    }
}

@media (max-width: 480px) {
    .photo-showcase {
        gap: 0.35rem;
        transform: scale(0.7);
    }
}

.photo-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.85rem;
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
        filter 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}

.photo-card--1 {
    transform: rotate(-8deg) translateY(10px);
    animation: photoFloat1 5s ease-in-out infinite;
}

.photo-card--2 {
    transform: translateY(-15px) scale(1.05);
    animation: photoFloat2 5s ease-in-out 0.3s infinite;
    z-index: 2;
}

.photo-card--3 {
    transform: rotate(8deg) translateY(10px);
    animation: photoFloat3 5s ease-in-out 0.6s infinite;
}

@keyframes photoFloat1 {

    0%,
    100% {
        transform: rotate(-8deg) translateY(10px);
    }

    50% {
        transform: rotate(-6deg) translateY(5px);
    }
}

@keyframes photoFloat2 {

    0%,
    100% {
        transform: translateY(-15px) scale(1.05);
    }

    50% {
        transform: translateY(-22px) scale(1.05);
    }
}

@keyframes photoFloat3 {

    0%,
    100% {
        transform: rotate(8deg) translateY(10px);
    }

    50% {
        transform: rotate(6deg) translateY(5px);
    }
}

.photo-card:hover {
    transform: translateY(-20px) scale(1.12) rotate(0deg) !important;
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.15));
    z-index: 10;
}

.photo-placeholder {
    width: 110px;
    height: 140px;
    background: linear-gradient(145deg, #FEF3C7 0%, #FDE68A 50%, #FBBF24 100%);
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.25rem;
    color: #D97706;
    box-shadow: 0 15px 40px rgba(245, 158, 11, 0.25),
        0 5px 15px rgba(245, 158, 11, 0.15);
    position: relative;
    overflow: hidden;
}

.photo-placeholder::before {
    content: '';
    position: absolute;
    top: -20%;
    right: -20%;
    width: 60%;
    height: 60%;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    filter: blur(15px);
}

.photo-placeholder--video {
    background: linear-gradient(145deg, #DBEAFE 0%, #93C5FD 50%, #3B82F6 100%);
    color: #1E40AF;
    box-shadow: 0 15px 40px rgba(37, 99, 221, 0.25),
        0 5px 15px rgba(37, 99, 221, 0.15);
}

.photo-placeholder--video::before {
    background: rgba(255, 255, 255, 0.35);
}

.photo-badge {
    font-size: 0.8rem;
    font-weight: 700;
    color: #92400E;
    background: linear-gradient(135deg, rgba(254, 243, 199, 0.95) 0%, rgba(253, 230, 138, 0.9) 100%);
    padding: 6px 14px;
    border-radius: 100px;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.2);
}

.photo-badge--video {
    color: #1E40AF;
    background: linear-gradient(135deg, rgba(219, 234, 254, 0.95) 0%, rgba(147, 197, 253, 0.9) 100%);
    box-shadow: 0 4px 12px rgba(37, 99, 221, 0.2);
}

/* Brand Slide Visuals */
.design-visual-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    min-height: 280px;
}

.brand-showcase {
    display: flex;
    gap: 2.5rem;
    align-items: center;
}

.brand-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}

.brand-item--logo {
    animation: brandFloat1 5s ease-in-out infinite;
}

.brand-item--package {
    animation: brandFloat2 5s ease-in-out 0.4s infinite;
}

.brand-item--style {
    animation: brandFloat3 5s ease-in-out 0.8s infinite;
}

@keyframes brandFloat1 {

    0%,
    100% {
        transform: translateY(0) rotate(-2deg);
    }

    50% {
        transform: translateY(-8px) rotate(0deg);
    }
}

@keyframes brandFloat2 {

    0%,
    100% {
        transform: translateY(0);
    }

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

@keyframes brandFloat3 {

    0%,
    100% {
        transform: translateY(0) rotate(2deg);
    }

    50% {
        transform: translateY(-8px) rotate(0deg);
    }
}

.brand-item:hover {
    transform: translateY(-15px) scale(1.1) !important;
}

.brand-item>span {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-muted);
    letter-spacing: 0.02em;
}

.brand-circle {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: linear-gradient(145deg, #EEF2FF 0%, #C7D2FE 50%, #A5B4FC 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: var(--primary);
    box-shadow: 0 15px 40px rgba(37, 99, 221, 0.2),
        0 5px 15px rgba(37, 99, 221, 0.1);
    position: relative;
    overflow: hidden;
}

.brand-circle::before {
    content: '';
    position: absolute;
    top: -30%;
    right: -30%;
    width: 60%;
    height: 60%;
    background: rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    filter: blur(10px);
}

.brand-box {
    width: 90px;
    height: 90px;
    border-radius: 20px;
    background: linear-gradient(145deg, #ECFDF5 0%, #A7F3D0 50%, #6EE7B7 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: #059669;
    box-shadow: 0 15px 40px rgba(16, 185, 129, 0.2),
        0 5px 15px rgba(16, 185, 129, 0.1);
    position: relative;
    overflow: hidden;
}

.brand-box::before {
    content: '';
    position: absolute;
    top: -30%;
    right: -30%;
    width: 60%;
    height: 60%;
    background: rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    filter: blur(10px);
}

.brand-palette {
    display: flex;
    gap: 6px;
    padding: 14px;
    background: linear-gradient(145deg, #fff 0%, #F9FAFB 100%);
    border-radius: 16px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12),
        0 4px 10px rgba(0, 0, 0, 0.06);
}

.brand-palette>span {
    width: 22px;
    height: 45px;
    border-radius: 8px;
    transition: transform 0.3s ease;
}

.brand-palette:hover>span:nth-child(1) {
    transform: translateY(-4px);
}

.brand-palette:hover>span:nth-child(2) {
    transform: translateY(-6px);
    transition-delay: 0.05s;
}

.brand-palette:hover>span:nth-child(3) {
    transform: translateY(-4px);
    transition-delay: 0.1s;
}


/* Скрываем декоративные элементы на мобильных */
@media (max-width: 900px) {
    .design-slide-quote-bubble {
        display: none;
    }

    .design-slide-sparkle,
    .design-slide-star {
        display: none;
    }
}

/* Mobile responsive slider */
@media (max-width: 768px) {
    .design-slider-nav {
        gap: 0.75rem;
    }

    .design-slider-arrow {
        width: 38px;
        height: 38px;
        font-size: 0.85rem;
    }

    .design-slider-dot {
        width: 10px;
        height: 10px;
    }

    .web-mockup-stack {
        transform: scale(0.85);
    }

    .photo-showcase {
        gap: 0.75rem;
    }

    .photo-placeholder {
        width: 80px;
        height: 100px;
        font-size: 1.5rem;
    }

    .brand-showcase {
        gap: 1.25rem;
    }

    .brand-circle,
    .brand-box {
        width: 65px;
        height: 65px;
        font-size: 1.4rem;
    }
}

/* INFographics MODAL (two panels) */
.infographics-modal-overlay .infographics-modal-content {
    max-width: 560px;
    width: 92%;
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    padding-bottom: 1rem;
}

.infographics-modal-title {
    font-size: 1.35rem;
    font-weight: 700;
    color: #111;
    margin: 0 2.5rem 1rem 0;
    line-height: 1.3;
}

.infographics-modal-panels {
    position: relative;
    flex: 1;
    min-height: 200px;
    overflow: hidden;
}

.infographics-modal-panel {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.infographics-modal-panel.active {
    position: relative;
    opacity: 1;
    visibility: visible;
}

.infographics-panel-body {
    padding-right: 0.5rem;
    max-height: 50vh;
    overflow-y: auto;
}

.infographics-panel-body p {
    margin: 0 0 1rem;
    line-height: 1.6;
    color: #333;
}

.infographics-panel-body p:last-child {
    margin-bottom: 0;
}

.infographics-modal-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.infographics-modal-arrow {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: var(--primary);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    transition: background 0.2s, transform 0.2s;
}

.infographics-modal-arrow:hover {
    background: #1d4ed8;
    transform: scale(1.05);
}

.infographics-modal-pagination {
    font-size: 0.9rem;
    color: var(--text-muted);
}

/* WHY ECOMVISION CUTOUT — серый вырез с визуализацией */
.why-ecomvision-cutout {
    background: var(--bg-light);
    color: #111;
}

.why-cutout-wave {
    position: absolute;
    top: -1px;
    left: 0;
    width: 100%;
    height: 80px;
    color: #f3f4f6;
    z-index: 1;
    pointer-events: none;
}

.why-cutout-wave svg {
    width: 100%;
    height: 100%;
    display: block;
}

.why-cutout-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 0%, rgba(255, 255, 255, 0.6) 50%, transparent 100%);
    pointer-events: none;
    z-index: 0;
}

.why-cutout-dots {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at 1px 1px, rgba(37, 99, 221, 0.06) 1px, transparent 0);
    background-size: 28px 28px;
    pointer-events: none;
    z-index: 0;
}

.why-cutout-stats {
    margin-bottom: 2.5rem;
}

/* Зона по высоте серого «выреза» — карточки центрируются по вертикали внутри неё */
.why-cutout-stats-zone {
    position: relative;
    min-height: 38vh;
    width: 100%;
    z-index: 2;
}

/* Мини-блоки ровно по одной горизонтали в середине серого блока (по вертикали и горизонтали) */
.why-cutout-stats--on-edge {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    max-width: 900px;
    margin: 0;
    margin-bottom: 0;
    z-index: 2;
    padding: 0 1.5rem;
    box-sizing: border-box;
}

.why-cutout-stats--on-edge .why-stat-pill {
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(255, 255, 255, 0.5);
}

.why-cutout-body {
    padding-top: 2rem;
}

/* Why Features — Bento Grid, пастели + glass как girl.png */
.why-features-tagline {
    text-align: center;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    background: linear-gradient(90deg, #94a3b8 0%, #64748b 35%, #cbd5e1 60%, #94a3b8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0 0 2.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

.why-features-tagline::before,
.why-features-tagline::after {
    content: "";
    width: 42px;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(148, 163, 184, 0.7) 50%, transparent 100%);
}

.why-finale-wrap {
    position: relative;
    padding: 0 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: 1rem;
}

.why-finale-panel {
    position: relative;
    border-radius: 36px;
    padding: 3.5rem;
    background: linear-gradient(140deg, rgba(255, 255, 255, 0.92) 0%, rgba(239, 246, 255, 0.9) 50%, rgba(248, 250, 252, 0.95) 100%);
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 30px 70px rgba(15, 23, 42, 0.12);
    overflow: hidden;
}

.why-finale-panel::before,
.why-finale-panel::after {
    content: "";
    position: absolute;
    inset: -30%;
    background: radial-gradient(circle at 20% 20%, rgba(59, 130, 246, 0.2) 0%, transparent 55%),
        radial-gradient(circle at 85% 70%, rgba(244, 114, 182, 0.18) 0%, transparent 60%);
    opacity: 0.7;
    z-index: 0;
    pointer-events: none;
}

.why-finale-panel::after {
    background: radial-gradient(circle at 30% 90%, rgba(148, 163, 184, 0.18) 0%, transparent 60%);
    opacity: 0.55;
}

.why-finale-orbs {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.why-finale-orbs span {
    position: absolute;
    border-radius: 999px;
    filter: blur(90px);
    opacity: 0.6;
}

.why-finale-orbs span:first-child {
    width: 320px;
    height: 320px;
    top: -80px;
    left: 5%;
    background: rgba(59, 130, 246, 0.35);
}

.why-finale-orbs span:last-child {
    width: 280px;
    height: 280px;
    bottom: -90px;
    right: 8%;
    background: rgba(244, 114, 182, 0.3);
}

.why-finale-content {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: 2.6rem;
    align-items: center;
}

.why-finale-kicker {
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 0.75rem;
    font-weight: 700;
    color: #64748b;
    margin: 0 0 1rem;
}

.why-finale-title {
    font-size: var(--section-title-size);
    line-height: var(--section-title-line);
    font-weight: 800;
    color: #0f172a;
    margin: 0 0 1rem;
}

.why-cutout-heading {
    font-size: var(--section-title-size) !important;
    line-height: var(--section-title-line) !important;
    letter-spacing: var(--section-title-letter);
}

.why-finale-desc {
    font-size: 1.05rem;
    color: #475569;
    margin: 0 0 1.8rem;
    max-width: 32rem;
}

.why-finale-actions {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    align-items: center;
}

/* Match "Контакты" button color for this block */
.why-ecomvision-cutout .text-brand-blue {
    color: #007AFF;
}

.why-ecomvision-cutout .btn-primary {
    background: #007AFF;
    box-shadow: 0 6px 20px rgba(0, 122, 255, 0.35);
    border: 2px solid transparent;
}

.why-ecomvision-cutout .btn-primary:hover {
    background: #0066D6;
    color: #fff;
    border: 2px solid rgba(255,255,255,0.2);
    box-shadow: 
        0 14px 40px rgba(0, 122, 255, 0.45),
        0 6px 16px rgba(0, 122, 255, 0.25);
}

.why-finale-right {
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
}

.why-finale-lines span {
    display: block;
    padding: 0.85rem 1.2rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid rgba(148, 163, 184, 0.35);
    color: #1f2937;
    font-weight: 600;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
}

.why-finale-note {
    margin: 0;
    font-size: 0.98rem;
    color: #64748b;
}

.why-finale-strip {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #64748b;
}

.why-finale-strip span {
    padding: 0.55rem 1rem;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.12);
    border: 1px solid rgba(148, 163, 184, 0.25);
}

.why-features-bento-wrap {
    position: relative;
    padding: 0 0.5rem;
    overflow: visible;
}

.why-bento-orbit {
    position: absolute;
    inset: -40px;
    pointer-events: none;
    z-index: 0;
}

.why-orbit-ring {
    position: absolute;
    inset: 10%;
    border-radius: 50%;
    border: 1px dashed rgba(148, 163, 184, 0.2);
    animation: why-orbit-spin 26s linear infinite;
}

.why-orbit-ring--two {
    inset: 20%;
    border-style: solid;
    border-color: rgba(59, 130, 246, 0.15);
    animation-direction: reverse;
}

.why-orbit-spark {
    position: absolute;
    top: 8%;
    left: 50%;
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: rgba(59, 130, 246, 0.65);
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.6);
    animation: why-orbit-float 6s ease-in-out infinite;
}

/* Пастельные орбы как в hero-trust */
.why-bento-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    pointer-events: none;
    z-index: 0;
    opacity: 0;
    transition: opacity 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.why-bento-glow--1 {
    width: 400px;
    height: 400px;
    top: -80px;
    left: 10%;
    background: radial-gradient(circle, rgba(251, 191, 36, 0.2) 0%, rgba(236, 72, 153, 0.08) 40%, transparent 70%);
}

.why-bento-glow--2 {
    width: 350px;
    height: 350px;
    bottom: -60px;
    right: 5%;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.15) 0%, rgba(139, 92, 246, 0.06) 50%, transparent 70%);
}

.why-bento-section.is-visible .why-bento-glow {
    opacity: 1;
}

.why-features-bento {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: minmax(200px, auto);
    gap: 1.4rem;
    position: relative;
    z-index: 1;
    perspective: 1200px;
}

/* Layout: 6 cards, hero in the center */
.why-bento-cell--1 {
    grid-column: 1;
    grid-row: 1;
}

.why-bento-cell--2 {
    grid-column: 2 / span 2;
    grid-row: 1 / span 2;
}

.why-bento-cell--3 {
    grid-column: 4;
    grid-row: 1;
}

.why-bento-cell--4 {
    grid-column: 1;
    grid-row: 2;
}

.why-bento-cell--5 {
    grid-column: 4;
    grid-row: 2;
}

.why-bento-cell--6 {
    grid-column: 1 / span 4;
    grid-row: 3;
}

/* Индивидуальные карточки с вырезанным углом и "энергией" */
.why-bento-cell {
    position: relative;
    --accent: #2563eb;
    --accent-soft: rgba(37, 99, 235, 0.18);
    --tilt: -0.4deg;
    --tilt-hover: -0.1deg;
    background: linear-gradient(165deg, rgba(255, 255, 255, 0.95) 0%, rgba(243, 247, 255, 0.9) 100%);
    border-radius: 28px 28px 22px 42px;
    padding: 3.4rem 1.8rem 2rem;
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 20px 46px rgba(15, 23, 42, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.8);
    overflow: hidden;
    clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 0 100%);
    transform: translateZ(0) rotate(var(--tilt));
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.45s ease,
        border-color 0.35s ease;
}

.why-bento-cell>* {
    position: relative;
    z-index: 1;
}

.why-bento-cell::before {
    content: "";
    position: absolute;
    inset: -40%;
    background: radial-gradient(circle at 20% 30%, var(--accent-soft) 0%, transparent 55%),
        radial-gradient(circle at 80% 80%, rgba(15, 23, 42, 0.06) 0%, transparent 60%);
    opacity: 0.85;
    transition: transform 0.6s ease, opacity 0.6s ease;
    z-index: 0;
}

.why-bento-cell::after {
    content: "";
    position: absolute;
    inset: -40%;
    background: linear-gradient(120deg, transparent 20%, rgba(255, 255, 255, 0.7) 45%, transparent 70%);
    opacity: 0;
    transform: translateX(-30%);
    transition: opacity 0.45s ease, transform 0.6s ease;
    z-index: 0;
}

.why-bento-cell:hover {
    transform: translateY(-8px) rotate(var(--tilt-hover));
    box-shadow: 0 28px 60px rgba(15, 23, 42, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.9);
    border-color: rgba(15, 23, 42, 0.12);
}

.why-bento-cell:hover::before {
    transform: translateY(-4%);
}

.why-bento-cell:hover::after {
    opacity: 0.7;
    transform: translateX(15%);
}

.why-bento-cell--1 {
    --accent: #2563eb;
    --accent-soft: rgba(37, 99, 235, 0.2);
    --tilt: -0.6deg;
    --tilt-hover: -0.2deg;
}

.why-bento-cell--2 {
    --accent: #f59e0b;
    --accent-soft: rgba(245, 158, 11, 0.24);
    --tilt: 0.3deg;
    --tilt-hover: 0.1deg;
}

.why-bento-cell--3 {
    --accent: #14b8a6;
    --accent-soft: rgba(20, 184, 166, 0.18);
    --tilt: -0.2deg;
    --tilt-hover: 0deg;
}

.why-bento-cell--4 {
    --accent: #8b5cf6;
    --accent-soft: rgba(139, 92, 246, 0.2);
    --tilt: 0.4deg;
    --tilt-hover: 0.1deg;
}

.why-bento-cell--5 {
    --accent: #0ea5e9;
    --accent-soft: rgba(14, 165, 233, 0.18);
    --tilt: -0.3deg;
    --tilt-hover: -0.05deg;
}

.why-bento-cell--6 {
    --accent: #1f2937;
    --accent-soft: rgba(15, 23, 42, 0.18);
    --tilt: 0deg;
    --tilt-hover: 0deg;
}

/* Угловая плашка */
.why-bento-corner {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 2;
    width: 18px;
    height: 18px;
    background: conic-gradient(from 0deg, transparent 0deg, var(--accent, #2563eb) 120deg, transparent 240deg);
    border-radius: 50%;
    filter: drop-shadow(0 0 10px rgba(37, 99, 235, 0.25));
    opacity: 0.7;
}

.why-bento-cell--hero .why-bento-corner {
    background: conic-gradient(from 90deg, transparent 0deg, rgba(255, 255, 255, 0.6) 120deg, transparent 240deg);
    opacity: 0.6;
}

/* Мини-визуализации — абстрактные вспышки */
.why-bento-viz {
    position: absolute;
    top: 16px;
    right: 18px;
    width: 78px;
    height: 78px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.55) 30%, var(--accent-soft) 65%, transparent 72%);
    filter: drop-shadow(0 18px 24px rgba(15, 23, 42, 0.18));
    opacity: 0.9;
    pointer-events: none;
    z-index: 2;
}

.why-bento-viz::before {
    content: "";
    position: absolute;
    inset: -12px;
    border-radius: 50%;
    background: conic-gradient(from 0deg,
            transparent 0deg,
            var(--accent) 60deg,
            transparent 120deg,
            var(--accent) 180deg,
            transparent 240deg,
            var(--accent) 300deg,
            transparent 360deg);
    -webkit-mask: radial-gradient(circle, transparent 48%, #000 52%, #000 70%, transparent 72%);
    mask: radial-gradient(circle, transparent 48%, #000 52%, #000 70%, transparent 72%);
    opacity: 0.7;
    animation: why-burst-spin 10s linear infinite;
}

.why-bento-viz::after {
    content: "";
    position: absolute;
    inset: 18px;
    border-radius: 42% 58% 48% 52%;
    background: radial-gradient(circle at 30% 30%, #ffffff 0%, var(--accent) 60%);
    box-shadow: 0 0 0 6px var(--accent-soft);
    animation: why-burst-pulse 3.5s ease-in-out infinite;
}

.why-bento-viz span {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--accent);
    box-shadow: 0 0 12px rgba(37, 99, 235, 0.45);
    animation: why-orbit-dot 4s ease-in-out infinite;
}

.why-bento-viz span:nth-child(1) {
    top: -4px;
    left: 50%;
    transform: translateX(-50%);
}

.why-bento-viz span:nth-child(2) {
    right: 4px;
    top: 42px;
    animation-delay: 0.6s;
}

.why-bento-viz span:nth-child(3) {
    bottom: 4px;
    left: 16px;
    animation-delay: 1.2s;
}

.why-bento-viz span:nth-child(4) {
    left: 6px;
    top: 18px;
    animation-delay: 1.8s;
}

.why-bento-cell--hero .why-bento-viz {
    width: 92px;
    height: 92px;
    top: 18px;
    right: 20px;
    opacity: 0.85;
}

.why-bento-cell:hover .why-bento-viz {
    transform: scale(1.05);
}

@keyframes why-burst-spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes why-burst-pulse {

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

    50% {
        transform: scale(1.08);
    }
}

@keyframes why-orbit-dot {

    0%,
    100% {
        transform: translateY(0);
        opacity: 0.8;
    }

    50% {
        transform: translateY(-6px);
        opacity: 0.5;
    }
}

@keyframes why-orbit-spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes why-orbit-float {

    0%,
    100% {
        transform: translate(-50%, 0);
        opacity: 0.7;
    }

    50% {
        transform: translate(-50%, -10px);
        opacity: 1;
    }
}

/* Номер */
.why-bento-num {
    position: absolute;
    top: 18px;
    left: 20px;
    font-size: 2.6rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.04em;
    color: var(--accent);
    opacity: 0.18;
    text-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
    z-index: 1;
}

.why-bento-cell:hover .why-bento-num {
    opacity: 0.28;
}

.why-bento-cell--hero .why-bento-num {
    font-size: 3rem;
    color: rgba(255, 255, 255, 0.7);
}

.why-bento-cell--hero:hover .why-bento-num {
    color: rgba(255, 255, 255, 0.85);
}

.why-bento-title {
    font-size: 1.18rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 0.5rem;
    letter-spacing: -0.02em;
    text-wrap: balance;
}

.why-bento-cell--hero .why-bento-title {
    font-size: 1.35rem;
    color: #fff;
}

.why-bento-desc {
    font-size: 0.95rem;
    color: #5b6575;
    line-height: 1.6;
    margin: 0 0 1rem;
}

.why-bento-cell--hero .why-bento-desc {
    color: #cbd5f5;
}

/* Прозрачные плашки в стиле girl.png */
.why-bento-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.why-bento-tags span {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.85rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: #1f2937;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(6px);
    border-radius: 999px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 1px 8px rgba(15, 23, 42, 0.06);
    transition: background 0.3s ease, border-color 0.3s ease;
}

.why-bento-cell:hover .why-bento-tags span {
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(255, 255, 255, 0.8);
}

.why-bento-cell--hero .why-bento-tags span {
    background: rgba(255, 255, 255, 0.1);
    color: #cbd5e1;
    border-color: rgba(255, 255, 255, 0.12);
}

.why-bento-cell--hero:hover .why-bento-tags span {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.2);
}

/* Hero — тёмная карточка с пастельным свечением */
.why-bento-cell--hero {
    padding: 3.6rem 2.4rem 2.4rem;
    --accent: #38bdf8;
    --accent-soft: rgba(56, 189, 248, 0.25);
    background: linear-gradient(135deg, #0b1224 0%, #111827 45%, #1d4ed8 140%);
    border-color: rgba(255, 255, 255, 0.14);
    box-shadow: 0 30px 60px rgba(10, 15, 30, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.why-bento-cell--hero::before {
    background: radial-gradient(ellipse at 70% 30%, rgba(59, 130, 246, 0.3) 0%, rgba(14, 165, 233, 0.12) 45%, transparent 70%);
    opacity: 1;
}

.why-bento-cell--hero:hover {
    box-shadow: 0 34px 70px rgba(15, 23, 42, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}


/* Staggered animation при появлении — плавнее как в hero-trust */
.why-bento-cell.fade-in-up {
    animation-delay: 0s;
    animation-duration: 0.7s;
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.why-bento-cell--2.fade-in-up {
    animation-delay: 0.08s;
}

.why-bento-cell--3.fade-in-up {
    animation-delay: 0.16s;
}

.why-bento-cell--4.fade-in-up {
    animation-delay: 0.24s;
}

.why-bento-cell--5.fade-in-up {
    animation-delay: 0.32s;
}

.why-bento-cell--6.fade-in-up {
    animation-delay: 0.4s;
}

@media (max-width: 1100px) {
    .why-features-bento {
        grid-template-columns: repeat(2, 1fr);
    }

    .why-bento-cell--1 {
        grid-column: 1;
        grid-row: 1;
    }

    .why-bento-cell--2 {
        grid-column: 2;
        grid-row: 1;
    }

    .why-bento-cell--3 {
        grid-column: 1;
        grid-row: 2;
    }

    .why-bento-cell--4 {
        grid-column: 2;
        grid-row: 2;
    }

    .why-bento-cell--5 {
        grid-column: 1;
        grid-row: 3;
    }

    .why-bento-cell--6 {
        grid-column: 2;
        grid-row: 3;
    }

    .why-finale-content {
        grid-template-columns: 1fr;
    }

    .why-finale-panel {
        padding: 3rem 2.5rem;
    }

    .why-finale-title {
        font-size: 2.2rem;
    }
}

@media (max-width: 768px) {
    .why-features-tagline {
        font-size: 0.8rem;
        letter-spacing: 0.1em;
        margin-bottom: 1.5rem;
    }

    .why-features-tagline::before,
    .why-features-tagline::after {
        width: 24px;
    }

    .why-bento-cell {
        padding: 3rem 1.4rem 1.6rem;
    }

    .why-bento-cell--hero {
        padding: 3.2rem 1.6rem 1.8rem;
    }

    .why-features-bento {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .why-bento-cell--1,
    .why-bento-cell--2,
    .why-bento-cell--3,
    .why-bento-cell--4,
    .why-bento-cell--5,
    .why-bento-cell--6 {
        grid-column: 1;
        grid-row: auto;
    }

    .why-bento-num {
        font-size: 2.2rem;
    }

    .why-bento-cell--hero .why-bento-num {
        font-size: 2.6rem;
    }

    .why-bento-viz {
        width: 62px;
        height: 62px;
        right: 12px;
        top: 12px;
    }

    .why-bento-cell--hero .why-bento-viz {
        width: 72px;
        height: 72px;
        right: 14px;
    }

    .why-finale-panel {
        padding: 2.4rem 1.6rem;
        border-radius: 28px;
    }

    .why-finale-title {
        font-size: var(--section-title-size);
    }

    .why-finale-lines span {
        font-size: 0.95rem;
    }

    .why-finale-actions {
        width: 100%;
    }

    .why-finale-actions .btn-primary,
    .why-finale-actions .btn-outline {
        width: 100%;
        text-align: center;
    }
}

@media (prefers-reduced-motion: reduce) {

    .why-bento-cell.fade-in-up,
    .why-bento-cell--2.fade-in-up,
    .why-bento-cell--3.fade-in-up,
    .why-bento-cell--4.fade-in-up,
    .why-bento-cell--5.fade-in-up,
    .why-bento-cell--6.fade-in-up {
        animation-delay: 0s;
    }

    .why-bento-viz,
    .why-bento-viz::before,
    .why-bento-viz::after,
    .why-bento-viz span,
    .why-orbit-ring,
    .why-orbit-spark {
        animation: none !important;
    }
}

/* Одна горизонтальная линия — все 4 мини-блока в ряд по центру */
.why-stats-single-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin: 0 auto;
}

.why-stats-rows {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    max-width: 720px;
    margin: 0 auto;
}

.why-stats-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.why-stats-row--2 {
    justify-content: center;
}

.why-stat-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 1.1rem 0.65rem 0.95rem;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(37, 99, 221, 0.1);
    border-radius: 100px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease, border-color 0.3s ease;
}

.why-stat-pill:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 28px rgba(37, 99, 221, 0.12);
    border-color: rgba(37, 99, 221, 0.2);
}

.why-stat-value {
    font-weight: 700;
    font-size: 1rem;
    color: var(--primary);
    letter-spacing: -0.02em;
}

.why-stat-label {
    font-size: 0.8rem;
    color: #374151;
    font-weight: 500;
}

.why-stat-icon {
    font-size: 0.95rem;
    color: var(--primary);
    opacity: 0.95;
}

@media (max-width: 768px) {
    .why-cutout-stats {
        margin-bottom: 1.75rem;
    }

    .why-cutout-stats-zone {
        min-height: 28vh;
    }

    .why-cutout-stats--on-edge {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        padding: 0 0.75rem;
    }

    .why-cutout-body {
        padding-top: 1.5rem;
    }

    .why-stats-single-row {
        gap: 0.6rem;
        flex-wrap: wrap;
        justify-content: center;
    }

    .why-stats-rows {
        gap: 0.6rem;
    }

    .why-stats-row {
        gap: 0.75rem;
        padding: 0 0.5rem;
    }

    .why-stat-pill {
        padding: 0.5rem 0.75rem;
    }

    .why-stat-value {
        font-size: 0.9rem;
    }

    .why-stat-label {
        font-size: 0.7rem;
    }
}

/* IMAGE SLIDER STYLES */
.nav-dot.active {
    background: #ffffff !important;
    transform: scale(1.3);
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

.image-slide.active {
    z-index: 2;
}

/* FEATURES SECTION BACKGROUND */
.bg-grid-pattern {
    position: relative;
    /* Ensure pseudo positions correctly */
}

.step-card {
    flex: 1;
    background: #FFFFFF;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    padding: 40px 30px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    position: relative;
    overflow: hidden;
    backface-visibility: hidden;
    transform: translateZ(0);
    transition: transform var(--duration-normal) var(--ease-out-smooth), box-shadow var(--duration-normal) var(--ease-smooth), background var(--duration-normal) var(--ease-smooth), border-color var(--duration-normal) var(--ease-smooth);
}

.step-card::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(37, 99, 235, 0.12) 0%, transparent 65%);
    opacity: 0;
    transition: opacity 0.5s var(--ease-smooth);
    pointer-events: none;
}

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

.step-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, transparent, rgba(37, 99, 235, 0.6), transparent);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.5s var(--ease-out-smooth) 0.06s;
}

.step-card:hover::after {
    transform: scaleX(1);
}

.step-card:hover {
    transform: translateY(-4px) translateZ(0);
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.22);
}

.step-card>div:first-child {
    transform: translateY(0) scale(1) translateZ(0);
    transition: transform 0.35s var(--ease-out-smooth), background 0.4s var(--ease-smooth), border-color 0.4s var(--ease-smooth), box-shadow 0.4s var(--ease-smooth);
}

.step-card:hover>div:first-child {
    animation: icon-bounce-step-card 0.48s var(--ease-out-smooth) forwards;
    will-change: transform;
}


.step-card h3 {
    margin: 20px 0 15px;
    font-size: 1.5rem;
    font-weight: 700;
    color: #FFFFFF;
    margin-bottom: 12px;
    transition: color 0.35s var(--ease-smooth);
}

.step-card:hover h3 {
    color: rgba(255, 255, 255, 0.98);
}

.step-card p {
    color: #D1D5DB;
    font-weight: 500;
    font-size: 1rem;
    line-height: 1.7;
    transition: color 0.35s var(--ease-smooth);
}

.step-card:hover p {
    color: #E5E7EB;
}


/* ========================================= */
/* SECTION BRIDGE — заголовок между блоками (тёмный вариант) */
/* ========================================= */
.section-bridge {
    position: relative;
    border-radius: 48px;
    /* Deep dark background with asymmetric glow */
    background: #050505;
    background-image:
        radial-gradient(circle at 80% 20%, rgba(37, 99, 221, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 90% 80%, rgba(16, 185, 129, 0.05) 0%, transparent 40%),
        linear-gradient(to right, #050505, #080b14);
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.1),
        0 40px 100px -20px rgba(0, 0, 0, 0.8),
        0 0 0 1px rgba(255, 255, 255, 0.05);
    z-index: 1;
    margin-top: 48px;
    overflow: visible;

    /* Layout: Text at bottom, taller for character */
    min-height: 480px;
    padding: 50px 60px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
}

.section-bridge-inner {
    width: 100%;
    max-width: 100%;
    text-align: left;
    position: relative;
    z-index: 2;
    /* Inline styles handle flex layout */
}

.section-bridge-label {
    /* Floating top label */
    position: absolute;
    top: calc(-460px + 120px);
    /* Position at top of container approx */
    left: 0;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
    margin: 0;
    background: rgba(255, 255, 255, 0.05);
    padding: 8px 16px;
    border-radius: 100px;
    backdrop-filter: blur(10px);
}

.section-bridge-label {
    position: absolute;
    top: 40px;
    left: 40px;
    margin: 0;
}

.section-bridge-title {
    font-size: var(--section-title-size);
    font-weight: 700;
    line-height: var(--section-title-line);
    margin: 0 0 12px 0;
    letter-spacing: var(--section-title-letter);
    color: #FFFFFF;
    background: linear-gradient(to bottom right, #ffffff, #93c5fd);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    max-width: 600px;
}

.section-bridge-subtitle {
    font-size: 1.15rem;
    color: #9CA3AF;
    margin: 0;
    line-height: 1.5;
    max-width: 500px;
}

/* Dots positioned as visual element on right */
.section-bridge-dots {
    position: absolute;
    bottom: 60px;
    right: 60px;
    display: flex;
    gap: 8px;
    margin: 0;
}

.section-bridge-dot {
    width: 8px;
    height: 8px;
    background: #3B82F6;
    box-shadow: 0 0 10px rgba(59, 130, 246, 0.5);
}

/* Decorative background elements */
.section-bridge::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 900px;
    height: 900px;
    background: radial-gradient(circle, rgba(37, 99, 221, 0.05) 0%, rgba(37, 99, 221, 0.02) 40%, transparent 60%);
    filter: blur(80px);
    pointer-events: none;
    z-index: 1;
}

.section-bridge::after {
    content: '';
    position: absolute;
    bottom: -20%;
    left: 20%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(16, 185, 129, 0.03) 0%, rgba(16, 185, 129, 0.015) 35%, transparent 55%);
    filter: blur(60px);
    pointer-events: none;
    z-index: 1;
}

/* STARS & ANIMATIONS */
.bridge-star {
    position: absolute;
    color: #FCD34D;
    /* Gold/Yellow */
    font-size: 24px;
    z-index: 5;
    filter: drop-shadow(0 0 10px rgba(252, 211, 77, 0.6));
    animation: twinkle-float 3s ease-in-out infinite;
}

.bridge-star.star-1 {
    top: 10%;
    left: 10%;
    font-size: 28px;
    animation-delay: 0s;
}

.bridge-star.star-2 {
    top: 40%;
    right: 5%;
    font-size: 20px;
    color: #60A5FA;
    /* Blue star */
    animation-delay: 1s;
}

.bridge-star.star-3 {
    top: 5%;
    right: 20%;
    font-size: 24px;
    color: #F472B6;
    /* Pink star */
    animation-delay: 1.5s;
}

/* FLOATING 3D ICONS REMOVED per user request */
/* The styles for icons have been stripped to keep the UI clean. */


/* ANIMATIONS */
@keyframes twinkle-float {

    0%,
    100% {
        transform: scale(1) rotate(0deg) translateY(0);
        opacity: 0.8;
    }

    50% {
        transform: scale(1.2) rotate(15deg) translateY(-10px);
        opacity: 1;
    }
}

@media (max-width: 768px) {
    .section-bridge {
        padding: 50px 24px 0 24px;
        min-height: auto;
        border-radius: 32px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding-bottom: 0;
        overflow: hidden;
    }

    .section-bridge-inner {
        flex-direction: column !important;
        gap: 10px !important;
        align-items: center !important;
        justify-content: flex-start !important;
        height: auto !important;
    }

    .section-bridge-inner>div:first-child {
        max-width: 100% !important;
        text-align: center !important;
        padding-bottom: 10px !important;
        width: 100%;
        margin-top: 20px;
    }

    .bridge-character-wrapper {
        margin-right: 0 !important;
        margin-bottom: -10px !important;
        /* Slight overlap with bottom edge */
        align-self: center !important;
        width: 100%;
        display: flex;
        justify-content: center;
        margin-top: 10px;
        position: relative;
        /* Ensure absolute children position correctly */
        z-index: 10;
        /* Ensure icons don't overlap previous sections erroneously */
    }

    .bridge-character-img {
        width: 320px !important;
        /* Slightly smaller to fit icons around */
        max-width: 95% !important;
        height: auto;
        filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.5));
    }

    /* Remove old stars */
    .bridge-star {
        display: none;
    }

    /* Badge positioning */
    .platform-badge {
        position: absolute !important;
        top: 20px !important;
        right: 20px !important;
        padding: 6px 14px !important;
    }

    .section-bridge-title {
        font-size: var(--section-title-size) !important;
        text-align: center;
        margin-top: 40px !important;
        /* Space from top/badge */
        padding: 0 5px;
        line-height: var(--section-title-line);
    }

    .section-bridge-subtitle {
        font-size: 1rem;
        max-width: 100%;
        text-align: center;
        padding: 0 15px;
        margin-top: 10px;
    }

    .loading-dots-container {
        display: none !important;
        /* Hide dots on mobile to reduce clutter */
    }

    .section-bridge-dots {
        display: none;
    }
}

/* SOLUTIONS SECTION - Modern Card Redesign (Jet Admin Style) */
.solutions-section {
    padding: 100px 0;
    background: transparent;
    position: relative;
    overflow: hidden;
}

.solutions-section .container {
    position: relative;
    z-index: 1;
}

/* Блок «Что вы получаете»: в полную ширину, без наложения, плавная анимация появления */
.solutions-slides-wrap {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    position: relative;
}

.solutions-grid-vertical {
    display: flex;
    flex-direction: column;
    gap: 60px;
    max-width: 100%;
    margin: 0 auto;
}

.solutions-slides .solution-card-modern {
    position: relative;
    box-shadow: none;
    filter: none;
    border-radius: 28px;
    transition: filter 0.35s ease;
}

/* Карточки «Что вы получаете» — по умолчанию видимы, лёгкий сдвиг при скролле */
.solution-card-modern {
    opacity: 1;
    transform: translateY(16px) translateZ(0);
}

.solution-card-modern.animated {
    opacity: 1;
    transform: translateY(0) translateZ(0);
}

.solution-card-modern {
    background: linear-gradient(145deg,
            #101020 0%,
            #14142b 25%,
            #181830 50%,
            #14142b 75%,
            #101020 100%);
    position: relative;
    border-radius: 32px;
    overflow: hidden;
    box-shadow: none;
    filter: none;
    border: 1px solid rgba(99, 102, 241, 0.12);
    display: flex;
    align-items: center;
    padding: 0;
    transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        filter 0.35s ease, border-color 0.3s ease;
    min-height: 480px;
}

/* Статичное свечение фона — без анимации */
.solution-card-modern::before {
    content: '';
    position: absolute;
    top: -30%;
    right: -30%;
    width: 120%;
    height: 120%;
    background: radial-gradient(circle,
            rgba(99, 102, 241, 0.1) 0%,
            rgba(139, 92, 246, 0.06) 40%,
            transparent 70%);
    opacity: 1;
    pointer-events: none;
    z-index: 0;
}

.solution-card-modern:hover {
    transform: translateY(-4px);
    filter: none;
    border-color: rgba(99, 102, 241, 0.2);
}

.solution-card-modern:hover .solution-content h3 {
    color: #FFFFFF;
}

/* Подъём только у карточек без плашки; тень из системы */
.solution-card-modern:hover .ui-mock-card:not(.ui-mock-card--placard) {
    transform: translateY(-4px);
    box-shadow: var(--placard-shadow-hover);
}

.solution-card-modern.reverse {
    flex-direction: row-reverse;
}

.solution-content {
    flex: 1;
    padding: 60px;
    position: relative;
    z-index: 1;
}

.solution-visual-wrapper {
    flex: 1.1;
    height: 100%;
    min-height: 480px;
    background: none;
    /* Removed background completely */
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: visible;
    /* Allow content to breathe */
    border: none;
}

/* No special override needed for reverse layout now */

.solution-content h3 {
    font-size: 2.2rem;
    line-height: 1.2;
    margin-bottom: 20px;
    color: #FFFFFF;
    letter-spacing: -0.01em;
}

.solution-content p {
    font-size: 1.05rem;
    color: #9CA3AF;
    margin-bottom: 32px;
    line-height: 1.7;
}

.solution-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* ================================================== */
/* Solutions Slider — живые анимации деталей (4 слайда) */
/* ================================================== */

/* Slide 1: P&L chart — статичные элементы для плавности */
.solution-slide[data-slide="1"] .pl-bar {
    transform-origin: bottom;
    /* Анимации отключены для производительности */
}

.solution-slide[data-slide="1"] .pl-chip {
    /* Статичный */
}

.solution-slide[data-slide="1"] .pl-metric-value {
    /* Статичный */
}


/* Slide 2: SEO list — статичные элементы */
.solution-slide[data-slide="2"] .seo-row {
    /* Статичный */
}

.solution-slide[data-slide="2"] .seo-arrow {
    /* Статичный */
}

.solution-slide[data-slide="2"] .seo-tags span {
    /* Статичный */
}


/* Slide 3: Warehouse — статичные элементы */
.solution-slide[data-slide="3"] .stock-bar-fill {
    transform-origin: left;
    /* Статичный */
}

.solution-slide[data-slide="3"] .stock-alert {
    /* Статичный */
}

.solution-slide[data-slide="3"] .stock-status {
    /* Статичный */
}


/* Slide 4: Niches — статичные элементы */
.solution-slide[data-slide="4"] .niche-item {
    /* Статичный */
}

.solution-slide[data-slide="4"] .niche-icon {
    /* Статичный */
}

.solution-slide[data-slide="4"] .niche-growth {
    /* Статичный */
}


.solution-tag {
    background: #F3F4F6;
    padding: 8px 16px;
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-main);
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s;
}

.solution-tag i {
    color: var(--primary);
}

.solution-tag:hover {
    background: #DBEAFE;
    color: var(--primary-dark);
}

.solution-tag--clickable,
button.solution-tag {
    cursor: pointer;
    border: none;
    font-family: inherit;
}

.solution-tag--clickable:hover,
button.solution-tag:hover {
    background: #DBEAFE;
    color: var(--primary-dark);
    transform: translateY(-1px);
}

/* Модальное окно с подробной информацией по подблокам */
.solution-detail-modal-content {
    max-width: 560px;
}

.solution-detail-title {
    margin-bottom: 20px;
    font-size: 1.5rem;
    color: var(--text-main);
}

.solution-detail-body {
    font-size: 1rem;
    line-height: 1.65;
    color: var(--text-main);
}

.solution-detail-body p {
    margin-bottom: 1em;
}

.solution-detail-body p:last-child {
    margin-bottom: 0;
}

/* Единая голубая палитра плашек (как в P&L) */
:root {
    --placard-blue: #2563EB;
    --placard-blue-light: #93C5FD;
    --placard-blue-border: rgba(37, 99, 235, 0.25);
    /* Тени слайдов: симметричная тень (0 offset) — ровно по контуру, без «кривой» внизу */
    --placard-shadow: 0 10px 28px rgba(0, 0, 0, 0.08);
    --placard-shadow-hover: 0 18px 42px rgba(0, 0, 0, 0.12);
}

/* Слайды 1–4: без бесконечных анимаций — статичный контент, hover только через transition плашки */

/* UI Mockups — тени, голубая обводка, медленная статичная анимация */
.ui-mock-card {
    background: #ffffff;
    border-radius: 22px;
    box-shadow: none;
    width: 75%;
    max-width: 340px;
    padding: 24px;
    border: 1px solid var(--placard-blue-border);
    border-left: 3px solid var(--placard-blue);
    position: relative;
    left: auto;
    transform: translateY(0);
    transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        box-shadow 0.35s ease, border-color 0.3s ease;
    margin: 0 auto;
}

/* Появление плашки: только opacity, без keyframes — ровное появление без «кривизны» */
.solutions-section.carousel-mode .solution-card-modern.carousel-active .ui-mock-card--placard {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.25s ease, transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.35s ease, border-color 0.28s ease;
}

.solutions-section.carousel-mode .solution-card-modern:not(.carousel-active) .ui-mock-card--placard {
    opacity: 0;
    transform: translateY(0);
    pointer-events: none;
    transition: opacity 0.2s ease;
}

/* При наведении — одна аккуратная «подъёмная» тень из системы */
.ui-mock-card--placard:hover {
    transform: translateY(-4px);
    box-shadow: none;
    border-left-color: var(--placard-blue);
    border-color: var(--placard-blue-border);
}

.ui-mock-card--placard {
    padding-top: 40px;
    transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        box-shadow 0.35s ease, border-color 0.3s ease;
}

.ui-mock-card__dot {
    transition: transform 0.22s ease, filter 0.22s ease;
}

.ui-mock-card--placard:hover .ui-mock-card__dot--red {
    transform: scale(1.1);
}

.ui-mock-card--placard:hover .ui-mock-card__dot--yellow {
    transform: scale(1.08);
}

.ui-mock-card--placard:hover .ui-mock-card__dot--green {
    transform: scale(1.1);
}

/* На hover — остановка внутренних анимаций, чтобы не «дёргало» */

/* Деталь плашки — тонкая голубая линия сверху (единая стилистика) */
.ui-mock-card--placard::before {
    content: '';
    position: absolute;
    top: 0;
    left: 24px;
    right: 24px;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--placard-blue), transparent);
    opacity: 0.5;
    border-radius: 0 0 2px 2px;
    pointer-events: none;
}

.ui-mock-card--placard:hover::before {
    opacity: 0.8;
}

/* Кнопки в стиле macOS — ровно по сетке, как в окне: фиксированный отступ от угла */
.ui-mock-card__traffic {
    position: absolute;
    top: 14px;
    left: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
}

.ui-mock-card__dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
    transition: transform 0.2s ease, filter 0.2s ease;
}

.ui-mock-card__dot:hover {
    transform: scale(1.15);
    filter: brightness(0.95);
}

.ui-mock-card__dot--red {
    background: #FF5F57;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06);
}

.ui-mock-card__dot--yellow {
    background: #FEBC2E;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06);
}

.ui-mock-card__dot--green {
    background: #28C840;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06);
}

/* Индивидуальные размеры плашек — логично увеличены под контент */
/* Слайд 1 (P&L): шире и выше — график и цифры */
.solution-slide[data-slide="1"] .ui-mock-card--slide-1 {
    width: 92%;
    max-width: 420px;
    min-height: 340px;
    align-self: center;
}

/* Слайд 2 (SEO): компактный список SERP — чуть шире и выше */
.solution-slide[data-slide="2"] .ui-mock-card--slide-2 {
    width: 78%;
    max-width: 340px;
    min-height: 360px;
    align-self: center;
}

/* Слайд 3 (Склад): статус и прогресс — выше */
.solution-slide[data-slide="3"] .ui-mock-card--slide-3 {
    width: 84%;
    max-width: 380px;
    min-height: 380px;
    align-self: center;
}

/* Слайд 4 (Аналитика): таблица ниш — шире и выше */
.solution-slide[data-slide="4"] .ui-mock-card--slide-4 {
    width: 90%;
    max-width: 400px;
    min-height: 360px;
    align-self: center;
}

/* Единая голубая стилистика — акцент на слайде 2 (выделенная строка SERP) */
.solution-slide[data-slide="2"] .ui-mock-card--slide-2>div:nth-child(4) {
    border-left: 3px solid var(--placard-blue);
    padding-left: 13px;
    margin-left: -1px;
}

/* Теги под слайдами — текст белый, иконки синие */
.solutions-section.carousel-mode .solution-tags .solution-tag {
    background: rgba(255, 255, 255, 0.12) !important;
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

.solutions-section.carousel-mode .solution-tags .solution-tag i {
    color: var(--placard-blue) !important;
}

.solutions-section.carousel-mode .solution-tags .solution-tag:hover {
    background: rgba(255, 255, 255, 0.18) !important;
    color: #fff !important;
    border-color: rgba(37, 99, 235, 0.4) !important;
}

.solutions-section.carousel-mode .solution-tags .solution-tag:hover i {
    color: var(--placard-blue-light) !important;
}

/* Card specific vertical positioning - simplify */
.solution-card-modern .ui-mock-card,
.solution-card-modern.reverse .ui-mock-card {
    top: auto;
    left: auto;
    transform: none;
}

/* Card specific positioning adjustments to prevent cut-off */
/* Obsolete specific positioning removed in favor of central alignment */

/* Obsolete positioning removed */

/* Specific fix for P&L Card content centering */
.pl-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

/* Responsive */
@media (max-width: 900px) {
    .solutions-grid-vertical {
        gap: 48px;
    }

    .solution-card-modern,
    .solution-card-modern.reverse {
        flex-direction: column;
        height: auto;
        min-height: auto;
    }

    .solution-visual-wrapper {
        width: 100%;
        min-height: 300px;
        order: -1;
        /* Image always on top on mobile */
        border: none;
        border-bottom: 1px solid #F3F4F6;
    }

    .solution-content {
        padding: 40px 30px;
    }

    .solution-content h3 {
        font-size: 1.8rem;
    }
}

/* FAQ SECTION - Clean Cards */
.faq-section {
    padding: 20px 0 50px;
    background: var(--bg-light);
}

.faq-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-top: 32px;
}

.faq-item {
    background: #F9FAFB;
    border-radius: var(--radius-card);
    padding: 30px;
    border: 1px solid #E5E7EB;
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.faq-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(37, 99, 235, 0.05), transparent);
    transition: left 0.5s ease;
}

.faq-item:hover::before {
    left: 100%;
}

.faq-item:hover {
    border-color: var(--primary-light);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
    background: #fff;
    transform: translateY(-3px);
}

.faq-item h4 {
    transition: color 0.3s ease;
}

.faq-item:hover h4 {
    color: var(--primary);
}

.faq-item h4 {
    font-size: 1.2rem;
    margin-bottom: 12px;
    color: #111;
}

.faq-item p {
    color: var(--text-muted);
    font-size: 0.95rem;
}

/* FOOTER UPDATES */
.footer-content-dark {
    background: #1E3A8A;
    /* Dark Blue instead of Navy */
    background: radial-gradient(circle at 50% -20%, #1E40AF, #1E3A8A);
}

/* HOW WE WORK SECTION */
.how-we-work-section {
    padding: 100px 0;
    background: var(--bg-light);
    /* Light grey background from reference */
    border-radius: 40px;
    overflow: hidden;
}

.work-steps-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 60px;
}

.work-step {
    background: #FFFFFF;
    border-radius: 32px;
    /* Very rounded corners */
    padding: 40px;
    position: relative;
    overflow: hidden;
    /* For clipping the watermark number */
    border: 1px solid rgba(0, 0, 0, 0.03);
    /* Very subtle border */
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.03);
    /* Soft shadow */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.work-step::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.04) 0%, rgba(99, 102, 241, 0.03) 100%);
    opacity: 0;
    transition: opacity 0.35s ease;
    pointer-events: none;
}

.work-step:hover::before {
    opacity: 1;
}

/* Обводка слева — цвет по блоку (01 синий, 02 фиолетовый, 03 оранжевый) */
.work-step::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 0;
    background: linear-gradient(180deg, var(--primary) 0%, var(--primary-light) 50%, rgba(99, 102, 241, 0.9) 100%);
    border-radius: 0 4px 4px 0;
    transition: height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.work-step:nth-child(1)::after {
    background: linear-gradient(180deg, #2563EB 0%, #60A5FA 50%, rgba(99, 102, 241, 0.85) 100%);
}

.work-step:nth-child(2)::after {
    background: linear-gradient(180deg, #7C3AED 0%, #A78BFA 50%, rgba(139, 92, 246, 0.85) 100%);
}

.work-step:nth-child(3)::after {
    background: linear-gradient(180deg, #EA580C 0%, #FB923C 50%, rgba(249, 115, 22, 0.85) 100%);
}

.work-step:hover::after {
    height: 100%;
}

.work-step:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.06);
    border-color: rgba(0, 0, 0, 0.06);
}

.work-step:nth-child(1):hover {
    box-shadow: 0 16px 48px rgba(37, 99, 235, 0.1), 0 0 0 1px rgba(37, 99, 235, 0.08);
    border-color: rgba(37, 99, 235, 0.15);
}

.work-step:nth-child(2):hover {
    box-shadow: 0 16px 48px rgba(124, 58, 237, 0.1), 0 0 0 1px rgba(139, 92, 246, 0.08);
    border-color: rgba(124, 58, 237, 0.15);
}

.work-step:nth-child(3):hover {
    box-shadow: 0 16px 48px rgba(234, 88, 12, 0.1), 0 0 0 1px rgba(249, 115, 22, 0.08);
    border-color: rgba(234, 88, 12, 0.15);
}

.work-step:nth-child(1):hover::before {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.05) 0%, rgba(99, 102, 241, 0.03) 100%);
}

.work-step:nth-child(2):hover::before {
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.05) 0%, rgba(139, 92, 246, 0.03) 100%);
}

.work-step:nth-child(3):hover::before {
    background: linear-gradient(135deg, rgba(234, 88, 12, 0.05) 0%, rgba(249, 115, 22, 0.03) 100%);
}

/* Крупные цифры 01, 02, 03 — по умолчанию без свечения, при наведении светятся своим цветом */
.work-step-number {
    position: absolute;
    top: -10px;
    right: 20px;
    font-size: 8rem;
    font-weight: 800;
    color: #E5E7EB;
    z-index: 0;
    line-height: 1;
    pointer-events: none;
    user-select: none;
    opacity: 0.55;
    text-shadow: none;
    transition: color 0.4s ease, opacity 0.4s ease, text-shadow 0.4s ease, filter 0.4s ease;
}

/* Свечение цифр — пастельные цвета по блокам (классы + nth-child для надёжности) */
.work-step--01:hover .work-step-number,
.work-step:nth-child(1):hover .work-step-number {
    color: rgba(147, 197, 253, 0.42) !important;
    opacity: 0.9 !important;
    text-shadow:
        0 0 18px rgba(147, 197, 253, 0.25),
        0 0 36px rgba(191, 219, 254, 0.14) !important;
}

.work-step--02:hover .work-step-number,
.work-step:nth-child(2):hover .work-step-number {
    color: rgba(196, 181, 253, 0.42) !important;
    opacity: 0.9 !important;
    text-shadow:
        0 0 18px rgba(196, 181, 253, 0.25),
        0 0 36px rgba(221, 214, 254, 0.14) !important;
}

.work-step--03:hover .work-step-number,
.work-step:nth-child(3):hover .work-step-number {
    color: rgba(253, 186, 140, 0.48) !important;
    opacity: 0.9 !important;
    text-shadow:
        0 0 18px rgba(253, 186, 140, 0.22),
        0 0 36px rgba(254, 215, 170, 0.12) !important;
}

/* Иконки: по умолчанию слегка подсвечены сзади, при наведении на блок — свечение убираем */
.work-step .apple-icon-wrapper {
    transition: box-shadow 0.4s ease, transform 0.4s ease;
}

.work-step .apple-icon-wrapper .icon-glow {
    opacity: 0.55;
    transition: opacity 0.35s ease;
}

.work-step:hover .apple-icon-wrapper .icon-glow {
    opacity: 0;
}

.work-step:hover .apple-icon-wrapper {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.work-step:hover .apple-icon-wrapper.icon-blue {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.work-step:hover .apple-icon-wrapper.icon-purple {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.work-step:hover .apple-icon-wrapper.icon-orange {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

/* Icon Box — в тон обводке (синий стиль) */
.work-step-icon {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, var(--primary) 0%, #4338ca 100%);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.8rem;
    margin-bottom: 24px;
    position: relative;
    z-index: 1;
    box-shadow: 0 10px 24px rgba(37, 99, 235, 0.25);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.work-step:hover .work-step-icon {
    transform: scale(1.15) rotate(5deg);
    box-shadow: 0 15px 40px rgba(37, 99, 235, 0.35);
    animation: icon-bounce 0.52s var(--ease-in-out-smooth);
}

.work-step-icon::before {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 26px;
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.25), rgba(99, 102, 241, 0.2));
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: -1;
    filter: blur(10px);
}

.work-step:hover .work-step-icon::before {
    opacity: 1;
}

.work-step h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #111;
    margin-bottom: 16px;
    position: relative;
    z-index: 1;
}

.work-step p {
    font-size: 1rem;
    color: var(--text-muted);
    line-height: 1.6;
    position: relative;
    z-index: 1;
}

/* Responsive adjustments */
@media (max-width: 900px) {
    .work-steps-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .work-step {
        padding: 30px;
    }
}

/* FEATURES & SECURITY SECTION REDESIGN */
.features-security-section {
    padding: 100px 0;
    background: var(--bg-light);
    /* Light gray background for the section */
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.feature-card {
    background: #FFFFFF;
    border-radius: 28px;
    padding: 40px 30px;
    border: 1px solid rgba(0, 0, 0, 0.03);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.03);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.feature-card::before {
    content: '';
    position: absolute;
    top: -100%;
    left: -100%;
    width: 300%;
    height: 300%;
    background: radial-gradient(circle, rgba(37, 99, 235, 0.08) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.5s ease, transform 0.5s ease;
    transform: translate(50%, 50%);
    pointer-events: none;
}

.feature-card:hover::before {
    opacity: 1;
    transform: translate(0, 0);
}

.feature-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary), #10B981);
    transition: width 0.5s ease;
}

.feature-card:hover::after {
    width: 80%;
}

.feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08);
    border-color: #10B981;
}

/* Единый стиль иконок: тёмный контейнер + цветное свечение сверху-слева */
.feature-icon {
    width: 72px;
    height: 72px;
    background: rgba(18, 18, 24, 0.95);
    color: rgba(255, 255, 255, 0.95);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    margin-bottom: 24px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.features-grid .feature-card:nth-child(1) .feature-icon {
    box-shadow: -6px -6px 28px rgba(59, 130, 246, 0.45), 0 0 36px rgba(59, 130, 246, 0.18);
}

.features-grid .feature-card:nth-child(2) .feature-icon {
    box-shadow: -6px -6px 28px rgba(16, 185, 129, 0.45), 0 0 36px rgba(16, 185, 129, 0.18);
}

.features-grid .feature-card:nth-child(3) .feature-icon {
    box-shadow: -6px -6px 28px rgba(139, 92, 246, 0.45), 0 0 36px rgba(139, 92, 246, 0.18);
}

.feature-icon::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 20px;
    background: linear-gradient(165deg, rgba(255, 255, 255, 0.08) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
}

.feature-card:hover .feature-icon {
    transform: scale(1.08);
}

.features-grid .feature-card:nth-child(1):hover .feature-icon {
    box-shadow: -8px -8px 32px rgba(59, 130, 246, 0.55), 0 0 44px rgba(59, 130, 246, 0.22);
}

.features-grid .feature-card:nth-child(2):hover .feature-icon {
    box-shadow: -8px -8px 32px rgba(16, 185, 129, 0.55), 0 0 44px rgba(16, 185, 129, 0.22);
}

.features-grid .feature-card:nth-child(3):hover .feature-icon {
    box-shadow: -8px -8px 32px rgba(139, 92, 246, 0.55), 0 0 44px rgba(139, 92, 246, 0.22);
}

.feature-card h3 {
    font-size: 1.4rem;
    font-weight: 700;
    color: #111;
    margin-bottom: 16px;
    line-height: 1.3;
}

.feature-card p {
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 24px;
    flex-grow: 1;
    /* Pushes list to bottom if needed, or just spacers */
}

/* Custom Check List */
.list-check-green {
    list-style: none;
    padding: 0;
}

.list-check-green li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
    color: var(--text-main);
    font-size: 0.95rem;
    font-weight: 500;
}

.list-check-green li i {
    color: #10B981;
    /* Green check */
    background: #ECFDF5;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6rem;
    margin-top: 3px;
    /* visual alignment */
    flex-shrink: 0;
}


/* Responsive */
@media (max-width: 900px) {
    .features-grid {
        grid-template-columns: 1fr;
    }
}

/* PRICING SECTION - Black Background Mod */
.pricing-section {
    padding: 100px 0;
    background-color: #000000 !important;
    position: relative;
    z-index: 10;
}

.pricing-section .section-title h2 {
    color: #FFFFFF !important;
}

.pricing-section .section-title p {
    color: #9CA3AF !important;
    /* Gray-400 equivalent */
}

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 60px;
}

.pricing-card {
    background: #FFFFFF;
    border-radius: 24px;
    padding: 40px 30px;
    /* Reduced padding slightly for better fit */
    text-align: center;
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.1);
    /* Subtle border */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
}

.pricing-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(255, 255, 255, 0.15);
    /* White glow on black bg */
}

/* Make "Popular" card pop even more */
.pricing-card.popular {
    background: #FFFFFF;
    /* Still white */
    border: 2px solid #2563DD;
    /* Brand Blue border */
    transform: scale(1.05);
    z-index: 2;
    box-shadow: 0 20px 50px rgba(37, 99, 221, 0.3);
    /* Blue glow */
}

.pricing-card.popular:hover {
    transform: scale(1.05) translateY(-10px);
}

.pricing-header h3 {
    font-size: 1.5rem;
    color: #111;
    margin-bottom: 10px;
}

.pricing-header .price {
    font-size: 2.5rem;
    font-weight: 800;
    color: #111;
    margin: 15px 0;
}

.pricing-header .period {
    font-size: 1rem;
    color: #6B7280;
    font-weight: 400;
}

.pricing-header .desc {
    color: #6B7280;
    margin-bottom: 30px;
    font-size: 0.95rem;
}

.pricing-features {
    list-style: none;
    padding: 0;
    margin-bottom: 30px;
    text-align: left;
    flex-grow: 1;
    /* Pushes button down */
}

.pricing-features li {
    margin-bottom: 12px;
    color: #374151;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 10px;
}

.pricing-features li i {
    color: #10B981;
    /* Green check */
}

.pricing-features li.disabled {
    color: #9CA3AF;
    text-decoration: line-through;
}

.pricing-features li.disabled i {
    color: #D1D5DB;
}

.badge {
    position: absolute;
    top: 15px;
    right: 15px;
    background: #2563DD;
    color: white;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
}

/* Responsive Pricing */
@media (max-width: 900px) {
    .pricing-grid {
        grid-template-columns: 1fr;
        max-width: 400px;
        margin-left: auto;
        margin-right: auto;
    }

    .pricing-card.popular {
        transform: scale(1);
    }

    .pricing-card.popular:hover {
        transform: translateY(-5px);
    }
}

/* FOOTER REDESIGN */
.footer-blue-redesign {
    background: #3B82F6;
    /* Bright Blue */
    color: #FFFFFF;
    position: relative;
    overflow: hidden;
    font-family: var(--font-main);
    display: flex;
    flex-direction: column;
}

.footer-relative {
    position: relative;
    z-index: 2;
    /* Increased z-index */
    display: flex;
    flex-direction: column;
    min-height: 500px;
    padding-bottom: 25vw;
    /* Increased padding bottom to push giant text well below details */
}

.footer-content-grid {
    display: flex;
    justify-content: space-between;
    width: 100%;
    /* Align with grid layout */
}

/* Left Column */
.footer-left {
    display: flex;
    flex-direction: column;
}

.footer-header-small {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 20px;
    opacity: 0.9;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.6);
}

.footer-header-large {
    font-size: 2.8rem;
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 5px;
}

.footer-details-block {
    margin-top: 60px;
}

.detail-item {
    margin-bottom: 24px;
}

.detail-label {
    display: block;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 4px;
}

.detail-link,
.detail-text {
    font-size: 1rem;
    font-weight: 500;
    color: white;
}

.detail-link:hover {
    text-decoration: underline;
}

/* Right Column */
.footer-right {
    display: flex;
    gap: 60px;
    align-items: flex-start;
    padding-top: 60px;
}

.social-links-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.social-item {
    font-size: 1.2rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 12px;
}

.social-item i {
    font-size: 1.5rem;
    background: #22C55E;
    /* WhatsApp Green default usually, but reference shows plain text/icon mixture or blue bg? Keeping simple white/green accent if needed. Reference looks fully white/blue. Using white. */
    color: white;
    /* Icons white */
    width: 32px;
    height: 32px;
    border-radius: 50%;
    /* display: flex; align-items: center; justify-content: center; */
    background: none;
    /* Reset */
    color: #4ADE80;
    /* Light green for WA */
}

.social-item i.fa-telegram-plane {
    color: #60A5FA;
    /* Light Blue for TG */
}

/* QR Code */
.qr-code-box {
    background: white;
    padding: 10px;
    border-radius: 12px;
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    color: #111;
}

.qr-code-box i {
    font-size: 80px;
}

.qr-label {
    position: absolute;
    background: #3B82F6;
    color: white;
    padding: 2px 6px;
    font-size: 10px;
    font-weight: bold;
    border-radius: 4px;
}

/* Giant Text */
.footer-giant-text-container {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    pointer-events: none;
    overflow: visible;
    /* changed from hidden to let ascenders/descenders show if needed */
}

.footer-giant-text {
    font-size: 13vw;
    /* Reduced further to 13vw */
    font-weight: 700;
    color: white;
    text-align: center;
    line-height: normal;
    white-space: nowrap;
    margin-bottom: 20px;
    /* Ensure some spacing from bottom edge */
}

/* Responsive */
@media (max-width: 900px) {
    .footer-content-grid {
        flex-direction: column;
        gap: 40px;
    }

    .footer-right {
        padding-top: 0;
        justify-content: flex-start;
    }

    .footer-giant-text {
        font-size: 22vw;
    }
}

/* High specificity override for footer container */
.footer-blue-redesign .footer-relative {
    width: 100% !important;
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    align-self: center !important;
}

.footer-content-grid {
    width: 100% !important;
    justify-content: space-between !important;
}

/* PRICING SECTION STYLES */
.pricing-section {
    padding: 100px 0;
}

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-top: 50px;
}

.pricing-card {
    background: #FFFFFF;
    border-radius: 24px;
    padding: 40px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    position: relative;
}

.pricing-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 60px rgba(37, 99, 235, 0.1);
}

.pricing-card.popular {
    border: 2px solid var(--primary);
    box-shadow: 0 20px 60px rgba(139, 92, 246, 0.15);
    z-index: 2;
}

.badge {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--primary);
    color: white;
    padding: 6px 16px;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

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

.pricing-header h3 {
    font-size: 1.5rem;
    color: #111;
    margin-bottom: 10px;
}

.pricing-header .price {
    font-size: 2.5rem;
    font-weight: 700;
    color: #111;
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 5px;
}

.pricing-header .price .period {
    font-size: 1rem;
    color: var(--text-muted);
    font-weight: 400;
}

.pricing-header .desc {
    color: var(--text-muted);
    font-size: 0.95rem;
    margin-top: 10px;
}

.pricing-features {
    list-style: none;
    padding: 0;
    margin: 0 0 30px 0;
    flex: 1;
}

.pricing-features li {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 15px;
    color: var(--text-main);
    font-size: 1rem;
}

.pricing-features li i {
    color: #10B981;
}

.pricing-features li.disabled {
    color: #9CA3AF;
    text-decoration: line-through;
}

.pricing-features li.disabled i {
    color: #D1D5DB;
}

.btn-outline {
    display: inline-block;
    padding: 12px 32px;
    border-radius: 50px;
    font-weight: 600;
    text-align: center;
    border: 2px solid #E5E7EB;
    color: var(--text-main);
    transition: all 0.2s;
}

.btn-outline:hover {
    color: var(--primary);
}

/* ========================================
   AI CHAT ASSISTANT STYLES
   ======================================== */

/* Floating Toggle Button */
.ai-chat-toggle {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--primary);
    color: white;
    border: none;
    font-size: 24px;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(37, 99, 235, 0.4);
    transition: all 0.3s ease;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ai-chat-toggle:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 30px rgba(37, 99, 235, 0.6);
}

/* Chat Container */
.ai-chat-container {
    position: fixed;
    bottom: 100px;
    right: 30px;
    width: 380px;
    height: 500px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
    z-index: 1000;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: bottom right;
}

.ai-chat-container.hidden {
    opacity: 0;
    transform: scale(0.8) translateY(20px);
    pointer-events: none;
}

/* Chat Header */
.ai-chat-header {
    padding: 20px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    border-radius: 24px 24px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: white;
}

.ai-chat-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    font-size: 1.1rem;
}

.ai-chat-title i {
    font-size: 1.3rem;
}

.ai-chat-close-btn {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.ai-chat-close-btn:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* Chat Messages */
.ai-chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ai-chat-messages::-webkit-scrollbar {
    width: 6px;
}

.ai-chat-messages::-webkit-scrollbar-track {
    background: transparent;
}

.ai-chat-messages::-webkit-scrollbar-thumb {
    background: #E5E7EB;
    border-radius: 3px;
}

.ai-chat-messages::-webkit-scrollbar-thumb:hover {
    background: #D1D5DB;
}

/* Message Styles */
.ai-message,
.user-message {
    display: flex;
    gap: 10px;
    animation: messageSlideIn 0.3s ease;
}

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

@keyframes messageSlideIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

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

.ai-message-avatar,
.user-message-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 16px;
}

.ai-message-avatar {
    background: var(--bg-gradient-start);
    color: var(--primary);
}

.user-message-avatar {
    background: var(--primary);
    color: white;
}

.ai-message-content,
.user-message-content {
    padding: 12px 16px;
    border-radius: 16px;
    max-width: 75%;
    line-height: 1.5;
    font-size: 0.95rem;
}

.ai-message-content {
    background: #F3F4F6;
    color: var(--text-main);
    border-radius: 16px 16px 16px 4px;
}

.user-message-content {
    background: var(--primary);
    color: white;
    border-radius: 16px 16px 4px 16px;
}

/* Typing Indicator */
.typing-indicator {
    display: flex;
    gap: 4px;
    padding: 12px 16px;
}

.typing-indicator span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--text-muted);
    animation: typing 1.4s infinite;
}

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

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

@keyframes typing {

    0%,
    60%,
    100% {
        opacity: 0.3;
        transform: translateY(0);
    }

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

/* Chat Input */
.ai-chat-input-container {
    padding: 16px 20px;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    display: flex;
    gap: 10px;
}

.ai-chat-input {
    flex: 1;
    padding: 12px 16px;
    border-radius: 20px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    background: #F9FAFB;
    font-family: inherit;
    font-size: 0.95rem;
    transition: all 0.3s;
}

.ai-chat-input:focus {
    outline: none;
    border-color: var(--primary);
    background: white;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.ai-chat-send-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--primary);
    color: white;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.ai-chat-send-btn:hover {
    background: var(--primary-dark);
    transform: scale(1.05);
}

.ai-chat-send-btn:active {
    transform: scale(0.95);
}

/* Responsive */
@media (max-width: 768px) {
    .ai-chat-container {
        right: 10px;
        bottom: 90px;
        width: calc(100vw - 20px);
        max-width: 380px;
    }

    .ai-chat-toggle {
        right: 20px;
        bottom: 20px;
    }
}

/* ========================================
   TOAST NOTIFICATIONS
   ======================================== */

.toast-notification {
    position: fixed;
    top: 30px;
    right: 30px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    padding: 20px 24px;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 300px;
    max-width: 400px;
    z-index: 10000;
    animation: slideInRight 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.toast-notification.hiding {
    animation: slideOutRight 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes slideInRight {
    from {
        transform: translateX(450px);
        opacity: 0;
    }

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

@keyframes slideOutRight {
    from {
        transform: translateX(0);
        opacity: 1;
    }

    to {
        transform: translateX(450px);
        opacity: 0;
    }
}

.toast-notification.success {
    border-left: 4px solid #10B981;
}

.toast-notification.error {
    border-left: 4px solid #EF4444;
}

.toast-notification.info {
    border-left: 4px solid var(--primary);
}

.toast-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

.toast-notification.success .toast-icon {
    background: #D1FAE5;
    color: #10B981;
}

.toast-notification.error .toast-icon {
    background: #FEE2E2;
    color: #EF4444;
}

.toast-notification.info .toast-icon {
    background: var(--bg-gradient-start);
    color: var(--primary);
}

.toast-content {
    flex: 1;
}

.toast-title {
    font-weight: 600;
    font-size: 1rem;
    color: var(--text-main);
    margin-bottom: 4px;
}

.toast-message {
    font-size: 0.9rem;
    color: var(--text-muted);
    line-height: 1.4;
}

@media (max-width: 768px) {
    .toast-notification {
        right: 15px;
        left: 15px;
        top: 20px;
        min-width: auto;
    }
}

/* ========================================
   DASHBOARD STYLES
   ======================================== */

.dashboard-page {
    background: var(--bg-page);
    min-height: 100vh;
}

.dashboard-container {
    display: flex;
    height: 100vh;
}

/* Sidebar */
.dashboard-sidebar {
    width: 260px;
    background: #FFFFFF;
    border-right: 1px solid #E5E7EB;
    display: flex;
    flex-direction: column;
    position: fixed;
    height: 100vh;
    overflow-y: auto;
}

.sidebar-header {
    padding: 24px;
    border-bottom: 1px solid #E5E7EB;
}

.sidebar-logo {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary);
}

.sidebar-nav {
    flex: 1;
    padding: 20px 0;
}

.sidebar-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 24px;
    color: var(--text-muted);
    transition: all 0.2s;
    font-weight: 500;
}

.sidebar-link:hover {
    background: var(--bg-gradient-start);
    color: var(--primary);
}

.sidebar-link.active {
    background: var(--bg-gradient-start);
    color: var(--primary);
    border-right: 3px solid var(--primary);
}

.sidebar-link i {
    width: 20px;
    text-align: center;
}

.sidebar-footer {
    padding: 20px 0;
    border-top: 1px solid #E5E7EB;
}

.logout-link {
    color: #EF4444 !important;
}

/* Main Content */
.dashboard-main {
    flex: 1;
    margin-left: 260px;
    padding: 32px;
    overflow-y: auto;
}

.dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32px;
}

.dashboard-title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-main);
}

.dashboard-user {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-muted);
}

.dashboard-user i {
    font-size: 1.5rem;
    color: var(--primary);
}

/* Tab Content */
.dashboard-content {
    display: none;
}

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

/* Overview */
.overview-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* Force 2 columns */
    gap: 24px;
}

@media (max-width: 768px) {
    .overview-grid {
        grid-template-columns: 1fr;
    }
}

.overview-card {
    background: #FFFFFF;
    border-radius: 24px;
    padding: 32px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: center;
    gap: 20px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.overview-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
}

.card-icon {
    width: 60px;
    height: 60px;
    background: var(--bg-gradient-start);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--primary);
}

.card-info h3 {
    margin-bottom: 8px;
    color: var(--text-main);
}

.card-info p {
    color: var(--text-muted);
    margin: 4px 0;
}

/* Add Shop Card Specifics */
.add-shop-card {
    border: 2px solid #E5E7EB;
    min-height: 160px;
    /* Increased height to match Profile/Subscription */
    justify-content: center;
}

.add-shop-card:hover {
    border-color: #10B981;
    background: #FFFFFF !important;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.15);
}

/* Bidder */
.bidder-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.bidder-header h2 {
    font-size: 1.5rem;
    color: var(--text-main);
}

.bidder-table-wrapper {
    background: #FFFFFF;
    border-radius: 24px;
    padding: 24px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    overflow-x: auto;
}

.bidder-table {
    width: 100%;
    border-collapse: collapse;
}

.bidder-table thead th {
    text-align: left;
    padding: 12px;
    border-bottom: 2px solid #E5E7EB;
    color: var(--text-muted);
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
}

.bidder-table tbody td {
    padding: 16px 12px;
    border-bottom: 1px solid #F3F4F6;
}

.bidder-table tbody tr:hover {
    background: #F9FAFB;
}

.product-img {
    width: 50px;
    height: 50px;
    border-radius: 8px;
    object-fit: cover;
    background: #F3F4F6;
}

.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 100px;
    font-size: 0.85rem;
    font-weight: 500;
}

.status-badge.active {
    background: #D1FAE5;
    color: #10B981;
}

.status-badge.paused {
    background: #FEE2E2;
    color: #EF4444;
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
}

.bidder-actions {
    display: flex;
    gap: 8px;
}

.action-btn {
    width: 32px;
    height: 32px;
    border: none;
    background: var(--bg-gradient-start);
    color: var(--primary);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.action-btn:hover {
    background: var(--primary);
    color: white;
}

.boost-icon {
    color: #F59E0B;
}

/* Settings */
.settings-form {
    width: 100%;
    /* Full width */
    max-width: none;
    /* Remove constraint */
}

.settings-section {
    width: 100%;
    /* Ensure full width sections */
    background: #FFFFFF;
    border-radius: 24px;
    padding: 32px;
    margin-bottom: 24px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.settings-section h3 {
    margin-bottom: 24px;
    color: var(--text-main);
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    color: var(--text-main);
    font-weight: 500;
}

.form-input {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    font-size: 1rem;
    transition: all 0.2s;
}

.form-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.form-input:disabled {
    background: #F3F4F6;
    cursor: not-allowed;
}

.input-with-icon {
    position: relative;
}

.input-icon-btn {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 8px;
}

.input-icon-btn:hover {
    color: var(--primary);
}

/* Responsive */
@media (max-width: 968px) {
    .dashboard-sidebar {
        width: 80px;
    }

    .sidebar-link span {
        display: none;
    }

    .dashboard-main {
        margin-left: 80px;
        padding: 20px;
    }

    .dashboard-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .bidder-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }
}

@media (max-width: 768px) {
    .dashboard-sidebar {
        width: 100%;
        height: auto;
        position: relative;
        border-right: none;
        border-bottom: 1px solid #E5E7EB;
    }

    .sidebar-nav {
        display: flex;
        overflow-x: auto;
        padding: 0;
    }

    .sidebar-link {
        flex-direction: column;
        gap: 4px;
        font-size: 0.85rem;
    }

    .sidebar-link span {
        display: block;
    }

    .dashboard-main {
        margin-left: 0;
    }

    .overview-grid {
        grid-template-columns: 1fr;
    }
}

/* ========================================
   PRO DASHBOARD FEATURES CSS
   ======================================== */

/* Finance Tab */
.finance-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32px;
}

.period-selector {
    display: flex;
    gap: 8px;
    background: #F3F4F6;
    padding: 4px;
    border-radius: 12px;
}

.period-btn {
    padding: 8px 16px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    border-radius: 8px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.period-btn:hover {
    background: rgba(37, 99, 235, 0.1);
    color: var(--primary);
}

.period-btn.active {
    border: 2px solid #2563EB;
    background: rgba(37, 99, 235, 0.05);
    color: #2563EB;
    box-shadow: none;
    font-weight: 600;
}

/* Finance Metric Cards */
.finance-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 32px;
}

.metric-card {
    background: white;
    border-radius: 16px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s, background 0.2s;
    cursor: pointer;
    border: 2px solid transparent;
}

.metric-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.metric-card.active-metric {
    border-color: #10B981;
}

.metric-card.highlight {
    border: 2px solid #10B981;
}

.metric-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}

.metric-content {
    flex: 1;
}

.metric-label {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.metric-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-main);
}

.metric-change {
    font-size: 0.85rem;
    margin-top: 4px;
    color: var(--text-muted);
}

.metric-change.positive {
    color: #10B981;
}

.metric-change.negative {
    color: #EF4444;
}

/* Revenue Chart */
.revenue-chart-wrapper {
    background: white;
    border-radius: 24px;
    padding: 24px;
    margin-bottom: 32px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

.revenue-chart-wrapper h3,
.pl-table-wrapper h3 {
    margin-bottom: 20px;
    color: var(--text-main);
}

.revenue-chart {
    display: flex;
    justify-content: space-around;
    align-items: flex-end;
    height: 250px;
    padding: 20px 0;
    gap: 16px;
}

.chart-bar-group {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.chart-label {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.chart-bars {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 8px;
    height: 200px;
}

.chart-bar {
    width: 40px;
    border-radius: 8px 8px 0 0;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 8px;
    font-size: 0.75rem;
    font-weight: 600;
    color: white;
    position: relative;
}

.chart-bar.revenue {
    background: linear-gradient(to top, #2563EB, #60A5FA);
}

.chart-bar.profit {
    background: linear-gradient(to top, #10B981, #34D399);
}

.chart-legend {
    display: flex;
    justify-content: center;
    gap: 24px;
    margin-top: 20px;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.legend-color {
    width: 16px;
    height: 16px;
    border-radius: 4px;
}

/* P&L Table */
.pl-table-wrapper {
    background: white;
    border-radius: 24px;
    padding: 24px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

.pl-table {
    width: 100%;
    border-collapse: collapse;
}

.pl-table thead th {
    text-align: left;
    padding: 12px;
    border-bottom: 2px solid #E5E7EB;
    color: var(--text-muted);
    font-weight: 600;
    font-size: 0.85rem;
}

.pl-table tbody td {
    padding: 16px 12px;
    border-bottom: 1px solid #F3F4F6;
}

.pl-table tbody td.positive {
    color: #10B981;
    font-weight: 600;
}

.pl-table tbody td.negative {
    color: #EF4444;
    font-weight: 600;
}

/* Toggle Switch */
.toggle-switch {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

.toggle-switch input {
    display: none;
}

.toggle-slider {
    position: relative;
    width: 44px;
    height: 24px;
    background: #E5E7EB;
    border-radius: 12px;
    transition: background 0.3s;
}

.toggle-slider::before {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    background: white;
    border-radius: 50%;
    top: 3px;
    left: 3px;
    transition: transform 0.3s;
}

.toggle-switch input:checked+.toggle-slider {
    background: #10B981;
}

.toggle-switch input:checked+.toggle-slider::before {
    transform: translateX(20px);
}

/* Keywords Modal */
.keywords-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    align-items: center;
    justify-content: center;
}

.keywords-modal.active {
    display: flex;
}

.modal-content {
    background: white;
    border-radius: 24px;
    width: 90%;
    max-width: 600px;
    max-height: 80vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px;
    border-bottom: 1px solid #E5E7EB;
}

.modal-header h3 {
    margin: 0;
    color: var(--text-main);
}

.modal-close {
    width: 32px;
    height: 32px;
    border: none;
    background: #F3F4F6;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.modal-close:hover {
    background: #E5E7EB;
}

.modal-body {
    padding: 24px;
    overflow-y: auto;
    flex: 1;
}

.keywords-section {
    margin-bottom: 24px;
}

.keywords-section h4 {
    margin-bottom: 12px;
    color: var(--text-main);
}

.keywords-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.keyword-tag {
    background: #EFF6FF;
    color: var(--primary);
    padding: 6px 12px;
    border-radius: 100px;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 6px;
}

.keyword-tag.negative {
    background: #FEE2E2;
    color: #EF4444;
}

.keyword-tag i {
    cursor: pointer;
}

.modal-footer {
    padding: 24px;
    border-top: 1px solid #E5E7EB;
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

.btn-outline {
    background: transparent;
    border: 1px solid #E5E7EB;
    color: var(--text-main);
    padding: 10px 20px;
    border-radius: 50px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-outline:hover {
    border-color: var(--primary);
    color: var(--primary);
}

/* Team Management */
.team-members-list {
    margin-top: 24px;
}

.team-members-list h4 {
    margin-bottom: 16px;
    color: var(--text-main);
}

.team-table {
    width: 100%;
    border-collapse: collapse;
}

.team-table thead th {
    text-align: left;
    padding: 12px;
    border-bottom: 2px solid #E5E7EB;
    color: var(--text-muted);
    font-weight: 600;
    font-size: 0.85rem;
}

.team-table tbody td {
    padding: 12px;
    border-bottom: 1px solid #F3F4F6;
}

.team-table .remove-btn {
    background: #FEE2E2;
    color: #EF4444;
    border: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.team-table .remove-btn:hover {
    background: #FEF2F2;
}

/* Sparkline */
.sparkline {
    width: 60px;
    height: 30px;
    display: inline-flex;
    align-items: flex-end;
    gap: 2px;
    padding: 2px;
}

.sparkline-bar {
    flex: 1;
    background: var(--primary);
    border-radius: 2px 2px 0 0;
    min-height: 2px;
}

/* Bidder Table Enhancements */
.bidder-table {
    overflow-x: auto;
    white-space: nowrap;
}

.bidder-table select {
    padding: 6px 10px;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    font-size: 0.85rem;
    background: white;
    cursor: pointer;
}

.bidder-table select:focus {
    outline: none;
    border-color: var(--primary);
}

.bidder-table .keywords-btn {
    background: #EFF6FF;
    color: var(--primary);
    border: none;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 0.2s;
}

.bidder-table .keywords-btn:hover {
    background: #DBEAFE;
}

/* Responsive */
@media (max-width: 768px) {
    .finance-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .period-selector {
        width: 100%;
    }

    .finance-cards-grid {
        grid-template-columns: 1fr;
    }

    .revenue-chart {
        overflow-x: auto;
    }

    .bidder-table-wrapper {
        overflow-x: auto;
    }

    .modal-content {
        width: 95%;
        max-height: 90vh;
    }
}

/* Keywords Modal PRO Enhancements */
.keywords-list-ul {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
}

.keywords-list-ul li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #f8f9fc;
    border-radius: 8px;
    margin-bottom: 6px;
    font-size: 0.9rem;
    color: var(--text-main);
}

.keywords-list-ul li span {
    word-break: break-all;
}

.add-keyword-row {
    background: transparent !important;
    padding: 8px 0 !important;
    display: flex;
    gap: 8px;
}

.add-keyword-row input {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid #e3e6f0;
    border-radius: 8px;
    font-size: 0.9rem;
    outline: none;
    transition: border-color 0.2s;
}

.add-keyword-row input:focus {
    border-color: var(--primary);
}

.btn-icon-add {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    background: var(--primary);
    color: white;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s;
    font-size: 0.9rem;
}

.btn-icon-add:hover {
    background: #3e5abb;
}

/* ============================================================================
   RBAC SYSTEM STYLES
   ============================================================================ */

/* Locked Tab Styles */
.locked-tab {
    opacity: 0.6;
    cursor: not-allowed !important;
    position: relative;
}

.locked-tab:hover {
    background: rgba(108, 117, 125, 0.1) !important;
}

.locked-tab .fa-lock {
    font-size: 0.7em;
    margin-left: 5px;
    opacity: 0.6;
}

/* Role Badge Styles */
.role-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-left: 8px;
}

.role-badge.role-none {
    background: linear-gradient(135deg, #6c757d 0%, #5a6268 100%);
    color: white;
    box-shadow: 0 2px 8px rgba(108, 117, 125, 0.3);
}

.role-badge.role-rost {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}

.role-badge.role-businessman {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
}

.role-badge.role-moderator {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    color: white;
    box-shadow: 0 2px 8px rgba(139, 92, 246, 0.3);
    animation: moderatorPulse 2s ease-in-out infinite;
}

@keyframes moderatorPulse {

    0%,
    100% {
        box-shadow: 0 2px 8px rgba(139, 92, 246, 0.3);
    }

    50% {
        box-shadow: 0 4px 16px rgba(139, 92, 246, 0.5);
    }
}

/* Paywall Modal Enhancements */
#paywallModal {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

#paywallModal .modal-content {
    max-width: 520px;
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: var(--glass-border);
    border-radius: var(--radius-card);
    box-shadow: 0 20px 60px rgba(37, 99, 235, 0.15);
    overflow: hidden;
    animation: modalSlideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
    }

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

#paywallModal .modal-header {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    color: white;
    padding: 24px 30px;
    border-radius: var(--radius-card) var(--radius-card) 0 0;
    position: relative;
    overflow: hidden;
}

#paywallModal .modal-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%);
    pointer-events: none;
}

#paywallModal .modal-header h3 {
    position: relative;
    z-index: 1;
    margin: 0;
}

#paywallModal .modal-close {
    position: relative;
    z-index: 1;
    background: rgba(255, 255, 255, 0.2);
    color: white;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

#paywallModal .modal-close:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: rotate(90deg);
}

#paywallModal .modal-body {
    text-align: center;
    padding: 50px 40px;
    background: white;
}

#paywallModal .modal-body i.fa-lock {
    font-size: 4rem;
    color: var(--primary);
    margin-bottom: 24px;
    display: inline-block;
    animation: lockPulse 2s ease-in-out infinite;
}

@keyframes lockPulse {

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

    50% {
        transform: scale(1.05);
        opacity: 0.8;
    }
}

#paywallModal #paywallFeatureTitle {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--text-main);
}

#paywallModal #paywallMessage {
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--text-muted);
    margin-bottom: 30px;
}

#paywallModal .btn-primary {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    border: 2px solid transparent;
    padding: 14px 32px;
    font-size: 1rem;
    font-weight: 600;
    border-radius: var(--radius-capsule);
    color: white;
    transition: all 0.3s ease;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.3);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

#paywallModal .btn-primary:hover {
    background: #fff;
    color: var(--primary);
    border-color: var(--primary);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.25);
}

#paywallModal .btn-primary i {
    transition: transform 0.3s ease;
}

#paywallModal .btn-primary:hover i {
    transform: translateY(-2px);
}

/* DASHBOARD SETTINGS - NEW GRID LAYOUT */
.settings-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: start;
}

.settings-section {
    background: #FFFFFF;
    padding: 40px;
    border-radius: 20px;
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
    height: 100%;
}

/* Settings section headers */
.settings-section h3 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 24px;
    color: var(--text-main);
}

/* Full width inputs in settings */
.settings-section .form-input,
.settings-section .input-with-icon {
    width: 100%;
}

.settings-section .form-group {
    margin-bottom: 20px;
}

/* Make the button span full width */
.settings-form>button {
    grid-column: 1 / -1;
    justify-self: start;
    margin-top: 10px;
    padding: 12px 32px;
}

/* Payment Method Styles */
.payment-card-preview {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    color: white;
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 20px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.3);
}

.payment-card-preview::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1), transparent 70%);
    border-radius: 50%;
}

.card-brand {
    font-size: 1.5rem;
    margin-bottom: 2rem;
    opacity: 0.9;
}

.card-number-hidden {
    font-family: 'Courier New', monospace;
    font-size: 1.25rem;
    letter-spacing: 2px;
    margin-bottom: 1.5rem;
    color: #cbd5e1;
}

.card-meta {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    opacity: 0.7;
}

/* Responsive adjustments */
@media (max-width: 900px) {
    .settings-form {
        grid-template-columns: 1fr;
    }
}

/* Toast Notification */
.toast-notification {
    position: fixed;
    top: 20px;
    right: 20px;
    background: white;
    padding: 16px 24px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    gap: 16px;
    z-index: 10000;
    transform: translateX(120%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-left: 4px solid var(--primary);
    max-width: 400px;
}

.toast-notification.show {
    transform: translateX(0);
}

.toast-notification.success {
    border-left-color: #10B981;
}

.toast-notification.error {
    border-left-color: #EF4444;
}

.toast-notification.info {
    border-left-color: #3B82F6;
}

.toast-icon {
    font-size: 24px;
}

.toast-notification.success .toast-icon {
    color: #10B981;
}

.toast-notification.error .toast-icon {
    color: #EF4444;
}

.toast-notification.info .toast-icon {
    color: #3B82F6;
}

.toast-content {
    flex: 1;
}

.toast-title {
    font-weight: 600;
    margin-bottom: 4px;
    color: var(--text-main);
}

.toast-message {
    font-size: 0.9rem;
    color: var(--text-muted);
}

/* Unified Pricing & FAQ Section Wrapper */
.pricing-faq-wrapper {
    position: relative;
    overflow: hidden;
    background: #0A0A0A;
    padding-bottom: 40px;
    border-radius: 40px;
}

/* Ensure children don't clip effects if they don't need to */
.pricing-section,
.faq-section {
    position: relative;
    z-index: 10;
    background: transparent !important;
    /* Force transparency so wrapper bg shows */
}

/* Dark Mode Text Adaptation for Unified Section */
.pricing-faq-wrapper .section-title h2 {
    color: white;
}

.pricing-faq-wrapper .section-title p {
    color: #9CA3AF;
}

.pricing-faq-wrapper .faq-item h4 {
    color: white;
}

.pricing-faq-wrapper .faq-item p {
    color: #9CA3AF;
}

/* Update Pricing Cards to fit Dark Theme - REVERTED TO WHITE as per request */
.pricing-card {
    background: #FFFFFF;
    /* Reverted to White */
    border: none;
    /* Default border removal if needed or keep standard */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    /* Add shadow for pop */
    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.4s ease;
    /* Smoother transition */
}

/* Smooth Hover Effect for Pricing Cards */
.pricing-card:hover {
    transform: translateY(-8px);
    /* Gentle lift */
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
    /* Soft shadow spread */
    border: none;
    /* Ensure no border flickering */
}

.pricing-card h3 {
    color: #111;
    /* Dark text */
}

.pricing-card .price {
    color: #111;
    /* Dark text */
}

.pricing-card .desc {
    color: #6B7280;
    /* Muted text default */
}

.pricing-features li {
    color: #4B5563;
    /* Dark gray text */
}

.pricing-features li.disabled {
    color: #9CA3AF;
    /* Light gray for disabled */
}

/* Ensure Popular Card stands out properly */
.pricing-card.popular {
    background: #FFFFFF;
    border: 2px solid var(--primary);
    /* Highlight border */
    transform: scale(1.05);
    /* Default scale for popular */
    box-shadow: 0 20px 40px rgba(37, 99, 235, 0.2);
    /* Stronger blue shadow */
}

/* FAQ Item styling for dark mode — скруглённые края */
.faq-item {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 40px;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}

/* FAQ Hover Animation: Lift + Glow (Match "Why Choose EcomVision") */
.faq-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(255, 255, 255, 0.1);
    /* White glow */
    background: rgba(255, 255, 255, 0.05);
    /* Slightly lighter but still transparent */
    border-color: rgba(255, 255, 255, 0.3);
}

/* Toast Notification */
.copy-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 12px 24px;
    border-radius: 9999px;
    font-size: 14px;
    font-weight: 500;
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 9999;
    pointer-events: none;
    display: flex;
    align-items: center;
    gap: 8px;
    backdrop-filter: blur(8px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.copy-toast.show {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

/* CONTACT MODAL STYLES */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(8px);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: all 0.3s ease;
}

.modal-overlay.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.modal-content {
    background: rgba(255, 255, 255, 0.95);
    padding: 40px;
    border-radius: 32px;
    width: 90%;
    max-width: 400px;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.5);
    transform: translateY(20px);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
}

.modal-overlay.active .modal-content {
    transform: translateY(0);
}

.modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    background: none;
    border: none;
    font-size: 1.2rem;
    color: var(--text-muted);
    cursor: pointer;
    transition: color 0.2s;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.modal-close:hover {
    color: var(--primary);
    background: #F3F4F6;
}

.modal-content h3 {
    font-size: 1.8rem;
    margin-bottom: 30px;
    color: var(--text-main);
}

.contact-options-grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.contact-card {
    display: flex;
    align-items: center;
    padding: 16px 20px;
    border-radius: 20px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    text-decoration: none;
    color: var(--text-main);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.02);
}

/* ========================================= */
/* MOBILE SIDEBAR IMPLEMENTATION (DASHBOARD) */
/* ========================================= */
@media (max-width: 968px) {

    /* Hide Sidebar by default on mobile */
    .dashboard-sidebar {
        transform: translateX(-100%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        z-index: 1001;
        /* Above everything */
        width: 280px;
        box-shadow: 5px 0 25px rgba(0, 0, 0, 0.15);
    }

    .dashboard-sidebar.active {
        transform: translateX(0);
    }

    /* Overlay for sidebar */
    .sidebar-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        backdrop-filter: blur(4px);
        z-index: 1000;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease;
    }

    .sidebar-overlay.active {
        opacity: 1;
        pointer-events: auto;
    }

    .dashboard-main {
        margin-left: 0;
        width: 100%;
        padding-top: 80px;
        /* Space for mobile header */
    }

    /* Mobile Header adjustments */
    .dashboard-header {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 900;
        background: rgba(255, 255, 255, 0.9);
        backdrop-filter: blur(10px);
        padding: 15px 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
    }

    .mobile-sidebar-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border-radius: 12px;
        background: var(--bg-page);
        color: var(--text-main);
        font-size: 1.2rem;
        cursor: pointer;
        margin-right: 15px;
    }
}

@media (min-width: 969px) {
    .mobile-sidebar-toggle {
        display: none;
    }
}

.contact-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
}

.contact-card .icon-box {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-right: 16px;
    transition: transform 0.3s ease;
}

.contact-card:hover .icon-box {
    transform: scale(1.1) rotate(5deg);
}

.contact-card span {
    font-weight: 600;
    font-size: 1.1rem;
}

/* Specific Colors */
.contact-card.telegram:hover {
    border-color: rgba(34, 158, 217, 0.2);
}

.contact-card.telegram .icon-box {
    background: rgba(34, 158, 217, 0.1);
    color: #229ED9;
}

/* Slider Section Desktop Padding */
.image-slider-section {
    padding: 100px 0;
}


.contact-card.whatsapp:hover {
    border-color: rgba(37, 211, 102, 0.2);
}

.contact-card.whatsapp .icon-box {
    background: rgba(37, 211, 102, 0.1);
    color: #25D366;
}

.contact-card.email:hover {
    border-color: rgba(234, 67, 53, 0.2);
}

.contact-card.email .icon-box {
    background: rgba(234, 67, 53, 0.1);
    color: #EA4335;
}

/* ========================================= */
/* PROJECT MODAL (обсудить проект / аудит)   */
/* ========================================= */
.project-modal-overlay {
    z-index: 2500;
}

.project-modal-overlay .modal-content.project-modal-content {
    width: 95%;
    max-width: 720px;
    max-height: 90vh;
    overflow-y: auto;
    padding: 0;
    border-radius: 24px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18);
}

.project-modal-content .modal-close {
    top: 16px;
    right: 16px;
    z-index: 5;
}

.project-modal-grid {
    display: grid;
    grid-template-columns: 200px 1fr;
    min-height: 360px;
}

@media (max-width: 640px) {
    .project-modal-grid {
        grid-template-columns: 1fr;
    }

    .modal-sidebar {
        padding: 24px 20px 16px;
        border-bottom: 1px solid #eee;
    }
}

.modal-sidebar {
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
    padding: 32px 24px;
    border-radius: 24px 0 0 24px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

@media (max-width: 640px) {
    .modal-sidebar {
        border-radius: 24px 24px 0 0;
    }
}

.manager-profile {
    text-align: center;
}

.manager-photo {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto 16px;
    border: 3px solid #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.manager-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.manager-desc {
    font-size: 0.9rem;
    line-height: 1.5;
    color: #475569;
    margin: 0;
}

.modal-main-form {
    padding: 28px 32px 32px;
}

.project-modal-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #111;
    margin: 0 0 8px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.project-modal-subtitle {
    font-size: 0.95rem;
    color: #6b7280;
    margin: 0 0 24px 0;
    line-height: 1.4;
}

.emoji-wink {
    font-size: 1.2rem;
}

.project-form .form-section {
    margin-bottom: 22px;
}

.project-form .form-label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 10px;
}

.market-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.market-pill {
    padding: 10px 18px;
    border-radius: 999px;
    border: 1px solid #e5e7eb;
    background: #fff;
    font-size: 0.9rem;
    font-weight: 500;
    color: #374151;
    cursor: pointer;
    transition: all 0.2s ease;
}

.market-pill:hover {
    border-color: #c7d2fe;
    background: #eef2ff;
}

.market-pill.selected {
    border-color: transparent;
    color: #1e3a8a;
}

.market-pill[data-market="ozon"].selected {
    background: #dbeafe;
    color: #1d4ed8;
}

.market-pill[data-market="wildberries"].selected {
    background: #fce7f3;
    color: #be185d;
}

.market-pill[data-market="yandex"].selected {
    background: #fef9c3;
    color: #a16207;
}

.market-pill[data-market="zolotoe"].selected {
    background: #dcfce7;
    color: #15803d;
}

.project-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

@media (max-width: 640px) {
    .project-form-row {
        grid-template-columns: 1fr;
    }
}

.project-form-col {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.project-form .input-field {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    font-size: 0.95rem;
    transition: border-color 0.2s;
    box-sizing: border-box;
}

.project-form .input-field:focus {
    outline: none;
    border-color: #2563eb;
}

.input-textarea {
    min-height: 100px;
    resize: vertical;
}

.upload-section .file-drop-area {
    border: 2px dashed #d1d5db;
    border-radius: 16px;
    padding: 24px;
    text-align: center;
    color: #6b7280;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s;
    background: #f9fafb;
}

.upload-section .file-drop-area:hover {
    border-color: #2563eb;
    background: #eff6ff;
    color: #1d4ed8;
}

.project-form .form-footer {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid #eee;
}

.project-form .consent-check {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
    margin-bottom: 20px;
}

.project-form .consent-check input {
    margin-top: 4px;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.project-form .consent-text {
    font-size: 0.85rem;
    color: #6b7280;
    line-height: 1.5;
}

.project-form .consent-text strong {
    color: #111;
}

.btn-submit-project {
    width: 100%;
    padding: 14px 24px;
    background: #374151;
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-submit-project:hover {
    background: #1f2937;
}

/* Service Modal Styles */
.service-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    padding: 20px;
}

.service-modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.service-modal-content {
    background: white;
    border-radius: 32px;
    width: 100%;
    max-width: 700px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    transform: translateY(30px) scale(0.95);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
}

/* Custom scrollbar for service modal - premium styling */
.service-modal-content::-webkit-scrollbar {
    width: 8px;
}

.service-modal-content::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 8px;
}

.service-modal-content::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 8px;
    transition: background 0.3s ease;
}

.service-modal-content:hover::-webkit-scrollbar-thumb {
    background: rgba(37, 99, 235, 0.3);
}

.service-modal-content::-webkit-scrollbar-thumb:hover {
    background: rgba(37, 99, 235, 0.5);
}

/* Show scrollbar on hover for Firefox */
.service-modal-content:hover {
    scrollbar-color: rgba(37, 99, 235, 0.3) transparent;
}

.service-modal-overlay.active .service-modal-content {
    transform: translateY(0) scale(1);
}

.service-modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    background: #F3F4F6;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1.2rem;
    color: var(--text-muted);
    transition: all 0.2s;
    z-index: 10;
}

.service-modal-close:hover {
    background: var(--primary);
    color: white;
    transform: rotate(90deg);
}

.service-modal-header {
    padding: 40px 40px 20px;
    border-bottom: 1px solid #E5E7EB;
}

.service-modal-header h2 {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-main);
    margin: 0;
}

.service-modal-body {
    padding: 30px 40px 40px;
}

.service-modal-description {
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--text-muted);
    margin-bottom: 30px;
}

.service-modal-features h3 {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--text-main);
    margin-bottom: 20px;
}

.service-modal-features ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.service-modal-features li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 0;
    font-size: 1rem;
    color: var(--text-main);
    line-height: 1.6;
}

.service-modal-features li i {
    color: #10B981;
    font-size: 1.1rem;
    margin-top: 3px;
    flex-shrink: 0;
}

.service-modal-pricing {
    margin-top: 35px;
    padding: 25px;
    background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%);
    border-radius: 20px;
    border: 1px solid rgba(37, 99, 235, 0.1);
}

.service-price-main {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 12px;
}

.service-price-label {
    font-size: 1rem;
    color: var(--text-muted);
    font-weight: 500;
}

.service-price-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--primary);
}

.service-price-details {
    font-size: 0.95rem;
    color: var(--text-muted);
    line-height: 1.6;
    margin: 0;
}

.service-modal-actions {
    margin-top: 30px;
    display: flex;
    gap: 15px;
}

.btn-service-contact {
    flex: 1;
    padding: 16px 32px;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 16px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.btn-service-contact:hover {
    background: var(--primary-dark);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2);
}

@media (max-width: 768px) {
    .service-modal-content {
        max-width: 100%;
        border-radius: 24px;
        max-height: 95vh;
    }

    .service-modal-header,
    .service-modal-body {
        padding: 25px 20px;
    }

    .service-modal-header h2 {
        font-size: 1.5rem;
    }

    .service-price-value {
        font-size: 1.5rem;
    }

    .service-modal-actions {
        flex-direction: column;
    }
}

/* Mobile Menu Improvements */
@media (max-width: 768px) {
    .hamburger-btn {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 48px;
        height: 48px;
        border-radius: 10px;
        background: transparent;
        position: relative;
        z-index: 1002;
    }

    .mobile-menu-overlay {
        z-index: 1001;
    }

    /* Fix image scaling on mobile (не трогаем логотипы маркетплейсов — у них свои стили) */
    img:not(.marketplace-logos-image) {
        max-width: 100%;
        height: auto;
        object-fit: contain;
    }

    /* Prevent text overflow */
    h1,
    h2,
    h3 {
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    /* Fix font rendering on mobile */
    body {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-rendering: optimizeLegibility;
    }

    /* Ensure logo text is visible on mobile */
    .logo-text {
        display: block !important;
        font-size: 1rem;
        margin-left: 8px;
    }
}

/* ========================================= */
/* SOLAR SYSTEM ORBIT ANIMATIONS - FIXED */
/* ========================================= */

.solar-system {
    position: relative;
    width: 100%;
    max-width: 1400px;
    height: 600px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.solar-center-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    background: #000;
    color: white;
    border-radius: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

.orbit-object-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
}

/* Страница Услуги: контейнеры орбит = размер кольца, иконки строго на осях */
.solar-system .orbit-object-container {
    width: auto;
    height: auto;
}

.solar-system .orbit-con-1 {
    width: 200px;
    height: 200px;
}

.solar-system .orbit-con-2 {
    width: 300px;
    height: 300px;
}

.solar-system .orbit-con-3 {
    width: 400px;
    height: 400px;
}

.solar-system .orbit-con-4 {
    width: 500px;
    height: 500px;
}

.orbit-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 50%;
    pointer-events: none;
}

.ring-1 {
    width: 200px;
    height: 200px;
}

.ring-2 {
    width: 300px;
    height: 300px;
}

.ring-3 {
    width: 400px;
    height: 400px;
}

.ring-4 {
    width: 500px;
    height: 500px;
}

.orbit-object {
    position: absolute;
    width: 60px;
    height: 60px;
    background: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    border: 2px solid rgba(0, 0, 0, 0.05);
    z-index: 5;
}

.orbit-object i {
    font-size: 1.5rem;
    color: #2563DD;
}

.orbit-object.text-brand-blue i {
    color: #2563DD;
}

.orbit-object.text-green-500 i {
    color: #10B981;
}

.obj-2b {
    width: 40px;
    height: 40px;
    background: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    border: 2px solid rgba(0, 0, 0, 0.05);
    z-index: 5;
}

.obj-2b i {
    font-size: 0.875rem;
    color: #EF4444;
}

/* Orbit 1 - Clockwise rotation */
.orbit-con-1 {
    animation: orbit-rotate-cw 20s linear infinite;
}

.orbit-con-1 .orbit-ring {
    animation: orbit-rotate-cw 20s linear infinite;
}

.orbit-con-1 .orbit-object,
.orbit-con-1 .obj-1 {
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
}

.orbit-con-1 .orbit-object i {
    animation: orbit-counter-rotate-cw 20s linear infinite;
}

/* Orbit 2 - Counter-clockwise rotation */
.orbit-con-2 {
    animation: orbit-rotate-ccw 30s linear infinite;
}

.orbit-con-2 .orbit-ring {
    animation: orbit-rotate-ccw 30s linear infinite;
}

.orbit-con-2 .obj-2 {
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
}

.orbit-con-2 .obj-2 i {
    animation: orbit-counter-rotate-ccw 30s linear infinite;
}

.orbit-con-2 .obj-2b {
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 50%);
}

.orbit-con-2 .obj-2b i {
    animation: orbit-counter-rotate-ccw 30s linear infinite;
}

/* Orbit 3 - Clockwise rotation */
.orbit-con-3 {
    animation: orbit-rotate-cw 40s linear infinite;
}

.orbit-con-3 .orbit-ring {
    animation: orbit-rotate-cw 40s linear infinite;
}

.orbit-con-3 .orbit-object,
.orbit-con-3 .obj-3 {
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
}

.orbit-con-3 .orbit-object i {
    animation: orbit-counter-rotate-cw 40s linear infinite;
}

/* Orbit 4 - Counter-clockwise rotation */
.orbit-con-4 {
    animation: orbit-rotate-ccw 50s linear infinite;
}

.orbit-con-4 .orbit-ring {
    animation: orbit-rotate-ccw 50s linear infinite;
}

.orbit-con-4 .orbit-object,
.orbit-con-4 .obj-4 {
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
}

.orbit-con-4 .orbit-object i {
    animation: orbit-counter-rotate-ccw 50s linear infinite;
}

/* Animation keyframes */
@keyframes orbit-rotate-cw {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

@keyframes orbit-rotate-ccw {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    to {
        transform: translate(-50%, -50%) rotate(-360deg);
    }
}

@keyframes orbit-counter-rotate-cw {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(-360deg);
    }
}

@keyframes orbit-counter-rotate-ccw {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* Utility classes for rotation */
.anim-rotate-cw {
    animation: orbit-rotate-cw 20s linear infinite;
}

.anim-rotate-ccw {
    animation: orbit-rotate-ccw 30s linear infinite;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .solar-system {
        height: 400px;
    }

    .ring-1 {
        width: 150px;
        height: 150px;
    }

    .ring-2 {
        width: 220px;
        height: 220px;
    }

    .ring-3 {
        width: 300px;
        height: 300px;
    }

    .ring-4 {
        width: 380px;
        height: 380px;
    }

    /* Услуги: контейнеры орбит = размер кольца на мобильных */
    .solar-system .orbit-con-1 {
        width: 150px;
        height: 150px;
    }

    .solar-system .orbit-con-2 {
        width: 220px;
        height: 220px;
    }

    .solar-system .orbit-con-3 {
        width: 300px;
        height: 300px;
    }

    .solar-system .orbit-con-4 {
        width: 380px;
        height: 380px;
    }

    .orbit-object {
        width: 50px;
        height: 50px;
    }

    .orbit-object i {
        font-size: 1.2rem;
    }
}

/* Desktop Expansion — только для главной (.orbit-system), не для Услуг (.solar-system) */
@media (min-width: 769px) {

    .orbit-system .solar-center-logo,
    .solar-system .solar-center-logo {
        z-index: 20;
    }

    .orbit-system .ring-1 {
        width: 800px;
        height: 800px;
    }

    .orbit-system .ring-2 {
        width: 1100px;
        height: 1100px;
    }

    .orbit-system .ring-3 {
        width: 1400px;
        height: 1400px;
    }

    .orbit-system .ring-4 {
        width: 1700px;
        height: 1700px;
    }

    .orbit-system .orbit-con-1 {
        animation-duration: 40s;
    }

    .orbit-system .orbit-con-2 {
        animation-duration: 50s;
    }

    .orbit-system .orbit-con-3 {
        animation-duration: 60s;
    }

    .orbit-system .orbit-con-4 {
        animation-duration: 70s;
    }
}

/* ========================================= */
/* INTERACTIVE ICONS (Custom CSS Animations) */
/* ========================================= */

/* Единый стиль иконок: тёмный контейнер + цветное свечение от верхнего левого угла */
.icon-wrapper-anim {
    width: 80px;
    height: 80px;
    margin: 0 auto 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    border-radius: 20px;
    background: rgba(18, 18, 24, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.08);
    backface-visibility: hidden;
    transition: transform 0.35s var(--ease-out-smooth), background 0.4s var(--ease-smooth), border-color 0.4s var(--ease-smooth), box-shadow 0.4s var(--ease-smooth);
}

/* Без цветного свечения на фоне — только лёгкая тень */
.process-steps .step-card:nth-child(1) .icon-wrapper-anim,
.process-steps .step-card:nth-child(2) .icon-wrapper-anim,
.process-steps .step-card:nth-child(3) .icon-wrapper-anim {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

/* ========================================= */
/* TELEGRAM PROMO BLOCK V4 - Compact & Refined */
/* ========================================= */

/* ========================================= */
/* TELEGRAM MINIMAL BLOCK */
/* ========================================= */

.tg-block-minimal {
    background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%);
    border-radius: 16px;
    position: relative;
    overflow: visible;
    padding: 18px 24px;
    display: flex;
    gap: 20px;
    box-shadow: 
        0 4px 24px rgba(0, 0, 0, 0.12),
        0 1px 2px rgba(0, 0, 0, 0.08);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(255, 255, 255, 0.08);
    min-height: auto;
}

.tg-minimal-glow {
    position: absolute;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    pointer-events: none;
    opacity: 0.6;
}

.tg-minimal-glow:first-child {
    top: -100px;
    right: -100px;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.25) 0%, transparent 70%);
    animation: glow-pulse 4s ease-in-out infinite;
}

.tg-minimal-glow--bottom {
    bottom: -120px;
    left: -80px;
    background: radial-gradient(circle, rgba(139, 92, 246, 0.2) 0%, transparent 70%);
    animation: glow-pulse 4s ease-in-out infinite 2s;
}

/* glow-pulse: duplicate removed — see line 92 */

.tg-block-minimal::before {
    content: '';
    position: absolute;
    inset: 0;
    background: 
        radial-gradient(circle at 20% 80%, rgba(59, 130, 246, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(139, 92, 246, 0.06) 0%, transparent 50%);
    pointer-events: none;
}

.tg-block-minimal:hover {
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.18),
        0 2px 4px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, 0.12);
}

.tg-minimal-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 12px;
    flex: 1;
    min-height: 160px;
    max-width: 52%;
}

.tg-minimal-header {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.tg-minimal-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #2AABEE;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    transition: all 0.3s ease;
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 6px 16px rgba(42, 171, 238, 0.35);
}

.tg-minimal-icon:hover {
    background: #35B3F1;
    transform: scale(1.05);
    border-color: rgba(255, 255, 255, 0.3);
}

.tg-minimal-icon i {
    color: #FFFFFF;
    font-size: 15px;
    line-height: 1;
}

.tg-minimal-label {
    font-size: 17px;
    font-weight: 600;
    color: #CBD5E1;
    text-transform: none;
    letter-spacing: -0.01em;
}

.tg-minimal-tag {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.8);
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.16);
}

.tg-minimal-title {
    font-size: 20px;
    font-weight: 600;
    color: #FFFFFF;
    line-height: 1.25;
    letter-spacing: -0.02em;
    margin: 0;
}

.tg-minimal-badges {
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
}

.tg-minimal-badge {
    font-size: 11.5px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.8);
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.tg-minimal-badge i {
    font-size: 12px;
    color: rgba(147, 197, 253, 0.9);
}

.tg-minimal-visual {
    position: relative;
    flex: 1;
    min-height: 180px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    pointer-events: none;
    overflow: visible;
}

.tg-chat {
    width: min(320px, 95%);
    background: rgba(15, 23, 42, 0.92);
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.4);
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: -50px;
    margin-bottom: -35px;
    transform: translateX(30px);
}

.tg-chat-top {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px 14px 0 0;
}

.tg-chat-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    transition: transform 0.2s ease;
}

.tg-chat-dot:nth-child(1) { background: #FF5F57; }
.tg-chat-dot:nth-child(2) { background: #FFBD2E; }
.tg-chat-dot:nth-child(3) { background: #28CA42; }

.tg-chat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12.5px;
    color: rgba(255, 255, 255, 0.9);
    padding: 10px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.tg-chat-status {
    color: #38BDF8;
    font-weight: 600;
}

.tg-chat-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    flex: 1;
}

.tg-chat-msg {
    padding: 7px 10px;
    border-radius: 10px;
    font-size: 11.5px;
    line-height: 1.35;
    opacity: 0;
    transform: translateY(6px);
    animation: tg-chat-cycle 12s linear infinite;
}

.tg-chat-msg--client {
    align-self: flex-start;
    background: rgba(148, 163, 184, 0.2);
    color: rgba(255, 255, 255, 0.85);
}

.tg-chat-msg--manager {
    align-self: flex-end;
    background: rgba(56, 189, 248, 0.2);
    color: rgba(255, 255, 255, 0.9);
}

.tg-chat-msg:nth-child(1) { animation-delay: 0s; }
.tg-chat-msg:nth-child(2) { animation-delay: 2s; }
.tg-chat-msg:nth-child(3) { animation-delay: 4s; }
.tg-chat-msg:nth-child(4) { animation-delay: 6s; }
.tg-chat-msg:nth-child(5) { animation-delay: 8s; }
.tg-chat-msg:nth-child(6) { animation-delay: 10s; }

.tg-chat-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 10px 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.tg-chat-pill {
    font-size: 10.5px;
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.75);
}

@keyframes tg-chat-cycle {
    0% { opacity: 0; transform: translateY(6px); }
    8% { opacity: 1; transform: translateY(0); }
    30% { opacity: 1; }
    40% { opacity: 0; transform: translateY(-4px); }
    100% { opacity: 0; transform: translateY(-4px); }
}

.tg-minimal-desc {
    font-size: 13px;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.68);
    margin: 0;
    max-width: 520px;
}

/* Features removed from layout */

.tg-minimal-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: linear-gradient(135deg, #2AABEE 0%, #38BDF8 100%);
    color: #FFFFFF;
    padding: 10px 20px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 13px;
    text-decoration: none;
    width: fit-content;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 
        0 6px 16px rgba(42, 171, 238, 0.35),
        0 0 0 1px rgba(255, 255, 255, 0.12);
    margin-top: 8px;
}

.tg-minimal-btn:hover {
    background: linear-gradient(135deg, #35B3F1 0%, #4DC5FF 100%);
    transform: translateY(-2px);
    box-shadow: 
        0 8px 20px rgba(42, 171, 238, 0.4),
        0 0 0 1px rgba(255, 255, 255, 0.2);
}

.tg-minimal-kicker {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    color: rgba(255, 255, 255, 0.72);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.tg-minimal-kicker span {
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.tg-minimal-btn svg {
    transition: transform 0.3s ease;
}

.tg-minimal-btn:hover svg {
    transform: translateX(3px);
}

/* Stats removed from layout */

@media (max-width: 768px) {
    .tg-block-minimal {
        padding: 16px;
        flex-direction: column-reverse;
        gap: 16px;
    }
    
    .tg-minimal-content {
        min-height: 0;
        max-width: 100%;
    }

    .tg-minimal-title {
        font-size: 19px;
    }

    .tg-minimal-badges {
        gap: 6px;
    }

    .tg-minimal-badge {
        font-size: 11px;
        padding: 5px 8px;
    }

    .tg-minimal-visual {
        display: flex;
        width: 100%;
        justify-content: center;
        align-items: center;
        min-height: 210px;
        margin-top: 0;
        margin-bottom: 8px;
    }

    .tg-minimal-badges {
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    .tg-minimal-desc {
        font-size: 12px;
    }

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

    .tg-chat {
        width: min(320px, 100%);
        margin: 0;
        transform: none;
    }

    .tg-chat-body {
        padding: 10px;
    }

    .tg-chat-msg {
        font-size: 10.5px;
    }

    .tg-chat-footer {
        padding: 8px 10px;
    }
}

/* Old tg-v4 styles removed - replaced with tg-block-minimal */

/* ========================================= */
/* TELEGRAM + BIDDER DUO LAYOUT */
/* ========================================= */

.promo-duo {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 20px;
    align-items: stretch;
}

.promo-duo__item {
    display: flex;
}

.promo-duo__item > * {
    width: 100%;
}

@media (max-width: 1024px) {
    .promo-duo {
        grid-template-columns: 1fr;
    }
}

/* ========================================= */
/* BIDDER PROMO BLOCK */
/* ========================================= */

.bidder-promo {
    background: linear-gradient(135deg, #1F2937 0%, #374151 100%);
    border-radius: 16px;
    padding: 12px 16px 14px;
    color: white;
    position: relative;
    overflow: visible;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.24),
        0 1px 2px rgba(0, 0, 0, 0.08);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.bidder-promo:hover {
    box-shadow:
        0 12px 48px rgba(0, 0, 0, 0.32),
        0 2px 4px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
}

.bidder-promo::before {
    content: '';
    position: absolute;
    width: 250px;
    height: 250px;
    right: -80px;
    top: -80px;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.2) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.bidder-promo__content {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px 12px 6px;
    text-align: left;
    align-items: flex-start;
}

.bidder-promo__header {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.bidder-pill {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    padding: 5px 12px;
    border-radius: 100px;
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: 0.2px;
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
    color: rgba(255, 255, 255, 0.9);
}

.bidder-pill:hover {
    background: rgba(255, 255, 255, 0.15);
}

.bidder-pill--light {
    background: rgba(59, 130, 246, 0.15);
    border-color: rgba(59, 130, 246, 0.3);
    color: #93C5FD;
}

.bidder-promo__title {
    font-size: 16px;
    margin: 0;
    font-weight: 500;
    line-height: 1.35;
    letter-spacing: -0.01em;
    color: #FFFFFF;
}

.bidder-promo__desc {
    margin: 0;
    font-size: 12.5px;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.5;
    font-weight: 400;
    width: 100%;
}

.bidder-browser {
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 
        0 8px 24px rgba(0, 0, 0, 0.12),
        0 2px 4px rgba(0, 0, 0, 0.08);
    position: relative;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    width: 95%;
    margin: -20px auto 0;
    transform: scale(1.05);
}

.bidder-browser--large {
    width: 95%;
    transform: scale(1.05);
}

.bidder-browser:hover {
    box-shadow: 
        0 12px 32px rgba(0, 0, 0, 0.16),
        0 4px 8px rgba(0, 0, 0, 0.12);
    transform: translateY(-3px) scale(1.07);
}

.bidder-browser--large:hover {
    transform: translateY(-3px) scale(1.07);
}

.bidder-browser__top {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 10px 14px;
    background: #FAFBFC;
    border-bottom: 1px solid #E5E7EB;
    font-size: 11px;
    color: #6B7280;
    border-radius: 12px 12px 0 0;
}

.browser-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #D1D5DB;
    transition: all 0.2s ease;
    cursor: pointer;
}

.browser-dot:hover {
    transform: scale(1.2);
}

.browser-dot:nth-child(1) { background: #FF5F57; }
.browser-dot:nth-child(1):hover { background: #FF4D44; }
.browser-dot:nth-child(2) { background: #FFBD2E; }
.browser-dot:nth-child(2):hover { background: #FFB015; }
.browser-dot:nth-child(3) { background: #28CA42; }
.browser-dot:nth-child(3):hover { background: #1FB735; }

.browser-url {
    margin-left: 8px;
    font-weight: 500;
    color: #64748B;
    font-size: 11px;
}

.browser-badge {
    margin-left: auto;
    font-size: 10px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 100px;
    background: #DCFCE7;
    color: #16A34A;
    border: none;
    display: flex;
    align-items: center;
    gap: 4px;
}

.browser-badge::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #22C55E;
    animation: pulse-dot 2s ease-in-out infinite;
}

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

.bidder-browser__body {
    display: grid;
    gap: 10px;
    padding: 14px 16px 16px;
    color: #0F172A;
}

.bidder-row {
    display: grid;
    grid-template-columns: 55px 1fr auto;
    gap: 10px;
    align-items: center;
    font-size: 11.5px;
}

.bidder-row--keywords {
    grid-template-columns: 55px 1fr;
}

.bidder-row--chart {
    grid-template-columns: 55px 1fr;
}

.bidder-label {
    color: #6B7280;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 10px;
}

.bidder-slider {
    position: relative;
    height: 7px;
    border-radius: 999px;
    background: #E2E8F0;
    overflow: visible;
}

.bidder-slider__track {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #93C5FD, #22C55E);
    opacity: 0.6;
    border-radius: inherit;
}

.bidder-slider__knob {
    position: absolute;
    top: 50%;
    left: 20%;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    background: white;
    box-shadow: 
        0 2px 8px rgba(59, 130, 246, 0.4),
        0 0 0 2px rgba(59, 130, 246, 0.2);
    animation: bidder-slider-move 3s ease-in-out infinite;
    cursor: grab;
    transition: all 0.2s ease;
    z-index: 2;
}

.bidder-slider__knob:hover {
    transform: translate(-50%, -50%) scale(1.1);
    box-shadow: 
        0 4px 12px rgba(59, 130, 246, 0.5),
        0 0 0 4px rgba(59, 130, 246, 0.3);
}

@keyframes bidder-slider-move {
    0%, 100% { 
        left: 20%;
    }
    50% { 
        left: 72%;
    }
}

.bidder-value {
    font-weight: 700;
    color: #3B82F6;
    font-size: 13px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui;
}

.bidder-keywords {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.bidder-keywords span {
    padding: 5px 10px;
    border-radius: 100px;
    background: #F3F4F6;
    border: 1px solid #E5E7EB;
    font-size: 10.5px;
    font-weight: 500;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    animation: bidder-chip-pulse 3s ease-in-out infinite;
}

.bidder-keywords span:hover {
    background: #3B82F6;
    color: white;
    border-color: #3B82F6;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.bidder-keywords span:nth-child(2) { animation-delay: 0.5s; }
.bidder-keywords span:nth-child(3) { animation-delay: 1s; }
.bidder-keywords span:nth-child(4) { animation-delay: 1.5s; }

@keyframes bidder-chip-pulse {
    0%, 100% { 
        transform: translateY(0) scale(1);
        opacity: 1;
    }
    50% { 
        transform: translateY(-1px) scale(1.02);
        opacity: 0.95;
    }
}

.bidder-chart {
    position: relative;
    background: linear-gradient(135deg, #F9FAFB 0%, #F3F4F6 100%);
    border-radius: 8px;
    padding: 0;
    border: 1px solid #E5E7EB;
    height: 52px;
    overflow: visible;
}

.bidder-chart svg {
    height: 100%;
    width: 100%;
    display: block;
}

.bidder-chart__line {
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    animation: bidder-line-draw 3.2s ease-in-out infinite;
    filter: drop-shadow(0 2px 4px rgba(34, 197, 94, 0.2));
}

@keyframes bidder-line-draw {
    0% { 
        stroke-dashoffset: 100;
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    50% { 
        stroke-dashoffset: 0;
    }
    100% { 
        stroke-dashoffset: 0;
    }
}

.bidder-chart__badge {
    position: absolute;
    top: -10px;
    right: 12px;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 100px;
    background: white;
    color: #16A34A;
    border: none;
    box-shadow: 
        0 4px 12px rgba(22, 163, 74, 0.2),
        0 1px 2px rgba(0, 0, 0, 0.08);
    animation: badge-float 2s ease-in-out infinite;
    z-index: 10;
}

@keyframes badge-float {
    0%, 100% { 
        transform: translateY(0);
    }
    50% { 
        transform: translateY(-3px);
    }
}

.bidder-promo__cta {
    display: none;
}

.bidder-promo__cta:hover {
    transform: translateY(-1px);
    background: rgba(255, 255, 255, 0.2);
}

.bidder-promo__cta svg {
    width: 16px;
    height: 16px;
}

@media (max-width: 768px) {
    .bidder-promo {
        padding: 16px 14px;
    }

    .bidder-promo__title {
        font-size: 16px;
    }

    .bidder-promo__desc {
        font-size: 12px;
    }

    .bidder-browser {
        width: 92%;
        max-width: 92%;
        margin: -20px auto 0;
        transform: scale(1.08);
    }

    .bidder-browser--large {
        width: 92%;
        transform: scale(1.08);
    }

    .bidder-browser:hover {
        transform: translateY(-2px) scale(1.1);
    }

    .bidder-browser__body {
        padding: 12px 14px;
        gap: 9px;
    }

    .bidder-row {
        grid-template-columns: 56px 1fr auto;
    }
}

@media (max-width: 480px) {
    .bidder-promo__title {
        font-size: 17px;
    }

    .bidder-promo__desc {
        font-size: 13.5px;
    }

    .bidder-browser {
        width: 92%;
        transform: scale(1);
    }

    .bidder-browser--large {
        width: 92%;
        transform: scale(1);
    }

    .bidder-browser:hover {
        transform: translateY(-2px) scale(1.02);
    }

    .bidder-browser__body {
        gap: 10px;
        padding: 12px 14px;
    }

    .bidder-row {
        grid-template-columns: 54px 1fr auto;
        gap: 10px;
    }

    .bidder-row--keywords {
        grid-template-columns: 54px 1fr;
    }

    .bidder-row--chart {
        grid-template-columns: 54px 1fr;
    }

    .bidder-chart {
        height: 46px;
        padding: 6px 8px;
    }

    .bidder-chart svg {
        height: 32px;
    }
}

/* Hide old versions */
.telegram-promo-block,
.telegram-promo-block-v2,
.tg-block-v3 {
    display: none;
}

/* Shine animation kept for potential reuse */


.step-card:hover .icon-wrapper-anim {
    border-color: rgba(255, 255, 255, 0.15);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
}

/* 1. Dashboard Icon Animation */
.dashboard-icon-anim {
    width: 44px;
    height: 44px;
    background: #3B82F6;
    border-radius: 6px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(59, 130, 246, 0.4);
}

.dash-sidebar {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 10px;
    background: rgba(0, 0, 0, 0.2);
}

.dash-header {
    position: absolute;
    top: 5px;
    left: 14px;
    right: 5px;
    height: 6px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 2px;
}

.dash-row {
    position: absolute;
    left: 14px;
    right: 5px;
    height: 4px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
}

.dash-row.r1 {
    top: 16px;
    width: 60%;
    animation: dash-pulse 2s infinite;
}

.dash-row.r2 {
    top: 24px;
    width: 80%;
    animation: dash-pulse 2s infinite 0.5s;
}

.dash-row.r3 {
    top: 32px;
    width: 50%;
    animation: dash-pulse 2s infinite 1s;
}

.dash-float-item {
    position: absolute;
    width: 12px;
    height: 12px;
    background: #ffffff;
    border-radius: 3px;
    bottom: 5px;
    right: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    animation: dash-float 3s infinite ease-in-out;
}

@keyframes dash-pulse {

    0%,
    100% {
        opacity: 0.5;
        width: 60%;
    }

    50% {
        opacity: 1;
        width: 80%;
    }
}

@keyframes dash-float {

    0%,
    100% {
        transform: translateY(0) translateZ(0);
    }

    50% {
        transform: translateY(-4px) translateZ(0);
    }
}


/* 2. Table Icon Animation (Was Graph) */
.table-icon-anim {
    width: 44px;
    height: 44px;
    background: #10B981;
    border-radius: 6px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px;
    gap: 4px;
    box-shadow: 0 4px 10px rgba(16, 185, 129, 0.4);
    overflow: hidden;
    animation: table-icon-float 4s cubic-bezier(0.45, 0, 0.55, 1) infinite;
    transform: translateZ(0);
    backface-visibility: hidden;
    will-change: transform;
}

.table-icon-header {
    width: 100%;
    height: 6px;
    background: rgba(255, 255, 255, 0.4);
    border-radius: 2px;
}

.table-icon-row {
    height: 4px;
    background: #ffffff;
    border-radius: 2px;
    transform-origin: left center;
    will-change: transform, opacity;
    animation-timing-function: ease-in-out;
}

.table-icon-row.tr1 {
    width: 70%;
    animation: table-pulse 2s infinite;
}

.table-icon-row.tr2 {
    width: 90%;
    animation: table-pulse 2.5s infinite 0.2s;
}

.table-icon-row.tr3 {
    width: 60%;
    animation: table-pulse 2.2s infinite 0.4s;
}

.table-icon-row.tr4 {
    width: 80%;
    animation: table-pulse 2.8s infinite 0.6s;
}

@keyframes table-pulse {

    0%,
    100% {
        opacity: 0.7;
        transform: scaleX(0.95) translateZ(0);
    }

    50% {
        opacity: 1;
        transform: scaleX(1) translateZ(0);
    }
}

@keyframes table-icon-float {
    0%,
    100% {
        transform: translate3d(0, 0, 0);
    }

    50% {
        transform: translate3d(0, -2px, 0);
    }
}

/* 3. AI Brain Animation (Styled like Dashboard) */
.ai-icon-anim {
    width: 44px;
    height: 44px;
    background: #8B5CF6;
    border-radius: 6px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(139, 92, 246, 0.4);
    overflow: hidden;
}

.ai-core {
    font-size: 20px;
    color: #ffffff;
    z-index: 2;
    animation: ai-pulse 2s infinite ease-in-out;
}

.ai-ring {
    position: absolute;
    width: 100%;
    height: 100%;
    border: 1px dashed rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    animation: spin-slow 10s linear infinite;
    transform: scale(0.8);
}

.ai-node {
    position: absolute;
    width: 6px;
    height: 6px;
    background: #ffffff;
    /* White nodes */
    border-radius: 50%;
    box-shadow: 0 0 5px rgba(255, 255, 255, 0.8);
}

.ai-node.n1 {
    top: 0;
    left: 50%;
    transform: translateX(-50%) translateZ(0);
    animation: node-float 3s var(--ease-in-out-smooth) infinite;
}

.ai-node.n2 {
    bottom: 5px;
    left: 5px;
    animation: node-float 3s var(--ease-in-out-smooth) infinite 1s;
}

.ai-node.n3 {
    bottom: 5px;
    right: 5px;
    animation: node-float 3s var(--ease-in-out-smooth) infinite 2s;
}

@keyframes ai-pulse {

    0%,
    100% {
        transform: scale(1);
        text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
    }

    50% {
        transform: scale(1.15);
        text-shadow: 0 0 20px rgba(255, 255, 255, 0.8);
    }
}

@keyframes spin-slow {
    to {
        transform: rotate(360deg);
    }
}

@keyframes node-float {

    0%,
    100% {
        transform: translate(0, 0) scale(1) translateZ(0);
        opacity: 0.8;
    }

    50% {
        transform: translate(3px, -3px) scale(1.2) translateZ(0);
        opacity: 1;
    }
}

/* =========================================
   APPLE STYLE ICONS (Steps Section) — единый стиль: тёмный контейнер + свечение сверху-слева
   ========================================= */
.apple-icon-wrapper {
    width: 80px;
    height: 80px;
    border-radius: 30px;
    -webkit-mask-image: -webkit-radial-gradient(white, black);
    mask-image: radial-gradient(white, black);
    position: relative;
    margin-bottom: 24px;
    overflow: hidden;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.apple-icon-wrapper:hover {
    transform: translateY(-8px) scale(1.1) rotate(3deg);
}

.icon-base {
    position: absolute;
    inset: 0;
    border-radius: 30px;
    z-index: 1;
    background: rgba(18, 18, 24, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.icon-glass-shine {
    position: absolute;
    inset: 0;
    border-radius: 30px;
    background: linear-gradient(165deg, rgba(255, 255, 255, 0.12) 0%, transparent 50%);
    z-index: 2;
    pointer-events: none;
}

/* Свечение от верхнего левого угла — цвет по типу иконки */
.icon-glow {
    position: absolute;
    left: -20%;
    top: -20%;
    width: 70%;
    height: 70%;
    border-radius: 50%;
    filter: blur(22px);
    opacity: 0.7;
    z-index: 0;
    transition: opacity 0.3s;
}

.icon-blue .icon-glow {
    background: radial-gradient(circle, rgba(59, 130, 246, 0.9) 0%, transparent 70%);
}

.apple-icon-wrapper.icon-blue {
    box-shadow: 0 15px 35px -5px rgba(59, 130, 246, 0.5);
}

.apple-icon-wrapper.icon-blue:hover {
    box-shadow: 0 25px 50px -5px rgba(59, 130, 246, 0.7);
}

.icon-purple .icon-glow {
    background: radial-gradient(circle, rgba(139, 92, 246, 0.9) 0%, transparent 70%);
}

.apple-icon-wrapper.icon-purple {
    box-shadow: 0 15px 35px -5px rgba(139, 92, 246, 0.5);
}

.apple-icon-wrapper.icon-purple:hover {
    box-shadow: 0 25px 50px -5px rgba(139, 92, 246, 0.7);
}

.icon-orange .icon-glow {
    background: radial-gradient(circle, rgba(249, 115, 22, 0.9) 0%, transparent 70%);
}

.apple-icon-wrapper.icon-orange {
    box-shadow: 0 15px 35px -5px rgba(249, 115, 22, 0.5);
}

.apple-icon-wrapper.icon-orange:hover {
    box-shadow: 0 25px 50px -5px rgba(249, 115, 22, 0.7);
}

.apple-icon-wrapper:hover .icon-glow {
    opacity: 1;
    transform: scale(1.2);
}

.icon-symbol {
    position: relative;
    z-index: 10;
    font-size: 32px;
    color: rgba(255, 255, 255, 0.95);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}


/* HERO BACKGROUND GLOWS */
.hero-bg-glow {
    position: absolute;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    filter: blur(80px);
    z-index: 0;
    /* Behind transparent panels */
    opacity: 0.5;
    pointer-events: none;
    animation: glow-pulse 6s ease-in-out infinite;
}

.hero-glow-left {
    top: 30%;
    left: -20%;
    background: radial-gradient(circle, rgba(139, 92, 246, 0.6) 0%, rgba(139, 92, 246, 0) 70%);
    /* Purple/Blue */
}

.hero-glow-right {
    bottom: 10%;
    right: -20%;
    background: radial-gradient(circle, rgba(16, 185, 129, 0.5) 0%, rgba(16, 185, 129, 0) 70%);
    /* Green/Teal */
}

/* glow-pulse: duplicate removed — see line 92 */

/* GLOBAL OVERFLOW FIX */
body,
html {
    overflow-x: hidden;
    width: 100%;
}

/* FAILSAFE MOBILE FIXES */
@media (max-width: 768px) {
    .hamburger-btn {
        display: flex !important;
        position: relative !important;
        z-index: 999999 !important;
        pointer-events: auto !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
}

/* ========================================= */
/* FOOTER MARQUEE — Белый фон, тёмный текст */
/* ========================================= */
.footer-marquee-section {
    position: relative;
    padding: 60px 0 80px;
    background: transparent;
    overflow: hidden;
}

.marquee-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.marquee-track {
    display: flex;
    gap: 50px;
    align-items: center;
    animation: marquee-scroll 35s linear infinite;
    width: max-content;
    padding: 20px 0;
}

.marquee-item {
    font-size: clamp(2rem, 5vw, 4rem);
    font-weight: 800;
    color: rgba(0, 0, 0, 0.08);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
    transition: color 0.3s ease;
}

.marquee-separator {
    font-size: clamp(1rem, 2vw, 1.5rem);
    color: rgba(99, 102, 241, 0.3);
    align-self: center;
}

@keyframes marquee-scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

/* Marquee responsive */
@media (max-width: 768px) {
    .footer-marquee-section {
        padding: 40px 0 60px;
    }

    .marquee-track {
        gap: 25px;
        padding: 15px 0;
    }

    .marquee-item {
        font-size: 1.5rem;
        letter-spacing: 0.02em;
    }

    .marquee-separator {
        font-size: 0.9rem;
    }
}

/* ========================================= */
/* CALLBACK SECTION V2 — Light Pastel Style */
/* ========================================= */
/* CALLBACK FORM V2 — Full rewrite for reliable clickability */
/* ========================================= */
.callback-section-v2 {
    padding: 120px 24px;
    background: transparent;
    position: relative;
    z-index: 50;
    isolation: isolate;
}

.callback-v2-container {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: start;
    position: relative;
}

/* Left Info — purely decorative, never intercepts clicks */
.callback-v2-info {
    padding-top: 20px;
    pointer-events: none;
    overflow: hidden;
}

.callback-v2-title {
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    font-weight: 600;
    color: #1D1D1F;
    line-height: 1.1;
    letter-spacing: -0.025em;
    margin-bottom: 24px;
}

/* Brand highlight - голубая подсветка для названия бренда */
.brand-highlight {
    position: relative;
    display: inline-block;
    z-index: 1;
}

.brand-highlight::before {
    content: '';
    position: absolute;
    left: -0.1em;
    right: -0.1em;
    top: 0.05em;
    bottom: 0.05em;
    background: rgba(59, 130, 246, 0.12);
    border-radius: 0.2em;
    z-index: -1;
    pointer-events: none;
}

.callback-v2-desc {
    font-size: 1.125rem;
    color: #6B7280;
    line-height: 1.6;
    margin-bottom: 40px;
    max-width: 400px;
}

.callback-v2-features {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.callback-v2-feature {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.9375rem;
    color: #1D1D1F;
    font-weight: 500;
}

.callback-v2-feature-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, #F8FAFC 0%, #F1F5F9 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #3B82F6;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04), 0 0 0 1px rgba(0, 0, 0, 0.03);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.callback-v2-feature:hover .callback-v2-feature-icon {
    transform: scale(1.08);
    box-shadow: 0 4px 16px rgba(59, 130, 246, 0.15), 0 0 0 1px rgba(59, 130, 246, 0.1);
}

.callback-v2-feature-icon--speed {
    color: #3B82F6;
}

.callback-v2-feature-icon--consult {
    color: #6366F1;
}

/* Right Form — isolated stacking context, guaranteed clickability */
.callback-v2-form-wrap {
    background: linear-gradient(135deg,
        rgba(236, 72, 153, 0.08) 0%,
        rgba(168, 85, 247, 0.06) 25%,
        rgba(99, 102, 241, 0.08) 50%,
        rgba(59, 130, 246, 0.06) 75%,
        rgba(147, 197, 253, 0.1) 100%);
    border-radius: 24px;
    padding: 40px;
    border: 1px solid rgba(147, 197, 253, 0.2);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04);
    position: relative;
    z-index: 999;
    isolation: isolate;
    pointer-events: auto;
}

.callback-v2-form {
    display: flex;
    flex-direction: column;
    gap: 24px;
    position: relative;
    z-index: 1;
}

.callback-v2-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: relative;
}

.callback-v2-field label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #1D1D1F;
    letter-spacing: 0.01em;
    pointer-events: none;
}

.callback-v2-field input,
.callback-v2-field textarea {
    display: block;
    width: 100%;
    padding: 14px 16px;
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    font-size: 1rem;
    color: #1D1D1F;
    background: #FFFFFF;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    font-family: inherit;
    box-sizing: border-box;
    position: relative;
    z-index: 1;
    cursor: text;
    pointer-events: auto !important;
    -webkit-tap-highlight-color: transparent;
}

.callback-v2-field input::placeholder,
.callback-v2-field textarea::placeholder {
    color: #9CA3AF;
}

.callback-v2-field input:focus,
.callback-v2-field textarea:focus {
    outline: none;
    border-color: #6366F1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.callback-v2-field textarea {
    resize: none;
    min-height: 100px;
}

.callback-v2-consent {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    position: relative;
}

.callback-v2-consent input[type="checkbox"] {
    width: 20px;
    height: 20px;
    min-width: 20px;
    min-height: 20px;
    margin-top: 2px;
    accent-color: #6366F1;
    cursor: pointer;
    flex-shrink: 0;
    pointer-events: auto !important;
}

.callback-v2-consent label {
    font-size: 0.8125rem;
    color: #6B7280;
    line-height: 1.5;
    cursor: pointer;
    pointer-events: auto;
}

.callback-v2-consent label a {
    color: #6366F1;
    text-decoration: none;
    pointer-events: auto;
}

.callback-v2-consent label a:hover {
    text-decoration: underline;
    color: #4F46E5;
}

.callback-v2-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px 32px;
    background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);
    color: #FFFFFF;
    font-size: 1rem;
    font-weight: 600;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-top: 8px;
    box-shadow: 0 4px 16px rgba(59, 130, 246, 0.3);
    pointer-events: auto !important;
    position: relative;
    z-index: 1;
}

.callback-v2-submit:hover {
    background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(59, 130, 246, 0.4);
}

.callback-v2-submit:active {
    transform: translateY(0);
}

.callback-v2-submit svg {
    transition: transform 0.2s ease;
}

.callback-v2-submit:hover svg {
    transform: translateX(3px);
}

/* Responsive V2 */
@media (max-width: 900px) {
    .callback-v2-container {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .callback-v2-info {
        text-align: center;
        padding-top: 0;
    }

    .callback-v2-desc {
        margin-left: auto;
        margin-right: auto;
    }

    .callback-v2-features {
        align-items: center;
    }
}

@media (max-width: 640px) {
    .callback-section-v2 {
        padding: 80px 16px;
    }

    .callback-v2-form-wrap {
        padding: 28px 20px;
    }

    .callback-v2-title {
        font-size: 2rem;
    }
}

/* ========================================= */
/* CALLBACK SECTION — Блок заявки (Legacy) */
/* ========================================= */
.callback-section {
    position: relative;
    padding: 120px 24px;
    background: linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%);
    overflow: hidden;
}

.callback-glow {
    position: absolute;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.15;
    pointer-events: none;
}

.callback-glow--left {
    top: -20%;
    left: -10%;
    background: radial-gradient(circle, #2563DD 0%, transparent 70%);
}

.callback-glow--right {
    bottom: -20%;
    right: -10%;
    background: radial-gradient(circle, #7C3AED 0%, transparent 70%);
}

.callback-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
    position: relative;
    z-index: 1;
}

.callback-info {
    max-width: 500px;
}

.callback-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: rgba(37, 99, 221, 0.1);
    border-radius: 100px;
    margin-bottom: 24px;
    border: 1px solid rgba(37, 99, 221, 0.2);
    font-size: 0.875rem;
    font-weight: 600;
    color: #2563DD;
}

.callback-badge i {
    font-size: 1rem;
    color: #2563DD;
}

.callback-info h2 {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    color: #0F172A;
    line-height: 1.2;
    margin-bottom: 20px;
    letter-spacing: -0.02em;
}

.callback-lead {
    font-size: 1.125rem;
    color: #64748B;
    line-height: 1.7;
    margin-bottom: 32px;
}

.callback-meta {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.callback-meta-item {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1rem;
    color: #475569;
}

.callback-meta-item i {
    font-size: 1.25rem;
    color: #2563DD;
}

.callback-form-card {
    position: relative;
    background: linear-gradient(135deg, 
        rgba(239, 246, 255, 0.6) 0%, 
        rgba(243, 244, 246, 0.5) 50%, 
        rgba(254, 242, 242, 0.6) 100%);
    padding: 28px;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(15, 23, 42, 0.08);
    border: none;
    overflow: hidden;
    max-width: 420px;
    backdrop-filter: blur(20px);
}

.callback-form-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, 
        rgba(219, 234, 254, 0.4) 0%, 
        rgba(243, 232, 255, 0.3) 50%, 
        rgba(254, 226, 226, 0.4) 100%);
    z-index: -1;
    opacity: 0.8;
    pointer-events: none;
}

.callback-form-card > * {
    position: relative;
    z-index: 1;
}

.callback-form-card h3 {
    font-size: 1.35rem;
    font-weight: 700;
    color: #1E293B;
    margin-bottom: 4px;
}

.callback-form-subtitle {
    font-size: 0.85rem;
    color: #64748B;
    margin-bottom: 20px;
}

.callback-form .form-section {
    margin-bottom: 14px;
    position: relative;
    z-index: 2;
}

.callback-form .form-label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: #334155;
    margin-bottom: 5px;
    position: relative;
    z-index: 2;
}

.callback-form .input-field {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid rgba(203, 213, 225, 0.6);
    border-radius: 8px;
    font-size: 0.9rem;
    color: #1E293B;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
    font-family: var(--font-main);
    position: relative;
    z-index: 2;
}

.callback-form .input-field:focus {
    outline: none;
    border-color: rgba(147, 197, 253, 0.8);
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.15);
}

.callback-form .input-textarea {
    resize: vertical;
    min-height: 75px;
}

.callback-form .form-footer {
    margin-top: 18px;
}

.callback-form .consent-check {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 16px;
    cursor: pointer;
    position: relative;
    z-index: 2;
}

.callback-form .consent-check input[type="checkbox"] {
    margin-top: 4px;
    width: 18px;
    height: 18px;
    cursor: pointer;
    position: relative;
    z-index: 3;
}

.callback-form .consent-text {
    font-size: 0.75rem;
    color: #64748B;
    line-height: 1.4;
}

.callback-form .consent-text strong {
    color: #3B82F6;
    font-weight: 600;
}

.btn-submit-callback {
    width: 100%;
    padding: 14px 28px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    font-weight: 600;
    font-size: 1rem;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    box-shadow: 0 10px 30px -5px rgba(102, 126, 234, 0.4);
    transition: all 0.3s ease;
    position: relative;
    z-index: 2;
}

.btn-submit-callback:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 40px -5px rgba(102, 126, 234, 0.5);
    background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
}

.btn-submit-callback:active {
    transform: translateY(0);
}

/* Responsive */
@media (max-width: 968px) {
    .callback-container {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .callback-info {
        max-width: 100%;
        text-align: center;
    }

    .callback-meta {
        align-items: center;
    }

    .callback-form-card {
        padding: 24px 18px;
        max-width: 100%;
    }
}

@media (max-width: 640px) {
    .callback-section {
        padding: 80px 16px;
    }

    .callback-form-card {
        padding: 20px 16px;
        max-width: 100%;
    }

    .callback-form-card h3 {
        font-size: 1.2rem;
    }

    .callback-info h2 {
        font-size: 1.75rem;
    }

    .callback-badge {
        padding: 8px 16px;
        font-size: 0.8rem;
    }
}

/* ========================================= */
/* ФУТЕР — космический блок: контакты, соцсети, QR, реквизиты */
/* ========================================= */
.ev-footer {
    background: linear-gradient(180deg,
            #0a0a0f 0%,
            /* Almost black */
            #0d0d14 20%,
            /* Very dark blue */
            #0b0b12 40%,
            /* Dark grey-blue */
            #0e0e16 60%,
            /* Dark blue-grey */
            #0c0c13 80%,
            /* Almost black blue */
            #0a0a0f 100%
            /* Almost black */
        );
    background-size: 100% 200%;
    animation: gradient-rotate 30s ease infinite alternate;
    color: #fff;
    padding: 80px 0 40px;
    position: relative;
    overflow: hidden;
    border-radius: 48px 48px 0 0;
    text-align: left;
    margin-top: -30px;
    box-shadow: 0 -20px 60px rgba(0, 0, 0, 0.15);
}

/* Aurora light effect for cosmic feel */
.ev-footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: -50%;
    width: 200%;
    height: 100%;
    background: radial-gradient(ellipse at top,
            rgba(79, 70, 229, 0.04) 0%,
            rgba(99, 102, 241, 0.02) 30%,
            transparent 60%);
    opacity: 0.8;
    pointer-events: none;
    z-index: 0;
    animation: aurora-flow 35s ease-in-out infinite;
    mix-blend-mode: screen;
}

/* Звёздное небо в футере: цветные мерцающие звёзды */
.ev-footer-stars {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}

/* Улучшенные цветные звёзды */
.ev-footer-star {
    position: absolute;
    width: 8px;
    height: 8px;
    background: rgba(255, 255, 255, 0.7);
    clip-path: polygon(50% 0%, 58% 42%, 100% 50%, 58% 58%, 50% 100%, 42% 58%, 0% 50%, 42% 42%);
    opacity: 0.75;
    filter: drop-shadow(0 0 1px currentColor);
}

/* Разный размер для глубины */
.ev-footer-star--3,
.ev-footer-star--7,
.ev-footer-star--12,
.ev-footer-star--18,
.ev-footer-star--23,
.ev-footer-star--29,
.ev-footer-star--35,
.ev-footer-star--41,
.ev-footer-star--47 {
    width: 5px;
    height: 5px;
    opacity: 0.65;
    background: rgba(147, 197, 253, 0.5);
    /* Purple stars */
}

.ev-footer-star--5,
.ev-footer-star--15,
.ev-footer-star--25,
.ev-footer-star--38,
.ev-footer-star--50 {
    width: 6px;
    height: 6px;
    background: rgba(199, 210, 254, 0.6);
    /* Blue stars */
}

/* Улучшенное мерцание с эффектом цвета */
@keyframes ev-footer-star-twinkle {

    0%,
    88%,
    100% {
        opacity: 0.85;
        filter: brightness(1) saturate(1) drop-shadow(0 0 2px currentColor);
        transform: scale(1);
    }

    91% {
        opacity: 1;
        filter: brightness(1.8) saturate(1.5) drop-shadow(0 0 4px currentColor);
        transform: scale(1.3);
    }

    94% {
        opacity: 0.95;
        filter: brightness(1.4) saturate(1.3) drop-shadow(0 0 3px currentColor);
        transform: scale(1.15);
    }
}

.ev-footer-star--4,
.ev-footer-star--11,
.ev-footer-star--19,
.ev-footer-star--27,
.ev-footer-star--33,
.ev-footer-star--44 {
    animation: ev-footer-star-twinkle 5s ease-in-out infinite;
    transform-origin: center;
}

.ev-footer-star--4 {
    animation-delay: 0s;
    background: rgba(165, 180, 252, 0.65);
    /* Indigo */
}

.ev-footer-star--11 {
    animation-delay: 2.3s;
    background: rgba(191, 219, 254, 0.65);
    /* Light blue */
}

.ev-footer-star--19 {
    animation-delay: 4.1s;
    background: rgba(221, 214, 254, 0.65);
    /* Purple */
}

.ev-footer-star--27 {
    animation-delay: 1.7s;
    background: rgba(196, 181, 253, 0.65);
    /* Purple */
}

.ev-footer-star--33 {
    animation-delay: 5.2s;
    background: rgba(147, 197, 253, 0.65);
    /* Blue */
}

.ev-footer-star--44 {
    animation-delay: 3.4s;
    background: rgba(199, 210, 254, 0.65);
    /* Indigo */
}

/* Хаотичное расположение по всему футеру — как ночное небо, не рядом друг с другом */
.ev-footer-star--1 {
    top: 5%;
    left: 7%;
}

.ev-footer-star--2 {
    top: 18%;
    left: 92%;
}

.ev-footer-star--3 {
    top: 12%;
    left: 23%;
}

.ev-footer-star--4 {
    top: 88%;
    left: 15%;
}

.ev-footer-star--5 {
    top: 7%;
    left: 51%;
}

.ev-footer-star--6 {
    top: 72%;
    left: 8%;
}

.ev-footer-star--7 {
    top: 35%;
    left: 4%;
}

.ev-footer-star--8 {
    top: 94%;
    left: 78%;
}

.ev-footer-star--9 {
    top: 22%;
    left: 67%;
}

.ev-footer-star--10 {
    top: 58%;
    left: 94%;
}

.ev-footer-star--11 {
    top: 41%;
    left: 31%;
}

.ev-footer-star--12 {
    top: 3%;
    left: 38%;
}

.ev-footer-star--13 {
    top: 76%;
    left: 52%;
}

.ev-footer-star--14 {
    top: 49%;
    left: 19%;
}

.ev-footer-star--15 {
    top: 28%;
    left: 85%;
}

.ev-footer-star--16 {
    top: 91%;
    left: 44%;
}

.ev-footer-star--17 {
    top: 14%;
    left: 12%;
}

.ev-footer-star--18 {
    top: 62%;
    left: 61%;
}

.ev-footer-star--19 {
    top: 85%;
    left: 28%;
}

.ev-footer-star--20 {
    top: 44%;
    left: 76%;
}

.ev-footer-star--21 {
    top: 9%;
    left: 82%;
}

.ev-footer-star--22 {
    top: 67%;
    left: 35%;
}

.ev-footer-star--23 {
    top: 31%;
    left: 48%;
}

.ev-footer-star--24 {
    top: 53%;
    left: 7%;
}

.ev-footer-star--25 {
    top: 96%;
    left: 62%;
}

.ev-footer-star--26 {
    top: 19%;
    left: 56%;
}

.ev-footer-star--27 {
    top: 78%;
    left: 89%;
}

.ev-footer-star--28 {
    top: 6%;
    left: 29%;
}

.ev-footer-star--29 {
    top: 45%;
    left: 42%;
}

.ev-footer-star--30 {
    top: 82%;
    left: 18%;
}

.ev-footer-star--31 {
    top: 24%;
    left: 74%;
}

.ev-footer-star--32 {
    top: 59%;
    left: 26%;
}

.ev-footer-star--33 {
    top: 11%;
    left: 45%;
}

.ev-footer-star--34 {
    top: 87%;
    left: 55%;
}

.ev-footer-star--35 {
    top: 38%;
    left: 88%;
}

.ev-footer-star--36 {
    top: 71%;
    left: 43%;
}

.ev-footer-star--37 {
    top: 2%;
    left: 64%;
}

.ev-footer-star--38 {
    top: 55%;
    left: 71%;
}

.ev-footer-star--39 {
    top: 93%;
    left: 9%;
}

.ev-footer-star--40 {
    top: 16%;
    left: 39%;
}

.ev-footer-star--41 {
    top: 64%;
    left: 82%;
}

.ev-footer-star--42 {
    top: 33%;
    left: 15%;
}

.ev-footer-star--43 {
    top: 79%;
    left: 66%;
}

.ev-footer-star--44 {
    top: 8%;
    left: 96%;
}

.ev-footer-star--45 {
    top: 47%;
    left: 53%;
}

.ev-footer-star--46 {
    top: 98%;
    left: 33%;
}

.ev-footer-star--47 {
    top: 26%;
    left: 3%;
}

.ev-footer-star--48 {
    top: 69%;
    left: 17%;
}

.ev-footer-star--49 {
    top: 52%;
    left: 91%;
}

.ev-footer-star--50 {
    top: 15%;
    left: 68%;
}

/* Дополнительные яркие звёзды — в случайных местах, аккуратно */
.ev-footer-star--bright {
    width: 9px;
    height: 9px;
    opacity: 1;
    background: rgba(255, 255, 255, 0.95);
    filter: brightness(1.1);
}

.ev-footer-star--51 {
    top: 8%;
    left: 22%;
}

.ev-footer-star--52 {
    top: 42%;
    left: 6%;
}

.ev-footer-star--53 {
    top: 76%;
    left: 88%;
}

.ev-footer-star--54 {
    top: 18%;
    left: 94%;
}

.ev-footer-star--55 {
    top: 62%;
    left: 14%;
}

.ev-footer-star--56 {
    top: 34%;
    left: 78%;
}

.ev-footer-star--57 {
    top: 88%;
    left: 42%;
}

.ev-footer-star--58 {
    top: 4%;
    left: 56%;
}

.ev-footer-star--59 {
    top: 52%;
    left: 92%;
}

.ev-footer-star--60 {
    top: 92%;
    left: 28%;
}

.ev-footer-inner {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 24px;
    position: relative;
    z-index: 5;
}

/* Информация о нас: две колонки */
.ev-footer-info {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 48px 56px;
    align-items: start;
    margin-bottom: 28px;
}

.ev-footer-col,
.ev-footer-col--left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}

@media (max-width: 1024px) {
    .ev-footer-info {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .ev-footer-col--right {
        align-items: flex-start;
        text-align: left;
    }
}

@media (max-width: 768px) {
    .ev-footer-info {
        grid-template-columns: 1fr;
        gap: 28px;
    }
}

.ev-footer-title {
    font-size: 1.75rem;
    font-weight: 800;
    color: #fff;
    margin: 0 0 20px 0;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ev-footer-phone {
    display: inline-block;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #fff;
    text-decoration: none;
    margin-bottom: 24px;
    padding: 10px 0;
    transition: color 0.25s ease, transform 0.2s ease;
}

.ev-footer-phone:hover {
    color: rgba(255, 255, 255, 0.95);
    transform: translateX(4px);
}

.ev-footer-links {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    width: fit-content;
}

.ev-footer-links a {
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.95);
    text-decoration: none;
    transition: color 0.2s, letter-spacing 0.2s;
}

.ev-footer-links a:hover {
    color: #fff;
    letter-spacing: 0.08em;
}

/* Контакты: лаконичные строки, подпись жирная — значение среднее */
.ev-footer-details {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ev-footer-detail-row {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px 16px;
    align-items: baseline;
    margin-bottom: 14px;
}

.ev-footer-detail-row:last-child {
    margin-bottom: 0;
}

.ev-footer-label {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
    text-transform: uppercase;
}

.ev-footer-value {
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.95);
    margin: 0;
    word-break: break-word;
    overflow-wrap: break-word;
}

.ev-footer-details a {
    color: rgba(255, 255, 255, 0.95);
    text-decoration: none;
}

.ev-footer-details a:hover {
    text-decoration: underline;
}

.ev-footer-col--right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
}

@media (max-width: 768px) {
    .ev-footer-col--right {
        align-items: flex-start;
    }
}

.ev-footer-social {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    transition: color 0.2s ease;
}

.ev-footer-social:hover {
    color: rgba(255, 255, 255, 0.95);
}

/* Круглые иконки соцсетей из assets */
.ev-footer-social-icon--round {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    transition: background 0.25s ease, border-color 0.25s ease, transform 0.2s ease;
    overflow: hidden;
}

.ev-footer-social-icon--round img {
    width: 26px;
    height: 26px;
    object-fit: contain;
    display: block;
}

.ev-footer-social:hover .ev-footer-social-icon--round {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.22);
    transform: scale(1.05);
}

/* Подписи к соцсетям — аккуратная типографика */
.ev-footer-social-label {
    font-family: var(--font-main), sans-serif;
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: rgba(255, 255, 255, 0.92);
    transition: color 0.2s ease;
}

.ev-footer-social:hover .ev-footer-social-label {
    color: #fff;
}

.ev-footer-qr {
    margin-top: 8px;
}

.ev-footer-qr img {
    display: block;
    width: 112px;
    height: 112px;
    object-fit: contain;
    border-radius: 8px;
}

.ev-footer-signoff {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    color: rgba(255, 255, 255, 0.85);
    text-transform: uppercase;
    font-family: var(--font-main), sans-serif;
}

/* Нижний блок: реквизиты + ECOMVISION Studio */
.ev-footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    margin-top: 40px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    width: 100%;
    flex-wrap: wrap;
    position: relative;
    z-index: 5;
}

.ev-footer-bottom .ev-footer-signoff {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    color: rgba(255, 255, 255, 0.85);
    text-transform: uppercase;
    order: 2;
}

.ev-footer-bottom .ev-footer-legal {
    order: 1;
}

/* Реквизиты — одна строка */
.ev-footer-legal {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.5;
    margin: 0;
}

.ev-footer-legal strong {
    font-weight: 700;
    color: rgba(255, 255, 255, 0.9);
}

.ev-footer-legal .ev-footer-legal-details {
    font-weight: 500;
}

@media (max-width: 768px) {
    .ev-footer {
        border-radius: 32px 32px 0 0;
        padding: 40px 0 32px;
    }

    .ev-footer-info {
        gap: 24px;
    }

    .ev-footer-col,
    .ev-footer-col--left,
    .ev-footer-col--right {
        align-items: flex-start;
        text-align: left;
    }

    .ev-footer-title,
    .ev-footer-phone,
    .ev-footer-links,
    .ev-footer-details,
    .ev-footer-detail-row,
    .ev-footer-social,
    .ev-footer-social-label {
        text-align: left;
    }

    .ev-footer-links {
        width: 100%;
    }

    .ev-footer-detail-row {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .ev-footer-phone {
        word-break: break-word;
        overflow-wrap: break-word;
    }

    .ev-footer-social {
        width: 100%;
    }

    .ev-footer-social-label {
        white-space: normal;
    }

    .ev-footer-qr {
        margin-top: 16px;
    }
    
    .ev-footer-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    
    .ev-footer-bottom .ev-footer-signoff {
        font-size: 1.1rem;
        order: 2;
    }
    
    .ev-footer-bottom .ev-footer-legal {
        order: 1;
    }

    .ev-footer-title {
        font-size: 1.4rem;
    }

    .ev-footer-phone {
        font-size: 1.35rem;
        margin-bottom: 20px;
    }

    .ev-footer-links a {
        font-size: 1.1rem;
    }

    .ev-footer-social-label {
        font-size: 0.9rem;
    }

    .ev-footer-legal {
        font-size: 0.6rem;
        line-height: 1.45;
        word-break: break-word;
        overflow-wrap: break-word;
    }

    .ev-footer-inner {
        padding: 0 20px;
    }

    .ev-footer-title {
        font-size: 1.2rem;
    }

    .ev-footer-value {
        font-size: 0.85rem;
    }

    .ev-footer-label {
        font-size: 0.7rem;
    }

    .ev-footer-details p {
        font-size: 0.85rem;
        word-break: break-word;
        overflow-wrap: break-word;
    }

    .ev-footer-social-icon--round {
        width: 44px;
        height: 44px;
    }

    .ev-footer-social-icon--round img {
        width: 22px;
        height: 22px;
    }

    .ev-footer-social-label {
        font-size: 0.85rem;
    }

    .ev-footer-star {
        width: 6px;
        height: 6px;
        opacity: 0.9;
    }

    .ev-footer-star--3,
    .ev-footer-star--7,
    .ev-footer-star--12,
    .ev-footer-star--18,
    .ev-footer-star--23,
    .ev-footer-star--29,
    .ev-footer-star--35,
    .ev-footer-star--41,
    .ev-footer-star--47 {
        width: 4px;
        height: 4px;
        opacity: 0.8;
    }

    .ev-footer-star--bright {
        width: 6px;
        height: 6px;
    }
}

/* Custom Animations for Buyer Services Card */
@keyframes spin-slow {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.animate-spin-slow {
    animation: spin-slow 60s linear infinite;
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0);
    }

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

.animate-float {
    animation: float 6s ease-in-out infinite;
}

@keyframes spin-cw {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes spin-ccw {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(-360deg);
    }
}

/* =========================================
   EVOLUTION / QUANTUM LEAP REPLACEMENT BLOCK
   ========================================= */

/* =========================================
   HOLOGRAPHIC DIGITAL EVOLUTION BLOCK (EVOX)
   ========================================= */

/* =========================================
   EVOLUTION HERO — живая типографика, без иконок, анимации по словам
   ========================================= */

.evolution-hero {
    font-family: var(--font-main);
    position: relative;
    background: var(--bg-light);
    overflow: hidden;
    padding: 100px 24px 120px;
    margin: 0;
}

.evolution-hero__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 80% 50% at 50% -20%, rgba(37, 99, 235, 0.06), transparent 50%),
        radial-gradient(circle at 90% 80%, rgba(124, 58, 237, 0.04), transparent 40%);
}

.evolution-hero__inner {
    position: relative;
    z-index: 1;
    max-width: 1000px;
    margin: 0 auto;
}

.evolution-hero__badge {
    display: inline-block;
    padding: 10px 20px;
    background: rgba(37, 99, 235, 0.08);
    border: 1px solid rgba(37, 99, 235, 0.2);
    border-radius: 100px;
    font-size: 0.85rem;
    font-weight: 700;
    color: #2563eb;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-bottom: 32px;
    opacity: 0;
    animation: evolution-badge-in 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.05s forwards;
}

@keyframes evolution-badge-in {
    to {
        opacity: 1;
    }
}

.evolution-hero__title {
    font-weight: 800;
    line-height: 1.1;
    color: #0f172a;
    margin: 0 0 28px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.02em;
}

/* Появление по словам — заметное движение вверх + масштаб */
.evolution-hero__word {
    display: block;
    opacity: 0;
    transform: translateY(28px) scale(0.97);
    transform-origin: left center;
}

.evolution-hero__word--1 {
    font-size: clamp(2.5rem, 6vw, 4rem);
    letter-spacing: -0.03em;
    animation: evolution-word-in 0.75s cubic-bezier(0.34, 1.2, 0.64, 1) 0.2s forwards;
}

.evolution-hero__word--2 {
    font-size: clamp(3.5rem, 10vw, 6rem);
    letter-spacing: -0.04em;
    margin-top: -0.06em;
    background: linear-gradient(110deg, #1e40af 0%, #4f46e5 35%, #7c3aed 70%, #a855f7 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: evolution-word-in 0.8s cubic-bezier(0.34, 1.2, 0.64, 1) 0.5s forwards,
        evolution-gradient-shift 8s ease-in-out 1.5s infinite;
}

.evolution-hero__word--3 {
    font-size: clamp(2.2rem, 5vw, 3.5rem);
    letter-spacing: -0.02em;
    margin-top: -0.05em;
    color: #334155;
    animation: evolution-word-in 0.75s cubic-bezier(0.34, 1.2, 0.64, 1) 0.85s forwards;
}

@keyframes evolution-word-in {
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes evolution-gradient-shift {

    0%,
    100% {
        background-position: 0% center;
    }

    50% {
        background-position: 100% center;
    }
}

.evolution-hero__desc {
    font-size: 1.15rem;
    line-height: 1.65;
    color: #475569;
    max-width: 560px;
    margin: 0 0 48px;
    opacity: 0;
    transform: translateY(16px);
    animation: evolution-desc-in 0.7s cubic-bezier(0.34, 1.2, 0.64, 1) 1.15s forwards;
}

@keyframes evolution-desc-in {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Метрики — только типографика, цветная полоска слева */
.evolution-hero__stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 16px;
    margin-bottom: 48px;
}

.evolution-hero__stat {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 24px 28px;
    background: #fafafa;
    border: none;
    border-radius: 20px;
    border-left: 4px solid transparent;
    opacity: 0;
    transform: translateY(20px);
    transition: transform 0.35s ease, box-shadow 0.35s ease, border-left-color 0.35s ease;
}

.evolution-hero__stat--a {
    border-left-color: #059669;
    animation: evolution-stat-in 0.6s cubic-bezier(0.34, 1.2, 0.64, 1) 1.35s forwards;
}

.evolution-hero__stat--b {
    border-left-color: #d97706;
    animation: evolution-stat-in 0.6s cubic-bezier(0.34, 1.2, 0.64, 1) 1.5s forwards;
}

.evolution-hero__stat--c {
    border-left-color: #2563eb;
    animation: evolution-stat-in 0.6s cubic-bezier(0.34, 1.2, 0.64, 1) 1.65s forwards;
}

.evolution-hero__stat--d {
    border-left-color: #db2777;
    animation: evolution-stat-in 0.6s cubic-bezier(0.34, 1.2, 0.64, 1) 1.8s forwards;
}

.evolution-hero__stat:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 32px -10px rgba(15, 23, 42, 0.15);
}

@keyframes evolution-stat-in {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.evolution-hero__stat-value {
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.02em;
    margin-bottom: 4px;
}

.evolution-hero__stat-label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #64748b;
}

.evolution-hero__btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 18px 40px;
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, #2563eb 0%, #4f46e5 100%);
    border: none;
    border-radius: 100px;
    cursor: pointer;
    box-shadow: 0 16px 32px -8px rgba(37, 99, 235, 0.35);
    opacity: 0;
    transform: translateY(12px);
    animation: evolution-btn-in 0.6s cubic-bezier(0.34, 1.2, 0.64, 1) 1.95s forwards;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.evolution-hero__btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 24px 48px -12px rgba(37, 99, 235, 0.45);
}

@keyframes evolution-btn-in {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (min-width: 768px) {
    .evolution-hero__stats {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 767px) {
    .evolution-hero {
        padding: 64px 20px 80px;
    }

    .evolution-hero__title {
        align-items: stretch;
    }
}

/* =========================================
   EVOLUTION / QUANTUM LEAP REPLACEMENT BLOCK (Legacy — не используется)
   ========================================= */

.evolution-section {
    position: relative;
    background: #050505;
    overflow: hidden;
    padding: 80px 20px 100px;
    min-height: 560px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    border-radius: 48px;
    margin: 40px 0;
}

/* --- Deep Space Background Layers (Retained & Darkened) --- */
.evox-bg-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
    transition: transform 0.2s cubic-bezier(0.2, 0, 0.2, 1);
    z-index: 0;
}

.evox-bg-stars {
    background-image:
        radial-gradient(1px 1px at 20px 30px, #ffffff, rgba(0, 0, 0, 0)),
        radial-gradient(1px 1px at 40px 70px, #ffffff, rgba(0, 0, 0, 0)),
        radial-gradient(1px 1px at 50px 160px, #ffffff, rgba(0, 0, 0, 0)),
        radial-gradient(1px 1px at 90px 40px, #ffffff, rgba(0, 0, 0, 0)),
        radial-gradient(1px 1px at 130px 80px, #ffffff, rgba(0, 0, 0, 0));
    background-size: 200px 200px;
}

.evox-bg-nebula {
    background:
        radial-gradient(circle at 20% 30%, rgba(37, 99, 235, 0.1) 0%, transparent 60%),
        radial-gradient(circle at 80% 70%, rgba(124, 58, 237, 0.1) 0%, transparent 60%);
    filter: blur(80px);
}

.evox-bg-grid {
    background-image:
        linear-gradient(rgba(59, 130, 246, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(59, 130, 246, 0.05) 1px, transparent 1px);
    background-size: 50px 50px;
    transform: perspective(1000px) rotateX(60deg) scale(2.5) translateY(0);
    transform-origin: center 20%;
}

/* Central Animation Core */
.evo-core-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 800px;
    height: 800px;
    pointer-events: none;
    z-index: 1;
}

/* Shining Planet / Energy Core (Restored) */
.evox-energy-ball {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120px;
    height: 120px;
    background: radial-gradient(circle, #ffffff, #3B82F6, transparent 70%);
    border-radius: 50%;
    box-shadow:
        0 0 80px rgba(59, 130, 246, 0.8),
        0 0 150px rgba(59, 130, 246, 0.4);
    animation: evox-pulse 4s ease-in-out infinite;
    z-index: 0;
    /* Behind Brain */
    filter: blur(5px);
    opacity: 0.8;
}

.evo-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 20px rgba(37, 99, 235, 0.05);
}

.evo-ring-1 {
    width: 300px;
    height: 300px;
    border-color: rgba(37, 99, 235, 0.3);
    animation: spin-cw 30s linear infinite;
}

.evo-ring-2 {
    width: 480px;
    height: 480px;
    border-style: dashed;
    animation: spin-ccw 50s linear infinite;
}

.evo-ring-3 {
    width: 650px;
    height: 650px;
    opacity: 0.5;
    animation: spin-cw 80s linear infinite;
}

/* Orbiting Particles */
.evo-planet {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    margin-top: -50%;
    margin-left: -50%;
    animation: inherit;
    /* Sync with ring */
}

.evo-planet::after {
    content: '';
    position: absolute;
    top: -6px;
    left: 50%;
    margin-left: -6px;
    width: 12px;
    height: 12px;
    background: white;
    box-shadow: 0 0 15px #3B82F6, 0 0 30px #3B82F6;
    border-radius: 50%;
}

.evo-ring-2 .evo-planet::after {
    top: auto;
    bottom: -8px;
    width: 16px;
    height: 16px;
    background: #10B981;
    box-shadow: 0 0 15px #10B981;
}

.evo-center-brain {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100px;
    /* Smaller size */
    height: 100px;
    background: radial-gradient(circle, rgba(37, 99, 235, 0.2), rgba(0, 0, 0, 0.8));
    border: 1px solid rgba(37, 99, 235, 0.4);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 40px rgba(37, 99, 235, 0.3);
    backdrop-filter: blur(5px);
    z-index: 10;
}

.evo-center-icon {
    font-size: 3rem;
    /* Smaller icon */
    background: linear-gradient(135deg, #fff 0%, #93C5FD 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 15px rgba(59, 130, 246, 0.5));
    animation: pulse 3s infinite ease-in-out;
}

/* Floating Data Cards */
.evo-float-card {
    position: absolute;
    background: rgba(15, 23, 42, 0.4);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 12px 20px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
    pointer-events: auto;
    z-index: 5;
    /* Performance Optimization: */
    /* Removed transition: transform to let JS handle it smoothly */
    transition: background 0.3s ease, border 0.3s ease;
    will-change: transform;
}

.evo-float-card:hover {
    transform: scale(1.05);
    /* This might conflict with JS transforms. Handled in JS or simple CSS hover scale if not doing complex parallax */
    background: rgba(30, 58, 138, 0.5);
    border-color: rgba(59, 130, 246, 0.4);
}

.evo-card-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}

.evo-card-content div:first-child {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.6);
}

.evo-card-content div:last-child {
    font-size: 1.1rem;
    font-weight: 700;
    color: white;
}

/* Positions - Initial positions, JS will offset them */
.evo-pos-1 {
    top: 20%;
    left: 15%;
}

.evo-pos-2 {
    bottom: 25%;
    right: 15%;
}

.evo-pos-3 {
    top: 15%;
    right: 25%;
}

.evo-pos-4 {
    bottom: 20%;
    left: 25%;
}

/* Content Overlay */
.evo-content {
    position: relative;
    z-index: 20;
    text-align: center;
    max-width: 900px;
}

.evo-badge {
    display: inline-block;
    padding: 8px 16px;
    background: rgba(37, 99, 235, 0.15);
    border: 1px solid rgba(37, 99, 235, 0.3);
    border-radius: 100px;
    font-size: 0.9rem;
    font-weight: 600;
    color: #60A5FA;
    margin-bottom: 24px;
    backdrop-filter: blur(4px);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.evo-title {
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 24px;
    background: linear-gradient(135deg, #FFFFFF 0%, #E0F2FE 50%, #93C5FD 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 40px rgba(37, 99, 235, 0.3);
}

.evo-desc {
    font-size: 1.2rem;
    line-height: 1.6;
    color: #94A3B8;
    margin-bottom: 40px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.evo-btn {
    padding: 18px 48px;
    font-size: 1.1rem;
    /* Restored size */
    background: linear-gradient(135deg, #2563EB 0%, #4F46E5 100%);
    border: none;
    border-radius: 100px;
    color: white;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    transition: all 0.3s ease;
    box-shadow: 0 20px 40px rgba(37, 99, 235, 0.3);
    position: relative;
    overflow: hidden;
}

.evo-btn:hover {
    transform: translateY(-4px);
    box-shadow: 0 30px 60px rgba(37, 99, 235, 0.5);
    background: linear-gradient(135deg, #3B82F6 0%, #6366F1 100%);
}

/* Hero card — единый контейнер (glass, интерактив) */
.evo-hero-card {
    position: relative;
    z-index: 10;
    width: 100%;
    max-width: 920px;
    margin: 0 auto;
    padding: 56px 48px 52px;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 32px;
    box-shadow:
        0 25px 50px -12px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(255, 255, 255, 0.05) inset;
    transition: transform 0.4s cubic-bezier(0.2, 0, 0.2, 1),
        box-shadow 0.4s ease,
        border-color 0.3s ease;
}

.evo-hero-card:hover {
    transform: translateY(-6px);
    box-shadow:
        0 32px 64px -12px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(255, 255, 255, 0.08) inset,
        0 0 60px rgba(59, 130, 246, 0.08);
    border-color: rgba(255, 255, 255, 0.18);
}

.evo-hero-card .evo-content {
    max-width: none;
}

.evo-hero-card .evo-desc {
    margin-bottom: 40px;
}

/* Ряд метрик — 4 колонки, hover-эффект */
.evo-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 40px;
}

.evo-stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 20px 16px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    transition: transform 0.3s ease,
        background 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}

.evo-stat-item:hover {
    transform: translateY(-4px);
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.14);
    box-shadow: 0 12px 24px -8px rgba(0, 0, 0, 0.35);
}

.evo-stat-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    transition: transform 0.3s ease;
}

.evo-stat-item:hover .evo-stat-icon {
    transform: scale(1.08);
}

.evo-stat-1 .evo-stat-icon {
    background: rgba(16, 185, 129, 0.2);
    color: #10B981;
}

.evo-stat-2 .evo-stat-icon {
    background: rgba(245, 158, 11, 0.2);
    color: #F59E0B;
}

.evo-stat-3 .evo-stat-icon {
    background: rgba(59, 130, 246, 0.2);
    color: #3B82F6;
}

.evo-stat-4 .evo-stat-icon {
    background: rgba(236, 72, 153, 0.2);
    color: #EC4899;
}

.evo-stat-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.evo-stat-value {
    font-size: 1.15rem;
    font-weight: 700;
    color: #fff;
}

@media (max-width: 900px) {
    .evo-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .evo-hero-card {
        padding: 40px 24px 36px;
    }
}

@media (max-width: 500px) {
    .evo-stats {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}

/* --- Deep Space Background Layers --- */
.evox-bg-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
    transition: transform 0.2s cubic-bezier(0.2, 0, 0.2, 1);
}

.evox-bg-stars {
    background-image:
        radial-gradient(1px 1px at 20px 30px, #ffffff, rgba(0, 0, 0, 0)),
        radial-gradient(1px 1px at 40px 70px, #ffffff, rgba(0, 0, 0, 0)),
        radial-gradient(1px 1px at 50px 160px, #ffffff, rgba(0, 0, 0, 0)),
        radial-gradient(1px 1px at 90px 40px, #ffffff, rgba(0, 0, 0, 0)),
        radial-gradient(1px 1px at 130px 80px, #ffffff, rgba(0, 0, 0, 0));
    background-size: 200px 200px;
    opacity: 0.3;
}

.evox-bg-nebula {
    background:
        radial-gradient(circle at 20% 30%, rgba(37, 99, 235, 0.15) 0%, transparent 60%),
        radial-gradient(circle at 80% 70%, rgba(124, 58, 237, 0.15) 0%, transparent 60%);
    filter: blur(60px);
}

.evox-bg-grid {
    background-image:
        linear-gradient(rgba(59, 130, 246, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(59, 130, 246, 0.05) 1px, transparent 1px);
    background-size: 50px 50px;
    opacity: 0.2;
    transform: perspective(1000px) rotateX(60deg) scale(2.5) translateY(0);
    transform-origin: center 20%;
    /* Will be animated in JS */
}

/* --- 3D Neural Core --- */
.evox-core-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 600px;
    height: 600px;
    transform-style: preserve-3d;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 10;
}

.evox-core-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    border: 1px solid rgba(59, 130, 246, 0.1);
    box-shadow: 0 0 15px rgba(59, 130, 246, 0.05);
}

.ring-outer {
    width: 550px;
    height: 550px;
    border-left-color: rgba(59, 130, 246, 0.5);
    border-right-color: rgba(59, 130, 246, 0.5);
    animation: evox-spin-3d 20s linear infinite;
}

.ring-mid {
    width: 400px;
    height: 400px;
    border: 1px dashed rgba(16, 185, 129, 0.3);
    animation: evox-spin-3d-rev 25s linear infinite;
}

.ring-inner {
    width: 280px;
    height: 280px;
    border: 2px solid rgba(236, 72, 153, 0.2);
    border-top-color: rgba(236, 72, 153, 0.6);
    border-bottom-color: rgba(236, 72, 153, 0.6);
    animation: evox-spin-tilt 15s linear infinite;
}

.evox-core-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.evox-energy-ball {
    width: 60px;
    height: 60px;
    background: radial-gradient(circle, #fff, #3B82F6, transparent);
    border-radius: 50%;
    box-shadow: 0 0 60px #3B82F6, 0 0 100px rgba(59, 130, 246, 0.5);
    animation: evox-pulse 3s ease-in-out infinite;
    filter: blur(1px);
}

.evox-orbit-particle {
    position: absolute;
    width: 6px;
    height: 6px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 0 10px #fff;
}

.p1 {
    top: 50%;
    left: 50%;
    animation: orbit-1 8s linear infinite;
}

.p2 {
    top: 50%;
    left: 50%;
    animation: orbit-2 12s linear infinite;
}

.p3 {
    top: 50%;
    left: 50%;
    animation: orbit-3 15s linear infinite;
}

/* --- Holographic Floating Cards --- */
.evox-card {
    position: absolute;
    z-index: 20;
    transform-style: preserve-3d;
    perspective: 1000px;
}

.evox-card-glass {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow:
        0 4px 30px rgba(0, 0, 0, 0.1),
        inset 0 0 20px rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    padding: 16px 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    transition: all 0.3s ease;
    width: 220px;
    overflow: hidden;
}

.evox-card-glass::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg,
            transparent,
            rgba(255, 255, 255, 0.1),
            transparent);
    transform: rotate(45deg);
    animation: shimmer 6s infinite;
}

.evox-card:hover .evox-card-glass {
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow: 0 0 30px rgba(59, 130, 246, 0.2);
    transform: scale(1.02);
}

.evox-card-icon {
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: #60A5FA;
}

.evox-card-text {
    display: flex;
    flex-direction: column;
}

.evox-card-text .label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, 0.6);
}

.evox-card-text .value {
    font-size: 1.25rem;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

.card-sales {
    top: 20%;
    left: 15%;
}

.card-ai {
    top: 15%;
    right: 15%;
}

.card-secure {
    bottom: 25%;
    right: 25%;
}

/* --- Content Overlay --- */
.evox-content {
    position: relative;
    z-index: 30;
    text-align: center;
    max-width: 800px;
}

.evox-badge {
    background: rgba(59, 130, 246, 0.2);
    border: 1px solid rgba(59, 130, 246, 0.5);
    color: #93C5FD;
    padding: 8px 20px;
    border-radius: 100px;
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.3);
    display: inline-block;
    margin-bottom: 24px;
}

.evox-title {
    font-size: clamp(3rem, 6vw, 5rem);
    font-weight: 800;
    line-height: 1;
    margin-bottom: 30px;
    color: white;
    letter-spacing: -2px;
}

.text-gradient {
    background: linear-gradient(135deg, #fff 0%, #60A5FA 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 30px rgba(59, 130, 246, 0.4));
}

.evox-desc {
    font-size: 1.25rem;
    line-height: 1.6;
    color: #cbd5e1;
    margin-bottom: 50px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}


/* Magnetic Button */
.evox-btn {
    position: relative;
    padding: 20px 60px;
    background: linear-gradient(90deg, #2563EB, #4F46E5);
    border: none;
    border-radius: 100px;
    color: white;
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    overflow: hidden;
    transition: transform 0.3s cubic-bezier(0.2, 0, 0.2, 1), box-shadow 0.3s ease;
    box-shadow: 0 10px 40px rgba(37, 99, 235, 0.4);
}

.evox-btn:hover {
    transform: translateY(-5px) scale(1.05);
    box-shadow: 0 20px 60px rgba(37, 99, 235, 0.6);
}

.evox-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transform: translateX(-100%);
    transition: transform 0.6s ease;
}

.evox-btn:hover::before {
    transform: translateX(100%);
}

/* Animations */
@keyframes evox-spin-3d {
    0% {
        transform: translate(-50%, -50%) rotateX(60deg) rotateZ(0deg);
    }

    100% {
        transform: translate(-50%, -50%) rotateX(60deg) rotateZ(360deg);
    }
}

@keyframes evox-spin-3d-rev {
    0% {
        transform: translate(-50%, -50%) rotateX(70deg) rotateZ(360deg);
    }

    100% {
        transform: translate(-50%, -50%) rotateX(70deg) rotateZ(0deg);
    }
}

@keyframes evox-spin-tilt {
    0% {
        transform: translate(-50%, -50%) rotateY(0deg) rotateZ(0deg);
    }

    100% {
        transform: translate(-50%, -50%) rotateY(360deg) rotateZ(360deg);
    }
}

@keyframes evox-pulse {

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

    50% {
        transform: scale(1.2);
        opacity: 1;
        box-shadow: 0 0 80px #3B82F6;
    }
}

@keyframes shimmer {
    0% {
        transform: rotate(45deg) translateY(-100%);
    }

    100% {
        transform: rotate(45deg) translateY(100%);
    }
}

/* Complex Orbits */
@keyframes orbit-1 {
    0% {
        transform: translate(-50%, -50%) rotate(0deg) translateX(275px) rotate(0deg);
    }

    100% {
        transform: translate(-50%, -50%) rotate(360deg) translateX(275px) rotate(-360deg);
    }
}

@keyframes orbit-2 {
    0% {
        transform: translate(-50%, -50%) rotate(120deg) translateX(200px) rotate(-120deg);
    }

    100% {
        transform: translate(-50%, -50%) rotate(480deg) translateX(200px) rotate(-480deg);
    }
}

@keyframes orbit-3 {
    0% {
        transform: translate(-50%, -50%) rotate(240deg) translateX(140px) rotate(-240deg);
    }

    100% {
        transform: translate(-50%, -50%) rotate(-120deg) translateX(140px) rotate(120deg);
    }
}

/* --- Solar System Background Animation --- */
.solar-system-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 1000px;
    height: 1000px;
    pointer-events: none;
    z-index: 0;
    opacity: 0.6;
}

.solar-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.03);
    box-shadow: 0 0 20px rgba(37, 99, 235, 0.02);
}

.solar-dot {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 6px;
    height: 6px;
    background: white;
    border-radius: 50%;
    box-shadow: 0 0 10px #3B82F6, 0 0 20px #3B82F6;
    margin-top: -3px;
    margin-left: -3px;
}

/* Ring Sizes & Animations */
.ring-1 {
    width: 300px;
    height: 300px;
    animation: solar-spin 12s linear infinite;
    border-color: rgba(59, 130, 246, 0.1);
}

.ring-1 .solar-dot {
    transform: translateX(150px);
}

.ring-2 {
    width: 450px;
    height: 450px;
    animation: solar-spin 18s linear infinite reverse;
}

.ring-2 .solar-dot {
    transform: translateX(225px);
}

.ring-2 .solar-dot.offset {
    transform: translateX(-225px);
}

.ring-3 {
    width: 600px;
    height: 600px;
    animation: solar-spin 25s linear infinite;
    border: 1px dashed rgba(255, 255, 255, 0.05);
}

.ring-3 .solar-dot {
    transform: translateY(300px);
}

.ring-4 {
    width: 800px;
    height: 800px;
    animation: solar-spin 40s linear infinite reverse;
}

.ring-4 .solar-dot {
    transform: translateX(400px);
}

.ring-4 .solar-dot.offset-2 {
    transform: translateY(-400px);
}

.ring-5 {
    width: 200px;
    height: 200px;
    animation: solar-spin 8s linear infinite;
    border-color: rgba(139, 92, 246, 0.15);
}

.ring-5 .solar-dot {
    transform: translateX(100px) scale(0.8);
    background: #8B5CF6;
    box-shadow: 0 0 10px #8B5CF6;
}

/* Tilted Axes */
.solar-axis {
    position: absolute;
    top: 50%;
    left: 50%;
    border: 1px solid rgba(255, 255, 255, 0.02);
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.axis-1 {
    width: 500px;
    height: 500px;
    animation: solar-spin-tilt-1 20s linear infinite;
}

.axis-2 {
    width: 550px;
    height: 550px;
    animation: solar-spin-tilt-2 25s linear infinite reverse;
}

@keyframes solar-spin {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

@keyframes solar-spin-tilt-1 {
    0% {
        transform: translate(-50%, -50%) rotateX(60deg) rotate(0deg);
    }

    100% {
        transform: translate(-50%, -50%) rotateX(60deg) rotate(360deg);
    }
}

@keyframes solar-spin-tilt-2 {
    0% {
        transform: translate(-50%, -50%) rotateY(60deg) rotate(0deg);
    }

    100% {
        transform: translate(-50%, -50%) rotateY(60deg) rotate(360deg);
    }
}

/* --- Styled EcomVision Text in Hero Block --- */
/* Этот блок удалён - стили перенесены выше в строку 856 */
/* ============================================
   INTERACTIVE SOLUTIONS CAROUSEL
   ============================================ */

/* Carousel Container */
/* Old Carousel Navigation Styles Removed */

/* Carousel Track */
.solutions-carousel-track {
    display: flex;
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}

/* Carousel Slide */
.solutions-carousel-slide {
    flex: 0 0 100%;
    width: 100%;
    opacity: 0;
    transform: scale(0.95) translateX(50px);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}

.solutions-carousel-slide.active {
    opacity: 1;
    transform: scale(1) translateX(0);
    pointer-events: all;
}

/* Carousel Arrow Controls */
.carousel-arrows {
    position: absolute;
    bottom: -60px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 20px;
    z-index: 20;
}

.carousel-arrow {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.7);
    font-size: 1.2rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(10px);
}

.carousel-arrow:hover {
    background: rgba(99, 102, 241, 0.2);
    border-color: rgba(99, 102, 241, 0.5);
    color: #fff;
    transform: scale(1.1);
    box-shadow: 0 8px 32px rgba(99, 102, 241, 0.3);
}

.carousel-arrow:active {
    transform: scale(0.95);
}

/* Индикаторы пагинации карусели решений — скрыты по запросу */
.solutions-section.carousel-mode .carousel-progress {
    display: none !important;
}

/* Slide transition — простой crossfade */

/* Простой crossfade без сдвигов — только opacity */

/* Устаревшие правила удалены — используется простой crossfade */

/* Mobile Responsive */
@media (max-width: 992px) {
    .solutions-carousel-nav-wrap {
        gap: 16px;
        margin-bottom: 32px;
    }

    .carousel-nav-arrow {
        width: 38px;
        height: 38px;
        font-size: 1rem;
    }

    .solutions-carousel-nav {
        flex-wrap: wrap;
        gap: 10px;
    }

    .carousel-nav-item {
        padding: 10px 18px;
        font-size: 0.85rem;
    }

    .carousel-arrows {
        bottom: -50px;
        gap: 15px;
    }

    .carousel-arrow {
        width: 48px;
        height: 48px;
        font-size: 1rem;
    }
}

@media (max-width: 768px) {
    /* Навигация — горизонтальный скролл в одну линию */
    .solutions-carousel-nav-wrap {
        justify-content: flex-start !important;
        gap: 0;
        margin-bottom: 20px;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        padding: 0 16px;
    }

    .solutions-carousel-nav-wrap::-webkit-scrollbar {
        display: none;
    }

    /* Скрываем стрелки навигации возле табов */
    .carousel-nav-arrow {
        display: none !important;
    }

    .solutions-carousel-nav {
        gap: 24px;
        flex-wrap: nowrap;
        justify-content: flex-start;
        min-width: max-content;
    }

    .carousel-nav-item {
        padding: 10px 0;
        font-size: 0.875rem;
        white-space: nowrap;
        flex-shrink: 0;
    }

    .carousel-nav-item i {
        display: none;
    }
    
    /* Скрываем боковые стрелки на слайдах */
    .carousel-side-arrows,
    .carousel-side-arrow {
        display: none !important;
    }

    .carousel-progress-dot {
        width: 30px;
    }
}

/* ============================================
   КАРУСЕЛЬ РЕШЕНИЙ — SIMPLE CROSSFADE (v2)
   ============================================ */

.solutions-section.carousel-mode {
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}

.solutions-section.carousel-mode .solutions-slides-wrap {
    overflow: hidden;
    touch-action: pan-y;
    position: relative;
}

.solutions-section.carousel-mode .solutions-grid-vertical {
    display: block;
    position: relative;
    overflow: hidden;
    /* min-height set dynamically by JS */
    touch-action: pan-y;
    transition: min-height 0.4s ease;
}

/* Hidden slides — stacked behind, invisible */
.solutions-section.carousel-mode .solution-card-modern {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(0);
    transition: opacity 0.45s ease, visibility 0s 0.45s;
    border-radius: 28px !important;
    overflow: hidden;
}

/* Active slide — visible, in-flow */
.solutions-section.carousel-mode .solution-card-modern.carousel-active {
    position: relative;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    z-index: 2;
    transform: translateY(0);
    transition: opacity 0.45s ease, visibility 0s 0s;
    border-radius: 28px !important;
    overflow: hidden;
}

/* Inner elements always visible (no separate opacity/visibility) */
.solutions-section.carousel-mode .solution-card-modern .solution-content,
.solutions-section.carousel-mode .solution-card-modern .solution-visual-wrapper,
.solutions-section.carousel-mode .solution-card-modern .ui-mock-card {
    opacity: 1;
    visibility: visible;
}

.solutions-section.carousel-mode .ui-mock-card--placard {
    opacity: 1;
}

/* Swipe hint — упрощённая анимация */
.carousel-swipe-hint {
    display: none;
    justify-content: center;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.85rem;
    margin-top: 20px;
}

@media (max-width: 768px) {
    .carousel-swipe-hint {
        display: flex;
    }
}

/* ============================================
   СТРЕЛКИ КАРУСЕЛИ — МИНИМАЛИСТИЧНЫЙ СТИЛЬ
   ============================================ */

.carousel-side-arrows {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    padding: 0 20px;
    pointer-events: none;
    z-index: 100;
}

.carousel-side-arrow {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.8);
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 200ms ease, 
                border-color 200ms ease,
                transform 200ms ease;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    pointer-events: all;
}

.carousel-side-arrow:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.4);
    transform: scale(1.05);
}

.carousel-side-arrow:active {
    transform: scale(0.95);
}

.carousel-side-arrow.arrow-prev {
    margin-left: 0;
}

.carousel-side-arrow.arrow-next {
    margin-right: 0;
}

/* Заголовки слайдов */
.solutions-section.carousel-mode .solution-content h3 {
    font-size: 2.2rem !important;
    font-weight: 700 !important;
    color: #fff !important;
    text-shadow: none !important;
    margin-bottom: 20px;
    line-height: 1.25;
    letter-spacing: -0.02em;
}

/* Thematic icon badges for navigation */
.carousel-nav-item .nav-icon {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.carousel-nav-item[data-theme="finance"] .nav-icon {
    background: linear-gradient(135deg, #10B981 0%, #059669 100%);
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4);
}

.carousel-nav-item[data-theme="seo"] .nav-icon {
    background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
    box-shadow: 0 4px 15px rgba(245, 158, 11, 0.4);
}

.carousel-nav-item[data-theme="warehouse"] .nav-icon {
    background: linear-gradient(135deg, #6366F1 0%, #4F46E5 100%);
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.4);
}

.carousel-nav-item[data-theme="analytics"] .nav-icon {
    background: linear-gradient(135deg, #EC4899 0%, #DB2777 100%);
    box-shadow: 0 4px 15px rgba(236, 72, 153, 0.4);
}

.carousel-nav-item.active .nav-icon {
    transform: scale(1.1);
}

/* Swipe indicator */
.swipe-indicator {
    display: none;
    position: relative;
    margin-top: 16px;
    justify-content: center;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.8rem;
    gap: 8px;
    align-items: center;
}

.swipe-indicator i {
    animation: swipeHintBounce 1.5s ease-in-out infinite;
}

@keyframes swipeHintBounce {
    0%, 100% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(8px);
    }
}

@media (max-width: 768px) {
    .swipe-indicator {
        display: flex;
    }

    /* Все стрелки скрыты на мобильных */
    .carousel-side-arrow,
    .carousel-side-arrows,
    .carousel-arrows,
    .carousel-nav-arrow {
        display: none !important;
    }

    .solutions-section.carousel-mode .solution-content h3 {
        font-size: 1.6rem !important;
    }
}

/* Hide old bottom arrows */
.solutions-section.carousel-mode .carousel-arrows {
    display: none;
}


/* ============================================
   POLISHED CAROUSEL - COMPLETE REDESIGN
   ============================================ */

/* Navigation tabs - completely redesigned */
.carousel-navigation {
    display: flex;
    justify-content: center;
}

/* Analytics Slide - Standard White Theme */
.solution-slide[data-slide="4"] .ui-mock-card {
    background: #ffffff !important;
    color: #1F2937 !important;
    border: 1px solid rgba(0, 0, 0, 0.08);
}

/* Navigation Wrap — заголовки + стрелки по бокам */
.solutions-carousel-nav-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    margin-bottom: 40px;
    position: relative;
    z-index: 10;
}

@media (max-width: 768px) {
    .solutions-carousel-nav-wrap {
        justify-content: flex-start !important;
    }
}

/* Стрелки возле заголовков — понятная навигация */
.carousel-nav-arrow {
    width: 44px;
    height: 44px;
    border-radius: 0;
    background: transparent;
    border: none;
    color: #9CA3AF;
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
}

.carousel-nav-arrow:hover {
    background: transparent;
    border: none;
    color: #3B82F6;
    transform: scale(1.08);
}

.carousel-nav-arrow:active {
    transform: scale(0.95);
}

.carousel-nav-arrow i {
    transition: transform 0.25s ease;
}

.carousel-nav-arrow:hover.carousel-nav-arrow--prev i {
    transform: translateX(-2px);
}

.carousel-nav-arrow:hover.carousel-nav-arrow--next i {
    transform: translateX(2px);
}

/* Navigation Tabs - Apple Minimal Style */
.solutions-carousel-nav {
    display: flex;
    justify-content: center;
    gap: 40px;
}

.carousel-nav-item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 0;
    background: transparent !important;
    border: none !important;
    border-bottom: 2px solid transparent;
    border-radius: 0 !important;
    box-shadow: none !important;
    cursor: pointer;
    transition: color 200ms ease, border-color 200ms ease;
    min-width: auto;
    color: #6B7280;
    font-size: 0.9375rem;
    font-weight: 500;
    position: relative;
    backdrop-filter: none !important;
    letter-spacing: -0.01em;
}

.carousel-nav-item:hover {
    color: #1F2937;
}

.carousel-nav-item.active {
    color: #2563EB;
    font-weight: 600;
    border-bottom-color: #2563EB;
    background: transparent !important;
    box-shadow: none !important;
}

/* Remove icons from nav items */
.carousel-nav-item i,
.carousel-nav-item .nav-icon {
    display: none !important;
}

/* Better arrow design */
.carousel-side-arrow {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.25) 0%, rgba(139, 92, 246, 0.25) 100%);
    border: 2px solid rgba(139, 92, 246, 0.4);
    color: #fff;
    font-size: 1.3rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(20px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.carousel-side-arrow:hover {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.5) 0%, rgba(139, 92, 246, 0.5) 100%);
    border-color: rgba(139, 92, 246, 0.8);
    transform: scale(1.12);
    box-shadow: 0 12px 40px rgba(99, 102, 241, 0.45), 0 0 60px rgba(139, 92, 246, 0.2);
}

.carousel-side-arrow:active {
    transform: scale(0.95);
}

/* Слайды: статичный тёмный фон без анимаций — ровный вид */
.solution-card-modern.solution-slide {
    background: linear-gradient(145deg, #0f0f1a 0%, #1a1a2e 40%, #16213e 70%, #0f0f1a 100%);
    border: 1px solid rgba(99, 102, 241, 0.12);
    position: relative;
    overflow: hidden;
}

.solution-card-modern.solution-slide::before {
    content: '';
    position: absolute;
    top: -30%;
    left: -20%;
    width: 140%;
    height: 140%;
    background: radial-gradient(circle at 40% 40%, rgba(99, 102, 241, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 70% 60%, rgba(139, 92, 246, 0.06) 0%, transparent 45%);
    pointer-events: none;
}

.solution-card-modern.solution-slide::after {
    content: '';
    position: absolute;
    bottom: -15%;
    right: -10%;
    width: 50%;
    height: 60%;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.06) 0%, transparent 60%);
    pointer-events: none;
}

/* Glassmorphism slide content */
.solution-card-modern .solution-content {
    position: relative;
    z-index: 2;
}

/* Enhanced feature badges in slides */
.solution-card-modern .solution-feature-pills .pill {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    padding: 10px 18px;
    border-radius: 12px;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

.solution-card-modern .solution-feature-pills .pill:hover {
    background: rgba(99, 102, 241, 0.2);
    border-color: rgba(99, 102, 241, 0.4);
    transform: translateY(-2px);
}

/* Progress dots enhancement */
.carousel-progress {
    display: flex;
    justify-content: center;
    gap: 10px;
    padding: 25px 0;
}

.carousel-progress-dot {
    width: 12px;
    height: 12px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.15);
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.carousel-progress-dot:hover {
    background: rgba(255, 255, 255, 0.35);
    transform: scale(1.2);
}

.carousel-progress-dot.active {
    background: linear-gradient(135deg, #6366F1 0%, #8B5CF6 100%);
    width: 32px;
    border-color: rgba(139, 92, 246, 0.5);
    box-shadow: 0 4px 16px rgba(99, 102, 241, 0.4);
}

/* Mobile responsive */
@media (max-width: 768px) {
    .carousel-nav-item {
        padding: 10px 16px;
        min-width: auto;
        font-size: 0.85rem;
    }

    .carousel-nav-item .nav-icon {
        width: 32px;
        height: 32px;
        font-size: 0.9rem;
    }

    .carousel-side-arrow {
        width: 44px;
        height: 44px;
        font-size: 1rem;
        border-radius: 12px;
    }
}


/* ============================================
   REFINED CAROUSEL STYLES V2 (FIXES)
   ============================================ */

/* 1. Navigation Tabs - Text Only & Clean */
.carousel-nav-item {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    padding: 10px 20px !important;
    background: transparent !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    color: rgba(255, 255, 255, 0.4) !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
    font-weight: 500;
    transition: color 0.3s ease, border-color 0.3s ease;
}

.carousel-nav-item:hover {
    color: rgba(255, 255, 255, 0.7) !important;
}

.carousel-nav-item .nav-icon {
    display: none !important;
}

/* Active State — bright white + underline */
.carousel-nav-item.active {
    background: transparent !important;
    border: none !important;
    border-bottom: 2px solid #3B82F6 !important;
    color: #ffffff !important;
    box-shadow: none !important;
    transform: none !important;
    font-weight: 600;
}

/* 2. Стрелки — по центру слайда по вертикали, снаружи по горизонтали */
.solutions-section.carousel-mode .container {
    position: relative;
    overflow: visible;
}

.solutions-section.carousel-mode .solutions-slides-wrap {
    position: relative;
}

/* Центрирование стрелок по высоте видимого слайда: привязка к карточке */
.solutions-section.carousel-mode .carousel-side-arrows {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    max-width: none !important;
    transform: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 !important;
    pointer-events: none !important;
    z-index: 20;
}

/* Стрелки — цвет фона в тон слайдов (тёмный сине-фиолетовый) */
.carousel-side-arrow {
    pointer-events: all !important;
    position: absolute !important;
    top: 50% !important;
    margin: 0 !important;
    transform: translateY(-50%) !important;
    background: linear-gradient(145deg, #0f0f1a 0%, #1a1a2e 40%, #16213e 100%) !important;
    border: 1px solid rgba(99, 102, 241, 0.18) !important;
    color: rgba(255, 255, 255, 0.9) !important;
    border-radius: 50% !important;
    width: 52px !important;
    height: 52px !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35),
        0 0 0 1px rgba(255, 255, 255, 0.06) inset !important;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

.carousel-side-arrow:hover {
    background: linear-gradient(145deg, #16213e 0%, #1a1a2e 50%, #22304f 100%) !important;
    color: #fff !important;
    border-color: rgba(99, 102, 241, 0.45) !important;
    transform: translateY(-50%) scale(1.12) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4),
        0 0 20px rgba(99, 102, 241, 0.15),
        0 0 0 1px rgba(255, 255, 255, 0.08) inset !important;
}

.carousel-side-arrow.arrow-prev {
    left: -68px !important;
    right: auto !important;
}

.carousel-side-arrow.arrow-next {
    right: -68px !important;
    left: auto !important;
}

@media (max-width: 1100px) {
    .solutions-section.carousel-mode .carousel-side-arrow.arrow-prev {
        left: 12px !important;
    }

    .solutions-section.carousel-mode .carousel-side-arrow.arrow-next {
        right: 12px !important;
    }
}

/* 3. Slide Content Enhancements - "Make Interesting" */

/* Слайд 1: плашка с единой тенью из системы */
.solution-slide[data-slide="1"] .ui-mock-card {
    box-shadow: var(--placard-shadow);
    border: 1px solid rgba(0, 0, 0, 0.06);
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    overflow: hidden;
}

.solution-slide[data-slide="1"] .ui-mock-card::before {
    content: '';
    position: absolute;
    top: -50px;
    right: -50px;
    width: 150px;
    height: 150px;
    background: radial-gradient(circle, rgba(16, 185, 129, 0.08) 0%, transparent 70%);
    z-index: 0;
    pointer-events: none;
}

/* Warehouse Slide - Stock level animation */
.solution-slide[data-slide="3"] .ui-mock-card {
    border-left: 6px solid #10B981;
}

/* Analytics Slide - Dark Mode Premium */
.solution-slide[data-slide="4"] .ui-mock-card {
    background: #0F172A !important;
    color: white !important;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.solution-slide[data-slide="4"] .ui-mock-card div {
    color: rgba(255, 255, 255, 0.9);
}

.solution-slide[data-slide="4"] .ui-mock-card .widget-label {
    color: rgba(255, 255, 255, 0.5);
}

.solution-slide[data-slide="4"] .ui-mock-card span[style*="color:#888"] {
    color: rgba(255, 255, 255, 0.5) !important;
}

.solution-slide[data-slide="4"] .ui-mock-card div[style*="background:#EEF2FF"] {
    background: rgba(255, 255, 255, 0.1) !important;
    color: white !important;
}

.solution-slide[data-slide="4"] .ui-mock-card div[style*="background:#ECFDF5"] {
    background: rgba(16, 185, 129, 0.2) !important;
    color: #34D399 !important;
}

.solution-slide[data-slide="4"] .ui-mock-card div[style*="background:#FFFBEB"] {
    background: rgba(245, 158, 11, 0.2) !important;
    color: #FBBF24 !important;
}

/* Enhanced Typography for Headers */
.section-title h2 {
    letter-spacing: -0.02em;
}

/* Fix "crooked" icons - ensure they don't rotate or misalign */
.nav-icon i {
    transform: none !important;
    /* Reset any rotations */
    margin: 0;
    line-height: 1;
}

/* ================================================== */
/* HOW WE WORK V2 - Premium Editorial Design         */
/* Inspired by Stripe/Linear aesthetic                */
/* ================================================== */

/* Unified background wrapper for seamless sections */
.unified-section-bg {
    background: linear-gradient(180deg, #f8faff 0%, #fef7f4 25%, #f8faff 50%, #fef9f5 75%, #f8faff 100%);
    position: relative;
    overflow: hidden;
}

.unified-section-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background: 
        radial-gradient(ellipse 60% 40% at 20% 10%, rgba(59, 130, 246, 0.08), transparent 50%),
        radial-gradient(ellipse 50% 50% at 80% 30%, rgba(251, 191, 36, 0.06), transparent 50%),
        radial-gradient(ellipse 70% 50% at 50% 70%, rgba(236, 72, 153, 0.05), transparent 50%),
        radial-gradient(ellipse 50% 40% at 30% 90%, rgba(99, 102, 241, 0.06), transparent 50%);
    pointer-events: none;
    z-index: 0;
}

/* Warm variation for Trust + Design slider sections */
.unified-section-bg--warm {
    background: linear-gradient(180deg, #fefefe 0%, #fef9f5 20%, #fff9f5 40%, #f8faff 60%, #fefbf8 80%, #f8faff 100%);
}

.unified-section-bg--warm::before {
    background: 
        radial-gradient(ellipse 50% 40% at 15% 20%, rgba(251, 191, 36, 0.08), transparent 50%),
        radial-gradient(ellipse 60% 50% at 85% 25%, rgba(59, 130, 246, 0.06), transparent 50%),
        radial-gradient(ellipse 50% 45% at 50% 60%, rgba(16, 185, 129, 0.05), transparent 50%),
        radial-gradient(ellipse 55% 40% at 25% 85%, rgba(99, 102, 241, 0.06), transparent 50%),
        radial-gradient(ellipse 45% 35% at 75% 80%, rgba(236, 72, 153, 0.04), transparent 50%);
}

/* Light variation for Why + Callback sections */
.unified-section-bg--light {
    background: linear-gradient(180deg, #f3f4f6 0%, #f8fafc 30%, #ffffff 60%, #fafbfc 100%);
}

.unified-section-bg--light::before {
    background: 
        radial-gradient(ellipse 60% 50% at 20% 30%, rgba(99, 102, 241, 0.06), transparent 50%),
        radial-gradient(ellipse 50% 40% at 80% 20%, rgba(59, 130, 246, 0.05), transparent 50%),
        radial-gradient(ellipse 55% 45% at 50% 80%, rgba(236, 72, 153, 0.04), transparent 50%),
        radial-gradient(ellipse 45% 35% at 30% 70%, rgba(16, 185, 129, 0.04), transparent 50%);
}

/* Soft variation for Collage + Marquee sections */
.unified-section-bg--soft {
    background: linear-gradient(180deg, #fafbfc 0%, #f5f7fa 30%, #eef2f9 60%, #f8fafc 100%);
}

.unified-section-bg--soft::before {
    background: 
        radial-gradient(ellipse 55% 45% at 25% 20%, rgba(59, 130, 246, 0.06), transparent 50%),
        radial-gradient(ellipse 50% 40% at 75% 35%, rgba(99, 102, 241, 0.05), transparent 50%),
        radial-gradient(ellipse 60% 50% at 50% 75%, rgba(139, 92, 246, 0.04), transparent 50%),
        radial-gradient(ellipse 45% 35% at 20% 80%, rgba(16, 185, 129, 0.03), transparent 50%);
}

.howitworks2-section {
    padding: 80px 0;
    background: transparent;
    position: relative;
    overflow: visible;
}

.howitworks2-section::before,
.howitworks2-section::after {
    display: none;
    z-index: 0;
}

.howitworks2-section > * {
    position: relative;
    z-index: 1;
}

@media (max-width: 768px) {
    .howitworks2-section {
        padding: 48px 0 48px;
        background-size: 180% 180%;
    }

    .howitworks2-section::after {
        opacity: 0.2;
    }
}

/* Telegram block — ниже карточек «Как мы работаем», без наложения */
.howitworks2-telegram-wrap {
    margin-top: 80px;
    margin-bottom: 0;
    position: relative;
    z-index: 2;
}

.howitworks2-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 32px;
}

/* ===== Header ===== */
.howitworks2-header {
    text-align: center;
    margin-bottom: var(--section-header-gap);
    opacity: 0;
    transform: translateY(24px);
    transition: opacity var(--duration-slow) var(--ease-smooth),
        transform var(--duration-slow) var(--ease-smooth);
}

.howitworks2-header.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.howitworks2-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    background: rgba(16, 185, 129, 0.08);
    border: 1px solid rgba(16, 185, 129, 0.15);
    border-radius: 100px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #059669;
    margin-bottom: 24px;
}

.howitworks2-badge-dot {
    width: 6px;
    height: 6px;
    background: #10B981;
    border-radius: 50%;
    animation: howitworks2-pulse-dot 2s ease-in-out infinite;
}

@keyframes howitworks2-pulse-dot {

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

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

.howitworks2-title {
    font-size: var(--section-title-size);
    font-weight: 700;
    color: #111827;
    margin: 0 0 18px;
    letter-spacing: var(--section-title-letter);
    line-height: var(--section-title-line);
}

.howitworks2-title-gradient {
    position: relative;
    display: inline-block;
    color: #0A0A0A;
    -webkit-text-fill-color: #0A0A0A;
    padding: 0 0.18em;
}

.howitworks2-title-gradient::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0.18em;
    height: 0.45em;
    background: linear-gradient(90deg, rgba(37, 99, 221, 0.18), rgba(255, 122, 89, 0.22), rgba(43, 182, 115, 0.18));
    border-radius: 999px;
    z-index: -1;
}

.howitworks2-subtitle {
    font-size: 1.125rem;
    color: #6B7280;
    margin: 0;
    line-height: 1.6;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* ===== Grid Layout ===== */
.howitworks2-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    margin-bottom: 0;
    align-items: stretch;
    grid-auto-rows: 1fr;
}

/* ===== Card ===== */
.howitworks2-card {
    position: relative;
    /* Glass effect */
    background: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 20px;
    padding: 36px 28px 28px;
    display: flex;
    flex-direction: column;
    height: 100%;
    opacity: 0;
    transform: translateY(32px);
    transition: opacity 0.9s cubic-bezier(0.22, 0.61, 0.36, 1),
        transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1),
        box-shadow 0.6s cubic-bezier(0.22, 0.61, 0.36, 1),
        border-color 0.5s ease,
        background 0.4s ease,
        backdrop-filter 0.4s ease;
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.08),
        0 2px 8px rgba(0, 0, 0, 0.04),
        inset 0 1px 1px rgba(255, 255, 255, 0.8),
        inset 0 -1px 1px rgba(255, 255, 255, 0.3);
}

.howitworks2-card.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.howitworks2-card[data-step="1"] {
    transition-delay: 0.1s;
    border-top: 3px solid rgba(59, 130, 246, 0.35);
}

.howitworks2-card[data-step="2"] {
    transition-delay: 0.25s;
    border-top: 3px solid rgba(139, 92, 246, 0.35);
}

.howitworks2-card[data-step="3"] {
    transition-delay: 0.4s;
    border-top: 3px solid rgba(16, 185, 129, 0.35);
}

.howitworks2-card:hover {
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-color: rgba(255, 255, 255, 0.7);
    box-shadow: 
        0 12px 40px rgba(0, 0, 0, 0.1),
        0 4px 16px rgba(0, 0, 0, 0.05),
        inset 0 1px 2px rgba(255, 255, 255, 0.9),
        inset 0 -1px 1px rgba(255, 255, 255, 0.4);
    transform: translateY(-4px);
    transition-duration: 0.45s;
}

.howitworks2-card[data-step="1"]:hover {
    border-top-color: rgba(59, 130, 246, 0.6);
}

.howitworks2-card[data-step="2"]:hover {
    border-top-color: rgba(139, 92, 246, 0.6);
}

.howitworks2-card[data-step="3"]:hover {
    border-top-color: rgba(16, 185, 129, 0.6);
}

/* Реакция внутренних элементов иконки при наведении на блок (анимации ставим на паузу) */
.howitworks2-card:hover .howitworks2-3d-head,
.howitworks2-card:hover .howitworks2-3d-plus,
.howitworks2-card:hover .howitworks2-3d-face--light,
.howitworks2-card:hover .howitworks2-3d-layer--front,
.howitworks2-card:hover .howitworks2-3d-layer--back,
.howitworks2-card:hover .howitworks2-3d-highlight,
.howitworks2-card:hover .howitworks2-3d-dot,
.howitworks2-card:hover .howitworks2-3d-bar,
.howitworks2-card:hover .howitworks2-3d-analytics-live,
.howitworks2-card:hover .howitworks2-3d-chart-axis {
    animation-play-state: paused;
}

.howitworks2-card:hover .howitworks2-3d-head {
    transform: translateY(0) scale(1.12);
    transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.howitworks2-card:hover .howitworks2-3d-plus {
    transform: rotate(5deg) scale(1.05);
    transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.howitworks2-card:hover .howitworks2-3d-layer--front {
    transform: translateY(-2px);
    transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.howitworks2-card:hover .howitworks2-3d-layer--back {
    transform: translate(2px, 4px) translateY(-1px);
    transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.howitworks2-card:hover .howitworks2-3d-bar {
    transform: scaleY(1.08);
    transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.howitworks2-card:hover .howitworks2-3d-analytics-live {
    transform: scale(1.2);
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.5);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

/* Card Glow — стеклянный блеск при наведении */
.howitworks2-card-glow {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 140px;
    border-radius: 20px 20px 0 0;
    opacity: 0.3;
    pointer-events: none;
    transition: opacity 0.5s ease;
    /* Glass shine effect */
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.4) 0%,
        rgba(255, 255, 255, 0.1) 40%,
        transparent 60%
    );
}

.howitworks2-card:hover .howitworks2-card-glow {
    opacity: 0.6;
    transition-duration: 0.6s;
}

.howitworks2-card-glow--blue {
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.5) 0%,
        rgba(59, 130, 246, 0.08) 30%,
        rgba(59, 130, 246, 0.03) 60%,
        transparent 100%
    );
}

.howitworks2-card-glow--purple {
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.5) 0%,
        rgba(139, 92, 246, 0.08) 30%,
        rgba(139, 92, 246, 0.03) 60%,
        transparent 100%
    );
}

.howitworks2-card-glow--green {
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.5) 0%,
        rgba(16, 185, 129, 0.08) 30%,
        rgba(16, 185, 129, 0.03) 60%,
        transparent 100%
    );
}

/* Card Number */
.howitworks2-card-number {
    position: absolute;
    top: 18px;
    right: 20px;
    font-size: 0.7rem;
    font-weight: 700;
    color: #E5E7EB;
    letter-spacing: 0.06em;
}

/* ===== Header Row (Icon + Title side by side) ===== */
.howitworks2-header-row {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}

.howitworks2-header-row .howitworks2-card-title {
    margin: 0;
    flex: 1;
}

/* ===== Icon Container ===== */
.howitworks2-icon-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Убрано размытое «отражение» справа от иконки (лаганувшая тень) */
.howitworks2-icon-aura {
    display: none;
    position: absolute;
    left: 50%;
    top: 50%;
    width: 88px;
    height: 88px;
    margin-left: -44px;
    margin-top: -44px;
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
    transition: opacity 1.2s cubic-bezier(0.22, 0.61, 0.36, 1),
        transform 1.2s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.howitworks2-icon-aura--blue {
    background: radial-gradient(circle, rgba(59, 130, 246, 0.5) 0%, transparent 70%);
    filter: blur(12px);
}

.howitworks2-icon-aura--purple {
    background: radial-gradient(circle, rgba(139, 92, 246, 0.5) 0%, transparent 70%);
    filter: blur(12px);
}

.howitworks2-icon-aura--green {
    background: radial-gradient(circle, rgba(16, 185, 129, 0.5) 0%, transparent 70%);
    filter: blur(12px);
}

.howitworks2-card:hover .howitworks2-icon-aura {
    opacity: 0.5;
    transform: scale(1.08);
}

.howitworks2-icon {
    width: 72px;
    height: 72px;
    border-radius: 20px;
    position: relative;
    overflow: visible;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1),
        box-shadow 0.5s ease;
}

/* При наведении на блок — иконка приподнимается и чуть увеличивается */
.howitworks2-card:hover .howitworks2-icon {
    transform: translateY(-6px) scale(1.06);
    animation-play-state: paused;
}

.howitworks2-card:hover .howitworks2-icon-aura {
    opacity: 0.55;
    transform: scale(1.12);
    animation-play-state: paused;
}

/* Icon Background (glass effect base) */
.howitworks2-icon-bg {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    opacity: 1;
    transition: 
        opacity 0.4s ease,
        background 0.4s ease,
        backdrop-filter 0.4s ease,
        box-shadow 0.4s ease;
}

/* Glass effect for icon backgrounds */
.howitworks2-icon--blue .howitworks2-icon-bg {
    background: linear-gradient(145deg, 
        rgba(59, 130, 246, 0.35) 0%, 
        rgba(96, 165, 250, 0.25) 50%, 
        rgba(147, 197, 253, 0.2) 100%);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(59, 130, 246, 0.3);
    box-shadow: 
        inset 0 1px 1px rgba(255, 255, 255, 0.5),
        inset 0 -1px 1px rgba(59, 130, 246, 0.15),
        0 4px 16px rgba(59, 130, 246, 0.15),
        0 0 0 1px rgba(255, 255, 255, 0.1);
}

.howitworks2-icon--purple .howitworks2-icon-bg {
    background: linear-gradient(145deg, 
        rgba(139, 92, 246, 0.35) 0%, 
        rgba(167, 139, 250, 0.25) 50%, 
        rgba(196, 181, 253, 0.2) 100%);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(139, 92, 246, 0.3);
    box-shadow: 
        inset 0 1px 1px rgba(255, 255, 255, 0.5),
        inset 0 -1px 1px rgba(139, 92, 246, 0.15),
        0 4px 16px rgba(139, 92, 246, 0.15),
        0 0 0 1px rgba(255, 255, 255, 0.1);
}

.howitworks2-icon--green .howitworks2-icon-bg {
    background: linear-gradient(145deg, 
        rgba(16, 185, 129, 0.35) 0%, 
        rgba(52, 211, 153, 0.25) 50%, 
        rgba(110, 231, 183, 0.2) 100%);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(16, 185, 129, 0.3);
    box-shadow: 
        inset 0 1px 1px rgba(255, 255, 255, 0.5),
        inset 0 -1px 1px rgba(16, 185, 129, 0.15),
        0 4px 16px rgba(16, 185, 129, 0.15),
        0 0 0 1px rgba(255, 255, 255, 0.1);
}

.howitworks2-card:hover .howitworks2-icon-bg {
    opacity: 1;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.howitworks2-card:hover .howitworks2-icon--blue .howitworks2-icon-bg {
    background: linear-gradient(145deg, 
        rgba(59, 130, 246, 0.45) 0%, 
        rgba(96, 165, 250, 0.35) 50%, 
        rgba(147, 197, 253, 0.28) 100%);
    box-shadow: 
        inset 0 1px 2px rgba(255, 255, 255, 0.6),
        inset 0 -1px 1px rgba(59, 130, 246, 0.2),
        0 8px 24px rgba(59, 130, 246, 0.25),
        0 0 0 1px rgba(255, 255, 255, 0.15);
}

.howitworks2-card:hover .howitworks2-icon--purple .howitworks2-icon-bg {
    background: linear-gradient(145deg, 
        rgba(139, 92, 246, 0.45) 0%, 
        rgba(167, 139, 250, 0.35) 50%, 
        rgba(196, 181, 253, 0.28) 100%);
    box-shadow: 
        inset 0 1px 2px rgba(255, 255, 255, 0.6),
        inset 0 -1px 1px rgba(139, 92, 246, 0.2),
        0 8px 24px rgba(139, 92, 246, 0.25),
        0 0 0 1px rgba(255, 255, 255, 0.15);
}

.howitworks2-card:hover .howitworks2-icon--green .howitworks2-icon-bg {
    background: linear-gradient(145deg, 
        rgba(16, 185, 129, 0.45) 0%, 
        rgba(52, 211, 153, 0.35) 50%, 
        rgba(110, 231, 183, 0.28) 100%);
    box-shadow: 
        inset 0 1px 2px rgba(255, 255, 255, 0.6),
        inset 0 -1px 1px rgba(16, 185, 129, 0.2),
        0 8px 24px rgba(16, 185, 129, 0.25),
        0 0 0 1px rgba(255, 255, 255, 0.15);
}

/* 3D Icon content container */
.howitworks2-icon-3d {
    position: relative;
    z-index: 2;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ----- 3D Card (Registration: user + plus) ----- */
.howitworks2-3d-card {
    position: relative;
    width: 36px;
    height: 44px;
}

.howitworks2-3d-card .howitworks2-3d-face {
    position: absolute;
    border-radius: 8px;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
}

.howitworks2-3d-face--light {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.4) 100%);
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.2);
    transform: translate(2px, 2px);
    z-index: 0;
}

.howitworks2-3d-face--front {
    z-index: 1;
    background: linear-gradient(160deg, #93C5FD 0%, #60A5FA 50%, #3B82F6 100%);
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.howitworks2-3d-head {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: linear-gradient(145deg, #fff 0%, #E0E7FF 100%);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
}

.howitworks2-3d-head-shine {
    position: absolute;
    top: 1px;
    left: 2px;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 0 4px rgba(255, 255, 255, 0.8);
}

.howitworks2-3d-plus {
    width: 10px;
    height: 10px;
    position: relative;
    flex-shrink: 0;
}

.howitworks2-3d-plus::before,
.howitworks2-3d-plus::after {
    content: '';
    position: absolute;
    background: linear-gradient(180deg, #fff 0%, #E8EEFF 100%);
    border-radius: 1px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.howitworks2-3d-plus::before {
    width: 10px;
    height: 2px;
    left: 0;
    top: 4px;
}

.howitworks2-3d-plus::after {
    width: 2px;
    height: 10px;
    left: 4px;
    top: 0;
}

.howitworks2-3d-plus-dot {
    position: absolute;
    left: 4px;
    top: 4px;
    width: 2px;
    height: 2px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.6);
    box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.1);
}

.howitworks2-3d-card-edge {
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 6px;
    height: 6px;
    border-radius: 0 0 8px 0;
    background: linear-gradient(135deg, transparent 50%, rgba(37, 99, 235, 0.25) 100%);
    z-index: 0;
    pointer-events: none;
}

/* Icon 01 — статичная анимация: лёгкое движение внутри (голова + плюс) */
@media (prefers-reduced-motion: no-preference) {
    .howitworks2-3d-head {
        animation: howitworks2-head-drift 5s ease-in-out infinite;
    }

    .howitworks2-3d-plus {
        animation: howitworks2-plus-tilt 4s ease-in-out infinite 0.5s;
    }

    .howitworks2-3d-face--light {
        animation: howitworks2-face-drift 6s ease-in-out infinite;
    }
}

@keyframes howitworks2-head-drift {

    0%,
    100% {
        transform: translateY(0) scale(1);
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.9);
    }

    50% {
        transform: translateY(-2px) scale(1.06);
        box-shadow: 0 2px 4px rgba(37, 99, 235, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.9);
    }
}

@keyframes howitworks2-plus-tilt {

    0%,
    100% {
        transform: rotate(0deg);
        opacity: 1;
        filter: brightness(1);
    }

    25% {
        transform: rotate(-2deg);
        opacity: 0.95;
        filter: brightness(1.05);
    }

    75% {
        transform: rotate(2deg);
        opacity: 0.95;
        filter: brightness(1.05);
    }
}

@keyframes howitworks2-face-drift {

    0%,
    100% {
        transform: translate(2px, 2px);
    }

    50% {
        transform: translate(3px, 3px);
    }
}

/* ----- 3D Stack (API: layers) ----- */
.howitworks2-3d-stack {
    position: relative;
    width: 38px;
    height: 42px;
}

.howitworks2-3d-layer {
    position: absolute;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(124, 58, 237, 0.25);
}

.howitworks2-3d-layer--back {
    width: 34px;
    height: 38px;
    left: 2px;
    top: 4px;
    background: linear-gradient(160deg, #7C3AED 0%, #6D28D9 100%);
    box-shadow: 0 3px 10px rgba(124, 58, 237, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.howitworks2-3d-layer-line {
    position: absolute;
    left: 8px;
    bottom: 10px;
    width: 10px;
    height: 2px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 1px;
}

.howitworks2-3d-layer--front {
    width: 34px;
    height: 38px;
    left: 0;
    top: 0;
    background: linear-gradient(160deg, #A78BFA 0%, #8B5CF6 100%);
    box-shadow: 0 2px 6px rgba(139, 92, 246, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.35);
    padding: 6px;
    box-sizing: border-box;
    position: relative;
}

.howitworks2-3d-highlight {
    position: absolute;
    left: 6px;
    top: 8px;
    width: 14px;
    height: 6px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 2px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.howitworks2-3d-highlight-short {
    position: absolute;
    left: 6px;
    top: 16px;
    width: 8px;
    height: 2px;
    background: rgba(255, 255, 255, 0.25);
    border-radius: 1px;
}

.howitworks2-3d-dot {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 4px;
    height: 4px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 1px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.howitworks2-3d-api-glow {
    position: absolute;
    inset: -2px;
    border-radius: 10px;
    background: radial-gradient(circle at 70% 30%, rgba(255, 255, 255, 0.08) 0%, transparent 60%);
    pointer-events: none;
}

/* Icon 02 — статичная анимация: лёгкое движение слоёв и деталей */
@media (prefers-reduced-motion: no-preference) {
    .howitworks2-3d-layer--front {
        animation: howitworks2-layer-float 5s ease-in-out infinite;
    }

    .howitworks2-3d-dot {
        animation: howitworks2-dot-blink 2.5s ease-in-out infinite;
    }

    .howitworks2-3d-layer--back {
        animation: howitworks2-layer-float 5s ease-in-out infinite 0.15s;
    }

    .howitworks2-3d-highlight {
        animation: howitworks2-highlight-pulse 3s ease-in-out infinite;
    }
}

@keyframes howitworks2-layer-float {

    0%,
    100% {
        transform: translateY(0);
    }

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

@keyframes howitworks2-dot-blink {

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

    50% {
        opacity: 0.85;
        transform: scale(1.15);
    }
}

@keyframes howitworks2-highlight-pulse {

    0%,
    100% {
        opacity: 0.5;
    }

    50% {
        opacity: 0.75;
    }
}

/* ----- 3D Analytics (дашборд: столбчатая диаграмма) ----- */
.howitworks2-3d-analytics {
    position: relative;
    width: 36px;
    height: 44px;
}

.howitworks2-3d-analytics-face {
    position: absolute;
    inset: 0;
    border-radius: 8px;
    background: linear-gradient(160deg, #6EE7B7 0%, #34D399 50%, #10B981 100%);
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    z-index: 0;
    overflow: hidden;
}

.howitworks2-3d-analytics-shine {
    position: absolute;
    top: 2px;
    right: 6px;
    width: 8px;
    height: 4px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.25);
}

/* График: ось + столбцы */
.howitworks2-3d-chart {
    position: absolute;
    left: 6px;
    right: 6px;
    bottom: 6px;
    height: 22px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2px;
    z-index: 1;
}

.howitworks2-3d-chart-axis {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: rgba(255, 255, 255, 0.4);
    border-radius: 1px;
}

.howitworks2-3d-bar {
    position: relative;
    width: 5px;
    min-height: 4px;
    border-radius: 2px 2px 0 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.75) 100%);
    box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
    flex-shrink: 0;
    transform-origin: bottom center;
}

.howitworks2-3d-bar[data-h="45"] {
    height: 45%;
}

.howitworks2-3d-bar[data-h="60"] {
    height: 60%;
}

.howitworks2-3d-bar[data-h="75"] {
    height: 75%;
}

.howitworks2-3d-bar[data-h="100"] {
    height: 100%;
}

/* Индикатор «данные в реальном времени» */
.howitworks2-3d-analytics-live {
    position: absolute;
    top: 4px;
    left: 6px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.5);
    z-index: 2;
}

/* Icon 03 — статичная анимация: лёгкое движение столбцов и оси */
@media (prefers-reduced-motion: no-preference) {
    .howitworks2-3d-bar[data-h="60"] {
        animation: howitworks2-bar-breathe 4s ease-in-out infinite;
    }

    .howitworks2-3d-bar[data-h="100"] {
        animation: howitworks2-bar-breathe 4s ease-in-out infinite 0.2s;
    }

    .howitworks2-3d-bar[data-h="75"] {
        animation: howitworks2-bar-breathe 4s ease-in-out infinite 0.4s;
    }

    .howitworks2-3d-bar[data-h="45"] {
        animation: howitworks2-bar-breathe 4s ease-in-out infinite 0.6s;
    }

    .howitworks2-3d-analytics-live {
        animation: howitworks2-analytics-live 2s ease-in-out infinite;
    }

    .howitworks2-3d-chart-axis {
        animation: howitworks2-axis-pulse 3s ease-in-out infinite;
    }
}

@keyframes howitworks2-bar-breathe {

    0%,
    100% {
        opacity: 0.9;
        transform: scaleY(1);
    }

    50% {
        opacity: 1;
        transform: scaleY(1.06);
    }
}

@keyframes howitworks2-analytics-live {

    0%,
    100% {
        opacity: 1;
        box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.5);
    }

    50% {
        opacity: 0.85;
        box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.4);
    }
}

@keyframes howitworks2-axis-pulse {

    0%,
    100% {
        opacity: 0.4;
    }

    50% {
        opacity: 0.65;
    }
}

/* Idle: gentle float + subtle scale */
@media (prefers-reduced-motion: no-preference) {
    .howitworks2-icon {
        animation: howitworks2-icon-float 8s cubic-bezier(0.45, 0, 0.55, 1) infinite;
    }

    .howitworks2-icon-aura {
        animation: howitworks2-aura-breathe 10s ease-in-out infinite;
    }

    .howitworks2-card[data-step="2"] .howitworks2-icon {
        animation-delay: 0.6s;
    }

    .howitworks2-card[data-step="2"] .howitworks2-icon-aura {
        animation-delay: 0.5s;
    }

    .howitworks2-card[data-step="3"] .howitworks2-icon {
        animation-delay: 1.2s;
    }

    .howitworks2-card[data-step="3"] .howitworks2-icon-aura {
        animation-delay: 1s;
    }
}

@keyframes howitworks2-icon-float {

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

    50% {
        transform: translateY(-4px) scale(1.02);
    }
}

@keyframes howitworks2-aura-breathe {

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

    50% {
        opacity: 0.45;
        transform: scale(1.05);
    }
}

/* ===== Card Content ===== */
.howitworks2-card-content {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.howitworks2-card-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #111827;
    margin: 0 0 10px;
    letter-spacing: -0.015em;
    line-height: 1.3;
}

.howitworks2-card-text {
    font-size: 0.9375rem;
    color: #6B7280;
    margin: 0;
    line-height: 1.65;
}

/* ===== Card Footer ===== */
.howitworks2-card-footer {
    margin-top: auto;
    padding-top: 20px;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.howitworks2-time {
    display: inline-flex;
    align-items: center;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #9CA3AF;
    letter-spacing: 0.01em;
}

.howitworks2-time::before {
    content: '';
    width: 4px;
    height: 4px;
    background: currentColor;
    border-radius: 50%;
    margin-right: 8px;
    opacity: 0.5;
}

/* Mini Badge */
.howitworks2-badge-mini {
    display: inline-flex;
    padding: 4px 12px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: 100px;
}

.howitworks2-badge-mini--blue {
    background: rgba(59, 130, 246, 0.1);
    color: #2563EB;
}

.howitworks2-badge-mini--purple {
    background: rgba(139, 92, 246, 0.1);
    color: #7C3AED;
}

.howitworks2-badge-mini--green {
    background: rgba(16, 185, 129, 0.1);
    color: #059669;
}

/* Progress Bar */
.howitworks2-progress {
    margin-top: 14px;
    margin-bottom: 0;
    height: 4px;
    background: rgba(0, 0, 0, 0.06);
    border-radius: 100px;
    overflow: hidden;
    position: relative;
}

.howitworks2-progress-bar {
    height: 100%;
    width: 0%;
    border-radius: 100px;
    transition: width 1.8s cubic-bezier(0.22, 0.61, 0.36, 1) 0.8s;
}

.howitworks2-card.is-visible .howitworks2-progress-bar {
    width: 100%;
}

.howitworks2-progress-bar--blue {
    background: linear-gradient(90deg, #3B82F6 0%, #60A5FA 100%);
}

.howitworks2-progress-bar--purple {
    background: linear-gradient(90deg, #8B5CF6 0%, #A78BFA 100%);
}

.howitworks2-progress-bar--green {
    background: linear-gradient(90deg, #10B981 0%, #34D399 100%);
}

/* Decorative Sparkles */
.howitworks2-card-sparkle {
    position: absolute;
    width: 6px;
    height: 6px;
    background: radial-gradient(circle, currentColor 0%, transparent 70%);
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
}

.howitworks2-card-sparkle--1 {
    top: 24px;
    right: 60px;
    color: rgba(59, 130, 246, 0.4);
}

.howitworks2-card-sparkle--2 {
    bottom: 80px;
    left: 32px;
    color: rgba(139, 92, 246, 0.4);
}

.howitworks2-card[data-step="2"] .howitworks2-card-sparkle--1 {
    color: rgba(139, 92, 246, 0.4);
}

.howitworks2-card[data-step="2"] .howitworks2-card-sparkle--2 {
    color: rgba(59, 130, 246, 0.4);
}

.howitworks2-card[data-step="3"] .howitworks2-card-sparkle--1 {
    color: rgba(16, 185, 129, 0.4);
}

.howitworks2-card[data-step="3"] .howitworks2-card-sparkle--2 {
    color: rgba(16, 185, 129, 0.4);
}

@media (prefers-reduced-motion: no-preference) {
    .howitworks2-card:hover .howitworks2-card-sparkle {
        animation: howitworks2-sparkle-soft 4s ease-in-out infinite;
    }

    .howitworks2-card:hover .howitworks2-card-sparkle--1 {
        animation-delay: 0.3s;
    }

    .howitworks2-card:hover .howitworks2-card-sparkle--2 {
        animation-delay: 1.2s;
    }
}

@keyframes howitworks2-sparkle-soft {

    0%,
    100% {
        opacity: 0.3;
    }

    50% {
        opacity: 0.7;
    }
}

/* ===== Responsive Design ===== */
@media (max-width: 1024px) {
    .howitworks2-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }

    .howitworks2-card[data-step="3"] {
        grid-column: 1 / -1;
        max-width: 600px;
        margin: 0 auto;
        width: 100%;
    }
}

@media (max-width: 768px) {
    .howitworks2-section {
        padding: 48px 0 48px;
    }

    .howitworks2-telegram-wrap {
        margin-top: 56px;
    }

    .howitworks2-container {
        padding: 0 20px;
    }

    .howitworks2-header {
        margin-bottom: var(--section-header-gap);
    }

    .howitworks2-title {
        font-size: var(--section-title-size);
    }

    .howitworks2-subtitle {
        font-size: 1rem;
    }

    .howitworks2-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .howitworks2-card {
        padding: 32px 24px 24px;
    }

    .howitworks2-card[data-step="3"] {
        grid-column: auto;
        max-width: none;
    }

    .howitworks2-icon {
        width: 64px;
        height: 64px;
    }

    .howitworks2-icon-symbol {
        width: 28px;
        height: 28px;
    }

    .howitworks2-card-title {
        font-size: 1.25rem;
    }

    .howitworks2-card-text {
        font-size: 0.9rem;
    }

}

/* ===== Reduced Motion ===== */
@media (prefers-reduced-motion: reduce) {

    .howitworks2-header,
    .howitworks2-card {
        transition: opacity 0.4s ease;
        transform: none !important;
    }

    .howitworks2-icon,
    .howitworks2-icon-aura,
    .howitworks2-3d-head,
    .howitworks2-3d-plus,
    .howitworks2-3d-layer--front,
    .howitworks2-3d-layer--back,
    .howitworks2-3d-dot,
    .howitworks2-3d-line,
    .howitworks2-3d-doc-badge,
    .howitworks2-3d-bar,
    .howitworks2-3d-analytics-live,
    .howitworks2-3d-face--light,
    .howitworks2-3d-highlight,
    .howitworks2-3d-chart-axis {
        animation: none !important;
    }

    .howitworks2-badge-dot {
        animation: none !important;
    }

    .howitworks2-card:hover {
        transform: none;
    }

    .howitworks2-card:hover .howitworks2-icon-shimmer {
        animation: none !important;
    }
}

/* ================================================== */
/* HERO TRUST BLOCK — заметная ровная анимация */
/* ================================================== */

/* Появление: блок картинки и блок текста поднимаются снизу (48px). Цитата только fade — она внутри картинки. */
.hero-trust-glow {
    opacity: 0;
    transition: opacity 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.hero-trust-image-wrap {
    opacity: 0;
    transform: translateY(48px);
    transition: opacity 0.9s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.9s cubic-bezier(0.4, 0, 0.2, 1);
}

.hero-trust-image {
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 0.5s ease;
}

/* Цитата внутри обёртки — только прозрачность, без своего translate (иначе двойное движение) */
.hero-trust-quote {
    opacity: 0;
    transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 0.4s ease;
}

/* Красивые типографские кавычки — не прямоугольники */
.hero-trust-quote-mark {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 2.5rem;
    font-weight: 400;
    color: #3B82F6;
    line-height: 0.8;
    display: block;
    letter-spacing: -0.02em;
}

.hero-trust-text-wrap {
    opacity: 0;
    transform: translateY(48px);
    transition: opacity 0.9s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.9s cubic-bezier(0.4, 0, 0.2, 1);
}

.hero-trust-headline,
.hero-trust-subtext {
    transition: none;
}

.hero-trust-cta {
    transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.3s ease;
}

/* Появление: свечение → картинка (с цитатой внутри) → текст. Задержки по шагам. */
.hero-trust.is-visible .hero-trust-glow {
    opacity: 1;
}

.hero-trust.is-visible .hero-trust-image-wrap {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.1s;
}

.hero-trust.is-visible .hero-trust-quote {
    opacity: 1;
    transition-delay: 0.4s;
}

.hero-trust.is-visible .hero-trust-text-wrap {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.5s;
}

/* Hover: картинка с цитатой заметно приподнимается и чуть увеличивается */
.hero-trust:hover .hero-trust-image-wrap {
    transform: translateY(-14px);
    transition-duration: 0.45s;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.hero-trust:hover .hero-trust-image {
    transform: scale(1.02);
    box-shadow: 0 48px 96px rgba(0, 0, 0, 0.18), 0 20px 40px rgba(0, 0, 0, 0.1);
}

.hero-trust:hover .hero-trust-quote {
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.14);
}

.hero-trust:hover .hero-trust-cta {
    transform: translateY(-4px);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08);
    border-color: rgba(0, 0, 0, 0.06);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {

    .hero-trust-glow,
    .hero-trust-image-wrap,
    .hero-trust-quote,
    .hero-trust-text-wrap {
        transition: opacity 0.35s ease !important;
    }

    .hero-trust-image-wrap,
    .hero-trust-quote,
    .hero-trust-text-wrap {
        transform: none !important;
    }

    .hero-trust:hover .hero-trust-image-wrap {
        transform: none !important;
    }
}


/* ============================================
   EV STUDIO / DESIGN SERVICES PAGE
   ============================================ */

/* Hero Section */
.ev-studio-hero {
    min-height: 100vh;
    background: linear-gradient(135deg, #0F172A 0%, #1E293B 50%, #334155 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 140px 20px 80px;
    position: relative;
    overflow: hidden;
    border-radius: 0 0 48px 48px;
}

.ev-studio-hero::before {
    content: '';
    position: absolute;
    width: 1000px;
    height: 1000px;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.2) 0%, transparent 70%);
    top: -300px;
    right: -300px;
    border-radius: 50%;
    animation: pulse-glow 8s ease-in-out infinite;
}

.ev-studio-hero::after {
    content: '';
    position: absolute;
    width: 800px;
    height: 800px;
    background: radial-gradient(circle, rgba(147, 197, 253, 0.15) 0%, transparent 70%);
    bottom: -200px;
    left: -200px;
    border-radius: 50%;
    animation: pulse-glow 10s ease-in-out infinite reverse;
}

@keyframes pulse-glow {

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

    50% {
        opacity: 1;
        transform: scale(1.1);
    }
}

.ev-studio-hero-content {
    text-align: center;
    max-width: 900px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

/* Centered modifier for cases page */
.ev-studio-hero--centered .ev-studio-hero-content {
    text-align: center;
    max-width: 720px;
    margin: 0 auto;
}

.ev-studio-hero--centered .ev-studio-badge {
    margin-left: auto;
    margin-right: auto;
}

.ev-studio-hero--centered .ev-studio-hero-subtitle {
    margin-left: auto;
    margin-right: auto;
}

.ev-studio-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 24px;
    background: rgba(59, 130, 246, 0.15);
    border: 2px solid rgba(59, 130, 246, 0.3);
    border-radius: 100px;
    color: #93C5FD;
    font-size: 0.9375rem;
    font-weight: 700;
    margin-bottom: 32px;
    animation: fade-in-up 0.6s ease-out 0.2s both;
}

.ev-studio-hero-title {
    font-size: clamp(2.5rem, 7vw, 5rem);
    font-weight: 900;
    color: white;
    margin: 0 0 24px;
    letter-spacing: -0.03em;
    line-height: 1.1;
    animation: fade-in-up 0.6s ease-out 0.3s both;
}

.ev-studio-hero-subtitle {
    font-size: clamp(1.125rem, 3vw, 1.5rem);
    color: #CBD5E1;
    margin: 0 0 48px;
    line-height: 1.6;
    animation: fade-in-up 0.6s ease-out 0.4s both;
}

.ev-studio-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 18px 40px;
    background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);
    color: white;
    font-size: 1.125rem;
    font-weight: 700;
    border-radius: 16px;
    text-decoration: none;
    box-shadow: 0 8px 32px rgba(59, 130, 246, 0.4);
    transition: all 0.3s cubic-bezier(0.32, 0.72, 0, 1);
    animation: fade-in-up 0.6s ease-out 0.5s both;
}

.ev-studio-cta-btn:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(59, 130, 246, 0.5);
}

.ev-studio-cta-btn i {
    transition: transform 0.3s ease;
}

.ev-studio-cta-btn:hover i {
    transform: translateX(4px);
}

.ev-studio-hero-scroll {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255, 255, 255, 0.6);
    font-size: 1.5rem;
    cursor: pointer;
    animation: bounce 2s infinite;
    z-index: 1;
}

@keyframes bounce {

    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateX(-50%) translateY(0);
    }

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

    60% {
        transform: translateX(-50%) translateY(-5px);
    }
}

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

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

/* Services Section */
.ev-studio-services {
    padding: 120px 20px;
    background: #F8FAFC;
}

.ev-studio-section-header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 64px;
}

.ev-studio-section-title {
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 800;
    color: #111827;
    margin: 0 0 16px;
    letter-spacing: -0.02em;
}

.ev-studio-section-subtitle {
    font-size: 1.125rem;
    color: #6B7280;
    margin: 0;
}

.ev-studio-services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 32px;
    max-width: 1400px;
    margin: 0 auto;
}

.ev-studio-service-card {
    background: white;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
    transition: all 0.4s cubic-bezier(0.32, 0.72, 0, 1);
    opacity: 0;
    transform: translateY(30px);
}

.ev-studio-service-card.animate-in {
    opacity: 1;
    transform: translateY(0);
}

.ev-studio-service-card:hover {
    transform: translateY(-12px);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}

.ev-studio-service-image {
    position: relative;
    width: 100%;
    height: 280px;
    overflow: hidden;
}

.ev-studio-service-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.ev-studio-service-card:hover .ev-studio-service-image img {
    transform: scale(1.1);
}

.ev-studio-service-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.9) 0%, rgba(37, 99, 235, 0.9) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.ev-studio-service-card:hover .ev-studio-service-overlay {
    opacity: 1;
}

.ev-studio-service-overlay i {
    font-size: 3rem;
    color: white;
    transform: scale(0.8);
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.ev-studio-service-card:hover .ev-studio-service-overlay i {
    transform: scale(1);
}

.ev-studio-service-content {
    padding: 32px;
}

.ev-studio-service-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #111827;
    margin: 0 0 12px;
    letter-spacing: -0.015em;
}

.ev-studio-service-description {
    font-size: 0.9375rem;
    color: #6B7280;
    margin: 0 0 20px;
    line-height: 1.7;
}

.ev-studio-service-features {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.ev-studio-service-features li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem;
    color: #374151;
    font-weight: 500;
}

.ev-studio-service-features i {
    color: #10B981;
    font-size: 0.75rem;
}

/* Process Section */
.ev-studio-process {
    padding: 120px 20px;
    background: var(--bg-light);
}

.ev-studio-process-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto;
}

.ev-studio-process-step {
    text-align: center;
    position: relative;
    padding: 40px 24px;
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.4s ease;
}

.ev-studio-process-step.animate-in {
    opacity: 1;
    transform: translateY(0);
}

.ev-studio-step-number {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    font-size: 5rem;
    font-weight: 900;
    color: #F3F4F6;
    line-height: 1;
    z-index: 0;
}

.ev-studio-step-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 24px;
    background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
    transition: all 0.3s ease;
}

.ev-studio-process-step:hover .ev-studio-step-icon {
    background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);
    transform: scale(1.1);
}

.ev-studio-step-icon i {
    font-size: 1.75rem;
    color: #3B82F6;
    transition: color 0.3s ease;
}

.ev-studio-process-step:hover .ev-studio-step-icon i {
    color: white;
}

.ev-studio-step-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #111827;
    margin: 0 0 12px;
}

.ev-studio-step-description {
    font-size: 0.9375rem;
    color: #6B7280;
    margin: 0;
    line-height: 1.6;
}

/* CTA Section */
.ev-studio-cta {
    padding: 120px 20px;
    background: linear-gradient(135deg, #1E293B 0%, #0F172A 100%);
    position: relative;
    overflow: hidden;
}

.ev-studio-cta::before {
    content: '';
    position: absolute;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.15) 0%, transparent 70%);
    top: -200px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 50%;
}

.ev-studio-cta-content {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.ev-studio-cta-title {
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 800;
    color: white;
    margin: 0 0 20px;
    letter-spacing: -0.02em;
}

.ev-studio-cta-subtitle {
    font-size: 1.25rem;
    color: #CBD5E1;
    margin: 0 0 48px;
}

.ev-studio-cta-button {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 20px 48px;
    background: linear-gradient(135deg, #10B981 0%, #059669 100%);
    color: white;
    font-size: 1.25rem;
    font-weight: 700;
    border-radius: 16px;
    text-decoration: none;
    box-shadow: 0 12px 40px rgba(16, 185, 129, 0.4);
    transition: all 0.3s cubic-bezier(0.32, 0.72, 0, 1);
    margin-bottom: 40px;
}

.ev-studio-cta-button:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 60px rgba(16, 185, 129, 0.5);
}

.ev-studio-cta-button i {
    transition: transform 0.3s ease;
}

.ev-studio-cta-button:hover i {
    transform: translateX(4px);
}

.ev-studio-cta-contacts {
    display: flex;
    justify-content: center;
    gap: 32px;
    flex-wrap: wrap;
}

.ev-studio-contact-item {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #94A3B8;
    font-size: 1rem;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.2s ease;
}

.ev-studio-contact-item:hover {
    color: #3B82F6;
}

.ev-studio-contact-item i {
    font-size: 1.1rem;
}

/* Responsive */
@media (max-width: 968px) {
    .ev-studio-hero {
        padding: 120px 16px 60px;
        min-height: 80vh;
    }

    .ev-studio-services,
    .ev-studio-process,
    .ev-studio-cta {
        padding: 80px 16px;
    }

    .ev-studio-services-grid {
        grid-template-columns: 1fr;
    }

    .ev-studio-service-features {
        grid-template-columns: 1fr;
    }

    .ev-studio-cta-contacts {
        flex-direction: column;
        gap: 16px;
    }
}

/* ============================================
   DROPDOWN МЕНЮ В НАВИГАЦИИ
   ============================================ */

.nav-dropdown {
    position: relative;
}

.nav-dropdown>a {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
}

.nav-dropdown>a i {
    font-size: 0.75rem;
    transition: transform 0.25s ease;
}

.nav-dropdown:hover>a i {
    transform: rotate(180deg);
}

.dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    transform: translateX(0);
    background: white;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    padding: 8px;
    min-width: 180px;
    list-style: none;
    opacity: 0;
    visibility: hidden;
    transition: all 0.25s cubic-bezier(0.32, 0.72, 0, 1);
    z-index: 1000;
}

.nav-dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(0) translateY(0);
}

.dropdown-menu li {
    margin: 0;
}

.dropdown-menu li a {
    display: block !important;
    padding: 10px 16px !important;
    border-radius: 8px !important;
    font-size: 0.9rem !important;
    color: #374151 !important;
    transition: all 0.2s ease !important;
    white-space: nowrap;
}

.dropdown-menu li a:hover {
    background: rgba(59, 130, 246, 0.1) !important;
    color: #3B82F6 !important;
}

.dropdown-menu li a::after {
    display: none !important;
}

/* Mobile Menu Section */
.mobile-menu-section {
    margin: 16px 0;
    padding: 16px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.mobile-menu-section-title {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.5);
    padding: 0 24px 12px;
}

.mobile-menu-section .mobile-menu-link {
    padding-left: 32px;
}

/* ============================================
   EV STUDIO / TOOLS PAGE
   ============================================ */

.tools-hero-section {
    min-height: 60vh;
    background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 140px 20px 80px;
    position: relative;
    overflow: hidden;
}

.tools-hero-section::before {
    content: '';
    position: absolute;
    width: 800px;
    height: 800px;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.15) 0%, transparent 70%);
    top: -200px;
    right: -200px;
    border-radius: 50%;
    pointer-events: none;
}

.tools-hero-content {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.tools-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 20px;
    background: rgba(59, 130, 246, 0.15);
    border: 1px solid rgba(59, 130, 246, 0.3);
    border-radius: 100px;
    color: #93C5FD;
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 24px;
}

.tools-hero-title {
    font-size: clamp(2.5rem, 6vw, 4rem);
    font-weight: 800;
    color: white;
    margin: 0 0 20px;
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.tools-hero-subtitle {
    font-size: 1.25rem;
    color: #94A3B8;
    margin: 0;
    line-height: 1.6;
}

/* Tools Grid */
.tools-grid-section {
    padding: 80px 20px;
    background: var(--bg-light);
}

.tools-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 28px;
    max-width: 1200px;
    margin: 0 auto;
}

.tool-card {
    background: white;
    border-radius: 20px;
    padding: 32px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.04);
    transition: all 0.3s cubic-bezier(0.32, 0.72, 0, 1);
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    position: relative;
}

.tool-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 48px rgba(59, 130, 246, 0.15);
    border-color: rgba(59, 130, 246, 0.2);
}

.tool-card-disabled {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}

.tool-card-badge {
    position: absolute;
    top: 20px;
    right: 20px;
    padding: 4px 12px;
    background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
    color: white;
    font-size: 0.75rem;
    font-weight: 700;
    border-radius: 100px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.tool-card-icon {
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.tool-card-icon i {
    font-size: 1.75rem;
    color: white;
}

.tool-card-disabled .tool-card-icon {
    background: linear-gradient(135deg, #9CA3AF 0%, #6B7280 100%);
}

.tool-card-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #111827;
    margin: 0 0 12px;
    letter-spacing: -0.015em;
}

.tool-card-description {
    font-size: 0.9375rem;
    color: #6B7280;
    margin: 0 0 20px;
    line-height: 1.6;
    flex-grow: 1;
}

.tool-card-features {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}

.tool-feature-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: #F3F4F6;
    border-radius: 6px;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #4B5563;
}

.tool-feature-tag i {
    font-size: 0.75rem;
    color: #10B981;
}

.tool-card-disabled .tool-feature-tag i {
    color: #9CA3AF;
}

.tool-card-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%);
    border-radius: 12px;
    font-size: 0.9375rem;
    font-weight: 600;
    color: #2563EB;
    transition: all 0.25s ease;
}

.tool-card:hover .tool-card-cta {
    background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);
    color: white;
}

.tool-card-cta i {
    transition: transform 0.25s ease;
}

.tool-card:hover .tool-card-cta i {
    transform: translateX(4px);
}

@media (max-width: 968px) {
    .tools-hero-section {
        padding: 120px 16px 60px;
    }

    .tools-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   КАЛЬКУЛЯТОР МАРКЕТПЛЕЙСОВ
   ============================================ */

.calculator-section {
    min-height: 100vh;
    background: var(--bg-light);
    padding: 140px 20px 80px;
}

.calculator-header {
    text-align: center;
    margin-bottom: 48px;
}

.calculator-title {
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 800;
    color: #111827;
    margin: 0 0 16px;
    letter-spacing: -0.02em;
}

.calculator-subtitle {
    font-size: 1.125rem;
    color: #6B7280;
    margin: 0;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* Переключатель маркетплейсов */
.marketplace-switcher {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-bottom: 48px;
    flex-wrap: wrap;
}

.marketplace-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 28px;
    background: white;
    border: 2px solid #E5E7EB;
    border-radius: 16px;
    font-size: 1rem;
    font-weight: 600;
    color: #4B5563;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.32, 0.72, 0, 1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.marketplace-btn:hover {
    border-color: #3B82F6;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(59, 130, 246, 0.15);
}

.marketplace-btn.active {
    background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);
    color: white;
    border-color: #2563EB;
    box-shadow: 0 8px 32px rgba(59, 130, 246, 0.25);
}

.marketplace-logo {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}

/* Основной блок калькулятора */
.calculator-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
}

@media (max-width: 968px) {
    .calculator-wrapper {
        grid-template-columns: 1fr;
    }
}

/* Панели */
.calculator-input-panel,
.calculator-results-panel {
    background: white;
    border-radius: 24px;
    padding: 32px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.04);
}

.panel-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #111827;
    margin: 0 0 28px;
    letter-spacing: -0.015em;
}

/* Группа ввода */
.calc-input-group {
    margin-bottom: 24px;
}

.calc-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9375rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 10px;
}

.calc-label i {
    color: #3B82F6;
    font-size: 0.95rem;
}

.calc-select,
.calc-input {
    width: 100%;
    padding: 14px 16px;
    border: 2px solid #E5E7EB;
    border-radius: 12px;
    font-size: 1rem;
    color: #111827;
    font-family: inherit;
    transition: all 0.2s ease;
    background: #F9FAFB;
}

.calc-select:focus,
.calc-input:focus {
    outline: none;
    border-color: #3B82F6;
    background: white;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
}

.calc-input-wrapper {
    position: relative;
}

.calc-input-suffix {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1rem;
    font-weight: 600;
    color: #6B7280;
    pointer-events: none;
}

.calc-input-wrapper .calc-input {
    padding-right: 48px;
}

.calc-hint {
    display: block;
    font-size: 0.8125rem;
    color: #9CA3AF;
    margin-top: 6px;
}

/* Доп. параметры */
.calc-advanced-toggle {
    margin: 28px 0 20px;
}

.calc-advanced-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: #F3F4F6;
    border: none;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 600;
    color: #4B5563;
    cursor: pointer;
    transition: all 0.2s ease;
    width: 100%;
    justify-content: center;
}

.calc-advanced-btn:hover {
    background: #E5E7EB;
}

.calc-advanced-btn i {
    transition: transform 0.25s ease;
}

.calc-advanced-params {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #E5E7EB;
}

/* Кнопка расчёта */
.calc-submit-btn {
    width: 100%;
    padding: 16px 24px;
    background: linear-gradient(135deg, #10B981 0%, #059669 100%);
    border: none;
    border-radius: 14px;
    font-size: 1.0625rem;
    font-weight: 700;
    color: white;
    cursor: pointer;
    margin-top: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.25s cubic-bezier(0.32, 0.72, 0, 1);
    box-shadow: 0 4px 16px rgba(16, 185, 129, 0.25);
}

.calc-submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(16, 185, 129, 0.35);
}

.calc-submit-btn:active {
    transform: translateY(0);
}

/* Empty State */
.calc-empty-state {
    text-align: center;
    padding: 80px 20px;
    color: #9CA3AF;
}

.calc-empty-state i {
    font-size: 4rem;
    margin-bottom: 20px;
    opacity: 0.3;
}

.calc-empty-state p {
    font-size: 1rem;
    margin: 0;
}

/* Результаты */
.calc-results-breakdown {
    animation: resultsAppear 0.4s cubic-bezier(0.32, 0.72, 0, 1) forwards;
}

@keyframes resultsAppear {
    from {
        opacity: 0;
        transform: translateY(16px);
    }

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

.calc-result-main {
    text-align: center;
    padding: 32px 24px;
    background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%);
    border-radius: 20px;
    margin-bottom: 28px;
    border: 1px solid rgba(59, 130, 246, 0.15);
}

.calc-result-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: #6B7280;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 8px;
}

.calc-result-value {
    font-size: 3rem;
    font-weight: 800;
    font-family: 'Orbitron', monospace;
    letter-spacing: -0.02em;
    margin-bottom: 8px;
}

.calc-result-value.positive {
    color: #10B981;
}

.calc-result-value.negative {
    color: #EF4444;
}

.calc-result-badge {
    display: inline-flex;
    padding: 6px 16px;
    border-radius: 100px;
    font-size: 0.9375rem;
    font-weight: 700;
    font-family: 'Orbitron', monospace;
}

.calc-result-badge.badge-success {
    background: rgba(16, 185, 129, 0.1);
    color: #059669;
}

.calc-result-badge.badge-danger {
    background: rgba(239, 68, 68, 0.1);
    color: #DC2626;
}

/* Список расходов */
.calc-expense-list {
    margin-bottom: 24px;
}

.calc-expense-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    background: #F9FAFB;
    border-radius: 12px;
    margin-bottom: 10px;
    transition: background 0.2s ease;
}

.calc-expense-item:hover {
    background: #F3F4F6;
}

.expense-label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9375rem;
    font-weight: 500;
    color: #4B5563;
}

.expense-label i {
    width: 20px;
    text-align: center;
    color: #9CA3AF;
    font-size: 0.9rem;
}

.expense-value {
    font-size: 1rem;
    font-weight: 700;
    color: #111827;
    font-family: 'Orbitron', monospace;
}

/* ROI блок */
.calc-roi-block {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
    border-radius: 16px;
    border: 1px solid rgba(245, 158, 11, 0.2);
}

.roi-label {
    font-size: 1.125rem;
    font-weight: 700;
    color: #92400E;
    letter-spacing: 0.02em;
}

.roi-value {
    font-size: 1.5rem;
    font-weight: 800;
    font-family: 'Orbitron', monospace;
}

.roi-value.positive {
    color: #047857;
}

.roi-value.negative {
    color: #DC2626;
}

@media (max-width: 968px) {
    .calculator-section {
        padding: 120px 16px 60px;
    }

    .marketplace-switcher {
        gap: 10px;
    }

    .marketplace-btn {
        padding: 12px 20px;
        font-size: 0.9rem;
    }

    .calculator-input-panel,
    .calculator-results-panel {
        padding: 24px;
    }

    .calc-result-value {
        font-size: 2.25rem;
    }
}


/* =================================================================
   FINAL OVERRIDES - ANALYTICS SLIDE & NAVIGATION (WHITE THEME)
   ================================================================= */

/* 1. Navigation Tabs — палитра блока «Что вы получаете» + калькуляторный шрифт */
.carousel-nav-item {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    padding: 12px 20px !important;
    gap: 0 !important;
    min-width: auto !important;
}

.carousel-nav-item span,
.carousel-nav-item .nav-label {
    font-family: 'Orbitron', 'Consolas', monospace !important;
    font-size: 1.05rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.04em !important;
    color: #9CA3AF !important;
    transition: all 0.3s ease !important;
}

/* Hover — светлый оттенок как в блоке выше */
.carousel-nav-item:hover span,
.carousel-nav-item:hover .nav-label {
    color: #93C5FD !important;
    transform: translateY(-1px);
}

/* Active — градиент в палитре блока «Что вы получаете» (синий → голубой) */
.carousel-nav-item.active span,
.carousel-nav-item.active .nav-label {
    background: linear-gradient(to bottom right, #3B82F6, #93C5FD) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
}

/* Hide any residual icons if JS didn't catch them */
.carousel-nav-item i,
.carousel-nav-item .nav-icon {
    display: none !important;
}

/* Slide 4 (Analytics) — тот же тёмный фон, плашка белая */
.solution-slide[data-slide="4"] .ui-mock-card {
    background: #ffffff !important;
    color: #1F2937 !important;
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05),
        0 12px 28px -8px rgba(0, 0, 0, 0.1),
        0 0 0 1px rgba(0, 0, 0, 0.04) !important;
}

/* Fix internal elements of the mock card that were forced to white-on-dark */
.solution-slide[data-slide="4"] .ui-mock-card .widget-label {
    color: #6B7280 !important;
}

.solution-slide[data-slide="4"] .ui-mock-card div[style*="color:#111"] {
    color: #111 !important;
    /* Keep distinct black headers inside card */
}

/* Теги на слайде 4 — тот же стиль: белый текст, синие иконки */
.solution-slide[data-slide="4"] .solution-tags .solution-tag {
    background: rgba(255, 255, 255, 0.12) !important;
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

.solution-slide[data-slide="4"] .solution-tags .solution-tag i {
    color: var(--placard-blue) !important;
}

.solution-slide[data-slide="4"] .solution-tags .solution-tag.active {
    background: rgba(255, 255, 255, 0.2) !important;
    color: #fff !important;
    border-color: rgba(37, 99, 235, 0.4) !important;
    box-shadow: none !important;
}

.solution-slide[data-slide="4"] .solution-tags .solution-tag.active i {
    color: var(--placard-blue-light) !important;
}

/* ============================================== */
/* SERVICE HERO - Premium Landing Block */
/* ============================================== */

.sv-hero {
    position: relative;
    min-height: 100vh;
    padding: 100px 24px 60px;
    background: linear-gradient(180deg, #F8FAFC 0%, #EEF2FF 50%, #F8FAFC 100%);
    overflow: hidden;
    display: flex;
    align-items: center;
}

/* Animated Background */
.sv-hero-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.sv-hero-gradient {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(37, 99, 221, 0.08), transparent);
}

.sv-hero-mesh {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(37, 99, 221, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(37, 99, 221, 0.03) 1px, transparent 1px);
    background-size: 60px 60px;
    opacity: 0.5;
}

.sv-hero-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
}

.sv-hero-orb--1 {
    top: 10%;
    right: 20%;
    width: 400px;
    height: 400px;
    background: rgba(37, 99, 221, 0.12);
    animation: float-smooth 12s ease-in-out infinite;
}

.sv-hero-orb--2 {
    bottom: 10%;
    left: 10%;
    width: 300px;
    height: 300px;
    background: rgba(16, 185, 129, 0.08);
    animation: float-smooth 15s ease-in-out infinite reverse;
}

/* Container */
.sv-hero-container {
    position: relative;
    z-index: 10;
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 60px;
    align-items: center;
}

/* Content */
.sv-hero-content {
    position: relative;
    padding-top: 40px;
}

.sv-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(37, 99, 221, 0.15);
    border-radius: 100px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #2563EB;
    margin-bottom: 28px;
    backdrop-filter: blur(8px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}

.sv-hero-badge-dot {
    width: 8px;
    height: 8px;
    background: linear-gradient(135deg, #2563EB 0%, #10B981 100%);
    border-radius: 50%;
    animation: pulse 2s ease-in-out infinite;
}

.sv-hero-title {
    font-size: clamp(2.5rem, 5vw, 3.75rem);
    font-weight: 700;
    line-height: 1.15;
    color: #0F172A;
    margin-bottom: 24px;
    letter-spacing: -0.03em;
}

.sv-hero-title-line {
    display: block;
    opacity: 0;
    transform: translateY(20px);
    animation: sv-title-reveal 0.8s ease-out forwards;
}

.sv-hero-title-line:nth-child(1) {
    animation-delay: 0.1s;
}

.sv-hero-title-line:nth-child(3) {
    animation-delay: 0.3s;
}

@keyframes sv-title-reveal {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.sv-hero-title-accent {
    display: block;
    background: linear-gradient(135deg, #2563EB 0%, #7C3AED 50%, #10B981 100%);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradient-shift 5s ease-in-out infinite, sv-title-reveal 0.8s ease-out 0.2s forwards;
    opacity: 0;
    transform: translateY(20px);
}

/* gradient-shift: duplicate removed — see line 156 */

.sv-hero-subtitle {
    font-size: 1.15rem;
    color: #64748B;
    line-height: 1.7;
    margin-bottom: 32px;
    max-width: 480px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    opacity: 0;
    animation: sv-fade-in 0.6s ease-out 0.4s forwards;
}

.sv-hero-subtitle-icon {
    flex-shrink: 0;
    color: #10B981;
    font-size: 1.1rem;
    margin-top: 2px;
}

@keyframes sv-fade-in {
    to {
        opacity: 1;
    }
}

/* Trust Stats */
.sv-hero-stats {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    opacity: 0;
    animation: sv-fade-in 0.6s ease-out 0.7s forwards;
}

.sv-hero-stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sv-hero-stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: #0F172A;
    letter-spacing: -0.02em;
}

.sv-hero-stat-label {
    font-size: 0.85rem;
    color: #64748B;
    font-weight: 500;
}

.sv-hero-stat-divider {
    width: 1px;
    height: 40px;
    background: rgba(0, 0, 0, 0.08);
}

/* Chips */
.sv-hero-chips {
    display: flex;
    gap: 12px;
    margin-bottom: 32px;
    flex-wrap: wrap;
}

.sv-chip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 24px;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 100px;
    font-size: 0.95rem;
    font-weight: 600;
    color: #475569;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.32, 0.72, 0, 1);
    backdrop-filter: blur(12px);
}

.sv-chip:hover {
    background: #fff;
    border-color: rgba(59, 130, 246, 0.25);
    color: #2563EB;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(59, 130, 246, 0.1);
}

.sv-chip--active {
    background: linear-gradient(135deg, #EEF2FF 0%, #E0E7FF 50%, #DBEAFE 100%);
    border: 1px solid rgba(99, 102, 241, 0.2);
    color: #4338CA;
    box-shadow: 0 4px 16px rgba(99, 102, 241, 0.15);
}

.sv-chip--active:hover {
    background: linear-gradient(135deg, #E0E7FF 0%, #C7D2FE 50%, #BFDBFE 100%);
    color: #3730A3;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(99, 102, 241, 0.2);
}

.sv-chip i {
    font-size: 0.9rem;
}

/* CTA */
.sv-hero-cta {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sv-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 18px 36px;
    background: linear-gradient(135deg, #6366F1 0%, #4F46E5 50%, #4338CA 100%);
    border: none;
    border-radius: 16px;
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.32, 0.72, 0, 1);
    box-shadow: 0 8px 24px rgba(99, 102, 241, 0.35);
    width: fit-content;
    position: relative;
    overflow: hidden;
}

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

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

.sv-btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 40px rgba(99, 102, 241, 0.45);
}

.sv-btn-primary i {
    transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1);
}

.sv-btn-primary:hover i {
    transform: translateX(5px);
}

.sv-hero-hint {
    font-size: 0.85rem;
    color: #94A3B8;
    display: flex;
    align-items: center;
    gap: 8px;
}

.sv-hero-hint i {
    font-size: 0.9rem;
    color: #10B981;
}

/* CTA Buttons Row */
.sv-hero-cta-buttons {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

/* Demo Button */
.sv-btn-demo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 18px 28px;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 16px;
    font-size: 1rem;
    font-weight: 600;
    color: #374151;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
}

.sv-btn-demo:hover {
    background: #fff;
    border-color: rgba(37, 99, 221, 0.3);
    color: #2563EB;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.sv-btn-demo i {
    font-size: 1.1rem;
    color: #2563EB;
}

/* Hero Visual - Horizontal Photo */
.sv-hero-visual {
    position: relative;
    opacity: 0;
    animation: sv-visual-reveal 1s ease-out 0.3s forwards;
}

@keyframes sv-visual-reveal {
    to {
        opacity: 1;
    }
}

/* ============================================== */
/* SOFT GLOW ANIMATION - Minimal & Elegant */
/* ============================================== */

.sv-orbit-system {
    position: absolute;
    inset: -60px;
    pointer-events: none;
    z-index: 1;
    overflow: visible;
}

/* Hide old orbit elements */
.sv-orbit,
.sv-orbit-dot {
    display: none;
}

/* Aurora Glow - мягкое центральное свечение */
.sv-aurora-glow {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 60% 50% at 50% 45%, rgba(59, 130, 246, 0.15), transparent 65%),
        radial-gradient(ellipse 40% 35% at 65% 55%, rgba(16, 185, 129, 0.08), transparent 55%);
    animation: sv-aurora-breathe 8s cubic-bezier(0.32, 0.72, 0, 1) infinite;
}

@keyframes sv-aurora-breathe {

    0%,
    100% {
        opacity: 0.5;
        transform: scale(0.97);
    }

    50% {
        opacity: 0.85;
        transform: scale(1.03);
    }
}

/* Gradient Ring - тонкий, вращающийся */
.sv-gradient-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 108%;
    height: 108%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 1px solid rgba(59, 130, 246, 0.08);
    background: conic-gradient(from 0deg,
            rgba(59, 130, 246, 0.06) 0deg,
            rgba(16, 185, 129, 0.04) 90deg,
            rgba(139, 92, 246, 0.05) 180deg,
            rgba(59, 130, 246, 0.06) 270deg,
            rgba(16, 185, 129, 0.04) 360deg);
    animation: sv-ring-rotate 50s linear infinite;
    opacity: 0.6;
}

@keyframes sv-ring-rotate {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

/* Soft Morphing Blobs - органичные формы */
.sv-morph {
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    opacity: 0.3;
    transition: all 1.2s cubic-bezier(0.32, 0.72, 0, 1);
}

.sv-morph--1 {
    top: 8%;
    right: 8%;
    width: 140px;
    height: 140px;
    background: rgba(59, 130, 246, 0.45);
    animation: sv-morph-1 12s cubic-bezier(0.32, 0.72, 0, 1) infinite;
}

.sv-morph--2 {
    bottom: 12%;
    left: 8%;
    width: 120px;
    height: 120px;
    background: rgba(139, 92, 246, 0.35);
    animation: sv-morph-2 15s cubic-bezier(0.32, 0.72, 0, 1) infinite;
}

.sv-morph--3 {
    top: 48%;
    right: 3%;
    width: 100px;
    height: 100px;
    background: rgba(16, 185, 129, 0.3);
    animation: sv-morph-3 18s cubic-bezier(0.32, 0.72, 0, 1) infinite;
}

@keyframes sv-morph-1 {

    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }

    30% {
        transform: translate(-15px, 10px) scale(1.08);
    }

    60% {
        transform: translate(-8px, 18px) scale(0.95);
    }
}

@keyframes sv-morph-2 {

    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }

    40% {
        transform: translate(20px, -8px) scale(1.1);
    }

    70% {
        transform: translate(12px, -15px) scale(0.98);
    }
}

@keyframes sv-morph-3 {

    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }

    35% {
        transform: translate(-12px, -15px) scale(1.12);
    }

    65% {
        transform: translate(-6px, -22px) scale(1.02);
    }
}

/* ============================================== */
/* STAR SPARKLES - Apple-style мерцающие звёзды */
/* ============================================== */

.sv-sparkle {
    position: absolute;
    width: 3px;
    height: 3px;
    background: #fff;
    border-radius: 50%;
    box-shadow:
        0 0 6px 2px rgba(255, 255, 255, 0.8),
        0 0 12px 4px rgba(59, 130, 246, 0.4);
    animation: sv-star-twinkle 4s ease-in-out infinite;
}

/* Звезда 1 - крупная */
.sv-sparkle--1 {
    top: 12%;
    left: 12%;
    width: 5px;
    height: 5px;
    animation-delay: 0s;
}

/* Звезда 2 */
.sv-sparkle--2 {
    top: 25%;
    right: 8%;
    width: 4px;
    height: 4px;
    animation-delay: 1s;
}

/* Звезда 3 */
.sv-sparkle--3 {
    bottom: 20%;
    left: 6%;
    width: 4px;
    height: 4px;
    animation-delay: 2s;
}

/* Звезда 4 */
.sv-sparkle--4 {
    bottom: 35%;
    right: 6%;
    width: 3px;
    height: 3px;
    animation-delay: 3s;
}

@keyframes sv-star-twinkle {

    0%,
    100% {
        opacity: 0.2;
        transform: scale(0.8);
        box-shadow:
            0 0 4px 1px rgba(255, 255, 255, 0.5),
            0 0 8px 2px rgba(59, 130, 246, 0.2);
    }

    50% {
        opacity: 1;
        transform: scale(1.3);
        box-shadow:
            0 0 8px 3px rgba(255, 255, 255, 0.9),
            0 0 20px 6px rgba(59, 130, 246, 0.5);
    }
}

/* Subtle Hover - усиление при наведении */
.sv-hero-visual:hover .sv-aurora-glow {
    opacity: 0.95;
    transition: opacity 0.6s cubic-bezier(0.32, 0.72, 0, 1);
}

.sv-hero-visual:hover .sv-morph {
    opacity: 0.4;
}

.sv-hero-visual:hover .sv-sparkle {
    animation-duration: 2.5s;
}

/* Photo Shine Effect - минималистичный и редкий */
.sv-photo-shine {
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg,
            transparent 42%,
            rgba(255, 255, 255, 0.15) 47%,
            rgba(255, 255, 255, 0.25) 50%,
            rgba(255, 255, 255, 0.15) 53%,
            transparent 58%);
    background-size: 250% 100%;
    animation: sv-shine-sweep 12s cubic-bezier(0.32, 0.72, 0, 1) infinite;
    pointer-events: none;
    border-radius: 24px;
}

@keyframes sv-shine-sweep {

    0%,
    70% {
        background-position: 250% 0;
    }

    100% {
        background-position: -250% 0;
    }
}

/* ============================================== */
/* QUOTE CARD - Icon and Text Styles */
/* ============================================== */

.sv-quote-icon {
    color: #3B82F6;
    margin-bottom: 10px;
}

.sv-quote-icon svg {
    width: 24px;
    height: 24px;
    opacity: 0.5;
}

.sv-quote-text {
    font-size: 0.9rem;
    font-weight: 500;
    color: #374151;
    line-height: 1.5;
    margin: 0;
}

.sv-quote-text strong {
    font-weight: 700;
    color: #111827;
}

/* ============================================== */
/* MOBILE: Adapt Glow + Quote Card */
/* ============================================== */

@media (max-width: 768px) {
    .sv-photo-glow {
        display: block;
        width: 120%;
        height: 120%;
    }

    .sv-soft-glow {
        filter: blur(60px);
    }
}

.sv-hero-photo-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    border-radius: 24px;
    overflow: hidden;
    background: linear-gradient(135deg, #E0F2FE 0%, #DBEAFE 100%);
    box-shadow:
        0 24px 64px rgba(0, 0, 0, 0.15),
        0 0 0 1px rgba(59, 130, 246, 0.1);
    z-index: 2;
    opacity: 0;
    transform: translateY(20px) scale(0.98);
    animation: sv-photo-reveal 0.8s ease-out 0.3s forwards;
}

@keyframes sv-photo-reveal {
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Quote Card - Outside Photo Container */
.sv-hero-visual .sv-quote-card {
    position: absolute;
    bottom: 15%;
    right: -30px;
    background: #ffffff;
    border-radius: 18px;
    padding: 18px 22px;
    box-shadow:
        0 4px 6px -1px rgba(0, 0, 0, 0.05),
        0 12px 24px -4px rgba(0, 0, 0, 0.1),
        0 0 0 1px rgba(0, 0, 0, 0.02);
    max-width: 180px;
    z-index: 30;
    animation: sv-quote-float 5s ease-in-out infinite;
    opacity: 0;
    animation: sv-quote-appear 0.6s ease-out 1s forwards, sv-quote-float 5s ease-in-out 1.6s infinite;
}

@keyframes sv-quote-appear {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes sv-quote-float {

    0%,
    100% {
        transform: translateY(0);
    }

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

/* Tablet */
@media (max-width: 1024px) {
    .sv-hero-visual .sv-quote-card {
        right: -15px;
        bottom: 10%;
        max-width: 160px;
        padding: 14px 18px;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .sv-hero-subtitle {
        display: block;
        text-align: center;
    }

    .sv-hero-subtitle-icon {
        display: inline;
        margin-right: 6px;
        vertical-align: middle;
    }

    .sv-hero-photo-wrap {
        aspect-ratio: auto;
        background: transparent;
        overflow: hidden;
        max-height: 280px;
    }

    .sv-hero-photo {
        object-fit: cover;
        object-position: center top;
        width: 100%;
        height: 100%;
        max-height: 280px;
    }

    .sv-hero-visual .sv-quote-card {
        right: 12px;
        bottom: 12px;
        max-width: 140px;
        padding: 12px 14px;
        border-radius: 14px;
    }

    .sv-hero-visual .sv-quote-card .sv-quote-icon svg {
        width: 18px;
        height: 18px;
    }

    .sv-hero-visual .sv-quote-card .sv-quote-text {
        font-size: 0.7rem;
        line-height: 1.35;
    }

    .sv-orbit-system {
        display: block !important;
        transform: scale(1.3);
        transform-origin: center;
        inset: -60px;
        opacity: 1;
        z-index: 0;
    }

    .sv-aurora-glow {
        opacity: 1 !important;
        background:
            radial-gradient(ellipse 70% 60% at 50% 45%, rgba(59, 130, 246, 0.25), transparent 65%),
            radial-gradient(ellipse 50% 45% at 65% 55%, rgba(16, 185, 129, 0.15), transparent 55%) !important;
    }

    .sv-morph {
        display: block !important;
        opacity: 0.7 !important;
        filter: blur(50px) !important;
    }

    .sv-morph--1 {
        width: 160px !important;
        height: 160px !important;
        background: rgba(59, 130, 246, 0.55) !important;
    }

    .sv-morph--2 {
        width: 140px !important;
        height: 140px !important;
        background: rgba(139, 92, 246, 0.45) !important;
    }

    .sv-morph--3 {
        width: 120px !important;
        height: 120px !important;
        background: rgba(16, 185, 129, 0.4) !important;
    }
}

.sv-hero-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    transition: transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1), filter 0.6s ease;
}

/* При наведении — плавный зум */
.sv-hero-photo-wrap:hover .sv-hero-photo {
    transform: scale(1.05);
    filter: brightness(1.03);
}

/* Photo overlay removed - using shine effect instead */

/* Floating Cards */
.sv-float-card {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(16px);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
    animation: float-smooth 4s ease-in-out infinite;
    z-index: 20;
}

.sv-float-card--growth {
    top: 15%;
    right: -20px;
}

.sv-float-card--tasks {
    bottom: 20%;
    left: -20px;
    animation-delay: 2s;
}

.sv-float-icon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(37, 99, 221, 0.1);
    border-radius: 12px;
    color: #2563EB;
}

.sv-float-icon--green {
    background: rgba(16, 185, 129, 0.1);
    color: #10B981;
}

.sv-float-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sv-float-label {
    font-size: 0.75rem;
    color: #64748B;
}

.sv-float-value {
    font-size: 1.1rem;
    font-weight: 700;
    color: #0F172A;
}

/* Hero Responsive */
@media (max-width: 1024px) {
    .sv-hero-container {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .sv-hero-content {
        order: 1;
    }

    .sv-hero-visual {
        order: 2;
    }

    .sv-hero-photo-wrap {
        max-width: 600px;
        margin: 0 auto;
    }

    .sv-float-card--growth {
        top: 10%;
        right: 10%;
    }

    .sv-float-card--tasks {
        bottom: 15%;
        left: 5%;
    }
}

@media (max-width: 768px) {
    .sv-hero {
        padding: 100px 16px 50px;
        min-height: auto;
    }

    .sv-hero-title {
        font-size: 2rem;
    }

    .sv-hero-subtitle {
        font-size: 1rem;
        display: block;
        text-align: center;
    }

    .sv-hero-subtitle-icon {
        display: inline;
        margin-right: 6px;
        vertical-align: middle;
    }

    .sv-hero-chips {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
    }

    .sv-chip {
        width: auto;
        justify-content: center;
    }

    .sv-float-card {
        display: none;
    }

    .sv-btn-primary {
        width: 100%;
    }

    .sv-hero-stats {
        flex-wrap: wrap;
        gap: 16px;
        justify-content: center;
        text-align: center;
    }

    .sv-hero-stat-divider {
        display: none;
    }

    .sv-hero-stat {
        min-width: 80px;
    }
}

/* ============================================== */
/* PROCESS STEPS - Glassmorphism Cards */
/* ============================================== */

.sv-process {
    position: relative;
    padding: 100px 24px;
    background: linear-gradient(180deg, #F8FAFC 0%, #F1F5F9 100%);
    border-radius: 40px;
    overflow: hidden;
}

/* ============================================== */
/* PROCESS AMBIENT GLOW EFFECTS                   */
/* ============================================== */

.sv-process-glow {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    filter: blur(80px);
}

/* Left side - soft indigo/violet glow */
.sv-process-glow--1 {
    width: 280px;
    height: 280px;
    top: 10%;
    left: -60px;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.12) 0%, rgba(139, 92, 246, 0.06) 50%, transparent 70%);
    animation: svGlowPulse1 12s ease-in-out infinite;
}

/* Left side lower - cyan accent */
.sv-process-glow--2 {
    width: 200px;
    height: 200px;
    bottom: 15%;
    left: 20px;
    background: radial-gradient(circle, rgba(6, 182, 212, 0.08) 0%, rgba(59, 130, 246, 0.04) 50%, transparent 70%);
    animation: svGlowPulse2 15s ease-in-out infinite 3s;
}

/* Right side - purple/pink glow */
.sv-process-glow--3 {
    width: 260px;
    height: 260px;
    top: 5%;
    right: -40px;
    background: radial-gradient(circle, rgba(168, 85, 247, 0.1) 0%, rgba(236, 72, 153, 0.05) 50%, transparent 70%);
    animation: svGlowPulse3 14s ease-in-out infinite 1.5s;
}

/* Right side lower - blue accent */
.sv-process-glow--4 {
    width: 220px;
    height: 220px;
    bottom: 10%;
    right: 30px;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.09) 0%, rgba(99, 102, 241, 0.04) 50%, transparent 70%);
    animation: svGlowPulse4 16s ease-in-out infinite 5s;
}

/* Glow Animations - very subtle */
@keyframes svGlowPulse1 {
    0%, 100% {
        opacity: 0.6;
        transform: scale(1) translate(0, 0);
    }
    33% {
        opacity: 1;
        transform: scale(1.1) translate(10px, 15px);
    }
    66% {
        opacity: 0.7;
        transform: scale(0.95) translate(-5px, 10px);
    }
}

@keyframes svGlowPulse2 {
    0%, 100% {
        opacity: 0.5;
        transform: scale(1);
    }
    50% {
        opacity: 0.9;
        transform: scale(1.15) translate(15px, -10px);
    }
}

@keyframes svGlowPulse3 {
    0%, 100% {
        opacity: 0.5;
        transform: scale(1) translate(0, 0);
    }
    40% {
        opacity: 0.9;
        transform: scale(1.08) translate(-12px, 8px);
    }
    70% {
        opacity: 0.6;
        transform: scale(1.02) translate(5px, -5px);
    }
}

@keyframes svGlowPulse4 {
    0%, 100% {
        opacity: 0.4;
        transform: scale(1);
    }
    50% {
        opacity: 0.85;
        transform: scale(1.12) translate(-8px, 12px);
    }
}

/* Responsive - reduce size on smaller screens */
@media (max-width: 1200px) {
    .sv-process-glow {
        filter: blur(60px);
    }
    .sv-process-glow--1,
    .sv-process-glow--3 {
        width: 180px;
        height: 180px;
    }
    .sv-process-glow--2,
    .sv-process-glow--4 {
        width: 140px;
        height: 140px;
    }
}

@media (max-width: 768px) {
    .sv-process-glow {
        filter: blur(50px);
        opacity: 0.5;
    }
    .sv-process-glow--1,
    .sv-process-glow--3 {
        width: 120px;
        height: 120px;
    }
    .sv-process-glow--2,
    .sv-process-glow--4 {
        width: 100px;
        height: 100px;
    }
}

.sv-process-container {
    max-width: 1200px;
    margin: 0 auto;
}

.sv-process-header {
    text-align: center;
    margin-bottom: 64px;
}

.sv-process-eyebrow {
    display: inline-block;
    font-size: 0.85rem;
    font-weight: 600;
    color: #2563EB;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 16px;
}

.sv-process-title {
    font-size: clamp(1.75rem, 4vw, 2.75rem);
    font-weight: 700;
    color: #0F172A;
    margin-bottom: 16px;
    letter-spacing: -0.02em;
}

.sv-process-subtitle {
    font-size: 1.1rem;
    color: #64748B;
    max-width: 500px;
    margin: 0 auto;
}

/* ============================================== */
/* PROCESS PILLS - UI Tags Layout                 */
/* ============================================== */

.sv-process-board {
    display: flex;
    justify-content: center;
    padding: 0;
}

.sv-process-pills {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 18px;
    max-width: 1000px;
    margin: 0 auto;
}

.sv-process .sv-process-pills {
    opacity: 0;
    transform: translateY(18px);
    animation: svPillsIn 0.8s cubic-bezier(0.32, 0.72, 0, 1) 0.2s forwards;
}

/* ============================================== */
/* PROCESS CHIPS - Exact Reference Match         */
/* ============================================== */

.sv-process-grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    max-width: 900px;
    margin: 0 auto;
}

.sv-process-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 12px;
}

/* Base Chip */
.sv-chip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    background: #FFFFFF;
    border-radius: 100px;
    border: 1px solid rgba(226, 232, 240, 0.9);
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.08);
    font-size: 0.95rem;
    font-weight: 600;
    color: #1E293B;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.sv-chip:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.1);
}

/* Gradient Chip (Ask AI / Бриф) */
.sv-chip--gradient {
    background: linear-gradient(135deg, #FDB36B 0%, #E879F9 50%, #8B5CF6 100%);
    border: none;
    padding: 12px 20px;
    box-shadow: 0 8px 24px rgba(139, 92, 246, 0.3);
    border-radius: 20px;
    transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
}

.sv-chip--gradient:hover {
    transform: translateY(-6px);
    background: linear-gradient(135deg, #FDB36B 0%, #E879F9 50%, #8B5CF6 100%);
    box-shadow: 0 12px 30px rgba(139, 92, 246, 0.45);
    filter: none;
    color: #FFFFFF;
    opacity: 1;
}

.sv-chip--gradient:hover .sv-chip-text,
.sv-chip--gradient:hover .sv-chip-icon {
    color: #FFFFFF;
    opacity: 1;
    text-shadow: 0 2px 8px rgba(15, 23, 42, 0.3);
}

.sv-chip--gradient .sv-chip-text {
    color: #FFFFFF;
    font-weight: 700;
    font-size: 1rem;
}

.sv-chip--gradient .sv-chip-icon {
    color: #FFFFFF;
}

.sv-chip--lifted {
    position: relative;
    transform: translateY(-4px);
}

.sv-chip--lifted:hover {
    transform: translateY(-6px);
}

.sv-chip-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
}

.sv-chip-icon--gray {
    color: #94A3B8;
    font-size: 14px;
}

/* Avatar Chip (Ella M. / Ваш менеджер) */
.sv-chip--avatar {
    padding: 6px 14px 6px 6px;
    gap: 10px;
}

.sv-chip-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
}

.sv-chip-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sv-chip--avatar .sv-chip-text {
    font-weight: 700;
    color: #1E293B;
}

.sv-chip-close {
    font-size: 1.4rem;
    color: #CBD5E1;
    line-height: 1;
    font-weight: 300;
    margin-left: 2px;
}

/* Dashed Chip (Upload / Данные) */
.sv-chip--dashed {
    border: 2px dashed #CBD5E1;
    background: #FFFFFF;
    padding: 10px 18px;
}

.sv-chip--dashed .sv-chip-text {
    color: #64748B;
    font-weight: 600;
}

/* Filter Chip (Filter · 2 / Аудит) */
.sv-chip--filter {
    padding: 10px 12px 10px 16px;
    gap: 8px;
}

.sv-chip-badge {
    font-size: 0.8rem;
    font-weight: 700;
    color: #2563EB;
    margin-left: 2px;
}

.sv-chip-divider {
    width: 1px;
    height: 20px;
    background: #E2E8F0;
    margin: 0 4px;
}

/* Square Chip (Menu buttons) */
.sv-chip--square {
    width: 48px;
    height: 48px;
    padding: 0;
    border-radius: 14px;
    justify-content: center;
}

.sv-chip-lines {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 20px;
}

.sv-chip-lines span {
    height: 2px;
    background: #1E293B;
    border-radius: 1px;
}

.sv-chip-lines--left span:nth-child(1) { width: 20px; }
.sv-chip-lines--left span:nth-child(2) { width: 16px; }
.sv-chip-lines--left span:nth-child(3) { width: 20px; }

.sv-chip-lines--center span { width: 16px; margin: 0 auto; }

.sv-chip-lines--right span:nth-child(1) { width: 20px; margin-left: auto; }
.sv-chip-lines--right span:nth-child(2) { width: 16px; margin-left: auto; }
.sv-chip-lines--right span:nth-child(3) { width: 20px; margin-left: auto; }

/* Time Chip (30 mins) */
.sv-chip--time {
    padding: 10px 16px;
    gap: 6px;
}

.sv-chip-text--bold {
    font-weight: 700;
    color: #1E293B;
}

.sv-chip-text--light {
    font-weight: 500;
    color: #94A3B8;
}

.sv-chip-caret {
    width: 8px;
    height: 8px;
    border-right: 2px solid #CBD5E1;
    border-bottom: 2px solid #CBD5E1;
    transform: rotate(45deg);
    margin-left: 4px;
    margin-top: -2px;
}

/* CTA Chip (Book a Call / Запуск) */
.sv-chip--cta {
    background: linear-gradient(135deg, #FDB36B 0%, #E879F9 50%, #8B5CF6 100%);
    border: none;
    padding: 12px 24px;
    box-shadow: 0 8px 24px rgba(139, 92, 246, 0.35);
    border-radius: 100px;
    transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
}

.sv-chip--cta:hover {
    transform: translateY(-3px);
    background: linear-gradient(135deg, #FDB36B 0%, #E879F9 50%, #8B5CF6 100%);
    box-shadow: 0 12px 32px rgba(139, 92, 246, 0.5);
    filter: none;
    color: #FFFFFF;
    opacity: 1;
}

.sv-chip--cta:hover .sv-chip-text {
    color: #FFFFFF;
    opacity: 1;
    text-shadow: 0 2px 8px rgba(15, 23, 42, 0.3);
}

.sv-chip--cta .sv-chip-text {
    color: #FFFFFF;
    font-weight: 700;
    font-size: 0.95rem;
}

/* Online Chip */
.sv-chip--online {
    background: linear-gradient(135deg, #D9F99D 0%, #BBF7D0 100%);
    border: none;
    padding: 12px 20px;
}

.sv-chip--online .sv-chip-text {
    color: #15803D;
    font-weight: 700;
}

.sv-chip-dot {
    width: 8px;
    height: 8px;
    background: #22C55E;
    border-radius: 50%;
}

/* Progress Chip (In progress / В процессе) */
.sv-chip--progress {
    padding: 12px 20px;
}

.sv-chip--progress .sv-chip-text {
    color: #2563EB;
    font-weight: 700;
}

.sv-chip-ring {
    width: 18px;
    height: 18px;
    border: 2.5px dashed #60A5FA;
    border-radius: 50%;
}

/* Search Chip */
.sv-chip--search {
    background: #F1F5F9;
    padding: 8px 8px 8px 18px;
    gap: 14px;
    transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
}

.sv-chip--search:hover {
    transform: translateY(-2px);
    background: #FFFFFF;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.12);
}

.sv-chip--search .sv-chip-text {
    color: #94A3B8;
    font-weight: 600;
}

.sv-chip-search-btn {
    width: 36px;
    height: 36px;
    background: #FFFFFF;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #94A3B8;
    font-size: 14px;
    transition: color 0.25s ease, box-shadow 0.25s ease;
}

.sv-chip--search:hover .sv-chip-search-btn {
    color: #2563EB;
    box-shadow: 0 6px 12px rgba(37, 99, 235, 0.18);
}

/* Responsive */
@media (max-width: 768px) {
    .sv-process-grid {
        gap: 12px;
    }
    
    .sv-process-row {
        gap: 10px;
    }
    
    .sv-chip {
        padding: 9px 16px;
        font-size: 0.9rem;
    }
    
    .sv-chip--gradient {
        padding: 10px 16px;
    }
    
    .sv-chip--avatar {
        padding: 5px 12px 5px 5px;
    }
    
    .sv-chip-avatar {
        width: 32px;
        height: 32px;
    }
    
    .sv-chip--square {
        width: 44px;
        height: 44px;
    }
    
    .sv-chip--cta {
        padding: 10px 20px;
    }
}

.sv-pill {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 13px 20px;
    background: #FFFFFF;
    border-radius: 100px;
    border: 1px solid rgba(226, 232, 240, 0.8);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
    font-size: 0.95rem;
    color: #0F172A;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.sv-pill:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12);
}

.sv-process .sv-pill {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
    animation: svPillIn 0.7s cubic-bezier(0.32, 0.72, 0, 1) forwards;
}

.sv-process .sv-pill:nth-child(1) { animation-delay: 0.25s; }
.sv-process .sv-pill:nth-child(2) { animation-delay: 0.35s; }
.sv-process .sv-pill:nth-child(3) { animation-delay: 0.45s; }
.sv-process .sv-pill:nth-child(4) { animation-delay: 0.55s; }
.sv-process .sv-pill:nth-child(5) { animation-delay: 0.65s; }

.sv-process .sv-pill:hover {
    transform: translateY(-3px) scale(1.01);
    border-color: rgba(148, 163, 184, 0.8);
}

.sv-process .sv-pill:active {
    transform: translateY(-1px) scale(0.995);
}

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

@keyframes svPillIn {
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.sv-pill-icon {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(59, 130, 246, 0.12);
    color: #2563EB;
    font-size: 15px;
}

.sv-pill-icon--gradient {
    background: linear-gradient(135deg, #FDB36B 0%, #8B5CF6 100%);
    color: #FFFFFF;
    box-shadow: none;
}

.sv-pill-icon--blue {
    background: rgba(59, 130, 246, 0.16);
    color: #2563EB;
}

.sv-pill-icon--green {
    background: rgba(16, 185, 129, 0.16);
    color: #10B981;
}

.sv-pill-icon--light {
    background: rgba(148, 163, 184, 0.2);
    color: #64748B;
}

.sv-pill-icon--upload {
    background: rgba(148, 163, 184, 0.15);
    color: #64748B;
}

.sv-pill-icon--filter {
    background: rgba(148, 163, 184, 0.15);
    color: #64748B;
}

.sv-pill-avatar {
    width: 38px;
    height: 38px;
    border-radius: 999px;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #FFFFFF;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.12);
}

.sv-pill-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sv-pill-text {
    font-weight: 600;
    letter-spacing: -0.01em;
}

.sv-pill-sub {
    font-size: 0.82rem;
    color: #64748B;
    font-weight: 600;
    background: rgba(226, 232, 240, 0.6);
    padding: 6px 10px;
    border-radius: 999px;
}

.sv-pill--primary {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(219, 234, 254, 0.9) 100%);
    border-color: rgba(147, 197, 253, 0.7);
    box-shadow: 0 14px 32px rgba(59, 130, 246, 0.18);
}

.sv-pill--success {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(220, 252, 231, 0.9) 100%);
    border-color: rgba(134, 239, 172, 0.7);
}

.sv-pill--ghost {
    background: rgba(248, 250, 252, 0.9);
    border-style: dashed;
    border-color: rgba(148, 163, 184, 0.6);
    color: #475569;
}

.sv-pill--gradient {
    background: linear-gradient(135deg, #FDB36B 0%, #8B5CF6 100%);
    color: #FFFFFF;
    border: none;
    box-shadow: 0 8px 24px rgba(139, 92, 246, 0.35);
    padding: 13px 18px;
}

.sv-pill--gradient .sv-pill-text {
    color: #FFFFFF;
    font-weight: 700;
}

.sv-pill--avatar {
    background: #FFFFFF;
    padding: 7px 14px 7px 7px;
    gap: 10px;
}

.sv-pill--avatar .sv-pill-text {
    font-weight: 700;
    color: #0F172A;
    font-size: 0.95rem;
}

.sv-pill-close {
    font-size: 1.3rem;
    color: #CBD5E1;
    margin-left: 2px;
    line-height: 1;
    font-weight: 300;
}

.sv-pill--dashed {
    background: #FFFFFF;
    border: 2px dashed rgba(203, 213, 225, 0.7);
    color: #64748B;
    padding: 11px 18px;
}

.sv-pill--dashed .sv-pill-text {
    color: #64748B;
    font-weight: 600;
}

.sv-pill--filter {
    background: #FFFFFF;
    padding: 11px 14px 11px 16px;
    gap: 10px;
}

.sv-pill--filter .sv-pill-text {
    font-weight: 600;
    color: #0F172A;
}

.sv-pill-badge {
    font-size: 0.75rem;
    font-weight: 700;
    color: #2563EB;
    background: rgba(59, 130, 246, 0.15);
    padding: 4px 9px;
    border-radius: 999px;
    min-width: 20px;
    text-align: center;
}

.sv-pill--menu {
    gap: 10px;
}

.sv-pill-menu-lines {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: #FFFFFF;
    border: 1px solid rgba(226, 232, 240, 0.8);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 0 14px;
    gap: 5px;
}

.sv-pill-menu-lines span {
    width: 24px;
    height: 2.5px;
    background: #0F172A;
    border-radius: 2px;
}

.sv-pill-menu-lines--center {
    align-items: center;
}

.sv-pill-menu-lines--center span {
    width: 18px;
}

.sv-pill-menu-lines--right {
    align-items: flex-end;
}

.sv-pill-menu-lines--right span {
    width: 24px;
}

.sv-pill--time {
    background: #FFFFFF;
    gap: 6px;
    padding: 13px 18px;
}

.sv-pill--time .sv-pill-text {
    font-weight: 700;
    color: #0F172A;
    font-size: 0.95rem;
}

.sv-pill-caret {
    width: 8px;
    height: 8px;
    display: inline-block;
    border-right: 2px solid #CBD5E1;
    border-bottom: 2px solid #CBD5E1;
    transform: rotate(45deg);
    margin-left: 6px;
    margin-top: -2px;
}

.sv-pill--cta {
    background: linear-gradient(135deg, #FDB36B 0%, #8B5CF6 100%);
    color: #FFFFFF;
    border: none;
    padding: 13px 26px;
    box-shadow: 0 8px 28px rgba(139, 92, 246, 0.4);
}

.sv-pill--cta .sv-pill-text {
    color: #FFFFFF;
    font-weight: 700;
    font-size: 0.95rem;
}
.sv-pill-cta-badge {
    background: rgba(255, 255, 255, 0.25);
    color: #FFFFFF;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
}

.sv-pill--status {
    background: linear-gradient(135deg, #D9F99D 0%, #BBF7D0 100%);
    color: #15803D;
    border: none;
    padding: 13px 20px;
    box-shadow: 0 8px 24px rgba(34, 197, 94, 0.2);
}

.sv-pill--status .sv-pill-text {
    color: #15803D;
    font-weight: 700;
}

.sv-pill-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22C55E;
    box-shadow: none;
}

.sv-pill--progress {
    background: #FFFFFF;
    color: #2563EB;
    border: 1px solid rgba(226, 232, 240, 0.8);
    padding: 13px 20px;
}

.sv-pill--progress .sv-pill-text {
    color: #2563EB;
    font-weight: 700;
}

.sv-pill-progress-ring {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2.5px dashed #60A5FA;
    display: inline-block;
}

.sv-pill--search {
    background: linear-gradient(180deg, #F8FAFC 0%, #F1F5F9 100%);
    color: #64748B;
    padding: 13px 16px 13px 20px;
    border: 1px solid rgba(226, 232, 240, 0.7);
    gap: 12px;
}

.sv-pill--search .sv-pill-text {
    color: #94A3B8;
    font-weight: 600;
}

.sv-pill--square {
    padding: 0;
    min-width: 52px;
    width: 52px;
    height: 52px;
    justify-content: center;
    border-radius: 16px;
    background: #FFFFFF;
    border: 1px solid rgba(226, 232, 240, 0.8);
}

.sv-pill-icon--square {
    background: transparent;
    color: #94A3B8;
    width: 24px;
    height: 24px;
    font-size: 18px;
}

.sv-pill--menu {
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
}

.sv-pill--menu:hover {
    transform: none;
}

.sv-pill-text--light {
    color: #94A3B8;
    font-weight: 500;
}

.sv-pill-icon--search {
    background: #FFFFFF;
    color: #94A3B8;
    border-radius: 50%;
    width: 38px;
    height: 38px;
}

/* ============================================== */
/* SERVICES HEADER - Apple/Google Style          */
/* ============================================== */

.services-header {
    opacity: 0;
    transform: translateY(40px);
    animation: servicesHeaderAppear 0.8s cubic-bezier(0.32, 0.72, 0, 1) 0.2s forwards;
}

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

.services-header-eyebrow {
    margin-bottom: 20px;
    opacity: 0;
    animation: servicesEyebrowFade 0.6s cubic-bezier(0.32, 0.72, 0, 1) 0.4s forwards;
}

@keyframes servicesEyebrowFade {
    to {
        opacity: 1;
    }
}

.services-header-title {
    font-size: clamp(2.5rem, 6vw, 4rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.03em;
    margin-bottom: 24px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px 16px;
}

.services-title-word {
    display: inline-block;
    color: #111827;
    opacity: 0;
    transform: translateY(30px) blur(8px);
    animation: servicesWordReveal 0.7s cubic-bezier(0.32, 0.72, 0, 1) forwards;
}

.services-title-word:nth-child(1) {
    animation-delay: 0.5s;
}

.services-title-word:nth-child(2) {
    animation-delay: 0.65s;
}

.services-title-word:nth-child(3) {
    animation-delay: 0.8s;
}

@keyframes servicesWordReveal {
    to {
        opacity: 1;
        transform: translateY(0) blur(0);
    }
}

.services-title-accent {
    background: linear-gradient(135deg, #6366F1 0%, #A855F7 50%, #EC4899 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.services-header-subtitle {
    font-size: 1.15rem;
    color: #64748B;
    line-height: 1.7;
    max-width: 600px;
    margin: 0 auto;
    opacity: 0;
    transform: translateY(20px);
    animation: servicesSubtitleAppear 0.7s cubic-bezier(0.32, 0.72, 0, 1) 1s forwards;
}

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

/* Hover effect for the accent text */
.services-title-accent {
    transition: filter 0.4s ease;
}

.services-header:hover .services-title-accent {
    filter: brightness(1.15);
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .services-header-title {
        font-size: clamp(2rem, 8vw, 2.5rem);
        gap: 8px 12px;
    }

    .services-header-subtitle {
        font-size: 1rem;
    }

    .sv-process-pills {
        gap: 12px;
    }

    .sv-pill {
        width: 100%;
        justify-content: space-between;
    }
}

/* Steps Grid */
.sv-steps-grid {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 0;
}

.sv-step-card {
    flex: 1;
    max-width: 340px;
    padding: 32px 28px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 24px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.sv-step-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(37, 99, 221, 0.03) 0%, transparent 100%);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.sv-step-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 50px rgba(37, 99, 221, 0.12);
    border-color: rgba(37, 99, 221, 0.15);
}

.sv-step-card:hover::before {
    opacity: 1;
}

.sv-step-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
}

.sv-step-num {
    font-size: 0.8rem;
    font-weight: 700;
    color: #94A3B8;
    letter-spacing: 0.05em;
}

.sv-step-icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(37, 99, 221, 0.1) 0%, rgba(37, 99, 221, 0.05) 100%);
    border-radius: 16px;
    color: #2563EB;
    transition: all 0.4s ease;
}

.sv-step-icon i {
    font-size: 1.25rem;
}

.sv-step-icon--blue {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(59, 130, 246, 0.05) 100%);
    color: #3B82F6;
}

.sv-step-icon--green {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(16, 185, 129, 0.05) 100%);
    color: #10B981;
}

.sv-step-card:hover .sv-step-icon {
    transform: scale(1.1);
    box-shadow: 0 8px 24px rgba(37, 99, 221, 0.2);
}

.sv-step-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #0F172A;
    margin-bottom: 12px;
}

.sv-step-desc {
    font-size: 0.95rem;
    color: #64748B;
    line-height: 1.6;
    margin-bottom: 20px;
}

.sv-step-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: rgba(241, 245, 249, 0.8);
    border-radius: 100px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #64748B;
}

.sv-step-tag i {
    font-size: 0.75rem;
}

.sv-step-tag--success {
    background: rgba(16, 185, 129, 0.1);
    color: #10B981;
}

/* Connectors */
.sv-step-connector {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    flex-shrink: 0;
    position: relative;
}

.sv-connector-line {
    position: absolute;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, rgba(37, 99, 221, 0.1) 0%, rgba(37, 99, 221, 0.3) 50%, rgba(37, 99, 221, 0.1) 100%);
}

.sv-connector-arrow {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(37, 99, 221, 0.08);
    border-radius: 50%;
    color: #2563EB;
    z-index: 1;
}

.sv-connector-arrow i {
    font-size: 0.75rem;
}

/* Process Responsive */
@media (max-width: 900px) {
    .sv-steps-grid {
        flex-direction: column;
        align-items: center;
        gap: 24px;
    }

    .sv-step-card {
        max-width: 100%;
        width: 100%;
    }

    .sv-step-connector {
        width: 100%;
        height: 40px;
        transform: rotate(0);
    }

    .sv-connector-line {
        width: 2px;
        height: 100%;
    }

    .sv-connector-arrow {
        transform: rotate(90deg);
    }
}

@media (max-width: 768px) {
    .sv-process {
        padding: 60px 16px;
    }

    .sv-process-board {
        padding: 0;
    }

    .sv-process-pills {
        gap: 10px;
    }

    .sv-pill {
        padding: 11px 16px;
        font-size: 0.9rem;
    }

    .sv-pill--gradient {
        padding: 11px 14px;
    }

    .sv-pill--avatar {
        padding: 6px 12px 6px 6px;
    }

    .sv-pill--dashed {
        padding: 10px 16px;
    }

    .sv-pill--filter {
        padding: 10px 12px 10px 14px;
    }

    .sv-pill--time {
        padding: 11px 16px;
    }

    .sv-pill--cta {
        padding: 11px 20px;
    }

    .sv-pill--status {
        padding: 11px 18px;
    }

    .sv-pill--progress {
        padding: 11px 18px;
    }

    .sv-pill--search {
        padding: 11px 14px 11px 18px;
    }

    .sv-pill--square {
        min-width: 48px;
        width: 48px;
        height: 48px;
    }

    .sv-pill-menu-lines {
        width: 48px;
        height: 48px;
    }

    .sv-pill-avatar {
        width: 34px;
        height: 34px;
    }

    .sv-pill-icon {
        width: 34px;
        height: 34px;
    }
}

/* ============================================== */
/* WHY US - Bento Grid */
/* ============================================== */

.sv-why {
    position: relative;
    padding: 96px 24px;
    background:
        radial-gradient(120% 160% at 50% 0%, #f0f7ff 0%, #ffffff 42%, #f9fbff 100%),
        conic-gradient(from 210deg at 50% -10%, rgba(37, 99, 235, 0.08), transparent 35%, rgba(14, 165, 233, 0.08) 60%, transparent 80%);
    overflow: hidden;
    isolation: isolate;
}

.sv-why::before,
.sv-why::after {
    content: "";
    position: absolute;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    filter: blur(90px);
    opacity: 0.25;
    z-index: 0;
}

.sv-why::before {
    top: -140px;
    left: -100px;
    background: #c7ddff;
}

.sv-why::after {
    bottom: -160px;
    right: -60px;
    background: #c3f5ff;
}

.sv-why-container {
    max-width: 1140px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.sv-why-header {
    text-align: center;
    margin-bottom: 52px;
}

.sv-why-badges {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.sv-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    background: rgba(37, 99, 235, 0.12);
    color: #1f3b73;
    border: 1px solid rgba(37, 99, 235, 0.12);
    backdrop-filter: blur(8px);
}

.sv-pill--ghost {
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(15, 23, 42, 0.06);
    color: #475569;
}

.sv-pill--accent {
    background: rgba(37, 99, 235, 0.14);
    border-color: rgba(37, 99, 235, 0.18);
    color: #1d4ed8;
}

.sv-pill--soft {
    background: rgba(15, 23, 42, 0.04);
    border-color: rgba(15, 23, 42, 0.06);
    color: #475569;
}

.sv-why-eyebrow {
    display: inline-block;
    font-size: 0.85rem;
    font-weight: 700;
    color: #2563EB;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 10px;
}

.sv-why-title {
    font-size: clamp(1.9rem, 4vw, 2.6rem);
    font-weight: 800;
    color: #0F172A;
    margin-bottom: 14px;
    letter-spacing: -0.02em;
    line-height: 1.15;
}

.sv-why-title-accent {
    background: linear-gradient(135deg, #2563EB 0%, #0EA5E9 50%, #10B981 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.sv-why-subtitle {
    font-size: 1.05rem;
    color: #5b6575;
    max-width: 640px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Bento Grid */
.sv-bento-grid {
    display: grid;
    gap: 18px;
    grid-auto-flow: dense;
}

.sv-bento-grid--why {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.sv-bento-card {
    position: relative;
    padding: 26px;
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.94) 0%, rgba(249, 251, 255, 0.98) 100%);
    border: 1px solid rgba(15, 23, 42, 0.05);
    border-radius: 22px;
    box-shadow:
        0 14px 40px rgba(15, 23, 42, 0.08),
        0 2px 10px rgba(0, 0, 0, 0.04);
    transition: transform 0.45s cubic-bezier(0.33, 1, 0.68, 1), box-shadow 0.45s cubic-bezier(0.33, 1, 0.68, 1);
    overflow: hidden;
    isolation: isolate;
    animation: sv-card-rise 0.9s var(--ease-out-smooth) both;
}

.sv-bento-card::before {
    content: "";
    position: absolute;
    inset: -40%;
    background: conic-gradient(from 0deg,
            transparent 0deg,
            var(--card-accent-soft, rgba(37, 99, 235, 0.18)) 22deg,
            transparent 40deg,
            var(--card-accent-soft, rgba(37, 99, 235, 0.18)) 70deg,
            transparent 95deg,
            var(--card-accent-soft, rgba(37, 99, 235, 0.18)) 120deg,
            transparent 160deg,
            var(--card-accent-soft, rgba(37, 99, 235, 0.18)) 190deg,
            transparent 240deg,
            var(--card-accent-soft, rgba(37, 99, 235, 0.18)) 280deg,
            transparent 320deg,
            var(--card-accent-soft, rgba(37, 99, 235, 0.18)) 340deg,
            transparent 360deg);
    opacity: 0;
    transform: scale(0.6) rotate(0deg);
    transition: opacity 0.45s ease, transform 0.6s ease;
    mix-blend-mode: screen;
    z-index: 0;
}

.sv-bento-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.5), transparent 45%),
        radial-gradient(circle at 80% 0%, var(--card-accent-soft, rgba(37, 99, 235, 0.12)), transparent 40%);
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 0;
}

.sv-bento-card:hover {
    transform: translateY(-6px) scale(1.01);
    box-shadow:
        0 20px 48px rgba(15, 23, 42, 0.12),
        0 4px 16px rgba(15, 23, 42, 0.06);
}

.sv-bento-card:hover::before {
    opacity: 0.6;
    transform: scale(1) rotate(14deg);
}

.sv-bento-card:hover::after {
    opacity: 1;
}

.sv-bento-card--accent {
    --card-accent: #2563EB;
    --card-accent-soft: rgba(37, 99, 235, 0.12);
}

.sv-bento-card--blue {
    --card-accent: #2563EB;
    --card-accent-soft: rgba(37, 99, 235, 0.12);
}

.sv-bento-card--green {
    --card-accent: #10B981;
    --card-accent-soft: rgba(16, 185, 129, 0.12);
}

.sv-bento-card--purple {
    --card-accent: #8B5CF6;
    --card-accent-soft: rgba(139, 92, 246, 0.12);
}

.sv-bento-card--cyan {
    --card-accent: #06B6D4;
    --card-accent-soft: rgba(6, 182, 212, 0.12);
}

.sv-bento-card--amber {
    --card-accent: #F59E0B;
    --card-accent-soft: rgba(245, 158, 11, 0.14);
}

.sv-bento-card--dark {
    --card-accent: #0ea5e9;
    --card-accent-soft: rgba(14, 165, 233, 0.15);
    background: linear-gradient(145deg, #0b1021 0%, #0f172a 50%, #111827 100%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    color: #e5edff;
}

.sv-bento-card--dark .sv-bento-body h3,
.sv-bento-card--dark .sv-bento-body p,
.sv-bento-card--dark .sv-bento-meta .sv-pill {
    color: #e5edff;
}

.sv-bento-card--dark .sv-burst {
    opacity: 0.75;
}

.sv-bento-card--dark .sv-burst-core {
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.9) 0%, #7dd3fc 55%, #0ea5e9 100%);
    box-shadow:
        0 0 0 6px rgba(255, 255, 255, 0.12),
        0 18px 30px rgba(14, 165, 233, 0.4);
}

.sv-bento-card--dark .sv-spark {
    box-shadow: 0 0 14px rgba(125, 211, 252, 0.6);
}

.sv-bento-card--dark .sv-pill--soft {
    border-color: rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.05);
    color: #dbeafe;
}

.sv-bento-visual {
    position: relative;
    width: 68px;
    height: 68px;
    margin-bottom: 12px;
    z-index: 1;
}

.sv-burst {
    position: absolute;
    inset: -10px;
    border-radius: 50%;
    background: conic-gradient(from 0deg,
            transparent 0deg,
            var(--card-accent, #2563EB) 18deg,
            transparent 36deg,
            var(--card-accent, #2563EB) 60deg,
            transparent 90deg,
            var(--card-accent, #2563EB) 120deg,
            transparent 150deg,
            var(--card-accent, #2563EB) 190deg,
            transparent 230deg,
            var(--card-accent, #2563EB) 270deg,
            transparent 310deg,
            var(--card-accent, #2563EB) 340deg,
            transparent 360deg);
    opacity: 0.55;
    -webkit-mask: radial-gradient(circle, transparent 40%, #000 42%, #000 70%, transparent 72%);
    mask: radial-gradient(circle, transparent 40%, #000 42%, #000 70%, transparent 72%);
    animation: burst-spin 12s linear infinite;
}

.sv-burst-core {
    position: absolute;
    inset: 16px;
    border-radius: 42% 58% 48% 52%;
    background: radial-gradient(circle at 30% 30%, #ffffff 0%, var(--card-accent, #2563EB) 60%);
    box-shadow:
        0 0 0 6px var(--card-accent-soft, rgba(37, 99, 235, 0.12)),
        0 18px 30px rgba(15, 23, 42, 0.12);
    animation: burst-pulse 3.6s ease-in-out infinite;
}

.sv-spark {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--card-accent, #2563EB);
    box-shadow: 0 0 12px rgba(37, 99, 235, 0.35);
    animation: spark-float 4.5s ease-in-out infinite;
}

.sv-spark--one {
    top: 6px;
    right: 6px;
    animation-delay: 0.3s;
}

.sv-spark--two {
    bottom: 6px;
    left: 10px;
    animation-delay: 1.1s;
}

.sv-bento-body {
    margin-top: 16px;
    margin-bottom: 16px;
    position: relative;
    z-index: 1;
}

.sv-bento-body h3 {
    font-size: 1.15rem;
    font-weight: 800;
    color: #0F172A;
    letter-spacing: -0.01em;
    margin-bottom: 10px;
}

.sv-bento-body p {
    font-size: 0.97rem;
    color: #4b5563;
    line-height: 1.65;
}

.sv-bento-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    z-index: 1;
    position: relative;
}

.sv-bento-card--highlight {
    box-shadow:
        0 24px 72px rgba(14, 165, 233, 0.25),
        0 8px 30px rgba(14, 165, 233, 0.35);
    background: linear-gradient(145deg, #0ea5e9 0%, #2563eb 50%, #1d4ed8 100%);
}

@keyframes sv-card-rise {
    from {
        opacity: 0;
        transform: translateY(18px) scale(0.98);
    }

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

@keyframes burst-spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes burst-pulse {

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

    50% {
        transform: scale(1.08);
    }
}

@keyframes spark-float {

    0%,
    100% {
        transform: translateY(0);
        opacity: 0.9;
    }

    50% {
        transform: translateY(-6px);
        opacity: 0.55;
    }
}

/* Responsive */
@media (min-width: 961px) {
    .sv-bento-card--wide {
        grid-column: span 2;
    }
}

@media (max-width: 900px) {
    .sv-why {
        padding: 72px 18px;
    }

    .sv-bento-grid--why {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .sv-why-header {
        text-align: left;
    }

    .sv-why-badges {
        justify-content: flex-start;
    }

    .sv-bento-grid--why {
        grid-template-columns: 1fr;
    }
}

.sv-bento-card:nth-child(2) {
    animation-delay: 0.08s;
}

.sv-bento-card:nth-child(3) {
    animation-delay: 0.16s;
}

.sv-bento-card:nth-child(4) {
    animation-delay: 0.24s;
}

.sv-bento-card:nth-child(5) {
    animation-delay: 0.32s;
}

.sv-bento-card:nth-child(6) {
    animation-delay: 0.4s;
}

@media (prefers-reduced-motion: reduce) {

    .sv-bento-card,
    .sv-burst,
    .sv-burst-core,
    .sv-spark {
        animation: none !important;
    }

    .sv-bento-card:hover {
        transform: none;
    }
}

/* ========================================
   ANALYTICS PAGE STYLES
   ======================================== */

/* Analytics Page Layout */
.analytics-page {
    background: #F8FAFC;
}

.analytics-container {
    display: flex;
    min-height: 100vh;
    padding-top: 80px;
}

/* Analytics Sidebar */
.analytics-sidebar {
    width: 260px;
    background: #1E293B;
    color: #fff;
    position: fixed;
    left: 0;
    top: 80px;
    bottom: 0;
    display: flex;
    flex-direction: column;
    z-index: 100;
}

.analytics-sidebar .sidebar-header {
    padding: 24px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.analytics-sidebar .sidebar-logo {
    color: #fff;
    font-size: 1.25rem;
    font-weight: 600;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 10px;
}

.analytics-sidebar .sidebar-logo i {
    color: #2563EB;
}

.analytics-sidebar .sidebar-nav {
    flex: 1;
    padding: 16px 0;
}

.analytics-sidebar .sidebar-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 24px;
    color: #94A3B8;
    text-decoration: none;
    font-size: 0.95rem;
    transition: all 0.2s ease;
}

.analytics-sidebar .sidebar-link:hover {
    background: rgba(255,255,255,0.05);
    color: #fff;
}

.analytics-sidebar .sidebar-link.active {
    background: rgba(37, 99, 235, 0.15);
    color: #fff;
    border-left: 3px solid #2563EB;
}

.analytics-sidebar .sidebar-link i {
    width: 20px;
    text-align: center;
}

.analytics-sidebar .sidebar-footer {
    padding: 16px 0;
    border-top: 1px solid rgba(255,255,255,0.1);
}

/* Analytics Main Content */
.analytics-main {
    flex: 1;
    margin-left: 260px;
    padding: 24px 32px;
}

/* Analytics Header */
.analytics-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 24px;
}

.analytics-header-left {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}

.analytics-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: #1E293B;
    margin: 0;
}

.analytics-marketplace-filter {
    display: flex;
    gap: 8px;
}

.mp-filter-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border: 1px solid #E2E8F0;
    border-radius: 20px;
    background: #fff;
    color: #64748B;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.mp-filter-btn:hover {
    border-color: #CBD5E1;
    color: #1E293B;
}

.mp-filter-btn.active {
    background: #2563EB;
    border-color: #2563EB;
    color: #fff;
}

.mp-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.mp-dot.wb { background: #CB11AB; }
.mp-dot.ozon { background: #005BFF; }
.mp-dot.ym { background: #FFCC00; }

.analytics-header-right {
    display: flex;
    align-items: center;
    gap: 16px;
}

.analytics-period-selector {
    display: flex;
    background: #fff;
    border-radius: 12px;
    padding: 4px;
    border: 1px solid #E2E8F0;
}

.analytics-period-selector .period-btn {
    padding: 8px 16px;
    border: none;
    background: transparent;
    color: #64748B;
    font-size: 0.875rem;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.analytics-period-selector .period-btn:hover {
    color: #1E293B;
}

.analytics-period-selector .period-btn.active {
    background: #2563EB;
    color: #fff;
}

.analytics-refresh-btn {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    border: 1px solid #E2E8F0;
    background: #fff;
    color: #64748B;
    cursor: pointer;
    transition: all 0.2s ease;
}

.analytics-refresh-btn:hover {
    background: #F1F5F9;
    color: #2563EB;
}

/* Analytics Content Tabs */
.analytics-content {
    display: none;
}

.analytics-content.active {
    display: block;
    animation: fadeInUp 0.3s ease;
}

/* Analytics Stats Grid */
.analytics-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.analytics-stats-grid.compact {
    grid-template-columns: repeat(4, 1fr);
}

.analytics-stat-card {
    background: #fff;
    border-radius: 16px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    transition: all 0.2s ease;
}

.analytics-stat-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    transform: translateY(-2px);
}

.analytics-stat-card.warning {
    border-left: 4px solid #F59E0B;
}

.analytics-stat-card.danger {
    border-left: 4px solid #EF4444;
}

.stat-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}

.stat-icon.sales { background: #EFF6FF; color: #2563EB; }
.stat-icon.orders { background: #F0FDF4; color: #10B981; }
.stat-icon.avg { background: #FFFBEB; color: #F59E0B; }
.stat-icon.returns { background: #FEF2F2; color: #EF4444; }
.stat-icon.profit { background: #F0FDF4; color: #10B981; }
.stat-icon.margin { background: #EDE9FE; color: #8B5CF6; }

.stat-content {
    flex: 1;
}

.stat-label {
    font-size: 0.875rem;
    color: #64748B;
    margin-bottom: 4px;
}

.stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1E293B;
}

.stat-change {
    font-size: 0.8rem;
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.stat-change.positive { color: #10B981; }
.stat-change.negative { color: #EF4444; }
.stat-change.neutral { color: #64748B; }

/* Analytics Charts */
.analytics-charts-row {
    display: grid;
    gap: 24px;
    margin-bottom: 24px;
}

.analytics-charts-row.two-cols {
    grid-template-columns: repeat(2, 1fr);
}

.analytics-chart-card {
    background: #fff;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.analytics-chart-card.wide {
    grid-column: 1 / -1;
}

.chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.chart-header h3 {
    font-size: 1.1rem;
    font-weight: 600;
    color: #1E293B;
    margin: 0;
}

.chart-legend {
    display: flex;
    gap: 16px;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    color: #64748B;
}

.legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.legend-item.wb .legend-dot { background: #CB11AB; }
.legend-item.ozon .legend-dot { background: #005BFF; }
.legend-item.ym .legend-dot { background: #FFCC00; }

.chart-container {
    height: 300px;
    position: relative;
}

.chart-container.small {
    height: 220px;
}

/* Analytics Tables */
.analytics-table-card {
    background: #fff;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    margin-bottom: 24px;
}

.table-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.table-header h3 {
    font-size: 1.1rem;
    font-weight: 600;
    color: #1E293B;
    margin: 0;
}

.view-all-link {
    color: #2563EB;
    font-size: 0.875rem;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
}

.view-all-link:hover {
    text-decoration: underline;
}

.table-wrapper {
    overflow-x: auto;
}

.analytics-table {
    width: 100%;
    border-collapse: collapse;
}

.analytics-table th,
.analytics-table td {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid #F1F5F9;
}

.analytics-table th {
    font-size: 0.8rem;
    font-weight: 600;
    color: #64748B;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: #F8FAFC;
}

.analytics-table td {
    font-size: 0.9rem;
    color: #1E293B;
}

.analytics-table tr:hover {
    background: #F8FAFC;
}

.analytics-table code {
    background: #F1F5F9;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.85rem;
    color: #64748B;
}

.product-cell {
    display: flex;
    align-items: center;
    gap: 12px;
}

.product-thumb {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: linear-gradient(135deg, #E2E8F0, #CBD5E1);
}

.mp-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
}

.mp-badge.wb { background: #FDEEF9; color: #CB11AB; }
.mp-badge.ozon { background: #EEF4FF; color: #005BFF; }
.mp-badge.ym { background: #FFFBEB; color: #B45309; }

.status-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 500;
}

.status-badge.delivered { background: #D1FAE5; color: #059669; }
.status-badge.shipped { background: #DBEAFE; color: #2563EB; }
.status-badge.cancelled { background: #FEE2E2; color: #DC2626; }
.status-badge.pending { background: #FEF3C7; color: #D97706; }
.status-badge.critical { background: #FEE2E2; color: #DC2626; }
.status-badge.warning { background: #FEF3C7; color: #D97706; }

.positive { color: #10B981; }
.negative { color: #EF4444; }

/* Marketplace Connect Cards */
.connect-header {
    text-align: center;
    margin-bottom: 40px;
}

.connect-header h2 {
    font-size: 1.75rem;
    font-weight: 700;
    color: #1E293B;
    margin-bottom: 8px;
}

.connect-header p {
    color: #64748B;
    font-size: 1rem;
}

.backend-settings-card {
    background: #fff;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    margin-bottom: 32px;
    border: 1px solid #E2E8F0;
}

.backend-settings-header h3 {
    font-size: 1.1rem;
    font-weight: 600;
    color: #1E293B;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.backend-settings-header h3 i {
    color: #2563EB;
}

.backend-settings-header p {
    color: #64748B;
    font-size: 0.9rem;
    margin-bottom: 16px;
}

.backend-settings-body {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.backend-settings-footer {
    display: flex;
    gap: 12px;
    margin-top: 16px;
}

.backend-settings-footer .btn-primary,
.backend-settings-footer .btn-outline {
    padding: 10px 18px;
    border-radius: 10px;
    font-size: 0.9rem;
}

.marketplace-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 24px;
    margin-bottom: 40px;
}

.marketplace-connect-card {
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    transition: all 0.3s ease;
}

.marketplace-connect-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(0,0,0,0.12);
}

.mp-card-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 24px;
    background: linear-gradient(135deg, #F8FAFC, #EFF6FF);
}

.mp-logo {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: #fff;
}

.mp-logo.wb { background: linear-gradient(135deg, #CB11AB, #9B0589); }
.mp-logo.ozon { background: linear-gradient(135deg, #005BFF, #0047CC); }
.mp-logo.ym { background: linear-gradient(135deg, #FFCC00, #FFB800); color: #1E293B; }

.mp-info h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: #1E293B;
    margin: 0 0 4px;
}

.mp-status {
    font-size: 0.875rem;
    color: #EF4444;
}

.mp-status.connected {
    color: #10B981;
}

.mp-card-body {
    padding: 24px;
}

.mp-card-body .form-group {
    margin-bottom: 16px;
}

.mp-card-body .form-group:last-child {
    margin-bottom: 0;
}

.mp-card-body label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: #1E293B;
    margin-bottom: 8px;
}

.mp-card-body small {
    display: block;
    margin-top: 8px;
    color: #64748B;
    font-size: 0.8rem;
}

.mp-card-footer {
    display: flex;
    gap: 12px;
    padding: 24px;
    background: #F8FAFC;
}

.mp-card-footer .btn-primary,
.mp-card-footer .btn-outline {
    flex: 1;
    padding: 12px 20px;
    border-radius: 12px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.mp-card-footer .btn-primary {
    background: #2563EB;
    color: #fff;
    border: none;
}

.mp-card-footer .btn-primary:hover {
    background: #1D4ED8;
}

.mp-card-footer .btn-outline {
    background: #fff;
    color: #64748B;
    border: 1px solid #E2E8F0;
}

.mp-card-footer .btn-outline:hover {
    border-color: #2563EB;
    color: #2563EB;
}

/* Connected Stores */
.connected-stores-section {
    margin-bottom: 40px;
}

.connected-stores-section h3 {
    font-size: 1.1rem;
    font-weight: 600;
    color: #1E293B;
    margin-bottom: 16px;
}

.connected-stores-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.connected-store-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.store-logo {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    color: #fff;
}

.store-logo.wb { background: #CB11AB; }
.store-logo.ozon { background: #005BFF; }
.store-logo.ym { background: #FFCC00; color: #1E293B; }

.store-info {
    flex: 1;
}

.store-name {
    font-weight: 600;
    color: #1E293B;
}

.store-date {
    font-size: 0.8rem;
    color: #64748B;
}

.store-actions {
    display: flex;
    gap: 8px;
}

.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: 1px solid #E2E8F0;
    background: #fff;
    color: #64748B;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease;
}

.btn-icon:hover {
    background: #F1F5F9;
    color: #2563EB;
}

.nav-account-link {
    width: 40px;
    height: 40px;
    border: none;
    background: transparent;
    color: #64748B;
}

.nav-account-link:hover {
    background: transparent;
    color: #2563EB;
}

.nav-account-link i {
    font-size: 1.15rem;
}

.btn-icon.danger:hover {
    background: #FEE2E2;
    color: #DC2626;
    border-color: #FECACA;
}

/* Help Section */
.connect-help {
    background: #fff;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.connect-help h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.1rem;
    font-weight: 600;
    color: #1E293B;
    margin-bottom: 20px;
}

.connect-help h3 i {
    color: #2563EB;
}

.help-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
}

.help-tab {
    padding: 8px 20px;
    border: 1px solid #E2E8F0;
    border-radius: 20px;
    background: #fff;
    color: #64748B;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.help-tab:hover {
    border-color: #CBD5E1;
}

.help-tab.active {
    background: #2563EB;
    border-color: #2563EB;
    color: #fff;
}

.help-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
}

.help-step {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    background: #F8FAFC;
    border-radius: 12px;
}

.step-num {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #2563EB;
    color: #fff;
    font-size: 0.875rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.help-step p {
    margin: 0;
    color: #1E293B;
    font-size: 0.9rem;
    line-height: 1.5;
}

/* ABC Analysis */
.abc-summary-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 24px;
}

.abc-card {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 24px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.abc-letter {
    width: 60px;
    height: 60px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: 700;
}

.abc-card.category-a .abc-letter { background: #D1FAE5; color: #059669; }
.abc-card.category-b .abc-letter { background: #FEF3C7; color: #D97706; }
.abc-card.category-c .abc-letter { background: #FEE2E2; color: #DC2626; }

.abc-title {
    font-weight: 600;
    color: #1E293B;
    margin-bottom: 2px;
}

.abc-desc {
    font-size: 0.85rem;
    color: #64748B;
    margin-bottom: 4px;
}

.abc-count {
    font-size: 1.1rem;
    font-weight: 600;
    color: #2563EB;
}

.abc-filter-tabs {
    display: flex;
    gap: 8px;
}

.abc-tab {
    padding: 6px 16px;
    border: 1px solid #E2E8F0;
    border-radius: 16px;
    background: #fff;
    color: #64748B;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.abc-tab.active {
    background: #2563EB;
    border-color: #2563EB;
    color: #fff;
}

.abc-badge {
    display: inline-block;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    text-align: center;
    line-height: 24px;
}

.abc-badge.a { background: #D1FAE5; color: #059669; }
.abc-badge.b { background: #FEF3C7; color: #D97706; }
.abc-badge.c { background: #FEE2E2; color: #DC2626; }

.xyz-badge {
    display: inline-block;
    padding: 2px 8px;
    background: #F1F5F9;
    border-radius: 4px;
    font-size: 0.75rem;
    color: #64748B;
}

.recommendation {
    font-size: 0.85rem;
    color: #2563EB;
}

/* Products Toolbar */
.products-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
}

.search-box {
    position: relative;
    flex: 1;
    max-width: 400px;
}

.search-box i {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #94A3B8;
}

.search-box input {
    width: 100%;
    padding: 12px 16px 12px 44px;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    font-size: 0.9rem;
    background: #fff;
    transition: all 0.2s ease;
}

.search-box input:focus {
    outline: none;
    border-color: #2563EB;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.toolbar-actions {
    display: flex;
    gap: 12px;
}

.form-select {
    padding: 10px 16px;
    border: 1px solid #E2E8F0;
    border-radius: 10px;
    font-size: 0.9rem;
    background: #fff;
    cursor: pointer;
}

.btn-outline.small {
    padding: 10px 16px;
    font-size: 0.85rem;
}

/* Geography */
.geo-warehouses-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.warehouse-item {
    padding: 12px 0;
}

.warehouse-info {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
}

.warehouse-name {
    font-size: 0.9rem;
    color: #1E293B;
}

.warehouse-stock {
    font-size: 0.85rem;
    color: #64748B;
}

.warehouse-bar {
    height: 8px;
    background: #E2E8F0;
    border-radius: 4px;
    overflow: hidden;
}

.warehouse-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #2563EB, #3B82F6);
    border-radius: 4px;
}

/* Rating */
.rating {
    display: flex;
    align-items: center;
    gap: 4px;
    color: #F59E0B;
    font-weight: 500;
}

/* Empty State */
.analytics-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 400px;
    padding: 60px;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.empty-state-icon {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: linear-gradient(135deg, #EFF6FF, #DBEAFE);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
}

.empty-state-icon i {
    font-size: 3rem;
    color: #2563EB;
}

.analytics-empty-state h2 {
    font-size: 1.5rem;
    color: #1E293B;
    margin-bottom: 8px;
}

.analytics-empty-state p {
    color: #64748B;
    margin-bottom: 24px;
    max-width: 400px;
}

/* Toast Notifications */
.toast-container {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.toast {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    background: #1E293B;
    color: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.2);
    animation: slideInRight 0.3s ease;
}

.toast-success { background: #059669; }
.toast-error { background: #DC2626; }
.toast-info { background: #2563EB; }

.toast.fade-out {
    animation: fadeOutRight 0.3s ease forwards;
}

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

@keyframes fadeOutRight {
    to {
        opacity: 0;
        transform: translateX(100px);
    }
}

/* Responsive Analytics */
@media (max-width: 1024px) {
    .analytics-sidebar {
        width: 200px;
    }
    
    .analytics-main {
        margin-left: 200px;
    }
    
    .analytics-charts-row.two-cols {
        grid-template-columns: 1fr;
    }
    
    .abc-summary-cards {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .analytics-container {
        flex-direction: column;
    }
    
    .analytics-sidebar {
        position: relative;
        width: 100%;
        top: 0;
        flex-direction: row;
        overflow-x: auto;
    }
    
    .analytics-sidebar .sidebar-nav {
        display: flex;
        padding: 0;
    }
    
    .analytics-sidebar .sidebar-link {
        padding: 12px 16px;
        white-space: nowrap;
    }
    
    .analytics-sidebar .sidebar-link span {
        display: none;
    }
    
    .analytics-sidebar .sidebar-header,
    .analytics-sidebar .sidebar-footer {
        display: none;
    }
    
    .analytics-main {
        margin-left: 0;
        padding: 16px;
    }
    
    .analytics-header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .analytics-stats-grid.compact {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .marketplace-cards {
        grid-template-columns: 1fr;
    }

    .backend-settings-body {
        grid-template-columns: 1fr;
    }
    
    .products-toolbar {
        flex-direction: column;
        align-items: stretch;
    }
    
    .search-box {
        max-width: none;
    }
}

/* ========================================
   CABINET / DASHBOARD MODERN UI
   ======================================== */

:root {
    --accent-color: #2563eb;
    --bg-page: #f8fafc;
    --bg-card: #ffffff;
    --bg-subtle: #f1f5f9;
    --text-main: #0f172a;
    --text-secondary: #64748b;
    --text-tertiary: #94a3b8;
    --border-subtle: #f1f5f9;
    --radius-xl: 16px;
    --radius-lg: 12px;
    --radius-md: 8px;
    --shadow-card: 0 4px 6px -1px rgb(0 0 0 / 0.05), 0 2px 4px -2px rgb(0 0 0 / 0.05);
    --shadow-hover: 0 10px 15px -3px rgb(0 0 0 / 0.08), 0 4px 6px -4px rgb(0 0 0 / 0.04);
}

.dashboard-page {
    background: var(--bg-page);
}

.cabinet-main {
    background: var(--bg-page);
}

.cabinet-top-bar {
    height: 72px;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border-subtle);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 32px;
    position: sticky;
    top: 0;
    z-index: 50;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

.page-title {
    font-size: 26px;
    font-weight: 700;
    color: var(--text-main);
    margin: 0 0 4px 0;
}

.page-subtitle {
    font-size: 13px;
    color: var(--text-secondary);
}

.top-bar-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.cabinet-search {
    display: flex;
    align-items: center;
    background: var(--bg-subtle);
    padding: 0 14px;
    border-radius: 12px;
    width: 320px;
    height: 40px;
    gap: 8px;
    border: 1px solid transparent;
}

.cabinet-search input {
    border: none;
    background: transparent;
    outline: none;
    width: 100%;
    font-size: 13px;
    color: var(--text-main);
}

.cabinet-search input::placeholder {
    color: var(--text-tertiary);
}

.data-meta-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: #f0fdf4;
    color: #15803d;
    border: 1px solid rgba(16, 185, 129, 0.2);
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

.cabinet-user {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 12px;
}

.cabinet-user .user-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cabinet-user .user-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-main);
}

.cabinet-user .user-role {
    font-size: 11px;
    color: var(--text-secondary);
    text-transform: uppercase;
}

.page-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px 32px 40px;
}

.grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.card-panel {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    padding: 24px;
    box-shadow: var(--shadow-card);
    border: 1px solid var(--border-subtle);
}

.metric-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.metric-header {
    display: flex;
    align-items: center;
    gap: 10px;
}

.metric-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.metric-value {
    font-size: 26px;
    font-weight: 700;
    color: var(--text-main);
}

.metric-sub {
    font-size: 12px;
    color: var(--text-secondary);
}

.card-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-main);
    margin-bottom: 12px;
}

.budget-progress {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.budget-bar {
    height: 8px;
    background: #e2e8f0;
    border-radius: 6px;
    overflow: hidden;
}

.budget-fill {
    height: 100%;
    background: linear-gradient(90deg, #2563eb, #60a5fa);
    border-radius: 6px;
}

.budget-meta {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: var(--text-secondary);
}

.ai-card {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    color: #fff;
}

.ai-card .card-title {
    color: #facc15;
}

.ai-insights {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ai-item {
    background: rgba(255, 255, 255, 0.08);
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 12px;
    color: #e5e7eb;
}

.text-green-600 { color: #16a34a; }
.text-blue-600 { color: #2563eb; }
.text-yellow-700 { color: #a16207; }
.text-purple-500 { color: #8b5cf6; }

/* Bidder & Campaigns */
.bidder-header-modern,
.campaigns-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    gap: 16px;
}

.bidder-actions,
.campaigns-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.bidder-layout {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 24px;
}

.campaigns-panel,
.strategy-panel {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-card);
    padding: 20px;
}

.panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.campaign-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.campaign-item {
    background: var(--bg-subtle);
    border: 1px solid var(--border-subtle);
    padding: 14px;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.campaign-item.active {
    border-color: var(--accent-color);
    background: #eff6ff;
    box-shadow: var(--shadow-hover);
}

.campaign-title {
    font-weight: 600;
    color: var(--text-main);
    margin-bottom: 6px;
}

.campaign-meta {
    display: flex;
    gap: 8px;
    margin-bottom: 6px;
}

.campaign-stats {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: var(--text-secondary);
}

.strategy-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 16px;
}

.keywords-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.keyword-pill {
    background: #eff6ff;
    color: var(--accent-color);
    font-size: 12px;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid #bfdbfe;
}

.keywords-actions {
    display: flex;
    gap: 8px;
}

.btn-ghost {
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-secondary);
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 12px;
    cursor: pointer;
}

.btn-ghost:hover {
    background: var(--bg-subtle);
    color: var(--text-main);
}

@media (max-width: 1024px) {
    .bidder-layout {
        grid-template-columns: 1fr;
    }
    .strategy-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 1200px) {
    .grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
    .grid-3 {
        grid-template-columns: repeat(2, 1fr);
    }
    .cabinet-search {
        width: 220px;
    }
}

@media (max-width: 768px) {
    .cabinet-top-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        height: auto;
        padding: 16px;
    }
    .top-bar-right {
        width: 100%;
        flex-wrap: wrap;
    }
    .cabinet-search {
        width: 100%;
    }
    .grid-4,
    .grid-3,
    .grid-2 {
        grid-template-columns: 1fr;
    }
    .page-container {
        padding: 16px;
    }
}

/* ============================================
   КАЛЬКУЛЯТОР v2 — МИНИМАЛИСТИЧНЫЙ ДИЗАЙН
   ============================================ */

.calc-page {
    min-height: 100vh;
    background: linear-gradient(180deg, #0F172A 0%, #1E293B 50%, #0F172A 100%);
    padding: 120px 20px 80px;
    position: relative;
    overflow: hidden;
}

.calc-page::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(ellipse 80% 50% at 50% 0%, rgba(99, 102, 241, 0.15) 0%, transparent 50%),
        radial-gradient(ellipse 60% 40% at 80% 100%, rgba(16, 185, 129, 0.1) 0%, transparent 50%);
    pointer-events: none;
}

/* Заголовок страницы */
.calc-page-header {
    text-align: center;
    margin-bottom: 48px;
    position: relative;
    z-index: 1;
}

.calc-page-badge {
    display: inline-flex;
    align-items: center;
    padding: 8px 20px;
    background: rgba(99, 102, 241, 0.15);
    border: 1px solid rgba(99, 102, 241, 0.3);
    border-radius: 100px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #A5B4FC;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.calc-page-title {
    font-size: clamp(2.5rem, 6vw, 4rem);
    font-weight: 800;
    color: #FFFFFF;
    margin: 0 0 16px;
    letter-spacing: -0.03em;
    line-height: 1.1;
}

.calc-page-subtitle {
    font-size: 1.125rem;
    color: #94A3B8;
    margin: 0 auto;
    max-width: 500px;
    line-height: 1.6;
}

/* Табы маркетплейсов */
.calc-marketplace-tabs {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-bottom: 40px;
    position: relative;
    z-index: 1;
    flex-wrap: wrap;
}

.calc-mp-tab {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 24px;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.calc-mp-tab:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
}

.calc-mp-tab.active {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.3) 0%, rgba(139, 92, 246, 0.3) 100%);
    border-color: rgba(99, 102, 241, 0.5);
    box-shadow: 0 8px 32px rgba(99, 102, 241, 0.25);
}

.calc-mp-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 800;
}

.calc-mp-icon.ozon-icon {
    background: linear-gradient(135deg, #005BFF 0%, #0041C2 100%);
    color: white;
}

.calc-mp-icon.wb-icon {
    background: linear-gradient(135deg, #CB11AB 0%, #9B0D84 100%);
    color: white;
}

.calc-mp-icon.ym-icon {
    background: linear-gradient(135deg, #FFCC00 0%, #FF9500 100%);
    color: #1D1D1F;
}

.calc-mp-name {
    font-size: 0.9375rem;
    font-weight: 600;
    color: #E2E8F0;
}

/* Основной грид */
.calc-main-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 28px;
    max-width: 1400px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

@media (max-width: 1100px) {
    .calc-main-grid {
        grid-template-columns: 1fr;
        max-width: 700px;
    }
}

/* Колонки */
.calc-inputs-column,
.calc-results-column {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Карточки */
.calc-card {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 24px;
    transition: all 0.3s ease;
}

.calc-card:hover {
    border-color: rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.05);
}

.calc-card-primary {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(139, 92, 246, 0.08) 100%);
    border-color: rgba(99, 102, 241, 0.2);
}

.calc-card-dark {
    background: rgba(0, 0, 0, 0.2);
    border-color: rgba(255, 255, 255, 0.05);
}

.calc-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.calc-card-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2) 0%, rgba(139, 92, 246, 0.2) 100%);
    border-radius: 10px;
    color: #A5B4FC;
    font-size: 1rem;
}

.calc-card-title {
    font-size: 1rem;
    font-weight: 600;
    color: #E2E8F0;
    margin: 0;
    flex: 1;
}

.calc-card-toggle {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border: none;
    border-radius: 8px;
    color: #94A3B8;
    cursor: pointer;
    transition: all 0.2s ease;
}

.calc-card-toggle:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #E2E8F0;
}

.calc-card-collapsible {
    display: none;
    animation: slideDown 0.3s ease;
}

.calc-card-collapsible.show {
    display: block;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Схемы работы */
.calc-scheme-selector {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.calc-scheme-option {
    cursor: pointer;
}

.calc-scheme-option input {
    display: none;
}

.calc-scheme-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    transition: all 0.25s ease;
    text-align: center;
}

.calc-scheme-option:hover .calc-scheme-box {
    border-color: rgba(99, 102, 241, 0.3);
    background: rgba(99, 102, 241, 0.05);
}

.calc-scheme-option.active .calc-scheme-box,
.calc-scheme-option input:checked + .calc-scheme-box {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2) 0%, rgba(139, 92, 246, 0.15) 100%);
    border-color: rgba(99, 102, 241, 0.5);
    box-shadow: 0 0 20px rgba(99, 102, 241, 0.2);
}

.calc-scheme-name {
    font-size: 1rem;
    font-weight: 700;
    color: #E2E8F0;
    margin-bottom: 4px;
}

.calc-scheme-desc {
    font-size: 0.75rem;
    color: #94A3B8;
}

/* Налоги */
.calc-tax-selector {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.calc-tax-option {
    cursor: pointer;
}

.calc-tax-option input {
    display: none;
}

.calc-tax-box {
    display: block;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    font-size: 0.875rem;
    font-weight: 500;
    color: #94A3B8;
    text-align: center;
    transition: all 0.25s ease;
}

.calc-tax-option:hover .calc-tax-box {
    border-color: rgba(99, 102, 241, 0.3);
}

.calc-tax-option input:checked + .calc-tax-box {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.15) 0%, rgba(139, 92, 246, 0.1) 100%);
    border-color: rgba(99, 102, 241, 0.4);
    color: #E2E8F0;
}

/* Поля ввода */
.calc-field {
    margin-bottom: 18px;
}

.calc-field:last-child {
    margin-bottom: 0;
}

.calc-field-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #94A3B8;
    margin-bottom: 8px;
}

.calc-field-hint {
    width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    font-size: 0.625rem;
    color: #64748B;
    cursor: help;
}

.calc-field-wrapper {
    position: relative;
}

.calc-field-input,
.calc-field-select {
    width: 100%;
    padding: 14px 16px;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    font-size: 1rem;
    font-family: inherit;
    color: #E2E8F0;
    transition: all 0.2s ease;
    -webkit-appearance: none;
}

.calc-field-input::placeholder {
    color: #475569;
}

.calc-field-input:focus,
.calc-field-select:focus {
    outline: none;
    border-color: rgba(99, 102, 241, 0.5);
    background: rgba(0, 0, 0, 0.3);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

.calc-field-select {
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2394A3B8'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 18px;
    padding-right: 40px;
}

.calc-field-select option {
    background: #1E293B;
    color: #E2E8F0;
}

.calc-field-suffix {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.9375rem;
    font-weight: 600;
    color: #64748B;
    pointer-events: none;
}

.calc-field-wrapper .calc-field-input {
    padding-right: 50px;
}

/* Грид габаритов */
.calc-dimensions-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 16px;
}

@media (max-width: 600px) {
    .calc-dimensions-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.calc-field-sm .calc-field-input {
    padding: 12px 14px;
    font-size: 0.9375rem;
}

.calc-volume-display {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: rgba(99, 102, 241, 0.1);
    border-radius: 10px;
    font-size: 0.875rem;
}

.calc-volume-label {
    color: #94A3B8;
}

.calc-volume-value {
    font-weight: 600;
    color: #A5B4FC;
}

.calc-volume-separator {
    color: rgba(255, 255, 255, 0.2);
}

/* Грид финансов */
.calc-finance-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}

@media (max-width: 500px) {
    .calc-finance-grid {
        grid-template-columns: 1fr;
    }
}

/* Слайдеры */
.calc-slider-container {
    display: flex;
    align-items: center;
    gap: 16px;
}

.calc-slider {
    flex: 1;
    -webkit-appearance: none;
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    outline: none;
}

.calc-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    background: linear-gradient(135deg, #6366F1 0%, #8B5CF6 100%);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.4);
    transition: transform 0.15s ease;
}

.calc-slider::-webkit-slider-thumb:hover {
    transform: scale(1.1);
}

.calc-slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: linear-gradient(135deg, #6366F1 0%, #8B5CF6 100%);
    border-radius: 50%;
    cursor: pointer;
    border: none;
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.4);
}

.calc-slider-value {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 70px;
}

.calc-slider-input {
    width: 50px;
    padding: 8px 10px;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    font-size: 0.9375rem;
    font-family: inherit;
    color: #E2E8F0;
    text-align: center;
}

.calc-slider-input:focus {
    outline: none;
    border-color: rgba(99, 102, 241, 0.5);
}

.calc-slider-value span {
    font-size: 0.875rem;
    color: #64748B;
}

/* Финальная цена */
.calc-final-price {
    margin-top: 12px;
    padding: 10px 14px;
    background: rgba(16, 185, 129, 0.1);
    border-radius: 8px;
    font-size: 0.875rem;
    color: #6EE7B7;
}

.calc-final-price strong {
    font-weight: 700;
}

/* ============================================
   РЕЗУЛЬТАТЫ КАЛЬКУЛЯТОРА
   ============================================ */

/* Герой-блок метрик */
.calc-metrics-hero {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.15) 0%, rgba(139, 92, 246, 0.1) 100%);
    border: 1px solid rgba(99, 102, 241, 0.2);
    border-radius: 24px;
    padding: 32px;
    text-align: center;
}

.calc-metric-main {
    margin-bottom: 28px;
}

.calc-metric-label {
    font-size: 0.8125rem;
    font-weight: 500;
    color: #94A3B8;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 8px;
}

.calc-metric-value {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 8px;
}

.calc-metric-number {
    font-size: 3.5rem;
    font-weight: 800;
    font-family: 'Orbitron', monospace;
    letter-spacing: -0.02em;
    line-height: 1;
}

.calc-metric-number.positive {
    background: linear-gradient(135deg, #10B981 0%, #34D399 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.calc-metric-number.negative {
    background: linear-gradient(135deg, #EF4444 0%, #F87171 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.calc-metric-currency {
    font-size: 1.5rem;
    font-weight: 600;
    color: #64748B;
}

.calc-metric-per-unit {
    font-size: 0.8125rem;
    color: #64748B;
    margin-top: 8px;
}

/* Ряд метрик */
.calc-metrics-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.calc-metric-box {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 14px;
    padding: 16px;
}

.calc-metric-box-value {
    font-size: 1.375rem;
    font-weight: 700;
    font-family: 'Orbitron', monospace;
    margin-bottom: 4px;
}

.calc-metric-box-value.positive {
    color: #10B981;
}

.calc-metric-box-value.negative {
    color: #EF4444;
}

.calc-metric-box-label {
    font-size: 0.75rem;
    font-weight: 500;
    color: #64748B;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Визуализация расходов */
.calc-expense-bars {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.calc-empty-message {
    text-align: center;
    padding: 40px 20px;
    color: #64748B;
    font-size: 0.9375rem;
}

.calc-expense-bar-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.calc-expense-bar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.calc-expense-bar-label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.875rem;
    font-weight: 500;
    color: #CBD5E1;
}

.calc-expense-bar-label i {
    width: 18px;
    text-align: center;
    font-size: 0.8125rem;
}

.calc-expense-bar-values {
    display: flex;
    align-items: center;
    gap: 12px;
}

.calc-expense-bar-amount {
    font-size: 0.875rem;
    font-weight: 600;
    color: #E2E8F0;
    font-family: 'Orbitron', monospace;
}

.calc-expense-bar-percent {
    font-size: 0.75rem;
    color: #64748B;
    min-width: 42px;
    text-align: right;
}

.calc-expense-bar-track {
    height: 6px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 3px;
    overflow: hidden;
}

.calc-expense-bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Итоги расходов */
.calc-expense-summary {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.calc-expense-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    font-size: 0.9375rem;
}

.calc-expense-row span:first-child {
    color: #94A3B8;
}

.calc-expense-row span:last-child {
    font-weight: 600;
    color: #E2E8F0;
    font-family: 'Orbitron', monospace;
}

.calc-expense-total {
    font-weight: 600;
}

/* Детали расчёта */
.calc-details-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.calc-detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 8px;
    transition: background 0.2s ease;
}

.calc-detail-row:hover {
    background: rgba(255, 255, 255, 0.05);
}

.calc-detail-label {
    font-size: 0.875rem;
    color: #94A3B8;
}

.calc-detail-value {
    font-size: 0.9375rem;
    font-weight: 600;
    color: #E2E8F0;
    font-family: 'Orbitron', monospace;
}

/* Расчёт партии */
.calc-batch-results {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.calc-batch-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.calc-batch-label {
    font-size: 0.875rem;
    color: #94A3B8;
}

.calc-batch-value {
    font-size: 1rem;
    font-weight: 600;
    color: #E2E8F0;
    font-family: 'Orbitron', monospace;
}

.calc-batch-value.positive {
    color: #10B981;
}

.calc-batch-value.negative {
    color: #EF4444;
}

.calc-batch-profit {
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.calc-batch-profit .calc-batch-label {
    font-weight: 600;
    color: #E2E8F0;
}

.calc-batch-profit .calc-batch-value {
    font-size: 1.125rem;
}

/* Рекомендации */
.calc-recommendations {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.calc-recommendation {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    border-radius: 14px;
    font-size: 0.875rem;
    line-height: 1.5;
}

.calc-recommendation i {
    font-size: 1rem;
    margin-top: 2px;
    flex-shrink: 0;
}

.calc-recommendation-success {
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.2);
    color: #6EE7B7;
}

.calc-recommendation-success i {
    color: #10B981;
}

.calc-recommendation-warning {
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.2);
    color: #FCD34D;
}

.calc-recommendation-warning i {
    color: #F59E0B;
}

.calc-recommendation-danger {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.2);
    color: #FCA5A5;
}

.calc-recommendation-danger i {
    color: #EF4444;
}

.calc-recommendation-info {
    background: rgba(99, 102, 241, 0.1);
    border: 1px solid rgba(99, 102, 241, 0.2);
    color: #A5B4FC;
}

.calc-recommendation-info i {
    color: #6366F1;
}

/* ============================================
   АДАПТИВНОСТЬ КАЛЬКУЛЯТОРА
   ============================================ */

@media (max-width: 768px) {
    .calc-page {
        padding: 100px 16px 60px;
    }

    .calc-page-title {
        font-size: 2rem;
    }

    .calc-marketplace-tabs {
        gap: 8px;
    }

    .calc-mp-tab {
        padding: 10px 16px;
    }

    .calc-mp-name {
        display: none;
    }

    .calc-mp-icon {
        width: 40px;
        height: 40px;
        font-size: 1.125rem;
    }

    .calc-card {
        padding: 20px;
        border-radius: 16px;
    }

    .calc-metrics-hero {
        padding: 24px;
    }

    .calc-metric-number {
        font-size: 2.5rem;
    }

    .calc-metrics-row {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .calc-metric-box {
        padding: 14px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .calc-metric-box-value {
        margin-bottom: 0;
    }

    .calc-scheme-selector {
        grid-template-columns: 1fr;
    }

    .calc-tax-selector {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 400px) {
    .calc-finance-grid {
        grid-template-columns: 1fr;
    }

    .calc-dimensions-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* ============================================
   EV TRUST SECTION — BENTO GRID
   Возможности и безопасность
   ============================================ */

.ev-trust-section {
    position: relative;
    padding: 60px 0 80px;
    overflow: hidden;
    border-radius: 0;
    margin-top: -40px;
    z-index: 20;
    background: transparent;
}

/* Фон - скрыт, используется unified-section-bg */
.ev-trust-bg {
    display: none;
}

.ev-trust-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, 
        #FAFAFA 0%, 
        #F5F3FF 40%,
        #FDF2F8 70%,
        #FFF7ED 100%
    );
}

/* Заголовок */
.ev-trust-header {
    text-align: center;
    margin-bottom: var(--section-header-gap);
    position: relative;
    z-index: 1;
}

.ev-trust-title {
    font-size: var(--section-title-size);
    font-weight: 800;
    color: #111827;
    letter-spacing: var(--section-title-letter);
    line-height: var(--section-title-line);
    margin: 0;
}

/* Badge */
.ev-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px 8px 12px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 100px;
    margin-bottom: 20px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

.ev-badge-dot {
    width: 8px;
    height: 8px;
    background: #10B981;
    border-radius: 50%;
    animation: evPulse 2s ease-in-out infinite;
}

@keyframes evPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.6; transform: scale(1.3); }
}

.ev-badge-text {
    font-size: 0.75rem;
    font-weight: 600;
    color: #374151;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.ev-gradient-text {
    background: linear-gradient(135deg, #6366F1 0%, #8B5CF6 50%, #EC4899 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Bento Grid */
.ev-bento-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto;
    gap: 20px;
    position: relative;
    z-index: 1;
    max-width: 1100px;
    margin: 0 auto;
}

.ev-bento-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 320px;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 24px;
    overflow: hidden;
    position: relative;
    transition: all 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
}

.ev-bento-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    border-radius: 24px 24px 0 0;
    opacity: 0.9;
    pointer-events: none;
}

.ev-bento-card--main::before {
    background: linear-gradient(90deg, #6366F1 0%, #EC4899 100%);
}

.ev-bento-card--reports::before {
    background: linear-gradient(90deg, #22C55E 0%, #14B8A6 100%);
}

.ev-bento-card--support::before {
    background: linear-gradient(90deg, #F59E0B 0%, #F97316 100%);
}

.ev-bento-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08);
    border-color: #fff;
}

/* Главная карточка — NDA */
.ev-bento-card--main {
    display: flex;
    flex-direction: column;
}

.ev-bento-visual {
    padding: 28px 28px 0;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ev-bento-content {
    padding: 24px 28px 28px;
}

.ev-bento-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #111827;
    margin: 0 0 8px;
}

.ev-bento-desc {
    font-size: 0.9rem;
    color: #6B7280;
    margin: 0;
    line-height: 1.5;
}

/* NDA Visual */
.ev-nda-visual {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
}

.ev-nda-doc {
    background: #fff;
    border-radius: 16px;
    padding: 24px;
    width: 200px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
    border: 1px solid #E5E7EB;
}

.ev-nda-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.ev-nda-logo {
    font-size: 1.25rem;
    font-weight: 800;
    color: #4F46E5;
    letter-spacing: 0.05em;
}

.ev-nda-stamp {
    font-size: 0.5rem;
    font-weight: 700;
    color: #059669;
    background: #D1FAE5;
    padding: 4px 8px;
    border-radius: 4px;
    letter-spacing: 0.05em;
}

.ev-nda-lines {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
}

.ev-nda-line {
    height: 8px;
    background: linear-gradient(90deg, #E5E7EB 0%, #F3F4F6 100%);
    border-radius: 4px;
}

.ev-nda-signature {
    padding-top: 16px;
    border-top: 1px dashed #D1D5DB;
}

.ev-signature-svg {
    width: 100%;
    height: 30px;
    color: #374151;
}

.ev-nda-shield {
    position: absolute;
    bottom: -10px;
    right: 20px;
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #6366F1 0%, #8B5CF6 100%);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.25rem;
    box-shadow: 0 8px 24px rgba(99, 102, 241, 0.35);
}

/* Tags */
.ev-bento-tags {
    display: flex;
    gap: 8px;
    margin-top: 16px;
    flex-wrap: wrap;
}

.ev-tag {
    padding: 6px 12px;
    background: #F3F4F6;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #4B5563;
}

/* Reports Visual */
.ev-reports-visual {
    position: relative;
    width: 100%;
    padding: 16px;
}

.ev-chart-bars {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    height: 120px;
    gap: 8px;
}

.ev-bar {
    flex: 1;
    background: linear-gradient(180deg, #DBEAFE 0%, #BFDBFE 100%);
    border-radius: 8px 8px 4px 4px;
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    transform-origin: bottom;
    animation: evBarGrow 2s ease-out infinite;
}

.ev-bar:nth-child(1) { animation-delay: 0s; }
.ev-bar:nth-child(2) { animation-delay: 0.15s; }
.ev-bar:nth-child(3) { animation-delay: 0.3s; }
.ev-bar:nth-child(4) { animation-delay: 0.45s; }
.ev-bar:nth-child(5) { animation-delay: 0.6s; }

@keyframes evBarGrow {
    0% {
        transform: scaleY(0.3);
        opacity: 0.5;
    }
    20% {
        transform: scaleY(1);
        opacity: 1;
    }
    80% {
        transform: scaleY(1);
        opacity: 1;
    }
    100% {
        transform: scaleY(0.3);
        opacity: 0.5;
    }
}

.ev-bar span {
    position: absolute;
    bottom: -20px;
    font-size: 0.625rem;
    color: #9CA3AF;
    font-weight: 500;
}

.ev-bar--accent {
    background: linear-gradient(180deg, #6366F1 0%, #8B5CF6 100%);
    box-shadow: 0 4px 16px rgba(99, 102, 241, 0.3);
}

.ev-chart-trend {
    position: absolute;
    top: 8px;
    right: 16px;
    animation: evTrendPulse 2s ease-in-out infinite;
}

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

.ev-trend-up {
    font-size: 0.875rem;
    font-weight: 700;
    color: #10B981;
    background: #D1FAE5;
    padding: 4px 10px;
    border-radius: 6px;
}

/* Support Visual */
.ev-support-visual {
    position: relative;
    padding: 16px;
    min-height: 140px;
}

.ev-chat-bubble {
    padding: 12px 16px;
    border-radius: 16px;
    font-size: 0.8125rem;
    max-width: 85%;
    margin-bottom: 12px;
}

.ev-chat-bubble--user {
    background: #F3F4F6;
    color: #374151;
    border-bottom-left-radius: 4px;
}

.ev-chat-bubble--support {
    background: linear-gradient(135deg, #6366F1 0%, #8B5CF6 100%);
    color: #fff;
    margin-left: auto;
    border-bottom-right-radius: 4px;
    padding: 14px 20px;
}

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

.ev-typing span {
    width: 6px;
    height: 6px;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 50%;
    animation: evTyping 1.4s ease-in-out infinite;
}

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

@keyframes evTyping {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
    30% { transform: translateY(-6px); opacity: 1; }
}

.ev-support-avatar {
    position: absolute;
    bottom: 12px;
    right: 16px;
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, #10B981 0%, #059669 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.125rem;
    box-shadow: 0 4px 16px rgba(16, 185, 129, 0.3);
}

.ev-online-dot {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 10px;
    height: 10px;
    background: #10B981;
    border: 2px solid #fff;
    border-radius: 50%;
}

/* Inline Stats внутри карточек */
.ev-inline-stats {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 12px 16px;
    margin-top: auto;
    background: linear-gradient(135deg, rgba(243, 244, 246, 0.6) 0%, rgba(249, 250, 251, 0.8) 100%);
    border-top: 1px solid rgba(229, 231, 235, 0.5);
    border-radius: 0 0 24px 24px;
}

.ev-inline-stats--single {
    justify-content: center;
}

.ev-inline-stat {
    display: flex;
    align-items: center;
    gap: 6px;
}

.ev-inline-stat-value {
    font-size: 1rem;
    font-weight: 700;
    color: #111827;
    font-family: 'Orbitron', monospace;
    letter-spacing: -0.02em;
}

.ev-inline-stat-label {
    font-size: 0.7rem;
    color: #6B7280;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.ev-inline-stat-divider {
    width: 1px;
    height: 20px;
    background: linear-gradient(180deg, transparent 0%, #D1D5DB 50%, transparent 100%);
}

/* Карточки с inline stats требуют flex-column */
.ev-bento-card--reports,
.ev-bento-card--support {
    display: flex;
    flex-direction: column;
}

.ev-bento-card--reports .ev-bento-visual,
.ev-bento-card--support .ev-bento-visual {
    flex-shrink: 0;
}

.ev-bento-card--reports .ev-bento-content,
.ev-bento-card--support .ev-bento-content {
    flex-grow: 0;
    padding-bottom: 8px;
}

/* Stats Card - скрыт, теперь inline */
.ev-bento-card--stats {
    display: none;
    grid-column: span 3;
    padding: 28px 32px;
}

.ev-stats-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ev-stat-item {
    text-align: center;
    flex: 1;
}

.ev-stat-value {
    font-size: 2rem;
    font-weight: 800;
    color: #111827;
    font-family: 'Orbitron', monospace;
    letter-spacing: -0.02em;
}

.ev-stat-label {
    font-size: 0.8125rem;
    color: #6B7280;
    margin-top: 4px;
}

.ev-stat-divider {
    width: 1px;
    height: 50px;
    background: linear-gradient(180deg, transparent 0%, #E5E7EB 50%, transparent 100%);
}


/* Responsive */
@media (max-width: 1024px) {
    .ev-bento-grid {
        grid-template-columns: 1fr 1fr;
    }

    .ev-bento-card--main {
        grid-column: auto;
        grid-row: auto;
    }

    .ev-inline-stats {
        padding: 10px 12px;
        gap: 12px;
    }

    .ev-inline-stat-value {
        font-size: 0.9rem;
    }

    .ev-inline-stat-label {
        font-size: 0.65rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ev-bar {
        animation: none;
    }
    .ev-chart-trend {
        animation: none;
    }
}

@media (max-width: 768px) {
    .ev-trust-section {
        padding: 80px 0 96px;
        border-radius: 40px 40px 0 0;
        margin-top: -40px;
    }

    .ev-trust-title {
        font-size: var(--section-title-size);
    }

    .ev-bento-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .ev-bento-card--main {
        grid-column: auto;
    }

    .ev-bento-card {
        border-radius: 20px;
        min-height: auto;
    }

    .ev-inline-stats {
        border-radius: 0 0 20px 20px;
        flex-direction: column;
        gap: 8px;
        padding: 12px 16px;
    }

    .ev-inline-stat {
        flex-direction: column;
        gap: 2px;
        text-align: center;
    }

    .ev-inline-stat-divider {
        width: 40px;
        height: 1px;
        background: linear-gradient(90deg, transparent 0%, #D1D5DB 50%, transparent 100%);
    }
}

/* ============================================
   UC — UNIT CALCULATOR (МИНИМАЛИСТИЧНЫЙ)
   Белый фон, компактный дизайн
   ============================================ */

.uc-section {
    min-height: 100vh;
    background: #FFFFFF;
    padding: 120px 20px 80px;
}

/* Заголовок */
.uc-header {
    text-align: center;
    max-width: 600px;
    margin: 0 auto 48px;
}

.uc-title {
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 800;
    color: #111827;
    letter-spacing: -0.02em;
    margin: 0 0 12px;
}

.uc-subtitle {
    font-size: 1rem;
    color: #6B7280;
    margin: 0;
    line-height: 1.6;
}

/* Табы маркетплейсов */
.uc-tabs {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 40px;
    flex-wrap: wrap;
}

.uc-tab {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: #F9FAFB;
    border: 1px solid #E5E7EB;
    border-radius: 10px;
    font-size: 0.875rem;
    font-weight: 600;
    color: #6B7280;
    cursor: pointer;
    transition: all 0.2s ease;
}

.uc-tab:hover {
    border-color: #D1D5DB;
    color: #374151;
}

.uc-tab.active {
    background: #111827;
    border-color: #111827;
    color: #FFFFFF;
}

.uc-tab-icon {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 800;
}

.uc-tab-ozon {
    background: #005BFF;
    color: #fff;
}

.uc-tab-wb {
    background: #CB11AB;
    color: #fff;
}

.uc-tab-ym {
    background: #FFCC00;
    color: #111;
}

/* Калькулятор */
.uc-calculator {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 32px;
    max-width: 1000px;
    margin: 0 auto;
}

@media (max-width: 900px) {
    .uc-calculator {
        grid-template-columns: 1fr;
        max-width: 500px;
    }
}

/* Левая панель */
.uc-input-panel {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Группы полей */
.uc-group {
    background: #FAFAFA;
    border: 1px solid #F3F4F6;
    border-radius: 16px;
    padding: 20px;
}

.uc-group-title {
    font-size: 0.75rem;
    font-weight: 600;
    color: #9CA3AF;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 16px;
}

/* Ряды */
.uc-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.uc-row-3 {
    grid-template-columns: repeat(3, 1fr);
}

.uc-row-4 {
    grid-template-columns: repeat(4, 1fr);
}

.uc-row + .uc-row {
    margin-top: 16px;
}

/* Поля */
.uc-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.uc-label {
    font-size: 0.8125rem;
    font-weight: 500;
    color: #6B7280;
}

.uc-input-wrap {
    position: relative;
}

.uc-input,
.uc-select {
    width: 100%;
    padding: 12px 14px;
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 10px;
    font-size: 0.9375rem;
    font-family: inherit;
    color: #111827;
    transition: all 0.15s ease;
}

.uc-input:focus,
.uc-select:focus {
    outline: none;
    border-color: #6366F1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.uc-input::placeholder {
    color: #9CA3AF;
}

.uc-select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%239CA3AF'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 16px;
    padding-right: 36px;
}

.uc-suffix {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.8125rem;
    font-weight: 500;
    color: #9CA3AF;
    pointer-events: none;
}

.uc-input-wrap .uc-input {
    padding-right: 40px;
}

/* Сворачиваемая секция */
.uc-details {
    background: #FAFAFA;
    border: 1px solid #F3F4F6;
    border-radius: 16px;
}

.uc-summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    font-size: 0.875rem;
    font-weight: 600;
    color: #6B7280;
    cursor: pointer;
    list-style: none;
}

.uc-summary::-webkit-details-marker {
    display: none;
}

.uc-summary i {
    transition: transform 0.2s ease;
    font-size: 0.75rem;
}

.uc-details[open] .uc-summary i {
    transform: rotate(180deg);
}

.uc-details-content {
    padding: 0 20px 20px;
}

/* Правая панель — Результаты */
.uc-result-panel {
    background: linear-gradient(180deg, #FAFAFA 0%, #F5F5F5 100%);
    border: 1px solid #E5E7EB;
    border-radius: 20px;
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    height: fit-content;
    position: sticky;
    top: 100px;
}

/* Блок прибыли */
.uc-profit-block {
    text-align: center;
    padding: 24px;
    background: #FFFFFF;
    border-radius: 16px;
    border: 1px solid #E5E7EB;
}

.uc-profit-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: #9CA3AF;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 8px;
}

.uc-profit-value {
    font-size: 2.5rem;
    font-weight: 800;
    color: #111827;
    font-family: 'Orbitron', monospace;
    letter-spacing: -0.02em;
}

.uc-profit-value.positive {
    color: #10B981;
}

.uc-profit-value.negative {
    color: #EF4444;
}

.uc-profit-sub {
    font-size: 0.75rem;
    color: #9CA3AF;
    margin-top: 4px;
}

/* Метрики */
.uc-metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.uc-metric {
    text-align: center;
    padding: 14px 10px;
    background: #FFFFFF;
    border-radius: 12px;
    border: 1px solid #E5E7EB;
}

.uc-metric-value {
    font-size: 1.125rem;
    font-weight: 700;
    color: #111827;
    font-family: 'Orbitron', monospace;
}

.uc-metric-value.positive {
    color: #10B981;
}

.uc-metric-value.negative {
    color: #EF4444;
}

.uc-metric-label {
    font-size: 0.6875rem;
    font-weight: 500;
    color: #9CA3AF;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 4px;
}

/* Структура расходов */
.uc-breakdown {
    background: #FFFFFF;
    border-radius: 14px;
    border: 1px solid #E5E7EB;
    padding: 18px;
}

.uc-breakdown-title {
    font-size: 0.75rem;
    font-weight: 600;
    color: #9CA3AF;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 14px;
}

.uc-breakdown-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.uc-breakdown-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8125rem;
}

.uc-breakdown-item span:first-child {
    color: #6B7280;
}

.uc-breakdown-item span:last-child {
    font-weight: 600;
    color: #374151;
}

.uc-breakdown-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 14px;
    margin-top: 14px;
    border-top: 1px solid #E5E7EB;
    font-size: 0.875rem;
    font-weight: 600;
}

.uc-breakdown-total span:first-child {
    color: #374151;
}

.uc-breakdown-total span:last-child {
    color: #111827;
}

/* Расчёт партии */
.uc-batch {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: linear-gradient(135deg, #EDE9FE 0%, #DBEAFE 100%);
    border-radius: 14px;
}

.uc-batch-input {
    flex: 1;
}

.uc-batch-input .uc-label {
    font-size: 0.6875rem;
    margin-bottom: 4px;
}

.uc-batch-input .uc-input {
    padding: 10px 12px;
    font-size: 0.875rem;
}

.uc-batch-result {
    text-align: right;
}

.uc-batch-result span:first-child {
    display: block;
    font-size: 0.6875rem;
    color: #6B7280;
    margin-bottom: 2px;
}

.uc-batch-value {
    font-size: 1.125rem;
    font-weight: 700;
    color: #111827;
    font-family: 'Orbitron', monospace;
}

.uc-batch-value.positive {
    color: #10B981;
}

.uc-batch-value.negative {
    color: #EF4444;
}

/* Адаптивность */
@media (max-width: 600px) {
    .uc-section {
        padding: 100px 16px 60px;
    }

    .uc-title {
        font-size: 1.75rem;
    }

    .uc-tabs {
        gap: 6px;
    }

    .uc-tab {
        padding: 8px 14px;
        font-size: 0.8125rem;
    }

    .uc-tab span:last-child {
        display: none;
    }

    .uc-tab-icon {
        width: 28px;
        height: 28px;
    }

    .uc-row,
    .uc-row-3 {
        grid-template-columns: 1fr 1fr;
    }

    .uc-row-4 {
        grid-template-columns: 1fr 1fr;
    }

    .uc-result-panel {
        position: static;
        padding: 20px;
    }

    .uc-profit-value {
        font-size: 2rem;
    }

    .uc-metrics {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 8px;
    }

    .uc-metric {
        padding: 12px 8px;
    }

    .uc-metric-value {
        font-size: 1rem;
    }
}

/* Кнопка настроек комиссий */
.uc-settings-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0 auto 32px;
    padding: 10px 20px;
    background: transparent;
    border: 1px dashed #D1D5DB;
    border-radius: 10px;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #6B7280;
    cursor: pointer;
    transition: all 0.2s ease;
}

.uc-settings-btn:hover {
    border-color: #6366F1;
    color: #6366F1;
    background: rgba(99, 102, 241, 0.05);
}

.uc-settings-btn i {
    font-size: 0.875rem;
}

/* ============================================
   CM — COMMISSION MANAGER MODAL
   ============================================ */

.cm-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
}

.cm-modal.active {
    opacity: 1;
    visibility: visible;
}

.cm-modal-content {
    background: #FFFFFF;
    border-radius: 20px;
    width: 100%;
    max-width: 640px;
    max-height: 85vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.2);
    transform: scale(0.95);
    transition: transform 0.2s ease;
}

.cm-modal.active .cm-modal-content {
    transform: scale(1);
}

.cm-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid #F3F4F6;
}

.cm-modal-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: #111827;
    margin: 0;
}

.cm-modal-close {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #F3F4F6;
    border: none;
    border-radius: 10px;
    color: #6B7280;
    cursor: pointer;
    transition: all 0.2s ease;
}

.cm-modal-close:hover {
    background: #E5E7EB;
    color: #111827;
}

.cm-modal-body {
    padding: 24px;
    overflow-y: auto;
}

/* Статус */
.cm-status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: #F9FAFB;
    border-radius: 10px;
    margin-bottom: 20px;
}

.cm-status-info {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8125rem;
    color: #374151;
}

.cm-status-dot {
    width: 8px;
    height: 8px;
    background: #10B981;
    border-radius: 50%;
}

.cm-status-date {
    font-size: 0.75rem;
    color: #9CA3AF;
}

/* Табы */
.cm-tabs {
    display: flex;
    gap: 4px;
    padding: 4px;
    background: #F3F4F6;
    border-radius: 10px;
    margin-bottom: 20px;
}

.cm-tab {
    flex: 1;
    padding: 10px 16px;
    background: transparent;
    border: none;
    border-radius: 8px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #6B7280;
    cursor: pointer;
    transition: all 0.2s ease;
}

.cm-tab:hover {
    color: #374151;
}

.cm-tab.active {
    background: #FFFFFF;
    color: #111827;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.cm-tab-content {
    display: none;
}

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

/* Импорт зона */
.cm-import-zone {
    border: 2px dashed #D1D5DB;
    border-radius: 16px;
    padding: 40px 24px;
    text-align: center;
    transition: all 0.2s ease;
}

.cm-import-zone.dragover {
    border-color: #6366F1;
    background: rgba(99, 102, 241, 0.05);
}

.cm-import-zone i {
    font-size: 2.5rem;
    color: #D1D5DB;
    margin-bottom: 12px;
}

.cm-import-zone p {
    font-size: 0.875rem;
    color: #6B7280;
    margin: 0 0 12px;
}

.cm-file-btn {
    display: inline-block;
    padding: 10px 20px;
    background: #6366F1;
    color: #fff;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease;
}

.cm-file-btn:hover {
    background: #4F46E5;
}

.cm-file-hint {
    display: block;
    font-size: 0.75rem;
    color: #9CA3AF;
    margin-top: 10px;
}

/* Результат импорта */
.cm-import-result {
    margin-top: 16px;
    padding: 14px 18px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.cm-import-result.success {
    background: #ECFDF5;
}

.cm-import-result.error {
    background: #FEF2F2;
}

.cm-import-result.success .cm-result-icon::before {
    content: '\f00c';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    color: #10B981;
}

.cm-import-result.error .cm-result-icon::before {
    content: '\f00d';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    color: #EF4444;
}

.cm-result-text {
    font-size: 0.875rem;
    color: #374151;
}

/* Формат */
.cm-format-info {
    margin-top: 20px;
}

.cm-format-info summary {
    font-size: 0.8125rem;
    color: #6B7280;
    cursor: pointer;
}

.cm-format-info pre {
    margin-top: 10px;
    padding: 14px;
    background: #F9FAFB;
    border-radius: 8px;
    font-size: 0.75rem;
    font-family: 'SF Mono', 'Fira Code', monospace;
    color: #374151;
    overflow-x: auto;
}

/* Действия */
.cm-actions {
    display: flex;
    gap: 10px;
    margin-top: 20px;
    flex-wrap: wrap;
}

.cm-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    border: none;
    border-radius: 8px;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.cm-btn-primary {
    background: #6366F1;
    color: #fff;
}

.cm-btn-primary:hover {
    background: #4F46E5;
}

.cm-btn-secondary {
    background: #F3F4F6;
    color: #374151;
}

.cm-btn-secondary:hover {
    background: #E5E7EB;
}

.cm-btn-danger {
    background: #FEE2E2;
    color: #DC2626;
}

.cm-btn-danger:hover {
    background: #FECACA;
}

.cm-btn-save {
    width: 100%;
    justify-content: center;
    margin-top: 20px;
}

/* Редактор табы */
.cm-editor-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}

.cm-editor-tab {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: #F9FAFB;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #6B7280;
    cursor: pointer;
    transition: all 0.2s ease;
}

.cm-editor-tab:hover {
    border-color: #D1D5DB;
}

.cm-editor-tab.active {
    background: #111827;
    border-color: #111827;
    color: #fff;
}

.cm-mp-icon {
    width: 20px;
    height: 20px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.625rem;
    font-weight: 800;
}

.cm-mp-ozon { background: #005BFF; color: #fff; }
.cm-mp-wb { background: #CB11AB; color: #fff; }
.cm-mp-ym { background: #FFCC00; color: #111; }

/* Таблица редактора */
.cm-editor-table-wrap {
    overflow-x: auto;
    border: 1px solid #E5E7EB;
    border-radius: 12px;
}

.cm-editor-table {
    width: 100%;
    border-collapse: collapse;
}

.cm-editor-table th {
    padding: 12px 14px;
    text-align: left;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #6B7280;
    background: #F9FAFB;
    border-bottom: 1px solid #E5E7EB;
}

.cm-editor-table td {
    padding: 10px 14px;
    border-bottom: 1px solid #F3F4F6;
}

.cm-editor-table tr:last-child td {
    border-bottom: none;
}

.cm-editor-table td:first-child {
    font-size: 0.8125rem;
    font-weight: 500;
    color: #374151;
}

.cm-editor-table input {
    width: 80px;
    padding: 8px 10px;
    border: 1px solid #E5E7EB;
    border-radius: 6px;
    font-size: 0.8125rem;
    color: #111827;
    text-align: right;
}

.cm-editor-table input:focus {
    outline: none;
    border-color: #6366F1;
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.1);
}

/* Источники */
.cm-sources-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cm-source-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    background: #F9FAFB;
    border-radius: 12px;
    transition: background 0.2s ease;
}

.cm-source-card:hover {
    background: #F3F4F6;
}

.cm-source-header {
    display: flex;
    align-items: center;
    gap: 12px;
}

.cm-source-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 800;
}

.cm-source-ozon { background: #005BFF; color: #fff; }
.cm-source-wb { background: #CB11AB; color: #fff; }
.cm-source-ym { background: #FFCC00; color: #111; }

.cm-source-header h4 {
    font-size: 0.9375rem;
    font-weight: 600;
    color: #111827;
    margin: 0;
}

.cm-source-header p {
    font-size: 0.75rem;
    color: #6B7280;
    margin: 2px 0 0;
}

.cm-source-link {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #6366F1;
    text-decoration: none;
    transition: all 0.2s ease;
}

.cm-source-link:hover {
    background: #6366F1;
    border-color: #6366F1;
    color: #fff;
}

.cm-sources-note {
    display: flex;
    gap: 10px;
    padding: 14px 16px;
    background: #EFF6FF;
    border-radius: 10px;
    margin-top: 20px;
}

.cm-sources-note i {
    color: #3B82F6;
    flex-shrink: 0;
    margin-top: 2px;
}

.cm-sources-note p {
    font-size: 0.8125rem;
    color: #1E40AF;
    margin: 0;
    line-height: 1.5;
}

/* Карточка источника расширенная */
.cm-source-card--ozon,
.cm-source-card--expanded {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}

.cm-source-actions {
    display: flex;
    gap: 8px;
    width: 100%;
}

.cm-source-hint {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    background: #FEF3C7;
    border-radius: 8px;
    width: 100%;
}

.cm-source-hint i {
    color: #D97706;
    font-size: 0.875rem;
    flex-shrink: 0;
    margin-top: 1px;
}

.cm-source-hint span {
    font-size: 0.75rem;
    color: #92400E;
    line-height: 1.4;
}

/* Адаптивность модального окна */
@media (max-width: 600px) {
    .cm-modal-content {
        max-height: 90vh;
        border-radius: 16px 16px 0 0;
        margin-top: auto;
    }

    .cm-modal {
        align-items: flex-end;
        padding: 0;
    }

    .cm-actions {
        flex-direction: column;
    }

    .cm-source-card {
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
    }

    .cm-editor-tabs {
        overflow-x: auto;
        padding-bottom: 4px;
    }
}

/* ==================== INTEGRATIONS PAGE (Enhanced) ==================== */
.integration-card {
    background: white;
    border-radius: 20px;
    padding: 28px;
    border: 2px solid #E5E7EB;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.integration-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #E5E7EB 0%, #E5E7EB 100%);
    transition: background 0.3s ease;
}

.integration-card:hover {
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
    transform: translateY(-4px);
    border-color: #D1D5DB;
}

.integration-card.connected {
    border-color: #10B981;
    background: linear-gradient(135deg, #F0FDF4 0%, #FFFFFF 100%);
}

.integration-card.connected::before {
    background: linear-gradient(90deg, #10B981 0%, #34D399 100%);
}

.integration-card.error {
    border-color: #EF4444;
    background: linear-gradient(135deg, #FEF2F2 0%, #FFFFFF 100%);
}

.integration-card.error::before {
    background: linear-gradient(90deg, #EF4444 0%, #F87171 100%);
}

.integration-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}

.integration-logo {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    font-weight: 800;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.integration-logo::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(255,255,255,0.3) 0%, transparent 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.integration-card:hover .integration-logo {
    transform: scale(1.1) rotate(-5deg);
}

.integration-card:hover .integration-logo::before {
    opacity: 1;
}

.integration-logo.wb {
    background: linear-gradient(135deg, #A855F7 0%, #9333EA 100%);
    color: white;
    box-shadow: 0 8px 20px rgba(168, 85, 247, 0.4);
}

.integration-logo.ozon {
    background: linear-gradient(135deg, #0066FF 0%, #0052CC 100%);
    color: white;
    box-shadow: 0 8px 20px rgba(0, 102, 255, 0.4);
}

.integration-logo.ym {
    background: linear-gradient(135deg, #FFCC00 0%, #FFB800 100%);
    color: #000;
    box-shadow: 0 8px 20px rgba(255, 204, 0, 0.4);
}

.integration-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    padding: 8px 14px;
    border-radius: 24px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    transition: all 0.2s ease;
}

.integration-status i {
    font-size: 8px;
    animation: pulse 2s ease-in-out infinite;
}

/* pulse: duplicate removed — see line 590 */

.integration-status.verified {
    background: linear-gradient(135deg, #D1FAE5 0%, #A7F3D0 100%);
    color: #047857;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.2);
}

.integration-status.verified i {
    animation: none;
    color: #10B981;
}

.integration-status.pending {
    background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
    color: #B45309;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.2);
}

.integration-status.pending i {
    color: #F59E0B;
}

.integration-status.disconnected {
    background: linear-gradient(135deg, #F3F4F6 0%, #E5E7EB 100%);
    color: #4B5563;
}

.integration-status.disconnected i {
    color: #9CA3AF;
    animation: none;
}

.integration-status.error {
    background: linear-gradient(135deg, #FEE2E2 0%, #FECACA 100%);
    color: #B91C1C;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.2);
}

.integration-status.error i {
    animation: none;
    color: #EF4444;
}

.integration-actions {
    display: flex;
    gap: 12px;
    margin-top: 16px;
}

.integration-form {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #E5E7EB;
}

.integration-form .form-group {
    margin-bottom: 16px;
}

.integration-form .form-group label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: #374151;
    margin-bottom: 6px;
}

/* ==================== DASHBOARD UC HEADER (Calculator Style) ==================== */
.uc-header {
    margin-bottom: 32px;
}

.uc-header .ev-badge {
    margin-bottom: 16px;
}

.uc-title {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 800;
    color: #111827;
    margin: 0 0 12px 0;
    line-height: 1.2;
}

.uc-subtitle {
    font-size: clamp(0.95rem, 2vw, 1.1rem);
    color: #6B7280;
    margin: 0;
    line-height: 1.6;
}

.ev-gradient-text {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.uc-settings-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    background: white;
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    cursor: pointer;
    transition: all 0.2s ease;
    height: 48px;
}

.uc-settings-btn:hover {
    background: #F9FAFB;
    border-color: #D1D5DB;
    transform: translateY(-1px);
}

.uc-settings-btn i {
    font-size: 16px;
}

.uc-group {
    background: white;
    border-radius: 16px;
    padding: 24px;
    border: 1px solid #E5E7EB;
    margin-bottom: 24px;
}

.uc-group-title {
    font-size: 14px;
    font-weight: 700;
    color: #111827;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 16px;
}

/* ==================== MODERN STATS CARDS (Enhanced) ==================== */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    margin-bottom: 24px;
}

.stat-card-modern {
    background: white;
    border-radius: 16px;
    padding: 24px;
    border: 1px solid #E5E7EB;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.stat-card-modern::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.stat-card-modern:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
    border-color: #D1D5DB;
}

.stat-card-modern:hover::before {
    opacity: 1;
}

.stat-card-modern .stat-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    margin-bottom: 16px;
    transition: transform 0.3s ease;
}

.stat-card-modern:hover .stat-icon {
    transform: scale(1.1) rotate(5deg);
}

.stat-card-modern .stat-label {
    font-size: 13px;
    color: #6B7280;
    margin-bottom: 8px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.stat-card-modern .stat-value {
    font-size: 32px;
    font-weight: 800;
    color: #111827;
    margin-bottom: 8px;
    line-height: 1;
}

.stat-card-modern .stat-trend {
    font-size: 13px;
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
}

.stat-trend i {
    font-size: 10px;
}

.stat-trend.positive {
    color: #10B981;
}

.stat-trend.negative {
    color: #EF4444;
}

.stat-trend.neutral {
    color: #6B7280;
}

.stat-change {
    font-size: 13px;
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.stat-change.positive {
    color: #10B981;
}

.stat-change.negative {
    color: #EF4444;
}

/* ==================== EMPTY STATE ==================== */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 24px;
    text-align: center;
}

.empty-state-icon {
    width: 80px;
    height: 80px;
    background: #F3F4F6;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
}

.empty-state-icon i {
    font-size: 32px;
    color: #9CA3AF;
}

.empty-state h3 {
    font-size: 20px;
    font-weight: 600;
    color: #111827;
    margin-bottom: 8px;
}

.empty-state p {
    color: #6B7280;
    max-width: 400px;
    margin-bottom: 24px;
}

/* ==================== SYNC BUTTON ==================== */
.sync-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: #F3F4F6;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    color: #374151;
    cursor: pointer;
    transition: all 0.2s;
}

.sync-btn:hover {
    background: #E5E7EB;
}

.sync-btn.syncing i {
    animation: spin 1s linear infinite;
}

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

/* ==================== DATA FRESHNESS ==================== */
.data-freshness {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #6B7280;
    padding: 8px 12px;
    background: #F9FAFB;
    border-radius: 8px;
}

.data-freshness .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #10B981;
}

.data-freshness .dot.stale {
    background: #F59E0B;
}

.data-freshness .dot.error {
    background: #EF4444;
}

/* ==================== TOAST NOTIFICATIONS ==================== */
.toast-container {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.toast {
    padding: 16px 20px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    gap: 12px;
    animation: slideInToast 0.3s ease;
    max-width: 400px;
}

.toast.success {
    border-left: 4px solid #10B981;
}

.toast.error {
    border-left: 4px solid #EF4444;
}

.toast.info {
    border-left: 4px solid #2563EB;
}

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

/* ==================== CAMPAIGNS TABLE MODERN (Enhanced) ==================== */
.campaigns-table-modern {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.campaigns-table-modern th {
    background: linear-gradient(135deg, #F9FAFB 0%, #F3F4F6 100%);
    padding: 16px 18px;
    text-align: left;
    font-size: 11px;
    font-weight: 700;
    color: #4B5563;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    border-bottom: 2px solid #E5E7EB;
    position: sticky;
    top: 0;
    z-index: 10;
}

.campaigns-table-modern th:first-child {
    border-top-left-radius: 12px;
}

.campaigns-table-modern th:last-child {
    border-top-right-radius: 12px;
}

.campaigns-table-modern td {
    padding: 18px;
    border-bottom: 1px solid #F3F4F6;
    vertical-align: middle;
    transition: all 0.2s ease;
}

.campaigns-table-modern tbody tr {
    transition: all 0.2s ease;
}

.campaigns-table-modern tbody tr:hover {
    background: linear-gradient(135deg, #F9FAFB 0%, #FFFFFF 100%);
    transform: scale(1.01);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.campaigns-table-modern tbody tr:hover td {
    border-color: transparent;
}

.campaign-name-cell {
    display: flex;
    align-items: center;
    gap: 12px;
}

.campaign-avatar {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: #E5E7EB;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    color: #6B7280;
}

.bid-cell {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.bid-value {
    font-size: 16px;
    font-weight: 600;
    color: #111827;
}

.bid-status {
    font-size: 11px;
    color: #6B7280;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.bid-status::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.bid-status.ok {
    color: #10B981;
}

.bid-status.error {
    color: #EF4444;
}

.bid-status.no_data {
    color: #F59E0B;
}

/* Status badges enhanced */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    transition: all 0.2s ease;
}

.status-badge::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.status-badge.success {
    background: linear-gradient(135deg, #D1FAE5 0%, #A7F3D0 100%);
    color: #047857;
}

.status-badge.warn {
    background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
    color: #B45309;
}

.status-badge.info {
    background: linear-gradient(135deg, #DBEAFE 0%, #BFDBFE 100%);
    color: #1E40AF;
}

.status-badge.error {
    background: linear-gradient(135deg, #FEE2E2 0%, #FECACA 100%);
    color: #B91C1C;
}

/* ==================== LOADING SPINNER ==================== */
.loading-spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid #E5E7EB;
    border-top-color: #2563EB;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

/* ==================== WB CAMPAIGNS LIST (IMPORT MODAL) ==================== */
.wb-campaign-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    margin-bottom: 12px;
    transition: all 0.2s;
}

.wb-campaign-item:hover {
    border-color: #2563EB;
    background: #F9FAFB;
}

.wb-campaign-item.imported {
    background: #F0FDF4;
    border-color: #10B981;
}

.wb-campaign-info {
    flex: 1;
}

.wb-campaign-name {
    font-weight: 600;
    color: #111827;
    margin-bottom: 6px;
}

.wb-campaign-meta {
    display: flex;
    gap: 12px;
    font-size: 13px;
    color: #6B7280;
}

.wb-campaign-meta span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* ==================== FORM ELEMENTS ==================== */
.form-group {
    margin-bottom: 16px;
}

.form-group label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: #374151;
    margin-bottom: 6px;
}

.form-input {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #D1D5DB;
    border-radius: 10px;
    font-size: 14px;
    transition: all 0.2s;
    background: white;
}

.form-input:focus {
    outline: none;
    border-color: #2563EB;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.form-input:disabled {
    background: #F3F4F6;
    color: #9CA3AF;
    cursor: not-allowed;
}

select.form-input {
    cursor: pointer;
}

/* ==================== DASHBOARD BUTTONS ENHANCEMENTS ==================== */
.dashboard-content .btn-primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 12px 24px;
    border-radius: 12px;
    border: none;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.dashboard-content .btn-primary::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, transparent 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.dashboard-content .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(102, 126, 234, 0.5);
}

.dashboard-content .btn-primary:hover::before {
    opacity: 1;
}

.dashboard-content .btn-primary:active {
    transform: translateY(0);
}

.dashboard-content .btn-outline {
    background: white;
    color: #374151;
    padding: 10px 20px;
    border-radius: 10px;
    border: 2px solid #E5E7EB;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.dashboard-content .btn-outline:hover {
    background: #F9FAFB;
    border-color: #D1D5DB;
    transform: translateY(-1px);
}

.dashboard-content .btn-ghost {
    background: transparent;
    color: #6B7280;
    padding: 8px 12px;
    border-radius: 8px;
    border: none;
    font-weight: 500;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.dashboard-content .btn-ghost:hover {
    background: #F3F4F6;
    color: #374151;
}

.dashboard-content .btn-compact {
    padding: 8px 14px;
    font-size: 13px;
}

/* ==================== MODAL ENHANCEMENTS ==================== */
.keywords-modal,
#importModal,
#campaignSettingsModal {
    backdrop-filter: blur(8px);
}

.keywords-modal .modal-content,
#importModal > div,
#campaignSettingsModal > div {
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* ==================== RESPONSIVE INTEGRATIONS ==================== */
@media (max-width: 1024px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .uc-title {
        font-size: 1.75rem;
    }
}

@media (max-width: 640px) {
    .stats-grid {
        grid-template-columns: 1fr;
    }
    
    .integration-actions {
        flex-direction: column;
    }
    
    .integration-actions button {
        width: 100%;
    }
    
    .wb-campaign-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    
    .wb-campaign-item button {
        width: 100%;
    }
}

/* Gemini AI Style Gradient for "Studio" */
.studio-gradient {
    background: linear-gradient(
        90deg,
        #4285F4 0%,
        #9B4DCA 25%,
        #F439A0 50%,
        #FCC934 75%,
        #4285F4 100%
    );
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gemini-shine 3s linear infinite;
    font-weight: 600;
    display: inline-block;
}

@keyframes gemini-shine {
    0% {
        background-position: 0% center;
    }
    100% {
        background-position: 200% center;
    }
}

/* Web Gradient for "Web" text - голубые тона как на странице EV Web */
.web-gradient {
    background: linear-gradient(
        90deg,
        #60A5FA 0%,
        #93C5FD 25%,
        #BFDBFE 50%,
        #60A5FA 75%,
        #3B82F6 100%
    );
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gemini-shine 3s linear infinite;
    font-weight: 600;
    display: inline-block;
}

/* ============================================
   EV STUDIO CENTER CARD - Photo & UX Design
   ============================================ */
.ev-studio-center-card {
    position: relative;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.4s ease;
    cursor: pointer;
}

/* Main card hover */
.ev-studio-center-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 
        0 25px 50px rgba(0, 0, 0, 0.15),
        0 10px 20px rgba(0, 0, 0, 0.08);
}

/* Badge hover effect */
.ev-studio-center-card > div:first-child {
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.3s ease,
                background 0.3s ease;
}

.ev-studio-center-card:hover > div:first-child {
    transform: translateY(-4px) scale(1.05);
    box-shadow: 
        0 8px 24px rgba(59, 130, 246, 0.25),
        0 4px 8px rgba(0, 0, 0, 0.1);
    background: linear-gradient(135deg, #ffffff 0%, #f0f7ff 100%);
}

/* Camera Icon Container */
.ev-studio-camera-icon {
    width: 64px;
    height: 64px;
    border-radius: 18px;
    background: linear-gradient(145deg, 
        rgba(59, 130, 246, 0.12) 0%, 
        rgba(139, 92, 246, 0.12) 100%);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 
        0 6px 20px rgba(59, 130, 246, 0.18),
        inset 0 1px 2px rgba(255, 255, 255, 0.9),
        0 0 0 1px rgba(255, 255, 255, 0.5);
    animation: ev-float 3s ease-in-out infinite;
    position: relative;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.3s ease,
                background 0.3s ease;
}

/* Camera hover effects */
.ev-studio-center-card:hover .ev-studio-camera-icon {
    animation: none;
    transform: scale(1.1) rotate(-5deg);
    background: linear-gradient(145deg, 
        rgba(59, 130, 246, 0.22) 0%, 
        rgba(139, 92, 246, 0.22) 100%);
    box-shadow: 
        0 12px 32px rgba(59, 130, 246, 0.3),
        inset 0 1px 2px rgba(255, 255, 255, 0.9),
        0 0 0 2px rgba(59, 130, 246, 0.2);
}

/* Camera flash on hover */
.ev-studio-center-card:hover .ev-camera-flash::after {
    animation: ev-flash-burst 0.3s ease-out forwards;
}

@keyframes ev-flash-burst {
    0% { 
        opacity: 1; 
        box-shadow: 0 0 8px rgba(255, 200, 80, 0.8);
    }
    50% { 
        opacity: 1; 
        box-shadow: 0 0 20px rgba(255, 255, 200, 1), 0 0 40px rgba(255, 220, 100, 0.8);
        background: #fff;
    }
    100% { 
        opacity: 0.7; 
        box-shadow: 0 0 8px rgba(255, 200, 80, 0.8);
    }
}

/* Lens zoom on hover */
.ev-studio-center-card:hover .ev-camera-lens {
    transform: translate(-50%, -50%) scale(1.15);
    transition: transform 0.3s ease;
}

.ev-studio-center-card:hover .ev-camera-lens-inner {
    box-shadow: 
        inset 0 2px 4px rgba(0, 0, 0, 0.5),
        0 0 0 2px rgba(59, 130, 246, 0.5),
        0 0 12px rgba(59, 130, 246, 0.4);
}

/* Shutter click animation on hover */
.ev-studio-center-card:hover .ev-camera-shutter {
    animation: ev-shutter-click 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes ev-shutter-click {
    0% { transform: translateY(0); }
    30% { transform: translateY(2px); }
    60% { transform: translateY(0); }
    100% { transform: translateY(0); }
}

@keyframes ev-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

/* Custom 3D Camera */
.ev-camera {
    position: relative;
    width: 42px;
    height: 32px;
}

.ev-camera-body {
    position: absolute;
    width: 100%;
    height: 26px;
    bottom: 0;
    background: linear-gradient(165deg, #3B3B3B 0%, #1A1A1A 60%, #0D0D0D 100%);
    border-radius: 6px;
    box-shadow: 
        0 3px 8px rgba(0, 0, 0, 0.35),
        inset 0 1px 1px rgba(255, 255, 255, 0.15),
        inset 0 -1px 2px rgba(0, 0, 0, 0.3);
    overflow: hidden;
}

/* Flash */
.ev-camera-flash {
    position: absolute;
    top: -4px;
    left: 6px;
    width: 10px;
    height: 6px;
    background: linear-gradient(180deg, #4A4A4A 0%, #2A2A2A 100%);
    border-radius: 2px 2px 0 0;
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.2);
}

.ev-camera-flash::after {
    content: '';
    position: absolute;
    top: 1px;
    left: 2px;
    width: 6px;
    height: 3px;
    background: linear-gradient(180deg, rgba(255, 220, 100, 0.9) 0%, rgba(255, 180, 50, 0.7) 100%);
    border-radius: 1px;
    animation: ev-flash-pulse 2s ease-in-out infinite;
}

@keyframes ev-flash-pulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; box-shadow: 0 0 8px rgba(255, 200, 80, 0.8); }
}

/* Lens */
.ev-camera-lens {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 18px;
    height: 18px;
    background: linear-gradient(145deg, #2A2A2A 0%, #1A1A1A 100%);
    border-radius: 50%;
    box-shadow: 
        0 2px 4px rgba(0, 0, 0, 0.4),
        inset 0 1px 1px rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.ev-camera-lens-inner {
    width: 12px;
    height: 12px;
    background: linear-gradient(145deg, #1E3A5F 0%, #0F2744 50%, #0A1929 100%);
    border-radius: 50%;
    position: relative;
    overflow: hidden;
    box-shadow: 
        inset 0 2px 4px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(59, 130, 246, 0.3);
}

.ev-camera-lens-shine {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 4px;
    height: 4px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0) 70%);
    border-radius: 50%;
    animation: ev-lens-shine 3s ease-in-out infinite;
}

@keyframes ev-lens-shine {
    0%, 100% { 
        opacity: 0.7;
        transform: translate(0, 0);
    }
    50% { 
        opacity: 1;
        transform: translate(1px, 1px);
    }
}

/* Grip */
.ev-camera-grip {
    position: absolute;
    right: 3px;
    top: 4px;
    width: 6px;
    height: 18px;
    background: linear-gradient(90deg, #2A2A2A 0%, #1A1A1A 100%);
    border-radius: 2px;
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1);
}

.ev-camera-grip::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 1px;
    width: 4px;
    height: 2px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 1px;
}

.ev-camera-grip::after {
    content: '';
    position: absolute;
    top: 6px;
    left: 1px;
    width: 4px;
    height: 2px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 1px;
}

/* Shutter Button */
.ev-camera-shutter {
    position: absolute;
    top: 0;
    right: 10px;
    width: 8px;
    height: 5px;
    background: linear-gradient(180deg, #E53935 0%, #C62828 100%);
    border-radius: 2px 2px 1px 1px;
    box-shadow: 
        0 1px 2px rgba(0, 0, 0, 0.3),
        inset 0 1px 1px rgba(255, 255, 255, 0.3);
    animation: ev-shutter-ready 1.5s ease-in-out infinite;
}

@keyframes ev-shutter-ready {
    0%, 100% { transform: translateY(0); }
    10%, 20% { transform: translateY(1px); }
}

/* Mini Figma Window */
.ev-studio-figma-window {
    width: 90%;
    max-width: 120px;
    background: linear-gradient(145deg, 
        rgba(255, 255, 255, 0.95) 0%, 
        rgba(248, 250, 252, 0.9) 100%);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 
        0 8px 24px rgba(0, 0, 0, 0.08),
        0 2px 8px rgba(0, 0, 0, 0.04),
        inset 0 1px 1px rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(0, 0, 0, 0.06);
    animation: ev-float 3s ease-in-out infinite 0.5s;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.3s ease;
}

/* Figma window hover effects */
.ev-studio-center-card:hover .ev-studio-figma-window {
    animation: none;
    transform: scale(1.08) rotate(2deg);
    box-shadow: 
        0 16px 40px rgba(99, 102, 241, 0.2),
        0 4px 12px rgba(0, 0, 0, 0.08),
        inset 0 1px 1px rgba(255, 255, 255, 0.9);
    border-color: rgba(99, 102, 241, 0.2);
}

.ev-figma-titlebar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    background: linear-gradient(180deg, #F8FAFC 0%, #F1F5F9 100%);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

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

.ev-figma-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.ev-figma-dot--red {
    background: linear-gradient(135deg, #FF6B6B 0%, #EE5A5A 100%);
    box-shadow: 0 1px 3px rgba(238, 90, 90, 0.4);
}

.ev-figma-dot--yellow {
    background: linear-gradient(135deg, #FFD93D 0%, #F0C419 100%);
    box-shadow: 0 1px 3px rgba(240, 196, 25, 0.4);
}

.ev-figma-dot--green {
    background: linear-gradient(135deg, #6BCB77 0%, #4CAF50 100%);
    box-shadow: 0 1px 3px rgba(76, 175, 80, 0.4);
}

.ev-figma-title {
    font-size: 8px;
    font-weight: 600;
    color: #64748B;
    letter-spacing: 0.02em;
}

.ev-figma-canvas {
    padding: 10px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    background: #FFFFFF;
}

.ev-figma-frame {
    border-radius: 6px;
    background: linear-gradient(135deg, #E0E7FF 0%, #C7D2FE 100%);
}

.ev-figma-frame--1 {
    grid-column: 1 / -1;
    height: 20px;
    background: linear-gradient(135deg, 
        rgba(99, 102, 241, 0.2) 0%, 
        rgba(139, 92, 246, 0.2) 100%);
    border: 1px dashed rgba(99, 102, 241, 0.4);
}

.ev-figma-frame--2 {
    height: 16px;
    background: linear-gradient(135deg, 
        rgba(236, 72, 153, 0.15) 0%, 
        rgba(244, 114, 182, 0.15) 100%);
    border: 1px dashed rgba(236, 72, 153, 0.35);
}

.ev-figma-frame--3 {
    height: 16px;
    background: linear-gradient(135deg, 
        rgba(34, 197, 94, 0.15) 0%, 
        rgba(74, 222, 128, 0.15) 100%);
    border: 1px dashed rgba(34, 197, 94, 0.35);
}

/* Figma frames hover animations */
.ev-figma-frame {
    transition: transform 0.3s ease,
                background 0.3s ease,
                border-color 0.3s ease,
                box-shadow 0.3s ease;
}

.ev-studio-center-card:hover .ev-figma-frame--1 {
    transform: scaleX(1.02);
    background: linear-gradient(135deg, 
        rgba(99, 102, 241, 0.3) 0%, 
        rgba(139, 92, 246, 0.3) 100%);
    border-color: rgba(99, 102, 241, 0.6);
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.2);
    animation: ev-frame-pulse 1s ease-in-out infinite 0.1s;
}

.ev-studio-center-card:hover .ev-figma-frame--2 {
    transform: translateX(2px);
    background: linear-gradient(135deg, 
        rgba(236, 72, 153, 0.25) 0%, 
        rgba(244, 114, 182, 0.25) 100%);
    border-color: rgba(236, 72, 153, 0.5);
    box-shadow: 0 2px 8px rgba(236, 72, 153, 0.2);
    animation: ev-frame-pulse 1s ease-in-out infinite 0.2s;
}

.ev-studio-center-card:hover .ev-figma-frame--3 {
    transform: translateX(-2px);
    background: linear-gradient(135deg, 
        rgba(34, 197, 94, 0.25) 0%, 
        rgba(74, 222, 128, 0.25) 100%);
    border-color: rgba(34, 197, 94, 0.5);
    box-shadow: 0 2px 8px rgba(34, 197, 94, 0.2);
    animation: ev-frame-pulse 1s ease-in-out infinite 0.3s;
}

@keyframes ev-frame-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* Figma dots animation on hover */
.ev-figma-dot {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.ev-studio-center-card:hover .ev-figma-dot--red {
    transform: scale(1.2);
    box-shadow: 0 0 8px rgba(238, 90, 90, 0.6);
    animation: ev-dot-bounce 0.5s ease infinite 0s;
}

.ev-studio-center-card:hover .ev-figma-dot--yellow {
    transform: scale(1.2);
    box-shadow: 0 0 8px rgba(240, 196, 25, 0.6);
    animation: ev-dot-bounce 0.5s ease infinite 0.1s;
}

.ev-studio-center-card:hover .ev-figma-dot--green {
    transform: scale(1.2);
    box-shadow: 0 0 8px rgba(76, 175, 80, 0.6);
    animation: ev-dot-bounce 0.5s ease infinite 0.2s;
}

@keyframes ev-dot-bounce {
    0%, 100% { transform: scale(1.2) translateY(0); }
    50% { transform: scale(1.2) translateY(-2px); }
}

/* Figma title animation */
.ev-figma-title {
    transition: color 0.3s ease, letter-spacing 0.3s ease;
}

.ev-studio-center-card:hover .ev-figma-title {
    color: #6366F1;
    letter-spacing: 0.08em;
}

/* Gemini-style Pill Highlights for text */
.gemini-pill {
    position: relative;
    display: inline-block;
    z-index: 1;
}

.gemini-pill::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 110%;
    height: 70%;
    border-radius: 50px;
    z-index: -1;
    opacity: 0.5;
    filter: blur(1px);
}

/* Color variants */
.gemini-pill--blue::before {
    background: linear-gradient(135deg, #a8c8f7 0%, #c5d9f7 100%);
}

.gemini-pill--pink::before {
    background: linear-gradient(135deg, #f7c5d5 0%, #f5d5c8 100%);
}

.gemini-pill--green::before {
    background: linear-gradient(135deg, #c8f5e0 0%, #d5f0e5 100%);
}

.gemini-pill--peach::before {
    background: linear-gradient(135deg, #f5d5c8 0%, #f7e0c5 100%);
}

/* Larger pills for full words */
.gemini-pill--word::before {
    width: 105%;
    height: 60%;
}

/* Animation on hover - subtle glow */
.gemini-pill:hover::before {
    opacity: 0.7;
    transition: opacity 0.3s ease;
}

/* ========================================= */
/* EV STUDIO PHOTO GROUP HOVER ANIMATIONS */
/* ========================================= */

.ev-photo-group {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.ev-photo-item {
    pointer-events: auto;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.ev-photo-item > div {
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.ev-photo-item img {
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Left Group Hover Effects */
.ev-photo-group--left:hover .ev-photo-item--left-bottom {
    transform: translateX(-8px) translateY(5px) rotate(-2deg);
}

.ev-photo-group--left:hover .ev-photo-item--left-bottom > div {
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.25);
}

.ev-photo-group--left:hover .ev-photo-item--left-bottom img {
    transform: scale(1.05);
}

.ev-photo-group--left:hover .ev-photo-item--left-top {
    transform: translateX(10px) translateY(-8px) rotate(2deg);
}

.ev-photo-group--left:hover .ev-photo-item--left-top > div {
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.22);
}

.ev-photo-group--left:hover .ev-photo-item--left-top img {
    transform: scale(1.08);
}

/* Right Group Hover Effects */
.ev-photo-group--right:hover .ev-photo-item--right-top {
    transform: translateX(8px) translateY(-5px) rotate(2deg);
}

.ev-photo-group--right:hover .ev-photo-item--right-top > div {
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.25);
}

.ev-photo-group--right:hover .ev-photo-item--right-top img {
    transform: scale(1.05);
}

.ev-photo-group--right:hover .ev-photo-item--right-bottom {
    transform: translateX(-10px) translateY(8px) rotate(-2deg);
}

.ev-photo-group--right:hover .ev-photo-item--right-bottom > div {
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.22);
}

.ev-photo-group--right:hover .ev-photo-item--right-bottom img {
    transform: scale(1.08);
}

/* Individual photo hover for extra interactivity */
.ev-photo-item:hover > div {
    box-shadow: 0 35px 70px rgba(0, 0, 0, 0.3) !important;
}

.ev-photo-item:hover img {
    transform: scale(1.1) !important;
}

/* ========================================= */
/* MOBILE REFINEMENTS — HOME + SERVICES       */
/* ========================================= */

@media (max-width: 768px) {
    /* Solutions (P&L + 4 slides) — mobile layout */
    .solutions-section {
        padding: 80px 0;
    }

    .solutions-section.carousel-mode .solutions-grid-vertical {
        min-height: auto;
    }

    .solution-card-modern,
    .solution-card-modern.reverse {
        border-radius: 24px;
    }

    .solution-content {
        padding: 28px 20px;
    }

    .solution-content h3 {
        font-size: 1.55rem;
    }

    .solution-content p {
        font-size: 0.98rem;
    }

    .solution-tags {
        gap: 8px;
    }

    .solution-tag {
        font-size: 0.8rem;
        padding: 6px 12px;
    }

    .solution-visual-wrapper {
        min-height: 300px;
        padding: 24px 0 12px;
        border-bottom: none;
    }

    .ui-mock-card {
        width: 100%;
        max-width: 320px;
        min-height: 380px;
        height: 380px;
        max-height: 380px;
        padding: 18px;
        border-radius: 20px;
        overflow: hidden;
    }

    .solution-slide[data-slide="1"] .ui-mock-card--slide-1 {
        width: 100%;
        max-width: 320px;
        min-height: 380px;
        height: 380px;
    }

    .solution-slide[data-slide="1"] .pl-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        margin-bottom: 16px !important;
    }

    .solution-slide[data-slide="1"] .pl-header > div:first-child {
        font-size: 1.1rem !important;
    }

    .solution-slide[data-slide="1"] .pl-chip {
        font-size: 0.75rem !important;
        padding: 5px 10px !important;
    }

    .solution-slide[data-slide="1"] .pl-chart {
        gap: 14px !important;
        margin-bottom: 16px !important;
        transform: scale(0.88);
        transform-origin: bottom center;
    }

    .solution-slide[data-slide="1"] .pl-metrics {
        flex-direction: column;
        gap: 8px;
        padding-top: 12px !important;
    }

    .solution-slide[data-slide="1"] .pl-metrics > div {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .solution-slide[data-slide="1"] .pl-metric-label {
        font-size: 0.75rem !important;
        margin-bottom: 0 !important;
    }

    .solution-slide[data-slide="1"] .pl-metric-value {
        font-size: 1rem !important;
    }

    .solution-slide[data-slide="2"] .ui-mock-card--slide-2 {
        width: 100%;
        max-width: 320px;
        min-height: 380px;
        height: 380px;
        padding-top: 48px !important;
    }

    .solution-slide[data-slide="2"] .seo-row {
        padding: 12px !important;
        gap: 6px;
        flex-direction: column;
        align-items: flex-start;
    }
    
    .solution-slide[data-slide="2"] .seo-row--1 {
        margin-top: 8px;
    }

    .solution-slide[data-slide="2"] .seo-row span {
        font-size: 0.9rem !important;
    }

    .solution-slide[data-slide="2"] .seo-tags {
        flex-wrap: wrap;
        gap: 8px !important;
        margin-top: 8px !important;
    }

    .solution-slide[data-slide="2"] .seo-tags span {
        font-size: 0.7rem !important;
        padding: 5px 10px !important;
    }

    .solution-slide[data-slide="3"] .ui-mock-card--slide-3 {
        width: 100%;
        max-width: 320px;
        min-height: 380px;
        height: 380px;
    }

    .solution-slide[data-slide="3"] .stock-status {
        gap: 12px !important;
        margin-bottom: 20px !important;
    }

    .solution-slide[data-slide="3"] .stock-status > div:first-child {
        width: 44px !important;
        height: 44px !important;
        font-size: 1.1rem !important;
        border-radius: 12px !important;
    }

    .solution-slide[data-slide="3"] .stock-status > div:last-child div:first-child {
        font-size: 1.05rem !important;
    }

    .solution-slide[data-slide="3"] .stock-status > div:last-child div:last-child {
        font-size: 0.8rem !important;
    }

    .solution-slide[data-slide="3"] .stock-bar {
        margin-bottom: 12px !important;
    }

    .solution-slide[data-slide="3"] .stock-alert {
        font-size: 0.82rem !important;
        padding: 12px !important;
    }

    .solution-slide[data-slide="4"] .ui-mock-card--slide-4 {
        width: calc(100% - 24px);
        max-width: 300px;
        min-height: auto;
        height: auto;
        padding: 20px 16px 24px !important;
        margin: 0 auto;
        box-sizing: border-box;
    }
    
    .solution-slide[data-slide="4"] .niche-header {
        font-size: 1rem !important;
        margin-bottom: 16px !important;
        padding-top: 16px;
    }
    
    .solution-slide[data-slide="4"] .niche-head {
        font-size: 0.8rem !important;
        margin-bottom: 12px !important;
        padding-bottom: 6px !important;
    }
    
    .solution-slide[data-slide="4"] .niche-item {
        margin-bottom: 12px !important;
        padding: 0 !important;
    }
    
    .solution-slide[data-slide="4"] .niche-icon {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        border-radius: 10px !important;
    }
    
    .solution-slide[data-slide="4"] .niche-icon i {
        font-size: 0.9rem !important;
    }
    
    .solution-slide[data-slide="4"] .niche-name {
        font-size: 0.9rem !important;
    }
    
    .solution-slide[data-slide="4"] .niche-growth {
        font-size: 0.9rem !important;
    }
    
    /* Мобильные анимации отключены для производительности */
    .solution-slide[data-slide="1"] .pl-bar,
    .solution-slide[data-slide="2"] .seo-row,
    .solution-slide[data-slide="2"] .seo-arrow,
    .solution-slide[data-slide="3"] .stock-bar-fill,
    .solution-slide[data-slide="3"] .stock-alert,
    .solution-slide[data-slide="3"] .stock-status,
    .solution-slide[data-slide="4"] .niche-item,
    .solution-slide[data-slide="4"] .niche-icon {
        animation: none !important;
    }

    

    

    

    

    

    

    

    

    .solution-slide[data-slide="4"] .niche-header {
        font-size: 1.05rem !important;
        margin-bottom: 16px !important;
    }

    .solution-slide[data-slide="4"] .niche-head {
        font-size: 0.8rem !important;
        margin-bottom: 12px !important;
    }

    .solution-slide[data-slide="4"] .niche-item {
        gap: 10px;
        margin-bottom: 12px !important;
    }

    .solution-slide[data-slide="4"] .niche-item span {
        font-size: 0.95rem !important;
    }

    .solution-slide[data-slide="4"] .niche-icon {
        width: 34px !important;
        height: 34px !important;
        border-radius: 10px !important;
    }

    /* Design services slider — mobile layout */
    .design-slides-container {
        height: auto;
        min-height: 560px;
    }

    .design-slide {
        height: auto;
    }

    .design-slide--active {
        position: relative;
    }

    .design-slide-content-inner {
        display: flex;
        flex-direction: column;
        gap: 14px;
    }

    .design-services-slider .infographics-hero-card {
        padding: 18px 16px;
        gap: 16px;
        border-radius: 22px;
        align-items: stretch;
        min-height: 0;
    }

    .design-services-slider .infographics-hero-content {
        text-align: left;
        order: 1;
    }

    .design-services-slider .infographics-hero-title {
        font-size: clamp(1.6rem, 6vw, 2.1rem);
    }

    .design-services-slider .infographics-hero-tagline {
        font-size: 0.95rem;
        margin-bottom: 1rem;
    }

    .design-services-slider .infographics-hero-visual {
        width: 100%;
        min-height: 200px;
        padding: 0;
        order: 2;
    }

    .design-services-slider .design-block-arc {
        position: static;
        margin-top: 8px;
        justify-content: flex-start;
        gap: 0.4rem;
        order: 3;
    }

    .design-services-slider .design-slide-cta {
        margin-top: 0.9rem;
    }

    .design-services-slider .infographics-hero-visual--glass {
        justify-content: center;
        gap: 0.35rem;
    }

    .design-services-slider .infographics-cascade {
        width: 180px;
        height: 220px;
    }

    .design-services-slider .infographics-cascade-item {
        width: 105px;
    }

    .design-services-slider .infographics-cascade-item--front {
        left: 0;
        top: 6%;
    }

    .design-services-slider .infographics-cascade-item--mid {
        left: 34px;
        top: 22%;
    }

    .design-services-slider .infographics-cascade-item--back {
        left: 68px;
        top: 38%;
    }

    .design-services-slider .infographics-hero-floats {
        width: 100%;
        max-width: 220px;
        min-height: 200px;
        gap: 8px 12px;
        padding: 10px;
    }

    .design-services-slider .web-mockup-stack {
        transform: scale(0.78);
    }

    .design-services-slider .web-mockup--browser {
        width: 220px;
    }

    .design-services-slider .web-mockup--mobile {
        width: 64px;
    }

    .design-services-slider .photo-showcase {
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.75rem;
    }

    .design-services-slider .photo-placeholder {
        width: 68px;
        height: 88px;
        font-size: 1.3rem;
    }

    .design-services-slider .brand-showcase {
        flex-wrap: wrap;
        justify-content: center;
        gap: 16px;
    }

    .design-services-slider .brand-circle,
    .design-services-slider .brand-box {
        width: 56px;
        height: 56px;
        font-size: 1.2rem;
    }

    .design-services-slider .brand-palette {
        padding: 8px;
    }

    .design-services-slider .brand-palette > span {
        width: 16px;
        height: 32px;
    }

    .services-page .sv-hero-cta {
        align-items: stretch;
    }

    .services-page .sv-hero-cta-buttons {
        flex-direction: column;
        align-items: stretch;
    }

    .services-page .sv-btn-demo {
        width: 100%;
        justify-content: center;
    }

    .services-page #services .service-card__content {
        width: 100% !important;
        left: 0;
        right: 0;
        padding: 18px 18px 20px;
        justify-content: flex-start;
    }

    .services-page #services .service-card__content h3 {
        font-size: clamp(1.5rem, 5vw, 1.9rem);
        line-height: 1.15;
    }

    .services-page #services .service-card__content p {
        font-size: 0.95rem;
        max-width: 100%;
    }

    .services-page .digital-services-section {
        padding: 80px 16px;
    }

    .services-page .digital-services-header {
        margin-bottom: 48px;
    }

    .services-page .digital-services-title {
        font-size: clamp(2rem, 7vw, 2.4rem);
    }

    .services-page .digital-services-grid {
        gap: 16px;
    }

    .services-page .digital-service-card {
        padding: 28px 20px;
        border-radius: 22px;
    }

    .services-page .ds-card-illustration {
        width: 56px;
        height: 56px;
        right: 16px;
        top: 16px;
    }

    .services-page .ds-step-number {
        left: 20px;
        top: 16px;
    }

    .services-page .digital-service-desc {
        font-size: 0.95rem;
    }

    .services-page .digital-service-tags {
        gap: 6px;
    }
}

@media (max-width: 480px) {
    .solutions-section.carousel-mode .solutions-grid-vertical {
        min-height: auto;
    }

    .solution-content {
        padding: 24px 18px;
    }

    .ui-mock-card {
        width: 100%;
        max-width: 300px;
        min-height: 350px;
        height: 350px;
        max-height: 350px;
        padding: 16px;
    }

    .solution-slide[data-slide="1"] .ui-mock-card--slide-1,
    .solution-slide[data-slide="2"] .ui-mock-card--slide-2,
    .solution-slide[data-slide="3"] .ui-mock-card--slide-3,
    .solution-slide[data-slide="4"] .ui-mock-card--slide-4 {
        max-width: 300px;
        min-height: 350px;
        height: 350px;
    }

    .solution-slide[data-slide="1"] .pl-chart {
        transform: scale(0.84);
    }

    .design-services-slider .infographics-hero-card {
        padding: 16px;
    }

    .design-services-slider .web-mockup-stack {
        transform: scale(0.72);
    }

    .design-services-slider .web-mockup--browser {
        width: 210px;
    }

    .design-services-slider .web-mockup--mobile {
        width: 60px;
    }

    .design-services-slider .photo-placeholder {
        width: 64px;
        height: 84px;
        font-size: 1.2rem;
    }

    .design-services-slider .brand-circle,
    .design-services-slider .brand-box {
        width: 52px;
        height: 52px;
        font-size: 1.15rem;
    }

    .design-services-slider .brand-palette {
        padding: 7px;
    }

    .design-services-slider .brand-palette > span {
        width: 14px;
        height: 30px;
    }

    .design-slides-container {
        min-height: 500px;
    }

    .design-services-slider .design-slide-content-inner {
        gap: 12px;
    }

    .design-services-slider .infographics-hero-visual {
        min-height: 180px;
    }

    .design-services-slider .design-block-arc {
        margin-top: 6px;
    }

    .design-services-slider .infographics-cascade {
        width: 160px;
        height: 200px;
    }

    .design-services-slider .infographics-cascade-item {
        width: 92px;
    }

    .design-services-slider .infographics-hero-floats {
        max-width: 190px;
        min-height: 170px;
    }

    .services-page #services .service-card__content {
        padding: 16px;
    }

    .services-page .digital-service-card {
        padding: 24px 18px;
    }
}

/* ================================
   3D Electronics Components Styles
   ================================ */

/* Microchip 1 - Large floating chip */
.electronics-3d-chip.chip-1 {
    position: absolute;
    top: 15%;
    right: 8%;
    width: 120px;
    height: 120px;
    transform-style: preserve-3d;
    animation: electronics-float 6s ease-in-out infinite, electronics-rotate 12s linear infinite;
}

.electronics-3d-chip .chip-core {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    border: 3px solid rgba(59, 130, 246, 0.4);
    border-radius: 8px;
    box-shadow: 
        0 0 30px rgba(59, 130, 246, 0.3),
        inset 0 0 20px rgba(59, 130, 246, 0.1);
}

.electronics-3d-chip .chip-core::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60%;
    height: 60%;
    background: linear-gradient(45deg, #3b82f6 0%, #60a5fa 100%);
    border-radius: 4px;
    opacity: 0.6;
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.5);
}

.chip-pins {
    position: absolute;
    display: flex;
    gap: 6px;
}

.chip-pins-top, .chip-pins-bottom {
    left: 20%;
    right: 20%;
    height: 8px;
    flex-direction: row;
}

.chip-pins-top { top: -8px; }
.chip-pins-bottom { bottom: -8px; }

.chip-pins-left, .chip-pins-right {
    top: 20%;
    bottom: 20%;
    width: 8px;
    flex-direction: column;
}

.chip-pins-left { left: -8px; }
.chip-pins-right { right: -8px; }

.chip-pins::before,
.chip-pins::after {
    content: '';
    flex: 1;
    background: linear-gradient(180deg, #94a3b8 0%, #64748b 100%);
    border-radius: 2px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

/* Circuit Board 1 - Large board with traces */
.electronics-3d-board.board-1 {
    position: absolute;
    top: 60%;
    right: 5%;
    width: 140px;
    height: 100px;
    background: linear-gradient(135deg, #065f46 0%, #047857 100%);
    border-radius: 12px;
    border: 2px solid rgba(16, 185, 129, 0.3);
    box-shadow: 0 10px 40px rgba(16, 185, 129, 0.2);
    transform-style: preserve-3d;
    animation: electronics-float 7s ease-in-out infinite 1s, electronics-tilt 8s ease-in-out infinite;
}

.board-trace {
    position: absolute;
    background: linear-gradient(90deg, rgba(16, 185, 129, 0.4) 0%, rgba(16, 185, 129, 0.8) 50%, rgba(16, 185, 129, 0.4) 100%);
    border-radius: 2px;
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.5);
}

.board-trace.trace-1 {
    top: 20%;
    left: 10%;
    right: 10%;
    height: 3px;
}

.board-trace.trace-2 {
    top: 50%;
    left: 15%;
    right: 25%;
    height: 3px;
}

.board-trace.trace-3 {
    top: 70%;
    left: 20%;
    right: 15%;
    height: 3px;
}

.board-component {
    position: absolute;
    width: 16px;
    height: 16px;
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    border-radius: 3px;
    box-shadow: 0 0 10px rgba(251, 191, 36, 0.6);
    animation: electronics-pulse 2s ease-in-out infinite;
}

.board-component.comp-1 {
    top: 15%;
    right: 20%;
    animation-delay: 0s;
}

.board-component.comp-2 {
    top: 45%;
    left: 15%;
    animation-delay: 0.7s;
}

.board-component.comp-3 {
    bottom: 20%;
    right: 25%;
    animation-delay: 1.4s;
}

/* Resistor - Cylindrical component */
.electronics-3d-resistor {
    position: absolute;
    top: 25%;
    left: 50%;
    width: 80px;
    height: 30px;
    transform-style: preserve-3d;
    animation: electronics-float 5s ease-in-out infinite 0.5s, electronics-spin 10s linear infinite;
}

.resistor-body {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, #d4a574 0%, #8b6f47 100%);
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(139, 111, 71, 0.4);
}

.resistor-band {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 6px;
    background: linear-gradient(180deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.8) 100%);
}

.resistor-band.band-1 { left: 15%; background: linear-gradient(180deg, #ef4444 0%, #dc2626 100%); }
.resistor-band.band-2 { left: 35%; background: linear-gradient(180deg, #f59e0b 0%, #d97706 100%); }
.resistor-band.band-3 { left: 55%; background: linear-gradient(180deg, #10b981 0%, #059669 100%); }

/* Capacitor */
.electronics-3d-capacitor {
    position: absolute;
    bottom: 20%;
    left: 55%;
    width: 60px;
    height: 80px;
    transform-style: preserve-3d;
    animation: electronics-float 6s ease-in-out infinite 1.5s;
}

.capacitor-body {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 60px;
    background: linear-gradient(135deg, #1e40af 0%, #1e3a8a 100%);
    border-radius: 20px 20px 5px 5px;
    box-shadow: 0 5px 25px rgba(30, 64, 175, 0.4);
}

.capacitor-body::before {
    content: '';
    position: absolute;
    top: 5px;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 3px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 2px;
}

.capacitor-lead {
    position: absolute;
    bottom: 0;
    width: 4px;
    height: 20px;
    background: linear-gradient(180deg, #94a3b8 0%, #64748b 100%);
    border-radius: 2px;
}

.capacitor-lead.lead-left { left: 25%; }
.capacitor-lead.lead-right { right: 25%; }

/* LED Component */
.electronics-3d-led {
    position: absolute;
    top: 60%;
    left: 45%;
    width: 50px;
    height: 70px;
    transform-style: preserve-3d;
    animation: electronics-float 5s ease-in-out infinite 1s;
}

.led-body {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    width: 30px;
    height: 40px;
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.8) 0%, rgba(220, 38, 38, 0.9) 100%);
    border-radius: 15px 15px 5px 5px;
    box-shadow: 0 0 30px rgba(239, 68, 68, 0.6);
}

.led-glow {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 40px;
    background: radial-gradient(circle, rgba(239, 68, 68, 0.6) 0%, transparent 70%);
    border-radius: 50%;
    animation: electronics-pulse 1.5s ease-in-out infinite;
}

.led-lead {
    position: absolute;
    bottom: 0;
    width: 3px;
    height: 18px;
    background: linear-gradient(180deg, #94a3b8 0%, #64748b 100%);
    border-radius: 2px;
}

.led-lead.lead-left { left: 30%; }
.led-lead.lead-right { right: 30%; }

/* Circuit Board 2 - Smaller board */
.electronics-3d-board.board-2 {
    position: absolute;
    bottom: 30%;
    right: 5%;
    width: 100px;
    height: 70px;
    background: linear-gradient(135deg, #065f46 0%, #047857 100%);
    border-radius: 8px;
    border: 2px solid rgba(16, 185, 129, 0.3);
    box-shadow: 0 10px 30px rgba(16, 185, 129, 0.2);
    transform-style: preserve-3d;
    animation: electronics-float 6.5s ease-in-out infinite 2.5s, electronics-tilt-reverse 9s ease-in-out infinite;
}

/* Animations */
@keyframes electronics-float {
    0%, 100% {
        transform: translateY(0) translateX(0);
    }
    50% {
        transform: translateY(-20px) translateX(10px);
    }
}

@keyframes electronics-rotate {
    0% {
        transform: rotateY(0deg) rotateX(0deg);
    }
    100% {
        transform: rotateY(360deg) rotateX(30deg);
    }
}


@keyframes electronics-spin {
    0% {
        transform: rotateZ(0deg);
    }
    100% {
        transform: rotateZ(360deg);
    }
}

@keyframes electronics-tilt {
    0%, 100% {
        transform: rotateX(0deg) rotateY(0deg);
    }
    25% {
        transform: rotateX(10deg) rotateY(10deg);
    }
    75% {
        transform: rotateX(-10deg) rotateY(-10deg);
    }
}

@keyframes electronics-tilt-reverse {
    0%, 100% {
        transform: rotateX(0deg) rotateY(0deg);
    }
    25% {
        transform: rotateX(-10deg) rotateY(-10deg);
    }
    75% {
        transform: rotateX(10deg) rotateY(10deg);
    }
}

@keyframes electronics-pulse {
    0%, 100% {
        opacity: 0.6;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.1);
    }
}

/* Mobile Responsive Adjustments */
@media (max-width: 768px) {
    .electronics-3d-chip.chip-1 {
        width: 80px;
        height: 80px;
        top: 10%;
        right: 5%;
    }

    .electronics-3d-board.board-1 {
        width: 100px;
        height: 70px;
        top: 55%;
        right: 5%;
    }

    .electronics-3d-resistor {
        width: 60px;
        height: 24px;
        top: 20%;
        left: 45%;
    }

    .electronics-3d-capacitor {
        width: 50px;
        height: 65px;
        bottom: 15%;
        left: 48%;
    }

    .electronics-3d-led {
        width: 40px;
        height: 55px;
        top: 55%;
        left: 40%;
    }

    .electronics-3d-board.board-2 {
        width: 80px;
        height: 55px;
        bottom: 25%;
        right: 3%;
    }
}

/* ============================================
   КОМПЛЕКСНАЯ АДАПТАЦИЯ ГЛАВНОЙ СТРАНИЦЫ
   Все устройства: Desktop → Tablet → Mobile
   ============================================ */

/* =============================================
   TABLET (768px - 1024px)
   ============================================= */
@media (max-width: 1024px) and (min-width: 769px) {
    /* Hero Section */
    .hero-text-wrapper h1 {
        font-size: 2.5rem;
    }
    
    .hero-text-wrapper p {
        font-size: 1rem;
    }
    
    .hero-visual-container {
        transform: scale(0.9);
    }
    
    /* Как это работает */
    .howitworks2-grid {
        gap: 20px;
    }
    
    .howitworks2-card {
        padding: 28px 20px;
    }
    
    /* Bento Grid */
    .ev-bento-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
    
    .ev-bento-card--main {
        grid-column: span 2;
    }
    
    /* Form V2 */
    .callback-v2-container {
        gap: 48px;
    }
    
    .callback-v2-title {
        font-size: 2.5rem;
    }
}

/* =============================================
   MOBILE LARGE (481px - 768px)
   ============================================= */
@media (max-width: 768px) {
    /* Навигация */
    .navbar {
        padding: 12px 16px;
    }
    
    .nav-links {
        display: none;
    }
    
    .hamburger-btn {
        display: flex !important;
    }
    
    /* Секция "Как это работает" */
    .howitworks2-section {
        padding: 60px 16px;
    }
    
    .howitworks2-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    
    .howitworks2-card {
        padding: 24px 18px;
    }
    
    .howitworks2-card-title {
        font-size: 1.1rem;
    }
    
    .howitworks2-card-text {
        font-size: 0.9rem;
    }
    
    /* Карусель решений — полная переработка для мобильных */
    .solutions-section {
        padding: 48px 0;
    }
    
    .solutions-section .container {
        padding: 0;
    }
    
    /* Навигация — скроллящийся ряд */
    .solutions-carousel-nav-wrap {
        display: flex;
        flex-wrap: nowrap;
        justify-content: flex-start !important;
        gap: 0;
        margin-bottom: 16px;
        padding: 0 16px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .solutions-carousel-nav {
        gap: 20px;
        flex-wrap: nowrap;
        justify-content: flex-start;
    }
    
    .carousel-nav-item {
        font-size: 0.8125rem;
        padding: 8px 0;
        white-space: nowrap;
        flex-shrink: 0;
    }
    
    /* Скрываем все стрелки */
    .carousel-nav-arrow,
    .carousel-side-arrows,
    .carousel-side-arrow,
    .carousel-arrows {
        display: none !important;
    }
    
    /* Карточки слайдов */
    .solutions-slides-wrap {
        padding: 0 16px;
    }
    
    .solution-card-modern {
        flex-direction: column !important;
        padding: 24px 20px;
        border-radius: 20px;
        margin: 0;
    }
    
    .solution-content {
        padding: 0;
        margin-bottom: 16px;
        order: 2;
    }
    
    /* Заголовки в одну строку */
    .solution-content h3 {
        font-size: 1.25rem !important;
        margin-bottom: 10px;
        line-height: 1.3;
        white-space: normal;
    }
    
    .solution-content h3 br {
        display: none;
    }
    
    .solution-content p {
        font-size: 0.875rem;
        margin-bottom: 16px;
        line-height: 1.5;
    }
    
    .solution-tags {
        gap: 8px;
        flex-wrap: wrap;
    }
    
    .solution-tag {
        font-size: 0.75rem;
        padding: 8px 12px;
    }
    
    /* Визуальная часть сверху */
    .solution-visual-wrapper {
        width: 100%;
        display: flex;
        justify-content: center;
        order: 1;
        margin-bottom: 20px;
    }
    
    .ui-mock-card {
        max-width: 100%;
        width: 100%;
        min-height: auto;
        height: auto;
    }
    
    /* Минимальная высота контейнера */
    .solutions-section.carousel-mode .solutions-grid-vertical {
        min-height: auto;
    }
    
    /* Bento Grid */
    .ev-trust-section {
        padding: 60px 16px;
    }
    
    .ev-trust-title {
        font-size: 2rem;
    }
    
    .ev-bento-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    
    .ev-bento-card {
        padding: 24px 20px;
    }
    
    .ev-bento-card--main {
        grid-column: span 1;
    }
    
    /* Форма заявки V2 */
    .callback-section-v2 {
        padding: 60px 16px;
    }
    
    .callback-v2-container {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    
    .callback-v2-info {
        text-align: center;
    }
    
    .callback-v2-title {
        font-size: 2rem;
    }
    
    .callback-v2-desc {
        margin-left: auto;
        margin-right: auto;
    }
    
    .callback-v2-features {
        align-items: center;
    }
    
    .callback-v2-form-wrap {
        padding: 28px 20px;
    }
    
    /* Футер */
    .ev-footer {
        padding: 48px 16px 32px;
    }
    
    .ev-footer-grid {
        grid-template-columns: 1fr;
        gap: 32px;
        text-align: center;
    }
    
    .ev-footer-grid .ev-footer-social {
        justify-content: center;
    }
}

/* =============================================
   MOBILE SMALL (до 480px)
   ============================================= */
@media (max-width: 480px) {
    /* Секция "Как это работает" */
    .howitworks2-section {
        padding: 48px 12px;
    }
    
    .howitworks2-section-title {
        font-size: 1.5rem;
    }
    
    .howitworks2-card {
        padding: 20px 16px;
        border-radius: 16px;
    }
    
    .howitworks2-card-visual {
        height: 100px;
    }
    
    .howitworks2-card-title {
        font-size: 1rem;
    }
    
    .howitworks2-card-text {
        font-size: 0.85rem;
    }
    
    /* Карусель решений — ещё компактнее */
    .solutions-section {
        padding: 40px 0;
    }
    
    .solutions-carousel-nav-wrap {
        padding: 0 12px;
    }
    
    .solutions-carousel-nav {
        gap: 16px;
    }
    
    .carousel-nav-item {
        font-size: 0.75rem;
        padding: 6px 0;
    }
    
    .solutions-slides-wrap {
        padding: 0 12px;
    }
    
    .solution-card-modern {
        padding: 20px 16px;
        border-radius: 16px;
    }
    
    /* Заголовки компактнее */
    .solution-content h3 {
        font-size: 1.125rem !important;
        line-height: 1.25;
    }
    
    .solution-content p {
        font-size: 0.8125rem;
        line-height: 1.5;
    }
    
    .solution-tags {
        gap: 6px;
    }
    
    .solution-tag {
        font-size: 0.7rem;
        padding: 6px 10px;
    }
    
    .ui-mock-card {
        padding: 16px 14px 20px;
        border-radius: 14px;
        width: calc(100% - 24px) !important;
        max-width: 300px;
        margin: 0 auto;
    }
    
    .ui-mock-card--placard {
        padding-top: 36px !important;
    }
    
    .ui-mock-card__traffic {
        top: 10px;
        left: 14px;
        gap: 5px;
    }
    
    .ui-mock-card__dot {
        width: 8px;
        height: 8px;
    }
    
    .solution-visual-wrapper {
        margin-bottom: 12px;
        padding: 16px 12px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    /* Slide 4 niche table - compact for small screens */
    .solution-slide[data-slide="4"] .ui-mock-card--slide-4 {
        width: calc(100% - 20px) !important;
        max-width: 280px;
        padding: 16px 12px 20px !important;
    }
    
    .solution-slide[data-slide="4"] .niche-header {
        font-size: 0.95rem !important;
        margin-bottom: 12px !important;
        padding-top: 12px;
    }
    
    .solution-slide[data-slide="4"] .niche-head {
        font-size: 0.75rem !important;
        margin-bottom: 10px !important;
    }
    
    .solution-slide[data-slide="4"] .niche-item {
        margin-bottom: 10px !important;
    }
    
    .solution-slide[data-slide="4"] .niche-icon {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        border-radius: 8px !important;
    }
    
    .solution-slide[data-slide="4"] .niche-icon i {
        font-size: 0.8rem !important;
    }
    
    .solution-slide[data-slide="4"] .niche-name {
        font-size: 0.85rem !important;
    }
    
    .solution-slide[data-slide="4"] .niche-growth {
        font-size: 0.85rem !important;
    }
    
    /* Bento Grid */
    .ev-trust-section {
        padding: 48px 12px;
    }
    
    .ev-trust-title {
        font-size: 1.75rem;
    }
    
    .ev-bento-card {
        padding: 20px 16px;
        border-radius: 16px;
    }
    
    .ev-bento-card h3 {
        font-size: 1.1rem;
    }
    
    .ev-bento-card p {
        font-size: 0.85rem;
    }
    
    /* Форма заявки V2 */
    .callback-section-v2 {
        padding: 48px 12px;
    }
    
    .callback-v2-title {
        font-size: 1.75rem;
    }
    
    .callback-v2-desc {
        font-size: 1rem;
    }
    
    .callback-v2-form-wrap {
        padding: 24px 16px;
        border-radius: 16px;
    }
    
    .callback-v2-field input,
    .callback-v2-field textarea {
        padding: 12px 14px;
        font-size: 0.95rem;
    }
    
    .callback-v2-submit {
        padding: 14px 24px;
        font-size: 0.95rem;
    }
    
    /* Футер */
    .ev-footer {
        padding: 40px 12px 24px;
    }
    
    .ev-footer-logo {
        font-size: 1.25rem;
    }
    
    .ev-footer-links a {
        font-size: 0.875rem;
    }
}

/* =============================================
   ОЧЕНЬ МАЛЕНЬКИЕ ЭКРАНЫ (до 375px)
   ============================================= */
@media (max-width: 375px) {
    .howitworks2-card {
        padding: 16px 14px;
    }
    
    .solution-content h3 {
        font-size: 1.1rem !important;
    }
    
    .callback-v2-title {
        font-size: 1.5rem;
    }
    
    .ev-trust-title {
        font-size: 1.5rem;
    }
}

/* =============================================
   LANDSCAPE MOBILE
   ============================================= */
@media (max-height: 500px) and (orientation: landscape) {
    .solutions-section.carousel-mode .solutions-grid-vertical {
        min-height: auto;
    }
}

/* =============================================
   ОТКЛЮЧЕНИЕ ТЯЖЁЛЫХ АНИМАЦИЙ НА МОБИЛЬНЫХ
   ============================================= */
@media (max-width: 768px) {
    /* Отключаем сложные анимации для производительности */
    .animate-pulse,
    .animate-bounce {
        animation-duration: 0s !important;
        animation: none !important;
    }
    
    /* Упрощаем hover эффекты на touch устройствах */
    .card-hover:hover,
    .solution-card-modern:hover,
    .ev-bento-card:hover,
    .howitworks2-card:hover {
        transform: none !important;
    }

    /* Отключаем backdrop-filter на слабых устройствах */
    .carousel-side-arrow {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
}

/* =============================================
   PREFER REDUCED MOTION
   ============================================= */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    .carousel-nav-item,
    .solution-card-modern,
    .ev-bento-card,
    .callback-v2-submit {
        transition: none !important;
    }
}

/* =============================================
   TOUCH DEVICE OPTIMIZATIONS
   ============================================= */
@media (hover: none) and (pointer: coarse) {
    /* Увеличиваем touch targets */
    .carousel-nav-item {
        min-height: 44px;
        min-width: 44px;
    }
    
    .solution-tag {
        min-height: 40px;
        padding: 10px 14px;
    }
    
    .callback-v2-submit {
        min-height: 50px;
    }
    
    /* Убираем hover-эффекты которые не работают на touch */
    .card-hover:hover,
    .ev-bento-card:hover {
        transform: none;
        box-shadow: inherit;
    }
}

/* ==============================================
   SERVICES PAGE - MOBILE (PRESERVE LAYOUT)
   ============================================== */

/* Hero */
@media (max-width: 1024px) {
    .sv-hero {
        min-height: auto;
        padding: 96px 20px 64px;
    }

    .sv-hero-container {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .sv-hero-content {
        padding-top: 20px;
    }

    .sv-hero-visual {
        max-width: 420px;
        margin: 0 auto;
    }

    .sv-hero-cta-buttons {
        flex-wrap: wrap;
        justify-content: center;
    }

    .sv-hero-stats {
        justify-content: center;
    }
}

@media (max-width: 768px) {
    .sv-hero {
        padding: 90px 16px 48px;
    }

    .sv-hero-content {
        order: 1;
    }

    .sv-hero-visual {
        order: 2;
    }

    .sv-hero-title {
        font-size: clamp(1.8rem, 6vw, 2.3rem);
    }

    .sv-hero-subtitle {
        font-size: 0.95rem;
    }

    .sv-hero-chips {
        gap: 10px;
        justify-content: center;
    }

    .sv-chip {
        padding: 10px 14px;
        font-size: 0.85rem;
    }

    .sv-hero-cta-buttons {
        gap: 10px;
    }

    .sv-btn-primary,
    .sv-btn-demo {
        width: auto;
        min-width: 220px;
        justify-content: center;
    }

    .sv-hero-stats {
        flex-wrap: wrap;
        gap: 14px;
    }

    .sv-hero-stat-divider {
        display: none;
    }

    .sv-hero-visual {
        max-width: 360px;
        margin-top: 40px;
    }

    .sv-hero-visual .sv-quote-card {
        position: absolute;
        right: 12px;
        bottom: 12px;
        margin: 0;
        width: auto;
    }
}

@media (max-width: 480px) {
    .sv-hero-title {
        font-size: 1.6rem;
    }

    .sv-hero-chips {
        flex-direction: column;
        align-items: stretch;
    }

    .sv-btn-primary,
    .sv-btn-demo {
        width: 100%;
    }

    .sv-hero-visual {
        max-width: 280px;
    }
}

/* Process */
@media (max-width: 1024px) {
    .sv-process {
        padding: 60px 20px;
    }

    .sv-process-grid {
        gap: 20px;
    }
}

@media (max-width: 768px) {
    .sv-process {
        padding: 44px 16px;
    }

    .sv-process-header h2 {
        font-size: 1.6rem;
    }

    .sv-process-step {
        padding: 22px;
    }

    .sv-process-step-title {
        font-size: 1.05rem;
    }

    .sv-process-step-desc {
        font-size: 0.9rem;
    }
}

/* Services Cards */
@media (max-width: 1024px) {
    .services-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    .service-card {
        min-height: 400px !important;
    }

    .service-card[class*="col-span-2"],
    .service-card[class*="row-span-2"] {
        grid-column: span 1 !important;
        grid-row: span 1 !important;
    }
}

@media (max-width: 768px) {
    #services {
        padding: 48px 16px !important;
    }

    .services-header {
        margin-bottom: 48px !important;
    }

    .services-header-title {
        font-size: 1.8rem !important;
    }

    .services-header-subtitle {
        font-size: 0.95rem !important;
    }

    .service-card {
        min-height: 380px !important;
        border-radius: 26px !important;
    }

    .services-page #services .service-card {
        display: flex;
        flex-direction: column;
    }

    .services-page #services .service-card__visual {
        position: relative !important;
        inset: auto !important;
        width: 100% !important;
        height: 220px !important;
        transform: none !important;
        order: 1;
        margin: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .services-page #services .service-card__visual img {
        max-height: 180px;
        width: auto;
    }

    .service-card__content {
        padding: 24px !important;
    }

    .services-page #services .service-card__content {
        position: relative !important;
        width: 100% !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        order: 2;
    }

    .service-card__content h3 {
        font-size: 1.6rem !important;
    }

    .service-card__content p {
        font-size: 0.9rem !important;
    }

    .service-card > div[class*="absolute"][class*="right"] {
        right: 10px !important;
        width: 58% !important;
    }

    .service-card > div[class*="absolute"][class*="right"] img {
        max-height: 210px !important;
    }

    .service-card > div[class*="absolute"][class*="top"] {
        height: 60% !important;
    }
}

@media (max-width: 480px) {
    .service-card {
        min-height: 340px !important;
    }

    .service-card__content {
        padding: 18px !important;
    }

    .service-card__content h3 {
        font-size: 1.35rem !important;
    }

    .services-page #services .service-card__visual {
        height: 190px !important;
    }

    .services-page #services .service-card__visual img {
        max-height: 150px;
    }
}

/* CTA Banner */
@media (max-width: 768px) {
    .sv-cta-banner {
        padding: 70px 16px !important;
    }

    .sv-cta-banner h2 {
        font-size: 1.7rem !important;
    }

    .sv-cta-banner p {
        font-size: 0.95rem !important;
    }
}

/* Photo Collage */
@media (max-width: 1024px) {
    .sv-photo-collage {
        padding: 60px 20px !important;
    }
}

@media (max-width: 768px) {
    .sv-photo-collage {
        padding: 48px 16px !important;
    }

    .sv-photo-collage h2 {
        font-size: 1.6rem !important;
        margin-bottom: 24px !important;
    }
}

/* Footer Marquee */
@media (max-width: 768px) {
    .footer-marquee-section {
        padding: 40px 0 !important;
    }

    .footer-marquee-section .marquee-text {
        font-size: 2rem !important;
    }
}

/* ========================================= */
/* CASES PAGE - Mobile Adjustments */
/* ========================================= */

@media (max-width: 768px) {
    
    /* Общие стили для всех карточек кейсов */
    .cases-niche-card {
        border-radius: 32px !important;
        margin-bottom: 24px;
    }
    
    .cases-niche-card .cases-niche-card__inner {
        display: flex !important;
        flex-direction: column !important;
        padding: 24px 20px 0 20px !important;
        gap: 24px !important;
    }
    
    /* Общие стили для всех метрик (прямоугольников) - поднимаем выше */
    .cases-niche-card .grid.grid-cols-2 {
        margin-top: 20px !important;
        margin-bottom: 28px !important;
    }
    
    /* ============================================ */
    /* КАРТОЧКА 1: ОДЕЖДА (с телефоном) */
    /* ============================================ */
    
    .cases-niche-card--apparel .cases-niche-card__inner > div:first-child {
        order: 1 !important;
    }
    
    /* Верхняя строка с бейджами и процентом */
    .cases-niche-card--apparel .flex.justify-between.items-start {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 16px !important;
        margin-bottom: 20px !important;
    }
    
    /* Бейджи */
    .cases-niche-card--apparel .flex.gap-2 {
        width: 100%;
        justify-content: flex-start !important;
    }
    
    .cases-niche-card--apparel .flex.gap-2 > div {
        padding: 8px 14px !important;
        font-size: 0.8125rem !important;
    }
    
    /* Процент роста */
    .cases-niche-card--apparel .text-\[\\#10B981\].font-bold.text-4xl,
    .cases-niche-card--apparel .text-4xl {
        font-size: 2.5rem !important;
        line-height: 1 !important;
    }
    
    /* Заголовок */
    .cases-niche-card--apparel h3 {
        font-size: 1.5rem !important;
        margin-bottom: 12px !important;
        line-height: 1.3 !important;
    }
    
    /* Описание */
    .cases-niche-card--apparel p.text-gray-600 {
        font-size: 0.9375rem !important;
        margin-bottom: 20px !important;
        line-height: 1.6 !important;
    }
    
    /* Метрики (x3.2, 450%) */
    .cases-niche-card--apparel .grid.grid-cols-2 {
        gap: 12px !important;
        margin-bottom: 32px !important;
    }
    
    .cases-niche-card--apparel .grid.grid-cols-2 > div {
        padding: 16px 12px !important;
        border-radius: 12px !important;
    }
    
    .cases-niche-card--apparel .grid.grid-cols-2 .text-2xl {
        font-size: 1.5rem !important;
    }
    
    /* Блок с телефоном - делаем шире и убираем пробел снизу */
    .cases-niche-card--apparel .cases-niche-phone-wrap {
        order: 2 !important;
        height: 420px !important;
        padding: 0 !important;
        margin-top: 20px !important;
        margin-bottom: -36px !important;
        display: flex !important;
        align-items: flex-start !important;
        justify-content: center !important;
        overflow: hidden !important;
    }
    
    .cases-niche-card--apparel .cases-niche-phone {
        width: 300px !important;
        height: 620px !important;
        border-width: 10px !important;
        border-radius: 44px !important;
    }
    
    .cases-niche-card--apparel .cases-niche-blob {
        width: 300px !important;
        height: 300px !important;
        opacity: 0.25 !important;
    }
    
    .cases-niche-card--apparel .cases-niche-phone .bg-gray-50 {
        padding: 24px 16px !important;
    }
    
    /* Контент внутри телефона - пропорционально увеличиваем */
    .cases-niche-card--apparel .cases-niche-phone .text-xs {
        font-size: 0.75rem !important;
    }
    
    .cases-niche-card--apparel .cases-niche-phone .text-2xl {
        font-size: 1.75rem !important;
    }
    
    .cases-niche-card--apparel .cases-niche-phone .text-sm {
        font-size: 0.875rem !important;
    }
    
    .cases-niche-card--apparel .cases-niche-phone .h-32 {
        height: 140px !important;
    }
    
    /* ============================================ */
    /* КАРТОЧКА 2: ЭЛЕКТРОНИКА (с виджетами) */
    /* ============================================ */
    
    /* Скрываем 3D-элементы фона на мобильных */
    .cases-niche-card--electronics .cases-niche-electronics-bg {
        display: none !important;
    }
    
    /* Текстовый блок - первым */
    .cases-niche-card--electronics .flex.flex-col.h-full {
        order: 1 !important;
    }
    
    /* Верхняя строка с бейджами и процентом */
    .cases-niche-card--electronics .flex.justify-between.items-start {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 16px !important;
        margin-bottom: 20px !important;
    }
    
    /* Бейджи */
    .cases-niche-card--electronics .flex.gap-2 {
        width: 100%;
    }
    
    .cases-niche-card--electronics .flex.gap-2 > div {
        padding: 8px 14px !important;
        font-size: 0.8125rem !important;
    }
    
    /* Процент ДРР */
    .cases-niche-card--electronics .text-brand-blue.font-bold.text-3xl {
        font-size: 2rem !important;
    }
    
    /* Заголовок */
    .cases-niche-card--electronics h3 {
        font-size: 1.5rem !important;
        margin-bottom: 12px !important;
        line-height: 1.3 !important;
    }
    
    /* Описание */
    .cases-niche-card--electronics p.text-gray-400 {
        font-size: 0.9375rem !important;
        margin-bottom: 20px !important;
        line-height: 1.6 !important;
    }
    
    /* Метрики (Экономия, Прибыль) */
    .cases-niche-card--electronics .grid.grid-cols-2 {
        gap: 12px !important;
        margin-top: 0 !important;
    }
    
    .cases-niche-card--electronics .grid.grid-cols-2 > div {
        padding: 16px 12px !important;
        border-radius: 12px !important;
    }
    
    .cases-niche-card--electronics .grid.grid-cols-2 .text-2xl {
        font-size: 1.5rem !important;
    }
    
    .cases-niche-card--electronics .grid.grid-cols-2 .text-xs {
        font-size: 0.75rem !important;
    }
    
    /* Блок с виджетами - поднять выше и обрезать низ */
    .cases-niche-card--electronics .cases-niche-card__inner {
        padding-bottom: 8px !important;
    }

    .cases-niche-card--electronics .cases-niche-widgets {
        order: 2 !important;
        width: 100% !important;
        height: auto !important;
        margin-top: 0 !important;
        margin-bottom: -24px !important;
        position: relative !important;
        display: grid !important;
        gap: 10px !important;
        padding: 0 !important;
        transform: translateY(-32px) !important;
    }

    .cases-niche-card--electronics .relative.h-full.min-h-\[350px\] {
        min-height: auto !important;
        padding: 0 !important;
    }

    /* Виджеты - обычный поток */
    .cases-niche-card--electronics .cases-niche-widget {
        position: relative !important;
        transform: none !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .cases-niche-card--electronics .cases-niche-widget--chart {
        padding: 18px 16px !important;
        border-radius: 18px !important;
    }

    .cases-niche-card--electronics .cases-niche-widget--chart .flex.items-end {
        height: 90px !important;
        gap: 8px !important;
    }

    .cases-niche-card--electronics .cases-niche-widget--ctr {
        padding: 16px !important;
        border-radius: 18px !important;
    }
    
    /* ============================================ */
    /* КАРТОЧКА 3: СВЕЧИ (Candles) */
    /* ============================================ */
    
    .cases-niche-card--candle .cases-niche-card__inner {
        padding: 24px 20px 24px 20px !important;
    }
    
    .cases-niche-card--candle h3 {
        font-size: 1.5rem !important;
        margin-bottom: 12px !important;
    }
    
    .cases-niche-card--candle p {
        font-size: 0.9375rem !important;
        margin-bottom: 20px !important;
    }
    
    .cases-niche-card--candle .grid.grid-cols-2 {
        margin-top: auto !important;
        margin-bottom: 24px !important;
    }
    
    .cases-niche-card--candle .grid.grid-cols-2 > div {
        padding: 16px 12px !important;
    }
    
    /* Скрываем или уменьшаем визуальные элементы свечей */
    .cases-niche-card--candle .case-visual-bg {
        opacity: 0.3 !important;
        transform: scale(0.7) !important;
    }
    
    /* ============================================ */
    /* КАРТОЧКА 4: КОСМЕТИКА (Cosmetics) */
    /* ============================================ */
    
    .cases-niche-card--cosmetics .cases-niche-card__inner {
        padding: 24px 20px 24px 20px !important;
    }
    
    .cases-niche-card--cosmetics h3 {
        font-size: 1.5rem !important;
        margin-bottom: 12px !important;
    }
    
    .cases-niche-card--cosmetics p {
        font-size: 0.9375rem !important;
        margin-bottom: 20px !important;
    }
    
    .cases-niche-card--cosmetics .grid.grid-cols-2 {
        margin-top: auto !important;
        margin-bottom: 24px !important;
    }
    
    .cases-niche-card--cosmetics .grid.grid-cols-2 > div {
        padding: 16px 12px !important;
    }
    
    /* ============================================ */
    /* КАРТОЧКИ 5 и 6: ИГРУШКИ и АВТОХИМИЯ */
    /* ============================================ */
    
    /* Для всех остальных карточек кейсов */
    .cases-niche-card:not(.cases-niche-card--apparel):not(.cases-niche-card--electronics):not(.cases-niche-card--candle):not(.cases-niche-card--cosmetics) h3 {
        font-size: 1.5rem !important;
        margin-bottom: 12px !important;
    }
    
    .cases-niche-card:not(.cases-niche-card--apparel):not(.cases-niche-card--electronics):not(.cases-niche-card--candle):not(.cases-niche-card--cosmetics) p {
        font-size: 0.9375rem !important;
        margin-bottom: 20px !important;
    }
    
    .cases-niche-card:not(.cases-niche-card--apparel):not(.cases-niche-card--electronics):not(.cases-niche-card--candle):not(.cases-niche-card--cosmetics) .grid.grid-cols-2 {
        margin-top: auto !important;
        margin-bottom: 24px !important;
    }
    
    .cases-niche-card:not(.cases-niche-card--apparel):not(.cases-niche-card--electronics):not(.cases-niche-card--candle):not(.cases-niche-card--cosmetics) .grid.grid-cols-2 > div {
        padding: 16px 12px !important;
    }
    
    /* Скрываем или уменьшаем визуальные элементы на мобильных */
    .cases-niche-card .case-visual-bg,
    .cases-niche-card [class*="illustration"],
    .cases-niche-card [class*="3d"] {
        opacity: 0.4 !important;
        transform: scale(0.8) !important;
    }
}

/* ============================================
   MOBILE TOUCH FALLBACK ANIMATIONS
   Для устройств без hover делаем элементы видимыми
   и добавляем мягкие автоанимации
   ============================================ */

/* Мягкие keyframes для мобильных */
@keyframes mobile-breathe {
    0%, 100% {
        opacity: 0.85;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.02);
    }
}

@keyframes mobile-float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-4px);
    }
}

@keyframes mobile-pulse-soft {
    0%, 100% {
        box-shadow: 0 4px 20px rgba(37, 99, 235, 0.15);
    }
    50% {
        box-shadow: 0 6px 28px rgba(37, 99, 235, 0.25);
    }
}

@keyframes mobile-glow-fade {
    0%, 100% {
        opacity: 0.3;
    }
    50% {
        opacity: 0.6;
    }
}

@keyframes mobile-shimmer {
    0%, 100% {
        opacity: 0.7;
        transform: translateX(0);
    }
    50% {
        opacity: 1;
        transform: translateX(2px);
    }
}

/* Применяем только для устройств без hover (тач-устройства) */
@media (hover: none) and (pointer: coarse) {
    
    /* ========== КНОПКИ ========== */
    /* Показываем внутреннее свечение кнопок */
    .btn-primary::before {
        opacity: 0.5 !important;
        animation: mobile-glow-fade 3s ease-in-out infinite;
    }
    
    /* Мягкая пульсация для CTA кнопок */
    .hero-text-wrapper .btn-primary,
    .sv-btn-primary,
    .ev-studio-cta-btn {
        animation: mobile-pulse-soft 4s ease-in-out infinite;
    }
    
    /* ========== КАРТОЧКИ ========== */
    /* Показываем hover-эффекты карточек */
    .card-hover::before {
        opacity: 0.3 !important;
        animation: mobile-shimmer 5s ease-in-out infinite;
    }
    
    /* Step cards - показываем фоновый градиент */
    .step-card::before,
    .work-step::before {
        opacity: 0.4 !important;
        animation: mobile-glow-fade 4s ease-in-out infinite;
    }
    
    /* Иконки в step/work cards - легкое покачивание */
    .step-card .feature-icon,
    .work-step .work-step-icon,
    .work-step .apple-icon-wrapper {
        animation: mobile-float 3s ease-in-out infinite;
    }
    
    /* ========== WHY BENTO GRID ========== */
    /* Показываем свечение орбов */
    .why-bento-glow {
        opacity: 0.5 !important;
        animation: mobile-glow-fade 5s ease-in-out infinite;
    }
    
    /* Показываем блик при наведении */
    .why-bento-cell::after {
        opacity: 0.15 !important;
        animation: mobile-shimmer 6s ease-in-out infinite;
    }
    
    /* ========== DESIGN SERVICES SLIDER ========== */
    /* Показываем glow-эффект на карточках */
    .design-services-slider .infographics-cascade-item::after {
        opacity: 0.3 !important;
        animation: mobile-glow-fade 4s ease-in-out infinite;
    }
    
    /* Карточки инфографики - легкое дыхание */
    .infographics-cascade-item {
        animation: mobile-breathe 5s ease-in-out infinite;
    }
    
    /* Разная фаза для разных карточек */
    .infographics-cascade-item--front {
        animation-delay: 0s;
    }
    .infographics-cascade-item--mid {
        animation-delay: 1.5s;
    }
    .infographics-cascade-item--back {
        animation-delay: 3s;
    }
    
    /* ========== HERO FLOAT CARDS ========== */
    /* Плавающие карточки возле телефона - постоянная анимация */
    .float-card {
        animation: mobile-float 4s ease-in-out infinite !important;
    }
    
    .float-card:nth-child(1) { animation-delay: 0s !important; }
    .float-card:nth-child(2) { animation-delay: 0.8s !important; }
    .float-card:nth-child(3) { animation-delay: 1.6s !important; }
    .float-card:nth-child(4) { animation-delay: 2.4s !important; }
    
    /* ========== SOLUTIONS CAROUSEL CARDS ========== */
    /* UI Mock Cards - легкое дыхание */
    .ui-mock-card--placard {
        animation: mobile-breathe 5s ease-in-out infinite;
    }
    
    /* ========== FAQ CARDS ========== */
    .faq-item,
    .faq-card {
        animation: mobile-breathe 6s ease-in-out infinite;
    }
    
    .faq-item:nth-child(odd),
    .faq-card:nth-child(odd) {
        animation-delay: 1.5s;
    }
    
    /* ========== FOOTER STARS ========== */
    .footer-star {
        animation: mobile-glow-fade 3s ease-in-out infinite !important;
    }
    
    /* ========== ORBIT ITEMS ========== */
    .orbit-item {
        animation: mobile-pulse-soft 4s ease-in-out infinite;
    }
    
    /* ========== TRUST BENTO CARDS ========== */
    .ev-bento-card {
        animation: mobile-breathe 5s ease-in-out infinite;
    }
    
    .ev-bento-card:nth-child(even) {
        animation-delay: 2s;
    }
    
    /* ========== PROCESS/WORK STEPS ========== */
    .process-step,
    .howitworks2-card {
        animation: mobile-breathe 5s ease-in-out infinite;
    }
    
    .process-step:nth-child(2),
    .howitworks2-card:nth-child(2) {
        animation-delay: 1s;
    }
    
    .process-step:nth-child(3),
    .howitworks2-card:nth-child(3) {
        animation-delay: 2s;
    }
    
    /* ========== MARKETPLACE LOGOS ========== */
    .marketplace-logo-item,
    .marketplace-logo {
        animation: mobile-float 4s ease-in-out infinite;
    }
    
    .marketplace-logo-item:nth-child(odd),
    .marketplace-logo:nth-child(odd) {
        animation-delay: 1s;
    }
    
    /* ========== CASES CARDS ========== */
    .cases-niche-card {
        animation: mobile-breathe 6s ease-in-out infinite;
    }
    
    .cases-niche-card:nth-child(even) {
        animation-delay: 2s;
    }
}