/* Generated by tools/build-site.mjs from styles/main.css, css/blog.css, styles/grid-typography-system.css, styles/site-uniform.css, styles/site-chrome.css, styles/icons.css, without rules no page using it matches. Edit those files, not this one. */
/* ---- styles/main.css ---- */
/* ============================================
   SELNEXAHEALTH - MODERN DESIGN SYSTEM
   ============================================ */

/* CSS Variables - Design System */
:root {
    /* Primary Colors */
    --color-primary-dark: #0A2463;
    --color-primary-teal: #00B4D8;
    --color-primary-teal-text: #0e7490; /* same hue, dark enough for text on light backgrounds */
    --color-accent-electric: #90E0EF;
    
    /* Secondary Colors */
    --color-secondary-coral: #FF6B6B;
    --color-secondary-green: #06D6A0;
    --color-secondary-purple: #5F0F40;
    --color-warm-accent: #c99a3f;
    --color-cta-amber: #E8A020;
    --color-cta-amber-light: #F4C157;
    --font-primary: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-secondary: 'Montserrat', sans-serif;
    --surface-base: #f9f5ee;
    --surface-raised: #ffffff;
    --surface-overlay: rgba(255, 255, 255, 0.72);
    --surface-inset: #f0ebe1;
    --surface-dark: #08131a;
    
    /* Neutral Base */
    --color-neutral-charcoal: #2B2D42;
    --color-neutral-gray: #EDF2F4;
    --color-neutral-white: #FFFFFF;
    
    /* Typography */
    --font-primary: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-secondary: 'Montserrat', sans-serif;
    
    /* Font Sizes */
    --fs-h1: clamp(2.5rem, 5vw, 4.5rem);
    --fs-h2: clamp(2rem, 4vw, 3rem);
    --fs-h3: clamp(1.5rem, 3vw, 2.25rem);
    --fs-h4: clamp(1.25rem, 2vw, 1.75rem);
    --fs-body: clamp(1rem, 1.5vw, 1.125rem);
    --fs-small: 0.875rem;
    
    /* Spacing */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 1.5rem;
    --spacing-lg: 2rem;
    --spacing-xl: 3rem;
    --spacing-2xl: 4rem;
    --spacing-3xl: 6rem;
    
    /* Shadows */
    
    /* Border Radius */
    
    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-base: 0.3s ease;
    --transition-slow: 0.5s ease;
}

/* ============================================
   RESET & BASE STYLES
   ============================================ */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-primary);
    color: var(--color-neutral-charcoal);
    background-color: var(--surface-base);
    line-height: 1.68;
    font-weight: 400;
    overflow-x: hidden;
}

/* Accessibility */
.skip-link {
    position: absolute;
    top: -100%;
    left: 0;
    background: #000;
    color: #fff;
    padding: 8px 16px;
    text-decoration: none;
    z-index: 9999;
    font-size: 14px;
    border-radius: 0 0 var(--radius-sm) 0;
    transition: top 0.2s;
}

.skip-link:focus {
    top: 0;
}

/* Focus visible for keyboard navigation */

/* ============================================
   TYPOGRAPHY
   ============================================ */

h1, h2, h3, h4 {
    font-family: var(--font-secondary);
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: var(--spacing-md);
}

h1 {
    font-size: var(--fs-h1);
    font-weight: 900;
    line-height: 1.02;
    letter-spacing: -0.04em;
}

h2 {
    font-size: var(--fs-h2);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.03em;
}

h3 {
    font-size: var(--fs-h3);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.01em;
}

h4 {
    font-size: var(--fs-h4);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

p {
    margin-bottom: var(--spacing-md);
    font-size: var(--fs-body);
}

a {
    color: var(--color-primary-teal-text);
    text-decoration: none;
    transition: color var(--transition-base);
}

a:hover {
    color: var(--color-accent-electric);
}

/* ============================================
   LAYOUT
   ============================================ */

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-lg);
}

/* ============================================
   NAVIGATION
   ============================================ */

/* Dropdown Menus */

/* Hamburger Menu */

/* Progress Bar */

/* ============================================
   HERO SECTION
   ============================================ */

/* ============================================
   BUTTONS
   ============================================ */

.btn {
    padding: var(--spacing-sm) var(--spacing-lg);
    border: none;
    border-radius: var(--radius-md);
    font-size: var(--fs-body);
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-base);
    font-family: var(--font-primary);
    position: relative;
    overflow: hidden;
}

.btn-primary {
    background: linear-gradient(135deg, var(--color-primary-teal), var(--color-accent-electric));
    color: var(--color-neutral-white);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

/* ============================================
   SECTIONS
   ============================================ */

section {
    padding: var(--spacing-3xl) var(--spacing-lg);
}

/* Bento Grid */

/* ============================================
   TIMELINE
   ============================================ */

/* ============================================
   FEATURES SECTION
   ============================================ */

/* ============================================
   QUICK METRICS
   ============================================ */


/* Testimonials */

.author-info {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.author-info span {
    font-size: var(--fs-small);
    color: var(--color-neutral-charcoal);
}

/* ============================================
   AFRICA SECTION
   ============================================ */

/* ============================================
   TECH SECTION
   ============================================ */

/* ============================================
   CTA SECTION
   ============================================ */

/* ============================================
   FOOTER
   ============================================ */

.footer {
    background: linear-gradient(180deg, #071019 0%, #050b12 100%);
    color: var(--color-neutral-white);
    padding: var(--spacing-3xl) var(--spacing-lg);
}

/* ============================================
   MODALS
   ============================================ */

.modal {
    border: none;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    max-width: 500px;
    width: 90%;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

.modal::backdrop {
    background: rgba(0, 0, 0, 0.5);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

.modal h2 {
    margin-bottom: var(--spacing-lg);
    color: var(--color-primary-dark);
}

/* Forms */

.checkbox {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-lg);
    cursor: pointer;
}

.checkbox input {
    width: auto;
    margin: 0;
}

/* ============================================
   ANIMATIONS
   ============================================ */

/* Slide only: starting at opacity 0 kept hero text invisible at first paint (it delayed the largest contentful paint). */
@keyframes fadeInUp {
    from {
        transform: translateY(20px);
    }
    to {
        transform: translateY(0);
    }
}

@keyframes float {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-20px);
    }
}

@keyframes pulse-dot {
    0% {
        box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.7);
    }
    70% {
        box-shadow: 0 0 0 8px rgba(74, 222, 128, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(74, 222, 128, 0);
    }
}

@keyframes shimmer {
    0% {
        background-position: -1000px 0;
    }
    100% {
        background-position: 1000px 0;
    }
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */

@media (min-width: 1280px) and (max-width: 1440px) {

    .footer .container {
        max-width: 1320px;
    }
}

@media (min-width: 1600px) {
    .container {
        max-width: 1360px;
    }

    .footer .container {
        max-width: 1520px;
    }
}

/* Tablet (768px - 1023px) */
@media (max-width: 1023px) {
    .container {
        padding: 0 var(--spacing-md);
    }
}

/* Mobile (320px - 767px) */
@media (max-width: 767px) {
    :root {
        --fs-h1: 2rem;
        --fs-h2: 1.5rem;
        --fs-h3: 1.25rem;
        --fs-body: 1rem;
        --spacing-lg: 1.5rem;
        --spacing-xl: 2rem;
        --spacing-2xl: 3rem;
        --spacing-3xl: 2rem;
    }
    
    .btn {
        width: 100%;
    }
    
    .modal {
        width: 95%;
    }
}

    /* ============================================
   NEW PAGES STYLING
   ============================================ */

.blog-card {
    background: var(--color-neutral-white);
    padding: var(--spacing-lg);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-base);
    display: flex;
    flex-direction: column;
}

.blog-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
}

.blog-category {
    display: inline-block;
    background: var(--color-accent-electric);
    color: var(--color-neutral-white);
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-sm);
    font-size: var(--fs-small);
    margin-bottom: var(--spacing-md);
}

.blog-category i {
    margin-right: 0.25rem;
}

.blog-header h3 {
    margin-bottom: var(--spacing-md);
    color: var(--color-primary-dark);
}

.blog-header a {
    color: var(--color-primary-dark);
    text-decoration: none;
}

.blog-header a:hover {
    color: var(--color-primary-teal);
}

.blog-meta {
    display: flex;
    gap: var(--spacing-lg);
    font-size: var(--fs-small);
    color: var(--color-neutral-charcoal);
    margin-bottom: var(--spacing-lg);
    padding-bottom: var(--spacing-lg);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.blog-meta i {
    margin-right: 0.5rem;
    color: var(--color-primary-teal);
}

/* ============================================
   TEAM SECTION STYLING
   ============================================ */

/* ============================================
   V4 GLOBAL ENHANCEMENTS
   ============================================ */

/* Keep text readable on light surface sections even when dark theme is active */

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.page-card,
.resource-card {
    background: #ffffff;
    border-radius: var(--radius-md);
    border: 1px solid rgba(10, 36, 99, 0.12);
    box-shadow: var(--shadow-sm);
    padding: var(--spacing-lg);
}

.page-card h3,
.resource-card h3 {
    margin-bottom: var(--spacing-sm);
}

@keyframes searchPulse {
    0% { box-shadow: 0 0 0 0 rgba(255, 196, 66, 0.6); }
    100% { box-shadow: 0 0 0 14px rgba(255, 196, 66, 0); }
}

/* ---- css/blog.css ---- */
/* Article layout for blog/future-healthcare-systems.html (this file was empty, so the page had no article styles). */

.blog-post {
  padding: clamp(2rem, 5vw, 3.5rem) 0 clamp(3rem, 6vw, 5rem);
}

.blog-post .container {
  max-width: 820px;
}

.blog-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
  font-size: 0.9rem;
}

.blog-category {
  padding: 0.2rem 0.75rem;
  border-radius: var(--radius-pill);
  background: #e6f2f2;
  color: #004c4c;
  font-weight: 600;
}

.blog-date {
  color: #4b5563;
}

.blog-author {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 1.25rem 0 2rem;
}

.blog-author img {
  display: block;
  width: 48px;
  height: auto;
}

.author-info p {
  margin: 0;
  font-size: 0.9rem;
}

.author-info .author-name {
  color: #0a2463;
  font-size: 1rem;
  font-weight: 700;
}

.blog-featured-image {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 0 2rem;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}

.blog-content h2 {
  margin: 2.25rem 0 0.75rem;
}

.blog-content h3 {
  margin: 1.5rem 0 0.5rem;
}

.blog-content ul {
  padding-left: 1.25rem;
}

.blog-cta {
  margin: 2.5rem 0;
  padding: 1.5rem;
  border-radius: var(--radius-md);
  background: #f1f7f7;
}

.blog-share,
.blog-related {
  margin-top: 2.5rem;
}

.blog-share h2,
.blog-related h2 {
  font-size: 1.35rem;
}

.share-buttons {
  display: flex;
  gap: 0.75rem;
}

.share-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-circle);
  background: #004c4c;
  color: #ffffff;
  font-size: 1.1rem;
  text-decoration: none;
}

.share-button:hover,
.share-button:focus-visible {
  background: #0e7490;
  color: #ffffff;
}

.related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
}

.related-card {
  display: block;
  overflow: hidden;
  border: 1px solid #e2e8f0;
  border-radius: var(--radius-md);
  background: #ffffff;
  color: inherit;
  text-decoration: none;
}

.related-card img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top;
}

.related-card h3 {
  margin: 0;
  padding: 0.85rem 1rem;
  color: #0a2463;
  font-size: 1rem;
}

/* Long-form article (blog/offline-first.html). Values come from the tokens in styles/main.css. */
.blog-article {
  max-width: 36rem;
}

.blog-article .blog-meta {
  margin-bottom: var(--spacing-sm);
}

.blog-article .blog-byline {
  font-size: 0.9rem;
  color: var(--color-neutral-charcoal);
  border-top: 1px solid rgba(10, 36, 99, 0.12);
  padding-top: var(--spacing-sm);
  margin-bottom: var(--spacing-lg);
}

.blog-article h1 {
  font-size: var(--fs-h2);
  line-height: 1.12;
}

.blog-article h2 {
  margin-top: var(--spacing-xl);
  font-size: var(--fs-h3);
  line-height: 1.2;
}

.blog-article .pull {
  margin: var(--spacing-xl) 0;
  padding-left: var(--spacing-md);
  border-left: 4px solid var(--color-cta-amber);
  font-size: var(--fs-h4);
  font-weight: 700;
  color: var(--color-primary-dark);
}

.blog-article .flow {
  margin: var(--spacing-lg) 0;
}

.blog-article .flow figcaption {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-neutral-charcoal);
  margin-bottom: var(--spacing-sm);
}

.blog-article .steps {
  list-style: none;
  margin: 0;
  padding: 0;
}

.blog-article .step {
  display: grid;
  grid-template-columns: 2.75rem 1fr;
  gap: var(--spacing-sm);
  background: var(--surface-raised);
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--spacing-sm);
}

.blog-article .step h3 {
  margin: 0 0 0.25rem;
  font-size: 1rem;
}

.blog-article .step p {
  margin: 0;
  font-size: 0.95rem;
}

.blog-article .step .n {
  width: 2rem; height: 2rem; border-radius: var(--radius-sm);
  display: grid; place-items: center;
  font-weight: 800; color: #fff;
  background: var(--color-primary-dark);
}

.blog-article .step.alt .n { background: var(--color-primary-teal-text); }
/* White on amber is under 3:1, so the warning marker uses the dark text the site's amber buttons use. */
.blog-article .step.warn .n { background: var(--color-cta-amber); color: var(--surface-dark); }

.blog-article .step-break {
  margin: var(--spacing-xs) 0 var(--spacing-sm) 3.75rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-neutral-charcoal);
}

.blog-article .objectives {
  display: grid;
  gap: var(--spacing-sm);
  margin: var(--spacing-md) 0 var(--spacing-lg);
}

.blog-article .objectives h3 {
  margin: 0 0 0.25rem;
  font-size: 1rem;
}

.blog-article .objectives p {
  margin: 0;
}

.blog-article .callout {
  margin: var(--spacing-2xl) 0;
  background: var(--color-primary-dark);
  color: #fff;
  border-radius: var(--radius-md);
  padding: var(--spacing-xl);
}

.blog-article .callout .callout-label {
  margin: 0 0 var(--spacing-sm);
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent-electric);
}

.blog-article .callout p {
  color: #fff;
}

.blog-article .callout .callout-question {
  font-size: var(--fs-h4);
  font-weight: 700;
  line-height: 1.35;
}

.blog-article .callout p:last-child {
  margin-bottom: 0;
}

.blog-article .article-author {
  margin: var(--spacing-xl) 0 var(--spacing-lg);
}

.blog-article .article-author p:last-child {
  margin-bottom: 0;
}

.blog-article .article-author h2 {
  margin: 0 0 var(--spacing-xs);
  font-size: 1rem;
}

/* ---- styles/grid-typography-system.css ---- */
/* ============================================
   MODERN DESIGN ENHANCEMENTS - 2026 EDITION
   ============================================ */

/* Modern CSS Features & Performance */
* {
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-primary);
    color: var(--color-neutral-charcoal);
    background-color: #f9f5ee;
    line-height: 1.72;
    font-weight: 300;
    overflow-x: hidden;
}

/* ============================================
   MODERN COLOR SYSTEM - ENHANCED PALETTE 2026
   ============================================ */
:root {
    /* Enhanced color palette with modern gradients */
    --color-primary-teal: #00B4D8;           /* Bright cyan */
    --color-primary-teal-light: #48CAE4;     /* Light cyan */
    --color-primary-teal-dark: #0077B6;      /* Deep blue-cyan */
    --color-primary-dark: #0A2463;           /* Navy blue */
    --color-primary-dark-light: #1E3A8A;     /* Lighter navy */
    --color-accent-gold: #FFD700;            /* Gold accent */
    --color-accent-gold-light: #FFE55C;      /* Light gold */
    --color-neutral-white: #FFFFFF;          /* Pure white */
    --color-neutral-gray: #F8FAFC;           /* Very light gray */
    --color-neutral-charcoal: #334155;      /* Dark slate */
    --color-neutral-medium: #64748B;         /* Medium gray */
    --color-neutral-light: #E2E8F0;          /* Light gray */
    --color-success: #10B981;                /* Emerald green */
    --color-warning: #F59E0B;                /* Amber */
    --color-error: #EF4444;                  /* Red */
    --color-info: #3B82F6;                   /* Blue */
    --color-glass-bg: rgba(255, 255, 255, 0.85); /* Glassmorphism background */
    --color-glass-border: rgba(255, 255, 255, 0.2); /* Glassmorphism border */
    --color-gradient-primary: linear-gradient(135deg, #00B4D8 0%, #0077B6 100%);
    --color-gradient-secondary: linear-gradient(135deg, #0A2463 0%, #1E3A8A 100%);
    --color-gradient-accent: linear-gradient(135deg, #FFD700 0%, #FFE55C 100%);
    --font-primary: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-secondary: 'Montserrat', sans-serif;
}

/* ============================================
   SPACING SCALE (8px base unit)
   ============================================ */
:root {
    --spacing-base-8: 0.5rem;     /* 8px */
    --spacing-base-16: 1rem;      /* 16px */
    --spacing-base-24: 1.5rem;    /* 24px */
    --spacing-base-32: 2rem;      /* 32px */
    --spacing-base-40: 2.5rem;    /* 40px */
    --spacing-base-48: 3rem;      /* 48px */
    --spacing-base-64: 4rem;      /* 64px */
    --spacing-base-80: 5rem;      /* 80px */
    --spacing-base-96: 6rem;      /* 96px */
    --spacing-base-120: 7.5rem;   /* 120px */
    
    /* Section spacing */
    --section-spacing-vertical: 7.5rem;    /* 120px between major sections */
    --section-spacing-horizontal: 2rem;  /* 32px internal padding */
    
    /* Grid configuration */
    --grid-columns: 12;
    --grid-gap: 1.5rem;  /* 24px gap between columns */
    --container-max: 1440px;
    --container-padding: 2rem; /* 32px on sides */
}

/* ============================================
   TYPOGRAPHIC SCALE - REFINED HIERARCHY
   ============================================ */

/* H1 - Main Headlines */
h1 {
    font-size: var(--fs-h1);
    font-weight: 900;
    line-height: 1.02;
    letter-spacing: -0.04em;
    color: var(--color-primary-dark);
    margin-bottom: var(--spacing-base-24);
}

/* H2 - Section Titles */
h2 {
    font-size: var(--fs-h2);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.03em;
    color: var(--color-primary-dark);
    margin-bottom: var(--spacing-base-32);
}

/* H3 - Subsection Titles / Card Headings */
h3 {
    font-size: var(--fs-h3);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: var(--color-primary-dark);
    margin-bottom: var(--spacing-base-16);
}

/* H4 - Component Labels */
h4 {
    font-size: var(--fs-h4);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--color-primary-dark);
    margin-bottom: var(--spacing-base-12);
}

/* Body Text - Improved readability */
p, li, label {
    font-size: var(--fs-body);
    line-height: 1.72;
    letter-spacing: 0;
    font-weight: 300;
    color: inherit;
}

/* Paragraph spacing */
p + p {
    margin-top: var(--spacing-base-16);
}

/* Small text */
small, .small {
    font-size: var(--fs-small);
    line-height: 1.5;
}

/* ============================================
   12-COLUMN GRID SYSTEM
   ============================================ */

.container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-padding);
}

.grid {
    display: grid;
    grid-template-columns: repeat(var(--grid-columns), 1fr);
    gap: var(--grid-gap);
}

/* Grid column utilities */

/* ============================================
   SECTION LAYOUTS - CONSISTENT ALIGNMENT
   ============================================ */

section {
    padding: var(--section-spacing-vertical) var(--section-spacing-horizontal);
}

/* ============================================
   SCROLL-TRIGGERED ANIMATIONS - MODERN 2026
   ============================================ */
/* Hidden only while JavaScript is running and motion is welcome; see the matching rule in site-uniform.css. */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
    .animate-on-scroll {
        opacity: 0;
        transform: translateY(30px);
        transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .animate-on-scroll.animate-in {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================
   MODERN LOADING STATES - SKELETON SCREENS
   ============================================ */

/* Loading animations */
@keyframes skeleton-loading {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

@keyframes skeleton-shine {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}

/* Form animations */
@keyframes input-focus {
    0% {
        transform: translateY(0);
        box-shadow: 0 0 0 0 rgba(0, 180, 216, 0.1);
    }
    50% {
        transform: translateY(-3px);
        box-shadow: 0 0 0 6px rgba(0, 180, 216, 0.15);
    }
    100% {
        transform: translateY(-2px);
        box-shadow: 0 0 0 4px rgba(0, 180, 216, 0.1), 0 4px 12px rgba(0, 180, 216, 0.15);
    }
}

/* Gradient animations */
@keyframes gradient-shift {
    0% {
        transform: translateX(-10px) translateY(-10px) scale(1);
        opacity: 0.8;
    }
    100% {
        transform: translateX(10px) translateY(10px) scale(1.1);
        opacity: 1;
    }
}

/* Glassmorphism animations */
@keyframes glass-glow {
    0% {
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1), 0 1px 0 rgba(255, 255, 255, 0.2) inset;
    }
    100% {
        box-shadow: 0 12px 48px rgba(0, 0, 0, 0.15), 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 0 0 1px rgba(255, 255, 255, 0.1) inset;
    }
}

.card {
    background: var(--color-glass-bg);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid var(--color-glass-border);
    border-radius: var(--radius-md);
    padding: var(--spacing-base-32);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: var(--shadow-lg), 0 1px 0 rgba(255, 255, 255, 0.2) inset;
    position: relative;
    overflow: hidden;
    z-index: 1;
    transform: translateZ(0);
    will-change: transform, box-shadow, backdrop-filter;
}

.card:hover {
    -webkit-backdrop-filter: blur(25px) saturate(200%);
    backdrop-filter: blur(25px) saturate(200%);
    box-shadow: var(--shadow-lg), 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 0 0 1px rgba(255, 255, 255, 0.1) inset;
    transform: translateY(-8px) scale(1.02) translateZ(0);
    border-color: rgba(255, 255, 255, 0.3);
    z-index: 2;
    animation: glass-glow 0.3s ease-out forwards;
}

/* Problem/feature card */

/* ============================================
   BUTTON & CTA STYLING - ENHANCED PROMINENCE
   ============================================ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-base-8);
    padding: 0.875rem 2rem;
    font-size: 1rem;
    font-weight: 600;
    border-radius: var(--radius-md);
    transition: all var(--transition-base);
    text-decoration: none;
    cursor: pointer;
    border: 2px solid transparent;
    min-height: 48px; /* Accessible touch target */
}

.btn-primary {
    background: var(--color-gradient-primary);
    color: var(--color-neutral-white);
    box-shadow: var(--shadow-md);
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.btn-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s ease;
    z-index: -1;
}

.btn-primary:hover {
    background: var(--color-gradient-primary);
    box-shadow: var(--shadow-md);
    transform: translateY(-3px) scale(1.02);
    animation: btn-pulse 0.6s ease-out;
}

.btn-primary:hover::before {
    left: 100%;
}

.btn-primary:hover::before {
    left: 100%;
}

/* Button animations */
@keyframes btn-pulse {
    0% {
        box-shadow: 0 4px 12px rgba(0, 180, 216, 0.3);
    }
    50% {
        box-shadow: 0 8px 24px rgba(0, 180, 216, 0.5), 0 0 0 4px rgba(0, 180, 216, 0.1);
    }
    100% {
        box-shadow: var(--shadow-md);
    }
}

/* ============================================
   HERO SECTION - IMPROVED HIERARCHY
   ============================================ */

/* ============================================
   ROI CALCULATOR - PROMINENT DESIGN
   ============================================ */

/* ============================================
   RESPONSIVE DESIGN - BREAKPOINTS
   ============================================ */

/* Tablet: 768px */
@media (max-width: 768px) {
    :root {
        --section-spacing-vertical: 4.5rem;    /* 72px */
        --container-padding: 1.5rem;        /* 24px */
        --grid-gap: 1rem;                   /* 16px */
    }
    
    h1 { margin-bottom: var(--spacing-base-16); }
    h2 { margin-bottom: var(--spacing-base-24); }
    
    .grid {
        gap: var(--grid-gap);
    }
    
    .card {
        padding: var(--spacing-base-24);
    }
}

/* Mobile: 375px - 599px */
@media (max-width: 599px) {
    :root {
        --section-spacing-vertical: 3.5rem;   /* 56px */
        --container-padding: 1rem;          /* 16px */
        --grid-gap: 0.75rem;                /* 12px */
    }
    
    section {
        padding: var(--section-spacing-vertical) var(--section-spacing-horizontal);
    }
    
    h1 {
        font-size: 1.75rem;
        margin-bottom: var(--spacing-base-16);
        line-height: 1.2;
    }
    
    h2 {
        font-size: 1.5rem;
        margin-bottom: var(--spacing-base-16);
    }
    
    h3 {
        font-size: 1.125rem;
    }
    
    p, li {
        font-size: 0.95rem;
        line-height: 1.7;
    }
    
    .btn {
        width: 100%;
        padding: 0.75rem 1.5rem;
        min-height: 44px;
    }
    
    .card {
        padding: var(--spacing-base-16);
    }
    
    .grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   ACCESSIBILITY - TEXT CONTRAST & FOCUS
   ============================================ */

/* Ensure minimum 4.5:1 contrast ratio */
.btn, a, button {
    outline: 2px solid transparent;
    outline-offset: 2px;
}

.btn:focus-visible, a:focus-visible, button:focus-visible {
    outline: 2px solid var(--color-primary-teal);
    outline-offset: 2px;
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

.flex { display: flex; }

/* Print styles */
@media print {
    section { page-break-inside: avoid; }
    .btn { display: none; }
}

/* ---- styles/site-uniform.css ---- */
:root {
  --uniform-bg: #f9f5ee;
  --uniform-surface: #ffffff;
  --uniform-text: #1f2937;
  --uniform-muted: #4b5563;
  --uniform-primary: #004c4c;
  --uniform-accent: #e8a020;
  --uniform-border: rgba(15, 23, 42, 0.1);
  --color-brand-primary: #004c4c;
  --color-brand-secondary: #0e7490;
  --color-brand-accent: #e8a020;
  --color-success: #22c55e;
  --color-success-rgb: 34, 197, 94;
  --color-border: rgba(15, 23, 42, 0.1);
  --color-bg-secondary: #f4f0e7;
  --color-text-secondary: #4b5563;
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --section-gap: clamp(4rem, 8vw, 7rem);
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: clamp(1.75rem, 3vw, 2.25rem);
  --text-hero: clamp(2.2rem, 5vw, 3.4rem);
  --transition-fast: 0.15s ease;
  --transition-normal: 0.25s ease;
  --transition-slow: 0.4s ease;
  --transition-spring: 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
html {
  scroll-behavior: smooth;
}

body {
  font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--uniform-bg);
  color: var(--uniform-text);
}

img,
video {
  max-width: 100%;
  height: auto;
}

p,
li {
  color: var(--uniform-muted);
}

.container {
  width: min(1200px, 100% - 2rem);
  margin-inline: auto;
}

/* Works for both .navbar-container and .navbar.container templates */


.btn.btn-primary {
  background: var(--uniform-accent);
  border-color: var(--uniform-accent);
  color: #0a1414 !important;
}


.btn.btn-primary:hover {
  background: #cf8b18;
  border-color: #cf8b18;
}

/* Global card/surface consistency */
.card,
.resource-card,
.guide-card,
.webinar-card,
.page-card {
  background: var(--uniform-surface);
  border: 1px solid var(--uniform-border);
  box-shadow: var(--shadow-md);
  border-radius: var(--radius-md);
}

/* Footer consistency across .footer, .site-footer and plain footer tags */
footer,
.footer {
  background: #0a1414;
  color: rgba(255, 255, 255, 0.9);
}

/* Accessible "skip to content" link: visually hidden until keyboard focus */
.skip-link {
  position: absolute;
  top: -100%;
  left: 0;
  background: #000;
  color: #fff;
  padding: 8px 16px;
  z-index: 9999;
  font-size: 14px;
  text-decoration: none;
  border-radius: 0 0 var(--radius-sm) 0;
  transition: top 0.2s;
}

.skip-link:focus {
  top: 0;
}

footer p,
footer li,
footer a,
.footer p,
.footer li,
.footer a {
  color: rgba(255, 255, 255, 0.84) !important;
}

footer a:hover,
.footer a:hover {
  color: #ffffff !important;
}

/* Keep article pages from drifting too narrow/wide in legacy templates */
.blog-article,
.blog-post {
  max-width: 860px;
  margin-inline: auto;
}

/* Scroll reveal. Sections start hidden only when JavaScript is running (js/site-core.js reveals them) and the
   visitor has not asked for reduced motion. Without JavaScript, or in browsers without the scripting media
   feature, everything is visible from the start. Never put these classes on content in the first screen. */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.55s ease, transform 0.55s ease;
  }

  .animate-on-scroll {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.5s ease, transform 0.5s ease;
  }

  .reveal.visible,
  .reveal.revealed,
  .reveal.animate-in,
  .animate-on-scroll.in-view,
  .animate-on-scroll.animate-in {
    opacity: 1;
    transform: translateY(0);
  }
}

.btn-primary {
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.btn-primary:hover {
  transform: translateY(-2px);
}

main section {
  padding-top: var(--section-gap);
  padding-bottom: var(--section-gap);
}

main :where(p, li) {
  line-height: 1.72;
}

main :where( article p) {
  max-width: 68ch;
}

.btn,
.btn-primary {
  border-radius: var(--radius-md);
}

.btn-primary,
.btn.btn-primary {
  background: var(--uniform-accent);
  border-color: var(--uniform-accent);
  color: #0a1414 !important;
}

/* Hero entrance: a short slide only. The text is never transparent, so it paints (and counts as the
   largest contentful paint) straight away. */
@media (prefers-reduced-motion: no-preference) {
  @keyframes fadeUp {
    from { transform: translateY(14px); }
    to { transform: translateY(0); }
  }
}

.card,
.page-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.card:hover,
.page-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(var(--color-success-rgb), 0.4); }
  50% { box-shadow: 0 0 0 6px rgba(var(--color-success-rgb), 0); }
}

/* Legend Styling Updates */
/* Legend dots match the fills in /assets/africa-map.webp */

.capture-note {
  font-size: 0.82rem;
}

/* Sign-up forms use the shared form handler (data-sx-form="updates"); text stays light on the dark band. */

.capture-note a {
  color: #ffffff;
  text-decoration: underline;
}

.module-tab {
  border: 1px solid var(--uniform-border);
  border-radius: var(--radius-pill);
  background: #ffffff;
  color: var(--uniform-primary);
  padding: 0.65rem 1rem;
  font-weight: 700;
  cursor: pointer;
}

.module-tab.active {
  background: var(--uniform-primary);
  color: #ffffff;
  border-color: var(--uniform-primary);
}

.module-content {
  display: none;
  animation: fadeUp 0.3s ease forwards;
}

.module-content.active {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 3rem;
  align-items: center;
}

/* main.css gives .quick-metrics white text for a dark gradient, then later swaps in a light
   gradient. Keep the text dark so the section stays readable on every page. */

/*
 * Results convention:
 * - Measured results: stat cards, only once a pilot has reported.
 * - Engineering and design targets: rows in a .spec-table, each labelled with .spec-tag ("Target").
 * - Projections: charts or tables on the investor page only.
 */

/* Ensure white-surface sections keep dark text when dark theme is active */

/* Extra strong overrides for specific elements that were still inheriting light colors */

@media (max-width: 900px) {
  
  .module-content.active {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {

  .container {
    max-width: 100%;
    min-width: 0;
  }

  
  main h1 {
    max-width: 100% !important;
    font-size: clamp(2rem, 8.6vw, 2.55rem) !important;
    line-height: 1.05;
    letter-spacing: 0;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: manual;
  }

  
  main :where( article p) {
    max-width: 100% !important;
    font-size: clamp(0.98rem, 3.8vw, 1.08rem);
    line-height: 1.55;
    overflow-wrap: break-word;
  }

  .btn,
  .btn-primary {
    max-width: 100%;
    white-space: normal;
  }
}

.video-tab-controls {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1rem 0;
}

.video-tab-content.hidden {
  display: none;
}

.video-tab-controls .tab-btn {
  border: 1px solid rgba(15, 23, 42, 0.2);
  background: #fff;
  border-radius: var(--radius-pill);
  padding: 0.5rem 0.9rem;
  cursor: pointer;
}

.video-tab-controls .tab-btn.active {
  border-color: var(--uniform-accent);
  background: rgba(232, 160, 32, 0.12);
}

.video-tab-content video {
  width: 100%;
  max-width: 960px;
  border-radius: var(--radius-md);
  display: block;
}

/* Plain statements, not badges: none of these is a certification. */
.footer-compliance {
  margin-top: 0.85rem;
}

.footer-compliance p {
  margin: 0 0 0.3rem;
  font-size: 0.8rem;
  line-height: 1.45;
  color: inherit;
  opacity: 0.9;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  html {
    scroll-behavior: auto;
  }
}

/* ---------- Accessibility (Phase 4) ---------- */

/* Links inside running text are underlined, so they are not told apart by colour alone (WCAG 1.4.1). */
main :where(p, li) a:not([class*="btn"]) {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* Headings promoted for a correct outline keep the size they had before. */
.minor-heading {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

/* Tap targets: at least 44 x 44 px for controls and for links that stand on their own (links inside a
   sentence are exempt). */

.resource-card a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

main select,
main input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
main textarea,
.filter-btn,
.tab-btn,
.module-tab {
  min-height: 44px;
}

.search-btn {
  min-width: 44px;
  min-height: 44px;
}

.skip-link {
  min-height: 44px;
  padding: 12px 16px;
}

/* FAQ: questions are headings, answers always shown. */

/* Hero text contrast.
   Heroes built on main.css sit on a dark mesh gradient (.hero-background), but grid-typography-system.css
   colours their subtitle charcoal and the outline button dark teal, so both were close to invisible. The subtitle was also centred under a left-aligned heading.
   :where() keeps these at the specificity of the rules they replace, so home-page.css still styles the homepage hero. */

/* Heroes built on home.css (the solutions pages) have a light background, but home.css colours their text white. */

/* Service pages (services/*.html). Variants of the existing card and grid, not new components. */

/* Short label-and-line items, five across on a wide screen. */

/* A card that is a statement, not a link: no hover lift. */
.page-card--plain,
.page-card--plain:hover {
  transform: none;
  box-shadow: var(--shadow-sm);
}

/* An emphasised line under a list. Uses the brand accent as a rule, not an alert colour. */

/* Homepage development-alignment strip: the SDG focus areas as text, and the integration line that replaced the
   logo strip. */

/* Trust chips are a list; the tick is drawn, not typed, so screen readers do not announce it. */

/* ---- styles/site-chrome.css ---- */
/*
 * Shared site chrome: header, footer, demo modal and forms.
 * The markup lives in /includes and is stamped into every page by tools/build-site.mjs.
 * Class names start with "sx-" so the older page stylesheets (main.css, home.css, selnexa-main.css)
 * don't reach them; element+class selectors below win over their bare header/footer rules.
 */

/* Montserrat, self-hosted: variable weight 100-900, cut down from Google Fonts' Latin file (v31) to Basic Latin,
   Latin-1 and common punctuation, with kerning and ligatures (29 KB). Made with:
   pyftsubset montserrat-latin.woff2 --unicodes="U+0020-007E,U+00A0-00FF,U+2013-2014,U+2018-2019,U+201C-201D,U+2022,U+2026,U+20AC,U+2122,U+2190-2193"
     --layout-features="kern,liga,calt,mark,mkmk" --flavor=woff2
   Licence: /assets/fonts/LICENSE-montserrat.txt */
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/montserrat-latin-var.woff2") format("woff2");
  unicode-range: U+0020-007E, U+00A0-00FF, U+2013-2014, U+2018-2019, U+201C-201D, U+2022, U+2026, U+20AC, U+2122, U+2191, U+2193;
}

:root {
  --sx-teal: #004c4c;
  --sx-teal-hover: #0e7490;
  --sx-amber: #e8a020;
  --sx-amber-hover: #f0b545;
  --sx-navy: #0a2463;
  --sx-ink: #1f2937;
  --sx-muted: #4b5563;
  --sx-dark: #0a1414;
  --sx-error: #b42318;
  --sx-success: #05603a;
  --sx-font: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* The only corner and shadow values on the site. Every stylesheet loads this file last, so these win. */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;
  --radius-circle: 50%;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.1), 0 4px 8px rgba(0, 0, 0, 0.04);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Header ---------- */

header.sx-header {
  position: sticky;
  top: 0;
  left: auto;
  width: auto;
  z-index: 1000;
  margin: 0;
  padding: 0;
  background: rgba(249, 245, 238, 0.9);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: none;
  font-family: var(--sx-font);
  transition: background 0.25s ease, box-shadow 0.25s ease;
}

header.sx-header.is-scrolled {
  background: rgba(255, 255, 255, 0.96);
  box-shadow: var(--shadow-lg);
}

.sx-header__inner {
  max-width: 1360px;
  margin: 0 auto;
  padding: 0.6rem clamp(1rem, 3vw, 2rem);
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.sx-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
  min-height: 44px;
  color: var(--sx-navy);
  text-decoration: none;
}

.sx-brand picture {
  display: flex;
  flex-shrink: 0;
}

.sx-brand__logo {
  display: block;
  width: auto;
  height: 50px;
}

.sx-brand__text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.sx-brand__name {
  color: var(--sx-navy);
  font-size: 1.12rem;
  font-weight: 800;
  line-height: 1;
}

.sx-brand__tag {
  color: rgba(43, 45, 66, 0.75);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.sx-nav {
  margin-left: auto;
}

.sx-menu {
  display: flex;
  align-items: center;
  gap: clamp(0.15rem, 0.8vw, 0.8rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.sx-menu li {
  margin: 0;
}

.sx-menu a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 0.6rem;
  color: var(--sx-teal);
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.sx-menu a:hover {
  color: var(--sx-teal-hover);
}

.sx-menu a:not(.sx-cta)::after {
  content: "";
  position: absolute;
  left: 0.6rem;
  right: 0.6rem;
  bottom: 6px;
  height: 2px;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--sx-amber), transparent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

.sx-menu a:not(.sx-cta):hover::after,
.sx-menu a:not(.sx-cta):focus-visible::after {
  transform: scaleX(1);
}

.sx-menu a.sx-cta {
  margin-left: 0.35rem;
  padding: 0 1rem;
  border-radius: var(--radius-sm);
  background: var(--sx-amber);
  color: var(--sx-dark);
  font-weight: 700;
}

.sx-menu a.sx-cta:hover {
  background: var(--sx-amber-hover);
  color: var(--sx-dark);
}

.sx-nav-toggle {
  display: none;
}

.sx-progress {
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 0;
  height: 3px;
  background: linear-gradient(90deg, #00b4d8, #90e0ef);
  pointer-events: none;
}

header.sx-header :focus-visible,
footer.sx-footer :focus-visible,
.sx-modal :focus-visible {
  outline: 3px solid var(--sx-amber);
  outline-offset: 2px;
}

@media (max-width: 1023px) {
  .sx-header__inner {
    flex-wrap: wrap;
    row-gap: 0;
  }

  .sx-nav {
    flex-basis: 100%;
    margin-left: 0;
  }

  /* Without JavaScript the links stay visible as a wrapped row. */
  .sx-menu {
    flex-wrap: wrap;
  }

  .sx-header[data-menu-ready] .sx-nav-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 44px;
    min-height: 44px;
    margin-left: auto;
    padding: 0 0.8rem;
    border: 1px solid rgba(0, 76, 76, 0.3);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--sx-teal);
    font: inherit;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
  }

  .sx-nav-toggle__bars,
  .sx-nav-toggle__bars::before,
  .sx-nav-toggle__bars::after {
    display: block;
    width: 18px;
    height: 2px;
    border-radius: var(--radius-sm);
    background: currentColor;
    transition: transform 0.2s ease, opacity 0.2s ease;
  }

  .sx-nav-toggle__bars {
    position: relative;
  }

  .sx-nav-toggle__bars::before,
  .sx-nav-toggle__bars::after {
    content: "";
    position: absolute;
    left: 0;
  }

  .sx-nav-toggle__bars::before {
    top: -6px;
  }

  .sx-nav-toggle__bars::after {
    top: 6px;
  }

  .sx-header.is-open .sx-nav-toggle__bars {
    background: transparent;
  }

  .sx-header.is-open .sx-nav-toggle__bars::before {
    transform: translateY(6px) rotate(45deg);
  }

  .sx-header.is-open .sx-nav-toggle__bars::after {
    transform: translateY(-6px) rotate(-45deg);
  }

  .sx-header[data-menu-ready] .sx-nav {
    display: none;
  }

  .sx-header[data-menu-ready].is-open .sx-nav {
    display: block;
  }

  .sx-header[data-menu-ready] .sx-menu {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.25rem 0 0.9rem;
  }

  .sx-header[data-menu-ready] .sx-menu a {
    width: 100%;
    min-height: 48px;
    padding: 0 0.25rem;
    border-bottom: 1px solid rgba(15, 23, 42, 0.07);
  }

  .sx-header[data-menu-ready] .sx-menu a:not(.sx-cta)::after {
    display: none;
  }

  .sx-header[data-menu-ready] .sx-menu__cta {
    margin-top: 0.75rem;
  }

  .sx-header[data-menu-ready] .sx-menu a.sx-cta {
    justify-content: center;
    margin-left: 0;
    border-bottom: 0;
  }
}

@media (max-width: 420px) {
  .sx-brand__logo {
    height: 42px;
  }

  .sx-brand__name {
    font-size: 1rem;
  }

  .sx-brand__tag {
    font-size: 0.6rem;
  }
}

/* ---------- Footer ---------- */

footer.sx-footer {
  margin: 0;
  padding: clamp(2.5rem, 6vw, 4rem) 0 1.5rem;
  background: var(--sx-dark);
  color: rgba(255, 255, 255, 0.86);
  font-family: var(--sx-font);
}

.sx-footer__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(1rem, 3vw, 2rem);
}

.sx-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(5, minmax(0, 1fr));
  gap: 2rem;
}

.sx-footer__name {
  margin: 0 0 0.75rem;
  color: #ffffff !important;
  font-size: 1.35rem;
  font-weight: 800;
}

footer.sx-footer p {
  max-width: 36ch;
  margin: 0 0 0.75rem;
  color: rgba(255, 255, 255, 0.84) !important;
  font-size: 0.92rem;
  line-height: 1.6;
}

.sx-footer__heading {
  margin: 0 0 0.6rem;
  color: var(--sx-amber);
  font-family: var(--sx-font);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.3;
}

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

footer.sx-footer li {
  margin: 0;
  color: rgba(255, 255, 255, 0.84);
}

footer.sx-footer a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  color: rgba(255, 255, 255, 0.86) !important;
  font-size: 0.92rem;
  text-decoration: none;
}

footer.sx-footer a:hover {
  color: #ffffff !important;
  text-decoration: underline;
}

footer.sx-footer .footer-compliance p {
  font-size: 0.8rem;
}

.sx-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.sx-footer__bottom p {
  margin: 0;
}

@media (max-width: 1023px) {
  .sx-footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sx-footer__brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 768px) {
  footer.sx-footer a {
    min-width: 44px;
    min-height: 44px;
  }
}

@media (max-width: 480px) {
  .sx-footer__grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

/* ---------- Floating buttons and module finder (added by js/site-core.js) ---------- */

.sx-float {
  position: fixed;
  bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  z-index: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-circle);
  color: #ffffff;
  box-shadow: var(--shadow-md);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.sx-float:hover {
  transform: translateY(-2px);
}

.sx-float:focus-visible {
  outline: 3px solid var(--sx-amber);
  outline-offset: 3px;
}

.sx-whatsapp {
  left: 1rem;
  background: #128c4b;
}

.sx-whatsapp img {
  display: block;
  width: 28px;
  height: 28px;
}

.sx-finder-toggle {
  right: 1rem;
  background: linear-gradient(135deg, var(--sx-teal), var(--sx-teal-hover));
}

.sx-finder {
  position: fixed;
  right: 1rem;
  bottom: calc(5rem + env(safe-area-inset-bottom, 0px));
  z-index: 901;
  width: min(360px, calc(100vw - 2rem));
  max-height: min(70vh, 460px);
  overflow: auto;
  padding: 1rem;
  border: 1px solid rgba(10, 36, 99, 0.18);
  border-radius: var(--radius-md);
  background: #ffffff;
  color: var(--sx-ink);
  box-shadow: var(--shadow-lg);
  font-family: var(--sx-font);
}

.sx-finder[hidden] {
  display: none !important;
}

.sx-finder__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.sx-finder__head h2 {
  margin: 0;
  color: var(--sx-navy);
  font-size: 1.05rem;
}

.sx-finder__close {
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--sx-ink);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
}

.sx-finder__messages {
  max-height: 170px;
  overflow: auto;
  margin-bottom: 0.75rem;
  font-size: 0.92rem;
}

.sx-finder__messages p {
  margin: 0 0 0.5rem;
  color: var(--sx-ink);
}

.sx-finder__controls {
  display: grid;
  gap: 0.5rem;
}

.sx-finder__controls label {
  color: var(--sx-ink);
  font-size: 0.9rem;
  font-weight: 600;
}

.sx-finder__controls select,
.sx-finder__suggest,
.sx-finder__demo {
  width: 100%;
  min-height: 44px;
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: 0.95rem;
}

.sx-finder__controls select {
  padding: 0 0.6rem;
  border: 1px solid #8a94a6;
  background: #ffffff;
  color: var(--sx-ink);
}

.sx-finder__suggest {
  border: 0;
  background: var(--sx-teal);
  color: #ffffff;
  font-weight: 700;
  cursor: pointer;
}

a.sx-finder__demo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--sx-amber);
  color: var(--sx-dark);
  font-weight: 700;
  text-decoration: none;
}

@media (max-width: 480px) {
  .sx-float {
    width: 48px;
    height: 48px;
  }

  .sx-finder {
    right: 0.75rem;
    left: 0.75rem;
    width: auto;
  }
}

@media print {
  .sx-float,
  .sx-finder {
    display: none !important;
  }
}

/* ---------- Demo modal ---------- */

dialog.sx-modal {
  width: min(680px, calc(100vw - 2rem));
  max-height: calc(100vh - 2rem);
  max-height: calc(100dvh - 2rem);
  margin: auto;
  padding: 0;
  overflow: auto;
  border: 0;
  border-radius: var(--radius-md);
  background: #ffffff;
  color: var(--sx-ink);
  box-shadow: var(--shadow-lg);
  font-family: var(--sx-font);
}

dialog.sx-modal::backdrop {
  background: rgba(10, 20, 20, 0.65);
}

.sx-modal__panel {
  position: relative;
  padding: clamp(1.25rem, 4vw, 2rem);
}

.sx-modal__panel h2 {
  margin: 0 2.5rem 0.4rem 0;
  color: var(--sx-navy);
  font-size: 1.5rem;
  line-height: 1.2;
}

.sx-modal__intro {
  margin: 0 0 1rem;
  color: var(--sx-muted);
}

.sx-modal__close {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--sx-ink);
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
}

.sx-modal__close:hover {
  background: rgba(15, 23, 42, 0.06);
}

/* ---------- Forms ---------- */

.sx-form {
  position: relative;
  font-family: var(--sx-font);
  text-align: left;
}

.sx-form__note {
  margin: 0 0 1rem;
  color: var(--sx-muted);
  font-size: 0.9rem;
}

.sx-form a,
.sx-modal a,
.sx-form-done a {
  color: var(--sx-teal);
  text-decoration: underline;
}

.sx-form__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem 1rem;
}

.sx-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin: 0;
}

.sx-field--wide {
  grid-column: 1 / -1;
}

.sx-field label {
  color: var(--sx-ink);
  font-size: 0.92rem;
  font-weight: 600;
}

.sx-field input,
.sx-field select,
.sx-field textarea {
  width: 100%;
  min-height: 44px;
  padding: 0.6rem 0.75rem;
  border: 1px solid #8a94a6;
  border-radius: var(--radius-sm);
  background: #ffffff;
  color: var(--sx-ink);
  font: inherit;
  font-size: 1rem;
}

.sx-field textarea {
  resize: vertical;
}

.sx-field input:focus-visible,
.sx-field select:focus-visible,
.sx-field textarea:focus-visible {
  border-color: var(--sx-teal);
  outline: 3px solid rgba(232, 160, 32, 0.75);
  outline-offset: 1px;
}

.sx-field [aria-invalid="true"] {
  border-color: var(--sx-error);
}

.sx-error {
  margin: 0;
  color: var(--sx-error);
  font-size: 0.85rem;
}

.sx-req {
  color: var(--sx-error);
}

.sx-field--check {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.35rem 0.65rem;
  margin: 1rem 0;
}

.sx-field--check input {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  min-height: 0;
  margin: 0.1rem 0 0;
  padding: 0;
}

.sx-field--check label {
  flex: 1 1 0;
  min-width: 0;
  font-weight: 400;
}

.sx-field--check .sx-error {
  flex-basis: 100%;
  padding-left: calc(22px + 0.65rem);
}

.sx-hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.sx-form__submit {
  min-height: 48px;
}

.sx-form__status {
  margin: 0.75rem 0 0;
  font-size: 0.95rem;
}

.sx-form__status.is-error {
  color: var(--sx-error);
}

.sx-form__status.is-success {
  color: var(--sx-success);
}

.sx-form-done {
  padding: 1.25rem;
  border-radius: var(--radius-md);
  background: #ecfdf3;
  color: var(--sx-success);
}

.sx-form-done h3 {
  margin: 0 0 0.5rem;
  color: var(--sx-success);
  font-size: 1.15rem;
}

.sx-form-done p {
  margin: 0 0 0.5rem;
  color: var(--sx-ink);
}

@media (max-width: 600px) {
  .sx-form__grid {
    grid-template-columns: 1fr;
  }
}

/* ---- styles/icons.css ---- */
/*
 * Icons: a subset of Font Awesome Free 6.4.0 by Fonticons, Inc. (https://fontawesome.com),
 * renamed as the SIL Open Font License 1.1 requires. Licence: /assets/fonts/LICENSE-icons.txt
 * Generated by tools/build-icons.py; do not edit by hand.
 */

@font-face {
  font-family: "SelNexa Icons";
  font-style: normal;
  font-weight: 900;
  font-display: block;
  src: url("/assets/fonts/icons-solid.woff2") format("woff2");
}

@font-face {
  font-family: "SelNexa Icons";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("/assets/fonts/icons-regular.woff2") format("woff2");
}

@font-face {
  font-family: "SelNexa Brand Icons";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("/assets/fonts/icons-brands.woff2") format("woff2");
}

 .fab {
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  line-height: 1;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.fab { font-family: "SelNexa Brand Icons"; font-weight: 400; }
.fa-facebook::before { content: "\f09a"; }
.fa-linkedin::before { content: "\f08c"; }
.fa-twitter::before { content: "\f099"; }