@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
    --bg: #06162a;
    --bg2: #0b1c32;
    --card: #10243b;
    --mint: #0e9748;
    --blue: #0066b3;
    --white: #f5f7fa;
    --muted: #a7b4c6;
    --line: #ffffff1c;
    --paper: #f6f8fa;
    --dark: #0a1628;
    --max: 1180px;
    --font-family: 'Inter', Arial, sans-serif
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 90px
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--white);
    font: 16px/1.65 var(--font-family);
    -webkit-font-smoothing: antialiased
}

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

button,
input,
textarea,
select {
    font: inherit
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
    outline: 3px solid var(--mint);
    outline-offset: 4px
}

.skip {
    position: absolute;
    top: -60px;
    left: 15px;
    background: var(--mint);
    color: #06162a;
    padding: 10px;
    z-index: 99
}

.skip:focus {
    top: 10px
}

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

.eyebrow {
    font: 11px var(--font-family);
    letter-spacing: .17em;
    text-transform: uppercase;
    color: var(--mint)
}

h1,
h2,
h3 {
    font-family: var(--font-family);
    letter-spacing: -.04em;
    line-height: 1.08;
    margin: 0
}

h1 {
    font-size: clamp(48px, 7vw, 86px);
    font-weight: 500
}

h2 {
    font-size: clamp(34px, 4vw, 54px);
    font-weight: 500
}

h3 {
    font-size: 21px;
    font-weight: 500
}

p {
    margin: 0;
    color: var(--muted)
}

.section {
    padding: 100px 0
}

.light {
    background: var(--paper);
    color: var(--dark)
}

.light p {
    color: #536173
}

.head {
    max-width: 700px;
    margin-bottom: 45px
}

.head h2 {
    margin: 14px 0 18px
}

.head p {
    font-size: 17px;
    max-width: 600px
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 50px;
    padding: 0 21px;
    border: 1px solid transparent;
    border-radius: 3px;
    font-size: 14px;
    font-weight: 600;
    transition: .2s
}

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

.primary {
    background: var(--blue);
    color: #fff
}

.primary:hover {
    background: var(--mint);
    color: #fff
}

.outline {
    border-color: #ffffff42;
    color: white
}

.outline:hover {
    border-color: var(--mint);
    color: var(--mint)
}

.arrow {
    font-size: 18px
}

.header {
    position: fixed;
    z-index: 50;
    inset: 0 0 auto;
    border-bottom: 1px solid transparent;
    transition: .2s
}

.header.scrolled {
    background: #06162af2;
    backdrop-filter: blur(16px);
    border-color: var(--line)
}

.nav {
    height: 78px;
    display: flex;
    align-items: center;
    justify-content: space-between
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font: 600 17px var(--font-family)
}

.brand img {
    width: 180px;
    height: auto;
    object-fit: contain
}

.brand em {
    font-style: normal;
    color: #9cabbc;
    font-weight: 400
}

.links {
    display: flex;
    align-items: center;
    gap: 30px
}

.links>a:not(.navcta),
.svcbtn {
    font-size: 13px;
    color: #d2dbe4
}

.links>a:not(.navcta):hover,
.svcbtn:hover {
    color: var(--mint)
}

.svcbtn {
    padding: 10px 0;
    border: 0;
    background: none;
    cursor: pointer
}

.links .navcta {
    min-height: 40px;
    padding: 0 15px;
    font-size: 12px
}

.menubtn {
    display: none;
    width: 42px;
    height: 42px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 4px;
    background: none;
    border: 1px solid var(--line);
    color: white;
    border-radius: 5px;
    padding: 0;
    cursor: pointer
}

.menubtn span {
    width: 19px;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
    transition: transform .2s ease, opacity .2s ease
}

.menubtn[aria-expanded="true"] span:first-child {
    transform: translateY(6px) rotate(45deg)
}

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

.menubtn[aria-expanded="true"] span:last-child {
    transform: translateY(-6px) rotate(-45deg)
}

.mega {
    display: none;
    position: absolute;
    top: 67px;
    left: 50%;
    transform: translateX(-50%);
    width: min(850px, calc(100vw - 48px));
    padding: 24px;
    background: var(--bg2);
    border: 1px solid var(--line);
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    box-shadow: 0 20px 60px #0005
}

.mega.open {
    display: grid
}

@media (hover: hover) and (min-width: 1001px) {
    .serviceswrap:hover .mega {
        display: grid
    }

    .serviceswrap:focus-within .mega {
        display: grid
    }
}

.mega label {
    grid-column: 1/-1;
    color: var(--mint);
    font: 11px var(--font-family);
    text-transform: uppercase;
    letter-spacing: .15em
}

.mega a {
    padding: 11px;
    border: 1px solid transparent
}

.mega a:hover {
    border-color: var(--line);
    background: #ffffff08
}

.mega strong {
    display: block;
    font: 500 14px var(--font-family)
}

.mega small {
    display: block;
    color: var(--muted);
    font-size: 12px
}

.hero {
    position: relative;
    overflow: hidden;
    min-height: 725px;
    padding: 155px 0 90px;
    background: radial-gradient(ellipse at 75% 42%, #0c3156, #06162a 65%)
}

.hero:before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: .2;
    background-image: linear-gradient(#ffffff09 1px, transparent 1px), linear-gradient(90deg, #ffffff09 1px, transparent 1px);
    background-size: 72px 72px;
    mask-image: linear-gradient(black, transparent)
}

.hero-grid {
    position: relative;
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    align-items: center;
    gap: 30px
}

.hero h1 {
    margin: 20px 0
}

.hero h1 span {
    color: var(--mint)
}

.hero-copy>p {
    font-size: 17px;
    max-width: 540px
}

.actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 28px
}

.note {
    margin-top: 30px;
    font: 11px var(--font-family);
    color: #8999aa
}

.visual {
    position: relative;
    min-height: 430px;
    display: grid;
    place-items: center
}

.orbit {
    position: absolute;
    width: min(390px, 94%);
    aspect-ratio: 1;
    border: 1px solid #b1d4e21f;
    border-radius: 50%;
    animation: spin 50s linear infinite
}

.orbit:before,
.orbit:after {
    content: '';
    position: absolute;
    inset: 11%;
    border: 1px solid #b1d4e218;
    border-radius: 50%
}

.orbit:after {
    inset: 24%
}

.dot {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--mint);
    box-shadow: 0 0 20px var(--mint);
    top: 12%;
    left: 21%
}

.core {
    position: relative;
    width: 180px;
    height: 180px;
    border: 1px solid #0e974853;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: radial-gradient(circle, #0e974826, #0b1c32 70%);
    box-shadow: 0 0 90px #0e974818;
    animation: float 6s ease-in-out infinite
}

.core svg {
    width: 105px
}

.tag {
    position: absolute;
    padding: 9px 12px;
    border: 1px solid var(--line);
    background: #0b1c32dd;
    color: #c5d0dc;
    font: 10px var(--font-family);
    backdrop-filter: blur(8px)
}

.t1 {
    top: 18%;
    left: 0
}

.t2 {
    top: 32%;
    right: 0
}

.t3 {
    bottom: 19%;
    left: 5%
}

.t4 {
    bottom: 12%;
    right: 8%
}

.hero-foot {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    border-top: 1px solid var(--line);
    padding: 15px 0;
    font: 10px var(--font-family);
    color: #91a0b1;
    text-transform: uppercase;
    letter-spacing: .1em
}

.hero-foot .container {
    display: flex;
    justify-content: space-between
}

.hero-foot b {
    color: #dce5ee;
    font-weight: 400
}

.grid4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: #d9e1e9;
    border: 1px solid #d9e1e9
}

.value {
    padding: 26px 22px;
    background: white;
    min-height: 180px
}

.vnum {
    font: 11px var(--font-family);
    color: #007f71;
    margin-bottom: 23px
}

.value h3 {
    font-size: 17px;
    margin-bottom: 8px
}

.value p {
    font-size: 13px
}

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

.card {
    display: flex;
    flex-direction: column;
    min-height: 280px;
    padding: 26px;
    background: var(--bg2);
    border: 1px solid var(--line);
    transition: .25s
}

.card:hover {
    border-color: #0e97487a;
    transform: translateY(-4px)
}

.icon {
    width: 42px;
    height: 42px;
    border: 1px solid #0e97484d;
    color: var(--mint);
    display: grid;
    place-items: center;
    font: 14px var(--font-family);
    margin-bottom: 28px
}

.card h3 {
    font-size: 19px;
    margin-bottom: 10px
}

.card p {
    font-size: 13px
}

.textlink {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--mint);
    font-size: 13px;
    font-weight: 600;
    margin-top: auto;
    padding-top: 22px
}

.light .textlink {
    color: #007f71
}

.split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 70px;
    align-items: center
}

.split h2 {
    margin: 15px 0 18px
}

.split p {
    max-width: 540px;
    margin-bottom: 20px;
}

.principles,
.steps {
    margin-top: 28px;
    border-top: 1px solid var(--line)
}

.principle {
    display: flex;
    gap: 16px;
    padding: 16px 0;
    border-bottom: 1px solid var(--line)
}

.principle span,
.stepnum {
    font: 11px var(--font-family);
    color: var(--mint)
}

.principle strong {
    display: block;
    font: 500 15px var(--font-family)
}

.principle small {
    color: var(--muted);
    font-size: 12px
}

.step {
    display: grid;
    grid-template-columns: 55px 1fr 1fr;
    gap: 14px;
    padding: 21px 0;
    border-bottom: 1px solid var(--line)
}

.step h3 {
    font-size: 18px
}

.step p {
    font-size: 13px
}

.industries {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 11px
}

.industry {
    padding: 20px;
    border: 1px solid #d8e0e8;
    min-height: 115px
}

.industry span {
    display: block;
    font: 10px var(--font-family);
    color: #007f71;
    margin-bottom: 14px
}

.industry h3 {
    font-size: 16px
}

.cta {
    background: var(--mint);
    color: #06162a;
    padding: 68px 0
}

.cta .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px
}

.cta h2 {
    font-size: clamp(32px, 4vw, 48px);
    max-width: 680px
}

.cta p {
    color: #164a46;
    margin-top: 10px
}

.cta .btn {
    background: var(--bg);
    color: white;
    white-space: nowrap
}

.pagehero {
    padding: 155px 0 66px;
    background: radial-gradient(ellipse at 80% 30%, #10324a, #06162a 58%);
    border-bottom: 1px solid var(--line)
}

.crumb {
    font: 11px var(--font-family);
    color: #8293a6;
    margin-bottom: 24px
}

.crumb a:hover {
    color: var(--mint)
}

.pagehero h1 {
    font-size: clamp(44px, 6vw, 70px);
    margin: 15px 0;
    max-width: 900px
}

.pagehero p {
    font-size: 17px;
    max-width: 680px
}

.content {
    max-width: 800px
}

.content article {
    margin-bottom: 35px
}

.content h2 {
    font-size: 30px;
    margin-bottom: 12px
}

.content p {
    margin-bottom: 15px
}

.outcomes {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 30px
}

.outcome {
    padding: 22px;
    border: 1px solid var(--line)
}

.outcome span {
    font: 10px var(--font-family);
    color: var(--mint)
}

.outcome h3 {
    font-size: 17px;
    margin: 15px 0 8px
}

.outcome p {
    font-size: 13px
}

/* AI Consulting outcome cards */
html:is([data-page="ai-consulting"], [data-page="ai-automation"]) .outcomes {
    gap: 18px;
}

html:is([data-page="ai-consulting"], [data-page="ai-automation"]) .outcome {
    --outcome-accent: #0a9c74;
    --outcome-tint: #e8f8f2;
    position: relative;
    isolation: isolate;
    min-height: 220px;
    padding: 28px 25px 25px;
    overflow: hidden;
    border: 0;
    border-radius: 18px;
    background: linear-gradient(145deg, #fff 0%, #fbfefd 58%, var(--outcome-tint) 160%);
    box-shadow: 0 14px 32px rgba(20, 63, 89, .09);
    transition: transform .32s ease, box-shadow .32s ease;
}

html:is([data-page="ai-consulting"], [data-page="ai-automation"]) .outcome:nth-child(2) {
    --outcome-accent: #1389c4;
    --outcome-tint: #e7f5fc;
}

html:is([data-page="ai-consulting"], [data-page="ai-automation"]) .outcome:nth-child(3) {
    --outcome-accent: #7962cc;
    --outcome-tint: #f0edff;
}

html:is([data-page="ai-consulting"], [data-page="ai-automation"]) .outcome-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

html:is([data-page="ai-consulting"], [data-page="ai-automation"]) .outcome-icon {
    display: grid;
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    place-items: center;
    padding: 0;
    border: 1px solid color-mix(in srgb, var(--outcome-accent) 18%, transparent);
    border-radius: 14px;
    background: var(--outcome-tint);
    color: var(--outcome-accent);
}

html:is([data-page="ai-consulting"], [data-page="ai-automation"]) .outcome-icon svg {
    width: 23px;
    height: 23px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

html:is([data-page="ai-consulting"], [data-page="ai-automation"]) .outcome::before {
    position: absolute;
    z-index: -1;
    top: -52px;
    right: -42px;
    width: 142px;
    height: 142px;
    content: "";
    border: 1px solid color-mix(in srgb, var(--outcome-accent) 28%, transparent);
    border-radius: 50%;
    box-shadow: 0 0 0 18px color-mix(in srgb, var(--outcome-accent) 8%, transparent), 0 0 0 37px color-mix(in srgb, var(--outcome-accent) 5%, transparent);
}

html:is([data-page="ai-consulting"], [data-page="ai-automation"]) .outcome::after {
    position: absolute;
    top: 0;
    left: 25px;
    width: 48px;
    height: 4px;
    content: "";
    border-radius: 0 0 4px 4px;
    background: var(--outcome-accent);
}

html:is([data-page="ai-consulting"], [data-page="ai-automation"]) .outcome span {
    display: inline-flex;
    padding: 6px 9px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--outcome-accent) 11%, white);
    color: var(--outcome-accent);
    font-weight: 700;
    letter-spacing: .08em;
}

html:is([data-page="ai-consulting"], [data-page="ai-automation"]) .outcome h3 {
    max-width: 220px;
    margin: 24px 0 10px;
    color: #153858;
    font-size: 22px;
    line-height: 1.2;
}

html:is([data-page="ai-consulting"], [data-page="ai-automation"]) .outcome p {
    max-width: 235px;
    color: #587087;
    line-height: 1.65;
}

@media (hover: hover) {
    html:is([data-page="ai-consulting"], [data-page="ai-automation"]) .outcome:hover {
        transform: translateY(-7px);
        box-shadow: 0 21px 40px rgba(20, 63, 89, .15);
    }
}

html[data-theme="dark"]:is([data-page="ai-consulting"], [data-page="ai-automation"]) .outcome {
    background: linear-gradient(145deg, #12314a 0%, #102940 62%, #183e49 160%);
    box-shadow: 0 14px 32px rgba(0, 0, 0, .25);
}

html[data-theme="dark"]:is([data-page="ai-consulting"], [data-page="ai-automation"]) .outcome h3 {
    color: #fff;
}

html[data-theme="dark"]:is([data-page="ai-consulting"], [data-page="ai-automation"]) .outcome p {
    color: #c3d1dd;
}

html[data-theme="dark"]:is([data-page="ai-consulting"], [data-page="ai-automation"]) .outcome span {
    background: color-mix(in srgb, var(--outcome-accent) 24%, #102940);
}

html[data-theme="dark"]:is([data-page="ai-consulting"], [data-page="ai-automation"]) .outcome-icon {
    border-color: color-mix(in srgb, var(--outcome-accent) 32%, transparent);
    background: color-mix(in srgb, var(--outcome-accent) 22%, #102940);
}

.formgrid {
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: 65px
}

.formbox {
    background: var(--bg2);
    padding: 28px;
    border: 1px solid var(--line)
}

.fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px
}

.field.full {
    grid-column: 1/-1
}

.field label {
    display: block;
    font-size: 12px;
    margin-bottom: 7px;
    color: #d9e2ec
}

.field input,
.field textarea,
.field select {
    width: 100%;
    background: var(--bg);
    border: 1px solid var(--line);
    color: white;
    padding: 12px;
    border-radius: 2px
}

.field textarea {
    min-height: 130px
}

.status {
    font-size: 12px;
    color: var(--mint);
    margin-top: 12px
}

.footer {
    background: #060e19;
    border-top: 1px solid var(--line);
    padding: 55px 0 22px
}

.footgrid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 38px;
    padding-bottom: 42px
}

.footgrid p {
    font-size: 13px;
    max-width: 300px;
    margin-top: 14px
}

.footer h4 {
    font: 11px var(--font-family);
    text-transform: uppercase;
    letter-spacing: .12em;
    margin: 5px 0 15px
}

.footlinks {
    display: grid;
    gap: 9px
}

.footlinks a {
    font-size: 12px;
    color: #99a8b8
}

.footlinks a:hover {
    color: var(--mint)
}

.footbottom {
    border-top: 1px solid var(--line);
    padding-top: 16px;
    display: flex;
    justify-content: space-between;
    color: #7f8fa0;
    font-size: 11px
}

.footbottom div {
    display: flex;
    gap: 18px
}

.reveal {
    opacity: 0;
    transform: translateY(15px);
    transition: .55s
}

.reveal.visible {
    opacity: 1;
    transform: none
}

html[data-page="ai-consulting"] .outcome.reveal:nth-child(2) {
    transition-delay: .12s;
}

html[data-page="ai-consulting"] .outcome.reveal:nth-child(3) {
    transition-delay: .24s;
}

.hero+.section.light .value.reveal,
#services .card.reveal,
.industries .industry.reveal {
    transition: opacity .55s ease, transform .55s ease-in-out, box-shadow .35s ease-in-out, border-color .35s ease-in-out;
}

.notfound {
    text-align: center;
    padding: 100px 0
}

.notfound small {
    color: var(--mint);
    font: 11px var(--font-family);
}

@keyframes spin {
    to {
        transform: rotate(360deg)
    }
}

@keyframes float {
    50% {
        transform: translateY(-9px)
    }
}

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

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

    .reveal {
        opacity: 1;
        transform: none
    }
}

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

    .visual {
        min-height: 350px
    }

    .core {
        width: 145px;
        height: 145px
    }

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

    .split {
        gap: 35px
    }

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

    .footgrid {
        grid-template-columns: 1.2fr 1fr 1fr
    }

    .footgrid>div:last-child {
        grid-column: 2
    }
}

@media(max-width:640px) {
    .container {
        width: calc(100% - 36px)
    }

    .section {
        padding: 72px 0
    }

    .nav {
        height: 70px
    }

    .links.mobile {
        top: 70px
    }

    .brand {
        font-size: 15px
    }

    .brand img {
        width: 154px;
        height: auto
    }

    .hero {
        min-height: 0;
        padding: 125px 0 65px
    }

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

    .hero h1 {
        font-size: clamp(46px, 13vw, 66px)
    }

    .hero-copy>p {
        font-size: 15px
    }

    .visual {
        min-height: 300px
    }

    .orbit {
        width: 270px
    }

    .core {
        width: 128px;
        height: 128px
    }

    .tag {
        font-size: 9px
    }

    .t1 {
        left: 3%
    }

    .t2 {
        right: 3%
    }

    .hero-foot {
        display: none
    }

    .note {
        font-size: 9px
    }

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

    .value {
        padding: 18px 14px;
        min-height: 160px
    }

    .value h3 {
        font-size: 14px
    }

    .value p {
        font-size: 12px
    }

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

    .card {
        min-height: 245px
    }

    .split,
    .formgrid {
        grid-template-columns: 1fr;
        gap: 34px
    }

    .step {
        grid-template-columns: 38px 1fr;
        gap: 12px
    }

    .step p {
        grid-column: 2
    }

    .cta {
        padding: 48px 0
    }

    .cta .container {
        align-items: flex-start;
        flex-direction: column
    }

    .pagehero {
        padding: 125px 0 48px
    }

    .pagehero h1 {
        font-size: clamp(42px, 12vw, 60px)
    }

    .pagehero p {
        font-size: 15px
    }

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

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

    .field.full {
        grid-column: auto
    }

    .footgrid {
        grid-template-columns: 1fr 1fr;
        gap: 26px 18px
    }

    .footgrid>div:first-child {
        grid-column: 1/-1
    }

    .footgrid>div:last-child {
        grid-column: auto
    }

    .footbottom {
        flex-direction: column;
        gap: 10px
    }

    .head {
        margin-bottom: 30px
    }
}

@media(max-width:1000px) {
    .menubtn {
        display: inline-flex;
        color: #123858;
        border-color: rgba(0, 62, 112, .2)
    }

    .links {
        display: none
    }

    .links.mobile {
        position: absolute;
        top: 78px;
        left: 0;
        right: 0;
        display: flex;
        align-items: stretch;
        flex-direction: column;
        gap: 4px;
        max-height: calc(100vh - 78px);
        max-height: calc(100dvh - 78px);
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: 16px 24px 22px;
        background: #fff;
        border-bottom: 1px solid rgba(0, 62, 112, .15);
        box-shadow: 0 16px 30px rgba(13, 53, 91, .12)
    }

    .links.mobile>a:not(.navcta) {
        display: block;
        padding: 10px 8px;
        color: #173e63
    }

    .links.mobile>a:not(.navcta):hover,
    .links.mobile .svcbtn:hover {
        color: #08733f
    }

    .links.mobile .serviceswrap {
        display: block
    }

    .links.mobile .svcbtn {
        width: 100%;
        padding: 10px 8px;
        text-align: left;
        color: #173e63
    }

    .links.mobile .mega {
        position: static;
        width: 100%;
        margin-top: 4px;
        padding: 10px;
        transform: none;
        grid-template-columns: 1fr 1fr;
        box-shadow: none
    }

    .links.mobile .mega label {
        grid-column: 1/-1
    }

    .links.mobile .navcta {
        display: flex;
        width: 100%;
        margin-top: 8px;
        justify-content: center
    }
}

@media(max-width:640px) {
    .links.mobile {
        top: 70px;
        max-height: calc(100vh - 70px);
        max-height: calc(100dvh - 70px)
    }
}

/* Aikyne blue and green light brand theme */
:root {
    --bg: #f7fafd;
    --bg2: #fff;
    --card: #fff;
    --mint: #0e9748;
    --blue: #0066b3;
    --white: #112d4c;
    --muted: #50657b;
    --line: rgba(0, 62, 112, .14);
    --paper: #edf4fa;
    --dark: #102c4c
}

body {
    background: var(--bg);
    color: var(--white)
}

.section:not(.light) {
    background: #fff;
    color: var(--white)
}

.section.light {
    background: var(--paper);
    color: var(--dark)
}

.light p {
    color: #50657b
}

.header {
    background: rgba(255, 255, 255, .93);
    border-bottom-color: rgba(0, 62, 112, .1);
    backdrop-filter: blur(16px)
}

.header.scrolled {
    background: rgba(255, 255, 255, .97);
    border-color: rgba(0, 62, 112, .14)
}

.brand img {
    width: 204px;
    height: auto;
    object-fit: contain
}

.links>a:not(.navcta),
.svcbtn {
    color: #173e63
}

.links>a:not(.navcta):hover,
.svcbtn:hover {
    color: #08733f
}

.links.mobile {
    background: #fff;
    border-color: rgba(0, 62, 112, .15)
}

.menubtn {
    color: #123858;
    border-color: rgba(0, 62, 112, .2)
}

.mega {
    background: #fff;
    border-color: rgba(0, 62, 112, .15);
    box-shadow: 0 20px 70px rgba(13, 53, 91, .14)
}

.mega a:hover {
    background: #edf4fa;
    border-color: rgba(0, 62, 112, .12)
}

.mega strong {
    color: #123858
}

.mega small {
    color: #596d82
}

.hero {
    background: radial-gradient(ellipse at 75% 42%, #dfedf8 0%, #f5f9fc 43%, #fff 78%)
}

.hero:before {
    opacity: .5;
    background-image: linear-gradient(rgba(0, 102, 179, .055) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 102, 179, .055) 1px, transparent 1px)
}

.hero h1 {
    color: #0066b3;
}

.hero-copy>p {
    color: #465d75
}

.hero .eyebrow,
.pagehero .eyebrow {
    color: #087640
}

.note,
.hero-foot {
    color: #566a80
}

.hero-foot {
    border-color: rgba(0, 62, 112, .15)
}

.hero-foot b {
    color: #153b63
}

.orbit {
    border-color: rgba(0, 102, 179, .18)
}

.orbit:before,
.orbit:after {
    border-color: rgba(0, 102, 179, .16)
}

.core {
    border-color: rgba(14, 151, 72, .42);
    background: radial-gradient(circle, #0e974817, #fff 70%);
    box-shadow: 0 0 80px rgba(0, 102, 179, .1)
}

.tag {
    background: rgba(255, 255, 255, .94);
    border-color: rgba(0, 62, 112, .14);
    color: #244968;
    box-shadow: 0 8px 24px rgba(13, 53, 91, .08)
}

.value {
    background: #fff
}

.hero+.section.light {
    background: linear-gradient(135deg, #eaf4f0 0%, #f2f7fa 100%);
}

.why-section,
.insights-section {
    background: linear-gradient(135deg, #eaf4f0 0%, #f2f7fa 100%) !important;
    color: #102c4c;
}

.why-section h2,
.insights-section h2,
.insights-section h3 {
    color: #153858;
}

.why-section p,
.insights-section p {
    color: #50657b;
}

.why-section .eyebrow,
.insights-section .eyebrow {
    color: #087640;
}

.insight-callout {
    padding: 30px;
    background: rgba(255, 255, 255, .78);
    border: 1px solid rgba(0, 62, 112, .12);
    border-radius: 8px;
    box-shadow: 0 10px 28px rgba(14, 53, 87, .05);
}

.insight-callout h3 {
    margin: 18px 0;
    font-size: clamp(24px, 2.5vw, 28px);
}

.why-section .principles,
.why-section .steps {
    border-color: rgba(0, 62, 112, .16);
}

.why-section .principle,
.why-section .step {
    border-color: rgba(0, 62, 112, .13);
}

.why-section .principle strong,
.why-section .step h3 {
    color: #153858;
}

.why-section .principle small,
.why-section .step p {
    color: #52677c;
}

.why-section .principle span,
.why-section .stepnum {
    color: #087640;
}

.why-section .textlink,
.insights-section .textlink {
    color: #087640;
}

.hero+.section.light .grid4 {
    gap: 18px;
    background: transparent;
    border: 0;
}

.hero+.section.light .value {
    min-height: 176px;
    padding: 26px 24px;
    background: #fff;
    border: 1px solid rgba(14, 91, 69, .12);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(14, 53, 87, .045);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.hero+.section.light .value:hover {
    transform: translateY(-3px);
    border-color: rgba(14, 151, 72, .35);
    box-shadow: 0 14px 30px rgba(14, 53, 87, .09);
}

.hero+.section.light .vnum {
    display: inline-flex;
    margin-bottom: 20px;
    padding: 3px 8px;
    background: #edf7f1;
    border-radius: 4px;
}

.hero+.section.light .value h3 {
    color: #153858;
}

.hero+.section.light .value p {
    color: #52677c;
}

.vnum,
.eyebrow {
    color: #087640
}

.card {
    background: #fff;
    border-color: rgba(0, 62, 112, .13);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(14, 53, 87, .035)
}

.card:hover {
    background: #fff;
    border-color: rgba(14, 151, 72, .48);
    box-shadow: 0 14px 34px rgba(14, 53, 87, .08)
}

.card h3 {
    color: #123858
}

.card p {
    color: #52677c
}

.icon {
    background: #edf7f1;
    border-color: rgba(14, 151, 72, .28);
    color: #087640
}

.textlink {
    color: #087640
}

.light .textlink {
    color: #087640
}

.principle strong,
.step h3 {
    color: #153858
}

.principle small {
    color: #596d82
}

.principles,
.steps {
    border-color: rgba(0, 62, 112, .15)
}

.principle,
.step {
    border-color: rgba(0, 62, 112, .13)
}

.stepnum,
.principle span {
    color: #087640
}

.industry {
    background: #fff;
    border-radius: 8px;
    border-color: rgba(0, 62, 112, .14)
}

.industry:hover {
    border-color: rgba(14, 151, 72, .35);
    box-shadow: 0 14px 30px rgba(14, 53, 87, .09);
}

.industry span {
    color: #087640
}

.industry h3 {
    color: #153858
}

@media(max-width:640px) {
    .hero+.section.light .grid4 {
        gap: 12px;
    }

    .hero+.section.light .value {
        min-height: 160px;
        padding: 18px 14px;
    }

    .hero+.section.light .value h3 {
        font-size: 14px;
    }

    .hero+.section.light .value p {
        font-size: 12px;
    }
}

.pagehero {
    background: radial-gradient(ellipse at 80% 30%, #e2eff8, #f7fafd 64%);
    border-color: rgba(0, 62, 112, .12)
}

.pagehero h1 {
    color: #123c68
}

.pagehero p {
    color: #50657b
}

.crumb {
    color: #60768c
}

.crumb a {
    color: #244f77
}

.outcome {
    background: #fff;
    border-color: rgba(0, 62, 112, .14)
}

.outcome span {
    color: #087640
}

.outcome h3 {
    color: #153858
}

.outcome p {
    color: #596d82
}

.cta {
    background: linear-gradient(110deg, #105BAD 0%, #087FA4 52%, #03A67C 100%);
    color: #f5f9fc
}

.cta h2 {
    color: #fff
}

.cta p {
    color: #dce9f6
}

.cta .btn {
    background: #fff;
    border-color: #fff;
    color: #105BAD;
    box-shadow: 0 6px 18px rgba(5, 39, 78, .18)
}

.cta .btn:hover {
    background: #eaf2f8;
    border-color: #eaf2f8;
    color: #0B4588;
    box-shadow: 0 8px 22px rgba(5, 39, 78, .26)
}

.formbox {
    background: #fff;
    border-color: rgba(0, 62, 112, .15);
    box-shadow: 0 12px 32px rgba(13, 53, 91, .06)
}

.field label {
    color: #24445f
}

.field input,
.field textarea,
.field select {
    background: #f9fbfd;
    border-color: rgba(0, 62, 112, .2);
    color: #173b5d
}

.field input::placeholder,
.field textarea::placeholder {
    color: #71859a
}

.status {
    color: #087640
}

.footer {
    background: #eaf2f8;
    border-color: rgba(0, 62, 112, .14)
}

.footer h4 {
    color: #173e63
}

.footgrid p {
    color: #52677c
}

.footlinks a {
    color: #425d76
}

.footlinks a:hover {
    color: #087640
}

.footbottom {
    color: #5b7187;
    border-color: rgba(0, 62, 112, .14)
}

.footbottom a {
    color: #405c76
}

.btn.outline {
    color: #173e63;
    border-color: rgba(0, 62, 112, .3)
}

.btn.outline:hover {
    color: #087640;
    border-color: #0e9748
}

.notfound {
    color: #14395b
}

.notfound p {
    color: #52677c
}

@media(max-width:640px) {
    .brand img {
        width: 168px;
        height: auto
    }
}

.footer {
    background: #fff
}

.footer-social {
    margin-top: 22px
}

.footer-social h4 {
    margin-bottom: 10px
}

.social-links {
    display: flex;
    align-items: center;
    gap: 10px
}

.social-link {
    display: inline-grid;
    width: 22px;
    height: 22px;
    align-items: center;
    justify-items: center;
    background: transparent;
    color: #1877f2;
    transition: opacity .2s ease, transform .2s ease
}

.social-link:nth-child(1) {
    border-radius: 50%;
    background: #1877f2;
    color: #fff;
}

.social-link:nth-child(2) {
    color: #000;
}

.social-link:nth-child(3) {
    color: #e4405f;
}

.social-link:nth-child(4) {
    color: #0a66c2;
}

.social-link:hover {
    /* opacity: .75; */
    transform: translateY(-2px)
}

.social-link svg {
    width: 18px;
    height: 18px;
    fill: currentColor
}

.social-link:focus-visible {
    outline-color: #105bad
}

.notfound small {
    color: #087640
}

.svcbtn {
    display: inline-flex;
    gap: 5px;
}

.svcbtn span {
    line-height: 1;
}

.links .navcta {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: #0066b3;
    border-color: #0066b3;
    color: #fff;
    transition: transform .2s ease, box-shadow .3s ease, border-color .3s ease;
    border-radius: 999px;
}

.links .navcta::before {
    position: absolute;
    z-index: -1;
    inset: 0;
    background: linear-gradient(110deg, #0066b3 0%, #087fa4 52%, #0e9748 100%);
    content: "";
    opacity: 0;
    transition: opacity .4s ease;
}

.links .navcta:hover {
    background: #0066b3;
    border-color: transparent;
    color: #fff;
}

.links .navcta:hover::before {
    opacity: 1;
}

.hero .actions .btn {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    transition: transform .2s ease, box-shadow .3s ease, border-color .3s ease, color .3s ease;
}

.hero .actions .btn::before {
    position: absolute;
    z-index: -1;
    inset: 0;
    background: linear-gradient(110deg, #0066b3 0%, #087fa4 52%, #0e9748 100%);
    content: "";
    opacity: 0;
    transition: opacity .4s ease;
}

.hero .actions .btn:hover,
.hero .actions .btn:focus-visible {
    border-color: transparent;
    color: #fff;
}

.hero .actions .btn:hover::before,
.hero .actions .btn:focus-visible::before {
    opacity: 1;
}

html[data-theme="dark"] .hero .actions .btn.outline:hover,
html[data-theme="dark"] .hero .actions .btn.outline:focus-visible {
    border-color: transparent;
    color: #fff;
}

@media (prefers-reduced-motion: reduce) {
    .hero .actions .btn,
    .hero .actions .btn::before {
        transition: none;
    }
}

html[data-theme="dark"] {
    color-scheme: dark;
    --bg: #06162a;
    --bg2: #0b1c32;
    --card: #10243b;
    --white: #f5f7fa;
    --muted: #a7b4c6;
    --line: #ffffff1c;
    --paper: #0b1c32;
    --dark: #f5f7fa;
}

html[data-theme="light"] {
    color-scheme: light;
}

html[data-theme="dark"] body {
    background: var(--bg);
    color: var(--white);
}

html[data-theme="dark"] .section:not(.light) {
    background: var(--bg);
    color: var(--white);
}

html[data-theme="dark"] .section.light {
    background: var(--paper);
    color: var(--dark);
}

html[data-theme="dark"] .light p,
html[data-theme="dark"] .section.light p {
    color: var(--muted);
}

html[data-theme="dark"] .header {
    background: rgba(6, 22, 42, .93);
    border-bottom-color: var(--line);
}

html[data-theme="dark"] .header.scrolled {
    background: rgba(6, 22, 42, .97);
    border-color: var(--line);
}

html[data-theme="dark"] .links>a:not(.navcta),
html[data-theme="dark"] .svcbtn {
    color: #d2dbe4;
}

html[data-theme="dark"] .links>a:not(.navcta):hover,
html[data-theme="dark"] .svcbtn:hover {
    color: #56d68b;
}

html[data-theme="dark"] .links.mobile {
    background: var(--bg2);
    border-color: var(--line);
}

html[data-theme="dark"] .links.mobile>a:not(.navcta),
html[data-theme="dark"] .links.mobile .svcbtn {
    color: var(--white);
}

html[data-theme="dark"] .links.mobile>a:not(.navcta):hover,
html[data-theme="dark"] .links.mobile .svcbtn:hover {
    color: #56d68b;
}

html[data-theme="dark"] .menubtn {
    color: var(--white);
    border-color: var(--line);
}

html[data-theme="dark"] .mega {
    background: var(--bg2);
    border-color: var(--line);
    box-shadow: 0 20px 70px #0006;
}

html[data-theme="dark"] .mega a:hover {
    background: #ffffff08;
    border-color: var(--line);
}

html[data-theme="dark"] .mega strong {
    color: var(--white);
}

html[data-theme="dark"] .mega small {
    color: var(--muted);
}

html[data-theme="dark"] .hero {
    background: radial-gradient(ellipse at 75% 42%, #0c3156, #06162a 65%);
}

html[data-theme="dark"] .hero:before {
    opacity: .2;
    background-image: linear-gradient(#ffffff09 1px, transparent 1px), linear-gradient(90deg, #ffffff09 1px, transparent 1px);
}

html[data-theme="dark"] .hero h1 {
    color: var(--white);
}

html[data-theme="dark"] .hero-copy>p,
html[data-theme="dark"] .note,
html[data-theme="dark"] .hero-foot {
    color: var(--muted);
}

html[data-theme="dark"] .hero .eyebrow,
html[data-theme="dark"] .pagehero .eyebrow,
html[data-theme="dark"] .vnum,
html[data-theme="dark"] .eyebrow {
    color: #56d68b;
}

html[data-theme="dark"] .hero-foot {
    border-color: var(--line);
}

html[data-theme="dark"] .hero-foot b {
    color: var(--white);
}

html[data-theme="dark"] .orbit,
html[data-theme="dark"] .orbit::before,
html[data-theme="dark"] .orbit::after {
    border-color: #b1d4e226;
}

html[data-theme="dark"] .core {
    background: radial-gradient(circle, #0e974826, #0b1c32 70%);
}

html[data-theme="dark"] .tag {
    background: rgba(16, 36, 59, .94);
    border-color: var(--line);
    color: var(--white);
    box-shadow: 0 8px 24px #0003;
}

html[data-theme="dark"] .hero+.section.light {
    background: var(--paper);
}

html[data-theme="dark"] .why-section,
html[data-theme="dark"] .insights-section {
    background: var(--bg2) !important;
    color: var(--white);
}

html[data-theme="dark"] .why-section h2,
html[data-theme="dark"] .insights-section h2,
html[data-theme="dark"] .insights-section h3,
html[data-theme="dark"] .why-section .principle strong,
html[data-theme="dark"] .why-section .step h3 {
    color: var(--white);
}

html[data-theme="dark"] .why-section p,
html[data-theme="dark"] .insights-section p,
html[data-theme="dark"] .why-section .principle small,
html[data-theme="dark"] .why-section .step p {
    color: var(--muted);
}

html[data-theme="dark"] .why-section .eyebrow,
html[data-theme="dark"] .insights-section .eyebrow,
html[data-theme="dark"] .why-section .principle span,
html[data-theme="dark"] .why-section .stepnum,
html[data-theme="dark"] .why-section .textlink,
html[data-theme="dark"] .insights-section .textlink {
    color: #56d68b;
}

html[data-theme="dark"] .insight-callout,
html[data-theme="dark"] .hero+.section.light .value {
    background: var(--card);
    border-color: var(--line);
    box-shadow: 0 10px 28px #0003;
}

html[data-theme="dark"] .hero+.section.light .vnum {
    background: #0e974826;
}

html[data-theme="dark"] .hero+.section.light .value h3,
html[data-theme="dark"] .hero+.section.light .value p,
html[data-theme="dark"] .card h3,
html[data-theme="dark"] .card p,
html[data-theme="dark"] .industry h3,
html[data-theme="dark"] .industry span,
html[data-theme="dark"] .outcome h3,
html[data-theme="dark"] .outcome p {
    color: var(--white);
}

html[data-theme="dark"] .hero+.section.light .value p,
html[data-theme="dark"] .card p,
html[data-theme="dark"] .outcome p {
    color: var(--muted);
}

html[data-theme="dark"] .card,
html[data-theme="dark"] .industry,
html[data-theme="dark"] .outcome {
    background: var(--card);
    border-color: var(--line);
    box-shadow: 0 8px 24px #0003;
}

html[data-theme="dark"] .card:hover,
html[data-theme="dark"] .industry:hover {
    background: var(--card);
    border-color: #0e974878;
    box-shadow: 0 14px 34px #0005;
}

html[data-theme="dark"] .icon {
    background: #0e974826;
    border-color: #0e974878;
    color: #56d68b;
}

html[data-theme="dark"] .textlink,
html[data-theme="dark"] .light .textlink,
html[data-theme="dark"] .principle span,
html[data-theme="dark"] .stepnum,
html[data-theme="dark"] .outcome span,
html[data-theme="dark"] .status {
    color: #56d68b;
}

html[data-theme="dark"] .principle strong,
html[data-theme="dark"] .step h3 {
    color: var(--white);
}

html[data-theme="dark"] .principle small {
    color: var(--muted);
}

html[data-theme="dark"] .principles,
html[data-theme="dark"] .steps,
html[data-theme="dark"] .principle,
html[data-theme="dark"] .step {
    border-color: var(--line);
}

html[data-theme="dark"] .pagehero {
    background: radial-gradient(ellipse at 80% 30%, #0c3156, var(--bg) 64%);
    border-color: var(--line);
}

html[data-theme="dark"] .pagehero h1 {
    color: var(--white);
}

html[data-theme="dark"] .pagehero p {
    color: var(--muted);
}

html[data-theme="dark"] .crumb {
    color: var(--muted);
}

html[data-theme="dark"] .crumb a {
    color: #8bc7f2;
}

html[data-theme="dark"] .formbox {
    background: var(--card);
    border-color: var(--line);
    box-shadow: 0 12px 32px #0003;
}

html[data-theme="dark"] .field label {
    color: var(--white);
}

html[data-theme="dark"] .field input,
html[data-theme="dark"] .field textarea,
html[data-theme="dark"] .field select {
    background: var(--bg2);
    border-color: var(--line);
    color: var(--white);
}

html[data-theme="dark"] .field input::placeholder,
html[data-theme="dark"] .field textarea::placeholder {
    color: #a7b4c6;
}

html[data-theme="dark"] .footer {
    background: var(--bg2);
    border-color: var(--line);
}

html[data-theme="dark"] .footer h4 {
    color: var(--white);
}

html[data-theme="dark"] .footgrid p,
html[data-theme="dark"] .footlinks a,
html[data-theme="dark"] .footbottom,
html[data-theme="dark"] .footbottom a {
    color: var(--muted);
}

html[data-theme="dark"] .footlinks a:hover,
html[data-theme="dark"] .footbottom a:hover {
    color: #56d68b;
}

html[data-theme="dark"] .footbottom {
    border-color: var(--line);
}

html[data-theme="dark"] .btn.outline {
    color: var(--white);
    border-color: #ffffff42;
}

html[data-theme="dark"] .btn.outline:hover {
    color: #56d68b;
    border-color: #56d68b;
}

html[data-theme="dark"] .notfound {
    color: var(--white);
}

html[data-theme="dark"] .notfound p {
    color: var(--muted);
}

html[data-theme="dark"] .notfound small {
    color: #56d68b;
}

html[data-theme="dark"] .social-link:nth-child(2) {
    color: var(--white);
}

.theme-toggle {
    display: inline-grid;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    place-items: center;
    padding: 0;
    color: #173e63;
    background: transparent;
    border: 1px solid rgba(0, 62, 112, .18);
    border-radius: 50%;
    cursor: pointer;
    transition: color .2s ease, background .2s ease, border-color .2s ease;
}

.theme-toggle:hover {
    color: #087640;
    background: rgba(0, 102, 179, .06);
    border-color: rgba(0, 102, 179, .3);
}

.theme-icon {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.7;
}

.theme-icon-sun,
html[data-theme="dark"] .theme-icon-moon {
    display: none;
}

html[data-theme="dark"] .theme-icon-sun {
    display: block;
}

html[data-theme="dark"] .theme-toggle {
    color: var(--white);
    border-color: var(--line);
}

html[data-theme="dark"] .theme-toggle:hover {
    color: #56d68b;
    background: #ffffff0d;
    border-color: #56d68b;
}

@media (max-width: 1000px) {
    .links.mobile .theme-toggle {
        margin-top: 8px;
    }
}

.hero+.section.light .value {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    transition: transform .35s ease-in-out, box-shadow .35s ease-in-out, border-color .35s ease-in-out;
}

.hero+.section.light .value::before {
    position: absolute;
    z-index: -1;
    inset: 0;
    background: linear-gradient(135deg, #0066b3 0%, #087fa4 52%, #0e9748 100%);
    background-size: 100% 100%;
    content: "";
    clip-path: circle(0% at 0 0);
    transition: clip-path .8s cubic-bezier(.22, 1, .36, 1);
}

.hero+.section.light .value:hover {
    transform: translateY(-5px);
    border-color: transparent;
    box-shadow: 0 16px 34px rgba(0, 62, 112, .2);
}

.hero+.section.light .value:hover::before {
    clip-path: circle(150% at 0 0);
}

.hero+.section.light .value .vnum,
.hero+.section.light .value h3,
.hero+.section.light .value p {
    transition: color .35s ease-in-out, background-color .35s ease-in-out;
}

.hero+.section.light .value:hover .vnum,
.hero+.section.light .value:hover h3,
.hero+.section.light .value:hover p {
    color: #fff;
}

.hero+.section.light .value:hover .vnum {
    background: rgba(255, 255, 255, .16);
}

html[data-theme="dark"] .hero+.section.light .value:hover {
    border-color: transparent;
    box-shadow: 0 16px 34px rgba(0, 0, 0, .35);
}

html[data-theme="dark"] .hero+.section.light .value:hover .vnum,
html[data-theme="dark"] .hero+.section.light .value:hover h3,
html[data-theme="dark"] .hero+.section.light .value:hover p {
    color: #fff;
}

html[data-theme="dark"] .hero+.section.light .value:hover .vnum {
    background: rgba(255, 255, 255, .16);
}

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

    .hero+.section.light .value,
    .hero+.section.light .value::before,
    .hero+.section.light .value .vnum,
    .hero+.section.light .value h3,
    .hero+.section.light .value p {
        transition: none;
    }

    .hero+.section.light .value:hover {
        transform: none;
    }
}

#services .card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    transition: transform .35s ease-in-out, box-shadow .35s ease-in-out, border-color .35s ease-in-out;
}

#services .card::before {
    position: absolute;
    z-index: -1;
    inset: 0;
    background: linear-gradient(135deg, #0066b3 0%, #087fa4 52%, #0e9748 100%);
    content: "";
    clip-path: circle(0% at 0 0);
    transition: clip-path .8s cubic-bezier(.22, 1, .36, 1);
}

#services .card:hover {
    transform: translateY(-5px);
    border-color: transparent;
    background: var(--bg2);
    box-shadow: 0 16px 34px rgba(0, 62, 112, .2);
}

#services .card:hover::before {
    clip-path: circle(150% at 0 0);
}

#services .card h3,
#services .card p,
#services .card .textlink,
#services .card .icon {
    transition: color .35s ease-in-out, background-color .35s ease-in-out, border-color .35s ease-in-out;
}

#services .card:hover h3,
#services .card:hover p,
#services .card:hover .textlink,
#services .card:hover .icon {
    color: #fff;
}

#services .card:hover .icon {
    background: rgba(255, 255, 255, .16);
    border-color: rgba(255, 255, 255, .45);
}

html[data-theme="dark"] #services .card:hover {
    box-shadow: 0 16px 34px rgba(0, 0, 0, .35);
}

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

    #services .card,
    #services .card::before,
    #services .card h3,
    #services .card p,
    #services .card .textlink,
    #services .card .icon {
        transition: none;
    }

    #services .card:hover {
        transform: none;
    }
}

.industries .industry {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    transition: transform .35s ease-in-out, box-shadow .35s ease-in-out, border-color .35s ease-in-out;
}

.industries .industry::before {
    position: absolute;
    z-index: -1;
    inset: 0;
    background: linear-gradient(135deg, #0066b3 0%, #087fa4 52%, #0e9748 100%);
    content: "";
    clip-path: circle(0% at 0 0);
    transition: clip-path .8s cubic-bezier(.22, 1, .36, 1);
}

.industries .industry:hover {
    transform: translateY(-5px);
    border-color: transparent;
    box-shadow: 0 16px 34px rgba(0, 62, 112, .2);
}

.industries .industry:hover::before {
    clip-path: circle(150% at 0 0);
}

.industries .industry span,
.industries .industry h3 {
    transition: color .35s ease-in-out;
}

.industries .industry:hover span,
.industries .industry:hover h3 {
    color: #fff;
}

html[data-theme="dark"] .industries .industry:hover {
    background: var(--card);
    border-color: transparent;
    box-shadow: 0 16px 34px rgba(0, 0, 0, .35);
}

html[data-theme="dark"] .industries .industry:hover span,
html[data-theme="dark"] .industries .industry:hover h3 {
    color: #fff;
}

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

    .industries .industry,
    .industries .industry::before,
    .industries .industry span,
    .industries .industry h3 {
        transition: none;
    }

    .industries .industry:hover {
        transform: none;
    }
}

.links>a:not(.navcta),
.links .svcbtn {
    position: relative;
    background-image: linear-gradient(90deg, #0066b3 0%, #087fa4 52%, #0e9748 100%);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: left center;
    background-clip: text;
    -webkit-background-clip: text;
    transition: color .25s ease, background-position .35s ease;
}

.links>a:not(.navcta)::after,
.links .svcbtn::after {
    position: absolute;
    right: 0;
    bottom: 3px;
    left: 0;
    height: 2px;
    background: linear-gradient(90deg, #0066b3 0%, #087fa4 52%, #0e9748 100%);
    content: "";
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .35s ease;
}

.links>a:not(.navcta):hover,
.links>a:not(.navcta):focus-visible,
.links .svcbtn:hover,
.links .svcbtn:focus-visible,
.links .svcbtn[aria-expanded="true"] {
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.links>a:not(.navcta):hover::after,
.links>a:not(.navcta):focus-visible::after,
.links .svcbtn:hover::after,
.links .svcbtn:focus-visible::after,
.links .svcbtn[aria-expanded="true"]::after {
    transform: scaleX(1);
}

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

    .links>a:not(.navcta),
    .links .svcbtn,
    .links>a:not(.navcta)::after,
    .links .svcbtn::after {
        transition: none;
    }
}

.mega a {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-color: transparent;
    transition: border-color .3s ease, transform .3s ease;
}

.mega a::before {
    position: absolute;
    z-index: -1;
    inset: 0;
    background: linear-gradient(135deg, #0066b3 0%, #087fa4 52%, #0e9748 100%);
    content: "";
    clip-path: circle(0% at 0 0);
    transition: clip-path .75s cubic-bezier(.22, 1, .36, 1);
    border-radius: 8px;
}

.mega a:hover,
.mega a:focus-visible {
    /* transform: translateY(-2px); */
    background: transparent;
    border-color: transparent;

}

.mega a:hover::before,
.mega a:focus-visible::before {
    clip-path: circle(150% at 0 0);
}

.mega a strong,
.mega a small {
    transition: color .3s ease;
}

.mega a:hover strong,
.mega a:hover small,
.mega a:focus-visible strong,
.mega a:focus-visible small {
    color: #fff;
}

html[data-theme="dark"] .mega a:hover,
html[data-theme="dark"] .mega a:focus-visible {
    background: transparent;
    border-color: transparent;
}

html[data-theme="dark"] .mega a:hover strong,
html[data-theme="dark"] .mega a:hover small,
html[data-theme="dark"] .mega a:focus-visible strong,
html[data-theme="dark"] .mega a:focus-visible small {
    color: #fff;
}

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

    .mega a,
    .mega a::before,
    .mega a strong,
    .mega a small {
        transition: none;
    }

    .mega a:hover,
    .mega a:focus-visible {
        transform: none;
    }
}

.footer .footlinks a,
.footer .footbottom a {
    display: inline-block;
    /* background-image: linear-gradient(90deg, #0066b3 0%, #00a6a6 50%, #0e9748 100%); */
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-clip: text;
    -webkit-background-clip: text;
    transition: color .25s ease;
}

html[data-theme] .footer .footlinks a:hover,
html[data-theme] .footer .footlinks a:focus-visible,
html[data-theme] .footer .footbottom a:hover,
html[data-theme] .footer .footbottom a:focus-visible {
    background-image: linear-gradient(90deg, #0066b3 0%, #00a6a6 50%, #0e9748 100%);
    color: transparent;
    -webkit-text-fill-color: transparent;
    text-decoration: none;
}

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

    .footer .footlinks a,
    .footer .footbottom a {
        transition: none;
    }
}

.scroll-top {
    position: fixed;
    z-index: 60;
    right: 24px;
    bottom: 24px;
    display: grid;
    width: 52px;
    height: 52px;
    padding: 0;
    place-items: center;
    color: var(--blue);
    background: var(--bg2);
    border: 1px solid var(--line);
    border-radius: 50%;
    box-shadow: 0 8px 24px rgba(13, 53, 91, .16);
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transform: translateY(10px);
    transition: opacity .25s ease, transform .25s ease, background-color .25s ease;
}

.scroll-top.visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.scroll-top:hover {
    background: var(--paper);
}

.scroll-top:focus-visible {
    outline: 3px solid var(--mint);
    outline-offset: 4px;
}

.scroll-top svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.scroll-top-track,
.scroll-top-progress {
    fill: none;
    stroke-width: 2;
}

.scroll-top-track {
    stroke: var(--line);
}

.scroll-top-progress {
    stroke: url("#scroll-progress-gradient");
    stroke-dasharray: 100;
    stroke-dashoffset: var(--scroll-progress-offset, 100);
    stroke-linecap: round;
    transform: rotate(-90deg);
    transform-origin: center;
}

.scroll-top-arrow {
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

@media (max-width: 640px) {
    .scroll-top {
        right: 18px;
        bottom: 18px;
        width: 48px;
        height: 48px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .scroll-top {
        transition: none;
    }
}

.site-preloader {
    position: fixed;
    z-index: 9999;
    inset: 0;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 16px;
    background: var(--bg);
    color: var(--white);
    opacity: 1;
    visibility: visible;
    transition: opacity .35s ease, visibility .35s ease;
}

.site-preloader.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.preloader-spinner {
    width: 48px;
    height: 48px;
    border: 3px solid var(--line);
    border-top-color: var(--blue);
    border-right-color: var(--mint);
    border-radius: 50%;
    animation: preloader-spin .8s linear infinite;
}

.preloader-label {
    font: 600 12px/1 var(--font-family);
    letter-spacing: .2em;
}

@keyframes preloader-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .site-preloader {
        transition: none;
    }

    .preloader-spinner {
        animation-duration: 2s;
    }
}

.about-hero {
    padding: 138px 0 76px;
    background: radial-gradient(ellipse at 18% 20%, #e8f3fa 0%, #f7fafd 54%, #fff 100%);
}

.about-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, .95fr);
    align-items: center;
    gap: clamp(36px, 6vw, 76px);
}

.about-hero-copy h1 {
    max-width: 650px;
    color: #123c68;
}

.about-hero-copy>p {
    max-width: 580px;
    font-size: 17px;
}

.about-hero-image {
    position: relative;
    min-width: 0;
    margin: 0;
    overflow: hidden;
    aspect-ratio: 1.15;
    background: #dce9f1;
    border: 1px solid rgba(0, 62, 112, .14);
    border-radius: 12px;
    box-shadow: 0 22px 55px rgba(13, 53, 91, .16);
}

.about-hero-image::after {
    position: absolute;
    inset: 30% 0 0;
    background: linear-gradient(transparent, rgba(6, 22, 42, .78));
    content: "";
    pointer-events: none;
}

.about-hero-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.about-hero-image figcaption {
    position: absolute;
    z-index: 1;
    right: 24px;
    bottom: 22px;
    left: 24px;
    display: grid;
    gap: 5px;
    color: #fff;
}

.about-hero-image figcaption span,
.about-value>span {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.about-hero-image figcaption strong {
    font-size: clamp(18px, 2vw, 24px);
    line-height: 1.3;
}

.ai-consulting-hero .ai-consulting-visual {
    width: 100%;
    min-width: 0;
    margin: 0;
    overflow: hidden;
    aspect-ratio: 1.12;
    border: 1px solid rgba(14, 53, 87, .1);
    border-radius: 22px;
    background: #edf7f6;
    box-shadow: 0 24px 60px rgba(13, 53, 91, .14);
}

.ai-opportunity-illustration {
    display: block;
    width: 100%;
    height: 100%;
}

.ai-application-illustration {
    display: block;
    width: 100%;
    height: 100%;
}

.application-heading {
    fill: #153855;
    font-family: Inter, Arial, sans-serif;
    font-size: 15px;
    font-weight: 700;
}

.application-subtitle {
    fill: #728898;
    font-family: Inter, Arial, sans-serif;
    font-size: 8px;
    font-weight: 500;
}

.application-label {
    fill: #728898;
    font-family: Inter, Arial, sans-serif;
    font-size: 7px;
    font-weight: 700;
    letter-spacing: .55px;
}

.application-metric {
    fill: #153855;
    font-family: Inter, Arial, sans-serif;
    font-size: 15px;
    font-weight: 700;
}

.application-chat-label {
    fill: #8ad9f5;
    font-family: Inter, Arial, sans-serif;
    font-size: 6px;
    font-weight: 700;
    letter-spacing: .6px;
}

.application-chat-copy {
    fill: #fff;
    font-family: Inter, Arial, sans-serif;
    font-size: 7px;
    font-weight: 500;
}

.application-assistant-float {
    transform-box: fill-box;
    transform-origin: center;
    animation: application-assistant-float 6s ease-in-out infinite;
}

@keyframes application-assistant-float {
    50% { transform: translateY(-4px); }
}

.ai-visual-card-title,
.ai-visual-card-copy,
.ai-visual-card-foot,
.ai-visual-footer,
.ai-robot-ai {
    font-family: Inter, Arial, sans-serif;
}

.ai-visual-card-title {
    fill: #31536c;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .55px;
}

.ai-visual-card-copy {
    fill: #728898;
    font-size: 8px;
    font-weight: 500;
}

.ai-visual-card-foot {
    fill: #8799a6;
    font-size: 6px;
    font-weight: 700;
    letter-spacing: .65px;
}

.ai-visual-footer {
    fill: #698394;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 1px;
}

.ai-robot-ai {
    fill: #1694a9;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .5px;
}

.ai-card-panel {
    transform-box: fill-box;
    transform-origin: center;
    will-change: transform;
}

.ai-card-panel-left,
.ai-card-panel-bottom-right {
    animation: ai-card-hover 9s ease-in-out infinite;
}

.ai-card-panel-right,
.ai-card-panel-bottom-left {
    animation: ai-card-hover 9s ease-in-out -4.5s infinite;
}

.ai-progress-fill {
    transform-box: fill-box;
    transform-origin: left center;
    animation: ai-progress-fill 6s cubic-bezier(.45, .05, .55, .95) infinite;
}

.ai-visual-robot {
    transform-box: fill-box;
    transform-origin: center;
    animation: ai-robot-hover 6s ease-in-out infinite;
}

@keyframes ai-card-hover {
    50% { transform: translateY(-3px); }
}

@media (prefers-reduced-motion: reduce) {
    .application-assistant-float {
        animation: none;
    }
}

@keyframes ai-robot-hover {
    50% { transform: translateY(-5px); }
}

@keyframes ai-progress-fill {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

html[data-theme="dark"] .ai-consulting-hero .ai-consulting-visual {
    border-color: var(--line);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .34);
}

@media (max-width: 800px) {
    .ai-consulting-hero .ai-consulting-visual {
        width: min(100%, 620px);
    }
}

@media (max-width: 480px) {
    .ai-consulting-hero .ai-consulting-visual {
        aspect-ratio: 1.08;
        border-radius: 17px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ai-card-panel-left,
    .ai-card-panel-right,
    .ai-card-panel-bottom-left,
    .ai-card-panel-bottom-right,
    .ai-progress-fill,
    .ai-visual-robot {
        animation: none;
    }

    .ai-progress-fill {
        transform: scaleX(1);
    }
}

.about-story-intro {
    max-width: 760px;
    margin-bottom: 38px;
}

.about-story-intro h2,
.about-perspective h2 {
    margin: 14px 0 18px;
}

.about-story-intro p,
.about-perspective-copy p {
    font-size: 16px;
}

.about-values {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.about-value {
    padding: 24px;
    /* background: linear-gradient(135deg, #0066b3 0%, #087fa4 52%, #0e9748 100%); */
    background: linear-gradient(110deg, #105BAD 0%, #087FA4 52%, #03A67C 100%);
    border: 1px solid rgba(0, 62, 112, .12);
    border-radius: 8px;
}

.about-value>span {
    color: rgba(255, 255, 255, .82);
}

.about-value h3 {
    margin: 18px 0 10px;
    font-size: 19px;
    color: #fff;
}

.about-value p {
    font-size: 14px;
    color: rgba(255, 255, 255, .9);
}

.about-perspective-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, .9fr);
    align-items: start;
    gap: clamp(36px, 7vw, 90px);
}

.about-perspective-copy {
    display: grid;
    gap: 16px;
    padding-top: 6px;
}

html[data-theme="dark"] .about-hero {
    background: radial-gradient(ellipse at 18% 20%, #0c3156 0%, #06162a 72%);
}

html[data-theme="dark"] .about-hero-copy h1 {
    color: var(--white);
}

html[data-theme="dark"] .about-hero-copy>p {
    color: var(--muted);
}

html[data-theme="dark"] .about-hero-image {
    background: var(--card);
    border-color: var(--line);
    box-shadow: 0 22px 55px rgba(0, 0, 0, .3);
}

html[data-theme="dark"] .about-story {
    background: var(--bg);
    color: var(--white);
}

html[data-theme="dark"] .about-value p {
    color: var(--muted);
}

html[data-theme="dark"] .about-value {
    border-color: rgba(255, 255, 255, .14);
}

html[data-theme="dark"] .about-value>span,
html[data-theme="dark"] .about-value h3,
html[data-theme="dark"] .about-value p {
    color: #fff;
}

@media (max-width: 800px) {
    .about-hero {
        padding: 120px 0 58px;
    }

    .about-hero-grid,
    .about-perspective-grid {
        grid-template-columns: 1fr;
        gap: 34px;
    }

    .about-hero-image {
        width: min(100%, 620px);
        aspect-ratio: 1.45;
    }

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

@media (max-width: 480px) {
    .about-hero-image {
        aspect-ratio: 1.15;
    }

    .about-hero-image figcaption {
        right: 18px;
        bottom: 17px;
        left: 18px;
    }

    .about-value {
        padding: 20px;
    }
}

.btn:not(.navcta) {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    transition: transform .2s ease, box-shadow .3s ease, border-color .3s ease, color .3s ease;
}

.btn:not(.navcta)::before {
    position: absolute;
    z-index: -1;
    inset: 0;
    background: linear-gradient(110deg, #0066b3 0%, #087fa4 52%, #0e9748 100%);
    content: "";
    opacity: 0;
    transition: opacity .4s ease;
}

html[data-theme] .btn:not(.navcta):hover,
html[data-theme] .btn:not(.navcta):focus-visible {
    border-color: transparent;
    color: #fff;
}

.btn:not(.navcta):hover::before,
.btn:not(.navcta):focus-visible::before {
    opacity: 1;
}

.primary:hover,
.primary:focus-visible {
    background: var(--blue);
}

.outline:hover,
.outline:focus-visible {
    background: transparent;
}

.cta .btn:hover,
.cta .btn:focus-visible {
    background: var(--bg);
}

@media (prefers-reduced-motion: reduce) {
    .btn:not(.navcta),
    .btn:not(.navcta)::before {
        transition: none;
    }
}

.about-hero-copy h1 {
    color: #123c68;
}

@supports (background-clip: text) or (-webkit-background-clip: text) {
    .about-hero-copy h1,
    html[data-theme="dark"] .about-hero-copy h1 {
        background-image: linear-gradient(110deg, #0066b3 0%, #087fa4 52%, #0e9748 100%);
        background-clip: text;
        -webkit-background-clip: text;
        color: transparent;
        -webkit-text-fill-color: transparent;
    }

    html[data-theme="dark"] .about-hero-copy h1 {
        background-image: linear-gradient(110deg, #56b8ff 0%, #55cfc0 52%, #71e09b 100%);
    }
}

.ai-consulting-hero .about-hero-grid {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
}

.ai-consulting-hero .about-hero-copy {
    max-width: 760px;
}

.ai-consulting-hero .about-hero-copy > .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 13px;
    border: 1px solid #d7e8f7;
    border-radius: 999px;
    background: rgba(255, 255, 255, .62);
    color: #0066b3;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}

.ai-consulting-hero .about-hero-copy > .eyebrow span {
    color: #168df4;
    font-size: 16px;
}

.ai-consulting-hero .about-hero-copy h1 {
    max-width: 800px;
    margin: 18px 0 16px;
    background: none;
    color: #0a2143;
    font-size: clamp(38px, 5.2vw, 58px);
    font-weight: 700;
    letter-spacing: -.045em;
    line-height: 1.05;
    -webkit-text-fill-color: currentColor;
}

.ai-consulting-hero .about-hero-copy h1 span {
    display: block;
    background-image: linear-gradient(110deg, #168df4 0%, #18b3b0 52%, #31c86e 100%);
    background-clip: text;
    color: transparent;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.ai-consulting-hero .about-hero-copy > p {
    max-width: 620px;
    font-size: 16px;
}

.ai-consulting-services {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    max-width: 650px;
    margin: 23px 0 26px;
    padding: 0;
    list-style: none;
}

.ai-consulting-services li {
    display: grid;
    justify-items: center;
    gap: 8px;
    color: #173e63;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.25;
    text-align: center;
}

.ai-consulting-hero:not(.ai-automation-hero) .ai-consulting-services {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 560px;
    gap: 10px;
}

.ai-consulting-hero:not(.ai-automation-hero) .ai-consulting-services li {
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
    justify-items: start;
    gap: 10px;
    min-height: 66px;
    padding: 11px 13px;
    border: 1px solid rgba(18, 109, 151, .12);
    border-radius: 14px;
    background: linear-gradient(135deg, #fff, #f4fbff);
    box-shadow: 0 8px 18px rgba(20, 75, 101, .06);
    font-size: 12px;
    line-height: 1.35;
    text-align: left;
}

.ai-consulting-hero:not(.ai-automation-hero) .ai-consulting-service-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: #edf6fe;
    color: #167eb7;
    box-shadow: none;
}

.ai-consulting-hero:not(.ai-automation-hero) .ai-consulting-services li:nth-child(2) .ai-consulting-service-icon { background: #e9f8f2; color: #14966a; }
.ai-consulting-hero:not(.ai-automation-hero) .ai-consulting-services li:nth-child(3) .ai-consulting-service-icon { background: #eef7fb; color: #1689ae; }
.ai-consulting-hero:not(.ai-automation-hero) .ai-consulting-services li:nth-child(4) .ai-consulting-service-icon { background: #f0efff; color: #6a5bc5; }

.ai-automation-hero .ai-consulting-services {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 560px;
    gap: 10px;
}

.ai-automation-hero .ai-consulting-services li {
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
    justify-items: start;
    gap: 10px;
    min-height: 66px;
    padding: 11px 13px;
    border: 1px solid rgba(18, 109, 151, .12);
    border-radius: 14px;
    background: linear-gradient(135deg, #fff, #f4fbff);
    box-shadow: 0 8px 18px rgba(20, 75, 101, .06);
    font-size: 12px;
    line-height: 1.35;
    text-align: left;
}

.ai-automation-hero .ai-consulting-service-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: #eaf7f5;
    color: #159475;
    box-shadow: none;
}

.ai-automation-hero .ai-consulting-services li:nth-child(2) .ai-consulting-service-icon { background: #edf6fe; color: #167eb7; }
.ai-automation-hero .ai-consulting-services li:nth-child(3) .ai-consulting-service-icon { background: #f0efff; color: #6659c5; }
.ai-automation-hero .ai-consulting-services li:nth-child(4) .ai-consulting-service-icon { background: #eaf8ef; color: #148d5c; }

.ai-consulting-service-icon {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border: 1px solid #e0edf7;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 4px 12px rgba(13, 53, 91, .1);
    color: #087fa4;
}

.ai-consulting-service-icon svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.ai-consulting-hero .actions {
    margin-top: 0;
}

.ai-consulting-hero .actions .btn.primary {
    min-height: 48px;
    padding: 0 20px;
    border-radius: 999px;
    background: #0066b3;
}

.ai-consulting-hero .actions .btn.primary:hover,
.ai-consulting-hero .actions .btn.primary:focus-visible {
    /* background: linear-gradient(110deg, #168df4 0%, #18b3b0 52%, #31c86e 100%); */
     background: linear-gradient(110deg, #0066b3 0%, #087fa4 52%, #0e9748 100%);
    box-shadow: 0 10px 24px rgba(0, 102, 179, .22);
    transition: all.4s ease;
}

html[data-theme="dark"] .ai-consulting-hero .about-hero-copy h1 {
    background: none;
    color: #f3f8fc;
    -webkit-text-fill-color: currentColor;
}

html[data-theme="dark"] .ai-consulting-hero .about-hero-copy h1 span {
    background-image: linear-gradient(110deg, #56b8ff 0%, #55cfc0 52%, #71e09b 100%);
}

html[data-theme="dark"] .ai-consulting-hero .about-hero-copy > .eyebrow {
    border-color: var(--line);
    background: var(--card);
    color: #82c9ff;
}

html[data-theme="dark"] .ai-consulting-services li {
    color: var(--white);
}

html[data-theme="dark"] .ai-consulting-hero:not(.ai-automation-hero) .ai-consulting-services li,
html[data-theme="dark"] .ai-automation-hero .ai-consulting-services li {
    border-color: rgba(130, 201, 255, .18);
    background: linear-gradient(135deg, #17344d, #122b42);
    box-shadow: 0 8px 18px rgba(0, 0, 0, .18);
    color: #f3f8fc;
}

html[data-theme="dark"] .ai-consulting-hero:not(.ai-automation-hero) .ai-consulting-service-icon,
html[data-theme="dark"] .ai-consulting-hero:not(.ai-automation-hero) .ai-consulting-services li:nth-child(n) .ai-consulting-service-icon,
html[data-theme="dark"] .ai-automation-hero .ai-consulting-service-icon,
html[data-theme="dark"] .ai-automation-hero .ai-consulting-services li:nth-child(n) .ai-consulting-service-icon {
    border-color: rgba(130, 201, 255, .2);
    background: #20445f;
    color: #8bdcff;
}

html[data-theme="dark"] .ai-consulting-hero:not(.ai-automation-hero) .ai-consulting-services li:nth-child(2) .ai-consulting-service-icon,
html[data-theme="dark"] .ai-automation-hero .ai-consulting-services li:nth-child(4) .ai-consulting-service-icon {
    border-color: rgba(91, 220, 174, .24);
    background: #1d493f;
    color: #7be0b6;
}

html[data-theme="dark"] .ai-consulting-hero:not(.ai-automation-hero) .ai-consulting-services li:nth-child(3) .ai-consulting-service-icon {
    border-color: rgba(100, 207, 235, .24);
    background: #1c4656;
    color: #79d6ef;
}

html[data-theme="dark"] .ai-consulting-hero:not(.ai-automation-hero) .ai-consulting-services li:nth-child(4) .ai-consulting-service-icon,
html[data-theme="dark"] .ai-automation-hero .ai-consulting-services li:nth-child(3) .ai-consulting-service-icon {
    border-color: rgba(177, 154, 255, .25);
    background: #3a345f;
    color: #c2b5ff;
}

.ai-automation-visual {
    position: relative;
    display: block;
    aspect-ratio: 1.12;
    padding: 0;
    background: #f6fbff !important;
}

.ai-automation-hero .ai-automation-visual {
    aspect-ratio: 1.5;
}

.ai-automation-illustration {
    display: block;
    width: 100%;
    height: 100%;
}

.automation-robot-image {
    transform-box: fill-box;
    transform-origin: center;
    animation: automation-robot-around 7s ease-in-out infinite;
    will-change: transform;
}

@keyframes automation-robot-around {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-9px) scale(1.015); }
}

.ai-automation-hero-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

.automation-image-glow {
    position: absolute;
    right: 14%;
    bottom: 18%;
    width: 24%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(47, 210, 242, .27), rgba(47, 210, 242, 0) 68%);
    mix-blend-mode: screen;
    pointer-events: none;
    animation: automation-image-glow 3.4s ease-in-out infinite;
}

.automation-image-scan {
    position: absolute;
    top: 7%;
    right: 6%;
    width: 73%;
    height: 2px;
    border-radius: 50%;
    background: linear-gradient(90deg, transparent, rgba(35, 192, 255, .08) 25%, rgba(35, 192, 255, .72) 50%, rgba(35, 192, 255, .08) 75%, transparent);
    box-shadow: 0 0 15px rgba(35, 192, 255, .35);
    opacity: .75;
    pointer-events: none;
    animation: automation-image-scan 5.5s ease-in-out infinite;
}

.automation-image-status {
    position: absolute;
    right: 5%;
    bottom: 5%;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 11px;
    border: 1px solid rgba(22, 126, 183, .16);
    border-radius: 999px;
    background: rgba(255, 255, 255, .82);
    box-shadow: 0 7px 18px rgba(20, 75, 101, .12);
    color: #17678d;
    font-size: 10px;
    font-weight: 700;
    backdrop-filter: blur(8px);
    animation: automation-status-float 4.5s ease-in-out infinite;
}

.automation-image-status i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #1bb777;
    box-shadow: 0 0 0 4px rgba(27, 183, 119, .14);
    animation: automation-live-pulse 1.8s ease-out infinite;
}

.automation-canvas {
    position: relative;
    width: min(100%, 455px);
    min-height: 425px;
    padding: 22px;
    overflow: hidden;
    border: 1px solid rgba(19, 105, 151, .13);
    border-radius: 20px;
    background: linear-gradient(145deg, rgba(255, 255, 255, .96), rgba(244, 252, 252, .84));
    box-shadow: 0 18px 42px rgba(17, 77, 113, .12);
}

.automation-canvas::before,
.automation-canvas::after {
    position: absolute;
    z-index: 0;
    display: grid;
    place-items: center;
    border-radius: 50%;
    content: "AI";
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .08em;
}

.automation-canvas::before {
    top: 61px;
    right: 19px;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(27, 157, 149, .32);
    background: rgba(232, 250, 245, .82);
    color: #159475;
    box-shadow: 0 0 0 8px rgba(26, 180, 145, .08);
    animation: automation-core-pulse 2.8s ease-in-out infinite;
}

.automation-canvas::after {
    right: 33px;
    bottom: 108px;
    width: 22px;
    height: 22px;
    background: #e9f4ff;
    color: #2580ba;
    font-size: 8px;
    box-shadow: 0 6px 16px rgba(19, 100, 150, .13);
    animation: automation-satellite 5s ease-in-out infinite;
}

.automation-canvas-head {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #5b7182;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .1em;
}

.automation-canvas-head small {
    margin-left: auto;
    color: #148966;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0;
}

.automation-live-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #1db77c;
    box-shadow: 0 0 0 5px rgba(29, 183, 124, .13);
    animation: automation-live-pulse 1.8s ease-out infinite;
}

.automation-flow {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 8px;
    margin-top: 22px;
}

.automation-step {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 12px;
    border: 1px solid rgba(19, 93, 134, .1);
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 7px 16px rgba(20, 75, 101, .06);
    opacity: 0;
    animation: automation-step-reveal .55s cubic-bezier(.22, 1, .36, 1) forwards;
}

.automation-step:nth-of-type(2) { animation-delay: .15s; }
.automation-step:nth-of-type(3) { animation-delay: .3s; }
.automation-step:nth-of-type(4) { animation-delay: .45s; }

.automation-step-icon {
    display: grid;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 10px;
    background: #e8f5fb;
    color: #137eae;
    font-size: 18px;
    font-weight: 800;
}

.automation-step small,
.automation-step em {
    display: block;
    color: #718393;
    font-size: 9px;
    font-style: normal;
    line-height: 1.35;
}

.automation-step small {
    color: #168a70;
    font-weight: 800;
    letter-spacing: .08em;
}

.automation-step strong {
    display: block;
    margin: 2px 0;
    color: #163e5c;
    font-size: 13px;
}

.automation-link {
    width: 2px;
    height: 9px;
    margin-left: 29px;
    background: repeating-linear-gradient(to bottom, #4bbd9d 0 3px, transparent 3px 7px);
    background-size: 100% 14px;
    animation: automation-data-flow .7s linear infinite;
}

.automation-ai .automation-step-icon { background: #e9f8f2; color: #139866; }
.automation-route .automation-step-icon { background: #eef0ff; color: #6a5acb; }
.automation-done .automation-step-icon { background: #e7f8ef; color: #12945e; }

.automation-insight {
    position: absolute;
    right: -8px;
    bottom: 14px;
    z-index: 2;
    display: grid;
    min-width: 115px;
    padding: 12px 15px;
    border-radius: 13px;
    background: #123d63;
    color: #fff;
    box-shadow: 0 12px 24px rgba(13, 53, 91, .2);
    animation: automation-insight-reveal .55s .62s cubic-bezier(.22, 1, .36, 1) both;
}

.automation-insight span { color: #73d9c0; font-size: 8px; font-weight: 800; letter-spacing: .08em; }
.automation-insight strong { margin-top: 2px; font-size: 23px; line-height: 1; }
.automation-insight small { margin-top: 3px; color: #c1dae9; font-size: 9px; }
.automation-insight i { position: absolute; top: 11px; right: 11px; width: 7px; height: 7px; border-radius: 50%; background: #45d5a1; }

.automation-orbit {
    position: absolute;
    z-index: 0;
    border: 1px solid rgba(34, 163, 184, .16);
    border-radius: 50%;
}

.automation-orbit-one { top: 70px; right: -95px; width: 220px; height: 220px; }
.automation-orbit-two { bottom: -105px; left: -90px; width: 195px; height: 195px; }

.automation-orbit-one { animation: automation-orbit-spin 18s linear infinite; }
.automation-orbit-two { animation: automation-orbit-spin 14s linear reverse infinite; }

@keyframes automation-live-pulse {
    0% { box-shadow: 0 0 0 0 rgba(29, 183, 124, .3); }
    70%, 100% { box-shadow: 0 0 0 8px rgba(29, 183, 124, 0); }
}

@keyframes automation-data-flow {
    to { background-position: 0 14px; }
}

@keyframes automation-step-reveal {
    from { opacity: 0; transform: translateX(-12px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes automation-insight-reveal {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes automation-core-pulse {
    0%, 100% { transform: scale(1); box-shadow: 0 0 0 8px rgba(26, 180, 145, .08); }
    50% { transform: scale(1.12); box-shadow: 0 0 0 15px rgba(26, 180, 145, 0); }
}

@keyframes automation-satellite {
    0%, 100% { transform: translate(0, 0) rotate(0); }
    50% { transform: translate(-8px, 7px) rotate(16deg); }
}

@keyframes automation-orbit-spin {
    to { transform: rotate(360deg); }
}

@keyframes automation-hero-breathe {
    0%, 100% { transform: scale(1.01); }
    50% { transform: scale(1.045); }
}

@keyframes automation-image-glow {
    0%, 100% { transform: scale(.9); opacity: .42; }
    50% { transform: scale(1.15); opacity: .9; }
}

@keyframes automation-image-scan {
    0%, 100% { transform: translateY(0); opacity: 0; }
    18%, 75% { opacity: .75; }
    55% { transform: translateY(370px); opacity: .75; }
}

@keyframes automation-status-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

html[data-theme="dark"] .ai-automation-visual { background: linear-gradient(145deg, #102d47, #123d45) !important; }
html[data-theme="dark"] .automation-canvas { border-color: rgba(130, 201, 255, .16); background: rgba(14, 43, 66, .92); }
html[data-theme="dark"] .automation-step { border-color: rgba(130, 201, 255, .13); background: #143852; }
html[data-theme="dark"] .automation-step strong { color: #f3f8fc; }
html[data-theme="dark"] .automation-step em { color: #b6c9d7; }

@media (prefers-reduced-motion: reduce) {
    .automation-robot-image {
        animation: none;
    }

    .automation-canvas::before,
    .automation-canvas::after,
    .automation-live-dot,
    .automation-step,
    .automation-link,
    .automation-orbit {
        animation: none;
    }

    .ai-automation-hero-image,
    .automation-image-glow,
    .automation-image-scan,
    .automation-image-status,
    .automation-image-status i {
        animation: none;
    }

    .automation-step,
    .automation-insight {
        opacity: 1;
        transform: none;
    }
}

@media (max-width: 480px) {
    .ai-automation-visual { padding: 0; }
    .automation-canvas { min-height: 407px; padding: 17px; }
    .automation-insight { right: -10px; bottom: 10px; }
}

html[data-theme="dark"] .ai-consulting-service-icon {
    border-color: var(--line);
    background: var(--card);
}

@media (max-width: 480px) {
    .ai-consulting-hero .about-hero-copy h1 {
        font-size: clamp(36px, 10vw, 48px);
    }

    .ai-consulting-services {
        gap: 8px;
    }

    .ai-consulting-services li {
        font-size: 11px;
    }
}

@media (max-width: 800px) {
    .ai-consulting-hero .about-hero-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .ai-consulting-hero .ai-consulting-visual {
        width: min(100%, 620px);
    }
}

html[data-page="ai-application-development"] .ai-application-outcomes .outcomes {
    gap: 20px;
}

html[data-page="ai-application-development"] .ai-app-outcome {
    --app-outcome-accent: #168df4;
    --app-outcome-soft: #eaf5ff;
    position: relative;
    isolation: isolate;
    display: flex;
    min-height: 270px;
    flex-direction: column;
    padding: 25px 24px 20px;
    overflow: hidden;
    border: 1px solid #e2edf6;
    border-radius: 20px;
    background: linear-gradient(145deg, #fff 0%, #fbfdff 70%, var(--app-outcome-soft) 155%);
    box-shadow: 0 14px 34px rgba(20, 63, 89, .09);
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

html[data-page="ai-application-development"] .ai-app-outcome:nth-child(2) {
    --app-outcome-accent: #129b79;
    --app-outcome-soft: #e9f8f2;
}

html[data-page="ai-application-development"] .ai-app-outcome:nth-child(3) {
    --app-outcome-accent: #755dd1;
    --app-outcome-soft: #f0edff;
}

html[data-page="ai-application-development"] .ai-app-outcome::before {
    position: absolute;
    z-index: -1;
    top: -54px;
    right: -48px;
    width: 150px;
    height: 150px;
    content: "";
    border: 1px solid color-mix(in srgb, var(--app-outcome-accent) 20%, transparent);
    border-radius: 50%;
    box-shadow: 0 0 0 18px color-mix(in srgb, var(--app-outcome-accent) 6%, transparent), 0 0 0 38px color-mix(in srgb, var(--app-outcome-accent) 4%, transparent);
}

html[data-page="ai-application-development"] .ai-app-outcome-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

html[data-page="ai-application-development"] .ai-app-outcome-icon {
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--app-outcome-accent) 16%, transparent);
    border-radius: 15px;
    background: var(--app-outcome-soft);
    color: var(--app-outcome-accent);
}

html[data-page="ai-application-development"] .ai-app-outcome-icon svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.7;
}

html[data-page="ai-application-development"] .ai-app-outcome .ai-app-outcome-top > span:last-child {
    padding: 6px 9px;
    border-radius: 999px;
    background: var(--app-outcome-soft);
    color: var(--app-outcome-accent);
    font-size: 9px;
    font-weight: 750;
    letter-spacing: .1em;
}

html[data-page="ai-application-development"] .ai-app-outcome h3 {
    max-width: 240px;
    margin: 20px 0 9px;
    color: #153858;
    font-size: 21px;
    line-height: 1.25;
}

html[data-page="ai-application-development"] .ai-app-outcome p {
    max-width: 280px;
    margin-bottom: 18px;
    color: #587087;
    font-size: 13px;
    line-height: 1.65;
}

@media (hover: hover) {
    html[data-page="ai-application-development"] .ai-app-outcome:hover {
        transform: translateY(-6px);
        border-color: color-mix(in srgb, var(--app-outcome-accent) 30%, #e2edf6);
        box-shadow: 0 22px 42px rgba(20, 63, 89, .15);
    }
}

html[data-theme="dark"][data-page="ai-application-development"] .ai-app-outcome {
    border-color: rgba(130, 201, 255, .16);
    background: linear-gradient(145deg, #14344e 0%, #102940 72%, color-mix(in srgb, var(--app-outcome-accent) 20%, #102940) 155%);
    box-shadow: 0 14px 34px rgba(0, 0, 0, .24);
}

html[data-theme="dark"][data-page="ai-application-development"] .ai-app-outcome h3 {
    color: #f3f8fc;
}

html[data-theme="dark"][data-page="ai-application-development"] .ai-app-outcome p {
    color: #c3d1dd;
}

html[data-theme="dark"][data-page="ai-application-development"] .ai-app-outcome-icon,
html[data-theme="dark"][data-page="ai-application-development"] .ai-app-outcome .ai-app-outcome-top > span:last-child {
    background: color-mix(in srgb, var(--app-outcome-accent) 20%, #102940);
}

@media (max-width: 640px) {
    html[data-page="ai-application-development"] .ai-app-outcome {
        min-height: 245px;
    }
}