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

:root {
    --bg: #050505;
    --bg-soft: #0d0d0f;
    --panel: rgba(8, 8, 10, 0.88);
    --panel-line: rgba(255, 52, 132, 0.8);
    --pink: #ff2d7a;
    --pink-soft: #ff5da0;
    --pink-glow: rgba(255, 45, 122, 0.28);
    --text: #ffffff;
    --muted: #d5d0d8;
    --muted-soft: rgba(255, 255, 255, 0.68);
    --card-width: min(100%, 560px);
    --radius-xl: 32px;
    --radius-lg: 26px;
    --radius-md: 20px;
    --shadow: 0 28px 80px rgba(0, 0, 0, 0.58);
}

html {
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;
    font-family: "Montserrat", Arial, sans-serif;
    color: var(--text);
    background:
        radial-gradient(circle at 50% 0%, rgba(255, 45, 122, 0.26), transparent 28%),
        radial-gradient(circle at 0% 30%, rgba(255, 45, 122, 0.1), transparent 25%),
        linear-gradient(180deg, #15040d 0%, var(--bg) 26%, #020202 100%);
}

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

img,
svg {
    display: block;
}

button,
input,
textarea,
select {
    font: inherit;
}

.digital-card {
    width: var(--card-width);
    min-height: 100vh;
    margin: 0 auto;
    background:
        linear-gradient(180deg, rgba(0, 0, 0, 0.02), rgba(0, 0, 0, 0.6)),
        var(--bg);
    overflow: hidden;
    position: relative;
}

.digital-card::before,
.digital-card::after {
    content: "";
    position: absolute;
    inset: auto;
    pointer-events: none;
}

.digital-card::before {
    top: 32px;
    right: -80px;
    width: 220px;
    height: 220px;
    background: radial-gradient(circle, rgba(255, 45, 122, 0.22), transparent 70%);
    filter: blur(10px);
}

.digital-card::after {
    left: -90px;
    bottom: 220px;
    width: 240px;
    height: 240px;
    background: radial-gradient(circle, rgba(255, 45, 122, 0.18), transparent 70%);
    filter: blur(18px);
}

.poster {
    position: relative;
    padding-bottom: 32px;
}

.music-smoke {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
}

.music-smoke__cloud {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 45, 122, 0.3) 0%, rgba(255, 45, 122, 0.16) 34%, rgba(255, 45, 122, 0.07) 58%, transparent 76%);
    filter: blur(24px);
    opacity: 0.62;
    mix-blend-mode: screen;
    animation: smokeDrift 16s ease-in-out infinite;
    will-change: transform, opacity;
}

.music-smoke__cloud--1 {
    top: 24%;
    left: -6%;
    width: 240px;
    height: 220px;
    animation-delay: 0s;
}

.music-smoke__cloud--2 {
    top: 39%;
    right: -8%;
    width: 260px;
    height: 240px;
    animation-delay: -4s;
}

.music-smoke__cloud--3 {
    top: 63%;
    left: -4%;
    width: 220px;
    height: 200px;
    animation-delay: -8s;
}

.music-smoke__cloud--4 {
    top: 80%;
    right: -5%;
    width: 250px;
    height: 210px;
    animation-delay: -12s;
}

.music-notes {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 3;
}

.music-notes__note {
    position: absolute;
    font-family: "Oswald", sans-serif;
    font-size: clamp(2.8rem, 5.4vw, 4.8rem);
    line-height: 1;
    color: rgba(255, 93, 160, 0.22);
    text-shadow:
        0 0 10px rgba(255, 45, 122, 0.32),
        0 0 26px rgba(255, 45, 122, 0.2);
    opacity: 0.38;
    animation: noteFloat 11s ease-in-out infinite;
    will-change: transform, opacity;
}

.music-notes__note--1 {
    top: 31%;
    left: 7%;
    animation-delay: 0s;
}

.music-notes__note--2 {
    top: 35%;
    right: 7%;
    font-size: clamp(2.8rem, 5vw, 4.6rem);
    animation-delay: -2.5s;
}

.music-notes__note--3 {
    top: 57%;
    left: 6%;
    animation-delay: -5s;
}

.music-notes__note--4 {
    top: 63%;
    right: 6%;
    font-size: clamp(2rem, 3.8vw, 3.3rem);
    animation-delay: -7.5s;
}

.music-notes__note--5 {
    top: 82%;
    left: 8%;
    animation-delay: -3.5s;
}

.music-notes__note--6 {
    top: 88%;
    right: 8%;
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    animation-delay: -9s;
}

.music-notes__note--7 {
    top: 28%;
    left: 30%;
    font-size: clamp(1.8rem, 3vw, 2.9rem);
    animation-delay: -1.25s;
}

.music-notes__note--8 {
    top: 45%;
    right: 24%;
    font-size: clamp(1.7rem, 2.8vw, 2.7rem);
    animation-delay: -6.25s;
}

.music-notes__note--9 {
    top: 56%;
    left: 28%;
    font-size: clamp(1.6rem, 2.7vw, 2.5rem);
    animation-delay: -8.25s;
}

.music-notes__note--10 {
    top: 70%;
    right: 20%;
    font-size: clamp(1.8rem, 2.9vw, 2.8rem);
    animation-delay: -4.75s;
}

.music-notes__note--11 {
    top: 79%;
    left: 32%;
    font-size: clamp(1.5rem, 2.6vw, 2.3rem);
    animation-delay: -10.5s;
}

.music-notes__note--12 {
    top: 91%;
    right: 29%;
    font-size: clamp(1.7rem, 2.8vw, 2.6rem);
    animation-delay: -13s;
}

.poster__hero,
.poster__links,
.contact-panel,
.poster__footer {
    position: relative;
    z-index: 2;
}

@keyframes noteFloat {
    0% {
        transform: translate3d(0, 18px, 0) rotate(0deg) scale(0.94);
        opacity: 0;
    }

    15% {
        opacity: 0.55;
    }

    50% {
        transform: translate3d(10px, -18px, 0) rotate(6deg) scale(1.04);
        opacity: 0.2;
    }

    85% {
        opacity: 0.5;
    }

    100% {
        transform: translate3d(-8px, -58px, 0) rotate(-4deg) scale(0.96);
        opacity: 0;
    }
}

@keyframes smokeDrift {
    0% {
        transform: translate3d(0, 0, 0) scale(0.92);
        opacity: 0.22;
    }

    25% {
        transform: translate3d(18px, -12px, 0) scale(1.02);
        opacity: 0.48;
    }

    50% {
        transform: translate3d(-12px, -26px, 0) scale(1.08);
        opacity: 0.3;
    }

    75% {
        transform: translate3d(14px, -8px, 0) scale(1);
        opacity: 0.5;
    }

    100% {
        transform: translate3d(0, 0, 0) scale(0.92);
        opacity: 0.22;
    }
}

@keyframes presskitFramePulse {
    0%,
    100% {
        border-color: rgba(255, 60, 136, 0.72);
        box-shadow:
            inset 0 0 0 1px rgba(255, 255, 255, 0.04),
            0 0 0 1px rgba(255, 45, 122, 0.12),
            0 18px 34px rgba(0, 0, 0, 0.38),
            0 0 24px rgba(255, 45, 122, 0.2);
    }

    50% {
        border-color: rgba(255, 165, 204, 0.96);
        box-shadow:
            inset 0 0 0 1px rgba(255, 255, 255, 0.06),
            0 0 0 1px rgba(255, 165, 204, 0.24),
            0 20px 36px rgba(0, 0, 0, 0.42),
            0 0 36px rgba(255, 93, 160, 0.34);
    }
}
.poster__hero {
    min-height: auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 0 0 20px;
    position: relative;
    background: #020202;
}

.poster__cover {
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: center top;
}

.poster__copy {
    padding: 18px 20px 0;
    text-align: center;
}

.poster__eyebrow {
    font-size: 0.9rem;
    line-height: 1.7;
    color: var(--muted);
    letter-spacing: 0.04rem;
    text-transform: none;
}

.poster__title {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.poster__genres {
    margin-top: 10px;
    font-size: clamp(0.92rem, 2.6vw, 1.04rem);
    line-height: 1.6;
    color: var(--pink-soft);
    letter-spacing: 0.06rem;
}

.poster__links-intro {
    margin: 4px 48px 12px;
    padding: 10px 16px;
    text-align: center;
    font-family: "Oswald", sans-serif;
    font-size: clamp(0.84rem, 2.5vw, 1rem);
    line-height: 1.35;
    letter-spacing: 0.12rem;
    text-transform: uppercase;
    color: rgba(255, 239, 245, 0.88);
    border: 1px solid rgba(255, 70, 148, 0.24);
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(255, 45, 122, 0.06), rgba(255, 255, 255, 0.02), rgba(255, 45, 122, 0.06));
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
}

.poster__links-intro span {
    color: var(--pink-soft);
}

.poster__links {
    margin-top: -8px;
    padding: 0 48px;
    display: grid;
    gap: 10px;
}

.social-card {
    display: grid;
    grid-template-columns: 50px minmax(0, 1fr) 20px;
    align-items: center;
    gap: 12px;
    min-height: 66px;
    padding: 10px 14px;
    border: 1.5px solid rgba(255, 60, 136, 0.72);
    border-radius: 19px;
    background:
        linear-gradient(90deg, rgba(0, 0, 0, 0.88), rgba(10, 7, 11, 0.78)),
        var(--panel);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.04),
        0 0 0 1px rgba(255, 45, 122, 0.08),
        0 12px 28px rgba(0, 0, 0, 0.32);
    position: relative;
    overflow: hidden;
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.social-card--presskit {
    border-color: rgba(255, 60, 136, 0.72);
    background: transparent;
    isolation: isolate;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.04),
        0 0 0 1px rgba(255, 45, 122, 0.12),
        0 18px 34px rgba(0, 0, 0, 0.38),
        0 0 28px rgba(255, 45, 122, 0.22);
    animation: presskitFramePulse 3.2s ease-in-out infinite;
}

.social-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 72% 50%, rgba(255, 45, 122, 0.18), transparent 24%),
        radial-gradient(circle at 86% 30%, rgba(255, 255, 255, 0.06), transparent 12%);
    opacity: 0.85;
}

.social-card--presskit::before {
    inset: 2px;
    border-radius: 17px;
    background:
        radial-gradient(circle at 18% 50%, rgba(255, 196, 220, 0.14), transparent 24%),
        radial-gradient(circle at 82% 36%, rgba(255, 45, 122, 0.24), transparent 28%),
        linear-gradient(90deg, rgba(0, 0, 0, 0.97), rgba(18, 9, 16, 0.92));
    opacity: 1;
}

.social-card--presskit::after {
    content: none;
}

.social-card--presskit .social-card__icon,
.social-card--presskit .social-card__arrow {
    color: #ffd7e8;
}

.social-card--presskit .social-card__body strong {
    color: #fff6fb;
}

.social-card--presskit .social-card__body small {
    color: rgba(255, 231, 241, 0.84);
}

.social-card:hover,
.social-card:focus-visible {
    transform: translateY(-3px) scale(1.01);
    border-color: var(--pink-soft);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.04),
        0 0 22px var(--pink-glow),
        0 18px 34px rgba(0, 0, 0, 0.42);
}

.social-card--presskit:hover,
.social-card--presskit:focus-visible {
    border-color: var(--pink-soft);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.04),
        0 0 40px rgba(255, 93, 160, 0.4),
        0 22px 38px rgba(0, 0, 0, 0.46);
}

.social-card:focus-visible {
    outline: 2px solid rgba(255, 93, 160, 0.7);
    outline-offset: 3px;
}

.social-card--disabled {
    opacity: 0.72;
    cursor: default;
}

.social-card--disabled:hover {
    transform: none;
    border-color: rgba(255, 60, 136, 0.72);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.04),
        0 0 0 1px rgba(255, 45, 122, 0.08),
        0 12px 28px rgba(0, 0, 0, 0.32);
}

.social-card__icon,
.social-card__body,
.social-card__arrow {
    position: relative;
    z-index: 1;
}

.social-card__icon {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    color: var(--pink);
    border-right: 1px solid rgba(255, 66, 142, 0.4);
    padding-right: 10px;
}

.social-card__icon svg,
.social-card__arrow svg,
.contact-item__icon svg {
    width: 22px;
    height: 22px;
    fill: currentColor;
}

.social-card__body {
    display: grid;
    gap: 2px;
    text-transform: uppercase;
}

.social-card__body strong {
    font-size: clamp(0.92rem, 3vw, 1.18rem);
    letter-spacing: 0.08rem;
    font-weight: 600;
}

.social-card__body small {
    color: var(--muted-soft);
    font-size: 0.66rem;
    letter-spacing: 0.03rem;
}

.social-card__arrow {
    display: grid;
    place-items: center;
    color: var(--pink);
}

.social-card__arrow svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.contact-panel {
    margin: 14px 48px 0;
    padding: 14px 14px 16px;
    border-radius: 19px;
    border: 1.5px solid rgba(255, 60, 136, 0.72);
    background:
        linear-gradient(180deg, rgba(0, 0, 0, 0.94), rgba(10, 8, 12, 0.88));
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.contact-panel__header {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
}

.contact-panel__header span {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 45, 122, 0.7), transparent);
}

.contact-panel__header p {
    font-family: "Oswald", sans-serif;
    color: var(--pink);
    font-size: 1rem;
    letter-spacing: 0.14rem;
    text-transform: uppercase;
}

.contact-panel__items {
    display: grid;
    gap: 12px;
    justify-items: center;
}

.contact-item {
    display: block;
    justify-content: center;
    width: fit-content;
    font-size: clamp(0.96rem, 2.8vw, 1.05rem);
    font-weight: 500;
    letter-spacing: 0.05rem;
    color: var(--text);
    word-break: break-word;
    text-align: center;
}

.contact-item:first-child {
    font-size: clamp(1.04rem, 3vw, 1.18rem);
    font-weight: 800;
}

.contact-item--phone {
    color: var(--text);
}

.contact-item--tag {
    margin-top: 1px;
    font-family: "Oswald", sans-serif;
    font-size: clamp(1.52rem, 4.1vw, 1.72rem);
    font-weight: 700;
    letter-spacing: 0.22rem;
    text-transform: uppercase;
    line-height: 1;
}

.contact-hashtag__primary {
    color: #ffffff;
}

.contact-hashtag__accent {
    color: var(--pink);
}

.poster__footer {
    padding: 18px 20px 0;
    text-align: center;
}

.poster__footer p {
    font-family: "Oswald", sans-serif;
    color: var(--pink);
    font-size: 1.15rem;
    letter-spacing: 0.12rem;
    text-transform: uppercase;
}

.poster__mini-social {
    margin-top: 10px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px 18px;
}

.poster__mini-social a {
    color: var(--muted);
    font-size: 0.83rem;
    letter-spacing: 0.12rem;
    text-transform: uppercase;
}

@media (min-width: 640px) {
    body {
        padding: 24px;
    }

    .digital-card {
        min-height: auto;
        border-radius: var(--radius-xl);
        box-shadow: var(--shadow);
    }

    .poster__hero {
        padding-bottom: 24px;
    }

    .poster__links,
    .contact-panel,
    .poster__footer {
        margin-left: 34px;
        margin-right: 34px;
    }
}

@media (min-width: 900px) {
    .digital-card {
        width: min(100%, 1120px);
    }

    .poster {
        max-width: 860px;
        margin: 0 auto;
        min-height: auto;
    }

    .poster__hero {
        min-height: auto;
        height: auto;
        max-width: 780px;
        margin: 0 auto;
        padding-bottom: 32px;
        border-right: 0;
    }

    .poster__cover {
        width: min(100%, 780px);
        margin: 0 auto;
        max-height: none;
    }

    .poster__copy {
        max-width: 760px;
        margin: 0 auto;
        padding-left: 32px;
        padding-right: 32px;
    }

    .poster__links {
        max-width: 760px;
        margin: 22px auto 0;
        padding: 0 48px;
        align-self: start;
    }

    .contact-panel {
        max-width: 760px;
        margin: 18px auto 0;
    }

    .poster__footer {
        max-width: 760px;
        margin: 0 auto;
        padding: 18px 32px 28px;
    }
}

@media (max-width: 380px) {
    .poster__hero {
        padding-bottom: 18px;
    }

    .poster__links,
    .contact-panel,
    .poster__footer {
        margin-left: 12px;
        margin-right: 12px;
        padding-left: 0;
        padding-right: 0;
    }

    .social-card {
        grid-template-columns: 42px minmax(0, 1fr) 18px;
        gap: 8px;
        min-height: 62px;
        padding: 9px 12px;
        border-radius: 16px;
    }

    .social-card__icon {
        width: 34px;
        height: 34px;
        padding-right: 8px;
    }

    .social-card__icon svg,
    .contact-item__icon svg {
        width: 20px;
        height: 20px;
    }

    .contact-panel {
        margin-left: 20px;
        margin-right: 20px;
        padding: 13px 12px 14px;
    }

    .contact-item {
        letter-spacing: 0.04rem;
    }

    .poster__links {
        padding-left: 20px;
        padding-right: 20px;
    }
}

@media (max-width: 560px) {
    body {
        overflow-x: hidden;
    }

    .digital-card {
        min-height: auto;
    }

    .poster {
        padding-bottom: 14px;
    }

    .poster__cover {
        max-height: 218px;
        object-fit: contain;
    }

    .music-smoke__cloud {
        filter: blur(18px);
        opacity: 0.56;
    }

    .music-smoke__cloud--1,
    .music-smoke__cloud--3 {
        left: -14%;
        width: 180px;
        height: 160px;
    }

    .music-smoke__cloud--2,
    .music-smoke__cloud--4 {
        right: -14%;
        width: 190px;
        height: 170px;
    }

    .music-smoke__cloud--1 {
        top: 28%;
    }

    .music-smoke__cloud--2 {
        top: 45%;
    }

    .music-smoke__cloud--3 {
        top: 68%;
    }

    .music-smoke__cloud--4 {
        top: 84%;
    }

    .music-notes__note {
        font-size: 2.2rem;
        color: rgba(255, 93, 160, 0.28);
        text-shadow:
            0 0 12px rgba(255, 45, 122, 0.28),
            0 0 26px rgba(255, 45, 122, 0.18);
    }

    .music-notes__note--1,
    .music-notes__note--3,
    .music-notes__note--5 {
        left: 4%;
    }

    .music-notes__note--2,
    .music-notes__note--4,
    .music-notes__note--6 {
        right: 4%;
    }

    .music-notes__note--1 {
        top: 29%;
    }

    .music-notes__note--2 {
        top: 37%;
    }

    .music-notes__note--3 {
        top: 53%;
    }

    .music-notes__note--4 {
        top: 64%;
    }

    .music-notes__note--5 {
        top: 76%;
    }

    .music-notes__note--6 {
        top: 87%;
    }


        .music-notes__note--7 {
            top: 34%;
            left: 18%;
        }

        .music-notes__note--8 {
            top: 47%;
            right: 17%;
        }

        .music-notes__note--9 {
            top: 58%;
            left: 17%;
        }

        .music-notes__note--10 {
            top: 72%;
            right: 16%;
        }

        .music-notes__note--11 {
            top: 81%;
            left: 20%;
        }

        .music-notes__note--12 {
            top: 92%;
            right: 20%;
        }

        .poster__copy {
            padding: 8px 14px 0;
        }

        .poster__eyebrow {
            font-size: 0.72rem;
            line-height: 1.35;
        }

        .poster__genres {
            margin-top: 4px;
            font-size: 0.68rem;
            line-height: 1.25;
            letter-spacing: 0.02rem;
        }

        .poster__links {
            grid-template-columns: 1fr;
            padding: 0 26px;
            gap: 7px;
            margin-top: 6px;
        }

        .poster__links-intro {
            margin: 6px 26px 8px;
            padding: 8px 12px;
            font-size: 0.64rem;
            line-height: 1.3;
            letter-spacing: 0.08rem;
        }

        .social-card {
            grid-template-columns: 32px minmax(0, 1fr) 12px;
            gap: 6px;
            min-height: 49px;
            padding: 7px 9px;
            border-radius: 14px;
        }

        .social-card__icon {
            width: 28px;
            height: 28px;
            padding-right: 6px;
            border-radius: 10px;
        }

        .social-card__icon svg,
        .contact-item__icon svg {
            width: 16px;
            height: 16px;
        }

        .social-card__arrow svg {
            width: 14px;
            height: 14px;
        }

        .social-card__body strong {
            font-size: 0.64rem;
            letter-spacing: 0.04rem;
        }

        .social-card__body small {
            font-size: 0.48rem;
            line-height: 1.2;
            letter-spacing: 0.01rem;
        }

        .contact-panel {
            margin: 8px 26px 0;
            padding: 9px 10px 10px;
            border-radius: 14px;
        }

        .contact-panel__header {
            margin-bottom: 6px;
            gap: 8px;
        }

        .contact-panel__header p {
            font-size: 0.72rem;
            letter-spacing: 0.08rem;
        }

        .contact-panel__items {
            gap: 4px;
        }

        .contact-item {
            grid-template-columns: 16px minmax(0, 1fr);
            gap: 5px;
            font-size: 0.62rem;
            letter-spacing: 0.02rem;
            line-height: 1.2;
        }

        .contact-item--tag {
            font-size: 0.96rem;
            letter-spacing: 0.14rem;
            line-height: 1;
        }

        .poster__footer {
            display: none;
        }
    }

@media (prefers-reduced-motion: reduce) {
        .music-smoke__cloud,
    .music-notes__note {
        animation: none;
        opacity: 0.18;
    }

    .social-card {
        transition: none;
    }
}