/* ==========================================
   VARIABLES & BASE (PREMIUM FINTECH EDITION)
   ========================================== */
:root {
    --c-primary: #10B981; 
    --c-primary-hover: #059669;
    --c-secondary: #F1F5F9;
    --c-secondary-hover: #E2E8F0;
    
    --c-text-main: #0F172A; 
    --c-text-muted: #64748B;
    
    --c-bg-main: #F8FAFC; 
    --c-bg-card: #FFFFFF;
    --c-border: #E2E8F0;
    --c-error: #EF4444;
    --c-success: #10B981;
    
    --font-main: 'Inter', system-ui, -apple-system, sans-serif;
    
    --radius-sm: 12px;
    --radius-md: 16px;
    --radius-lg: 32px;
    
    --shadow-sm: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
    --shadow-md: 0 10px 25px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04);
    --shadow-lg: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
    
    --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 0.4s cubic-bezier(0.4, 0, 0.2, 1);

    /* Z-INDEX SYSTEM */
    --z-base: 1;
    --z-header: 100;
    --z-floating: 8000;
    --z-sticky: 9000;
    --z-overlay: 9500;
    --z-modal: 10000;
    --z-toast: 100000;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
html, body { width: 100%; overflow-x: hidden; position: relative; }
body { font-family: var(--font-main); color: var(--c-text-main); background-color: var(--c-bg-main); line-height: 1.5; -webkit-font-smoothing: antialiased; }
.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 20px; }

/* A11Y FOCUS STATES */
*:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 4px; border-radius: 4px; }
.btn:focus-visible { outline-offset: 2px; box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.3); outline: none; }
.form__input:focus-visible { outline: none; }

/* Views */
.view { display: none; opacity: 0; animation: fadeIn var(--transition-base) forwards; }
.view--active { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

h1, h2, h3, h4, .hero__title { letter-spacing: -0.03em; color: var(--c-text-main); }

/* ==========================================
   BUTTONS
   ========================================== */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 54px; padding: 0 28px; font-weight: 600; font-size: 1rem; border-radius: var(--radius-md); border: none; cursor: pointer; transition: background-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast); text-align: center; position: relative; text-decoration: none; }
.btn--full { width: 100%; }
.btn--primary { background: linear-gradient(135deg, var(--c-primary), #047857); color: #fff; box-shadow: 0 10px 20px -10px var(--c-primary); border: 1px solid rgba(255,255,255,0.1); }
.btn--secondary { background-color: var(--c-secondary); color: var(--c-text-main); font-weight: 600; }
.btn:disabled, .btn--disabled { opacity: 0.5; cursor: not-allowed; transform: none !important; box-shadow: none !important; }

.submit-btn-animate { transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s; overflow: hidden; }
.submit-btn-animate.is-loading { color: transparent !important; pointer-events: none; }
.submit-btn-animate.is-loading::after { content: ""; position: absolute; width: 24px; height: 24px; border: 3px solid rgba(255,255,255,0.3); border-top-color: #fff; border-radius: 50%; animation: spin 1s linear infinite; left: 50%; top: 50%; transform: translate(-50%, -50%); }
@keyframes spin { 100% { transform: translate(-50%, -50%) rotate(360deg); } }

/* ==========================================
   HEADER & TOP BAR
   ========================================== */
.header-wrapper { position: sticky; top: 0; z-index: var(--z-header); display: flex; flex-direction: column; }

.top-bar { background-color: var(--c-text-main); color: rgba(255,255,255,0.85); font-size: 0.75rem; font-weight: 500; padding: 8px 0; }
.top-bar__container { display: flex; justify-content: space-between; align-items: center; min-height: 32px; }
.top-bar__left { display: none; } 
.top-bar__right { display: flex; justify-content: space-between; width: 100%; align-items: center; gap: 16px; }
.top-bar__trust-badge { display: flex; align-items: center; gap: 8px; }
.top-bar__flag { width: 18px; border-radius: 2px; }

.top-bar__lang-switcher { position: relative; display: flex; align-items: center; gap: 6px; background: rgba(255,255,255,0.1); padding: 6px 12px; border-radius: 100px; transition: background var(--transition-fast); }
.top-bar__lang-switcher:hover { background: rgba(255,255,255,0.2); }
.top-bar__select { appearance: none; -webkit-appearance: none; -moz-appearance: none; background: transparent; border: none; color: #fff; font-weight: 600; font-size: 0.75rem; cursor: pointer; outline: none; padding-right: 4px; }
.top-bar__select option { color: var(--c-text-main); }
.lang-arrow { pointer-events: none; }

.header { background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid var(--c-border); transition: background 0.3s ease, border-color 0.3s ease; }
.header__container { display: flex; justify-content: space-between; align-items: center; height: 80px; gap: 20px; }

.header__logo { display: flex; align-items: center; gap: 12px; font-size: 1.25rem; font-weight: 800; color: var(--c-text-main); letter-spacing: -0.5px; text-decoration: none; transition: transform var(--transition-fast); }
.header__logo-icon { width: 40px; height: 40px; background: linear-gradient(135deg, var(--c-primary), #047857); border-radius: 12px; display: flex; align-items: center; justify-content: center; color: white; box-shadow: 0 4px 12px rgba(16,185,129,0.3); }

.header__nav { display: flex; align-items: center; gap: 32px; }
.nav-link { text-decoration: none; color: var(--c-text-muted); font-weight: 600; font-size: 0.95rem; transition: color 0.2s; position: relative; padding: 8px 0; }
.nav-link:hover { color: var(--c-text-main); }
.nav-link::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 3px; background: var(--c-primary); transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1); border-radius: 4px;}
.nav-link:hover::after { width: 100%; }

.header__actions { display: flex; align-items: center; gap: 16px; }
.btn-client { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; background: var(--c-text-main); color: #fff; border-radius: 100px; font-weight: 700; font-size: 0.85rem; text-decoration: none; transition: background 0.3s, color 0.3s, transform 0.3s, box-shadow 0.3s, border-color 0.3s; border: 1px solid transparent; }

.header__mobile-toggle { display: none; background: none; border: none; color: var(--c-text-main); cursor: pointer; padding: 4px; }
.mobile-only { display: none !important; }
.desktop-only { display: inline-flex; }

/* ==========================================
   PREMIUM HERO (NEO-BANK STYLE)
   ========================================== */
.premium-hero {
    position: relative;
    padding: clamp(60px, 8vw, 100px) 0 clamp(80px, 10vw, 140px);
    overflow: hidden;
    text-align: center;
    background: radial-gradient(circle at 50% 0%, #ffffff 0%, var(--c-bg-main) 100%);
}

/* Animations */
@keyframes fadeUp {
    0% { opacity: 0; transform: translateY(30px); }
    100% { opacity: 1; transform: translateY(0); }
}
.fade-up-1 { animation: fadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.fade-up-2 { opacity: 0; animation: fadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.2s forwards; }

/* Ambient 3D Particles */
.ambient-particles { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 1; }
.ambient-particle {
    position: absolute;
    color: var(--c-primary);
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 500;
    user-select: none;
    opacity: 0;
    will-change: transform;
}

/* Deep Ambient Glow */
.hero-glow {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 90vw; max-width: 900px; height: 600px;
    background: radial-gradient(ellipse, rgba(16, 185, 129, 0.25) 0%, transparent 60%);
    z-index: 0; pointer-events: none;
}

.premium-hero .hero__container { position: relative; z-index: 2; display: block; }

/* HEADER TEXT */
.hero__header { max-width: 850px; margin: 0 auto 48px; display: flex; flex-direction: column; align-items: center; }
.trust-pill {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(16, 185, 129, 0.08); border: 1px solid rgba(16, 185, 129, 0.2);
    color: var(--c-primary); padding: 6px 16px; border-radius: 100px;
    font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
    margin-bottom: 24px; box-shadow: 0 4px 12px rgba(16, 185, 129, 0.05);
}
.premium-hero .hero__title {
    font-size: clamp(2.2rem, 5.5vw, 4.2rem);
    font-weight: 800; line-height: 1.05; margin-bottom: 20px;
    letter-spacing: -0.04em; color: var(--c-text-main);
    text-wrap: balance; 
}
.text-gradient {
    background: linear-gradient(135deg, var(--c-primary) 0%, #047857 100%);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.premium-hero .hero__subtitle {
    font-size: clamp(1rem, 2vw, 1.15rem); color: var(--c-text-muted);
    max-width: 650px; line-height: 1.6; margin-bottom: 32px; text-wrap: balance;
}

/* Micro Triggers */
.hero__micro-triggers { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px 32px; font-size: 0.9rem; font-weight: 600; color: var(--c-text-main); }
.hero__micro-triggers span { display: flex; align-items: center; gap: 8px; }
.trigger-icon {
    width: 28px; height: 28px; border-radius: 8px;
    background: rgba(16, 185, 129, 0.1); color: var(--c-primary);
    display: flex; align-items: center; justify-content: center;
}
.trigger-icon svg { width: 14px; height: 14px; }


/* ==========================================
   LUXE SPATIAL CALCULATOR (APPLE / STRIPE LEVEL)
   ========================================== */

.calc-luxe, .calc-luxe * { box-sizing: border-box; }

.calc-luxe {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.75) 100%);
    backdrop-filter: blur(40px) saturate(150%); -webkit-backdrop-filter: blur(40px) saturate(150%);
    border: 1px solid rgba(255, 255, 255, 1);
    border-radius: 32px;
    padding: clamp(24px, 4vw, 40px);
    box-shadow: 
        0 40px 80px -20px rgba(15, 23, 42, 0.15), 
        inset 0 2px 20px rgba(255, 255, 255, 0.8),
        inset 0 -2px 20px rgba(255, 255, 255, 0.3);
    max-width: 960px;
    margin: 0 auto;
    display: flex; flex-direction: column; gap: clamp(20px, 3vw, 28px);
    position: relative; z-index: 10; text-align: left;
}

body.high-contrast .calc-luxe { 
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.9) 0%, rgba(15, 23, 42, 0.8) 100%); 
    border-color: rgba(255, 255, 255, 0.1); 
    box-shadow: 0 40px 80px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.05); 
}

.clx-label { 
    font-size: 0.75rem; font-weight: 700; color: var(--c-text-muted); 
    text-transform: uppercase; letter-spacing: 0.8px; display: block; margin-bottom: 8px; 
}

/* 1. Верхний бар */
.clx-top-bar {
    background: rgba(248, 250, 252, 0.6);
    border: 1px solid rgba(226, 232, 240, 0.8);
    border-radius: 24px;
    padding: 16px 24px;
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px;
    box-shadow: inset 0 2px 10px rgba(255,255,255,0.6);
    transition: background 0.4s ease, box-shadow 0.4s ease;
}
.clx-top-bar:hover { background: rgba(255,255,255,0.9); box-shadow: 0 10px 30px -10px rgba(0,0,0,0.05), inset 0 2px 10px rgba(255,255,255,0.8); }
body.high-contrast .clx-top-bar { background: rgba(15, 23, 42, 0.4); border-color: rgba(255,255,255,0.05); box-shadow: none; }

.clx-dropdown { flex: 1 1 250px; display: flex; flex-direction: column; cursor: pointer; position: relative; }
.clx-select-wrapper { position: relative; width: 100%; display: flex; align-items: center; }
.clx-select-wrapper select {
    appearance: none; -webkit-appearance: none; background: transparent; border: none; width: 100%;
    font-size: 1.05rem; font-weight: 700; color: var(--c-text-main); outline: none; cursor: pointer; 
    padding: 8px 40px 8px 0; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;
    transition: color 0.3s ease;
}
.clx-select-wrapper select:hover, .clx-select-wrapper select:focus { color: var(--c-primary); }
.clx-icon-box { position: absolute; right: 0; width: 32px; height: 32px; background: rgba(0,0,0,0.03); border-radius: 8px; display: flex; align-items: center; justify-content: center; pointer-events: none; transition: background 0.3s ease; }
.clx-icon-box svg { width: 16px; color: var(--c-text-main); transition: transform 0.3s ease, color 0.3s ease; }
.clx-dropdown:hover .clx-icon-box { background: rgba(16, 185, 129, 0.1); }
.clx-dropdown:hover .clx-icon-box svg { color: var(--c-primary); transform: translateY(2px); }

.clx-divider { width: 1px; height: 48px; background: linear-gradient(to bottom, transparent, var(--c-border), transparent); flex-shrink: 0; }

.clx-toggle-box { flex: 1 1 200px; display: flex; align-items: center; justify-content: space-between; cursor: pointer; gap: 16px; }
.clx-toggle-text { display: flex; flex-direction: column; gap: 2px; }
.clx-toggle-text .title { font-weight: 800; font-size: 0.95rem; color: var(--c-text-main); }
.clx-toggle-text .subtitle { font-size: 0.75rem; font-weight: 700; color: var(--c-success); background: linear-gradient(135deg, #10B981, #047857); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

/* Идеальный iOS Тумблер с тенями */
.clx-switch input { display: none; }
.clx-track { width: 50px; height: 28px; background: var(--c-secondary); border-radius: 30px; position: relative; transition: background 0.4s cubic-bezier(0.25, 1, 0.5, 1); box-shadow: inset 0 2px 6px rgba(0,0,0,0.1); flex-shrink: 0; }
.clx-thumb { width: 24px; height: 24px; background: #fff; border-radius: 50%; position: absolute; top: 2px; left: 2px; box-shadow: 0 3px 8px rgba(0,0,0,0.15), 0 1px 1px rgba(0,0,0,0.1), inset 0 -2px 2px rgba(0,0,0,0.05); transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), width 0.2s ease; }
.clx-switch input:checked + .clx-track { background: var(--c-primary); box-shadow: inset 0 2px 6px rgba(0,0,0,0.2); }
.clx-switch input:checked + .clx-track .clx-thumb { transform: translateX(22px); }
.clx-toggle-box:active .clx-thumb { width: 28px; }
.clx-toggle-box:active input:checked + .clx-track .clx-thumb { transform: translateX(18px); }

/* 2. Ползунки */
.clx-sliders { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: clamp(24px, 4vw, 48px); padding: 0 8px; }
.clx-slider-group { display: flex; flex-direction: column; justify-content: center; }
.clx-slider-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 12px; }
.clx-val { transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), color 0.3s; transform-origin: right bottom; line-height: 1; display: flex; align-items: baseline; gap: 4px; }
.clx-val span { font-size: clamp(2rem, 4vw, 2.5rem); font-weight: 800; letter-spacing: -1px; color: var(--c-text-main); }
.clx-val small { font-size: 1rem; color: var(--c-text-muted); font-weight: 700; }
.clx-val.is-active { transform: scale(1.08) translateY(-2px); color: var(--c-primary); }

.clx-range-wrap { position: relative; padding: 14px 0; display: flex; align-items: center; }
.clx-range {
    -webkit-appearance: none; width: 100%; height: 8px; border-radius: 4px; margin: 0;
    background: linear-gradient(to right, var(--c-primary) var(--slider-fill, 50%), rgba(226, 232, 240, 0.8) var(--slider-fill, 50%));
    outline: none; cursor: grab; box-shadow: inset 0 1px 3px rgba(0,0,0,0.05);
}
.clx-range::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none; width: 32px; height: 32px; background: #fff; border-radius: 50%;
    border: 1px solid rgba(0,0,0,0.05); box-shadow: 0 4px 12px rgba(0,0,0,0.15), inset 0 -2px 4px rgba(0,0,0,0.05);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s; margin-top: 0; 
}
.clx-range::-webkit-slider-thumb:hover { transform: scale(1.1); box-shadow: 0 8px 20px rgba(16, 185, 129, 0.25); }
.clx-range:active::-webkit-slider-thumb { cursor: grabbing; transform: scale(0.95); box-shadow: 0 0 0 6px rgba(16, 185, 129, 0.2); }
.clx-limits { display: flex; justify-content: space-between; font-size: 0.75rem; font-weight: 700; color: var(--c-text-muted); margin-top: 4px; }

/* 3. Дашборд */
.clx-dashboard {
    background: rgba(248, 250, 252, 0.6);
    border-radius: 28px;
    padding: clamp(20px, 3vw, 32px);
    display: flex; flex-wrap: wrap; gap: clamp(24px, 4vw, 40px);
    border: 1px solid rgba(255,255,255,0.8);
    box-shadow: inset 0 2px 20px rgba(255,255,255,0.8), 0 10px 30px -10px rgba(0,0,0,0.05);
}
body.high-contrast .clx-dashboard { background: rgba(15, 23, 42, 0.5); border-color: rgba(255,255,255,0.05); box-shadow: none; }

.clx-dash-main { flex: 1.2 1 300px; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; border-right: 1px solid var(--c-border); padding-right: clamp(20px, 3vw, 40px); }

/* Анимированный бейджик */
.smart-badge-wrapper { height: 28px; display: flex; align-items: center; margin-bottom: 8px; }
.smart-badge {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(16, 185, 129, 0.1); color: var(--c-primary); border: 1px solid rgba(16, 185, 129, 0.2);
    padding: 4px 14px; border-radius: 100px; font-size: 0.7rem; font-weight: 800; text-transform: uppercase;
    letter-spacing: 0.5px; opacity: 0; transform: translateY(10px); transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}
.smart-badge.visible { opacity: 1; transform: translateY(0); }
.smart-badge.badge-fast { background: rgba(245, 158, 11, 0.1); border-color: rgba(245, 158, 11, 0.2); color: #D97706; }
.smart-badge.badge-neutral { background: rgba(100, 116, 139, 0.1); border-color: rgba(100, 116, 139, 0.2); color: var(--c-text-muted); }

.clx-price { display: flex; align-items: baseline; gap: 8px; line-height: 1; margin-top: 4px; }
.clx-price span { font-size: clamp(3.5rem, 6vw, 4.8rem); font-weight: 800; letter-spacing: -2.5px; color: var(--c-text-main); }
.clx-price small { font-size: clamp(1.1rem, 2vw, 1.4rem); color: var(--c-text-muted); font-weight: 700; }

/* Ультра-кнопка с градиентом и анимацией блика */
.clx-btn {
    position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px;
    background: #0F172A; border-radius: 100px; padding: 8px 8px 8px 32px; border: none; cursor: pointer; 
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.4s ease;
    box-shadow: 0 15px 35px -10px rgba(15, 23, 42, 0.4), inset 0 1px 1px rgba(255,255,255,0.2); 
    width: 100%; overflow: hidden;
}
.clx-btn-bg { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255,255,255,0.1), transparent); opacity: 0; transition: opacity 0.3s; pointer-events: none; }
.clx-btn span { position: relative; color: #fff; font-size: 1.15rem; font-weight: 700; white-space: nowrap; z-index: 2; }
.clx-btn-icon {
    position: relative; width: 52px; height: 52px; background: linear-gradient(135deg, var(--c-primary), #047857); 
    border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; flex-shrink: 0;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s ease; z-index: 2;
    box-shadow: 0 4px 12px rgba(16,185,129,0.4), inset 0 2px 4px rgba(255,255,255,0.3);
}
.clx-btn:hover { transform: translateY(-4px); box-shadow: 0 25px 45px -10px rgba(15, 23, 42, 0.5), inset 0 1px 1px rgba(255,255,255,0.3); }
.clx-btn:hover .clx-btn-bg { opacity: 1; }
.clx-btn:hover .clx-btn-icon { transform: translateX(-4px) rotate(-15deg) scale(1.05); box-shadow: 0 8px 20px rgba(16,185,129,0.5), inset 0 2px 4px rgba(255,255,255,0.4); }

/* Правая часть (Микро-сетка) */
.clx-dash-side { flex: 1 1 300px; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; }
.clx-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; }
.clx-metric { 
    background: #fff; padding: 16px; border-radius: 20px; display: flex; flex-direction: column; 
    box-shadow: 0 4px 12px rgba(0,0,0,0.03), inset 0 2px 4px rgba(255,255,255,0.8);
    transition: transform 0.3s ease, box-shadow 0.3s ease; border: 1px solid rgba(0,0,0,0.02);
}
.clx-metric:hover { transform: translateY(-3px); box-shadow: 0 8px 20px -4px rgba(0,0,0,0.08); }
body.high-contrast .clx-metric { background: var(--c-bg-card); box-shadow: inset 0 1px 0 rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.05); }
.clx-metric span { font-size: 0.7rem; font-weight: 700; color: var(--c-text-muted); text-transform: uppercase; margin-bottom: 6px; display: flex; align-items: center; gap: 4px;}
.clx-metric strong { font-size: 1.15rem; font-weight: 800; color: var(--c-text-main); line-height: 1; }

.clx-chart-area { display: flex; flex-direction: column; gap: 12px; background: rgba(255,255,255,0.5); padding: 16px; border-radius: 20px; border: 1px solid rgba(255,255,255,0.6); }
body.high-contrast .clx-chart-area { background: rgba(0,0,0,0.2); border-color: transparent; }
.clx-chart { display: flex; height: 8px; border-radius: 4px; overflow: hidden; background: rgba(0,0,0,0.05); width: 100%; box-shadow: inset 0 1px 3px rgba(0,0,0,0.1); }
.clx-fill-cap { background: var(--c-text-muted); opacity: 0.3; transition: width 0.8s cubic-bezier(0.25, 1, 0.5, 1); }
.clx-fill-jur { background: linear-gradient(90deg, var(--c-primary), #047857); transition: width 0.8s cubic-bezier(0.25, 1, 0.5, 1); }
.clx-chart-info { display: flex; justify-content: space-between; font-size: 0.8rem; color: var(--c-text-muted); font-weight: 600; align-items: center; flex-wrap: wrap; gap: 8px; }
.clx-chart-info strong { color: var(--c-text-main); font-weight: 800; }
.clx-secure { display: flex; align-items: center; gap: 6px; color: var(--c-success); background: #fff; padding: 6px 12px; border-radius: 100px; font-weight: 700; box-shadow: 0 2px 8px rgba(0,0,0,0.05); }
body.high-contrast .clx-secure { background: rgba(16,185,129,0.1); box-shadow: none; }
.clx-secure svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.5; }

/* ==========================================
   АДАПТИВНОСТЬ (Монолит на 1 экран)
   ========================================== */

/* Планшеты */
@media (max-width: 900px) {
    .clx-dash-main { border-right: none; padding-right: 0; border-bottom: 1px solid var(--c-border); padding-bottom: 24px; }
}

/* Смартфоны */
@media (max-width: 768px) {
    .calc-luxe { padding: 24px 16px; border-radius: 28px; gap: 20px; }
    
    /* Топ бар (Компактная iOS-стилистика для мобильных) */
    .clx-top-bar { 
        flex-direction: column; 
        align-items: stretch; 
        gap: 12px; 
        padding: 12px 16px; 
        border-radius: 20px; 
    }
    
    .clx-dropdown { flex: none; width: 100%; }
    .clx-label { font-size: 0.65rem; margin-bottom: 2px; } /* Уменьшили ярлык */
    .clx-select-wrapper select { 
        font-size: 0.95rem; /* Аккуратный размер для селекта */
        padding: 4px 30px 4px 0; 
    }
    
    .clx-divider { 
        width: 100%; 
        height: 1px; 
        background: rgba(0,0,0,0.05); 
        margin: 2px 0; 
    }
    
    .clx-toggle-box { flex: none; width: 100%; justify-content: space-between; }
    .clx-toggle-text { gap: 0px; }
    .clx-toggle-text .title { font-size: 0.9rem; } /* Уменьшили текст страховки */
    .clx-toggle-text .subtitle { font-size: 0.65rem; }
    
    /* Чуть уменьшаем сам тумблер для мобильных */
    .clx-track { width: 44px; height: 24px; }
    .clx-thumb { width: 20px; height: 20px; }
    .clx-switch input:checked + .clx-track .clx-thumb { transform: translateX(20px); }
    .clx-toggle-box:active .clx-thumb { width: 24px; }
    .clx-toggle-box:active input:checked + .clx-track .clx-thumb { transform: translateX(16px); }
    
    /* 2. Зона ползунков (Исправленная, классическая) */
.cnv-sliders { 
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    gap: clamp(24px, 4vw, 40px); 
    padding: 0; 
}
.cnv-slider-group { 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    width: 100%; /* Жестко фиксируем ширину группы */
}
.cnv-slider-header { 
    display: flex; 
    justify-content: space-between; 
    align-items: flex-end; 
    margin-bottom: 8px; 
}
.cnv-val { 
    line-height: 1; 
}
.cnv-val span { 
    font-size: clamp(2rem, 4vw, 2.5rem); 
    font-weight: 800; 
    letter-spacing: -1px; 
    color: var(--c-text-main); 
}
.cnv-val small { 
    font-size: 1rem; 
    color: var(--c-text-muted); 
    font-weight: 600; 
    margin-left: 4px; 
}

/* Исправленная обертка: 100% ширина, никакого ломающего Flexbox */
.cnv-range-wrap { 
    position: relative; 
    padding: 12px 0; 
    display: block; 
    width: 100%; 
}

/* Классический трек ползунка */
.cnv-range {
    -webkit-appearance: none; 
    width: 100%; 
    height: 8px; 
    border-radius: 4px; 
    margin: 0;
    background: linear-gradient(to right, var(--c-primary) var(--slider-fill, 50%), var(--c-secondary) var(--slider-fill, 50%));
    outline: none; 
    cursor: pointer; 
}

/* Классический 2D-шарик (Thumb) */
.cnv-range::-webkit-slider-thumb {
    -webkit-appearance: none; 
    appearance: none; 
    width: 24px; 
    height: 24px; 
    background: #fff; 
    border-radius: 50%;
    border: 2px solid var(--c-primary); /* Четкая зеленая обводка */
    box-shadow: 0 2px 6px rgba(0,0,0,0.15); /* Натуральная тень */
    transition: transform 0.1s ease; /* Только легкое увеличение, без 3D */
    margin-top: 0; /* Фикс для WebKit */
}
.cnv-range::-webkit-slider-thumb:hover { 
    transform: scale(1.15); 
}
/* Убрано уменьшение и свечение при :active */

.cnv-limits { 
    display: flex; 
    justify-content: space-between; 
    font-size: 0.75rem; 
    font-weight: 700; 
    color: var(--c-text-muted); 
    margin-top: 4px; 
}

/* Адаптив для ползунков на мобильных */
@media (max-width: 768px) {
    .cnv-sliders { 
        grid-template-columns: 1fr; /* В столбик на смартфонах */
        gap: 20px; 
    }
}
    
    /* Дашборд */
    .clx-dashboard { padding: 20px 16px; border-radius: 24px; gap: 24px; }
    
    /* Цена и Кнопка строго в два ряда, но компактно */
    .clx-dash-main { gap: 20px; padding-bottom: 24px; }
    .clx-price-section { display: flex; flex-direction: column; align-items: flex-start; }
    .clx-price span { font-size: 3.2rem; }
    .clx-price small { font-size: 1rem; margin-left: 4px; }
    
    .clx-btn { padding: 6px 6px 6px 24px; }
    .clx-btn span { font-size: 1.05rem; }
    .clx-btn-icon { width: 44px; height: 44px; }
    
    /* Метрики 2х2 */
    .clx-metrics { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .clx-metric { padding: 12px 16px; border-radius: 16px; }
    .clx-metric span { font-size: 0.65rem; }
    .clx-metric strong { font-size: 1.05rem; }
    
    .clx-chart-area { padding: 12px; }
}

/* Компактные смартфоны (iPhone SE) */
@media (max-width: 380px) {
    .clx-price span { font-size: 2.6rem; }
    .clx-btn span { display: none; } /* Оставляем только кнопку-стрелку */
    .clx-btn::before { content: 'Avançar'; color: #fff; font-weight: 700; font-size: 0.9rem; margin-right: 12px; position: relative; z-index: 2; }
    .clx-chart-info { flex-direction: column; align-items: flex-start; }
}

/* ==========================================
   PREMIUM TRUST SECTION (Bank & Regulators Grid)
   ========================================== */
.trust-section { background-color: var(--c-bg-card); padding: 80px 0; border-top: 1px solid var(--c-border); border-bottom: 1px solid var(--c-border); }
.trust-section__header { text-align: center; margin-bottom: 48px; }
.trust-section__header h3 { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 800; color: var(--c-text-main); margin-bottom: 12px; letter-spacing: -0.03em; }
.trust-section__header p { color: var(--c-text-muted); font-size: 0.875rem; max-width: 600px; margin: 0 auto; line-height: 1.6; }

.trust-grid { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 40px; max-width: 1100px; margin: 0 auto; }
.trust-group { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 32px; }

.trust-divider { width: 2px; height: 32px; background: var(--c-border); border-radius: 2px; }

.trust-brand { display: flex; align-items: center; gap: 12px; filter: grayscale(100%) opacity(0.6); transition: filter 0.4s ease, transform 0.4s ease; cursor: default; }
.trust-brand__icon { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; }
.trust-brand__icon img, .trust-brand__icon svg { width: 100%; height: auto; object-fit: contain; }
.trust-brand span { font-weight: 600; font-size: 1.125rem; color: var(--c-text-main); letter-spacing: -0.3px; white-space: nowrap; }

/* ==========================================
   REQUIREMENTS SECTION
   ========================================== */
.requirements { padding: 80px 20px; max-width: 1200px; margin: 0 auto; }
.requirements__header { text-align: center; margin-bottom: 48px; }
.requirements__title { font-size: clamp(1.75rem, 4vw, 2rem); font-weight: 800; color: var(--c-text-main); margin-bottom: 12px; letter-spacing: -0.03em; }
.requirements__subtitle { color: var(--c-text-muted); font-size: 1rem; max-width: 600px; margin: 0 auto; line-height: 1.6; }

.req-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 24px; }
.req-card { background: var(--c-bg-card); padding: 32px; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); border: 1px solid var(--c-border); transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base); display: flex; flex-direction: column; align-items: flex-start; }
.req-card__icon { width: 56px; height: 56px; border-radius: 16px; background: rgba(16, 185, 129, 0.1); color: var(--c-primary); display: flex; align-items: center; justify-content: center; margin-bottom: 20px; transition: background var(--transition-base), color var(--transition-base), transform var(--transition-base); }
.req-card h4 { font-size: 1.125rem; font-weight: 700; color: var(--c-text-main); margin-bottom: 8px; line-height: 1.3; }
.req-card p { font-size: 0.875rem; color: var(--c-text-muted); line-height: 1.6; margin: 0; }

/* ==========================================
   PREMIUM AUDIENCES (ПОДИУМ ДЛЯ ВИДЖЕТОВ)
   ========================================== */
.audiences-wrapper {
    position: relative;
    background-color: var(--c-bg-card);
    overflow: hidden;
    padding: 80px 0;
    z-index: 1;
    border-top: 1px solid var(--c-border);
    border-bottom: 1px solid var(--c-border);
}

.audiences-wrapper::before {
    content: '';
    position: absolute;
    inset: -100px;
    background-image: 
        linear-gradient(to right, rgba(16, 185, 129, 0.05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(16, 185, 129, 0.05) 1px, transparent 1px);
    background-size: 50px 50px;
    z-index: -2;
    animation: gridPan 25s linear infinite;
    -webkit-mask-image: linear-gradient(to bottom, transparent, black 10%, black 90%, transparent);
    mask-image: linear-gradient(to bottom, transparent, black 10%, black 90%, transparent);
}

.audiences-wrapper::after {
    content: '';
    position: absolute;
    top: -50%; left: -50%; right: -50%; bottom: -50%;
    background: 
        radial-gradient(circle at 30% 40%, rgba(16, 185, 129, 0.06) 0%, transparent 40%),
        radial-gradient(circle at 70% 60%, rgba(4, 120, 87, 0.04) 0%, transparent 40%);
    z-index: -1;
    animation: orbFloat 20s ease-in-out infinite alternate;
    pointer-events: none;
}

@keyframes gridPan { 0% { transform: translateY(0); } 100% { transform: translateY(50px); } }
@keyframes orbFloat { 0% { transform: scale(1) translate(0, 0); } 50% { transform: scale(1.2) translate(5%, 5%); } 100% { transform: scale(1) translate(-5%, -5%); } }

.audiences-rich { position: relative; z-index: 2; padding: 0 20px; max-width: 1200px; margin: 0 auto; }

.audience-row { display: flex; flex-direction: column; align-items: center; gap: 40px; margin-bottom: 80px; }
.audience-row:last-child { margin-bottom: 0; }

.audience-row__img-wrapper {
    width: 100%; 
    position: relative; 
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md); 
    border: 1px solid rgba(255,255,255,0.6); 
    
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(32px, 5vw, 60px);
    min-height: clamp(350px, 40vw, 450px);
    
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.05) 0%, rgba(15, 23, 42, 0.02) 100%);
    overflow: visible;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
}
body.high-contrast .audience-row__img-wrapper {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(15, 23, 42, 0.3) 100%);
    border-color: var(--c-border);
}

.audience-row__content { width: 100%; }

.audience-row__tag {
    display: inline-block; background: var(--c-primary); color: #fff;
    font-size: 0.75rem; font-weight: 700; text-transform: uppercase; padding: 6px 14px;
    border-radius: 100px; margin-bottom: 20px; letter-spacing: 0.5px;
    box-shadow: 0 4px 10px rgba(16, 185, 129, 0.2);
}

.audience-row__content h3 { font-size: clamp(1.5rem, 4vw, 2rem); font-weight: 800; color: var(--c-text-main); margin-bottom: 16px; line-height: 1.2; letter-spacing: -0.03em; }
.audience-row__content p { font-size: 1.05rem; color: var(--c-text-muted); line-height: 1.7; margin-bottom: 24px; }

.audience-row__benefits { list-style: none; display: flex; flex-direction: column; gap: 16px; }
.audience-row__benefits li { display: flex; align-items: flex-start; gap: 12px; font-size: 0.95rem; font-weight: 500; color: var(--c-text-main); line-height: 1.5; }
.audience-row__benefits li span {
    display: flex; align-items: center; justify-content: center; width: 24px; height: 24px;
    background: rgba(16, 185, 129, 0.15); color: var(--c-primary); border-radius: 50%; 
    font-size: 0.85rem; flex-shrink: 0; margin-top: 2px;
}

@media (min-width: 1024px) {
    .audience-row { flex-direction: row; gap: 80px; }
    .audience-row__img-wrapper, .audience-row__content { flex: 1; }
    .audience-row--reverse { flex-direction: row-reverse; }
    .audience-row:hover .audience-row__img-wrapper { transform: translateY(-10px); box-shadow: 0 25px 50px -12px rgba(16, 185, 129, 0.15); }
}

/* ==========================================
   SOCIAL PROOF REVIEWS (FB-STYLE FINTECH)
   ========================================== */
.fintech-reviews { padding: 80px 0; background: var(--c-bg-main); overflow: hidden; }
.fintech-reviews .section-header-rich { padding: 0 20px; }

.fintech-reviews__slider-wrapper {
    position: relative; display: flex; align-items: center; 
    max-width: 1200px; margin: 48px auto 0;
}

/* ИДЕАЛЬНЫЙ ФИКС ГОРИЗОНТАЛЬНОГО СКРОЛЛА */
.fintech-reviews__track {
    display: flex; gap: 24px; 
    overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory; 
    scrollbar-width: none; /* Убираем скролл в Firefox */
    -ms-overflow-style: none; /* Убираем скролл в IE */
    padding: 20px 0 40px 0; /* Воздух снизу для теней */
    scroll-behavior: smooth; 
    overscroll-behavior-x: contain;
}
.fintech-reviews__track::-webkit-scrollbar {
    display: none; /* Убираем скролл в Chrome/Safari */
}
.fintech-reviews__track::before, .fintech-reviews__track::after { content: ''; flex: 0 0 2vw; }

/* СОЦИАЛЬНАЯ КАРТОЧКА (ПОСТ) */
.social-case {
    flex: 0 0 85vw; max-width: 420px; scroll-snap-align: center;
    background: var(--c-bg-card); border-radius: var(--radius-lg); 
    box-shadow: 0 10px 30px -10px rgba(0,0,0,0.08);
    border: 1px solid var(--c-border);
    display: flex; flex-direction: column; 
    user-select: none; transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.social-case.obs-animate { opacity: 0; transform: translateY(30px); }
.social-case.obs-animate.is-visible { opacity: 1; transform: translateY(0); }

/* Шапка поста */
.social-case__header { display: flex; align-items: center; gap: 12px; padding: 24px 24px 16px; pointer-events: none; }
.social-case__avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; border: 2px solid var(--c-secondary); }
.social-case__meta { display: flex; flex-direction: column; }
.social-case__name { font-size: 1rem; font-weight: 700; color: var(--c-text-main); line-height: 1.2; }
.social-case__time { font-size: 0.8rem; color: var(--c-text-muted); display: flex; align-items: center; gap: 4px; margin-top: 4px; }
.social-case__verified { margin-left: auto; color: var(--c-primary); background: rgba(16,185,129,0.1); padding: 6px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }

/* Тело поста */
.social-case__body { padding: 0 24px 16px; pointer-events: none; }
.social-case__rating { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-size: 0.9rem; color: #F59E0B; }
.social-case__rating span.recommends { color: var(--c-text-main); font-weight: 600; font-size: 0.9rem; }
.social-case__text { font-size: 1rem; color: var(--c-text-main); line-height: 1.6; margin-bottom: 16px; }

/* Вложение (Детали кредита) */
.social-case__attachment {
    background: var(--c-bg-main); border: 1px solid var(--c-border); border-left: 4px solid var(--c-primary);
    border-radius: var(--radius-md); padding: 16px; display: flex; flex-direction: column; gap: 12px;
}
.attachment-row { display: flex; justify-content: space-between; align-items: center; }
.attachment-label { font-size: 0.85rem; color: var(--c-text-muted); font-weight: 600; text-transform: uppercase; }
.attachment-val { font-size: 0.95rem; color: var(--c-text-main); font-weight: 700; }
.attachment-val.highlight { color: var(--c-primary); font-size: 1.2rem; font-weight: 800; }
.attachment-tags { display: flex; gap: 8px; margin-top: 4px; flex-wrap: wrap; }
.attachment-tag { font-size: 0.75rem; background: var(--c-bg-card); border: 1px solid var(--c-border); padding: 4px 8px; border-radius: 6px; color: var(--c-text-muted); font-weight: 600; }

/* Лайки и Комментарии */
.social-case__stats {
    display: flex; justify-content: space-between; align-items: center;
    padding: 0 24px 12px; border-bottom: 1px solid var(--c-border);
    font-size: 0.85rem; color: var(--c-text-muted); pointer-events: none;
}
.social-case__reactions { display: flex; align-items: center; gap: 6px; }
.reaction-icons { display: flex; align-items: center; }
.react-icon { width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.7rem; border: 2px solid var(--c-bg-card); background: #3B82F6; color: white; }
.react-icon.heart { background: #EF4444; margin-left: -6px; }

/* Кнопки действий */
.social-case__actions { display: flex; padding: 8px 12px; gap: 4px; }
.social-btn {
    flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px;
    background: transparent; border: none; padding: 10px 0; border-radius: var(--radius-sm);
    color: var(--c-text-muted); font-weight: 600; font-size: 0.9rem; cursor: pointer; transition: background 0.2s;
}
.social-btn:hover { background: var(--c-secondary); color: var(--c-text-main); }
.social-btn svg { fill: none; stroke: currentColor; stroke-width: 2; width: 18px; height: 18px; }

/* Навигация слайдера */
.fintech-reviews__footer { display: flex; flex-direction: column; align-items: center; gap: 16px; margin-top: 12px; }
.fintech-reviews__dots { display: flex; justify-content: center; gap: 8px; width: 100%; }
.fintech-reviews__dots .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c-border); cursor: pointer; transition: background 0.3s, width 0.3s, border-radius 0.3s; }
.fintech-reviews__dots .dot.active { background: var(--c-primary); width: 24px; border-radius: 4px; }

.fintech-reviews__swipe-hint { display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--c-text-muted); font-size: 0.85rem; font-weight: 600; animation: swipePulse 2s ease-in-out infinite; }

.reviews__nav-btn {
    display: none; background: var(--c-bg-card); color: var(--c-text-main); 
    border: 1px solid var(--c-border); border-radius: 50%; width: 54px; height: 54px; 
    font-size: 1.25rem; cursor: pointer; box-shadow: var(--shadow-md); 
    transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast); 
    z-index: 10; flex-shrink: 0; position: absolute; top: 45%; transform: translateY(-50%);
}
#review-prev { left: 0px; }
#review-next { right: 0px; }

@media (min-width: 1024px) {
    /* Блокируем скролл мышью на ПК, оставляем только кнопки! */
    .fintech-reviews__track { 
        overflow-x: hidden; scroll-snap-type: none; 
        padding: 20px 60px 40px; 
    }
    .fintech-reviews__track::before, .fintech-reviews__track::after { display: none; }
    .reviews__nav-btn { display: flex; align-items: center; justify-content: center; }
    .fintech-reviews__dots { display: none; }
    .social-case { flex: 0 0 calc(33.333% - 16px); max-width: none; }
    
    .reviews__nav-btn:hover { background: var(--c-text-main); color: #fff; transform: translateY(-50%) scale(1.05); }
    .social-case:hover { transform: translateY(-6px); box-shadow: 0 20px 40px -10px rgba(0,0,0,0.12); border-color: rgba(16, 185, 129, 0.4); }
}

/* ==========================================
   ULTRA-PREMIUM FORM UI (NEO-BANKING STYLE)
   ========================================== */
.form-container { 
    max-width: 650px; margin: 60px auto; background: var(--c-bg-card); 
    padding: 48px; border-radius: var(--radius-lg); 
    box-shadow: 0 20px 50px -10px rgba(15, 23, 42, 0.05), 0 0 0 1px var(--c-border); 
}

/* Прогресс-бар с анимацией галочки */
.form-header { text-align: center; margin-bottom: 32px; }
.progress-steps { display: flex; justify-content: center; align-items: center; margin-bottom: 24px; }
.progress-steps__step { 
    position: relative; width: 36px; height: 36px; border-radius: 50%; 
    background: var(--c-secondary); color: var(--c-text-muted); 
    display: flex; justify-content: center; align-items: center; 
    font-weight: 700; font-size: 0.9rem; transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); 
}
.progress-steps__step--active { background: var(--c-primary); color: #fff; box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3); transform: scale(1.1); }
.progress-steps__step--completed { background: var(--c-success); color: #fff; }
.step-check { position: absolute; width: 18px; height: 18px; opacity: 0; transform: scale(0.5); transition: all 0.4s; }
.progress-steps__step--completed .step-num { opacity: 0; transform: scale(0.5); }
.progress-steps__step--completed .step-check { opacity: 1; transform: scale(1); }

.progress-steps__line { width: 50px; height: 3px; background: var(--c-secondary); margin: 0 12px; border-radius: 2px; position: relative; overflow: hidden; }
.progress-steps__line::after { 
    content: ''; position: absolute; top: 0; left: 0; height: 100%; width: 0%; 
    background: var(--c-primary); transition: width 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); 
}
.progress-steps__line.is-filled::after { width: 100%; }

.form-header__title { font-size: 1.8rem; font-weight: 800; letter-spacing: -0.5px; margin-bottom: 4px; color: var(--c-text-main); }
.form__section-title { font-size: 1.15rem; font-weight: 800; color: var(--c-text-main); margin-bottom: 20px; display: flex; align-items: center; gap: 8px; }

.form__step { display: none; animation: fadeIn 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
.form__step--active { display: block; }
.form__row { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; }

/* Инпуты с эффектом глубины */
.form__group { position: relative; margin-bottom: 24px; display: flex; align-items: center; }

.form__icon { 
    position: absolute; left: 16px; width: 24px; height: 24px; color: #94A3B8; 
    pointer-events: none; transition: color 0.3s, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); z-index: 2; 
    display: flex; align-items: center; justify-content: center; 
}
.form__icon svg { width: 100%; height: 100%; stroke-width: 2; }
.form__suffix { position: absolute; right: 16px; font-weight: 700; color: var(--c-text-muted); font-size: 1rem; pointer-events: none; z-index: 2; }

.form__input { 
    width: 100%; min-height: 64px; padding: 26px 16px 10px; 
    background-color: #F8FAFC; border: 2px solid transparent; border-radius: 16px; 
    font-family: inherit; font-size: 1.05rem; color: var(--c-text-main); font-weight: 600; 
    transition: background 0.3s, border-color 0.3s, box-shadow 0.3s;
    box-shadow: inset 0 0 0 1px var(--c-border); /* Заменил жесткий border на мягкую тень */
}
.form__input--icon { padding-left: 52px; } 

input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield; }

.form__label { 
    position: absolute; top: 21px; left: 16px; font-size: 1rem; color: #64748B; 
    pointer-events: none; transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); font-weight: 500; 
}
.form__label--icon { left: 52px; }

/* Focus State */
.form__input:focus ~ .form__label, .form__input:not(:placeholder-shown) ~ .form__label, select.form__input:valid ~ .form__label { 
    top: 10px; font-size: 0.7rem; color: var(--c-primary); font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; 
}
.form__input:focus { 
    outline: none; background-color: #fff; 
    box-shadow: inset 0 0 0 2px var(--c-primary), 0 8px 20px -4px rgba(16, 185, 129, 0.15); 
}
.form__input:focus ~ .form__icon { color: var(--c-primary); transform: scale(1.1) translateY(-2px); }
.form__input::placeholder { color: transparent; }
.form__input:focus::placeholder { color: #CBD5E1; font-weight: 500; }

.validation-icon { position: absolute; right: 16px; width: 22px; height: 22px; opacity: 0; transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); background-size: contain; background-repeat: no-repeat; background-position: center; pointer-events: none; z-index: 3; transform: scale(0.5); }

/* Валидация (Успех/Ошибка) */
.form__group.is-valid .form__input { box-shadow: inset 0 0 0 2px var(--c-success); background-color: #fff; }
.form__group.is-valid .form__icon { color: var(--c-success); }
.form__group.is-valid .validation-icon { opacity: 1; transform: scale(1); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2310B981' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); }

.form__group.is-invalid .form__input { box-shadow: inset 0 0 0 2px var(--c-error), 0 4px 15px rgba(239, 68, 68, 0.15); background-color: #fff; animation: shake 0.4s; }
.form__group.is-invalid .form__icon { color: var(--c-error); }
.form__group.is-invalid .form__label { color: var(--c-error) !important; }
.form__group.is-invalid .validation-icon { opacity: 1; transform: scale(1); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23EF4444' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E"); }

.form__error-text { display: block; position: absolute; bottom: -20px; left: 4px; font-size: 0.75rem; font-weight: 700; color: var(--c-error); opacity: 0; transform: translateY(-4px); transition: all 0.3s; pointer-events: none; }
.form__group.is-invalid .form__error-text { opacity: 1; transform: translateY(0); }

/* КАРТОЧНЫЕ ЧЕКБОКСЫ (CARD UI) */
.form__checkboxes { margin: 32px 0 32px; display: flex; flex-direction: column; gap: 16px; }

.form__checkbox-card { 
    position: relative; display: flex; align-items: center; gap: 16px; 
    padding: 16px 20px; background: #F8FAFC; border-radius: 16px; 
    box-shadow: inset 0 0 0 1px var(--c-border); cursor: pointer; 
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); 
    -webkit-tap-highlight-color: transparent;
}
.form__checkbox-card:hover { background: #fff; box-shadow: inset 0 0 0 2px rgba(16, 185, 129, 0.4), 0 4px 12px rgba(0,0,0,0.05); }

.hidden-checkbox { position: absolute; opacity: 0; width: 0; height: 0; }

/* Отрисовка красивой галочки без JS */
.checkbox-visual { 
    width: 24px; height: 24px; border-radius: 6px; 
    box-shadow: inset 0 0 0 2px #CBD5E1; background: #fff; 
    display: flex; align-items: center; justify-content: center; 
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); flex-shrink: 0; 
}
.checkbox-visual svg { 
    width: 16px; height: 16px; color: #fff; stroke-dasharray: 24; stroke-dashoffset: 24; 
    transition: stroke-dashoffset 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); 
}

.hidden-checkbox:checked ~ .checkbox-visual { background: var(--c-primary); box-shadow: inset 0 0 0 2px var(--c-primary); transform: scale(1.1); }
.hidden-checkbox:checked ~ .checkbox-visual svg { stroke-dashoffset: 0; }

/* Выделение всей карточки при клике */
.hidden-checkbox:checked ~ .checkbox-text .title { color: var(--c-text-main); }
.form__checkbox-card:has(.hidden-checkbox:checked) { background: rgba(16, 185, 129, 0.05); box-shadow: inset 0 0 0 2px var(--c-primary); }

.checkbox-text { display: flex; flex-direction: column; gap: 2px; }
.checkbox-text .title { font-size: 0.95rem; font-weight: 700; color: var(--c-text-main); transition: color 0.3s; }
.checkbox-text .subtitle { font-size: 0.8rem; color: var(--c-text-muted); font-weight: 500; }

.form__actions { display: grid; grid-template-columns: 1fr 2.5fr; gap: 16px; }

/* ПРЕМИАЛЬНАЯ КНОПКА CMD (Матовое стекло) */
.cmd-wrapper { margin-bottom: 32px; text-align: center; }
.btn-cmd { 
    display: flex; align-items: center; justify-content: center; gap: 16px; width: 100%; 
    background: linear-gradient(145deg, #ffffff 0%, #F1F5F9 100%); 
    color: #0F172A; padding: 12px 16px; border-radius: 16px; border: none; 
    box-shadow: inset 0 0 0 1px #E2E8F0, 0 4px 10px rgba(0,0,0,0.05);
    font-weight: 700; font-size: 1rem; cursor: pointer; 
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); 
}
.cmd-icon-bg { 
    width: 36px; height: 36px; background: #0F172A; color: #fff; 
    border-radius: 10px; display: flex; align-items: center; justify-content: center; 
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.3); transition: transform 0.4s;
}
.btn-cmd:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px #CBD5E1, 0 8px 20px -4px rgba(15, 23, 42, 0.1); }
.btn-cmd:hover .cmd-icon-bg { transform: scale(1.05) rotate(-5deg); }

.cmd-divider { display: flex; align-items: center; color: var(--c-text-muted); font-size: 0.8rem; font-weight: 700; text-transform: uppercase; margin-top: 24px; opacity: 0.6; }
.cmd-divider::before, .cmd-divider::after { content: ''; flex: 1; border-bottom: 2px dashed var(--c-border); }
.cmd-divider span { padding: 0 16px; }

/* SUMMARY TICKET (Билет) */
.summary-ticket { background: #0F172A; border-radius: 20px; padding: 16px 24px; margin-bottom: 32px; color: #fff; box-shadow: 0 15px 30px -10px rgba(15, 23, 42, 0.4), inset 0 1px 2px rgba(255, 255, 255, 0.15); position: relative; overflow: hidden; }
.summary-ticket::after { content: ''; position: absolute; top: 0; left: -100%; width: 50%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.05), transparent); transform: skewX(-25deg); animation: premiumShine 6s infinite; pointer-events: none; }
.summary-ticket__motivator { display: flex; align-items: center; gap: 8px; font-size: 0.8rem; font-weight: 700; color: #A7F3D0; margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px dashed rgba(255, 255, 255, 0.15); text-transform: uppercase; letter-spacing: 0.5px; }
.pulse-icon { animation: pulseHeart 2s infinite; display: inline-block; }
@keyframes pulseHeart { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.2); } }
.summary-ticket__data { display: flex; justify-content: space-between; align-items: center; }
.summary-ticket__col { display: flex; flex-direction: column; gap: 4px; }
.summary-ticket__col.right { text-align: right; }
.summary-ticket__col span { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.5px; line-height: 1; }
.summary-ticket__col small { font-size: 0.85rem; color: #94A3B8; font-weight: 600; }
.summary-ticket__col .highlight { color: #10B981; font-size: 1.7rem; }

/* Адаптив для Мобильных (Смартфоны) */
@media (max-width: 768px) {
    .form-container { padding: 32px 20px; margin: 24px auto; border-radius: 24px; border: none; box-shadow: none; background: transparent; }
    
    /* На мобилках форма сливается с фоном для экономии места */
    body:not(.high-contrast) .form-container { background: var(--c-bg-main); padding: 20px 0; }
    
    .form-header__title { font-size: 1.5rem; }
    .form__row { grid-template-columns: 1fr; gap: 0; }
    .form__actions { grid-template-columns: 1fr; display: flex; flex-direction: column-reverse; gap: 12px; }
    
    .btn-cmd { padding: 10px 16px; font-size: 0.9rem; border-radius: 14px; }
    .cmd-icon-bg { width: 32px; height: 32px; }
    
    .summary-ticket { padding: 14px 16px; border-radius: 16px; margin-bottom: 24px; }
    .summary-ticket__motivator { font-size: 0.7rem; margin-bottom: 8px; padding-bottom: 8px; }
    .summary-ticket__col span { font-size: 1.25rem; }
    .summary-ticket__col .highlight { font-size: 1.4rem; }

    .form__input { min-height: 60px; font-size: 1rem; border-radius: 14px; }
    .form__checkbox-card { padding: 14px 16px; border-radius: 14px; align-items: flex-start; }
    .checkbox-visual { margin-top: 2px; }
    .checkbox-text .title { font-size: 0.9rem; }
    
    .btn { height: 56px; border-radius: 14px; }
}

/* ==========================================
   SKELETON LOADER UI
   ========================================== */
.processing-card { max-width: 500px; margin: 100px auto; text-align: center; background: var(--c-bg-card); padding: 40px; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.skeleton-wrapper { text-align: left; }
.skeleton-header { display: flex; gap: 16px; align-items: center; margin-bottom: 32px; }
.skeleton-circle { width: 60px; height: 60px; border-radius: 50%; }
.skeleton-lines { flex: 1; display: flex; flex-direction: column; gap: 12px; }
.skeleton-line { height: 16px; border-radius: 8px; }
.skeleton-line.title { width: 60%; height: 24px; }
.skeleton-line.subtitle { width: 40%; }
.skeleton-body { display: flex; flex-direction: column; gap: 16px; }
.skeleton-box { height: 40px; border-radius: var(--radius-sm); width: 100%; }
.skeleton-box.full { height: 120px; }

@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.skeleton-circle, .skeleton-line, .skeleton-box { background: #e2e8f0; background: linear-gradient(90deg, #e2e8f0 25%, #cbd5e1 50%, #e2e8f0 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; }

.processing-card__title { font-size: 1.5rem; margin-bottom: 8px; font-weight: 600; text-align: center; }
.processing-card__status { font-size: 0.875rem; font-weight: 600; color: var(--c-primary); text-align: center; transition: color 0.3s; }
.processing-card__bar-bg { width: 100%; height: 6px; background: var(--c-secondary); border-radius: 3px; overflow: hidden; margin-bottom: 12px; }
.processing-card__bar-fill { height: 100%; width: 0%; background: var(--c-primary); transition: width 0.5s ease-in-out; }

/* ==========================================
   RESULT CARD
   ========================================== */
.result-card { max-width: 600px; margin: 60px auto; background: var(--c-bg-card); padding: 40px; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.result-card__badge { display: inline-block; background: rgba(16,185,129,0.1); color: var(--c-success); padding: 6px 12px; border-radius: 20px; font-size: 0.75rem; font-weight: 600; margin-bottom: 16px; }
.result-card__title { font-size: 1.5rem; margin-bottom: 8px; font-weight: 600; }
.result-card__ref { color: var(--c-text-muted); margin-bottom: 32px; font-size: 0.875rem; }
.result-card__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 24px; }
.result-card__data { background: var(--c-bg-main); padding: 16px; border-radius: var(--radius-md); display: flex; flex-direction: column; }
.result-card__data span { font-size: 0.75rem; color: var(--c-text-muted); margin-bottom: 4px; }
.result-card__data strong { font-size: 1.25rem; font-weight: 600; }
.result-card__data--highlight { grid-column: span 2; background: rgba(16,185,129,0.05); border: 1px solid rgba(16,185,129,0.2); }
.result-card__data--highlight strong { color: var(--c-primary); font-size: 2.5rem; letter-spacing: -0.05em; }
.result-card__rates { display: flex; justify-content: center; gap: 24px; font-size: 0.875rem; }

.result-timeline { display: flex; justify-content: space-between; align-items: center; margin: 32px 0; padding-top: 24px; border-top: 1px solid var(--c-border); }
.timeline-step { display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 0.75rem; color: var(--c-text-muted); font-weight: 500; text-align: center; transition: color 0.3s; }
.timeline-step span { width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--c-secondary); color: var(--c-text-muted); font-weight: 700; transition: background 0.3s, color 0.3s; }
.timeline-step.active { color: var(--c-primary); }
.timeline-step.active span { background: var(--c-primary); color: #fff; }
.timeline-step.pending span { border: 2px dashed var(--c-secondary); background: transparent; }

.result-card__pdf-section { margin-bottom: 32px; }
.result-card__acceptance { border-top: 1px solid var(--c-border); padding-top: 24px; }

.success-card { max-width: 500px; margin: 100px auto; text-align: center; background: var(--c-bg-card); padding: 40px; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.success-card__icon { width: 80px; height: 80px; background: var(--c-success); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 2.5rem; margin: 0 auto 24px; animation: scaleIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
@keyframes scaleIn { 0% { transform: scale(0); } 100% { transform: scale(1); } }

/* ==========================================
   AWARDS
   ========================================== */
.awards-section { padding: 60px 20px 20px; max-width: 1200px; margin: 0 auto; }
.awards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }
.award-item { background: var(--c-bg-card); padding: 24px; border-radius: var(--radius-md); box-shadow: var(--shadow-sm); border: 1px solid var(--c-border); transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base); display: flex; align-items: center; gap: 20px; }
.award-item__icon-wrapper { width: 56px; height: 56px; border-radius: 16px; background: rgba(16, 185, 129, 0.1); color: var(--c-primary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background var(--transition-base), color var(--transition-base), transform var(--transition-base); }
.award-item__content { display: flex; flex-direction: column; gap: 4px; text-align: left; }
.award-item__content strong { font-size: 1.05rem; font-weight: 700; color: var(--c-text-main); line-height: 1.2; }
.award-item__content span { font-size: 0.875rem; color: var(--c-text-muted); line-height: 1.4; }

/* ==========================================
   RICH SECTION HEADERS (Trust & Blog)
   ========================================== */
.section-header-rich {
    text-align: center;
    margin-bottom: 48px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 20px;
}
.section-header-rich__badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(16, 185, 129, 0.1);
    color: var(--c-primary);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 6px 14px;
    border-radius: 100px;
    margin-bottom: 20px;
    box-shadow: 0 4px 10px rgba(16, 185, 129, 0.1);
}
.section-header-rich__title {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 800;
    color: var(--c-text-main);
    margin-bottom: 16px;
    letter-spacing: -0.03em;
    line-height: 1.2;
}
.section-header-rich__title span {
    color: transparent;
    background: linear-gradient(135deg, var(--c-primary), #047857);
    -webkit-background-clip: text;
    background-clip: text;
}
.section-header-rich__subtitle {
    color: var(--c-text-muted);
    font-size: 1rem;
    max-width: 650px;
    line-height: 1.6;
    margin: 0 auto;
}

/* ==========================================
   BLOG / FINANCIAL LITERACY
   ========================================== */
.blog-section { padding: 60px 20px; }
.article-slider-wrapper { position: relative; max-width: 1000px; margin: 0 auto; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 21/9; box-shadow: var(--shadow-md); background: var(--c-secondary); }
.article-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 0.8s ease, visibility 0.8s; text-decoration: none; display: flex; align-items: flex-end; }
.article-slide.active { opacity: 1; visibility: visible; }
.article-slide__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.05); transition: transform 6s ease-out; z-index: 0; }
.article-slide.active .article-slide__img { transform: scale(1); }
.article-slide__overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(15,23,42, 0.9) 0%, rgba(15,23,42, 0.2) 60%, rgba(0,0,0,0) 100%); z-index: 1; }
.article-slide__content { position: relative; z-index: 2; padding: 40px; transform: translateY(20px); transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.2s; }
.article-slide.active .article-slide__content { transform: translateY(0); }
.article-slide__tag { display: inline-block; background: var(--c-primary); color: #fff; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; padding: 6px 14px; border-radius: 20px; margin-bottom: 16px; letter-spacing: 0.5px; }
.article-slide__content h4 { font-size: clamp(1.25rem, 3vw, 1.75rem); color: #fff; margin-bottom: 8px; font-weight: 700; }

.article-slide__content .article-slide__desc { 
    font-size: clamp(0.875rem, 1.5vw, 1rem); 
    color: rgba(255,255,255,0.85); 
    max-width: 700px; 
    line-height: 1.6; 
    margin: 0 0 16px 0; 
    display: -webkit-box; 
    -webkit-line-clamp: 3; 
    -webkit-box-orient: vertical; 
    overflow: hidden;
}
.article-slide__readmore {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--c-primary);
    transition: color var(--transition-fast), transform var(--transition-fast);
}
.article-slide__readmore span {
    transition: transform var(--transition-fast);
}

.article-slider__indicators { position: absolute; bottom: 24px; right: 24px; z-index: 10; display: flex; gap: 8px; }
.article-slider__indicators .dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, 0.4); transition: background 0.3s ease, width 0.3s ease, border-radius 0.3s ease; cursor: pointer; }
.article-slider__indicators .dot.active { background: #fff; width: 24px; border-radius: 4px; box-shadow: 0 2px 4px rgba(0,0,0,0.2); }

/* ==========================================
   PREMIUM FAQ (GRID & ANIMATIONS)
   ========================================== */
.faq-section { padding: 80px 20px; overflow: hidden; background: var(--c-bg-main); border-top: 1px solid var(--c-border); }

.faq__grid { display: grid; grid-template-columns: 1fr; gap: 16px; max-width: 1000px; margin: 0 auto; }

.faq__item { background: var(--c-bg-card); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); border: 1px solid var(--c-border); transition: box-shadow 0.3s ease, border-color 0.3s ease; overflow: hidden; }
.faq__item[open] { border-color: var(--c-primary); box-shadow: 0 10px 25px -5px rgba(16, 185, 129, 0.15); }

.faq__question { display: flex; justify-content: space-between; align-items: center; padding: 24px; font-weight: 600; font-size: 1.05rem; color: var(--c-text-main); cursor: pointer; list-style: none; transition: color 0.2s ease; user-select: none; }
.faq__question::-webkit-details-marker { display: none; }

.faq__icon { position: relative; width: 24px; height: 24px; flex-shrink: 0; margin-left: 16px; border-radius: 50%; background: rgba(16, 185, 129, 0.1); transition: background 0.3s, transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
.faq__icon::before, .faq__icon::after { content: ''; position: absolute; background: var(--c-primary); top: 50%; left: 50%; transform: translate(-50%, -50%); transition: transform 0.3s ease, background 0.3s; }
.faq__icon::before { width: 12px; height: 2px; }
.faq__icon::after { width: 2px; height: 12px; }

.faq__item[open] .faq__icon { transform: rotate(135deg); background: var(--c-primary); }
.faq__item[open] .faq__icon::before, .faq__item[open] .faq__icon::after { background: #fff; }

.faq__answer { padding: 0 24px 24px 24px; color: var(--c-text-muted); line-height: 1.7; font-size: 0.95rem; border-top: 1px dashed transparent; animation: faqSlideDown 0.4s ease-out forwards; }
.faq__answer strong { color: var(--c-text-main); }

@keyframes faqSlideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }

/* ==========================================
   MODALS (Fully Adaptive & App-like)
   ========================================== */
.modal { 
    position: fixed; inset: 0; z-index: var(--z-modal); 
    display: flex; align-items: center; justify-content: center; 
    padding: 20px; opacity: 1; visibility: visible;
    transition: opacity 0.3s, visibility 0.3s; 
}
.modal.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.modal__overlay { position: absolute; inset: 0; background: rgba(15,23,42,0.6); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); z-index: 0; }

.modal__content { 
    position: relative; background: var(--c-bg-card); width: 100%; max-width: 650px; 
    max-height: 90vh; max-height: 90dvh; 
    overflow-y: auto; 
    overscroll-behavior: contain; 
    border-radius: var(--radius-lg); padding: 40px; box-shadow: var(--shadow-lg); z-index: 1; 
}

.modal__content::-webkit-scrollbar { width: 6px; }
.modal__content::-webkit-scrollbar-thumb { background: var(--c-border); border-radius: 10px; }

.modal__close { 
    position: absolute; top: 20px; right: 20px; 
    background: var(--c-secondary); border-radius: 50%; width: 40px; height: 40px; 
    display: flex; align-items: center; justify-content: center; border: none; 
    font-size: 1.5rem; cursor: pointer; color: var(--c-text-main); 
    transition: background 0.2s; z-index: 10; 
}
.modal__close:hover { background: var(--c-border); }

.modal__title { margin-bottom: 24px; font-size: 1.5rem; font-weight: 700; color: var(--c-text-main); }
.modal__body { color: var(--c-text-muted); font-size: 0.95rem; line-height: 1.6; }

/* ARTICLE MODAL MODIFIER */
.modal__content--article { max-width: 800px; padding: 0; display: flex; flex-direction: column; }
.modal__close--floating { background: rgba(0,0,0,0.4); color: #fff; backdrop-filter: blur(4px); }
.modal__close--floating:hover { background: rgba(0,0,0,0.8); color: #fff; }

.article-modal__cover { width: 100%; height: 280px; object-fit: cover; flex-shrink: 0; }
.article-modal__body { padding: 40px; }
.article-modal__tag { background: rgba(16, 185, 129, 0.1); color: var(--c-primary); box-shadow: none; margin-bottom: 16px; display: inline-block; }
.article-modal__title { margin-bottom: 24px; font-size: clamp(1.5rem, 3vw, 2.2rem); line-height: 1.2; font-weight: 800; color: var(--c-text-main); }

.article-modal__text { color: var(--c-text-muted); font-size: 1.05rem; line-height: 1.8; }
.article-modal__text h2, .article-modal__text h3 { color: var(--c-text-main); margin: 32px 0 16px; font-size: 1.35rem; }
.article-modal__text p, .article-modal__text ul { margin-bottom: 16px; }
.article-modal__text ul { padding-left: 20px; }
.article-modal__text strong { color: var(--c-text-main); }

.article-modal__cta { margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--c-border); text-align: center; }
.article-modal__cta h4 { margin-bottom: 24px; font-size: 1.25rem; font-weight: 700; color: var(--c-text-main); }

/* ==========================================
   ULTRA-PREMIUM TOAST NOTIFICATIONS
   ========================================== */
.toast-container { 
    position: fixed; 
    top: 32px; 
    left: 50%; 
    transform: translateX(-50%); 
    z-index: var(--z-toast); 
    display: flex; 
    flex-direction: column; 
    gap: 12px; 
    pointer-events: none; 
    width: 90%; 
    max-width: 420px;
}

.toast { 
    pointer-events: auto;
    background: rgba(255, 255, 255, 0.95); 
    backdrop-filter: blur(16px); 
    -webkit-backdrop-filter: blur(16px);
    color: var(--c-text-main); 
    padding: 12px 16px 12px 16px; 
    border-radius: 100px; /* Эффект "таблетки" как в iOS */
    font-size: 0.9rem; 
    font-weight: 600; 
    box-shadow: 0 15px 35px -5px rgba(0,0,0,0.1), 0 0 0 1px rgba(0,0,0,0.05); 
    display: flex; 
    align-items: center; 
    gap: 12px; 
    animation: toastSlideDown 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; 
    transition: all 0.4s cubic-bezier(0.32, 0.72, 0, 1);
}

body.high-contrast .toast {
    background: rgba(15, 23, 42, 0.95);
    color: #fff;
    border: 1px solid var(--c-border);
}

.toast__icon {
    display: flex; 
    align-items: center; 
    justify-content: center;
    flex-shrink: 0; 
    width: 28px; 
    height: 28px; 
    border-radius: 50%;
}
.toast.toast--error .toast__icon { color: var(--c-error); background: rgba(239, 68, 68, 0.1); }
.toast.toast--success .toast__icon { color: var(--c-success); background: rgba(16, 185, 129, 0.1); }
.toast__icon svg { width: 16px; height: 16px; }

.toast__msg { 
    flex: 1; 
    line-height: 1.4; 
}

.toast__close {
    background: transparent; 
    border: none; 
    color: var(--c-text-muted);
    font-size: 1.25rem; 
    font-weight: 300; 
    cursor: pointer;
    width: 28px; 
    height: 28px; 
    display: flex; 
    align-items: center; 
    justify-content: center;
    border-radius: 50%; 
    transition: background 0.2s, color 0.2s;
}
.toast__close:hover { background: rgba(0,0,0,0.05); color: var(--c-text-main); }
body.high-contrast .toast__close:hover { background: rgba(255,255,255,0.1); color: #fff; }

/* ФИКС ИСЧЕЗНОВЕНИЯ */
.toast.fade-out { 
    animation: none !important; /* Жестко убиваем анимацию появления */
    opacity: 0; 
    transform: translateY(-20px) scale(0.95); 
}

@keyframes toastSlideDown { 
    from { opacity: 0; transform: translateY(-30px) scale(0.9); } 
    to { opacity: 1; transform: translateY(0) scale(1); } 
}

/* ==========================================
   NEW PAGES (Contacts, Legal) & INTERNAL UI
   ========================================== */
.page .main {
    position: relative;
    z-index: 1;
    overflow-x: clip; 
    padding-bottom: 40px;
}
.page .main::before {
    content: ''; position: absolute; top: -100px; left: 50%; transform: translateX(-50%);
    width: 200%; max-width: 800px; height: 600px; background: radial-gradient(circle, rgba(16,185,129,0.06) 0%, rgba(255,255,255,0) 70%);
    border-radius: 50%; z-index: -1; pointer-events: none;
}
.legal-content, .contact-info {
    position: relative;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 15px 40px -10px rgba(0,0,0,0.08);
    border: 1px solid rgba(255,255,255,1);
    padding: clamp(24px, 5vw, 40px); 
    border-radius: var(--radius-lg);
}
body.high-contrast .legal-content, body.high-contrast .contact-info {
    background: rgba(30, 41, 59, 0.85);
    border-color: var(--c-border);
}

.contact-section { padding: 40px 0 80px; }
.contact-header { text-align: center; margin-bottom: 48px; }
.contact-info { display: flex; flex-direction: column; gap: 32px; }
.contact-item h4 { font-size: 1.125rem; margin-bottom: 8px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.contact-map { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); height: 400px; background: var(--c-secondary); }
.contact-map iframe { width: 100%; height: 100%; border: none; }

.legal-section { padding: 40px 20px 80px; max-width: 800px; margin: 0 auto; }
.legal-header { border-bottom: 1px solid var(--c-border); padding-bottom: 24px; margin-bottom: 40px; }
.legal-content h2 { margin-top: 40px; margin-bottom: 16px; font-size: 1.5rem; }
.legal-content p { margin-bottom: 16px; line-height: 1.7; text-align: justify; }
.legal-content ul { padding-left: 20px; margin-bottom: 24px; line-height: 1.7; }

/* ==========================================
   FOOTER GRID & TRUSTPILOT
   ========================================== */
.footer-premium__grid { 
    display: grid; 
    grid-template-columns: 1fr; 
    gap: 40px; 
    margin-bottom: 60px; 
    text-align: left; 
    align-items: start; /* Идеальное выравнивание по верхнему краю */
}

/* Адаптив сетки */
@media (min-width: 768px) {
    .footer-premium__grid { grid-template-columns: repeat(2, 1fr); gap: 48px 24px; }
}
@media (min-width: 1024px) {
    .footer-premium__grid { grid-template-columns: 2.5fr 1fr 1.5fr 1.5fr; gap: 40px; }
}

/* Виджет Trustpilot */
.footer-trust { 
    display: flex; 
    flex-direction: column; 
    gap: 6px; 
    text-decoration: none; 
    width: fit-content; 
    margin-top: 12px;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); 
}
.footer-trust:hover { 
    transform: translateY(-3px); 
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
}
.trustpilot-logo { 
    display: flex; 
    align-items: center; 
    gap: 8px; 
    color: #fff; 
    font-weight: 700; 
    font-size: 1.15rem; 
    letter-spacing: -0.5px; 
}
.trustpilot-logo svg { width: 24px; height: 24px; }
.trustpilot-rating { 
    display: flex; 
    align-items: center; 
    gap: 8px; 
    font-size: 0.9rem; 
}
.trustpilot-rating .stars { 
    color: #00B67A; 
    font-size: 1.25rem; 
    letter-spacing: 2px; 
    line-height: 1;
}
.trustpilot-rating .score { color: #94A3B8; }
.trustpilot-rating .score strong { color: #fff; }

/* ==========================================
   ULTRA-PREMIUM FOOTER (DARK MODE)
   ========================================== */
.footer-premium { 
    position: relative; 
    background-color: #0B0F19; 
    color: #F8FAFC; 
    padding: 80px 0 max(40px, env(safe-area-inset-bottom) + 20px); 
    margin-top: 80px; 
    overflow: hidden; 
    border-top: 1px solid #1E293B;
}

.relative-z { position: relative; z-index: 2; }

.footer-glow { 
    position: absolute; top: 0; left: 50%; transform: translateX(-50%); 
    width: 200%; max-width: 800px; height: 400px; 
    background: radial-gradient(ellipse at top, rgba(16, 185, 129, 0.08) 0%, transparent 70%); 
    pointer-events: none; z-index: 0;
}

.footer-premium__grid { display: grid; grid-template-columns: 1fr; gap: 40px; margin-bottom: 60px; text-align: left; }
.footer-col { display: flex; flex-direction: column; gap: 16px; }
.footer-logo { display: flex; align-items: center; gap: 12px; font-weight: 800; font-size: 1.25rem; color: #fff; letter-spacing: -0.5px; }
.footer-logo-icon { width: 36px; height: 36px; background: linear-gradient(135deg, var(--c-primary), #047857); border-radius: 10px; display: flex; align-items: center; justify-content: center; color: white; box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4); }
.footer-desc { color: #94A3B8; font-size: 0.9rem; line-height: 1.7; max-width: 300px; }

.footer-col h4 { font-size: 1.05rem; font-weight: 700; color: #fff; margin-bottom: 4px; letter-spacing: 0.5px; }
.footer-links { display: flex; flex-direction: column; gap: 16px; }
.footer-links a { color: #94A3B8; text-decoration: none; font-size: 0.95rem; font-weight: 500; transition: color var(--transition-fast), transform var(--transition-fast); display: inline-block; }

.footer-contacts { display: flex; flex-direction: column; gap: 16px; }
.footer-contacts p { margin: 0; display: flex; align-items: flex-start; gap: 12px; font-size: 0.95rem; color: #94A3B8; line-height: 1.5; }
.footer-contacts p svg { flex-shrink: 0; margin-top: 2px; }

.footer-badges { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.secure-badge { font-size: 0.8rem; font-weight: 600; color: #E2E8F0; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); padding: 8px 16px; border-radius: 8px; display: inline-flex; align-items: center; gap: 8px; }
.secure-badge svg { color: var(--c-primary); }

/* ==========================================
   PAYMENT LOGOS (GLOBAL CDN)
   ========================================== */
.footer-payments {
    display: flex;
    align-items: center; /* Центрируем иконки по одной оси */
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 12px;
}

.pay-img {
    display: block;
    width: auto;
    object-fit: contain;
    filter: grayscale(100%) opacity(0.5); /* Серые и приглушенные по умолчанию */
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Оптическая балансировка высоты */
.pay-img[alt="Multibanco"] { height: 24px; } 
.pay-img[alt="MB WAY"]     { height: 24px; } 
.pay-img[alt="Mastercard"] { height: 20px; } /* Круги, делаем чуть меньше */
.pay-img[alt="Visa"]       { height: 16px; margin-top: 2px; } /* Только текст, делаем компактнее */

/* Магия наведения */
@media (hover: hover) and (pointer: fine) {
    .pay-img:hover {
        filter: grayscale(0%) opacity(1); /* Возвращаем оригинальные цвета */
        transform: translateY(-2px) scale(1.08); /* Мягко приподнимаем картинку */
    }
}

.footer-premium__bottom { display: flex; flex-direction: column; gap: 24px; padding-top: 40px; border-top: 1px solid #1E293B; margin-bottom: 32px; text-align: center; align-items: center; }
.status-text { font-size: 0.8rem; color: #64748B; line-height: 1.6; margin-bottom: 8px; }
.copyright-text { font-size: 0.85rem; font-weight: 600; color: #94A3B8; }

.btn-livro-dark { 
    display: inline-flex; align-items: center; gap: 12px; 
    background: transparent; color: #E2E8F0; 
    border: 1px solid #334155; text-decoration: none; 
    padding: 12px 24px; border-radius: var(--radius-sm); 
    font-weight: 600; font-size: 0.9rem; 
    transition: background 0.3s, color 0.3s, border-color 0.3s;
}
.btn-livro-dark .livro-icon { color: #EF4444; transition: color 0.3s; }
.footer-premium__disclaimer { font-size: 0.75rem; color: #475569; text-align: center; max-width: 800px; margin: 0 auto; line-height: 1.6; }

/* ==========================================
   GLOBAL WIDGETS (Маскот, Куки, и т.д.)
   ========================================== */
.cookie-banner { position: fixed; bottom: 0; left: 0; right: 0; background: rgba(255,255,255,0.95); backdrop-filter: blur(10px); padding: 16px 24px max(16px, env(safe-area-inset-bottom) + 16px); box-shadow: 0 -10px 30px rgba(0,0,0,0.08); display: flex; justify-content: space-between; align-items: center; gap: 24px; z-index: var(--z-modal) !important; border-top: 1px solid var(--c-border); transition: transform 0.3s; }
.cookie-banner.hidden { transform: translateY(150%); }

.a11y-widget { position: fixed; left: 16px; bottom: max(24px, env(safe-area-inset-bottom) + 24px); z-index: var(--z-floating) !important; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; transition: bottom 0.3s; }
.a11y-toggle-btn { width: 50px; height: 50px; border-radius: 50%; background: #0F172A; color: #fff; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(0,0,0,0.2); }
.a11y-menu { background: var(--c-bg-card); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); border: 1px solid var(--c-border); overflow: hidden; display: flex; flex-direction: column; transform-origin: bottom left; transition: transform 0.3s, opacity 0.3s; }
.a11y-menu.hidden { transform: scale(0.8) translateY(20px); opacity: 0; pointer-events: none; }
.a11y-menu button { display: flex; align-items: center; gap: 12px; width: 180px; padding: 12px 16px; background: none; border: none; border-bottom: 1px solid var(--c-border); font-weight: 600; color: var(--c-text-main); }

.sticky-cta-mobile { display: none; position: fixed; bottom: 0; left: 0; right: 0; padding: 16px; padding-bottom: max(16px, env(safe-area-inset-bottom)); background: rgba(255,255,255,0.9); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid var(--c-border); z-index: var(--z-sticky) !important; transform: translateY(100%); transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1); }
.sticky-cta-mobile.visible { transform: translateY(0); }

.mascot-widget {
    position: fixed; bottom: max(24px, env(safe-area-inset-bottom) + 24px); right: 24px;
    z-index: var(--z-floating); display: flex; align-items: center; gap: 12px;
    background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    padding: 8px 20px 8px 8px; border-radius: 100px; border: 1px solid rgba(16, 185, 129, 0.3);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); text-decoration: none;
    animation: floatMascot 4s ease-in-out infinite; transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s, bottom 0.3s;
    will-change: transform;
}
.mascot-widget:hover { transform: scale(1.05) translateY(-5px); box-shadow: 0 15px 35px rgba(16, 185, 129, 0.3); border-color: var(--c-primary); animation-play-state: paused; }
.mascot-svg { width: 48px; height: 48px; filter: drop-shadow(0 4px 6px rgba(0,0,0,0.15)); }
.mascot-eye { transform-origin: center; animation: mascotBlink 4s infinite; }
@keyframes mascotBlink { 0%, 94%, 98%, 100% { transform: scaleY(1); } 96% { transform: scaleY(0.1); } }
@keyframes floatMascot { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-8px); } }
.mascot-text { display: flex; flex-direction: column; text-align: left; }
.mascot-text strong { color: var(--c-text-main); font-size: 0.95rem; line-height: 1.2; font-weight: 800; letter-spacing: -0.3px; transition: color 0.3s; }
.mascot-text span { font-size: 0.75rem; color: #0088cc; font-weight: 700; }

body.high-contrast .mascot-widget { background: rgba(30, 41, 59, 0.95); border-color: var(--c-border); }
body.high-contrast .mascot-text strong { color: #F8FAFC; }

/* ==========================================
   BENTO BOX / MICRO-UI WIDGETS (Аудитории)
   ========================================== */
.ui-widget {
    position: relative; z-index: 2; 
    width: 90%; max-width: 460px;
    display: flex; flex-direction: column; gap: 20px;
    animation: floatAnim 6s ease-in-out infinite; margin: 0 auto;
}
.ui-card {
    background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border-radius: var(--radius-md); 
    padding: clamp(24px, 4vw, 36px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.08); border: 1px solid rgba(255,255,255,1);
    display: flex; flex-direction: column; gap: 16px;
}
body.high-contrast .ui-card { background: rgba(30,41,59,0.9); border-color: var(--c-border); }

.ui-card--dark { background: var(--c-text-main); color: #fff; border: none; }
body.high-contrast .ui-card--dark { background: #000; border: 1px solid var(--c-border); }

.ui-badge {
    display: inline-flex; align-items: center; gap: 8px; 
    padding: 8px 16px;
    border-radius: 100px; 
    font-size: clamp(0.75rem, 1.5vw, 0.85rem); font-weight: 700; text-transform: uppercase;
    background: rgba(16, 185, 129, 0.1); color: var(--c-primary); width: fit-content;
}
.ui-title { 
    font-size: clamp(2.5rem, 6vw, 3.5rem);
    font-weight: 800; letter-spacing: -1px; line-height: 1; color: var(--c-text-main); 
}
.ui-card--dark .ui-title { color: #fff; }
.ui-subtitle { 
    font-size: clamp(0.85rem, 2vw, 1rem); 
    color: var(--c-text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; 
}

.ui-row { display: flex; justify-content: space-between; align-items: center; padding-bottom: 16px; border-bottom: 1px dashed var(--c-border); }
.ui-row:last-child { border-bottom: none; padding-bottom: 0; }
.ui-row-label { color: var(--c-text-muted); font-size: clamp(0.95rem, 2vw, 1.1rem); font-weight: 500; }
.ui-row-value { font-weight: 800; color: var(--c-text-main); font-size: clamp(1.1rem, 2.5vw, 1.4rem); }
.ui-card--dark .ui-row-label { color: #94A3B8; }
.ui-card--dark .ui-row-value { color: #fff; }

/* Micro-UI Details */
.ui-avatar { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; color: white; flex-shrink: 0; }
.ui-chart-container { display: flex; align-items: flex-end; gap: 6px; height: 60px; border-bottom: 1px solid var(--c-border); padding-bottom: 4px; position: relative; margin-top: 8px;}
.ui-chart-bar { flex: 1; background: var(--c-secondary); border-radius: 4px 4px 0 0; transition: height 0.3s; }
.ui-chart-bar--active { background: rgba(16, 185, 129, 0.2); }
.ui-progress-bg { width: 100%; height: 8px; background: var(--c-secondary); border-radius: 4px; overflow: hidden; margin-top: 6px; }
.ui-progress-fill { height: 100%; background: var(--c-primary); border-radius: 4px; }
.ui-timeline-item { display: flex; justify-content: space-between; padding: 10px 12px; background: rgba(255,255,255,0.05); border-radius: 8px; align-items: center;}
.ui-timeline-item--highlight { border-left: 3px solid var(--c-primary); background: rgba(16, 185, 129, 0.1); }

/* Анимации для дашбордов */
.ui-anim-pop { animation: popInCard 4s infinite; }
.ui-anim-scan { position: relative; overflow: hidden; }
.ui-anim-scan::after {
    content: ''; position: absolute; top: -50%; left: 0; width: 100%; height: 30px;
    background: linear-gradient(to bottom, transparent, rgba(16, 185, 129, 0.3));
    opacity: 0; animation: scanner 3s infinite linear;
}

@keyframes popInCard { 
    0%, 20% { opacity: 0; transform: translateY(15px); } 
    30%, 90% { opacity: 1; transform: translateY(0); } 
    100% { opacity: 0; transform: translateY(-15px); } 
}
@keyframes scanner { 
    0% { top: -20%; opacity: 0;} 
    10% {opacity: 1;}
    90% { opacity: 1;}
    100% { top: 120%; opacity: 0;} 
}

/* Dark Mode Overrides for internal pages */
body.high-contrast .sticky-cta-mobile, body.high-contrast .cookie-banner, body.high-contrast .header { background: rgba(30, 41, 59, 0.9); border-color: var(--c-border); }
body.high-contrast .top-bar { background-color: #0F172A; }
body.text-large { font-size: 1.15rem; }

/* ==========================================
   MEDIA QUERIES (Mobile First Adjustments)
   ========================================== */
@media (max-width: 1023px) {
    .header { position: relative; }
    .header__mobile-toggle svg { pointer-events: none; }
    .header__nav { 
        display: flex; flex-direction: column; align-items: flex-start; 
        position: absolute; top: 100%; left: 0; right: 0; 
        background: var(--c-bg-card); padding: 32px 24px; 
        box-shadow: 0 15px 30px -10px rgba(0,0,0,0.15); gap: 24px;
        z-index: 99; opacity: 0; visibility: hidden; transform: translateY(-10px);
        transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
        
        /* 🔥 ФИКС СКРОЛЛА ДЛЯ МОБИЛЬНОГО МЕНЮ 🔥 */
        max-height: calc(100dvh - 112px); /* Ограничиваем высоту (100% экрана минус высота шапки) */
        overflow-y: auto; /* Включаем внутреннюю прокрутку */
        overscroll-behavior: contain; /* Запрещаем скроллиться сайту на фоне, пока открыто меню */
    }

    /* Делаем ползунок скролла аккуратным и премиальным */
    .header__nav::-webkit-scrollbar { width: 6px; }
    .header__nav::-webkit-scrollbar-thumb { background: var(--c-border); border-radius: 10px; }
    .header__nav.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
    .nav-link::after { display: none; } 
    .nav-link { font-size: 1.25rem; width: 100%; border-bottom: 1px solid var(--c-border); padding-bottom: 16px; }
    .desktop-only { display: none !important; }
    .mobile-only { display: flex !important; width: 100%; justify-content: center; padding: 16px; margin-top: 16px; }
    .header__mobile-toggle { display: block; }
    
    .trust-grid { flex-direction: column; gap: 32px; }
    .trust-divider { width: 80px; height: 2px; }
    .a11y-widget { display: none !important; }
    .mobile-a11y { display: flex; flex-direction: column; width: 100%; gap: 12px; margin-top: 8px; padding-top: 24px; border-top: 1px dashed var(--c-border); }
    .mobile-a11y__title { font-size: 0.75rem; text-transform: uppercase; font-weight: 700; color: var(--c-text-muted); letter-spacing: 0.5px; margin-bottom: 4px; }
    .mobile-a11y__btn { display: flex; align-items: center; gap: 12px; background: var(--c-bg-main); border: 1px solid var(--c-border); padding: 14px 16px; border-radius: var(--radius-sm); color: var(--c-text-main); font-weight: 600; font-size: 0.95rem; cursor: pointer; transition: background 0.2s; }
    .mobile-a11y__btn:active { background: var(--c-secondary); }
}

@media (max-width: 992px) {
    .premium-hero .hero__title { font-size: clamp(2.5rem, 6vw, 3.2rem); }
}

@media (max-width: 768px) {
    /* Form, Result & Processing Overrides */
    .form-container, .result-card, .processing-card { padding: 24px; margin: 40px auto; }
    
    /* Trust Section Overrides */
    .trust-section { padding: 60px 0; }
    .trust-section__header { margin-bottom: 32px; }
    .trust-group { gap: 20px 24px; }
    .trust-brand { gap: 8px; }
    .trust-brand__icon { width: 24px; height: 24px; }
    .trust-brand span { font-size: 0.95rem; }
    
    /* Blog & Modals Overrides */
    .section-header-rich { margin-bottom: 32px; padding: 0 16px; }
    .section-header-rich__subtitle { font-size: 0.9rem; }
    .article-slider-wrapper { aspect-ratio: 4/3; }
    .article-slide__content { padding: 24px; }
    
    /* Contact Page Overrides */
    .contact-grid { gap: 24px; margin-top: 24px; }
    .contact-map { height: 300px; }
    
    /* Global Elements */
    .cookie-banner { flex-direction: column; text-align: center; padding: 20px; }
    .cookie-banner .btn { width: 100%; }
    .sticky-cta-mobile { display: block; }
    
    /* Modals Logic */
    .modal { padding: 0; align-items: flex-end; } 
    .modal__content { max-height: 90dvh; border-radius: 24px 24px 0 0; padding: 40px 24px max(32px, env(safe-area-inset-bottom) + 16px); transform: translateY(100%); transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1); }
    .modal:not(.hidden) .modal__content { transform: translateY(0); }
    .modal__content::before { content: ''; position: absolute; top: 12px; left: 50%; transform: translateX(-50%); width: 40px; height: 4px; background: var(--c-border); border-radius: 4px; z-index: 20; }
    .modal__content--article { padding: 0; }
    .modal__content--article::before { background: rgba(255,255,255,0.8); box-shadow: 0 1px 4px rgba(0,0,0,0.2); }
    .article-modal__cover { height: 200px; }
    .article-modal__body { padding: 32px 20px max(32px, env(safe-area-inset-bottom) + 16px); }
    .article-modal__title { font-size: 1.75rem; }
    .article-modal__text { font-size: 1rem; line-height: 1.6; }

    /* Mascot Mobile */
    .mascot-widget { bottom: calc(80px + env(safe-area-inset-bottom)); right: 16px; padding: 6px 16px 6px 6px; }
    .mascot-svg { width: 40px; height: 40px; }
    .mascot-text strong { font-size: 0.85rem; }
    .mascot-text span { font-size: 0.65rem; }
    
    body:has(.cookie-banner:not(.hidden)) .sticky-cta-mobile { transform: translateY(150%) !important; }
    body:has(.cookie-banner:not(.hidden)) .mascot-widget, 
    body:has(.cookie-banner:not(.hidden)) .a11y-widget { bottom: max(180px, env(safe-area-inset-bottom) + 180px) !important; }

    /* Premium Hero Mobile Adjustments */
    .premium-hero { padding: 40px 0 80px; }
    .premium-hero .hero__title { font-size: clamp(2rem, 8vw, 2.5rem); margin-bottom: 16px; }
    .premium-hero .hero__subtitle { font-size: 1rem; margin-bottom: 24px; }
    
    .hero__micro-triggers { 
        flex-direction: row; 
        flex-wrap: wrap; 
        gap: 8px; 
        justify-content: center;
    }
    .hero__micro-triggers > span { 
        background: rgba(255, 255, 255, 0.6);
        backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
        padding: 6px 12px 6px 6px; 
        border-radius: 100px; 
        font-size: 0.8rem; 
        border: 1px solid rgba(255, 255, 255, 0.8);
        box-shadow: 0 4px 10px rgba(0,0,0,0.03);
    }
    body.high-contrast .hero__micro-triggers > span {
        background: rgba(30, 41, 59, 0.6); border-color: var(--c-border);
    }
    .trigger-icon { width: 22px; height: 22px; border-radius: 50%; }
    .trigger-icon svg { width: 12px; height: 12px; }
}

@media (min-width: 768px) {
    .form-container, .result-card, .processing-card { padding: 40px; }
    .form__row { grid-template-columns: 1fr 1fr; }
    .contact-grid { grid-template-columns: 1fr 1.5fr; align-items: stretch; }
    .contact-map { height: 100%; min-height: 400px; }
    .footer-premium__grid { grid-template-columns: repeat(2, 1fr); gap: 40px 20px; }
    .footer-premium__bottom { flex-direction: row; justify-content: space-between; text-align: left; align-items: center; }
    .status-text { margin-bottom: 4px; }
}

@media (min-width: 1024px) {
    .top-bar__left { display: flex; align-items: center; gap: 12px; }
    .top-bar__right { width: auto; }
    .security-text { display: inline; }
    .form-container { padding: 60px; }
    .article-slide__content .article-slide__desc { -webkit-line-clamp: 4; }
    .footer-premium__grid { grid-template-columns: 2.5fr 1fr 1.5fr 1.5fr; gap: 40px; }
    .faq__grid { grid-template-columns: repeat(2, 1fr); align-items: start; gap: 24px; max-width: 1200px; }
}

@media (max-width: 380px) {
    .premium-hero .hero__title { font-size: 1.8rem; }
    .hero__micro-triggers > span { font-size: 0.75rem; padding: 4px 10px 4px 4px; }
    .trigger-icon { width: 20px; height: 20px; }
}

/* HOVER EFFECTS */
@media (hover: hover) and (pointer: fine) {
    .btn--primary:hover:not(:disabled) { transform: translateY(-2px) scale(1.02); box-shadow: 0 15px 25px -10px var(--c-primary); }
    .btn--secondary:hover:not(:disabled) { background-color: var(--c-secondary-hover); transform: translateY(-2px); }
    .nav-link:hover { color: var(--c-primary); }
    .award-item:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: rgba(16, 185, 129, 0.3); }
    .award-item:hover .award-item__icon-wrapper { background: var(--c-primary); color: #fff; transform: scale(1.05) rotate(5deg); }
    .btn-cmd:hover { background: #1E293B; transform: translateY(-2px); box-shadow: 0 10px 20px -5px rgba(15,23,42,0.3); }
    .trust-brand:hover { filter: grayscale(0%) opacity(1); transform: translateY(-3px); }
    .req-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: rgba(16, 185, 129, 0.3); }
    .req-card:hover .req-card__icon { background: var(--c-primary); color: #fff; transform: scale(1.05) rotate(5deg); }
    .article-slide:hover .article-slide__readmore { color: #fff; }
    .article-slide:hover .article-slide__readmore span { transform: translateX(4px); }
    .footer-links a:hover { color: var(--c-primary); transform: translateX(4px); }
    .btn-livro-dark:hover { background: #EF4444; color: #fff; border-color: #EF4444; }
    .btn-livro-dark:hover .livro-icon { color: #fff; }
    .btn-client:hover { background: #fff; color: var(--c-text-main); transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--c-border); }
    .header__logo:hover { transform: scale(1.02); }
    .mobile-a11y__btn:hover { background: var(--c-secondary); }
    .faq__item:hover { border-color: rgba(16, 185, 129, 0.4); }
    .faq__question:hover { color: var(--c-primary); }
}

/* ==========================================
   AMBIENT 3D PARTICLES (EUROS)
   ========================================== */
.ambient-particles { 
    position: absolute; 
    inset: 0; 
    overflow: hidden; 
    pointer-events: none; 
    z-index: 1; 
}
.ambient-particle {
    position: absolute;
    color: var(--c-primary);
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 500;
    user-select: none;
    opacity: 0;
    will-change: transform;
}
/* ==========================================
   УЛЬТРА-КНОПКА (APPLE / STRIPE KINETICS)
   ========================================== */

.clx-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: #0F172A; /* Глубокий сланцевый цвет */
    border-radius: 100px;
    padding: 8px 8px 8px 32px;
    /* Стеклянная граница для объема */
    border: 1px solid rgba(255, 255, 255, 0.08); 
    cursor: pointer; 
    overflow: hidden;
    width: 100%;
    /* Сложная тень: внешнее мягкое свечение + внутренний блик сверху */
    box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.15);
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    z-index: 1;
}

/* Эффект пролетающего сканера (Свет) */
.clx-btn-bg { 
    position: absolute; 
    top: 0; left: -100%; 
    width: 50%; height: 100%; 
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent); 
    transform: skewX(-25deg); 
    z-index: 1; 
    pointer-events: none;
    transition: left 0.7s cubic-bezier(0.19, 1, 0.22, 1); 
}

/* Текст */
.clx-btn span { 
    position: relative; 
    color: #fff; 
    font-size: 1.15rem; 
    font-weight: 700; 
    letter-spacing: -0.3px;
    white-space: nowrap; 
    z-index: 2; 
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.3s ease; 
}

/* Круг с иконкой */
.clx-btn-icon {
    position: relative; 
    width: 52px; height: 52px; 
    background: linear-gradient(135deg, var(--c-primary), #047857); 
    border-radius: 50%; 
    display: flex; align-items: center; justify-content: center; 
    color: #fff; flex-shrink: 0; z-index: 2;
    box-shadow: 0 4px 12px rgba(16,185,129,0.4), inset 0 2px 4px rgba(255,255,255,0.3);
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Сама SVG-стрелка */
.clx-btn-icon svg { 
    width: 22px; height: 22px; 
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease; 
}

/* ==========================================
   МАГИЯ НАВЕДЕНИЯ (HOVER) И КЛИКА (ACTIVE)
   ========================================== */

/* 1. Кнопка приподнимается и светится зеленым */
.clx-btn:hover { 
    transform: translateY(-4px) scale(1.01); 
    box-shadow: 0 15px 35px -5px rgba(16, 185, 129, 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.15); 
    border-color: rgba(16, 185, 129, 0.3);
}

/* 2. Блик пролетает по кнопке */
.clx-btn:hover .clx-btn-bg { 
    left: 200%; 
}

/* 3. Текст тянется за кружком и меняет оттенок */
.clx-btn:hover span { 
    transform: translateX(6px); 
    color: #A7F3D0; /* Нежный мятный оттенок */
}

/* 4. Кружок увеличивается, светлеет и отклоняется назад */
.clx-btn:hover .clx-btn-icon { 
    transform: translateX(-4px) rotate(-15deg) scale(1.05); 
    background: linear-gradient(135deg, #34D399, #059669);
    box-shadow: 0 8px 20px rgba(16,185,129,0.6), inset 0 2px 4px rgba(255,255,255,0.4); 
}

/* 5. Стрелка выезжает вперед, компенсируя наклон круга (Параллакс) */
.clx-btn:hover .clx-btn-icon svg { 
    transform: translateX(4px) rotate(15deg); 
}

/* Вдавливание при клике/тапе */
.clx-btn:active { 
    transform: translateY(2px) scale(0.98); 
    box-shadow: 0 4px 10px -4px rgba(16, 185, 129, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.05); 
}
.clx-btn:active .clx-btn-icon { 
    transform: scale(0.95); 
}

/* ==========================================
   СОСТОЯНИЕ ЗАГРУЗКИ (is-loading)
   ========================================== */
.clx-spinner {
    position: absolute;
    width: 20px; height: 20px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.3s ease;
}

@keyframes clxSpin { 
    to { transform: rotate(360deg); } 
}

.clx-btn.is-loading {
    pointer-events: none;
    transform: scale(0.98);
}
.clx-btn.is-loading span {
    opacity: 0.5;
    transform: translateX(-10px);
}
.clx-btn.is-loading .clx-btn-icon {
    transform: scale(0.95);
}
.clx-btn.is-loading .clx-btn-icon svg {
    opacity: 0; /* Прячем стрелку */
    transform: scale(0.5);
}
.clx-btn.is-loading .clx-spinner {
    opacity: 1; /* Показываем спиннер */
    animation: clxSpin 0.8s linear infinite;
}

/* Адаптив для маленьких экранов (уже был, просто убедись, что он ниже) */
@media (max-width: 600px) {
    .clx-btn { padding: 6px 6px 6px 20px; border-radius: 18px; }
    .clx-btn span { font-size: 1.05rem; }
    .clx-btn-icon { width: 44px; height: 44px; }
}
@media (max-width: 380px) {
    .clx-btn span { display: none; }
    .clx-btn::before { content: 'Avançar'; color: #fff; font-weight: 700; font-size: 1rem; margin-right: 12px; position: relative; z-index: 2; transition: color 0.3s; }
    .clx-btn:hover::before { color: #A7F3D0; }
}
/* ==========================================
   PREMIUM TRANSITION OVERLAY (BANK STYLE)
   ========================================== */
.transition-overlay {
    position: fixed;
    inset: 0;
    z-index: 9950; /* Поверх всего, но под системными модалками */
    background: rgba(15, 23, 42, 0.85); /* Темно-синий фон */
    backdrop-filter: blur(24px); /* Глубокое размытие заднего фона */
    -webkit-backdrop-filter: blur(24px);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.6s cubic-bezier(0.25, 1, 0.5, 1), visibility 0.6s;
}

.transition-overlay.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
}

.transition-content {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Логотип по центру */
.transition-logo {
    position: relative;
    width: 88px;
    height: 88px;
    background: linear-gradient(135deg, var(--c-primary), #047857);
    border-radius: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    z-index: 2;
    box-shadow: 0 10px 30px rgba(16, 185, 129, 0.5), inset 0 2px 4px rgba(255, 255, 255, 0.4);
    animation: pulseLogo 2s infinite cubic-bezier(0.34, 1.56, 0.64, 1);
}
.transition-logo svg { width: 44px; height: 44px; }

@keyframes pulseLogo {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.08); box-shadow: 0 15px 40px rgba(16, 185, 129, 0.7), inset 0 2px 4px rgba(255, 255, 255, 0.4); }
}

/* Пульсирующие неоновые кольца */
.neon-rings {
    position: absolute;
    top: 44px; /* Ровно по центру логотипа (88/2) */
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
}

.ring {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 2px solid var(--c-primary);
    box-shadow: 0 0 15px var(--c-primary), inset 0 0 10px var(--c-primary);
    opacity: 0;
    animation: neonPulse 2.5s infinite cubic-bezier(0.21, 0.53, 0.56, 0.8);
}

.ring-1 { width: 88px; height: 88px; animation-delay: 0s; }
.ring-2 { width: 88px; height: 88px; animation-delay: 0.8s; }
.ring-3 { width: 88px; height: 88px; animation-delay: 1.6s; }

@keyframes neonPulse {
    0% { width: 88px; height: 88px; opacity: 1; border-width: 3px; }
    100% { width: 350px; height: 350px; opacity: 0; border-width: 0px; }
}

/* Текст резервации */
.transition-text {
    margin-top: 48px;
    font-size: 1.25rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.5px;
    z-index: 2;
    text-shadow: 0 2px 10px rgba(0,0,0,0.5);
    animation: fadeInOutText 2s infinite;
}

@keyframes fadeInOutText {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; text-shadow: 0 0 15px rgba(255,255,255,0.6); }
}
/* ==========================================
   CLIENT AREA MODAL (PREMIUM UI)
   ========================================== */
.modal__content--client { 
    max-width: 440px; 
    padding: 48px 32px 40px; 
    text-align: center; 
    overflow: hidden; /* Важно для слайд-анимации */
}

/* Система переключения экранов */
.client-state { 
    transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); 
}
.client-state.hidden { 
    opacity: 0; visibility: hidden; position: absolute; 
    top: 0; left: 0; right: 0; transform: translateX(30px); pointer-events: none; 
}
.client-state.active { 
    opacity: 1; visibility: visible; position: relative; 
    transform: translateX(0); pointer-events: auto; 
}
.client-state.fade-left { 
    opacity: 0; visibility: hidden; position: absolute; 
    top: 0; left: 0; right: 0; transform: translateX(-30px); pointer-events: none; 
}

/* Иконка-щит */
.client-icon-shield { 
    width: 64px; height: 64px; margin: 0 auto 24px;
    background: linear-gradient(135deg, var(--c-primary), #047857); color: #fff; 
    border-radius: 20px; display: flex; align-items: center; justify-content: center; 
    box-shadow: 0 10px 25px -5px rgba(16, 185, 129, 0.4), inset 0 2px 4px rgba(255,255,255,0.3); 
}
.client-icon-shield svg { width: 32px; height: 32px; }
.client-subtitle { color: var(--c-text-muted); font-size: 0.95rem; line-height: 1.6; margin-bottom: 32px; }

/* Кастомный Input для телефона */
.client-prefix { 
    position: absolute; left: 48px; top: 50%; transform: translateY(-50%); 
    font-weight: 700; color: var(--c-text-main); font-size: 1.05rem; 
    z-index: 2; pointer-events: none; 
    border-right: 1px solid var(--c-border); padding-right: 10px; 
}
.form__input--phone { padding-left: 110px !important; }
.form__label--phone { left: 110px !important; }

.client-secure-note { display: flex; justify-content: center; align-items: center; gap: 6px; font-size: 0.75rem; color: #94A3B8; margin-top: 16px; font-weight: 600; }
.client-secure-note svg { width: 14px; height: 14px; }

/* Дизайн окна "Нет долгов" */
.client-success-anim { margin: 0 auto 24px; display: flex; justify-content: center; }
.client-success-circle { 
    width: 72px; height: 72px; border-radius: 50%; 
    background: rgba(16, 185, 129, 0.1); border: 2px solid var(--c-primary); 
    color: var(--c-primary); display: flex; align-items: center; justify-content: center; 
    box-shadow: 0 0 30px rgba(16, 185, 129, 0.2); 
}
.client-success-circle svg { width: 36px; height: 36px; }

.client-msg-box { 
    background: var(--c-bg-main); border: 1px solid var(--c-border); 
    border-radius: 16px; padding: 20px; margin-bottom: 24px; text-align: left; 
}
.client-msg-box p { font-size: 0.95rem; color: var(--c-text-main); line-height: 1.5; margin-bottom: 12px; }
.client-msg-box p:last-child { margin-bottom: 0; }
.client-msg-box strong { color: var(--c-primary); }
.client-msg-box .small-note { font-size: 0.85rem; color: var(--c-text-muted); }

/* Кнопка Telegram */
.client-actions { display: flex; flex-direction: column; gap: 12px; }
.btn-telegram { 
    background: linear-gradient(135deg, #0088cc, #005580); color: #fff; 
    height: 56px; gap: 12px; border: none;
    box-shadow: 0 10px 20px -5px rgba(0, 136, 204, 0.4); 
}
.btn-telegram:hover { transform: translateY(-2px); box-shadow: 0 15px 25px -5px rgba(0, 136, 204, 0.5); border: none; color: #fff; }
/* ==========================================
   ISOLATED PREMIUM COMPONENTS (.cr-iso-*)
   PERFECT 100VH NO-SCROLL & HYPNOTIC BUTTON
   ========================================== */

/* 1. БАЗОВАЯ ЗАЩИТА (Невидимость) */
.cr-iso-hidden { display: none !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; z-index: -9999 !important; }

/* 2. OVERLAYS (Подложки) */
.cr-iso-overlay { position: fixed !important; inset: 0 !important; z-index: 100000 !important; display: flex !important; align-items: center !important; justify-content: center !important; }
.cr-iso-backdrop { position: absolute !important; inset: 0 !important; background: rgba(15,23,42,0.6) !important; backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important; }
.cr-iso-ob-bg { background: rgba(248, 250, 252, 0.95) !important; backdrop-filter: blur(20px) !important; -webkit-backdrop-filter: blur(20px) !important; }

/* ==========================================
   3. MODAL ÁREA DE CLIENTE (Остается как было)
   ========================================== */
.cr-iso-modal { background: #ffffff !important; border-radius: 24px !important; width: 90% !important; max-width: 420px !important; position: relative !important; z-index: 2 !important; padding: 40px 24px !important; text-align: center !important; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25) !important; max-height: 85vh !important; overflow-y: auto !important; box-sizing: border-box !important; }
.cr-iso-close { position: absolute !important; top: 16px !important; right: 16px !important; background: #f1f5f9 !important; border: none !important; width: 32px !important; height: 32px !important; border-radius: 50% !important; font-size: 20px !important; color: #64748b !important; cursor: pointer !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; }
.cr-iso-panel { width: 100% !important; display: none !important; }
.cr-iso-panel.cr-iso-active { display: block !important; animation: crIsoFadeIn 0.4s ease forwards !important; }
@keyframes crIsoFadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* Элементы модалки */
.cr-iso-icon-shield, .cr-iso-icon-success { width: 64px !important; height: 64px !important; margin: 0 auto 20px !important; border-radius: 20px !important; display: flex !important; align-items: center !important; justify-content: center !important; }
.cr-iso-icon-shield { background: linear-gradient(135deg, #10b981, #047857) !important; color: #fff !important; box-shadow: 0 10px 20px rgba(16,185,129,0.3) !important; }
.cr-iso-icon-success { background: rgba(16,185,129,0.1) !important; color: #10b981 !important; border: 2px solid #10b981 !important; border-radius: 50% !important; }
.cr-iso-icon-shield svg, .cr-iso-icon-success svg { width: 32px !important; height: 32px !important; }
.cr-iso-title { font-size: 22px !important; font-weight: 800 !important; color: #0f172a !important; margin: 0 0 8px !important; font-family: inherit !important; }
.cr-iso-subtitle { font-size: 14px !important; color: #64748b !important; margin: 0 0 24px !important; line-height: 1.5 !important; font-family: inherit !important; }

/* Форма */
.cr-iso-form-block { display: block !important; width: 100% !important; text-align: left !important; margin: 0 !important; padding: 0 !important; }
.cr-iso-input-wrap { position: relative !important; margin-bottom: 8px !important; width: 100% !important; }
.cr-iso-input-icon { position: absolute !important; left: 16px !important; top: 50% !important; transform: translateY(-50%) !important; color: #94a3b8 !important; }
.cr-iso-input-icon svg { width: 20px !important; height: 20px !important; }
.cr-iso-prefix { position: absolute !important; left: 44px !important; top: 50% !important; transform: translateY(-50%) !important; font-weight: 700 !important; color: #333 !important; border-right: 1px solid #e2e8f0 !important; padding-right: 8px !important; font-size: 16px !important; font-family: inherit !important; }
.cr-iso-input { width: 100% !important; height: 56px !important; background: #f8fafc !important; border: 1px solid #cbd5e1 !important; border-radius: 16px !important; padding: 0 16px 0 96px !important; font-size: 16px !important; font-weight: 600 !important; color: #0f172a !important; box-sizing: border-box !important; outline: none !important; font-family: inherit !important; margin: 0 !important; box-shadow: none !important; transition: border-color 0.3s !important; }
.cr-iso-input:focus { border-color: #10b981 !important; box-shadow: 0 0 0 3px rgba(16,185,129,0.1) !important; }
.cr-iso-error { display: block !important; color: #ef4444 !important; font-size: 13px !important; margin: 4px 0 16px 16px !important; font-weight: 600 !important; }
.cr-iso-secure-note { font-size: 12px !important; color: #94a3b8 !important; text-align: center !important; margin-top: 16px !important; display: flex !important; justify-content: center !important; align-items: center !important; gap: 6px !important; font-family: inherit !important; }
.cr-iso-secure-note svg { width: 14px !important; height: 14px !important; }
.cr-iso-msg-box { background: #f8fafc !important; border: 1px solid #e2e8f0 !important; border-radius: 16px !important; padding: 16px !important; text-align: left !important; margin-bottom: 24px !important; box-sizing: border-box !important; }
.cr-iso-msg-box p { font-size: 14px !important; color: #334155 !important; margin: 0 0 8px !important; line-height: 1.5 !important; font-family: inherit !important; }
.cr-iso-msg-box .cr-iso-msg-small { font-size: 13px !important; color: #64748b !important; margin: 0 !important; }

/* ==========================================
   4. ИДЕАЛЬНЫЙ ONBOARDING (100% ВЫСОТЫ, БЕЗ СКРОЛЛА)
   ========================================== */
.cr-iso-ob-grid-bg { position: absolute !important; inset: 0 !important; z-index: -2 !important; background-image: linear-gradient(to right, rgba(16,185,129,0.05) 1px, transparent 1px), linear-gradient(to bottom, rgba(16,185,129,0.05) 1px, transparent 1px) !important; background-size: 40px 40px !important; mask-image: radial-gradient(circle at center, black 30%, transparent 80%) !important; }
.cr-iso-splash { position: absolute !important; inset: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; z-index: 10 !important; }
.cr-iso-logo-box { width: 80px !important; height: 80px !important; border-radius: 24px !important; background: linear-gradient(135deg, #10b981, #047857) !important; color: #fff !important; display: flex !important; align-items: center !important; justify-content: center !important; box-shadow: 0 20px 40px rgba(16,185,129,0.4) !important; animation: crIsoPulse 2s infinite !important; }
.cr-iso-logo-box svg { width: 40px !important; height: 40px !important; }
@keyframes crIsoPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }

/* Контейнер: Строго 100dvh, Flex-структура, запрет скролла */
.cr-iso-ob-content { 
    width: 100% !important; max-width: 800px !important; position: relative !important; z-index: 2 !important; 
    height: 100dvh !important; max-height: 100dvh !important; overflow: hidden !important; /* УБИЛИ СКРОЛЛ */
    padding: max(20px, env(safe-area-inset-top)) 20px max(24px, env(safe-area-inset-bottom)) !important; 
    box-sizing: border-box !important; display: flex !important; flex-direction: column !important; 
    justify-content: space-between !important; align-items: center !important; 
}

.cr-iso-btn-skip { position: absolute !important; top: max(16px, env(safe-area-inset-top)) !important; right: 16px !important; background: rgba(255,255,255,0.8) !important; border: 1px solid #e2e8f0 !important; padding: 6px 14px !important; border-radius: 100px !important; font-weight: 700 !important; color: #64748b !important; cursor: pointer !important; z-index: 20 !important; font-family: inherit !important; font-size: 13px !important; }

/* Заголовок (Динамический размер) */
.cr-iso-ob-header { margin-bottom: 0 !important; width: 100% !important; flex-shrink: 0 !important; text-align: center !important; margin-top: 3vh !important; }
.cr-iso-ob-header h2 { font-size: clamp(20px, 6vw, 28px) !important; font-weight: 800 !important; color: #0f172a !important; margin: 0 0 6px !important; font-family: inherit !important; line-height: 1.1 !important; letter-spacing: -0.5px !important; }
.cr-iso-ob-header p { font-size: clamp(13px, 4vw, 15px) !important; color: #64748b !important; margin: 0 !important; font-family: inherit !important; line-height: 1.3 !important; }

/* Карточки (Сжимаются как пружина, чтобы влезть) */
.cr-iso-ob-cards { 
    display: flex !important; flex-direction: column !important; justify-content: center !important; 
    gap: clamp(8px, 2vh, 16px) !important; width: 100% !important; max-width: 500px !important; 
    flex-grow: 1 !important; margin: 0 auto !important; 
}
.cr-iso-card { background: #fff !important; border-radius: 20px !important; padding: clamp(12px, 2.5vh, 20px) !important; display: flex !important; flex-direction: row !important; align-items: center !important; text-align: left !important; box-shadow: 0 10px 25px rgba(0,0,0,0.04) !important; box-sizing: border-box !important; }
.cr-iso-card-art { width: clamp(44px, 12vw, 60px) !important; height: clamp(44px, 12vw, 60px) !important; flex-shrink: 0 !important; margin-right: 14px !important; }
.cr-iso-card-art svg { width: 100% !important; height: 100% !important; }
.cr-iso-card-text h3 { font-size: clamp(14px, 4vw, 16px) !important; font-weight: 800 !important; color: #0f172a !important; margin: 0 0 2px !important; font-family: inherit !important; line-height: 1.2 !important; }
.cr-iso-card-text p { font-size: clamp(12px, 3.5vw, 14px) !important; color: #64748b !important; margin: 0 !important; line-height: 1.3 !important; font-family: inherit !important; }

/* ==========================================
   5. ГИПНОТИЧЕСКАЯ КНОПКА (Всегда внизу экрана)
   ========================================== */
.cr-iso-ob-footer { width: 100% !important; max-width: 500px !important; margin: 0 auto !important; flex-shrink: 0 !important; }

.cr-iso-btn {
    display: flex !important; align-items: center !important; justify-content: center !important;
    width: 100% !important; box-sizing: border-box !important;
    height: 56px !important; min-height: 56px !important; max-height: 56px !important; flex: 0 0 56px !important; 
    margin: 0 0 12px 0 !important; padding: 0 20px !important;
    border-radius: 16px !important; border: none !important; cursor: pointer !important;
    font-family: inherit !important; font-size: 16px !important; font-weight: 700 !important;
    text-decoration: none !important; line-height: 1 !important; position: relative !important; overflow: hidden !important;
}
.cr-iso-btn:last-child { margin-bottom: 0 !important; }
.cr-iso-btn svg { width: 22px !important; height: 22px !important; margin-right: 8px !important; flex-shrink: 0 !important; display: block !important; }

/* АНИМАЦИЯ: "НАЖМИ МЕНЯ" */
.cr-iso-btn-large { 
    height: clamp(60px, 8vh, 68px) !important; 
    min-height: 60px !important; max-height: 68px !important; 
    border-radius: 20px !important; font-size: clamp(17px, 4.5vw, 20px) !important; 
    margin-bottom: 0 !important;
    
    /* Гипнотический неоновый пульс */
    animation: crIsoHypnotic 2.5s infinite cubic-bezier(0.4, 0, 0.2, 1) !important;
}

@keyframes crIsoHypnotic {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.6); }
    70% { transform: scale(1.03); box-shadow: 0 0 0 20px rgba(16, 185, 129, 0); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

.cr-iso-btn-green { background: linear-gradient(135deg, #10B981, #047857) !important; color: white !important; }
.cr-iso-btn-blue { background: linear-gradient(135deg, #0088cc, #005580) !important; color: white !important; box-shadow: 0 8px 20px -6px rgba(0, 136, 204, 0.6) !important; }
.cr-iso-btn-gray { background: #F1F5F9 !important; color: #475569 !important; border: 1px solid #CBD5E1 !important; box-shadow: none !important; }

/* Бегущий блик по кнопке */
.cr-iso-btn-shimmer { position: absolute !important; inset: 0 !important; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent) !important; transform: skewX(-20deg) translateX(-150%) !important; animation: crBtnShine 3s infinite !important; pointer-events: none !important; }
@keyframes crBtnShine { 0%, 70% { transform: skewX(-20deg) translateX(-150%); } 100% { transform: skewX(-20deg) translateX(150%); } }

/* Спиннер загрузки */
.cr-iso-spinner { width: 24px !important; height: 24px !important; border: 3px solid rgba(255,255,255,0.3) !important; border-top-color: #fff !important; border-radius: 50% !important; animation: crIsoSpin 1s linear infinite !important; display: block !important; }
@keyframes crIsoSpin { to { transform: rotate(360deg); } }

/* Анимации SVG */
.cr-iso-anim-graph { stroke-dasharray: 100; stroke-dashoffset: 100; animation: crIsoDraw 3s infinite alternate; }
@keyframes crIsoDraw { 0%, 20% { stroke-dashoffset: 100; } 80%, 100% { stroke-dashoffset: 0; } }
.cr-iso-anim-dot { animation: crIsoPulseDot 3s infinite alternate; transform-origin: 75px 25px; }
@keyframes crIsoPulseDot { 0%, 70% { transform: scale(0); opacity: 0; } 90%, 100% { transform: scale(1.2); opacity: 1; } }
.cr-iso-anim-scan { animation: crIsoScan 2.5s ease-in-out infinite alternate; }
@keyframes crIsoScan { 0% { transform: translateY(0); } 100% { transform: translateY(55px); } }
.cr-iso-anim-coin { animation: crIsoFloatCoin 3s ease-in-out infinite; transform-origin: center; }
@keyframes crIsoFloatCoin { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* Адаптив для ПК */
@media (min-width: 900px) {
    .cr-iso-ob-content { justify-content: center !important; }
    .cr-iso-ob-header { margin-top: 0 !important; margin-bottom: 40px !important; }
    .cr-iso-ob-header h2 { font-size: 36px !important; }
    .cr-iso-ob-cards { flex-direction: row !important; max-width: 1000px !important; gap: 20px !important; flex-grow: 0 !important; margin: 0 auto 40px !important; }
    .cr-iso-card { flex-direction: column !important; text-align: center !important; padding: 24px 20px !important; width: 100% !important; }
    .cr-iso-card-art { margin: 0 auto 20px !important; width: 80px !important; height: 80px !important; }
}

/* Темная тема */
body.high-contrast .cr-iso-modal { background: #1e293b !important; }
body.high-contrast .cr-iso-title { color: #fff !important; }
body.high-contrast .cr-iso-input { background: #0f172a !important; border-color: #334155 !important; color: #fff !important; }
body.high-contrast .cr-iso-btn-gray { background: #334155 !important; color: #fff !important; border-color: #475569 !important; }
body.high-contrast .cr-iso-msg-box { background: #0f172a !important; border-color: #334155 !important; }
body.high-contrast .cr-iso-msg-box p { color: #e2e8f0 !important; }
body.high-contrast .cr-iso-ob-bg { background: rgba(15,23,42,0.95) !important; }
body.high-contrast .cr-iso-card { background: #1e293b !important; border-color: #334155 !important; }
body.high-contrast .cr-iso-card-text h3 { color: #fff !important; }
/* ==========================================
   ТОЧЕЧНЫЙ ФИКС: Кнопка "Pular intro"
   ========================================== */

.cr-iso-btn-skip { 
    /* Убиваем абсолютное позиционирование */
    position: relative !important; 
    top: auto !important; 
    right: auto !important; 
    
    /* Ставим в правый верхний угол через Flexbox */
    align-self: flex-end !important; 
    
    /* Добавляем отступы, чтобы она толкала заголовок вниз */
    margin-top: 0 !important; 
    margin-bottom: 2vh !important; 
    flex-shrink: 0 !important;
    
    /* Внешний вид оставляем премиальным */
    background: rgba(255,255,255,0.8) !important; 
    border: 1px solid #e2e8f0 !important; 
    padding: 6px 14px !important; 
    border-radius: 100px !important; 
    font-weight: 700 !important; 
    color: #64748b !important; 
    cursor: pointer !important; 
    z-index: 20 !important; 
    font-family: inherit !important; 
    font-size: 13px !important; 
}

/* Чуть корректируем заголовок, так как кнопка теперь занимает место сверху */
.cr-iso-ob-header {
    margin-top: 0 !important; 
}

/* Ховер эффект для мышки */
.cr-iso-btn-skip:hover {
    background: #ffffff !important;
    color: #0f172a !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05) !important;
}

/* Поддержка темной темы для этой кнопки */
body.high-contrast .cr-iso-btn-skip {
    background: rgba(15,23,42,0.8) !important;
    border-color: #334155 !important;
    color: #e2e8f0 !important;
}
/* ==========================================
   PREMIUM TYPEWRITER PILL (ВЕКТОРНЫЙ НЕОН)
   ========================================== */
.cr-iso-tw-wrapper {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important; /* Всегда строго по центру */
    margin-bottom: 24px !important; /* Отступ до карточек */
}

.cr-iso-tw-pill {
    display: inline-flex !important; /* Облегает контент */
    align-items: center !important;
    background: rgba(16, 185, 129, 0.08) !important; 
    border: 1px solid rgba(16, 185, 129, 0.25) !important;
    border-radius: 100px !important; /* Форма идеальной капсулы */
    padding: 8px 20px 8px 14px !important; /* Слева чуть меньше из-за иконки */
    min-height: 42px !important; 
    box-sizing: border-box !important;
    box-shadow: 0 4px 15px -5px rgba(16, 185, 129, 0.15), inset 0 2px 10px rgba(255, 255, 255, 0.5) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
}

.cr-iso-tw-icon {
    width: 20px !important;
    height: 20px !important;
    color: #10B981 !important; 
    margin-right: 12px !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    filter: drop-shadow(0 0 4px rgba(16, 185, 129, 0.4)) !important; /* Неоновое свечение иконки */
}

.cr-iso-tw-icon svg {
    width: 100% !important;
    height: 100% !important;
}

.cr-iso-tw-text-wrap {
    display: flex !important;
    align-items: center !important;
    /* Убрали жесткий nowrap, чтобы на очень узких экранах текст мог дышать, 
       но обычно он помещается в 1 строку */
}

.cr-iso-tw-text {
    color: #047857 !important; 
    font-weight: 700 !important;
    font-size: clamp(13px, 3.5vw, 15px) !important; 
    letter-spacing: -0.2px !important;
    font-family: inherit !important;
}

.cr-iso-tw-cursor {
    color: #10B981 !important;
    font-weight: 800 !important;
    font-size: 16px !important;
    margin-left: 2px !important;
    animation: crIsoCursorBlink 0.9s infinite cubic-bezier(0.4, 0, 0.2, 1) !important;
}

@keyframes crIsoCursorBlink { 
    0%, 100% { opacity: 1; transform: scaleY(1); } 
    50% { opacity: 0; transform: scaleY(0.8); } 
}

/* Адаптив для темной темы */
body.high-contrast .cr-iso-tw-pill { 
    background: rgba(16, 185, 129, 0.15) !important; 
    border-color: rgba(16, 185, 129, 0.3) !important;
    box-shadow: 0 4px 15px -5px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.1) !important;
}
body.high-contrast .cr-iso-tw-text { color: #34d399 !important; }
body.high-contrast .cr-iso-tw-icon { filter: drop-shadow(0 0 6px rgba(52, 211, 153, 0.6)) !important; }