* { margin:0; padding:0; box-sizing:border-box; font-family:'Inter', sans-serif; }

body {
    background: linear-gradient(135deg,#06142b,#0a1f44,#0d2c63);
    color:white;
    overflow-x:hidden;
    scroll-behavior:smooth;
}

/* ===== NAVBAR ===== */
.navbar {
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:20px 60px;
    position:fixed;
    width:100%;
    top:0;
    backdrop-filter:blur(12px);
    background:rgba(6,20,43,0.6);
    z-index:1000;
}

.logo {
    font-size:26px;
    font-weight:800;
    color:#4da3ff;
    letter-spacing:1px;
}

.nav-links {
    display:flex;
}

.nav-links a {
    margin-left:30px;
    text-decoration:none;
    color:#cfe6ff;
    font-weight:500;
    transition:0.3s;
}

.nav-links a:hover { color:white; }

.menu-toggle {
    display:none;
    font-size:28px;
    cursor:pointer;
    color:#4da3ff;
}

/* ===== HERO ===== */
.hero {
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:140px 60px 80px;
    gap:60px;
    flex-wrap:wrap;
}

.hero-text {
    max-width:600px;
}

.hero-text h1 {
    font-size:clamp(32px,6vw,64px);
    font-weight:800;
    margin-bottom:20px;
}

.hero-text h1 span { color:#4da3ff; }

.hero-text p {
    color:#cfe6ff;
    font-size:18px;
    line-height:1.6;
    margin-bottom:40px;
}

.btns {
    display:flex;
    gap:20px;
}

.btn {
    padding:14px 26px;
    border-radius:14px;
    border:none;
    font-weight:600;
    cursor:pointer;
    transition:0.4s;
}

.btn-primary {
    background:white;
    color:#0a1f44;
    box-shadow:0 10px 30px rgba(0,0,0,0.4);
}

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

.btn-outline {
    background:transparent;
    border:1px solid #4da3ff;
    color:#4da3ff;
}

.btn-outline:hover {
    background:#4da3ff;
    color:white;
}

.hero img {
    width:100%;
    max-width:520px;
    border-radius:24px;
    box-shadow:0 40px 80px rgba(0,0,0,0.6);
    border:1px solid rgba(255,255,255,0.1);
}

/* ===== FEATURES ===== */
.features {
    padding:0 60px 60px 60px;
    text-align:center;
}

.features h2 {
    font-size:clamp(28px,4vw,42px);
    margin-bottom:20px;
}

.features p {
    color:#cfe6ff;
    max-width:700px;
    margin:auto;
    margin-bottom:70px;
}

.grid {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:30px;
    max-width:1200px;
    margin:auto;
}

.card {
    background:rgba(255,255,255,0.05);
    border:1px solid rgba(255,255,255,0.08);
    padding:30px;
    border-radius:22px;
    backdrop-filter:blur(14px);
    transition:0.4s;
}

.card:hover {
    transform:translateY(-8px);
    box-shadow:0 20px 40px rgba(0,0,0,0.5);
}

.card img {
    width:100%;
    border-radius:14px;
    margin-bottom:20px;
}

.card h3 {
    margin-bottom:12px;
    color:#4da3ff;
}

.card p {
    color:#cfe6ff;
    font-size:15px;
}

/* ===== FOOTER ===== */
footer {
    padding:30px;
    text-align:center;
    color:#9ecbff;
    background:#06142b;
}

/* ===== ANIMATION ===== */
.fade-up {
    opacity:0;
    transform:translateY(40px);
    transition:1s;
}

.fade-up.visible {
    opacity:1;
    transform:translateY(0);
}

/* ===== TABLET ===== */
@media (max-width:1024px) {
    .navbar { padding:20px 30px; }
    .hero { padding:120px 30px 60px; text-align:center;min-height:0; }
    .btns { justify-content:center; flex-wrap:wrap; }
	#image-hero {display:none;}
}

/* ===== MOBILE ===== */
@media (max-width:768px) {

    .menu-toggle { display:block; }

    .nav-links {
        position:absolute;
        top:70px;
        right:0;
        width:100%;
        background:rgba(6,20,43,0.97);
        flex-direction:column;
        align-items:center;
        display:none;
        padding:20px 0;
    }

    .nav-links.active { display:flex; }

    .nav-links a {
        margin:15px 0;
        font-size:18px;
    }

    .hero {
        flex-direction:column;
        gap:40px;
    }

    .hero-text { max-width:100%; }

    .btns {
        flex-direction:column;
        gap:15px;
    }

    .btn { width:100%; }

    .features { padding:80px 20px; }
}

/* ===== SMALL MOBILE ===== */
@media (max-width:480px) {
    .logo { font-size:22px; }
}