@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400;500;700&display=swap');

:root{
    --primary:#3b82f6;
    --primary-dark:#2563eb;
    --lan:#ff6b6b;
    --bill:#60a5fa;
    --dark:#0f172a;
    --text:#475569;
    --light:#f8fafc;
}

*{
    font-family:'Ubuntu',sans-serif;
}

body{
    background:#fff;
    color:var(--text);
    overflow-x:hidden;
}

.navbar{
    padding:16px 0;
    transition:.3s;
    background:rgba(255,255,255,.92);
    backdrop-filter:blur(14px);
    border-bottom:1px solid #eef2f7;
}

.brand{
    font-size:42px;
    font-weight:700;
    text-decoration:none;
}

.brand .lan{
    color:var(--lan);
}

.brand .bill{
    color:var(--bill);
}

.hero{
    min-height:90vh;
    display:flex;
    align-items:center;
    background:
    radial-gradient(circle at top right,#dbeafe 0%,transparent 45%),
    radial-gradient(circle at bottom left,#ffe4e6 0%,transparent 45%);
}

.hero h1{
    font-size:58px;
    font-weight:700;
    line-height:1.15;
    color:var(--dark);
}

.hero p{
    font-size:18px;
    margin:25px 0;
    max-width:620px;
}

.btn-main{
    background:var(--primary);
    color:#fff;
    padding:14px 34px;
    border-radius:12px;
    font-weight:600;
}

.btn-main:hover{
    background:var(--primary-dark);
    color:#fff;
}

.btn-outline-main{
    border:2px solid var(--primary);
    color:var(--primary);
    padding:14px 34px;
    border-radius:12px;
    font-weight:600;
}

.dashboard-preview{
    background:#fff;
    border-radius:22px;
    box-shadow:0 25px 70px rgba(0,0,0,.08);
    padding:18px;
}

.dashboard-preview img{
    width:100%;
    border-radius:14px;
}