:root {
    --pink: #ff5fa2;
    --pink-light: #ff9cc8;
    --pink-soft: #ffe2f0;

    --blue: #4c7dff;
    --blue-light: #86b6ff;
    --blue-dark: #274fc7;

    --purple: #8057ff;

    --dark: #11121b;
    --dark-two: #181925;

    --text: #20212d;
    --muted: #77798a;

    --white: #ffffff;

    --border: rgba(20, 25, 60, 0.08);

    --shadow:
        0 20px 70px rgba(64, 70, 150, 0.12);

    --radius: 28px;

    --gradient:
        linear-gradient(
            135deg,
            var(--blue),
            var(--purple),
            var(--pink)
        );
}


* {
    margin: 0;
    padding: 0;

    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {

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

    background:
        #fafbff;

    color:
        var(--text);

    overflow-x:
        hidden;

}


a {
    text-decoration:
        none;

    color:
        inherit;
}


button,
input,
textarea {

    font:
        inherit;

}


button {
    cursor:
        pointer;
}


.section-container {

    width:
        min(1180px, 90%);

    margin:
        auto;

}


/* BACKGROUND */


.background-glow {

    position:
        fixed;

    width:
        600px;

    height:
        600px;

    border-radius:
        50%;

    filter:
        blur(120px);

    opacity:
        0.15;

    pointer-events:
        none;

    z-index:
        -1;

}


.glow-one {

    background:
        var(--blue);

    top:
        -200px;

    left:
        -200px;

}


.glow-two {

    background:
        var(--pink);

    bottom:
        -250px;

    right:
        -200px;

}


/* NAVIGATION */


.navbar {

    position:
        sticky;

    top:
        0;

    z-index:
        1000;

    backdrop-filter:
        blur(18px);

    background:
        rgba(250, 251, 255, 0.75);

    border-bottom:
        1px solid rgba(0, 0, 0, 0.04);

}


.nav-container {

    width:
        min(1250px, 92%);

    margin:
        auto;

    height:
        76px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

}


.logo {

    font-weight:
        700;

    font-size:
        1.15rem;

    display:
        flex;

    align-items:
        center;

    gap:
        9px;

}


.logo-icon {

    color:
        var(--pink);

    font-size:
        1.4rem;

}


.nav-links {

    display:
        flex;

    gap:
        34px;

    color:
        var(--muted);

    font-size:
        0.95rem;

}


.nav-links a {

    transition:
        0.25s ease;

}


.nav-links a:hover {

    color:
        var(--pink);

}


.nav-button {

    padding:
        11px 20px;

    border-radius:
        100px;

    background:
        var(--gradient);

    color:
        white;

    font-size:
        0.9rem;

    font-weight:
        600;

    transition:
        0.25s ease;

}


.nav-button:hover {

    transform:
        translateY(-2px);

    box-shadow:
        0 12px 30px rgba(255, 95, 162, 0.28);

}


.mobile-menu-button {

    display:
        none;

    border:
        none;

    background:
        transparent;

    font-size:
        1.5rem;

}


.mobile-menu {

    display:
        none;

}


/* HERO */


.hero {

    min-height:
        calc(100vh - 76px);

    display:
        flex;

    align-items:
        center;

    padding:
        80px 0;

}


.hero-container {

    width:
        min(1180px, 90%);

    margin:
        auto;

    display:
        grid;

    grid-template-columns:
        1fr 0.8fr;

    align-items:
        center;

    gap:
        90px;

}


.eyebrow {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        9px;

    color:
        var(--blue-dark);

    font-size:
        0.76rem;

    font-weight:
        700;

    letter-spacing:
        0.14em;

    margin-bottom:
        20px;

}


.pulse-dot {

    width:
        8px;

    height:
        8px;

    background:
        var(--pink);

    border-radius:
        50%;

    box-shadow:
        0 0 0 6px rgba(255, 95, 162, 0.12);

}


.hero h1 {

    font-family:
        "Playfair Display",
        serif;

    font-size:
        clamp(3.2rem, 6vw, 6rem);

    line-height:
        0.98;

    letter-spacing:
        -0.04em;

    max-width:
        700px;

}


.hero h1 span {

    display:
        block;

    background:
        var(--gradient);

    background-clip:
        text;

    -webkit-background-clip:
        text;

    color:
        transparent;

}


.hero-description {

    margin-top:
        28px;

    max-width:
        580px;

    color:
        var(--muted);

    font-size:
        1.08rem;

    line-height:
        1.75;

}


.hero-buttons {

    display:
        flex;

    align-items:
        center;

    gap:
        16px;

    margin-top:
        35px;

}


.primary-button {

    display:
        flex;

    align-items:
        center;

    gap:
        24px;

    padding:
        15px 18px 15px 24px;

    border-radius:
        100px;

    background:
        var(--gradient);

    color:
        white;

    font-weight:
        600;

    transition:
        0.3s ease;

}


.primary-button:hover {

    transform:
        translateY(-3px);

    box-shadow:
        0 20px 40px rgba(99, 90, 230, 0.3);

}


.button-arrow {

    width:
        34px;

    height:
        34px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        50%;

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

}


.secondary-button {

    color:
        var(--text);

    font-weight:
        600;

    padding:
        16px 20px;

}


.quick-info {

    display:
        flex;

    gap:
        35px;

    margin-top:
        55px;

}


.info-item {

    display:
        flex;

    align-items:
        center;

    gap:
        13px;

}


.info-icon {

    width:
        42px;

    height:
        42px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        15px;

    background:
        white;

    box-shadow:
        0 10px 30px rgba(30, 40, 90, 0.08);

    color:
        var(--pink);

}


.info-item strong {

    display:
        block;

    font-size:
        0.88rem;

}


.info-item span {

    display:
        block;

    margin-top:
        3px;

    font-size:
        0.75rem;

    color:
        var(--muted);

}


/* VIDEO */


.hero-video-wrapper {

    position:
        relative;

    display:
        flex;

    justify-content:
        center;

}


.video-glow {

    position:
        absolute;

    width:
        85%;

    height:
        85%;

    background:
        var(--gradient);

    filter:
        blur(80px);

    opacity:
        0.28;

    top:
        8%;

}


.vertical-video-container {

    position:
        relative;

    width:
        min(100%, 360px);

    aspect-ratio:
        9 / 16;

    border-radius:
        38px;

    overflow:
        hidden;

    box-shadow:
        0 40px 100px rgba(49, 56, 140, 0.25);

    border:
        8px solid rgba(255, 255, 255, 0.85);

}


.vertical-video-container video {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    display:
        block;

}


.video-overlay {

    position:
        absolute;

    inset:
        0;

    background:
        linear-gradient(
            to top,
            rgba(0, 0, 0, 0.35),
            transparent 45%
        );

    pointer-events:
        none;

}


.video-badge {

    position:
        absolute;

    bottom:
        24px;

    left:
        22px;

    right:
        22px;

    padding:
        13px 16px;

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    color:
        white;

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

    backdrop-filter:
        blur(15px);

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

    border-radius:
        16px;

    font-size:
        0.86rem;

}


.badge-icon {

    color:
        var(--pink-light);

}


.video-sound-button {

    position:
        absolute;

    top:
        18px;

    right:
        18px;

    width:
        42px;

    height:
        42px;

    border:
        none;

    border-radius:
        50%;

    background:
        rgba(0, 0, 0, 0.3);

    backdrop-filter:
        blur(10px);

    color:
        white;

}


.floating-card {

    position:
        absolute;

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    padding:
        14px 17px;

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

    backdrop-filter:
        blur(20px);

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

    border-radius:
        18px;

    box-shadow:
        var(--shadow);

    z-index:
        3;

}


.floating-card-one {

    left:
        -45px;

    bottom:
        90px;

}


.card-star {

    width:
        36px;

    height:
        36px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        12px;

    background:
        linear-gradient(
            135deg,
            var(--pink-soft),
            #e8efff
        );

    color:
        var(--pink);

}


.floating-card strong {

    display:
        block;

    font-size:
        0.82rem;

}


.floating-card small {

    color:
        var(--muted);

    font-size:
        0.7rem;

}


.floating-sparkle {

    position:
        absolute;

    color:
        var(--pink);

    font-size:
        2rem;

}


.sparkle-one {

    top:
        15%;

    right:
        -15px;

}


.sparkle-two {

    bottom:
        10%;

    right:
        -30px;

    color:
        var(--blue);

}


/* SECTIONS */


.services-section,
.about-section,
.contact-section {

    padding:
        130px 0;

}


.section-heading {

    max-width:
        720px;

    margin-bottom:
        65px;

}


.section-heading h2,
.about-content h2,
.contact-info h2 {

    font-family:
        "Playfair Display",
        serif;

    font-size:
        clamp(2.5rem, 5vw, 4.5rem);

    line-height:
        1.05;

    letter-spacing:
        -0.035em;

}


.section-heading h2 span,
.about-content h2 span,
.contact-info h2 span {

    background:
        var(--gradient);

    background-clip:
        text;

    -webkit-background-clip:
        text;

    color:
        transparent;

}


.section-heading p {

    margin-top:
        22px;

    max-width:
        620px;

    color:
        var(--muted);

    line-height:
        1.75;

}


/* SERVICES */


.services-section {

    background:
        linear-gradient(
            180deg,
            transparent,
            #f5f7ff
        );

}


.services-grid {

    display:
        grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap:
        20px;

}


.service-card {

    position:
        relative;

    padding:
        35px;

    min-height:
        250px;

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

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

    border-radius:
        var(--radius);

    transition:
        0.35s ease;

    overflow:
        hidden;

}


.service-card:hover {

    transform:
        translateY(-7px);

    box-shadow:
        var(--shadow);

}


.featured-service {

    background:
        linear-gradient(
            135deg,
            #f2f6ff,
            #fff0f8
        );

}


.service-number {

    position:
        absolute;

    top:
        25px;

    right:
        28px;

    color:
        rgba(60, 70, 130, 0.15);

    font-size:
        0.75rem;

    font-weight:
        700;

}


.service-icon {

    width:
        54px;

    height:
        54px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        17px;

    background:
        linear-gradient(
            135deg,
            #edf3ff,
            #ffeaf4
        );

    color:
        var(--pink);

    font-size:
        1.3rem;

}


.service-card h3 {

    margin-top:
        28px;

    font-size:
        1.25rem;

}


.service-card p {

    margin-top:
        11px;

    color:
        var(--muted);

    line-height:
        1.65;

    max-width:
        350px;

}


.wide-service {

    grid-column:
        span 2;

    min-height:
        220px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    background:
        var(--gradient);

    color:
        white;

}


.wide-service .service-number {

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

}


.wide-service p {

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

}


.wide-service-icon {

    font-size:
        6rem;

    opacity:
        0.8;

}


/* ABOUT */


.about-grid {

    display:
        grid;

    grid-template-columns:
        0.8fr 1fr;

    gap:
        100px;

    align-items:
        center;

}


.about-visual {

    position:
        relative;

    height:
        500px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

}


.about-circle {

    position:
        absolute;

    border-radius:
        50%;

}


.circle-one {

    width:
        370px;

    height:
        370px;

    background:
        linear-gradient(
            135deg,
            #dceaff,
            #ffddeb
        );

}


.circle-two {

    width:
        250px;

    height:
        250px;

    border:
        1px solid rgba(100, 100, 255, 0.2);

}


.about-card {

    position:
        relative;

    width:
        300px;

    padding:
        40px;

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

    backdrop-filter:
        blur(20px);

    border:
        1px solid white;

    border-radius:
        30px;

    box-shadow:
        var(--shadow);

}


.large-sparkle {

    font-size:
        3.5rem;

    color:
        var(--pink);

}


.about-card h3 {

    font-family:
        "Playfair Display",
        serif;

    font-size:
        1.9rem;

    line-height:
        1.2;

    margin-top:
        25px;

}


.about-content p {

    margin-top:
        22px;

    color:
        var(--muted);

    line-height:
        1.8;

}


.about-features {

    margin-top:
        30px;

    display:
        grid;

    gap:
        14px;

}


.about-feature {

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

}


.about-feature span {

    width:
        27px;

    height:
        27px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        50%;

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

    color:
        white;

    font-size:
        0.75rem;

}


.about-feature p {

    margin:
        0;

    font-size:
        0.92rem;

}


.text-link {

    display:
        inline-flex;

    gap:
        12px;

    margin-top:
        35px;

    color:
        var(--blue-dark);

    font-weight:
        700;

}


/* CTA */


.cta-section {

    position:
        relative;

    padding:
        40px 0;

}


.cta-box {

    position:
        relative;

    overflow:
        hidden;

    padding:
        65px 70px;

    border-radius:
        35px;

    background:
        var(--gradient);

    color:
        white;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        40px;

}


.cta-box h2 {

    font-family:
        "Playfair Display",
        serif;

    font-size:
        clamp(2.5rem, 5vw, 4rem);

    line-height:
        1.05;

}


.cta-box h2 span {

    color:
        #ffe3f2;

}


.light-eyebrow {

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

}


.cta-button {

    flex-shrink:
        0;

    display:
        flex;

    align-items:
        center;

    gap:
        22px;

    background:
        white;

    color:
        var(--blue-dark);

    padding:
        18px 22px 18px 26px;

    border-radius:
        100px;

    font-weight:
        700;

    transition:
        0.3s ease;

}


.cta-button:hover {

    transform:
        scale(1.04);

}


.cta-button span:last-child {

    width:
        34px;

    height:
        34px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        50%;

    background:
        #edf2ff;

}


/* CONTACT */


.contact-grid {

    display:
        grid;

    grid-template-columns:
        0.8fr 1fr;

    gap:
        100px;

    align-items:
        start;

}


.contact-info > p {

    color:
        var(--muted);

    line-height:
        1.75;

    margin-top:
        22px;

}


.contact-methods {

    margin-top:
        40px;

    display:
        grid;

    gap:
        15px;

}


.contact-method {

    display:
        flex;

    align-items:
        center;

    gap:
        16px;

    padding:
        15px;

    border-radius:
        18px;

    transition:
        0.25s ease;

}


a.contact-method:hover {

    background:
        white;

    box-shadow:
        0 10px 30px rgba(30, 40, 100, 0.06);

}


.contact-icon {

    width:
        46px;

    height:
        46px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        15px;

    background:
        linear-gradient(
            135deg,
            #e9f1ff,
            #ffe8f2
        );

}


.contact-method span {

    display:
        block;

    color:
        var(--muted);

    font-size:
        0.78rem;

}


.contact-method strong {

    display:
        block;

    margin-top:
        3px;

    font-size:
        0.93rem;

}


/* FORM */


.contact-form {

    padding:
        40px;

    background:
        white;

    border-radius:
        30px;

    box-shadow:
        var(--shadow);

    border:
        1px solid rgba(0, 0, 0, 0.04);

}


.form-row {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        15px;

}


.form-group {

    display:
        flex;

    flex-direction:
        column;

    margin-bottom:
        18px;

}


.form-group label {

    font-size:
        0.82rem;

    font-weight:
        600;

    margin-bottom:
        8px;

}


.form-group input,
.form-group textarea {

    width:
        100%;

    border:
        1px solid #e5e7f0;

    border-radius:
        13px;

    padding:
        14px 15px;

    outline:
        none;

    background:
        #fcfcff;

    transition:
        0.2s ease;

}


.form-group textarea {

    resize:
        vertical;

    min-height:
        130px;

}


.form-group input:focus,
.form-group textarea:focus {

    border-color:
        var(--blue);

    box-shadow:
        0 0 0 4px rgba(76, 125, 255, 0.1);

}


.form-button {

    width:
        100%;

    border:
        none;

    padding:
        16px;

    border-radius:
        14px;

    background:
        var(--gradient);

    color:
        white;

    font-weight:
        700;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        10px;

    transition:
        0.25s ease;

}


.form-button:hover {

    transform:
        translateY(-2px);

    box-shadow:
        0 15px 30px rgba(100, 90, 220, 0.25);

}


.form-status {

    text-align:
        center;

    margin-top:
        15px;

    font-size:
        0.85rem;

    color:
        var(--blue-dark);

}


/* FOOTER */


footer {

    margin-top:
        70px;

    padding:
        65px 0 30px;

    background:
        #11131e;

    color:
        white;

}


.footer-content {

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        flex-start;

    padding-bottom:
        50px;

}


.footer-logo a {

    font-size:
        1.25rem;

    font-weight:
        700;

}


.footer-logo p {

    margin-top:
        14px;

    max-width:
        260px;

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

    line-height:
        1.6;

    font-size:
        0.85rem;

}


.footer-links {

    display:
        flex;

    gap:
        28px;

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

    font-size:
        0.88rem;

}


.footer-bottom {

    padding-top:
        25px;

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

    display:
        flex;

    justify-content:
        space-between;

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

    font-size:
        0.78rem;

}


/* RESPONSIVE */


@media (max-width: 900px) {

    .hero-container,
    .about-grid,
    .contact-grid {

        grid-template-columns:
            1fr;

        gap:
            60px;

    }


    .hero {

        padding-top:
            60px;

    }


    .hero-content {

        text-align:
            center;

    }


    .hero-content .eyebrow {

        justify-content:
            center;

    }


    .hero-description {

        margin-left:
            auto;

        margin-right:
            auto;

    }


    .hero-buttons {

        justify-content:
            center;

    }


    .quick-info {

        justify-content:
            center;

    }


    .hero-video-wrapper {

        order:
            2;

    }


    .about-content {

        order:
            1;

    }


    .about-visual {

        order:
            2;

    }


    .cta-box {

        flex-direction:
            column;

        align-items:
            flex-start;

    }

}


@media (max-width: 700px) {

    .nav-links,
    .nav-button {

        display:
            none;

    }


    .mobile-menu-button {

        display:
        block;

    }


    .mobile-menu {

        padding:
            20px 5% 28px;

        flex-direction:
            column;

        gap:
            20px;

        background:
            rgba(250, 251, 255, 0.98);

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

    }


    .mobile-menu.active {

        display:
            flex;

    }


    .mobile-menu a {

        font-weight:
            600;

    }


    .mobile-call {

        display:
            inline-block;

        background:
            var(--gradient);

        color:
            white;

        padding:
            14px 20px;

        border-radius:
            100px;

        text-align:
            center;

    }


    .hero {

        min-height:
            auto;

        padding:
            55px 0 80px;

    }


    .hero h1 {

        font-size:
            clamp(3rem, 15vw, 4.5rem);

    }


    .hero-buttons {

        flex-direction:
            column;

    }


    .primary-button,
    .secondary-button {

        width:
            100%;

        justify-content:
            center;

    }


    .quick-info {

        flex-direction:
            column;

        align-items:
            center;

        gap:
            18px;

    }


    .vertical-video-container {

        width:
            min(100%, 330px);

    }


    .floating-card-one {

        left:
            -10px;

        bottom:
            55px;

    }


    .services-section,
    .about-section,
    .contact-section {

        padding:
            90px 0;

    }


    .services-grid {

        grid-template-columns:
            1fr;

    }


    .wide-service {

        grid-column:
            span 1;

        min-height:
            270px;

    }


    .wide-service-icon {

        font-size:
            4rem;

    }


    .about-visual {

        height:
            400px;

    }


    .circle-one {

        width:
            290px;

        height:
            290px;

    }


    .circle-two {

        width:
            210px;

        height:
            210px;

    }


    .about-card {

        width:
            260px;

        padding:
            30px;

    }


    .cta-box {

        padding:
            45px 30px;

    }


    .cta-button {

        width:
            100%;

        justify-content:
            center;

    }


    .form-row {

        grid-template-columns:
            1fr;

        gap:
            0;

    }


    .contact-form {

        padding:
            27px 20px;

    }


    .footer-content,
    .footer-bottom {

        flex-direction:
            column;

        gap:
            28px;

    }


    .footer-links {

        flex-wrap:
            wrap;

    }

}