/* ============================================================
   BRANDFLASHERS
   GLOBAL DESIGN SYSTEM
============================================================ */


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

:root {

    /* ---------- Colors ---------- */

    --color-bg-primary: #0F172A;
    --color-bg-secondary: #111827;
    --color-bg-tertiary: #172033;

    --color-accent-cyan: #00F0FF;
    --color-accent-purple: #8B5CF6;

    --color-text-primary: #E2E8F0;
    --color-text-secondary: #94A3B8;
    --color-text-muted: #64748B;

    --color-border: rgba(148, 163, 184, 0.12);
    --color-border-hover: rgba(0, 240, 255, 0.35);


    /* ---------- Gradients ---------- */

    --gradient-brand:
        linear-gradient(
            135deg,
            var(--color-accent-cyan),
            var(--color-accent-purple)
        );

    --gradient-text:
        linear-gradient(
            135deg,
            #FFFFFF 0%,
            var(--color-accent-cyan) 45%,
            var(--color-accent-purple) 100%
        );


    /* ---------- Typography ---------- */

    --font-heading: 'Space Grotesk', sans-serif;
    --font-body: 'Inter', sans-serif;


    /* ---------- Layout ---------- */

    --container-width: 1200px;

    --section-padding: 120px;

    --border-radius-small: 8px;
    --border-radius-medium: 14px;
    --border-radius-large: 24px;


    /* ---------- Transitions ---------- */

    --transition-fast: 0.2s ease;
    --transition-medium: 0.35s ease;
    --transition-slow: 0.6s ease;

}


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

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


html {
    scroll-behavior: smooth;
}


body {

    font-family: var(--font-body);

    background-color: var(--color-bg-primary);

    color: var(--color-text-primary);

    line-height: 1.6;

    overflow-x: hidden;

}


body,
button,
input,
textarea,
select {
    font-family: var(--font-body);
}


img {
    max-width: 100%;
    display: block;
}


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


button {
    border: none;
    background: none;
    cursor: pointer;
}


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

.container {

    width: min(
        calc(100% - 48px),
        var(--container-width)
    );

    margin: 0 auto;

}


/* ============================================================
   TYPOGRAPHY
============================================================ */

h1,
h2,
h3,
h4,
h5,
h6 {

    font-family: var(--font-heading);

    line-height: 1.1;

    font-weight: 600;

}


p {
    color: var(--color-text-secondary);
}


.section-label {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    color: var(--color-accent-cyan);

    font-size: 13px;

    font-weight: 600;

    letter-spacing: 2px;

    text-transform: uppercase;

}


.section-label::before {

    content: "";

    width: 28px;

    height: 1px;

    background: var(--gradient-brand);

}


.gradient-text {

    background: var(--gradient-text);

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

    -webkit-text-fill-color: transparent;

    color: transparent;

}


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

.site-header {

    position: fixed;

    top: 0;
    left: 0;

    width: 100%;

    z-index: 1000;

}


.navbar {

    width: min(
        calc(100% - 48px),
        1320px
    );

    height: 88px;

    margin: 0 auto;

    display: flex;

    align-items: center;

    justify-content: space-between;

    transition:
        height var(--transition-medium),
        background-color var(--transition-medium),
        border var(--transition-medium);

}


.site-header.scrolled .navbar {

    height: 72px;

    background: rgba(15, 23, 42, 0.78);

    backdrop-filter: blur(18px);

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

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

    border-radius: 0 0 16px 16px;

    padding: 0 24px;

}


/* ============================================================
   LOGO
============================================================ */

.logo-link {

    display: flex;

    align-items: center;

    flex-shrink: 0;

}


.logo-image {

    width: 215px;

    height: auto;

    object-fit: contain;

}


/* ============================================================
   DESKTOP NAVIGATION
============================================================ */

.nav-menu {

    display: flex;

    align-items: center;

    gap: 34px;

    margin-left: auto;

    margin-right: 35px;

}


.nav-link {

    position: relative;

    color: var(--color-text-secondary);

    font-size: 14px;

    font-weight: 500;

    transition:
        color var(--transition-fast);

}


.nav-link::after {

    content: "";

    position: absolute;

    left: 0;
    bottom: -8px;

    width: 0;
    height: 2px;

    background: var(--gradient-brand);

    border-radius: 10px;

    transition:
        width var(--transition-medium);

}


.nav-link:hover,
.nav-link.active {

    color: var(--color-text-primary);

}


.nav-link:hover::after,
.nav-link.active::after {

    width: 100%;

}


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

.nav-cta,
.mobile-menu-cta {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    padding: 12px 20px;

    border-radius: 9px;

    color: #06121A;

    background: var(--gradient-brand);

    font-size: 14px;

    font-weight: 600;

    transition:
        transform var(--transition-fast),
        box-shadow var(--transition-fast);

}


.nav-cta:hover,
.mobile-menu-cta:hover {

    transform: translateY(-2px);

    box-shadow:
        0 8px 30px rgba(0, 240, 255, 0.18);

}


.nav-cta span,
.mobile-menu-cta span {

    font-size: 18px;

    transition:
        transform var(--transition-fast);

}


.nav-cta:hover span,
.mobile-menu-cta:hover span {

    transform: translateX(4px);

}


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

.menu-toggle {

    display: none;

    width: 42px;

    height: 42px;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    gap: 5px;

}


.menu-toggle span {

    display: block;

    width: 24px;

    height: 2px;

    background: var(--color-text-primary);

    border-radius: 5px;

    transition:
        transform var(--transition-medium),
        opacity var(--transition-medium);

}


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

.mobile-menu {

    display: none;

}


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

.hero-placeholder {

    min-height: 100vh;

    display: flex;

    align-items: center;

    padding-top: 100px;

    position: relative;

    overflow: hidden;

}


.hero-placeholder::before {

    content: "";

    position: absolute;

    width: 600px;
    height: 600px;

    top: 10%;
    right: -200px;

    background:
        radial-gradient(
            circle,
            rgba(0, 240, 255, 0.08),
            transparent 70%
        );

    pointer-events: none;

}


.hero-placeholder::after {

    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

    bottom: -250px;
    left: -150px;

    background:
        radial-gradient(
            circle,
            rgba(139, 92, 246, 0.08),
            transparent 70%
        );

    pointer-events: none;

}


.hero-placeholder .container {

    position: relative;

    z-index: 2;

}


.hero-placeholder h1 {

    max-width: 850px;

    margin-top: 24px;

    font-size: clamp(
        48px,
        7vw,
        88px
    );

    letter-spacing: -3px;

}


.hero-placeholder-text {

    max-width: 600px;

    margin-top: 28px;

    font-size: 18px;

}


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

.site-footer {

    position: relative;

    background: #0A1120;

    padding-top: 90px;

    overflow: hidden;

}


.footer-container {

    display: grid;

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

    gap: 60px;

    position: relative;

    z-index: 2;

}


.footer-brand {

    max-width: 300px;

}


.footer-logo {

    width: 200px;

    margin-bottom: 20px;

}


.footer-brand p {

    margin-bottom: 20px;

    font-size: 14px;

}


.footer-location,
.footer-phone {

    color: var(--color-text-muted);

    font-size: 14px;

    margin-top: 6px;

}


.footer-phone a {

    transition:
        color var(--transition-fast);

}


.footer-phone a:hover {

    color: var(--color-accent-cyan);

}


.footer-column {

    display: flex;

    flex-direction: column;

    gap: 12px;

}


.footer-column h3 {

    color: var(--color-text-primary);

    font-size: 14px;

    margin-bottom: 8px;

}


.footer-column a {

    width: fit-content;

    color: var(--color-text-muted);

    font-size: 14px;

    transition:
        color var(--transition-fast),
        transform var(--transition-fast);

}


.footer-column a:hover {

    color: var(--color-accent-cyan);

    transform: translateX(3px);

}


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

.footer-bottom {

    position: relative;

    z-index: 2;

    margin-top: 80px;

    padding: 25px 0;

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

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

}


.footer-bottom p,
.footer-legal {

    color: var(--color-text-muted);

    font-size: 12px;

}


.footer-legal {

    display: flex;

    align-items: center;

    gap: 10px;

}


.footer-legal a:hover {

    color: var(--color-text-primary);

}


/* ============================================================
   LARGE FOOTER STATEMENT
============================================================ */

.footer-statement {

    margin-top: 30px;

    text-align: center;

    font-family: var(--font-heading);

    font-size: clamp(
        80px,
        16vw,
        220px
    );

    font-weight: 700;

    line-height: 0.75;

    letter-spacing: -8px;

    color: transparent;

    -webkit-text-stroke: 1px rgba(226, 232, 240, 0.08);

    user-select: none;

}

/* ============================================================
   HAMBURGER ACTIVE STATE
============================================================ */

.menu-toggle.active span:nth-child(1) {

    transform:
        translateY(7px)
        rotate(45deg);

}


.menu-toggle.active span:nth-child(2) {

    opacity: 0;

}


.menu-toggle.active span:nth-child(3) {

    transform:
        translateY(-7px)
        rotate(-45deg);

}


body.menu-open {

    overflow: hidden;

}

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

.hero {

    min-height: 100vh;

    position: relative;

    display: flex;

    align-items: center;

    overflow: hidden;

    padding:
        140px 0
        100px;

}


/* ============================================================
   HERO BACKGROUND GRID
============================================================ */

.hero-grid {

    position: absolute;

    inset: 0;

    background-image:
        linear-gradient(
            rgba(148, 163, 184, 0.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(148, 163, 184, 0.035) 1px,
            transparent 1px
        );

    background-size:
        70px 70px;

    mask-image:
        radial-gradient(
            ellipse at center,
            black 20%,
            transparent 75%
        );

    pointer-events: none;

}

.hero::before {

    content: "";

    position: absolute;

    width: 700px;
    height: 700px;

    top: 5%;
    right: 15%;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(0, 240, 255, 0.045) 0%,
            rgba(0, 240, 255, 0.015) 35%,
            transparent 70%
        );

    pointer-events: none;

}

.hero::after {

    content: "";

    position: absolute;

    width: 420px;
    height: 420px;

    left: -180px;
    bottom: -250px;

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

    border-radius: 50%;

    box-shadow:
        0 0 0 30px rgba(0, 240, 255, 0.025),
        0 0 0 60px rgba(139, 92, 246, 0.02),
        0 0 0 90px rgba(0, 240, 255, 0.015);

    pointer-events: none;

}


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

.hero-glow {

    position: absolute;

    border-radius: 50%;

    filter: blur(100px);

    pointer-events: none;

}


.hero-glow-cyan {

    width: 500px;

    height: 500px;

    top: 5%;

    right: 5%;

    background:
        rgba(0, 240, 255, 0.075);

}


.hero-glow-purple {

    width: 450px;

    height: 450px;

    bottom: -15%;

    left: -10%;

    background:
        rgba(139, 92, 246, 0.075);

}


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

.hero-flash {

    position: absolute;

    width: 2px;

    height: 750px;

    top: -200px;

    right: 34%;

    background:
        linear-gradient(
            to bottom,
            transparent,
            rgba(0, 240, 255, 0.45),
            rgba(139, 92, 246, 0.35),
            transparent
        );

    transform:
        rotate(32deg);

    filter:
        blur(1px);

    opacity: 0;

    animation:
        heroFlash 1.8s ease-out 0.8s forwards;

}


@keyframes heroFlash {

    0% {

        opacity: 0;

        transform:
            rotate(32deg)
            translateY(-150px);

    }

    30% {

        opacity: 1;

    }

    100% {

        opacity: 0;

        transform:
            rotate(32deg)
            translateY(450px);

    }

}


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

.hero-container {

    position: relative;

    z-index: 5;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(480px, 0.9fr);

    align-items: center;

    gap: 70px;

}


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

.hero-content {

    max-width: 700px;

}


.hero-eyebrow {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    color: var(--color-accent-cyan);

    font-size: 12px;

    font-weight: 600;

    letter-spacing: 2.5px;

}


.eyebrow-dot {

    width: 7px;

    height: 7px;

    border-radius: 50%;

    background:
        var(--color-accent-cyan);

    box-shadow:
        0 0 14px
        rgba(0, 240, 255, 0.8);

    animation:
        glowPulse 2s ease-in-out infinite;

}


.hero-title {

    margin-top: 25px;

    font-size:
        clamp(52px, 5.8vw, 80px);

    letter-spacing:
        -3.5px;

    line-height:
        0.94;

    max-width:
        800px;

}


.hero-title .gradient-text {

    display: block;

}


.hero-description {

    max-width: 600px;

    margin-top: 30px;

    font-size: 17px;

    line-height: 1.8;

    color:
        var(--color-text-secondary);

}


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

.hero-actions {

    display: flex;

    align-items: center;

    gap: 14px;

    margin-top: 36px;

}


.btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 11px;

    min-height: 52px;

    padding:
        0 22px;

    border-radius:
        10px;

    font-size: 14px;

    font-weight: 600;

    transition:
        transform var(--transition-fast),
        box-shadow var(--transition-fast),
        border-color var(--transition-fast),
        background var(--transition-fast);

}


.btn span {

    font-size: 18px;

    transition:
        transform var(--transition-fast);

}


.btn:hover span {

    transform:
        translateX(4px);

}


.btn-primary {

    color: #06121A;

    background:
        var(--gradient-brand);

    box-shadow:
        0 8px 30px
        rgba(0, 240, 255, 0.08);

}


.btn-primary:hover {

    transform:
        translateY(-3px);

    box-shadow:
        0 12px 40px
        rgba(0, 240, 255, 0.18);

}


.btn-secondary {

    color:
        var(--color-text-primary);

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

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

}


.btn-secondary:hover {

    transform:
        translateY(-3px);

    border-color:
        var(--color-border-hover);

    background:
        rgba(0, 240, 255, 0.04);

}


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

.hero-note {

    display: flex;

    align-items: center;

    gap: 12px;

    margin-top: 45px;

    color:
        var(--color-text-muted);

    font-size: 11px;

    letter-spacing:
        1.8px;

    text-transform:
        uppercase;

}


.hero-note-line {

    width: 35px;

    height: 1px;

    background:
        var(--gradient-brand);

}


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

.hero-visual {

    position: relative;

    min-height: 570px;

    display: flex;

    align-items: center;

    justify-content: center;

}


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

.growth-dashboard {

    position: relative;

    width: min(
        100%,
        600px
    );

    padding: 28px;

    border:
        1px solid
        rgba(148, 163, 184, 0.16);

    border-radius:
        22px;

    background:
    linear-gradient(
        145deg,
        rgba(19, 30, 48, 0.96),
        rgba(10, 18, 32, 0.94)
    );

    box-shadow:
    0 35px 100px rgba(0, 0, 0, 0.45),
    0 0 80px rgba(0, 240, 255, 0.055);

    backdrop-filter:
        blur(18px);

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

    /* transform:
        perspective(1000px)
        rotateY(-3deg)
        rotateX(2deg); */
    
    transform:
    perspective(1400px)
    rotateY(-2deg)
    rotateX(1deg);
/* 
    animation:
        dashboardFloat 6s ease-in-out infinite; */

}


/* @keyframes dashboardFloat {

    0%,
    100% {

        transform:
            perspective(1000px)
            rotateY(-3deg)
            rotateX(2deg)
            translateY(0);

    }

    50% {

        transform:
            perspective(1000px)
            rotateY(-3deg)
            rotateX(2deg)
            translateY(-9px);

    }

} */


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

.dashboard-header {

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    padding-bottom: 22px;

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

}


.dashboard-label {

    display: block;

    color:
        var(--color-text-primary);

    font-family:
        var(--font-heading);

    font-size: 14px;

    font-weight: 600;

    letter-spacing:
        0.5px;

}


.dashboard-subtitle {

    display: block;

    margin-top: 4px;

    color:
        var(--color-text-muted);

    font-size: 11px;

}


.live-status {

    display: inline-flex;

    align-items: center;

    gap: 7px;

    padding:
        6px 9px;

    border:
        1px solid
        rgba(0, 240, 255, 0.15);

    border-radius:
        100px;

    color:
        var(--color-accent-cyan);

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

    font-size: 9px;

    font-weight: 600;

    letter-spacing:
        1.5px;

}


.live-dot {

    width: 5px;

    height: 5px;

    border-radius: 50%;

    background:
        var(--color-accent-cyan);

    box-shadow:
        0 0 10px
        var(--color-accent-cyan);

    animation:
        glowPulse 1.5s ease-in-out infinite;

}


/* ============================================================
   CHART AREA
============================================================ */

.chart-area {

    position: relative;

    height: 245px;

    margin-top: 20px;

    overflow: hidden;

}


.chart-grid {

    position: absolute;

    inset: 0;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

}


.chart-grid span {

    width: 100%;

    height: 1px;

    background:
        rgba(148, 163, 184, 0.07);

}


.growth-chart {

    position: absolute;

    left: 0;

    bottom: 10px;

    width: 100%;

    height: 200px;

    overflow: visible;

}


.chart-line {

    fill: none;

    stroke:
        url(#chartGradient);

    stroke-width:
        3.5;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;

    stroke-dasharray:
        1000;

    stroke-dashoffset:
        1000;

    animation:
        drawChart 2.2s
        cubic-bezier(.65, 0, .35, 1)
        0.8s forwards;

    filter:
        drop-shadow(
            0 0 9px
            rgba(0, 240, 255, 0.55)
        );

}


@keyframes drawChart {

    to {

        stroke-dashoffset:
            0;

    }

}


.chart-area-fill {

    fill:
        url(#chartFill);

    opacity:
        0;

    animation:
        chartFillIn 1.5s ease
        1.6s forwards;

}


@keyframes chartFillIn {

    to {

        opacity: 1;

    }

}


.chart-labels {

    position: absolute;

    bottom: 0;

    left: 0;

    width: 100%;

    display: flex;

    justify-content: space-between;

    color:
        var(--color-text-muted);

    font-size: 8px;

    letter-spacing:
        0.5px;

}


.chart-point {

    position: absolute;

    right: 1%;

    top: 7%;

    width: 13px;

    height: 13px;

    border:
        2px solid
        var(--color-accent-cyan);

    border-radius:
        50%;

    background:
        var(--color-bg-primary);

    box-shadow:
        0 0 18px
        rgba(0, 240, 255, 0.7);

    animation:
        pointPulse 2s
        ease-in-out infinite;

}


.chart-point span {

    position: absolute;

    width: 4px;

    height: 4px;

    top: 50%;

    left: 50%;

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

    border-radius:
        50%;

    background:
        var(--color-accent-cyan);

}


@keyframes pointPulse {

    0%,
    100% {

        transform:
            scale(1);

        opacity: 1;

    }

    50% {

        transform:
            scale(1.35);

        opacity: 0.7;

    }

}


/* ============================================================
   DASHBOARD METRICS
============================================================ */

.dashboard-metrics {

    display: grid;

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

    gap: 10px;

}


.metric-card {

    position: relative;

    padding:
        15px;

    border:
        1px solid
        rgba(148, 163, 184, 0.09);

    border-radius:
        12px;

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

    overflow: hidden;

}


.metric-card-highlight {

    border-color:
        rgba(0, 240, 255, 0.16);

    background:
        linear-gradient(
            145deg,
            rgba(0, 240, 255, 0.055),
            rgba(139, 92, 246, 0.035)
        );

}


.metric-label {

    display: block;

    color:
        var(--color-text-muted);

    font-size: 8px;

    letter-spacing:
        1.3px;

}


.metric-number {

    display: inline-block;

    margin-top: 5px;

    color:
        var(--color-text-primary);

    font-family:
        var(--font-heading);

    font-size: 25px;

    line-height: 1;

}


.metric-unit {

    margin-left: 3px;

    color:
        var(--color-accent-cyan);

    font-size: 7px;

    font-weight: 600;

    letter-spacing:
        1px;

}


.metric-progress {

    height: 2px;

    margin-top: 12px;

    border-radius:
        10px;

    background:
        rgba(148, 163, 184, 0.08);

}


.metric-progress span {

    display: block;

    width: 0;

    height: 100%;

    border-radius:
        inherit;

    background:
        var(--gradient-brand);

    animation:
        progressLoad 1.3s
        ease
        1.5s forwards;

    --target-width:
        var(--progress);

}


@keyframes progressLoad {

    to {

        width:
            var(--target-width);

    }

}


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

.dashboard-footer {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-top: 17px;

    padding-top: 15px;

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

    color:
        var(--color-text-muted);

    font-size: 8px;

    letter-spacing:
        1px;

}


.dashboard-arrow {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 24px;

    height: 24px;

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

    border-radius: 50%;

    color:
        var(--color-accent-cyan);

    font-size: 13px;

}


/* ============================================================
   FLOATING CARDS
============================================================ */

.floating-card {

    position: absolute;

    z-index: 4;

    display: flex;

    align-items: center;

    gap: 10px;

    padding:
        9px 12px;

    border:
        1px solid
        rgba(148, 163, 184, 0.14);

    border-radius:
        11px;

    background:
        rgba(15, 23, 42, 0.82);

    backdrop-filter:
        blur(15px);

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

    box-shadow:
        0 15px 35px
        rgba(0, 0, 0, 0.2);

}


.floating-card span {

    display: block;

    color:
        var(--color-text-muted);

    font-size: 7px;

    letter-spacing:
        1.2px;

}


.floating-card strong {

    display: block;

    margin-top: 2px;

    color:
        var(--color-text-primary);

    font-family:
        var(--font-heading);

    font-size: 10px;

}


.floating-icon {

    display: flex !important;

    align-items: center;

    justify-content: center;

    width: 28px;

    height: 28px;

    border-radius:
        8px;

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

    color:
        var(--color-accent-cyan) !important;

    font-size: 14px !important;

}


.floating-card-top {

    top: 13%;

    right: -18px;

    animation:
        floatingCardTop 5s
        ease-in-out
        infinite;

}


.floating-card-bottom {

    bottom: 9%;

    left: -20px;

    animation:
        floatingCardBottom 5.5s
        ease-in-out
        infinite;

}


.floating-check {

    display: flex !important;

    align-items: center;

    justify-content: center;

    width: 27px;

    height: 27px;

    border-radius:
        50%;

    color:
        var(--color-accent-cyan) !important;

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

    font-size: 13px !important;

}


@keyframes floatingCardTop {

    0%,
    100% {

        transform:
            translateY(0);

    }

    50% {

        transform:
            translateY(-5px);

    }

}


@keyframes floatingCardBottom {

    0%,
    100% {

        transform:
            translateY(0);

    }

    50% {

        transform:
            translateY(5px);

    }

}


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

.hero-orb {

    position: absolute;

    border-radius:
        50%;

    pointer-events:
        none;

}


.hero-orb-one {

    width: 8px;

    height: 8px;

    top: 18%;

    left: 8%;

    background:
        var(--color-accent-cyan);

    box-shadow:
        0 0 20px
        var(--color-accent-cyan);

    animation:
        orbFloatOne 4s
        ease-in-out
        infinite;

}


.hero-orb-two {

    width: 5px;

    height: 5px;

    right: 4%;

    bottom: 20%;

    background:
        var(--color-accent-purple);

    box-shadow:
        0 0 18px
        var(--color-accent-purple);

    animation:
        orbFloatTwo 5s
        ease-in-out
        infinite;

}


@keyframes orbFloatOne {

    0%,
    100% {

        transform:
            translate(0, 0);

    }

    50% {

        transform:
            translate(18px, -22px);

    }

}


@keyframes orbFloatTwo {

    0%,
    100% {

        transform:
            translate(0, 0);

    }

    50% {

        transform:
            translate(-20px, 15px);

    }

}


/* ============================================================
   SCROLL INDICATOR
============================================================ */

.hero-scroll-indicator {

    position: absolute;
    bottom: -65px;

    left: 50%;

    transform:
        translateX(-50%);

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 9px;

    color:
        var(--color-text-muted);

    font-size: 8px;

    letter-spacing:
        2px;

    z-index: 5;

}


.scroll-line {

    width: 1px;

    height: 35px;

    background:
        linear-gradient(
            to bottom,
            var(--color-accent-cyan),
            transparent
        );

    animation:
        scrollIndicator 2s
        ease-in-out
        infinite;

}


@keyframes scrollIndicator {

    0%,
    100% {

        opacity: 0.35;

        transform:
            scaleY(0.7);

        transform-origin:
            top;

    }

    50% {

        opacity: 1;

        transform:
            scaleY(1);

    }

}

.hero-visual {
    animation: heroVisualFloat 8s ease-in-out infinite;
}

@keyframes heroVisualFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-4px);
    }

}

/* ============================================================
   BRAND POSITIONING SECTION
============================================================ */

.positioning-section {

    position: relative;

    padding:
        50px 0;

    background:
        linear-gradient(
            180deg,
            #0F172A 0%,
            #111827 100%
        );

    overflow: hidden;

}


/* ------------------------------------------------------------
   Subtle background glow
------------------------------------------------------------ */

.positioning-section::before {

    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

    right: -250px;
    top: 50px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(139, 92, 246, 0.07),
            transparent 70%
        );

    pointer-events: none;

}


/* ------------------------------------------------------------
   Header
------------------------------------------------------------ */

.positioning-header {

    max-width: 780px;

}


.positioning-header h2 {

    margin-top: 22px;

    font-size:
        clamp(38px, 5vw, 64px);

    letter-spacing:
        -2.5px;

    line-height:
        1.02;

}


.positioning-header p {

    max-width: 680px;

    margin-top: 25px;

    font-size: 17px;

    line-height: 1.8;

}


/* ------------------------------------------------------------
   Pillars
------------------------------------------------------------ */

.positioning-pillars {

    display: grid;

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

    margin-top: 80px;

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

}


.positioning-pillar {

    position: relative;

    min-height: 250px;

    padding:
        32px 35px
        32px 0;

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

    transition:
        background var(--transition-medium),
        padding var(--transition-medium);

}


.positioning-pillar:not(:first-child) {

    padding-left: 35px;

}


.positioning-pillar:last-child {

    border-right: none;

}


.positioning-pillar:hover {

    background:
        linear-gradient(
            180deg,
            rgba(0, 240, 255, 0.025),
            transparent
        );

}


/* ------------------------------------------------------------
   Number
------------------------------------------------------------ */

.pillar-number {

    color:
        var(--color-accent-cyan);

    font-family:
        var(--font-heading);

    font-size:
        12px;

    font-weight:
        600;

    letter-spacing:
        1.5px;

}


/* ------------------------------------------------------------
   Content
------------------------------------------------------------ */

.pillar-content {

    margin-top:
        45px;

}


.pillar-content h3 {

    font-size:
        27px;

    letter-spacing:
        -0.5px;

}


.pillar-content p {

    max-width:
        260px;

    margin-top:
        12px;

    font-size:
        14px;

    line-height:
        1.7;

}


/* ------------------------------------------------------------
   Arrow
------------------------------------------------------------ */

.pillar-arrow {

    position: absolute;

    right: 25px;

    bottom: 30px;

    display: flex;

    align-items: center;

    justify-content: center;

    width: 34px;

    height: 34px;

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

    border-radius:
        50%;

    color:
        var(--color-text-muted);

    font-size:
        15px;

    transition:
        color var(--transition-fast),
        border-color var(--transition-fast),
        transform var(--transition-fast);

}


.positioning-pillar:hover .pillar-arrow {

    color:
        var(--color-accent-cyan);

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

    transform:
        translate(3px, -3px);

}

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

.services-section {

    position: relative;

    padding:
        20px 0;

    background:
        #0F172A;

    overflow: hidden;

}


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

.services-header {

    display: grid;

    grid-template-columns:
        1.2fr
        0.8fr;

    align-items: end;

    gap: 80px;

}


.services-heading h2 {

    margin-top:
        22px;

    max-width:
        700px;

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

    line-height:
        1;

    letter-spacing:
        -3px;

}


.services-heading .gradient-text {

    display:
        block;

}


.services-intro {

    display:
        flex;

    align-items:
        flex-start;

    gap:
        18px;

    padding-bottom:
        7px;

}


.services-intro-line {

    flex-shrink:
        0;

    width:
        35px;

    height:
        1px;

    margin-top:
        10px;

    background:
        var(--gradient-brand);

}


.services-intro p {

    max-width:
        360px;

    font-size:
        15px;

    line-height:
        1.8;

}


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

.services-system {

    display:
        grid;

    grid-template-columns:
        0.95fr
        1.05fr;

    gap:
        60px;

    margin-top:
        90px;

}


/* ============================================================
   SERVICE LIST
============================================================ */

.services-list {

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

}


.service-item {

    position:
        relative;

    display:
        grid;

    grid-template-columns:
        45px
        1fr
        40px;

    gap:
        15px;

    align-items:
        center;

    min-height:
        125px;

    padding:
        20px 0;

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

    transition:
        padding var(--transition-medium),
        background var(--transition-medium);

}


.service-item::before {

    content:
        "";

    position:
        absolute;

    left:
        -18px;

    top:
        0;

    bottom:
        0;

    width:
        2px;

    background:
        var(--gradient-brand);

    transform:
        scaleY(0);

    transform-origin:
        center;

    transition:
        transform var(--transition-medium);

}


.service-item:hover,
.service-item.active {

    padding-left:
        15px;

    background:
        linear-gradient(
            90deg,
            rgba(0, 240, 255, 0.025),
            transparent
        );

}


.service-item:hover::before,
.service-item.active::before {

    transform:
        scaleY(1);

}


.service-number {

    align-self:
        start;

    padding-top:
        4px;

    color:
        var(--color-accent-cyan);

    font-family:
        var(--font-heading);

    font-size:
        11px;

    font-weight:
        600;

    letter-spacing:
        1px;

}


.service-main h3 {

    color:
        var(--color-text-primary);

    font-family:
        var(--font-heading);

    font-size:
        22px;

    font-weight:
        500;

    letter-spacing:
        -0.4px;

}


.service-main p {

    max-width:
        400px;

    margin-top:
        6px;

    color:
        var(--color-text-muted);

    font-size:
        13px;

    line-height:
        1.6;

}


.service-arrow {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        34px;

    height:
        34px;

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

    border-radius:
        50%;

    color:
        var(--color-text-muted);

    font-size:
        14px;

    transition:
        color var(--transition-fast),
        border-color var(--transition-fast),
        transform var(--transition-fast);

}


.service-item:hover .service-arrow,
.service-item.active .service-arrow {

    color:
        var(--color-accent-cyan);

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

    transform:
        translate(3px, -3px);

}


/* ============================================================
   GROWTH ENGINE
============================================================ */

.growth-engine {

    position:
        relative;

    min-height:
        760px;

    border:
        1px solid
        rgba(148, 163, 184, 0.12);

    border-radius:
        24px;

    background:
        linear-gradient(
            145deg,
            rgba(19, 30, 48, 0.95),
            rgba(10, 18, 32, 0.97)
        );

    overflow:
        hidden;

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

}


/* ============================================================
   ENGINE GRID
============================================================ */

.engine-background-grid {

    position:
        absolute;

    inset:
        0;

    background-image:
        linear-gradient(
            rgba(148, 163, 184, 0.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(148, 163, 184, 0.035) 1px,
            transparent 1px
        );

    background-size:
        45px 45px;

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

}


/* ============================================================
   AMBIENT ENGINE GLOW
============================================================ */

.growth-engine::before {

    content:
        "";

    position:
        absolute;

    width:
        350px;

    height:
        350px;

    left:
        50%;

    top:
        45%;

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

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(0, 240, 255, 0.08),
            transparent 70%
        );

    filter:
        blur(20px);

}


/* ============================================================
   ORBITS
============================================================ */

.engine-orbit {

    position:
        absolute;

    left:
        50%;

    top:
        45%;

    border:
        1px solid
        rgba(0, 240, 255, 0.10);

    border-radius:
        50%;

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

}


.orbit-one {

    width:
        260px;

    height:
        260px;

}


.orbit-two {

    width:
        430px;

    height:
        430px;

    border-color:
        rgba(139, 92, 246, 0.09);

}


.orbit-three {

    width:
        600px;

    height:
        600px;

    border-color:
        rgba(0, 240, 255, 0.055);

}


/* ============================================================
   CORE
============================================================ */

.engine-core {

    position:
        absolute;

    left:
        50%;

    top:
        45%;

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

    width:
        155px;

    height:
        155px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

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

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(0, 240, 255, 0.10),
            rgba(15, 23, 42, 0.96) 65%
        );

    box-shadow:
        0 0 50px
        rgba(0, 240, 255, 0.08);

}


.engine-core::before {

    content:
        "";

    position:
        absolute;

    inset:
        9px;

    border:
        1px solid
        rgba(139, 92, 246, 0.2);

    border-radius:
        50%;

}


.engine-core-small {

    color:
        var(--color-text-muted);

    font-size:
        8px;

    letter-spacing:
        2px;

}


.engine-core strong {

    margin-top:
        5px;

    color:
        var(--color-text-primary);

    font-family:
        var(--font-heading);

    font-size:
        22px;

    letter-spacing:
        1px;

}


.engine-core-arrow {

    margin-top:
        8px;

    color:
        var(--color-accent-cyan);

    font-size:
        14px;

}


/* ============================================================
   ENGINE NODES
============================================================ */

.engine-node {

    position:
        absolute;

    z-index:
        5;

    display:
        flex;

    align-items:
        center;

    gap:
        8px;

    padding:
        9px 12px;

    border:
        1px solid
        rgba(148, 163, 184, 0.13);

    border-radius:
        8px;

    background:
        rgba(15, 23, 42, 0.86);

    backdrop-filter:
        blur(12px);

    color:
        var(--color-text-muted);

    font-size:
        8px;

    font-weight:
        600;

    letter-spacing:
        1px;

    transition:
        border-color var(--transition-medium),
        color var(--transition-medium),
        background var(--transition-medium),
        box-shadow var(--transition-medium),
        transform var(--transition-medium);

}


.node-icon {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        20px;

    height:
        20px;

    border-radius:
        5px;

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

    color:
        var(--color-accent-cyan);

    font-size:
        12px;

}


.engine-node:hover,
.engine-node.active {

    color:
        var(--color-text-primary);

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

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

    box-shadow:
        0 0 25px
        rgba(0, 240, 255, 0.07);

}


/* ============================================================
   NODE POSITIONS
============================================================ */

.node-seo {

    top:
        19%;

    left:
        19%;

}


.node-content {

    top:
        19%;

    right:
        17%;

}


.node-social {

    top:
        44%;

    left:
        5%;

}


.node-meta {

    top:
        44%;

    right:
        5%;

}


.node-google {

    bottom:
        22%;

    left:
        19%;

}


.node-ppc {

    bottom:
        22%;

    right:
        16%;

}


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

.engine-footer {

    position:
        absolute;

    bottom:
        25px;

    left:
        50%;

    transform:
        translateX(-50%);

    width:
        calc(100% - 50px);

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        10px;

    color:
        var(--color-text-muted);

    font-size:
        7px;

    letter-spacing:
        1.5px;

}


.engine-line {

    width:
        35px;

    height:
        1px;

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

}


/* ============================================================
   PROCESS SECTION
============================================================ */

.process-section {

    position: relative;

    padding:
        80px 0;

    background:
        #111827;

    overflow: hidden;

}


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

.process-header {

    max-width:
        760px;

}


.process-header h2 {

    margin-top:
        22px;

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

    letter-spacing:
        -3px;

}


.process-header p {

    max-width:
        650px;

    margin-top:
        25px;

    font-size:
        16px;

    line-height:
        1.8;

}


/* ============================================================
   TIMELINE
============================================================ */

.process-timeline {

    position:
        relative;

    margin-top:
        90px;

}


/* Vertical line */

.process-timeline::before {

    content:
        "";

    position:
        absolute;

    left:
        31px;

    top:
        0;

    bottom:
        0;

    width:
        1px;

    background:
        linear-gradient(
            to bottom,
            rgba(0, 240, 255, 0.35),
            rgba(139, 92, 246, 0.15),
            transparent
        );

}


/* ============================================================
   PROCESS STEP
============================================================ */

.process-step {

    position:
        relative;

    display:
        grid;

    grid-template-columns:
        64px
        1fr
        180px;

    gap:
        45px;

    min-height:
        220px;

    padding-bottom:
        70px;

}


.process-step:last-child {

    padding-bottom:
        0;

}


/* ============================================================
   MARKER
============================================================ */

.process-marker {

    position:
        relative;

    z-index:
        2;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        64px;

    height:
        64px;

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

    border-radius:
        50%;

    background:
        #111827;

    box-shadow:
        0 0 25px
        rgba(0, 240, 255, 0.035);

    transition:
        border-color var(--transition-medium),
        box-shadow var(--transition-medium),
        background var(--transition-medium);

}


.process-step:hover .process-marker {

    border-color:
        rgba(0, 240, 255, 0.6);

    background:
        rgba(0, 240, 255, 0.04);

    box-shadow:
        0 0 35px
        rgba(0, 240, 255, 0.08);

}


.process-marker span {

    color:
        var(--color-accent-cyan);

    font-family:
        var(--font-heading);

    font-size:
        12px;

    font-weight:
        600;

}


/* ============================================================
   PROCESS CONTENT
============================================================ */

.process-content {

    padding-top:
        4px;

}


.process-category {

    color:
        var(--color-accent-cyan);

    font-size:
        10px;

    font-weight:
        600;

    letter-spacing:
        2px;

}


.process-content h3 {

    max-width:
        650px;

    margin-top:
        13px;

    color:
        var(--color-text-primary);

    font-size:
        clamp(25px, 3vw, 36px);

    letter-spacing:
        -1px;

}


.process-content p {

    max-width:
        580px;

    margin-top:
        14px;

    color:
        var(--color-text-secondary);

    font-size:
        14px;

    line-height:
        1.8;

}


/* ============================================================
   SIDE TEXT
============================================================ */

.process-side-text {

    align-self:
        center;

    color:
        rgba(226, 232, 240, 0.08);

    font-family:
        var(--font-heading);

    font-size:
        13px;

    font-weight:
        600;

    letter-spacing:
        3px;

    writing-mode:
        vertical-rl;

    transform:
        rotate(180deg);

    transition:
        color var(--transition-medium);

}


.process-step:hover .process-side-text {

    color:
        rgba(0, 240, 255, 0.25);

}


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

.process-cta {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        40px;

    margin-top:
        100px;

    padding:
        45px 50px;

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

    border-radius:
        18px;

    background:
        linear-gradient(
            110deg,
            rgba(0, 240, 255, 0.045),
            rgba(139, 92, 246, 0.035)
        );

}


.process-cta > div > span {

    color:
        var(--color-accent-cyan);

    font-size:
        9px;

    font-weight:
        600;

    letter-spacing:
        2px;

}


.process-cta h3 {

    margin-top:
        9px;

    font-size:
        clamp(25px, 3vw, 35px);

    letter-spacing:
        -1px;

}

/* ============================================================
   WORK / CASE STUDIES SECTION
============================================================ */

.work-section {

    position: relative;

    padding:
        80px 0;

    background:
        #0F172A;

    overflow: hidden;

}


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

.work-header {

    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        60px;

}


.work-header h2 {

    margin-top:
        20px;

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

    line-height:
        1;

    letter-spacing:
        -3px;

}


.work-header p {

    max-width:
        390px;

    padding-bottom:
        5px;

    color:
        var(--color-text-secondary);

    font-size:
        15px;

    line-height:
        1.8;

}


/* ============================================================
   DEMO NOTICE
============================================================ */

.demo-notice {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        9px;

    margin-top:
        45px;

    padding:
        7px 11px;

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

    border-radius:
        100px;

    color:
        var(--color-text-muted);

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

    font-size:
        8px;

    font-weight:
        600;

    letter-spacing:
        1.3px;

}


.demo-notice-dot {

    width:
        5px;

    height:
        5px;

    border-radius:
        50%;

    background:
        var(--color-accent-cyan);

    box-shadow:
        0 0 10px
        rgba(0, 240, 255, 0.7);

}


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

.featured-project {

    display:
        grid;

    grid-template-columns:
        0.9fr
        1.1fr;

    min-height:
        590px;

    margin-top:
        30px;

    border:
        1px solid
        rgba(148, 163, 184, 0.12);

    border-radius:
        22px;

    background:
        linear-gradient(
            145deg,
            rgba(19, 30, 48, 0.75),
            rgba(10, 18, 32, 0.92)
        );

    overflow:
        hidden;

}


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

.project-info {

    display:
        flex;

    flex-direction:
        column;

    padding:
        42px;

}


.project-top {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

}


.project-number {

    color:
        var(--color-accent-cyan);

    font-family:
        var(--font-heading);

    font-size:
        12px;

    font-weight:
        600;

    letter-spacing:
        1.5px;

}


.project-type {

    color:
        var(--color-text-muted);

    font-size:
        8px;

    letter-spacing:
        1.5px;

}


.project-copy {

    margin-top:
        auto;

}


.project-category {

    color:
        var(--color-accent-cyan);

    font-size:
        9px;

    font-weight:
        600;

    letter-spacing:
        1.7px;

}


.project-copy h3 {

    max-width:
        520px;

    margin-top:
        17px;

    font-size:
        clamp(32px, 4vw, 50px);

    line-height:
        1;

    letter-spacing:
        -2px;

}


.project-copy p {

    max-width:
        500px;

    margin-top:
        22px;

    color:
        var(--color-text-secondary);

    font-size:
        14px;

    line-height:
        1.8;

}


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

.project-services {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        7px;

    margin-top:
        35px;

}


.project-services span {

    padding:
        7px 9px;

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

    border-radius:
        5px;

    color:
        var(--color-text-muted);

    font-size:
        7px;

    font-weight:
        600;

    letter-spacing:
        1px;

}


.project-link {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        9px;

    width:
        fit-content;

    margin-top:
        28px;

    color:
        var(--color-text-primary);

    font-size:
        12px;

    font-weight:
        600;

}


.project-link span {

    color:
        var(--color-accent-cyan);

    transition:
        transform var(--transition-fast);

}


.project-link:hover span {

    transform:
        translate(3px, -3px);

}


/* ============================================================
   CAMPAIGN VISUAL
============================================================ */

.campaign-visual {

    position:
        relative;

    min-height:
        100%;

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

    background:
        radial-gradient(
            circle at 55% 45%,
            rgba(0, 240, 255, 0.07),
            transparent 45%
        );

    overflow:
        hidden;

}


.campaign-grid {

    position:
        absolute;

    inset:
        0;

    background-image:
        linear-gradient(
            rgba(148, 163, 184, 0.04) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(148, 163, 184, 0.04) 1px,
            transparent 1px
        );

    background-size:
        50px 50px;

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

}


/* ============================================================
   CAMPAIGN GLOW
============================================================ */

.campaign-glow {

    position:
        absolute;

    width:
        380px;

    height:
        380px;

    left:
        50%;

    top:
        48%;

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

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(0, 240, 255, 0.08),
            transparent 70%
        );

    filter:
        blur(20px);

}


/* ============================================================
   CAMPAIGN CHART
============================================================ */

.campaign-chart {

    position:
        absolute;

    left:
        8%;

    bottom:
        16%;

    width:
        84%;

    height:
        48%;

}


.campaign-line {

    fill:
        none;

    stroke:
        url(#campaignGradient);

    stroke-width:
        3;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;

    stroke-dasharray:
        1000;

    stroke-dashoffset:
        1000;

    animation:
        campaignDraw 2.5s
        cubic-bezier(.65, 0, .35, 1)
        .5s forwards;

    filter:
        drop-shadow(
            0 0 8px
            rgba(0, 240, 255, 0.5)
        );

}


@keyframes campaignDraw {

    to {

        stroke-dashoffset:
            0;

    }

}


.campaign-fill {

    fill:
        url(#campaignFill);

    opacity:
        0;

    animation:
        campaignFill 1.5s ease
        1.8s forwards;

}


@keyframes campaignFill {

    to {

        opacity:
            1;

    }

}


/* ============================================================
   CAMPAIGN METRICS
============================================================ */

.campaign-metric {

    position:
        absolute;

    z-index:
        5;

    padding:
        12px 15px;

    border:
        1px solid
        rgba(148, 163, 184, 0.13);

    border-radius:
        9px;

    background:
        rgba(15, 23, 42, 0.86);

    backdrop-filter:
        blur(12px);

}


.campaign-metric span {

    display:
        block;

    color:
        var(--color-text-muted);

    font-size:
        7px;

    letter-spacing:
        1.2px;

}


.campaign-metric strong {

    display:
        block;

    margin-top:
        4px;

    color:
        var(--color-text-primary);

    font-family:
        var(--font-heading);

    font-size:
        22px;

}


.metric-one {

    top:
        19%;

    left:
        12%;

}


.metric-two {

    top:
        12%;

    right:
        10%;

}


.metric-three {

    bottom:
        15%;

    right:
        12%;

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

}


.campaign-corner-label {

    position:
        absolute;

    right:
        25px;

    bottom:
        22px;

    color:
        rgba(226, 232, 240, 0.25);

    font-size:
        7px;

    letter-spacing:
        1.5px;

}


/* ============================================================
   SMALL PROJECTS
============================================================ */

.small-projects {

    display:
        grid;

    grid-template-columns:
        1fr
        1fr;

    gap:
        20px;

    margin-top:
        20px;

}


.small-project {

    position:
        relative;

    display:
        grid;

    grid-template-columns:
        45px
        1fr
        40px;

    gap:
        20px;

    min-height:
        280px;

    padding:
        32px;

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

    border-radius:
        18px;

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

    transition:
        border-color var(--transition-medium),
        background var(--transition-medium),
        transform var(--transition-medium);

}


.small-project:hover {

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

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

    transform:
        translateY(-4px);

}


.small-project-number {

    color:
        var(--color-accent-cyan);

    font-family:
        var(--font-heading);

    font-size:
        11px;

}


.small-project-content span {

    color:
        var(--color-text-muted);

    font-size:
        8px;

    font-weight:
        600;

    letter-spacing:
        1.5px;

}


.small-project-content h3 {

    max-width:
        420px;

    margin-top:
        15px;

    font-size:
        25px;

    line-height:
        1.15;

    letter-spacing:
        -0.8px;

}


.small-project-content p {

    max-width:
        400px;

    margin-top:
        13px;

    color:
        var(--color-text-muted);

    font-size:
        13px;

    line-height:
        1.7;

}


.small-project-arrow {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    align-self:
        end;

    width:
        34px;

    height:
        34px;

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

    border-radius:
        50%;

    color:
        var(--color-text-muted);

    transition:
        color var(--transition-fast),
        border-color var(--transition-fast),
        transform var(--transition-fast);

}


.small-project:hover .small-project-arrow {

    color:
        var(--color-accent-cyan);

    border-color:
        rgba(0, 240, 255, 0.3);

    transform:
        translate(3px, -3px);

}

/* ============================================================
   TESTIMONIALS SECTION
============================================================ */

.testimonials-section {

    position: relative;

    padding:
        5px 0;

    background:
        #111827;

    overflow: hidden;

}


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

.testimonials-header {

    max-width:
        750px;

}


.testimonials-header h2 {

    margin-top:
        20px;

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

    line-height:
        1;

    letter-spacing:
        -3px;

}


.testimonial-demo-note {

    display:
        inline-block;

    margin-top:
        30px;

    color:
        var(--color-text-muted);

    font-size:
        8px;

    font-weight:
        600;

    letter-spacing:
        1.5px;

}


/* ============================================================
   SLIDER
============================================================ */

.testimonial-slider {

    position:
        relative;

    min-height:
        500px;

    margin-top:
        65px;

    padding:
        60px 80px 45px;

    border:
        1px solid
        rgba(148, 163, 184, 0.12);

    border-radius:
        22px;

    background:
        linear-gradient(
            135deg,
            rgba(19, 30, 48, 0.85),
            rgba(10, 18, 32, 0.95)
        );

    overflow:
        hidden;

}


/* ============================================================
   BACKGROUND GLOW
============================================================ */

.testimonial-slider::before {

    content:
        "";

    position:
        absolute;

    width:
        500px;

    height:
        500px;

    left:
        50%;

    top:
        50%;

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

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(0, 240, 255, 0.045),
            transparent 70%
        );

    pointer-events:
        none;

}


/* ============================================================
   QUOTE MARK
============================================================ */

.quote-mark {

    position:
        absolute;

    top:
        25px;

    right:
        60px;

    color:
        rgba(0, 240, 255, 0.08);

    font-family:
        Georgia,
        serif;

    font-size:
        180px;

    line-height:
        1;

    pointer-events:
        none;

}


/* ============================================================
   TESTIMONIAL
============================================================ */

.testimonial {

    position:
        absolute;

    inset:
        60px 80px 100px;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        space-between;

    opacity:
        0;

    visibility:
        hidden;

    transform:
        translateX(25px);

    transition:
        opacity 450ms ease,
        transform 450ms ease,
        visibility 450ms ease;

}


.testimonial.active {

    position:
        absolute;

    opacity:
        1;

    visibility:
        visible;

    transform:
        translateX(0);

}


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

.testimonial-content {

    position:
        relative;

    z-index:
        2;

    max-width:
        900px;

}


.testimonial-content blockquote {

    color:
        var(--color-text-primary);

    font-family:
        var(--font-heading);

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

    font-weight:
        500;

    line-height:
        1.12;

    letter-spacing:
        -2px;

}


/* ============================================================
   AUTHOR
============================================================ */

.testimonial-author {

    display:
        flex;

    align-items:
        center;

    gap:
        13px;

}


.author-avatar {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        44px;

    height:
        44px;

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

    border-radius:
        50%;

    color:
        var(--color-accent-cyan);

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

    font-family:
        var(--font-heading);

    font-size:
        11px;

    font-weight:
        600;

}


.testimonial-author strong {

    display:
        block;

    color:
        var(--color-text-primary);

    font-family:
        var(--font-heading);

    font-size:
        13px;

}


.testimonial-author span {

    display:
        block;

    margin-top:
        4px;

    color:
        var(--color-text-muted);

    font-size:
        10px;

}


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

.testimonial-navigation {

    position:
        absolute;

    z-index:
        5;

    right:
        45px;

    bottom:
        35px;

    display:
        flex;

    align-items:
        center;

    gap:
        18px;

}


.testimonial-prev,
.testimonial-next {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        36px;

    height:
        36px;

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

    border-radius:
        50%;

    color:
        var(--color-text-muted);

    background:
        transparent;

    cursor:
        pointer;

    transition:
        color var(--transition-fast),
        border-color var(--transition-fast),
        background var(--transition-fast);

}


.testimonial-prev:hover,
.testimonial-next:hover {

    color:
        var(--color-accent-cyan);

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

    background:
        rgba(0, 240, 255, 0.04);

}


.testimonial-progress {

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    color:
        var(--color-text-muted);

    font-size:
        8px;

    letter-spacing:
        1px;

}


.testimonial-current {

    color:
        var(--color-accent-cyan);

}


.testimonial-progress-line {

    position:
        relative;

    width:
        70px;

    height:
        1px;

    background:
        rgba(148, 163, 184, 0.15);

    overflow:
        hidden;

}


.testimonial-progress-line span {

    position:
        absolute;

    left:
        0;

    top:
        0;

    width:
        33.333%;

    height:
        100%;

    background:
        var(--gradient-brand);

    transition:
        width 400ms ease;

}


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

.final-cta-section {

    position:
        relative;

    padding:
        120px 0;

    background:
        #0F172A;

    overflow:
        hidden;

}


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

.final-cta-grid {

    position:
        absolute;

    inset:
        0;

    background-image:
        linear-gradient(
            rgba(148, 163, 184, 0.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(148, 163, 184, 0.035) 1px,
            transparent 1px
        );

    background-size:
        60px 60px;

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

}


/* ============================================================
   GLOW
============================================================ */

.final-cta-glow {

    position:
        absolute;

    width:
        650px;

    height:
        650px;

    left:
        50%;

    top:
        50%;

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

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(0, 240, 255, 0.08),
            rgba(139, 92, 246, 0.035) 35%,
            transparent 70%
        );

    filter:
        blur(15px);

}


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

.final-cta {

    position:
        relative;

    z-index:
        2;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    text-align:
        center;

}


.final-cta-label {

    color:
        var(--color-accent-cyan);

    font-size:
        10px;

    font-weight:
        600;

    letter-spacing:
        2.5px;

}


.final-cta h2 {

    max-width:
        900px;

    margin-top:
        22px;

    font-size:
        clamp(52px, 7vw, 92px);

    line-height:
        0.98;

    letter-spacing:
        -4px;

}


.final-cta p {

    margin-top:
        25px;

    color:
        var(--color-text-secondary);

    font-size:
        16px;

}


.final-cta-button {

    margin-top:
        35px;

    min-width:
        210px;

}

/* ============================================================
   ABOUT PAGE
============================================================ */


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

.about-hero {
    position: relative;
    min-height: 680px;
    overflow: hidden;
    padding: 100px 0 90px;
}

.about-hero-grid {
    position: absolute;
    inset: 0;
    pointer-events: none;

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

    mask-image: linear-gradient(
        to bottom,
        black 0%,
        rgba(0,0,0,.5) 60%,
        transparent 100%
    );
}

.about-hero-glow {
    position: absolute;

    width: 520px;
    height: 520px;

    right: 4%;
    top: 100px;

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

    filter: blur(100px);
    border-radius: 50%;

    pointer-events: none;
}


/* Main container */

.about-hero-container {
    position: relative;
    z-index: 2;

    min-height: 520px;

    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    align-items: center;

    gap: 70px;
}


/* Left side */

.about-hero-content {
    max-width: 680px;
}

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

.about-hero-content h1 {
    margin: 0;

    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(64px, 6vw, 94px);
    line-height: 0.98;
    letter-spacing: -0.055em;

    color: #E2E8F0;
}

.about-hero-content h1 .gradient-text {
    display: inline;
}

.about-hero-content p {
    max-width: 650px;

    margin-top: 38px;

    font-size: 18px;
    line-height: 1.8;

    color: #8FA6C5;
}


/* =========================================================
   IMPACT VISUAL
========================================================= */

.about-hero-visual {
    position: relative;

    width: 520px;
    height: 520px;

    justify-self: end;

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


/* Orbits */

.impact-orbit {
    position: absolute;

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

    border-radius: 50%;
}

.orbit-1 {
    width: 260px;
    height: 260px;
}

.orbit-2 {
    width: 390px;
    height: 390px;

    border-color: rgba(139, 92, 246, 0.12);
}

.orbit-3 {
    width: 520px;
    height: 520px;

    border-color: rgba(0, 240, 255, 0.08);
}


/* Central circle */

.impact-core {
    position: relative;
    z-index: 3;

    width: 155px;
    height: 155px;

    border-radius: 50%;

    border: 1px solid rgba(0, 240, 255, 0.55);

    background:
        radial-gradient(
            circle at center,
            rgba(0, 240, 255, 0.12),
            rgba(15, 23, 42, 0.95) 70%
        );

    box-shadow:
        0 0 45px rgba(0, 240, 255, 0.08),
        inset 0 0 35px rgba(0, 240, 255, 0.05);

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

    text-align: center;
}

.impact-core span {
    font-size: 8px;
    letter-spacing: 4px;
    color: #64748B;
    margin-bottom: 10px;
}

.impact-core strong {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 23px;
    letter-spacing: -0.02em;
    color: #E2E8F0;
}

.impact-core small {
    margin-top: 10px;

    font-size: 6px;
    letter-spacing: 1.8px;

    color: #526987;
}


/* ============================================================
   STORY
============================================================ */

.story-section {

    padding: 60px 0;

    background: #111827;

}


.story-layout {

    display: grid;

    grid-template-columns: .3fr 1fr;

    gap: 100px;

}


.story-label {

    display: flex;

    align-items: flex-start;

    gap: 15px;

    color: var(--color-text-muted);

    font-size: 12px;

    font-weight: 600;

    letter-spacing: 1.8px;

}


.story-label span {

    color: var(--color-accent-cyan);

}


.story-content {

    max-width: 850px;

}


.story-content h2 {

    font-size: clamp(40px, 5vw, 65px);

    line-height: 1;

    letter-spacing: -3px;

}


.story-content p {

    max-width: 700px;

    margin-top: 25px;

    color: var(--color-text-secondary);

    font-size: 16px;

    line-height: 1.85;

}


.story-content p + p {

    margin-top: 15px;

}


/* ============================================================
   BELIEFS
============================================================ */

.beliefs-section {

    padding: 50px 0;

    background: #0F172A;

}


.beliefs-header {

    max-width: 650px;

}


.beliefs-header h2 {

    margin-top: 20px;

    font-size: clamp(40px, 5vw, 62px);

    line-height: 1;

    letter-spacing: -2.5px;

}


.beliefs-grid {

    display: grid;

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

    margin-top: 65px;

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

}


.belief-card {

    position: relative;

    min-height: 310px;

    padding: 30px;

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

    transition:
        background var(--transition-medium),
        transform var(--transition-medium);

}


.belief-card:first-child {

    padding-left: 0;

}


.belief-card:last-child {

    border-right: none;

}


.belief-card:hover {

    background:
        linear-gradient(
            180deg,
            rgba(0, 240, 255, .025),
            transparent
        );

}


.belief-number {

    color: var(--color-accent-cyan);

    font-family: var(--font-heading);

    font-size: 10px;

    letter-spacing: 1.5px;

}


.belief-icon {

    margin-top: 55px;

    color: var(--color-accent-cyan);

    font-size: 28px;

}


.belief-card h3 {

    max-width: 280px;

    margin-top: 22px;

    font-size: 24px;

    line-height: 1.15;

    letter-spacing: -.7px;

}


.belief-card p {

    max-width: 290px;

    margin-top: 12px;

    color: var(--color-text-muted);

    font-size: 13px;

    line-height: 1.7;

}


/* ============================================================
   APPROACH
============================================================ */

.approach-section {

    padding: 70px 0;

    background: #111827;

}


.approach-layout {

    display: grid;

    grid-template-columns: .8fr 1.2fr;

    gap: 100px;

}


.approach-heading h2 {

    margin-top: 20px;

    font-size: clamp(45px, 5.5vw, 70px);

    line-height: .98;

    letter-spacing: -3px;

}


.approach-content {

    padding-top: 40px;

}


.approach-lead {

    color: var(--color-text-primary) !important;

    font-family: var(--font-heading);

    font-size: 24px !important;

    line-height: 1.35 !important;

}


.approach-content > p {

    max-width: 600px;

    margin-top: 20px;

    color: var(--color-text-secondary);

    font-size: 15px;

    line-height: 1.8;

}


.approach-flow {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 30px;

    margin-top: 55px;

    padding-top: 25px;

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

}

.approach-flow > div > span {
    font-size: 10px;
}


.approach-flow > div:not(.flow-arrow) {

    display: flex;

    flex-direction: column;

    gap: 10px;

    color: var(--color-text-primary);

    font-family: var(--font-heading);

    font-size: 16px;

}


.approach-flow span {

    color: var(--color-accent-cyan);

    font-size: 8px;

    letter-spacing: 1px;

}


.flow-arrow {

    color: var(--color-text-muted);

}


/* ============================================================
   TEAM
============================================================ */

.team-section {

    padding: 80px 0;

    background: #0F172A;

}


.team-header {

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 50px;

}


.team-header h2 {

    margin-top: 20px;

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

    line-height: 1;

    letter-spacing: -3px;

}


.team-header p {

    max-width: 280px;

    color: var(--color-text-muted);

    font-size: 12px;

    line-height: 1.7;

}


.team-grid {

    display: grid;

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

    gap: 16px;

    margin-top: 60px;

}


.team-card {

    overflow: hidden;

}


.team-image {

    position: relative;

    aspect-ratio: .82;

    overflow: hidden;

    border-radius: 12px;

    background: #172033;

}


.team-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    filter: grayscale(100%);

    transition:
        transform 600ms ease,
        filter 600ms ease;

}


.team-image-overlay {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            transparent 50%,
            rgba(15, 23, 42, .8)
        );

}


.team-index {

    position: absolute;

    left: 15px;

    top: 15px;

    color: var(--color-accent-cyan);

    font-family: var(--font-heading);

    font-size: 9px;

}


.team-card:hover img {

    transform: scale(1.04);

    filter: grayscale(0%);

}


.team-info {

    padding-top: 17px;

}


.team-info h3 {

    font-size: 17px;

    letter-spacing: -.3px;

}


.team-info span {

    display: block;

    margin-top: 5px;

    color: var(--color-text-muted);

    font-size: 10px;

}


/* ============================================================
   VALUES
============================================================ */

.values-section {

    padding: 80px 0;

    background: #111827;

}


.values-content {

    max-width: 950px;

}


.values-content h2 {

    margin-top: 25px;

    font-size: clamp(48px, 6vw, 80px);

    line-height: .98;

    letter-spacing: -4px;

}


.values-content p {

    max-width: 570px;

    margin-top: 30px;

    color: var(--color-text-secondary);

    font-size: 15px;

    line-height: 1.8;

}


/* ============================================================
   ABOUT FINAL CTA
============================================================ */

.about-final-cta {

    padding: 20px 0;

    background: #0F172A;

}


.about-cta-box {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 40px;

    padding: 50px;

    border: 1px solid rgba(0, 240, 255, .12);

    border-radius: 20px;

    background:
        linear-gradient(
            110deg,
            rgba(0, 240, 255, .04),
            rgba(139, 92, 246, .035)
        );

}


.about-cta-box > div > span {

    color: var(--color-accent-cyan);

    font-size: 9px;

    font-weight: 600;

    letter-spacing: 2px;

}


.about-cta-box h2 {

    margin-top: 10px;

    font-size: clamp(30px, 4vw, 48px);

    line-height: 1;

    letter-spacing: -2px;

}


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


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

.services-page-hero {
    position: relative;

    padding: 125px 0 105px;

    overflow: hidden;
}

.services-page-grid {
    position: absolute;
    inset: 0;

    background-image:
        linear-gradient(
            rgba(148, 163, 184, 0.025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(148, 163, 184, 0.025) 1px,
            transparent 1px
        );

    background-size: 64px 64px;

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

    pointer-events: none;
}

.services-page-hero-container {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns: 1.2fr 0.8fr;

    align-items: end;

    gap: 80px;
}

.services-page-hero-content {
    max-width: 850px;
}

.services-page-hero-content h1 {
    margin-top: 22px;

    max-width: 850px;

    font-size: clamp(58px, 6vw, 88px);

    line-height: 0.98;

    letter-spacing: -4px;
}

.services-page-hero-content p {
    max-width: 650px;

    margin-top: 30px;

    color: var(--color-text-secondary);

    font-size: 17px;

    line-height: 1.8;
}

.services-page-hero-side {
    max-width: 300px;

    justify-self: end;

    padding-bottom: 8px;
}

.services-page-side-number {
    display: block;

    color: var(--color-accent-cyan);

    font-family: var(--font-heading);

    font-size: 52px;

    line-height: 1;
}

.services-page-side-label {
    display: block;

    margin-top: 12px;

    color: var(--color-text-muted);

    font-size: 8px;

    letter-spacing: 2px;
}

.services-page-side-line {
    width: 100%;

    height: 1px;

    margin: 25px 0;

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

.services-page-hero-side p {
    color: var(--color-text-muted);

    font-size: 13px;

    line-height: 1.75;
}


/* ============================================================
   SERVICE LIST
============================================================ */

.services-page-list {
    padding: 100px 0 120px;

    background: #111827;
}

.services-page-list-header {
    max-width: 850px;
}

.services-page-list-header h2 {
    margin-top: 20px;

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

    line-height: 1;

    letter-spacing: -3px;
}


/* Six cards */

.services-page-grid-list {
    display: grid;

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

    margin-top: 65px;

    border-top: 1px solid var(--color-border);
    border-left: 1px solid var(--color-border);
}

.services-page-card {
    position: relative;

    min-height: 330px;

    padding: 32px;

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

    background: transparent;

    overflow: hidden;

    transition:
        background .35s ease,
        transform .35s ease;
}

.services-page-card::before {
    content: "";

    position: absolute;

    width: 220px;
    height: 220px;

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

    border-radius: 50%;

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

    filter: blur(55px);

    opacity: 0;

    transition: opacity .4s ease;
}

.services-page-card:hover {
    background:
        linear-gradient(
            135deg,
            rgba(0, 240, 255, 0.035),
            transparent 55%
        );

    transform: translateY(-4px);
}

.services-page-card:hover::before {
    opacity: 1;
}


/* Card top */

.services-page-card-top {
    display: flex;

    align-items: center;

    justify-content: space-between;
}

.services-page-card-number {
    color: var(--color-accent-cyan);

    font-family: var(--font-heading);

    font-size: 9px;

    letter-spacing: 1px;
}

.services-page-card-arrow {
    width: 32px;
    height: 32px;

    display: flex;

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

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

    border-radius: 50%;

    color: var(--color-text-muted);

    font-size: 14px;

    transition:
        border-color .3s ease,
        color .3s ease,
        transform .3s ease;
}

.services-page-card:hover .services-page-card-arrow {
    border-color: var(--color-accent-cyan);

    color: var(--color-accent-cyan);

    transform: translate(2px, -2px);
}


/* Icon */

.services-page-card-icon {
    width: 48px;
    height: 48px;

    display: flex;

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

    margin-top: 48px;

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

    border-radius: 10px;

    color: var(--color-accent-cyan);

    font-size: 21px;

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


/* Text */

.services-page-card h3 {
    max-width: 480px;

    margin-top: 25px;

    font-family: var(--font-heading);

    font-size: 25px;

    line-height: 1.15;

    letter-spacing: -0.5px;
}

.services-page-card p {
    max-width: 500px;

    margin-top: 12px;

    color: var(--color-text-muted);

    font-size: 13px;

    line-height: 1.75;
}


/* Tags */

.services-page-card-tags {
    display: flex;

    flex-wrap: wrap;

    gap: 7px;

    margin-top: 22px;
}

.services-page-card-tags span {
    padding: 6px 9px;

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

    border-radius: 4px;

    color: #64748B;

    font-size: 8px;

    letter-spacing: 0.8px;
}


/* ============================================================
   CONNECTING STATEMENT
============================================================ */

.services-page-statement {
    padding: 115px 0;

    background: #0F172A;
}

.services-page-statement-inner {
    max-width: 900px;

    margin: 0 auto;

    text-align: center;
}

.services-page-statement-inner h2 {
    margin-top: 20px;

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

    line-height: 1;

    letter-spacing: -3px;
}

.services-page-statement-inner p {
    max-width: 650px;

    margin: 28px auto 0;

    color: var(--color-text-secondary);

    font-size: 15px;

    line-height: 1.8;
}


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

@media (max-width: 900px) {

    .services-page-hero-container {
        grid-template-columns: 1fr;

        gap: 45px;
    }

    .services-page-hero-side {
        justify-self: start;

        max-width: 450px;
    }

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

}


@media (max-width: 600px) {

    .services-page-hero {
        padding: 90px 0 75px;
    }

    .services-page-hero-content h1 {
        font-size: 50px;

        letter-spacing: -2.5px;
    }

    .services-page-list {
        padding: 75px 0 85px;
    }

    .services-page-list-header h2,
    .services-page-statement-inner h2 {
        letter-spacing: -2px;
    }

    .services-page-card {
        min-height: auto;

        padding: 25px;
    }

    .services-page-card-icon {
        margin-top: 35px;
    }

    .services-page-statement {
        padding: 85px 0;
    }

}



/* ============================================================
   TESTIMONIALS PAGE
============================================================ */


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

.testimonials-page-hero {

    position: relative;

    padding: 120px 0 100px;

    overflow: hidden;
}

.testimonials-page-grid {

    position: absolute;

    inset: 0;

    background-image:
        linear-gradient(
            rgba(148,163,184,.025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(148,163,184,.025) 1px,
            transparent 1px
        );

    background-size: 64px 64px;

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

.testimonials-page-hero-content {

    position: relative;

    z-index: 2;

    max-width: 850px;
}

.testimonials-page-hero-content h1 {

    margin-top: 22px;

    font-size:
        clamp(58px, 6vw, 88px);

    line-height: .98;

    letter-spacing: -4px;
}

.testimonials-page-hero-content p {

    max-width: 600px;

    margin-top: 30px;

    color: var(--color-text-secondary);

    font-size: 17px;

    line-height: 1.8;
}


/* ============================================================
   TESTIMONIAL CARDS
============================================================ */

.testimonials-page-list {

    padding: 90px 0 120px;

    background: #111827;
}

.testimonials-demo-note {

    color: var(--color-text-muted);

    font-size: 8px;

    letter-spacing: 1.7px;
}

.testimonials-page-cards {

    display: grid;

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

    margin-top: 35px;

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

    border-left: 1px solid var(--color-border);
}

.testimonial-page-card {

    position: relative;

    min-height: 450px;

    padding: 32px;

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

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

    transition:
        background .35s ease,
        transform .35s ease;
}

.testimonial-page-card:hover {

    background:
        linear-gradient(
            145deg,
            rgba(0,240,255,.035),
            transparent
        );

    transform: translateY(-4px);
}

.testimonial-page-number {

    color: var(--color-accent-cyan);

    font-family: var(--font-heading);

    font-size: 11px;

    letter-spacing: 1px;
}

.testimonial-page-quote {

    margin-top: 55px;

    color: rgba(0,240,255,.25);

    font-family: Georgia, serif;

    font-size: 75px;

    line-height: .6;
}

.testimonial-page-card blockquote {

    max-width: 420px;

    margin-top: 25px;

    color: var(--color-text-primary);

    font-family: var(--font-heading);

    font-size: 22px;

    line-height: 1.35;

    letter-spacing: -.5px;
}


/* Author */

.testimonial-page-author {

    position: absolute;

    left: 32px;

    bottom: 30px;

    display: flex;

    align-items: center;

    gap: 12px;
}

.testimonial-page-avatar {

    width: 50px;

    height: 50px;

    display: flex;

    align-items: center;

    justify-content: center;

    border:
        1px solid
        rgba(0,240,255,.25);

    border-radius: 50%;

    color: var(--color-accent-cyan);

    background:
        rgba(0,240,255,.04);

    font-family: var(--font-heading);

    font-size: 11px;
}

.testimonial-page-author strong {

    display: block;

    color: var(--color-text-primary);

    font-family: var(--font-heading);

    font-size: 15px;
}

.testimonial-page-author span {

    display: block;

    margin-top: 4px;

    color: var(--color-text-muted);

    font-size: 13px;
}


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

.testimonials-page-statement {

    padding: 120px 0;

    background: #0F172A;
}

.testimonials-statement-inner {

    max-width: 850px;

    margin: 0 auto;

    text-align: center;
}

.testimonials-statement-inner h2 {

    margin-top: 20px;

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

    line-height: 1;

    letter-spacing: -3px;
}

.testimonials-statement-inner p {

    max-width: 600px;

    margin: 28px auto 0;

    color: var(--color-text-secondary);

    font-size: 15px;

    line-height: 1.8;
}


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

@media (max-width: 900px) {

    .testimonials-page-cards {

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

    .testimonial-page-card:last-child {

        grid-column:
            1 / -1;
    }

}

@media (max-width: 600px) {

    .testimonials-page-hero {

        padding: 90px 0 75px;
    }

    .testimonials-page-hero-content h1 {

        font-size: 48px;

        letter-spacing: -2.5px;
    }

    .testimonials-page-list {

        padding: 70px 0 85px;
    }

    .testimonials-page-cards {

        grid-template-columns: 1fr;
    }

    .testimonial-page-card:last-child {

        grid-column: auto;
    }

    .testimonial-page-card {

        min-height: 400px;

        padding: 25px;
    }

    .testimonial-page-author {

        left: 25px;

        bottom: 25px;
    }

    .testimonials-page-statement {

        padding: 85px 0;
    }

}

/* ============================================================
   CONTACT PAGE
============================================================ */


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

.contact-page-hero {

    position: relative;

    padding: 120px 0 95px;

    overflow: hidden;
}

.contact-page-grid {

    position: absolute;

    inset: 0;

    background-image:
        linear-gradient(
            rgba(148,163,184,.025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(148,163,184,.025) 1px,
            transparent 1px
        );

    background-size: 64px 64px;

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

.contact-page-hero-content {

    position: relative;

    z-index: 2;

    max-width: 850px;
}

.contact-page-hero-content h1 {

    margin-top: 22px;

    font-size:
        clamp(58px, 6vw, 88px);

    line-height: .98;

    letter-spacing: -4px;
}

.contact-page-hero-content p {

    max-width: 650px;

    margin-top: 30px;

    color: var(--color-text-secondary);

    font-size: 17px;

    line-height: 1.8;
}


/* ============================================================
   CONTACT CONTENT
============================================================ */

.contact-page-section {

    padding: 95px 0 120px;

    background: #111827;
}

.contact-page-layout {

    display: grid;

    grid-template-columns:
        .8fr 1.2fr;

    gap: 100px;

    align-items: start;
}


/* ============================================================
   CONTACT INFO
============================================================ */

.contact-page-info {

    padding-top: 15px;
}

.contact-page-info h2 {

    margin-top: 20px;

    font-size:
        clamp(40px, 4.5vw, 58px);

    line-height: 1;

    letter-spacing: -2.5px;
}

.contact-page-info > p {

    max-width: 430px;

    margin-top: 25px;

    color: var(--color-text-secondary);

    font-size: 14px;

    line-height: 1.8;
}

.contact-details {

    margin-top: 50px;

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

.contact-detail {

    padding: 22px 0;

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

.contact-detail span {

    display: block;

    color: var(--color-text-muted);

    font-size: 8px;

    letter-spacing: 1.7px;
}

.contact-detail strong,
.contact-detail a {

    display: block;

    margin-top: 8px;

    color: var(--color-text-primary);

    font-family: var(--font-heading);

    font-size: 14px;

    text-decoration: none;

    transition:
        color .25s ease;
}

.contact-detail a:hover {

    color: var(--color-accent-cyan);
}


/* Social */

.contact-social {

    margin-top: 40px;
}

.contact-social > span {

    color: var(--color-text-muted);

    font-size: 8px;

    letter-spacing: 1.7px;
}

.contact-social > div {

    display: flex;

    flex-wrap: wrap;

    gap: 18px;

    margin-top: 14px;
}

.contact-social a {

    color: var(--color-text-secondary);

    font-size: 11px;

    text-decoration: none;

    transition:
        color .25s ease;
}

.contact-social a:hover {

    color: var(--color-accent-cyan);
}


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

.contact-page-form-wrapper {

    position: relative;
}

.contact-page-form {

    padding: 42px;

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

    border-radius: 16px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.025),
            rgba(255,255,255,.008)
        );

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

.contact-form-heading {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    margin-bottom: 35px;

    padding-bottom: 20px;

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

.contact-form-heading > span {

    color: var(--color-accent-cyan);

    font-size: 9px;

    font-weight: 600;

    letter-spacing: 1.7px;
}

.contact-form-heading p {

    color: var(--color-text-muted);

    font-size: 9px;
}


/* Form group */

.contact-form-group {

    margin-top: 24px;
}

.contact-form-group label {

    display: block;

    margin-bottom: 9px;

    color: var(--color-text-secondary);

    font-size: 10px;

    font-weight: 500;
}

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

    width: 100%;

    padding: 13px 14px;

    border:
        1px solid
        rgba(148,163,184,.12);

    border-radius: 6px;

    outline: none;

    background:
        rgba(15,23,42,.55);

    color: var(--color-text-primary);

    font-family: var(--font-body);

    font-size: 12px;

    transition:
        border-color .25s ease,
        box-shadow .25s ease;
}

.contact-form-group input::placeholder,
.contact-form-group textarea::placeholder {

    color: #4B5E78;
}

.contact-form-group select {

    cursor: pointer;
}

.contact-form-group textarea {

    min-height: 130px;

    resize: vertical;
}

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

    border-color:
        rgba(0,240,255,.4);

    box-shadow:
        0 0 0 3px
        rgba(0,240,255,.05);
}


/* Validation */

.contact-form-group.has-error input,
.contact-form-group.has-error textarea {

    border-color:
        rgba(248,113,113,.6);
}

.form-error {

    display: block;

    min-height: 14px;

    margin-top: 6px;

    color: #F87171;

    font-size: 9px;
}


/* Submit */

.contact-submit {

    width: 100%;

    margin-top: 28px;

    justify-content: center;
}


/* Success */

.contact-form-success {

    display: none;

    align-items: flex-start;

    gap: 12px;

    margin-top: 22px;

    padding: 14px;

    border:
        1px solid
        rgba(0,240,255,.15);

    border-radius: 7px;

    background:
        rgba(0,240,255,.035);
}

.contact-form-success.show {

    display: flex;
}

.contact-form-success > span {

    color: var(--color-accent-cyan);

    font-size: 16px;
}

.contact-form-success strong {

    display: block;

    color: var(--color-text-primary);

    font-size: 11px;
}

.contact-form-success p {

    margin-top: 4px;

    color: var(--color-text-muted);

    font-size: 9px;
}


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

.contact-page-statement {

    padding: 110px 0;

    background: #0F172A;
}

.contact-statement-inner {

    max-width: 850px;

    margin: 0 auto;

    text-align: center;
}

.contact-statement-inner h2 {

    margin-top: 20px;

    font-size:
        clamp(44px, 5vw, 68px);

    line-height: .98;

    letter-spacing: -3px;
}


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

@media (max-width: 900px) {

    .contact-page-layout {

        grid-template-columns: 1fr;

        gap: 65px;
    }

    .contact-page-info {

        padding-top: 0;
    }

}


@media (max-width: 600px) {

    .contact-page-hero {

        padding: 90px 0 75px;
    }

    .contact-page-hero-content h1 {

        font-size: 48px;

        letter-spacing: -2.5px;
    }

    .contact-page-section {

        padding: 70px 0 85px;
    }

    .contact-page-info h2 {

        font-size: 40px;
    }

    .contact-page-form {

        padding: 25px;
    }

    .contact-form-heading {

        flex-direction: column;

        align-items: flex-start;

        gap: 8px;
    }

    .contact-page-statement {

        padding: 85px 0;
    }

}



/* ============================================================
   FINAL POLISH — GLOBAL SPACING
============================================================ */

section {
    position: relative;
}

.container {
    width: min(1120px, calc(100% - 48px));
    margin-inline: auto;
}


/* Standard section spacing */

.about-page-section,
.services-page-section,
.testimonials-page-list,
.testimonials-page-statement,
.contact-page-section,
.contact-page-statement {
    padding-top: 90px;
    padding-bottom: 90px;
}


/* Keep major hero sections slightly larger */

.hero,
.about-page-hero,
.testimonials-page-hero,
.contact-page-hero {
    padding-top: 100px;
    padding-bottom: 85px;
}



/* ============================================================
   FINAL POLISH — TYPOGRAPHY
============================================================ */

h1,
h2,
h3,
h4 {
    text-wrap: balance;
}

p {
    text-wrap: pretty;
}

.hero h1,
.about-page-hero h1,
.testimonials-page-hero h1,
.contact-page-hero h1 {
    letter-spacing: -3px;
}

.gradient-text {
    background:
        linear-gradient(
            90deg,
            #8BE9F2 0%,
            #00F0FF 42%,
            #8B5CF6 100%
        );

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

    -webkit-text-fill-color: transparent;
}

/* ============================================================
   FINAL POLISH — BUTTONS
============================================================ */

.btn,
.nav-cta,
.final-cta-button,
.contact-submit {
    transition:
        transform .25s ease,
        box-shadow .25s ease,
        filter .25s ease;
}

.btn-primary:hover,
.nav-cta:hover,
.final-cta-button:hover,
.contact-submit:hover {

    transform: translateY(-2px);

    filter: brightness(1.06);

    box-shadow:
        0 10px 30px rgba(0, 240, 255, .12);
}

.btn-primary:active,
.nav-cta:active,
.final-cta-button:active,
.contact-submit:active {

    transform: translateY(0);
}

/* ============================================================
   TEXT LINKS
============================================================ */

a {
    -webkit-tap-highlight-color: transparent;
}

.footer-column a,
.contact-social a {

    position: relative;

    transition:
        color .25s ease,
        padding-left .25s ease;
}

.footer-column a:hover,
.contact-social a:hover {

    color: #E2E8F0;

    padding-left: 3px;
}

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

.site-footer {

    position: relative;

    border-top:
        1px solid
        rgba(148, 163, 184, 0.07);
}


.footer-container {

    padding-top: 75px;
    padding-bottom: 65px;
}


.footer-bottom {

    padding-top: 22px;
    padding-bottom: 22px;

    border-top:
        1px solid
        rgba(148, 163, 184, 0.08);
}

@media (max-width: 600px) {

    .container {
        width: min(
            100% - 32px,
            1120px
        );
    }

    .section-label {
        font-size: 9px;
        letter-spacing: 1.5px;
    }

    .site-footer .footer-container {
        padding-top: 55px;
        padding-bottom: 45px;
    }
}


/* ============================================================
   ACCESSIBILITY — REDUCED MOTION
============================================================ */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {

        animation-duration: 0.01ms !important;

        animation-iteration-count: 1 !important;

        transition-duration: 0.01ms !important;

        scroll-behavior: auto !important;
    }
}


/* ============================================================
   FINAL HERO VISUAL
   Simple Digital Growth Snapshot
============================================================ */

.growth-snapshot {

    position: relative;

    width: min(100%, 500px);

    margin-left: auto;

    padding: 34px;

    border: 1px solid
        rgba(148, 163, 184, 0.12);

    border-radius: 16px;

    background:
        linear-gradient(
            145deg,
            rgba(30, 41, 59, 0.92),
            rgba(15, 23, 42, 0.96)
        );

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

    overflow: hidden;
}


/* Subtle cyan glow */

.growth-snapshot::before {

    content: "";

    position: absolute;

    width: 220px;
    height: 220px;

    top: -120px;
    right: -90px;

    border-radius: 50%;

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

    filter: blur(55px);

    pointer-events: none;
}


/* Header */

.snapshot-header {

    position: relative;

    z-index: 1;

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 20px;

    padding-bottom: 24px;

    border-bottom:
        1px solid
        rgba(148, 163, 184, 0.10);
}


.snapshot-label {

    display: block;

    color: #00F0FF;

    font-family:
        var(--font-heading);

    font-size: 8px;

    font-weight: 600;

    letter-spacing: 1.8px;
}


.snapshot-header h3 {

    margin-top: 8px;

    color: var(--color-text-primary);

    font-family:
        var(--font-heading);

    font-size: 20px;

    font-weight: 600;

    letter-spacing: -.5px;
}


.snapshot-status {

    padding: 6px 9px;

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

    border-radius: 4px;

    color: #00F0FF;

    font-size: 7px;

    font-weight: 600;

    letter-spacing: 1.2px;
}


/* Main highlight */

.snapshot-highlight {

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 20px;

    padding: 32px 0 26px;
}


.snapshot-small-label {

    display: block;

    color: var(--color-text-muted);

    font-size: 8px;

    letter-spacing: 1.2px;
}


.snapshot-highlight strong {

    display: block;

    margin-top: 5px;

    color: var(--color-text-primary);

    font-family:
        var(--font-heading);

    font-size: 48px;

    line-height: 1;

    letter-spacing: -2px;
}


.snapshot-growth {

    padding-bottom: 5px;

    color: #00F0FF;

    font-family:
        var(--font-heading);

    font-size: 11px;

    font-weight: 600;
}


/* Metrics */

.snapshot-metrics {

    display: flex;

    flex-direction: column;

    gap: 22px;
}


.snapshot-metric {

    position: relative;
}


.snapshot-metric-top {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 9px;
}


.snapshot-metric-top span {

    color: var(--color-text-secondary);

    font-size: 9px;

    letter-spacing: .8px;
}


.snapshot-metric-top strong {

    color: var(--color-text-primary);

    font-family:
        var(--font-heading);

    font-size: 10px;
}


/* Progress */

.snapshot-progress {

    width: 100%;

    height: 4px;

    border-radius: 10px;

    background:
        rgba(148, 163, 184, 0.10);

    overflow: hidden;
}


.snapshot-progress span {

    display: block;

    width: var(--progress);

    height: 100%;

    border-radius: inherit;

    background:
        linear-gradient(
            90deg,
            #00F0FF,
            #8B5CF6
        );

    transform-origin: left;

    animation:
        snapshotProgress 1.2s ease both;
}


@keyframes snapshotProgress {

    from {
        transform: scaleX(0);
    }

    to {
        transform: scaleX(1);
    }

}


/* Services */

.snapshot-services {

    display: grid;

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

    gap: 10px;

    margin-top: 32px;

    padding-top: 24px;

    border-top:
        1px solid
        rgba(148, 163, 184, 0.10);
}


.snapshot-service {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 7px;

    padding: 10px 6px;

    border:
        1px solid
        rgba(148, 163, 184, 0.08);

    border-radius: 5px;

    color: var(--color-text-muted);

    font-size: 7px;

    letter-spacing: 1px;

    transition:
        border-color .25s ease,
        color .25s ease,
        transform .25s ease;
}


.snapshot-service span {

    color: #00F0FF;

    font-size: 9px;
}


.snapshot-service:hover {

    transform: translateY(-2px);

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

    color: var(--color-text-primary);
}


/* Footer */

.snapshot-footer {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    margin-top: 25px;

    color: var(--color-text-muted);

    font-size: 7px;

    letter-spacing: 1px;
}


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

@media (max-width: 900px) {

    .growth-snapshot {

        width: 100%;

        margin: 0 auto;

    }

}


@media (max-width: 500px) {

    .growth-snapshot {

        padding: 25px;
    }

    .snapshot-highlight strong {

        font-size: 42px;
    }

    .snapshot-footer {

        flex-direction: column;

        align-items: flex-start;

        gap: 7px;
    }

}