/*
 Theme Name:  MunicipalGIS Dark
 Theme URI:   https://github.com/TrueNorthSolutions/MunicipalGIS
 Description: Dark theme for the MunicipalGIS marketing site. Mirrors the visual
              identity of the GIS web application — deep navy backgrounds,
              blue-gradient accents, and muted light text — while keeping all
              typography settings from the standard MunicipalGIS theme.
 Version:     1.0.0
 Author:      TrueNorth Solutions
 Author URI:  https://truenorthsolutions.ca
 License:     GNU General Public License v2 or later
 License URI: https://www.gnu.org/licenses/gpl-2.0.html
 Text Domain: municipalgis
 Tags:        municipal, government, gis, dark, accessibility, responsive
*/

/* ── CSS Custom Properties (Design Tokens) ─────────────────────────────────── */
:root {
    /* ── Brand colours — mapped from GIS frontend theme.ts palette ─── */
    --clr-primary:        #2e86c1;   /* GIS gradEnd    — primary interactive blue  */
    --clr-primary-dark:   #1a5276;   /* GIS gradStart  — darker blue / gradients   */
    --clr-primary-light:  #0f2033;   /* GIS bgHover    — hover / selected surfaces */
    --clr-accent:         #4fc3f7;   /* GIS textBlue   — highlight / link accent   */
    --clr-accent-dark:    #2e86c1;
    --clr-accent-light:   #1e3a4a;   /* GIS borderMid  — accent-tinted dividers    */

    /* ── Dark background system — matches GIS app layers ─────────────── */
    --clr-bg:             #0a1520;   /* GIS bgDeep  — page / base background       */
    --clr-surface:        #0d1b2a;   /* GIS bgRow   — card / panel surfaces        */
    --clr-border:         #1e3a4a;   /* GIS borderMid                               */
    --clr-border-dark:    #131f2b;   /* GIS borderDark — subtle nested dividers    */
    --clr-text:           #e0e0e0;   /* GIS textPrimary                             */
    --clr-text-muted:     #c8dce8;   /* GIS textMuted                               */
    --clr-white:          #ffffff;

    /* ── Typography — unchanged from standard theme ───────────────────── */
    --font-sans:   "Inter", system-ui, -apple-system, sans-serif;
    --font-mono:   "Ubuntu Mono", monospace;
    --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:   1.875rem;
    --text-4xl:   2.25rem;
    --text-5xl:   3rem;

    /* ── Spacing — unchanged ──────────────────────────────────────────── */
    --space-1:  0.25rem;
    --space-2:  0.5rem;
    --space-3:  0.75rem;
    --space-4:  1rem;
    --space-6:  1.5rem;
    --space-8:  2rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;

    /* ── Layout — unchanged ──────────────────────────────────────────── */
    --container-max: 1200px;
    --radius-sm:  0.25rem;
    --radius-md:  0.5rem;
    --radius-lg:  1rem;

    /* ── Shadows — deepened for dark backgrounds ─────────────────────── */
    --shadow-sm:  0 1px 3px rgba(0,0,0,.5), 0 1px 2px rgba(0,0,0,.4);
    --shadow-md:  0 4px 8px rgba(0,0,0,.5), 0 2px 4px rgba(0,0,0,.4);
    --shadow-lg:  0 10px 20px rgba(0,0,0,.5), 0 4px 8px rgba(0,0,0,.35);

    /* ── Transitions — unchanged ─────────────────────────────────────── */
    --transition-fast:   150ms ease;
    --transition-normal: 250ms ease;

    /* ── GIS app gradient (used across title bars + hero) ────────────── */
    --gis-gradient: linear-gradient(90deg, var(--clr-primary-dark) 0%, var(--clr-primary) 100%);
    --gis-gradient-diag: linear-gradient(135deg, var(--clr-primary-dark) 0%, var(--clr-primary) 100%);
}

/* ── Reset & Base ──────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; font-size: 16px; }

body {
    font-family: var(--font-sans);
    font-size:   var(--text-base);
    line-height: 1.7;
    color:       var(--clr-text);
    background:  var(--clr-bg);
    -webkit-font-smoothing: antialiased;
}

/* Global scrollbar — mirrors GIS app */
::-webkit-scrollbar       { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--clr-bg); }
::-webkit-scrollbar-thumb { background: var(--clr-primary); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--clr-accent); }
* { scrollbar-width: thin; scrollbar-color: var(--clr-primary) var(--clr-bg); }

/* Selection highlight */
::selection { background: rgba(46,134,193,.35); color: var(--clr-white); }

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

a {
    color:           var(--clr-accent);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition:      color var(--transition-fast);
}
a:hover { color: var(--clr-white); text-decoration-color: var(--clr-primary); }

/* ── Skip Link (accessibility) ─────────────────────────────────────────────── */
.skip-link {
    position:   absolute;
    top:        -3rem;
    left:       var(--space-4);
    padding:    var(--space-2) var(--space-4);
    background: var(--gis-gradient);
    color:      var(--clr-white);
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    font-weight:   700;
    z-index:    9999;
    transition: top var(--transition-fast);
}
.skip-link:focus { top: 0; }

/* ── Layout containers ─────────────────────────────────────────────────────── */
.container {
    width:     100%;
    max-width: var(--container-max);
    margin:    0 auto;
    padding:   0 var(--space-6);
}

/* ── Site Header ───────────────────────────────────────────────────────────── */
.site-header {
    position:   sticky;
    top:        0;
    z-index:    100;
    background: rgba(10, 21, 32, 0.96);  /* bgDeep with slight transparency */
    border-bottom: 1px solid var(--clr-border);
    box-shadow: 0 2px 8px rgba(0,0,0,.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.site-header__inner {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    height:          4rem;
    gap:             var(--space-6);
}

.site-logo {
    display:     flex;
    align-items: center;
    gap:         var(--space-3);
    text-decoration: none;
}
.site-logo__mark {
    width:  2.5rem;
    height: 2.5rem;
    background: var(--gis-gradient);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--clr-white);
    font-weight: 800;
    font-size: var(--text-sm);
    flex-shrink: 0;
    letter-spacing: 0.02em;
}
.site-logo__text {
    font-size:   var(--text-lg);
    font-weight: 700;
    color:       var(--clr-text);
    line-height: 1.2;
}
.site-logo__text span { display: block; font-size: var(--text-xs); font-weight: 400; color: var(--clr-text-muted); }

/* ── Primary Navigation ─────────────────────────────────────────────────────── */
.primary-nav { display: flex; }
.primary-nav ul {
    list-style: none;
    display:    flex;
    gap:        var(--space-1);
}
.primary-nav a {
    display:     block;
    padding:     var(--space-2) var(--space-3);
    font-size:   var(--text-sm);
    font-weight: 500;
    color:       var(--clr-text-muted);
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition:  background var(--transition-fast), color var(--transition-fast);
    border: 1px solid transparent;
}
.primary-nav a:hover,
.primary-nav .current-menu-item > a {
    background: var(--clr-primary-light);
    color:      var(--clr-accent);
    border-color: var(--clr-border);
    text-decoration: none;
}

.nav-cta {
    background:   var(--gis-gradient) !important;
    color:        var(--clr-white)    !important;
    border-radius: var(--radius-md)   !important;
    border-color: transparent         !important;
}
.nav-cta:hover {
    background: linear-gradient(90deg, var(--clr-primary) 0%, var(--clr-accent) 100%) !important;
    color: var(--clr-white) !important;
}

.nav-signin {
    display:       inline-flex;
    align-items:   center;
    gap:           6px;
    padding:       8px 14px;
    border:        1px solid var(--clr-primary);
    border-radius: var(--radius-md);
    color:         var(--clr-accent);
    font-size:     .875rem;
    font-weight:   600;
    line-height:   1;
    text-decoration: none;
    white-space:   nowrap;
    transition:    background .2s, color .2s, border-color .2s;
}
.nav-signin:hover {
    background:   var(--clr-primary);
    border-color: var(--clr-primary);
    color:        var(--clr-white);
}

/* Hamburger (mobile) */
.nav-toggle {
    display:    none;
    background: none;
    border:     1px solid var(--clr-border);
    cursor:     pointer;
    padding:    var(--space-2);
    color:      var(--clr-text-muted);
    border-radius: var(--radius-sm);
    transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}
.nav-toggle:hover { color: var(--clr-white); background: var(--clr-primary-light); border-color: var(--clr-primary); }

/* ── Hero Section ───────────────────────────────────────────────────────────── */
.hero {
    padding:    var(--space-24) 0;
    background: linear-gradient(135deg, #060e18 0%, var(--clr-primary-dark) 55%, var(--clr-primary) 100%);
    color:      var(--clr-white);
    position:   relative;
    overflow:   hidden;
}
.hero::before {
    content:  "";
    position: absolute;
    inset:    0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%234fc3f7' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    pointer-events: none;
}
/* Subtle bottom-edge gradient dissolve into page bg */
.hero::after {
    content:  "";
    position: absolute;
    bottom:   0;
    left:     0;
    right:    0;
    height:   80px;
    background: linear-gradient(to bottom, transparent, var(--clr-bg));
    pointer-events: none;
}

.hero__inner {
    display:     grid;
    grid-template-columns: 1fr 1fr;
    gap:         var(--space-16);
    align-items: center;
    position:    relative;
    z-index:     1;
}
.hero__badge {
    display:       inline-flex;
    align-items:   center;
    gap:           var(--space-2);
    padding:       var(--space-1) var(--space-3);
    background:    rgba(79,195,247,.15);
    border:        1px solid rgba(79,195,247,.3);
    border-radius: var(--radius-lg);
    font-size:     var(--text-xs);
    font-weight:   600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color:         var(--clr-accent);
    margin-bottom: var(--space-4);
}
.hero__title {
    font-size:   var(--text-5xl);
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: var(--space-6);
    color:       var(--clr-white);
}
.hero__title span { color: var(--clr-accent); }
.hero__lead {
    font-size:    var(--text-lg);
    line-height:  1.8;
    opacity:      0.85;
    color:        rgba(255,255,255,.85);
    margin-bottom: var(--space-8);
}
.hero__actions { display: flex; gap: var(--space-4); flex-wrap: wrap; }

.hero__visual {
    background:   rgba(79,195,247,.05);
    border:       1px solid rgba(79,195,247,.2);
    border-radius: var(--radius-lg);
    aspect-ratio: 4/3;
    display:      flex;
    flex-direction: column;
    align-items:  center;
    justify-content: center;
    gap:          var(--space-3);
    color:        rgba(79,195,247,.5);
    font-size:    var(--text-sm);
    box-shadow:   0 0 40px rgba(46,134,193,.15) inset;
}
.hero__visual svg { opacity: 0.5; }

/* ── Buttons ────────────────────────────────────────────────────────────────── */
.btn {
    display:       inline-flex;
    align-items:   center;
    gap:           var(--space-2);
    padding:       var(--space-3) var(--space-6);
    border-radius: var(--radius-md);
    font-size:     var(--text-base);
    font-weight:   600;
    text-decoration: none;
    border:        2px solid transparent;
    cursor:        pointer;
    transition:    all var(--transition-fast);
    white-space:   nowrap;
}
/* Primary — white / very light on dark hero gradient */
.btn-primary {
    background: var(--clr-white);
    color:      var(--clr-primary-dark);
}
.btn-primary:hover { background: #cce4f7; color: var(--clr-primary-dark); text-decoration: none; }

/* Outline — used on hero dark background */
.btn-outline {
    background:   transparent;
    color:        var(--clr-white);
    border-color: rgba(255,255,255,.45);
}
.btn-outline:hover { background: rgba(255,255,255,.1); border-color: var(--clr-white); text-decoration: none; }

.btn-ghost {
    background:   rgba(255,255,255,.06);
    color:        var(--clr-text-muted);
    border-color: rgba(255,255,255,.2);
}
.btn-ghost:hover { background: rgba(255,255,255,.12); color: var(--clr-white); border-color: rgba(255,255,255,.45); text-decoration: none; }

/* Solid — used inline in content areas */
.btn-solid {
    background: var(--gis-gradient);
    color:      var(--clr-white);
    border:     none;
}
.btn-solid:hover { background: linear-gradient(90deg, var(--clr-primary) 0%, var(--clr-accent) 100%); text-decoration: none; }

/* ── Feature / Stats strip ─────────────────────────────────────────────────── */
.stats-strip {
    background:    var(--clr-surface);
    border-top:    1px solid var(--clr-border);
    border-bottom: 1px solid var(--clr-border);
    padding:       var(--space-8) 0;
}
.stats-strip__grid {
    display:               grid;
    grid-template-columns: repeat(4, 1fr);
    gap:                   var(--space-8);
    text-align:            center;
}
.stat__number {
    font-size:   var(--text-4xl);
    font-weight: 800;
    color:       var(--clr-accent);
    line-height: 1;
    margin-bottom: var(--space-1);
    letter-spacing: -0.02em;
}
.stat__label {
    font-size:  var(--text-sm);
    color:      var(--clr-text-muted);
    font-weight: 500;
}

/* ── Section generic ───────────────────────────────────────────────────────── */
.section {
    padding: var(--space-20) 0;
}
.section--alt { background: var(--clr-surface); }

.section__header {
    text-align:    center;
    max-width:     640px;
    margin:        0 auto var(--space-12);
}
.section__eyebrow {
    display:       inline-block;
    font-size:     var(--text-xs);
    font-weight:   700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color:         var(--clr-accent);
    margin-bottom: var(--space-3);
}
.section__title {
    font-size:     var(--text-3xl);
    font-weight:   800;
    line-height:   1.2;
    color:         var(--clr-text);
    margin-bottom: var(--space-4);
}
.section__lead {
    font-size:  var(--text-lg);
    color:      var(--clr-text-muted);
    line-height: 1.7;
}

/* ── Feature cards ─────────────────────────────────────────────────────────── */
.features-grid {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   var(--space-6);
}
.feature-card {
    background:    var(--clr-surface);
    border:        1px solid var(--clr-border);
    border-radius: var(--radius-lg);
    padding:       var(--space-8);
    transition:    box-shadow var(--transition-normal), transform var(--transition-normal), border-color var(--transition-normal);
}
.feature-card:hover {
    box-shadow:   0 0 0 1px var(--clr-primary), var(--shadow-lg);
    transform:    translateY(-2px);
    border-color: var(--clr-primary);
}
.feature-card__icon {
    width:         3rem;
    height:        3rem;
    background:    rgba(46,134,193,.15);
    border:        1px solid rgba(46,134,193,.2);
    border-radius: var(--radius-md);
    display:       flex;
    align-items:   center;
    justify-content: center;
    margin-bottom: var(--space-4);
    color:         var(--clr-accent);
}
.feature-card__title {
    font-size:     var(--text-xl);
    font-weight:   700;
    color:         var(--clr-text);
    margin-bottom: var(--space-2);
}
.feature-card__body {
    font-size:  var(--text-base);
    color:      var(--clr-text-muted);
    line-height: 1.7;
}

/* ── CTA Band — blue gradient matching GIS hero ──────────────────────────────── */
.cta-band {
    background: var(--gis-gradient-diag);
    color:      var(--clr-white);
    padding:    var(--space-20) 0;
    text-align: center;
    position:   relative;
    overflow:   hidden;
}
.cta-band::before {
    content:  "";
    position: absolute;
    inset:    0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%234fc3f7' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    pointer-events: none;
}
.cta-band__title {
    font-size:     var(--text-4xl);
    font-weight:   800;
    margin-bottom: var(--space-4);
    position:      relative;
    z-index:       1;
}
.cta-band__body {
    font-size:     var(--text-lg);
    opacity:       .9;
    max-width:     600px;
    margin:        0 auto var(--space-8);
    position:      relative;
    z-index:       1;
}
.cta-band .btn-primary {
    position: relative;
    z-index:  1;
}

/* ── Footer ─────────────────────────────────────────────────────────────────── */
.site-footer {
    background:   #060e18;   /* deeper than bgDeep for visual separation */
    color:        rgba(200,220,232,.7);
    padding:      var(--space-16) 0 var(--space-8);
    border-top:   1px solid var(--clr-border);
}
.site-footer__grid {
    display:               grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap:                   var(--space-12);
    margin-bottom:         var(--space-12);
}
.footer-brand__desc {
    font-size:     var(--text-sm);
    line-height:   1.8;
    margin-top:    var(--space-4);
    margin-bottom: var(--space-6);
    color:         rgba(200,220,232,.6);
}
.footer-widget__title {
    font-size:      var(--text-sm);
    font-weight:    700;
    color:          var(--clr-white);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom:  var(--space-4);
}
.footer-widget ul { list-style: none; }
.footer-widget li { margin-bottom: var(--space-2); }
.footer-widget a {
    font-size:       var(--text-sm);
    color:           rgba(200,220,232,.55);
    text-decoration: none;
    transition:      color var(--transition-fast);
}
.footer-widget a:hover { color: var(--clr-accent); }

.site-footer__bottom {
    border-top:  1px solid rgba(79,195,247,.1);
    padding-top: var(--space-8);
    display:     flex;
    align-items: center;
    justify-content: space-between;
    font-size:   var(--text-sm);
    color:       rgba(200,220,232,.4);
    flex-wrap:   wrap;
    gap:         var(--space-4);
}
.footer-legal { display: flex; gap: var(--space-4); }
.footer-legal a { color: rgba(200,220,232,.4); text-decoration: none; }
.footer-legal a:hover { color: var(--clr-accent); }

/* ── Page / Post content ──────────────────────────────────────────────────── */
.page-header {
    background: var(--gis-gradient-diag);
    color:      var(--clr-white);
    padding:    var(--space-16) 0;
    position:   relative;
    overflow:   hidden;
}
.page-header::after {
    content:  "";
    position: absolute;
    inset:    0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%234fc3f7' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    pointer-events: none;
}
.page-header__title {
    font-size:   var(--text-4xl);
    font-weight: 800;
    position:    relative;
    z-index:     1;
    color:       var(--clr-white);
}

.content-area {
    padding: var(--space-16) 0;
}
.entry-content { max-width: 720px; }
.entry-content h1, .entry-content h2, .entry-content h3,
.entry-content h4, .entry-content h5, .entry-content h6 {
    font-weight: 700;
    line-height: 1.3;
    margin-top:  var(--space-8);
    margin-bottom: var(--space-3);
    color: var(--clr-text);
}
.entry-content h2 { color: var(--clr-accent); }
.entry-content p { margin-bottom: var(--space-4); color: var(--clr-text-muted); }
.entry-content ul, .entry-content ol { margin-bottom: var(--space-4); padding-left: var(--space-6); color: var(--clr-text-muted); }
.entry-content li { margin-bottom: var(--space-2); }
.entry-content a { color: var(--clr-accent); }
.entry-content a:hover { color: var(--clr-white); }
.entry-content blockquote {
    border-left:   3px solid var(--clr-primary);
    padding-left:  var(--space-6);
    margin:        var(--space-6) 0;
    color:         var(--clr-text-muted);
    font-style:    italic;
    background:    var(--clr-surface);
    padding-top:   var(--space-3);
    padding-bottom: var(--space-3);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.entry-content code {
    font-family:  var(--font-mono);
    font-size:    var(--text-sm);
    background:   var(--clr-surface);
    border:       1px solid var(--clr-border);
    border-radius: var(--radius-sm);
    padding:      0.1em 0.4em;
    color:        var(--clr-accent);
}
.entry-content pre {
    background:    #060e18;
    color:         var(--clr-text);
    border:        1px solid var(--clr-border);
    border-radius: var(--radius-md);
    padding:       var(--space-6);
    overflow-x:    auto;
    margin-bottom: var(--space-4);
}
.entry-content pre code { background: none; border: none; padding: 0; color: var(--clr-text-muted); }

/* Post meta / entry header */
.entry-header { margin-bottom: var(--space-4); }
.entry-title, .entry-title a { color: var(--clr-text); text-decoration: none; }
.entry-title a:hover { color: var(--clr-accent); }

/* Pagination */
.entry-pagination .page-numbers {
    display: inline-flex;
    gap: var(--space-2);
    flex-wrap: wrap;
    margin-top: var(--space-4);
}
.page-numbers a, .page-numbers span {
    padding:       var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    font-size:     var(--text-sm);
    font-weight:   500;
    color:         var(--clr-text-muted);
    background:    var(--clr-surface);
    border:        1px solid var(--clr-border);
    text-decoration: none;
    transition:    all var(--transition-fast);
}
.page-numbers a:hover  { background: var(--clr-primary-light); color: var(--clr-accent); border-color: var(--clr-primary); }
.page-numbers .current { background: var(--gis-gradient); color: var(--clr-white); border-color: transparent; }

/* ── Responsive ─────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .hero__inner { grid-template-columns: 1fr; }
    .hero__visual { display: none; }
    .stats-strip__grid { grid-template-columns: repeat(2, 1fr); }
    .features-grid { grid-template-columns: repeat(2, 1fr); }
    .site-footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
    .hero        { padding: var(--space-16) 0; }
    .hero__title { font-size: var(--text-3xl); }
    .features-grid     { grid-template-columns: 1fr; }
    .stats-strip__grid { grid-template-columns: repeat(2, 1fr); }
    .site-footer__grid { grid-template-columns: 1fr; }
    .site-footer__bottom { flex-direction: column; text-align: center; }

    /* Mobile nav */
    .primary-nav {
        display:        none;
        position:       fixed;
        inset:          4rem 0 0;
        background:     rgba(10, 21, 32, 0.98);
        flex-direction: column;
        padding:        var(--space-6);
        border-top:     1px solid var(--clr-border);
        overflow-y:     auto;
        z-index:        99;
        backdrop-filter: blur(8px);
    }
    .primary-nav.is-open { display: flex; }
    .primary-nav ul { flex-direction: column; gap: var(--space-1); }
    .primary-nav a { font-size: var(--text-base); padding: var(--space-3); }
    .nav-toggle { display: block; }
}

/* ── WordPress native blocks compatibility ───────────────────────────────── */
.wp-block-image { margin: var(--space-6) 0; }
.wp-block-image img { border-radius: var(--radius-md); }
.wp-block-quote {
    border-left: 3px solid var(--clr-primary);
    padding-left: var(--space-6);
    padding-top: var(--space-3);
    padding-bottom: var(--space-3);
    margin: var(--space-6) 0;
    font-style: italic;
    color: var(--clr-text-muted);
    background: var(--clr-surface);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.wp-block-separator { border-color: var(--clr-border); margin: var(--space-8) 0; }
.wp-block-code {
    background: #060e18;
    border:     1px solid var(--clr-border);
    border-radius: var(--radius-md);
    color: var(--clr-text-muted);
}
.wp-block-table   { color: var(--clr-text); }
.wp-block-table td, .wp-block-table th {
    border-color: var(--clr-border);
    padding: var(--space-2) var(--space-3);
}
.wp-block-table th { background: var(--clr-surface); color: var(--clr-accent); font-weight: 700; }
.wp-block-table tr:nth-child(even) td { background: rgba(13,27,42,.5); }

/* Block editor styles */
.wp-block-button__link {
    background: var(--gis-gradient);
    color: var(--clr-white) !important;
    border-radius: var(--radius-md) !important;
}
.wp-block-button__link:hover { opacity: 0.9; }
.is-style-outline .wp-block-button__link {
    background: transparent;
    border: 2px solid var(--clr-primary) !important;
    color: var(--clr-accent) !important;
}

/* Forms */
input[type="text"], input[type="email"], input[type="search"],
input[type="url"], input[type="tel"], textarea, select {
    background:  var(--clr-surface);
    border:      1px solid var(--clr-border);
    border-radius: var(--radius-sm);
    color:       var(--clr-text);
    padding:     var(--space-2) var(--space-3);
    font-family: var(--font-sans);
    font-size:   var(--text-base);
    width:       100%;
    transition:  border-color var(--transition-fast), box-shadow var(--transition-fast);
    outline:     none;
}
input:focus, textarea:focus, select:focus {
    border-color: var(--clr-primary);
    box-shadow:   0 0 0 3px rgba(46,134,193,.2);
}

/* ── Accessibility ──────────────────────────────────────────────────────────── */
:focus-visible {
    outline:        2px solid var(--clr-accent);
    outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; }
    html { scroll-behavior: auto; }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   NEW PAGES — Why Us · Roadmap · Grants · Front-page additions
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ── Compare table (Why Us page) ─────────────────────────────────────────────── */
.compare-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--radius-md);
    border: 1px solid var(--clr-border);
}
.compare-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.compare-table thead tr { background: var(--clr-primary); color: #fff; }
.compare-table th { padding: var(--space-3) var(--space-4); text-align: left; font-weight: 600; }
.compare-table td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--clr-border); vertical-align: middle; line-height: 1.5; color: var(--clr-text-muted); }
.compare-table tbody tr:last-child td { border-bottom: none; }
.compare-table tbody tr:nth-child(even) td { background: var(--clr-surface); }
.compare-table__ours { background: rgba(46,134,193,.08) !important; color: var(--clr-text); font-weight: 500; }
.compare-table__check { display: inline-block; vertical-align: -3px; margin-right: var(--space-2); stroke: var(--clr-primary); }

/* ── FAQ list ────────────────────────────────────────────────────────────────── */
.faq-list { display: flex; flex-direction: column; gap: var(--space-4); max-width: 860px; margin: 0 auto; }
.faq-item { background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: var(--radius-md); padding: var(--space-5) var(--space-6); }
.faq-item__q { font-size: var(--text-base); font-weight: 600; color: var(--clr-text); margin-bottom: var(--space-3); }
.faq-item[open] { border-color: var(--clr-primary); }
.faq-item summary.faq-item__question { font-size: var(--text-base); font-weight: 600; color: var(--clr-text); cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; }
.faq-item summary.faq-item__question::after { content: '+'; font-size: var(--text-lg); color: var(--clr-primary); flex-shrink: 0; }
.faq-item[open] summary.faq-item__question::after { content: '−'; }
.faq-item__a, .faq-item__answer { font-size: var(--text-sm); color: var(--clr-text-muted); line-height: 1.7; margin-top: var(--space-3); }

/* ── Roadmap page ─────────────────────────────────────────────────────────────── */
.roadmap-badge { display: inline-flex; align-items: center; gap: var(--space-1); background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: 999px; padding: var(--space-1) var(--space-4); font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: var(--space-4) !important; color: var(--clr-text-muted); }
.roadmap-badge--live   { border-color: #22c55e; color: #4ade80; }
.roadmap-badge--indev  { border-color: #f59e0b; color: #fbbf24; }
.roadmap-badge--planned{ border-color: #3b82f6; color: #60a5fa; }
.roadmap-badge--future { border-color: #8b5cf6; color: #a78bfa; }

.features-grid--3col { grid-template-columns: repeat(3, 1fr); }
.feature-card--compact .feature-card__title { font-size: var(--text-base); }
.feature-card--compact .feature-card__body  { font-size: var(--text-sm); }

.roadmap-list { display: flex; flex-direction: column; gap: var(--space-4); }
.roadmap-item { display: flex; gap: var(--space-6); background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: var(--radius-md); padding: var(--space-5) var(--space-6); align-items: flex-start; }
.roadmap-item__quarter { flex-shrink: 0; width: 80px; font-size: var(--text-xs); font-weight: 700; color: var(--clr-primary); text-transform: uppercase; letter-spacing: 0.06em; padding-top: var(--space-1); }
.roadmap-item__title { font-size: var(--text-base); font-weight: 600; color: var(--clr-text); margin-bottom: var(--space-2); }
.roadmap-item__body  { font-size: var(--text-sm); color: var(--clr-text-muted); line-height: 1.6; }

.expansion-timeline { display: flex; flex-direction: column; gap: 0; position: relative; }
.expansion-timeline::before { content: ''; position: absolute; left: 52px; top: 0; bottom: 0; width: 2px; background: var(--clr-border); }
.timeline-step { display: flex; gap: var(--space-6); align-items: flex-start; padding: var(--space-5) 0; }
.timeline-step__year { flex-shrink: 0; width: 105px; font-size: var(--text-sm); font-weight: 700; color: var(--clr-primary); padding-top: var(--space-1); text-align: right; }
.timeline-step__content { padding-left: var(--space-4); }
.timeline-step__label { font-size: var(--text-base); font-weight: 600; color: var(--clr-text); margin-bottom: var(--space-2); }
.timeline-step__desc  { font-size: var(--text-sm); color: var(--clr-text-muted); line-height: 1.6; }

/* ── How it works (front page) ───────────────────────────────────────────────── */
.how-steps { display: flex; align-items: center; gap: var(--space-2); justify-content: center; flex-wrap: wrap; }
.how-step { flex: 1; min-width: 220px; max-width: 300px; background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: var(--radius-md); padding: var(--space-6) var(--space-5); text-align: center; position: relative; }
.how-step__num { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); width: 28px; height: 28px; background: var(--clr-primary); color: #fff; border-radius: 50%; font-size: var(--text-xs); font-weight: 700; display: flex; align-items: center; justify-content: center; }
.how-step__icon { display: flex; justify-content: center; margin-bottom: var(--space-4); color: var(--clr-primary); }
.how-step__title { font-size: var(--text-base); font-weight: 700; color: var(--clr-text); margin-bottom: var(--space-3); }
.how-step__body  { font-size: var(--text-sm); color: var(--clr-text-muted); line-height: 1.6; }
.how-step__connector { width: 32px; flex-shrink: 0; height: 2px; background: var(--clr-border); align-self: center; }

/* ── CCBF callout ─────────────────────────────────────────────────────────────── */
.ccbf-callout-section { padding: var(--space-6) 0; }
.ccbf-callout { background: rgba(46,134,193,.10); border: 1px solid rgba(46,134,193,.35); border-radius: var(--radius-md); padding: var(--space-6) var(--space-8); }
.ccbf-callout__inner { display: flex; gap: var(--space-6); align-items: flex-start; flex-wrap: wrap; }
.ccbf-callout__flag  { font-size: 2.5rem; line-height: 1; flex-shrink: 0; }
.ccbf-callout__text  { flex: 1; min-width: 260px; }
.ccbf-callout__title { font-size: var(--text-lg); font-weight: 700; color: var(--clr-text); margin-bottom: var(--space-3); }
.ccbf-callout__body  { font-size: var(--text-sm); color: var(--clr-text-muted); line-height: 1.7; }
.ccbf-callout__action { flex-shrink: 0; align-self: center; }

/* CCBF strip (grants page header) */
.ccbf-strip { background: var(--clr-primary); color: #fff; padding: var(--space-6) 0; }
.ccbf-strip__inner { display: flex; gap: var(--space-6); align-items: center; flex-wrap: wrap; }
.ccbf-strip__icon  { color: rgba(255,255,255,0.7); flex-shrink: 0; }
.ccbf-strip__title { font-size: var(--text-lg); font-weight: 700; color: #fff; margin-bottom: var(--space-2); }
.ccbf-strip__body  { font-size: var(--text-sm); color: rgba(255,255,255,0.8); line-height: 1.7; }

/* ── Grants page ─────────────────────────────────────────────────────────────── */
.split-content { display: grid; grid-template-columns: 1fr 380px; gap: var(--space-12); align-items: start; }
.steps-list { list-style: none; display: flex; flex-direction: column; gap: var(--space-4); padding: 0; }
.steps-list__item { display: flex; gap: var(--space-4); align-items: flex-start; font-size: var(--text-sm); color: var(--clr-text-muted); line-height: 1.6; }
.steps-list__num { flex-shrink: 0; width: 26px; height: 26px; background: var(--clr-primary); color: #fff; border-radius: 50%; font-size: var(--text-xs); font-weight: 700; display: flex; align-items: center; justify-content: center; margin-top: 2px; }
.funding-table-card { background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: var(--radius-md); padding: var(--space-6); position: sticky; top: var(--space-6); }
.funding-table-card__title { font-size: var(--text-base); font-weight: 700; color: var(--clr-text); margin-bottom: var(--space-5); }
.funding-table { width: 100%; border-collapse: collapse; font-size: var(--text-xs); }
.funding-table th { text-align: left; font-weight: 600; padding-bottom: var(--space-2); border-bottom: 2px solid var(--clr-border); color: var(--clr-text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.funding-table td { padding: var(--space-2) var(--space-2) var(--space-2) 0; border-bottom: 1px solid var(--clr-border); color: var(--clr-text-muted); vertical-align: top; }
.funding-table tbody tr:last-child td { border-bottom: none; }
.funding-table__amount { color: var(--clr-text); font-weight: 600; }
.funding-table__pct { color: var(--clr-primary); font-weight: 600; }
.funding-table-card__note { font-size: var(--text-xs); color: var(--clr-text-muted); margin-top: var(--space-4); line-height: 1.6; opacity: 0.8; }

.resolution-block { background: var(--clr-surface); border: 1px solid var(--clr-border); border-left: 4px solid var(--clr-primary); border-radius: var(--radius-md); max-width: 800px; margin: 0 auto; }
.resolution-block__inner { padding: var(--space-8); font-size: var(--text-sm); line-height: 1.8; color: var(--clr-text-muted); }
.resolution-block__inner p { margin-bottom: var(--space-4); }
.resolution-block__heading { font-weight: 700; font-size: var(--text-base); color: var(--clr-text); text-transform: uppercase; letter-spacing: 0.05em; }
.resolution-block__date { color: var(--clr-text-muted); font-style: italic; }
.resolution-block__carried { font-weight: 700; color: var(--clr-text); margin-top: var(--space-4); border-top: 1px solid var(--clr-border); padding-top: var(--space-4); }
.resolution-block__note { padding: var(--space-4) var(--space-8) var(--space-6); font-size: var(--text-xs); color: var(--clr-text-muted); border-top: 1px solid var(--clr-border); line-height: 1.6; }

/* ── Responsive ──────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .features-grid--3col { grid-template-columns: repeat(2, 1fr); }
    .split-content { grid-template-columns: 1fr; }
    .funding-table-card { position: static; }
}
@media (max-width: 768px) {
    .features-grid--3col { grid-template-columns: 1fr; }
    .how-steps { flex-direction: column; align-items: stretch; }
    .how-step  { max-width: 100%; }
    .how-step__connector { width: 2px; height: 24px; align-self: center; }
    .ccbf-callout__inner { flex-direction: column; }
    .roadmap-item { flex-direction: column; gap: var(--space-2); }
    .roadmap-item__quarter { width: auto; }
    .expansion-timeline::before { left: 50px; }
    .compare-table th, .compare-table td { padding: var(--space-2) var(--space-3); font-size: var(--text-xs); }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   NEW COMPONENT STYLES  (security, case-studies, legal pages, front-page teaser)
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ── Security page — compliance standards grid ────────────────────────────── */
.compliance-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
}
.compliance-card {
    background: var(--clr-surface);
    border: 1px solid var(--clr-border);
    border-top: 3px solid var(--clr-primary);
    border-radius: var(--radius-md);
    padding: var(--space-6);
}
.compliance-card__badge {
    display: inline-block;
    background: var(--clr-primary-light);
    color: var(--clr-accent);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-radius: var(--radius-sm);
    padding: var(--space-1) var(--space-2);
    margin-bottom: var(--space-3);
}
.compliance-card__title {
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--clr-text);
    margin-bottom: var(--space-2);
}
.compliance-card__body {
    font-size: var(--text-sm);
    color: var(--clr-text-muted);
    line-height: 1.65;
}

/* ── Security page — SLA metrics grid ────────────────────────────────────── */
.sla-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
}
.sla-card {
    background: var(--clr-surface);
    border: 1px solid var(--clr-border);
    border-top: 4px solid var(--clr-primary);
    border-radius: var(--radius-md);
    padding: var(--space-8) var(--space-6);
    text-align: center;
}
.sla-card__metric {
    display: block;
    font-size: var(--text-4xl);
    font-weight: 800;
    color: var(--clr-accent);
    line-height: 1;
}
.sla-card__label {
    display: block;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--clr-text);
    margin-top: var(--space-2);
}
.sla-card__note {
    display: block;
    font-size: var(--text-xs);
    color: var(--clr-text-muted);
    margin-top: var(--space-2);
}

/* ── Feature list accent variant (security page) ──────────────────────────── */
.feature-list__check--accent {
    background: var(--clr-accent);
    color: var(--clr-bg);
}

/* ── Case studies page ────────────────────────────────────────────────────── */
.case-study-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-6);
}
.case-study-meta__badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    background: var(--clr-primary);
    color: var(--clr-white);
    font-size: var(--text-sm);
    font-weight: 600;
    padding: var(--space-2) var(--space-4);
    border-radius: 999px;
}
.case-study-tag {
    background: var(--clr-surface);
    color: var(--clr-text-muted);
    font-size: var(--text-xs);
    padding: var(--space-1) var(--space-3);
    border: 1px solid var(--clr-border);
    border-radius: 999px;
}
.case-study-headline {
    font-size: var(--text-4xl);
    font-weight: 800;
    color: var(--clr-text);
    margin-bottom: var(--space-6);
    line-height: 1.15;
}
.case-study-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
    background: var(--clr-surface);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-lg);
    padding: var(--space-8);
    text-align: center;
}
.case-study-stat__number {
    display: block;
    font-size: var(--text-3xl);
    font-weight: 800;
    color: var(--clr-accent);
    line-height: 1;
}
.case-study-stat__label {
    display: block;
    font-size: var(--text-xs);
    color: var(--clr-text-muted);
    margin-top: var(--space-2);
    line-height: 1.4;
}
.case-study-body { padding: var(--space-8) 0; }
.case-study-section { margin-bottom: var(--space-12); }
.case-study-section__title {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--text-2xl);
    font-weight: 700;
    color: var(--clr-text);
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-4);
    border-bottom: 2px solid var(--clr-border);
}
.case-study-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: var(--space-3);
}
.case-study-list li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4);
    background: var(--clr-surface);
    border-radius: var(--radius-md);
    font-size: var(--text-base);
    color: var(--clr-text);
    line-height: 1.6;
}
.case-study-list li::before {
    content: "✓";
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    background: var(--clr-accent);
    color: var(--clr-bg);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    margin-top: 1px;
}
.case-study-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--clr-accent);
    font-weight: 600;
    text-decoration: none;
}
.case-study-link:hover { text-decoration: underline; }

/* ── Legal pages (privacy-policy, terms, accessibility) ───────────────────── */
.legal-layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: var(--space-12);
    align-items: start;
}
.legal-toc {
    position: sticky;
    top: 100px;
    background: var(--clr-surface);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-md);
    padding: var(--space-6);
}
.legal-toc__title {
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--clr-text-muted);
    margin-bottom: var(--space-4);
}
.legal-toc__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}
.legal-toc__list a {
    display: block;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    color: var(--clr-text-muted);
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}
.legal-toc__list a:hover {
    background: var(--clr-primary-light);
    color: var(--clr-accent);
}
.legal-content { min-width: 0; }
.legal-content--full { max-width: 860px; margin: 0 auto; }
.legal-section {
    margin-bottom: var(--space-12);
    padding-top: var(--space-4);
}
.legal-section__title {
    font-size: var(--text-2xl);
    font-weight: 700;
    color: var(--clr-text);
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-3);
    border-bottom: 2px solid var(--clr-border);
}
.legal-section__subtitle {
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--clr-text);
    margin-top: var(--space-6);
    margin-bottom: var(--space-3);
}
.legal-section p, .legal-section > p {
    font-size: var(--text-base);
    color: var(--clr-text);
    line-height: 1.8;
    margin-bottom: var(--space-4);
}
.legal-list {
    padding-left: var(--space-6);
    margin: var(--space-4) 0;
    color: var(--clr-text);
    line-height: 1.8;
}
.legal-list li { margin-bottom: var(--space-2); }
.legal-note {
    background: var(--clr-primary-light);
    border-left: 4px solid var(--clr-accent);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    padding: var(--space-4) var(--space-6);
    margin: var(--space-6) 0;
    font-size: var(--text-sm);
    color: var(--clr-text);
    line-height: 1.7;
}
.legal-definitions dt {
    font-weight: 700;
    color: var(--clr-text);
    margin-top: var(--space-4);
}
.legal-definitions dd {
    margin-left: var(--space-6);
    color: var(--clr-text-muted);
    font-size: var(--text-sm);
    line-height: 1.7;
    margin-bottom: var(--space-2);
}
.legal-contact-card {
    background: var(--clr-surface);
    border: 1px solid var(--clr-border);
    border-top: 3px solid var(--clr-accent);
    border-radius: var(--radius-md);
    padding: var(--space-8);
    margin-top: var(--space-8);
}
.legal-contact-card p { margin-bottom: var(--space-2); }
.legal-contact-card a { color: var(--clr-accent); }

/* ── Front-page case study teaser ────────────────────────────────────────── */
.case-teaser { background: var(--clr-surface); }
.case-teaser__card {
    background: var(--clr-bg);
    border: 1px solid var(--clr-border);
    border-top: 4px solid var(--clr-accent);
    border-radius: var(--radius-lg);
    padding: var(--space-12);
    max-width: 860px;
    margin: 0 auto;
    text-align: center;
    box-shadow: var(--shadow-sm);
}
.case-teaser__badge {
    display: inline-block;
    background: var(--clr-accent);
    color: var(--clr-bg);
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: var(--space-1) var(--space-3);
    border-radius: 999px;
    margin-bottom: var(--space-4);
}
.case-teaser__name {
    font-size: var(--text-3xl);
    font-weight: 800;
    color: var(--clr-text);
    margin-bottom: var(--space-4);
}
.case-teaser__intro {
    font-size: var(--text-lg);
    color: var(--clr-text-muted);
    margin-bottom: var(--space-8);
    line-height: 1.7;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}
.case-teaser__stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
    margin-bottom: var(--space-8);
    padding: var(--space-6);
    background: var(--clr-surface);
    border-radius: var(--radius-md);
    border: 1px solid var(--clr-border);
}
.case-teaser__stat-num {
    display: block;
    font-size: var(--text-2xl);
    font-weight: 800;
    color: var(--clr-accent);
    line-height: 1;
}
.case-teaser__stat-label {
    display: block;
    font-size: var(--text-xs);
    color: var(--clr-text-muted);
    margin-top: var(--space-1);
    line-height: 1.4;
}

/* ── Utility ──────────────────────────────────────────────────────────────── */
.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;
}
.site-main { min-height: 60vh; }

/* ── Stat item (inside stats-strip__grid) ─────────────────────────────────── */
.stat { text-align: center; }

/* ── Button variants ──────────────────────────────────────────────────────── */
.btn--lg {
    font-size: var(--text-lg);
    padding:   var(--space-4) var(--space-8);
}
.btn-outline-dark {
    background:  transparent;
    color:       var(--clr-text);
    border:      2px solid var(--clr-border);
    border-radius: var(--radius-full);
    padding:     var(--space-3) var(--space-6);
    font-weight: 600;
    display:     inline-flex;
    align-items: center;
    gap:         var(--space-2);
    transition:  border-color 0.2s, color 0.2s;
    text-decoration: none;
    cursor:      pointer;
}
.btn-outline-dark:hover {
    border-color: var(--clr-accent);
    color:        var(--clr-accent);
    text-decoration: none;
}

/* ── Page header accent variant ───────────────────────────────────────────── */
.page-header--accent {
    background: linear-gradient(135deg, var(--clr-primary-dark, #0d2137) 0%, var(--clr-primary) 60%, var(--clr-accent-dark, #05668d) 100%);
}

/* ── CTA band inline actions + lead ──────────────────────────────────────── */
.cta-band__lead {
    font-size:  var(--text-lg);
    color:      rgba(255,255,255,0.8);
    max-width:  560px;
    margin:     0 auto var(--space-8);
    line-height: 1.7;
}
.cta-band__actions {
    display:         flex;
    gap:             var(--space-4);
    justify-content: center;
    flex-wrap:       wrap;
}

/* ── About page ───────────────────────────────────────────────────────────── */
.about-split {
    display:   grid;
    grid-template-columns: 1fr 340px;
    gap:       var(--space-16);
    align-items: center;
}
.about-split__text { }
.about-split__visual {
    display:         flex;
    justify-content: center;
}
.about-split__card {
    background:    var(--clr-surface);
    border:        1px solid var(--clr-border);
    border-radius: var(--radius-lg);
    padding:       var(--space-10) var(--space-8);
    text-align:    center;
    display:       flex;
    flex-direction: column;
    align-items:   center;
    gap:           var(--space-4);
}
.about-split__card-icon { color: var(--clr-accent); }
.about-split__card-text {
    font-size:   var(--text-base);
    font-weight: 600;
    color:       var(--clr-text);
    line-height: 1.5;
}
.tech-badges {
    display:   flex;
    flex-wrap: wrap;
    gap:       var(--space-3);
    margin-top: var(--space-6);
}
.tech-badge {
    display:       inline-flex;
    align-items:   center;
    background:    var(--clr-surface);
    border:        1px solid var(--clr-border);
    border-radius: 999px;
    padding:       var(--space-2) var(--space-4);
    font-size:     var(--text-sm);
    font-weight:   500;
    color:         var(--clr-text-muted);
}

/* ── Contact page ─────────────────────────────────────────────────────────── */
.contact-layout {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap:     var(--space-16);
    align-items: start;
}
.contact-layout__form { }
.contact-layout__info { }
.contact-info-card {
    background:    var(--clr-surface);
    border:        1px solid var(--clr-border);
    border-radius: var(--radius-md);
    padding:       var(--space-6) var(--space-7);
}
.contact-info-card__title {
    font-size:   var(--text-lg);
    font-weight: 700;
    color:       var(--clr-text);
    margin-bottom: var(--space-2);
}
.contact-info-card__divider {
    border:     none;
    border-top: 1px solid var(--clr-border);
    margin:     var(--space-4) 0;
}
.contact-info-card__label {
    font-size:   var(--text-sm);
    font-weight: 600;
    color:       var(--clr-text-muted);
    margin-bottom: var(--space-1);
}
.contact-placeholder {
    background:    var(--clr-surface);
    border:        1px solid var(--clr-border);
    border-radius: var(--radius-md);
    padding:       var(--space-8) var(--space-8);
    color:         var(--clr-text-muted);
    line-height:   1.7;
}
.contact-placeholder__hint {
    font-size:  var(--text-xs);
    color:      var(--clr-text-muted);
    margin-top: var(--space-3);
    opacity:    0.7;
}

/* ── Pilot program timeline ───────────────────────────────────────────────── */
.pilot-timeline {
    list-style: none;
    margin:     0;
    padding:    0;
    display:    flex;
    flex-direction: column;
    gap:        0;
    position:   relative;
}
.pilot-timeline::before {
    content:  '';
    position: absolute;
    left:     24px;
    top:      0;
    bottom:   0;
    width:    2px;
    background: var(--clr-border);
}
.pilot-timeline__step {
    display:    flex;
    gap:        var(--space-5);
    padding:    var(--space-5) 0;
    align-items: flex-start;
    position:   relative;
    z-index:    1;
}
.pilot-timeline__num {
    flex-shrink:    0;
    width:          48px;
    height:         48px;
    border-radius:  50%;
    background:     var(--clr-primary);
    color:          var(--clr-white);
    display:        flex;
    align-items:    center;
    justify-content:center;
    font-weight:    700;
    font-size:      var(--text-base);
    border:         3px solid var(--clr-bg);
}
.pilot-timeline__title {
    display:     block;
    font-size:   var(--text-base);
    font-weight: 600;
    color:       var(--clr-text);
    margin-bottom: var(--space-1);
}
.pilot-timeline__body {
    font-size:  var(--text-sm);
    color:      var(--clr-text-muted);
    line-height: 1.6;
    margin:     0;
}

/* ── Pricing page ─────────────────────────────────────────────────────────── */
.pricing-grid {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   var(--space-6);
    align-items:           stretch;
    margin-bottom:         var(--space-8);
}
.pricing-card {
    background:    var(--clr-surface);
    border:        1px solid var(--clr-border);
    border-radius: var(--radius-lg);
    padding:       var(--space-6) var(--space-7);
    display:       flex;
    flex-direction: column;
    gap:           var(--space-3);
    position:      relative;
}
.pricing-card--popular {
    border-color: var(--clr-primary);
    box-shadow:   0 0 0 2px rgba(46,134,193,0.3);
}
.pricing-card__badge {
    position:      absolute;
    top:           -1px;
    left:          50%;
    transform:     translateX(-50%);
    background:    var(--clr-primary);
    color:         var(--clr-white);
    font-size:     var(--text-xs);
    font-weight:   700;
    padding:       var(--space-1) var(--space-4);
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    white-space:   nowrap;
}
.pricing-card__pop {
    font-size:   var(--text-xs);
    font-weight: 700;
    color:       var(--clr-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-top:  var(--space-4);
}
.pricing-card__label {
    font-size:   var(--text-xl);
    font-weight: 800;
    color:       var(--clr-text);
    margin-bottom: 0;
}
.pricing-card__price {
    font-size:   var(--text-3xl);
    font-weight: 800;
    color:       var(--clr-accent);
    line-height: 1;
}
.pricing-card__period {
    font-size:   var(--text-sm);
    font-weight: 400;
    color:       var(--clr-text-muted);
}
.pricing-card__annual {
    font-size:  var(--text-sm);
    color:      var(--clr-text-muted);
}
.pricing-card__note {
    font-size:   var(--text-sm);
    color:       var(--clr-text-muted);
    font-style:  italic;
    line-height: 1.5;
    margin:      0;
}
.pricing-note-box {
    display:       flex;
    gap:           var(--space-4);
    align-items:   flex-start;
    background:    var(--clr-surface);
    border:        1px solid var(--clr-border);
    border-radius: var(--radius-md);
    padding:       var(--space-5) var(--space-6);
    font-size:     var(--text-sm);
    color:         var(--clr-text-muted);
    line-height:   1.7;
}
.pricing-note-box__icon {
    flex-shrink: 0;
    color:       var(--clr-accent);
    margin-top:  2px;
}
.included-grid {
    display:               grid;
    grid-template-columns: repeat(2, 1fr);
    gap:                   var(--space-4);
}
.included-item {
    display:    flex;
    gap:        var(--space-3);
    align-items: center;
    font-size:  var(--text-sm);
    color:      var(--clr-text-muted);
}
.included-item__icon {
    flex-shrink: 0;
    width:       32px;
    height:      32px;
    color:       var(--clr-accent);
    background:  rgba(79,195,247,0.08);
    border-radius: 50%;
    display:     flex;
    align-items: center;
    justify-content: center;
}

/* ── CCBF section modifier (no extra bg — uses ccbf-callout inside) ───────── */
.ccbf-section { background: var(--clr-bg); }

/* ── Roadmap item content wrapper ─────────────────────────────────────────── */
.roadmap-item__content { flex: 1; }

/* ── Split-content column variants ───────────────────────────────────────── */
.split-content__text  { }
.split-content__aside { }

/* ── Case study extras ────────────────────────────────────────────────────── */
.case-study-stat { text-align: center; }
.case-study-meta__tags {
    display:   flex;
    flex-wrap: wrap;
    gap:       var(--space-2);
}

/* ── Features page ────────────────────────────────────────────────────────── */
.page-header__lead {
    font-size:    var(--text-lg);
    color:        rgba(255,255,255,0.8);
    margin-top:   var(--space-4);
    max-width:    640px;
    position:     relative;
    z-index:      1;
}

.module-group {
    display:        flex;
    flex-direction: column;
    gap:            var(--space-6);
}
.module-group__header {
    display:     flex;
    align-items: center;
    gap:         var(--space-4);
    margin-bottom: var(--space-2);
}
.module-group__icon {
    flex-shrink: 0;
    color: var(--clr-accent);
}

.feature-list {
    list-style:   none;
    margin:       0;
    padding:      0;
    display:      grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap:          var(--space-4);
}
.feature-list__item {
    display:    flex;
    gap:        var(--space-3);
    background: var(--clr-surface);
    border:     1px solid var(--clr-border);
    border-radius: var(--radius-md);
    padding:    var(--space-4) var(--space-5);
}
.feature-list__check {
    flex-shrink: 0;
    width:  28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(79,195,247,0.12);
    color: var(--clr-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 2px;
}
.feature-list__name {
    display:     block;
    font-size:   var(--text-sm);
    font-weight: 600;
    color:       var(--clr-text);
    line-height: 1.4;
}
.feature-list__desc {
    margin:    var(--space-1) 0 0;
    font-size: var(--text-xs);
    color:     var(--clr-text-muted);
    line-height: 1.5;
}

/* ── Responsive additions ─────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .compliance-grid    { grid-template-columns: repeat(2, 1fr); }
    .sla-grid           { grid-template-columns: repeat(2, 1fr); }
    .legal-layout       { grid-template-columns: 220px 1fr; }
    .pricing-grid       { grid-template-columns: repeat(2, 1fr); }
    .about-split        { grid-template-columns: 1fr 280px; gap: var(--space-10); }
    .contact-layout     { grid-template-columns: 1fr 300px; gap: var(--space-10); }
}
@media (max-width: 768px) {
    .compliance-grid    { grid-template-columns: 1fr; }
    .sla-grid           { grid-template-columns: 1fr; }
    .case-study-stats   { grid-template-columns: repeat(2, 1fr); }
    .case-teaser__stats { grid-template-columns: repeat(2, 1fr); }
    .legal-layout       { grid-template-columns: 1fr; }
    .legal-toc          { position: static; }
    .case-teaser__card  { padding: var(--space-8) var(--space-6); }
    .pricing-grid       { grid-template-columns: 1fr; }
    .about-split        { grid-template-columns: 1fr; }
    .about-split__visual{ display: none; }
    .contact-layout     { grid-template-columns: 1fr; }
    .included-grid      { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
    .case-study-stats   { grid-template-columns: 1fr; }
    .case-teaser__stats { grid-template-columns: 1fr; }
    .case-study-headline { font-size: var(--text-3xl); }
}