:root{

    --bg:#fafafa;
    --text:#111;
    --muted:#6b7280;

}

@media (prefers-color-scheme:dark){

    :root{

        --bg:#0b0b0c;
        --text:#f4f4f5;
        --muted:#9ca3af;

    }

}

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

html,body{
    height:100%;
}

body{

    font-family:"Manrope",system-ui,sans-serif;

    background:var(--bg);
    color:var(--text);

    display:flex;
    align-items:center;
    justify-content:center;

    padding:24px;

    overflow:hidden;

}

/* subtle grain texture */

.grain{

    position:fixed;
    inset:0;
    pointer-events:none;

    background-image:url("https://grainy-gradients.vercel.app/noise.svg");

    opacity:.08;

}

/* layout */

.container{

    text-align:center;
    max-width:520px;

    animation:fadeUp 1s ease;

}

/* logo */

.logo{

    margin-bottom:34px;

    opacity:.9;

    animation:logoFloat 6s ease-in-out infinite;

}

/* headline */

.title{

    font-family:"DM Serif Display",serif;

    font-size:clamp(2.4rem,4vw,3rem);

    margin-bottom:18px;

    letter-spacing:-0.02em;

}

/* quote */

.quote{

    font-size:1rem;

    line-height:1.7;

    color:var(--muted);

    transition:opacity .6s ease;

}

/* page entrance */

@keyframes fadeUp{

    from{

        opacity:0;
        transform:translateY(12px);

    }

    to{

        opacity:1;
        transform:translateY(0);

    }

}

/* subtle floating logo */

@keyframes logoFloat{

    0%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-4px);
    }

    100%{
        transform:translateY(0);
    }

}