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

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: #020b18;
    color: #f4f7ff;
    font-family: Inter, Segoe UI, Arial, sans-serif;
    line-height: 1.45;
}

body:before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 70% 0, #06295a55, transparent 34%),
        radial-gradient(circle at 0 70%, #05224a44, transparent 30%);
    z-index: -1;
}


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

.nav {
    height: 72px;
    position: sticky;
    top: 0;
    z-index: 20;

    display: flex;
    align-items: center;

    padding: 0 5.5%;

    background: #020b18e8;
    border-bottom: 1px solid #11335a;

    backdrop-filter: blur(12px);
}

.brand {
    width: 160px;
    height: auto;
    object-fit: contain;
}
/* PC navbar logo only */
.nav .brand {
    transform: translateX(-80px);
}

.nav nav {
    margin: auto;

    display: flex;
    gap: 38px;
}


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

a {
    color: #edf4ff;
    text-decoration: none;
}

.nav a:hover,
footer a:hover {
    color: #25c8ff;
}


/* ==========================================================
   BUTTONS
========================================================== */

.btn {
    display: inline-block;

    padding: 13px 25px;

    border: 1px solid #188dff;
    border-radius: 8px;

    background: linear-gradient(
        110deg,
        #197cff,
        #8338ff
    );

    box-shadow: 0 0 18px #168cff55;

    font-weight: 600;
}

.btn.ghost {
    background: #061426cc;
    box-shadow: none;
}

.btn.small {
    padding: 9px 18px;
}


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

.menu {
    display: none;

    margin-left: auto;

    background: none;
    color: white;

    border: 0;

    font-size: 24px;
}


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

.hero {
    min-height: 560px;

    display: grid;
    grid-template-columns: 44% 56%;

    border-bottom: 1px solid #11335a;

    overflow: hidden;
}

.hero-copy {
    padding: 70px 0 45px 6%;
}


/* Hero Eyebrow */

.eyebrow {
    font-size: 12px;
    letter-spacing: 3px;
    color: #d8e5f9;

    margin-bottom: 12px;
}


/* Hero Heading */

.hero h1 {
    font-size: 54px;
    line-height: 0.98;

    margin: 10px 0 18px;

    letter-spacing: -1.5px;
}

.hero h1 span,
.impact h2 span {
    background: linear-gradient(
        90deg,
        #1ed3ff,
        #2a8dff,
        #a832ff
    );

    -webkit-background-clip: text;
    color: transparent;
}


/* Hero Description */

.hero-copy > p {
    font-size: 18px;

    max-width: 500px;

    color: #d2d9e7;
}


/* ==========================================================
   HERO ACTION BUTTONS
========================================================== */

.actions {
    display: flex;
    gap: 18px;

    margin: 26px 0;
}


/* ==========================================================
   HERO PROOF / HIGHLIGHTS
========================================================== */

.proof {
    display: flex;

    margin-top: 30px;
}

.proof > div {
    padding-right: 30px;
    margin-right: 30px;

    border-right: 1px solid #26425e;
}

.proof > div:last-child {
    border: 0;
}

.proof small {
    color: #b8c5d6;
}


/* ==========================================================
   HERO ART / IMAGE
========================================================== */

.hero-art {
    position: relative;

    min-height: 520px;
}

.hero-slider-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    opacity: 0;
    transition: opacity 0.6s ease-in-out;
}

.hero-slider-image.active {
    opacity: 1;
}


/* Gradient over hero image */

.hero-art:after {
    content: "";

    position: absolute;
    inset: 0;

    z-index: 1;
    pointer-events: none;

    background: linear-gradient(
        90deg,
        #020b18 0%,
        transparent 28%,
        transparent 80%,
        #020b1844
    );
}


/* AutoMeta Logo over Hero */

.hero-logo {
    position: absolute !important;

    z-index: 2;

    width: 48% !important;
    height: auto !important;

    object-fit: contain !important;

    left: 60%;
    top: 45%;

    filter: drop-shadow(0 8px 16px #000);
}


/* ==========================================================
   GENERAL SECTIONS
========================================================== */

.section {
    padding: 32px 5.5%;

    border-bottom: 1px solid #102c4a;
}

.section h2 {
    font-size: 29px;

    margin: 4px 0 8px;
}

.section > p {
    margin: 0 0 18px;

    color: #c8d2df;
}


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

.cards {
    display: grid;
    gap: 16px;
}

.five {
    grid-template-columns: repeat(5, 1fr);
}

.four {
    grid-template-columns: repeat(4, 1fr);
}


/* ==========================================================
   GENERAL CARD
========================================================== */

.card {
    padding: 18px;

    border: 1px solid #17477d;
    border-radius: 9px;

    background: linear-gradient(
        145deg,
        #07182b,
        #03101e
    );

    box-shadow: inset 0 0 25px #0b3a6a22;
}

.card h3 {
    margin: 9px 0 6px;
}

.card p {
    margin: 0;

    color: #c9d3e1;

    font-size: 14px;
}


/* ==========================================================
   CARD ICONS
========================================================== */

.ico {
    font-size: 42px;

    color: #20baff;

    text-shadow: 0 0 12px #1ca6ff;
}

.purple {
    color: #9d35ff;
}

.cyan {
    color: #10e4e8;
}


/* Separate image assets */

.card-icon {
    width: 54px;
    height: 54px;

    object-fit: contain;

    display: block;

    margin-bottom: 14px;
}


/* ==========================================================
   HOW WE WORK / PROCESS
========================================================== */

.process {
    padding-top: 28px;
}

.steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);

    position: relative;

    text-align: center;

    margin-top: 26px;
}


/* Connecting line */

.steps:before {
    content: "";

    position: absolute;

    top: 22px;
    left: 7%;
    right: 7%;

    height: 3px;

    background: linear-gradient(
        90deg,
        #14cfff,
        #3c70ff,
        #a62aff
    );
}

.steps > div {
    position: relative;

    padding: 0 20px;
}


/* Step Numbers */

.steps b {
    display: grid;
    place-items: center;

    width: 46px;
    height: 46px;

    margin: auto;

    border: 3px solid #1ab6ff;
    border-radius: 50%;

    background: #05204a;

    position: relative;
    z-index: 2;
}

.steps > div:nth-child(n+3) b {
    border-color: #a12fff;
}

.steps h3 {
    margin: 8px 0 2px;
}

.steps p {
    margin: 0;

    font-size: 13px;

    color: #c5d0dd;
}


/* ==========================================================
   SOLUTION CARDS
========================================================== */

.solution {
    padding: 0 0 15px;

    overflow: hidden;
}

.solution img {
    width: 100%;
    height: 120px;

    object-fit: cover;
}

.solution h3,
.solution p {
    padding-left: 15px;
    padding-right: 15px;
}


/* ==========================================================
   IMPACT / BENEFITS SECTION
========================================================== */

.impact {
    padding: 28px 5.5%;

    display: grid;
    grid-template-columns: 1.1fr 1fr;

    align-items: center;

    border-bottom: 1px solid #11335a;

    background: linear-gradient(
        90deg,
        #061a35,
        #020b18
    );
}

.impact h2 {
    font-size: 30px;
    line-height: 1.25;
}


/* ==========================================================
   BENEFITS
========================================================== */

.benefits {
    display: grid;
    grid-template-columns: repeat(4, 1fr);

    text-align: center;
}

.benefits > div,
.about-icons > div {
    font-size: 34px;

    color: #20c8ff;
}

.benefits small,
.about-icons small {
    display: block;

    color: #e7effa;

    font-size: 13px;
}

.benefits img {
    width: 48px;
    height: 48px;

    object-fit: contain;

    display: block;

    margin: 0 auto 8px;
}


/* ==========================================================
   ABOUT SECTION
========================================================== */

.about {
    display: grid;
    grid-template-columns: 1.1fr 1fr;

    gap: 42px;

    align-items: center;
}

.about > div > p {
    color: #cbd5e2;
}


/* ==========================================================
   ABOUT ICONS
========================================================== */

.about-icons {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 22px;
}

.about-icons > div {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
}

/* Fixed icon area keeps all icons aligned */
.about-icons img {
    width: 46px;
    height: 46px;
    object-fit: contain;
    display: block;
    margin: 0 auto 12px;
}

.about-icons small {
    display: block;
    width: 100%;
    margin: 0;
    color: #e7effa;
    font-size: 13px;
    line-height: 1.3;
    text-align: center;
}

/* ==========================================================
   CTA — START A PROJECT
========================================================== */

.cta {
    position: relative;

    min-height: 250px;

    border: 1px solid #174d89;
    border-radius: 10px;

    overflow: hidden;
}


/* CTA Background */

.cta > img {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;
}


/* CTA Dark Overlay */

.cta:after {
    content: "";

    position: absolute;
    inset: 0;

    background: linear-gradient(
        90deg,
        #061329f5 0%,
        #061329d8 45%,
        transparent 100%
    );
}


/* CTA Content */

.cta-copy {
    position: relative;

    z-index: 2;

    padding: 28px;

    max-width: 66%;
}

.cta-copy h2 {
    font-size: 29px;
    line-height: 1.05;
}

.cta-copy p {
    font-size: 14px;

    color: #d2dbe8;
}


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

footer {
    padding: 20px 5.5% 25px;
}

.footer-top {
    display: flex;
    align-items: center;
}

.footer-top nav {
    display: flex;

    gap: 34px;

    margin: auto;
}


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

.contact {
    display: flex;
    align-items: center;

    gap: 18px;
}

.contact a {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 25px;
    height: 25px;

    border-radius: 4px;

    color: #77b7ff;
}

.contact img {
    width: 25px;
    height: 25px;

    object-fit: contain;

    vertical-align: middle;
}

.contact span {
    display: inline-flex;
    align-items: center;

    gap: 7px;

    font-size: 13px;
}


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

.footer-bottom {
    display: flex;
    justify-content: space-between;

    margin-top: 22px;

    font-size: 11px;

    color: #91a6c0;

    letter-spacing: 0.2px;
}

.footer-bottom span:last-child {
    letter-spacing: 3px;
}


/* ==========================================================
   TABLET / SMALL DESKTOP
   Screens 900px and below
========================================================== */

@media (max-width: 900px) {

    /* Navigation */

    .nav nav,
    .nav > .btn {
        display: none;
    }

    .menu {
        display: block;
    }


    /* Open Mobile Navigation */

    .nav.open nav {
        display: flex;

        position: absolute;

        top: 72px;
        left: 0;
        right: 0;

        flex-direction: column;

        gap: 0;

        background: #020b18;

        padding: 20px;
    }

    .nav.open nav a {
        padding: 12px;
    }


    /* Hero */

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

    .hero-copy {
        padding: 55px 7%;
    }

    .hero-art {
        min-height: 360px;
    }


    /* Cards */

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

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


    /* About + Impact */

    .about,
    .impact {
        grid-template-columns: 1fr;
    }


    /* Process */

    .steps {
        grid-template-columns: 1fr 1fr;

        gap: 25px;
    }

    .steps:before {
        display: none;
    }


    /* Footer */

    .footer-top {
        flex-wrap: wrap;

        gap: 20px;
    }

    .footer-top nav {
        order: 3;

        width: 100%;

        justify-content: center;
    }

    .contact {
        margin-left: auto;
    }
}


/* ==========================================================
   MOBILE
   Screens 560px and below
========================================================== */

@media (max-width: 560px) {

    /* Logo */

    .brand {
        width: 140px;
    }

    .nav > a:first-child {
        margin-left: 30px;
    }

    /* Hero */

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

    .actions {
        flex-direction: column;

        align-items: flex-start;
    }


    /* Hero Proof */

    .proof {
        gap: 14px;
    }

    .proof > div {
        padding-right: 12px;

        margin-right: 0;
    }


    /* Cards + Process */

    .five,
    .four,
    .steps {
        grid-template-columns: 1fr;
    }


    /* Impact */

    .impact h2 {
        font-size: 25px;
    }


    /* Benefits + About Icons */

    .benefits,
    .about-icons {
        grid-template-columns: repeat(2, 1fr);

        gap: 20px;
    }


    /* CTA */

    .cta-copy {
        max-width: 90%;
    }


    /* Footer Navigation */

    .footer-top nav {
        display: grid;

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

        gap: 10px;
    }


    /* Contact */

    .contact {
        width: 100%;

        margin: 0;
    }


    /* Footer Bottom */

    .footer-bottom {
        flex-direction: column;

        gap: 12px;
    }
}

/* ==========================================================
   DASHBOARD SLIDE ONLY
========================================================== */



/* SEO service-page additions */
.service-link{display:inline-block;margin-top:14px;color:#72e6ff;text-decoration:none;font-weight:700}.service-link:hover{text-decoration:underline}.service-page{max-width:1100px;margin:0 auto;padding:150px 6% 80px}.service-page h1{font-size:clamp(42px,6vw,72px);line-height:1.02;margin:14px 0 22px}.service-page h2{font-size:32px;margin-top:48px}.service-page p,.service-page li{font-size:17px;line-height:1.75;color:#c9d3df}.service-page .lead{font-size:21px;max-width:850px}.service-page .content-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:28px 0}.service-page .info-box{border:1px solid rgba(255,255,255,.12);border-radius:18px;padding:24px;background:rgba(255,255,255,.03)}.service-page .breadcrumbs{font-size:14px;margin-bottom:30px}.service-page .breadcrumbs a{color:#9fdfff;text-decoration:none}.service-page .faq{margin-top:22px}.service-page .faq h3{margin-bottom:8px}.service-page .back-link{display:inline-block;margin-top:40px}@media(max-width:760px){.service-page{padding-top:120px}.service-page .content-grid{grid-template-columns:1fr}}

/* V2 SEO discovery grid */
.seo-services{max-width:1200px;margin:0 auto}.seo-link-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:28px}.seo-link-grid .info-box{border:1px solid rgba(255,255,255,.12);border-radius:18px;padding:22px;background:rgba(255,255,255,.03)}.info-box h3 a{color:inherit;text-decoration:none}@media(max-width:760px){.seo-link-grid{grid-template-columns:1fr}}