/* =========================================================
   FUTURISTIC SITE THEME
   Continues the hero look across the page: plain deep-navy background (no animation),
   glass panels, orange→blue accents.
   Load after style.css / header-dark.css. Content is untouched.
========================================================= */

:root {
    --fx-bg: #09141f;   /* plain deep navy (a darker shade of the top strip's right-end colour) */
    --fx-orange: #a78bfa;
    --fx-blue: #0bcefc;
    --fx-grad: linear-gradient(90deg, #a78bfa, #c4b5fd 35%, #0bcefc);
    --fx-text: #fff;
    --fx-muted: rgba(255, 255, 255, .64);
    --fx-glass: rgba(255, 255, 255, .035);
    --fx-glass-hi: rgba(255, 255, 255, .06);
    --fx-line: rgba(255, 255, 255, .1);
    --fx-glow: 0 0 0 1px rgba(11, 206, 252, .35), 0 18px 50px rgba(11, 206, 252, .18);
}

html, body { background: var(--fx-bg); }
body { color: var(--fx-text); }

/* header: dark glass so the space shows through */
.site-header {
    background: rgba(0, 0, 0, .72);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--fx-line);
}

/* shared gradient-text helper used by headings below */

.products-heading h2 .products-accent {
    background: var(--fx-grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* ---------------------------------------------------------
   ACHIEVEMENTS STRIP
--------------------------------------------------------- */
.achievements-section {
    background: rgba(255, 255, 255, .02);
    border-top: 1px solid var(--fx-line);
    border-bottom: 1px solid var(--fx-line);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    scrollbar-color: #31517c transparent;
}
.achievements-section .stat-card {
    background: transparent;
    border-color: var(--fx-line);
    box-shadow: none;
}
.achievements-section .stat-number {
    background: var(--fx-grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.achievements-section .stat-card h3 { color: var(--fx-muted); }

/* ---------------------------------------------------------
   SERVICES
--------------------------------------------------------- */
.dm-services { background: transparent; }
.dm-services-label { color: var(--fx-orange); letter-spacing: .18em; }
.dm-services-heading h2 { color: var(--fx-text); }
.dm-heading-line { background: var(--fx-grad); }
.dm-heading-line::before,
.dm-heading-line::after { background: var(--fx-blue); }

.dm-service-card {
    background: var(--fx-glass);
    border: 1px solid var(--fx-line);
    box-shadow: none;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}
.dm-service-card:hover {
    border-color: rgba(11, 206, 252, .45);
    box-shadow: var(--fx-glow);
}
.dm-service-icon {
    background: rgba(255, 255, 255, .06);
    box-shadow: inset 0 0 0 1px var(--fx-line), 0 0 24px rgba(167, 139, 250, .15);
}
.dm-service-icon img { filter: invert(1) hue-rotate(180deg) brightness(1.1); }
.dm-card-content h3 { color: var(--fx-text); }
.dm-card-content p { color: var(--fx-muted); }
.dm-card-line { background: var(--fx-grad); }
.dm-service-list li { color: rgba(255, 255, 255, .82); }
.dm-service-list li::before { color: var(--fx-orange); border-color: var(--fx-orange); }
.dm-view-more { color: var(--fx-orange); }

/* ---------------------------------------------------------
   PRODUCTS
--------------------------------------------------------- */
.products-section { background: transparent; }
.products-section .section-label strong,
.products-section .section-label { color: var(--fx-orange); }
.products-section .section-label span { background: var(--fx-line); }
.products-heading h2 { color: var(--fx-text); }
.products-heading p { color: var(--fx-muted); }
.product-card {
    border: 1px solid var(--fx-line);
    box-shadow: 0 0 40px rgba(11, 206, 252, .08);
}

/* ---------------------------------------------------------
   FOOTER: let the space continue underneath
--------------------------------------------------------- */
.dm-footer {
    background: linear-gradient(180deg, rgba(0, 0, 0, .35), rgba(0, 0, 0, .8));
}

/* ---------------------------------------------------------
   SECURITY PAGE
--------------------------------------------------------- */
.security-page { background: transparent; }
.ssi-hero {
    background: radial-gradient(ellipse at 9% 95%, rgba(11, 206, 252, .14), transparent 45%);
}
.ssi-hero-visual { box-shadow: var(--fx-glow); }
.ssi-services,
.ssi-contact-band {
    background: rgba(255, 255, 255, .02);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
.ssi-contact-band { border-top: 1px solid var(--fx-line); }
.ssi-service-card {
    background: var(--fx-glass);
    border-color: var(--fx-line);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}
.ssi-service-card::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 1px;
    background: var(--fx-grad);
    opacity: .7;
}
.ssi-service-card:hover,
.ssi-service-card:focus-within { border-color: rgba(11, 206, 252, .45); box-shadow: var(--fx-glow); }

/* light products block turns dark */
.ssi-products { background: transparent; color: var(--fx-text); }
.ssi-section-heading-light .ssi-kicker { color: var(--fx-orange); }
.ssi-section-heading-light h2 { color: var(--fx-text); }
.ssi-section-heading-light p { color: var(--fx-muted); }
.ssi-product-card {
    background: var(--fx-glass);
    box-shadow: inset 0 0 0 1px var(--fx-line);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}
.ssi-product-card:hover { box-shadow: inset 0 0 0 1px rgba(11, 206, 252, .45), 0 18px 50px rgba(11, 206, 252, .18); }
.ssi-product-image { background: #0b1220; }
.ssi-product-caption h3 { color: var(--fx-text); }

/* ---------------------------------------------------------
   CONTACT PAGE
--------------------------------------------------------- */
.contact-page { background: transparent; }
.contact-hero { background-color: transparent; }
.contact-form,
.contact-detail-note {
    background: rgba(255, 255, 255, .04);
    border-color: var(--fx-line);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}
.contact-form { box-shadow: 0 0 0 1px rgba(11, 206, 252, .12), 0 24px 60px rgba(0, 0, 0, .35); }

/* ---------------------------------------------------------
   DIGITAL BRANDING PAGE (minimal layout, dark version)
--------------------------------------------------------- */
.dbs-page {
    --dbs-ink: #fff;
    --dbs-text: rgba(255, 255, 255, .64);
    --dbs-accent: #a78bfa;
    --dbs-line: rgba(255, 255, 255, .1);
    --dbs-track: rgba(255, 255, 255, .08);
    background: transparent;
}
.dbs-words { border-right-color: rgba(11, 206, 252, .8); }


/* ---------------------------------------------------------
   APP PAGE
--------------------------------------------------------- */
.app-page { background: transparent; }
.app-page .app-card {
    position: relative;
    background: rgba(255, 255, 255, .04);
    border-color: var(--fx-line);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    box-shadow: var(--fx-glow);
    overflow: hidden;
}
.app-page .app-card::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 1px;
    background: var(--fx-grad);
}
.app-page .badge { background: rgba(167, 139, 250, .14); color: var(--fx-orange); }
.app-page .store-btn:not(.secondary) { background: linear-gradient(135deg, #a78bfa, #0bcefc); }

/* simple social footer used on some pages */


/* ---------------------------------------------------------
   MOBILITY / GPS DEVICES PAGE
--------------------------------------------------------- */
.products-section:has(.products-intro) { background: transparent; }
.products-section:has(.products-intro)::before { display: none; }
.products-section .products-intro {
    width: min(1250px, calc(100% - 40px)) !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-top: 40px;
}
.products-intro .section-label { color: var(--fx-orange); border-color: rgba(167, 139, 250, .4); }
.products-grid .product-card {
    background: var(--fx-glass);
    border: 1px solid var(--fx-line);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: none;
    position: relative;
    overflow: hidden;
}
.products-grid .product-card::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 1px;
    background: var(--fx-grad);
    opacity: .7;
}
.products-grid .product-card:hover,
.products-grid .product-card:focus-within {
    border-color: rgba(11, 206, 252, .45);
    box-shadow: var(--fx-glow);
}
.products-grid .product-image-area { background: transparent; }
.products-grid .product-image-area img { border-radius: 10px; }
.products-grid .details { color: var(--fx-orange); }

/* blue "Our App" button on this page matches the header-dark outline style */
.site-header .app-button {
    background: transparent;
    border: 1px solid #fff;
    border-radius: 0;
    color: #fff;
}
.site-header .app-button:hover { background: #fff; color: #000; }

/* =========================================================
   FX LAYER (with fx-enhance.js)
========================================================= */
@property --fx-angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

/* scroll progress */
.fx-progress {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 100000;
    width: 100%;
    height: 2px;
    background: var(--fx-grad);
    box-shadow: 0 0 10px rgba(167, 139, 250, .7), 0 0 18px rgba(11, 206, 252, .6);
    transform: scaleX(0);
    transform-origin: 0 50%;
    pointer-events: none;
}

/* faint perspective grid "floor" glowing under content sections */
.dm-services,
.products-section,
.ssi-services,
.ssi-products { position: relative; isolation: isolate; }
.dm-services::after,
.products-section:not(:has(.products-intro))::after,
.ssi-services::after,
.ssi-products::after {
    content: "";
    position: absolute;
    left: -10%;
    right: -10%;
    bottom: 0;
    height: 55%;
    z-index: -1;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(11, 206, 252, .22) 1px, transparent 1px),
        linear-gradient(90deg, rgba(11, 206, 252, .22) 1px, transparent 1px);
    background-size: 64px 64px;
    transform: perspective(500px) rotateX(62deg);
    transform-origin: 50% 100%;
    mask-image: linear-gradient(to top, #000 0%, transparent 85%);
    -webkit-mask-image: linear-gradient(to top, #000 0%, transparent 85%);
    opacity: .55;
}

/* section headings: light sweeps slowly across the text */
.dm-services-heading h2,
.ssi-section-heading h2,
.products-intro h1,
.contact-hero h1 {
    background: linear-gradient(100deg, #fff 0%, #fff 40%, #c4b5fd 47%, #9be9ff 53%, #fff 60%, #fff 100%);
    background-size: 250% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: fxSheen 7s ease-in-out infinite;
}
@keyframes fxSheen {
    0%, 35% { background-position: 100% 0; }
    70%, 100% { background-position: 0 0; }
}

/* small labels glow */
.dm-services-label,
.products-section .section-label,
.ssi-kicker {
    text-shadow: 0 0 12px rgba(167, 139, 250, .55);
}

/* ---------- cards ---------- */
.fx-card { --mx: 50%; --my: 0%; }

/* rise-in on scroll (uses the separate `translate` property so hover transforms still work) */
.fx-rise {
    opacity: 0;
    translate: 0 36px;
    transition: opacity .8s ease var(--fx-delay, 0ms), translate .9s cubic-bezier(.16, 1, .3, 1) var(--fx-delay, 0ms);
}
.fx-rise.fx-in { opacity: 1; translate: 0 0; }

/* cursor spotlight */
.dm-service-card,
.ssi-service-card,
.ssi-product-card,
.products-grid .product-card,
.contact-form,
.app-page .app-card {
    background-image: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(11, 206, 252, .16), transparent 45%);
}
/* 3D tilt composes with each card's own hover lift */
.dm-service-card,
.ssi-service-card,
.ssi-product-card,
.products-grid .product-card,
.app-page .app-card {
    transform: var(--tilt, none);
    transition: transform .35s cubic-bezier(.16, 1, .3, 1), box-shadow .35s ease, border-color .35s ease, opacity .8s ease var(--fx-delay, 0ms), translate .9s cubic-bezier(.16, 1, .3, 1) var(--fx-delay, 0ms);
}
.dm-service-card:hover { transform: var(--tilt, none) translateY(-7px); }
.ssi-service-card:hover,
.ssi-product-card:hover,
.products-grid .product-card:hover { transform: var(--tilt, none) translateY(-5px); }

/* animated light running around the card border (App page cards only) */
.app-page .app-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 4;
    padding: 1px;
    border-radius: inherit;
    pointer-events: none;
    background: conic-gradient(from var(--fx-angle), transparent 0 70%, rgba(167, 139, 250, .9) 80%, rgba(11, 206, 252, .95) 90%, transparent 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    opacity: .35;
    animation: fxSpin 6s linear infinite;
    transition: opacity .35s ease;
}
.app-page .app-card:hover::after { opacity: 1; animation-duration: 2.5s; }
@keyframes fxSpin { to { --fx-angle: 360deg; } }

/* stats: neon numbers */
.achievements-section .stat-number {
    filter: drop-shadow(0 0 10px rgba(167, 139, 250, .35)) drop-shadow(0 0 18px rgba(11, 206, 252, .25));
}
.achievements-section .stat-card:hover { background: rgba(255, 255, 255, .03); }


/* buttons and CTAs glow */
.app-button:hover,
.ssi-hero-actions a:hover,
.ssi-contact-inner a:hover,
.store-btn:hover,
.contact-form button:hover {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .6), 0 0 22px rgba(167, 139, 250, .45), 0 0 40px rgba(11, 206, 252, .35);
}

/* header: glowing gradient hairline under the bar */
.site-header { border-bottom-color: transparent; }
.site-header::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(167, 139, 250, .7), rgba(11, 206, 252, .7), transparent);
    opacity: .7;
    pointer-events: none;
}

/* form fields light up on focus */
.contact-form input,
.contact-form textarea,
.contact-form select {
    transition: border-color .25s ease, box-shadow .25s ease;
}
.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus {
    border-color: rgba(11, 206, 252, .7);
    box-shadow: 0 0 0 3px rgba(11, 206, 252, .18), 0 0 20px rgba(11, 206, 252, .25);
    outline: none;
}

/* hero rocket section fades into the rest of the page */
.hero-section.has-rocket-animation::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 120px;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, .85));
}

@media (prefers-reduced-motion: reduce) {
    .dm-services::after, .ssi-services::after, .ssi-products::after, .products-section::after,
    .dm-services-heading h2, .ssi-section-heading h2, .products-intro h1, .contact-hero h1,
    .app-page .app-card::after,
    .dm-service-icon { animation: none; }
    .fx-rise { opacity: 1; translate: none; transition: none; }
}

/* =========================================================
   PALETTE MATCH: every accent uses the hero's orange (#f48c18)
   and blue (#4089dd) instead of the old reds, greens and teals.
========================================================= */
:root {
    --fx-orange-hi: #c4b5fd;
    --fx-blue-hi: #8ee9ff;
}

/* top contact strip: red bar -> dark glass with glowing gradient edge */
.site-contact-strip {
    background: linear-gradient(90deg, rgba(167, 139, 250, .22), rgba(0, 0, 0, .6) 45%, rgba(11, 206, 252, .22));
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid transparent;
    border-image: var(--fx-grad) 1;
}
.site-contact-strip a:hover,
.site-contact-strip a:focus-visible { color: var(--fx-orange); }   /* dark theme: orange, like the footer Popular Links */
/* dark theme hover: the glow is orange to match */
.site-contact-strip > a:hover,
.site-contact-strip > a:focus-visible { text-shadow: 0 0 6px rgba(167, 139, 250, .85); }
.site-contact-strip > a:hover .contact-strip-icon,
.site-contact-strip > a:focus-visible .contact-strip-icon { filter: drop-shadow(0 0 3px rgba(167, 139, 250, .9)); }
.site-contact-social a:hover,
.site-contact-social a:focus-visible { filter: drop-shadow(0 0 3px rgba(167, 139, 250, .95)); }

/* footer */
.dm-logo span,
.dm-footer .dm-logo span {
    background: var(--fx-grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.dm-links nav a:hover,
.dm-services nav a:hover,
.dm-bottom-nav a:hover,
.dm-copyright a{ color: var(--fx-orange); }

/* mobile menu underline + hover */
.mobile-simple-link::after,
.mobile-dropdown-toggle::after { background: var(--fx-grad) !important; }
.mobile-dropdown a:hover,
.mobile-simple-link:hover { color: var(--fx-orange-hi) !important; }

/* floating buttons: the WhatsApp button keeps its original green in both themes (see security-page.css) */

/* security page: red accents -> orange/blue */
.security-page { --ssi-red: #a78bfa; }
.ssi-hero h1 em {
    background: var(--fx-grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.ssi-kicker,
.ssi-section-heading-dark .ssi-kicker,
.ssi-contact-inner .ssi-kicker { color: var(--fx-orange); }
.ssi-service-icon { color: var(--fx-blue-hi); filter: drop-shadow(0 0 8px rgba(11, 206, 252, .5)); }
.ssi-service-more,
.ssi-product-link b { color: var(--fx-orange); }
.ssi-product-tag { color: var(--fx-orange-hi); }
.ssi-service-card::after { border-color: rgba(11, 206, 252, .25); }
.ssi-service-card:hover,
.ssi-service-card:focus-within { border-color: rgba(11, 206, 252, .5); }
.ssi-button-primary {
    border-color: transparent;
    background: linear-gradient(135deg, #a78bfa, #0bcefc);
}

/* contact page: teal -> orange/blue */
.contact-eyebrow {
    background: rgba(167, 139, 250, .1);
    border-color: rgba(167, 139, 250, .4);
    color: var(--fx-orange);
}
.contact-hero {
    background:
        radial-gradient(ellipse at 12% 100%, rgba(11, 206, 252, .18), transparent 42%),
        radial-gradient(ellipse at 90% 0%, rgba(167, 139, 250, .12), transparent 40%),
        linear-gradient(rgba(255, 255, 255, .025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .025) 1px, transparent 1px);
    background-size: auto, auto, 42px 42px, 42px 42px;
}
.contact-form button,
.contact-form [type="submit"] { background: linear-gradient(135deg, #a78bfa, #0bcefc); border-color: transparent; }

/* GPS devices page: green ticks + coloured badges */
.product-content li::before { color: var(--fx-orange); }
.badge.green,
.badge.blue,
.badge.yellow {
    background: rgba(0, 0, 0, .55);
    border: 1px solid rgba(167, 139, 250, .55);
    color: var(--fx-orange-hi);
}
.badge.blue { border-color: rgba(11, 206, 252, .6); color: var(--fx-blue-hi); }

/* app page secondary button */
.app-page .store-btn.secondary { border-color: rgba(11, 206, 252, .5); }

/* the page colour sits on <html>; <body> is see-through */
html { background: var(--fx-bg); }
html body,
html body.app-page{ background: transparent !important; }

/* hero rotating word: gradient on each flipping word (not the wrapper, which hid them) */
.hero-content h1 strong { color: #a78bfa; }
.hero-content h1 .hero-rotator > span {
    background: linear-gradient(90deg, #a78bfa, #c4b5fd 45%, #0bcefc);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.contact-form input,
.contact-form textarea,
.contact-form select {
    background: rgba(255, 255, 255, .04);
    border: 1px solid var(--fx-line);
    color: #fff;
}
.contact-form input::placeholder,
.contact-form textarea::placeholder { color: rgba(255, 255, 255, .4); }

/* keep the perspective grid floor (wider than its section) from causing sideways scroll */
.dm-services,
.products-section,
.ssi-services,
.ssi-products { overflow-x: clip; }

/* service cards: keep the logo visible (same glass circle + light logo) while hovering */
.dm-service-card:hover .dm-service-icon { background: rgba(255, 255, 255, .06); }
.dm-service-card:hover .dm-service-icon img { filter: invert(1) hue-rotate(180deg) brightness(1.1); }