/* ===========================
   Fenryx - Light Premium Design
   =========================== */

:root {
    /* Brand Palette */
    --bg-primary: #FFFFFF;
    --bg-secondary: #f8f9fc;
    --bg-card: #FFFFFF;
    --bg-card-hover: #f5f7fa;

    --text-primary: #0F0F45;
    --text-secondary: #4a4a6a;
    /* Darkened from #7a7a9a: at 3.9:1 on the #f8f9fc footer it sat under
       WCAG AA for body-sized text. #6c6c8e clears 4.7:1 on every surface
       this palette uses and keeps the same lavender cast. */
    --text-muted: #6c6c8e;

    /* Accent - Brand Blue */
    --accent-primary: #282CFF;
    --accent-secondary: #FE6600;
    --accent-gradient: linear-gradient(135deg, #282CFF 0%, #4a4eff 100%);
    --accent-light: rgba(40, 44, 255, 0.08);

    /* Secondary Accent - Orange */
    --accent-orange: #FE6600;
    /* Same hue, deep enough to carry words. #FE6600 is a 2.95:1 fill \002014
       fine behind an icon or a rule, under AA the moment it becomes
       text. Anything readable in orange uses this instead. Set against
       the tinted pill (--accent-orange-light over white, the worst case
       on the site) rather than against plain white, so it clears 4.5:1
       everywhere it is actually used. */
    --accent-orange-ink: #b84a00;
    --accent-orange-light: rgba(254, 102, 0, 0.08);

    --border-color: rgba(0, 0, 0, 0.06);
    --border-hover: rgba(0, 0, 0, 0.12);

    /* Spacing */
    --space-xs: 0.5rem;
    --space-sm: 1rem;
    --space-md: 1.5rem;
    --space-lg: 2rem;
    --space-xl: 3rem;
    --space-2xl: 5rem;
    --space-3xl: 8rem;

    /* Vertical section rhythm. Halved 2026-09-07 at the operator's request:
       the old 8rem block padding plus an 8rem header margin stacked into a
       screen of dead space between every two blocks. Section top/bottom
       padding and the bottom margin of every centred section header come
       from these tokens only \002014 new pages must use them (never a bare
       --space-3xl for vertical block spacing) so the rhythm stays tight. */
    --section-pad-y: 4rem;
    --section-pad-y-sm: 2.5rem;
    --section-header-gap: 4rem;

    /* Typography - Brand Font */
    --font-primary: 'Funnel Display', -apple-system, BlinkMacSystemFont, sans-serif;
    /* The homepage pairs Funnel Display for display type with Inter for
       running text, both self-hosted from /home/fonts.css. Carried here
       2026-09-21 so every page reads in the same two faces. */
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;

    /* Border Radius */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;

    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.08);

    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-base: 0.3s ease;
    --transition-slow: 0.5s ease;
}

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

html {
    scroll-behavior: smooth;
    font-size: 16px;
    overflow-x: hidden;
    width: 100%;
}

body {
    font-family: var(--font-primary);
    background-color: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.6;
    overflow-x: hidden;
    width: 100%;
    max-width: 100vw;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a {
    color: inherit;
    text-decoration: none;
}

p a {
    color: var(--accent-primary);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.15s ease;
    display: inline;
}

p a:hover {
    text-decoration: underline;
    opacity: 0.9;
}

ul {
    list-style: none;
}

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

/* Background Effects - Light Theme */
.bg-grid {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    max-width: 100vw;
    height: 100%;
    background-image:
        linear-gradient(rgba(0, 102, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 102, 255, 0.03) 1px, transparent 1px);
    background-size: 80px 80px;
    pointer-events: none;
    z-index: 0;
}

.bg-gradient {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    max-width: 100vw;
    height: 100%;
    background:
        radial-gradient(ellipse 80% 50% at 50% -20%, rgba(0, 102, 255, 0.06), transparent),
        radial-gradient(ellipse 60% 40% at 100% 0%, rgba(0, 82, 204, 0.04), transparent);
    pointer-events: none;
    z-index: 0;
}

/* Navigation */
.nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    max-width: 100vw;
    z-index: 1000;
    padding: var(--space-md) 0;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border-color);
    transition: var(--transition-base);
}

.nav-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 var(--space-lg);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.logo {
    display: flex;
    align-items: center;
}

.logo-img {
    height: 50px;
    width: auto;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: var(--space-xl);
}

.nav-links a {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-secondary);
    transition: var(--transition-fast);
}

.nav-links a:hover {
    color: var(--accent-primary);
}

.nav-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--space-xs);
}

.nav-toggle span {
    width: 24px;
    height: 2px;
    background: var(--text-primary);
    transition: var(--transition-fast);
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    padding: 0.75rem 1.5rem;
    font-family: var(--font-primary);
    font-size: 0.95rem;
    font-weight: 500;
    border-radius: var(--radius-md);
    border: none;
    cursor: pointer;
    transition: var(--transition-base);
}

.btn-primary {
    background: var(--accent-primary);
    color: #ffffff;
}

.btn-primary:hover {
    /* The label stays #ffffff through the hover, so the fill has to stay
       readable underneath it \002014 the bright accent would drop it to 2.95:1. */
    background: var(--accent-orange-ink);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 102, 255, 0.25);
}

.btn-outline {
    background: transparent;
    border: 1px solid var(--border-hover);
    color: var(--text-primary);
}

.btn-outline:hover {
    background: var(--bg-secondary);
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}

.btn-ghost {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

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

.btn-large {
    padding: 1rem 2rem;
    font-size: 1rem;
}

/* Hero Section */
.hero {
    position: relative;
    min-height: 90vh;
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    align-items: center;
    gap: var(--space-3xl);
    max-width: 1280px;
    margin: 0 auto;
    padding: calc(var(--section-pad-y) + 80px) var(--space-xl) var(--section-pad-y);
    z-index: 1;
}

.hero-content {
    max-width: 600px;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: 0.5rem 1rem;
    background: var(--accent-light);
    border: 1px solid rgba(0, 102, 255, 0.15);
    border-radius: 100px;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--accent-primary);
    margin-bottom: var(--space-lg);
}

.badge-dot {
    width: 8px;
    height: 8px;
    background: var(--accent-primary);
    border-radius: 50%;
    animation: pulse 2s infinite;
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

.hero-title {
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.03em;
    margin-bottom: var(--space-lg);
    color: var(--text-primary);
}

.gradient-text {
    color: var(--accent-primary);
}

.title-line {
    white-space: nowrap;
}

@media (max-width: 640px) {
    .title-line {
        white-space: normal;
    }

    .hero-title {
        font-size: clamp(1.8rem, 8vw, 2.5rem);
    }
}

.hero-subtitle {
    font-size: 1.15rem;
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: var(--space-xl);
}

.hero-cta {
    display: flex;
    gap: var(--space-md);
    margin-bottom: var(--space-2xl);
}

.hero-stats {
    display: flex;
    align-items: center;
    gap: var(--space-xl);
}

.stat {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.stat-value {
    font-size: 1.1rem;
    font-weight: 600;
    font-family: var(--font-mono);
    color: var(--text-primary);
}

.stat-label {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.stat-divider {
    width: 1px;
    height: 40px;
    background: var(--border-color);
}

/* Hero Visual - World Map */
.hero-visual {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.world-map-container {
    position: relative;
    width: 100%;
    max-width: 800px;
    min-height: 450px;
    padding: var(--space-md);
    background: transparent;
    overflow: visible;
}

.world-map {
    width: 100%;
    height: 100%;
    min-height: 400px;
}

.world-map-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse at center, rgba(0, 102, 255, 0.03) 0%, transparent 70%);
    pointer-events: none;
}

/* Dynamic payment paths */
.dynamic-path {
    pointer-events: none;
    filter: drop-shadow(0 0 4px var(--accent-primary));
}


/* Map dots subtle animation */
.map-dots circle {
    animation: dotFade 4s ease-in-out infinite;
}

.map-dots circle:nth-child(odd) {
    animation-delay: 0.5s;
}

.map-dots circle:nth-child(3n) {
    animation-delay: 1s;
}

@keyframes dotFade {

    0%,
    100% {
        opacity: 0.15;
    }

    50% {
        opacity: 0.3;
    }
}


/* Section Styles */
.section-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: var(--section-pad-y) var(--space-lg);
    position: relative;
    z-index: 1;
}

.section-header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto var(--section-header-gap);
}

.section-label {
    display: inline-block;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--accent-primary);
    margin-bottom: var(--space-md);
}

.section-title {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
    margin-bottom: var(--space-md);
    color: var(--text-primary);
}

.section-subtitle {
    font-size: 1.1rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

/* Products Section */
.products {
    background: var(--bg-secondary);
    position: relative;
}

.products::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: var(--accent-gradient);
    opacity: 0.2;
}

.products-header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto var(--section-header-gap);
}

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

.product-card {
    position: relative;
    padding: var(--space-xl);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition: var(--transition-base);
}

/* A card is a link only where a page corresponds to it, so the hover
   affordance is scoped to the anchor form. A plain card stays inert. */
a.product-card { display: block; color: inherit; text-decoration: none; }

a.product-card:hover {
    background: var(--bg-card-hover);
    border-color: var(--border-hover);
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

a.product-card:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 3px;
}

.product-card.featured {
    border-color: rgba(40, 44, 255, 0.3);
    background: linear-gradient(180deg, rgba(40, 44, 255, 0.04) 0%, var(--bg-card) 100%);
}

.product-card.featured .product-badge {
    background: var(--accent-orange);
}

.product-badge {
    position: absolute;
    top: var(--space-md);
    right: var(--space-md);
    padding: 0.25rem 0.75rem;
    background: var(--accent-primary);
    border-radius: 100px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #ffffff;
}

.product-icon {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--accent-primary) 0%, #6366f1 100%);
    border-radius: var(--radius-lg);
    color: #ffffff;
    margin-bottom: var(--space-lg);
    box-shadow: 0 8px 20px rgba(40, 44, 255, 0.25);
    transition: var(--transition-base);
}

a.product-card:hover .product-icon {
    transform: scale(1.1);
    box-shadow: 0 12px 28px rgba(40, 44, 255, 0.35);
}

.product-icon svg {
    width: 28px;
    height: 28px;
}

.product-title {
    font-size: 1.35rem;
    font-weight: 600;
    margin-bottom: var(--space-sm);
    color: var(--text-primary);
}

.product-desc,
.product-description {
    font-size: 0.95rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: var(--space-lg);
}

.product-status {
    display: inline-block;
    margin-top: var(--space-md);
    padding: 0.35rem 0.85rem;
    background: var(--accent-orange-light);
    color: var(--accent-orange-ink);
    font-size: 0.8rem;
    font-weight: 600;
    border-radius: 100px;
}

.product-features {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    margin-bottom: var(--space-lg);
}

.product-features li {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.product-features li::before {
    content: '\002192';
    color: var(--accent-primary);
    font-weight: 600;
}

.product-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--accent-primary);
    transition: var(--transition-fast);
}

.product-link:hover {
    gap: var(--space-sm);
}

/* Advantages Section */
.advantages {
    background: var(--bg-secondary);
}

.advantages-content {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: var(--space-3xl);
    align-items: start;
}

.advantages-left {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.advantages-right {
    position: sticky;
    top: 120px;
}

.advantage-item {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-lg);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition: var(--transition-base);
    cursor: pointer;
}

.advantage-item .advantage-content p {
    margin-bottom: 0;
}

.advantage-arrow {
    margin-left: auto;
    font-size: 1.2rem;
    color: var(--text-muted);
    transition: var(--transition-base);
}

.advantage-item:hover .advantage-arrow,
.advantage-item.active .advantage-arrow {
    color: var(--accent-primary);
    transform: translateX(4px);
}

.advantage-item.active {
    border-color: var(--accent-primary);
    background: linear-gradient(135deg, rgba(40, 44, 255, 0.04) 0%, var(--bg-card) 100%);
    box-shadow: var(--shadow-md);
}

.advantage-item.active .advantage-icon {
    background: var(--accent-primary);
    color: #fff;
}

/* Advantage Details */
.advantage-details {
    margin-top: var(--space-xl);
}

.advantage-detail {
    display: none;
    animation: fadeIn 0.3s ease;
}

.advantage-detail.active {
    display: block;
}

.advantage-detail h3 {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-md);
}

.advantage-detail p {
    font-size: 1rem;
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: var(--space-md);
}

.advantage-detail ul {
    margin: var(--space-md) 0;
    padding-left: var(--space-lg);
}

.advantage-detail li {
    font-size: 0.95rem;
    color: var(--text-secondary);
    line-height: 1.8;
    margin-bottom: var(--space-xs);
}

.advantage-detail li::marker {
    color: var(--accent-primary);
}

.advantage-detail strong {
    color: var(--text-primary);
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.advantage-item:hover {
    background: var(--bg-card-hover);
    border-color: var(--border-hover);
    box-shadow: var(--shadow-md);
}

.advantage-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-light);
    border-radius: var(--radius-md);
    color: var(--accent-primary);
}

.advantage-icon svg {
    width: 24px;
    height: 24px;
}

.advantage-content h4 {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: var(--space-xs);
    color: var(--text-primary);
}

.advantage-content p {
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

/* About Section */
.about {
    background: var(--bg-primary);
}

.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3xl);
    align-items: center;
}

.about-text {
    font-size: 1.05rem;
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: var(--space-md);
}

.about-values {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
    margin-top: var(--space-xl);
}

.value-item {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-primary);
}

.value-icon {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    color: var(--accent-primary);
}

/* Legal Pages */
.legal-page {
    padding-top: 120px;
    padding-bottom: var(--section-pad-y);
    background: var(--bg-primary);
}

.legal-content {
    max-width: 800px;
    margin: 0 auto;
    background: var(--bg-card);
    padding: var(--space-2xl) var(--space-xl);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
}

.legal-content h1 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: var(--space-lg);
    color: var(--text-primary);
    text-align: center;
}

.legal-content h2 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-top: var(--space-xl);
    margin-bottom: var(--space-md);
    color: var(--text-primary);
}

.legal-content h3 {
    font-size: 1.25rem;
    font-weight: 600;
    margin-top: var(--space-lg);
    margin-bottom: var(--space-sm);
    color: var(--text-primary);
}

.legal-content p,
.legal-content li {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--text-secondary);
    margin-bottom: var(--space-sm);
}

.legal-content ul,
.legal-content ol {
    margin-bottom: var(--space-sm);
    padding-left: var(--space-lg);
}

.legal-content ul li {
    list-style-type: disc;
}

.legal-content a {
    color: var(--accent-primary);
    text-decoration: underline;
    transition: color 0.2s ease;
}

.legal-content a:hover {
    color: var(--accent-orange-ink);
}

.legal-date {
    display: block;
    text-align: center;
    color: var(--text-muted);
    margin-bottom: var(--space-xl);
    font-style: italic;
}


.about-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    padding: var(--space-xl);
    box-shadow: var(--shadow-md);
}

.about-card-inner {
    position: relative;
}

.quote-icon {
    font-size: 4rem;
    line-height: 1;
    color: var(--accent-primary);
    opacity: 0.3;
    margin-bottom: var(--space-md);
}

.quote-text {
    font-size: 1.15rem;
    line-height: 1.7;
    color: var(--text-primary);
    margin-bottom: var(--space-lg);
}

.quote-author {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

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

/* Team Card Styles */
.team-card {
    background: linear-gradient(135deg, rgba(40, 44, 255, 0.03) 0%, var(--bg-card) 100%);
    border-color: rgba(40, 44, 255, 0.15);
}

.team-title {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-lg);
}

.team-stats {
    display: flex;
    gap: var(--space-xl);
    margin-bottom: var(--space-lg);
    padding-bottom: var(--space-lg);
    border-bottom: 1px solid var(--border-color);
}

.team-stat {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.team-stat-value {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--accent-primary);
    line-height: 1;
}

.team-stat-label {
    font-size: 0.85rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.team-description {
    font-size: 1rem;
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: var(--space-md);
}

.team-highlights {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    padding-left: 0;
    list-style: none;
}

.team-highlights li {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: 0.95rem;
    color: var(--text-secondary);
}

.team-highlights li::before {
    content: '\002713';
    color: var(--accent-primary);
    font-weight: 600;
}

.author-role {
    font-size: 0.85rem;
    color: var(--text-muted);
}

/* CTA Section */


.trust-items {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    color: var(--text-secondary);
}

/* Footer */
.footer {
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
}

.footer-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: var(--section-pad-y) var(--space-lg) var(--space-xl);
}

@media (max-width: 768px) {
    .footer-container {
        padding: var(--section-pad-y-sm) var(--space-md) var(--space-xl);
    }
}

.footer-col h4 {
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    margin-bottom: var(--space-md);
}

.footer-col ul {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.footer-col a {
    font-size: 0.95rem;
    color: var(--text-secondary);
    transition: var(--transition-fast);
}

.footer-col a:hover {
    color: var(--accent-primary);
}

/* Entrance animations
   ---------------------------------------------------------------
   The parked state lives behind `.fnx-motion`, a class that only
   /fenryx-motion.js puts on <html>. No script, no class, no hiding:
   a reader without JS gets the finished page, never a blank one.
   `.fnx-settled` is the arrived state the observer hands out. */
.fnx-motion [data-animate] {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.fnx-motion [data-animate="fade-right"] {
    transform: translateX(-30px);
}

.fnx-motion [data-animate="fade-left"] {
    transform: translateX(30px);
}

.fnx-motion [data-animate="scale-in"] {
    transform: scale(0.95);
}

/* Catch-all: any data-animate value, known or invented later, lands
   here once settled \002014 nothing can stay parked for want of a rule. */
[data-animate].fnx-settled {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .fnx-motion [data-animate] {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* Responsive Design */
@media (max-width: 1024px) {
    .hero {
        grid-template-columns: 1fr;
        gap: var(--space-2xl);
        text-align: center;
        padding-top: 120px;
    }

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

    .hero-cta {
        justify-content: center;
    }

    .hero-stats {
        justify-content: center;
    }

    .hero-visual {
        display: none;
    }

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

    .products-grid .product-card:last-child {
        grid-column: 1 / -1;
        max-width: 50%;
        margin: 0 auto;
    }

    .advantages-content {
        grid-template-columns: 1fr;
        gap: var(--space-2xl);
    }

    .advantages-right {
        position: static;
        order: -1;
        text-align: center;
    }

    .advantages-left {
        max-width: 100%;
    }

    .advantage-details {
        text-align: left;
    }

    .about-grid {
        grid-template-columns: 1fr;
        gap: var(--space-2xl);
    }
}

@media (max-width: 768px) {
    .nav-container {
        padding: 0 var(--space-md);
    }

    .section-container {
        padding: var(--section-pad-y-sm) var(--space-md);
    }

    .hero {
        padding-top: 120px;
        padding-left: var(--space-md);
        padding-right: var(--space-md);
        padding-bottom: var(--section-pad-y-sm);
        min-height: calc(100vh - 80px);
    }

    .nav-links {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        flex-direction: column;
        background: var(--bg-primary);
        padding: var(--space-lg);
        gap: var(--space-md);
        border-bottom: 1px solid var(--border-color);
    }

    .nav-links.active {
        display: flex;
    }

    .nav-toggle {
        display: flex;
    }

    .hero-stats {
        flex-direction: column;
        gap: var(--space-md);
    }

    .stat-divider {
        width: 40px;
        height: 1px;
    }

    .title-line {
        white-space: normal;
    }

    .hero-title {
        font-size: clamp(2rem, 7vw, 3rem);
    }

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

    .products-grid .product-card:last-child {
        max-width: 100%;
    }

    .world-map-container {
        padding: var(--space-md);
    }


    .about-values {
        grid-template-columns: 1fr;
    }
}

/* Smooth scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-secondary);
}

::-webkit-scrollbar-thumb {
    background: var(--border-hover);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

/* Selection styling */
::selection {
    background: rgba(0, 102, 255, 0.2);
    color: var(--text-primary);
}

/* Hero Centered Layout - Row version */
.hero-centered {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
    text-align: center;
    min-height: auto;
    padding-top: calc(var(--section-pad-y-sm) + 80px);
    padding-bottom: var(--space-xl);
}

.hero-centered .hero-content {
    max-width: 800px;
    margin: 0 auto;
}

.hero-centered .hero-cta {
    justify-content: center;
}

/* Dashboard Preview */
.dashboard-preview {
    position: relative;
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow:
        0 25px 80px -12px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(0, 0, 0, 0.05);
    max-width: 1000px;
    margin: 0 auto;
}

.dashboard-image {
    width: 100%;
    height: auto;
    display: block;
}

.hero-visual {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.hero-centered .hero-visual {
    margin-top: var(--space-lg);
}

/* Statement Section */
.statement {
    background: var(--bg-primary);
    border-bottom: 1px solid var(--border-color);
}

.statement-content {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

.statement-title {
    font-size: clamp(1.8rem, 3.5vw, 2.5rem);
    font-weight: 700;
    line-height: 1.2;
    color: var(--text-primary);
    margin-bottom: var(--space-lg);
}

.statement-text {
    font-size: 1.1rem;
    color: var(--text-secondary);
    line-height: 1.8;
    position: relative;
    padding: var(--space-lg) var(--space-xl);
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    border-left: 4px solid var(--accent-primary);
}

/* Big Quote Section */
.big-quote {
    background: var(--accent-primary);
    position: relative;
    overflow: hidden;
}

.big-quote::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.05) 0%, transparent 50%);
    pointer-events: none;
}

.big-quote .section-container {
    padding: var(--section-pad-y) var(--space-lg);
}

.quote-large {
    font-size: clamp(1.5rem, 3vw, 2.2rem);
    font-weight: 500;
    line-height: 1.5;
    color: #ffffff;
    text-align: center;
    max-width: 1000px;
    margin: 0 auto;
}

.big-quote.alt {
    background: linear-gradient(135deg, #f8faff 0%, #f0f4ff 50%, #e8eeff 100%);
    position: relative;
}

.big-quote.alt::before {
    background:
        radial-gradient(ellipse 60% 60% at 30% 0%, rgba(40, 44, 255, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse 50% 50% at 70% 100%, rgba(99, 102, 241, 0.06) 0%, transparent 50%);
}

.big-quote.alt .quote-large {
    color: var(--text-primary);
    position: relative;
}

.big-quote.alt .quote-large::before {
    content: '"';
    position: absolute;
    top: -40px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 6rem;
    color: var(--accent-primary);
    opacity: 0.15;
    font-family: Georgia, serif;
    line-height: 1;
}

/* Accounts Section */
.accounts {
    background: var(--bg-primary);
}

.accounts-content {
    text-align: center;
    max-width: 700px;
    margin: 0 auto var(--section-header-gap);
}

/* Offers Grid */
.offers-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
}

.offer-item {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-lg);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition: var(--transition-base);
}

.offer-item:hover {
    background: var(--bg-card-hover);
    border-color: var(--border-hover);
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

.offer-icon {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--accent-primary) 0%, #6366f1 100%);
    border-radius: var(--radius-md);
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(40, 44, 255, 0.25);
    transition: var(--transition-base);
}

.offer-item:hover .offer-icon {
    transform: scale(1.1) rotate(5deg);
    box-shadow: 0 6px 20px rgba(40, 44, 255, 0.35);
}

.offer-icon svg {
    width: 24px;
    height: 24px;
}

.offer-item span {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-primary);
}

/* Why Fenryx Section */
.why-fenryx {
    background: linear-gradient(180deg, var(--bg-secondary) 0%, #f0f4ff 100%);
    position: relative;
    overflow: hidden;
}

.why-fenryx::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(circle at 20% 80%, rgba(40, 44, 255, 0.05) 0%, transparent 40%),
        radial-gradient(circle at 80% 20%, rgba(99, 102, 241, 0.05) 0%, transparent 40%);
    pointer-events: none;
}

.why-content {
    text-align: center;
    max-width: 900px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.why-points {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg);
    margin-top: var(--space-xl);
}

.why-point {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-lg) var(--space-xl);
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(40, 44, 255, 0.1);
    border-radius: var(--radius-lg);
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--text-primary);
    transition: var(--transition-base);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
}

.why-point:hover {
    background: rgba(255, 255, 255, 1);
    border-color: rgba(40, 44, 255, 0.2);
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgba(40, 44, 255, 0.1);
}

.why-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--accent-gradient);
    border-radius: var(--radius-sm);
    color: #ffffff;
    font-size: 1rem;
    flex-shrink: 0;
}

/* Products Grid Update for 5 cards - 3 per row, adaptive */
.products .products-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-lg);
    justify-content: center;
}

.products .products-grid .product-card {
    flex: 1 1 calc(33.333% - var(--space-lg));
    max-width: calc(33.333% - var(--space-lg));
    min-width: 280px;
}

/* Responsive Updates */
@media (max-width: 1024px) {
    .offers-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .products .products-grid .product-card {
        flex: 1 1 calc(50% - var(--space-lg));
        max-width: calc(50% - var(--space-lg));
    }

    .dashboard-preview {
        max-width: 100%;
    }
}

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

    .quote-large {
        font-size: 1.3rem;
    }

    .statement-title {
        font-size: 1.5rem;
    }

    .why-points {
        grid-template-columns: 1fr;
    }

    .why-point {
        font-size: 1rem;
        text-align: left;
        justify-content: flex-start;
    }
}

/* ===============================
   SEO CONTENT SECTIONS
   =============================== */

/* Why Choose Section */
.why-choose {
    background: var(--bg-primary);
    position: relative;
}

.why-choose-content {
    text-align: center;
    max-width: 800px;
    margin: 0 auto var(--section-header-gap);
}

.why-choose-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-lg);
    justify-content: center;
}

.why-choose-card {
    flex: 1 1 calc(33.333% - var(--space-lg));
    max-width: calc(33.333% - var(--space-lg));
    min-width: 280px;
    padding: var(--space-xl);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition: var(--transition-base);
    text-align: left;
}

.why-choose-card:hover {
    background: var(--bg-card-hover);
    border-color: var(--border-hover);
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.why-choose-icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-light);
    border-radius: var(--radius-md);
    color: var(--accent-primary);
    margin-bottom: var(--space-md);
    transition: var(--transition-base);
}

.why-choose-card:hover .why-choose-icon {
    background: var(--accent-primary);
    color: #fff;
}

.why-choose-icon svg {
    width: 28px;
    height: 28px;
}

.why-choose-card h3 {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-sm);
}

.why-choose-card p {
    font-size: 0.95rem;
    color: var(--text-secondary);
    line-height: 1.6;
}


/* Apply Steps Section */
.apply-steps {
    background: linear-gradient(180deg, var(--bg-secondary) 0%, #f0f4ff 100%);
    position: relative;
    overflow: hidden;
}

.apply-steps::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(circle at 10% 90%, rgba(40, 44, 255, 0.05) 0%, transparent 40%),
        radial-gradient(circle at 90% 10%, rgba(99, 102, 241, 0.05) 0%, transparent 40%);
    pointer-events: none;
}

.apply-steps-content {
    text-align: center;
    max-width: 800px;
    margin: 0 auto var(--section-header-gap);
    position: relative;
    z-index: 1;
}

.apply-steps-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-lg);
    position: relative;
    z-index: 1;
}

.apply-step {
    position: relative;
    padding: var(--space-xl);
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(40, 44, 255, 0.1);
    border-radius: var(--radius-lg);
    text-align: center;
    transition: var(--transition-base);
}

.apply-step:hover {
    background: #fff;
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.step-number {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-gradient);
    border-radius: 50%;
    color: #fff;
    font-size: 1.3rem;
    font-weight: 700;
    margin: 0 auto var(--space-md);
    box-shadow: 0 4px 12px rgba(40, 44, 255, 0.3);
}

.apply-step h3 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-sm);
}

.apply-step p {
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

/* Online Banking Section */
.online-banking {
    background: var(--bg-primary);
}

.online-banking-content {
    text-align: center;
    max-width: 800px;
    margin: 0 auto var(--section-header-gap);
}

.online-banking-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
}

.banking-card {
    position: relative;
    padding: var(--space-xl);
    background: linear-gradient(135deg, rgba(40, 44, 255, 0.03) 0%, var(--bg-card) 100%);
    border: 1px solid rgba(40, 44, 255, 0.1);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition: var(--transition-base);
    text-align: left;
}

.banking-card:hover {
    border-color: rgba(40, 44, 255, 0.2);
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.banking-icon {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--accent-primary) 0%, #6366f1 100%);
    border-radius: var(--radius-md);
    color: #fff;
    margin-bottom: var(--space-md);
    box-shadow: 0 4px 12px rgba(40, 44, 255, 0.25);
}

.banking-icon svg {
    width: 26px;
    height: 26px;
}

.banking-card h3 {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-sm);
}

.banking-card p {
    font-size: 0.95rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

/* Feature Card (matched to Why Choose Card) */
.feature-card {
    flex: 1 1 calc(33.333% - var(--space-lg));
    max-width: calc(33.333% - var(--space-lg));
    min-width: 280px;
    padding: var(--space-xl);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition: var(--transition-base);
    text-align: left;
}

.feature-card:hover {
    background: var(--bg-card-hover);
    border-color: var(--border-hover);
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.feature-icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-light);
    border-radius: var(--radius-md);
    color: var(--accent-primary);
    margin-bottom: var(--space-md);
    transition: var(--transition-base);
}

.feature-card:hover .feature-icon {
    background: var(--accent-primary);
    color: #fff;
}

.feature-icon svg {
    width: 28px;
    height: 28px;
}

.feature-card h3 {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-sm);
}

.feature-card p {
    font-size: 0.95rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

/* Support Section */
.support-section {
    background: var(--bg-secondary);
}

.support-content {
    text-align: center;
    max-width: 800px;
    margin: 0 auto var(--section-header-gap);
}

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

.support-card {
    padding: var(--space-xl);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition: var(--transition-base);
    text-align: center;
}

.support-card:hover {
    background: var(--bg-card-hover);
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.support-icon {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-light);
    border-radius: 50%;
    color: var(--accent-primary);
    margin: 0 auto var(--space-md);
    transition: var(--transition-base);
}

.support-card:hover .support-icon {
    background: var(--accent-primary);
    color: #fff;
    transform: scale(1.1);
}

.support-icon svg {
    width: 30px;
    height: 30px;
}

.support-card h3 {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-sm);
}

.support-card p {
    font-size: 0.95rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

/* FAQ Section */
.faq-section {
    background: linear-gradient(180deg, var(--bg-primary) 0%, #f8faff 100%);
}

.faq-content {
    text-align: center;
    max-width: 800px;
    margin: 0 auto var(--section-header-gap);
}

.faq-list {
    max-width: 900px;
    margin: 0 auto;
}

.faq-item {
    margin-bottom: var(--space-md);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: var(--transition-base);
}

.faq-item:hover {
    border-color: var(--border-hover);
    box-shadow: var(--shadow-md);
}

.faq-item.active {
    border-color: rgba(40, 44, 255, 0.3);
    box-shadow: var(--shadow-lg);
}

.faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-lg) var(--space-xl);
    cursor: pointer;
    transition: var(--transition-fast);
}

.faq-question:hover {
    background: var(--bg-card-hover);
}

.faq-question h3 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    text-align: left;
    margin: 0;
}

.faq-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-light);
    border-radius: 50%;
    color: var(--accent-primary);
    transition: var(--transition-base);
}

.faq-item.active .faq-icon {
    background: var(--accent-primary);
    color: #fff;
    transform: rotate(180deg);
}

.faq-icon svg {
    width: 18px;
    height: 18px;
}

/* The collapsed start-state belongs to browsers that can open it again: the
   layout stamps `has-js` on <html> before first paint, so a visitor without
   JS (and any crawler that renders without it) gets the answers at full
   height rather than a row of headings that will not respond. */
.faq-answer {
    overflow: hidden;
}

.has-js .faq-answer {
    max-height: 0;
    transition: max-height 0.3s ease, padding 0.3s ease;
}

/* Long answers exist on the currency and payout pages \002014 the old 500px
   ceiling clipped them mid-sentence once every page moved onto this one
   accordion. This is the transition ceiling, not the rendered height. */
.has-js .faq-item.active .faq-answer {
    max-height: 1400px;
}

.faq-answer-content {
    padding: 0 var(--space-xl) var(--space-lg);
}

.faq-answer p {
    font-size: 1rem;
    color: var(--text-secondary);
    line-height: 1.7;
    text-align: left;
    margin: 0 0 1rem;
}

.faq-answer p:last-child {
    margin-bottom: 0;
}

.faq-answer a {
    color: var(--accent-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ---------------------------------------------------------------
   The accordion inside an article.
   Blog posts carry their own prose CSS (`.blog-article h3`, `.blog-article
   p`) at the same specificity as the rules above, and it loads after this
   file \002014 so the card would inherit 1.3rem headings with 2rem top margins
   and fall apart. One class deeper wins wherever the file order sits.
   --------------------------------------------------------------- */

.blog-article .faq-list {
    max-width: none;
    margin: var(--space-lg) 0 var(--space-xl);
}

.blog-article .faq-question h3 {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0;
    line-height: 1.45;
}

.blog-article .faq-answer p {
    font-size: 1rem;
    line-height: 1.7;
    margin: 0 0 1rem;
}

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

/* Responsive for new sections */
@media (max-width: 1024px) {

    .why-choose-card,
    .feature-card {
        flex: 1 1 calc(50% - var(--space-lg));
        max-width: calc(50% - var(--space-lg));
    }

    .online-banking-grid,
    .support-grid {
        grid-template-columns: repeat(2, 1fr);
    }

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

@media (max-width: 768px) {

    .why-choose-card,
    .feature-card {
        flex: 1 1 100%;
        max-width: 100%;
    }

    .online-banking-grid,
    .support-grid,
    .apply-steps-grid {
        grid-template-columns: 1fr;
    }

    .faq-question {
        padding: var(--space-md);
    }

    .faq-question h3 {
        font-size: 1rem;
    }

    .faq-answer-content {
        padding: 0 var(--space-md) var(--space-md);
    }
}
/* ===========================
   Keyboard focus
   ---------------------------
   The accordion questions and the advantage tiles are <div>s that the
   behaviour script promotes to controls. Once they take a tab stop they owe
   the visitor a ring they can actually see \002014 the UA default disappears
   against the card backgrounds these sit on.
   =========================== */

.faq-question:focus-visible,
.advantage-item:focus-visible,
.nav-toggle:focus-visible,
.btn:focus-visible,
a:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
}

.advantage-item {
    cursor: pointer;
}

/* ===========================================================================
   Primary navigation \002014 grouped product catalogue (menu spec v1.0, 2026-09-07)
   ---------------------------------------------------------------------------
   Two levels only: group and page. Every link is present in the HTML at load,
   so the panel is worth something to a crawler and to a visitor without JS.

   Open/close is expressed twice on purpose. Without JS the panel opens on
   :hover and :focus-within, which is the only way a keyboard or a no-script
   visitor can reach sixteen commercial pages. As soon as fenryx.js runs it
   puts `js-nav` on <html> and takes over, because only script can honour the
   spec's timings: ~180ms before opening, ~300ms of grace before closing. The
   two rule sets are scoped so they never fight over the same element.
   =========================================================================== */

.nav-container { position: relative; }
.nav-links { gap: var(--space-lg); }

.navx-item, .navx-cta { position: relative; list-style: none; }

/* The bar's own link colour is more specific than .btn-primary, so without
   these the CTA label renders in --text-secondary on a saturated fill.
   White in every state. `.is-current` too: on /contact/, the page the CTA
   opens, the current-link blue once made its label the colour of its own
   fill (fixed 2026-09-25; fenryx.js no longer marks the CTA at all). */
.nav-links .btn-primary,
.nav-links .btn-primary:hover,
.nav-links .btn-primary:focus,
.nav-links .btn-primary.is-current { color: #ffffff; }

.navx-mega { position: static; }

.navx-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0;
    background: none;
    border: none;
    font: inherit;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: color var(--transition-fast);
}

.navx-trigger:hover,
.navx-drop:hover > .navx-trigger,
.navx-trigger[aria-expanded="true"] { color: var(--accent-primary); }

.navx-chev { width: 14px; height: 14px; transition: transform var(--transition-fast); }
.navx-trigger[aria-expanded="true"] > .navx-chev { transform: rotate(180deg); }

/* The current section is stated in the bar as well as in the panel. */
.navx-trigger.is-current, .nav-links a.is-current { color: var(--accent-primary); }
.navx-list a.is-current { font-weight: 600; }

/* --- the panel ---------------------------------------------------------- */

/* padding-top is the bridge between trigger and card: it keeps the pointer
   inside the hover target while it travels down, which is what stops the
   panel flickering shut mid-journey. */
.navx-panel { display: none; position: absolute; top: 100%; left: 0; right: 0; padding-top: var(--space-md); z-index: 1001; }
.navx-mega .navx-panel { left: auto; right: 0; width: min(680px, calc(100vw - 3rem)); }
.navx-small .navx-panel { right: auto; width: 260px; }

.navx-panel-inner {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
    /* The panel shows all of itself: no scrollbar in normal use. The cap is
       only the fold itself (bar height plus the hover bridge), because the
       panel hangs off a fixed bar \002014 anything past the viewport bottom would
       be unreachable, not merely cut off. Content sits well inside this, so
       the overflow never engages on a real screen. */
    max-height: calc(100vh - 140px);
    overflow-y: auto;
    padding: var(--space-lg);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}

/* The panel states the shape of the offer: one product on the left, the
   things the account can do on the right. The kickers sit on their own grid
   row so the second one can span both capability columns. */
.navx-mega .navx-panel-inner { grid-template-rows: auto 1fr auto; column-gap: 0; }
.navx-kicker {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-muted);
    padding-bottom: 0.6rem;
    margin-bottom: var(--space-sm);
    border-bottom: 1px solid var(--border-color);
}
.navx-kicker-product { grid-area: 1 / 1 / 2 / 2; margin-right: var(--space-md); }
.navx-kicker-caps { grid-area: 1 / 2 / 2 / 3; padding-left: var(--space-lg); }

/* A way out of the panel for someone who wants the whole picture: a full-width
   row under both columns, pointing at the Products block on the homepage. */
.navx-more-link {
    grid-area: 3 / 1 / 4 / 3;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: var(--space-md);
    padding-top: var(--space-md);
    border-top: 1px solid var(--border-color);
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--accent-primary);
    text-decoration: none;
}
.navx-more-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.navx-more-link:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 3px; border-radius: 3px; }

.navx-small .navx-panel-inner { grid-template-columns: 1fr; padding: var(--space-sm); }

.navx-col { min-width: 0; }

/* Separation, three ways, because a flat list of five groups read as one
   undifferentiated block: the product sits on a tinted card, the capability
   columns are divided by hairlines, and stacked groups inside a column get a
   rule above them. */
.navx-col-product {
    /* `start` rather than the grid default: a stretched card would run down to
       the height of the tallest column and leave a tall block of empty tint
       under the last link. It ends where its own content ends. */
    align-self: start;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--space-md);
    margin-right: var(--space-md);
}
.navx-col-rule { border-left: 1px solid var(--border-color); padding: 0 var(--space-md) 0 var(--space-lg); }

.navx-group-block + .navx-group-block {
    margin-top: var(--space-md);
    padding-top: var(--space-md);
    border-top: 1px solid var(--border-color);
}
.navx-group-head { display: flex; align-items: center; gap: 0.5rem; }

.navx-group {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
    flex: 1;
}
/* Only the product heading is a link. It says so on hover; the capability
   headings stay plain labels, so nothing invites a click that goes nowhere. */
a.navx-group { text-decoration: none; }
a.navx-group:hover { color: var(--accent-primary); text-decoration: underline; text-underline-offset: 4px; }

.navx-group-toggle { display: none; background: none; border: none; padding: 0; color: var(--text-muted); cursor: pointer; }

.navx-note { margin: 0.3rem 0 0.7rem; font-size: 0.78rem; line-height: 1.45; color: var(--text-muted); }

.navx-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.navx-list a {
    display: block;
    padding: 0.42rem 0.6rem;
    margin-left: -0.6rem;
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    line-height: 1.4;
    color: var(--text-secondary);
    text-decoration: none;
    transition: background var(--transition-fast), color var(--transition-fast);
}
.navx-list a:hover { background: var(--accent-light); color: var(--accent-primary); }

/* --- open/close: no-JS first, then the scripted version ----------------- */

html:not(.js-nav) .navx-drop:hover > .navx-panel,
html:not(.js-nav) .navx-drop:focus-within > .navx-panel { display: block; }

html.js-nav .navx-panel[data-open="true"] { display: block; animation: navx-drop-in 180ms ease both; }

@keyframes navx-drop-in {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    html.js-nav .navx-panel[data-open="true"] { animation: none; }
}

/* A group collapsed for the phone accordion must never stay collapsed on a
   desktop that never shows the toggle. */
@media (min-width: 769px) {
    .navx-list[hidden] { display: grid; }
}


/* --- phone: full-height sheet, one accordion per group ------------------ */

@media (max-width: 768px) {
    /* The sheet hangs off .nav, which is the fixed ancestor, so `top: 100%`
       is the bar's own bottom edge whatever the logo does to its height.
       The bar is 72px tall since the homepage-parity block below, which
       is where the live max-height now comes from; this one is only a
       fallback and is only used to stop the sheet running past the fold. */
    .nav-links {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        width: 100%;
        max-height: calc(100vh - 99px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        gap: 0;
        padding: var(--space-md) var(--space-md) var(--space-2xl);
        background: var(--bg-primary);
        border-bottom: none;
    }

    .navx-item, .navx-cta { width: 100%; }
    .navx-cta { order: -1; margin-bottom: var(--space-md); }
    .navx-cta .btn { width: 100%; }

    .navx-trigger, .nav-links > .navx-item > a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        min-height: 48px;
        font-size: 1rem;
        color: var(--text-primary);
    }

    .navx-mega, .navx-small { position: static; }
    .navx-panel { position: static; padding-top: 0; }
    .navx-small .navx-panel { width: auto; }
    .navx-panel-inner {
        grid-template-columns: 1fr;
        gap: var(--space-md);
        max-height: none;
        overflow: visible;
        padding: 0 0 var(--space-md);
        background: none;
        border: none;
        border-radius: 0;
        box-shadow: none;
    }

    .navx-mega .navx-panel-inner { grid-template-rows: none; }
    .navx-kicker, .navx-kicker-product, .navx-kicker-caps { grid-area: auto; margin: 0 0 0.4rem; padding-left: 0; padding-bottom: 0.4rem; }
    .navx-more-link { grid-area: auto; min-height: 44px; margin-top: 0; }
    .navx-col-product { background: none; border: none; border-radius: 0; padding: 0; margin-right: 0; }
    .navx-col-rule { border-left: none; padding: 0; }
    .navx-group-head { min-height: 44px; position: relative; }
    .navx-group { font-size: 0.95rem; }
    .navx-group-toggle { display: flex; align-items: center; justify-content: flex-end; position: absolute; inset: 0; width: 100%; height: 100%; }
    .navx-group-head-link .navx-group-toggle { position: static; inset: auto; width: 44px; height: 44px; justify-content: center; margin-right: -0.5rem; }
    .navx-group-head-link .navx-group { min-height: 44px; display: flex; align-items: center; }
    .navx-group-toggle[aria-expanded="true"] > .navx-chev { transform: rotate(180deg); }
    .navx-note { display: none; }
    .navx-list a { min-height: 40px; display: flex; align-items: center; font-size: 0.94rem; }
}

/* ============================================================
   HOMEPAGE PARITY \002014 2026-09-18, at the operator's request:
   "\00043a\00043d\00043e\00043f\00043a\000430 \00043d\000430 \000441\000442\00043e\000440\000456\00043d\00043a\000430\000445 \000442\000440\000435\000431\000430 \000441\00043a\000440\000443\000433\00043b\000438\000442\000438 \00043d\000430 \00043f\000440\000438\00043a\00043b\000430\000434\000456 \00044f\00043a \000437\000430\000440\000430\000437 \00043d\000430
   \000433\00043e\00043b\00043e\000432\00043d\000456\000439 + \000445\000435\000434\000435\000440 \000442\000430\00043a\000438\000439 \000441\000430\00043c\000438\000439 \000437\000440\00043e\000431\000438\000442\000438".

   The homepage ships its own self-contained stylesheet (a 72px
   white blurred bar, pill buttons, a 20px-radius mega panel).
   These rules bring the inner pages' .nav / .navx- header and
   .btn family to the same measurements and finish, reusing the
   markup that is already there rather than porting the home
   header into 25 body files.

   Appended last on purpose: it has to win on source order.
   Desktop rules are fenced behind the bar's own 769px
   breakpoint so they cannot leak into the mobile sheet, which
   is defined earlier in this file and would otherwise lose to
   an unfenced rule of equal specificity.
   ============================================================ */

:root {
    /* Values lifted verbatim from the homepage's token block. */
    --hp-border: #e2e6f2;
    --hp-blue-press: #171a99;
    --hp-icon-subtle: #eaebff;
    --hp-body: #3f4373;
    --hp-muted: #72799e;
    --hp-container: 1148px;
    --hp-gutter: clamp(20px, 10.1389vw, 146px);
    --hp-sh-lift: 2px 3px 7px rgba(143, 163, 183, .10), 6px 10px 12px rgba(143, 163, 183, .09), 14px 23px 16px rgba(143, 163, 183, .05);
    --hp-sh-button: 2px 3px 7px rgba(6, 9, 53, .10), 6px 10px 12px rgba(6, 9, 53, .09), 14px 23px 16px rgba(6, 9, 53, .05), 26px 41px 19px rgba(6, 9, 53, .01);
}

/* ---- Buttons: the homepage pill, everywhere ---- */
.btn {
    border-radius: 999px;
    font-size: 15px;
    line-height: 24px;
    font-weight: 500;
    white-space: nowrap;
}

.btn-large { border-radius: 999px; }

.btn-primary { box-shadow: var(--hp-sh-button); }

.btn-primary:hover {
    /* The homepage darkens the blue instead of crossing to orange. */
    background: var(--hp-blue-press);
    box-shadow: var(--hp-sh-button);
}

.btn:focus-visible,
.nav-toggle:focus-visible { border-radius: 999px; }

/* ---- Header: the homepage's light bar ---- */
.nav {
    padding: 0;
    background: rgba(255, 255, 255, .88);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-bottom: 0;
    box-shadow: inset 0 -1px 0 var(--hp-border);
}

.nav-container {
    max-width: calc(var(--hp-container) + 2 * var(--hp-gutter));
    padding: 0 var(--hp-gutter);
    min-height: 72px;
    gap: 24px;
}

.logo-img { height: 40px; }

@media (min-width: 769px) {
    /* Centred like the homepage \002014 2026-09-25, operator request: "\000414\00043b\00044f
       \000440\000435\000448\000442\000430 \000441\000442\00043e\000440\000456\00043d\00043e\00043a \000432\000438\000440\000456\000432\00043d\00044f\000439 \00043f\00043e \000446\000435\00043d\000442\000440\000443 \000442\000430\00043a \000441\000430\00043c\00043e \00044f\00043a \00043d\000430 \000433\00043e\00043b\00043e\000432\00043d\000456\000439".
       The homepage bar spreads three items (logo, menu, button) with
       space-between, so its menu sits midway between the other two.
       Here the button lives inside the menu's own <ul>, which left
       space-between only two items to spread and parked the menu
       against the button. The list now takes the rest of the bar and
       splits its free space between two auto margins: before the first
       item, and before whatever follows the last one (the language
       switcher on a translated page, otherwise the button). Its gap is
       the bar's own 24px so both sides start from the same distance,
       as on the homepage; a margin makes up the 48px between items. */
    .nav-links { flex: 1 1 auto; gap: 24px; }
    .nav-links > .navx-item + .navx-item { margin-inline-start: 24px; }
    .nav-links > .navx-item:first-child,
    .nav-links > .navx-item + :not(.navx-item) { margin-inline-start: auto; }

    /* Links sit over a 2px accent bar that only shows on hover and on the
       current page \002014 the homepage's .nav-link__bar, drawn with a pseudo
       element because this markup has no span to style. */
    .nav-links > .navx-item > a,
    .navx-trigger {
        position: relative;
        display: inline-flex;
        align-items: center;
        padding-bottom: 8px;
        font-size: 15px;
        line-height: 24px;
        font-weight: 500;
        color: var(--text-primary);
    }

    .nav-links > .navx-item > a::after,
    .navx-trigger::after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 2px;
        background: var(--accent-orange);
        opacity: 0;
        transition: opacity var(--transition-fast);
    }

    .nav-links > .navx-item > a:hover,
    .navx-trigger:hover,
    .navx-drop:hover > .navx-trigger { color: var(--accent-primary); }

    .nav-links > .navx-item > a:hover::after,
    .navx-trigger:hover::after { opacity: .6; }

    .nav-links > .navx-item > a.is-current::after,
    .navx-trigger.is-current::after,
    .navx-trigger[aria-expanded="true"]::after { opacity: 1; }

    /* The CTA keeps the pill and the homepage's blue-on-white weighting. */
    .navx-cta .btn-primary {
        /* The homepage header button is 5px of padding around a 40px icon
           circle \002014 50px tall. This one carries no circle, so the padding
           makes up the same height around a 24px line box. */
        padding: 13px 24px;
        background: var(--accent-primary);
        color: #ffffff;
        box-shadow: var(--hp-sh-button);
    }

    .navx-cta .btn-primary:hover {
        background: var(--hp-blue-press);
        transform: none;
    }

    /* Mega panel: the homepage's floating card, not a flush dropdown. */
    .navx-panel { padding-top: 18px; }

    /* Pinned to the bar's right edge, the Products panel only suited a
       right-hand menu. Centred instead: on the bar, which always has
       room for it, and under its own trigger once the 1200px rule below
       makes the trigger its containing block \002014 as on the homepage.
       `translate` rather than `transform`, which the open animation
       already animates. */
    .navx-mega .navx-panel { left: 50%; right: auto; translate: -50% 0; }

    .navx-panel-inner {
        padding: 28px;
        border-radius: 20px;
        background: #ffffff;
        border: 1px solid var(--hp-border);
        box-shadow: var(--hp-sh-lift);
    }

    .navx-col-product,
    .navx-col-rule { border-color: var(--hp-border); }

    .navx-kicker,
    .navx-more-link,
    .navx-group-block + .navx-group-block { border-color: var(--hp-border); }

    .navx-group {
        font-size: 15px;
        line-height: 22px;
        font-weight: 600;
    }

    .navx-note {
        font-size: 13px;
        line-height: 19px;
        color: var(--hp-muted);
    }

    .navx-list a {
        padding: 7px 10px;
        margin-left: -10px;
        border-radius: 10px;
        font-size: 14px;
        line-height: 20px;
        color: var(--hp-body);
    }

    .navx-list a:hover {
        background: var(--hp-icon-subtle);
        color: var(--accent-primary);
    }

    .navx-more-link {
        font-size: 14px;
        font-weight: 600;
    }
}

/* From here the centred Products trigger sits far enough in for its 680px
   panel to centre under it without crossing the viewport edge; below it,
   the panel centres on the bar instead. */
@media (min-width: 1200px) {
    .navx-mega { position: relative; }
}

@media (max-width: 768px) {
    /* The homepage narrows its gutter to 20px on phones; match it, or the
       bar's padding jumps from 24px to 38px on a 375px screen. */
    :root { --hp-gutter: 20px; }
    /* The sheet hangs off the bar, which is 72px now rather than 99px.
       100vh is the LARGE viewport on mobile \002014 measured with the URL bar
       hidden \002014 so a sheet sized by it runs its last items underneath the
       browser chrome. dvh tracks the visible height instead; the vh line
       stays as the fallback for anything without dvh support. */
    .nav-links {
        max-height: calc(100vh - 72px);
        overscroll-behavior: contain;
        /* The support launcher is fixed bottom-right; when the list is long
           enough to fill the sheet its last item lands underneath it. */
        padding-bottom: max(104px, calc(env(safe-area-inset-bottom) + 96px));
    }
    .navx-cta .btn { border-radius: 999px; }
}

@supports (height: 100dvh) {
    @media (max-width: 768px) {
        .nav-links { max-height: calc(100dvh - 72px); }
    }
}

/* ============================================================
   PHONE MENU LIKE THE HOMEPAGE'S \002014 2026-09-25, operator request:
   "\00041f\00043e\00043a\000440\000430\000449\000438 \00043c\00043e\000431\000456\00043b\00044c\00043d\000443 \000432\000435\000440\000441\000456\00044e \000432 \00043c\000435\00043d\00044e '\000434\00043b\00044f \000440\000435\000448\000442\000430 \000441\000442\00043e\000440\000456\00043d\00043e\00043a', \000437\000440\00043e\000431\000438 \000457\000457
   \00043f\000440\000438\000431\00043b\000438\000437\00043d\00043e \00044f\00043a \000432 \00043c\000435\00043d\00044e '\00043d\000430 \000433\00043e\00043b\00043e\000432\00043d\000456\000439 \000441\000442\00043e\000440\000456\00043d\000446\000456'". Same day, second
   pass: "\000431\000456\00043b\000438\000439 \000441\000442\000438\00043b\00044c \00043f\00043e\000432\000435\000440\00043d\000438, \000432\000441\000435 \000440\000435\000448\000442\000430 \00043e\00043a" \002014 the homepage's
   layout stays, in this site's white instead of its navy.

   The sheet covers the screen below the bar at full height: large
   rows on hairline rules, a sub-list under each group, the pill
   CTA with its arrow circle at the foot, and a round button whose
   three bars fold into a cross. The bar goes solid white while it
   is open, so bar and sheet read as one surface; fenryx.js puts
   `menu-open` on <body> (the homepage's own class) and stops the
   page scrolling behind it.

   The groups inside Products are headings now, not accordions:
   one tap on Products lists every product, as on the homepage.
   Their toggles never collapsed anything here anyway, because
   `.navx-list { display: grid }` outranks the `hidden` attribute.
   ============================================================ */

:root {
    /* The homepage's easing curve, verbatim. */
    --hp-ease: cubic-bezier(.22, .61, .36, 1);
}

@media (max-width: 768px) {
    /* ---- Burger: the homepage's round icon button ---- */
    .nav-toggle {
        width: 44px;
        height: 44px;
        padding: 0;
        align-items: center;
        justify-content: center;
        gap: 2px;
        border-radius: 999px;
        background: var(--hp-icon-subtle);
        transition: background-color var(--transition-base);
    }

    .nav-toggle span {
        width: 16px;
        height: 2px;
        border-radius: 2px;
        background: var(--text-primary);
        transition: transform var(--transition-base), opacity var(--transition-base), background-color var(--transition-base);
    }

    /* Open, its three bars fold into the homepage's close cross. */
    .nav-toggle.active span:nth-child(1) { transform: translateY(4px) rotate(45deg); }
    .nav-toggle.active span:nth-child(2) { opacity: 0; }
    .nav-toggle.active span:nth-child(3) { transform: translateY(-4px) rotate(-45deg); }

    /* ---- The bar joins the sheet while it is open ---- */
    body.menu-open .nav {
        background: #ffffff;
        box-shadow: none;
    }

    /* ---- The sheet: full height, fading in as the homepage's ---- */
    .nav-links {
        display: flex;
        height: calc(100vh - 72px);
        max-height: none;
        /* --dock-room: the cookie notice's height, set by fenryx.js. */
        padding: 24px var(--hp-gutter) max(104px, calc(env(safe-area-inset-bottom) + 96px), calc(var(--dock-room, 0px) + 24px));
        background: #ffffff;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-8px);
        transition: opacity .32s var(--hp-ease), transform .32s var(--hp-ease), visibility .32s;
    }

    .nav-links.active {
        opacity: 1;
        visibility: visible;
        transform: none;
    }

    /* Rows rise in one after another, on the homepage's stagger. */
    .nav-links > li {
        opacity: 0;
        transform: translateY(12px);
        transition: opacity .4s var(--hp-ease), transform .4s var(--hp-ease);
    }

    .nav-links.active > li { opacity: 1; transform: none; }
    .nav-links.active > li:nth-child(1) { transition-delay: .08s; }
    .nav-links.active > li:nth-child(2) { transition-delay: .14s; }
    .nav-links.active > li:nth-child(3) { transition-delay: .2s; }
    .nav-links.active > li:nth-child(n + 4) { transition-delay: .26s; }

    /* ---- Top rows: 28px ink on hairline rules ---- */
    .navx-trigger,
    .nav-links > .navx-item > a {
        min-height: 0;
        padding: 14px 0;
        border-bottom: 1px solid var(--hp-border);
        font-size: 28px;
        line-height: 34px;
        letter-spacing: -.96px;
        color: var(--text-primary);
    }

    .navx-chev { width: 20px; height: 20px; flex: 0 0 20px; }

    /* A phone keeps :hover on whatever was tapped last, which would leave
       a row blue after it closed; resting rows stay ink. Open and current
       rows answer in the site's blue, as the bar does. */
    .navx-drop:hover > .navx-trigger,
    .nav-links > .navx-item > a:hover { color: var(--text-primary); }

    .navx-drop > .navx-trigger[aria-expanded="true"],
    .navx-drop > .navx-trigger.is-current,
    .nav-links > .navx-item > a.is-current { color: var(--accent-primary); }

    /* ---- Sub-lists: the homepage's 16px links ---- */
    .navx-panel-inner,
    .navx-small .navx-panel-inner {
        gap: 12px;
        padding: 10px 0 14px;
    }

    .navx-kicker,
    .navx-group-toggle { display: none; }

    .navx-group-head,
    .navx-group-head-link .navx-group { min-height: 0; }

    .navx-group-block + .navx-group-block {
        margin-top: 12px;
        padding-top: 0;
        border-top: 0;
    }

    /* `.nav-links` in front, or the bar's `.nav-links a` colour outranks
       the heading that is a link (Business Account). */
    .nav-links .navx-group {
        padding: 7px 0;
        font-size: 16px;
        line-height: 22px;
        font-weight: 600;
        color: var(--text-primary);
    }

    .navx-list { gap: 2px; }

    .navx-list a {
        min-height: 0;
        margin: 0;
        padding: 7px 0;
        border-radius: 0;
        font-size: 16px;
        line-height: 22px;
        font-weight: 400;
        color: var(--hp-body);
    }

    .navx-list a:hover { background: none; color: var(--accent-primary); }

    .nav-links .navx-more-link {
        min-height: 0;
        padding: 7px 0;
        border-top: 0;
        font-size: 16px;
        line-height: 22px;
        font-weight: 600;
        color: var(--accent-primary);
    }

    .nav-links .navx-more-link:hover { color: var(--hp-blue-press); text-decoration: none; }

    /* A translated page's language control, on a row of its own. */
    .lang-switch { padding: 14px 0; }

    /* ---- CTA: moved from the head of the list to the foot, where the
       homepage keeps its buttons, in the homepage pill: label left,
       white arrow circle right. ---- */
    .navx-cta {
        order: 0;
        margin: 32px 0 0;
    }

    .navx-cta .btn {
        justify-content: space-between;
        gap: 15px;
        padding: 5px 5px 5px 15px;
    }

    .navx-cta .btn::after {
        content: "";
        flex: 0 0 40px;
        width: 40px;
        height: 40px;
        border-radius: 999px;
        background: #ffffff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4.2 11.8 11.8 4.2M5.6 4.2h6.2v6.2' stroke='%23282CFF' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
        box-shadow: 2px 3px 7px rgba(143, 163, 183, .10);
        transition: background-color var(--transition-fast);
    }

    .navx-cta .btn:hover { transform: none; }
    .navx-cta .btn:hover::after { background-color: var(--hp-icon-subtle); }

    /* The support launcher is fixed over the sheet's foot; the homepage
       hides it while its sheet is up, and so does this one. */
    body.menu-open [id*="trengo" i],
    body.menu-open [class*="trengo" i],
    body.menu-open iframe[title*="trengo" i] {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }
}

@supports (height: 100dvh) {
    @media (max-width: 768px) {
        .nav-links { height: calc(100dvh - 72px); }
    }
}

/* Hover answers only where there is a real pointer. */
@media (max-width: 768px) and (hover: hover) {
    .nav-toggle:hover { background: var(--accent-primary); }
    .nav-toggle:hover span { background: #ffffff; }

    .navx-drop:hover > .navx-trigger,
    .nav-links > .navx-item > a:hover { color: var(--accent-primary); }
}

@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
    .nav-links,
    .nav-links > li { transform: none; transition: none; }
}

/* ============================================================
   TYPE PARITY WITH THE HOMEPAGE \002014 2026-09-21, operator request:
   "\000417 \000433\00043e\00043b\00043e\000432\00043d\00043e\000457 (\00043d\00043e\000432\00043e\000457 \000432\000435\000440\000441\000456\000457) \00043f\000435\000440\000435\00043d\000435\000441\000438 \000448\000440\000438\000444\000442 \00043d\000430 \000432\000441\000456 \000456\00043d\000448\000456 \000441\000442\00043e\000440\000456\00043d\00043a\000438".

   The homepage self-hosts both faces from /home/fonts.css and sets
   Funnel Display as the default, with Inter used for running text
   (its .t-body / .t-meta / .t-caption classes). Every head file now
   loads that same stylesheet instead of the Google Funnel request,
   so the two faces here are byte-identical to the homepage's.

   This block reproduces the pairing: display type keeps Funnel
   Display by inheritance, prose switches to Inter. Appended last so
   it wins on source order over the page-scoped paragraph rules that
   only set size and colour.
   ============================================================ */

p,
.hero-subtitle,
.section-subtitle,
.faq-answer-content,
.footer-tagline {
    font-family: var(--font-body);
}

/* Display type, controls and labels stay on Funnel Display. */
h1, h2, h3, h4, h5, h6,
.btn,
.nav-links,
.hero-title,
.section-title,
.stat-value,
.logo {
    font-family: var(--font-primary);
}

/* Mono labels are unaffected by the pairing. */
[class*="-kicker"],
[style*="--font-mono"] {
    font-family: var(--font-mono);
}

/* ============================================================
   FOOTER + FAQ PARITY WITH THE HOMEPAGE \002014 2026-09-21, operator
   request: the homepage footer on every page ("\000456\000434\000435\00043d\000442\000438\000447\00043d\00043e, \000441\000438\00043d\000456\000439
   \000444\00043e\00043d"), and the homepage's FAQ accordion everywhere.

   Both reuse the markup that is already on these pages; only the
   finish changes. Appended last so it wins on source order over
   the original .footer* and .faq* rules above.
   ============================================================ */

/* ---- Footer: the homepage's navy band ---- */
.footer {
    position: relative;
    overflow: hidden;
    background: #0f0f45;
    border-top: 0;
    padding: 0;
    color: #ffffff;
}

.footer-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    opacity: 0.85;
    z-index: 0;
    -webkit-mask-image: radial-gradient(ellipse 80% 90% at 50% 20%, #000 30%, rgba(0, 0, 0, 0.35) 75%, rgba(0, 0, 0, 0) 100%);
    mask-image: radial-gradient(ellipse 80% 90% at 50% 20%, #000 30%, rgba(0, 0, 0, 0.35) 75%, rgba(0, 0, 0, 0) 100%);
}

.footer-container {
    position: relative;
    z-index: 1;
    max-width: calc(var(--hp-container) + 2 * var(--hp-gutter));
    margin: 0 auto;
    padding: var(--space-2xl) var(--hp-gutter) var(--space-xl);
    display: flex;
    flex-direction: column;
    gap: 30px;
}

/* The orange keyline the homepage rules its footer with. */
.divider-accent {
    width: 100%;
    height: 25px;
    background: url('/home/assets/divider-accent.svg') no-repeat left bottom/100% 100%;
}

.footer__cols {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 42px;
}

.footer__brand {
    width: 440px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.footer__brand .logo-img { height: 50px; width: auto; }

.footer__brand p {
    margin: 0;
    max-width: 436px;
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 20px;
    color: #eaeaea;
}

.footer__links { display: flex; gap: 42px; flex-wrap: wrap; }

.footer__links .footer-col {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.footer__links .footer-col h3 {
    margin: 0;
    font-size: 20px;
    line-height: 26px;
    font-weight: 600;
    color: #ffffff;
}

.footer__links .footer-col a {
    display: inline-block;
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 20px;
    color: #eaeaea;
    text-decoration: none;
    transition: color var(--transition-fast), transform var(--transition-fast);
}

.footer__links .footer-col a:hover { color: #ffffff; transform: translateX(3px); }

.footer__legal {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 20px;
    color: #eaeaea;
}

.footer__legal p { margin: 0; font-family: var(--font-body); color: #eaeaea; }

@media (max-width: 900px) {
    .footer__cols { flex-direction: column; gap: 32px; }
    .footer__brand { width: 100%; }
}

@media (max-width: 768px) {
    .footer-container { padding: var(--space-xl) var(--hp-gutter) var(--space-lg); }
    .footer__links { gap: 24px 42px; }
    .footer__links .footer-col { min-width: 44%; }
    .footer__legal { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* ---- FAQ: the homepage accordion ---- */
.faq-item {
    background: #ffffff;
    border: 0;
    border-radius: var(--r-md, 16px);
    box-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 8px 24px rgba(16, 24, 40, .06);
    overflow: visible;
}

.faq-item:hover { border-color: transparent; box-shadow: 0 1px 2px rgba(16, 24, 40, .08), 0 12px 28px rgba(16, 24, 40, .10); }

.faq-item.active {
    border-color: transparent;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .08), 0 12px 28px rgba(16, 24, 40, .10);
}

.faq-question {
    align-items: flex-start;
    gap: 24px;
    padding: 23px 21px 23px 24px;
    transition: padding var(--transition-base);
}

.faq-question:hover { background: transparent; }
.faq-question:hover h3 { color: var(--accent-primary); }

/* The dark plate is the homepage's .icon-btn--dark: navy at rest, brand
   blue on hover and while the row is open. */
.faq-icon {
    width: 40px;
    height: 40px;
    background: #0f0f45;
    color: #ffffff;
    border-radius: 999px;
    box-shadow: 0 6px 14px rgba(15, 15, 69, .22);
}

.faq-icon svg { width: 16px; height: 16px; }
.faq-question:hover .faq-icon { background: var(--accent-primary); color: #ffffff; }

.faq-item.active .faq-question { padding-top: 15px; padding-bottom: 13px; }
.faq-item.active .faq-icon { background: var(--accent-primary); color: #ffffff; transform: rotate(180deg); }

.faq-answer-content { padding: 0 66px 21px 24px; }

@media (max-width: 768px) {
    .faq-question { padding: 20px 18px; gap: 16px; }
    .faq-answer-content { padding: 0 18px 18px; }
}

/* The card-style closing CTA that used to sit above the footer is gone:
   2026-09-22 it moved into the footer itself as the navy band with the
   laptop, the way the homepage does it (see FOOTER CTA below). The .cta /
   .cta-content rules that styled it went with it \002014 no page draws that
   markup any more. */

/* ===========================
   Breadcrumbs
   ===========================
   The trail is now rendered by src/lib/breadcrumbs.ts as a real
   schema.org/BreadcrumbList (microdata on the visible elements), which meant
   dropping the ten `style=` attributes the import had frozen into it. The
   geometry those attributes carried \002014 the air above the hero and the stacking
   context that keeps the strip over the backdrop \002014 lives here instead, and
   the separators are drawn in CSS so no decorative <li> sits inside the list
   for a parser to trip over. */

/* 2026-09-22 \002014 operator request: the trail no longer sits under the header
   like a page-chrome strip; the rewriter (src/lib/breadcrumbs.ts) drops it
   inside .hero-content immediately above the H1, so title + trail read as
   one lockup. These rules pin the visual to that new home. */
.breadcrumbs {
    position: relative;
    z-index: 2;
    margin: 0 0 1.25rem;
}

/* Inside the centred article hero, the parent is text-align: center \002014 the
   flex row needs to be centred with justify-content, not floated left of a
   centred column that then looks off-axis. */
.hero-content .breadcrumbs {
    margin: 0 auto 1.5rem;
}

.hero-content .bc-trail,
.hero-content .breadcrumbs ol {
    justify-content: center;
}

/* Fallback for a trail the build declines to rewrite: a bare <ol> here must
   still read as a row of crumbs, not as a bulleted list. */
.breadcrumbs ol {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.15rem 0.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 0.875rem;
    color: var(--text-muted);
}

.breadcrumbs ol a {
    color: inherit;
    text-decoration: none;
}

.bc-trail {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.15rem 0.35rem;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--text-muted);
}

.bc-item {
    display: inline-flex;
    align-items: center;
    min-width: 0;
}

/* CSS chevron: a rotated corner, so the separator is decoration the
   accessibility tree and the BreadcrumbList parser never see. */
.bc-item + .bc-item::before {
    content: "";
    width: 5px;
    height: 5px;
    margin: 0 0.5rem 0 0.15rem;
    border-top: 1.6px solid currentColor;
    border-right: 1.6px solid currentColor;
    transform: rotate(45deg);
    opacity: 0.45;
    flex: none;
}

.bc-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.25rem 0.55rem;
    margin: 0 -0.1rem;
    border-radius: 999px;
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.2s ease, background-color 0.2s ease;
}

.bc-link:hover,
.bc-link:focus-visible {
    color: var(--accent-primary);
    background-color: rgba(40, 44, 255, 0.07);
}

.bc-home {
    flex: none;
    opacity: 0.85;
}

.bc-link:hover .bc-home,
.bc-link:focus-visible .bc-home {
    opacity: 1;
}

/* The page you are on: stated, not linked, and weighted so the eye lands on
   it last instead of reading the trail as three equal links. */
.bc-leaf {
    display: inline-block;
    padding: 0.25rem 0.55rem;
    border-radius: 999px;
    background-color: rgba(40, 44, 255, 0.06);
    color: var(--text-primary);
    font-weight: 500;
}

@media (max-width: 560px) {
    .bc-trail {
        font-size: 0.8125rem;
    }

    .bc-item + .bc-item::before {
        margin: 0 0.35rem 0 0.1rem;
    }
}

/* ============================================================
   CLOSING CTA INSIDE THE FOOTER \002014 2026-09-22, operator request:
   the homepage's navy CTA band with the laptop, on every page,
   integrated into the footer the same way.

   The footer is already the navy section with the mosaic plate,
   so the band mounts inside it above the columns rather than as
   a section of its own. Geometry is ported from .cta-footer* in
   home.head.html; the copy is per-page.
   ============================================================ */

.footer-cta {
    position: relative;
    z-index: 1;
    max-width: calc(var(--hp-container) + 2 * var(--hp-gutter));
    margin: 0 auto;
    padding: var(--space-3xl) var(--hp-gutter) var(--space-2xl);
    min-height: 420px;
    display: flex;
    align-items: center;
}

/* The same wash the homepage band carries, so the navy is not flat. */
.footer-cta::before {
    content: '';
    position: absolute;
    left: 50%;
    translate: -50% 0;
    top: 0;
    width: max(1446px, 100%);
    height: 100%;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(48% 62% at 22% 34%, rgba(64, 104, 255, .38), rgba(64, 104, 255, 0) 70%),
        radial-gradient(38% 52% at 74% 22%, rgba(40, 44, 255, .30), rgba(40, 44, 255, 0) 72%);
}

.footer-cta__laptop {
    position: absolute;
    left: auto;
    right: calc(-1 * var(--hp-gutter) - 20px);
    top: 50%;
    transform: translateY(-50%);
    width: min(720px, 58%);
    z-index: 1;
    pointer-events: none;
    filter: drop-shadow(0 40px 80px rgba(0, 0, 40, .55));
    -webkit-mask-image: linear-gradient(180deg, #000 76%, rgba(0, 0, 0, 0) 99%);
    mask-image: linear-gradient(180deg, #000 76%, rgba(0, 0, 0, 0) 99%);
}

.footer-cta__inner {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 9px;
    max-width: 560px;
    color: #ffffff;
}

.footer-cta__inner h2 {
    margin: 0;
    font-family: var(--font-primary);
    font-size: clamp(2rem, 4vw, 3.25rem);
    line-height: 1.08;
    letter-spacing: -1.4px;
    font-weight: 500;
    color: #ffffff;
}

.footer-cta__inner p {
    margin: 0;
    max-width: 495px;
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 26px;
    color: #eaeaea;
}

.footer-cta__inner .btn {
    align-self: flex-start;
    margin-top: 20px;
    gap: 0.6rem;
}

.footer-cta__inner .btn svg { width: 18px; height: 18px; flex: 0 0 18px; }

/* The columns below get their own top rule, so the band needs none. */
.footer-cta + .footer-container { padding-top: 0; }

@media (max-width: 1100px) {
    .footer-cta { min-height: 360px; padding-top: var(--space-2xl); }
    .footer-cta__laptop { width: min(560px, 54%); }
}

@media (max-width: 860px) {
    /* Below this the laptop would sit on top of the words. */
    .footer-cta { min-height: 0; padding: var(--space-2xl) var(--hp-gutter) var(--space-xl); }
    .footer-cta__laptop { display: none; }
    .footer-cta__inner { max-width: none; }
    .footer-cta__inner .btn { align-self: stretch; justify-content: space-between; }
}

/* ============================================================
   RELATED ARTICLES \002014 2026-09-22, operator request:
   "\00043f\000456\000441\00043b\00044f FAQ \000441\000435\00043a\000446\000456\000457 \000432 \00043a\00043e\000436\00043d\000456\000439 \000431\00043b\00043e\000433-\000441\000442\000430\000442\000442\000456 \000434\00043e\000434\000430\000439 2 \00043a\000430\000440\000442\00043a\000438
    \00043d\000430 \000442\000435\00043c\000430\000442\000438\000447\00043d\000456 \000441\000442\000430\000442\000442\000456 \000442\000438\00043f\000443 \00043f\00043e\000447\000438\000442\000430\000442\000438 \000449\000435".

   The strip is emitted by relatedCards() in src/lib/blog-view.ts
   using the SAME <a class="blog-card"> markup the /blog/ listing
   uses, so the hero image on the card matches the one shown on the
   listing one-to-one. The rules below are scoped to .blog-related
   so they cannot collide with the listing's own page-scoped copy
   in src/raw/blog.head.html.
   ============================================================ */

.blog-related {
    position: relative;
    padding: var(--space-2xl) 0 var(--space-xl);
}

.blog-related .section-container {
    max-width: 1120px;
    margin: 0 auto;
    padding-left: var(--space-xl);
    padding-right: var(--space-xl);
}

.blog-related-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.01em;
    margin: 0 0 var(--space-lg);
}

.blog-related-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin-top: 0;
}

.blog-related .blog-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 1rem;
    padding: 1.75rem;
    color: inherit;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    overflow: hidden;
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.blog-related .blog-card:hover {
    border-color: var(--accent-primary);
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(40, 44, 255, 0.15);
}

.blog-related .blog-card-img {
    margin: -1.75rem -1.75rem 0;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--glass-border);
}

.blog-related .blog-card-img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.35s ease;
}

.blog-related .blog-card:hover .blog-card-img img { transform: scale(1.03); }

.blog-related .blog-card-tag {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--accent-primary);
    background: rgba(40, 44, 255, 0.1);
    padding: 0.25rem 0.7rem;
    border-radius: 2rem;
    width: fit-content;
}

.blog-related .blog-card h2 {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.3;
    margin: 0;
}

.blog-related .blog-card p {
    font-size: 0.92rem;
    color: var(--text-secondary);
    line-height: 1.55;
    margin: 0;
    /* Two-line clamp keeps two cards visually balanced when one summary
       runs longer than the other. */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.blog-related .blog-card-meta {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-top: auto;
    padding-top: 0.25rem;
}

.blog-related .blog-card-arrow {
    margin-left: auto;
    color: var(--accent-primary);
    opacity: 0;
    transform: translateX(-8px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.blog-related .blog-card:hover .blog-card-arrow {
    opacity: 1;
    transform: translateX(0);
}

@media (max-width: 768px) {
    .blog-related { padding-top: var(--space-xl); }
    .blog-related-grid { grid-template-columns: 1fr; gap: 1.25rem; }
    .blog-related .blog-card { padding: 1.5rem; }
    .blog-related .blog-card-img { margin: -1.5rem -1.5rem 0; }
}