* {

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

:root {

    /* DARK PREMIUM COLORS */

    --bg:
        #060b16;

    --bg-soft:
        #0d1527;

    --card:
        rgba(255, 255, 255, 0.05);

    --card-border:
        rgba(255, 255, 255, 0.08);

    --text:
        #f5f7ff;

    --text-soft:
        #97a8c7;

    --blue:
        #2f5fb3;

    --blue-light:
        #5d92ff;

    --gold:
        #d6b15d;

    --gold-light:
        #f4d27f;

    --shadow:
        0 30px 80px rgba(0, 0, 0, 0.45);

    --radius-xl:
        38px;

    --radius-lg:
        24px;

    --transition:
        all .35s cubic-bezier(.4, 0, .2, 1);
}

html {

    scroll-behavior: smooth;
}

body {

    font-family: 'Inter', sans-serif;

    background:
        radial-gradient(circle at top left,
            rgba(47, 95, 179, 0.18),
            transparent 28%),

        radial-gradient(circle at bottom right,
            rgba(214, 177, 93, 0.14),
            transparent 25%),

        linear-gradient(180deg,
            #060b16 0%,
            #0b1220 100%);

    min-height: 100vh;

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

    padding: 24px;

    overflow-x: hidden;

    color: var(--text);

    position: relative;
}

/* GRID BACKGROUND */

body::before {

    content: "";

    position: fixed;

    inset: 0;

    background-image:
        linear-gradient(rgba(255, 255, 255, 0.025) 1px,
            transparent 1px),

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

    background-size: 42px 42px;

    mask-image:
        radial-gradient(circle at center,
            black 30%,
            transparent 85%);

    z-index: -2;
}

/* FLOAT LIGHT */

.light {

    position: fixed;

    width: 350px;
    height: 350px;

    border-radius: 50%;

    filter: blur(120px);

    opacity: .25;

    z-index: -1;
}

.light-1 {

    background:
        #2f5fb3;

    top: -120px;
    left: -120px;
}

.light-2 {

    background:
        #d6b15d;

    bottom: -120px;
    right: -120px;
}

/* APP */

.app {

    width: 100%;
    max-width: 470px;
}

.card {

    position: relative;

    overflow: hidden;

    padding:
        42px 26px;

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

    background:
        linear-gradient(145deg,
            rgba(255, 255, 255, 0.07),
            rgba(255, 255, 255, 0.03));

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

    backdrop-filter: blur(10px);

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

.card::before {

    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(180deg,
            rgba(255, 255, 255, 0.04),
            transparent);

    pointer-events: none;
}

/* HEADER */

.header {

    text-align: center;
}

.logo-wrapper {

    position: relative;

    width: fit-content;

    margin:
        auto auto 24px;
}

.logo-glow {

    position: absolute;

    inset: -18px;

    border-radius: 50%;

    background:
        radial-gradient(circle,
            rgba(47, 95, 179, 0.55),
            rgba(214, 177, 93, 0.18));

    filter:
        blur(24px);

    z-index: -1;
}

.logo {

    width: 120px;
    height: 120px;

    object-fit: cover;

    border-radius: 50%;

    background:
        white;

    padding: 8px;

    border:
        4px solid rgba(255, 255, 255, 0.08);

    box-shadow:
        0 20px 40px rgba(0, 0, 0, 0.35);

    transition:
        var(--transition);
}

.logo:hover {

    transform:
        scale(1.04);
}

.verified {

    position: absolute;

    right: 4px;
    bottom: 4px;

    width: 36px;
    height: 36px;

    border-radius: 50%;

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

    background: #029EEB;
    border:
        3px solid rgba(255, 255, 255, 0.1);

    color:
        white;

    font-size: .95rem;
}

h1 {

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

    line-height: 1.15;

    font-weight: 800;

    letter-spacing: -.5px;
}

.location {

    width: fit-content;

    margin:
        18px auto 22px;

    padding:
        10px 18px;

    border-radius:
        999px;

    display: flex;
    align-items: center;
    gap: 8px;

    background:
        rgba(255, 255, 255, 0.05);

    border:
        1px solid rgba(255, 255, 255, 0.06);

    color:
        var(--gold-light);

    font-size: .82rem;

    font-weight: 700;
}

.description {

    color:
        var(--text-soft);

    line-height: 1.8;

    font-size: .96rem;

    max-width: 380px;

    margin:
        auto;
}

/* SOCIALS */

.socials {

    margin-top: 38px;

    display: flex;
    flex-direction: column;

    gap: 16px;
}

.social-link {

    position: relative;

    overflow: hidden;

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

    padding:
        17px;

    text-decoration: none;

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

    background:
        rgba(255, 255, 255, 0.045);

    border:
        1px solid rgba(255, 255, 255, 0.06);

    transition:
        var(--transition);

    backdrop-filter: blur(6px);
}

.social-link:hover {

    transform:
        translateY(-4px);

    border-color:
        rgba(255, 255, 255, 0.14);

    background:
        rgba(255, 255, 255, 0.07);
}

.social-link::before {

    content: "";

    position: absolute;

    top: 0;
    left: -100%;

    width: 100%;
    height: 100%;

    background:
        linear-gradient(90deg,
            transparent,
            rgba(255, 255, 255, 0.06),
            transparent);

    transition:
        .7s ease;
}

.social-link:hover::before {

    left: 100%;
}

.social-left {

    display: flex;
    align-items: center;

    gap: 16px;
}

.icon-box {

    width: 58px;
    height: 58px;

    border-radius:
        18px;

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

    font-size: 1.35rem;

    color:
        white;

    box-shadow:
        0 10px 25px rgba(0, 0, 0, 0.28);

    flex-shrink: 0;
}

.facebook {

    background:
        linear-gradient(135deg,
            #2563eb,
            #3b82f6);
}

.instagram {

    background:
        linear-gradient(135deg,
            #7c3aed,
            #ec4899);
}

.tiktok {

    background:
        linear-gradient(135deg,
            #0f172a,
            #334155);
}

.youtube {

    background:
        linear-gradient(135deg,
            #dc2626,
            #ef4444);
}

.whatsapp {

    background:
        linear-gradient(135deg,
            #16a34a,
            #22c55e);
}

.website {

    background:
        linear-gradient(135deg,
            var(--blue),
            var(--blue-light));
}

.social-info h3 {

    font-size: 1rem;

    font-weight: 700;

    color:
        var(--text);
}

.social-info p {

    margin-top: 4px;

    font-size: .84rem;

    color:
        var(--text-soft);
}

.arrow {

    color:
        rgba(255, 255, 255, 0.35);

    font-size: 1.2rem;

    transition:
        var(--transition);
}

.social-link:hover .arrow {

    transform:
        translate(4px, -4px);

    color:
        white;
}

/* QR */

.qr-section {

    margin-top: 38px;

    padding-top: 34px;

    border-top:
        1px solid rgba(255, 255, 255, 0.06);

    text-align: center;
}

.qr-wrapper {

    position: relative;

    width: fit-content;

    margin:
        auto;
}

.qr-glow {

    position: absolute;

    inset: -20px;

    border-radius:
        30px;

    background:
        radial-gradient(circle,
            rgba(47, 95, 179, 0.35),
            rgba(214, 177, 93, 0.15));

    filter:
        blur(24px);

    z-index: -1;
}

.qr-box {

    background:
        white;

    padding:
        18px;

    border-radius:
        28px;

    box-shadow:
        0 20px 45px rgba(0, 0, 0, 0.4);

    animation:
        floating 5s ease-in-out infinite;
}

@keyframes floating {

    0% {
        transform:
            translateY(0px);
    }

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

    100% {
        transform:
            translateY(0px);
    }
}

.qr-title {

    margin-top: 22px;

    font-size: 1.05rem;

    font-weight: 700;
}

.qr-description {

    margin-top: 8px;

    color:
        var(--text-soft);

    font-size: .9rem;

    line-height: 1.7;
}

/* FOOTER */

.footer {

    margin-top: 30px;

    text-align: center;

    color:
        rgba(255, 255, 255, 0.35);

    font-size: .82rem;
}

/* RESPONSIVE */

@media(max-width:768px) {

    body {

        padding: 18px;
    }

    .card,
    .social-link {
        padding:
            34px 10px;
        backdrop-filter: none;
    }
}

@media(max-width:480px) {

    .logo {

        width: 105px;
        height: 105px;
    }

    h1 {

        font-size: 1.7rem;
    }

    .social-link {

        padding:
            15px;
    }

    .icon-box {

        width: 54px;
        height: 54px;

        font-size: 1.25rem;
    }
}