/* ============================================================
   FixInvest v2 — visual overhaul (Т-Инвестиции-style)
   Loaded after the base vendor theme to override its look:
   flat buttons, solid cards, bigger/bolder type, more air.
   ============================================================ */

:root {
    --fi-navy: #0c2340;
    --fi-navy-2: #1e3a5f;
    --fi-teal: #14b8a6;
    --fi-teal-2: #0e7490;
    --fi-card-bg: #12213a;
    --fi-card-border: rgba(20, 184, 166, 0.18);
    --fi-radius: 20px;
}

/* ---------- Typography: bigger, bolder, no uppercase shouting ---------- */
.section-title {
    text-transform: none !important;
    font-weight: 800 !important;
    letter-spacing: -0.03em !important;
}

.intro__title {
    font-weight: 800 !important;
    letter-spacing: -0.03em !important;
    font-size: 3.4rem !important;
    line-height: 1.1 !important;
}

@media (max-width: 767px) {
    .intro__title {
        font-size: 2.1rem !important;
    }
}

.sub-title {
    color: var(--fi-teal) !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
}

/* ---------- Buttons: flat, pill-shaped, no glow-shadow soup ---------- */
.btn.primary {
    background: var(--fi-teal) !important;
    background-image: none !important;
    box-shadow: none !important;
    border-radius: 999px !important;
    font-weight: 700 !important;
    padding: 0.9rem 2.2rem !important;
    transition: transform 0.15s ease, background 0.15s ease !important;
}

.btn.primary:hover {
    background: var(--fi-teal-2) !important;
    transform: translateY(-2px);
}

.intro__nav .btn.primary.js-open-enter {
    background: transparent !important;
    border: 2px solid var(--fi-teal) !important;
    color: var(--fi-teal) !important;
}

.intro__nav .btn.primary.js-open-enter:hover {
    background: rgba(20, 184, 166, 0.12) !important;
}

/* ---------- Cards: solid surface, flat border, real elevation on hover ---------- */
.advantage__wrap {
    background: var(--fi-card-bg) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    border: 1px solid var(--fi-card-border) !important;
    border-radius: var(--fi-radius) !important;
    padding: 2.4rem 1.8rem !important;
    transition: transform 0.2s ease, border-color 0.2s ease !important;
}

.advantage__wrap:hover {
    transform: translateY(-6px);
    border-color: var(--fi-teal) !important;
}

/* Icon badge: give the SVG icons a soft circular background instead of floating bare */
.advantage__icon {
    border-radius: 18px !important;
    background: linear-gradient(145deg, rgba(20,184,166,0.14), rgba(30,58,95,0.35)) !important;
    width: 72px !important;
    height: 72px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto 1.2rem !important;
}

.advantage__title {
    font-weight: 700 !important;
    font-size: 1.15rem !important;
    margin-bottom: 0.6rem !important;
}

/* ---------- Section spacing: more air, less cramped ---------- */
.about-section,
.cashback-section,
.plans-section {
    padding-top: 6rem !important;
    padding-bottom: 6rem !important;
}

/* ---------- Header: cleaner, flatter ---------- */
.header {
    background: rgba(6, 1, 8, 0.75) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    backdrop-filter: blur(12px) !important;
    border-bottom: 1px solid var(--fi-card-border) !important;
}

.nav__link {
    font-weight: 600 !important;
}

/* Make custom SVG illustrations always fill their container correctly */
.intro__image img,
.cashback__img img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
}

/* ---------- Footer contact cards ---------- */
.footer {
    padding-top: 5rem !important;
    padding-bottom: 4rem !important;
}

.fi-contact-card {
    background: var(--fi-card-bg);
    border: 1px solid var(--fi-card-border);
    border-radius: var(--fi-radius);
    padding: 1.8rem 1.4rem;
    text-align: center;
    transition: transform 0.2s ease, border-color 0.2s ease;
    box-sizing: border-box;
}

.footer-wrap__row {
    flex-wrap: nowrap !important;
    gap: 1.2rem;
    align-items: stretch !important;
}

.footer-wrap__col.fi-contact-card {
    width: 100% !important;
    flex: 1 1 0 !important;
}

@media (max-width: 767px) {
    .footer-wrap__row {
        flex-wrap: wrap !important;
    }

    .footer-wrap__col.fi-contact-card {
        flex: 1 1 100% !important;
    }
}

.fi-contact-card:hover {
    transform: translateY(-4px);
    border-color: var(--fi-teal);
}

.fi-contact-card__icon {
    width: 52px;
    height: 52px;
    margin: 0 auto 0.9rem;
    border-radius: 14px;
    background: linear-gradient(145deg, rgba(20,184,166,0.14), rgba(30,58,95,0.35));
    display: flex;
    align-items: center;
    justify-content: center;
}