/* =============================================================
   BizDriver.css — Scoped under .bizdriver-theme body class
   All rules below apply ONLY to the BizDriver landing page.
   ============================================================= */

/* -------------------------------------------------------
   1. CSS VARIABLES & DESIGN TOKENS
   ------------------------------------------------------- */
.bizdriver-theme {
    --bd-green:         #37c3a8;
    --bd-green-hover:   #3bd9b9;
    --bd-green-active:  #1dbb9b;
    --bd-green-pale:    rgba(55, 195, 168, 0.12);
    --bd-navy:          #09152b;
    --bd-navy-mid:      #122040;
    --bd-navy-card:     #18233b;
    --bd-card-border:   #303f59;
    --bd-slate:         #334155;
    --bd-muted:         #7d8ca5;
    --bd-light-bg:      #f7f9fc;
    --bd-white:         #ffffff;
    --bd-border-light:  #d3dae4;
    --bd-radius:        16px;
    --bd-radius-sm:     10px;
    --bd-radius-pill:   999px;
    --bd-shadow:        0 8px 32px rgba(9, 21, 43, 0.10);
    --bd-shadow-hover:  0 16px 48px rgba(9, 21, 43, 0.18);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--bd-slate);
    scroll-behavior: smooth;
}

/* -------------------------------------------------------
   2. GLOBAL HELPERS
   ------------------------------------------------------- */
.bizdriver-theme .section-title {
    font-size: clamp(2rem, 4vw, 2.75rem);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--bd-navy);
}

.bizdriver-theme .section-subtitle {
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--bd-muted);
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
}

.bizdriver-theme .badge-pill.badge-primary-theme,
.bizdriver-theme .badge-primary-theme {
    background-color: var(--bd-green-pale);
    color: var(--bd-green);
    border-radius: var(--bd-radius-pill);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    display: inline-block;
    padding: 5px 14px;
}

.bizdriver-theme .text-navy-custom {
    color: var(--bd-navy);
}

/* -------------------------------------------------------
   3. NAVBAR — solid dark navy, no gradient
   ------------------------------------------------------- */
.bizdriver-theme .bizdriver-navbar {
    background-color: #ffffff !important;
    background: #ffffff !important;
    background-image: none !important;
    padding: 14px 24px;
    border-bottom: 1px solid #eaecef;
    position: sticky;
    top: 0;
    z-index: 1050;
    box-shadow: 0 2px 12px rgba(9, 21, 43, 0.05);
}

/* Override any Bootstrap or site-level gradient classes */
.bizdriver-theme .navbar-vertical-gradient,
.bizdriver-theme .navbar-custom {
    background: #ffffff !important;
    background-image: none !important;
}

.bizdriver-theme .bizdriver-navbar .navbar-logo-link img {
    height: 40px;
    width: auto;
}

.bizdriver-theme .bizdriver-navbar .nav-link {
    color: #146b7d !important;
    font-weight: 500;
    font-size: 0.95rem;
    padding: 8px 16px !important;
    border-radius: 6px;
    transition: color 0.2s, background-color 0.2s;
}

.bizdriver-theme .bizdriver-navbar .nav-link:hover,
.bizdriver-theme .bizdriver-navbar .nav-link:focus {
    color: #1c9bb5 !important;
    background-color: rgba(28, 155, 181, 0.05);
}

.bizdriver-theme .bizdriver-navbar .btn-sign-in,
.bizdriver-theme .bizdriver-navbar .btn-green,
.bizdriver-theme .bizdriver-navbar .btn-medium {
    background-color: var(--bd-green) !important;
    border-color: var(--bd-green) !important;
    color: #fff !important;
    border-radius: 8px;
    font-weight: 600;
    padding: 8px 22px;
    font-size: 0.9rem;
    transition: background-color 0.2s, transform 0.15s;
}

.bizdriver-theme .bizdriver-navbar .btn-sign-in:hover,
.bizdriver-theme .bizdriver-navbar .btn-green:hover {
    background-color: var(--bd-green-hover) !important;
    border-color: var(--bd-green-hover) !important;
    transform: translateY(-1px);
}

.bizdriver-theme .bizdriver-navbar .navbar-toggler {
    border-color: rgba(9, 21, 43, 0.15);
}

.bizdriver-theme .bizdriver-navbar .navbar-toggler-icon {
    filter: invert(1) grayscale(1) brightness(0.2);
}

/* -------------------------------------------------------
   4. HERO SECTION
   ------------------------------------------------------- */
.bizdriver-theme .hero-section,
.bizdriver-theme section:first-of-type {
    background-color: var(--bd-white);
}

.bizdriver-theme .embed-responsive {
    border-radius: var(--bd-radius-sm);
    overflow: hidden;
}

/* -------------------------------------------------------
   5. SECTION SPACING CONSISTENCY
   ------------------------------------------------------- */
.bizdriver-theme section.py-5 {
    padding-top: 80px !important;
    padding-bottom: 80px !important;
}

.bizdriver-theme section .container {
    max-width: 1200px;
}

/* Light background sections */
.bizdriver-theme section.bg-white,
.bizdriver-theme #easy-setup,
.bizdriver-theme #business-needs,
.bizdriver-theme #capabilities,
.bizdriver-theme #custom-integrations {
    background-color: var(--bd-white) !important;
}

.bizdriver-theme section[style*="background-color: #f7f9fc"],
.bizdriver-theme #demo-action,
.bizdriver-theme #constellation {
    border-top: 1px solid var(--bd-border-light);
}

/* -------------------------------------------------------
   6. DEMO VIDEO SECTION
   ------------------------------------------------------- */
.bizdriver-theme #demo-action {
    background-color: var(--bd-light-bg) !important;
}

.bizdriver-theme #demo-action .embed-responsive {
    box-shadow: 0 16px 48px rgba(9, 21, 43, 0.14);
    border-radius: var(--bd-radius);
    border: 3px solid var(--bd-white) !important;
}

/* -------------------------------------------------------
   7. EASY SETUP / SPLIDE SLIDERS
   ------------------------------------------------------- */
.bizdriver-theme #easy-setup {
    background-color: var(--bd-white) !important;
}

.bizdriver-theme #setupCarousel,
.bizdriver-theme #referralCarousel {
    position: relative;
    padding: 0 40px !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.bizdriver-theme #setupCarousel .splide__slide img,
.bizdriver-theme #referralCarousel .splide__slide img {
    width: 100%;
    display: block;
    filter: drop-shadow(0 10px 24px rgba(9, 21, 43, 0.08));
}

.bizdriver-theme .splide__arrow {
    background-color: #e2e8f0 !important;
    opacity: 1 !important;
    width: 36px !important;
    height: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background-color 0.2s, transform 0.15s;
    border-radius: 50% !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
}

.bizdriver-theme .splide__arrow:hover {
    background-color: #cbd5e1 !important;
}

.bizdriver-theme .splide__arrow svg {
    fill: #09152b !important;
    width: 14px !important;
    height: 14px !important;
}

.bizdriver-theme #setupCarousel .splide__arrow--prev {
    left: -10px !important;
}

.bizdriver-theme #setupCarousel .splide__arrow--next {
    right: -10px !important;
}

.bizdriver-theme #referralCarousel .splide__arrow--prev {
    left: -10px !important;
}

.bizdriver-theme #referralCarousel .splide__arrow--next {
    right: -10px !important;
}

/* -------------------------------------------------------
   8. CONSTELLATION / SHOWCASE SECTION
   ------------------------------------------------------- */
.bizdriver-theme #constellation {
    background: linear-gradient(160deg, var(--bd-navy) 0%, var(--bd-navy-mid) 100%) !important;
    border-top: none;
    border-bottom: none;
}

.bizdriver-theme #constellation h2,
.bizdriver-theme #constellation h3,
.bizdriver-theme #constellation h4 {
    color: var(--bd-white) !important;
}

.bizdriver-theme #constellation p.font-weight-bold {
    color: var(--bd-white) !important;
}

.bizdriver-theme #constellation p.text-muted {
    color: rgba(255, 255, 255, 0.72) !important;
}

.bizdriver-theme #constellation .badge-pill,
.bizdriver-theme #constellation span[style*="color: #37c3a8"] {
    background-color: rgba(55, 195, 168, 0.15) !important;
}

/* -------------------------------------------------------
   9. PRICING SECTION — premium dark card look
   ------------------------------------------------------- */
.bizdriver-theme #pricing-section {
    background: linear-gradient(180deg, var(--bd-navy) 0%, #0b1828 100%) !important;
    padding-top: 80px !important;
    padding-bottom: 80px !important;
}

.bizdriver-theme #pricing-section .card {
    border-radius: var(--bd-radius) !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
    transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.28s;
    position: relative;
    overflow: hidden;
    height: 100%;
    padding: 32px !important;
}

.bizdriver-theme #pricing-section .card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url("data:image/svg+xml,%3Csvg width='200' height='200' viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M100 0 C120 40, 160 60, 200 80 C160 100, 140 140, 100 200 C80 160, 40 140, 0 120 C40 100, 60 60, 100 0Z' fill='none' stroke='rgba(55,195,168,0.08)' stroke-width='1'/%3E%3C/svg%3E") repeat;
    background-size: 120px 120px;
    pointer-events: none;
    border-radius: var(--bd-radius);
}

.bizdriver-theme #pricing-section .card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.35);
}

/* Super Nova featured card glow */
.bizdriver-theme #pricing-section .card[style*="box-shadow: 0 0 20px"] {
    box-shadow: 0 0 0 1px var(--bd-green), 0 8px 32px rgba(55, 195, 168, 0.2) !important;
}

.bizdriver-theme #pricing-section .card[style*="box-shadow: 0 0 20px"]:hover {
    box-shadow: 0 0 0 2px var(--bd-green), 0 20px 56px rgba(55, 195, 168, 0.3) !important;
}

/* Dropdown styling inside pricing */
.bizdriver-theme #pricing-section select.form-control {
    background-color: rgba(9, 21, 43, 0.8) !important;
    color: #e0e6f0 !important;
    border: 1px solid var(--bd-card-border) !important;
    border-radius: 8px !important;
    padding: 10px 16px;
    font-size: 0.88rem;
}

.bizdriver-theme #pricing-section select.form-control:focus {
    border-color: var(--bd-green) !important;
    box-shadow: 0 0 0 2px rgba(55, 195, 168, 0.2) !important;
    outline: none;
}

/* -------------------------------------------------------
   10. CAPABILITIES / HOW IT WORKS
   ------------------------------------------------------- */
.bizdriver-theme #capabilities,
.bizdriver-theme .how-it-works-section {
    background-color: var(--bd-white) !important;
}

/* -------------------------------------------------------
   11. FAQ SECTION
   ------------------------------------------------------- */
.bizdriver-theme .faq-section {
    background: linear-gradient(160deg, var(--bd-navy) 0%, #0e1f3d 100%) !important;
}

.bizdriver-theme .faq-section h2.section-title,
.bizdriver-theme .faq-section .section-title {
    color: var(--bd-white) !important;
}

.bizdriver-theme .faq-section .section-subtitle,
.bizdriver-theme .faq-section p.section-subtitle {
    color: #e2e8f0 !important;
}

.bizdriver-theme .faq-accordion .faq-item {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: var(--bd-radius-sm);
    overflow: hidden;
    transition: background 0.2s, border-color 0.2s;
}

.bizdriver-theme .faq-accordion .faq-item:hover {
    background: rgba(255, 255, 255, 0.09);
    border-color: rgba(55, 195, 168, 0.5);
}

.bizdriver-theme .faq-accordion .faq-question-header .btn {
    color: var(--bd-white) !important;
    background: transparent !important;
    border: none !important;
    width: 100%;
    text-align: left;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.5;
    padding: 18px 24px !important;
    transition: color 0.2s;
    box-shadow: none !important;
    text-decoration: none !important;
}

.bizdriver-theme .faq-accordion .faq-question-header .btn:hover {
    color: var(--bd-green) !important;
}

.bizdriver-theme .faq-accordion .faq-question-header .faq-icon {
    color: var(--bd-green);
    font-size: 22px;
    flex-shrink: 0;
    margin-left: 12px;
    transition: transform 0.3s;
}

.bizdriver-theme .faq-accordion [aria-expanded="true"] .faq-icon {
    transform: rotate(45deg);
}

.bizdriver-theme .faq-accordion .faq-answer-body {
    color: rgba(255, 255, 255, 0.75) !important;
    font-size: 0.96rem;
    line-height: 1.75;
    padding: 0 24px 20px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.bizdriver-theme .faq-accordion .faq-answer-body p,
.bizdriver-theme .faq-accordion .faq-answer-body li {
    color: rgba(255, 255, 255, 0.75) !important;
    margin-bottom: 6px;
}

.bizdriver-theme .faq-accordion .faq-answer-body strong {
    color: rgba(255, 255, 255, 0.95);
}

.bizdriver-theme .faq-accordion .faq-answer-body a {
    color: var(--bd-green);
    text-decoration: underline;
}

/* -------------------------------------------------------
   12. PARTNER / INTEGRATION
   ------------------------------------------------------- */
.bizdriver-theme #custom-integrations {
    background-color: var(--bd-light-bg) !important;
}

.bizdriver-theme #custom-integrations .bg-white {
    border-radius: var(--bd-radius-sm) !important;
    box-shadow: 0 4px 16px rgba(9, 21, 43, 0.06);
    border: 1px solid var(--bd-border-light) !important;
    transition: transform 0.25s, box-shadow 0.25s;
}

.bizdriver-theme #custom-integrations .bg-white:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(9, 21, 43, 0.12);
}

/* -------------------------------------------------------
   13. ABOUT / FLOW
   ------------------------------------------------------- */
.bizdriver-theme #business-needs {
    background-color: var(--bd-white) !important;
}

.bizdriver-theme #business-needs img.rounded {
    border-radius: var(--bd-radius) !important;
    box-shadow: var(--bd-shadow);
}

/* -------------------------------------------------------
   14. PRIMARY BUTTONS
   ------------------------------------------------------- */
.bizdriver-theme .btn-try,
.bizdriver-theme .btn.free-trial-btn,
.bizdriver-theme .btn-primary.free-trial-btn,
.bizdriver-theme .btn-primary.paid-plan-btn {
    background-color: var(--bd-green) !important;
    border-color: var(--bd-green) !important;
    color: #fff !important;
    border-radius: 8px;
    font-weight: 700;
    letter-spacing: 0.01em;
    transition: background-color 0.2s, transform 0.15s, box-shadow 0.2s;
    box-shadow: 0 4px 16px rgba(55, 195, 168, 0.30);
}

.bizdriver-theme .btn-try:hover,
.bizdriver-theme .btn.free-trial-btn:hover,
.bizdriver-theme .btn-primary.free-trial-btn:hover,
.bizdriver-theme .btn-primary.paid-plan-btn:hover {
    background-color: var(--bd-green-hover) !important;
    border-color: var(--bd-green-hover) !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(55, 195, 168, 0.42);
    color: #fff !important;
}

.bizdriver-theme .btn-try:active,
.bizdriver-theme .btn-primary.free-trial-btn:active {
    background-color: var(--bd-green-active) !important;
    transform: translateY(0);
}

/* -------------------------------------------------------
   15. FOOTER
   ------------------------------------------------------- */
.bizdriver-theme footer.footer {
    background: linear-gradient(160deg, var(--bd-navy) 0%, #060e1d 100%) !important;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.9rem;
}

.bizdriver-theme footer.footer .footer-logo {
    max-height: 38px;
    width: auto;
}

.bizdriver-theme footer.footer .logo-footer {
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--bd-white);
}

.bizdriver-theme footer.footer h5 {
    color: var(--bd-white);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.bizdriver-theme footer.footer .footer-link {
    color: rgba(255, 255, 255, 0.55) !important;
    text-decoration: none !important;
    font-size: 0.88rem;
    transition: color 0.2s;
    display: inline-block;
    margin-bottom: 6px;
}

.bizdriver-theme footer.footer .footer-link:hover {
    color: var(--bd-green) !important;
}

.bizdriver-theme footer.footer .social-icon {
    font-size: 1.6rem;
    color: rgba(255, 255, 255, 0.6) !important;
    transition: color 0.2s, transform 0.2s;
    display: inline-block;
}

.bizdriver-theme footer.footer .social-icon:hover {
    color: var(--bd-green) !important;
    transform: translateY(-2px);
}

.bizdriver-theme footer.footer small {
    color: rgba(255, 255, 255, 0.35);
    font-size: 0.8rem;
}

.bizdriver-theme footer.footer hr {
    border-color: rgba(255, 255, 255, 0.08);
    margin: 20px 0;
}

/* -------------------------------------------------------
   16. TESTIMONIALS MARQUEE
   ------------------------------------------------------- */
.bizdriver-theme .testimonials-section {
    padding: 2rem 0;
    text-align: center;
}

.bizdriver-theme .carousel-shell {
    position: relative;
    overflow: hidden;
    max-width: 100%;
}

.bizdriver-theme .logo-track {
    --gap: 40px;
    display: flex;
    gap: var(--gap);
    animation: bd-marquee 25s linear infinite;
}

@keyframes bd-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(calc(-50% - var(--gap) / 2)); }
}

.bizdriver-theme .logo-track:hover {
    animation-play-state: paused;
}

.bizdriver-theme .logo-card {
    flex: 0 0 180px;
}

.bizdriver-theme .logo-card img {
    max-width: 100%;
    max-height: 60px;
    object-fit: contain;
}

/* -------------------------------------------------------
   17. ARROW CONTROLS
   ------------------------------------------------------- */
.bizdriver-theme .arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.35);
    color: #fff;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 5;
}

.bizdriver-theme .arrow.left  { left: .5rem; }
.bizdriver-theme .arrow.right { right: .5rem; }

/* -------------------------------------------------------
   18. INDUSTRY CAROUSEL
   ------------------------------------------------------- */
.bizdriver-theme #industryCarousel .carousel-item {
    background: linear-gradient(90deg, #1a5e63, #2ca58d);
    position: relative;
    min-height: 400px;
}

.bizdriver-theme #industryCarousel .carousel-item img {
    height: 100%;
    object-fit: cover;
}

.bizdriver-theme #industryCarousel .carousel-item .carousel-industry-image {
    max-height: 400px;
    object-fit: contain;
    object-position: center;
}

.bizdriver-theme #industryCarousel .carousel-item h3,
.bizdriver-theme #industryCarousel .carousel-item p {
    color: #ffffff;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

/* -------------------------------------------------------
   19. MOBILE RESPONSIVE
   ------------------------------------------------------- */
@media (max-width: 991px) {
    .bizdriver-theme .bizdriver-navbar {
        padding: 10px 16px;
    }

    .bizdriver-theme .bizdriver-navbar .collapse.navbar-collapse {
        background-color: #ffffff !important;
        border-radius: 8px;
        margin-top: 8px;
        padding: 12px;
        box-shadow: 0 4px 16px rgba(9, 21, 43, 0.1);
        border: 1px solid #eaecef;
    }
}

@media (max-width: 768px) {
    .bizdriver-theme section.py-5 {
        padding-top: 56px !important;
        padding-bottom: 56px !important;
    }

    .bizdriver-theme section h1 {
        font-size: 2.2rem !important;
        line-height: 1.15 !important;
    }

    .bizdriver-theme .section-title {
        font-size: 1.85rem;
    }

    .bizdriver-theme #setupCarousel .splide__slide img,
    .bizdriver-theme #referralCarousel .splide__slide img {
        height: 280px !important;
    }
}

@media (max-width: 576px) {
    .bizdriver-theme section h1 {
        font-size: 1.8rem !important;
    }

    .bizdriver-theme .btn-try,
    .bizdriver-theme .btn.free-trial-btn {
        width: 100%;
        text-align: center;
    }

    .bizdriver-theme .faq-accordion .faq-question-header .btn {
        font-size: 0.9rem;
        padding: 14px 16px !important;
    }
}