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

:root {
    --primary-color: #0F329B;
    --secondary-color: #00B9DF;
    --gradient-color: linear-gradient(45deg, #5f3fe5, #603fe6);
}

body {
    background: #ffffff;
    color: #111827;
    font-size: 14px;
    font-family: "Inter", sans-serif;
    padding-top: var(--site-header-height, 124px);
}

img {
    max-width: 100%;
    height: auto;
}

a {
    text-decoration: none;
}

ul {
    list-style-type: none;
}

p {
    color: #4e4e4e;
}

* {
    box-sizing: border-box;
}

.btn {
    border: none;
    padding: 14px 28px;
    color: #fff;
    font-weight: 600;
    border-radius: 30px;
    cursor: pointer;
    background: var(--secondary-color);
    border: 2px solid transparent;
}

.btn.primary_btn {
    background: var(--primary-color);
}

@keyframes float {
    0% {
        transform: translateY(5px);
    }

    50% {
        transform: translateY(-30px);
    }

    100% {
        transform: translateY(0px);
    }
}

.container {
    width: 96%;
    display: table;
    max-width: 1250px;
    margin: 0 auto;
    position: relative;
}

.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999999;
    background: #fff;
    border-bottom: 1px solid #ededed;
    box-shadow: 0 4px 18px rgba(15, 50, 155, 0);
    transition: box-shadow .25s ease;
}

.header.header-scrolled {
    box-shadow: 0 8px 28px rgba(15, 50, 155, .12);
}

.admin-bar .header {
    top: 32px;
}

.topbar {
    padding: 12px 0;
    max-height: 52px;
    overflow: hidden;
    opacity: 1;
    transition: max-height .28s ease, padding .28s ease, opacity .2s ease;
}

.header.header-scrolled .topbar {
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    opacity: 0;
}

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

.phone a {
    color: var(--primary-color);
    font-weight: bold;
    font-size: 15px;
}

.social {
    display: flex;
    gap: 5px;
}

.social .social_icon {
    background: var(--primary-color);
    color: #fff;
    padding: 10px;
    border-radius: 50%;
    font-size: 12px;
}

/*nav*/
nav .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.menu-wrap ul {
    display: flex;
    gap: 28px;
}

.menu-wrap ul li a {
    font-weight: 600;
    color: #555;
    cursor: pointer;
}

.nav-right {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    align-items: center;
}

.btn_wrap {
    display: flex;
    justify-content: start;
    gap: 15px;
    align-items: center;
}

section {
    padding: 40px 0;
    position: relative;
}

.hero .container {
    /* width: 90%; */
    /* margin: 60px auto 0; */
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 44px;
}

.tag {
    background: #eaf0ff;
    display: inline-block;
    padding: 12px 25px;
    border-radius: 30px;
    color: #003db7;
    margin-bottom: 14px;
}

h1 {
    font-size: 40px;
    line-height: 1.15;
    font-weight: 800;
}

h1 span {
    color: #073dbd;
}

.hero-content p {
    margin-top: 14px;
    color: #666;
    line-height: 1.9;
    font-size: 16px;
    max-width: 700px;
    margin-bottom: 36px;
}

.hero-content-slider {
    min-width: 0;
    position: relative;
}

.hero-content-track {
    position: relative;
}

.hero-content-slide {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(10px);
    transition: opacity .7s ease, transform .7s ease, visibility 0s linear .7s;
}

.hero-content-slide.active {
    position: relative;
    z-index: 1;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    transition-delay: 0s;
}

.hero-content-dots {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 20px;
}

.hero-content-dots button {
    width: 9px;
    height: 9px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: #cbd5e1;
    cursor: pointer;
    transition: width .3s ease, background-color .3s ease;
}

.hero-content-dots button.active {
    width: 26px;
    background: var(--primary-color);
}

.btn.outline {
    background: transparent;
    border: 2px solid #063caf;
    color: #063caf;

}

.clients {
    margin-top: 30px;
}

.clients p {
    margin-bottom: 0;
}

.client-row {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 15px;
}

.avatars {
    display: flex;
}

.avatars img,
.avatars span {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    margin-left: -5px;
}

.avatars span {
    background: #e6ecff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-color);
}

section.solution-section {
    padding-top: 0;
}

.section-title {
    text-align: center;
}

.section-title h2 {
    font-size: 30px;
    line-height: 1.1;
    font-weight: 700;
}

.section-title h2 span {
    color: var(--primary-color);
}

.section-title p {
    margin-top: 20px;
    line-height: 24px;
    font-size: 16px;
    width: 600px;
    margin: 12px auto;
}

.solution-wrapper {
    margin-top: 30px;
    min-height: 900px;
    position: relative;
}

.solution-card {
    position: absolute;
    width: 285px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 12px;
    padding: 22px;
    box-shadow: 0 8px 18px rgba(0, 0, 0, .18);
}

.solution-card img {
    width: 100%;
    height: 100px;
    object-fit: contain;
}

.solution-card h3 {
    margin-top: 14px;
    font-size: 18px;
    margin-bottom: 0px;
    font-weight: 600;
}

.solution-card p {
    margin-top: 6px;
    /* color: #555; */
    line-height: 1.7;
}

.solution-card .number {
    background: #f5f5f5;
    color: #073db8;
    font-size: 20px;
    font-weight: 600;
    padding: 8px 11px;
    border-radius: 8px;
}

.card1 {
    left: 7%;
    top: 20px;
}

.card2 {
    left: 3%;
    bottom: 170px;
}

.card3 {
    right: 7%;
    top: 0;
    width: 260px;
}

.card4 {
    right: 3%;
    bottom: 150px;
}

.card5 {
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    width: 430px;
}

.center-laptop {
    position: absolute;
    left: 50%;
    top: 150px;
    transform: translateX(-50%);
    width: 563px;
    aspect-ratio: 640 / 360;
}

.center-laptop-decor {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
}

.center-laptop-dock {
    position: absolute;
    z-index: 2;
    top: -8%;
    left: 24px;
    width: 90%;
    aspect-ratio: 1297 / 1213;
}

section.video_wrap {
    padding-bottom: 0;
}

.video_wrapper {
    width: 100%;
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 24px;
    background: #0d1424;
}

.video_wrapper video {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

/* Quote drawer */
body.quote-drawer-open {
    overflow: hidden;
}

.quote-drawer {
    position: fixed;
    inset: 0;
    z-index: 2147480000;
    visibility: hidden;
    pointer-events: none;
}

.quote-drawer.is-open {
    visibility: visible;
    pointer-events: auto;
}

.quote-drawer-backdrop {
    position: absolute;
    inset: 0;
    width: 100%;
    border: 0;
    background: rgba(5, 17, 48, .56);
    opacity: 0;
    cursor: default;
    backdrop-filter: blur(5px);
    transition: opacity .42s ease;
}

.quote-drawer.is-open .quote-drawer-backdrop {
    opacity: 1;
}

.quote-drawer-panel {
    position: absolute;
    top: 0;
    right: 0;
    width: min(620px, 94vw);
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    padding: clamp(38px, 5vw, 68px) clamp(24px, 5vw, 58px) 34px;
    border: 0;
    outline: 0;
    background: linear-gradient(145deg, #f9fbff 0%, #fff 46%, #f5f8ff 100%);
    box-shadow: -30px 0 80px rgba(7, 25, 73, .22);
    transform: translateX(104%);
    transition: transform .58s cubic-bezier(.22, 1, .36, 1);
}

.quote-drawer.is-open .quote-drawer-panel {
    transform: translateX(0);
}

.quote-drawer-accent {
    position: absolute;
    top: -140px;
    right: -110px;
    width: 390px;
    height: 390px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(55, 217, 190, .24), rgba(49, 106, 234, .08) 56%, transparent 70%);
    pointer-events: none;
}

.quote-drawer-close {
    position: absolute;
    z-index: 2;
    top: 22px;
    right: 24px;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(19, 54, 132, .12);
    border-radius: 50%;
    background: #fff;
    color: #122858;
    font-size: 18px;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(13, 40, 105, .1);
    transition: transform .25s, color .25s, box-shadow .25s;
}

.quote-drawer-close:hover {
    color: var(--primary-color);
    transform: rotate(90deg);
    box-shadow: 0 12px 30px rgba(13, 40, 105, .16);
}

.quote-drawer-heading {
    position: relative;
    margin-bottom: 28px;
    padding-right: 48px;
}

.quote-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 10px;
    color: var(--primary-color);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.quote-eyebrow::before {
    width: 26px;
    height: 2px;
    background: #38d4b5;
    content: '';
}

.quote-drawer-heading h2 {
    margin: 0 0 12px;
    color: #0b214e;
    font-size: clamp(35px, 5vw, 54px);
    line-height: .98;
    letter-spacing: -.045em;
}

.quote-drawer-heading p {
    max-width: 480px;
    margin: 0;
    color: #60708f;
    font-size: 15px;
    line-height: 1.65;
}

.quote-form-fields {
    display: grid;
    gap: 14px;
}

.quote-field {
    display: block;
    margin: 0;
}

.quote-drawer .wpcf7-form-control-wrap {
    display: block;
}

.quote-drawer input:not([type="submit"]):not([type="file"]),
.quote-drawer select,
.quote-drawer textarea {
    width: 100%;
    margin: 0;
    border: 1px solid #dbe3f1;
    border-radius: 12px;
    outline: 0;
    background: rgba(255, 255, 255, .92);
    color: #102654;
    font-family: inherit;
    font-size: 14px;
    box-shadow: 0 8px 22px rgba(16, 47, 112, .045);
    transition: border-color .25s, box-shadow .25s, transform .25s;
}

.quote-drawer input:not([type="submit"]):not([type="file"]),
.quote-drawer select {
    height: 54px;
    padding: 0 17px;
}

.quote-drawer textarea {
    min-height: 132px;
    padding: 16px 17px;
    resize: vertical;
}

.quote-drawer input:focus,
.quote-drawer select:focus,
.quote-drawer textarea:focus {
    border-color: #557ce5;
    box-shadow: 0 0 0 4px rgba(72, 112, 224, .11), 0 12px 28px rgba(16, 47, 112, .07);
    transform: translateY(-1px);
}

.quote-drawer ::placeholder {
    color: #8490a8;
    opacity: 1;
}

.quote-upload {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 48px;
    overflow: hidden;
    border: 1px dashed #a9b8d5;
    border-radius: 12px;
    background: #f7faff;
}

.quote-upload-icon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    align-self: stretch;
    gap: 8px;
    padding: 0 16px;
    background: #eaf1ff;
    color: #174da9;
    font-size: 13px;
    font-weight: 700;
}

.quote-upload-icon i {
    color: #24bca1;
    font-size: 17px;
}

.quote-upload .wpcf7-form-control-wrap {
    min-width: 0;
    padding: 0 10px;
}

.quote-upload input[type="file"] {
    max-width: 100%;
    color: #6c7891;
    font-size: 12px;
}

.quote-upload input[type="file"]::file-selector-button {
    display: none;
}

.quote-file-note {
    margin: -5px 2px 0;
    color: #8290aa;
    font-size: 11px;
    font-style: italic;
    line-height: 1.45;
}

.quote-submit {
    position: relative;
    margin-top: 5px;
}

.quote-drawer input.wpcf7-submit {
    width: 100%;
    min-height: 56px;
    border: 0;
    border-radius: 12px;
    background: linear-gradient(115deg, #123b9a, #265ed6 62%, #27bda4);
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 15px 30px rgba(26, 75, 184, .23);
    transition: transform .25s, box-shadow .25s, filter .25s;
}

.quote-drawer input.wpcf7-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 19px 36px rgba(26, 75, 184, .3);
    filter: saturate(1.12);
}

.quote-drawer .wpcf7-spinner {
    position: absolute;
    top: 15px;
    right: 14px;
    margin: 0;
}

.quote-drawer .wpcf7-not-valid-tip {
    margin: 5px 3px 0;
    font-size: 11px;
}

.quote-drawer .wpcf7-response-output {
    margin: 14px 0 0 !important;
    padding: 10px 13px !important;
    border-radius: 9px;
    font-size: 12px;
}

.quote-drawer-trust {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 20px;
    color: #8490a6;
    font-size: 11px;
}

.quote-drawer-trust i {
    color: #26b99f;
}

.quote-drawer.is-open .quote-drawer-heading,
.quote-drawer.is-open .quote-drawer-form,
.quote-drawer.is-open .quote-drawer-trust {
    animation: quote-content-in .6s cubic-bezier(.22, 1, .36, 1) both;
}

.quote-drawer.is-open .quote-drawer-form {
    animation-delay: .08s;
}

.quote-drawer.is-open .quote-drawer-trust {
    animation-delay: .16s;
}

@keyframes quote-content-in {
    from {
        opacity: 0;
        transform: translateX(28px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

section.service_section .section-title {
    margin-bottom: 30px;
}

section.service_section {
    overflow: visible;
    padding-bottom: 80px;
}

section.service_section>.container {
    overflow: visible;
}

section.service_section.service-stack-ready .service_wrapper {
    --stack-index: 0;
    --stack-scale: 1;
    --stack-lift: 0px;
    --stack-brightness: 1;
    position: sticky;
    top: calc(92px + (var(--stack-index) * 11px));
    z-index: calc(10 + var(--stack-index));
    min-height: min(420px, calc(100vh - 150px));
    max-height: 440px;
    overflow: hidden;
    margin-top: 0;
    margin-bottom: 9vh;
    transform: translate3d(0, var(--stack-lift), 0) scale(var(--stack-scale));
    transform-origin: 50% 0;
    filter: brightness(var(--stack-brightness));
    box-shadow:
        0 4px 8px rgba(10, 28, 78, .1),
        0 24px 60px rgba(10, 28, 78, .14);
    will-change: transform, filter;
    transition: box-shadow .25s ease;
}

section.service_section.service-stack-ready .service_wrapper::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset;
    pointer-events: none;
}

section.service_section.service-stack-ready .service_wrapper:last-child {
    margin-bottom: 0;
}

.service_wrapper {
    background: #F7F7FF;
    border: 1px solid #EFEFEF;
    box-shadow: 0 4px 8px 0 rgb(0 0 0 / 25%);
    border-radius: 20px;
    padding: 26px 34px;
    margin-top: 20px;
    display: flex;
    align-items: center;
}

.content {
    flex: 1;
    max-width: 56%;
}

.features ul {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 24px;
}

.features ul li {
    min-width: 120px;
    text-align: center;
    border: 1px solid #cfd4df;
    background: #fff;
    border-radius: 8px;
    padding: 9px 16px;
    font-size: 13px;
    color: #4F4F4F;
}

.content h3 {
    font-size: 25px;
    line-height: 1.3;
    /* font-weight: 800; */
    color: #111;
    margin-bottom: 12px;
}

.content p {
    font-size: 14px;
    color: #4F4F4F;
    line-height: 1.7;
    margin-bottom: 20px;
}

.service-description {
    margin-bottom: 20px;
}

.service-description p {
    display: -webkit-box;
    margin-bottom: 0;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
}

.image_wrap {
    flex: 1;
    text-align: right;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.image_wrap img {
    max-width: 100%;
    max-height: 300px;
    object-fit: contain;
    display: block;
    margin-left: auto;
}

.service_wrapper.right_align {
    background: #F9F9F9;
    flex-direction: row-reverse;
}

.service_wrapper.right_align .content {
    text-align: right;
}

.service_wrapper.right_align .features ul {
    justify-content: end;
}

.service_wrapper.right_align .btn_wrap {
    justify-content: end;
}

.service_wrapper.right_align .image_wrap img {
    margin-left: 0;
}

.service_wrapper.right_align .image_wrap {
    justify-content: flex-start;
    text-align: left;
}

.service_wrapper .btn {
    padding: 11px 20px;
    font-size: 13px;
}

section.cta-section {
    padding: 0;
}

section.cta-section .container {
    background: #1f3ea8;
    border-radius: 18px;
    padding: 0px 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    overflow: hidden;
}

.cta-content {
    max-width: 600px;
}

.sub-title {
    display: block;
    color: #16d3f7;
    font-size: 15px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 10px;
}

.cta-content h2 {
    color: #fff;
    font-size: 24px;
    line-height: 1.15;
    font-weight: 500;
    margin-bottom: 18px;
}

.cta-content p {
    color: #E7E5E5;
    font-size: 15px;
    line-height: 1.7;
}

.cta-button {
    flex-shrink: 0;
}

.cta-button .btn.btn_secondary {
    border-radius: 5px;
}

.project-filter {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 35px 0 45px;
}

.project-filter button {
    border: none;
    background: #f2f4f8;
    color: #444;
    padding: 14px 28px;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
}

.project-filter button.active,
.project-filter button:hover {
    background: var(--primary-color);
    color: #fff;
}

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

.projects-view-all {
    display: flex;
    justify-content: center;
    margin-top: 42px;
}

.projects-view-all .btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 27px;
    box-shadow: 0 14px 30px rgba(15, 50, 155, .2);
}

.projects-view-all .btn i {
    transition: transform .25s ease;
}

.projects-view-all .btn:hover i {
    transform: translateX(4px);
}

.innovion-portfolio-page {
    background: linear-gradient(180deg, #f7f9ff 0, #fff 38%);
}

.portfolio-page-hero {
    overflow: hidden;
    padding: 100px 0 85px;
    background: radial-gradient(circle at 84% 15%, rgba(30, 201, 182, .16), transparent 26%), linear-gradient(135deg, #fff 8%, #eef4ff 100%);
}

.portfolio-page-hero .container {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(360px, .8fr);
    align-items: center;
    gap: 80px;
}

.portfolio-page-hero .tag {
    display: inline-flex;
    margin-bottom: 18px;
}

.portfolio-page-hero h1 {
    max-width: 820px;
    margin: 18px 0 24px;
    color: #101d42;
    font-size: clamp(43px, 5.3vw, 74px);
    line-height: 1.02;
    letter-spacing: -.045em;
}

.portfolio-page-hero h1 span {
    color: var(--primary-color);
}

.portfolio-page-hero p {
    max-width: 690px;
    margin: 0;
    color: #66718a;
    font-size: 16px;
    line-height: 1.75;
}

.portfolio-hero-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 30px;
    color: var(--primary-color);
    font-size: 14px;
    font-weight: 800;
}

.portfolio-hero-panel {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    min-height: 390px;
    padding: 120px 28px 28px;
    border: 1px solid rgba(255, 255, 255, .9);
    border-radius: 35px;
    background: rgba(255, 255, 255, .7);
    box-shadow: 0 35px 80px rgba(22, 59, 132, .14);
    backdrop-filter: blur(15px);
}

.portfolio-panel-orbit {
    position: absolute;
    top: -65px;
    right: -45px;
    width: 245px;
    height: 245px;
    border: 1px solid rgba(24, 65, 168, .14);
    border-radius: 50%;
    animation: portfolio-orbit-spin 20s linear infinite;
}

.portfolio-panel-orbit::before,
.portfolio-panel-orbit::after {
    position: absolute;
    inset: 26px;
    border: 1px dashed rgba(28, 190, 170, .35);
    border-radius: 50%;
    content: '';
}

.portfolio-panel-orbit::after {
    inset: 72px;
    border: 0;
    background: linear-gradient(135deg, #1848ba, #22c9b0);
    box-shadow: 0 18px 45px rgba(25, 73, 182, .26);
}

.portfolio-panel-orbit span {
    position: absolute;
    z-index: 2;
    width: 17px;
    height: 17px;
    border: 4px solid #fff;
    border-radius: 50%;
    background: #20c4aa;
}

.portfolio-panel-orbit span:nth-child(1) {
    top: 5px;
    left: 112px;
}

.portfolio-panel-orbit span:nth-child(2) {
    right: 15px;
    bottom: 44px;
}

.portfolio-panel-orbit span:nth-child(3) {
    bottom: 35px;
    left: 18px;
}

.portfolio-panel-card {
    position: relative;
    z-index: 3;
    display: flex;
    min-height: 130px;
    padding: 22px;
    flex-direction: column;
    justify-content: flex-end;
    border: 1px solid #e9eef8;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 14px 30px rgba(18, 52, 120, .08);
}

.portfolio-panel-card span {
    color: #768098;
    font-size: 12px;
}

.portfolio-panel-card strong {
    margin-top: 8px;
    color: #153ca3;
    font-size: 38px;
    line-height: 1;
}

.portfolio-panel-card:last-child strong {
    font-size: 21px;
}

.innovion-portfolio-page .projects-section {
    padding-top: 55px;
}

.projects-section .project-card {
    transition: transform .58s cubic-bezier(.22, 1, .36, 1), box-shadow .58s cubic-bezier(.22, 1, .36, 1);
}

.page-motion-ready .projects-section .project-card.page-reveal {
    transition:
        opacity .7s ease var(--reveal-delay, 0ms),
        translate .7s cubic-bezier(.2, .7, .2, 1) var(--reveal-delay, 0ms),
        transform .58s cubic-bezier(.22, 1, .36, 1),
        box-shadow .58s cubic-bezier(.22, 1, .36, 1);
}

.projects-section .project-card:hover,
.projects-section .project-card:focus-within {
    z-index: 3;
    transform: translateY(-5px);
    box-shadow: 0 18px 42px rgba(25, 43, 89, .13);
}

.projects-section .project-details-link {
    opacity: 0;
    pointer-events: none;
    transform: translateY(6px);
    transition: color .25s ease, opacity .38s ease, transform .5s cubic-bezier(.22, 1, .36, 1);
}

.projects-section .project-card:hover .project-details-link,
.projects-section .project-card:focus-within .project-details-link,
.projects-section .project-details-link:focus-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
    transition-duration: .25s, .52s, .58s;
}

.project-card-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin-top: 14px;
    padding-top: 13px;
    border-top: 1px solid #edf0f6;
    justify-content: space-between;
}

.project-details-link {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #1e2850;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .01em;
    white-space: nowrap;
    transition: color .25s ease;
}

.project-details-link i {
    display: inline-grid;
    width: 27px;
    height: 27px;
    place-items: center;
    border: 1px solid rgba(33, 69, 183, .18);
    border-radius: 50%;
    color: var(--primary-color);
    background: #f3f6ff;
    font-size: 9px;
    transition: color .25s ease, background-color .25s ease, border-color .25s ease, transform .25s ease;
}

.project-details-link:hover {
    color: var(--primary-color);
}

.project-details-link:hover i {
    color: #fff;
    border-color: var(--primary-color);
    background: var(--primary-color);
    transform: translateX(3px);
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--site-header-height, 82px) + 18px);
}

/* Project case study */
.project-detail-page {
    overflow: hidden;
    background: #fff;
}

.project-detail-hero {
    padding: 45px 0 82px;
    background: radial-gradient(circle at 88% 10%, rgba(31, 198, 176, .15), transparent 28%), linear-gradient(145deg, #f8faff, #edf3ff);
}

.project-back-link {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 45px;
    color: #52617e;
    font-size: 13px;
    font-weight: 700;
}

.project-detail-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, .85fr) minmax(520px, 1.15fr);
    align-items: center;
    gap: 75px;
}

.project-detail-eyebrow {
    color: #178f82;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.project-detail-intro h1 {
    max-width: 700px;
    margin: 17px 0 23px;
    color: #101d42;
    font-size: clamp(45px, 5.4vw, 76px);
    line-height: 1.02;
    letter-spacing: -.05em;
}

.project-detail-intro>p {
    max-width: 650px;
    color: #65718b;
    font-size: 17px;
    line-height: 1.8;
}

.project-detail-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 31px;
}

.project-detail-actions .btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
}

.project-detail-preview {
    overflow: hidden;
    height: 535px;
    border: 1px solid rgba(255, 255, 255, .9);
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 35px 80px rgba(17, 53, 128, .2);
    transform: rotate(1.2deg);
}

.project-detail-browser-bar {
    display: flex;
    align-items: center;
    gap: 7px;
    height: 48px;
    padding: 0 17px;
    border-bottom: 1px solid #e8edf6;
    background: #f8faff;
}

.project-detail-browser-bar>span {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #ff6a69;
}

.project-detail-browser-bar>span:nth-child(2) {
    background: #ffc24b;
}

.project-detail-browser-bar>span:nth-child(3) {
    background: #35c889;
}

.project-detail-browser-bar>div {
    overflow: hidden;
    margin-left: 12px;
    padding: 7px 14px;
    flex: 1;
    border-radius: 8px;
    color: #758098;
    background: #fff;
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.project-detail-preview-scroll {
    height: calc(100% - 48px);
    overflow-y: auto;
    scrollbar-color: var(--primary-color) #e8edf6;
    scrollbar-width: thin;
}

.project-detail-preview-scroll img {
    display: block;
    width: 100%;
    height: auto;
}

.project-detail-facts {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    margin-top: 70px;
    overflow: hidden;
    border: 1px solid #e3e9f5;
    border-radius: 20px;
    background: #e3e9f5;
    box-shadow: 0 15px 35px rgba(22, 53, 115, .07);
}

.project-detail-facts>div {
    min-height: 112px;
    padding: 24px;
    background: rgba(255, 255, 255, .92);
}

.project-detail-facts span {
    display: block;
    margin-bottom: 10px;
    color: #8790a3;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.project-detail-facts strong {
    color: #17213e;
    font-size: 16px;
    line-height: 1.45;
}

.project-case-study {
    padding: 110px 0;
}

.project-case-grid {
    display: grid;
    grid-template-columns: 230px minmax(0, 1fr);
    align-items: start;
    gap: 85px;
}

.project-case-sidebar {
    position: sticky;
    top: 110px;
    padding: 25px;
    border: 1px solid #e7ecf6;
    border-radius: 20px;
    background: #f8faff;
}

.project-case-sidebar>span {
    color: #7d879c;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.project-case-sidebar ul {
    display: flex;
    margin: 18px 0 0;
    padding: 0;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
}

.project-case-sidebar li {
    padding: 8px 11px;
    border: 1px solid #dce5f5;
    border-radius: 99px;
    color: #25488f;
    background: #fff;
    font-size: 11px;
    font-weight: 700;
}

.project-case-content {
    max-width: 930px;
}

.project-section-number {
    display: inline-flex;
    margin-bottom: 15px;
    color: #18aa98;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .12em;
}

.project-case-content h2 {
    margin-bottom: 22px;
    color: #14203e;
    font-size: clamp(30px, 4vw, 46px);
    line-height: 1.12;
    letter-spacing: -.035em;
}

.project-case-content p {
    color: #5f6b82;
    font-size: 16px;
    line-height: 1.9;
}

.project-case-prose {
    margin-bottom: 75px;
}

.project-story-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
    margin-bottom: 75px;
}

.project-story-grid article {
    padding: 35px;
    border: 1px solid #e7ecf6;
    border-radius: 24px;
    background: linear-gradient(150deg, #fff, #f6f9ff);
    box-shadow: 0 18px 40px rgba(22, 52, 115, .07);
}

.project-story-grid article:last-child {
    background: linear-gradient(145deg, #102b72, #1854c7);
}

.project-story-grid article:last-child h2,
.project-story-grid article:last-child p {
    color: #fff;
}

.project-story-grid article:last-child p {
    color: rgba(255, 255, 255, .76);
}

.project-story-grid h2 {
    font-size: 30px;
}

.project-results {
    padding: 42px;
    border-radius: 27px;
    background: #f2f7ff;
}

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

.project-results-grid>div {
    padding: 25px;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 12px 28px rgba(20, 57, 130, .07);
}

.project-results-grid strong {
    display: block;
    color: var(--primary-color);
    font-size: 35px;
    line-height: 1;
}

.project-results-grid span {
    display: block;
    margin-top: 10px;
    color: #707b91;
    font-size: 12px;
    line-height: 1.5;
}

.project-detail-cta {
    padding: 15px 0 100px;
}

.project-detail-cta .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    padding: 50px 55px;
    border-radius: 30px;
    background: radial-gradient(circle at 88% 18%, rgba(31, 205, 177, .34), transparent 28%), linear-gradient(120deg, #092566, #174bbb);
    box-shadow: 0 28px 65px rgba(10, 39, 108, .24);
}

.project-detail-cta span {
    color: #c9d8fa;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.project-detail-cta h2 {
    max-width: 760px;
    margin: 10px 0 0;
    color: #fff;
    font-size: clamp(30px, 4vw, 47px);
    line-height: 1.12;
}

.project-detail-cta .btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
    padding: 16px 23px;
    border-radius: 10px;
    color: #153d99;
    background: #fff;
    font-weight: 800;
}

.page-motion-ready .page-reveal {
    opacity: 0;
    translate: 0 26px;
    transition: opacity .7s ease var(--reveal-delay, 0ms), translate .7s cubic-bezier(.2, .7, .2, 1) var(--reveal-delay, 0ms);
}

.page-motion-ready .page-reveal.portfolio-hero-panel,
.page-motion-ready .page-reveal.services-hero-panel,
.page-motion-ready .page-reveal.project-detail-preview {
    translate: 34px 0;
}

.page-motion-ready .page-reveal.is-revealed {
    opacity: 1;
    translate: 0 0;
}

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

/* Services page */
.innovion-services-page {
    overflow: hidden;
    background: #f8faff;
}

.services-page-hero {
    position: relative;
    padding: 95px 0 90px;
    background: radial-gradient(circle at 82% 18%, rgba(33, 202, 186, .17), transparent 25%), linear-gradient(135deg, #fff 15%, #eef4ff 100%);
}

.services-page-hero .container {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(340px, .65fr);
    align-items: center;
    gap: 75px;
}

.services-hero-copy h1 {
    max-width: 820px;
    margin: 20px 0 25px;
    color: #101d42;
    font-size: clamp(45px, 5.5vw, 76px);
    line-height: 1.03;
    letter-spacing: -.052em;
}

.services-hero-copy h1 span {
    color: var(--primary-color);
}

.services-hero-copy>p {
    max-width: 710px;
    color: #68738d;
    font-size: 17px;
    line-height: 1.8;
}

.services-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 13px;
    margin-top: 32px;
}

.services-hero-panel {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    min-height: 390px;
    padding: 72px 30px 30px;
    border: 1px solid rgba(255, 255, 255, .8);
    border-radius: 35px;
    background: rgba(255, 255, 255, .65);
    box-shadow: 0 35px 80px rgba(23, 58, 128, .14);
    backdrop-filter: blur(14px);
}

.services-orbit {
    position: absolute;
    top: -50px;
    right: -45px;
    width: 220px;
    height: 220px;
    border: 1px solid rgba(35, 83, 194, .15);
    border-radius: 50%;
    animation: services-spin 18s linear infinite;
}

.services-orbit::before,
.services-orbit::after {
    position: absolute;
    inset: 22px;
    border: 1px dashed rgba(28, 190, 170, .35);
    border-radius: 50%;
    content: '';
}

.services-orbit::after {
    inset: 60px;
    background: linear-gradient(135deg, var(--primary-color), #20c5ab);
    box-shadow: 0 15px 40px rgba(27, 83, 194, .27);
}

.services-orbit span {
    position: absolute;
    z-index: 1;
    width: 18px;
    height: 18px;
    border: 4px solid #fff;
    border-radius: 50%;
    background: #22c5aa;
    box-shadow: 0 5px 15px rgba(20, 70, 150, .2);
}

.services-orbit span:nth-child(1) {
    top: 9px;
    left: 96px
}

.services-orbit span:nth-child(2) {
    right: 18px;
    bottom: 35px
}

.services-orbit span:nth-child(3) {
    bottom: 28px;
    left: 22px
}

.services-hero-stat {
    position: relative;
    z-index: 2;
    display: flex;
    min-height: 128px;
    padding: 22px;
    flex-direction: column;
    justify-content: flex-end;
    border: 1px solid #edf1fa;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 15px 30px rgba(15, 51, 124, .08);
}

.services-hero-stat:first-of-type {
    grid-column: 1/-1;
}

.services-hero-stat strong {
    color: #153ca3;
    font-size: 38px;
    line-height: 1;
}

.services-hero-stat span {
    margin-top: 9px;
    color: #768097;
    font-size: 13px;
}

.services-catalog {
    padding: 100px 0;
}

.services-page-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    margin-top: 50px;
}

.services-page-card {
    overflow: hidden;
    border: 1px solid #e8edf7;
    border-radius: 25px;
    background: #fff;
    box-shadow: 0 18px 45px rgba(18, 48, 112, .08);
    transition: transform .35s, box-shadow .35s;
}

.services-page-card:hover {
    transform: translateY(-9px);
    box-shadow: 0 28px 65px rgba(18, 48, 112, .15);
}

.service-card-visual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    height: 205px;
    overflow: hidden;
    padding: 20px;
    background: linear-gradient(145deg, #edf3ff, #f8fbff);
}

.service-card-visual::after {
    position: absolute;
    right: -55px;
    bottom: -75px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: rgba(56, 204, 183, .12);
    content: '';
}

.service-card-visual img {
    position: relative;
    z-index: 1;
    width: 66%;
    max-height: 175px;
    object-fit: contain;
}

.service-card-number {
    position: absolute;
    top: 17px;
    left: 20px;
    color: rgba(20, 57, 151, .12);
    font-size: 62px;
    font-weight: 900;
    line-height: 1;
}

.service-card-icon {
    position: absolute;
    z-index: 2;
    bottom: 18px;
    left: 20px;
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    border-radius: 14px;
    background: linear-gradient(135deg, #163da3, #236ae0);
    color: #fff;
    box-shadow: 0 12px 24px rgba(22, 61, 163, .25);
}

.service-card-body {
    padding: 27px 25px 29px;
}

.service-card-body h2 {
    min-height: 56px;
    margin-bottom: 12px;
    color: #17203d;
    font-size: 22px;
    line-height: 1.25;
}

.service-card-description {
    display: -webkit-box;
    min-height: 66px;
    overflow: hidden;
    color: #687186;
    font-size: 14px;
    line-height: 1.65;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.service-card-description p {
    margin: 0;
}

.service-card-body ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px 12px;
    margin: 20px 0 24px;
    padding: 0;
    list-style: none;
}

.service-card-body li {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #43506b;
    font-size: 12px;
}

.service-card-body li i {
    color: #20bca2;
}

.service-card-link {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--primary-color);
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.service-card-link i {
    transition: transform .25s;
}

.service-card-link:hover i {
    transform: translateX(5px)
}

.services-process {
    padding: 95px 0;
    background: #fff;
}

.services-process-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin-top: 48px;
    counter-reset: service-step;
}

.services-process-grid>div {
    position: relative;
    padding: 32px 25px 28px;
    overflow: hidden;
    border: 1px solid #e8edf8;
    border-radius: 22px;
    background: linear-gradient(160deg, #fff, #f6f9ff);
}

.services-process-grid>div::after {
    position: absolute;
    top: 58px;
    right: -15px;
    width: 30px;
    height: 2px;
    background: #b9c8ec;
    content: '';
}

.services-process-grid>div:last-child::after {
    display: none;
}

.services-process-grid>div>span {
    position: absolute;
    top: 17px;
    right: 19px;
    color: rgba(20, 58, 160, .1);
    font-size: 46px;
    font-weight: 900;
}

.services-process-grid>div>i {
    display: grid;
    width: 56px;
    height: 56px;
    margin-bottom: 22px;
    place-items: center;
    border-radius: 17px;
    background: #eaf1ff;
    color: var(--primary-color);
    font-size: 22px;
}

.services-process-grid h3 {
    margin-bottom: 9px;
    font-size: 20px;
}

.services-process-grid p {
    margin: 0;
    color: #6f788c;
    font-size: 13px;
    line-height: 1.7
}

.services-page-cta {
    padding: 35px 0 90px;
}

.services-page-cta .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 35px;
    padding: 50px 55px;
    border-radius: 30px;
    background: radial-gradient(circle at 90% 20%, rgba(35, 212, 188, .35), transparent 28%), linear-gradient(120deg, #092565, #1749bd);
    box-shadow: 0 28px 65px rgba(10, 39, 108, .25);
}

.services-page-cta h2 {
    max-width: 750px;
    margin: 15px 0 10px;
    color: #fff;
    font-size: clamp(29px, 4vw, 46px);
    line-height: 1.12;
}

.services-page-cta p {
    margin: 0;
    color: rgba(255, 255, 255, .76)
}

.services-page-cta .tag {
    color: #dffaf5;
    background: rgba(255, 255, 255, .1);
}

.services-page-cta .btn {
    flex: 0 0 auto;
    padding: 16px 24px;
    border-radius: 9px;
    background: #fff;
    color: #123b99;
    font-weight: 800;
    box-shadow: 0 14px 30px rgba(0, 0, 0, .18)
}

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

.project-card {
    position: relative;
    background: #fff;
    border-radius: 7px;
    overflow: hidden;
    border: 1px solid #e7e7e7;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
    transition: .35s;
}


.project-card:hover {
    transform: translateY(-8px);
}

.project-showcase {
    position: relative;
    padding: 10px 10px 0;
    background: transparent;
}

.project-monitor {
    position: relative;
    width: 100%;
    aspect-ratio: 346 / 312;
}

.project-monitor-screen {
    position: absolute;
    z-index: 1;
    top: 2.4%;
    left: 2%;
    width: 96%;
    height: 59.5%;
    overflow: hidden;
    background: #fff;
}

.project-monitor-frame {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: block;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.project-scroll {
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: auto;
    scrollbar-color: var(--primary-color) #e5eaf2;
    scrollbar-width: thin;
}

.project-scroll::-webkit-scrollbar {
    width: 6px;
}

.project-scroll::-webkit-scrollbar-track {
    background: #e5eaf2;
}

.project-scroll::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: var(--primary-color);
}

.project-scroll:focus-visible {
    outline: 3px solid rgba(33, 69, 183, .3);
    outline-offset: -3px;
}

.project-scroll img {
    display: block;
    width: 100%;
    height: auto;
}

.project-preview-placeholder {
    min-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 12px;
    color: #6d7890;
    background: linear-gradient(145deg, #f7f9fc, #e7edf6);
    text-align: center;
}

.project-preview-placeholder i {
    color: var(--primary-color);
    font-size: 34px;
}

.project-scroll-hint {
    position: absolute;
    right: 10px;
    bottom: 10px;
    z-index: 2;
    padding: 6px 9px;
    border-radius: 20px;
    color: #fff;
    background: rgba(10, 22, 55, .78);
    font-size: 10px;
    pointer-events: none;
    transition: opacity .25s;
}

.project-showcase:hover .project-scroll-hint,
.project-showcase:focus-within .project-scroll-hint {
    opacity: 0;
}

.project-visit-overlay {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(7, 18, 48, .42);
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s ease;
}

.project-showcase:hover .project-visit-overlay,
.project-showcase:focus-within .project-visit-overlay {
    opacity: 1;
}

.project-visit-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: calc(100% - 30px);
    padding: 10px 15px;
    border: 1px solid rgba(255, 255, 255, .7);
    border-radius: 30px;
    color: #fff;
    background: linear-gradient(135deg, var(--primary-color), #16d3f7);
    box-shadow: 0 10px 28px rgba(6, 25, 70, .28);
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    pointer-events: auto;
    transform: translateY(10px);
    transition: transform .3s ease, box-shadow .3s ease;
}

.project-showcase:hover .project-visit-btn,
.project-showcase:focus-within .project-visit-btn {
    transform: translateY(0);
}

.project-visit-btn:hover {
    color: #fff;
    box-shadow: 0 14px 34px rgba(6, 25, 70, .4);
}

.project-image {
    padding: 10px;
    /* background: #f7f7f7; */
}

.project-image img {
    width: 100%;
    display: block;
    border-radius: 10px;
}

.project-content {
    padding: 20px;
}

.project-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
    min-height: 58px;
}

.project-top h3 {
    font-size: 16px;
    margin-bottom: 4px;
    color: #222;
}

.project-top span {
    color: var(--primary-color);
    font-size: 13px;
}

.likes {
    color: var(--secondary-color);
    font-size: 20px;
    font-weight: 600;
    white-space: nowrap;
}

.project-like-button {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px;
    border: 0;
    color: var(--secondary-color);
    background: transparent;
    cursor: pointer;
    transition: transform .2s ease, color .2s ease;
}

.project-like-button:hover,
.project-like-button[aria-pressed="true"] {
    color: var(--primary-color);
    transform: scale(1.08);
}

.projects-grid.is-filtering .project-card {
    pointer-events: none;
}

.project-card[hidden] {
    display: none !important;
}

.project-like-button:disabled {
    cursor: default;
}

.project-like-button[aria-pressed="true"] i {
    animation: project-like-pop .3s ease;
}

@keyframes project-like-pop {
    50% {
        transform: scale(1.35) rotate(-8deg);
    }
}

.project-content p {
    color: #4D4D4D;
    font-size: 13px;
    line-height: 20px;
}

.project-description {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.project-footer {
    margin-top: 12px;
}

.project-footer ul {
    display: flex;
    /* justify-content: space-between; */
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.project-footer .tags li {
    background: #f2f4f8;
    padding: 8px 14px;
    border-radius: 6px;
    font-size: 11px;
}

.project-footer .tags li a {
    color: #2145b7;
}

.project-footer .arrow {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #2145b7;
    color: #fff;
    text-decoration: none;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 13px;
    transition: .3s;
}

.project-footer .arrow:hover {
    background: #122f97;
}

.project-footer .tags li span {
    color: #2145b7;
}

.project-empty-state {
    max-width: 620px;
    margin: 40px auto 0;
    padding: 45px 25px;
    border: 1px dashed #cdd6e6;
    border-radius: 12px;
    color: #647087;
    background: #f8faff;
    text-align: center;
}

.project-empty-state i {
    margin-bottom: 15px;
    color: var(--primary-color);
    font-size: 38px;
}

.project-empty-state h3 {
    margin-bottom: 8px;
    color: #202b45;
}

.portfolio-case {
    /* padding: 80px 0 95px; */
    overflow: hidden;
    background: linear-gradient(180deg, #fff 0%, #f4f7ff 100%);
}

.portfolio-case .container {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(310px, .8fr);
    align-items: stretch;
    gap: 28px;
}

.software-slider-shell {
    min-width: 0;
}

.software-slider-viewport {
    position: relative;
    min-height: 680px;
    overflow: hidden;
    border-radius: 28px;
    background: #0b1534;
    box-shadow: 0 32px 70px rgba(16, 40, 101, .19);
}

.software-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    isolation: isolate;
    transition: opacity .8s ease;
}

.software-slide.is-active {
    z-index: 2;
    opacity: 1;
    pointer-events: auto;
}

.software-slide-image {
    position: absolute;
    inset: 0;
    z-index: -3;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    filter: saturate(.85) brightness(.82);
    transform: scale(1.075);
    transition: transform 7s cubic-bezier(.2, .7, .2, 1), filter .8s ease;
}

.software-slide.is-active .software-slide-image {
    filter: saturate(1) brightness(.88);
    transform: scale(1);
}

.software-slide-shade {
    position: absolute;
    inset: 0;
    z-index: -2;
    background: linear-gradient(90deg, rgba(7, 15, 42, .97) 0%, rgba(8, 19, 50, .91) 39%, rgba(8, 17, 43, .28) 72%, rgba(8, 17, 43, .05) 100%);
}

.software-slide-content {
    display: flex;
    box-sizing: border-box;
    width: min(60%, 650px);
    min-height: 680px;
    padding: 55px 52px 48px;
    flex-direction: column;
    justify-content: center;
    color: #fff;
}

.software-kicker {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 9px;
    padding: 8px 12px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 99px;
    color: #fff;
    background: rgba(255, 255, 255, .09);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
    backdrop-filter: blur(8px);
}

.software-kicker i {
    color: var(--software-accent);
}

.software-slide-content h2 {
    margin: 23px 0 15px;
    color: #fff;
    font-size: clamp(34px, 3.6vw, 55px);
    line-height: 1.04;
    letter-spacing: -.04em;
}

.software-slide-content>p {
    max-width: 590px;
    color: rgba(255, 255, 255, .72);
    font-size: 14px;
    line-height: 1.7;
}

.software-slide-content>* {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .45s ease, transform .65s cubic-bezier(.22, 1, .36, 1);
}

.software-slide.is-active .software-slide-content>* {
    opacity: 1;
    transform: translateY(0);
}

.software-slide.is-active .software-slide-content>h2 {
    transition-delay: .08s;
}

.software-slide.is-active .software-slide-content>p {
    transition-delay: .15s;
}

.software-slide.is-active .software-story-points {
    transition-delay: .22s;
}

.software-slide.is-active .software-slide-footer {
    transition-delay: .3s;
}

.software-story-points {
    display: grid;
    gap: 8px;
    margin-top: 25px;
}

.software-story-points>div {
    position: relative;
    display: grid;
    grid-template-columns: 28px 82px minmax(0, 1fr);
    align-items: baseline;
    gap: 9px;
    padding: 11px 0;
    opacity: 0;
    transform: translateX(-28px);
    transition: opacity .48s ease, transform .68s cubic-bezier(.16, 1, .3, 1);
}

.software-story-points>div::after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 1px;
    background: linear-gradient(90deg, var(--software-accent), rgba(255, 255, 255, .12) 45%, rgba(255, 255, 255, .04));
    content: '';
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .8s cubic-bezier(.22, 1, .36, 1);
}

.software-slide.is-active .software-story-points>div {
    opacity: 1;
    transform: translateX(0);
}

.software-slide.is-active .software-story-points>div:nth-child(1) {
    transition-delay: .32s;
}

.software-slide.is-active .software-story-points>div:nth-child(2) {
    transition-delay: .42s;
}

.software-slide.is-active .software-story-points>div:nth-child(3) {
    transition-delay: .52s;
}

.software-slide.is-active .software-story-points>div:nth-child(1)::after {
    transition-delay: .42s;
}

.software-slide.is-active .software-story-points>div:nth-child(2)::after {
    transition-delay: .52s;
}

.software-slide.is-active .software-story-points>div:nth-child(3)::after {
    transition-delay: .62s;
}

.software-slide.is-active .software-story-points>div::after {
    transform: scaleX(1);
}

.software-story-points span {
    color: var(--software-accent);
    font-size: 10px;
    font-weight: 900;
    transform: scale(.72);
    transition: transform .45s cubic-bezier(.22, 1, .36, 1);
}

.software-slide.is-active .software-story-points>div span {
    transform: scale(1);
}

.software-story-points strong {
    color: #fff;
    font-size: 12px;
}

.software-story-points p {
    color: rgba(255, 255, 255, .57);
    font-size: 11px;
    line-height: 1.45;
}

.software-slide-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-top: 27px;
}

.software-slide-footer ul {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.software-slide-footer li {
    padding: 6px 9px;
    border-radius: 6px;
    color: #d8e5ff;
    background: rgba(255, 255, 255, .1);
    font-size: 9px;
}

.software-slide-footer>a {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    flex: 0 0 auto;
    padding: 12px 15px;
    border-radius: 9px;
    color: #0b183d;
    background: #fff;
    font-size: 11px;
    font-weight: 800;
    transition: transform .25s ease, box-shadow .25s ease;
}

.software-slide-footer>a:hover {
    color: #0b183d;
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, .2);
}

.software-slider-controls {
    display: grid;
    grid-template-columns: auto minmax(100px, 1fr) 43px 43px;
    align-items: center;
    gap: 10px;
    padding: 18px 5px 0;
}

.software-slider-count {
    display: flex;
    align-items: baseline;
    gap: 4px;
    min-width: 72px;
    color: #73809a;
}

.software-slider-count strong {
    color: #142b6a;
    font-size: 22px;
}

.software-slider-count span {
    font-size: 11px;
}

.software-slider-progress {
    height: 2px;
    overflow: hidden;
    background: #dce3f1;
}

.software-slider-progress span {
    display: block;
    width: 100%;
    height: 100%;
    background: var(--primary-color);
    transform: scaleX(0);
    transform-origin: left;
}

.software-slider-progress span.is-running {
    animation: softwareProgress 7s linear both;
}

.software-showcase.is-paused .software-slider-progress span.is-running {
    animation-play-state: paused;
}

.software-slider-controls button {
    width: 43px;
    height: 43px;
    border: 1px solid #dce4f3;
    border-radius: 50%;
    color: #193b9c;
    background: #fff;
    cursor: pointer;
    transition: color .25s ease, background .25s ease, transform .25s ease;
}

.software-slider-controls button:hover {
    color: #fff;
    background: var(--primary-color);
    transform: translateY(-2px);
}

@keyframes softwareProgress {
    to {
        transform: scaleX(1);
    }
}

.portfolio-right {
    --spot-x: 50%;
    --spot-y: 20%;
    position: relative;
    box-sizing: border-box;
    overflow: hidden;
    padding: 36px 28px 28px;
    border-radius: 24px;
    background: radial-gradient(circle at var(--spot-x) var(--spot-y), rgba(46, 213, 200, .22), transparent 34%), linear-gradient(155deg, #173b9e, #081c58 80%);
    box-shadow: 0 30px 65px rgba(13, 46, 126, .2);
}

.portfolio-right::after {
    position: absolute;
    right: -70px;
    bottom: -70px;
    width: 190px;
    height: 190px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 50%;
    content: '';
}

.portfolio-right-eyebrow {
    position: relative;
    z-index: 1;
    color: #65e2d2;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.portfolio-right h2 {
    position: relative;
    z-index: 1;
    margin: 11px 0 24px;
    color: #fff;
    font-size: clamp(25px, 2.2vw, 34px);
    line-height: 1.15;
    letter-spacing: -.03em;
}

.portfolio-right-line {
    height: 1px;
    margin-bottom: 19px;
    overflow: hidden;
    background: rgba(255, 255, 255, .12);
}

.portfolio-right-line span {
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, #52dfd0, transparent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 1s cubic-bezier(.22, 1, .36, 1) .2s;
}

.portfolio-right.is-visible .portfolio-right-line span {
    transform: scaleX(1);
}

.portfolio-right .feature-box {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    gap: 13px;
    margin-bottom: 8px;
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 12px;
    background: rgba(255, 255, 255, .07);
    opacity: 0;
    transform: translateX(24px);
    transition: opacity .55s ease calc(.18s + var(--benefit-index) * .1s), transform .7s cubic-bezier(.22, 1, .36, 1) calc(.18s + var(--benefit-index) * .1s), background .25s ease;
}

.portfolio-right.is-visible .feature-box {
    opacity: 1;
    transform: translateX(0);
}

.portfolio-right .feature-box:hover {
    background: rgba(255, 255, 255, .13);
}

.portfolio-right .feature-box .icon {
    display: grid;
    width: 32px;
    height: 32px;
    min-width: 32px;
    place-items: center;
    border-radius: 9px;
    color: #0b307c;
    background: #67e3d5;
    font-size: 12px;
}

.portfolio-right .content_wrap h4 {
    margin-bottom: 4px;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
}

.portfolio-right .content_wrap p {
    color: rgba(255, 255, 255, .62);
    font-size: 11px;
    line-height: 1.5;
}

.call-btn {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin-top: 19px;
    padding: 15px;
    border: 1px solid rgba(93, 226, 211, .45);
    border-radius: 12px;
    color: #fff;
    background: rgba(4, 16, 54, .38);
    opacity: 0;
    transform: translateY(15px);
    transition: opacity .55s ease .65s, transform .65s cubic-bezier(.22, 1, .36, 1) .65s, background .25s ease;
}

.portfolio-right.is-visible .call-btn {
    opacity: 1;
    transform: translateY(0);
}

.call-btn:hover {
    color: #fff;
    background: rgba(4, 16, 54, .72);
}

.call-btn>i:first-child {
    display: grid;
    width: 37px;
    height: 37px;
    place-items: center;
    border-radius: 10px;
    color: #0d347e;
    background: #fff;
}

.call-btn div {
    flex: 1;
}

.call-btn span {
    display: block;
    color: rgba(255, 255, 255, .62);
    font-size: 10px;
}

.call-btn strong {
    display: block;
    margin-top: 2px;
    color: #fff;
    font-size: 13px;
}

.call-btn>i:last-child {
    font-size: 11px;
    transition: transform .25s ease;
}

.call-btn:hover>i:last-child {
    transform: translateX(4px);
}

/* Software product detail */
.software-product-page {
    overflow: hidden;
    background: #fff;
}

.software-product-hero {
    position: relative;
    padding: 55px 0 100px;
    background: linear-gradient(145deg, #f8faff, #edf3ff);
}

.software-product-glow {
    position: absolute;
    top: -180px;
    right: -120px;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--software-accent) 24%, transparent), transparent 67%);
}

.software-product-hero-grid {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, .84fr) minmax(520px, 1.16fr);
    align-items: center;
    gap: 65px;
}

.software-product-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 55px;
    color: #60708e;
    font-size: 12px;
    font-weight: 700;
}

.software-product-label {
    display: inline-flex;
    padding: 8px 11px;
    border-radius: 99px;
    color: var(--software-accent);
    background: color-mix(in srgb, var(--software-accent) 11%, white);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.software-product-intro h1 {
    margin: 19px 0 22px;
    color: #101d42;
    font-size: clamp(45px, 5.4vw, 76px);
    line-height: 1.02;
    letter-spacing: -.05em;
}

.software-product-intro>p {
    color: #64718b;
    font-size: 16px;
    line-height: 1.8;
}

.software-product-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 30px;
}

.software-product-actions .btn,
.software-product-demo {
    display: inline-flex;
    align-items: center;
    gap: 9px;
}

.software-product-demo {
    color: #173d9b;
    font-size: 13px;
    font-weight: 800;
}

.software-product-visual {
    position: relative;
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, .9);
    border-radius: 25px;
    background: #fff;
    box-shadow: 0 35px 80px rgba(17, 53, 128, .19);
    transform: perspective(1200px) rotateY(-4deg) rotateX(2deg);
}

.software-product-visual span {
    position: absolute;
    top: 24px;
    left: 24px;
    z-index: 2;
    padding: 7px 10px;
    border-radius: 99px;
    color: #fff;
    background: rgba(8, 19, 52, .72);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    backdrop-filter: blur(7px);
}

.software-product-visual img {
    display: block;
    width: 100%;
    min-height: 440px;
    border-radius: 18px;
    object-fit: cover;
}

.software-product-story {
    padding: 105px 0;
}

.software-product-story-heading {
    max-width: 760px;
    margin-bottom: 45px;
}

.software-product-story-heading>span,
.software-product-section-copy>span,
.software-product-technology .container>div>span,
.software-product-cta span {
    color: var(--software-accent);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.software-product-story-heading h2,
.software-product-section-copy h2,
.software-product-technology h2 {
    margin-top: 12px;
    color: #14203f;
    font-size: clamp(32px, 4.3vw, 52px);
    line-height: 1.12;
    letter-spacing: -.04em;
}

.software-product-story-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.software-product-story-grid article {
    position: relative;
    padding: 34px;
    overflow: hidden;
    border: 1px solid #e4eaf5;
    border-radius: 23px;
    background: linear-gradient(145deg, #fff, #f7f9ff);
}

.software-product-story-grid article>span {
    position: absolute;
    top: 20px;
    right: 23px;
    color: #dce4f3;
    font-size: 42px;
    font-weight: 900;
}

.software-product-story-grid i {
    display: grid;
    width: 44px;
    height: 44px;
    margin-bottom: 28px;
    place-items: center;
    border-radius: 13px;
    color: var(--software-accent);
    background: color-mix(in srgb, var(--software-accent) 10%, white);
}

.software-product-story-grid h3 {
    margin-bottom: 13px;
    color: #182443;
    font-size: 20px;
}

.software-product-story-grid p {
    color: #66728a;
    font-size: 13px;
    line-height: 1.75;
}

.software-product-features {
    padding: 100px 0;
    background: #0c1d4c;
}

.software-product-features .container {
    display: grid;
    grid-template-columns: .75fr 1.25fr;
    gap: 80px;
}

.software-product-section-copy h2 {
    color: #fff;
}

.software-product-section-copy>p {
    margin-top: 22px;
    color: rgba(255, 255, 255, .62);
    font-size: 14px;
    line-height: 1.8;
}

.software-product-feature-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.software-product-feature-grid article {
    padding: 28px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 18px;
    background: rgba(255, 255, 255, .06);
}

.software-product-feature-grid span {
    color: var(--software-accent);
    font-size: 10px;
    font-weight: 900;
}

.software-product-feature-grid h3 {
    margin: 24px 0 9px;
    color: #fff;
    font-size: 17px;
}

.software-product-feature-grid p {
    color: rgba(255, 255, 255, .58);
    font-size: 12px;
    line-height: 1.6;
}

.software-product-technology {
    padding: 90px 0;
}

.software-product-technology .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
}

.software-product-technology .container>div {
    max-width: 650px;
}

.software-product-technology ul {
    display: flex;
    max-width: 500px;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 9px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.software-product-technology li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 14px;
    border: 1px solid #e0e7f3;
    border-radius: 99px;
    color: #27447f;
    background: #f8faff;
    font-size: 11px;
    font-weight: 700;
}

.software-product-technology li i {
    color: var(--software-accent);
}

.software-product-cta {
    padding: 0 0 100px;
}

.software-product-cta .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    padding: 50px;
    border-radius: 28px;
    background: linear-gradient(125deg, #102c72, #184fb9);
    box-shadow: 0 28px 65px rgba(12, 45, 122, .22);
}

.software-product-cta h2 {
    max-width: 760px;
    margin-top: 10px;
    color: #fff;
    font-size: clamp(30px, 4vw, 48px);
    line-height: 1.12;
}

.software-product-cta .btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    flex: 0 0 auto;
    color: #153b95;
    background: #fff;
}

.process-section {
    position: relative;
    /* padding: 50px 0; */
    overflow: hidden;
    background: #fff;
}

.process-section::before {
    content: "";
    position: absolute;
    left: -250px;
    bottom: -280px;
    width: 700px;
    height: 700px;
    border-radius: 50%;
    background: radial-gradient(circle, #2f80ff 0%, rgba(47, 128, 255, 0) 70%);
    display: none;
}

.process-section .container {
    position: relative;
    z-index: 1;
    max-width: 1400px;
}

.process-art {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: block;
    width: 100%;
    height: auto;
    margin: 0 auto;
}

.process-canvas {
    position: relative;
    width: 100%;
    aspect-ratio: 1983 / 793;
    container-type: inline-size;
}

.timeline {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: block;
    height: auto;
    margin: 0;
}

.process-canvas .process-path,
.process-canvas .timeline .circle {
    display: none;
}

.process-canvas .timeline .step {
    width: 21%;
    height: 100%;
}

.process-canvas .timeline .step-1 {
    left: 2%;
}

.process-canvas .timeline .step-2 {
    left: 18.5%;
}

.process-canvas .timeline .step-3 {
    left: 35%;
}

.process-canvas .timeline .step-4 {
    left: 53.5%;
}

.process-canvas .timeline .step-5 {
    left: 72%;
}

.process-canvas .timeline .card {
    width: 100%;
    min-height: 26%;
    padding: 2.2% 5% 2.2% 31%;
    border: 1.5px solid transparent;
    border-radius: 15px;
    background: transparent;
    box-shadow: none;
}

.process-canvas .timeline .card.top {
    top: 7.5%;
    border-color: transparent;
    background: transparent;
    box-shadow: none;
}

.process-canvas .timeline .step-1 .card.top {
    left: 85%;
    top: 5%;
}

.process-canvas .timeline .step-3 .card.top {
    left: 85%;
    top: 5%;
}

.process-canvas .timeline .step-5 .card.top {
    left: 82%;
    top: 5%;
}

.process-canvas .timeline .card.bottom {
    top: 75%;
    left: 80%;
    width: 90%;
}

.process-canvas .timeline .card::after {
    display: none;
}

.process-canvas .timeline .number {
    top: 12%;
    left: 7%;
    z-index: 2;
    width: 18%;
    height: auto;
    aspect-ratio: 1;
    overflow: visible;
    font-size: clamp(13px, 1.3vw, 20px);
}

.process-canvas .timeline .card.top .number::after,
.process-canvas .timeline .card.bottom .number::before {
    content: "";
    position: absolute;
    left: 50%;
    width: 2px;
    transform: translateX(-50%);
    background: repeating-linear-gradient(to bottom,
            #8068ff 0,
            #8068ff 3px,
            transparent 3px,
            transparent 7px);
}

.process-canvas .timeline .card.top .number::after {
    top: calc(100% + 1px);
    height: clamp(30px, 3.7vw, 58px);
    height: 3.9cqw;
}

.process-canvas .timeline .card.bottom .number::before {
    bottom: calc(100% + 1px);
    height: clamp(10px, 1.5vw, 22px);
    height: 1.5cqw;
}

.process-canvas .timeline h3 {
    margin-bottom: 5px;
    font-size: clamp(13px, 1.25vw, 19px);
}

.process-canvas .timeline p {
    max-width: 180px;
    font-size: clamp(9px, .78vw, 12px);
    line-height: 1.5;
}

.process-path {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 320px;
    overflow: visible;
    filter: drop-shadow(0 4px 5px rgba(82, 64, 235, .18));
}

.timeline .step {
    position: absolute;
    top: 0;
    width: 17%;
    height: 100%;
}

.timeline .step-1 {
    left: 1.5%;
}

.timeline .step-2 {
    left: 20.5%;
}

.timeline .step-3 {
    left: 39.5%;
}

.timeline .step-4 {
    left: 58.5%;
}

.timeline .step-5 {
    left: 77.5%;
}

.timeline .circle {
    position: absolute;
    top: 103px;
    left: 50%;
    z-index: 2;
    width: 84px;
    height: 84px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 8px solid #fff;
    border-radius: 50%;
    color: #5637ed;
    background: linear-gradient(145deg, #fff, #f4f3ff);
    box-shadow: 0 8px 22px rgba(47, 36, 145, .18), 0 0 0 1px #dedaff;
    font-size: 31px;
    transform: translateX(-50%);
}

.timeline .step-2 .circle,
.timeline .step-4 .circle {
    top: 163px;
}

.timeline .card {
    position: absolute;
    left: 50%;
    width: 100%;
    min-height: 105px;
    padding: 17px 15px 14px 52px;
    border: 1px solid #e8e6f8;
    border-radius: 14px;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 10px 26px rgba(54, 49, 108, .05);
    transform: translateX(-50%);
}

.timeline .card.top {
    top: 0;
}

.timeline .card.bottom {
    top: 247px;
}

.timeline .card::after {
    content: "";
    position: absolute;
    left: 50%;
    height: 39px;
    border-left: 2px dotted #927dff;
}

.timeline .card.top::after {
    top: 100%;
}

.timeline .card.bottom::after {
    bottom: 100%;
}

.timeline .number {
    position: absolute;
    top: 15px;
    left: 14px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    color: #fff;
    background: linear-gradient(145deg, #8068ff, #4e25e8);
    box-shadow: 0 5px 12px rgba(75, 42, 230, .3);
    font-size: 15px;
    font-weight: 700;
}

.timeline h3 {
    margin: 0 0 7px;
    color: #11162e;
    font-size: 15px;
    font-weight: 700;
}

.timeline p {
    margin: 0;
    color: #4e5670;
    font-size: 11px;
    line-height: 1.55;
}

.timeline .step:hover .circle {
    color: #fff;
    background: linear-gradient(145deg, #8068ff, #4e25e8);
    transform: translateX(-50%) translateY(-5px);
    transition: .3s ease;
}

.process-section::after {
    content: "";
    position: absolute;
    right: -250px;
    bottom: -280px;
    width: 700px;
    height: 700px;
    border-radius: 50%;
    background: radial-gradient(circle, #4ca5ff 0%, rgba(76, 165, 255, 0) 70%);
    display: none;
}

/* Interactive HTML process timeline */
.process-section {
    /* padding: 85px 0 95px; */
    background: linear-gradient(180deg, #fff 0%, #fbfbff 100%);
}

.process-canvas {
    width: 100%;
    aspect-ratio: 1000 / 365;
    min-height: 430px;
}

.process-canvas .timeline {
    position: absolute;
    inset: 0;
    height: 100%;
}

.process-canvas .process-path {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
    filter: drop-shadow(0 5px 7px rgba(82, 64, 235, .14));
}

.process-path-base,
.process-path-progress {
    stroke-width: 8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.process-path-base {
    stroke: #e9e8ff;
}

.process-path-progress {
    stroke: url(#process-line-gradient);
    stroke-width: 7;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
}

.process-path-details circle {
    fill: #a99cff;
    stroke: #fff;
    stroke-width: 3;
    filter: drop-shadow(0 3px 4px rgba(88, 65, 218, .25));
}

.process-path-details .process-start-dot {
    fill: #7158ef;
    stroke-width: 0;
}

.process-end-arrow {
    fill: #8068ff;
    filter: drop-shadow(0 3px 4px rgba(88, 65, 218, .2));
}

.process-animate .process-path-progress {
    animation: processLineFlow 6.2s cubic-bezier(.4, 0, .2, 1) forwards;
}

.process-canvas .timeline .step {
    --step-delay: .55s;
    position: absolute;
    top: 0;
    width: 18%;
    height: 100%;
}

.process-canvas .timeline .step-1 {
    left: 1.5%;
    --step-delay: .55s;
}

.process-canvas .timeline .step-2 {
    left: 20.5%;
    --step-delay: 1.65s;
}

.process-canvas .timeline .step-3 {
    left: 39.5%;
    --step-delay: 2.8s;
}

.process-canvas .timeline .step-4 {
    left: 58.5%;
    --step-delay: 4s;
}

.process-canvas .timeline .step-5 {
    left: 77.5%;
    --step-delay: 5.1s;
}

.process-canvas .timeline .circle {
    position: absolute;
    left: 50%;
    top: 103px;
    z-index: 3;
    width: 86px;
    height: 86px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 8px solid #fff;
    border-radius: 50%;
    color: #765cf5;
    background: linear-gradient(145deg, #fff, #f2f0ff);
    box-shadow: 0 8px 22px rgba(47, 36, 145, .15), 0 0 0 1px #dedaff;
    font-size: 31px;
    opacity: .42;
    transform: translateX(-50%) scale(.78);
}

.process-canvas .timeline .step-2 .circle,
.process-canvas .timeline .step-4 .circle {
    top: 163px;
}

.process-animate .timeline .circle {
    animation: processCircleGlow .7s var(--step-delay) cubic-bezier(.2, .8, .2, 1) forwards;
}

.process-canvas .timeline .card,
.process-canvas .timeline .step .card.top,
.process-canvas .timeline .step .card.bottom {
    position: absolute;
    left: 50%;
    width: 100%;
    min-height: 112px;
    padding: 18px 15px 15px 55px;
    border: 1px solid #e8e6f8;
    border-radius: 15px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 16px 35px rgba(54, 49, 108, .08);
    opacity: 0;
    filter: blur(7px);
    transform: translateX(-50%) translateY(var(--card-shift, -18px)) scale(.94);
}

.process-canvas .timeline .card.top {
    top: 0;
    --card-shift: -18px;
}

.process-canvas .timeline .card.bottom {
    top: 258px;
    --card-shift: 18px;
}

.process-animate .timeline .card {
    animation: processCardReveal .7s calc(var(--step-delay) + .22s) cubic-bezier(.2, .8, .2, 1) forwards;
}

.process-canvas .timeline .card::after {
    content: "";
    position: absolute;
    left: 50%;
    display: block;
    height: 39px;
    border-left: 2px dotted #927dff;
    opacity: 0;
    transform: scaleY(0);
}

.process-canvas .timeline .card.top::after {
    top: 100%;
    transform-origin: top;
}

.process-canvas .timeline .card.bottom::after {
    bottom: 100%;
    transform-origin: bottom;
}

.process-animate .timeline .card::after {
    animation: processConnector .35s calc(var(--step-delay) + .05s) ease-out forwards;
}

.process-canvas .timeline .number {
    position: absolute;
    top: 15px;
    left: 14px;
    width: 37px;
    height: 37px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    color: #fff;
    background: linear-gradient(145deg, #8068ff, #4e25e8);
    box-shadow: 0 5px 15px rgba(75, 42, 230, .34);
    font-size: 15px;
    font-weight: 700;
}

.process-canvas .timeline .card .number::before,
.process-canvas .timeline .card .number::after {
    display: none;
}

.process-canvas .timeline h3 {
    margin: 0 0 7px;
    font-size: 15px;
}

.process-canvas .timeline p {
    margin: 0;
    max-width: 180px;
    font-size: 11px;
    line-height: 1.55;
}

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

@keyframes processCircleGlow {
    0% {
        opacity: .42;
        transform: translateX(-50%) scale(.78);
    }

    55% {
        opacity: 1;
        color: #fff;
        background: linear-gradient(145deg, #8a73ff, #4e25e8);
        box-shadow: 0 0 0 10px rgba(118, 92, 245, .12), 0 0 34px rgba(91, 58, 235, .58);
        transform: translateX(-50%) scale(1.13);
    }

    100% {
        opacity: 1;
        color: #5637ed;
        background: linear-gradient(145deg, #fff, #f2f0ff);
        box-shadow: 0 9px 25px rgba(47, 36, 145, .2), 0 0 0 5px rgba(128, 104, 255, .1);
        transform: translateX(-50%) scale(1);
    }
}

@keyframes processCardReveal {
    to {
        opacity: 1;
        filter: blur(0);
        transform: translateX(-50%) translateY(0) scale(1);
    }
}

@keyframes processConnector {
    to {
        opacity: 1;
        transform: scaleY(1);
    }
}

/* Exact circle-axis alignment and path-synchronised activation */
.process-animate .process-path-progress {
    animation: none;
}

.process-canvas .timeline .step,
.process-canvas .timeline .step-1,
.process-canvas .timeline .step-2,
.process-canvas .timeline .step-3,
.process-canvas .timeline .step-4,
.process-canvas .timeline .step-5 {
    width: 0;
}

.process-canvas .timeline .step-1 {
    left: 10%;
    top: 15%;
}

.process-canvas .timeline .step-2 {
    left: 29%;
    top: 21%;
}

.process-canvas .timeline .step-3 {
    left: 48%;
    top: 15%;
}

.process-canvas .timeline .step-4 {
    left: 67%;
    top: 21%;
}

.process-canvas .timeline .step-5 {
    left: 86%;
    top: 15%;
}

.process-canvas .timeline .circle {
    left: 0;
    opacity: .38;
    transform: translateX(-50%) scale(.82);
    animation: none;
}

.process-canvas .timeline .step.is-reached .circle {
    animation: processCircleHit .72s cubic-bezier(.2, .8, .2, 1) forwards;
}

.process-canvas .timeline .card,
.process-canvas .timeline .step .card.top,
.process-canvas .timeline .step .card.bottom {
    left: 0;
    width: 200px;
    min-height: 92px;
    padding: 10px 8px 8px 30px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    filter: blur(5px);
    transform: translateY(var(--card-shift, -14px)) scale(.96);
    animation: none;
}

.process-canvas .timeline .step-5 .card {
    width: 185px;
}

.process-canvas .timeline .card.top {
    top: 0;
    --card-shift: -14px;
}

.process-canvas .timeline .card.bottom {
    top: 258px;
    --card-shift: 14px;
}

.process-canvas .timeline .step.is-reached .card {
    animation: processAxisCardReveal .58s .12s cubic-bezier(.2, .8, .2, 1) forwards;
}

.process-canvas .timeline .card::after {
    display: none;
}

.process-canvas .timeline .number {
    top: 9px;
    left: -18px;
}

.process-canvas .timeline .card.top .number::after,
.process-canvas .timeline .card.bottom .number::before {
    content: "";
    position: absolute;
    left: 50%;
    display: block;
    width: 2px;
    opacity: 0;
    transform: translateX(-50%) scaleY(0);
    background: repeating-linear-gradient(to bottom, #8068ff 0, #8068ff 3px, transparent 3px, transparent 7px);
}

.process-canvas .timeline .card.top .number::after {
    top: 100%;
    height: 57px;
    transform-origin: top;
}

.process-canvas .timeline .card.bottom .number::before {
    bottom: 100%;
    height: 21px;
    transform-origin: bottom;
}

.process-canvas .timeline .step.is-reached .number::before,
.process-canvas .timeline .step.is-reached .number::after {
    animation: processAxisConnector .35s ease-out forwards;
}

.process-canvas .timeline h3 {
    margin: 10px 0 6px;
    font-size: 15px;
}

.process-canvas .timeline p {
    max-width: 180px;
}

@keyframes processCircleHit {
    0% {
        opacity: .38;
        transform: translateX(-50%) scale(.82);
    }

    55% {
        opacity: 1;
        color: #fff;
        background: linear-gradient(145deg, #8a73ff, #4e25e8);
        box-shadow: 0 0 0 11px rgba(118, 92, 245, .13), 0 0 38px rgba(91, 58, 235, .62);
        transform: translateX(-50%) scale(1.14);
    }

    100% {
        opacity: 1;
        color: #5637ed;
        background: linear-gradient(145deg, #fff, #f2f0ff);
        box-shadow: 0 9px 25px rgba(47, 36, 145, .2), 0 0 0 5px rgba(128, 104, 255, .1);
        transform: translateX(-50%) scale(1);
    }
}

@keyframes processAxisCardReveal {
    to {
        opacity: 1;
        filter: blur(0);
        transform: translateY(0) scale(1);
    }
}

@keyframes processAxisConnector {
    to {
        opacity: 1;
        transform: translateX(-50%) scaleY(1);
    }
}

section.smart-plan {
    /* padding: 80px 0 45px; */
    overflow: hidden;
    isolation: isolate;
    background: linear-gradient(135deg, #fff 0%, #fbfcff 48%, #f5f4ff 100%);
}

section.smart-plan::before {
    content: "";
    position: absolute;
    inset: auto -160px -280px auto;
    z-index: -1;
    width: 640px;
    height: 640px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 185, 223, .14), rgba(95, 63, 229, .06) 46%, transparent 70%);
}

.smart-plan .section-title {
    text-align: left;
}

.smart-plan .section-title p {
    width: 100%;
    margin: 12px 0 20px;
}

.smart-plan .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 70px;
}

.smart-plan .left {
    flex: 1;
    opacity: 0;
    transform: translateX(-42px);
    transition: opacity .8s ease, transform .9s cubic-bezier(.22, .75, .25, 1);
}

.smart-plan .right {
    flex: 1;
    text-align: right;
}

.smart-plan.is-visible .left {
    opacity: 1;
    transform: translateX(0);
}

.smart-plan-visual {
    position: relative;
    min-height: 650px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: translateX(55px) rotate(2deg) scale(.92);
    transition: opacity .9s .12s ease, transform 1.05s .12s cubic-bezier(.2, .8, .2, 1);
}

.smart-plan.is-visible .smart-plan-visual {
    opacity: 1;
    transform: translateX(0) rotate(0) scale(1);
}

.smart-plan-glow {
    position: absolute;
    width: 82%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 185, 223, .2), rgba(95, 63, 229, .09) 45%, transparent 72%);
    filter: blur(8px);
    animation: smartGlow 4.5s ease-in-out infinite;
}

.smart-plan-art {
    position: relative;
    z-index: 1;
    width: min(100%, 500px);
    max-height: 650px;
    object-fit: contain;
    filter: drop-shadow(0 28px 32px rgba(25, 38, 110, .13));
    animation: smartDeviceFloat 5s ease-in-out infinite;
}

.social-bubble {
    --bubble-color: #5f3fe5;
    --logo-tilt-x: 9deg;
    --logo-tilt-y: -17deg;
    --logo-tilt-z: -6deg;
    position: absolute;
    z-index: 3;
    width: 75px;
    height: 75px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .9);
    border-radius: 18px;
    color: #fff;
    font-size: 40px;
    background: linear-gradient(145deg, color-mix(in srgb, var(--bubble-color), white 15%), var(--bubble-color));
    box-shadow: 0 15px 28px color-mix(in srgb, var(--bubble-color), transparent 70%), inset 0 1px 1px rgba(255, 255, 255, .45);
    transform-style: preserve-3d;
    backface-visibility: hidden;
    animation: socialJump 3.2s ease-in-out infinite, socialPulse 2.4s ease-out infinite;
}

.social-bubble i {
    transform: translateZ(9px);
    text-shadow: 0 3px 7px rgba(0, 0, 0, .16);
}

.social-instagram {
    --bubble-color: #d62976;
    --logo-tilt-z: -9deg;
    left: 8%;
    top: 19%;
    animation-delay: 0s;
}

.social-facebook {
    --bubble-color: #1877f2;
    --logo-tilt-z: -4deg;
    right: 7%;
    top: 27%;
    animation-delay: -.65s;
}

.social-linkedin {
    --bubble-color: #0a66c2;
    --logo-tilt-z: -8deg;
    left: 7%;
    bottom: 25%;
    animation-delay: -1.3s;
}

.social-youtube {
    --bubble-color: #ff0033;
    --logo-tilt-z: -3deg;
    right: 8%;
    bottom: 20%;
    animation-delay: -1.95s;
}

.social-twitter {
    --bubble-color: #1da1f2;
    --logo-tilt-z: -7deg;
    right: 17%;
    top: 7%;
    animation-delay: -2.6s;
}

@keyframes socialJump {

    0%,
    100% {
        transform: perspective(520px) translateY(0) rotateX(var(--logo-tilt-x)) rotateY(var(--logo-tilt-y)) rotateZ(var(--logo-tilt-z));
    }

    45% {
        transform: perspective(520px) translateY(-16px) rotateX(calc(var(--logo-tilt-x) + 2deg)) rotateY(calc(var(--logo-tilt-y) + 3deg)) rotateZ(calc(var(--logo-tilt-z) + 2deg));
    }

    60% {
        transform: perspective(520px) translateY(-11px) rotateX(calc(var(--logo-tilt-x) + 1deg)) rotateY(calc(var(--logo-tilt-y) + 1deg)) rotateZ(calc(var(--logo-tilt-z) + 1deg));
    }
}

@keyframes socialPulse {

    0%,
    100% {
        filter: brightness(1);
    }

    50% {
        filter: brightness(1.16);
    }
}

@keyframes smartGlow {

    0%,
    100% {
        transform: scale(.94);
        opacity: .72;
    }

    50% {
        transform: scale(1.06);
        opacity: 1;
    }
}

@keyframes smartDeviceFloat {

    0%,
    100% {
        transform: translateY(0) rotate(-.35deg);
    }

    50% {
        transform: translateY(-10px) rotate(.35deg);
    }
}

.plan-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 45px 35px;
    margin-bottom: 50px;
}

.plans {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .55s ease, transform .65s cubic-bezier(.22, .75, .25, 1);
    transition-delay: calc(var(--plan-index, 0) * 90ms + 220ms);
}

.smart-plan.is-visible .plans {
    opacity: 1;
    transform: translateY(0);
}

.smart-plan.is-visible .plans:hover {
    transform: translateY(-8px);
}

.plans-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #f3f5fd;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
    /* box-shadow: 0 10px 25px rgba(0, 0, 0, .08); */
}

.plans-icon i {
    color: #2145b7;
    font-size: 22px;
}

.plans h4 {
    font-size: 17px;
    margin-bottom: 12px;
    color: #222;
    font-weight: 600;
}

.plans p {
    color: #666;
    line-height: 1.7;
    font-size: 14px;
}

.pricing-table {
    display: grid;
    grid-template-columns: repeat(var(--pricing-columns, 3), 1fr);
    background: #fff;
    border-radius: 24px;
    overflow: visible;
    border: 1px solid #e6e9f7;
    box-shadow: 0 20px 60px rgba(45, 65, 150, .08);
    margin-top: 40px;
    isolation: isolate;
    perspective: 1400px;
}

.pricing-table::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 5;
    display: block;
    border-radius: 24px;
    pointer-events: none;
    opacity: 0;
    background: linear-gradient(110deg, transparent 38%, rgba(255, 255, 255, .78) 49%, transparent 60%);
    background-size: 260% 100%;
    background-position: 145% 0;
}

.pricing-visible .pricing-table::before {
    animation: pricingSweep 1.15s .48s ease-out forwards;
}

.pricing-ready .pricing-card {
    opacity: 0;
    transform: translateY(34px) scale(.98);
    transform-origin: center bottom;
    transition: opacity .5s calc(var(--pricing-index) * 100ms + 80ms) ease, transform .68s calc(var(--pricing-index) * 100ms + 80ms) cubic-bezier(.18, .85, .25, 1), box-shadow .3s ease;
}

.pricing-visible .pricing-card {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.pricing-ready .pricing-card .plan-list li {
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .3s calc(450ms + var(--pricing-index) * 90ms + var(--row-index) * 30ms) ease, transform .36s calc(450ms + var(--pricing-index) * 90ms + var(--row-index) * 30ms) ease;
}

.pricing-visible .pricing-card .plan-list li {
    opacity: 1;
    transform: translateY(0);
}

.pricing-visible .pricing-card .plan-list i {
    animation: pricingTickPop .38s calc(540ms + var(--pricing-index) * 90ms + var(--row-index) * 30ms) both;
}

.pricing-card {
    transition-property: opacity, transform, box-shadow;
}

.pricing-visible .pricing-card:hover {
    z-index: 4;
    box-shadow: 0 20px 42px rgba(36, 65, 170, .14);
    transform: translateY(-6px);
}

.pricing-visible .pricing-card.popular .plan-icon {
    animation: pricingFeaturedPulse 2.4s 1.4s ease-in-out infinite;
}

@keyframes pricingSweep {
    0% {
        opacity: 0;
        background-position: 145% 0;
    }

    18% {
        opacity: .72;
    }

    82% {
        opacity: .72;
    }

    100% {
        opacity: 0;
        background-position: -45% 0;
    }
}

@keyframes pricingTickPop {
    0% {
        opacity: 0;
        transform: scale(.2) rotate(-35deg)
    }

    65% {
        transform: scale(1.28) rotate(5deg)
    }

    100% {
        opacity: 1;
        transform: scale(1) rotate(0)
    }
}

@keyframes pricingFeaturedPulse {

    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(58, 81, 255, .24)
    }

    50% {
        box-shadow: 0 0 0 11px rgba(58, 81, 255, 0)
    }
}

.column {
    position: relative;
    border-right: 1px solid #eceef9;
    background: #fff;
}

.column:last-child {
    border-right: none;
}

.pricing-table>.column:first-child {
    border-radius: 24px 0 0 24px;
}

.pricing-table>.column:last-child {
    border-radius: 0 24px 24px 0;
}

.table-header {
    text-align: center;
    padding: 36px 28px 30px;
    min-height: 245px;
    border-bottom: 1px solid #eceef9;
}

.feature-title {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-height: 298px;
    padding-left: 45px;
}

.feature-title h3 {
    font-size: 18px;
    letter-spacing: 1px;
    color: #1b2341;
}

.column .plan-icon {
    width: 51px;
    height: 51px;
    margin: 0 auto 7px;
    border-radius: 50%;
    background: #ebe7ff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-color);
    font-size: 19px;
    /* box-shadow: 0 10px 25px rgba(92, 61, 255, .15); */
}

.column.popular .plan-icon {
    background: #3a51ff;
    color: #fff;
}

.plan-icon.premium {
    background: #fff0f7;
    color: #ff2d88;
}

.table-header h2 {
    font-size: 25px;
    margin-bottom: 8px;
    font-weight: 700;
    color: #1d2245;
}

.table-header span {
    display: block;
    color: #2556e5;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 13px;
}

.table-header .price {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 8px;
    margin-bottom: 18px;
}

.price h1 {
    color: #184be1;
    font-size: 35px;
    font-weight: 800;
    line-height: 1;
}

.price small {
    color: #777779;
    font-size: 16px;
    margin-bottom: 8px;
}

.premium-price h1 {
    color: #ff2d88;
}

.table-header p {
    font-size: 14px;
    color: #666;
    line-height: 1.7;
    min-height: 48px;
}

.feature-list li {
    height: 52px;
    display: flex;
    align-items: center;
    padding: 0 25px;
    border-bottom: 1px solid #eceef9;
    font-size: 15px;
    font-weight: 500;
    color: #222;
}

.feature-list li i {
    width: 28px;
    color: #0f329b;
    font-size: 16px;
    margin-right: 14px;
}

ul.plan-list li {
    min-height: 58px;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    text-align: left;
    padding: 0 18px;
    border-bottom: 1px solid #eceef9;
    color: #333;
    font-size: 17px;
    font-weight: 500;
}

ul.plan-list li span {
    flex: 1;
}

.plan-list i {
    color: var(--primary-color);
    font-size: 16px;
    padding-right: 33px;
}

.plan-list li>i:last-child:not(:first-child) {
    padding-right: 0;
}

.plan-list .fa-solid.fa-circle-xmark {
    color: #d81313;
}

.plan-list .pink-icon,
.plan-list .pink-check {
    color: #ff2d88;
}

.plan-footer {
    padding: 35px;
    text-align: center;
}

.plan-footer a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 220px;
    height: 58px;
    border: 2px solid var(--primary-color);
    color: var(--primary-color);
    font-size: 16px;
    font-weight: 600;
    border-radius: 40px;
    transition: .3s;
}

.plan-footer a:hover {
    background: var(--primary-color);
    color: #fff;
}

.popular-tag {
    position: absolute;
    background: var(--primary-color);
    color: #fff;
    font-size: 12px;
    padding: 6px 0;
    left: 50%;
    width: 140px;
    text-align: center;
    margin-left: -70px;
}

.column.popular {
    border: 1px solid var(--primary-color);
    background: #eff5ff;
}

.column.popular .plan-footer a {
    background: var(--primary-color);
    color: #fff;
}

.column.premium .plan-footer a {
    border-color: #ff2d88;
    color: #ff2d88;
}

.column.premium .plan-footer a:hover {
    border-color: var(--primary-color);
    color: #fff;
}

section.expert-cta {
    background: linear-gradient(90deg, #2343b5 0%, #1697dd 100%);
}

.expert-cta .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
    overflow: hidden;
    color: #fff;
}

.cta-left {
    flex: 1.4;
}

.cta-left span.subtitle {
    display: block;
    color: #ffffff;
    opacity: .9;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .5px;
    margin-bottom: 16px;
}

.cta-left h2 {
    color: #fff;
    font-size: 22px;
    line-height: 1.2;
    font-weight: 500;
    margin-bottom: 11px;
}

.cta-left p {
    color: rgba(255, 255, 255, .9);
    font-size: 13px;
    line-height: 1.5;
    max-width: 700px;
}

.cta-center {
    flex: 1;
    text-align: center;
}

.cta-right {
    width: 320px;
}

.cta-right ul {
    list-style: none;
    margin-bottom: 35px;
}

.cta-right li {
    color: #fff;
    font-size: 15px;
    margin-bottom: 11px;
    position: relative;
    padding-left: 34px;
}

.cta-right li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    color: #fff;
    font-weight: 700;
}

.clients-grid {
    margin-top: 40px;
}

.clients-section .container {
    display: block;
}

.client-logo-slider {
    width: 100%;
    overflow: hidden;
    padding: 18px 0;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.client-logo-track {
    width: max-content;
}

.client-logo-slider ul {
    display: flex;
    align-items: center;
    width: max-content;
    gap: 34px;
}

.client-logo-slider.client-slider-ready ul {
    animation: clientLogoMarquee 22s linear infinite;
}

.client-logo-slider:hover ul,
.client-logo-slider:focus-within ul {
    animation-play-state: paused;
}

.clients-grid ul li {
    flex: 0 0 210px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 90px;
    margin: 0;
    padding: 12px 22px;
}

.clients-grid ul li img {
    max-width: 100%;
    max-height: 68px;
    object-fit: contain;
    transition: transform .3s ease, filter .3s ease;
    cursor: pointer;
}

.clients-grid ul li:hover img {
    transform: scale(1.07);
    filter: drop-shadow(0 8px 10px rgba(15, 50, 155, .15));
}

@keyframes clientLogoMarquee {
    to {
        transform: translateX(calc(-1 * var(--client-slider-shift, 50%)));
    }
}

.testimonial-section .container {
    display: block;
    min-width: 0;
    overflow: hidden;
}

.testimonial-slider {
    position: relative;
    min-width: 0;
}

.testimonial-track {
    position: relative;
}

.testimonial-track .testimonial-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(34px) scale(.98);
    transition: opacity .65s ease, transform .75s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .75s;
}

.testimonial-track .testimonial-slide.active {
    position: relative;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(0) scale(1);
    transition-delay: 0s;
}

.testimonial-right .review p {
    font-size: 17px;
    line-height: 1.8;
    color: #4d4d4d;
}

.testimonial-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 24px;
}

.testimonial-controls>button {
    width: 43px;
    height: 43px;
    border: 1px solid #dce3f7;
    border-radius: 50%;
    color: var(--primary-color);
    background: #fff;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(15, 50, 155, .09);
}

.testimonial-dots {
    display: flex;
    gap: 7px;
}

.testimonial-dots button {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 20px;
    background: #c9d2ec;
    cursor: pointer;
    transition: .3s;
}

.testimonial-dots button.active {
    width: 24px;
    background: var(--primary-color);
}

.testi_wrap {
    display: flex;
    align-items: center;
    gap: 60px;
    position: relative;
    margin-top: 40px;
}

.testimonial-left {
    width: 340px;
}

.testimonial-left img {
    width: 340px;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.testimonial-right {
    flex: 1;
}

p.review {
    font-size: 17px;
    line-height: 1.8;
    color: #4d4d4d;
    max-width: 900px;
    margin-bottom: 15px;
}

.rating {
    margin: 25px 0;
}

.rating i {
    color: #ffc400;
    margin-right: 5px;
}

.quote-icon {
    color: #2048b4;
    font-size: 52px;
    margin-bottom: 20px;
}

span.author_name {
    font-size: 20px;
    margin-bottom: 8px;
    width: 100%;
    display: block;
    font-weight: 600;
}

span.author_company {
    color: #6c6868;
}

.contact-cta .container {
    display: grid;
    grid-template-columns: 1.15fr .95fr;
    align-items: center;
    gap: 40px;
    border-radius: 22px;
    overflow: hidden;
    background: url(../images/cta-bg.png) no-repeat center center;
    background-size: cover;
    position: relative;
}

.contact-cta-left {
    position: relative;
    padding: 49px;
    /* min-height: 310px; */
}

.contact-cta-left span {
    display: block;
    color: #fff;
    font-size: 18px;
    margin-bottom: 18px;
}

.contact-cta-left h2 {
    color: #fff;
    font-size: 27px;
    line-height: 1.15;
    font-weight: 600;
    /* max-width: 500px; */
}

.contact-cta-left img {
    position: absolute;
    right: 20px;
    bottom: 0;
    /* width: 320px; */
}

.contact-cta-right {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    padding: 20px;
    position: relative;
    z-index: 2;
}

.info-card {
    background: #fff;
    border-radius: 14px;
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 15px;
    min-height: 80px;
    transition: .3s;
}

.info-card .icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #f3f3f3;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    color: #111;
}

.info-card small {
    display: block;
    color: #444;
    font-size: 15px;
    margin-bottom: 5px;
}

.message-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #19b8df;
    color: #fff;
    text-decoration: none;
    border-radius: 14px;
    font-size: 20px;
    font-weight: 500;
    transition: .3s;
}

.info-card h4 {
    font-weight: 600;
}

.footer {
    background: #091c57;
    color: #fff;
    padding: 50px 0 25px;
}

.footer-section {
    display: grid;
    grid-template-columns: 1.2fr .8fr 1.1fr 1.2fr;
    gap: 60px;
    padding-bottom: 45px;
}

.footer-col p {
    line-height: 1.8;
    font-size: 14px;
    color: rgba(255, 255, 255, .9);
    /* max-width: 280px; */
    margin: 20px 0;
}

.footer-col h4 {
    font-size: 20px;
    margin-bottom: 34px;
    padding-bottom: 5px;
    position: relative;
}

.footer-col ul li {
    padding-bottom: 17px;
}

.footer-col ul li:before {
    content: '\f061';
    font-family: 'Font Awesome 5 Free';
    font-style: normal;
    font-weight: 900;
    font-size: 10px;
}

.footer-col ul li a {
    color: #D3E7FF;
    padding-left: 15px;
}

.footer-col h4:after {
    content: "";
    height: 2px;
    width: 67px;
    border-radius: 10px;
    position: absolute;
    bottom: 0px;
    left: 0;
    background: #fff;
}

.footer-col input {
    width: 100%;
    height: 60px;
    border: none;
    outline: none;
    background: #122f8b;
    color: #fff;
    border-radius: 8px;
    padding: 0 20px;
    font-size: 15px;
    margin-bottom: 18px;
}

.footer-col input::placeholder {
    color: #fff;
    opacity: 0.5;
}

button.btn.subscribe_btn {
    border-radius: 6px;
    font-size: 15px;
    height: 52px;
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, .2);
    padding-top: 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.bottom-links {
    display: flex;
    gap: 35px;
}

.bottom-links a {
    color: #fff;
    text-decoration: none;
    font-size: 13px;
}

.bottom-links a:hover {
    color: #18d3ff;
}

.footer-bottom p {
    color: #fff;
}



.hero-image {
    position: relative;
}

.laptop-flight-source {
    position: absolute;
    z-index: 2;
    top: 28%;
    left: 13.5%;
    width: 66%;
    aspect-ratio: 1296 / 1213;
    pointer-events: none;
}

/* WordPress integration and complete responsive behavior */
.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.site-main {
    overflow-x: clip;
    overflow-y: visible;
}

.site-navigation {
    padding: 12px 0;
    background: #fff;
}

.logo-wrap img,
.footer_logo img {
    display: block;
    width: auto;
    max-height: 58px;
}

.menu-toggle {
    display: none;
    width: 44px;
    height: 44px;
    padding: 9px;
    border: 0;
    border-radius: 10px;
    background: #eef3ff;
    cursor: pointer;
}

.menu-close,
.menu-backdrop {
    display: none;
}

.menu-wrap .current-menu-item>a,
.menu-wrap .current_page_item>a,
.menu-wrap a:hover,
.menu-wrap a:focus {
    color: var(--primary-color);
}

.footer .menu {
    display: block;
}

.footer .contact-details li {
    color: rgba(255, 255, 255, .76);
    line-height: 1.6;
}

.project-card[hidden] {
    display: none;
}

/* Contact page */
.innovion-contact-page {
    overflow: hidden;
    background: #f8faff;
}

.innovion-contact-page .contact-hero-section {
    /* padding: 85px 0 78px; */
    background: linear-gradient(135deg, #fff 20%, #f3f7ff 100%);
}

.innovion-contact-page .contact-hero-section .container {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr);
    align-items: center;
    gap: 60px;
}

.innovion-contact-page .contact-hero-section h1 {
    max-width: 760px;
}

.innovion-contact-page .contact-hero-section .hero-content>p {
    max-width: 720px;
    margin: 22px 0 35px;
    font-size: 16px;
    line-height: 1.8;
}

.innovion-contact-page .hero-features {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.innovion-contact-page .hero-features .info-item {
    margin: 0;
}

.innovion-contact-page .hero-features .info-item .icon {
    flex-basis: 58px;
    width: 58px;
    height: 58px;
}

.innovion-contact-page .hero-features .info-item h4 {
    font-size: 16px;
}

.innovion-contact-page .hero-features .info-item p,
.innovion-contact-page .hero-features .info-item a {
    font-size: 13px;
    line-height: 1.6;
}

.innovion-contact-page .contact-hero-art {
    position: relative;
    min-height: 390px;
    display: grid;
    place-items: center;
}

.innovion-contact-page .contact-hero-art .circle {
    position: absolute;
    width: 330px;
    height: 330px;
    border-radius: 50%;
    background: radial-gradient(circle at 38% 32%, #d6e7ff, #b4caff 68%, #96b5ff);
    box-shadow: 0 30px 70px rgba(44, 85, 210, .18);
}

.innovion-contact-page .contact-hero-art img {
    position: relative;
    z-index: 1;
    max-height: 390px;
    object-fit: contain;
}

.innovion-contact-page .contact-section {
    /* padding: 80px 0 36px; */
}

.innovion-contact-page .contact-wrapper {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) minmax(0, 2fr);
    gap: 35px;
    align-items: start;
}

.innovion-contact-page .contact-info,
.innovion-contact-page .contact-form-box {
    padding: 32px;
    border: 1px solid #edf1fa;
    border-radius: 25px;
    background: #fff;
    box-shadow: 0 20px 60px rgba(18, 37, 63, .08);
}

.innovion-contact-page .contact-info h2,
.innovion-contact-page .contact-form-box h2 {
    margin-bottom: 32px;
    font-size: 26px;
}

.innovion-contact-page .info-item {
    display: flex;
    gap: 17px;
    align-items: flex-start;
    margin-bottom: 27px;
}

.innovion-contact-page .info-item .icon {
    display: grid;
    flex: 0 0 54px;
    width: 54px;
    height: 54px;
    place-items: center;
    border-radius: 50%;
    background: #eef4ff;
    color: var(--primary-color);
    font-size: 20px;
}

.innovion-contact-page .info-item h4 {
    margin: 2px 0 7px;
    font-size: 17px;
}

.innovion-contact-page .info-item p {
    margin: 0;
    line-height: 1.7;
}

.innovion-contact-page .info-item a {
    display: block;
    margin-bottom: 4px;
    color: #626979;
}

.innovion-contact-page .help-box {
    margin: 34px 0 20px;
    padding: 24px 20px 34px;
    border-radius: 20px;
    text-align: center;
    background: linear-gradient(135deg, #eef5ff, #f8fbff);
}

.innovion-contact-page .help-box>i {
    margin-bottom: 13px;
    color: var(--primary-color);
    font-size: 38px;
}

.innovion-contact-page .help-box h3 {
    margin-bottom: 8px;
}

.innovion-contact-page .help-box p {
    margin-bottom: 24px;
    line-height: 1.7;
}

.innovion-contact-page .contact-form-box .wpcf7-form {
    margin: 0;
}

.innovion-contact-page .contact-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 18px;
}

.innovion-contact-page .contact-field {
    margin-bottom: 15px;
}

.innovion-contact-page .contact-field label {
    display: block;
    margin-bottom: 9px;
    color: #17203d;
    font-weight: 600;
}

.innovion-contact-page .contact-field .wpcf7-form-control-wrap {
    display: block;
}

.innovion-contact-page .contact-field input,
.innovion-contact-page .contact-field textarea {
    width: 100%;
    padding: 16px 18px;
    border: 1px solid #dfe8fb;
    border-radius: 13px;
    outline: 0;
    background: #fff;
    color: #17203d;
    font: inherit;
    transition: border-color .25s, box-shadow .25s;
}

.innovion-contact-page .contact-field textarea {
    min-height: 185px;
    resize: vertical;
}

.innovion-contact-page .contact-field input:focus,
.innovion-contact-page .contact-field textarea:focus {
    border-color: #2554ff;
    box-shadow: 0 0 0 5px rgba(37, 84, 255, .08);
}

.innovion-contact-page .contact-submit-wrap {
    position: relative;
}

.innovion-contact-page .contact-submit-wrap:after {
    content: "➤";
    position: absolute;
    top: 50%;
    left: calc(50% - 72px);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    transform: translateY(-50%);
    pointer-events: none;
}

.innovion-contact-page input.wpcf7-submit {
    width: 100%;
    padding: 16px 20px 16px 44px;
    border: 0;
    border-radius: 9px;
    background: var(--primary-color);
    color: #fff;
    font-weight: 700;
    cursor: pointer;
    transition: transform .25s, box-shadow .25s;
}

.innovion-contact-page input.wpcf7-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(15, 50, 155, .24);
}

.innovion-contact-page .wpcf7-spinner {
    position: absolute;
    right: 12px;
    top: 11px;
}

.innovion-contact-page .contact-privacy {
    margin-top: 17px;
    text-align: center;
    color: #737a88;
    font-size: 13px;
}

.innovion-contact-page .contact-privacy i {
    margin-right: 7px;
    color: #2554ff;
}

.innovion-contact-page .wpcf7-not-valid-tip {
    margin-top: 5px;
    font-size: 12px;
}

.innovion-contact-page .wpcf7-response-output {
    margin: 18px 0 0 !important;
    padding: 11px 14px !important;
    border-radius: 10px;
}

.innovion-contact-page .contact-location {
    /* padding: 36px 0 80px; */
}

.innovion-contact-page .contact-location .container {
    display: block;
}

.innovion-contact-page .contact-cta-card {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    min-height: 350px;
    padding: 40px;
    overflow: hidden;
    border-radius: 28px;
    background: #fff;
    box-shadow: 0 18px 55px rgba(25, 60, 120, .08);
}

.innovion-contact-page .contact-cta-card:before {
    content: "";
    position: absolute;
    top: -120px;
    right: -120px;
    width: 420px;
    height: 420px;
    background: radial-gradient(circle, #edf4ff 0%, transparent 70%);
}

.innovion-contact-page .contact-content {
    position: relative;
    z-index: 2;
    flex: 1;
}

.innovion-contact-page .contact-content h2 {
    margin: 18px 0;
    color: #16203d;
    font-size: 27px;
    line-height: 1.2;
}

.innovion-contact-page .contact-content p {
    /* max-width: 420px; */
    margin-bottom: 30px;
    line-height: 1.75;
}

.innovion-contact-page .cta-image {
    position: relative;
    z-index: 1;
    /* flex: 0 1 45%; */
}

.innovion-contact-page .location-card {
    position: relative;
    min-height: 168px;
    overflow: hidden;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 18px 45px rgba(25, 60, 120, .08);
}

.innovion-contact-page .location-card iframe {
    display: block;
    width: 100%;
    height: 230px;
    border: 0;
}

.innovion-contact-page .location-info {
    position: absolute;
    right: 14px;
    bottom: 14px;
    left: 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 15px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .95);
    box-shadow: 0 15px 40px rgba(0, 0, 0, .1);
    font-size: 12px;
    backdrop-filter: blur(15px);
}

.innovion-contact-page .location-icon {
    display: grid;
    flex: 0 0 33px;
    width: 33px;
    height: 33px;
    place-items: center;
    border-radius: 50%;
    background: linear-gradient(135deg, #2554ff, #008cff);
    color: #fff;
    font-size: 13px;
}

.innovion-contact-page .location-info h4 {
    margin-bottom: 5px;
}

.innovion-contact-page .location-info p {
    margin: 0;
}

/* Premium contact page finish */
.innovion-contact-page {
    background: linear-gradient(180deg, #f7f9ff 0%, #f9fbff 58%, #fff 100%);
}

.innovion-contact-page .contact-hero-section {
    position: relative;
    overflow: hidden;
    /* padding: 105px 0 95px; */
    background: radial-gradient(circle at 78% 16%, rgba(39, 204, 184, .16), transparent 23%), radial-gradient(circle at 8% 86%, rgba(32, 79, 190, .08), transparent 28%), linear-gradient(135deg, #fff 12%, #f1f6ff 100%);
}

.innovion-contact-page .contact-hero-section::before {
    position: absolute;
    inset: 0;
    opacity: .35;
    background-image: linear-gradient(rgba(28, 64, 148, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(28, 64, 148, .04) 1px, transparent 1px);
    background-size: 42px 42px;
    content: '';
    mask-image: linear-gradient(90deg, #000, transparent 72%);
}

.innovion-contact-page .contact-hero-section .container {
    position: relative;
    z-index: 1;
}

.innovion-contact-page .contact-hero-section h1 {
    margin-top: 20px;
    font-size: clamp(48px, 5.4vw, 76px);
    line-height: 1.02;
    letter-spacing: -.052em;
}

.innovion-contact-page .contact-hero-section .hero-content>p {
    color: #65718b;
    font-size: 17px;
}

.innovion-contact-page .hero-features {
    padding-top: 26px;
    border-top: 1px solid rgba(30, 68, 157, .1);
}

.innovion-contact-page .hero-features .info-item {
    padding: 12px 10px;
    border-radius: 16px;
    transition: background .25s, transform .25s;
}

.innovion-contact-page .hero-features .info-item:hover {
    background: rgba(255, 255, 255, .72);
    transform: translateY(-3px);
}

.innovion-contact-page .hero-features .info-item .icon {
    background: #fff;
    box-shadow: 0 12px 28px rgba(27, 67, 161, .12);
}

.innovion-contact-page .hero-features .info-item a {
    overflow-wrap: anywhere;
}

.innovion-contact-page .contact-hero-art {
    min-height: 500px;
    isolation: isolate;
}

.innovion-contact-page .contact-hero-art .circle {
    width: 390px;
    height: 390px;
    background: linear-gradient(145deg, #ddecff, #bcd3ff);
    box-shadow: 0 35px 85px rgba(31, 76, 185, .2), inset 0 0 0 22px rgba(255, 255, 255, .28);
}

.innovion-contact-page .contact-hero-art img {
    max-height: 460px;
    filter: drop-shadow(0 26px 28px rgba(17, 48, 111, .18));
}

.contact-art-grid {
    position: absolute;
    z-index: -1;
    width: 470px;
    height: 470px;
    border-radius: 50%;
    background: repeating-radial-gradient(circle, rgba(20, 62, 163, .13) 0 1px, transparent 2px 15px);
    opacity: .55;
}

.contact-floating-card {
    position: absolute;
    z-index: 3;
    display: flex;
    align-items: center;
    border: 1px solid rgba(255, 255, 255, .85);
    background: rgba(255, 255, 255, .9);
    box-shadow: 0 20px 48px rgba(16, 52, 126, .16);
    backdrop-filter: blur(15px);
    animation: contact-card-float 5s ease-in-out infinite;
}

.contact-response-card {
    bottom: 52px;
    left: -35px;
    gap: 12px;
    padding: 15px 18px;
    border-radius: 17px;
}

.contact-response-card .status-dot {
    width: 11px;
    height: 11px;
    border: 3px solid #d8fff7;
    border-radius: 50%;
    background: #1fc39f;
    box-shadow: 0 0 0 5px rgba(31, 195, 159, .13);
}

.contact-floating-card strong {
    display: block;
    color: #17264b;
    font-size: 13px;
}

.contact-floating-card small {
    display: block;
    margin-top: 3px;
    color: #7c879c;
    font-size: 10px
}

.contact-rating-card {
    top: 85px;
    right: -20px;
    align-items: flex-start;
    flex-direction: column;
    padding: 14px 17px;
    border-radius: 15px;
    animation-delay: -2.5s;
}

.rating-stars {
    margin-bottom: 5px;
    color: #ffb020;
    font-size: 12px;
    letter-spacing: 2px;
}

.innovion-contact-page .contact-section {
    position: relative;
    /* padding: 90px 0 48px; */
}

.innovion-contact-page .contact-wrapper {
    gap: 28px;
}

.innovion-contact-page .contact-info,
.innovion-contact-page .contact-form-box {
    border: 1px solid rgba(225, 232, 247, .9);
    box-shadow: 0 25px 70px rgba(18, 47, 108, .1);
}

.innovion-contact-page .contact-info {
    position: relative;
    overflow: hidden;
    padding: 34px 30px;
    background: linear-gradient(165deg, #0d2a6e, #1647b0 68%, #157eaa);
    color: #fff;
}

.innovion-contact-page .contact-info::before {
    position: absolute;
    top: -130px;
    right: -120px;
    width: 330px;
    height: 330px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 50%;
    box-shadow: 0 0 0 38px rgba(255, 255, 255, .025), 0 0 0 78px rgba(255, 255, 255, .02);
    content: '';
}

.contact-panel-heading {
    position: relative;
    z-index: 1;
    margin-bottom: 30px;
}

.contact-panel-heading>span,
.contact-form-heading>div>span {
    display: block;
    margin-bottom: 7px;
    color: #60e0ca;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase
}

.innovion-contact-page .contact-info .contact-panel-heading h2 {
    margin-bottom: 9px;
    color: #fff;
}

.contact-panel-heading p {
    margin: 0;
    color: rgba(255, 255, 255, .68);
    font-size: 12px;
    line-height: 1.65
}

.innovion-contact-page .contact-info .info-item {
    position: relative;
    z-index: 1;
    margin-bottom: 22px;
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 16px;
    background: rgba(255, 255, 255, .07);
}

.innovion-contact-page .contact-info .info-item .icon {
    background: rgba(255, 255, 255, .13);
    color: #66ead2;
}

.innovion-contact-page .contact-info .info-item h4,
.innovion-contact-page .contact-info .info-item p,
.innovion-contact-page .contact-info .info-item span {
    color: #fff;
}

.innovion-contact-page .contact-info .help-box {
    position: relative;
    z-index: 1;
    border: 1px solid rgba(255, 255, 255, .13);
    background: rgba(255, 255, 255, .1);
}

.innovion-contact-page .contact-info .help-box>i {
    color: #65e5cf
}

.innovion-contact-page .contact-info .help-box h3 {
    color: #fff
}

.innovion-contact-page .contact-info .help-box p {
    color: rgba(255, 255, 255, .72)
}

.innovion-contact-page .contact-info .schedule-btn {
    background: #fff;
    color: #123d9d;
    box-shadow: 0 12px 26px rgba(0, 0, 0, .18)
}

.innovion-contact-page .contact-info .location-card {
    position: relative;
    z-index: 1;
    border: 4px solid rgba(255, 255, 255, .14);
    box-shadow: 0 18px 35px rgba(3, 19, 60, .24);
}

.innovion-contact-page .contact-form-box {
    padding: 38px 40px;
    background: rgba(255, 255, 255, .96);
}

.contact-form-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 25px;
    margin-bottom: 30px;
    padding-bottom: 25px;
    border-bottom: 1px solid #edf1f8;
}

.innovion-contact-page .contact-form-heading h2 {
    margin: 0 0 8px
}

.contact-form-heading p {
    max-width: 530px;
    margin: 0;
    color: #778197;
    font-size: 13px;
    line-height: 1.6
}

.contact-form-badge {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 9px;
    padding: 10px 12px;
    border-radius: 12px;
    background: #eff8f6;
    color: #258c7a;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase
}

.contact-form-badge i {
    font-size: 18px
}

.innovion-contact-page .contact-field input,
.innovion-contact-page .contact-field textarea {
    background: #f9fbff;
    box-shadow: inset 0 1px 2px rgba(20, 49, 105, .03);
}

.innovion-contact-page .contact-field label {
    font-size: 13px
}

.innovion-contact-page input.wpcf7-submit {
    min-height: 56px;
    border-radius: 12px;
    background: linear-gradient(110deg, #133da3, #2462df 70%, #20bda2);
    box-shadow: 0 15px 30px rgba(22, 70, 180, .22)
}

.innovion-contact-page .contact-cta-card {
    padding: 55px;
    background: radial-gradient(circle at 84% 18%, rgba(34, 204, 181, .18), transparent 29%), linear-gradient(135deg, #fff, #f5f9ff);
}

.contact-cta-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}

.contact-cta-actions>span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #748096;
    font-size: 11px
}

.contact-cta-actions>span i {
    display: grid;
    width: 21px;
    height: 21px;
    place-items: center;
    border-radius: 50%;
    background: #ddf8f1;
    color: #20a98f;
    font-size: 9px
}

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

/* Razorpay plan checkout */
.plan-checkout-page {
    min-height: 80vh;
    background: radial-gradient(circle at 80% 10%, rgba(37, 200, 178, .15), transparent 25%), linear-gradient(145deg, #f8faff, #eef4ff);
}

.plan-checkout-shell {
    padding: 85px 0 100px;
}

.checkout-heading {
    max-width: 760px;
    margin: 0 auto 45px;
    text-align: center;
}

.checkout-heading h1 {
    margin: 18px 0 13px;
    color: #101d42;
    font-size: clamp(39px, 5vw, 62px);
    line-height: 1.05;
    letter-spacing: -.045em
}

.checkout-heading p {
    margin: 0;
    color: #6f7a92;
    font-size: 15px;
    line-height: 1.75
}

.plan-checkout-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(310px, .55fr);
    align-items: start;
    gap: 28px;
    width: min(100%, 1050px);
    margin: auto;
}

.plan-checkout-form,
.checkout-summary,
.checkout-invalid {
    border: 1px solid #e5ebf6;
    border-radius: 26px;
    background: #fff;
    box-shadow: 0 25px 65px rgba(18, 51, 119, .11);
}

.plan-checkout-form {
    padding: 38px;
}

.checkout-form-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 28px;
    padding-bottom: 24px;
    border-bottom: 1px solid #edf1f8
}

.checkout-form-title span {
    display: block;
    margin-bottom: 5px;
    color: #21aa93;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase
}

.checkout-form-title h2 {
    margin: 0;
    font-size: 27px
}

.checkout-form-title>i {
    display: grid;
    width: 50px;
    height: 50px;
    place-items: center;
    border-radius: 15px;
    background: #eaf2ff;
    color: var(--primary-color);
    font-size: 20px
}

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

.checkout-field-grid label>span {
    display: block;
    margin-bottom: 8px;
    color: #29344f;
    font-size: 12px;
    font-weight: 700
}

.checkout-field-grid input {
    width: 100%;
    height: 53px;
    padding: 0 15px;
    border: 1px solid #dce5f4;
    border-radius: 11px;
    outline: 0;
    background: #f9fbff;
    font: inherit;
    transition: border-color .25s, box-shadow .25s
}

.checkout-field-grid input:focus {
    border-color: #3c67d1;
    box-shadow: 0 0 0 4px rgba(36, 89, 209, .1)
}

.checkout-consent {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 22px 0;
    color: #68738a;
    font-size: 12px;
    line-height: 1.55
}

.checkout-consent input {
    margin-top: 3px;
    accent-color: var(--primary-color)
}

.checkout-payment-button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 58px;
    padding: 0 21px;
    border: 0;
    border-radius: 12px;
    background: linear-gradient(110deg, #123b9b, #2865df 70%, #21bca1);
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 16px 32px rgba(24, 76, 184, .24);
    transition: transform .25s, box-shadow .25s
}

.checkout-payment-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 20px 38px rgba(24, 76, 184, .31)
}

.checkout-payment-button:disabled {
    opacity: .6;
    cursor: wait;
    transform: none
}

.checkout-provider {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 7px;
    margin: 16px 0 0;
    color: #8993a7;
    font-size: 10px;
    line-height: 1.5;
    text-align: center
}

.checkout-provider i {
    margin-top: 2px;
    color: #23aa93
}

.checkout-message {
    display: none;
    margin: 0 0 15px;
    padding: 11px 13px;
    border-radius: 9px;
    font-size: 12px
}

.checkout-message.info,
.checkout-message.success,
.checkout-message.error {
    display: block
}

.checkout-message.info {
    background: #edf4ff;
    color: #2350aa
}

.checkout-message.success {
    background: #e5f8f2;
    color: #13765f
}

.checkout-message.error {
    background: #fff0f1;
    color: #b32c3a
}

.checkout-summary {
    position: sticky;
    top: 105px;
    overflow: hidden;
    padding: 35px;
    background: linear-gradient(155deg, #0c2a70, #1749b6 72%, #138b9d);
    color: #fff
}

.checkout-summary::before {
    position: absolute;
    top: -110px;
    right: -110px;
    width: 280px;
    height: 280px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 50%;
    box-shadow: 0 0 0 35px rgba(255, 255, 255, .025), 0 0 0 70px rgba(255, 255, 255, .02);
    content: ''
}

.checkout-mode {
    position: absolute;
    z-index: 2;
    top: 20px;
    right: 20px;
    padding: 7px 10px;
    border-radius: 20px;
    background: rgba(255, 255, 255, .13);
    color: #dce7ff;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase
}

.checkout-mode.test {
    background: #fff1c9;
    color: #946100
}

.summary-icon {
    position: relative;
    z-index: 1;
    display: grid;
    width: 62px;
    height: 62px;
    margin-bottom: 28px;
    place-items: center;
    border-radius: 18px;
    background: rgba(255, 255, 255, .14);
    color: #6ce8d2;
    font-size: 25px
}

.checkout-summary>span:not(.checkout-mode) {
    position: relative;
    z-index: 1;
    color: #69dfcb;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase
}

.checkout-summary h2 {
    position: relative;
    z-index: 1;
    margin: 8px 0 12px;
    color: #fff;
    font-size: 29px
}

.checkout-summary>p {
    position: relative;
    z-index: 1;
    color: rgba(255, 255, 255, .68);
    font-size: 12px;
    line-height: 1.65
}

.summary-total {
    position: relative;
    z-index: 1;
    margin: 27px 0 24px;
    padding: 19px 0;
    border-top: 1px solid rgba(255, 255, 255, .15);
    border-bottom: 1px solid rgba(255, 255, 255, .15)
}

.summary-total span {
    display: block;
    margin-bottom: 5px;
    color: rgba(255, 255, 255, .62);
    font-size: 10px
}

.summary-total strong {
    font-size: 28px
}

.checkout-summary ul {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none
}

.checkout-summary li {
    display: flex;
    align-items: center;
    gap: 9px;
    color: rgba(255, 255, 255, .78);
    font-size: 11px
}

.checkout-summary li i {
    color: #6be5cf
}

.checkout-invalid {
    max-width: 620px;
    margin: auto;
    padding: 50px;
    text-align: center
}

.checkout-invalid>i {
    margin-bottom: 18px;
    color: #e49824;
    font-size: 45px
}

.checkout-invalid h2 {
    margin-bottom: 25px
}

.laptop-flight-canvas {
    position: fixed;
    z-index: 50;
    inset: 0;
    display: block;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
}

/* Custom 404 page */
.innovion-404-page {
    overflow: hidden;
    background: #f8faff
}

.error-page-section {
    position: relative;
    padding: 105px 0 95px;
    background: radial-gradient(circle at 82% 18%, rgba(38, 206, 184, .16), transparent 25%), linear-gradient(140deg, #fff 12%, #eef4ff 100%)
}

.error-grid-pattern {
    position: absolute;
    inset: 0;
    opacity: .42;
    background-image: linear-gradient(rgba(25, 61, 148, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(25, 61, 148, .045) 1px, transparent 1px);
    background-size: 40px 40px;
    mask-image: linear-gradient(90deg, #000, transparent 75%)
}

.error-page-section>.container {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(420px, .95fr);
    align-items: center;
    gap: 75px
}

.error-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 9px 14px;
    border-radius: 30px;
    background: #e8efff;
    color: #1642a8;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .04em
}

.error-page-copy h1 {
    max-width: 700px;
    margin: 22px 0 22px;
    color: #101d42;
    font-size: clamp(45px, 5.5vw, 74px);
    line-height: 1.03;
    letter-spacing: -.052em
}

.error-page-copy h1>span {
    display: block;
    margin-bottom: 8px;
    color: var(--primary-color);
    font-size: .56em;
    letter-spacing: .04em
}

.error-page-copy>p {
    max-width: 650px;
    color: #68748c;
    font-size: 16px;
    line-height: 1.8
}

.error-page-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 13px;
    margin: 30px 0
}

.error-page-actions .btn {
    display: inline-flex;
    align-items: center;
    gap: 9px
}

.error-search {
    display: flex;
    align-items: center;
    max-width: 570px;
    height: 60px;
    padding-left: 18px;
    border: 1px solid #dce5f5;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 15px 35px rgba(23, 57, 126, .09)
}

.error-search>i {
    color: #8390a9
}

.error-search input {
    flex: 1;
    height: 100%;
    min-width: 0;
    padding: 0 13px;
    border: 0;
    outline: 0;
    background: transparent;
    font: inherit
}

.error-search button {
    align-self: stretch;
    margin: 6px;
    padding: 0 20px;
    border: 0;
    border-radius: 10px;
    background: #103b9c;
    color: #fff;
    font-weight: 700;
    cursor: pointer
}

.error-page-art {
    position: relative;
    display: grid;
    min-height: 480px;
    place-items: center
}

.error-browser {
    position: relative;
    z-index: 2;
    width: min(100%, 500px);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .85);
    border-radius: 26px;
    background: rgba(255, 255, 255, .84);
    box-shadow: 0 35px 85px rgba(18, 54, 130, .18);
    transform: rotate(2deg);
    backdrop-filter: blur(15px)
}

.error-browser-bar {
    display: flex;
    align-items: center;
    gap: 7px;
    height: 48px;
    padding: 0 16px;
    border-bottom: 1px solid #e8edf6;
    background: #fff
}

.error-browser-bar>span {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #ff6f69
}

.error-browser-bar>span:nth-child(2) {
    background: #ffc75f
}

.error-browser-bar>span:nth-child(3) {
    background: #3ecf8e
}

.error-browser-bar>div {
    width: 55%;
    height: 15px;
    margin-left: 10px;
    border-radius: 20px;
    background: #f0f3f8
}

.error-browser-content {
    display: flex;
    min-height: 340px;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    background: radial-gradient(circle at 50% 44%, rgba(42, 210, 185, .13), transparent 30%)
}

.error-signal {
    display: grid;
    width: 68px;
    height: 68px;
    margin-bottom: 15px;
    place-items: center;
    border-radius: 20px;
    background: linear-gradient(135deg, #163fa5, #2370dc);
    color: #fff;
    font-size: 27px;
    box-shadow: 0 15px 30px rgba(25, 68, 174, .25)
}

.error-browser-content strong {
    color: #153fa5;
    font-size: 72px;
    line-height: 1
}

.error-browser-content>span {
    margin-top: 8px;
    color: #7c879e;
    font-family: monospace;
    font-size: 11px;
    letter-spacing: .15em
}

.error-code-lines {
    display: grid;
    width: 54%;
    gap: 8px;
    margin-top: 25px
}

.error-code-lines i {
    height: 7px;
    border-radius: 10px;
    background: #e8edf5
}

.error-code-lines i:nth-child(2) {
    width: 72%;
    background: #d7e5ff
}

.error-code-lines i:nth-child(3) {
    width: 42%
}

.error-orbit {
    position: absolute;
    border: 1px dashed rgba(25, 70, 174, .2);
    border-radius: 50%;
    animation: error-orbit-spin 20s linear infinite
}

.orbit-one {
    width: 520px;
    height: 520px
}

.orbit-two {
    width: 390px;
    height: 390px;
    animation-direction: reverse;
    animation-duration: 14s
}

.error-float-card {
    position: absolute;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 13px 15px;
    border: 1px solid rgba(255, 255, 255, .9);
    border-radius: 14px;
    background: rgba(255, 255, 255, .92);
    color: #293653;
    font-size: 11px;
    font-weight: 700;
    box-shadow: 0 17px 38px rgba(17, 52, 123, .15);
    backdrop-filter: blur(12px);
    animation: error-card-float 5s ease-in-out infinite
}

.error-float-card>i {
    color: #1a54c6;
    font-size: 18px
}

.error-float-left {
    bottom: 55px;
    left: -20px
}

.error-float-right {
    top: 65px;
    right: -15px;
    animation-delay: -2.5s
}

.error-pulse {
    width: 10px;
    height: 10px;
    border: 2px solid #cefaed;
    border-radius: 50%;
    background: #24c39f;
    box-shadow: 0 0 0 5px rgba(36, 195, 159, .13)
}

.error-help-section {
    padding: 80px 0 95px;
    background: #fff
}

.error-help-heading {
    text-align: center
}

.error-help-heading>span {
    color: #23ad96;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase
}

.error-help-heading h2 {
    margin: 10px 0 40px;
    font-size: 34px
}

.error-help-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px
}

.error-help-grid>a {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 17px;
    padding: 25px;
    border: 1px solid #e6ecf7;
    border-radius: 20px;
    background: linear-gradient(145deg, #fff, #f8faff);
    box-shadow: 0 15px 36px rgba(20, 53, 116, .07);
    transition: transform .3s, box-shadow .3s
}

.error-help-grid>a:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 48px rgba(20, 53, 116, .13)
}

.error-help-grid>a>i {
    display: grid;
    width: 50px;
    height: 50px;
    place-items: center;
    border-radius: 15px;
    background: #eaf1ff;
    color: #1645ad;
    font-size: 19px
}

.error-help-grid h3 {
    margin: 0 0 6px;
    color: #182441;
    font-size: 17px
}

.error-help-grid p {
    margin: 0;
    color: #758096;
    font-size: 12px;
    line-height: 1.55
}

.error-help-grid>a>span {
    color: #1c53c4
}

.error-help-grid>a:nth-child(2)>i {
    background: #e9faf6;
    color: #1a9e86
}

.error-help-grid>a:nth-child(3)>i {
    background: #f2edff;
    color: #6b48cb
}

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

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

.career-form-grid>p{margin:0}.career-form-grid>p>label{display:grid;grid-template-columns:155px minmax(0,1fr);align-items:center;gap:16px;color:#17365b;font-size:11px;font-weight:800}.career-form-grid>p>label>small{grid-column:2;margin-top:-10px;color:#7a8497;font-size:9px;font-weight:400}

/* Careers */
.innovion-careers-page{overflow:hidden;background:#fff}.career-hero{padding:85px 0 100px;background:radial-gradient(circle at 82% 18%,rgba(37,204,185,.17),transparent 28%),linear-gradient(140deg,#fff,#eef4ff)}.career-hero .container{display:grid;grid-template-columns:minmax(0,1fr) minmax(470px,.9fr);align-items:center;gap:70px}.career-hero-copy h1{margin:18px 0 25px;color:#111d42;font-size:clamp(48px,6vw,78px);line-height:1;letter-spacing:-.05em}.career-hero-copy h1 span{color:var(--primary-color)}.career-hero-copy>p{max-width:660px;color:#64718b;font-size:16px;line-height:1.8}.career-hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:31px}.career-hero-actions .btn{display:inline-flex;align-items:center;gap:9px;cursor:pointer}.career-hero-visual{position:relative;min-height:475px}.career-hero-visual>img{position:absolute;right:0;bottom:0;z-index:2;width:min(100%,520px);max-height:455px;object-fit:contain;filter:drop-shadow(0 30px 38px rgba(20,52,120,.2))}.career-hero-orbit{position:absolute;inset:22px 15px 15px 50px;border:1px solid rgba(27,68,174,.12);border-radius:50%;animation:careerOrbit 16s linear infinite}.career-hero-orbit::before,.career-hero-orbit::after{position:absolute;border-radius:50%;content:''}.career-hero-orbit::before{inset:38px;border:1px dashed rgba(25,190,169,.35)}.career-hero-orbit::after{top:4px;left:48%;width:14px;height:14px;border:4px solid #fff;background:#21c7b1}.career-hero-note{position:absolute;right:7px;bottom:24px;z-index:3;display:flex;align-items:center;gap:10px;padding:13px 16px;border:1px solid #e1e8f4;border-radius:14px;background:rgba(255,255,255,.92);box-shadow:0 15px 35px rgba(18,49,114,.12)}.career-hero-note strong{color:var(--primary-color);font-size:25px}.career-hero-note span{max-width:78px;color:#6d7890;font-size:10px;line-height:1.35}@keyframes careerOrbit{to{transform:rotate(360deg)}}
.career-culture{padding:105px 0}.career-culture .container{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:80px}.career-culture-image{position:relative}.career-culture-image img{display:block;width:100%;height:500px;border-radius:28px;object-fit:cover;box-shadow:0 28px 65px rgba(22,52,112,.15)}.career-culture-image>span{position:absolute;right:22px;bottom:22px;display:inline-flex;align-items:center;gap:10px;padding:13px 16px;border-radius:12px;color:#fff;background:rgba(8,29,81,.88);font-size:11px;font-weight:700}.career-culture-image>span i{color:#51dfcf}.career-eyebrow{color:#159a8a;font-size:10px;font-weight:900;letter-spacing:.12em;text-transform:uppercase}.career-culture-copy h2{margin:14px 0 24px;color:#122041;font-size:clamp(38px,4.5vw,58px);line-height:1.08;letter-spacing:-.045em}.career-culture-copy h2 span{color:var(--primary-color)}.career-culture-copy>p{color:#68748b;font-size:15px;line-height:1.85}.career-culture-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:30px}.career-culture-stats div{padding:17px;border:1px solid #e4eaf4;border-radius:14px;background:#f8faff}.career-culture-stats strong{display:block;margin-bottom:16px;color:#20a996;font-size:11px}.career-culture-stats span{color:#293652;font-size:11px;font-weight:700;line-height:1.45}
.career-values{padding:95px 0;background:#f5f8ff}.career-values-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin-top:43px}.career-values-grid article{padding:30px;border:1px solid #e3e9f5;border-radius:20px;background:#fff;box-shadow:0 12px 32px rgba(22,52,112,.055);transition:transform .45s cubic-bezier(.22,1,.36,1),box-shadow .45s ease}.career-values-grid article:hover{transform:translateY(-7px);box-shadow:0 22px 42px rgba(22,52,112,.11)}.career-values-grid .icon{display:grid;width:45px;height:45px;margin-bottom:25px;place-items:center;border-radius:13px;color:#fff;background:linear-gradient(145deg,#1f55c7,#1fc4af)}.career-values-grid h3{margin-bottom:10px;color:#172342;font-size:18px}.career-values-grid p{color:#6b7589;font-size:12px;line-height:1.7}
.career-jobs{padding:105px 0}.career-jobs-heading{display:grid;grid-template-columns:1.2fr .8fr;align-items:end;gap:60px;margin-bottom:45px}.career-jobs-heading h2{max-width:780px;margin-top:13px;color:#122041;font-size:clamp(38px,4.6vw,58px);line-height:1.09;letter-spacing:-.045em}.career-jobs-heading h2 span{color:var(--primary-color)}.career-jobs-heading>p{color:#6a758b;font-size:13px;line-height:1.75}.career-job-list{display:grid;gap:12px}.career-job-card{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:34px;padding:27px 29px;border:1px solid #e2e8f3;border-radius:18px;background:#fff;transition:border-color .35s ease,box-shadow .35s ease,transform .35s ease}.career-job-card:hover{border-color:rgba(28,69,181,.28);box-shadow:0 20px 45px rgba(22,52,112,.1);transform:translateY(-3px)}.career-job-primary>span{color:#169a89;font-size:9px;font-weight:900;letter-spacing:.1em;text-transform:uppercase}.career-job-primary h3{margin:7px 0 8px;color:#172342;font-size:21px}.career-job-primary>p{max-width:700px;color:#6a7488;font-size:12px;line-height:1.65}.career-job-primary ul{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 0;padding:0;list-style:none}.career-job-primary li{padding:5px 8px;border-radius:6px;color:#2750a4;background:#f0f4fc;font-size:9px}.career-job-meta{display:grid;gap:9px;min-width:185px}.career-job-meta span{display:flex;align-items:center;gap:8px;color:#657087;font-size:11px}.career-job-meta i{width:14px;color:#1f57c6;text-align:center}.career-job-apply{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-width:165px;padding:13px 16px;border:0;border-radius:9px;color:#fff;background:var(--primary-color);font-size:11px;font-weight:800;cursor:pointer;box-shadow:0 10px 22px rgba(23,63,167,.18);transition:transform .25s ease}.career-job-apply:hover{transform:translateY(-2px)}.career-empty{padding:55px;border:1px dashed #d8e0ee;border-radius:20px;text-align:center;background:#f8faff}
.career-application-cta{padding:0 0 105px}.career-application-cta .container{position:relative;display:flex;min-height:270px;padding:50px 55px 50px 340px;align-items:center;justify-content:space-between;gap:40px;overflow:hidden;border-radius:28px;background:linear-gradient(125deg,#0b286d,#174eb8);box-shadow:0 28px 65px rgba(13,46,123,.23)}.career-application-cta img{position:absolute;bottom:-55px;left:-35px;width:360px;height:330px;object-fit:contain}.career-application-cta .container>div{position:relative;z-index:1}.career-application-cta span{color:#63dfd0;font-size:10px;font-weight:900;letter-spacing:.1em;text-transform:uppercase}.career-application-cta h2{margin:9px 0;color:#fff;font-size:clamp(30px,3.6vw,45px);line-height:1.1}.career-application-cta p{color:rgba(255,255,255,.64);font-size:12px}.career-application-cta .btn{position:relative;z-index:1;display:inline-flex;align-items:center;gap:9px;flex:0 0 auto;color:#153b95;background:#fff;cursor:pointer}
body.career-drawer-open{overflow:hidden}.career-application-drawer{position:fixed;inset:0;z-index:1000001;visibility:hidden;pointer-events:none}.career-application-drawer.is-open{visibility:visible;pointer-events:auto}.career-drawer-backdrop{position:absolute;inset:0;width:100%;border:0;background:rgba(5,16,47,.62);opacity:0;backdrop-filter:blur(5px);transition:opacity .4s ease}.career-application-drawer.is-open .career-drawer-backdrop{opacity:1}.career-drawer-panel{position:absolute;top:0;right:0;width:min(830px,94vw);height:100%;overflow-y:auto;padding:48px 48px 35px;outline:0;background:linear-gradient(145deg,#f8faff,#fff);box-shadow:-30px 0 80px rgba(7,25,73,.22);transform:translateX(102%);transition:transform .58s cubic-bezier(.22,1,.36,1)}.career-application-drawer.is-open .career-drawer-panel{transform:translateX(0)}.career-drawer-close{position:absolute;top:20px;right:22px;display:grid;width:40px;height:40px;place-items:center;border:1px solid #dde4ef;border-radius:50%;color:#1c2f61;background:#fff;cursor:pointer}.career-drawer-heading{padding:8px 55px 27px 0;border-bottom:1px solid #e2e8f3}.career-drawer-heading>span{color:#169b89;font-size:10px;font-weight:900;letter-spacing:.11em;text-transform:uppercase}.career-drawer-heading h2{margin:10px 0 9px;color:#122041;font-size:clamp(32px,4vw,48px);line-height:1.05;letter-spacing:-.04em}.career-drawer-heading h2 strong{color:var(--primary-color);font-weight:inherit}.career-drawer-heading>p{color:#6b768b;font-size:12px;line-height:1.65}.career-drawer-heading label{display:grid;gap:7px;margin-top:17px;color:#273550;font-size:11px;font-weight:800}.career-drawer-heading select{height:47px;padding:0 13px;border:1px solid #d9e1ed;border-radius:9px;color:#1d2b4b;background:#fff;font:inherit}.career-drawer-form{padding-top:27px}.career-form-grid{display:grid;gap:14px}.career-form-grid>label{display:grid;grid-template-columns:155px minmax(0,1fr);align-items:center;gap:16px;color:#17365b;font-size:11px;font-weight:800}.career-form-grid input:not([type=checkbox]):not([type=file]),.career-form-grid select{width:100%;height:49px;padding:0 14px;border:1px solid #d7deea;border-radius:8px;outline:0;color:#27334c;background:#fff;font:inherit;font-weight:400}.career-input{position:relative;display:block}.career-input i{position:absolute;top:50%;left:15px;z-index:1;color:#1685a4;transform:translateY(-50%)}.career-input input{padding-left:44px!important}.career-experience{display:grid;grid-template-columns:1fr 1fr;gap:9px}.career-skills-field{align-items:start!important}.career-skills-field .wpcf7-form-control{display:flex;flex-wrap:wrap;gap:8px 13px}.career-skills-field .wpcf7-list-item{margin:0}.career-skills-field .wpcf7-list-item label{display:inline-flex;align-items:center;gap:5px;color:#536078;font-weight:500}.career-file{position:relative;display:inline-flex;min-height:48px;align-items:center;justify-content:center;gap:9px;overflow:hidden;border-radius:8px;color:#fff;background:#22bce4;cursor:pointer}.career-file input{position:absolute;inset:0;opacity:0;cursor:pointer}.career-form-grid label>small{grid-column:2;margin-top:-10px;color:#7a8497;font-size:9px;font-weight:400}.career-consent,.career-form-submit{margin-left:171px}.career-consent{color:#657087;font-size:10px;line-height:1.5}.career-form-submit input{min-width:220px;border:0!important;color:#fff!important;background:#127e98!important;font-weight:800!important;text-transform:uppercase;cursor:pointer}