/* ===========================
   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;
    --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 */
.cta {
    background: linear-gradient(180deg, var(--bg-primary) 0%, #f5f8ff 50%, #eef3ff 100%);
    text-align: center;
    position: relative;
    overflow: hidden;
}

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

.cta-content {
    position: relative;
    z-index: 1;
    max-width: 700px;
    margin: 0 auto;
}

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

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

.cta-buttons {
    display: flex;
    justify-content: center;
    gap: var(--space-md);
    margin-bottom: var(--space-xl);
}

.cta-trust {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
    font-size: 0.9rem;
    color: var(--text-muted);
}

.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-main {
    display: flex;
    justify-content: space-between;
    gap: var(--space-3xl);
    padding-bottom: var(--space-xl);
    border-bottom: 1px solid var(--border-color);
}

.footer-brand {
    max-width: 300px;
}

.footer-tagline {
    margin-top: var(--space-md);
    font-size: 0.95rem;
    color: var(--text-muted);
}

.footer-links {
    display: flex;
    gap: var(--space-3xl);
}

.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);
}

.footer-bottom {
    padding-top: var(--space-xl);
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.footer-bottom-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer-bottom-row p {
    font-size: 0.9rem;
    color: var(--text-muted);
}

.footer-corporate {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.35em;
    font-size: 0.75rem;
    color: var(--text-muted);
    opacity: 0.55;
    line-height: 1.6;
    text-align: center;
}

.footer-corporate-name {
    font-weight: 600;
}

.footer-corporate-sep {
    opacity: 0.4;
    margin: 0 0.15em;
}

.footer-social {
    display: flex;
    gap: var(--space-md);
}

.footer-social a {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    transition: var(--transition-fast);
}

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

.footer-social svg {
    width: 18px;
    height: 18px;
}

/* 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);
    }

    .footer-main {
        flex-direction: column;
        gap: var(--space-xl);
    }

    .footer-links {
        flex-wrap: wrap;
        gap: var(--space-xl);
    }

    .footer-bottom-row {
        flex-direction: column;
        gap: var(--space-md);
        text-align: center;
    }

    .cta-buttons {
        flex-direction: column;
        align-items: center;
    }

    .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;
}

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

.faq-item.active .faq-answer {
    max-height: 500px;
}

.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;
}

/* 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, .navx-contact { position: relative; list-style: none; }

/* The bar's own link colour is more specific than .btn-primary, so without
   these two the CTA label renders in --text-secondary on a saturated fill.
   White in both states, resting and hover. */
.nav-links .btn-primary,
.nav-links .btn-primary:hover,
.nav-links .btn-primary:focus { 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; }
}

.navx-contact { display: none; }

/* --- 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.
       99px is that height (24 + 50 + 24 + 1px rule) 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, .navx-contact { width: 100%; }
    .navx-cta { order: -1; margin-bottom: var(--space-md); }
    .navx-cta .btn { width: 100%; }
    .navx-contact { display: block; order: 99; margin-top: var(--space-md); padding-top: var(--space-md); border-top: 1px solid var(--border-color); }

    .navx-trigger, .nav-links > .navx-item > a, .navx-contact > 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; }
}