/* ================================================ */
/* FINEXA DARK THEME — TicarX                      */
/* ================================================ */

/* ================================================ */
/* ANIMATION SYSTEM                                */
/* ================================================ */

/* Scroll reveal — base states */
.fx-reveal { opacity: 0; will-change: transform, opacity; transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); }
.fx-reveal--up { transform: translateY(40px); }
.fx-reveal--left { transform: translateX(-40px); }
.fx-reveal--right { transform: translateX(40px); }
.fx-reveal--scale { transform: scale(0.92); }
.fx-reveal--fade { /* just opacity */ }

/* Visible state */
.fx-reveal.fx-visible { opacity: 1; transform: translateY(0) translateX(0) scale(1); }

/* Phone float */
@keyframes fxFloatPhone { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
.fx-float { animation: fxFloatPhone 4s ease-in-out infinite; }

/* Scroll progress bar */
.fx-scroll-progress { position: fixed; top: 0; left: 0; height: 3px; background: linear-gradient(90deg, #15284b, #0f203e); z-index: 9999; width: 0; transition: width 0.05s linear; pointer-events: none; }

/* Glow cursor on cards */
.fx-feature::before,
.fx-price-card::before,
.fx-success-card::before,
.fx-kargo-card::before,
.fx-integ-item::before,
.fx-prem-metric-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    border-radius: inherit;
    background: radial-gradient(400px circle at var(--glow-x, 50%) var(--glow-y, 50%), rgba(21,40,75,0.06), transparent 60%);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s;
    z-index: 0;
}
.fx-feature:hover::before,
.fx-price-card:hover::before,
.fx-success-card:hover::before,
.fx-kargo-card:hover::before,
.fx-integ-item:hover::before,
.fx-prem-metric-card:hover::before { opacity: 1; }

/* Ensure cards have relative position for glow */
.fx-feature, .fx-price-card, .fx-success-card, .fx-kargo-card, .fx-integ-item, .fx-prem-metric-card { position: relative; overflow: hidden; }

/* Topbar slide-down */
@keyframes fxSlideDown { from { transform: translateY(-100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.topbar { animation: fxSlideDown 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both; }

/* Hero badge pulse */
@keyframes fxPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(21,40,75,0.3); } 50% { box-shadow: 0 0 0 12px rgba(21,40,75,0); } }
.fx-hero__badge { animation: fxPulse 3s ease-in-out infinite; }

/* Smooth hover lift for all interactive cards */
.fx-feature, .fx-price-card, .fx-success-card, .fx-step-card, .fx-marketing-card,
.fx-blog-card, .fx-prem-migration-card, .fx-prem-growth-card { transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), background 0.3s, border-color 0.3s, box-shadow 0.3s; }

/* ================================================ */

.body--dark { background: #0a0a0a !important; color: #e5e5e5; }
.body--dark .header { background: transparent; }
.body--dark .header.scrolled { background: rgba(10,10,10,0.92); backdrop-filter: blur(16px); }
.body--dark .footer { background: #050505; }

.fx-block { padding: 80px 0; }
.fx-block--sm { padding: 48px 0; }
.fx-block--accent-bg { background: rgba(21,40,75,0.03); border-top: 1px solid rgba(21,40,75,0.08); border-bottom: 1px solid rgba(21,40,75,0.08); }
.fx-tag { display: inline-block; font-size: 13px; font-weight: 500; color: rgba(255,255,255,0.6); margin-bottom: 14px; }
.fx-h2 { font-family: 'Manrope', system-ui, -apple-system, sans-serif; font-size: 42px; font-weight: 300; line-height: 1.12; letter-spacing: -0.03em; color: #fff; margin-bottom: 16px; }
.fx-h2 em { font-family: 'Instrument Serif', Georgia, serif; font-style: italic; font-weight: 400; color: #15284b; letter-spacing: 0; }
.fx-desc-sm { font-size: 15px; color: rgba(255,255,255,0.55); line-height: 1.7; margin-bottom: 20px; }
.fx-subtext { font-size: 15px; color: rgba(255,255,255,0.55); line-height: 1.7; }
.fx-center-head { text-align: center; max-width: 560px; margin: 0 auto 52px; }

/* Buttons */
.fx-btn { display: inline-flex; align-items: center; gap: 8px; padding: 14px 30px; border-radius: 100px; font-size: 15px; font-weight: 600; border: none; cursor: pointer; transition: all 0.3s; font-family: inherit; text-decoration: none; }
.fx-btn--accent { background: #15284b; color: #fff; }
.fx-btn--accent:hover { background: #0f203e; transform: translateY(-2px); box-shadow: 0 4px 24px rgba(21,40,75,0.25); }
.fx-btn--glass { background: rgba(255,255,255,0.08); color: #fff; border: 1px solid rgba(255,255,255,0.15); }
.fx-btn--glass:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.25); }
.fx-btn--lg { padding: 18px 38px; font-size: 16px; }

/* ================================================ */
/* HERO                                             */
/* ================================================ */
.fx-hero { position: relative; overflow: hidden; padding: 180px 0 80px; }
.fx-hero__bg { position: absolute; inset: 0; z-index: 0; }
.fx-hero__bg video { width: 100%; height: 100%; object-fit: cover; }
.fx-hero__bg-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,10,10,0.5) 0%, rgba(10,10,10,0.7) 40%, rgba(10,10,10,0.95) 75%, #0a0a0a 100%); }
.fx-hero .container { position: relative; z-index: 2; }
.fx-hero__center { text-align: center; max-width: 700px; margin: 0 auto; }
.fx-hero__badge { display: inline-block; background: rgba(21,40,75,0.1); border: 1px solid rgba(21,40,75,0.2); color: #15284b; font-size: 13px; font-weight: 600; padding: 8px 20px; border-radius: 100px; margin-bottom: 24px; }
.fx-hero__title { font-family: 'Manrope', system-ui, -apple-system, sans-serif; font-size: 64px; font-weight: 400; line-height: 1.08; letter-spacing: -0.03em; color: #fff; margin-bottom: 20px; }
.fx-hero__title em { font-family: 'Instrument Serif', Georgia, serif; font-style: italic; font-weight: 400; color: #15284b; letter-spacing: 0; }
.fx-hero__sub { font-size: 16px; color: rgba(255,255,255,0.55); line-height: 1.7; margin-bottom: 32px; max-width: 520px; margin-left: auto; margin-right: auto; }
.fx-hero__btns { display: flex; gap: 12px; justify-content: center; }
.fx-hero__phone-wrap { display: flex; justify-content: center; margin-top: 48px; position: relative; }

/* Animations */
.fx-hero__center { animation: fxUp 1s cubic-bezier(0.16,1,0.3,1) 0.1s both; }
.fx-hero__phone-wrap { animation: fxUp 1.2s cubic-bezier(0.16,1,0.3,1) 0.4s both; }
@keyframes fxUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }

/* iPhone mockup */
.fx-iphone { width: 280px; background: #1c1c1e; border-radius: 40px; padding: 10px; box-shadow: 0 30px 80px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.08), inset 0 1px 0 rgba(255,255,255,0.05); position: relative; }
.fx-iphone--sm { width: 240px; border-radius: 34px; padding: 8px; }
.fx-iphone__inner { background: #000; border-radius: 32px; overflow: hidden; padding: 0 0 16px; }
.fx-iphone--sm .fx-iphone__inner { border-radius: 28px; }
.fx-iphone__status { display: flex; align-items: center; justify-content: space-between; padding: 10px 20px 8px; font-size: 12px; font-weight: 600; color: #fff; }
.fx-iphone__dynamic-island { width: 90px; height: 24px; background: #000; border-radius: 20px; border: 2px solid #1c1c1e; }
.fx-iphone--sm .fx-iphone__dynamic-island { width: 70px; height: 20px; }
.fx-iphone__status-icons { display: flex; gap: 4px; align-items: center; }
.fx-iphone__app { padding: 0 16px; }
.fx-iphone__app-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.fx-iphone__user { display: flex; align-items: center; gap: 10px; }
.fx-iphone__user-avatar { width: 36px; height: 36px; background: linear-gradient(135deg, #15284b, #0f203e); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 800; color: #fff; }
.fx-iphone__user small { display: block; font-size: 10px; color: rgba(255,255,255,0.4); }
.fx-iphone__user strong { display: block; font-size: 13px; color: #fff; }
.fx-iphone__search-icon { width: 32px; height: 32px; background: rgba(255,255,255,0.08); border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.fx-iphone__balance { margin-bottom: 18px; }
.fx-iphone__bal-label { display: block; font-size: 11px; color: rgba(255,255,255,0.4); margin-bottom: 2px; }
.fx-iphone__bal-amount { display: block; font-size: 28px; font-weight: 800; color: #fff; letter-spacing: -0.02em; margin-bottom: 2px; }
.fx-iphone__bal-change { font-size: 11px; color: #15284b; }
.fx-iphone__bal-change small { color: rgba(255,255,255,0.35); }
.fx-iphone__actions { display: flex; gap: 20px; margin-bottom: 18px; }
.fx-iphone__action { text-align: center; }
.fx-iphone__action-btn { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 4px; }
.fx-iphone__action span { font-size: 10px; color: rgba(255,255,255,0.5); }
.fx-iphone__section-label { font-size: 11px; color: rgba(255,255,255,0.3); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 10px; }

/* iPhone transactions */
.fx-iphone__tx { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,0.06); }
.fx-iphone__tx:last-child { border-bottom: none; }
.fx-iphone__tx-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.fx-iphone__tx-info { flex: 1; }
.fx-iphone__tx-info strong { display: block; font-size: 12px; color: #fff; }
.fx-iphone__tx-info span { font-size: 10px; color: rgba(255,255,255,0.35); }
.fx-iphone__tx-amount { font-size: 13px; font-weight: 700; }

/* iPhone products (mobile app section) */
.fx-iphone__product { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,0.06); }
.fx-iphone__product-img { width: 40px; height: 40px; border-radius: 8px; background: #1a1a2a; flex-shrink: 0; }
.fx-iphone__product-info { flex: 1; }
.fx-iphone__product-info strong { display: block; font-size: 11px; color: #fff; }
.fx-iphone__product-info span { font-size: 10px; color: rgba(255,255,255,0.4); }
.fx-iphone__cart-btn { background: #15284b; color: #fff; font-size: 11px; font-weight: 700; text-align: center; padding: 10px; border-radius: 10px; margin-top: 10px; }

/* ================================================ */
/* BRAND LOGOS                                      */
/* ================================================ */
.fx-logos-label { font-size: 13px; color: rgba(255,255,255,0.35); text-align: center; margin-bottom: 24px; text-transform: uppercase; letter-spacing: 0.1em; }

/* Client logos grid */
.fx-clients-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; max-width: 1100px; margin: 0 auto; }
.fx-client-logo { display: flex; align-items: center; justify-content: center; height: 100px; padding: 18px 22px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 16px; transition: all 0.3s; text-decoration: none; }
.fx-client-logo:hover { background: rgba(255,255,255,0.08); border-color: rgba(21,40,75,0.25); transform: translateY(-3px); }
.fx-client-logo img { max-width: 100%; max-height: 50px; width: auto; height: auto; object-fit: contain; filter: brightness(0) invert(1); opacity: 0.7; transition: opacity 0.3s; }
.fx-client-logo:hover img { opacity: 1; }
.fx-client-logo--natural { background: rgba(255,255,255,0.95); }
.fx-client-logo--natural:hover { background: #fff; }
.fx-client-logo--natural img { filter: none; opacity: 1; }
@media (max-width: 1024px) { .fx-clients-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .fx-clients-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } .fx-client-logo { height: 80px; padding: 14px; } .fx-client-logo img { max-height: 38px; } }
.fx-logos { display: flex; justify-content: center; align-items: center; gap: 48px; flex-wrap: wrap; }
.fx-logo-item { font-size: 18px; font-weight: 700; color: rgba(255,255,255,0.2); letter-spacing: 0.02em; transition: color 0.3s; }
.fx-logo-item:hover { color: rgba(255,255,255,0.5); }

/* ================================================ */
/* STATS BAR                                        */
/* ================================================ */
.fx-stats-bar { border-top: 1px solid rgba(255,255,255,0.06); border-bottom: 1px solid rgba(255,255,255,0.06); }
.fx-stats-row { display: flex; justify-content: space-between; align-items: center; }
.fx-stat-item { text-align: center; flex: 1; }
.fx-stat-item__num { display: block; font-size: 32px; font-weight: 800; color: #fff; letter-spacing: -0.02em; }
.fx-stat-item__label { display: block; font-size: 12px; color: rgba(255,255,255,0.4); margin-top: 4px; }

/* ================================================ */
/* CTA MINI                                         */
/* ================================================ */
.fx-cta-mini { display: flex; align-items: center; justify-content: space-between; background: rgba(21,40,75,0.06); border: 1px solid rgba(21,40,75,0.15); border-radius: 20px; padding: 32px 40px; }
.fx-cta-mini__title { font-family: 'Manrope', system-ui, -apple-system, sans-serif; font-size: 32px; color: #fff; margin: 4px 0 0; }
.fx-cta-mini__right { display: flex; gap: 12px; }

/* ================================================ */
/* FEATURES GRID                                    */
/* ================================================ */
.fx-features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.fx-feature { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07); border-radius: 18px; padding: 32px 28px; transition: all 0.3s; }
.fx-feature:hover { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.12); transform: translateY(-4px); }
.fx-feature__icon { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 18px; }
.fx-feature__title { font-size: 17px; font-weight: 700; color: #fff; margin-bottom: 8px; }
.fx-feature__desc { font-size: 14px; color: rgba(255,255,255,0.5); line-height: 1.6; }

/* ================================================ */
/* SPLIT ROW                                        */
/* ================================================ */
.fx-split-row { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.fx-check-list { display: flex; flex-direction: column; gap: 18px; margin-bottom: 28px; }
.fx-check-item { display: flex; gap: 14px; align-items: flex-start; }
.fx-check-item__dot { width: 8px; height: 8px; background: #15284b; border-radius: 50%; margin-top: 7px; flex-shrink: 0; }
.fx-check-item strong { display: block; font-size: 15px; color: #fff; margin-bottom: 4px; }
.fx-check-item p { font-size: 13px; color: rgba(255,255,255,0.45); line-height: 1.5; margin: 0; }

/* Dashboard card */
.fx-dash-card { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 20px; padding: 28px; }
.fx-dash-card__header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; font-size: 13px; color: rgba(255,255,255,0.5); }
.fx-dash-card__balance { margin-bottom: 20px; }
.fx-dash-card__bl { display: block; font-size: 12px; color: rgba(255,255,255,0.4); margin-bottom: 2px; }
.fx-dash-card__bv { font-size: 34px; font-weight: 800; color: #fff; letter-spacing: -0.02em; }
.fx-dash-card__chart { height: 80px; margin-bottom: 16px; }
.fx-dash-card__chart svg { width: 100%; height: 100%; }
.fx-dash-card__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.fx-dash-card__mini { background: rgba(255,255,255,0.04); border-radius: 10px; padding: 12px; text-align: center; }
.fx-dash-card__mini span { display: block; font-size: 11px; color: rgba(255,255,255,0.4); margin-bottom: 2px; }
.fx-dash-card__mini strong { font-size: 16px; color: #fff; }

/* ================================================ */
/* KARGO                                            */
/* ================================================ */
.fx-kargo-price { margin-bottom: 20px; }
.fx-kargo-price__val { font-size: 56px; font-weight: 800; color: #15284b; letter-spacing: -0.03em; }
.fx-kargo-price__label { display: block; font-size: 14px; color: rgba(255,255,255,0.45); margin-top: 4px; }
.fx-kargo-features { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 24px; }
.fx-kargo-features span { font-size: 13px; color: rgba(255,255,255,0.6); background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); padding: 8px 16px; border-radius: 8px; }
.fx-kargo-visual { display: flex; flex-direction: column; gap: 10px; }
.fx-kargo-card { display: flex; align-items: center; gap: 14px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; padding: 18px 20px; transition: all 0.3s; }
.fx-kargo-card:hover { background: rgba(255,255,255,0.06); transform: translateX(4px); }
.fx-kargo-card--highlight { border-color: rgba(21,40,75,0.3); background: rgba(21,40,75,0.05); }
.fx-kargo-card__icon { font-size: 24px; flex-shrink: 0; }
.fx-kargo-card strong { font-size: 14px; color: #fff; display: block; }
.fx-kargo-card p { font-size: 12px; color: rgba(255,255,255,0.4); margin: 2px 0 0; }
.fx-kargo-card__price { margin-left: auto; font-size: 17px; font-weight: 700; color: #fff; }

/* ================================================ */
/* PAYMENT                                          */
/* ================================================ */
.fx-payment-card { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 20px; padding: 32px; }
.fx-payment-card__header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.fx-payment-card__amount { font-size: 38px; font-weight: 800; color: #fff; letter-spacing: -0.02em; }
.fx-payment-card__sub { font-size: 13px; color: rgba(255,255,255,0.4); margin-top: 4px; margin-bottom: 20px; }
.fx-payment-card__methods { display: flex; flex-wrap: wrap; gap: 8px; }
.fx-pay-badge { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 8px; font-size: 13px; color: rgba(255,255,255,0.6); }

/* ================================================ */
/* MARKETING                                        */
/* ================================================ */
.fx-marketing-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 18px; }
.fx-marketing-card { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07); border-radius: 18px; padding: 28px; transition: all 0.3s; }
.fx-marketing-card:hover { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.12); transform: translateY(-4px); }
.fx-marketing-card--big { grid-column: 1 / -1; display: grid; grid-template-columns: 1.3fr 1fr; gap: 32px; align-items: center; }
.fx-marketing-card__content { display: flex; flex-direction: column; gap: 8px; }
.fx-marketing-card--big .fx-marketing-card__icon { width: 44px; height: 44px; background: rgba(21,40,75,0.1); color: #15284b; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 4px; font-size: 22px; }
.fx-marketing-card--big .fx-marketing-card__title { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; margin: 0; }
.fx-marketing-card--big .fx-marketing-card__desc { font-size: 15px; line-height: 1.6; margin: 0 0 8px; }
.fx-marketing-card__features { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-direction: column; gap: 8px; }
.fx-marketing-card__features li { display: flex; align-items: center; gap: 8px; font-size: 13px; color: rgba(255,255,255,0.65); }
.fx-marketing-card__features li .lucide-icon { width: 14px; height: 14px; color: #22c55e; flex-shrink: 0; }
.fx-marketing-card__icon { font-size: 28px; margin-bottom: 14px; }
.fx-marketing-card__title { font-size: 17px; font-weight: 700; color: #fff; margin-bottom: 8px; }
.fx-marketing-card__desc { font-size: 14px; color: rgba(255,255,255,0.5); line-height: 1.6; }
.fx-marketing-mockup { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; padding: 20px; }
.fx-marketing-mockup__header { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: rgba(255,255,255,0.6); margin-bottom: 16px; }
.fx-marketing-mockup__status { color: #22c55e; font-size: 12px; }
.fx-marketing-mockup__stats { display: flex; gap: 24px; margin-bottom: 14px; }
.fx-marketing-mockup__stats div { text-align: center; }
.fx-marketing-mockup__stats strong { display: block; font-size: 20px; font-weight: 800; color: #fff; }
.fx-marketing-mockup__stats span { font-size: 11px; color: rgba(255,255,255,0.4); }
.fx-marketing-mockup__bar { height: 6px; background: rgba(255,255,255,0.06); border-radius: 3px; overflow: hidden; }
.fx-marketing-mockup__bar div { height: 100%; border-radius: 3px; }

/* ================================================ */
/* INTEGRATIONS                                     */
/* ================================================ */
.fx-integrations { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.fx-integ-item { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07); border-radius: 14px; padding: 24px 16px; text-align: center; transition: all 0.3s; }
.fx-integ-item:hover { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.15); transform: translateY(-3px); }
.fx-integ-item__icon { font-size: 28px; margin-bottom: 8px; }
.fx-integ-item span { font-size: 13px; color: rgba(255,255,255,0.6); font-weight: 500; }

/* ================================================ */
/* APP STATS / BADGES                               */
/* ================================================ */
.fx-app-stats { display: flex; gap: 32px; margin-bottom: 24px; }
.fx-app-stat strong { display: block; font-size: 28px; font-weight: 800; color: #15284b; }
.fx-app-stat span { font-size: 13px; color: rgba(255,255,255,0.45); }
.fx-app-badges { display: flex; gap: 12px; }
.fx-app-badge { display: inline-flex; align-items: center; gap: 12px; padding: 12px 22px; background: #000; border: 1px solid rgba(255,255,255,0.15); border-radius: 12px; color: #fff; transition: all 0.3s; text-decoration: none; min-width: 170px; }
.fx-app-badge:hover { background: #1a1a1a; border-color: rgba(255,255,255,0.3); transform: translateY(-2px); }
.fx-app-badge svg { flex-shrink: 0; }
.fx-app-badge div { display: flex; flex-direction: column; line-height: 1.1; text-align: left; }
.fx-app-badge small { font-size: 10px; color: rgba(255,255,255,0.7); margin-bottom: 2px; }
.fx-app-badge strong { font-size: 16px; font-weight: 600; color: #fff; }

/* Pay badge with brand SVG */
.fx-pay-badge--brand { background: #fff !important; padding: 8px 14px !important; min-height: 36px; display: inline-flex; align-items: center; gap: 4px; }
.fx-pay-badge--brand span { color: #000 !important; }

/* Pay logos brand cards */
.fx-pay-logos--brand { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; align-items: center; }
.fx-pay-logo-card { display: inline-flex; align-items: center; justify-content: center; gap: 4px; background: #fff; border-radius: 10px; padding: 12px 18px; min-width: 90px; min-height: 50px; transition: all 0.3s; }
.fx-pay-logo-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(255,255,255,0.1); }
.fx-pay-logo-card span { font-size: 14px; font-weight: 600; color: #000; }
.fx-pay-logo-card img { object-fit: contain; }

/* ================================================ */
/* SUCCESS STORIES                                  */
/* ================================================ */
.fx-success-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.fx-success-card { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 20px; padding: 28px; transition: all 0.3s; }
.fx-success-card:hover { background: rgba(255,255,255,0.06); transform: translateY(-4px); }
.fx-success-card__top { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.fx-success-card__avatar { width: 44px; height: 44px; border-radius: 50%; background: #4a76fd; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 700; color: #fff; flex-shrink: 0; }
.fx-success-card__top strong { display: block; font-size: 15px; color: #fff; }
.fx-success-card__top span { font-size: 12px; color: rgba(255,255,255,0.4); }
.fx-success-card__quote { font-size: 14px; color: rgba(255,255,255,0.6); line-height: 1.7; font-style: italic; margin-bottom: 20px; }
.fx-success-card__stats { display: flex; gap: 20px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,0.06); }
.fx-success-card__stats div { text-align: center; flex: 1; }
.fx-success-card__stats strong { display: block; font-size: 18px; font-weight: 800; color: #15284b; }
.fx-success-card__stats span { font-size: 11px; color: rgba(255,255,255,0.4); }

/* ================================================ */
/* PRICING PREVIEW                                  */
/* ================================================ */
.fx-pricing-preview { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; align-items: stretch; }
.fx-pricing-preview .fx-price-card { opacity: 1 !important; transform: none !important; min-height: 460px; display: flex; flex-direction: column; overflow: visible !important; }
.fx-pricing-preview .fx-price-card__list { flex: 1; }
.fx-pricing-preview .fx-price-card::before { overflow: hidden; border-radius: inherit; }
.fx-pricing-preview .fx-price-card { padding: 28px 22px; }
.fx-pricing-preview .fx-price-card h4 { font-size: 16px; }
.fx-pricing-preview .fx-price-card__amount { font-size: 30px; }
.fx-pricing-preview .fx-price-card__amount span { font-size: 13px !important; display: block; margin-top: 2px; }
.fx-pricing-preview .fx-price-card__list li { font-size: 13px; padding: 5px 0; }
@media (max-width: 1280px) {
    .fx-pricing-preview { grid-template-columns: repeat(3, 1fr); }
}
.fx-price-card { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07); border-radius: 20px; padding: 32px; position: relative; transition: all 0.3s; }
.fx-price-card:hover { background: rgba(255,255,255,0.05); transform: translateY(-4px); }
.fx-price-card--popular { border-color: rgba(21,40,75,0.3); background: rgba(21,40,75,0.04); }
.fx-price-card__badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: #15284b; color: #fff; font-size: 12px; font-weight: 700; padding: 4px 16px; border-radius: 20px; white-space: nowrap; }
.fx-price-card h4 { font-size: 18px; color: #fff; font-weight: 700; margin-bottom: 8px; }
.fx-price-card__amount { font-size: 40px; font-weight: 800; color: #fff; letter-spacing: -0.03em; margin-bottom: 4px; }
.fx-price-card__period { font-size: 13px; color: rgba(255,255,255,0.4); display: block; margin-bottom: 24px; }
.fx-price-card__list { list-style: none; padding: 0; margin: 0 0 24px; }
.fx-price-card__list li { font-size: 14px; color: rgba(255,255,255,0.6); padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,0.04); }
.fx-price-card__list li:last-child { border-bottom: none; }

/* ================================================ */
/* PAYMENT LOGOS                                    */
/* ================================================ */
.fx-pay-logos { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; }
.fx-pay-logo { display: inline-flex; align-items: center; gap: 6px; padding: 12px 24px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07); border-radius: 10px; font-size: 14px; color: rgba(255,255,255,0.5); font-weight: 500; }

/* ================================================ */
/* STEPS                                            */
/* ================================================ */
.fx-steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.fx-step-card { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07); border-radius: 20px; padding: 32px; transition: all 0.3s; text-align: center; }
.fx-step-card:hover { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.12); transform: translateY(-4px); }
.fx-step-card__number { font-size: 48px; font-weight: 800; color: rgba(21,40,75,0.2); margin-bottom: 12px; font-family: 'Manrope', system-ui, -apple-system, sans-serif; }
.fx-step-card__title { font-size: 18px; font-weight: 700; color: #fff; margin-bottom: 10px; padding: 0; }
.fx-step-card__desc { font-size: 14px; color: rgba(255,255,255,0.5); line-height: 1.6; padding: 0; }

/* ================================================ */
/* FAQ — 2 column                                   */
/* ================================================ */
.fx-faq-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.fx-faq-col { display: flex; flex-direction: column; gap: 8px; }
.fx-faq-item { border: 1px solid rgba(255,255,255,0.07); border-radius: 14px; background: rgba(255,255,255,0.03); transition: all 0.3s; overflow: hidden; }
.fx-faq-item:hover { border-color: rgba(255,255,255,0.12); }
.fx-faq-item.active { border-color: rgba(21,40,75,0.25); background: rgba(21,40,75,0.03); }
.fx-faq-item__q { display: flex; align-items: center; gap: 12px; padding: 18px 22px; cursor: pointer; font-size: 15px; font-weight: 600; color: #fff; background: none; border: none; width: 100%; text-align: left; font-family: inherit; }
.fx-faq-item__num { font-size: 13px; font-weight: 700; color: #15284b; min-width: 22px; }
.fx-faq-item__icon { margin-left: auto; color: rgba(255,255,255,0.3); font-size: 18px; transition: transform 0.3s; flex-shrink: 0; }
.fx-faq-item.active .fx-faq-item__icon { transform: rotate(45deg); color: #15284b; }
.fx-faq-item__a { max-height: 0; overflow: hidden; transition: max-height 0.4s ease; }
.fx-faq-item.active .fx-faq-item__a { max-height: 200px; }
.fx-faq-item__a-inner { padding: 0 22px 18px 56px; font-size: 14px; color: rgba(255,255,255,0.5); line-height: 1.7; }

/* ================================================ */
/* CTA BOX                                          */
/* ================================================ */
.fx-cta-box { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07); border-radius: 24px; padding: 80px 48px; text-align: center; position: relative; overflow: hidden; }
.fx-cta-box::before { content: ''; position: absolute; width: 500px; height: 500px; background: radial-gradient(circle, rgba(21,40,75,0.06) 0%, transparent 60%); top: 50%; left: 50%; transform: translate(-50%,-50%); pointer-events: none; }
.fx-cta-box__badge { display: inline-block; background: rgba(21,40,75,0.1); border: 1px solid rgba(21,40,75,0.2); color: #15284b; font-size: 13px; font-weight: 600; padding: 8px 20px; border-radius: 100px; margin-bottom: 20px; position: relative; z-index: 1; }
.fx-cta-box__title { font-family: 'Manrope', system-ui, -apple-system, sans-serif; font-size: 46px; font-weight: 400; color: #fff; margin-bottom: 14px; letter-spacing: -0.03em; position: relative; z-index: 1; }
.fx-cta-box__sub { font-size: 16px; color: rgba(255,255,255,0.45); margin-bottom: 32px; position: relative; z-index: 1; max-width: 500px; margin-left: auto; margin-right: auto; }
.fx-cta-box__btns { display: flex; justify-content: center; gap: 12px; position: relative; z-index: 1; margin-bottom: 20px; }
.fx-cta-box__trust { font-size: 13px; color: rgba(255,255,255,0.35); position: relative; z-index: 1; }

/* ================================================ */
/* BIG BRAND                                        */
/* ================================================ */
.fx-bigbrand { padding: 40px 0 20px; overflow: hidden; }
.fx-bigbrand__text { font-family: 'Manrope', system-ui, -apple-system, sans-serif; font-size: clamp(80px, 18vw, 280px); font-weight: 800; color: rgba(255,255,255,0.03); text-align: center; letter-spacing: -0.04em; line-height: 1; user-select: none; }

/* ================================================ */
/* RESPONSIVE                                       */
/* ================================================ */
@media (max-width: 1024px) {
    .fx-hero__title { font-size: 48px; }
    .fx-split-row { grid-template-columns: 1fr; gap: 40px; }
    .fx-features-grid { grid-template-columns: repeat(2, 1fr); }
    .fx-marketing-grid { grid-template-columns: 1fr 1fr; }
    .fx-marketing-card--big { grid-column: 1 / -1; }
    .fx-success-grid { grid-template-columns: 1fr; }
    .fx-pricing-preview { grid-template-columns: 1fr; max-width: 400px; margin: 0 auto; }
    .fx-integrations { grid-template-columns: repeat(4, 1fr); }
    .fx-faq-two-col { grid-template-columns: 1fr; }
    .fx-stats-row { flex-wrap: wrap; gap: 20px; }
    .fx-stat-item { min-width: 120px; }
}
@media (max-width: 768px) {
    .fx-hero { padding: 140px 0 60px; }
    .fx-hero__title { font-size: 36px; }
    .fx-hero__btns { flex-direction: column; align-items: center; }
    .fx-block { padding: 56px 0; }
    .fx-h2 { font-size: 30px; }
    .fx-features-grid { grid-template-columns: 1fr; }
    .fx-steps-grid { grid-template-columns: 1fr; }
    .fx-marketing-grid { grid-template-columns: 1fr; }
    .fx-marketing-card--big { grid-template-columns: 1fr; }
    .fx-integrations { grid-template-columns: repeat(2, 1fr); }
    .fx-cta-mini { flex-direction: column; gap: 20px; text-align: center; }
    .fx-cta-mini__right { justify-content: center; }
    .fx-cta-box { padding: 48px 24px; }
    .fx-cta-box__title { font-size: 30px; }
    .fx-cta-box__btns { flex-direction: column; align-items: center; }
    .fx-iphone { width: 240px; }
    .fx-iphone--sm { width: 200px; }
    .fx-logos { gap: 24px; }
    .fx-logo-item { font-size: 15px; }
    .fx-app-stats { flex-direction: column; gap: 14px; }
    .fx-app-badges { flex-direction: column; }
    .fx-stat-item__num { font-size: 24px; }
    .fx-kargo-price__val { font-size: 40px; }
    .fx-payment-card__amount { font-size: 28px; }
}
@media (max-width: 480px) {
    .fx-hero__title { font-size: 28px; }
    .fx-h2 { font-size: 24px; }
    .fx-iphone { width: 220px; }
    .fx-integrations { grid-template-columns: repeat(2, 1fr); }
    .fx-features-grid { grid-template-columns: 1fr !important; }
}

/* ================================================ */
/* PAGE HERO (inner pages)                         */
/* ================================================ */
.fx-page-hero { padding: 140px 0 60px; background: linear-gradient(180deg, rgba(21,40,75,0.03) 0%, transparent 100%); border-bottom: 1px solid rgba(255,255,255,0.05); }
.fx-page-hero__center { text-align: center; max-width: 700px; margin: 0 auto; }

/* ================================================ */
/* CONTACT FORM                                     */
/* ================================================ */
.fx-contact-grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 48px; }
.fx-contact-form { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07); border-radius: 20px; padding: 36px; }
.fx-contact-form__title { font-size: 20px; font-weight: 700; color: #fff; margin-bottom: 24px; }
.fx-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.fx-form-group { margin-bottom: 16px; }
.fx-form-group label { display: block; font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.6); margin-bottom: 6px; }
.fx-form-group input,
.fx-form-group select,
.fx-form-group textarea { width: 100%; padding: 14px 16px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); border-radius: 10px; color: #fff; font-size: 14px; font-family: inherit; transition: border-color 0.3s; outline: none; }
.fx-form-group input:focus,
.fx-form-group select:focus,
.fx-form-group textarea:focus { border-color: rgba(21,40,75,0.4); }
.fx-form-group input::placeholder,
.fx-form-group textarea::placeholder { color: rgba(255,255,255,0.25); }
.fx-form-group select { appearance: none; cursor: pointer; }
.fx-form-group select option { background: #1a1a1a; color: #fff; }
.fx-form-group textarea { resize: vertical; min-height: 120px; }

.fx-contact-info { display: flex; flex-direction: column; gap: 8px; }
.fx-contact-info__title { font-size: 20px; font-weight: 700; color: #fff; margin-bottom: 20px; }
.fx-contact-info__item { display: flex; align-items: center; gap: 14px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07); border-radius: 14px; padding: 18px 20px; transition: all 0.3s; }
.fx-contact-info__item:hover { background: rgba(255,255,255,0.06); transform: translateX(4px); }
.fx-contact-info__icon { font-size: 22px; flex-shrink: 0; }
.fx-contact-info__item strong { display: block; font-size: 14px; color: #fff; margin-bottom: 2px; }
.fx-contact-info__item p { font-size: 13px; color: rgba(255,255,255,0.5); margin: 0; }

.fx-contact-social { margin-top: 24px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.06); }
.fx-contact-social h4 { font-size: 14px; color: rgba(255,255,255,0.5); margin-bottom: 12px; }
.fx-contact-social__links { display: flex; gap: 8px; }
.fx-contact-social__link { display: inline-flex; align-items: center; gap: 6px; padding: 10px 18px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 10px; font-size: 13px; color: rgba(255,255,255,0.6); text-decoration: none; transition: all 0.3s; }
.fx-contact-social__link:hover { background: rgba(255,255,255,0.08); color: #fff; }

/* ================================================ */
/* COMPARISON TABLE                                 */
/* ================================================ */
.fx-compare-table { overflow-x: auto; }
.fx-compare-table table { width: 100%; border-collapse: collapse; }
.fx-compare-table th,
.fx-compare-table td { padding: 14px 20px; text-align: center; font-size: 14px; border-bottom: 1px solid rgba(255,255,255,0.06); }
.fx-compare-table th { color: #fff; font-weight: 700; font-size: 15px; padding-bottom: 20px; }
.fx-compare-table td:first-child,
.fx-compare-table th:first-child { text-align: left; color: rgba(255,255,255,0.6); }
.fx-compare-table td { color: rgba(255,255,255,0.5); }
.fx-compare-table__pop { background: rgba(21,40,75,0.04); }
.fx-compare-table th.fx-compare-table__pop { color: #15284b; }

/* ================================================ */
/* BLOG                                            */
/* ================================================ */
.fx-blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.fx-blog-card { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07); border-radius: 20px; overflow: hidden; transition: all 0.3s; }
.fx-blog-card:hover { background: rgba(255,255,255,0.05); transform: translateY(-4px); border-color: rgba(255,255,255,0.12); }
.fx-blog-card--featured { grid-column: 1 / -1; display: grid; grid-template-columns: 1.2fr 1fr; }
.fx-blog-card__img { min-height: 200px; position: relative; display: flex; align-items: flex-end; padding: 20px; }
.fx-blog-card--featured .fx-blog-card__img { min-height: 280px; }
.fx-blog-card__cat { display: inline-block; background: rgba(21,40,75,0.15); color: #15284b; font-size: 11px; font-weight: 700; padding: 5px 14px; border-radius: 100px; text-transform: uppercase; letter-spacing: 0.05em; }
.fx-blog-card__body { padding: 24px; }
.fx-blog-card--featured .fx-blog-card__body { display: flex; flex-direction: column; justify-content: center; padding: 32px; }
.fx-blog-card__date { font-size: 12px; color: rgba(255,255,255,0.35); display: block; margin-bottom: 8px; }
.fx-blog-card__title { font-size: 17px; font-weight: 700; color: #fff; line-height: 1.4; margin-bottom: 10px; }
.fx-blog-card--featured .fx-blog-card__title { font-size: 22px; }
.fx-blog-card__desc { font-size: 14px; color: rgba(255,255,255,0.5); line-height: 1.6; margin-bottom: 14px; }
.fx-blog-card__link { font-size: 14px; font-weight: 600; color: #15284b; cursor: pointer; transition: opacity 0.3s; }
.fx-blog-card__link:hover { opacity: 0.8; }

@media (max-width: 1024px) {
    .fx-blog-grid { grid-template-columns: 1fr 1fr; }
    .fx-blog-card--featured { grid-column: 1 / -1; grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
    .fx-blog-grid { grid-template-columns: 1fr; }
    .fx-blog-card--featured { grid-template-columns: 1fr; }
    .fx-blog-card--featured .fx-blog-card__img { min-height: 200px; }
}

/* ================================================ */
/* UNITEDPAYMENT FEATURES                          */
/* ================================================ */
.fx-up-feature { background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.06); border-radius: 24px; padding: 40px; }
.fx-up-feature__head { text-align: center; max-width: 640px; margin: 0 auto 32px; }
.fx-up-feature__badge { display: inline-block; background: rgba(21,40,75,0.12); color: #15284b; font-size: 12px; font-weight: 700; padding: 6px 16px; border-radius: 100px; margin-bottom: 14px; text-transform: uppercase; letter-spacing: 0.05em; }
.fx-up-feature__title { font-family: 'Manrope', sans-serif; font-size: 32px; font-weight: 700; color: #fff; line-height: 1.2; letter-spacing: -0.02em; margin: 0 0 12px; }
.fx-up-feature__title em { font-family: 'Instrument Serif', Georgia, serif; font-style: italic; font-weight: 400; color: #15284b; letter-spacing: 0; }
.fx-up-feature__sub { font-size: 15px; color: rgba(255,255,255,0.55); line-height: 1.7; margin: 0; }
.fx-up-feature__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.fx-up-card { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.06); border-radius: 16px; padding: 24px; transition: all 0.3s; position: relative; overflow: hidden; }
.fx-up-card:hover { background: rgba(255,255,255,0.07); transform: translateY(-4px); border-color: rgba(21,40,75,0.18); }
.fx-up-card__icon { font-size: 32px; margin-bottom: 12px; line-height: 1; }
.fx-up-card h4 { font-size: 16px; font-weight: 700; color: #fff; margin: 0 0 8px; }
.fx-up-card p { font-size: 13px; color: rgba(255,255,255,0.55); line-height: 1.6; margin: 0; }

@media (max-width: 1024px) {
    .fx-up-feature__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .fx-up-feature { padding: 24px; }
    .fx-up-feature__title { font-size: 24px; }
    .fx-up-feature__grid { grid-template-columns: 1fr; }
}

/* ================================================ */
/* LANGUAGE SWITCHER                               */
/* ================================================ */
.lang-switcher { position: relative; display: inline-block; }
.lang-switcher__btn { display: inline-flex; align-items: center; gap: 6px; height: 34px; background: none; border: 0; padding: 0 4px; border-radius: 8px; color: rgba(255,255,255,.86); cursor: pointer; font-size: 13px; transition: color 0.2s; font-family: inherit; }
.lang-switcher__btn:hover { color: #fff; }
.lang-switcher__btn span { font-size: 16px; line-height: 1; }
.lang-switcher__btn strong { font-weight: 700; font-size: 12px; }
.lang-switcher__dropdown { position: absolute; top: calc(100% + 10px); right: 0; left: auto; background: linear-gradient(180deg, #15151c, #0f0f15); border: 1px solid rgba(255,255,255,0.1); border-radius: 16px; padding: 8px; min-width: 220px; max-width: calc(100vw - 32px); box-shadow: 0 24px 60px rgba(0,0,0,0.6), 0 0 0 1px rgba(21,40,75,0.05); display: none; z-index: 9999; flex-direction: column; gap: 2px; backdrop-filter: blur(20px); }
.lang-switcher__dropdown.open { display: flex; animation: langDrop 0.2s ease-out; }
@keyframes langDrop { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
.lang-switcher__item { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 10px; color: rgba(255,255,255,0.85); text-decoration: none; font-size: 13px; font-weight: 500; transition: all 0.2s; }
.lang-switcher__item:hover { background: rgba(255,255,255,0.06); color: #fff; }
.lang-switcher__item.active { background: rgba(21,40,75,0.1); color: #15284b; }
.lang-switcher__item span:first-child { font-size: 18px; line-height: 1; }
[dir="rtl"] .lang-switcher__dropdown { right: auto; left: 0; }

/* Mobile fix - keep dropdown anchored to button right */
@media (max-width: 540px) {
    .lang-switcher__dropdown { right: -8px; min-width: 200px; max-width: calc(100vw - 24px); }
}

/* RTL fixes */
[dir="rtl"] body { text-align: right; }
[dir="rtl"] .fx-hero__btns,
[dir="rtl"] .header__actions,
[dir="rtl"] .topbar__inner { direction: rtl; }

@media (max-width: 768px) {
    .lang-switcher__btn strong { display: none; }
}

/* ================================================ */
/* AUTH PAGES — SPLIT LAYOUT                       */
/* ================================================ */
.body--auth { background: #0a0a0f !important; overflow-x: hidden; }
.fx-auth-split { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; }

/* LEFT SIDE - FORM */
.fx-auth-split__left { background: #0f0f15; padding: 40px 60px; display: flex; flex-direction: column; justify-content: space-between; position: relative; }
.fx-auth-split__brand { display: inline-block; margin-bottom: 30px; }
.fx-auth-split__form-wrap { width: 100%; max-width: 420px; margin: auto 0; }
.fx-auth-split__title { font-family: 'Manrope', sans-serif; font-size: 32px; font-weight: 700; color: #fff; margin: 0 0 8px; letter-spacing: -0.02em; line-height: 1.2; }
.fx-auth-split__sub { font-size: 15px; color: rgba(255,255,255,0.55); margin: 0 0 28px; line-height: 1.5; }
.fx-auth-split__footer { display: flex; justify-content: space-between; align-items: center; margin-top: 30px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,0.04); }
.fx-auth-split__copy { font-size: 12px; color: rgba(255,255,255,0.3); }

/* RIGHT SIDE - VISUAL */
.fx-auth-split__right { position: relative; background: linear-gradient(135deg, #0a1218 0%, #0f1521 100%); display: flex; align-items: center; justify-content: center; padding: 60px; overflow: hidden; }
.fx-auth-split__bg { position: absolute; inset: 0; z-index: 0; }
.fx-auth-bg__orb { position: absolute; width: 500px; height: 500px; border-radius: 50%; filter: blur(120px); opacity: 0.4; }
.fx-auth-bg__orb--1 { background: rgba(21,40,75,0.5); top: -200px; left: -100px; animation: orbFloat 20s ease-in-out infinite; }
.fx-auth-bg__orb--2 { background: rgba(74,118,253,0.4); bottom: -200px; right: -100px; animation: orbFloat 18s ease-in-out infinite reverse; }
@keyframes orbFloat { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(60px, -40px); } }

.fx-auth-split__content { position: relative; z-index: 1; max-width: 460px; }
.fx-auth-split__badge { display: inline-flex; align-items: center; gap: 6px; background: rgba(21,40,75,0.12); color: #15284b; font-size: 13px; font-weight: 600; padding: 8px 16px; border-radius: 100px; border: 1px solid rgba(21,40,75,0.25); margin-bottom: 22px; }
.fx-auth-split__heading { font-family: 'Manrope', sans-serif; font-size: 42px; font-weight: 400; color: #fff; line-height: 1.15; letter-spacing: -0.03em; margin: 0 0 18px; }
.fx-auth-split__heading em { font-family: 'Instrument Serif', Georgia, serif; font-style: italic; font-weight: 400; color: #15284b; letter-spacing: 0; }
.fx-auth-split__desc { font-size: 15px; color: rgba(255,255,255,0.6); line-height: 1.7; margin: 0 0 32px; }

.fx-auth-split__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.fx-auth-split__stat { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; padding: 18px; text-align: center; backdrop-filter: blur(10px); }
.fx-auth-split__stat strong { display: block; font-size: 24px; font-weight: 800; color: #15284b; letter-spacing: -0.02em; }
.fx-auth-split__stat span { font-size: 11px; color: rgba(255,255,255,0.5); }

.fx-auth-split__benefits { display: flex; flex-direction: column; gap: 14px; }
.fx-auth-split__benefit { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.06); border-radius: 14px; backdrop-filter: blur(10px); }
.fx-auth-split__benefit > span { width: 28px; height: 28px; border-radius: 50%; background: #15284b; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; flex-shrink: 0; font-size: 13px; }
.fx-auth-split__benefit strong { display: block; font-size: 14px; color: #fff; margin-bottom: 4px; }
.fx-auth-split__benefit small { font-size: 12px; color: rgba(255,255,255,0.5); line-height: 1.5; }

/* Form fields - shared */
.fx-auth-form { display: flex; flex-direction: column; gap: 14px; }
.fx-auth-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fx-auth-field { display: flex; flex-direction: column; gap: 6px; }
.fx-auth-field label { font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.7); font-family: 'Manrope', sans-serif; }
.fx-auth-field input { padding: 14px 16px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; color: #fff; font-size: 14px; font-family: inherit; outline: none; transition: all 0.2s; }
.fx-auth-field input:focus { border-color: rgba(21,40,75,0.4); background: rgba(255,255,255,0.06); box-shadow: 0 0 0 3px rgba(21,40,75,0.08); }
.fx-auth-field input::placeholder { color: rgba(255,255,255,0.3); }

.fx-auth-options { display: flex; justify-content: space-between; align-items: center; margin: 4px 0 8px; flex-wrap: wrap; gap: 12px; }
.fx-auth-check { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13px; color: rgba(255,255,255,0.7); }
.fx-auth-check input { appearance: none; width: 18px; height: 18px; border: 1.5px solid rgba(255,255,255,0.2); border-radius: 5px; cursor: pointer; position: relative; flex-shrink: 0; transition: all 0.2s; }
.fx-auth-check input:checked { background: #15284b; border-color: #15284b; }
.fx-auth-check input:checked::after { content: ''; position: absolute; top: 2px; left: 5px; width: 5px; height: 9px; border: solid #0a0a0a; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.fx-auth-check--terms span a { color: #15284b; }
.fx-auth-link { font-size: 13px; color: rgba(21,40,75,0.85); text-decoration: none; }
.fx-auth-link:hover { color: #15284b; }

.fx-auth-card__error { display: flex; align-items: center; gap: 10px; background: rgba(239,68,68,0.08); border: 1px solid rgba(239,68,68,0.2); border-radius: 12px; padding: 12px 16px; margin-bottom: 18px; font-size: 13px; color: #ff8585; }

.fx-auth-switch { text-align: center; font-size: 14px; color: rgba(255,255,255,0.55); margin: 24px 0 0; }
.fx-auth-switch a { color: #15284b; font-weight: 600; text-decoration: none; }
.fx-auth-switch a:hover { color: #0f203e; }

/* Divider */
.fx-auth-divider { display: flex; align-items: center; gap: 14px; margin: 24px 0 16px; }
.fx-auth-divider::before, .fx-auth-divider::after { content: ''; flex: 1; height: 1px; background: rgba(255,255,255,0.08); }
.fx-auth-divider span { font-size: 11px; color: rgba(255,255,255,0.4); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600; }

/* Distinctive register CTA card on login page */
.fx-auth-cta-register { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 20px; background: linear-gradient(135deg, rgba(21,40,75,0.1), rgba(74,118,253,0.06)); border: 1px solid rgba(21,40,75,0.25); border-radius: 16px; text-decoration: none; transition: all 0.3s; position: relative; overflow: hidden; }
.fx-auth-cta-register::before { content: ''; position: absolute; top: -100%; right: -100%; width: 300px; height: 300px; background: radial-gradient(circle, rgba(21,40,75,0.12) 0%, transparent 60%); transition: all 0.5s; pointer-events: none; }
.fx-auth-cta-register:hover { border-color: rgba(21,40,75,0.5); transform: translateY(-2px); box-shadow: 0 10px 28px rgba(21,40,75,0.12); }
.fx-auth-cta-register:hover::before { top: -50%; right: -50%; }
.fx-auth-cta-register__left { display: flex; flex-direction: column; gap: 2px; position: relative; z-index: 1; }
.fx-auth-cta-register__label { font-size: 12px; color: rgba(255,255,255,0.55); }
.fx-auth-cta-register__title { font-family: 'Manrope', sans-serif; font-size: 15px; font-weight: 700; color: #15284b; }
.fx-auth-cta-register__badge { display: inline-flex; align-items: center; gap: 4px; padding: 5px 12px; background: rgba(21,40,75,0.15); color: #15284b; font-size: 11px; font-weight: 700; border-radius: 100px; white-space: nowrap; position: relative; z-index: 1; }
@media (max-width: 540px) { .fx-auth-cta-register { flex-direction: column; align-items: flex-start; padding: 14px 16px; } .fx-auth-cta-register__badge { align-self: flex-end; } }

.fx-auth-back { font-size: 13px; color: rgba(255,255,255,0.5); text-decoration: none; transition: color 0.2s; }
.fx-auth-back:hover { color: #15284b; }

@media (max-width: 1024px) {
    .fx-auth-split { grid-template-columns: 1fr; }
    .fx-auth-split__right { display: none; }
    .fx-auth-split__left { padding: 40px 24px; }
}
@media (max-width: 540px) {
    .fx-auth-split__left { padding: 24px 18px; }
    .fx-auth-split__title { font-size: 26px; }
    .fx-auth-row { grid-template-columns: 1fr; }
}

/* Callback section on home (ikas-style) */
.fx-callback-banner-success { max-width: 1200px; margin: 16px auto 0; padding: 14px 22px; background: linear-gradient(90deg, rgba(34,197,94,0.18), rgba(34,197,94,0.06)); border: 1px solid rgba(34,197,94,0.35); border-radius: 14px; color: #fff; font-weight: 600; display: flex; align-items: center; gap: 12px; font-size: 14px; }
.fx-callback-banner-success span { width: 28px; height: 28px; border-radius: 50%; background: #22c55e; color: #0a0a0a; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; }

/* Mobile apps showcase grid */
.fx-apps-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; max-width: 1100px; margin: 0 auto 28px; }
.fx-app-card { display: flex; align-items: center; gap: 14px; padding: 16px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 18px; text-decoration: none; transition: all 0.3s; position: relative; }
.fx-app-card:hover { background: rgba(255,255,255,0.06); border-color: rgba(21,40,75,0.25); transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,0,0,0.3); }
.fx-app-card img { width: 56px; height: 56px; border-radius: 14px; object-fit: cover; flex-shrink: 0; box-shadow: 0 4px 14px rgba(0,0,0,0.3); }
.fx-app-card div { flex: 1; min-width: 0; }
.fx-app-card strong { display: block; font-family: 'Manrope', sans-serif; font-size: 15px; color: #fff; font-weight: 700; margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fx-app-card span { font-size: 12px; color: rgba(255,255,255,0.5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.fx-app-card .lucide-icon { width: 16px; height: 16px; color: rgba(255,255,255,0.4); flex-shrink: 0; transition: color 0.2s; }
.fx-app-card:hover .lucide-icon { color: #15284b; }

.fx-apps-store-row { display: flex; justify-content: center; }
@media (max-width: 1024px) { .fx-apps-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .fx-apps-grid { grid-template-columns: 1fr; } }

/* Callback section - ikas style (compact, no card) */
.fx-callback-section { display: grid; grid-template-columns: 1fr 1.2fr; gap: 48px; align-items: center; padding: 32px 0; }
.fx-callback-section__left { display: flex; flex-direction: column; gap: 20px; }
.fx-callback-section__avatars { display: flex; }
.fx-callback-avatar { width: 56px; height: 56px; border-radius: 50%; border: 3px solid #0a0a0f; overflow: hidden; display: flex; align-items: center; justify-content: center; font-size: 22px; margin-left: -14px; box-shadow: 0 4px 12px rgba(0,0,0,0.4); }
.fx-callback-avatar:first-child { margin-left: 0; }
.fx-callback-avatar img { width: 100%; height: 100%; object-fit: cover; }
.fx-callback-section__title { font-family: 'Manrope', sans-serif; font-size: 38px; font-weight: 700; color: #fff; line-height: 1.15; margin: 0; letter-spacing: -0.02em; }
.fx-callback-section__title em { font-family: 'Instrument Serif', Georgia, serif; font-style: italic; font-weight: 400; color: #15284b; letter-spacing: 0; }
.fx-callback-section__hours { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; background: rgba(21,40,75,0.08); border: 1px solid rgba(21,40,75,0.2); border-radius: 100px; font-size: 13px; color: #15284b; font-weight: 600; align-self: flex-start; }
.fx-callback-section__hours .lucide-icon { width: 16px; height: 16px; }

/* Form - clean, no card */
.fx-callback-section__form { display: flex; flex-direction: column; gap: 12px; }
.fx-callback-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fx-callback-section__form input[type="text"],
.fx-callback-section__form input[type="email"],
.fx-callback-section__form input[type="tel"] { padding: 16px 20px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); border-radius: 14px; color: #fff; font-size: 15px; font-family: inherit; outline: none; transition: all 0.2s; width: 100%; }
.fx-callback-section__form input:focus { border-color: rgba(21,40,75,0.4); background: rgba(255,255,255,0.06); }
.fx-callback-section__form input::placeholder { color: rgba(255,255,255,0.4); }

.fx-callback-phone-row { display: flex; gap: 0; align-items: stretch; }
.fx-callback-phone-flag { display: inline-flex; align-items: center; padding: 16px 16px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); border-right: none; border-radius: 14px 0 0 14px; font-size: 14px; color: #fff; white-space: nowrap; font-weight: 600; }
.fx-callback-phone-row input { border-radius: 0 14px 14px 0 !important; }

.fx-callback-bottom { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 4px; flex-wrap: wrap; }
.fx-callback-section__terms { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 13px; color: rgba(255,255,255,0.55); flex: 1; min-width: 0; }
.fx-callback-section__terms input { appearance: none; width: 18px; height: 18px; border: 1.5px solid rgba(255,255,255,0.2); border-radius: 5px; cursor: pointer; position: relative; flex-shrink: 0; transition: all 0.2s; }
.fx-callback-section__terms input:checked { background: #15284b; border-color: #15284b; }
.fx-callback-section__terms input:checked::after { content: ''; position: absolute; top: 2px; left: 5px; width: 5px; height: 9px; border: solid #0a0a0a; border-width: 0 2px 2px 0; transform: rotate(45deg); }

.fx-callback-submit { padding: 16px 36px; background: #15284b; color: #fff; border: none; border-radius: 100px; font-size: 15px; font-weight: 700; cursor: pointer; transition: all 0.3s; font-family: 'Manrope', sans-serif; flex-shrink: 0; }
.fx-callback-submit:hover { background: #0f203e; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(21,40,75,0.3); }

.fx-callback-section__user { display: flex; align-items: center; gap: 14px; padding: 14px 18px; background: rgba(21,40,75,0.06); border: 1px solid rgba(21,40,75,0.2); border-radius: 14px; }
.fx-callback-section__user strong { display: block; font-size: 14px; color: #fff; }
.fx-callback-section__user span { font-size: 12px; color: rgba(255,255,255,0.55); }

@media (max-width: 1024px) {
    .fx-callback-section { grid-template-columns: 1fr; gap: 28px; padding: 24px 0; }
    .fx-callback-section__title { font-size: 28px; }
    .fx-callback-row { grid-template-columns: 1fr; }
    .fx-callback-bottom { flex-direction: column; align-items: stretch; }
    .fx-callback-submit { width: 100%; }
}

/* Legal pages (Privacy, Terms) */
.fx-legal { color: rgba(255,255,255,0.75); line-height: 1.8; font-size: 15px; }
.fx-legal__intro { font-size: 17px; color: rgba(255,255,255,0.85); border-left: 3px solid #15284b; padding: 14px 22px; background: rgba(21,40,75,0.04); border-radius: 0 12px 12px 0; margin-bottom: 32px; }
.fx-legal h2 { font-family: 'Manrope', sans-serif; font-size: 24px; font-weight: 700; color: #fff; margin: 38px 0 16px; letter-spacing: -0.02em; padding-top: 14px; border-top: 1px solid rgba(255,255,255,0.06); }
.fx-legal h3 { font-family: 'Manrope', sans-serif; font-size: 17px; font-weight: 600; color: #15284b; margin: 22px 0 10px; }
.fx-legal p { margin: 0 0 14px; }
.fx-legal ul { padding-left: 22px; margin: 0 0 18px; }
.fx-legal ul li { margin-bottom: 8px; padding-left: 4px; }
.fx-legal ul li::marker { color: #15284b; }
.fx-legal strong { color: #fff; font-weight: 600; }
.fx-legal a { color: #15284b; text-decoration: none; transition: color 0.2s; }
.fx-legal a:hover { color: #0f203e; text-decoration: underline; }
.fx-legal__footer { margin-top: 48px; padding: 22px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); border-radius: 14px; font-size: 13px; color: rgba(255,255,255,0.5); text-align: center; }

/* Founder credit card on auth pages */
.fx-auth-founder { display: flex; align-items: center; gap: 14px; margin-top: 28px; padding: 18px 22px; background: linear-gradient(135deg, rgba(21,40,75,0.08), rgba(74,118,253,0.06)); border: 1px solid rgba(21,40,75,0.18); border-radius: 18px; backdrop-filter: blur(10px); position: relative; overflow: hidden; }
.fx-auth-founder::before { content: ''; position: absolute; top: -50%; right: -20%; width: 200px; height: 200px; background: radial-gradient(circle, rgba(21,40,75,0.15) 0%, transparent 70%); pointer-events: none; }
.fx-auth-founder__avatar { width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(135deg, #15284b, #0f203e); display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 800; color: #fff; flex-shrink: 0; box-shadow: 0 4px 14px rgba(21,40,75,0.3); position: relative; z-index: 1; }
.fx-auth-founder__info { flex: 1; position: relative; z-index: 1; }
.fx-auth-founder__label { display: block; font-size: 11px; color: rgba(21,40,75,0.85); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 3px; }
.fx-auth-founder__name { display: block; font-family: 'Manrope', sans-serif; font-size: 16px; color: #fff; font-weight: 700; }
.fx-auth-founder__icon { font-size: 22px; color: #15284b; opacity: 0.8; position: relative; z-index: 1; }

/* Footer founder line */
.footer__founder { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,0.04); font-size: 12px; color: rgba(255,255,255,0.4); }
.footer__founder span:first-child { color: #15284b; font-size: 11px; }

/* Old single-card style (keep for fallback) */
.fx-auth-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 140px 24px 60px; position: relative; overflow: hidden; }
.fx-auth-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.fx-auth-bg__orb { position: absolute; width: 500px; height: 500px; border-radius: 50%; filter: blur(120px); opacity: 0.4; }
.fx-auth-bg__orb--1 { background: rgba(21,40,75,0.4); top: -150px; left: -150px; animation: orbFloat 20s ease-in-out infinite; }
.fx-auth-bg__orb--2 { background: rgba(74,118,253,0.3); bottom: -150px; right: -150px; animation: orbFloat 18s ease-in-out infinite reverse; }
@keyframes orbFloat { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(60px, -40px); } }

.fx-auth-card { position: relative; z-index: 1; max-width: 460px; width: 100%; background: linear-gradient(180deg, rgba(20,20,28,0.95), rgba(15,15,22,0.95)); border: 1px solid rgba(255,255,255,0.08); border-radius: 24px; padding: 40px; box-shadow: 0 30px 80px rgba(0,0,0,0.5), 0 0 0 1px rgba(21,40,75,0.04); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
.fx-auth-card--wide { max-width: 600px; }

.fx-auth-card__head { text-align: center; margin-bottom: 28px; }
.fx-auth-card__logo { display: inline-block; margin-bottom: 20px; }
.fx-auth-card__title { font-family: 'Manrope', sans-serif; font-size: 28px; font-weight: 700; color: #fff; margin: 0 0 6px; letter-spacing: -0.02em; }
.fx-auth-card__sub { font-size: 14px; color: rgba(255,255,255,0.5); margin: 0; line-height: 1.5; }

.fx-auth-card__error { display: flex; align-items: center; gap: 10px; background: rgba(239,68,68,0.08); border: 1px solid rgba(239,68,68,0.2); border-radius: 12px; padding: 12px 16px; margin-bottom: 18px; font-size: 13px; color: #ff8585; }

.fx-auth-form { display: flex; flex-direction: column; gap: 14px; }
.fx-auth-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fx-auth-field { display: flex; flex-direction: column; gap: 6px; }
.fx-auth-field label { font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.7); font-family: 'Manrope', sans-serif; }
.fx-auth-field input { padding: 13px 16px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; color: #fff; font-size: 14px; font-family: inherit; outline: none; transition: all 0.2s; }
.fx-auth-field input:focus { border-color: rgba(21,40,75,0.4); background: rgba(255,255,255,0.06); box-shadow: 0 0 0 3px rgba(21,40,75,0.08); }
.fx-auth-field input::placeholder { color: rgba(255,255,255,0.3); }

.fx-auth-options { display: flex; justify-content: space-between; align-items: center; margin: 4px 0 8px; flex-wrap: wrap; gap: 12px; }
.fx-auth-check { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13px; color: rgba(255,255,255,0.7); }
.fx-auth-check input { appearance: none; width: 18px; height: 18px; border: 1.5px solid rgba(255,255,255,0.2); border-radius: 5px; cursor: pointer; position: relative; flex-shrink: 0; transition: all 0.2s; }
.fx-auth-check input:checked { background: #15284b; border-color: #15284b; }
.fx-auth-check input:checked::after { content: ''; position: absolute; top: 2px; left: 5px; width: 5px; height: 9px; border: solid #0a0a0a; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.fx-auth-check--terms { margin: 8px 0 4px; }
.fx-auth-check--terms span a { color: #15284b; }

.fx-auth-link { font-size: 13px; color: rgba(21,40,75,0.85); text-decoration: none; transition: color 0.2s; }
.fx-auth-link:hover { color: #15284b; }

.fx-auth-trust { display: flex; justify-content: center; gap: 16px; margin: 22px 0 18px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,0.06); flex-wrap: wrap; }
.fx-auth-trust span { font-size: 12px; color: rgba(255,255,255,0.55); display: inline-flex; align-items: center; gap: 5px; }

.fx-auth-switch { text-align: center; font-size: 14px; color: rgba(255,255,255,0.55); margin: 0 0 12px; }
.fx-auth-switch a { color: #15284b; font-weight: 600; text-decoration: none; }
.fx-auth-switch a:hover { color: #0f203e; text-decoration: underline; }

.fx-auth-back { display: block; text-align: center; font-size: 12px; color: rgba(255,255,255,0.4); text-decoration: none; transition: color 0.2s; }
.fx-auth-back:hover { color: #15284b; }

@media (max-width: 540px) {
    .fx-auth-card { padding: 28px 22px; border-radius: 18px; }
    .fx-auth-row { grid-template-columns: 1fr; }
    .fx-auth-card__title { font-size: 22px; }
    .fx-auth-trust { flex-direction: column; gap: 8px; }
}

/* ================================================ */
/* CALLBACK TOAST                                  */
/* ================================================ */
.callback-toast { position: fixed; top: 24px; right: 24px; max-width: 420px; background: linear-gradient(90deg, #15284b, #0f203e); color: #fff; padding: 18px 22px; border-radius: 18px; display: flex; align-items: center; gap: 14px; z-index: 10100; box-shadow: 0 20px 50px rgba(21,40,75,0.3), 0 0 0 1px rgba(255,255,255,0.2); animation: cbToastIn 0.5s cubic-bezier(0.16, 1, 0.3, 1); transition: all 0.4s; }
@keyframes cbToastIn { from { opacity: 0; transform: translateX(120%); } to { opacity: 1; transform: translateX(0); } }
.callback-toast__icon { width: 48px; height: 48px; border-radius: 50%; background: #0a0a0a; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.callback-toast__icon svg { stroke: #15284b; }
.callback-toast strong { display: block; font-size: 15px; font-weight: 800; color: #0a0a0a; margin-bottom: 2px; line-height: 1.2; }
.callback-toast span { font-size: 13px; color: rgba(10,10,10,0.7); line-height: 1.4; }
.callback-toast__close { background: rgba(0,0,0,0.1); border: none; border-radius: 50%; width: 28px; height: 28px; cursor: pointer; font-size: 16px; line-height: 1; color: #0a0a0a; flex-shrink: 0; transition: background 0.2s; margin-left: auto; }
.callback-toast__close:hover { background: rgba(0,0,0,0.2); }
@media (max-width: 600px) {
    .callback-toast { top: auto; bottom: 16px; left: 16px; right: 16px; max-width: none; }
}

/* ================================================ */
/* CALLBACK MODAL                                  */
/* ================================================ */
.callback-modal { position: fixed; inset: 0; z-index: 10010; display: none; align-items: center; justify-content: center; padding: 20px; }
.callback-modal.active { display: flex; animation: cmFadeIn 0.3s ease-out; }
@keyframes cmFadeIn { from { opacity: 0; } to { opacity: 1; } }
.callback-modal__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.8); backdrop-filter: blur(20px); }
.callback-modal__container { position: relative; max-width: 480px; width: 100%; max-height: 90vh; overflow-y: auto; background: linear-gradient(180deg, #15151c, #0f0f15); border: 1px solid rgba(21,40,75,0.15); border-radius: 24px; padding: 40px 32px 32px; box-shadow: 0 30px 80px rgba(0,0,0,0.7); animation: cmUp 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes cmUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
.callback-modal__close { position: absolute; top: 14px; right: 14px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); border-radius: 50%; width: 32px; height: 32px; color: #fff; cursor: pointer; font-size: 20px; line-height: 1; display: flex; align-items: center; justify-content: center; transition: all 0.2s; }
.callback-modal__close:hover { background: rgba(239,68,68,0.2); border-color: rgba(239,68,68,0.4); }
.callback-modal__icon { width: 80px; height: 80px; border-radius: 50%; background: linear-gradient(135deg, #15284b, #0f203e); display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; box-shadow: 0 8px 24px rgba(21,40,75,0.3); }
.callback-modal__title { font-family: 'Manrope', sans-serif; font-size: 24px; font-weight: 700; color: #fff; text-align: center; margin: 0 0 8px; letter-spacing: -0.02em; }
.callback-modal__sub { font-size: 14px; color: rgba(255,255,255,0.6); text-align: center; margin: 0 0 24px; line-height: 1.5; }
.callback-modal__success { background: rgba(34,197,94,0.1); border: 1px solid rgba(34,197,94,0.3); border-radius: 12px; padding: 12px 16px; color: #22c55e; font-size: 14px; font-weight: 600; margin-bottom: 16px; text-align: center; }
.callback-modal__form { display: flex; flex-direction: column; gap: 4px; }
.callback-modal__row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.callback-modal__form .fx-form-group { margin-bottom: 12px; }
.callback-modal__form label { display: block; font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.7); margin-bottom: 6px; font-family: 'Manrope', sans-serif; }
.callback-modal__form input,
.callback-modal__form textarea { width: 100%; padding: 12px 14px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); border-radius: 10px; color: #fff; font-size: 14px; font-family: 'Manrope', sans-serif; outline: none; transition: border-color 0.2s; }
.callback-modal__form input:focus,
.callback-modal__form textarea:focus { border-color: rgba(21,40,75,0.5); background: rgba(255,255,255,0.06); }
.callback-modal__form textarea { resize: vertical; min-height: 80px; }
.callback-modal__form input::placeholder,
.callback-modal__form textarea::placeholder { color: rgba(255,255,255,0.3); }
.callback-modal__user-info { display: flex; align-items: center; gap: 14px; padding: 14px 18px; background: rgba(21,40,75,0.06); border: 1px solid rgba(21,40,75,0.2); border-radius: 14px; margin-bottom: 14px; }
.callback-modal__avatar { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, #15284b, #0f203e); display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 800; color: #fff; flex-shrink: 0; }
.callback-modal__user-info strong { display: block; font-size: 14px; color: #fff; font-weight: 700; line-height: 1.2; }
.callback-modal__user-info span { font-size: 12px; color: rgba(255,255,255,0.55); }
.callback-modal__submit { width: 100%; padding: 14px 24px; background: linear-gradient(90deg, #15284b, #0f203e); color: #fff; border: none; border-radius: 100px; font-size: 15px; font-weight: 700; cursor: pointer; transition: all 0.3s; margin-top: 8px; font-family: 'Manrope', sans-serif; }
.callback-modal__submit:hover { transform: translateY(-2px); box-shadow: 0 6px 24px rgba(21,40,75,0.35); }
@media (max-width: 480px) {
    .callback-modal__container { padding: 32px 22px 24px; }
    .callback-modal__row { grid-template-columns: 1fr; }
    .callback-modal__title { font-size: 20px; }
}

/* ================================================ */
/* HEADER USER (logged in)                         */
/* ================================================ */
.header__user { display: inline-flex !important; flex-direction: row !important; align-items: center !important; gap: 10px !important; padding: 6px 14px 6px 6px !important; background: rgba(255,255,255,0.06) !important; border: 1px solid rgba(255,255,255,0.1) !important; border-radius: 100px !important; text-decoration: none !important; transition: all 0.3s; }
.header__user:hover { background: rgba(21,40,75,0.1) !important; border-color: rgba(21,40,75,0.25) !important; }
.header__user-avatar { width: 32px !important; height: 32px !important; border-radius: 50% !important; background: linear-gradient(135deg, #15284b, #0f203e) !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 13px !important; font-weight: 800 !important; color: #fff !important; flex-shrink: 0 !important; }
.header__user-info { display: flex !important; flex-direction: column !important; line-height: 1.1 !important; align-items: flex-start !important; }
.header__user-info small { font-size: 10px !important; color: rgba(255,255,255,0.62) !important; margin-bottom: 2px !important; font-weight: 400 !important; }
.header__user-info strong { font-size: 13px !important; color: #fff !important; font-weight: 600 !important; }
.header__plan-cta { display: inline-flex !important; align-items: center; gap: 6px; padding: 8px 16px; background: linear-gradient(90deg, #15284b, #0f203e); color: #fff; font-size: 13px; font-weight: 700; border-radius: 100px; text-decoration: none; transition: all 0.3s; white-space: nowrap; box-shadow: 0 0 0 2px rgba(21,40,75,0.2); animation: pulsePlan 2.5s ease-in-out infinite; }
.header__plan-cta:hover { background: #0f203e; transform: translateY(-1px); box-shadow: 0 4px 16px rgba(21,40,75,0.3); }
.header__plan-cta span { font-size: 14px; }
@keyframes pulsePlan { 0%, 100% { box-shadow: 0 0 0 2px rgba(21,40,75,0.2); } 50% { box-shadow: 0 0 0 6px rgba(21,40,75,0.05); } }
@media (max-width: 480px) { .header__plan-cta span { display: none; } }

.header__user-status { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 100px; border: 1px solid; margin-left: 4px; line-height: 1; white-space: nowrap; }
.header__user-status span { font-size: 10px; }
@media (max-width: 1024px) {
    .header__actions.open { flex-direction: row !important; flex-wrap: wrap; justify-content: center; gap: 12px; }
}
@media (max-width: 768px) {
    .header__user-status { display: none; }
    .header__user-info { display: flex !important; }
}

@media (max-width: 768px) {
    .header__user-info { display: none; }
}

/* ================================================ */
/* ONBOARDING                                      */
/* ================================================ */
.fx-onboard-plan { cursor: pointer; position: relative; }
.fx-onboard-plan input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.fx-onboard-plan__check { position: absolute; top: 16px; right: 16px; width: 28px; height: 28px; border-radius: 50%; background: #15284b; display: none; align-items: center; justify-content: center; z-index: 2; }
.fx-onboard-plan:has(input:checked) { border-color: #15284b !important; background: rgba(21,40,75,0.08) !important; box-shadow: 0 0 0 2px rgba(21,40,75,0.3); }
.fx-onboard-plan:has(input:checked) .fx-onboard-plan__check { display: flex; }
.fx-onboard-plan--custom { border-style: dashed !important; }

/* Onboarding pricing — 6 plans, smaller */
.fx-pricing-preview:has(.fx-onboard-plan) { grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 1024px) { .fx-pricing-preview:has(.fx-onboard-plan) { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .fx-pricing-preview:has(.fx-onboard-plan) { grid-template-columns: 1fr; } }

.fx-onboard-pending { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 28px; padding: 56px 48px; text-align: center; }
.fx-onboard-pending__icon { display: inline-flex; padding: 24px; background: rgba(21,40,75,0.08); border-radius: 50%; margin-bottom: 24px; animation: fxPulseRing 2s ease-in-out infinite; }
@keyframes fxPulseRing { 0%, 100% { box-shadow: 0 0 0 0 rgba(21,40,75,0.3); } 50% { box-shadow: 0 0 0 16px rgba(21,40,75,0); } }
.fx-onboard-pending h1.fx-h2 em { font-family: 'Instrument Serif', Georgia, serif; }

.fx-onboard-pending__order { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 16px; padding: 24px 28px; margin: 28px 0; text-align: left; }
.fx-onboard-pending__row { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,0.04); }
.fx-onboard-pending__row:last-child { border-bottom: none; }
.fx-onboard-pending__row span { font-size: 14px; color: rgba(255,255,255,0.5); }
.fx-onboard-pending__row strong { font-size: 14px; color: #fff; font-weight: 600; }

.fx-onboard-pending__steps { display: flex; flex-direction: column; gap: 14px; margin: 28px 0; text-align: left; }
.fx-onboard-pending__step { display: flex; gap: 16px; align-items: center; padding: 16px 22px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); border-radius: 14px; opacity: 0.5; transition: all 0.3s; }
.fx-onboard-pending__step--done { opacity: 1; border-color: rgba(34,197,94,0.3); background: rgba(34,197,94,0.05); }
.fx-onboard-pending__step--active { opacity: 1; border-color: rgba(21,40,75,0.3); background: rgba(21,40,75,0.05); }
.fx-onboard-pending__step-num { width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,0.06); display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; color: #fff; flex-shrink: 0; }
.fx-onboard-pending__step--done .fx-onboard-pending__step-num { background: #22c55e; color: #0a0a0a; }
.fx-onboard-pending__step--active .fx-onboard-pending__step-num { background: #15284b; color: #fff; }
.fx-onboard-pending__step strong { display: block; font-size: 14px; color: #fff; }
.fx-onboard-pending__step span { font-size: 12px; color: rgba(255,255,255,0.4); }

.fx-onboard-pending__contact { padding-top: 28px; border-top: 1px solid rgba(255,255,255,0.06); }
.fx-onboard-pending__contact h4 { font-size: 16px; color: #fff; margin: 0 0 6px; }
.fx-onboard-pending__contact p { font-size: 13px; color: rgba(255,255,255,0.5); margin: 0 0 16px; }
.fx-onboard-pending__contact-row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

@media (max-width: 768px) {
    .fx-onboard-pending { padding: 36px 24px; border-radius: 20px; }
}

/* ================================================ */
/* PAYMENT PROVIDERS                               */
/* ================================================ */
.fx-providers-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; max-width: 900px; margin: 0 auto; }
.fx-provider-card { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 20px; padding: 36px 32px; transition: all 0.3s; }
.fx-provider-card:hover { background: rgba(255,255,255,0.05); border-color: rgba(21,40,75,0.2); transform: translateY(-4px); }
.fx-provider-card__logo { display: flex; align-items: center; height: 56px; margin-bottom: 18px; }
.fx-provider-card__title { font-size: 22px; font-weight: 700; color: #fff; margin: 0 0 10px; }
.fx-provider-card__desc { font-size: 14px; color: rgba(255,255,255,0.55); line-height: 1.7; margin: 0 0 18px; }
.fx-provider-card__features { display: flex; flex-wrap: wrap; gap: 8px; }
.fx-provider-card__features span { font-size: 12px; font-weight: 500; color: rgba(255,255,255,0.7); background: rgba(21,40,75,0.08); border: 1px solid rgba(21,40,75,0.15); padding: 6px 12px; border-radius: 100px; }

@media (max-width: 768px) {
    .fx-providers-grid { grid-template-columns: 1fr; }
    .fx-provider-card { padding: 24px; }
}

/* ================================================ */
/* PARTNER BANKS                                   */
/* ================================================ */
.fx-banks-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.fx-bank-card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: rgba(255,255,255,0.96); border-radius: 18px; padding: 32px 20px; transition: all 0.3s; min-height: 140px; }
.fx-bank-card:hover { background: #fff; transform: translateY(-4px); box-shadow: 0 12px 40px rgba(21,40,75,0.1); }
.fx-bank-card img { max-width: 100%; max-height: 50px; width: auto; height: auto; object-fit: contain; }
.fx-bank-card span { font-size: 13px; font-weight: 600; color: #0a0a0a; text-align: center; }

@media (max-width: 1024px) {
    .fx-banks-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .fx-banks-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
    .fx-bank-card { padding: 20px 12px; min-height: 110px; }
    .fx-bank-card img { max-height: 36px; }
    .fx-bank-card span { font-size: 11px; }
}

/* ================================================ */
/* POS TERMINAL CARDS                              */
/* ================================================ */
.fx-pos-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.fx-pos-card { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 24px; padding: 36px; transition: all 0.3s; position: relative; overflow: hidden; }
.fx-pos-card:hover { background: rgba(255,255,255,0.05); transform: translateY(-4px); }
.fx-pos-card--featured { border-color: rgba(21,40,75,0.25); background: linear-gradient(135deg, rgba(21,40,75,0.05), rgba(74,118,253,0.04)); }
.fx-pos-card--featured::before { content: ''; position: absolute; width: 300px; height: 300px; background: radial-gradient(circle, rgba(21,40,75,0.08) 0%, transparent 60%); top: -80px; right: -80px; pointer-events: none; }
.fx-pos-card__visual { font-size: 56px; margin-bottom: 18px; }
.fx-pos-card__tag { display: inline-block; font-size: 12px; font-weight: 700; padding: 6px 14px; border-radius: 100px; margin-bottom: 14px; }
.fx-pos-card__title { font-family: 'Manrope', sans-serif; font-size: 26px; font-weight: 700; color: #fff; margin: 0 0 12px; line-height: 1.25; letter-spacing: -0.02em; position: relative; z-index: 1; }
.fx-pos-card__title em { font-family: 'Instrument Serif', Georgia, serif; font-style: italic; font-weight: 400; color: #15284b; letter-spacing: 0; }
.fx-pos-card__desc { font-size: 14px; color: rgba(255,255,255,0.55); line-height: 1.7; margin-bottom: 20px; position: relative; z-index: 1; }
.fx-pos-card__list { list-style: none; padding: 0; margin: 0; position: relative; z-index: 1; }
.fx-pos-card__list li { font-size: 14px; color: rgba(255,255,255,0.7); padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,0.04); }
.fx-pos-card__list li:last-child { border-bottom: none; }

/* ================================================ */
/* PAYMENT METHODS                                 */
/* ================================================ */
.fx-pay-methods-row { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07); border-radius: 24px; padding: 48px; display: grid; grid-template-columns: 1fr 1.5fr; gap: 48px; align-items: center; }
.fx-pay-methods-row__head .fx-tag { display: inline-block; margin-bottom: 12px; }
.fx-pay-methods-row__title { font-family: 'Manrope', sans-serif; font-size: 32px; font-weight: 700; color: #fff; margin: 0 0 12px; line-height: 1.2; letter-spacing: -0.02em; }
.fx-pay-methods-row__title em { font-family: 'Instrument Serif', Georgia, serif; font-style: italic; font-weight: 400; color: #15284b; letter-spacing: 0; }
.fx-pay-methods-row__sub { font-size: 15px; color: rgba(255,255,255,0.55); line-height: 1.6; margin: 0; }
.fx-pay-methods-row__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.fx-pay-method-card { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 16px; padding: 22px; text-align: center; transition: all 0.3s; }
.fx-pay-method-card:hover { background: rgba(255,255,255,0.07); border-color: rgba(21,40,75,0.2); transform: translateY(-3px); }
.fx-pay-method-card__icon { font-size: 28px; margin-bottom: 10px; display: flex; justify-content: center; align-items: center; min-height: 48px; }
.fx-pay-method-card__icon--brand { background: rgba(255,255,255,0.05); border-radius: 12px; width: 56px; height: 56px; margin: 0 auto 12px; }
.fx-pay-method-card__icon--brand svg { width: 32px; height: 32px; }
.fx-pay-method-card strong { display: block; font-size: 15px; color: #fff; margin-bottom: 4px; }
.fx-pay-method-card span { font-size: 12px; color: rgba(255,255,255,0.4); }

/* Enterprise card glow */
.fx-price-card--enterprise { border-color: rgba(21,40,75,0.2); background: linear-gradient(135deg, rgba(21,40,75,0.04), rgba(74,118,253,0.03)); }

@media (max-width: 1024px) {
    .fx-pos-row { grid-template-columns: 1fr; }
    .fx-pay-methods-row { grid-template-columns: 1fr; gap: 28px; padding: 32px; }
}
@media (max-width: 768px) {
    .fx-pos-card { padding: 24px; }
    .fx-pos-card__title { font-size: 22px; }
    .fx-pay-methods-row__title { font-size: 24px; }
    .fx-pay-methods-row__grid { grid-template-columns: 1fr 1fr; gap: 10px; }
    .fx-pay-method-card { padding: 16px; }
}

/* ================================================ */
/* 3 PRODUCT INTEGRATION BANNER                    */
/* ================================================ */
.fx-prod-integ-banner { display: grid; grid-template-columns: auto 1fr; gap: 32px; align-items: center; margin-top: 32px; padding: 40px; background: linear-gradient(135deg, rgba(21,40,75,0.08), rgba(21,40,75,0.02)); border: 1px solid rgba(21,40,75,0.2); border-radius: 24px; position: relative; overflow: hidden; }
.fx-prod-integ-banner::before { content: ''; position: absolute; width: 400px; height: 400px; background: radial-gradient(circle, rgba(21,40,75,0.1) 0%, transparent 60%); top: -100px; right: -100px; pointer-events: none; }
.fx-prod-integ-banner__icon { font-size: 72px; line-height: 1; flex-shrink: 0; position: relative; z-index: 1; }
.fx-prod-integ-banner__content { position: relative; z-index: 1; }
.fx-prod-integ-banner__tag { display: inline-block; background: rgba(21,40,75,0.15); color: #15284b; font-size: 12px; font-weight: 700; padding: 5px 14px; border-radius: 100px; margin-bottom: 12px; text-transform: uppercase; letter-spacing: 0.05em; }
.fx-prod-integ-banner__title { font-family: 'Manrope', sans-serif; font-size: 28px; font-weight: 700; color: #fff; margin: 0 0 10px; line-height: 1.2; letter-spacing: -0.02em; }
.fx-prod-integ-banner__title em { font-family: 'Instrument Serif', Georgia, serif; font-style: italic; font-weight: 400; color: #15284b; letter-spacing: 0; }
.fx-prod-integ-banner__desc { font-size: 15px; color: rgba(255,255,255,0.6); line-height: 1.7; margin-bottom: 18px; max-width: 700px; }
.fx-prod-integ-banner__list { display: flex; flex-wrap: wrap; gap: 10px; }
.fx-prod-integ-banner__list span { font-size: 13px; color: rgba(255,255,255,0.7); background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); padding: 8px 14px; border-radius: 100px; }

@media (max-width: 768px) {
    .fx-prod-integ-banner { grid-template-columns: 1fr; gap: 18px; padding: 28px; text-align: center; }
    .fx-prod-integ-banner__icon { font-size: 56px; }
    .fx-prod-integ-banner__title { font-size: 22px; }
    .fx-prod-integ-banner__list { justify-content: center; }
}

/* Mini nums (used on features page) */
.fx-mini-nums { display: flex; gap: 32px; }
.fx-mini-num strong { display: block; font-size: 26px; font-weight: 800; color: #fff; letter-spacing: -0.02em; }
.fx-mini-num span { font-size: 12px; color: rgba(255,255,255,0.4); }

/* ================================================ */
/* RESPONSIVE — inner pages                        */
/* ================================================ */
@media (max-width: 1024px) {
    .fx-contact-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
    .fx-page-hero { padding: 120px 0 40px; }
    .fx-form-row { grid-template-columns: 1fr; }
    .fx-contact-social__links { flex-direction: column; }
    .fx-features-grid[style*="repeat(4"] { grid-template-columns: repeat(2, 1fr) !important; }
    .fx-mini-nums { flex-direction: column; gap: 14px; }
}

/* ================================================ */
/* PREMIUM PAGE                                    */
/* ================================================ */

/* Hero Row */
.fx-prem-hero-row { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.fx-prem-hero-brands { display: flex; gap: 16px; justify-content: center; }
.fx-prem-brand-img { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 200px; height: 160px; border-radius: 18px; border: 1px solid rgba(255,255,255,0.08); }

/* Quote Card */
.fx-prem-quote-card { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 24px; padding: 36px; position: relative; }
.fx-prem-quote-card::before { content: '"'; position: absolute; top: 16px; left: 28px; font-size: 64px; color: rgba(21,40,75,0.15); font-family: Georgia, serif; line-height: 1; }
.fx-prem-quote-card__text { font-size: 20px; font-weight: 500; color: #fff; line-height: 1.5; margin-bottom: 24px; font-style: italic; padding-top: 20px; }
.fx-prem-quote-card__author { display: flex; align-items: center; gap: 14px; }
.fx-prem-quote-card__avatar { width: 44px; height: 44px; border-radius: 50%; background: #15284b; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 800; color: #fff; flex-shrink: 0; }
.fx-prem-quote-card__author strong { display: block; font-size: 15px; color: #fff; }
.fx-prem-quote-card__author span { font-size: 13px; color: rgba(255,255,255,0.4); }

/* Growth Row */
.fx-prem-growth-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.fx-prem-growth-card { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07); border-radius: 18px; padding: 28px; text-align: center; transition: all 0.3s; }
.fx-prem-growth-card:hover { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.12); }
.fx-prem-growth-card__icon { font-size: 28px; margin-bottom: 12px; }
.fx-prem-growth-card__label { font-size: 15px; font-weight: 600; color: #fff; margin-bottom: 6px; }
.fx-prem-growth-card__stat { font-size: 48px; font-weight: 800; color: #15284b; letter-spacing: -0.03em; margin: 8px 0; }
.fx-prem-growth-card__sub { font-size: 13px; color: rgba(255,255,255,0.4); }

/* Metrics Grid */
.fx-prem-metrics-grid { display: flex; flex-direction: column; gap: 12px; }
.fx-prem-metric-card { display: flex; align-items: center; gap: 18px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07); border-radius: 16px; padding: 22px 28px; transition: all 0.3s; }
.fx-prem-metric-card:hover { background: rgba(255,255,255,0.05); transform: translateX(4px); }
.fx-prem-metric-card__logo { width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 24px; flex-shrink: 0; }
.fx-prem-metric-card__info { flex: 1; }
.fx-prem-metric-card__info strong { display: block; font-size: 16px; color: #fff; }
.fx-prem-metric-card__info span { font-size: 13px; color: rgba(255,255,255,0.4); }
.fx-prem-metric-card__growth { text-align: right; }
.fx-prem-metric-card__growth strong { display: block; font-size: 22px; font-weight: 800; letter-spacing: -0.02em; }
.fx-prem-metric-card__growth span { font-size: 12px; color: rgba(255,255,255,0.4); }

/* Migration Row */
.fx-prem-migration-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.fx-prem-migration-card { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07); border-radius: 18px; padding: 28px 20px; text-align: center; transition: all 0.3s; }
.fx-prem-migration-card:hover { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.12); transform: translateY(-4px); }
.fx-prem-migration-card__brand { font-size: 15px; font-weight: 700; color: #fff; margin-bottom: 14px; }
.fx-prem-migration-card__days { font-size: 36px; font-weight: 800; color: #15284b; letter-spacing: -0.02em; margin-bottom: 6px; }
.fx-prem-migration-card__days strong { font-size: inherit; }
.fx-prem-migration-card__tag { display: inline-block; font-size: 11px; font-weight: 600; color: rgba(21,40,75,0.8); background: rgba(21,40,75,0.1); padding: 4px 14px; border-radius: 100px; }

/* Award */
.fx-prem-award { padding: 48px 32px; }
.fx-prem-award__trophy { font-size: 80px; display: block; animation: fxFloat 3s ease-in-out infinite; }
@keyframes fxFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* Ratings */
.fx-prem-ratings { display: flex; flex-direction: column; gap: 16px; margin-top: 24px; }
.fx-prem-rating-item { display: flex; align-items: center; gap: 16px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; padding: 18px 22px; }
.fx-prem-rating-item__score { font-size: 24px; font-weight: 800; color: #fff; min-width: 100px; }
.fx-prem-rating-item__stars { color: #f59e0b; font-size: 16px; letter-spacing: 2px; }
.fx-prem-rating-item__source { margin-left: auto; font-size: 13px; color: rgba(255,255,255,0.4); }

/* Testimonial Large */
.fx-prem-testimonial-lg { display: grid; grid-template-columns: 1.3fr 0.7fr; gap: 40px; align-items: center; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07); border-radius: 24px; padding: 48px; }
.fx-prem-testimonial-lg__quote { font-size: 22px; font-weight: 500; color: #fff; line-height: 1.5; font-style: italic; margin-bottom: 24px; }
.fx-prem-testimonial-lg__author { display: flex; align-items: center; gap: 14px; }
.fx-prem-testimonial-lg__right { display: flex; justify-content: center; }

/* Duo Cards */
.fx-prem-duo-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.fx-prem-duo-card { border: 1px solid rgba(255,255,255,0.08); border-radius: 20px; padding: 36px; transition: all 0.3s; }
.fx-prem-duo-card:hover { transform: translateY(-4px); }

/* Form Wrapper */
.fx-prem-form-wrapper { max-width: 700px; margin: 0 auto; }
.fx-prem-form { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07); border-radius: 20px; padding: 36px; }

/* Trust Badges */
.fx-prem-trust-row { display: flex; justify-content: center; gap: 24px; flex-wrap: wrap; }
.fx-prem-trust-badge { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 20px 36px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07); border-radius: 14px; }
.fx-prem-trust-badge strong { font-size: 16px; color: #fff; }
.fx-prem-trust-badge span { font-size: 14px; color: #f59e0b; }

/* Premium Responsive */
@media (max-width: 1024px) {
    .fx-prem-hero-row { grid-template-columns: 1fr; }
    .fx-prem-migration-row { grid-template-columns: repeat(2, 1fr); }
    .fx-prem-testimonial-lg { grid-template-columns: 1fr; }
    .fx-prem-testimonial-lg__right { display: none; }
}
@media (max-width: 768px) {
    .fx-prem-growth-row { grid-template-columns: 1fr; }
    .fx-prem-duo-row { grid-template-columns: 1fr; }
    .fx-prem-migration-row { grid-template-columns: 1fr; }
    .fx-prem-hero-brands { flex-direction: column; align-items: center; }
    .fx-prem-quote-card__text { font-size: 17px; }
    .fx-prem-testimonial-lg { padding: 28px; }
    .fx-prem-testimonial-lg__quote { font-size: 18px; }
    .fx-prem-form { padding: 24px; }
    .fx-prem-rating-item { flex-wrap: wrap; }
    .fx-prem-rating-item__source { margin-left: 0; }
    .fx-prem-trust-row { flex-direction: column; align-items: center; }
}

/* Lucide icon styling — targets the generated <svg class="lucide ..."> */
.lucide {
    display: inline-flex;
    vertical-align: -0.15em;
    width: 1em;
    height: 1em;
    stroke-width: 2;
    color: currentColor;
    flex-shrink: 0;
}
.lucide-icon { /* fallback for not-yet-converted */
    display: inline-flex;
    width: 1em;
    height: 1em;
}

/* Inline icons in badges/tags/buttons — small */
.fx-hero__badge .lucide,
.fx-tag .lucide,
.fx-pay-badge .lucide,
.fx-pay-logo .lucide,
.fx-iphone__cart-btn .lucide,
.fx-price-card__badge .lucide,
.fx-cta-box__badge .lucide,
.fx-cta-box__trust .lucide,
.fx-marketing-mockup__status .lucide,
.fx-btn .lucide {
    width: 0.95em !important;
    height: 0.95em !important;
    margin-right: 0.4em;
}

/* Checkmarks in lists — small green */
li .lucide,
.lucide-check {
    width: 0.85em !important;
    height: 0.85em !important;
    margin-right: 0.35em;
    color: #10b981;
}

/* Card icons — controlled medium size */
.fx-kargo-card__icon .lucide,
.fx-marketing-card__icon .lucide,
.fx-integ-item__icon .lucide {
    width: 28px !important;
    height: 28px !important;
    stroke-width: 1.8;
}

/* Center icons within their card containers */
.fx-kargo-card__icon,
.fx-marketing-card__icon,
.fx-integ-item__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}


/* Push header below topbar */
.header { top: 40px !important; }
/* Push hero/main content down to compensate */
body { padding-top: 0; }

@media (max-width: 768px) {
    .topbar__left { display: none; }
    .topbar__inner { justify-content: center; padding: 0 16px; }
    .topbar__cta { display: none; }
    .topbar { height: 36px; }
    .header { top: 36px !important; }
}

/* Topbar — proper size, visible */
.topbar {
    background: #0f203e;
    color: #fff;
    font-size: 13.5px;
    border-bottom: 1px solid rgba(255,255,255,0.09);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 56px;
    z-index: 200;
    display: flex;
    align-items: center;
}
.topbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 24px;
    padding: 0 32px;
}
.topbar__left {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: rgba(255,255,255,.72);
    font-size: 13.5px;
    letter-spacing: .01em;
}
.topbar__dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: #4ad07f; flex: 0 0 auto;
}
/* Hər üç element eyni hündürlükdə dayanır, aralarında nazik ayırıcı
   var: əvvəl müxtəlif ölçülü pill-lər yan-yana düzülmüşdü. */
.topbar__right {
    display: inline-flex;
    align-items: center;
    gap: 0;
}
.topbar__right > * + * { margin-left: 18px; }
.topbar__right > * + *::before {
    content: '';
    position: absolute; left: -18px; top: 50%;
    width: 1px; height: 16px; margin-top: -8px;
    background: rgba(255,255,255,.14);
}
.topbar__right > * { position: relative; }
.topbar__right .lang-switcher::before { content: none; }
.topbar__phone {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 34px;
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    font-size: 14.5px;
    letter-spacing: .01em;
    transition: color .2s;
}
.topbar__phone:hover { color: #8fb0ff; }
/* Zolaqdakı yeganə çərçivəli element budur; qalanları sadə mətndir,
   ona görə göz birbaşa buraya düşür. */
.topbar__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 34px;
    color: #fff;
    text-decoration: none;
    font-weight: 500;
    font-size: 13.5px;
    padding: 0 18px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.22);
    transition: background .2s, border-color .2s;
}
.topbar__cta:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.4); }
.topbar .lucide { width: 18px !important; height: 18px !important; }

/* Push header below topbar */
.header { top: 56px !important; }

@media (max-width: 768px) {
    .topbar { height: 48px; }
    .topbar__inner { padding: 0 16px; justify-content: center; }
    .topbar__left { display: none; }
    .topbar__cta { display: none; }
    .topbar__phone { font-size: 15px; }
    .header { top: 48px !important; }
}


/* ============ REGISTER FORM ENHANCEMENTS ============ */

/* Phone input with +994 prefix */
.fx-phone-input {
    display: flex;
    align-items: stretch;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    overflow: hidden;
    transition: all .2s;
}
.fx-phone-input:focus-within {
    border-color: #15284b;
    background: rgba(21,40,75,0.04);
    box-shadow: 0 0 0 3px rgba(21,40,75,0.12);
}
.fx-phone-input__prefix {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 14px;
    background: rgba(255,255,255,0.03);
    border-right: 1px solid rgba(255,255,255,0.08);
    color: #fff;
    font-weight: 600;
    font-size: 15px;
    white-space: nowrap;
}
.fx-phone-flag { font-size: 18px; line-height: 1; }
.fx-phone-input input {
    flex: 1;
    background: transparent !important;
    border: none !important;
    color: #fff;
    padding: 14px 16px;
    font: inherit;
    font-size: 15px;
    letter-spacing: 0.5px;
    outline: none;
}
.fx-phone-input input::placeholder { color: rgba(255,255,255,0.3); letter-spacing: 0; }

/* Password wrapper with eye toggle */
.fx-pw-wrap {
    position: relative;
    display: flex;
    align-items: center;
}
.fx-pw-wrap input { width: 100%; padding-right: 44px !important; }
.fx-pw-toggle {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 8px;
    color: rgba(255,255,255,0.4);
    border-radius: 8px;
    transition: all .2s;
}
.fx-pw-toggle:hover { color: #15284b; background: rgba(21,40,75,0.08); }

/* Password strength meter */
.fx-pw-meter {
    margin-top: 10px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.fx-pw-meter__bars {
    display: flex;
    gap: 4px;
    flex: 1;
    min-width: 120px;
}
.fx-pw-meter__bars span {
    flex: 1;
    height: 4px;
    background: rgba(255,255,255,0.08);
    border-radius: 2px;
    transition: all .3s;
}
.fx-pw-meter[data-score="1"] .fx-pw-meter__bars span:nth-child(-n+1) { background: #ef4444; }
.fx-pw-meter[data-score="2"] .fx-pw-meter__bars span:nth-child(-n+2) { background: #f59e0b; }
.fx-pw-meter[data-score="3"] .fx-pw-meter__bars span:nth-child(-n+3) { background: #3b82f6; }
.fx-pw-meter[data-score="4"] .fx-pw-meter__bars span { background: #22c55e; }
.fx-pw-meter__label {
    font-size: 12px;
    color: rgba(255,255,255,0.5);
    white-space: nowrap;
}
.fx-pw-meter__label strong { font-weight: 700; }

/* Password requirement checks */
.fx-pw-checks {
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 14px;
}
.fx-pw-checks li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: rgba(255,255,255,0.45);
    transition: color .2s;
}
.fx-pw-checks li.ok { color: #22c55e; }
.fx-pw-dot {
    width: 14px; height: 14px;
    border-radius: 50%;
    border: 1.5px solid rgba(255,255,255,0.25);
    flex-shrink: 0;
    position: relative;
    transition: all .25s;
}
.fx-pw-checks li.ok .fx-pw-dot {
    background: #22c55e;
    border-color: #22c55e;
}
.fx-pw-checks li.ok .fx-pw-dot::after {
    content: '';
    position: absolute;
    inset: 2px;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center/8px no-repeat;
}

/* Field validation states */
.fx-auth-form input.fx-input--ok {
    border-color: rgba(34,197,94,0.5) !important;
    background: rgba(34,197,94,0.04) !important;
}
.fx-auth-form input.fx-input--err {
    border-color: rgba(239,68,68,0.5) !important;
    background: rgba(239,68,68,0.04) !important;
}
.fx-phone-input:has(.fx-input--ok) { border-color: rgba(34,197,94,0.5); background: rgba(34,197,94,0.04); }
.fx-phone-input:has(.fx-input--err) { border-color: rgba(239,68,68,0.5); background: rgba(239,68,68,0.04); }

/* Field message */
.fx-field-msg {
    display: block;
    font-size: 12px;
    margin-top: 6px;
    min-height: 16px;
    color: rgba(255,255,255,0.5);
    transition: color .2s;
}
.fx-field-msg--ok { color: #22c55e; }
.fx-field-msg--ok::before { content: '✓ '; }
.fx-field-msg--err { color: #ef4444; }
.fx-field-msg--err::before { content: '✕ '; }

/* Disabled submit */
.fx-btn[disabled] {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}
.fx-btn__spinner svg { animation: spin 1s linear infinite; }
@keyframes spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }

/* Trust badges below submit */
.fx-auth-trust {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 14px;
    flex-wrap: wrap;
}
.fx-auth-trust span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: rgba(255,255,255,0.5);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

/* ============ COUNTRY PICKER ============ */
.fx-auth-field:has(.fx-country-dropdown) { position: relative; }
.fx-phone-input { position: relative; }
.fx-phone-input__prefix {
    cursor: pointer;
    border: none;
    color: #fff;
    font-family: inherit;
}
.fx-phone-input__prefix:hover { background: rgba(21,40,75,0.06); }

.fx-country-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: #1a1a22;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
    z-index: 200;
    max-height: 360px;
    display: none;
    flex-direction: column;
    overflow: hidden;
    animation: fxDropFade 0.18s ease;
}
.fx-country-dropdown.open { display: flex; }
@keyframes fxDropFade { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }

.fx-country-dropdown__search {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.5);
    flex-shrink: 0;
}
.fx-country-dropdown__search input {
    flex: 1;
    background: transparent !important;
    border: none !important;
    color: #fff;
    font-size: 14px;
    outline: none;
    padding: 0 !important;
}
.fx-country-dropdown__search input::placeholder { color: rgba(255,255,255,0.3); }

.fx-country-dropdown__list {
    overflow-y: auto;
    flex: 1;
    padding: 6px;
}
.fx-country-dropdown__list::-webkit-scrollbar { width: 6px; }
.fx-country-dropdown__list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 3px; }

.fx-country-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 14px;
    background: transparent;
    border: none;
    border-radius: 10px;
    color: #fff;
    font-family: inherit;
    font-size: 14px;
    cursor: pointer;
    text-align: left;
    transition: background 0.15s;
}
.fx-country-item:hover { background: rgba(255,255,255,0.06); }
.fx-country-item.active { background: rgba(21,40,75,0.1); color: #15284b; }
.fx-country-item__flag { font-size: 20px; line-height: 1; }
.fx-country-item__name { flex: 1; font-weight: 500; }
.fx-country-item__dial { color: rgba(255,255,255,0.5); font-size: 13px; font-variant-numeric: tabular-nums; }
.fx-country-item.active .fx-country-item__dial { color: rgba(21,40,75,0.7); }

.fx-country-empty {
    padding: 24px;
    text-align: center;
    color: rgba(255,255,255,0.4);
    font-size: 13px;
}

/* ============ ANTI-SPAM CAPTCHA ============ */
.fx-captcha {
    margin-top: 12px;
    padding: 12px 14px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
}
.fx-captcha__label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: rgba(255,255,255,0.6);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
    margin-bottom: 8px;
}
.fx-captcha__q {
    margin-left: auto;
    font-size: 16px;
    color: #15284b;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.fx-captcha__row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.fx-captcha__row input[type="number"] {
    flex: 1;
    background: rgba(0,0,0,0.3) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    color: #fff !important;
    padding: 10px 14px !important;
    border-radius: 8px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    text-align: center;
    -moz-appearance: textfield;
}
.fx-captcha__row input[type="number"]::-webkit-outer-spin-button,
.fx-captcha__row input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.fx-captcha__refresh {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.6);
    cursor: pointer;
    width: 38px;
    height: 38px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .2s;
    flex-shrink: 0;
}
.fx-captcha__refresh:hover {
    color: #15284b;
    border-color: rgba(21,40,75,0.3);
    background: rgba(21,40,75,0.06);
    transform: rotate(180deg);
}
.fx-captcha__err {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: #ef4444;
}
.fx-honeypot { display: none !important; }

/* Cloudflare Turnstile / reCAPTCHA wrapper */
.fx-turnstile { margin-top: 12px; min-height: 65px; }
.fx-turnstile .cf-turnstile { display: flex; justify-content: center; }
.fx-turnstile--invisible { margin: 0 !important; min-height: 0 !important; height: 0 !important; overflow: hidden; }
.fx-turnstile--invisible .cf-turnstile { display: none !important; }
.fx-recaptcha { margin-top: 0; }

/* ============ QUALIFYING MODAL ============ */
.fx-qualify {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 20px;
    overflow-y: auto;
}
.fx-qualify.active { display: flex; animation: fxQualifyFade .25s ease; }
@keyframes fxQualifyFade { from { opacity: 0; } to { opacity: 1; } }

.fx-qualify__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.fx-qualify__container {
    position: relative;
    background: linear-gradient(180deg, #16161e 0%, #0f0f15 100%);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 20px;
    width: 100%;
    max-width: 540px;
    max-height: calc(100vh - 40px);
    display: flex;
    flex-direction: column;
    box-shadow: 0 30px 80px rgba(0,0,0,0.6);
    animation: fxQualifyPop .35s cubic-bezier(0.22, 1, 0.36, 1);
    overflow: hidden;
}
@keyframes fxQualifyPop {
    from { opacity: 0; transform: translateY(20px) scale(0.95); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.fx-qualify__close {
    position: absolute;
    top: 16px;
    right: 16px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.6);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .2s;
    z-index: 2;
}
.fx-qualify__close:hover {
    background: rgba(239,68,68,0.15);
    border-color: rgba(239,68,68,0.3);
    color: #ef4444;
}

.fx-qualify__header {
    padding: 28px 28px 20px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    flex-shrink: 0;
}
.fx-qualify__title {
    margin: 0 0 6px;
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.02em;
}
.fx-qualify__sub {
    margin: 0;
    font-size: 14px;
    color: rgba(255,255,255,0.55);
    line-height: 1.5;
}

.fx-qualify__body {
    padding: 24px 28px;
    overflow-y: auto;
    flex: 1;
}
.fx-qualify__body::-webkit-scrollbar { width: 6px; }
.fx-qualify__body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 3px; }

.fx-qualify__form {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.fx-qualify__question { display: flex; flex-direction: column; gap: 10px; }

.fx-qualify__label {
    font-size: 14px;
    font-weight: 600;
    color: rgba(255,255,255,0.85);
    letter-spacing: -0.01em;
}

.fx-qualify__options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.fx-qualify__options--grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.fx-qualify__opt {
    flex: 1;
    min-width: 90px;
    padding: 11px 16px;
    background: rgba(255,255,255,0.03);
    border: 1.5px solid rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.75);
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    border-radius: 11px;
    cursor: pointer;
    transition: all .18s;
    text-align: center;
}
.fx-qualify__opt:hover {
    background: rgba(21,40,75,0.06);
    border-color: rgba(21,40,75,0.3);
    color: #fff;
}
.fx-qualify__opt.active {
    background: rgba(21,40,75,0.12);
    border-color: #15284b;
    color: #15284b;
    font-weight: 600;
}

.fx-qualify__submit {
    width: 100%;
    padding: 16px;
    background: #15284b;
    color: #0a0a0f;
    border: none;
    border-radius: 14px;
    font-family: inherit;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all .2s;
    margin-top: 4px;
}
.fx-qualify__submit:hover:not([disabled]) {
    background: #6b52f0;
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(21,40,75,0.25);
}
.fx-qualify__submit[disabled] {
    opacity: 0.4;
    cursor: not-allowed;
    background: rgba(21,40,75,0.3);
}

.fx-qualify__hint {
    margin: 0;
    text-align: center;
    font-size: 11px;
    color: rgba(255,255,255,0.4);
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    align-self: center;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

@media (max-width: 600px) {
    .fx-qualify__container { max-height: calc(100vh - 20px); border-radius: 16px; }
    .fx-qualify__header { padding: 20px 20px 16px; }
    .fx-qualify__body { padding: 18px 20px; }
    .fx-qualify__title { font-size: 19px; }
    .fx-qualify__options--grid { grid-template-columns: 1fr; }
}



/* ============ PRODUCT PAGES ============ */
.fx-page-hero--product { padding-top: 140px; padding-bottom: 60px; }

/* Showcase: live examples of platforms */
.fx-showcase-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}
@media (max-width: 900px) { .fx-showcase-grid { grid-template-columns: 1fr; } }

.fx-showcase-card {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 22px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: all .3s;
    display: flex;
    flex-direction: column;
}
.fx-showcase-card:hover {
    transform: translateY(-6px);
    border-color: rgba(245,158,11,0.4);
    box-shadow: 0 20px 50px rgba(0,0,0,0.4);
}
.fx-showcase-card__preview {
    height: 220px;
    background: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.fx-showcase-card__preview img {
    max-width: 80%;
    max-height: 100%;
    object-fit: contain;
}
.fx-showcase-card__preview--carsin {
    background: linear-gradient(135deg, #1a1a22 0%, #0f0f15 100%);
}
.fx-showcase-card__mock {
    text-align: center;
    color: #fff;
}
.fx-showcase-card__mock-title {
    display: block;
    font-family: 'Manrope', sans-serif;
    font-size: 38px;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin-bottom: 6px;
}
.fx-showcase-card__mock-sub {
    color: rgba(255,255,255,0.5);
    font-size: 13px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}
.fx-showcase-card__info { padding: 22px 24px 24px; }
.fx-showcase-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    gap: 10px;
}
.fx-showcase-card__top strong {
    font-size: 18px;
    color: #fff;
    font-weight: 700;
    letter-spacing: -0.01em;
}
.fx-showcase-card__country {
    font-size: 12px;
    color: rgba(255,255,255,0.6);
    background: rgba(255,255,255,0.05);
    padding: 4px 10px;
    border-radius: 100px;
    white-space: nowrap;
}
.fx-showcase-card__info p {
    color: rgba(255,255,255,0.6);
    font-size: 14px;
    line-height: 1.6;
    margin: 0 0 14px;
}
.fx-showcase-card__cta {
    display: inline-flex;
    align-items: center;
    color: #15284b;
    font-size: 14px;
    font-weight: 600;
}

/* Use case grid (steps/categories) */
.fx-usecase-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}
@media (max-width: 1024px) { .fx-usecase-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .fx-usecase-grid { grid-template-columns: 1fr; } }

.fx-usecase-card {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 18px;
    padding: 26px 22px;
    transition: all .3s;
}
.fx-usecase-card:hover {
    transform: translateY(-4px);
    background: rgba(255,255,255,0.05);
    border-color: rgba(21,40,75,0.25);
}
.fx-usecase-card__icon {
    display: inline-block;
    font-size: 36px;
    margin-bottom: 14px;
    line-height: 1;
}
.fx-usecase-card h4 {
    font-size: 17px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 8px;
    letter-spacing: -0.01em;
}
.fx-usecase-card p {
    color: rgba(255,255,255,0.55);
    font-size: 13px;
    line-height: 1.5;
    margin: 0;
}

@keyframes fxMigrateFloat {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(40%, 10%); }
}


@keyframes fxStrikeIn {
    to { transform: translateY(-50%) scaleX(1); }
}


@keyframes fxFinalPulse {
    0%, 100% { transform: scale(1); text-shadow: 0 0 32px rgba(34,197,94,0.5); }
    50% { transform: scale(1.04); text-shadow: 0 0 48px rgba(34,197,94,0.8); }
}


/* ============ BLOG INDEX ============ */
.fx-blog-cats { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.fx-blog-cat {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 9px 18px; border-radius: 100px;
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.7); font-size: 14px; font-weight: 600;
    text-decoration: none; transition: all .2s;
}
.fx-blog-cat:hover { background: rgba(255,255,255,0.08); color: #fff; }
.fx-blog-cat.active { background: #15284b; color: #fff; border-color: #15284b; }
.fx-blog-cat span { font-size: 11px; opacity: 0.6; }
.fx-blog-cat.active span { opacity: 0.8; }

.fx-blog-featured {
    display: grid; grid-template-columns: 1.1fr 1fr; gap: 0;
    background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08);
    border-radius: 24px; overflow: hidden; text-decoration: none; color: inherit;
    margin-bottom: 40px; transition: all .35s;
}
.fx-blog-featured:hover { transform: translateY(-4px); border-color: rgba(21,40,75,0.3); box-shadow: 0 24px 60px rgba(0,0,0,0.4); }
.fx-blog-featured__img { position: relative; min-height: 340px; }
.fx-blog-featured__body { padding: 40px; display: flex; flex-direction: column; justify-content: center; }
.fx-blog-featured__tag { display: inline-flex; align-items: center; gap: 6px; color: #15284b; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 14px; }
.fx-blog-featured__tag .lucide-icon { width: 14px; height: 14px; }
.fx-blog-featured__title { font-family: 'Manrope', sans-serif; font-size: clamp(24px, 3vw, 34px); font-weight: 700; color: #fff; line-height: 1.2; letter-spacing: -0.02em; margin: 0 0 14px; }
.fx-blog-featured__desc { font-size: 15px; color: rgba(255,255,255,0.6); line-height: 1.7; margin: 0 0 20px; }
@media (max-width: 860px) { .fx-blog-featured { grid-template-columns: 1fr; } .fx-blog-featured__img { min-height: 220px; } .fx-blog-featured__body { padding: 28px; } }

.fx-blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 980px) { .fx-blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .fx-blog-grid { grid-template-columns: 1fr; } }

.fx-blog-card {
    background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07);
    border-radius: 18px; overflow: hidden; text-decoration: none; color: inherit;
    display: flex; flex-direction: column; transition: all .3s;
}
.fx-blog-card:hover { transform: translateY(-5px); border-color: rgba(21,40,75,0.25); box-shadow: 0 18px 44px rgba(0,0,0,0.35); }
.body--light .fx-blog-card:hover { box-shadow: 0 18px 44px rgba(30,25,70,0.10); }
.fx-blog-card__img { position: relative; height: 180px; }
.fx-blog-card__cat {
    position: absolute; top: 14px; left: 14px;
    background: rgba(0,0,0,0.5); backdrop-filter: blur(8px);
    color: #fff; font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.5px; padding: 5px 12px; border-radius: 100px;
}
.fx-blog-card__body { padding: 22px; display: flex; flex-direction: column; flex: 1; }
.fx-blog-card__title { font-size: 18px; font-weight: 700; color: #fff; line-height: 1.3; letter-spacing: -0.01em; margin: 0 0 10px; }
.fx-blog-card__desc { font-size: 14px; color: rgba(255,255,255,0.55); line-height: 1.6; margin: 0 0 16px; flex: 1; }
.fx-blog-card__meta { display: flex; align-items: center; gap: 8px; font-size: 12px; color: rgba(255,255,255,0.4); }
.fx-blog-card__link { display: inline-flex; align-items: center; gap: 6px; color: #15284b; font-size: 14px; font-weight: 600; }
.fx-blog-card__link .lucide-icon { width: 16px; height: 16px; }

.fx-blog-pagination { margin-top: 44px; display: flex; justify-content: center; }
.fx-blog-pagination nav { display: flex; }
.fx-blog-pagination svg { width: 18px; height: 18px; }
.fx-blog-pagination [role="navigation"] span, .fx-blog-pagination [role="navigation"] a { font-size: 14px; }

.fx-blog-empty { text-align: center; padding: 80px 20px; color: rgba(255,255,255,0.5); }
.fx-blog-empty .lucide-icon { width: 48px; height: 48px; margin-bottom: 16px; opacity: 0.4; }
.fx-blog-empty p { margin: 0 0 20px; }

/* ============ ARTICLE PAGE ============ */
.fx-article__hero { position: relative; padding: 140px 0 60px; overflow: hidden; }
.fx-article__hero-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,10,10,0.4) 0%, rgba(10,10,10,0.85) 100%); }
.fx-article__hero .container { position: relative; z-index: 1; max-width: 820px; }

.fx-breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 13px; color: rgba(255,255,255,0.5); margin-bottom: 22px; flex-wrap: wrap; }
.fx-breadcrumb a { color: rgba(255,255,255,0.6); text-decoration: none; transition: color .2s; }
.fx-breadcrumb a:hover { color: #15284b; }
.fx-breadcrumb .lucide-icon { width: 14px; height: 14px; opacity: 0.5; }

.fx-article__cat { display: inline-block; background: #15284b; color: #fff; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; padding: 6px 14px; border-radius: 100px; margin-bottom: 18px; }
.fx-article__title { font-family: 'Manrope', sans-serif; font-size: clamp(30px, 5vw, 52px); font-weight: 800; color: #fff; line-height: 1.12; letter-spacing: -0.03em; margin: 0 0 24px; }
.fx-article__meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; color: rgba(255,255,255,0.6); font-size: 14px; }
.fx-article__meta time, .fx-article__meta span { display: inline-flex; align-items: center; gap: 6px; }
.fx-article__meta .lucide-icon { width: 15px; height: 15px; }
.fx-article__dot { opacity: 0.4; }
.fx-article__author { display: inline-flex; align-items: center; gap: 10px; }
.fx-article__author-avatar { width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg, #15284b, #4a76fd); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 16px; }
.fx-article__author strong { display: block; color: #fff; font-size: 14px; font-weight: 700; line-height: 1.2; }
.fx-article__author small { color: rgba(255,255,255,0.5); font-size: 12px; }

.fx-article__layout { display: grid; grid-template-columns: 1fr 60px; gap: 40px; max-width: 880px; margin: 0 auto; }
@media (max-width: 768px) { .fx-article__layout { grid-template-columns: 1fr; } }

/* Article prose typography */
.fx-article__content { font-size: 17px; line-height: 1.8; color: rgba(255,255,255,0.78); }
.fx-article__content > * { max-width: 100%; }
.fx-article__content h2 { font-family: 'Manrope', sans-serif; font-size: clamp(24px, 3.5vw, 32px); font-weight: 700; color: #fff; letter-spacing: -0.02em; line-height: 1.25; margin: 48px 0 18px; scroll-margin-top: 100px; }
.fx-article__content h3 { font-family: 'Manrope', sans-serif; font-size: clamp(20px, 2.6vw, 24px); font-weight: 700; color: #fff; letter-spacing: -0.01em; margin: 36px 0 14px; }
.fx-article__content h4 { font-size: 18px; font-weight: 700; color: #fff; margin: 28px 0 12px; }
.fx-article__content p { margin: 0 0 22px; }
.fx-article__content a { color: #15284b; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; transition: color .2s; }
.fx-article__content a:hover { color: #6b52f0; }
.fx-article__content ul, .fx-article__content ol { margin: 0 0 24px; padding-left: 26px; }
.fx-article__content li { margin-bottom: 10px; padding-left: 4px; }
.fx-article__content ul li::marker { color: #15284b; }
.fx-article__content ol li::marker { color: #15284b; font-weight: 700; }
.fx-article__content strong { color: #fff; font-weight: 700; }
.fx-article__content blockquote { border-left: 3px solid #15284b; padding: 4px 0 4px 24px; margin: 28px 0; font-size: 19px; font-style: italic; color: rgba(255,255,255,0.85); background: rgba(21,40,75,0.04); border-radius: 0 8px 8px 0; }
.fx-article__content blockquote p { margin: 0; }
.fx-article__content img { width: 100%; border-radius: 16px; margin: 28px 0; }
.fx-article__content code { background: rgba(255,255,255,0.08); padding: 2px 7px; border-radius: 6px; font-size: 0.88em; font-family: 'SF Mono', Menlo, monospace; color: #15284b; }
.fx-article__content pre { background: rgba(0,0,0,0.4); border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; padding: 20px; overflow-x: auto; margin: 24px 0; }
.fx-article__content pre code { background: none; padding: 0; color: rgba(255,255,255,0.85); }
.fx-article__content hr { border: none; border-top: 1px solid rgba(255,255,255,0.1); margin: 40px 0; }
.fx-article__content table { width: 100%; border-collapse: collapse; margin: 28px 0; font-size: 15px; }
.fx-article__content th, .fx-article__content td { padding: 12px 16px; text-align: left; border-bottom: 1px solid rgba(255,255,255,0.08); }
.fx-article__content th { color: #fff; font-weight: 700; background: rgba(255,255,255,0.03); }
/* Callout box */
.fx-article__content .callout { display: flex; gap: 14px; padding: 18px 22px; background: rgba(21,40,75,0.06); border: 1px solid rgba(21,40,75,0.2); border-radius: 14px; margin: 28px 0; font-size: 15px; }
.fx-article__content .callout strong { color: #15284b; }

.fx-article__tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 36px 0; padding-top: 28px; border-top: 1px solid rgba(255,255,255,0.08); }
.fx-article__tag { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: rgba(255,255,255,0.6); background: rgba(255,255,255,0.04); padding: 6px 12px; border-radius: 8px; }
.fx-article__tag .lucide-icon { width: 13px; height: 13px; opacity: 0.6; }

.fx-article__cta { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; background: linear-gradient(135deg, rgba(21,40,75,0.1), rgba(74,118,253,0.06)); border: 1px solid rgba(21,40,75,0.2); border-radius: 20px; padding: 28px 32px; margin: 40px 0; }
.fx-article__cta strong { display: block; font-size: 19px; color: #fff; margin-bottom: 6px; }
.fx-article__cta p { margin: 0; font-size: 14px; color: rgba(255,255,255,0.65); }
.fx-article__cta .fx-btn { flex-shrink: 0; }

.fx-article__sidebar { position: relative; }
.fx-article__share { position: sticky; top: 100px; display: flex; flex-direction: column; gap: 10px; align-items: center; }
.fx-article__share-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: rgba(255,255,255,0.4); writing-mode: vertical-rl; margin-bottom: 6px; }
.fx-article__share-btn { width: 42px; height: 42px; border-radius: 50%; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.65); transition: all .2s; }
.fx-article__share-btn:hover { background: #15284b; color: #fff; border-color: #15284b; transform: translateY(-2px); }
.fx-article__share-btn .lucide-icon { width: 18px; height: 18px; }
@media (max-width: 768px) {
    .fx-article__share { position: static; flex-direction: row; justify-content: center; margin-top: 30px; }
    .fx-article__share-label { writing-mode: horizontal-tb; margin: 0; align-self: center; }
}

/* ============ ARTICLE FAQ ACCORDION ============ */
.fx-article__faq { margin: 44px 0; padding-top: 32px; border-top: 1px solid rgba(255,255,255,0.08); }
.fx-article__faq > h2 { font-family: 'Manrope', sans-serif; font-size: clamp(22px, 3vw, 28px); font-weight: 700; color: #fff; letter-spacing: -0.02em; margin: 0 0 20px; }
.fx-faq-item { border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; margin-bottom: 12px; background: rgba(255,255,255,0.02); overflow: hidden; transition: all .25s; }
.fx-faq-item[open] { background: rgba(21,40,75,0.04); border-color: rgba(21,40,75,0.2); }
.fx-faq-item summary { list-style: none; cursor: pointer; padding: 18px 22px; display: flex; align-items: center; justify-content: space-between; gap: 14px; font-size: 16px; font-weight: 600; color: #fff; user-select: none; }
.fx-faq-item summary::-webkit-details-marker { display: none; }
.fx-faq-item summary .lucide-icon { width: 20px; height: 20px; color: #15284b; flex-shrink: 0; transition: transform .25s; }
.fx-faq-item[open] summary .lucide-icon { transform: rotate(180deg); }
details.fx-faq-item > .fx-faq-item__a { padding: 0 22px 20px; color: rgba(255,255,255,0.68); line-height: 1.7; font-size: 15px; max-height: none; overflow: visible; }
.fx-faq-item__a p { margin: 0; }

/* ============================================================ */
/* HERO — ideasoft-style split layout (TicarX dark/lime theme)  */
/* ============================================================ */
.fx-hero--split { padding: 150px 0 90px; }
.fx-hero--split .fx-hero__bg-overlay { background: linear-gradient(105deg, rgba(10,10,10,0.94) 0%, rgba(10,10,10,0.85) 45%, rgba(10,10,10,0.6) 70%, rgba(10,10,10,0.85) 100%); }
.fx-hero--split .fx-hero__bg video { opacity: 0.5; }

.fx-hero__grid {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 40px;
    align-items: center;
}
.fx-hero__left { text-align: left; animation: fxUp 1s cubic-bezier(0.16,1,0.3,1) 0.1s both; }
.fx-hero--split .fx-hero__title { font-size: clamp(38px, 5.2vw, 66px); margin-bottom: 18px; font-weight: 500; }
.fx-hero--split .fx-hero__title em { display: inline; }
.fx-hero--split .fx-hero__sub { margin-left: 0; max-width: 500px; font-size: 17px; margin-bottom: 28px; }
.fx-hero--split .fx-hero__btns { justify-content: flex-start; }

/* Small feature cards row (KARGO/REKLAM/AI style) */
.fx-hero__cards { display: flex; gap: 12px; margin-bottom: 30px; flex-wrap: wrap; }
.fx-hero-card {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 14px 16px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: 14px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    min-width: 120px;
    flex: 1;
    transition: all .25s;
}
.fx-hero-card:hover { transform: translateY(-3px); border-color: rgba(21,40,75,0.3); background: rgba(21,40,75,0.05); }
.fx-hero-card__icon { width: 32px; height: 32px; border-radius: 9px; background: rgba(21,40,75,0.12); color: #15284b; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 8px; }
.fx-hero-card__icon .lucide-icon { width: 17px; height: 17px; }
.fx-hero-card strong { font-size: 12px; font-weight: 700; color: #fff; text-transform: uppercase; letter-spacing: 0.6px; }
.fx-hero-card span { font-size: 12px; color: rgba(255,255,255,0.55); line-height: 1.35; }

.fx-hero__trust { display: flex; gap: 22px; margin-top: 22px; flex-wrap: wrap; }
.fx-hero__trust span { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: rgba(255,255,255,0.6); font-weight: 500; }
.fx-hero__trust .lucide-icon { width: 15px; height: 15px; color: #15284b; }

/* RIGHT visual — floating cards */
.fx-hero__right { position: relative; min-height: 480px; animation: fxUp 1.2s cubic-bezier(0.16,1,0.3,1) 0.35s both; }
.fx-hero__visual { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.fx-hero__orb {
    position: absolute;
    width: 380px; height: 380px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(21,40,75,0.16) 0%, rgba(74,118,253,0.08) 45%, transparent 70%);
    filter: blur(20px);
    animation: fxOrbPulse 6s ease-in-out infinite;
}
@keyframes fxOrbPulse { 0%,100% { transform: scale(1); opacity: 0.8; } 50% { transform: scale(1.1); opacity: 1; } }
.fx-hero__rings {
    position: absolute;
    width: 440px; height: 440px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.06);
    box-shadow: 0 0 0 60px rgba(255,255,255,0.03), 0 0 0 120px rgba(255,255,255,0.02);
}

/* Central dashboard card */
.fx-hero-dash {
    position: relative;
    z-index: 3;
    width: 300px;
    background: linear-gradient(160deg, rgba(26,26,34,0.95), rgba(15,15,21,0.95));
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 20px;
    padding: 22px;
    box-shadow: 0 30px 70px rgba(0,0,0,0.5);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    animation: fxFloat 5s ease-in-out infinite;
}
.fx-hero-dash__head { display: flex; align-items: center; gap: 8px; font-size: 12px; color: rgba(255,255,255,0.5); text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; margin-bottom: 10px; }
.fx-hero-dash__dot { width: 8px; height: 8px; border-radius: 50%; background: #15284b; box-shadow: 0 0 10px #15284b; }
.fx-hero-dash__amount { font-family: 'Manrope', sans-serif; font-size: 38px; font-weight: 800; color: #fff; letter-spacing: -0.02em; line-height: 1; }
.fx-hero-dash__amount span { color: #15284b; }
.fx-hero-dash__chart { height: 56px; margin: 14px 0 10px; }
.fx-hero-dash__chart svg { width: 100%; height: 100%; }
.fx-hero-dash__foot { display: flex; align-items: center; justify-content: space-between; font-size: 12px; color: rgba(255,255,255,0.45); }
.fx-hero-dash__up { display: inline-flex; align-items: center; gap: 4px; color: #22c55e; font-weight: 700; }
.fx-hero-dash__up .lucide-icon { width: 14px; height: 14px; }

/* Floating cards */
.fx-float-card {
    position: absolute;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 12px 15px;
    background: rgba(26,26,34,0.9);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 14px;
    box-shadow: 0 16px 40px rgba(0,0,0,0.4);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}
.fx-float-card__icon { width: 38px; height: 38px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.fx-float-card__icon .lucide-icon { width: 19px; height: 19px; }
.fx-float-card strong { display: block; font-size: 18px; font-weight: 800; color: #fff; line-height: 1; letter-spacing: -0.01em; }
.fx-float-card span { font-size: 11px; color: rgba(255,255,255,0.5); }
.fx-float-card--sites { top: 8%; left: -4%; animation: fxFloat 5.5s ease-in-out 0.3s infinite; }
.fx-float-card--orders { bottom: 20%; left: -8%; animation: fxFloat 6s ease-in-out 0.6s infinite; }
.fx-float-card--setup { bottom: 6%; right: 2%; animation: fxFloat 5.2s ease-in-out 0.9s infinite; }

.fx-float-badge {
    position: absolute;
    z-index: 4;
    top: 14%; right: -2%;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    background: linear-gradient(135deg, #15284b, #0f203e);
    color: #fff;
    border-radius: 100px;
    font-size: 14px;
    font-weight: 700;
    box-shadow: 0 12px 32px rgba(21,40,75,0.3);
    animation: fxFloat 4.6s ease-in-out 0.2s infinite;
}
.fx-float-badge .lucide-icon { width: 16px; height: 16px; }
.fx-float-badge strong { font-weight: 800; }

@keyframes fxFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

/* Responsive */
@media (max-width: 980px) {
    .fx-hero__grid { grid-template-columns: 1fr; gap: 20px; }
    .fx-hero__left { text-align: center; }
    .fx-hero--split .fx-hero__sub { margin-left: auto; margin-right: auto; }
    .fx-hero--split .fx-hero__btns { justify-content: center; }
    .fx-hero__cards { justify-content: center; }
    .fx-hero__trust { justify-content: center; }
    .fx-hero__right { min-height: 420px; margin-top: 30px; }
}
@media (max-width: 560px) {
    .fx-hero--split { padding: 120px 0 60px; }
    .fx-hero__cards { flex-direction: row; gap: 8px; }
    .fx-hero-card { min-width: 0; padding: 11px 10px; }
    .fx-hero-card strong { font-size: 10px; }
    .fx-hero-card span { font-size: 10px; }
    .fx-hero__right { min-height: 380px; transform: scale(0.86); }
    .fx-hero-dash { width: 260px; }
    .fx-float-card--sites { left: 0; }
    .fx-float-card--orders { left: -2%; }
}

/* ============================================================ */
/* LIGHT THEME (ideasoft style) — scoped to body--light         */
/* Purple #15284b accent, white cards, light lavender bg        */
/* ============================================================ */
.body--light {
    background: linear-gradient(180deg, #f1eefe 0%, #f8f7ff 30%, #ffffff 60%) !important;
    color: #56556e;
}
.body--light main { background: transparent; }

/* ---- Header (white, dark links, purple CTA) ---- */
.body--light .header { background: transparent; }
.body--light .header.scrolled, .body--light .header--solid { background: rgba(255,255,255,0.9) !important; backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%); box-shadow: 0 1px 0 rgba(20,20,50,0.06); }
.body--light .header__link { color: #3a3952; }
.body--light .header__link:hover, .body--light .header__link.active { color: #15284b; }
.body--light .header__logo-img { filter: none; }
.body--light .btn--header-ghost { color: #3a3952; }
.body--light .btn--header-ghost:hover { color: #15284b; background: rgba(91,63,232,0.06); }
.body--light .btn--white { background: #15284b !important; color: #fff !important; }
.body--light .btn--white:hover { background: #4a30d0 !important; }
.body--light .header__burger span { background: #16152e; }

/* ---- Buttons ---- */
.body--light .fx-btn--accent { background: #15284b; color: #fff; }
.body--light .fx-btn--accent:hover { background: #4a30d0; box-shadow: 0 10px 30px rgba(91,63,232,0.3); }
.body--light .fx-btn--glass { background: #fff; color: #16152e; border: 1px solid #e2e0f0; }
.body--light .fx-btn--glass:hover { background: #f5f3ff; border-color: #cfc9f5; }

/* ---- Headings & text ---- */
.body--light .fx-h2 { color: #16152e; }
.body--light .fx-h2 em { color: #15284b; font-family: 'Manrope', sans-serif; font-style: normal; font-weight: 800; }
.body--light .fx-tag { color: #7a6ff0; font-weight: 600; }
.body--light .fx-subtext, .body--light .fx-desc-sm { color: #6a6982; }
.body--light .fx-center-head { color: #16152e; }

/* ---- HERO (light) ---- */
.body--light .fx-hero--split { padding: 140px 0 80px; }
.body--light .fx-hero__bg video { display: none; }
.body--light .fx-hero__bg { background: radial-gradient(1000px circle at 75% 30%, rgba(91,63,232,0.1), transparent 55%), radial-gradient(700px circle at 15% 20%, rgba(120,90,255,0.07), transparent 50%); }
.body--light .fx-hero__bg-overlay { display: none; }
.body--light .fx-hero__badge { background: #e8edf6; border: 1px solid #ddd7fb; color: #15284b; }
.body--light .fx-hero__title { color: #16152e; font-weight: 600; }
.body--light .fx-hero__title em { font-family: 'Manrope', sans-serif; font-style: normal; font-weight: 800; color: #15284b; }
.body--light .fx-hero__sub { color: #5f5e77; }
.body--light .fx-hero-card { background: #fff; border: 1px solid #ececf5; box-shadow: 0 6px 22px rgba(20,20,50,0.05); }
.body--light .fx-hero-card:hover { border-color: #d6cffa; box-shadow: 0 10px 30px rgba(91,63,232,0.12); background: #fff; }
.body--light .fx-hero-card__icon { background: #e8edf6; color: #15284b; }
.body--light .fx-hero-card strong { color: #16152e; }
.body--light .fx-hero-card span { color: #7c7b90; }
.body--light .fx-hero__trust span { color: #6a6982; }
.body--light .fx-hero__trust .lucide-icon { color: #15284b; }

/* Hero visual — light floating cards */
.body--light .fx-hero__orb { background: radial-gradient(circle, rgba(91,63,232,0.14) 0%, rgba(120,90,255,0.07) 45%, transparent 70%); }
.body--light .fx-hero__rings { border-color: rgba(91,63,232,0.1); box-shadow: 0 0 0 60px rgba(91,63,232,0.04), 0 0 0 120px rgba(91,63,232,0.025); }
.body--light .fx-hero-dash { background: #fff; border: 1px solid #ececf5; box-shadow: 0 30px 70px rgba(40,30,90,0.14); }
.body--light .fx-hero-dash__head { color: #8a89a0; }
.body--light .fx-hero-dash__dot { background: #15284b; box-shadow: 0 0 10px rgba(91,63,232,0.6); }
.body--light .fx-hero-dash__amount { color: #16152e; }
.body--light .fx-hero-dash__amount span { color: #15284b; }
.body--light .fx-hero-dash__foot { color: #9a99ac; }
.body--light .fx-float-card { background: #fff; border: 1px solid #ececf5; box-shadow: 0 16px 40px rgba(40,30,90,0.12); }
.body--light .fx-float-card strong { color: #16152e; }
.body--light .fx-float-card span { color: #8a89a0; }
.body--light .fx-float-badge { background: linear-gradient(135deg, #15284b, #0f203e); color: #fff; box-shadow: 0 12px 32px rgba(91,63,232,0.3); }

/* ---- Sections / blocks ---- */
.body--light .fx-block--accent-bg { background: #f5f3ff; border-color: #e8edf6; }
.body--light .body--dark { background: transparent; }

/* ---- Generic cards → white ---- */
.body--light .fx-feature, .body--light .fx-marketing-card, .body--light .fx-blog-card, .body--light .fx-usecase-card, .body--light .fx-showcase-card, .body--light .fx-up-card, .body--light .fx-up-feature, .body--light .fx-stat-item, .body--light .fx-price-card {
    background: #fff;
    border: 1px solid #ececf3;
    box-shadow: 0 4px 22px rgba(20,20,50,0.05);
}
.body--light .fx-feature:hover, .body--light .fx-marketing-card:hover, .body--light .fx-blog-card:hover, .body--light .fx-usecase-card:hover, .body--light .fx-showcase-card:hover {
    border-color: #d6cffa;
    box-shadow: 0 16px 40px rgba(91,63,232,0.12);
    background: #fff;
}
.body--light .fx-feature__title, .body--light .fx-marketing-card__title, .body--light .fx-blog-card__title, .body--light .fx-usecase-card h4, .body--light .fx-up-card h4, .body--light .fx-stat-item__num { color: #16152e; }
.body--light .fx-feature__desc, .body--light .fx-marketing-card__desc, .body--light .fx-blog-card__desc, .body--light .fx-usecase-card p, .body--light .fx-up-card p, .body--light .fx-stat-item__label { color: #6a6982; }
.body--light .fx-marketing-card__title em { color: #15284b; }

/* icon tiles → soft purple by default (keep inline-colored ones) */
.body--light .fx-feature__icon { background: #e8edf6; color: #15284b; }
.body--light .fx-marketing-card__icon { color: #15284b; }


/* Stats bar */
.body--light .fx-stats-bar .fx-stat-item { background: #fff; }

/* Client logos */
.body--light .fx-logos-label { color: #8a89a0; }
.body--light .fx-client-logo { background: #fff; border: 1px solid #ececf3; }
.body--light .fx-client-logo img { filter: grayscale(1) opacity(0.6) invert(0); }
.body--light .fx-client-logo:hover img { filter: none; }

/* Blog cards */
.body--light .fx-blog-card__meta { color: #9a99ac; }
.body--light .fx-blog-card__cat { background: rgba(21,40,75,0.92); color:#fff; }

/* CTA blocks */
.body--light .fx-cta-mini { background: #f5f3ff; border: 1px solid #e6e1fb; }
.body--light .fx-cta-mini__title { color: #16152e; }
.body--light .fx-cta-box { background: linear-gradient(135deg, #efecff, #f7f5ff); border: 1px solid #e2ddfa; }
.body--light .fx-cta-box__title { color: #16152e; }
.body--light .fx-cta-box__desc { color: #5f5e77; }

/* Up-feature (payment/edu) */
.body--light .fx-up-feature__title { color: #16152e; }
.body--light .fx-up-feature__sub { color: #6a6982; }
.body--light .fx-up-feature__badge { background: #e8edf6; color: #15284b; }
.body--light .fx-up-card__icon { color: #15284b; }
.body--light .fx-up-card h4 { color: #16152e; }


/* Callback section */
.body--light .fx-callback-section { background: #fff; border: 1px solid #ececf3; box-shadow: 0 4px 24px rgba(20,20,50,0.05); }
.body--light .fx-callback-section__title { color: #16152e; }
.body--light .fx-callback-section__title em { color: #15284b; }
.body--light .fx-callback-section__form input,
.body--light .fx-callback-section__form textarea,
.body--light .fx-phone-input { background: #f7f6fc; border-color: #e6e4f0; color: #16152e; }
.body--light .fx-callback-section__form input::placeholder { color: #9a99ac; }
.body--light .fx-callback-submit { background: #15284b; color: #fff; }
.body--light .fx-callback-submit:hover { background: #4a30d0; }

/* ============ LIGHT THEME — remaining home sections ============ */
/* Stats bar */
.body--light .fx-stats-bar { background: #fff; border-top: 1px solid #ececf3; border-bottom: 1px solid #ececf3; }
.body--light .fx-stat-item__num { color: #16152e; }
.body--light .fx-stat-item__label { color: #7c7b90; }

/* Client logos row */
.body--light .fx-clients-grid { }
.body--light .fx-client-logo--natural { }

/* Dashboard mockup (split) */
.body--light .fx-split { }
.body--light .fx-dash-card { background: #fff; border: 1px solid #ececf3; box-shadow: 0 20px 50px rgba(40,30,90,0.1); }
.body--light .fx-dash-card * { color: inherit; }
.body--light .fx-split__title, .body--light .fx-split-row h2, .body--light .fx-split-row h3 { color: #16152e; }
.body--light .fx-split-row p, .body--light .fx-split p { color: #6a6982; }

/* Kargo section */
.body--light .fx-kargo-card { background: #fff; border: 1px solid #ececf3; box-shadow: 0 6px 24px rgba(20,20,50,0.05); }
.body--light .fx-kargo-card--highlight { background: linear-gradient(160deg, #f3f0ff, #fff); border-color: #ddd6f9; }
.body--light .fx-kargo-card strong, .body--light .fx-kargo-card h3, .body--light .fx-kargo-card h4 { color: #16152e; }
.body--light .fx-kargo-card p, .body--light .fx-kargo-card span { color: #6a6982; }
.body--light .fx-kargo-card__price { color: #15284b; }
.body--light .fx-kargo-card__icon { background: #e8edf6; color: #15284b; }

/* Payment providers */
.body--light .fx-provider-card { background: #fff; border: 1px solid #ececf3; box-shadow: 0 6px 24px rgba(20,20,50,0.05); }
.body--light .fx-provider-card:hover { border-color: #d6cffa; box-shadow: 0 16px 40px rgba(91,63,232,0.1); }
.body--light .fx-provider-card h3, .body--light .fx-provider-card h4, .body--light .fx-provider-card strong { color: #16152e; }
.body--light .fx-provider-card p, .body--light .fx-provider-card span, .body--light .fx-provider-card li { color: #6a6982; }
.body--light .fx-provider-card__logo { background: #f5f3ff; }

/* Partner banks */
.body--light .fx-bank-card { background: #fff; border: 1px solid #ececf3; box-shadow: 0 6px 20px rgba(20,20,50,0.05); }
.body--light .fx-bank-card:hover { border-color: #d6cffa; }
.body--light .fx-bank-card span, .body--light .fx-bank-card strong { color: #16152e; }

/* Mobile app section (split-row) */
.body--light .fx-app-stat strong { color: #16152e; }
.body--light .fx-app-stat span { color: #7c7b90; }
.body--light .fx-check-item { color: #56556e; }
.body--light .fx-check-item .lucide-icon, .body--light .fx-check-item svg { color: #15284b; }
.body--light .fx-check-item__check { background: #e8edf6; color: #15284b; }

/* Our mobile apps */
.body--light .fx-app-card { background: #fff; border: 1px solid #ececf3; box-shadow: 0 6px 24px rgba(20,20,50,0.05); }
.body--light .fx-app-card:hover { border-color: #d6cffa; box-shadow: 0 16px 40px rgba(91,63,232,0.1); }
.body--light .fx-app-card strong, .body--light .fx-app-card h3, .body--light .fx-app-card h4 { color: #16152e; }
.body--light .fx-app-card p, .body--light .fx-app-card span, .body--light .fx-app-card small { color: #6a6982; }
.body--light .fx-app-card .lucide-icon { color: #8a89a0; }
.body--light .fx-app-card:hover .lucide-icon { color: #15284b; }
.body--light .fx-app-badge { background: #16152e; color: #fff; border-color: #16152e; }

/* Payment methods logos */
.body--light .fx-pay-logo-card { background: #fff; border: 1px solid #ececf3; box-shadow: 0 4px 16px rgba(20,20,50,0.05); }
.body--light .fx-pay-logo-card img { filter: none; }

/* How it works — steps */
.body--light .fx-step-card { background: #fff; border: 1px solid #ececf3; box-shadow: 0 6px 24px rgba(20,20,50,0.05); }
.body--light .fx-step-card:hover { border-color: #d6cffa; box-shadow: 0 16px 40px rgba(91,63,232,0.1); }
.body--light .fx-step-card h3, .body--light .fx-step-card h4, .body--light .fx-step-card strong { color: #16152e; }
.body--light .fx-step-card p { color: #6a6982; }
.body--light .fx-step-card__num { background: #e8edf6; color: #15284b; }

/* FAQ */
.body--light .fx-faq-item { background: #fff; border: 1px solid #ececf3; }
.body--light .fx-faq-item[open], .body--light .fx-faq-item.active { background: #f7f5ff; border-color: #ddd6f9; }
.body--light .fx-faq-item__q, .body--light .fx-faq-item summary { color: #16152e; }
.body--light .fx-faq-item__q .lucide-icon, .body--light .fx-faq-item summary .lucide-icon { color: #15284b; }
.body--light .fx-faq-item__a, .body--light .fx-faq-item__a p { color: #6a6982; }

/* Big brand watermark text */
.body--light .fx-bigbrand { color: #16152e; }
.body--light .fx-bigbrand span, .body--light .fx-bigbrand em { color: #15284b; }

/* Marketing email mockup */
.body--light .fx-marketing-mockup { background: #f7f6fc; border: 1px solid #e8e6f2; }
.body--light .fx-marketing-mockup__header { color: #6a6982; }
.body--light .fx-marketing-mockup__stats strong { color: #16152e; }
.body--light .fx-marketing-mockup__stats span { color: #8a89a0; }
.body--light .fx-marketing-mockup__bar { background: #e8e6f2; }
.body--light .fx-marketing-card__features li { color: #56556e; }
.body--light .fx-marketing-card__features li .lucide-icon { color: #12a570; }

/* Callback avatars / rows */
.body--light .fx-callback-banner-success { background: #e7f9f0; color: #12a570; border: 1px solid #bff0d8; }
.body--light .fx-callback-section__terms, .body--light .fx-callback-section__terms span { color: #6a6982; }
.body--light .fx-callback-section__hours { color: #6a6982; }
.body--light .fx-callback-section__user strong { color: #16152e; }
.body--light .fx-callback-section__user span { color: #8a89a0; }

/* Phone mockups stay dark (device frame) but soften shadow */
.body--light .fx-iphone { box-shadow: 0 30px 70px rgba(40,30,90,0.18); }

.body--light .fx-price-card__list li .lucide-icon { color: #12a570; }

/* Generic: any leftover muted white text in light sections */
.body--light .fx-block h2:not([class]), .body--light .fx-block h3:not([class]) { color: #16152e; }

/* Pricing preview badges */
.body--light .fx-price-card__badge { background: #15284b; color: #fff; }
.body--light .fx-price-card--popular { border-color: #c9bef7 !important; background: linear-gradient(160deg, #f3f0ff, #fff) !important; }
.body--light .fx-price-card__amount { color: #16152e; }
.body--light .fx-price-card__period { color: #8a89a0; }
.body--light .fx-price-card__list li { color: #56556e; border-color: #f0eef8; }

/* ============ LIGHT THEME — final lime→purple cleanup ============ */
.body--light .fx-step-card__number { background: #e8edf6; color: #15284b; }
.body--light .fx-faq-item__num { background: #e8edf6; color: #15284b; }
.body--light .fx-cta-box__badge { background: #e8edf6; color: #15284b; }
.body--light .fx-kargo-price__val { color: #12a570; }
.body--light .fx-callback-section__hours { background: #e7f9f0; border-color: #bff0d8; color: #12a570; }
.body--light .fx-callback-section__hours strong, .body--light .fx-callback-section__hours span { color: #12a570; }
.body--light .fx-marketing-card__icon { background: #e8edf6; }
.body--light .fx-callback-avatar { border-color: #fff; }

/* Any accent-colored small badges/pills default → purple in light */
.body--light .fx-check-item .fx-check-item__check { background: #e8edf6; color: #15284b; }
.body--light .fx-pay-logos--brand .fx-pay-logo-card { background: #fff; }

/* footer stays dark (intentional) — ensure its accents remain readable */
.body--light .footer { background: #0f0e1a; }

/* ============ FOUNDER STORY BLOCK ============ */
.fx-founder-block { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 44px; align-items: center; max-width: 1000px; margin: 0 auto; }
.fx-founder-block__media { position: relative; border-radius: 24px; overflow: hidden; box-shadow: 0 30px 70px rgba(40,30,90,0.18); }
.fx-founder-block__media img { width: 100%; display: block; aspect-ratio: 4/5; object-fit: cover; }
.fx-founder-block__badge { position: absolute; left: 16px; bottom: 16px; right: 16px; background: rgba(255,255,255,0.92); backdrop-filter: blur(10px); border-radius: 14px; padding: 12px 16px; }
.fx-founder-block__badge strong { display: block; font-size: 16px; color: #16152e; font-weight: 700; }
.fx-founder-block__badge span { font-size: 12px; color: #6a6982; }
.fx-founder-block__text blockquote { margin: 0 0 18px; font-family: 'Manrope', sans-serif; font-size: clamp(20px, 2.4vw, 26px); font-weight: 600; line-height: 1.4; color: #16152e; letter-spacing: -0.01em; }
.body--light .fx-founder-block__text blockquote { color: #16152e; }
.fx-founder-block__text > p { font-size: 15px; line-height: 1.7; color: #6a6982; margin: 0 0 22px; }
.fx-founder-block__stats { display: flex; gap: 32px; margin-bottom: 24px; flex-wrap: wrap; }
.fx-founder-block__stats strong { display: block; font-family: 'Manrope', sans-serif; font-size: 28px; font-weight: 800; color: #15284b; letter-spacing: -0.02em; }
.fx-founder-block__stats span { font-size: 13px; color: #8a89a0; }
@media (max-width: 820px) { .fx-founder-block { grid-template-columns: 1fr; gap: 28px; } .fx-founder-block__media { max-width: 340px; margin: 0 auto; } }

/* ============ TESTIMONIALS ============ */
.fx-testimonials-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 900px) { .fx-testimonials-grid { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; } }
.fx-testimonial { background: #fff; border: 1px solid #ececf3; border-radius: 20px; padding: 28px; box-shadow: 0 6px 24px rgba(20,20,50,0.05); transition: all .3s; }
.fx-testimonial:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(91,63,232,0.1); border-color: #d6cffa; }
.fx-testimonial__stars { display: flex; gap: 3px; margin-bottom: 16px; }
.fx-testimonial__stars .lucide-icon { width: 18px; height: 18px; color: #f5a623; fill: #f5a623; }
.fx-testimonial > p { font-size: 15px; line-height: 1.7; color: #3a3952; margin: 0 0 22px; }
.fx-testimonial__author { display: flex; align-items: center; gap: 12px; }
.fx-testimonial__avatar { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, #15284b, #0f203e); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 18px; }
.fx-testimonial__author strong { display: block; font-size: 15px; color: #16152e; font-weight: 700; }
.fx-testimonial__author span { font-size: 13px; color: #8a89a0; }

/* Dark theme fallback for testimonials/founder (other pages) */
.body--dark .fx-testimonial { background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.08); }
.body--dark .fx-testimonial > p { color: rgba(255,255,255,0.75); }
.body--dark .fx-testimonial__author strong { color: #fff; }
.body--dark .fx-founder-block__text blockquote { color: #fff; }
.body--dark .fx-founder-block__badge { background: rgba(20,20,28,0.9); }
.body--dark .fx-founder-block__badge strong { color: #fff; }

/* Client logos → clean row like ideasoft */
.body--light .fx-logos-label { color: #8a89a0; }

/* ================================================================= */
/* IDEASOFT EXACT DESIGN TOKENS — extracted from ideasoft.com.tr     */
/* Font: Geist | Purple #15284b | Text #233844 | Border #E2E4E9      */
/* ================================================================= */
:root {
    --is-purple: #15284b;
    --is-purple-dark: #0f203e;
    --is-purple-soft: #e8ecf4;
    --is-text: #233844;
    --is-heading: #000000;
    --is-muted: #6b7a85;
    --is-border: #e2e4e9;
    --is-alt-bg: #fafafa;
    --is-radius: 16px;
}

/* ---------- Typography: Geist everywhere ---------- */
.body--light,
.body--light .fx-h2,
.body--light .fx-hero__title,
.body--light h1, .body--light h2, .body--light h3, .body--light h4, .body--light h5,
.body--light p, .body--light span, .body--light a, .body--light li,
.body--light button, .body--light input, .body--light textarea, .body--light label {
    font-family: 'Geist', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
.body--light { font-size: 15.2px; color: var(--is-text); background: #fff !important; }

/* Headings: light weight like ideasoft (400), bold only on accent span */
.body--light .fx-hero__title {
    font-family: 'Geist', system-ui, sans-serif;
    font-size: clamp(34px, 4.6vw, 50px);
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--is-heading);
}
.body--light .fx-hero__title em {
    font-family: 'Geist', system-ui, sans-serif;
    font-style: normal;
    font-weight: 700;
    color: var(--is-purple);
}
.body--light .fx-h2 {
    font-family: 'Geist', system-ui, sans-serif;
    font-size: clamp(26px, 3.2vw, 40px);
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--is-heading);
}
.body--light .fx-h2 em { font-weight: 700; color: var(--is-heading); font-style: normal; }
.body--light .fx-subtext, .body--light .fx-desc-sm { font-size: 15.2px; color: var(--is-muted); line-height: 1.65; }
.body--light .fx-tag { color: var(--is-purple); font-size: 14px; font-weight: 500; }

/* ---------- Section rhythm (ideasoft: 60-80px) ---------- */
.body--light .fx-block { padding: 80px 0; }
.body--light .fx-block--sm { padding: 60px 0; }
.body--light .fx-block--accent-bg { background: var(--is-alt-bg); border-color: var(--is-border); }
.body--light .fx-center-head { margin-bottom: 44px; max-width: 640px; }

/* ---------- Cards: 16px radius, 1px #E2E4E9 border, subtle shadow ---------- */
.body--light .fx-feature, .body--light .fx-marketing-card, .body--light .fx-blog-card, .body--light .fx-usecase-card, .body--light .fx-showcase-card, .body--light .fx-up-card, .body--light .fx-up-feature, .body--light .fx-price-card, .body--light .fx-kargo-card, .body--light .fx-provider-card, .body--light .fx-bank-card, .body--light .fx-step-card, .body--light .fx-app-card, .body--light .fx-testimonial, .body--light .fx-hero-card, .body--light .fx-float-card, .body--light .fx-hero-dash, .body--light .fx-faq-item, .body--light .fx-client-logo {
    background: #fff;
    border: 1px solid var(--is-border);
    border-radius: var(--is-radius);
    box-shadow: 0 2px 8px -2px rgba(20,30,60,0.06), 0 4px 16px rgba(20,30,60,0.04);
}
.body--light .fx-feature:hover, .body--light .fx-marketing-card:hover, .body--light .fx-usecase-card:hover, .body--light .fx-step-card:hover, .body--light .fx-app-card:hover, .body--light .fx-testimonial:hover, .body--light .fx-provider-card:hover, .body--light .fx-kargo-card:hover {
    border-color: #cfc9f5;
    box-shadow: 0 6px 20px -4px rgba(21,40,75,0.12), 0 12px 32px rgba(21,40,75,0.08);
    transform: translateY(-3px);
}

/* Text inside cards */
.body--light .fx-feature__title, .body--light .fx-marketing-card__title, .body--light .fx-usecase-card h4, .body--light .fx-up-card h4, .body--light .fx-step-card h3, .body--light .fx-step-card h4, .body--light .fx-provider-card h3, .body--light .fx-app-card strong, .body--light .fx-kargo-card strong {
    color: var(--is-heading); font-weight: 600; font-family: 'Geist', sans-serif;
}
.body--light .fx-feature__desc, .body--light .fx-marketing-card__desc, .body--light .fx-usecase-card p, .body--light .fx-up-card p, .body--light .fx-step-card p, .body--light .fx-provider-card p, .body--light .fx-app-card p {
    color: var(--is-muted); font-size: 14.5px; line-height: 1.6;
}
.body--light .fx-marketing-card__title em { color: var(--is-purple); font-style: normal; font-weight: 700; }

/* ---------- Buttons: pill, purple ---------- */
.body--light .fx-btn { font-family: 'Geist', sans-serif; font-weight: 500; border-radius: 100px; }
.body--light .fx-btn--accent { background: var(--is-purple); color: #fff; }
.body--light .fx-btn--accent:hover { background: var(--is-purple-dark); box-shadow: 0 8px 24px rgba(21,40,75,0.28); }
.body--light .fx-btn--glass { background: #fff; color: var(--is-heading); border: 1px solid var(--is-border); }
.body--light .fx-btn--glass:hover { background: #f7f7fa; border-color: #d3d5dd; }
.body--light .btn--white { background: var(--is-purple) !important; border-radius: 100px; }
.body--light .btn--white:hover { background: var(--is-purple-dark) !important; }

/* ---------- Accents → exact purple ---------- */
.body--light .fx-hero__badge { background: var(--is-purple-soft); border: 1px solid #ddd7fb; color: var(--is-purple); border-radius: 100px; }
.body--light .fx-feature__icon,
.body--light .fx-hero-card__icon,
.body--light .fx-up-card__icon,
.body--light .fx-step-card__number,
.body--light .fx-faq-item__num,
.body--light .fx-cta-box__badge,
.body--light .fx-marketing-card__icon { background: var(--is-purple-soft); color: var(--is-purple); }
.body--light .fx-hero__trust .lucide-icon,
.body--light .fx-check-item .lucide-icon { color: var(--is-purple); }
.body--light .fx-hero-dash__dot { background: var(--is-purple); box-shadow: 0 0 10px rgba(21,40,75,0.5); }
.body--light .fx-hero-dash__amount span { color: var(--is-purple); }
.body--light .fx-float-badge { background: var(--is-purple); box-shadow: 0 10px 28px rgba(21,40,75,0.3); }
.body--light .fx-founder-block__stats strong { color: var(--is-purple); }
.body--light .fx-testimonial__avatar { background: var(--is-purple); }
.body--light .fx-price-card__badge { background: var(--is-purple); }
.body--light .fx-header__link:hover { color: var(--is-purple); }
.body--light .header__link:hover, .body--light .header__link.active { color: var(--is-purple); }

/* ---------- Hero background: subtle lavender wash (ideasoft) ---------- */
.body--light .fx-hero--split { padding: 40px 0 70px; background: linear-gradient(180deg, #f4f2fe 0%, #f9f8ff 55%, #fff 100%); }
.body--light .fx-hero__bg { background: radial-gradient(900px circle at 78% 35%, rgba(21,40,75,0.07), transparent 55%); }

/* ---------- Hero person photo ---------- */
.fx-hero__person {
    position: absolute;
    z-index: 2;
    right: 4%;
    bottom: 0;
    width: 66%;
    max-width: 380px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    pointer-events: none;
}
.fx-hero__person img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 24px;
    filter: drop-shadow(0 24px 50px rgba(30,20,80,0.2));
    mask-image: linear-gradient(180deg, #000 82%, transparent 100%);
    -webkit-mask-image: linear-gradient(180deg, #000 82%, transparent 100%);
}
/* re-stack floating cards around the person */
.body--light .fx-hero-dash { z-index: 4; margin-right: 32%; margin-top: 8%; }
.body--light .fx-float-card--sites { top: 4%; left: -2%; z-index: 5; }
.body--light .fx-float-card--orders { bottom: 26%; left: -6%; z-index: 5; }
.body--light .fx-float-card--setup { bottom: 4%; right: -2%; z-index: 5; }
.body--light .fx-float-badge { top: 10%; right: 0; z-index: 5; }

@media (max-width: 980px) {
    .fx-hero__person { position: relative; right: auto; width: 58%; margin: 0 auto; }
    .body--light .fx-hero-dash { margin-right: 0; margin-top: 0; }
}
@media (max-width: 560px) { .fx-hero__person { display: none; } }

/* ---------- Header ---------- */
.body--light .header__link { font-family: 'Geist', sans-serif; font-size: 15px; font-weight: 400; color: var(--is-text); }
.body--light .header.scrolled, .body--light .header--solid { background: rgba(255,255,255,0.92) !important; box-shadow: 0 1px 0 var(--is-border); }

/* ---------- Client logos: clean, no card look ---------- */
.body--light .fx-client-logo { box-shadow: none; border-color: transparent; background: transparent; }
.body--light .fx-client-logo:hover { border-color: transparent; }

/* ---------- Stats bar ---------- */
.body--light .fx-stats-bar { background: var(--is-alt-bg); border-top: 1px solid var(--is-border); border-bottom: 1px solid var(--is-border); }
.body--light .fx-stat-item { background: transparent; border: none; box-shadow: none; }
.body--light .fx-stat-item__num { color: var(--is-purple); font-family: 'Geist', sans-serif; font-weight: 700; }
.body--light .fx-stat-item__label { color: var(--is-muted); }

/* ---------- CTA blocks ---------- */
.body--light .fx-cta-mini, .body--light .fx-cta-box { background: var(--is-purple-soft); border: 1px solid #ddd7fb; border-radius: var(--is-radius); }
.body--light .fx-cta-mini__title, .body--light .fx-cta-box__title { color: var(--is-heading); font-family: 'Geist', sans-serif; font-weight: 600; }

/* ============ HERO LAYOUT FIXES (spacing, person, badges) ============ */
.body--light .fx-hero--split { padding: 130px 0 80px; }

/* Person photo: portrait crop, anchored bottom-right behind cards */
.fx-hero__person {
    right: 0;
    bottom: 0;
    width: 62%;
    max-width: 340px;
    aspect-ratio: 3/4;
    border-radius: 20px;
    overflow: hidden;
}
.fx-hero__person img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 22%;
    border-radius: 20px;
    mask-image: linear-gradient(180deg, #000 88%, transparent 100%);
    -webkit-mask-image: linear-gradient(180deg, #000 88%, transparent 100%);
}

/* Re-place floating cards so nothing collides with header or person */
.body--light .fx-hero__right { min-height: 460px; }
.body--light .fx-hero-dash { margin: 0; position: absolute; left: 0; top: 26%; width: 270px; }
.body--light .fx-float-card--sites { top: 4%; left: 4%; }
.body--light .fx-float-card--orders { bottom: 20%; left: 0; }
.body--light .fx-float-card--setup { bottom: 6%; right: 0; }
.body--light .fx-float-badge { top: 2%; right: 4%; }

@media (max-width: 1200px) {
    .body--light .fx-hero-dash { width: 240px; top: 30%; }
    .fx-hero__person { max-width: 290px; }
}
@media (max-width: 980px) {
    .body--light .fx-hero--split { padding: 120px 0 60px; }
    .body--light .fx-hero__right { min-height: 440px; }
    .body--light .fx-hero-dash { position: relative; left: auto; top: auto; margin: 0 auto; }
    .fx-hero__person { position: absolute; right: 2%; bottom: 0; width: 46%; }
}

/* ============ IDEASOFT GEOMETRY: container 1320, compact hero ============ */
.body--light .container { max-width: 1320px; }

/* Hero: ideasoft is only ~444px tall — compact it */
.body--light .fx-hero--split { padding: 118px 0 56px; }
.body--light .fx-hero__grid { gap: 30px; align-items: center; }
.body--light .fx-hero__title { font-size: clamp(32px, 3.9vw, 50px); margin-bottom: 14px; }
.body--light .fx-hero__sub { font-size: 16px; margin-bottom: 22px; max-width: 470px; }
.body--light .fx-hero__badge { margin-bottom: 16px; font-size: 13px; padding: 7px 16px; }
.body--light .fx-hero__cards { margin-bottom: 22px; gap: 10px; }
.body--light .fx-hero-card { padding: 12px 14px; }
.body--light .fx-hero__trust { margin-top: 16px; }
.body--light .fx-hero__right { min-height: 400px; }
.body--light .fx-hero-dash { width: 250px; top: 22%; padding: 18px; }
.body--light .fx-hero-dash__amount { font-size: 32px; }
.body--light .fx-hero-dash__chart { height: 44px; margin: 10px 0 8px; }
.fx-hero__person { max-width: 300px; }

/* Tighter section rhythm to match ideasoft's 10.4k page */
.body--light .fx-block { padding: 64px 0; }
.body--light .fx-block--sm { padding: 52px 0; }
.body--light .fx-center-head { margin-bottom: 36px; }

/* Alternate section backgrounds like ideasoft (white / #FAFAFA) */
.body--light main > div:nth-of-type(4),
.body--light main > div:nth-of-type(8),
.body--light main > div:nth-of-type(12),
.body--light main > div:nth-of-type(15) { background: var(--is-alt-bg); }

@media (max-width: 980px) {
    .body--light .fx-hero--split { padding: 105px 0 48px; }
    .body--light .fx-hero__right { min-height: 380px; }
}

/* ============ HERO FINAL SPACING FIX ============ */
.body--light .fx-hero--split { padding: 150px 0 40px; }
.body--light .fx-hero__grid { align-items: center; }
/* kill the dead space under hero content */
.body--light .fx-hero__right { min-height: 430px; display: flex; align-items: center; }
.body--light .fx-hero__visual { position: relative; inset: auto; width: 100%; height: 430px; }
/* first section after hero shouldn't add another big gap */
.body--light .fx-hero + .fx-block--sm { padding-top: 34px; }

/* ================================================================= */
/* IDEASOFT HERO — EXACT: topbar gradient, white header, card layout */
/* ================================================================= */

/* --- Topbar: purple→black gradient, 45px, centered --- */
/* Fon qradiyenti qara idi və `!important` daşıyırdı, ona görə palitraya
   keçid buradan yan keçmişdi: zolaq navy görünmür, qara qalırdı. Düz
   rəng qoyulur ki, hero-nun üstünə çıxanda şəffaflıq da işləsin. */
.body--light .topbar {
    background: #0f203e;
    height: 45px;
    display: flex;
    align-items: center;
    border: none;
}
.body--light .topbar__inner { justify-content: center; gap: 18px; }
.body--light .topbar__left, .body--light .topbar__right { gap: 14px; }
.body--light .topbar span, .body--light .topbar a, .body--light .topbar strong { color: #fff; font-size: 14px; }
.body--light .topbar__phone { color: #fff; font-weight: 600; }
.body--light .topbar__cta {
    border: 1px solid rgba(255,255,255,0.55);
    border-radius: 100px;
    padding: 6px 16px;
    color: #fff;
    background: transparent;
}
.body--light .topbar__cta:hover { background: rgba(255,255,255,0.12); }
/* Dil düyməsi dolğusuz qalır: zolaqda yeganə çərçivəli element zəng
   düyməsidir, qalanları sadə mətndir. */
.body--light .lang-switcher__btn { color: rgba(255,255,255,.86); border: 0; background: none; }
.body--light .lang-switcher__btn:hover { color: #fff; }

/* --- Header: solid WHITE bar (not transparent) --- */
.body--light .header {
    background: #fff !important;
    height: 84px;
    box-shadow: none;
    border-bottom: 1px solid transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.body--light .header.scrolled { box-shadow: 0 1px 12px rgba(20,30,60,0.07); }
.body--light .header__link { color: #233844; font-size: 16px; font-weight: 400; }
.body--light .btn--white { background: #15284b !important; color: #fff !important; border-radius: 50px; padding: 12px 30px; font-size: 16px; font-weight: 400; }
.body--light .btn--header-ghost { color: #233844; font-size: 16px; font-weight: 400; }

/* --- Hero background: soft mint→lavender wash like ideasoft --- */
.body--light .fx-hero--split {
    padding: 60px 0 40px;
    background:
        radial-gradient(900px circle at 12% 20%, rgba(3,255,234,0.10), transparent 50%),
        radial-gradient(1000px circle at 82% 45%, rgba(21,40,75,0.09), transparent 55%),
        linear-gradient(180deg, #fbfbff 0%, #f7f6ff 60%, #ffffff 100%);
}
.body--light .fx-hero__bg { display: none; }

/* --- Hero title: 2 lines, part bold purple --- */
.body--light .fx-hero__title { font-size: clamp(32px, 3.6vw, 46px); font-weight: 400; line-height: 1.22; color: #16152e; }
.body--light .fx-hero__title em { font-weight: 700; color: #15284b; }
.body--light .fx-hero__sub { font-size: 17px; color: #3d4d59; line-height: 1.55; }

/* --- Feature cards: icon + LABEL inline, desc below, corner orb --- */
.body--light .fx-hero__cards { gap: 12px; margin-bottom: 26px; }
.body--light .fx-hero-card {
    position: relative;
    overflow: hidden;
    padding: 14px 16px 15px;
    border-radius: 14px;
    background: rgba(255,255,255,0.72);
    border: 1px solid rgba(255,255,255,0.9);
    box-shadow: 0 4px 18px rgba(40,30,90,0.07);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.body--light .fx-hero-card::after {
    content:'';
    position:absolute; top:-18px; right:-18px;
    width:64px; height:64px; border-radius:50%;
    background: radial-gradient(circle, rgba(21,40,75,0.16), transparent 70%);
    pointer-events:none;
}
.body--light .fx-hero-card__top { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; }
.body--light .fx-hero-card__icon {
    width: 28px; height: 28px; border-radius: 8px;
    background: linear-gradient(140deg, #dcd8fb, #e8ecf4);
    color: #15284b;
    display: inline-flex; align-items: center; justify-content: center;
    margin: 0; flex-shrink: 0;
}
.body--light .fx-hero-card__icon .lucide-icon { width: 15px; height: 15px; }
.body--light .fx-hero-card strong {
    font-size: 13px; font-weight: 700; color: #16152e;
    text-transform: uppercase; letter-spacing: 0.9px;
}
.body--light .fx-hero-card__desc {
    display: block; font-size: 13.5px; font-weight: 600;
    color: #16152e; line-height: 1.35;
}

/* --- CTA button: exact ideasoft geometry --- */
.body--light .fx-hero__btns .fx-btn--accent {
    background: #15284b; color: #fff; border-radius: 50px;
    padding: 14px 30px; font-size: 16px; font-weight: 500;
}
.body--light .fx-hero__btns .fx-btn--glass { border-radius: 50px; padding: 14px 28px; font-size: 16px; }

/* --- Trust line --- */
.body--light .fx-hero__trust span { font-size: 13.5px; color: #56666f; }

/* ============ HERO OFFSET + LOGO ON WHITE HEADER ============ */
/* header is fixed: topbar 45 + header 84 = 129px → clear it */
.body--light .fx-hero--split { padding-top: 172px; }

/* White-text logo is invisible on white header → render it dark */
.body--light .header__logo-img {
    filter: brightness(0) saturate(100%);
    height: 30px;
    width: auto;
}
.body--light .header__logo { display: inline-flex; align-items: center; }

@media (max-width: 980px) { .body--light .fx-hero--split { padding-top: 158px; } }
@media (max-width: 560px) { .body--light .fx-hero--split { padding-top: 146px; } }

/* ============ FOUNDER PHOTO — BIGGER ============ */
.body--light .fx-founder-block {
    grid-template-columns: 1.15fr 1fr;
    gap: 52px;
    max-width: 1180px;
}
.body--light .fx-founder-block__media { border-radius: 26px; }
.body--light .fx-founder-block__media img {
    aspect-ratio: 3 / 4;          /* taller frame → less crop, person larger */
    object-position: 50% 42%;      /* focus on his face/torso */
}
.body--light .fx-founder-block__badge { left: 20px; right: 20px; bottom: 20px; padding: 14px 18px; border-radius: 16px; }
.body--light .fx-founder-block__badge strong { font-size: 17px; }
.body--light .fx-founder-block__text blockquote { font-size: clamp(19px, 2.1vw, 24px); }

@media (max-width: 820px) {
    .body--light .fx-founder-block { grid-template-columns: 1fr; }
    .body--light .fx-founder-block__media { max-width: 420px; }
}

/* ============ FOUNDER: zoom INSIDE the frame (frame size unchanged) ============ */
.body--light .fx-founder-block { grid-template-columns: 1fr 1fr; gap: 46px; max-width: 1120px; }
.body--light .fx-founder-block__media {
    overflow: hidden;              /* crop the zoom */
    aspect-ratio: 3 / 4;
    max-height: 620px;
}
.body--light .fx-founder-block__media img {
    width: 100%; height: 100%;
    aspect-ratio: auto;
    object-fit: cover;
    object-position: 46% 55%;
    transform: scale(1.55);        /* zoom in on him */
    transform-origin: 46% 58%;
}

/* ============ FOUNDER: balance photo height with text ============ */
.body--light .fx-founder-block { align-items: center; }
.body--light .fx-founder-block__media {
    aspect-ratio: auto;
    height: 480px;                 /* was 620 → matches text column better */
    max-height: none;
}
.body--light .fx-founder-block__media img {
    transform: scale(1.35);
    transform-origin: 47% 52%;
    object-position: 47% 50%;
}
.body--light .fx-founder-block__badge { bottom: 16px; left: 16px; right: 16px; padding: 12px 16px; }
.body--light .fx-founder-block__badge strong { font-size: 16px; }
.body--light .fx-founder-block__badge span { font-size: 12px; }

@media (max-width: 820px) {
    .body--light .fx-founder-block__media { height: 420px; max-width: 100%; }
}

/* ============ FOUNDER: wide frame (as before) + person fits fully ============ */
.body--light .fx-founder-block { grid-template-columns: 1.15fr 1fr; gap: 48px; max-width: 1180px; }
.body--light .fx-founder-block__media { height: 520px; }
.body--light .fx-founder-block__media img {
    transform: scale(1.02);        /* almost no zoom — wide frame already shows him big */
    transform-origin: 45% 40%;
    object-position: 45% 34%;      /* pull crop UP so head has room, torso visible */
}
/* badge sits lower & narrower so it doesn't cover his chest */
.body--light .fx-founder-block__badge { left: 18px; right: auto; min-width: 250px; bottom: 18px; }

@media (max-width: 820px) {
    .body--light .fx-founder-block { grid-template-columns: 1fr; }
    .body--light .fx-founder-block__media { height: 440px; }
}

/* ============ FOUNDER: RESTORE portrait frame + zoomed person (approved look) ============ */
.body--light .fx-founder-block { grid-template-columns: 1fr 1fr; gap: 46px; max-width: 1120px; align-items: center; }
.body--light .fx-founder-block__media {
    height: auto;
    aspect-ratio: 3 / 4;
    max-height: 620px;
    overflow: hidden;
    border-radius: 26px;
}
.body--light .fx-founder-block__media img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: 46% 55%;
    transform: scale(1.55);
    transform-origin: 46% 58%;
}
/* badge back to full width across the frame */
.body--light .fx-founder-block__badge {
    left: 20px; right: 20px; bottom: 20px;
    min-width: 0; width: auto;
    padding: 14px 18px; border-radius: 16px;
}
.body--light .fx-founder-block__badge strong { font-size: 17px; }
.body--light .fx-founder-block__badge span { font-size: 12px; }

@media (max-width: 820px) {
    .body--light .fx-founder-block { grid-template-columns: 1fr; }
    .body--light .fx-founder-block__media { max-width: 420px; height: auto; margin: 0 auto; }
}

/* ============ HERO: no person photo — center the floating card cluster ============ */
.body--light .fx-hero__visual { justify-content: center; }
.body--light .fx-hero-dash { position: relative; top: 0; margin: 0 auto; width: 300px; }
.body--light .fx-float-card--sites { top: 4%; left: 2%; }
.body--light .fx-float-card--orders { bottom: 12%; left: 0; }
.body--light .fx-float-card--setup { bottom: 6%; right: 4%; }
.body--light .fx-float-badge { top: 8%; right: 4%; }
.body--light .fx-hero__orb { width: 420px; height: 420px; }
.body--light .fx-hero__rings { width: 460px; height: 460px; }

/* ============ REFERENCES CAROUSEL (ideasoft style) ============ */
.fx-refs__nav { display: flex; justify-content: flex-end; gap: 10px; margin-bottom: 14px; }
.fx-refs__arrow {
    width: 40px; height: 40px; border-radius: 50%;
    background: transparent; border: none;
    color: #16152e; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: all .2s;
}
.fx-refs__arrow:hover { background: #f0eefb; color: #15284b; }
.fx-refs__arrow .lucide-icon { width: 24px; height: 24px; }

.fx-refs {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    padding: 6px 2px 18px;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.fx-refs::-webkit-scrollbar { display: none; }

.fx-ref-card {
    flex: 0 0 calc((100% - 80px) / 5);   /* 5 visible like ideasoft */
    min-width: 210px;
    height: 200px;
    background: #fff;
    border: 1px solid #eceaf4;
    border-radius: 16px;
    box-shadow: 0 4px 18px rgba(30,25,70,0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28px;
    scroll-snap-align: start;
    transition: all .28s;
}
.fx-ref-card:hover {
    transform: translateY(-4px);
    border-color: #d8d1f7;
    box-shadow: 0 14px 34px rgba(21,40,75,0.12);
}
.fx-ref-card img {
    max-width: 100%;
    max-height: 76px;
    object-fit: contain;
    filter: none;              /* FULL COLOUR — no grayscale */
    opacity: 1;
}
.body--light .fx-ref-card img { filter: none; opacity: 1; }

.fx-refs__cta { display: flex; justify-content: center; margin-top: 18px; }

@media (max-width: 1100px) { .fx-ref-card { flex: 0 0 calc((100% - 60px) / 4); } }
@media (max-width: 860px)  { .fx-ref-card { flex: 0 0 calc((100% - 40px) / 3); height: 170px; } }
@media (max-width: 620px)  { .fx-ref-card { flex: 0 0 calc((100% - 20px) / 2); height: 150px; padding: 20px; } }

/* ================================================================ */
/* HERO 2 — BENTO GRID (original)                                   */
/* ================================================================ */
.fx-hero2 { position: relative; padding: 168px 0 70px; overflow: hidden; }
.fx-hero2__bg {
    position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background:
        radial-gradient(760px circle at 18% 8%, rgba(3,255,234,0.12), transparent 55%),
        radial-gradient(900px circle at 82% 18%, rgba(21,40,75,0.13), transparent 55%),
        linear-gradient(180deg, #fbfbff 0%, #f7f6ff 55%, #ffffff 100%);
}
/* no grid lines */
.fx-hero2 .container { position: relative; z-index: 2; }

/* Head */
.fx-hero2__head { text-align: center; max-width: 780px; margin: 0 auto 44px; }
.fx-hero2__badge {
    display: inline-flex; align-items: center; gap: 9px;
    background: #fff; border: 1px solid #e6e2f8; color: #15284b;
    font-size: 13.5px; font-weight: 600; padding: 8px 18px; border-radius: 100px;
    box-shadow: 0 4px 14px rgba(30,25,70,0.05); margin-bottom: 22px;
}
.fx-hero2__pulse { width: 8px; height: 8px; border-radius: 50%; background: #12a570; box-shadow: 0 0 0 0 rgba(18,165,112,.5); animation: fxDotPulse 2s infinite; }
@keyframes fxDotPulse { 0%{box-shadow:0 0 0 0 rgba(18,165,112,.45)} 70%{box-shadow:0 0 0 9px rgba(18,165,112,0)} 100%{box-shadow:0 0 0 0 rgba(18,165,112,0)} }
.fx-hero2__title {
    font-family: 'Geist','Manrope',sans-serif;
    font-size: clamp(34px, 4.6vw, 60px); font-weight: 500; line-height: 1.1;
    letter-spacing: -0.03em; color: #16152e; margin: 0 0 18px;
}
.fx-hero2__title em { font-style: normal; font-weight: 700; color: #15284b; }
.fx-hero2__sub { font-size: 17.5px; line-height: 1.6; color: #4b5563; margin: 0 auto 28px; max-width: 620px; }
.fx-hero2__btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.fx-hero2__btns .fx-btn--accent { background:#15284b; border-radius:50px; padding:15px 32px; font-size:16px; font-weight:500; }
.fx-hero2__btns .fx-btn--accent:hover { background:#0f203e; box-shadow:0 12px 32px rgba(21,40,75,.3); }
.fx-hero2__btns .fx-btn--glass { background:#fff; color:#16152e; border:1px solid #e2e0f0; border-radius:50px; padding:15px 30px; font-size:16px; }
.fx-hero2__trust { display:flex; gap:24px; justify-content:center; margin-top:20px; flex-wrap:wrap; }
.fx-hero2__trust span { display:inline-flex; align-items:center; gap:7px; font-size:13.5px; color:#6b7280; }
.fx-hero2__trust .lucide-icon { width:16px; height:16px; color:#15284b; }


/* Storefront mock */
.fx-store { flex:1; display:flex; flex-direction:column; background:#f7f7fc; }
.fx-store__bar { display:flex; align-items:center; gap:6px; padding:11px 14px; background:#fff; border-bottom:1px solid #eeedf6; }
.fx-store__bar > span { width:8px; height:8px; border-radius:50%; background:#e0dfeb; }
.fx-store__url { margin-left:10px; display:inline-flex; align-items:center; gap:6px; font-size:11px; color:#8b8aa3; background:#f4f4fa; padding:4px 12px; border-radius:100px; }
.fx-store__url .lucide-icon { width:11px; height:11px; }
.fx-store__body { flex:1; padding:14px 16px 16px; }
.fx-store__nav { display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.fx-store__nav strong { font-size:12px; letter-spacing:1px; color:#16152e; }
.fx-store__nav > span { width:26px; height:5px; border-radius:3px; background:#e4e3ef; }
.fx-store__nav .lucide-icon { width:15px; height:15px; margin-left:auto; color:#15284b; }
.fx-store__grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.fx-store__prod b { display:block; height:6px; border-radius:3px; background:#e4e3ef; margin:7px 0 4px; }
.fx-store__prod s { display:block; height:6px; width:52%; border-radius:3px; background:#efeefa; }
.fx-store__img { height:60px; border-radius:9px; }
.fx-store__img--1 { background:linear-gradient(140deg,#dfe0ff,#c9c6fb); }
.fx-store__img--2 { background:linear-gradient(140deg,#ffe6ef,#ffd0e2); }
.fx-store__img--3 { background:linear-gradient(140deg,#d9f7ee,#bff0dd); }
.fx-store__img--4 { background:linear-gradient(140deg,#fff0d9,#ffe1b3); }

/* Mini phone */
.fx-mini-phone { width:104px; height:172px; border-radius:18px; background:#16152e; padding:7px; position:relative; box-shadow:0 12px 28px rgba(20,20,50,.22); }
.fx-mini-phone__notch { position:absolute; top:9px; left:50%; transform:translateX(-50%); width:32px; height:5px; border-radius:5px; background:#3a3952; }
.fx-mini-phone__screen { height:100%; background:#fff; border-radius:13px; padding:16px 9px 9px; display:flex; flex-direction:column; gap:7px; }
.fx-mini-phone__row { display:flex; align-items:center; gap:6px; }
.fx-mini-phone__av { width:16px; height:16px; border-radius:50%; background:linear-gradient(135deg,#15284b,#0f203e); }
.fx-mini-phone__row b { flex:1; height:5px; border-radius:3px; background:#e8e7f2; }
.fx-mini-phone__tile { flex:1; border-radius:9px; background:linear-gradient(140deg,#eceaff,#dcd8fb); }
.fx-mini-phone__pair { display:flex; gap:6px; }
.fx-mini-phone__pair i { flex:1; height:26px; border-radius:7px; background:#f2f1fa; }

/* Live rows */
.fx-live-dot { width:7px; height:7px; border-radius:50%; background:#12a570; animation:fxDotPulse 2s infinite; }
.fx-live-row { display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid #f2f1f8; }
.fx-live-row:last-child { border-bottom:none; }
.fx-live-row__ic { width:32px; height:32px; border-radius:9px; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; }
.fx-live-row__ic .lucide-icon { width:16px; height:16px; }
.fx-live-row div { flex:1; min-width:0; }
.fx-live-row b { display:block; font-size:13px; color:#16152e; font-weight:700; }
.fx-live-row s { display:block; font-size:11.5px; color:#8b8aa3; text-decoration:none; }
.fx-live-row em { font-style:normal; font-size:13px; font-weight:700; color:#15284b; white-space:nowrap; }

/* Payment chips */
.fx-pay-chips { display:flex; flex-wrap:wrap; gap:7px; }
.fx-pay-chip { font-size:11.5px; font-weight:700; color:#3a3952; background:#f4f4fb; border:1px solid #eceaf6; padding:6px 11px; border-radius:8px; }

/* Responsive */
@media (max-width: 640px) {
    .fx-hero2 { padding: 150px 0 50px; }
    .fx-hero2__btns .fx-btn { width: 100%; justify-content: center; }
}

/* hero2: no badge → tighten top spacing */
.fx-hero2__head { padding-top: 6px; }

/* ============ BENTO: real payment logos ============ */
.fx-pay-logos2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    flex: 1;
    align-content: center;
}
.fx-pay-logo2 {
    display: flex; align-items: center; justify-content: center;
    background: #f7f7fc;
    border: 1px solid #edecf6;
    border-radius: 10px;
    padding: 10px 8px;
    min-height: 42px;
    transition: all .22s;
}
.fx-pay-logo2:hover { background: #fff; border-color: #d9d2f8; box-shadow: 0 4px 12px rgba(21,40,75,.1); }
.fx-pay-logo2 img { max-width: 100%; max-height: 22px; object-fit: contain; display: block; }

.fx-appicons {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;
    flex: 1; align-content: center;
}
.fx-appicon {
    display: block; border-radius: 16px; overflow: hidden;
    aspect-ratio: 1; position: relative;
    box-shadow: 0 4px 14px rgba(20,20,50,.12);
    border: 1px solid rgba(20,20,50,.06);
    transition: transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s;
}
.fx-appicon:hover { transform: translateY(-3px) scale(1.03); box-shadow: 0 12px 26px rgba(21,40,75,.22); }
.fx-appicon img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fx-appicons__all {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    font-size: 12.5px; font-weight: 600; color: #15284b; text-decoration: none;
}
.fx-appicons__all .lucide-icon { width: 14px; height: 14px; }
.fx-appicons__all:hover { text-decoration: underline; }


.fx-store__body { display: flex; flex-direction: column; }
.fx-store__grid { align-content: start; }
.fx-store__grid--rows { flex: 1; }

.fx-store__img--5 { background:linear-gradient(140deg,#e3f0ff,#c9dcfb); }
.fx-store__img--6 { background:linear-gradient(140deg,#f0e6ff,#dfd0fb); }
.fx-store__img--7 { background:linear-gradient(140deg,#e6fbf4,#c6f2e3); }
.fx-store__img--8 { background:linear-gradient(140deg,#fff2e6,#ffdcc2); }

/* ============ BENTO: real site screenshot in browser frame ============ */
.fx-store { display: flex; flex-direction: column; height: 100%; background: #fff; text-decoration: none; }
.fx-store__shot { flex: 1; overflow: hidden; position: relative; background: #f4f4fa; }
.fx-store__shot img {
    width: 100%; height: 100%;
    object-fit: cover; object-position: top center;
    display: block;
    transition: transform 3.5s cubic-bezier(.2,.6,.3,1);
}

.fx-showcase {
    display: flex; flex-direction: column; height: 100%;
    text-decoration: none; background: #fff; overflow: hidden;
}
.fx-showcase__top { padding: 22px 24px 14px; }
.fx-showcase__kicker {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 11.5px; font-weight: 800; letter-spacing: .9px; text-transform: uppercase;
    color: #15284b; margin-bottom: 7px;
}
.fx-showcase__kicker::before {
    content:''; width: 7px; height: 7px; border-radius: 50%;
    background: #12a570; box-shadow: 0 0 0 0 rgba(18,165,112,.5); animation: fxDotPulse 2s infinite;
}
.fx-showcase__title {
    display: block;
    font-family: 'Geist','Manrope',sans-serif;
    font-size: clamp(17px, 1.5vw, 22px); font-weight: 700; line-height: 1.25;
    letter-spacing: -0.02em; color: #16152e;
}
.fx-showcase__img { flex: 1; overflow: hidden; position: relative; background: #f4f4fa; }
.fx-showcase__img img {
    width: 100%; height: 100%; object-fit: cover; object-position: center top;
    display: block; transition: transform 3.5s cubic-bezier(.2,.6,.3,1);
}

@media (max-width: 640px) {
    .fx-showcase__top { padding: 18px 18px 12px; }
    .fx-showcase__title { font-size: 17px; }
}

/* showcase copy refinements */
.fx-showcase__top { padding: 20px 24px 14px; }
.fx-showcase__title { font-size: clamp(17px, 1.45vw, 21px); line-height: 1.28; margin-bottom: 6px; }
.fx-showcase__title em { font-style: normal; font-weight: 800; color: #15284b; }
.fx-showcase__desc { margin: 0; font-size: 13.5px; line-height: 1.5; color: #6b7280; }

/* showcase kicker: trophy icon instead of green dot */
.fx-showcase__kicker::before { content: none !important; }
.fx-showcase__kicker .lucide-icon { width: 15px; height: 15px; color: #15284b; }

/* ============ PRICING: monthly-first (ideasoft model) ============ */
.fx-price-card__amount { display: flex; align-items: baseline; gap: 3px; margin-bottom: 8px; }
.fx-price-card__cur { font-size: .5em; font-weight: 700; margin-left: 2px; }
.fx-price-card__per { font-size: 15px; font-weight: 500; color: #8b8aa3; margin-left: 4px; }
.body--light .fx-price-card__per { color: #8b8aa3; }

.fx-price-card__total { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.fx-price-card__total s { font-size: 14px; color: #a9a8bb; text-decoration: line-through; }
.fx-price-card__total strong { font-size: 17px; font-weight: 800; color: #15284b; letter-spacing: -.01em; }
.body--dark .fx-price-card__total s { color: rgba(255,255,255,.35); }
.body--dark .fx-price-card__total strong { color: #15284b; }

.fx-price-card__note { font-size: 12.5px; color: #8b8aa3; line-height: 1.45; margin-bottom: 16px; }
.body--dark .fx-price-card__note { color: rgba(255,255,255,.45); }

/* light theme: plan names were inheriting dark-theme white */
.body--light .fx-price-card h4 { color: #16152e; }
.body--light .fx-price-card--popular h4 { color: #16152e; }

/* ============ PRICING CARD — ideasoft structure ============ */
.fx-price-card { display: flex; flex-direction: column; }
.fx-price-card h4 { font-size: 22px; font-weight: 700; margin-bottom: 4px; }
.body--light .fx-price-card h4 { color: #15284b; }
.fx-price-card__tagline { font-size: 14px; color: #6b7280; margin: 0 0 16px; line-height: 1.4; min-height: 38px; }
.body--dark .fx-price-card__tagline { color: rgba(255,255,255,.5); }

.fx-price-card__amount { display: flex; align-items: baseline; gap: 2px; margin-bottom: 6px; font-size: 40px; }
.fx-price-card__cur { font-size: .45em; font-weight: 700; margin-left: 3px; }
.fx-price-card__per { font-size: 14px; font-weight: 500; color: #8b8aa3; margin-left: 5px; }

.fx-price-card__total { display: flex; align-items: baseline; gap: 9px; margin-bottom: 8px; }
.fx-price-card__total s { font-size: 14px; color: #a9a8bb; }
.fx-price-card__total strong { font-size: 17px; font-weight: 800; color: #15284b; }

.fx-price-card__note { font-size: 12.5px; color: #8b8aa3; line-height: 1.45; margin-bottom: 16px; }

/* outlined call button */
.fx-price-card__call {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; padding: 12px 16px; margin-bottom: 14px;
    border: 1px solid #ddd8f6; border-radius: 50px;
    color: #15284b; font-size: 14.5px; font-weight: 600; text-decoration: none;
    background: #fff; transition: all .2s;
}
.fx-price-card__call:hover { background: #f4f2ff; border-color: #c5bcf3; }
.fx-price-card__call .lucide-icon { width: 16px; height: 16px; }
.body--dark .fx-price-card__call { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.14); color: #fff; }

/* discount chips */
.fx-price-card__deals { display: flex; align-items: center; gap: 7px; margin-bottom: 18px; flex-wrap: wrap; }
.fx-deal { font-size: 11.5px; font-weight: 800; padding: 5px 11px; border-radius: 6px; letter-spacing: .3px; }
.fx-deal--main { background: #15284b; color: #fff; }

/* list heading */
.fx-price-card__listhead {
    font-size: 14.5px; font-weight: 700; color: #16152e;
    margin-bottom: 12px; padding-top: 4px;
}
.body--dark .fx-price-card__listhead { color: #fff; }

.fx-price-card__list { flex: 1; margin-bottom: 20px; }
.fx-price-card__list li { border-bottom: none; padding: 6px 0; display: flex; align-items: flex-start; gap: 9px; }
.fx-price-card__list li .lucide-icon { width: 17px; height: 17px; color: #15284b; flex-shrink: 0; margin-top: 1px; }
.body--dark .fx-price-card__list li .lucide-icon { color: #15284b; }

.fx-price-card__cta { width: 100%; justify-content: center; margin-top: auto; border-radius: 50px; }

/* ============ LIGHT: FAQ readable ============ */
.body--light .fx-faq-item__a,
.body--light .fx-faq-item__a-inner,
.body--light .fx-faq-item__a p { color: #4b5563 !important; }
.body--light .fx-faq-item__q { color: #16152e !important; }
.body--light .fx-faq-item__num { color: #15284b !important; background: #e8edf6; }
.body--light .fx-faq-item__icon { color: #15284b !important; }
.body--light .fx-faq-item { background: #fff; border: 1px solid #ecebf5; }
.body--light .fx-faq-item.active { background: #f6f4ff; border-color: #ddd6f9; }

/* any stray white text inside light sections */
.body--light .fx-block p:not([class]) { color: #4b5563; }
.body--light .fx-testimonial > p { color: #3a3952 !important; }


/* ================================================================= */
/* LIGHT THEME — all inner pages                                     */
/* ================================================================= */

/* Page hero (features / pricing / blog / contact / premium / product) */
.body--light .fx-page-hero {
    background: radial-gradient(900px circle at 20% 10%, rgba(3,255,234,.10), transparent 55%),
                radial-gradient(1000px circle at 80% 20%, rgba(21,40,75,.10), transparent 55%),
                linear-gradient(180deg,#fbfbff 0%,#f7f6ff 60%,#fff 100%);
    padding-top: 170px; border-bottom: none;
}
.body--light .fx-page-hero__center .fx-hero__title,
.body--light .fx-page-hero h1 { color: #16152e; }
.body--light .fx-page-hero .fx-hero__title em { color: #15284b; font-style: normal; font-weight: 700; }
.body--light .fx-page-hero .fx-hero__sub { color: #4b5563; }
.body--light .fx-hero__badge { background:#fff; border:1px solid #e6e2f8; color:#15284b; box-shadow:0 4px 14px rgba(30,25,70,.05); }

/* Generic headings / text inside light pages */
.body--light h1, .body--light h2, .body--light h3, .body--light h4, .body--light h5 { color:#16152e; }
.body--light .fx-block { color:#4b5563; }

/* Premium page */
.body--light .fx-prem-quote-card,
.body--light .fx-prem-growth-card,
.body--light .fx-prem-metric-card,
.body--light .fx-prem-migration-card,
.body--light .fx-prem-duo-card,
.body--light .fx-prem-rating-item,
.body--light .fx-prem-form,
.body--light .fx-prem-testimonial-lg,
.body--light .fx-prem-award,
.body--light .fx-prem-hero-brands { background:#fff; border:1px solid #ecebf5; box-shadow:0 4px 20px rgba(30,25,70,.05); }
.body--light .fx-prem-quote-card__text { color:#16152e; }
.body--light .fx-prem-quote-card__author strong,
.body--light .fx-prem-metric-card__info strong,
.body--light .fx-prem-migration-card__brand { color:#16152e; }
.body--light .fx-prem-growth-card__stat,
.body--light .fx-prem-migration-card__days strong { color:#15284b; }
.body--light .fx-prem-metric-card__growth strong { color:#12a570 !important; }
.body--light .fx-prem-trust-badge { background:#f4f2ff; border:1px solid #e2ddfa; color:#15284b; }

/* Article / blog */
.body--light .fx-article__hero-overlay { background: linear-gradient(180deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,.9) 100%); }
.body--light .fx-article__title { color:#16152e; }
.body--light .fx-article__meta, .body--light .fx-article__meta time { color:#6b7280; }
.body--light .fx-article__author strong { color:#16152e; }
.body--light .fx-breadcrumb a { color:#4b5563; }
.body--light .fx-article__content { color:#3f4451; }
.body--light .fx-article__content h2,
.body--light .fx-article__content h3,
.body--light .fx-article__content h4,
.body--light .fx-article__content strong { color:#16152e; }
.body--light .fx-article__content a { color:#15284b; }
.body--light .fx-article__content blockquote { color:#16152e; background:#f6f4ff; border-left-color:#15284b; }
.body--light .fx-article__content code { background:#f1f0f8; color:#15284b; }
.body--light .fx-article__content pre { background:#f7f7fc; border-color:#e9e8f2; }
.body--light .fx-article__content pre code { color:#3f4451; }
.body--light .fx-article__content th { color:#16152e; background:#f7f7fc; }
.body--light .fx-article__content th, .body--light .fx-article__content td { border-color:#eceaf4; }
.body--light .fx-article__content .callout { background:#f4f2ff; border-color:#ddd6f9; }
.body--light .fx-article__content .callout strong { color:#15284b; }
.body--light .fx-article__tag { background:#f4f4fb; color:#4b5563; }
.body--light .fx-article__tags { border-color:#eceaf4; }
.body--light .fx-article__cta { background:linear-gradient(135deg,#efecff,#f7f5ff); border-color:#e2ddfa; }
.body--light .fx-article__cta strong { color:#16152e; }
.body--light .fx-article__cta p { color:#4b5563; }
.body--light .fx-article__share-btn { background:#fff; border-color:#e6e4f0; color:#4b5563; }
.body--light .fx-article__share-btn:hover { background:#15284b; color:#fff; border-color:#15284b; }
.body--light .fx-article__share-label { color:#9ca3af; }
.body--light .fx-article__faq { border-color:#eceaf4; }
.body--light .fx-article__faq > h2 { color:#16152e; }
.body--light .fx-faq-item summary { color:#16152e; }
.body--light .fx-faq-item__a p { color:#4b5563; }
.body--light .fx-blog-cat { background:#fff; border-color:#ecebf5; color:#4b5563; }
.body--light .fx-blog-cat.active { background:#15284b; color:#fff; border-color:#15284b; }
.body--light .fx-blog-featured { background:#fff; border-color:#ecebf5; }
.body--light .fx-blog-featured__title { color:#16152e; }
.body--light .fx-blog-featured__desc { color:#4b5563; }
.body--light .fx-blog-empty { color:#6b7280; }

/* Contact page */
.body--light .fx-contact-form, .body--light .fx-contact-info { background:#fff; border:1px solid #ecebf5; box-shadow:0 4px 20px rgba(30,25,70,.05); }
.body--light .fx-contact-form__title, .body--light .fx-contact-info__title { color:#16152e; }
.body--light .fx-contact-info__item strong { color:#16152e; }
.body--light .fx-contact-info__item p { color:#4b5563; }
.body--light .fx-contact-info__icon { background:#e8edf6; color:#15284b; }
.body--light .fx-contact-social__link { color:#4b5563; }
.body--light .fx-contact-social h4 { color:#16152e; }
.body--light .fx-form-group label { color:#3a3952; }
.body--light .fx-form-group input,
.body--light .fx-form-group textarea,
.body--light .fx-prem-form input,
.body--light .fx-prem-form textarea,
.body--light .fx-prem-form select { background:#f7f6fc; border:1px solid #e6e4f0; color:#16152e; }
.body--light .fx-form-group input::placeholder,
.body--light .fx-form-group textarea::placeholder { color:#9ca3af; }

/* Product pages (classified / marketplace) */
.body--light .fx-showcase-card { background:#fff; border-color:#ecebf5; }
.body--light .fx-showcase-card__top strong { color:#16152e; }
.body--light .fx-showcase-card__country { background:#f4f4fb; color:#4b5563; }
.body--light .fx-showcase-card__info p { color:#4b5563; }
.body--light .fx-showcase-card__cta { color:#15284b; }
.body--light .fx-showcase-card__preview { background:#f7f7fc; border-bottom-color:#eceaf4; }

/* Onboarding */
.body--light .fx-onboard-plan { background:#fff; border-color:#ecebf5; }
.body--light .fx-onboard-plan:hover { border-color:#d6cffa; }
.body--light .fx-onboard-pending { background:#fff; border-color:#ecebf5; }
.body--light .fx-onboard-pending__icon { background:#e8edf6; }

/* Integrations / shipping / features leftovers */
.body--light .fx-payment-card { background:#fff; border:1px solid #ecebf5; }
.body--light .fx-payment-card__amount { color:#16152e; }
.body--light .fx-payment-card__sub { color:#6b7280; }
.body--light .fx-pay-badge { background:#f4f4fb; color:#4b5563; border:1px solid #ecebf5; }
.body--light .fx-integ-item { background:#fff; border:1px solid #ecebf5; }
.body--light .fx-integ-item span { color:#16152e; }
.body--light .fx-integ-item__icon { color:#15284b; }
.body--light .fx-check-item strong { color:#16152e; }
.body--light .fx-check-item p { color:#6b7280; }
.body--light .fx-check-item__dot { background:#15284b; }
.body--light .fx-kargo-card__icon { background:#e8edf6; color:#15284b; }

/* Auth pages (login / register / forgot) */
.body--light.body--auth { background:#fff !important; }
.body--light .fx-auth-split__left { background:#fff; }
.body--light .fx-auth-split__title { color:#16152e; }
.body--light .fx-auth-split__sub { color:#4b5563; }
.body--light .fx-auth-field label { color:#3a3952; }
.body--light .fx-auth-form input { background:#f7f6fc; border:1px solid #e6e4f0; color:#16152e; }
.body--light .fx-auth-form input::placeholder { color:#9ca3af; }
.body--light .fx-auth-check span, .body--light .fx-auth-switch { color:#4b5563; }
.body--light .fx-auth-link { color:#15284b; }
.body--light .fx-auth-divider span { color:#9ca3af; background:#fff; }
.body--light .fx-auth-divider::before { background:#eceaf4; }
.body--light .fx-auth-cta-register { background:#f6f4ff; border:1px solid #ddd6f9; }
.body--light .fx-auth-cta-register__title { color:#16152e; }
.body--light .fx-auth-cta-register__label { color:#6b7280; }
.body--light .fx-auth-back, .body--light .fx-auth-split__copy { color:#6b7280; }
.body--light .fx-auth-split__brand img { filter: brightness(0) saturate(100%); height:30px; }
/* right visual panel stays purple-tinted */
.body--light .fx-auth-split__right { background:linear-gradient(160deg,#efecff,#f7f5ff); }
.body--light .fx-auth-split__heading { color:#16152e; }
.body--light .fx-auth-split__heading em { color:#15284b; font-style:normal; font-weight:700; }
.body--light .fx-auth-split__desc { color:#4b5563; }
.body--light .fx-auth-split__badge { background:#fff; border:1px solid #e6e2f8; color:#15284b; }
.body--light .fx-auth-split__stat strong { color:#16152e; }
.body--light .fx-auth-split__stat span { color:#6b7280; }
.body--light .fx-auth-split__benefit strong { color:#16152e; }
.body--light .fx-auth-split__benefit small { color:#6b7280; }
.body--light .fx-auth-founder { background:#fff; border:1px solid #ecebf5; }
.body--light .fx-auth-founder__name { color:#16152e; }
.body--light .fx-auth-founder__label { color:#6b7280; }
.body--light .fx-auth-card__error { background:#fdecef; border:1px solid #f8d5dc; color:#e0455f; }

/* Password meter / register extras */
.body--light .fx-pw-checks li { color:#6b7280; }
.body--light .fx-pw-meter__label { color:#6b7280; }
.body--light .fx-pw-toggle { color:#9ca3af; }
.body--light .fx-phone-input { background:#f7f6fc; border-color:#e6e4f0; }
.body--light .fx-phone-input__prefix { background:#f1f0f8; border-right-color:#e6e4f0; color:#16152e; }
.body--light .fx-phone-input input { color:#16152e; }
.body--light .fx-country-dropdown { background:#fff; border-color:#e6e4f0; box-shadow:0 20px 60px rgba(30,25,70,.14); }
.body--light .fx-country-item { color:#16152e; }
.body--light .fx-country-item:hover { background:#f6f4ff; }
.body--light .fx-country-dropdown__search input { color:#16152e; }
.body--light .fx-field-msg { color:#6b7280; }

/* ---- LIGHT THEME batch 2: remaining inner-page components ---- */

/* Legal pages (privacy / terms / shipping) */
.body--light .fx-legal { color:#3f4451; }
.body--light .fx-legal h2, .body--light .fx-legal h3 { color:#16152e; }
.body--light .fx-legal p, .body--light .fx-legal li { color:#4b5563; }
.body--light .fx-legal a { color:#15284b; }
.body--light .fx-legal__intro { background:#f6f4ff; border:1px solid #ddd6f9; color:#4b5563; }
.body--light .fx-legal__footer { background:#fff; border:1px solid #ecebf5; }
.body--light .fx-legal__footer h3 { color:#16152e; }
.body--light .fx-legal section { border-color:#eceaf4; }

/* POS cards (pricing) */
.body--light .fx-pos-card { background:#fff; border:1px solid #ecebf5; box-shadow:0 4px 20px rgba(30,25,70,.05); }
.body--light .fx-pos-card--featured { border-color:#d6cffa; background:linear-gradient(180deg,#faf9ff,#fff); }
.body--light .fx-pos-card__title { color:#16152e; }
.body--light .fx-pos-card__desc { color:#4b5563; }
.body--light .fx-pos-card__list li { color:#3f4451; }
.body--light .fx-pos-card__visual { background:#e8edf6; color:#15284b; }

/* Payment method cards */
.body--light .fx-pay-methods-row { background:#fff; border:1px solid #ecebf5; }
.body--light .fx-pay-methods-row__title { color:#16152e; }
.body--light .fx-pay-methods-row__sub { color:#4b5563; }
.body--light .fx-pay-method-card { background:#fbfaff; border:1px solid #eceaf4; color:#3f4451; }
.body--light .fx-pay-method-card strong { color:#16152e; }
.body--light .fx-pay-method-card__icon { background:#e8edf6; color:#15284b; }

/* Compare table (features) */
.body--light .fx-compare-table { background:#fff; border:1px solid #ecebf5; }
.body--light .fx-compare-table th { background:#f7f6fc; color:#16152e; }
.body--light .fx-compare-table td { color:#4b5563; border-color:#f0eff7; }
.body--light .fx-compare-table__pop { background:#f6f4ff; }

/* Product-page banner + usecase icons */
.body--light .fx-prod-integ-banner { background:linear-gradient(135deg,#efecff,#f9f8ff); border:1px solid #e2ddfa; }
.body--light .fx-prod-integ-banner__title { color:#16152e; }
.body--light .fx-prod-integ-banner__desc, .body--light .fx-prod-integ-banner__list li { color:#4b5563; }
.body--light .fx-prod-integ-banner__icon, .body--light .fx-usecase-card__icon { background:#e8edf6; color:#15284b; }
.body--light .fx-prod-integ-banner__tag { background:#fff; border:1px solid #e6e2f8; color:#15284b; }
.body--light .fx-showcase-card__mock-title { color:#16152e; }
.body--light .fx-showcase-card__mock-sub { color:#6b7280; }
.body--light .fx-showcase-card__mock { background:#f7f7fc; }

/* Article hero bits */
.body--light .fx-article__cat { background:#15284b; color:#fff; }
.body--light .fx-article__author-avatar { background:#15284b; color:#fff; }
.body--light .fx-article__dot { color:#c9c7d6; }
.body--light .fx-article__author small { color:#6b7280; }
.body--light .fx-blog-card__link, .body--light .fx-blog-featured__tag { color:#15284b; }
.body--light .fx-blog-featured__tag { background:#f2efff; }
.body--light .fx-blog-pagination .page-link { background:#fff; border-color:#ecebf5; color:#4b5563; }
.body--light .fx-blog-pagination .active .page-link,
.body--light .fx-blog-pagination .page-item.active span { background:#15284b; border-color:#15284b; color:#fff; }

/* Onboarding pending */
.body--light .fx-onboard-pending__step { background:#fff; border:1px solid #ecebf5; color:#4b5563; }
.body--light .fx-onboard-pending__step strong { color:#16152e; }
.body--light .fx-onboard-pending__step-num { background:#f1f0f8; color:#6b7280; }
.body--light .fx-onboard-pending__step--active { border-color:#d6cffa; background:#faf9ff; }
.body--light .fx-onboard-pending__step--active .fx-onboard-pending__step-num,
.body--light .fx-onboard-pending__step--done .fx-onboard-pending__step-num { background:#15284b; color:#fff; }
.body--light .fx-onboard-pending__order { background:#f7f6fc; border:1px solid #eceaf4; }
.body--light .fx-onboard-pending__row { color:#4b5563; border-color:#eceaf4; }
.body--light .fx-onboard-pending__row strong { color:#16152e; }
.body--light .fx-onboard-pending__contact-row { color:#4b5563; }
.body--light .fx-onboard-plan__check { background:#15284b; }
.body--light .fx-onboard-plan__check svg { stroke:#fff; }

/* Auth background orbs stay soft in light */
.body--light .fx-auth-bg__orb { opacity:.35; }
.body--light .fx-auth-split__bg { background:#fff; }
.body--light .fx-auth-trust { color:#6b7280; }
.body--light .fx-auth-founder__avatar { border-color:#e6e4f0; }
.body--light .fx-auth-founder__icon { color:#15284b; }
.body--light .fx-auth-cta-register__badge { background:#15284b; color:#fff; }
.body--light .fx-auth-card__success { background:#eefaf3; border:1px solid #cfeede; color:#12a570; }

/* Success card / misc */
.body--light .fx-success-card { background:#fff; border:1px solid #ecebf5; }
.body--light .fx-success-card__avatar { background:#15284b; color:#fff; }
.body--light .fx-mini-num strong { color:#16152e; }
.body--light .fx-mini-num span { color:#6b7280; }
.body--light .fx-country-item__name { color:#16152e; }
.body--light .fx-country-item__dial { color:#6b7280; }
.body--light .fx-country-empty { color:#9ca3af; }
.body--light .fx-phone-flag { border-right-color:#e6e4f0; }
.body--light .fx-pw-dot { background:#e5e3ef; }
.body--light .fx-prem-quote-card__avatar { border-color:#e6e4f0; }
.body--light .fx-prem-growth-card__label, .body--light .fx-prem-growth-card__sub { color:#6b7280; }
.body--light .fx-prem-growth-card__icon { background:#e8edf6; color:#15284b; }
.body--light .fx-prem-migration-card__tag { background:#f4f2ff; color:#15284b; }
.body--light .fx-prem-rating-item__score { color:#16152e; }
.body--light .fx-prem-rating-item__source { color:#6b7280; }
.body--light .fx-prem-testimonial-lg__quote { color:#16152e; }
.body--light .fx-prem-testimonial-lg__author strong { color:#16152e; }
.body--light .fx-prem-testimonial-lg__author span { color:#6b7280; }
.body--light .fx-prem-award__trophy { color:#15284b; }
.body--light .fx-payment-card__header { border-bottom-color:#eceaf4; }
.body--light .fx-split-row__right p { color:#4b5563; }

/* ---- LIGHT: blog pagination ---- */
.body--light .fx-blog-pagination nav { display:flex; align-items:center; gap:6px; flex-wrap:wrap; justify-content:center; }
.body--light .fx-blog-pagination nav > div:first-child { display:none; }
.body--light .fx-blog-pagination nav > div:last-child { display:flex; align-items:center; gap:6px; }
.body--light .fx-blog-pagination span[aria-current="page"] > span,
.body--light .fx-blog-pagination a,
.body--light .fx-blog-pagination span > span {
    display:inline-flex; align-items:center; justify-content:center;
    min-width:40px; height:40px; padding:0 12px;
    background:#fff; border:1px solid #ecebf5; border-radius:10px;
    color:#4b5563; font-size:14px; font-weight:600; text-decoration:none; transition:all .2s;
}
.body--light .fx-blog-pagination a:hover { border-color:#c9bdf7; color:#15284b; }
.body--light .fx-blog-pagination span[aria-current="page"] > span { background:#15284b; border-color:#15284b; color:#fff; }
.body--light .fx-blog-pagination span[aria-disabled="true"] > span { opacity:.4; }
.body--light .fx-blog-pagination svg { width:16px; height:16px; }

/* ---- LIGHT: fixes for footer + legal strong ---- */
.body--light .footer h1, .body--light .footer h2, .body--light .footer h3,
.body--light .footer h4, .body--light .footer h5,
.body--light .footer__title { color:#fff !important; }
.body--light .footer__link { color: rgba(255,255,255,0.62) !important; }
.body--light .footer__link:hover { color:#fff !important; }
.body--light .footer__desc, .body--light .footer__bottom { color: rgba(255,255,255,0.5); }

.body--light .fx-legal strong { color:#16152e; }
.body--light .fx-legal ul { list-style: disc; }
.body--light .fx-legal ul li::marker { color:#15284b; }

/* remaining white <strong> on light cards */
.body--light .fx-kargo-card strong,
.body--light .fx-success-card__top strong,
.body--light .fx-app-badge strong,
.body--light .fx-app-card strong,
.body--light .fx-callback-section__user strong,
.body--light .fx-dash-card__mini strong,
.body--light .fx-prem-trust-badge strong,
.body--light .fx-pay-method-card strong,
.body--light .fx-check-item strong,
.body--light .fx-contact-info__item strong,
.body--light .fx-mini-num strong { color:#16152e; }
.body--light .fx-prem-brand-img { border:1px solid #e6e4f0; color:#15284b; }
.body--light .fx-prem-brand-img .lucide-icon { color:#15284b; }

/* ================================================================= */
/* LIGHT THEME batch 3 — modals, CTA box, cards, forms                */
/* ================================================================= */

/* Callback modal (Sizə zəng edək) */
.body--light .callback-modal__container { background:#fff !important; border:1px solid #ecebf5; box-shadow:0 40px 100px rgba(30,25,70,.22); }
.body--light .callback-modal__title { color:#16152e; }
.body--light .callback-modal__sub { color:#4b5563; }
.body--light .callback-modal__close { color:#6b7280; background:#f4f4fb; }
.body--light .callback-modal__close:hover { background:#e8edf6; color:#15284b; }
.body--light .callback-modal__form label { color:#3a3952; }
.body--light .callback-modal__form input,
.body--light .callback-modal__form textarea { background:#f7f6fc; border:1px solid #e6e4f0; color:#16152e; }
.body--light .callback-modal__form input::placeholder,
.body--light .callback-modal__form textarea::placeholder { color:#9ca3af; }
.body--light .callback-modal__user-info { background:#f6f4ff; border:1px solid #e2ddfa; }
.body--light .callback-modal__user-info strong { color:#16152e; }
.body--light .callback-modal__user-info span { color:#6b7280; }
.body--light .callback-modal__avatar { color:#fff; }
.body--light .callback-modal__submit { color:#fff; }
.body--light .callback-modal__icon { color:#fff; }

/* Qualify (question) modal */
.body--light .fx-qualify { background:#fff; border:1px solid #ecebf5; }
.body--light .fx-qualify__title { color:#16152e; }
.body--light .fx-qualify__sub, .body--light .fx-qualify__hint { color:#6b7280; }
.body--light .fx-qualify__label { color:#3a3952; }
.body--light .fx-qualify__close { color:#6b7280; }
.body--light .fx-qualify__opt { background:#f7f6fc; border:1px solid #e6e4f0; color:#3f4451; }
.body--light .fx-qualify__opt:hover { background:#f2efff; border-color:#c9bdf7; color:#15284b; }
.body--light .fx-qualify__opt.active { background:#15284b; border-color:#15284b; color:#fff; }
.body--light .fx-qualify__submit { color:#fff; }

/* Captcha */
.body--light .fx-captcha__label { color:#6b7280; }
.body--light .fx-captcha__q { color:#16152e; }
.body--light .fx-captcha__row input[type="number"] { background:#f7f6fc; border:1px solid #e6e4f0; color:#16152e; }
.body--light .fx-captcha__refresh { color:#6b7280; }

/* CTA box */
.body--light .fx-cta-box__sub, .body--light .fx-cta-box__trust { color:#4b5563; }
.body--light .fx-cta-box__title { color:#16152e; }

/* Step cards / provider cards / misc white text on light cards */
.body--light .fx-step-card__title, .body--light .fx-provider-card__title { color:#16152e; }
.body--light .fx-step-card__desc, .body--light .fx-provider-card__desc { color:#4b5563; }
.body--light .fx-provider-card__features span { color:#15284b; }
.body--light .fx-success-card__quote { color:#16152e; }
.body--light .fx-success-card__top span, .body--light .fx-success-card__stats span { color:#6b7280; }
.body--light .fx-kargo-features span, .body--light .fx-kargo-price__label { color:#6b7280; }
.body--light .fx-pay-method-card span { color:#6b7280; }
.body--light .fx-prem-metric-card__info span,
.body--light .fx-prem-quote-card__author span,
.body--light .fx-prem-trust-badge span,
.body--light .fx-prod-integ-banner__list span { color:#6b7280; }
.body--light .fx-dash-card__header, .body--light .fx-dash-card__bl, .body--light .fx-dash-card__bv { color:#16152e; }
.body--light .fx-dash-card__mini span { color:#6b7280; }
.body--light .fx-blog-card__date, .body--light .fx-breadcrumb { color:#6b7280; }
.body--light .fx-blog-cat:hover { background:#f2efff; color:#15284b; }
.body--light .fx-compare-table td:first-child,
.body--light .fx-compare-table th:first-child { color:#16152e; }
.body--light .fx-app-badge small { color:#6b7280; }
.body--light .fx-field-msg { color:#6b7280; }
.body--light .fx-auth-card { background:#fff; border:1px solid #ecebf5; }
.body--light .fx-auth-card__title { color:#16152e; }
.body--light .fx-auth-card__sub { color:#4b5563; }
.body--light .fx-auth-field input { background:#f7f6fc; border:1px solid #e6e4f0; color:#16152e; }
.body--light .fx-auth-field input::placeholder { color:#9ca3af; }
.body--light .fx-auth-trust span { color:#6b7280; }
.body--light .fx-auth-split__benefit > span { color:#15284b; }
.body--light .fx-form-group input, .body--light .fx-form-group select,
.body--light .fx-form-group textarea, .body--light .fx-form-group select option { color:#16152e; }
.body--light .fx-callback-section__form input[type="text"],
.body--light .fx-callback-section__form input[type="email"],
.body--light .fx-callback-section__form input[type="tel"] { color:#16152e; }
.body--light .fx-callback-phone-flag { color:#16152e; }
.body--light .fx-country-dropdown__search input { color:#16152e; }
.body--light .fx-country-dropdown__search input::placeholder { color:#9ca3af; }
.body--light .fx-phone-input input::placeholder { color:#9ca3af; }
.body--light .fx-onboard-pending__contact h4 { color:#16152e; }
.body--light .fx-onboard-pending__contact p,
.body--light .fx-onboard-pending__row span,
.body--light .fx-onboard-pending__step span { color:#4b5563; }
.body--light .fx-contact-social__link:hover { color:#15284b; }
.body--light .lang-switcher__dropdown { background:#fff; border:1px solid #e6e4f0; box-shadow:0 20px 50px rgba(30,25,70,.14); }
.body--light .lang-switcher__item { color:#4b5563; }
.body--light .lang-switcher__item:hover { background:#f6f4ff; color:#15284b; }
.body--light .lang-switcher__item.active { background:#15284b; color:#fff; }
.body--light .header__user-info strong { color:#16152e !important; }
.body--light .header__user-info small { color:#6b7280; }
.body--light .header__user:hover { background:#f6f4ff; }
.body--light .header__plan-cta { color:#fff; }
.body--light .fx-article__content { color:#3f4451; }
.body--light .fx-logos-label { color:#6b7280; }
.body--light .fx-article__content a.fx-btn--accent,
.body--light .fx-article__cta a.fx-btn--accent { color:#fff; }
.body--light .fx-article__content a.fx-btn--glass { color:#15284b; }

/* ---- LIGHT: consistent heading <em> (no serif italic) + list markers ---- */
.body--light h1 em, .body--light h2 em, .body--light h3 em, .body--light .fx-hero__title em, .body--light .fx-h2 em, .body--light .fx-auth-split__heading em, .body--light .fx-page-hero h1 em, .body--light .fx-pos-card__title em, .body--light .fx-pay-methods-row__title em, .body--light .fx-prod-integ-banner__title em, .body--light .fx-callback-section__title em, .body--light .fx-cta-mini__title em, .body--light .fx-up-feature__title em {
    font-family: 'Manrope', 'Geist', sans-serif;
    font-style: normal;
    font-weight: 700;
    letter-spacing: -0.02em;
}
.body--light .fx-hero__title em, .body--light .fx-page-hero h1 em,
.body--light .fx-auth-split__heading em { color:#15284b; }

.body--light .fx-article__content ul,
.body--light .fx-legal ul { list-style: disc outside; padding-left: 22px; }
.body--light .fx-article__content ol,
.body--light .fx-legal ol { list-style: decimal outside; padding-left: 22px; }
.body--light .fx-article__content ul li::marker,
.body--light .fx-article__content ol li::marker,
.body--light .fx-legal ul li::marker { color:#15284b; }
/* language dropdown sits under the dark topbar but is a light surface */
.body--light .topbar .lang-switcher__dropdown { background:#fff; border:1px solid #e6e4f0; box-shadow:0 20px 50px rgba(30,25,70,.18); }
.body--light .topbar .lang-switcher__item { color:#4b5563; }
.body--light .topbar .lang-switcher__item:hover { background:#f6f4ff; color:#15284b; }
.body--light .topbar .lang-switcher__item.active { background:#15284b; color:#fff; }
.body--light .topbar .lang-switcher__item.active span { color:#fff; }
.body--light .topbar .lang-switcher__item span { color: inherit; }

/* ---- Turnstile: keep a measurable box before render ---- */
.fx-turnstile .cf-turnstile { min-height: 65px; min-width: 300px; align-items: center; }
.fx-turnstile--invisible .cf-turnstile { min-height: 0 !important; min-width: 0 !important; }

/* ---- Contact page: icon badges + social chips ---- */
.body--light .fx-contact-info { background: transparent; border: none; box-shadow: none; }
.body--light .fx-contact-info__item { background:#fff; border:1px solid #ecebf5; }
.body--light .fx-contact-info__item:hover { background:#faf9ff; border-color:#d9d1fa; transform:translateX(4px); }
.fx-contact-info__icon {
    width: 44px; height: 44px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 12px; font-size: 0;
}
.fx-contact-info__icon .lucide-icon, .fx-contact-info__icon svg { width: 20px; height: 20px; }
.body--light .fx-contact-info__icon { background:#e8edf6; color:#15284b; }
.body--light .fx-contact-info__item:hover .fx-contact-info__icon { background:#15284b; color:#fff; }
.body--light .fx-contact-social { border-top:1px solid #eceaf4; }
.body--light .fx-contact-social__link { background:#fff; border:1px solid #ecebf5; color:#4b5563; }
.body--light .fx-contact-social__link:hover { background:#15284b; border-color:#15284b; color:#fff; }

/* ---- Mobile: bigger logo in the header ---- */
@media (max-width: 768px) {
    .body--light .header__logo-img { height: 42px; }
    .header__logo-img { height: 42px; }
    .header__logo { margin-right: 0; }
}
@media (max-width: 420px) {
    .body--light .header__logo-img { height: 38px; }
    .header__logo-img { height: 38px; }
}

/* ---- FAQ accordion: collapsed answers must be fully hidden ---- */
.fx-faq-item__a { max-height: 0; overflow: hidden; padding: 0; transition: max-height .4s ease; }
.fx-faq-item.active > .fx-faq-item__a { max-height: 400px; }
details.fx-faq-item > .fx-faq-item__a { max-height: none; overflow: visible; padding: 0 22px 20px; }

/* ================================================================= */
/* CALLBACK SECTION (home) — light card layout                       */
/* ================================================================= */
.body--light .fx-callback-section {
    background:#fff; border:1px solid #ececf3; border-radius:24px;
    box-shadow:0 4px 28px rgba(20,20,50,.06);
    padding: 44px 48px;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 56px;
    align-items: center;
}
.body--light .fx-callback-section__left { gap:22px; justify-content:center; }
.body--light .fx-callback-section__avatars { margin-bottom:2px; }
.body--light .fx-callback-avatar {
    width:52px; height:52px; border:3px solid #fff;
    box-shadow:0 4px 14px rgba(30,25,70,.12); margin-left:-16px; font-size:19px;
}
.body--light .fx-callback-avatar:first-child { margin-left:0; }
.body--light .fx-callback-section__title { font-size:34px; line-height:1.2; }
.body--light .fx-callback-section__hours {
    background:#f4f2ff; border:1px solid #e2ddfa; color:#15284b;
}
.body--light .fx-callback-section__hours .lucide-icon,
.body--light .fx-callback-section__hours span { color:#15284b; }

/* form column */
.body--light .fx-callback-section__form { gap:14px; }
.body--light .fx-callback-section__form input[type="text"],
.body--light .fx-callback-section__form input[type="email"],
.body--light .fx-callback-section__form input[type="tel"] {
    background:#f7f6fc; border:1px solid #e6e4f0; border-radius:12px; padding:15px 18px;
}
.body--light .fx-callback-section__form input:focus { background:#fff; border-color:#c9bdf7; box-shadow:0 0 0 3px rgba(21,40,75,.08); }
.body--light .fx-callback-section__form .fx-phone-input { border-radius:12px; }
/* captcha sits left, tight to the fields */
.body--light .fx-callback-section__form .fx-turnstile { margin-top:2px; min-height:68px; }
.body--light .fx-callback-section__form .fx-turnstile .cf-turnstile { justify-content:flex-start; }
.body--light .fx-callback-bottom { margin-top:6px; gap:16px; }
.body--light .fx-callback-section__terms input { border:1.5px solid #d3d1e0; background:#fff; }
.body--light .fx-callback-section__terms input:checked { background:#15284b; border-color:#15284b; }
.body--light .fx-callback-section__terms input:checked::after { border-color:#fff; }
.body--light .fx-callback-submit { padding:15px 40px; border-radius:12px; }

@media (max-width: 900px) {
    .body--light .fx-callback-section { padding:32px 24px; gap:28px; grid-template-columns:1fr; }
    .body--light .fx-callback-section__title { font-size:26px; }
    .body--light .fx-callback-section__form .fx-turnstile .cf-turnstile { justify-content:center; }
}

/* ================================================================= */
/* STATS BAR — proper card row instead of a bare white strip         */
/* ================================================================= */
.body--light .fx-stats-bar {
    background: #fafafc;
    border-top: 1px solid #ececf3;
    border-bottom: 1px solid #ececf3;
    padding: 56px 0;
}
.body--light .fx-stats-bar .fx-stats-row {
    background: #fff;
    border: 1px solid #ececf3;
    border-radius: 20px;
    box-shadow: 0 4px 24px rgba(20,20,50,.05);
    padding: 34px 24px;
    gap: 0;
}
.body--light .fx-stats-bar .fx-stat-item {
    background: transparent;
    padding: 4px 16px;
    border-right: 1px solid #f0eff6;
}
.body--light .fx-stats-bar .fx-stat-item:last-child { border-right: none; }
.body--light .fx-stat-item__num {
    font-size: 36px;
    font-weight: 800;
    color: #15284b;
    letter-spacing: -0.03em;
    line-height: 1.05;
}
.body--light .fx-stat-item__label {
    font-size: 13px;
    color: #6b7280;
    margin-top: 8px;
    font-weight: 500;
}
@media (max-width: 900px) {
    .body--light .fx-stats-bar { padding: 36px 0; }
    .body--light .fx-stats-bar .fx-stats-row { padding: 24px 12px; flex-wrap: wrap; row-gap: 24px; }
    .body--light .fx-stats-bar .fx-stat-item { flex: 0 0 50%; border-right: none; }
    .body--light .fx-stat-item__num { font-size: 28px; }
}

/* ================================================================= */
/* MOBILE — light menu, bigger logo, bento layout                    */
/* ================================================================= */
@media (max-width: 768px) {

    /* ---- logo ---- */
    .body--light .header__logo-img, .header__logo-img { height: 50px !important; }
    .header__logo { margin-right: 0; }

    /* ---- burger ---- */
    .body--light .header__burger {
        border: 1px solid #e6e4f0;
        background: #f7f6fc;
    }
    .body--light .header__burger span { background: #16152e; }
    .body--light .header__burger:hover { background: #e8edf6; border-color: #d6cffa; }
    body.body--light:has(.header__nav.open) .header__burger { background: #e8edf6; border-color: #d6cffa; }
    body.body--light:has(.header__nav.open) .header__burger span:nth-child(1),
    body.body--light:has(.header__nav.open) .header__burger span:nth-child(3) { background: #15284b; }

    /* ---- slide-in panel ---- */
    .body--light .header__nav.open {
        background: #fff;
    }
    .body--light .header__nav.open .header__link {
        color: #16152e;
        border-bottom: 1px solid #f0eff6;
    }
    .body--light .header__nav.open .header__link::after { color: #c9c7d6; }
    .body--light .header__nav.open .header__link:hover,
    .body--light .header__nav.open .header__link.active {
        color: #15284b;
        background: #f7f5ff;
    }
    .body--light .header__nav.open .header__link:hover::after,
    .body--light .header__nav.open .header__link.active::after { color: #15284b; }

    /* ---- bottom action bar ---- */
    .body--light .header__actions.open {
        background: #fff;
        border-top: 1px solid #eceaf4;
        box-shadow: 0 -8px 30px rgba(30,25,70,.08);
    }
    .body--light .header__actions.open .btn--header-ghost {
        background: #f7f6fc !important;
        color: #16152e !important;
        border: 1px solid #e6e4f0 !important;
    }
    .body--light .header__actions.open .btn--white {
        background: #15284b !important;
        color: #fff !important;
        border: 1px solid #15284b !important;
    }

}

@media (max-width: 420px) {
    .body--light .header__logo-img, .header__logo-img { height: 46px !important; }
}

/* ---- mobile menu: full-width rows, tighter rhythm ---- */
@media (max-width: 768px) {
    .header__nav.open {
        align-items: stretch !important;
        justify-content: flex-start;
        padding: 0 0 120px 0 !important;
    }
    .header__nav.open::before { height: 96px !important; }
    .header__nav.open .header__link {
        width: 100%;
        padding: 19px 24px !important;
        font-size: 17px !important;
        flex: 0 0 auto;
    }
    .body--light .header__nav.open .header__link::after {
        content: '›';
        font-size: 22px;
        line-height: 1;
        color: #b9b7c9;
    }
    .body--light .header__nav.open .header__link:hover::after,
    .body--light .header__nav.open .header__link.active::after { color: #15284b; }
}
@media (max-width: 768px) {
    .header__nav.open { gap: 0 !important; }
    .header__nav.open .header__link { min-height: 0; line-height: 1.3; }
    .body--light .header__nav.open .header__link::after {
        content: '›' !important;
        display: inline-block;
        font-size: 24px;
        font-weight: 400;
        line-height: 1;
        color: #b9b7c9 !important;
        transform: none;
    }
}

/* ---- Mobile: app icons in a single row of 4 ---- */
@media (max-width: 768px) {
    .fx-appicons {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 10px;
    }
    .fx-appicon { border-radius: 13px; }
    .fx-appicons__all { justify-content: flex-start; }
}
@media (max-width: 420px) {
    .fx-appicons { gap: 8px; }
    .fx-appicon { border-radius: 11px; }
}

/* ---- logo: tight-cropped asset, real visible size ---- */
.body--light .header__logo-img, .header__logo-img { height: 34px; width: auto; }
@media (max-width: 768px) {
    .body--light .header__logo-img, .header__logo-img { height: 34px !important; }
}
@media (max-width: 420px) {
    .body--light .header__logo-img, .header__logo-img { height: 30px !important; }
}

/* ---- FINAL logo sizing (asset is tight-cropped, so height == visible mark) ---- */
.header__logo-img, .body--light .header__logo-img { height: 40px !important; width: auto !important; }
@media (max-width: 768px) {
    .header__logo-img, .body--light .header__logo-img { height: 46px !important; }
}
@media (max-width: 420px) {
    .header__logo-img, .body--light .header__logo-img { height: 40px !important; }
}

/* ================================================================= */
/* HEADER + TOPBAR: flush, no transparent gap between them           */
/* ================================================================= */
:root { --fx-topbar-h: 45px; --fx-header-h: 84px; }

.body--light .topbar { height: var(--fx-topbar-h) !important; }
.body--light .header  { top: var(--fx-topbar-h) !important; }

/* solid bar, nothing bleeds through, one continuous unit */
.body--light .header,
.body--light .header.scrolled,
.body--light .header--solid {
    background: #fff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom: 1px solid #ececf3;
    height: var(--fx-header-h);
}
.body--light .header.scrolled { box-shadow: 0 2px 14px rgba(20,30,60,.07); }

/* spacer under the two fixed bars */
.body--light .fx-hero--split,
.body--light .fx-hero2 { padding-top: calc(var(--fx-topbar-h) + var(--fx-header-h) + 44px); }
.body--light .fx-page-hero { padding-top: calc(var(--fx-topbar-h) + var(--fx-header-h) + 42px); }

@media (max-width: 980px) {
    .body--light .fx-hero--split,
    .body--light .fx-hero2 { padding-top: calc(var(--fx-topbar-h) + var(--fx-header-h) + 30px); }
    .body--light .fx-page-hero { padding-top: calc(var(--fx-topbar-h) + var(--fx-header-h) + 28px); }
}
@media (max-width: 768px) {
    :root { --fx-topbar-h: 45px; --fx-header-h: 84px; }
    .body--light .topbar { height: var(--fx-topbar-h) !important; }
    .body--light .header { top: var(--fx-topbar-h) !important; }
}
@media (max-width: 560px) {
    .body--light .fx-hero--split,
    .body--light .fx-hero2 { padding-top: calc(var(--fx-topbar-h) + var(--fx-header-h) + 20px); }
}

/* ================================================================= */
/* BENTO app-icon cell: icons must fit inside the card, never clip   */
/* ================================================================= */
.fx-appicons {
    grid-template-rows: repeat(2, minmax(0, 1fr));
    min-height: 0;
    justify-items: center;
    align-items: center;
    align-content: stretch;
}
.fx-appicon {
    height: 100%;
    width: auto;
    max-width: 100%;
    aspect-ratio: 1;
}
.fx-appicons__all { flex-shrink: 0; }

@media (max-width: 768px) {
    /* single row of 4 → one grid row, sized by column width */
    .fx-appicons {
        grid-template-columns: repeat(4, 1fr) !important;
        grid-template-rows: minmax(0, 1fr) !important;
        align-content: center;
    }
    .fx-appicon { height: auto; width: 100%; }
}

/* ================================================================= */
/* PREMIUM — real client logos, tidy cards                           */
/* ================================================================= */
.body--light .fx-prem-hero-brands {
    display: block;
    background: #fff;
    border: 1px solid #ecebf5;
    border-radius: 20px;
    padding: 24px 26px;
    box-shadow: 0 4px 20px rgba(30,25,70,.05);
}
.fx-prem-hero-brands__label {
    display: block;
    font-size: 11px; font-weight: 700; letter-spacing: .9px;
    text-transform: uppercase; color: #9a99ac; margin-bottom: 16px;
}
.fx-prem-logo-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
}
.fx-prem-logo {
    display: flex; align-items: center; justify-content: center;
    background: #fbfaff; border: 1px solid #f0eff6; border-radius: 14px;
    padding: 14px 12px; min-height: 74px; transition: all .25s;
}
.fx-prem-logo img {
    max-width: 100%; max-height: 34px; width: auto; height: auto;
    object-fit: contain; filter: grayscale(1); opacity: .62; transition: all .25s;
}
.fx-prem-logo:hover { border-color: #d9d2f8; box-shadow: 0 8px 22px rgba(21,40,75,.10); transform: translateY(-2px); }
.fx-prem-logo:hover img { filter: none; opacity: 1; }

.fx-prem-logo--lg {
    width: 100%; max-width: 260px; min-height: 190px; padding: 28px;
    border-radius: 20px; background: #fff; border: 1px solid #ecebf5;
    box-shadow: 0 6px 26px rgba(30,25,70,.07);
}
.fx-prem-logo--lg img { max-height: 90px; filter: none; opacity: 1; }

/* metric card logo tile */
.body--light .fx-prem-metric-card__logo {
    width: 54px; height: 54px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: #fbfaff; border: 1px solid #f0eff6; border-radius: 14px;
    padding: 8px; overflow: hidden;
}
.body--light .fx-prem-metric-card__logo img {
    max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain;
}

/* migration card logo */
.fx-prem-migration-card__logo {
    display: flex; align-items: center; justify-content: center;
    height: 40px; margin-bottom: 14px;
}
.fx-prem-migration-card__logo img {
    max-height: 34px; max-width: 130px; width: auto; height: auto;
    object-fit: contain; filter: grayscale(1); opacity: .6; transition: all .25s;
}
.fx-prem-migration-card:hover .fx-prem-migration-card__logo img { filter: none; opacity: 1; }
.body--light .fx-prem-migration-card { text-align: center; padding: 26px 20px; }
.body--light .fx-prem-migration-card__brand { font-size: 14px; font-weight: 700; color: #16152e; margin-bottom: 8px; }
.body--light .fx-prem-migration-card__days { font-size: 26px; font-weight: 800; color: #15284b; letter-spacing: -.02em; }
.body--light .fx-prem-migration-card__days strong { color: #15284b; }
.body--light .fx-prem-migration-card__tag { margin-top: 12px; display: inline-block; }

/* growth cards: icon badge must not stretch full width */
.body--light .fx-prem-growth-card { text-align: center; padding: 28px 22px; }
.body--light .fx-prem-growth-card__icon {
    width: 48px; height: 48px; margin: 0 auto 14px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 14px; background: #e8edf6; color: #15284b;
}
.body--light .fx-prem-growth-card__icon .lucide-icon { width: 22px; height: 22px; }
.body--light .fx-prem-growth-card__label { font-size: 15px; font-weight: 700; color: #16152e; }
.body--light .fx-prem-growth-card__sub { font-size: 13px; color: #6b7280; margin-top: 6px; }
.body--light .fx-prem-growth-card__stat { font-size: 44px; font-weight: 800; color: #15284b; letter-spacing: -.03em; line-height: 1.05; margin: 4px 0; }

.body--light .fx-prem-quote-card__avatar { background: #15284b; color: #fff; }
.body--light .fx-prem-testimonial-lg__right { display: flex; align-items: center; justify-content: center; }

@media (max-width: 900px) {
    .fx-prem-logo-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; }
    .fx-prem-logo { min-height: 62px; padding: 10px 8px; }
    .fx-prem-logo img { max-height: 26px; }
    .fx-prem-logo--lg { max-width: 100%; min-height: 150px; }
}
@media (max-width: 480px) {
    .fx-prem-logo-grid { grid-template-columns: repeat(2, 1fr); }
}

/* premium logos: full colour, matching the home reference cards */
.body--light .fx-prem-logo img { filter: none; opacity: 1; max-height: 40px; }
.body--light .fx-prem-logo { min-height: 82px; background: #fff; border-color: #ecebf5; }
.body--light .fx-prem-logo:hover { background: #fbfaff; }
.body--light .fx-prem-migration-card__logo img { filter: none; opacity: 1; }

/* metric card: wide logo plate so horizontal wordmarks stay legible */
.body--light .fx-prem-metric-card__logo {
    width: 118px; height: 56px; padding: 10px 14px; border-radius: 12px;
}
.body--light .fx-prem-metric-card__logo img { max-height: 30px; }
@media (max-width: 560px) {
    .body--light .fx-prem-metric-card__logo { width: 96px; height: 48px; }
    .body--light .fx-prem-metric-card__logo img { max-height: 24px; }
}

/* ================================================================= */
/* INFRASTRUCTURE PARTNERS (hostinq.az / Atropatena Holding)          */
/* ================================================================= */
.fx-partner-row {
    display: grid; grid-template-columns: 1.25fr 1fr; gap: 20px;
    max-width: 1060px; margin: 0 auto;
}
.body--light .fx-partner-card {
    background: #fff; border: 1px solid #ecebf5; border-radius: 22px;
    padding: 30px 32px; box-shadow: 0 4px 22px rgba(30,25,70,.05);
    display: flex; flex-direction: column; transition: all .3s;
}
.body--light .fx-partner-card:hover { border-color: #d9d2f8; box-shadow: 0 16px 40px rgba(21,40,75,.10); transform: translateY(-3px); }
.body--light .fx-partner-card--main { background: linear-gradient(160deg,#faf9ff 0%,#fff 55%); border-color: #e2ddfa; }

.fx-partner-card__head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; margin-bottom: 20px; flex-wrap: wrap;
}
.fx-partner-card__logo {
    display: flex; align-items: center; justify-content: flex-start;
    height: 46px; flex: 0 1 auto;
}
.fx-partner-card__logo img { max-height: 42px; max-width: 190px; width: auto; height: auto; object-fit: contain; }
.fx-partner-card__logo--square img { max-height: 54px; max-width: 54px; }
.fx-partner-card__logo--square { height: 54px; }

.body--light .fx-partner-card__badge {
    display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
    background: #e8edf6; border: 1px solid #ddd6f9; color: #15284b;
    font-size: 11.5px; font-weight: 700; letter-spacing: .3px;
    padding: 6px 13px; border-radius: 100px; white-space: nowrap;
}
.fx-partner-card__badge .lucide-icon { width: 14px; height: 14px; }

.body--light .fx-partner-card__title { font-size: 20px; font-weight: 700; color: #16152e; margin: 0 0 10px; }
.body--light .fx-partner-card__desc { font-size: 14.5px; line-height: 1.7; color: #4b5563; margin: 0 0 18px; }

.body--light .fx-partner-card__list { list-style: none; padding: 0; margin: 0 0 22px; display: grid; gap: 10px; }
.body--light .fx-partner-card__list li {
    display: flex; align-items: flex-start; gap: 10px;
    font-size: 14px; color: #3f4451; line-height: 1.5;
}
.body--light .fx-partner-card__list .lucide-icon { width: 17px; height: 17px; color: #15284b; flex-shrink: 0; margin-top: 2px; }

.body--light .fx-partner-card__cta {
    margin-top: auto; align-self: flex-start;
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 14px; font-weight: 600; color: #15284b; text-decoration: none;
    padding: 11px 20px; border: 1px solid #ddd6f9; border-radius: 100px;
    background: #fff; transition: all .25s;
}
.body--light .fx-partner-card__cta:hover { background: #15284b; border-color: #15284b; color: #fff; }
.fx-partner-card__cta .lucide-icon { width: 15px; height: 15px; }

@media (max-width: 900px) {
    .fx-partner-row { grid-template-columns: 1fr; }
    .body--light .fx-partner-card { padding: 26px 22px; }
}

/* partner logos: give the square holding mark real presence */
.fx-partner-card__logo--square { height: 72px; }
.fx-partner-card__logo--square img { max-height: 72px; max-width: 72px; }
.body--light .fx-partner-card__logo img { image-rendering: -webkit-optimize-contrast; }
@media (max-width: 900px) {
    .fx-partner-card__logo--square, .fx-partner-card__logo--square img { height: 60px; max-height: 60px; max-width: 60px; }
}

/* ================================================================= */
/* FULL MOBILE PASS — overrides inline sizes/grids from blade         */
/* ================================================================= */
@media (max-width: 900px) {
    /* inline grid-template-columns on section grids must collapse */
    .fx-features-grid,
    .fx-integrations,
    .fx-pricing-preview,
    .fx-prem-metrics-grid,
    .fx-prem-growth-row,
    .fx-showcase-grid,
    .fx-usecase-grid,
    .fx-blog-grid,
    .fx-pos-row,
    .fx-clients-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (max-width: 768px) {
    /* --- page hero typography: kill oversized inline font-size --- */
    .fx-page-hero .fx-hero__title,
    .fx-page-hero h1,
    .body--light .fx-page-hero h1 { font-size: clamp(28px, 8vw, 34px) !important; line-height: 1.2 !important; }
    .fx-page-hero .fx-hero__sub { font-size: 15px !important; line-height: 1.65; }
    .fx-hero__badge { font-size: 12px; padding: 7px 14px; }
    .body--light .fx-h2 { font-size: clamp(22px, 6.4vw, 27px) !important; line-height: 1.25; }
    .fx-subtext, .body--light .fx-subtext { font-size: 14.5px; }
    .fx-center-head { margin-bottom: 26px; }

    /* --- section grids: single column where cards need room --- */
    .fx-pricing-preview,
    .fx-pos-row,
    .fx-prem-metrics-grid,
    .fx-blog-grid,
    .fx-showcase-grid,
    .fx-split-row,
    .fx-contact-grid,
    .fx-prem-hero-row,
    .fx-prem-migration-row,
    .fx-prem-testimonial-lg,
    .fx-pay-methods-row { grid-template-columns: 1fr !important; }

    /* two-up where the content is short */
    .fx-features-grid,
    .fx-integrations,
    .fx-usecase-grid,
    .fx-prem-growth-row,
    .fx-clients-grid,
    .fx-prem-ratings { grid-template-columns: repeat(2, 1fr) !important; gap: 12px; }
    .fx-integrations .fx-integ-item { padding: 14px 10px; flex-direction: column; text-align: center; gap: 8px; }
    .fx-integrations .fx-integ-item span { font-size: 12.5px; line-height: 1.3; }

    /* --- cards: tighter padding on small screens --- */
    .body--light .fx-feature,
    .body--light .fx-price-card,
    .body--light .fx-pos-card,
    .body--light .fx-partner-card,
    .body--light .fx-prem-quote-card,
    .body--light .fx-prem-growth-card,
    .body--light .fx-prem-migration-card,
    .body--light .fx-contact-form,
    .body--light .fx-contact-info,
    .body--light .fx-showcase-card,
    .body--light .fx-blog-featured { padding: 22px 18px; }
    .body--light .fx-block { padding: 44px 0; }
    .body--light .fx-block--sm { padding: 30px 0; }

    /* --- price card --- */
    .body--light .fx-price-card__amount { font-size: 38px; }
    .body--light .fx-price-card__cta,
    .body--light .fx-price-card__call { width: 100%; justify-content: center; }

    /* --- blog --- */
    .fx-blog-featured { grid-template-columns: 1fr !important; }
    .fx-blog-featured__img { min-height: 170px; }
    .fx-blog-cats { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 6px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
    .fx-blog-cats::-webkit-scrollbar { display: none; }
    .fx-blog-cat { white-space: nowrap; flex-shrink: 0; }

    /* --- article: long content must never push the page --- */
    .fx-article__title { font-size: clamp(24px, 7vw, 30px); line-height: 1.25; }
    .fx-article__content { font-size: 15.5px; }
    .fx-article__content h2 { font-size: 21px; }
    .fx-article__content h3 { font-size: 18px; }
    .fx-article__content img { max-width: 100%; height: auto; }
    .fx-article__content pre { overflow-x: auto; }
    .fx-article__content table { display: block; overflow-x: auto; white-space: nowrap; max-width: 100%; }
    .fx-article__cta { flex-direction: column; align-items: stretch; gap: 14px; text-align: left; }
    .fx-article__cta .fx-btn { width: 100%; justify-content: center; }
    .fx-article__share { flex-direction: row; flex-wrap: wrap; position: static; }

    /* --- comparison table: scroll with an affordance --- */
    .fx-compare-table { position: relative; -webkit-overflow-scrolling: touch; }
    .fx-compare-table table { min-width: 560px; }
    .fx-compare-table th, .fx-compare-table td { padding: 11px 12px; font-size: 12.5px; }
    .fx-compare-table th { font-size: 13px; }
    .fx-compare-table th small { font-size: 11px; font-weight: 500; }
    .body--light .fx-compare-table::after {
        content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 34px;
        background: linear-gradient(90deg, rgba(255,255,255,0), #fff);
        pointer-events: none; border-radius: 0 16px 16px 0;
    }

    /* --- CTA / buttons: full width, comfortable tap targets --- */
    .fx-cta-box__btns, .fx-cta-mini__right, .fx-hero__btns { flex-direction: column; align-items: stretch; width: 100%; }
    .fx-cta-box__btns .fx-btn, .fx-cta-mini__right .fx-btn, .fx-hero__btns .fx-btn { width: 100%; justify-content: center; }
    .body--light .fx-cta-mini { flex-direction: column; align-items: flex-start; gap: 16px; text-align: left; }
    .body--light .fx-btn { min-height: 46px; }
    .body--light .fx-cta-box { padding: 30px 20px; }
    .body--light .fx-cta-box__title { font-size: 24px; line-height: 1.25; }

    /* --- forms --- */
    .fx-form-row { grid-template-columns: 1fr !important; }
    .body--light .fx-form-group input,
    .body--light .fx-form-group textarea,
    .body--light .fx-auth-form input { font-size: 16px; }   /* stops iOS zoom-on-focus */
    .fx-turnstile .cf-turnstile { justify-content: center; min-width: 0; }

    /* --- stats / footer --- */
    .fx-stats-row { flex-wrap: wrap; }
    .footer__grid { grid-template-columns: repeat(2, 1fr) !important; gap: 26px 18px; }
    .footer__bottom { flex-direction: column; gap: 10px; text-align: center; }
}

@media (max-width: 480px) {
    .fx-features-grid,
    .fx-prem-growth-row { grid-template-columns: 1fr !important; }
    /* compact tiles stay two-up even on small phones */
    .fx-integrations,
    .fx-usecase-grid,
    .fx-clients-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px; }
    .fx-integrations .fx-integ-item { padding: 12px 8px; }
    .fx-integrations .fx-integ-item span { font-size: 11.5px; }
    .fx-prem-ratings { grid-template-columns: 1fr !important; }
    .body--light .fx-price-card__amount { font-size: 34px; }
    .fx-partner-card__head { gap: 10px; }
    .footer__grid { grid-template-columns: 1fr !important; }
}

/* ---- horizontally scrollable table wrapper with affordance ---- */
.fx-table-scroll { position: relative; }
.fx-table-scroll__hint { display: none; }
@media (max-width: 768px) {
    .fx-table-scroll__hint {
        display: inline-flex; align-items: center; gap: 6px;
        font-size: 12px; font-weight: 600; color: #8b8aa3;
        margin-bottom: 10px;
    }
    .fx-table-scroll__hint .lucide-icon { width: 14px; height: 14px; color: #15284b; }
    .body--light .fx-table-scroll::after {
        content: ''; position: absolute; top: 30px; right: 0; bottom: 0; width: 36px;
        background: linear-gradient(90deg, rgba(255,255,255,0), #fff);
        pointer-events: none; z-index: 2; border-radius: 0 16px 16px 0;
    }
    /* the inner scroller no longer needs its own fade */
    .body--light .fx-compare-table::after { content: none; }
}

/* ---- footer on mobile: brand full width, link columns two-up ---- */
@media (max-width: 768px) {
    .footer__top { grid-template-columns: repeat(2, 1fr) !important; gap: 28px 18px !important; }
    .footer__brand { grid-column: 1 / -1; }
    .footer__col h4, .footer__title { margin-bottom: 12px; font-size: 14px; }
    .footer__link { font-size: 13.5px; }
    .footer__bottom { display: flex !important; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
}
@media (max-width: 340px) {
    .footer__top { grid-template-columns: 1fr !important; gap: 22px !important; }
}
.body--light .fx-blog-featured__tag {
    display: inline-flex; align-items: center; gap: 6px; width: auto; align-self: flex-start;
    background: #f2efff; border: 1px solid #e2ddfa; color: #15284b;
    font-size: 11px; font-weight: 700; letter-spacing: .6px;
    padding: 5px 12px; border-radius: 100px;
}
.body--light .fx-blog-featured__tag .lucide-icon { width: 13px; height: 13px; }

/* ---- big brand wordmark: visible on the light theme ---- */
.body--light .fx-bigbrand { background: #fff; padding: 30px 0 10px; }
.body--light .fx-bigbrand__text {
    color: rgba(21, 40, 75, 0.07);
    font-size: clamp(70px, 17vw, 250px);
}
@media (max-width: 768px) {
    .body--light .fx-bigbrand { padding: 18px 0 6px; }
}

/* ---------------------------------------------------------------
   Bölmə sonundakı keçid.

   Hər bölmə bir vədi izah edir və sonunda həmin vədi yoxlamağa
   aparan bir düymə qoyur, ona görə ziyarətçi hər ekranda "sonra
   hara?" sualına cavab görür. Əvvəl bölmələr sözlə bitirdi və
   oxucu özü yol axtarmalı idi.
--------------------------------------------------------------- */
.fx-section-cta { display: flex; justify-content: center; margin-top: 44px; }
.fx-section-cta .fx-btn { min-width: 220px; justify-content: center; }
@media (max-width: 640px) {
    .fx-section-cta { margin-top: 32px; }
    .fx-section-cta .fx-btn { width: 100%; }
}

/* ---------------------------------------------------------------
   Barmaqla tutula bilən hədəflər.

   Ölçdükdə mobil ekranda 22 keçid 44 pikseldən alçaq idi. Ən pisi
   telefon nömrəsi: cəmi 22 piksel hündürlükdə, halbuki bu, saytın
   əsas əlaqə yoludur. Alçaq hədəf gözlə görünür, barmaqla tutulmur;
   adam iki-üç dəfə cəhd edir və imtina edir.

   Ölçü mətni böyütmədən qazanılır: yalnız toxunma sahəsi genişlənir.
--------------------------------------------------------------- */
.topbar__phone,
.lang-switcher__btn,
.fx-appicons__all,
.footer__link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

/* Altlıqdakı keçidlər sütun halındadır: hündürlük artanda aralarındakı
   məsafə də artır, yoxsa böyümüş sahələr bir-birinə dəyir. */
.footer__link { padding: 2px 0; }

/* Şərtlər qutusu 18 piksel idi: mobil barmaq üçün ən çətin element.
   Qutunun özü böyüyür, yanındakı yazı da toxunma sahəsinə daxil olur. */
.form-check input[type="checkbox"],
.checkbox-row input[type="checkbox"],
input[type="checkbox"] {
    width: 22px;
    height: 22px;
    flex: none;
}
label:has(> input[type="checkbox"]) {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    cursor: pointer;
}

/* Sətir içindəki hüquqi keçidlər 17 piksel idi. Mətnin axarını
   pozmadan yalnız toxunma sahəsi böyüyür. */
.form-check a,
.checkbox-row a,
.fx-callback-section__terms a { display: inline-block; padding: 8px 0; }


/* ---------------------------------------------------------------
   Ticimax dizayn dili.

   Palet bənövşəyidən tünd-göyə keçdi: bənövşəyi gənc və startap
   oxunur, tünd-göy isə pul saxlanan yer kimi. Ölçülər ticimax-dan
   götürülüb — 90/75 bölmə aralığı və nazik iri başlıqlar.
--------------------------------------------------------------- */
:root {
    --tx-navy:      #15284b;
    --tx-navy-dark: #0f203e;
    --tx-blue:      #4a76fd;
    --tx-green:     #28aa31;
    --tx-band:      #e5e8eb;
}

/* Bölmə ritmi: yuxarıdan geniş, aşağıdan bir az dar. */
.fx-block { padding: 90px 0 75px; }
@media (max-width: 900px) { .fx-block { padding: 56px 0 48px; } }

/* Açıq boz zolaq: ağ bölmələr arasında ayırıcı kimi işləyir. */
.fx-block--band { background: var(--tx-band); }

/* ================================================================ */
/* HERO — korporativ tünd bant                                      */
/*                                                                  */
/* Əvvəl hero açıq fonda, mətn ortada idi. Ziyarətçi səhifəyə       */
/* girəndə əvvəl boşluq, sonra yazı görürdü. İndi tünd bant və      */
/* solda mətn, sağda məhsulun özü: göz soldan sağa oxuyur, yəni     */
/* əvvəl "nə təklif olunur", sonra "necə görünür".                  */
/* ================================================================ */
/* Bant dərinliyi ekranla ölçülür.
 *
 * 1900x950-də ticimax-ın hero-su 700 piksel, bizimki 611 idi: mətn
 * başlığın altına yapışır, aşağıda isə nəfəs yeri qalmırdı. Sabit
 * piksel yazmaq alçaq ekranda bandı ekrandan daşırdı, ona görə hədd
 * qoyulmuş nisbət işlədilir. */
.fx-hero2 {
    background: #15284b;
    min-height: clamp(560px, 72vh, 720px);
}

/* Başlığın başlıq zolağından məsafəsi.
 *
 * Ölçdükdə ticimax-da bu məsafə 116 piksel, bizdə 50 idi: mətn zolağa
 * yapışırdı. Rəqəm birbaşa yazılmır, zolaqların öz hündürlüyündən
 * hesablanır, ona görə zolaq dəyişsə bura da uyğunlaşır. */
.body--light .fx-hero2 {
    padding-top: calc(var(--fx-topbar-h) + var(--fx-header-h) + 110px);
    padding-bottom: 118px;
}
@media (max-width: 980px) {
    .body--light .fx-hero2 {
        padding-top: calc(var(--fx-topbar-h) + var(--fx-header-h) + 56px);
        padding-bottom: 80px;
    }
}
@media (max-width: 560px) {
    .body--light .fx-hero2 {
        padding-top: calc(var(--fx-topbar-h) + var(--fx-header-h) + 34px);
        padding-bottom: 64px;
    }
}
/* Video arxada, örtük onun üstündə, mətn ən üstdə.
 *
 * Örtük soldan sağa açılır: mətn solda dayanır və orada tünd fon
 * lazımdır, videodakı telefon isə sağdadır və görünməlidir. */
.fx-hero2__video {
    position: absolute; inset: 0; z-index: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    pointer-events: none;
}
.fx-hero2__bg {
    z-index: 1;
    background:
        linear-gradient(90deg,
            rgba(15,32,62,.97) 0%,
            rgba(15,32,62,.92) 30%,
            rgba(15,32,62,.62) 58%,
            rgba(15,32,62,.34) 100%),
        linear-gradient(180deg,
            rgba(15,32,62,.62) 0%,
            rgba(15,32,62,.10) 34%,
            rgba(15,32,62,.52) 100%);
}

/* Mətn solda, sağ yarı videoya buraxılır. */
.fx-hero2__grid { display: block; }

.fx-hero2__head { text-align: left; max-width: 586px; margin: 0; }


.fx-hero2__title {
    font-size: clamp(32px, 2.65vw, 50px);
    font-weight: 300;          /* nazik başlıq = korporativ ton */
    line-height: 1.16;
    color: #fff;
}
.fx-hero2__title em { color: #fff; font-weight: 700; }

.fx-hero2__sub {
    font-size: 20px;
    line-height: 1.4;
    color: rgba(255,255,255,.8);
    margin: 0 0 34px;
    max-width: 586px;
}

.fx-hero2__btns { justify-content: flex-start; }
.fx-hero2__btns .fx-btn--accent { background: #4a76fd; }
.fx-hero2__btns .fx-btn--accent:hover { background: #3b66ee; box-shadow: 0 14px 34px rgba(74,118,253,.42); }
.fx-hero2__btns .fx-btn--glass {
    background: rgba(255,255,255,.08); color: #fff;
    border-color: rgba(255,255,255,.24);
}
.fx-hero2__btns .fx-btn--glass:hover { background: rgba(255,255,255,.15); }

.fx-hero2__trust { justify-content: flex-start; margin-top: 24px; }
.fx-hero2__trust span { color: rgba(255,255,255,.6); }
.fx-hero2__trust .lucide-icon { color: #6ee08a; }


/* --- başlıq zolağı tünd hero üzərində --- */
/* Ana səhifədən başqa hər səhifədə header--solid var, ona görə bu   */
/* seçici yalnız ana səhifənin sürüşdürülməmiş halına düşür.        */
.body--light .header:not(.scrolled):not(.header--solid) .header__link { color: rgba(255,255,255,.85); }
.body--light .header:not(.scrolled):not(.header--solid) .header__link:hover,
.body--light .header:not(.scrolled):not(.header--solid) .header__link.active { color: #fff; }

/* --- hesab çipi: hər iki fonda oxunmalıdır ---
 *
 * Çip iki fərqli fonun üstündə dayanır: ana səhifənin sürüşdürülməmiş
 * halında tünd hero, sürüşəndə isə ağ başlıq. Rəngləri yalnız bir hal
 * üçün yazılmışdı, ona görə hər halda bir sətir itirdi: ağ fonda
 * «Xoş gəldiniz» (ağ mətn), tünd fonda isə ad (tünd mətn) görünmürdü.
 * İndi hər iki hal ayrıca yazılır. */
.body--light .header__user { background: rgba(20,30,60,.06) !important; border-color: rgba(20,30,60,.12) !important; }
.body--light .header__user:hover { background: rgba(20,30,60,.10) !important; }
.body--light .header__user-info small { color: #6b7280 !important; }
.body--light .header__user-info strong { color: #15181a !important; }

.body--light .header:not(.scrolled):not(.header--solid) .header__user { background: rgba(255,255,255,.12) !important; border-color: rgba(255,255,255,.24) !important; }
.body--light .header:not(.scrolled):not(.header--solid) .header__user:hover { background: rgba(255,255,255,.18) !important; }
.body--light .header:not(.scrolled):not(.header--solid) .header__user-info small { color: rgba(255,255,255,.72) !important; }
.body--light .header:not(.scrolled):not(.header--solid) .header__user-info strong { color: #fff !important; }

@media (max-width: 1024px) {
    .fx-hero2__head { max-width: 560px; }
}
@media (max-width: 900px) {
    .fx-hero2 { min-height: 0; }
    .fx-hero2__sub { font-size: 17.5px; }
    /* Dar ekranda video yüklənmir; poster şəkli qalır və onun üstündəki
       örtük daha tünd olur, çünki mətn bütün eni tutur. */
    .fx-hero2__bg {
        background:
            linear-gradient(180deg, rgba(15,32,62,.94) 0%, rgba(15,32,62,.88) 55%, rgba(15,32,62,.95) 100%);
    }
    /* Mobildə başlıq zolağı ağ fona qayıdır. */
    .body--light .header:not(.scrolled):not(.header--solid) .header__nav.open .header__link { color: #233844; }
}

/* Ana səhifədə başlıq zolağı tünd hero-nun üstündə şəffaf dayanır və
   yalnız sürüşdürəndə ağ fon alır. Bu, ticimax-dakı kimi hero-nun
   bütöv bir bant kimi görünməsini verir. */
.body--light .header:not(.scrolled):not(.header--solid) {
    background: transparent !important;
    box-shadow: none;
    border-bottom-color: transparent;
}
/* Tünd fonda düymələr: "Giriş" ağ kontur, "Qeydiyyat" ağ dolğu. */
.body--light .header:not(.scrolled):not(.header--solid) .btn--header-ghost { color: rgba(255,255,255,.88); }
.body--light .header:not(.scrolled):not(.header--solid) .btn--header-ghost:hover { color: #fff; background: rgba(255,255,255,.12); }
.body--light .header:not(.scrolled):not(.header--solid) .btn--white {
    background: #fff !important; color: #15284b !important;
}
.body--light .header:not(.scrolled):not(.header--solid) .btn--white:hover { background: #eef2fb !important; }
.body--light .header:not(.scrolled):not(.header--solid) .header__burger { color: #fff; }

/* `.body--light h1` qlobal qaydası (0,1,1) tək sinifdən güclüdür, ona
   görə hero başlığı seçicisi eyni səviyyəyə qaldırılır. Bu olmasa
   başlıq tünd fonda tünd qalır. */
.body--light .fx-hero2__title { color: #fff; }
.body--light .fx-hero2__sub   { color: rgba(255,255,255,.8); }

/* Loqo normalda qaraya boyanır (brightness(0)); tünd hero üzərində ağ
   olmalıdır. */
.body--light .header:not(.scrolled):not(.header--solid) .header__logo-img {
    filter: brightness(0) invert(1);
}


/* --- xüsusiyyət kartlarındakı sübut sətri --- */
/* Tətbiq ikonları və ödəniş loqoları hero-dan bura köçdü: iddianın  */
/* yanında durduqda daha inandırıcıdır. */
.fx-feature__proof {
    display: flex; align-items: center; gap: 10px;
    margin-top: 16px; flex-wrap: wrap;
}
.fx-feature__proof .fx-appicon {
    width: 44px; height: 44px; max-width: none;
    border-radius: 11px; flex: 0 0 auto;
}
.fx-feature__proof--pay .fx-pay-logo2 {
    display: inline-flex; align-items: center; justify-content: center;
    height: 34px; padding: 0 11px;
    background: #fff; border: 1px solid #e6e8ee; border-radius: 8px;
}
.fx-feature__proof--pay .fx-pay-logo2 img { height: 15px; width: auto; display: block; }

/* ================================================================ */
/* ÜST ZOLAQ — düzülüş                                              */
/* ================================================================ */

/* Zolaq altındakı başlıqla eyni oxda dayanır: mövqe cümləsi loqonun,
   əlaqə elementləri isə "Qeydiyyat" düyməsinin altında. Əvvəl hər ikisi
   ortaya yığılıb ortada bir yumaq əmələ gətirirdi. */
.body--light .topbar__inner { justify-content: space-between; gap: 24px; }

/* Barmaq üçün qoyulmuş 44 piksel siçanla işlədilən ekranda lazım deyil
   və zolaqdakı elementləri müxtəlif hündürlüyə salırdı. Toxunma
   cihazlarında olduğu kimi qalır. */
@media (pointer: fine) {
    .topbar__phone,
    .lang-switcher__btn { min-height: 34px; }
}

@media (max-width: 768px) {
    .body--light .topbar__inner { justify-content: center; }
}

/* Üst zolaq hero-nun ölçüsünə girmir.
 *
 * Zolaq sabit dayanır, hero isə onun altından başlayır: video zolağın
 * altına keçmir, hero da öz tam hündürlüyünü saxlayır. Başlıq zolağı
 * (loqo və menyu) isə hero-nun üstündə üzməyə davam edir.
 *
 * Ayrıca sinif yazılır ki, digər səhifələrin zolağına toxunulmasın. */
.topbar--above { position: fixed; top: 0; }

.body--light .fx-hero2 {
    margin-top: var(--fx-topbar-h);
    padding-top: calc(var(--fx-header-h) + 110px);
}
@media (max-width: 980px) {
    .body--light .fx-hero2 { padding-top: calc(var(--fx-header-h) + 56px); }
}
@media (max-width: 560px) {
    .body--light .fx-hero2 { padding-top: calc(var(--fx-header-h) + 34px); }
}

/* Başlıq zolağı hələ də videonun üstündədir, ona görə hero-nun yuxarı
   kənarı bir qədər tündləşdirilir ki, loqo və menyu itməsin. */
.fx-hero2__bg::before {
    content: '';
    position: absolute; left: 0; right: 0; top: 0;
    height: 130px;
    background: linear-gradient(180deg, rgba(10,22,44,.45) 0%, transparent 100%);
}

/* ================================================================ */
/* REFERANS ZOLAĞI — hero-nun davamı                                */
/*                                                                  */
/* Əvvəl bu bölmə ağ fonda, ayrıca başlıqla dayanırdı: hero bitirdi, */
/* ağ zolaq başlayırdı, loqolar isə ağ kartların içində idi. İndi    */
/* zolaq hero ilə eyni navy sahədə oturur və loqolar birbaşa fonun   */
/* üzərində, ağ siluet kimi görünür.                                 */
/* ================================================================ */
.fx-logostrip {
    background: linear-gradient(180deg, #15284b 0%, #1d3357 100%);
    padding: 52px 0 46px;
}

/* Loqolar öz rənglərində qalır, altlarında ağ lövhə ilə.
 *
 * Əvvəl hamısı `brightness(0) invert(1)` ilə ağa çevrilirdi. Nazik
 * sözlü loqolarda bu işləyirdi, amma dolğun nişanı olanlarda yox:
 * salonbazarı.az-ın maqenta kvadratı və içindəki ağ forma birlikdə
 * ağardı və loqo bütöv ləkəyə döndü. Ama Cars-da da eyni.
 *
 * Brendin öz rəngini göstərmək həm doğrudur, həm də oxunaqlıdır. */
.fx-logostrip .fx-ref-card {
    background: #fff;
    border: 0;
    border-radius: 12px;
    padding: 0 22px;
    height: 78px;
    transition: transform .25s, box-shadow .25s;
}
.fx-logostrip .fx-ref-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 32px rgba(0,0,0,.22);
}
.fx-logostrip .fx-ref-card img {
    max-height: 40px;
    max-width: 100%;
    width: auto;
    object-fit: contain;
}

/* Üst-üstə düzülmüş loqolar daha hündür ola bilər.
 *
 * 40px hündürlük söz şəklində olan loqo üçün doğrudur: onlar eni ilə
 * kartı doldurur. Nişanı sözün üstündə olan loqoda isə söz həmin
 * hündürlüyün yarısını alır və 72px enində qalıb qonşularının yanında
 * itir. Eyni şəkil, sadəcə ölçü fərqi. */
.fx-logostrip .fx-ref-card--stacked img { max-height: 56px; }

.fx-logostrip__note {
    margin: 30px 0 0;
    text-align: center;
    color: #fff;
    font-size: 23px;
    font-weight: 500;
    letter-spacing: -.01em;
}

.fx-logostrip .fx-refs__cta { margin-top: 26px; text-align: center; }
.fx-logostrip .fx-refs__cta .fx-btn--glass {
    background: rgba(255,255,255,.08);
    color: #fff;
    border: 1px solid rgba(255,255,255,.24);
}
.fx-logostrip .fx-refs__cta .fx-btn--glass:hover { background: rgba(255,255,255,.16); }

/* Oxlar tünd fonda */
.fx-logostrip .fx-refs__arrow {
    background: rgba(255,255,255,.08);
    border-color: rgba(255,255,255,.2);
    color: #fff;
}
.fx-logostrip .fx-refs__arrow:hover { background: rgba(255,255,255,.18); }

@media (max-width: 900px) {
    .fx-logostrip { padding: 38px 0 34px; }
    .fx-logostrip .fx-ref-card { height: 62px; }
    .fx-logostrip .fx-ref-card img { max-height: 30px; }
    .fx-logostrip .fx-ref-card--stacked img { max-height: 44px; }
    .fx-logostrip__note { font-size: 18px; margin-top: 22px; }
}

/* ================================================================ */
/* ANA SƏHİFƏ — hero-dan aşağıdakı bölmələr                         */
/*                                                                  */
/* Aşağıda on bölmə var idi və hamısı eyni qəlibdə: ortada etiket,   */
/* ortada başlıq, ortada alt yazı, ağ fon. Səhifə aşağı getdikcə     */
/* eyni şey təkrarlanır, harada olduğun bilinmirdi.                  */
/*                                                                  */
/* Burada başlıq bloku sola çəkilir, alt yazı sağ sütuna keçir,      */
/* qarşısında sıra nömrəsi dayanır və altından nazik xətt keçir.     */
/* Yalnız ana səhifəyə aiddir.                                      */
/* ================================================================ */
.page-home { counter-reset: fxsec; }

.page-home .fx-center-head {
    counter-increment: fxsec;
    display: grid;
    grid-template-columns: auto minmax(0, 1.1fr) minmax(0, .78fr);
    column-gap: 30px;
    align-items: start;
    text-align: left;
    max-width: none;
    padding-bottom: 26px;
    border-bottom: 1px solid rgba(21,40,75,.13);
    margin-bottom: 48px;
}

/* Sıra nömrəsi: səhifədə harada olduğunu göstərir. */
.page-home .fx-center-head::before {
    content: counter(fxsec, decimal-leading-zero);
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: start;
    padding-top: 4px;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: .06em;
    color: rgba(21,40,75,.4);
    font-variant-numeric: tabular-nums;
}

.page-home .fx-center-head > .fx-tag {
    grid-column: 2; grid-row: 1;
    justify-self: start;
    margin: 0 0 14px;
}
.page-home .fx-center-head > .fx-h2 {
    grid-column: 2; grid-row: 2;
    margin: 0;
}
/* Alt yazı sağ sütunda, başlığın alt kənarına hizalanır. */
.page-home .fx-center-head > .fx-subtext {
    grid-column: 3; grid-row: 1 / span 2;
    align-self: end;
    margin: 0;
    max-width: 400px;
    padding-bottom: 4px;
}

/* Boz zolaqlar görünən olsun: əvvəl ağla fərqi 5 vahid idi, ritm
   hiss olunmurdu. */
.page-home .fx-block--accent-bg {
    background: #eaeef5;
    border-top: 0;
    border-bottom: 0;
}

@media (max-width: 900px) {
    .page-home .fx-center-head {
        grid-template-columns: auto 1fr;
        row-gap: 6px;
        column-gap: 18px;
        margin-bottom: 34px;
    }
    .page-home .fx-center-head > .fx-subtext {
        grid-column: 2; grid-row: 3;
        align-self: start;
        max-width: none;
        margin-top: 10px;
    }
}

/* Rəy kartlarında hərf yerinə brendin öz loqosu.
 *
 * Dairə açıq fon alır: loqolar tünd rəngdədir, əvvəlki dolğun navy
 * dairədə görünməzdilər. Loqo dairəni doldurmur, içinə yerləşir, ona
 * görə enli və kvadrat loqolar eyni cür oturur. */
.fx-testimonial__avatar {
    flex: 0 0 auto;
    /* 44px-də enli sözlü loqolar (GNL Couture kimi) oxunmurdu. */
    width: 54px;
    height: 54px;
    background: #fff;
    border: 1px solid rgba(21,40,75,.12);
    overflow: hidden;
    padding: 6px;
}
.body--light .fx-testimonial__avatar { background: #fff; }

.fx-testimonial__avatar img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* Girişli adam giriş/qeydiyyat səhifəsində: vəziyyət açıq yazılır. */
.fx-signed-in {
    display: flex; align-items: center; justify-content: space-between;
    gap: 18px; flex-wrap: wrap;
    max-width: 520px; margin: 0 auto 22px;
    padding: 14px 18px;
    border-radius: 14px;
    background: rgba(21,40,75,.05);
    border: 1px solid rgba(21,40,75,.14);
}
.fx-signed-in__text { font-size: 14px; color: #4b5563; }
.fx-signed-in__text strong { color: #16152e; }
.fx-signed-in__actions { display: flex; gap: 8px; align-items: center; }
.fx-signed-in__btn {
    display: inline-flex; align-items: center; min-height: 36px; padding: 0 16px;
    border-radius: 100px; border: 1px solid rgba(21,40,75,.22);
    background: none; color: #15284b;
    font-size: 13.5px; font-weight: 500; font-family: inherit;
    cursor: pointer; text-decoration: none; transition: background .2s;
}
.fx-signed-in__btn:hover { background: rgba(21,40,75,.08); }
.fx-signed-in__btn--primary { background: #15284b; color: #fff; border-color: #15284b; }
.fx-signed-in__btn--primary:hover { background: #0f203e; }

/* ================================================================ */
/* MOBİL BAŞLIQ: giriş və menyu yan-yana                            */
/*                                                                  */
/* Əvvəl sağ küncdə tək menyu düyməsi vardı və o, tünd hero-nun     */
/* üstündə ağ kvadrat kimi dururdu. Giriş isə menyunun içində       */
/* gizlənirdi: qayıdan istifadəçi onu açıb axtarmalı olurdu.        */
/* ================================================================ */
.header__mobile { display: none; align-items: center; gap: 10px; }

.header__mobile-login {
    display: inline-flex; align-items: center;
    height: 40px; padding: 0 16px;
    border-radius: 100px;
    font-size: 14px; font-weight: 600; text-decoration: none;
    white-space: nowrap;
}

@media (max-width: 900px) {
    .header__mobile { display: flex; }
    .header__actions { display: none; }

    /* Menyu düyməsi: dolğun kvadrat yox, nazik konturlu dairə. */
    .header__burger,
    .body--light .header__burger {
        width: 42px; height: 42px;
        border-radius: 12px;
        background: none;
        border: 1px solid rgba(255,255,255,.26);
        display: inline-flex; flex-direction: column;
        align-items: center; justify-content: center; gap: 5px;
    }
    .header__burger span,
    .body--light .header__burger span {
        width: 17px; height: 2px; border-radius: 2px;
        background: #fff;
        transition: background .2s;
    }

    /* Tünd hero-nun üstündə: ağ kontur. */
    .header__mobile-login {
        background: rgba(255,255,255,.12);
        border: 1px solid rgba(255,255,255,.24);
        color: #fff;
    }

    /*
     * Ağ başlıqda (digər səhifələr və sürüşdürülmüş hal) rənglər
     * tərsinə çevrilir, yoxsa ağ üstündə ağ qalır.
     */
    .body--light .header.scrolled .header__burger,
    .body--light .header--solid .header__burger { border-color: rgba(21,24,26,.2); }
    .body--light .header.scrolled .header__burger span,
    .body--light .header--solid .header__burger span { background: #15181a; }

    .body--light .header.scrolled .header__mobile-login,
    .body--light .header--solid .header__mobile-login {
        background: #15181a; border-color: #15181a; color: #fff;
    }
}

/* ================= xüsusiyyət kartlarının vizual altlığı =================
   Altı kartın dördü boş qurtarırdı və hündürlükləri tullanırdı: yazı bitən
   yerdə kart da bitirdi. İndi hər kartın dibində kiçik illüstrasiya var və
   kartlar bərabər hündürlükdədir. */
.fx-feature { display: flex; flex-direction: column; }
.fx-feature__proof { margin-top: auto; padding-top: 18px; }
.fx-feature__viz { margin-top: auto; padding-top: 18px; }

.fx-viz-browser { border: 1px solid rgba(255,255,255,.12); border-radius: 12px; overflow: hidden; background: rgba(255,255,255,.04); }
.fx-viz-dots { display: flex; gap: 5px; padding: 9px 11px; border-bottom: 1px solid rgba(255,255,255,.1); }
.fx-viz-dots i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.22); }
.fx-viz-browser img { width: 100%; display: block; aspect-ratio: 16/7; object-fit: cover; object-position: top; }

.fx-viz-dash em { display: block; font-style: normal; font-size: 11.5px; color: rgba(255,255,255,.45); margin-bottom: 7px; }
.fx-viz-bars { display: flex; align-items: flex-end; gap: 6px; height: 62px; padding: 12px 14px;
               border: 1px solid rgba(255,255,255,.12); border-radius: 12px; background: rgba(255,255,255,.04); }
.fx-viz-bars i { flex: 1; border-radius: 4px 4px 2px 2px; background: linear-gradient(180deg, #d9f24f, rgba(217,242,79,.35)); }

.fx-viz-track { display: flex; border: 1px solid rgba(255,255,255,.12); border-radius: 12px;
                background: rgba(255,255,255,.04); padding: 14px 10px 12px; }
.fx-viz-track span { flex: 1; text-align: center; font-size: 11px; color: rgba(255,255,255,.5); position: relative; }
.fx-viz-track span i { display: block; width: 11px; height: 11px; border-radius: 50%;
                       background: rgba(255,255,255,.2); margin: 0 auto 6px; position: relative; z-index: 1; }
.fx-viz-track span::before { content: ''; position: absolute; top: 5px; left: -50%; right: 50%; height: 2px;
                             background: rgba(255,255,255,.14); }
.fx-viz-track span:first-child::before { display: none; }
.fx-viz-track span.on { color: rgba(255,255,255,.85); }
.fx-viz-track span.on i { background: #d9f24f; }
.fx-viz-track span.on::before { background: #d9f24f; }

.fx-viz-chat { display: grid; gap: 7px; border: 1px solid rgba(255,255,255,.12); border-radius: 12px;
               background: rgba(255,255,255,.04); padding: 13px; font-size: 12.5px; line-height: 1.45; }
.fx-viz-chat span { max-width: 88%; padding: 8px 12px; border-radius: 13px; }
.fx-viz-chat .in { background: rgba(255,255,255,.1); color: rgba(255,255,255,.85); justify-self: start; border-bottom-left-radius: 4px; }
.fx-viz-chat .out { background: #1fa855; color: #fff; justify-self: end; border-bottom-right-radius: 4px; }