/* ================================
   VARIABLES
================================ */

:root {

    --background: #fff9fc;

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

    --text: #29232a;

    --soft-text: #887680;

    --pink: #e95f98;

    --pink-light: #ffc4da;

    --pink-soft: #ffe5ef;

    --border: rgba(
        234,
        128,
        166,
        0.22
    );

    --shadow: rgba(
        214,
        103,
        148,
        0.14
    );

}


/* ================================
   DARK MODE
================================ */

body.dark-mode {

    --background: #181318;

    --card: rgba(
        38,
        28,
        37,
        0.94
    );

    --text: #fff3f8;

    --soft-text: #b9a5b0;

    --pink: #ff82b5;

    --pink-light: #7d3f5d;

    --pink-soft: #422536;

    --border: rgba(
        255,
        139,
        184,
        0.25
    );

    --shadow: rgba(
        0,
        0,
        0,
        0.35
    );

}


/* ================================
   RESET
================================ */

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}


html {

    scroll-behavior: smooth;

}


body {

    min-height: 100vh;

    overflow-x: hidden;

    font-family:
        "DM Sans",
        sans-serif;

    color: var(--text);

    background:
        var(--background);

    transition:

        background
        0.6s
        ease,

        color
        0.6s
        ease;

}


/* ================================
   BACKGROUND TEXTURE
================================ */

body::before {

    content: "";

    position: fixed;

    inset: 0;

    z-index: -5;

    pointer-events: none;

    opacity: 0.3;

    background-image:

        radial-gradient(

            rgba(
                232,
                95,
                152,
                0.2
            )

            0.7px,

            transparent

            0.7px

        );

    background-size: 24px 24px;

}


/* ================================
   BACKGROUND GLOWS
================================ */

.background-effects {

    position: fixed;

    inset: 0;

    z-index: -4;

    overflow: hidden;

    pointer-events: none;

}


.glow {

    position: absolute;

    width: 450px;

    height: 450px;

    border-radius: 50%;

    filter: blur(100px);

    opacity: 0.25;

    animation:

        floatingGlow

        12s

        ease-in-out

        infinite

        alternate;

}


.glow-one {

    top: -180px;

    left: -150px;

    background: #ff9fc5;

}


.glow-two {

    top: 35%;

    right: -180px;

    background: #ffc8dd;

    animation-delay: -4s;

}


.glow-three {

    bottom: -250px;

    left: 35%;

    background: #ffb1d0;

    animation-delay: -7s;

}


@keyframes floatingGlow {

    from {

        transform:

            translate(
                0,
                0
            )

            scale(1);

    }

    to {

        transform:

            translate(
                40px,
                -30px
            )

            scale(1.2);

    }

}


/* ================================
   OWNER LINKS
================================ */

.owner-mark {

    position: fixed;

    top: 26px;

    right: 30px;

    z-index: 9999;

    display: flex;

    flex-direction: column;

    align-items: flex-end;

    gap: 6px;

    user-select: none;

}


.owner-label {

    margin-bottom: 3px;

    color: var(--pink);

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 2px;

}


.owner-link {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    padding:

        5px

        9px;

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

    border-radius: 999px;

    color: var(--text);

    background: var(--card);

    font-size: 10px;

    font-weight: 600;

    text-decoration: none;

    backdrop-filter: blur(12px);

    box-shadow:

        0 5px 18px var(--shadow);

    transition:

        transform
        0.3s
        ease,

        color
        0.3s
        ease,

        border-color
        0.3s
        ease,

        background
        0.3s
        ease,

        box-shadow
        0.3s
        ease;

}


.owner-link svg {

    width: 12px;

    height: 12px;

    color: var(--pink);

    stroke-width: 2;

}


.owner-link:hover {

    transform:

        translateX(-5px);

    color: var(--pink);

    border-color:

        var(--pink);

    background:

        var(--pink-soft);

}


/* ================================
   CONTROLS
================================ */

.control-panel {

    position: fixed;

    top: 28px;

    left: 30px;

    z-index: 9999;

    display: flex;

    gap: 10px;

}


.control-button {

    width: 42px;

    height: 42px;

    display: flex;

    align-items: center;

    justify-content: center;

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

    border-radius: 50%;

    color: var(--text);

    background: var(--card);

    cursor: pointer;

    backdrop-filter: blur(15px);

    box-shadow:

        0 10px 25px var(--shadow);

    transition:

        transform
        0.3s
        ease,

        color
        0.3s
        ease,

        background
        0.3s
        ease;

}


.control-button:hover {

    transform:

        translateY(-4px)

        rotate(8deg);

    color: var(--pink);

}


.control-button svg {

    width: 18px;

    height: 18px;

    stroke-width: 2;

}


.music-button.playing {

    color: var(--pink);

    animation:

        musicPulse

        1.5s

        ease-in-out

        infinite;

}


@keyframes musicPulse {

    50% {

        box-shadow:

            0 0 25px

            rgba(

                255,

                120,

                170,

                0.35

            );

    }

}


/* ================================
   MAIN WRAPPER
================================ */

.page-wrapper {

    position: relative;

    z-index: 1;

    width:

        min(

            1180px,

            100%

        );

    min-height: 100vh;

    margin: auto;

    padding:

        115px

        32px

        40px;

    display: flex;

    flex-direction: column;

    align-items: center;

}


/* ================================
   HERO
================================ */

.hero-section {

    position: relative;

    z-index: 2;

    width: 100%;

    display: flex;

    flex-direction: column;

    align-items: center;

    text-align: center;

    margin-bottom: 62px;

    animation:

        heroAppear

        1s

        ease

        forwards;

}


.hero-badge {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    padding:

        9px

        16px;

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

    border-radius: 999px;

    color: var(--soft-text);

    background: var(--card);

    font-size: 11px;

    font-weight: 600;

    letter-spacing: 0.8px;

    backdrop-filter: blur(15px);

}


.status-dot {

    width: 7px;

    height: 7px;

    border-radius: 50%;

    background: var(--pink);

    box-shadow:

        0 0 0 4px

        rgba(

            231,

            104,

            158,

            0.12

        );

    animation:

        pulseDot

        2s

        infinite;

}


@keyframes pulseDot {

    50% {

        opacity: 0.5;

        transform:

            scale(0.8);

    }

}


/* ================================
   MAIN TITLE
   SLOW LIQUID COLOUR MOVEMENT
================================ */

.main-title {

    max-width: 900px;

    margin-top: 24px;

    font-family:

        "Playfair Display",

        serif;

    font-size:

        clamp(

            42px,

            7vw,

            82px

        );

    line-height: 1.05;

    letter-spacing: -2px;

    background:

        linear-gradient(

            115deg,

            var(--text) 0%,

            var(--pink) 22%,

            #f58eb5 38%,

            var(--pink-light) 50%,

            var(--pink) 65%,

            var(--text) 82%,

            var(--pink) 100%

        );

    background-size:

        300%

        300%;

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    background-clip: text;

    animation:

        liquidTitle

        12s

        ease-in-out

        infinite;

}


@keyframes liquidTitle {

    0% {

        background-position:

            0%

            50%;

    }

    25% {

        background-position:

            50%

            70%;

    }

    50% {

        background-position:

            100%

            50%;

    }

    75% {

        background-position:

            50%

            30%;

    }

    100% {

        background-position:

            0%

            50%;

    }

}


.hero-description {

    max-width: 500px;

    margin-top: 22px;

    color: var(--soft-text);

    font-size: 15px;

    line-height: 1.7;

}


/* ================================
   SERVICE GRID
================================ */

.services-section {

    position: relative;

    z-index: 10;

    width: 100%;

    display: grid;

    grid-template-columns:

        repeat(

            3,

            minmax(

                0,

                1fr

            )

        );

    gap: 22px;

}


/* ================================
   SERVICE CARD
================================ */

.service-card {

    position: relative;

    z-index: 11;

    min-height: 335px;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    overflow: hidden;

    padding: 30px;

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

    border-radius: 28px;

    color: var(--text);

    text-decoration: none;

    background: var(--card);

    box-shadow:

        0 20px 60px var(--shadow);

    backdrop-filter: blur(20px);

    opacity: 1;

    visibility: visible;

    transform:

        translateY(0);

    animation:

        cardAppear

        0.8s

        ease

        forwards;

    transition:

        transform
        0.4s
        ease,

        box-shadow
        0.4s
        ease,

        border-color
        0.4s
        ease;

}


.service-card:nth-child(1) {

    animation-delay: 0.15s;

}


.service-card:nth-child(2) {

    animation-delay: 0.3s;

}


.service-card:nth-child(3) {

    animation-delay: 0.45s;

}


.service-card:hover {

    transform:

        translateY(-12px);

    border-color:

        var(--pink);

    box-shadow:

        0 30px 80px var(--shadow),

        0 0 35px

        rgba(

            255,

            130,

            180,

            0.12

        );

}


/* ================================
   CARD SHINE
================================ */

.card-shine {

    position: absolute;

    top: -120%;

    left: -70%;

    width: 55%;

    height: 300%;

    transform:

        rotate(25deg);

    background:

        linear-gradient(

            90deg,

            transparent,

            rgba(

                255,

                255,

                255,

                0.6

            ),

            transparent

        );

    opacity: 0;

    pointer-events: none;

    transition:

        left
        0.8s
        ease,

        opacity
        0.4s
        ease;

}


.service-card:hover .card-shine {

    left: 130%;

    opacity: 1;

}


/* ================================
   SERVICE ICON
================================ */

.service-icon {

    width: 66px;

    height: 66px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 21px;

    background:

        linear-gradient(

            135deg,

            var(--pink-soft),

            var(--pink-light)

        );

    transition:

        transform

        0.4s

        ease;

}


.service-icon svg {

    width: 30px;

    height: 30px;

    color: var(--pink);

    stroke-width: 1.8;

}


.service-card:hover .service-icon {

    transform:

        rotate(-8deg)

        scale(1.1);

}


/* ================================
   CARD CONTENT
================================ */

.service-content {

    position: relative;

    z-index: 2;

    margin-top: 28px;

}


.service-number {

    display: block;

    margin-bottom: 10px;

    color: var(--pink);

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 2px;

}


.service-content h2 {

    max-width: 260px;

    font-size: 21px;

    line-height: 1.3;

}


.service-content p {

    max-width: 270px;

    margin-top: 13px;

    color: var(--soft-text);

    font-size: 13px;

    line-height: 1.65;

}


/* ================================
   CARD ARROW
================================ */

.card-arrow {

    position: absolute;

    right: 28px;

    bottom: 28px;

    width: 38px;

    height: 38px;

    display: flex;

    align-items: center;

    justify-content: center;

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

    border-radius: 50%;

    color: var(--pink);

    background: var(--card);

    transition:

        transform

        0.35s

        ease,

        background

        0.35s

        ease;

}


.card-arrow svg {

    width: 17px;

    height: 17px;

}


.service-card:hover .card-arrow {

    transform:

        translate(

            4px,

            -4px

        );

    background:

        var(--pink-soft);

}


/* ================================
   FOOTER
================================ */

.site-footer {

    display: flex;

    align-items: center;

    gap: 6px;

    margin-top: 52px;

    color: var(--soft-text);

    font-size: 12px;

}


.footer-heart {

    width: 15px;

    height: 15px;

    color: var(--pink);

    animation:

        heartbeat

        1.8s

        infinite;

}


@keyframes heartbeat {

    50% {

        transform:

            scale(1.2);

    }

}


/* ================================
   PARTICLES
================================ */

#particles {

    position: fixed;

    inset: 0;

    z-index: 0;

    pointer-events: none;

    overflow: hidden;

}


.particle {

    position: absolute;

    bottom: -20px;

    color: var(--pink);

    opacity: 0.5;

    animation:

        particleFloat

        linear

        infinite;

}


@keyframes particleFloat {

    from {

        transform:

            translateY(0)

            scale(0.7);

        opacity: 0;

    }

    15% {

        opacity: 0.7;

    }

    to {

        transform:

            translateY(-110vh)

            scale(1.2);

        opacity: 0;

    }

}


/* ================================
   FLOATING HEARTS
================================ */

.floating-heart {

    position: fixed;

    bottom: -30px;

    z-index: 0;

    color: var(--pink);

    opacity: 0.45;

    pointer-events: none;

    animation:

        heartFloat

        linear

        forwards;

}


@keyframes heartFloat {

    from {

        transform:

            translateY(0)

            rotate(0deg)

            scale(0.8);

        opacity: 0;

    }

    15% {

        opacity: 0.6;

    }

    to {

        transform:

            translateY(-110vh)

            rotate(360deg)

            scale(1.15);

        opacity: 0;

    }

}


/* ================================
   CLICK SPARKLES
================================ */

.click-sparkle {

    position: fixed;

    z-index: 100000;

    color: var(--pink);

    font-size: 18px;

    pointer-events: none;

    transform:

        translate(

            -50%,

            -50%

        );

    animation:

        sparklePop

        0.8s

        ease-out

        forwards;

}


@keyframes sparklePop {

    from {

        opacity: 1;

        transform:

            translate(

                -50%,

                -50%

            )

            scale(0.4);

    }

    to {

        opacity: 0;

        transform:

            translate(

                -50%,

                -100px

            )

            scale(1.5)

            rotate(180deg);

    }

}


/* ================================
   PAGE ANIMATIONS
================================ */

@keyframes heroAppear {

    from {

        opacity: 0;

        transform:

            translateY(-20px);

    }

    to {

        opacity: 1;

        transform:

            translateY(0);

    }

}


@keyframes cardAppear {

    from {

        opacity: 0;

        transform:

            translateY(30px);

    }

    to {

        opacity: 1;

        transform:

            translateY(0);

    }

}


/* ================================
   RESPONSIVE
================================ */

@media (max-width: 900px) {

    .services-section {

        grid-template-columns: 1fr;

        max-width: 600px;

    }


    .service-card {

        min-height: 260px;

    }

}


@media (max-width: 600px) {

    .owner-mark {

        top: 18px;

        right: 18px;

    }


    .owner-link {

        padding:

            4px

            8px;

        font-size: 9px;

    }


    .control-panel {

        top: 18px;

        left: 20px;

    }


    .page-wrapper {

        padding:

            105px

            18px

            32px;

    }


    .main-title {

        font-size:

            clamp(

                38px,

                12vw,

                58px

            );

        letter-spacing:

            -1px;

    }


    .hero-description {

        font-size: 14px;

    }


    .service-card {

        min-height: 275px;

        padding: 25px;

    }

}