*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{

    font-family:'Inter',sans-serif;

    background:#071321;

    color:#ffffff;

    line-height:1.6;

    overflow-x:hidden;

}

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

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

.container{

    width:min(1200px,92%);

    margin:auto;

}


header{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    z-index:100;

    background:rgba(7,19,33,.92);

    backdrop-filter:blur(14px);

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

}

header .container{

    display:flex;

    justify-content:space-between;

    align-items:center;

    height:80px;

}

.logo{

    display:flex;

    align-items:center;

    gap:14px;

}

.logo-icon{

    width:50px;
    height:50px;

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

}

.logo-icon img{

    width:100%;
    height:100%;
    object-fit:contain;

}

.logo h3{

    font-size:18px;

    font-weight:700;

}

.logo span{

    color:#9eb4cb;

    font-size:13px;

}

nav{

    display:flex;

    gap:32px;

}

nav a{

    color:#d8e4f2;

    transition:.3s;

    font-weight:500;

}

nav a:hover{

    color:#36b5ff;

}


.hero{

    padding-top:150px;

    padding-bottom:120px;

}

.hero-grid{

    display:grid;

    grid-template-columns:1fr 480px;

    gap:70px;

    align-items:center;

}

.badge{

    display:inline-flex;

    padding:10px 18px;

    border-radius:30px;

    background:#10263d;

    color:#7ecbff;

    margin-bottom:30px;

}

.hero h1{

    font-size:58px;

    line-height:1.1;

    margin-bottom:25px;

}

.hero p{

    color:#b8c7d6;

    font-size:19px;

    margin-bottom:45px;

}

.hero-buttons{

    display:flex;

    gap:20px;

}

.btn{

    padding:16px 34px;

    border-radius:12px;

    font-weight:600;

    transition:.35s;

}

.btn-primary{

    background:#129dff;

}

.btn-primary:hover{

    background:#35b2ff;

    transform:translateY(-3px);

}

.btn-secondary{

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

    background:#122238;

}

.btn-secondary:hover{

    background:#19304c;

}

.hero-card{

    background:#10243b;

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

    border-radius:26px;

    padding:55px;

    text-align:center;

    box-shadow:0 30px 70px rgba(0,0,0,.35);

}

.shield{

    width:140px;

    height:140px;

    border-radius:50%;

    background:#0ea5ff;

    margin:auto;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:64px;

    margin-bottom:35px;

}

.hero-card h3{

    font-size:28px;

    margin-bottom:20px;

}

.hero-card p{

    color:#b7c7d7;

}

.section{

    padding:110px 0;

}

.section-title{

    text-align:center;

    margin-bottom:70px;

}

.section-title h2{

    font-size:44px;

    margin-bottom:18px;

}

.section-title p{

    color:#9fb0c1;

    max-width:700px;

    margin:auto;

}


.cards{

    display:grid;

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

    gap:30px;

}

.card{

    background:#10243b;

    border-radius:18px;

    padding:35px;

    transition:.35s;

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

}

.card:hover{

    transform:translateY(-10px);

    border-color:#1ea7ff;

}

.icon{

    width:70px;

    height:70px;

    border-radius:50%;

    background:#0ea5ff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:30px;

    margin-bottom:25px;

}

.card h3{

    margin-bottom:16px;

}

.card p{

    color:#adc0d2;

}


.timeline{

    padding:110px 0;

    background:#09192c;

}

.timeline-list{

    max-width:900px;

    margin:60px auto 0;

    display:flex;

    flex-direction:column;

    gap:24px;

}

.step{

    display:flex;

    align-items:flex-start;

    gap:25px;

    background:#10243b;

    border-radius:20px;

    padding:28px;

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

    transition:.35s;

}

.step:hover{

    transform:translateX(8px);

    border-color:#1ea7ff;

}

.number{

    width:56px;

    height:56px;

    border-radius:50%;

    background:#0ea5ff;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:22px;

    font-weight:700;

    flex-shrink:0;

}

.step h3{

    margin-bottom:10px;

    font-size:22px;

}

.step p{

    color:#afc0d2;

}


.danger-grid{

    display:grid;

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

    gap:30px;

}

.danger-card{

    background:#10243b;

    border-radius:22px;

    padding:35px;

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

    transition:.35s;

}

.danger-card:hover{

    transform:translateY(-8px);

    border-color:#1ea7ff;

}

.danger-icon{

    width:70px;

    height:70px;

    border-radius:18px;

    background:#0ea5ff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:32px;

    margin-bottom:25px;

}

.danger-card h3{

    margin-bottom:16px;

    font-size:24px;

}

.danger-card p{

    color:#b4c3d2;

    margin-bottom:20px;

}

.danger-card a{

    color:#2eb4ff;

    font-weight:600;

}

.danger-card a:hover{

    color:#78d5ff;

}


.light{

    background:#09192c;

}

.protect-grid{

    display:grid;

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

    gap:30px;

}

.protect-card{

    background:#10243b;

    padding:35px;

    border-radius:22px;

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

    transition:.35s;

}

.protect-card:hover{

    transform:translateY(-8px);

    border-color:#2ab3ff;

}

.protect-card span{

    display:inline-flex;

    width:48px;

    height:48px;

    border-radius:50%;

    background:#0ea5ff;

    justify-content:center;

    align-items:center;

    font-weight:700;

    margin-bottom:20px;

}

.protect-card h3{

    margin-bottom:16px;

    font-size:22px;

}

.protect-card p{

    color:#b7c8d9;

}

.cta{

    padding:120px 0;

}

.cta-box{

    background:linear-gradient(180deg,#123657,#0c2338);

    border-radius:30px;

    padding:70px;

    text-align:center;

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

}

.cta-box h2{

    font-size:42px;

    max-width:760px;

    margin:auto;

    margin-bottom:25px;

}

.cta-box p{

    color:#c1d0de;

    margin-bottom:45px;

}


.login-form{

    display:flex;

    justify-content:center;

    gap:20px;

    margin-bottom:60px;

}

.login-form input{

    width:420px;

    padding:18px 24px;

    border:none;

    border-radius:14px;

    background:#081827;

    color:#fff;

    font-size:16px;

}

.login-form input:focus{

    outline:2px solid #22aaff;

}

.login-form button{

    padding:18px 38px;

    border:none;

    border-radius:14px;

    background:#0ea5ff;

    color:#fff;

    cursor:pointer;

    font-size:16px;

    font-weight:600;

    transition:.3s;

}

.login-form button:hover{

    background:#38b8ff;

}


.cta-features{

    display:grid;

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

    gap:25px;

}

.feature{

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

    border-radius:18px;

    padding:30px;

}

.feature-icon{

    font-size:42px;

    margin-bottom:18px;

}

.feature h3{

    margin-bottom:12px;

}

.feature p{

    color:#b9c8d7;

}


footer{

    margin-top:100px;

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

    padding:45px 0;

}

.footer{

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.footer h3{

    margin-bottom:10px;

}

.footer p{

    color:#96abc0;

}

.footer-links{

    display:flex;

    gap:30px;

}

.footer-links a{

    color:#d2e0ec;

}

.footer-links a:hover{

    color:#2ab3ff;

}


@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

.hero,
.section,
.timeline,
.cta{

    animation:fadeUp .8s ease;

}


::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#06111d;

}

::-webkit-scrollbar-thumb{

    background:#1789d6;

    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

    background:#36b5ff;

}


::selection{

    background:#199eff;

    color:#fff;

}



input::placeholder{

    color:#7d96ad;

}



body::before{

    content:"";

    position:fixed;

    top:-300px;

    right:-250px;

    width:700px;

    height:700px;

    border-radius:50%;

    background:radial-gradient(circle,#169eff55,transparent 70%);

    pointer-events:none;

    z-index:-1;

}

body::after{

    content:"";

    position:fixed;

    left:-300px;

    bottom:-250px;

    width:700px;

    height:700px;

    border-radius:50%;

    background:radial-gradient(circle,#0b6db833,transparent 70%);

    pointer-events:none;

    z-index:-1;

}


.card,
.danger-card,
.protect-card,
.feature,
.hero-card{

    transition:
    transform .35s,
    box-shadow .35s,
    border-color .35s;

}

.card:hover,
.danger-card:hover,
.protect-card:hover,
.feature:hover,
.hero-card:hover{

    box-shadow:0 25px 55px rgba(0,0,0,.35);

}


@media(max-width:1100px){

.hero-grid{

grid-template-columns:1fr;

text-align:center;

}

.hero-buttons{

justify-content:center;

}

.cards{

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

}

.danger-grid{

grid-template-columns:1fr;

}

.protect-grid{

grid-template-columns:1fr;

}

.cta-features{

grid-template-columns:1fr;

}

.footer{

flex-direction:column;

gap:35px;

}

}

@media(max-width:768px){

header .container{

height:70px;

}

nav{

display:none;

}

.hero{

padding-top:120px;

}

.hero h1{

font-size:40px;

}

.section-title h2{

font-size:34px;

}

.cards{

grid-template-columns:1fr;

}

.login-form{

flex-direction:column;

}

.login-form input{

width:100%;

}

.login-form button{

width:100%;

}

.cta-box{

padding:40px 25px;

}

.cta-box h2{

font-size:30px;

}

.timeline-list{

gap:18px;

}

.step{

flex-direction:column;

}

}

@media(max-width:480px){

.hero h1{

font-size:34px;

}

.hero p{

font-size:16px;

}

.btn{

width:100%;

text-align:center;

}

.hero-buttons{

flex-direction:column;

}

.logo span{

display:none;

}

.badge{

font-size:13px;

}

.section{

padding:80px 0;

}

.card,
.danger-card,
.protect-card,
.feature{

padding:25px;

}

.footer-links{

flex-direction:column;

gap:12px;

text-align:center;

}

}


.hidden{

opacity:0;

transform:translateY(40px);

transition:all .7s ease;

}

.show{

opacity:1;

transform:translateY(0);

}

.header-scroll{

background:#071321ee;

box-shadow:0 10px 30px rgba(0,0,0,.35);

}

.top-button{

position:fixed;

right:30px;

bottom:30px;

width:52px;

height:52px;

border:none;

border-radius:50%;

background:#149dff;

color:#fff;

font-size:22px;

cursor:pointer;

opacity:0;

pointer-events:none;

transition:.3s;

box-shadow:0 10px 25px rgba(0,0,0,.35);

}

.top-button:hover{

transform:translateY(-5px);

}

.top-button.visible{

opacity:1;

pointer-events:auto;

}