/* Fintech (design10) — светлый «банковский»: чистые карточки, синий + зелёный, цена на банковской карте, заголовки слева */
/* Шрифты — SIL Open Font License, файлы в fonts/tfl. Общий каркас — css/tfl-base.css. */
@font-face { font-family: "TFL Onest"; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/tfl/onest-cyrillic-400-normal.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "TFL Onest"; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/tfl/onest-latin-400-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "TFL Onest"; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/tfl/onest-cyrillic-500-normal.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "TFL Onest"; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/tfl/onest-latin-500-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "TFL Onest"; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/tfl/onest-cyrillic-700-normal.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "TFL Onest"; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/tfl/onest-latin-700-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "TFL Onest"; font-style: normal; font-weight: 800; font-display: swap; src: url(../fonts/tfl/onest-cyrillic-800-normal.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "TFL Onest"; font-style: normal; font-weight: 800; font-display: swap; src: url(../fonts/tfl/onest-latin-800-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
    --t-bg: #e6ebf3;
    --t-paper: #f5f8fc;
    --t-ink: #0b1b33;
    --t-muted: #5a6b85;
    --t-line: rgba(11, 27, 51, 0.08);
    --t-surface: #ffffff;
    --t-surface-2: #edf2fb;
    --t-accent: #0f62fe;
    --t-accent-2: #10b981;
    --t-sale: #10b981;
    --t-btn-bg: linear-gradient(135deg, #0f62fe 0%, #3b82f6 100%);
    --t-btn-shadow: 0 16px 30px -14px rgba(15, 98, 254, 0.8);
    --t-radius: 22px;
    --t-radius-sm: 14px;
    --t-shadow: 0 10px 30px -18px rgba(11, 27, 51, 0.35);
    --t-display: "TFL Onest", "Segoe UI", Arial, sans-serif;
    --t-text: "TFL Onest", "Segoe UI", Arial, sans-serif;
    --t-title-align: left;
    --t-title-size: 26px;
    --t-title-weight: 800;
    --eb-desc: "Огляд";
    --eb-features: "Чому це вигідно";
    --eb-steps: "3 прості кроки";
    --eb-specs: "Специфікація";
    --eb-reviews: "Рейтинг 4.9 / 5";
    --eb-how: "Безпечна оплата";
}

.content-wrap {
    background:
        radial-gradient(420px 260px at 100% 0%, rgba(15, 98, 254, 0.12), transparent 70%),
        radial-gradient(360px 260px at 0% 30%, rgba(16, 185, 129, 0.08), transparent 70%),
        var(--t-paper);
}

.title::after { left: 0; transform: none; width: 44px; border-radius: 3px; }
.product-description .title::before,
.features-block .title::before,
.steps-block .title::before,
.specifications .title::before,
.reviews .title::before,
.how-to-get .title::before {
    margin: 0 0 10px;
    background: rgba(15, 98, 254, 0.08);
    letter-spacing: 0.08em;
}

/* шапка товара — слева, как в банковских приложениях */
.item-card .header { text-align: left; }
.product-subtitle { background: rgba(16, 185, 129, 0.12); color: #0b8f63; }
.product-title { font-size: 31px; }

.featured-media img { box-shadow: 0 24px 50px -30px rgba(11, 27, 51, 0.55); }
.featured-media .discount { background: var(--t-accent-2); box-shadow: 0 10px 22px -10px rgba(16, 185, 129, 0.9); }

/* цена — на банковской карте */
.pricing-block {
    position: relative;
    grid-template-columns: 1fr 1.2fr;
    grid-template-areas: "chip chip" "old new";
    row-gap: 14px;
    padding: 20px 22px 22px;
    border: 0;
    border-radius: 22px;
    background:
        radial-gradient(260px 160px at 100% 0%, rgba(59, 130, 246, 0.55), transparent 70%),
        linear-gradient(135deg, #0b1b33 0%, #12305e 55%, #0f62fe 120%);
    box-shadow: 0 24px 40px -22px rgba(11, 27, 51, 0.8);
    text-align: left;
}
.pricing-block::before {
    content: "";
    grid-area: chip;
    width: 46px;
    height: 34px;
    border-radius: 7px;
    background:
        linear-gradient(90deg, transparent 45%, rgba(0, 0, 0, 0.18) 45% 55%, transparent 55%),
        linear-gradient(0deg, transparent 45%, rgba(0, 0, 0, 0.18) 45% 55%, transparent 55%),
        linear-gradient(135deg, #f8e3a1, #d4a947);
}
.pricing-block::after {
    content: "ВИГІДНА ПРОПОЗИЦІЯ";
    position: absolute;
    top: 26px;
    right: 22px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
    color: rgba(255, 255, 255, 0.55);
}
.old-price, .new-price { align-items: flex-start; }
.old-price { grid-area: old; border-right: 0; }
.new-price { grid-area: new; }
.old-price span, .new-price span { color: rgba(255, 255, 255, 0.55); }
.old-price strong { color: rgba(255, 255, 255, 0.6); text-decoration-color: #ff6b6b; }
.new-price strong { color: #ffffff; font-size: 44px; }
.old-price small, .new-price small { color: rgba(255, 255, 255, 0.6); }

.discount-list li:last-child { background: rgba(15, 98, 254, 0.07); }
.countdown__item { background: #ffffff; border: 1px solid var(--t-line); }
.countdown__value { color: var(--t-accent); }

.presentation { text-align: left; }

/* переваги — плитки 2 в ряд */
.feature-item-wrap { grid-template-columns: 1fr 1fr; }
.features-block .feature-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 14px;
}
.feature-image { flex: 0 0 auto; width: 56px; height: 56px; border-radius: 16px; }
.feature-title { font-size: 15px; }
.feature-description, .feature-description p { font-size: 13px; }

/* кроки — таймлайн */
.steps-list { position: relative; gap: 12px; }
.steps-list::before {
    content: "";
    position: absolute;
    top: 20px;
    bottom: 20px;
    left: 21px;
    width: 2px;
    background: linear-gradient(180deg, var(--t-accent), var(--t-accent-2));
}
.steps-item {
    padding: 16px 16px 16px 64px;
    border: 0;
    background: transparent;
    box-shadow: none;
}
.steps-item::before {
    position: absolute;
    left: 0;
    top: 12px;
    width: 44px;
    height: 44px;
    border: 3px solid var(--t-paper);
    border-radius: 50%;
    background: var(--t-accent);
    font-size: 16px;
    line-height: 38px;
    text-align: center;
    color: #fff;
}

/* характеристики — «выписка» */
.characteristics__list { padding: 8px; }
.characteristics__list li { padding: 12px 12px; border-bottom: 0; border-radius: 12px; }
.characteristics__list li:nth-child(odd) { background: var(--t-surface-2); }

.rev-text::before { color: #f59e0b; }
.order_steps1 .bg_icon { border-radius: 50%; background: linear-gradient(135deg, #0f62fe, #10b981); }

.how-to-get + .top-card-wrap { background: #ffffff; box-shadow: 0 24px 50px -30px rgba(11, 27, 51, 0.5); }