/* ============================================================
               Manrope — локальный шрифт
               ============================================================ */
            @font-face {
                font-family: 'Manrope';
                src: url('/fonts/Manrope-Regular.woff2') format('woff2');
                font-weight: 400;
                font-style: normal;
                font-display: swap;
            }

            :root {
                --primary: #0f172a;
                --primary-light: #334155;
                --accent: #0369a1;
                --accent-light: #38bdf8;
                --accent-dark: #0369a1;
                --success: #047857;
                --warning: #f59e0b;
                --surface: #f8fafc;
                --gray-text: #64748b;
                --border-radius-lg: 1.5rem;
                --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
                --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
                --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
            }

            body {
                font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
                color: var(--primary);
                background-color: #fff;
                line-height: 1.5;
                overflow-x: hidden;
            }

                    /* --- Навигация --- */
                    .navbar {
                        background: rgba(255, 255, 255, 0.8);
                        backdrop-filter: blur(12px);
                        box-shadow: 0 1px 0 0 rgb(0 0 0 / 0.05);
                        padding: 1rem 0;
                        transition: all 0.3s;
                    }

                    .navbar-brand {
                        font-weight: 800;
                        font-size: 1.4rem;
                        color: var(--primary) !important;
                        display: flex;
                        align-items: center;
                        gap: 10px;
                    }

                    .navbar-brand span { color: var(--accent); }
                    .navbar-brand img { height: 36px; }

                    .brand-text { display: flex; flex-direction: column; line-height: 1.2; }
                    .brand-main { font-weight: 800; font-size: 1.4rem; color: var(--primary); }
                    .brand-main span { color: var(--accent); }
                    .brand-suffix { font-size: 0.75rem; font-weight: 400; color: var(--gray-text); letter-spacing: 0.3px; margin-top: -4px; }

                    .nav-link {
                        font-weight: 500;
                        color: var(--primary-light) !important;
                        margin: 0 0.5rem;
                        padding: 0.5rem 1rem !important;
                        border-radius: 8px;
                        transition: all 0.2s;
                    }
                    .nav-link:hover {
                        color: var(--accent) !important;
                        background: rgba(14, 165, 233, 0.05);
                    }

                    /* Стиль для ссылки калькулятора */
            /* Стиль для ссылки поиска на карьерах - прозрачная с легким градиентом */
            .calculator-link {
                background: linear-gradient(135deg, rgba(180, 83, 9, 0.02) 0%, rgba(217, 119, 6, 0.02) 100%) !important;
                border: none !important;
                border-radius: 40px !important;
                color: #b45309 !important;
                padding: 0.5rem 1.2rem !important;
                margin: 0 0.5rem;
                box-shadow: 0 2px 8px rgba(217, 119, 6, 0.02);
                transition: all 0.25s ease !important;
                font-weight: 500;
                font-size: 0.95rem;
                position: relative;
                z-index: 1;
                opacity: 0.9;
                backdrop-filter: blur(2px);
            }

            /* Усиление градиента при наведении */
            .calculator-link:hover {
                background: linear-gradient(135deg, rgba(180, 83, 9, 0.06) 0%, rgba(217, 119, 6, 0.06) 100%) !important;
                color: #92400e !important;
                transform: translateY(-1px);
                box-shadow: 0 4px 12px rgba(217, 119, 6, 0.04);
                opacity: 1;
                border: none !important;
            }

            .calculator-link i {
                color: #b45309;
                font-size: 0.9rem;
                opacity: 0.7;
                transition: transform 0.2s ease, opacity 0.2s ease;
            }

            .calculator-link:hover i {
                transform: translateY(-1px);
                opacity: 1;
            }

            /* Адаптация для мобильных */
            @media (max-width: 991px) {
                .calculator-link {
                    margin: 0.5rem 0;
                    display: inline-block;
                    text-align: center;
                    width: fit-content;
                    padding: 0.4rem 1rem !important;
                    background: linear-gradient(135deg, rgba(180, 83, 9, 0.03) 0%, rgba(217, 119, 6, 0.03) 100%) !important;
                }
            }

                    /* --- Кнопки --- */
                    .btn {
                        border-radius: 10px;
                        padding: 0.6rem 1.5rem;
                        font-weight: 600;
                        font-size: 0.95rem;
                        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
                        border: none;
                    }
                    .btn-primary { background: var(--accent); box-shadow: 0 4px 14px 0 rgba(14, 165, 233, 0.25); }
                    .btn-primary:hover { background: var(--accent-dark); transform: translateY(-1px); box-shadow: 0 6px 20px rgba(14, 165, 233, 0.3); }
                    .btn-outline-primary {
                        color: var(--accent-dark);
                        border: 2px solid rgba(14, 165, 233, 0.2);
                        background: transparent;
                    }
                    .btn-outline-primary:hover { background: var(--accent); color: white; border-color: var(--accent); }
                    .btn-light { background: white; color: var(--primary); }
                    .btn-light:hover { background: #f1f5f9; transform: translateY(-1px); }

                    /* Увеличенная кнопка */
            .btn-large {
                padding: 1rem 2.5rem !important;
                font-size: 1.2rem !important;
                font-weight: 700 !important;
                border-radius: 60px !important;
                box-shadow: 0 10px 25px rgba(255, 255, 255, 0.15) !important;
                letter-spacing: 0.3px;
                transition: all 0.3s ease !important;
                border: 2px solid rgba(255, 255, 255, 0.2) !important;
            }

            .btn-large:hover {
                transform: translateY(-3px) scale(1.02) !important;
                box-shadow: 0 20px 30px rgba(255, 255, 255, 0.2) !important;
                background: white !important;
                border-color: var(--accent) !important;
            }

            .btn-large i {
                font-size: 1.3rem;
                color: var(--accent);
                transition: transform 0.3s ease;
            }

            .btn-large:hover i {
                transform: rotate(12deg) scale(1.1);
            }

            /* Адаптация для мобильных */
            @media (max-width: 576px) {
                .btn-large {
                    padding: 0.9rem 2rem !important;
                    font-size: 1.1rem !important;
                    width: 100%;
                }
            }

                    /* --- Hero Секция --- */
                    .hero {
                        background: var(--primary);
                        color: white;
                        padding: 160px 0 120px;
                        position: relative;
                        overflow: hidden;
                        background-image:
                            linear-gradient(135deg, #0f172a 0%, #1e293b 100%),
                            linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
                            linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
                        background-size: 100% 100%, 40px 40px, 40px 40px;
                    }
                    .hero::before {
                        content: "";
                        position: absolute;
                        top: -200px;
                        right: -100px;
                        width: 600px;
                        height: 600px;
                        background: radial-gradient(circle, var(--accent) 0%, transparent 70%);
                        opacity: 0.1;
                        filter: blur(60px);
                        pointer-events: none;
                    }
                    .hero-content { position: relative; z-index: 2; }
                    .hero h1 {
                        font-size: 3.5rem;
                        font-weight: 800;
                        margin-bottom: 1.5rem;
                        letter-spacing: -0.02em;
                        line-height: 1.1;
                        background: linear-gradient(to right, #ffffff, #94a3b8);
                        -webkit-background-clip: text;
                        -webkit-text-fill-color: transparent;
                    }
                    .hero .lead {
                        font-size: 1.25rem;
                        opacity: 0.8;
                        margin-bottom: 2.5rem;
                        font-weight: 400;
                        max-width: 600px;
                    }

                    .alert-info-box {
                        background: rgba(255,255,255,0.05);
                        backdrop-filter: blur(12px);
                        border-radius: 50px;
                        padding: 10px 20px;
                        display: inline-flex;
                        align-items: center;
                        margin-bottom: 30px;
                        border: 1px solid rgba(255,255,255,0.1);
                        font-size: 0.9rem;
                    }
                    .alert-info-box i { color: var(--accent-light); margin-right: 10px; font-size: 1.1rem; }
                    .alert-info-box a { color: white; font-weight: 600; text-decoration: none; margin-left: 5px; }
                    .alert-info-box a:hover { text-decoration: underline; }

                    /* ---------- ROTATOR (икекст) ---------- */
                    .hero-rotator {
                        position: relative;
                        min-height: 2.8rem;               /* высота под одну строку */
                        font-size: 1.1rem;
                        color: #fff;
                        text-align: left;                 /* выравнивание по левому краю */
                    }
                    .rotator-item {
                        position: absolute;
                        inset: 0;
                        opacity: 0;
                        display: flex;
                        align-items: center;              /* иконка и текст в одну линию */
                        gap: 0.6rem;                      /* отступ между иконкой и текстом */
                        justify-content: flex-start;     /* слева */
                        transition: opacity .6s ease-in-out;
                    }
                    .rotator-item.active { opacity: 1; }

                    /* Если хотите анимацию без JS, раскомментируйте ниже и удалите JS‑блок */
                    /*
                    @keyframes fade-in-out {
                        0%   { opacity: 0; }
                        10%  { opacity: 1; }
                        45%  { opacity: 1; }
                        55%  { opacity: 0; }
                        100% { opacity: 0; }
                    }
                    .rotator-item {
                        animation: fade-in-out 18s infinite;
                    }
                    .rotator-item:nth-child(1) { animation-delay: 0s; }
                    .rotator-item:nth-child(2) { animation-delay: 6s; }
                    .rotator-item:nth-child(3) { animation-delay: 12s; }
                    */

                    /* --- Сравнение (Excel vs CRM) --- */
                    .compare-section { padding: 80px 0; background: white; }
                    .compare-card { padding: 40px; border-radius: var(--border-radius-lg); height: 100%; text-align: center; }
                    .compare-card.old-way { background: #f8fafc; border: 1px solid #e2e8f0; }
                    .compare-card.new-way { background: #f0fdf4; border: 2px solid #86efac; box-shadow: 0 10px 30px -10px rgba(16, 185, 129, 0.2); }
                    .compare-icon { font-size: 3rem; margin-bottom: 20px; }
                    .compare-title { font-weight: 700; font-size: 1.2rem; margin-bottom: 20px; }
                    .compare-list { text-align: left; list-style: none; padding: 0; }
                    .compare-list li { padding: 8px 0; display: flex; align-items: center; gap: 10px; font-size: 0.95rem; color: var(--primary-light); }

                    /* --- Секция Тарифов --- */
                    .tariffs { padding: 100px 0; background: var(--surface); position: relative; }
                    .section-label {
                        display: inline-block;
                        background: rgba(3, 105, 161, 0.1);  /* Было rgba(14, 165, 233, 0.1) */
                        color: #0369a1;                      /* Было var(--accent-dark) */
                        padding: 6px 16px;
                        border-radius: 50px;
                        font-weight: 600;
                        font-size: 0.85rem;
                        margin-bottom: 1rem;
                    }
                    .section-title { font-size: 2.5rem; font-weight: 800; margin-bottom: 15px; color: var(--primary); letter-spacing: -0.02em; }
                    .section-subtitle { text-align: center; font-size: 1.1rem; color: var(--gray-text); max-width: 600px; margin: 0 auto 60px; }
                    .tariff-card {
                        background: white;
                        border-radius: var(--border-radius-lg);
                        padding: 40px 30px;
                        box-shadow: var(--shadow-md);
                        transition: all 0.3s ease;
                        position: relative;
                        height: 100%;
                        border: 1px solid transparent;
                        display: flex;
                        flex-direction: column;
                    }
                    .tariff-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-xl); border-color: rgba(14, 165, 233, 0.2); }
                    .tariff-header { margin-bottom: 20px; }
                    .tariff-badge { display: inline-block; padding: 6px 12px; border-radius: 8px; font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 15px; }
                    .bg-start { background: #f1f5f9; color: var(--primary); }
                    .bg-optimal { background: #ecfdf5; color: #047857; }
                    .bg-pro { background: #fffbeb; color: #92400e; }
                    .tariff-name { font-size: 1.5rem; font-weight: 700; color: var(--primary); margin-bottom: 5px; }
                    .tariff-trucks { color: var(--gray-text); font-size: 0.95rem; margin-bottom: 0; }
                    .price-block { background: #f8fafc; padding: 20px; border-radius: 12px; margin-bottom: 25px; border: 1px solid #f1f5f9; }
                    .price { font-size: 2.5rem; font-weight: 800; color: var(--primary); line-height: 1; }
                    .price small { font-size: 1rem; font-weight: 500; color: var(--gray-text); }
                    .price-note { font-size: 0.85rem; color: var(--gray-text); margin-top: 8px; display: flex; align-items: center; gap: 5px; }
                    .tariff-features { list-style: none; padding: 0; margin: 30px 0; flex-grow: 1; }
                    .tariff-features li { padding: 10px 0; display: flex; align-items: flex-start; gap: 12px; color: var(--primary-light); font-size: 0.95rem; border-bottom: 1px solid #f1f5f9; }
                    .tariff-features li:last-child { border-bottom: none; }
                    .tariff-features i { color: var(--accent); font-size: 1.2rem; margin-top: 2px; }

                    /* --- Преимущества --- */
                    .benefits { padding: 100px 0; background: white; }
                    .benefit-item { padding: 30px; border-radius: 16px; transition: all 0.3s; height: 100%; background: white; border: 1px solid #f1f5f9; }
                    .benefit-item:hover { background: var(--surface); transform: translateY(-5px); box-shadow: var(--shadow-md); }
                    .benefit-icon {
                        width: 48px;
                        height: 48px;
                        border-radius: 12px;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        font-size: 1.5rem;
                        margin-bottom: 20px;
                        background: rgba(14, 165, 233, 0.1);
                        color: var(--accent);
                    }
                    .benefit-item h4 { font-weight: 700; margin-bottom: 10px; color: var(--primary); font-size: 1.1rem; }
                    .benefit-item p { color: var(--gray-text); margin-bottom: 0; font-size: 0.9rem; line-height: 1.6; }

                    /* --- Как начать --- */
                    .how-it-works {
                        padding: 100px 0;
                        background: var(--primary);
                        color: white;
                        position: relative;
                    }
                    .how-it-works .section-title,
                    .how-it-works .section-subtitle { color: white; }
                    .how-it-works .section-label { background: rgba(255,255,255,0.1); color: var(--accent-light); }
                    .step-card {
                        background: rgba(255,255,255,0.05);
                        border: 1px solid rgba(255,255,255,0.1);
                        padding: 30px;
                        border-radius: 16px;
                        height: 100%;
                        text-align: center;
                        transition: all 0.3s;
                    }
                    .step-card:hover { background: rgba(255,255,255,0.1); transform: translateY(-5px); }
                    .step-icon {
                        width: 60px;
                        height: 60px;
                        background: var(--accent);
                        color: white;
                        border-radius: 16px;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        font-size: 1.5rem;
                        font-weight: 700;
                        margin: 0 auto 20px;
                        box-shadow: 0 10px 15px -3px rgba(14, 165, 233, 0.3);
                    }
                    .step h4 { font-weight: 700; margin-bottom: 10px; color: white; }
                    .step p { color: rgba(255,255,255,0.7); margin-bottom: 0; font-size: 0.9rem; }

                    /* --- Футер --- */
                    .footer {
                        background: #0f172a;
                        color: white;
                        padding: 80px 0 30px;
                    }
                    .footer h5 { font-weight: 700; margin-bottom: 25px; color: white; font-size: 1rem; }
                    .footer a {
                        color: rgba(255,255,255,0.7);
                        text-decoration: none;
                        transition: color 0.3s;
                        display: block;
                        margin-bottom: 12px;
                        font-size: 0.9rem;
                    }
                    .footer a:hover { color: white; }
                    .footer-contacts {
                        background: rgba(255,255,255,0.05);
                        padding: 20px;
                        border-radius: 12px;
                        border: 1px solid rgba(255,255,255,0.05);
                    }
                    .footer-contacts p { color: rgba(255,255,255,0.7); font-size: 0.9rem; margin-bottom: 8px; }
                    .footer-bottom {
                        border-top: 1px solid rgba(255,255,255,0.1);
                        margin-top: 60px;
                        padding-top: 30px;
                        text-align: center;
                        color: rgba(255,255,255,0.7);
                        font-size: 0.85rem;
                    }

                    /* --- Модальное окно --- */
                    .modal-content { border-radius: 20px; border: none; }
                    .modal-header {
                        background: var(--primary);
                        color: white;
                        border-radius: 20px 20px 0 0;
                        padding: 20px 30px;
                        border-bottom: none;
                    }
                    .modal-header .btn-close { filter: brightness(0) invert(1); opacity: 0.8; }
                    .modal-header .btn-close:hover { opacity: 1; }
                    .modal-body { padding: 30px; }
                    .offer-content { max-height: 70vh; overflow-y: auto; }
                    .offer-content h4 { color: var(--primary); margin-top: 25px; margin-bottom: 15px; font-weight: 700; font-size: 1.1rem; }
                    .legal-req {
                        background: #f0f9ff;
                        border-left: 4px solid var(--accent);
                        padding: 20px;
                        border-radius: 0 10px 10px 0;
                        margin: 25px 0;
                    }

                    @media (max-width: 768px) {
                        .hero { padding: 100px 0 60px; }
                        .hero h1 { font-size: 2.2rem; }
                        .section-title { font-size: 2rem; }
                        .navbar { background: white; }
                        .brand-suffix { font-size: 0.75rem; }
                    }
        /* --- Элегантное, едва заметное наведение для карточек --- */
        .compare-card {
            transition: box-shadow 0.4s cubic-bezier(0.23, 1, 0.32, 1), border-color 0.3s ease;
            /* Убираем transform, оставляем только тень */
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.01); /* Почти незаметно, но нужно для перехода */
            border: 1px solid transparent; /* Подготовка для смены обводки */
        }

        /* Базовая тень при наведении — очень легкая */
        .compare-card:hover {
            box-shadow: 0 8px 20px -6px rgba(0, 0, 0, 0.08);
        }

        /* Индивидуальные цветные акценты — минимальные */

        /* Карточка Excel (розоватая) */
        .compare-card.old-way[style*="background: #fff5f5"]:hover {
            box-shadow: 0 8px 20px -6px rgba(185, 28, 28, 0.08); /* Легкий розовый оттенок */
            border-color: rgba(185, 28, 28, 0.1); /* Очень тонкая обводка */
        }

        /* Карточка Калькулятора (светло-серая) */
        .compare-card.old-way[style*="background: #f8fafc"]:hover {
            box-shadow: 0 8px 20px -6px rgba(14, 165, 233, 0.08); /* Легкий голубой оттенок */
            border-color: rgba(14, 165, 233, 0.1);
        }

        /* Карточка НерудCRM (зеленоватая) */
        .compare-card.new-way:hover {
            box-shadow: 0 8px 25px -8px rgba(16, 185, 129, 0.12); /* Чуть больше, но все еще мягко */
            border-color: rgba(16, 185, 129, 0.15);
        }
                    .footer h3.footer-brand {
            font-weight: 700;
            margin-bottom: 25px;
            color: white;
            font-size: 1rem;
        }
                    /* Исправление контрастности для text-success */
        .text-success {
            color: #047857 !important;
        }

        /* Исправление контрастности для цен внутри price-block */
        .price-block .price[style*="color: #047857"] {
            color: #047857 !important;
        }

        /* Исправление для "экономия" текста */
        span.text-success.small.ms-2 {
            color: #047857 !important;
        }
                    .footer h3 {
            font-weight: 700;
            margin-bottom: 25px;
            color: white;
            font-size: 1rem;
        }
                    .footer h4, .footer h5 {
            font-weight: 700;
            margin-bottom: 25px;
            color: white;
            font-size: 1rem;
        }