/* =====================================================
   THE MEDIA GRID
   SERVICES PAGE
===================================================== */


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

:root {

    --primary: #2563eb;
    --primary-dark: #1d4ed8;
    --primary-light: #60a5fa;

    --dark: #07111f;
    --dark-soft: #0f1b2d;

    --text: #0f172a;
    --text-soft: #64748b;

    --background: #ffffff;
    --background-soft: #f7faff;

    --border: rgba(15, 23, 42, 0.09);

    --card: #ffffff;

    --shadow:
        0 20px 60px rgba(15, 23, 42, 0.08);

    --radius: 24px;

    --transition: 0.3s ease;

}


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

body.dark-mode {

    --background: #050b14;

    --background-soft: #091321;

    --text: #f8fafc;

    --text-soft: #94a3b8;

    --border: rgba(255, 255, 255, 0.09);

    --card: #0c1727;

    --dark: #020617;

    --shadow:
        0 25px 70px rgba(0, 0, 0, 0.35);

}


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

* {

    margin: 0;
    padding: 0;

    box-sizing: border-box;

}


html {

    scroll-behavior: smooth;

}


body {

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

    background: var(--background);

    color: var(--text);

    line-height: 1.6;

    overflow-x: hidden;

    transition:
        background .3s ease,
        color .3s ease;

}


a {

    text-decoration: none;

    color: inherit;

}


button {

    font-family: inherit;

}


/* =====================================================
   CONTAINER
===================================================== */

.container {

    width: min(
        1180px,
        calc(100% - 40px)
    );

    margin: auto;

}


/* =====================================================
   NAVBAR
===================================================== */

.navbar {

    position: sticky;

    top: 0;

    z-index: 1000;

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

    backdrop-filter:
        blur(18px);

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

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

    transition:
        background .3s ease;

}


.dark-mode .navbar {

    background:
        rgba(5,11,20,.82);

}


.nav-container {

    width: min(
        1180px,
        calc(100% - 40px)
    );

    height: 76px;

    margin: auto;

    display: flex;

    align-items: center;

    justify-content: space-between;

}


.logo {

    font-size: 21px;

    font-weight: 800;

    letter-spacing: -0.5px;

    color: var(--text);

}


.logo::after {

    content: ".";

    color: var(--primary);

}


.nav-links {

    display: flex;

    align-items: center;

    gap: 28px;

}


.nav-links > a {

    font-size: 14px;

    font-weight: 600;

    color: var(--text-soft);

    transition:
        color var(--transition);

}


.nav-links > a:hover {

    color: var(--primary);

}


.nav-links > a.active {

    color: var(--primary);

}


.nav-audit {

    padding:
        10px 18px;

    border-radius: 10px;

    color: #ffffff !important;

    background:
        var(--primary);

    box-shadow:
        0 8px 25px rgba(37,99,235,.22);

}


.nav-audit:hover {

    background:
        var(--primary-dark);

    transform:
        translateY(-1px);

}


/* =====================================================
   THEME TOGGLE
===================================================== */

.theme-toggle {

    width: 40px;

    height: 40px;

    border-radius: 50%;

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

    background:
        var(--background);

    color:
        var(--text);

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

    transition:
        all var(--transition);

}


.theme-toggle:hover {

    color:
        var(--primary);

    border-color:
        rgba(37,99,235,.35);

    transform:
        rotate(12deg);

}


/* =====================================================
   MOBILE MENU
===================================================== */

.menu-toggle {

    display: none;

    width: 42px;

    height: 42px;

    border-radius: 10px;

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

    background:
        var(--background);

    color:
        var(--text);

    cursor: pointer;

    font-size: 18px;

}


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

.services-hero {

    position: relative;

    padding:
        135px 0 120px;

    background:

        radial-gradient(
            circle at 80% 20%,
            rgba(37,99,235,.13),
            transparent 35%
        ),

        radial-gradient(
            circle at 10% 80%,
            rgba(96,165,250,.08),
            transparent 30%
        ),

        var(--background);

    overflow: hidden;

}


.services-hero::before {

    content: "";

    position: absolute;

    width: 500px;

    height: 500px;

    border-radius: 50%;

    border:
        1px solid
        rgba(37,99,235,.08);

    right: -180px;

    top: -180px;

}


.hero-content {

    max-width: 820px;

}


.section-label {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    color:
        var(--primary);

    font-size: 12px;

    font-weight: 800;

    letter-spacing:
        1.5px;

    text-transform:
        uppercase;

}


.dot {

    width: 8px;

    height: 8px;

    border-radius: 50%;

    background:
        var(--primary);

    box-shadow:
        0 0 0 5px
        rgba(37,99,235,.10);

}


.services-hero h1 {

    margin-top: 25px;

    font-size:
        clamp(45px, 6vw, 78px);

    line-height:
        1.02;

    letter-spacing:
        -3px;

    font-weight:
        850;

    max-width:
        850px;

}


.gradient-text {

    background:
        linear-gradient(
            90deg,
            #2563eb,
            #60a5fa
        );

    -webkit-background-clip:
        text;

    background-clip:
        text;

    color:
        transparent;

}


.hero-content > p {

    margin-top: 28px;

    max-width: 680px;

    font-size: 18px;

    color:
        var(--text-soft);

}


.hero-actions {

    margin-top: 35px;

}


/* =====================================================
   PRIMARY BUTTON
===================================================== */

.primary-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    padding:
        15px 24px;

    border-radius:
        12px;

    background:
        var(--primary);

    color:
        #ffffff;

    font-size: 14px;

    font-weight: 700;

    box-shadow:
        0 14px 35px
        rgba(37,99,235,.25);

    transition:
        all var(--transition);

}


.primary-btn:hover {

    background:
        var(--primary-dark);

    transform:
        translateY(-3px);

    box-shadow:
        0 18px 40px
        rgba(37,99,235,.32);

}


.primary-btn i {

    transition:
        transform var(--transition);

}


.primary-btn:hover i {

    transform:
        translateX(4px);

}


/* =====================================================
   SECTION TITLE
===================================================== */

.section-title {

    max-width:
        760px;

}


.section-title.center {

    text-align:
        center;

    margin:
        0 auto;

}


.section-title h2 {

    margin-top:
        18px;

    font-size:
        clamp(34px, 4vw, 54px);

    line-height:
        1.08;

    letter-spacing:
        -2px;

}


.section-title p {

    margin-top:
        18px;

    color:
        var(--text-soft);

    font-size:
        16px;

}


/* =====================================================
   SERVICES SECTION
===================================================== */

.services-section {

    padding:
        120px 0;

    background:
        var(--background-soft);

}


/* =====================================================
   SERVICES GRID
===================================================== */

.services-grid {

    margin-top:
        60px;

    display:
        grid;

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

    gap:
        22px;

}


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

.service-card {

    position:
        relative;

    padding:
        38px;

    min-height:
        520px;

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

    border-radius:
        var(--radius);

    background:
        var(--card);

    box-shadow:
        var(--shadow);

    overflow:
        hidden;

    display:
        flex;

    flex-direction:
        column;

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;

}


.service-card::before {

    content: "";

    position:
        absolute;

    width:
        220px;

    height:
        220px;

    border-radius:
        50%;

    background:
        rgba(37,99,235,.08);

    right:
        -110px;

    top:
        -110px;

    transition:
        transform .5s ease;

}


.service-card:hover {

    transform:
        translateY(-10px);

    box-shadow:
        0 30px 75px
        rgba(15,23,42,.13);

    border-color:
        rgba(37,99,235,.25);

}


.dark-mode .service-card:hover {

    box-shadow:
        0 30px 75px
        rgba(0,0,0,.45);

}


.service-card:hover::before {

    transform:
        scale(1.5);

}


/* =====================================================
   SERVICE NUMBER
===================================================== */

.service-number {

    position:
        absolute;

    top:
        25px;

    right:
        28px;

    font-size:
        12px;

    font-weight:
        800;

    letter-spacing:
        1px;

    color:
        var(--text-soft);

    opacity:
        .55;

}


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

.service-icon {

    width:
        68px;

    height:
        68px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        18px;

    background:
        rgba(37,99,235,.10);

    color:
        var(--primary);

    font-size:
        28px;

    margin-bottom:
        30px;

    position:
        relative;

    z-index:
        2;

    transition:
        all .35s ease;

}


.service-card:hover .service-icon {

    background:
        var(--primary);

    color:
        #ffffff;

    transform:
        rotate(-5deg)
        scale(1.05);

}


.instagram-icon {

    color:
        #d946ef;

    background:
        rgba(217,70,239,.10);

}


.service-card:hover
.instagram-icon {

    background:
        #d946ef;

}


.website-icon {

    color:
        #0ea5e9;

    background:
        rgba(14,165,233,.10);

}


.service-card:hover
.website-icon {

    background:
        #0ea5e9;

}


/* =====================================================
   SERVICE CONTENT
===================================================== */

.service-content {

    position:
        relative;

    z-index:
        2;

    display:
        flex;

    flex-direction:
        column;

    flex: 1;

}


.service-label {

    font-size:
        11px;

    font-weight:
        800;

    letter-spacing:
        1.5px;

    color:
        var(--primary);

}


.service-content h3 {

    margin-top:
        10px;

    font-size:
        28px;

    line-height:
        1.15;

    letter-spacing:
        -1px;

}


.service-content > p {

    margin-top:
        17px;

    font-size:
        14px;

    line-height:
        1.8;

    color:
        var(--text-soft);

}


/* =====================================================
   SERVICE FEATURES
===================================================== */

.service-features {

    margin-top:
        25px;

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        12px;

}


.service-features span {

    display:
        flex;

    align-items:
        center;

    gap:
        8px;

    font-size:
        12px;

    font-weight:
        600;

    color:
        var(--text-soft);

}


.service-features i {

    color:
        var(--primary);

    font-size:
        10px;

}


/* =====================================================
   SERVICE BUTTON
===================================================== */

.service-btn {

    margin-top:
        auto;

    padding-top:
        30px;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        10px;

    font-size:
        14px;

    font-weight:
        750;

    color:
        var(--text);

    transition:
        color var(--transition);

}


.service-btn:hover {

    color:
        var(--primary);

}


.service-btn i {

    transition:
        transform var(--transition);

}


.service-btn:hover i {

    transform:
        translateX(5px);

}


/* =====================================================
   GROWTH SECTION
===================================================== */

.growth-section {

    padding:
        120px 0;

    background:
        var(--background);

}


.growth-grid {

    display:
        grid;

    grid-template-columns:
        1.15fr .85fr;

    gap:
        90px;

    align-items:
        center;

}


.growth-content h2 {

    margin-top:
        20px;

    font-size:
        clamp(35px, 4vw, 55px);

    line-height:
        1.08;

    letter-spacing:
        -2px;

}


.growth-content p {

    margin-top:
        22px;

    color:
        var(--text-soft);

    font-size:
        16px;

    max-width:
        620px;

}


.growth-points {

    display:
        flex;

    flex-direction:
        column;

    gap:
        18px;

}


.growth-point {

    display:
        flex;

    align-items:
        center;

    gap:
        18px;

    padding:
        22px;

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

    border-radius:
        18px;

    background:
        var(--card);

    transition:
        all var(--transition);

}


.growth-point:hover {

    transform:
        translateX(7px);

    border-color:
        rgba(37,99,235,.25);

    box-shadow:
        var(--shadow);

}


.growth-icon {

    min-width:
        48px;

    height:
        48px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        13px;

    background:
        rgba(37,99,235,.10);

    color:
        var(--primary);

}


.growth-point h3 {

    font-size:
        16px;

}


.growth-point p {

    margin-top:
        3px;

    color:
        var(--text-soft);

    font-size:
        13px;

}


/* =====================================================
   CTA
===================================================== */

.services-cta {

    padding:
        30px 0 120px;

    background:
        var(--background);

}


.cta-box {

    position:
        relative;

    overflow:
        hidden;

    padding:
        80px 60px;

    border-radius:
        30px;

    background:

        radial-gradient(
            circle at 85% 20%,
            rgba(96,165,250,.20),
            transparent 30%
        ),

        linear-gradient(
            135deg,
            #07111f,
            #0d2340
        );

    color:
        #ffffff;

    text-align:
        center;

    box-shadow:
        0 30px 80px
        rgba(7,17,31,.25);

}


.cta-box::before {

    content: "";

    position:
        absolute;

    width:
        280px;

    height:
        280px;

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

    border-radius:
        50%;

    left:
        -120px;

    bottom:
        -160px;

}


.cta-content {

    position:
        relative;

    z-index:
        2;

    max-width:
        760px;

    margin:
        auto;

}


.cta-content .section-label {

    justify-content:
        center;

    color:
        #60a5fa;

}


.cta-content .dot {

    background:
        #60a5fa;

}


.cta-content h2 {

    margin-top:
        18px;

    font-size:
        clamp(34px, 5vw, 55px);

    line-height:
        1.08;

    letter-spacing:
        -2px;

}


.cta-content p {

    margin:
        20px auto 30px;

    max-width:
        620px;

    color:
        #a8b8cc;

}


.cta-content .primary-btn {

    display:
        inline-flex;

}


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

.footer {

    padding:
        60px 0 25px;

    background:
        var(--dark);

    color:
        #ffffff;

}


.footer-content {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        30px;

    padding-bottom:
        35px;

}


.footer-logo {

    font-size:
        20px;

    font-weight:
        800;

}


.footer-logo::after {

    content:
        ".";

    color:
        #60a5fa;

}


.footer-content > p {

    color:
        #94a3b8;

    font-size:
        13px;

    max-width:
        380px;

}


.footer-links {

    display:
        flex;

    gap:
        22px;

}


.footer-links a {

    color:
        #94a3b8;

    font-size:
        13px;

    transition:
        color var(--transition);

}


.footer-links a:hover {

    color:
        #ffffff;

}


.footer-bottom {

    padding-top:
        20px;

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

    display:
        flex;

    justify-content:
        space-between;

    gap:
        20px;

    color:
        #64748b;

    font-size:
        11px;

}


/* =====================================================
   SCROLL REVEAL
===================================================== */

.reveal {

    opacity:
        0;

    transform:
        translateY(30px);

    transition:
        opacity .7s ease,
        transform .7s ease;

}


.reveal.visible {

    opacity:
        1;

    transform:
        translateY(0);

}


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

@media (max-width: 1000px) {

    .services-grid {

        grid-template-columns:
            1fr 1fr;

    }


    .service-card:last-child {

        grid-column:
            span 2;

        max-width:
            560px;

        width:
            100%;

        margin:
            auto;

    }


    .growth-grid {

        grid-template-columns:
            1fr;

        gap:
            55px;

    }

}


@media (max-width: 760px) {

    .container,
    .nav-container {

        width:
            min(
                100% - 28px,
                600px
            );

    }


    .nav-container {

        height:
            68px;

    }


    .nav-links {

        position:
            absolute;

        top:
            68px;

        left:
            14px;

        right:
            14px;

        padding:
            18px;

        display:
            none;

        flex-direction:
            column;

        align-items:
            stretch;

        gap:
            8px;

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

        border-radius:
            16px;

        background:
            var(--card);

        box-shadow:
            0 20px 50px
            rgba(0,0,0,.12);

    }


    .nav-links.active {

        display:
            flex;

    }


    .nav-links > a {

        padding:
            12px;

    }


    .nav-audit {

        text-align:
            center;

    }


    .theme-toggle {

        align-self:
            center;

    }


    .menu-toggle {

        display:
            flex;

        align-items:
            center;

        justify-content:
            center;

    }


    .services-hero {

        padding:
            90px 0;

    }


    .services-hero h1 {

        font-size:
            46px;

        letter-spacing:
            -2px;

    }


    .hero-content > p {

        font-size:
            16px;

    }


    .services-section,
    .growth-section {

        padding:
            85px 0;

    }


    .services-grid {

        grid-template-columns:
            1fr;

        margin-top:
            40px;

    }


    .service-card {

        min-height:
            auto;

    }


    .service-card:last-child {

        grid-column:
            auto;

        max-width:
            none;

    }


    .growth-content h2 {

        font-size:
            38px;

    }


    .cta-box {

        padding:
            60px 25px;

        border-radius:
            22px;

    }


    .cta-content h2 {

        font-size:
            38px;

    }


    .footer-content {

        flex-direction:
            column;

        align-items:
            flex-start;

    }


    .footer-bottom {

        flex-direction:
            column;

    }

}


@media (max-width: 480px) {

    .services-hero h1 {

        font-size:
            40px;

    }


    .section-title h2 {

        font-size:
            34px;

    }


    .service-card {

        padding:
            28px;

        border-radius:
            20px;

    }


    .service-features {

        grid-template-columns:
            1fr;

    }


    .primary-btn {

        width:
            100%;

    }


    .hero-actions {

        width:
            100%;

    }


    .footer-links {

        flex-wrap:
            wrap;

    }

}