/*************************************/
/* ============================================dotFRONT � custom.cssBrand tokens + overrides (Bootstrap 4 base)============================================ */
/* --- Fonts --- */
@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=DM+Sans:ital,wght@0,300;0,400;0,500;1,300&display=swap');
/* --- Brand Tokens --- /.df-accordion-body.open {--df-navy:       #0d1d3a;--df-navy-mid:   #122344;--df-navy-light: #1a3060;--df-blue:       #2f80ed;--df-sky:        #4aabea;--df-white:      #f0f6ff;--df-text:       #c8d8f0;--df-muted:      #7a96be;--df-border:     rgba(74,171,234,0.18);--df-glow:       0 0 24px rgba(47,128,237,0.35);--df-radius:     10px;--df-radius-lg:  18px;--df-transition: 0.28s cubic-bezier(0.4,0,0.2,1);--df-font-head:  'Syne', sans-serif;--df-font-body:  'DM Sans', sans-serif;}/ ============================================dotFRONT � custom.cssBrand tokens + overrides (Bootstrap 4 base)============================================ */
/* --- Fonts --- */
@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=DM+Sans:ital,wght@0,300;0,400;0,500;1,300&display=swap');
/* --- Brand Tokens --- */
body {
    --df-navy: #ffffff;
    /*#0d1d3a; */
    ;
    --df-navy-mid: #122344;
    --df-navy-light: #1a3060;
    --df-blue: #2f80ed;
    --df-sky: #4aabea;
    --df-white: #f0f6ff;
    --df-text: #c8d8f0;
    --df-muted: #7a96be;
    --df-border: rgba(74,171,234,0.18);
    --df-glow: 0 0 24px rgba(47,128,237,0.35);
    --df-radius: 10px;
    --df-radius-lg: 18px;
    --df-transition: 0.28s cubic-bezier(0.4,0,0.2,1);
    --df-font-head: 'Syne', sans-serif;
    --df-font-body: 'DM Sans', sans-serif;
}

/* --- Base --- */
*, *::before, *::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--df-font-body);
    background-color: var(--df-navy);
    color: var(--df-text);
    font-size: 16px;
    line-height: 1.7;
    font-weight: 300;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

/* Grid texture overlay */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image:linear-gradient(rgba(47,128,237,0.04) 1px, transparent 1px),linear-gradient(90deg, rgba(47,128,237,0.04) 1px, transparent 1px);
    background-size: 60px 60px;
    pointer-events: none;
    z-index: 0;
}

/* --- Typography --- */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--df-font-head);
    color: var(--df-white);
    line-height: 1.18;
    font-weight: 700;
}

/* Global h1 � used on inner pages (page-header). Hero overrides this below. */
h1 {
    font-size: clamp(2.2rem, 4.5vw, 3.6rem);
    font-weight: 800;
}

h2 {
    font-size: clamp(1.7rem, 3vw, 2.6rem);
}

h3 {
    font-size: clamp(1.1rem, 2vw, 1.5rem);
}

/* Body text � lifted from #c8d8f0 to pure near-white for readability */
p {
    color: #d8eaff;
    font-weight: 300;
}

a {
    color: var(--df-sky);
    text-decoration: none;
    transition: color var(--df-transition);
}

a {
    color: var(--df-white);
}

/* --- Utility --- */
.df-section {
    position: relative;
    z-index: 1;
    padding: 96px 5%;
}

.df-section-sm {
    position: relative;
    z-index: 1;
    padding: 64px 5%;
}

.df-row {
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
}

.df-col-half {
    flex: 1 1 420px;
    min-width: 0;
}

.df-col-third {
    flex: 1 1 280px;
    min-width: 0;
}

.df-col-quarter {
    flex: 1 1 220px;
    min-width: 0;
}

.df-col-full {
    flex: 1 1 100%;
}

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

.df-muted {
    color: var(--df-muted);
    font-size: 0.9rem;
}

.df-label {
    display: inline-block;
    font-family: var(--df-font-head);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--df-sky);
    margin-bottom: 12px;
}

.df-rule {
    width: 48px;
    height: 3px;
    background: linear-gradient(90deg, var(--df-blue), var(--df-sky));
    border: none;
    border-radius: 2px;
    margin: 0 auto 28px;
}

.df-rule.left {
    margin-left: 0;
}

/* --- Buttons --- */
.df-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--df-font-head);
    font-size: 0.92rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    padding: 14px 30px;
    border-radius: var(--df-radius);
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: all var(--df-transition);
}

.df-btn-primary {
    background: linear-gradient(135deg, var(--df-blue), var(--df-sky));
    color: #fff;
    box-shadow: var(--df-glow);
}

.df-btn-primary {
    transform: translateY(-2px);
    box-shadow: 0 0 36px rgba(47,128,237,0.55);
    color: #fff;
}

.df-btn-outline {
    background: transparent;
    color: var(--df-sky);
    border: 1.5px solid var(--df-sky);
}

.df-btn-outlinexx {
    background: rgba(74,171,234,0.12);
    color: var(--df-white);
    border-color: var(--df-white);
}

.df-btn-ghost {
    background: rgba(47,128,237,0.10);
    color: var(--df-sky);
    border: 1.5px solid var(--df-border);
}

.df-btn-ghost {
    background: rgba(47,128,237,0.2);
    color: var(--df-white);
}

/* --- Cards --- */
.df-card {
    background: rgba(18,35,68,0.7);
    border: 1px solid var(--df-border);
    border-radius: var(--df-radius-lg);
    padding: 36px 30px;
    transition: all var(--df-transition);
    backdrop-filter: blur(6px);
}

.df-card {
    border-color: rgba(74,171,234,0.45);
    box-shadow: var(--df-glow);
    transform: translateY(-4px);
}

.df-card-icon {
    width: 52px;
    height: 52px;
    background: linear-gradient(135deg, rgba(47,128,237,0.2), rgba(74,171,234,0.1));
    border: 1px solid var(--df-border);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    color: var(--df-sky);
    margin-bottom: 20px;
}

.df-card h3 {
    font-size: 1.1rem;
    margin-bottom: 10px;
}

.df-card p {
    font-size: 0.92rem;
    color: var(--df-muted);
    margin-bottom: 20px;
}

/* --- Navigation --- */
.df-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: rgba(13,29,58,0.85);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--df-border);
    padding: 0 5%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 70px;
    transition: background var(--df-transition);
}

.df-nav-logo {
    font-family: var(--df-font-head);
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--df-white);
    letter-spacing: -0.02em;
    display: flex;
    align-items: center;
    gap: 6px;
}

.df-nav-logo span {
    color: var(--df-sky);
}

.df-nav-links {
    display: flex;
    align-items: center;
    gap: 6px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.df-nav-links a {
    font-family: var(--df-font-head);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--df-muted);
    padding: 8px 14px;
    border-radius: 6px;
    transition: all var(--df-transition);
}

.df-nav-links a,.df-nav-links a.active {
    color: var(--df-white);
    background: rgba(74,171,234,0.1);
}

.df-nav-cta {
    margin-left: 12px;
}

.df-hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    padding: 8px;
}

.df-hamburger span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--df-sky);
    border-radius: 2px;
    transition: all var(--df-transition);
}

.df-mobile-menu {
    display: none;
    position: fixed;
    top: 70px;
    left: 0;
    right: 0;
    background: rgba(13,29,58,0.97);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--df-border);
    padding: 24px 5%;
    z-index: 999;
    flex-direction: column;
    gap: 8px;
}

.df-mobile-menu.open {
    display: flex;
}

.df-mobile-menu a {
    font-family: var(--df-font-head);
    font-size: 1.1rem;
    color: var(--df-text);
    padding: 12px 0;
    border-bottom: 1px solid var(--df-border);
    font-weight: 600;
}

/* --- Hero --- /.df-hero {position: relative;min-height: auto; / 100vh; /display: grid;/ 2 content columns, stat row spans both /grid-template-columns: 1fr 1fr;/ row 1: content+image auto height; row 2: stat bar auto height */
grid-template-rows: 1fr auto;
align-items: center;
gap: 0 0;
row-gap: 40px;
padding: 40px 5% 56px;
overflow: hidden;
z-index: 1;
}

.df-hero-bg {
    position: absolute;
    inset: 0;
    /* Stronger left-side solid so text always has dark backing */
    background:linear-gradient(90deg,var(--df-navy) 0%,var(--df-navy) 48%,rgba(13,29,58,0.55) 62%,rgba(13,29,58,0.0) 100%),radial-gradient(ellipse 80% 70% at 75% 40%, rgba(47,128,237,0.22) 0%, transparent 65%),radial-gradient(ellipse 50% 50% at 15% 85%, rgba(74,171,234,0.12) 0%, transparent 60%),var(--df-navy);
    z-index: 0;
}

/* Left column � text /.df-hero-content {position: relative;z-index: 2;/ Never wider than the left column, with breathing room from image */
max-width: 600px;
padding-right: 32px;
}

.df-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(47,128,237,0.15);
    border: 1px solid rgba(74,171,234,0.35);
    border-radius: 100px;
    padding: 7px 18px;
    font-size: 0.78rem;
    font-family: var(--df-font-head);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--df-sky);
    margin-bottom: 28px;
}

/* H1 inside hero � crisp white, no bleed into gradient /.df-hero h1 {margin-bottom: 24px;/ Force bright white so it pops off the dark left panel */
color: #ffffff;
text-shadow: 0 2px 24px rgba(13,29,58,0.8);
font-size: clamp(2.2rem, 3.8vw, 3.4rem);
line-height: 1.14;
}

.df-hero h1 em {
    font-style: normal;
    background: linear-gradient(95deg, #5ba8ff, var(--df-sky));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    /* Fallback for Safari clip issues */
    display: inline;
}

/* Paragraph � brighter than default --df-text for hero contrast */
.df-hero p {
    font-size: 1.12rem;
    color: #ddeeff;
    font-weight: 400;
    margin-bottom: 36px;
    line-height: 1.75;
}

.df-hero-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
}

/* Right column � image */
.df-hero-visual {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-left: 24px;
}

.df-hero-img {
    width: 100%;
    max-width: 100%;
    height: auto;
    border-radius: var(--df-radius-lg);
    border: 1px solid rgba(74,171,234,0.25);
    box-shadow:0 0 0 1px rgba(47,128,237,0.15),var(--df-glow),0 40px 80px rgba(0,0,0,0.55);
    display: block;
    object-fit: cover;
}

.df-hero-stat-row {
    /* Span both grid columns so stats sit in their own full-width row /grid-column: 1 / -1;display: flex;flex-wrap: nowrap;          / keep all 4 on one line /justify-content: space-between;align-items: flex-start;gap: 0;padding: 32px 0 0;border-top: 1px solid rgba(74,171,234,0.2);margin-top: 0;              / grid gap handles spacing from the rows above */
}

.df-hero-stat {
    flex: 1;
    text-align: center;
    padding: 0 20px;
    position: relative;
}

/* Vertical divider between each stat */
.df-hero-stat + .df-hero-stat::before {
    content: '';
    position: absolute;
    left: 0;
    top: 10%;
    height: 80%;
    width: 1px;
    background: rgba(74,171,234,0.25);
}

.df-hero-stat strong {
    display: block;
    font-family: var(--df-font-head);
    font-size: 1.9rem;
    font-weight: 800;
    background: linear-gradient(90deg, #6db8ff, var(--df-sky));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.1;
}

.df-hero-stat span {
    font-size: 0.78rem;
    color: #8fb0d8;
    font-weight: 400;
    margin-top: 4px;
    display: block;
    letter-spacing: 0.03em;
}

/* --- Pricing --- */
.df-price-card {
    background: rgba(18,35,68,0.6);
    border: 1px solid var(--df-border);
    border-radius: var(--df-radius-lg);
    padding: 48px 36px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.df-price-card.featured {
    border-color: var(--df-blue);
    box-shadow: var(--df-glow);
}

.df-price-card.featured::before {
    content: 'Most Popular';
    position: absolute;
    top: 32px;
    right: -39px;
    background: linear-gradient(135deg, var(--df-blue), var(--df-sky));
    color: #fff;
    font-family: var(--df-font-head);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 4px 40px;
    transform: rotate(45deg);
}

.df-price-amount {
    font-family: var(--df-font-head);
    font-size: 3.5rem;
    font-weight: 800;
    color: var(--df-white);
    line-height: 1;
    margin: 12px 0 6px;
}

.df-price-amount sup {
    font-size: 1.4rem;
    vertical-align: super;
    color: var(--df-sky);
}

.df-price-amount sub {
    font-size: 1rem;
    color: var(--df-muted);
    font-weight: 300;
}

.df-price-list {
    list-style: none;
    padding: 0;
    margin: 28px 0 32px;
    text-align: left;
}

.df-price-list li {
    padding: 8px 0;
    font-size: 0.9rem;
    color: var(--df-text);
    display: flex;
    align-items: flex-start;
    gap: 10px;
    border-bottom: 1px solid rgba(74,171,234,0.07);
}

.df-price-list li::before {
    content: '\2713';
    /* checkmark */
    color: var(--df-sky);
    font-weight: 700;
    flex-shrink: 0;
    margin-top: 1px;
}

/* --- Testimonials --- */
.df-testimonial {
    background: rgba(18,35,68,0.5);
    border: 1px solid var(--df-border);
    border-radius: var(--df-radius-lg);
    padding: 36px 30px;
    position: relative;
}

.df-testimonial::before {
    content: '"';
    position: absolute;
    top: -10px;
    left: 24px;
    font-family: var(--df-font-head);
    font-size: 5rem;
    color: var(--df-blue);
    opacity: 0.4;
    line-height: 1;
}

.df-testimonial p {
    font-size: 0.95rem;
    color: var(--df-text);
    font-style: italic;
    margin-bottom: 20px;
}

.df-testimonial-name {
    font-family: var(--df-font-head);
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--df-sky);
}

.df-stars {
    color: #f4c842;
    letter-spacing: 2px;
    font-size: 0.9rem;
    margin-bottom: 12px;
}

.lp-wrap {
    padding: 50px 20px;
    background: #f5f7fa;
}

.lp-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 35px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.08);
    margin-bottom: 30px;
}

.lp-hero {
    background: linear-gradient(135deg, #0f2742, #1f4e79);
    color: #ffffff;
}

.lp-eyebrow {
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 14px;
    font-weight: 700;
    color: #ffc107;
    margin-bottom: 10px;
}

.lp-title {
    font-size: 38px;
    font-weight: 800;
    margin-bottom: 20px;
}

.lp-text {
    font-size: 17px;
    line-height: 1.7;
    color: #555;
}

.lp-hero .lp-text {
    color: #e8eef5;
}

.lp-heading {
    font-size: 28px;
    font-weight: 700;
    color: #0f2742;
    margin-bottom: 20px;
}

.lp-list {
    padding-left: 0;
    list-style: none;
    margin-bottom: 0;
}

.lp-list li {
    margin-bottom: 12px;
    font-size: 16px;
    color: #555;
}

.lp-list i {
    color: #1f8f4d;
    margin-right: 10px;
}

.lp-service-box {
    background: #f8fafc;
    border: 1px solid #e5e9ef;
    border-radius: 14px;
    padding: 25px;
    height: 100%;
}

.lp-service-box i {
    font-size: 34px;
    color: #1f4e79;
    margin-bottom: 15px;
}

.lp-service-box h3 {
    font-size: 20px;
    color: #0f2742;
    font-weight: 700;
    margin-bottom: 12px;
}

.lp-cta {
    background: #0f2742;
    color: #ffffff;
    text-align: center;
}

.lp-cta h2 {
    font-size: 30px;
    font-weight: 800;
    margin-bottom: 15px;
}

.lp-cta p {
    color: #e8eef5;
    font-size: 17px;
    margin-bottom: 25px;
}

.lp-btn {
    display: inline-block;
    background: #ffc107;
    color: #0f2742;
    padding: 14px 28px;
    border-radius: 50px;
    font-weight: 700;
    text-decoration: none;
}

.lp-btn {
    color: #0f2742;
    text-decoration: none;
    background: #ffcf3f;
}







/* --- CTA Band --- */
.df-cta-band {
    position: relative;
    z-index: 1;
    background: linear-gradient(135deg, var(--df-navy-light), var(--df-navy-mid));
    border-top: 1px solid var(--df-border);
    border-bottom: 1px solid var(--df-border);
    padding: 80px 5%;
    text-align: center;
    overflow: hidden;
}

.df-cta-band::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 60% 80% at 50% 50%, rgba(47,128,237,0.12) 0%, transparent 70%);
}

.df-cta-band > * {
    position: relative;
    z-index: 1;
}

/* --- Industries --- */
.df-industry-chip {
    display: inline-block;
    background: rgba(47,128,237,0.08);
    border: 1px solid var(--df-border);
    border-radius: 100px;
    padding: 6px 16px;
    font-size: 0.82rem;
    color: var(--df-text);
    margin: 4px;
    transition: all var(--df-transition);
}

.df-industry-chip {
    background: rgba(47,128,237,0.18);
    color: var(--df-white);
    border-color: rgba(74,171,234,0.4);
}

/* --- Feature list --- */
.df-feature-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.df-feature-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(74,171,234,0.07);
    font-size: 0.92rem;
}

.df-feature-list li {
    border-bottom: none;
}

.df-feature-list .icon {
    color: var(--df-sky);
    font-size: 1rem;
    flex-shrink: 0;
    margin-top: 3px;
}

/* --- Image blocks --- */
.df-img-block {
    border-radius: var(--df-radius-lg);
    overflow: hidden;
    border: 1px solid var(--df-border);
    box-shadow: 0 20px 60px rgba(0,0,0,0.35);
}

.df-img-block img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* --- Contact Form --- */
.df-input {
    width: 100%;
    background: rgba(18,35,68,0.6);
    border: 1px solid var(--df-border);
    border-radius: var(--df-radius);
    padding: 14px 18px;
    color: var(--df-white);
    font-family: var(--df-font-body);
    font-size: 0.92rem;
    outline: none;
    transition: border-color var(--df-transition);
}

.df-input {
    border-color: var(--df-blue);
}

.df-input::placeholder {
    color: var(--df-muted);
}

.df-label-form {
    display: block;
    font-size: 0.82rem;
    font-family: var(--df-font-head);
    font-weight: 600;
    color: var(--df-muted);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.df-form-group {
    margin-bottom: 20px;
}

textarea.df-input {
    resize: vertical;
    min-height: 130px;
}

/* --- Footer --- */
.df-footer {
    position: relative;
    z-index: 1;
    background: rgba(8,17,35,0.95);
    border-top: 1px solid var(--df-border);
    padding: 72px 5% 32px;
}

.df-footer-logo {
    font-family: var(--df-font-head);
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--df-white);
    margin-bottom: 16px;
}

.df-footer-logo span {
    color: var(--df-sky);
}

.df-footer p {
    font-size: 0.88rem;
    color: var(--df-muted);
    max-width: 300px;
}

.df-footer-heading {
    font-family: var(--df-font-head);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--df-sky);
    margin-bottom: 16px;
}

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

.df-footer-links li + li {
    margin-top: 8px;
}

.df-footer-links a {
    font-size: 0.88rem;
    color: var(--df-muted);
    transition: color var(--df-transition);
}

.df-footer-links a {
    color: var(--df-white);
}

.df-footer-bottom {
    margin-top: 56px;
    padding-top: 24px;
    border-top: 1px solid var(--df-border);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 12px;
    font-size: 0.8rem;
    color: var(--df-muted);
}

.df-social-links {
    display: flex;
    gap: 12px;
}

.df-social-links a {
    width: 36px;
    height: 36px;
    background: rgba(47,128,237,0.1);
    border: 1px solid var(--df-border);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--df-muted);
    font-size: 0.9rem;
    transition: all var(--df-transition);
}

.df-social-links a {
    background: rgba(47,128,237,0.25);
    color: var(--df-sky);
    border-color: var(--df-sky);
}

/* --- Divider with gradient --- */
.df-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--df-blue), var(--df-sky), transparent);
    border: none;
    margin: 0;
    opacity: 0.3;
}

/* --- Page header --- */
.df-page-header {
    position: relative;
    z-index: 1;
    padding: 160px 5% 80px;
    text-align: center;
    background: radial-gradient(ellipse 80% 60% at 50% 30%, rgba(47,128,237,0.15) 0%, transparent 70%);
}

.df-page-header h1 {
    margin-bottom: 16px;
}

.df-page-header p {
    font-size: 1.1rem;
    color: var(--df-muted);
    max-width: 580px;
    margin: 0 auto;
}

/* --- Accordion (FAQ) --- */
.df-accordion-item {
    border: 1px solid var(--df-border);
    border-radius: var(--df-radius);
    margin-bottom: 10px;
    overflow: hidden;
}

.df-accordion-header {
    padding: 18px 24px;
    font-family: var(--df-font-head);
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--df-white);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(18,35,68,0.5);
    user-select: none;
}

.df-accordion-header {
    background: rgba(47,128,237,0.08);
}

.df-accordion-body {
    display: none;
    padding: 18px 24px;
    font-size: 0.9rem;
    color: var(--df-muted);
    background: rgba(13,29,58,0.4);
}

.df-accordion-body.open {
    display: block;
}

.df-accordion-icon {
    font-size: 1.2rem;
    color: var(--df-sky);
}

/* --- Services inner page grid --- */
.df-service-img {
    width: 100%;
    border-radius: var(--df-radius);
    border: 1px solid var(--df-border);
    object-fit: cover;
    display: block;
    max-height: 340px;
}

/* --- Animations --- */
@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(24px);
    }

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

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes pulseGlow {
    0%, 100% {
        box-shadow: 0 0 20px rgba(47,128,237,0.3);
    }

    50% {
        box-shadow: 0 0 40px rgba(47,128,237,0.6);
    }
}

.df-animate {
    animation: fadeUp 0.7s ease both;
}

.df-animate-d1 {
    animation-delay: 0.1s;
}

.df-animate-d2 {
    animation-delay: 0.2s;
}

.df-animate-d3 {
    animation-delay: 0.3s;
}

.df-animate-d4 {
    animation-delay: 0.4s;
}

.df-pulse {
    animation: pulseGlow 3s ease-in-out infinite;
}

/* --- Responsive --- */
/* Tablet � 900�1100px: tighten hero columns */
@media (max-width: 1100px) {
    .df-hero {
        grid-template-columns: 55% 45%;
        padding: 120px 4% 80px;
    }

    .df-hero-content {
        padding-right: 20px;
    }

    .df-hero h1 {
        font-size: clamp(2rem, 3.5vw, 3rem);
    }
}

/* Mobile � =900px: stack hero vertically */
@media (max-width: 900px) {
    .df-nav-links, .df-nav-cta {
        display: none;
    }

    .df-hamburger {
        display: flex;
    }

    .df-topbar {
        display: none !important;
    }

    /* Hero: single column, image below text /.df-hero {grid-template-columns: 1fr;grid-template-rows: auto auto;padding: 110px 5% 64px;min-height: unset;gap: 48px;}.df-hero-bg {/ On mobile, full dark background � no gradient cutoff issue */
    background:radial-gradient(ellipse 100% 60% at 50% 20%, rgba(47,128,237,0.2) 0%, transparent 70%),var(--df-navy);
}

.df-hero-content {
    max-width: 100%;
    padding-right: 0;
    grid-row: 1;
    grid-column: 1;
}

.df-hero-visual {
    grid-row: 2;
    grid-column: 1;
    justify-content: center;
    padding-left: 0;
}

.df-hero-img {
    max-width: 100%;
    max-height: 320px;
    object-fit: cover;
}

.df-hero h1 {
    font-size: clamp(1.9rem, 6vw, 2.6rem);
}

.df-col-half, .df-col-third, .df-col-quarter {
    flex: 1 1 100%;
}

.df-section, .df-section-sm {
    padding: 64px 5%;
}

/* Collapsed menu background */
#navbarHeaderRowMenu {
    background: rgba(8,17,35,0.98) !important;
    border: 1px solid rgba(74,171,234,0.18) !important;
    border-radius: 10px !important;
    padding: 12px 0 !important;
    margin-top: 8px !important;
}

/* All nav links */
#navbarHeaderRowMenu .nav-link, #navbarHeaderRowMenu .dropdown-item {
    color: #c8d8f0 !important;
    font-family: 'Syne', sans-serif !important;
    font-size: 0.88rem !important;
    font-weight: 600 !important;
    padding: 10px 20px !important;
    border-bottom: 1px solid rgba(74,171,234,0.07) !important;
}

/* Hover state */
#navbarHeaderRowMenu .nav-link:hover, #navbarHeaderRowMenu .dropdown-item:hover {
    color: #ffffff !important;
    background: rgba(47,128,237,0.12) !important;
}

/* Active / selected link */
#navbarHeaderRowMenu .linkSelected {
    color: #4aabea !important;
}

/* Dropdown toggle arrow */
#navbarHeaderRowMenu .dropdown-toggle::after {
    border-top-color: #4aabea !important;
}

/* Dropdown submenu */
#navbarHeaderRowMenu .dropdown-menu {
    background: rgba(13,29,58,0.98) !important;
    border: 1px solid rgba(74,171,234,0.15) !important;
    border-radius: 8px !important;
    padding: 4px 0 !important;
    margin-left: 12px !important;
}

#navbarHeaderRowMenu .dropdown-item {
    border-bottom: 1px solid rgba(74,171,234,0.05) !important;
    font-size: 0.82rem !important;
    color: #a0b8d8 !important;
}

#navbarHeaderRowMenu .dropdown-item:last-child {
    border-bottom: none !important;
}

/* Hamburger icon � make it visible on dark background */
.navbar-toggler {
    border-color: rgba(74,171,234,0.4) !important;
    padding: 6px 10px !important;
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(74,171,234,0.9)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

}

/* Small mobile � =600px */
@media (max-width: 600px) {
    .df-hero {
        gap: 36px;
        padding: 100px 5% 48px;
    }

    .df-hero h1 {
        font-size: 1.85rem;
    }

    .df-topbar {
        display: none !important;
    }

    h2 {
        font-size: 1.55rem;
    }

    .df-hero-stat-row {
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 20px 32px;
    }

    .df-hero-stat strong {
        font-size: 1.6rem;
    }

    .df-price-card {
        padding: 32px 20px;
    }

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

    /* Collapsed menu background */
    #navbarHeaderRowMenu {
        background: rgba(8,17,35,0.98) !important;
        border: 1px solid rgba(74,171,234,0.18) !important;
        border-radius: 10px !important;
        padding: 12px 0 !important;
        margin-top: 8px !important;
    }

    /* All nav links */
    #navbarHeaderRowMenu .nav-link, #navbarHeaderRowMenu .dropdown-item {
        color: #c8d8f0 !important;
        font-family: 'Syne', sans-serif !important;
        font-size: 0.88rem !important;
        font-weight: 600 !important;
        padding: 10px 20px !important;
        border-bottom: 1px solid rgba(74,171,234,0.07) !important;
    }

    /* Hover state */
    #navbarHeaderRowMenu .nav-link:hover, #navbarHeaderRowMenu .dropdown-item:hover {
        color: #ffffff !important;
        background: rgba(47,128,237,0.12) !important;
    }

    /* Active / selected link */
    #navbarHeaderRowMenu .linkSelected {
        color: #4aabea !important;
    }

    /* Dropdown toggle arrow */
    #navbarHeaderRowMenu .dropdown-toggle::after {
        border-top-color: #4aabea !important;
    }

    /* Dropdown submenu */
    #navbarHeaderRowMenu .dropdown-menu {
        background: rgba(13,29,58,0.98) !important;
        border: 1px solid rgba(74,171,234,0.15) !important;
        border-radius: 8px !important;
        padding: 4px 0 !important;
        margin-left: 12px !important;
    }

    #navbarHeaderRowMenu .dropdown-item {
        border-bottom: 1px solid rgba(74,171,234,0.05) !important;
        font-size: 0.82rem !important;
        color: #a0b8d8 !important;
    }

    #navbarHeaderRowMenu .dropdown-item:last-child {
        border-bottom: none !important;
    }

    /* Hamburger icon � make it visible on dark background */
    .navbar-toggler {
        border-color: rgba(74,171,234,0.4) !important;
        padding: 6px 10px !important;
    }

    .navbar-toggler-icon {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(74,171,234,0.9)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
    }

    .divmyphone {
        font-family: var(--df-font-head);
        font-size: 0.72rem;
        font-weight: 600;
        letter-spacing: 0.06em;
        color: var(--df-muted);
        text-decoration: none;
        transition: color var(--df-transition);
        text-align;
    }

    .divmyphone a {
        color
    }
}

/* =========================================================SWIPER HERO VERSIONIsolated version of df-hero specifically for Swiper.js========================================================= */
.df-swiper-hero {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
    width: 100%;
    height: auto !important;
    min-height: unset;
    padding: 40px 5% 56px;
    overflow: visible !important;
    z-index: 1;
}

/* Background */
.df-swiper-hero-bg {
    position: absolute;
    inset: 0;
    background:linear-gradient(90deg,var(--df-navy) 0%,var(--df-navy) 48%,rgba(13,29,58,0.55) 62%,rgba(13,29,58,0.0) 100%),radial-gradient(ellipse 80% 70% at 75% 40%,rgba(47,128,237,0.22) 0%,transparent 65%),radial-gradient(ellipse 50% 50% at 15% 85%,rgba(74,171,234,0.12) 0%,transparent 60%),var(--df-navy);
    z-index: 0;
}

/* LEFT COLUMN */
.df-swiper-hero-content {
    position: relative;
    z-index: 2;
    max-width: 600px;
    padding-right: 32px;
}

/* Badge */
.df-swiper-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(47,128,237,0.15);
    border: 1px solid rgba(74,171,234,0.35);
    border-radius: 100px;
    padding: 7px 18px;
    font-size: 0.78rem;
    font-family: var(--df-font-head);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--df-sky);
    margin-bottom: 28px;
}

/* H1 */
.df-swiper-hero h1 {
    margin-bottom: 24px;
    color: #ffffff;
    text-shadow: 0 2px 24px rgba(13,29,58,0.8);
    font-size: clamp(2.2rem, 3.8vw, 3.4rem);
    line-height: 1.14;
}

.df-swiper-hero h1 em {
    font-style: normal;
    background: linear-gradient(95deg,#5ba8ff,var(--df-sky));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Paragraph */
.df-swiper-hero p {
    font-size: 1.12rem;
    color: #ddeeff;
    font-weight: 400;
    margin-bottom: 36px;
    line-height: 1.75;
}

/* Buttons */
.df-swiper-hero-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
}

/* RIGHT COLUMN */
.df-swiper-hero-visual {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
    padding-left: 24px;
}

/* Image */
.df-swiper-hero-img {
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    border-radius: var(--df-radius-lg);
    border: 1px solid rgba(74,171,234,0.25);
    box-shadow:0 0 0 1px rgba(47,128,237,0.15),var(--df-glow),0 40px 80px rgba(0,0,0,0.55);
}

/* Stats Row */
.df-swiper-hero-stat-row {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: stretch;
    gap: 0;
    padding-top: 32px;
    border-top: 1px solid rgba(74,171,234,0.2);
}

/* Individual Stat */
.df-swiper-hero-stat {
    position: relative;
    flex: 1;
    text-align: center;
    padding: 0 20px;
}

/* Divider */
.df-swiper-hero-stat + .df-swiper-hero-stat::before {
    content: '';
    position: absolute;
    left: 0;
    top: 10%;
    width: 1px;
    height: 80%;
    background: rgba(74,171,234,0.25);
}

.df-swiper-hero-stat strong {
    display: block;
    font-family: var(--df-font-head);
    font-size: 1.9rem;
    font-weight: 800;
    line-height: 1.1;
    background: linear-gradient(90deg,#6db8ff,var(--df-sky));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.df-swiper-hero-stat span {
    display: block;
    margin-top: 4px;
    font-size: 0.78rem;
    font-weight: 400;
    color: #8fb0d8;
    letter-spacing: 0.03em;
}

/* =========================================================MOBILE / RESPONSIVE========================================================= */
@media (max-width: 991px) {
    .df-swiper-hero {
        grid-template-columns: 1fr;
        gap: 32px;
        padding: 32px 20px 48px;
    }

    .df-swiper-hero-content {
        max-width: 100%;
        padding-right: 0;
    }

    .df-swiper-hero-visual {
        justify-content: center;
        padding-left: 0;
    }

    .df-swiper-hero-stat-row {
        flex-wrap: wrap;
        gap: 24px 0;
    }

    .df-swiper-hero-stat {
        width: 50%;
        flex: none;
    }

    .df-swiper-hero-stat(odd)::before {
        display: none;
    }
}

@media (max-width: 576px) {
    .df-swiper-hero h1 {
        font-size: 2rem;
        line-height: 1.2;
    }

    .df-swiper-hero p {
        font-size: 1rem;
        line-height: 1.7;
    }

    .df-swiper-hero-btns {
        flex-direction: column;
        align-items: stretch;
    }

    .df-swiper-hero-btns .df-btn {
        width: 100%;
        text-align: center;
    }

    .df-swiper-hero-stat {
        width: 100%;
    }

    .df-swiper-hero-stat::before {
        display: none !important;
    }
}

/* =========================================================
   LOADPRO HOME HERO
   ========================================================= */
.loadpro-home-hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 620px;
    padding: 70px 5%;
    overflow: hidden;
    background-color: #ffffff;
    background-image: url('/pictures/truck-dispatch-servicesB.jpg');
    background-repeat: no-repeat;
    /* Image stays on right */
    background-position: right center;
    /*
       Important:
       contain the image rather than aggressively cropping it
    */
    background-size: auto 100%;
}

/* White fade over truck image */
.loadpro-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient( 90deg, #ffffff 0%, #ffffff 38%, rgba(255,255,255,0.98) 44%, rgba(255,255,255,0.90) 49%, rgba(255,255,255,0.58) 57%, rgba(255,255,255,0.18) 66%, rgba(255,255,255,0) 76% );
    z-index: 1;
    pointer-events: none;
}

/* Main content */
.loadpro-home-hero .df-hero-content {
    position: relative;
    z-index: 2;
    width: 50%;
    max-width: 650px;
    padding-right: 35px;
}

/* Badge */
.loadpro-home-hero .df-hero-badge {
    margin-bottom: 26px;
}

/* Headline */
.loadpro-home-hero h1 {
    max-width: 650px;
    margin-bottom: 24px;
    color: #0d1d3a;
    text-shadow: none;
    letter-spacing: -0.035em;
}

/* Blue highlighted headline */
.loadpro-home-hero h1 em {
    font-style: normal;
    font-weight: 800;
    color: #2f80ed;
    background: none;
    -webkit-background-clip: initial;
    background-clip: initial;
    -webkit-text-fill-color: #2f80ed;
}

/* Description */
.loadpro-home-hero p {
    max-width: 590px;
    color: #52677f;
    font-weight: 400;
    line-height: 1.7;
    margin-bottom: 32px;
}

/* Buttons */
.loadpro-home-hero .df-hero-btns {
    position: relative;
    z-index: 3;
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

/* Trust row */
.loadpro-hero-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin-top: 34px;
    padding-top: 22px;
    border-top: 1px solid rgba(47,128,237,0.18);
}

.loadpro-hero-trust > div {
    display: flex;
    align-items: center;
    gap: 7px;
    font-family: var(--df-font-head);
    font-size: 0.78rem;
    font-weight: 600;
    color: #7188a4;
}

.loadpro-hero-trust i {
    color: #2f80ed;
    font-size: 1rem;
}

/* =========================================================
   TABLET
   ========================================================= */
@media (max-width: 1100px) {
    .loadpro-home-hero {
        min-height: 590px;
        background-size: auto 100%;
        background-position: 72% center;
    }

    .loadpro-home-hero .df-hero-content {
        width: 55%;
    }
}

/* =========================================================
   MOBILE
   ========================================================= */
@media (max-width: 900px) {
    .loadpro-home-hero {
        display: block;
        min-height: auto;
        padding: 55px 5% 390px;
        /*
          Put image underneath content instead.
        */
        background-size: auto 360px;
        background-position: center bottom;
    }

    .loadpro-hero-overlay {
        background: linear-gradient( 180deg, #ffffff 0%, #ffffff 52%, rgba(255,255,255,0.98) 60%, rgba(255,255,255,0.70) 68%, rgba(255,255,255,0.15) 78%, rgba(255,255,255,0) 88% );
    }

    .loadpro-home-hero .df-hero-content {
        width: 100%;
        max-width: 100%;
        padding-right: 0;
    }
}

/* =========================================================
   SMALL MOBILE
   ========================================================= */
@media (max-width: 576px) {
    .loadpro-home-hero {
        padding: 42px 20px 315px;
        background-size: auto 290px;
    }

    .loadpro-home-hero h1 {
        font-size: 2rem;
        line-height: 1.15;
    }

    .loadpro-home-hero .df-hero-btns {
        flex-direction: column;
        align-items: stretch;
    }

    .loadpro-home-hero .df-btn {
        width: 100%;
        justify-content: center;
    }

    .loadpro-hero-trust {
        gap: 14px 16px;
    }

    .loadpro-hero-trust > div {
        width: calc(50% - 8px);
    }
}


/* =========================================================
   DISPATCH SERVICES  -  home page
   Uses the existing primitives: .df-section / .df-row /
   .df-col-half / .df-card / .df-feature-list

   WHY THIS SECTION CARRIES ITS OWN DARK BACKGROUND
   body currently sets  --df-navy: #ffffff  (the original #0d1d3a sits
   commented out beside it), but the TEXT tokens were left at their
   dark-theme values - --df-white #f0f6ff, --df-text #c8d8f0. Light text
   on a white page is invisible, which is what made the heading vanish.
   .df-card also hardcodes rgba(18,35,68,0.7) instead of a token, so the
   card stayed dark while the page turned white.

   Rather than change shared tokens - that would move every page - this
   section paints its own navy band, so the kit's own colours work as
   designed and the card sits on it naturally. When the theme flip is
   finished properly, delete the background line below.
   ========================================================= */

.loadpro-services {
    background: #0d1d3a;            /* the original --df-navy, hardcoded on purpose */
    color: var(--df-text);
}

/* Grid, not flex. .df-col-half is flex:1 1 420px, so the pair wraps to a
   single column the moment the container is under ~900px - including
   inside a narrow CMS content box. Grid makes the two-up deterministic. */
.loadpro-services .df-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 44px;
}

.loadpro-services h2 {
    font-family: var(--df-font-head, 'Syne', sans-serif);
    font-size: clamp(1.9rem, 3.4vw, 2.7rem);
    line-height: 1.15;
    color: var(--df-white);
    margin: 0 0 16px;
}

.loadpro-services p {
    color: var(--df-text);
    max-width: 52ch;
    margin: 0 0 26px;
}

.loadpro-services .df-feature-list li {
    color: var(--df-text);
    /* restores the separator the base rule loses: the global
       .df-feature-list li { border-bottom:none } was meant to be
       li:last-child */
    border-bottom: 1px solid rgba(74,171,234,0.12);
}

.loadpro-services .df-feature-list li:last-child {
    border-bottom: none;
}

/* The global .df-card carries its :hover state permanently - the second
   .df-card block lost its :hover - so every card floats and glows at
   rest. Neutralise that here and put the real hover back. */
.loadpro-services .df-card {
    transform: none;
    box-shadow: none;
    border-color: var(--df-border);
}

.loadpro-services .df-card:hover {
    border-color: rgba(74,171,234,0.45);
    box-shadow: var(--df-glow);
    transform: translateY(-4px);
}

/* ---------------------------------------------------------
   The plan card.
   .df-price-* was already fully styled and completely unused -
   including the automatic checkmark on .df-price-list li::before,
   so the markup carries no icons of its own.
   Only these few rules are new.
   --------------------------------------------------------- */

/* the accent border + glow of .featured, WITHOUT its rotated
   "Most Popular" ribbon - there is only one plan, so the ribbon
   would be claiming something meaningless */
.loadpro-services .df-price-card {
    border-color: rgba(74,171,234,0.45);
    box-shadow: var(--df-glow);
}

.loadpro-services .df-price-title {
    font-family: var(--df-font-head, 'Syne', sans-serif);
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--df-white);
    margin: 0;
}

.loadpro-services .df-price-note {
    font-size: 0.82rem;
    color: var(--df-muted);
    margin: 0 0 4px;
}

/* TWO columns. Eleven single-file rows made the card far taller than the
   text beside it. Two columns turns 11 rows into 6 and the section
   balances. The base rule's per-row border is dropped here - in a grid it
   reads as table ruling rather than a list. */
.loadpro-services .df-price-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 24px;
    row-gap: 2px;
    margin: 24px 0 28px;
}

.loadpro-services .df-price-list li {
    border-bottom: none;
    padding: 6px 0;
    font-size: 0.86rem;
    line-height: 1.35;
}

/* supporting image under the intro copy */
.loadpro-services-media {
    margin-top: 30px;
    border: 1px solid var(--df-border);
    border-radius: var(--df-radius-lg);
    overflow: hidden;
    line-height: 0;
}

.loadpro-services-media img {
    display: block;
    width: 100%;
    height: auto;
}

@media (max-width: 640px) {

    /* single column again on a phone - two columns of 0.86rem text in
       half a screen is unreadable */
    .loadpro-services .df-price-list {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 900px) {

    .loadpro-services .df-row {
        grid-template-columns: 1fr;
        gap: 28px;
    }
}