:root{--navy:#073a73;--blue:#087dc1;--sky:#41c7f1;--ink:#133454;--mist:#f4f8fc}*{box-sizing:border-box}body{font-family:'DM Sans',sans-serif;color:var(--ink);background:#fff}h1,h2,h3,.brand{font-family:'Space Grotesk',sans-serif;font-weight:700}.site-header{height:78px;display:flex;align-items:center;background:#fff}.brand{color:var(--navy);font-size:28px;text-decoration:none;letter-spacing:-1.5px}.brand span{color:#168ac9}.brand small{font-family:'DM Sans';font-weight:700;letter-spacing:1.8px;font-size:8px;display:block;margin-top:-5px}.socials{display:flex;gap:13px}.socials a{color:var(--navy);font-size:18px;transition:.2s}.socials a:hover{color:var(--sky)}

.hero{
    position:relative;
    overflow:hidden;
    padding:90px 0 140px;
    min-height:860px;
    display:flex;
    align-items:center;
    border-bottom:1px solid rgba(255,255,255,.08);

    background:
        radial-gradient(circle at 80% 35%, rgba(25,120,255,.18), transparent 30%),
        radial-gradient(circle at 25% 20%, rgba(0,180,255,.10), transparent 25%),
        linear-gradient(135deg,#041327 0%,#071B3C 45%,#0A2857 100%);
}

.eyebrow{font-size:11px;font-weight:700;letter-spacing:1.8px;color:#4DBBFF;margin:0 0 12px}

.hero h1{font-size:clamp(58px,7vw,82px);line-height:.99;letter-spacing:-3px;color:#ffffff;margin-bottom:23px;max-width:720px;}

.hero h1 span{color:#0e94d1}.lead{font-size:18px;line-height:1.65;max-width:590px;color:rgba(255,255,255,.82);}

.feature-row{
    display:flex;
    gap:20px;
    margin-top:42px;
}

.feature-card{
    display:flex;
    align-items:center;
    gap:16px;

    width:260px;
    height:82px;

    padding:16px 18px;

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

    border-radius:18px;

    backdrop-filter:blur(12px);

    transition:.3s;
}

.feature-card:hover{
    transform:translateY(-4px);
    background:rgba(255,255,255,.09);
}

.feature-card i{
    width:42px;
    height:42px;

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

    border-radius:12px;

    background:rgba(0,153,255,.15);

    color:#34b8ff;

    flex-shrink:0;
}

.feature-text{
    display:flex;
    flex-direction:column;
}

.feature-text b{
    color:#fff;
    font-size:17px;
    line-height:1.2;
    margin:0;
}

.feature-text span{
    color:rgba(255,255,255,.72);
    font-size:14px;
    margin-top:3px;
}

.hero-art{
    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
    min-height:520px;
    transform:translateY(-60px);

}

.hero-glow{
    position:absolute;
    width:900px;
    height:900px;
    border-radius:50%;
    background:radial-gradient(circle,rgba(25,150,255,.30),transparent 50%);
    filter:blur(10px);
}

.hero-image{
    max-width:860px;
    width:100%;
    border-radius:14px;
    box-shadow:
        0 30px 70px rgba(0,0,0,.45),
        0 0 80px rgba(0,140,255,.18);

    position:relative;
    z-index:2;
}

@keyframes float{

0%{
transform:translateY(0px);
}

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

100%{
transform:translateY(0px);
}

}

.floating-card{
    position:absolute;
    background:white;
    border-radius:16px;
    padding:14px 18px;
    display:flex;
    align-items:center;
    gap:12px;
    box-shadow:0 20px 45px rgba(0,0,0,.12);
    z-index:5;
    white-space:nowrap;
}

.floating-card i{
    color:#1398d2;
    font-size:22px;
}

.floating-card strong{
    display:block;
    color:#073a73;
}

.floating-card small{
    color:#7b8fa2;
}

.floating-card-1{
    top:-28px;
    left:50px;
    transform:translateX(-50%);
}

.floating-card-2{
    bottom:-28px;
    right:24px;
    
}

.hero-buttons{
    display:flex;
    gap:18px;
    margin:38px 0 48px;
}

.btn-primary-hero{
    background:#1D6BFF;
    color:#fff;
    padding:16px 34px;
    border-radius:50px;
    font-weight:700;
    text-decoration:none;
    transition:.3s;
}

.btn-primary-hero:hover{
    transform:translateY(-3px);
    box-shadow:0 12px 30px rgba(29,107,255,.35);
}

.btn-secondary-hero{
    color:#fff;
    border:1px solid rgba(255,255,255,.25);
    padding:16px 34px;
    border-radius:50px;
    text-decoration:none;
    backdrop-filter:blur(8px);
}


.hero::before{
    content:"";
    position:absolute;

    width:700px;
    height:700px;

    right:-180px;
    top:120px;

    border-radius:50%;

    background:radial-gradient(circle,
        rgba(0,153,255,.22),
        transparent 70%);

    filter:blur(50px);

    pointer-events:none;
}

.hero::after{
    content:"";
    position:absolute;

    width:450px;
    height:450px;

    right:220px;
    top:200px;

    border-radius:50%;

    background:radial-gradient(circle,
        rgba(0,110,255,.14),
        transparent 70%);

    filter:blur(35px);

    pointer-events:none;
}

.registration-section{
    position:relative;
    margin-top:-130px;
    margin-bottom:90px;
    z-index:30;
}

.form-shell{
    display:grid;
    grid-template-columns:380px 1fr;

    overflow:hidden;

    border-radius:28px;

    background:#fff;

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

    box-shadow:
        0 30px 80px rgba(0,0,0,.18),
        0 8px 25px rgba(7,45,90,.10);
}

.form-intro{
    padding:60px 42px;

    color:#fff;

    display:flex;
    flex-direction:column;
    justify-content:space-between;

    background:
        radial-gradient(circle at top right,
            rgba(0,170,255,.18),
            transparent 40%),

        linear-gradient(160deg,
            #041B37,
            #083C74 55%,
            #0B6AA9);
}

.form-intro h2{
    font-size:42px;
    line-height:1.05;
    letter-spacing:-2px;
    margin:18px 0 24px;
}

.form-intro p:not(.eyebrow){
    color:rgba(255,255,255,.82);
    line-height:1.8;
    font-size:16px;
}

.safe-note{

    margin-top:40px;

    display:flex;
    gap:16px;

    padding:18px;

    border-radius:18px;

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

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

    backdrop-filter:blur(12px);
}

.safe-note i{color:#64d5f3;font-size:20px}

.registration-form{

    background:#fff;

    padding:60px 52px 52px;
}

.registration-form h3{

    display:flex;
    align-items:center;

    gap:14px;

    margin:36px 0 24px;
    padding:16px 24px;

    background:#EAF4FF;
    border:1px solid #D6E8FF;
    border-radius:14px;

    font-size:20px;
    font-weight:700;
    color:#083A74;

    line-height:1;
}

.registration-form h3:first-of-type{margin-top:0}label{font-size:12px;font-weight:700;margin:0 0 6px;display:block}em{color:#e04141;font-style:normal}input,select{width:100%;border:1px solid #d7e2eb;border-radius:7px;min-height:43px;padding:9px 11px;color:var(--ink);font-size:14px;background:#fff}input:focus,select:focus{outline:0;border-color:#139bd3;box-shadow:0 0 0 3px #d8f4fd}

.register-btn{border:0;background:linear-gradient(90deg,#0879bb,#10a3d9);color:white;border-radius:7px;padding:14px 19px;font-weight:700;width:100%;margin-top:26px;box-shadow:0 8px 18px #128acb44}

.register-btn i{margin-left:8px}

.form-footnote{text-align:center;color:#748899;font-size:11px;margin:13px 0 0}

.form-footnote i{color:#19a3d8;margin-right:4px}footer{background:#052f5d;color:#cde0ef;padding:42px 0 0;font-size:13px}

footer{

    background:#082D5A;

    color:#D7E7F5;

    padding:70px 0 0;

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

}

.footer-grid{

    display:grid;

    grid-template-columns:1.2fr .9fr;

    gap:80px;

    align-items:start;

}

.footer-logo{

    height:60px;

    width:auto;

    margin-bottom:22px;

}

.footer-brand p{

    max-width:420px;

    line-height:1.8;

    color:#BFD3E7;

}

.footer-social{

    display:flex;

    gap:14px;

    margin-top:30px;

}

.footer-social a{

    width:42px;

    height:42px;

    border-radius:50%;

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

    color:white;

    display:flex;

    justify-content:center;

    align-items:center;

    text-decoration:none;

    transition:.30s;

}

.footer-social a:hover{

    background:#199BFF;

    transform:translateY(-4px);

}

.footer-contact h5{

    color:white;

    margin-bottom:26px;

    font-size:22px;

}

.footer-contact div{

    display:flex;

    gap:16px;

    margin-bottom:22px;

    align-items:flex-start;

}

.footer-contact i{

    width:20px;

    margin-top:4px;

    color:#3DBDFF;

}

.footer-contact span{

    color:#C7DBED;

    line-height:1.7;

}

.copyright{

    margin-top:60px;

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

    padding:24px 0;

    display:flex;

    justify-content:space-between;

    align-items:center;

    font-size:14px;

}

.developer{

    color:#BFD3E7;

}

.developer a{

    color:#38B6FF;

    text-decoration:none;

    font-weight:700;

}

.developer a:hover{

    color:white;

}

.whatsapp-float{position:fixed;z-index:5;bottom:22px;right:22px;width:53px;height:53px;border-radius:50%;display:grid;place-items:center;background:#25d366;color:#fff;font-size:29px;box-shadow:0 7px 21px #0e683988;animation:pulse 2s infinite}@keyframes pulse{50%{box-shadow:0 0 0 10px #25d36622}}

.return-page,.login-wrap{min-height:100vh;background:var(--mist);display:grid;place-items:center;padding:25px}

.return-card,.login-card{max-width:530px;width:100%;background:#fff;border-radius:18px;box-shadow:0 15px 55px #17365321;padding:45px;text-align:center}

.return-card>i{font-size:50px}.success{color:#169d66}.pending{color:#d18706}

.login-card{text-align:left}.login-card .brand{display:inline-block;margin-bottom:42px}

.login-card h1{font-size:25px;margin-bottom:25px}.login-card label{margin-top:15px}.login-card .check{font-weight:400;margin:0}

.login-card .check input{width:auto;min-height:0}.login-card a{font-size:12px}.admin-body{background:#f4f7fa}

.admin-nav{height:65px;background:#073a73;padding:0 clamp(18px,5vw,65px);display:flex;align-items:center;justify-content:space-between}

.admin-nav .brand{color:#fff}.admin-nav div{display:flex;gap:22px;align-items:center}

.admin-nav a,.admin-nav button{color:#cde0ef;background:none;border:0;font-size:13px;text-decoration:none}

.admin-main{max-width:1200px;margin:auto;padding:42px 24px}.page-heading{display:flex;justify-content:space-between;align-items:end;margin-bottom:27px}

.page-heading h1{font-size:32px;margin:0}.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;margin-bottom:24px}

.stat-grid div,.data-card{background:#fff;border:1px solid #e4ebf1;border-radius:12px}.stat-grid div{padding:21px}

.stat-grid span{font-size:12px;color:#6d8194;display:block}.stat-grid b{font:700 25px 'Space Grotesk';display:block;margin-top:8px}

.data-card{padding:23px}.data-card h2{font-size:18px;margin-bottom:19px}.data-card table{font-size:13px;margin:0}

.data-card a{color:#087abe;text-decoration:none}.status{font-size:11px;border-radius:20px;padding:4px 9px;text-transform:capitalize}

.status.paid{background:#daf7ea;color:#087349}.status.pending{background:#fff2d4;color:#956500}

.status.failed,.status.cancelled{background:#fde3e4;color:#b62533}.filter-form{display:flex;gap:10px;margin-bottom:20px}

.filter-form input{max-width:300px}.filter-form select{max-width:160px}.filter-form .btn{white-space:nowrap}

.details{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-bottom:20px}

.details div{display:flex;flex-direction:column;gap:5px;font-size:14px}.details b{font-size:11px;text-transform:uppercase;color:#6d8194;letter-spacing:.5px}

.settings-form h2{font-size:18px;border-bottom:1px solid #e8eef4;padding-bottom:12px;margin:30px 0 15px}

.settings-form h2:first-child{margin-top:0}

.intro-benefits{

    display:flex;
    flex-direction:column;

    gap:18px;

    margin:38px 0 42px;

}

.benefit{

    display:flex;
    align-items:center;

    gap:14px;

    color:#fff;

}

.benefit i{

    color:#3CCBFF;

    font-size:18px;

}

.benefit span{

    font-size:15px;

    color:rgba(255,255,255,.90);

}

.safe-note{

    display:flex;

    gap:16px;

    padding:20px;

    border-radius:18px;

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

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

    backdrop-filter:blur(12px);

}

.safe-note i{

    font-size:28px;

    color:#44C8FF;

    margin-top:2px;

}

.safe-note strong{

    display:block;

    color:#fff;

    font-size:16px;

    margin-bottom:6px;

}

.safe-note small{

    display:block;

    color:rgba(255,255,255,.82);

    line-height:1.6;

    font-size:14px;

}

.registration-form h3{

    display:flex;
    align-items:center;

    gap:12px;

    font-size:20px;

    color:#073B74;

    margin:34px 0 22px;

    padding:16px 20px;

    background:#F4F9FF;

    border-radius:14px;

    border:none;

}

.section-number{

    width:28px;
    height:28px;

    border-radius:50%;

    background:#1E8FFF;

    color:#fff;

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

    font-size:14px;
    font-weight:700;

}

.registration-form h3 i{

    color:#1E8FFF;

}

input,
select{

    min-height:54px;

    border-radius:12px;

    padding:14px 16px;

}

.payment-trust{

    margin-top:18px;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:10px;

    font-size:14px;

    color:#71879B;

}

.payment-trust i{

    color:#199BFF;

}

.paynow-logo{

    height:50px;

    width:auto;

}

.site-logo,.footer-logo{
            height:40px;

    width:auto;
    transition:.3s;

}

.site-logo:hover,
.footer-logo:hover{

    transform:scale(1.03);

}

@media (max-width: 767px){
    .site-header{height:64px}
    
    .hero{padding:57px 0}
    
    .hero-art{
        height:250px;
        margin-top: -70px;
        margin-bottom: -70px;
    }
    
    .form-shell{grid-template-columns:1fr}
    
    .form-intro,.registration-form{padding:32px 22px}
    
    .form-intro h2{font-size:29px}
    
    .safe-note{margin-top:25px}
    
    .stat-grid{grid-template-columns:repeat(2,1fr)}
    
    .admin-nav{padding:0 16px}
    
    .admin-nav div{gap:10px}
    
    .admin-nav a{font-size:11px}
    
    .details{grid-template-columns:1fr}
    
    .filter-form{flex-direction:column}
    
    .filter-form input,.filter-form select{max-width:none}
    
    .footer-contact{margin-top:25px}
    
    .feature-row{
        display:flex;
        flex-direction:column;
        gap:16px;
    }

    .feature-card{
        width:100%;
        max-width:360px;
    }

    .feature-text b{
        font-size:22px;
    }

    .feature-text span{
        font-size:16px;
    }

    .floating-card-1{
        display:none;
    }
    .floating-card-2{
        display:none;
    }

    .registration-form .row{
        row-gap: 12px;
    }

    .registration-form h3{
        margin:24px 0 18px;
        padding: 14px 18px;
        font-size: 18px;
    }

    input,
    select{
        min-height:50px;
    }

    .register-btn{
        min-height:56px;
        font-size:17px;
    }

    .payment-trust{
        flex-direction:column;
        gap:10px;
        text-align:center;
    }

    .paynow-logo{
        height:34px;
    }

    .footer-grid{

    grid-template-columns:1fr;

    gap:50px;

}

.copyright{

    flex-direction:column;

    text-align:center;

    gap:12px;

}

}

@media(max-width:420px){
    .socials{gap:9px}
    
    .hero h1{letter-spacing:-2.5px}
    
    .stat-grid{grid-template-columns:1fr}
    }