/* ===== v10 Fidelity Pass 3.2: nav parity + filters breakpoints ===== */

/* Filters layout: collapse to single column at <=1020 like v10 */
@media (max-width: 1020px) {
    .filters .flex {
        grid-template-columns:1fr;
    }
}

/* ===== v10 Fidelity Pass 3.1: spacing + responsive alignment ===== */
/* Hero copy rhythm: brings WP closer to v10 baseline */
.hero p {
    margin: 0 0 18px;
}

/* Pill-row tightening + scale adjustments */
.pill-row {
    gap: 8px;
}

.pill-row li {
    padding: 5px 12px;
    font-size: 11px;
}

@media (max-width: 1020px) {
    .pill-row {
        gap: 8px;
    }
}

@media (max-width: 760px) {
    .pill-row li {
        padding: 5px 10px;
        font-size: 10.5px;
    }
}

/* Hero grid gap around tablet to match v10 */
@media (max-width: 1020px) {
    .hero {
        gap: 1.8rem;
    }
}

/* Active/current nav item parity (soft fill like v10's emphasis) */
.main-navigation .current-menu-item > a,
.main-navigation .current-menu-ancestor > a {
    background: rgba(52, 203, 161, 0.12);
    border-color: var(--brand);
}

/* Footer grid collapse parity at 1020 (v10 uses this breakpoint) */
@media (max-width: 1020px) {
    .footer-grid {
        grid-template-columns:1fr;
    }
}



/* Brand link hover: remove underline and keep ink color */
.site-title a:hover {
    text-decoration: none;
    color: var(--ink);
}


.main-navigation .current-menu-item > a,
.main-navigation .current-menu-ancestor > a {
    border-color: var(--brand);
}

/* Hero metrics: align width more closely to v10 reference */
.hero .metrics {
    max-width: 360px;
}

/* Buttons: never underline on hover (override global anchor hover) */
.btn:hover, .button:hover {
    text-decoration: none;
}

/* Footer links: spacing parity with v10 */
.foot-links a {
    padding: 6px 12px;
}


/*
Theme Name: Boreal Filter Tech
Theme URI: https://example.com/boreal-filter-tech
Author: Theron
Author URI: https://example.com
Description: Custom WordPress theme for Boreal Filter Tech Limited. Focused on credibility, lead generation, and clear product information. Nature-inspired palette, responsive, accessible, and Gutenberg-friendly.
Version: 1.0.4
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: boreal
Tags: custom-logo, custom-menu, featured-images, one-column, two-columns, accessibility-ready, blog, editor-style
*/

/* Root palette (nature-inspired: greens, blues, grays) */
:root {
    /* legacy tokens (kept for compatibility) */
    --color-bg: #0f1720;
    --color-surface: #101922;
    --color-muted: #2a3542;
    --color-primary: #1f9d65;
    --color-primary-600: #178452;
    --color-primary-100: #d8f2e6;
    --color-secondary: #2f7abf;
    --color-accent: #9ad6bd;
    --color-text: #e6edf3;
    --color-text-muted: #b4c2cf;
    --color-border: #1f2a35;
    --radius: 12px;
    --radius-sm: 8px;
    --shadow-1: 0 6px 18px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.2);
    --shadow-2: 0 12px 30px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.02);
    --container: 1200px;

    /* v10 tokens - Updated with official Boreal Filter Tech brand colors */
    --ink: #e8f5f1;
    --ink-2: #b6cdc6;
    --ink-3: #7d938d;
    --surface: #101d1a;
    --surface-alt: #142720;
    --surface-soft: #17332a;
    --surface-edge: #0f1a18;
    --brand: #34bcaa;        /* Primary teal from logo */
    --brand-alt: #1b7d9a;    /* Secondary blue from logo */
    --brand-purple: #4e457b; /* Purple accent from logo */
    --brand-light-blue: #659ad2; /* Light blue from logo */
    --accent: #4fb3ff;
    --danger: #ff4d64;
    --line: #1f3a32;
    --line-strong: #2b5347;
    --radius-xs: 4px;
    --radius-md: 18px;
    --radius-lg: 34px;
    --radius-pill: 1000px;
    --shadow-sm: 0 2px 4px -1px rgba(0, 0, 0, .5), 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-md: 0 8px 28px -6px rgba(0, 0, 0, .65), 0 4px 14px rgba(0, 0, 0, .5);
    --pad: clamp(1.6rem, 4vw, 4rem);
    --max: 1640px;
    --t-xs: 11px;
    --t-sm: 13px;
    --t-base: 16px;
    --t-md: 18px;
    --t-lg: 23px;
    --t-xl: 32px;
    --t-2xl: 44px;
    --t-3xl: 70px;

    /* map legacy -> v10 for consistency */
    --color-border: var(--line);
    --color-text: var(--ink);
    --color-text-muted: var(--ink-2);
    --color-surface: var(--surface);
}

/* Base reset + typography */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

body {
    margin: 0;
    background: radial-gradient(1200px 800px at 70% -10%, rgba(31, 157, 101, 0.10), transparent 50%),
    linear-gradient(180deg, #0b1118 0%, var(--color-bg) 40%, #0b1118 100%);
    color: var(--color-text);
    /* inherit font from html so Inter/system stack applies consistently */
    font-family: inherit;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

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

a {
    color: var(--color-accent);
    text-decoration: none;
}

a:hover {
    color: #b8f0d6;
    text-decoration: underline;
}

.container {
    width: 100%;
    /* Align container width to v10 design system */
    max-width: var(--max);
    margin: 0 auto;
    padding: 0 20px;
    padding-left: var(--gutter);
    padding-right: var(--gutter);
}

@supports (padding:max(0px)) {
    .container {
        padding-left: max(var(--gutter), env(safe-area-inset-left));
        padding-right: max(var(--gutter), env(safe-area-inset-right));
    }
}

/* Header */
.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(16, 25, 34, 0.9);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--color-border);
}

.navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 0;
}

/* v10-brand cluster */
.brand {
    display: flex;
    align-items: center;
    gap: 14px;
}

.mark {
    width: 150px;
    margin:15px 0;
    /*border-radius: 16px;*/
    /*background: linear-gradient(135deg, var(--brand), var(--accent));*/
    /*box-shadow: inset 0 0 0 1px #062621, var(--shadow-sm);*/
}

.lines {
    display: grid;
    line-height: 1.05;
}

.lines strong.site-title {
    font-size: 18px;
    letter-spacing: .6px;
}

.lines em {
    font-style: normal;
    font-size: 11px;
    color: var(--ink-3);
    letter-spacing: .28px;
}

.env {
    color: var(--ink-3);
}

.site-branding {
    display: flex;
    align-items: center;
    gap: 12px;
}

.site-title {
    font-weight: 700;
    font-size: 18px;
    margin: 0;
    letter-spacing: 0.2px;
}

.main-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 18px;
}

.main-navigation a {
    display: inline-block;
    padding: 10px 14px;
    color: var(--ink);
    border-radius: var(--radius-pill);
    border: 1px solid transparent;
    transition: border-color .18s ease, color .18s ease, background-color .18s ease, box-shadow .18s ease;
    white-space: nowrap;
}

.main-navigation ul {
    gap: 14px;
}

.main-navigation a:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px #34cba166;
    border-color: var(--brand);
}

.main-navigation a:hover,
.main-navigation .current-menu-item > a {
    border-color: var(--brand);
    background: rgba(52, 203, 161, 0.08);
    color: var(--ink);
    text-decoration: none;
}

.main-navigation a:active {
    filter: brightness(.97);
}

.main-navigation a:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px #34cba166;
    border-color: var(--brand);
}

@media (prefers-reduced-motion: reduce) {
    .main-navigation a {
        transition: none;
    }
}

/* Hero */

.hero-content {
    display: grid;
    gap: 15px;
}

.hero .inner {
    grid-area: copy;
}

.hero .metrics {
    grid-area: metrics;
}

.hero .eyebrow {
    display: inline-block;
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--color-accent);
    background: rgba(154, 214, 189, 0.08);
    padding: 6px 10px;
    border: 1px solid rgba(154, 214, 189, 0.25);
    border-radius: 999px;
    width: fit-content;
}

/* Let .display control hero headline sizing; keep only spacing here */
.hero h1 {
    margin: 12px 0 8px;
}

.hero p {
    color: var(--color-text-muted);
    max-width: 760px;
    margin: 0 0 22px;
}

/* Cards and sections */
.section {
    padding: 48px 0;
}

.grid {
    display: grid;
    gap: 18px;
}

.grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Buttons */
.button, .wp-block-button__link {
    display: inline-block;
    padding: 10px 14px;
    background: linear-gradient(180deg, var(--color-primary), var(--color-primary-600));
    color: white;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: var(--shadow-1);
    transition: transform 0.05s ease, box-shadow 0.2s ease;
}

.button:hover, .wp-block-button__link:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-2);
    text-decoration: none;
}

/* Footer */

.footer-grid {
    display: grid;
    gap: 18px;
    grid-template-columns: 2fr 1fr 1fr;
}

.footer-bottom {
    margin-top: 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid var(--color-border);
    padding-top: 16px;
}

/* Forms */
input[type="text"], input[type="email"], input[type="tel"], textarea, select {
    width: 100%;
    background: var(--color-surface);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 10px 12px;
}

label {
    display: block;
    margin: 8px 0 6px;
}

/* Accessibility helpers */
.skip-link {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.skip-link:focus {
    position: static;
    width: auto;
    height: auto;
}

/* Responsive */
@media (max-width: 960px) {
    .grid-3 {
        grid-template-columns: 1fr;
    }

    .grid-2 {
        grid-template-columns: 1fr;
    }

    .navbar {
        flex-wrap: wrap;
    }

    .footer-grid {
        grid-template-columns: 1fr;
    }
}

/* Gutenberg alignments */
.alignwide {
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
}

.alignfull {
    width: 100vw;
    margin-left: 50%;
    transform: translateX(-50%);
}

/* ===== v10 Design System Adaptation (mapped to WP selectors) ===== */

/* Base overrides to match v10 */
body {
    background: #0b1412;
    color: var(--ink);
}

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

a:hover {
    color: var(--ink);
}

/* Typography */
/* v10 Display headline with higher contrast gradient and subtle glow */
.display {
    font-size: clamp(var(--t-2xl), 6.5vw, var(--t-3xl));
    line-height: 1.02;
    letter-spacing: -.024em;
    font-weight: 800;
    background: linear-gradient(88deg, #e8fff6 0%, #baf0dc 28%, #659ad2 62%, #34bcaa 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 6px 22px rgba(79, 179, 255, .15);
}

.lede, .lead {
    font-size: clamp(var(--t-md), 1.6vw, var(--t-lg));
    max-width: 70ch;
    color: var(--ink-2);
}

.lead.small {
    font-size: var(--t-md);
}

h1, h2, h3, h4 {
    font-weight: 700;
    letter-spacing: -.015em;
}

h2 {
    font-size: clamp(var(--t-xl), 3.5vw, var(--t-2xl));
    line-height: 1.12;
    margin-bottom: .65em;
    background: linear-gradient(120deg, #e8f5f1, #9ee4cd);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

h3 {
    font-size: clamp(19px, 2vw, var(--t-xl));
    line-height: 1.2;
    margin-bottom: .45em;
}

.micro {
    font-size: var(--t-xs);
}

.muted {
    color: var(--ink-2);
}

.dim {
    color: var(--ink-3);
}

.mini {
    font-size: var(--t-xs);
    letter-spacing: .18em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--brand);
}

/* Containers and sections */
.viewport {
    max-width: var(--max);
    margin-inline: auto;
}

/* Panels: slightly tighter padding for denser rhythm */
.panel {
    padding: calc(var(--pad) * 0.9) clamp(1.2rem, 4.5vw, 4.2rem);
    position: relative;
}

.panel:not(.hero) {
    border-top: 1px solid var(--line-strong);
}

/* Header mapped to .site-header */
.site-header {
    position: sticky;
    top: 0;
    z-index: 80;
    height: 68px;
    display: flex;
    align-items: center;
    background: #0d1714cc;
    backdrop-filter: blur(10px) saturate(1.2);
    border-bottom: 1px solid var(--line);
}

.navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 0 1.4rem;
}

.site-title a {
    color: var(--ink);
}

/* Buttons mapped: .button behaves like .btn */
.btn {
    --btn-bg: var(--brand);
    --btn-fg: #062621;
    --btn-bd: var(--brand);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: .4px;
    padding: 14px 26px;
    border-radius: var(--radius-pill);
    text-decoration: none;
    border: 1px solid var(--btn-bd);
    background: var(--btn-bg);
    color: var(--btn-fg);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.btn:before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, rgba(255, 255, 255, .4), transparent 60%);
    mix-blend-mode: overlay;
}

.btn.primary:hover {
    filter: brightness(1.15);
}

.btn.ghost {
    --btn-bg: var(--surface-alt);
    --btn-fg: var(--ink);
    --btn-bd: var(--line-strong);
}

.btn.ghost:hover {
    background: var(--brand);
    color: #062621;
    border-color: var(--brand);
}

.btn.outline {
    --btn-bg: var(--surface);
    --btn-fg: var(--ink-2);
    --btn-bd: var(--brand);
}

.btn.outline:hover {
    background: var(--brand);
    color: #062621;
}

.btn.full {
    width: 100%;
}

/* Alias legacy .button -> .btn */
.button {
    --btn-bg: var(--brand);
    --btn-fg: #062621;
    --btn-bd: var(--brand);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: .4px;
    padding: 14px 26px;
    border-radius: var(--radius-pill);
    text-decoration: none;
    border: 1px solid var(--btn-bd);
    background: var(--btn-bg);
    color: var(--btn-fg);
    cursor: pointer;
    box-shadow: var(--shadow-sm);
}

.button:hover {
    filter: brightness(1.15);
    text-decoration: none;
}

/* Hero (ensure consistent after overrides) */

.inner {
    display: grid;
    gap: 1.8rem;
}

/* Cards and lists */

.card:before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, rgba(52, 203, 161, .12), transparent 70%);
    mix-blend-mode: overlay;
    opacity: 0;
    transition: opacity .45s ease;
    pointer-events: none; /* Allow clicks to pass through to content */
}

@media (prefers-reduced-motion: no-preference) {
    .card {
        transition: transform .55s, box-shadow .55s, background .55s;
    }

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

    .card:hover:before {
        opacity: 1;
    }
}

/* v10 hero metrics */
.metrics {
    display: grid;
    gap: 1.2rem;
    align-content: start;
    max-width: 360px;
}

.m {
    background: var(--surface-alt);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 14px 16px;
    display: grid;
    gap: 2px;
    box-shadow: var(--shadow-sm);
}

.k {
    font-weight: 700;
    font-size: 19px;
    letter-spacing: .4px;
}

.l {
    font-size: 10px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--ink-3);
    font-weight: 600;
}

.commit {
    background: linear-gradient(145deg, #173c31, #142720);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-md);
    padding: 18px 20px;
    box-shadow: var(--shadow-sm);
}

.commit .hd {
    margin-bottom: 6px;
    color: var(--ink-2);
}

.section-title {
    margin-bottom: -.2rem;
}

.pill-row {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: .5rem;
}

.pill-row li {
    background: linear-gradient(135deg, #34bcaa, #659ad2);
    color: #062621;
    padding: 6px 14px;
    border-radius: var(--radius-pill);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .4px;
    box-shadow: var(--shadow-sm);
}

/* Process steps (used on Process page) */
.process .steps {
    list-style: none;
    margin: 2rem 0 0;
    display: grid;
    gap: 1.4rem;
    counter-reset: step;
    padding: 0;
    grid-template-columns: repeat(auto-fill, minmax(512px, 1fr));
}

.process .steps li {
    background: var(--surface-alt);
    border: 1px solid var(--line);
    padding: 1.4rem 1.4rem 1.6rem;
    border-radius: var(--radius-sm);
    position: relative;
    box-shadow: var(--shadow-sm);
}

.process .steps li:before {
    counter-increment: step;
    content: counter(step);
    position: absolute;
    left: 14px;
    top: -24px;
    width: 42px;
    height: 42px;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, #34bcaa, #659ad2);
    display: grid;
    place-items: center;
    font-weight: 700;
    color: #062621;
    box-shadow: 0 6px 22px -6px rgba(79, 179, 255, .55);
}

/* Forms */
input[type="text"], input[type="email"], input[type="tel"], textarea, select {
    background: var(--surface);
    border: 1px solid var(--line-strong);
    color: var(--ink);
}

input:focus, textarea:focus, select:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 2px #34cba166;
    outline: none;
}

/* Footer mapped to .site-footer */

.footer-bottom a {
    color: var(--ink-2);
}

.footer-bottom a:hover {
    color: var(--ink);
}

/* Responsive */
@media (max-width: 1200px) {
    .filters .flex {
        grid-template-columns:1fr 1fr;
    }
}

@media (max-width: 1020px) {
    .hero {
        grid-template-columns:1fr;
        grid-template-areas:
      "copy"
      "metrics";
        gap: 2.2rem;
    }

    .kb {
        grid-template-columns:1fr;
    }

    .metrics {
        max-width: 100%;
    }
}

@media (max-width: 760px) {
    .panel {
        padding: calc(var(--pad) * .9) clamp(1rem, 5vw, 2rem);
    }

    .site-header {
        height: 60px;
    }

    .display {
        font-size: clamp(40px, 11vw, 58px);
    }
}

/* ===== v10 Layout Additions (appended) ===== */

/* Advantages grid cards */
.advantages .cards {
    display: grid;
    gap: 1.7rem;
    grid-template-columns:repeat(auto-fill, minmax(240px, 1fr));
    margin-top: 2rem;
}

/* Filters panel layout */
.filters .flex {
    display: grid;
    gap: 3.5rem;
    grid-template-columns:1fr 1fr .8fr;
    align-items: start;
}

.lead-col {
    display: grid;
    gap: 1.6rem;
}

.specs {
    margin: 0;
    display: grid;
    gap: 1.6rem;
    font-size: 15px;
}

.specs dt {
    font-weight: 600;
    color: var(--brand);
}

.specs dd {
    margin: 0;
    color: var(--ink-2);
}

.aside {
    background: var(--surface-alt);
    border: 1px solid var(--line);
    padding: 1.4rem 1.2rem;
    border-radius: var(--radius-sm);
    display: grid;
    gap: .9rem;
    box-shadow: var(--shadow-sm);
}

.ticks {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: .7rem;
    font-size: 15px;
}

.ticks li {
    position: relative;
    padding-left: 22px;
}

.ticks li:before {
    content: "";
    position: absolute;
    left: 0;
    top: 5px;
    width: 14px;
    height: 14px;
    border-radius: 4px;
    background: var(--brand);
    mask: radial-gradient(circle at 50% 55%, #000 46%, transparent 48%);
}

/* Contact panel layout */
.contact-grid {
    display: grid;
    gap: 3.2rem;
    grid-template-columns:1fr 1fr;
    align-items: start;
    margin-top: 2rem;
}

.row {
    display: grid;
    gap: 1rem;
    grid-template-columns:1fr 1fr;
}

@media (max-width: 760px) {
    .contact-grid {
        grid-template-columns:1fr;
    }

    .row {
        grid-template-columns:1fr;
    }
}

/* Footer links */
.foot-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 0;
    list-style: none;
}

.foot-links a {
    color: var(--ink-2);
    font-size: 14px;
    padding: 6px 12px;
    border-radius: var(--radius-pill);
    text-decoration: none;
    border: 1px solid transparent;
}

.foot-links a:hover {
    border-color: var(--brand);
    color: var(--ink);
}

/* ===== v10 Fidelity Pass 2: targeted overrides ===== */

/* Hero eyebrow pill: align to v10 (subtle, brand-forward) */
.hero .eyebrow {
    color: var(--brand);
    background: transparent;
    border: 1px solid var(--line-strong);
    padding: 6px 10px;
    border-radius: var(--radius-pill);
}

/* Ensure hero grid columns never collapse due to inner widths */
.hero .inner {
    min-width: 0;
}

.hero .metrics {
    min-width: 0;
}

/* Footer: override legacy gradient with v10 flat surface + clearer hierarchy */
.site-footer {
    background: #08110f;
    margin-top: 4rem;
    padding: 3.2rem clamp(1.2rem, 5vw, 5rem);
    border-top: 1px solid var(--line-strong);
    color: var(--ink-2);
}

.site-footer h3 {
    color: var(--ink);
    margin: 0 0 .6rem;
}

.site-footer a {
    color: var(--ink-2);
    text-decoration: none;
}

.site-footer a:hover {
    color: var(--ink);
    text-decoration: none;
}

.footer-grid {
    gap: 22px;
}

.footer-bottom {
    margin-top: 22px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.footer-bottom a {
    color: var(--ink-2);
}

.footer-bottom a:hover {
    color: var(--ink);
}

/* Navigation pills: consistent spacing + focus treatment */
.main-navigation ul {
    gap: 14px;
}

/* Cards: ensure hover motion & shadow even if earlier styles conflict */
.card {
    background: var(--surface-alt);
    border: 1px solid var(--line);
    padding: 1.4rem 1.3rem 1.6rem;
    border-radius: var(--radius-sm);
    display: grid;
    gap: .6rem;
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.card:before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, rgba(52, 203, 161, .12), transparent 70%);
    mix-blend-mode: overlay;
    opacity: 0;
    transition: opacity .45s ease;
    pointer-events: none; /* Allow clicks to pass through to content */
}

@media (prefers-reduced-motion: no-preference) {
    .card {
        transition: transform .55s, box-shadow .55s, background .55s;
    }

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

    .card:hover:before {
        opacity: 1;
    }
}

/* Hero headline: rely on .display; prevent legacy size overrides elsewhere */
.hero h1 {
    margin: 12px 0 8px;
}

/* ===== v10 Fidelity Pass 4: HERO exact mapping (typography + spacing + metrics) ===== */
/* Force precedence over legacy by appending at EOF and using scoped selectors */
.hero {
    position: relative;
    min-height: 80vh;
    padding: var(--pad) clamp(1.2rem, 5vw, 5rem);
    display: grid;
    grid-template-columns: 1.05fr .65fr;
    grid-template-areas: "copy metrics";
    align-items: center;
    gap: 4rem;
    background: radial-gradient(circle at 25% 30%, #17352b 0%, #101d1a 60%);
    border-bottom: 1px solid var(--line-strong);
}

.hero .container {
    padding-left: 0;
    padding-right: 0;
}

/* remove double horizontal pad inside panel */

/* Eyebrow pill (match v10 weight and quiet surface) */
.hero .eyebrow {
    color: var(--brand);
    background: transparent;
    border: 1px solid var(--line-strong);
    padding: 6px 10px;
    border-radius: var(--radius-pill);
    letter-spacing: .18em;
    font-weight: 600;
}

/* Display headline – exact gradient + tight tracking */
.hero .display {
    font-size: clamp(var(--t-2xl), 6.6vw, var(--t-3xl));
    line-height: 1.02;
    letter-spacing: -.022em;
    font-weight: 800;
    margin: 10px 0 8px;
    background: linear-gradient(90deg, #dff9f0 0%, #9ee4cd 40%, #659ad2 70%, #34bcaa 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent; /* ensure gradient rendering across engines */
    text-shadow: 0 6px 24px rgba(79, 179, 255, .16);
}

/* Lead copy rhythm */
.hero .lead {
    font-size: clamp(var(--t-md), 1.7vw, var(--t-lg));
    color: var(--ink-2);
    max-width: 70ch;
    margin: 0 0 22px;
}

/* CTAs: pill spacing and feel */
.hero .cta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin: 6px 0 10px;
}

.hero .cta .btn {
    padding: 14px 26px;
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-sm);
}

.hero .cta .btn.primary:hover {
    filter: brightness(1.15);
}

.hero .cta .btn.ghost {
    background: var(--surface-alt);
    color: var(--ink);
    border-color: var(--line-strong);
}

.hero .cta .btn.ghost:hover {
    background: var(--brand);
    color: #062621;
    border-color: var(--brand);
}

/* Pill row: tighter pills and spacing */
.hero .pill-row {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: .6rem;
}

.hero .pill-row li {
    background: linear-gradient(135deg, #34bcaa, #659ad2);
    color: #062621;
    padding: 6px 14px;
    border-radius: var(--radius-pill);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .4px;
    box-shadow: var(--shadow-sm);
}

/* Metrics stack: card styling parity */
.hero .metrics {
    display: grid;
    gap: 1.2rem;
    align-content: start;
    max-width: 400px;
}

.hero .metrics .m {
    background: var(--surface-alt);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 14px 16px;
    display: grid;
    gap: 2px;
    box-shadow: var(--shadow-sm);
}

.hero .metrics .k {
    font-weight: 700;
    font-size: 19px;
    letter-spacing: .4px;
}

.hero .metrics .l {
    font-size: 10px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--ink-3);
    font-weight: 600;
}

.hero .commit {
    background: linear-gradient(145deg, #173c31, #142720);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-md);
    padding: 18px 20px;
    box-shadow: var(--shadow-sm);
}

.hero .commit .hd {
    margin-bottom: 6px;
    color: var(--ink-2);
}

/* Tablet tightening */
@media (max-width: 1200px) {
    .hero {
        gap: 3.2rem;
    }
}

@media (max-width: 1020px) {
    .hero {
        grid-template-columns:1fr;
        grid-template-areas:
      "copy"
      "metrics";
        gap: 1.8rem;
    }

    .hero .metrics {
        max-width: 100%;
    }
}

/* Motion-reduced fallbacks */
@media (prefers-reduced-motion: reduce) {
    .hero .cta .btn {
        transition: none;
    }
}

/* ===== v10 Fidelity Pass 4.1: HERO type lockup tightening ===== */
.hero .inner {
    max-width: 920px;
}

.hero .display {
    /* tighten size curve and tracking for stronger presence */
    font-size: clamp(var(--t-2xl), 7.1vw, var(--t-3xl));
    letter-spacing: -.024em;
    line-height: 1.02;
}

@media (min-width: 1280px) {
    .hero .display {
        letter-spacing: -.026em;
    }
}

@media (min-width: 1440px) {
    .hero .display {
        letter-spacing: -.028em;
    }
}

@media (max-width: 760px) {
    .hero .display {
        font-size: clamp(40px, 11.5vw, 58px);
    }
}

/* lead rhythm and readability */
.hero .lead {
    line-height: 1.45;
    letter-spacing: .005em;
}

/* metrics width parity */
.hero .metrics {
    max-width: 420px;
}

/* ===== v10 Fidelity Pass 4.2: HERO lock — CTA + Pills specificity ===== */
.hero .cta .btn.primary {
    background: var(--brand);
    color: #062621;
    border: 1px solid var(--brand);
}

.hero .cta .btn.ghost {
    background: var(--surface-alt);
    color: var(--ink);
    border: 1px solid var(--line-strong);
}

.hero .cta .btn.ghost:hover {
    background: var(--brand);
    color: #062621;
    border-color: var(--brand);
}

/* Ensure pills render as pills (no bullets), even if global styles interfere */
.site-main .hero .pill-row,
.hero .pill-row {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: .6rem;
    padding: 0;
}

.hero .pill-row li {
    background: linear-gradient(135deg, #34bcaa, #659ad2);
    color: #062621;
    padding: 6px 14px;
    border-radius: var(--radius-pill);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .4px;
    box-shadow: var(--shadow-sm);
}

/* ===== Mobile Polish: Gutters & Safe Areas ===== */
:root {
    --gutter: clamp(16px, 5vw, 28px);
    --gutter-lg: clamp(24px, 6vw, 40px);
}


/* Header navbar gutters */
.site-header .navbar {
    padding-left: var(--gutter);
    padding-right: var(--gutter);
}

/* Panels: enforce horizontal padding + safe-area even when inner containers are zeroed */
.panel {
    padding-left: max(clamp(16px, 5vw, 32px), env(safe-area-inset-left));
    padding-right: max(clamp(16px, 5vw, 32px), env(safe-area-inset-right));
}

@media (max-width: 760px) {
    .panel {
        padding-top: clamp(20px, 6vw, 32px);
        padding-bottom: clamp(20px, 6vw, 36px);
    }
}

/* Ensure hero inner has safe breathing room on mobile */
@media (max-width: 760px) {
    .hero .inner {
        padding-right: 2px;
    }

    /* micro tweak to avoid wrap-pixel clipping on some engines */
}

/* Footer container gutters */
.site-footer .container {
    padding-left: var(--gutter);
    padding-right: var(--gutter);
}

/* Product/Filters layout: guard columns at tablet/mobile so text never kisses edges */
@media (max-width: 1200px) {
    .filters .flex {
        grid-template-columns:1fr 1fr;
    }
}

@media (max-width: 1020px) {
    .filters .flex {
        grid-template-columns:1fr;
    }
}

@media (max-width: 760px) {
    .lead-col, .specs, .aside {
        padding-left: 2px;
        padding-right: 2px;
    }
}

/* Compact heading/paragraph rhythm on small screens */
@media (max-width: 760px) {
    h1 {
        margin: 10px 0 8px;
    }

    h2 {
        margin: 12px 0 8px;
    }

    .lead, .lede {
        margin-bottom: 16px;
    }
}

/* Pills & buttons: reduce risk of overflow on very narrow devices */
@media (max-width: 360px) {
    .pill-row {
        gap: 8px;
    }

    .pill-row li {
        padding: 5px 10px;
        font-size: 11px;
    }

    .btn {
        padding: 12px 22px;
    }
}

/* Navigation wrap behavior at narrow widths */
@media (max-width: 760px) {
    .main-navigation ul {
        flex-wrap: wrap;
        row-gap: 8px;
    }
}

/* ===== Nav Stability: auto-height + nowrap + scroll ===== */
/* Allow header to grow if nav wraps; avoid overlay with content */
.site-header {
    height: auto;
    min-height: 68px;
}

/* Small screens still auto-height */
@media (max-width: 760px) {
    .site-header {
        min-height: 60px;
        height: auto;
    }
}

/* Prevent pill wrap within words, prefer horizontal scroll over line-wrap */
.main-navigation {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
}

.main-navigation::-webkit-scrollbar {
    display: none;
}

/* WebKit */

/* Keep list in a single row at most breakpoints; reduce gaps/pads slightly */
.main-navigation ul {
    flex-wrap: nowrap;
    gap: 12px;
}

@media (max-width: 1020px) {
    .main-navigation a {
        padding: 9px 12px;
    }
}

@media (max-width: 860px) {
    .main-navigation a {
        padding: 8px 10px;
        font-size: 15px;
    }
}

/* When we explicitly allow wrap (very narrow), header height will expand naturally */
@media (max-width: 560px) {
    .main-navigation ul {
        flex-wrap: wrap;
        row-gap: 8px;
    }
}

/* ===== Creative Logomark Integrations - Phase 1 (Foundation) ===== */

/* Logomark Utility Classes */
/* Base logomark container */
.logomark {
    display: inline-block;
    position: relative;
    background: transparent;
    border-radius: var(--radius-sm);
}

/* Size variations */
.logomark-xs {
    width: 24px;
    height: auto;
}

.logomark-sm {
    width: 32px;
    height: auto;
}

.logomark-md {
    width: 48px;
    height: auto;
}

.logomark-lg {
    width: 64px;
    height: auto;
}

.logomark-xl {
    width: 96px;
    height: auto;
}

.logomark-2xl {
    width: 128px;
    height: auto;
}

/* Color variations using brand palette */
.logomark-brand {
    filter: var(--logomark-filter-brand);
}

.logomark-brand-alt {
    filter: var(--logomark-filter-brand-alt);
}

.logomark-purple {
    filter: var(--logomark-filter-purple);
}

.logomark-light-blue {
    filter: var(--logomark-filter-light-blue);
}

.logomark-white {
    filter: var(--logomark-filter-white);
}

.logomark-muted {
    filter: var(--logomark-filter-muted);
    opacity: 0.6;
}

/* Opacity variations */
.logomark-opacity-10 { opacity: 0.1; }
.logomark-opacity-20 { opacity: 0.2; }
.logomark-opacity-30 { opacity: 0.3; }
.logomark-opacity-40 { opacity: 0.4; }
.logomark-opacity-50 { opacity: 0.5; }
.logomark-opacity-60 { opacity: 0.6; }
.logomark-opacity-70 { opacity: 0.7; }
.logomark-opacity-80 { opacity: 0.8; }
.logomark-opacity-90 { opacity: 0.9; }

/* Combined size and color classes */
.logomark-brand-sm {
    width: 32px;
    height: auto;
    filter: var(--logomark-filter-brand);
}

.logomark-brand-md {
    width: 48px;
    height: auto;
    filter: var(--logomark-filter-brand);
}

.logomark-brand-lg {
    width: 64px;
    height: auto;
    filter: var(--logomark-filter-brand);
}

.logomark-muted-xs {
    width: 24px;
    height: auto;
    filter: var(--logomark-filter-muted);
    opacity: 0.6;
}

/* Logomark CSS Filters for Color Variations */
:root {
    --logomark-filter-brand: brightness(0) saturate(100%) invert(47%) sepia(93%) saturate(1352%) hue-rotate(139deg) brightness(101%) contrast(101%);
    --logomark-filter-brand-alt: brightness(0) saturate(100%) invert(35%) sepia(93%) saturate(1352%) hue-rotate(169deg) brightness(101%) contrast(101%);
    --logomark-filter-purple: brightness(0) saturate(100%) invert(27%) sepia(93%) saturate(1352%) hue-rotate(226deg) brightness(101%) contrast(101%);
    --logomark-filter-light-blue: brightness(0) saturate(100%) invert(54%) sepia(93%) saturate(1352%) hue-rotate(184deg) brightness(101%) contrast(101%);
    --logomark-filter-white: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);
    --logomark-filter-muted: brightness(0.6) saturate(0.8) contrast(1.2);
}

/* Background Pattern Implementations */
/* Subtle logomark patterns for different sections */
.bg-pattern-logomark {
    position: relative;
    overflow: hidden;
}

.bg-pattern-logomark::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: var(--logomark-pattern);
    background-size: 200px 200px;
    background-repeat: repeat;
    opacity: var(--logomark-pattern-opacity, 0.03);
    pointer-events: none;
    z-index: 0;
}

.bg-pattern-logomark > * {
    position: relative;
    z-index: 1;
}

/* Hero section pattern */
.hero.bg-pattern-logomark::before {
    --logomark-pattern-opacity: 0.05;
    background-size: 300px 300px;
}

/* Card patterns */
.card.bg-pattern-logomark::before {
    --logomark-pattern-opacity: 0.04;
    background-size: 150px 150px;
}

/* Section patterns */
.section.bg-pattern-logomark::before {
    --logomark-pattern-opacity: 0.025;
    background-size: 250px 250px;
}

/* Logomark pattern SVG data URL */
:root {
    --logomark-pattern: url("data:image/svg+xml;charset=utf-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 551 792'%3e%3cpath fill='%2334bcaa' opacity='0.03' d='M392.3,476.12c2.6-5.35,9.52-19.54,1.07-27.24-5.4-4.92-13.52-3.61-20.72-.76-1.18-1.62-2.74-2.97-4.64-3.99-8.38-4.49-21.58-.56-30.68,9.16-7.07,7.59-28.59,19.77-38.07,24.78-24.35,1.42-27.91-3.52-27.93-3.57-1.01-2.54,5.33-11.93,14.18-19.85,11.89.4,24.92-.88,29.14-10.54.88-2.03,1.2-4.03,1.13-5.94l19.28,1.08c9.4.48,14.59-3.18,17.29-6.39,6.24-7.41,4.1-17.65,3.83-18.8l-1.17-5.03-17-3.69,5-4.3,1-1.02c3.24-3.94,11.84-14.42,6.15-23.07-5.37-8.19-18.1-5.58-23.31-4.09l-6.62,1.9.65,5.82c-.78,1.51-5.96,9.04-32.69,15.01-4.89,1.09-7.91,1.39-9.76,1.33,1.51-3.28,5.23-8.57,9.13-12.79,9.24-7.17,18.11-15.63,16.03-24.57,5.6-4.17,9.71-9.39,8.53-16-.86-4.84-4.32-8.06-8.39-10.2l6.83-7.79c7.82-8.91,9.09-15.91,3.78-20.82-9.7-8.96-30.97,6.7-37.2,13.1-3.07,3.15-6.98,4.75-10.82,5.48,3.02-3.38,6.92-7.66,11.94-13.04,2.87-3.07,11.62-12.42,6.62-21.58-4.89-8.97-19.31-8.61-29.15-7.15,4.83-4.86,9.53-11.4,12.81-20.07,1.27-3.36,4.66-12.28-1.44-17.58-6.36-5.51-14.31-1.15-24.37,4.39-3.64,2-8.24,4.53-12.03,5.99,1.03-3.02,2.81-6.95,4.78-10.43,4.37-3.93,18.84-17.8,22.13-31.79,1.15-4.88-.15-9.4-3.57-12.39-5.1-4.46-14.43-4.06-24.15-1.8.91-5.58.46-10.78-1.36-15.56-2.48-6.52-6.92-10.67-10.58-13.14,1.09-15.2,2.32-51.08-8.93-64.18-3.15-3.67-7.19-5.74-11.66-5.99-5.08-.25-9.45,1.7-12.43,5.58-9.54,12.44-.64,45.66,4.54,61.84-1.15,2.81-3.95,6.94-10.78,6.58-7.54-.41-12.62,1.75-15.15,6.44-4.31,7.99,2.13,16.73,8.37,25.17,1.05,1.43,2.09,2.82,2.97,4.1.47.68,1.36,1.97,1.28,3.31-6.48.96-9.47,4.6-10.76,6.98-5.23,9.65,3.35,23.12,7.28,28.47l1.27,1.71,1.92.88c4.27,1.95,8.96,5.54,9.55,6.42,0,0-.19.37-.96,1.03-6.5,5.6-13.75-.16-15.08-1.33l-1.65-1.49-2.18-.45c-17.92-3.67-26.52,2.68-30.05,6.79-4.33,5.05-5.52,11.85-3.17,18.18,3.02,8.15,11.16,13.99,21.77,15.62,4.3.66,7.13,2.09,8.42,4.27.99,1.66,1.19,3.84,1.07,5.82-3.97.07-9.48-.15-14.83-1.5-14.39-3.62-23.92,1.43-24.96,2.01l-6.15,3.48,2.58,6.58c.37.96,9.37,23.57,27.36,34.87,2,1.26,2.94,2.2,3.36,2.71-.08.1-.17.2-.27.29-16.12-1.35-19.23-5.74-23.1-11.22-2.92-4.14-6.56-9.28-14.22-12.97-7.97-3.83-12.8-.39-14.51,1.28-2.32,2.25-8.17,7.93,2.75,35.56-5.51,3.28-6.09,7.75-5.76,10.64,0,.03,0,.06,0,.09-.81.22-1.47.5-1.95.74-2.66,1.33-10.73,5.35-8.63,36.04l.29,4.35,7.98,4.57c-.87-.01-1.68.03-2.44.16-8.15,1.35-12.96,11.17-15.78,21.36-6.94-.69-15.78.03-19.92,7.25-5.25,9.15,1.86,21.91,9.43,31.64-5.29,3.87-10.11,9.32-8.34,16.23.76,2.93,2.8,10.92,27.1,12.95-.08,1.14,0,2.3.25,3.48,1.15,5.35,5.76,8.96,11.39,11.41-1.06,4.57-.35,9.56.81,13.75-11.42,3.67-12.95,2.69-15.93.78-4.53-2.9-11.37-7.28-28.88-9.32-6.05-.7-20.25-2.36-23.79,7.6-1.12,3.16-3.98,11.23,19.23,27.2-.09,3.69,1.46,6.27,2.71,7.75,3.16,3.73,8.77,5.31,16.75,4.71-.46,2.62-.25,5.33,1.01,8.02,3.51,7.5,12.85,9.27,20.46,9.36,1.72,8.41,5.35,16.24,12.87,17.28,10.84,1.53,16.01-12.28,17.96-17.45.92-2.4,2.05-4.01,2.98-4.19.41-.09.88-.06,1.41.04-.88,1.01-1.61,2.22-2.15,3.64-2.81,7.53,2.64,15.67,9.65,22.44-5.61,3.72-16.42,8.14-35.62,7.03-7.19-.39-22.22-1.25-25.21,9.11-.39,1.34-1.14,3.96.55,7.69l-21.13-1.19c-12.22-.67-25.47-.57-27.87,9.24-.67,2.73-2.03,8.3,10.23,16.52-1.82,1.96-2.88,4.04-3.5,5.94-2.05,6.34.12,13.47,5.69,18.6,5.35,4.93,12.3,6.48,18.13,4.06,4.52-1.86,11.93-3.75,18.12-5.13-2.9,9.8-4.14,19.45,3.28,23.64,2.57,1.44,7.91,4.47,20.35-6.67,2.11,2.39,4.49,3.54,5.74,4.01,1.83.69,3.81,1.01,5.76.98-16.19,14.47-23.58,21.12-21.65,28.96.87,3.51,3.61,6.17,7.35,7.11,14.93,3.73,39.36-8.85,51.69-20.2.76,1.7,1.55,3.94,2.25,6.37-9.28,4.26-25.87,13.16-34.19,25.49-4.81,7.12-2.11,12.32-.73,14.22,1.4,1.93,3.89,5.36,14.51,5.36,7.58,0,19.31-1.76,37.74-7.06l2.52-.75,1.62-2.03c1.71-2.15,6.46-6.57,10.22-6.57h.01c.65,0,2.63,0,5.47,3.6,7.13,9.04,14.07,10.11,18.65,9.39,6.95-1.07,11.47-6.5,14-10.76l16.17-1.03c.47,1.54.92,3.11,1.34,4.66l1.45,5.33,5.49.62c12.05,1.37,24.86,1.48,28.45-7.99,2.13-5.6-.53-11.18-4.86-16.05l9.41-4.74c9.85,5.8,33.88,17.7,49.46,6.6,7.19-5.12,7.27-10.99,6.68-14.04-.7-3.59-3.01-6.65-6.28-9.26,15.12-.37,20.23-7.06,21.73-13.15,2.66-10.8-6.5-23.57-13.84-29.37,1.2-2.16,3.24-5.13,5.46-7.87,3.5-.88,6.37-1.54,8.66-2.06,7.29-1.66,12.56-2.87,13.78-8.92,1.19-5.92-3.23-9.1-7.14-11.89-2.97-2.13-7.47-5.35-12.98-10.66-.65-.62-1.22-1.2-1.72-1.72.2.02.39.04.58.07l1.62.23,1.59-.41c11.66-3.03,18.49-8.53,20.33-16.34,2.47-10.54-5.95-20.06-9.41-23.45l-1.27-2.52c14.21-.25,30.07-10.68,34.02-13.43l1.67-1.55c7.34-9.06,9.16-17.16,5.41-24.1-6.7-12.38-29.02-12.82-42.05-11.95-3.41-3.23-8.24-5.24-13.74-6.4,4.49-4.04,7.27-10.49,8.96-16.33,4.56,1.41,8.66,1.05,12.23-1.09,6.04-3.62,7.81-11.05,8.08-17.46h.02c7.91,0,15.29-1.77,18.23-8.39,2.27-5.11.51-10.19-2.17-14.3l11.72-8.6.88-1.81ZM107.79,435.14s.09.06.14.08c3.03,1.83,8.75,5.29,11.34,7.72-2.46,2.98-5.8,8.27-3.44,14.16,3.51,8.75,14.29,9.35,35.77,10.54,6.8.38,10.87,1.66,12.96,2.68-1.04.74-2.67,1.7-5.1,2.7-15.87,6.58-33.77.06-52.23-7.8-.96-.41-1.6-.75-2.01-1.01.29-.92.84-2.24,1.28-3.28,2.34-5.61,6.13-14.69,1.31-25.79ZM131.05,391.37c8.23-.36,14.77,9.06,18.84,17.5l-15.15.27c-3.39-4.03-9.7-11.39-16.19-18.28,4.33.57,8.69.69,12.5.51Z'/%3e%3crect fill='%234e457b' opacity='0.04' x='121.4' y='329.51' width='715.37' height='90.08' transform='translate(104.52 853.63) rotate(-90)'/%3e%3cpath fill='%231b7d9a' opacity='0.03' d='M178.73,172.98c6.83.36,9.63-3.77,10.78-6.58-5.18-16.17-14.08-49.39-4.54-61.84,2.98-3.89,7.35-5.84,12.43-5.58,4.47.25,8.5,2.32,11.66,5.99,11.25,13.1,10.02,48.98,8.93,64.18,3.66,2.47,8.1,6.62,10.58,13.14,1.82,4.78,2.27,9.99,1.36,15.56,9.6-2.23,18.81-2.63,23.94,1.65V16.87h-90.08v162.28c2.59-4.48,7.57-6.58,14.94-6.17Z'/%3e%3c/svg%3e");
}

/* Decorative Elements */
/* Section dividers with logomark accents */
.section-divider {
    position: relative;
    padding: 2rem 0;
    margin: 3rem 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.section-divider::before,
.section-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--line-strong) 50%, transparent);
}

.section-divider::before {
    margin-right: 2rem;
}

.section-divider::after {
    margin-left: 2rem;
}

.section-divider-logomark {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 32px;
    height: 32px;
    background: var(--surface-alt);
    border: 2px solid var(--line-strong);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    filter: var(--logomark-filter-brand);
    opacity: 0.7;
}

/* Decorative corner elements */
.decorative-corner {
    position: relative;
}

.decorative-corner::before,
.decorative-corner::after {
    content: '';
    position: absolute;
    width: 24px;
    height: 24px;
    filter: var(--logomark-filter-brand);
    opacity: 0.1;
    pointer-events: none;
}

.decorative-corner-top-left::before {
    top: -12px;
    left: -12px;
    background-image: url("data:image/svg+xml;charset=utf-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 551 792'%3e%3cpath fill='%2334bcaa' opacity='0.1' d='M338.03,405.32c5.92,1.28,5.92-5.23,0,-3.95Z'/%3e%3c/svg%3e");
    background-size: contain;
    background-repeat: no-repeat;
}

.decorative-corner-top-right::after {
    top: -12px;
    right: -12px;
    background-image: url("data:image/svg+xml;charset=utf-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 551 792'%3e%3cpath fill='%231b7d9a' opacity='0.1' d='M343.95,406.6c-5.92,1.28-5.92-5.23,0,-3.95Z'/%3e%3c/svg%3e");
    background-size: contain;
    background-repeat: no-repeat;
}

.decorative-corner-bottom-left::before {
    bottom: -12px;
    left: -12px;
    background-image: url("data:image/svg+xml;charset=utf-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 551 792'%3e%3cpath fill='%234e457b' opacity='0.1' d='M343.65,677.15c2.3.53-5.17,1.18-8.66,2.06-2.21,2.73-4.26,5.7-5.46,7.87Z'/%3e%3c/svg%3e");
    background-size: contain;
    background-repeat: no-repeat;
}

.decorative-corner-bottom-right::after {
    bottom: -12px;
    right: -12px;
    background-image: url("data:image/svg+xml;charset=utf-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 551 792'%3e%3cpath fill='%23659ad2' opacity='0.1' d='M343.95,527.91c-.22-.06-.42-.07-.64-.14-1.69,5.84-4.47,12.29-8.96,16.33Z'/%3e%3c/svg%3e");
    background-size: contain;
    background-repeat: no-repeat;
}

/* Interactive Elements */
/* Hover effects for logomark elements */
.logomark-interactive {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
}

.logomark-interactive:hover {
    transform: scale(1.1);
    filter: var(--logomark-filter-brand) brightness(1.2);
}

.logomark-interactive:active {
    transform: scale(0.95);
}

/* Pulse animation for attention */
@keyframes logomark-pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.05);
        opacity: 0.8;
    }
}

.logomark-pulse {
    animation: logomark-pulse 2s ease-in-out infinite;
}

/* Subtle glow effect */
.logomark-glow {
    filter: var(--logomark-filter-white) drop-shadow(0 0 0px rgba(255, 255, 255, 0.332));
    transition: filter 0.3s ease;
}

.logomark-glow:hover {
    filter: var(--logomark-filter-white) drop-shadow(0 0 16px rgba(52, 188, 170, 0.5));
}

/* Watermark Effects */
/* Subtle logo overlays for key sections */
.watermark-logomark {
    position: relative;
    overflow: hidden;
}

.watermark-logomark::after {
    content: '';
    position: absolute;
    bottom: 2rem;
    right: 2rem;
    width: 120px;
    height: 120px;
    background: var(--logomark-watermark-bg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: var(--logomark-watermark-opacity, 0.05);
    pointer-events: none;
    z-index: 0;
}


.watermark-logomark > * {
    position: relative;
    z-index: 1;
}

/* Hero watermark */
/* .hero.watermark-logomark::after {
    --logomark-watermark-opacity: 0.08;
    bottom: 4rem;
    right: 4rem;
    width: 200px;
    height: 200px;
} */

.hero.watermark-logomark::after {
    --logomark-watermark-opacity: 0.38;
    left: 10vw;
    width: 180vw;
    height: 180vh;
    bottom: -50vh;
}

/* Footer watermark */
.site-footer.watermark-logomark::after {
    --logomark-watermark-opacity: 0.06;
    bottom: 2rem;
    right: 2rem;
    width: 150px;
    height: 150px;
}

/* Card watermark */
.card.watermark-logomark::after {
    --logomark-watermark-opacity: 0.04;
    bottom: 1rem;
    right: 1rem;
    width: 80px;
    height: 80px;
}

/* Watermark background using SVG data URL */
:root {
    --logomark-watermark-bg: url("data:image/svg+xml;charset=utf-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 551 792'%3e%3cpath fill='%2334bcaa' opacity='0.06' d='M392.3,476.12c2.6-5.35,9.52-19.54,1.07-27.24-5.4-4.92-13.52-3.61-20.72-.76-1.18-1.62-2.74-2.97-4.64-3.99-8.38-4.49-21.58-.56-30.68,9.16-7.07,7.59-28.59,19.77-38.07,24.78-24.35,1.42-27.91-3.52-27.93-3.57-1.01-2.54,5.33-11.93,14.18-19.85,11.89.4,24.92-.88,29.14-10.54.88-2.03,1.2-4.03,1.13-5.94l19.28,1.08c9.4.48,14.59-3.18,17.29-6.39,6.24-7.41,4.1-17.65,3.83-18.8l-1.17-5.03-17-3.69,5-4.3,1-1.02c3.24-3.94,11.84-14.42,6.15-23.07-5.37-8.19-18.1-5.58-23.31-4.09l-6.62,1.9.65,5.82c-.78,1.51-5.96,9.04-32.69,15.01-4.89,1.09-7.91,1.39-9.76,1.33,1.51-3.28,5.23-8.57,9.13-12.79,9.24-7.17,18.11-15.63,16.03-24.57,5.6-4.17,9.71-9.39,8.53-16-.86-4.84-4.32-8.06-8.39-10.2l6.83-7.79c7.82-8.91,9.09-15.91,3.78-20.82-9.7-8.96-30.97,6.7-37.2,13.1-3.07,3.15-6.98,4.75-10.82,5.48,3.02-3.38,6.92-7.66,11.94-13.04,2.87-3.07,11.62-12.42,6.62-21.58-4.89-8.97-19.31-8.61-29.15-7.15,4.83-4.86,9.53-11.4,12.81-20.07,1.27-3.36,4.66-12.28-1.44-17.58-6.36-5.51-14.31-1.15-24.37,4.39-3.64,2-8.24,4.53-12.03,5.99,1.03-3.02,2.81-6.95,4.78-10.43,4.37-3.93,18.84-17.8,22.13-31.79,1.15-4.88-.15-9.4-3.57-12.39-5.1-4.46-14.43-4.06-24.15-1.8.91-5.58.46-10.78-1.36-15.56-2.48-6.52-6.92-10.67-10.58-13.14,1.09-15.2,2.32-51.08-8.93-64.18-3.15-3.67-7.19-5.74-11.66-5.99-5.08-.25-9.45,1.7-12.43,5.58-9.54,12.44-.64,45.66,4.54,61.84-1.15,2.81-3.95,6.94-10.78,6.58-7.54-.41-12.62,1.75-15.15,6.44-4.31,7.99,2.13,16.73,8.37,25.17,1.05,1.43,2.09,2.82,2.97,4.1.47.68,1.36,1.97,1.28,3.31-6.48.96-9.47,4.6-10.76,6.98-5.23,9.65,3.35,23.12,7.28,28.47l1.27,1.71,1.92.88c4.27,1.95,8.96,5.54,9.55,6.42,0,0-.19.37-.96,1.03-6.5,5.6-13.75-.16-15.08-1.33l-1.65-1.49-2.18-.45c-17.92-3.67-26.52,2.68-30.05,6.79-4.33,5.05-5.52,11.85-3.17,18.18,3.02,8.15,11.16,13.99,21.77,15.62,4.3.66,7.13,2.09,8.42,4.27.99,1.66,1.19,3.84,1.07,5.82-3.97.07-9.48-.15-14.83-1.5-14.39-3.62-23.92,1.43-24.96,2.01l-6.15,3.48,2.58,6.58c.37.96,9.37,23.57,27.36,34.87,2,1.26,2.94,2.2,3.36,2.71-.08.1-.17.2-.27.29-16.12-1.35-19.23-5.74-23.1-11.22-2.92-4.14-6.56-9.28-14.22-12.97-7.97-3.83-12.8-.39-14.51,1.28-2.32,2.25-8.17,7.93,2.75,35.56-5.51,3.28-6.09,7.75-5.76,10.64,0,.03,0,.06,0,.09-.81.22-1.47.5-1.95.74-2.66,1.33-10.73,5.35-8.63,36.04l.29,4.35,7.98,4.57c-.87-.01-1.68.03-2.44.16-8.15,1.35-12.96,11.17-15.78,21.36-6.94-.69-15.78.03-19.92,7.25-5.25,9.15,1.86,21.91,9.43,31.64-5.29,3.87-10.11,9.32-8.34,16.23.76,2.93,2.8,10.92,27.1,12.95-.08,1.14,0,2.3.25,3.48,1.15,5.35,5.76,8.96,11.39,11.41-1.06,4.57-.35,9.56.81,13.75-11.42,3.67-12.95,2.69-15.93.78-4.53-2.9-11.37-7.28-28.88-9.32-6.05-.7-20.25-2.36-23.79,7.6-1.12,3.16-3.98,11.23,19.23,27.2-.09,3.69,1.46,6.27,2.71,7.75,3.16,3.73,8.77,5.31,16.75,4.71-.46,2.62-.25,5.33,1.01,8.02,3.51,7.5,12.85,9.27,20.46,9.36,1.72,8.41,5.35,16.24,12.87,17.28,10.84,1.53,16.01-12.28,17.96-17.45.92-2.4,2.05-4.01,2.98-4.19.41-.09.88-.06,1.41.04-.88,1.01-1.61,2.22-2.15,3.64-2.81,7.53,2.64,15.67,9.65,22.44-5.61,3.72-16.42,8.14-35.62,7.03-7.19-.39-22.22-1.25-25.21,9.11-.39,1.34-1.14,3.96.55,7.69l-21.13-1.19c-12.22-.67-25.47-.57-27.87,9.24-.67,2.73-2.03,8.3,10.23,16.52-1.82,1.96-2.88,4.04-3.5,5.94-2.05,6.34.12,13.47,5.69,18.6,5.35,4.93,12.3,6.48,18.13,4.06,4.52-1.86,11.93-3.75,18.12-5.13-2.9,9.8-4.14,19.45,3.28,23.64,2.57,1.44,7.91,4.47,20.35-6.67,2.11,2.39,4.49,3.54,5.74,4.01,1.83.69,3.81,1.01,5.76.98-16.19,14.47-23.58,21.12-21.65,28.96.87,3.51,3.61,6.17,7.35,7.11,14.93,3.73,39.36-8.85,51.69-20.2.76,1.7,1.55,3.94,2.25,6.37-9.28,4.26-25.87,13.16-34.19,25.49-4.81,7.12-2.11,12.32-.73,14.22,1.4,1.93,3.89,5.36,14.51,5.36,7.58,0,19.31-1.76,37.74-7.06l2.52-.75,1.62-2.03c1.71-2.15,6.46-6.57,10.22-6.57h.01c.65,0,2.63,0,5.47,3.6,7.13,9.04,14.07,10.11,18.65,9.39,6.95-1.07,11.47-6.5,14-10.76l16.17-1.03c.47,1.54.92,3.11,1.34,4.66l1.45,5.33,5.49.62c12.05,1.37,24.86,1.48,28.45-7.99,2.13-5.6-.53-11.18-4.86-16.05l9.41-4.74c9.85,5.8,33.88,17.7,49.46,6.6,7.19-5.12,7.27-10.99,6.68-14.04-.7-3.59-3.01-6.65-6.28-9.26,15.12-.37,20.23-7.06,21.73-13.15,2.66-10.8-6.5-23.57-13.84-29.37,1.2-2.16,3.24-5.13,5.46-7.87,3.5-.88,6.37-1.54,8.66-2.06,7.29-1.66,12.56-2.87,13.78-8.92,1.19-5.92-3.23-9.1-7.14-11.89-2.97-2.13-7.47-5.35-12.98-10.66-.65-.62-1.22-1.2-1.72-1.72.2.02.39.04.58.07l1.62.23,1.59-.41c11.66-3.03,18.49-8.53,20.33-16.34,2.47-10.54-5.95-20.06-9.41-23.45l-1.27-2.52c14.21-.25,30.07-10.68,34.02-13.43l1.67-1.55c7.34-9.06,9.16-17.16,5.41-24.1-6.7-12.38-29.02-12.82-42.05-11.95-3.41-3.23-8.24-5.24-13.74-6.4,4.49-4.04,7.27-10.49,8.96-16.33,4.56,1.41,8.66,1.05,12.23-1.09,6.04-3.62,7.81-11.05,8.08-17.46h.02c7.91,0,15.29-1.77,18.23-8.39,2.27-5.11.51-10.19-2.17-14.3l11.72-8.6.88-1.81ZM107.79,435.14s.09.06.14.08c3.03,1.83,8.75,5.29,11.34,7.72-2.46,2.98-5.8,8.27-3.44,14.16,3.51,8.75,14.29,9.35,35.77,10.54,6.8.38,10.87,1.66,12.96,2.68-1.04.74-2.67,1.7-5.1,2.7-15.87,6.58-33.77.06-52.23-7.8-.96-.41-1.6-.75-2.01-1.01.29-.92.84-2.24,1.28-3.28,2.34-5.61,6.13-14.69,1.31-25.79ZM131.05,391.37c8.23-.36,14.77,9.06,18.84,17.5l-15.15.27c-3.39-4.03-9.7-11.39-16.19-18.28,4.33.57,8.69.69,12.5.51Z'/%3e%3c/svg%3e");
}

/* Accessibility improvements */
@media (prefers-reduced-motion: reduce) {
    .logomark-interactive,
    .logomark-pulse,
    .logomark-glow {
        transition: none;
        animation: none;
    }

    .logomark-interactive:hover {
        transform: none;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .logomark-muted {
        opacity: 0.3;
    }

    .bg-pattern-logomark::before {
        display: none;
    }

    .watermark-logomark::after {
        opacity: 0.1;
    }
}

/* Performance optimizations */
.logomark,
.bg-pattern-logomark,
.watermark-logomark {
    will-change: auto;
}

.logomark-interactive {
    will-change: transform, filter;
}

/* Focus styles for accessibility */
.logomark-interactive:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}