@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&display=swap');

:root{
    --primary:#0d2a52;
    --secondary:#16437e;
    --yellow:#ffd400;
    --light:#f4f7fa;
    --text:#222222;
    --white:#ffffff;
}
*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{ font-family:'Montserrat',sans-serif; background:var(--light); color:var(--text); overflow-x:hidden; }

/* NAVBAR */
nav{
    width:100%; background:var(--primary); padding:16px 8%;
    display:flex; justify-content:space-between; align-items:center;
    position:sticky; top:0; z-index:999; box-shadow:0 4px 15px rgba(0,0,0,0.08);
}
.nav-logo{ height:45px; }
.nav-links{ display:flex; gap:25px; }
.nav-links a{
    color:white; text-decoration:none; font-size:13px;
    font-weight:700; text-transform:uppercase; transition:0.3s;
}
.nav-links a:hover, .nav-links a.active{ color:var(--yellow); }

/* SECTION COMMON */
section{ padding:100px 10%; }
.section-title{ text-align:center; margin-bottom:70px; }
.section-title span{
    display:inline-block; background:rgba(13,42,82,0.08); color:var(--primary);
    padding:8px 18px; border-radius:30px; font-size:12px;
    font-weight:800; text-transform:uppercase; margin-bottom:18px;
}
.section-title h2{ font-size:3rem; color:var(--primary); font-weight:900; margin-bottom:18px; }
.section-title p{ max-width:850px; margin:auto; line-height:1.9; color:#666; font-size:1rem; }

/* PAGE HERO (inner pages) */
.page-hero{
    padding:80px 10% 60px;
    background:linear-gradient(135deg,var(--primary) 0%,var(--secondary) 100%);
    color:white; text-align:center;
}
.page-hero span{
    display:inline-block; background:rgba(255,212,0,0.15);
    border:1px solid rgba(255,212,0,0.4); padding:8px 18px;
    border-radius:40px; font-size:12px; font-weight:700;
    margin-bottom:20px; letter-spacing:1px; text-transform:uppercase;
}
.page-hero h1{ font-size:3.5rem; font-weight:900; margin-bottom:15px; }
.page-hero h1 span{ color:var(--yellow); }
.page-hero p{ max-width:700px; margin:auto; opacity:0.9; line-height:1.9; }

/* BUTTONS */
.btn-primary{
    display:inline-block; background:var(--yellow); color:black;
    padding:16px 34px; border-radius:12px; font-weight:800;
    text-decoration:none; transition:0.3s; font-size:14px;
}
.btn-primary:hover{ transform:translateY(-3px); }
.btn-secondary{
    display:inline-block; border:2px solid var(--primary); color:var(--primary);
    padding:16px 34px; border-radius:12px; font-weight:800;
    text-decoration:none; transition:0.3s; font-size:14px;
}
.btn-secondary:hover{ background:var(--primary); color:white; }

/* FOOTER */
footer{
    background:#091a33; color:white;
    padding:70px 8% 30px; border-top:5px solid var(--yellow);
}
.footer-grid{
    display:grid; grid-template-columns:1fr 1.2fr 1fr;
    gap:40px; align-items:center;
}
.footer-left img{ height:60px; margin-bottom:20px; }
.footer-left p{ margin:10px 0; opacity:0.8; }
.footer-left a{ color:var(--yellow); text-decoration:none; }
.footer-center{
    text-align:center; background:rgba(255,255,255,0.04);
    padding:35px; border-radius:30px;
    border:1px solid rgba(255,255,255,0.08);
}
.big-qr{
    width:200px; background:white; padding:12px;
    border-radius:20px; margin-bottom:20px;
}
.footer-center h4{ color:var(--yellow); font-size:1.5rem; margin-bottom:10px; }
.footer-right{ display:flex; flex-direction:column; align-items:flex-end; gap:15px; }
.app-btn{ height:60px; transition:0.3s; }
.app-btn:hover{ transform:scale(1.05); }
.copyright{
    margin-top:50px; border-top:1px solid rgba(255,255,255,0.08);
    padding-top:25px; text-align:center; font-size:0.85rem;
    opacity:0.65; line-height:1.8;
}
.footer-links{
    display:flex; justify-content:center; gap:25px;
    flex-wrap:wrap; margin-top:15px;
}
.footer-links a{ color:var(--yellow); text-decoration:none; font-size:0.85rem; opacity:0.8; }
.footer-links a:hover{ opacity:1; }

/* RESPONSIVE */
@media(max-width:1000px){
    .footer-grid{ grid-template-columns:1fr; text-align:center; }
    .footer-right{ align-items:center; flex-direction:row; justify-content:center; }
}
@media(max-width:768px){
    nav{ flex-direction:column; gap:15px; }
    .nav-links{ flex-wrap:wrap; justify-content:center; }
    .page-hero h1{ font-size:2.5rem; }
    .section-title h2{ font-size:2.2rem; }
}