:root {
    --celtiis-color-primary: var(--bs-secondary);
    --celtiis-color-primary-dark: var(--bs-secondary);
    --celtiis-color-secondary: #8DC63F;
    --celtiis-color-secondary-dark: #94bb35;
    --celtiis-color-surface: #ffffff;
    --celtiis-color-surface-alt: #f4f7fb;
    --celtiis-color-text: var(--bs-secondary);
    --celtiis-color-muted: #54627f;
    --celtiis-color-border: #dfe5f2;
    --celtiis-color-primary-rgb: 46 71 135;
    --celtiis-color-secondary-rgb: 168 205 69;
    --celtiis-color-surface-rgb: 255 255 255;
    --celtiis-color-text-rgb: 36 50 91;
    --celtiis-radius-sm: 18px;
    --celtiis-radius-md: 22px;
    --celtiis-radius-lg: 28px;
    --celtiis-radius-pill: 999px;
    --celtiis-content-width: 1200px;
    --celtiis-transition-fast: 0.25s ease;
    --celtiis-transition-medium: 0.35s ease;
    --celtiis-shadow-soft: 0 12px 36px rgb(var(--celtiis-color-primary-rgb) / 0.08);
    --celtiis-focus-ring: inset 0 0 0 2px rgb(var(--celtiis-color-secondary-rgb) / 0.55);
}

.celtiis-landing-container {
    width: min(100%, var(--celtiis-content-width));
    margin-inline: auto;
}

:where(
    .celtiis-carousel,
    .celtiis-buttons,
    .celtiis-blockquote,
    .celtiis-articles,
    .celtiis-accordion
) {
    color: var(--celtiis-color-text);
}

.celtiis-mobile-cards__pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 18px;
}

.celtiis-mobile-cards__pagination .swiper-pagination-bullet {
    width: 16px;
    height: 16px;
    margin: 0 !important;
    border: 2px solid var(--celtiis-color-primary);
    border-radius: 999px;
    background: transparent;
    opacity: 1;
    position: relative;
}

.celtiis-mobile-cards__pagination .swiper-pagination-bullet::after {
    content: "";
    position: absolute;
    inset: 3px;
    border-radius: 999px;
    background: var(--celtiis-color-primary);
    opacity: 0;
    transform: scale(0.35);
    transition: transform var(--celtiis-transition-fast), opacity var(--celtiis-transition-fast);
}

.celtiis-mobile-cards__pagination .swiper-pagination-bullet-active {
    border-color: var(--celtiis-color-primary);
}

.celtiis-mobile-cards__pagination .swiper-pagination-bullet-active::after {
    opacity: 1;
    transform: scale(1);
}