:root {
    --svc-bg: #05080a;
    --svc-ink: #f2f6f7;
    --svc-dim: rgba(242, 246, 247, .57);
    --svc-cyan: #07c0cd;
    --svc-line: rgba(242, 246, 247, .13)
}

* {
    box-sizing: border-box
}

.svc-ambient {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    background: radial-gradient(80% 60% at 50% 0%, rgba(0, 188, 212, .08), transparent 65%);
    pointer-events: none
}

.svc-grid {
    position: absolute;
    inset: 0;
    opacity: .2;
    background-image: linear-gradient(rgba(242, 246, 247, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(242, 246, 247, .04) 1px, transparent 1px);
    background-size: 72px 72px;
    mask-image: linear-gradient(to bottom, black, transparent 75%)
}

.svc-orb {
    position: absolute;
    width: 45vw;
    height: 45vw;
    border-radius: 50%;
    filter: blur(90px);
    opacity: .12;
    background: #07c0cd;
    animation: svc-drift 17s ease-in-out infinite alternate
}

.svc-orb--a {
    left: -20%;
    top: 22%
}

.svc-orb--b {
    right: -20%;
    top: 55%;
    background: #000080;
    animation-delay: -8s
}

@keyframes svc-drift {
    to {
        transform: translate(9vw, 4vh) scale(1.13)
    }
}

.svc-nav-links {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-left: auto
}

.svc-nav-links a {
    color: rgba(242, 246, 247, .55);
    font-size: 13px;
    text-decoration: none
}

.svc-nav-links a:hover,
.svc-nav-links .is-active {
    color: #f2f6f7
}

.svc-hero {
    position: relative;
    width: calc(100% - 40px);
    margin: 0 20px;
    min-height: 700px;
    height: 92vh;
    max-height: 930px;
    overflow: hidden;
    border: 1px solid rgba(242, 246, 247, .1);
    border-radius: 20px;
    background: radial-gradient(120% 100% at 12% 45%, #071019, #05080a 55%, #030405)
}

.svc-thread-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%
}

.svc-hero__scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(3, 4, 5, .1), transparent 35%, rgba(3, 4, 5, .5))
}

.svc-hero__content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 700px;
    height: 100%;
    padding: 80px 28px;
    text-align: center
}

.svc-kicker,
.svc-index,
.svc-detail__label,
.svc-tech__groups small {
    font-size: 11px;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--svc-cyan)
}

.svc-hero h1 {
    max-width: 950px;
    margin: 23px 0 22px;
    font-size: clamp(42px, 7vw, 92px);
    line-height: 1.02;
    font-weight: 500;
    letter-spacing: -.06em
}

.svc-hero h1 em,
.svc-section h2 em,
.svc-final h2 em {
    font-style: normal;
    color: var(--svc-cyan)
}

.svc-hero p {
    max-width: 540px;
    color: var(--svc-dim);
    font-size: 17px;
    line-height: 1.6
}

.svc-hero__actions {
    display: flex;
    gap: 12px;
    margin-top: 30px
}

.svc-btn {
    display: inline-flex;
    align-items: center;
    gap: 18px;
    padding: 14px 21px;
    border-radius: 999px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    transition: transform .2s, background .2s;
    justify-content: center;
}

.svc-btn:hover {
    transform: translateY(-2px)
}

.svc-btn span {
    font-size: 18px
}

.svc-btn--light {
    background: #f2f6f7;
    color: #05080a
}

.svc-btn--glass {
    color: #f2f6f7;
    border: 1px solid rgba(242, 246, 247, .22);
    background: rgba(242, 246, 247, .07)
}

.svc-btn--glass:hover {
    background: rgba(242, 246, 247, .13)
}

.svc-hero__footer {
    position: absolute;
    bottom: 28px;
    left: 30px;
    right: 30px;
    display: flex;
    justify-content: space-between;
    color: rgba(242, 246, 247, .4);
    font-size: 12px
}

.svc-trust {
    max-width: 1400px;
    margin: auto;
    padding: 35px clamp(22px, 5vw, 70px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    border-bottom: 1px solid var(--svc-line)
}

.svc-trust h2 {
    max-width: 270px;
    font-size: 17px;
    line-height: 1.3;
    font-weight: 500
}

.svc-trust h2 em {
    color: var(--svc-cyan);
    font-style: normal
}

.svc-trust__items {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 12px 27px
}

.svc-trust__items span {
    color: rgba(242, 246, 247, .45);
    font-size: 12px
}

.svc-trust__items span:before {
    content: '+';
    color: var(--svc-cyan);
    margin-right: 6px
}

.svc-section {
    max-width: 1400px;
    margin: auto;
    padding: clamp(90px, 11vw, 165px) clamp(22px, 5vw, 70px);
    border-bottom: 1px solid var(--svc-line)
}

.svc-section__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 50px;
    margin-bottom: 52px
}

.svc-section__head h2 {
    max-width: 760px;
    margin-top: 17px;
    font-size: clamp(39px, 6vw, 78px);
    line-height: 1.02;
    letter-spacing: -.055em;
    font-weight: 500
}

.svc-section__head>p {
    max-width: 330px;
    color: var(--svc-dim);
    font-size: 15px;
    line-height: 1.65
}

.svc-feature__layout,
.svc-split__layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center
}

.svc-visual {
    position: relative;
    min-height: 440px;
    overflow: hidden;
    border: 1px solid rgba(0, 188, 212, .25);
    border-radius: 16px;
    background: linear-gradient(145deg, #07161e, #05080a)
}

.svc-ai-visual {
    display: grid;
    place-items: center;
    background: radial-gradient(circle at 50% 50%, rgba(0, 188, 212, .15), transparent 38%), #071019
}

.svc-ai-visual__core {
    display: grid;
    place-items: center;
    width: 125px;
    height: 125px;
    border: 1px solid rgba(0, 188, 212, .7);
    border-radius: 50%;
    color: #f2f6f7;
    font-size: 24px;
    box-shadow: 0 0 80px rgba(0, 188, 212, .28)
}

.svc-ai-visual__ring {
    position: absolute;
    border: 1px solid rgba(0, 188, 212, .3);
    border-radius: 50%;
    transform: rotate(-30deg)
}

.svc-ai-visual__ring--one {
    width: 62%;
    height: 42%;
    animation: svc-spin 14s linear infinite
}

.svc-ai-visual__ring--two {
    width: 40%;
    height: 70%;
    transform: rotate(35deg);
    animation: svc-spin 10s linear infinite reverse
}

@keyframes svc-spin {
    to {
        transform: rotate(330deg)
    }
}

.svc-visual__caption {
    position: absolute;
    bottom: 24px;
    left: 25px;
    color: rgba(242, 246, 247, .4);
    font-size: 10px;
    letter-spacing: .15em
}

.svc-detail h3 {
    font-size: 25px;
    font-weight: 500;
    line-height: 1.2;
    max-width: 440px
}

.svc-pill-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 28px 0
}

.svc-pill-grid span {
    padding: 9px 11px;
    border: 1px solid rgba(242, 246, 247, .14);
    border-radius: 999px;
    color: rgba(242, 246, 247, .62);
    font-size: 12px
}

.svc-deliverables {
    margin-top: 35px;
    padding-top: 18px;
    border-top: 1px solid var(--svc-line)
}

.svc-deliverables small {
    font-size: 10px;
    letter-spacing: .13em;
    color: var(--svc-cyan)
}

.svc-deliverables p {
    color: rgba(242, 246, 247, .5);
    font-size: 13px;
    line-height: 1.7
}

.svc-arrow-link {
    display: inline-flex;
    align-items: center;
    gap: 15px;
    margin-top: 26px;
    color: var(--svc-cyan);
    text-decoration: none;
    font-size: 14px
}

.svc-arrow-link span {
    font-size: 20px
}

.svc-split__layout {
    grid-template-columns: 1fr 1.2fr
}

.svc-detail--three {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    align-self: stretch
}

.svc-detail--three>div {
    padding-right: 15px;
    border-right: 1px solid var(--svc-line)
}

.svc-detail--three p {
    color: var(--svc-dim);
    font-size: 14px;
    line-height: 2;
    margin-top: 17px
}

.svc-detail--three .svc-arrow-link {
    grid-column: 1/-1
}

.svc-product-visual {
    min-height: 370px;
    background: linear-gradient(145deg, #0b0c1d, #05080a)
}

.svc-product-visual__bar {
    position: absolute;
    top: 30px;
    left: 32px;
    right: 32px;
    display: flex;
    gap: 7px
}

.svc-product-visual__bar i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #07c0cd
}

.svc-product-visual__chart {
    position: absolute;
    left: 13%;
    right: 13%;
    bottom: 18%;
    height: 45%;
    display: flex;
    align-items: flex-end;
    gap: 13px
}

.svc-product-visual__chart b {
    flex: 1;
    background: linear-gradient(#07c0cd, #000080);
    border-radius: 4px 4px 0 0
}

.svc-product-visual__chart b:nth-child(1) {
    height: 38%
}

.svc-product-visual__chart b:nth-child(2) {
    height: 68%
}

.svc-product-visual__chart b:nth-child(3) {
    height: 47%
}

.svc-product-visual__chart b:nth-child(4) {
    height: 82%
}

.svc-product-visual__chart b:nth-child(5) {
    height: 61%
}

.svc-product-visual__line {
    position: absolute;
    left: 10%;
    right: 10%;
    top: 46%;
    height: 1px;
    background: rgba(0, 188, 212, .6);
    transform: rotate(-7deg);
    box-shadow: 0 0 18px #07c0cd
}

.svc-product-visual>span {
    position: absolute;
    bottom: 22px;
    left: 30px;
    color: rgba(242, 246, 247, .4);
    font-size: 10px;
    letter-spacing: .15em
}

.svc-flow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 30px 0
}

.svc-flow>i {
    color: var(--svc-cyan);
    font-style: normal;
    font-size: 22px
}

.svc-flow__node {
    display: flex;
    flex-direction: column;
    gap: 9px;
    min-width: 120px;
    padding: 20px;
    border: 1px solid rgba(242, 246, 247, .15);
    border-radius: 12px;
    background: rgba(242, 246, 247, .035)
}

.svc-flow__node strong {
    color: var(--svc-cyan);
    font-size: 11px;
    font-weight: 500
}

.svc-flow__node span {
    font-size: 17px
}

.svc-flow__node small {
    color: rgba(242, 246, 247, .4);
    font-size: 11px
}

.svc-flow__node--result {
    border-color: rgba(0, 188, 212, .6);
    background: rgba(0, 188, 212, .09)
}

.svc-bottom-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 30px
}

.svc-pill-grid--wide {
    max-width: 750px
}

.svc-dashboard-visual {
    min-height: 370px;
    background: #071019
}

.svc-dashboard-visual__side {
    position: absolute;
    inset: 0 auto 0 0;
    width: 22%;
    background: rgba(0, 188, 212, .08);
    border-right: 1px solid rgba(0, 188, 212, .2)
}

.svc-dashboard-visual__side:after {
    content: '';
    position: absolute;
    top: 60px;
    left: 20%;
    width: 60%;
    height: 8px;
    background: #07c0cd;
    box-shadow: 0 38px 0 rgba(242, 246, 247, .2), 0 76px 0 rgba(242, 246, 247, .2), 0 114px 0 rgba(242, 246, 247, .2)
}

.svc-dashboard-visual__main {
    position: absolute;
    inset: 50px 8% 50px 29%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px
}

.svc-dashboard-visual__main span {
    height: 70px;
    border: 1px solid rgba(242, 246, 247, .15);
    border-radius: 7px;
    background: rgba(242, 246, 247, .05)
}

.svc-dashboard-visual__main div {
    grid-column: 1/-1;
    border: 1px solid rgba(0, 188, 212, .25);
    border-radius: 7px;
    background: linear-gradient(165deg, transparent 45%, rgba(0, 188, 212, .38) 46% 47%, transparent 48%);
    background-size: 100% 100%
}

.svc-reverse .svc-split__layout {
    grid-template-columns: 1.2fr 1fr
}

.svc-architecture {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 24px 0
}

.svc-architecture div {
    padding: 20px 18px;
    border: 1px solid rgba(0, 188, 212, .35);
    border-radius: 10px;
    color: rgba(242, 246, 247, .75);
    font-size: 13px;
    background: rgba(0, 188, 212, .05)
}

.svc-architecture span {
    color: var(--svc-cyan)
}

.svc-backend__list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px
}

.svc-backend__list span {
    padding: 11px 13px;
    border: 1px solid var(--svc-line);
    border-radius: 999px;
    color: var(--svc-dim);
    font-size: 12px
}

.svc-principles {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--svc-line);
    border: 1px solid var(--svc-line)
}

.svc-principles article {
    min-height: 220px;
    padding: 25px;
    background: #05080a
}

.svc-principles b,
.svc-process__steps b,
.svc-engagement__grid b {
    font-size: 12px;
    color: var(--svc-cyan);
    font-weight: 500
}

.svc-principles h3 {
    margin-top: 58px;
    font-size: 18px;
    font-weight: 500
}

.svc-principles p {
    color: var(--svc-dim);
    font-size: 13px;
    line-height: 1.5
}

.svc-process__steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px
}

.svc-process__steps article {
    padding: 25px;
    margin-left: -25px;
    border-right: 1px solid var(--svc-line)
}

.svc-process__steps small {
    display: block;
    margin-top: 12px;
    color: rgba(242, 246, 247, .4);
    font-size: 10px;
    letter-spacing: .13em
}

.svc-process__steps h3 {
    margin-top: 48px;
    font-size: 21px;
    font-weight: 500
}

.svc-process__steps p {
    color: var(--svc-dim);
    font-size: 14px;
    line-height: 1.5
}

.svc-tech__marquee {
    overflow: hidden;
    margin: 25px 0 40px;
    border-top: 1px solid var(--svc-line);
    border-bottom: 1px solid var(--svc-line)
}

.svc-tech__marquee>div {
    display: flex;
    width: max-content;
    gap: 50px;
    padding: 22px 0;
    animation: svc-marquee 25s linear infinite
}

.svc-tech__marquee span {
    font-size: clamp(20px, 3vw, 38px);
    color: rgba(242, 246, 247, .65)
}

.svc-tech__marquee span:before {
    content: '✦';
    color: var(--svc-cyan);
    font-size: 13px;
    margin-right: 50px
}

@keyframes svc-marquee {
    to {
        transform: translateX(-50%)
    }
}

.svc-tech__groups {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px
}

.svc-tech__groups div {
    border-top: 1px solid var(--svc-line);
    padding-top: 15px
}

.svc-tech__groups p {
    color: var(--svc-dim);
    font-size: 13px;
    line-height: 1.6;
    margin-top: 13px
}

.svc-engagement__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px
}

.svc-engagement__grid article {
    min-height: 250px;
    padding: 25px;
    border: 1px solid var(--svc-line);
    border-radius: 14px;
    background: rgba(242, 246, 247, .035)
}

.svc-engagement__grid h3 {
    margin-top: 52px;
    font-size: 21px;
    font-weight: 500
}

.svc-engagement__grid p {
    color: var(--svc-dim);
    font-size: 14px;
    line-height: 1.5
}

.svc-engagement__grid span {
    display: block;
    margin-top: 24px;
    color: var(--svc-cyan);
    font-size: 12px
}

.svc-faq__list {
    max-width: 920px;
    margin-left: auto
}

.svc-faq details {
    border-top: 1px solid var(--svc-line);
    padding: 21px 0
}

.svc-faq details:last-child {
    border-bottom: 1px solid var(--svc-line)
}

.svc-faq summary {
    cursor: pointer;
    list-style: none;
    font-size: 17px
}

.svc-faq summary::-webkit-details-marker {
    display: none
}

.svc-faq summary:after {
    content: '+';
    float: right;
    color: var(--svc-cyan);
    font-size: 22px
}

.svc-faq details[open] summary:after {
    content: '−'
}

.svc-faq details p {
    max-width: 650px;
    color: var(--svc-dim);
    font-size: 14px;
    line-height: 1.6;
    margin-top: 16px
}

.svc-final {
    position: relative;
    overflow: hidden;
    max-width: 1260px;
    margin: clamp(60px, 9vw, 120px) auto;
    padding: clamp(75px, 10vw, 145px) 30px;
    text-align: center;
    border: 1px solid rgba(0, 188, 212, .45);
    border-radius: 20px;
    background: linear-gradient(120deg, #0a1d24, #061017 55%, #090a20)
}

.svc-final__glow {
    position: absolute;
    inset: -50%;
    background: radial-gradient(circle, rgba(0, 188, 212, .2), transparent 45%);
    pointer-events: none
}

.svc-final>*:not(.svc-final__glow) {
    position: relative
}

.svc-final h2 {
    margin: 20px auto;
    font-size: clamp(44px, 8vw, 100px);
    line-height: .96;
    letter-spacing: -.06em;
    font-weight: 500
}

.svc-final p {
    max-width: 430px;
    margin: 0 auto;
    color: var(--svc-dim);
    font-size: 16px;
    line-height: 1.6
}

.svc-final>div:last-child {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 32px
}

@media(max-width:1000px) {
    .svc-nav-links {
        display: none
    }
    .svc-trust,
    .svc-section__head {
        display: block
    }
    .svc-section__head>p {
        margin-top: 22px
    }
    .svc-feature__layout,
    .svc-split__layout,
    .svc-reverse .svc-split__layout {
        grid-template-columns: 1fr
    }
    .svc-detail--three {
        grid-template-columns: repeat(3, 1fr)
    }
    .svc-principles,
    .svc-process__steps,
    .svc-tech__groups {
        grid-template-columns: repeat(2, 1fr);
        gap: 1px
    }
    .svc-process__steps article {
        padding: 22px;
        border-bottom: 1px solid var(--svc-line)
    }
    .svc-tech__groups {
        gap: 22px;
        background: none
    }
    .svc-trust__items {
        justify-content: flex-start;
        margin-top: 20px
    }
}

@media(max-width:650px) {
    .svc-hero {
        width: calc(100% - 24px);
        margin: 0 12px;
        border-radius: 14px
    }
    .svc-hero__content {
        min-height: 650px;
        padding: 75px 20px
    }
    .svc-hero__footer {
        left: 20px;
        right: 20px;
        bottom: 20px
    }
    .svc-hero__footer span {
        display: none
    }
    .svc-hero h1 {
        font-size: clamp(39px, 11vw, 60px)
    }
    .svc-hero p {
        font-size: 15px
    }
    .svc-hero__actions,
    .svc-final>div:last-child {
        flex-direction: column;
        width: 100%;
        max-width: 270px
    }
    .svc-btn {
        justify-content: center
    }
    .svc-trust {
        padding: 28px 22px
    }
    .svc-trust__items {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 14px
    }
    .svc-section {
        padding: 78px 22px
    }
    .svc-detail--three,
    .svc-principles,
    .svc-process__steps,
    .svc-tech__groups,
    .svc-engagement__grid {
        grid-template-columns: 1fr
    }
    .svc-detail--three>div {
        border-right: 0;
        border-bottom: 1px solid var(--svc-line);
        padding: 0 0 20px
    }
    .svc-flow,
    .svc-architecture {
        align-items: stretch;
        flex-direction: column
    }
    .svc-flow>i,
    .svc-architecture>span {
        text-align: center;
        transform: rotate(90deg)
    }
    .svc-flow__node {
        min-width: 0
    }
    .svc-bottom-row {
        display: block
    }
    .svc-visual {
        min-height: 300px
    }
    .svc-tech__marquee>div {
        gap: 30px
    }
    .svc-tech__marquee span:before {
        margin-right: 30px
    }
    .svc-final {
        margin: 55px 12px 80px;
        border-radius: 14px;
        padding-left: 22px;
        padding-right: 22px
    }
    .svc-faq summary {
        font-size: 15px
    }
}

@media(prefers-reduced-motion:reduce) {
    .svc-orb,
    .svc-ai-visual__ring,
    .svc-tech__marquee>div {
        animation: none
    }
}


/* Load after services.css. The service hero remains animated; content motion is intentionally restrained. */

.svc-orb {
    animation: none
}

.svc-ai-visual__ring--one,
.svc-ai-visual__ring--two {
    animation: none
}

.svc-tech__marquee>div {
    animation: none
}

.svc-media__layout {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 40px;
    align-items: center
}

.svc-media__visual {
    position: relative;
    min-height: 390px;
    overflow: hidden;
    border: 1px solid rgba(242, 246, 247, .14);
    border-radius: 16px;
    background: linear-gradient(145deg, #10131f, #05080a)
}

.svc-media__visual:before {
    content: '';
    position: absolute;
    inset: 16% 10% 34%;
    border: 1px solid rgba(0, 188, 212, .25);
    background: linear-gradient(135deg, rgba(0, 188, 212, .08), transparent 45%), repeating-linear-gradient(90deg, transparent 0 31px, rgba(242, 246, 247, .06) 32px 33px)
}

.svc-media__visual>span {
    position: absolute;
    bottom: 23px;
    left: 25px;
    color: rgba(242, 246, 247, .4);
    font-size: 10px;
    letter-spacing: .15em
}

.svc-media__play {
    position: absolute;
    top: 43%;
    left: 50%;
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    transform: translate(-50%, -50%);
    padding-left: 3px;
    border: 1px solid rgba(0, 188, 212, .65);
    border-radius: 50%;
    color: #07c0cd;
    background: rgba(0, 188, 212, .1);
    font-size: 15px
}

.svc-timeline {
    position: absolute;
    left: 10%;
    right: 10%;
    bottom: 17%;
    display: flex;
    gap: 6px;
    height: 34px
}

.svc-timeline i {
    flex: 1;
    border-radius: 3px;
    background: linear-gradient(90deg, #000080, #07c0cd)
}

.svc-timeline i:nth-child(2),
.svc-timeline i:nth-child(4) {
    opacity: .45
}

.svc-marketing__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px
}

.svc-marketing__grid article {
    min-height: 270px;
    padding: 27px;
    border: 1px solid rgba(242, 246, 247, .13);
    border-radius: 15px;
    background: rgba(242, 246, 247, .035)
}

.svc-marketing__grid b {
    font-size: 12px;
    color: #07c0cd;
    font-weight: 500
}

.svc-marketing__grid h3 {
    margin-top: 55px;
    font-size: 20px;
    font-weight: 500
}

.svc-marketing__grid p {
    color: rgba(242, 246, 247, .55);
    font-size: 14px;
    line-height: 1.6;
    margin-top: 12px
}

.svc-mini-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 20px
}

.svc-mini-tags span {
    padding: 6px 8px;
    border: 1px solid rgba(242, 246, 247, .12);
    border-radius: 999px;
    color: rgba(242, 246, 247, .46);
    font-size: 10px
}

@media(max-width:900px) {
    .svc-media__layout {
        grid-template-columns: 1fr
    }
    .svc-marketing__grid {
        grid-template-columns: 1fr 1fr
    }
}

@media(max-width:650px) {
    .svc-marketing__grid {
        grid-template-columns: 1fr
    }
    .svc-media__visual {
        min-height: 300px
    }
}


/* Add after services-additions.css. Motion is subtle and respects reduced-motion preferences. */

.svc-section__head,
.svc-detail,
.svc-visual,
.svc-flow,
.svc-bottom-row,
.svc-architecture,
.svc-backend__list,
.svc-principles,
.svc-process__steps,
.svc-tech__groups,
.svc-engagement__grid,
.svc-faq__list,
.svc-media__layout {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .75s ease, transform .75s cubic-bezier(.22, 1, .36, 1)
}

.svc-section__head.is-visible,
.svc-detail.is-visible,
.svc-visual.is-visible,
.svc-flow.is-visible,
.svc-bottom-row.is-visible,
.svc-architecture.is-visible,
.svc-backend__list.is-visible,
.svc-principles.is-visible,
.svc-process__steps.is-visible,
.svc-tech__groups.is-visible,
.svc-engagement__grid.is-visible,
.svc-faq__list.is-visible,
.svc-media__layout.is-visible {
    opacity: 1;
    transform: none
}

.svc-section__head .svc-index,
.svc-section__head h2,
.svc-section__head>p {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .55s ease, transform .65s cubic-bezier(.22, 1, .36, 1)
}

.svc-section__head .svc-index {
    transition-delay: .05s
}

.svc-section__head h2 {
    transition-delay: .12s
}

.svc-section__head>p {
    transition-delay: .2s
}

.svc-section__head.is-visible .svc-index,
.svc-section__head.is-visible h2,
.svc-section__head.is-visible>p {
    opacity: 1;
    transform: none
}

.svc-section__head h2 {
    transition: opacity .55s ease, transform .65s cubic-bezier(.22, 1, .36, 1)
}

.svc-pill-grid span,
.svc-backend__list span,
.svc-mini-tags span {
    transition: color .2s, border-color .2s, background .2s, transform .2s;
    cursor: default
}

.svc-pill-grid span:hover,
.svc-backend__list span:hover,
.svc-mini-tags span:hover {
    color: #f2f6f7;
    border-color: rgba(0, 188, 212, .7);
    background: rgba(0, 188, 212, .1);
    transform: translateY(-3px)
}

.svc-flow__node,
.svc-architecture div {
    transition: transform .25s, border-color .25s, background .25s, box-shadow .25s
}

.svc-flow__node:hover,
.svc-architecture div:hover {
    transform: translateY(-6px);
    border-color: rgba(0, 188, 212, .7);
    background: rgba(0, 188, 212, .1);
    box-shadow: 0 15px 35px rgba(0, 0, 0, .24)
}

.svc-principles article,
.svc-process__steps article,
.svc-engagement__grid article {
    transition: background .25s, transform .25s, box-shadow .25s
}

.svc-principles article:hover,
.svc-process__steps article:hover,
.svc-engagement__grid article:hover {
    position: relative;
    z-index: 1;
    background: linear-gradient(145deg, rgba(0, 188, 212, .12), rgba(242, 246, 247, .025));
    transform: translateY(-5px);
    box-shadow: 0 18px 36px rgba(0, 0, 0, .22)
}

.svc-visual,
.svc-media__visual {
    transition: border-color .3s, box-shadow .3s, transform .3s
}

.svc-visual:hover,
.svc-media__visual:hover {
    border-color: rgba(0, 188, 212, .7);
    box-shadow: 0 0 45px rgba(0, 188, 212, .12);
    transform: translateY(-4px)
}

.svc-visual:hover .svc-ai-visual__core {
    box-shadow: 0 0 100px rgba(0, 188, 212, .5);
    border-color: #07c0cd
}

.svc-visual:hover .svc-product-visual__line {
    box-shadow: 0 0 30px #07c0cd
}

.svc-arrow-link {
    transition: gap .25s, color .25s
}

.svc-arrow-link:hover {
    gap: 23px;
    color: #f2f6f7
}

.svc-arrow-link:hover span {
    color: #07c0cd
}

.svc-tech__marquee span {
    transition: color .25s, text-shadow .25s
}

.svc-tech__marquee span:hover {
    color: #f2f6f7;
    text-shadow: 0 0 18px rgba(0, 188, 212, .55)
}

.svc-tech__groups div {
    transition: border-color .25s, transform .25s
}

.svc-tech__groups div:hover {
    border-color: #07c0cd;
    transform: translateY(-4px)
}

.svc-faq details {
    transition: border-color .25s, padding-left .25s
}

.svc-faq details:hover {
    border-color: rgba(0, 188, 212, .6);
    padding-left: 10px
}

.svc-faq summary {
    transition: color .2s
}

.svc-faq details:hover summary {
    color: #07c0cd
}

.svc-final {
    transition: border-color .3s, box-shadow .3s
}

.svc-final:hover {
    border-color: #07c0cd;
    box-shadow: 0 0 70px rgba(0, 188, 212, .12)
}

@media(prefers-reduced-motion:reduce) {
    .svc-section__head,
    .svc-detail,
    .svc-visual,
    .svc-flow,
    .svc-bottom-row,
    .svc-architecture,
    .svc-backend__list,
    .svc-principles,
    .svc-process__steps,
    .svc-tech__groups,
    .svc-engagement__grid,
    .svc-faq__list,
    .svc-media__layout,
    .svc-section__head .svc-index,
    .svc-section__head h2,
    .svc-section__head>p {
        opacity: 1;
        transform: none;
        transition: none
    }
    .svc-pill-grid span,
    .svc-backend__list span,
    .svc-mini-tags span,
    .svc-flow__node,
    .svc-architecture div,
    .svc-principles article,
    .svc-process__steps article,
    .svc-engagement__grid article,
    .svc-visual,
    .svc-media__visual {
        transition: none
    }
}


/* Digital growth and content section */

.svc-growth__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.svc-growth__card {
    position: relative;
    min-height: 360px;
    padding: 28px;
    overflow: hidden;
    border: 1px solid var(--svc-line);
    border-radius: 16px;
    background: radial-gradient( circle at 90% 0%, rgba(0, 188, 212, 0.12), transparent 38%), rgba(242, 246, 247, 0.035);
    transition: transform 0.3s ease, border-color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
}

.svc-growth__card:hover {
    transform: translateY(-7px);
    border-color: rgba(0, 188, 212, 0.65);
    background: radial-gradient( circle at 90% 0%, rgba(0, 188, 212, 0.2), transparent 42%), rgba(0, 188, 212, 0.06);
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.25);
}

.svc-growth__number {
    color: var(--svc-cyan);
    font-size: 11px;
    letter-spacing: 0.14em;
}

.svc-growth__icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    margin-top: 42px;
    border: 1px solid rgba(0, 188, 212, 0.5);
    border-radius: 50%;
    color: var(--svc-cyan);
    background: rgba(0, 188, 212, 0.08);
    font-size: 22px;
    transition: transform 0.3s ease, background 0.3s ease;
}

.svc-growth__card:hover .svc-growth__icon {
    transform: rotate(8deg) scale(1.08);
    background: rgba(0, 188, 212, 0.18);
}

.svc-growth__card h3 {
    margin-top: 28px;
    font-size: 23px;
    font-weight: 500;
    line-height: 1.1;
}

.svc-growth__card p {
    max-width: 340px;
    margin-top: 13px;
    color: var(--svc-dim);
    font-size: 14px;
    line-height: 1.6;
}

.svc-growth__card .svc-mini-tags {
    margin-top: 22px;
}

.svc-growth>.svc-arrow-link {
    margin-top: 30px;
}

@media (max-width: 900px) {
    .svc-growth__grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .svc-growth__card:last-child {
        grid-column: span 2;
    }
}

@media (max-width: 650px) {
    .svc-growth__grid {
        grid-template-columns: 1fr;
    }
    .svc-growth__card:last-child {
        grid-column: auto;
    }
    .svc-growth__card {
        min-height: auto;
    }
}