/* === tokens/index.css === */
@import './typography.css';
@import './colors.css';
@import './spacing.css';

:root {
    /*
     * Базовый коэффициент для размеров, заданных через var(--pixel).
     * В прежней версии между 768px и 1439px коэффициент рос до 1.87,
     * из-за чего на ноутбуках и Mac элементы становились непропорционально
     * крупными. На десктопе и планшете он теперь никогда не больше 1.
     */
    --pixel: calc(clamp(360px, 100vw, 1440px) / 1440);
}

@media (max-width: 1439px) {
    :root {
        --pixel: calc(clamp(360px, 100vw, 768px) / 768);
    }
}

@media (max-width: 767px) {
    :root {
        --pixel: calc(clamp(320px, 100vw, 360px) / 360);
    }

    .d-br {
        display: none;
    }
}


/* === tokens/colors.css === */
:root {
  /* ─── PRIMARY ─────────────────────────────────────────────────────────────── */
  --color-sapphire-deep: #0a1b2d;   /* Фон, логотип, ключевые блоки, основной цвет бренда */
  --color-solar-gold:    #eea63a;   /* Основной акцент. Фон, логотип, ключевые блоки */
  --color-sun-gold:      #eead13;   /* Осветлённое золото. Текст на тёмном фоне */

  /* ─── SECONDARY (глубина и градации) ─────────────────────────────────────── */
  --color-twilight-grey: #8a7e94;   /* Обводки, иконки на светлом фоне */
  --color-stroke-grey:   #d0cec8;   /* Обводки, иконки на тёмном фоне */
  --color-ivory-white:   #f5f0e8;   /* Тёплый светлый. Фон светлых секций, карточек */

  /* ─── FUNCTIONAL (интерфейс) ──────────────────────────────────────────────── */
  --color-white:         #ffffff;   /* Основной фон текстовых блоков */
  --color-soft-cream:    #fbf7f0;   /* Кремовый. Основной светлый фон сайта */
  --color-graphite:      #2a2a2a;   /* Подвал, письма, альтернативный тёмный */
  --color-success:       #4a7c59;   /* Успешные действия, галочки */
  --color-error:         #a84141;   /* Ошибки, предупреждения */

  /* ─── UI NEUTRAL (из активных компонентов) ───────────────────────────────── */
  --color-grey:          #949494;   /* Неактивный текст, метаданные */
  --color-light-grey:    #c3c3c3;   /* Границы карточек, разделители */
  --color-bg-badge:      #f5f5f5;   /* Фон бейджей/тегов */
  --color-ordinal-muted: #c2c2c2;   /* Порядковый номер card--solution */

  /* ─── SEMANTIC ALIASES ────────────────────────────────────────────────────── */
  --color-bg-dark:        var(--color-sapphire-deep);
  --color-bg-light:       var(--color-soft-cream);
  --color-bg-section:     var(--color-ivory-white);
  --color-bg-footer:      var(--color-graphite);
  --color-bg-white:       var(--color-white);

  --color-accent:         var(--color-solar-gold);
  --color-accent-text:    var(--color-sun-gold);

  --color-border-light:   var(--color-twilight-grey);
  --color-border-dark:    var(--color-stroke-grey);
  --color-border-ui:      var(--color-light-grey);

  --color-text-primary:   var(--color-sapphire-deep);
  --color-text-on-dark:   var(--color-ivory-white);
  --color-text-accent:    var(--color-solar-gold);
  --color-text-muted:     var(--color-grey);
  --color-text-white:     var(--color-white);

  --color-status-success: var(--color-success);
  --color-status-error:   var(--color-error);
}


/* === tokens/typography.css === */
/* ─── LOCAL FONTS ─────────────────────────────────────────────────────────── */

/* Manrope */
@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../../fonts/manrope/Manrope-Medium.ttf') format('truetype');
}
@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../../fonts/manrope/Manrope-SemiBold.ttf') format('truetype');
}
@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../../fonts/manrope/Manrope-Bold.ttf') format('truetype');
}

/* STIX Two Text */
@font-face {
    font-family: 'STIX Two Text';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../../fonts/stix-two-text/STIXTwoText-Regular.ttf') format('truetype');
}
@font-face {
    font-family: 'STIX Two Text';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../../fonts/stix-two-text/STIXTwoText-Medium.ttf') format('truetype');
}
@font-face {
    font-family: 'STIX Two Text';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../../fonts/stix-two-text/STIXTwoText-SemiBold.ttf') format('truetype');
}
@font-face {
    font-family: 'STIX Two Text';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../../fonts/stix-two-text/STIXTwoText-Bold.ttf') format('truetype');
}
@font-face {
    font-family: 'STIX Two Text';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('../../fonts/stix-two-text/STIXTwoText-Italic.ttf') format('truetype');
}
@font-face {
    font-family: 'STIX Two Text';
    font-style: italic;
    font-weight: 500;
    font-display: swap;
    src: url('../../fonts/stix-two-text/STIXTwoText-MediumItalic.ttf') format('truetype');
}

/* Unbounded */
@font-face {
    font-family: 'Unbounded';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../../fonts/unbounded/Unbounded-Regular.ttf') format('truetype');
}
@font-face {
    font-family: 'Unbounded';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../../fonts/unbounded/Unbounded-Medium.ttf') format('truetype');
}
@font-face {
    font-family: 'Unbounded';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../../fonts/unbounded/Unbounded-Bold.ttf') format('truetype');
}

:root {
    /* ─── FONT FAMILIES ──────────────────────────────────────────────────────── */
    --font-heading: 'STIX Two Text', serif; /* Заголовки H1–H3 */
    --font-body: 'Manrope', sans-serif; /* Тело, UI, кнопки */
    --font-display: 'Unbounded', sans-serif; /* Декоративные, цифры, акценты */

    /* ─── FONT WEIGHTS ───────────────────────────────────────────────────────── */
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;

    /* ─── LINE HEIGHTS ───────────────────────────────────────────────────────── */
    --lh-tight: 1; /* Заголовки STIX */
    --lh-normal: 1.3; /* Manrope body */

    /* ─── FONT SIZES (fluid via clamp, base 1440px) ─────────────────────────── */
    /*
   * Formula: clamp(mobile, preferred_vw, desktop)
   * preferred_vw = desktop_px / 1440 * 100
   */

    /* Titles — STIX Two Text */
    /* Formula: (figma_mobile_px / 360) * 100 = vw coefficient */
    --fs-h1: clamp(2.8125rem, 12.5vw, 4.375rem); /* 45px at 360 → 70px max */
    --fs-h2: clamp(2.1875rem, 9.722vw, 3.75rem); /* 35px at 360 → 60px max */
    --fs-h3: clamp(1.75rem, 7.778vw, 2.8125rem); /* 28px at 360 → 45px max */
    --fs-h4: clamp(1.75rem, calc(var(--pixel) * 35), 2.8125rem);

    /* Body — Manrope Medium */
    --fs-body-1: clamp(1rem, calc(var(--pixel) * 20), 2rem); /* 16px → 20px */
    --fs-body-2: clamp(0.8375rem, calc(var(--pixel) * 18), 2rem); /* 15px → 18px */
    --fs-body-3: clamp(0.8125rem, calc(var(--pixel) * 15), 1.9375rem); /* 13px → 15px */

    --fs-body-15: clamp(0.8125rem, 1.95vw, 1.5rem); /* 13px → 15px */

    /* Display — Unbounded */
    --fs-display: clamp(1.75rem, 3.472vw, 3rem); /* 28px → 48px */

    /* ─── LETTER SPACING ─────────────────────────────────────────────────────── */
    --ls-heading: 0em; /* STIX Two Text — без трекинга */
    --ls-body-1: -0.04em; /* Manrope Body 1 — -0.8px at 20px */
    --ls-body-2: -0.02em; /* Manrope Body 2/3 — -0.36px at 18px */
}

/* H2 mobile override removed — single clamp covers all breakpoints */

@media (max-width: 767px) {
    :root {
        --fs-body-15: clamp(0.8125rem, 4.17vw, 1.5rem); /* 13px → 15px */
        --fs-h4: clamp(1rem, calc(var(--pixel) * 25), 2.8125rem);
    }
}


/* === tokens/spacing.css === */
:root {
    /*
   * Spacing tokens — fluid via clamp (base 1440px desktop).
   * Used for padding, gap, margin.
   * Formula: clamp(mobile_px, vw, desktop_px)
   */

    --space-1: clamp(0.25rem, 0.347vw, 0.3125rem); /*  5px */
    --space-2: clamp(0.5rem, 0.694vw, 0.625rem); /*   10px */
    --space-3: clamp(0.75rem, 1.042vw, 0.9375rem); /* 15px */
    --space-4: clamp(1rem, calc(var(--pixel) * 20), 1.5rem); /* 20px */
    --space-5: clamp(1.25rem, 1.736vw, 1.5625rem); /* 25px */
    --space-6: clamp(1.75rem, 2.5vw, 2.5rem); /* 28px → 40px */
    --space-7: clamp(2.25rem, 3.125vw, 2.8125rem); /* 36px → 45px */
    --space-8: clamp(2.5rem, 4.167vw, 3.75rem); /* 40px → 60px */
    --space-9: clamp(3rem, 5.208vw, 5rem); /* 48px → 80px */
    --space-10: clamp(4rem, 6.944vw, 7.5rem); /* 64px → 120px */

    /* ─── SEMANTIC SPACING ───────────────────────────────────────────────────── */
    --gap-xs: var(--space-1); /* Мелкий зазор (иконки) */
    --gap-sm: var(--space-2); /* Элементы внутри бейджей */
    --gap-md: var(--space-4); /* Стандартный gap карточек */
    --gap-lg: var(--space-5); /* Column gap секций */
    --gap-xl: var(--space-8); /* Gap между секциями */

    --padding-btn: var(--space-4); /* Кнопка: горизонтальный padding */
    --padding-badge: var(--space-2); /* Бейдж padding */
    --padding-card: var(--space-4); /* Card padding */
    --padding-section: var(--space-6); /* Горизонтальный padding страницы */

    /* ─── RADII ──────────────────────────────────────────────────────────────── */
    --radius-sm: 0px; /* Кнопки, бейджи — острые углы */
    --radius-md: 0px; /* Карточки — острые */
    --radius-btn: 0px; /* Button radius */

    /* ─── SECTION MARGIN ────────────────────────────────────────────────────── */
    /* 100px at 360 → 120px at 768 → 140px at 1440 */
    --section-margin: clamp(6.25rem, calc(5.147rem + 4.902vw), 8.75rem);

    /* ─── HEIGHTS ────────────────────────────────────────────────────────────── */
    --h-btn: 45px; /* Высота кнопки */
    --h-badge: 45px; /* Высота бейджа */

    /* ─── BORDER ─────────────────────────────────────────────────────────────── */
    --border-width: 1px;
    --border-width-accent: 2px;
}

@media (max-width: 1439px) {
    :root {
        --space-2: clamp(0.5rem, 1.3vw, 1.625rem);
    }
}

@media (max-width: 767px) {
    :root {
        --space-2: clamp(0.5rem, 2.78vw, 1.625rem);
    }
}


/* === components/typography.css === */
/* ─── TYPOGRAPHY COMPONENTS ───────────────────────────────────────────────────
 * Utility classes for all type styles from Figma.
 * ─────────────────────────────────────────────────────────────────────────── */

/* Reset */
h1,
h2,
h3,
h4,
p {
    margin: 0;
}

/* ─── Headings — STIX Two Text ───────────────────────────────────────────── */

.h1 {
    font-family: var(--font-heading);
    font-weight: var(--fw-regular);
    font-size: var(--fs-h1);
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-heading);
}

.h1--italic {
    font-style: italic;
}

.h2 {
    font-family: var(--font-heading);
    font-weight: var(--fw-regular);
    font-size: var(--fs-h2);
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-heading);
}

.h3 {
    font-family: var(--font-heading);
    font-weight: var(--fw-medium);
    font-size: var(--fs-h3);
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-heading);
}

.h4 {
    font-family: var(--font-heading);
    font-weight: var(--fw-medium);
    font-size: var(--fs-h4);
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-heading);
}

/* ─── Body — Manrope Medium ─────────────────────────────────────────────── */

.body-1 {
    font-family: var(--font-body);
    font-weight: var(--fw-medium);
    font-size: var(--fs-body-1);
    line-height: var(--lh-normal);
    letter-spacing: var(--ls-body-1);
}

.body-2 {
    font-family: var(--font-body);
    font-weight: var(--fw-medium);
    font-size: var(--fs-body-2);
    line-height: var(--lh-normal);
    letter-spacing: var(--ls-body-2);
}

.body-3 {
    font-family: var(--font-body);
    font-weight: var(--fw-medium);
    font-size: var(--fs-body-3);
    line-height: var(--lh-normal);
    letter-spacing: var(--ls-body-2);
}

.upline {
    font-family: var(--font-body);
    font-weight: var(--fw-medium);
    font-size: var(--fs-body-3);
    line-height: var(--lh-normal);
    letter-spacing: var(--ls-body-2);
    color: var(--color-solar-gold);
}

/* ─── Color modifiers ──────────────────────────────────────────────────── */

.text-primary {
    color: var(--color-text-primary);
}
.text-on-dark {
    color: var(--color-text-on-dark);
}
.text-accent {
    color: var(--color-text-accent);
}
.text-muted {
    color: var(--color-text-muted);
}
.text-white {
    color: var(--color-white);
}


/* === components/button.css === */
/* ─── BUTTON ─────────────────────────────────────────────────────────────────
 * Figma: button component (node 108:1691)
 * Height: 45px | px: 20px | gap: 5px | border-radius: 0 (sharp)
 * ─────────────────────────────────────────────────────────────────────────── */

.btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    text-decoration: none;
    cursor: pointer;
    border: none;
    background: none;
    font-family: var(--font-body);
    font-weight: var(--fw-medium);
    font-size: var(--fs-body-3);
    line-height: var(--lh-normal);
    letter-spacing: var(--ls-body-2);
    white-space: nowrap;
}

.btn__label {
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--h-btn);
    padding: 0 var(--padding-btn);
}

.btn__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--h-btn);
    height: var(--h-btn);
    flex-shrink: 0;
    position: relative;
}

.btn__icon > svg {
    display: none;
}

.btn__icon::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    transform: rotate(-45deg);
    background-image: url('../../img/arrow_black.svg');
    background-position: center;
    background-size: 30% 30%;
    background-repeat: no-repeat;
}

/* Transitions */
.btn__label,
.btn__icon,
.btn__icon::after {
    transition:
        background-color 0.22s ease,
        color 0.22s ease,
        filter 0.22s ease,
        transform 0.22s ease,
        border-color 0.22s ease;
}

/* ─── VARIANTS ────────────────────────────────────────────────────────────── */

/* Dark */
.btn--dark .btn__label {
    background-color: var(--color-bg-dark);
    color: var(--color-text-white);
}

.btn--dark .btn__icon {
    background-color: var(--color-white);
    border: solid 1px var(--color-bg-dark);
}

.btn--dark:hover .btn__icon {
    background-color: var(--color-bg-dark);
}

.btn--dark:hover .btn__icon::after {
    filter: brightness(0) invert(1);
    transform: rotate(0);
}

/* White */
.btn--white .btn__label {
    background-color: var(--color-white);
    color: var(--color-text-primary);
}

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

.btn--white .btn__icon::after {
    filter: brightness(0) invert(1);
}

.btn--white:hover .btn__label,
.btn--white:hover .btn__icon {
    background-color: var(--color-white);
}

.btn--white:hover .btn__icon::after {
    filter: brightness(0) invert(0);
    transform: rotate(0);
}

/* Gold */
.btn--gold .btn__label {
    background-color: var(--color-solar-gold);
    color: var(--color-text-primary);
}

.btn--gold .btn__icon {
    background-color: var(--color-solar-gold);
    color: var(--color-text-primary);
}

.btn--gold:hover .btn__label,
.btn--gold:hover .btn__icon {
    background-color: var(--color-sapphire-deep);
    color: var(--color-white);
}

/* Outline */
.btn--outline .btn__label {
    background-color: transparent;
    color: var(--color-text-primary);
    border: var(--border-width) solid var(--color-text-primary);
}

.btn--outline:hover .btn__label {
    background-color: var(--color-text-primary);
    color: var(--color-white);
}

/* ─── PRIMARY (full-width CTA) ────────────────────────────────────────────────
 * Large standalone button: no .btn base. Expanding white circle on hover.
 * ─────────────────────────────────────────────────────────────────────────── */

.button--primary {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: calc(var(--pixel) * 45);
    background-color: var(--color-sapphire-deep);
    color: var(--color-white);
    border: none;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    /* Text stays above the circle */
    isolation: isolate;
    transition: 0.3s color ease;
}

/* White circle — diameter = 50% of button width, grows from 0 to full size */
.button--primary::after {
    content: '';
    position: absolute;
    z-index: -1;
    left: 50%;
    top: 40%;
    width: 50%;
    aspect-ratio: 1;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 1);
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
    pointer-events: none;
    transition:
        transform 0.55s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.3s ease;
}

.button--primary:hover {
    color: var(--color-sapphire-deep);
}

.button--primary:hover::after {
    transform: translate(-50%, -30%) scale(1);
    opacity: 1;
}

@media (max-width: 767px) {
    .button--primary::after {
        width: 80%;
    }
}


/* === components/badge.css === */
/* ─── BADGE / TAG ─────────────────────────────────────────────────────────────
 * Figma: badge (node 224:1071), border badge (node 97:921)
 * Height: 45px | padding: 10px | sharp corners
 * ─────────────────────────────────────────────────────────────────────────── */

.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--h-badge);
    padding: 0 var(--padding-badge);
    font-family: var(--font-body);
    font-weight: var(--fw-medium);
    font-size: var(--fs-body-3);
    line-height: var(--lh-normal);
    letter-spacing: var(--ls-body-3);
    white-space: nowrap;
}

/* На светлом фоне — filled */
.badge--filled {
    background-color: var(--color-bg-badge);
    color: var(--color-text-primary);
}

/* На тёмном фоне — outline */
.badge--outline {
    background-color: transparent;
    border: var(--border-width) solid var(--color-white);
    color: var(--color-white);
}

/* Акцентный */
.badge--accent {
    background-color: var(--color-solar-gold);
    color: var(--color-text-primary);
}


/* === components/card.css === */
/* ─── CARD ────────────────────────────────────────────────────────────────────
 * Figma: card (node 224:1065) — destination card
 * Border: 1px #C3C3C3 | padding: 20px | gap: 20px | sharp corners
 * ─────────────────────────────────────────────────────────────────────────── */

.card {
    display: flex;
    flex-direction: column;
    gap: var(--gap-md);
    padding: var(--padding-card);
    border: var(--border-width) solid var(--color-border-ui);
    background-color: var(--color-white);
    position: relative;
}

.card .card__link {
    display: none;
}

.card__badges {
    display: flex;
    gap: var(--gap-sm);
}

.card__title {
    font-family: var(--font-heading);
    font-weight: var(--fw-regular);
    font-size: var(--fs-h3);
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-heading);
    color: var(--color-accent);
    margin: 0;
}

.card__meta {
    display: flex;
    align-items: center;
    gap: var(--gap-sm);
    font-family: var(--font-body);
    font-weight: var(--fw-medium);
    font-size: var(--fs-body-2);
    line-height: var(--lh-normal);
    letter-spacing: var(--ls-body-2);
    color: var(--color-text-muted);
}

.card__divider {
    height: 1px;
    width: 100%;
    background-color: var(--color-border-ui);
}

.card__footer {
    display: flex;
    align-items: center;
    gap: var(--gap-sm);
    font-family: var(--font-body);
    font-weight: var(--fw-medium);
    font-size: var(--fs-body-2);
    line-height: var(--lh-normal);
    letter-spacing: var(--ls-body-2);
    color: var(--color-text-primary);
}

@media (max-width: 1439px) {
    .card {
        position: relative;
    }
    .card .card__link {
        display: block;
    }

    .card .card__badges-group {
        display: none !important;
    }

    .card__flag {
        position: absolute;
        top: calc(var(--pixel) * 20);
        right: calc(var(--pixel) * 34);
    }

    .card__meta {
        display: none;
    }

    .card__divider {
        display: none;
    }
}

@media (max-width: 768px) {
    .card__flag {
        right: calc(var(--pixel) * 20);
    }
}

/* ─── SOLUTION CARD ─────────────────────────────────────────────────────────
 * Figma node 108:1991 — "Что мы решаем для вас"
 * Structure: ordinal → content-group → badges
 * Mobile: ordinal → badges → content (via CSS order)
 * ─────────────────────────────────────────────────────────────────────────── */
.card--solution {
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Figma: gap=120 SPACE_BETWEEN */
    padding: 1.25rem; /* 20px all sides */
    border: none; /* Figma 108:1991 — no border */
    background-color: var(--color-bg-badge); /* #F5F5F5 */
    transition: background-color 0.2s ease;
    position: relative;
    min-height: 22.5rem;
    transition: border-color 0.2s ease;
}

.card--solution::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    inset: 0;

    background: linear-gradient(128.93deg, #f5f5f5 71.96%, #eea63a 198.38%);
    border: 1px solid;
    border-image-source: linear-gradient(127.61deg, #ffffff 28.24%, #eea63a 99.62%);

    opacity: 0;
    transition: opacity 0.22s ease;

    z-index: 0;
}

.card--solution > * {
    position: relative;
    z-index: 1;
}

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

/* Ordinal: STIX Two Text 400 60px muted grey */
.card--solution__ordinal {
    font-family: var(--font-heading); /* STIX Two Text */
    font-weight: var(--fw-regular);
    font-size: 3.75rem; /* 60px */
    line-height: 1;
    letter-spacing: 0;
    color: var(--color-ordinal-muted); /* #C2C2C2 */
    margin: 0;
}

/* Content group: tags → title → desc → divider → desc-long */
.card--solution__content {
    display: flex;
    flex-direction: column;
    gap: 1.25rem; /* 20px */
}

/* Country tags: 15px Manrope 500, dark, gold dot separators */
.card--solution .card__tags {
    font-family: var(--font-body);
    font-weight: var(--fw-medium);
    font-size: 0.9375rem; /* 15px */
    line-height: 1.3;
    letter-spacing: -0.02em;
    color: var(--color-text-primary);
    margin: 0;
}

/* Gold ellipse dot separator between country names */
.card__tag-dot {
    display: inline-block;
    width: 0.3125rem;
    height: 0.3125rem;
    border-radius: 50%;
    background-color: var(--color-solar-gold); /* #EEA63A */
    vertical-align: middle;
    margin: 0 0.625rem; /* 5px each side — Figma gap=10 */
}

/* Title: STIX Two Text 500 35px */
.card--solution .card__title {
    font-family: var(--font-heading);
    font-weight: var(--fw-medium); /* 500 */
    font-size: 2.1875rem; /* 35px */
    line-height: 1;
    letter-spacing: 0;
    color: var(--color-text-primary);
    margin: 0;
}

/* Short description: 18px Manrope 500 */
.card--solution .card__desc {
    font-family: var(--font-body);
    font-weight: var(--fw-medium);
    font-size: 1.125rem; /* 18px */
    line-height: 1.3;
    letter-spacing: var(--ls-body-2);
    color: var(--color-text-primary);
    margin: 0;
}

/* Long muted description below divider: 15px Manrope 500 grey */
.card--solution .card__desc-long {
    font-family: var(--font-body);
    font-weight: var(--fw-medium);
    font-size: 0.9375rem; /* 15px */
    line-height: 1.3;
    letter-spacing: var(--ls-body-2);
    color: var(--color-text-muted); /* #949494 */
    margin: 0;
}

/* Badges at bottom: 45×45px, padding 10px, gap 5px, 18px Manrope */
.card--solution .card__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3125rem; /* 5px */
    position: absolute;
    right: 1.25rem;
    top: 1.25rem;
}

.card--solution .card__badges .badge {
    width: 2.8125rem; /* 45px */
    height: 2.8125rem; /* 45px */
    padding: 0.625rem; /* 10px */
    font-family: var(--font-body);
    font-size: 1.125rem; /* 18px */
    font-weight: var(--fw-medium);
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    border: solid 1px var(--color-solar-gold);
}

/* "Подробнее" link: 18px Manrope 600, gap 15px */
.card__link {
    display: inline-flex;
    align-items: center;
    gap: 0.9375rem; /* 15px */
    font-family: var(--font-body);
    font-weight: var(--fw-semibold);
    font-size: clamp(1rem, calc(var(--pixel) * 18), 1.2rem); /* 18px */
    letter-spacing: var(--ls-body-2);
    color: var(--color-solar-gold);
    text-decoration: none;
    transition: color 0.2s ease;
}

.card--solution .card__link {
    display: block;
}

/* Mobile reorder: ordinal → badges → content */
@media (max-width: 1439px) {
    .card--solution {
        gap: 35px;
        min-height: unset;
    }

    .card--solution .card__badges {
        right: calc(var(--pixel) * 20);
        top: 20px;
    }

    .card--solution .card__tags {
        order: 2;
    }

    .card__desc {
        display: none;
    }

    .card--solution .card__title {
        order: 1;
        font-size: 1.5625rem; /* 25px mobile — Figma 252:270 */
    }

    .card--solution .card__link {
        order: 3;
    }
}

/* Stat card — тёмный вариант (hero section) */
.card--stat {
    border: var(--border-width) solid var(--color-white);
    background-color: transparent;
    padding: 17.551px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.card--stat .card__number {
    font-family: var(--font-heading);
    font-weight: var(--fw-regular);
    font-size: var(--fs-h3);
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-heading);
    color: var(--color-white);
    margin: 0;
}

.card--stat .card__label {
    font-family: var(--font-body);
    font-weight: var(--fw-medium);
    font-size: var(--fs-body-1);
    line-height: var(--lh-normal);
    letter-spacing: var(--ls-body-1);
    color: var(--color-white);
    margin: 0;
}

.ul-orange {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ul-orange li {
    position: relative;
    padding-left: 28px;
    margin-bottom: 12px;
    font-size: 16px;
    line-height: 1.45;
    letter-spacing: 0;
}

.ul-orange li:last-child {
    margin-bottom: 0;
}

.ul-orange li::before {
    content: '';
    position: absolute;
    top: 0.62em;
    left: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-solar-gold);
}

/* === components/divider.css === */
/* ─── DIVIDER ──────────────────────────────────────────────────────────────────
 * Base gold horizontal rule. Used as .hr inside feature cards across sections.
 * Width is intentionally left unset — each context defines its own via override.
 * ─────────────────────────────────────────────────────────────────────────── */

.hr {
    display: block;
    height: 1px;
    background-color: var(--color-solar-gold);
}


/* === layouts/container.css === */
/* ─── CONTAINER ───────────────────────────────────────────────────────────────
 * Max-width 1440px centered. Formula: (20/360)*100 = 5.556vw → 20px at 360 → 40px max
 * ─────────────────────────────────────────────────────────────────────────── */

.container {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 clamp(1.25rem, 5.556vw, 2.5rem); /* 20px at 360 → 40px at 720+ */
}

.container__inner {
    position: relative;
}


/* === layouts/section.css === */
/* ─── SECTION UTILITIES ────────────────────────────────────────────────────────
 * Shared layout patterns used by every content section on the page.
 * ─────────────────────────────────────────────────────────────────────────── */

/* ─── Vertical spacing ────────────────────────────────────────────────────── */

.section {
    margin: var(--section-margin) 0;
}

/* ─── Section header ──────────────────────────────────────────────────────── */
/* Horizontal flex row: heading left, optional meta right. margin-bottom
   creates breathing room before the main content (grid, tabs, slider…).    */

.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap-md);
    margin-bottom: 45px;
}

/* ─── Section CTA button ──────────────────────────────────────────────────── */
/* Desktop: floats to top-right of .container__inner (position: relative).
   Tablet+: drops into normal flow as full-width button.                     */

.section-btn {
    position: absolute;
    right: 0;
    top: 7.5px;
}

@media (max-width: 1439px) {
    .section-btn {
        position: unset;
        right: unset;
        top: 0;
        width: 100%;
    }

    .section-btn .btn__label {
        flex-grow: 1;
    }
}

@media (max-width: 767px) {
    .section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.25rem;
        margin-bottom: 2.1875rem; /* 35px */
    }
}