/* ============================================================================
   COMPONENTS.CSS
   Vålt Component Library Styles
   
   All component-specific styles using BEM naming convention.
   Uses CSS variables from style.css for consistency.
   
   Color variables are stored as raw RGB numbers.
   Usage: rgb(var(--color-name)) or rgb(var(--color-name) / 0.5) for opacity
   ============================================================================ */


/* ============================================================================
   BASE STYLES
   ============================================================================ */

body {
    margin: 0;
    padding: 0;
    background-color: rgb(var(--color-background));
    font-family: var(--font-family-base);
    letter-spacing: var(--letter-spacing-base);
}

main {
    overflow: hidden;
}


/* ============================================================================
   ICON BASE STYLES
   ============================================================================ */

.icon {
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
}

.icon > svg {
    width: 60%;
    height: 60%;
}


/* ============================================================================
   GLASSMORPHISM UTILITY
   ============================================================================ */

/**
 * Add .has-glassmorphism to a parent container to enable
 * glassmorphism effects on descendant components that support it.
 * 
 * Components use var(--bg-opacity) in their backgrounds by default (value: 1).
 * When inside .has-glassmorphism, --bg-opacity is set to --blur-opacity (0.8),
 * and backdrop-filter blur is applied.
 */
.has-glassmorphism {
    --bg-opacity: var(--blur-opacity);
}

/* Apply backdrop blur to glassmorphism-capable components */

/* Badges & Counters */
.has-glassmorphism .badge-kpi,
.has-glassmorphism .counter-kpi,
.has-glassmorphism .badge--soft,
.has-glassmorphism .badge--filled,

/* Tags */
.has-glassmorphism .tag,

/* Alerts */
.has-glassmorphism .alert--info,
.has-glassmorphism .alert--success,
.has-glassmorphism .alert--warning,
.has-glassmorphism .alert--danger,
.has-glassmorphism .alert--tip,

/* Cards */
.has-glassmorphism .card,
.has-glassmorphism .card--filled,
.has-glassmorphism .card-feature,
.has-glassmorphism .card-pricing,
.has-glassmorphism .card-process,
.has-glassmorphism .card-process__item-number,
.has-glassmorphism .card-step,
.has-glassmorphism .card-testimonial,

/* Tiles */
.has-glassmorphism .tile,

/* Lists */
.has-glassmorphism .list-numbered__number,
.has-glassmorphism .list-check--success .icon,

/* Accordion */
.has-glassmorphism .accordion__item,
.has-glassmorphism .accordion--steps .accordion__step-number,

/* Sections */
.has-glassmorphism .section--bg-background,
.has-glassmorphism .section--bg-surface,
.has-glassmorphism .section--bg-surface-alt,
.has-glassmorphism .section--bg-primary-light,
.has-glassmorphism .section--bg-secondary-light,

/* Table of Contents */
.has-glassmorphism .toc__nav,

/* Effektpilot Demo */
.has-glassmorphism .effektpilot-demo__toggle,
.has-glassmorphism .effektpilot-demo__success,

/* Effektkapning */
/* Effektkapning doesn't need glassmorphism since it's transparent */

/* Calculator */
.has-glassmorphism .calculator__progress,
.has-glassmorphism .calculator__step,
.has-glassmorphism .calculator__results-card

{
    backdrop-filter: blur(var(--blur));
    box-shadow: 10px 10px 20px -10px #0000005c;
}

/* Remove reveal for components affected by glassmorphism */

/* Badges & Counters */
.has-glassmorphism .badge-kpi-reveal,
.has-glassmorphism .counter-kpi-reveal,
.has-glassmorphism .badge--soft-reveal,
.has-glassmorphism .badge--filled-reveal,

/* Tags */
.has-glassmorphism .tag-reveal,

/* Alerts */
.has-glassmorphism .alert--info-reveal,
.has-glassmorphism .alert--success-reveal,
.has-glassmorphism .alert--warning-reveal,
.has-glassmorphism .alert--danger-reveal,
.has-glassmorphism .alert--tip-reveal,

/* Cards */
.has-glassmorphism .card-reveal,
.has-glassmorphism .card--filled-reveal,
.has-glassmorphism .card-feature-reveal,
.has-glassmorphism .card-pricing-reveal,
.has-glassmorphism .card-process-reveal,
.has-glassmorphism .card-process__item-number-reveal,
.has-glassmorphism .card-step-reveal,
.has-glassmorphism .card-testimonial-reveal,

/* Tiles */
.has-glassmorphism .tile-reveal,

/* Lists */
.has-glassmorphism .list-numbered__number-reveal,
.has-glassmorphism .list-check--success .icon-reveal,

/* Accordion */
.has-glassmorphism .accordion__item-reveal,
.has-glassmorphism .accordion--steps .accordion__step-number-reveal,

/* Sections */
.has-glassmorphism .section--bg-background-reveal,
.has-glassmorphism .section--bg-surface-reveal,
.has-glassmorphism .section--bg-surface-alt-reveal,
.has-glassmorphism .section--bg-primary-light-reveal,
.has-glassmorphism .section--bg-secondary-light-reveal,

/* Table of Contents */
.has-glassmorphism .toc__nav-reveal,

/* Effektpilot Demo */
.has-glassmorphism .effektpilot-demo__toggle-reveal,
.has-glassmorphism .effektpilot-demo__success-reveal

/* Effektkapning */
/* Effektkapning doesn't need glassmorphism since it's transparent */

{
    transition: none !important;
}

/* ============================================================================
   BUTTON COMPONENT
   ============================================================================ */

/**
 * Button
 * 
 * Variants: primary, secondary, outline, ghost, danger
 * Sizes: sm, md, lg
 * States: disabled, loading, glow
 */

/* Base */
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-2);
    padding: var(--spacing-2) var(--spacing-4);
    font-family: var(--font-family-base);
    font-size: var(--text-base);
    font-weight: var(--font-normal);
    line-height: var(--leading-normal);
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    cursor: pointer;
    position: relative;
    box-sizing: border-box;
    overflow: hidden;
    z-index: 0;
    transition: border-color var(--transition-fast),
                color var(--transition-fast),
                transform var(--transition-fast);
}

.button::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    transform: translateX(-100%);
    transition: transform 0.35s var(--easing);
}

.button:focus-visible {
    outline: 2px solid rgb(var(--color-primary));
    outline-offset: 2px;
}

.button:active {
    transform: scale(0.98);
}

/* Variants */
.button--primary {
    background-color: rgb(var(--color-primary));
    color: rgb(var(--color-primary-contrast));
}

.button--primary::before {
    background-color: rgb(var(--color-primary-hover));
}

.button--primary:hover::before {
    transform: translateX(0);
}

.button--primary:active {
    background-color: rgb(var(--color-primary-active));
}

.button--secondary {
    background-color: rgb(var(--color-secondary));
    color: rgb(var(--color-secondary-contrast));
}

.button--secondary::before {
    background-color: rgb(var(--color-secondary-hover));
}

.button--secondary:hover::before {
    transform: translateX(0);
}

.button--secondary:active {
    background-color: rgb(var(--color-secondary-active));
}

.button--outline {
    background-color: rgb(var(--color-surface));
    border-color: rgb(var(--color-border));
    color: rgb(var(--color-text));
}

.button--outline::before {
    background-color: rgb(var(--color-primary-light));
}

.button--outline:hover::before {
    transform: translateX(0);
}

.button--outline:hover {
    border-color: rgb(var(--color-border-strong));
}

.button--ghost {
    background-color: transparent;
    color: rgb(var(--color-text));
}

.button--ghost::before {
    background-color: rgb(var(--color-surface-alt));
}

.button--ghost:hover::before {
    transform: translateX(0);
}

.button--danger {
    background-color: rgb(var(--color-danger));
    color: rgb(var(--color-danger-contrast));
}

.button--danger::before {
    background-color: rgb(var(--color-danger-hover));
}

.button--danger:hover::before {
    transform: translateX(0);
}

/* Sizes */
.button--sm {
    padding: var(--spacing-1) var(--spacing-3);
    font-size: var(--text-sm);
}

.button--lg {
    padding: var(--spacing-3) var(--spacing-6);
    font-size: var(--text-lg);
}

@media (max-width: 768px) {
    .button--lg {
        font-size: var(--text-base);
    }
}

/* States */
.button--disabled,
.button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.button--loading {
    position: relative;
    color: transparent;
    pointer-events: none;
}

.button--loading::after {
    content: '';
    position: absolute;
    width: 1em;
    height: 1em;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: var(--radius-full);
    animation: button-spin 0.6s linear infinite;
}

.button--loading.button--primary::after {
    border-color: rgb(var(--color-primary-contrast));
    border-right-color: transparent;
}

.button--loading.button--secondary::after {
    border-color: rgb(var(--color-secondary-contrast));
    border-right-color: transparent;
}

.button--loading.button--danger::after {
    border-color: rgb(var(--color-danger-contrast, 255 255 255));
    border-right-color: transparent;
}

@keyframes button-spin {
    to { transform: rotate(360deg); }
}

/* Icon within button */
.button__icon {
    flex-shrink: 0;
    width: 1em;
    height: 1em;
}

.button__label {
    /* Ensures label is visible for loading state */
}

/* Dark mode adjustments */
.dark .button--outline {
    border-color: rgb(var(--color-border-strong));
}

.dark .button--outline::before {
    background-color: rgb(var(--color-border) / var(--bg-opacity));
}


/* ============================================================================
   BADGE COMPONENT
   ============================================================================ */

/**
 * Badge
 * 
 * Variants: default, primary, success, warning, danger, info
 * Styles: filled, outline, soft
 * Sizes: sm, md
 */

.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-1-5);
    padding: var(--spacing-2) var(--spacing-4);
    font-family: var(--font-family-base);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    line-height: var(--leading-none);
    border-radius: var(--radius-full);
    border: 1px solid transparent;
}

.badge--sm {
    padding: var(--spacing-1) var(--spacing-2);
    font-size: var(--text-xs);
}

.badge--rounded-base {
    border-radius: var(--radius-base);
}

/* Badge icon */
.badge__icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.badge__icon > svg {
    width: 1.25em;
    height: 1.25em;
}

/* Soft style */
.badge--soft.badge--default {
    background-color: rgb(var(--color-surface-alt) / var(--bg-opacity));
    color: rgb(var(--color-text-muted));
}

.badge--soft.badge--primary {
    background-color: rgb(var(--color-primary-light) / var(--bg-opacity));
    color: rgb(var(--color-text));
}

.badge--soft.badge--success {
    background-color: rgb(var(--color-success-light) / var(--bg-opacity));
    color: rgb(var(--color-success));
}

.badge--soft.badge--warning {
    background-color: rgb(var(--color-warning-light) / var(--bg-opacity));
    color: rgb(var(--color-warning));
}

.badge--soft.badge--danger {
    background-color: rgb(var(--color-danger-light) / var(--bg-opacity));
    color: rgb(var(--color-danger));
}

.badge--soft.badge--info {
    background-color: rgb(var(--color-info-light) / var(--bg-opacity));
    color: rgb(var(--color-text));
}

/* Filled style */
.badge--filled.badge--default {
    background-color: rgb(var(--color-border-strong) / var(--bg-opacity));
    color: rgb(var(--color-text));
}

.badge--filled.badge--primary {
    background-color: rgb(var(--color-primary) / var(--bg-opacity));
    color: rgb(var(--color-primary-contrast));
}

.badge--filled.badge--success {
    background-color: rgb(var(--color-success) / var(--bg-opacity));
    color: rgb(var(--color-success-contrast));
}

.badge--filled.badge--warning {
    background-color: rgb(var(--color-warning) / var(--bg-opacity));
    color: rgb(var(--color-warning-contrast));
}

.badge--filled.badge--danger {
    background-color: rgb(var(--color-danger) / var(--bg-opacity));
    color: rgb(var(--color-danger-contrast));
}

.badge--filled.badge--info {
    background-color: rgb(var(--color-info) / var(--bg-opacity));
    color: rgb(var(--color-info-contrast));
}

/* Outline style */
.badge--outline.badge--default {
    border-color: rgb(var(--color-border-strong-no-bg) / var(--bg-opacity));
    color: rgb(var(--color-text-muted-no-bg));
}

.badge--outline.badge--primary {
    border-color: rgb(var(--color-primary-hover) / var(--bg-opacity));
    color: rgb(var(--color-primary-hover));
}

.badge--outline.badge--success {
    border-color: rgb(var(--color-success) / var(--bg-opacity));
    color: rgb(var(--color-success));
}

.badge--outline.badge--warning {
    border-color: rgb(var(--color-warning) / var(--bg-opacity));
    color: rgb(var(--color-warning));
}

.badge--outline.badge--danger {
    border-color: rgb(var(--color-danger) / var(--bg-opacity));
    color: rgb(var(--color-danger));
}

.badge--outline.badge--info {
    border-color: rgb(var(--color-info) / var(--bg-opacity));
    color: rgb(var(--color-info));
}


/* ============================================================================
   BADGE KPI COMPONENT
   ============================================================================ */

.badge-kpi {
    padding: var(--spacing-4);
    text-align: center;
    background: rgb(var(--color-surface-alt) / var(--bg-opacity));
    border-radius: var(--radius-lg);
    border: 1px solid rgb(var(--color-border));
    font-family: var(--font-family-base);
}

.badge-kpi__header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-3);
    margin-bottom: var(--spacing-2);
}

.badge-kpi__icon {
    color: rgb(var(--color-primary-active));
    width: var(--text-3xl);
    height: var(--text-3xl);
}

.badge-kpi__icon .icon {
    width: 100%;
    height: 100%;
}

.badge-kpi__value {
    font-size: var(--text-3xl);
    font-weight: var(--font-semibold);
    line-height: var(--leading-none);
    color: rgb(var(--color-secondary));
}

.badge-kpi__label {
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    color: rgb(var(--color-text-muted));
    margin: 0;
}

/* Large size */
.badge-kpi--lg {
    padding: var(--spacing-6);
}

.badge-kpi--lg .badge-kpi__header {
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-3);
}

.badge-kpi--lg .badge-kpi__icon {
    width: var(--text-4xl);
    height: var(--text-4xl);
}

.badge-kpi--lg .badge-kpi__value {
    font-size: var(--text-4xl);
}

.badge-kpi--lg .badge-kpi__label {
    font-size: var(--text-base);
}


/* ============================================================================
   TAG COMPONENT
   ============================================================================ */

/**
 * Tag
 * 
 * Variants: default, primary
 * Sizes: sm, md
 */

.tag {
    display: inline-flex;
    align-items: center;
    padding: var(--spacing-2) var(--spacing-4);
    font-family: var(--font-family-base);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    line-height: var(--leading-none);
    text-decoration: none;
    border-radius: var(--radius-full);
    border: 1px solid rgb(var(--color-border));
    background-color: rgb(var(--color-primary-light) / var(--bg-opacity));
    color: rgb(var(--color-text));
    transition: background-color var(--transition-fast),
                border-color var(--transition-fast),
                color var(--transition-fast);
}

.tag--sm {
    padding: var(--spacing-1) var(--spacing-3);
    font-size: var(--text-xs);
}

.tag--primary {
    background-color: rgb(var(--color-primary-light) / var(--bg-opacity));
    border-color: rgb(var(--color-border));
    color: rgb(var(--color-primary));
}

.tag--active {
    background-color: rgb(var(--color-primary) / var(--bg-opacity));
    border-color: rgb(var(--color-primary));
    color: rgb(var(--color-primary-contrast));
}

a.tag:hover {
    border-color: rgb(var(--color-primary-hover));
    color: rgb(var(--color-primary-hover));
}

a.tag--active:hover {
    background-color: rgb(var(--color-primary-hover) / var(--bg-opacity));
}


/* ============================================================================
   ALERT COMPONENT
   ============================================================================ */

/**
 * Alert
 * 
 * Variants: info, success, warning, danger, tip
 * Options: with/without icon, dismissible
 */

.alert {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-3);
    padding: var(--spacing-4);
    border-radius: var(--radius-lg);
    border: 1px solid transparent;
    font-family: var(--font-family-base);
    transition: opacity var(--transition-base), transform var(--transition-base);
}

.alert__icon {
    flex-shrink: 0;
}

.alert__content {
    flex: 1;
    min-width: 0;
}

.alert__title {
    font-size: var(--text-base);
    font-weight: var(--font-medium);
    line-height: var(--leading-tight);
    margin: 0 0 var(--spacing-1) 0;
}

.alert__message {
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    margin: 0;
    color: rgb(var(--color-text-muted));
}

.alert__message p {
    margin: 0;
}

.alert__message p + p {
    margin-top: var(--spacing-1);
}

.alert__close {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-1);
    background: transparent;
    border: none;
    border-radius: var(--radius-base);
    cursor: pointer;
    opacity: 0.7;
    transition: opacity var(--transition-fast), background-color var(--transition-fast);
    color: rgb(var(--color-text));
}

.alert__close:hover {
    opacity: 1;
}

/* Type: Info */
.alert--info {
    background-color: rgb(var(--color-info-light) / var(--bg-opacity));
    border-color: rgb(var(--color-info));
}

.alert--info .alert__icon {
    color: rgb(var(--color-info));
}

.alert--info .alert__close:hover {
    background-color: rgb(var(--color-info) / 0.1);
}

/* Type: Success */
.alert--success {
    background-color: rgb(var(--color-success-light) / var(--bg-opacity));
    border-color: rgb(var(--color-success));
}

.alert--success .alert__icon {
    color: rgb(var(--color-success));
}

.alert--success .alert__close:hover {
    background-color: rgb(var(--color-success) / 0.1);
}

/* Type: Warning */
.alert--warning {
    background-color: rgb(var(--color-warning-light) / var(--bg-opacity));
    border-color: rgb(var(--color-warning));
}

.alert--warning .alert__icon {
    color: rgb(var(--color-warning));
}

.alert--warning .alert__close:hover {
    background-color: rgb(var(--color-warning) / 0.1);
}

/* Type: Danger */
.alert--danger {
    background-color: rgb(var(--color-danger-light) / var(--bg-opacity));
    border-color: rgb(var(--color-danger));
}

.alert--danger .alert__icon {
    color: rgb(var(--color-danger));
}

.alert--danger .alert__close:hover {
    background-color: rgb(var(--color-danger) / 0.1);
}

/* Type: Tip (uses primary colors) */
.alert--tip {
    background-color: rgb(var(--color-primary-light) / var(--bg-opacity));
    border-color: rgb(var(--color-primary-active));
}

.alert--tip .alert__icon {
    color: rgb(var(--color-primary-hover) / var(--bg-opacity));
}

.alert--tip .alert__title {
    color: rgb(var(--color-text));
}

.alert--tip .alert__close:hover {
    background-color: rgb(var(--color-primary) / 0.1);
}

/* Dismissing animation */
.alert--hiding {
    opacity: 0;
    transform: translateY(-10px);
}

/* Dark mode */
.dark .alert__close:hover {
    background-color: rgb(255 255 255 / 0.1);
}


/* ============================================================================
   CARD COMPONENT - Base
   ============================================================================ */

/**
 * Card
 * 
 * Styles: elevated, outlined, filled
 * Padding: none, sm, md, lg
 */

.card {
    background-color: rgb(var(--color-surface) / var(--bg-opacity));
    border-radius: var(--radius-xl);
    overflow: hidden;
    font-family: var(--font-family-base);
    transition: border-color var(--transition-slow),
                transform var(--transition-slow);
}

a.card {
    transform: scale(1);
}

a.card:hover {
    transform: scale(1.02);
}

a.card:active {
    transform: scale(0.98);
}

/* Styles */
.card--elevated {
    border: 1px solid rgb(var(--color-border));
}

.card--outlined {
    border: 1px solid rgb(var(--color-border));
}

.card--filled {
    background-color: rgb(var(--color-surface-alt) / var(--bg-opacity));
}

/* Hover effect */
.card--hoverable:hover {
    border-color: rgb(var(--color-primary));
}

.card--elevated.card--hoverable:hover {
}

/* Padding variants */
.card--padding-none .card__header,
.card--padding-none .card__body,
.card--padding-none .card__footer {
    padding: 0;
}

.card--padding-sm .card__header,
.card--padding-sm .card__body,
.card--padding-sm .card__footer {
    padding: var(--spacing-3);
}

.card--padding-lg .card__header,
.card--padding-lg .card__body,
.card--padding-lg .card__footer {
    padding: var(--spacing-8);
}

/* Slots */
.card__header {
    padding: var(--spacing-6);
    padding-bottom: 0;
}

.card__media {
    /* No padding for media */
}

.card__media img {
    width: 100%;
    height: auto;
    display: block;
}

.card__body {
    padding: var(--spacing-6);
}

.card__header + .card__body {
    padding-top: var(--spacing-4);
}

.card__footer {
    padding: var(--spacing-6);
    padding-top: 0;
}


/* ============================================================================
   CARD FEATURE COMPONENT
   ============================================================================ */

.card-feature {
    display: flex;
    gap: var(--spacing-4);
    padding: var(--spacing-4);
    background-color: rgb(var(--color-surface) / var(--bg-opacity));
    border: 1px solid rgb(var(--color-border));
    border-radius: var(--radius-xl);
    font-family: var(--font-family-base);
    text-decoration: none;
    height: 100%;
    box-sizing: border-box;
}

.card-feature--vertical {
    padding: var(--spacing-6);
}

.card-feature__icon-wrapper {
    flex-shrink: 0;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: var(--radius-lg);
    background-color: rgb(var(--color-surface-alt) / var(--bg-opacity));
    border: 1px solid rgb(var(--color-border));
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color var(--transition-base);
}

.card-feature--primary .card-feature__icon-wrapper {
    border-color: rgb(var(--color-primary-hover));
    transition: all 0.2s;
}

.card-feature__icon {
    color: rgb(var(--color-text)) !important;
}

.card-feature--primary .card-feature__icon {
    color: rgb(var(--color-primary-hover)) !important;
}

.card-feature__content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-1);
    transition: all 0.2s;
}

.card-feature.card--hoverable:hover .card-feature__icon-wrapper,
.card-feature.card--hoverable:hover .card-feature__content {
    opacity: 0.75;
}

.card-feature__title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-3);
}

.card-feature__arrow {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    color: rgb(var(--color-text-muted));
    transition: transform var(--transition-base), color var(--transition-base);
}

.card-feature.card--hoverable:hover .card-feature__arrow {
    transform: translateX(4px);
    color: rgb(var(--color-primary));
}

.card-feature__title {
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    line-height: var(--leading-snug);
    color: rgb(var(--color-text));
    margin: 0;
}

.card-feature__description {
    font-size: var(--text-base);
    color: rgb(var(--color-text-muted));
    margin: 0;
    line-height: var(--leading-relaxed);
}

/* Vertical layout */
.card-feature--vertical {
    flex-direction: column;
}

.card-feature--vertical .card-feature__title {
    margin-bottom: var(--spacing-2);
}

/* Mini layout */
.card-feature-wrapper--mini {
    min-width: 65%;
}

.card-feature-wrapper--mini .card-feature {
    align-items: center;
}

.card-feature-wrapper--mini .card-feature__description {
    display: none;
}

@media (max-width: 768px) {
    .card-feature-wrapper--mini {
        gap: var(--spacing-2);
        width: 100%;
    }
    
    .card-feature-wrapper--mini .card-feature__icon-wrapper {
        width: 2rem;
        height: 2rem;
    }
    
    .card-feature-wrapper--mini .card-feature__title {
        font-size: var(--text-sm);
    }
}

@media (min-width: 769px) {
    .card-feature-wrapper--mini {
        gap: var(--spacing-3);
    }
    
    
    .card-feature-wrapper--mini .card-feature__icon-wrapper {
        width: 2.5rem;
        height: 2.5rem;
    }
    
    .card-feature-wrapper--mini .card-feature__title {
        font-size: var(--text-base);
    }
}

/* ============================================================================
   CARD PROCESS COMPONENT
   ============================================================================ */

.card-process {
    background-color: rgb(var(--color-surface) / var(--bg-opacity));
    border: 1px solid rgb(var(--color-border));
    border-radius: var(--radius-lg);
    font-family: var(--font-family-base);
}

.card-process.card--hoverable:hover {
    border-color: rgb(var(--color-primary) / 0.5);
}

.card-process__header {
    padding: var(--spacing-6);
    padding-bottom: var(--spacing-1-5);
}

.card-process__icon-wrapper {
    width: 3rem;
    height: 3rem;
    border-radius: var(--radius-lg);
    border: 1px solid rgb(var(--color-border));
    background-color: rgb(var(--color-primary-light) / var(--bg-opacity));
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--spacing-6);
}

.card-process__icon {
    color: rgb(var(--color-primary));
}

.card-process__title {
    font-size: var(--text-xl);
    font-weight: var(--font-semibold);
    color: rgb(var(--color-text));
    margin: 0;
    line-height: var(--leading-tight);
}

.card-process__body {
    padding: var(--spacing-6);
    padding-top: var(--spacing-2);
}

.card-process__body > div + div {
    margin-top: var(--spacing-4);
}

.card-process__label {
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    line-height: var(--leading-normal);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    margin: 0 0 var(--spacing-1) 0;
    color: rgb(var(--color-text-muted));
}

.card-process__label--warning {
    color: rgb(var(--color-warning));
}

.card-process__label--success {
    color: rgb(var(--color-success));
}

.card-process__text {
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    color: rgb(var(--color-text-muted));
    margin: 0;
}

.card-process__list {
    list-style: none;
    padding: 0;
    margin: 0;
    counter-reset: process-neutral;
}

.card-process__item {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-2);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    color: rgb(var(--color-text-muted));
}

.card-process__item:not(:last-child) {
    margin-bottom: var(--spacing-3);
}

.card-process__item + .card-process__item {
    margin-top: var(--spacing-1);
}

.card-process__item-icon {
    flex-shrink: 0;
    margin-top: var(--spacing-0-5);
    width: 1.25em;
    height: 1.25em;
}

.card-process__item-icon--success {
    color: rgb(var(--color-success));
}

.card-process__item-icon--danger {
    color: rgb(var(--color-danger));
}

.card-process__item-icon--neutral {
    color: rgb(var(--color-text-subtle));
}

.card-process__item-number {
    counter-increment: process-neutral;
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: var(--radius-full);
    background-color: rgb(var(--color-primary-light) / var(--bg-opacity));
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: calc(var(--spacing-0-5) / 2);
    border: 1px solid rgb(var(--color-border));
}

.card-process__item-number::before {
    content: counter(process-neutral);
    font-size: var(--text-sm);
    font-weight: var(--font-bold);
    color: rgb(var(--color-primary-active));
}


/* ============================================================================
   CARD COMPARISON COMPONENT
   ============================================================================ */

.card-comparison-reveal {
    height: 100%;
}

.card-comparison {
    background-color: rgb(var(--color-surface) / var(--bg-opacity));
    border: 1px solid rgb(var(--color-border));
    border-radius: var(--radius-lg);
    font-family: var(--font-family-base);
    height: 100%;
}

.card-comparison.card--hoverable:hover {
    border-color: rgb(var(--color-primary) / 0.5);
}

.card-comparison__header {
    padding: var(--spacing-6);
    padding-bottom: var(--spacing-1-5);
}

.card-comparison__icon-wrapper {
    width: 3rem;
    height: 3rem;
    border-radius: var(--radius-lg);
    background-color: rgb(var(--color-primary-light) / var(--bg-opacity));
    border: 1px solid rgb(var(--color-border));
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--spacing-6);
}

.card-comparison__icon {
    color: rgb(var(--color-primary));
}

.card-comparison__title {
    font-size: var(--text-xl);
    font-weight: var(--font-semibold);
    color: rgb(var(--color-text));
    margin: 0;
    line-height: var(--leading-tight);
}

.card-comparison__body {
    padding: var(--spacing-6);
    padding-top: var(--spacing-2);
}

.card-comparison__section + .card-comparison__section {
    margin-top: var(--spacing-4);
}

.card-comparison__label {
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    line-height: var(--leading-normal);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    margin: 0 0 var(--spacing-1) 0;
    color: rgb(var(--color-text-muted));
}

.card-comparison__label--warning {
    color: rgb(var(--color-warning));
}

.card-comparison__label--success {
    color: rgb(var(--color-success));
}

.card-comparison__label--muted {
    color: rgb(var(--color-text-muted));
}

.card-comparison__text {
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    color: rgb(var(--color-text-muted));
    margin: 0;
}

.card-comparison__list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.card-comparison__item {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-2);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    color: rgb(var(--color-text-muted));
}

.card-comparison__item:not(:last-child) {
    margin-bottom: var(--spacing-2);
}

.card-comparison__item + .card-comparison__item {
    margin-top: var(--spacing-1);
}

.card-comparison__item-icon {
    width: 1.25em;
    height: 1.25em;
    flex-shrink: 0;
    margin-top: var(--spacing-0-5);
}

.card-comparison__item-icon--success {
    color: rgb(var(--color-success)) !important;
}

.card-comparison__item-icon--warning {
    color: rgb(var(--color-warning)) !important;
}

.card-comparison__item-icon--neutral {
    color: rgb(var(--color-text-subtle)) !important;
}


/* ============================================================================
   CARD STEP COMPONENT
   ============================================================================ */

.card-step {
    position: relative;
    background-color: rgb(var(--color-surface) / var(--bg-opacity));
    border: 1px solid rgb(var(--color-border));
    border-radius: var(--radius-lg);
    font-family: var(--font-family-base);
    overflow: hidden;
    height: 100%;
}

.card-step__number-bg {
    position: absolute;
    top: var(--spacing-6);
    right: var(--spacing-6);
    font-size: var(--text-6xl);
    font-weight: var(--font-bold);
    color: rgb(var(--color-secondary-light));
    user-select: none;
    line-height: 1;
}

.card-step__inner {
    position: relative;
    padding: var(--spacing-8);
}

.card-step__icon-wrapper {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: var(--radius-2xl);
    background-color: rgb(var(--color-primary-light) / var(--bg-opacity));
    border: 1px solid rgb(var(--color-border));
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--spacing-6);
}

.card-step__icon {
    color: rgb(var(--color-text)) !important;
}

.card-step__title {
    font-size: var(--text-xl);
    font-weight: var(--font-semibold);
    line-height: var(--leading-tight);
    color: rgb(var(--color-text));
    margin: 0 0 var(--spacing-2) 0;
}

.card-step__description {
    font-size: var(--text-base);
    color: rgb(var(--color-text-muted));
    margin: 0;
    line-height: var(--leading-relaxed);
}

@media (max-width: 768px) {
    .card-step--no-icon .card-step__title {
        padding-right: var(--spacing-24);
        margin: 0 0 var(--spacing-4) 0;
    }
}

@media (min-width: 768px) {
    .card-step--no-icon .card-step__inner {
        padding-right: var(--spacing-24);
    }
}

/* ============================================================================
   CARD TESTIMONIAL COMPONENT
   ============================================================================ */

.card-testimonial {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    box-sizing: border-box;
    background-color: rgb(var(--color-surface) / var(--bg-opacity));
    border: 1px solid rgb(var(--color-border));
    border-radius: var(--radius-2xl);
    padding: var(--spacing-8);
    font-family: var(--font-family-base);
    transition: border-color var(--transition-slow);
}

.card-testimonial__icon-wrapper {
    width: 3rem;
    height: 3rem;
    border-radius: var(--radius-xl);
    border: 1px solid rgb(var(--color-border));
    background-color: rgb(var(--color-primary-light) / var(--bg-opacity));
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--spacing-6);
    transition: background-color var(--transition-base);
}

.card-testimonial__icon {
    color: rgb(var(--color-primary));
}

.card-testimonial__quote {
    font-size: var(--text-xl);
    font-weight: var(--font-normal);
    line-height: var(--leading-relaxed);
    color: rgb(var(--color-text));
    margin: 0 0 var(--spacing-8) 0;
}

.card-testimonial__author {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    border-top: 1px solid rgb(var(--color-border));
    padding-top: var(--spacing-6);
    margin-top: auto;
}

.card-testimonial__avatar {
    width: 3rem;
    height: 3rem;
    border-radius: var(--radius-full);
    object-fit: cover;
}

.card-testimonial__author-info {
    flex: 1;
}

.card-testimonial__name {
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    line-height: var(--leading-normal);
    color: rgb(var(--color-text));
    margin: 0;
}

.card-testimonial__role {
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    color: rgb(var(--color-text-muted));
    margin: 0;
}


/* ============================================================================
   CARD PRICING COMPONENT
   ============================================================================ */

/**
 * Pricing Card
 * 
 * Modifiers: --emphasized (thicker border, badge support)
 * Left-aligned text, sparse border dividers
 * Uses badge component for badges, checklist matches comparison cards
 */

.card-pricing {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: rgb(var(--color-surface) / var(--bg-opacity));
    border: 1px solid rgb(var(--color-border));
    border-radius: var(--radius-2xl);
    font-family: var(--font-family-base);
    transition: border-color var(--transition-slow);
    overflow: visible !important;
    padding: 0 var(--spacing-6);
}

/* Emphasized variant */
.card-pricing--emphasized {
    border-width: 2px;
    border-color: rgb(var(--color-primary));
}

/* Badge wrapper (positioned to overlap top border, centered) */
.card-pricing__badge-wrapper {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
}

.card-pricing__badge-wrapper > .badge {
    background-color: rgb(var(--color-background));
    border: 2px solid rgb(var(--color-primary-hover));
}

/* Header section */
.card-pricing__header {
    padding-top: calc(var(--spacing-8) + var(--spacing-4));
    padding-bottom: var(--spacing-6);
}

/* Name matches .heading--label */
.card-pricing__name {
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: rgb(var(--color-text-muted));
    line-height: var(--leading-normal);
    margin: 0 0 var(--spacing-3) 0;
}

.card-pricing__price-wrapper {
    display: flex;
    align-items: baseline;
    gap: var(--spacing-1);
    margin-bottom: var(--spacing-2);
}

.card-pricing__price {
    font-size: var(--text-5xl);
    font-weight: var(--font-bold);
    line-height: var(--leading-none);
    color: rgb(var(--color-text));
}

.card-pricing__currency {
    font-size: var(--text-xl);
    font-weight: var(--font-medium);
    color: rgb(var(--color-text-muted));
}

.card-pricing__price-description {
    font-size: var(--text-sm);
    color: rgb(var(--color-text-muted));
    margin: 0;
}

/* Body section with border divider */
.card-pricing__body {
    padding-top: var(--spacing-6);
    padding-bottom: var(--spacing-8);
    border-top: 1px solid rgb(var(--color-border));
    flex: 1;
}

.card-pricing__section-label {
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: rgb(var(--color-text));
    margin: 0 0 var(--spacing-1) 0;
}

.card-pricing__section-text {
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
    color: rgb(var(--color-text-muted));
    margin: 0 0 var(--spacing-6) 0;
}

/* Features checklist (matches comparison card styling) */
.card-pricing__features {
    list-style: none;
    padding: 0;
    margin: 0;
}

.card-pricing__feature-item {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-2);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    color: rgb(var(--color-text-muted));
}

.card-pricing__feature-item:not(:last-child) {
    margin-bottom: var(--spacing-2);
}

.card-pricing__feature-item + .card-pricing__feature-item {
    margin-top: var(--spacing-1);
}

.card-pricing__feature-item--excluded {
    color: rgb(var(--color-text-muted));
}

.card-pricing__feature-icon {
    width: 1.25em;
    height: 1.25em;
    flex-shrink: 0;
    margin-top: var(--spacing-0-5);
}

.card-pricing__feature-icon--success {
    color: rgb(var(--color-success)) !important;
}

.card-pricing__feature-icon--excluded {
    color: rgb(var(--color-text-subtle)) !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .card-pricing--emphasized {
        margin-top: var(--spacing-4);
    }

    .card-pricing__price {
        font-size: var(--text-4xl);
    }
    
    .card-pricing__header {
        padding-top: calc(var(--spacing-6) + var(--spacing-4));
        padding-bottom: var(--spacing-4);
    }
    
    .card-pricing__body {
        padding-top: var(--spacing-4);
        padding-bottom: var(--spacing-6);
    }
}


/* ============================================================================
   CARD POST COMPONENT
   ============================================================================ */

.card-post {
    display: flex;
    flex-direction: column;
    padding: var(--spacing-3);
    background-color: rgb(var(--color-surface) / var(--bg-opacity));
    border: 1px solid rgb(var(--color-border));
    border-radius: var(--radius-2xl);
    font-family: var(--font-family-base);
    text-decoration: none;
    height: 100%;
    box-sizing: border-box;
    position: relative;
    overflow: visible;
}

/* Arrow - positioned top-right in vertical, right column in horizontal */
.card-post__arrow {
    position: absolute;
    top: var(--spacing-3);
    right: var(--spacing-3);
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    filter: brightness(0) invert(1);
    opacity: 0.5;
    transition: transform var(--transition-base), opacity var(--transition-base);
    z-index: 1;
}

.card-post:hover .card-post__arrow {
    opacity: 1;
}

/* Media (image wrapper) */
.card-post__media {
    border-radius: var(--radius-xl);
    overflow: hidden;
    flex-shrink: 0;
    aspect-ratio: 16 / 10;
}

.card-post__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--transition-slow);
}

.card-post.card--hoverable:hover .card-post__image {
    transform: scale(1.03);
}

/* Body */
.card-post__body {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-1-5);
    padding: var(--spacing-3) var(--spacing-1);
    padding-bottom: var(--spacing-2);
    flex: 1;
}

.card-post__title {
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    line-height: var(--leading-snug);
    color: rgb(var(--color-text));
    margin: 0;
    padding-right: var(--spacing-8);
}

.card-post__excerpt {
    font-size: var(--text-sm);
    color: rgb(var(--color-text-muted));
    margin: 0;
    line-height: var(--leading-relaxed);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Horizontal layout */
.card-post--horizontal {
    flex-direction: row;
    align-items: stretch;
    padding: var(--spacing-3);
    gap: var(--spacing-6);
}

.card-post--horizontal .card-post__media {
    width: 100%;
    height: 100%;
    border-radius: var(--radius-lg);
    order: 2;
    align-self: flex-start;
}

.card-post--horizontal .card-post__body {
    order: 1;
    flex: 1;
    padding: var(--spacing-2) 0 var(--spacing-2) var(--spacing-2);
    justify-content: flex-start;
}

.card-post--horizontal .card-post__title {
    padding-right: 0;
}

.card-post--horizontal .card-post__arrow {
    position: absolute;
    top: unset;
    right: var(--spacing-3);
    bottom: var(--spacing-3);
    left: unset;
    opacity: 0.5;
    transition: all 0.2s;
}

.card-post.card--hoverable:hover .card-post__arrow {
    transform: translateX(4px);
    opacity: 1;
}



/* Horizontal: stack media + arrow in right column */
.card-post--horizontal {
    display: grid;
    grid-template-columns: 1fr 150px;
    grid-template-rows: auto;
}

.card-post--horizontal .card-post__media {
    grid-column: 2;
    grid-row: 1;
    order: unset;
    height: 100%;
}

/* Post grid wrapper */
.post-grid {
    display: grid;
    gap: var(--spacing-4);
    --post-grid-cols-tablet: 2;
    --post-grid-cols-desktop: 3;
    grid-template-columns: repeat(var(--post-grid-cols-desktop), 1fr);
}

@media (max-width: 1023px) {
    .post-grid {
        grid-template-columns: repeat(var(--post-grid-cols-tablet), 1fr);
    }
}

/* Responsive */
@media (max-width: 768px) {
    .post-grid {
        grid-template-columns: 1fr !important;
    }

    .card-post--horizontal {
        grid-template-columns: 1fr 100px;
        padding: var(--spacing-2);
        gap: var(--spacing-4);
    }

    .card-post--horizontal .card-post__media {
        width: 100px;
        min-width: 100px;
    }

    .card-post--horizontal .card-post__title {
        font-size: var(--text-base);
    }

    .card-post--horizontal .card-post__body {
        padding: var(--spacing-1) 0 var(--spacing-1) var(--spacing-1);
    }
}

/* Glassmorphism support */
.has-glassmorphism .card-post {
    backdrop-filter: blur(var(--blur));
}


/* ============================================================================
   TILE COMPONENT
   ============================================================================ */

/**
 * Tile
 * 
 * Layouts: vertical, horizontal
 * Sizes: sm, md, lg
 */

.tile {
    display: flex;
    padding: var(--spacing-4);
    background-color: rgb(var(--color-surface) / var(--bg-opacity));
    border: 1px solid rgb(var(--color-border));
    border-radius: var(--radius-xl);
    font-family: var(--font-family-base);
    text-decoration: none;
    transition: border-color var(--transition-slow);
}

.tile--vertical {
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.tile--horizontal {
    flex-direction: row;
    align-items: center;
    gap: var(--spacing-4);
}

.tile--interactive:hover {
    border-color: rgb(var(--color-border));
}

.tile--sm {
    padding: var(--spacing-3);
}

.tile--lg {
    padding: var(--spacing-6);
}

.tile__icon-wrapper {
    width: 3rem;
    height: 3rem;
    border-radius: var(--radius-lg);
    background-color: rgb(var(--color-primary-light) / var(--bg-opacity));
    border: 1px solid rgb(var(--color-border));
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--spacing-3);
    transition: background-color var(--transition-base);
}

.tile--horizontal .tile__icon-wrapper {
    margin-bottom: 0;
}

.tile--interactive:hover .tile__icon-wrapper {
    background-color: rgb(var(--color-border) / var(--bg-opacity));
}

.tile__icon {
    color: rgb(var(--color-primary));
}

.tile__label {
    font-size: var(--text-base);
    font-weight: var(--font-medium);
    line-height: var(--leading-normal);
    color: rgb(var(--color-text));
}

.tile__description {
    font-size: var(--text-xs);
    line-height: var(--leading-normal);
    color: rgb(var(--color-text-muted));
    margin: var(--spacing-1) 0 0 0;
}

/* Tile grid */
.tile-grid {
    display: grid;
    font-family: var(--font-family-base);
}

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

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

.tile-grid--cols-4 {
    grid-template-columns: repeat(4, 1fr);
}

.tile-grid--gap-sm {
    gap: var(--spacing-2);
}

.tile-grid--gap-md {
    gap: var(--spacing-4);
}

.tile-grid--gap-lg {
    gap: var(--spacing-6);
}


/* ============================================================================
   LIST FEATURE COMPONENT
   ============================================================================ */

.list-feature {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    font-family: var(--font-family-base);
}

.list-feature > :not(:last-child) {
    margin-bottom: var(--spacing-4);
}

.list-feature--horizontal {
    flex-direction: row;
    flex-wrap: wrap;
}

.list-feature--sm > :not(:last-child) {
    margin-bottom: var(--spacing-3);
}

.list-feature--lg > :not(:last-child) {
    margin-bottom: var(--spacing-8);
}

.list-feature__item {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-4);
}

.list-feature__icon-wrapper {
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius-lg);
    background-color: rgb(var(--color-surface) / var(--bg-opacity));
    border: 1px solid rgb(var(--color-border));
    display: flex;
    align-items: center;
    justify-content: center;
}

.list-feature--lg .list-feature__icon-wrapper {
    width: 2.75rem;
    height: 2.75rem;
}

.list-feature__icon {
    color: rgb(var(--color-text)) !important;
}

.list-feature__content {
    flex: 1;
    min-width: 0;
}

.list-feature__title {
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    line-height: var(--leading-tight);
    color: rgb(var(--color-text-no-bg));
    margin: 0 0 var(--spacing-1) 0;
}

.list-feature__title a {
    color: rgb(var(--color-text-no-bg));
}

.list-feature--lg .list-feature__title {
    font-size: var(--text-lg);
}

.list-feature__description {
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
    color: rgb(var(--color-text-muted-no-bg));
    margin: 0;
}

.list-feature__description a {
    color: rgb(var(--color-text-muted-no-bg));
}

.list-feature--lg .list-feature__description {
    font-size: var(--text-base);
}


/* ============================================================================
   LIST NUMBERED COMPONENT
   ============================================================================ */

.list-numbered {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    font-family: var(--font-family-base);
}

.list-numbered > :not(:last-child) {
    margin-bottom: var(--spacing-5);
}

.list-numbered--sm > :not(:last-child) {
    margin-bottom: var(--spacing-2);
}

.list-numbered__item {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-3);
}

.list-numbered__number {
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: var(--radius-full);
    background-color: rgb(var(--color-primary-light) / var(--bg-opacity));
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgb(var(--color-border));
}

.list-numbered__number span {
    font-size: var(--text-sm);
    font-weight: var(--font-bold);
    color: rgb(var(--color-primary-active));
}

.list-numbered__content {
    flex: 1;
    min-width: 0;
}

.list-numbered__text {
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    color: rgb(var(--color-text-muted-no-bg));
    margin: 0;
}

.list-numbered__title {
    font-weight: var(--font-medium);
    line-height: var(--leading-tight);
    color: rgb(var(--color-text-no-bg));
}


/* ============================================================================
   LIST CHECK COMPONENT
   ============================================================================ */

.list-check {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    font-family: var(--font-family-base);
}

.list-check > :not(:last-child) {
    margin-bottom: var(--spacing-3);
}

.list-check__item {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-3);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    color: rgb(var(--color-text-muted-no-bg));
}

.list-check__icon {
    flex-shrink: 0;
}

.list-check--success:not(.list-check--icon-dot) .icon,
.list-check--danger:not(.list-check--icon-dot) .icon {
    width: 0.85rem;
    height: 0.85rem;
    padding: 0.2em;
    margin-top: 0.1em;
    border-radius: 50%;
    border: 1px solid rgb(var(--color-border));
}

.list-check--success .icon {
    background: rgb(var(--color-primary-light) / var(--bg-opacity));
    color: rgb(var(--color-primary-active)) !important;
}

.list-check--danger .icon {
    background: rgb(var(--color-danger-light) / var(--bg-opacity));
    color: rgb(var(--color-danger)) !important;
}

.list-check--icon-dot .icon,
.list-check--muted .icon {
    width: 0.75em;
    height: 0.75em;
    margin-top: 0.375em;
    border-radius: 50%;
}

.list-check--muted .icon {   
    background: rgb(var(--color-border));
    color: rgb(var(--color-border)) !important;
}

.list-check--muted .icon circle {
    color: rgb(var(--color-text-muted)) !important;
}


/* ============================================================================
   FEATURE POINTS COMPONENT
   ============================================================================ */

/**
 * Feature Points
 * 
 * Horizontal row of icon+text pairs with dot separators.
 * Used for trust indicators, feature highlights, etc.
 * 
 * Alignment: left, center, right
 * Separators: dot, line, none
 * Sizes: sm, md
 */

.feature-points {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-4);
    color: rgb(var(--color-text-muted));
    font-family: var(--font-family-base);
}

/* Alignment */
.feature-points--left {
    justify-content: flex-start;
}

.feature-points--right {
    justify-content: flex-end;
}

/* Item */
.feature-points__item {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

.feature-points__icon {
    flex-shrink: 0;
    color: rgb(var(--color-primary));
}

.feature-points__text {
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
}

/* Separator (dot by default) */
.feature-points__separator {
    display: none;
    width: 4px;
    height: 4px;
    border-radius: var(--radius-full);
    background-color: rgb(var(--color-text-muted));
    flex-shrink: 0;
}

@media (min-width: 640px) {
    .feature-points__separator {
        display: block;
    }
}

/* Separator: line */
.feature-points--separator-line .feature-points__separator {
    width: 1px;
    height: 1rem;
    border-radius: 0;
    background-color: rgb(var(--color-border));
}

/* Separator: none */
.feature-points--separator-none .feature-points__separator {
    display: none;
}

/* Size: md */
.feature-points--md {
    gap: var(--spacing-8);
}

.feature-points--md .feature-points__item {
    gap: var(--spacing-3);
}

.feature-points--md .feature-points__text {
    font-size: var(--text-base);
}

.feature-points--md .feature-points__icon {
    width: 1.25rem;
    height: 1.25rem;
}


/* ============================================================================
   ACCORDION COMPONENT
   ============================================================================ */

/**
 * Accordion
 * 
 * Styles: default, bordered, separated
 * Sizes: sm, md
 */

.accordion {
    display: flex;
    flex-direction: column;
    font-family: var(--font-family-base);
}

.accordion--separated {
    gap: var(--spacing-4);
}

.accordion--bordered {
    border: 1px solid rgb(var(--color-border));
    border-radius: var(--radius-xl);
    overflow: hidden;
}

.accordion--steps {
    border: 1px solid rgb(var(--color-border));
    border-radius: var(--radius-xl);
    overflow: hidden;
}

/* Accordion item */
.accordion__item {
    background-color: rgb(var(--color-surface) / var(--bg-opacity));
    transition: border-color var(--transition-base);
}

.accordion--separated .accordion__item {
    border: 1px solid rgb(var(--color-border));
    border-radius: var(--radius-xl);
}

.accordion--bordered .accordion__item + .accordion__item {
    border-top: 1px solid rgb(var(--color-border));
}

.accordion__item:hover,
.accordion__item--open {
    border-color: rgb(var(--color-border-strong)) !important;
}

/* Accordion header */
.accordion__header {
    margin: 0;
    display: flex;
}

/* Accordion trigger button */
.accordion__trigger {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--spacing-5) var(--spacing-6);
    background: transparent;
    border: none;
    text-align: left;
    font-family: var(--font-family-base);
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    color: rgb(var(--color-text));
    cursor: pointer;
    transition: background-color var(--transition-fast);
}

.accordion--sm .accordion__trigger {
    padding: var(--spacing-4) var(--spacing-5);
    font-size: var(--text-sm);
}

.accordion__trigger:focus-visible {
    outline: 2px solid rgb(var(--color-primary));
    outline-offset: -2px;
}

.accordion__title {
    flex: 1;
}

.accordion__icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform var(--transition-base);
}

.accordion__item--open .accordion__icon {
    transform: rotate(180deg);
}

/* Accordion content */
.accordion__content {
    overflow: hidden;
    transition: max-height var(--transition-slow);
}

.accordion__body {
    padding: 0 var(--spacing-6) var(--spacing-5) var(--spacing-6);
    font-size: var(--text-base);
    color: rgb(var(--color-text-muted));
    line-height: var(--leading-relaxed);
}

.accordion--sm .accordion__body {
    padding: 0 var(--spacing-5) var(--spacing-4) var(--spacing-5);
}

/* Accordion steps variant */
.accordion--steps .accordion__trigger {
    gap: var(--spacing-3);
}

.accordion--steps .accordion__step-indicator {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
}

.accordion--steps .accordion__step-number {
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    border-radius: var(--radius-full);
    background-color: rgb(var(--color-primary-light) / var(--bg-opacity));
    color: rgb(var(--color-primary-active));
    border: 1px solid rgb(var(--color-border));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-sm);
    font-weight: var(--font-bold);
}

.accordion--steps .accordion__item--open {
    border-color: rgb(var(--color-primary) / 0.5);
}


/* ============================================================================
   SECTION COMPONENT
   ============================================================================ */

.section {
    position: relative;
    font-family: var(--font-family-base);
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

.section__container {
    max-width: var(--site-width-regular);
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--spacing-8);
    padding-right: var(--spacing-8);
    box-sizing: border-box;
}

/* Width variants */
.section--width-narrow .section__container {
    max-width: var(--container-narrow);
}

.section--width-medium .section__container {
    max-width: var(--container-medium);
}

.section--width-wide .section__container {
    max-width: var(--site-max-width);
}

.section--width-full .section__container {
    max-width: none;
}

/* Padding variants */
.section--padding-sm {
    padding-top: var(--spacing-8);
    padding-bottom: var(--spacing-8);
}

.section--padding-md {
    padding-top: var(--spacing-12);
    padding-bottom: var(--spacing-12);
}

.section--padding-lg {
    padding-top: var(--spacing-16);
    padding-bottom: var(--spacing-16);
}

.section--padding-xl {
    padding-top: var(--spacing-24);
    padding-bottom: var(--spacing-24);
}

/* Background variants */
.section--bg-background {
    background-color: rgb(var(--color-background));
}

.section--bg-surface {
    background-color: rgb(var(--color-surface));
}

.section--bg-surface-alt {
    background-color: rgb(var(--color-surface-alt));
}

.section--bg-primary-light {
    background-color: rgb(var(--color-primary-light));
}

.section--bg-secondary-light {
    background-color: rgb(var(--color-secondary-light));
}

.section--bg-grainy {
    z-index: 1;
}

.section--bg-grainy::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: url(/wp-content/themes/valt/assets/images/noise.png);
    z-index: -1;
    mix-blend-mode: overlay;
    opacity: 0.2;
    background-size: 100px 100px
}

/* Background image */
.section--has-bg-image {
    position: relative;
}

.section__bg-image-wrapper {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}

.section__bg-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.section__bg-tint {
    position: absolute;
    inset: 0;
    /* Opacity set via inline style from ACF field */
}

.section__bg-tint--primary {
    background-color: rgb(var(--color-primary));
}

.section__bg-tint--primary-active {
    background-color: rgb(var(--color-primary-active));
}

.section__bg-tint--secondary {
    background-color: rgb(var(--color-secondary));
}

.section__bg-tint--secondary-active {
    background-color: rgb(var(--color-secondary-active));
}

.section__bg-tint--background {
    background-color: rgb(var(--color-background));
}

.section__bg-tint--surface {
    background-color: rgb(var(--color-surface));
}

.section__bg-tint--surface-alt {
    background-color: rgb(var(--color-surface-alt));
}

.section__bg-tint--text {
    background-color: rgb(var(--color-text));
}

.section--has-bg-image .section__container {
    position: relative;
    z-index: 1;
}

/* Background blobs */
.section--accent-blob-top,
.section--accent-blob-right,
.section--accent-blob-bottom,
.section--accent-blob-left {
    z-index: 0;
}

.section--accent-blob-top::after,
.section--accent-blob-right::after,
.section--accent-blob-bottom::after,
.section--accent-blob-left::after {
    --scale: 1;
    content: '';
    position: absolute;
    width: 50%;
    height: 50%;
    background-color: rgb(var(--color-primary) / 0.15);
    border-radius: var(--radius-full);
    filter: blur(calc(5vw + 5vh));
    z-index: -1;
}

.section--accent-blob-top::after {
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%) scale(var(--scale));
}

.section--accent-blob-right::after {
    top: 50%;
    left: 100%;
    transform: translate(-50%, -50%) scale(var(--scale));
}

.section--accent-blob-bottom::after {
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 50%) scale(var(--scale));
}

.section--accent-blob-left::after {
    top: 50%;
    right: 100%;
    transform: translate(50%, -50%) scale(var(--scale));
}

@media (max-width: 768px) {
    .section--accent-blob-top::after,
    .section--accent-blob-right::after,
    .section--accent-blob-bottom::after,
    .section--accent-blob-left::after {
        --scale: 2;
    }
}


/* Slots */
.section__header--center {
    text-align: center;
}

.section__header--right {
    text-align: right;
}

.section__header .badge {
    margin-bottom: var(--spacing-4);
    background: rgb(var(--color-surface));
    border: solid 1px rgb(var(--color-border));
}

/* Divider modifiers - Top */
section:not(:first-child).section--divider-top {
    padding-top: 0;
}

section:not(:first-child).section--divider-top > .section__container {
    position: relative;
}

section:not(:first-child).section--divider-top.section--padding-xl > .section__container {
    padding-top: var(--spacing-24);
}

section:not(:first-child).section--divider-top.section--padding-lg > .section__container {
    padding-top: var(--spacing-16);
}

section:not(:first-child).section--divider-top.section--padding-md > .section__container {
    padding-top: var(--spacing-12);
}

section:not(:first-child).section--divider-top > .section__container::before {
    content: '';
    position: absolute;
    left: var(--spacing-4);
    right: var(--spacing-4);
    top: 0;
    border-top: solid 1px rgb(var(--color-border));
}

/* Divider modifiers - Bottom */
section:not(:first-child).section--divider-bottom {
    padding-bottom: 0;
}

section:not(:first-child).section--divider-bottom > .section__container {
    position: relative;
}

section:not(:first-child).section--divider-bottom.section--padding-xl > .section__container {
    padding-bottom: var(--spacing-24);
}

section:not(:first-child).section--divider-bottom.section--padding-lg > .section__container {
    padding-bottom: var(--spacing-16);
}

section:not(:first-child).section--divider-bottom.section--padding-md > .section__container {
    padding-bottom: var(--spacing-12);
}

section:not(:first-child).section--divider-bottom > .section__container::after {
    content: '';
    position: absolute;
    left: var(--spacing-8);
    right: var(--spacing-8);
    bottom: 0;
    border-bottom: solid 1px rgb(var(--color-border));
}

section:first-child.section--divider-bottom {
    border-bottom: 1px solid rgb(var(--color-border));
}

@media (max-width: 768px) {
    section:not(:first-child).section--divider-top > .section__container::before,
    section:not(:first-child).section--divider-bottom > .section__container::after {
        left: var(--spacing-6);
        right: var(--spacing-6);
    }
}

/* ============================================
   SECTION COLUMNS
   ============================================ */

.section__column {
    display: flex;
    flex-direction: column;
    min-width: 0; /* Prevent overflow in flex children */
}

/* Column background image */
.section__column--has-bg-image {
    position: relative;
}

.section__column-bg-wrapper {
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    display: flex;
    align-items: flex-end;
}

.section__column-bg-image {
    width: 100%;
    height: 100%;
    border-radius: var(--radius-xl);
    /* object-fit and object-position set via inline styles from ACF fields */
}

.section__column--has-bg-image > *:not(.section__column-bg-wrapper) {
    position: relative;
    z-index: 1;
}

#hero.section--stand-out-col-image {
    border-bottom: solid 1px rgb(var(--color-border));
}

/* Stand-out column image variant (desktop only) */
@media (min-width: 769px) {
    .section--stand-out-col-image .section__column--has-bg-image {
        position: unset;
    }
    
    .section--stand-out-col-image .section__column-bg-wrapper {
        left: 50%;
        bottom: 0;
    }

    .section__column-bg-image {
        height: calc(100% - var(--header-height));
    }
}

@media (max-width: 768px) {
    .section--stand-out-col-image {
        padding-bottom: 0 !important;
    }
    
    section:not(.section--stand-out-col-image) .section__column--has-bg-image {
        min-height: 200px;
        order: -1;
    }
    
    .section--stand-out-col-image .section__column--has-bg-image {
        min-height: 200px;
        order: 10;
    }
}


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

.section-cta {
    position: relative;
    padding-top: var(--spacing-24);
    padding-bottom: var(--spacing-24);
    overflow: hidden;
    font-family: var(--font-family-base);
}

.section-cta--bg-default {
    background-color: rgb(var(--color-background));
}

.section-cta--bg-surface {
    background-color: rgb(var(--color-surface));
}

.section-cta__bg-glow {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 75vw;
    height: 100%;
    background-color: rgb(var(--color-primary) / 0.1);
    border-radius: var(--radius-full);
    filter: blur(120px);
    z-index: 0;
}

.section-cta__container {
    position: relative;
    z-index: 1;
    max-width: 56rem;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--spacing-4);
    padding-right: var(--spacing-4);
}

.section-cta__content {
    text-align: center;
}

.section-cta__title {
    font-family: var(--font-family-heading);
    font-size: var(--text-fluid-xl);
    font-weight: var(--font-bold);
    color: rgb(var(--color-text));
    margin: 0 0 var(--spacing-6) 0;
}

@media (min-width: 1024px) {
    .section-cta__title {
        font-size: var(--text-fluid-xl);
    }
}

.section-cta__description {
    font-family: var(--font-family-base);
    font-size: var(--text-xl);
    line-height: var(--leading-relaxed);
    color: rgb(var(--color-text-muted));
    margin: 0 0 var(--spacing-10) 0;
    max-width: 42rem;
    margin-left: auto;
    margin-right: auto;
}

.section-cta__buttons {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
    justify-content: center;
    margin-bottom: var(--spacing-12);
}

@media (min-width: 640px) {
    .section-cta__buttons {
        flex-direction: row;
    }
}

.section-cta__buttons .button {
    padding: var(--spacing-4) var(--spacing-10);
    font-size: var(--text-lg);
}

.section-cta__features {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-6);
    color: rgb(var(--color-text-muted));
}

.section-cta__feature {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

.section-cta__feature-icon {
    color: rgb(var(--color-primary));
}

.section-cta__feature span {
    font-family: var(--font-family-base);
    font-size: var(--text-sm);
}

.section-cta__feature-separator {
    display: none;
    width: 4px;
    height: 4px;
    border-radius: var(--radius-full);
    background-color: rgb(var(--color-text-muted));
}

@media (min-width: 640px) {
    .section-cta__feature-separator {
        display: block;
    }
}


/* ============================================================================
   TABLE OF CONTENTS COMPONENT
   ============================================================================ */

.toc {
    width: 14rem;
}

.toc--sticky {
    position: fixed;
    left: var(--spacing-8);
    top: 50%;
    transform: translateY(-50%);
    z-index: var(--z-sticky);
}

.toc__nav {
    --bg-opacity: var(--blur-opacity);
    background-color: rgb(var(--color-surface) / var(--bg-opacity));
    backdrop-filter: blur(var(--blur));
    border: 1px solid rgb(var(--color-border));
    border-radius: var(--radius-xl);
    padding: var(--spacing-4);
    font-family: var(--font-family-base);
}

.toc__title {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    line-height: var(--leading-tight);
    color: rgb(var(--color-text-muted));
    margin: 0 0 var(--spacing-3) 0;
}

.toc__title-icon {
    flex-shrink: 0;
}

.toc__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-1);
}

.toc__item {
    /* Item styles */
}

.toc__link {
    display: block;
    padding: var(--spacing-1-5) var(--spacing-3);
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    color: rgb(var(--color-text-muted));
    text-decoration: none;
    border-radius: var(--radius-md);
    transition: color var(--transition-fast),
                background-color var(--transition-fast);
}

.toc__link:hover {
    color: rgb(var(--color-text));
    background-color: rgb(var(--color-surface-alt));
}

.toc__link--active {
    color: rgb(var(--color-primary-active));
    background-color: rgb(var(--color-primary-light) / calc(var(--bg-opacity) + 0.1));
}

.toc__link--active:hover {
    color: rgb(var(--color-primary));
    background-color: rgb(var(--color-primary-light));
}


/* ============================================================================
   HEADING COMPONENT
   ============================================================================ */

/**
 * Heading
 * 
 * Semantic heading styles with BEM naming.
 * Sizes: display, hero, section, subsection, card, label
 * Decorations: gradient, underline
 */

/* Base */
.heading {
    font-family: var(--font-family-heading);
    font-weight: var(--font-bold);
    line-height: var(--leading-tight);
    color: rgb(var(--color-text-no-bg));
    margin: 0;
    letter-spacing: var(--tracking-tight);
}

/* Size Variants */
.heading--display {
    font-size: var(--text-fluid-3xl);
    line-height: var(--leading-none);
    letter-spacing: -0.03em;
}

.heading--hero {
    font-size: var(--text-fluid-2xl);
    line-height: var(--leading-none);
    letter-spacing: -0.025em;
}

.heading--section {
    font-size: var(--text-fluid-xl);
    line-height: var(--leading-tight);
}

.heading--subsection {
    font-size: var(--text-fluid-lg);
    font-weight: var(--font-bold);
    line-height: var(--leading-tight);
}

.heading--card {
    font-size: var(--text-xl);
    font-weight: var(--font-semibold);
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-normal);
}

.heading--label {
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: rgb(var(--color-text-muted-no-bg));
    line-height: var(--leading-normal);
}

/* Alignment */
.heading--center {
    text-align: center;
}

.heading--right {
    text-align: right;
}

/* Weight Overrides */
.heading--normal {
    font-weight: var(--font-normal);
}

.heading--medium {
    font-weight: var(--font-medium);
}

.heading--semibold {
    font-weight: var(--font-semibold);
}

.heading--bold {
    font-weight: var(--font-bold);
}

/* Decorations */
.heading__gradient {
    background: linear-gradient(134deg,
        rgb(var(--color-primary-active)),
        rgb(var(--color-primary))
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.heading__underline {
    position: relative;
    display: inline;
}

.heading__underline::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0.05em;
    height: 0.11em;
    background: linear-gradient(
        135deg,
        rgb(var(--color-primary-hover)) 0%,
        rgb(var(--color-primary-active)) 100%
    );
    border-radius: var(--radius-full);
}

/* Green Dot (brand element) */
.heading--green-dot > .heading__word-wrap:last-child {
    white-space: nowrap;
}

.heading--green-dot > .heading__word-wrap:last-child::after {
    color: rgb(var(--color-primary));
    content: '.';
    font-family: sans-serif;
    font-size: 1.2em;
    line-height: 0.9em;
    margin-left: 0.05em;
}

/* Green dot fade-in when used with word reveal */
[data-reveal-words].heading--green-dot > .heading__word-wrap:last-child::after {
    opacity: 0;
    transition: opacity 0.4s ease-out;
    transition-delay: calc(var(--reveal-base-delay) + 0.3s);
}

[data-reveal-words].heading--green-dot.reveal--visible > .heading__word-wrap:last-child::after {
    opacity: 1;
}

/* Heading Group (with subtitle) */
.heading-group {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
}

.heading-group--center {
    align-items: center;
    text-align: center;
}

.heading-group--right {
    align-items: flex-end;
    text-align: right;
}

.heading-group__subtitle {
    font-family: var(--font-family-base);
    font-size: var(--text-lg);
    font-weight: var(--font-normal);
    color: rgb(var(--color-text-muted-no-bg));
    line-height: var(--leading-relaxed);
    margin: 0;
    max-width: 60ch;
}


/* ============================================================================
   GRID UTILITY CLASSES (Page Builder)
   ============================================================================ */

/**
 * Grid Layout Utility
 * 
 * Used by the page builder to arrange components in responsive grids.
 * Follows a mobile-first approach with auto-fit for smaller screens.
 */

.grid {
    display: grid;
    gap: var(--spacing-4);
    font-family: var(--font-family-base);
}

/* Gap variations */
.grid--gap-sm {
    gap: var(--spacing-2);
}

.grid--gap-md {
    gap: var(--spacing-4);
}

.grid--gap-lg {
    gap: var(--spacing-6);
}

.grid--gap-xl {
    gap: var(--spacing-8);
}

/* Column variations - fixed counts that collapse on mobile */
.grid--cols-1 {
    grid-template-columns: 1fr;
}

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

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

.grid--cols-4 {
    grid-template-columns: repeat(4, 1fr);
}

.grid--cols-5 {
    grid-template-columns: repeat(5, 1fr);
}

.grid--cols-6 {
    grid-template-columns: repeat(6, 1fr);
}

/* Responsive grid - collapse on tablet */
@media (max-width: 1024px) {
    .grid--cols-5,
    .grid--cols-6 {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Responsive grid - collapse on mobile */
@media (max-width: 768px) {
    .grid--cols-2,
    .grid--cols-3 {
        grid-template-columns: 1fr;
    }
    
    .grid--cols-4,
    .grid--cols-5,
    .grid--cols-6 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Alignment utilities */
.grid--items-start {
    align-items: start;
}

.grid--items-center {
    align-items: center;
}

.grid--items-end {
    align-items: end;
}


/* ============================================================================
   PAGE BUILDER UTILITIES
   ============================================================================ */

/**
 * Button Group Layout
 */

.button-group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-3);
    font-family: var(--font-family-base);
}

.button-group--center {
    justify-content: center;
}

.button-group--right {
    justify-content: flex-end;
}


/**
 * Badge Group Layout
 */

.badge-group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-2);
    font-family: var(--font-family-base);
}


/**
 * Tag Group Layout
 */

.tag-group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-2);
    font-family: var(--font-family-base);
}


/**
 * Spacer Component
 */

.spacer {
    display: block;
}

/* Desktop sizes (default) */
.spacer--0 {
    height: 0;
}

.spacer--xs {
    height: var(--spacing-2);
}

.spacer--sm {
    height: var(--spacing-4);
}

.spacer--md {
    height: var(--spacing-6);
}

.spacer--lg {
    height: var(--spacing-8);
}

.spacer--xl {
    height: var(--spacing-12);
}

.spacer--2xl {
    height: var(--spacing-16);
}

.spacer--grow {
    flex-grow: 1;
    min-height: 0;
    height: auto;
}

.spacer--hide {
    display: none;
}

/* Used for paragraphs to add vertical spacing between them in */
.spacer--paragraph {
    display: block;
    height: 0.75em;
}

/* Mobile size overrides */
@media (max-width: 768px) {
    .spacer--m-0 {
        height: 0;
    }

    .spacer--m-xs {
        height: var(--spacing-2);
    }

    .spacer--m-sm {
        height: var(--spacing-4);
    }

    .spacer--m-md {
        height: var(--spacing-6);
    }

    .spacer--m-lg {
        height: var(--spacing-8);
    }

    .spacer--m-xl {
        height: var(--spacing-12);
    }

    .spacer--m-2xl {
        height: var(--spacing-16);
    }

    .spacer--m-grow {
        flex-grow: 1;
        min-height: 0;
        height: auto;
    }

    .spacer--m-hide {
        display: none;
    }
}


/**
 * Builder Image Component
 */

.builder-image {
    margin: 0;
    position: relative;
    min-height: 200px;
    height: 100%;
}

.builder-image img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--radius-lg);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.builder-image figcaption {
    font-family: var(--font-family-base);
    font-size: var(--text-sm);
    color: rgb(var(--color-text-muted));
    margin-top: var(--spacing-2);
    text-align: center;
}

/* Display Width variations */
.builder-image--width-full,
.builder-image--width-full img {
    width: 100%;
}

.builder-image--width-lg {
    max-width: 800px;
}

.builder-image--width-md {
    max-width: 600px;
}

.builder-image--width-sm {
    max-width: 400px;
}

.builder-image--width-auto {
    max-width: fit-content;
}

/* Display Height variations */
.builder-image--height-full,
.builder-image--height-full img {
    height: 100%;
}

.builder-image--height-lg,
.builder-image--height-lg img {
    height: 500px;
}

.builder-image--height-md,
.builder-image--height-md img {
    height: 400px;
}

.builder-image--height-sm,
.builder-image--height-sm img {
    height: 300px;
}

.builder-image--height-auto img {
    max-height: fit-content;
}

/* When height is constrained (not full), let width be auto */
.builder-image--has-height img {
    width: auto;
    max-width: 100%;
}

/* Object Fit variations */
.builder-image--fit-cover img {
    object-fit: cover;
}

.builder-image--fit-contain img {
    object-fit: contain;
}

.builder-image--fit-fill img {
    object-fit: fill;
}

.builder-image--fit-none img {
    object-fit: none;
}

.builder-image--fit-scale-down img {
    object-fit: scale-down;
}

/* Aspect ratio variations */
.builder-image--ratio-1-1 img {
    aspect-ratio: 1 / 1;
}

.builder-image--ratio-4-3 img {
    aspect-ratio: 4 / 3;
}

.builder-image--ratio-16-9 img {
    aspect-ratio: 16 / 9;
}

.builder-image--ratio-21-9 img {
    aspect-ratio: 21 / 9;
}


/**
 * Prose (Rich Text Styling)
 */

.prose {
    font-family: var(--font-family-base);
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
    color: rgb(var(--color-text-no-bg));
}

.prose > * + * {
    margin-top: var(--spacing-4);
}

.prose h1,
.prose h2,
.prose h3,
.prose h4,
.prose h5,
.prose h6 {
    font-weight: var(--font-bold);
    line-height: var(--leading-tight);
    margin-top: 1.8em;
    margin-bottom: 0.6em;
}

.prose h1 { font-size: var(--text-4xl); }
.prose h2 { font-size: var(--text-3xl); }
.prose h3 { font-size: var(--text-2xl); }
.prose h4 { font-size: var(--text-xl); }
.prose h5 { font-size: var(--text-lg); }
.prose h6 { font-size: var(--text-base); }

.prose p {
    margin: 0;
}

.prose p:not(:last-child) {
    margin: 0 0 var(--spacing-4) 0;
}

.prose ul,
.prose ol {
    padding-left: var(--spacing-6);
    margin-top: var(--spacing-4);
}

.prose li {
    margin-top: var(--spacing-2);
}

.prose a {
    color: rgb(var(--color-primary-active));
    text-decoration: underline;
    text-underline-offset: 2px;
}

.prose a:hover {
    color: rgb(var(--color-primary-hover));
}

.prose blockquote {
    border-left: 4px solid rgb(var(--color-primary));
    padding-left: var(--spacing-4);
    margin: var(--spacing-6) 0;
    font-style: italic;
    color: rgb(var(--color-text-muted-no-bg));
}

.prose img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-lg);
}

.prose code {
    font-family: var(--font-family-mono);
    font-size: 0.875em;
    background-color: rgb(var(--color-surface-alt));
    padding: 0.125em 0.25em;
    border-radius: var(--radius-sm);
}

.prose pre {
    background-color: rgb(var(--color-surface-alt));
    padding: var(--spacing-4);
    border-radius: var(--radius-lg);
    overflow-x: auto;
    font-family: var(--font-family-mono);
    font-size: var(--text-sm);
}

.prose pre code {
    background: none;
    padding: 0;
}

.prose table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--spacing-6) 0;
}

.prose th,
.prose td {
    border: 1px solid rgb(var(--color-border));
    padding: var(--spacing-3);
    text-align: left;
}

.prose th {
    background-color: rgb(var(--color-surface-alt));
    font-weight: var(--font-semibold);
}

/* Size variants */
.prose--lg {
    font-size: var(--text-lg);
}

@media (min-width: 768px) {
    .prose--lg {
        font-size: var(--text-xl);
    }
}

/**
 * Page Builder Empty State
 */

.page-builder__empty {
    text-align: center;
    padding: var(--spacing-16);
    color: rgb(var(--color-text-muted));
}

.page-builder__empty a {
    color: rgb(var(--color-primary));
    text-decoration: underline;
}


/* ============================================================================
   IMAGE GROUP COMPONENT
   ============================================================================ */

.image-group {
    display: flex;
    flex-wrap: wrap;
    font-family: var(--font-family-base);
}

/* Direction variants */
.image-group--horizontal {
    flex-direction: row;
}

.image-group--vertical {
    flex-direction: column;
}

/* Gap variants */
.image-group--gap-none {
    gap: 0;
}

.image-group--gap-xs {
    gap: var(--spacing-2);
}

.image-group--gap-sm {
    gap: var(--spacing-4);
}

.image-group--gap-md {
    gap: var(--spacing-6);
}

.image-group--gap-lg {
    gap: var(--spacing-8);
}

.image-group--gap-xl {
    gap: var(--spacing-12);
}

/* Justify variants */
.image-group--justify-start {
    justify-content: flex-start;
}

.image-group--justify-center {
    justify-content: center;
}

.image-group--justify-end {
    justify-content: flex-end;
}

.image-group--justify-between {
    justify-content: space-between;
}

.image-group--justify-around {
    justify-content: space-around;
}

.image-group--justify-evenly {
    justify-content: space-evenly;
}

/* Align variants */
.image-group--align-start {
    align-items: flex-start;
}

.image-group--align-center {
    align-items: center;
}

.image-group--align-end {
    align-items: flex-end;
}

.image-group--align-stretch {
    align-items: stretch;
}

/* Image item */
.image-group__item {
    flex-shrink: 0;
    max-width: var(--image-group-max-width, none);
    max-height: var(--image-group-max-height, none);
}

.image-group__item img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: var(--image-group-max-width, none);
    max-height: var(--image-group-max-height, none);
}

/* Object fit variants */
.image-group--fit-cover .image-group__item img {
    object-fit: cover;
}

.image-group--fit-contain .image-group__item img {
    object-fit: contain;
}

/* When stretch is used with max-height, ensure images fill */
.image-group--align-stretch .image-group__item {
    display: flex;
}

.image-group--align-stretch .image-group__item img {
    flex: 1;
}

/* Linked images */
.image-group__link {
    display: block;
    text-decoration: none;
    transition: opacity var(--transition-fast);
}

.image-group__link:hover {
    opacity: 0.8;
}

.image-group__link:focus-visible {
    outline: 2px solid rgb(var(--color-primary));
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}


/* ============================================================================
   EFFEKTPILOT DEMO COMPONENT
   ============================================================================ */

/**
 * Effektpilot Demo
 * 
 * Interactive visualization showing EV charging optimization.
 * Uses GSAP for animations.
 */

.effektpilot-demo {
    --effektpilot-timeline-height: 280px;
    --effektpilot-car-height: 6px;
    --effektpilot-car-gap: 28px;
    --effektpilot-dot-size: 18px;
    --effektpilot-center: 50; /* 18:00 is centered at 50% */

    display: flex;
    flex-direction: column;
    gap: var(--spacing-6);
    font-family: var(--font-family-base);
    max-width: 100%;
}

/* Toggle */
.effektpilot-demo__toggle {
    display: flex;
    gap: var(--spacing-2);
    padding: var(--spacing-1);
    background-color: rgb(var(--color-info-light) / var(--bg-opacity));
    border-radius: var(--radius-full);
    width: fit-content;
    align-self: center;
}

.effektpilot-demo__toggle-btn {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-2) var(--spacing-4);
    border: none;
    border-radius: var(--radius-full);
    background: transparent;
    color: rgb(var(--color-text-muted));
    font-family: var(--font-family-base);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    cursor: pointer;
    transition: background-color var(--transition-fast),
                color var(--transition-fast);
}

.effektpilot-demo__toggle-btn:hover {
    color: rgb(var(--color-text));
}

.effektpilot-demo__toggle-btn--active {
    background-color: rgb(var(--color-surface) / var(--bg-opacity));
    color: rgb(var(--color-text));
}

.effektpilot-demo__toggle-btn--active[data-effektpilot-mode="on"] {
    background: rgb(var(--color-primary) / var(--bg-opacity));
    color: rgb(var(--color-primary-contrast));
}

.effektpilot-demo__toggle-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.effektpilot-demo__toggle-label {
    white-space: nowrap;
}

/* Alert container */
.effektpilot-demo__alerts {
    position: relative;
    min-height: 48px;
}

/* Alert messages (danger/success) */
.effektpilot-demo__alert {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-3) var(--spacing-4);
    border-radius: var(--radius-lg);
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    color: rgb(var(--color-text));
    transition: opacity var(--transition-base), transform var(--transition-base);
}

.effektpilot-demo__alert[aria-hidden="true"] {
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}

.effektpilot-demo__alert--danger {
    background-color: rgb(var(--color-danger-light) / var(--bg-opacity));
    border: 1px solid rgb(var(--color-danger) / 0.3);
}

.effektpilot-demo__alert--success {
    background-color: rgb(var(--color-success-light) / var(--bg-opacity));
    border: 1px solid rgb(var(--color-success) / 0.3);
}

.effektpilot-demo__alert-icon {
    flex-shrink: 0;
}

.effektpilot-demo__alert--danger .effektpilot-demo__alert-icon {
    color: rgb(var(--color-danger));
}

.effektpilot-demo__alert--success .effektpilot-demo__alert-icon {
    color: rgb(var(--color-success));
}

.effektpilot-demo__alert-text strong {
    font-weight: var(--font-semibold);
}

.effektpilot-demo__alert--danger .effektpilot-demo__alert-text strong {
    color: rgb(var(--color-danger));
}

.effektpilot-demo__alert--success .effektpilot-demo__alert-text strong {
    color: rgb(var(--color-success));
}

/* Hide danger, show success when active */
.effektpilot-demo--active .effektpilot-demo__alert--danger {
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}

.effektpilot-demo--active .effektpilot-demo__alert--success {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    position: relative;
}

/* Timeline */
.effektpilot-demo__timeline {
    position: relative;
    height: var(--effektpilot-timeline-height);
}

/* Fade edges */
.effektpilot-demo__timeline::before,
.effektpilot-demo__timeline::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 35%;
    z-index: 2;
    pointer-events: none;
}

.effektpilot-demo__timeline::before {
    left: 0;
    background: linear-gradient(to right, 
        rgb(var(--color-background)) 0%, 
        rgb(var(--color-background)) 28%, 
        transparent 100%);
}

.effektpilot-demo__timeline::after {
    right: 0;
    background: linear-gradient(to left, 
        rgb(var(--color-background)) 0%, 
        rgb(var(--color-background)) 28%, 
        transparent 100%);
}


/* Time marker */
.effektpilot-demo__time-marker {
    position: absolute;
    left: calc(var(--effektpilot-center) * 1%);
    top: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 1;
    transform: translateX(-50%);
}

.effektpilot-demo__time-label {
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    color: rgb(var(--color-text-muted));
    padding: var(--spacing-1) var(--spacing-2);
    background-color: rgb(var(--color-info-light));
    border-radius: var(--radius-base);
    margin-bottom: var(--spacing-2);
}

.effektpilot-demo__time-line {
    flex: 1;
    width: 1px;
    background-color: rgb(var(--color-info-light));
}

/* Cars container */
.effektpilot-demo__cars {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--effektpilot-car-gap);
    padding-top: var(--spacing-10);
}

/* Individual car */
.effektpilot-demo__car {
    position: relative;
    height: var(--effektpilot-car-height);
    margin-left: calc(var(--car-start) * 1%);
    width: calc(var(--car-width) * 1%);
}

/* Car parking line (background - connected but not charging) */
.effektpilot-demo__car-line {
    position: absolute;
    inset: 0;
    background-color: rgb(var(--color-info) / 0.25);
    border-radius: var(--radius-full);
}

/* Car charging portion */
.effektpilot-demo__car-charge {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 38%;
    background-color: rgb(var(--color-danger));
    border-radius: var(--radius-full);
    transition: width 0.6s ease-out, background-color var(--transition-slow);
}

/* Warning type car - uses warning color instead of danger */
.effektpilot-demo__car--warning .effektpilot-demo__car-charge {
    background-color: rgb(var(--color-warning));
}

.effektpilot-demo__car--warning .effektpilot-demo__car-dot {
    background-color: rgb(var(--color-warning));
}

/* Effektpiloten active state - green and wider */
.effektpilot-demo--active .effektpilot-demo__car-charge {
    width: 85%;
    background-color: rgb(var(--color-primary));
}

/* Override warning color when active too */
.effektpilot-demo--active .effektpilot-demo__car--warning .effektpilot-demo__car-charge {
    background-color: rgb(var(--color-primary));
}

/* Danger dot with exclamation mark - positioned at 18:00 crossing point */
.effektpilot-demo__car-dot {
    position: absolute;
    top: 50%;
    left: calc((var(--effektpilot-center) - var(--car-start)) / var(--car-width) * 100%);
    width: var(--effektpilot-dot-size);
    height: var(--effektpilot-dot-size);
    background-color: rgb(var(--color-danger));
    border-radius: var(--radius-full);
    transform: translate(-50%, -50%);
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity var(--transition-base), transform var(--transition-base);
}

.effektpilot-demo__car-dot-icon {
    color: rgb(255 255 255);
    font-size: calc(var(--effektpilot-dot-size) * 0.7);
    font-weight: var(--font-bold);
    line-height: 1;
    user-select: none;
}

/* Hide dots when active */
.effektpilot-demo--active .effektpilot-demo__car-dot {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.5);
}

/* Loading animation pulse */
.effektpilot-demo__car-charge--loading {
    animation: effektpilot-pulse 0.6s ease-in-out infinite;
}

@keyframes effektpilot-pulse {
    0%, 100% {
        opacity: 0.4;
    }
    50% {
        opacity: 1;
    }
}

/* Responsive adjustments */
@media (max-width: 480px) {
    .effektpilot-demo {
        --effektpilot-timeline-height: 240px;
        --effektpilot-car-height: 5px;
        --effektpilot-car-gap: 22px;
        --effektpilot-dot-size: 14px;
    }

    .effektpilot-demo__toggle-label {
        font-size: var(--text-xs);
    }


    .effektpilot-demo__success {
        flex-direction: column;
        text-align: center;
    }
}


/* ============================================================================
   EFFEKTKAPNING COMPONENT
   ============================================================================ */

/**
 * Effektkapning - Power Peak Visualization
 * 
 * Interactive SVG graph showing contrast between uncontrolled peak charging
 * and smart charging. Features smooth morphing animation, dot grid background,
 * animated limit line, and "saved area" visualization.
 */

.effektkapning {
    width: 100%;
    max-width: 650px;
    text-align: center;
}

.effektkapning__chart {
    position: relative;
}

.effektkapning__svg {
    width: 100%;
    height: auto;
    display: block;
    overflow: visible;
}

/* Dot grid background */
.effektkapning__grid {
    opacity: 0;
    clip-path: inset(100% 0 0 0);
    transition: opacity 0.6s ease;
}

.effektkapning--animated .effektkapning__grid {
    opacity: 0.5;
    animation: effektkapning-grid-reveal 1.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes effektkapning-grid-reveal {
    0% {
        clip-path: inset(100% 0 0 0);
        opacity: 0;
    }
    20% {
        opacity: 0.5;
    }
    100% {
        clip-path: inset(0 0 0 0);
        opacity: 0.5;
    }
}

/* Saved area (between old and new peak) - JS controls opacity */
.effektkapning__saved-area {
    opacity: 0;
}

/* Limit line (at peak level) */
.effektkapning__limit {
    stroke: rgb(var(--color-danger));
    stroke-width: 2;
    stroke-dasharray: 8, 4;
}

/* Area fills - fade in on scroll */
.effektkapning__area {
    opacity: 0;
    transition: opacity 1s cubic-bezier(0.4, 0, 0.2, 1);
    transition-delay: 0.8s;
}

/* Glow layer - follows stroke animation */
.effektkapning__glow {
    stroke-dasharray: var(--path-length, 1400);
    stroke-dashoffset: var(--path-length, 1400);
    transition: stroke-dashoffset 2s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Main stroke - draws in with smooth easing */
.effektkapning__stroke {
    stroke-dasharray: var(--path-length, 1400);
    stroke-dashoffset: var(--path-length, 1400);
    transition: stroke-dashoffset 2s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Dots - pop in with bounce after curve draws */
.effektkapning__dot {
    opacity: 0;
    transform: scale(0);
    transform-origin: center;
    transform-box: fill-box;
}

/* ===== ANIMATED STATE ===== */

.effektkapning--animated .effektkapning__area {
    opacity: 1;
}

.effektkapning--animated .effektkapning__glow,
.effektkapning--animated .effektkapning__stroke {
    stroke-dashoffset: 0;
}

.effektkapning--animated .effektkapning__dot {
    opacity: 1;
    transform: scale(1);
    transition: opacity 0.3s ease 1.8s, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 1.8s;
    animation: effektkapning-dot-pulse 2.5s ease-in-out infinite 2.3s;
}

@keyframes effektkapning-dot-pulse {
    0%, 100% { 
        transform: scale(1);
    }
    50% { 
        transform: scale(1.25);
    }
}

/* ===== STAGGER TIMING ===== */

/* Base curve */
.effektkapning__curve--base .effektkapning__glow,
.effektkapning__curve--base .effektkapning__stroke {
    transition-delay: 0s;
}

.effektkapning__curve--base .effektkapning__area {
    transition-delay: 0.6s;
}

/* Morph curve - slightly delayed */
.effektkapning__curve--morph .effektkapning__glow,
.effektkapning__curve--morph .effektkapning__stroke {
    transition-delay: 0.15s;
}

.effektkapning__curve--morph .effektkapning__area {
    transition-delay: 0.75s;
}

.effektkapning__curve--morph .effektkapning__dot {
    transition-delay: 1.8s;
    animation-delay: 2.3s;
}

/* ===== BADGES ===== */

.effektkapning__badge {
    position: absolute;
    left: calc(100% + var(--spacing-2));
    transform: translateY(-50%);
    opacity: 0;
    transition: opacity 0.3s ease;
    transition-delay: 2.2s;
    white-space: nowrap;
    z-index: 10;
}

.effektkapning--animated .effektkapning__badge--peak {
    opacity: 1;
}

.effektkapning__badge--smart {
    opacity: 0;
}

@media (max-width: 768px) {
    .effektkapning__badge {
        left: 50% !important;
        top: 0 !important;
        transform: translate(-50%, -50%) !important;
    }
}

/* ===== BUTTON ===== */

.effektkapning > .button {
    margin-top: var(--spacing-6);
}

/* Hide config script */
.effektkapning__config {
    display: none;
}


/* ============================================================================
   LADDOPTIMERING (Charging Optimization Visualization)
   ============================================================================ */

/**
 * Laddoptimering
 * 
 * Interactive visualization with GSAP-powered yoyo animation showing 
 * how smart charging spreads power over more time at lower kW.
 * Animation: short/high-power block expands to long/low-power block.
 */

.laddoptimering {
    /* Timeline: 17:00 to 06:00 = 13 hours */
    --laddoptimering-track-height: 56px;
    --laddoptimering-danger-width: 21.4%; /* 3h of 13h = ~23% */
    --laddoptimering-optimized-width: 80%; /* 17:00 to just before 06:00 */
    --laddoptimering-deadline-position: 93%; /* 06:00 position */
    --laddoptimering-glow-size: 12px;
    
    display: flex;
    flex-direction: column;
    gap: var(--spacing-6);
    font-family: var(--font-family-base);
}

/* Track container */
.laddoptimering__track-container {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
}

/* The timeline track (pill-shaped) */
.laddoptimering__track {
    position: relative;
    height: var(--laddoptimering-track-height);
    background-color: rgb(var(--color-surface));
    border-radius: var(--radius-full);
    border: 1px solid rgb(var(--color-info-light));
    overflow: visible;
}

/* Warning zone (left portion with red gradient) */
.laddoptimering__warning-zone {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--laddoptimering-danger-zone);
    background: linear-gradient(
        to right,
        rgb(var(--color-danger) / 0.2) 0%,
        rgb(var(--color-danger) / 0.08) 70%,
        transparent 100%
    );
    border-radius: var(--radius-full) 0 0 var(--radius-full);
    pointer-events: none;
}

/* Deadline marker (06:00 - when user needs to leave) */
.laddoptimering__deadline-marker {
    position: absolute;
    left: var(--laddoptimering-deadline-position);
    top: calc(-1 * var(--spacing-6));
    bottom: calc(-1 * var(--spacing-1));
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 5;
    transform: translateX(-50%);
}

.laddoptimering__deadline-line {
    flex: 1;
    width: 2px;
    background-color: rgb(var(--color-info));
    border-radius: var(--radius-full);
}

.laddoptimering__deadline-label {
    position: absolute;
    top: 0;
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    color: rgb(var(--color-info));
    white-space: nowrap;
    transform: translateY(-100%);
    padding-bottom: var(--spacing-1);
}

/* The charging block (animated actor) */
.laddoptimering__block {
    position: absolute;
    top: var(--spacing-2);
    bottom: var(--spacing-2);
    left: var(--spacing-2);
    width: var(--laddoptimering-danger-width);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-1);
    background-color: rgb(var(--color-danger));
    border-radius: var(--radius-2xl);
    color: rgb(255 255 255);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    box-shadow: 0 0 var(--laddoptimering-glow-size) rgb(var(--color-danger) / 0.4);
    overflow: hidden;
    /* Smooth transitions */
    transition: width 0.6s cubic-bezier(0.25, 0.1, 0, 1),
                background-color 0.6s cubic-bezier(0.25, 0.1, 0, 1),
                box-shadow 0.6s cubic-bezier(0.25, 0.1, 0, 1),
                color 0.4s cubic-bezier(0.25, 0.1, 0, 1);
}

.laddoptimering__block-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.laddoptimering__block-icon > svg {
    width: 1.25rem;
    height: 1.25rem;
}

.laddoptimering__block-text {
    white-space: nowrap;
}

/* Idle block (fills space between charge and deadline) */
.laddoptimering__idle {
    position: absolute;
    top: var(--spacing-2);
    bottom: var(--spacing-2);
    /* Position: starts after charge block, ends at deadline */
    left: calc(var(--laddoptimering-danger-width) + var(--spacing-2) + var(--spacing-1));
    right: calc(100% - var(--laddoptimering-deadline-position) + var(--spacing-2));
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-1);
    background-color: rgb(var(--color-info) / 0.15);
    border: 1px dashed rgb(var(--color-info) / 0.4);
    border-radius: var(--radius-xl);
    color: rgb(var(--color-info));
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    overflow: hidden;
    transition: left 0.6s cubic-bezier(0.25, 0.1, 0, 1),
                background-color 0.4s cubic-bezier(0.25, 0.1, 0, 1),
                border-color 0.4s cubic-bezier(0.25, 0.1, 0, 1),
                color 0.4s cubic-bezier(0.25, 0.1, 0, 1);
}

.laddoptimering__idle-text {
    white-space: nowrap;
}

/* Time markers */
.laddoptimering__time-markers {
    display: flex;
    padding: 0 var(--spacing-2);
    position: relative;
}

.laddoptimering__time {
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    color: rgb(var(--color-text-muted));
}

/* Start time stays at flex start */
.laddoptimering__time--start {
    /* Default position */
}

/* Mid time positioned at 50% */
.laddoptimering__time--mid {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

/* Position deadline time marker at same position as deadline line */
.laddoptimering__time--deadline {
    position: absolute;
    left: var(--laddoptimering-deadline-position);
    transform: translateX(-50%);
    color: rgb(var(--color-info));
}

/* Status bar */
/* Status group */
.laddoptimering__status-group {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
    align-items: center;
}

.laddoptimering__status {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-2);
}

.laddoptimering__status-dot {
    width: 10px;
    height: 10px;
    border-radius: var(--radius-full);
    background-color: rgb(var(--color-danger));
    flex-shrink: 0;
    transition: background-color 0.4s cubic-bezier(0.25, 0.1, 0, 1);
}

.laddoptimering__status-text {
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: rgb(var(--color-danger));
    transition: color var(--transition-base);
}

/* Idle status colors */
.laddoptimering__status-dot--idle {
    background-color: rgb(var(--color-info));
}

.laddoptimering__status-text--idle {
    color: rgb(var(--color-info));
}

/* Toggle button - center it */
.laddoptimering > .button {
    align-self: center;
}

/* Active state - block expanded and green */
.laddoptimering--active .laddoptimering__block {
    width: var(--laddoptimering-optimized-width);
    background-color: rgb(var(--color-primary));
    color: rgb(var(--color-primary-contrast));
    box-shadow: 0 0 20px rgb(var(--color-primary) / 0.5);
}

/* Active state - idle block shrinks and changes to success */
.laddoptimering--active .laddoptimering__idle {
    left: calc(var(--laddoptimering-optimized-width) + var(--spacing-2) + var(--spacing-1));
    background-color: rgb(var(--color-success) / 0.15);
    border-color: rgb(var(--color-success) / 0.4);
    color: rgb(var(--color-success));
}

/* Active state - status colors */
.laddoptimering--active .laddoptimering__status-dot {
    background-color: rgb(var(--color-success));
}

.laddoptimering--active .laddoptimering__status-text {
    color: rgb(var(--color-success));
}

/* Idle status always stays info color */

/* Warning zone transition */
.laddoptimering__warning-zone {
    transition: opacity 0.5s cubic-bezier(0.25, 0.1, 0, 1);
}

/* Active state - fade warning zone */
.laddoptimering--active .laddoptimering__warning-zone {
    opacity: 0.3;
}

/* Hide config script */
.laddoptimering__config {
    display: none;
}

/* Dark mode adjustments */
.dark .laddoptimering__warning-zone {
    background: linear-gradient(
        to right,
        rgb(var(--color-danger) / 0.25) 0%,
        rgb(var(--color-danger) / 0.1) 70%,
        transparent 100%
    );
}

/* Responsive */
@media (max-width: 640px) {
    .laddoptimering__track {
        --laddoptimering-track-height: 48px;
    }
    
    .laddoptimering__block {
        font-size: var(--text-xs);
        gap: var(--spacing-1);
    }
    
    .laddoptimering__block-icon .icon {
        width: 0.875rem;
        height: 0.875rem;
    }
}


/* ============================================================================
   REVEAL ANIMATIONS (Fade In on Scroll)
   ============================================================================ */

/**
 * Reveal Animation System
 * 
 * Elements with data-reveal start hidden and fade in when they enter the
 * viewport. Supports staggered delays for lists and grids.
 * 
 * CSS Variables (defined in style.css):
 * - --reveal-base-delay: Base delay before animation starts (default: 0.1s)
 * - --reveal-stagger-increment: Delay per item in staggered reveals (default: 0.08s)
 * 
 * Inline Variable (set via PHP):
 * - --delay-index: Index of item for stagger calculation (0, 1, 2, ...)
 * 
 * HTML:
 * - data-reveal: Add to element to enable reveal animation
 * - style="--delay-index: N": Set stagger index for sequential reveals
 * 
 * Classes (added by JS):
 * - .reveal--visible: Added when element enters viewport
 */

/* Base reveal state - hidden by default via attribute */
[data-reveal] {
    --delay-index: 0;
    opacity: 0;
    transition: opacity 1.5s cubic-bezier(0.25, 0.1, 0, 1);
    /* Calculate delay: base + (increment * index) */
    transition-delay: calc(var(--reveal-base-delay) + (var(--reveal-stagger-increment) * var(--delay-index)));
}

/* Visible state - animated in */
[data-reveal].reveal--visible {
    opacity: 1;
}

/* Reduce motion preference - show immediately without animation */
@media (prefers-reduced-motion: reduce) {
    [data-reveal] {
        opacity: 1;
        transition: none;
    }
}


/* ============================================================================
   HEADING WORD REVEAL (Drop-in Animation)
   ============================================================================ */

/**
 * Word-by-word drop-in animation for headings
 * 
 * Each word drops in from above with a staggered delay.
 * JS wraps each word in .heading__word-wrap (overflow container) 
 * containing .heading__word (animated element).
 * 
 * CSS Variables (defined in style.css):
 * - --reveal-word-stagger: Delay per word (default: 0.065s, half of regular)
 * 
 * Inline Variable (set by JS):
 * - --word-index: Word position (0, 1, 2, ...)
 * 
 * HTML:
 * - data-reveal-words: Add to heading for word drop-in animation
 */

/* Hide heading text before JS wraps words (prevents flash) */
[data-reveal-words]:not([data-words-init]) {
    visibility: hidden;
}

/* Word wrapper - clips overflow for each word individually */
[data-reveal-words] .heading__word-wrap {
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
}

/* Each word - starts above, hidden by wrapper overflow */
[data-reveal-words] .heading__word {
    display: inline-block;
    transform: translateY(110%);
    transition: transform 1s cubic-bezier(0.25, 0.1, 0, 1);
    /* No base delay - first word starts immediately */
    transition-delay: calc(var(--reveal-word-stagger) * var(--word-index, 0));
}

/* Visible state - words drop into place */
[data-reveal-words].reveal--visible .heading__word {
    transform: translateY(0);
}

/* Reduce motion preference */
@media (prefers-reduced-motion: reduce) {
    [data-reveal-words] .heading__word {
        transform: translateY(0);
        transition: none;
    }
}


/* ============================================================================
   RESPONSIVE UTILITIES
   ============================================================================ */

@media (max-width: 1279px) {
    .toc--sticky {
        display: none;
    }
}

@media (max-width: 767px) {
    .tile-grid--cols-2,
    .tile-grid--cols-3,
    .tile-grid--cols-4 {
        grid-template-columns: 1fr;
    }
    
    .card-feature-wrapper:not(.card-feature-wrapper--mini) .card-feature:not(.card-feature--vertical) {
        flex-direction: column;
    }

    .list-feature--m-vertical .list-feature__item {
        flex-direction: column;
    }
    
    .list-feature--horizontal .list-feature__item {
        align-items: center;
        text-align: center;
    }
    
    /* Responsive section padding — normal sections (no divider) */
    .section--padding-lg {
        padding-top: var(--spacing-12);
        padding-bottom: var(--spacing-12);
    }

    .section--padding-xl {
        padding-top: var(--spacing-16);
        padding-bottom: var(--spacing-16);
    }

    /* Responsive section padding — divider sections (container holds the padding) */
    section:not(:first-child).section--divider-top.section--padding-lg > .section__container {
        padding-top: var(--spacing-12);
    }

    section:not(:first-child).section--divider-bottom.section--padding-lg > .section__container {
        padding-bottom: var(--spacing-12);
    }

    section:not(:first-child).section--divider-top.section--padding-xl > .section__container {
        padding-top: var(--spacing-16);
    }

    section:not(:first-child).section--divider-bottom.section--padding-xl > .section__container {
        padding-bottom: var(--spacing-16);
    }

    /* Responsive section container padding */
    .section__container {
        padding-left: var(--spacing-6);
        padding-right: var(--spacing-6);
        box-sizing: border-box;
    }
    
    /* Responsive image group - stack on mobile */
    .image-group--horizontal {
        flex-direction: column;
    }
}


/* ============================================================================
   EFFEKTTOPP ANIMATION (Modern Motion Graphics)
   ============================================================================ */

/**
 * Effekttopp Animation
 * 
 * Modern SVG graph animation with depth, glow effects, and smooth transitions.
 * Features gradient fills, glowing strokes, and pulsing peak dots.
 */

.effekttopp-animation {
    position: relative;
    width: 100%;
    max-width: 400px;
}

/* Dot grid background */
.effekttopp-animation__grid {
    opacity: 0;
    clip-path: inset(100% 0 0 0);
    transition: opacity 0.6s ease;
}

.effekttopp-animation--animated .effekttopp-animation__grid {
    opacity: 0.5;
    animation: effekttopp-grid-reveal 1.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes effekttopp-grid-reveal {
    0% {
        clip-path: inset(100% 0 0 0);
        opacity: 0;
    }
    20% {
        opacity: 0.5;
    }
    100% {
        clip-path: inset(0 0 0 0);
        opacity: 0.5;
    }
}

/* Badge positioned above peak dot */
.effekttopp-animation__badge {
    position: absolute;
    transform: translate(-50%, -100%);
    margin-top: -1rem;
    opacity: 0;
    transition: opacity 0.4s ease;
    transition-delay: 2.2s;
    white-space: nowrap;
    z-index: 10;
}

.effekttopp-animation--animated .effekttopp-animation__badge {
    opacity: 1;
}

.effekttopp-animation__svg {
    width: 100%;
    height: auto;
    display: block;
    overflow: visible;
}

/* Area fills - fade in */
.effekttopp-animation__area {
    opacity: 0;
    transition: opacity 1s cubic-bezier(0.4, 0, 0.2, 1);
    transition-delay: 0.8s;
}

/* Glow layer - follows stroke animation */
.effekttopp-animation__glow {
    stroke-dasharray: var(--path-length, 1000);
    stroke-dashoffset: var(--path-length, 1000);
    transition: stroke-dashoffset 2s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Main stroke - draws in with smooth easing */
.effekttopp-animation__stroke {
    stroke-dasharray: var(--path-length, 1000);
    stroke-dashoffset: var(--path-length, 1000);
    transition: stroke-dashoffset 2s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Dots - pop in with bounce after curve draws */
.effekttopp-animation__dot {
    opacity: 0;
    transform: scale(0);
    transform-origin: center;
    transform-box: fill-box;
    transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    transition-delay: 1.8s;
}

/* ===== ANIMATED STATE ===== */

.effekttopp-animation--animated .effekttopp-animation__area {
    opacity: 1;
}

.effekttopp-animation--animated .effekttopp-animation__glow,
.effekttopp-animation--animated .effekttopp-animation__stroke {
    stroke-dashoffset: 0;
}

.effekttopp-animation--animated .effekttopp-animation__dot {
    opacity: 1;
    transform: scale(1);
}

/* Pulsing dot animation after appearing */
.effekttopp-animation--animated .effekttopp-animation__dot {
    animation: effekttopp-dot-pulse 2.5s ease-in-out infinite;
    animation-delay: 2.3s;
}

@keyframes effekttopp-dot-pulse {
    0%, 100% { 
        transform: scale(1);
        filter: url(#effekttopp-glow);
    }
    50% { 
        transform: scale(1.25);
    }
}

/* ===== STAGGER TIMING ===== */

/* Base curve */
.effekttopp-animation__curve--base .effekttopp-animation__glow,
.effekttopp-animation__curve--base .effekttopp-animation__stroke {
    transition-delay: 0s;
}

.effekttopp-animation__curve--base .effekttopp-animation__area {
    transition-delay: 0.6s;
}

.effekttopp-animation__curve--base .effekttopp-animation__dot {
    transition-delay: 1.6s;
    animation-delay: 2.1s;
}

/* Peak curve - slightly delayed */
.effekttopp-animation__curve--peak .effekttopp-animation__glow,
.effekttopp-animation__curve--peak .effekttopp-animation__stroke {
    transition-delay: 0.15s;
}

.effekttopp-animation__curve--peak .effekttopp-animation__area {
    transition-delay: 0.75s;
}

.effekttopp-animation__curve--peak .effekttopp-animation__dot {
    transition-delay: 1.8s;
    animation-delay: 2.3s;
}

/* Smart curve - slightly delayed */
.effekttopp-animation__curve--smart .effekttopp-animation__glow,
.effekttopp-animation__curve--smart .effekttopp-animation__stroke {
    transition-delay: 0.15s;
}

.effekttopp-animation__curve--smart .effekttopp-animation__area {
    transition-delay: 0.75s;
}

.effekttopp-animation__curve--smart .effekttopp-animation__dot {
    transition-delay: 1.8s;
    animation-delay: 2.3s;
}

/* Background modifier */
.effekttopp-animation--bg {
    position: relative;
    z-index: 1;
}

.effekttopp-animation--bg::before {
    --size: calc(var(--spacing-6) * -1);
    z-index: -1;
    
    content: '';
    position: absolute;
    top: var(--size);
    right: var(--size);
    bottom: var(--size);
    left: var(--size);
    background: radial-gradient(rgb(var(--color-surface) / 0.9), rgb(var(--color-surface) / 0.25) 40%);
    padding: var(--spacing-6);
    border-radius: var(--radius-xl);
    opacity: 0;
    transition: opacity 1s ease 2s;
}

.dark .effekttopp-animation--bg::before {
    background: radial-gradient(rgb(var(--color-surface-alt) / 0.75), rgb(var(--color-surface-alt) / 0.05) 90%);
}

.effekttopp-animation--animated.effekttopp-animation--bg::before {
    opacity: 1;
}

@media (max-width: 768px) {
    .effekttopp-animation {
        margin-top: var(--spacing-6)
    }

    .effekttopp-animation__badge {
        left: var(--spacing-6) !important;
        right: var(--spacing-6);
        transform: translateY(-100%);
        white-space: normal;
    }

    .effekttopp-animation--animated.effekttopp-animation--bg::before {
        --size: calc(var(--spacing-4) * -1);
    }
}


/* ============================================================================
   STATEMENT LINE
   Full-width animated line graph as a visual statement piece.
   Draws in, then morphs to a new shape while changing color.
   ============================================================================ */

.statement-line {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.statement-line__container {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    width: 100%;
    transform: translateY(-50%);
    pointer-events: none;
}

.statement-line__svg {
    width: 100%;
    height: auto;
    display: block;
    overflow: visible;
}

/* Glow layer - follows stroke animation */
.statement-line__glow {
    stroke-dasharray: var(--path-length, 2000);
    stroke-dashoffset: var(--path-length, 2000);
    transition: stroke-dashoffset 2.5s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Main stroke - draws in with smooth easing */
.statement-line__stroke {
    stroke-dasharray: var(--path-length, 2000);
    stroke-dashoffset: var(--path-length, 2000);
    transition: stroke-dashoffset 2.5s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ===== ANIMATED STATE (draw-in complete) ===== */

.statement-line--animated .statement-line__glow,
.statement-line--animated .statement-line__stroke {
    stroke-dashoffset: 0;
}

/* ===== MORPH-READY STATE (disable dasharray before morphing) ===== */

.statement-line--morph-ready .statement-line__glow,
.statement-line--morph-ready .statement-line__stroke {
    stroke-dasharray: 9999 !important;
    stroke-dashoffset: 0 !important;
    transition: none !important;
}

/* ===== MORPHED STATE (after morph animation) ===== */

.statement-line--morphed .statement-line__glow {
    stroke: rgb(var(--color-success));
}

.statement-line--morphed .statement-line__stroke {
    stroke: rgb(var(--color-success));
}

/* Reduced motion - show final state immediately without animation */
@media (prefers-reduced-motion: reduce) {
    .statement-line__glow,
    .statement-line__stroke {
        stroke-dashoffset: 0;
        transition: none;
    }
    
    .statement-line .statement-line__glow,
    .statement-line .statement-line__stroke {
        stroke: rgb(var(--color-success));
    }
}


/* ============================================================================
   WAVY BACKGROUND
   Animated SVG wavy lines that serve as a decorative background.
   Positions absolutely within parent section (requires position: relative).
   Uses GSAP for smooth, continuous wave animations.
   ============================================================================ */

.wavy-background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
    z-index: 0;
}

.wavy-background__svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    filter: blur(3px);
    transform-origin: center center;
    overflow: visible;
}

/* Flatten waves and spread them out on mobile */
@media (max-width: 768px) {
    .wavy-background__svg {
        transform: scaleY(0.5) scaleX(1.2);
        height: 180%;
        top: -40%;
    }
}

/* Individual line styling */
.wavy-background__line {
    will-change: transform;
}

.wavy-background__line--glow {
    opacity: 0.3;
}

.wavy-background__line--main {
    opacity: 1;
}

/* Direction variations */
.wavy-background--vertical .wavy-background__svg {
    transform: rotate(90deg);
    transform-origin: center center;
}

/* Speed variations affect CSS fallback animations */
.wavy-background--slow .wavy-background__line {
    animation-duration: 12s;
}

.wavy-background--medium .wavy-background__line {
    animation-duration: 8s;
}

.wavy-background--fast .wavy-background__line {
    animation-duration: 5s;
}

/* Animation states - GSAP handles the actual animation */
.wavy-background--animated .wavy-background__line {
    will-change: transform;
}

/* CSS fallback animation when GSAP isn't available */
@keyframes wavy-background-float {
    0%, 100% {
        transform: translateY(0) translateX(0);
    }
    25% {
        transform: translateY(-8px) translateX(4px);
    }
    50% {
        transform: translateY(0) translateX(8px);
    }
    75% {
        transform: translateY(8px) translateX(4px);
    }
}

/* Apply CSS animation as fallback */
.wavy-background:not(.wavy-background--gsap-active) .wavy-background__line:nth-child(1),
.wavy-background:not(.wavy-background--gsap-active) .wavy-background__line:nth-child(2) {
    animation: wavy-background-float 12s ease-in-out infinite;
}

.wavy-background:not(.wavy-background--gsap-active) .wavy-background__line:nth-child(3),
.wavy-background:not(.wavy-background--gsap-active) .wavy-background__line:nth-child(4) {
    animation: wavy-background-float 10s ease-in-out infinite reverse;
    animation-delay: -2s;
}

.wavy-background:not(.wavy-background--gsap-active) .wavy-background__line:nth-child(5),
.wavy-background:not(.wavy-background--gsap-active) .wavy-background__line:nth-child(6) {
    animation: wavy-background-float 14s ease-in-out infinite;
    animation-delay: -4s;
}

.wavy-background:not(.wavy-background--gsap-active) .wavy-background__line:nth-child(7),
.wavy-background:not(.wavy-background--gsap-active) .wavy-background__line:nth-child(8) {
    animation: wavy-background-float 11s ease-in-out infinite reverse;
    animation-delay: -1s;
}

.wavy-background:not(.wavy-background--gsap-active) .wavy-background__line:nth-child(9),
.wavy-background:not(.wavy-background--gsap-active) .wavy-background__line:nth-child(10) {
    animation: wavy-background-float 13s ease-in-out infinite;
    animation-delay: -3s;
}

.wavy-background:not(.wavy-background--gsap-active) .wavy-background__line:nth-child(11),
.wavy-background:not(.wavy-background--gsap-active) .wavy-background__line:nth-child(12) {
    animation: wavy-background-float 9s ease-in-out infinite reverse;
    animation-delay: -5s;
}

/* Reduced motion - disable all animations */
@media (prefers-reduced-motion: reduce) {
    .wavy-background__line {
        animation: none !important;
        transform: none !important;
    }
}


/* ============================================================================
   SLIDESHOW
   ============================================================================ */

/* Base container */
.slideshow {
    --slideshow-max-width: 100%;
    --slideshow-max-height: 100%;
    --stage-height: 400px;
    --slideshow-nav-size: 48px;
    --slideshow-nav-offset: var(--spacing-4);
    --slideshow-dot-width: 24px;
    --slideshow-dot-width-active: 40px;
    --slideshow-dot-height: 6px;
    --slideshow-transition-fade: 200ms;
    
    position: relative;
    width: 100%;
}

/* Wrapper - contains nav buttons and stage */
.slideshow__wrapper {
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
    position: relative;
}

/* Navigation buttons */
.slideshow__nav {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--slideshow-nav-size);
    height: var(--slideshow-nav-size);
    padding: 0;
    background-color: rgb(var(--color-surface) / var(--bg-opacity));
    border: 1px solid rgb(var(--color-border));
    border-radius: var(--radius-full);
    color: rgb(var(--color-text-muted));
    cursor: pointer;
    opacity: 0.6;
    transition: opacity var(--transition-fast),
                background-color var(--transition-fast),
                border-color var(--transition-fast),
                color var(--transition-fast),
                transform var(--transition-fast);
}

.slideshow__nav:hover {
    opacity: 1;
    background-color: rgb(var(--color-surface));
    border-color: rgb(var(--color-border-strong));
    color: rgb(var(--color-text));
}

.slideshow__nav:focus-visible {
    opacity: 1;
    outline: 2px solid rgb(var(--color-primary));
    outline-offset: 2px;
}

.slideshow__nav:active {
    transform: scale(0.95);
}

.slideshow__nav:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.slideshow__nav .icon {
    flex-shrink: 0;
}

/* Stage - fixed height container */
.slideshow__stage {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--stage-height);
    overflow: hidden;
    contain: layout;
}

/* Viewport container */
.slideshow__viewport {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

/* Slide */
.slideshow__slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0;
    opacity: 0;
    visibility: hidden;
    /* Visibility delay allows opacity to fade out before hiding */
    transition: 
        opacity var(--slideshow-transition-fade) ease-out,
        visibility 0s var(--slideshow-transition-fade);
}

.slideshow__slide--active {
    opacity: 1;
    visibility: visible;
    /* No delay on visibility when becoming active */
    transition: 
        opacity var(--slideshow-transition-fade) ease-out,
        visibility 0s 0s;
}

/* Image */
.slideshow__image {
    display: block;
    max-width: min(var(--slideshow-max-width), 100%);
    max-height: min(var(--slideshow-max-height), 100%);
    width: auto;
    height: auto;
    border-radius: var(--radius-lg);
    transition: opacity var(--slideshow-transition-fade) ease-out;
}

/* Box shadow variant */
.slideshow--shadow .slideshow__image {
    filter: drop-shadow(25px 10px 2px rgb(0 0 0 / 0.02));
}

/* Caption */
.slideshow__caption {
    margin-top: var(--spacing-3);
    padding: var(--spacing-2) var(--spacing-4);
    font-size: var(--text-sm);
    color: rgb(var(--color-text-muted));
    text-align: center;
    background-color: rgb(var(--color-surface) / 0.8);
    border-radius: var(--radius-base);
    backdrop-filter: blur(4px);
}

/* Loader skeleton */
.slideshow__loader {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60%;
    max-width: 300px;
    height: 8px;
    background-color: rgb(var(--color-surface-alt));
    border-radius: var(--radius-full);
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-fast);
}

.slideshow--loading .slideshow__loader {
    opacity: 1;
    visibility: visible;
}

.slideshow__loader-inner {
    width: 40%;
    height: 100%;
    background-color: rgb(var(--color-primary) / 0.6);
    border-radius: var(--radius-full);
    animation: slideshow-loader 1.2s ease-in-out infinite;
}

@keyframes slideshow-loader {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(350%);
    }
}

/* Indicators */
.slideshow__indicators {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-2);
    margin-top: var(--spacing-4);
    padding: var(--spacing-2);
}

/* Indicator dots - rounded rectangles */
.slideshow__dot {
    width: var(--slideshow-dot-width);
    height: var(--slideshow-dot-height);
    padding: 0;
    background-color: rgb(var(--color-border));
    border: 1px solid rgb(var(--color-border));
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: width var(--transition-base),
                background-color var(--transition-fast),
                border-color var(--transition-fast);
}

.slideshow__dot:hover {
    background-color: rgb(var(--color-border-strong));
    border-color: rgb(var(--color-border-strong));
}

.slideshow__dot:focus-visible {
    outline: 2px solid rgb(var(--color-primary));
    outline-offset: 2px;
}

.slideshow__dot--active {
    width: var(--slideshow-dot-width-active);
    background-color: rgb(var(--color-primary));
    border-color: rgb(var(--color-primary));
}

/* Glassmorphism support */
.has-glassmorphism .slideshow__nav {
    backdrop-filter: blur(var(--blur));
}

.has-glassmorphism .slideshow__caption {
    backdrop-filter: blur(var(--blur));
}


/* ============================================================================
   LIGHTBOX (GLOBAL)
   ============================================================================ */

/* Trigger - wraps images that open in lightbox */
.lightbox {
    cursor: pointer;
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.lightbox::after {
    content: '';
    position: absolute;
    top: var(--spacing-4);
    right: var(--spacing-4);
    width: var(--spacing-6);
    height: var(--spacing-6);
    background: url("/wp-content/themes/valt/assets/icons/maximize.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    filter: brightness(0) invert(1);
    opacity: 0.35;
}

.lightbox:hover::after {
    opacity: 1;
}

.lightbox img {
    transition: opacity var(--transition-fast);
}

.lightbox:hover img {
    opacity: 0.9;
}

/* Modal overlay */
.lightbox-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-8);
    background-color: rgb(0 0 0 / 0.9);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-base),
                visibility var(--transition-base);
}

.lightbox-modal--open {
    opacity: 1;
    visibility: visible;
}

.lightbox-modal__image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: var(--radius-lg);
    transform: scale(0.95);
    transition: transform var(--transition-base) cubic-bezier(0.25, 0.1, 0, 1);
}

.lightbox-modal--open .lightbox-modal__image {
    transform: scale(1);
}

.lightbox-modal__close {
    position: absolute;
    top: var(--spacing-4);
    right: var(--spacing-4);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    background-color: rgb(255 255 255 / 0.1);
    border: 1px solid rgb(255 255 255 / 0.2);
    border-radius: var(--radius-full);
    color: rgb(255 255 255);
    cursor: pointer;
    transition: background-color var(--transition-fast),
                transform var(--transition-fast);
}

.lightbox-modal__close:hover {
    background-color: rgb(255 255 255 / 0.2);
}

.lightbox-modal__close:active {
    transform: scale(0.95);
}

.lightbox-modal__close:focus-visible {
    outline: 2px solid rgb(var(--color-primary));
    outline-offset: 2px;
}

.lightbox-modal__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    padding: 0;
    background-color: rgb(255 255 255 / 0.1);
    border: 1px solid rgb(255 255 255 / 0.2);
    border-radius: var(--radius-full);
    color: rgb(255 255 255);
    cursor: pointer;
    z-index: 1;
    backdrop-filter: blur(4px);
    transition: background-color var(--transition-fast),
                transform var(--transition-fast);
}

.lightbox-modal__nav:hover {
    background-color: rgb(255 255 255 / 0.2);
}

.lightbox-modal__nav:active {
    transform: translateY(-50%) scale(0.95);
}

.lightbox-modal__nav--prev {
    left: var(--spacing-4);
}

.lightbox-modal__nav--next {
    right: var(--spacing-4);
}

/* Hide nav buttons when only one image in gallery */
.lightbox-modal--single .lightbox-modal__nav {
    display: none;
}


/* ---------------------------------------------------------------------------
   SLIDESHOW RESPONSIVE
   --------------------------------------------------------------------------- */

@media (max-width: 768px) {
    .slideshow {
        --slideshow-nav-size: 40px;
        --slideshow-dot-width: 20px;
        --slideshow-dot-width-active: 32px;
        --slideshow-dot-height: 5px;
    }
    
    /* Stack nav buttons below stage on mobile */
    .slideshow__wrapper {
        flex-direction: column;
        gap: var(--spacing-3);
    }
    
    /* Stage takes full width */
    .slideshow__stage {
        width: 100%;
        /* Reduce stage height on mobile */
        height: calc(var(--stage-height) * 0.7);
    }
    
    /* Nav buttons in a row below stage */
    .slideshow__nav {
        position: static;
    }
    
    /* Create a row for nav buttons */
    .slideshow__wrapper::after {
        content: '';
        display: none;
    }
    
    /* Reorder: stage first, then nav buttons in indicators row */
    .slideshow__wrapper {
        display: contents;
    }
    
    .slideshow {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-3);
    }
    
    .slideshow__stage {
        order: 1;
    }
    
    .slideshow__nav--prev {
        order: 2;
    }
    
    .slideshow__indicators {
        order: 3;
        margin-top: 0;
    }
    
    .slideshow__nav--next {
        order: 4;
    }
    
    /* Put nav buttons inline with indicators */
    .slideshow {
        display: grid;
        grid-template-columns: auto 1fr auto;
        grid-template-rows: auto auto;
        gap: var(--spacing-3);
        align-items: center;
    }
    
    .slideshow__wrapper {
        display: contents;
    }
    
    .slideshow__stage {
        grid-column: 1 / -1;
        grid-row: 1;
    }
    
    .slideshow__nav--prev {
        grid-column: 1;
        grid-row: 2;
    }
    
    .slideshow__indicators {
        grid-column: 2;
        grid-row: 2;
        margin: 0;
    }
    
    .slideshow__nav--next {
        grid-column: 3;
        grid-row: 2;
    }
    
    /* Lightbox adjustments */
    .lightbox-modal {
        padding: var(--spacing-4);
    }
    
    .lightbox-modal__nav {
        width: 44px;
        height: 44px;
    }
    
    .lightbox-modal__close {
        width: 40px;
        height: 40px;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .slideshow__slide {
        transition: none;
    }
    
    .slideshow__viewport {
        transition: none;
    }
    
    .slideshow__image {
        transition: none;
    }
    
    .slideshow__dot {
        transition: none;
    }
    
    .slideshow__loader-inner {
        animation: none;
    }
    
    .lightbox-modal,
    .lightbox-modal__image {
        transition: none;
    }
}

/* ============================================================================
   FORM COMPONENT
   ============================================================================ */

/* Base */
.form {
    width: 100%;
}

/* Alert container */
.form__alert {
    display: none;
    margin-bottom: var(--spacing-4);
}

.form__alert:not(:empty) {
    display: block;
}

/* Fields container - flexbox with wrap */
.form__fields {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-6);
}

/* Field wrapper */
.form__field {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-1-5);
}

/* Field width modifiers */
.form__field--full {
    width: 100%;
}

.form__field--half {
    width: calc(50% - var(--spacing-2));
}

.form__field--third {
    width: calc(33.333% - var(--spacing-3));
}

.form__field--two-thirds {
    width: calc(66.666% - var(--spacing-2));
}

/* Label */
.form__label {
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: rgb(var(--color-text-no-bg));
}

.form__required {
    color: rgb(var(--color-danger));
}

/* Shared input styles */
.form__input,
.form__textarea,
.form__select {
    width: 100%;
    padding: var(--spacing-3) var(--spacing-4);
    font-size: var(--text-base);
    font-family: inherit;
    color: rgb(var(--color-text));
    background-color: rgb(var(--color-surface));
    border: 1px solid rgb(var(--color-border-strong));
    border-radius: var(--radius-lg);
    transition: border-color var(--transition-fast),
                box-shadow var(--transition-fast);
    box-sizing: border-box;
}

.dark .form__input,
.dark .form__textarea,
.dark .form__select {
    background-color: rgb(var(--color-text) / 10%);
    border-color: rgb(var(--color-border-strong));
}

.form__input::placeholder,
.form__textarea::placeholder {
    color: rgb(var(--color-text-muted));
    opacity: 0.35;
}

.form__input:focus,
.form__textarea:focus,
.form__select:focus {
    outline: none;
    border-color: rgb(var(--color-primary-active));
    box-shadow: 0 0 0 3px rgb(var(--color-primary-hover) / 0.2);
}

/* Invalid state */
.form__input:invalid:not(:placeholder-shown),
.form__textarea:invalid:not(:placeholder-shown),
.form__select:invalid {
    border-color: rgb(var(--color-danger));
}

.form__input:invalid:not(:placeholder-shown):focus,
.form__textarea:invalid:not(:placeholder-shown):focus,
.form__select:invalid:focus {
    box-shadow: 0 0 0 3px rgb(var(--color-danger) / 0.1);
}

/* Textarea */
.form__textarea {
    min-height: 120px;
    resize: vertical;
}

/* Select */
.form__select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--spacing-3) center;
    padding-right: var(--spacing-10);
}

/* Checkbox and Radio groups */
.form__checkbox-group,
.form__radio-group {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
}

.form__checkbox-label,
.form__radio-label {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-2);
    cursor: pointer;
    font-size: var(--text-base);
    color: rgb(var(--color-text));
}

.form__checkbox-label--single {
    margin-top: var(--spacing-1);
}

.form__checkbox,
.form__radio {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 0.125rem;
    cursor: pointer;
    accent-color: rgb(var(--color-primary));
}

.form__checkbox-text,
.form__radio-text {
    line-height: 1.5;
}

/* Submit button container */
.form__submit {
    display: flex;
    justify-content: flex-end;
}

/* Loading state */
.form--loading {
    position: relative;
    pointer-events: none;
}

.form--loading::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgb(var(--color-background) / 0.5);
    border-radius: var(--radius-lg);
}

.form--loading .form__submit .button {
    opacity: 0.7;
}

/* Dark mode */
.dark .form__input,
.dark .form__textarea,
.dark .form__select {
    background-color: rgb(var(--color-surface));
    border-color: rgb(var(--color-border));
}

.dark .form__select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

/* Card view modifier */
.form--card {
    padding: var(--spacing-6) var(--spacing-8);
    box-sizing: border-box;
    background-color: rgb(var(--color-surface-alt));
    border: 1px solid rgb(var(--color-border));
    border-radius: var(--radius-xl);
    box-shadow: 0 2px 12px rgb(0 0 0 / 0.06);
}

@media (max-width: 768px) {
    .form--card {
        padding: var(--spacing-5) var(--spacing-4);
    }

    .form__submit > button {
        width: 100%;
    }
}

/* Responsive - stack all fields on mobile */
@media (max-width: 768px) {
    .form__field--half,
    .form__field--third,
    .form__field--two-thirds {
        width: 100%;
    }
}


/* ============================================================================
   CALCULATOR
   Step-based calculator component with tile selection, progress bar,
   collapsible steps, and results display.
   ============================================================================ */

/* Main wrapper */
.calculator {
    width: 100%;
}

/* ----------------------------------------
   Progress Bar
   ---------------------------------------- */

.calculator__progress {
    position: sticky;
    top: var(--spacing-4);
    z-index: 10;
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-6);
    padding: var(--spacing-3) var(--spacing-5);
    background-color: rgb(var(--color-surface) / var(--bg-opacity));
    border: 1px solid rgb(var(--color-border));
    border-radius: var(--radius-xl);
    box-shadow: 0 4px 16px rgb(0 0 0 / 0.08);
    transition: box-shadow 0.3s ease;
}

.calculator__progress-track {
    flex: 1;
    height: 6px;
    background: rgb(var(--color-border));
    border-radius: 3px;
    overflow: hidden;
}

.calculator__progress-bar {
    height: 100%;
    background: rgb(var(--color-primary));
    border-radius: 3px;
    transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    min-width: 0;
}

.calculator__progress-text {
    flex-shrink: 0;
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: rgb(var(--color-text-muted));
    white-space: nowrap;
}

/* ----------------------------------------
   Steps Container
   ---------------------------------------- */

.calculator__steps {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
}

/* ----------------------------------------
   Step Card
   ---------------------------------------- */

.calculator__step {
    background-color: rgb(var(--color-surface) / var(--bg-opacity));
    border: 1px solid rgb(var(--color-border));
    border-radius: var(--radius-xl);
    overflow: hidden;
    transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.4s ease,
                transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Active step */
.calculator__step--active {
    opacity: 1;
    box-shadow: 0 2px 12px rgb(0 0 0 / 0.06);
}

/* Collapsed step (previous, visited) */
.calculator__step--collapsed {
    opacity: 0.5;
    cursor: pointer;
}

.calculator__step--collapsed:hover {
    opacity: 0.75;
}

.calculator__step--collapsed .calculator__step-body {
    display: none;
}

.calculator__step--collapsed .calculator__step-summary {
    display: inline;
}

/* Hidden step (not yet reached) */
.calculator__step--hidden {
    display: none;
}

/* Animating in */
.calculator__step--entering {
    animation: calculator-step-enter 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes calculator-step-enter {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

.calculator__step-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    padding: var(--spacing-4) var(--spacing-5);
}

.calculator__step--active .calculator__step-header,
.calculator__step--collapsed .calculator__step-header {
    padding-bottom: 0;
}

.calculator__step--collapsed .calculator__step-header {
    padding-bottom: var(--spacing-4);
}

.calculator__step-number {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: rgb(var(--color-primary));
    color: rgb(var(--color-primary-contrast));
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    line-height: 1;
}

.calculator__step--collapsed .calculator__step-number {
    background: rgb(var(--color-border));
    color: rgb(var(--color-text-muted));
}

.calculator__step-question {
    flex: 1;
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    color: rgb(var(--color-text));
    line-height: var(--leading-snug);
}

.calculator__step-summary {
    display: none;
    font-size: var(--text-sm);
    color: rgb(var(--color-text-muted));
    font-weight: var(--font-normal);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}

.calculator__step--collapsed .calculator__step-summary:not(:empty)::before {
    content: '—';
    margin: 0 var(--spacing-2);
    color: rgb(var(--color-border-strong));
}

/* ----------------------------------------
   Step Body
   ---------------------------------------- */

.calculator__step-body {
    padding: var(--spacing-4) var(--spacing-5) var(--spacing-5);
}

/* ----------------------------------------
   Navigation (Next button)
   ---------------------------------------- */

.calculator__nav {
    display: flex;
    justify-content: flex-end;
    margin-top: var(--spacing-5);
}

/* ----------------------------------------
   Submit Button
   ---------------------------------------- */

.calculator__submit-wrapper {
    margin-top: var(--spacing-4);
}

.calculator__submit-wrapper .button {
    width: 100%;
    justify-content: center;
}

/* ----------------------------------------
   Fields
   ---------------------------------------- */

.calculator__field {
    margin-bottom: var(--spacing-4);
}

.calculator__field:last-child {
    margin-bottom: 0;
}

.calculator__field-label {
    display: block;
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: rgb(var(--color-text));
    margin-bottom: var(--spacing-1-5);
}

.calculator__required {
    color: rgb(var(--color-danger));
}

.calculator__field-error {
    font-size: var(--text-sm);
    color: rgb(var(--color-danger));
    margin-top: var(--spacing-1);
    min-height: 0;
}

.calculator__field-error:empty {
    display: none;
}

/* ----------------------------------------
   Tile Selection
   ---------------------------------------- */

.calculator__tiles {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-3);
}

.calculator__tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-2);
    flex: 1;
    min-width: 120px;
    padding: var(--spacing-4) var(--spacing-3);
    background: rgb(var(--color-surface-alt) / var(--bg-opacity));
    border: 2px solid rgb(var(--color-border));
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: border-color var(--transition-fast),
                background-color var(--transition-fast),
                box-shadow var(--transition-fast),
                transform var(--transition-fast);
    font-family: inherit;
    font-size: var(--text-base);
    font-weight: var(--font-medium);
    color: rgb(var(--color-text));
    text-align: center;
    line-height: var(--leading-snug);
    outline: none;
}

.calculator__tile:hover {
    border-color: rgb(var(--color-primary-hover));
    background: rgb(var(--color-primary-light) / var(--bg-opacity));
}

.calculator__tile:focus-visible {
    border-color: rgb(var(--color-primary));
    box-shadow: 0 0 0 3px rgb(var(--color-primary) / 0.2);
}

.calculator__tile--selected {
    border-color: rgb(var(--color-primary));
    background: rgb(var(--color-primary-light) / var(--bg-opacity));
    box-shadow: 0 0 0 1px rgb(var(--color-primary) / 0.3);
}

.calculator__tile--selected:hover {
    border-color: rgb(var(--color-primary-hover));
}

.calculator__tile-icon {
    color: rgb(var(--color-primary-active));
}

.calculator__tile-label {
    pointer-events: none;
}

/* ----------------------------------------
   Inputs (reuses form styling patterns)
   ---------------------------------------- */

.calculator__input-wrapper {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

.calculator__input {
    width: 100%;
    padding: var(--spacing-3) var(--spacing-4);
    font-size: var(--text-base);
    font-family: inherit;
    color: rgb(var(--color-text));
    background-color: rgb(var(--color-surface) / var(--bg-opacity));
    border: 1px solid rgb(var(--color-border));
    border-radius: var(--radius-lg);
    transition: border-color var(--transition-fast),
                box-shadow var(--transition-fast);
    box-sizing: border-box;
}

.calculator__input::placeholder {
    color: rgb(var(--color-text-muted));
    opacity: 0.35;
}

.calculator__input:focus {
    outline: none;
    border-color: rgb(var(--color-primary-active));
    box-shadow: 0 0 0 3px rgb(var(--color-primary-hover) / 0.2);
}

.calculator__input--error {
    border-color: rgb(var(--color-danger));
}

.calculator__input--error:focus {
    box-shadow: 0 0 0 3px rgb(var(--color-danger) / 0.1);
}

.calculator__input-suffix {
    flex-shrink: 0;
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: rgb(var(--color-text-muted));
}

/* Number input - hide spinner */
.calculator__input[type="number"]::-webkit-outer-spin-button,
.calculator__input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.calculator__input[type="number"] {
    -moz-appearance: textfield;
}

/* ----------------------------------------
   Contact Fields (last step)
   ---------------------------------------- */

.calculator__contact-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-4);
}

/* ----------------------------------------
   Results Card
   ---------------------------------------- */

.calculator__results {
    margin-top: var(--spacing-4);
    animation: calculator-step-enter 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.calculator__results-card {
    background: rgb(var(--color-surface) / var(--bg-opacity));
    border: 1px solid rgb(var(--color-border));
    border-radius: var(--radius-xl);
    overflow: hidden;
}

.calculator__results-notice {
    padding: var(--spacing-4) var(--spacing-5);
    background: rgb(var(--color-primary-light));
    border-bottom: 1px solid rgb(var(--color-border));
    font-size: var(--text-sm);
    color: rgb(var(--color-text));
    line-height: var(--leading-relaxed);
}

.calculator__results-body {
    padding: var(--spacing-5);
}

.calculator__results-heading {
    font-size: var(--text-xl);
    font-weight: var(--font-bold);
    color: rgb(var(--color-text));
    margin: 0 0 var(--spacing-4);
}

/* Summary rows */
.calculator__results-summary {
    margin-bottom: var(--spacing-5);
}

.calculator__results-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: var(--spacing-3) 0;
    border-bottom: 1px dashed rgb(var(--color-border));
    gap: var(--spacing-4);
}

.calculator__results-row:last-child {
    border-bottom: none;
}

.calculator__results-label {
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    color: rgb(var(--color-text));
}

.calculator__results-value {
    font-size: var(--text-lg);
    font-weight: var(--font-bold);
    color: rgb(var(--color-primary-active));
    white-space: nowrap;
}

/* Subsidy value in green */
.calculator__results-row--highlight .calculator__results-value {
    color: rgb(var(--color-success));
}

/* Details accordion */
.calculator__results-details {
    border-top: 1px solid rgb(var(--color-border));
    margin-top: var(--spacing-2);
}

.calculator__results-details-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--spacing-3) 0;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: rgb(var(--color-primary-active));
    transition: color var(--transition-fast);
}

.calculator__results-details-trigger:hover {
    color: rgb(var(--color-primary-hover));
}

.calculator__results-details-trigger .icon {
    transition: transform 0.2s ease;
}

.calculator__results-details-trigger[aria-expanded="true"] .icon {
    transform: rotate(180deg);
}

.calculator__results-details-content {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.3s ease;
}

.calculator__results-details-content--open {
    max-height: 500px;
}

.calculator__results-detail-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: var(--spacing-2) 0;
    border-bottom: 1px dashed rgb(var(--color-border));
    gap: var(--spacing-4);
}

.calculator__results-detail-row:last-child {
    border-bottom: none;
}

.calculator__results-detail-label {
    font-size: var(--text-sm);
    color: rgb(var(--color-text-muted));
}

.calculator__results-detail-value {
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: rgb(var(--color-text));
    white-space: nowrap;
}

/* Specs section */
.calculator__results-specs {
    margin-top: var(--spacing-4);
    padding-top: var(--spacing-4);
    border-top: 1px solid rgb(var(--color-border));
}

.calculator__results-specs-heading {
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    color: rgb(var(--color-text));
    margin: 0 0 var(--spacing-3);
}

.calculator__results-spec-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: var(--spacing-1-5) 0;
    gap: var(--spacing-4);
}

.calculator__results-spec-label {
    font-size: var(--text-sm);
    color: rgb(var(--color-text-muted));
}

.calculator__results-spec-value {
    font-size: var(--text-sm);
    color: rgb(var(--color-text));
}

/* ----------------------------------------
   Disabled State (after submission)
   ---------------------------------------- */

.calculator--submitted .calculator__step {
    pointer-events: none;
    opacity: 0.5;
}

.calculator--submitted .calculator__submit-wrapper {
    display: none !important;
}

/* ----------------------------------------
   Loading State
   ---------------------------------------- */

.calculator--loading {
    animation: calculator-pulse 1.5s ease-in-out infinite;
}

.calculator--loading .calculator__submit-wrapper .button {
    opacity: 0.7;
    pointer-events: none;
}

@keyframes calculator-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

/* ----------------------------------------
   Mini Calculator Mode
   ---------------------------------------- */

.calculator--mini .calculator__steps {
    position: relative;
}

/* All steps are layered on top of each other */
.calculator--mini .calculator__step {
    transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Only the active step is visible */
.calculator--mini .calculator__step--hidden {
    display: none;
}

/* In mini mode collapsed is also hidden (no stacking) */
.calculator--mini .calculator__step--collapsed {
    display: none;
}

/* External navigation bar */
.calculator--mini .calculator__mini-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-4);
    margin-top: var(--spacing-4);
}

/* In mini mode the progress card is not sticky */
.calculator--mini .calculator__progress {
    position: relative;
    top: auto;
}

/* ----------------------------------------
   Transition Overlay (mini ↔ full)
   ---------------------------------------- */

.calculator__transition-overlay {
    position: absolute;
    inset: 0;
    z-index: 20;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-4);
    background: rgb(var(--color-surface) / 0.85);
    backdrop-filter: blur(8px);
    border-radius: var(--radius-xl);
    opacity: 0;
    transition: opacity 0.35s ease;
    pointer-events: none;
}

.calculator__transition-overlay--visible {
    opacity: 1;
    pointer-events: auto;
}

.calculator__transition-spinner {
    width: 36px;
    height: 36px;
    border: 3px solid rgb(var(--color-border));
    border-top-color: rgb(var(--color-primary));
    border-radius: 50%;
    animation: calculator-spin 0.7s linear infinite;
}

@keyframes calculator-spin {
    to { transform: rotate(360deg); }
}

.calculator__transition-text {
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: rgb(var(--color-text-muted));
}

/* ----------------------------------------
   Dark Mode
   ---------------------------------------- */

.dark .calculator__input {
    background-color: rgb(var(--color-surface) / var(--bg-opacity));
    border-color: rgb(var(--color-border));
}

.dark .calculator__tile {
    background: rgb(var(--color-surface) / var(--bg-opacity));
    border-color: rgb(var(--color-border));
}

.dark .calculator__tile:hover {
    border-color: rgb(var(--color-primary));
    background: rgb(var(--color-primary) / 0.1);
}

.dark .calculator__tile--selected {
    border-color: rgb(var(--color-primary));
    background: rgb(var(--color-primary) / 0.15);
}

/* ----------------------------------------
   Repeater Field
   ---------------------------------------- */

.calculator__repeater {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
}

.calculator__repeater-row {
    padding: var(--spacing-4);
    background: rgb(var(--color-surface-alt) / var(--bg-opacity));
    border: 1px solid rgb(var(--color-border));
    border-radius: var(--radius-lg);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.calculator__repeater-row--entering {
    animation: calculator-repeater-row-enter 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes calculator-repeater-row-enter {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.calculator__repeater-row--removing {
    animation: calculator-repeater-row-exit 0.2s ease forwards;
}

@keyframes calculator-repeater-row-exit {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(-10px);
    }
}

.calculator__repeater-row-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--spacing-3);
}

.calculator__repeater-row-label {
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: rgb(var(--color-text));
}

.calculator__repeater-remove {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    background: none;
    border: 1px solid rgb(var(--color-border));
    border-radius: var(--radius-base);
    color: rgb(var(--color-text-muted));
    cursor: pointer;
    transition: color var(--transition-fast),
                border-color var(--transition-fast),
                background-color var(--transition-fast);
    font-family: inherit;
}

.calculator__repeater-remove:hover {
    color: rgb(var(--color-danger));
    border-color: rgb(var(--color-danger));
    background: rgb(var(--color-danger) / 0.05);
}

.calculator__repeater-remove:focus-visible {
    outline: 2px solid rgb(var(--color-primary));
    outline-offset: 2px;
}

.calculator__repeater-row-fields {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
}

.calculator__repeater-row-fields .calculator__field {
    margin-bottom: 0;
}

.calculator__repeater-row-fields .calculator__tiles {
    gap: var(--spacing-2);
}

.calculator__repeater-row-fields .calculator__tile {
    flex: 0 0 auto;
    min-width: 0;
    padding: var(--spacing-2) var(--spacing-3);
    font-size: var(--text-sm);
    border-radius: var(--radius-md);
}

.calculator__repeater-add {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    background: rgb(var(--color-surface) / var(--bg-opacity));
    border: 2px dashed rgb(var(--color-border));
    border-radius: 50%;
    color: rgb(var(--color-text-muted));
    cursor: pointer;
    transition: color var(--transition-fast),
                border-color var(--transition-fast),
                background-color var(--transition-fast),
                transform var(--transition-fast);
    font-family: inherit;
    align-self: center;
}

.calculator__repeater-add:hover {
    color: rgb(var(--color-primary));
    border-color: rgb(var(--color-primary));
    background: rgb(var(--color-primary-light) / var(--bg-opacity));
    transform: scale(1.05);
}

.calculator__repeater-add:focus-visible {
    outline: 2px solid rgb(var(--color-primary));
    outline-offset: 2px;
}

.calculator__repeater-add[style*="display: none"],
.calculator__repeater-add[style*="display:none"] {
    display: none;
}

/* Validation warning (informational, non-blocking) */
.calculator__validation-warning {
    padding: var(--spacing-3) var(--spacing-4);
    background: rgb(var(--color-warning) / 0.08);
    border: 1px solid rgb(var(--color-warning) / 0.3);
    border-radius: var(--radius-lg);
    font-size: var(--text-sm);
    color: rgb(var(--color-warning));
    line-height: var(--leading-relaxed);
    margin-top: var(--spacing-3);
}

/* Helper text (e.g. link to another calculator) */
.calculator__helper-text {
    font-size: var(--text-sm);
    color: rgb(var(--color-text-muted));
    line-height: var(--leading-relaxed);
    margin: 0 0 var(--spacing-4);
}

.calculator__helper-text a {
    color: rgb(var(--color-secondary));
    text-decoration: underline;
    font-weight: var(--font-medium);
    transition: color var(--transition-fast);
}

.calculator__helper-text a:hover {
    color: rgb(var(--color-secondary-hover));
}

/* ----------------------------------------
   ROI Results (comparative tables)
   ---------------------------------------- */

.calculator__results-roi-summary {
    font-size: var(--text-base);
    color: rgb(var(--color-text-muted));
    line-height: var(--leading-relaxed);
    margin: 0 0 var(--spacing-6);
}

.calculator__results-roi-summary strong {
    color: rgb(var(--color-text));
    font-weight: var(--font-semibold);
}

.calculator__results-roi-section {
    margin-bottom: var(--spacing-6);
}

.calculator__results-roi-section:last-of-type {
    margin-bottom: var(--spacing-4);
}

.calculator__results-roi-section-heading {
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    color: rgb(var(--color-text));
    margin: 0 0 var(--spacing-3);
}

.calculator__results-roi-section-heading strong {
    color: rgb(var(--color-primary));
}

.calculator__results-roi-table {
    border: 1px solid rgb(var(--color-border));
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.calculator__results-roi-table-header {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: var(--spacing-3) var(--spacing-4);
    background: rgb(var(--color-surface-alt) / var(--bg-opacity));
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: rgb(var(--color-text-muted));
    border-bottom: 1px solid rgb(var(--color-border));
}

.calculator__results-roi-table-header span:last-child {
    text-align: right;
}

.calculator__results-roi-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: var(--spacing-3) var(--spacing-4);
    border-bottom: 1px solid rgb(var(--color-border));
    transition: background-color var(--transition-fast);
}

.calculator__results-roi-row:last-child {
    border-bottom: none;
}

.calculator__results-roi-cell {
    font-size: var(--text-base);
    color: rgb(var(--color-text));
}

.calculator__results-roi-cell--value {
    text-align: right;
    font-weight: var(--font-semibold);
}

/* ----------------------------------------
   Glassmorphism
   ---------------------------------------- */

.has-glassmorphism .calculator__progress,
.has-glassmorphism .calculator__step,
.has-glassmorphism .calculator__results-card {
    backdrop-filter: blur(var(--blur));
    box-shadow: 10px 10px 20px -10px #0000005c;
}

.has-glassmorphism .calculator__input,
.has-glassmorphism .calculator__tile {
    backdrop-filter: blur(var(--blur));
}

/* ----------------------------------------
   Responsive
   ---------------------------------------- */

@media (max-width: 640px) {
    .calculator__step-header {
        padding: var(--spacing-3) var(--spacing-4);
    }

    .calculator__step-body {
        padding: var(--spacing-3) var(--spacing-4) var(--spacing-4);
    }

    .calculator__step-question {
        font-size: var(--text-base);
    }

    .calculator__step-summary {
        display: none !important;
    }

    .calculator__tile {
        min-width: 100px;
        padding: var(--spacing-3) var(--spacing-2);
        font-size: var(--text-sm);
    }

    .calculator__contact-fields {
        grid-template-columns: 1fr;
    }

    .calculator__results-row {
        flex-direction: column;
        gap: var(--spacing-1);
    }

    .calculator__results-value {
        font-size: var(--text-base);
    }

    .calculator__repeater-row {
        padding: var(--spacing-3);
    }

    .calculator__results-roi-table-header,
    .calculator__results-roi-row {
        padding: var(--spacing-2) var(--spacing-3);
    }

    .calculator__results-roi-cell {
        font-size: var(--text-sm);
    }

    .calculator__results-roi-section-heading {
        font-size: var(--text-base);
    }
}


/* ============================================================================
   MARQUEE
   ============================================================================ */

/* Container */
.marquee {
    --marquee-gap: var(--spacing-6);
    --marquee-img-max-width: auto;
    --marquee-img-max-height: 80px;
    --marquee-duration: 30s;
    
    position: relative;
    width: 100%;
    overflow: hidden;
    mask-image: linear-gradient(
        to right,
        transparent,
        black 5%,
        black 95%,
        transparent
    );
    -webkit-mask-image: linear-gradient(
        to right,
        transparent,
        black 5%,
        black 95%,
        transparent
    );
}

/* Track - contains duplicated items for seamless loop */
.marquee__track {
    display: flex;
    width: max-content;
    animation: marquee-scroll var(--marquee-duration) linear infinite;
}

/* Reverse direction */
.marquee--right .marquee__track {
    animation-direction: reverse;
}

/* Pause on hover */
.marquee--pause-on-hover:hover .marquee__track {
    animation-play-state: paused;
}

/* Speed variants */
.marquee--speed-slow {
    --marquee-duration: 50s;
}

.marquee--speed-medium {
    --marquee-duration: 30s;
}

.marquee--speed-fast {
    --marquee-duration: 15s;
}

/* Gap variants */
.marquee--gap-none {
    --marquee-gap: 0;
}

.marquee--gap-xs {
    --marquee-gap: var(--spacing-2);
}

.marquee--gap-sm {
    --marquee-gap: var(--spacing-4);
}

.marquee--gap-md {
    --marquee-gap: var(--spacing-6);
}

.marquee--gap-lg {
    --marquee-gap: var(--spacing-8);
}

.marquee--gap-xl {
    --marquee-gap: var(--spacing-12);
}

.marquee--gap-2xl {
    --marquee-gap: var(--spacing-16);
}

.marquee--gap-3xl {
    --marquee-gap: var(--spacing-24);
}

/* Individual item */
.marquee__item {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: var(--marquee-gap);
}

.marquee__item img {
    display: block;
    max-width: var(--marquee-img-max-width);
    max-height: var(--marquee-img-max-height);
    width: auto;
    height: auto;
    object-fit: contain;
}

/* Keyframes */
@keyframes marquee-scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    .marquee__track {
        animation: none;
    }
}


/* ============================================================================
   COUNTER KPI
   Animated rolling counter for KPIs/metrics
   ============================================================================ */

/* Grid container */
.counter-kpi-grid {
    display: flex;
    gap: var(--spacing-8);
    justify-content: center;
    width: 100%;
}

.counter-kpi-grid--column {
    flex-direction: column;
    align-items: stretch;
}

@media (max-width: 768px) {
    .counter-kpi-grid {
        flex-direction: column;
        align-items: stretch;
    }
}

/* Base counter */
.counter-kpi {
    text-align: center;
    flex: 1;
    width: 100%
}

.counter-kpi__header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-3);
    margin-bottom: var(--spacing-3);
}

.counter-kpi__icon {
    color: rgb(var(--color-primary-active));
    width: var(--text-4xl);
    height: var(--text-4xl);
}

.counter-kpi__icon .icon {
    width: 100%;
    height: 100%;
}

.counter-kpi__display {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: var(--spacing-1);
}

/* Prefix/Suffix styling - smaller and lighter */
.counter-kpi__affix {
    font-size: var(--text-2xl);
    font-weight: var(--font-medium);
    color: rgb(var(--color-text-muted));
    line-height: var(--leading-none);
}

/* Number display */
.counter-kpi__number {
    display: inline-flex;
    align-items: baseline;
    font-size: var(--text-7xl);
    font-weight: var(--font-bold);
    line-height: var(--leading-none);
    color: rgb(var(--color-secondary));
}

/* Digit wrapper - clips the drum */
.counter-kpi__digit-wrapper,
.counter-kpi__sign-wrapper {
    display: inline-block;
    height: 1em;
    overflow: hidden;
    position: relative;
}

/* Digit drum - contains all digits 0-9, slides up/down */
.counter-kpi__digit-drum,
.counter-kpi__sign-drum {
    display: flex;
    flex-direction: column;
    transition: transform 2.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Individual digit */
.counter-kpi__digit,
.counter-kpi__sign {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 1em;
    line-height: 1;
}

/* Decimal point */
.counter-kpi__decimal-point {
    font-size: inherit;
    font-weight: inherit;
    line-height: var(--leading-none);
}

/* Label */
.counter-kpi__label {
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    color: rgb(var(--color-text));
    margin: 0;
}

/* ----------------------------------------
   Size Variants
   ---------------------------------------- */

/* Small */
.counter-kpi--sm {
    padding: var(--spacing-4);
    min-width: 140px;
}

.counter-kpi--sm .counter-kpi__header {
    gap: var(--spacing-2);
    margin-bottom: var(--spacing-2);
}

.counter-kpi--sm .counter-kpi__icon {
    width: var(--text-3xl);
    height: var(--text-3xl);
}

.counter-kpi--sm .counter-kpi__affix {
    font-size: var(--text-lg);
}

.counter-kpi--sm .counter-kpi__number {
    font-size: var(--text-4xl);
}

.counter-kpi--sm .counter-kpi__label {
    font-size: var(--text-sm);
}

/* Large */
.counter-kpi--lg {
    padding: var(--spacing-8);
    min-width: 220px;
}

.counter-kpi--lg .counter-kpi__header {
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-4);
}

.counter-kpi--lg .counter-kpi__icon {
    width: var(--text-5xl);
    height: var(--text-5xl);
}

.counter-kpi--lg .counter-kpi__affix {
    font-size: var(--text-3xl);
}

.counter-kpi--lg .counter-kpi__number {
    font-size: var(--text-6xl);
}

.counter-kpi--lg .counter-kpi__label {
    font-size: var(--text-lg);
}

/* ----------------------------------------
   Animation States
   ---------------------------------------- */

/* Initial state - hide drums until JS initializes */
.counter-kpi__number:not([data-initialized]) .counter-kpi__digit-drum,
.counter-kpi__number:not([data-initialized]) .counter-kpi__sign-drum {
    transition: none;
}

/* Animating state */
.counter-kpi__number[data-animating] .counter-kpi__digit-drum,
.counter-kpi__number[data-animating] .counter-kpi__sign-drum {
    transition: transform 2.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ----------------------------------------
   Glassmorphism Support
   ---------------------------------------- */

.has-glassmorphism .counter-kpi {
    backdrop-filter: blur(var(--blur));
}

/* ----------------------------------------
   Reduced Motion
   ---------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .counter-kpi__digit-drum,
    .counter-kpi__sign-drum {
        transition: none;
    }
}

/* ----------------------------------------
   Responsive
   ---------------------------------------- */

@media (max-width: 768px) {
    .counter-kpi {
        min-width: 0;
    }
    
    .counter-kpi__number {
        font-size: var(--text-5xl);
    }
    
    .counter-kpi__affix {
        font-size: var(--text-xl);
    }
    
    .counter-kpi--sm .counter-kpi__number {
        font-size: var(--text-3xl);
    }
    
    .counter-kpi--sm .counter-kpi__affix {
        font-size: var(--text-base);
    }
    
    .counter-kpi--lg .counter-kpi__number {
        font-size: var(--text-5xl);
    }
    
    .counter-kpi--lg .counter-kpi__affix {
        font-size: var(--text-2xl);
    }
}


/* ============================================================================
   HERO FLUID (Special Section)
   Aurora-wave hero with WebGL shader, threshold impact, and HUD readout.
   ============================================================================ */

.hero-fluid {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background: rgb(var(--color-background));
}

.hero-fluid__canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.hero-fluid__grain {
    position: absolute;
    inset: 0;
    background-repeat: repeat;
    mix-blend-mode: overlay;
    opacity: 0.25;
    pointer-events: none;
    z-index: 2;
}

.hero-fluid__content {
    position: relative;
    z-index: 4;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    height: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 0 var(--spacing-6);
    box-sizing: border-box;
}

.hero-fluid .heading--display {
    color: rgb(var(--color-text));
    line-height: 1.05;
    font-size: 4rem;
}

@media (min-width: 768px) {
    .hero-fluid__content {
        justify-content: flex-end;
        padding-bottom: var(--spacing-8);
    }

    .hero-fluid .heading--display {
        font-size: calc(var(--text-fluid-3xl) * 2);
        line-height: 0.95;
    }
}

.hero-fluid .heading__gradient {
    background: linear-gradient(134deg,
        rgb(var(--color-primary)),
        rgb(var(--color-primary-hover))
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-fluid .heading-group__subtitle {
    margin-top: var(--spacing-4);
    color: rgb(var(--color-text-muted));
    font-size: var(--text-lg);
    line-height: var(--leading-relaxed);
    max-width: 44ch;
}

.hero-fluid .button-group {
    margin-top: var(--spacing-6);
}

/* Slower, more dramatic staggered reveals for hero */
.hero-fluid .heading-group {
    --reveal-word-stagger: 0.14s;
}

.hero-fluid .heading-group__subtitle[data-reveal] {
    --delay-index: 3;
}

.hero-fluid [data-reveal] {
    --reveal-stagger-increment: 0.35s;
}

/* HUD readout */
.hero-fluid__hud {
    position: absolute;
    z-index: 4;
    right: var(--spacing-6);
    bottom: var(--spacing-8);
    font-family: var(--font-family-mono);
    font-size: var(--text-sm);
    line-height: 1.7;
    letter-spacing: 0.04em;
    color: rgb(var(--color-text-subtle) / 0.7);
    pointer-events: none;
    text-align: right;
}

.hero-fluid__hud-line {
    overflow: hidden;
    white-space: nowrap;
    display: block;
}

.hero-fluid__hud-cursor {
    display: inline-block;
    width: 1ch;
    animation: hud-blink 1s step-end infinite;
    color: rgb(var(--color-primary) / 0.4);
}

@keyframes hud-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

.hero-fluid__hud-status {
    color: rgb(var(--color-primary) / 0.5);
}

.hero-fluid__hud-warn {
    color: rgb(var(--color-warning) / 0.5);
    opacity: 0;
    transition: opacity 0.3s ease;
}

@media (max-width: 768px) {
    .hero-fluid__content {
        padding: 0 var(--spacing-4);
    }
    .hero-fluid__hud {
        right: var(--spacing-4);
        font-size: 0.6rem;
    }
}


/* ============================================================================
   SITE HEADER
   Fixed transparent header with glassmorphism on scroll.
   Includes mega menu panels and mobile hamburger trigger.
   ============================================================================ */

/* --- Base --- */

.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--z-sticky);
    height: var(--header-height);
}

/* Glassmorphism layer (pseudo-element trick for smooth transition).
   backdrop-filter is always active; we only transition opacity. */
.site-header::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgb(255 255 255 / 0.6);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgb(var(--color-border));
    opacity: 0;
    transition: opacity 300ms var(--easing),
                box-shadow 300ms var(--easing);
    pointer-events: none;
    z-index: -1;
}

/* Scrolled past threshold or mega menu open → reveal glass */
.site-header--scrolled::before {
    opacity: 1;
    box-shadow: 0px 5px 20px -6px rgb(0 0 0 / 0.05);
}

/* --- Inner container --- */

.site-header__inner {
    display: grid;
    grid-template-columns: 150px 1fr 150px;
    align-items: center;
    justify-content: space-between;
    height: var(--header-height);
    max-width: var(--site-max-width);
    margin: 0 auto;
    padding: 0 var(--spacing-8);
    position: relative;
    z-index: 2;
    box-sizing: border-box;
    transition: max-width 400ms var(--easing);
}

/* Fullwidth hero: start at 100% width — no JS needed on first paint */
body.has-fullwidth-hero .site-header__inner {
    max-width: 100%;
}

/* Once JS detects we scrolled past the hero, shrink back */
body.has-fullwidth-hero .site-header--past-hero .site-header__inner {
    max-width: var(--site-max-width);
}

/* --- Logo --- */

.site-header__logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    text-decoration: none;
    z-index: 2;
}

.site-header__logo-img {
    height: 42px;
    width: auto;
    display: block;
}

@media (max-width: 768px) {
    .site-header__logo-img {
        height: 38px;
    }
}

/* Default: dark logo visible, light hidden */
.site-header__logo-light {
    display: none;
}

/* Dark hero page: swap logos */
body.has-dark-hero .site-header__logo-dark {
    display: none;
}
body.has-dark-hero .site-header__logo-light {
    display: block;
}

/* When glassmorphism active (scrolled or mega open), revert to dark logo */
body.has-dark-hero .site-header--scrolled .site-header__logo-dark {
    display: block;
}
body.has-dark-hero .site-header--scrolled .site-header__logo-light {
    display: none;
}

/* --- Desktop navigation --- */

.site-header__nav {
    display: flex;
    align-items: center;
    gap: var(--spacing-1);
    margin: 0 auto;
    z-index: 2;
}

.site-header__menu-trigger,
.site-header__menu-link {
    display: flex;
    align-items: center;
    gap: var(--spacing-1);
    padding: var(--spacing-2) var(--spacing-3);
    font-size: var(--text-base);
    font-weight: var(--font-medium);
    color: rgb(var(--color-text));
    text-decoration: none;
    background: none;
    border: none;
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: background-color 150ms var(--easing),
                color 150ms var(--easing);
    white-space: nowrap;
    font-family: var(--font-family-base);
    letter-spacing: var(--letter-spacing-base);
    line-height: var(--leading-normal);
}

.site-header__menu-trigger:hover,
.site-header__menu-link:hover {
    background-color: rgb(var(--color-text) / 0.05);
}

.site-header__menu-trigger:focus-visible,
.site-header__menu-link:focus-visible {
    outline: 2px solid rgb(var(--color-primary));
    outline-offset: 2px;
}

/* Active trigger (mega menu open) */
.site-header__menu-trigger[aria-expanded="true"] {
    background-color: rgb(var(--color-text) / 0.05);
}

/* Chevron rotation */
.site-header__chevron {
    transition: transform 200ms var(--easing);
    flex-shrink: 0;
}

.site-header__menu-trigger[aria-expanded="true"] .site-header__chevron {
    transform: rotate(180deg);
}

/* Dark hero: white text on nav items */
body.has-dark-hero .site-header__menu-trigger,
body.has-dark-hero .site-header__menu-link {
    color: rgb(255 255 255);
}

body.has-dark-hero .site-header__menu-trigger:hover,
body.has-dark-hero .site-header__menu-link:hover {
    background-color: rgb(255 255 255 / 0.1);
}

/* When glassmorphism active, revert to dark text */
body.has-dark-hero .site-header--scrolled .site-header__menu-trigger,
body.has-dark-hero .site-header--scrolled .site-header__menu-link {
    color: rgb(var(--color-text));
}

body.has-dark-hero .site-header--scrolled .site-header__menu-trigger:hover,
body.has-dark-hero .site-header--scrolled .site-header__menu-link:hover {
    background-color: rgb(var(--color-text) / 0.05);
}

/* --- Actions --- */

.site-header__actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: var(--spacing-3);
    flex-shrink: 0;
    z-index: 2;
}

/* CTA button in header */
.site-header__cta {
    /* Inherits from .button .button--primary .button--sm */
}

/* Dark hero: CTA adjustments not needed (primary button is always visible) */

/* --- Hamburger button (mobile only) --- */

.site-header__hamburger {
    display: none; /* Hidden on desktop */
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    background: rgb(255 255 255 / 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgb(var(--color-border));
    border-radius: var(--radius-lg);
    color: rgb(var(--color-text));
    cursor: pointer;
    transition: background-color 150ms var(--easing),
                border-color 150ms var(--easing);
}

.site-header__hamburger:hover {
    background: rgb(255 255 255 / 0.85);
    border-color: rgb(var(--color-border) / 0.5);
}

.site-header__hamburger:focus-visible {
    outline: 2px solid rgb(var(--color-primary));
    outline-offset: 2px;
}

/* Dark hero: hamburger adjustments */
body.has-dark-hero .site-header__hamburger {
    background: rgb(255 255 255 / 0.15);
    border-color: rgb(255 255 255 / 0.2);
    color: rgb(255 255 255);
}

body.has-dark-hero .site-header__hamburger:hover {
    background: rgb(255 255 255 / 0.25);
}

/* When glassmorphism active, revert hamburger to default bright style */
body.has-dark-hero .site-header--scrolled .site-header__hamburger {
    background: rgb(255 255 255 / 0.7);
    border-color: rgb(var(--color-border));
    color: rgb(var(--color-text));
}

body.has-dark-hero .site-header--scrolled .site-header__hamburger:hover {
    background: rgb(255 255 255 / 0.85);
    border-color: rgb(var(--color-border));
}

/* Dark page: entire page is dark — header stays white permanently */
body.dark-page .site-header__logo-dark {
    display: none;
}
body.dark-page .site-header__logo-light {
    display: block;
}

body.dark-page .site-header__menu-trigger,
body.dark-page .site-header__menu-link {
    color: rgb(255 255 255);
}

body.dark-page .site-header__menu-trigger:hover,
body.dark-page .site-header__menu-link:hover {
    background-color: rgb(255 255 255 / 0.1);
}

body.dark-page .site-header__hamburger {
    background: rgb(255 255 255 / 0.15);
    border-color: rgb(255 255 255 / 0.2);
    color: rgb(255 255 255);
}

body.dark-page .site-header__hamburger:hover {
    background: rgb(255 255 255 / 0.25);
}

/* Dark page glassmorphism: dark tint instead of white */
body.dark-page .site-header::before {
    background: rgb(10 30 0 / 0.4);
    border-bottom: 1px solid rgb(var(--color-primary) / 0.1)
}

/* --- Mega Menu Panel (separate glassmorphism card) --- */

.site-header__mega-panel {
    position: absolute;
    top: calc(var(--header-height) + var(--spacing-2));
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    width: 400px;
    max-width: min(var(--site-max-width), calc(100vw - var(--spacing-6)));
    pointer-events: none;
}

.site-header__mega-panel--visible {
    pointer-events: auto;
}

/* Width per column count */
.site-header__mega-panel[data-columns="2"] {
    width: 800px;
}

.site-header__mega-panel[data-columns="3"] {
    width: 1200px;
}

.site-header__mega-panel-inner {
    background: rgb(255 255 255 / 0.6);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgb(var(--color-border));
    border-radius: var(--radius-2xl);
    padding: var(--spacing-3);
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 250ms var(--easing),
                transform 250ms var(--easing);
}

.site-header__mega-panel--visible .site-header__mega-panel-inner {
    opacity: 1;
    transform: translateY(0);
}

/* Column grid — driven by data-columns (= number of groups) */
.site-header__mega-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
}

.site-header__mega-grid[data-columns="2"] {
    grid-template-columns: repeat(2, 1fr);
}

.site-header__mega-grid[data-columns="3"] {
    grid-template-columns: repeat(3, 1fr);
}

/* Group column — divider between siblings */
.mega-group {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-1);
}

.mega-group + .mega-group {
    border-left: 1px solid rgb(var(--color-border) / 0.4);
    padding-left: var(--spacing-3);
}

/* Optional group label */
.mega-group__label {
    padding: var(--spacing-2) var(--spacing-4);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgb(var(--color-text-muted));
    font-family: var(--font-family-base);
}

@media (max-width: 768px) {
    .site-header__mega-panel,
    .site-header__mega-panel[data-columns="2"],
    .site-header__mega-panel[data-columns="3"] {
        width: calc(100vw - var(--spacing-4));
    }

    .site-header__mega-grid[data-columns="2"],
    .site-header__mega-grid[data-columns="3"] {
        grid-template-columns: 1fr;
    }

    /* Stack groups vertically on mobile — swap border-left for border-top */
    .mega-group + .mega-group {
        border-left: none;
        padding-left: 0;
        border-top: 1px solid rgb(var(--color-border) / 0.4);
        padding-top: var(--spacing-2);
        margin-top: var(--spacing-2);
    }
}


/* ============================================================================
   MEGA MENU ITEM
   Icon (in card) + Title + Arrow-right
   ============================================================================ */

.mega-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    padding: var(--spacing-3) var(--spacing-4);
    text-decoration: none;
    color: rgb(var(--color-text));
    border-radius: var(--radius-lg);
    font-family: var(--font-family-base);
    transition: background-color 150ms var(--easing);
}

.mega-item:hover {
    background-color: rgb(var(--color-text) / 0.04);
}

.mega-item:focus-visible {
    outline: 2px solid rgb(var(--color-primary));
    outline-offset: -2px;
    border-radius: var(--radius-lg);
}

/* Icon card */
.mega-item__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    background: rgb(var(--color-primary-light));
    border-radius: var(--radius-lg);
    color: rgb(var(--color-text));
    flex-shrink: 0;
}

/* Title */
.mega-item__title {
    flex: 1;
    font-weight: var(--font-medium);
    font-size: var(--text-base);
    line-height: var(--leading-snug);
}

/* Arrow */
.mega-item__arrow {
    display: flex;
    flex-shrink: 0;
    color: rgb(var(--color-text-subtle));
    transition: transform 200ms var(--easing),
                color 200ms var(--easing);
}

.mega-item:hover .mega-item__arrow {
    transform: translateX(4px);
    color: rgb(var(--color-primary-hover));
}


/* ============================================================================
   MOBILE MENU
   Full-screen glassmorphism overlay.
   ============================================================================ */

.mobile-menu {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    display: flex;
    align-items: stretch;
    justify-content: stretch;
    visibility: hidden;
    pointer-events: none;
}

.mobile-menu[hidden] {
    display: flex; /* Keep flex for transitions */
}

.mobile-menu--visible {
    visibility: visible;
    pointer-events: auto;
}

/* Backdrop (click to close) */
.mobile-menu__backdrop {
    position: absolute;
    inset: 0;
    background: rgb(var(--color-text) / 0.3);
    z-index: 0;
    opacity: 0;
    transition: opacity 300ms var(--easing);
}

.mobile-menu--visible .mobile-menu__backdrop {
    opacity: 1;
}

/* Full-screen panel — slides in from the right */
.mobile-menu__panel {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    flex: 1;
    background: rgb(255 255 255 / 0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    overflow: hidden;
    transform: translateX(100%);
    transition: transform 300ms var(--easing);
}

.mobile-menu--visible .mobile-menu__panel {
    transform: translateX(0);
}

/* Header row */
.mobile-menu__header {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: var(--spacing-5) var(--spacing-4) var(--spacing-4) var(--spacing-4);
    flex-shrink: 0;
}

.mobile-menu__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    background: rgb(var(--color-text) / 0.05);
    border: solid 1px rgb(var(--color-text) / 0.05);
    border-radius: var(--radius-lg);
    color: rgb(var(--color-text));
    cursor: pointer;
    transition: background-color 150ms var(--easing);
}

.mobile-menu__close:hover {
    background: rgb(var(--color-text) / 0.1);
}

.mobile-menu__close:focus-visible {
    outline: 2px solid rgb(var(--color-primary));
    outline-offset: 2px;
}

/* Scrollable body */
.mobile-menu__body {
    flex: 1;
    overflow-y: auto;
    padding: var(--spacing-2) 0;
    -webkit-overflow-scrolling: touch;
}

/* Dividers between top-level items */
.mobile-menu__body > .mobile-menu__link + .mobile-menu__link,
.mobile-menu__body > .mobile-menu__link + .mobile-menu__group,
.mobile-menu__body > .mobile-menu__group + .mobile-menu__link,
.mobile-menu__body > .mobile-menu__group + .mobile-menu__group {
    border-top: 1px solid rgb(var(--color-text) / 0.05)
}

/* Plain link item */
.mobile-menu__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-3) var(--spacing-5);
    font-size: var(--text-base);
    font-weight: var(--font-medium);
    color: rgb(var(--color-text));
    text-decoration: none;
    transition: background-color 150ms var(--easing);
}

.mobile-menu__link:hover {
    background-color: rgb(var(--color-text) / 0.04);
}

.mobile-menu__link-arrow {
    display: flex;
    flex-shrink: 0;
    color: rgb(var(--color-text));
}

/* Accordion group */
.mobile-menu__group {
}

.mobile-menu__group-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--spacing-3) var(--spacing-5);
    font-size: var(--text-base);
    font-weight: var(--font-medium);
    color: rgb(var(--color-text));
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--font-family-base);
    letter-spacing: var(--letter-spacing-base);
    transition: background-color 150ms var(--easing);
    text-align: left;
}

.mobile-menu__group-trigger:hover {
    background-color: rgb(var(--color-text) / 0.04);
}

.mobile-menu__group-trigger:focus-visible {
    outline: 2px solid rgb(var(--color-primary));
    outline-offset: 2px;
}

/* Chevron rotation */
.mobile-menu__chevron {
    transition: transform 200ms var(--easing);
    flex-shrink: 0;
}

.mobile-menu__group-trigger[aria-expanded="true"] .mobile-menu__chevron {
    transform: rotate(180deg);
}

/* Collapsible content */
.mobile-menu__group-content {
    overflow: hidden;
    max-height: 0;
    transition: max-height 300ms var(--easing);
    padding-left: var(--spacing-3);
    background: rgb(0 0 0 / 0.04);
}

.mobile-menu__group-content--open {
    /* max-height set by JS based on content */
}

/* Sub item link */
.mobile-menu__sub-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    padding: var(--spacing-3, var(--spacing-2-5)) var(--spacing-3);
    font-size: var(--text-sm);
    font-weight: var(--font-normal);
    color: rgb(var(--color-text));
    text-decoration: none;
    border-radius: var(--radius-lg);
    transition: background-color 150ms var(--easing),
                color 150ms var(--easing);
}

.mobile-menu__sub-item:not(:last-child) {
    border-bottom: 1px solid rgb(var(--color-text) / 0.04);
}

.mobile-menu__sub-item:hover {
    background-color: rgb(var(--color-text) / 0.04);
    color: rgb(var(--color-text));
}

.mobile-menu__sub-icon {
    display: flex;
    align-items: center;
    color: rgb(var(--color-text));
}

.mobile-menu__sub-icon > svg {
    width: 1.2rem;
    height: 1.2rem;
}

/* Group divider (between groups inside accordion content) */
.mobile-menu__divider {
    height: 1px;
    background: rgb(var(--color-border) / 0.3);
    margin: var(--spacing-2) 0;
}

/* Group label (optional heading above sub-items in a group) */
.mobile-menu__sub-label {
    padding: var(--spacing-3) var(--spacing-3) var(--spacing-1);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgb(var(--color-text-muted));
    font-family: var(--font-family-base);
}

/* Footer with CTA */
.mobile-menu__footer {
    padding: var(--spacing-4) var(--spacing-5);
    flex-shrink: 0;
    border-top: 1px solid rgb(var(--color-text) / 0.05);
    box-sizing: border-box;
}

.mobile-menu__cta {
    width: 100%;
    justify-content: center;
}


/* ============================================================================
   HEADER: RESPONSIVE
   ============================================================================ */

/* Desktop: hide hamburger, show nav */
@media (min-width: 769px) {
    .site-header__hamburger {
        display: none;
    }
    
    .site-header__nav {
        display: flex;
    }
}

/* Mobile: hide desktop nav and CTA, show hamburger */
@media (max-width: 768px) {
    .site-header__nav {
        display: none;
    }
    
    .site-header__cta {
        display: none;
    }
    
    .site-header__hamburger {
        display: flex;
    }
    
    .site-header__inner {
        padding: 0 var(--spacing-6) 0 var(--spacing-5);
        grid-template-columns: 1fr 1fr;
    }
}


/* ============================================================================
   FIXED HEADER: FIRST SECTION PADDING
   Compensates for the fixed header overlapping content.
   ============================================================================ */

body:not(.hide-header) .page-builder > section:first-child,
body:not(.hide-header) .page-builder > div:first-child > section:first-child {
    padding-top: calc(var(--header-height) + var(--spacing-16));
}

@media (max-width: 768px) {
    body:not(.hide-header) .page-builder > section:first-child,
    body:not(.hide-header) .page-builder > div:first-child > section:first-child {
        padding-top: calc(var(--header-height) + var(--spacing-8));
    }
}


/* ============================================================================
   BODY SCROLL LOCK (for mobile menu)
   ============================================================================ */

body.menu-open {
    overflow: hidden;
}


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

.site-footer {
    background-color: rgb(var(--color-info-light));
    color: rgb(var(--color-text));
    border-top: 1px solid rgb(var(--color-border));
}

.site-footer.dark {
    background-color: rgb(var(--color-background));
}

.site-footer__main {
    padding: var(--spacing-12) 0;
}

.site-footer__container {
    max-width: var(--site-max-width);
    margin: 0 auto;
    padding: 0 var(--spacing-6);
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: var(--spacing-8) var(--spacing-12);
    align-items: start;
    box-sizing: border-box;
}

.site-footer__column {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
}

.site-footer__logo {
    display: inline-block;
}

.site-footer__logo-img {
    display: block;
    max-height: 3rem;
    width: auto;
    object-fit: contain;
}

.site-footer__tagline {
    margin: 0;
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
    color: rgb(var(--color-text-muted));
}

.site-footer__contact {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
}

.site-footer__contact-link {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-3);
    color: rgb(var(--color-text));
    text-decoration: none;
    font-size: var(--text-sm);
    transition: color var(--transition-fast);
}

.site-footer__contact-link:hover {
    color: rgb(var(--color-primary-active));
}

.site-footer__contact-icon {
    flex-shrink: 0;
    color: rgb(var(--color-primary));
    width: 1.25em;
    height: 1.25em;
}

.site-footer__heading {
    margin: 0 0 var(--spacing-2);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: rgb(var(--color-text-subtle));
}

.site-footer__links,
.site-footer__offices {
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-footer__links {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
}

.site-footer__link {
    color: rgb(var(--color-text-muted));
    text-decoration: none;
    font-size: var(--text-sm);
    transition: color var(--transition-fast);
}

.site-footer__link:hover {
    color: rgb(var(--color-primary-active));
}

.site-footer__offices {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4);
}

.site-footer__office {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-1);
}

.site-footer__office-heading {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    color: rgb(var(--color-text));
}

.site-footer__office-icon {
    flex-shrink: 0;
    color: rgb(var(--color-primary-active)) !important;
    width: 1.25em;
    height: 1.25em;
    margin-bottom: -0.125em;
}

.site-footer__office-street,
.site-footer__office-postal {
    font-size: var(--text-sm);
    color: rgb(var(--color-text-muted));
    padding-left: calc(1rem + var(--spacing-3));
}

.site-footer__form-text {
    margin: 0 0 var(--spacing-3);
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
    color: rgb(var(--color-text-muted));
}

.site-footer__column--form .form {
    margin-top: 0;
}

.site-footer__column label {
    display: none;
}

.site-footer__column .button {
    padding: var(--spacing-2) var(--spacing-4);
    font-size: var(--text-base);
}

/* Bottom bar: same background as main */
.site-footer__bottom {
    border-top: 1px solid rgb(var(--color-border));
    padding: var(--spacing-6) 0;
}

.site-footer__bottom-inner {
    max-width: var(--site-max-width);
    margin: 0 auto;
    padding: 0 var(--spacing-6);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-4);
    box-sizing: border-box;
}

.site-footer__copyright {
    margin: 0;
    font-size: var(--text-sm);
    color: rgb(var(--color-text-muted));
}

.site-footer__legal {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-4);
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-footer__legal-link {
    color: rgb(var(--color-text-muted));
    text-decoration: none;
    font-size: var(--text-sm);
    transition: color var(--transition-fast);
}

.site-footer__legal-link:hover {
    color: rgb(var(--color-primary-active));
}

.site-footer__social {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-footer__social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(var(--color-text-muted));
    transition: color var(--transition-fast);
}

.site-footer__social-link:hover {
    color: rgb(var(--color-primary-active));
}

/* Mobile: single column with configurable order */
@media (max-width: 768px) {
    .site-footer__container {
        grid-template-columns: 1fr;
        gap: var(--spacing-8);
    }

    .site-footer__column {
        order: var(--footer-order, 0);
    }

    .site-footer__heading {
        margin: 0;
    }

    .site-footer__bottom-inner {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }
}


/* ============================================================================
   DEFAULT PAGE TEMPLATE
   ============================================================================ */

/* Entrance animation */
@keyframes default-page-fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.default-page__title-section {
    animation: default-page-fade-in 0.5s var(--easing) both;
}

.default-page__content-section {
    animation: default-page-fade-in 0.5s var(--easing) 0.15s both;
}

@media (prefers-reduced-motion: reduce) {
    .default-page__title-section,
    .default-page__content-section {
        animation: none;
    }
}

/* Title section */
.default-page__title-section {
    padding: var(--spacing-16) var(--spacing-6) var(--spacing-8);
}

body:not(.hide-header) .default-page__title-section {
    padding-top: calc(var(--header-height) + var(--spacing-16));
}

.default-page__title-container {
    max-width: var(--container-regular);
    margin: 0 auto;
}

/* Content section */
.default-page__content-section {
    padding: 0 var(--spacing-6) var(--spacing-16);
}

.default-page__content-container {
    max-width: var(--container-medium);
    margin: 0 auto;
}

@media (max-width: 768px) {
    .default-page__title-section {
        padding: var(--spacing-8) var(--spacing-4) var(--spacing-6);
    }

    body:not(.hide-header) .default-page__title-section {
        padding-top: calc(var(--header-height) + var(--spacing-8));
    }

    .default-page__content-section {
        padding: 0 var(--spacing-4) var(--spacing-12);
    }
}


/* ============================================================================
   404 ERROR PAGE
   ============================================================================ */

.error-404__section {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 80vh;
    box-sizing: border-box;
    padding: var(--spacing-16) var(--spacing-6);
}

body:not(.hide-header) .error-404__section {
    padding-top: calc(var(--header-height) + var(--spacing-16));
}

.error-404__container {
    max-width: var(--container-narrow);
    margin: 0 auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-4);
}

.error-404__code {
    font-size: var(--text-fluid-3xl);
    font-weight: var(--font-bold);
    line-height: var(--leading-none);
    letter-spacing: var(--tracking-tight);
    color: rgb(var(--color-primary-hover));
    margin: 0;
}

.error-404__description {
    font-size: var(--text-lg);
    line-height: var(--leading-relaxed);
    color: rgb(var(--color-text-muted));
    margin: 0;
    max-width: 480px;
}

.error-404__actions {
    margin-top: var(--spacing-4);
}

/* Fade-in animation */
.error-404__section {
    animation: error-404-fade-in 0.6s var(--easing) both;
}

@keyframes error-404-fade-in {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .error-404__section {
        animation: none;
    }
}

@media (max-width: 768px) {
    .error-404__section {
        padding: var(--spacing-8) var(--spacing-4);
        min-height: 90vh;
    }

    body:not(.hide-header) .error-404__section {
        padding-top: calc(var(--header-height) + var(--spacing-8));
    }

    .error-404__code {
        font-size: var(--text-fluid-2xl);
    }

    .error-404__description {
        font-size: var(--text-base);
    }
}