/* =========================================================
   DARK THEME - sparklayer.io "Everything built in / One B2B platform" look
   (loaded only in the dark theme; the home hero is left as it is)
     - background: navy gradient, purple glow top left, pink glow bottom right,
       faint concentric rings top right
     - font: Geist; section headings 28px / 500 white with a lilac highlighted phrase
       that a colour band sweeps across once; cyan labels; 15px lilac descriptions
     - cards: frosted glass, 12px corners, thin violet/cyan light orbiting the border;
       16.5px titles, 13.5px text, violet bullet dots
     - heading blocks and cards fade up 12px into view (0.55s)
   Classes and spans come from dark-spark.js.
========================================================= */

:root { --fx-bg: #0a0e26; }

/* ---------- background ---------- */
html[data-theme="dark"] { background: #0a0e26; }
html[data-theme="dark"] body::before {
    background:
        radial-gradient(820px 420px at 20% 0%, rgba(103, 30, 243, .4), transparent 60%),
        radial-gradient(660px 400px at 92% 100%, rgba(255, 2, 106, .16), transparent 55%),
        linear-gradient(#0a0e26, #141a41);
}
html[data-theme="dark"] body::after {
    display: block;
    background: repeating-radial-gradient(circle at 84% 16%, transparent 0, transparent 78px, rgba(255, 255, 255, .05) 78px, rgba(255, 255, 255, .05) 79.5px);
    -webkit-mask-image: radial-gradient(130% 130% at 84% 16%, #000 0%, rgba(0, 0, 0, .5) 40%, transparent 72%);
            mask-image: radial-gradient(130% 130% at 84% 16%, #000 0%, rgba(0, 0, 0, .5) 40%, transparent 72%);
}

/* ---------- font: Geist everywhere except the home hero, the logos and the loader ---------- */
html[data-theme="dark"] body,
html[data-theme="dark"] body *:not(.hero-section, .hero-section *, .dm-preloader *, [class*="logo"], [class*="logo"] *, .dm-i3ms-layout, .dm-i3ms-layout *, [class^="ti-"], [class*=" ti-"]) {
    font-family: Geist, Inter, system-ui, -apple-system, "Segoe UI", sans-serif !important;
}

/* ---------- section headings ---------- */
html[data-theme="dark"] :is(.achievements-head, .dm-services-heading, .products-heading, .ssi-section-heading, .ssi-contact-inner, .dbs-services-intro) h2,
html[data-theme="dark"] #dm-projects-title,
html[data-theme="dark"] .dm-cta .dm-cta-text h2 {
    font-size: clamp(21px, 2.4vw, 28px) !important;
    font-weight: 500 !important;
    line-height: 1.38 !important;
    letter-spacing: -.02em !important;
    text-transform: none !important;
    color: #fff !important;
    background: none !important;
    -webkit-text-fill-color: #fff !important;
    text-shadow: none !important;
    text-wrap: balance;
}
/* letters no longer rise one by one in the dark theme: the whole block fades up instead */
html[data-theme="dark"].um-on .um-scroll .um-unit { opacity: 1 !important; transform: none !important; transition: none !important; }   /* .um-on sits on <html> itself */
html[data-theme="dark"].um-on .um-scroll .um-unit,
html[data-theme="dark"].um-on .um-scroll .um-mask { -webkit-text-fill-color: inherit !important; }

/* highlighted phrase: lilac, revealed by a cyan -> violet -> pink -> orange band sweeping across once */
html[data-theme="dark"] h2 .ds-accent {
    font-weight: 600 !important;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
    background-image: linear-gradient(90deg, #aab2d8 0%, #aab2d8 22%, #aab2d8 33.33%, #9be9ff 40%, #0bcefc 44%, #7c5cff 49%, #ff026a 54%, #c084fc 59%, transparent 66.67%, transparent) !important;
    background-size: 300% 100% !important;
    background-position: 100% 0;            /* no !important: the sweep animation must be able to move it */
    -webkit-background-clip: text !important;
            background-clip: text !important;
}
html[data-theme="dark"] h2 .ds-accent.ds-go { animation: dsSweep 1.2s ease .1s both; }
@keyframes dsSweep {
    0%   { background-position: 100% 0; filter: blur(1px); }
    100% { background-position: 0 0; filter: none; }
}

/* small labels above headings: cyan, sentence case */
html[data-theme="dark"] :is(.dm-services-label, .section-label, .ssi-kicker, .ssi-eyebrow, .contact-eyebrow, .app-card .badge) {
    display: inline-block;
    font-size: 16px !important;
    font-weight: 500 !important;
    letter-spacing: -.01em !important;
    text-transform: lowercase !important;
    color: #0bcefc !important;
    -webkit-text-fill-color: #0bcefc !important;
    background: none !important;
    margin-bottom: 12px;
}
html[data-theme="dark"] :is(.dm-services-label, .section-label, .ssi-kicker, .ssi-eyebrow, .contact-eyebrow, .app-card .badge)::first-letter { text-transform: uppercase; }
/* the reference has no orange bar under the label */
html[data-theme="dark"] .dm-heading-line { display: none !important; }

/* descriptions under headings */
html[data-theme="dark"] :is(.achievements-head, .products-heading, .ssi-section-heading, .dbs-services-intro, .products-intro) > p {
    font-size: 15px !important;
    line-height: 24px !important;
    letter-spacing: normal !important;
    color: #aab2d8 !important;
    margin-top: 14px;
}
html[data-theme="dark"] .dm-cta .dm-cta-text p { color: #aab2d8 !important; }

/* heading blocks fade up into view */
html[data-theme="dark"] .ds-rv {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .55s cubic-bezier(.22, .8, .3, 1), transform .55s cubic-bezier(.22, .8, .3, 1);
}
html[data-theme="dark"] .ds-rv.ds-in { opacity: 1; transform: none; }

/* ---------- cards ---------- */
html[data-theme="dark"] :is(.dm-service-card, .achievements-section .stat-card, .ssi-service-card, .ssi-product-card, .products-grid .product-card, .dbs-features > div, .contact-detail-note) {
    background-color: rgba(255, 255, 255, .043) !important;
    border: 1px solid rgba(255, 255, 255, .11) !important;
    border-radius: 12px !important;
    -webkit-backdrop-filter: blur(4px);
            backdrop-filter: blur(4px);
    box-shadow: none !important;
}
html[data-theme="dark"] :is(.contact-form, .app-card) {
    border-color: rgba(255, 255, 255, .11) !important;
    border-radius: 12px !important;
}

/* thin violet / cyan light orbiting the border (one span per card, from dark-spark.js) */
@property --ds-orbit { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.ds-orbit { display: none; }
html[data-theme="dark"] .ds-orbit {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 4;
    padding: 1px;
    border-radius: inherit;
    pointer-events: none;
    background: conic-gradient(from var(--ds-orbit), transparent 0deg 300deg, rgba(167, 139, 250, .55) 336deg, rgba(11, 206, 252, .75) 350deg, transparent 360deg);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
            mask: linear-gradient(#fff 0 0) content-box exclude, linear-gradient(#fff 0 0);
    animation: dsOrbit 6.5s steps(78) infinite;
}
@keyframes dsOrbit { to { --ds-orbit: 360deg; } }
html[data-theme="dark"] :is(.dm-service-card, .achievements-section .stat-card, .ssi-service-card, .ssi-product-card, .products-grid .product-card, .contact-form, .contact-detail-note, .app-card, .dbs-features > div):not(:is(td, th)) { position: relative; }

/* card text */
html[data-theme="dark"] :is(.dm-service-card, .ssi-service-card, .ssi-product-card, .products-grid .product-card, .dbs-features > div) :is(h3, h2) {
    font-size: 16.5px !important;
    font-weight: 600 !important;
    line-height: 1.5 !important;
    letter-spacing: -.02em !important;
    text-transform: none !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}
html[data-theme="dark"] :is(.dm-service-card, .ssi-service-card, .ssi-product-card, .products-grid .product-card, .dbs-features > div) p {
    font-size: 13.5px !important;
    line-height: 1.45 !important;
    color: #aeb5d8 !important;
}
html[data-theme="dark"] :is(.dm-service-card, .ssi-service-card, .ssi-product-card, .products-grid .product-card, .dbs-features > div) li {
    font-size: 13px !important;
    line-height: 1.4 !important;
    color: #c9cee8 !important;
}

/* cards fade up 12px with the reference timing (fx-enhance.js adds .fx-rise / .fx-in) */
html[data-theme="dark"] .fx-rise {
    translate: 0 12px;
    transition: opacity .55s cubic-bezier(.22, .8, .3, 1) var(--fx-delay, 0ms), translate .55s cubic-bezier(.22, .8, .3, 1) var(--fx-delay, 0ms);
}
html[data-theme="dark"] .fx-rise.fx-in { translate: 0 0; }

@media (prefers-reduced-motion: reduce) {
    html[data-theme="dark"] .ds-orbit { animation: none; }
    html[data-theme="dark"] h2 .ds-accent { background-position: 0 0; animation: none !important; }
    html[data-theme="dark"] .ds-rv { opacity: 1; transform: none; transition: none; }
}

/* page titles on the inner pages (not the home hero): same Geist look, normal case */
html[data-theme="dark"] :is(.products-intro h1, #ssi-title, #dbs-title, .app-card h1, #contact-title) {
    font-weight: 600 !important;
    letter-spacing: -.03em !important;
    text-transform: none !important;
    line-height: 1.12 !important;
}
html[data-theme="dark"] .products-intro h1 { font-size: clamp(30px, 3.4vw, 44px) !important; }
html[data-theme="dark"] .products-intro h1 :is(.heading-line, .subheading-line) { text-transform: none !important; }

/* =========================================================
   Colour theme: sparklayer.io palette for every accent (dark theme, not the home hero)
     violet #5b36f5 / #7c5cff, soft violet #a78bfa, pale violet #c4b5fd,
     cyan #0bcefc, pink #ff026a, orange #ff9243, navy #0a0e26 / #131a3f
   (site-futuristic.css and the dark rules of the other stylesheets were recoloured to it)
========================================================= */

/* primary buttons: the reference violet gradient pill */
html[data-theme="dark"] :is(.dm-cta .dm-cta-btn.is-primary, .ssi-button-primary, .contact-submit, .app-page .store-btn:not(.secondary)) {
    background: linear-gradient(120deg, #4f24cf 0%, #6d31e6 48%, #8348f0 100%) !important;
    border-color: transparent !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    box-shadow: none !important;
    transition: background .18s, filter .18s;
}
html[data-theme="dark"] :is(.dm-cta .dm-cta-btn.is-primary, .ssi-button-primary, .contact-submit, .app-page .store-btn:not(.secondary)):is(:hover, :focus-visible) {
    background: linear-gradient(120deg, #5c2ee0 0%, #7b3bf5 48%, #9159f7 100%) !important;
    filter: none !important;
}
/* outline buttons: thin white outline, as the reference "Try free" */
html[data-theme="dark"] :is(.dm-cta .dm-cta-btn.is-light, .ssi-button:not(.ssi-button-primary), .app-page .store-btn.secondary) {
    background: transparent !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28) !important;
    border-color: rgba(255, 255, 255, .28) !important;
    color: #fff !important;
}
html[data-theme="dark"] :is(.dm-cta .dm-cta-btn.is-light, .ssi-button:not(.ssi-button-primary), .app-page .store-btn.secondary):is(:hover, :focus-visible) {
    background: rgba(255, 255, 255, .06) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5) !important;
}
/* header "Get started": the reference "Book Demo" gradient (violet -> pink -> blue) */
html[data-theme="dark"] :is(.app-button, .mobile-app-button) {
    background: linear-gradient(54deg, #5b36f5 5.48%, #ff4cbf 44.27%, #3875f3 75.97%, #5b36f5 94.09%) 0 0 / 200% 100% #5b36f5 !important;
    border-color: transparent !important;
    color: #fff !important;
    border-radius: 60px !important;
    transition: background-position .4s ease;
}
html[data-theme="dark"] :is(.app-button, .mobile-app-button):is(:hover, :focus-visible) { background-position: 100% 0 !important; }


/* small status dot (Security page) */
html[data-theme="dark"] .ssi-status-dot { background: #0bcefc !important; box-shadow: 0 0 0 4px rgba(11, 206, 252, .18) !important; }

/* text selection, as the reference */
html[data-theme="dark"] ::selection { background: rgba(103, 30, 243, .45); color: #fff; }

/* service icons: the halo pulses violet <-> cyan (was orange <-> blue) */
html[data-theme="dark"] #dm-services .dm-service-icon { animation-name: dsSiHalo; }
@keyframes dsSiHalo {
    0%, 100% { box-shadow: inset 0 0 0 1px rgba(142, 233, 255, .35), 0 0 18px rgba(167, 139, 250, .16); }
    50%      { box-shadow: inset 0 0 0 1px rgba(11, 206, 252, .45), 0 0 30px rgba(11, 206, 252, .3); }
}


/* "MAX" in the logos: the reference's own headline gradient (blue -> violet -> magenta) */
html[data-theme="dark"] :is(.logo-text strong, .dm-logo span) {
    background: linear-gradient(90deg, #1e4ff3 0%, #a855f7 50%, #e0359e 100%) !important;
    -webkit-background-clip: text !important;
            background-clip: text !important;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
}

/* Projects (i3MS) tiles + panels: exactly as in the light theme - solid Metro tiles, Segoe UI,
   the grey login panel and the light query form; no glass, no orbit light, no scroll-in fade */
html[data-theme="dark"] #dm-projects .dm-i3ms-layout .fx-rise { opacity: 1; translate: none; transition: none; }
html[data-theme="dark"] #dm-projects .dm-i3ms-layout { font-family: "Segoe UI", "Segoe UI Web", "Open Sans", Tahoma, sans-serif !important; }

/* "Our Journey So Far": the whole section (heading + stats) sits in the same rounded band as
   "Let's Build Your Success Story" - faint white tint, hairline border, blur, soft shadow, 16px from the edges */
html[data-theme="dark"] body .achievements-section {
    position: relative;
    isolation: isolate;
    padding: 70px 48px 62px !important;
}
html[data-theme="dark"] body .achievements-section::before {
    content: "";
    display: block !important;
    position: absolute;
    top: 24px;
    bottom: 24px;
    left: max(16px, calc((100% - 1600px) / 2));
    right: max(16px, calc((100% - 1600px) / 2));
    z-index: -1;
    height: auto;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 18px;
    background: rgba(255, 255, 255, .04);
    -webkit-backdrop-filter: blur(6px);
            backdrop-filter: blur(6px);
    box-shadow: 0 2px 14px rgba(0, 0, 0, .35);
    animation: none;
    opacity: 1;
    transform: none;
}
/* no second box inside the band: the stat cards sit straight on it */
html[data-theme="dark"] body .achievements-section .achievements-container {
    background: transparent !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
    padding: 6px 0 0 !important;
}
@media (max-width: 600px) {
    html[data-theme="dark"] body .achievements-section { padding: 52px 30px 46px !important; }
    html[data-theme="dark"] body .achievements-section::before { top: 16px; bottom: 16px; }
}
/* the stat cards inside the band: no border and no orbiting border light */
html[data-theme="dark"] body .achievements-section .stat-card {
    border: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
}
html[data-theme="dark"] body .achievements-section .stat-card::before,
html[data-theme="dark"] body .achievements-section .stat-card::after,
html[data-theme="dark"] body .achievements-section .stat-card .ds-orbit { display: none !important; }
/* ... and no tile behind them: numbers + labels sit straight on the band */
html[data-theme="dark"] body .achievements-section .stat-card {
    background: transparent !important;
    background-image: none !important;
    -webkit-backdrop-filter: none !important;
            backdrop-filter: none !important;
}

/* =========================================================
   No red in the dark theme: red lines are removed, red fills / glows / text
   switch to the violet + cyan palette. The light theme keeps its red.
   (the Google logo in the rating badge keeps its own colours)
========================================================= */

/* red lines: removed */
html[data-theme="dark"] .logo-marquee .dm-product-card .dm-card-line,
html[data-theme="dark"] .cr-line::after,
html[data-theme="dark"] .cr-team-txt strong::after { display: none !important; }

/* Our Services hover shade: violet instead of red */
html[data-theme="dark"] .dm-service-card .dm-card-overlay,
html[data-theme="dark"] .dm-service-card.dm-service-digital .dm-card-overlay {
    background: linear-gradient(135deg, rgba(124, 92, 255, .80), rgba(11, 206, 252, .55)) !important;
}
html[data-theme="dark"] .dm-service-card:focus-visible { outline-color: #a78bfa !important; }
html[data-theme="dark"] .dm-service-card:hover .dm-service-icon img { filter: invert(1) hue-rotate(180deg) brightness(1.1) drop-shadow(0 0 5px rgba(167, 139, 250, .45)) !important; }

/* Projects (i3MS): the red / crimson tiles, login heading, query button and icon go violet */
html[data-theme="dark"] #dm-projects {
    --i3-orange: #5b36f5;
    --i3-red: #3b2394;
}
html[data-theme="dark"] #dm-projects .dm-i3ms-login nav a b { color: #5b36f5 !important; }

/* loader: "MAX" in the logo gradient instead of red */
html[data-theme="dark"] .dm-pl-name em,
html[data-theme="dark"] .dm-pl-name em .dm-pl-ch {
    color: #a78bfa !important;
    -webkit-text-fill-color: #a78bfa !important;
}

/* hero "recent buyers": the rose avatar becomes indigo */
html[data-theme="dark"] .hb-face[style*="251, 113, 133"],
html[data-theme="dark"] .hb-face[style*="#fb7185"] { background: linear-gradient(135deg, #818cf8, #4f46e5) !important; }

/* Security page: red dot / accent */
html[data-theme="dark"] .security-page { --ssi-red: #a78bfa; }
html[data-theme="dark"] :is(.ssi-eyebrow > span, .ssi-status-dot) { box-shadow: 0 0 0 4px rgba(167, 139, 250, .18) !important; }

/* Digital page: red image overlay, red hover text, coral avatar */
html[data-theme="dark"] .dbs-page .inner-box .overlay-box::before { background-color: rgba(91, 54, 245, .82) !important; }
html[data-theme="dark"] :is(.dbs-page .service-item:hover i, .dbs-page .service-item:hover h4, .dbs-page .service-item:hover p) { color: #a78bfa !important; }
html[data-theme="dark"] .ph-tasks .av:not(.b):not(.c) { background: #7c5cff !important; }
html[data-theme="dark"] .dbs-accent { --dbs-accent: #a78bfa; }

/* contact page careers: violet button / hovers */
html[data-theme="dark"] .cr-btn:not(.is-outline) { background: #5b36f5 !important; border-color: #5b36f5 !important; }
html[data-theme="dark"] .cr-btn:not(.is-outline):hover { background: #7c5cff !important; border-color: #7c5cff !important; box-shadow: 0 10px 24px rgba(124, 92, 255, .3) !important; }
html[data-theme="dark"] .cr-btn:focus-visible,
html[data-theme="dark"] .cr-filters button:focus-visible { outline-color: #0bcefc !important; }

/* hover / focus glows elsewhere */
html[data-theme="dark"] :is(.dm-cta .dm-cta-btn, .dm-office-gmap-link, .products-grid .product-card:has(.details:focus-visible)):focus-visible { outline-color: #a78bfa !important; }
html[data-theme="dark"] :is(.dm-office-pins a:hover rect, .dm-office-pins a:focus-visible rect) { fill: #7c5cff !important; }
html[data-theme="dark"] :is(.site-social-links a:hover, .site-social-links a:focus-visible) { filter: drop-shadow(0 0 4px rgba(167, 139, 250, .95)) !important; }