/* ===========================
RESET
=========================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    }
    
    html{
    scroll-behavior:smooth;
    }
    
    body{
    
    background:#050816;
    
    color:white;
    
    font-family:"Inter",sans-serif;
    
    overflow-x:hidden;
    
    }
    
    /* ===========================
    BACKGROUND
    =========================== */
    
    body::before{
    
    content:"";
    
    position:fixed;
    
    width:900px;
    
    height:900px;
    
    background:radial-gradient(circle,#2563eb22,transparent 70%);
    
    top:-250px;
    
    right:-250px;
    
    pointer-events:none;
    
    z-index:-2;
    
    }
    
    body::after{
    
    content:"";
    
    position:fixed;
    
    width:700px;
    
    height:700px;
    
    background:radial-gradient(circle,#06b6d422,transparent 70%);
    
    bottom:-250px;
    
    left:-250px;
    
    pointer-events:none;
    
    z-index:-2;
    
    }
    
    /* ===========================
    HEADER
    =========================== */
    
    header{
    
    position:fixed;
    
    width:100%;
    
    top:0;
    
    left:0;
    
    z-index:999;
    
    transition:.4s;
    
    }
    
    header.scrolled{
    
    background:rgba(5,8,22,.7);
    
    backdrop-filter:blur(20px);
    
    border-bottom:1px solid rgba(255,255,255,.08);
    
    }
    
    /* ===========================
    NAVBAR
    =========================== */
    
    .navbar{
    
    max-width:1280px;
    
    margin:auto;
    
    padding:20px 40px;
    
    display:flex;
    
    justify-content:space-between;
    
    align-items:center;
    
    }
    
    .logo{
    
    font-size:30px;
    
    font-family:"Space Grotesk",sans-serif;
    
    font-weight:bold;
    
    color:#3B82F6;
    
    cursor:pointer;
    
    transition:.3s;
    
    }
    
    .logo:hover{
    
    transform:scale(1.08);
    
    }
    
    .navbar ul{
    
    display:flex;
    
    gap:40px;
    
    list-style:none;
    
    }
    
    .navbar ul li{
    
    position:relative;
    
    }
    
    .navbar ul li a{
    
    text-decoration:none;
    
    color:white;
    
    transition:.3s;
    
    }
    
    .navbar ul li a:hover{
    
    color:#3B82F6;
    
    }
    
    .navbar ul li::after{
    
    content:"";
    
    position:absolute;
    
    bottom:-8px;
    
    left:0;
    
    width:0;
    
    height:2px;
    
    background:#3B82F6;
    
    transition:.35s;
    
    }
    
    .navbar ul li:hover::after{
    
    width:100%;
    
    }
    
    .resume-btn{
    
    padding:13px 28px;
    
    background:linear-gradient(135deg,#2563eb,#06b6d4);
    
    border-radius:40px;
    
    font-weight:bold;
    
    cursor:pointer;
    
    transition:.35s;
    
    }
    
    .resume-btn:hover{
    
    transform:translateY(-4px);
    
    box-shadow:0 15px 35px rgba(37,99,235,.35);
    
    }
    
    /* ===========================
    HERO
    =========================== */
    
    .hero{
        position: relative;
        overflow: hidden;
    }
    
    .intro{
    
    color:#3B82F6;
    
    font-weight:bold;
    
    letter-spacing:4px;
    
    }
    
    .hero h1{
    
    font-family:"Space Grotesk",sans-serif;
    
    font-size:72px;
    
    line-height:1.05;
    
    margin:25px 0;
    
    }
    
    .hero h1 span{
    
    background:linear-gradient(90deg,#3B82F6,#06B6D4);
    
    -webkit-background-clip:text;
    
    -webkit-text-fill-color:transparent;
    
    }
    
    .hero p{
    
    color:#CBD5E1;
    
    font-size:18px;
    
    line-height:1.9;
    
    margin-bottom:40px;
    
    }
    
    .buttons{
    
    display:flex;
    
    gap:20px;
    
    }
    
    .primary{
    
    padding:18px 38px;
    
    border-radius:50px;
    
    background:linear-gradient(135deg,#2563eb,#06b6d4);
    
    cursor:pointer;
    
    transition:.35s;
    
    }
    
    .primary:hover{
    
    transform:translateY(-5px);
    
    }
    
    .secondary{
    
    padding:18px 38px;
    
    border:1px solid rgba(255,255,255,.1);
    
    border-radius:50px;
    
    cursor:pointer;
    
    transition:.35s;
    
    }
    
    .secondary:hover{
    
    background:rgba(255,255,255,.05);
    
    }
    
    /* ===========================
    DASHBOARD
    =========================== */
    
    .dashboard{
    
    background:rgba(255,255,255,.05);
    
    backdrop-filter:blur(25px);
    
    border:1px solid rgba(255,255,255,.08);
    
    padding:25px;
    
    border-radius:28px;
    
    box-shadow:0 25px 60px rgba(0,0,0,.45);
    
    transition:.35s;
    
    }
    
    .dashboard:hover{
    
    transform:translateY(-10px);
    
    }
    
    .kpi-card{
    
    padding:25px;
    
    border-radius:20px;
    
    background:linear-gradient(135deg,#2563eb,#06b6d4);
    
    margin-bottom:20px;
    
    }
    
    .kpi-card h2{
    
    margin:10px 0;
    
    font-size:38px;
    
    }
    
    .chart-card{
    
    height:260px;
    
    padding:15px;
    
    background:#081221;
    
    border-radius:20px;
    
    margin-bottom:20px;
    
    }
    
    .bottom-cards{
    
    display:grid;
    
    grid-template-columns:repeat(3,1fr);
    
    gap:15px;
    
    }
    
    .mini-card{
    
    padding:18px;
    
    background:#101827;
    
    border-radius:18px;
    
    text-align:center;
    
    transition:.35s;
    
    }
    
    .mini-card:hover{
    
    background:#162033;
    
    transform:translateY(-6px);
    
    }
    
    .mini-card h3{
    
    margin-top:10px;
    
    color:#3B82F6;
    
    }