/*
Theme Name: EECONS Divi Child
Description: Child theme stylesheet for the EECONS.com Divi 5 rebuild.
Author: Electronic Enterprises, Inc. DBA EECONS
Template: Divi
Version: 1.5.8
*/

/*
|--------------------------------------------------------------------------
| EECONS Design System
|--------------------------------------------------------------------------
| Dark-mode-first, modern, technical, corporate, polished.
| Fonts:
| - Headings: Space Grotesk
| - Body: Inter
| - Technical accents: JetBrains Mono
|--------------------------------------------------------------------------
*/

/* Optional Google Font import.
   For best performance, enqueue fonts in functions.php instead.
   This import is included so the stylesheet is self-contained. */

/*
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap");
*/

/* ==========================================================================
   1. Root variables
   ========================================================================== */

:root {
  /* Brand colors */
  --ee-void: #05070D;
  --ee-navy: #0A1628;
  --ee-panel: #111827;
  --ee-border: #263244;
  --ee-cyan: #00D4FF;
  --ee-blue: #2F80FF;
  --ee-red: #E53946;
  --ee-green: #13B981;
  --ee-text: #B8C2D6;
  --ee-white: #F4F7FB;
  --ee-muted: #7D8BA3;

  /* Transparent color helpers */
  --ee-white-04: rgba(255, 255, 255, 0.04);
  --ee-white-08: rgba(255, 255, 255, 0.08);
  --ee-white-12: rgba(255, 255, 255, 0.12);
  --ee-text-10: rgba(184, 194, 214, 0.10);
  --ee-text-12: rgba(184, 194, 214, 0.12);
  --ee-text-14: rgba(184, 194, 214, 0.14);
  --ee-text-18: rgba(184, 194, 214, 0.18);
  --ee-cyan-08: rgba(0, 212, 255, 0.08);
  --ee-cyan-12: rgba(0, 212, 255, 0.12);
  --ee-cyan-18: rgba(0, 212, 255, 0.18);
  --ee-cyan-42: rgba(0, 212, 255, 0.42);
  --ee-cyan-60: rgba(0, 212, 255, 0.60);
  --ee-cyan-70: rgba(0, 212, 255, 0.70);
  --ee-blue-22: rgba(47, 128, 255, 0.22);
  --ee-blue-28: rgba(47, 128, 255, 0.28);
  --ee-blue-38: rgba(47, 128, 255, 0.38);

  /* Typography */
  --ee-font-heading: "Space Grotesk", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ee-font-body: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ee-font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;

  /* Font sizes
     2026-07-16: reduced heading scale — the 68/58 display sizes read too
     big/bulky and wrapped hero + product titles. Headings are now a single
     fluid clamp (see §2 + §30), so these vars set the min/max endpoints. */
  --ee-h1-desktop: 52px;
  --ee-h1-tablet: 40px;
  --ee-h1-mobile: 30px;
  --ee-h2-desktop: 40px;
  --ee-h2-tablet: 32px;
  --ee-h2-mobile: 27px;
  --ee-h3-desktop: 28px;
  --ee-h3-tablet: 24px;
  --ee-h3-mobile: 22px;
  --ee-body-desktop: 18px;
  --ee-body-tablet: 17px;
  --ee-body-mobile: 16px;
  --ee-small-desktop: 15px;
  --ee-small-tablet: 14px;
  --ee-small-mobile: 14px;
  --ee-kicker-desktop: 14px;
  --ee-kicker-tablet: 13px;
  --ee-kicker-mobile: 12px;

  /* Spacing */
  --ee-section-hero-top: 130px;
  --ee-section-hero-bottom: 110px;
  --ee-section-standard-y: 96px;
  --ee-section-cta-y: 92px;
  --ee-section-compact-y: 34px;
  --ee-card-padding: 32px;
  --ee-grid-gap: 24px;

  /* Layout */
  --ee-row-width: 90%;
  --ee-row-max: 1280px;
  --ee-row-narrow: 920px;
  --ee-row-heading: 860px;

  /* Radius */
  --ee-radius-sm: 12px;
  --ee-radius-md: 18px;
  --ee-radius-lg: 24px;
  --ee-radius-pill: 999px;

  /* Shadows */
  --ee-shadow-soft: 0 18px 50px rgba(0, 0, 0, 0.28);
  --ee-shadow-heavy: 0 28px 90px rgba(0, 0, 0, 0.42);
  --ee-shadow-button: 0 16px 34px var(--ee-blue-28);
  --ee-shadow-button-hover: 0 22px 44px var(--ee-blue-38);

  /* Transitions */
  --ee-transition-fast: 160ms ease;
  --ee-transition-standard: 220ms ease;
}

/* ==========================================================================
   2. Base reset and global typography
   ========================================================================== */

html {
  /* NEVER add scroll-behavior:smooth here: with hi-res mouse wheels each
     tiny delta restarts the easing animation and wheel scrolling collapses
     to ~0 (confirmed on production 2026-07-16). Smooth ANCHOR scrolling is
     provided by eecons-motion.js instead. */
  background: var(--ee-void);
}

/* anchor targets clear the sticky header */
[id] {
  scroll-margin-top: 96px;
}

body,
#page-container,
.et_pb_pagebuilder_layout,
.et_pb_section {
  background-color: var(--ee-void);
}

body {
  color: var(--ee-text);
  font-family: var(--ee-font-body);
  font-size: var(--ee-body-desktop);
  line-height: 1.75;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body,
input,
textarea,
select,
button {
  font-family: var(--ee-font-body);
}

h1,
h2,
h3,
h4,
h5,
h6,
.et_pb_module_header {
  color: var(--ee-white);
  font-family: var(--ee-font-heading);
  font-weight: 700;
  /* eased from -0.035em: the tight tracking made Space Grotesk headings read
     heavy/bulky at display sizes. */
  letter-spacing: -0.018em;
}

h1 {
  font-size: clamp(var(--ee-h1-mobile), 4.6vw, var(--ee-h1-desktop));
  line-height: 1.05;
}

h2 {
  font-size: clamp(var(--ee-h2-mobile), 3.4vw, var(--ee-h2-desktop));
  line-height: 1.12;
}

h3 {
  font-size: clamp(var(--ee-h3-mobile), 2.4vw, var(--ee-h3-desktop));
  line-height: 1.18;
}

p,
.et_pb_text_inner,
.et_pb_blurb_description,
.et_pb_toggle_content,
.et_pb_tab_content,
.et_pb_code_inner {
  color: var(--ee-text);
}

p {
  margin-bottom: 1.15em;
}

p:last-child {
  margin-bottom: 0;
}

small,
.ee-small {
  font-size: var(--ee-small-desktop);
}

a {
  color: var(--ee-cyan);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: color var(--ee-transition-fast), opacity var(--ee-transition-fast);
}

a:hover,
a:focus {
  color: var(--ee-blue);
}

strong,
b {
  color: var(--ee-white);
  font-weight: 800;
}

::selection {
  background: var(--ee-cyan);
  color: var(--ee-void);
}

/* Visible keyboard focus */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.et_pb_button:focus-visible {
  outline: 3px solid var(--ee-cyan);
  outline-offset: 4px;
  border-radius: var(--ee-radius-sm);
}

/* ==========================================================================
   3. Divi layout foundations
   ========================================================================== */

.ee-row,
.et_pb_row.ee-row {
  width: var(--ee-row-width);
  max-width: var(--ee-row-max);
}

.ee-row-narrow,
.et_pb_row.ee-row-narrow {
  max-width: var(--ee-row-narrow);
}

.ee-row-heading,
.et_pb_row.ee-row-heading {
  max-width: var(--ee-row-heading);
  text-align: center;
}

.ee-row-heading .ee-body-copy,
.ee-row-heading .et_pb_text {
  margin-left: auto;
  margin-right: auto;
}

.ee-section,
.et_pb_section.ee-section {
  position: relative;
}

.ee-section-dark,
.et_pb_section.ee-section-dark {
  /* !important: Divi 5's default section preset paints #fff and outranks
     plain class rules in TB-template bodies — the design system owns
     section backgrounds. */
  background: var(--ee-void) !important;
}

.ee-section-navy,
.et_pb_section.ee-section-navy {
  background:
    radial-gradient(circle at 80% 10%, var(--ee-cyan-08), transparent 28%),
    var(--ee-navy) !important;
}

.ee-section-hero,
.et_pb_section.ee-section-hero {
  background:
    radial-gradient(circle at 15% 20%, var(--ee-blue-22), transparent 28%),
    radial-gradient(circle at 85% 18%, rgba(0, 212, 255, 0.14), transparent 24%),
    linear-gradient(135deg, var(--ee-void) 0%, var(--ee-navy) 52%, var(--ee-panel) 100%) !important;
  overflow: hidden;
  overflow: clip; /* not a scroll container: keeps wheel events scrolling the page */
  padding-top: var(--ee-section-hero-top);
  padding-bottom: var(--ee-section-hero-bottom);
}

.ee-section-hero::after,
.et_pb_section.ee-section-hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--ee-cyan-70), transparent);
  pointer-events: none;
}

.ee-section-standard,
.ee-section-dark,
.ee-section-navy,
.et_pb_section.ee-section-standard,
.et_pb_section.ee-section-dark,
.et_pb_section.ee-section-navy {
  padding-top: var(--ee-section-standard-y);
  padding-bottom: var(--ee-section-standard-y);
}

.ee-section-cta,
.et_pb_section.ee-section-cta {
  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.16), transparent 28%),
    linear-gradient(135deg, var(--ee-blue), var(--ee-cyan)) !important;
  color: #fff;
  padding-top: var(--ee-section-cta-y);
  padding-bottom: var(--ee-section-cta-y);
  overflow: hidden;
  overflow: clip;
}

.ee-section-cta h1,
.ee-section-cta h2,
.ee-section-cta h3,
.ee-section-cta h4,
.ee-section-cta h5,
.ee-section-cta h6,
.ee-section-cta p,
.ee-section-cta .et_pb_text_inner {
  color: #fff;
}

.ee-glow-line {
  display: block;
  height: 1px;
  width: 100%;
  background: linear-gradient(90deg, transparent, rgba(0, 212, 255, 0.75), transparent);
}

.ee-muted {
  color: var(--ee-muted) !important;
}

/* ==========================================================================
   4. Typography utility classes
   ========================================================================== */

.ee-kicker,
.et_pb_module.ee-kicker,
.ee-kicker .et_pb_text_inner,
.ee-kicker p {
  color: var(--ee-cyan) !important;
  font-family: var(--ee-font-mono);
  font-size: var(--ee-kicker-desktop);
  font-weight: 700;
  letter-spacing: 0.13em;
  line-height: 1.35;
  margin-bottom: 14px;
  text-transform: uppercase;
}

.ee-heading-main h1,
.ee-heading-main .et_pb_text_inner h1 {
  max-width: 980px;
  font-size: clamp(var(--ee-h1-mobile), 4.6vw, var(--ee-h1-desktop));
  line-height: 1.05;
}

.ee-heading-section h2,
.ee-heading-section .et_pb_text_inner h2 {
  font-size: clamp(var(--ee-h2-mobile), 3.4vw, var(--ee-h2-desktop));
  line-height: 1.12;
}

.ee-body-copy {
  max-width: 760px;
}

.ee-body-copy p,
.ee-body-copy .et_pb_text_inner {
  color: var(--ee-text);
  font-size: var(--ee-body-desktop);
  line-height: 1.75;
}

/* ==========================================================================
   5. Buttons
   ========================================================================== */

.ee-button-primary,
.ee-button-secondary,
.et_pb_button.ee-button-primary,
.et_pb_button.ee-button-secondary,
.ee-button-primary .et_pb_button,
.ee-button-secondary .et_pb_button {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 13px 24px !important;
  border-radius: var(--ee-radius-pill) !important;
  font-family: var(--ee-font-body);
  font-size: 16px;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  text-align: center;
  text-decoration: none !important;
  transition:
    transform var(--ee-transition-fast),
    box-shadow var(--ee-transition-fast),
    border-color var(--ee-transition-fast),
    background var(--ee-transition-fast),
    color var(--ee-transition-fast);
}

.ee-button-primary,
.et_pb_button.ee-button-primary,
.ee-button-primary .et_pb_button {
  background: linear-gradient(135deg, var(--ee-blue), var(--ee-cyan)) !important;
  border: 0 !important;
  color: #fff !important;
  box-shadow: var(--ee-shadow-button);
}

.ee-button-primary:hover,
.ee-button-primary:focus,
.et_pb_button.ee-button-primary:hover,
.et_pb_button.ee-button-primary:focus,
.ee-button-primary .et_pb_button:hover,
.ee-button-primary .et_pb_button:focus {
  background: linear-gradient(135deg, var(--ee-blue), var(--ee-cyan)) !important;
  color: #fff !important;
  transform: translateY(-2px);
  box-shadow: var(--ee-shadow-button-hover);
}

.ee-button-secondary,
.et_pb_button.ee-button-secondary,
.ee-button-secondary .et_pb_button {
  background: var(--ee-white-04) !important;
  border: 1px solid rgba(244, 247, 251, 0.24) !important;
  color: var(--ee-white) !important;
  box-shadow: none;
}

.ee-button-secondary:hover,
.ee-button-secondary:focus,
.et_pb_button.ee-button-secondary:hover,
.et_pb_button.ee-button-secondary:focus,
.ee-button-secondary .et_pb_button:hover,
.ee-button-secondary .et_pb_button:focus {
  background: var(--ee-white-08) !important;
  border-color: var(--ee-cyan-60) !important;
  color: var(--ee-white) !important;
  transform: translateY(-2px);
}

/* Remove Divi default button icon unless enabled intentionally */
.ee-button-primary .et_pb_button::after,
.ee-button-secondary .et_pb_button::after,
.et_pb_button.ee-button-primary::after,
.et_pb_button.ee-button-secondary::after {
  display: none !important;
}

/* Button group helper */
.ee-button-group {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}

/* ==========================================================================
   EECONS Cards - Divi Native Row Version
   IMPORTANT:
   Divi controls the row and column widths.
   These rules style cards only.
   ========================================================================== */

/* Card modules */
.ee-card,
.et_pb_module.ee-card,
.et_pb_blurb.ee-card,
.et_pb_text.ee-card {
  position: relative;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow: hidden;
  overflow: clip;
  background:
    radial-gradient(circle at top right, var(--ee-cyan-12), transparent 34%),
    linear-gradient(145deg, var(--ee-panel), var(--ee-navy));
  border: 1px solid var(--ee-text-14);
  border-radius: var(--ee-radius-lg);
  box-shadow: var(--ee-shadow-soft);
  padding: var(--ee-card-padding) !important;
  margin-bottom: 0 !important;
  transition:
    transform var(--ee-transition-standard),
    border-color var(--ee-transition-standard),
    box-shadow var(--ee-transition-standard);
}

.ee-card:hover,
.et_pb_module.ee-card:hover,
.et_pb_blurb.ee-card:hover,
.et_pb_text.ee-card:hover {
  transform: translateY(-4px);
  border-color: var(--ee-cyan-42);
  box-shadow: var(--ee-shadow-heavy);
}

/* Blurb cards: do not style the inner wrapper as another card */
.et_pb_blurb.ee-card .et_pb_blurb_content {
  max-width: none !important;
  width: 100% !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Feature card height */
.ee-feature-card {
  height: 100%;
  min-height: 100%;
}

/* Feature card headings */
.ee-feature-card h1,
.ee-feature-card h2,
.ee-feature-card h3,
.ee-feature-card h4,
.ee-feature-card h5,
.ee-feature-card h6,
.ee-feature-card .et_pb_module_header {
  color: var(--ee-white) !important;
  font-family: var(--ee-font-heading);
  font-size: 24px;
  line-height: 1.18;
  margin-bottom: 12px;
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
}

/* Feature card body text */
.ee-feature-card p,
.ee-feature-card li,
.ee-feature-card .et_pb_text_inner,
.ee-feature-card .et_pb_blurb_description {
  color: var(--ee-text) !important;
  font-family: var(--ee-font-body);
  font-size: 16px;
  line-height: 1.65;
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
}

/* Services card row spacing only. No layout control. */
.et_pb_row.ee-services-row {
  width: 90% !important;
  max-width: 1280px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Make all modules in the service card row equal height visually */
.et_pb_row.ee-services-row .et_pb_column {
  display: flex;
  flex-direction: column;
}

.et_pb_row.ee-services-row .et_pb_module.ee-card {
  flex: 1 1 auto;
}

/* Divi mobile/tablet should handle column stacking.
   This only adjusts spacing after Divi stacks columns. */
@media (max-width: 980px) {
  .et_pb_row.ee-services-row .et_pb_column {
    margin-bottom: 24px !important;
  }

  .et_pb_row.ee-services-row .et_pb_column:last-child {
    margin-bottom: 0 !important;
  }

  .ee-card,
  .et_pb_module.ee-card,
  .et_pb_blurb.ee-card,
  .et_pb_text.ee-card {
    padding: 26px !important;
  }
}

@media (max-width: 767px) {
  .ee-card,
  .et_pb_module.ee-card,
  .et_pb_blurb.ee-card,
  .et_pb_text.ee-card {
    padding: 22px !important;
  }
}

/* ==========================================================================
   7. Lists and technical accents
   ========================================================================== */

.ee-feature-list ul,
.ee-signal-card ul {
  margin: 0;
  padding-left: 1.2em;
}

.ee-feature-list li {
  margin-bottom: 12px;
  color: var(--ee-text);
}

.ee-feature-list li::marker {
  color: var(--ee-cyan);
}

.ee-signal-card ul {
  list-style: none;
  padding-left: 0;
}

.ee-signal-card li {
  padding: 12px 0;
  border-bottom: 1px solid var(--ee-text-12);
  color: var(--ee-text);
}

.ee-signal-card li:last-child {
  border-bottom: 0;
}

.ee-signal-card li::before {
  content: "↳";
  color: var(--ee-cyan);
  margin-right: 10px;
}

/* ==========================================================================
   8. Global header
   ========================================================================== */

.ee-global-header,
.et_pb_section.ee-global-header {
  position: sticky;
  top: 0;
  z-index: 9999;
  background: rgba(5, 7, 13, 0.82) !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--ee-text-12);
  padding-top: 12px;
  padding-bottom: 12px;
}

.admin-bar .ee-global-header {
  top: 32px;
}

/* Make the header ACTUALLY sticky. The Divi Theme Builder wraps the header in
   .et-l--header / .et_builder_inner_content, both only as tall as the header
   (~69-89px). position:sticky on the section could therefore only travel inside
   that tiny box and never pinned to the viewport (pre-existing defect). Moving
   sticky up to the WRAPPER — whose containing block .et-boc spans the whole
   page — lets it pin correctly on scroll. */
.et-l--header {
  position: sticky;
  top: 0;
  z-index: 10000;
}

.admin-bar .et-l--header {
  top: 32px;
}

.ee-header-row {
  display: flex;
  align-items: center;
}

/* The TB header logo module never received the .ee-header-logo class, so the
   image rendered uncapped (~98px tall on mobile → 360px header). Target the
   stable TB module id too. */
.ee-header-logo img,
.et_pb_image_0_tb_header img {
  display: block;
  max-height: 46px;
  width: auto;
}

.ee-main-menu,
.ee-main-menu .et_pb_menu__wrap {
  justify-content: center;
}

.ee-main-menu a,
.ee-main-menu .et-menu a,
.ee-main-menu .mobile_menu_bar::before {
  color: var(--ee-text) !important;
  /* eased from 18px/700: nine nav items in bold 18px wrapped to 3-4 rows. */
  font-size: 15px;
  font-weight: 600;
}

.ee-main-menu a:hover,
.ee-main-menu a:focus,
.ee-main-menu .current-menu-item > a,
.ee-main-menu .current-menu-ancestor > a {
  color: var(--ee-cyan) !important;
}

.ee-main-menu .et-menu > li {
  padding-left: 11px;
  padding-right: 11px;
}

.ee-main-menu .sub-menu {
  background: var(--ee-panel) !important;
  border: 1px solid var(--ee-text-14);
  border-radius: var(--ee-radius-md);
  box-shadow: var(--ee-shadow-soft);
  overflow: hidden;
}

.ee-main-menu .sub-menu a {
  color: var(--ee-text) !important;
}

.ee-main-menu .sub-menu a:hover {
  background: var(--ee-white-04);
  color: var(--ee-cyan) !important;
}

.ee-header-button .et_pb_button,
.et_pb_button.ee-header-button {
  min-height: 42px;
  padding: 12px 20px !important;
  font-size: 14px;
}

/* Header cart + search icons (menu module — now enabled on desktop too, so the
   Woo cart count + Divi search work in the desktop header). Unify the icon color
   (Divi rendered the search icon blue, cart steel) and make the open search
   field readable on the dark header (Divi defaults it to #333 dark text). */
.ee-main-menu .et_pb_menu__cart-button,
.ee-main-menu .et_pb_menu__search-button,
.ee-main-menu .et_pb_menu__icon {
  color: var(--ee-text) !important;
}

.ee-main-menu .et_pb_menu__cart-button:hover,
.ee-main-menu .et_pb_menu__search-button:hover,
.ee-main-menu .et_pb_menu__icon:hover {
  color: var(--ee-cyan) !important;
}

.ee-main-menu .et_pb_menu__search-input {
  color: var(--ee-white) !important;
  font-family: var(--ee-font-body);
}

.ee-main-menu .et_pb_menu__search-input::placeholder {
  color: var(--ee-muted) !important;
  opacity: 1;
}

/* Divi mobile menu */
.ee-main-menu .et_mobile_menu {
  background: var(--ee-panel) !important;
  border-top: 2px solid var(--ee-cyan);
  border-radius: 0 0 var(--ee-radius-md) var(--ee-radius-md);
  box-shadow: var(--ee-shadow-heavy);
}

.ee-main-menu .et_mobile_menu li a {
  color: var(--ee-text) !important;
  border-bottom: 1px solid var(--ee-text-10);
}

.ee-main-menu .et_mobile_menu li a:hover {
  background: var(--ee-white-04);
  color: var(--ee-cyan) !important;
}

/* ==========================================================================
   9. Global footer
   ========================================================================== */

.ee-footer-main,
.et_pb_section.ee-footer-main {
  background: var(--ee-void) !important;
  border-top: 1px solid var(--ee-text-12);
  padding-top: 72px;
  padding-bottom: 40px;
}

.ee-footer-main h1,
.ee-footer-main h2,
.ee-footer-main h3,
.ee-footer-main h4,
.ee-footer-main h5,
.ee-footer-main h6 {
  color: var(--ee-white);
}

/* Footer column headings are h3 (a11y: keeps the document outline h2->h3 with
   no level skip; was h4). Divi's global TB rule `.et-db #et-boc .et-l h3`
   paints 49px at higher specificity, so the size needs !important (cascade
   gotcha #7). h4 kept for safety on any straggler markup. */
.ee-footer-main h3,
.ee-footer-main h4 {
  margin-bottom: 16px;
  font-size: 18px !important;
  line-height: 1.3;
}

.ee-footer-main p,
.ee-footer-main li {
  color: var(--ee-muted);
  font-size: 15px;
  line-height: 1.7;
}

.ee-footer-main a {
  color: var(--ee-text);
  text-decoration: none;
}

.ee-footer-main a:hover,
.ee-footer-main a:focus {
  color: var(--ee-cyan);
}

.ee-footer-main ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ee-footer-main li {
  margin-bottom: 8px;
}

/* Additional-locations list: restore bullets (footer ul is list-style:none) */
.ee-footer-main ul.ee-footer-locations {
  list-style: disc;
  padding-left: 1.15em;
  margin-top: 6px;
}

.ee-footer-main ul.ee-footer-locations li {
  color: var(--ee-muted);
  margin-bottom: 4px;
}

.ee-footer-main ul.ee-footer-locations li::marker {
  color: var(--ee-cyan);
}

.ee-footer-legal,
.et_pb_section.ee-footer-legal {
  background: var(--ee-void) !important;
  border-top: 1px solid var(--ee-text-10);
  color: var(--ee-muted);
  font-size: 14px;
  padding-top: 22px;
  padding-bottom: 22px;
}

.ee-footer-legal p {
  color: var(--ee-muted);
  font-size: 14px;
}

/* ==========================================================================
   10. Home page sections
   ========================================================================== */

#home-hero {
  min-height: 76vh;
  display: flex;
  align-items: center;
}

.ee-home-hero .ee-hero-row {
  align-items: center;
}

.ee-hero-side-card {
  position: relative;
}

.ee-hero-side-card::before {
  content: "ACTIVE SYSTEMS";
  display: inline-block;
  margin-bottom: 18px;
  color: var(--ee-green);
  font-family: var(--ee-font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.ee-hero-side-card ul {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.ee-hero-side-card li {
  padding: 11px 0;
  border-bottom: 1px solid var(--ee-text-12);
  color: var(--ee-text);
}

.ee-hero-side-card li:last-child {
  border-bottom: 0;
}

.ee-cred-strip-section,
#home-credibility {
  background: var(--ee-navy) !important;
  border-top: 1px solid var(--ee-text-10);
  border-bottom: 1px solid var(--ee-text-10);
  padding-top: var(--ee-section-compact-y);
  padding-bottom: var(--ee-section-compact-y);
}

.ee-cred-strip .et_pb_module,
.ee-cred-strip p,
.ee-cred-strip .et_pb_text_inner {
  color: var(--ee-muted);
  font-family: var(--ee-font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.45;
  text-transform: uppercase;
}

.ee-home-services .ee-card,
#home-services .ee-card {
  height: 100%;
}

.ee-ptt911-spotlight,
#home-ptt911 {
  background:
    radial-gradient(circle at 80% 10%, var(--ee-cyan-08), transparent 28%),
    var(--ee-navy) !important;
}

.ee-web-systems-section,
#home-wordpress-software {
  background: var(--ee-void);
}

.ee-history-section,
#home-history {
  background:
    radial-gradient(circle at 20% 20%, rgba(229, 57, 70, 0.09), transparent 24%),
    radial-gradient(circle at 80% 10%, var(--ee-cyan-08), transparent 30%),
    linear-gradient(135deg, var(--ee-panel), var(--ee-navy)) !important;
}

.ee-home-final-cta,
#home-cta {
  text-align: center;
}

/* ==========================================================================
   11. PTT911 page
   ========================================================================== */

#ptt911-hero {
  background:
    radial-gradient(circle at 16% 18%, rgba(0, 212, 255, 0.20), transparent 28%),
    radial-gradient(circle at 80% 16%, rgba(19, 185, 129, 0.14), transparent 24%),
    linear-gradient(135deg, var(--ee-void) 0%, var(--ee-navy) 58%, var(--ee-panel) 100%) !important;
}

.ee-ptt911-intro,
#ptt911-what-it-is {
  background: var(--ee-void);
}

.ee-use-cases,
#ptt911-use-cases {
  background:
    radial-gradient(circle at 80% 10%, var(--ee-cyan-08), transparent 28%),
    var(--ee-navy) !important;
}

.ee-status-section,
#ptt911-status {
  background: var(--ee-void);
}

/* ==========================================================================
   12. Software Development page
   ========================================================================== */

#software-development-hero {
  background:
    radial-gradient(circle at 15% 25%, var(--ee-blue-22), transparent 30%),
    radial-gradient(circle at 90% 15%, rgba(229, 57, 70, 0.10), transparent 22%),
    linear-gradient(135deg, var(--ee-void), var(--ee-navy) 56%, var(--ee-panel)) !important;
}

.ee-software-services,
#software-development-services {
  background: var(--ee-void);
}

.ee-software-cta,
#software-development-cta {
  text-align: center;
}

/* ==========================================================================
   13. WordPress Development page
   ========================================================================== */

#wordpress-development-hero {
  background:
    radial-gradient(circle at 15% 20%, rgba(47, 128, 255, 0.20), transparent 30%),
    radial-gradient(circle at 85% 20%, rgba(0, 212, 255, 0.12), transparent 24%),
    linear-gradient(135deg, var(--ee-void), var(--ee-navy) 54%, var(--ee-panel)) !important;
}

.ee-wordpress-services,
#wordpress-development-services {
  background: var(--ee-void);
}

.ee-wordpress-cta {
  text-align: center;
}

/* ==========================================================================
   14. Products page and WooCommerce support
   ========================================================================== */

#products-hero {
  background:
    radial-gradient(circle at 15% 20%, rgba(19, 185, 129, 0.13), transparent 24%),
    radial-gradient(circle at 85% 18%, rgba(0, 212, 255, 0.13), transparent 24%),
    linear-gradient(135deg, var(--ee-void), var(--ee-navy), var(--ee-panel)) !important;
}

.ee-product-categories,
#products-featured {
  background: var(--ee-void);
}

.ee-product-card {
  border-color: var(--ee-cyan-18);
}

.ee-product-card::after {
  content: "EECONS PRODUCT";
  display: inline-block;
  margin-top: 18px;
  color: var(--ee-muted);
  font-family: var(--ee-font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

/* WooCommerce product cards */
.woocommerce ul.products li.product,
.et_pb_wc_related_products ul.products li.product,
.et_pb_wc_upsells ul.products li.product {
  background:
    radial-gradient(circle at top right, var(--ee-cyan-08), transparent 34%),
    linear-gradient(145deg, var(--ee-panel), var(--ee-navy));
  border: 1px solid var(--ee-text-14);
  border-radius: var(--ee-radius-lg);
  box-shadow: var(--ee-shadow-soft);
  padding: 18px !important;
  overflow: hidden;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2,
.woocommerce div.product .product_title {
  color: var(--ee-white);
  font-family: var(--ee-font-heading);
}

.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price {
  color: var(--ee-cyan) !important;
  font-weight: 800;
}

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce #payment #place_order,
.woocommerce-page #payment #place_order {
  background: linear-gradient(135deg, var(--ee-blue), var(--ee-cyan)) !important;
  border: 0 !important;
  border-radius: var(--ee-radius-pill) !important;
  color: #fff !important;
  font-family: var(--ee-font-body);
  font-weight: 800 !important;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce #payment #place_order:hover,
.woocommerce-page #payment #place_order:hover {
  background: linear-gradient(135deg, var(--ee-blue), var(--ee-cyan)) !important;
  color: #fff !important;
  box-shadow: var(--ee-shadow-button);
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  background: var(--ee-panel) !important;
  border-top-color: var(--ee-cyan) !important;
  color: var(--ee-text) !important;
  border-radius: var(--ee-radius-md);
}

.woocommerce-message a,
.woocommerce-info a,
.woocommerce-error a {
  color: var(--ee-cyan) !important;
}

/* ==========================================================================
   15. Managed Technology Services page
   ========================================================================== */

#managed-technology-services-hero {
  background:
    radial-gradient(circle at 15% 20%, rgba(47, 128, 255, 0.18), transparent 28%),
    radial-gradient(circle at 86% 22%, rgba(19, 185, 129, 0.10), transparent 24%),
    linear-gradient(135deg, var(--ee-void), var(--ee-navy), var(--ee-panel)) !important;
}

.ee-managed-services-grid,
#managed-technology-services-list {
  background: var(--ee-void);
}

.ee-privacy-position,
#managed-privacy {
  background:
    radial-gradient(circle at 80% 10%, var(--ee-cyan-08), transparent 28%),
    var(--ee-navy) !important;
}

/* ==========================================================================
   16. About page
   ========================================================================== */

#about-hero {
  background:
    radial-gradient(circle at 12% 18%, rgba(229, 57, 70, 0.08), transparent 22%),
    radial-gradient(circle at 88% 18%, rgba(0, 212, 255, 0.13), transparent 26%),
    linear-gradient(135deg, var(--ee-void), var(--ee-navy), var(--ee-panel)) !important;
}

.ee-about-history,
#about-history {
  background: var(--ee-void);
}

.ee-about-now,
#about-current-direction {
  background:
    radial-gradient(circle at 80% 10%, var(--ee-cyan-08), transparent 28%),
    var(--ee-navy) !important;
}

.ee-about-team,
#about-team {
  background: var(--ee-void);
}

/* ==========================================================================
   17. Contact page and forms
   ========================================================================== */

#contact-hero {
  background:
    radial-gradient(circle at 15% 20%, var(--ee-blue-22), transparent 28%),
    radial-gradient(circle at 88% 16%, var(--ee-cyan-12), transparent 24%),
    linear-gradient(135deg, var(--ee-void), var(--ee-navy), var(--ee-panel)) !important;
}

.ee-contact-details,
#contact-details {
  background: var(--ee-void);
}

.ee-contact-card a {
  color: var(--ee-cyan);
  font-weight: 700;
}

.ee-contact-card a:hover {
  color: var(--ee-blue);
}

.ee-contact-form-section,
#contact-form {
  background:
    radial-gradient(circle at 80% 10%, var(--ee-cyan-08), transparent 28%),
    var(--ee-navy) !important;
}

.ee-contact-form-section label,
.ee-contact-form-section .et_pb_contact_field_options_title {
  color: var(--ee-white) !important;
  font-weight: 700;
}

.ee-contact-form-section input,
.ee-contact-form-section textarea,
.ee-contact-form-section select,
.ee-contact-form-section .input,
.ee-contact-form-section .et_pb_contact_field input,
.ee-contact-form-section .et_pb_contact_field textarea {
  width: 100%;
  background: var(--ee-white-04) !important;
  border: 1px solid var(--ee-text-18) !important;
  border-radius: 14px !important;
  color: var(--ee-white) !important;
  font-family: var(--ee-font-body);
  font-size: 16px;
  line-height: 1.45;
  padding: 14px 16px !important;
}

.ee-contact-form-section textarea {
  min-height: 150px;
}

.ee-contact-form-section input::placeholder,
.ee-contact-form-section textarea::placeholder {
  color: var(--ee-muted) !important;
  opacity: 1;
}

.ee-contact-form-section input:focus,
.ee-contact-form-section textarea:focus,
.ee-contact-form-section select:focus,
.ee-contact-form-section .input:focus {
  border-color: var(--ee-cyan) !important;
  box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.14);
  outline: none;
}

/* Native select + dropdown option list must be readable on the dark form.
   Translucent backgrounds leave the browser's option popup white-on-white,
   so selects get a SOLID panel background, options get explicit colors, and
   color-scheme:dark makes native widgets render their dark variants. */
.ee-contact-form-section {
  color-scheme: dark;
}

.ee-contact-form-section select,
.ee-contact-form-section .et_pb_contact_field select {
  background: var(--ee-panel) !important;
  color: var(--ee-white) !important;
}

.ee-contact-form-section select option {
  background: var(--ee-panel);
  color: var(--ee-white);
}

.ee-contact-form-section .et_contact_bottom_container {
  float: none;
  display: flex;
  justify-content: flex-start;
  margin-top: 18px;
}

.ee-contact-form-section .et_pb_contact_submit {
  background: linear-gradient(135deg, var(--ee-blue), var(--ee-cyan)) !important;
  border: 0 !important;
  border-radius: var(--ee-radius-pill) !important;
  color: #fff !important;
  font-weight: 800 !important;
  padding: 13px 24px !important;
}

/* ==========================================================================
   18. Support page
   ========================================================================== */

#support-hero {
  background:
    radial-gradient(circle at 15% 20%, rgba(0, 212, 255, 0.16), transparent 26%),
    radial-gradient(circle at 88% 16%, rgba(229, 57, 70, 0.09), transparent 24%),
    linear-gradient(135deg, var(--ee-void), var(--ee-navy), var(--ee-panel)) !important;
}

.ee-support-checklist,
#support-checklist {
  background: var(--ee-void);
}

/* ==========================================================================
   19. Legal pages
   ========================================================================== */

.ee-legal-page,
#refunds-policy {
  background: var(--ee-void);
}

.ee-legal-page .ee-row,
.ee-legal-page .et_pb_row {
  max-width: var(--ee-row-narrow);
}

.ee-legal-page h1,
.ee-legal-page h2,
.ee-legal-page h3 {
  color: var(--ee-white);
}

.ee-legal-page p,
.ee-legal-page li {
  color: var(--ee-text);
  font-size: 17px;
  line-height: 1.8;
}

.ee-legal-page a {
  color: var(--ee-cyan);
  font-weight: 700;
}

/* ==========================================================================
   20. Divi module refinements
   ========================================================================== */

.et_pb_blurb.ee-card .et_pb_blurb_content {
  max-width: none;
}

.et_pb_blurb.ee-card .et_pb_main_blurb_image {
  margin-bottom: 18px;
}

.et_pb_blurb.ee-card .et-pb-icon {
  color: var(--ee-cyan);
}

.et_pb_toggle {
  background: var(--ee-panel);
  border: 1px solid var(--ee-text-14);
  border-radius: var(--ee-radius-md);
  overflow: hidden;
}

.et_pb_toggle_title {
  color: var(--ee-white);
  font-family: var(--ee-font-heading);
  font-weight: 700;
}

.et_pb_toggle_content {
  color: var(--ee-text);
}

.et_pb_tabs {
  border: 1px solid var(--ee-text-14);
  border-radius: var(--ee-radius-lg);
  overflow: hidden;
  background: var(--ee-panel);
}

.et_pb_tabs_controls {
  background: var(--ee-navy);
}

.et_pb_tabs_controls li {
  border-right: 1px solid var(--ee-text-10);
}

.et_pb_tabs_controls li a {
  color: var(--ee-text);
  font-weight: 700;
}

.et_pb_tabs_controls li.et_pb_tab_active a {
  color: var(--ee-cyan);
}

.et_pb_pricing_table {
  background: var(--ee-panel);
  border: 1px solid var(--ee-text-14);
  border-radius: var(--ee-radius-lg);
  overflow: hidden;
  box-shadow: var(--ee-shadow-soft);
}

.et_pb_pricing_heading {
  background: var(--ee-navy);
}

.et_pb_pricing_title {
  color: var(--ee-white);
}

.et_pb_sum {
  color: var(--ee-cyan);
}

/* ==========================================================================
   21. Tables
   ========================================================================== */

.ee-table,
.entry-content table {
  width: 100%;
  border-collapse: collapse;
  background: var(--ee-panel);
  border: 1px solid var(--ee-text-14);
  border-radius: var(--ee-radius-md);
  overflow: hidden;
}

.ee-table th,
.ee-table td,
.entry-content table th,
.entry-content table td {
  border: 1px solid var(--ee-text-10);
  color: var(--ee-text);
  padding: 14px 16px;
}

.ee-table th,
.entry-content table th {
  background: var(--ee-navy);
  color: var(--ee-white);
  font-weight: 800;
}

/* ==========================================================================
   22. Images and media
   ========================================================================== */

.ee-rounded-image img,
img.ee-rounded-image {
  border-radius: var(--ee-radius-lg);
}

.ee-image-shadow img,
img.ee-image-shadow {
  box-shadow: var(--ee-shadow-soft);
}

.ee-image-border img,
img.ee-image-border {
  border: 1px solid var(--ee-text-14);
}

/* ==========================================================================
   23. Utility classes
   ========================================================================== */

.ee-text-center {
  text-align: center;
}

.ee-text-left {
  text-align: left;
}

.ee-max-760 {
  max-width: 760px;
}

.ee-max-860 {
  max-width: 860px;
}

.ee-max-920 {
  max-width: 920px;
}

.ee-margin-auto {
  margin-left: auto;
  margin-right: auto;
}

.ee-no-margin-bottom,
.ee-no-margin-bottom p {
  margin-bottom: 0 !important;
}

.ee-border-top {
  border-top: 1px solid var(--ee-text-12);
}

.ee-border-bottom {
  border-bottom: 1px solid var(--ee-text-12);
}

.ee-cyan-text {
  color: var(--ee-cyan) !important;
}

.ee-green-text {
  color: var(--ee-green) !important;
}

.ee-red-text {
  color: var(--ee-red) !important;
}

.ee-white-text {
  color: var(--ee-white) !important;
}

.ee-muted-text {
  color: var(--ee-muted) !important;
}

/* ==========================================================================
   24. Responsive behavior
   ========================================================================== */

@media (max-width: 980px) {
  :root {
    --ee-section-hero-top: 95px;
    --ee-section-hero-bottom: 80px;
    --ee-section-standard-y: 78px;
    --ee-section-cta-y: 76px;
    --ee-card-padding: 26px;
  }

  body {
    font-size: var(--ee-body-tablet);
  }

  .ee-body-copy p,
  .ee-body-copy .et_pb_text_inner {
    font-size: var(--ee-body-tablet);
  }

  .ee-kicker,
  .ee-kicker .et_pb_text_inner,
  .ee-kicker p {
    font-size: var(--ee-kicker-tablet);
  }

  /* Hide the two header CTA buttons on tablet/mobile. The bare .ee-header-button
     rule lost to .et_pb_button.ee-button-primary{display:inline-flex!important}
     (higher specificity), so the buttons kept showing and bloated the header.
     Match the module (3 classes) and drop the wrappers outright. */
  .et_pb_button.ee-button-primary.ee-header-button,
  .et_pb_button.ee-button-secondary.ee-header-button,
  .et_pb_button_0_tb_header_wrapper,
  .et_pb_button_1_tb_header_wrapper {
    display: none !important;
  }

  .ee-header-logo img,
  .et_pb_image_0_tb_header img {
    max-height: 40px;
  }

  .ee-hero-row,
  .ee-split-row {
    display: block;
  }

  .ee-hero-row .et_pb_column,
  .ee-split-row .et_pb_column {
    width: 100% !important;
    margin-right: 0 !important;
    margin-bottom: 32px;
  }

  .ee-hero-row .et_pb_column:last-child,
  .ee-split-row .et_pb_column:last-child {
    margin-bottom: 0;
  }

  .admin-bar .ee-global-header {
    top: 32px;
  }
}

@media (max-width: 782px) {
  .admin-bar .ee-global-header,
  .admin-bar .et-l--header {
    top: 46px;
  }
}

@media (max-width: 767px) {
  :root {
    --ee-section-hero-top: 76px;
    --ee-section-hero-bottom: 64px;
    --ee-section-standard-y: 64px;
    --ee-section-cta-y: 62px;
    --ee-card-padding: 22px;
  }

  body {
    font-size: var(--ee-body-mobile);
  }

  h1 {
    font-size: var(--ee-h1-mobile);
  }

  h2 {
    font-size: var(--ee-h2-mobile);
  }

  h3 {
    font-size: var(--ee-h3-mobile);
  }

  .ee-heading-main h1,
  .ee-heading-main .et_pb_text_inner h1 {
    font-size: var(--ee-h1-mobile);
  }

  .ee-body-copy p,
  .ee-body-copy .et_pb_text_inner {
    font-size: var(--ee-body-mobile);
  }

  .ee-kicker,
  .ee-kicker .et_pb_text_inner,
  .ee-kicker p {
    font-size: var(--ee-kicker-mobile);
  }

  .ee-button-group {
    align-items: stretch;
    flex-direction: column;
  }

  .ee-button-primary,
  .ee-button-secondary,
  .et_pb_button.ee-button-primary,
  .et_pb_button.ee-button-secondary,
  .ee-button-primary .et_pb_button,
  .ee-button-secondary .et_pb_button {
    width: 100%;
  }

  .ee-cred-strip .et_pb_column {
    margin-bottom: 14px;
  }

  .ee-footer-main {
    padding-top: 56px;
  }

  .ee-footer-main .et_pb_column {
    margin-bottom: 30px;
  }
}

@media (max-width: 480px) {
  .ee-row,
  .et_pb_row.ee-row {
    width: 92%;
  }

  .ee-card,
  .et_pb_module.ee-card,
  .ee-card.et_pb_blurb {
    border-radius: var(--ee-radius-md);
  }

  .ee-contact-form-section input,
  .ee-contact-form-section textarea,
  .ee-contact-form-section select,
  .ee-contact-form-section .input {
    font-size: 16px;
  }
}

/* ==========================================================================
   25. Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
  }

  .ee-card:hover,
  .et_pb_module.ee-card:hover,
  .ee-card.et_pb_blurb:hover,
  .ee-button-primary:hover,
  .ee-button-secondary:hover {
    transform: none !important;
  }
}

/* ==========================================================================
   Home services card title tuning
   Reduces heading size so long titles do not wrap awkwardly
   ========================================================================== */

#home-services .ee-feature-card h3,
#home-services .ee-feature-card .et_pb_module_header {
  font-size: 22px !important;
  line-height: 1.2 !important;
  letter-spacing: -0.02em !important;
}

#home-services .ee-card {
  padding: 28px !important;
}

@media (max-width: 980px) {
  #home-services .ee-feature-card h3,
  #home-services .ee-feature-card .et_pb_module_header {
    font-size: 21px !important;
  }

  #home-services .ee-card {
    padding: 26px !important;
  }
}

@media (max-width: 767px) {
  #home-services .ee-feature-card h3,
  #home-services .ee-feature-card .et_pb_module_header {
    font-size: 20px !important;
    line-height: 1.22 !important;
  }

  #home-services .ee-card {
    padding: 22px !important;
  }
}


/* ==========================================================================
   26. Motion & interactivity (2026-07-16 creative pass)
   JS contract: assets/js/eecons-motion.js adds .ee-anim to <html>, tags
   reveal targets with .ee-reveal + --ee-delay, flips .ee-inview on scroll,
   then strips the classes so original hover behavior returns untouched.
   Content is NEVER hidden without JS. §25 stays the global kill-switch.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {

  /* ---- scroll reveal ---------------------------------------------------- */
  /* Bidirectional reveal: uses the independent `translate` property (NOT
     transform) so a card's :hover translateY composes instead of fighting the
     reveal. The JS keeps observing and toggles .ee-inview on/off, so elements
     slide in AND back out as they pass through the viewport — the animation
     recurs on scroll up and down instead of firing once. Transition lives on the
     base state so both directions animate. */
  html.ee-anim .ee-reveal {
    opacity: 0;
    translate: 0 26px;
    transition:
      opacity 0.6s cubic-bezier(0.22, 0.61, 0.36, 1),
      translate 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
    transition-delay: var(--ee-delay, 0ms);
  }

  html.ee-anim .ee-reveal.ee-inview {
    opacity: 1;
    translate: 0 0;
  }

  /* ---- ambient hero motion ---------------------------------------------- */
  .ee-section-hero::before,
  .et_pb_section.ee-section-hero::before {
    content: "";
    position: absolute;
    inset: -18% -8% 0;
    background:
      radial-gradient(circle at 22% 28%, var(--ee-blue-22), transparent 32%),
      radial-gradient(circle at 78% 18%, var(--ee-cyan-12), transparent 30%);
    animation: ee-drift 19s ease-in-out infinite alternate;
    pointer-events: none;
  }

  .ee-section-hero::after,
  .et_pb_section.ee-section-hero::after {
    animation: ee-linepulse 5s ease-in-out infinite;
  }

  .ee-hero-side-card::before {
    animation: ee-pulse 2.6s ease-in-out infinite;
  }

  /* ---- card sheen sweep on hover ----------------------------------------
     (hero side card excluded: its ::before is the ACTIVE SYSTEMS label) */
  .ee-card:not(.ee-hero-side-card)::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -45%;
    width: 40%;
    background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.07), transparent);
    transform: skewX(-18deg);
    opacity: 0;
    pointer-events: none;
  }

  .ee-card:not(.ee-hero-side-card):hover::before {
    animation: ee-sheen 0.9s ease;
  }

  /* ---- primary button gradient slide ------------------------------------ */
  .ee-button-primary,
  .et_pb_button.ee-button-primary,
  .ee-button-primary .et_pb_button {
    background: linear-gradient(135deg, var(--ee-blue), var(--ee-cyan), var(--ee-blue)) !important;
    background-size: 220% 100% !important;
    background-position: 0% 0 !important;
    transition:
      transform var(--ee-transition-fast),
      box-shadow var(--ee-transition-fast),
      background-position 0.45s ease,
      color var(--ee-transition-fast);
  }

  .ee-button-primary:hover,
  .ee-button-primary:focus,
  .et_pb_button.ee-button-primary:hover,
  .et_pb_button.ee-button-primary:focus,
  .ee-button-primary .et_pb_button:hover,
  .ee-button-primary .et_pb_button:focus {
    background: linear-gradient(135deg, var(--ee-blue), var(--ee-cyan), var(--ee-blue)) !important;
    background-size: 220% 100% !important;
    background-position: 92% 0 !important;
  }

  /* ---- pricing tables (MCP Bridge landing) ------------------------------ */
  .et_pb_pricing_table {
    transition:
      transform var(--ee-transition-standard),
      border-color var(--ee-transition-standard),
      box-shadow var(--ee-transition-standard);
  }

  .et_pb_pricing_table:hover {
    transform: translateY(-6px);
    border-color: var(--ee-cyan-42);
    box-shadow: var(--ee-shadow-heavy);
  }

  .et_pb_featured_table {
    border-color: var(--ee-cyan-42);
    animation: ee-glow 3.6s ease-in-out infinite;
  }

  /* ---- keyframes --------------------------------------------------------- */
  @keyframes ee-drift {
    from { transform: translate3d(-1.5%, -1%, 0) scale(1); }
    to   { transform: translate3d(1.5%, 1.5%, 0) scale(1.05); }
  }

  @keyframes ee-linepulse {
    0%, 100% { opacity: 0.35; }
    50%      { opacity: 1; }
  }

  @keyframes ee-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.45; }
  }

  @keyframes ee-sheen {
    from { transform: translateX(0) skewX(-18deg); opacity: 0; }
    15%  { opacity: 1; }
    to   { transform: translateX(420%) skewX(-18deg); opacity: 0; }
  }

  @keyframes ee-glow {
    0%, 100% { box-shadow: 0 0 0 1px var(--ee-cyan-18), var(--ee-shadow-soft); }
    50%      { box-shadow: 0 0 34px rgba(0, 212, 255, 0.20), var(--ee-shadow-soft); }
  }
}

/* ==========================================================================
   27. Responsive repairs (2026-07-16)
   ========================================================================== */

/* Divi 5 pricing-tables module renders as flex-wrap:nowrap, which crushes
   five tables into single-letter wraps on narrow screens (same failure class
   as the retired card grid). Let the MODULE-INTERNAL flex wrap: 2-up under
   980px, 1-up under 640px. This does not touch Divi row/column layout. */
@media (max-width: 980px) {
  .et_pb_pricing_tables {
    flex-wrap: wrap !important;
  }

  .et_pb_pricing_table {
    flex: 1 1 46% !important;
    min-width: 240px;
    margin-bottom: 20px;
  }
}

@media (max-width: 640px) {
  .et_pb_pricing_table {
    flex-basis: 100% !important;
  }
}

/* ==========================================================================
   28. WooCommerce product surfaces (Option 1 / Option 3 template bodies)
   The buy section is hero-branded and the tabs/related sections are dark;
   these rules give the stock Woo markup readable colors on those bands.
   ========================================================================== */

.ee-product-buy,
.ee-product-more,
.ee-product-content {
  color-scheme: dark;
}

.ee-product-buy p,
.ee-product-buy li,
.ee-product-buy td,
.ee-product-buy th,
.ee-product-buy label,
.ee-product-buy .product_meta,
.ee-product-buy .posted_in,
.ee-product-buy .woocommerce-breadcrumb {
  color: var(--ee-text);
}

.ee-product-buy h1,
.ee-product-buy .product_title {
  color: var(--ee-white);
}

.ee-product-buy a:not(.button) {
  color: var(--ee-cyan);
}

.ee-product-buy a:not(.button):hover {
  color: var(--ee-blue);
}

.ee-product-buy table.variations th,
.ee-product-buy table.variations td {
  border: 0;
  color: var(--ee-text);
}

.ee-product-buy select,
.ee-product-buy input.qty,
.ee-product-buy input[type="number"] {
  background: var(--ee-panel) !important;
  color: var(--ee-white) !important;
  border: 1px solid var(--ee-text-18) !important;
  border-radius: 10px;
  padding: 8px 12px;
}

.ee-product-buy select option {
  background: var(--ee-panel);
  color: var(--ee-white);
}

.ee-product-buy .woocommerce-variation-price .price,
.ee-product-buy .price {
  color: var(--ee-cyan) !important;
}

.ee-product-buy .woocommerce-product-gallery img {
  border: 1px solid var(--ee-text-14);
  border-radius: var(--ee-radius-lg);
}

.ee-product-buy .reset_variations {
  color: var(--ee-muted);
}

.ee-product-more p,
.ee-product-more li,
.ee-product-more td,
.ee-product-more th,
.ee-product-more .woocommerce-Tabs-panel {
  color: var(--ee-text);
}

.ee-product-more h2,
.ee-product-more h3 {
  color: var(--ee-white);
}

.ee-product-more .woocommerce-tabs ul.tabs li a {
  color: var(--ee-text);
}

.ee-product-more .woocommerce-tabs ul.tabs li.active a {
  color: var(--ee-cyan);
}

.ee-product-more table td,
.ee-product-more table th {
  border-color: var(--ee-text-10);
}

/* ==========================================================================
   29. Contrast hardening (WCAG AA audit, 2026-07-16)
   Findings: white text fails on the cyan end of the brand gradient (1.65:1),
   Divi preset colors leak yellow/dark text into CTA bands and accordions,
   and the Woo sale badge was white-on-orange (2.39:1).
   ========================================================================== */

/* Primary buttons: VOID text on the blue→cyan gradient — passes AA at both
   gradient ends (blue 5.1:1, cyan 11:1); white failed at 1.65 on cyan. */
.ee-button-primary,
.et_pb_button.ee-button-primary,
.ee-button-primary .et_pb_button,
.ee-button-primary:hover,
.ee-button-primary:focus,
.et_pb_button.ee-button-primary:hover,
.et_pb_button.ee-button-primary:focus,
.ee-button-primary .et_pb_button:hover,
.ee-button-primary .et_pb_button:focus {
  color: var(--ee-void) !important;
}

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce #payment #place_order,
.woocommerce-page #payment #place_order,
.ee-contact-form-section .et_pb_contact_submit {
  color: var(--ee-void) !important;
}

.et_pb_pricing_table .et_pb_button {
  background: linear-gradient(135deg, var(--ee-blue), var(--ee-cyan)) !important;
  border: 0 !important;
  color: var(--ee-void) !important;
  font-weight: 800 !important;
}

/* CTA gradient bands: dark text (white failed on the cyan end), and any
   button inside the band becomes solid void with white text. */
.ee-section-cta h1,
.ee-section-cta h2,
.ee-section-cta h3,
.ee-section-cta h4,
.ee-section-cta h5,
.ee-section-cta h6,
.ee-section-cta p,
.ee-section-cta .et_pb_text_inner {
  color: var(--ee-void);
}

.ee-section-cta .et_pb_button,
.ee-section-cta .ee-button-primary,
.ee-section-cta .ee-button-secondary {
  background: var(--ee-void) !important;
  border: 0 !important;
  color: var(--ee-white) !important;
}

.ee-section-cta .et_pb_button:hover,
.ee-section-cta .et_pb_button:focus {
  background: var(--ee-navy) !important;
  color: var(--ee-white) !important;
}

/* Accordion / toggle titles: Divi preset dark text leaked onto dark panels */
.et_pb_toggle_title,
.et_pb_accordion .et_pb_toggle_title,
.et_pb_toggle h5.et_pb_toggle_title {
  color: var(--ee-white) !important;
}

/* Woo sale badge: brand Alert Red with white text (4.6:1) */
#page-container .woocommerce span.onsale,
.woocommerce span.onsale {
  /* deepened from --ee-red: white text needs ~4.5:1 at any badge size */
  background: #C4293B !important;
  color: #fff !important;
  border-radius: var(--ee-radius-pill);
  font-weight: 800;
}

/* Pricing table headers: navy regardless of featured styling (white-on-azure
   failed AA at 2.75; white-on-navy is 15:1). Featured emphasis comes from the
   §26 glow instead. */
#page-container .et_pb_pricing_table .et_pb_pricing_heading {
  background: var(--ee-navy) !important;
}

/* Specificity boost: Divi-generated per-module CSS (gcid variables, VB-set
   colors) outranks plain class rules even with !important (same specificity,
   later load). The #page-container prefix settles it. */
#page-container .ee-button-primary,
#page-container .et_pb_button.ee-button-primary,
#page-container .ee-button-primary .et_pb_button,
#page-container .ee-button-primary:hover,
#page-container .et_pb_button.ee-button-primary:hover,
#page-container .ee-button-primary .et_pb_button:hover {
  color: var(--ee-void) !important;
}

#page-container .ee-section-cta h1,
#page-container .ee-section-cta h2,
#page-container .ee-section-cta h3,
#page-container .ee-section-cta p,
#page-container .ee-section-cta .et_pb_text_inner,
#page-container .ee-section-cta .et_pb_text_inner span,
#page-container .ee-section-cta p span {
  /* span selectors: VB-era markup carries inline style="color:#ffffff" spans;
     !important CSS is the only thing that overrides inline styles */
  color: var(--ee-void) !important;
}

#page-container .ee-section-cta .et_pb_button {
  background: var(--ee-void) !important;
  color: var(--ee-white) !important;
}

/* NOTE (2026-07-17): the old "SCBD light-themed description → dark text"
   block was REMOVED here. Product descriptions are now authored as on-brand
   dark HTML (the .ee-pd contract) and styled by §36; forcing dark text made the
   new light-on-dark copy invisible. Root-cause fix, not an override. */

/* ==========================================================================
   30. Heading scale normalization (2026-07-16)
   The site had THREE competing heading-size sources: Divi's global
   h1{68px}/h2 rules (theme customizer), per-module baked sizes (e.g. the Home
   hero H1 pinned to 60/44/36 on .et_pb_text_1), and the child-theme clamp.
   Result: hero + product titles rendered 60-68px and section H2s 58px —
   too big and bulky, wrapping in narrow columns. This block makes ONE fluid
   clamp authoritative for every H1/H2. The #page-container id prefix wins the
   specificity war against Divi's module CSS (see divi5-css-cascade-gotchas);
   H3 and below are intentionally left to their existing rules (cards etc.).
   ========================================================================== */

#page-container h1,
#page-container h1.et_pb_contact_main_title,
#page-container .et_pb_title_container h1,
#page-container .ee-heading-main h1,
#page-container .ee-heading-main .et_pb_text_inner h1,
#page-container .woocommerce div.product .product_title {
  font-size: clamp(var(--ee-h1-mobile), 4.6vw, var(--ee-h1-desktop)) !important;
  line-height: 1.05 !important;
  letter-spacing: -0.018em !important;
}

#page-container h2,
#page-container .ee-heading-section h2,
#page-container .ee-heading-section .et_pb_text_inner h2 {
  font-size: clamp(var(--ee-h2-mobile), 3.4vw, var(--ee-h2-desktop)) !important;
  line-height: 1.12 !important;
  letter-spacing: -0.016em !important;
}

/* Exception: WooCommerce loop product-card titles are <h2>. The 40px section
   scale crushed "SEO Control Bridge for Divi - Pro" to 6 lines in a 186px card.
   Give card titles a card-appropriate size (higher specificity beats the rule
   above). */
#page-container .woocommerce ul.products li.product h2,
#page-container .woocommerce ul.products li.product .woocommerce-loop-product__title,
#page-container .et_pb_wc_related_products ul.products li.product h2,
#page-container .et_pb_wc_upsells ul.products li.product h2 {
  font-size: 18px !important;
  line-height: 1.3 !important;
  letter-spacing: -0.01em !important;
}

/* ==========================================================================
   31. Header layout compaction (desktop, 2026-07-16)
   The TB header row is three EQUAL 320px columns [logo | menu | buttons], so
   the 9-item nav (≈997px on one line) was crushed into a 320px slot and wrapped
   to FOUR rows → a 149px-tall header. The row is a Divi flex row, so we can
   rebalance widths WITHOUT touching the header structure or content: logo and
   buttons shrink to their content, the menu column takes the rest, and the two
   CTA buttons sit side-by-side instead of stacked. Nav → 2 rows, header ≈ 89px.
   Desktop only; ≤980px keeps the hamburger + hidden buttons from §24. */
@media (min-width: 981px) {
  #page-container .ee-header-row.et_flex_row {
    align-items: center !important;
    flex-wrap: nowrap !important;
    max-width: 1700px !important;
  }

  #page-container .et_pb_column_0_tb_header,
  #page-container .et_pb_column_2_tb_header,
  #page-container .ee-header-utils {
    flex: 0 0 auto !important;
    width: auto !important;
    margin: 0 !important;
  }

  #page-container .et_pb_column_1_tb_header {
    flex: 1 1 auto !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
  }

  /* CTA buttons: horizontal, vertically centered */
  #page-container .et_pb_column_2_tb_header {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
  }

  #page-container .et_pb_column_2_tb_header .et_pb_button_module_wrapper {
    margin: 0 !important;
  }

  /* Compact the header CTAs so the button column doesn't starve the menu
     (it ballooned to 382px on the product page → nav wrapped to 3 rows). */
  #page-container .et_pb_column_2_tb_header .et_pb_button {
    padding: 10px 16px !important;
    min-height: 38px !important;
    font-size: 13px !important;
  }

  #page-container .ee-main-menu .et-menu {
    justify-content: center;
  }
}

/* Tablet/mobile (added 2026-07-17): logo (left) · hamburger (dead-center) ·
   cart+search (right) on one compact row, and Divi's mobile dropdown turned into
   a full-width, scrollable sheet under the header.
   ROOT CAUSE this fixes: the header's three real columns are narrow/reordered
   here, so Divi's dropdown (position:absolute, width:100% of the menu MODULE)
   rendered ~32px wide, shoved to one side, with items spilling off-screen right
   and NO way to scroll a long list. Fix = (a) give the two SIDE zones equal
   flex-grow so the hamburger column lands at true viewport center, and
   (b) re-anchor the dropdown to the sticky header SECTION by making every
   intermediate positioned ancestor `static`, so it spans full width, sits right
   below the header, and scrolls (max-height + overflow-y). No magic offsets. */
@media (max-width: 980px) {
  #page-container .ee-header-row.et_flex_row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
  }

  /* logo pinned left, in an equal-grow zone */
  #page-container .et_pb_column_0_tb_header {
    order: 1;
    flex: 1 1 0 !important;
    width: auto !important;
    margin: 0 !important;
    justify-content: flex-start !important;
    align-items: center !important;
  }

  /* hamburger column: natural width + centered content → sits at viewport center
     between the two equal-grow side zones */
  #page-container .et_pb_column_1_tb_header {
    order: 2;
    flex: 0 0 auto !important;
    width: auto !important;
    margin: 0 !important;
    justify-content: center !important;
  }

  #page-container .et_pb_column_1_tb_header .et_pb_menu__wrap,
  #page-container .et_pb_column_1_tb_header .et_mobile_nav_menu {
    justify-content: center !important;
    text-align: center !important;
    padding: 0 !important;
  }

  /* cart + search pinned right, in an equal-grow zone */
  #page-container .ee-header-utils {
    order: 3;
    flex: 1 1 0 !important;
    width: auto !important;
    margin: 0 !important;
    justify-content: flex-end !important;
  }

  /* CTA buttons hidden on mobile */
  #page-container .et_pb_column_2_tb_header {
    display: none !important;
  }

  /* Re-anchor the mobile dropdown to the sticky header section: neutralize the
     intermediate positioned ancestors so the section (position:sticky) becomes
     the containing block for the absolute .et_mobile_menu. */
  #page-container .ee-main-menu .et_pb_menu_inner_container,
  #page-container .ee-main-menu,
  #page-container .et_pb_column_1_tb_header,
  #page-container .et_pb_row_0_tb_header {
    position: static !important;
  }

  /* Full-width, scrollable dropdown sheet directly below the header.
     72px = the mobile header height (logo 46 + 12/12 padding + 1px border). */
  #page-container .ee-main-menu .et_mobile_menu {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    width: auto !important;
    margin: 0 !important;
    max-height: calc(100dvh - 72px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    border-radius: 0 !important;
    box-sizing: border-box;
  }
}

/* ==========================================================================
   32. Button preset "yellow" fix + CTA button polish (2026-07-16)
   Divi's default button preset paints #edf000 yellow via BOTH `color` AND
   `-webkit-text-fill-color` on
   `body #page-container .et_pb_section .preset--module--divi-button--default`.
   text-fill-color wins over `color` when painting, so EVERY override must set
   both; the preset class is included in our selectors to win specificity.
   (About CTA was black+yellow; Support CTA was gradient+yellow.)
   ========================================================================== */

/* Gradient primary buttons on dark sections (hero, Support, etc.): brand VOID
   text — white fails AA on the cyan gradient end (1.65:1); void passes on both
   ends and matches the header/hero buttons. */
#page-container .et_pb_button.ee-button-primary,
#page-container .et_pb_section .et_pb_button.preset--module--divi-button--default {
  color: var(--ee-void) !important;
  -webkit-text-fill-color: var(--ee-void) !important;
}

/* ...but SECONDARY buttons (translucent, on dark bands — e.g. the Home hero
   "Explore PTT911") need FROST text, not the void above. The preset class made
   the void rule win over §5; match it back with higher specificity. */
#page-container .et_pb_button.ee-button-secondary,
#page-container .et_pb_section .et_pb_button.ee-button-secondary.preset--module--divi-button--default {
  color: var(--ee-white) !important;
  -webkit-text-fill-color: var(--ee-white) !important;
}

/* CTA gradient band buttons: dark button + frost text + cyan accent border and
   glow — replaces the flat "ugly black" button; on-brand and high-contrast on
   the bright blue→cyan band. */
#page-container .ee-section-cta .et_pb_button,
#page-container .ee-section-cta .et_pb_button.preset--module--divi-button--default,
#page-container .ee-section-cta .ee-button-primary,
#page-container .ee-section-cta .ee-button-secondary {
  background: var(--ee-void) !important;
  border: 1px solid var(--ee-cyan-60) !important;
  color: var(--ee-white) !important;
  -webkit-text-fill-color: var(--ee-white) !important;
  box-shadow: 0 14px 34px rgba(5, 7, 13, 0.30) !important;
}

#page-container .ee-section-cta .et_pb_button:hover,
#page-container .ee-section-cta .et_pb_button:focus,
#page-container .ee-section-cta .et_pb_button.preset--module--divi-button--default:hover,
#page-container .ee-section-cta .ee-button-primary:hover,
#page-container .ee-section-cta .ee-button-secondary:hover {
  background: var(--ee-navy) !important;
  border-color: var(--ee-cyan) !important;
  color: var(--ee-white) !important;
  -webkit-text-fill-color: var(--ee-white) !important;
  box-shadow: 0 0 0 1px var(--ee-cyan-42), 0 18px 44px rgba(0, 212, 255, 0.18) !important;
}

/* ==========================================================================
   33. Products auto-scroll carousel (2026-07-16)
   Single-row marquee replacing the uneven 7-card / 3-row grid on /products/.
   Markup comes from the [ee_product_carousel] shortcode (functions.php); the
   card set is duplicated so the track loops seamlessly at translateX(-50%).
   Uniform card size solves the equal-height / mixed-image complaints. Pauses on
   hover; reduced-motion turns it into a normal horizontal scroller.
   ========================================================================== */

.ee-carousel {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding: 10px 0 24px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}

.ee-carousel-track {
  display: flex;
  width: max-content;
  animation: ee-marquee 46s linear infinite;
}

.ee-carousel:hover .ee-carousel-track,
.ee-carousel:focus-within .ee-carousel-track {
  animation-play-state: paused;
}

/* margin-right (not gap) keeps each card's advance uniform so -50% is seamless */
.ee-pcard {
  flex: 0 0 300px;
  width: 300px;
  margin-right: 24px;
  min-height: 344px;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(circle at top right, var(--ee-cyan-12), transparent 40%),
    linear-gradient(145deg, var(--ee-panel), var(--ee-navy));
  border: 1px solid var(--ee-text-14);
  border-radius: var(--ee-radius-lg);
  overflow: hidden;
  text-decoration: none;
  box-shadow: var(--ee-shadow-soft);
  transition:
    transform var(--ee-transition-standard),
    border-color var(--ee-transition-standard),
    box-shadow var(--ee-transition-standard);
}

a.ee-pcard:hover,
a.ee-pcard:focus-visible {
  transform: translateY(-6px);
  border-color: var(--ee-cyan-42);
  box-shadow: var(--ee-shadow-heavy);
}

.ee-pcard-img {
  position: relative;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: var(--ee-void);
  border-bottom: 1px solid var(--ee-text-12);
}

.ee-pcard-img img {
  max-height: 116px;
  max-width: 86%;
  width: auto;
  object-fit: contain;
}

.ee-pcard-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 4px 10px;
  border-radius: var(--ee-radius-pill);
  background: rgba(125, 139, 163, 0.16);
  border: 1px solid var(--ee-text-18);
  color: var(--ee-muted);
  font-family: var(--ee-font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.ee-pcard-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 20px 20px 22px;
}

.ee-pcard-title {
  display: block;
  margin-bottom: 8px;
  color: var(--ee-white);
  font-family: var(--ee-font-heading);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.ee-pcard-desc {
  display: block;
  flex: 1;
  margin-bottom: 16px;
  color: var(--ee-text);
  font-family: var(--ee-font-body);
  font-size: 14px;
  line-height: 1.55;
}

.ee-pcard-cta {
  display: block;
  color: var(--ee-cyan);
  font-family: var(--ee-font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ee-pcard-soon {
  cursor: default;
}

.ee-pcard-soon .ee-pcard-cta {
  color: var(--ee-muted);
}

@keyframes ee-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Accessibility / reduced motion: no auto-scroll, just a manual scroller. */
@media (prefers-reduced-motion: reduce) {
  .ee-carousel {
    overflow-x: auto;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .ee-carousel-track {
    animation: none;
  }
}

@media (max-width: 767px) {
  .ee-pcard {
    flex-basis: 250px;
    width: 250px;
    min-height: 320px;
  }
}

/* ==========================================================================
   34. What Is My IP tool ([ee_ip_lookup] shortcode, 2026-07-16)
   Signal-card readout of the visitor's public IP + parsed browser/OS details.
   ========================================================================== */

.ee-ip-tool {
  max-width: 680px;
  margin: 0 auto;
}

.ee-ip-card {
  position: relative;
  text-align: center;
  padding: 40px 28px 34px;
  border-radius: var(--ee-radius-lg);
  background:
    radial-gradient(circle at 50% 0%, var(--ee-cyan-12), transparent 55%),
    linear-gradient(160deg, var(--ee-panel), var(--ee-navy));
  border: 1px solid var(--ee-cyan-18);
  box-shadow: var(--ee-shadow-soft), inset 0 0 0 1px rgba(0, 212, 255, 0.04);
  overflow: hidden;
}

.ee-ip-card::before {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--ee-cyan-70), transparent);
}

.ee-ip-kicker {
  display: block;
  margin-bottom: 14px;
  color: var(--ee-muted);
  font-family: var(--ee-font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.ee-ip-value {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}

.ee-ip-value #ee-ip-value {
  color: var(--ee-cyan);
  font-family: var(--ee-font-mono);
  font-size: clamp(28px, 5vw, 44px);
  font-weight: 700;
  letter-spacing: 0.01em;
  text-shadow: 0 0 26px rgba(0, 212, 255, 0.35);
  word-break: break-all;
}

.ee-ip-copy {
  flex: 0 0 auto;
  padding: 8px 16px;
  border-radius: var(--ee-radius-pill);
  border: 1px solid var(--ee-cyan-42);
  background: var(--ee-white-04);
  color: var(--ee-white);
  font-family: var(--ee-font-body);
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  transition: background var(--ee-transition-fast), border-color var(--ee-transition-fast), transform var(--ee-transition-fast);
}

.ee-ip-copy:hover {
  background: var(--ee-cyan-12);
  border-color: var(--ee-cyan);
  transform: translateY(-1px);
}

.ee-ip-copy.is-copied {
  background: rgba(19, 185, 129, 0.16);
  border-color: var(--ee-green);
  color: var(--ee-white);
}

.ee-ip-badge {
  display: inline-block;
  margin-top: 18px;
  padding: 4px 12px;
  border-radius: var(--ee-radius-pill);
  background: var(--ee-white-04);
  border: 1px solid var(--ee-text-14);
  color: var(--ee-muted);
  font-family: var(--ee-font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.ee-ip-details {
  margin-top: 22px;
  border: 1px solid var(--ee-text-14);
  border-radius: var(--ee-radius-md);
  background: var(--ee-panel);
  overflow: hidden;
}

.ee-ip-row {
  display: flex;
  gap: 18px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--ee-text-10);
}

.ee-ip-row:last-child {
  border-bottom: 0;
}

.ee-ip-k {
  flex: 0 0 150px;
  color: var(--ee-muted);
  font-family: var(--ee-font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ee-ip-v {
  color: var(--ee-white);
  font-size: 15px;
  line-height: 1.5;
}

.ee-ip-ua {
  color: var(--ee-text);
  font-family: var(--ee-font-mono);
  font-size: 13px;
  word-break: break-word;
}

.ee-ip-note {
  margin-top: 20px;
  color: var(--ee-muted);
  font-size: 14px;
  line-height: 1.7;
  text-align: center;
}

@media (max-width: 560px) {
  .ee-ip-row {
    flex-direction: column;
    gap: 4px;
  }

  .ee-ip-k {
    flex-basis: auto;
  }
}

/* ==========================================================================
   35. Header utility column: custom cart + search (2026-07-16)
   A 4th header column (.ee-header-utils) holds two code modules — the
   [ee_header_cart] and [ee_header_search] shortcodes — replacing the Divi menu
   module's built-in cart/search (which are turned off in the header layout).
   ========================================================================== */

.ee-header-utils,
.et_pb_column.ee-header-utils {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 16px !important;
}

.ee-header-utils .et_pb_module,
.ee-header-utils .et_pb_code {
  margin-bottom: 0 !important;
}

/* --- cart --- */
.ee-hdr-cart {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--ee-text);
  text-decoration: none;
  transition: color var(--ee-transition-fast);
}

.ee-hdr-cart:hover,
.ee-hdr-cart:focus-visible {
  color: var(--ee-cyan);
}

.ee-hdr-cart svg {
  display: block;
}

.ee-hdr-cart-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border-radius: var(--ee-radius-pill);
  background: linear-gradient(135deg, var(--ee-blue), var(--ee-cyan));
  color: var(--ee-void);
  font-family: var(--ee-font-mono);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

/* Empty cart shows no badge at all (owner preference 2026-07-18); the count
   appears only once something is in the cart. The AJAX cart fragment swaps
   the class off on add-to-cart, so the badge pops in without a reload. */
.ee-hdr-cart-count.is-empty {
  display: none;
}

/* --- search --- */
.ee-hdr-search {
  position: relative;
  display: inline-flex;
}

.ee-hdr-search-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  background: none;
  border: 0;
  color: var(--ee-text);
  cursor: pointer;
  transition: color var(--ee-transition-fast);
}

.ee-hdr-search-toggle:hover,
.ee-hdr-search.is-open .ee-hdr-search-toggle {
  color: var(--ee-cyan);
}

.ee-hdr-search-panel {
  position: absolute;
  top: calc(100% + 16px);
  right: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  width: 320px;
  max-width: 80vw;
  padding: 7px 7px 7px 16px;
  background: var(--ee-panel);
  border: 1px solid var(--ee-text-14);
  border-radius: var(--ee-radius-pill);
  box-shadow: var(--ee-shadow-heavy);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  z-index: 10002;
}

.ee-hdr-search.is-open .ee-hdr-search-panel {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.ee-hdr-search-panel::before {
  /* little pointer up to the icon */
  content: "";
  position: absolute;
  top: -5px;
  right: 12px;
  width: 9px;
  height: 9px;
  background: var(--ee-panel);
  border-left: 1px solid var(--ee-text-14);
  border-top: 1px solid var(--ee-text-14);
  transform: rotate(45deg);
}

.ee-hdr-search-input {
  flex: 1 1 auto;
  min-width: 0;
  background: transparent;
  border: 0;
  color: var(--ee-white);
  font-family: var(--ee-font-body);
  font-size: 15px;
  outline: none;
}

.ee-hdr-search-input::placeholder {
  color: var(--ee-muted);
  opacity: 1;
}

.ee-hdr-search-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--ee-blue), var(--ee-cyan));
  color: var(--ee-void);
  cursor: pointer;
  transition: box-shadow var(--ee-transition-fast);
}

.ee-hdr-search-submit:hover {
  box-shadow: 0 0 0 3px var(--ee-cyan-18);
}

/* ==========================================================================
   36. Branded product description + gallery lightbox (2026-07-17)
   Every product's long-form description (post_content) is authored as plain
   semantic HTML using the .ee-pd* contract below, and rendered by the SHARED
   product template's post-content module inside the dark .ee-product-content
   section. Styling it here — not per product — means SCBD, MCP Bridge, and any
   FUTURE product read on-brand automatically. This fixes the "white module on a
   black band" at its source (the old descriptions were Divi sections with no
   background, so Divi's preset painted them white).
   Gallery: hover-zoom is disabled in functions.php; images click to a full-size
   PhotoSwipe lightbox. A few rules here brand that experience.
   ========================================================================== */

/* The post-content wrapper must not paint its own surface or cap width —
   the .ee-product-content section owns the background + rhythm. */
#page-container .ee-product-content .et_pb_post_content,
#page-container .ee-product-content .et_pb_module.et_pb_post_content {
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  max-width: none !important;
}

/* Container */
.ee-pd {
  max-width: 1080px;
  margin: 0 auto;
}

/* Lede */
.ee-pd-lede {
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
}

.ee-pd-kicker {
  display: block;
  margin: 0 0 12px;
  color: var(--ee-cyan);
  font-family: var(--ee-font-mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.ee-pd-lede h2 {
  margin: 0 0 14px;
}

.ee-pd-intro {
  color: var(--ee-text);
  font-size: 19px;
  line-height: 1.7;
}

/* Content blocks */
.ee-pd-block {
  margin-top: 52px;
}

.ee-pd-block > h2 {
  margin: 0 0 8px;
}

.ee-pd-sub {
  margin: 0 auto 24px;
  max-width: 720px;
  color: var(--ee-muted);
}

.ee-pd-block.ee-pd-center {
  text-align: center;
}

/* Feature grid */
.ee-pd-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
  gap: 20px;
  margin-top: 32px;
  text-align: left;
}

.ee-pd-card {
  background:
    radial-gradient(circle at top right, var(--ee-cyan-12), transparent 34%),
    linear-gradient(145deg, var(--ee-panel), var(--ee-navy));
  border: 1px solid var(--ee-text-14);
  border-radius: var(--ee-radius-lg);
  box-shadow: var(--ee-shadow-soft);
  padding: 26px 24px;
  transition:
    transform var(--ee-transition-standard),
    border-color var(--ee-transition-standard),
    box-shadow var(--ee-transition-standard);
}

.ee-pd-card:hover {
  transform: translateY(-4px);
  border-color: var(--ee-cyan-42);
  box-shadow: var(--ee-shadow-heavy);
}

.ee-pd-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  margin-bottom: 16px;
  border-radius: 14px;
  background: var(--ee-cyan-12);
  border: 1px solid var(--ee-cyan-18);
  color: var(--ee-cyan);
}

.ee-pd-ico svg {
  width: 24px;
  height: 24px;
  display: block;
}

/* Divi's global TB heading rule `.et-db #et-boc .et-l h3 {font-size:49px}` has
   the SAME specificity as a #page-container rule but loads later, so it wins and
   blew these card titles up to 49px (breaking "WooCommerce" mid-word). Same
   conflict §30 fixes for h1/h2 — use !important on size + lock wrapping. */
#page-container .ee-pd-card h3 {
  margin: 0 0 8px;
  font-size: 20px !important;
  line-height: 1.22 !important;
  color: var(--ee-white);
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

.ee-pd-card p {
  margin: 0;
  color: var(--ee-text);
  font-size: 15.5px;
  line-height: 1.62;
}

/* Checklist */
.ee-pd-checklist {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px 30px;
  text-align: left;
}

.ee-pd-checklist li {
  position: relative;
  padding-left: 28px;
  color: var(--ee-text);
  line-height: 1.55;
}

.ee-pd-checklist li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--ee-cyan);
  font-weight: 800;
}

/* Spec / pricing table */
.ee-pd-table {
  width: 100%;
  margin-top: 24px;
  border-collapse: collapse;
  background: var(--ee-panel);
  border: 1px solid var(--ee-text-14);
  border-radius: var(--ee-radius-md);
  overflow: hidden;
  text-align: left;
}

.ee-pd-table th,
.ee-pd-table td {
  padding: 14px 18px;
  border-bottom: 1px solid var(--ee-text-10);
  color: var(--ee-text);
}

.ee-pd-table thead th {
  background: var(--ee-navy);
  color: var(--ee-white);
  font-family: var(--ee-font-heading);
  font-weight: 700;
}

.ee-pd-table tbody tr:last-child td {
  border-bottom: 0;
}

.ee-pd-table td.ee-pd-plan {
  color: var(--ee-white);
  font-weight: 700;
}

.ee-pd-table td.ee-pd-price {
  color: var(--ee-cyan);
  font-weight: 800;
  white-space: nowrap;
}

.ee-pd-table tr.is-featured td {
  background: var(--ee-cyan-08);
}

.ee-pd-note {
  margin-top: 14px;
  color: var(--ee-muted);
  font-size: 15px;
}

/* Steps */
.ee-pd-steps {
  counter-reset: eepd;
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  display: grid;
  gap: 16px;
  text-align: left;
}

.ee-pd-steps li {
  position: relative;
  padding: 4px 0 4px 54px;
  color: var(--ee-text);
  line-height: 1.6;
}

.ee-pd-steps li::before {
  counter-increment: eepd;
  content: counter(eepd);
  position: absolute;
  left: 0;
  top: 0;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--ee-blue), var(--ee-cyan));
  color: var(--ee-void);
  font-family: var(--ee-font-mono);
  font-weight: 700;
  font-size: 15px;
}

.ee-pd-steps li strong {
  color: var(--ee-white);
}

/* Divi's TB content CSS re-applies default <ol>/<ul> markers at id specificity,
   which doubled up with our counter badges / check glyphs. Force them off. */
#page-container .ee-pd-steps,
#page-container .ee-pd-checklist {
  list-style: none !important;
}

#page-container .ee-pd-steps > li::marker,
#page-container .ee-pd-checklist > li::marker {
  content: "";
}

/* FAQ — native <details>/<summary>, no JS */
.ee-pd-faq {
  background: var(--ee-panel);
  border: 1px solid var(--ee-text-14);
  border-radius: var(--ee-radius-md);
  margin-top: 12px;
  overflow: hidden;
  text-align: left;
}

.ee-pd-faq > summary {
  position: relative;
  cursor: pointer;
  list-style: none;
  padding: 16px 50px 16px 20px;
  color: var(--ee-white);
  font-family: var(--ee-font-heading);
  font-weight: 600;
  font-size: 17px;
}

.ee-pd-faq > summary::-webkit-details-marker {
  display: none;
}

.ee-pd-faq > summary::after {
  content: "+";
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ee-cyan);
  font-size: 22px;
  line-height: 1;
}

.ee-pd-faq[open] > summary::after {
  content: "–";
}

.ee-pd-faq > summary:hover {
  color: var(--ee-cyan);
}

.ee-pd-faq-body {
  padding: 0 20px 18px;
  color: var(--ee-text);
  line-height: 1.7;
}

.ee-pd-faq-body p {
  margin: 0;
}

/* In-description media (screenshots) */
.ee-pd-media {
  margin-top: 26px;
}

.ee-pd-media img {
  width: 100%;
  height: auto;
  border: 1px solid var(--ee-text-14);
  border-radius: var(--ee-radius-lg);
  box-shadow: var(--ee-shadow-soft);
}

.ee-pd-figcap {
  margin-top: 10px;
  color: var(--ee-muted);
  font-size: 14px;
  text-align: center;
}

/* Shared product CTA band close */
.ee-product-cta .ee-pd-cta-lead {
  margin: 0 0 8px;
}

/* --- Gallery: click-to-expand lightbox, no hover magnify --- */
#page-container .ee-product-buy .woocommerce-product-gallery__image a,
#page-container .ee-product-buy .woocommerce-product-gallery img {
  cursor: zoom-in;
}

/* Belt-and-suspenders: if a cached page still emits the flexslider zoom lens,
   keep it hidden (the real fix is remove_theme_support in functions.php). */
#page-container .ee-product-buy img.zoomImg {
  display: none !important;
}

.pswp__bg {
  background: var(--ee-void) !important;
}

@media (max-width: 767px) {
  .ee-pd-intro {
    font-size: 17px;
  }

  .ee-pd-block {
    margin-top: 38px;
  }

  .ee-pd-card {
    padding: 22px 20px;
  }
}

/* ==========================================================================
   38. Products catalog grid ([ee_product_grid] shortcode, 2026-07-17)
   A static, always-visible grid of the SAME cards the marquee uses (§33
   .ee-pcard), so visitors can browse every product without waiting for the
   carousel to cycle. One shared catalog in functions.php feeds both, so the grid
   grows automatically as products are added. Cards keep their fixed size for
   uniformity (Mike disliked the old stretched/uneven 7-card grid); the row wraps
   and centres, so a short last row sits tidily under the rest.
   ========================================================================== */

.ee-product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
  max-width: 1260px;
  margin: 0 auto;
}

/* The same .ee-pcard the marquee uses (§33), but there it is a fixed-width flex
   track item — here it is a grid item, so let the track own the width (drop the
   fixed width + marquee margin). Size, min-height and hover lift are inherited,
   so the card reads identically; align-items:stretch keeps each row equal-height.
   This fills the row edge-to-edge (7 products = a tidy 4 + 3), and the column
   count steps down responsively as the viewport narrows. */
.ee-product-grid .ee-pcard {
  width: auto;
  min-width: 0;
  margin-right: 0;
}

@media (max-width: 1180px) {
  .ee-product-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 860px) {
  .ee-product-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

@media (max-width: 520px) {
  .ee-product-grid {
    grid-template-columns: 1fr;
    max-width: 340px;
  }
}

/* >>> EE SIGNAGE (generated by ee_signage.py) >>> */
/* ==========================================================================
   37. Site-wide card signage (2026-07-17)
   A correlating cyan icon-chip above each feature-card title. The chip is a
   CSS ::before on the blurb; the per-card `ee-ico--<key>` class (spliced by
   ee_signage.py) selects the data-URI SVG. Format-agnostic (no Divi font-icon
   markup), centrally themed. Regenerate: `python3 ee_signage.py css`.
   ========================================================================== */

/* The card is a Divi flex module; make it stack so the chip sits ABOVE the
   title, and keep our ::before in flow (Divi defaults blurb ::before to
   position:absolute, which pulled the chip out of flow behind the title). */
#page-container .ee-feature-card.ee-ico,
#page-container .ee-contact-card.ee-ico {
  flex-direction: column !important;
  align-items: flex-start !important;
}

#page-container .ee-feature-card.ee-ico::before,
#page-container .ee-contact-card.ee-ico::before {
  content: "";
  position: relative;
  display: block;
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  margin: 0 0 18px;
  border-radius: 14px;
  background-color: var(--ee-cyan-12);
  border: 1px solid var(--ee-cyan-18);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 26px 26px;
  /* Divi decorates the blurb ::before as an invisible skewed hover overlay
     (opacity:0, transform:skew, left:-94px). Reset it so our chip shows. */
  opacity: 1 !important;
  transform: none !important;
  inset: auto !important;
  z-index: 1;
}

/* Blurbs render the icon slot before the content; with useIcon off it is empty,
   but hide it defensively so our chip is the only mark. */
#page-container .ee-feature-card.ee-ico .et_pb_main_blurb_image {
  display: none;
}

/* Support checklist: cyan check-circle markers (no per-page markup edit). */
#support-checklist ul,
.ee-support-checklist ul {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
}

#support-checklist li,
.ee-support-checklist li {
  position: relative;
  padding: 11px 0 11px 40px;
  border-bottom: 1px solid var(--ee-text-10);
  color: var(--ee-text);
}

#support-checklist li:last-child,
.ee-support-checklist li:last-child {
  border-bottom: 0;
}

#support-checklist li::before,
.ee-support-checklist li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 10px;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--ee-cyan-12);
  border: 1px solid var(--ee-cyan-18);
  color: var(--ee-cyan);
  font-size: 12px;
  font-weight: 800;
}

#page-container .ee-ico--bolt::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%2300D4FF%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M13%202%203%2014h7l-1%208%2010-12h-7z%27%2F%3E%3C%2Fsvg%3E"); }
#page-container .ee-ico--broadcast::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%2300D4FF%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M4.9%2016.1a9%209%200%200%201%200-8.2%27%2F%3E%3Cpath%20d%3D%27M7.8%2013.7a5%205%200%200%201%200-3.4%27%2F%3E%3Cpath%20d%3D%27M16.2%2010.3a5%205%200%200%201%200%203.4%27%2F%3E%3Cpath%20d%3D%27M19.1%207.9a9%209%200%200%201%200%208.2%27%2F%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%271.6%27%2F%3E%3C%2Fsvg%3E"); }
#page-container .ee-ico--cart::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%2300D4FF%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%279%27%20cy%3D%2720%27%20r%3D%271%27%2F%3E%3Ccircle%20cx%3D%2718%27%20cy%3D%2720%27%20r%3D%271%27%2F%3E%3Cpath%20d%3D%27M2%203h3l2.4%2012a2%202%200%200%200%202%201.6h7.6a2%202%200%200%200%202-1.6L22%207H6.2%27%2F%3E%3C%2Fsvg%3E"); }
#page-container .ee-ico--chart::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%2300D4FF%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M4%2020V10M10%2020V4M16%2020v-7M22%2020H2%27%2F%3E%3C%2Fsvg%3E"); }
#page-container .ee-ico--chat::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%2300D4FF%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M21%2015a2%202%200%200%201-2%202H8l-4%204V5a2%202%200%200%201%202-2h13a2%202%200%200%201%202%202z%27%2F%3E%3C%2Fsvg%3E"); }
#page-container .ee-ico--clipboard::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%2300D4FF%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%278%27%20y%3D%273%27%20width%3D%278%27%20height%3D%274%27%20rx%3D%271%27%2F%3E%3Cpath%20d%3D%27M8%205H6a2%202%200%200%200-2%202v13a2%202%200%200%200%202%202h12a2%202%200%200%200%202-2V7a2%202%200%200%200-2-2h-2%27%2F%3E%3Cpath%20d%3D%27m9%2014%202%202%204-4%27%2F%3E%3C%2Fsvg%3E"); }
#page-container .ee-ico--cloud::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%2300D4FF%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M18%2010h-1.26A8%208%200%201%200%209%2020h9a5%205%200%200%200%200-10z%27%2F%3E%3C%2Fsvg%3E"); }
#page-container .ee-ico--code::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%2300D4FF%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpolyline%20points%3D%2716%2018%2022%2012%2016%206%27%2F%3E%3Cpolyline%20points%3D%278%206%202%2012%208%2018%27%2F%3E%3C%2Fsvg%3E"); }
#page-container .ee-ico--database::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%2300D4FF%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cellipse%20cx%3D%2712%27%20cy%3D%275%27%20rx%3D%278%27%20ry%3D%273%27%2F%3E%3Cpath%20d%3D%27M4%205v6a8%203%200%200%200%2016%200V5%27%2F%3E%3Cpath%20d%3D%27M4%2011v6a8%203%200%200%200%2016%200v-6%27%2F%3E%3C%2Fsvg%3E"); }
#page-container .ee-ico--gear::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%2300D4FF%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%273%27%2F%3E%3Cpath%20d%3D%27M19.4%2015a1.65%201.65%200%200%200%20.33%201.82l.06.06a2%202%200%201%201-2.83%202.83l-.06-.06a1.65%201.65%200%200%200-1.82-.33%201.65%201.65%200%200%200-1%201.51V21a2%202%200%200%201-4%200v-.09A1.65%201.65%200%200%200%209%2019.4a1.65%201.65%200%200%200-1.82.33l-.06.06a2%202%200%201%201-2.83-2.83l.06-.06a1.65%201.65%200%200%200%20.33-1.82%201.65%201.65%200%200%200-1.51-1H3a2%202%200%200%201%200-4h.09A1.65%201.65%200%200%200%204.6%209a1.65%201.65%200%200%200-.33-1.82l-.06-.06a2%202%200%201%201%202.83-2.83l.06.06a1.65%201.65%200%200%200%201.82.33H9a1.65%201.65%200%200%200%201-1.51V3a2%202%200%200%201%204%200v.09a1.65%201.65%200%200%200%201%201.51%201.65%201.65%200%200%200%201.82-.33l.06-.06a2%202%200%201%201%202.83%202.83l-.06.06a1.65%201.65%200%200%200-.33%201.82V9a1.65%201.65%200%200%200%201.51%201H21a2%202%200%200%201%200%204h-.09a1.65%201.65%200%200%200-1.51%201z%27%2F%3E%3C%2Fsvg%3E"); }
#page-container .ee-ico--globe::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%2300D4FF%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%279%27%2F%3E%3Cpath%20d%3D%27M3%2012h18%27%2F%3E%3Cpath%20d%3D%27M12%203a15%2015%200%200%201%200%2018%27%2F%3E%3Cpath%20d%3D%27M12%203a15%2015%200%200%200%200%2018%27%2F%3E%3C%2Fsvg%3E"); }
#page-container .ee-ico--headset::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%2300D4FF%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M4%2014v-2a8%208%200%200%201%2016%200v2%27%2F%3E%3Cpath%20d%3D%27M18%2019a2%202%200%200%200%202-2v-3h-3v5z%27%2F%3E%3Cpath%20d%3D%27M6%2019a2%202%200%200%201-2-2v-3h3v5z%27%2F%3E%3Cpath%20d%3D%27M12%2019h2a2%202%200%200%200%202-2%27%2F%3E%3C%2Fsvg%3E"); }
#page-container .ee-ico--lock::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%2300D4FF%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%274%27%20y%3D%2711%27%20width%3D%2716%27%20height%3D%2710%27%20rx%3D%272%27%2F%3E%3Cpath%20d%3D%27M8%2011V7a4%204%200%200%201%208%200v4%27%2F%3E%3C%2Fsvg%3E"); }
#page-container .ee-ico--mail::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%2300D4FF%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%272%27%20y%3D%274%27%20width%3D%2720%27%20height%3D%2716%27%20rx%3D%272%27%2F%3E%3Cpath%20d%3D%27m22%207-10%206L2%207%27%2F%3E%3C%2Fsvg%3E"); }
#page-container .ee-ico--pin::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%2300D4FF%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M20%2010c0%206-8%2012-8%2012s-8-6-8-12a8%208%200%200%201%2016%200Z%27%2F%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2710%27%20r%3D%273%27%2F%3E%3C%2Fsvg%3E"); }
#page-container .ee-ico--plug::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%2300D4FF%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%2022v-5%27%2F%3E%3Cpath%20d%3D%27M9%208V2M15%208V2%27%2F%3E%3Cpath%20d%3D%27M18%208H6v3a6%206%200%200%200%2012%200V8Z%27%2F%3E%3C%2Fsvg%3E"); }
#page-container .ee-ico--product::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%2300D4FF%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M21%2016V8a2%202%200%200%200-1-1.73l-7-4a2%202%200%200%200-2%200l-7%204A2%202%200%200%200%203%208v8a2%202%200%200%200%201%201.73l7%204a2%202%200%200%200%202%200l7-4A2%202%200%200%200%2021%2016Z%27%2F%3E%3Cpath%20d%3D%27m3.3%207%208.7%205%208.7-5%27%2F%3E%3Cpath%20d%3D%27M12%2022V12%27%2F%3E%3C%2Fsvg%3E"); }
#page-container .ee-ico--rocket::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%2300D4FF%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M4.5%2016.5c-1.5%201.3-2%205-2%205s3.7-.5%205-2c.7-.8.7-2%200-2.8a2%202%200%200%200-3%200z%27%2F%3E%3Cpath%20d%3D%27M12%2015l-3-3a22%2022%200%200%201%208-10c3%200%205%202%205%205a22%2022%200%200%201-10%208z%27%2F%3E%3Cpath%20d%3D%27M9%2012H4s.5-3%202-4%205%200%205%200%27%2F%3E%3Cpath%20d%3D%27M12%2015v5s3-.5%204-2%200-5%200-5%27%2F%3E%3C%2Fsvg%3E"); }
#page-container .ee-ico--search::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%2300D4FF%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2711%27%20cy%3D%2711%27%20r%3D%277%27%2F%3E%3Cpath%20d%3D%27M21%2021l-4.35-4.35%27%2F%3E%3C%2Fsvg%3E"); }
#page-container .ee-ico--shield::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%2300D4FF%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%202l8%203v6c0%205-3.5%208.5-8%2010-4.5-1.5-8-5-8-10V5z%27%2F%3E%3Cpath%20d%3D%27m9%2012%202%202%204-4%27%2F%3E%3C%2Fsvg%3E"); }
#page-container .ee-ico--users::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%2300D4FF%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M16%2021v-2a4%204%200%200%200-4-4H6a4%204%200%200%200-4%204v2%27%2F%3E%3Ccircle%20cx%3D%279%27%20cy%3D%277%27%20r%3D%274%27%2F%3E%3Cpath%20d%3D%27M22%2021v-2a4%204%200%200%200-3-3.87%27%2F%3E%3Cpath%20d%3D%27M16%203.13a4%204%200%200%201%200%207.75%27%2F%3E%3C%2Fsvg%3E"); }
#page-container .ee-ico--web::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%2300D4FF%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%273%27%20y%3D%274%27%20width%3D%2718%27%20height%3D%2716%27%20rx%3D%272%27%2F%3E%3Cpath%20d%3D%27M3%209h18%27%2F%3E%3Cpath%20d%3D%27M6.5%206.6h.01M9.5%206.6h.01%27%2F%3E%3C%2Fsvg%3E"); }
#page-container .ee-ico--wrench::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%2300D4FF%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M14.7%206.3a4%204%200%200%200-5.4%205.4L3%2018l3%203%206.3-6.3a4%204%200%200%200%205.4-5.4l-2.8%202.8-2.2-.6-.6-2.2z%27%2F%3E%3C%2Fsvg%3E"); }

/* ==========================================================================
   39. CLS FIX — reserve the sticky header's height (2026-07-21)
   ROOT CAUSE (GTmetrix CLS 0.29, verified via the layout-shift API on Home):
   the global header is `.et-l--header` with min-height:0, so its height is
   content-driven. The 16-item nav is laid out with the FALLBACK font first
   (narrower) and fits fewer rows; when Inter (Google Fonts, display=swap)
   loads ~0.9s in, the wider glyphs push the nav to an extra row, GROWING the
   header ~30px and shoving #home-hero (and the whole page) down — one shift
   worth ~0.21 of the 0.23 CLS (91%).
   FIX: reserve the header's SETTLED (Inter-state) height per desktop width band
   so the header is already that tall at first paint. The late nav reflow then
   fills the reserved space instead of displacing everything below it — the hero
   can't move. Measured settled heights: 981–1199px = 149px (3-row nav),
   ≥1200px = 119px (2-row). ≤980px is the hamburger (single stable ~69px row,
   no wrap) so it is deliberately left untouched. Values are the exact settled
   heights, so there is no wasted header space at the common desktop widths.
   Update these if the primary menu's item count changes materially.
   ========================================================================== */

@media (min-width: 981px) and (max-width: 1199px) {
  .et-l--header { min-height: 149px; }
}
@media (min-width: 1200px) {
  .et-l--header { min-height: 119px; }
}