:root {

    --bg: #0b0b0c;

    --bg-soft: #14110f;

    --panel: rgba(255, 255, 255, .075);

    --panel-strong: rgba(255, 255, 255, .11);

    --border: rgba(231, 214, 189, .18);

    --border-strong: rgba(231, 214, 189, .34);

    --text: #fff7ed;

    --muted: rgba(255, 247, 237, .68);

    --muted-2: rgba(255, 247, 237, .48);

    --accent: #e7d6bd;

    --orange: #f97316;

    --orange-strong: #ff7a00;

    --shadow: 0 26px 90px rgba(0, 0, 0, .46);

    --shadow-soft: 0 18px 50px rgba(0, 0, 0, .32);

    --radius-xl: 30px;

    --radius-lg: 22px;

    --maxw: 720px;

}



* {

    box-sizing: border-box;

}



html {

    min-height: 100%;

    background: var(--bg);

}



body {

    margin: 0;

    min-height: 100vh;

    min-height: 100svh;

    color: var(--text);

    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

    background:

        radial-gradient(circle at 16% 4%, rgba(249, 115, 22, .18), transparent 27%),

        radial-gradient(circle at 86% 10%, rgba(231, 214, 189, .14), transparent 26%),

        radial-gradient(circle at 50% 88%, rgba(249, 115, 22, .10), transparent 30%),

        linear-gradient(145deg, #080809 0%, #11100f 46%, #1a120d 100%);

    padding: 24px 16px 34px;

    display: flex;

    justify-content: center;

    overflow-x: hidden;

}



body::before {

    content: "";

    position: fixed;

    inset: 0;

    pointer-events: none;

    background:

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

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

    background-size: 42px 42px;

    mask-image: linear-gradient(to bottom, rgba(0,0,0,.8), transparent 70%);

    opacity: .42;

}



body::after {

    content: "";

    position: fixed;

    inset: 0;

    pointer-events: none;

    background: radial-gradient(circle at center, transparent 0%, rgba(0,0,0,.42) 100%);

}



a {

    color: inherit;

}



.page {

    position: relative;

    z-index: 1;

    width: 100%;

    max-width: var(--maxw);

    display: flex;

    flex-direction: column;

    gap: 16px;

    margin: auto 0;

}



.hero {

    position: relative;

    overflow: hidden;

    text-align: center;

    padding: 26px 24px 24px;

    border-radius: var(--radius-xl);

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

    background:

        linear-gradient(145deg, rgba(255,255,255,.11), rgba(255,255,255,.045)),

        radial-gradient(circle at 20% 0%, rgba(249,115,22,.16), transparent 34%),

        radial-gradient(circle at 80% 15%, rgba(231,214,189,.13), transparent 30%);

    backdrop-filter: blur(16px);

    -webkit-backdrop-filter: blur(16px);

    box-shadow: var(--shadow);

}



.hero::before {

    content: "";

    position: absolute;

    inset: -2px;

    background:

        linear-gradient(110deg, transparent 0%, rgba(255,255,255,.16) 45%, transparent 58%);

    transform: translateX(-80%);

    opacity: .42;

    pointer-events: none;

    animation: shine 7s ease-in-out infinite;

}



@keyframes shine {

    0%, 72% {

        transform: translateX(-90%);

    }

    100% {

        transform: translateX(90%);

    }

}



.avatar {

    position: relative;

    z-index: 1;

    width: 104px;

    height: 104px;

    margin: 0 auto 17px;

    border-radius: 50%;

    display: grid;

    place-items: center;

    overflow: hidden;

    color: #11100f;

    font-size: 34px;

    font-weight: 950;

    letter-spacing: .035em;

    background:

        radial-gradient(circle at 32% 24%, #fff7ed 0%, #e7d6bd 38%, #f97316 100%);

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

    box-shadow:

        0 0 0 7px rgba(231,214,189,.08),

        0 16px 42px rgba(249,115,22,.25);

}



.avatar img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;

}



.eyebrow {

    position: relative;

    z-index: 1;

    margin: 0 0 8px;

    color: var(--accent);

    font-size: 12px;

    font-weight: 850;

    letter-spacing: .18em;

    text-transform: uppercase;

}



h1 {

    position: relative;

    z-index: 1;

    margin: 0;

    font-size: clamp(31px, 6vw, 48px);

    line-height: .98;

    letter-spacing: -.055em;

}



.tagline {

    position: relative;

    z-index: 1;

    margin: 12px auto 0;

    max-width: 520px;

    color: var(--muted);

    font-size: 15px;

    line-height: 1.55;

}



.socials {

    position: relative;

    z-index: 1;

    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap: 10px;

    margin-top: 18px;

}



.chip {

    min-height: 39px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 0 15px;

    border-radius: 999px;

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

    background: rgba(255,255,255,.065);

    color: var(--text);

    text-decoration: none;

    font-size: 14px;

    font-weight: 800;

    transition:

        transform .18s ease,

        background .18s ease,

        border-color .18s ease,

        box-shadow .18s ease;

}



.chip:hover,

.chip:focus-visible {

    transform: translateY(-2px);

    background: rgba(249,115,22,.14);

    border-color: rgba(249,115,22,.45);

    box-shadow: 0 12px 28px rgba(249,115,22,.16);

}



.links {

    display: grid;

    gap: 12px;

}



.link-card {

    position: relative;

    display: flex;

    align-items: center;

    gap: 14px;

    width: 100%;

    min-height: 82px;

    text-decoration: none;

    color: var(--text);

    background:

        linear-gradient(145deg, rgba(255,255,255,.10), rgba(255,255,255,.045));

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

    border-radius: var(--radius-lg);

    padding: 16px 18px;

    backdrop-filter: blur(14px);

    -webkit-backdrop-filter: blur(14px);

    box-shadow: var(--shadow-soft);

    overflow: hidden;

    transition:

        transform .18s ease,

        background .18s ease,

        border-color .18s ease,

        box-shadow .18s ease,

        filter .18s ease;

}



.link-card::before {

    content: "";

    position: absolute;

    inset: 0;

    background:

        radial-gradient(circle at 18% 10%, rgba(249,115,22,.16), transparent 34%),

        linear-gradient(90deg, rgba(255,255,255,.07), transparent 46%);

    opacity: 0;

    transition: opacity .18s ease;

    pointer-events: none;

}



.link-card:hover,

.link-card:focus-visible {

    transform: translateY(-3px);

    background:

        linear-gradient(145deg, rgba(255,255,255,.14), rgba(255,255,255,.065));

    border-color: rgba(231,214,189,.42);

    box-shadow:

        0 22px 60px rgba(0,0,0,.42),

        0 0 0 4px rgba(231,214,189,.055);

}



.link-card:hover::before,

.link-card:focus-visible::before {

    opacity: 1;

}



.link-card:active {

    transform: translateY(-1px) scale(.992);

}



.link-card--primary {

    border-color: rgba(249,115,22,.52);

    background:

        linear-gradient(145deg, rgba(249,115,22,.20), rgba(255,255,255,.07)),

        radial-gradient(circle at 20% 0%, rgba(249,115,22,.24), transparent 38%);

    box-shadow:

        0 24px 70px rgba(0,0,0,.42),

        0 0 34px rgba(249,115,22,.13);

}



.link-card--primary .icon {

    background:

        radial-gradient(circle at 30% 20%, #fff7ed 0%, #e7d6bd 34%, #f97316 100%);

    color: #11100f;

    box-shadow: 0 10px 24px rgba(249,115,22,.25);

}



.icon {

    position: relative;

    z-index: 1;

    flex: 0 0 50px;

    width: 50px;

    height: 50px;

    border-radius: 16px;

    display: grid;

    place-items: center;

    font-size: 22px;

    background:

        linear-gradient(145deg, rgba(231,214,189,.18), rgba(249,115,22,.12));

    border: 1px solid rgba(231,214,189,.14);

}



.link-content {

    position: relative;

    z-index: 1;

    flex: 1;

    min-width: 0;

}



.link-title {

    display: block;

    font-size: 17px;

    font-weight: 900;

    line-height: 1.18;

    letter-spacing: -.01em;

}



.link-desc {

    display: block;

    margin-top: 4px;

    font-size: 14px;

    line-height: 1.42;

    color: var(--muted);

}



.arrow {

    position: relative;

    z-index: 1;

    flex: 0 0 auto;

    font-size: 27px;

    line-height: 1;

    color: var(--accent);

    transform: translateX(0);

    transition: transform .18s ease, color .18s ease;

}



.link-card:hover .arrow,

.link-card:focus-visible .arrow {

    transform: translateX(3px);

    color: #fff7ed;

}



.extra-section {

    display: grid;

    gap: 12px;

}



.extra-divider {

    height: 1px;

    width: 100%;

    background: linear-gradient(

        90deg,

        transparent,

        rgba(231,214,189,.42),

        transparent

    );

    margin: 4px 0 0;

}



.extra-title {

    text-align: center;

    color: var(--accent);

    font-size: 12px;

    font-weight: 850;

    letter-spacing: .18em;

    text-transform: uppercase;

    margin: 2px 0;

}



.footer {

    text-align: center;

    color: var(--muted-2);

    font-size: 13px;

    padding: 4px 8px 0;

}



.footer a {

    color: var(--accent);

    text-decoration: none;

    font-weight: 850;

}



.footer a:hover,

.footer a:focus-visible {

    color: #fff7ed;

}



@media (prefers-reduced-motion: no-preference) {

    .reveal-card,

    .link-card,

    .footer {

        animation: riseIn .55s ease both;

    }



    .link-card:nth-child(1) { animation-delay: .04s; }

    .link-card:nth-child(2) { animation-delay: .08s; }

    .link-card:nth-child(3) { animation-delay: .12s; }

    .link-card:nth-child(4) { animation-delay: .16s; }

    .link-card:nth-child(5) { animation-delay: .20s; }

    .link-card:nth-child(6) { animation-delay: .24s; }

    .link-card:nth-child(7) { animation-delay: .28s; }



    @keyframes riseIn {

        from {

            opacity: 0;

            transform: translateY(16px);

        }

        to {

            opacity: 1;

            transform: translateY(0);

        }

    }

}



@media (max-width: 640px) {

    body {

        padding: 12px 11px 22px;

    }



    .page {

        gap: 13px;

    }



    .hero {

        padding: 21px 16px 19px;

        border-radius: 25px;

    }



    .avatar {

        width: 92px;

        height: 92px;

        font-size: 30px;

        margin-bottom: 15px;

    }



    h1 {

        font-size: clamp(29px, 10vw, 38px);

    }



    .tagline {

        font-size: 14px;

        margin-top: 10px;

    }



    .socials {

        margin-top: 15px;

        gap: 8px;

    }



    .chip {

        min-height: 37px;

        padding: 0 13px;

        font-size: 13px;

    }



    .links {

        gap: 10px;

    }



    .link-card {

        min-height: 76px;

        padding: 13px 13px;

        border-radius: 19px;

        gap: 12px;

    }



    .icon {

        flex-basis: 45px;

        width: 45px;

        height: 45px;

        border-radius: 14px;

        font-size: 20px;

    }



    .link-title {

        font-size: 16px;

    }



    .link-desc {

        font-size: 13px;

    }



    .arrow {

        font-size: 24px;

    }

}



@media (max-width: 390px) {

    body {

        padding-left: 9px;

        padding-right: 9px;

    }



    .link-card {

        gap: 10px;

    }



    .icon {

        flex-basis: 42px;

        width: 42px;

        height: 42px;

    }



    .link-desc {

        font-size: 12.5px;

    }

}