*{margin:0;padding:0;box-sizing:border-box}
:root{--blue:#2563eb;--dark:#101828;--muted:#667085;--light:#f7f9fc}
body{font-family:'Inter',sans-serif;color:var(--dark);background:#fff}
a{text-decoration:none;color:inherit}
.container{width:90%;max-width:1180px;margin:auto}
.header{height:78px;border-bottom:1px solid #edf0f5;background:#fff;display:flex;align-items:center;position:sticky;top:0;z-index:100}
.nav{display:flex;align-items:center;justify-content:space-between}
.logo{font-size:21px;font-weight:800;display:flex;align-items:center;gap:8px}
.logo span:last-child{color:var(--blue)}
.logo-icon{width:36px;height:36px;border-radius:10px;background:var(--blue);color:white;display:grid;place-items:center}
.nav-menu{display:flex;gap:32px;font-size:13px;font-weight:600;color:#475467}
.nav-menu a:hover,.footer-links a:hover{color:var(--blue)}
.nav-buttons{display:flex;align-items:center;gap:22px;font-size:13px;font-weight:700}
.register-btn{background:var(--blue);color:white;padding:13px 19px;border-radius:9px}
.register-btn i{margin-left:8px}
.mobile-menu{display:none;background:none;border:0;font-size:23px}
.hero{padding:90px 0 85px;background:radial-gradient(circle at 85% 30%,#e9f0ff,transparent 35%),linear-gradient(120deg,#fff,#f7f9ff)}
.hero-content{display:grid;grid-template-columns:1fr 430px;align-items:center;gap:75px}
.badge,.section-label{font-size:10px;font-weight:800;letter-spacing:1.5px;color:var(--blue)}
.badge{display:inline-flex;align-items:center;gap:8px;background:#eaf1ff;padding:10px 14px;border-radius:30px}
.badge span{width:7px;height:7px;border-radius:50%;background:#16b364}
.hero h1{font-size:57px;line-height:1.13;letter-spacing:-2.5px;margin:25px 0}
.hero h1 span{color:var(--blue)}
.hero-text>p{font-size:14px;line-height:1.9;color:var(--muted);max-width:510px}
.hero-actions{display:flex;gap:12px;margin-top:30px;flex-wrap:wrap}
.primary-btn{background:var(--blue);color:#fff;padding:15px 21px;border-radius:9px;font-size:12px;font-weight:700;display:inline-flex;gap:13px;align-items:center}
.secondary-btn{padding:15px 20px;border:1px solid #dce2eb;border-radius:9px;font-size:12px;font-weight:700}
.hero-stats{display:flex;gap:40px;margin-top:45px}
.hero-stats div{display:flex;flex-direction:column;gap:7px}
.hero-stats strong{font-size:17px}
.hero-stats small{font-size:10px;color:var(--muted)}
.hero-visual{position:relative;padding:20px}
.visual-card{background:#fff;padding:28px;border-radius:18px;box-shadow:0 25px 70px #173b7818;border:1px solid #e9edf5}
.visual-top{display:flex;justify-content:space-between;align-items:center}
.visual-icon{width:48px;height:48px;background:#eaf1ff;color:var(--blue);border-radius:13px;display:grid;place-items:center;font-size:21px}
.online{font-size:9px;font-weight:800;color:#16a36a}
.online i{display:inline-block;width:6px;height:6px;background:#16a36a;border-radius:50%;margin-right:5px}
.visual-card h3{font-size:22px;margin-top:27px}
.visual-card>p{font-size:11px;color:var(--muted);margin-top:8px}
.number-box{padding:16px;margin-top:16px;background:#f7f9fc;border-radius:10px;display:flex;flex-direction:column;gap:8px}
.number-box span{font-size:9px;color:var(--muted);font-weight:700}
.number-box strong{font-size:13px}
.number-box .available{color:#159b65}
.visual-bottom{font-size:10px;color:var(--muted);margin-top:22px}
.visual-bottom i{color:var(--blue);margin-right:5px}
.floating-icon{position:absolute;width:48px;height:48px;border-radius:13px;background:#fff;box-shadow:0 8px 25px #00000012;display:grid;place-items:center;font-size:24px}
.icon-one{top:4px;right:0;color:#25d366}
.icon-two{bottom:8px;left:0;color:#229ed9}
.features{border-top:1px solid #edf0f5;border-bottom:1px solid #edf0f5;padding:25px 0}
.feature-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.feature-item{display:flex;align-items:center;gap:14px}
.feature-item>i{width:43px;height:43px;background:#edf3ff;color:var(--blue);border-radius:11px;display:grid;place-items:center}
.feature-item div{display:flex;flex-direction:column;gap:5px}
.feature-item strong{font-size:12px}
.feature-item small{font-size:10px;color:var(--muted)}
.section{padding:85px 0}
.section-heading{display:flex;justify-content:space-between;align-items:end;margin-bottom:32px}
.section-heading h2{font-size:30px;margin-top:12px;letter-spacing:-1px}
.section-heading p{font-size:12px;color:var(--muted);margin-top:10px}
.text-link{font-size:12px;color:var(--blue);font-weight:700}
.country-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:13px}
.country-card{border:1px solid #edf0f5;border-radius:11px;padding:17px 13px;display:flex;align-items:center;gap:11px;transition:.2s}
.country-card:hover,.service-card:hover{border-color:#b8ccff;transform:translateY(-3px)}
.country-flag{font-size:27px}
.country-card div:nth-child(2){display:flex;flex-direction:column;gap:5px;flex:1}
.country-card strong{font-size:11px}
.country-card small{font-size:9px;color:var(--muted)}
.country-card>i{font-size:10px;color:#98a2b3}
.notice{margin-top:20px;color:var(--muted);font-size:10px;line-height:1.7}
.service-section{background:#f8faff}
.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.service-card{background:#fff;border:1px solid #edf0f5;border-radius:13px;padding:23px;display:flex;flex-direction:column;gap:13px;transition:.2s}
.service-icon{width:44px;height:44px;border-radius:12px;background:#edf3ff;color:var(--blue);display:grid;place-items:center;font-size:20px}
.service-card strong{font-size:14px}
.service-card span{font-size:10px;color:var(--muted)}
.service-card span i{color:var(--blue);margin-left:5px}
.cta-section{padding:65px 0}
.cta-box{padding:40px;background:#101d39;border-radius:17px;color:#fff;display:flex;align-items:center;justify-content:space-between;gap:20px}
.cta-box .section-label{color:#8db0ff}
.cta-box h2{font-size:27px;margin:13px 0}
.cta-box p{font-size:11px;color:#b8c5dc}
.footer{background:#f8faff;padding:45px 0 20px}
.footer-content{display:flex;justify-content:space-between;gap:30px;padding-bottom:35px}
.footer-content>div:first-child p{font-size:11px;color:var(--muted);margin-top:15px;max-width:320px;line-height:1.8}
.footer-links{display:flex;gap:25px;align-items:center;font-size:11px;font-weight:600}
.copyright{border-top:1px solid #e8edf5;padding-top:20px;font-size:10px;color:var(--muted)}
@media(max-width:900px){
.hero-content{grid-template-columns:1fr 360px;gap:25px}
.hero h1{font-size:45px}
.country-grid{grid-template-columns:repeat(3,1fr)}
.feature-grid{grid-template-columns:repeat(2,1fr);gap:25px}
}
@media(max-width:650px){
.header{height:68px}
.nav-menu{display:none;position:absolute;top:68px;left:0;width:100%;background:#fff;padding:22px 5%;flex-direction:column;gap:22px;border-bottom:1px solid #eee}
.nav-menu.active{display:flex}
.nav-buttons{margin-left:auto;margin-right:18px;gap:13px;font-size:11px}
.register-btn{padding:10px 12px}
.mobile-menu{display:block}
.hero{padding:60px 0}
.hero-content{grid-template-columns:1fr}
.hero h1{font-size:44px}
.hero-visual{max-width:400px;width:100%;margin:25px auto 0}
.hero-stats{gap:22px}
.feature-grid{grid-template-columns:1fr 1fr}
.feature-item{gap:9px}
.feature-item small{font-size:9px}
.section{padding:60px 0}
.section-heading{align-items:start;gap:15px;flex-direction:column}
.section-heading h2{font-size:26px}
.country-grid{grid-template-columns:repeat(2,1fr);gap:9px}
.country-card{padding:13px 9px;gap:8px}
.country-card strong{font-size:10px}
.country-flag{font-size:23px}
.service-grid{grid-template-columns:repeat(2,1fr);gap:10px}
.service-card{padding:16px}
.cta-box{padding:28px;align-items:flex-start;flex-direction:column}
.cta-box h2{font-size:23px}
.footer-content{flex-direction:column}
.footer-links{flex-wrap:wrap;gap:18px}
}

/* AUTHENTICATION */

.auth-body{
    min-height:100vh;
    background:#f5f7fb;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:25px 15px;
}

.auth-container{
    width:100%;
    max-width:430px;
}

.auth-container>.logo{
    justify-content:center;
    margin-bottom:28px;
}

.auth-card{
    background:#fff;
    padding:35px;
    border:1px solid #edf0f5;
    border-radius:16px;
    box-shadow:0 15px 45px #00000008;
}

.auth-card h2{
    font-size:24px;
    margin-bottom:9px;
}

.auth-card>p{
    font-size:12px;
    color:#667085;
    margin-bottom:25px;
}

.auth-card label{
    display:block;
    font-size:12px;
    font-weight:700;
    margin:17px 0 8px;
}

.auth-card input{
    width:100%;
    height:46px;
    border:1px solid #dce2eb;
    border-radius:8px;
    padding:0 13px;
    outline:none;
    font-family:inherit;
    font-size:12px;
}

.auth-card input:focus{
    border-color:#2563eb;
}

.auth-submit{
    width:100%;
    height:47px;
    margin-top:24px;
    background:#2563eb;
    border:0;
    border-radius:8px;
    color:white;
    font-weight:700;
    cursor:pointer;
}

.auth-bottom{
    text-align:center;
    font-size:12px;
    margin-top:22px;
    color:#667085;
}

.auth-bottom a{
    color:#2563eb;
    font-weight:700;
}

.auth-error,.auth-success{
    padding:13px;
    border-radius:8px;
    font-size:12px;
    margin-bottom:15px;
}

.auth-error{
    background:#fff0f0;
    color:#d92d20;
}

.auth-success{
    background:#eafaf1;
    color:#039855;
}

/* MEMBER DASHBOARD */

.member-header{
    height:75px;
    padding:0 5%;
    background:#fff;
    border-bottom:1px solid #edf0f5;
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.logout-btn{
    background:#fff0f0;
    color:#d92d20;
    padding:11px 17px;
    border-radius:8px;
    font-size:12px;
    font-weight:700;
}

.member-container{
    max-width:1100px;
    width:90%;
    margin:35px auto;
}

.welcome-box{
    margin-bottom:25px;
}

.welcome-box>span,.balance-card>span{
    font-size:10px;
    letter-spacing:1px;
    font-weight:800;
    color:#2563eb;
}

.welcome-box h2{
    margin:12px 0;
    font-size:25px;
}

.welcome-box p{
    font-size:12px;
    color:#667085;
}

.balance-card{
    background:linear-gradient(120deg,#1646ad,#2563eb);
    padding:30px;
    border-radius:15px;
    color:#fff;
}

.balance-card>span{
    color:#c8d8ff;
}

.balance-card h1{
    font-size:30px;
    margin:15px 0 20px;
}

.balance-card a{
    display:inline-block;
    padding:11px 17px;
    background:#fff;
    color:#2563eb;
    border-radius:8px;
    font-size:11px;
    font-weight:700;
}

.member-title{
    margin:35px 0 18px;
    font-size:17px;
}

.member-menu{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:15px;
}

.member-menu a{
    background:#fff;
    padding:22px;
    border:1px solid #edf0f5;
    border-radius:12px;
    display:flex;
    flex-direction:column;
    gap:11px;
}

.member-menu a>i{
    color:#2563eb;
    font-size:22px;
}

.member-menu strong{
    font-size:13px;
}

.member-menu small{
    color:#667085;
    font-size:10px;
}

.coming-box{
    display:flex;
    gap:15px;
    align-items:flex-start;
    background:#eff6ff;
    color:#1d4ed8;
    padding:20px;
    border-radius:11px;
    margin-top:25px;
}

.coming-box>i{
    font-size:20px;
}

.coming-box strong{
    font-size:12px;
}

.coming-box p{
    font-size:11px;
    line-height:1.7;
    margin-top:7px;
}

@media(max-width:650px){
    .auth-card{padding:25px 20px}
    .member-menu{grid-template-columns:repeat(2,1fr)}
    .balance-card h1{font-size:25px}
    .welcome-box h2{font-size:21px}
}