:root {
    --bg: #07070b;
    --surface: #101014;
    --card: #15151c;
    --line: #ffffff14;
    --white: #fff;
    --muted: #a1a1aa;
    --purple: #7c3aed;
    --blue: #4f8cff;
    --mint: #10b981
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--white);
    font: 16px/1.65 Inter, Arial, sans-serif
}

.noise {
    position: fixed;
    inset: 0;
    opacity: .035;
    pointer-events: none;
    z-index: 5;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")
}

.shell {
    max-width: 1280px;
    margin: auto;
    padding-left: 32px;
    padding-right: 32px
}

.nav {
    height: 82px;
    display: flex;
    align-items: center;
    gap: 35px;
    max-width: 1280px;
    padding: 0 32px;
    margin: auto;
    position: sticky;
    top: 0;
    z-index: 10;
    background: linear-gradient(#07070beb, #07070b99 70%, transparent);
    backdrop-filter: blur(14px)
}

.brand {
    color: #fff;
    text-decoration: none;
    font: 800 20px 'Plus Jakarta Sans';
    letter-spacing: -3px
}

.brand span {
    color: #a879ff
}

nav {
    display: flex;
    gap: 26px;
    margin-left: auto
}

nav a,
footer a {
    font-size: 12px;
    color: #aaa8b3;
    text-decoration: none
}

nav a:hover,
footer a:hover {
    color: #fff
}

.nav-cta,
.primary {
    padding: 11px 14px;
    border-radius: 9px;
    background: linear-gradient(105deg, #8b41ff, #5f57e5);
    box-shadow: 0 10px 30px #6d35d44d;
    color: #fff;
    text-decoration: none;
    font: 600 12px Inter;
    display: inline-flex;
    justify-content: space-between;
    gap: 23px;
    align-items: center
}

.nav-cta b,
.primary b {
    font-size: 16px
}

.menu {
    display: none
}

.hero {
    display: grid;
    grid-template-columns: 5fr 6fr;
    align-items: center;
    gap: 50px;
    padding-top: 90px;
    min-height: 690px
}

.kicker,
.section-index {
    font-size: 10px;
    letter-spacing: 1.6px;
    color: #aa8aff;
    font-weight: 700;
    margin: 0 0 19px
}

.kicker i {
    display: inline-block;
    width: 7px;
    height: 7px;
    background: #a879ff;
    border-radius: 50%;
    box-shadow: 0 0 12px #a879ff;
    margin-right: 8px
}

.hero h1,
h2,
h3 {
    font-family: 'Plus Jakarta Sans';
    letter-spacing: -.06em;
    line-height: 1.04;
    margin: 0
}

.hero h1 {
    font-size: clamp(49px, 5.5vw, 74px);
    max-width: 600px
}

.hero h1 em,
h2 em {
    font-style: normal;
    background: linear-gradient(105deg, #d4b5ff, #8579ff 50%, #57b1ff);
    background-clip: text;
    color: transparent
}

.hero-intro {
    color: #b3b1bb;
    max-width: 550px;
    margin: 25px 0
}

.hero-actions {
    display: flex;
    gap: 21px;
    align-items: center
}

.secondary {
    color: #e8e6ed;
    text-decoration: none;
    font: 600 12px Inter
}

.secondary span {
    color: #a879ff;
    margin-left: 7px;
    font-size: 15px
}

.availability {
    font-size: 10px;
    color: #7e7b86;
    margin-top: 52px
}

.availability span {
    color: #4ce3b5;
    margin-right: 7px
}

.engine {
    border: 1px solid #8c62e952;
    border-radius: 20px;
    background: radial-gradient(circle at 50% 35%, #4d209e60, #101016 62%);
    box-shadow: 0 0 80px #5d28b832, inset 0 1px #ffffff14;
    padding: 18px
}

.engine-bar,
.engine-footer {
    display: flex;
    justify-content: space-between;
    color: #85828d;
    font-size: 9px;
    letter-spacing: .8px
}

.signal {
    color: #60dcb7
}

.engine-stage {
    height: 350px;
    position: relative
}

.engine-node,
.revenue {
    position: absolute;
    width: 124px;
    height: 92px;
    padding: 12px;
    border-radius: 12px;
    border: 1px solid #ffffff20;
    background: #12121a;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    z-index: 1
}

.engine-node small,
.revenue small {
    font-size: 8px;
    color: #96939d;
    letter-spacing: .6px
}

.engine-node strong,
.revenue strong {
    font: 700 15px/1.1 'Plus Jakarta Sans'
}

.engine-node b {
    position: absolute;
    right: 10px;
    bottom: 8px;
    color: #9b75ff;
    font-size: 13px
}

.ads {
    left: 0;
    top: 45px;
    background: radial-gradient(circle at 55% 0, #7832d17a, #12121a 62%)
}

.capture {
    left: 24%;
    top: 186px
}

.crm {
    left: 46%;
    top: 52px;
    background: radial-gradient(circle at 55% 0, #1959be83, #10141e 62%)
}

.automate {
    left: 68%;
    top: 188px
}

.revenue {
    right: 0;
    top: 48px;
    background: radial-gradient(circle at 55% 0, #11966f8a, #101917 62%);
    border-color: #42c7a788
}

.revenue span {
    font: 700 10px Inter;
    color: #5fe0b8
}

.route {
    position: absolute;
    height: 1px;
    background: linear-gradient(90deg, #8552ed, #4f8cff);
    transform-origin: left;
    opacity: .85
}

.r1 {
    width: 171px;
    left: 105px;
    top: 107px;
    transform: rotate(39deg)
}

.r2 {
    width: 140px;
    left: 278px;
    top: 218px;
    transform: rotate(-41deg)
}

.r3 {
    width: 153px;
    left: 425px;
    top: 108px;
    transform: rotate(42deg)
}

.engine-footer {
    border-top: 1px solid var(--line);
    padding-top: 13px;
    letter-spacing: 0
}

.engine-footer b {
    color: #a879ff;
    margin-right: 6px
}

.indicator {
    height: 85px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    color: #888590
}

.indicator p {
    font-size: 10px;
    letter-spacing: 1.2px
}

.scroll-cue {
    font-size: 10px
}

.scroll-cue span {
    display: inline-block;
    height: 20px;
    width: 1px;
    background: #9168ee;
    vertical-align: middle;
    margin-right: 9px
}

.systems {
    padding-top: 120px;
    padding-bottom: 120px
}

.split-head {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: end;
    gap: 50px
}

.split-head h2,
.proof-intro h2,
.work h2,
.method h2,
.about h2,
.contact h2 {
    font-size: clamp(40px, 4.2vw, 57px)
}

.split-head p {
    margin: 0 0 6px;
    max-width: 470px;
    color: var(--muted)
}

.capabilities {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin-top: 46px
}

.cap {
    min-height: 360px;
    border-radius: 18px;
    border: 1px solid var(--line);
    padding: 22px;
    position: relative;
    overflow: hidden;
    background: #121219;
    transition: transform .18s ease, border-color .18s
}

.cap:hover {
    transform: translateY(-7px);
    border-color: #9367ed86
}

.cap-top {
    display: flex;
    justify-content: space-between;
    color: #827e8c;
    font-size: 10px
}

.cap-top i {
    font-style: normal;
    font-size: 19px;
    color: #a87eff
}

.cap h3 {
    font-size: 29px;
    margin: 51px 0 15px
}

.cap p {
    font-size: 12px;
    color: #aaa7b2;
    max-width: 250px
}

.ad {
    background: radial-gradient(circle at 74% 75%, #43208f8f, #121219 55%)
}

.ad-visual {
    position: absolute;
    left: 23px;
    right: 23px;
    bottom: 20px;
    height: 76px;
    display: flex;
    align-items: end;
    gap: 8px
}

.ad-visual b {
    width: 15px;
    background: linear-gradient(#b899ff, #6430ce);
    border-radius: 4px 4px 0 0;
    box-shadow: 0 0 15px #6c34d9
}

.ad-visual b:nth-child(1) {
    height: 27px
}

.ad-visual b:nth-child(2) {
    height: 46px
}

.ad-visual b:nth-child(3) {
    height: 38px
}

.ad-visual b:nth-child(4) {
    height: 69px
}

.ad-visual b:nth-child(5) {
    height: 57px
}

.ad-visual small {
    position: absolute;
    right: 0;
    top: -4px;
    color: #ae91ee;
    font-size: 9px
}

.automation {
    background: radial-gradient(circle at 48% 78%, #295bb879, #121219 56%)
}

.automation-visual {
    position: absolute;
    bottom: 39px;
    left: 25px;
    right: 25px;
    display: flex;
    align-items: center;
    justify-content: space-between
}

.automation-visual span {
    height: 2px;
    flex: 1;
    background: #4e8eff
}

.automation-visual b {
    border: 1px solid #5d9eff;
    border-radius: 50%;
    display: grid;
    place-items: center;
    width: 29px;
    height: 29px;
    background: #132443;
    color: #7eafff;
    font-size: 11px;
    box-shadow: 0 0 20px #367dce
}

.intelligence {
    background: radial-gradient(circle at 77% 62%, #0b866b64, #121219 54%)
}

.intel-visual {
    position: absolute;
    bottom: 27px;
    color: #60d9b5;
    font: 700 57px 'Plus Jakarta Sans';
    letter-spacing: -.09em
}

.intel-visual small {
    display: block;
    font: 10px Inter;
    letter-spacing: 0;
    color: #9bb6ad
}

.proof-band {
    padding: 120px 0;
    background: #101014;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line)
}

.proof-intro {
    display: flex;
    justify-content: space-between;
    align-items: end
}

.stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid var(--line);
    margin-top: 50px
}

.stats article {
    padding: 27px 20px 10px 0;
    border-right: 1px solid var(--line);
    padding-left: 20px
}

.stats article:first-child {
    padding-left: 0
}

.stats article:last-child {
    border: 0
}

.stats strong {
    font: 700 48px 'Plus Jakarta Sans';
    letter-spacing: -.08em
}

.stats small {
    color: #a87eff;
    font: 700 23px 'Plus Jakarta Sans'
}

.stats p,
.proof-note {
    color: #8e8b97;
    font-size: 11px;
    max-width: 150px;
    margin: 7px 0
}

.proof-note {
    margin: 34px 0 0;
    max-width: none
}

.work {
    padding-top: 120px;
    padding-bottom: 120px
}

.work-heading {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: end;
    margin-bottom: 48px
}

.work-heading .section-index {
    grid-column: span 2
}

.work-heading p {
    color: var(--muted);
    max-width: 430px;
    margin: 0
}

.feature-case {
    display: grid;
    grid-template-columns: 60px 1.05fr .95fr;
    gap: 30px;
    padding: 25px;
    border-radius: 20px;
    border: 1px solid var(--line);
    background: #101016
}

.case-number {
    font: 700 13px 'Plus Jakarta Sans';
    color: #9b74ff
}

.case-visual {
    min-height: 310px;
    border-radius: 13px;
    position: relative;
    overflow: hidden
}

.webinar {
    background: radial-gradient(circle at 45% 52%, #6335c65b, #0d0d14 56%);
    padding: 70px 25px
}

.web-row {
    display: flex;
    align-items: center;
    gap: 8px
}

.web-row.lower {
    margin-top: 70px;
    margin-left: 58px
}

.web-row span {
    font-size: 9px;
    padding: 10px 9px;
    border: 1px solid #ffffff20;
    border-radius: 7px;
    background: #171621;
    color: #c8b4ff
}

.web-row i {
    width: 26px;
    height: 1px;
    background: #8654e9;
    position: relative
}

.web-row i:after {
    content: '';
    height: 7px;
    width: 7px;
    background: #c5b0ff;
    border-radius: 50%;
    position: absolute;
    top: -3px;
    animation: flow 3s infinite;
    box-shadow: 0 0 10px #c5b0ff
}

@keyframes flow {
    0% {
        left: -5px;
        opacity: 0
    }

    30%,
    70% {
        opacity: 1
    }

    100% {
        left: 24px;
        opacity: 0
    }
}

.revenue-pill {
    position: absolute;
    right: 18px;
    bottom: 18px;
    padding: 7px 10px;
    border-radius: 6px;
    background: #0d2d26;
    border: 1px solid #35c69d77;
    color: #62dfbb;
    font-size: 10px
}

.case-detail>p,
.case-pair p {
    font-size: 10px;
    letter-spacing: 1.3px;
    color: #a47cff;
    text-transform: uppercase
}

.case-detail h3 {
    font-size: 27px;
    margin: 17px 0 27px
}

.case-detail dl {
    margin: 0
}

.case-detail dl div {
    border-top: 1px solid var(--line);
    padding: 11px 0
}

.case-detail dt {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #817e88
}

.case-detail dd {
    font-size: 12px;
    color: #b2afb9;
    margin: 3px 0 0
}

.case-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-top: 15px
}

.case-pair article {
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 18px;
    background: #111118
}

.mini-case {
    height: 190px;
    border-radius: 10px;
    margin-bottom: 18px
}

.graph {
    background: radial-gradient(circle at 70% 35%, #2254b967, #0c0d16 58%);
    padding: 24px;
    position: relative;
    display: flex;
    align-items: end;
    gap: 8px
}

.graph span {
    position: absolute;
    top: 25px;
    left: 24px;
    font: 700 42px 'Plus Jakarta Sans';
    letter-spacing: -.08em
}

.graph i {
    height: 30px;
    width: 13px;
    background: #4f8cff;
    border-radius: 3px 3px 0 0
}

.graph i:nth-child(2) {
    height: 59px
}

.graph i:nth-child(3) {
    height: 42px
}

.graph i:nth-child(4) {
    height: 81px
}

.graph i:nth-child(5) {
    height: 105px
}

.cost {
    background: radial-gradient(circle, #6530ba7a, #0e0c14 64%);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 13px;
    position: relative
}

.cost span,
.cost strong {
    font: 700 48px 'Plus Jakarta Sans';
    letter-spacing: -.09em
}

.cost span {
    color: #77737e;
    text-decoration: line-through
}

.cost b {
    color: #a47cff
}

.cost small {
    position: absolute;
    bottom: 25px;
    color: #afabb7;
    font-size: 10px
}

.case-pair h3 {
    font-size: 19px;
    margin: 12px 0
}

.case-pair>article>strong {
    font: 700 24px 'Plus Jakarta Sans';
    color: #a57dff;
    letter-spacing: -.05em
}

.case-pair>article>strong small {
    font: 11px Inter;
    color: #aaa7b1
}

.method {
    padding: 120px 0;
    background: linear-gradient(115deg, #0d0c14, #101016)
}

.method-head {
    display: flex;
    justify-content: space-between
}

.timeline {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    padding: 0;
    margin: 55px 0 0;
    position: relative
}

.timeline:before {
    content: '';
    position: absolute;
    top: 12px;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, #8b51fa, #4f8cff, #10b981)
}

.timeline li {
    padding: 43px 20px 0 0
}

.timeline b {
    position: absolute;
    top: 0;
    width: 25px;
    height: 25px;
    border: 1px solid #a778ff;
    background: #121019;
    border-radius: 50%;
    font: 700 9px/23px Inter;
    text-align: center;
    color: #d9c5ff
}

.timeline h3 {
    font-size: 17px
}

.timeline p {
    color: #918e98;
    font-size: 11px;
    margin: 7px 0
}

.about {
    padding-top: 120px;
    padding-bottom: 120px;
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: 100px;
    align-items: center
}

.portrait {
    height: 405px;
    border: 1px solid #7950cb71;
    border-radius: 18px;
    background: radial-gradient(circle at 50% 25%, #7241e0, #2e185d 22%, #121218 60%);
    display: grid;
    place-items: center;
    position: relative;
    overflow: hidden
}

.portrait:before,
.portrait:after {
    content: '';
    position: absolute;
    border: 1px solid #c3aaff73;
    border-radius: 50%;
    width: 250px;
    height: 250px
}

.portrait:after {
    width: 340px;
    height: 340px;
    border-color: #a078ff20
}

.portrait-mark {
    font: 800 95px 'Plus Jakarta Sans';
    letter-spacing: -.12em;
    background: linear-gradient(120deg, #fff, #ad8cfc);
    background-clip: text;
    color: transparent;
    z-index: 1
}

.portrait p {
    position: absolute;
    left: 22px;
    bottom: 17px;
    font: 600 11px 'Plus Jakarta Sans';
    z-index: 1
}

.about h2 {
    margin-bottom: 25px
}

.about-copy>p {
    color: #aaa7b1;
    max-width: 590px
}

.tooling {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 25px
}

.tooling span {
    border: 1px solid var(--line);
    background: #111119;
    border-radius: 20px;
    padding: 6px 9px;
    font-size: 10px;
    color: #c1bec7
}

.contact {
    margin-bottom: 85px;
    padding: 65px;
    border: 1px solid #7456c963;
    border-radius: 20px;
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 55px;
    background: radial-gradient(circle at 84% 35%, #5d36cc6f, #101016 48%)
}

.contact h2 {
    margin: 17px 0
}

.contact>div>p:not(.section-index) {
    color: #aaa7b1;
    max-width: 500px
}

.contact-panel {
    display: grid;
    align-content: center;
    gap: 12px
}

.contact-panel>a:not(.primary) {
    color: #d2cfd9;
    text-decoration: none;
    border-top: 1px solid var(--line);
    padding-top: 12px;
    font-size: 12px;
    display: flex;
    justify-content: space-between
}

.contact-panel>a:not(.primary) span {
    color: #a77fff
}

footer {
    border-top: 1px solid var(--line);
    padding-top: 28px !important;
    padding-bottom: 28px !important;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    color: #77747e;
    font-size: 10px
}

@media(max-width:880px) {
    .nav-cta {
        display: none
    }

    .nav {
        gap: 20px
    }

    .hero {
        grid-template-columns: 1fr;
        padding-top: 60px;
        gap: 50px
    }

    .engine {
        max-width: 650px
    }

    .systems,
    .proof-band,
    .work,
    .method,
    .about {
        padding-top: 80px;
        padding-bottom: 80px
    }

    .capabilities {
        grid-template-columns: 1fr
    }

    .cap {
        min-height: 280px
    }

    .feature-case {
        grid-template-columns: 35px 1fr
    }

    .case-detail {
        grid-column: 2
    }

    .work-heading,
    .split-head {
        grid-template-columns: 1fr
    }

    .work-heading .section-index {
        grid-column: auto
    }

    .about {
        gap: 50px
    }

    .contact {
        padding: 40px
    }
}

@media(max-width:620px) {
    .shell {
        padding-left: 20px;
        padding-right: 20px
    }

    .nav {
        height: 65px;
        padding: 0 20px
    }

    .nav nav {
        display: none
    }

    .menu {
        display: block;
        margin-left: auto;
        background: transparent;
        border: 0;
        color: #fff;
        font: 600 12px Inter
    }

    .nav nav.open {
        display: flex;
        position: absolute;
        top: 64px;
        left: 0;
        right: 0;
        background: #101014;
        border-bottom: 1px solid var(--line);
        padding: 16px 20px;
        flex-direction: column;
        gap: 14px
    }

    .hero h1 {
        font-size: 46px
    }

    .hero-actions {
        align-items: flex-start;
        flex-direction: column
    }

    .engine {
        padding: 13px
    }

    .engine-stage {
        height: 470px
    }

    .engine-node,
    .revenue {
        width: 112px;
        height: 82px
    }

    .ads {
        top: 25px;
        left: 0
    }

    .capture {
        top: 135px;
        left: auto;
        right: 0
    }

    .crm {
        top: 245px;
        left: 0
    }

    .automate {
        top: 355px;
        left: auto;
        right: 0
    }

    .revenue {
        top: 430px;
        left: 0
    }

    .route {
        display: none
    }

    .engine-footer {
        margin-top: 8px;
        gap: 10px;
        font-size: 8px
    }

    .indicator {
        height: auto;
        padding-top: 18px;
        padding-bottom: 18px
    }

    .indicator p {
        max-width: 180px
    }

    .split-head h2 {
        margin-bottom: 20px
    }

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

    .stats article {
        border-bottom: 1px solid var(--line);
        padding-left: 0
    }

    .stats article:nth-child(even) {
        padding-left: 18px;
        border-right: 0
    }

    .stats strong {
        font-size: 39px
    }

    .feature-case {
        grid-template-columns: 1fr;
        padding: 18px
    }

    .case-detail {
        grid-column: auto
    }

    .case-visual {
        min-height: 230px
    }

    .webinar {
        padding: 50px 12px
    }

    .web-row {
        gap: 3px
    }

    .web-row.lower {
        margin-left: 20px;
        margin-top: 55px
    }

    .web-row span {
        font-size: 7px;
        padding: 8px 6px
    }

    .web-row i {
        width: 16px
    }

    .case-pair {
        grid-template-columns: 1fr
    }

    .timeline {
        grid-template-columns: 1fr
    }

    .timeline:before {
        width: 1px;
        height: auto;
        top: 0;
        bottom: 0
    }

    .timeline li {
        padding: 0 0 28px 42px;
        position: relative
    }

    .timeline b {
        left: -12px
    }

    .about {
        grid-template-columns: 1fr
    }

    .portrait {
        height: 270px
    }

    .contact {
        display: block;
        padding: 30px;
        margin-bottom: 50px
    }

    .contact-panel {
        margin-top: 30px
    }

    footer {
        flex-wrap: wrap
    }
}

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

    *,
    *:before,
    *:after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important
    }
}

/* Hero refinement: restore the centered, editorial entry point. */
@media(min-width:621px) {
    .nav {
        max-width: 1100px
    }

    .hero {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 0;
        padding-top: 118px;
        min-height: 0
    }

    .hero-copy {
        max-width: 980px;
        margin: 0 auto
    }

    .hero h1 {
        max-width: 930px;
        margin: 0 auto;
        font-size: clamp(52px, 6vw, 78px)
    }

    .hero-intro {
        max-width: 720px;
        margin: 26px auto 30px
    }

    .hero-actions {
        justify-content: center
    }

    .hero .engine {
        max-width: 1060px;
        width: 100%;
        margin: 72px auto 0;
        text-align: left
    }

    .hero .availability {
        display: none
    }

    .kicker {
        font-size: 10px
    }

    .nav nav {
        margin-left: auto;
        margin-right: auto
    }
}

@media(max-width:620px) {
    .brand {
        letter-spacing: -2px
    }

    .hero-copy {
        text-align: center
    }

    .hero .hero-actions {
        justify-content: center
    }

    .hero .engine {
        margin-top: 54px
    }
}

/* Full-bleed navigation and a restrained technical backdrop for the revised hero. */
body {
    background: #07070b
}

.nav {
    max-width: none !important;
    width: 100%;
    padding-left: max(28px, calc((100vw - 1100px)/2));
    padding-right: max(28px, calc((100vw - 1100px)/2));
    background: linear-gradient(180deg, #08070c 0%, #09080ba8 72%, transparent 100%)
}

.hero {
    position: relative;
    isolation: isolate;
    min-height: 665px !important;
    padding-bottom: 155px !important;
    background: radial-gradient(ellipse 46% 75% at 21% -7%, #3c195b66 0%, #1d0c2c30 39%, transparent 74%)
}

.hero:before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    background: linear-gradient(180deg, #0b08100a 0%, transparent 58%);
    pointer-events: none
}

@media(max-width:620px) {
    .nav {
        padding-left: 20px;
        padding-right: 20px
    }

    .hero {
        min-height: 590px !important;
        padding-bottom: 95px !important;
        background: radial-gradient(ellipse 100% 46% at 50% 42%, #54208243, transparent 72%)
    }
}

/* Keep the hero's accent firmly in the brand-purple family. */
.hero h1 em {
    background: linear-gradient(105deg, #c6a7ff, #9a6bff 50%, #7442e5);
    background-clip: text;
    color: transparent
}

/* Hero is followed by concise proof, then the service system. */
.trust {
    padding-top: 26px;
    padding-bottom: 116px;
    text-align: center
}

.trust-label {
    font-size: 10px;
    letter-spacing: 1.8px;
    color: #85828d;
    margin: 0 0 28px
}

.trust-label strong {
    color: #a67cff;
    font-weight: 700
}

.trust-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    text-align: left;
    border: 1px solid var(--line);
    border-radius: 18px;
    overflow: hidden;
    background: #0d0d13
}

.trust-grid article {
    padding: 27px 30px 25px;
    border-right: 1px solid var(--line)
}

.trust-grid article:last-child {
    border: 0
}

.trust-grid strong {
    font: 700 37px 'Plus Jakarta Sans';
    letter-spacing: -.08em
}

.trust-grid span {
    font: 700 25px 'Plus Jakarta Sans';
    color: #9c73ff;
    letter-spacing: -.05em
}

.trust-grid p {
    margin: 4px 0 0;
    color: #9794a0;
    font-size: 11px
}

.services-section {
    padding-top: 0
}

.services-section+.systems {
    display: none
}

.services-section+.systems+.proof-band {
    display: none
}

.services-section .capabilities {
    grid-template-columns: repeat(4, 1fr)
}

.services-section .cap {
    min-height: 420px
}

.funnel {
    background: radial-gradient(circle at 70% 78%, #193d9a48, #121219 58%)
}

.funnel-visual {
    position: absolute;
    right: 25px;
    bottom: 18px;
    font: 700 59px 'Plus Jakarta Sans';
    color: #5793ff;
    transform: rotate(18deg)
}

.services-section .intel-visual {
    font-size: 32px;
    border: 1px solid #9669ff77;
    border-radius: 12px;
    padding: 13px;
    color: #ad91ff;
    background: #5f32bb3d;
    bottom: 20px;
    right: 20px
}

@media(max-width:880px) {
    .services-section .capabilities {
        grid-template-columns: 1fr 1fr
    }

    .services-section .cap {
        min-height: 320px
    }
}

@media(max-width:620px) {
    .trust {
        padding-top: 15px;
        padding-bottom: 74px
    }

    .trust-grid {
        grid-template-columns: 1fr 1fr
    }

    .trust-grid article {
        padding: 21px 18px;
        border-bottom: 1px solid var(--line)
    }

    .trust-grid article:nth-child(2n) {
        border-right: 0
    }

    .trust-grid strong {
        font-size: 30px
    }

    .services-section .capabilities {
        grid-template-columns: 1fr
    }

    .services-section .cap {
        min-height: 290px
    }

    
}
/* ==========================================
   CASE STUDY
========================================== */

.case-study{
    padding:120px 0;
}

.case-label{
    display:flex;
    align-items:center;
    gap:14px;
    margin-bottom:24px;
}

.case-label span{
    color:#A77FFF;
    font-size:12px;
    font-weight:700;
    letter-spacing:2px;
}

.case-label small{
    color:#8B8894;
    text-transform:uppercase;
    letter-spacing:1px;
}

.case-header{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:90px;
    align-items:flex-start;
    margin-bottom:70px;
}

.case-title h2{
    font-size:clamp(54px,5vw,72px);
    line-height:.95;
    letter-spacing:-.06em;
}

.case-title em{
    font-style:normal;
    background:linear-gradient(90deg,#c9a8ff,#8f6cff,#5f9bff);
    -webkit-background-clip:text;
    color:transparent;
}

.case-intro p{
    color:#A8A5B0;
    line-height:2;
    margin:0 0 24px;
}


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

.story-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:24px;
    margin-bottom:50px;
}

.story-card{

    background:linear-gradient(180deg,#14141b,#111117);

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

    border-radius:18px;

    padding:34px;

    position:relative;

    overflow:hidden;

}

.story-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:1px;

    background:linear-gradient(
        90deg,
        transparent,
        rgba(167,127,255,.5),
        transparent
    );

}

.story-number{

    color:#8E63FF;

    font-size:12px;

    letter-spacing:2px;

    margin-bottom:16px;

    display:block;

}

.story-card h3{

    margin-bottom:22px;

    font-size:24px;

}

.story-card p{

    color:#A5A2AC;

    line-height:1.9;

}

.story-card strong{

    color:white;

}

.story-card ul{

    margin:0;

    padding-left:20px;

    display:grid;

    gap:14px;

}

.story-card li{

    color:#CFCED4;

}


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

.performance-dashboard{

    position:relative;

    overflow:hidden;

    border-radius:22px;

    padding:45px;

    background:
        radial-gradient(circle at top right,#4d2a9b40,transparent 40%),
        linear-gradient(180deg,#15151d,#101016);

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

    box-shadow:
        0 25px 80px rgba(0,0,0,.35),
        inset 0 1px rgba(255,255,255,.04);

}

.performance-dashboard::before{

    content:"";

    position:absolute;

    inset:0;

    pointer-events:none;

    background:
    linear-gradient(
        rgba(255,255,255,.02),
        transparent 20%
    );

}

.dashboard-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:45px;

}

.dashboard-header small{

    color:#87858F;

    font-size:11px;

    letter-spacing:2px;

}

.dashboard-header h3{

    margin-top:10px;

    font-size:34px;

}

.dashboard-status{

    display:flex;

    align-items:center;

    gap:10px;

    color:#6EE7B7;

    font-size:14px;

}

.status-dot{

    width:10px;

    height:10px;

    border-radius:50%;

    background:#22C55E;

    box-shadow:0 0 12px #22C55E;

}


/* ==========================================
   KPI
========================================== */

.dashboard-metrics{

    display:grid;

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

    gap:18px;

}

.metric{

    padding:28px;

    border-radius:16px;

    background:#191923;

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

    transition:.25s;

}

.metric:hover{

    transform:translateY(-4px);

    border-color:#8A63FF;

}

.metric small{

    color:#898791;

    display:block;

    margin-bottom:14px;

}

.metric strong{

    display:block;

    font-size:46px;

    letter-spacing:-.05em;

    margin-bottom:18px;

}

.metric span{

    color:#9D99A8;

}

.metric .success{

    color:#32D399;

}


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

.campaign-tags{

    display:flex;

    flex-wrap:wrap;

    gap:12px;

    margin:36px 0;

}

.campaign-tags span{

    padding:10px 16px;

    border-radius:999px;

    background:#1A1A23;

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

    color:#D0CED6;

    font-size:13px;

    transition:.2s;

}

.campaign-tags span:hover{

    background:#252532;

    border-color:#8A63FF;

}


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

.dashboard-footer{

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

    margin-top:45px;

    padding-top:35px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:50px;

}

.dashboard-summary{

    max-width:650px;

}

.dashboard-summary h4{

    margin-bottom:14px;

    font-size:18px;

}

.dashboard-summary p{

    color:#A7A5AF;

    line-height:1.8;

}


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

.dashboard-button{

    display:flex;

    align-items:center;

    gap:14px;

    padding:16px 24px;

    border:none;

    border-radius:14px;

    cursor:pointer;

    font-weight:600;

    color:white;

    background:
        linear-gradient(
            135deg,
            #8B5CF6,
            #6366F1
        );

    transition:.25s;

    white-space:nowrap;

}

.dashboard-button:hover{

    transform:translateY(-3px);

    box-shadow:
        0 18px 40px rgba(124,58,237,.35);

}

.dashboard-button span{

    font-size:18px;

}


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

.image-modal{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.88);

    display:none;

    justify-content:center;

    align-items:center;

    z-index:9999;

}

.image-modal img{

    width:min(1200px,92vw);

    border-radius:16px;

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

}

.modal-close{

    position:absolute;

    top:40px;

    right:50px;

    width:46px;

    height:46px;

    border:none;

    border-radius:50%;

    background:#1C1C24;

    color:white;

    cursor:pointer;

    font-size:18px;

}


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

@media(max-width:900px){

.case-header{

grid-template-columns:1fr;

gap:40px;

}

.story-row{

grid-template-columns:1fr;

}

.dashboard-metrics{

grid-template-columns:1fr;

}

.dashboard-footer{

flex-direction:column;

align-items:flex-start;

}

}

/* ======================================================
   AUTOMATION CANVAS
====================================================== */

.automation-canvas{

    position:relative;

    margin:60px 0;

    padding:60px;

    border-radius:24px;

    background:
    radial-gradient(circle at top right,
    rgba(124,58,237,.18),
    transparent 45%),

    linear-gradient(
    180deg,
    #14141B,
    #101016);

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

    overflow:hidden;

}

/* subtle grid */

.canvas-grid{

    position:absolute;

    inset:0;

    background-image:

    linear-gradient(
    rgba(255,255,255,.03) 1px,
    transparent 1px),

    linear-gradient(
    90deg,
    rgba(255,255,255,.03) 1px,
    transparent 1px);

    background-size:36px 36px;

    pointer-events:none;

    opacity:.45;

}

/* ======================================================
   ROW
====================================================== */

.workflow-row{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:20px;

    margin-bottom:60px;

}

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

.automation-node{

    width:220px;

    min-height:110px;

    border-radius:18px;

    padding:18px;

    display:flex;

    align-items:center;

    gap:16px;

    position:relative;

    background:#181821;

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

    transition:.3s;

}

.automation-node:hover{

    transform:translateY(-5px);

    border-color:#8B5CF6;

    box-shadow:
    0 12px 30px rgba(124,58,237,.18);

}

.node-icon{

    width:54px;

    height:54px;

    border-radius:14px;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:15px;

    font-weight:700;

    color:white;

}

/* ======================================================
   NODE COLORS
====================================================== */

.trigger .node-icon{

    background:#2563EB;

}

.process .node-icon{

    background:#0EA5E9;

}

.router .node-icon{

    background:#7C3AED;

}

.success .node-icon{

    background:#22C55E;

}

.sms .node-icon{

    background:#A855F7;

}

.email .node-icon{

    background:#F59E0B;

}

.warning .node-icon{

    background:#F97316;

}

.crm .node-icon{

    background:#06B6D4;

}

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

.node-content h4{

    margin:0;

    font-size:17px;

}

.node-content small{

    color:#9CA3AF;

    display:block;

    margin-top:6px;

    line-height:1.5;

}

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

.flow-line.horizontal{

    width:70px;

    height:2px;

    background:linear-gradient(
    90deg,
    #7C3AED,
    #4F8CFF);

    position:relative;

}

.flow-line.vertical{

    width:2px;

    height:36px;

    margin:auto;

    background:linear-gradient(
    180deg,
    #7C3AED,
    #4F8CFF);

}

/* animated dot */

.flow-line.horizontal::after,

.flow-line.vertical::after{

    content:"";

    position:absolute;

    width:8px;

    height:8px;

    border-radius:50%;

    background:#A78BFA;

    box-shadow:0 0 12px #A78BFA;

    animation:flow 2s infinite linear;

}

.flow-line.horizontal::after{

    top:-3px;

    left:-4px;

}

.flow-line.vertical::after{

    left:-3px;

    top:-4px;

}

/* ======================================================
   BRANCHES
====================================================== */

.router-branches{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:100px;

    margin-top:30px;

}

.branch{

    display:flex;

    flex-direction:column;

    align-items:center;

}

/* ======================================================
   FLOW ANIMATION
====================================================== */

@keyframes flow{

    0%{

        transform:translateX(0);

        opacity:0;

    }

    20%{

        opacity:1;

    }

    100%{

        transform:translateX(65px);

        opacity:0;

    }

}

.flow-line.vertical::after{

    animation:flowVertical 2s infinite linear;

}

@keyframes flowVertical{

    0%{

        transform:translateY(0);

        opacity:0;

    }

    20%{

        opacity:1;

    }

    100%{

        transform:translateY(34px);

        opacity:0;

    }

}

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

@media(max-width:900px){

.workflow-row{

flex-direction:column;

}

.flow-line.horizontal{

width:2px;

height:40px;

}

.flow-line.horizontal::after{

animation:flowVertical 2s infinite linear;

}

.router-branches{

grid-template-columns:1fr;

gap:50px;

}

.automation-node{

width:100%;

max-width:340px;

}

}


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

.testimonials{
    padding:140px 0;
}

.testimonials-heading{
    display:grid;
    grid-template-columns:1.1fr .9fr;
    gap:100px;
    align-items:end;
    margin-bottom:70px;
}

.testimonials-heading h2{
    font-size:clamp(54px,5vw,72px);
    line-height:.95;
    letter-spacing:-.06em;
}

.testimonials-heading em{
    font-style:normal;
    background:linear-gradient(90deg,#c79cff,#7d7cff,#58a6ff);
    -webkit-background-clip:text;
    color:transparent;
}

.testimonials-heading p{
    color:var(--muted);
    font-size:18px;
    line-height:1.8;
    max-width:520px;
}


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

.testimonial-grid{

    display:grid;

    grid-template-columns:2fr 1fr;

    gap:24px;

    margin-top:60px;

}

.testimonial-card{

    background:linear-gradient(180deg,#17171f,#13131a);

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

    border-radius:24px;

    padding:36px;

    display:flex;

    flex-direction:column;

    justify-content:space-between;

    transition:.35s;

    position:relative;

    overflow:hidden;

}

.testimonial-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    radial-gradient(circle at top right,

    rgba(124,58,237,.15),

    transparent 45%);

    opacity:0;

    transition:.35s;

}

.testimonial-card:hover{

    transform:translateY(-8px);

    border-color:#8B5CF6;

    box-shadow:

    0 25px 60px rgba(0,0,0,.35);

}

.testimonial-card:hover::before{

    opacity:1;

}


/* Featured */

.featured{

    min-height:360px;

}

.featured blockquote{

    font-size:28px;

    line-height:1.5;

}


/* ==========================================================
   STARS
========================================================== */

.stars{

    color:#FFD166;

    letter-spacing:4px;

    font-size:18px;

    margin-bottom:30px;

}


/* ==========================================================
   REVIEW
========================================================== */

blockquote{

    margin:0;

    color:#E8E8EC;

    font-size:18px;

    line-height:1.8;

    flex:1;

    position:relative;

}

blockquote::before{

    content:"“";

    position:absolute;

    left:-18px;

    top:-10px;

    font-size:72px;

    color:rgba(124,58,237,.18);

    font-family:Georgia;

}


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

.testimonial-footer{

    display:flex;

    align-items:center;

    gap:18px;

    margin-top:40px;

}

.client-avatar{

    width:60px;

    height:60px;

    border-radius:50%;

    background:linear-gradient(135deg,#8B5CF6,#4F8CFF);

    display:flex;

    align-items:center;

    justify-content:center;

    color:white;

    font-weight:700;

    font-size:20px;

    flex-shrink:0;

}

.testimonial-footer h4{

    margin:0;

    font-size:18px;

}

.testimonial-footer span{

    color:var(--muted);

    font-size:14px;

}


/* ==========================================================
   SMALL CARDS
========================================================== */

.testimonial-card:not(.featured){

    min-height:260px;

}

.testimonial-card:not(.featured) blockquote{

    font-size:16px;

}


/* ==========================================================
   STATS
========================================================== */

.testimonial-stats{

    margin-top:60px;

    display:grid;

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

    gap:24px;

}

.testimonial-stats div{

    background:#14141B;

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

    border-radius:18px;

    padding:28px;

    text-align:center;

    transition:.3s;

}

.testimonial-stats div:hover{

    border-color:#8B5CF6;

    transform:translateY(-5px);

}

.testimonial-stats strong{

    display:block;

    font-size:34px;

    margin-bottom:8px;

}

.testimonial-stats span{

    color:var(--muted);

}


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

@media(max-width:1024px){

.testimonials-heading{

grid-template-columns:1fr;

gap:40px;

}

.testimonial-grid{

grid-template-columns:1fr;

}

.featured{

min-height:auto;

}

.testimonial-stats{

grid-template-columns:1fr 1fr;

}

}

@media(max-width:768px){

.testimonials{

padding:90px 0;

}

.testimonials-heading h2{

font-size:46px;

}

.testimonial-card{

padding:28px;

}

.featured blockquote{

font-size:22px;

}

blockquote{

font-size:16px;

}

.testimonial-stats{

grid-template-columns:1fr;

}

}

@media(max-width:480px){

.testimonials-heading h2{

font-size:36px;

}

.client-avatar{

width:52px;

height:52px;

font-size:18px;

}

.featured blockquote{

font-size:20px;

}

blockquote::before{

font-size:56px;

left:-10px;

}

}

/* ==========================================
   TESTIMONIAL JS ANIMATIONS
========================================== */

.reveal{

    opacity:0;

    transform:translateY(50px);

}

.visible{

    opacity:1;

    transform:translateY(0);

    transition:

        opacity .8s ease,

        transform .8s ease;

}   

/* ==========================================================
   MY PROCESS
========================================================== */

.process {
    padding: 140px 0;
}

/* ==========================================
   Heading
========================================== */

.process-heading {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 100px;
    align-items: end;
    margin-bottom: 90px;
}

.process-heading h2 {
    font-size: clamp(56px, 5vw, 74px);
    line-height: .95;
    letter-spacing: -.05em;
}

.process-heading em {
    font-style: normal;
    background: linear-gradient(90deg, #C084FC, #7C5CFF, #60A5FA);
    -webkit-background-clip: text;
    color: transparent;
}

.process-heading p {
    max-width: 520px;
    color: var(--muted);
    line-height: 1.9;
}


/* ==========================================
   Timeline
========================================== */

.process-timeline {

    position: relative;

    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    margin-bottom: 80px;

}

/* Gray Line */

.timeline-progress {

    position: absolute;

    top: 29px;

    left: 9%;

    right: 9%;

    height: 2px;

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

}

/* Purple Progress */

.timeline-progress::after {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    width: var(--progress, 0%);

    height: 100%;

    background: linear-gradient(
        90deg,
        #8B5CF6,
        #6D5DFD,
        #4F8CFF
    );

    transition: width .5s ease;

}


/* ==========================================
   Step
========================================== */

.timeline-step {

    position: relative;

    z-index: 2;

    flex: 1;

    text-align: center;

    cursor: pointer;

    transition: .3s;

}

.timeline-number {

    display: block;

    color: #6B7280;

    font-size: 13px;

    letter-spacing: 2px;

    margin-bottom: 18px;

    transition: .3s;

}

.timeline-dot {

    width: 18px;

    height: 18px;

    border-radius: 50%;

    background: #17171F;

    border: 2px solid rgba(255,255,255,.15);

    margin: auto;

    transition: .35s;

}

.timeline-step h3 {

    margin-top: 18px;

    font-size: 18px;

    font-weight: 600;

    transition: .3s;

}


/* Active */

.timeline-step.active .timeline-number {

    color: #A78BFA;

}

.timeline-step.active .timeline-dot {

    background: #8B5CF6;

    border-color: #8B5CF6;

    transform: scale(1.2);

    box-shadow:
        0 0 25px rgba(139,92,246,.45);

}

.timeline-step.active h3 {

    color: white;

}


/* Completed */

.timeline-step.completed .timeline-dot {

    background: #8B5CF6;

    border-color: #8B5CF6;

}


/* Hover */

.timeline-step:hover h3 {

    color: #A78BFA;

}

.timeline-step:hover .timeline-dot {

    transform: scale(1.15);

}


/* ==========================================
   Content
========================================== */

.process-content {

    max-width: 760px;

    margin: auto;

    text-align: center;

}

.process-step {

    display: inline-block;

    margin-bottom: 18px;

    color: #A78BFA;

    font-size: 13px;

    letter-spacing: 2px;

    text-transform: uppercase;

}

.process-title {

    font-size: 42px;

    margin-bottom: 20px;

}

.process-description {

    color: var(--muted);

    line-height: 1.9;

    font-size: 18px;

}


/* ==========================================
   Checklist
========================================== */

.process-checklist {

    display: grid;

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

    gap: 20px 40px;

    margin-top: 50px;

    max-width: 700px;

    margin-inline: auto;

}

.check-item {

    display: flex;

    align-items: center;

    justify-content: flex-start;

    gap: 12px;

    font-size: 24px;

}

.check-item span {

    color: #8B5CF6;

    font-weight: bold;

    font-size: 18px;

}


/* ==========================================
   Summary
========================================== */

.process-summary {

    display: flex;

    justify-content: center;

    gap: 80px;

    margin-top: 90px;

    text-align: center;

}

.process-summary strong {

    display: block;

    font-size: 38px;

    margin-bottom: 10px;

}

.process-summary span {

    color: var(--muted);

}


/* ==========================================
   Responsive
========================================== */

@media (max-width:1024px){

    .process-heading{

        grid-template-columns:1fr;

        gap:50px;

    }

}

@media (max-width:768px){

    .process{

        padding:90px 0;

    }

    .process-heading h2{

        font-size:46px;

    }

    .process-timeline{

        overflow-x:auto;

        gap:50px;

        justify-content:flex-start;

        padding-bottom:20px;

    }

    .timeline-progress{

        width:720px;

        right:auto;

    }

    .timeline-step{

        min-width:120px;

    }

    .process-title{

        font-size:34px;

    }

    .process-checklist{

        grid-template-columns:1fr;

        text-align:left;

        margin-left: 20px;

    }

    .process-summary{

        flex-direction:column;

        gap:40px;

    }

}

@media (max-width:480px){

    .process-heading h2{

        font-size:36px;

    }

    .process-description{

        font-size:16px;

    }

}

.process-step,
.process-title,
.process-description,
.process-checklist{

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

}

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

.menu {
  display: none;

  position: relative;
  z-index: 1001;

  width: 40px;
  height: 40px;

  padding: 0;
  margin: 0;

  border: 0;
  outline: none;

  background: transparent;

  cursor: pointer;

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

  flex-direction: column;

  gap: 5px;

  pointer-events: auto;

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


/* Hamburger lines */

.menu span {
  display: block;

  width: 22px;
  height: 2px;

  background: #ffffff;

  border-radius: 999px;

  pointer-events: none;

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


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

@media (max-width: 768px) {

  .menu {
    display: flex;
  }

}


/* =========================================================
   HAMBURGER → X
   ========================================================= */

.menu[aria-expanded="true"] span:nth-child(1) {
  transform:
    translateY(7px)
    rotate(45deg);
}

.menu[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.menu[aria-expanded="true"] span:nth-child(3) {
  transform:
    translateY(-7px)
    rotate(-45deg);
}

/* =========================================================
   MOBILE HEADER — FINAL MENU FIX
   ========================================================= */

@media (max-width: 768px) {

  /* Keep the header as the positioning reference */
  .nav {
    position: relative;
    z-index: 1000;
  }


  /* Hamburger button */
  .nav .menu {
    display: flex !important;

    position: absolute !important;

    top: 50%;
    right: 18px;

    transform: translateY(-50%);

    width: 42px;
    height: 42px;

    margin: 0 !important;
    padding: 0 !important;

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

    flex-direction: column;

    gap: 5px;

    border: 0;
    outline: none;

    background: transparent;

    cursor: pointer;

    z-index: 10001;

    pointer-events: auto;

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


  /* Hamburger lines */
  .nav .menu span {
    display: block;

    width: 22px;
    height: 2px;

    margin: 0;
    padding: 0;

    background: #ffffff;

    border-radius: 999px;

    pointer-events: none;

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


  /* =======================================================
     HAMBURGER → X
     ======================================================= */

  .nav .menu[aria-expanded="true"] span:nth-child(1) {
    transform:
      translateY(7px)
      rotate(45deg);
  }

  .nav .menu[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
  }

  .nav .menu[aria-expanded="true"] span:nth-child(3) {
    transform:
      translateY(-7px)
      rotate(-45deg);
  }


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

  .nav nav {
    position: absolute;

    top: 100%;
    left: 0;
    right: 0;

    z-index: 9999;
  }


  /*
   * When the menu is closed, make sure the navigation
   * cannot sit on top of the hamburger.
   */

  .nav nav:not(.open) {
    pointer-events: none;
  }


  .nav nav.open {
    pointer-events: auto;
  }

}

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

@media (max-width: 620px) {

  .hero-actions {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .hero-actions .primary {
    margin-left: auto;
    margin-right: auto;
  }

  .cap p {
    font-size: 12px;
    color: #aaa7b2;
    max-width: 250px;
    padding-bottom: 70px;

}
.case-study {
    padding: 80px 0;
}
 .trust-label .country {
    display: block;
    margin-top: 4px;
  }

}

.client-avatar {
  width: 64px;
  height: 64px;
  flex-shrink: 0;

  border-radius: 50%;
  overflow: hidden;
}

.client-avatar img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;
}

/* =========================================================
   ABOUT ME — PHOTO OVERRIDE
   ========================================================= */

.portrait {
  position: relative;

  overflow: hidden;

  background: transparent !important;
}

.portrait::before,
.portrait::after {
  display: none !important;
}

.portrait img {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  display: block;

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

  border-radius: inherit;
}