/* ========================================
   COULD WE STUDIO
   FULL STYLESHEET
======================================== */


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

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

html {
    scroll-behavior: smooth;
}

body {
    overflow-x: hidden;

    background: #070912;
    color: #f5f2fa;

    font-family: Arial, Helvetica, sans-serif;
}


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

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

    width: 100%;
    z-index: 10;

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

    padding: 28px 5vw;

    background: linear-gradient(
        to bottom,
        rgba(7, 9, 18, 0.75),
        transparent
    );
}

.brand {
    display: inline-flex;
    align-items: center;

    text-decoration: none;
}

.brand-logo {
    display: block;

    width: 190px;
    height: auto;

    object-fit: contain;
}

.desktop-nav {
    display: flex;
    align-items: center;
    gap: 34px;
}

.desktop-nav a {
    color: rgba(255, 255, 255, 0.82);

    text-decoration: none;

    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.16em;

    transition:
        color 0.2s ease,
        text-shadow 0.2s ease;
}

.desktop-nav a:hover {
    color: #91fff5;

    text-shadow:
        0 0 14px rgba(86, 231, 220, 0.7);
}


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

.hero {
    position: relative;

    min-height: 100vh;
    min-height: 100svh;

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

    padding: 120px 6vw 90px;

    overflow: hidden;

    background-image:
        linear-gradient(
            rgba(4, 6, 14, 0.08),
            rgba(4, 6, 14, 0.18)
        ),
        url("desktopherobackground.png");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.hero::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 18%;

    background: linear-gradient(
        to bottom,
        transparent,
        #070912
    );

    pointer-events: none;
}


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

.hero-content {
    position: relative;
    z-index: 2;

    width: min(900px, 92vw);

    padding: 35px 25px;

    text-align: center;

    transform: translateY(-4vh);

    background: radial-gradient(
        ellipse at center,
        rgba(7, 9, 18, 0.24) 0%,
        rgba(7, 9, 18, 0.08) 48%,
        transparent 72%
    );

    text-shadow:
        0 3px 22px rgba(0, 0, 0, 0.85);
}

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

    color: #9cf8ef;

    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.26em;
}

.hero h1 {
    font-family: Georgia, "Times New Roman", serif;

    font-size: clamp(3rem, 5vw, 5.4rem);
    font-weight: 400;
    line-height: 0.98;

    letter-spacing: -0.035em;

    white-space: nowrap;
}

.hero h2 {
    margin-top: 14px;

    font-family: Georgia, "Times New Roman", serif;

    font-size: clamp(1.8rem, 3vw, 3.3rem);
    font-weight: 400;
    font-style: italic;

    color: #c5b8ff;

    text-shadow:
        0 0 12px rgba(142, 124, 255, 0.95),
        0 0 30px rgba(116, 238, 229, 0.35),
        0 3px 22px rgba(0, 0, 0, 0.95);
}

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

    margin: 28px auto 0;

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

    font-size: clamp(0.95rem, 1.3vw, 1.15rem);
    line-height: 1.7;
}


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

.hero-buttons {
    display: flex;
    justify-content: center;
    gap: 16px;

    margin-top: 34px;
}

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

    min-width: 170px;

    padding: 15px 24px;

    border: 1px solid transparent;
    border-radius: 4px;

    text-decoration: none;

    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.14em;

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

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

.button-primary {
    color: #080a13;

    background: linear-gradient(
        135deg,
        #8e7cff,
        #76eee5
    );

    box-shadow:
        0 0 24px rgba(109, 226, 220, 0.28),
        0 0 30px rgba(130, 92, 255, 0.22);
}

.button-primary:hover {
    box-shadow:
        0 0 30px rgba(109, 226, 220, 0.48),
        0 0 38px rgba(130, 92, 255, 0.34);
}

.button-secondary {
    color: #ffffff;

    border-color: rgba(169, 156, 255, 0.7);

    background: rgba(7, 9, 18, 0.45);

    backdrop-filter: blur(5px);
}

.button-secondary:hover {
    border-color: #7ee7df;

    background: rgba(7, 9, 18, 0.72);

    box-shadow:
        0 0 22px rgba(126, 231, 223, 0.18);
}


/* ========================================
   EXPLORE
======================================== */

.hero-scroll {
    position: absolute;
    z-index: 3;

    left: 50%;
    bottom: 28px;

    transform: translateX(-50%);

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;

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

    text-decoration: none;

    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.25em;
}

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

    background: linear-gradient(
        to bottom,
        #8f7cff,
        #72eee4
    );
}


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

.services-section {
    position: relative;

    overflow: hidden;

    padding: 95px 6vw 115px;

    background:
        linear-gradient(
            180deg,
            #070912 0%,
            #090a16 50%,
            #070912 100%
        );
}

.services-inner {
    position: relative;
    z-index: 2;

    width: min(1180px, 100%);

    margin: 0 auto;
}


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

.services-glow {
    position: absolute;

    width: 650px;
    height: 650px;

    border-radius: 50%;

    filter: blur(120px);

    opacity: 0.12;

    pointer-events: none;
}

.services-glow-purple {
    top: 5%;
    left: -350px;

    background: #784dff;
}

.services-glow-teal {
    right: -350px;
    bottom: 0;

    background: #41e5da;
}


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

.section-heading {
    max-width: 800px;

    margin: 0 auto 48px;

    text-align: center;
}

.section-eyebrow {
    margin-bottom: 18px;

    color: #82eee5;

    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.3em;
}

.section-heading h2 {
    font-family: Georgia, "Times New Roman", serif;

    font-size: clamp(2.4rem, 4vw, 4rem);
    font-weight: 400;
    line-height: 1.05;

    letter-spacing: -0.035em;
}

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

    margin: 25px auto 0;

    color: rgba(238, 235, 247, 0.72);

    font-size: 1rem;
    line-height: 1.7;
}


/* ========================================
   SERVICE CARDS
======================================== */

.services-grid {
    display: grid;

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

    gap: 22px;
}

.service-card {
    position: relative;

    min-height: 275px;

    padding: 38px;

    overflow: hidden;

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

    border-radius: 8px;

    background:
        linear-gradient(
            145deg,
            rgba(20, 21, 42, 0.78),
            rgba(9, 11, 24, 0.72)
        );

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 18px 60px rgba(0, 0, 0, 0.18);

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

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

    position: absolute;

    right: -70px;
    bottom: -100px;

    width: 230px;
    height: 230px;

    border-radius: 50%;

    filter: blur(50px);

    opacity: 0.09;

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

.purple-card::after {
    background: #8d6cff;
}

.teal-card::after {
    background: #5ce7dc;
}

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

.purple-card:hover {
    border-color:
        rgba(157, 126, 255, 0.45);

    box-shadow:
        0 20px 70px rgba(90, 52, 170, 0.13);
}

.teal-card:hover {
    border-color:
        rgba(105, 235, 224, 0.4);

    box-shadow:
        0 20px 70px rgba(38, 150, 146, 0.11);
}

.service-card:hover::after {
    opacity: 0.18;

    transform: scale(1.15);
}

.service-number {
    display: block;

    margin-bottom: 42px;

    font-family: Georgia, "Times New Roman", serif;

    font-size: 1.1rem;
    font-style: italic;
}

.purple-card .service-number {
    color: #ae9cff;

    text-shadow:
        0 0 16px rgba(142, 108, 255, 0.5);
}

.teal-card .service-number {
    color: #7cebe2;

    text-shadow:
        0 0 16px rgba(92, 231, 220, 0.45);
}

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

    font-family: Georgia, "Times New Roman", serif;

    font-size: clamp(1.55rem, 2.3vw, 2.15rem);
    font-weight: 400;
}

.service-card p {
    max-width: 470px;

    color: rgba(235, 232, 244, 0.7);

    font-size: 0.95rem;
    line-height: 1.75;
}


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

.services-footer {
    max-width: 720px;

    margin: 90px auto 0;

    text-align: center;
}

.services-footer h3 {
    font-family: Georgia, "Times New Roman", serif;

    font-size: clamp(1.8rem, 3vw, 2.7rem);
    font-weight: 400;
}

.services-footer h3 em {
    color: #b7a7ff;
}

.services-footer p {
    margin-top: 16px;

    color: rgba(235, 232, 244, 0.68);

    line-height: 1.7;
}

.services-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;

    margin-top: 28px;

    color: #83eee5;

    text-decoration: none;

    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.2em;

    transition:
        gap 0.2s ease,
        text-shadow 0.2s ease;
}

.services-link:hover {
    gap: 18px;

    text-shadow:
        0 0 16px rgba(94, 231, 220, 0.6);
}


/* ========================================
   OUR WORK
======================================== */

.work-section {
    position: relative;

    padding: 110px 6vw 130px;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 12% 45%,
            rgba(117, 73, 255, 0.10),
            transparent 35%
        ),
        radial-gradient(
            circle at 90% 65%,
            rgba(52, 224, 215, 0.08),
            transparent 38%
        ),
        #070912;
}


/* ========================================
   OUR WORK HEADING
======================================== */

.work-heading {
    width: min(1100px, 100%);

    margin: 0 auto 65px;

    text-align: center;
}

.work-heading .section-label {
    display: block;

    margin-bottom: 22px;

    color: #64f3e8;

    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.28em;
}

.work-heading h2 {
    margin: 0;

    color: #f4f1fa;

    font-family: Georgia, "Times New Roman", serif;

    font-size: clamp(2.6rem, 4.4vw, 4.5rem);
    font-weight: 400;
    line-height: 1.03;
}

.work-heading h2 em {
    color: #a98cff;

    font-weight: 400;
}

.work-heading p {
    max-width: 650px;

    margin: 25px auto 0;

    color: #c5c2cf;

    font-size: 1rem;
    line-height: 1.7;
}


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

.featured-project {
    width: min(1200px, 100%);

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        1.25fr 0.75fr;

    min-height: 620px;

    border:
        1px solid rgba(184, 173, 225, 0.18);

    background:
        rgba(12, 13, 31, 0.78);

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


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

.project-visual {
    position: relative;

    min-height: 620px;

    overflow: hidden;

    background: #0a0b18;
}

.project-visual::after {
    content: "";

    position: absolute;
    inset: 0;

    border-right:
        1px solid rgba(184, 173, 225, 0.16);

    pointer-events: none;
}

.project-image {
    width: 100%;
    height: 100%;
    min-height: 620px;

    display: block;

    object-fit: cover;
    object-position: center center;
}


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

.project-info {
    display: flex;
    flex-direction: column;
    justify-content: center;

    padding:
        clamp(45px, 5vw, 80px);
}

.project-number {
    margin-bottom: 30px;

    color: #a98cff;

    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.2em;
}

.project-info h3 {
    margin: 0 0 28px;

    color: #f4f1fa;

    font-family: Georgia, "Times New Roman", serif;

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

    font-weight: 400;
    line-height: 1;
}

.project-description {
    margin: 0;

    color: #c4c0cc;

    font-size: 0.96rem;
    line-height: 1.75;
}


/* ========================================
   PROJECT TAGS
======================================== */

.project-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;

    margin: 30px 0 38px;
}

.project-tags span {
    padding: 8px 11px;

    border:
        1px solid rgba(101, 242, 232, 0.28);

    color: #70eee6;

    font-size: 0.59rem;
    font-weight: 800;
    letter-spacing: 0.12em;
}


/* ========================================
   PROJECT LINK
======================================== */

.project-link {
    align-self: flex-start;

    color: #f4f1fa;

    text-decoration: none;

    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.19em;

    transition:
        color 0.2s ease;
}

.project-link span {
    display: inline-block;

    margin-left: 8px;

    color: #65f2e8;

    transition:
        transform 0.2s ease;
}

.project-link:hover {
    color: #a98cff;
}

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


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

.about-section {
    position: relative;

    overflow: hidden;

    padding: 90px 6vw 85px;

    border-top:
        1px solid rgba(184, 173, 225, 0.08);

    background:
        radial-gradient(
            circle at 78% 45%,
            rgba(118, 75, 255, 0.12),
            transparent 30%
        ),
        radial-gradient(
            circle at 88% 62%,
            rgba(73, 232, 220, 0.07),
            transparent 32%
        ),
        linear-gradient(
            180deg,
            #070912 0%,
            #090a18 50%,
            #070912 100%
        );
}

.about-inner {
    position: relative;
    z-index: 2;

    width: min(1180px, 100%);

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(420px, 0.82fr);

    gap: clamp(60px, 8vw, 120px);

    align-items: center;
}


/* ========================================
   ABOUT COPY
======================================== */

.about-copy {
    max-width: 680px;
}

.about-label {
    display: block;

    margin-bottom: 24px;

    color: #64f3e8;

    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.28em;
}

.about-copy h2 {
    margin: 0;

    color: #f4f1fa;

    font-family: Georgia, "Times New Roman", serif;

    font-size:
        clamp(3rem, 5vw, 5.2rem);

    font-weight: 400;
    line-height: 1.02;

    letter-spacing: -0.035em;
}

.about-copy h2 em {
    color: #a98cff;

    font-weight: 400;
}

.about-questions {
    margin-top: 45px;

    padding-left: 24px;

    border-left:
        1px solid rgba(101, 242, 232, 0.38);
}

.about-questions p {
    color: #d8d4e1;

    font-family: Georgia, "Times New Roman", serif;

    font-size:
        clamp(1.08rem, 1.6vw, 1.35rem);

    line-height: 1.7;
}

.about-questions p + p {
    margin-top: 5px;
}

.about-questions em {
    color: #b8a7ff;
}

.about-lead {
    margin-top: 40px;

    color: #f0edf6;

    font-family: Georgia, "Times New Roman", serif;

    font-size:
        clamp(1.35rem, 2vw, 1.8rem);

    line-height: 1.45;
}

.about-body {
    max-width: 620px;

    margin-top: 22px;

    color: rgba(225, 221, 233, 0.72);

    font-size: 0.98rem;
    line-height: 1.8;
}

.about-closing {
    margin-top: 34px;

    color: #e8e3ef;

    font-family: Georgia, "Times New Roman", serif;

    font-size:
        clamp(1.25rem, 1.8vw, 1.6rem);

    line-height: 1.5;
}

.about-closing em {
    color: #79eee5;
}


/* ========================================
   ABOUT VISUAL
======================================== */

.about-visual {
    position: relative;

    width: min(500px, 100%);
    aspect-ratio: 1 / 1;

    justify-self: center;

    border-radius: 50%;

    background:
        radial-gradient(
            circle at center,
            rgba(111, 78, 225, 0.13),
            rgba(7, 9, 18, 0.02) 58%,
            transparent 70%
        );
}

.about-question-mark {
    position: absolute;

    top: 50%;
    left: 50%;

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

    color: rgba(190, 173, 255, 0.92);

    font-family: Georgia, "Times New Roman", serif;

    font-size:
        clamp(11rem, 18vw, 17rem);

    font-style: italic;
    line-height: 1;

    text-shadow:
        0 0 35px rgba(128, 91, 255, 0.35),
        0 0 80px rgba(74, 229, 218, 0.12);
}

.about-orbit {
    position: absolute;

    top: 50%;
    left: 50%;

    border:
        1px solid rgba(165, 146, 239, 0.18);

    border-radius: 50%;

    transform:
        translate(-50%, -50%) rotate(-18deg);
}

.orbit-one {
    width: 86%;
    height: 42%;
}

.orbit-two {
    width: 68%;
    height: 92%;

    transform:
        translate(-50%, -50%) rotate(34deg);

    border-color:
        rgba(90, 233, 222, 0.15);
}

.orbit-three {
    width: 96%;
    height: 67%;

    transform:
        translate(-50%, -50%) rotate(58deg);
}

.about-word {
    position: absolute;

    color: rgba(224, 220, 237, 0.6);

    font-size: 0.61rem;
    font-weight: 800;
    letter-spacing: 0.24em;
}

.word-design {
    top: 18%;
    left: 8%;

    color: #9b8cff;
}

.word-story {
    top: 22%;
    right: 4%;

    color: #72eee4;
}

.word-tech {
    bottom: 20%;
    left: 3%;

    color: #72eee4;
}

.word-play {
    right: 8%;
    bottom: 14%;

    color: #9b8cff;
}

.about-spark {
    position: absolute;

    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: #74eee5;

    box-shadow:
        0 0 10px #74eee5,
        0 0 22px rgba(116, 238, 229, 0.7);
}

.spark-one {
    top: 30%;
    left: 18%;
}

.spark-two {
    top: 34%;
    right: 15%;

    background: #a48aff;

    box-shadow:
        0 0 10px #a48aff,
        0 0 22px rgba(164, 138, 255, 0.7);
}

.spark-three {
    right: 23%;
    bottom: 24%;
}


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

.about-glow {
    position: absolute;

    width: 550px;
    height: 550px;

    border-radius: 50%;

    filter: blur(130px);

    opacity: 0.08;

    pointer-events: none;
}

.about-glow-purple {
    top: 5%;
    right: -200px;

    background: #845cff;
}

.about-glow-teal {
    left: -300px;
    bottom: -250px;

    background: #4be7dc;
}


/* ========================================
   ABOUT MANIFESTO
======================================== */

.about-manifesto {
    position: relative;
    z-index: 2;

    width: min(1180px, 100%);

    margin: 65px auto 0;

    padding-top: 28px;

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

    color: rgba(231, 227, 239, 0.48);

    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.28em;
}

.about-manifesto span {
    margin-left: 8px;

    color: #70eee5;
}


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

@media (max-width: 700px) {

    /* HEADER */

    .site-header {
        justify-content: center;

        padding: 22px 20px;
    }

    .brand {
        align-items: center;
    }

    .brand-logo {
        width: 175px;
    }

    .desktop-nav {
        display: none;
    }


    /* HERO */

    .hero {
        padding:
            110px
            24px
            80px;

        background-image:
            linear-gradient(
                rgba(4, 6, 14, 0.12),
                rgba(4, 6, 14, 0.22)
            ),
            url("mobileherobackground.png");

        background-position:
            center center;
    }

    .hero-content {
        width: 100%;

        padding: 28px 10px;

        transform:
            translateY(-7vh);

        background:
            radial-gradient(
                ellipse at center,
                rgba(7, 9, 18, 0.28) 0%,
                rgba(7, 9, 18, 0.10) 50%,
                transparent 74%
            );
    }

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

        font-size: 0.6rem;
        line-height: 1.5;
    }

    .hero h1 {
        font-size:
            clamp(2.5rem, 11.5vw, 4rem);

        line-height: 0.98;

        white-space: normal;
    }

    .hero h2 {
        margin-top: 12px;

        font-size:
            clamp(1.55rem, 7vw, 2.4rem);
    }

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

        margin-top: 22px;

        font-size: 0.92rem;
        line-height: 1.55;
    }

    .hero-buttons {
        flex-direction: column;

        width: min(300px, 100%);

        margin: 28px auto 0;

        gap: 11px;
    }

    .button {
        width: 100%;
    }

    .hero-scroll {
        bottom: 18px;
    }


    /* SERVICES */

    .services-section {
        padding:
            90px
            20px
            100px;
    }

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

    .section-heading h2 {
        font-size:
            clamp(2.35rem, 11vw, 3.5rem);
    }

    .section-intro {
        font-size: 0.94rem;
    }

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

        gap: 15px;
    }

    .service-card {
        min-height: 0;

        padding:
            29px
            27px
            32px;
    }

    .service-number {
        margin-bottom: 28px;
    }

    .service-card h3 {
        font-size: 1.65rem;
    }

    .service-card p {
        font-size: 0.92rem;
        line-height: 1.65;
    }

    .services-footer {
        margin-top: 65px;
    }

    .services-footer h3 {
        font-size: 2rem;
        line-height: 1.2;
    }


    /* OUR WORK */

    .work-section {
        padding:
            85px
            20px
            100px;
    }

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

    .work-heading .section-label {
        margin-bottom: 18px;
    }

    .work-heading h2 {
        font-size:
            clamp(2.5rem, 11vw, 3.5rem);

        line-height: 1.02;
    }

    .work-heading p {
        margin-top: 22px;

        font-size: 0.95rem;
    }

    .featured-project {
        display: block;

        min-height: 0;
    }

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

    .project-visual::after {
        border-right: 0;

        border-bottom:
            1px solid rgba(184, 173, 225, 0.16);
    }

    .project-image {
        width: 100%;
        height: 470px;
        min-height: 470px;

        object-fit: cover;
        object-position: center center;
    }

    .project-info {
        padding:
            42px
            28px
            48px;
    }

    .project-number {
        margin-bottom: 24px;
    }

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

        font-size:
            clamp(2.5rem, 11vw, 3.4rem);
    }

    .project-description {
        font-size: 0.94rem;
    }

    .project-tags {
        margin:
            28px
            0
            34px;
    }


    /* ABOUT */

    .about-section {
        padding:
            95px
            22px
            65px;
    }

    .about-inner {
        display: flex;
        flex-direction: column;

        gap: 25px;
    }

    .about-copy {
        width: 100%;
        max-width: 100%;
    }

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

        text-align: center;

        font-size: 0.64rem;
    }

    .about-copy h2 {
        text-align: center;

        font-size:
            clamp(2.7rem, 12vw, 4rem);

        line-height: 1.03;
    }

    .about-questions {
        margin-top: 28px;

        padding-left: 18px;
    }

    .about-questions p {
        font-size: 1.05rem;
        line-height: 1.65;
    }

    .about-lead {
        margin-top: 28px;

        font-size: 1.45rem;
    }

    .about-body {
        margin-top: 16px;

        font-size: 0.94rem;
        line-height: 1.75;
    }

    .about-closing {
        margin-top: 30px;

        font-size: 1.3rem;
    }

    .about-visual {
        width: min(340px, 82vw);
    }

    .about-question-mark {
        font-size:
            clamp(10rem, 45vw, 14rem);
    }

    .about-word {
        font-size: 0.56rem;
    }

    .about-manifesto {
        margin-top: 35px;

        padding-top: 25px;

        text-align: center;

        font-size: 0.59rem;
        line-height: 1.8;
    }

    .about-manifesto span {
        display: block;

        margin:
            5px
            0
            0;
    }
}

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

.contact-section {
    position: relative;
    overflow: hidden;
    padding: 105px 6vw 120px;
    border-top: 1px solid rgba(184, 173, 225, 0.08);
    background:
        radial-gradient(circle at 16% 20%, rgba(118, 75, 255, 0.11), transparent 31%),
        radial-gradient(circle at 86% 78%, rgba(73, 232, 220, 0.07), transparent 30%),
        #070912;
}

.contact-inner {
    position: relative;
    z-index: 2;
    width: min(1180px, 100%);
    margin: 0 auto;
}

.contact-heading {
    max-width: 760px;
    margin-bottom: 62px;
}

.contact-label {
    display: block;
    margin-bottom: 20px;
    color: #64f3e8;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.28em;
}

.contact-heading h2 {
    margin: 0;
    color: #f4f1fa;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(3rem, 5vw, 5rem);
    font-weight: 400;
    line-height: 1;
    letter-spacing: -0.035em;
}

.contact-heading p {
    margin-top: 22px;
    color: rgba(225, 221, 233, 0.72);
    font-size: 1rem;
    line-height: 1.7;
}

.contact-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.65fr);
    gap: clamp(45px, 7vw, 95px);
    align-items: start;
}

.contact-form {
    padding: clamp(30px, 4vw, 48px);
    border: 1px solid rgba(184, 173, 225, 0.16);
    background: rgba(12, 13, 31, 0.72);
    box-shadow: 0 25px 70px rgba(0, 0, 0, 0.2);
}

.form-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.form-field + .form-field,
.form-row + .form-field {
    margin-top: 24px;
}

.form-row .form-field + .form-field {
    margin-top: 0;
}

.form-field label {
    display: block;
    margin-bottom: 10px;
    color: #9f91ff;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.2em;
}

.form-field input,
.form-field textarea,
.form-field select {
    width: 100%;
    border: 1px solid rgba(184, 173, 225, 0.18);
    border-radius: 0;
    outline: none;
    padding: 15px 16px;
    background: rgba(5, 7, 17, 0.72);
    color: #f4f1fa;
    font: inherit;
    line-height: 1.5;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-field textarea {
    resize: vertical;
    min-height: 160px;
}

.form-field select {
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    padding-right: 44px;
    background-image:
        linear-gradient(45deg, transparent 50%, #64f3e8 50%),
        linear-gradient(135deg, #64f3e8 50%, transparent 50%);
    background-position:
        calc(100% - 20px) 50%,
        calc(100% - 15px) 50%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}

.form-field select option {
    background: #0b0d1d;
    color: #f4f1fa;
}

.form-row-extra {
    margin-top: 24px;
}

.optional-label {
    color: rgba(225, 221, 233, 0.38);
    font-size: 0.88em;
    letter-spacing: 0.12em;
}

.form-field input::placeholder,
.form-field textarea::placeholder {
    color: rgba(225, 221, 233, 0.34);
}

.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {
    border-color: rgba(100, 243, 232, 0.55);
    box-shadow: 0 0 0 3px rgba(100, 243, 232, 0.06);
}

.contact-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 13px;
    margin-top: 30px;
    padding: 16px 21px;
    border: 1px solid rgba(126, 231, 223, 0.6);
    background: linear-gradient(135deg, rgba(142, 124, 255, 0.16), rgba(118, 238, 229, 0.12));
    color: #f4f1fa;
    cursor: pointer;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.17em;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.contact-submit span {
    color: #64f3e8;
}

.contact-submit:hover {
    transform: translateY(-2px);
    border-color: #64f3e8;
    box-shadow: 0 0 26px rgba(100, 243, 232, 0.12);
}

.form-note {
    margin-top: 15px;
    color: rgba(225, 221, 233, 0.38);
    font-size: 0.72rem;
    line-height: 1.5;
}

.contact-side {
    padding-top: 18px;
}

.contact-side-label {
    color: #64f3e8;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.22em;
}

.contact-side h3 {
    margin-top: 22px;
    color: #f4f1fa;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(2rem, 3vw, 3rem);
    font-weight: 400;
    line-height: 1.08;
}

.contact-side > p {
    margin-top: 24px;
    color: rgba(225, 221, 233, 0.68);
    font-size: 0.94rem;
    line-height: 1.75;
}

.contact-email {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-top: 30px;
    color: #b7a7ff;
    text-decoration: none;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.08rem;
    transition: color 0.2s ease, gap 0.2s ease;
}

.contact-email span {
    color: #64f3e8;
}

.contact-email:hover {
    gap: 17px;
    color: #f4f1fa;
}

.contact-side-rule {
    width: 100%;
    height: 1px;
    margin: 38px 0 22px;
    background: rgba(255, 255, 255, 0.1);
}

.contact-side .contact-small {
    margin-top: 0;
    color: rgba(225, 221, 233, 0.42);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    line-height: 1.8;
}

.contact-glow {
    position: absolute;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    filter: blur(130px);
    opacity: 0.08;
    pointer-events: none;
}

.contact-glow-purple {
    top: -170px;
    left: -250px;
    background: #845cff;
}

.contact-glow-teal {
    right: -260px;
    bottom: -220px;
    background: #4be7dc;
}

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

.site-footer {
    padding: 34px 6vw;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: #050710;
}

.footer-inner {
    width: min(1180px, 100%);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}

.footer-brand {
    display: flex;
    flex-direction: column;
    color: #f4f1fa;
    text-decoration: none;
    line-height: 1;
}

.footer-brand span {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1rem;
    letter-spacing: 0.12em;
}

.footer-brand small {
    margin-top: 5px;
    color: #7ee7df;
    font-size: 0.52rem;
    font-weight: 700;
    letter-spacing: 0.48em;
}

.footer-inner > p {
    color: rgba(225, 221, 233, 0.45);
    font-size: 0.7rem;
    letter-spacing: 0.08em;
}

.footer-copy {
    text-align: right;
}

@media (max-width: 700px) {

    .contact-section {
        padding: 85px 20px 90px;
    }

    .contact-heading {
        margin-bottom: 45px;
        text-align: center;
    }

    .contact-label {
        margin-bottom: 18px;
    }

    .contact-heading h2 {
        font-size: clamp(2.7rem, 12vw, 4rem);
    }

    .contact-heading p {
        margin-top: 18px;
        font-size: 0.94rem;
    }

    .contact-layout {
        display: block;
    }

    .contact-form {
        padding: 28px 22px 30px;
    }

    .form-row {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .form-row .form-field + .form-field {
        margin-top: 0;
    }

    .contact-submit {
        width: 100%;
        padding: 16px 14px;
        font-size: 0.62rem;
    }

    .contact-side {
        margin-top: 58px;
        padding-top: 0;
        text-align: center;
    }

    .contact-side h3 {
        font-size: 2.25rem;
    }

    .contact-email {
        font-size: 1rem;
    }

    .site-footer {
        padding: 32px 20px;
    }

    .footer-inner {
        flex-direction: column;
        text-align: center;
        gap: 18px;
    }

    .footer-brand {
        align-items: center;
    }

    .footer-copy {
        text-align: center;
    }
}


/* ========================================
   PRICING PAGE
======================================== */
.pricing-page { background:#070912; }
.pricing-header { position:absolute; }
.pricing-header .desktop-nav a[aria-current="page"] { color:#91fff5; text-shadow:0 0 14px rgba(86,231,220,.55); }
.pricing-shell { position:relative; z-index:2; width:min(1180px,100%); margin:0 auto; }
.pricing-hero { position:relative; overflow:hidden; min-height:650px; display:flex; align-items:center; padding:155px 6vw 105px; border-bottom:1px solid rgba(184,173,225,.08); background:radial-gradient(circle at 20% 25%,rgba(118,75,255,.16),transparent 32%),radial-gradient(circle at 82% 65%,rgba(73,232,220,.09),transparent 30%),linear-gradient(180deg,#080a16,#070912); }
.pricing-hero-inner { text-align:center; max-width:900px; }
.pricing-eyebrow { display:block; margin-bottom:20px; color:#64f3e8; font-size:.68rem; font-weight:800; letter-spacing:.28em; }
.pricing-hero h1,.pricing-heading h2,.founding-inner h2,.package-heading h2,.weird-inner h2,.pricing-cta h2 { font-family:Georgia,"Times New Roman",serif; font-weight:400; letter-spacing:-.035em; }
.pricing-hero h1 { font-size:clamp(3.5rem,6vw,6rem); line-height:.98; }
.pricing-lead { max-width:720px; margin:28px auto 0; color:rgba(238,235,247,.82); font-size:1.08rem; line-height:1.75; }
.pricing-sublead { max-width:650px; margin:14px auto 34px; color:rgba(238,235,247,.56); font-size:.94rem; line-height:1.7; }
.pricing-glow { position:absolute; width:600px; height:600px; border-radius:50%; filter:blur(130px); opacity:.09; pointer-events:none; }
.pricing-glow-purple { left:-280px; top:-200px; background:#845cff; }.pricing-glow-teal { right:-300px; bottom:-250px; background:#4be7dc; }
.founding-offer { padding:65px 6vw; border-bottom:1px solid rgba(255,255,255,.08); background:linear-gradient(135deg,rgba(142,124,255,.08),rgba(118,238,229,.045)); }
.founding-inner { display:grid; grid-template-columns:1.35fr .65fr; gap:70px; align-items:center; }
.founding-inner h2 { font-size:clamp(2.3rem,4vw,4rem); line-height:1.05; }.founding-inner h2 em { color:#b7a7ff; font-weight:400; }.founding-inner p { max-width:680px; margin-top:18px; color:rgba(225,221,233,.7); line-height:1.75; }
.offer-code { padding:28px; border:1px solid rgba(100,243,232,.25); background:rgba(5,7,17,.45); text-align:center; }.offer-code span,.offer-code small { display:block; }.offer-code span { color:rgba(225,221,233,.5); font-size:.6rem; font-weight:800; letter-spacing:.2em; }.offer-code strong { display:block; margin:10px 0; color:#78eee5; font-family:Georgia,"Times New Roman",serif; font-size:2rem; font-weight:400; letter-spacing:.08em; }.offer-code small { color:rgba(225,221,233,.45); font-size:.7rem; }
.pricing-section { position:relative; padding:105px 6vw 115px; border-bottom:1px solid rgba(255,255,255,.06); background:#070912; }.pricing-section-alt { background:linear-gradient(180deg,#080916,#0a0b19 50%,#070912); }
.pricing-heading { max-width:850px; margin:0 auto 55px; text-align:center; }.pricing-heading h2 { color:#f4f1fa; font-size:clamp(2.6rem,4.5vw,4.5rem); line-height:1.04; }.pricing-heading h2 em { color:#a98cff; font-weight:400; }
.pricing-grid { display:grid; gap:20px; }.pricing-grid.three { grid-template-columns:repeat(3,minmax(0,1fr)); }
.price-card { position:relative; overflow:hidden; min-height:310px; padding:34px; border:1px solid rgba(184,173,225,.14); background:linear-gradient(145deg,rgba(20,21,42,.76),rgba(9,11,24,.72)); box-shadow:0 18px 60px rgba(0,0,0,.16); }.price-card h3 { margin-bottom:18px; color:#f4f1fa; font-family:Georgia,"Times New Roman",serif; font-size:1.65rem; font-weight:400; line-height:1.15; }.price-card>p:not(.price):not(.quote-price) { color:rgba(225,221,233,.68); font-size:.93rem; line-height:1.7; }.price-card em { color:#b7a7ff; }.purple-price { border-top-color:rgba(169,140,255,.48); }.teal-price { border-top-color:rgba(100,243,232,.45); }
.price { margin:8px 0 22px; color:#82eee5; font-family:Georgia,"Times New Roman",serif; font-size:2.7rem; line-height:1; }.price span { margin-left:3px; color:#a98cff; font-size:1rem; font-family:Arial,Helvetica,sans-serif; font-weight:700; }.quote-price { margin:12px 0 24px; color:#a98cff; font-size:.78rem; font-weight:800; letter-spacing:.18em; }.price-detail { margin-top:18px; color:rgba(225,221,233,.48)!important; font-size:.84rem!important; }
.asset-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:18px; }.asset-grid .price-card { grid-column:span 2; min-height:300px; }.asset-grid .price-card:nth-child(4),.asset-grid .price-card:nth-child(5) { grid-column:span 3; }
.price-lines { margin:20px 0; border-top:1px solid rgba(255,255,255,.08); }.price-lines p { display:flex; gap:10px; padding:11px 0; border-bottom:1px solid rgba(255,255,255,.07); color:rgba(225,221,233,.67); font-size:.84rem; line-height:1.4; }.price-lines strong { min-width:62px; color:#7cebe2; font-weight:800; }
.package-heading { margin:90px auto 42px; text-align:center; }.package-heading h2 { font-size:clamp(2.3rem,4vw,3.8rem); }.package-heading h2 span { color:#a98cff; font-style:italic; }.package-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; max-width:980px; margin:0 auto; }.package-card { padding:42px; border:1px solid rgba(100,243,232,.2); background:linear-gradient(145deg,rgba(14,18,38,.9),rgba(9,11,24,.85)); }.featured-package { border-color:rgba(169,140,255,.4); box-shadow:0 20px 70px rgba(105,67,190,.1); }.package-label { color:#64f3e8; font-size:.61rem; font-weight:800; letter-spacing:.22em; }.package-card h3 { margin-top:17px; font-family:Georgia,"Times New Roman",serif; font-size:2rem; font-weight:400; }.package-price { margin:20px 0; color:#b7a7ff; font-family:Georgia,"Times New Roman",serif; font-size:3.5rem; }.package-card>p:not(.package-price):not(.package-value) { color:rgba(225,221,233,.68); line-height:1.65; }.package-card ul { margin:25px 0 0; padding:0; list-style:none; }.package-card li { position:relative; padding:9px 0 9px 20px; border-bottom:1px solid rgba(255,255,255,.06); color:rgba(225,221,233,.67); font-size:.88rem; }.package-card li::before { content:"+"; position:absolute; left:0; color:#64f3e8; }.package-value { margin-top:25px; color:#64f3e8; font-size:.7rem; font-weight:800; letter-spacing:.12em; }.package-note,.outside-costs { margin:28px auto 0; color:rgba(225,221,233,.42); font-size:.76rem; line-height:1.6; text-align:center; }
.weird-idea { padding:115px 6vw; text-align:center; background:radial-gradient(circle at center,rgba(118,75,255,.12),transparent 40%),#070912; }.weird-inner { max-width:820px; }.weird-inner h2 { color:#b7a7ff; font-size:clamp(4rem,7vw,7rem); font-style:italic; }.weird-inner p { max-width:700px; margin:17px auto 0; color:rgba(225,221,233,.68); line-height:1.75; }.weird-inner blockquote { margin:32px 0 8px; color:#78eee5; font-family:Georgia,"Times New Roman",serif; font-size:2rem; font-style:italic; }.weird-inner .services-link { margin-top:28px; }
.faq-section { padding:105px 6vw 120px; border-top:1px solid rgba(255,255,255,.07); background:#090a16; }.faq-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.08); }.faq-grid article { padding:32px; background:#090a16; }.faq-grid h3 { margin-bottom:14px; color:#f4f1fa; font-family:Georgia,"Times New Roman",serif; font-size:1.3rem; font-weight:400; }.faq-grid p { color:rgba(225,221,233,.62); font-size:.9rem; line-height:1.7; }
.pricing-cta { padding:115px 6vw 125px; text-align:center; background:radial-gradient(circle at 50% 50%,rgba(73,232,220,.08),transparent 32%),#070912; }.pricing-cta h2 { font-size:clamp(3rem,5vw,5rem); }.pricing-cta>div>p { margin:14px 0 32px; color:#b7a7ff; font-family:Georgia,"Times New Roman",serif; font-size:1.8rem; font-style:italic; }
@media(max-width:900px){.pricing-grid.three{grid-template-columns:1fr 1fr}.pricing-grid.three .price-card:last-child{grid-column:1/-1}.asset-grid{grid-template-columns:1fr 1fr}.asset-grid .price-card,.asset-grid .price-card:nth-child(4),.asset-grid .price-card:nth-child(5){grid-column:auto}.founding-inner{grid-template-columns:1fr;gap:35px}.package-grid{grid-template-columns:1fr}}
@media(max-width:700px){.pricing-hero{min-height:0;padding:135px 22px 85px}.pricing-hero h1{font-size:clamp(3rem,14vw,4.4rem)}.pricing-lead{font-size:.96rem}.pricing-section,.faq-section{padding:82px 20px 90px}.founding-offer{padding:60px 20px}.pricing-grid.three,.asset-grid{grid-template-columns:1fr}.pricing-grid.three .price-card:last-child{grid-column:auto}.price-card{min-height:0;padding:28px 25px}.pricing-heading{margin-bottom:40px}.pricing-heading h2{font-size:clamp(2.4rem,11vw,3.4rem)}.package-heading{margin-top:70px}.package-card{padding:31px 26px}.package-card h3{font-size:1.7rem}.package-price{font-size:3rem}.weird-idea{padding:90px 22px}.weird-inner h2{font-size:4rem}.weird-inner blockquote{font-size:1.7rem}.faq-grid{grid-template-columns:1fr}.faq-grid article{padding:27px 24px}.pricing-cta{padding:90px 22px 100px}}

/* Linked service cards */
a.service-card {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}


/* =========================================================
   AELARA CASE STUDY
   ========================================================= */

.case-study-page {
    background: #070912;
    color: #f5f1fb;
}

.case-shell {
    width: min(1180px, calc(100% - 64px));
    margin: 0 auto;
}

.case-hero {
    position: relative;
    overflow: hidden;
    padding: 150px 0 96px;
    min-height: 760px;
    display: flex;
    align-items: center;
}

.case-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
    opacity: .18;
    pointer-events: none;
}

.case-glow-purple {
    width: 520px;
    height: 520px;
    left: -180px;
    top: 120px;
    background: #8f55ff;
}

.case-glow-teal {
    width: 480px;
    height: 480px;
    right: -150px;
    bottom: 0;
    background: #35e6d2;
}

.case-hero-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 72px;
    align-items: center;
}

.case-hero-copy h1,
.case-section h2,
.case-result h2,
.case-cta h2 {
    margin: 16px 0 24px;
    font-size: clamp(3rem, 6vw, 6.4rem);
    line-height: .96;
    letter-spacing: -.045em;
}

.case-hero-copy h1 em,
.case-section h2 em,
.case-result h2 em,
.case-cta h2 em {
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 400;
    color: #9b72ff;
}

.case-lead {
    max-width: 650px;
    color: #bcb5ca;
    font-size: 1.12rem;
    line-height: 1.8;
}

.case-tags {
    margin-top: 32px;
}

.case-hero-art,
.case-process-art {
    position: relative;
    border: 1px solid rgba(151, 112, 255, .25);
    background: rgba(255,255,255,.025);
    box-shadow: 0 32px 90px rgba(0,0,0,.45);
    overflow: hidden;
}

.case-hero-art::after,
.case-process-art::after {
    content: "";
    position: absolute;
    inset: 0;
    box-shadow: inset 0 0 70px rgba(7,9,18,.32);
    pointer-events: none;
}

.case-hero-art img,
.case-process-art img {
    display: block;
    width: 100%;
    height: auto;
}

.case-section {
    padding: 110px 0;
    border-top: 1px solid rgba(255,255,255,.06);
}

.case-section-alt {
    background:
        radial-gradient(circle at 20% 50%, rgba(123,78,255,.07), transparent 34%),
        rgba(255,255,255,.012);
}

.case-intro-grid,
.case-process-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 90px;
    align-items: center;
}

.case-section h2,
.case-result h2,
.case-cta h2 {
    font-size: clamp(2.7rem, 5vw, 5rem);
}

.case-copy p,
.case-process-copy > p:not(.pricing-eyebrow),
.case-result-inner > p:not(.pricing-eyebrow),
.case-cta > .case-shell > p:not(.pricing-eyebrow) {
    color: #bcb5ca;
    line-height: 1.85;
    font-size: 1.05rem;
}

.case-copy p + p,
.case-process-copy > p + p {
    margin-top: 20px;
}

.case-heading {
    max-width: 720px;
    margin-bottom: 54px;
}

.case-capability-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
}

.case-card {
    min-height: 260px;
    padding: 34px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.025);
}

.case-card span {
    display: block;
    margin-bottom: 36px;
    color: #8c849a;
    font-size: .78rem;
    letter-spacing: .18em;
}

.case-card h3 {
    margin: 0 0 16px;
    font-size: 1.45rem;
}

.case-card p {
    margin: 0;
    color: #aFA8bb;
    line-height: 1.7;
}

.purple-case {
    border-top-color: rgba(151,112,255,.65);
}

.teal-case {
    border-top-color: rgba(69,226,207,.65);
}

.case-process-art {
    max-width: 520px;
}

.case-result {
    padding: 120px 0;
    text-align: center;
    background:
        radial-gradient(circle at 50% 50%, rgba(123,78,255,.10), transparent 42%),
        #080a14;
    border-top: 1px solid rgba(255,255,255,.06);
}

.case-result-inner {
    max-width: 850px;
}

.case-result-inner > p:not(.pricing-eyebrow) {
    max-width: 760px;
    margin: 0 auto;
}

.case-cta {
    padding: 120px 0 130px;
    text-align: center;
    border-top: 1px solid rgba(255,255,255,.06);
}

.case-cta .case-shell {
    max-width: 850px;
}

.case-cta .button {
    margin-top: 28px;
}

@media (max-width: 800px) {
    .case-shell {
        width: min(100% - 36px, 680px);
    }

    .case-hero {
        padding: 120px 0 70px;
        min-height: auto;
    }

    .case-hero-grid,
    .case-intro-grid,
    .case-process-grid {
        grid-template-columns: 1fr;
        gap: 46px;
    }

    .case-hero-art {
        order: 2;
    }

    .case-hero-copy h1 {
        font-size: clamp(3.1rem, 15vw, 5rem);
    }

    .case-section {
        padding: 78px 0;
    }

    .case-capability-grid {
        grid-template-columns: 1fr;
    }

    .case-card {
        min-height: auto;
    }

    .case-process-art {
        max-width: none;
    }

    .case-result,
    .case-cta {
        padding: 86px 0;
    }
}