:root { color-scheme: dark; }
body { background-image: radial-gradient(circle at 80% 0%, rgba(183, 243, 74, .08), transparent 30rem); }
.eyebrow { letter-spacing: .22em; }
.nav-dropdown-trigger { display: inline-flex; align-items: center; gap: .45rem; }
.nav-chevron { width: .7rem; height: .45rem; flex: none; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.6; transition: transform .2s ease; }
details[open] .nav-chevron { transform: rotate(180deg); }
.circuit-board { background: #07111f; isolation: isolate; }
.circuit-board::after { position: absolute; inset: 0; z-index: 1; background: radial-gradient(circle at 50% 20%, rgba(7, 17, 31, .05), rgba(7, 17, 31, .72) 82%); content: ''; pointer-events: none; }
.circuit-canvas { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; opacity: .95; pointer-events: none; }
.wireframe-hero { position: relative; isolation: isolate; background: #07111f; }
.sector-icon { width: min(16rem, 42vw); height: min(16rem, 42vw); object-fit: contain; opacity: .88; }
.circuit-icon { position: absolute; top: 50%; right: max(3rem, calc((100vw - 80rem) / 2 + 3rem)); z-index: 5; width: min(12rem, 20vw); height: min(12rem, 20vw); transform: translateY(-50%); object-fit: contain; opacity: .95; filter: grayscale(1) brightness(0) invert(1); pointer-events: none; }
.circuit-icon-remote-support { filter: none; }
.circuit-board:has(.circuit-icon) > .relative.z-10 { padding-right: min(24rem, 26vw); }
.circuit-board > .relative.z-10 > .grid { display: block; }
.circuit-board > .relative.z-10 > .grid > div:first-child { max-width: 48rem; }
.circuit-board > .relative.z-10 > .grid > p { margin-top: 1.75rem; max-width: 48rem; }
@media (min-width: 640px) { .circuit-board > .relative.z-10 h1 { font-size: 4.5rem; line-height: 1; } }
@media (max-width: 640px) { .circuit-board:has(.circuit-icon) > .relative.z-10 { padding-right: 0; padding-bottom: 8rem; } .circuit-icon { top: auto; right: 1.5rem; bottom: 1.5rem; width: 6rem; height: 6rem; transform: none; opacity: .82; } }
.cta-primary { background-color: #07111f !important; color: #ffffff !important; }
.cta-primary:hover { background-color: #172033 !important; color: #ffffff !important; }
.service-card:hover, .service-card:focus-visible { background-color: var(--service-accent, #00ff00) !important; border-color: var(--service-accent, #00ff00) !important; color: var(--service-foreground, #07111f) !important; }
.service-card:hover .service-card-number, .service-card:focus-visible .service-card-number, .service-card:hover .service-card-summary, .service-card:focus-visible .service-card-summary { color: var(--service-foreground, #07111f) !important; }
.service-option-selected { background: #b7f34a !important; color: #07111f !important; }
.service-option-selected h3, .service-option-selected .service-option-number, .service-option-selected .service-option-summary { color: #07111f !important; }
.service-option { position: relative; overflow: visible; }
.service-option::after { position: absolute; top: -4px; left: -4px; width: 8px; height: 8px; border-radius: 9999px; background: var(--service-dot-color, #60a5fa); box-shadow: 0 0 14px var(--service-dot-color, #60a5fa); content: ''; opacity: 0; pointer-events: none; }
.service-option:hover::after, .service-option:focus-visible::after { animation: service-border-dot 2.8s linear infinite; opacity: 1; }
@keyframes service-border-dot {
    0% { left: -4px; top: -4px; }
    25% { left: calc(100% - 4px); top: -4px; }
    50% { left: calc(100% - 4px); top: calc(100% - 4px); }
    75% { left: -4px; top: calc(100% - 4px); }
    100% { left: -4px; top: -4px; }
}
.hero-slideshow { position: relative; }
.hero-slide { opacity: 0; transition: opacity 900ms ease; }
.hero-slide.is-active { opacity: 1; }
.hero-overlay { background: linear-gradient(to top, rgba(7,17,31,.8) 0%, rgba(7,17,31,.8) 25%, transparent 25%, transparent 100%); opacity: 1; }
@media (prefers-reduced-motion: reduce) { .circuit-canvas { opacity: .55; } }

/* Site themes. Blue&White is the existing default. */
.theme-picker { color-scheme: dark; }
.products-dropdown { width: 18rem; }
.group > .w-64 { width: 18rem !important; }
.theme-dropdown { position: absolute; top: 100%; right: 0; width: min(18rem, calc(100vw - 1rem)) !important; max-width: calc(100vw - 1rem); }
.theme-menu-open .theme-dropdown { visibility: visible; opacity: 1; }
#delete-confirmation [data-confirm-delete] { background-color: #f87171 !important; color: #07111f !important; }
#delete-confirmation button[data-confirm-delete] { background-color: #f87171 !important; color: #07111f !important; border-radius: 9999px; padding: .55rem 1rem; }
#delete-confirmation button[data-confirm-delete]:hover { background-color: #fca5a5 !important; }
td form.inline { display: inline-block; margin-left: 1rem; }
td > img { width: 2em !important; height: 2em !important; max-width: 2em !important; margin-right: .5rem !important; object-fit: contain; vertical-align: middle; }
.software-archive-icon { display: inline-block; width: 2em; height: 2em; margin-right: .5rem; vertical-align: middle; background-color: currentColor; mask: url('../images/icon-file-zip.svg') center / contain no-repeat; -webkit-mask: url('../images/icon-file-zip.svg') center / contain no-repeat; }
table tbody tr:nth-child(even) { background-color: rgba(255, 255, 255, .035); }
body[data-theme="light-mode"] table tbody tr:nth-child(even) { background-color: #f3f4f6; }
.admin-status { border: 1px solid rgba(190, 242, 100, .45); border-radius: 1rem; background: rgba(190, 242, 100, .1); padding: 1rem 1.25rem; color: #d9f99d; }
.admin-error { border: 1px solid rgba(248, 113, 113, .45); border-radius: 1rem; background: rgba(248, 113, 113, .1); padding: 1rem 1.25rem; color: #fecaca; }
body[data-theme="light-mode"] .admin-status { border-color: rgba(75, 85, 99, .3); background: #f3f4f6; color: #202124; }
body[data-theme="light-mode"] .admin-error { border-color: rgba(185, 28, 28, .3); background: #fef2f2; color: #991b1b; }
.xml-bracket { color: #94a3b8; }
.xml-tag { color: #67e8f9; }
.xml-attribute { color: #c4b5fd; }
.xml-value { color: #bef264; }
.xml-declaration { color: #f0abfc; }
.xml-comment { color: #94a3b8; font-style: italic; }
body[data-theme="light-mode"] .xml-bracket { color: #64748b; }
body[data-theme="light-mode"] .xml-tag { color: #0369a1; }
body[data-theme="light-mode"] .xml-attribute { color: #7c3aed; }
body[data-theme="light-mode"] .xml-value { color: #4d7c0f; }
body[data-theme="light-mode"] .xml-declaration { color: #a21caf; }
body[data-theme="light-mode"] .xml-comment { color: #64748b; }
body[data-page="contact.php"] main address span:first-child { display: block; margin-bottom: 1rem; font-size: 0; line-height: .9rem; color: #64748b; }
body[data-page="contact.php"] main address span:first-child::before { content: 'GLOBAL HQ'; display: block; font-size: .75rem; line-height: .9rem; font-weight: 700; letter-spacing: .15em; color: #64748b; }
body[data-page="contact.php"] main address span:first-child::after { content: 'Visit by appointment only'; display: block; margin-top: -.15rem; font-size: 1rem; line-height: 1.25rem; font-weight: 700; letter-spacing: normal; text-transform: none; color: #e2e8f0; }
body[data-theme="light-mode"][data-page="contact.php"] main address span:first-child,
body[data-theme="light-mode"][data-page="contact.php"] main address span:first-child::before { color: #4b5563; }
body[data-theme="light-mode"][data-page="contact.php"] main address span:first-child::after { color: #202124; }
body[data-theme="purple-white"][data-page="contact.php"] main address span:first-child,
body[data-theme="purple-white"][data-page="contact.php"] main address span:first-child::before { color: #d8b4fe; }
body[data-theme="purple-white"][data-page="contact.php"] main address span:first-child::after { color: #ffffff; }
body[data-theme="grey-white"][data-page="contact.php"] main address span:first-child,
body[data-theme="grey-white"][data-page="contact.php"] main address span:first-child::before { color: #e2e2e2; }
body[data-theme="grey-white"][data-page="contact.php"] main address span:first-child::after { color: #ffffff; }
body[data-page="general-software.php"] h1:first-of-type::before,
body[data-page="VPN-software.php"] h1:first-of-type::before { display: block; width: 4rem; height: 4rem; margin-bottom: 1rem; }
body[data-page="general-software.php"] h1:first-of-type::before { content: url('../images/icon-arrow-down-tray.svg'); }
body[data-page="VPN-software.php"] h1:first-of-type::before { content: url('../images/icon-lock-closed.svg'); }
body[data-page="general-software.php"] h1:first-of-type::before,
body[data-page="VPN-software.php"] h1:first-of-type::before { filter: grayscale(1) brightness(0) invert(1); }
body[data-theme="light-mode"][data-page="general-software.php"] h1:first-of-type::before,
body[data-theme="light-mode"][data-page="VPN-software.php"] h1:first-of-type::before { filter: grayscale(1) brightness(0); }
body[data-page="user-manager.php"] h1:first-of-type::before { display: block; width: 4rem; height: 4rem; content: url('../images/icon-shield-check.svg'); filter: grayscale(1) brightness(0) invert(1); }
body[data-theme="light-mode"][data-page="user-manager.php"] h1:first-of-type::before { filter: grayscale(1) brightness(0); }
body[data-page="lfd.php"] li span.text-amber-300 { font-size: 0; font-weight: 700; }
body[data-page="lfd.php"] li span.text-amber-300::after { content: 'Consider:'; font-size: .875rem; }
body[data-page="lfd.php"] table th,
body[data-page="lfd.php"] table td { text-align: left !important; }
body[data-page="general-software.php"] h1:first-of-type,
body[data-page="VPN-software.php"] h1:first-of-type { position: relative; padding-right: 5rem; }
body[data-page="general-software.php"] h1:first-of-type::before,
body[data-page="VPN-software.php"] h1:first-of-type::before { position: absolute; top: 50%; right: 0; margin: 0; transform: translateY(-50%); }
body[data-page="user-manager.php"] h1:first-of-type { position: relative; padding-right: 5rem; }
body[data-page="user-manager.php"] h1:first-of-type::before { position: absolute; top: 50%; right: 0; margin: 0; transform: translateY(-50%); }
.nav-menu-open > div { visibility: visible !important; opacity: 1 !important; }
body:has(table) > main > section.max-w-6xl { max-width: 56rem !important; }
body:has(input[name="action"][value="reset_password"]) > main > section.max-w-6xl { max-width: 56rem !important; }
.service-card-number, .service-option-number, article > span.text-sm.font-bold.text-lime-300 { display: none !important; }
.service-card h3, .service-option h3, article > span.text-sm.font-bold.text-lime-300 + h2 { margin-top: 1rem !important; font-size: 1.5rem !important; line-height: 2rem !important; }
.service-card-summary, .service-option-summary, article > span.text-sm.font-bold.text-lime-300 + h2 + p { font-size: 1rem !important; line-height: 1.75rem !important; }
body[data-theme="blue-white"] section.bg-lime-300 { background-color: #07111f !important; color: #ffffff !important; }
body[data-theme="blue-white"] section.bg-lime-300 > div > a { background-color: #ffffff !important; color: #07111f !important; }
body[data-theme="blue-white"] .cta-primary { background-color: #ffffff !important; color: #07111f !important; }
body[data-theme="blue-white"] .cta-primary:hover { background-color: #e5e7eb !important; }
body[data-theme="blue-white"] .bg-lime-300 { background-color: #ffffff !important; color: #07111f !important; }
body[data-theme="blue-white"] .hero-slideshow > .bg-gradient-to-t { background-image: linear-gradient(to top, rgba(7,17,31,.94) 0%, rgba(7,17,31,.72) 12%, transparent 30%) !important; }
body[data-theme="blue-white"] .hero-overlay { background: linear-gradient(to top, rgba(7,17,31,.8) 0%, rgba(7,17,31,.8) 25%, transparent 25%, transparent 100%); }
body[data-theme="purple-white"] { background-color: #16051f !important; color: #ffffff !important; background-image: none; }
body[data-theme="purple-white"] .bg-slate-950, body[data-theme="purple-white"] header, body[data-theme="purple-white"] footer { background-color: #24072f !important; }
body[data-theme="purple-white"] .bg-slate-900 { background-color: #35104a !important; }
body[data-theme="purple-white"] .text-lime-300 { color: #d8b4fe !important; }
body[data-theme="purple-white"] .bg-lime-300 { background-color: #d8b4fe !important; color: #24072f !important; }
body[data-theme="purple-white"] .border-white\/10 { border-color: rgba(255,255,255,.16) !important; }
body[data-theme="purple-white"] .circuit-board, body[data-theme="purple-white"] .wireframe-hero { background: #24072f; }
body[data-theme="purple-white"] .hero-slideshow > .bg-gradient-to-t { background-image: linear-gradient(to top, rgba(36,7,47,.94) 0%, rgba(36,7,47,.72) 12%, transparent 30%) !important; }
body[data-theme="purple-white"] .hero-overlay { background: linear-gradient(to top, rgba(36,7,47,.8) 0%, rgba(36,7,47,.8) 25%, transparent 25%, transparent 100%); }
body[data-theme="purple-white"] .hero-slideshow .text-lime-300 { color: #ffffff !important; }
body[data-theme="purple-white"] .cta-primary { background-color: #ffffff !important; color: #24072f !important; }
body[data-theme="purple-white"] section.bg-lime-300 { background-color: #24072f !important; color: #ffffff !important; }
body[data-theme="purple-white"] section.bg-lime-300 > div > a { background-color: #ffffff !important; color: #24072f !important; }
body[data-theme="grey-white"] { background-color: #2d2d2d !important; color: #ffffff !important; background-image: none; }
body[data-theme="grey-white"] .bg-slate-950, body[data-theme="grey-white"] header { background-color: #202020 !important; }
body[data-theme="grey-white"] .bg-slate-900 { background-color: #383838 !important; }
body[data-theme="grey-white"] .border-white\/10 { border-color: rgba(255,255,255,.16) !important; }
body[data-theme="grey-white"] .text-slate-300, body[data-theme="grey-white"] .text-slate-400, body[data-theme="grey-white"] .text-slate-500 { color: #e2e2e2 !important; }
body[data-theme="grey-white"] .circuit-board, body[data-theme="grey-white"] .wireframe-hero { background: #2d2d2d; }
body[data-theme="grey-white"] .circuit-board::after { background: radial-gradient(circle at 50% 20%, rgba(45,45,45,.05), rgba(45,45,45,.82) 82%); }
body[data-theme="grey-white"] .hero-slideshow > .bg-gradient-to-t { background-image: linear-gradient(to top, rgba(32,32,32,.92) 0%, rgba(32,32,32,.7) 12%, transparent 30%) !important; }
body[data-theme="grey-white"] .hero-overlay { background: linear-gradient(to top, rgba(32,32,32,.8) 0%, rgba(32,32,32,.8) 25%, transparent 25%, transparent 100%); }
body[data-theme="grey-white"] .cta-primary { background-color: #171717 !important; }
body[data-theme="grey-white"] .cta-primary { background-color: #ffffff !important; color: #171717 !important; }
body[data-theme="grey-white"] .bg-lime-300 { background-color: #b8b9bb !important; color: #171717 !important; }
body[data-theme="grey-white"] .bg-lime-300 .text-white { color: #ffffff !important; }
body[data-theme="light-mode"] { background-color: #ffffff !important; color: #202124 !important; background-image: none; color-scheme: light; }
body[data-theme="light-mode"] .bg-slate-950, body[data-theme="light-mode"] header { background-color: #f3f4f6 !important; }
body[data-theme="light-mode"] .circuit-icon { filter: grayscale(1) brightness(0) !important; }
body[data-theme="light-mode"] .about-cpu-icon { filter: brightness(0) !important; }
body[data-theme="light-mode"] .bg-slate-900, body[data-theme="light-mode"] .bg-white\/\[\.03\] { background-color: #ffffff !important; }
body[data-theme="light-mode"] .text-slate-100, body[data-theme="light-mode"] .text-white { color: #202124 !important; }
body[data-theme="light-mode"] footer .text-slate-200 { color: #1f2937 !important; }
body[data-theme="light-mode"] .text-slate-300, body[data-theme="light-mode"] .text-slate-400, body[data-theme="light-mode"] .text-slate-500 { color: #4b5563 !important; }
body[data-theme="light-mode"] .border-white\/10, body[data-theme="light-mode"] .border-white\/15 { border-color: rgba(31,41,55,.18) !important; }
body[data-theme="light-mode"] .circuit-board, body[data-theme="light-mode"] .wireframe-hero { background: #f3f4f6; }
body[data-theme="light-mode"] .circuit-board::after { background: radial-gradient(circle at 50% 20%, rgba(243,244,246,.05), rgba(243,244,246,.78) 82%); }
body[data-theme="light-mode"] .hero-slideshow > .bg-gradient-to-t { background-image: linear-gradient(to top, rgba(243,244,246,.94) 0%, rgba(243,244,246,.72) 12%, transparent 30%) !important; }
body[data-theme="light-mode"] .hero-overlay { background: linear-gradient(to top, rgba(243,244,246,.8) 0%, rgba(243,244,246,.8) 25%, transparent 25%, transparent 100%); }
body[data-theme="light-mode"] .cta-primary { background-color: #202124 !important; color: #ffffff !important; }
body[data-theme="light-mode"] .cta-primary { background-color: #d1d5db !important; color: #202124 !important; }
body[data-theme="light-mode"] .border-white\/20 { border-color: rgba(31,41,55,.35) !important; }
body[data-theme="light-mode"] .bg-lime-300 { background-color: #f3f4f6 !important; color: #202124 !important; }
body[data-theme="light-mode"] .bg-lime-300 .text-white { color: #ffffff !important; }
body[data-theme="light-mode"] .nav-dropdown-trigger:hover, body[data-theme="light-mode"] .nav-dropdown-trigger:focus-visible { color: #111827 !important; }
body[data-theme="light-mode"] header .bg-slate-900 { border-color: rgba(31,41,55,.24) !important; box-shadow: 0 18px 40px rgba(31,41,55,.18); }
body[data-theme="light-mode"] header .bg-slate-900 a:hover, body[data-theme="light-mode"] header .bg-slate-900 a:focus-visible { background-color: #e5e7eb !important; color: #111827 !important; }
body[data-theme="light-mode"] header .bg-slate-900 .theme-choice:hover, body[data-theme="light-mode"] header .bg-slate-900 .theme-choice:focus-visible { background-color: #e5e7eb !important; color: #111827 !important; }
body[data-theme="light-mode"] .theme-picker { color-scheme: light; color: #202124; background-color: rgba(255,255,255,.6); }
