/* ============================================================
   FIXPAY LANDING — Shared Blue/Indigo Theme
   Chrome (topbar + navbar + footer) + common inner-page blocks
   Loaded AFTER landing-base.css so it overrides the old palette.
   ============================================================ */
:root {
    --fp-primary:    #2563eb;   /* blue-600  */
    --fp-primary-d:  #1d4ed8;   /* blue-700  */
    --fp-secondary:  #4f46e5;   /* indigo-600 */
    --fp-ink:        #0f172a;   /* slate-900 headings */
    --fp-text:       #475569;   /* slate-600 body */
    --fp-muted:      #64748b;   /* slate-500 */
    --fp-light:      #f8fafc;   /* slate-50  */
    --fp-light2:     #eff6ff;   /* blue-50   */
    --fp-border:     #e5e9f2;
    --fp-navy:       #0b1220;   /* deep footer/topbar */
    /* keep old token names mapped to the new palette so any
       leftover references still render blue, never pink */
    --fp-dark:       #0b1220;
    --fp-dark2:      #111a2e;
    --fp-grad:       linear-gradient(135deg, #2563eb 0%, #4f46e5 100%);
    --fp-grad-dark:  linear-gradient(135deg, #0b1220 0%, #111a2e 55%, #0b1220 100%);
    --fp-grad-soft:  linear-gradient(180deg, #eff6ff 0%, #ffffff 100%);
    --fp-shadow:     0 10px 30px rgba(37,99,235,.14);
    --fp-shadow-lg:  0 24px 60px rgba(37,99,235,.18);
}
html, body { font-family: 'Poppins', sans-serif !important; overflow-x: hidden; background: #fff; color: var(--fp-text); }

/* ── TOP BAR ── */
.fp-topbar { background: var(--fp-navy); padding: 8px 0; border-bottom: none; }
.fp-topbar-contact { display: flex; gap: 22px; flex-wrap: wrap; }
.fp-topbar-contact a { color: rgba(255,255,255,.72); font-size: 12.5px; text-decoration: none; display: flex; align-items: center; gap: 6px; transition: color .2s; }
.fp-topbar-contact a i { color: #60a5fa; }
.fp-topbar-contact a:hover { color: #fff; }
.fp-topbar-social { display: flex; justify-content: flex-end; gap: 8px; }
.fp-topbar-social a { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; background: rgba(255,255,255,.09); color: rgba(255,255,255,.75); font-size: 13px; text-decoration: none; transition: all .2s; }
.fp-topbar-social a:hover { background: var(--fp-grad); color: #fff; }

/* ── NAVBAR ── */
.fp-main-nav { background: rgba(255,255,255,.92) !important; backdrop-filter: saturate(180%) blur(10px); padding: 12px 0; box-shadow: 0 1px 0 var(--fp-border), 0 8px 30px rgba(15,23,42,.06); position: sticky; top: 0; z-index: 999; }
.fp-main-nav .navbar-brand img { height: 44px; }
.fp-main-nav .navbar-nav .nav-link { color: #334155 !important; font-size: 14px; font-weight: 600; padding: 8px 16px !important; border-radius: 8px; transition: all .2s; }
.fp-main-nav .navbar-nav .nav-link:hover, .fp-main-nav .navbar-nav .nav-link.active { color: var(--fp-primary) !important; background: var(--fp-light2); }
.fp-auth-btns { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fp-btn-outline { color: var(--fp-primary) !important; border: 1.5px solid #c7d7fb; padding: 7px 20px; border-radius: 9px; font-size: 13.5px; font-weight: 600; text-decoration: none; transition: all .2s; white-space: nowrap; background: #fff; }
.fp-btn-outline:hover { background: var(--fp-light2); border-color: var(--fp-primary); color: var(--fp-primary-d) !important; text-decoration: none; }
.fp-btn-solid { background: var(--fp-grad); color: #fff !important; padding: 7px 20px; border-radius: 9px; font-size: 13.5px; font-weight: 600; text-decoration: none; box-shadow: var(--fp-shadow); transition: all .2s; white-space: nowrap; }
.fp-btn-solid:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(37,99,235,.34); color: #fff !important; text-decoration: none; }
.fp-toggler { border: 1.5px solid var(--fp-border) !important; background: #fff; padding: 6px 10px; border-radius: 8px; display: flex; flex-direction: column; gap: 5px; cursor: pointer; }
.fp-toggler span { display: block; width: 22px; height: 2px; background: var(--fp-ink); border-radius: 2px; }

/* ── SECTIONS / SHARED HELPERS ── */
.fp-section { padding: 84px 0; }
.fp-section-light { background: var(--fp-light); }
.fp-section-dark { background: var(--fp-grad-soft); }
.s-badge { display: inline-block; background: var(--fp-light2); border: 1px solid #dbe6ff; color: var(--fp-primary); font-size: 11.5px; font-weight: 700; padding: 5px 16px; border-radius: 20px; margin-bottom: 14px; letter-spacing: .5px; text-transform: uppercase; }
.fp-sec-title h2 { font-size: 2.2rem; font-weight: 800; color: var(--fp-ink); margin-bottom: 12px; line-height: 1.2; letter-spacing: -.4px; }
.fp-sec-title h2 span, .fp-sec-title h2 .grad-text { background: var(--fp-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.fp-sec-title p { font-size: 15px; color: var(--fp-muted); max-width: 620px; margin: 0 auto; line-height: 1.65; }

/* ── SHARED PAGE HERO (inner pages) ── */
.fp-page-hero { background: var(--fp-grad-dark); padding: 66px 0 56px; position: relative; overflow: hidden; text-align: center; }
.fp-page-hero::before { content: ''; position: absolute; top: -80px; right: -80px; width: 360px; height: 360px; background: radial-gradient(circle,rgba(37,99,235,.28),transparent 65%); border-radius: 50%; }
.fp-page-hero::after { content: ''; position: absolute; bottom: -60px; left: -60px; width: 300px; height: 300px; background: radial-gradient(circle,rgba(79,70,229,.24),transparent 65%); border-radius: 50%; }
.fp-page-hero .inner { position: relative; z-index: 1; }
.fp-page-hero .ph-badge { display: inline-flex; align-items: center; gap: 6px; background: rgba(96,165,250,.14); border: 1px solid rgba(96,165,250,.4); color: #93c5fd; font-size: 12px; font-weight: 600; padding: 6px 18px; border-radius: 20px; margin-bottom: 16px; }
.fp-page-hero h1 { font-size: 2.8rem; font-weight: 800; color: #fff; margin-bottom: 12px; letter-spacing: -.5px; }
.fp-page-hero h1 span { background: linear-gradient(135deg,#60a5fa,#a5b4fc); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.fp-page-hero p { color: rgba(255,255,255,.72); font-size: 15px; max-width: 580px; margin: 0 auto; line-height: 1.7; }
.fp-breadcrumb { margin-top: 20px; }
.fp-breadcrumb a, .fp-breadcrumb span { color: rgba(255,255,255,.6); font-size: 13px; text-decoration: none; }
.fp-breadcrumb a:hover { color: #60a5fa; }
.fp-breadcrumb .sep { margin: 0 8px; color: rgba(255,255,255,.3); }
.fp-breadcrumb .current { color: rgba(255,255,255,.9); }

/* ── FEATURE ROW ── */
.fp-feature { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 22px; }
.fp-feature .ff-icon { width: 46px; height: 46px; border-radius: 12px; background: var(--fp-grad); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 18px; flex-shrink: 0; box-shadow: var(--fp-shadow); }
.fp-feature h6 { font-size: 15px; font-weight: 700; color: var(--fp-ink); margin-bottom: 3px; }
.fp-feature p { font-size: 13px; color: var(--fp-muted); margin: 0; line-height: 1.55; }

/* ── BUTTONS ── */
.btn-hero-primary, .btn-fp { background: var(--fp-grad); color: #fff; padding: 13px 30px; border-radius: 11px; font-size: 15px; font-weight: 600; text-decoration: none; box-shadow: var(--fp-shadow); transition: all .3s; display: inline-flex; align-items: center; gap: 8px; border: none; cursor: pointer; }
.btn-hero-primary:hover, .btn-fp:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(37,99,235,.38); color: #fff; text-decoration: none; }
.btn-hero-secondary, .btn-fp-outline { background: #fff; color: var(--fp-ink); padding: 13px 30px; border-radius: 11px; font-size: 15px; font-weight: 600; border: 1.5px solid var(--fp-border); text-decoration: none; transition: all .3s; display: inline-flex; align-items: center; gap: 8px; }
.btn-hero-secondary:hover, .btn-fp-outline:hover { border-color: var(--fp-primary); color: var(--fp-primary); background: var(--fp-light2); text-decoration: none; }

/* ── CTA ── */
.fp-cta { background: var(--fp-grad); padding: 84px 0; position: relative; overflow: hidden; text-align: center; }
.fp-cta::before { content: ''; position: absolute; top: -90px; right: -90px; width: 380px; height: 380px; background: radial-gradient(circle,rgba(255,255,255,.16),transparent 65%); border-radius: 50%; pointer-events: none; }
.fp-cta::after { content: ''; position: absolute; bottom: -90px; left: -90px; width: 320px; height: 320px; background: radial-gradient(circle,rgba(255,255,255,.12),transparent 65%); border-radius: 50%; pointer-events: none; }
.fp-cta .cta-inner { position: relative; z-index: 1; }
.fp-cta h2 { font-size: 2.5rem; font-weight: 800; color: #fff; margin-bottom: 14px; letter-spacing: -.5px; }
.fp-cta h2 span, .fp-cta h2 .grad-text { color: #dbeafe; -webkit-text-fill-color: #dbeafe; }
.fp-cta p { color: rgba(255,255,255,.9); font-size: 15px; margin-bottom: 30px; }
.fp-cta .btn-fp, .fp-cta .btn-hero-primary { background: #fff; color: var(--fp-primary); box-shadow: 0 14px 34px rgba(0,0,0,.18); }
.fp-cta .btn-fp:hover, .fp-cta .btn-hero-primary:hover { color: var(--fp-primary-d); background: #fff; }
.fp-cta .btn-fp-outline, .fp-cta .btn-hero-secondary { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.45); }
.fp-cta .btn-fp-outline:hover, .fp-cta .btn-hero-secondary:hover { background: rgba(255,255,255,.2); color: #fff; border-color: #fff; }

/* ── FOOTER ── */
.fp-footer { background: var(--fp-navy); padding: 62px 0 42px; border-top: none; }
.fp-footer-desc { color: rgba(255,255,255,.55); font-size: 13px; line-height: 1.7; margin-bottom: 18px; }
.fp-foot-social { display: flex; gap: 8px; }
.fp-foot-social a { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; background: rgba(255,255,255,.08); color: rgba(255,255,255,.65); font-size: 15px; text-decoration: none; transition: all .2s; }
.fp-foot-social a:hover { background: var(--fp-grad); color: #fff; transform: translateY(-2px); }
.fp-foot-title { color: #fff; font-size: 14px; font-weight: 700; margin-bottom: 14px; letter-spacing: .4px; }
.fp-foot-links { list-style: none; padding: 0; margin: 0; }
.fp-foot-links li { margin-bottom: 9px; }
.fp-foot-links li a { color: rgba(255,255,255,.55); font-size: 13px; text-decoration: none; transition: color .2s; }
.fp-foot-links li a:hover { color: #60a5fa; }
.fp-foot-contact { list-style: none; padding: 0; margin: 0 0 10px; }
.fp-foot-contact li { display: flex; align-items: flex-start; gap: 10px; color: rgba(255,255,255,.55); font-size: 13px; margin-bottom: 10px; }
.fp-foot-contact li i { color: #60a5fa; margin-top: 2px; flex-shrink: 0; }
.fp-foot-contact li a { color: rgba(255,255,255,.55); text-decoration: none; transition: color .2s; }
.fp-foot-contact li a:hover { color: #60a5fa; }
.fp-footer-bottom { background: #070c15; border-top: 1px solid rgba(255,255,255,.06); padding: 15px 0; text-align: center; }
.fp-footer-bottom p { color: rgba(255,255,255,.4); font-size: 12.5px; margin: 0; }

#backtop { background: var(--fp-grad) !important; color: #fff !important; width: 42px !important; height: 42px !important; border-radius: 11px !important; font-size: 18px !important; box-shadow: var(--fp-shadow) !important; }

/* ── RESPONSIVE ── */
@media (max-width: 991px) {
    .fp-auth-btns { padding: 10px 0 6px; }
}
@media (max-width: 767px) {
    .fp-section { padding: 55px 0; }
    .fp-sec-title h2 { font-size: 1.7rem; }
    .fp-page-hero h1 { font-size: 1.9rem; }
    .fp-cta h2 { font-size: 1.8rem; }
    .fp-topbar { display: none; }
}