:root{
    --navy:#071b3f;
    --navy2:#0b2d66;
    --blue:#1266d6;
    --blue2:#1d8cff;
    --sky:#38bdf8;
    --text:#071126;
    --muted:#64748b;
    --line:#dceaff;
    --soft:#f4f8ff;
    --white:#ffffff;
    --shadow:0 24px 70px rgba(7,27,63,.10);
}

*{
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    margin:0;
    font-family:'Inter','Segoe UI',Tahoma,Geneva,Verdana,sans-serif;
    color:var(--text);
    background:#f4f8ff;
    overflow-x:hidden;
}

body.no-scroll{
    overflow:hidden;
}

a{
    text-decoration:none;
    color:inherit;
}

img{
    max-width:100%;
    display:block;
}

.container{
    width:min(1180px,calc(100% - 36px));
    margin:0 auto;
}

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

.topbar{
    position:sticky;
    top:0;
    z-index:1000;
    background:rgba(255,255,255,.92);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    border-bottom:1px solid rgba(220,234,255,.88);
}

.nav{
    height:76px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
}

.logo{
    display:flex;
    align-items:center;
    flex:0 0 auto;
}

.site-logo-img{
    height:44px;
    width:auto;
    max-width:180px;
    object-fit:contain;
}

.nav-menu{
    display:flex;
    align-items:center;
    gap:22px;
    color:#475569;
    font-size:13.5px;
    font-weight:750;
}

.nav-menu > a,
.nav-drop-btn{
    height:42px;
    display:inline-flex;
    align-items:center;
    gap:6px;
    border-radius:999px;
    padding:0 4px;
    color:#475569;
    transition:.18s ease;
}

.nav-menu > a:hover,
.nav-menu > a.is-active,
.nav-drop-btn:hover{
    color:#0b63d8;
}

.nav-dropdown{
    position:relative;
}

.nav-drop-btn{
    border:0;
    background:transparent;
    cursor:pointer;
    font-family:inherit;
    font-size:13.5px;
    font-weight:750;
}

.nav-drop-menu{
    position:absolute;
    top:48px;
    right:0;
    min-width:230px;
    background:#fff;
    border:1px solid var(--line);
    border-radius:20px;
    box-shadow:0 24px 60px rgba(7,27,63,.14);
    padding:10px;
    display:none;
    z-index:1002;
}

.nav-dropdown:hover .nav-drop-menu{
    display:grid;
    gap:4px;
}

.nav-drop-menu a{
    display:flex;
    align-items:center;
    min-height:38px;
    padding:0 12px;
    border-radius:13px;
    color:#334155;
    font-size:13px;
    font-weight:700;
}

.nav-drop-menu a:hover{
    background:#eaf5ff;
    color:#0b63d8;
}

.nav-action{
    display:flex;
    align-items:center;
    gap:10px;
    flex:0 0 auto;
}

.btn{
    min-height:44px;
    padding:0 18px;
    border-radius:16px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    font-size:13.5px;
    font-weight:850;
    border:1px solid transparent;
    transition:.18s ease;
    cursor:pointer;
}

.btn:hover{
    transform:translateY(-2px);
}

.btn-light{
    background:#fff;
    border-color:#dceaff;
    color:#0f274f;
}

.btn-main{
    background:linear-gradient(135deg,#071b3f,#1d8cff);
    color:#fff;
    box-shadow:0 16px 34px rgba(29,140,255,.22);
}

.hamburger{
    display:none;
    width:46px;
    height:46px;
    border:0;
    border-radius:16px;
    color:#fff;
    background:linear-gradient(135deg,#071b3f,#1d8cff);
    box-shadow:0 12px 28px rgba(29,140,255,.24);
    font-size:24px;
    cursor:pointer;
}

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

.mobile-drawer{
    position:fixed;
    inset:0;
    width:100vw;
    height:100dvh;
    background:rgba(2,9,22,.62);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    z-index:99999;
    opacity:0;
    pointer-events:none;
    transition:.2s ease;
}

.mobile-drawer.show{
    opacity:1;
    pointer-events:auto;
}

.mobile-panel{
    width:calc(100vw - 42px);
    max-width:340px;
    height:100dvh;
    background:linear-gradient(180deg,#04152d 0%,#082753 100%);
    border-right:1px solid rgba(110,170,255,.16);
    box-shadow:28px 0 80px rgba(0,0,0,.34);
    padding:18px 14px 92px;
    transform:translateX(-102%);
    transition:.22s ease;
    overflow-y:auto;
    overflow-x:hidden;
}

.mobile-drawer.show .mobile-panel{
    transform:translateX(0);
}

.mobile-panel-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding-bottom:16px;
    margin-bottom:14px;
    border-bottom:1px solid rgba(255,255,255,.08);
}

.mobile-logo img{
    height:42px;
    width:auto;
    object-fit:contain;
}

.close-drawer{
    width:42px;
    height:42px;
    border:0;
    border-radius:15px;
    background:rgba(255,255,255,.08);
    color:#fff;
    font-size:23px;
    cursor:pointer;
}

.mobile-links{
    display:grid;
    gap:10px;
}

.mobile-links a{
    min-height:48px;
    display:flex;
    align-items:center;
    gap:12px;
    padding:0 12px;
    border-radius:17px;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.08);
    color:#ffffff;
    font-size:13px;
    font-weight:760;
}

.mobile-links a.is-active,
.mobile-links a:hover{
    background:rgba(29,140,255,.18);
    border-color:rgba(56,189,248,.28);
}

.mobile-links i{
    width:32px;
    height:32px;
    border-radius:12px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(20,126,255,.16);
    color:#8fd7ff;
    font-size:18px;
}

/* =========================
   FOOTER
========================= */

.footer-trust{
    margin-top:60px;
    padding:56px 0 22px;
    background:
        radial-gradient(circle at 0 0, rgba(29,140,255,.18), transparent 30%),
        linear-gradient(135deg,#071b3f 0%,#0b2d66 52%,#063b78 100%);
    color:#fff;
}

.footer-grid{
    display:grid;
    grid-template-columns:1.5fr .75fr .75fr 1fr;
    gap:44px;
    align-items:start;
}

.footer-logo-image-wrap{
    display:inline-flex;
    margin-bottom:18px;
}

.footer-logo-img{
    height:48px;
    width:auto;
    max-width:190px;
    object-fit:contain;
}

.footer-brand p{
    color:#dbeafe;
    font-size:14px;
    line-height:1.75;
    max-width:440px;
    margin:0;
}

.footer-trust-pills{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:20px;
}

.footer-trust-pills span{
    min-height:34px;
    display:inline-flex;
    align-items:center;
    gap:7px;
    padding:0 12px;
    border-radius:999px;
    background:rgba(255,255,255,.07);
    border:1px solid rgba(139,192,255,.18);
    color:#eff6ff;
    font-size:12px;
    font-weight:750;
}

.footer-trust-pills i{
    color:#38bdf8;
}

.footer-email-card{
    margin-top:24px;
    max-width:360px;
    display:flex;
    align-items:center;
    gap:14px;
    padding:16px;
    border-radius:19px;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(139,192,255,.20);
}

.footer-email-icon{
    width:44px;
    height:44px;
    border-radius:15px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(135deg,#2563eb,#7c3aed);
    font-size:21px;
}

.footer-email-card small{
    display:block;
    color:#bfdbfe;
    font-size:12px;
}

.footer-email-card strong{
    display:block;
    color:#fff;
    font-size:15px;
    margin-top:3px;
}

.footer-social{
    margin-top:18px;
}

.footer-social-title{
    display:flex;
    align-items:center;
    gap:8px;
    color:#dbeafe;
    font-size:13px;
    font-weight:800;
    margin-bottom:12px;
}

.footer-social-title i{
    color:#38bdf8;
    font-size:17px;
}

.footer-social-links{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
}

.footer-social-btn{
    min-height:42px;
    padding:0 14px;
    border-radius:999px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    background:rgba(255,255,255,.07);
    border:1px solid rgba(139,192,255,.18);
    color:#ffffff;
    font-size:12.5px;
    font-weight:800;
    transition:.18s ease;
}

.footer-social-btn i{
    width:24px;
    height:24px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-size:15px;
}

.footer-social-btn.instagram i{
    background:linear-gradient(135deg,#f97316,#db2777,#7c3aed);
}

.footer-social-btn.pinterest i{
    background:linear-gradient(135deg,#e60023,#b91c1c);
}

.footer-social-btn:hover{
    transform:translateY(-2px);
    border-color:rgba(56,189,248,.42);
}

.footer-col h4,
.footer-help-card h4{
    margin:0 0 14px;
    color:#fff;
    font-size:15px;
    font-weight:850;
}

.footer-col{
    display:grid;
    gap:11px;
}

.footer-col a{
    color:#dbeafe;
    font-size:14px;
    font-weight:600;
}

.footer-col a:hover{
    color:#38bdf8;
}

.footer-help-card{
    padding:22px;
    border-radius:24px;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(139,192,255,.20);
    box-shadow:0 26px 70px rgba(0,0,0,.14);
}

.footer-help-icon{
    width:48px;
    height:48px;
    border-radius:17px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(135deg,#2563eb,#1d8cff);
    font-size:24px;
    margin-bottom:18px;
}

.footer-help-card p{
    color:#cbd5e1;
    line-height:1.65;
    font-size:13.5px;
    margin:0 0 14px;
}

.footer-help-card > a{
    display:inline-flex;
    align-items:center;
    gap:7px;
    color:#7dd3fc;
    font-size:13px;
    font-weight:850;
}

.footer-note{
    margin-top:18px;
    padding:14px;
    border-radius:18px;
    background:rgba(255,255,255,.07);
    border:1px solid rgba(255,255,255,.12);
    color:#cbd5e1;
    font-size:12px;
    line-height:1.65;
}

.footer-bottom{
    margin-top:34px;
    padding-top:18px;
    border-top:1px solid rgba(255,255,255,.12);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    color:#dbeafe;
    font-size:12.5px;
}

.footer-bottom p{
    margin:0;
}

.footer-bottom-links{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:10px;
}

.footer-bottom-links a:hover{
    color:#38bdf8;
}

/* =========================
   BOTTOM NAV MOBILE
========================= */

.bottom-nav{
    display:none;
}

/* =========================
   RESPONSIVE
========================= */

@media(max-width:980px){
    .nav-menu,
    .nav-action{
        display:none;
    }

    .hamburger{
        display:flex;
        align-items:center;
        justify-content:center;
    }

    .nav{
        height:68px;
    }

    .site-logo-img{
        height:40px;
        max-width:160px;
    }

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

@media(max-width:768px){
    body{
        padding-bottom:82px;
    }

    .container{
        width:calc(100% - 28px);
    }

    .topbar{
        position:sticky;
    }

    .footer-trust{
        margin-top:36px;
        padding:36px 0 92px;
    }

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

    .footer-brand p{
        max-width:100%;
    }

    .footer-social-links{
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:9px;
    }

    .footer-social-btn{
        width:100%;
        min-height:42px;
        padding:0 10px;
        font-size:12px;
    }

    .footer-bottom{
        align-items:flex-start;
        flex-direction:column;
    }

    .bottom-nav{
        position:fixed;
        left:8px;
        right:8px;
        bottom:10px;
        z-index:9998;
        height:64px;
        border-radius:23px;
        display:grid;
        grid-template-columns:repeat(4,1fr);
        align-items:center;
        padding:6px;
        background:rgba(5,22,45,.94);
        border:1px solid rgba(110,170,255,.16);
        box-shadow:0 18px 44px rgba(0,0,0,.30);
    }

    .bottom-nav a{
        height:52px;
        border-radius:18px;
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        gap:3px;
        color:rgba(255,255,255,.72);
        font-size:9.5px;
        font-weight:750;
    }

    .bottom-nav i{
        font-size:19px;
        color:rgba(255,255,255,.78);
    }

    .bottom-nav a.active{
        background:rgba(20,126,255,.18);
        color:#fff;
    }

    .bottom-nav a.active i{
        color:#7dd3fc;
    }
}