/* Monitco marketing site. Values measured from the live monitco.net pages (Nov 2026) so the look matches.
   Layout: Bootstrap-style 1140px container (1110px content), same breakpoints 576/768/992/1200. */

@font-face { font-family: "Manrope"; src: url("../fonts/manrope.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("../fonts/poppins-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("../fonts/poppins-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("../fonts/poppins-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("../fonts/poppins-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --heading: #495057;
  --body: #adb5bd;
  --gray-1: #f8f9fa;
  --gray-2: #e9ecef;
  --gray-5: #adb5bd;
  --gray-6: #6c757d;
  --blue: #1082c9;
  --blue-2: #00a5ff;
  --text-blue: #1274e7;
  --grad: linear-gradient(to right, #1082c9, #00a5ff);
  --grad-light: linear-gradient(to right, rgba(78, 178, 241, .15), rgba(102, 201, 255, .15));
  --grad-dark: linear-gradient(to right, #111111, #333333);
  --dark: #212529;
  --secondary: #222222;
  --shadow: 0 2px 6px rgba(0, 0, 0, .05), 0 8px 19.2px rgba(0, 0, 0, .1);
  --shadow-lg: 0 4px 8px rgba(0, 0, 0, .05), 0 24px 35.2px rgba(0, 0, 0, .1);
  --shadow-sm: 0 1px 5px rgba(0, 0, 0, .15);
  --header-h: 90px;
  --font-body: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-head: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 10px); -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }
body { margin: 0; font: 400 16px/1.8 var(--font-body); letter-spacing: -.01em; color: var(--body); background: #fff; }
img, svg { max-width: 100%; }
img { height: auto; display: inline-block; vertical-align: middle; }
a { color: inherit; text-decoration: none; }
p { margin: 0 0 1rem; }
ul { margin: 0; padding: 0; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--blue-2); outline-offset: 2px; }
[hidden] { display: none !important; }
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 2000; background: #fff; color: var(--heading); padding: 10px 16px; }
.skip-link:focus { left: 10px; top: 10px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

h1, h2, h3, h4, h5, h6 { font-family: var(--font-head); font-weight: 500; color: var(--heading); margin: 0 0 .5rem; line-height: 1.3; letter-spacing: -.01em; }
h1 { font-size: 60px; } h2 { font-size: 48px; } h3 { font-size: 36px; } h4 { font-size: 30px; } h5 { font-size: 24px; } h6 { font-size: 18px; }
.fw-bold, b, strong { font-weight: 700; }
.text-18 { font-size: 18px; line-height: 26px; }
.text-20 { font-size: 20px; line-height: 32px; }
.text-24 { font-size: 24px; line-height: 38px; }
.text-sm { font-size: 14px; line-height: 25.2px; }
.text-heading { color: var(--heading); }
.text-white { color: #fff; }
.text-center { text-align: center; }
.grad-text { background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--blue); }
.mw-500 { max-width: 500px; } .mw-540 { max-width: 540px; } .mw-580 { max-width: 580px; } .mw-600 { max-width: 600px; } .mw-660 { max-width: 660px; }
.mx-auto { margin-left: auto; margin-right: auto; }

/* ---------- grid ---------- */
.container { width: 100%; max-width: 1140px; margin: 0 auto; padding-left: 15px; padding-right: 15px; }
@media (max-width: 1199.98px) { .container { max-width: 960px; } }
@media (max-width: 991.98px) { .container { max-width: 720px; } }
@media (max-width: 767.98px) { .container { max-width: 540px; } }
@media (max-width: 575.98px) { .container { max-width: none; padding-left: max(15px, env(safe-area-inset-left)); padding-right: max(15px, env(safe-area-inset-right)); } }
.row { display: flex; flex-wrap: wrap; margin-left: -15px; margin-right: -15px; }
.row > * { padding-left: 15px; padding-right: 15px; width: 100%; min-width: 0; }
.row.middle { align-items: center; }
@media (min-width: 768px) {
  .col-3 { width: 25%; } .col-4 { width: 33.3333%; } .col-5 { width: 41.6667%; } .col-6 { width: 50%; }
  .col-7 { width: 58.3333%; } .col-8 { width: 66.6667%; } .col-2 { width: 16.6667%; } .col-10 { width: 83.3333%; }
}

/* ---------- buttons, badges ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-family: var(--font-head); font-size: 16px; line-height: 1.8; padding: 10px 24px; border-radius: 4px; color: var(--heading); transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease; white-space: nowrap; }
.btn b { font-weight: 700; }
.btn svg { width: 1em; height: 1em; flex: none; }
.btn-grad { background: var(--grad); color: #fff; box-shadow: 0 4px 8px rgba(0,0,0,.05), 0 8px 16px rgba(0,0,0,.1); }
.btn-grad:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); color: #fff; }
.btn-shadow { box-shadow: var(--shadow-lg); }
.btn-pill { border-radius: 30px; }
.btn-lg { font-size: 18px; line-height: 27px; padding: 12px 32px; }
.btn-sm { font-family: var(--font-body); font-size: 14px; line-height: 25.2px; font-weight: 700; padding: 9px 18px; border-radius: 23px; }
.btn-line-white { color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.75); }
.btn-line-white:hover { background: #fff; color: var(--heading); }
.btn-link { padding: 10px 24px; color: var(--heading); position: relative; }
.btn-link b { position: relative; }
.btn-link b::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--gray-2); transform: scaleX(0); transform-origin: left; transition: transform .25s ease; }
.btn-link:hover b::after { transform: scaleX(1); }
.btn-link svg { width: 14px; height: 14px; transition: transform .2s; }
.btn-link:hover svg { transform: translateX(3px); }
.btn-block { display: flex; width: 100%; }
.badge { display: inline-block; font-family: var(--font-body); font-size: 13.5px; font-weight: 700; line-height: 1.2; padding: 5px 9px; border-radius: 4px; letter-spacing: 0; }
.badge-light3 { background: rgba(255,255,255,.3); color: rgba(255,255,255,.9); }
.badge-light2 { background: rgba(255,255,255,.2); color: #fff; }
.badge-light1 { background: rgba(255,255,255,.1); color: #fff; }
.badge-primary { background: rgba(78,178,241,.15); color: var(--text-blue); font-size: 12px; padding: 5px 10px; }
.badge-dark3 { background: rgba(0,0,0,.3); color: #fff; font-size: 12px; padding: 5px 10px; }
.badge-dark8 { background: rgba(0,0,0,.8); color: #fff; border-radius: 160px; font-size: 16px; padding: 12px 20px; }

/* ---------- header ---------- */
.site-header { position: sticky; top: 0; z-index: 1000; background: #fff; box-shadow: 0 5px 80px rgba(0,0,0,.1); }
.header-row { display: flex; align-items: center; height: var(--header-top-h, var(--header-h)); gap: 8px; transition: height .3s ease; }
.site-header.scrolled .header-row { height: var(--header-h); }
.brand { display: flex; align-items: center; margin-right: auto; }
.brand img { height: var(--logo-top-h, 64px); width: auto; transition: height .3s ease; }
.site-header.scrolled .brand img { height: 64px; }
@media (min-width: 992px) { :root { --header-top-h: 160px; --logo-top-h: 140px; } }
.main-nav .menu { display: flex; list-style: none; align-items: center; }
.main-nav li { position: relative; }
@media (min-width: 992px) { .main-nav .menu > li { margin: 0 7px; } }
@media (min-width: 992px) and (max-width: 1199.98px) { .main-nav .menu > li { margin: 0 2px; } }
.nav-link { display: block; padding: 8px; font-family: var(--font-body); font-size: 14px; font-weight: 700; color: var(--body); line-height: 29px; transition: color .2s; }
.nav-link:hover, .main-nav li:focus-within > .nav-link, .main-nav li.is-here > .nav-link { color: var(--heading); }
.sub-toggle { display: none; }
.submenu { position: absolute; top: 100%; left: 50%; min-width: 240px; list-style: none; background: #fff; border-radius: 6px; padding: 12px 0; box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden; transform: translate(-50%, 10px); transition: opacity .2s, transform .2s, visibility .2s; z-index: 10; }
.has-sub:hover > .submenu, .has-sub:focus-within > .submenu, .has-sub.open > .submenu { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.submenu a { display: block; padding: 6px 20px; font-size: 14px; font-weight: 700; color: var(--body); line-height: 1.8; white-space: nowrap; transition: color .2s, padding .2s; }
.submenu a:hover, .submenu a[aria-current] { color: var(--heading); padding-left: 24px; }
.header-actions { display: flex; align-items: center; gap: 4px; margin-left: 8px; }
.hdr-icon { display: inline-flex; padding: 8px 15px; color: var(--body); transition: color .2s; }
.hdr-icon svg { width: 18px; height: 18px; }
.hdr-icon:hover { color: var(--heading); }
.header-actions .btn-sm { margin-left: 6px; }
.menu-toggle { display: none; padding: 8px; color: var(--heading); }
.menu-toggle svg { width: 26px; height: 26px; }

@media (max-width: 991.98px) {
  :root { --header-h: 76px; }
  .brand img { height: 52px; }
  .hdr-icon { padding: 8px 10px; }
  .menu-toggle { display: inline-flex; }
  .main-nav { position: fixed; inset: var(--header-h) 0 auto 0; max-height: calc(100vh - var(--header-h)); overflow-y: auto; background: var(--gray-1);
    box-shadow: 0 20px 40px rgba(0,0,0,.12); padding: 10px 15px 20px; display: none; }
  .main-nav.open { display: block; }
  .main-nav .menu { flex-direction: column; align-items: stretch; max-width: 690px; margin: 0 auto; }
  .main-nav li { display: flex; flex-wrap: wrap; align-items: center; border-bottom: 1px solid var(--gray-2); }
  .nav-link { flex: 1; text-align: left; padding: 12px 4px; font-size: 15px; }
  .sub-toggle { display: inline-flex; padding: 12px; color: var(--body); }
  .sub-toggle svg { width: 18px; height: 18px; transition: transform .2s; }
  .has-sub.open > .sub-toggle svg { transform: rotate(180deg); }
  .submenu { position: static; width: 100%; transform: none; opacity: 1; visibility: visible; box-shadow: none; background: transparent; padding: 0 0 8px 12px; display: none; }
  .has-sub:hover > .submenu, .has-sub:focus-within > .submenu { transform: none; }
  .has-sub.open > .submenu { display: block; transform: none; }
  .main-nav li li { border: 0; }
}
@media (max-width: 575.98px) { .hdr-icon[href="/shop/"] { display: none; } .header-actions .btn-sm { padding: 7px 14px; } }

/* ---------- sections (home) ---------- */
.section { position: relative; }
.bg-white { background: #fff; } .bg-gray { background: var(--gray-1); }
.bg-dark-grad { background: var(--grad-dark); }
.bg-primary-grad { background: var(--grad); }
.bg-photo { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.bg-photo img { width: 100%; height: 100%; object-fit: cover; }
.bg-photo.o2 img { opacity: .2; } .bg-photo.o1 img { opacity: .1; } .bg-photo.o3 img { opacity: .3; }
.section > .container { position: relative; z-index: 2; }
.divider { position: absolute; left: 0; width: 100%; line-height: 0; pointer-events: none; z-index: 3; }
.divider svg { display: block; width: 100%; }
.divider.bottom { bottom: -1px; } .divider.top { top: -1px; }
.divider.flip-h svg { transform: scaleX(-1); }
.divider.flip-v svg { transform: scaleY(-1); }

/* hero */
.hero { min-height: calc(100vh - var(--header-top-h, var(--header-h))); display: flex; align-items: center; padding: 40px 0; color: rgba(255,255,255,.6); overflow: hidden; }
.hero .container { padding-top: 60px; padding-bottom: 110px; }
.hero h2, .hero h1 { color: #fff; font-weight: 700; font-size: 48px; margin: 10px 0 16px; }
.hero p { color: rgba(255,255,255,.6); }
.hero .btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.hero .divider svg { height: 100px; }

/* about intro */
.intro { padding: 15px 0 0; text-align: center; }
.intro h2 { font-weight: 700; margin-bottom: 20px; }
.intro p { margin-left: auto; margin-right: auto; }

/* three features */
.feature-row { padding: 20px 0; border-bottom: 2px solid var(--gray-1); }
.feature { padding-top: 40px; padding-bottom: 40px; }
.icon-circle { width: 64.8px; height: 64.8px; border-radius: 50%; background: var(--grad-light); display: inline-flex; align-items: center; justify-content: center; }
.icon-circle svg { width: 36px; height: 36px; }
.icon-grad svg path, .icon-grad svg rect, .icon-grad svg circle, .icon-grad svg polygon { fill: url(#grad-primary); }
.feature h5 { font-weight: 700; padding-top: 20px; margin: 0; }
.feature .txt { padding-top: 10px; }
.feature .btn-link { margin-top: 0; padding-top: 20px; padding-bottom: 20px; }

/* why monitco */
.why { padding: 70px 0 50px; }
.photo-stack { margin-bottom: 120px; }
.photo-stack img { border-radius: 4.8px; width: 100%; display: block; }
.why h3 { font-weight: 700; margin-bottom: 4px; padding-top: 20px; }
.check-item { display: flex; gap: 16px; padding: 10px 0; }
.check-item .ci { flex: none; width: 54px; height: 54px; border-radius: 50%; background: var(--gray-1); display: inline-flex; align-items: center; justify-content: center; color: var(--gray-5); }
.check-item .ci svg { width: 30px; height: 30px; }
.check-item .ci svg * { fill: currentColor; }
.check-item h6 { font-weight: 700; color: var(--gray-6); margin: 0; font-size: 18px; }
.check-item .txt { padding-top: 10px; }
.why .btn-plans { margin-top: 10px; padding: 15px 24px; width: 100%; border-radius: 30px; box-shadow: 0 4px 8px rgba(0,0,0,.05), 0 8px 19.2px rgba(0,0,0,.1); }

/* benefits (dark, diagonal top) */
.benefits { padding: 80px 0; background: var(--grad-dark); color: var(--body); overflow: hidden; }
.benefits .divider { z-index: 1; }
.benefits .divider svg { height: auto; aspect-ratio: 1200 / 366; }
.benefits .container { padding-top: 0; }
.benefits .sticky-col { position: sticky; top: calc(var(--header-h) + 20px); align-self: flex-start; }
.benefits .sticky-col > .badge { margin-top: 40px; }
.benefits h3 { color: #fff; font-weight: 700; padding-top: 15px; margin-bottom: 4px; }
.tabs { display: flex; flex-direction: column; padding-top: 30px; }
.tab-btn { text-align: left; font-family: var(--font-body); font-size: 16px; font-weight: 700; color: var(--body); padding: 8px 16px; border-radius: 4px; margin-bottom: 8px; line-height: 38px; transition: background-color .2s, color .2s, box-shadow .2s; }
.tab-btn:hover { color: #fff; }
.tab-btn[aria-selected="true"] { background: #fff; color: var(--blue); box-shadow: var(--shadow-lg); }
.tab-panel { text-align: center; }
.tab-panel .tab-img { max-width: 100%; }
.tab-panel .lead { max-width: 500px; margin: 0 auto; padding: 10px 0; }
.tab-panel .feat-head { text-align: left; margin-top: 30px; }
.tab-panel .feat-head .badge { margin: 0; }
.sep-light { height: 1px; background: rgba(255,255,255,.1); width: 90%; margin: 20px auto 10px; }
.dark-feature { display: flex; gap: 16px; padding: 30px 0; text-align: left; }
.dark-feature .ci { flex: none; width: 54px; height: 54px; border-radius: 50%; background: rgba(255,255,255,.1); display: inline-flex; align-items: center; justify-content: center; color: var(--gray-1); }
.dark-feature .ci svg { width: 30px; height: 30px; }
.dark-feature .ci svg * { fill: currentColor; }
.dark-feature h6 { color: #fff; font-weight: 700; margin: 0; }
.dark-feature .txt { padding-top: 10px; }

/* testimonials */
.testimonials { background: var(--grad); overflow: hidden; }
.testimonials > .container { padding-top: 100px; padding-bottom: 100px; }
.testimonials h3 { color: #fff; font-weight: 700; margin-bottom: 32px; padding-top: 60px; }
.testimonials p.sub { color: rgba(255,255,255,.7); }
.slider { position: relative; padding: 20px 0; }
.slides { display: grid; }
.slide { grid-area: 1 / 1; margin: 0; padding: 20px; opacity: 0; visibility: hidden; transform: translateX(30px); transition: opacity .6s ease, transform .6s ease, visibility .6s; }
.slide.active { opacity: 1; visibility: visible; transform: none; }
.quote-card { background: #fff; border-radius: 10px; box-shadow: var(--shadow-lg); padding: 30px; }
.quote-card p { font-size: 18px; line-height: 26px; color: var(--body); margin-bottom: 20px; }
.quote-by { display: flex; align-items: center; gap: 20px; }
.avatar { width: 42px; height: 42px; border-radius: 50%; background: var(--grad); color: #fff; font-family: var(--font-head); font-weight: 700; display: inline-flex; align-items: center; justify-content: center; box-shadow: var(--shadow-sm); }
.quote-by h6 { margin: 0; font-weight: 700; font-size: 18px; }
.quote-by span { color: var(--body); }
.dots { display: flex; justify-content: center; gap: 8px; margin-top: 10px; }
.dots button { width: 8px; height: 8px; border-radius: 4px; background: rgba(255,255,255,.4); transition: width .3s, background-color .3s; }
.dots button[aria-current="true"] { width: 24px; background: #fff; }

/* solutions */
.solutions { background: var(--gray-1); padding: 50px 0 20px; }
.solutions h2 { font-weight: 700; margin-bottom: 32px; }
.solutions .intro-col { padding-top: 20px; }
.cards-row { padding-top: 40px; align-items: center; }
.solutions .card { background: #fff; border-radius: 5px; box-shadow: var(--shadow); overflow: hidden; margin-bottom: 20px; display: flex; flex-direction: column; }
.solutions .card > img { width: 100%; display: block; }
.solutions .card .card-body { padding: 16px 20px; }
.solutions .card h5 { font-weight: 700; font-size: 24px; margin-bottom: 12px; }
.solutions .card p { margin: 0; }
.solutions .card .card-foot { padding: 12px 20px; border-top: 1px solid rgba(0,0,0,.05); text-align: right; }
.solutions .card .card-foot a { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--body); transition: color .2s; }
.solutions .card .card-foot a:hover { color: var(--heading); }
.solutions .card .card-foot svg { width: 12px; height: 12px; }

/* pricing */
.pricing { background: var(--grad-dark); background-color: var(--dark); padding: 120px 0 80px; overflow: hidden; }
.pricing .divider svg { height: auto; aspect-ratio: 1200 / 130; }
.pricing h2 { color: #fff; font-weight: 700; margin: 0 0 32px; padding-top: 30px; }
.pricing .lead { padding: 10px 0 20px; }
.pills { display: inline-flex; gap: 10px; margin-bottom: 24px; }
.pill { font-family: var(--font-head); font-size: 18px; color: var(--body); padding: 8px 25px; border-radius: 4px; margin: 8px 0; transition: color .2s, box-shadow .2s; }
.pill:hover { color: #fff; }
.pill[aria-selected="true"] { background: var(--grad); color: #fff; box-shadow: var(--shadow-lg); }
.plan-group { display: flex; align-items: center; margin-top: 20px; text-align: left; }
.plan { flex: 1; background: #fff; box-shadow: var(--shadow); padding: 40px 30px; transition: box-shadow .3s, transform .3s; }
.plan:hover { box-shadow: var(--shadow-lg); }
.plan.featured { background: var(--grad); border-radius: 5px; position: relative; z-index: 2; }
.plan .price { font-family: var(--font-head); font-weight: 700; font-size: 48px; line-height: 1.3; padding-top: 16px; margin: 0 0 8px; }
.plan .price sub { font-size: 14px; font-weight: 700; vertical-align: baseline; }
.plan .desc { font-size: 14px; line-height: 25.2px; font-weight: 700; color: var(--gray-5); }
.plan.featured .desc, .plan.featured .price { color: #fff; -webkit-text-fill-color: #fff; background: none; }
.plan ul { list-style: none; padding: 24px 0 0; }
.plan li { display: flex; gap: 10px; align-items: flex-start; font-weight: 700; padding: 8px 0; color: var(--gray-5); line-height: 1.5; }
.plan li > span { flex: none; display: inline-flex; }
.plan li svg { flex: none; width: 1.5em; height: 1.5em; }
.plan.featured li { color: rgba(255,255,255,.5); }
.plan.featured li svg * { fill: #fff; }
.plan .btn { margin-top: 20px; width: 100%; padding: 10px 24px; }
.plan.featured .btn { background: rgba(0,0,0,.3); }
.pricing .more { margin-top: 30px; min-width: 285px; padding: 15px 24px; }

/* footer */
.site-footer { position: relative; }
.footer-cta { position: relative; background: #fff; border-top: 2px solid var(--gray-1); border-bottom: 2px solid var(--gray-1); overflow: hidden; }
.cta-dots { position: absolute; right: 12%; top: 50%; width: 260px; transform: translateY(-50%); opacity: .9; animation: spin 60s linear infinite reverse; pointer-events: none; }
@keyframes spin { to { transform: translateY(-50%) rotate(360deg); } }
.cta-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-top: 40px; padding-bottom: 40px; position: relative; z-index: 2; }
.cta-title { font-size: 30px; font-weight: 700; margin: 0; }
.cta-sub { display: block; margin-top: 10px; }
.footer-main { background: var(--grad-dark); padding: 40px 0; }
.footer-grid { display: grid; grid-template-columns: 220px 145px 145px 145px; column-gap: 12px; row-gap: 20px; align-items: start; }
.footer-brand { padding: 20px 0; }
.footer-brand img { width: 150px; height: auto; }
.footer-brand p { padding-top: 30px; margin: 0 0 20px; }
.social { display: flex; gap: 6px; }
.social a { color: var(--blue-2); padding: 0 8px; }
.social svg { width: 24px; height: 24px; }
.social a:hover { color: #fff; }
.footer-col { padding: 10px 0; }
.footer-col h6 { color: #fff; font-weight: 700; margin-bottom: 4px; }
.footer-col ul { list-style: none; }
.footer-col li { padding: 5px 0; }
.footer-col a { color: var(--body); display: inline-block; padding: 5px 0; position: relative; transition: color .2s; }
.footer-col a:hover { color: #fff; }
.footer-copy { background: var(--secondary); padding: 15px 15px 10px; text-align: center; }
.footer-copy p { margin: 0; }
@media (max-width: 991.98px) { .footer-grid { grid-template-columns: 1fr 1fr; } .cta-dots { display: none; } }
@media (max-width: 575.98px) { .cta-row { flex-direction: column; align-items: flex-start; } }

/* search overlay */
.search-overlay { position: fixed; inset: 0; z-index: 3000; background: rgba(17,17,17,.92); display: flex; align-items: flex-start; justify-content: center; padding: 12vh 16px 16px; }
.search-box { width: 100%; max-width: 720px; position: relative; }
.search-label { display: block; color: #fff; font-family: var(--font-head); font-size: 24px; font-weight: 700; margin-bottom: 12px; }
.search-box input { width: 100%; font: 400 22px/1.4 var(--font-body); padding: 16px 20px; border: 0; border-radius: 6px; outline: none; color: var(--heading); }
.search-close { position: absolute; right: 0; top: 0; color: #fff; }
.search-close svg { width: 28px; height: 28px; }
.search-results { list-style: none; margin-top: 16px; max-height: 60vh; overflow-y: auto; }
.search-results a { display: block; padding: 12px 16px; border-radius: 6px; color: #fff; }
.search-results a:hover, .search-results a:focus { background: rgba(255,255,255,.08); }
.search-results small { display: block; color: var(--body); }

.to-top { position: fixed; right: max(20px, env(safe-area-inset-right)); bottom: max(20px, env(safe-area-inset-bottom)); width: 46px; height: 46px; border-radius: 50%; background: #fff; color: var(--heading); box-shadow: var(--shadow-lg); display: inline-flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; z-index: 900; }
.to-top.show { opacity: 1; visibility: visible; }
.to-top svg { width: 20px; height: 20px; }

/* reveal on scroll (only when JS runs; content is visible without it) */
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.js .reveal.in { opacity: 1; transform: none; }

/* ---------- responsive (home) ---------- */
@media (max-width: 1199.98px) {
  h2, .hero h2 { font-size: 40px; }
}
@media (max-width: 767.98px) {
  h2, .hero h2 { font-size: 34px; } h3 { font-size: 30px; } h5, .card h5 { font-size: 21px; }
  .hero .container { padding-top: 40px; padding-bottom: 60px; }
  .hero .divider svg { height: 50px; }
  .photo-stack { margin-bottom: 40px; }
  .benefits .container { padding-top: 60px; }
  .benefits .sticky-col { position: static; padding-top: 0; }
  .testimonials > .container { padding-top: 60px; padding-bottom: 60px; }
  .testimonials h3 { padding-top: 0; }
  .plan-group { flex-direction: column; align-items: stretch; gap: 20px; }
  .plan { border-radius: 5px; }
  .pricing { padding-top: 90px; }
  .footer-grid { grid-template-columns: 1fr; }
}

/* =====================================================================================
   Inner pages (converted from the old WPBakery layouts). Class names mirror the old ones so the
   converted content keeps its layout; all values are our own, measured from the live pages.
   Merged after site.css by build.py.
   ===================================================================================== */
.inner main { background: var(--gray-1); }
.wsec { position: relative; padding: 0; }
.wsec > .container { position: relative; z-index: 2; }
.wsec .row { margin-left: -15px; margin-right: -15px; }
.wsec .col { padding-left: 15px; padding-right: 15px; min-width: 0; position: relative; }
.v-middle { align-items: center; }
.v-equal { align-items: stretch; }
.full-height { min-height: calc(100vh - var(--header-top-h, var(--header-h))); display: flex; align-items: center; }
.full-height > .container { width: 100%; }
@media (min-width: 576px) { .c-xs-6 { width: 50%; } }
@media (min-width: 768px) {
  .c-sm-2 { width: 16.6667%; } .c-sm-3 { width: 25%; } .c-sm-4 { width: 33.3333%; } .c-sm-5 { width: 41.6667%; }
  .c-sm-6 { width: 50%; } .c-sm-7 { width: 58.3333%; } .c-sm-8 { width: 66.6667%; } .c-sm-9 { width: 75%; }
  .c-sm-10 { width: 83.3333%; } .c-sm-12 { width: 100%; } .c-sm-off-1 { margin-left: 8.3333%; } .c-sm-off-2 { margin-left: 16.6667%; }
}
@media (min-width: 992px) {
  .c-md-2 { width: 16.6667%; } .c-md-3 { width: 25%; } .c-md-4 { width: 33.3333%; } .c-md-6 { width: 50%; } .c-md-8 { width: 66.6667%; }
  .c-lg-6 { width: 50%; } .c-lg-8 { width: 66.6667%; } .c-lg-10 { width: 83.3333%; } .c-lg-off-1 { margin-left: 8.3333%; } .c-lg-off-2 { margin-left: 16.6667%; }
}
.wsec .divider { z-index: 1; }
.wsec .divider.front { z-index: 3; }
.wsec .divider svg { display: block; width: 100%; height: auto; }
.wsec .divider.top.flip-h svg { transform: scaleX(-1); }
.bg-photo.o1 img { opacity: .1; } .bg-photo.o2 img { opacity: .2; } .bg-photo.o3 img { opacity: .3; } .bg-photo.o4 img { opacity: .4; } .bg-photo.o5 img { opacity: .5; } .bg-photo.o6 img { opacity: .6; } .bg-photo.o7 img { opacity: .7; } .bg-photo.o8 img { opacity: .8; } .bg-photo.o9 img { opacity: .9; }

/* page title banner */
.page-intro { position: relative; overflow: hidden; }
.page-intro > .container { position: relative; z-index: 2; padding-top: 150px; padding-bottom: 180px; }
.page-intro .intro-title { font-size: 36px; font-weight: 700; color: #fff; margin: 8px 0; }
.page-intro .divider { z-index: 1; }
.page-intro .divider svg { display: block; width: 100%; height: 300px; }
@media (max-width: 767.98px) { .page-intro > .container { padding-top: 80px; padding-bottom: 110px; } .page-intro .divider svg { height: 120px; } .page-intro .intro-title { font-size: 30px; } }

/* section backgrounds */
.bg-white { background-color: #fff; }
.bg-gray-1 { background-color: var(--gray-1); } .bg-gray-2 { background-color: var(--gray-2); }
.bg-gradient-primary { background-image: var(--grad); }
.bg-gradient-dark { background-image: var(--grad-dark); }
.bg-gradient-primary-light { background-image: var(--grad-light); }
.bg-primary-light { background-color: rgba(78, 178, 241, .15); }
.bg-primary { background-color: var(--blue); }
.bg-secondary { background-color: var(--secondary); }
.bg-red { background-color: #ff4b4b; } .bg-green { background-color: #2ecc71; }
.bg-transparent { background-color: transparent; }
.bg-light-opacity-1 { background-color: rgba(255, 255, 255, .1); } .bg-light-opacity-2 { background-color: rgba(255, 255, 255, .2); } .bg-light-opacity-3 { background-color: rgba(255, 255, 255, .3); }
.bg-dark-opacity-1 { background-color: rgba(0, 0, 0, .1); } .bg-dark-opacity-3 { background-color: rgba(0, 0, 0, .3); } .bg-dark-opacity-8 { background-color: rgba(0, 0, 0, .8); }
.pix-intro-1 { color: rgba(255, 255, 255, .6); }
.pix-intro-1 h1, .pix-intro-1 h2, .pix-intro-1 h3, .pix-intro-1 h4, .pix-intro-1 h5, .pix-intro-1 h6 { color: #fff; }
.bg-gradient-dark h1, .bg-gradient-dark h2, .bg-gradient-dark h3, .bg-gradient-dark h6 { color: #fff; }

/* text utilities */
.text-left { text-align: left; } .text-right { text-align: right; }
.text-white { color: #fff !important; }
.text-heading-default { color: var(--heading); }
.text-body-default { color: var(--body); }
.text-gray-1 { color: var(--gray-1); } .text-gray-5 { color: var(--gray-5); } .text-gray-6 { color: var(--gray-6); }
.text-light-opacity-5 { color: rgba(255, 255, 255, .5); } .text-light-opacity-6 { color: rgba(255, 255, 255, .6); }
.text-light-opacity-7 { color: rgba(255, 255, 255, .7); } .text-light-opacity-9 { color: rgba(255, 255, 255, .9); }
.text-primary { color: var(--blue); } .text-blue { color: var(--text-blue); }
.text-gradient-primary { background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.text-small { font-size: 14px; line-height: 25.2px; }
.font-weight-bold { font-weight: 700; }
.pix-sliding-headline { font-weight: 700; }
.mb-32 { margin-bottom: 32px; } .mb-0 { margin-bottom: 0; } .mb-1 { margin-bottom: 4px; } .mb-2 { margin-bottom: 8px; } .mb-3 { margin-bottom: 16px; } .mb-4 { margin-bottom: 24px; }
.mt-4 { margin-top: 24px; } .pt-3 { padding-top: 16px; } .pt-4 { padding-top: 24px; } .py-2 { padding-top: 8px; padding-bottom: 8px; } .py-3 { padding-top: 16px; padding-bottom: 16px; } .px-2 { padding-left: 8px; padding-right: 8px; }
.pix-mr-10 { margin-right: 10px; } .pix-mx-20 { margin-left: 20px; margin-right: 20px; } .pix-mt-20 { margin-top: 20px; } .pix-pb-102 { padding-bottom: 10px; }
.pix-p-10 { padding: 10px; } .pix-p-20 { padding: 20px; } .pix-p-30 { padding: 30px; }
.d-flex { display: flex; } .d-inline-flex { display: inline-flex; } .d-inline-block { display: inline-block; } .d-block { display: block; } .w-100 { width: 100%; }
@media (min-width: 576px) { .d-sm-flex { display: flex; } .d-sm-inline-flex { display: inline-flex; } }
@media (min-width: 768px) { .d-md-flex { display: flex; } .text-md-right { text-align: right; } }
.align-items-center { align-items: center; } .justify-content-center { justify-content: center; } .flex-column { flex-direction: column; }
.rounded { border-radius: 4px; } .rounded-lg { border-radius: 4.8px; } .rounded-xl { border-radius: 5px; } .rounded-10 { border-radius: 10px; } .rounded-circle { border-radius: 50%; } .rounded-0 { border-radius: 0; }
.shadow { box-shadow: var(--shadow); } .shadow-lg { box-shadow: var(--shadow-lg); } .shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-inverse-lg { box-shadow: 0 4px 8px rgba(0, 0, 0, .05), 0 24px 35.2px rgba(0, 0, 0, .1); }
.shadow-hover, .shadow-hover-lg, .shadow-hover-sm, .shadow-inverse-hover-lg, .shadow-inverse-hover-sm { transition: box-shadow .3s, transform .3s; }
.shadow-hover:hover, .shadow-hover-lg:hover, .shadow-inverse-hover-lg:hover { box-shadow: 0 4px 8px rgba(0, 0, 0, .05), 0 30px 45px rgba(0, 0, 0, .14); }

/* icons inside converted content */
svg.ico { width: 1em; height: 1em; vertical-align: middle; }
svg.ico path, svg.ico rect, svg.ico circle, svg.ico polygon { fill: currentColor; }
.text-gradient-primary svg.ico path, .text-gradient-primary svg.ico rect, .text-gradient-primary svg.ico circle, .text-gradient-primary svg.ico polygon { fill: url(#grad-primary); }
svg.ico[width="100%"] { width: 100%; height: 100%; }
.mr-32 { margin-right: 32px; }
.rounded-circle[style*="width:64.8px"], .rounded-circle[style*="width:54px"], [style*="width:54px"][style*="line-height:54px"] { display: inline-flex !important; align-items: center; justify-content: center; }

/* badges and buttons used in converted content */
h6 > .badge, h5 > .badge { font-size: 13.5px; }
.badge-pill { border-radius: 160px; }
.btn-gradient-primary { background: var(--grad); color: #fff; }
.btn-gradient-primary:hover { color: #fff; transform: translateY(-2px); }
.btn-rounded { border-radius: 30px; }
.btn-flat { border-radius: 4px; }
.btn-md { font-size: 16px; padding: 10px 24px; }
.btn-white { background: #fff; color: var(--heading); }
.btn-blink-white { background: rgba(0, 0, 0, .25); color: #fff; border-radius: 30px; }
.btn-blink-white:hover { background: #fff; color: var(--heading); }
.btn-primary { background: var(--blue); color: #fff; }
.btn-custom-bg.bg-dark-opacity-3 { background: rgba(0, 0, 0, .3); color: #fff; }
.btn-underline-gray-4, .btn-underline-primary { color: var(--heading); }
.btn-underline-gray-4 > span, .btn-underline-primary > span { position: relative; }
.btn-underline-gray-4 > span::after, .btn-underline-primary > span::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--gray-2); transform: scaleX(0); transform-origin: left; transition: transform .25s; }
.btn-underline-gray-4:hover > span::after, .btn-underline-primary:hover > span::after { transform: scaleX(1); }
.btn > svg { width: 14px; height: 14px; }

/* cards and boxes */
.wsec .card { background: #fff; border-radius: 5px; position: relative; display: flex; flex-direction: column; overflow: hidden; }
.wsec .card.bg-gradient-primary { background-image: var(--grad); }
.wsec .card.bg-transparent, .wsec .pix-content-box.card { background: transparent; }
.card-body { padding: 20px; } .card-title { color: var(--heading); } .card-text { color: var(--body); }
.card-footer { padding: 12px 20px; }
.card-img { width: 100%; display: block; }
.card-img-overlay { position: absolute; inset: 0; padding: 20px; display: flex; flex-direction: column; justify-content: flex-end; }
.pix-opacity-4 { opacity: .4; }
.pix-content-box { padding: 30px; }
.pix-feature-list { display: flex; gap: 10px; align-items: flex-start; }
.pix-feature-list > div:first-child { flex: none; }
.pix-photo-stack img { width: 100%; }
.pix-content-stack { display: grid; grid-template-columns: 1fr; align-items: center; }
.pix-content-stack > * { grid-area: 1 / 1; min-width: 0; }
.pix-content-stack > *:first-child { width: 58%; justify-self: end; }
.pix-content-stack > *:first-child img { width: 100%; display: block; }
.pix-content-stack > *:last-child { width: 40%; max-width: 460px; justify-self: start; position: relative; z-index: 2; }
.pix-content-stack.pix-right-content > *:first-child { justify-self: start; }
.pix-content-stack.pix-right-content > *:last-child { justify-self: end; }
.pix-circle { width: 42px; height: 42px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; }
.card-group { display: flex; align-items: center; }
.sep { height: 1px; background: rgba(0, 0, 0, .08); margin: 20px auto; }
.bg-gradient-dark .sep, .pix-intro-1 .sep { background: rgba(255, 255, 255, .1); }
.wsec table { width: 100%; border-collapse: collapse; }
.wsec td, .wsec th { padding: 8px 12px; border-bottom: 1px solid var(--gray-2); text-align: left; }

/* converted tabs (Plans, Supported Hardware) */
.pix-pills-1, .pix-pills-light { display: inline-flex; flex-wrap: wrap; gap: 10px; }
.pix-tabs-btn { font-family: var(--font-head); color: var(--body); padding: 8px 25px; border-radius: 4px; cursor: pointer; transition: color .2s; }
.pix-tabs-btn.active { background: var(--grad); color: #fff; box-shadow: var(--shadow-lg); }
.pix-pills-light .pix-tabs-btn.active { background: #fff; color: var(--blue); }

/* legal pages (Terms, Privacy) */
.legal { max-width: 820px; margin: 0 auto; background: #fff; border-radius: 10px; box-shadow: var(--shadow); padding: 40px 48px; color: #5f6870; font-size: 17px; line-height: 1.75; }
.wsec .legal h2 { font-size: 26px; font-weight: 700; margin: 36px 0 12px; }
.wsec .legal h3 { font-size: 20px; font-weight: 700; margin: 24px 0 8px; }
.legal ul { padding-left: 22px; margin: 0 0 16px; }
.legal li { margin-bottom: 6px; }
.legal a { color: var(--blue); text-decoration: underline; }
.legal mark { background: #fff3c4; color: #5c4400; padding: 0 3px; border-radius: 3px; }
.legal-date { color: var(--gray-6); font-size: 15px; }
.draft-note { background: #fff8e1; border: 1px solid #f3d27a; color: #6b5100; border-radius: 8px; padding: 12px 16px; margin-bottom: 18px; font-size: 15px; }
@media (max-width: 575.98px) { .legal { padding: 24px 18px; font-size: 16px; } }

/* products */
.kit-list { list-style: none; padding: 16px 0 0; }
.kit-list li { display: flex; gap: 10px; align-items: flex-start; font-weight: 700; padding: 6px 0; color: var(--gray-5); line-height: 1.5; }
.kit-list li > span { flex: none; display: inline-flex; }
.kit-list svg { width: 1.5em; height: 1.5em; }

/* contact form */
.contact-form-wrap { max-width: 760px; margin: 0 auto; padding: 30px 0; text-align: left; }
.contact-form { background: #fff; border-radius: 10px; box-shadow: var(--shadow-lg); padding: 30px; }
.cf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; margin-bottom: 20px; }
.cf-field { display: flex; flex-direction: column; gap: 6px; font-weight: 700; color: var(--heading); font-size: 14px; }
.cf-field small { font-weight: 400; color: var(--body); }
.cf-wide { grid-column: 1 / -1; }
.cf-field input, .cf-field select, .cf-field textarea { font: 400 16px/1.5 var(--font-body); color: var(--heading); padding: 12px 14px; border: 1px solid var(--gray-2); border-radius: 6px; background: var(--gray-1); transition: border-color .2s, background-color .2s; }
.cf-field input:focus, .cf-field select:focus, .cf-field textarea:focus { outline: none; border-color: var(--blue-2); background: #fff; }
.contact-form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cf-status { margin: 14px 0 0; font-weight: 700; }
.cf-status.ok { color: #2e9d5b; } .cf-status.err { color: #d9534f; }

@media (max-width: 767.98px) {
  .wsec h1 { font-size: 40px; } .wsec h2 { font-size: 34px; } .wsec h3 { font-size: 28px; }
  .pix-content-box { padding: 20px; }
  .pix-content-stack > * { grid-area: auto; width: 100% !important; max-width: none; }
  .full-height { min-height: 0; padding: 60px 0; }
  .card-group { flex-direction: column; align-items: stretch; gap: 20px; }
}
@media (max-width: 575.98px) { .cf-grid { grid-template-columns: 1fr; } .contact-form { padding: 20px; } }

/* contact form placed inside an old content card (Contact page): give it room, no card-in-card */
.pix-content-stack > *:last-child:has(.contact-form) { width: 50%; max-width: 560px; }
.pix-content-box .contact-form-wrap { padding: 0; }
.pix-content-box .contact-form { box-shadow: none; padding: 0; background: transparent; }
.pix-content-stack .cf-grid { grid-template-columns: 1fr 1fr; }
@media (max-width: 991.98px) { .pix-content-stack .cf-grid { grid-template-columns: 1fr; } }

@media (max-width: 767.98px) { .wsec .divider svg[style*="height"] { height: 120px !important; } }

/* Bootstrap-style columns used inside old theme elements (logo grids etc.) */
.overlay { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.b-1 { width: 8.3333%; } .b-2 { width: 16.6667%; } .b-3 { width: 25.0000%; } .b-4 { width: 33.3333%; } .b-5 { width: 41.6667%; } .b-6 { width: 50.0000%; } .b-7 { width: 58.3333%; } .b-8 { width: 66.6667%; } .b-9 { width: 75.0000%; } .b-10 { width: 83.3333%; } .b-11 { width: 91.6667%; } .b-12 { width: 100.0000%; }
@media (min-width: 576px) { .b-sm-1 { width: 8.3333%; } .b-sm-2 { width: 16.6667%; } .b-sm-3 { width: 25.0000%; } .b-sm-4 { width: 33.3333%; } .b-sm-5 { width: 41.6667%; } .b-sm-6 { width: 50.0000%; } .b-sm-7 { width: 58.3333%; } .b-sm-8 { width: 66.6667%; } .b-sm-9 { width: 75.0000%; } .b-sm-10 { width: 83.3333%; } .b-sm-11 { width: 91.6667%; } .b-sm-12 { width: 100.0000%; } }
@media (min-width: 768px) { .b-md-1 { width: 8.3333%; } .b-md-2 { width: 16.6667%; } .b-md-3 { width: 25.0000%; } .b-md-4 { width: 33.3333%; } .b-md-5 { width: 41.6667%; } .b-md-6 { width: 50.0000%; } .b-md-7 { width: 58.3333%; } .b-md-8 { width: 66.6667%; } .b-md-9 { width: 75.0000%; } .b-md-10 { width: 83.3333%; } .b-md-11 { width: 91.6667%; } .b-md-12 { width: 100.0000%; } }
@media (min-width: 992px) { .b-lg-1 { width: 8.3333%; } .b-lg-2 { width: 16.6667%; } .b-lg-3 { width: 25.0000%; } .b-lg-4 { width: 33.3333%; } .b-lg-5 { width: 41.6667%; } .b-lg-6 { width: 50.0000%; } .b-lg-7 { width: 58.3333%; } .b-lg-8 { width: 66.6667%; } .b-lg-9 { width: 75.0000%; } .b-lg-10 { width: 83.3333%; } .b-lg-11 { width: 91.6667%; } .b-lg-12 { width: 100.0000%; } }
@media (min-width: 1200px) { .b-xl-1 { width: 8.3333%; } .b-xl-2 { width: 16.6667%; } .b-xl-3 { width: 25.0000%; } .b-xl-4 { width: 33.3333%; } .b-xl-5 { width: 41.6667%; } .b-xl-6 { width: 50.0000%; } .b-xl-7 { width: 58.3333%; } .b-xl-8 { width: 66.6667%; } .b-xl-9 { width: 75.0000%; } .b-xl-10 { width: 83.3333%; } .b-xl-11 { width: 91.6667%; } .b-xl-12 { width: 100.0000%; } }
@media (min-width: 576px) { .b-sm-auto { flex: 1 0 0%; width: auto; } }
@media (min-width: 768px) { .b-md-auto { flex: 1 0 0%; width: auto; } .c-sm-off-3 { margin-left: 25%; } }
@media (min-width: 992px) { .b-lg-auto { flex: 1 0 0%; width: auto; } .c-md-off-1 { margin-left: 8.3333%; } .c-md-off-2 { margin-left: 16.6667%; } .c-md-off-3 { margin-left: 25%; } }
@media (min-width: 1200px) { .c-lg-off-3 { margin-left: 25%; } }
.clients .client { text-align: center; }
.clients img { max-height: 56px; width: auto; max-width: 100%; opacity: .9; transition: opacity .2s; }
.clients img:hover { opacity: 1; }
.pix-pills-1 { display: flex; justify-content: center; }

/* =====================================================================================
   Dark theme (owner, 2026-11-12: "the almost black theme like we are using for the dashboard").
   Colours come from the dashboard (server/monitco/static/app.css); the blue brand gradient stays for buttons
   and highlights. Applied when <html> has class "dark" (the default). Add ?theme=light to any page address to
   see the original light look for comparison (site.js removes the class).
   ===================================================================================== */
.dark {
  --d-bg: #0b0e11;        /* page / former white sections */
  --d-bg2: #11161b;       /* former light-grey sections */
  --d-panel: #161c22;     /* cards, boxes, menus */
  --d-panel2: #1d252d;    /* inputs, hover */
  --d-line: #26313b;
  --heading: #e6edf2;
  --body: #8c9aa6;
  --gray-1: #11161b;
  --gray-2: #26313b;
  --gray-5: #8c9aa6;
  --gray-6: #b6c2cc;
  --text-blue: #4eb2f1;
  --shadow: 0 2px 6px rgba(0, 0, 0, .35), 0 8px 19.2px rgba(0, 0, 0, .45);
  --shadow-lg: 0 4px 8px rgba(0, 0, 0, .35), 0 24px 35.2px rgba(0, 0, 0, .5);
  color-scheme: dark;
}
.dark body { background: var(--d-bg); color: var(--body); }

/* header + menus */
.dark .site-header { background: var(--d-bg); box-shadow: 0 1px 0 var(--d-line), 0 10px 40px rgba(0, 0, 0, .5); }
.dark .nav-link:hover, .dark .main-nav li:focus-within > .nav-link, .dark .main-nav li.is-here > .nav-link { color: #fff; }
.dark .submenu { background: var(--d-panel); border: 1px solid var(--d-line); }
.dark .submenu a:hover, .dark .submenu a[aria-current] { color: #fff; }
.dark .hdr-icon:hover { color: #fff; }
.dark .menu-toggle { color: var(--heading); }
@media (max-width: 991.98px) { .dark .main-nav { background: var(--d-panel); } }

/* sections that were white / light grey */
.dark .bg-white, .dark .wsec.bg-white { background-color: var(--d-bg); }
.dark .bg-gray, .dark .bg-gray-1, .dark .solutions, .dark .inner main { background-color: var(--d-bg2); }
.dark .bg-gray-2 { background-color: var(--d-panel2); }
.dark [style*="background-color:#ffffff"], .dark [style*="background-color:#fff;"] { background-color: var(--d-bg) !important; }
.dark [style*="background-color:#f8f9fa"] { background-color: var(--d-bg2) !important; }
.dark .feature-row { border-bottom-color: var(--d-line); }
.dark .footer-cta { background: var(--d-bg2); border-color: var(--d-line); }
.dark .footer-copy { background: #07090b; }
.dark .footer-main { background: var(--d-bg); border-top: 1px solid var(--d-line); }

/* the white/grey parts of wave and diagonal edges follow the section they lead into */
.dark .divider [fill="#ffffff"], .dark .divider [fill="#fff"] { fill: var(--d-bg); }
.dark .divider [fill="#f8f9fa"] { fill: var(--d-bg2); }
.dark .page-intro .divider [fill="#f8f9fa"] { fill: var(--d-bg2); }
.dark .pricing .divider [fill="rgba(255,255,255,0.3)"] { fill: rgba(17, 22, 27, .3); }
.dark .pricing .divider [fill="rgba(255,255,255,0.6)"] { fill: rgba(17, 22, 27, .6); }
.dark .pricing .divider [fill="#ffffff"] { fill: var(--d-bg2); }

/* cards, boxes, panels */
.dark .solutions .card, .dark .wsec .card, .dark .plan, .dark .quote-card, .dark .contact-form, .dark .legal { background-color: var(--d-panel); border: 1px solid var(--d-line); }
.dark .wsec .card.bg-gradient-primary, .dark .plan.featured { border-color: transparent; }
.dark .wsec .pix-content-box.card { background-color: transparent; border-color: transparent; }
.dark .wsec .pix-content-box.card[style*="background-color"] { background-color: var(--d-panel) !important; border: 1px solid var(--d-line); }
.dark .solutions .card .card-foot { border-top-color: var(--d-line); }
.dark .plan .desc, .dark .plan li { color: var(--body); }
.dark .plan.featured .desc, .dark .plan.featured .price { color: #fff; }
.dark .check-item .ci, .dark .icon-circle { background-color: var(--d-panel2); }
.dark .check-item h6 { color: var(--heading); }
.dark .tab-btn[aria-selected="true"], .dark .pix-pills-light .pix-tabs-btn.active { background: var(--d-panel2); color: #fff; }
.dark .btn-link, .dark .btn-underline-gray-4, .dark .btn-underline-primary { color: var(--heading); }
.dark .btn-white { background: var(--d-panel2); color: #fff; }
.dark .btn-line-white:hover { background: #fff; color: #0b0e11; }
.dark .badge-dark8, .dark .bg-dark-opacity-8 { background-color: rgba(255, 255, 255, .08); }
.dark .badge.bg-gray-2 { background-color: var(--d-panel2); }
.dark .sep { background: var(--d-line); }
.dark .to-top { background: var(--d-panel2); color: #fff; }
.dark .wsec td, .dark .wsec th { border-bottom-color: var(--d-line); }

/* partner logos: one light colour so dark logos stay visible */
.dark .clients img { filter: brightness(0) invert(1); opacity: .65; }
.dark .clients img:hover { opacity: .95; }

/* forms + search */
.dark .cf-field { color: var(--heading); }
.dark .cf-field input, .dark .cf-field select, .dark .cf-field textarea { background: var(--d-panel2); border-color: var(--d-line); color: var(--heading); }
.dark .cf-field input:focus, .dark .cf-field select:focus, .dark .cf-field textarea:focus { background: var(--d-bg); }
.dark .search-box input { background: var(--d-panel); color: var(--heading); border: 1px solid var(--d-line); }

/* legal pages */
.dark .legal { color: var(--body); }
.dark .legal mark { background: #4a3b00; color: #ffe08a; }
.dark .draft-note { background: #2b2410; border-color: #6b5100; color: #ffd76a; }