:root {
    --ink: #08122f;
    --blue: #2758ff;
    --muted: #64708a;
    --line: #e5e9f2
}

* {
    box-sizing: border-box
}

body {
    margin: 0;
    color: var(--ink);
    font-family: 'DM Sans', sans-serif
}

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

.wrap {
    width: min(1180px, calc(100% - 40px));
    margin: auto
}

.top {
    background: #06102d;
    color: #aeb9d8;
    font-size: 12px
}

.top .wrap {
    height: 32px;
    display: flex;
    justify-content: space-between;
    align-items: center
}

header {
    height: 78px;
    border-bottom: 1px solid var(--line)
}

.nav {
    height: 100%;
    display: flex;
    align-items: center;
    gap: 35px
}

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

.logo i {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #163de3, #54d5ff);
    color: white;
    border-radius: 10px;
    font: 800 21px Manrope
}

.logo b {
    font: 800 16px Manrope
}

.logo small {
    display: block;
    font-size: 8px;
    letter-spacing: 3.5px;
    color: #73809a
}

.nav nav {
    display: flex;
    gap: 25px;
    margin-left: auto;
    font-size: 13px;
    font-weight: 600
}

.btn {
    display: inline-block;
    border: 0;
    border-radius: 8px;
    background: var(--blue);
    color: #fff;
    padding: 14px 20px;
    font-weight: 700;
    cursor: pointer
}

.hero {
    background: radial-gradient(circle at 75% 40%, #153e8f, #071432 55%, #050d23);
    color: #fff;
    min-height: 650px
}

.hero-grid {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 70px;
    align-items: center;
    min-height: 650px
}

.eyebrow {
    font-size: 11px;
    color: #69dbff;
    letter-spacing: 2px;
    font-weight: 700
}

.hero h1,
.pagehero h1 {
    font: 700 60px/1.06 Manrope;
    letter-spacing: -3px;
    margin: 25px 0
}

.hero h1 em,
.dark h2 em {
    font-style: normal;
    color: #63dcff
}

.hero p,
.pagehero p {
    color: #bac7e4;
    font-size: 17px;
    line-height: 1.75
}

.actions {
    display: flex;
    align-items: center;
    gap: 25px;
    margin-top: 30px
}

.code {
    background: #07142e;
    border: 1px solid #5576b766;
    border-radius: 15px;
    box-shadow: 0 40px 80px #0007;
    overflow: hidden
}

.code>small,
.code>div {
    display: block;
    padding: 15px 20px;
    border-bottom: 1px solid #334c7b;
    color: #8093b9
}

.code pre {
    padding: 25px;
    font: 13px/2 monospace;
    color: #b7c9e9
}

.code pre b {
    color: #ca91ef
}

.intro {
    display: grid;
    grid-template-columns: 1.25fr .75fr;
    gap: 80px;
    align-items: end;
    padding: 90px 0 50px
}

.blue {
    color: var(--blue)
}

h2 {
    font: 700 38px/1.2 Manrope;
    letter-spacing: -1.5px
}

.intro p,
.split p {
    color: var(--muted);
    line-height: 1.8
}

.cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin-bottom: 100px
}

.cards article {
    min-height: 260px;
    padding: 35px;
    border: 1px solid var(--line);
    margin: -1px 0 0 -1px;
    position: relative
}

.cards article>span {
    color: #9aa5b8;
    font: 12px monospace
}

.cards h3,
.projects h3,
.posts h3 {
    font: 700 18px Manrope
}

.cards p,
.projects p,
.posts p {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.7
}

.cards a,
.projects a,
.posts a {
    color: var(--blue);
    font-size: 12px;
    font-weight: 700
}

.dark {
    background: #071331;
    color: #fff;
    padding: 100px 0
}

.dark h2 {
    font-size: 42px
}

.projects {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px
}

.projects article {
    padding: 18px;
    border: 1px solid #273c64;
    border-radius: 12px
}

.visual {
    height: 220px;
    padding: 25px;
    background: linear-gradient(135deg, #173a9d, #4a8aff);
    border-radius: 8px;
    color: #cfe2ff;
    font: 11px monospace
}

.visual b {
    display: block;
    margin-top: 120px;
    font: 700 23px Manrope;
    color: #fff
}

.projects article>span {
    display: block;
    margin-top: 20px;
    color: #6ddfff;
    font-size: 10px;
    text-transform: uppercase
}

.dark .projects p {
    color: #9dadca
}

.dark .projects a {
    color: #72ddff
}

.cta {
    text-align: center;
    background: linear-gradient(120deg, #214be8, #2f92f1);
    color: #fff;
    padding: 85px 0
}

.cta h2 {
    font-size: 42px
}

.white {
    background: #fff;
    color: #2051df
}

.pagehero {
    background: linear-gradient(135deg, #071331, #15366f);
    color: white;
    padding: 90px 0
}

.pagehero h1 {
    max-width: 850px;
    font-size: 50px
}

.pagehero p {
    max-width: 700px
}

.content {
    padding: 85px 0
}

.split,
.contact {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 90px
}

.values {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin-top: 65px
}

.values article {
    border: 1px solid var(--line);
    padding: 28px;
    margin-left: -1px
}

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

.posts article {
    border: 1px solid var(--line);
    padding: 17px
}

.postart {
    height: 180px;
    padding: 20px;
    display: flex;
    align-items: end;
    background: linear-gradient(135deg, #153796, #4cbfe4);
    color: white;
    font: 11px monospace
}

.posts article>span {
    display: block;
    margin-top: 20px;
    color: var(--blue);
    font-size: 10px
}

.jobs article {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 25px;
    border-bottom: 1px solid var(--line)
}

.jobs span {
    font-size: 10px;
    color: var(--blue)
}

.jobs h3 {
    font: 700 18px Manrope
}

.jobs a {
    color: var(--blue);
    font-weight: 700
}

.contact form,
.quote form {
    background: #f5f7fb;
    padding: 32px
}

.formgrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px
}

.formgrid label {
    font-size: 12px;
    font-weight: 700
}

.formgrid input,
.formgrid select,
.formgrid textarea {
    width: 100%;
    margin-top: 8px;
    padding: 12px;
    border: 1px solid #dfe4ee;
    border-radius: 6px;
    font: 13px inherit
}

.formgrid .full {
    grid-column: span 2
}

.contact form .btn {
    margin-top: 20px
}

.quote {
    background: #071331;
    color: #fff;
    padding: 70px 0
}

.quote form {
    background: #0d2046
}

.quote input,
.quote select,
.quote textarea {
    background: #fff
}

.prose {
    max-width: 850px;
    font-size: 17px;
    line-height: 1.9
}

.flash {
    padding: 14px;
    text-align: center;
    background: #d9f9e5;
    color: #176339
}

footer {
    background: #050c20;
    color: #8f9bbb;
    padding: 65px 0 25px
}

.foot {
    display: grid;
    grid-template-columns: 1.6fr repeat(3, 1fr);
    gap: 60px
}

.light {
    color: #fff
}

.foot>div>a,
.foot>div>span {
    display: block;
    margin: 11px 0;
    font-size: 12px
}

.foot>div>b {
    color: #fff
}

.foot p {
    font-size: 13px;
    line-height: 1.7
}

.copy {
    border-top: 1px solid #202a42;
    margin-top: 45px;
    padding-top: 22px;
    font-size: 10px
}

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

    .nav>.btn {
        margin-left: auto
    }

    .hero-grid {
        grid-template-columns: 1fr;
        padding: 70px 0
    }

    .code {
        display: none
    }

    .intro,
    .split,
    .contact {
        grid-template-columns: 1fr;
        gap: 25px
    }

    .cards,
    .posts {
        grid-template-columns: 1fr 1fr
    }

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

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

@media(max-width:600px) {
    .top span {
        display: none
    }

    .top .wrap {
        justify-content: center
    }

    .nav>.btn {
        display: none
    }

    .hero h1,
    .pagehero h1 {
        font-size: 40px;
        letter-spacing: -2px
    }

    .cards,
    .projects,
    .posts {
        grid-template-columns: 1fr
    }

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

    .formgrid .full {
        grid-column: auto
    }

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

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

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

    .dark h2,
    .cta h2,
    h2 {
        font-size: 31px
    }
}
.tech-hero {
    position: relative;
    overflow: hidden;
    padding:26px 0 23px;
    color: #fff;
    background:
        radial-gradient(circle at 78% 28%, rgba(36, 104, 255, .28), transparent 30%),
        radial-gradient(circle at 20% 85%, rgba(0, 211, 255, .12), transparent 30%),
        linear-gradient(135deg, #03091c 0%, #071735 48%, #0b2c67 100%);
}

.tech-hero-grid {
    position: absolute;
    inset: 0;
    opacity: .16;
    background-image:
        linear-gradient(rgba(93, 161, 255, .2) 1px, transparent 1px),
        linear-gradient(90deg, rgba(93, 161, 255, .2) 1px, transparent 1px);
    background-size: 52px 52px;
    mask-image: linear-gradient(to bottom, transparent, #000 30%, #000 75%, transparent);
}

.tech-hero-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    pointer-events: none;
}

.tech-glow-one {
    top: 10%;
    right: 5%;
    width: 350px;
    height: 350px;
    background: rgba(35, 103, 255, .26);
}

.tech-glow-two {
    bottom: -150px;
    left: 20%;
    width: 300px;
    height: 300px;
    background: rgba(25, 210, 255, .13);
}

.tech-hero .wrap {
    position: relative;
    z-index: 2;
}

.tech-hero-heading {
    max-width: 850px;
    margin: 0 auto 55px;
    text-align: center;
}

.tech-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #66dcff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2.2px;
    text-transform: uppercase;
}

.tech-eyebrow i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #53e1ff;
    box-shadow: 0 0 14px #53e1ff;
}

.tech-hero-heading h1 {
    margin: 20px 0 18px;
    font: 700 48px/1.12 "Manrope", sans-serif;
    letter-spacing: -2.3px;
}

.tech-hero-heading h1 em {
    color: #5cddff;
    font-style: normal;
}

.tech-hero-heading p {
    max-width: 700px;
    margin: auto;
    color: #aebddd;
    font-size: 16px;
    line-height: 1.75;
}

.tech-demo {
    display: grid;
    grid-template-columns: minmax(0, .85fr) 62px minmax(0, 1.15fr);
    align-items: center;
}

.tech-code-panel,
.tech-output-panel {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(114, 158, 230, .34);
    border-radius: 14px;
    background: rgba(4, 14, 38, .94);
    box-shadow: 0 35px 85px rgba(0, 0, 0, .42);
}

.tech-window-header {
    min-height: 48px;
    display: grid;
    grid-template-columns: 110px 1fr 110px;
    align-items: center;
    padding: 0 17px;
    border-bottom: 1px solid rgba(106, 144, 205, .25);
    background: #091735;
}

.tech-window-buttons {
    display: flex;
    gap: 7px;
}

.tech-window-buttons span {
    width: 9px;
    height: 9px;
    border-radius: 50%;
}

.tech-window-buttons .red {
    background: #ff6472;
}

.tech-window-buttons .yellow {
    background: #ffc95c;
}

.tech-window-buttons .green {
    background: #42d890;
}

.tech-file-name {
    color: #a9badd;
    font: 11px monospace;
    text-align: center;
}

.tech-file-name span {
    color: #58dfff;
}

.tech-code-status {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 6px;
    color: #58dfff;
    font-size: 9px;
}

.tech-code-status i,
.tech-live-badge i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #42e299;
    box-shadow: 0 0 10px #42e299;
    animation: techPulse 1.5s infinite;
}

.tech-editor {
    display: flex;
    min-height: 355px;
    padding: 24px 0;
}

.tech-line-numbers {
    width: 52px;
    padding-right: 14px;
    border-right: 1px solid rgba(94, 127, 184, .18);
    color: #445879;
    font: 12px/1.95 monospace;
    text-align: right;
    white-space: pre-line;
}

.tech-code-output {
    flex: 1;
    min-width: 0;
    margin: 0;
    padding: 0 20px;
    color: #bed1f3;
    font: 12px/1.95 monospace;
    white-space: pre-wrap;
}

.tech-code-output .code-keyword {
    color: #d777f7;
}

.tech-code-output .code-function {
    color: #55d9ff;
}

.tech-code-output .code-string {
    color: #80e9ad;
}

.tech-code-output .code-property {
    color: #79a9ff;
}

.tech-cursor {
    display: inline-block;
    width: 7px;
    height: 15px;
    margin-left: 2px;
    vertical-align: middle;
    background: #58dcff;
    animation: cursorBlink .8s steps(2) infinite;
}

.tech-terminal {
    min-height: 128px;
    border-top: 1px solid rgba(92, 129, 191, .25);
    background: #050d21;
}

.tech-terminal-top {
    display: flex;
    gap: 25px;
    padding: 12px 18px;
    border-bottom: 1px solid rgba(92, 129, 191, .16);
    color: #66799c;
    font-size: 8px;
    letter-spacing: 1px;
}

.tech-terminal-top span:first-child {
    color: #fff;
}

.tech-terminal-top b {
    padding: 2px 5px;
    color: #07132d;
    border-radius: 8px;
    background: #58dfff;
}

.tech-terminal-lines {
    padding: 10px 18px;
    font: 10px/1.5 monospace;
}

.tech-terminal-lines p {
    margin: 4px 0;
    color: #8fa3c9;
}

.terminal-arrow,
.terminal-success {
    color: #49e19c !important;
}

.terminal-folder {
    color: #59dfff;
}

.terminal-loader {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 6px;
    border: 1px solid #56ddff;
    border-right-color: transparent;
    border-radius: 50%;
    animation: techRotate .8s linear infinite;
}

.tech-connection {
    position: relative;
    height: 2px;
    background: linear-gradient(90deg, #3982ff, #57e5ff);
    box-shadow: 0 0 16px #49baff;
}

.tech-connection span {
    position: absolute;
    top: -3px;
    left: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 15px #58dfff;
    animation: dataFlow 2s linear infinite;
}

.tech-connection i {
    position: absolute;
    right: -5px;
    top: -15px;
    color: #59e3ff;
    font-size: 23px;
    font-style: normal;
}

.tech-output-panel {
    overflow: visible;
    background: rgba(7, 21, 52, .96);
}

.tech-output-topbar {
    min-height: 63px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 22px;
    border-bottom: 1px solid rgba(107, 148, 218, .25);
    background: rgba(7, 20, 49, .96);
}

.tech-output-brand {
    display: flex;
    align-items: center;
    gap: 10px;
}

.tech-output-logo {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    color: #fff;
    font: 800 17px "Manrope";
    background: linear-gradient(135deg, #2452ff, #43d5ff);
}

.tech-output-brand strong,
.tech-output-brand small {
    display: block;
}

.tech-output-brand strong {
    font: 700 11px "Manrope";
    letter-spacing: .5px;
}

.tech-output-brand small {
    margin-top: 3px;
    color: #7488ae;
    font-size: 8px;
}

.tech-live-badge {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 7px 10px;
    border: 1px solid rgba(67, 222, 153, .3);
    border-radius: 20px;
    color: #55e4a3;
    background: rgba(53, 218, 144, .08);
    font-size: 8px;
    text-transform: uppercase;
}

.tech-dashboard {
    padding: 22px;
}

.tech-dashboard-heading,
.tech-card-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.tech-dashboard-heading span,
.tech-card-heading small {
    color: #667ca5;
    font-size: 7px;
    letter-spacing: 1.3px;
}

.tech-dashboard-heading h3 {
    margin: 5px 0 0;
    font: 700 18px "Manrope";
}

.tech-ai-chip {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px 11px;
    border: 1px solid rgba(73, 135, 255, .35);
    border-radius: 7px;
    color: #73cfff;
    background: rgba(53, 103, 230, .12);
    font-size: 8px;
}

.tech-ai-chip span {
    color: #b77dff;
    font-size: 12px;
}

.tech-stat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin: 19px 0 14px;
}

.tech-stat-grid article {
    display: grid;
    grid-template-columns: 35px 1fr;
    align-items: center;
    padding: 12px;
    border: 1px solid rgba(101, 139, 201, .22);
    border-radius: 9px;
    background: rgba(14, 35, 76, .72);
}

.tech-stat-icon {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 7px;
    font-size: 13px;
}

.blue-icon {
    color: #77a7ff;
    background: rgba(63, 111, 255, .15);
}

.cyan-icon {
    color: #53e4ff;
    background: rgba(53, 218, 255, .12);
}

.purple-icon {
    color: #bd86ff;
    background: rgba(162, 94, 255, .13);
}

.tech-stat-grid small,
.tech-stat-grid strong {
    display: block;
}

.tech-stat-grid small {
    color: #778aac;
    font-size: 7px;
}

.tech-stat-grid strong {
    margin-top: 4px;
    font: 700 15px "Manrope";
}

.tech-stat-grid .positive {
    grid-column: 2;
    margin-top: 5px;
    color: #4de09c;
    font-size: 7px;
}

.tech-output-body {
    display: grid;
    grid-template-columns: 1.4fr .6fr;
    gap: 11px;
}

.tech-chart-card,
.tech-activity-card {
    min-width: 0;
    padding: 14px;
    border: 1px solid rgba(101, 139, 201, .22);
    border-radius: 9px;
    background: rgba(10, 28, 65, .76);
}

.tech-card-heading strong {
    display: block;
    margin-top: 4px;
    font-size: 10px;
}

.tech-card-heading > span {
    color: #7489af;
    font-size: 7px;
}

.tech-chart {
    position: relative;
    height: 145px;
    margin-top: 8px;
    overflow: hidden;
}

.tech-chart svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.tech-line {
    fill: none;
    stroke: #46d7ff;
    stroke-width: 3;
    stroke-linecap: round;
    filter: drop-shadow(0 0 6px #2fc8ff);
    stroke-dasharray: 800;
    stroke-dashoffset: 800;
    animation: drawTechLine 3s ease forwards infinite alternate;
}

.tech-area {
    fill: url(#techChartArea);
}

.chart-grid-line {
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background: rgba(119, 151, 207, .12);
}

.line-one {
    top: 25%;
}

.line-two {
    top: 50%;
}

.line-three {
    top: 75%;
}

.tech-chart-labels {
    display: flex;
    justify-content: space-between;
    color: #526687;
    font-size: 6px;
}

.tech-activity-list {
    margin-top: 13px;
}

.tech-activity-list > div {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 0;
    border-bottom: 1px solid rgba(101, 139, 201, .13);
}

.activity-icon {
    width: 25px;
    height: 25px;
    display: grid;
    flex: 0 0 25px;
    place-items: center;
    border-radius: 7px;
    font-size: 10px;
}

.activity-icon.success {
    color: #4ce09c;
    background: rgba(55, 217, 145, .12);
}

.activity-icon.processing {
    color: #55ddff;
    background: rgba(55, 191, 255, .12);
}

.activity-icon.deployed {
    color: #a87dff;
    background: rgba(156, 96, 255, .13);
}

.tech-activity-list p {
    margin: 0;
}

.tech-activity-list strong,
.tech-activity-list small {
    display: block;
}

.tech-activity-list strong {
    font-size: 8px;
}

.tech-activity-list small {
    margin-top: 3px;
    color: #687b9e;
    font-size: 6px;
}

.tech-security {
    display: grid;
    grid-template-columns: 28px 1fr 8px;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    padding: 10px;
    border: 1px solid rgba(64, 224, 154, .18);
    border-radius: 7px;
    background: rgba(52, 215, 143, .07);
}

.tech-security > span {
    color: #50dfa0;
}

.tech-security small,
.tech-security strong {
    display: block;
}

.tech-security small {
    color: #639879;
    font-size: 6px;
}

.tech-security strong {
    margin-top: 3px;
    font-size: 7px;
}

.tech-security i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #4be29d;
    box-shadow: 0 0 10px #4be29d;
}

.tech-floating-card {
    position: absolute;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 145px;
    padding: 11px 13px;
    border: 1px solid rgba(112, 156, 226, .36);
    border-radius: 9px;
    background: rgba(9, 26, 61, .9);
    box-shadow: 0 15px 35px rgba(0, 0, 0, .35);
    backdrop-filter: blur(12px);
}

.tech-floating-card > span {
    color: #63ddff;
}

.tech-floating-card strong,
.tech-floating-card small {
    display: block;
}

.tech-floating-card strong {
    font-size: 9px;
}

.tech-floating-card small {
    margin-top: 3px;
    color: #7185aa;
    font-size: 7px;
}

.tech-float-one {
    top: 93px;
    right: -35px;
    animation: techFloat 4s ease-in-out infinite;
}

.tech-float-two {
    bottom: 55px;
    left: -30px;
    animation: techFloat 4s ease-in-out 1s infinite;
}

.tech-hero-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 26px;
    margin-top: 50px;
}

.tech-primary-button,
.tech-secondary-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    font-size: 13px;
    font-weight: 700;
}

.tech-primary-button {
    padding: 14px 21px;
    border-radius: 8px;
    color: #fff;
    background: linear-gradient(135deg, #2856ff, #3189ff);
    box-shadow: 0 14px 30px rgba(39, 90, 255, .3);
}

.tech-secondary-button {
    color: #dce7ff;
}

@keyframes cursorBlink {
    50% {
        opacity: 0;
    }
}

@keyframes techPulse {
    50% {
        opacity: .4;
        transform: scale(.75);
    }
}

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

@keyframes dataFlow {
    from {
        left: 0;
    }

    to {
        left: calc(100% - 7px);
    }
}

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

@keyframes drawTechLine {
    to {
        stroke-dashoffset: 0;
    }
}

@media (max-width: 1050px) {
    .tech-demo {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .tech-connection {
        width: 2px;
        height: 35px;
        margin: auto;
        background: linear-gradient(#3982ff, #57e5ff);
    }

    .tech-connection i {
        right: -9px;
        top: 18px;
        transform: rotate(90deg);
    }

    .tech-connection span {
        top: 0;
        left: -3px;
        animation: verticalDataFlow 2s linear infinite;
    }

    .tech-code-panel,
    .tech-output-panel {
        width: 100%;
    }

    @keyframes verticalDataFlow {
        from {
            top: 0;
        }

        to {
            top: 28px;
        }
    }
}

@media (max-width: 700px) {
    .tech-hero {
        padding: 70px 0;
    }

    .tech-hero-heading h1 {
        font-size: 36px;
        letter-spacing: -1.7px;
    }

    .tech-hero-heading p {
        font-size: 14px;
    }

    .tech-window-header {
        grid-template-columns: 75px 1fr;
    }

    .tech-code-status {
        display: none;
    }

    .tech-editor {
        min-height: 320px;
    }

    .tech-line-numbers {
        width: 38px;
        padding-right: 8px;
    }

    .tech-code-output {
        padding: 0 12px;
        font-size: 9px;
    }

    .tech-stat-grid,
    .tech-output-body {
        grid-template-columns: 1fr;
    }

    .tech-stat-grid article {
        grid-template-columns: 35px 1fr auto;
    }

    .tech-stat-grid .positive {
        grid-column: 3;
        grid-row: 1;
    }

    .tech-floating-card {
        display: none;
    }

    .tech-hero-actions {
        align-items: stretch;
        flex-direction: column;
        text-align: center;
    }
}
/* =====================================================
   TECHNOWELL PROFESSIONAL AI HEADER
===================================================== */

.tw-topbar {
    position: relative;
    z-index: 1001;
    color: #aebcdc;
    border-bottom: 1px solid rgba(111, 151, 222, .14);
    background:
        linear-gradient(
            90deg,
            #03091c 0%,
            #071631 48%,
            #092457 100%
        );
}

.tw-topbar::after {
    position: absolute;
    right: 15%;
    bottom: 0;
    left: 15%;
    height: 1px;
    content: "";
    background: linear-gradient(
        90deg,
        transparent,
        rgba(64, 190, 255, .65),
        transparent
    );
}

.tw-topbar-inner {
    min-height: 39px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 25px;
}

.tw-topbar-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.tw-location,
.tw-top-email {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 10px;
    letter-spacing: .15px;
}

.tw-location {
    text-transform: uppercase;
}

.tw-location svg,
.tw-top-email svg {
    width: 13px;
    height: 13px;
    fill: none;
    stroke: #52dfff;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tw-top-email {
    color: #c9d6f2;
    transition: color .25s ease;
}

.tw-top-email:hover {
    color: #5de1ff;
}

.tw-top-divider {
    width: 1px;
    height: 14px;
    background: rgba(150, 175, 220, .27);
}

.tw-certification {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 5px 11px;
    color: #b8c8e8;
    border: 1px solid rgba(72, 211, 255, .16);
    border-radius: 30px;
    background: rgba(45, 130, 220, .08);
    font-size: 9px;
    letter-spacing: .2px;
}

.tw-certification > span:last-child {
    display: flex;
    align-items: center;
    gap: 7px;
}

.tw-certification i {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #52dfff;
}

.tw-certified-dot {
    position: relative;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #45e19a;
    box-shadow: 0 0 10px rgba(69, 225, 154, .8);
}

.tw-certified-dot::after {
    position: absolute;
    inset: -4px;
    content: "";
    border: 1px solid rgba(69, 225, 154, .35);
    border-radius: 50%;
    animation: twCertificationPulse 1.8s infinite;
}

/* MAIN HEADER */

.tw-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    min-height: 84px;
    overflow: visible;
    border-bottom: 1px solid rgba(18, 42, 86, .08);
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 8px 30px rgba(7, 24, 61, .05);
    backdrop-filter: blur(18px);
    transition:
        min-height .25s ease,
        box-shadow .25s ease;
}

.tw-header-glow {
    position: absolute;
    top: -60px;
    left: 50%;
    width: 420px;
    height: 120px;
    pointer-events: none;
    transform: translateX(-50%);
    border-radius: 50%;
    background: rgba(46, 125, 255, .08);
    filter: blur(45px);
}

.tw-navbar {
    position: relative;
    min-height: 84px;
    display: flex;
    align-items: center;
    gap: 30px;
}

/* LOGO */

.tw-brand {
    min-width: 225px;
    display: flex;
    align-items: center;
    gap: 13px;
}

.tw-logo-box {
    position: relative;
    width: 62px;
    height: 52px;
    display: grid;
    place-items: center;
    overflow: hidden;
}

.tw-logo-box::before {
    position: absolute;
    inset: 4px;
    content: "";
    opacity: .22;
    border-radius: 50%;
    background: #2d7bff;
    filter: blur(13px);
}

.tw-logo-box img {
    position: relative;
    z-index: 2;
    width: 100%;
    max-height: 52px;
    display: block;
    object-fit: contain;
}

.tw-brand-copy {
    display: flex;
    flex-direction: column;
}

.tw-brand-copy strong {
    color: #071633;
    font: 800 17px/1 "Manrope", sans-serif;
    letter-spacing: -.3px;
    text-transform: uppercase;
}

.tw-brand-copy small {
    margin-top: 5px;
    color: #62728e;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 2.2px;
    text-transform: uppercase;
}

/* NAVIGATION */

.tw-navigation {
    display: flex;
    align-items: center;
    gap: 3px;
    margin-left: auto;
}

.tw-navigation > a,
.tw-dropdown-trigger {
    position: relative;
    min-height: 84px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0 11px;
    color: #32415e;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    transition: color .25s ease;
}

.tw-navigation > a::after,
.tw-dropdown-trigger::after {
    position: absolute;
    right: 50%;
    bottom: 0;
    left: 50%;
    height: 3px;
    content: "";
    border-radius: 5px 5px 0 0;
    background: linear-gradient(90deg, #2855ff, #3bd8ff);
    transition:
        right .25s ease,
        left .25s ease;
}

.tw-navigation > a:hover,
.tw-navigation > a.active,
.tw-dropdown-trigger:hover,
.tw-dropdown-trigger.active {
    color: #2454ee;
}

.tw-navigation > a:hover::after,
.tw-navigation > a.active::after,
.tw-dropdown-trigger:hover::after,
.tw-dropdown-trigger.active::after {
    right: 11px;
    left: 11px;
}

.tw-dropdown-trigger svg {
    width: 13px;
    height: 13px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    transition: transform .25s ease;
}

.tw-dropdown:hover .tw-dropdown-trigger svg {
    transform: rotate(180deg);
}

/* SERVICES DROPDOWN */

.tw-dropdown {
    position: relative;
}

.tw-dropdown-menu {
    position: absolute;
    top: calc(100% - 7px);
    left: 50%;
    width: 450px;
    padding: 12px;
    visibility: hidden;
    opacity: 0;
    border: 1px solid rgba(24, 63, 124, .1);
    border-radius: 14px;
    background: rgba(255, 255, 255, .98);
    box-shadow: 0 28px 65px rgba(5, 21, 57, .18);
    transform: translate(-50%, 13px);
    backdrop-filter: blur(20px);
    transition:
        opacity .22s ease,
        visibility .22s ease,
        transform .22s ease;
}

.tw-dropdown:hover .tw-dropdown-menu {
    visibility: visible;
    opacity: 1;
    transform: translate(-50%, 0);
}

.tw-dropdown-heading {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 7px;
    padding: 11px 12px 15px;
    border-bottom: 1px solid #e9edf5;
}

.tw-ai-symbol {
    width: 37px;
    height: 37px;
    display: grid;
    place-items: center;
    color: #fff;
    border-radius: 10px;
    background: linear-gradient(135deg, #2755ff, #39cfff);
    box-shadow: 0 9px 20px rgba(39, 85, 255, .22);
}

.tw-dropdown-heading strong,
.tw-dropdown-heading small {
    display: block;
}

.tw-dropdown-heading strong {
    color: #0b1935;
    font: 700 13px "Manrope", sans-serif;
}

.tw-dropdown-heading small {
    margin-top: 3px;
    color: #77849b;
    font-size: 9px;
}

.tw-dropdown-menu > a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px;
    border-radius: 9px;
    transition:
        background .2s ease,
        transform .2s ease;
}

.tw-dropdown-menu > a:hover {
    background: #f3f7ff;
    transform: translateX(3px);
}

.tw-dropdown-menu > a > span:last-child strong,
.tw-dropdown-menu > a > span:last-child small {
    display: block;
}

.tw-dropdown-menu > a > span:last-child strong {
    color: #172642;
    font-size: 11px;
}

.tw-dropdown-menu > a > span:last-child small {
    margin-top: 3px;
    color: #7c899e;
    font-size: 8px;
}

.tw-menu-icon {
    width: 35px;
    height: 35px;
    display: grid;
    flex: 0 0 35px;
    place-items: center;
    border-radius: 9px;
}

.tw-menu-icon svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tw-menu-icon.blue {
    color: #3d6fff;
    background: #edf2ff;
}

.tw-menu-icon.cyan {
    color: #00aaca;
    background: #e6fbff;
}

.tw-menu-icon.purple {
    color: #8c56e9;
    background: #f3edff;
}

.tw-menu-icon.green {
    color: #13a971;
    background: #e8fbf3;
}

.tw-dropdown-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 7px;
    padding: 12px;
    border-radius: 8px;
    background: linear-gradient(100deg, #eef3ff, #effcff);
    font-size: 9px;
}

.tw-dropdown-footer > span {
    color: #697891;
}

.tw-dropdown-footer > a {
    color: #2655ee;
    font-weight: 700;
}

/* HIRING BADGE */

.tw-hiring-badge {
    position: absolute;
    top: 13px;
    right: 2px;
    padding: 2px 5px;
    color: #087a4e;
    border-radius: 8px;
    background: #dff9ed;
    font-size: 6px;
    letter-spacing: .4px;
    text-transform: uppercase;
}

/* HEADER ACTIONS */

.tw-header-actions {
    display: flex;
    align-items: center;
    gap: 14px;
}

.tw-ai-status {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-right: 14px;
    border-right: 1px solid #e0e6ef;
}

.tw-ai-status-icon {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    color: #3867ff;
    border: 1px solid #dce5ff;
    border-radius: 50%;
    background: #f2f6ff;
    animation: twAiGlow 2.5s ease-in-out infinite;
}

.tw-ai-status small,
.tw-ai-status strong {
    display: block;
}

.tw-ai-status small {
    color: #8994a8;
    font-size: 6px;
    letter-spacing: .5px;
    text-transform: uppercase;
}

.tw-ai-status strong {
    margin-top: 2px;
    color: #213252;
    font-size: 9px;
}

.tw-project-button {
    position: relative;
    min-height: 43px;
    display: inline-flex;
    align-items: center;
    gap: 11px;
    overflow: hidden;
    padding: 0 17px;
    color: #fff;
    border-radius: 9px;
    background: linear-gradient(135deg, #2453f3, #297cff);
    box-shadow: 0 12px 26px rgba(37, 88, 255, .25);
    font-size: 11px;
    font-weight: 700;
    transition:
        transform .2s ease,
        box-shadow .2s ease;
}

.tw-project-button::before {
    position: absolute;
    top: 0;
    left: -100%;
    width: 80%;
    height: 100%;
    content: "";
    transform: skewX(-20deg);
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, .27),
        transparent
    );
    transition: left .5s ease;
}

.tw-project-button:hover {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 16px 32px rgba(37, 88, 255, .34);
}

.tw-project-button:hover::before {
    left: 130%;
}

.tw-project-button svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tw-project-button i {
    position: absolute;
    right: 7px;
    bottom: 6px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #63e1ff;
    box-shadow: 0 0 9px #63e1ff;
}

/* MOBILE MENU */

.tw-mobile-menu {
    position: relative;
    display: none;
    margin-left: auto;
}

.tw-mobile-menu summary {
    width: 42px;
    height: 42px;
    display: grid;
    place-content: center;
    gap: 5px;
    cursor: pointer;
    list-style: none;
    border: 1px solid #e2e8f2;
    border-radius: 9px;
    background: #f7f9fd;
}

.tw-mobile-menu summary::-webkit-details-marker {
    display: none;
}

.tw-mobile-menu summary span {
    width: 18px;
    height: 2px;
    display: block;
    border-radius: 4px;
    background: #172745;
    transition: transform .2s ease;
}

.tw-mobile-menu[open] summary span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.tw-mobile-menu[open] summary span:nth-child(2) {
    opacity: 0;
}

.tw-mobile-menu[open] summary span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

.tw-mobile-dropdown {
    position: absolute;
    top: 53px;
    right: 0;
    width: min(330px, calc(100vw - 30px));
    padding: 15px;
    border: 1px solid #e5eaf3;
    border-radius: 14px;
    background: rgba(255, 255, 255, .98);
    box-shadow: 0 25px 60px rgba(5, 20, 51, .22);
    backdrop-filter: blur(20px);
}

.tw-mobile-heading {
    padding: 6px 9px 14px;
    border-bottom: 1px solid #e9edf4;
}

.tw-mobile-heading span,
.tw-mobile-heading small {
    display: block;
}

.tw-mobile-heading span {
    color: #122241;
    font-weight: 700;
}

.tw-mobile-heading small {
    margin-top: 3px;
    color: #7d899e;
    font-size: 9px;
}

.tw-mobile-dropdown > a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 9px;
    color: #263754;
    border-bottom: 1px solid #edf0f5;
    font-size: 12px;
    font-weight: 600;
}

.tw-mobile-dropdown > a span {
    color: #3670f3;
}

.tw-mobile-dropdown > a small {
    padding: 3px 7px;
    color: #087a4e;
    border-radius: 10px;
    background: #dff9ed;
    font-size: 7px;
}

.tw-mobile-dropdown .tw-mobile-project-button {
    justify-content: center;
    gap: 13px;
    margin-top: 12px;
    color: #fff;
    border: 0;
    border-radius: 8px;
    background: linear-gradient(135deg, #2655f4, #2c86ff);
}

/* ANIMATIONS */

@keyframes twCertificationPulse {
    50% {
        opacity: 0;
        transform: scale(1.4);
    }
}

@keyframes twAiGlow {
    50% {
        color: #fff;
        background: #3867ff;
        box-shadow: 0 0 18px rgba(56, 103, 255, .4);
    }
}

/* RESPONSIVE */

@media (max-width: 1180px) {
    .tw-ai-status {
        display: none;
    }

    .tw-navigation > a,
    .tw-dropdown-trigger {
        padding-right: 8px;
        padding-left: 8px;
    }
}

@media (max-width: 980px) {
    .tw-topbar-inner {
        min-height: 43px;
    }

    .tw-certification {
        display: none;
    }

    .tw-navigation,
    .tw-header-actions {
        display: none;
    }

    .tw-mobile-menu {
        display: block;
    }

    .tw-brand {
        margin-right: auto;
    }
}

@media (max-width: 600px) {
    .tw-topbar-inner {
        justify-content: center;
    }

    .tw-location,
    .tw-top-divider {
        display: none;
    }

    .tw-header,
    .tw-navbar {
        min-height: 72px;
    }

    .tw-brand {
        min-width: 0;
    }

    .tw-logo-box {
        width: 54px;
        height: 45px;
    }

    .tw-brand-copy strong {
        font-size: 14px;
    }

    .tw-brand-copy small {
        font-size: 7px;
        letter-spacing: 1.5px;
    }
}
/* =====================================================
   INTEGRATED DYNAMIC SERVICES EXPERIENCE
===================================================== */

.tw-services-experience {
    position: relative;
    z-index: 3;
    padding-top: 32px;
    padding-bottom: 10px;
}

/* SECTION HEADING */

.tw-services-heading {
    display: grid;
    grid-template-columns: 1.2fr .8fr;
    align-items: end;
    gap: 100px;
    margin-bottom: 48px;
}

.tw-services-kicker {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 19px;
    color: #2a5be8;
    font-size: 9px;
    letter-spacing: 1.8px;
    text-transform: uppercase;
}

.tw-services-kicker > span {
    width: 29px;
    height: 29px;
    display: grid;
    place-items: center;
    color: #fff;
    border-radius: 50%;
    background: #2758ef;
    box-shadow: 0 8px 20px rgba(39, 88, 239, .22);
    font: 700 9px monospace;
}

.tw-services-kicker i {
    width: 37px;
    height: 1px;
    background: linear-gradient(90deg, #2758ef, transparent);
}

.tw-services-kicker strong {
    font-size: 9px;
}

.tw-services-heading h2 {
    max-width: 660px;
    margin: 0;
    color: #091734;
    font: 700 44px/1.12 "Manrope", sans-serif;
    letter-spacing: -2.3px;
}

.tw-services-heading h2 span {
    display: block;
    color: #2758ef;
}

.tw-services-heading-right {
    padding-left: 30px;
    border-left: 1px solid rgba(32, 68, 133, .14);
}

.tw-services-heading-right p {
    margin: 0 0 20px;
    color: #6f7c93;
    font-size: 13px;
    line-height: 1.75;
}

.tw-services-heading-right > a {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: #152745;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
}

.tw-services-heading-right > a > span {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    color: #fff;
    border-radius: 50%;
    background: #0a1835;
    transition:
        background .25s ease,
        transform .25s ease;
}

.tw-services-heading-right svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tw-services-heading-right > a:hover > span {
    background: #2758ef;
    transform: rotate(45deg);
}

/* SERVICE NETWORK */

.tw-service-network {
    position: relative;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 14px;
}

.tw-service-network-line {
    position: absolute;
    top: 50%;
    right: 5%;
    left: 5%;
    height: 1px;
    opacity: .55;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(41, 94, 221, .32),
        rgba(62, 206, 245, .4),
        transparent
    );
}

/* DYNAMIC CARDS */

.tw-dynamic-service {
    position: relative;
    z-index: 2;
    grid-column: span 4;
    min-height: 445px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 24px;
    border: 1px solid rgba(27, 60, 121, .11);
    border-radius: 15px;
    background:
        radial-gradient(
            circle at 85% 10%,
            rgba(45, 100, 245, .08),
            transparent 28%
        ),
        rgba(255, 255, 255, .9);
    box-shadow: 0 18px 48px rgba(17, 43, 94, .065);
    transition:
        transform .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;
}

.tw-dynamic-service:nth-of-type(even) {
    margin-top: 36px;
}

.tw-dynamic-service:hover {
    border-color: rgba(38, 87, 232, .28);
    box-shadow: 0 30px 65px rgba(21, 53, 126, .13);
    transform: translateY(-10px);
}

.tw-featured-service {
    color: #fff;
    border-color: rgba(73, 131, 239, .25);
    background:
        radial-gradient(
            circle at 80% 10%,
            rgba(74, 214, 255, .24),
            transparent 30%
        ),
        linear-gradient(145deg, #071632, #123a84);
    box-shadow: 0 24px 60px rgba(8, 31, 79, .22);
}

/* CARD TOP */

.tw-service-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.tw-service-index {
    color: #8d9bb1;
    font: 700 10px monospace;
}

.tw-featured-service .tw-service-index {
    color: #7ecff0;
}

.tw-service-status {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #8a97ab;
    font-size: 6px;
    font-weight: 800;
    letter-spacing: .8px;
    text-transform: uppercase;
}

.tw-service-status > span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #3dda91;
    box-shadow: 0 0 9px rgba(61, 218, 145, .7);
}

.tw-featured-service .tw-service-status {
    color: #89b7d3;
}

/* SERVICE VISUAL */

.tw-service-visual {
    position: relative;
    height: 145px;
    display: grid;
    place-items: center;
    margin: 22px 0 18px;
    overflow: hidden;
    border: 1px solid rgba(40, 80, 151, .08);
    border-radius: 12px;
    background:
        linear-gradient(rgba(34, 79, 159, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(34, 79, 159, .045) 1px, transparent 1px),
        linear-gradient(135deg, #f7faff, #f0f5ff);
    background-size: 23px 23px, 23px 23px, auto;
}

.tw-featured-service .tw-service-visual {
    border-color: rgba(106, 171, 237, .16);
    background:
        linear-gradient(rgba(106, 174, 239, .08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(106, 174, 239, .08) 1px, transparent 1px),
        rgba(7, 24, 59, .52);
    background-size: 23px 23px;
}

.tw-service-orbit {
    position: absolute;
    width: 110px;
    height: 110px;
    border: 1px solid rgba(48, 96, 200, .13);
    border-radius: 50%;
    animation: twServiceRotate 14s linear infinite;
}

.tw-service-orbit::before {
    position: absolute;
    inset: 13px;
    content: "";
    border: 1px dashed rgba(48, 96, 200, .18);
    border-radius: 50%;
}

.tw-service-orbit span {
    position: absolute;
    width: 7px;
    height: 7px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: #3167ed;
    box-shadow: 0 0 10px rgba(49, 103, 237, .55);
}

.tw-service-orbit span:nth-child(1) {
    top: 7px;
    left: 23px;
}

.tw-service-orbit span:nth-child(2) {
    right: -2px;
    bottom: 37px;
    background: #42d2ee;
}

.tw-service-orbit span:nth-child(3) {
    bottom: 5px;
    left: 24px;
    background: #9669e8;
}

.tw-service-visual-core {
    position: relative;
    z-index: 3;
    width: 59px;
    height: 59px;
    display: grid;
    place-items: center;
    color: #fff;
    border-radius: 17px;
    background: linear-gradient(135deg, #2858ed, #3c9aff);
    box-shadow:
        0 15px 28px rgba(39, 89, 234, .24),
        inset 0 0 17px rgba(255, 255, 255, .16);
    transform: rotate(-5deg);
    transition: transform .35s ease;
}

.tw-dynamic-service:hover .tw-service-visual-core {
    transform: rotate(5deg) scale(1.06);
}

.tw-service-visual-core svg {
    width: 25px;
    height: 25px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tw-service-signal {
    position: absolute;
    right: 15px;
    bottom: 13px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.tw-service-signal span {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #3fd999;
    box-shadow: 0 0 8px rgba(63, 217, 153, .7);
}

.tw-service-signal small {
    color: #8899b3;
    font: 700 6px monospace;
}

/* DYNAMIC CONTENT */

.tw-service-category {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #3765db;
    font-size: 6px;
    font-weight: 800;
    letter-spacing: 1.2px;
}

.tw-service-category i {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #49cdea;
}

.tw-featured-service .tw-service-category {
    color: #65d9f2;
}

.tw-service-content h3 {
    margin: 11px 0 10px;
    color: #12213c;
    font: 700 18px/1.35 "Manrope", sans-serif;
    letter-spacing: -.4px;
}

.tw-featured-service .tw-service-content h3 {
    color: #fff;
}

.tw-service-content p {
    display: -webkit-box;
    overflow: hidden;
    margin: 0;
    color: #738098;
    font-size: 11px;
    line-height: 1.75;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.tw-featured-service .tw-service-content p {
    color: #a8b9d7;
}

/* CARD FOOTER */

.tw-service-card-footer {
    margin-top: auto;
    padding-top: 22px;
}

.tw-service-progress {
    margin-bottom: 17px;
}

.tw-service-progress > span {
    height: 3px;
    display: block;
    overflow: hidden;
    border-radius: 5px;
    background: #e9edf4;
}

.tw-featured-service .tw-service-progress > span {
    background: rgba(255, 255, 255, .11);
}

.tw-service-progress > span i {
    height: 100%;
    display: block;
    border-radius: inherit;
    background: linear-gradient(90deg, #2858ef, #45d5f0);
    transition: width .8s ease;
}

.tw-service-progress small {
    display: block;
    margin-top: 7px;
    color: #98a3b5;
    font-size: 6px;
    letter-spacing: .5px;
    text-transform: uppercase;
}

.tw-featured-service .tw-service-progress small {
    color: #708db5;
}

.tw-service-card-footer > a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #1b2d4d;
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
}

.tw-featured-service .tw-service-card-footer > a {
    color: #fff;
}

.tw-service-card-footer > a > i {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    color: #fff;
    border-radius: 50%;
    background: #0a1834;
    transition:
        background .25s ease,
        transform .25s ease;
}

.tw-featured-service .tw-service-card-footer > a > i {
    color: #12346f;
    background: #59dafa;
}

.tw-service-card-footer > a:hover > i {
    background: #2758ef;
    transform: rotate(45deg);
}

.tw-service-card-footer svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* DECORATIVE CORNERS */

.tw-corner {
    position: absolute;
    width: 17px;
    height: 17px;
    pointer-events: none;
}

.tw-corner-top {
    top: 9px;
    left: 9px;
    border-top: 1px solid rgba(45, 91, 205, .26);
    border-left: 1px solid rgba(45, 91, 205, .26);
}

.tw-corner-bottom {
    right: 9px;
    bottom: 9px;
    border-right: 1px solid rgba(45, 91, 205, .26);
    border-bottom: 1px solid rgba(45, 91, 205, .26);
}

/* CONNECTED OUTCOME */

.tw-connected-outcome {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 35px;
    margin-top: 40px;
    padding: 22px 25px;
    color: #fff;
    border-radius: 13px;
    background:
        radial-gradient(
            circle at 80% 20%,
            rgba(65, 210, 255, .2),
            transparent 27%
        ),
        linear-gradient(110deg, #071632, #123a82);
    box-shadow: 0 20px 45px rgba(8, 31, 78, .17);
}

.tw-outcome-label {
    display: flex;
    align-items: center;
    gap: 12px;
}

.tw-outcome-pulse {
    position: relative;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #47dda0;
    box-shadow: 0 0 12px rgba(71, 221, 160, .7);
}

.tw-outcome-pulse::after {
    position: absolute;
    inset: -5px;
    content: "";
    border: 1px solid rgba(71, 221, 160, .4);
    border-radius: 50%;
    animation: twServicePulse 2s infinite;
}

.tw-outcome-label small,
.tw-outcome-label strong {
    display: block;
}

.tw-outcome-label small {
    color: #68c9e7;
    font-size: 6px;
    letter-spacing: 1.3px;
}

.tw-outcome-label strong {
    margin-top: 4px;
    font-size: 10px;
}

.tw-outcome-flow {
    display: flex;
    align-items: center;
    gap: 10px;
}

.tw-outcome-flow span {
    color: #c5d4ec;
    font-size: 8px;
    font-weight: 700;
}

.tw-outcome-flow i {
    color: #4cd5f3;
    font-style: normal;
}

.tw-connected-outcome > a {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 11px 15px;
    color: #153168;
    border-radius: 7px;
    background: #fff;
    font-size: 8px;
    font-weight: 800;
    text-transform: uppercase;
}

.tw-connected-outcome > a > span {
    color: #2758ef;
    font-size: 14px;
}

/* EMPTY STATE */

.tw-services-empty {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    min-height: 180px;
    padding: 35px;
    border: 1px dashed #cdd7ea;
    border-radius: 14px;
    background: rgba(255, 255, 255, .65);
    text-align: left;
}

.tw-services-empty > span {
    width: 45px;
    height: 45px;
    display: grid;
    place-items: center;
    color: #fff;
    border-radius: 12px;
    background: #2758ef;
}

.tw-services-empty strong {
    color: #172542;
}

.tw-services-empty p {
    margin: 5px 0 0;
    color: #7a879c;
    font-size: 11px;
}

/* ANIMATIONS */

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

@keyframes twServicePulse {
    from {
        opacity: .8;
        transform: scale(.8);
    }

    to {
        opacity: 0;
        transform: scale(1.5);
    }
}

/* RESPONSIVE */

@media (max-width: 1050px) {
    .tw-services-heading {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .tw-services-heading-right {
        max-width: 600px;
        padding-left: 0;
        border-left: 0;
    }

    .tw-dynamic-service {
        grid-column: span 6;
    }

    .tw-connected-outcome {
        grid-template-columns: 1fr auto;
    }

    .tw-outcome-flow {
        grid-row: 2;
        grid-column: 1 / -1;
    }
}

@media (max-width: 700px) {
    .tw-services-experience {
        padding-top: 75px;
    }

    .tw-services-heading h2 {
        font-size: 34px;
        letter-spacing: -1.6px;
    }

    .tw-service-network {
        grid-template-columns: 1fr;
    }

    .tw-dynamic-service {
        grid-column: auto;
        min-height: 420px;
    }

    .tw-dynamic-service:nth-of-type(even) {
        margin-top: 0;
    }

    .tw-connected-outcome {
        grid-template-columns: 1fr;
        align-items: flex-start;
    }

    .tw-outcome-flow {
        grid-row: auto;
        grid-column: auto;
        flex-wrap: wrap;
    }

    .tw-connected-outcome > a {
        justify-content: center;
    }
}
/* =====================================================
   CREATIVE PROJECT SHOWCASE
===================================================== */

.tw-project-showcase {
    position: relative;
    overflow: hidden;
    padding: 115px 0 80px;
    color: #fff;
    background:
        radial-gradient(
            circle at 80% 14%,
            rgba(38, 101, 224, .26),
            transparent 26%
        ),
        radial-gradient(
            circle at 15% 80%,
            rgba(41, 213, 235, .09),
            transparent 26%
        ),
        linear-gradient(140deg, #03091b 0%, #071531 52%, #0a2655 100%);
}

.tw-project-background-grid {
    position: absolute;
    inset: 0;
    opacity: .17;
    background-image:
        linear-gradient(rgba(92, 150, 235, .16) 1px, transparent 1px),
        linear-gradient(90deg, rgba(92, 150, 235, .16) 1px, transparent 1px);
    background-size: 55px 55px;
    mask-image: linear-gradient(
        to bottom,
        transparent,
        #000 15%,
        #000 85%,
        transparent
    );
}

.tw-project-glow {
    position: absolute;
    top: 10%;
    right: 5%;
    width: 380px;
    height: 380px;
    border-radius: 50%;
    background: rgba(41, 104, 239, .15);
    filter: blur(90px);
}

.tw-project-showcase-inner {
    position: relative;
    z-index: 2;
}

/* HEADING */

.tw-project-heading {
    display: grid;
    grid-template-columns: 1.2fr .8fr;
    align-items: end;
    gap: 100px;
    margin-bottom: 53px;
}

.tw-project-kicker {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 19px;
    color: #64dafa;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.tw-project-kicker i {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #607ba7;
}

.tw-project-live-dot {
    position: relative;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #48dfa0;
    box-shadow: 0 0 11px rgba(72, 223, 160, .7);
}

.tw-project-live-dot::after {
    position: absolute;
    inset: -4px;
    content: "";
    border: 1px solid rgba(72, 223, 160, .4);
    border-radius: 50%;
    animation: twProjectPulse 2s infinite;
}

.tw-project-heading h2 {
    max-width: 750px;
    margin: 0;
    color: #fff;
    font: 700 45px/1.13 "Manrope", sans-serif;
    letter-spacing: -2.3px;
}

.tw-project-heading h2 span {
    display: block;
    color: #5bddfa;
}

.tw-project-heading-right {
    padding-left: 30px;
    border-left: 1px solid rgba(126, 163, 220, .2);
}

.tw-project-heading-right p {
    margin: 0 0 20px;
    color: #9eafd0;
    font-size: 13px;
    line-height: 1.75;
}

.tw-project-heading-right > a {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
}

.tw-project-heading-right > a > span {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    color: #082352;
    border-radius: 50%;
    background: #5cdcf8;
    transition: transform .25s ease;
}

.tw-project-heading-right > a:hover > span {
    transform: rotate(45deg);
}

.tw-project-heading-right svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* PROJECT GRID */

.tw-project-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 23px;
}

.tw-project-card {
    grid-column: span 6;
    overflow: hidden;
    border: 1px solid rgba(104, 150, 218, .24);
    border-radius: 16px;
    background: rgba(6, 20, 48, .73);
    box-shadow: 0 28px 65px rgba(0, 0, 0, .2);
    backdrop-filter: blur(15px);
    transition:
        border-color .35s ease,
        box-shadow .35s ease,
        transform .35s ease;
}

.tw-project-card:hover {
    border-color: rgba(76, 208, 245, .5);
    box-shadow: 0 35px 75px rgba(0, 0, 0, .32);
    transform: translateY(-9px);
}

/* Make the first featured project larger */

.tw-project-card:first-child {
    grid-column: span 7;
}

.tw-project-card:nth-child(2) {
    grid-column: span 5;
}

.tw-project-card:nth-child(3),
.tw-project-card:nth-child(4) {
    grid-column: span 6;
}

/* PROJECT IMAGE */

.tw-project-image {
    position: relative;
    height: 330px;
    display: block;
    overflow: hidden;
    background: #0b285e;
}

.tw-project-card:nth-child(2) .tw-project-image {
    height: 330px;
}

.tw-project-image > img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition:
        transform .7s cubic-bezier(.2, .7, .2, 1),
        filter .5s ease;
}

.tw-project-card:hover .tw-project-image > img {
    filter: saturate(1.08) contrast(1.03);
    transform: scale(1.055);
}

.tw-project-image-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            to bottom,
            rgba(4, 12, 31, .18),
            transparent 35%,
            rgba(4, 13, 34, .84) 100%
        );
}

.tw-project-image-top,
.tw-project-image-bottom {
    position: absolute;
    z-index: 4;
    right: 20px;
    left: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.tw-project-image-top {
    top: 18px;
}

.tw-project-image-top > span:first-child {
    padding: 7px 9px;
    color: #dceaff;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 30px;
    background: rgba(5, 17, 44, .5);
    backdrop-filter: blur(10px);
    font: 700 7px monospace;
    letter-spacing: 1px;
}

.tw-project-status {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 9px;
    color: #71ebb2;
    border: 1px solid rgba(88, 228, 166, .2);
    border-radius: 30px;
    background: rgba(5, 34, 42, .54);
    backdrop-filter: blur(10px);
    font-size: 7px;
    font-weight: 800;
    text-transform: uppercase;
}

.tw-project-status i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #52e4a4;
    box-shadow: 0 0 9px #52e4a4;
}

.tw-project-image-bottom {
    bottom: 19px;
}

.tw-project-image-bottom small,
.tw-project-image-bottom > div > span {
    display: block;
}

.tw-project-image-bottom small {
    color: #65dcf7;
    font-size: 7px;
    font-weight: 800;
    letter-spacing: 1.3px;
    text-transform: uppercase;
}

.tw-project-image-bottom > div > span {
    margin-top: 5px;
    color: #d5e1f5;
    font-size: 8px;
}

.tw-project-open {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    color: #102f65;
    border-radius: 50%;
    background: #fff;
    transform: scale(.85);
    transition:
        color .25s ease,
        background .25s ease,
        transform .25s ease;
}

.tw-project-open svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tw-project-card:hover .tw-project-open {
    color: #0a2c65;
    background: #59dcf8;
    transform: scale(1) rotate(45deg);
}

/* SCANNING ANIMATION */

.tw-project-scan {
    position: absolute;
    z-index: 3;
    top: -60px;
    right: 0;
    left: 0;
    height: 50px;
    opacity: 0;
    background: linear-gradient(
        transparent,
        rgba(79, 217, 251, .2),
        transparent
    );
}

.tw-project-card:hover .tw-project-scan {
    opacity: 1;
    animation: twProjectScan 2.2s linear infinite;
}

/* FALLBACK PLACEHOLDER */

.tw-project-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    gap: 20px;
    padding: 30px;
    background:
        radial-gradient(
            circle at 75% 20%,
            rgba(76, 215, 255, .26),
            transparent 30%
        ),
        linear-gradient(135deg, #133981, #2764dd);
}

.tw-placeholder-grid {
    position: absolute;
    inset: 0;
    opacity: .22;
    background-image:
        linear-gradient(rgba(255, 255, 255, .16) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .16) 1px, transparent 1px);
    background-size: 34px 34px;
}

.tw-placeholder-logo {
    position: relative;
    z-index: 2;
    width: 57px;
    height: 57px;
    display: grid;
    flex: 0 0 57px;
    place-items: center;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 15px;
    background: rgba(255, 255, 255, .12);
    font: 800 26px "Manrope", sans-serif;
    backdrop-filter: blur(12px);
}

.tw-project-placeholder > div:last-child {
    position: relative;
    z-index: 2;
}

.tw-project-placeholder small,
.tw-project-placeholder strong {
    display: block;
}

.tw-project-placeholder small {
    color: #9fe8fa;
    font-size: 7px;
    letter-spacing: 1.5px;
}

.tw-project-placeholder strong {
    max-width: 350px;
    margin-top: 7px;
    color: #fff;
    font: 700 20px/1.3 "Manrope", sans-serif;
}

/* PROJECT INFORMATION */

.tw-project-information {
    padding: 25px;
}

.tw-project-title-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
}

.tw-project-title-row > div > span {
    color: #5bd9f5;
    font-size: 7px;
    font-weight: 800;
    letter-spacing: 1.3px;
}

.tw-project-title-row h3 {
    margin: 8px 0 0;
    color: #fff;
    font: 700 19px/1.35 "Manrope", sans-serif;
    letter-spacing: -.4px;
}

.tw-project-number {
    color: rgba(169, 192, 229, .3);
    font: 700 29px "Manrope", sans-serif;
}

.tw-project-information > p {
    min-height: 46px;
    margin: 13px 0 20px;
    color: #95a8c8;
    font-size: 11px;
    line-height: 1.75;
}

.tw-project-footer {
    display: flex;
    justify-content: space-between;
    align-items: end;
    padding-top: 17px;
    border-top: 1px solid rgba(114, 151, 209, .13);
}

.tw-project-impact small {
    display: block;
    margin-bottom: 7px;
    color: #5b7196;
    font-size: 6px;
    letter-spacing: 1.1px;
}

.tw-project-impact > div {
    display: flex;
    align-items: end;
    gap: 3px;
    height: 20px;
}

.tw-project-impact > div span {
    width: 5px;
    border-radius: 2px;
    background: linear-gradient(#55dcf7, #346ce8);
}

.tw-project-impact > div span:nth-child(1) {
    height: 7px;
}

.tw-project-impact > div span:nth-child(2) {
    height: 12px;
}

.tw-project-impact > div span:nth-child(3) {
    height: 9px;
}

.tw-project-impact > div span:nth-child(4) {
    height: 16px;
}

.tw-project-impact > div span:nth-child(5) {
    height: 20px;
}

.tw-project-footer > a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    font-size: 8px;
    font-weight: 800;
    text-transform: uppercase;
}

.tw-project-footer > a > span {
    color: #5bdcf7;
    font-size: 14px;
    transition: transform .25s ease;
}

.tw-project-footer > a:hover > span {
    transform: translate(4px, -4px);
}

/* FINAL STATEMENT */

.tw-project-statement {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 35px;
    margin-top: 45px;
    padding: 24px 27px;
    border: 1px solid rgba(95, 143, 216, .18);
    border-radius: 13px;
    background: rgba(8, 25, 59, .63);
    backdrop-filter: blur(15px);
}

.tw-statement-code {
    color: #58dbf7;
    font: 700 8px monospace;
    letter-spacing: 1px;
}

.tw-project-statement p {
    margin: 0;
    color: #9bacca;
    font-size: 11px;
}

.tw-project-statement p strong {
    color: #fff;
}

.tw-project-statement > a {
    display: inline-flex;
    align-items: center;
    gap: 13px;
    padding: 11px 15px;
    color: #0a285b;
    border-radius: 7px;
    background: #fff;
    font-size: 8px;
    font-weight: 800;
    text-transform: uppercase;
}

/* EMPTY STATE */

.tw-project-empty {
    grid-column: 1 / -1;
    min-height: 220px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 17px;
    border: 1px dashed rgba(109, 159, 226, .35);
    border-radius: 15px;
    background: rgba(8, 27, 64, .5);
}

.tw-project-empty > span {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    color: #0a2a5c;
    border-radius: 13px;
    background: #58daf7;
}

.tw-project-empty strong {
    color: #fff;
}

.tw-project-empty p {
    margin: 5px 0 0;
    color: #869aba;
    font-size: 11px;
}

/* ANIMATIONS */

@keyframes twProjectPulse {
    from {
        opacity: .9;
        transform: scale(.8);
    }

    to {
        opacity: 0;
        transform: scale(1.6);
    }
}

@keyframes twProjectScan {
    from {
        top: -60px;
    }

    to {
        top: calc(100% + 60px);
    }
}

/* RESPONSIVE */

@media (max-width: 950px) {
    .tw-project-heading {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .tw-project-heading-right {
        max-width: 620px;
        padding-left: 0;
        border-left: 0;
    }

    .tw-project-card,
    .tw-project-card:first-child,
    .tw-project-card:nth-child(2),
    .tw-project-card:nth-child(3),
    .tw-project-card:nth-child(4) {
        grid-column: span 6;
    }

    .tw-project-image {
        height: 290px;
    }

    .tw-project-statement {
        grid-template-columns: 1fr auto;
    }

    .tw-project-statement p {
        grid-row: 2;
        grid-column: 1 / -1;
    }
}

@media (max-width: 700px) {
    .tw-project-showcase {
        padding: 80px 0 65px;
    }

    .tw-project-heading h2 {
        font-size: 34px;
        letter-spacing: -1.6px;
    }

    .tw-project-grid {
        grid-template-columns: 1fr;
    }

    .tw-project-card,
    .tw-project-card:first-child,
    .tw-project-card:nth-child(2),
    .tw-project-card:nth-child(3),
    .tw-project-card:nth-child(4) {
        grid-column: auto;
    }

    .tw-project-image,
    .tw-project-card:nth-child(2) .tw-project-image {
        height: 260px;
    }

    .tw-project-statement {
        grid-template-columns: 1fr;
        gap: 17px;
    }

    .tw-project-statement p {
        grid-row: auto;
        grid-column: auto;
    }

    .tw-project-statement > a {
        justify-content: center;
    }
}
/* =====================================================
   NEXUS FULL-WIDTH FOOTER
===================================================== */

footer.nexus-footer {
    position: relative;
    isolation: isolate;
    width: 100%;
    max-width: none;
    overflow: hidden;
    margin: 0;
    padding: 0;
    color: #a8b7cf;
    background:
        radial-gradient(circle at 5% 20%, rgba(31, 92, 198, .22), transparent 28%),
        radial-gradient(circle at 95% 70%, rgba(20, 159, 185, .14), transparent 28%),
        linear-gradient(145deg, #020817 0%, #06132d 52%, #092859 100%) !important;
}

.nexus-bg-grid {
    position: absolute;
    z-index: -2;
    inset: 0;
    opacity: .16;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(95, 148, 226, .18) 1px, transparent 1px),
        linear-gradient(90deg, rgba(95, 148, 226, .18) 1px, transparent 1px);
    background-size: 58px 58px;
    mask-image: linear-gradient(to bottom, #000, transparent 92%);
}

.nexus-bg-orb {
    position: absolute;
    z-index: -1;
    pointer-events: none;
    border-radius: 50%;
    filter: blur(110px);
}

.nexus-orb-left {
    top: 100px;
    left: -100px;
    width: 400px;
    height: 400px;
    background: rgba(31, 89, 207, .16);
}

.nexus-orb-right {
    right: -120px;
    bottom: 70px;
    width: 430px;
    height: 430px;
    background: rgba(25, 167, 193, .1);
}

/* =====================================================
   FULL-WIDTH PROJECT BAND
===================================================== */

.nexus-project-band {
    position: relative;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 70px;
    overflow: hidden;
    padding: 65px clamp(30px, 7vw, 135px);
    border-top: 1px solid rgba(89, 155, 245, .28);
    border-bottom: 1px solid rgba(89, 155, 245, .22);
    background:
        radial-gradient(circle at 85% 10%, rgba(73, 207, 255, .23), transparent 27%),
        linear-gradient(115deg, rgba(14, 43, 96, .97), rgba(12, 63, 143, .94));
}

.nexus-project-band::before {
    position: absolute;
    top: -230px;
    right: 4%;
    width: 470px;
    height: 470px;
    content: "";
    border: 1px solid rgba(101, 204, 251, .13);
    border-radius: 50%;
    box-shadow:
        0 0 0 45px rgba(76, 174, 255, .035),
        0 0 0 90px rgba(76, 174, 255, .02);
}

.nexus-project-label {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 17px;
    color: #70ddfa;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.8px;
    text-transform: uppercase;
}

.nexus-project-label > span {
    position: relative;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #4be09b;
    box-shadow: 0 0 12px #4be09b;
}

.nexus-project-label > span::after {
    position: absolute;
    inset: -5px;
    content: "";
    border: 1px solid rgba(75, 224, 155, .45);
    border-radius: 50%;
    animation: nexusPulse 2s infinite;
}

.nexus-project-copy h2 {
    max-width: 820px;
    margin: 0;
    color: #fff;
    font: 700 42px/1.18 "Manrope", sans-serif;
    letter-spacing: -2px;
}

.nexus-project-copy h2 strong {
    display: block;
    color: #62dfff;
    font: inherit;
}

.nexus-project-copy > p {
    max-width: 700px;
    margin: 17px 0 0;
    color: #adc1e1;
    font-size: 15px;
    line-height: 1.75;
}

.nexus-project-action {
    position: relative;
    z-index: 3;
}

.nexus-project-action > a {
    min-width: 260px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    padding: 16px 16px 16px 22px;
    color: #fff;
    border: 1px solid rgba(103, 203, 255, .35);
    border-radius: 13px;
    background: rgba(9, 34, 77, .8);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .25);
    backdrop-filter: blur(15px);
    transition:
        transform .3s ease,
        border-color .3s ease;
}

.nexus-project-action > a:hover {
    color: #fff;
    border-color: #63dfff;
    transform: translateY(-5px);
}

.nexus-project-action small {
    display: block;
    margin-bottom: 5px;
    color: #668bb9;
    font-size: 8px;
    letter-spacing: 1.2px;
}

.nexus-project-action a > span {
    font-size: 14px;
    font-weight: 800;
}

.nexus-project-action a > i {
    width: 47px;
    height: 47px;
    display: grid;
    flex: 0 0 47px;
    place-items: center;
    color: #093267;
    border-radius: 50%;
    background: linear-gradient(135deg, #69e3ff, #45acd9);
    transition: transform .3s ease;
}

.nexus-project-action a:hover > i {
    transform: rotate(45deg);
}

.nexus-project-action svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.nexus-project-code {
    position: absolute;
    right: 30px;
    bottom: 13px;
    color: rgba(110, 191, 245, .25);
    font: 700 8px monospace;
    letter-spacing: 1.4px;
}

/* =====================================================
   MAIN BODY — 100% WIDTH
===================================================== */

.nexus-footer-body {
    width: 100%;
    display: grid;
    grid-template-columns: 1.4fr .72fr .88fr 1.2fr;
    gap: clamp(35px, 4vw, 75px);
    padding: 85px clamp(30px, 7vw, 135px) 70px;
}

/* LARGE BRAND */

.nexus-brand {
    display: flex;
    align-items: center;
    gap: 17px;
}

.nexus-brand-logo {
    position: relative;
    width: 90px;
    height: 85px;
    display: grid;
    flex: 0 0 90px;
    place-items: center;
    border: 1px solid rgba(78, 149, 236, .22);
    border-radius: 19px;
    background:
        radial-gradient(circle, rgba(58, 136, 255, .18), rgba(12, 33, 72, .65));
    box-shadow:
        0 18px 38px rgba(0, 0, 0, .26),
        inset 0 1px rgba(255, 255, 255, .06);
}

.nexus-brand-logo::after {
    position: absolute;
    inset: -7px;
    content: "";
    opacity: .38;
    border: 1px dashed rgba(66, 181, 236, .3);
    border-radius: 23px;
}

.nexus-brand-logo img {
    position: relative;
    z-index: 2;
    width: 75px;
    height: 75px;
    display: block;
    object-fit: contain;
    filter:
        brightness(1.08)
        saturate(1.08)
        drop-shadow(0 6px 10px rgba(0, 0, 0, .28));
}

.nexus-brand-text strong {
    display: block;
    color: #fff;
    font: 800 23px/1 "Manrope", sans-serif;
    text-transform: uppercase;
}

.nexus-brand-text small {
    display: block;
    margin-top: 8px;
    color: #6f8db7;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
}

.nexus-brand-area > h3 {
    max-width: 440px;
    margin: 35px 0 18px;
    color: #e8eff9;
    font: 700 23px/1.4 "Manrope", sans-serif;
    letter-spacing: -.6px;
}

.nexus-brand-area > h3 span {
    display: block;
    color: #64d8f6;
}

.nexus-brand-area > p {
    max-width: 440px;
    margin: 0 0 28px;
    color: #8396b5;
    font-size: 14px;
    line-height: 1.85;
}

.nexus-status {
    display: inline-flex;
    align-items: center;
    gap: 13px;
    padding: 13px 16px;
    border: 1px solid rgba(68, 143, 226, .2);
    border-radius: 11px;
    background: rgba(14, 39, 82, .67);
}

.nexus-status-icon {
    width: 37px;
    height: 37px;
    display: grid;
    place-items: center;
    color: #65dafa;
    border: 1px solid rgba(85, 203, 241, .22);
    border-radius: 50%;
    background: rgba(54, 155, 196, .1);
}

.nexus-status small,
.nexus-status strong {
    display: block;
}

.nexus-status small {
    color: #5d7ba4;
    font-size: 8px;
    letter-spacing: 1.1px;
}

.nexus-status strong {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 5px;
    color: #c6d4e7;
    font-size: 11px;
}

.nexus-status strong i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #47dd98;
    box-shadow: 0 0 9px #47dd98;
}

/* COLUMNS */

.nexus-column-title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 8px 0 28px;
}

.nexus-column-title > span {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    color: #59d0ee;
    border: 1px solid rgba(67, 170, 220, .2);
    border-radius: 50%;
    background: rgba(47, 135, 183, .08);
    font: 700 8px monospace;
}

.nexus-column-title small {
    display: block;
    color: #58759d;
    font-size: 8px;
    letter-spacing: 1.2px;
}

.nexus-column-title h4 {
    margin: 4px 0 0;
    color: #e4ebf5;
    font: 700 15px "Manrope", sans-serif;
}

.nexus-links-column nav {
    display: flex;
    flex-direction: column;
}

.nexus-links-column nav > a {
    min-height: 40px;
    display: flex;
    align-items: center;
    gap: 9px;
    color: #8fa1bd;
    font-size: 13px;
    transition:
        color .25s ease,
        transform .25s ease;
}

.nexus-links-column nav > a::before {
    width: 6px;
    height: 6px;
    content: "";
    border: 1px solid #476b9a;
    border-radius: 50%;
    transition:
        border-color .25s ease,
        background .25s ease;
}

.nexus-links-column nav > a:hover {
    color: #dce7f4;
    transform: translateX(6px);
}

.nexus-links-column nav > a:hover::before {
    border-color: #5bd4f3;
    background: #5bd4f3;
    box-shadow: 0 0 8px #5bd4f3;
}

.nexus-links-column nav > a > span {
    margin-left: auto;
    opacity: 0;
    color: #60d7f4;
    transition: opacity .25s ease;
}

.nexus-links-column nav > a:hover > span {
    opacity: 1;
}

.nexus-links-column nav > a > small {
    padding: 3px 8px;
    color: #63d79f;
    border: 1px solid rgba(78, 205, 144, .18);
    border-radius: 15px;
    background: rgba(60, 178, 120, .08);
    font-size: 8px;
}

/* =====================================================
   OFFICE PANEL
===================================================== */

.nexus-office-panel {
    position: relative;
    padding: 25px;
    overflow: hidden;
    border: 1px solid rgba(73, 139, 218, .19);
    border-radius: 16px;
    background:
        radial-gradient(circle at 100% 0, rgba(52, 177, 228, .14), transparent 38%),
        rgba(9, 28, 62, .65);
    box-shadow:
        0 20px 45px rgba(0, 0, 0, .13),
        inset 0 1px rgba(255, 255, 255, .03);
}

.nexus-office-location {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 23px;
    padding: 18px;
    border: 1px solid rgba(65, 145, 211, .17);
    border-radius: 12px;
    background:
        linear-gradient(125deg, rgba(18, 56, 112, .74), rgba(12, 38, 81, .67));
}

.nexus-office-icon {
    width: 44px;
    height: 44px;
    display: grid;
    flex: 0 0 44px;
    place-items: center;
    color: #62d9f6;
    border: 1px solid rgba(83, 193, 232, .21);
    border-radius: 12px;
    background: rgba(48, 142, 184, .1);
}

.nexus-office-icon svg,
.nexus-contact-icon svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.nexus-office-location small {
    display: block;
    margin-bottom: 6px;
    color: #6285b2;
    font-size: 8px;
    letter-spacing: 1.1px;
}

.nexus-office-location strong {
    display: block;
    color: #dce7f4;
    font-size: 13px;
    line-height: 1.5;
}

.nexus-office-location p {
    margin: 5px 0 0;
    color: #8299bb;
    font-size: 12px;
}

.nexus-contact-row {
    min-height: 61px;
    display: grid;
    grid-template-columns: 39px 1fr auto;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
    padding: 10px 12px;
    color: #9aacc6;
    border: 1px solid rgba(70, 129, 200, .13);
    border-radius: 10px;
    background: rgba(10, 32, 69, .47);
    transition:
        border-color .25s ease,
        background .25s ease;
}

.nexus-contact-row:hover {
    color: #fff;
    border-color: rgba(83, 197, 235, .32);
    background: rgba(16, 49, 98, .7);
}

.nexus-contact-icon {
    width: 39px;
    height: 39px;
    display: grid;
    place-items: center;
    color: #5ccfed;
    border-radius: 9px;
    background: rgba(46, 139, 183, .1);
}

.nexus-contact-row small,
.nexus-contact-row strong {
    display: block;
}

.nexus-contact-row small {
    color: #57769e;
    font-size: 7px;
    letter-spacing: 1.1px;
}

.nexus-contact-row strong {
    margin-top: 4px;
    color: #b9c8dc;
    font-size: 11px;
}

.nexus-contact-row > i {
    color: #58d4f2;
    font-style: normal;
}

.nexus-office-code {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 17px;
    color: #4d6b91;
    font: 700 7px monospace;
    letter-spacing: 1.2px;
}

.nexus-office-code > span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #49dc99;
    box-shadow: 0 0 8px #49dc99;
}

/* =====================================================
   PROCESS BAND
===================================================== */

.nexus-process-band {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 45px;
    padding: 26px clamp(30px, 7vw, 135px);
    border-top: 1px solid rgba(73, 130, 199, .18);
    border-bottom: 1px solid rgba(73, 130, 199, .18);
    background:
        linear-gradient(110deg, rgba(12, 38, 81, .9), rgba(9, 28, 60, .8));
}

.nexus-process-brand {
    display: flex;
    align-items: center;
    gap: 13px;
}

.nexus-process-brand > span {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    color: #fff;
    border-radius: 11px;
    background: linear-gradient(135deg, #2355d2, #328dbb);
    font: 800 17px "Manrope", sans-serif;
}

.nexus-process-brand small,
.nexus-process-brand strong {
    display: block;
}

.nexus-process-brand small {
    color: #5b7da8;
    font-size: 7px;
    letter-spacing: 1.2px;
}

.nexus-process-brand strong {
    margin-top: 4px;
    color: #b5c4d8;
    font-size: 10px;
}

.nexus-process-flow {
    display: flex;
    align-items: center;
    gap: 13px;
}

.nexus-process-flow > div {
    color: #8297b8;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
}

.nexus-process-flow > div > span {
    margin-right: 4px;
    color: #57cce9;
    font: 700 7px monospace;
}

.nexus-process-flow > i {
    position: relative;
    width: 22px;
    height: 1px;
    overflow: hidden;
    background: rgba(82, 139, 205, .27);
}

.nexus-process-flow > i::after {
    position: absolute;
    top: 0;
    left: -6px;
    width: 6px;
    height: 1px;
    content: "";
    background: #58d6f3;
    box-shadow: 0 0 6px #58d6f3;
    animation: nexusFlow 1.8s linear infinite;
}

.nexus-system-online {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #6f89a8;
    font-size: 8px;
    font-weight: 800;
    text-transform: uppercase;
}

.nexus-system-online > span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #48dc98;
    box-shadow: 0 0 9px #48dc98;
}

/* =====================================================
   BOTTOM AREA
===================================================== */

.nexus-footer-bottom {
    width: 100%;
    padding: 30px clamp(30px, 7vw, 135px) 0;
}

.nexus-certifications {
    display: flex;
    align-items: center;
    gap: 13px;
    padding-bottom: 27px;
    border-bottom: 1px solid rgba(78, 125, 182, .17);
}

.nexus-certified-icon {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    color: #55d397;
    border: 1px solid rgba(74, 204, 142, .22);
    border-radius: 50%;
    background: rgba(56, 175, 116, .08);
}

.nexus-certified-copy {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
}

.nexus-certified-copy small {
    color: #5d789c;
    font-size: 8px;
    letter-spacing: 1.2px;
}

.nexus-certified-copy > div {
    display: flex;
    align-items: center;
    gap: 15px;
    color: #8298b8;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
}

.nexus-certified-copy > div i {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #4c9dbb;
}

.nexus-bottom-row {
    min-height: 80px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 30px;
}

.nexus-bottom-row > p {
    margin: 0;
    color: #657a99;
    font-size: 10px;
}

.nexus-legal-links {
    display: flex;
    align-items: center;
    gap: 13px;
}

.nexus-legal-links a {
    color: #7186a4;
    font-size: 10px;
}

.nexus-legal-links a:hover {
    color: #bdd0e5;
}

.nexus-legal-links > span {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #4c688a;
}

.nexus-scroll-top {
    display: inline-flex;
    justify-self: end;
    align-items: center;
    gap: 11px;
    padding: 0;
    color: #748aa7;
    border: 0;
    background: transparent;
    font: 800 9px "DM Sans", sans-serif;
    text-transform: uppercase;
    cursor: pointer;
}

.nexus-scroll-top > i {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    color: #a6b8ce;
    border: 1px solid rgba(79, 137, 202, .24);
    border-radius: 50%;
    background: rgba(17, 47, 92, .7);
    transition:
        background .25s ease,
        transform .25s ease;
}

.nexus-scroll-top:hover > i {
    background: #2052a6;
    transform: translateY(-4px);
}

.nexus-scroll-top svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ANIMATIONS */

@keyframes nexusPulse {
    from {
        opacity: .8;
        transform: scale(.8);
    }

    to {
        opacity: 0;
        transform: scale(1.7);
    }
}

@keyframes nexusFlow {
    from {
        left: -6px;
    }

    to {
        left: 100%;
    }
}

/* RESPONSIVE */

@media (max-width: 1100px) {
    .nexus-footer-body {
        grid-template-columns: 1.3fr 1fr 1fr;
    }

    .nexus-office-panel {
        grid-column: 1 / -1;
    }

    .nexus-process-band {
        grid-template-columns: 1fr auto;
    }

    .nexus-process-flow {
        grid-row: 2;
        grid-column: 1 / -1;
    }
}

@media (max-width: 780px) {
    .nexus-project-band {
        grid-template-columns: 1fr;
        gap: 30px;
        padding-top: 50px;
        padding-bottom: 50px;
    }

    .nexus-project-copy h2 {
        font-size: 33px;
    }

    .nexus-project-action > a {
        width: 100%;
    }

    .nexus-footer-body {
        grid-template-columns: 1fr 1fr;
    }

    .nexus-brand-area,
    .nexus-office-panel {
        grid-column: 1 / -1;
    }

    .nexus-process-band {
        grid-template-columns: 1fr;
    }

    .nexus-process-flow {
        grid-row: auto;
        grid-column: auto;
        overflow-x: auto;
        padding-bottom: 8px;
    }

    .nexus-certified-copy {
        align-items: flex-start;
        flex-direction: column;
    }

    .nexus-certified-copy > div {
        flex-wrap: wrap;
    }

    .nexus-bottom-row {
        grid-template-columns: 1fr auto;
        padding: 22px 0;
    }

    .nexus-legal-links {
        grid-row: 2;
        grid-column: 1 / -1;
    }
}

@media (max-width: 520px) {
    .nexus-project-copy h2 {
        font-size: 29px;
    }

    .nexus-footer-body {
        grid-template-columns: 1fr;
    }

    .nexus-brand-area,
    .nexus-office-panel {
        grid-column: auto;
    }

    .nexus-brand-logo {
        width: 76px;
        height: 72px;
        flex-basis: 76px;
    }

    .nexus-brand-logo img {
        width: 64px;
        height: 64px;
    }

    .nexus-brand-text strong {
        font-size: 19px;
    }

    .nexus-bottom-row {
        grid-template-columns: 1fr;
    }

    .nexus-legal-links {
        grid-row: auto;
        grid-column: auto;
    }

    .nexus-scroll-top {
        justify-self: start;
    }
}
/* =====================================================
   DYNAMIC CLIENT UNIVERSE
===================================================== */

.client-universe {
    position: relative;
    isolation: isolate;
    width: 100%;
    overflow: hidden;
    padding: 115px 0 90px;
    color: #fff;
    background:
        radial-gradient(circle at 18% 25%, rgba(35, 92, 207, .24), transparent 28%),
        radial-gradient(circle at 85% 72%, rgba(27, 189, 216, .13), transparent 26%),
        linear-gradient(145deg, #020817 0%, #06132e 52%, #092858 100%);
}

.client-universe-grid {
    position: absolute;
    z-index: -2;
    inset: 0;
    opacity: .16;
    background-image:
        linear-gradient(rgba(94, 151, 229, .18) 1px, transparent 1px),
        linear-gradient(90deg, rgba(94, 151, 229, .18) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: linear-gradient(to bottom, transparent, #000 15%, #000 85%, transparent);
}

.client-universe-glow {
    position: absolute;
    z-index: -1;
    top: 10%;
    left: 50%;
    width: 650px;
    height: 650px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: rgba(32, 95, 220, .1);
    filter: blur(110px);
}

.client-universe-inner {
    width: 100%;
    padding: 0 clamp(28px, 7vw, 135px);
}

/* HEADING */

.client-universe-heading {
    display: grid;
    grid-template-columns: 1.2fr .8fr;
    align-items: end;
    gap: 100px;
    margin-bottom: 65px;
}

.client-universe-kicker {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 19px;
    color: #65d8f5;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.8px;
    text-transform: uppercase;
}

.client-universe-kicker > span {
    position: relative;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #46dd99;
    box-shadow: 0 0 11px #46dd99;
}

.client-universe-kicker > span::after {
    position: absolute;
    inset: -5px;
    content: "";
    border: 1px solid rgba(70, 221, 153, .45);
    border-radius: 50%;
    animation: clientPulse 2s infinite;
}

.client-universe-heading h2 {
    max-width: 760px;
    margin: 0;
    color: #fff;
    font: 700 47px/1.14 "Manrope", sans-serif;
    letter-spacing: -2.4px;
}

.client-universe-heading h2 strong {
    display: block;
    color: #62dcf8;
    font: inherit;
}

.client-universe-summary {
    padding-left: 30px;
    border-left: 1px solid rgba(106, 153, 218, .22);
}

.client-universe-summary > p {
    margin: 0 0 25px;
    color: #9cafcd;
    font-size: 14px;
    line-height: 1.8;
}

.client-universe-count {
    display: flex;
    align-items: center;
    gap: 15px;
}

.client-universe-count strong {
    color: #fff;
    font: 700 37px "Manrope", sans-serif;
}

.client-universe-count span {
    color: #6883aa;
    font-size: 9px;
    font-weight: 800;
    line-height: 1.5;
    letter-spacing: .6px;
    text-transform: uppercase;
}

/* FEATURED STAGE */

.client-featured-stage {
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    align-items: center;
    gap: 50px;
    min-height: 520px;
    overflow: hidden;
    padding: 50px;
    border: 1px solid rgba(92, 148, 224, .22);
    border-radius: 22px;
    background:
        radial-gradient(circle at 75% 50%, rgba(51, 118, 237, .17), transparent 35%),
        rgba(7, 24, 57, .72);
    box-shadow: 0 35px 80px rgba(0, 0, 0, .22);
    backdrop-filter: blur(15px);
}

.client-stage-label {
    color: #5fd4f2;
    font: 700 8px monospace;
    letter-spacing: 1.3px;
}

.client-stage-copy h3 {
    max-width: 500px;
    margin: 18px 0;
    color: #fff;
    font: 700 31px/1.35 "Manrope", sans-serif;
    letter-spacing: -1.2px;
}

.client-stage-copy h3 strong {
    display: block;
    color: #61d9f5;
    font: inherit;
}

.client-stage-copy > p {
    max-width: 480px;
    color: #8fa4c5;
    font-size: 13px;
    line-height: 1.8;
}

.client-stage-copy > a {
    display: inline-flex;
    align-items: center;
    gap: 13px;
    margin-top: 20px;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

.client-stage-copy > a > span {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    color: #0a2d61;
    border-radius: 50%;
    background: #62dcf7;
    transition: transform .25s ease;
}

.client-stage-copy > a:hover > span {
    transform: rotate(45deg);
}

/* ORBIT SYSTEM */

.client-orbit-system {
    position: relative;
    min-height: 420px;
    display: grid;
    place-items: center;
}

.client-orbit {
    position: absolute;
    border: 1px solid rgba(89, 151, 229, .2);
    border-radius: 50%;
}

.orbit-large {
    width: 400px;
    height: 400px;
    animation: clientOrbit 25s linear infinite;
}

.orbit-medium {
    width: 300px;
    height: 300px;
    border-style: dashed;
    animation: clientOrbitReverse 19s linear infinite;
}

.orbit-small {
    width: 190px;
    height: 190px;
    box-shadow:
        0 0 0 25px rgba(51, 106, 219, .025),
        0 0 0 50px rgba(51, 106, 219, .015);
}

.client-orbit-core {
    position: relative;
    z-index: 4;
    width: 130px;
    height: 130px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(101, 183, 245, .32);
    border-radius: 50%;
    background:
        radial-gradient(circle at 35% 30%, #3975ee, #11347d 72%);
    box-shadow:
        0 25px 50px rgba(0, 0, 0, .28),
        0 0 60px rgba(38, 105, 225, .22);
}

.client-orbit-core > span {
    color: #fff;
    font: 800 39px "Manrope", sans-serif;
}

.client-orbit-core > div {
    position: absolute;
    top: calc(100% + 15px);
    width: 180px;
    text-align: center;
}

.client-orbit-core small,
.client-orbit-core strong {
    display: block;
}

.client-orbit-core small {
    color: #5f81ae;
    font-size: 7px;
    letter-spacing: 1.3px;
}

.client-orbit-core strong {
    margin-top: 4px;
    color: #aec0d7;
    font-size: 9px;
}

.client-orbit-logo {
    position: absolute;
    z-index: 5;
    text-align: center;
}

.client-orbit-logo > div {
    width: 78px;
    height: 65px;
    display: grid;
    place-items: center;
    padding: 8px;
    border: 1px solid rgba(108, 158, 221, .25);
    border-radius: 13px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 14px 30px rgba(0, 0, 0, .25);
}

.client-orbit-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.client-orbit-logo > span {
    display: block;
    max-width: 100px;
    margin-top: 6px;
    overflow: hidden;
    color: #7790b3;
    font-size: 7px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.orbit-client-1 {
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
}

.orbit-client-2 {
    top: 80px;
    right: 25px;
}

.orbit-client-3 {
    right: 55px;
    bottom: 25px;
}

.orbit-client-4 {
    bottom: 5px;
    left: 50%;
    transform: translateX(-50%);
}

.orbit-client-5 {
    bottom: 45px;
    left: 40px;
}

.orbit-client-6 {
    top: 80px;
    left: 15px;
}

/* LOGO STREAM */

.client-logo-stream {
    margin-top: 28px;
    overflow: hidden;
    border: 1px solid rgba(88, 142, 211, .2);
    border-radius: 17px;
    background: rgba(7, 23, 54, .68);
}

.client-stream-top {
    min-height: 52px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 22px;
    border-bottom: 1px solid rgba(92, 139, 201, .15);
}

.client-stream-top > div {
    display: flex;
    align-items: center;
    gap: 9px;
}

.client-stream-live {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #46dd99;
    box-shadow: 0 0 9px #46dd99;
}

.client-stream-top strong {
    color: #9eb1ca;
    font-size: 8px;
    letter-spacing: 1.3px;
}

.client-stream-top > span {
    color: #526c91;
    font-size: 7px;
    text-transform: uppercase;
}

.client-marquee {
    position: relative;
    overflow: hidden;
    padding: 20px 0;
}

.client-marquee::before,
.client-marquee::after {
    position: absolute;
    z-index: 5;
    top: 0;
    bottom: 0;
    width: 110px;
    content: "";
    pointer-events: none;
}

.client-marquee::before {
    left: 0;
    background: linear-gradient(90deg, #071736, transparent);
}

.client-marquee::after {
    right: 0;
    background: linear-gradient(270deg, #071736, transparent);
}

.client-marquee-track {
    width: max-content;
    display: flex;
    gap: 15px;
    animation: clientMarquee 35s linear infinite;
}

.client-marquee:hover .client-marquee-track {
    animation-play-state: paused;
}

/* LOGO CARDS */

.client-logo-card {
    position: relative;
    width: 225px;
    min-height: 210px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 14px;
    color: #fff;
    border: 1px solid rgba(94, 146, 213, .18);
    border-radius: 13px;
    background: rgba(11, 33, 72, .74);
    transition:
        border-color .3s ease,
        transform .3s ease;
}

.client-logo-card:hover {
    color: #fff;
    border-color: rgba(86, 207, 241, .42);
    transform: translateY(-6px);
}

.client-logo-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.client-logo-card-top > span {
    color: #5a769d;
    font: 700 7px monospace;
}

.client-logo-card-top > i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #47dc99;
    box-shadow: 0 0 8px #47dc99;
}

.client-logo-image {
    height: 105px;
    display: grid;
    place-items: center;
    margin: 14px 0;
    padding: 15px;
    border-radius: 10px;
    background:
        linear-gradient(#e8edf5 1px, transparent 1px),
        linear-gradient(90deg, #e8edf5 1px, transparent 1px),
        #fff;
    background-size: 20px 20px;
}

.client-logo-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: saturate(.92);
    transition: transform .3s ease;
}

.client-logo-card:hover .client-logo-image img {
    transform: scale(1.08);
}

.client-logo-information strong,
.client-logo-information small {
    display: block;
}

.client-logo-information strong {
    overflow: hidden;
    color: #dce6f3;
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.client-logo-information small {
    margin-top: 5px;
    color: #607da5;
    font-size: 8px;
}

.client-card-corner {
    position: absolute;
    right: 7px;
    bottom: 7px;
    width: 16px;
    height: 16px;
    border-right: 1px solid rgba(80, 193, 230, .32);
    border-bottom: 1px solid rgba(80, 193, 230, .32);
}

/* FINAL CTA */

.client-universe-cta {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 50px;
    margin-top: 35px;
    padding: 31px 35px;
    border: 1px solid rgba(92, 149, 221, .2);
    border-radius: 15px;
    background:
        radial-gradient(circle at 90% 10%, rgba(62, 199, 244, .13), transparent 30%),
        rgba(9, 29, 64, .72);
}

.client-universe-cta > div > span {
    color: #5fd5f3;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1.4px;
}

.client-universe-cta h3 {
    margin: 8px 0 0;
    color: #fff;
    font: 700 22px "Manrope", sans-serif;
}

.client-universe-cta > a {
    min-width: 245px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding: 13px 14px 13px 18px;
    color: #fff;
    border: 1px solid rgba(94, 182, 239, .3);
    border-radius: 10px;
    background: rgba(17, 54, 111, .82);
}

.client-universe-cta > a small {
    display: block;
    margin-bottom: 4px;
    color: #6688b4;
    font-size: 7px;
    letter-spacing: 1.1px;
}

.client-universe-cta > a > span {
    font-size: 10px;
    font-weight: 800;
}

.client-universe-cta > a > i {
    width: 39px;
    height: 39px;
    display: grid;
    place-items: center;
    color: #092c5e;
    border-radius: 50%;
    background: #61dcf7;
    font-style: normal;
    transition: transform .25s ease;
}

.client-universe-cta > a:hover > i {
    transform: rotate(45deg);
}

/* EMPTY STATE */

.client-universe-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    min-height: 220px;
    border: 1px dashed rgba(94, 153, 226, .35);
    border-radius: 17px;
    background: rgba(8, 28, 65, .6);
}

.client-universe-empty > span {
    width: 50px;
    height: 50px;
    display: grid;
    place-items: center;
    color: #092d60;
    border-radius: 14px;
    background: #61dafa;
}

.client-universe-empty strong {
    color: #fff;
}

.client-universe-empty p {
    margin: 5px 0 0;
    color: #7d94b6;
}

/* ANIMATIONS */

@keyframes clientPulse {
    from {
        opacity: .8;
        transform: scale(.8);
    }

    to {
        opacity: 0;
        transform: scale(1.7);
    }
}

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

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

@keyframes clientMarquee {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

/* RESPONSIVE */

@media(max-width: 1050px) {
    .client-universe-heading {
        grid-template-columns: 1fr;
        gap: 27px;
    }

    .client-universe-summary {
        max-width: 650px;
        padding-left: 0;
        border-left: 0;
    }

    .client-featured-stage {
        grid-template-columns: 1fr;
    }
}

@media(max-width: 700px) {
    .client-universe {
        padding: 80px 0 65px;
    }

    .client-universe-heading h2 {
        font-size: 35px;
    }

    .client-featured-stage {
        padding: 28px 20px;
    }

    .client-stage-copy h3 {
        font-size: 26px;
    }

    .client-orbit-system {
        min-height: 370px;
        transform: scale(.83);
    }

    .client-universe-cta {
        grid-template-columns: 1fr;
        gap: 25px;
        padding: 26px 22px;
    }

    .client-universe-cta > a {
        width: 100%;
    }
}
/* =========================================================
   TECHNOWELL CONTACT EXPERIENCE
   ========================================================= */

.tw-contact-hub,
.tw-office-map-section,
.tw-quotation-section {
    --tw-contact-navy: #06152f;
    --tw-contact-navy-2: #0b234b;
    --tw-contact-blue: #2864f0;
    --tw-contact-cyan: #42d8ff;
    --tw-contact-text: #071a3b;
    --tw-contact-muted: #667794;
    --tw-contact-border: rgba(25, 69, 137, 0.13);
    box-sizing: border-box;
}

.tw-contact-hub *,
.tw-office-map-section *,
.tw-quotation-section * {
    box-sizing: border-box;
}

.tw-contact-alert,
.tw-contact-errors {
    width: min(1180px, calc(100% - 48px));
    margin: 28px auto 0;
    padding: 18px 22px;
    border-radius: 15px;
}

.tw-contact-alert {
    display: flex;
    align-items: center;
    gap: 15px;
    color: #12603f;
    border: 1px solid #b7ead4;
    background: #ecfff7;
}

.tw-contact-alert > span {
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: #17a76b;
    font-weight: 800;
}

.tw-contact-alert strong,
.tw-contact-alert p {
    display: block;
    margin: 0;
}

.tw-contact-alert p {
    margin-top: 3px;
    font-size: 14px;
}

.tw-contact-errors {
    color: #9c2d3c;
    border: 1px solid #f0bbc2;
    background: #fff0f2;
}

.tw-contact-errors ul {
    margin: 10px 0 0;
    padding-left: 20px;
}

/* Main contact section */
.tw-contact-hub {
    position: relative;
    overflow: hidden;
    padding: 110px 0;
    color: var(--tw-contact-text);
    background:
        radial-gradient(circle at 80% 20%, rgba(40, 100, 240, .12), transparent 30%),
        linear-gradient(180deg, #fff 0%, #f5f9ff 100%);
    isolation: isolate;
}

.tw-contact-grid-bg {
    position: absolute;
    inset: 0;
    z-index: -3;
    opacity: .55;
    background-image:
        linear-gradient(rgba(30, 78, 151, .055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(30, 78, 151, .055) 1px, transparent 1px);
    background-size: 52px 52px;
    mask-image: linear-gradient(to bottom, black, transparent 95%);
}

.tw-contact-glow {
    position: absolute;
    z-index: -2;
    border-radius: 50%;
    filter: blur(90px);
    pointer-events: none;
}

.tw-contact-glow-one {
    top: 80px;
    right: -150px;
    width: 430px;
    height: 430px;
    background: rgba(41, 103, 245, .13);
}

.tw-contact-glow-two {
    bottom: -180px;
    left: -120px;
    width: 380px;
    height: 380px;
    background: rgba(66, 216, 255, .11);
}

.tw-contact-container,
.tw-map-container,
.tw-quotation-container {
    width: min(1180px, calc(100% - 48px));
    margin-inline: auto;
}

.tw-contact-container {
    display: grid;
    grid-template-columns: minmax(0, .82fr) minmax(550px, 1.18fr);
    align-items: start;
    gap: 76px;
}

.tw-contact-intro {
    position: sticky;
    top: 125px;
}

.tw-contact-label {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 28px;
    color: var(--tw-contact-blue);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .17em;
    text-transform: uppercase;
}

.tw-contact-live-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #28d99a;
    box-shadow: 0 0 0 6px rgba(40, 217, 154, .11), 0 0 20px rgba(40, 217, 154, .55);
}

.tw-contact-intro h2 {
    margin: 0;
    max-width: 570px;
    color: var(--tw-contact-text);
    font-size: clamp(42px, 4vw, 64px);
    font-weight: 750;
    line-height: 1.02;
    letter-spacing: -.055em;
}

.tw-contact-intro h2 span {
    display: block;
    color: var(--tw-contact-blue);
}

.tw-contact-description {
    max-width: 570px;
    margin: 28px 0 38px;
    color: var(--tw-contact-muted);
    font-size: 17px;
    line-height: 1.8;
}

.tw-contact-details {
    display: grid;
    gap: 12px;
}

.tw-contact-detail-card {
    display: grid;
    grid-template-columns: 46px 1fr auto;
    align-items: center;
    gap: 15px;
    min-width: 0;
    padding: 17px;
    color: inherit;
    border: 1px solid var(--tw-contact-border);
    border-radius: 17px;
    background: rgba(255, 255, 255, .8);
    box-shadow: 0 10px 35px rgba(12, 47, 106, .045);
    text-decoration: none;
    transition: .3s ease;
}

a.tw-contact-detail-card:hover {
    transform: translateX(7px);
    border-color: rgba(40, 100, 240, .3);
    box-shadow: 0 18px 45px rgba(12, 47, 106, .1);
}

.tw-contact-detail-icon {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(40, 100, 240, .15);
    border-radius: 13px;
    color: var(--tw-contact-blue);
    background: #edf4ff;
}

.tw-contact-detail-icon svg {
    width: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
}

.tw-contact-detail-copy {
    min-width: 0;
}

.tw-contact-detail-copy small,
.tw-contact-detail-copy strong,
.tw-contact-detail-copy em {
    display: block;
}

.tw-contact-detail-copy small {
    margin-bottom: 3px;
    color: #7d8ba3;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .16em;
}

.tw-contact-detail-copy strong {
    overflow-wrap: anywhere;
    color: var(--tw-contact-text);
    font-size: 14px;
}

.tw-contact-detail-copy em {
    margin-top: 3px;
    color: #8492a9;
    font-size: 11px;
    font-style: normal;
}

.tw-contact-detail-arrow {
    color: var(--tw-contact-blue);
}

.tw-contact-confidence {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 36px;
    padding-top: 26px;
    border-top: 1px solid var(--tw-contact-border);
}

.tw-contact-confidence > div {
    display: flex;
    align-items: center;
    gap: 8px;
}

.tw-contact-confidence strong {
    color: var(--tw-contact-blue);
    font-size: 10px;
}

.tw-contact-confidence span {
    color: var(--tw-contact-text);
    font-size: 10px;
    font-weight: 700;
    line-height: 1.3;
}

.tw-contact-confidence small {
    display: block;
    color: #98a5b9;
    font-size: 7px;
    letter-spacing: .12em;
}

.tw-contact-confidence > i {
    width: 22px;
    height: 1px;
    background: #cdd8e8;
}

/* Enquiry panel */
.tw-enquiry-panel {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(27, 72, 144, .14);
    border-radius: 28px;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 35px 90px rgba(12, 45, 102, .13);
}

.tw-panel-topline {
    height: 53px;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 0 24px;
    border-bottom: 1px solid #e4ebf5;
    background: #f8fbff;
}

.tw-panel-topline > span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.tw-panel-topline > span:nth-child(1) {
    background: #ff6b73;
}

.tw-panel-topline > span:nth-child(2) {
    background: #ffbe55;
}

.tw-panel-topline > span:nth-child(3) {
    background: #2bd49c;
}

.tw-panel-topline small {
    margin-left: auto;
    color: #8795ac;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .16em;
}

.tw-form-heading {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding: 34px 38px 0;
}

.tw-form-heading span {
    color: var(--tw-contact-blue);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .16em;
}

.tw-form-heading h3 {
    margin: 8px 0 0;
    color: var(--tw-contact-text);
    font-size: 29px;
    letter-spacing: -.035em;
}

.tw-form-symbol {
    width: 50px;
    height: 50px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    color: #fff !important;
    background: linear-gradient(135deg, var(--tw-contact-blue), var(--tw-contact-cyan));
    box-shadow: 0 15px 35px rgba(40, 100, 240, .23);
    font-size: 19px !important;
}

.tw-contact-form {
    padding: 30px 38px 38px;
}

.tw-contact-form-grid,
.tw-quote-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.tw-field,
.tw-quote-field {
    display: block;
}

.tw-field > span:first-child,
.tw-quote-field > span:first-child {
    display: block;
    margin-bottom: 9px;
    color: #233654;
    font-size: 11px;
    font-weight: 800;
}

.tw-field b {
    color: var(--tw-contact-blue);
}

.tw-field-full,
.tw-quote-full {
    grid-column: 1 / -1;
}

.tw-input-wrap {
    position: relative;
    display: block;
}

.tw-input-wrap svg {
    position: absolute;
    top: 50%;
    left: 16px;
    width: 18px;
    transform: translateY(-50%);
    fill: none;
    stroke: #8696ad;
    stroke-width: 1.6;
    pointer-events: none;
}

.tw-contact-form input,
.tw-contact-form select,
.tw-contact-form textarea,
.tw-quotation-form input,
.tw-quotation-form select,
.tw-quotation-form textarea {
    width: 100%;
    outline: none;
    color: #0b1f40;
    border: 1px solid #d9e2ef;
    border-radius: 12px;
    background: #fbfdff;
    font: inherit;
    font-size: 13px;
    transition: .25s ease;
}

.tw-contact-form input,
.tw-contact-form select {
    height: 54px;
    padding: 0 15px 0 47px;
}

.tw-contact-form textarea {
    min-height: 150px;
    padding: 17px;
    resize: vertical;
}

.tw-contact-form input:focus,
.tw-contact-form select:focus,
.tw-contact-form textarea:focus,
.tw-quotation-form input:focus,
.tw-quotation-form select:focus,
.tw-quotation-form textarea:focus {
    border-color: var(--tw-contact-blue);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(40, 100, 240, .09);
}

.tw-textarea-wrap {
    position: relative;
    display: block;
}

.tw-textarea-wrap small {
    position: absolute;
    right: 14px;
    bottom: 11px;
    color: #94a1b5;
    font-size: 9px;
}

.tw-form-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 25px;
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid #e5ebf4;
}

.tw-form-footer p {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    color: #77869d;
    font-size: 10px;
}

.tw-form-footer p svg {
    width: 19px;
    flex: 0 0 auto;
    fill: none;
    stroke: #29a977;
    stroke-width: 1.8;
}

.tw-submit-button,
.tw-quote-submit {
    display: inline-flex;
    align-items: center;
    gap: 24px;
    padding: 9px 10px 9px 20px;
    cursor: pointer;
    color: #fff;
    border: 0;
    border-radius: 13px;
    background: linear-gradient(135deg, #1e55e8, #2c7dfa);
    box-shadow: 0 15px 35px rgba(40, 100, 240, .23);
    font: inherit;
    text-align: left;
    transition: .3s ease;
}

.tw-submit-button:hover,
.tw-quote-submit:hover {
    transform: translateY(-3px);
    box-shadow: 0 20px 45px rgba(40, 100, 240, .33);
}

.tw-submit-button span small,
.tw-quote-submit span small {
    display: block;
    margin-bottom: 2px;
    color: rgba(255, 255, 255, .64);
    font-size: 7px;
    letter-spacing: .14em;
}

.tw-submit-button span,
.tw-quote-submit span {
    font-size: 12px;
    font-weight: 800;
}

.tw-submit-button i,
.tw-quote-submit i {
    width: 39px;
    height: 39px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: rgba(255, 255, 255, .16);
    font-size: 16px;
    font-style: normal;
}

/* Map */
.tw-office-map-section {
    padding: 105px 0;
    overflow: hidden;
    background: #fff;
}

.tw-map-heading {
    display: grid;
    grid-template-columns: 1.2fr .8fr;
    align-items: end;
    gap: 75px;
    margin-bottom: 46px;
}

.tw-map-eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    color: var(--tw-contact-blue);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .18em;
}

.tw-map-eyebrow i {
    width: 30px;
    height: 1px;
    background: var(--tw-contact-blue);
}

.tw-map-heading h2 {
    max-width: 700px;
    margin: 0;
    color: var(--tw-contact-text);
    font-size: clamp(38px, 4.4vw, 64px);
    line-height: 1.03;
    letter-spacing: -.055em;
}

.tw-map-heading h2 span {
    color: var(--tw-contact-blue);
}

.tw-map-heading > p {
    margin: 0;
    color: var(--tw-contact-muted);
    font-size: 16px;
    line-height: 1.75;
}

.tw-map-shell {
    position: relative;
    min-height: 570px;
}

.tw-map-browser {
    overflow: hidden;
    border: 1px solid rgba(18, 59, 125, .16);
    border-radius: 27px;
    background: #fff;
    box-shadow: 0 35px 85px rgba(9, 39, 94, .15);
}

.tw-map-browser-top {
    min-height: 56px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 25px;
    padding: 10px 20px;
    border-bottom: 1px solid #e1e8f2;
    background: #f7faff;
}

.tw-map-browser-top > div {
    display: flex;
    gap: 7px;
}

.tw-map-browser-top > div i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #c7d1df;
}

.tw-map-browser-top > div i:first-child {
    background: #ff6e76;
}

.tw-map-browser-top > div i:nth-child(2) {
    background: #ffc558;
}

.tw-map-browser-top > div i:nth-child(3) {
    background: #2bd49c;
}

.tw-map-browser-top > span {
    max-width: 510px;
    display: flex;
    align-items: center;
    gap: 9px;
    justify-self: center;
    padding: 8px 18px;
    color: #50617d;
    border: 1px solid #e0e7f1;
    border-radius: 9px;
    background: #fff;
    font-size: 10px;
}

.tw-map-browser-top svg {
    width: 15px;
    fill: none;
    stroke: var(--tw-contact-blue);
    stroke-width: 1.8;
}

.tw-map-browser-top small {
    color: #22a876;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .15em;
}

.tw-map-browser iframe {
    display: block;
    width: 100%;
    filter: saturate(.72) contrast(1.04);
}

.tw-map-office-card {
    position: absolute;
    right: 34px;
    bottom: 34px;
    z-index: 3;
    width: min(355px, calc(100% - 44px));
    padding: 27px;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 21px;
    background:
        radial-gradient(circle at 100% 0%, rgba(66, 216, 255, .18), transparent 40%),
        rgba(5, 24, 57, .95);
    box-shadow: 0 22px 55px rgba(3, 20, 49, .32);
    backdrop-filter: blur(18px);
}

.tw-map-office-number {
    position: absolute;
    top: 18px;
    right: 20px;
    color: rgba(152, 190, 239, .42);
    font-size: 8px;
    letter-spacing: .15em;
}

.tw-map-pin {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    margin-bottom: 22px;
    border-radius: 14px;
    color: var(--tw-contact-cyan);
    background: rgba(67, 216, 255, .1);
}

.tw-map-pin svg {
    width: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
}

.tw-map-office-card > small {
    color: var(--tw-contact-cyan);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .16em;
}

.tw-map-office-card h3 {
    margin: 9px 0 6px;
    color: #fff;
    font-size: 20px;
}

.tw-map-office-card p {
    margin: 0;
    color: rgba(210, 226, 250, .68);
    font-size: 13px;
}

.tw-map-office-card a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 22px;
    padding-top: 18px;
    color: #fff;
    border-top: 1px solid rgba(255, 255, 255, .12);
    font-size: 11px;
    font-weight: 800;
    text-decoration: none;
}

.tw-map-office-card a i {
    color: var(--tw-contact-cyan);
    font-style: normal;
}

/* Quotation */
.tw-quotation-section {
    position: relative;
    overflow: hidden;
    padding: 115px 0;
    color: #fff;
    background:
        radial-gradient(circle at 12% 20%, rgba(42, 111, 255, .18), transparent 29%),
        linear-gradient(135deg, #05142e 0%, #081d42 55%, #0b2a60 100%);
    isolation: isolate;
}

.tw-quotation-grid {
    position: absolute;
    inset: 0;
    z-index: -2;
    opacity: .26;
    background-image:
        linear-gradient(rgba(116, 173, 255, .12) 1px, transparent 1px),
        linear-gradient(90deg, rgba(116, 173, 255, .12) 1px, transparent 1px);
    background-size: 52px 52px;
}

.tw-quotation-glow {
    position: absolute;
    right: -130px;
    bottom: -200px;
    z-index: -1;
    width: 530px;
    height: 530px;
    border-radius: 50%;
    background: rgba(29, 103, 255, .2);
    filter: blur(100px);
}

.tw-quotation-container {
    display: grid;
    grid-template-columns: .82fr 1.18fr;
    align-items: start;
    gap: 80px;
}

.tw-quotation-index {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 28px;
}

.tw-quotation-index span {
    color: var(--tw-contact-cyan);
    font-size: 11px;
    font-weight: 800;
}

.tw-quotation-index i {
    width: 38px;
    height: 1px;
    background: rgba(69, 216, 255, .5);
}

.tw-quotation-index small {
    color: rgba(171, 199, 239, .6);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .16em;
}

.tw-quotation-intro h2 {
    margin: 0;
    color: #fff;
    font-size: clamp(42px, 4vw, 63px);
    line-height: 1.03;
    letter-spacing: -.055em;
}

.tw-quotation-intro h2 span {
    display: block;
    color: var(--tw-contact-cyan);
}

.tw-quotation-intro > p {
    margin: 28px 0 38px;
    color: rgba(203, 220, 247, .69);
    font-size: 16px;
    line-height: 1.8;
}

.tw-quotation-benefits {
    border-top: 1px solid rgba(124, 167, 226, .16);
}

.tw-quotation-benefits > div {
    display: grid;
    grid-template-columns: 34px 1fr;
    gap: 13px;
    padding: 18px 0;
    border-bottom: 1px solid rgba(124, 167, 226, .16);
}

.tw-quotation-benefits > div > span {
    color: var(--tw-contact-cyan);
    font-size: 9px;
    font-weight: 800;
}

.tw-quotation-benefits p {
    margin: 0;
    color: rgba(195, 214, 244, .59);
    font-size: 12px;
    line-height: 1.55;
}

.tw-quotation-benefits strong {
    display: block;
    margin-bottom: 3px;
    color: #fff;
    font-size: 13px;
}

.tw-quotation-form {
    padding: 34px;
    border: 1px solid rgba(130, 179, 244, .18);
    border-radius: 27px;
    background: rgba(7, 27, 61, .72);
    box-shadow: 0 32px 80px rgba(0, 8, 28, .3);
    backdrop-filter: blur(18px);
}

.tw-quote-form-header {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 27px;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(136, 177, 231, .16);
}

.tw-quote-form-header span {
    color: var(--tw-contact-cyan);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .16em;
}

.tw-quote-form-header small {
    color: #35d69d;
    font-size: 9px;
}

.tw-quote-field > span:first-child {
    color: rgba(221, 232, 250, .8);
}

.tw-quotation-form input,
.tw-quotation-form select,
.tw-quotation-form textarea {
    padding: 14px;
    color: #eef5ff;
    border-color: rgba(133, 174, 230, .2);
    background: rgba(255, 255, 255, .055);
}

.tw-quotation-form input,
.tw-quotation-form select {
    height: 51px;
}

.tw-quotation-form select option {
    color: #071a3b;
    background: #fff;
}

.tw-quotation-form textarea {
    min-height: 145px;
    resize: vertical;
}

.tw-quotation-form input::placeholder,
.tw-quotation-form textarea::placeholder {
    color: rgba(193, 211, 236, .4);
}

.tw-quotation-form input:focus,
.tw-quotation-form select:focus,
.tw-quotation-form textarea:focus {
    border-color: var(--tw-contact-cyan);
    color: #fff;
    background: rgba(255, 255, 255, .08);
    box-shadow: 0 0 0 4px rgba(66, 216, 255, .08);
}

.tw-file-field {
    position: relative;
}

.tw-file-field input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.tw-file-display {
    min-height: 51px;
    display: flex !important;
    align-items: center;
    gap: 12px;
    margin: 0 !important;
    padding: 8px 12px;
    cursor: pointer;
    border: 1px dashed rgba(116, 181, 239, .32);
    border-radius: 11px;
    background: rgba(255, 255, 255, .04);
}

.tw-file-display > i {
    width: 33px;
    height: 33px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    color: var(--tw-contact-cyan);
    background: rgba(66, 216, 255, .09);
    font-style: normal;
}

.tw-file-display strong,
.tw-file-display small {
    display: block;
}

.tw-file-display strong {
    max-width: 190px;
    overflow: hidden;
    color: #e7f1ff;
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tw-file-display small {
    margin-top: 2px;
    color: rgba(180, 204, 237, .43);
    font-size: 7px;
}

.tw-quote-submit {
    margin-top: 26px;
    margin-left: auto;
}

/* Responsive */
@media (max-width: 1050px) {
    .tw-contact-container,
    .tw-quotation-container {
        grid-template-columns: 1fr;
    }

    .tw-contact-intro {
        position: static;
    }

    .tw-contact-intro h2,
    .tw-contact-description {
        max-width: 760px;
    }

    .tw-map-heading {
        grid-template-columns: 1fr;
        gap: 22px;
    }
}

@media (max-width: 700px) {
    .tw-contact-hub,
    .tw-office-map-section,
    .tw-quotation-section {
        padding: 72px 0;
    }

    .tw-contact-container,
    .tw-map-container,
    .tw-quotation-container {
        width: min(100% - 30px, 1180px);
    }

    .tw-contact-intro h2,
    .tw-map-heading h2,
    .tw-quotation-intro h2 {
        font-size: 39px;
    }

    .tw-contact-form-grid,
    .tw-quote-fields {
        grid-template-columns: 1fr;
    }

    .tw-field-full,
    .tw-quote-full {
        grid-column: auto;
    }

    .tw-enquiry-panel,
    .tw-quotation-form {
        border-radius: 21px;
    }

    .tw-form-heading {
        padding: 27px 22px 0;
    }

    .tw-contact-form,
    .tw-quotation-form {
        padding: 25px 22px;
    }

    .tw-form-footer {
        align-items: stretch;
        flex-direction: column;
    }

    .tw-submit-button,
    .tw-quote-submit {
        width: 100%;
        justify-content: space-between;
    }

    .tw-contact-confidence {
        align-items: flex-start;
        flex-direction: column;
    }

    .tw-contact-confidence > i {
        width: 1px;
        height: 16px;
        margin-left: 12px;
    }

    .tw-map-browser-top {
        grid-template-columns: auto 1fr;
    }

    .tw-map-browser-top small {
        display: none;
    }

    .tw-map-browser-top > span {
        padding: 7px 10px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .tw-map-browser iframe {
        height: 500px;
    }

    .tw-map-office-card {
        right: 18px;
        bottom: 18px;
    }
}
 .tech-output-panel { overflow: hidden; }
    .is-hidden { display: none !important; }
    .tech-original-dashboard,
    .tech-output-panel > .tech-floating-card { display: none !important; }

    .tech-site-stage { position: relative; min-height: 455px; background: #071633; overflow: hidden; }
    .tech-site-waiting { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: #fff; background: radial-gradient(circle at 50% 40%, rgba(24,117,255,.18), transparent 38%), #071633; transition: opacity .55s ease, visibility .55s ease; }
    .tech-site-waiting.is-complete { opacity: 0; visibility: hidden; }
    .tech-site-waiting strong { font-size: 16px; }
    .tech-site-waiting small { color: #8195bb; font-size: 10px; }
    .tech-build-orbit { width: 48px; height: 48px; border: 1px solid rgba(63,211,255,.22); border-radius: 50%; position: relative; animation: techSpin 1.2s linear infinite; }
    .tech-build-orbit:before, .tech-build-orbit:after { content: ''; position: absolute; border-radius: 50%; }
    .tech-build-orbit:before { inset: 7px; border: 1px dashed rgba(63,211,255,.55); }
    .tech-build-orbit:after { width: 8px; height: 8px; background: #3fe0ff; top: -4px; left: 20px; box-shadow: 0 0 14px #3fe0ff; }
    .tech-build-orbit i { position: absolute; inset: 17px; border-radius: 50%; background: #2f72ff; box-shadow: 0 0 18px #2f72ff; }

    .tech-mini-site { min-height: 455px; color: #fff; opacity: 0; transform: scale(.97) translateY(12px); pointer-events: none; background: radial-gradient(circle at 78% 45%, rgba(37,117,255,.28), transparent 34%), linear-gradient(135deg,#06122b 0%,#09204c 58%,#071733 100%); transition: opacity .7s ease, transform .8s cubic-bezier(.2,.8,.2,1); }
    .tech-mini-site.is-visible { opacity: 1; transform: none; pointer-events: auto; }
    .mini-nav { height: 62px; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(255,255,255,.1); background: rgba(4,15,39,.72); }
    .mini-brand { display: flex; align-items: center; gap: 8px; color: #fff; text-decoration: none; }
    .mini-brand > span { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 9px; font-weight: 800; background: linear-gradient(135deg,#285cff,#32d7ff); box-shadow: 0 8px 24px rgba(38,112,255,.35); }
    .mini-brand div { display: flex; flex-direction: column; line-height: 1.05; }
    .mini-brand strong { font-size: 10px; letter-spacing: .5px; }
    .mini-brand small { color: #8297bd; font-size: 5px; letter-spacing: 1px; margin-top: 3px; }
    .mini-links { display: flex; gap: 19px; color: #9eb0d0; font-size: 8px; }
    .mini-links span:first-child { color: #47dfff; }
    .mini-contact { padding: 9px 13px; border-radius: 7px; color: #fff; background: #2768f5; text-decoration: none; font-size: 8px; box-shadow: 0 8px 22px rgba(39,104,245,.3); }

    .mini-hero { min-height: 330px; display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; padding: 30px 34px 18px; }
    .mini-copy > * { opacity: 0; transform: translateY(12px); }
    .tech-mini-site.is-visible .mini-copy > * { animation: techReveal .55s ease forwards; }
    .tech-mini-site.is-visible .mini-copy h2 { animation-delay: .12s; }
    .tech-mini-site.is-visible .mini-copy p { animation-delay: .24s; }
    .tech-mini-site.is-visible .mini-actions { animation-delay: .36s; }
    .mini-eyebrow { color: #60e5ff; font-size: 6px; letter-spacing: 1.4px; font-weight: 700; }
    .mini-eyebrow i { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: #56efb5; box-shadow: 0 0 9px #56efb5; margin-right: 5px; }
    .mini-copy h2 { margin: 11px 0 12px; font-size: clamp(28px,3vw,42px); line-height: .98; letter-spacing: -1.6px; }
    .mini-copy h2 em { font-style: normal; color: transparent; background: linear-gradient(90deg,#43dcff,#5e7cff); -webkit-background-clip: text; background-clip: text; }
    .mini-copy p { max-width: 310px; color: #a9bad6; font-size: 9px; line-height: 1.7; }
    .mini-actions { display: flex; align-items: center; gap: 17px; margin-top: 18px; font-size: 8px; }
    .mini-actions a { padding: 10px 14px; border-radius: 7px; color: #fff; background: linear-gradient(135deg,#285cff,#2e9cff); text-decoration: none; box-shadow: 0 10px 25px rgba(38,107,255,.28); }
    .mini-actions > span { color: #c3d2eb; }

    .mini-visual { position: relative; min-height: 255px; display: grid; place-items: center; }
    .mini-globe { width: 130px; height: 130px; position: relative; z-index: 2; display: grid; place-items: center; border: 1px solid rgba(73,217,255,.4); border-radius: 50%; background: radial-gradient(circle at 35% 30%,#2e8cff,#123474 48%,#071b3e 72%); box-shadow: 0 0 55px rgba(37,127,255,.35), inset -20px -18px 35px rgba(0,0,0,.3); animation: techFloat 3.5s ease-in-out infinite; }
    .mini-globe:before, .mini-globe:after { content: ''; position: absolute; border: 1px solid rgba(75,220,255,.24); border-radius: 50%; }
    .mini-globe:before { inset: 14px -1px; }
    .mini-globe:after { inset: -1px 35px; }
    .mini-globe span { font-size: 54px; font-weight: 900; color: rgba(255,255,255,.92); text-shadow: 0 0 22px rgba(72,220,255,.7); }
    .mini-orbit { position: absolute; border: 1px solid rgba(58,175,255,.2); border-radius: 50%; }
    .orbit-one { width: 190px; height: 86px; transform: rotate(-18deg); }
    .orbit-two { width: 215px; height: 112px; transform: rotate(28deg); }
    .mini-card { position: absolute; z-index: 3; display: flex; align-items: center; gap: 8px; padding: 9px 12px; border: 1px solid rgba(85,169,255,.25); border-radius: 9px; background: rgba(7,26,61,.82); box-shadow: 0 12px 28px rgba(0,0,0,.22); backdrop-filter: blur(8px); }
    .mini-card i { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 7px; color: #55e5ff; background: rgba(39,124,255,.2); font-style: normal; }
    .mini-card div { display: flex; flex-direction: column; }
    .mini-card strong { font-size: 8px; }.mini-card small { margin-top: 3px; color: #7790b7; font-size: 6px; }
    .mini-card-one { top: 34px; right: 0; }.mini-card-two { bottom: 30px; left: 0; }
    .mini-footer-strip { height: 62px; display: grid; grid-template-columns: repeat(3,1fr); align-items: center; border-top: 1px solid rgba(255,255,255,.08); background: rgba(4,15,39,.5); color: #8398ba; font-size: 7px; }
    .mini-footer-strip span { padding-left: 22px; border-right: 1px solid rgba(255,255,255,.08); }
    .mini-footer-strip span:last-child { border: 0; }.mini-footer-strip b { display: block; color: #fff; font-size: 13px; margin-bottom: 2px; }

    @keyframes techSpin { to { transform: rotate(360deg); } }
    @keyframes techFloat { 50% { transform: translateY(-7px); } }
    @keyframes techReveal { to { opacity: 1; transform: none; } }
    @media (max-width: 767px) {
        .tech-site-stage,.tech-mini-site { min-height: 430px; }
        .mini-links { display: none; }.mini-nav { padding: 0 15px; }
        .mini-hero { grid-template-columns: 1fr; padding: 25px 22px; text-align: center; }
        .mini-copy p { margin-inline: auto; }.mini-actions { justify-content: center; }
        .mini-visual { display: none; }.mini-footer-strip span { padding-left: 10px; }
    }
    .tw-end-to-end-services {
    position: relative;
    padding: 0 0 100px;
    background:
        radial-gradient(circle at 50% 0%, rgba(39, 101, 255, .055), transparent 32%),
        #ffffff;
    color: #0a1735;
}

.tw-end-to-end-services,
.tw-end-to-end-services * {
    box-sizing: border-box;
}

.tw-end-to-end-services .wrap {
    width: min(1420px, calc(100% - 48px));
    margin: 0 auto;
}

/* Achievement bar */

.tw-achievement-bar {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    margin-bottom: 70px;
    padding: 28px 12px;
    background: #ffffff;
    border: 1px solid #e5eaf4;
    border-radius: 18px;
    box-shadow: 0 18px 55px rgba(20, 40, 80, .12);
}

.tw-achievement-item {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    min-height: 72px;
    padding: 0 24px;
    border-right: 1px solid #e4e9f2;
}

.tw-achievement-item:last-child {
    border-right: 0;
}

.tw-achievement-icon {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    color: #2865e8;
    border-radius: 13px;
    background: #edf4ff;
    font-size: 23px;
}

.tw-achievement-item strong,
.tw-achievement-item span {
    display: block;
}

.tw-achievement-item strong {
    margin-bottom: 4px;
    color: #1556ce;
    font-size: clamp(18px, 1.5vw, 25px);
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
}

.tw-achievement-item span {
    color: #485573;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.45;
}

.tw-achievement-certified .tw-achievement-icon {
    color: #12203e;
    background: #f1f3f7;
}

/* Heading */

.tw-end-heading {
    max-width: 850px;
    margin: 0 auto 42px;
    text-align: center;
}

.tw-end-kicker {
    display: inline-block;
    margin-bottom: 12px;
    color: #2865e8;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .15em;
}

.tw-end-heading h2 {
    margin: 0 0 14px;
    color: #081633;
    font-size: clamp(32px, 4vw, 52px);
    font-weight: 800;
    letter-spacing: -.045em;
    line-height: 1.1;
}

.tw-end-heading p {
    max-width: 730px;
    margin: 0 auto;
    color: #66728c;
    font-size: 16px;
    line-height: 1.75;
}

/* Service grid */

.tw-simple-services-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;
}

.tw-simple-service-card {
    position: relative;
    min-width: 0;
    min-height: 290px;
    padding: 34px 28px;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #e3e8f1;
    border-radius: 12px;
    box-shadow: 0 8px 26px rgba(20, 39, 80, .045);
    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease;
}

.tw-simple-service-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: linear-gradient(
        180deg,
        var(--service-color),
        var(--service-dark)
    );
    transform: scaleY(0);
    transform-origin: bottom;
    transition: transform .3s ease;
}

.tw-simple-service-card:hover {
    transform: translateY(-8px);
    border-color: color-mix(in srgb, var(--service-color) 38%, #e3e8f1);
    box-shadow: 0 22px 50px rgba(20, 45, 95, .13);
}

.tw-simple-service-card:hover::before {
    transform: scaleY(1);
}

.tw-simple-service-layout {
    display: flex;
    align-items: flex-start;
    gap: 23px;
}

.tw-simple-service-icon {
    flex: 0 0 76px;
    width: 76px;
    height: 76px;
    display: grid;
    place-items: center;
    color: #ffffff;
    background: linear-gradient(
        145deg,
        var(--service-color),
        var(--service-dark)
    );
    border-radius: 50%;
    box-shadow: 0 13px 28px color-mix(
        in srgb,
        var(--service-color) 28%,
        transparent
    );
    transition: transform .3s ease;
}

.tw-simple-service-card:hover .tw-simple-service-icon {
    transform: rotate(-5deg) scale(1.06);
}

.tw-simple-service-icon i {
    font-size: 31px;
}

.tw-simple-service-icon svg {
    width: 35px;
    height: 35px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tw-simple-service-content {
    min-width: 0;
    display: flex;
    align-self: stretch;
    flex-direction: column;
}

.tw-simple-service-content h3 {
    margin: 3px 0 14px;
    color: #0b1834;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.35;
}

.tw-simple-service-content p {
    display: -webkit-box;
    margin: 0 0 24px;
    overflow: hidden;
    color: #626e85;
    font-size: 14px;
    line-height: 1.75;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
}

.tw-simple-service-content a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    width: fit-content;
    margin-top: auto;
    color: var(--service-color);
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
    transition: gap .25s ease;
}

.tw-simple-service-content a:hover {
    gap: 15px;
}

.tw-simple-service-content a svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* View all button */

.tw-view-all-services {
    display: flex;
    justify-content: center;
    margin-top: 42px;
}

.tw-view-all-services a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 52px;
    padding: 0 25px;
    color: #ffffff;
    background: #155be3;
    border-radius: 9px;
    box-shadow: 0 12px 28px rgba(21, 91, 227, .23);
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
    transition: .25s ease;
}

.tw-view-all-services a:hover {
    color: #ffffff;
    background: #0848c7;
    transform: translateY(-3px);
}

.tw-view-all-services svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Empty state */

.tw-simple-service-empty {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    min-height: 180px;
    padding: 30px;
    background: #f8faff;
    border: 1px dashed #bdcbea;
    border-radius: 14px;
    text-align: left;
}

.tw-simple-service-empty > i {
    color: #2865e8;
    font-size: 34px;
}

.tw-simple-service-empty strong {
    display: block;
    color: #0b1834;
    font-size: 18px;
}

.tw-simple-service-empty p {
    margin: 5px 0 0;
    color: #69758d;
}

/* Responsive */

@media (max-width: 1200px) {
    .tw-achievement-bar {
        grid-template-columns: repeat(3, 1fr);
    }

    .tw-achievement-item:nth-child(3) {
        border-right: 0;
    }

    .tw-achievement-item:nth-child(-n+3) {
        padding-bottom: 22px;
        border-bottom: 1px solid #e4e9f2;
    }

    .tw-achievement-item:nth-child(n+4) {
        padding-top: 22px;
    }

    .tw-simple-services-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .tw-end-to-end-services {
        padding-bottom: 65px;
    }

    .tw-end-to-end-services .wrap {
        width: min(100% - 28px, 1420px);
    }

    .tw-achievement-bar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin-bottom: 50px;
        padding: 14px;
    }

    .tw-achievement-item {
        justify-content: flex-start;
        min-height: 100px;
        padding: 16px 12px !important;
        border-right: 0;
        border-bottom: 1px solid #e4e9f2;
    }

    .tw-achievement-item:nth-child(odd) {
        border-right: 1px solid #e4e9f2;
    }

    .tw-achievement-item:nth-last-child(-n+2) {
        border-bottom: 0;
    }

    .tw-achievement-icon {
        flex-basis: 42px;
        width: 42px;
        height: 42px;
        font-size: 20px;
    }

    .tw-achievement-item strong {
        font-size: 18px;
    }

    .tw-achievement-item span {
        font-size: 11px;
    }

    .tw-end-heading {
        margin-bottom: 30px;
    }

    .tw-end-heading h2 {
        font-size: 34px;
    }

    .tw-end-heading p {
        font-size: 14px;
    }

    .tw-simple-services-grid {
        grid-template-columns: 1fr;
    }

    .tw-simple-service-card {
        min-height: 250px;
        padding: 28px 24px;
    }
}

@media (max-width: 480px) {
    .tw-achievement-bar {
        grid-template-columns: 1fr;
    }

    .tw-achievement-item,
    .tw-achievement-item:nth-child(odd),
    .tw-achievement-item:nth-last-child(-n+2) {
        min-height: auto;
        padding: 17px 14px !important;
        border-right: 0;
        border-bottom: 1px solid #e4e9f2;
    }

    .tw-achievement-item:last-child {
        border-bottom: 0;
    }

    .tw-simple-service-layout {
        gap: 18px;
    }

    .tw-simple-service-icon {
        flex-basis: 62px;
        width: 62px;
        height: 62px;
    }

    .tw-simple-service-icon svg {
        width: 29px;
        height: 29px;
    }

    .tw-simple-service-content h3 {
        font-size: 18px;
    }
}
.tw-industry-solutions {
    position: relative;
    padding: 95px 0 100px;
    overflow: hidden;
    color: #0a1734;
    background:
        radial-gradient(
            circle at 50% 12%,
            rgba(35, 103, 233, .055),
            transparent 30%
        ),
        #fff;
}

.tw-industry-solutions,
.tw-industry-solutions * {
    box-sizing: border-box;
}

.tw-industry-solutions .wrap {
    width: min(1500px, calc(100% - 48px));
    margin: 0 auto;
}

/* Common headings */

.tw-industry-heading,
.tw-products-heading {
    max-width: 900px;
    margin: 0 auto 45px;
    text-align: center;
}

.tw-industry-heading > span,
.tw-products-heading > span {
    display: inline-block;
    margin-bottom: 12px;
    color: #2865e8;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .15em;
}

.tw-industry-heading h2,
.tw-products-heading h2 {
    margin: 0 0 13px;
    color: #081631;
    font-size: clamp(31px, 3.2vw, 48px);
    font-weight: 800;
    letter-spacing: -.04em;
    line-height: 1.15;
}

.tw-industry-heading p,
.tw-products-heading p {
    margin: 0;
    color: #68748c;
    font-size: 16px;
    line-height: 1.7;
}

/* Industry grid */

.tw-industry-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 18px;
}

.tw-industry-card {
    position: relative;
    min-width: 0;
    min-height: 405px;
    display: flex;
    flex-direction: column;
    padding: 30px 26px 26px;
    overflow: hidden;
    background: #fff;
    border: 1px solid #e2e7f0;
    border-radius: 11px;
    box-shadow: 0 8px 30px rgba(14, 39, 79, .055);
    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease;
}

.tw-industry-card:hover {
    transform: translateY(-8px);
    border-color: var(--industry-color);
    box-shadow: 0 22px 50px rgba(18, 45, 95, .13);
}

.tw-industry-card-head {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 28px;
}

.tw-industry-icon {
    flex: 0 0 51px;
    width: 51px;
    height: 51px;
    display: grid;
    place-items: center;
    color: var(--industry-color);
    background: color-mix(
        in srgb,
        var(--industry-color) 10%,
        white
    );
    border-radius: 11px;
    font-size: 28px;
    transition: .3s ease;
}

.tw-industry-card:hover .tw-industry-icon {
    color: #fff;
    background: var(--industry-color);
    transform: rotate(-5deg);
}

.tw-industry-card-head h3 {
    margin: 0;
    color: #111a30;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.35;
}

.tw-industry-card-head small {
    display: block;
    margin-top: 4px;
    color: var(--industry-color);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.tw-industry-card ul {
    display: grid;
    gap: 13px;
    margin: 0 0 27px;
    padding: 0;
    list-style: none;
}

.tw-industry-card li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: #5d687d;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.55;
}

.tw-industry-card li > span {
    flex: 0 0 5px;
    width: 5px;
    height: 5px;
    margin-top: 8px;
    background: var(--industry-color);
    border-radius: 50%;
}

.tw-industry-link {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    width: fit-content;
    margin-top: auto;
    color: var(--industry-color);
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
    transition: gap .25s ease;
}

.tw-industry-link:hover {
    color: var(--industry-color);
    gap: 16px;
}

.tw-industry-link svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tw-industry-bottom-line {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 5px;
    background: var(--industry-color);
    transform: scaleX(.75);
    transform-origin: left;
    transition: transform .3s ease;
}

.tw-industry-card:hover .tw-industry-bottom-line {
    transform: scaleX(1);
}

/* Products */

.tw-products-heading {
    margin-top: 75px;
    margin-bottom: 35px;
}

.tw-product-grid {
    display: grid;
    grid-template-columns: repeat(9, minmax(0, 1fr));
    gap: 13px;
}

.tw-product-card,
.tw-all-products {
    min-width: 0;
    min-height: 185px;
    text-decoration: none;
    border-radius: 11px;
}

.tw-product-card {
    position: relative;
    display: flex;
    align-items: center;
    flex-direction: column;
    padding: 26px 14px 18px;
    overflow: hidden;
    color: #101a32;
    background: #fff;
    border: 1px solid #e3e8f1;
    box-shadow: 0 7px 24px rgba(20, 42, 82, .055);
    text-align: center;
    transition: .3s ease;
}

.tw-product-card::before {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 4px;
    background: var(--product-color);
    transform: scaleX(0);
    transition: transform .3s ease;
}

.tw-product-card:hover {
    color: #101a32;
    border-color: var(--product-color);
    transform: translateY(-7px);
    box-shadow: 0 18px 38px rgba(18, 43, 90, .12);
}

.tw-product-card:hover::before {
    transform: scaleX(1);
}

.tw-product-icon {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    margin-bottom: 18px;
    color: var(--product-color);
    background: color-mix(
        in srgb,
        var(--product-color) 10%,
        white
    );
    border-radius: 10px;
    font-size: 25px;
    transition: .3s ease;
}

.tw-product-card:hover .tw-product-icon {
    color: #fff;
    background: var(--product-color);
    transform: scale(1.08);
}

.tw-product-card h3 {
    margin: 0;
    color: #101a32;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.45;
}

.tw-product-arrow {
    position: absolute;
    right: 11px;
    bottom: 9px;
    color: var(--product-color);
    font-size: 13px;
    opacity: 0;
    transform: translate(-4px, 4px);
    transition: .25s ease;
}

.tw-product-card:hover .tw-product-arrow {
    opacity: 1;
    transform: translate(0);
}

/* View all products */

.tw-all-products {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 15px;
    padding: 20px;
    color: #fff;
    background: linear-gradient(145deg, #1767ef, #084acf);
    box-shadow: 0 14px 32px rgba(16, 88, 224, .25);
    text-align: center;
    transition: .3s ease;
}

.tw-all-products:hover {
    color: #fff;
    transform: translateY(-7px);
    box-shadow: 0 20px 42px rgba(16, 88, 224, .32);
}

.tw-all-products strong {
    font-size: 15px;
    font-weight: 800;
    line-height: 1.45;
}

.tw-all-products svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform .25s ease;
}

.tw-all-products:hover svg {
    transform: translateX(5px);
}

/* Tablet */

@media (max-width: 1250px) {
    .tw-industry-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .tw-product-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .tw-industry-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .tw-product-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Mobile */

@media (max-width: 600px) {
    .tw-industry-solutions {
        padding: 65px 0;
    }

    .tw-industry-solutions .wrap {
        width: min(100% - 28px, 1500px);
    }

    .tw-industry-heading,
    .tw-products-heading {
        margin-bottom: 30px;
    }

    .tw-industry-heading h2,
    .tw-products-heading h2 {
        font-size: 32px;
    }

    .tw-industry-heading p,
    .tw-products-heading p {
        font-size: 14px;
    }

    .tw-industry-grid {
        grid-template-columns: 1fr;
    }

    .tw-industry-card {
        min-height: 365px;
    }

    .tw-products-heading {
        margin-top: 60px;
    }

    .tw-product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .tw-product-card,
    .tw-all-products {
        min-height: 165px;
    }
}

@media (max-width: 380px) {
    .tw-product-grid {
        grid-template-columns: 1fr;
    }
}
/* =========================================================
   CLIENT UNIVERSE SECTION
========================================================= */

.client-universe {
    --client-cyan: #50dcff;
    --client-blue: #2c75ff;
    --client-green: #4bf5aa;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 110px 24px 105px;
    color: #fff;
    background:
        radial-gradient(
            circle at 86% 40%,
            rgba(24, 135, 210, .25),
            transparent 31%
        ),
        linear-gradient(135deg, #03112d 0%, #061b3d 55%, #0b3761 100%);
}

.client-universe-grid {
    position: absolute;
    inset: 0;
    z-index: -2;
    opacity: .28;
    pointer-events: none;
    background-image:
        linear-gradient(
            rgba(88, 173, 255, .12) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(88, 173, 255, .12) 1px,
            transparent 1px
        );
    background-size: 72px 72px;
    mask-image: linear-gradient(
        to bottom,
        black,
        rgba(0, 0, 0, .6),
        transparent
    );
}

.client-universe-glow {
    position: absolute;
    top: 150px;
    right: -200px;
    z-index: -1;
    width: 650px;
    height: 650px;
    border-radius: 50%;
    background: rgba(31, 160, 235, .16);
    filter: blur(120px);
    pointer-events: none;
}

.client-universe-inner {
    width: min(1640px, 100%);
    margin: 0 auto;
}

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

.client-universe-heading {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(320px, .8fr);
    align-items: end;
    gap: 80px;
    margin-bottom: 55px;
}

.client-universe-kicker {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 20px;
    color: #55ddff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.client-universe-kicker span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #51f3ac;
    box-shadow:
        0 0 0 5px rgba(81, 243, 172, .08),
        0 0 16px rgba(81, 243, 172, .8);
}

.client-universe-heading h2 {
    max-width: 760px;
    margin: 0;
    font-size: clamp(38px, 4vw, 67px);
    font-weight: 500;
    letter-spacing: -.045em;
    line-height: 1.04;
}

.client-universe-heading h2 strong {
    display: block;
    color: #55dcff;
    font-weight: 800;
}

.client-universe-summary {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 35px;
    padding-bottom: 7px;
}

.client-universe-summary > p {
    max-width: 370px;
    margin: 0;
    color: #9cb2d3;
    font-size: 15px;
    line-height: 1.8;
}

.client-universe-count {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-shrink: 0;
}

.client-universe-count strong {
    color: #fff;
    font-size: 47px;
    font-weight: 850;
    letter-spacing: -.06em;
    line-height: 1;
}

.client-universe-count span {
    color: #809abc;
    font-size: 10px;
    font-weight: 750;
    letter-spacing: .1em;
    line-height: 1.45;
    text-transform: uppercase;
}

/* =========================================================
   STREAM CONTAINER
========================================================= */

.client-logo-stream {
    overflow: hidden;
    border: 1px solid rgba(102, 182, 255, .22);
    border-radius: 20px;
    background: rgba(2, 20, 53, .62);
    box-shadow:
        0 35px 90px rgba(0, 7, 25, .25),
        inset 0 1px rgba(255, 255, 255, .025);
    backdrop-filter: blur(12px);
}

.client-stream-top {
    min-height: 54px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 0 24px;
    border-bottom: 1px solid rgba(94, 166, 240, .15);
}

.client-stream-top > div {
    display: flex;
    align-items: center;
    gap: 11px;
}

.client-stream-top strong {
    color: #8bc7ff;
    font-size: 10px;
    font-weight: 850;
    letter-spacing: .17em;
}

.client-stream-top > span {
    color: #55769d;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.client-stream-live {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #4bf5aa;
    box-shadow:
        0 0 0 5px rgba(75, 245, 170, .07),
        0 0 15px rgba(75, 245, 170, .85);
}

/* =========================================================
   MARQUEE
========================================================= */

.client-marquee {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: 27px 0;
}

.client-marquee-track {
    width: max-content;
    display: flex;
    gap: 16px;
    animation: clientMarquee 42s linear infinite;
    will-change: transform;
}

.client-marquee-group {
    display: flex;
    align-items: stretch;
    gap: 16px;
    padding-right: 0;
}

.client-marquee:hover .client-marquee-track {
    animation-play-state: paused;
}

@keyframes clientMarquee {
    from {
        transform: translate3d(0, 0, 0);
    }

    to {
        transform: translate3d(calc(-50% - 8px), 0, 0);
    }
}

.client-marquee-fade {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 5;
    width: 90px;
    pointer-events: none;
}

.client-marquee-fade-left {
    left: 0;
    background: linear-gradient(
        to right,
        #061a3b 0%,
        rgba(6, 26, 59, .88) 25%,
        transparent 100%
    );
}

.client-marquee-fade-right {
    right: 0;
    background: linear-gradient(
        to left,
        #061a3b 0%,
        rgba(6, 26, 59, .88) 25%,
        transparent 100%
    );
}

/* =========================================================
   CLIENT LOGO CARD
========================================================= */

.client-logo-card {
    position: relative;
    width: 245px;
    min-width: 245px;
    height: 238px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 18px;
    border: 1px solid rgba(88, 169, 249, .24);
    border-radius: 16px;
    background:
        linear-gradient(
            145deg,
            rgba(12, 44, 91, .92),
            rgba(5, 25, 59, .95)
        );
    box-shadow:
        inset 0 1px rgba(255, 255, 255, .025),
        0 18px 35px rgba(0, 7, 25, .15);
    transition:
        transform .3s ease,
        border-color .3s ease,
        background .3s ease;
}

.client-logo-card:hover {
    z-index: 2;
    transform: translateY(-7px);
    border-color: rgba(79, 218, 255, .58);
    background:
        linear-gradient(
            145deg,
            rgba(15, 55, 108, .98),
            rgba(6, 31, 71, .98)
        );
}

.client-logo-card-number {
    position: absolute;
    top: 14px;
    left: 17px;
    z-index: 2;
    color: #6382a8;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .07em;
}

.client-logo-card-live {
    position: absolute;
    top: 15px;
    right: 15px;
    z-index: 2;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #4bf5aa;
    box-shadow:
        0 0 0 5px rgba(75, 245, 170, .06),
        0 0 14px #4bf5aa;
}

.client-logo-media {
    width: 100%;
    height: 130px;
    flex: 0 0 130px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 14px;
    border: 1px solid rgba(211, 229, 249, .75);
    border-radius: 12px;
    background:
        linear-gradient(rgba(17, 83, 153, .05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(17, 83, 153, .05) 1px, transparent 1px),
        #fff;
    background-size: 25px 25px;
}

/*
 * This prevents every client logo from escaping the white box.
 */
.client-logo-media img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    display: block;
    object-fit: contain !important;
    object-position: center;
    border-radius: 0;
}

.client-logo-details {
    min-width: 0;
    padding-top: 14px;
}

.client-logo-details h3 {
    overflow: hidden;
    margin: 0 0 5px;
    color: #fff;
    font-size: 14px;
    font-weight: 780;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.client-logo-details span {
    display: block;
    overflow: hidden;
    color: #6683a8;
    font-size: 10px;
    font-weight: 650;
    letter-spacing: .03em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.client-logo-corner {
    position: absolute;
    right: 12px;
    bottom: 12px;
    width: 18px;
    height: 18px;
    border-right: 1px solid rgba(79, 218, 255, .5);
    border-bottom: 1px solid rgba(79, 218, 255, .5);
}

/* =========================================================
   CTA
========================================================= */

.client-universe-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    margin-top: 36px;
    padding: 31px 35px;
    border: 1px solid rgba(101, 181, 255, .23);
    border-radius: 17px;
    background:
        linear-gradient(
            120deg,
            rgba(5, 29, 67, .85),
            rgba(17, 66, 109, .55)
        );
}

.client-universe-cta > div > span {
    display: block;
    margin-bottom: 11px;
    color: #50dcff;
    font-size: 10px;
    font-weight: 850;
    letter-spacing: .16em;
}

.client-universe-cta h3 {
    margin: 0;
    color: #fff;
    font-size: clamp(20px, 2.1vw, 30px);
    font-weight: 750;
    letter-spacing: -.025em;
}

.client-universe-cta > a {
    min-width: 305px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    padding: 14px 14px 14px 20px;
    color: #fff;
    border: 1px solid rgba(68, 164, 255, .55);
    border-radius: 12px;
    background: rgba(24, 80, 150, .55);
    text-decoration: none;
    transition:
        transform .25s ease,
        border-color .25s ease,
        background .25s ease;
}

.client-universe-cta > a:hover {
    transform: translateY(-3px);
    border-color: #55dcff;
    background: rgba(30, 103, 183, .7);
}

.client-universe-cta > a span {
    font-size: 13px;
    font-weight: 750;
}

.client-universe-cta > a small {
    display: block;
    margin-bottom: 5px;
    color: #74a4d5;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .17em;
}

.client-universe-cta > a i {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    display: grid;
    place-items: center;
    color: #05254e;
    border-radius: 50%;
    background: #58ddff;
    font-size: 20px;
    font-style: normal;
}

/* =========================================================
   EMPTY STATE
========================================================= */

.client-universe-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding: 55px 25px;
    border: 1px solid rgba(101, 181, 255, .22);
    border-radius: 17px;
    background: rgba(3, 24, 58, .65);
    text-align: left;
}

.client-universe-empty > span {
    color: #52ddff;
    font-size: 27px;
}

.client-universe-empty strong {
    display: block;
    margin-bottom: 6px;
    font-size: 17px;
}

.client-universe-empty p {
    margin: 0;
    color: #819abd;
}

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

@media (max-width: 1000px) {
    .client-universe {
        padding: 85px 20px;
    }

    .client-universe-heading {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .client-universe-summary {
        align-items: center;
    }

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

    .client-universe-cta > a {
        width: 100%;
    }
}

@media (max-width: 650px) {
    .client-universe {
        padding: 70px 15px;
    }

    .client-universe-heading h2 {
        font-size: 37px;
    }

    .client-universe-summary {
        align-items: flex-start;
        flex-direction: column;
    }

    .client-stream-top {
        padding: 0 16px;
    }

    .client-stream-top > span {
        display: none;
    }

    .client-marquee {
        padding: 20px 0;
    }

    .client-logo-card {
        width: 215px;
        min-width: 215px;
        height: 220px;
    }

    .client-logo-media {
        height: 117px;
        flex-basis: 117px;
    }

    .client-marquee-fade {
        width: 35px;
    }

    .client-universe-cta {
        padding: 25px 20px;
    }

    .client-universe-cta > a {
        min-width: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .client-marquee-track {
        animation-play-state: paused;
    }
}