/* ===================================
   DATIP.AI Custom Styles
   Overrides for Porto template
   =================================== */

:root {
    /* ===================================================================
       DATIP BRAND PALETTE — official huisstijl (marketing, 2026-06).
       These FOUR are the only brand colors. Everything below is either
       derived from them or a functional token pending marketing sign-off.
       =================================================================== */
    --brand-purple: #6d28d9;   /* accent / primary  — RGB 109, 40, 217 */
    --brand-navy:   #101827;   /* dark base / text  — RGB 16, 24, 39   */
    --brand-grey:   #eaebed;   /* light surface     — RGB 234, 235, 237 */
    --brand-white:  #ffffff;

    /* --- Interaction states: DERIVED from the brand purple, not new colors.
       color-mix darkens the brand purple for hover/active; the plain-hex
       line above each acts as a fallback for browsers without color-mix. --- */
    --primary: var(--brand-purple) !important;

    --primary-hover: #6024bf;
    --primary-hover: color-mix(in srgb, var(--brand-purple) 88%, black);

    --primary-active: #57209a;
    --primary-active: color-mix(in srgb, var(--brand-purple) 80%, black);

    --primary-focus: rgba(109, 40, 217, 0.35);   /* focus ring */

    --primary-subtle: #f1ecfb;                     /* subtle tinted background */
    --primary-subtle: color-mix(in srgb, var(--brand-purple) 10%, var(--brand-white));

    /* Kept for backwards-compat. The guide has NO secondary purple
       (was off-palette #8B5CF6), so this now routes to the brand purple. */
    --secondary: var(--brand-purple);

    /* ===================================================================
       FUNCTIONAL TOKENS — NOT in the brand guide, but the UI needs them.
       Left at current values to avoid visual drift; "candidate:" notes mark
       where a token could re-point onto the brand palette once ratified.
       =================================================================== */
    /* Porto bg-light override — aligned to brand grey. */
    --light: var(--brand-grey) !important;

    /* Text */
    --datip-ai-text-primary: var(--brand-navy);   /* was #111827 ≈ brand navy */
    --datip-ai-text-secondary: #374151;           /* dark grey - paragraphs */
    --datip-ai-text-light: #D1D5DB;               /* light grey - on dark */

    /* Backgrounds */
    --datip-ai-bg-light: #F8F9FA;                 /* body background (off-white) */
    --datip-ai-bg-section: var(--brand-grey);     /* light section alternation */
    --datip-ai-footer-bg: var(--brand-navy);      /* dark footer */
    --datip-ai-footer-text: #9CA3AF;

    /* Borders */
    --datip-ai-border: var(--brand-grey);

    /* Semantic — functional, no brand equivalent; required for forms. */
    --datip-ai-success: #10B981;
    --datip-ai-warning: #F59E0B;

    /* Section fills — the brand guide has NO gradients, so these are now FLAT
       brand colors. Token names kept for back-compat with existing rules:
       the "hero" fill drives the hero, CTA and content-header (flat navy);
       the "feature" fill drives the accent icon circles (flat brand purple). */
    --datip-ai-hero-gradient: var(--brand-navy);
    --datip-ai-feature-gradient: var(--brand-purple);
    --datip-ai-gradient-overlay: rgba(255, 255, 255, 0.6);

    /* --- DONKERE HEADER-BLOKKEN (hero + detailpagina-headers) — navy→paars gradient.
       Marketing-akkoord 2026-07-01: navy↔paars gradient is toegestaan voor de donkere
       header-blokken (bewuste uitzondering op de 'geen gradients'-huisstijlregel). --- */
    --header-dark-top: var(--brand-navy);      /* #101827 */
    --header-dark-bottom: #241559;             /* diep indigo-paars (navy↔paars familie) */
    --header-dark-deep: #160f2e;               /* donkere voet onder de trust-bar */
    --accent-on-dark: #c4b0f5;                 /* lichter accent-paars voor ALLE paars op donker (hero, trust, footer) — fallback */
    --accent-on-dark: color-mix(in srgb, var(--brand-purple) 55%, white);

    /* --- TYPOGRAFIE (2026-07-15): één basis-grootte + tokens, zodat body-tekst,
       knoppen en footerlinks consistent erven en nieuwe pagina's niets qua grootte
       hoeven te regelen. rem-based koppen (nav, titels) staan hier los van. --- */
    --fs-body: 15px;            /* body/content/links/knoppen (Porto stond op 14/13px) */
    --lh-body: 1.65;
    --fs-card-title: 1.15rem;   /* ~18px — alle kaart-/component-titels gelijk */
    --fs-lead: 1.125rem;        /* 18px — lead/intro net iets groter dan body */
}

/* ===================================
   Base surfaces
   White page base + header band; brand grey (--light, via Porto's .bg-light)
   is reserved for alternating section bands, and navy for dark sections.
   =================================== */
body,
.body {
    background-color: var(--brand-white) !important;
}

/* Defensive: an element positioned absolutely inside a narrower ancestor still counts toward
   the PAGE's scrollable width even when it visually stays inside the viewport (a CSS overflow
   quirk - "scrollable overflow" is computed per containing-block box, not clipped just because
   it happens to still fit on screen). Found 2026-09-01 via the header's small breadcrumb label:
   it renders fully on-screen at 320px, yet was still leaving the whole page 391px wide/
   horizontally scrollable. This is the standard, safe site-wide guard against that class of
   bug - nothing on this site is meant to scroll horizontally. */
html,
body {
    overflow-x: hidden;
}

/* Basis body-grootte: 16px (zie :root --fs-body) i.p.v. Porto's 14px. Alles wat body
   erft (body-tekst, knoppen, footerlinks) en de em-based .text-N-schaal rekenen
   hiervandaan; rem-based groottes (nav, titels) staan los. */
body {
    font-size: var(--fs-body);
    line-height: var(--lh-body);
}

/* Lead: 18px — ALLEEN de pagina-opening (hero-lead + page-header-lead). Alle andere
   intro's (`.datip-section-intro`, `.datip-why__intro`) en de CTA-tekst zijn body (15px),
   zodat één class niet twee rollen krijgt. Bewust systemisch, niet per node/pagina. */
.datip-hero__lead,
.datip-page-header__lead {
    font-size: var(--fs-lead);
}

.datip-ai-header .header-body {
    background-color: var(--brand-white) !important;
}

/* Wider content container — modern standard (~1280px) instead of Bootstrap's
   default 1140px. Applies site-wide (header, sections, footer). Tune the value. */
@media (min-width: 1200px) {
    .container,
    .container-sm,
    .container-md,
    .container-lg,
    .container-xl {
        max-width: 1280px !important;
    }
}

/* ===================================
   Global Typography Improvements
   =================================== */

body p {
    line-height: 1.75;
}

.datip-ai-hero p {
    line-height: 1.8 !important;
}

section p {
    line-height: 1.75;
}

/* ===================================
   Header Customizations
   =================================== */

.datip-ai-header {
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    padding: 1rem 0;
}

.datip-ai-header .header-body {
    border-bottom: none;
}

.datip-ai-logo {
    padding: 0.5rem 0;
    display: inline-flex;
    align-items: center;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.datip-ai-logo img {
    display: block;
    height: 36px;
    width: auto;
}

.datip-ai-logo:hover {
    opacity: 0.85;
    text-decoration: none !important;
}

.datip-ai-nav .nav-link {
    color: #333 !important;
    font-weight: 400;
    font-size: 0.95rem;
    padding: 0.5rem 1rem;
    border: none !important;
    background: transparent !important;
}

.datip-ai-nav .nav-link:hover {
    color: var(--primary) !important;
}

.datip-ai-nav .nav-link.active {
    color: var(--primary) !important;
    background: transparent !important;
}

/* Mobile collapsed menu (.header-nav-main-mobile-dark, added in DatipHeader.cshtml): Porto's
   modifier gives the panel a dark background and would normally give menu links light text
   (theme.css "Header Nav Main Mobile - Skin"/"Header Nav Main Mobile Dark" blocks), but our own
   ".datip-ai-nav .nav-link" rule above (#333 !important, meant for the white desktop header) is
   unscoped to viewport and beats Porto's light text on specificity ties - leaving dark grey text
   on the navy panel, unreadable (reported 2026-09-07). Re-asserted here, scoped to the mobile
   panel, so the desktop-only color doesn't leak in. Also overrides the panel background itself
   (var(--dark), Bootstrap's #212529) to the actual brand navy so it matches the header/hero rather
   than an unrelated grey (found 2026-09-03: this modifier class had been dropped at some point,
   leaving the light active-text with no dark panel behind it - unreadable on the light background
   Porto falls back to without it). */
@media (max-width: 991px) {
    #header .header-nav-main.header-nav-main-mobile-dark:before {
        background-color: var(--brand-navy);
    }

    #header .header-nav-main-mobile-dark .nav-link {
        color: var(--brand-grey) !important;
    }

    #header .header-nav-main-mobile-dark .nav-link:hover,
    #header .header-nav-main-mobile-dark .nav-link:focus {
        color: var(--brand-white) !important;
    }

    #header .header-nav-main-mobile-dark .nav-link.active {
        color: var(--brand-white) !important;
        background: var(--primary) !important;
    }

    /* Dropdown submenu (e.g. "Cases") sits inline on the same navy panel background
       (Porto collapses it to position: static, background: transparent at this width). */
    #header .header-nav-main-mobile-dark .dropdown-menu .dropdown-item {
        color: var(--brand-grey) !important;
    }

    #header .header-nav-main-mobile-dark .dropdown-menu .dropdown-item:hover,
    #header .header-nav-main-mobile-dark .dropdown-menu .dropdown-item.active {
        color: var(--brand-white) !important;
    }

    /* .datip-btn-navy (navy fill, white text) is meant for the white header bar - on this now-navy
       panel it would blend into the background. Reuse the same on-dark inverse already established
       for .datip-hero .datip-btn-navy (white fill, navy text). */
    .header-nav-main-mobile-dark .datip-btn-navy {
        background: var(--brand-white) !important;
        border-color: var(--brand-white) !important;
        color: var(--brand-navy) !important;
    }
    .header-nav-main-mobile-dark .datip-btn-navy:hover {
        background: var(--brand-grey) !important;
        border-color: var(--brand-grey) !important;
        color: var(--brand-navy) !important;
    }
}

.btn-get-started {
    background: var(--primary) !important;
    color: #fff !important;
    padding: 0.6rem 1.5rem !important;
    border-radius: 4px;
    border: none;
    font-weight: 500;
    font-size: 1rem;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
}

.btn-get-started:hover {
    background: var(--primary-hover) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(109, 40, 217, 0.4);
}

/* Spacing between navigation menu and CTA button */
.datip-ai-header .header-nav+.header-nav-feature {
    margin-left: 2rem;
}

/* Content page buttons - consistent professional styling */
.btn-primary {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    border-radius: 4px !important;
    font-weight: 500;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
    box-shadow: 0 3px 10px rgba(109, 40, 217, 0.25) !important;
}

.btn-primary:hover {
    background: var(--primary-hover) !important;
    border-color: var(--primary-hover) !important;
    transform: translateY(-1px);
    box-shadow: 0 5px 15px rgba(109, 40, 217, 0.35) !important;
}

/* Modern button style for content CTAs */
.btn-modern {
    font-size: 0.95rem !important;
    box-shadow: 0 3px 10px rgba(109, 40, 217, 0.25) !important;
    line-height: 1.5 !important;
    display: inline-block !important;
}

.btn-modern:hover {
    box-shadow: 0 5px 15px rgba(109, 40, 217, 0.35) !important;
}

/* Normalize input and anchor buttons to look identical */
input.btn-modern,
a.btn-modern {
    vertical-align: middle !important;
    text-align: center !important;
    white-space: nowrap !important;
}

input.btn-modern {
    -webkit-appearance: none !important;
    appearance: none !important;
}

/* ===================================
   Footer Customizations
   =================================== */

.datip-ai-footer {
    background: var(--datip-ai-footer-bg) !important;
    color: var(--datip-ai-footer-text);
    padding-top: 3rem;
    margin-top: 0 !important;
}

.datip-ai-footer .footer-heading {
    color: #E5E7EB;
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.datip-ai-footer .footer-description {
    color: var(--datip-ai-footer-text);
    font-size: 0.85rem;
    line-height: 1.6;
    margin-bottom: 0.5rem;
}

.datip-ai-footer .footer-link-text {
    color: var(--datip-ai-footer-text);
    font-size: 0.85rem;
}

.datip-ai-footer .footer-link {
    color: var(--datip-ai-footer-text) !important;
    text-decoration: none;
    transition: color 0.3s ease;
}

.datip-ai-footer .footer-link:hover {
    color: var(--accent-on-dark) !important;
    text-decoration: underline;
}

.datip-ai-footer .footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.datip-ai-footer .footer-links li {
    margin-bottom: 0.5rem;
}

.datip-ai-footer .footer-links a {
    color: var(--datip-ai-footer-text) !important;
    text-decoration: none;
    font-size: 0.85rem;
    line-height: 1.8;
    transition: color 0.3s ease;
}

.datip-ai-footer .footer-links a:hover {
    color: var(--accent-on-dark) !important;
}

.datip-ai-footer .border-top {
    border-color: rgba(255, 255, 255, 0.1) !important;
    margin-top: 1rem;
    background: transparent !important;
    padding-bottom: 2rem;
}

.datip-ai-footer .footer-copyright {
    color: var(--datip-ai-footer-text);
    font-size: 0.85rem;
    margin: 0;
    background-color: transparent !important;
}

.datip-ai-footer .row.border-top {
    background-color: var(--datip-ai-footer-bg) !important;
}

.datip-ai-footer .row.border-top .col {
    background-color: transparent !important;
}

/* Footer link hover effect with primary brand color */
.datip-ai-footer .footer-link-hover {
    transition: color 0.3s ease, opacity 0.3s ease;
}

.datip-ai-footer .footer-link-hover:hover {
    color: var(--accent-on-dark) !important;
    opacity: 1;
}

/* ===================================
   Hero Section Customizations
   =================================== */

.datip-ai-hero {
    min-height: 400px !important;
    background: var(--datip-ai-hero-gradient) !important;
    display: flex;
    align-items: center;
    padding: 50px 0 50px 0 !important;
}

/* Main headline - slightly smaller with better line-height */
.datip-ai-hero h1 {
    font-weight: 700 !important;
    letter-spacing: -1px;
    color: #fff !important;
    margin-bottom: 1.5rem !important;
    line-height: 1.2 !important;
}

/* Subheader - make it bolder and smaller for better hierarchy */
.datip-ai-hero .text-10 {
    font-weight: 600 !important;
    letter-spacing: -0.5px !important;
    line-height: 1.5 !important;
    margin-bottom: 2rem !important;
    color: #fff !important;
}

/* Body paragraph - slightly smaller with better spacing */
.datip-ai-hero .text-4 {
    font-weight: 400 !important;
    line-height: 1.8 !important;
    opacity: 0.95 !important;
    margin-bottom: 2.5rem !important;
}

/* Button group spacing */
.datip-ai-hero .d-flex.gap-3 {
    margin-bottom: 0 !important;
}

.datip-ai-hero p,
.datip-ai-hero .text-5,
.datip-ai-hero .text-10,
.datip-ai-hero .opacity-7 {
    color: #fff !important;
}

.datip-ai-hero .opacity-7 {
    opacity: 0.9 !important;
}

.datip-ai-hero .btn-outline-light {
    border: 2px solid rgba(255, 255, 255, 0.8) !important;
    background: transparent !important;
    color: #fff !important;
}

.datip-ai-hero .btn-outline-light:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: #fff !important;
}

.datip-ai-hero .btn-light {
    background: #fff !important;
    color: var(--primary) !important;
    border: none !important;
}

.datip-ai-hero .btn-light:hover {
    background: #f8f9fa !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

/* Adjust spacing on mobile */
@media (max-width: 767px) {
    .datip-ai-hero {
        min-height: 350px !important;
        padding: 50px 0 50px 0 !important;
    }

    .datip-ai-hero h1 {
        font-weight: 700 !important;
    }

    .datip-ai-hero .text-10 {
        font-weight: 600 !important;
    }

    .datip-ai-hero .text-4 {}

    .datip-ai-hero .d-flex.gap-3 {
        flex-direction: column;
        gap: 1rem !important;
    }

    .datip-ai-hero .btn {
        width: 100%;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .datip-ai-hero h1 {
        font-weight: 700 !important;
    }

    .datip-ai-hero .text-10 {
        font-weight: 600 !important;
    }
}

/* ===================================
   Trust Bar Section (Below Hero)
   =================================== */

.datip-ai-trust-bar {
    border-top: 1px solid #e9ecef;
}

.datip-ai-trust-bar h5 {
    color: #333 !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
}

.datip-ai-trust-bar i.fas {}

/* Mobile responsive */
@media (max-width: 767px) {
    .datip-ai-trust-bar .row>div {
        margin-bottom: 1.5rem !important;
    }

    .datip-ai-trust-bar .row>div:last-child {
        margin-bottom: 0 !important;
    }

    .datip-ai-trust-bar h5 {}

    .datip-ai-trust-bar i.fas {}
}

/* ===================================
   Problem + Solution Section (Clean Before/After)
   =================================== */

.datip-ai-before-after {
    /* Background controlled by Porto's bg-white or bg-light classes */
}

/* Use Porto's native styling, just add bullet customization */
.datip-ai-before-after ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.datip-ai-before-after ul li {
    margin-bottom: 1.5rem !important;
    padding-left: 2rem !important;
    position: relative !important;
}

/* Problem side - red X bullets */
.datip-ai-before-after .problem-list li:before {
    content: "✕" !important;
    position: absolute !important;
    left: 0 !important;
    color: #dc2626 !important;
    font-weight: 700 !important;
}

/* Solution side - blue check bullets */
.datip-ai-before-after .solution-list li:before {
    content: "✓" !important;
    position: absolute !important;
    left: 0 !important;
    color: var(--primary) !important;
    font-weight: 700 !important;
}

/* Mobile responsive - add separator between columns */
@media (max-width: 991px) {
    .datip-ai-before-after .col-lg-6:first-child {
        padding-bottom: 3rem;
        margin-bottom: 3rem;
        border-bottom: 2px solid #e5e7eb;
    }
}

@media (max-width: 767px) {
    .datip-ai-before-after ul li {
        padding-left: 1.75rem !important;
    }
}

/* ===================================
   FAQ Section
   =================================== */

.datip-ai-faq {
    /* Background controlled by Porto's bg-white or bg-light classes */
}

.datip-ai-faq .accordion {
    border: none !important;
}

.datip-ai-faq .card {
    border: none !important;
    border-bottom: 1px solid #e9ecef !important;
    border-radius: 0 !important;
    margin-bottom: 0 !important;
    background: transparent !important;
}

.datip-ai-faq .card:last-child {
    border-bottom: none !important;
}

.datip-ai-faq .card-header {
    background: transparent !important;
    border: none !important;
    padding: 1.5rem 0 !important;
}

.datip-ai-faq .card-header a {
    color: #111827 !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

.datip-ai-faq .card-header a:hover {
    color: var(--primary) !important;
}

.datip-ai-faq .card-header a.collapsed {
    color: #4b5563 !important;
}

.datip-ai-faq .card-header a.collapsed:hover {
    color: var(--primary) !important;
}

.datip-ai-faq .card-body {
    padding: 0 0 1.5rem 0 !important;
    color: #4b5563 !important;
}

/* FAQ icon indicator */
.datip-ai-faq .card-header a::after {
    content: "\f078" !important;
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 700 !important;
    color: var(--primary) !important;
    transition: transform 0.3s ease !important;
}

.datip-ai-faq .card-header a.collapsed::after {
    transform: rotate(-90deg) !important;
}

/* Mobile responsive */
@media (max-width: 767px) {
    .datip-ai-faq .card-header {
        padding: 1.25rem 0 !important;
    }

    .datip-ai-faq .card-body {
        padding: 0 0 1.25rem 0 !important;
    }
}

/* Override Porto's default feature-box layout */
.datip-ai-features .feature-box {
    padding: 2rem !important;
    border-radius: 8px !important;
    transition: all 0.3s ease !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

.datip-ai-features .feature-box-icon {
    width: 80px !important;
    height: 80px !important;
    min-width: 80px !important;
    min-height: 80px !important;
    max-width: 80px !important;
    max-height: 80px !important;
    background: var(--datip-ai-feature-gradient) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto 1.5rem auto !important;
    position: static !important;
    float: none !important;
    flex-shrink: 0 !important;
}

.datip-ai-features .feature-box-icon i {
    color: #fff !important;
    font-size: 2.25rem !important;
}

.datip-ai-features .feature-box h4 {
    text-align: center !important;
}

.datip-ai-features .feature-box p {
    text-align: center !important;
    line-height: 1.75 !important;
    color: #666 !important;
}

.datip-ai-features .feature-box:hover {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1) !important;
    transform: translateY(-5px) !important;
}

/* Process step container - align all at top */
.process-step {
    position: relative;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Perfectly round step circles - filled with gradient */
.process-step-circle {
    width: 80px;
    height: 80px;
    min-width: 80px !important;
    min-height: 80px !important;
    max-width: 80px !important;
    max-height: 80px !important;
    background: var(--datip-ai-feature-gradient) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    box-shadow: 0 4px 15px rgba(109, 40, 217, 0.25);
    position: relative;
    z-index: 2;
    flex-shrink: 0 !important;
    border: none !important;
    transition: all 0.3s ease;
}

/* Hover animation - scale up and enhance shadow */
.process-step-circle:hover {
    transform: scale(1.1);
    box-shadow: 0 8px 25px rgba(109, 40, 217, 0.4);
}

/* Trigger circle hover when hovering over text below */
.process-step:hover .process-step-circle {
    transform: scale(1.1);
    box-shadow: 0 8px 25px rgba(109, 40, 217, 0.4);
}

/* White numbers inside circles */
.process-step-circle span {
    color: #fff !important;
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1;
}

/* Subtle connecting lines between steps - goes to the RIGHT of each circle */
.process-connecting-line .process-step::after {
    content: '';
    position: absolute;
    top: 40px;
    left: calc(50% + 40px);
    width: calc(100% - 80px);
    height: 2px;
    background: #D1D5DB;
    z-index: 1;
}

/* Remove line after last step */
.process-connecting-line .process-step:last-child::after {
    display: none;
}

/* Ensure row alignment */
.process-connecting-line {
    display: flex;
    align-items: flex-start;
}

/* Mobile: hide connecting lines */
@media (max-width: 991px) {
    .process-connecting-line .process-step::after {
        display: none;
    }
}

/* ===================================
   Privacy Section
   =================================== */

.datip-ai-privacy-box {
    background: #fff;
    border: 2px solid #e9ecef;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.datip-ai-privacy-box:hover {
    border-color: var(--primary);
    box-shadow: 0 8px 20px rgba(51, 102, 255, 0.15);
    transform: translateY(-3px);
}

.datip-ai-privacy-box p {
    font-size: 0.95rem;
    line-height: 1.75;
    color: #666;
}

/* ===================================
   CTA Section
   =================================== */

.datip-ai-cta {
    margin-bottom: 0 !important;
    padding-bottom: 3rem !important;
    background: var(--datip-ai-hero-gradient) !important;
    background-image: var(--datip-ai-hero-gradient) !important;
    padding-top: 3rem !important;
}

.datip-ai-cta h2,
.datip-ai-cta p {
    color: #fff !important;
}

/* Override bg-primary class on CTA section */
.section.datip-ai-cta.bg-primary {
    background: var(--datip-ai-hero-gradient) !important;
    background-image: var(--datip-ai-hero-gradient) !important;
}

section.datip-ai-cta {
    background: var(--datip-ai-hero-gradient) !important;
    background-image: var(--datip-ai-hero-gradient) !important;
}

/* Remove spacing between CTA and footer */
.main {
    margin-bottom: 0 !important;
}

.datip-ai-cta+#footer {
    margin-top: 0 !important;
}

.datip-ai-cta .btn-light {
    background: #fff !important;
    color: var(--primary) !important;
    border: none !important;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 1.5px !important;
}

.datip-ai-cta .btn-light:hover {
    background: #f8f9fa !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

/* Keep hero buttons with original white/outline styling */
.datip-ai-hero .btn-light {
    background: #fff !important;
    color: var(--primary) !important;
    border: none !important;
    padding: 0.875rem 2.5rem !important;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 1.5px !important;
}

.datip-ai-hero .btn-light:hover {
    background: #f8f9fa !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.datip-ai-hero .btn-outline-light {
    border: 2px solid rgba(255, 255, 255, 0.8) !important;
    background: transparent !important;
    color: #fff !important;
    padding: 0.875rem 2.5rem !important;
    text-transform: uppercase;
    font-weight: 500;
    letter-spacing: 1.5px !important;
}

.datip-ai-hero .btn-outline-light:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: #fff !important;
}

/* FAQ Active Question Highlight */
.datip-ai-faq .accordion .card .card-header a[aria-expanded="true"] {
    color: var(--primary) !important;
    font-weight: 600 !important;
}

/* Light purple background to active header */
.datip-ai-faq .accordion .card-header:has(a[aria-expanded="true"]) {
    background-color: #F5F3FF !important;
    border-left: 4px solid var(--primary) !important;
    padding-left: calc(1.5rem - 4px) !important;
}

/* Mobile: adjust padding for active header */
@media (max-width: 767px) {
    .datip-ai-faq .accordion .card-header:has(a[aria-expanded="true"]) {
        padding-left: calc(1.25rem - 4px) !important;
    }
}

/* ===================================
   Content Page Headers
   =================================== */

.datip-ai-content-header {
    background: var(--datip-ai-hero-gradient) !important;
    padding: 2rem 0 3rem 0 !important;
}

.datip-ai-content-header h1 {
    color: #fff !important;
    margin-bottom: 0.5rem !important;
}

.datip-ai-content-header .subtitle {
    color: #fff !important;
    margin-bottom: 0 !important;
}

/* Mobile responsive */
@media (max-width: 767px) {
    .datip-ai-content-header {
        padding: 2rem 0 !important;
    }

    .datip-ai-content-header h1 {}

    .datip-ai-content-header .subtitle {}
}

/* Make all primary buttons consistent with btn-get-started hover effect */
.btn-primary {
    background: var(--primary) !important;
    color: #fff !important;
    border: none !important;
    transition: all 0.3s ease !important;
}

.btn-primary:hover,
.btn-primary:focus {
    background: var(--primary-hover) !important;
    color: #fff !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(109, 40, 217, 0.4) !important;
}

/* Content section - remove top padding/margin to eliminate white gap */
.datip-ai-content-page {
    background: var(--datip-ai-bg-light) !important;
    padding: 2.5rem 0 4rem 0 !important;
    margin-top: 0 !important;
}

/* Typography improvements */
.datip-ai-content-page h1 {
    color: var(--datip-ai-text-primary) !important;
    font-weight: 700 !important;
    margin-bottom: 1.5rem !important;
    letter-spacing: -0.5px !important;
}

.datip-ai-content-page h2 {
    color: var(--datip-ai-text-primary) !important;
    font-weight: 600 !important;
    margin-top: 3rem !important;
}

    /* Content section - remove top padding/margin to eliminate white gap */
    .datip-ai-content-page {
        background: var(--datip-ai-bg-light) !important;
        padding: 2.5rem 0 4rem 0 !important;
        margin-top: 0 !important;
    }

    /* Typography improvements - NO font-size overrides, respect Porto's text classes */
    .datip-ai-content-page h1 {
        color: var(--datip-ai-text-primary) !important;
        margin-bottom: 1.5rem !important;
    }

    .datip-ai-content-page h2 {
        color: var(--datip-ai-text-primary) !important;
        margin-top: 3rem !important;
        margin-bottom: 1rem !important;
    }

    .datip-ai-content-page p {
        color: var(--datip-ai-text-secondary) !important;
        line-height: 1.75 !important;
        margin-bottom: 1.25rem !important;
    }

    .datip-ai-content-page strong {
        color: var(--datip-ai-text-primary) !important;
    }

    .datip-ai-content-page ul,
    .datip-ai-content-page ol {
        color: var(--datip-ai-text-secondary) !important;
        line-height: 1.75 !important;
    }

    .datip-ai-content-page ul li,
    .datip-ai-content-page ol li {
        margin-bottom: 0.75rem !important;
    }

    .datip-ai-content-page a {
        color: var(--primary) !important;
        text-decoration: none !important;
        transition: color 0.3s ease !important;
    }

    .datip-ai-content-page a:hover {
        color: var(--primary-hover) !important;
        text-decoration: underline !important;
    }

    /* Mobile responsive */
    @media (max-width: 767px) {
        .datip-ai-content-page {
            padding: 2rem 0 3rem 0 !important;
        }

        .datip-ai-content-page h2 {
            margin-top: 2.5rem !important;
        }
    }

/* Smooth in-page anchor scrolling (o.a. hero "Bekijk AI-oplossingen" → #oplossingen),
   zodat de bezoeker de pagina ziet meebewegen en dat er onder de hero meer staat.
   Porto zet :root{scroll-behavior:auto} BINNEN deze media query; we matchen selector
   (:root, specifieker dan html) én de media query — custom.css laadt later dus wint —
   en respecteren zo ook prefers-reduced-motion (geen smooth voor die gebruikers). */
@media (prefers-reduced-motion: no-preference) {
    :root {
        scroll-behavior: smooth;
    }
}

/* In-page anchor-doelen niet ÓNDER de header laten landen: de Porto-header wordt
   bij scrollen sticky (~88px), dus reserveer ruimte boven elk anchor-doel. Geldt
   voor #oplossingen (section) én de #ai-* anchors op /ai-oplossingen (div). */
[id] {
    scroll-margin-top: 100px;
}

/* Mobiele leesbaarheid: Porto zet body op telefoons (≤575px) op 13px. We houden de
   site-brede 16px (zie :root --fs-body) óók op mobiel aan — hier expliciet herhaald
   zodat Porto's ≤575px 13px-regel niet wint. */
@media (max-width: 575px) {
    body {
        font-size: var(--fs-body);
    }
}

/* Hamburger-menu-links: Porto's #mainNav-regel (ID-specificiteit) zet ze in de
   ingeklapte staat (≤991px) op 13px — te klein. Naar 15px. De desktop-nav
   (≥992px) valt buiten deze media query en blijft ongemoeid. */
@media (max-width: 991px) {
    #mainNav .nav-link {
        font-size: 15px !important;
    }
}

.datip-hero {
    background: linear-gradient(180deg, var(--header-dark-top) 0%, var(--header-dark-bottom) 100%);
    padding: 3rem 0 2rem;
    overflow: hidden;
    /* Deliberately shorter than a full fold: the start of the next (light)
       section should peek into view on load, signalling there's more below
       without needing a scroll-cue arrow (homepage hero review, 2026-09-02;
       supersedes the earlier "fill the fold exactly" rule from 2026-07-13/
       2026-08-25). Content vertically centered. */
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: calc(100vh - 490px);
}

.datip-hero__eyebrow {
    display: inline-block;
    color: var(--brand-white);
    font-weight: 600;
    font-size: 0.8rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 1.25rem;
    opacity: 0.7;
}

.datip-hero h1 {
    font-family: 'Lexend Exa', 'Poppins', sans-serif;
    color: var(--brand-white);
    font-weight: 700;
    /* Lexend Exa is a very wide face; fluid size keeps each phrase on one line
       across breakpoints (hero-scoped — does not touch Porto's text classes) */
    font-size: clamp(1.8rem, 3.2vw, 2.8rem);
    line-height: 1.1;
    letter-spacing: -0.02em;
    /* Equal, viewport-height-fluid rhythm with the lead below: fills the tall
       fold-hero more on big screens, stays compact on short/mobile. */
    margin-bottom: clamp(1.5rem, 4vh, 3rem);
}

/* Force the headline onto exactly two lines: each phrase on its own line */
.datip-hero h1 span {
    display: block;
}

/* Two-tone headline: emphasis phrase in a lighter (derived) purple that pops on dark */
.datip-hero__accent {
    color: var(--accent-on-dark);
}

.datip-hero__lead {
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.7;
    margin: 0 auto clamp(1.5rem, 4vh, 2.5rem);
    max-width: 44rem;
    text-wrap: pretty;
}

.datip-hero__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    /* Ruime horizontale afstand tussen de knoppen op desktop; op mobiel stapelen
       ze en geldt de kleinere row-gap. */
    column-gap: 2.5rem;
    row-gap: 1rem;
}

/* Primary CTA = navy (per comp); purple is reserved for the headline accent */
.datip-btn-navy {
    background: var(--brand-navy) !important;
    border: 2px solid var(--brand-navy) !important;
    color: var(--brand-white) !important;
    border-radius: 4px !important;
}

.datip-btn-navy:hover {
    background: #1c2740 !important;
    border-color: #1c2740 !important;
    color: var(--brand-white) !important;
    box-shadow: 0 4px 12px rgba(16, 24, 39, 0.3) !important;
}

/* Op de DONKERE hero: primaire knop wit-gevuld (inverse van de navy header-knop).
   De globale .datip-btn-navy blijft navy voor de witte header (zie DatipHeader). */
.datip-hero .datip-btn-navy {
    background: var(--brand-white) !important;
    border-color: var(--brand-white) !important;
    color: var(--brand-navy) !important;
}

.datip-hero .datip-btn-navy:hover {
    background: var(--brand-grey) !important;
    border-color: var(--brand-grey) !important;
    color: var(--brand-navy) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
}

/* Secondaire (outline) CTA op donker = witte outline */
.datip-hero__actions .btn-outline-dark {
    border: 2px solid rgba(255, 255, 255, 0.6) !important;
    color: var(--brand-white) !important;
    background: transparent !important;
    border-radius: 4px !important;
}

.datip-hero__actions .btn-outline-dark:hover {
    background: var(--brand-white) !important;
    border-color: var(--brand-white) !important;
    color: var(--brand-navy) !important;
}

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

.datip-hero__media img {
    width: 100%;
    max-width: 100%;
    height: auto;
}

/* Temporary placeholder until the real hero illustration is added.
   Replace the .datip-hero__placeholder <div> in the Hero node with an <img>. */
.datip-hero__placeholder {
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
    aspect-ratio: 640 / 520;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px dashed #c9cdd6;
    border-radius: 12px;
    background: linear-gradient(135deg, #f6f4fd, #eef1f4);
    color: #8a90a0;
    font-weight: 600;
}

/* --- Feature / trust row: doorlopend in het donkere hero-blok ---
   Gradient loopt door van de hero-onderkant naar een donkere voet, zodat hero +
   trust-bar als één donker blok lezen. */
.datip-features {
    /* Starts darker than the hero's own bottom color (a color-mix step down,
       fallback #1c1245) so the trust-bar row doesn't read as a bright band
       against the darker hero above and below it (feedback 2026-09-02). */
    background: #1c1245;
    background: linear-gradient(180deg, color-mix(in srgb, var(--header-dark-bottom) 65%, black) 0%, var(--header-dark-deep) 100%);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    padding: 2rem 0;
}

/* Single-line trust bar (2026-09-02): replaced the 3 stacked boxed cards with
   one compact row (icon + text inline, divided by hairlines) so the dark
   hero+trust-bar band takes up less vertical space. */
.datip-features__row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    row-gap: 0.75rem;
}

.datip-feature-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0 1.75rem;
    border-right: 1px solid rgba(255, 255, 255, 0.16);
}

.datip-feature-item:first-child {
    padding-left: 0;
}

.datip-feature-item:last-child {
    padding-right: 0;
    border-right: none;
}

.datip-feature-item__icon {
    flex: 0 0 auto;
    color: var(--accent-on-dark);
    line-height: 1;
}

/* inline SVG (Lucide) line icons */
.datip-feature-item__icon svg {
    width: 1.6rem;
    height: 1.6rem;
    display: block;
}

.datip-feature-item__text {
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.4;
    margin: 0;
    text-align: left;
}

.datip-feature-item__text strong {
    color: var(--brand-white);
    font-weight: 600;
}

@media (max-width: 991px) {
    .datip-hero {
        padding: 3rem 0;
        min-height: auto;
    }

    .datip-hero__media {
        margin-top: 2.5rem;
    }

    .datip-features__row {
        flex-direction: column;
        align-items: flex-start;
        row-gap: 0.9rem;
    }

    .datip-feature-item {
        width: 100%;
        padding: 0;
        border-right: none;
    }
}































































/* --- Font-consistentie: huisstijl = Lexend Exa voor ALLE koppen -------------
   De footer-kolomkoppen stonden nog op Porto's default (Poppins). Breng ze in
   lijn met de sectie-/kaarttitels. Grootte/hoofdletters blijven via Porto's
   .text-4/.font-weight-bold zoals ze zijn; alleen de letter wisselt.
   NB: de ribbon + hero-eyebrow blijven BEWUST Poppins — dat zijn labels, geen
   koppen (en delen dezelfde tekst/stijl). */
.datip-ai-footer h1,
.datip-ai-footer h2,
.datip-ai-footer h3,
.datip-ai-footer h4,
.datip-ai-footer h5,
.datip-ai-footer h6 {
    font-family: 'Lexend Exa', 'Poppins', sans-serif;
    font-size: 1rem !important;   /* footer-kolomkoppen: 16px (Bootstrap h5 zou ~20px zijn) */
}

/* Footer-chrome kleiner dan de body: ribbon 16px, copyright 13px.
   !important omdat Porto id-selectors (#footer …) anders winnen. */
.datip-ai-footer .footer-ribbon span {
    font-size: 1rem !important;
}

.datip-ai-footer .footer-copyright {
    font-size: 0.8125rem !important;
}

/* Footer-iconen (contact, chevrons ">", social) op donker: het lichtere
   accent-paars (--accent-on-dark), gelijk aan hero/trust — het dof-ogende #6d28d9
   op navy vervangen. Zo is het paars op ALLE donkere vlakken consistent. */
.datip-ai-footer i[class*="fa-"] {
    color: var(--accent-on-dark) !important;
}

/* Footer link lists (Oplossingen/Cases/Bedrijf/Volg ons): Porto positions the icon
   absolutely with a fixed text-indent, so a wider glyph (a brand logo like LinkedIn) ends
   up closer to the text than the narrow ">" chevron. Switch to flex so the icon->text gap
   is CONSTANT for every link, with a fixed-width right-aligned icon slot so the text also
   lines up. Brand logos get a larger size (they were shrunk to 0.8em by list-icons-sm). */
.datip-ai-footer .list.list-icons.list-icons-sm li {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    padding-left: 0;
    margin-bottom: 6px;
}
.datip-ai-footer .list.list-icons.list-icons-sm li > [class*="fa-"]:first-child {
    position: static;
    top: auto;
    flex: 0 0 auto;
    font-size: 1em;
}
.datip-ai-footer .list.list-icons.list-icons-sm li > [class*="fa-"].fa-brands:first-child,
.datip-ai-footer .list.list-icons.list-icons-sm li > [class*="fa-"].fab:first-child {
    font-size: 1.35em;
}
.datip-ai-footer .list.list-icons.list-icons-sm li > p {
    margin: 0;
    flex: 1 1 auto;
    min-width: 0;
}



















/* Oplossing-kop: icoon + titel INLINE; titel in brand-paars (kleur + herkenning). */
.datip-solheader {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.datip-solheader__icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 12px;
    background: var(--primary-subtle);
    color: var(--brand-purple);
}

.datip-solheader__icon svg {
    width: 26px;
    height: 26px;
}

.datip-solheader .datip-section-title {
    margin: 0;
    color: var(--brand-purple);
    font-size: clamp(1.35rem, 1.8vw, 1.55rem);
}

/* Meerdere oplossingen in ÉÉN witte band, met een dunne scheidingslijn ertussen. */
.datip-solution {
    padding: 3.25rem 0;
}

.datip-solution:first-child {
    padding-top: 0;
}

.datip-solution:last-child {
    padding-bottom: 0;
}

.datip-solution + .datip-solution {
    border-top: 1px solid var(--brand-grey);
}





































.datip-why__title {
    font-family: 'Lexend Exa', 'Poppins', sans-serif;
    color: var(--brand-navy);
    font-weight: 700;
    letter-spacing: -0.02em;
    font-size: clamp(1.5rem, 2.2vw, 1.9rem);
    line-height: 1.2;
    margin-bottom: 1.25rem;
}

.datip-why__intro {
    font-size: var(--fs-body) !important;   /* body 15px; defeats stray .text-4 (see .datip-section-intro in blocks.css) */
    color: var(--datip-ai-text-secondary);
    line-height: 1.7;
    margin: 0 0 1rem;
}

.datip-why__intro:last-child {
    margin-bottom: 0;
}

.datip-why__list {
    list-style: none;
    margin: 0;
    padding: 0;
}















@media (max-width: 991px) {
    .datip-why__head {
        margin-bottom: 2.5rem;
    }
}

/* Breadcrumb (Views/Partials/DatipBreadcrumb.cshtml): Porto's default .breadcrumb > li is
   uppercase, which reads visually larger than the "Bijgewerkt: ..." line right below it even
   though both render at the same 12px (.text-1 / Porto's 0.8em) - drop the uppercase so the two
   stacked lines read as the same weight (still applies to the bottom-of-page "Bijgewerkt" pairing
   on non-Datip templates that may still use the old placement). */
.datip-breadcrumb .breadcrumb-item {
    text-transform: none;
}

/* Breadcrumb bar (Views/Partials/DatipBreadcrumb.cshtml): its own full-width row, rendered in
   Datip.cshtml as the first child of .main - directly below the fixed header, above the page's
   own content. Earlier attempts kept it inside the header itself, under the logo: a normal
   flow row there broke the nav's fixed-height JS (2026-09-01), and an absolutely-positioned
   label stretched far enough on long trails to sit under the first nav item and swallow clicks
   meant for it (2026-09-03). Living in normal flow after the header's own reserved space avoids
   both - it can't be hidden behind the fixed header, and it no longer shares a row with the nav
   so it can't overlap it. */
.datip-breadcrumb-bar {
    background: var(--brand-navy);
    padding: 10px 0;
}
/* Trying navy instead of grey (2026-09-03) so the bar reads as part of the header/hero rather
   than a separate light strip - text/link/divider colors below are the same on-dark treatment
   used elsewhere (--accent-on-dark for purple links, --brand-grey for the current-page label -
   both already established for text on the navy hero/footer, see --accent-on-dark above). */
.datip-breadcrumb-bar .breadcrumb {
    --bs-breadcrumb-divider-color: rgba(234, 235, 237, 0.5);
}
.datip-breadcrumb-bar .breadcrumb-item a {
    color: var(--accent-on-dark);
}
.datip-breadcrumb-bar .breadcrumb-item a:hover {
    color: var(--brand-white);
}
.datip-breadcrumb-bar .breadcrumb-item.active {
    color: var(--brand-grey);
}