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

:root{
    --bg:#0A0A0A;
    --fg:#FAFAFA;
    --muted:#8A8A8A;
    --accent:#F4B740;
}

html,
body{
    height:100%;
    background:var(--bg);
    color:var(--fg);
    font-family:'Inter', sans-serif;
    -webkit-font-smoothing:antialiased;
}

body{
    overflow-x:hidden;
}

a{
    color:inherit;
    text-decoration:none;
}

.page{
    min-height:100svh;

    display:flex;
    flex-direction:column;
    align-items:center;

    padding:56px 28px 40px;

    text-align:center;
}

.ava{
    width:88px;
    height:88px;

    border-radius:50%;

    background:#222 url('assets/portrait.jpg') center/cover no-repeat;

    margin-bottom:28px;

    box-shadow:0 0 0 1px rgba(255,255,255,.08);
}

.name{
    font-size:13px;
    font-weight:500;
    letter-spacing:.08em;

    color:var(--muted);

    text-transform:uppercase;

    margin-bottom:22px;
}

.name b{
    color:var(--fg);
}

h1{
    font-weight:700;

    font-size:clamp(38px, 9.5vw, 61px);

    line-height:.99;

    letter-spacing:-.033em;

    margin-bottom:36px;
}

h1 span{
    display:block;
}

.em{
    color:var(--accent);
}

.sub{
    font-size:16px;

    line-height:1.5;

    color:var(--muted);

    max-width:32ch;

    margin-bottom:40px;
}

.cta{
    display:inline-flex;

    align-items:center;
    justify-content:center;
    gap:12px;

    width:100%;
    max-width:400px;

    padding:22px 30px;

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

    border-radius:999px;

    font-size:17px;
    font-weight:600;

    transition:.2s;
}

.cta:hover{
    background:var(--accent);
}

.arrow{
    transition:transform .2s ease;
}

.cta:hover .arrow{
    transform:translateX(3px);
}

.alt{
    margin-top:18px;

    border:none;
    background:none;

    color:var(--muted);

    cursor:pointer;

    font-size:13px;
}

.alt:hover{
    color:var(--fg);
}

.backdrop{
    position:fixed;
    inset:0;

    background:rgba(0,0,0,.75);

    display:none;

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

    padding:20px;
}

.backdrop.show{
    display:flex;
}

.sheet{
    width:100%;
    max-width:420px;

    background:#141414;

    border-radius:22px;

    padding:28px;
}

.sheet h2{
    margin-bottom:10px;
}

.sub2{
    color:var(--muted);

    margin-bottom:24px;

    line-height:1.5;
}

.stores{
    display:flex;
    flex-direction:column;
    gap:12px;
}

.store{
    display:flex;

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

    padding:16px;

    border-radius:14px;

    background:#1D1D1D;

    transition:.2s;
}

.store:hover{
    background:#252525;
}

.close{
    width:100%;

    margin-top:18px;

    padding:14px;

    border:none;

    background:none;

    color:var(--muted);

    cursor:pointer;
}

.close:hover{
    color:var(--fg);
}