/* =========================================================
   Neon Green + Black theme for FINTESA
   Primary: #39ff14  (rgb 57,255,20)
   ========================================================= */

:root {
    --neon: #39ff14;
    --neon-soft: rgba(57, 255, 20, 0.18);
    --neon-glow: rgba(57, 255, 20, 0.35);
    --bg-0: #000000;
    --bg-1: #0a0d0a;
    --bg-2: #121712;
    --bg-3: #18201a;
    --border-soft: rgba(57, 255, 20, 0.14);
    --text-main: #e6ffe9;
    --text-muted: #8a988b;
}

/* ---------- Global base ---------- */
html,
body {
    background-color: var(--bg-0) !important;
    color: var(--text-main) !important;
}

body {
    background-image:
        radial-gradient(1200px 600px at 85% -10%, rgba(57, 255, 20, 0.08), transparent 60%),
        radial-gradient(900px 500px at -10% 40%, rgba(57, 255, 20, 0.05), transparent 60%);
    background-attachment: fixed;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
    color: var(--text-main) !important;
}

p {
    color: var(--text-muted);
}

/* Bootstrap color utility overrides */
.text-dark { color: var(--text-main) !important; }
.text-secondary { color: var(--text-main) !important; }
.text-muted { color: var(--text-muted) !important; }
.text-primary { color: var(--neon) !important; }
.text-light { color: var(--text-main) !important; }

.bg-light { background-color: var(--bg-1) !important; }
.bg-white { background-color: var(--bg-2) !important; }
.bg-info { background-color: var(--bg-1) !important; }
.bg-info-subtle {
    background-color: var(--neon-soft) !important;
    color: var(--neon) !important;
}

.border,
.border-bottom {
    border-color: rgba(255, 255, 255, 0.08) !important;
}

a {
    color: var(--neon);
}
a:hover {
    color: #7bff5b;
}

/* ---------- Navbar ---------- */
.navbar-custom,
.sticky-light {
    background-color: rgba(0, 0, 0, 0.7) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--border-soft);
}

.navbar-caption {
    color: var(--neon) !important;
    text-shadow: 0 0 12px var(--neon-glow);
}

.navbar-custom .nav-link {
    color: var(--text-main) !important;
}
.navbar-custom .nav-link:hover,
.navbar-custom .nav-link.active {
    color: var(--neon) !important;
}

.nav-btn .btn,
.btn-light {
    background-color: var(--neon) !important;
    color: #06120a !important;
    border: none !important;
    font-weight: 600;
    box-shadow: 0 0 18px rgba(57, 255, 20, 0.35);
    transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.nav-btn .btn:hover,
.btn-light:hover {
    background-color: #7bff5b !important;
    color: #06120a !important;
    box-shadow: 0 0 24px rgba(57, 255, 20, 0.55);
    transform: translateY(-1px);
}

.navbar-toggler {
    border: 1px solid var(--border-soft) !important;
}
.navbar-toggler span,
.navbar-toggler i {
    color: var(--neon) !important;
}

/* ---------- Hero ---------- */
.hero-part,
.bg-home-5,
.bg-img-5 {
    background: radial-gradient(ellipse at 75% 10%, rgba(57, 255, 20, 0.22), transparent 55%),
        radial-gradient(ellipse at 10% 60%, rgba(57, 255, 20, 0.10), transparent 60%),
        #000 !important;
}

.hero-text h5 {
    color: var(--neon) !important;
    letter-spacing: 0.5px;
}
.hero-text h5 i {
    color: var(--neon) !important;
    text-shadow: 0 0 12px var(--neon-glow);
}

.hero-text h1 {
    color: var(--text-main) !important;
}
.hero-text h1 span {
    color: var(--neon) !important;
    text-shadow: 0 0 18px var(--neon-glow);
}

.hero-text p {
    color: var(--text-muted) !important;
}

.hero-icon h5 {
    color: var(--text-main) !important;
}
.hero-icon a i {
    border: 1px solid var(--border-soft) !important;
    color: var(--neon) !important;
    background: var(--bg-2);
    transition: all .2s ease;
}
.hero-icon a:hover i {
    border-color: var(--neon) !important;
    box-shadow: 0 0 14px rgba(57, 255, 20, 0.35);
    transform: translateY(-2px);
}

/* Animated decorative bubbles - recolor */
.animation-img {
    filter: hue-rotate(130deg) saturate(1.4) brightness(0.9);
    opacity: 0.45;
}

/* ---------- Counter ---------- */
.counter-part {
    background: #04070a !important;
}
.counter-no {
    background: var(--bg-2) !important;
    border: 1px solid var(--border-soft) !important;
    border-radius: 14px !important;
    box-shadow: 0 0 0 1px rgba(57, 255, 20, 0.04), 0 10px 30px rgba(0, 0, 0, 0.4);
}
.counter-no .icon i {
    background: #0a110b !important;
    color: var(--neon) !important;
    box-shadow: 0 0 18px rgba(57, 255, 20, 0.25) inset, 0 0 10px rgba(57, 255, 20, 0.15);
}
.counter-no .number h2 {
    color: var(--text-main) !important;
    text-shadow: 0 0 10px rgba(57, 255, 20, 0.18);
}
.counter-no .content p {
    color: var(--text-muted) !important;
}

/* ---------- About / Core advantages ---------- */
.about-part-5 {
    background: var(--bg-0) !important;
}
.about-part-5 .bg-info {
    background: linear-gradient(135deg, rgba(57, 255, 20, 0.08), rgba(57, 255, 20, 0.02)) !important;
    border: 1px solid var(--border-soft);
    border-radius: 28px !important;
}
.about-part-5 .content {
    background: var(--bg-2) !important;
    border: 1px solid var(--border-soft) !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.5) !important;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.about-part-5 .content:hover {
    transform: translateY(-4px);
    border-color: var(--neon) !important;
    box-shadow: 0 14px 34px rgba(57, 255, 20, 0.18) !important;
}
.about-part-5 .content .icon i {
    color: var(--neon) !important;
    text-shadow: 0 0 14px var(--neon-glow);
}
.about-part-5 .content h6 {
    color: var(--text-main) !important;
}
.about-part-5 .content p {
    color: var(--text-muted) !important;
}

/* ---------- Services / features ---------- */
.services-part-5 {
    background: var(--bg-1) !important;
}
.services-part-5 .title-sm h5 {
    color: var(--neon) !important;
}
.services-part-5 h2 {
    color: var(--text-main) !important;
}
.services-part-5 p {
    color: var(--text-muted) !important;
}
.services-part-5 .step span {
    background: rgba(57, 255, 20, 0.12) !important;
    color: var(--neon) !important;
    border: 1px solid var(--border-soft);
}
.services-part-5 .step h5 {
    color: var(--text-main) !important;
}
.services-part-5 .step .col-lg-8 {
    border-color: rgba(255, 255, 255, 0.08) !important;
}
.services-part-5 .step .col-lg-8 p {
    color: var(--text-muted) !important;
}

/* ---------- App screenshort ---------- */
.app-screenshort {
    background: #04060a !important;
}
.app-screenshort .title-sm h6 {
    color: var(--neon) !important;
}
.app-screenshort h2 {
    color: var(--text-main) !important;
}
.app-screenshort p {
    color: var(--text-muted) !important;
}
.app-screenshort .swiper,
.app-screenshort .swiper-wrapper,
.app-screenshort .swiper-slide {
    background: transparent !important;
}
.app-screenshort .swiper-slide img {
    background: transparent !important;
    border-radius: 28px;
}
.app-screenshort .swiper-pagination-bullet {
    background: rgba(255, 255, 255, 0.25) !important;
}
.app-screenshort .swiper-pagination-bullet-active {
    background: var(--neon) !important;
    box-shadow: 0 0 10px var(--neon-glow);
}

/* ---------- FAQ ---------- */
.faq {
    background: var(--bg-0) !important;
}
.faq .title-sm h6 {
    color: var(--neon) !important;
}
.faq .bg-light {
    background: var(--bg-2) !important;
    border: 1px solid var(--border-soft) !important;
    border-radius: 14px;
    transition: border-color .25s ease, box-shadow .25s ease;
}
.faq .bg-light:hover {
    border-color: var(--neon) !important;
    box-shadow: 0 10px 28px rgba(57, 255, 20, 0.12);
}
.faq h5 {
    color: var(--text-main) !important;
}
.faq p {
    color: var(--text-muted) !important;
}
.faq i[class*="ri-number"] {
    background: var(--neon) !important;
    color: #06120a !important;
    box-shadow: 0 0 12px var(--neon-glow);
}

/* ---------- Download ---------- */
.download-part {
    background: linear-gradient(135deg, rgba(57, 255, 20, 0.10), rgba(57, 255, 20, 0.02)), var(--bg-1) !important;
    border-top: 1px solid var(--border-soft);
}
.download-part .logo a {
    color: var(--neon) !important;
    text-shadow: 0 0 12px var(--neon-glow);
}
.download-part h3,
.download-part .text-dark {
    color: var(--text-main) !important;
}
.download-part p,
.download-part .text-muted {
    color: var(--text-muted) !important;
}
.download-part h5 {
    color: var(--neon) !important;
}

/* App/Play store buttons - subtle green outline */
.main-btn a img {
    border-radius: 10px;
    box-shadow: 0 0 0 1px var(--border-soft), 0 6px 14px rgba(0, 0, 0, 0.5);
    transition: transform .2s ease, box-shadow .2s ease;
}
.main-btn a:hover img {
    box-shadow: 0 0 0 1px var(--neon), 0 8px 20px rgba(57, 255, 20, 0.25);
    transform: translateY(-2px);
}

/* ---------- Section title-sm general ---------- */
.title-sm h5,
.title-sm h6 {
    color: var(--neon) !important;
    letter-spacing: 0.5px;
}

/* ---------- Swiper mobile pagination already customized in responsive.css ---------- */
.swiper-pagination-bullet-active {
    background: var(--neon) !important;
}

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
::-webkit-scrollbar-track {
    background: #000;
}
::-webkit-scrollbar-thumb {
    background: rgba(57, 255, 20, 0.25);
    border-radius: 6px;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(57, 255, 20, 0.5);
}

/* ---------- Selection ---------- */
::selection {
    background: var(--neon);
    color: #06120a;
}