/* Modern visual refresh shared across all Volektra pages. */
:root {
    --primary-blue: #0077c8;
    --primary-green: #18a058;
    --teal-middle: #00a7b5;
    --light-teal: #d8f6f4;
    --light-green: #e6f6ec;
    --dark-gray: #172033;
    --light-gray: #f5f7fb;
    --white: #ffffff;
    --ink: #111827;
    --muted: #657286;
    --surface: #ffffff;
    --surface-soft: #f8fafc;
    --line: #e4eaf2;
    --accent: #00a7b5;
    --accent-strong: #18a058;
    --shadow-card: 0 16px 42px rgba(17, 24, 39, 0.09);
    --shadow-soft: 0 10px 28px rgba(17, 24, 39, 0.08);
    --gradient-primary: linear-gradient(135deg, #0077c8, #00a7b5 48%, #18a058);
    --gradient-horizontal: linear-gradient(90deg, #0077c8, #00a7b5, #18a058);
}

html {
    scroll-behavior: smooth;
}

body {
    background: var(--surface-soft);
    color: var(--ink);
    font-size: 16px;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body,
button,
input,
textarea,
select {
    letter-spacing: 0;
}

a {
    color: var(--primary-blue);
}

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

p {
    color: var(--muted);
}

section {
    padding: 92px 0;
}

section h2 {
    color: var(--ink);
    font-size: 2.4rem;
    line-height: 1.18;
    margin-bottom: 22px;
    letter-spacing: 0;
}

section h3 {
    color: var(--ink);
    font-size: 1.3rem;
    line-height: 1.3;
    letter-spacing: 0;
}

.section-intro,
.lead {
    color: var(--muted);
}

.navbar {
    background: rgba(255, 255, 255, 0.92) !important;
    border-bottom: 1px solid rgba(228, 234, 242, 0.82);
    box-shadow: 0 12px 34px rgba(17, 24, 39, 0.08);
    padding: 12px 0 !important;
    backdrop-filter: blur(18px);
}

.navbar-brand img {
    max-height: 42px;
    width: auto;
}

.navbar-light .navbar-toggler {
    border-color: var(--line);
    border-radius: 8px;
    padding: 8px 10px;
}

.navbar-light .navbar-nav .nav-link {
    color: #263248;
    border-radius: 8px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.88rem;
    font-weight: 600;
    margin: 0 3px;
    padding: 9px 13px;
}

.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link.active,
.navbar-light .navbar-nav .active > .nav-link,
.navbar-light .navbar-nav .nav-item.active .nav-link {
    background: #edf7fb;
    color: var(--primary-blue);
}

.btn {
    border-radius: 8px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    letter-spacing: 0;
    padding: 11px 22px;
}

.btn-primary {
    background: var(--primary-blue);
    border: 1px solid var(--primary-blue);
    box-shadow: 0 12px 26px rgba(0, 119, 200, 0.22);
}

.btn-primary:hover,
.btn-primary:focus {
    background: #005f9f;
    border-color: #005f9f;
    box-shadow: 0 16px 34px rgba(0, 119, 200, 0.28);
    transform: translateY(-2px);
}

.btn-outline-primary {
    border: 1px solid var(--primary-blue);
    color: var(--primary-blue);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
    background: var(--primary-blue);
    border-color: var(--primary-blue);
    color: var(--white);
    transform: translateY(-2px);
}

.hero,
.technology-hero,
.solutions-hero,
.benefits-hero,
.contact-hero,
.about-hero,
.downloads {
    background:
        linear-gradient(135deg, rgba(10, 24, 39, 0.96), rgba(8, 66, 88, 0.94) 48%, rgba(15, 126, 104, 0.93)),
        linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px),
        linear-gradient(0deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px) !important;
    background-size: auto, 72px 72px, 72px 72px !important;
    color: var(--white);
    overflow: hidden;
    position: relative;
}

.hero,
.technology-hero,
.solutions-hero,
.benefits-hero,
.contact-hero {
    padding: 150px 0 86px !important;
}

.about-hero {
    height: auto !important;
    min-height: 480px;
    margin-top: 0 !important;
    padding: 145px 20px 90px !important;
}

.downloads {
    padding: 140px 0 90px !important;
}

.hero {
    text-align: left;
}

.hero h1,
.technology-hero h1,
.solutions-hero h1,
.benefits-hero h1,
.contact-hero h1,
.about-hero h1,
.downloads h1,
.downloads h2 {
    color: var(--white);
    font-size: 3.5rem;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: 0;
    margin-bottom: 18px;
}

.hero .lead,
.technology-hero .lead,
.solutions-hero .lead,
.benefits-hero .lead,
.contact-hero .lead,
.about-hero .subtitle,
.downloads .lead {
    color: rgba(255, 255, 255, 0.82);
    font-size: 1.22rem;
    line-height: 1.6;
    max-width: 720px;
}

.hero .text-center {
    text-align: left !important;
}

.hero-tagline {
    justify-content: flex-start;
    gap: 10px;
}

.hero-tagline span {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.9);
    margin: 0;
    padding: 8px 12px;
}

.hero-image,
.tech-image,
.solutions-image,
.solution-image,
.impact-image,
.supply-chain-image,
.cost-image,
.performance-image,
.mission-image,
.story-image,
.validation-image,
.future-image,
.component-image,
.motor-image-container {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: var(--shadow-card);
    overflow: hidden;
}

.hero-image {
    background: transparent;
    border: 0;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.22);
}

.benefits,
.market-challenge,
.team,
.partners,
.key-benefits,
.supply-chain,
.performance-superiority,
.testimonials,
.validation-section,
.ip-section,
.inquiry-types,
.faq,
.downloads + .footer {
    background: var(--surface-soft);
}

.technology,
.technology-overview,
.how-it-works,
.virtual-magnet-stack,
.performance,
.performance-comparison,
.environmental-impact,
.cost-advantage,
.micromobility,
.custom-solutions,
.case-studies,
.contact-main,
.newsletter,
.story,
.leadership,
.values {
    background: var(--white);
}

.benefit-card,
.challenge-card,
.team-member,
.team-member-detailed,
.value-card,
.component-card,
.stack-card,
.validation-card,
.ip-card,
.case-study-card,
.testimonial-card,
.contact-card,
.contact-form,
.contact-form-container,
.contact-info,
.timeline-content,
.stat-card,
.newsletter-container,
.faq .card,
.company-logo,
.partner-logo,
.media-logo {
    background: var(--surface) !important;
    border: 1px solid var(--line);
    border-radius: 8px !important;
    box-shadow: var(--shadow-soft) !important;
}

.benefit-card,
.challenge-card,
.team-member,
.team-member-detailed,
.value-card,
.component-card,
.stack-card,
.validation-card,
.ip-card,
.case-study-card,
.testimonial-card,
.contact-card,
.stat-card {
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.benefit-card h3,
.benefit-card h4,
.challenge-card h3,
.team-member h3,
.team-member-detailed h3,
.value-card h3,
.component-card h3,
.stack-card h3,
.validation-card h3,
.ip-card h3,
.case-study-card h3,
.testimonial-card h3,
.contact-card h3,
.stat-card h3 {
    color: var(--ink);
}

.benefit-card:hover,
.challenge-card:hover,
.team-member:hover,
.team-member-detailed:hover,
.value-card:hover,
.component-card:hover,
.stack-card:hover,
.validation-card:hover,
.ip-card:hover,
.case-study-card:hover,
.testimonial-card:hover,
.contact-card:hover,
.stat-card:hover,
.company-logo:hover,
.partner-logo:hover,
.media-logo:hover {
    border-color: rgba(0, 167, 181, 0.34);
    box-shadow: var(--shadow-card) !important;
    transform: translateY(-4px);
}

.benefit-card .icon,
.value-card .icon,
.stack-card .icon,
.contact-card .icon,
.mission-icon,
.icon-large,
.contact-method .icon {
    align-items: center;
    background: linear-gradient(135deg, #edf7fb, #e8f8ee);
    border: 1px solid #d8edf1;
    border-radius: 8px;
    color: var(--primary-blue) !important;
    display: inline-flex;
    height: 58px;
    justify-content: center;
    margin-bottom: 20px;
    width: 58px;
}

.benefit-card .icon,
.value-card .icon,
.stack-card .icon,
.contact-card .icon,
.icon-large {
    font-size: 1.65rem !important;
}

.benefit-card .icon i,
.value-card .icon i,
.stack-card .icon i,
.contact-card .icon i,
.icon-large i,
.contact-method .icon i {
    font-size: inherit !important;
    line-height: 1;
    margin: 0 !important;
}

.challenge-card h3,
.stat-card h3,
.stats-section .number,
.performance-table .highlight,
.comparison-table .highlight,
.blue-heading,
.ip-card h3,
.member-title {
    color: var(--primary-blue) !important;
}

.tech-features li,
.solution-features li,
.impact-list li,
.member-achievements li {
    color: var(--muted);
}

.tech-features li:before,
.solution-features li:before,
.impact-list li:before,
.member-achievements li:before {
    color: var(--accent-strong);
}

.performance-table,
.comparison-table {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: var(--shadow-soft);
    overflow: hidden;
}

.performance-table thead,
.comparison-table thead {
    background: #122033;
}

.performance-table th,
.performance-table td,
.comparison-table th,
.comparison-table td {
    border-color: var(--line);
    padding: 16px;
    vertical-align: middle;
}

.timeline:before {
    background: linear-gradient(180deg, var(--primary-blue), var(--accent-strong));
    width: 3px;
}

.timeline-marker {
    background: var(--white);
    border: 4px solid var(--primary-blue);
    box-shadow: 0 0 0 5px #edf7fb;
}

.member-image {
    background: #eef3f8;
    border-radius: 8px !important;
}

.member-image img {
    display: block;
}

.media-logo,
.partner-logo,
.company-logo {
    height: 118px;
    margin: 12px;
    padding: 18px;
}

.partner-logo {
    filter: none;
}

.media-logo img,
.partner-logo img,
.company-logo img {
    filter: grayscale(100%);
    max-height: 78px;
    max-width: 90%;
    opacity: 0.72;
    object-fit: contain;
    transition: filter 0.22s ease, opacity 0.22s ease;
}

.media-logo:hover img,
.partner-logo:hover img,
.company-logo:hover img {
    filter: grayscale(0%);
    opacity: 1;
}

.stats-section {
    background: transparent;
    border-radius: 0;
    gap: 24px;
    padding: 24px 0 44px;
}

.stats-section .stat-card {
    max-width: 320px;
    width: 100%;
}

.contact-method {
    align-items: flex-start;
    display: flex;
    gap: 16px;
    margin: 26px 0;
}

.contact-method .details h3 {
    margin-bottom: 4px;
}

.contact-form,
.contact-form-container,
.contact-info {
    padding: 34px;
}

.form-control {
    border: 1px solid #d8e0eb;
    border-radius: 8px;
    color: var(--ink);
    min-height: 50px;
}

.form-control:focus {
    border-color: var(--primary-blue);
    box-shadow: 0 0 0 0.18rem rgba(0, 119, 200, 0.12);
}

.faq .card {
    margin-bottom: 14px;
    overflow: hidden;
}

.faq .card-header {
    background: var(--white);
    border-bottom: 1px solid var(--line);
    padding: 0;
}

.faq .btn-link {
    color: var(--ink);
    font-weight: 700;
    padding: 18px 20px;
    text-decoration: none;
}

.faq .btn-link:hover {
    color: var(--primary-blue);
    text-decoration: none;
}

.newsletter {
    background: var(--surface-soft);
}

.newsletter-container {
    padding: 36px;
}

.cta {
    background:
        linear-gradient(135deg, #101827, #07455f 52%, #0b7e6c) !important;
    color: var(--white);
}

.cta p,
.cta-stat p {
    color: rgba(255, 255, 255, 0.78);
}

.cta .btn {
    background: var(--white);
    border-color: var(--white);
    color: var(--primary-blue);
}

.cta .btn:hover {
    background: #eaf7fb;
    color: #005f9f;
}

.footer {
    background: #101827;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--white);
    padding-top: 72px;
}

.footer p,
.footer-links a,
.footer-contact a {
    color: rgba(255, 255, 255, 0.72);
}

.footer h5 {
    color: var(--white);
}

.footer h5:after {
    background: var(--accent);
}

.footer-links a:hover,
.footer-contact a:hover,
.footer-contact i {
    color: #70e3d4;
}

.social-icon {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
}

.social-icon:hover {
    background: var(--primary-blue);
}

@media (max-width: 991.98px) {
    section {
        padding: 72px 0;
    }

    .hero,
    .technology-hero,
    .solutions-hero,
    .benefits-hero,
    .contact-hero,
    .downloads {
        padding: 132px 0 72px !important;
        text-align: center;
    }

    .hero .text-center {
        text-align: center !important;
    }

    .hero-tagline {
        justify-content: center;
    }

    .hero h1,
    .technology-hero h1,
    .solutions-hero h1,
    .benefits-hero h1,
    .contact-hero h1,
    .about-hero h1,
    .downloads h1,
    .downloads h2 {
        font-size: 2.7rem;
    }

    .hero .lead,
    .technology-hero .lead,
    .solutions-hero .lead,
    .benefits-hero .lead,
    .contact-hero .lead,
    .downloads .lead {
        font-size: 1.1rem;
        margin-left: auto;
        margin-right: auto;
    }

    .timeline:before,
    .timeline-marker {
        left: 18px;
    }

    .timeline-content,
    .timeline-item:nth-child(even) .timeline-content {
        margin-left: 52px;
        margin-right: 0;
        width: auto;
    }
}

@media (max-width: 767.98px) {
    section {
        padding: 58px 0;
    }

    section h2 {
        font-size: 2rem;
    }

    .navbar-collapse {
        background: var(--white);
        border: 1px solid var(--line);
        border-radius: 8px;
        box-shadow: var(--shadow-soft);
        margin-top: 12px;
        padding: 10px;
    }

    .hero h1,
    .technology-hero h1,
    .solutions-hero h1,
    .benefits-hero h1,
    .contact-hero h1,
    .about-hero h1,
    .downloads h1,
    .downloads h2 {
        font-size: 2.2rem;
    }

    .about-hero {
        min-height: 390px;
        padding-top: 128px !important;
    }

    .contact-form,
    .contact-form-container,
    .contact-info,
    .newsletter-container {
        padding: 24px;
    }

    .stats-section {
        align-items: stretch;
        flex-direction: column;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *:before,
    *:after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}