/* ==========================================================================
   QuickServers design system
   Loaded after WHMCS stock CSS. Scoped under body.qs-body so tokenized
   overrides win on specificity, not luck.
   Tokens: black #000 · hairline #161616 · green #3fdf9a · radius 6px
   ========================================================================== */

:root {
    --qs-bg: #000000;
    --qs-panel: #0b0b0c;
    --qs-panel-2: #101011;
    --qs-line: #161616;
    --qs-line-strong: #242424;
    --qs-text: #ffffff;
    --qs-text-2: #c9c9c9;
    --qs-text-3: #8f8f8f;
    --qs-text-4: #6f6f6f;
    --qs-green: #3fdf9a;
    --qs-green-dim: #1f6b4c;
    --qs-danger: #f0655a;
    --qs-warn: #e8b13f;
    --qs-radius: 6px;
    --qs-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --qs-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Code', Menlo, monospace;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
body.qs-body {
    background: var(--qs-bg);
    color: var(--qs-text-2);
    font-family: var(--qs-sans);
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
}
body.qs-body h1, body.qs-body h2, body.qs-body h3,
body.qs-body h4, body.qs-body h5, body.qs-body h6 {
    color: var(--qs-text);
    font-weight: 500;
    letter-spacing: -0.01em;
}
body.qs-body a { color: var(--qs-text); }
body.qs-body a:hover { color: var(--qs-green); text-decoration: none; }
body.qs-body :focus-visible {
    outline: 2px solid var(--qs-green);
    outline-offset: 2px;
}
body.qs-body #main-body { padding: 32px 0 56px; }

.qs-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--qs-green); display: inline-block;
}
.qs-dot-pulse { animation: qs-pulse 1.8s ease-in-out infinite; }
@keyframes qs-pulse { 50% { background: var(--qs-green-dim); } }

/* Full-bleed sections escape the main-body container */
.qs-bleed {
    width: 100vw;
    margin-left: calc(50% - 50vw);
}

/* --------------------------------------------------------------------------
   Header / nav
   -------------------------------------------------------------------------- */
body.qs-body .qs-header { background: var(--qs-bg); border-bottom: 1px solid var(--qs-line); }
.qs-topbar { border-bottom: 1px solid var(--qs-line); }
.qs-topbar-inner { display: flex; align-items: center; justify-content: space-between; padding-top: 6px; padding-bottom: 6px; }
body.qs-body .qs-topbar-btn { color: var(--qs-text-3); font-size: 12px; padding: 4px 8px; }
body.qs-body .qs-topbar-btn:hover { color: var(--qs-text); }
.qs-topbar-right { display: flex; gap: 18px; align-items: center; }
.qs-topbar-link { font-size: 12px; color: var(--qs-text-2); display: inline-flex; gap: 7px; align-items: center; }
.qs-topbar-link.qs-muted { color: var(--qs-text-4); }

body.qs-body .qs-nav { padding: 14px 0; background: transparent; }
.qs-brand-text { color: var(--qs-text); font-size: 16px; font-weight: 500; letter-spacing: 0.01em; }
.qs-brand-logo { max-height: 30px; }
body.qs-body .qs-nav .navbar-nav .nav-link {
    color: var(--qs-text-3); font-size: 13px; padding: 8px 14px;
}
body.qs-body .qs-nav .navbar-nav .nav-link:hover,
body.qs-body .qs-nav .navbar-nav .active > .nav-link { color: var(--qs-text); }
body.qs-body .qs-nav .dropdown-menu {
    background: var(--qs-panel); border: 1px solid var(--qs-line-strong);
    border-radius: var(--qs-radius);
}
body.qs-body .qs-nav .dropdown-item { color: var(--qs-text-2); font-size: 13px; }
body.qs-body .qs-nav .dropdown-item:hover { background: var(--qs-panel-2); color: var(--qs-text); }
body.qs-body .qs-nav-toggle { color: var(--qs-text); border: 1px solid var(--qs-line-strong); }

body.qs-body .qs-breadcrumb { background: transparent; border-bottom: 1px solid var(--qs-line); }
body.qs-body .qs-breadcrumb .breadcrumb {
    background: transparent; margin: 0; padding: 10px 0; font-size: 12px;
}
body.qs-body .qs-breadcrumb .breadcrumb-item a { color: var(--qs-text-3); }
body.qs-body .qs-breadcrumb .breadcrumb-item.active { color: var(--qs-text-2); }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.qs-btn {
    display: inline-block; font-size: 13px; font-weight: 500;
    padding: 9px 20px; border-radius: var(--qs-radius);
    border: 1px solid transparent; line-height: 1.4;
}
.qs-btn-primary { background: #ffffff; color: #000000; }
.qs-btn-primary:hover { background: #e6e6e6; color: #000000; }
.qs-btn-ghost { background: transparent; color: var(--qs-text); border-color: var(--qs-line-strong); }
.qs-btn-ghost:hover { border-color: var(--qs-text-3); color: var(--qs-text); }

/* Restyle stock bootstrap buttons so fallback pages match */
body.qs-body .btn-primary {
    background: #ffffff; border-color: #ffffff; color: #000000;
}
body.qs-body .btn-primary:hover, body.qs-body .btn-primary:focus {
    background: #e6e6e6; border-color: #e6e6e6; color: #000000;
}
body.qs-body .btn-default, body.qs-body .btn-secondary {
    background: transparent; border: 1px solid var(--qs-line-strong); color: var(--qs-text-2);
}
body.qs-body .btn-default:hover, body.qs-body .btn-secondary:hover {
    border-color: var(--qs-text-3); color: var(--qs-text); background: transparent;
}
body.qs-body .btn-success { background: var(--qs-green); border-color: var(--qs-green); color: #000; }
body.qs-body .btn-danger { background: var(--qs-danger); border-color: var(--qs-danger); color: #000; }

/* --------------------------------------------------------------------------
   Panels, cards, tables, forms (fallback-page dark pass)
   -------------------------------------------------------------------------- */
body.qs-body .card,
body.qs-body .panel,
body.qs-body .tile,
body.qs-body .list-group-item {
    background: var(--qs-panel); border: 1px solid var(--qs-line);
    border-radius: var(--qs-radius); color: var(--qs-text-2);
}
body.qs-body .card-header, body.qs-body .card-footer,
body.qs-body .panel-heading, body.qs-body .panel-footer {
    background: transparent; border-color: var(--qs-line);
}
body.qs-body .table { color: var(--qs-text-2); }
body.qs-body .table th {
    color: var(--qs-text-3); font-size: 11px; font-weight: 500;
    text-transform: uppercase; letter-spacing: 0.06em;
    border-color: var(--qs-line) !important;
}
body.qs-body .table td { border-color: var(--qs-line) !important; }
body.qs-body .table-hover tbody tr:hover { background: var(--qs-panel-2); color: var(--qs-text); }
body.qs-body .table .odd, body.qs-body .table .even,
body.qs-body .table-striped tbody tr:nth-of-type(odd) { background: transparent; }

body.qs-body .form-control, body.qs-body .custom-select {
    background: var(--qs-panel); border: 1px solid var(--qs-line-strong);
    color: var(--qs-text); border-radius: var(--qs-radius); font-size: 13.5px;
}
body.qs-body .form-control:focus {
    background: var(--qs-panel); border-color: var(--qs-text-3);
    color: var(--qs-text); box-shadow: none;
}
body.qs-body .form-control::placeholder { color: var(--qs-text-4); }
body.qs-body label, body.qs-body .form-control-label { color: var(--qs-text-3); font-size: 12.5px; }
body.qs-body .input-group-text {
    background: var(--qs-panel-2); border-color: var(--qs-line-strong); color: var(--qs-text-3);
}

body.qs-body .modal-content {
    background: var(--qs-panel); border: 1px solid var(--qs-line-strong); color: var(--qs-text-2);
}
body.qs-body .modal-header, body.qs-body .modal-footer { border-color: var(--qs-line); }
body.qs-body .modal-header .close { color: var(--qs-text); text-shadow: none; }

body.qs-body .alert { border-radius: var(--qs-radius); border: 1px solid var(--qs-line-strong); background: var(--qs-panel); color: var(--qs-text-2); }
body.qs-body .alert-success { border-color: var(--qs-green-dim); color: var(--qs-green); }
body.qs-body .alert-danger { border-color: var(--qs-danger); color: var(--qs-danger); }
body.qs-body .alert-warning { border-color: var(--qs-warn); color: var(--qs-warn); }

body.qs-body .pagination .page-link {
    background: transparent; border-color: var(--qs-line); color: var(--qs-text-3);
}
body.qs-body .pagination .page-item.active .page-link {
    background: #ffffff; border-color: #ffffff; color: #000000;
}

/* Sidebar (WHMCS menu panels) */
body.qs-body .qs-sidebar .card, body.qs-body .qs-sidebar .panel { background: transparent; }
body.qs-body .qs-sidebar .list-group-item {
    background: transparent; border: none; border-bottom: 1px solid var(--qs-line);
    color: var(--qs-text-3); font-size: 13px; border-radius: 0;
}
body.qs-body .qs-sidebar .list-group-item:hover,
body.qs-body .qs-sidebar .list-group-item.active {
    background: transparent; color: var(--qs-text);
}

/* --------------------------------------------------------------------------
   Homepage — hero
   -------------------------------------------------------------------------- */
.qs-hero {
    position: relative; background: #050607;
    border-bottom: 1px solid var(--qs-line);
    overflow: hidden;
}
.qs-hero-img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; z-index: 0;
}
.qs-hero-scrim {
    position: absolute; inset: 0; z-index: 1;
    background: rgba(0, 2, 6, 0.55);
}
.qs-hero-inner { position: relative; z-index: 2; padding: 88px 15px 64px; max-width: 640px; margin-left: 0; }
.qs-pill {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 12px; color: var(--qs-text-2);
    border: 1px solid rgba(255,255,255,0.16); border-radius: 999px;
    padding: 5px 14px; background: rgba(0,2,8,0.4);
}
.qs-hero-title {
    font-size: clamp(34px, 6vw, 56px); line-height: 1.06;
    letter-spacing: -0.02em; margin: 22px 0 0; color: var(--qs-text);
}
.qs-hero-sub { color: var(--qs-text-2); font-size: 15px; line-height: 1.65; margin: 16px 0 0; max-width: 420px; }
.qs-hero-actions { display: flex; gap: 12px; margin-top: 28px; flex-wrap: wrap; }
.qs-hero .qs-btn-ghost { background: rgba(0,2,8,0.35); border-color: rgba(255,255,255,0.28); }

.qs-stats { position: relative; z-index: 2; background: rgba(0,2,6,0.62); border-top: 1px solid rgba(255,255,255,0.10); }
.qs-stats-inner { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); }
.qs-stat { padding: 16px 18px 16px 0; border-right: 1px solid rgba(255,255,255,0.08); }
.qs-stat + .qs-stat { padding-left: 18px; }
.qs-stat:last-child { border-right: none; }
.qs-stat-label { display: block; font-size: 11px; color: var(--qs-text-3); }
.qs-stat-value {
    display: block; font-size: 19px; font-weight: 500; color: var(--qs-text);
    margin-top: 4px; font-variant-numeric: tabular-nums;
}

/* Homepage — products */
.qs-products { border-bottom: 1px solid var(--qs-line); }
.qs-products-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); }
.qs-product {
    display: block; padding: 30px 26px 34px;
    border-right: 1px solid var(--qs-line); color: inherit;
}
.qs-product:first-child { padding-left: 0; }
.qs-product:last-child { border-right: none; }
.qs-product:hover { text-decoration: none; }
.qs-product-name { display: block; color: var(--qs-text); font-size: 15px; font-weight: 500; }
.qs-product-desc { display: block; color: var(--qs-text-3); font-size: 13px; line-height: 1.6; margin-top: 7px; }
.qs-product-price { display: block; color: var(--qs-text); font-size: 13px; margin-top: 16px; }
.qs-product-price .fa-arrow-right { font-size: 11px; color: var(--qs-text-4); margin-left: 4px; transition: transform 0.15s ease; }
.qs-product:hover .fa-arrow-right { transform: translateX(3px); color: var(--qs-green); }
.qs-trustline {
    display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px;
    padding: 12px 0; border-top: 1px solid var(--qs-line);
    font-size: 11px; color: var(--qs-text-4); letter-spacing: 0.05em;
}

/* --------------------------------------------------------------------------
   Auth pages
   -------------------------------------------------------------------------- */
.qs-auth-wrap { display: flex; justify-content: center; padding: 40px 0; }
.qs-auth-card {
    width: 100%; max-width: 420px;
    background: var(--qs-panel); border: 1px solid var(--qs-line);
    border-radius: 10px; padding: 36px 34px 28px;
}
.qs-auth-title { font-size: 22px; margin: 0; }
.qs-auth-sub { color: var(--qs-text-3); font-size: 13px; margin: 6px 0 22px; }
.qs-field { margin-bottom: 18px; }
.qs-label { display: block; margin-bottom: 7px; }
.qs-label-row { display: flex; justify-content: space-between; align-items: baseline; }
.qs-link-muted { font-size: 12px; color: var(--qs-text-4); }
.qs-input-group { display: flex; }
.qs-input-group .qs-input { border-top-right-radius: 0; border-bottom-right-radius: 0; }
body.qs-body .qs-reveal {
    border: 1px solid var(--qs-line-strong); border-left: none;
    border-radius: 0 var(--qs-radius) var(--qs-radius) 0;
    background: var(--qs-panel-2); color: var(--qs-text-3);
}
.qs-auth-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 24px; }
.qs-remember { color: var(--qs-text-3); font-size: 12.5px; display: flex; gap: 8px; align-items: center; margin: 0; }
.qs-auth-foot {
    margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--qs-line);
    font-size: 13px; color: var(--qs-text-3);
}
.qs-auth-foot a { margin-left: 6px; font-weight: 500; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
body.qs-body .qs-footer {
    background: var(--qs-bg); border-top: 1px solid var(--qs-line);
    padding: 44px 0 28px; color: var(--qs-text-3);
}
.qs-footer-grid {
    display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 32px;
    padding-bottom: 28px; border-bottom: 1px solid var(--qs-line);
}
.qs-footer-tag { font-size: 13px; line-height: 1.6; margin: 12px 0 0; color: var(--qs-text-3); }
.qs-footer-status { font-size: 12px; margin: 14px 0 0; display: flex; gap: 8px; align-items: center; color: var(--qs-text-2); }
.qs-footer-links { display: flex; flex-direction: column; gap: 10px; }
.qs-footer-links a { color: var(--qs-text-3); font-size: 13px; }
.qs-footer-links a:hover { color: var(--qs-text); }
body.qs-body .qs-lang-btn {
    color: var(--qs-text-3); border: 1px solid var(--qs-line-strong);
    border-radius: var(--qs-radius); font-size: 12px; padding: 6px 12px;
}
.qs-copyright { font-size: 12px; color: var(--qs-text-4); margin: 22px 0 0; }

/* --------------------------------------------------------------------------
   Responsive + motion
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
    .qs-stats-inner { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .qs-stat:nth-child(2) { border-right: none; }
    .qs-stat { padding-left: 0 !important; }
    .qs-products-grid { grid-template-columns: 1fr; }
    .qs-product { border-right: none; border-bottom: 1px solid var(--qs-line); padding-left: 0; }
    .qs-footer-grid { grid-template-columns: 1fr; gap: 24px; }
    body.qs-body .qs-nav .navbar-collapse {
        background: var(--qs-panel); border: 1px solid var(--qs-line);
        border-radius: var(--qs-radius); padding: 10px; margin-top: 10px;
    }
}
@media (prefers-reduced-motion: reduce) {
    .qs-dot-pulse { animation: none; }
    .qs-product-price .fa-arrow-right { transition: none; }
}

/* --------------------------------------------------------------------------
   v0.4 hardening — win against nexus theme.min.css specifics
   -------------------------------------------------------------------------- */
html, body.qs-body { background: #000000 !important; }
body.qs-body #header,
body.qs-body #header .navbar,
body.qs-body .qs-nav {
    background: #000000 !important;
    border-bottom: 1px solid var(--qs-line);
}
body.qs-body #header .qs-brand { margin-right: 28px; display: inline-flex; align-items: center; }
body.qs-body #header .qs-brand-text { color: #ffffff !important; font-size: 16px; font-weight: 500; }
body.qs-body #header .navbar-nav .nav-link { color: var(--qs-text-3) !important; }
body.qs-body #header .navbar-nav .nav-link:hover,
body.qs-body #header .navbar-nav .active > .nav-link { color: #ffffff !important; }
body.qs-body #main-body { background: transparent; }

/* Link color must not bleed into buttons (body.qs-body a outranks .qs-btn-*) */
body.qs-body a.qs-btn-primary, body.qs-body .qs-btn-primary { color: #000000 !important; background: #ffffff !important; }
body.qs-body a.qs-btn-primary:hover { background: #e6e6e6 !important; color: #000000 !important; }
body.qs-body a.qs-btn-ghost, body.qs-body .qs-btn-ghost { color: #ffffff !important; }
body.qs-body a.qs-product, body.qs-body a.qs-product:hover { color: inherit; }

/* Footer must stay dark against theme.min.css #footer rules */
body.qs-body #footer { background: #000000 !important; border-top: 1px solid var(--qs-line); color: var(--qs-text-3); }

/* v0.5 — nav spacing */
body.qs-body #header .qs-brand { margin-right: 32px !important; }
body.qs-body #header .navbar-nav .nav-link { padding: 8px 14px !important; font-size: 13px !important; }
body.qs-body #header .navbar { padding-top: 14px; padding-bottom: 14px; }

/* v0.6 — hero atmosphere */
.qs-hero svg.qs-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.qs-hero { min-height: 480px; }

/* --------------------------------------------------------------------------
   v0.8 — IPv4 Hub-weight typography and edge-aligned layout
   -------------------------------------------------------------------------- */
/* Full-width sections with a fixed viewport gutter instead of centered container */
.qs-bleed .container,
body.qs-body #header .container {
    max-width: 100% !important;
    padding-left: 64px !important;
    padding-right: 64px !important;
}
.qs-hero-inner { max-width: 760px; margin-left: 0; }

/* Heavy display type, tight leading */
.qs-hero-title {
    font-size: clamp(46px, 6.5vw, 84px) !important;
    font-weight: 800 !important;
    line-height: 1.0 !important;
    letter-spacing: -0.025em !important;
}
.qs-hero-sub { font-size: 16px; max-width: 460px; }
.qs-pill { letter-spacing: 0.02em; }

/* Products/stats headings gain weight to match */
.qs-product-name { font-weight: 700; font-size: 16px; }
.qs-stat-value { font-weight: 700 !important; }
body.qs-body #header .qs-brand-text { font-weight: 700 !important; letter-spacing: 0.02em; }

@media (max-width: 991px) {
    .qs-bleed .container,
    body.qs-body #header .container {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}

/* v0.9 — photographic hero */
.qs-hero { min-height: 540px; }
.qs-hero .qs-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: right center; z-index: 0; }
.qs-hero picture { position: absolute; inset: 0; z-index: 0; }
.qs-hero-scrim {
    position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(90deg, rgba(0,2,8,0.82) 0%, rgba(0,2,8,0.55) 38%, rgba(0,2,8,0.12) 70%, rgba(0,2,8,0.05) 100%);
}
.qs-hero-flicker { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.qs-hero-flicker span {
    position: absolute; width: 5px; height: 5px; border-radius: 50%;
    background: #6db4ff; box-shadow: 0 0 8px 2px rgba(109,180,255,0.55);
    opacity: 0; transition: opacity 0.25s ease;
}
.qs-hero-flicker span.on { opacity: 0.9; }
@media (prefers-reduced-motion: reduce) { .qs-hero-flicker { display: none; } }

/* v0.10 — flicker dots pinned to photo LEDs */
.qs-hero-flicker span { width: 4px; height: 4px; margin: -2px 0 0 -2px; box-shadow: 0 0 6px 2px rgba(109,180,255,0.5); }

/* --------------------------------------------------------------------------
   v0.11 — network map section
   -------------------------------------------------------------------------- */
.qs-map-section { background: #000; border-bottom: 1px solid var(--qs-line); padding: 72px 0 80px; }
.qs-map-head { margin-bottom: 36px; }
.qs-map-title { font-size: clamp(30px, 3.6vw, 46px); font-weight: 800; letter-spacing: -0.02em; color: #fff; margin: 0; }
.qs-map-sub { color: var(--qs-text-3); font-size: 15px; margin: 10px 0 0; }
.qs-map-panel { border: 1px solid var(--qs-line); border-radius: 10px; background: #040507; overflow: hidden; }
.qs-map-svg { display: block; width: 100%; height: auto; }
.qs-map-grid line { stroke: #101318; stroke-width: 1; }
.qs-map-arcs path { fill: none; stroke: #1f4d3c; stroke-width: 1.4; stroke-dasharray: 4 6; animation: qs-arc-flow 30s linear infinite; }
@keyframes qs-arc-flow { to { stroke-dashoffset: -300; } }
.qs-node text { fill: #e8eaee; font-family: var(--qs-sans); font-size: 12px; font-weight: 700; text-anchor: middle; letter-spacing: 0.08em; }
.qs-node .qs-node-code { fill: #6f7680; font-family: var(--qs-mono); font-size: 10px; font-weight: 400; }
.qs-node-dot { fill: #3fdf9a; }
.qs-node-ring { fill: none; stroke: #3fdf9a; stroke-width: 1.5; opacity: 0.7; animation: qs-node-pulse 2.4s ease-out infinite; transform-origin: center; }
.qs-node:nth-child(2) .qs-node-ring { animation-delay: 0.8s; }
.qs-node:nth-child(3) .qs-node-ring { animation-delay: 1.6s; }
@keyframes qs-node-pulse {
    0% { r: 6; opacity: 0.8; }
    100% { r: 26; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .qs-map-arcs path { animation: none; }
    .qs-node-ring { animation: none; }
}

/* v0.12 — dot-matrix continents */
.qs-map-land path { stroke: #1b2530; stroke-width: 3.2; stroke-linecap: round; fill: none; }
.qs-map-grid line { stroke: #0c0f13; }

/* v0.13 — brighter landmass */
.qs-map-land path { stroke: #3a4a5c !important; }
.qs-map-grid line { stroke: #0a0d11; }

/* v0.17 — center the primary nav between brand and account controls */
body.qs-body #header .qs-nav .navbar-collapse { display: flex; align-items: center; }
body.qs-body #header .qs-nav .qs-nav-primary {
    margin-left: auto !important;
    margin-right: auto !important;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}
body.qs-body #header .qs-nav .container { position: relative; }
body.qs-body #header .qs-nav .qs-nav-secondary { margin-left: auto !important; }
@media (max-width: 1199px) {
    /* collapsed mobile menu: stack normally, no absolute centering */
    body.qs-body #header .qs-nav .qs-nav-primary {
        position: static;
        transform: none;
    }
}

/* v0.18 — Account joins the centered group; brand alone on the left */
body.qs-body #header .qs-nav .qs-nav-primary {
    position: static !important;
    transform: none !important;
    margin: 0 !important;
}
body.qs-body #header .qs-nav .navbar-collapse {
    display: flex;
    justify-content: center;
    align-items: center;
}
body.qs-body #header .qs-nav .qs-nav-secondary { margin: 0 !important; }
@media (max-width: 1199px) {
    body.qs-body #header .qs-nav .navbar-collapse { display: none; }
    body.qs-body #header .qs-nav .navbar-collapse.show { display: block; }
}

/* v0.19 — gap between primary and secondary nav groups */
body.qs-body #header .qs-nav .navbar-collapse { column-gap: 18px; }
body.qs-body #header .qs-nav .qs-nav-secondary .nav-link { padding: 8px 14px !important; }

/* v0.24 — six-product grid (3x2) */
.qs-products-grid .qs-product:nth-child(3n) { border-right: none; }
.qs-products-grid .qs-product:nth-child(-n+3) { border-bottom: 1px solid var(--qs-line); }
.qs-products-grid .qs-product:nth-child(3n+1) { padding-left: 0; }
@media (max-width: 991px) {
    .qs-products-grid .qs-product { border-right: none !important; padding-left: 0 !important; }
    .qs-products-grid .qs-product:not(:last-child) { border-bottom: 1px solid var(--qs-line); }
}

/* v0.25 — products as a full section */
.qs-products { padding: 72px 0 56px; }
.qs-products .qs-trustline { margin-top: 40px; }
.qs-products-grid .qs-product { padding-top: 34px; padding-bottom: 38px; }

/* v0.27 — section banding: products on lifted charcoal, map back on black */
.qs-products {
    background: #0b0c0e;
    border-top: none;
    border-bottom: none;
}
.qs-products .qs-product { border-color: #1b1c1f; }
.qs-products-grid .qs-product:nth-child(-n+3) { border-bottom-color: #1b1c1f; }
.qs-products .qs-product-desc { color: #97979c; }
.qs-map-section { background: #000; }
/* hero -> stats -> products -> map now band: photo / translucent / charcoal / black */

/* v0.28 — true page-center for the nav group */
@media (min-width: 1200px) {
    body.qs-body #header .qs-nav .container { position: relative; }
    body.qs-body #header .qs-nav .navbar-collapse {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        width: auto;
        flex-grow: 0;
    }
}

/* v0.29 — nav links pure white like the hero headline; no highlight boxes */
body.qs-body #header .navbar-nav .nav-link,
body.qs-body #header .navbar-nav .dropdown-toggle {
    color: #ffffff !important;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    font-weight: 500;
}
body.qs-body #header .navbar-nav .nav-link:hover,
body.qs-body #header .navbar-nav .nav-link:focus,
body.qs-body #header .navbar-nav .active > .nav-link {
    color: #ffffff !important;
    background: transparent !important;
    opacity: 0.75;
}

/* v0.30 — normalize every nav item: one color, one spacing, no exceptions */
body.qs-body #header .navbar-nav > li,
body.qs-body #header .navbar-nav .nav-item {
    margin: 0 !important;
}
body.qs-body #header .navbar-nav > li > a,
body.qs-body #header .navbar-nav .nav-link,
body.qs-body #header .navbar-nav .dropdown-toggle {
    color: #ffffff !important;
    opacity: 1 !important;
    padding: 8px 16px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    background: transparent !important;
}
body.qs-body #header .navbar-nav > li > a:hover,
body.qs-body #header .navbar-nav .nav-link:hover {
    opacity: 0.7 !important;
}

/* v0.31 — hand-rolled nav: three words, no framework */
.qs-menu {
    display: flex;
    align-items: center;
    gap: 6px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.qs-menu a {
    display: inline-block;
    color: #ffffff !important;
    font-size: 14px;
    font-weight: 500;
    padding: 8px 16px;
    background: transparent !important;
}
.qs-menu a:hover { opacity: 0.7; text-decoration: none; }
@media (max-width: 1199px) {
    .qs-menu { flex-direction: column; align-items: flex-start; gap: 0; }
}

/* v0.32 — custom dropdowns */
.qs-menu .qs-caret { font-size: 9px; margin-left: 5px; opacity: 0.6; vertical-align: 1px; }
.qs-has-drop { position: relative; }
.qs-drop {
    position: absolute;
    top: 100%;
    left: 8px;
    min-width: 200px;
    background: #0b0c0e;
    border: 1px solid #1e1f22;
    border-radius: 8px;
    padding: 6px;
    margin: 0;
    list-style: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
    z-index: 50;
}
.qs-has-drop::after {   /* hover bridge so the menu doesn't vanish crossing the gap */
    content: "";
    position: absolute;
    left: 0; right: 0;
    top: 100%;
    height: 10px;
}
.qs-has-drop:hover .qs-drop,
.qs-has-drop:focus-within .qs-drop {
    opacity: 1;
    visibility: visible;
    transform: translateY(2px);
}
.qs-drop li a {
    display: block;
    color: #c9c9c9 !important;
    font-size: 13px;
    font-weight: 400;
    padding: 8px 12px;
    border-radius: 5px;
}
.qs-drop li a:hover { color: #ffffff !important; background: #141518 !important; opacity: 1; }
@media (max-width: 1199px) {
    .qs-drop {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        border: none;
        background: transparent;
        padding-left: 14px;
    }
    .qs-menu .qs-caret { display: none; }
}

/* v0.33 — 3x3 grid rows */
.qs-products-grid .qs-product:nth-child(-n+6) { border-bottom: 1px solid #1b1c1f; }

/* v0.39 — wordmark in logo-style face (Orbitron ~ squared techno) */
.qs-brand-text {
    font-family: 'Orbitron', var(--qs-sans) !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase;
    color: #ffffff !important;
}
body.qs-body #footer .qs-brand-text { font-size: 16px !important; }

/* v0.40 — bigger wordmark */
.qs-brand-text { font-size: 19px !important; }
body.qs-body #footer .qs-brand-text { font-size: 20px !important; }

/* v0.42 — refined wordmark: Michroma, wide-tracked */
.qs-brand-text {
    font-family: 'Michroma', 'Orbitron', var(--qs-sans) !important;
    font-weight: 400 !important;
    font-size: 17px !important;
    letter-spacing: 0.16em !important;
}
body.qs-body #footer .qs-brand-text { font-size: 18px !important; }

/* v0.43 — cloud mark beside wordmark */
.qs-brand { display: inline-flex !important; align-items: center; gap: 11px; }
.qs-brand-cloud { height: 26px; width: auto; display: inline-block; }
body.qs-body #footer .qs-brand-cloud { height: 28px; margin-right: 11px; vertical-align: -6px; }