/* ===========================
   Reset
=========================== */

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

html{
    scroll-behavior:smooth;
}

body{

    font-family:var(--font);

    background:var(--bg);

    color:var(--text);

    overflow-x:hidden;

    min-height:100vh;

}

/* ===========================
   Animated background
=========================== */

.background{

    position:fixed;

    inset:0;

    z-index:-2;

    overflow:hidden;

    background:
        radial-gradient(circle at top,#13213f 0%,#070b14 55%),
        #070b14;

}

.background-grid{

    position:absolute;

    inset:0;

    background-image:

        linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),

        linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);

    background-size:48px 48px;

    opacity:.45;

}

.background-glow{

    position:absolute;

    width:550px;

    height:550px;

    border-radius:50%;

    filter:blur(120px);

    opacity:.25;

    animation:float 18s ease-in-out infinite;

}

.glow-1{

    background:#1cc8ff;

    top:-180px;

    left:-120px;

}

.glow-2{

    background:#3b6cff;

    bottom:-200px;

    right:-100px;

    animation-delay:-9s;

}

/* ===========================
   Header
=========================== */

#header{

    position:sticky;

    top:0;

    z-index:100;

    backdrop-filter:blur(18px);

    background:rgba(7,11,20,.55);

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

}

.topbar{

    max-width:var(--container);

    margin:auto;

    height:var(--header-height);

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:0 32px;

}

/* ===========================
   Main
=========================== */

.page{

    max-width:var(--container);

    margin:auto;

    padding:48px 32px;

}

/* ===========================
   Hero
=========================== */

.hero{

    display:grid;

    grid-template-columns:320px 1fr;

    gap:64px;

    align-items:start;

    margin-bottom:50px;

}

/* ===========================
   Cover
=========================== */

.cover{

    width:320px;

    aspect-ratio:1;

    border-radius:30px;

    background:linear-gradient(145deg,#17294c,#0d1524);

    display:flex;

    align-items:center;

    justify-content:center;

    box-shadow:var(--shadow);

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

}

.note{

    font-size:120px;

}

/* ===========================
   Dashboard
=========================== */

.dashboard{

    display:grid;

    grid-template-columns:

        repeat(3,1fr);

    gap:24px;

    margin-top:30px;

}

/* ===========================
   Footer
=========================== */

footer{

    max-width:var(--container);

    margin:60px auto;

    padding:24px 32px;

    color:var(--text-muted);

    text-align:center;

}

/* ===========================
   Glass panels
=========================== */

.panel{

    background:var(--surface);

    backdrop-filter:var(--blur);

    border-radius:var(--radius);

    border:1px solid var(--border);

    padding:24px;

    transition:var(--transition);

    min-height:240px;

}

.panel:hover{

    background:var(--surface-hover);

    transform:translateY(-3px);

}

/* ===========================
   Animations
=========================== */

@keyframes float{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-35px);

    }

}