/* ========================================
   ACT DIGITAL
   Main Stylesheet
======================================== */


/* ---------- RESET ---------- */

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    background: #050b14;
    color: #ffffff;
    overflow-x: hidden;
}

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

button {
    font: inherit;
}


/* ========================================
   HEADER
======================================== */

.site-header {
    position: fixed;
    top: 0;
    left: 0;

    width: 100%;
    height: 92px;

    display: flex;
    align-items: center;

    z-index: 1000;

    background: rgba(5, 11, 20, 0.72);
    backdrop-filter: blur(18px);

    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.nav-container {
    width: min(1400px, 92%);
    height: 100%;

    margin: 0 auto;

    display: flex;
    align-items: center;

    gap: 45px;
}


/* ---------- LOGO ---------- */

.logo-link {
    display: flex;
    align-items: center;

    margin-right: auto;
}

.site-logo {
    display: block;

    width: 190px;
    max-height: 72px;

    object-fit: contain;
}


/* ---------- NAVIGATION ---------- */

.main-nav {
    display: flex;
    align-items: center;

    gap: 38px;
}

.nav-link {
    position: relative;

    padding: 34px 0;

    font-size: 14px;
    font-weight: 600;

    letter-spacing: 0.5px;

    color: #c7d0dc;

    transition:
        color 0.25s ease,
        transform 0.25s ease;
}

.nav-link:hover,
.nav-link.active {
    color: #ffffff;
}

.nav-link::after {
    content: "";

    position: absolute;

    left: 50%;
    bottom: 24px;

    width: 0;
    height: 2px;

    background: linear-gradient(
        90deg,
        #006cff,
        #00e5ff
    );

    transform: translateX(-50%);

    transition: width 0.25s ease;
}

.nav-link:hover::after,
.nav-link.active::after {
    width: 100%;
}


/* ---------- QUOTE BUTTON ---------- */

.quote-button {
    display: inline-flex;
    align-items: center;

    gap: 12px;

    padding: 14px 23px;

    border: 1px solid rgba(0, 213, 255, 0.65);
    border-radius: 6px;

    background: linear-gradient(
        135deg,
        rgba(0, 100, 255, 0.18),
        rgba(0, 229, 255, 0.08)
    );

    color: #ffffff;

    font-size: 14px;
    font-weight: 700;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        background 0.25s ease;
}

.quote-button span {
    color: #00d9ff;
    font-size: 18px;
}

.quote-button:hover {
    transform: translateY(-2px);

    background: linear-gradient(
        135deg,
        rgba(0, 100, 255, 0.32),
        rgba(0, 229, 255, 0.16)
    );

    box-shadow:
        0 0 30px rgba(0, 174, 255, 0.22);
}


/* ---------- MOBILE BUTTON ---------- */

.menu-toggle {
    display: none;

    width: 42px;
    height: 42px;

    border: 0;
    background: transparent;

    cursor: pointer;
}

.menu-toggle span {
    display: block;

    width: 26px;
    height: 2px;

    margin: 6px auto;

    background: #ffffff;

    transition: 0.3s ease;
}


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

.hero {
    position: relative;

    min-height: 100vh;

    padding:
        180px 5%
        100px;

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

    text-align: center;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 50% 45%,
            rgba(0, 98, 255, 0.09),
            transparent 38%
        ),
        linear-gradient(
            180deg,
            #07111e 0%,
            #040a12 100%
        );
}


/* ---------- BACKGROUND GRID ---------- */

.hero::before {
    content: "";

    position: absolute;
    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: 70px 70px;

    mask-image:
        linear-gradient(
            to bottom,
            transparent,
            black 20%,
            black 75%,
            transparent
        );

    pointer-events: none;
}


/* ---------- GLOW EFFECTS ---------- */

.hero-glow {
    position: absolute;

    border-radius: 50%;

    filter: blur(120px);

    pointer-events: none;
}

.hero-glow-one {
    width: 450px;
    height: 450px;

    left: -220px;
    top: 20%;

    background: rgba(0, 81, 255, 0.16);
}

.hero-glow-two {
    width: 400px;
    height: 400px;

    right: -180px;
    bottom: 5%;

    background: rgba(0, 229, 255, 0.10);
}


/* ---------- HERO CONTENT ---------- */

.hero-content {
    position: relative;

    z-index: 2;

    width: min(1000px, 100%);
}

.hero-eyebrow {
    margin-bottom: 26px;

    color: #00d9ff;

    font-size: 14px;
    font-weight: 700;

    letter-spacing: 6px;
}

.hero h1 {
    max-width: 1000px;

    margin: 0 auto;

    font-size: clamp(58px, 7.2vw, 108px);

    line-height: 0.98;

    letter-spacing: -4px;

    font-weight: 800;
}

.hero h1 span {
    display: block;

    margin-top: 12px;

    background: linear-gradient(
        90deg,
        #ffffff 0%,
        #00d9ff 48%,
        #1475ff 100%
    );

    -webkit-background-clip: text;
    background-clip: text;

    color: transparent;

    text-shadow:
        0 0 45px rgba(0, 174, 255, 0.10);
}

.hero-description {
    max-width: 680px;

    margin:
        32px auto
        0;

    color: #9daabc;

    font-size: 19px;

    line-height: 1.7;
}


/* ---------- HERO BUTTONS ---------- */

.hero-buttons {
    margin-top: 42px;

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

    gap: 18px;

    flex-wrap: wrap;
}

.primary-button,
.secondary-button {
    min-width: 190px;

    padding: 17px 26px;

    border-radius: 6px;

    font-size: 14px;
    font-weight: 700;

    letter-spacing: 0.3px;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}

.primary-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 14px;

    background: linear-gradient(
        135deg,
        #0875ff,
        #00d9ff
    );

    color: #ffffff;

    box-shadow:
        0 12px 40px rgba(0, 126, 255, 0.25);
}

.primary-button:hover {
    transform: translateY(-3px);

    box-shadow:
        0 18px 50px rgba(0, 174, 255, 0.35);
}

.secondary-button {
    border: 1px solid rgba(255,255,255,0.17);

    color: #dbe4ee;

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

.secondary-button:hover {
    transform: translateY(-3px);

    border-color: rgba(0, 217, 255, 0.55);
}


/* ---------- SCROLL INDICATOR ---------- */

.scroll-indicator {
    position: absolute;

    bottom: 30px;
    left: 50%;

    transform: translateX(-50%);

    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 10px;

    color: #667487;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 3px;

    text-transform: uppercase;
}

.scroll-line {
    width: 1px;
    height: 35px;

    background: linear-gradient(
        to bottom,
        #00d9ff,
        transparent
    );
}


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

.mobile-quote-button {
    display: none;
}

@media (max-width: 900px) {

    .site-header {
        height: 78px;
    }

    .nav-container {
        position: relative;
    }

    .site-logo {
        width: 155px;
    }


    /* ========================================
       MOBILE NAVIGATION
    ======================================== */

    .main-nav {
        position: fixed;

        top: 78px;
        left: 0;
        right: 0;

        z-index: 999;

        display: flex;
        flex-direction: column;
        align-items: stretch;

        padding: 22px 5% 28px;

        background:
            rgba(4, 10, 18, 0.98);

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

        border-bottom:
            1px solid rgba(0,217,255,0.10);

        box-shadow:
            0 25px 60px rgba(0,0,0,0.45);

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

        opacity: 0;
        visibility: hidden;

        transform: translateY(-15px);

        pointer-events: none;

        transition:
            opacity 0.3s ease,
            transform 0.3s ease,
            visibility 0.3s ease;
    }


    /* MENU OPEN */

    .main-nav.active {
        opacity: 1;
        visibility: visible;

        transform: translateY(0);

        pointer-events: auto;
    }


    /* MOBILE LINKS */

    .main-nav .nav-link {
        width: 100%;

        padding: 18px 4px;

        border-bottom:
            1px solid rgba(255,255,255,0.055);

        color: #dce5ee;

        font-size: 15px;
        font-weight: 600;

        letter-spacing: 0.4px;
    }

    .main-nav .nav-link:last-child {
        border-bottom: 0;
    }

    .main-nav .nav-link:hover,
    .main-nav .nav-link.active {
        color: #00d9ff;
    }

    /* REMOVE DESKTOP ACTIVE-LINK LINE ON MOBILE */

.main-nav .nav-link::after {
    display: none;
}

/* MOBILE QUOTE BUTTON */

.mobile-quote-button {
    width: 100%;

    margin-top: 22px;
    padding: 17px 20px;

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

    border-radius: 6px;

    background:
        linear-gradient(
            135deg,
            #0875ff,
            #00d9ff
        );

    color: #ffffff;

    font-size: 14px;
    font-weight: 700;

    letter-spacing: 0.3px;

    box-shadow:
        0 12px 35px rgba(0, 126, 255, 0.18);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.mobile-quote-button span {
    font-size: 18px;

    transition:
        transform 0.25s ease;
}

.mobile-quote-button:hover {
    transform: translateY(-2px);

    box-shadow:
        0 16px 40px rgba(0, 174, 255, 0.28);
}

.mobile-quote-button:hover span {
    transform: translateX(4px);
}


    /* HIDE DESKTOP QUOTE BUTTON */

    .quote-button {
        display: none;
    }


    /* ========================================
       HAMBURGER
    ======================================== */

    .menu-toggle {
        position: relative;

        z-index: 1001;

        display: block;

        width: 44px;
        height: 44px;

        padding: 0;

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

        border-radius: 6px;

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

    .menu-toggle span {
        position: absolute;

        left: 50%;

        width: 22px;
        height: 2px;

        margin: 0;

        border-radius: 10px;

        background: #ffffff;

        transform: translateX(-50%);

        transition:
            top 0.3s ease,
            transform 0.3s ease,
            opacity 0.2s ease,
            background 0.3s ease;
    }

    .menu-toggle span:nth-child(1) {
        top: 13px;
    }

    .menu-toggle span:nth-child(2) {
        top: 20px;
    }

    .menu-toggle span:nth-child(3) {
        top: 27px;
    }


    /* HAMBURGER → X */

    .menu-toggle.active span:nth-child(1) {
        top: 20px;

        transform:
            translateX(-50%)
            rotate(45deg);

        background: #00d9ff;
    }

    .menu-toggle.active span:nth-child(2) {
        opacity: 0;
    }

    .menu-toggle.active span:nth-child(3) {
        top: 20px;

        transform:
            translateX(-50%)
            rotate(-45deg);

        background: #00d9ff;
    }


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

    .hero {
        padding-top: 140px;
    }

    .hero h1 {
        font-size:
            clamp(50px, 12vw, 78px);

        letter-spacing: -2px;
    }

}


@media (max-width: 550px) {

    .hero-eyebrow {
        font-size: 10px;
        letter-spacing: 4px;
    }

    .hero h1 {
        font-size: 48px;
    }

    .hero-description {
        font-size: 16px;
    }

    .hero-buttons {
        flex-direction: column;
    }

    .primary-button,
    .secondary-button {
        width: 100%;
        max-width: 310px;
    }

}

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

.services-section {
    position: relative;

    padding: 130px 5% 150px;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(0, 126, 255, 0.08),
            transparent 35%
        ),
        #050b14;

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

.section-container {
    width: min(1400px, 100%);
    margin: 0 auto;
}


/* ---------- SECTION HEADING ---------- */

.section-heading {
    max-width: 800px;
    margin-bottom: 70px;
}

.section-label {
    margin-bottom: 20px;

    color: #00d9ff;

    font-size: 12px;
    font-weight: 700;

    letter-spacing: 5px;
}

.section-heading h2 {
    font-size: clamp(42px, 5vw, 68px);

    line-height: 1.08;

    letter-spacing: -2px;
}

.section-heading h2 span {
    color: #00d9ff;
}

.section-intro {
    max-width: 650px;

    margin-top: 25px;

    color: #8997aa;

    font-size: 18px;

    line-height: 1.7;
}


/* ---------- SERVICE GRID ---------- */

.services-grid {
    display: grid;

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

    gap: 18px;
}


/* ---------- SERVICE CARD ---------- */

.service-card {
    position: relative;

    grid-column: span 2;

    min-height: 430px;

    padding: 34px 30px;

    display: flex;
    flex-direction: column;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,0.045),
            rgba(255,255,255,0.012)
        );

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

    border-radius: 12px;

    transition:
        transform 0.35s ease,
        border-color 0.35s ease,
        box-shadow 0.35s ease;
}


/* BLUE GLOW */

.service-card::before {
    content: "";

    position: absolute;

    width: 220px;
    height: 220px;

    top: -120px;
    left: -100px;

    border-radius: 50%;

    background:
        rgba(0, 174, 255, 0.18);

    filter: blur(70px);

    opacity: 0;

    transition: opacity 0.4s ease;

    pointer-events: none;
}


/* TOP ACCENT LINE */

.service-card::after {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 0;
    height: 2px;

    background:
        linear-gradient(
            90deg,
            #006cff,
            #00e5ff
        );

    transition:
        width 0.45s ease;
}


.service-card:hover {
    transform: translateY(-10px);

    border-color:
        rgba(0, 217, 255, 0.32);

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

.service-card:hover::before {
    opacity: 1;
}

.service-card:hover::after {
    width: 100%;
}


/* ---------- NUMBER ---------- */

.service-number {
    position: absolute;

    top: 24px;
    right: 25px;

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

    font-size: 12px;
    font-weight: 700;

    letter-spacing: 2px;
}


/* ---------- ICON ---------- */

.service-icon {
    width: 68px;
    height: 68px;

    margin-bottom: 35px;

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

    border-radius: 50%;

    border:
        1px solid
        rgba(0,217,255,0.45);

    background:
        rgba(0,126,255,0.07);

    box-shadow:
        inset 0 0 25px
        rgba(0,174,255,0.04);

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease,
        background 0.35s ease;
}

.service-icon svg {
    width: 31px;
    height: 31px;

    fill: none;

    stroke: #00d9ff;

    stroke-width: 1.6;

    stroke-linecap: round;
    stroke-linejoin: round;
}

.service-card:hover .service-icon {
    transform:
        translateY(-3px)
        scale(1.06);

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

    box-shadow:
        0 0 35px
        rgba(0,174,255,0.16);
}


/* ---------- TEXT ---------- */

.service-card h3 {
    margin-bottom: 18px;

    font-size: 21px;

    letter-spacing: -0.4px;
}

.service-card p {
    color: #8997aa;

    font-size: 14px;

    line-height: 1.75;
}


/* ---------- SERVICE LINK ---------- */

.service-link {
    margin-top: auto;

    padding-top: 30px;

    display: flex;
    align-items: center;

    gap: 10px;

    color: #dbe5ef;

    font-size: 12px;
    font-weight: 700;

    letter-spacing: 1px;

    text-transform: uppercase;
}

.service-link span {
    color: #00d9ff;

    font-size: 18px;

    transition:
        transform 0.25s ease;
}

.service-link:hover span {
    transform:
        translateX(6px);
}


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

@media (max-width: 1200px) {

    .services-grid {
        grid-template-columns:
            repeat(6, 1fr);
    }

    .service-card {
        grid-column: span 2;
    }

    .service-card:nth-child(4) {
        grid-column:
            2 / span 2;
    }

}


@media (max-width: 800px) {

    .services-section {
        padding:
            100px 5%
            110px;
    }

    .services-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }

    .service-card,
    .service-card:nth-child(4) {
        grid-column: span 1;
    }

    .service-card:last-child {
        grid-column:
            1 / -1;
    }

}


@media (max-width: 550px) {

    .section-heading {
        margin-bottom: 45px;
    }

    .section-heading h2 {
        font-size: 39px;
    }

    .section-intro {
        font-size: 16px;
    }

    .services-grid {
        grid-template-columns: 1fr;
    }

    .service-card,
    .service-card:nth-child(4),
    .service-card:last-child {
        grid-column: auto;
    }

    .service-card {
        min-height: 370px;
    }

}

/* ========================================
   THE ACT METHOD
======================================== */

.act-method {
    position: relative;

    padding: 150px 5%;

    overflow: hidden;

    background:
        linear-gradient(
            180deg,
            #050b14 0%,
            #07111e 50%,
            #050b14 100%
        );

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


/* ---------- BACKGROUND GLOW ---------- */

.act-method-glow {
    position: absolute;

    width: 700px;
    height: 700px;

    top: 35%;
    left: 50%;

    transform: translate(-50%, -50%);

    border-radius: 50%;

    background:
        rgba(0, 113, 255, 0.07);

    filter: blur(150px);

    pointer-events: none;
}


/* ---------- HEADING ---------- */

.act-method-heading {
    position: relative;

    max-width: 900px;

    margin-bottom: 100px;

    z-index: 2;
}

.act-method-heading h2 {
    max-width: 850px;

    font-size:
        clamp(44px, 5.5vw, 78px);

    line-height: 1.05;

    letter-spacing: -3px;
}

.act-method-heading h2 span {
    display: block;

    background:
        linear-gradient(
            90deg,
            #ffffff,
            #00d9ff
        );

    -webkit-background-clip: text;
    background-clip: text;

    color: transparent;
}

.act-method-heading > p:last-child {
    max-width: 620px;

    margin-top: 28px;

    color: #8997aa;

    font-size: 18px;

    line-height: 1.7;
}


/* ========================================
   ACT STEPS
======================================== */

.act-steps {
    position: relative;

    z-index: 2;
}


/* ---------- INDIVIDUAL STEP ---------- */

.act-step {
    position: relative;

    min-height: 420px;

    display: grid;

    grid-template-columns:
        300px 1fr;

    align-items: center;

    gap: 80px;

    padding: 55px 65px;

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

    border-radius: 18px;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,0.035),
            rgba(255,255,255,0.01)
        );

    overflow: hidden;

    transition:
        border-color 0.4s ease,
        transform 0.4s ease,
        box-shadow 0.4s ease;
}


/* glowing line */

.act-step::before {
    content: "";

    position: absolute;

    left: 0;
    top: 0;

    width: 3px;
    height: 0;

    background:
        linear-gradient(
            #00e5ff,
            #006cff
        );

    transition:
        height 0.5s ease;
}


/* background glow */

.act-step::after {
    content: "";

    position: absolute;

    width: 400px;
    height: 400px;

    left: -200px;
    top: 50%;

    transform:
        translateY(-50%);

    border-radius: 50%;

    background:
        rgba(0, 153, 255, 0.09);

    filter:
        blur(100px);

    opacity: 0;

    transition:
        opacity 0.5s ease;

    pointer-events: none;
}


.act-step:hover {
    transform:
        translateY(-5px);

    border-color:
        rgba(0,217,255,0.22);

    box-shadow:
        0 30px 80px
        rgba(0,0,0,0.25);
}

.act-step:hover::before {
    height: 100%;
}

.act-step:hover::after {
    opacity: 1;
}


/* ========================================
   LARGE LETTER
======================================== */

.act-letter {
    position: relative;

    z-index: 2;

    font-size:
        clamp(150px, 16vw, 230px);

    font-weight: 900;

    line-height: 0.8;

    letter-spacing: -15px;

    text-align: center;

    background:
        linear-gradient(
            145deg,
            #ffffff 5%,
            #00d9ff 48%,
            #075cff 100%
        );

    -webkit-background-clip: text;
    background-clip: text;

    color: transparent;

    filter:
        drop-shadow(
            0 0 35px
            rgba(0,174,255,0.15)
        );

    transition:
        transform 0.45s ease,
        filter 0.45s ease;
}

.act-step:hover .act-letter {
    transform:
        scale(1.05);

    filter:
        drop-shadow(
            0 0 45px
            rgba(0,174,255,0.30)
        );
}


/* ========================================
   STEP CONTENT
======================================== */

.act-step-content {
    position: relative;

    z-index: 2;

    max-width: 700px;
}

.act-step-top {
    display: flex;
    align-items: center;

    gap: 18px;

    margin-bottom: 20px;
}

.act-step-number {
    color: #00d9ff;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 3px;
}

.act-step-top h3 {
    font-size: 15px;

    text-transform: uppercase;

    letter-spacing: 5px;

    color: #dce6ef;
}

.act-step-content h4 {
    margin-bottom: 22px;

    font-size:
        clamp(27px, 3vw, 40px);

    line-height: 1.15;

    letter-spacing: -1px;
}

.act-step-content > p {
    max-width: 650px;

    color: #8997aa;

    font-size: 16px;

    line-height: 1.8;
}


/* ---------- TAGS ---------- */

.act-tags {
    margin-top: 30px;

    display: flex;

    gap: 10px;

    flex-wrap: wrap;
}

.act-tags span {
    padding:
        8px 13px;

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

    border-radius: 100px;

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

    color: #aebdca;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 1px;

    text-transform: uppercase;
}


/* ========================================
   CONNECTORS
======================================== */

.act-connector {
    height: 100px;

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

    gap: 16px;
}

.act-connector span {
    width: 80px;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(0,217,255,0.35)
        );
}

.act-connector span:last-child {
    background:
        linear-gradient(
            90deg,
            rgba(0,217,255,0.35),
            transparent
        );
}

.act-connector div {
    width: 40px;
    height: 40px;

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

    border:
        1px solid
        rgba(0,217,255,0.25);

    border-radius: 50%;

    color: #00d9ff;

    background:
        #07111e;

    box-shadow:
        0 0 25px
        rgba(0,174,255,0.08);
}


/* ========================================
   CLOSING STATEMENT
======================================== */

.act-method-closing {
    margin-top: 130px;

    text-align: center;
}

.act-method-closing p {
    margin-bottom: 22px;

    color: #8c9aaa;

    font-size: 12px;
    font-weight: 700;

    letter-spacing: 5px;
}

.act-method-closing p span {
    margin:
        0 18px;

    color: #00d9ff;
}

.act-method-closing h3 {
    font-size:
        clamp(36px, 5vw, 65px);

    letter-spacing: -2px;
}

.act-method-closing strong {
    color: #00d9ff;
}


/* ========================================
   ACT METHOD RESPONSIVE
======================================== */

@media (max-width: 900px) {

    .act-method {
        padding:
            110px 5%;
    }

    .act-method-heading {
        margin-bottom:
            65px;
    }

    .act-step {
        grid-template-columns:
            190px 1fr;

        gap: 40px;

        padding:
            45px 40px;
    }

    .act-letter {
        font-size: 150px;
    }

}


@media (max-width: 650px) {

    .act-method-heading h2 {
        letter-spacing: -2px;
    }

    .act-step {
        min-height: auto;

        grid-template-columns:
            1fr;

        gap: 35px;

        padding:
            45px 28px;
    }

    .act-letter {
        font-size: 120px;

        text-align: left;

        letter-spacing: -8px;
    }

    .act-step-content h4 {
        font-size: 28px;
    }

    .act-connector {
        height: 80px;
    }

    .act-method-closing {
        margin-top: 90px;
    }

    .act-method-closing p {
        font-size: 9px;

        letter-spacing: 2px;
    }

    .act-method-closing p span {
        margin:
            0 7px;
    }

}

/* ========================================
   SELECTED WORK
======================================== */

.work-section {
    position: relative;

    padding: 150px 5%;

    background:
        radial-gradient(
            circle at 80% 50%,
            rgba(0, 126, 255, 0.07),
            transparent 32%
        ),
        #040a12;

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


/* ---------- HEADING ---------- */

.work-heading {
    margin-bottom: 80px;

    display: grid;

    grid-template-columns:
        1fr 480px;

    align-items: end;

    gap: 60px;
}

.work-heading h2 {
    font-size:
        clamp(45px, 5.5vw, 76px);

    line-height: 1.05;

    letter-spacing: -3px;
}

.work-heading h2 span {
    display: block;

    color: #00d9ff;
}

.work-heading-text {
    color: #8997aa;

    font-size: 16px;

    line-height: 1.8;
}


/* ========================================
   FEATURED PROJECT
======================================== */

.featured-project {
    display: grid;

    grid-template-columns:
        minmax(0, 1.25fr)
        minmax(350px, 0.75fr);

    gap: 80px;

    align-items: center;

    padding: 55px;

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

    border-radius: 20px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,0.035),
            rgba(255,255,255,0.008)
        );

    overflow: hidden;
}


/* ========================================
   PROJECT VISUAL
======================================== */

.project-visual {
    position: relative;

    min-height: 520px;

    display: flex;

    align-items: center;
    justify-content: center;
}

.project-number {
    position: absolute;

    top: 0;
    left: 0;

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

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 3px;
}


/* ---------- BROWSER ---------- */

.browser-window {
    position: relative;

    z-index: 2;

    width: 100%;

    max-width: 720px;

    overflow: hidden;

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

    border-radius: 12px;

    background: #0b121c;

    box-shadow:
        0 35px 90px
        rgba(0,0,0,0.45);

    transform:
        perspective(1200px)
        rotateY(3deg)
        rotateX(2deg);

    transition:
        transform 0.5s ease,
        box-shadow 0.5s ease;
}

.featured-project:hover .browser-window {
    transform:
        perspective(1200px)
        rotateY(0)
        rotateX(0)
        translateY(-8px);

    box-shadow:
        0 45px 110px
        rgba(0,0,0,0.55);
}


/* ---------- BROWSER BAR ---------- */

.browser-top {
    height: 48px;

    padding:
        0 16px;

    display: flex;

    align-items: center;

    gap: 18px;

    background:
        #111b27;

    border-bottom:
        1px solid
        rgba(255,255,255,0.07);
}

.browser-dots {
    display: flex;

    gap: 6px;
}

.browser-dots span {
    width: 8px;
    height: 8px;

    border-radius: 50%;

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

.browser-address {
    flex: 1;

    max-width: 320px;

    padding:
        7px 14px;

    border-radius: 5px;

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

    color: #657386;

    font-size: 10px;

    text-align: center;

    letter-spacing: 0.5px;
}


/* ---------- FAKE WEBSITE ---------- */

.browser-content {
    min-height: 390px;

    padding: 70px 40px;

    display: flex;
    flex-direction: column;

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

    text-align: center;

    background:
        radial-gradient(
            circle at center,
            rgba(0, 191, 255, 0.10),
            transparent 45%
        ),
        linear-gradient(
            135deg,
            #101d2b,
            #060c14
        );
}

.browser-brand {
    font-size:
        clamp(50px, 6vw, 85px);

    font-weight: 900;

    letter-spacing: -5px;

    color: #ffffff;
}

.browser-brand span {
    display: block;

    margin-top: 4px;

    color: #00d9ff;

    font-size: 18px;

    letter-spacing: 10px;
}

.browser-content p {
    margin-top: 25px;

    color: #91a0b2;

    font-size: 15px;
}

.browser-button {
    margin-top: 30px;

    padding:
        12px 20px;

    border-radius: 5px;

    background:
        linear-gradient(
            135deg,
            #0875ff,
            #00d9ff
        );

    color: white;

    font-size: 11px;
    font-weight: 700;
}


/* ---------- GLOW ---------- */

.project-glow {
    position: absolute;

    width: 500px;
    height: 500px;

    border-radius: 50%;

    background:
        rgba(0, 126, 255, 0.12);

    filter:
        blur(120px);

    pointer-events: none;
}


/* ========================================
   PROJECT INFO
======================================== */

.project-info {
    position: relative;

    z-index: 2;
}

.project-type {
    margin-bottom: 18px;

    color: #00d9ff;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 3px;

    line-height: 1.6;
}

.project-info h3 {
    margin-bottom: 25px;

    font-size:
        clamp(42px, 5vw, 66px);

    letter-spacing: -3px;
}

.project-description {
    color: #8997aa;

    font-size: 15px;

    line-height: 1.8;
}


/* ---------- DETAILS ---------- */

.project-details {
    margin:
        38px 0;

    padding:
        28px 0;

    display: grid;

    gap: 22px;

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

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

.project-details div {
    display: flex;

    justify-content: space-between;

    gap: 20px;
}

.project-details span {
    color: #637185;

    font-size: 9px;
    font-weight: 700;

    letter-spacing: 2px;
}

.project-details strong {
    color: #cbd5df;

    font-size: 12px;

    text-align: right;
}


/* ---------- PROJECT LINK ---------- */

.project-link {
    display: inline-flex;

    align-items: center;

    gap: 12px;

    color: #ffffff;

    font-size: 12px;
    font-weight: 700;

    letter-spacing: 1px;

    text-transform: uppercase;
}

.project-link span {
    width: 35px;
    height: 35px;

    display: flex;

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

    border:
        1px solid
        rgba(0,217,255,0.35);

    border-radius: 50%;

    color: #00d9ff;

    transition:
        transform 0.25s ease,
        background 0.25s ease;
}

.project-link:hover span {
    transform:
        translate(3px, -3px);

    background:
        rgba(0,217,255,0.08);
}


/* ========================================
   FUTURE PROJECTS
======================================== */

.future-projects {
    margin-top: 65px;

    display: flex;

    align-items: center;

    gap: 25px;
}

.future-project-line {
    flex: 1;

    height: 1px;

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

.future-projects p {
    color: #596678;

    font-size: 9px;
    font-weight: 700;

    letter-spacing: 3px;

    white-space: nowrap;
}

.future-projects span {
    margin-left: 8px;

    color: #00d9ff;
}


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

@media (max-width: 1050px) {

    .work-heading {
        grid-template-columns: 1fr;

        gap: 30px;
    }

    .work-heading-text {
        max-width: 650px;
    }

    .featured-project {
        grid-template-columns: 1fr;

        gap: 45px;
    }

    .project-info {
        max-width: 700px;
    }

}


@media (max-width: 650px) {

    .work-section {
        padding:
            110px 5%;
    }

    .work-heading {
        margin-bottom: 55px;
    }

    .featured-project {
        padding:
            25px 20px 40px;

        border-radius: 14px;
    }

    .project-visual {
        min-height: 370px;
    }

    .browser-content {
        min-height: 280px;

        padding:
            45px 20px;
    }

    .browser-brand {
        font-size: 52px;
    }

    .project-details div {
        flex-direction: column;

        gap: 7px;
    }

    .project-details strong {
        text-align: left;
    }

    .future-projects {
        gap: 12px;
    }

    .future-projects p {
        font-size: 8px;

        letter-spacing: 1px;
    }

}

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

.main-cta {
    position: relative;

    min-height: 760px;

    padding: 150px 5%;

    display: flex;
    align-items: center;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 50% 50%,
            rgba(0, 111, 255, 0.12),
            transparent 38%
        ),
        linear-gradient(
            180deg,
            #050b14,
            #071321
        );

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


/* ---------- BACKGROUND GRID ---------- */

.cta-grid {
    position: absolute;

    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:
        65px 65px;

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

    pointer-events: none;
}


/* ---------- GLOWS ---------- */

.cta-glow {
    position: absolute;

    border-radius: 50%;

    filter: blur(130px);

    pointer-events: none;
}

.cta-glow-left {
    width: 450px;
    height: 450px;

    left: -230px;
    bottom: -120px;

    background:
        rgba(0, 80, 255, 0.17);
}

.cta-glow-right {
    width: 450px;
    height: 450px;

    right: -230px;
    top: -100px;

    background:
        rgba(0, 225, 255, 0.10);
}


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

.cta-content {
    position: relative;

    z-index: 2;

    max-width: 1050px;

    margin: 0 auto;

    text-align: center;
}


.cta-content .section-label {
    margin-bottom: 28px;
}


/* ---------- MAIN HEADING ---------- */

.cta-content h2 {
    font-size:
        clamp(55px, 7vw, 100px);

    line-height: 0.95;

    letter-spacing: -5px;
}

.cta-content h2 span {
    display: block;

    margin-top: 10px;

    background:
        linear-gradient(
            90deg,
            #ffffff,
            #9fefff
        );

    -webkit-background-clip: text;
    background-clip: text;

    color: transparent;
}


/* ---------- IT'S TIME TO ACT ---------- */

.cta-act-line {
    margin:
        45px auto
        0;

    display: flex;

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

    gap: 25px;
}

.cta-line {
    width: 90px;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #00d9ff
        );
}

.cta-line:last-child {
    background:
        linear-gradient(
            90deg,
            #00d9ff,
            transparent
        );
}

.cta-act-line h3 {
    font-size:
        clamp(25px, 3vw, 38px);

    font-weight: 500;

    letter-spacing: -1px;

    white-space: nowrap;
}

.cta-act-line strong {
    color: #00d9ff;

    font-weight: 800;
}


/* ---------- DESCRIPTION ---------- */

.cta-description {
    max-width: 700px;

    margin:
        35px auto
        0;

    color: #8d9bad;

    font-size: 17px;

    line-height: 1.8;
}


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

.cta-actions {
    margin-top: 45px;

    display: flex;
    flex-direction: column;

    align-items: center;

    gap: 20px;
}


.cta-primary {
    min-width: 230px;

    padding:
        18px 28px;

    display: inline-flex;

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

    gap: 16px;

    border-radius: 6px;

    background:
        linear-gradient(
            135deg,
            #0875ff,
            #00d9ff
        );

    color: #ffffff;

    font-size: 13px;
    font-weight: 700;

    letter-spacing: 0.5px;

    box-shadow:
        0 15px 45px
        rgba(0,126,255,0.24);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.cta-primary span {
    font-size: 19px;

    transition:
        transform 0.3s ease;
}

.cta-primary:hover {
    transform:
        translateY(-4px);

    box-shadow:
        0 20px 60px
        rgba(0,174,255,0.35);
}

.cta-primary:hover span {
    transform:
        translateX(5px);
}


/* ---------- EMAIL ---------- */

.cta-email {
    color: #8190a3;

    font-size: 12px;

    letter-spacing: 1px;

    transition:
        color 0.25s ease;
}

.cta-email:hover {
    color: #00d9ff;
}


/* ========================================
   SERVICE STRIP
======================================== */

.cta-services {
    margin-top: 85px;

    padding-top: 35px;

    display: flex;

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

    gap: 22px;

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

.cta-services span {
    color: #58677a;

    font-size: 9px;
    font-weight: 700;

    letter-spacing: 2px;

    text-transform: uppercase;
}

.cta-services i {
    width: 4px;
    height: 4px;

    border-radius: 50%;

    background: #00d9ff;

    opacity: 0.5;
}


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

@media (max-width: 700px) {

    .main-cta {
        min-height: 700px;

        padding:
            110px 5%;
    }

    .cta-content h2 {
        font-size:
            clamp(52px, 15vw, 75px);

        letter-spacing: -3px;
    }

    .cta-act-line {
        gap: 14px;
    }

    .cta-line {
        width: 35px;
    }

    .cta-description {
        font-size: 15px;
    }

    .cta-services {
        margin-top: 65px;

        flex-wrap: wrap;

        gap: 14px 18px;
    }

    .cta-services i {
        display: none;
    }

}

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

.site-footer {
    position: relative;

    padding:
        100px 5%
        35px;

    overflow: hidden;

    background:
        linear-gradient(
            180deg,
            #040a12,
            #02060b
        );

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


/* ---------- GLOW ---------- */

.footer-glow {
    position: absolute;

    width: 500px;
    height: 500px;

    left: -250px;
    top: -200px;

    border-radius: 50%;

    background:
        rgba(0,126,255,0.07);

    filter:
        blur(130px);

    pointer-events: none;
}


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

.footer-top {
    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        1.6fr
        0.7fr
        0.9fr
        1fr;

    gap: 70px;
}


/* ========================================
   BRAND
======================================== */

.footer-brand {
    max-width: 390px;
}

.footer-logo-link {
    display: inline-block;
}

.footer-logo {
    display: block;

    width: 210px;

    object-fit: contain;
}

.footer-tagline {
    margin-top: 20px;

    color: #00d9ff;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 4px;

    text-transform: uppercase;
}

.footer-description {
    margin-top: 22px;

    color: #69778a;

    font-size: 14px;

    line-height: 1.8;
}

.footer-email {
    margin-top: 25px;

    display: inline-flex;

    align-items: center;

    gap: 10px;

    color: #b8c4d0;

    font-size: 12px;

    transition:
        color 0.25s ease;
}

.footer-email span {
    color: #00d9ff;

    transition:
        transform 0.25s ease;
}

.footer-email:hover {
    color: #ffffff;
}

.footer-email:hover span {
    transform:
        translate(3px, -3px);
}


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

.footer-column-title {
    margin-bottom: 25px;

    color: #536174;

    font-size: 9px;
    font-weight: 700;

    letter-spacing: 3px;

    text-transform: uppercase;
}

.footer-links {
    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 15px;
}

.footer-links a {
    position: relative;

    color: #8794a5;

    font-size: 13px;

    transition:
        color 0.25s ease,
        transform 0.25s ease;
}

.footer-links a:hover {
    color: #ffffff;

    transform:
        translateX(4px);
}


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

.footer-contact h3 {
    max-width: 230px;

    font-size: 27px;

    line-height: 1.2;

    letter-spacing: -1px;
}

.footer-contact h3 span {
    display: block;

    color: #00d9ff;
}

.footer-project-link {
    margin-top: 28px;

    display: inline-flex;

    align-items: center;

    gap: 14px;

    color: #ffffff;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 1px;

    text-transform: uppercase;
}

.footer-project-link > span {
    width: 37px;
    height: 37px;

    display: flex;

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

    border:
        1px solid
        rgba(0,217,255,0.3);

    border-radius: 50%;

    color: #00d9ff;

    transition:
        transform 0.25s ease,
        background 0.25s ease,
        box-shadow 0.25s ease;
}

.footer-project-link:hover > span {
    transform:
        translateX(5px);

    background:
        rgba(0,217,255,0.08);

    box-shadow:
        0 0 25px
        rgba(0,174,255,0.1);
}


/* ========================================
   DIVIDER
======================================== */

.footer-divider {
    position: relative;

    z-index: 2;

    width: 100%;
    height: 1px;

    margin:
        80px 0
        30px;

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


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

.footer-bottom {
    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        1fr auto 1fr;

    align-items: center;

    gap: 30px;

    color: #4d5969;

    font-size: 10px;
}


/* ---------- STATUS ---------- */

.footer-bottom-center {
    display: flex;

    align-items: center;

    gap: 9px;
}

.status-dot {
    position: relative;

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #00d9ff;

    box-shadow:
        0 0 12px
        rgba(0,217,255,0.65);
}

.status-dot::after {
    content: "";

    position: absolute;

    inset: -4px;

    border:
        1px solid
        rgba(0,217,255,0.25);

    border-radius: 50%;
}


/* ---------- LEGAL ---------- */

.footer-bottom-right {
    display: flex;

    justify-content: flex-end;

    gap: 25px;
}

.footer-bottom-right a {
    transition:
        color 0.25s ease;
}

.footer-bottom-right a:hover {
    color: #ffffff;
}


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

@media (max-width: 1000px) {

    .footer-top {
        grid-template-columns:
            1.5fr 1fr 1fr;

        gap: 55px;
    }

    .footer-brand {
        grid-column:
            1 / -1;

        max-width: 500px;
    }

}


@media (max-width: 700px) {

    .site-footer {
        padding:
            80px 5%
            30px;
    }

    .footer-top {
        grid-template-columns:
            1fr 1fr;

        gap:
            50px 30px;
    }

    .footer-brand {
        grid-column:
            1 / -1;
    }

    .footer-contact {
        grid-column:
            1 / -1;
    }

    .footer-divider {
        margin:
            60px 0
            25px;
    }

    .footer-bottom {
        grid-template-columns:
            1fr;

        gap: 18px;
    }

    .footer-bottom-center {
        justify-content: flex-start;
    }

    .footer-bottom-right {
        justify-content: flex-start;
    }

}


@media (max-width: 450px) {

    .footer-top {
        grid-template-columns: 1fr;
    }

    .footer-brand,
    .footer-contact {
        grid-column: auto;
    }

    .footer-logo {
        width: 180px;
    }

}

/* ========================================
   GET A QUOTE PAGE
======================================== */

.quote-page {
    min-height: 100vh;

    background: #040a12;
}


/* ---------- BACK LINK ---------- */

.quote-back-link {
    display: inline-flex;

    align-items: center;

    gap: 12px;

    color: #9aa8b8;

    font-size: 12px;
    font-weight: 700;

    letter-spacing: 1px;

    text-transform: uppercase;

    transition:
        color 0.25s ease,
        transform 0.25s ease;
}

.quote-back-link span {
    color: #00d9ff;

    font-size: 18px;
}

.quote-back-link:hover {
    color: #ffffff;

    transform: translateX(-4px);
}


/* ========================================
   QUOTE LAYOUT
======================================== */

.quote-main {
    position: relative;

    min-height: 100vh;

    padding:
        175px 5%
        120px;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 25% 35%,
            rgba(0, 105, 255, 0.09),
            transparent 32%
        ),
        #040a12;
}


.quote-container {
    position: relative;

    z-index: 2;

    width: min(1350px, 100%);

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        minmax(320px, 0.75fr)
        minmax(550px, 1.25fr);

    gap: 100px;

    align-items: start;
}


/* ---------- GRID ---------- */

.quote-background-grid {
    position: absolute;

    inset: 0;

    background-image:
        linear-gradient(
            rgba(255,255,255,0.02) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,0.02) 1px,
            transparent 1px
        );

    background-size: 70px 70px;

    mask-image:
        linear-gradient(
            to bottom,
            black,
            transparent 80%
        );

    pointer-events: none;
}


/* ---------- GLOWS ---------- */

.quote-glow {
    position: absolute;

    border-radius: 50%;

    filter: blur(130px);

    pointer-events: none;
}

.quote-glow-one {
    width: 500px;
    height: 500px;

    left: -250px;
    top: 250px;

    background:
        rgba(0, 88, 255, 0.14);
}

.quote-glow-two {
    width: 500px;
    height: 500px;

    right: -300px;
    bottom: 100px;

    background:
        rgba(0, 217, 255, 0.08);
}


/* ========================================
   QUOTE INTRO
======================================== */

.quote-intro {
    position: sticky;

    top: 150px;
}


.quote-intro h1 {
    max-width: 520px;

    margin-top: 18px;

    font-size:
        clamp(52px, 5.5vw, 78px);

    line-height: 1;

    letter-spacing: -4px;
}

.quote-intro h1 span {
    display: block;

    margin-top: 8px;

    color: #00d9ff;
}


.quote-intro-text {
    max-width: 500px;

    margin-top: 30px;

    color: #8997aa;

    font-size: 16px;

    line-height: 1.8;
}


/* ---------- EMAIL ---------- */

.quote-contact {
    margin-top: 42px;

    padding-top: 30px;

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

.quote-contact p {
    margin-bottom: 9px;

    color: #586679;

    font-size: 9px;
    font-weight: 700;

    letter-spacing: 2px;

    text-transform: uppercase;
}

.quote-contact a {
    display: inline-flex;

    align-items: center;

    gap: 10px;

    color: #c5d0da;

    font-size: 13px;

    transition:
        color 0.25s ease;
}

.quote-contact a span {
    color: #00d9ff;
}

.quote-contact a:hover {
    color: #ffffff;
}


/* ---------- ACT MINI METHOD ---------- */

.quote-method {
    margin-top: 55px;

    display: flex;

    align-items: center;

    gap: 18px;
}

.quote-method > div {
    display: flex;

    flex-direction: column;

    gap: 5px;
}

.quote-method strong {
    color: #00d9ff;

    font-size: 23px;
}

.quote-method span {
    color: #637185;

    font-size: 8px;
    font-weight: 700;

    letter-spacing: 1px;

    text-transform: uppercase;
}

.quote-method i {
    width: 35px;
    height: 1px;

    background:
        rgba(0,217,255,0.2);
}


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

.quote-form-wrapper {
    padding:
        42px 45px
        48px;

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

    border-radius: 16px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,0.04),
            rgba(255,255,255,0.012)
        );

    box-shadow:
        0 35px 100px
        rgba(0,0,0,0.22);
}


/* ---------- FORM HEADER ---------- */

.quote-form-header {
    margin-bottom: 40px;

    padding-bottom: 20px;

    display: flex;

    justify-content: space-between;

    border-bottom:
        1px solid
        rgba(255,255,255,0.07);

    color: #607084;

    font-size: 9px;
    font-weight: 700;

    letter-spacing: 3px;
}

.quote-form-header span:last-child {
    color: #00d9ff;
}


/* ========================================
   FORM
======================================== */

.quote-form {
    display: flex;

    flex-direction: column;

    gap: 30px;
}


.form-row {
    display: grid;

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

    gap: 20px;
}


.form-group {
    display: flex;

    flex-direction: column;

    gap: 10px;
}


.form-group label,
.form-section legend {
    color: #c6d1dc;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 0.5px;
}


.form-group label span,
.form-section legend span {
    color: #00d9ff;
}


.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;

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

    border-radius: 6px;

    outline: none;

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

    color: #ffffff;

    font-family: inherit;

    font-size: 13px;

    transition:
        border-color 0.25s ease,
        background 0.25s ease,
        box-shadow 0.25s ease;
}


.form-group input,
.form-group select {
    height: 52px;

    padding:
        0 16px;
}


.form-group textarea {
    min-height: 160px;

    padding: 16px;

    resize: vertical;

    line-height: 1.6;
}


.form-group input::placeholder,
.form-group textarea::placeholder {
    color: #4e5b6c;
}


.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color:
        rgba(0,217,255,0.5);

    background:
        rgba(0,126,255,0.035);

    box-shadow:
        0 0 0 3px
        rgba(0,174,255,0.04);
}


.form-group select {
    cursor: pointer;

    color-scheme: dark;
}


.form-group small {
    color: #566477;

    font-size: 9px;
}


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

.form-section {
    padding: 0;

    border: 0;
}


.form-section legend {
    margin-bottom: 8px;
}


.form-help {
    margin-bottom: 18px;

    color: #586679;

    font-size: 10px;
}


.service-options {
    display: grid;

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

    gap: 10px;
}


.service-option {
    cursor: pointer;
}


.service-option input {
    position: absolute;

    opacity: 0;

    pointer-events: none;
}


.option-box {
    position: relative;

    min-height: 70px;

    padding:
        15px 16px;

    display: flex;

    align-items: center;

    gap: 13px;

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

    border-radius: 7px;

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

    transition:
        border-color 0.25s ease,
        background 0.25s ease,
        transform 0.25s ease;
}


.option-icon {
    width: 34px;
    height: 34px;

    display: flex;

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

    flex-shrink: 0;

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

    border-radius: 50%;

    color: #00d9ff;

    font-size: 11px;
    font-weight: 700;
}


.option-text {
    color: #9eabba;

    font-size: 11px;
    font-weight: 600;
}


.option-check {
    margin-left: auto;

    width: 20px;
    height: 20px;

    display: flex;

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

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

    border-radius: 50%;

    color: transparent;

    font-size: 10px;

    transition:
        background 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease;
}


.service-option:hover .option-box {
    transform:
        translateY(-2px);

    border-color:
        rgba(0,217,255,0.22);
}


.service-option input:checked + .option-box {
    border-color:
        rgba(0,217,255,0.5);

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


.service-option input:checked +
.option-box .option-check {
    border-color: #00d9ff;

    background: #00d9ff;

    color: #03101a;
}


/* ========================================
   SUBMIT
======================================== */

.quote-submit-area {
    margin-top: 5px;

    padding-top: 30px;

    display: flex;

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

    gap: 30px;

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


.quote-submit-area p {
    max-width: 300px;

    color: #536174;

    font-size: 9px;

    line-height: 1.6;
}


.quote-submit-button {
    min-width: 210px;

    padding:
        16px 22px;

    display: inline-flex;

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

    gap: 15px;

    border: 0;

    border-radius: 6px;

    background:
        linear-gradient(
            135deg,
            #0875ff,
            #00d9ff
        );

    color: #ffffff;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 0.5px;

    cursor: pointer;

    box-shadow:
        0 15px 40px
        rgba(0,126,255,0.2);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}


.quote-submit-button span {
    font-size: 17px;

    transition:
        transform 0.25s ease;
}


.quote-submit-button:hover {
    transform:
        translateY(-3px);

    box-shadow:
        0 20px 50px
        rgba(0,174,255,0.3);
}


.quote-submit-button:hover span {
    transform:
        translateX(4px);
}


/* ---------- STATUS ---------- */

.form-status {
    display: none;

    padding: 14px 16px;

    border-radius: 6px;

    font-size: 11px;

    line-height: 1.6;
}


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

@media (max-width: 1000px) {

    .quote-container {
        grid-template-columns: 1fr;

        gap: 60px;
    }

    .quote-intro {
        position: relative;

        top: auto;

        max-width: 700px;
    }

}


@media (max-width: 650px) {

    .quote-main {
        padding:
            130px 5%
            80px;
    }

    .quote-form-wrapper {
        padding:
            30px 20px
            35px;
    }

    .form-row,
    .service-options {
        grid-template-columns: 1fr;
    }

    .quote-submit-area {
        flex-direction: column;

        align-items: stretch;
    }

    .quote-submit-area p {
        max-width: none;
    }

    .quote-submit-button {
        width: 100%;
    }

}

/* ========================================
   ACT DIGITAL ADMIN LOGIN
======================================== */

.admin-login-page {
    min-height: 100vh;

    background: #030810;
}


.admin-login-main {
    position: relative;

    min-height: 100vh;

    padding: 120px 25px 60px;

    display: flex;
    flex-direction: column;

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

    overflow: hidden;

    background:
        radial-gradient(
            circle at 50% 45%,
            rgba(0, 126, 255, 0.10),
            transparent 35%
        ),
        #030810;
}


/* ---------- BACKGROUND ---------- */

.admin-grid {
    position: absolute;

    inset: 0;

    background-image:
        linear-gradient(
            rgba(255,255,255,0.018) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,0.018) 1px,
            transparent 1px
        );

    background-size:
        65px 65px;

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

    pointer-events: none;
}


.admin-login-glow {
    position: absolute;

    width: 600px;
    height: 600px;

    left: 50%;
    top: 50%;

    transform:
        translate(-50%, -50%);

    border-radius: 50%;

    background:
        rgba(0, 126, 255, 0.08);

    filter: blur(130px);

    pointer-events: none;
}


/* ========================================
   LOGIN CARD
======================================== */

.admin-login-card {
    position: relative;

    z-index: 2;

    width: min(460px, 100%);

    padding:
        48px 45px
        35px;

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

    border-radius: 16px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,0.045),
            rgba(255,255,255,0.012)
        );

    box-shadow:
        0 35px 100px
        rgba(0,0,0,0.4);

    backdrop-filter:
        blur(20px);
}


/* ---------- LOGO ---------- */

.admin-login-logo {
    display: block;

    width: 180px;

    margin:
        0 auto
        40px;
}


.admin-login-logo img {
    display: block;

    width: 100%;
}


/* ---------- HEADING ---------- */

.admin-login-heading {
    margin-bottom: 35px;

    text-align: center;
}


.admin-login-heading > p {
    margin-bottom: 12px;

    color: #00d9ff;

    font-size: 9px;
    font-weight: 700;

    letter-spacing: 4px;
}


.admin-login-heading h1 {
    margin-bottom: 12px;

    color: #ffffff;

    font-size: 34px;

    letter-spacing: -1px;
}


.admin-login-heading span {
    color: #6f7e90;

    font-size: 12px;
}


/* ========================================
   LOGIN FORM
======================================== */

.admin-login-form {
    display: flex;

    flex-direction: column;

    gap: 22px;
}


.admin-form-group {
    display: flex;

    flex-direction: column;

    gap: 9px;
}


.admin-form-group label {
    color: #aebac6;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 0.5px;
}


.admin-form-group input {
    width: 100%;
    height: 52px;

    padding:
        0 15px;

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

    border-radius: 6px;

    outline: none;

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

    color: #ffffff;

    font-family: inherit;

    font-size: 13px;

    transition:
        border-color 0.25s ease,
        background 0.25s ease,
        box-shadow 0.25s ease;
}


.admin-form-group input::placeholder {
    color: #455365;
}


.admin-form-group input:focus {
    border-color:
        rgba(0,217,255,0.5);

    background:
        rgba(0,126,255,0.035);

    box-shadow:
        0 0 0 3px
        rgba(0,174,255,0.04);
}


/* ---------- PASSWORD ---------- */

.admin-password-wrapper {
    position: relative;
}


.admin-password-wrapper input {
    padding-right: 75px;
}


.admin-password-toggle {
    position: absolute;

    top: 50%;
    right: 14px;

    transform:
        translateY(-50%);

    border: 0;

    background: transparent;

    color: #00d9ff;

    font-size: 8px;
    font-weight: 700;

    letter-spacing: 1px;

    cursor: pointer;
}


/* ---------- LOGIN BUTTON ---------- */

.admin-login-button {
    width: 100%;

    margin-top: 5px;

    padding:
        16px 20px;

    display: flex;

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

    gap: 14px;

    border: 0;

    border-radius: 6px;

    background:
        linear-gradient(
            135deg,
            #0875ff,
            #00d9ff
        );

    color: #ffffff;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 0.5px;

    cursor: pointer;

    box-shadow:
        0 15px 40px
        rgba(0,126,255,0.2);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        opacity 0.25s ease;
}


.admin-login-button span {
    font-size: 17px;

    transition:
        transform 0.25s ease;
}


.admin-login-button:hover {
    transform:
        translateY(-2px);

    box-shadow:
        0 20px 50px
        rgba(0,174,255,0.28);
}


.admin-login-button:hover span {
    transform:
        translateX(4px);
}


.admin-login-button:disabled {
    opacity: 0.55;

    cursor: not-allowed;

    transform: none;
}


/* ---------- STATUS ---------- */

.admin-login-status {
    display: none;

    padding:
        12px 14px;

    border-radius: 6px;

    font-size: 10px;

    line-height: 1.5;
}


.admin-login-status.error {
    display: block;

    border:
        1px solid
        rgba(255,80,80,0.22);

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

    color: #ff9c9c;
}


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

.admin-login-footer {
    margin-top: 32px;

    padding-top: 25px;

    display: flex;

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

    gap: 9px;

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

    color: #4f5d6e;

    font-size: 9px;

    letter-spacing: 0.5px;
}


.admin-security-dot {
    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: #00d9ff;

    box-shadow:
        0 0 10px
        rgba(0,217,255,0.65);
}


/* ---------- RETURN LINK ---------- */

.admin-return-link {
    position: relative;

    z-index: 2;

    margin-top: 30px;

    color: #566477;

    font-size: 10px;

    transition:
        color 0.25s ease;
}


.admin-return-link:hover {
    color: #ffffff;
}


/* ========================================
   ADMIN LOGIN MOBILE
======================================== */

@media (max-width: 520px) {

    .admin-login-main {
        padding:
            90px 15px
            40px;
    }

    .admin-login-card {
        padding:
            40px 24px
            30px;
    }

    .admin-login-logo {
        width: 160px;

        margin-bottom: 32px;
    }

}

/* ========================================
   ACT DIGITAL CRM
======================================== */

.crm-page {
    min-height: 100vh;

    background: #050a11;

    color: #ffffff;
}


.crm-layout {
    min-height: 100vh;

    display: grid;

    grid-template-columns:
        260px minmax(0, 1fr);
}


/* ========================================
   SIDEBAR
======================================== */

.crm-sidebar {
    position: fixed;

    left: 0;
    top: 0;
    bottom: 0;

    width: 260px;

    padding:
        30px 22px;

    display: flex;
    flex-direction: column;

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

    background:
        #030810;

    z-index: 10;
}


.crm-logo {
    display: block;

    width: 165px;
}


.crm-logo img {
    display: block;

    width: 100%;
}


.crm-workspace {
    margin-top: 30px;

    padding-top: 25px;

    display: flex;
    flex-direction: column;

    gap: 6px;

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


.crm-workspace span,
.crm-nav-label {
    color: #445164;

    font-size: 8px;
    font-weight: 700;

    letter-spacing: 2px;
}


.crm-workspace strong {
    color: #aebac6;

    font-size: 12px;
}


/* ---------- NAV ---------- */

.crm-nav {
    margin-top: 45px;

    display: flex;
    flex-direction: column;

    gap: 6px;
}


.crm-nav-label {
    margin:
        0 12px
        12px;
}


.crm-nav-label-secondary {
    margin-top: 30px;
}


.crm-nav-item {
    width: 100%;

    min-height: 45px;

    padding:
        0 13px;

    display: flex;

    align-items: center;

    gap: 13px;

    border: 0;

    border-radius: 6px;

    background: transparent;

    color: #697789;

    font-family: inherit;

    font-size: 11px;

    text-align: left;

    cursor: pointer;

    transition:
        color 0.2s ease,
        background 0.2s ease;
}


.crm-nav-item:hover {
    color: #ffffff;

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


.crm-nav-item.active {
    color: #ffffff;

    background:
        linear-gradient(
            90deg,
            rgba(0,126,255,0.13),
            rgba(0,217,255,0.025)
        );

    border:
        1px solid
        rgba(0,217,255,0.08);
}


.crm-nav-icon {
    width: 20px;

    color: #00d9ff;

    font-size: 14px;

    text-align: center;
}


.crm-nav-count {
    min-width: 21px;
    height: 21px;

    margin-left: auto;

    display: flex;

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

    border-radius: 50%;

    background:
        rgba(0,217,255,0.10);

    color: #00d9ff;

    font-size: 8px;
    font-weight: 700;
}


/* ---------- SIDEBAR BOTTOM ---------- */

.crm-sidebar-bottom {
    margin-top: auto;

    padding-top: 25px;

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


.crm-admin-profile {
    display: flex;

    align-items: center;

    gap: 11px;
}


.crm-admin-avatar {
    width: 35px;
    height: 35px;

    display: flex;

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

    flex-shrink: 0;

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

    border-radius: 50%;

    background:
        rgba(0,126,255,0.08);

    color: #00d9ff;

    font-size: 11px;
    font-weight: 800;
}


.crm-admin-profile > div:last-child {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 3px;
}


.crm-admin-profile strong {
    color: #b7c2cd;

    font-size: 10px;
}


.crm-admin-profile span {
    overflow: hidden;

    color: #4f5d6e;

    font-size: 8px;

    text-overflow: ellipsis;

    white-space: nowrap;
}


.crm-logout-button {
    width: 100%;

    margin-top: 20px;

    padding:
        10px 12px;

    display: flex;

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

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

    border-radius: 5px;

    background: transparent;

    color: #596779;

    font-family: inherit;

    font-size: 9px;

    cursor: pointer;

    transition:
        color 0.2s ease,
        border-color 0.2s ease;
}


.crm-logout-button:hover {
    color: #ffffff;

    border-color:
        rgba(255,255,255,0.13);
}


/* ========================================
   MAIN DASHBOARD
======================================== */

.crm-main {
    grid-column: 2;

    min-width: 0;

    padding:
        55px 50px
        80px;

    background:
        radial-gradient(
            circle at 80% 5%,
            rgba(0,126,255,0.055),
            transparent 25%
        ),
        #050a11;
}


/* ---------- HEADER ---------- */

.crm-header {
    display: flex;

    align-items: flex-end;
    justify-content: space-between;

    gap: 40px;

    margin-bottom: 45px;
}


.crm-eyebrow,
.crm-panel-label {
    margin-bottom: 9px;

    color: #00d9ff;

    font-size: 8px;
    font-weight: 700;

    letter-spacing: 3px;
}


.crm-header h1 {
    font-size:
        clamp(36px, 4vw, 54px);

    letter-spacing: -2px;
}


.crm-header-description {
    margin-top: 10px;

    color: #657386;

    font-size: 11px;
}


.crm-header-right {
    display: flex;

    align-items: center;

    gap: 15px;
}


.crm-live-status {
    display: flex;

    align-items: center;

    gap: 8px;

    color: #647285;

    font-size: 9px;

    text-transform: uppercase;

    letter-spacing: 1px;
}


.crm-live-status span {
    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: #00d9ff;

    box-shadow:
        0 0 10px
        rgba(0,217,255,0.6);
}


.crm-new-enquiry-button {
    padding:
        11px 16px;

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

    border-radius: 5px;

    background:
        rgba(0,126,255,0.06);

    color: #b8eefe;

    font-size: 9px;
    font-weight: 700;

    letter-spacing: 0.5px;

    transition:
        background 0.2s ease,
        border-color 0.2s ease;
}


.crm-new-enquiry-button:hover {
    background:
        rgba(0,126,255,0.12);

    border-color:
        rgba(0,217,255,0.35);
}


/* ========================================
   STAT CARDS
======================================== */

.crm-stats {
    display: grid;

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

    gap: 14px;

    margin-bottom: 25px;
}


.crm-stat-card {
    position: relative;

    min-height: 155px;

    padding:
        22px 22px;

    overflow: hidden;

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

    border-radius: 8px;

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


.crm-stat-highlight {
    border-color:
        rgba(0,217,255,0.15);

    background:
        linear-gradient(
            145deg,
            rgba(0,126,255,0.08),
            rgba(255,255,255,0.015)
        );
}


.crm-stat-top {
    display: flex;

    align-items: center;
    justify-content: space-between;
}


.crm-stat-top span {
    color: #637185;

    font-size: 8px;
    font-weight: 700;

    letter-spacing: 1.5px;
}


.crm-stat-top strong {
    color: #354255;

    font-size: 8px;
}


.crm-stat-card h2 {
    margin-top: 25px;

    color: #ffffff;

    font-size: 39px;

    line-height: 1;
}


.crm-stat-highlight h2 {
    color: #00d9ff;
}


.crm-stat-card p {
    margin-top: 9px;

    color: #4f5c6e;

    font-size: 9px;
}


/* ========================================
   ENQUIRY PANEL
======================================== */

.crm-enquiries-panel {
    border:
        1px solid
        rgba(255,255,255,0.06);

    border-radius: 9px;

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

    overflow: hidden;
}


.crm-panel-header {
    padding:
        25px 27px;

    display: flex;

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

    gap: 30px;

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


.crm-panel-header h2 {
    font-size: 19px;

    letter-spacing: -0.5px;
}


.crm-panel-actions select {
    height: 37px;

    padding:
        0 30px
        0 12px;

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

    border-radius: 5px;

    outline: none;

    background: #080f18;

    color: #8795a6;

    font-family: inherit;

    font-size: 9px;

    cursor: pointer;

    color-scheme: dark;
}


/* ========================================
   TABLE
======================================== */

.crm-table-wrapper {
    overflow-x: auto;
}


.crm-table {
    width: 100%;

    border-collapse: collapse;
}


.crm-table th {
    padding:
        14px 20px;

    border-bottom:
        1px solid
        rgba(255,255,255,0.05);

    color: #455366;

    font-size: 7px;
    font-weight: 700;

    letter-spacing: 1.5px;

    text-align: left;
}


.crm-table td {
    padding:
        18px 20px;

    border-bottom:
        1px solid
        rgba(255,255,255,0.045);

    color: #7d8b9d;

    font-size: 10px;

    vertical-align: middle;
}


.crm-table tbody tr {
    transition:
        background 0.2s ease;
}


.crm-table tbody tr:hover {
    background:
        rgba(255,255,255,0.018);
}


.crm-client-name {
    display: block;

    margin-bottom: 5px;

    color: #d2dbe3;

    font-size: 11px;
    font-weight: 700;
}


.crm-client-business {
    color: #4d5a6b;

    font-size: 8px;
}


.crm-service-list {
    max-width: 240px;

    line-height: 1.6;
}


.crm-status {
    display: inline-flex;

    padding:
        6px 9px;

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

    border-radius: 100px;

    font-size: 7px;
    font-weight: 700;

    letter-spacing: 0.8px;

    text-transform: uppercase;
}


.crm-status-new {
    border-color:
        rgba(0,217,255,0.22);

    background:
        rgba(0,217,255,0.06);

    color: #00d9ff;
}


.crm-status-contacted {
    color: #b8c5d2;
}


.crm-status-quote-sent {
    color: #d9c985;
}


.crm-status-won {
    color: #8ddca8;
}


.crm-status-lost {
    color: #c47777;
}


.crm-view-button {
    padding:
        7px 10px;

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

    border-radius: 4px;

    background: transparent;

    color: #8795a6;

    font-family: inherit;

    font-size: 8px;

    cursor: pointer;

    transition:
        color 0.2s ease,
        border-color 0.2s ease;
}


.crm-view-button:hover {
    color: #00d9ff;

    border-color:
        rgba(0,217,255,0.25);
}


.crm-loading-row,
.crm-empty-row {
    padding: 50px !important;

    color: #526073 !important;

    text-align: center;
}


/* ========================================
   MODAL
======================================== */

.crm-modal-overlay {
    position: fixed;

    inset: 0;

    z-index: 100;

    padding: 30px;

    display: none;

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

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

    backdrop-filter:
        blur(8px);
}


.crm-modal-overlay.open {
    display: flex;
}


.crm-modal {
    width:
        min(680px, 100%);

    max-height: 90vh;

    overflow-y: auto;

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

    border-radius: 12px;

    background: #08101a;

    box-shadow:
        0 40px 120px
        rgba(0,0,0,0.55);
}


.crm-modal-header {
    position: sticky;

    top: 0;

    z-index: 2;

    padding:
        25px 28px;

    display: flex;

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

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

    background: #08101a;
}


.crm-modal-header p {
    margin-bottom: 7px;

    color: #00d9ff;

    font-size: 7px;
    font-weight: 700;

    letter-spacing: 2px;
}


.crm-modal-header h2 {
    font-size: 23px;
}


.crm-modal-close {
    width: 34px;
    height: 34px;

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

    border-radius: 50%;

    background: transparent;

    color: #697789;

    font-size: 20px;

    cursor: pointer;
}


.crm-modal-content {
    padding:
        28px;
}


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

@media (max-width: 1050px) {

    .crm-stats {
        grid-template-columns:
            repeat(2, 1fr);
    }

}


@media (max-width: 800px) {

    .crm-layout {
        display: block;
    }

    .crm-sidebar {
        position: relative;

        width: 100%;

        min-height: auto;
    }

    .crm-nav {
        display: none;
    }

    .crm-sidebar-bottom {
        margin-top: 30px;
    }

    .crm-main {
        padding:
            35px 20px
            60px;
    }

}


@media (max-width: 600px) {

    .crm-header {
        align-items: flex-start;

        flex-direction: column;
    }

    .crm-stats {
        grid-template-columns: 1fr;
    }

    .crm-panel-header {
        align-items: flex-start;

        flex-direction: column;
    }

}

/* ========================================
   CRM ENQUIRY DETAILS
======================================== */

.crm-detail-grid {
    display: grid;

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

    gap: 12px;
}


.crm-detail-item {
    padding: 17px;

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

    border-radius: 6px;

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


.crm-detail-item span,
.crm-detail-section > span {
    display: block;

    margin-bottom: 7px;

    color: #526073;

    font-size: 7px;
    font-weight: 700;

    letter-spacing: 1.5px;
}


.crm-detail-item strong {
    color: #b7c3cf;

    font-size: 11px;

    font-weight: 600;
}


.crm-detail-section {
    margin-top: 25px;

    padding-top: 22px;

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


.crm-detail-section p {
    color: #8997a8;

    font-size: 11px;

    line-height: 1.8;

    white-space: pre-wrap;
}


@media (max-width: 550px) {

    .crm-detail-grid {
        grid-template-columns: 1fr;
    }

}

/* ========================================
   CRM LEAD MANAGEMENT
======================================== */

.crm-lead-management {
    margin-bottom: 25px;

    padding: 20px;

    border:
        1px solid
        rgba(0,217,255,0.12);

    border-radius: 8px;

    background:
        linear-gradient(
            135deg,
            rgba(0,126,255,0.06),
            rgba(255,255,255,0.015)
        );
}


.crm-lead-management-heading {
    display: flex;

    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 18px;
}


.crm-lead-management-heading > div > span {
    display: block;

    margin-bottom: 7px;

    color: #00d9ff;

    font-size: 7px;
    font-weight: 700;

    letter-spacing: 2px;
}


.crm-lead-management-heading p {
    color: #637185;

    font-size: 9px;

    line-height: 1.5;
}


.crm-status-control {
    display: grid;

    grid-template-columns:
        1fr auto;

    gap: 10px;
}


.crm-status-control select {
    min-width: 0;
    height: 42px;

    padding:
        0 13px;

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

    border-radius: 5px;

    outline: none;

    background: #07101a;

    color: #b3bfcb;

    font-family: inherit;

    font-size: 10px;

    cursor: pointer;

    color-scheme: dark;
}


.crm-status-control select:focus {
    border-color:
        rgba(0,217,255,0.4);
}


.crm-save-status-button {
    min-width: 125px;

    padding:
        0 16px;

    display: flex;

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

    gap: 10px;

    border:
        1px solid
        rgba(0,217,255,0.22);

    border-radius: 5px;

    background:
        rgba(0,126,255,0.10);

    color: #c6f5ff;

    font-family: inherit;

    font-size: 9px;
    font-weight: 700;

    cursor: pointer;

    transition:
        background 0.2s ease,
        border-color 0.2s ease;
}


.crm-save-status-button:hover {
    background:
        rgba(0,126,255,0.17);

    border-color:
        rgba(0,217,255,0.4);
}


.crm-save-status-button:disabled {
    opacity: 0.5;

    cursor: not-allowed;
}


/* ---------- STATUS MESSAGE ---------- */

.crm-status-message {
    display: none;

    margin-top: 12px;

    padding:
        10px 12px;

    border-radius: 5px;

    font-size: 9px;
}


.crm-status-message.success {
    display: block;

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

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

    color: #9fefff;
}


.crm-status-message.error {
    display: block;

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

    background:
        rgba(255,80,80,0.06);

    color: #ff9c9c;
}


/* ========================================
   CRM CONTACT ACTIONS
======================================== */

.crm-contact-actions {
    margin-bottom: 25px;

    display: flex;

    flex-wrap: wrap;

    gap: 8px;
}


.crm-contact-action {
    min-height: 38px;

    padding:
        0 13px;

    display: inline-flex;

    align-items: center;

    gap: 8px;

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

    border-radius: 5px;

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

    color: #8290a2;

    font-size: 9px;

    transition:
        color 0.2s ease,
        border-color 0.2s ease,
        background 0.2s ease;
}


.crm-contact-action span {
    color: #00d9ff;
}


.crm-contact-action:hover {
    color: #ffffff;

    border-color:
        rgba(0,217,255,0.2);

    background:
        rgba(0,126,255,0.05);
}


@media (max-width: 550px) {

    .crm-lead-management-heading {
        flex-direction: column;
    }

    .crm-status-control {
        grid-template-columns: 1fr;
    }

    .crm-save-status-button {
        min-height: 42px;
    }

}

/* ========================================
   CRM INTERNAL NOTES
======================================== */

.crm-notes-section {
    margin-top: 30px;

    padding-top: 25px;

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


/* ---------- HEADING ---------- */

.crm-notes-heading {
    display: flex;

    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 18px;
}


.crm-notes-heading > div > span {
    display: block;

    margin-bottom: 7px;

    color: #00d9ff;

    font-size: 7px;
    font-weight: 700;

    letter-spacing: 1.5px;
}


.crm-notes-heading p {
    color: #526073;

    font-size: 9px;
}


.crm-notes-count {
    padding:
        5px 8px;

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

    border-radius: 100px;

    color: #607084;

    font-size: 7px;
    font-weight: 700;

    letter-spacing: 1px;
}


/* ========================================
   ADD NOTE
======================================== */

.crm-add-note {
    padding: 15px;

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

    border-radius: 7px;

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


.crm-add-note textarea {
    width: 100%;
    min-height: 95px;

    padding: 13px;

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

    border-radius: 5px;

    outline: none;

    resize: vertical;

    background: #060d16;

    color: #c0cad4;

    font-family: inherit;

    font-size: 10px;

    line-height: 1.7;

    transition:
        border-color 0.2s ease;
}


.crm-add-note textarea::placeholder {
    color: #414f61;
}


.crm-add-note textarea:focus {
    border-color:
        rgba(0,217,255,0.35);
}


.crm-add-note-bottom {
    margin-top: 10px;

    display: flex;

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

    gap: 20px;
}


.crm-add-note-bottom > span {
    color: #465467;

    font-size: 8px;
}


.crm-save-note-button {
    min-height: 35px;

    padding:
        0 13px;

    display: inline-flex;

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

    gap: 9px;

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

    border-radius: 5px;

    background:
        rgba(0,126,255,0.07);

    color: #aeefff;

    font-family: inherit;

    font-size: 8px;
    font-weight: 700;

    cursor: pointer;

    transition:
        background 0.2s ease,
        border-color 0.2s ease;
}


.crm-save-note-button > span {
    color: #00d9ff;

    font-size: 14px;
}


.crm-save-note-button:hover {
    background:
        rgba(0,126,255,0.13);

    border-color:
        rgba(0,217,255,0.32);
}


.crm-save-note-button:disabled {
    opacity: 0.5;

    cursor: not-allowed;
}


/* ---------- SAVE MESSAGE ---------- */

.crm-note-message {
    display: none;

    margin-top: 10px;

    padding:
        9px 11px;

    border-radius: 5px;

    font-size: 8px;
}


.crm-note-message.success {
    display: block;

    border:
        1px solid
        rgba(0,217,255,0.15);

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

    color: #9fefff;
}


.crm-note-message.error {
    display: block;

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

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

    color: #ff9c9c;
}


/* ========================================
   NOTES HISTORY
======================================== */

.crm-notes-list {
    margin-top: 20px;
}


.crm-note {
    position: relative;

    display: grid;

    grid-template-columns:
        22px 1fr;

    gap: 12px;
}


.crm-note:not(:last-child) {
    padding-bottom: 22px;
}


.crm-note-marker {
    position: relative;

    display: flex;

    justify-content: center;
}


.crm-note-marker::after {
    content: "";

    position: absolute;

    top: 15px;
    bottom: -5px;

    width: 1px;

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


.crm-note:last-child
.crm-note-marker::after {
    display: none;
}


.crm-note-marker span {
    position: relative;

    z-index: 1;

    width: 8px;
    height: 8px;

    margin-top: 5px;

    border-radius: 50%;

    background: #00d9ff;

    box-shadow:
        0 0 10px
        rgba(0,217,255,0.35);
}


.crm-note-content {
    padding:
        0 0
        2px;
}


.crm-note-content > p {
    color: #a2aeba;

    font-size: 10px;

    line-height: 1.7;

    white-space: pre-wrap;
}


.crm-note-meta {
    margin-top: 9px;

    display: flex;

    align-items: center;

    gap: 8px;

    color: #465467;

    font-size: 7px;
}


.crm-note-meta i {
    width: 3px;
    height: 3px;

    border-radius: 50%;

    background: #344153;
}


/* ---------- EMPTY ---------- */

.crm-notes-empty {
    padding:
        30px 20px;

    border:
        1px dashed
        rgba(255,255,255,0.07);

    border-radius: 6px;

    text-align: center;
}


.crm-notes-empty > span {
    display: block;

    margin-bottom: 8px;

    color: #00d9ff;

    font-size: 18px;
}


.crm-notes-empty p {
    color: #697789;

    font-size: 10px;
}


.crm-notes-empty small {
    display: block;

    margin-top: 5px;

    color: #3f4c5d;

    font-size: 8px;
}


@media (max-width: 550px) {

    .crm-add-note-bottom {
        align-items: stretch;

        flex-direction: column;
    }

    .crm-save-note-button {
        min-height: 40px;
    }

}

/* ========================================
   HOW WE WORK
======================================== */

.process-section {
    position: relative;

    padding:
        120px 0;

    overflow: hidden;

    background: #050a11;

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


.process-glow {
    position: absolute;

    width: 700px;
    height: 700px;

    left: 50%;
    top: 45%;

    transform:
        translate(-50%, -50%);

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(0,126,255,0.055),
            transparent 68%
        );

    pointer-events: none;
}


/* ========================================
   HEADING
======================================== */

.process-heading {
    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        1fr 0.65fr;

    gap: 80px;

    align-items: end;

    margin-bottom: 90px;
}


.process-heading h2 {
    max-width: 700px;

    font-size:
        clamp(38px, 5vw, 66px);

    line-height: 1.02;

    letter-spacing: -2.5px;
}


.process-heading h2 span {
    display: block;

    color: #00d9ff;
}


.process-heading-text {
    max-width: 430px;

    color: #697789;

    font-size: 11px;

    line-height: 1.9;
}


/* ========================================
   PROCESS TIMELINE
======================================== */

.process-timeline {
    position: relative;

    z-index: 2;

    display: grid;

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

    gap: 0;
}


/* ---------- CONNECTING LINE ---------- */

.process-line {
    position: absolute;

    top: 28px;

    left: 10%;

    right: 10%;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            rgba(0,217,255,0.08),
            rgba(0,217,255,0.5),
            rgba(0,217,255,0.08)
        );
}


/* ========================================
   PROCESS STEP
======================================== */

.process-step {
    position: relative;

    padding:
        0 18px;

    text-align: center;
}


/* ---------- NUMBER ---------- */

.process-marker {
    position: relative;

    z-index: 3;

    width: 56px;
    height: 56px;

    margin:
        0 auto
        30px;

    display: flex;

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

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

    border-radius: 50%;

    background: #050a11;

    transition:
        border-color 0.3s ease,
        box-shadow 0.3s ease,
        transform 0.3s ease;
}


.process-marker::before {
    content: "";

    position: absolute;

    inset: 5px;

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

    border-radius: 50%;
}


.process-marker span {
    position: relative;

    z-index: 2;

    color: #00d9ff;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1px;
}


.process-step:hover
.process-marker {
    transform:
        translateY(-4px);

    border-color:
        rgba(0,217,255,0.55);

    box-shadow:
        0 0 30px
        rgba(0,217,255,0.12);
}


/* ---------- CONTENT ---------- */

.process-stage {
    margin-bottom: 12px;

    color: #00d9ff !important;

    font-size: 7px !important;

    font-weight: 700;

    letter-spacing: 2px;
}


.process-step-content h3 {
    min-height: 48px;

    margin-bottom: 15px;

    color: #dce5ed;

    font-size: 15px;

    line-height: 1.45;
}


.process-step-content > p:last-child {
    max-width: 210px;

    margin: 0 auto;

    color: #5e6c7e;

    font-size: 9px;

    line-height: 1.8;
}


/* ========================================
   PROCESS CLOSING
======================================== */

.process-closing {
    position: relative;

    z-index: 2;

    margin-top: 80px;

    padding-top: 30px;

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

    text-align: center;
}


.process-closing p {
    display: flex;

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

    flex-wrap: wrap;

    gap: 17px;

    color: #647285;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 2px;
}


.process-closing p span {
    color: #00d9ff;
}


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

@media (max-width: 1000px) {

    .process-heading {
        grid-template-columns: 1fr;

        gap: 25px;
    }


    .process-heading-text {
        max-width: 600px;
    }


    .process-timeline {
        grid-template-columns:
            repeat(3, 1fr);

        gap:
            55px 10px;
    }


    .process-line {
        display: none;
    }

}


@media (max-width: 700px) {

    .process-section {
        padding:
            85px 0;
    }


    .process-heading {
        margin-bottom: 60px;
    }


    .process-timeline {
        display: block;
    }


    .process-step {
        display: grid;

        grid-template-columns:
            60px 1fr;

        gap: 20px;

        padding: 0;

        text-align: left;
    }


    .process-step:not(:last-child) {
        padding-bottom: 50px;
    }


    .process-step:not(:last-child)::after {
        content: "";

        position: absolute;

        left: 27px;

        top: 56px;

        bottom: 0;

        width: 1px;

        background:
            linear-gradient(
                rgba(0,217,255,0.25),
                rgba(0,217,255,0.03)
            );
    }


    .process-marker {
        width: 56px;
        height: 56px;

        margin: 0;
    }


    .process-step-content {
        padding-top: 4px;
    }


    .process-step-content h3 {
        min-height: auto;
    }


    .process-step-content > p:last-child {
        max-width: none;

        margin: 0;
    }


    .process-closing {
        margin-top: 60px;
    }


    .process-closing p {
        gap: 10px;

        font-size: 7px;
    }

}

/* ========================================
   ACT DIGITAL
   WEB DEVELOPMENT PAGE
======================================== */


/* ========================================
   SERVICE NAVIGATION
======================================== */

.service-page-header {
    position: fixed;
    top: 0;
    left: 0;

    z-index: 1000;

    width: 100%;

    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.05);

    background:
        rgba(3, 8, 16, 0.82);

    backdrop-filter:
        blur(20px);
}


.service-nav-container {
    width: min(1400px, calc(100% - 80px));

    min-height: 82px;

    margin: 0 auto;

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

    gap: 40px;
}


.service-page-logo {
    width: 165px;

    flex-shrink: 0;
}


.service-page-logo img {
    display: block;

    width: 100%;
}


.service-page-nav {
    display: flex;
    align-items: center;

    gap: 35px;
}


.service-page-nav a {
    position: relative;

    color: #778596;

    font-size: 9px;
    font-weight: 600;

    letter-spacing: 0.7px;

    transition:
        color 0.25s ease;
}


.service-page-nav a::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: -8px;

    width: 0;
    height: 1px;

    background: #00d9ff;

    transition:
        width 0.25s ease;
}


.service-page-nav a:hover {
    color: #ffffff;
}


.service-page-nav a:hover::after {
    width: 100%;
}


.service-nav-cta {
    min-height: 42px;

    padding: 0 17px;

    display: inline-flex;
    align-items: center;

    gap: 12px;

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

    border-radius: 5px;

    background:
        rgba(0, 126, 255, 0.06);

    color: #c5f4ff;

    font-size: 9px;
    font-weight: 700;

    transition:
        background 0.25s ease,
        border-color 0.25s ease,
        transform 0.25s ease;
}


.service-nav-cta span {
    color: #00d9ff;

    font-size: 14px;

    transition:
        transform 0.25s ease;
}


.service-nav-cta:hover {
    transform:
        translateY(-2px);

    border-color:
        rgba(0, 217, 255, 0.4);

    background:
        rgba(0, 126, 255, 0.12);
}


.service-nav-cta:hover span {
    transform:
        translateX(3px);
}


/* ========================================
   WEB DEVELOPMENT HERO
======================================== */

.service-hero {
    position: relative;

    min-height: 100vh;

    padding:
        175px 0
        100px;

    display: flex;
    align-items: center;

    overflow: hidden;

    background:
        #030810;
}


.service-hero-grid {
    position: absolute;

    inset: 0;

    background-image:
        linear-gradient(
            rgba(255,255,255,0.018) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,0.018) 1px,
            transparent 1px
        );

    background-size:
        70px 70px;

    mask-image:
        linear-gradient(
            to bottom,
            black,
            rgba(0,0,0,0.55),
            transparent
        );

    pointer-events: none;
}


.service-hero-glow {
    position: absolute;

    width: 850px;
    height: 850px;

    right: -220px;
    top: 40%;

    transform:
        translateY(-50%);

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(0,126,255,0.12),
            rgba(0,217,255,0.035) 35%,
            transparent 70%
        );

    pointer-events: none;
}


.service-hero .section-container {
    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(0, 0.9fr)
        minmax(430px, 0.75fr);

    align-items: center;

    gap: 90px;
}


/* ---------- BREADCRUMB ---------- */

.service-breadcrumb {
    margin-bottom: 45px;

    display: flex;
    align-items: center;

    gap: 10px;

    color: #425064;

    font-size: 7px;
    font-weight: 700;

    letter-spacing: 1.7px;
}


.service-breadcrumb a {
    color: #647386;

    transition:
        color 0.2s ease;
}


.service-breadcrumb a:hover {
    color: #00d9ff;
}


.service-breadcrumb p {
    color: #00d9ff;
}


/* ---------- HERO CONTENT ---------- */

.service-hero-label {
    margin-bottom: 18px;

    color: #00d9ff;

    font-size: 8px;
    font-weight: 700;

    letter-spacing: 3px;
}


.service-hero-content h1 {
    max-width: 760px;

    color: #ffffff;

    font-size:
        clamp(58px, 7vw, 102px);

    line-height: 0.94;

    letter-spacing: -5px;
}


.service-hero-content h1 span {
    display: block;

    color: #00d9ff;
}


.service-hero-intro {
    max-width: 580px;

    margin-top: 30px;

    color: #788698;

    font-size: 13px;

    line-height: 1.9;
}


.service-hero-actions {
    margin-top: 35px;

    display: flex;
    align-items: center;

    flex-wrap: wrap;

    gap: 12px;
}


.service-primary-button {
    min-height: 50px;

    padding: 0 21px;

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

    gap: 15px;

    border-radius: 5px;

    background:
        linear-gradient(
            135deg,
            #0875ff,
            #00d9ff
        );

    color: #ffffff;

    font-size: 9px;
    font-weight: 700;

    letter-spacing: 0.5px;

    box-shadow:
        0 15px 45px
        rgba(0, 126, 255, 0.18);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}


.service-primary-button span {
    font-size: 15px;

    transition:
        transform 0.25s ease;
}


.service-primary-button:hover {
    transform:
        translateY(-3px);

    box-shadow:
        0 20px 55px
        rgba(0, 174, 255, 0.27);
}


.service-primary-button:hover span {
    transform:
        translateX(4px);
}


.service-secondary-button {
    min-height: 50px;

    padding: 0 20px;

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

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

    border-radius: 5px;

    color: #7d8b9d;

    font-size: 9px;
    font-weight: 700;

    transition:
        color 0.25s ease,
        border-color 0.25s ease,
        background 0.25s ease;
}


.service-secondary-button:hover {
    color: #ffffff;

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

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


/* ---------- HERO META ---------- */

.service-hero-meta {
    margin-top: 65px;

    display: flex;
    align-items: center;

    gap: 17px;
}


.service-hero-meta > div {
    display: flex;
    align-items: center;

    gap: 7px;
}


.service-hero-meta strong {
    color: #00d9ff;

    font-size: 7px;
}


.service-hero-meta span {
    color: #4d5b6d;

    font-size: 7px;
    font-weight: 700;

    letter-spacing: 1px;
}


.service-hero-meta i {
    width: 25px;
    height: 1px;

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


/* ========================================
   BROWSER VISUAL
======================================== */

.service-hero-visual {
    position: relative;

    min-height: 530px;

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


.web-browser-mockup {
    position: relative;

    width: 100%;
    max-width: 560px;

    overflow: hidden;

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

    border-radius: 11px;

    background: #07101a;

    box-shadow:
        0 45px 100px
        rgba(0,0,0,0.45),
        0 0 70px
        rgba(0,126,255,0.05);

    transform:
        perspective(1200px)
        rotateY(-5deg)
        rotateX(2deg);
}


/* ---------- BROWSER BAR ---------- */

.web-browser-top {
    height: 43px;

    padding: 0 13px;

    display: flex;
    align-items: center;

    gap: 14px;

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

    background: #0a121d;
}


.web-browser-dots {
    display: flex;

    gap: 5px;
}


.web-browser-dots span {
    width: 6px;
    height: 6px;

    border-radius: 50%;

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


.web-browser-address {
    flex: 1;

    max-width: 250px;

    padding:
        6px 12px;

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

    border-radius: 4px;

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

    color: #3f4e60;

    font-size: 7px;
}


/* ---------- FAKE WEBSITE ---------- */

.web-browser-screen {
    min-height: 365px;

    padding: 22px;

    background:
        radial-gradient(
            circle at 75% 25%,
            rgba(0,126,255,0.11),
            transparent 35%
        ),
        #050b13;
}


.mock-site-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
}


.mock-logo {
    width: 72px;
    height: 8px;

    border-radius: 100px;

    background:
        linear-gradient(
            90deg,
            #0875ff,
            #00d9ff
        );
}


.mock-nav-lines {
    display: flex;

    gap: 12px;
}


.mock-nav-lines span {
    width: 27px;
    height: 3px;

    border-radius: 10px;

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


.mock-hero {
    padding:
        62px 18px
        48px;
}


.mock-label {
    color: #00d9ff;

    font-size: 5px;
    font-weight: 700;

    letter-spacing: 2px;
}


.mock-title {
    margin-top: 12px;
}


.mock-title span {
    display: block;

    width: 72%;
    height: 11px;

    margin-bottom: 7px;

    border-radius: 2px;

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


.mock-title span:nth-child(2) {
    width: 58%;
}


.mock-title span:nth-child(3) {
    width: 42%;

    background: #00d9ff;
}


.mock-copy {
    margin-top: 18px;
}


.mock-copy span {
    display: block;

    width: 58%;
    height: 4px;

    margin-bottom: 6px;

    border-radius: 10px;

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


.mock-copy span:last-child {
    width: 43%;
}


.mock-button {
    width: max-content;

    margin-top: 22px;

    padding:
        8px 12px;

    border-radius: 3px;

    background:
        linear-gradient(
            135deg,
            #0875ff,
            #00d9ff
        );

    color: #ffffff;

    font-size: 5px;
    font-weight: 700;

    letter-spacing: 0.5px;
}


.mock-cards {
    display: grid;

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

    gap: 8px;
}


.mock-cards div {
    height: 65px;

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

    border-radius: 4px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,0.035),
            rgba(255,255,255,0.01)
        );
}


/* ---------- FLOATING CARDS ---------- */

.service-floating-card {
    position: absolute;

    z-index: 3;

    min-width: 145px;

    padding: 14px 16px;

    border:
        1px solid
        rgba(0,217,255,0.12);

    border-radius: 7px;

    background:
        rgba(5,12,21,0.88);

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

    backdrop-filter:
        blur(12px);
}


.service-floating-card > span {
    display: block;

    margin-bottom: 6px;

    color: #536174;

    font-size: 6px;
    font-weight: 700;

    letter-spacing: 1.5px;
}


.service-floating-card strong {
    display: block;

    color: #00d9ff;

    font-size: 11px;

    letter-spacing: 0.5px;
}


.service-floating-card p {
    margin-top: 4px;

    color: #556477;

    font-size: 7px;
}


.service-floating-card-one {
    left: -35px;
    bottom: 70px;
}


.service-floating-card-two {
    right: -25px;
    top: 65px;
}


/* ========================================
   WEB INTRO
======================================== */

.web-intro-section {
    padding:
        130px 0;

    background: #070d15;

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


.web-intro-section .section-container {
    display: grid;

    grid-template-columns:
        0.25fr 1fr;

    gap: 50px;
}


.web-intro-number {
    color:
        rgba(0,217,255,0.18);

    font-size:
        clamp(75px, 9vw, 130px);

    font-weight: 800;

    line-height: 0.8;

    letter-spacing: -7px;
}


.web-intro-content h2,
.web-conversion-heading h2,
.web-solutions-heading h2,
.web-approach-heading h2,
.web-service-cta h2 {
    color: #ffffff;

    font-size:
        clamp(38px, 5vw, 67px);

    line-height: 1.02;

    letter-spacing: -2.7px;
}


.web-intro-content h2 span,
.web-conversion-heading h2 span,
.web-solutions-heading h2 span,
.web-approach-heading h2 span,
.web-service-cta h2 span {
    display: block;

    color: #00d9ff;
}


.web-intro-copy {
    max-width: 850px;

    margin-top: 45px;

    display: grid;

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

    gap: 50px;
}


.web-intro-copy p {
    color: #6c7a8c;

    font-size: 11px;

    line-height: 1.9;
}


/* ========================================
   CONVERSION FLOW
======================================== */

.web-conversion-section {
    padding:
        120px 0;

    background: #030810;
}


.web-conversion-heading {
    margin-bottom: 70px;

    text-align: center;
}


.web-conversion-heading h2 span {
    display: inline;
}


.web-conversion-flow {
    display: grid;

    grid-template-columns:
        1fr auto
        1fr auto
        1fr auto
        1fr;

    align-items: center;

    gap: 15px;
}


.conversion-item {
    position: relative;

    min-height: 210px;

    padding:
        28px 22px;

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

    border-radius: 8px;

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

    text-align: center;

    transition:
        transform 0.3s ease,
        border-color 0.3s ease,
        background 0.3s ease;
}


.conversion-item:hover {
    transform:
        translateY(-6px);

    border-color:
        rgba(0,217,255,0.17);

    background:
        rgba(0,126,255,0.035);
}


.conversion-item-highlight {
    border-color:
        rgba(0,217,255,0.17);

    background:
        linear-gradient(
            145deg,
            rgba(0,126,255,0.08),
            rgba(0,217,255,0.02)
        );
}


.conversion-number {
    position: absolute;

    top: 15px;
    right: 15px;

    color: #344255;

    font-size: 7px;
    font-weight: 700;
}


.conversion-icon {
    width: 48px;
    height: 48px;

    margin:
        10px auto
        23px;

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

    border:
        1px solid
        rgba(0,217,255,0.15);

    border-radius: 50%;

    background:
        rgba(0,126,255,0.04);

    color: #00d9ff;

    font-size: 16px;
}


.conversion-item strong {
    display: block;

    color: #d4dde5;

    font-size: 9px;

    letter-spacing: 1.5px;
}


.conversion-item p {
    margin-top: 10px;

    color: #586679;

    font-size: 8px;

    line-height: 1.6;
}


.conversion-arrow {
    color:
        rgba(0,217,255,0.35);

    font-size: 18px;
}


/* ========================================
   WEB SOLUTIONS
======================================== */

.web-solutions-section {
    padding:
        130px 0;

    background: #070d15;
}


.web-solutions-heading {
    display: grid;

    grid-template-columns:
        1fr 0.55fr;

    align-items: end;

    gap: 80px;

    margin-bottom: 65px;
}


.web-solutions-heading > p {
    color: #687688;

    font-size: 11px;

    line-height: 1.9;
}


.web-solutions-grid {
    display: grid;

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

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

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


.web-solution-card {
    position: relative;

    min-height: 275px;

    padding:
        28px;

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

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

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

    transition:
        background 0.3s ease;
}


.web-solution-card:hover {
    background:
        rgba(0,126,255,0.035);
}


.solution-number {
    position: absolute;

    top: 22px;
    right: 22px;

    color: #344255;

    font-size: 7px;
    font-weight: 700;
}


.solution-icon {
    width: 42px;
    height: 42px;

    margin-bottom: 32px;

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

    border:
        1px solid
        rgba(0,217,255,0.13);

    border-radius: 6px;

    color: #00d9ff;

    font-size: 13px;
}


.web-solution-card h3 {
    margin-bottom: 13px;

    color: #d6dfe7;

    font-size: 14px;
}


.web-solution-card p {
    color: #596779;

    font-size: 9px;

    line-height: 1.8;
}


/* ========================================
   WEB APPROACH
======================================== */

.web-approach-section {
    padding:
        130px 0;

    background: #030810;
}


.web-approach-layout {
    display: grid;

    grid-template-columns:
        0.8fr 1fr;

    gap: 100px;
}


.web-approach-heading {
    position: sticky;

    top: 140px;

    align-self: start;
}


.web-approach-heading > p:last-child {
    max-width: 520px;

    margin-top: 28px;

    color: #687688;

    font-size: 11px;

    line-height: 1.9;
}


.web-approach-list {
    border-top:
        1px solid
        rgba(255,255,255,0.07);
}


.web-approach-item {
    padding:
        32px 0;

    display: grid;

    grid-template-columns:
        55px 1fr;

    gap: 25px;

    border-bottom:
        1px solid
        rgba(255,255,255,0.07);
}


.web-approach-item > span {
    color: #00d9ff;

    font-size: 8px;
    font-weight: 700;
}


.web-approach-item h3 {
    color: #d5dee6;

    font-size: 15px;
}


.web-approach-item p {
    max-width: 500px;

    margin-top: 10px;

    color: #5e6c7e;

    font-size: 9px;

    line-height: 1.8;
}


/* ========================================
   FINAL WEB CTA
======================================== */

.web-service-cta {
    position: relative;

    padding:
        145px 0;

    overflow: hidden;

    background: #07101a;

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


.web-service-cta-glow {
    position: absolute;

    width: 700px;
    height: 700px;

    left: 50%;
    top: 50%;

    transform:
        translate(-50%, -50%);

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(0,126,255,0.10),
            transparent 65%
        );

    pointer-events: none;
}


.web-service-cta-content {
    position: relative;

    z-index: 2;

    max-width: 850px;

    margin: 0 auto;

    text-align: center;
}


.web-service-cta-content > p:not(.section-label) {
    max-width: 560px;

    margin:
        28px auto
        32px;

    color: #687688;

    font-size: 11px;

    line-height: 1.9;
}


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

.service-page-footer {
    padding:
        65px 0
        30px;

    background: #02060b;

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


.service-footer-main {
    display: flex;

    align-items: flex-start;
    justify-content: space-between;

    gap: 50px;

    padding-bottom: 45px;
}


.service-footer-logo {
    width: 165px;
}


.service-footer-main > div:first-child p {
    margin-top: 15px;

    color: #485668;

    font-size: 9px;

    letter-spacing: 1px;
}


.service-footer-links {
    display: flex;

    flex-wrap: wrap;

    gap: 28px;
}


.service-footer-links a {
    color: #5d6b7d;

    font-size: 9px;

    transition:
        color 0.2s ease;
}


.service-footer-links a:hover {
    color: #00d9ff;
}


.service-footer-bottom {
    padding-top: 25px;

    display: flex;
    justify-content: space-between;

    gap: 30px;

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


.service-footer-bottom p {
    color: #354255;

    font-size: 8px;
}


/* ========================================
   WEB DEVELOPMENT RESPONSIVE
======================================== */

@media (max-width: 1100px) {

    .service-hero .section-container {
        grid-template-columns:
            1fr 0.8fr;

        gap: 50px;
    }


    .web-solutions-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }


    .web-approach-layout {
        gap: 60px;
    }

}


@media (max-width: 900px) {

    .service-page-nav {
        display: none;
    }


    .service-hero {
        padding-top: 150px;
    }


    .service-hero .section-container {
        grid-template-columns: 1fr;
    }


    .service-hero-visual {
        width: min(620px, 100%);

        margin: 20px auto 0;
    }


    .web-intro-section .section-container {
        grid-template-columns: 1fr;
    }


    .web-intro-number {
        font-size: 80px;
    }


    .web-conversion-flow {
        grid-template-columns:
            repeat(2, 1fr);

        gap: 12px;
    }


    .conversion-arrow {
        display: none;
    }


    .web-solutions-heading {
        grid-template-columns: 1fr;

        gap: 25px;
    }


    .web-solutions-heading > p {
        max-width: 600px;
    }


    .web-approach-layout {
        grid-template-columns: 1fr;
    }


    .web-approach-heading {
        position: static;
    }

}


@media (max-width: 650px) {

    .service-nav-container {
        width:
            calc(100% - 30px);

        min-height: 72px;
    }


    .service-page-logo {
        width: 140px;
    }


    .service-nav-cta {
        min-height: 38px;

        padding:
            0 12px;

        font-size: 7px;
    }


    .service-hero {
        min-height: auto;

        padding:
            125px 0
            80px;
    }


    .service-breadcrumb {
        margin-bottom: 30px;
    }


    .service-hero-content h1 {
        font-size:
            clamp(50px, 16vw, 72px);

        letter-spacing: -3px;
    }


    .service-hero-meta {
        margin-top: 45px;

        flex-wrap: wrap;

        gap: 10px 14px;
    }


    .service-hero-meta i {
        width: 15px;
    }


    .service-hero-visual {
        min-height: 400px;
    }


    .web-browser-mockup {
        transform: none;
    }


    .service-floating-card-one {
        left: 5px;
        bottom: 15px;
    }


    .service-floating-card-two {
        right: 5px;
        top: 15px;
    }


    .web-intro-section,
    .web-solutions-section,
    .web-approach-section {
        padding:
            90px 0;
    }


    .web-intro-copy {
        grid-template-columns: 1fr;

        gap: 20px;
    }


    .web-conversion-section {
        padding:
            90px 0;
    }


    .web-conversion-flow {
        grid-template-columns: 1fr;
    }


    .conversion-item {
        min-height: auto;
    }


    .web-solutions-grid {
        grid-template-columns: 1fr;
    }


    .web-solution-card {
        min-height: auto;
    }


    .web-service-cta {
        padding:
            100px 0;
    }


    .service-footer-main,
    .service-footer-bottom {
        flex-direction: column;
    }


    .service-footer-links {
        gap:
            15px 25px;
    }

}

/* ========================================
   ACT DIGITAL
   SOCIAL MEDIA PAGE
======================================== */


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

.social-hero {
    position: relative;

    min-height: 100vh;

    padding:
        175px 0
        100px;

    display: flex;
    align-items: center;

    overflow: hidden;

    background: #030810;
}


.social-hero-grid {
    position: absolute;

    inset: 0;

    background-image:
        linear-gradient(
            rgba(255,255,255,0.018) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,0.018) 1px,
            transparent 1px
        );

    background-size:
        70px 70px;

    mask-image:
        linear-gradient(
            to bottom,
            black,
            rgba(0,0,0,0.55),
            transparent
        );

    pointer-events: none;
}


.social-hero-glow {
    position: absolute;

    width: 900px;
    height: 900px;

    right: -280px;
    top: 45%;

    transform:
        translateY(-50%);

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(0,126,255,0.13),
            rgba(0,217,255,0.035) 38%,
            transparent 70%
        );

    pointer-events: none;
}


.social-hero .section-container {
    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(0, 0.9fr)
        minmax(430px, 0.75fr);

    align-items: center;

    gap: 90px;
}


.social-hero-content h1 {
    max-width: 760px;

    color: #ffffff;

    font-size:
        clamp(58px, 7vw, 102px);

    line-height: 0.94;

    letter-spacing: -5px;
}


.social-hero-content h1 span {
    display: block;

    color: #00d9ff;
}


.social-hero-intro {
    max-width: 580px;

    margin-top: 30px;

    color: #788698;

    font-size: 13px;

    line-height: 1.9;
}


/* ========================================
   PLATFORM ROW
======================================== */

.social-platform-row {
    margin-top: 65px;

    display: flex;
    align-items: center;

    flex-wrap: wrap;

    gap: 15px;
}


.social-platform-row span {
    color: #536174;

    font-size: 7px;
    font-weight: 700;

    letter-spacing: 1.4px;
}


.social-platform-row i {
    width: 22px;
    height: 1px;

    background:
        rgba(0,217,255,0.22);
}


/* ========================================
   SOCIAL DASHBOARD VISUAL
======================================== */

.social-hero-visual {
    position: relative;

    min-height: 580px;

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


.social-dashboard {
    position: relative;

    width: 100%;
    max-width: 540px;

    padding: 22px;

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

    border-radius: 12px;

    background:
        linear-gradient(
            145deg,
            rgba(11,21,34,0.98),
            rgba(5,11,19,0.98)
        );

    box-shadow:
        0 45px 100px
        rgba(0,0,0,0.45),
        0 0 80px
        rgba(0,126,255,0.05);

    transform:
        perspective(1200px)
        rotateY(-4deg)
        rotateX(2deg);
}


/* ---------- DASHBOARD HEADER ---------- */

.social-dashboard-top {
    display: flex;

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

    gap: 20px;

    padding-bottom: 18px;

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


.social-dashboard-label {
    display: block;

    margin-bottom: 5px;

    color: #435166;

    font-size: 6px;
    font-weight: 700;

    letter-spacing: 1.5px;
}


.social-dashboard-top strong {
    color: #dbe4eb;

    font-size: 13px;
}


.social-live-indicator {
    display: flex;

    align-items: center;

    gap: 7px;

    color: #637184;

    font-size: 6px;
    font-weight: 700;

    letter-spacing: 1px;
}


.social-live-indicator span {
    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: #00d9ff;

    box-shadow:
        0 0 10px
        rgba(0,217,255,0.7);
}


/* ========================================
   SOCIAL STATS
======================================== */

.social-stats-grid {
    margin-top: 18px;

    display: grid;

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

    gap: 8px;
}


.social-stat {
    padding: 13px;

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

    border-radius: 6px;

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


.social-stat > span {
    display: block;

    color: #455469;

    font-size: 5px;
    font-weight: 700;

    letter-spacing: 1px;
}


.social-stat strong {
    display: block;

    margin-top: 8px;

    color: #d8e1e8;

    font-size: 17px;
}


.social-stat small {
    display: block;

    margin-top: 4px;

    color: #00d9ff;

    font-size: 5px;
}


/* ========================================
   SOCIAL POST
======================================== */

.social-post-card {
    margin-top: 12px;

    overflow: hidden;

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

    border-radius: 8px;

    background:
        #080f18;
}


.social-post-header {
    padding: 13px;

    display: flex;

    align-items: center;

    gap: 10px;
}


.social-post-avatar {
    width: 30px;
    height: 30px;

    display: flex;

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

    flex-shrink: 0;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            #0875ff,
            #00d9ff
        );

    color: #ffffff;

    font-size: 10px;
    font-weight: 800;
}


.social-post-header > div:nth-child(2) {
    flex: 1;
}


.social-post-header strong {
    display: block;

    color: #b8c3cd;

    font-size: 7px;

    letter-spacing: 0.5px;
}


.social-post-header
> div:nth-child(2)
span {
    display: block;

    margin-top: 3px;

    color: #445164;

    font-size: 5px;
}


.social-post-menu {
    color: #485669;

    font-size: 10px;
}


/* ---------- COPY ---------- */

.social-post-copy {
    padding:
        0 13px
        13px;
}


.social-post-copy span {
    display: block;

    width: 90%;
    height: 4px;

    margin-bottom: 5px;

    border-radius: 10px;

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


.social-post-copy span:nth-child(2) {
    width: 74%;
}


.social-post-copy span:nth-child(3) {
    width: 52%;
}


/* ---------- IMAGE ---------- */

.social-post-image {
    min-height: 210px;

    padding: 30px;

    display: flex;

    align-items: center;

    background:
        radial-gradient(
            circle at 75% 30%,
            rgba(0,217,255,0.14),
            transparent 35%
        ),
        linear-gradient(
            135deg,
            #07111e,
            #071a2a
        );

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

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


.social-post-image-content small {
    display: block;

    margin-bottom: 12px;

    color: #00d9ff;

    font-size: 6px;
    font-weight: 700;

    letter-spacing: 2px;
}


.social-post-image-content strong {
    display: block;

    max-width: 260px;

    color: #ffffff;

    font-size: 25px;

    line-height: 1;

    letter-spacing: -1px;
}


.social-post-image-content strong span {
    display: block;

    color: #00d9ff;
}


/* ---------- ENGAGEMENT ---------- */

.social-post-engagement {
    padding: 12px 13px;

    display: flex;

    align-items: center;

    gap: 18px;
}


.social-post-engagement span {
    color: #536174;

    font-size: 6px;
    font-weight: 700;
}


/* ========================================
   FLOATING SOCIAL CARDS
======================================== */

.social-floating-card {
    position: absolute;

    z-index: 5;

    min-width: 130px;

    padding: 14px 16px;

    border:
        1px solid
        rgba(0,217,255,0.13);

    border-radius: 7px;

    background:
        rgba(5,12,21,0.9);

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

    backdrop-filter:
        blur(12px);
}


.social-floating-card > span {
    display: block;

    margin-bottom: 6px;

    color: #4e5d70;

    font-size: 6px;
    font-weight: 700;

    letter-spacing: 1.3px;
}


.social-floating-card strong {
    display: block;

    color: #00d9ff;

    font-size: 15px;
}


.social-floating-card p {
    margin-top: 4px;

    color: #536174;

    font-size: 7px;
}


.social-floating-one {
    left: -35px;
    bottom: 80px;
}


.social-floating-two {
    right: -25px;
    top: 80px;
}


/* ========================================
   SOCIAL INTRO
======================================== */

.social-intro-section {
    padding:
        130px 0;

    background: #070d15;

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


.social-intro-section
.section-container {
    display: grid;

    grid-template-columns:
        0.25fr 1fr;

    gap: 50px;
}


/* ========================================
   SOCIAL STRATEGY
======================================== */

.social-strategy-section {
    padding:
        125px 0;

    background: #030810;
}


.social-strategy-heading {
    margin-bottom: 70px;

    text-align: center;
}


.social-strategy-heading h2 {
    color: #ffffff;

    font-size:
        clamp(38px, 5vw, 67px);

    line-height: 1.02;

    letter-spacing: -2.7px;
}


.social-strategy-heading h2 span {
    display: block;

    color: #00d9ff;
}


.social-strategy-flow {
    display: grid;

    grid-template-columns:
        1fr auto
        1fr auto
        1fr auto
        1fr;

    align-items: center;

    gap: 15px;
}


.social-strategy-flow article {
    position: relative;

    min-height: 215px;

    padding: 30px 22px;

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

    border-radius: 8px;

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

    text-align: center;

    transition:
        transform 0.3s ease,
        border-color 0.3s ease,
        background 0.3s ease;
}


.social-strategy-flow article:hover {
    transform:
        translateY(-6px);

    border-color:
        rgba(0,217,255,0.18);

    background:
        rgba(0,126,255,0.035);
}


.social-strategy-flow
.social-flow-highlight {
    border-color:
        rgba(0,217,255,0.18);

    background:
        linear-gradient(
            145deg,
            rgba(0,126,255,0.08),
            rgba(0,217,255,0.02)
        );
}


.social-flow-number {
    position: absolute;

    top: 15px;
    right: 15px;

    color: #344255;

    font-size: 7px;
    font-weight: 700;
}


.social-flow-icon {
    width: 48px;
    height: 48px;

    margin:
        8px auto
        22px;

    display: flex;

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

    border:
        1px solid
        rgba(0,217,255,0.15);

    border-radius: 50%;

    color: #00d9ff;

    font-size: 16px;

    background:
        rgba(0,126,255,0.04);
}


.social-strategy-flow h3 {
    color: #d7e0e8;

    font-size: 10px;

    letter-spacing: 1.5px;
}


.social-strategy-flow article p {
    margin-top: 11px;

    color: #596779;

    font-size: 8px;

    line-height: 1.7;
}


.social-flow-arrow {
    color:
        rgba(0,217,255,0.32);

    font-size: 18px;
}


/* ========================================
   SOCIAL SERVICES
======================================== */

.social-services-section {
    padding:
        130px 0;

    background: #070d15;
}


.social-services-grid {
    display: grid;

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

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

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


.social-service-card {
    position: relative;

    min-height: 275px;

    padding: 28px;

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

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

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

    transition:
        background 0.3s ease,
        transform 0.3s ease;
}


.social-service-card:hover {
    background:
        rgba(0,126,255,0.035);
}


.social-service-card h3 {
    margin-bottom: 13px;

    color: #d6dfe7;

    font-size: 14px;
}


.social-service-card p {
    color: #596779;

    font-size: 9px;

    line-height: 1.8;
}


/* ========================================
   CONSISTENCY SECTION
======================================== */

.social-consistency-section {
    padding:
        135px 0;

    background: #030810;
}


.social-consistency-layout {
    display: grid;

    grid-template-columns:
        0.8fr 1fr;

    align-items: center;

    gap: 110px;
}


.social-consistency-content h2 {
    color: #ffffff;

    font-size:
        clamp(38px, 5vw, 67px);

    line-height: 1.02;

    letter-spacing: -2.7px;
}


.social-consistency-content h2 span {
    display: block;

    color: #00d9ff;
}


.social-consistency-content
> p:not(.section-label) {
    max-width: 540px;

    margin:
        28px 0
        30px;

    color: #687688;

    font-size: 11px;

    line-height: 1.9;
}


/* ========================================
   SOCIAL CHANNEL STACK
======================================== */

.social-channel-stack {
    position: relative;

    display: grid;

    gap: 10px;
}


.social-channel-card {
    min-height: 85px;

    padding:
        15px 18px;

    display: grid;

    grid-template-columns:
        45px 1fr auto;

    align-items: center;

    gap: 16px;

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

    border-radius: 7px;

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

    transition:
        transform 0.25s ease,
        border-color 0.25s ease,
        background 0.25s ease;
}


.social-channel-card:hover {
    transform:
        translateX(-7px);

    border-color:
        rgba(0,217,255,0.18);

    background:
        rgba(0,126,255,0.035);
}


.social-channel-icon {
    width: 42px;
    height: 42px;

    display: flex;

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

    border:
        1px solid
        rgba(0,217,255,0.15);

    border-radius: 6px;

    background:
        rgba(0,126,255,0.04);

    color: #00d9ff;

    font-size: 12px;
    font-weight: 700;
}


.social-channel-card strong {
    display: block;

    color: #d2dce5;

    font-size: 12px;
}


.social-channel-card
> div:nth-child(2)
span {
    display: block;

    margin-top: 6px;

    color: #475568;

    font-size: 6px;
    font-weight: 700;

    letter-spacing: 1px;
}


.social-channel-card small {
    color: #00d9ff;

    font-size: 6px;
    font-weight: 700;

    letter-spacing: 1px;
}


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

@media (max-width: 1100px) {

    .social-hero .section-container {
        grid-template-columns:
            1fr 0.8fr;

        gap: 50px;
    }


    .social-services-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }


    .social-consistency-layout {
        gap: 60px;
    }

}


@media (max-width: 900px) {

    .social-hero {
        padding-top: 150px;
    }


    .social-hero .section-container {
        grid-template-columns: 1fr;
    }


    .social-hero-visual {
        width:
            min(620px, 100%);

        margin:
            25px auto 0;
    }


    .social-intro-section
    .section-container {
        grid-template-columns: 1fr;
    }


    .social-strategy-flow {
        grid-template-columns:
            repeat(2, 1fr);

        gap: 12px;
    }


    .social-flow-arrow {
        display: none;
    }


    .social-consistency-layout {
        grid-template-columns: 1fr;
    }

}


@media (max-width: 650px) {

    .social-hero {
        min-height: auto;

        padding:
            125px 0
            80px;
    }


    .social-hero-content h1 {
        font-size:
            clamp(50px, 16vw, 72px);

        letter-spacing: -3px;
    }


    .social-platform-row {
        margin-top: 45px;

        gap: 10px;
    }


    .social-platform-row i {
        width: 12px;
    }


    .social-hero-visual {
        min-height: 490px;
    }


    .social-dashboard {
        transform: none;

        padding: 15px;
    }


    .social-stats-grid {
        gap: 5px;
    }


    .social-stat {
        padding: 10px 8px;
    }


    .social-stat strong {
        font-size: 14px;
    }


    .social-post-image {
        min-height: 175px;

        padding: 22px;
    }


    .social-post-image-content strong {
        font-size: 21px;
    }


    .social-floating-one {
        left: 0;
        bottom: 5px;
    }


    .social-floating-two {
        right: 0;
        top: 45px;
    }


    .social-intro-section,
    .social-services-section,
    .social-consistency-section {
        padding:
            90px 0;
    }


    .social-strategy-section {
        padding:
            90px 0;
    }


    .social-strategy-flow {
        grid-template-columns: 1fr;
    }


    .social-strategy-flow article {
        min-height: auto;
    }


    .social-services-grid {
        grid-template-columns: 1fr;
    }


    .social-service-card {
        min-height: auto;
    }


    .social-channel-card {
        grid-template-columns:
            42px 1fr;
    }


    .social-channel-card small {
        display: none;
    }

}

/* ========================================
   ACT DIGITAL
   DIGITAL MARKETING PAGE
======================================== */


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

.marketing-hero {
    position: relative;
    min-height: 100vh;
    padding: 175px 0 100px;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: #030810;
}

.marketing-hero-grid {
    position: absolute;
    inset: 0;

    background-image:
        linear-gradient(
            rgba(255,255,255,0.018) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,0.018) 1px,
            transparent 1px
        );

    background-size: 70px 70px;

    mask-image:
        linear-gradient(
            to bottom,
            black,
            rgba(0,0,0,0.55),
            transparent
        );

    pointer-events: none;
}

.marketing-hero-glow {
    position: absolute;

    width: 900px;
    height: 900px;

    right: -280px;
    top: 45%;

    transform: translateY(-50%);

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(0,126,255,0.14),
            rgba(0,217,255,0.035) 38%,
            transparent 70%
        );

    pointer-events: none;
}

.marketing-hero .section-container {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(0, 0.9fr)
        minmax(430px, 0.75fr);

    align-items: center;
    gap: 90px;
}


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

.marketing-hero-content h1 {
    max-width: 780px;

    color: #ffffff;

    font-size:
        clamp(58px, 7vw, 102px);

    line-height: 0.94;
    letter-spacing: -5px;
}

.marketing-hero-content h1 span {
    display: block;
    color: #00d9ff;
}

.marketing-hero-intro {
    max-width: 580px;

    margin-top: 30px;

    color: #788698;

    font-size: 13px;
    line-height: 1.9;
}


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

.marketing-hero-meta {
    margin-top: 65px;

    display: flex;
    align-items: center;

    gap: 17px;
}

.marketing-hero-meta > div {
    display: flex;
    align-items: center;

    gap: 8px;
}

.marketing-hero-meta div span {
    color: #00d9ff;

    font-size: 7px;
    font-weight: 700;
}

.marketing-hero-meta div strong {
    color: #536174;

    font-size: 7px;
    font-weight: 700;

    letter-spacing: 1.3px;
}

.marketing-hero-meta i {
    width: 28px;
    height: 1px;

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


/* ========================================
   MARKETING DASHBOARD
======================================== */

.marketing-hero-visual {
    position: relative;

    min-height: 580px;

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

.marketing-dashboard {
    position: relative;

    width: 100%;
    max-width: 550px;

    padding: 22px;

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

    border-radius: 12px;

    background:
        linear-gradient(
            145deg,
            rgba(11,21,34,0.98),
            rgba(5,11,19,0.98)
        );

    box-shadow:
        0 45px 100px
        rgba(0,0,0,0.45),
        0 0 80px
        rgba(0,126,255,0.05);

    transform:
        perspective(1200px)
        rotateY(-4deg)
        rotateX(2deg);
}


/* ---------- DASHBOARD HEADER ---------- */

.marketing-dashboard-header {
    padding-bottom: 18px;

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

    gap: 20px;

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

.marketing-dashboard-header > div:first-child span {
    display: block;

    margin-bottom: 5px;

    color: #435166;

    font-size: 6px;
    font-weight: 700;

    letter-spacing: 1.5px;
}

.marketing-dashboard-header strong {
    color: #dbe4eb;

    font-size: 13px;
}

.marketing-period {
    display: flex;
    align-items: center;

    gap: 7px;

    color: #637184;

    font-size: 6px;
    font-weight: 700;

    letter-spacing: 1px;
}

.marketing-period span {
    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: #00d9ff;

    box-shadow:
        0 0 10px
        rgba(0,217,255,0.7);
}


/* ========================================
   MAIN RESULT
======================================== */

.marketing-main-result {
    padding: 24px 0;

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

    gap: 25px;
}

.marketing-main-result > div:first-child > span {
    display: block;

    margin-bottom: 8px;

    color: #4b596c;

    font-size: 6px;
    font-weight: 700;

    letter-spacing: 1.3px;
}

.marketing-main-result > div:first-child strong {
    display: block;

    color: #ffffff;

    font-size: 36px;

    letter-spacing: -2px;
}

.marketing-main-result > div:first-child small {
    display: block;

    margin-top: 6px;

    color: #00d9ff;

    font-size: 6px;
}


/* ---------- GROWTH CIRCLE ---------- */

.marketing-growth-circle {
    width: 90px;
    height: 90px;

    display: flex;
    flex-direction: column;

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

    flex-shrink: 0;

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

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(0,126,255,0.08),
            transparent 68%
        );

    box-shadow:
        inset 0 0 30px
        rgba(0,126,255,0.035);
}

.marketing-growth-circle span {
    color: #00d9ff;

    font-size: 20px;
    font-weight: 700;
}

.marketing-growth-circle small {
    margin-top: 3px;

    color: #4c5a6d;

    font-size: 5px;
    font-weight: 700;

    letter-spacing: 1px;
}


/* ========================================
   CHART
======================================== */

.marketing-chart {
    padding: 15px;

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

    border-radius: 7px;

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

.marketing-chart-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.marketing-chart-top span {
    color: #556376;

    font-size: 6px;
    font-weight: 700;

    letter-spacing: 1.2px;
}

.marketing-chart-top small {
    color: #374558;

    font-size: 5px;
}

.marketing-chart-area {
    position: relative;

    height: 145px;

    margin-top: 15px;
}


/* ---------- GRID ---------- */

.marketing-chart-grid {
    position: absolute;

    inset: 0;

    display: flex;
    flex-direction: column;

    justify-content: space-between;
}

.marketing-chart-grid i {
    width: 100%;
    height: 1px;

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


/* ---------- BARS ---------- */

.marketing-bars {
    position: absolute;

    inset: 0;

    display: flex;
    align-items: flex-end;

    gap: 8px;

    padding:
        0 4px;
}

.marketing-bars span {
    flex: 1;

    min-width: 4px;

    border-radius:
        2px 2px 0 0;

    background:
        linear-gradient(
            to top,
            rgba(8,117,255,0.25),
            #00d9ff
        );

    box-shadow:
        0 0 10px
        rgba(0,217,255,0.06);
}


/* ========================================
   KPI GRID
======================================== */

.marketing-kpi-grid {
    margin-top: 10px;

    display: grid;

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

    gap: 8px;
}

.marketing-kpi-grid > div {
    padding: 12px;

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

    border-radius: 6px;

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

.marketing-kpi-grid span {
    display: block;

    color: #455469;

    font-size: 5px;
    font-weight: 700;

    letter-spacing: 1px;
}

.marketing-kpi-grid strong {
    display: block;

    margin-top: 7px;

    color: #d8e1e8;

    font-size: 15px;
}

.marketing-kpi-grid small {
    display: block;

    margin-top: 4px;

    color: #00d9ff;

    font-size: 5px;
}


/* ========================================
   FLOATING CARDS
======================================== */

.marketing-floating-card {
    position: absolute;

    z-index: 5;

    min-width: 135px;

    padding: 14px 16px;

    border:
        1px solid
        rgba(0,217,255,0.13);

    border-radius: 7px;

    background:
        rgba(5,12,21,0.9);

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

    backdrop-filter:
        blur(12px);
}

.marketing-floating-card > span {
    display: block;

    margin-bottom: 6px;

    color: #4e5d70;

    font-size: 6px;
    font-weight: 700;

    letter-spacing: 1.3px;
}

.marketing-floating-card strong {
    display: block;

    color: #00d9ff;

    font-size: 14px;
}

.marketing-floating-card p {
    margin-top: 4px;

    color: #536174;

    font-size: 7px;
}

.marketing-floating-one {
    left: -35px;
    bottom: 75px;
}

.marketing-floating-two {
    right: -25px;
    top: 85px;
}


/* ========================================
   MARKETING INTRO
======================================== */

.marketing-intro-section {
    padding: 130px 0;

    background: #070d15;

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

.marketing-intro-section .section-container {
    display: grid;

    grid-template-columns:
        0.25fr 1fr;

    gap: 50px;
}


/* ========================================
   GROWTH FUNNEL
======================================== */

.marketing-funnel-section {
    padding: 125px 0;

    background: #030810;
}

.marketing-section-heading {
    margin-bottom: 70px;

    text-align: center;
}

.marketing-section-heading h2 {
    color: #ffffff;

    font-size:
        clamp(38px, 5vw, 67px);

    line-height: 1.02;

    letter-spacing: -2.7px;
}

.marketing-section-heading h2 span {
    display: block;

    color: #00d9ff;
}

.marketing-funnel {
    display: grid;

    grid-template-columns:
        1fr auto
        1fr auto
        1fr auto
        1fr;

    align-items: center;

    gap: 15px;
}

.marketing-funnel article {
    position: relative;

    min-height: 215px;

    padding: 30px 22px;

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

    border-radius: 8px;

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

    text-align: center;

    transition:
        transform 0.3s ease,
        border-color 0.3s ease,
        background 0.3s ease;
}

.marketing-funnel article:hover {
    transform:
        translateY(-6px);

    border-color:
        rgba(0,217,255,0.18);

    background:
        rgba(0,126,255,0.035);
}

.marketing-funnel
.marketing-funnel-highlight {
    border-color:
        rgba(0,217,255,0.18);

    background:
        linear-gradient(
            145deg,
            rgba(0,126,255,0.08),
            rgba(0,217,255,0.02)
        );
}

.marketing-funnel-number {
    position: absolute;

    top: 15px;
    right: 15px;

    color: #344255;

    font-size: 7px;
    font-weight: 700;
}

.marketing-funnel-icon {
    width: 48px;
    height: 48px;

    margin:
        8px auto
        22px;

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

    border:
        1px solid
        rgba(0,217,255,0.15);

    border-radius: 50%;

    background:
        rgba(0,126,255,0.04);

    color: #00d9ff;

    font-size: 16px;
}

.marketing-funnel h3 {
    color: #d7e0e8;

    font-size: 10px;

    letter-spacing: 1.5px;
}

.marketing-funnel article p {
    margin-top: 11px;

    color: #596779;

    font-size: 8px;

    line-height: 1.7;
}

.marketing-funnel-arrow {
    color:
        rgba(0,217,255,0.32);

    font-size: 18px;
}


/* ========================================
   MARKETING SERVICES
======================================== */

.marketing-services-section {
    padding: 130px 0;

    background: #070d15;
}

.marketing-services-grid {
    display: grid;

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

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

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

.marketing-service-card {
    position: relative;

    min-height: 275px;

    padding: 28px;

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

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

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

    transition:
        background 0.3s ease,
        transform 0.3s ease;
}

.marketing-service-card:hover {
    background:
        rgba(0,126,255,0.035);
}

.marketing-service-card h3 {
    margin-bottom: 13px;

    color: #d6dfe7;

    font-size: 14px;
}

.marketing-service-card p {
    color: #596779;

    font-size: 9px;

    line-height: 1.8;
}


/* ========================================
   DATA SECTION
======================================== */

.marketing-data-section {
    padding: 135px 0;

    background: #030810;
}

.marketing-data-layout {
    display: grid;

    grid-template-columns:
        0.8fr 1fr;

    align-items: center;

    gap: 110px;
}

.marketing-data-content h2 {
    color: #ffffff;

    font-size:
        clamp(38px, 5vw, 67px);

    line-height: 1.02;

    letter-spacing: -2.7px;
}

.marketing-data-content h2 span {
    display: block;

    color: #00d9ff;
}

.marketing-data-content
> p:not(.section-label) {
    max-width: 530px;

    margin-top: 25px;

    color: #687688;

    font-size: 11px;

    line-height: 1.9;
}


/* ========================================
   METRICS PANEL
======================================== */

.marketing-metrics-panel {
    padding: 30px;

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

    border-radius: 10px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,0.025),
            rgba(255,255,255,0.008)
        );
}

.marketing-metric-row {
    display: flex;

    align-items: flex-end;
    justify-content: space-between;

    gap: 20px;
}

.marketing-metric-row:not(:first-child) {
    margin-top: 28px;
}

.marketing-metric-row span {
    display: block;

    margin-bottom: 6px;

    color: #4c5a6d;

    font-size: 6px;
    font-weight: 700;

    letter-spacing: 1.3px;
}

.marketing-metric-row strong {
    color: #d8e1e8;

    font-size: 19px;
}

.marketing-metric-row small {
    color: #00d9ff;

    font-size: 7px;
    font-weight: 700;
}

.marketing-metric-bar {
    width: 100%;
    height: 3px;

    margin-top: 10px;

    overflow: hidden;

    border-radius: 20px;

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

.marketing-metric-bar span {
    display: block;

    height: 100%;

    border-radius: 20px;

    background:
        linear-gradient(
            90deg,
            #0875ff,
            #00d9ff
        );

    box-shadow:
        0 0 15px
        rgba(0,217,255,0.15);
}


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

@media (max-width: 1100px) {

    .marketing-hero .section-container {
        grid-template-columns:
            1fr 0.8fr;

        gap: 50px;
    }

    .marketing-services-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }

    .marketing-data-layout {
        gap: 60px;
    }

}


@media (max-width: 900px) {

    .marketing-hero {
        padding-top: 150px;
    }

    .marketing-hero .section-container {
        grid-template-columns: 1fr;
    }

    .marketing-hero-visual {
        width: min(620px, 100%);

        margin: 25px auto 0;
    }

    .marketing-intro-section
    .section-container {
        grid-template-columns: 1fr;
    }

    .marketing-funnel {
        grid-template-columns:
            repeat(2, 1fr);

        gap: 12px;
    }

    .marketing-funnel-arrow {
        display: none;
    }

    .marketing-data-layout {
        grid-template-columns: 1fr;
    }

}


@media (max-width: 650px) {

    .marketing-hero {
        min-height: auto;

        padding:
            125px 0
            80px;
    }

    .marketing-hero-content h1 {
        font-size:
            clamp(50px, 16vw, 72px);

        letter-spacing: -3px;
    }

    .marketing-hero-meta {
        margin-top: 45px;

        flex-wrap: wrap;

        gap: 10px 14px;
    }

    .marketing-hero-meta i {
        width: 15px;
    }

    .marketing-hero-visual {
        min-height: 520px;
    }

    .marketing-dashboard {
        padding: 15px;

        transform: none;
    }

    .marketing-main-result
    > div:first-child strong {
        font-size: 30px;
    }

    .marketing-growth-circle {
        width: 75px;
        height: 75px;
    }

    .marketing-growth-circle span {
        font-size: 17px;
    }

    .marketing-chart-area {
        height: 115px;
    }

    .marketing-bars {
        gap: 4px;
    }

    .marketing-kpi-grid {
        gap: 5px;
    }

    .marketing-kpi-grid > div {
        padding: 10px 7px;
    }

    .marketing-kpi-grid strong {
        font-size: 13px;
    }

    .marketing-floating-one {
        left: 0;
        bottom: 5px;
    }

    .marketing-floating-two {
        right: 0;
        top: 45px;
    }

    .marketing-intro-section,
    .marketing-services-section,
    .marketing-data-section {
        padding: 90px 0;
    }

    .marketing-funnel-section {
        padding: 90px 0;
    }

    .marketing-funnel {
        grid-template-columns: 1fr;
    }

    .marketing-funnel article {
        min-height: auto;
    }

    .marketing-services-grid {
        grid-template-columns: 1fr;
    }

    .marketing-service-card {
        min-height: auto;
    }

    .marketing-metrics-panel {
        padding: 22px 18px;
    }

}

/* ========================================
   ACT DIGITAL
   BRANDING & DESIGN PAGE
======================================== */


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

.branding-hero {
    position: relative;
    min-height: 100vh;
    padding: 175px 0 100px;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: #030810;
}

.branding-hero-grid {
    position: absolute;
    inset: 0;

    background-image:
        linear-gradient(
            rgba(255,255,255,0.018) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,0.018) 1px,
            transparent 1px
        );

    background-size: 70px 70px;

    mask-image:
        linear-gradient(
            to bottom,
            black,
            rgba(0,0,0,0.55),
            transparent
        );

    pointer-events: none;
}

.branding-hero-glow {
    position: absolute;

    width: 900px;
    height: 900px;

    right: -280px;
    top: 45%;

    transform: translateY(-50%);

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(0,126,255,0.13),
            rgba(0,217,255,0.035) 38%,
            transparent 70%
        );

    pointer-events: none;
}

.branding-hero .section-container {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(0, 0.9fr)
        minmax(430px, 0.75fr);

    align-items: center;

    gap: 90px;
}


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

.branding-hero-content h1 {
    max-width: 780px;

    color: #ffffff;

    font-size:
        clamp(58px, 7vw, 102px);

    line-height: 0.94;

    letter-spacing: -5px;
}

.branding-hero-content h1 span {
    display: block;

    color: #00d9ff;
}

.branding-hero-intro {
    max-width: 580px;

    margin-top: 30px;

    color: #788698;

    font-size: 13px;

    line-height: 1.9;
}


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

.branding-hero-meta {
    margin-top: 65px;

    display: flex;
    align-items: center;

    flex-wrap: wrap;

    gap: 15px;
}

.branding-hero-meta span {
    color: #536174;

    font-size: 7px;
    font-weight: 700;

    letter-spacing: 1.4px;
}

.branding-hero-meta i {
    width: 22px;
    height: 1px;

    background:
        rgba(0,217,255,0.22);
}


/* ========================================
   BRAND BOARD
======================================== */

.branding-hero-visual {
    position: relative;

    min-height: 580px;

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

.brand-board {
    position: relative;

    width: 100%;
    max-width: 550px;

    padding: 24px;

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

    border-radius: 12px;

    background:
        linear-gradient(
            145deg,
            rgba(11,21,34,0.98),
            rgba(5,11,19,0.98)
        );

    box-shadow:
        0 45px 100px
        rgba(0,0,0,0.45),
        0 0 80px
        rgba(0,126,255,0.05);

    transform:
        perspective(1200px)
        rotateY(-4deg)
        rotateX(2deg);
}


/* ---------- HEADER ---------- */

.brand-board-header {
    padding-bottom: 18px;

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

    gap: 20px;

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

.brand-board-header span {
    display: block;

    margin-bottom: 5px;

    color: #435166;

    font-size: 6px;
    font-weight: 700;

    letter-spacing: 1.5px;
}

.brand-board-header strong {
    color: #dbe4eb;

    font-size: 13px;
}

.brand-board-header small {
    color: #00d9ff;

    font-size: 6px;
    font-weight: 700;

    letter-spacing: 1px;
}


/* ========================================
   LOGO CONCEPT
======================================== */

.brand-logo-concept {
    min-height: 155px;

    padding: 25px 10px;

    display: flex;
    align-items: center;

    gap: 25px;

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

.brand-concept-mark {
    width: 95px;
    height: 95px;

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

    flex-shrink: 0;

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

    border-radius: 16px;

    background:
        linear-gradient(
            135deg,
            rgba(8,117,255,0.18),
            rgba(0,217,255,0.04)
        );

    color: #00d9ff;

    font-size: 48px;
    font-weight: 900;

    letter-spacing: -4px;

    box-shadow:
        inset 0 0 40px
        rgba(0,126,255,0.05);
}

.brand-logo-concept > div:last-child span {
    display: block;

    margin-bottom: 8px;

    color: #455469;

    font-size: 6px;
    font-weight: 700;

    letter-spacing: 1.4px;
}

.brand-logo-concept > div:last-child strong {
    display: block;

    color: #ffffff;

    font-size: 30px;

    line-height: 0.95;

    letter-spacing: -1.5px;
}

.brand-logo-concept > div:last-child strong b {
    display: block;

    color: #00d9ff;
}


/* ========================================
   BOARD SECTIONS
======================================== */

.brand-board-section {
    padding-top: 18px;
}

.brand-board-section + .brand-board-section {
    margin-top: 18px;

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

.brand-board-label {
    display: block;

    margin-bottom: 11px;

    color: #455469;

    font-size: 6px;
    font-weight: 700;

    letter-spacing: 1.4px;
}


/* ========================================
   COLOUR SYSTEM
======================================== */

.brand-colours {
    display: grid;

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

    gap: 7px;
}

.brand-colour {
    position: relative;

    height: 60px;

    overflow: hidden;

    border-radius: 5px;

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

.brand-colour span {
    position: absolute;

    left: 8px;
    bottom: 7px;

    font-size: 5px;
    font-weight: 700;
}

.colour-one {
    background: #0875ff;
}

.colour-two {
    background: #00d9ff;
}

.colour-three {
    background: #07101a;
}

.colour-four {
    background: #f4f7fa;
}

.colour-one span,
.colour-three span {
    color:
        rgba(255,255,255,0.75);
}

.colour-two span {
    color:
        rgba(0,20,30,0.7);
}

.colour-four span {
    color:
        rgba(0,0,0,0.55);
}


/* ========================================
   TYPOGRAPHY PREVIEW
======================================== */

.brand-type-preview {
    display: grid;

    grid-template-columns:
        70px 1fr;

    align-items: center;

    gap: 18px;
}

.brand-type-preview > div:first-child {
    height: 70px;

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

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

    border-radius: 6px;

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

.brand-type-preview
> div:first-child strong {
    color: #00d9ff;

    font-size: 25px;
}

.brand-type-preview
> div:last-child strong {
    display: block;

    color: #d7e0e8;

    font-size: 13px;
}

.brand-type-preview
> div:last-child span {
    display: block;

    margin-top: 6px;

    color: #586679;

    font-size: 6px;

    letter-spacing: 1px;
}

.brand-type-preview
> div:last-child small {
    display: block;

    margin-top: 5px;

    color: #3f4d60;

    font-size: 6px;

    letter-spacing: 1px;
}


/* ========================================
   FLOATING BRAND CARDS
======================================== */

.branding-floating-card {
    position: absolute;

    z-index: 5;

    min-width: 145px;

    padding: 14px 16px;

    border:
        1px solid
        rgba(0,217,255,0.13);

    border-radius: 7px;

    background:
        rgba(5,12,21,0.9);

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

    backdrop-filter:
        blur(12px);
}

.branding-floating-card > span {
    display: block;

    margin-bottom: 6px;

    color: #4e5d70;

    font-size: 6px;
    font-weight: 700;

    letter-spacing: 1.3px;
}

.branding-floating-card strong {
    display: block;

    color: #00d9ff;

    font-size: 12px;
}

.branding-floating-card p {
    margin-top: 4px;

    color: #536174;

    font-size: 7px;
}

.branding-floating-one {
    left: -35px;
    bottom: 65px;
}

.branding-floating-two {
    right: -25px;
    top: 75px;
}


/* ========================================
   BRANDING INTRO
======================================== */

.branding-intro-section {
    padding: 130px 0;

    background: #070d15;

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

.branding-intro-section .section-container {
    display: grid;

    grid-template-columns:
        0.25fr 1fr;

    gap: 50px;
}


/* ========================================
   BRAND JOURNEY
======================================== */

.branding-journey-section {
    padding: 125px 0;

    background: #030810;
}

.branding-section-heading {
    margin-bottom: 70px;

    text-align: center;
}

.branding-section-heading h2 {
    color: #ffffff;

    font-size:
        clamp(38px, 5vw, 67px);

    line-height: 1.02;

    letter-spacing: -2.7px;
}

.branding-section-heading h2 span {
    display: block;

    color: #00d9ff;
}

.branding-journey {
    display: grid;

    grid-template-columns:
        1fr auto
        1fr auto
        1fr auto
        1fr;

    align-items: center;

    gap: 15px;
}

.branding-journey article {
    position: relative;

    min-height: 215px;

    padding: 30px 22px;

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

    border-radius: 8px;

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

    text-align: center;

    transition:
        transform 0.3s ease,
        border-color 0.3s ease,
        background 0.3s ease;
}

.branding-journey article:hover {
    transform:
        translateY(-6px);

    border-color:
        rgba(0,217,255,0.18);

    background:
        rgba(0,126,255,0.035);
}

.branding-journey
.branding-journey-highlight {
    border-color:
        rgba(0,217,255,0.18);

    background:
        linear-gradient(
            145deg,
            rgba(0,126,255,0.08),
            rgba(0,217,255,0.02)
        );
}

.branding-journey-number {
    position: absolute;

    top: 15px;
    right: 15px;

    color: #344255;

    font-size: 7px;
    font-weight: 700;
}

.branding-journey-icon {
    width: 48px;
    height: 48px;

    margin:
        8px auto
        22px;

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

    border:
        1px solid
        rgba(0,217,255,0.15);

    border-radius: 50%;

    background:
        rgba(0,126,255,0.04);

    color: #00d9ff;

    font-size: 16px;
}

.branding-journey h3 {
    color: #d7e0e8;

    font-size: 10px;

    letter-spacing: 1.5px;
}

.branding-journey article p {
    margin-top: 11px;

    color: #596779;

    font-size: 8px;

    line-height: 1.7;
}

.branding-journey-arrow {
    color:
        rgba(0,217,255,0.32);

    font-size: 18px;
}


/* ========================================
   BRANDING SERVICES
======================================== */

.branding-services-section {
    padding: 130px 0;

    background: #070d15;
}

.branding-services-grid {
    display: grid;

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

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

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

.branding-service-card {
    position: relative;

    min-height: 275px;

    padding: 28px;

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

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

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

    transition:
        background 0.3s ease;
}

.branding-service-card:hover {
    background:
        rgba(0,126,255,0.035);
}

.branding-service-card h3 {
    margin-bottom: 13px;

    color: #d6dfe7;

    font-size: 14px;
}

.branding-service-card p {
    color: #596779;

    font-size: 9px;

    line-height: 1.8;
}


/* ========================================
   BRAND SYSTEM
======================================== */

.branding-system-section {
    padding: 135px 0;

    background: #030810;
}

.branding-system-layout {
    display: grid;

    grid-template-columns:
        0.75fr 1fr;

    align-items: center;

    gap: 100px;
}

.branding-system-content h2 {
    color: #ffffff;

    font-size:
        clamp(38px, 5vw, 67px);

    line-height: 1.02;

    letter-spacing: -2.7px;
}

.branding-system-content h2 span {
    display: block;

    color: #00d9ff;
}

.branding-system-content
> p:not(.section-label) {
    max-width: 530px;

    margin:
        28px 0
        30px;

    color: #687688;

    font-size: 11px;

    line-height: 1.9;
}


/* ========================================
   BRAND APPLICATION GRID
======================================== */

.branding-application-grid {
    display: grid;

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

    gap: 10px;
}

.brand-application {
    position: relative;

    min-height: 180px;

    padding: 22px;

    overflow: hidden;

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

    border-radius: 8px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,0.025),
            rgba(255,255,255,0.008)
        );
}

.brand-application > span {
    color: #4d5b6e;

    font-size: 6px;
    font-weight: 700;

    letter-spacing: 1.4px;
}

.brand-application-large {
    grid-row:
        span 2;

    min-height: 370px;

    display: flex;
    flex-direction: column;

    justify-content: center;

    background:
        radial-gradient(
            circle at 70% 25%,
            rgba(0,217,255,0.10),
            transparent 35%
        ),
        linear-gradient(
            145deg,
            #081421,
            #050b13
        );
}

.brand-application-large strong {
    margin-top: 25px;

    color: #ffffff;

    font-size: 37px;

    line-height: 0.95;

    letter-spacing: -2px;
}

.brand-application-large strong b {
    display: block;

    color: #00d9ff;
}

.brand-application-large small {
    margin-top: 15px;

    color: #455367;

    font-size: 6px;
    font-weight: 700;

    letter-spacing: 1.5px;
}


/* ---------- SOCIAL SHAPE ---------- */

.brand-social-shape {
    width: 80px;
    height: 80px;

    margin:
        25px auto 0;

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

    border-radius: 18px;

    background:
        linear-gradient(
            135deg,
            #0875ff,
            #00d9ff
        );

    color: #ffffff;

    font-size: 35px;
    font-weight: 900;

    box-shadow:
        0 15px 40px
        rgba(0,126,255,0.16);
}


/* ---------- MINI PALETTE ---------- */

.brand-mini-palette {
    margin-top: 28px;

    display: flex;

    gap: 7px;
}

.brand-mini-palette i {
    flex: 1;

    height: 65px;

    border-radius: 5px;
}

.brand-mini-palette i:nth-child(1) {
    background: #0875ff;
}

.brand-mini-palette i:nth-child(2) {
    background: #00d9ff;
}

.brand-mini-palette i:nth-child(3) {
    background: #111c29;
}


/* ---------- TYPOGRAPHY ---------- */

.brand-application-wide {
    grid-column:
        1 / -1;

    min-height: 145px;
}

.brand-type-large {
    display: block;

    margin-top: 16px;

    color: #00d9ff;

    font-size: 45px;

    line-height: 1;
}

.brand-application-wide p {
    margin-top: 10px;

    color: #5b697c;

    font-size: 7px;
    font-weight: 700;

    letter-spacing: 2px;
}


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

@media (max-width: 1100px) {

    .branding-hero .section-container {
        grid-template-columns:
            1fr 0.8fr;

        gap: 50px;
    }

    .branding-services-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }

    .branding-system-layout {
        gap: 55px;
    }

}


@media (max-width: 900px) {

    .branding-hero {
        padding-top: 150px;
    }

    .branding-hero .section-container {
        grid-template-columns: 1fr;
    }

    .branding-hero-visual {
        width:
            min(620px, 100%);

        margin:
            25px auto 0;
    }

    .branding-intro-section
    .section-container {
        grid-template-columns: 1fr;
    }

    .branding-journey {
        grid-template-columns:
            repeat(2, 1fr);

        gap: 12px;
    }

    .branding-journey-arrow {
        display: none;
    }

    .branding-system-layout {
        grid-template-columns: 1fr;
    }

}


@media (max-width: 650px) {

    .branding-hero {
        min-height: auto;

        padding:
            125px 0
            80px;
    }

    .branding-hero-content h1 {
        font-size:
            clamp(50px, 16vw, 72px);

        letter-spacing: -3px;
    }

    .branding-hero-meta {
        margin-top: 45px;

        gap: 10px;
    }

    .branding-hero-meta i {
        width: 12px;
    }

    .branding-hero-visual {
        min-height: 520px;
    }

    .brand-board {
        padding: 16px;

        transform: none;
    }

    .brand-logo-concept {
        gap: 15px;
    }

    .brand-concept-mark {
        width: 72px;
        height: 72px;

        font-size: 35px;
    }

    .brand-logo-concept
    > div:last-child strong {
        font-size: 23px;
    }

    .brand-colour {
        height: 50px;
    }

    .branding-floating-one {
        left: 0;
        bottom: 0;
    }

    .branding-floating-two {
        right: 0;
        top: 40px;
    }

    .branding-intro-section,
    .branding-services-section,
    .branding-system-section {
        padding: 90px 0;
    }

    .branding-journey-section {
        padding: 90px 0;
    }

    .branding-journey {
        grid-template-columns: 1fr;
    }

    .branding-journey article {
        min-height: auto;
    }

    .branding-services-grid {
        grid-template-columns: 1fr;
    }

    .branding-service-card {
        min-height: auto;
    }

    .branding-application-grid {
        grid-template-columns: 1fr;
    }

    .brand-application-large {
        grid-row: auto;

        min-height: 270px;
    }

    .brand-application-wide {
        grid-column: auto;
    }

}

/* ========================================
   ACT DIGITAL
   DIGITAL SUPPORT PAGE
======================================== */


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

.support-hero {
    position: relative;
    min-height: 100vh;
    padding: 175px 0 100px;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: #030810;
}

.support-hero-grid {
    position: absolute;
    inset: 0;

    background-image:
        linear-gradient(
            rgba(255,255,255,0.018) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,0.018) 1px,
            transparent 1px
        );

    background-size: 70px 70px;

    mask-image:
        linear-gradient(
            to bottom,
            black,
            rgba(0,0,0,0.55),
            transparent
        );

    pointer-events: none;
}

.support-hero-glow {
    position: absolute;
    width: 900px;
    height: 900px;
    right: -280px;
    top: 45%;
    transform: translateY(-50%);
    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(0,126,255,0.13),
            rgba(0,217,255,0.035) 38%,
            transparent 70%
        );

    pointer-events: none;
}

.support-hero .section-container {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(0, 0.9fr)
        minmax(430px, 0.75fr);

    align-items: center;
    gap: 90px;
}


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

.support-hero-content h1 {
    max-width: 780px;

    color: #ffffff;

    font-size:
        clamp(58px, 7vw, 102px);

    line-height: 0.94;
    letter-spacing: -5px;
}

.support-hero-content h1 span {
    display: block;
    color: #00d9ff;
}

.support-hero-intro {
    max-width: 580px;

    margin-top: 30px;

    color: #788698;

    font-size: 13px;
    line-height: 1.9;
}


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

.support-hero-meta {
    margin-top: 65px;

    display: flex;
    align-items: center;

    flex-wrap: wrap;

    gap: 14px;
}

.support-hero-meta > div {
    display: flex;
    align-items: center;

    gap: 7px;

    color: #536174;

    font-size: 7px;
    font-weight: 700;

    letter-spacing: 1.3px;
}

.support-hero-meta > div span {
    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: #00d9ff;

    box-shadow:
        0 0 9px
        rgba(0,217,255,0.6);
}

.support-hero-meta > i {
    width: 24px;
    height: 1px;

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


/* ========================================
   SUPPORT CONSOLE
======================================== */

.support-hero-visual {
    position: relative;

    min-height: 600px;

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

.support-console {
    position: relative;

    width: 100%;
    max-width: 550px;

    padding: 22px;

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

    border-radius: 12px;

    background:
        linear-gradient(
            145deg,
            rgba(11,21,34,0.98),
            rgba(5,11,19,0.98)
        );

    box-shadow:
        0 45px 100px
        rgba(0,0,0,0.45),
        0 0 80px
        rgba(0,126,255,0.05);

    transform:
        perspective(1200px)
        rotateY(-4deg)
        rotateX(2deg);
}


/* ========================================
   CONSOLE HEADER
======================================== */

.support-console-header {
    padding-bottom: 18px;

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

    gap: 20px;

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

.support-console-header
> div:first-child span {
    display: block;

    margin-bottom: 5px;

    color: #435166;

    font-size: 6px;
    font-weight: 700;

    letter-spacing: 1.5px;
}

.support-console-header strong {
    color: #dbe4eb;
    font-size: 13px;
}

.support-console-status {
    display: flex;
    align-items: center;

    gap: 7px;

    color: #00d9ff;

    font-size: 6px;
    font-weight: 700;

    letter-spacing: 1px;
}

.support-console-status span {
    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: #00d9ff;

    box-shadow:
        0 0 10px
        rgba(0,217,255,0.7);
}


/* ========================================
   SYSTEM HEALTH
======================================== */

.support-overview {
    padding: 23px 0;

    display: grid;

    grid-template-columns:
        115px 1fr;

    align-items: center;

    gap: 25px;

    border-bottom:
        1px solid
        rgba(255,255,255,0.05);
}

.support-health {
    display: flex;
    align-items: center;
    justify-content: center;
}

.support-health-ring {
    width: 100px;
    height: 100px;

    padding: 5px;

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

    border-radius: 50%;

    background:
        conic-gradient(
            #00d9ff 0deg,
            #0875ff 360deg
        );

    box-shadow:
        0 0 30px
        rgba(0,217,255,0.08);
}

.support-health-ring > div {
    width: 88px;
    height: 88px;

    display: flex;
    flex-direction: column;

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

    border-radius: 50%;

    background: #07101a;
}

.support-health-ring strong {
    color: #ffffff;

    font-size: 22px;
}

.support-health-ring span {
    margin-top: 3px;

    color: #00d9ff;

    font-size: 5px;
    font-weight: 700;

    letter-spacing: 1px;
}

.support-overview-info > span {
    display: block;

    margin-bottom: 7px;

    color: #465468;

    font-size: 6px;
    font-weight: 700;

    letter-spacing: 1.3px;
}

.support-overview-info strong {
    display: block;

    color: #d7e0e8;

    font-size: 14px;
}

.support-overview-info p {
    max-width: 270px;

    margin-top: 7px;

    color: #596779;

    font-size: 7px;

    line-height: 1.7;
}


/* ========================================
   SYSTEM LIST
======================================== */

.support-system-list {
    padding: 13px 0;

    border-bottom:
        1px solid
        rgba(255,255,255,0.05);
}

.support-system-row {
    min-height: 54px;

    padding: 8px 5px;

    display: grid;

    grid-template-columns:
        38px 1fr auto;

    align-items: center;

    gap: 11px;
}

.support-system-row
+ .support-system-row {
    border-top:
        1px solid
        rgba(255,255,255,0.035);
}

.support-system-icon {
    width: 34px;
    height: 34px;

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

    border:
        1px solid
        rgba(0,217,255,0.12);

    border-radius: 5px;

    background:
        rgba(0,126,255,0.04);

    color: #00d9ff;

    font-size: 7px;
    font-weight: 800;
}

.support-system-row strong {
    display: block;

    color: #bfc9d2;

    font-size: 9px;
}

.support-system-row
> div:nth-child(2) span {
    display: block;

    margin-top: 3px;

    color: #455367;

    font-size: 5px;

    letter-spacing: 0.8px;
}

.support-system-row small {
    color: #00d9ff;

    font-size: 5px;
    font-weight: 700;

    letter-spacing: 0.6px;
}


/* ========================================
   RECENT ACTIVITY
======================================== */

.support-activity {
    padding-top: 16px;
}

.support-activity-header {
    margin-bottom: 8px;

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

.support-activity-header span {
    color: #455367;

    font-size: 6px;
    font-weight: 700;

    letter-spacing: 1.2px;
}

.support-activity-header small {
    color: #00d9ff;

    font-size: 5px;
    font-weight: 700;
}

.support-activity-row {
    min-height: 47px;

    display: grid;

    grid-template-columns:
        10px 1fr auto;

    align-items: center;

    gap: 10px;
}

.support-activity-row
+ .support-activity-row {
    border-top:
        1px solid
        rgba(255,255,255,0.035);
}

.support-activity-dot {
    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: #00d9ff;

    box-shadow:
        0 0 8px
        rgba(0,217,255,0.5);
}

.support-activity-row strong {
    display: block;

    color: #9eabb8;

    font-size: 7px;
}

.support-activity-row
div small {
    display: block;

    margin-top: 3px;

    color: #414f62;

    font-size: 5px;
}

.support-activity-row time {
    color: #465468;

    font-size: 5px;
}


/* ========================================
   FLOATING STATUS CARDS
======================================== */

.support-floating-card {
    position: absolute;

    z-index: 5;

    min-width: 145px;

    padding: 14px 16px;

    border:
        1px solid
        rgba(0,217,255,0.13);

    border-radius: 7px;

    background:
        rgba(5,12,21,0.9);

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

    backdrop-filter:
        blur(12px);
}

.support-floating-card > span {
    display: block;

    margin-bottom: 6px;

    color: #4e5d70;

    font-size: 6px;
    font-weight: 700;

    letter-spacing: 1.3px;
}

.support-floating-card strong {
    display: block;

    color: #00d9ff;

    font-size: 13px;
}

.support-floating-card p {
    margin-top: 4px;

    color: #536174;

    font-size: 7px;
}

.support-floating-one {
    left: -35px;
    bottom: 70px;
}

.support-floating-two {
    right: -25px;
    top: 75px;
}


/* ========================================
   SUPPORT INTRO
======================================== */

.support-intro-section {
    padding: 130px 0;

    background: #070d15;

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

.support-intro-section
.section-container {
    display: grid;

    grid-template-columns:
        0.25fr 1fr;

    gap: 50px;
}


/* ========================================
   SUPPORT PROCESS
======================================== */

.support-process-section {
    padding: 125px 0;

    background: #030810;
}

.support-section-heading {
    margin-bottom: 70px;

    text-align: center;
}

.support-section-heading h2 {
    color: #ffffff;

    font-size:
        clamp(38px, 5vw, 67px);

    line-height: 1.02;

    letter-spacing: -2.7px;
}

.support-section-heading h2 span {
    display: block;

    color: #00d9ff;
}

.support-process {
    display: grid;

    grid-template-columns:
        1fr auto
        1fr auto
        1fr auto
        1fr;

    align-items: center;

    gap: 15px;
}

.support-process article {
    position: relative;

    min-height: 215px;

    padding: 30px 22px;

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

    border-radius: 8px;

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

    text-align: center;

    transition:
        transform 0.3s ease,
        border-color 0.3s ease,
        background 0.3s ease;
}

.support-process article:hover {
    transform: translateY(-6px);

    border-color:
        rgba(0,217,255,0.18);

    background:
        rgba(0,126,255,0.035);
}

.support-process
.support-process-highlight {
    border-color:
        rgba(0,217,255,0.18);

    background:
        linear-gradient(
            145deg,
            rgba(0,126,255,0.08),
            rgba(0,217,255,0.02)
        );
}

.support-process-number {
    position: absolute;

    top: 15px;
    right: 15px;

    color: #344255;

    font-size: 7px;
    font-weight: 700;
}

.support-process-icon {
    width: 48px;
    height: 48px;

    margin:
        8px auto
        22px;

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

    border:
        1px solid
        rgba(0,217,255,0.15);

    border-radius: 50%;

    background:
        rgba(0,126,255,0.04);

    color: #00d9ff;

    font-size: 16px;
}

.support-process h3 {
    color: #d7e0e8;

    font-size: 10px;

    letter-spacing: 1.5px;
}

.support-process article p {
    margin-top: 11px;

    color: #596779;

    font-size: 8px;

    line-height: 1.7;
}

.support-process-arrow {
    color:
        rgba(0,217,255,0.32);

    font-size: 18px;
}


/* ========================================
   SUPPORT SERVICES
======================================== */

.support-services-section {
    padding: 130px 0;

    background: #070d15;
}

.support-services-grid {
    display: grid;

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

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

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

.support-service-card {
    position: relative;

    min-height: 275px;

    padding: 28px;

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

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

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

    transition:
        background 0.3s ease;
}

.support-service-card:hover {
    background:
        rgba(0,126,255,0.035);
}

.support-service-card h3 {
    margin-bottom: 13px;

    color: #d6dfe7;

    font-size: 14px;
}

.support-service-card p {
    color: #596779;

    font-size: 9px;

    line-height: 1.8;
}


/* ========================================
   STATUS / PARTNER SECTION
======================================== */

.support-status-section {
    padding: 135px 0;

    background: #030810;
}

.support-status-layout {
    display: grid;

    grid-template-columns:
        0.8fr 1fr;

    align-items: center;

    gap: 110px;
}

.support-status-content h2 {
    color: #ffffff;

    font-size:
        clamp(38px, 5vw, 67px);

    line-height: 1.02;

    letter-spacing: -2.7px;
}

.support-status-content h2 span {
    display: block;

    color: #00d9ff;
}

.support-status-content
> p:not(.section-label) {
    max-width: 530px;

    margin-top: 24px;

    color: #687688;

    font-size: 11px;

    line-height: 1.9;
}

.support-status-content
.service-secondary-button {
    margin-top: 30px;
}


/* ========================================
   STATUS PANEL
======================================== */

.support-status-panel {
    padding: 28px;

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

    border-radius: 10px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,0.025),
            rgba(255,255,255,0.008)
        );
}

.support-status-panel-header {
    padding-bottom: 22px;

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

    gap: 20px;

    border-bottom:
        1px solid
        rgba(255,255,255,0.05);
}

.support-status-panel-header
> div span {
    display: block;

    margin-bottom: 5px;

    color: #455367;

    font-size: 6px;
    font-weight: 700;

    letter-spacing: 1.3px;
}

.support-status-panel-header
> div strong {
    color: #d7e0e8;

    font-size: 13px;
}

.support-status-panel-header
> small {
    color: #00d9ff;

    font-size: 5px;
    font-weight: 700;

    letter-spacing: 0.7px;
}


/* ---------- STATUS ROW ---------- */

.support-status-item {
    margin-top: 23px;

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

    gap: 20px;
}

.support-status-item > div {
    display: flex;
    align-items: center;

    gap: 9px;
}

.support-status-dot {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #00d9ff;

    box-shadow:
        0 0 9px
        rgba(0,217,255,0.55);
}

.support-status-item strong {
    color: #adb9c4;

    font-size: 9px;
}

.support-status-item small {
    color: #00d9ff;

    font-size: 5px;
    font-weight: 700;

    letter-spacing: 0.8px;
}


/* ---------- STATUS BAR ---------- */

.support-status-bar {
    width: 100%;
    height: 3px;

    margin-top: 10px;

    overflow: hidden;

    border-radius: 20px;

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

.support-status-bar span {
    display: block;

    height: 100%;

    border-radius: 20px;

    background:
        linear-gradient(
            90deg,
            #0875ff,
            #00d9ff
        );

    box-shadow:
        0 0 15px
        rgba(0,217,255,0.15);
}


/* ---------- PANEL FOOTER ---------- */

.support-status-footer {
    margin-top: 28px;

    padding-top: 18px;

    display: grid;

    grid-template-columns:
        auto 1fr auto;

    align-items: center;

    gap: 9px;

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

.support-status-footer > span {
    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: #00d9ff;

    box-shadow:
        0 0 8px
        rgba(0,217,255,0.6);
}

.support-status-footer p {
    color: #536174;

    font-size: 6px;
    font-weight: 700;

    letter-spacing: 1.2px;
}

.support-status-footer small {
    color: #00d9ff;

    font-size: 6px;
    font-weight: 700;
}


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

@media (max-width: 1100px) {

    .support-hero .section-container {
        grid-template-columns:
            1fr 0.8fr;

        gap: 50px;
    }

    .support-services-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }

    .support-status-layout {
        gap: 60px;
    }

}


@media (max-width: 900px) {

    .support-hero {
        padding-top: 150px;
    }

    .support-hero .section-container {
        grid-template-columns: 1fr;
    }

    .support-hero-visual {
        width:
            min(620px, 100%);

        margin:
            25px auto 0;
    }

    .support-intro-section
    .section-container {
        grid-template-columns: 1fr;
    }

    .support-process {
        grid-template-columns:
            repeat(2, 1fr);

        gap: 12px;
    }

    .support-process-arrow {
        display: none;
    }

    .support-status-layout {
        grid-template-columns: 1fr;
    }

}


@media (max-width: 650px) {

    .support-hero {
        min-height: auto;

        padding:
            125px 0
            80px;
    }

    .support-hero-content h1 {
        font-size:
            clamp(50px, 16vw, 72px);

        letter-spacing: -3px;
    }

    .support-hero-meta {
        margin-top: 45px;

        gap: 10px;
    }

    .support-hero-meta > i {
        width: 12px;
    }

    .support-hero-visual {
        min-height: 570px;
    }

    .support-console {
        padding: 15px;

        transform: none;
    }

    .support-overview {
        grid-template-columns:
            90px 1fr;

        gap: 15px;
    }

    .support-health-ring {
        width: 82px;
        height: 82px;
    }

    .support-health-ring > div {
        width: 70px;
        height: 70px;
    }

    .support-health-ring strong {
        font-size: 18px;
    }

    .support-floating-one {
        left: 0;
        bottom: 0;
    }

    .support-floating-two {
        right: 0;
        top: 40px;
    }

    .support-intro-section,
    .support-services-section,
    .support-status-section {
        padding: 90px 0;
    }

    .support-process-section {
        padding: 90px 0;
    }

    .support-process {
        grid-template-columns: 1fr;
    }

    .support-process article {
        min-height: auto;
    }

    .support-services-grid {
        grid-template-columns: 1fr;
    }

    .support-service-card {
        min-height: auto;
    }

    .support-status-panel {
        padding: 22px 18px;
    }

    .support-status-panel-header {
        align-items: flex-start;
        flex-direction: column;
    }

}

/* ========================================
   FIX QUOTE DROPDOWN OPTIONS
======================================== */

select option {
    background: #0b1520;
    color: #ffffff;
}

select option:checked {
    background: #0875ff;
    color: #ffffff;
}

/* ========================================
   SERVICE PAGES - MOBILE NAVIGATION
======================================== */


/* HIDDEN ON DESKTOP */

.service-menu-toggle {
    display: none;
}


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

@media (max-width: 900px) {

    .service-page-header {
        height: 78px;
    }

    .service-nav-container {
        position: relative;
    }


    /* ---------- NAVIGATION PANEL ---------- */

    .service-page-nav {
        position: fixed;

        top: 78px;
        left: 0;
        right: 0;

        z-index: 999;

        display: flex;
        flex-direction: column;
        align-items: stretch;

        padding: 22px 5% 28px;

        background: rgba(4, 10, 18, 0.98);

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

        box-shadow:
            0 25px 60px rgba(0,0,0,0.45);

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

        opacity: 0;
        visibility: hidden;

        transform: translateY(-15px);

        pointer-events: none;

        transition:
            opacity 0.3s ease,
            transform 0.3s ease,
            visibility 0.3s ease;
    }


    /* ---------- OPEN MENU ---------- */

    .service-page-nav.active {
        opacity: 1;
        visibility: visible;

        transform: translateY(0);

        pointer-events: auto;
    }


    /* ---------- MOBILE LINKS ---------- */

    .service-page-nav a {
        width: 100%;

        padding: 18px 4px;

        border-bottom:
            1px solid rgba(255,255,255,0.055);

        color: #dce5ee;

        font-size: 15px;
        font-weight: 600;

        letter-spacing: 0.4px;
    }

    .service-page-nav a:last-child {
        border-bottom: 0;
    }

    .service-page-nav a:hover {
        color: #00d9ff;
    }

    .service-page-nav a::after {
        display: none;
    }


    /* ---------- HIDE DESKTOP CTA ---------- */

    .service-nav-cta {
        display: none;
    }


    /* ---------- HAMBURGER ---------- */

    .service-menu-toggle {
        position: relative;

        z-index: 1001;

        display: block;

        width: 44px;
        height: 44px;

        padding: 0;

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

        border-radius: 6px;

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

        cursor: pointer;
    }

    .service-menu-toggle span {
        position: absolute;

        left: 50%;

        width: 22px;
        height: 2px;

        margin: 0;

        border-radius: 10px;

        background: #ffffff;

        transform: translateX(-50%);

        transition:
            top 0.3s ease,
            transform 0.3s ease,
            opacity 0.2s ease,
            background 0.3s ease;
    }

    .service-menu-toggle span:nth-child(1) {
        top: 13px;
    }

    .service-menu-toggle span:nth-child(2) {
        top: 20px;
    }

    .service-menu-toggle span:nth-child(3) {
        top: 27px;
    }


    /* ---------- HAMBURGER TO X ---------- */

    .service-menu-toggle.active span:nth-child(1) {
        top: 20px;

        transform:
            translateX(-50%)
            rotate(45deg);

        background: #00d9ff;
    }

    .service-menu-toggle.active span:nth-child(2) {
        opacity: 0;
    }

    .service-menu-toggle.active span:nth-child(3) {
        top: 20px;

        transform:
            translateX(-50%)
            rotate(-45deg);

        background: #00d9ff;
    }

}

/* ========================================
   WEB DEVELOPMENT - FULL MOBILE LAYOUT
======================================== */

@media (max-width: 650px) {

    /* ---------- GLOBAL ---------- */

    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    .section-container {
        width: 100%;
        max-width: 100%;
        padding-left: 20px;
        padding-right: 20px;
    }


    /* ---------- HEADER ---------- */

    .service-page-header {
        width: 100%;
    }

    .service-nav-container {
        width: 100%;
        max-width: 100%;
        padding-left: 20px;
        padding-right: 20px;
    }

    .service-page-logo img {
        max-width: 130px;
        height: auto;
    }


    /* ---------- HERO ---------- */

    .service-hero {
        width: 100%;
        min-height: auto;

        padding:
            125px 0
            70px;

        overflow: hidden;
    }

    .service-hero .section-container {
        display: block;
    }

    .service-hero-content {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .service-breadcrumb {
        max-width: 100%;

        flex-wrap: wrap;

        gap: 8px;
    }

    .service-hero-label {
        margin-top: 26px;
    }

    .service-hero-content h1 {
        width: 100%;
        max-width: 100%;

        font-size: clamp(46px, 13vw, 62px);
        line-height: 0.98;

        letter-spacing: -2px;

        overflow-wrap: normal;
        word-break: normal;
    }

    .service-hero-content h1 span {
        display: block;
    }

    .service-hero-intro {
        width: 100%;
        max-width: 100%;

        font-size: 16px;
        line-height: 1.7;
    }


    /* ---------- HERO BUTTONS ---------- */

    .service-hero-actions {
        width: 100%;

        display: grid;
        grid-template-columns: 1fr;

        gap: 12px;
    }

    .service-primary-button,
    .service-secondary-button {
        width: 100%;
        max-width: 100%;

        min-width: 0;

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

        text-align: center;
    }


    /* ---------- HERO META ---------- */

    .service-hero-meta {
        width: 100%;

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

        gap: 14px;

        margin-top: 35px;
    }

    .service-hero-meta i {
        display: none;
    }

    .service-hero-meta div {
        min-width: 0;
    }


    /* ---------- HERO VISUAL ---------- */

    .service-hero-visual {
        position: relative;

        width: 100%;
        max-width: 100%;
        min-width: 0;

        margin-top: 55px;
    }

    .web-browser-mockup {
        width: 100%;
        max-width: 100%;

        margin: 0;
    }

    .web-browser-address {
        min-width: 0;

        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .service-floating-card {
        max-width: 155px;

        padding: 14px;
    }

    .service-floating-card-one {
        left: 10px;
    }

    .service-floating-card-two {
        right: 10px;
    }


    /* ========================================
       INTRO
    ======================================== */

    .web-intro-section {
        width: 100%;

        padding:
            75px 0;
    }

    .web-intro-section .section-container {
        display: block;
    }

    .web-intro-number {
        margin-bottom: 25px;

        font-size: 12px;
    }

    .web-intro-content {
        width: 100%;
        max-width: 100%;
    }

    .web-intro-content h2 {
        width: 100%;

        font-size: clamp(36px, 10vw, 50px);
        line-height: 1.05;

        letter-spacing: -1.5px;
    }

    .web-intro-content h2 span {
        display: block;
    }

    .web-intro-copy {
        width: 100%;

        display: grid;
        grid-template-columns: 1fr;

        gap: 20px;

        margin-top: 30px;
    }

    .web-intro-copy p {
        width: 100%;
        max-width: 100%;
    }


    /* ========================================
       CONVERSION JOURNEY
    ======================================== */

    .web-conversion-section {
        width: 100%;

        padding:
            75px 0;
    }

    .web-conversion-heading {
        width: 100%;
    }

    .web-conversion-heading h2 {
        font-size: clamp(36px, 10vw, 50px);
        line-height: 1.05;

        letter-spacing: -1.5px;
    }

    .web-conversion-flow {
        width: 100%;

        display: grid;
        grid-template-columns: 1fr;

        gap: 14px;

        margin-top: 40px;
    }

    .conversion-item {
        width: 100%;
        max-width: 100%;

        min-width: 0;
    }

    .conversion-arrow {
        width: 100%;

        transform: rotate(90deg);

        text-align: center;
    }


    /* ========================================
       WHAT WE BUILD
    ======================================== */

    .web-solutions-section {
        width: 100%;

        padding:
            75px 0;
    }

    .web-solutions-heading {
        width: 100%;

        display: grid;
        grid-template-columns: 1fr;

        gap: 22px;
    }

    .web-solutions-heading > div,
    .web-solutions-heading > p {
        width: 100%;
        max-width: 100%;
    }

    .web-solutions-heading h2 {
        font-size: clamp(36px, 10vw, 50px);
        line-height: 1.05;

        letter-spacing: -1.5px;
    }

    .web-solutions-grid {
        width: 100%;

        display: grid;
        grid-template-columns: 1fr;

        gap: 14px;

        margin-top: 40px;
    }

    .web-solution-card {
        width: 100%;
        max-width: 100%;

        min-width: 0;

        padding: 28px 24px;
    }

    .web-solution-card h3,
    .web-solution-card p {
        max-width: 100%;
    }


    /* ========================================
       APPROACH
    ======================================== */

    .web-approach-section {
        width: 100%;

        padding:
            75px 0;
    }

    .web-approach-layout {
        width: 100%;

        display: grid;
        grid-template-columns: 1fr;

        gap: 45px;
    }

    .web-approach-heading,
    .web-approach-list {
        width: 100%;
        max-width: 100%;

        min-width: 0;
    }

    .web-approach-heading h2 {
        font-size: clamp(36px, 10vw, 50px);
        line-height: 1.05;

        letter-spacing: -1.5px;
    }

    .web-approach-item {
        width: 100%;
        max-width: 100%;

        display: grid;
        grid-template-columns:
            35px minmax(0, 1fr);

        gap: 15px;

        padding:
            24px 0;
    }

    .web-approach-item > div {
        min-width: 0;
    }

    .web-approach-item h3,
    .web-approach-item p {
        max-width: 100%;
    }


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

    .web-service-cta {
        width: 100%;

        padding:
            80px 0;
    }

    .web-service-cta-content {
        width: 100%;
        max-width: 100%;
    }

    .web-service-cta-content h2 {
        font-size: clamp(38px, 11vw, 52px);
        line-height: 1.03;

        letter-spacing: -1.5px;
    }

    .web-service-cta-content p {
        width: 100%;
        max-width: 100%;
    }

    .web-service-cta-content .service-primary-button {
        width: 100%;
    }


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

    .service-page-footer {
        width: 100%;
    }

    .service-footer-main {
        width: 100%;

        display: grid;
        grid-template-columns: 1fr;

        gap: 35px;
    }

    .service-footer-links {
        width: 100%;

        display: grid;
        grid-template-columns: 1fr;

        gap: 16px;
    }

    .service-footer-bottom {
        width: 100%;

        display: grid;
        grid-template-columns: 1fr;

        gap: 10px;

        text-align: left;
    }

    .service-footer-logo {
        max-width: 150px;
        height: auto;
    }


    /* ---------- FINAL OVERFLOW PROTECTION ---------- */

    .service-hero *,
    .web-intro-section *,
    .web-conversion-section *,
    .web-solutions-section *,
    .web-approach-section *,
    .web-service-cta *,
    .service-page-footer * {
        max-width: 100%;
    }

}

/* ========================================
   SOCIAL MEDIA - FULL MOBILE LAYOUT
======================================== */

@media (max-width: 650px) {

    /* ---------- HERO ---------- */

    .social-hero {
        width: 100%;
        min-height: auto;

        padding:
            125px 0
            70px;

        overflow: hidden;
    }

    .social-hero .section-container {
        width: 100%;
        max-width: 100%;

        display: block;

        padding-left: 20px;
        padding-right: 20px;
    }

    .social-hero-content {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .social-hero-content h1 {
        width: 100%;
        max-width: 100%;

        font-size: clamp(46px, 13vw, 62px);
        line-height: 0.98;

        letter-spacing: -2px;
    }

    .social-hero-content h1 span {
        display: block;
    }

    .social-hero-intro {
        width: 100%;
        max-width: 100%;

        font-size: 16px;
        line-height: 1.7;
    }


    /* ---------- HERO BUTTONS ---------- */

    .social-hero .service-hero-actions {
        width: 100%;

        display: grid;
        grid-template-columns: 1fr;

        gap: 12px;
    }

    .social-hero .service-primary-button,
    .social-hero .service-secondary-button {
        width: 100%;
        max-width: 100%;

        min-width: 0;

        justify-content: center;

        text-align: center;
    }


    /* ---------- PLATFORM ROW ---------- */

    .social-platform-row {
        width: 100%;

        display: flex;
        flex-wrap: wrap;

        gap: 10px 14px;

        margin-top: 30px;
    }

    .social-platform-row i {
        display: none;
    }


    /* ---------- SOCIAL DASHBOARD ---------- */

    .social-hero-visual {
        position: relative;

        width: 100%;
        max-width: 100%;
        min-width: 0;

        margin-top: 55px;
    }

    .social-dashboard {
        width: 100%;
        max-width: 100%;

        min-width: 0;

        margin: 0;
    }

    .social-dashboard-top {
        gap: 12px;

        flex-wrap: wrap;
    }

    .social-stats-grid {
        width: 100%;

        display: grid;
        grid-template-columns: 1fr;

        gap: 10px;
    }

    .social-stat {
        width: 100%;
        min-width: 0;
    }

    .social-post-card {
        width: 100%;
        max-width: 100%;
    }

    .social-post-header {
        min-width: 0;
    }

    .social-post-header > div:nth-child(2) {
        min-width: 0;
    }

    .social-post-image {
        width: 100%;
        max-width: 100%;
    }

    .social-post-engagement {
        width: 100%;

        display: flex;
        flex-wrap: wrap;

        gap: 12px;
    }


    /* ---------- FLOATING CARDS ---------- */

    .social-floating-card {
        max-width: 145px;

        padding: 13px;
    }

    .social-floating-one {
        left: 5px;
    }

    .social-floating-two {
        right: 5px;
    }


    /* ========================================
       INTRO
    ======================================== */

    .social-intro-section {
        width: 100%;

        padding: 75px 0;
    }

    .social-intro-section .section-container {
        width: 100%;

        display: block;

        padding-left: 20px;
        padding-right: 20px;
    }

    .social-intro-section .web-intro-number {
        margin-bottom: 25px;
    }

    .social-intro-section .web-intro-content {
        width: 100%;
        max-width: 100%;
    }

    .social-intro-section .web-intro-content h2 {
        font-size: clamp(36px, 10vw, 50px);
        line-height: 1.05;

        letter-spacing: -1.5px;
    }

    .social-intro-section .web-intro-content h2 span {
        display: block;
    }

    .social-intro-section .web-intro-copy {
        width: 100%;

        display: grid;
        grid-template-columns: 1fr;

        gap: 20px;

        margin-top: 30px;
    }


    /* ========================================
       SOCIAL JOURNEY
    ======================================== */

    .social-strategy-section {
        width: 100%;

        padding: 75px 0;
    }

    .social-strategy-section .section-container {
        padding-left: 20px;
        padding-right: 20px;
    }

    .social-strategy-heading {
        width: 100%;
        max-width: 100%;
    }

    .social-strategy-heading h2 {
        font-size: clamp(36px, 10vw, 50px);
        line-height: 1.05;

        letter-spacing: -1.5px;
    }

    .social-strategy-flow {
        width: 100%;

        display: grid;
        grid-template-columns: 1fr;

        gap: 14px;

        margin-top: 40px;
    }

    .social-strategy-flow article {
        width: 100%;
        max-width: 100%;

        min-width: 0;
    }

    .social-flow-arrow {
        width: 100%;

        transform: rotate(90deg);

        text-align: center;
    }


    /* ========================================
       SOCIAL SERVICES
    ======================================== */

    .social-services-section {
        width: 100%;

        padding: 75px 0;
    }

    .social-services-section .section-container {
        padding-left: 20px;
        padding-right: 20px;
    }

    .social-services-section .web-solutions-heading {
        width: 100%;

        display: grid;
        grid-template-columns: 1fr;

        gap: 22px;
    }

    .social-services-section
    .web-solutions-heading > div,
    .social-services-section
    .web-solutions-heading > p {
        width: 100%;
        max-width: 100%;
    }

    .social-services-section
    .web-solutions-heading h2 {
        font-size: clamp(36px, 10vw, 50px);
        line-height: 1.05;

        letter-spacing: -1.5px;
    }

    .social-services-grid {
        width: 100%;

        display: grid;
        grid-template-columns: 1fr;

        gap: 14px;

        margin-top: 40px;
    }

    .social-service-card {
        width: 100%;
        max-width: 100%;

        min-width: 0;

        padding: 28px 24px;
    }


    /* ========================================
       CONSISTENCY
    ======================================== */

    .social-consistency-section {
        width: 100%;

        padding: 75px 0;
    }

    .social-consistency-section .section-container {
        padding-left: 20px;
        padding-right: 20px;
    }

    .social-consistency-layout {
        width: 100%;

        display: grid;
        grid-template-columns: 1fr;

        gap: 45px;
    }

    .social-consistency-content,
    .social-channel-stack {
        width: 100%;
        max-width: 100%;

        min-width: 0;
    }

    .social-consistency-content h2 {
        font-size: clamp(36px, 10vw, 50px);
        line-height: 1.05;

        letter-spacing: -1.5px;
    }

    .social-consistency-content h2 span {
        display: block;
    }

    .social-consistency-content
    .service-secondary-button {
        width: 100%;

        justify-content: center;

        text-align: center;
    }


    /* ---------- CHANNEL CARDS ---------- */

    .social-channel-stack {
        display: grid;

        gap: 12px;
    }

    .social-channel-card {
        width: 100%;
        max-width: 100%;

        min-width: 0;

        display: grid;
        grid-template-columns:
            auto minmax(0, 1fr);

        gap: 14px;

        padding: 18px;
    }

    .social-channel-card > div:nth-child(2) {
        min-width: 0;
    }

    .social-channel-card small {
        grid-column: 2;

        justify-self: start;
    }

    .social-channel-card span {
        overflow-wrap: anywhere;
    }


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

    .social-services-section *,
    .social-strategy-section *,
    .social-consistency-section *,
    .social-intro-section *,
    .social-hero * {
        max-width: 100%;
    }

}

/* ========================================
   DIGITAL MARKETING - FULL MOBILE LAYOUT
======================================== */

@media (max-width: 650px) {

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

    .marketing-hero {
        width: 100%;
        min-height: auto;

        padding: 125px 0 70px;

        overflow: hidden;
    }

    .marketing-hero .section-container {
        width: 100%;
        max-width: 100%;

        display: block;

        padding-left: 20px;
        padding-right: 20px;
    }

    .marketing-hero-content {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .marketing-hero-content h1 {
        width: 100%;
        max-width: 100%;

        font-size: clamp(46px, 13vw, 62px);
        line-height: 0.98;

        letter-spacing: -2px;
    }

    .marketing-hero-content h1 span {
        display: block;
    }

    .marketing-hero-intro {
        width: 100%;
        max-width: 100%;

        font-size: 16px;
        line-height: 1.7;
    }


    /* ---------- HERO BUTTONS ---------- */

    .marketing-hero .service-hero-actions {
        width: 100%;

        display: grid;
        grid-template-columns: 1fr;

        gap: 12px;
    }

    .marketing-hero .service-primary-button,
    .marketing-hero .service-secondary-button {
        width: 100%;
        max-width: 100%;

        min-width: 0;

        justify-content: center;

        text-align: center;
    }


    /* ---------- HERO META ---------- */

    .marketing-hero-meta {
        width: 100%;

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

        gap: 10px;

        margin-top: 32px;
    }

    .marketing-hero-meta i {
        display: none;
    }

    .marketing-hero-meta div {
        min-width: 0;
    }

    .marketing-hero-meta strong {
        font-size: 11px;
    }


    /* ========================================
       PERFORMANCE DASHBOARD
    ======================================== */

    .marketing-hero-visual {
        position: relative;

        width: 100%;
        max-width: 100%;
        min-width: 0;

        margin-top: 55px;
    }

    .marketing-dashboard {
        width: 100%;
        max-width: 100%;

        min-width: 0;

        margin: 0;
    }

    .marketing-dashboard-header {
        width: 100%;

        gap: 12px;

        flex-wrap: wrap;
    }

    .marketing-dashboard-header > div:first-child {
        min-width: 0;
    }

    .marketing-period {
        flex-shrink: 0;
    }


    /* ---------- MAIN RESULT ---------- */

    .marketing-main-result {
        width: 100%;

        display: grid;
        grid-template-columns: 1fr;

        gap: 20px;
    }

    .marketing-main-result > div {
        min-width: 0;
    }

    .marketing-growth-circle {
        justify-self: start;
    }


    /* ---------- CHART ---------- */

    .marketing-chart {
        width: 100%;
        max-width: 100%;

        min-width: 0;

        overflow: hidden;
    }

    .marketing-chart-top {
        gap: 10px;

        flex-wrap: wrap;
    }

    .marketing-chart-area,
    .marketing-chart-grid,
    .marketing-bars {
        width: 100%;
        max-width: 100%;

        min-width: 0;
    }

    .marketing-bars {
        gap: 4px;
    }

    .marketing-bars span {
        min-width: 0;
    }


    /* ---------- KPI CARDS ---------- */

    .marketing-kpi-grid {
        width: 100%;

        display: grid;
        grid-template-columns: 1fr;

        gap: 10px;
    }

    .marketing-kpi-grid > div {
        width: 100%;
        min-width: 0;
    }


    /* ---------- FLOATING CARDS ---------- */

    .marketing-floating-card {
        max-width: 145px;

        padding: 13px;
    }

    .marketing-floating-one {
        left: 5px;
    }

    .marketing-floating-two {
        right: 5px;
    }


    /* ========================================
       INTRO
    ======================================== */

    .marketing-intro-section {
        width: 100%;

        padding: 75px 0;
    }

    .marketing-intro-section .section-container {
        width: 100%;
        max-width: 100%;

        display: block;

        padding-left: 20px;
        padding-right: 20px;
    }

    .marketing-intro-section .web-intro-number {
        margin-bottom: 25px;
    }

    .marketing-intro-section .web-intro-content {
        width: 100%;
        max-width: 100%;
    }

    .marketing-intro-section .web-intro-content h2 {
        width: 100%;

        font-size: clamp(36px, 10vw, 50px);
        line-height: 1.05;

        letter-spacing: -1.5px;
    }

    .marketing-intro-section .web-intro-content h2 span {
        display: block;
    }

    .marketing-intro-section .web-intro-copy {
        width: 100%;

        display: grid;
        grid-template-columns: 1fr;

        gap: 20px;

        margin-top: 30px;
    }


    /* ========================================
       GROWTH JOURNEY
    ======================================== */

    .marketing-funnel-section {
        width: 100%;

        padding: 75px 0;
    }

    .marketing-funnel-section .section-container {
        padding-left: 20px;
        padding-right: 20px;
    }

    .marketing-section-heading {
        width: 100%;
        max-width: 100%;
    }

    .marketing-section-heading h2 {
        width: 100%;

        font-size: clamp(36px, 10vw, 50px);
        line-height: 1.05;

        letter-spacing: -1.5px;
    }

    .marketing-section-heading h2 span {
        display: block;
    }

    .marketing-funnel {
        width: 100%;

        display: grid;
        grid-template-columns: 1fr;

        gap: 14px;

        margin-top: 40px;
    }

    .marketing-funnel article {
        width: 100%;
        max-width: 100%;

        min-width: 0;
    }

    .marketing-funnel-arrow {
        width: 100%;

        transform: rotate(90deg);

        text-align: center;
    }


    /* ========================================
       MARKETING SERVICES
    ======================================== */

    .marketing-services-section {
        width: 100%;

        padding: 75px 0;
    }

    .marketing-services-section .section-container {
        padding-left: 20px;
        padding-right: 20px;
    }

    .marketing-services-section .web-solutions-heading {
        width: 100%;

        display: grid;
        grid-template-columns: 1fr;

        gap: 22px;
    }

    .marketing-services-section
    .web-solutions-heading > div,
    .marketing-services-section
    .web-solutions-heading > p {
        width: 100%;
        max-width: 100%;
    }

    .marketing-services-section
    .web-solutions-heading h2 {
        font-size: clamp(36px, 10vw, 50px);
        line-height: 1.05;

        letter-spacing: -1.5px;
    }

    .marketing-services-grid {
        width: 100%;

        display: grid;
        grid-template-columns: 1fr;

        gap: 14px;

        margin-top: 40px;
    }

    .marketing-service-card {
        width: 100%;
        max-width: 100%;

        min-width: 0;

        padding: 28px 24px;
    }

    .marketing-service-card h3,
    .marketing-service-card p {
        max-width: 100%;
    }


    /* ========================================
       DATA / DECISIONS
    ======================================== */

    .marketing-data-section {
        width: 100%;

        padding: 75px 0;
    }

    .marketing-data-section .section-container {
        padding-left: 20px;
        padding-right: 20px;
    }

    .marketing-data-layout {
        width: 100%;

        display: grid;
        grid-template-columns: 1fr;

        gap: 45px;
    }

    .marketing-data-content,
    .marketing-metrics-panel {
        width: 100%;
        max-width: 100%;

        min-width: 0;
    }

    .marketing-data-content h2 {
        width: 100%;

        font-size: clamp(36px, 10vw, 50px);
        line-height: 1.05;

        letter-spacing: -1.5px;
    }

    .marketing-data-content h2 span {
        display: block;
    }


    /* ---------- METRICS ---------- */

    .marketing-metrics-panel {
        padding: 24px 20px;
    }

    .marketing-metric-row {
        width: 100%;

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

        gap: 15px;
    }

    .marketing-metric-row > div {
        min-width: 0;
    }

    .marketing-metric-row small {
        flex-shrink: 0;
    }

    .marketing-metric-bar {
        width: 100%;
        max-width: 100%;
    }


    /* ========================================
       FINAL OVERFLOW PROTECTION
    ======================================== */

    .marketing-hero *,
    .marketing-intro-section *,
    .marketing-funnel-section *,
    .marketing-services-section *,
    .marketing-data-section * {
        max-width: 100%;
    }

}

/* ========================================
   BRANDING & DESIGN - FULL MOBILE LAYOUT
======================================== */

@media (max-width: 650px) {

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

    .branding-hero {
        width: 100%;
        min-height: auto;

        padding: 125px 0 70px;

        overflow: hidden;
    }

    .branding-hero .section-container {
        width: 100%;
        max-width: 100%;

        display: block;

        padding-left: 20px;
        padding-right: 20px;
    }

    .branding-hero-content {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .branding-hero-content h1 {
        width: 100%;
        max-width: 100%;

        font-size: clamp(46px, 13vw, 62px);
        line-height: 0.98;

        letter-spacing: -2px;
    }

    .branding-hero-content h1 span {
        display: block;
    }

    .branding-hero-intro {
        width: 100%;
        max-width: 100%;

        font-size: 16px;
        line-height: 1.7;
    }


    /* ---------- HERO BUTTONS ---------- */

    .branding-hero .service-hero-actions {
        width: 100%;

        display: grid;
        grid-template-columns: 1fr;

        gap: 12px;
    }

    .branding-hero .service-primary-button,
    .branding-hero .service-secondary-button {
        width: 100%;
        max-width: 100%;

        min-width: 0;

        justify-content: center;

        text-align: center;
    }


    /* ---------- HERO META ---------- */

    .branding-hero-meta {
        width: 100%;

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

        gap: 12px;

        margin-top: 32px;
    }

    .branding-hero-meta i {
        display: none;
    }

    .branding-hero-meta span {
        min-width: 0;
    }


    /* ========================================
       BRAND BOARD
    ======================================== */

    .branding-hero-visual {
        position: relative;

        width: 100%;
        max-width: 100%;
        min-width: 0;

        margin-top: 55px;
    }

    .brand-board {
        width: 100%;
        max-width: 100%;

        min-width: 0;

        margin: 0;

        padding: 20px;
    }

    .brand-board-header {
        width: 100%;

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

        gap: 15px;
    }

    .brand-board-header > div {
        min-width: 0;
    }


    /* ---------- LOGO CONCEPT ---------- */

    .brand-logo-concept {
        width: 100%;

        display: grid;
        grid-template-columns:
            auto minmax(0, 1fr);

        gap: 16px;

        align-items: center;
    }

    .brand-logo-concept > div:last-child {
        min-width: 0;
    }

    .brand-logo-concept strong {
        max-width: 100%;
    }


    /* ---------- COLOUR SYSTEM ---------- */

    .brand-colours {
        width: 100%;

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

        gap: 8px;
    }

    .brand-colour {
        width: 100%;
        min-width: 0;
    }

    .brand-colour span {
        font-size: 9px;
    }


    /* ---------- TYPOGRAPHY ---------- */

    .brand-type-preview {
        width: 100%;

        display: grid;
        grid-template-columns:
            auto minmax(0, 1fr);

        gap: 14px;

        align-items: center;
    }

    .brand-type-preview > div:last-child {
        min-width: 0;
    }

    .brand-type-preview span,
    .brand-type-preview small {
        display: block;

        max-width: 100%;

        overflow: hidden;

        font-size: 8px;
        letter-spacing: 0.5px;
    }


    /* ---------- FLOATING CARDS ---------- */

    .branding-floating-card {
        max-width: 145px;

        padding: 13px;
    }

    .branding-floating-one {
        left: 5px;
    }

    .branding-floating-two {
        right: 5px;
    }


    /* ========================================
       INTRO
    ======================================== */

    .branding-intro-section {
        width: 100%;

        padding: 75px 0;
    }

    .branding-intro-section .section-container {
        width: 100%;
        max-width: 100%;

        display: block;

        padding-left: 20px;
        padding-right: 20px;
    }

    .branding-intro-section .web-intro-number {
        margin-bottom: 25px;
    }

    .branding-intro-section .web-intro-content {
        width: 100%;
        max-width: 100%;
    }

    .branding-intro-section
    .web-intro-content h2 {
        width: 100%;

        font-size: clamp(36px, 10vw, 50px);
        line-height: 1.05;

        letter-spacing: -1.5px;
    }

    .branding-intro-section
    .web-intro-content h2 span {
        display: block;
    }

    .branding-intro-section .web-intro-copy {
        width: 100%;

        display: grid;
        grid-template-columns: 1fr;

        gap: 20px;

        margin-top: 30px;
    }


    /* ========================================
       BRAND JOURNEY
    ======================================== */

    .branding-journey-section {
        width: 100%;

        padding: 75px 0;
    }

    .branding-journey-section .section-container {
        padding-left: 20px;
        padding-right: 20px;
    }

    .branding-section-heading {
        width: 100%;
        max-width: 100%;
    }

    .branding-section-heading h2 {
        width: 100%;

        font-size: clamp(36px, 10vw, 50px);
        line-height: 1.05;

        letter-spacing: -1.5px;
    }

    .branding-section-heading h2 span {
        display: block;
    }

    .branding-journey {
        width: 100%;

        display: grid;
        grid-template-columns: 1fr;

        gap: 14px;

        margin-top: 40px;
    }

    .branding-journey article {
        width: 100%;
        max-width: 100%;

        min-width: 0;
    }

    .branding-journey-arrow {
        width: 100%;

        transform: rotate(90deg);

        text-align: center;
    }


    /* ========================================
       BRANDING SERVICES
    ======================================== */

    .branding-services-section {
        width: 100%;

        padding: 75px 0;
    }

    .branding-services-section .section-container {
        padding-left: 20px;
        padding-right: 20px;
    }

    .branding-services-section
    .web-solutions-heading {
        width: 100%;

        display: grid;
        grid-template-columns: 1fr;

        gap: 22px;
    }

    .branding-services-section
    .web-solutions-heading > div,
    .branding-services-section
    .web-solutions-heading > p {
        width: 100%;
        max-width: 100%;
    }

    .branding-services-section
    .web-solutions-heading h2 {
        font-size: clamp(36px, 10vw, 50px);
        line-height: 1.05;

        letter-spacing: -1.5px;
    }

    .branding-services-grid {
        width: 100%;

        display: grid;
        grid-template-columns: 1fr;

        gap: 14px;

        margin-top: 40px;
    }

    .branding-service-card {
        width: 100%;
        max-width: 100%;

        min-width: 0;

        padding: 28px 24px;
    }

    .branding-service-card h3,
    .branding-service-card p {
        max-width: 100%;
    }


    /* ========================================
       BRAND SYSTEM SHOWCASE
    ======================================== */

    .branding-system-section {
        width: 100%;

        padding: 75px 0;
    }

    .branding-system-section .section-container {
        padding-left: 20px;
        padding-right: 20px;
    }

    .branding-system-layout {
        width: 100%;

        display: grid;
        grid-template-columns: 1fr;

        gap: 45px;
    }

    .branding-system-content,
    .branding-application-grid {
        width: 100%;
        max-width: 100%;

        min-width: 0;
    }

    .branding-system-content h2 {
        width: 100%;

        font-size: clamp(36px, 10vw, 50px);
        line-height: 1.05;

        letter-spacing: -1.5px;
    }

    .branding-system-content h2 span {
        display: block;
    }

    .branding-system-content
    .service-secondary-button {
        width: 100%;

        justify-content: center;

        text-align: center;
    }


    /* ---------- APPLICATION GRID ---------- */

    .branding-application-grid {
        display: grid;
        grid-template-columns: 1fr;

        gap: 12px;
    }

    .brand-application,
    .brand-application-large,
    .brand-application-wide {
        width: 100%;
        max-width: 100%;

        min-width: 0;

        grid-column: auto;
        grid-row: auto;
    }

    .brand-application {
        min-height: 160px;
    }

    .brand-application-large {
        min-height: 230px;
    }

    .brand-application-wide {
        min-height: 180px;
    }

    .brand-application strong,
    .brand-application p,
    .brand-application span,
    .brand-application small {
        max-width: 100%;
    }

    .brand-type-large {
        font-size: clamp(50px, 18vw, 78px);
    }

    .brand-mini-palette {
        max-width: 100%;
    }


    /* ========================================
       FINAL OVERFLOW PROTECTION
    ======================================== */

    .branding-hero *,
    .branding-intro-section *,
    .branding-journey-section *,
    .branding-services-section *,
    .branding-system-section * {
        max-width: 100%;
    }

}

/* ========================================
   DIGITAL SUPPORT - FULL MOBILE LAYOUT
======================================== */

@media (max-width: 650px) {

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

    .support-hero {
        width: 100%;
        min-height: auto;

        padding: 125px 0 70px;

        overflow: hidden;
    }

    .support-hero .section-container {
        width: 100%;
        max-width: 100%;

        display: block;

        padding-left: 20px;
        padding-right: 20px;
    }

    .support-hero-content {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .support-hero-content h1 {
        width: 100%;
        max-width: 100%;

        font-size: clamp(46px, 13vw, 62px);
        line-height: 0.98;

        letter-spacing: -2px;
    }

    .support-hero-content h1 span {
        display: block;
    }

    .support-hero-intro {
        width: 100%;
        max-width: 100%;

        font-size: 16px;
        line-height: 1.7;
    }


    /* ---------- HERO BUTTONS ---------- */

    .support-hero .service-hero-actions {
        width: 100%;

        display: grid;
        grid-template-columns: 1fr;

        gap: 12px;
    }

    .support-hero .service-primary-button,
    .support-hero .service-secondary-button {
        width: 100%;
        max-width: 100%;

        min-width: 0;

        justify-content: center;

        text-align: center;
    }


    /* ---------- HERO META ---------- */

    .support-hero-meta {
        width: 100%;

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

        gap: 10px;

        margin-top: 32px;
    }

    .support-hero-meta i {
        display: none;
    }

    .support-hero-meta div {
        min-width: 0;

        font-size: 10px;
    }


    /* ========================================
       SUPPORT CONSOLE
    ======================================== */

    .support-hero-visual {
        position: relative;

        width: 100%;
        max-width: 100%;
        min-width: 0;

        margin-top: 55px;
    }

    .support-console {
        width: 100%;
        max-width: 100%;

        min-width: 0;

        margin: 0;
    }


    /* ---------- CONSOLE HEADER ---------- */

    .support-console-header {
        width: 100%;

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

        gap: 12px;

        flex-wrap: wrap;
    }

    .support-console-header > div:first-child {
        min-width: 0;
    }

    .support-console-status {
        flex-shrink: 0;
    }


    /* ---------- SYSTEM OVERVIEW ---------- */

    .support-overview {
        width: 100%;

        display: grid;
        grid-template-columns: 1fr;

        gap: 20px;
    }

    .support-health,
    .support-overview-info {
        width: 100%;
        max-width: 100%;

        min-width: 0;
    }

    .support-health {
        display: flex;
        justify-content: flex-start;
    }


    /* ---------- SYSTEM ROWS ---------- */

    .support-system-list {
        width: 100%;
    }

    .support-system-row {
        width: 100%;

        display: grid;
        grid-template-columns:
            auto minmax(0, 1fr);

        gap: 12px;

        align-items: center;
    }

    .support-system-row > div:nth-child(2) {
        min-width: 0;
    }

    .support-system-row small {
        grid-column: 2;

        justify-self: start;
    }


    /* ---------- RECENT ACTIVITY ---------- */

    .support-activity {
        width: 100%;
        max-width: 100%;
    }

    .support-activity-header {
        gap: 10px;

        flex-wrap: wrap;
    }

    .support-activity-row {
        width: 100%;

        display: grid;
        grid-template-columns:
            auto minmax(0, 1fr);

        gap: 12px;
    }

    .support-activity-row > div {
        min-width: 0;
    }

    .support-activity-row time {
        grid-column: 2;

        justify-self: start;
    }


    /* ---------- FLOATING CARDS ---------- */

    .support-floating-card {
        max-width: 145px;

        padding: 13px;
    }

    .support-floating-one {
        left: 5px;
    }

    .support-floating-two {
        right: 5px;
    }


    /* ========================================
       INTRO
    ======================================== */

    .support-intro-section {
        width: 100%;

        padding: 75px 0;
    }

    .support-intro-section .section-container {
        width: 100%;
        max-width: 100%;

        display: block;

        padding-left: 20px;
        padding-right: 20px;
    }

    .support-intro-section .web-intro-number {
        margin-bottom: 25px;
    }

    .support-intro-section .web-intro-content {
        width: 100%;
        max-width: 100%;
    }

    .support-intro-section
    .web-intro-content h2 {
        width: 100%;

        font-size: clamp(36px, 10vw, 50px);
        line-height: 1.05;

        letter-spacing: -1.5px;
    }

    .support-intro-section
    .web-intro-content h2 span {
        display: block;
    }

    .support-intro-section .web-intro-copy {
        width: 100%;

        display: grid;
        grid-template-columns: 1fr;

        gap: 20px;

        margin-top: 30px;
    }


    /* ========================================
       SUPPORT PROCESS
    ======================================== */

    .support-process-section {
        width: 100%;

        padding: 75px 0;
    }

    .support-process-section .section-container {
        padding-left: 20px;
        padding-right: 20px;
    }

    .support-section-heading {
        width: 100%;
        max-width: 100%;
    }

    .support-section-heading h2 {
        width: 100%;

        font-size: clamp(36px, 10vw, 50px);
        line-height: 1.05;

        letter-spacing: -1.5px;
    }

    .support-section-heading h2 span {
        display: block;
    }

    .support-process {
        width: 100%;

        display: grid;
        grid-template-columns: 1fr;

        gap: 14px;

        margin-top: 40px;
    }

    .support-process article {
        width: 100%;
        max-width: 100%;

        min-width: 0;
    }

    .support-process-arrow {
        width: 100%;

        transform: rotate(90deg);

        text-align: center;
    }


    /* ========================================
       SUPPORT SERVICES
    ======================================== */

    .support-services-section {
        width: 100%;

        padding: 75px 0;
    }

    .support-services-section .section-container {
        padding-left: 20px;
        padding-right: 20px;
    }

    .support-services-section
    .web-solutions-heading {
        width: 100%;

        display: grid;
        grid-template-columns: 1fr;

        gap: 22px;
    }

    .support-services-section
    .web-solutions-heading > div,
    .support-services-section
    .web-solutions-heading > p {
        width: 100%;
        max-width: 100%;
    }

    .support-services-section
    .web-solutions-heading h2 {
        font-size: clamp(36px, 10vw, 50px);
        line-height: 1.05;

        letter-spacing: -1.5px;
    }

    .support-services-grid {
        width: 100%;

        display: grid;
        grid-template-columns: 1fr;

        gap: 14px;

        margin-top: 40px;
    }

    .support-service-card {
        width: 100%;
        max-width: 100%;

        min-width: 0;

        padding: 28px 24px;
    }

    .support-service-card h3,
    .support-service-card p {
        max-width: 100%;
    }


    /* ========================================
       STATUS / DIGITAL PARTNER SECTION
    ======================================== */

    .support-status-section {
        width: 100%;

        padding: 75px 0;
    }

    .support-status-section .section-container {
        padding-left: 20px;
        padding-right: 20px;
    }

    .support-status-layout {
        width: 100%;

        display: grid;
        grid-template-columns: 1fr;

        gap: 45px;
    }

    .support-status-content,
    .support-status-panel {
        width: 100%;
        max-width: 100%;

        min-width: 0;
    }

    .support-status-content h2 {
        width: 100%;

        font-size: clamp(36px, 10vw, 50px);
        line-height: 1.05;

        letter-spacing: -1.5px;
    }

    .support-status-content h2 span {
        display: block;
    }

    .support-status-content
    .service-secondary-button {
        width: 100%;

        justify-content: center;

        text-align: center;
    }


    /* ---------- STATUS PANEL ---------- */

    .support-status-panel {
        padding: 22px 18px;
    }

    .support-status-panel-header {
        width: 100%;

        display: grid;
        grid-template-columns: 1fr;

        gap: 10px;
    }

    .support-status-panel-header > div {
        min-width: 0;
    }

    .support-status-panel-header > small {
        justify-self: start;
    }

    .support-status-item {
        width: 100%;

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

        gap: 15px;
    }

    .support-status-item > div {
        min-width: 0;
    }

    .support-status-item small {
        flex-shrink: 0;

        font-size: 9px;
    }

    .support-status-bar {
        width: 100%;
        max-width: 100%;
    }


    /* ---------- STATUS FOOTER ---------- */

    .support-status-footer {
        width: 100%;

        display: grid;
        grid-template-columns:
            auto minmax(0, 1fr);

        gap: 10px;

        align-items: center;
    }

    .support-status-footer p {
        min-width: 0;
    }

    .support-status-footer small {
        grid-column: 2;

        justify-self: start;
    }


    /* ========================================
       FINAL OVERFLOW PROTECTION
    ======================================== */

    .support-hero *,
    .support-intro-section *,
    .support-process-section *,
    .support-services-section *,
    .support-status-section * {
        max-width: 100%;
    }

}

/* ========================================
   CRM VIEW SWITCHING
======================================== */

.crm-view {
    display: none;
}

.crm-view.active {
    display: block;
}

/* ========================================
   CRM ENQUIRIES VIEW
======================================== */

.crm-view-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 32px;
}

.crm-enquiry-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 24px;
}

.crm-enquiry-search {
    flex: 1;
    max-width: 520px;
}

.crm-enquiry-search input,
.crm-enquiry-filter select {
    width: 100%;
    min-height: 48px;
    padding: 0 16px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
    color: inherit;
    font: inherit;
    outline: none;
    transition:
        border-color 0.2s ease,
        background 0.2s ease;
}

.crm-enquiry-search input:focus,
.crm-enquiry-filter select:focus {
    border-color: #00d9ff;
    background: rgba(0, 217, 255, 0.04);
}

.crm-enquiry-search input::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.crm-enquiry-filter {
    min-width: 190px;
}

.crm-enquiry-filter select {
    cursor: pointer;
}

.crm-enquiry-filter select option {
    color: #111;
    background: #fff;
}

.crm-all-enquiries-panel {
    margin-top: 0;
}

.crm-enquiry-result-count {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    opacity: 0.65;
}


/* MOBILE */

@media (max-width: 700px) {

    .crm-view-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .crm-enquiry-controls {
        align-items: stretch;
        flex-direction: column;
    }

    .crm-enquiry-search {
        max-width: none;
    }

    .crm-enquiry-filter {
        width: 100%;
        min-width: 0;
    }

}