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

        :root{
            --primary:#2563eb;
            --secondary:#7c3aed;
            --dark:#0f172a;
            --dark2:#111827;
            --white:#ffffff;
            --text:#cbd5e1;
            --glass:rgba(255,255,255,0.08);
            --border:rgba(255,255,255,0.08);
        }

        html{
            scroll-behavior:smooth;
        }

        body{
            font-family:'Plus Jakarta Sans',sans-serif;
            background:
            radial-gradient(circle at top left, rgba(37,99,235,0.20), transparent 25%),
            radial-gradient(circle at bottom right, rgba(124,58,237,0.18), transparent 25%),
            linear-gradient(135deg,#0f172a,#111827,#1e293b);

            color:white;
            min-height:100vh;
            overflow-x:hidden;
        }

        /* ========================= */
        /* NAVBAR */
        /* ========================= */

        .navbar{
            position:sticky;
            top:0;
            z-index:999;
            display:flex;
            justify-content:space-between;
            align-items:center;
            padding:18px 7%;
            background:rgba(255,255,255,0.05);
            backdrop-filter:blur(18px);
            border-bottom:1px solid rgba(255,255,255,0.08);
        }

        .navbar-brand{
            display:flex;
            align-items:center;
            gap:12px;
            text-decoration:none;
            color:white;
            font-size:1.3rem;
            font-weight:800;
        }

        .navbar-brand .logo{
            width:45px;
            height:45px;
            border-radius:14px;
            background:linear-gradient(135deg,var(--primary),var(--secondary));
            display:flex;
            align-items:center;
            justify-content:center;
            font-size:18px;
            box-shadow:0 10px 30px rgba(37,99,235,.35);
        }

        .navbar-menu{
            display:flex;
            align-items:center;
            gap:14px;
        }

        .nav-link{
            position:relative;
            text-decoration:none;
            color:white;
            padding:12px 20px;
            border-radius:14px;
            font-weight:600;
            transition:0.4s;
            background:rgba(255,255,255,0.04);
            border:1px solid rgba(255,255,255,0.05);
            overflow:hidden;
        }

        .nav-link:hover{
            transform:translateY(-4px);
            background:linear-gradient(135deg,var(--primary),var(--secondary));
            box-shadow:0 15px 30px rgba(124,58,237,.30);
        }

        /* ========================= */
        /* HERO */
        /* ========================= */

        .hero{
            position:relative;
            padding:120px 7%;
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:60px;
            flex-wrap:wrap;
        }

        .hero-left{
            flex:1;
            min-width:320px;
            z-index:2;
        }

        .hero-badge{
            display:inline-flex;
            align-items:center;
            gap:10px;
            padding:10px 18px;
            border-radius:999px;
            background:rgba(255,255,255,0.06);
            border:1px solid rgba(255,255,255,0.08);
            backdrop-filter:blur(14px);
            color:#cbd5e1;
            margin-bottom:25px;
        }

        .hero-title{
            font-size:4rem;
            font-weight:800;
            line-height:1.1;
            margin-bottom:25px;
        }

        .gradient-text{
            background:linear-gradient(135deg,#60a5fa,#a78bfa);
            -webkit-background-clip:text;
            -webkit-text-fill-color:transparent;
        }

        .hero-desc{
            color:#94a3b8;
            font-size:1.1rem;
            line-height:1.8;
            max-width:650px;
            margin-bottom:35px;
        }

        .hero-buttons{
            display:flex;
            gap:20px;
            flex-wrap:wrap;
        }

        .btn{
            display:inline-flex;
            align-items:center;
            gap:10px;
            padding:16px 28px;
            border-radius:16px;
            text-decoration:none;
            font-weight:700;
            transition:0.4s;
        }

        .btn-primary{
            background:linear-gradient(135deg,var(--primary),var(--secondary));
            color:white;
            box-shadow:0 15px 35px rgba(99,102,241,.35);
        }

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

        .btn-outline{
            border:1px solid rgba(255,255,255,0.10);
            color:white;
            background:rgba(255,255,255,0.04);
            backdrop-filter:blur(10px);
        }

        .btn-outline:hover{
            background:rgba(255,255,255,0.08);
            transform:translateY(-5px);
        }

        /* ========================= */
        /* HERO RIGHT */
        /* ========================= */

        .hero-right{
            flex:1;
            min-width:320px;
            display:flex;
            justify-content:center;
            position:relative;
        }

        .dashboard-card{
            width:100%;
            max-width:480px;
            padding:30px;
            border-radius:30px;
            background:rgba(255,255,255,0.06);
            border:1px solid rgba(255,255,255,0.08);
            backdrop-filter:blur(24px);
            box-shadow:0 20px 60px rgba(0,0,0,.35);
        }

        .dashboard-top{
            display:flex;
            justify-content:space-between;
            align-items:center;
            margin-bottom:30px;
        }

        .dashboard-title{
            font-size:1.1rem;
            font-weight:700;
        }

        .circle{
            width:12px;
            height:12px;
            border-radius:50%;
            background:#22c55e;
            box-shadow:0 0 15px #22c55e;
        }

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

        .stat-box{
            padding:22px;
            border-radius:20px;
            background:rgba(255,255,255,0.05);
            border:1px solid rgba(255,255,255,0.06);
        }

        .stat-box h2{
            font-size:2rem;
            margin-bottom:5px;
        }

        .stat-box p{
            color:#94a3b8;
            font-size:.9rem;
        }

        /* ========================= */
        /* FEATURES */
        /* ========================= */

        .features{
            padding:40px 7% 100px;
        }

        .section-title{
            text-align:center;
            font-size:2.5rem;
            font-weight:800;
            margin-bottom:60px;
        }

        .feature-grid{
            display:grid;
            grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
            gap:25px;
        }

        .feature-card{
            padding:35px;
            border-radius:28px;
            background:rgba(255,255,255,0.05);
            border:1px solid rgba(255,255,255,0.08);
            backdrop-filter:blur(16px);
            transition:0.4s;
        }

        .feature-card:hover{
            transform:translateY(-10px);
            box-shadow:0 20px 50px rgba(37,99,235,.20);
        }

        .feature-icon{
            width:70px;
            height:70px;
            border-radius:20px;
            background:linear-gradient(135deg,var(--primary),var(--secondary));
            display:flex;
            align-items:center;
            justify-content:center;
            font-size:28px;
            margin-bottom:25px;
        }

        .feature-card h3{
            margin-bottom:15px;
            font-size:1.3rem;
        }

        .feature-card p{
            color:#94a3b8;
            line-height:1.8;
        }

        /* ========================= */
        /* CONTENT */
        /* ========================= */

        .container{
            width:100%;
            max-width:1200px;
            margin:auto;
            padding:0 20px;
        }

        .glass-card{
            background:rgba(255,255,255,0.05);
            border:1px solid rgba(255,255,255,0.08);
            backdrop-filter:blur(16px);
            border-radius:30px;
            padding:35px;
            margin-top:40px;
            box-shadow:0 15px 40px rgba(0,0,0,.25);
        }

        /* ========================= */
        /* ALERT */
        /* ========================= */

        .alert{
            padding:16px 20px;
            border-radius:18px;
            margin-top:20px;
            font-weight:600;
        }

        .alert-success{
            background:rgba(34,197,94,0.15);
            border:1px solid rgba(34,197,94,0.2);
        }

        .alert-danger{
            background:rgba(239,68,68,0.15);
            border:1px solid rgba(239,68,68,0.2);
        }

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

        footer{
            margin-top:100px;
            padding:60px 20px;
            text-align:center;
            border-top:1px solid rgba(255,255,255,0.08);
            background:rgba(255,255,255,0.03);
            backdrop-filter:blur(10px);
        }

        footer h2{
            margin-bottom:10px;
        }

        footer p{
            color:#94a3b8;
            margin-bottom:25px;
        }

        .socials{
            display:flex;
            justify-content:center;
            gap:15px;
            margin-bottom:20px;
        }

        .socials a{
            width:50px;
            height:50px;
            border-radius:50%;
            display:flex;
            align-items:center;
            justify-content:center;
            background:rgba(255,255,255,0.06);
            color:white;
            transition:0.4s;
            text-decoration:none;
        }

        .socials a:hover{
            transform:translateY(-5px);
            background:linear-gradient(135deg,var(--primary),var(--secondary));
        }

        .copyright{
            color:#94a3b8;
            font-size:.9rem;
        }

        /* ========================= */
        /* GLOW EFFECT */
        /* ========================= */

        .glow{
            position:absolute;
            width:500px;
            height:500px;
            background:radial-gradient(circle, rgba(37,99,235,.35), transparent 70%);
            filter:blur(60px);
            z-index:0;
        }

        .glow-1{
            top:-150px;
            left:-100px;
        }

        .glow-2{
            bottom:-150px;
            right:-100px;
            background:radial-gradient(circle, rgba(124,58,237,.30), transparent 70%);
        }

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

        @media(max-width:900px){

            .hero{
                flex-direction:column;
                text-align:center;
                padding-top:80px;
            }

            .hero-buttons{
                justify-content:center;
            }

            .hero-title{
                font-size:3rem;
            }

            .navbar{
                flex-direction:column;
                gap:20px;
            }

            .navbar-menu{
                flex-wrap:wrap;
                justify-content:center;
            }

        }

        @media(max-width:600px){

            .hero-title{
                font-size:2.2rem;
            }

            .section-title{
                font-size:2rem;
            }

            .dashboard-card{
                padding:20px;
            }

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

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