*{
    box-sizing:border-box;
}

html,
body{
    width:100%;
    overflow-x:hidden;
}

:root{

    --bg-main:#0f172a;
    --bg-card:#1e293b;
    --bg-footer:#080b14;

    --text-main:#ffffff;
    --text-secondary:#cbd5e1;

    --accent:#2563eb;
    --accent-light:#60a5fa;
}

body.light-mode{

    --bg-main:#f8fafc;
    --bg-card:#ffffff;
    --bg-footer:#e2e8f0;

    --text-main:#0f172a;
    --text-secondary:#475569;

    --accent:#2563eb;
    --accent-light:#3b82f6;
}

*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Segoe UI,sans-serif;
scroll-behavior:smooth;
}

body{
    background:var(--bg-main);
    color:var(--text-main);
}

/* =========================
LOADER
========================= */

#loader{

position:fixed;
top:0;
left:0;

width:100%;
height:100vh;

background:#020617;

display:flex;
justify-content:center;
align-items:center;

z-index:9999;

overflow:hidden;

}

#loader::before{

content:"";

position:absolute;

width:400px;
height:400px;

background:
radial-gradient(
circle,
rgba(37,99,235,.35),
transparent 70%
);

animation:
pulseGlow 3s infinite;

}

.loader-content{

    text-align:center;

    width:90%;

    max-width:650px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

}

.loader-content img{

    width:220px;

    display:block;

    margin:0 auto;

    border-radius:25px;

    box-shadow:
    0 0 60px rgba(37,99,235,.55);

    animation:
    floatLogo 3s ease-in-out infinite;

}

.loader-content h1{

font-size:52px;

margin-top:25px;

text-align:center;

}

.loader-content p{

margin-top:15px;
color:#94a3b8;

}

.progress-bar{

width:100%;
height:8px;

margin-top:30px;

background:
rgba(255,255,255,.1);

border-radius:50px;

overflow:hidden;

}

.progress-fill{

width:0%;

height:100%;

background:
linear-gradient(
90deg,
#2563eb,
#60a5fa
);

animation:
loadBar 5s linear forwards;

}

/* =========================
MAIN CONTENT
========================= */

#mainContent{

display:none;

}

/* =========================
HEADER
========================= */

.hero-header{

position:fixed;

top:0;
left:0;

width:100%;

padding:20px 60px;

display:flex;
justify-content:space-between;
align-items:center;

background:
rgba(15,23,42,.85);

backdrop-filter:blur(15px);

z-index:1000;

}

.brand{

    display:flex;
    align-items:center;
    gap:18px;

}

.brand img{

    width:70px;
    height:70px;

    object-fit:cover;

    border-radius:20px;

    animation:logoGlow 3s ease-in-out infinite;

}

@keyframes logoGlow{

    0%{

        box-shadow:
        0 0 8px rgba(37,99,235,.25);

    }

    50%{

        box-shadow:
        0 0 30px rgba(37,99,235,.8),
        0 0 60px rgba(37,99,235,.4);

    }

    100%{

        box-shadow:
        0 0 8px rgba(37,99,235,.25);

    }

}

.brand span{

    background:linear-gradient(
        90deg,
        #ffffff,
        #60a5fa,
        #ffffff
    );

    background-size:200% auto;

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;

    animation:
    textGlow 3s ease-in-out infinite,
    shineMove 4s linear infinite;

}

@keyframes shineMove{

    from{
        background-position:-200% center;
    }

    to{
        background-position:200% center;
    }

}

.hero-header nav{

display:flex;
gap:30px;
align-items:center;

}

.hero-header nav a{

text-decoration:none;
color:white;

}

.login-btn{

padding:12px 24px;

border-radius:30px;

background:
linear-gradient(
135deg,
#2563eb,
#1d4ed8
);

}

.theme-toggle{

    width:50px;

    height:50px;

    border:none;

    border-radius:50%;

    background:
    rgba(255,255,255,.1);

    color:white;

    font-size:20px;

    cursor:pointer;

    transition:.3s;

}

.theme-toggle:hover{

    transform:
    translateY(-2px);

    box-shadow:
    0 0 20px rgba(37,99,235,.4);

}

/* =========================
HERO
========================= */

.hero{

min-height:100vh;

display:flex;
flex-direction:column;

justify-content:center;
align-items:center;

text-align:center;

padding:120px 20px;

position:relative;

overflow:hidden;

}

.hero-glow{

position:absolute;

width:800px;
height:800px;

background:
radial-gradient(
circle,
rgba(37,99,235,.18),
transparent 70%
);

animation:
rotateGlow 20s linear infinite;

}

.hero-logo{
    width:180px;
    height:auto;
    border-radius:35px;

    position:relative;
    top:100px;

    box-shadow:
    0 0 25px rgba(59,130,246,.5),
    0 0 50px rgba(59,130,246,.2);

    animation:logoGlow 4s ease-in-out infinite;
}

@keyframes logoFloat{

    0%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-10px);
    }

    100%{
        transform:translateY(0);
    }

}

.hero-logo img{

    width:220px;

    border-radius:35px;

    border:1px solid rgba(255,255,255,.08);

    box-shadow:
    0 0 50px rgba(37,99,235,.35),
    0 20px 40px rgba(0,0,0,.35);

    transition:.4s;

}

.hero h1{

font-size:72px;

margin-top:30px;

max-width:1000px;

position:relative;

z-index:2;

}

.hero p{

margin-top:25px;

font-size:22px;

color:#cbd5e1;

max-width:700px;

line-height:1.7;

position:relative;

z-index:2;

}

.hero-buttons{

margin-top:40px;

display:flex;
gap:20px;

position:relative;

z-index:2;

}

.primary-btn,
.secondary-btn{

padding:18px 35px;

border-radius:40px;

text-decoration:none;

font-weight:700;

transition:.3s;

}

.primary-btn{

background:
linear-gradient(
135deg,
#2563eb,
#1d4ed8
);

color:white;

}

.secondary-btn{

border:
1px solid rgba(255,255,255,.2);

color:white;

backdrop-filter:blur(15px);

}

.primary-btn:hover,
.secondary-btn:hover{

transform:
translateY(-3px);

}

/* =========================
ANIMATIONS
========================= */

@keyframes pulseGlow{

0%,100%{

transform:scale(1);

}

50%{

transform:scale(1.15);

}

}

@keyframes floatLogo{

0%,100%{

transform:
translateY(0);

}

50%{

transform:
translateY(-12px);

}

}

@keyframes rotateGlow{

from{

transform:rotate(0deg);

}

to{

transform:rotate(360deg);

}

}

@keyframes loadBar{

from{

width:0%;

}

to{

width:100%;

}

}

/* =========================
MOBILE
========================= */

@media(max-width:900px){

.hero-header{

padding:20px;

}

.hero-header nav{

display:none;

}

.hero h1{

font-size:42px;

}

.hero p{

font-size:18px;

}

.hero-buttons{

flex-direction:column;

width:100%;

}

.primary-btn,
.secondary-btn{

width:100%;

}

}

/* SERVICES */

.services{

padding:40px 10% 80px;

background:#111827;

text-align:center;

}

.services h2{

font-size:48px;

margin-bottom:50px;

}

.services-grid{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(280px,1fr));

gap:25px;

}

.service-card{
    background:var(--bg-card);

padding:35px;

border-radius:25px;

transition:.3s;

}

.service-card:hover{

transform:translateY(-10px);

box-shadow:
0 0 30px rgba(37,99,235,.3);

}

.service-card i{

font-size:40px;

color:#60a5fa;

margin-bottom:20px;

}

/* STATS */

.stats{

display:grid;

grid-template-columns:
repeat(4,1fr);

gap:20px;

padding:80px 50px;

background:#0f172a;

}

.stat-box{

background:#1e293b;

padding:35px;

border-radius:20px;

text-align:center;

}

.stat-box h2{

font-size:40px;

color:#60a5fa;

}

/* CONTACT */

.contact{

padding:0;

text-align:center;

background:#020617;

}

.contact h2{

font-size:48px;

margin-bottom:25px;

}

.contact p{

margin-top:15px;

color:#cbd5e1;

}

.transaction-showcase{

    padding:100px 10%;

    text-align:center;

}

.showcase-text h2{

    font-size:48px;

    margin-bottom:20px;

}

.showcase-text p{

    max-width:800px;

    margin:auto;

    opacity:.8;

    line-height:1.8;

}

.live-transactions{

	margin-top:50px;
    margin-bottom:100px;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:25px;
    margin-top:50px;

}

.tx-card{

    background:rgba(255,255,255,.05);

    backdrop-filter:blur(10px);

    border:1px solid rgba(255,255,255,.08);

    padding:35px;

    border-radius:25px;

    transition:.4s;

}

.tx-card:hover{

    transform:translateY(-8px);

    box-shadow:
    0 20px 40px rgba(37,99,235,.25);

}

.tx-card span{

    opacity:.7;

    font-size:14px;

}

.tx-card h3{

    margin:15px 0;

    font-size:36px;

    color:#60a5fa;

}

.banking-stats{

    display:grid;

    grid-template-columns:
    repeat(4,1fr);

    gap:25px;

    margin:80px auto;

    max-width:1300px;

}

.stat-card{

    background:
    rgba(255,255,255,.04);

    backdrop-filter:
    blur(12px);

    border:
    1px solid rgba(255,255,255,.08);

    border-radius:25px;

    padding:40px 20px;

    text-align:center;

    transition:.4s;

}

.stat-card:hover{

    transform:
    translateY(-8px);

    box-shadow:
    0 20px 40px rgba(37,99,235,.25);

}

.stat-card h2{

    font-size:42px;

    color:#60a5fa;

    margin-bottom:10px;

}

.stat-card p{

    opacity:.8;

}

.hero-title{
    animation: heroReveal 2s ease-out forwards,
               textGlow 4s ease-in-out infinite;
    opacity: 0;
}

@keyframes heroReveal{
    0%{
        opacity:0;
        transform:translateY(40px);
    }

    100%{
        opacity:1;
        transform:translateY(0);
    }
}

@keyframes textGlow{

    0%{
        text-shadow:
        0 0 10px rgba(59,130,246,.2);
    }

    50%{
        text-shadow:
        0 0 25px rgba(59,130,246,.7),
        0 0 50px rgba(59,130,246,.4);
    }

    100%{
        text-shadow:
        0 0 10px rgba(59,130,246,.2);
    }
}

.footer{
    background:var(--bg-footer);
    width:100vw;
    margin-left:calc(50% - 50vw);
    padding:80px 60px 20px;
    padding-bottom: 5px;
}

.footer-grid{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:60px;
}

.footer-brand{
    min-width:280px;
    max-width:320px;
}

.footer-brand img{
    width:90px;
    border-radius:20px;
    margin-bottom:20px;
}

.footer-brand p{
    color:#a9b4c7;
    text-align: left;
    line-height:1.8;
}

.footer h3{
    color:white;
    margin-bottom:25px;
}

.footer a{
    display:block;
    color:#a9b4c7;
    text-decoration:none;
    margin-bottom:15px;
    transition:.3s;
}

.footer a:hover{
    color:#4da3ff;
}

.footer p{
    color:#a9b4c7;
    margin-bottom:15px;
}

.footer-bottom{
    margin-top:20px;
    padding-top:15px;
    border-top:1px solid rgba(255,255,255,.08);
    text-align:center;
    color:#a9b4c7;
}

/* =========================
   LIGHT MODE
========================= */

.light-mode{

    background:#f8fafc;

    color:#111827;

}

.light-mode .hero-header{

    background:
    rgba(255,255,255,.9);

}

.light-mode .hero-header a{

    color:#111827;

}

.light-mode .hero{

    background:#f8fafc;

}

.light-mode .hero h1{

    color:#111827;

}

.light-mode .hero p{

    color:#475569;

}

#google_translate_element{

    display:flex;

    align-items:center;

}

.goog-te-gadget{

    color:white !important;

}

.goog-te-gadget select{

    padding:8px 12px;

    border-radius:12px;

    border:none;

    background:#1e293b;

    color:white;

    cursor:pointer;

}

/* =========================
   MOBILE LANDING PAGE FIX
========================= */

@media (max-width:768px){

    .hero{
        padding:40px 20px;
    }

    .hero-title{
        font-size:34px;
        line-height:1.2;
    }

    .hero-buttons{
        flex-direction:column;
        gap:15px;
    }

    .hero-buttons a{
        width:100%;
        text-align:center;
    }

    .banking-stats{
        display:grid;
        grid-template-columns:1fr;
        gap:15px;
    }

    .live-transactions{
        display:grid;
        grid-template-columns:1fr;
        gap:15px;
    }

    .services-grid{
        display:grid;
        grid-template-columns:1fr;
        gap:15px;
    }

    .stats{
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:15px;
    }

    .footer-grid{
        display:grid;
        grid-template-columns:1fr;
        gap:25px;
    }

    nav{
        flex-wrap:wrap;
        justify-content:center;
        gap:10px;
    }

}

@media (max-width:768px){

    .hero-header{
        padding:12px 15px;
    }
    
    .hero{
    padding-top:180px;
}

    .brand{
        gap:10px;
    }

    .brand img{
        width:10px;
        height:10px;
        border-radius:120px;
    }

.brand img{
    width:30px;
    height:30px;
    border-radius:8px;
}

    .hero{
        padding-top:100px;
    }

}