:root {
    --blue: #0140c1;
    --blue-2: #0140c1;
    --sky: #0140c1;
    --navy: #071427;
    --navy-2: #0b1d3c;
    --ink: #101828;
    --muted: #65758b;
    --soft: #f4f8ff;
    --soft-2: #eaf2ff;
    --white: #ffffff;
    --line: rgba(1, 64, 193, .16);
    --line-dark: rgba(255, 255, 255, .16);
    --shadow: 0 28px 80px rgba(7, 20, 39, .14);
    --radius: 28px;
}

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: Inter, Segoe UI, Arial, sans-serif;
    color: var(--ink);
    background: #fff;
    overflow-x: hidden;
}

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

img {
    display: block;
    max-width: 100%;
}

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

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

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

.site-page {
    display: none;
}

.site-page.active-page {
    display: block;
}

/* ================= DESKTOP + MOBILE HEADERS ================= */
.desktop-site-header,
.mobile-site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: rgba(255, 255, 255, .93);
    border-bottom: 1px solid rgba(1, 64, 193, .10);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    transition: background .28s ease, box-shadow .28s ease;
}

.desktop-site-header.scrolled,
.mobile-site-header.scrolled {
    background: rgba(255, 255, 255, .98);
    box-shadow: 0 18px 42px rgba(7, 20, 39, .10);
}

.desktop-nav {
    height: 88px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.nav-brand {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.desktop-brand {
    min-width: 218px;
}

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

.desktop-menu {
    display: flex;
    align-items: center;
    gap: 4px;
    list-style: none;
}

.desktop-menu>li {
    position: relative;
}

.desktop-menu-link {
    min-height: 48px;
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #14233a;
    font: inherit;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: .1px;
    white-space: nowrap;
    cursor: pointer;
    transition: background .25s ease, color .25s ease, transform .25s ease;
}

.desktop-menu-link:hover,
.desktop-menu-link.active,
.desktop-dropdown.open>.desktop-menu-link {
    color: var(--blue);
    background: var(--soft-2);
}

.desktop-menu-link .chev,
.mobile-accordion-toggle .chev {
    font-size: 12px;
    transition: transform .25s ease;
}

.desktop-dropdown.open>.desktop-menu-link .chev,
.mobile-accordion.open>.mobile-accordion-toggle .chev {
    transform: rotate(180deg);
}

.desktop-dropdown-menu {
    position: absolute;
    /* top: calc(100% + 10px); */
    left: 50%;
    width: 270px;
    padding: 10px;
    display: grid;
    gap: 4px;
    list-style: none;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 20px;
    box-shadow: 0 24px 70px rgba(7, 20, 39, .14);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate(-50%, 10px);
    transition: opacity .25s ease, visibility .25s ease, transform .25s ease;
}

.desktop-dropdown.open>.desktop-dropdown-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(-50%, 0);
}

.desktop-dropdown-action,
.mobile-submenu-action {
    width: 100%;
    min-height: 46px;
    padding: 11px 13px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    border: 0;
    border-radius: 14px;
    background: transparent;
    color: #1b2a40;
    font: inherit;
    font-size: 14px;
    font-weight: 750;
    text-align: left;
    cursor: pointer;
    transition: background .22s ease, color .22s ease, transform .22s ease;
}

.desktop-dropdown-action:hover,
.mobile-submenu-action:hover {
    color: var(--blue);
    background: var(--soft);
    transform: translateX(3px);
}

.desktop-dropdown-action i,
.mobile-submenu-action i {
    flex: 0 0 auto;
    font-size: 12px;
}

.desktop-nav-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.touch-btn,
.btn {
    border: 0;
    cursor: pointer;
    transition: .28s ease;
}

.touch-btn {
    padding: 14px 20px;
    border-radius: 999px;
    color: #fff;
    font-weight: 900;
    background: linear-gradient(135deg, var(--blue), var(--sky));
    box-shadow: 0 18px 36px rgba(1, 64, 193, .26);
    white-space: nowrap;
}

.touch-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 22px 50px rgba(1, 64, 193, .34);
}

/* Mobile header is a completely separate structure. */
.mobile-site-header,
.mobile-menu-overlay,
.mobile-menu-drawer {
    display: none;
}

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

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

.mobile-menu-toggle,
.mobile-menu-close {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 16px;
    color: var(--blue);
    background: var(--soft-2);
    font-size: 22px;
    cursor: pointer;
}

.mobile-menu-overlay {
    position: fixed;
    inset: 0;
    z-index: 1100;
    background: rgba(3, 16, 36, .58);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .3s ease, visibility .3s ease;
}

.mobile-menu-overlay.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.mobile-menu-drawer {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1101;
    width: min(88vw, 390px);
    height: 100vh;
    height: 100dvh;
    padding: 18px;
    overflow-y: auto;
    background: #fff;
    box-shadow: -24px 0 80px rgba(7, 20, 39, .20);
    transform: translateX(105%);
    transition: transform .34s cubic-bezier(.22, .75, .25, 1);
}

.mobile-menu-drawer.open {
    transform: translateX(0);
}

.mobile-menu-head {
    min-height: 58px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--line);
}

.mobile-menu-head img {
    width: auto;
    height: 50px;
    object-fit: contain;
}

.mobile-menu-list {
    display: grid;
    gap: 8px;
    padding: 18px 0;
}

.mobile-main-link,
.mobile-accordion-toggle {
    width: 100%;
    min-height: 54px;
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border: 0;
    border-radius: 17px;
    color: #14233a;
    background: transparent;
    font: inherit;
    font-size: 15px;
    font-weight: 850;
    text-align: left;
    cursor: pointer;
    transition: background .24s ease, color .24s ease;
}

.mobile-main-link:hover,
.mobile-main-link.active,
.mobile-accordion-toggle:hover,
.mobile-accordion-toggle.active,
.mobile-accordion.open>.mobile-accordion-toggle {
    color: var(--blue);
    background: var(--soft-2);
}

.mobile-submenu {
    max-height: 0;
    padding: 0 8px;
    display: grid;
    gap: 5px;
    overflow: hidden;
    opacity: 0;
    transition: max-height .3s ease, opacity .25s ease, padding .3s ease;
}

.mobile-accordion.open>.mobile-submenu {
    max-height: 180px;
    padding: 8px;
    opacity: 1;
}

.mobile-submenu-action {
    min-height: 46px;
    background: var(--soft);
}

.mobile-menu-cta {
    margin-top: 8px;
}

.mobile-menu-cta .touch-btn {
    width: 100%;
}

.desktop-menu-link:focus-visible,
.desktop-dropdown-action:focus-visible,
.nav-brand:focus-visible,
.mobile-menu-toggle:focus-visible,
.mobile-menu-close:focus-visible,
.mobile-main-link:focus-visible,
.mobile-accordion-toggle:focus-visible,
.mobile-submenu-action:focus-visible {
    outline: 3px solid rgba(1, 64, 193, .22);
    outline-offset: 3px;
}

body.mobile-nav-open {
    overflow: hidden;
}

@media (max-width: 1080px) {
    .desktop-site-header {
        display: none;
    }

    .mobile-site-header,
    .mobile-menu-overlay,
    .mobile-menu-drawer {
        display: block;
    }
}

@media (min-width: 1081px) {
    .desktop-site-header {
        display: block;
    }
}

/* ================= COMMON ================= */
section {
    position: relative;
    padding: 104px 0;
}

.section-top {
    max-width: 780px;
    margin: 0 0 46px;
}

.section-top.center {
    text-align: center;
    margin-inline: auto;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 14px;
    padding: 9px 13px;
    border-radius: 999px;
    background: var(--soft-2);
    color: var(--blue);
    font-size: 12px;
    font-weight: 950;
    letter-spacing: .5px;
    text-transform: uppercase;
}

.eyebrow::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--blue);
    box-shadow: 0 0 0 6px rgba(1, 64, 193, .11);
}

.title {
    font-size: clamp(30px, 4vw, 56px);
    line-height: 1.05;
    letter-spacing: -1.5px;
    color: var(--navy);
}

.text {
    margin-top: 16px;
    color: var(--muted);
    font-size: 16px;
    line-height: 1.85;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 15px 22px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 950;
}

.btn-primary {
    color: #fff;
    background: linear-gradient(135deg, var(--blue), var(--sky));
    box-shadow: 0 18px 38px rgba(1, 64, 193, .24);
}

.btn-light {
    color: var(--blue);
    background: #fff;
    border: 1px solid var(--line);
    box-shadow: 0 12px 26px rgba(7, 20, 39, .06);
}

.btn-dark {
    color: #fff;
    background: var(--navy);
}

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

/* image fallback boxes */
.image-box {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #ddecff, #ffffff);
}

.image-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: relative;
    z-index: 1;
}

.image-box.image-missing img {
    display: none;
}

.image-box::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(120deg, rgba(1, 64, 193, .88), rgba(1, 64, 193, .52)),
        repeating-linear-gradient(45deg, rgba(255, 255, 255, .18) 0 1px, transparent 1px 18px);
}

.image-box::after {
    content: attr(data-title);
    position: absolute;
    left: 28px;
    right: 28px;
    bottom: 26px;
    color: #fff;
    font-size: clamp(24px, 3vw, 42px);
    font-weight: 950;
    line-height: 1.05;
    letter-spacing: -.9px;
    z-index: 2;
    text-shadow: 0 12px 30px rgba(0, 0, 0, .22);
}



/* ================= SINGLE FILE PAGE SYSTEM ================= */
.site-page {
    display: none;
}

.site-page.active-page {
    display: block;
}

.page-placeholder {
    min-height: 520px;
    padding: 170px 0 90px;
    background:
        radial-gradient(circle at 15% 20%, rgba(1, 64, 193, .18), transparent 30%),
        radial-gradient(circle at 80% 10%, rgba(1, 64, 193, .14), transparent 28%),
        linear-gradient(180deg, #ffffff 0%, #f6faff 100%);
}

.page-placeholder-box {
    padding: 46px;
    border-radius: 34px;
    background: #fff;
    border: 1px dashed var(--line);
    box-shadow: var(--shadow);
    color: var(--muted);
}

.page-placeholder-box h1 {
    color: var(--navy);
    font-size: clamp(34px, 4vw, 56px);
    line-height: 1.08;
    margin-bottom: 14px;
}

/* ================= HERO ================= */
.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 154px 0 88px;
    overflow: hidden;
    isolation: isolate;
    background:
        radial-gradient(circle at 12% 16%, rgba(1, 64, 193, .13), transparent 28%),
        radial-gradient(circle at 72% 8%, rgba(1, 64, 193, .11), transparent 26%),
        linear-gradient(180deg, #ffffff 0%, #f6faff 100%);
}

.hero-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    opacity: .95;
    pointer-events: none;
}

.hero-noise {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(1, 64, 193, .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(1, 64, 193, .035) 1px, transparent 1px);
    background-size: 72px 72px;
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, .65) 55%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, .65) 55%, transparent 100%);
}

.hero>.container {
    position: relative;
    z-index: 2;
}

.hero-wrap {
    position: relative;
    display: grid;
    grid-template-columns: .88fr 1.12fr;
    align-items: center;
    gap: 54px;
}

.hero-copy {
    max-width: 610px;
}

.hero-copy h1 {
    font-size: clamp(36px, 4.2vw, 64px);
    line-height: 1.04;
    letter-spacing: -1.9px;
    color: var(--navy);
    margin-bottom: 20px;
}

.hero-copy p {
    color: #51627a;
    font-size: 17px;
    line-height: 1.85;
    max-width: 590px;
    margin-bottom: 28px;
}

.hero-actions {
    display: flex;
    gap: 13px;
    flex-wrap: wrap;
    margin-bottom: 30px;
}

.hero-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.hero-stats div {
    min-width: 138px;
    padding: 16px 18px;
    border-radius: 20px;
    background: rgba(255, 255, 255, .76);
    border: 1px solid var(--line);
    box-shadow: 0 18px 45px rgba(7, 20, 39, .08);
}

.hero-stats strong {
    display: block;
    color: var(--blue);
    font-size: 27px;
    line-height: 1;
}

.hero-stats span {
    display: block;
    margin-top: 6px;
    color: #5f7088;
    font-size: 12px;
    font-weight: 850;
}

.hero-empty {
    min-height: 540px;
    border-radius: 42px;
    border: 1px dashed rgba(1, 64, 193, .30);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, .46), rgba(234, 242, 255, .42)),
        radial-gradient(circle at 70% 22%, rgba(1, 64, 193, .16), transparent 30%);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .65), 0 30px 90px rgba(7, 20, 39, .08);
    position: relative;
    overflow: hidden;
}

.hero-empty::before {
    content: "";
    position: absolute;
    width: 520px;
    height: 520px;
    right: -160px;
    top: -160px;
    border-radius: 50%;
    border: 1px solid rgba(1, 64, 193, .16);
    box-shadow: 0 0 0 55px rgba(1, 64, 193, .035), 0 0 0 110px rgba(1, 64, 193, .03);
    animation: heroOrb 12s ease-in-out infinite;
}

.hero-empty::after {
    content: "Your hero image / artwork area";
    position: absolute;
    left: 34px;
    bottom: 30px;
    color: #8090a8;
    font-weight: 850;
    font-size: 14px;
    letter-spacing: .2px;
}

@keyframes heroOrb {

    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }

    50% {
        transform: translate(-24px, 26px) scale(1.05);
    }
}

/* ================= ABOUT ================= */
.about {
    background: #fff;
}

.about-grid {
    display: grid;
    grid-template-columns: .95fr 1.05fr;
    gap: 52px;
    align-items: center;
}

.about-image {
    min-height: 540px;
    border-radius: 40px;
    box-shadow: var(--shadow);
}

.about-content .title {
    max-width: 620px;
}

.about-points {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-top: 28px;
}

.about-point {
    padding: 20px;
    border-radius: 22px;
    background: var(--soft);
    border: 1px solid var(--line);
}

.about-point b {
    display: block;
    color: var(--navy);
    margin-bottom: 8px;
}

.about-point span {
    color: var(--muted);
    font-size: 14px;
    line-height: 1.6;
}

/* ================= SERVICES CLEAN MARQUEE STYLE SLIDER ================= */
.services {
    background: linear-gradient(180deg, #f6faff 0%, #ffffff 100%);
    overflow: hidden;
}

.switch-row {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 38px;
}

.switch-btn {
    border: 1px solid var(--line);
    background: #fff;
    color: var(--navy);
    padding: 14px 22px;
    border-radius: 999px;
    font-weight: 950;
    cursor: pointer;
    box-shadow: 0 12px 28px rgba(7, 20, 39, .06);
    transition: .25s ease;
}

.switch-btn.active,
.switch-btn:hover {
    background: var(--navy);
    color: #fff;
    transform: translateY(-3px);
}

.service-panel {
    display: none;
}

.service-panel.active {
    display: block;
}

/* wide clean stage */
.service-slider-wrap {
    width: min(1120px, 100%);
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    padding: 0 90px;
    mask-image: linear-gradient(to right, transparent 0%, #000 9%, #000 91%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 9%, #000 91%, transparent 100%);
}

.service-slider {
    position: relative;
    min-height: 520px;
    overflow: visible;
}

/* normal box width */
.service-slide {
    position: absolute;
    top: 0;
    left: 50%;
    width: min(820px, 100%);
    height: 100%;
    visibility: hidden;
    opacity: 1;
    pointer-events: none;
    transform: translateX(calc(-50% + 930px));
    will-change: transform;
    backface-visibility: hidden;
}

/* current box in center */
.service-slide.active {
    visibility: visible;
    transform: translateX(-50%);
    z-index: 3;
    pointer-events: auto;
}

/* next box starts from right */
.service-slide.from-right {
    visibility: visible;
    transform: translateX(calc(-50% + 930px));
    z-index: 4;
    transition: none !important;
}

/* next box moves to center */
.service-slide.move-center {
    visibility: visible;
    transform: translateX(-50%);
    z-index: 4;
    transition: transform 1.5s cubic-bezier(.25, .75, .25, 1);
}

/* old box moves left */
.service-slide.move-left {
    visibility: visible;
    transform: translateX(calc(-50% - 1200px));
    z-index: 3;
    transition: transform 1.5s cubic-bezier(.25, .75, .25, 1);
}

.service-box {
    height: 100%;
    min-height: 520px;
    border-radius: 34px;
    background: #ffffff;
    border: 1px solid rgba(1, 64, 193, .16);
    box-shadow: 0 26px 70px rgba(7, 20, 39, .11);
    overflow: hidden;
    display: grid;
    grid-template-rows: 310px 1fr;
}

.service-box-img {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, var(--blue), var(--sky));
}

.service-box-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.service-box-img::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, transparent 45%, rgba(0, 0, 0, .35)),
        radial-gradient(circle at 20% 20%, rgba(255, 255, 255, .22), transparent 35%);
}

.service-box-content {
    padding: 30px 34px 0px;
    position: relative;
}

.service-box-no {
    position: absolute;
    top: -30px;
    left: 34px;
    width: 60px;
    height: 60px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    color: #fff;
    font-weight: 950;
    background: linear-gradient(135deg, var(--blue), var(--sky));
    box-shadow: 0 16px 34px rgba(1, 64, 193, .26);
}

.service-box-content h3 {
    color: var(--navy);
    font-size: clamp(24px, 2.5vw, 34px);
    line-height: 1.1;
    margin: 18px 0 12px;
}

.service-box-content p {
    color: var(--muted);
    font-size: 16px;
    line-height: 1.75;
    max-width: 680px;
}

.service-box-points {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 18px;
}

.service-box-points span {
    padding: 8px 12px;
    border-radius: 999px;
    background: #eef6ff;
    color: var(--blue);
    font-size: 12px;
    font-weight: 900;
}

.service-dots {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 26px;
}

.service-dot {
    width: 38px;
    height: 9px;
    border: 0;
    border-radius: 999px;
    background: rgba(1, 64, 193, .18);
    cursor: pointer;
    transition: .25s ease;
}

.service-dot.active {
    width: 68px;
    background: linear-gradient(135deg, var(--blue), var(--sky));
}

@media (max-width: 900px) {
    .service-slider-wrap {
        padding: 0;
        mask-image: none;
        -webkit-mask-image: none;
    }

    .service-slide {
        width: 100%;
        transform: translateX(calc(-50% + 105%));
    }

    .service-slide.from-right {
        transform: translateX(calc(-50% + 105%));
    }

    .service-slide.move-left {
        transform: translateX(calc(-50% - 105%));
    }
}

@media (max-width: 760px) {
    .service-slider {
        min-height: 520px;
        overflow: hidden;
        border-radius: 28px;
    }

    .service-box {
        min-height: 520px;
        border-radius: 28px;
        grid-template-rows: 255px 1fr;
    }

    .service-box-content {
        padding: 30px 22px 28px;
    }

    .service-box-no {
        left: 22px;
    }
}

@media (max-width: 520px) {
    .service-slider {
        min-height: 570px;
    }

    .service-box {
        min-height: 570px;
        grid-template-rows: 230px 1fr;
    }
}

/* ================= PROCESS ================= */
.process {
    background: #071427;
    color: #fff;
    overflow: hidden;
}

.process::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 12% 14%, rgba(1, 64, 193, .18), transparent 28%),
        linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
    background-size: auto, 72px 72px, 72px 72px;
    opacity: .8;
}

.process .container {
    position: relative;
    z-index: 2;
}

.process .title {
    color: #fff;
}

.process .text {
    color: #c9d8ef;
}

.process-board {
    margin-top: 54px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border: 1px solid var(--line-dark);
    border-radius: 36px;
    overflow: hidden;
    background: rgba(255, 255, 255, .06);
    backdrop-filter: blur(14px);
}

.process-step {
    min-height: 330px;
    padding: 30px;
    border-right: 1px solid var(--line-dark);
    position: relative;
}

.process-step:last-child {
    border-right: 0;
}

.process-step small {
    color: #80dfff;
    font-weight: 950;
    letter-spacing: .8px;
}

.process-step h3 {
    font-size: 24px;
    margin: 22px 0 12px;
    line-height: 1.1;
}

.process-step p {
    color: #c9d8ef;
    line-height: 1.72;
    font-size: 14px;
}

.process-step b {
    position: absolute;
    right: 24px;
    bottom: 20px;
    font-size: 70px;
    line-height: 1;
    color: rgba(255, 255, 255, .07);
}

/* ================= WORK ================= */
.work {
    background: #fff;
}

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

.work-card {
    /* border-radius: 28px; */
    border: 1px solid var(--line);
    overflow: hidden;
    background: #fff;
    box-shadow: 0 16px 42px rgba(7, 20, 39, .07);
    transition: .25s ease;
}

.work-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow);
}

.work-img {
    height: 210px;
}

.work-body {
    padding: 22px;
}

.work-body span {
    display: inline-flex;
    color: var(--blue);
    font-size: 11px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 9px;
}

.work-body h3 {
    color: var(--navy);
    font-size: 19px;
    line-height: 1.2;
    margin-bottom: 10px;
}

.work-body p {
    color: var(--muted);
    font-size: 14px;
    line-height: 1.65;
}

.work-footer {
    margin-top: 34px;
    text-align: center;
}

/* ================= OFFERING ================= */
.offering {
    background: linear-gradient(180deg, #f6faff, #fff);
}

.offer-wrap {
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: 36px;
    align-items: start;
}

.offer-sticky {
    position: sticky;
    top: 120px;
    padding: 34px;
    border-radius: 34px;
    background: var(--navy);
    color: #fff;
    box-shadow: var(--shadow);
    overflow: hidden;
}

.offer-sticky::after {
    content: "";
    position: absolute;
    right: -70px;
    bottom: -90px;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background: rgba(1, 64, 193, .20);
}

.offer-sticky h2 {
    position: relative;
    z-index: 1;
    font-size: clamp(30px, 3vw, 44px);
    line-height: 1.05;
    margin-bottom: 15px;
}

.offer-sticky p {
    position: relative;
    z-index: 1;
    color: #c9d8ef;
    line-height: 1.75;
}

.offer-list {
    display: grid;
    gap: 14px;
}

.offer-item {
    display: grid;
    grid-template-columns: 52px 1fr;
    gap: 16px;
    padding: 24px;
    border-radius: 24px;
    background: #fff;
    border: 1px solid var(--line);
    box-shadow: 0 14px 32px rgba(7, 20, 39, .055);
}

.offer-icon {
    width: 52px;
    height: 52px;
    border-radius: 17px;
    display: grid;
    place-items: center;
    background: var(--soft-2);
    color: var(--blue);
    font-weight: 950;
}

.offer-item h3 {
    color: var(--navy);
    margin-bottom: 7px;
}

.offer-item p {
    color: var(--muted);
    line-height: 1.65;
    font-size: 14px;
}

/* ================= CLIENTS ================= */
.clients {
    background: #fff;
    overflow: hidden;
}

.marquee-shell {
    display: grid;
    gap: 18px;
    margin-top: 20px;
}

.logo-marquee {
    overflow: hidden;
    mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}

.logo-track {
    display: flex;
    gap: 18px;
    width: max-content;
    animation: marqueeLeft 28s linear infinite;
}

.logo-track.reverse {
    animation: marqueeRight 31s linear infinite;
}

.logo-box {
    width: 190px;
    height: 94px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: 22px;
    background: #fff;
    border: 1px solid var(--line);
    box-shadow: 0 14px 34px rgba(7, 20, 39, .055);
    color: #24405f;
    font-weight: 950;
    padding: 16px;
}

.logo-box img {
    max-height: 54px;
    max-width: 150px;
    object-fit: contain;
}

@keyframes marqueeLeft {
    from {
        transform: translateX(0)
    }

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

@keyframes marqueeRight {
    from {
        transform: translateX(-50%)
    }

    to {
        transform: translateX(0)
    }
}

/* ================= TESTIMONIALS ================= */
.testimonials {
    background: #f6faff;
}

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

.testimonial-card {
    min-height: 280px;
    padding: 28px;
    border-radius: 30px;
    background: #fff;
    border: 1px solid var(--line);
    box-shadow: 0 16px 42px rgba(7, 20, 39, .065);
    opacity: 1;
    transform: translateY(0);
    transition: .42s ease;
}

.testimonial-card.swap-out {
    opacity: 0;
    transform: translateY(20px);
}

.quote-mark {
    font-size: 48px;
    color: var(--blue);
    line-height: .8;
    font-weight: 950;
    margin-bottom: 16px;
}

.testimonial-card p {
    color: #52647b;
    line-height: 1.8;
    margin-bottom: 22px;
}

.person {
    display: flex;
    align-items: center;
    gap: 12px;
}

.avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--blue), var(--sky));
    color: #fff;
    font-weight: 950;
}

.person b {
    display: block;
    color: var(--navy);
}

.person span {
    display: block;
    color: var(--muted);
    font-size: 13px;
    margin-top: 2px;
}

/* ================= CTA ================= */
.cta {
    background: #071427;
    color: #fff;
    overflow: hidden;
}

.cta::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 18% 20%, rgba(1, 64, 193, .20), transparent 30%), radial-gradient(circle at 82% 70%, rgba(1, 64, 193, .22), transparent 34%);
}

.cta-wrap {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: .95fr 1.05fr;
    gap: 38px;
    align-items: center;
    padding: 56px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 42px;
    background: rgba(255, 255, 255, .07);
    backdrop-filter: blur(16px);
}

.cta h2 {
    font-size: clamp(32px, 4vw, 60px);
    line-height: 1.04;
    letter-spacing: -1.5px;
    margin-bottom: 16px;
}

.cta p {
    color: #c9d8ef;
    line-height: 1.8;
    margin-bottom: 26px;
}

.mini-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.mini-form textarea,
.mini-form button {
    grid-column: 1/-1;
}

.field {
    width: 100%;
    border: 1px solid rgba(255, 255, 255, .16);
    background: rgba(255, 255, 255, .10);
    color: #fff;
    border-radius: 17px;
    padding: 15px 16px;
    outline: none;
}

.field::placeholder {
    color: #c9d8ef;
}

.field option {
    color: #101828;
}

textarea.field {
    min-height: 116px;
    resize: vertical;
}

.form-note {
    display: none;
    grid-column: 1/-1;
    padding: 13px 15px;
    border-radius: 14px;
    background: rgba(31, 210, 111, .16);
    border: 1px solid rgba(31, 210, 111, .35);
    color: #dbffe8;
    font-weight: 800;
}

/* ================= FOOTER ================= */
.footer {
    background: #031024;
    color: #c9d8ef;
    padding: 70px 0 26px;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.3fr .7fr .7fr .9fr;
    gap: 30px;
    margin-bottom: 38px;
}

.footer-brand img {
    height: 58px;
    background: #fff;
    border-radius: 16px;
    padding: 6px 14px;
    margin-bottom: 18px;
}

.footer-brand p,
.footer-contact p {
    line-height: 1.75;
    color: #afc0d8;
    font-size: 14px;
}

.footer h3 {
    color: #fff;
    margin-bottom: 18px;
    font-size: 17px;
}

.footer a {
    display: block;
    color: #afc0d8;
    margin-bottom: 12px;
    font-size: 14px;
    transition: .2s ease;
}

.footer a:hover {
    color: #fff;
    transform: translateX(4px);
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, .10);
    padding-top: 24px;
    display: flex;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    font-size: 14px;
    color: #9fb1ca;
}

.footer-social {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 20px;
}

.footer-social a {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    color: #ffffff;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .14);
    font-size: 17px;
    transition: .25s ease;
}

.footer-social a:hover {
    background: linear-gradient(135deg, var(--blue), var(--sky));
    transform: translateY(-4px);
    color: #ffffff;
}

/* ================= MODAL ================= */
.modal {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: rgba(3, 16, 36, .62);
    backdrop-filter: blur(10px);
}

.modal.open {
    display: flex;
}

.modal-card {
    width: min(560px, 100%);
    border-radius: 30px;
    background: #fff;
    box-shadow: 0 30px 110px rgba(0, 0, 0, .35);
    overflow: hidden;
    animation: modalIn .25s ease both;
}

@keyframes modalIn {
    from {
        opacity: 0;
        transform: translateY(18px) scale(.97)
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1)
    }
}

.modal-head {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: flex-start;
    padding: 26px 28px;
    background: linear-gradient(135deg, var(--blue), var(--sky));
    color: #fff;
}

.modal-head h2 {
    font-size: 26px;
    line-height: 1.1;
}

.modal-head p {
    margin-top: 8px;
    color: #eaf7ff;
    font-size: 14px;
    line-height: 1.55;
}

.close-modal {
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 14px;
    background: rgba(255, 255, 255, .18);
    color: #fff;
    font-size: 26px;
    cursor: pointer;
}

.modal-body {
    padding: 26px 28px;
    display: grid;
    gap: 12px;
}

.modal-body input,
.modal-body select,
.modal-body textarea {
    /* width: 100%; */
    border: 1px solid var(--line);
    background: #f8fbff;
    color: var(--ink);
    border-radius: 16px;
    padding: 14px 15px;
    outline: none;
}

.modal-body textarea {
    min-height: 112px;
    resize: vertical;
}

.modal-body button {
    width: 100%;
}

.modal-body .form-note {
    display: none;
    color: #14532d;
    background: #ecfdf3;
    border: 1px solid #bbf7d0;
}

.modal-body .form-note.is-visible {
    display: block;
}

.modal-body .form-note.is-error {
    color: #991b1b;
    background: #fff1f2;
    border-color: #fecdd3;
}

.modal-body .form-note.is-success {
    color: #14532d;
    background: #ecfdf3;
    border-color: #bbf7d0;
}

.modal-body button[disabled] {
    cursor: wait;
    opacity: .72;
}

.enquiry-honeypot {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* ================= REVEAL ================= */
.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: .7s ease;
}

.reveal.show {
    opacity: 1;
    transform: translateY(0);
}

/* ================= RESPONSIVE ================= */
@media(max-width:1080px) {

    .hero-wrap,
    .about-grid,
    .service-layout,
    .service-layout.reverse,
    .offer-wrap,
    .cta-wrap {
        grid-template-columns: 1fr;
    }

    .hero-empty {
        min-height: 380px;
    }

    .process-board {
        grid-template-columns: repeat(2, 1fr);
    }

    .process-step:nth-child(2) {
        border-right: 0;
    }

    .process-step:nth-child(1),
    .process-step:nth-child(2) {
        border-bottom: 1px solid var(--line-dark);
    }

    .work-grid,
    .testimonial-grid {
        grid-template-columns: repeat(2, 1fr);
    }

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

    .offer-sticky {
        position: relative;
        top: 0;
    }
}

@media(max-width:680px) {
    section {
        padding: 76px 0;
    }

    .hero {
        padding: 118px 0 70px;
        min-height: auto;
    }

    .hero-wrap {
        gap: 36px;
    }

    .hero-copy h1 {
        font-size: clamp(34px, 11vw, 46px);
        letter-spacing: -1.1px;
    }

    .hero-copy p {
        font-size: 15.5px;
    }

    .btn,
    .touch-btn {
        width: 100%;
    }

    .hero-actions {
        width: 100%;
    }

    .hero-stats {
        display: grid;
        grid-template-columns: 1fr 1fr;
        width: 100%;
    }

    .about-points,
    .process-board,
    .work-grid,
    .testimonial-grid,
    .footer-grid,
    .mini-form {
        grid-template-columns: 1fr;
    }

    .process-step {
        border-right: 0 !important;
        border-bottom: 1px solid var(--line-dark) !important;
        min-height: 260px;
    }

    .process-step:last-child {
        border-bottom: 0 !important;
    }

    .service-item {
        grid-template-columns: 46px 1fr;
        padding: 18px;
    }

    .service-num {
        width: 46px;
        height: 46px;
        border-radius: 15px;
    }

    .service-visual {
        min-height: 360px;
    }

    .about-image {
        min-height: 390px;
    }

    .cta-wrap {
        padding: 26px;
        border-radius: 30px;
    }

    .logo-box {
        width: 160px;
        height: 82px;
    }

    .footer-bottom {
        display: block;
    }

    .footer-bottom p+p {
        margin-top: 10px;
    }
}

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

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

    .hero-canvas {
        opacity: .72;
    }
}

.site-page {
    display: none;
}

.site-page.active-page {
    display: block;
}

/* ================= ABOUT PNSWEB PAGE ================= */
.about-page {
    overflow: hidden;
    background: #fff;
}

/* ================= NEW ABOUT HERO ANIMATION ================= */
.about-hero-new {
    min-height: 100vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    background:
        linear-gradient(180deg,
            rgba(255, 255, 255, .88) 0%,
            rgba(245, 248, 255, .80) 45%,
            rgba(255, 255, 255, .92) 100%),
        radial-gradient(circle at 50% 38%, rgba(1, 64, 193, .16), transparent 36%),
        url("images/about-hero-bg.webp") center center / cover no-repeat;
}

.about-hero-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

/* soft moving blue mesh */
.about-hero-bg::before {
    content: "";
    position: absolute;
    inset: -25%;
    background:
        radial-gradient(circle at 20% 30%, rgba(1, 64, 193, .14), transparent 24%),
        radial-gradient(circle at 78% 28%, rgba(1, 64, 193, .11), transparent 26%),
        radial-gradient(circle at 50% 78%, rgba(1, 64, 193, .10), transparent 28%);
    filter: blur(14px);
    animation: aboutSoftMesh 14s ease-in-out infinite alternate;
}

/* clean digital grid */
.about-hero-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(1, 64, 193, .055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(1, 64, 193, .055) 1px, transparent 1px);
    background-size: 86px 86px;
    mask-image: linear-gradient(to bottom, transparent 0%, #000 20%, #000 72%, transparent 100%);
    animation: aboutGridSlow 18s linear infinite;
}

/* floating small dots */
.about-orb {
    position: absolute;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #0140c1;
    opacity: .35;
    box-shadow: 0 0 24px rgba(1, 64, 193, .45);
    animation: aboutDotMove 9s ease-in-out infinite;
}

.about-orb::before {
    content: "";
    position: absolute;
    inset: -9px;
    border-radius: 50%;
    border: 1px solid rgba(1, 64, 193, .15);
}

.about-orb.o1 {
    left: 16%;
    top: 32%;
    animation-delay: 0s;
}

.about-orb.o2 {
    right: 18%;
    top: 30%;
    animation-delay: -2s;
}

.about-orb.o3 {
    left: 26%;
    bottom: 23%;
    animation-delay: -4s;
}

.about-orb.o4 {
    right: 28%;
    bottom: 25%;
    animation-delay: -6s;
}

/* premium light sweep */
.about-hero-new::before {
    content: "";
    position: absolute;
    left: -30%;
    top: 0;
    width: 45%;
    height: 100%;
    background: linear-gradient(90deg,
            transparent,
            rgba(1, 64, 193, .06),
            transparent);
    transform: skewX(-18deg);
    animation: aboutLightSweep 8s ease-in-out infinite;
}

/* center soft shape behind text */
.about-hero-new::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 48%;
    width: min(760px, 86vw);
    height: min(760px, 86vw);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    background:
        radial-gradient(circle, rgba(255, 255, 255, .86) 0%, rgba(255, 255, 255, .50) 38%, transparent 70%);
    filter: blur(4px);
    z-index: 1;
    pointer-events: none;
}

@keyframes aboutSoftMesh {
    0% {
        transform: translate3d(-2%, -1%, 0) scale(1);
    }

    100% {
        transform: translate3d(2%, 2%, 0) scale(1.06);
    }
}

@keyframes aboutGridSlow {
    from {
        background-position: 0 0, 0 0;
    }

    to {
        background-position: 86px 86px, 86px 86px;
    }
}

@keyframes aboutDotMove {

    0%,
    100% {
        transform: translate3d(0, 0, 0);
        opacity: .28;
    }

    50% {
        transform: translate3d(18px, -24px, 0);
        opacity: .55;
    }
}

@keyframes aboutLightSweep {

    0%,
    18% {
        left: -45%;
        opacity: 0;
    }

    35% {
        opacity: 1;
    }

    58%,
    100% {
        left: 105%;
        opacity: 0;
    }
}

.about-hero-center {
    position: relative;
    z-index: 3;
    max-width: 940px;
    margin: auto;
    text-align: center;
}

.about-hero-center h1 {
    color: var(--navy);
    font-size: clamp(36px, 4.2vw, 64px);
    line-height: .98;
    letter-spacing: -2.8px;
    margin: 16px 0 24px;
}

.about-hero-center p {
    max-width: 760px;
    margin: 0 auto 32px;
    color: #52647b;
    font-size: 18px;
    line-height: 1.9;
}

.about-hero-actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 13px;
}

.about-story-new {
    background: #fff;
}

.about-story-grid-new {
    display: grid;
    grid-template-columns: 1.02fr .98fr;
    gap: 58px;
    align-items: center;
}

.about-story-content-new h2 {
    color: var(--navy);
    font-size: clamp(34px, 4.4vw, 62px);
    line-height: 1.04;
    letter-spacing: -1.7px;
    margin-bottom: 22px;
}

.about-story-content-new p {
    color: var(--muted);
    font-size: 17px;
    line-height: 1.9;
    margin-bottom: 18px;
}

.story-points-new {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 28px;
}

.story-points-new span {
    padding: 14px 16px;
    border-radius: 18px;
    background: var(--soft);
    border: 1px solid var(--line);
    color: var(--navy);
    font-weight: 850;
    font-size: 14px;
}

.about-video-wrap {
    position: relative;
    border-radius: 40px;
    padding: 12px;
    background: linear-gradient(135deg, rgba(1, 64, 193, .26), rgba(1, 64, 193, .22));
    box-shadow: 0 34px 90px rgba(7, 20, 39, .16);
    animation: videoFloat 5.8s ease-in-out infinite;
}

.about-video-wrap.video-playing {
    animation-play-state: paused;
}

.about-video-wrap::before,
.about-video-wrap::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    z-index: -1;
}

.about-video-wrap::before {
    width: 170px;
    height: 170px;
    right: -45px;
    top: -50px;
    background: rgba(1, 64, 193, .14);
    animation: videoDotFloat 7s ease-in-out infinite;
}

.about-video-wrap::after {
    width: 110px;
    height: 110px;
    left: -36px;
    bottom: -34px;
    border: 1px solid rgba(1, 64, 193, .20);
    box-shadow: 0 0 0 18px rgba(1, 64, 193, .035);
    animation: videoDotFloat 8s ease-in-out infinite reverse;
}

.about-video-box {
    position: relative;
    overflow: hidden;
    border-radius: 30px;
    min-height: 430px;
    background:
        linear-gradient(135deg, rgba(1, 64, 193, .92), rgba(1, 64, 193, .62)),
        repeating-linear-gradient(45deg, rgba(255, 255, 255, .20) 0 1px, transparent 1px 18px);
}

.about-video-box video {
    width: 100%;
    height: 100%;
    min-height: 430px;
    object-fit: cover;
    display: block;
    background: #071427;
}

.video-overlay-text {
    position: absolute;
    left: 28px;
    right: 28px;
    bottom: 28px;
    z-index: 2;
    color: #fff;
    pointer-events: none;
}

.video-overlay-text b {
    display: block;
    font-size: clamp(28px, 3vw, 44px);
    line-height: 1.02;
    margin-bottom: 10px;
}

.video-overlay-text span {
    color: #eaf7ff;
    line-height: 1.6;
}

@keyframes videoFloat {

    0%,
    100% {
        transform: translate3d(0, 0, 0);
    }

    50% {
        transform: translate3d(0, -18px, 0);
    }
}

@keyframes videoDotFloat {

    0%,
    100% {
        transform: translate3d(0, 0, 0) scale(1);
    }

    50% {
        transform: translate3d(18px, -18px, 0) scale(1.08);
    }
}

/* ================= WHY CHOOSE PNSWEB ================= */
.why-pnsweb-new {
    background:
        radial-gradient(circle at 12% 20%, rgba(1, 64, 193, .08), transparent 28%),
        radial-gradient(circle at 88% 80%, rgba(1, 64, 193, .07), transparent 30%),
        linear-gradient(180deg, #ffffff 0%, #f6faff 100%);
    overflow: hidden;
}

.why-pnsweb-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.why-pnsweb-card {
    position: relative;
    min-height: 290px;
    padding: 30px;
    border-radius: 32px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, .96), rgba(255, 255, 255, .76));
    border: 1px solid rgba(1, 64, 193, .14);
    box-shadow: 0 18px 52px rgba(7, 20, 39, .075);
    overflow: hidden;
    transition: .35s ease;
}

.why-pnsweb-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg,
            rgba(1, 64, 193, .75),
            transparent 35%,
            rgba(1, 64, 193, .28));
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: .35s ease;
    pointer-events: none;
}

.why-pnsweb-card::after {
    content: "";
    position: absolute;
    right: -70px;
    bottom: -80px;
    width: 190px;
    height: 190px;
    border-radius: 50%;
    background: rgba(1, 64, 193, .07);
    transition: .35s ease;
}

.why-pnsweb-card:hover {
    transform: translateY(-10px);
    border-color: rgba(1, 64, 193, .36);
    box-shadow:
        0 28px 80px rgba(7, 20, 39, .12),
        0 0 0 5px rgba(1, 64, 193, .055);
}

.why-pnsweb-card:hover::before {
    opacity: 1;
}

.why-pnsweb-card:hover::after {
    transform: scale(1.18);
    background: rgba(1, 64, 193, .11);
}

.why-pnsweb-icon {
    position: relative;
    z-index: 2;
    width: 66px;
    height: 66px;
    border-radius: 22px;
    display: grid;
    place-items: center;
    color: #fff;
    background: linear-gradient(135deg, var(--blue), var(--blue-2));
    box-shadow:
        0 18px 38px rgba(1, 64, 193, .24),
        inset 0 0 0 1px rgba(255, 255, 255, .22);
    font-size: 24px;
    margin-bottom: 26px;
    transition: .35s ease;
}

.why-pnsweb-card:hover .why-pnsweb-icon {
    transform: rotate(-4deg) scale(1.06);
    box-shadow:
        0 24px 55px rgba(1, 64, 193, .34),
        0 0 0 9px rgba(1, 64, 193, .08);
}

.why-pnsweb-card h3 {
    position: relative;
    z-index: 2;
    color: var(--navy);
    font-size: 23px;
    line-height: 1.15;
    margin-bottom: 12px;
}

.why-pnsweb-card p {
    position: relative;
    z-index: 2;
    color: var(--muted);
    font-size: 14.5px;
    line-height: 1.75;
}

/* card reveal stagger */
.why-pnsweb-card.reveal {
    transform: translateY(34px) scale(.96);
}

.why-pnsweb-card.reveal.show {
    transform: translateY(0) scale(1);
}

.why-pnsweb-card:nth-child(1) {
    transition-delay: .05s;
}

.why-pnsweb-card:nth-child(2) {
    transition-delay: .12s;
}

.why-pnsweb-card:nth-child(3) {
    transition-delay: .19s;
}

.why-pnsweb-card:nth-child(4) {
    transition-delay: .26s;
}

.why-pnsweb-card:nth-child(5) {
    transition-delay: .33s;
}

.why-pnsweb-card:nth-child(6) {
    transition-delay: .40s;
}

@media(max-width:1080px) {
    .why-pnsweb-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media(max-width:680px) {
    .why-pnsweb-grid {
        grid-template-columns: 1fr;
    }

    .why-pnsweb-card {
        min-height: auto;
        padding: 26px;
        border-radius: 26px;
    }
}

.about-stats-new {
    background: linear-gradient(180deg, #f6faff, #fff);
    overflow: hidden;
}

.stats-grid-new {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.stat-card-new {
    position: relative;
    min-height: 210px;
    padding: 30px;
    border-radius: 32px;
    background: #fff;
    border: 1px solid var(--line);
    box-shadow: 0 20px 52px rgba(7, 20, 39, .075);
    overflow: hidden;
}

.stat-card-new::after {
    content: "";
    position: absolute;
    right: -45px;
    bottom: -45px;
    width: 130px;
    height: 130px;
    border-radius: 50%;
    background: rgba(1, 64, 193, .06);
}

.stat-card-new i {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    border-radius: 20px;
    color: #fff;
    background: linear-gradient(135deg, var(--blue), var(--sky));
    margin-bottom: 26px;
    font-size: 20px;
}

.stat-card-new strong {
    display: flex;
    align-items: baseline;
    gap: 3px;
    color: var(--navy);
    font-size: clamp(36px, 4vw, 58px);
    line-height: 1;
    letter-spacing: -1.5px;
    margin-bottom: 10px;
}

.stat-card-new p {
    color: var(--muted);
    font-weight: 850;
    line-height: 1.45;
}

/* ================= INDUSTRIES WE WORK WITH ================= */
.industries-new {
    background:
        radial-gradient(circle at 10% 20%, rgba(1, 64, 193, .08), transparent 28%),
        radial-gradient(circle at 90% 78%, rgba(1, 64, 193, .06), transparent 30%),
        linear-gradient(180deg, #ffffff 0%, #f6faff 48%, #ffffff 100%);
    overflow: hidden;
}

.industries-scroll-wrap {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 6px 0 18px;
    cursor: grab;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.industries-scroll-wrap::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

.industries-track {
    display: flex;
    flex-wrap: nowrap;
    gap: 22px;
    width: max-content;
    padding: 0 max(17px, calc((100vw - 1180px) / 2)) 8px;
}

.industry-card {
    position: relative;
    flex: 0 0 390px;
    min-height: 285px;
    padding: 30px;
    border-radius: 32px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, .98), rgba(255, 255, 255, .78));
    border: 1px solid rgba(1, 64, 193, .15);
    box-shadow: 0 18px 52px rgba(7, 20, 39, .075);
    overflow: hidden;
    transition: .35s ease;
    scroll-snap-align: start;
}

.industry-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background:
        radial-gradient(circle at 82% 14%, rgba(1, 64, 193, .14), transparent 30%),
        linear-gradient(135deg, rgba(1, 64, 193, .08), transparent 55%);
    opacity: 0;
    transition: .35s ease;
}

.industry-card::after {
    content: "";
    position: absolute;
    right: -60px;
    bottom: -70px;
    width: 170px;
    height: 170px;
    border-radius: 50%;
    background: rgba(1, 64, 193, .065);
    transition: .35s ease;
}

.industry-card:hover {
    transform: translateY(-10px);
    border-color: rgba(1, 64, 193, .42);
    box-shadow:
        0 30px 80px rgba(7, 20, 39, .13),
        0 0 0 5px rgba(1, 64, 193, .055);
}

.industry-card:hover::before {
    opacity: 1;
}

.industry-card:hover::after {
    transform: scale(1.22);
    background: rgba(1, 64, 193, .11);
}

.industry-icon {
    position: relative;
    z-index: 2;
    width: 68px;
    height: 68px;
    border-radius: 24px;
    display: grid;
    place-items: center;
    color: #fff;
    background: linear-gradient(135deg, var(--blue), var(--blue-2));
    box-shadow:
        0 18px 42px rgba(1, 64, 193, .26),
        inset 0 0 0 1px rgba(255, 255, 255, .22);
    font-size: 25px;
    margin-bottom: 28px;
    transition: .35s ease;
}

.industry-card:hover .industry-icon {
    transform: rotate(-5deg) scale(1.07);
    box-shadow:
        0 25px 58px rgba(1, 64, 193, .36),
        0 0 0 9px rgba(1, 64, 193, .08);
}

.industry-card span {
    position: absolute;
    right: 28px;
    top: 24px;
    z-index: 2;
    color: rgba(1, 64, 193, .10);
    font-size: 54px;
    font-weight: 950;
    line-height: 1;
}

.industry-card h3 {
    position: relative;
    z-index: 2;
    color: var(--navy);
    font-size: 25px;
    line-height: 1.12;
    margin-bottom: 12px;
}

.industry-card p {
    position: relative;
    z-index: 2;
    color: var(--muted);
    font-size: 14.5px;
    line-height: 1.75;
}

/* reveal animation stagger */
.industry-card.reveal {
    transform: translateY(32px) scale(.96);
}

.industry-card.reveal.show {
    transform: translateY(0) scale(1);
}

.industry-card:nth-child(1) {
    transition-delay: .05s;
}

.industry-card:nth-child(2) {
    transition-delay: .10s;
}

.industry-card:nth-child(3) {
    transition-delay: .15s;
}

.industry-card:nth-child(4) {
    transition-delay: .20s;
}

.industry-card:nth-child(5) {
    transition-delay: .25s;
}

.industry-card:nth-child(6) {
    transition-delay: .30s;
}

.industry-card:nth-child(7) {
    transition-delay: .35s;
}

.industry-card:nth-child(8) {
    transition-delay: .40s;
}

@media(max-width:680px) {
    .industry-card {
        flex-basis: 270px;
        min-height: 260px;
        padding: 26px;
        border-radius: 26px;
    }

    .industry-icon {
        width: 60px;
        height: 60px;
        border-radius: 20px;
        font-size: 22px;
    }

    .industry-card h3 {
        font-size: 22px;
    }
}

/* ================= OUR WORKING STYLE ================= */

.working-scroll-section {
    position: relative;
    min-height: 245vh;
    padding: 0;

    background:
        radial-gradient(circle at 12% 18%,
            rgba(1, 64, 193, 0.08),
            transparent 28%),
        radial-gradient(circle at 88% 82%,
            rgba(1, 64, 193, 0.06),
            transparent 32%),
        linear-gradient(180deg,
            #ffffff 0%,
            #f6faff 48%,
            #ffffff 100%);

    overflow: visible;
}

.working-scroll-sticky {
    position: sticky;
    top: 5.5rem;

    /* height: calc(100vh - 5.5rem); */

    display: flex;
    align-items: stretch;

    padding: 1.5rem 0 1rem;

    /* overflow: hidden; */
}

.working-scroll-sticky .container {
    height: 100%;

    display: flex;
    flex-direction: column;
}

/* Heading */

.working-scroll-sticky .section-top {
    flex: 0 0 auto;

    max-width: 54rem;

    margin: 0 auto 1rem;

    position: relative;
    z-index: 20;
}

.working-scroll-sticky .section-top .eyebrow {
    margin-bottom: 0.7rem;
}

.working-scroll-sticky .title {
    font-size: clamp(2rem, 3.2vw, 3.25rem);
    line-height: 1.05;
}

.working-scroll-sticky .text {
    max-width: 46rem;

    margin: 0.8rem auto 0;

    font-size: clamp(0.9rem, 1.2vw, 1rem);
    line-height: 1.6;
}

/* Main stage */

.working-line-stage {
    position: relative;

    width: min(68rem, 100%);
    height: 240vh;

    flex: 1 1 auto;

    min-height: 0;

    margin: 0 auto;
}

/* Center line */

.working-center-line {
    position: absolute;

    left: 50%;
    top: 8%;
    bottom: 8%;

    width: 0.3rem;

    transform: translateX(-50%);

    border-radius: 50rem;

    background: rgba(1, 64, 193, 0.13);

    box-shadow:
        inset 0 0 0 0.06rem rgba(1, 64, 193, 0.07),
        0 0 1.5rem rgba(1, 64, 193, 0.06);

    overflow: hidden;

    z-index: 2;
}

.working-line-fill {
    position: absolute;

    left: 0;
    top: 0;

    width: 100%;
    height: 0%;

    border-radius: inherit;

    background: linear-gradient(180deg,
            var(--blue),
            rgba(1, 64, 193, 0.35));

    box-shadow: 0 0 1.5rem rgba(1, 64, 193, 0.35);
}

/* Moving logo */

.working-logo-ball {
    position: absolute;

    left: 50%;
    top: 8%;

    width: clamp(3.5rem, 5vw, 4.8rem);
    aspect-ratio: 1;

    transform: translate(-50%, -50%);

    border-radius: 50%;

    display: grid;
    place-items: center;

    background: #ffffff;

    border: 0.35rem solid rgba(1, 64, 193, 0.16);

    box-shadow:
        0 1.4rem 3.5rem rgba(7, 20, 39, 0.18),
        0 0 0 0.8rem rgba(1, 64, 193, 0.06);

    z-index: 12;

    will-change: top;
}

.working-logo-ball img {
    width: 100%;
    height: 100%;

    object-fit: contain;

    border-radius: 50%;
}

/* Numbers and cards use the same percentage */

.working-number,
.working-flow-card {
    top: var(--step-position);
}

/* Numbers */

.working-number {
    position: absolute;

    left: 50%;

    transform: translate(-50%, -50%);

    z-index: 8;
}

.working-number span {
    width: clamp(2.6rem, 3.5vw, 3.2rem);
    aspect-ratio: 1;

    border-radius: 50%;

    display: grid;
    place-items: center;

    background: #ffffff;

    color: var(--blue);

    border: 0.1rem solid rgba(1, 64, 193, 0.22);

    box-shadow: 0 0.8rem 2rem rgba(7, 20, 39, 0.09);

    font-size: clamp(0.7rem, 1vw, 0.85rem);
    line-height: 1;
    font-weight: 950;

    transition:
        color 0.28s ease,
        background 0.28s ease,
        border-color 0.28s ease,
        transform 0.28s ease,
        box-shadow 0.28s ease;
}

.working-number.active span {
    color: #ffffff;

    background: var(--blue);

    border-color: var(--blue);

    transform: scale(1.12);

    box-shadow:
        0 1.2rem 3rem rgba(1, 64, 193, 0.3),
        0 0 0 0.6rem rgba(1, 64, 193, 0.08);
}

/* Cards */

.working-flow-card {
    position: absolute;

    width: min(22rem, 34vw);
    min-height: 8.5rem;

    padding: 1.15rem 1.3rem;

    border-radius: 1.6rem;

    background: rgba(255, 255, 255, 0.96);

    border: 0.06rem solid rgba(1, 64, 193, 0.14);

    box-shadow: 0 1.2rem 3.4rem rgba(7, 20, 39, 0.08);

    backdrop-filter: blur(0.8rem);

    opacity: 0;

    visibility: hidden;

    filter: grayscale(0.35);

    pointer-events: none;

    transition:
        opacity 0.3s ease,
        filter 0.3s ease,
        transform 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease;

    z-index: 4;
}

/* Odd cards on left */

.working-flow-card.left {
    right: calc(50% + 6rem);

    transform:
        translateY(-50%) translateX(-1rem);

    text-align: right;
}

/* Even cards on right */

.working-flow-card.right {
    left: calc(50% + 6rem);

    transform:
        translateY(-50%) translateX(1rem);

    text-align: left;
}

.working-flow-card.active {
    opacity: 1;

    visibility: visible;

    filter: grayscale(0);

    pointer-events: auto;

    border-color: rgba(1, 64, 193, 0.44);

    box-shadow:
        0 1.8rem 5rem rgba(7, 20, 39, 0.14),
        0 0 0 0.3rem rgba(1, 64, 193, 0.055);
}

.working-flow-card.left.active,
.working-flow-card.right.active {
    transform:
        translateY(-50%) translateX(0);
}

/* Card connection line */

.working-flow-card::before {
    content: "";

    position: absolute;

    top: 50%;

    width: 3.7rem;
    height: 0.12rem;

    opacity: 0;

    transition: opacity 0.3s ease;
}

.working-flow-card.left::before {
    right: -3.7rem;

    background: linear-gradient(90deg,
            rgba(1, 64, 193, 0.05),
            rgba(1, 64, 193, 0.4));
}

.working-flow-card.right::before {
    left: -3.7rem;

    background: linear-gradient(90deg,
            rgba(1, 64, 193, 0.4),
            rgba(1, 64, 193, 0.05));
}

.working-flow-card.active::before {
    opacity: 1;
}

/* Card icon */

.working-flow-icon {
    width: clamp(2.7rem, 3.7vw, 3.4rem);
    aspect-ratio: 1;

    border-radius: 1rem;

    display: grid;
    place-items: center;

    color: #ffffff;

    background: linear-gradient(135deg,
            var(--blue),
            var(--blue-2));

    box-shadow: 0 1rem 2.3rem rgba(1, 64, 193, 0.24);

    font-size: clamp(0.9rem, 1.4vw, 1.2rem);

    margin-bottom: 0.7rem;
}

.working-flow-card.left .working-flow-icon {
    margin-left: auto;
}

/* Card text */

.working-flow-card small {
    display: block;

    color: var(--blue);

    font-size: clamp(0.58rem, 0.8vw, 0.7rem);
    line-height: 1;
    font-weight: 950;

    letter-spacing: 0.04rem;
    text-transform: uppercase;

    margin-bottom: 0.4rem;
}

.working-flow-card h3 {
    color: var(--navy);

    font-size: clamp(1.1rem, 1.6vw, 1.5rem);
    line-height: 1.1;

    margin: 0 0 0.4rem;
}

.working-flow-card p {
    color: var(--muted);

    font-size: clamp(0.72rem, 1vw, 0.9rem);
    line-height: 1.55;

    margin: 0;
}

/* Medium desktop */

/* ================= WORKING STYLE TABLET + MOBILE ================= */

@media (max-width: 1080px) {

    .working-scroll-section {
        height: auto !important;
        min-height: auto !important;
        padding: 5rem 0;
        overflow: visible;
    }

    .working-scroll-sticky {
        position: relative;
        top: auto;

        width: 100%;
        height: auto !important;
        min-height: auto !important;

        display: block;

        padding: 0;

        overflow: visible;
    }

    .working-scroll-sticky .container {
        width: min(100% - 2rem, 68rem);
        height: auto !important;

        display: block;
    }

    .working-scroll-sticky .section-top {
        margin: 0 auto 2rem;
    }

    .working-line-stage {
        position: relative;

        width: 100%;
        height: auto !important;
        min-height: auto !important;

        display: grid;
        grid-template-columns: 1fr;
        gap: 1.25rem;

        flex: none;

        margin: 0;
    }

    /* Hide desktop line animation on mobile */
    .working-center-line,
    .working-line-fill,
    .working-logo-ball,
    .working-number {
        display: none !important;
    }

    /* Show every card normally on mobile */
    .working-flow-card,
    .working-flow-card.left,
    .working-flow-card.right {
        position: relative;

        top: auto !important;
        left: auto !important;
        right: auto !important;

        width: 100%;
        min-height: auto;

        padding: 1.5rem;

        opacity: 1 !important;
        visibility: visible !important;
        filter: none !important;

        pointer-events: auto;

        transform: none !important;

        text-align: left;

        display: block;
    }

    .working-flow-card.left .working-flow-icon,
    .working-flow-card.right .working-flow-icon {
        margin-left: 0;
        margin-right: 0;
    }

    .working-flow-card::before {
        display: none !important;
    }
}

.compare-section-new {
    background: #fff;
}

.compare-table-new {
    overflow: hidden;
    border-radius: 34px;
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
    background: #fff;
}

.compare-row-new {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-bottom: 1px solid var(--line);
}

.compare-row-new:last-child {
    border-bottom: 0;
}

.compare-head-new {
    background: var(--navy);
    color: #fff;
    font-weight: 950;
    font-size: 20px;
}

.compare-cell-new {
    padding: 24px 28px;
    display: flex;
    gap: 14px;
    align-items: flex-start;
    min-height: 92px;
    line-height: 1.65;
}

.compare-cell-new:first-child {
    border-right: 1px solid var(--line);
}

.compare-cell-new i {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    margin-top: 2px;
}

.compare-cell-new.others i {
    color: #ef4444;
    background: rgba(239, 68, 68, .10);
}

.compare-cell-new.pnsweb i {
    color: var(--blue);
    background: var(--soft-2);
}

.compare-cell-new p {
    color: var(--muted);
}

.compare-head-new .compare-cell-new p {
    color: #fff;
    font-size: 20px;
    font-weight: 950;
}

.about-final-cta {
    background: #f6faff;
}

.about-final-box {
    position: relative;
    overflow: hidden;
    padding: 62px;
    border-radius: 44px;
    color: #fff;
    background:
        radial-gradient(circle at 88% 18%, rgba(1, 64, 193, .22), transparent 34%),
        linear-gradient(135deg, var(--navy), #0b1d3c);
    box-shadow: var(--shadow);
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 34px;
    align-items: center;
}

.about-final-box h2 {
    font-size: clamp(34px, 4.5vw, 64px);
    line-height: 1.04;
    letter-spacing: -1.8px;
    margin-bottom: 14px;
}

.about-final-box p {
    color: #c9d8ef;
    line-height: 1.8;
    max-width: 680px;
}

.about-final-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

@media(max-width:1080px) {

    .about-story-grid-new,
    .about-final-box {
        grid-template-columns: 1fr;
    }

    .stats-grid-new {
        grid-template-columns: repeat(2, 1fr);
    }

    .vmp-scroll-section {
        min-height: auto;
        padding: 95px 0;
    }

    .vmp-sticky {
        position: relative;
        min-height: auto;
        padding: 0;
    }

    .vmp-stage {
        height: auto;
        display: grid;
        gap: 18px;
    }

    .vmp-path-line,
    .vmp-ball {
        display: none;
    }

    .vmp-card,
    .vmp-card.vision-card,
    .vmp-card.mission-card,
    .vmp-card.promise-card {
        position: relative;
        left: auto;
        right: auto;
        top: auto;
        bottom: auto;
        width: 100%;
        opacity: 1;
        transform: none;
    }
}

@media(max-width:680px) {
    .about-hero-new {
        min-height: auto;
        padding: 132px 0 76px;
    }

    .about-hero-center h1 {
        letter-spacing: -1.4px;
    }

    .about-hero-center p,
    .about-story-content-new p {
        font-size: 15.5px;
    }

    .about-hero-actions,
    .about-final-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .story-points-new,
    .stats-grid-new {
        grid-template-columns: 1fr;
    }

    .about-video-box,
    .about-video-box video {
        min-height: 330px;
    }

    .compare-row-new {
        grid-template-columns: 1fr;
    }

    .compare-cell-new:first-child {
        display: none;
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

    .compare-head-new .compare-cell-new:first-child {
        border-bottom-color: rgba(255, 255, 255, .14);
    }

    .about-final-box {
        padding: 34px;
        border-radius: 32px;
    }
}

/* =========================================================
   OUR CLIENTS PAGE — GRID REDESIGN
========================================================= */

.oc-page {
    overflow: hidden;
    background: #ffffff;
}

/* ================= CLIENTS HERO ================= */
.oc-hero {
    min-height: 100vh;
    padding: 9.5rem 0 6rem;
    display: flex;
    align-items: center;
    overflow: hidden;
    isolation: isolate;
    background:
        radial-gradient(circle at 18% 20%, rgba(1, 64, 193, .13), transparent 28%),
        radial-gradient(circle at 82% 78%, rgba(63, 139, 255, .11), transparent 30%),
        linear-gradient(180deg, #ffffff 0%, #f3f7ff 52%, #ffffff 100%);
}

.oc-client-network-canvas {
    position: absolute;
    inset: 0;
    z-index: -4;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: .92;
}

.oc-hero::before {
    content: "";
    position: absolute;
    inset: -20%;
    z-index: -3;
    background:
        linear-gradient(115deg,
            transparent 20%,
            rgba(1, 64, 193, .045) 42%,
            rgba(255, 255, 255, .5) 50%,
            rgba(1, 64, 193, .04) 58%,
            transparent 80%);
    transform: translateX(-55%) rotate(-7deg);
    animation: ocClientLightSweep 9s ease-in-out infinite;
    pointer-events: none;
}

.oc-hero::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: -2;
    width: min(74rem, 94vw);
    height: min(42rem, 72vh);
    transform: translate(-50%, -50%);
    animation: ocClientHaloMorph 10s ease-in-out infinite alternate;
    pointer-events: none;
}

.oc-client-shapes {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}

.oc-client-shape {
    position: absolute;
    border: 1px solid rgba(1, 64, 193, .1);
    background: linear-gradient(145deg, rgba(255, 255, 255, .78), rgba(234, 242, 255, .34));
    box-shadow: 0 1.4rem 4rem rgba(7, 20, 39, .06);
    backdrop-filter: blur(.6rem);
    animation: ocClientShapeFloat 8s ease-in-out infinite;
}

.oc-client-shape.shape-one {
    width: 10rem;
    aspect-ratio: 1;
    left: 5%;
    top: 24%;
    border-radius: 2.4rem 4rem 2.2rem 4.2rem;
    transform: rotate(17deg);
}

.oc-client-shape.shape-two {
    width: 8rem;
    aspect-ratio: 1;
    right: 7%;
    top: 18%;
    border-radius: 50% 32% 50% 34%;
    animation-delay: -2.5s;
}

.oc-client-shape.shape-three {
    width: 12rem;
    aspect-ratio: 1;
    right: 9%;
    bottom: 8%;
    border-radius: 3.2rem 1.8rem 3.6rem 2rem;
    transform: rotate(-13deg);
    animation-delay: -5s;
}

.oc-hero .container {
    position: relative;
    z-index: 3;
}

.oc-hero-panel {
    position: relative;
    width: min(64rem, 100%);
    margin: auto;
    text-align: center;
    overflow: hidden;
}

.oc-hero-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(120deg,
            transparent 0%,
            rgba(1, 64, 193, .035) 35%,
            transparent 70%);
    transform: translateX(-100%);
    animation: ocClientPanelSweep 7s ease-in-out infinite;
    pointer-events: none;
}

.oc-hero-panel::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -7rem;
    width: 28rem;
    aspect-ratio: 1;
    border-radius: 50%;
    transform: translateX(-50%);
    background: rgba(1, 64, 193, .055);
    filter: blur(.4rem);
    pointer-events: none;
}

.oc-hero-content {
    position: relative;
    z-index: 2;
    width: min(56rem, 100%);
    margin: auto;
    text-align: center;
}

.oc-hero-content h1 {
    margin: 1rem 0 1.5rem;
    color: var(--navy);
    font-size: clamp(36px, 4.2vw, 64px);
    line-height: .98;
    letter-spacing: -.17rem;
}

.oc-hero-content h1 span {
    display: block;
    color: var(--blue);
}

.oc-hero-content>p {
    width: min(48rem, 100%);
    margin: 0 auto 2rem;
    color: #5d6d83;
    font-size: clamp(1rem, 1.4vw, 1.16rem);
    line-height: 1.86;
}

.oc-hero-actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: .85rem;
}

.oc-scroll-cue {
    position: relative;
    z-index: 2;
    margin: 2rem auto 0;
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    border: 0;
    background: transparent;
    color: #65758b;
    font-size: .76rem;
    font-weight: 850;
    cursor: pointer;
}

.oc-scroll-cue i {
    color: var(--blue);
    animation: ocClientArrowBounce 1.8s ease-in-out infinite;
}

@keyframes ocClientLightSweep {

    0%,
    15% {
        transform: translateX(-58%) rotate(-7deg);
        opacity: 0;
    }

    35% {
        opacity: 1;
    }

    65%,
    100% {
        transform: translateX(58%) rotate(-7deg);
        opacity: 0;
    }
}

@keyframes ocClientHaloMorph {
    0% {
        border-radius: 46% 54% 58% 42% / 52% 44% 56% 48%;
        transform: translate(-50%, -50%) scale(1);
    }

    100% {
        border-radius: 58% 42% 44% 56% / 42% 58% 44% 56%;
        transform: translate(-50%, -50%) scale(1.05);
    }
}

@keyframes ocClientShapeFloat {

    0%,
    100% {
        translate: 0 0;
    }

    50% {
        translate: 1.2rem -1.4rem;
    }
}

@keyframes ocClientBadgeFloat {

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

    50% {
        transform: translateY(-1rem) rotate(4deg);
    }
}

@keyframes ocClientPanelSweep {

    0%,
    18% {
        transform: translateX(-110%);
        opacity: 0;
    }

    42% {
        opacity: 1;
    }

    70%,
    100% {
        transform: translateX(110%);
        opacity: 0;
    }
}

@keyframes ocClientArrowBounce {

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

    50% {
        transform: translateY(.35rem);
    }
}

/* ================= LOGO GRID SECTION ================= */
.oc-logo-section {
    padding: 7rem 0;
    overflow: hidden;
    isolation: isolate;
    background: linear-gradient(180deg, #ffffff 0%, #f4f8ff 48%, #ffffff 100%);
}

.oc-logo-bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    pointer-events: none;
}

.oc-logo-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle, rgba(1, 64, 193, .12) 1.2px, transparent 1.2px);
    background-size: 32px 32px;
    opacity: .32;
    animation: ocDotsMove 20s linear infinite;
}

.oc-logo-bg::after {
    content: "";
    position: absolute;
    left: -20%;
    top: 20%;
    width: 140%;
    height: 58%;
    background: linear-gradient(105deg, transparent 20%, rgba(1, 64, 193, .065) 45%, transparent 70%);
    transform: rotate(-6deg);
    animation: ocBeamMove 10s ease-in-out infinite;
}

.oc-bg-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(4px);
    background: rgba(1, 64, 193, .07);
    animation: ocBlobFloat 11s ease-in-out infinite;
}

.oc-bg-blob.b1 {
    width: 24rem;
    aspect-ratio: 1;
    left: -8rem;
    top: 8%;
}

.oc-bg-blob.b2 {
    width: 30rem;
    aspect-ratio: 1;
    right: -11rem;
    bottom: 5%;
    animation-delay: -5.5s;
}

.oc-logo-section .container {
    position: relative;
    z-index: 2;
}

.oc-client-tabs {
    width: min(48rem, 100%);
    margin: 0 auto 3rem;
    padding: .55rem;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .75rem;
    border: 1px solid rgba(1, 64, 193, .13);
    border-radius: 1.65rem;
    background: rgba(255, 255, 255, .88);
    box-shadow: 0 1.3rem 4rem rgba(7, 20, 39, .08);
    backdrop-filter: blur(1rem);
}

.oc-client-tab {
    min-height: 5rem;
    padding: .9rem 1rem;
    display: flex;
    align-items: center;
    gap: .85rem;
    border: 0;
    border-radius: 1.18rem;
    background: transparent;
    color: var(--navy);
    text-align: left;
    cursor: pointer;
    transition: .28s ease;
}

.oc-client-tab:hover {
    background: var(--soft);
}

.oc-client-tab.active {
    color: #fff;
    background: linear-gradient(135deg, var(--blue), #0a65e8);
    box-shadow: 0 1rem 2.8rem rgba(1, 64, 193, .25);
}

.oc-tab-icon {
    width: 3rem;
    aspect-ratio: 1;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border-radius: 1rem;
    color: var(--blue);
    background: var(--soft-2);
}

.oc-client-tab.active .oc-tab-icon {
    background: #fff;
}

.oc-client-tab b,
.oc-client-tab small {
    display: block;
}

.oc-client-tab b {
    font-size: .95rem;
}

.oc-client-tab small {
    margin-top: .2rem;
    color: var(--muted);
    font-size: .7rem;
    line-height: 1.35;
}

.oc-client-tab.active small {
    color: rgba(255, 255, 255, .76);
}

.oc-client-panel {
    display: none;
    opacity: 0;
    transform: translateY(1rem);
}

.oc-client-panel.active {
    display: block;
    animation: ocPanelShow .45s ease forwards;
}

.oc-panel-head {
    margin-bottom: 2rem;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2rem;
}

.oc-panel-head>div {
    max-width: 38rem;
}

.oc-panel-head .mini-label {
    display: block;
    margin-bottom: .55rem;
    color: var(--blue);
    font-size: .72rem;
    font-weight: 950;
    letter-spacing: .06rem;
    text-transform: uppercase;
}

.oc-panel-head h3 {
    color: var(--navy);
    font-size: clamp(1.9rem, 3.2vw, 3rem);
    line-height: 1.05;
}

.oc-panel-head p {
    max-width: 30rem;
    color: var(--muted);
    font-size: .92rem;
    line-height: 1.75;
}

.oc-logo-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.oc-logo-card {
    position: relative;
    min-height: 10rem;
    padding: 1.25rem;
    display: grid;
    place-items: center;
    border: 1px solid rgba(1, 64, 193, .13);
    border-radius: 1.65rem;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 1rem 3rem rgba(7, 20, 39, .07);
    overflow: hidden;
    transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}

.oc-logo-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(1, 64, 193, .08), transparent 48%, rgba(10, 101, 232, .05));
    opacity: 0;
    transition: .3s ease;
}

.oc-logo-card::after {
    content: "";
    position: absolute;
    right: -3.5rem;
    bottom: -4.5rem;
    width: 9rem;
    aspect-ratio: 1;
    border-radius: 50%;
    background: rgba(1, 64, 193, .055);
    transition: .3s ease;
}

.oc-logo-card:hover {
    transform: translateY(-.55rem);
    border-color: rgba(1, 64, 193, .42);
    box-shadow: 0 2rem 5rem rgba(7, 20, 39, .12), 0 0 0 .25rem rgba(1, 64, 193, .045);
}

.oc-logo-card:hover::before {
    opacity: 1;
}

.oc-logo-card:hover::after {
    transform: scale(1.2);
}

.oc-logo-number {
    position: absolute;
    right: .85rem;
    top: .7rem;
    z-index: 2;
    color: rgba(1, 64, 193, .11);
    font-size: 1.35rem;
    font-weight: 950;
}

.oc-logo-image {
    position: relative;
    z-index: 3;
    width: 100%;
    min-height: 6.7rem;
    display: grid;
    place-items: center;
    text-align: center;
}

.oc-logo-image img {
    max-width: 9rem;
    max-height: 4.7rem;
    object-fit: contain;
    transition: transform .3s ease, filter .3s ease;
}

.oc-logo-card:hover .oc-logo-image img {
    transform: scale(1.07);
}

.oc-logo-image>span {
    display: none;
    color: var(--navy);
    font-size: .82rem;
    font-weight: 900;
}

.oc-logo-image.is-placeholder>span {
    display: block;
}

/* ================= CTA ================= */
.oc-cta {
    padding: 7rem 0;
    background: #fff;
}

.oc-cta-box {
    position: relative;
    padding: 4rem;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 2rem;
    border-radius: 2.8rem;
    color: #fff;
    background: radial-gradient(circle at 88% 18%, rgba(1, 64, 193, .3), transparent 32%), linear-gradient(135deg, var(--navy), #0b1d3c);
    box-shadow: 0 2rem 6rem rgba(7, 20, 39, .2);
    overflow: hidden;
}

.oc-cta-box::before,
.oc-cta-box::after {
    content: "";
    position: absolute;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 50%;
    animation: ocCtaPulse 7s ease-in-out infinite;
}

.oc-cta-box::before {
    width: 22rem;
    aspect-ratio: 1;
    right: -7rem;
    top: -10rem;
}

.oc-cta-box::after {
    width: 13rem;
    aspect-ratio: 1;
    right: 5rem;
    bottom: -9rem;
    animation-delay: -3.5s;
}

.oc-cta-content,
.oc-cta-actions {
    position: relative;
    z-index: 2;
}

.oc-cta-content {
    max-width: 48rem;
}

.oc-cta-label {
    display: inline-flex;
    margin-bottom: 1rem;
    padding: .55rem .85rem;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 10rem;
    background: rgba(255, 255, 255, .08);
    color: #dbe8ff;
    font-size: .7rem;
    font-weight: 950;
    letter-spacing: .05rem;
    text-transform: uppercase;
}

.oc-cta-content h2 {
    font-size: clamp(2.1rem, 4vw, 4rem);
    line-height: 1.03;
    letter-spacing: -.1rem;
}

.oc-cta-content p {
    max-width: 40rem;
    margin-top: 1rem;
    color: #c6d5eb;
    line-height: 1.8;
}

.oc-cta-actions {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

/* ================= ANIMATIONS ================= */
@keyframes ocGridMove {
    to {
        background-position: 78px 78px, 78px 78px;
    }
}

@keyframes ocOrbit {
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

@keyframes ocOrbitReverse {
    from {
        transform: translate(-50%, -50%) rotate(360deg);
    }

    to {
        transform: translate(-50%, -50%) rotate(0);
    }
}

@keyframes ocPulseRing {

    0%,
    100% {
        opacity: .3;
        transform: translate(-50%, -50%) scale(1);
    }

    50% {
        opacity: .7;
        transform: translate(-50%, -50%) scale(1.05);
    }
}

@keyframes ocChipFloat {

    0%,
    100% {
        transform: translateY(0) rotate(0);
    }

    50% {
        transform: translateY(-1rem) rotate(2deg);
    }
}

@keyframes ocDotsMove {
    to {
        background-position: 32px 32px;
    }
}

@keyframes ocBeamMove {

    0%,
    100% {
        translate: -8% 0;
        opacity: .35;
    }

    50% {
        translate: 8% 0;
        opacity: .8;
    }
}

@keyframes ocBlobFloat {

    0%,
    100% {
        transform: translate3d(0, 0, 0);
    }

    50% {
        transform: translate3d(2rem, -2rem, 0);
    }
}

@keyframes ocPanelShow {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes ocCtaPulse {

    0%,
    100% {
        transform: scale(1);
        opacity: .4;
    }

    50% {
        transform: scale(1.08);
        opacity: .9;
    }
}

/* ================= RESPONSIVE ================= */
@media (max-width: 1080px) {
    .oc-float-chip {
        display: none;
    }

    .oc-logo-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .oc-cta-box {
        grid-template-columns: 1fr;
    }

    .oc-cta-actions {
        flex-direction: row;
        flex-wrap: wrap;
    }
}

@media (max-width: 680px) {
    .oc-hero {
        min-height: auto;
        padding: 8rem 0 4.5rem;
    }

    .oc-hero-content h1 {
        letter-spacing: -.09rem;
    }

    .oc-orbit.one {
        width: 22rem;
    }

    .oc-orbit.two {
        width: 29rem;
    }

    .oc-orbit.three {
        width: 36rem;
    }

    .oc-orbit-dot {
        display: none;
    }

    .oc-hero-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .oc-logo-section,
    .oc-testimonials,
    .oc-cta {
        padding: 4.5rem 0;
    }

    .oc-client-tabs {
        grid-template-columns: 1fr;
    }

    .oc-panel-head {
        display: block;
    }

    .oc-panel-head p {
        margin-top: 1rem;
    }

    .oc-logo-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .oc-logo-card {
        min-height: 8rem;
        padding: 1rem;
        border-radius: 1.35rem;
    }

    .oc-logo-image {
        min-height: 5rem;
    }

    .oc-logo-image img {
        max-width: 6.5rem;
        max-height: 3.5rem;
    }

    .oc-cta-box {
        padding: 2rem 1.4rem;
        border-radius: 2rem;
    }

    .oc-cta-actions {
        display: grid;
        grid-template-columns: 1fr;
    }
}

@media (max-width: 1080px) {

    .oc-client-badge.badge-five,
    .oc-client-badge.badge-six,
    .oc-client-shape.shape-one {
        display: none;
    }

    .oc-hero-panel {
        width: min(52rem, 100%);
    }
}

@media (max-width: 680px) {
    .oc-hero {
        min-height: auto;
        padding: 7.5rem 0 4.5rem;
    }

    .oc-client-shape,
    .oc-client-badge {
        display: none;
    }

    .oc-hero-panel {
        padding: 2rem 1.25rem;
        border-radius: 2rem;
    }

    .oc-hero-content h1 {
        letter-spacing: -.08rem;
    }

    .oc-hero-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .oc-scroll-cue {
        font-size: .7rem;
    }
}

/* =========================================================
           SOCIAL MEDIA MANAGEMENT PAGE
        ========================================================= */

.smm-page {
    overflow: hidden;
    background: #ffffff;
}

/* ---------------- HERO ---------------- */
.smm-hero {
    min-height: 100vh;
    padding: 150px 0 88px;
    display: flex;
    align-items: center;
    overflow: hidden;
    isolation: isolate;
    background:
        radial-gradient(circle at 16% 20%, rgba(1, 64, 193, .12), transparent 28%),
        radial-gradient(circle at 84% 76%, rgba(59, 130, 246, .10), transparent 30%),
        linear-gradient(180deg, #ffffff 0%, #f4f8ff 55%, #ffffff 100%);
}

.smm-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -4;
    background-image:
        radial-gradient(circle, rgba(1, 64, 193, .13) 1px, transparent 1.2px);
    background-size: 34px 34px;
    opacity: .24;
    animation: smmDotsDrift 24s linear infinite;
}

.smm-hero::after {
    content: "";
    position: absolute;
    left: -18%;
    top: 12%;
    z-index: -3;
    width: 136%;
    height: 62%;
    background:
        linear-gradient(110deg,
            transparent 22%,
            rgba(1, 64, 193, .05) 43%,
            rgba(255, 255, 255, .72) 50%,
            rgba(1, 64, 193, .045) 58%,
            transparent 78%);
    transform: rotate(-6deg);
    animation: smmLightFlow 11s ease-in-out infinite;
    pointer-events: none;
}

.smm-hero-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: .92fr 1.08fr;
    gap: 66px;
    align-items: center;
}

.smm-hero-copy {
    max-width: 650px;
}

.smm-hero-copy h1 {
    margin: 14px 0 22px;
    color: var(--navy);
    font-size: clamp(36px, 4.2vw, 64px);
    line-height: 1.02;
    letter-spacing: -2.5px;
}

.smm-hero-copy h1 span {
    color: var(--blue);
}

.smm-hero-copy p {
    max-width: 610px;
    color: #55677f;
    font-size: 17px;
    line-height: 1.86;
}

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

.smm-hero-art {
    position: relative;
    min-height: 560px;
    border-radius: 44px;
    border: 1px solid rgba(1, 64, 193, .14);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, .78), rgba(236, 244, 255, .54));
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, .7),
        0 34px 100px rgba(7, 20, 39, .10);
    overflow: hidden;
}

.smm-hero-art::before {
    content: "";
    position: absolute;
    width: 360px;
    height: 360px;
    right: -110px;
    top: -105px;
    border-radius: 50%;
    background: rgba(1, 64, 193, .08);
    filter: blur(4px);
    animation: smmBlobFloat 10s ease-in-out infinite;
}

.smm-hero-art::after {
    content: "";
    position: absolute;
    width: 250px;
    height: 250px;
    left: -80px;
    bottom: -90px;
    border-radius: 50%;
    border: 1px solid rgba(1, 64, 193, .12);
    box-shadow: 0 0 0 28px rgba(1, 64, 193, .025);
    animation: smmBlobFloat 12s ease-in-out infinite reverse;
}

.smm-flow-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    opacity: .9;
}

.smm-content-card {
    position: absolute;
    z-index: 3;
    width: min(260px, 42%);
    padding: 18px;
    border: 1px solid rgba(1, 64, 193, .14);
    border-radius: 24px;
    background: rgba(255, 255, 255, .91);
    box-shadow: 0 20px 55px rgba(7, 20, 39, .10);
    backdrop-filter: blur(14px);
    animation: smmCardFloat 7s ease-in-out infinite;
}

.smm-content-card.main {
    left: 50%;
    top: 50%;
    width: min(300px, 50%);
    transform: translate(-50%, -50%);
    animation: smmMainCardFloat 6.5s ease-in-out infinite;
}

.smm-content-card.one {
    left: 7%;
    top: 14%;
    animation-delay: -1.4s;
}

.smm-content-card.two {
    right: 6%;
    top: 18%;
    animation-delay: -3.2s;
}

.smm-content-card.three {
    left: 9%;
    bottom: 12%;
    animation-delay: -4.8s;
}

.smm-content-card.four {
    right: 7%;
    bottom: 10%;
    animation-delay: -2.2s;
}

.smm-card-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.smm-card-icon {
    width: 46px;
    height: 46px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border-radius: 15px;
    color: #fff;
    background: linear-gradient(135deg, var(--blue), #0a65e8);
    box-shadow: 0 13px 30px rgba(1, 64, 193, .24);
}

.smm-content-card b {
    display: block;
    color: var(--navy);
    font-size: 15px;
    line-height: 1.2;
}

.smm-content-card small {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.45;
}

.smm-mini-bars {
    display: grid;
    gap: 8px;
}

.smm-mini-bars span {
    height: 7px;
    border-radius: 999px;
    background: rgba(1, 64, 193, .10);
    overflow: hidden;
}

.smm-mini-bars span::after {
    content: "";
    display: block;
    width: var(--bar-width, 70%);
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--blue), #61a6ff);
    animation: smmBarPulse 4.6s ease-in-out infinite;
}

/* ---------------- ABOUT ---------------- */
.smm-about {
    background: #fff;
}

.smm-about-grid {
    display: grid;
    grid-template-columns: .95fr 1.05fr;
    gap: 58px;
    align-items: center;
}

.smm-about-visual {
    position: relative;
    min-height: 560px;
    padding: 14px;
    border-radius: 40px;
    background: linear-gradient(145deg, rgba(1, 64, 193, .18), rgba(96, 165, 250, .12));
    box-shadow: 0 34px 90px rgba(7, 20, 39, .14);
}

.smm-about-image {
    position: absolute;
    inset: 14px;
    overflow: hidden;
    border-radius: 30px;
    background:
        linear-gradient(135deg, rgba(1, 64, 193, .84), rgba(14, 99, 232, .46)),
        radial-gradient(circle at 70% 20%, rgba(255, 255, 255, .26), transparent 30%);
}

.smm-about-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.smm-about-badge {
    position: absolute;
    z-index: 3;
    min-width: 170px;
    padding: 16px 18px;
    border-radius: 20px;
    color: var(--navy);
    background: rgba(255, 255, 255, .94);
    border: 1px solid rgba(1, 64, 193, .14);
    box-shadow: 0 18px 45px rgba(7, 20, 39, .11);
    backdrop-filter: blur(12px);
}

.smm-about-badge b {
    display: block;
    color: var(--blue);
    font-size: 17px;
    margin-bottom: 5px;
}

.smm-about-badge span {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.45;
}

.smm-about-badge.top {
    top: 42px;
    right: -28px;
}

.smm-about-badge.bottom {
    left: -28px;
    bottom: 42px;
}

.smm-about-content h2 {
    margin-bottom: 20px;
    color: var(--navy);
    font-size: clamp(34px, 4.2vw, 60px);
    line-height: 1.05;
    letter-spacing: -1.6px;
}

.smm-about-content p {
    color: var(--muted);
    font-size: 16px;
    line-height: 1.88;
    margin-bottom: 16px;
}

.smm-about-points {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 26px;
}

.smm-about-point {
    padding: 18px;
    border-radius: 20px;
    background: var(--soft);
    border: 1px solid var(--line);
}

.smm-about-point i {
    color: var(--blue);
    margin-bottom: 10px;
}

.smm-about-point b {
    display: block;
    color: var(--navy);
    margin-bottom: 6px;
}

.smm-about-point span {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.55;
}


.smm-about-image.image-missing img {
    display: none;
}

.smm-about-image.image-missing::after {
    content: "Social Media Management";
    position: absolute;
    left: 28px;
    right: 28px;
    bottom: 28px;
    color: #fff;
    font-size: clamp(26px, 3vw, 42px);
    font-weight: 950;
    line-height: 1.08;
}

/* ---------------- SERVICES ---------------- */
.smm-services {
    overflow: hidden;
    background:
        radial-gradient(circle at 10% 12%, rgba(1, 64, 193, .07), transparent 25%),
        radial-gradient(circle at 92% 78%, rgba(1, 64, 193, .06), transparent 28%),
        linear-gradient(180deg, #f6faff 0%, #ffffff 100%);
}

.smm-service-list {
    display: grid;
    gap: 24px;
}

.smm-service-group {
    position: relative;
    padding: 34px;
    border-radius: 32px;
    background: rgba(255, 255, 255, .92);
    border: 1px solid rgba(1, 64, 193, .13);
    box-shadow: 0 18px 52px rgba(7, 20, 39, .07);
    overflow: hidden;
}

.smm-service-group::after {
    content: "";
    position: absolute;
    right: -85px;
    top: -90px;
    width: 210px;
    height: 210px;
    border-radius: 50%;
    background: rgba(1, 64, 193, .045);
}

.smm-service-head {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 92px 1fr;
    gap: 22px;
    align-items: start;
    margin-bottom: 26px;
}

.smm-service-number {
    width: 76px;
    height: 76px;
    display: grid;
    place-items: center;
    border-radius: 24px;
    color: #fff;
    background: linear-gradient(135deg, var(--blue), #0a65e8);
    box-shadow: 0 18px 40px rgba(1, 64, 193, .24);
    font-size: 22px;
    font-weight: 950;
}

.smm-service-head h3 {
    color: var(--navy);
    font-size: clamp(25px, 3vw, 38px);
    line-height: 1.08;
    margin-bottom: 10px;
}

.smm-service-head h3 a {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: inherit;
    transition: color .24s ease, transform .24s ease;
}

.smm-service-head h3 a::after {
    content: "\2197";
    flex: 0 0 auto;
    font-size: .55em;
    color: var(--blue);
    opacity: .72;
    transition: transform .24s ease, opacity .24s ease;
}

.smm-service-head h3 a:hover,
.smm-service-head h3 a:focus-visible {
    color: var(--blue);
    transform: translateX(4px);
}

.smm-service-head h3 a:hover::after,
.smm-service-head h3 a:focus-visible::after {
    opacity: 1;
    transform: translate(2px, -2px);
}

.smm-service-head h3 a:focus-visible {
    outline: 3px solid rgba(1, 64, 193, .20);
    outline-offset: 5px;
    border-radius: 6px;
}

.smm-service-head p {
    max-width: 760px;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.75;
}

.smm-includes-title {
    position: relative;
    z-index: 2;
    margin: 0 0 14px;
    color: var(--blue);
    font-size: 12px;
    font-weight: 950;
    letter-spacing: .7px;
    text-transform: uppercase;
}

.smm-include-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.smm-include-card {
    overflow: hidden;
    border-radius: 24px;
    background: #fff;
    border: 1px solid rgba(1, 64, 193, .13);
    box-shadow: 0 14px 36px rgba(7, 20, 39, .055);
    transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}

.smm-include-card:hover {
    transform: translateY(-7px);
    border-color: rgba(1, 64, 193, .36);
    box-shadow: 0 24px 58px rgba(7, 20, 39, .11);
}

.smm-include-image {
    position: relative;
    height: 170px;
    display: grid;
    place-items: center;
    overflow: hidden;
    background:
        radial-gradient(circle at 30% 25%, rgba(255, 255, 255, .42), transparent 28%),
        linear-gradient(135deg, rgba(1, 64, 193, .92), rgba(50, 130, 246, .62));
}

.smm-include-image>i {
    position: relative;
    z-index: 1;
    color: rgba(255, 255, 255, .92);
    font-size: 42px;
}

.smm-include-image img {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.smm-include-image.image-missing img {
    display: none;
}

.smm-include-body {
    padding: 20px;
}

.smm-include-body h4 {
    color: var(--navy);
    font-size: 18px;
    line-height: 1.2;
    margin-bottom: 8px;
}

.smm-include-body p {
    color: var(--muted);
    font-size: 13.5px;
    line-height: 1.65;
}

/* ---------------- CTA ---------------- */
.smm-cta {
    background: #fff;
}

.smm-cta-box {
    position: relative;
    padding: 64px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 34px;
    align-items: center;
    overflow: hidden;
    border-radius: 44px;
    color: #fff;
    background:
        radial-gradient(circle at 88% 18%, rgba(1, 64, 193, .30), transparent 34%),
        linear-gradient(135deg, var(--navy), #0b1d3c);
    box-shadow: 0 30px 90px rgba(7, 20, 39, .18);
}

.smm-cta-box::before,
.smm-cta-box::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .10);
    animation: smmCtaPulse 8s ease-in-out infinite;
}

.smm-cta-box::before {
    width: 320px;
    height: 320px;
    right: -90px;
    top: -145px;
}

.smm-cta-box::after {
    width: 190px;
    height: 190px;
    right: 120px;
    bottom: -125px;
    animation-delay: -4s;
}

.smm-cta-content,
.smm-cta-actions {
    position: relative;
    z-index: 2;
}

.smm-cta-content h2 {
    max-width: 760px;
    font-size: clamp(34px, 4.4vw, 62px);
    line-height: 1.04;
    letter-spacing: -1.5px;
}

.smm-cta-content p {
    max-width: 690px;
    margin-top: 15px;
    color: #c9d8ef;
    line-height: 1.8;
}

.smm-cta-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

@keyframes smmDotsDrift {
    to {
        background-position: 34px 34px;
    }
}

@keyframes smmLightFlow {

    0%,
    15% {
        translate: -8% 0;
        opacity: .25;
    }

    50% {
        translate: 8% 0;
        opacity: .85;
    }

    85%,
    100% {
        translate: -8% 0;
        opacity: .25;
    }
}

@keyframes smmBlobFloat {

    0%,
    100% {
        transform: translate3d(0, 0, 0) scale(1);
    }

    50% {
        transform: translate3d(24px, -18px, 0) scale(1.06);
    }
}

@keyframes smmCardFloat {

    0%,
    100% {
        transform: translate3d(0, 0, 0);
    }

    50% {
        transform: translate3d(0, -14px, 0);
    }
}

@keyframes smmMainCardFloat {

    0%,
    100% {
        transform: translate(-50%, -50%);
    }

    50% {
        transform: translate(-50%, calc(-50% - 12px));
    }
}

@keyframes smmBarPulse {

    0%,
    100% {
        opacity: .65;
        transform: scaleX(.96);
        transform-origin: left;
    }

    50% {
        opacity: 1;
        transform: scaleX(1);
    }
}

@keyframes smmCtaPulse {

    0%,
    100% {
        transform: scale(1);
        opacity: .45;
    }

    50% {
        transform: scale(1.1);
        opacity: .9;
    }
}

@media (max-width: 1080px) {

    .smm-hero-grid,
    .smm-about-grid,
    .smm-cta-box {
        grid-template-columns: 1fr;
    }

    .smm-hero-art {
        min-height: 500px;
    }

    .smm-about-visual {
        min-height: 500px;
    }

    .smm-include-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .smm-cta-actions {
        flex-direction: row;
        flex-wrap: wrap;
    }
}

@media (max-width: 680px) {
    .smm-hero {
        min-height: auto;
        padding: 118px 0 72px;
    }

    .smm-hero-grid {
        gap: 42px;
    }

    .smm-hero-copy h1 {
        font-size: clamp(34px, 11vw, 48px);
        letter-spacing: -1.2px;
    }

    .smm-hero-copy p {
        font-size: 15.5px;
    }

    .smm-hero-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .smm-hero-art {
        min-height: 430px;
        border-radius: 30px;
    }

    .smm-content-card {
        width: 46%;
        padding: 12px;
        border-radius: 18px;
    }

    .smm-content-card.main {
        width: 55%;
    }

    .smm-card-icon {
        width: 38px;
        height: 38px;
        border-radius: 12px;
    }

    .smm-about-visual {
        min-height: 390px;
        border-radius: 30px;
    }

    .smm-about-badge {
        min-width: 140px;
        padding: 13px 14px;
    }

    .smm-about-badge.top {
        right: -8px;
    }

    .smm-about-badge.bottom {
        left: -8px;
    }

    .smm-about-points,
    .smm-include-grid {
        grid-template-columns: 1fr;
    }

    .smm-service-group {
        padding: 22px;
        border-radius: 26px;
    }

    .smm-service-head {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .smm-service-number {
        width: 64px;
        height: 64px;
        border-radius: 20px;
    }

    .smm-include-image {
        height: 190px;
    }

    .smm-cta-box {
        padding: 34px 24px;
        border-radius: 32px;
    }

    .smm-cta-actions {
        display: grid;
        grid-template-columns: 1fr;
    }
}


/* =========================================================
           COMPLETE MOBILE WIDTH / OVERFLOW FIX
           Prevents the page from collapsing or clipping on phones.
        ========================================================= */

html,
body {
    width: 100%;
    max-width: 100%;
}

body {
    overflow-x: hidden;
}

main,
.site-page,
section,
.container,
.hero-wrap,
.hero-copy,
.about-grid,
.about-content,
.service-slider-wrap,
.service-slider,
.work-grid,
.offer-wrap,
.cta-wrap,
.footer-grid,
.smm-hero-grid,
.smm-hero-copy,
.smm-about-grid,
.smm-about-content,
.smm-service-group,
.smm-service-head,
.smm-include-grid,
.smm-cta-box {
    min-width: 0;
}

img,
video,
canvas,
svg {
    max-width: 100%;
}

h1,
h2,
h3,
h4,
p,
a,
button,
span {
    overflow-wrap: break-word;
}

@media (max-width: 680px) {

    .container {
        width: calc(100% - 24px);
        max-width: 100%;
    }

    .mobile-nav-bar {
        height: 72px;
        gap: 10px;
    }

    .mobile-brand {
        min-width: 0;
        max-width: calc(100% - 62px);
    }

    .mobile-brand img {
        width: min(210px, 100%);
        height: auto;
        max-height: 48px;
        object-fit: contain;
    }

    .mobile-menu-toggle,
    .mobile-menu-close {
        width: 44px;
        height: 44px;
        flex: 0 0 44px;
        border-radius: 14px;
        font-size: 20px;
    }

    .mobile-menu-drawer {
        width: min(92vw, 370px);
        padding: 15px;
    }

    section {
        padding: 72px 0;
    }

    /* Home hero */
    .hero {
        min-height: auto;
        padding: 106px 0 64px;
    }

    .hero-wrap {
        display: block;
    }

    .hero-copy {
        width: 100%;
        max-width: 100%;
    }

    .hero-copy .eyebrow {
        max-width: 100%;
        font-size: 10.5px;
        line-height: 1.35;
        white-space: normal;
    }

    .hero-copy h1 {
        max-width: 100%;
        margin-bottom: 17px;
        font-size: clamp(31px, 10.5vw, 43px);
        line-height: 1.06;
        letter-spacing: -1px;
        word-break: normal;
    }

    .hero-copy p {
        max-width: 100%;
        margin-bottom: 23px;
        font-size: 15px;
        line-height: 1.72;
    }

    .hero-actions {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
        margin-bottom: 0;
    }

    .hero-actions .btn {
        width: 100%;
        min-width: 0;
    }

    /* Empty desktop artwork is hidden on mobile so it cannot
               create a large blank or overflow area. */
    .hero-empty {
        display: none;
    }

    /* General headings */
    .title {
        font-size: clamp(29px, 9vw, 42px);
        letter-spacing: -1px;
    }

    .section-top {
        width: 100%;
        margin-bottom: 34px;
    }

    /* Existing sections */
    .about-grid,
    .offer-wrap,
    .cta-wrap {
        gap: 30px;
    }

    .about-image {
        min-height: 330px;
        border-radius: 28px;
    }

    .about-points {
        gap: 10px;
    }

    .about-point {
        padding: 17px;
        border-radius: 18px;
    }

    .switch-row {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
        margin-bottom: 28px;
    }

    .switch-btn {
        width: 100%;
        min-width: 0;
    }

    .service-slider,
    .service-box {
        min-height: 540px;
    }

    .service-box {
        grid-template-rows: 220px 1fr;
    }

    .service-box-content {
        padding: 29px 19px 24px;
    }

    .service-box-content h3 {
        font-size: 25px;
    }

    .service-box-content p {
        font-size: 14.5px;
        line-height: 1.65;
    }

    .service-dot {
        width: 28px;
    }

    .service-dot.active {
        width: 52px;
    }

    .work-grid,
    .testimonial-grid,
    .footer-grid {
        gap: 16px;
    }

    .work-img {
        height: 190px;
    }

    .offer-item {
        grid-template-columns: 46px minmax(0, 1fr);
        padding: 19px;
    }

    .offer-icon {
        width: 46px;
        height: 46px;
    }

    .cta-wrap {
        padding: 24px 18px;
    }

    .mini-form {
        grid-template-columns: 1fr;
    }

    .footer {
        padding-top: 55px;
    }

    .footer-brand img {
        max-width: 100%;
        height: auto;
        max-height: 58px;
    }

    /* About and client pages */
    .about-hero-new,
    .oc-hero {
        min-height: auto;
        padding-top: 112px;
    }

    .about-hero-center,
    .oc-hero-panel,
    .oc-hero-content {
        width: 100%;
        max-width: 100%;
    }

    .about-hero-center h1,
    .oc-hero-content h1 {
        font-size: clamp(32px, 10vw, 46px);
        line-height: 1.05;
        letter-spacing: -1px;
    }

    .oc-hero-panel {
        padding: 0;
    }

    .oc-logo-grid {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .oc-logo-card {
        min-width: 0;
        min-height: 112px;
    }

    /* Social Media Management hero */
    .smm-hero {
        min-height: auto;
        padding: 108px 0 66px;
    }

    .smm-hero-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 34px;
    }

    .smm-hero-copy {
        width: 100%;
        max-width: 100%;
    }

    .smm-hero-copy h1 {
        max-width: 100%;
        font-size: clamp(32px, 10.2vw, 46px);
        line-height: 1.05;
        letter-spacing: -1.1px;
    }

    .smm-hero-copy p {
        max-width: 100%;
        font-size: 15px;
        line-height: 1.72;
    }

    .smm-hero-actions {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .smm-hero-actions .btn {
        width: 100%;
        min-width: 0;
    }

    /* Convert floating desktop animation into a clean mobile
               animated card grid. No element can leave the viewport. */
    .smm-hero-art {
        min-height: auto;
        width: 100%;
        padding: 18px;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 11px;
        border-radius: 28px;
    }

    .smm-flow-svg {
        display: none;
    }

    .smm-content-card,
    .smm-content-card.main,
    .smm-content-card.one,
    .smm-content-card.two,
    .smm-content-card.three,
    .smm-content-card.four {
        position: relative;
        left: auto;
        right: auto;
        top: auto;
        bottom: auto;
        width: auto;
        max-width: none;
        min-width: 0;
        padding: 12px;
        transform: none;
        border-radius: 17px;
        animation: smmMobileCardFloat 6s ease-in-out infinite;
    }

    .smm-content-card.main {
        grid-column: 1 / -1;
        order: -1;
    }

    .smm-content-card.two,
    .smm-content-card.four {
        animation-delay: -3s;
    }

    .smm-card-head {
        gap: 9px;
        margin-bottom: 8px;
    }

    .smm-card-icon {
        width: 37px;
        height: 37px;
        border-radius: 12px;
    }

    .smm-content-card b {
        font-size: 12px;
    }

    .smm-content-card small {
        font-size: 9px;
    }

    /* Social media About section */
    .smm-about-grid {
        grid-template-columns: 1fr;
        gap: 34px;
    }

    .smm-about-visual {
        min-height: auto;
        padding: 10px;
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
        border-radius: 28px;
    }

    .smm-about-image {
        position: relative;
        inset: auto;
        min-height: 310px;
        border-radius: 22px;
    }

    .smm-about-badge,
    .smm-about-badge.top,
    .smm-about-badge.bottom {
        position: relative;
        top: auto;
        right: auto;
        bottom: auto;
        left: auto;
        width: 100%;
        min-width: 0;
    }

    .smm-about-content h2 {
        font-size: clamp(30px, 9vw, 43px);
        letter-spacing: -1px;
    }

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

    /* Social media service cards */
    .smm-service-list {
        gap: 18px;
    }

    .smm-service-group {
        width: 100%;
        padding: 20px 15px;
        border-radius: 24px;
    }

    .smm-service-head {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .smm-service-number {
        width: 58px;
        height: 58px;
        border-radius: 18px;
        font-size: 18px;
    }

    .smm-service-head h3 {
        font-size: clamp(25px, 8vw, 34px);
    }

    .smm-include-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .smm-include-image {
        height: 185px;
    }

    .smm-include-body {
        padding: 18px;
    }

    /* Social media CTA */
    .smm-cta-box {
        grid-template-columns: 1fr;
        padding: 30px 19px;
        gap: 24px;
        border-radius: 28px;
    }

    .smm-cta-content h2 {
        font-size: clamp(30px, 9vw, 43px);
        letter-spacing: -1px;
    }

    .smm-cta-actions {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr;
    }

    .smm-cta-actions .btn {
        width: 100%;
    }
}

@media (max-width: 380px) {
    .container {
        width: calc(100% - 18px);
    }

    .mobile-brand img {
        max-height: 43px;
    }

    .hero-copy h1,
    .smm-hero-copy h1,
    .about-hero-center h1,
    .oc-hero-content h1 {
        font-size: clamp(27px, 10vw, 36px);
    }

    .eyebrow {
        max-width: 100%;
        padding: 8px 10px;
        font-size: 9.5px;
        white-space: normal;
    }

    .oc-logo-grid {
        grid-template-columns: 1fr;
    }

    .smm-hero-art {
        grid-template-columns: 1fr;
    }

    .smm-content-card.main {
        grid-column: auto;
    }
}

@keyframes smmMobileCardFloat {

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

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



/* =========================================================
           IT SERVICES PAGE
        ========================================================= */

.itp-page {
    overflow: hidden;
    background: #ffffff;
}

/* ---------------- HERO ---------------- */
.itp-hero {
    min-height: 100vh;
    padding: 150px 0 88px;
    display: flex;
    align-items: center;
    overflow: hidden;
    isolation: isolate;
    background:
        radial-gradient(circle at 14% 18%, rgba(1, 64, 193, .12), transparent 29%),
        radial-gradient(circle at 86% 80%, rgba(59, 130, 246, .10), transparent 31%),
        linear-gradient(180deg, #ffffff 0%, #f2f7ff 54%, #ffffff 100%);
}

.itp-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -4;
    background-image:
        linear-gradient(rgba(1, 64, 193, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(1, 64, 193, .045) 1px, transparent 1px);
    background-size: 58px 58px;
    opacity: .55;
    animation: itpGridMove 26s linear infinite;
    pointer-events: none;
}

.itp-hero::after {
    content: "";
    position: absolute;
    left: -18%;
    top: 10%;
    z-index: -3;
    width: 136%;
    height: 70%;
    background:
        linear-gradient(112deg,
            transparent 22%,
            rgba(1, 64, 193, .035) 42%,
            rgba(255, 255, 255, .70) 50%,
            rgba(1, 64, 193, .035) 58%,
            transparent 78%);
    transform: rotate(-7deg);
    animation: itpHeroBeam 12s ease-in-out infinite;
    pointer-events: none;
}

.itp-hero-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: .92fr 1.08fr;
    gap: 64px;
    align-items: center;
}

.itp-hero-copy {
    max-width: 650px;
}

.itp-hero-copy h1 {
    margin: 14px 0 22px;
    color: var(--navy);
    font-size: clamp(36px, 4.2vw, 64px);
    line-height: 1.02;
    letter-spacing: -2.5px;
}

.itp-hero-copy h1 span {
    color: var(--blue);
}

.itp-hero-copy p {
    max-width: 620px;
    color: #55677f;
    font-size: 17px;
    line-height: 1.86;
}

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

/* Unique silent animation: layered digital architecture stack */
.itp-hero-lab {
    position: relative;
    min-height: 570px;
    overflow: hidden;
    border: 1px solid rgba(1, 64, 193, .14);
    border-radius: 44px;
    background:
        radial-gradient(circle at 75% 18%, rgba(1, 64, 193, .12), transparent 28%),
        linear-gradient(145deg, rgba(255, 255, 255, .84), rgba(233, 242, 255, .55));
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, .76),
        0 34px 100px rgba(7, 20, 39, .10);
    perspective: 1200px;
}

.itp-lab-grid {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(1, 64, 193, .055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(1, 64, 193, .055) 1px, transparent 1px);
    background-size: 42px 42px;
    mask-image: linear-gradient(to bottom, transparent 0%, #000 12%, #000 86%, transparent 100%);
    animation: itpLabGridShift 20s linear infinite;
}

.itp-lab-glow {
    position: absolute;
    width: 330px;
    height: 330px;
    right: -105px;
    top: -100px;
    border-radius: 50%;
    background: rgba(1, 64, 193, .08);
    filter: blur(5px);
    animation: itpLabGlowFloat 10s ease-in-out infinite;
}

.itp-core-badge {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 6;
    width: 92px;
    height: 92px;
    display: grid;
    place-items: center;
    border-radius: 30px;
    color: #fff;
    background: linear-gradient(135deg, var(--blue), #0a65e8);
    box-shadow:
        0 24px 60px rgba(1, 64, 193, .27),
        0 0 0 14px rgba(1, 64, 193, .055);
    transform: translate(-50%, -50%) rotate(45deg);
    animation: itpCoreFloat 7s ease-in-out infinite;
}

.itp-core-badge i {
    font-size: 28px;
    transform: rotate(-45deg);
}

.itp-stack-card {
    position: absolute;
    z-index: 4;
    width: min(390px, 66%);
    min-height: 116px;
    padding: 18px;
    border: 1px solid rgba(1, 64, 193, .14);
    border-radius: 24px;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 22px 58px rgba(7, 20, 39, .10);
    backdrop-filter: blur(14px);
    overflow: hidden;
}

.itp-stack-card::after {
    content: "";
    position: absolute;
    left: -20%;
    top: 0;
    width: 34%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(1, 64, 193, .08), transparent);
    transform: skewX(-14deg);
    animation: itpCardScan 7.5s ease-in-out infinite;
}

.itp-stack-card.one {
    left: 8%;
    top: 12%;
    transform: rotate(-3deg);
    animation: itpStackOne 8s ease-in-out infinite;
}

.itp-stack-card.two {
    right: 7%;
    top: 38%;
    transform: rotate(2.5deg);
    animation: itpStackTwo 9s ease-in-out infinite;
}

.itp-stack-card.three {
    left: 11%;
    bottom: 10%;
    transform: rotate(-1.5deg);
    animation: itpStackThree 8.7s ease-in-out infinite;
}

.itp-stack-head {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 12px;
}

.itp-stack-icon {
    width: 48px;
    height: 48px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border-radius: 15px;
    color: #fff;
    background: linear-gradient(135deg, var(--blue), #0a65e8);
    box-shadow: 0 12px 28px rgba(1, 64, 193, .22);
}

.itp-stack-copy {
    min-width: 0;
    flex: 1;
}

.itp-stack-copy b {
    display: block;
    color: var(--navy);
    font-size: 15px;
    line-height: 1.2;
}

.itp-stack-copy small {
    display: block;
    margin-top: 5px;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.45;
}

.itp-stack-status {
    flex: 0 0 auto;
    padding: 7px 9px;
    border-radius: 999px;
    color: var(--blue);
    background: var(--soft-2);
    font-size: 9px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .4px;
}

.itp-stack-bars {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr .72fr .46fr;
    gap: 7px;
    margin-top: 14px;
}

.itp-stack-bars span {
    height: 7px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(1, 64, 193, .18), rgba(1, 64, 193, .06));
    animation: itpBarPulse 4.5s ease-in-out infinite;
}

.itp-stack-bars span:nth-child(2) {
    animation-delay: -1.5s;
}

.itp-stack-bars span:nth-child(3) {
    animation-delay: -3s;
}

.itp-data-rail {
    position: absolute;
    z-index: 2;
    left: 4%;
    right: 4%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(1, 64, 193, .25), transparent);
}

.itp-data-rail.rail-one {
    top: 28%;
}

.itp-data-rail.rail-two {
    top: 56%;
}

.itp-data-rail.rail-three {
    top: 78%;
}

.itp-data-rail span {
    position: absolute;
    left: 0;
    top: 50%;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--blue);
    box-shadow: 0 0 18px rgba(1, 64, 193, .48);
    transform: translate(-50%, -50%);
    animation: itpPacketRun 9s linear infinite;
}

.itp-data-rail.rail-two span {
    animation-duration: 12s;
    animation-delay: -4s;
}

.itp-data-rail.rail-three span {
    animation-duration: 14s;
    animation-delay: -8s;
}

/* ---------------- ABOUT ---------------- */
.itp-about {
    background: #fff;
}

.itp-about-grid {
    display: grid;
    grid-template-columns: .96fr 1.04fr;
    gap: 58px;
    align-items: center;
}

.itp-about-visual {
    position: relative;
    min-height: 570px;
    padding: 14px;
    border-radius: 40px;
    background: linear-gradient(145deg, rgba(1, 64, 193, .18), rgba(96, 165, 250, .12));
    box-shadow: 0 34px 90px rgba(7, 20, 39, .14);
}

.itp-about-image {
    position: absolute;
    inset: 14px;
    overflow: hidden;
    border-radius: 30px;
    background:
        linear-gradient(135deg, rgba(1, 64, 193, .90), rgba(11, 29, 60, .70)),
        radial-gradient(circle at 74% 22%, rgba(255, 255, 255, .20), transparent 30%);
}

.itp-about-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.itp-about-image.image-missing img {
    display: none;
}

.itp-about-image.image-missing::after {
    content: "Technology built around your business";
    position: absolute;
    left: 28px;
    right: 28px;
    bottom: 28px;
    color: #fff;
    font-size: clamp(26px, 3vw, 42px);
    font-weight: 950;
    line-height: 1.08;
}

.itp-about-module {
    position: absolute;
    z-index: 3;
    min-width: 168px;
    padding: 16px 18px;
    border-radius: 20px;
    color: var(--navy);
    background: rgba(255, 255, 255, .95);
    border: 1px solid rgba(1, 64, 193, .14);
    box-shadow: 0 18px 45px rgba(7, 20, 39, .12);
    backdrop-filter: blur(12px);
}

.itp-about-module i {
    color: var(--blue);
    margin-right: 8px;
}

.itp-about-module b {
    display: block;
    font-size: 15px;
    margin-bottom: 5px;
}

.itp-about-module span {
    display: block;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.45;
}

.itp-about-module.top {
    top: 44px;
    right: -30px;
}

.itp-about-module.bottom {
    left: -30px;
    bottom: 44px;
}

.itp-about-content h2 {
    margin-bottom: 20px;
    color: var(--navy);
    font-size: clamp(34px, 4.2vw, 60px);
    line-height: 1.05;
    letter-spacing: -1.6px;
}

.itp-about-content p {
    color: var(--muted);
    font-size: 16px;
    line-height: 1.88;
    margin-bottom: 16px;
}

.itp-about-points {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 26px;
}

.itp-about-point {
    padding: 18px;
    border-radius: 20px;
    background: var(--soft);
    border: 1px solid var(--line);
}

.itp-about-point i {
    color: var(--blue);
    margin-bottom: 10px;
}

.itp-about-point b {
    display: block;
    color: var(--navy);
    margin-bottom: 6px;
}

.itp-about-point span {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.55;
}

/* ---------------- ALL IT SERVICES ---------------- */
.itp-services {
    overflow: hidden;
    background:
        radial-gradient(circle at 10% 12%, rgba(1, 64, 193, .07), transparent 25%),
        radial-gradient(circle at 92% 78%, rgba(1, 64, 193, .06), transparent 28%),
        linear-gradient(180deg, #f5f9ff 0%, #ffffff 100%);
}

.itp-service-list {
    display: grid;
    gap: 26px;
}

.itp-service-group {
    overflow: hidden;
    border: 1px solid rgba(1, 64, 193, .14);
    border-radius: 32px;
    background: #fff;
    box-shadow: 0 20px 58px rgba(7, 20, 39, .075);
}

.itp-service-head {
    position: relative;
    padding: 30px 34px;
    display: grid;
    grid-template-columns: 86px 1fr 70px;
    gap: 22px;
    align-items: center;
    overflow: hidden;
    color: #fff;
    background:
        radial-gradient(circle at 88% 18%, rgba(1, 64, 193, .34), transparent 34%),
        linear-gradient(135deg, var(--navy), var(--navy-2));
}

.itp-service-head::after {
    content: "";
    position: absolute;
    right: -85px;
    top: -95px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .10);
    box-shadow: 0 0 0 28px rgba(255, 255, 255, .025);
}

.itp-service-number {
    position: relative;
    z-index: 2;
    width: 72px;
    height: 72px;
    display: grid;
    place-items: center;
    border-radius: 23px;
    color: #fff;
    background: linear-gradient(135deg, var(--blue), #0a65e8);
    box-shadow: 0 18px 42px rgba(1, 64, 193, .30);
    font-size: 21px;
    font-weight: 950;
}

.itp-service-copy {
    position: relative;
    z-index: 2;
    min-width: 0;
}

.itp-service-copy h3 {
    font-size: clamp(25px, 3vw, 38px);
    line-height: 1.08;
    margin-bottom: 9px;
}

.itp-service-copy h3 a {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: inherit;
    transition: color .24s ease, transform .24s ease;
}

.itp-service-copy h3 a::after {
    content: "\2197";
    flex: 0 0 auto;
    font-size: .55em;
    opacity: .72;
    transition: transform .24s ease, opacity .24s ease;
}

.itp-service-copy h3 a:hover,
.itp-service-copy h3 a:focus-visible {
    color: #ffffff;
    transform: translateX(4px);
}

.itp-service-copy h3 a:hover::after,
.itp-service-copy h3 a:focus-visible::after {
    opacity: 1;
    transform: translate(2px, -2px);
}

.itp-service-copy h3 a:focus-visible {
    outline: 3px solid rgba(255, 255, 255, .28);
    outline-offset: 5px;
    border-radius: 6px;
}

.itp-service-copy p {
    max-width: 760px;
    color: #c9d8ef;
    font-size: 14.5px;
    line-height: 1.72;
}

.itp-service-symbol {
    position: relative;
    z-index: 2;
    width: 60px;
    height: 60px;
    display: grid;
    place-items: center;
    border-radius: 20px;
    color: #fff;
    background: rgba(255, 255, 255, .09);
    border: 1px solid rgba(255, 255, 255, .14);
    font-size: 22px;
}

.itp-service-body {
    padding: 26px;
}

.itp-includes-title {
    margin-bottom: 14px;
    color: var(--blue);
    font-size: 12px;
    font-weight: 950;
    letter-spacing: .7px;
    text-transform: uppercase;
}

.itp-include-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.itp-include-card {
    overflow: hidden;
    border-radius: 23px;
    background: #fff;
    border: 1px solid rgba(1, 64, 193, .13);
    box-shadow: 0 14px 36px rgba(7, 20, 39, .055);
    transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}

.itp-include-card:hover {
    transform: translateY(-7px);
    border-color: rgba(1, 64, 193, .38);
    box-shadow: 0 24px 58px rgba(7, 20, 39, .11);
}

.itp-include-image {
    position: relative;
    height: 172px;
    display: grid;
    place-items: center;
    overflow: hidden;
    background:
        linear-gradient(135deg, rgba(7, 20, 39, .96), rgba(1, 64, 193, .75)),
        radial-gradient(circle at 28% 24%, rgba(255, 255, 255, .20), transparent 26%);
}

.itp-include-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, .055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .055) 1px, transparent 1px);
    background-size: 28px 28px;
}

.itp-include-image>i {
    position: relative;
    z-index: 1;
    color: rgba(255, 255, 255, .92);
    font-size: 42px;
}

.itp-include-image img {
    position: absolute;
    inset: 0;
    z-index: 3;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.itp-include-image.image-missing img {
    display: none;
}

.itp-include-body {
    padding: 20px;
}

.itp-include-body h4 {
    color: var(--navy);
    font-size: 18px;
    line-height: 1.22;
    margin-bottom: 8px;
}

.itp-include-body p {
    color: var(--muted);
    font-size: 13.5px;
    line-height: 1.65;
}

/* ---------------- CTA ---------------- */
.itp-cta {
    background: #fff;
}

.itp-cta-box {
    position: relative;
    padding: 64px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 34px;
    align-items: center;
    overflow: hidden;
    border-radius: 44px;
    color: #fff;
    background:
        radial-gradient(circle at 88% 18%, rgba(1, 64, 193, .34), transparent 34%),
        linear-gradient(135deg, var(--navy), #0b1d3c);
    box-shadow: 0 30px 90px rgba(7, 20, 39, .19);
}

.itp-cta-box::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
    background-size: 48px 48px;
    opacity: .7;
}

.itp-cta-box::after {
    content: "";
    position: absolute;
    width: 330px;
    height: 330px;
    right: -110px;
    bottom: -180px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .10);
    box-shadow: 0 0 0 34px rgba(255, 255, 255, .025);
    animation: itpCtaPulse 8s ease-in-out infinite;
}

.itp-cta-content,
.itp-cta-actions {
    position: relative;
    z-index: 2;
}

.itp-cta-content h2 {
    max-width: 760px;
    font-size: clamp(34px, 4.4vw, 62px);
    line-height: 1.04;
    letter-spacing: -1.5px;
}

.itp-cta-content p {
    max-width: 700px;
    margin-top: 15px;
    color: #c9d8ef;
    line-height: 1.8;
}

.itp-cta-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ---------------- ANIMATIONS ---------------- */
@keyframes itpGridMove {
    to {
        background-position: 58px 58px, 58px 58px;
    }
}

@keyframes itpHeroBeam {

    0%,
    16% {
        translate: -8% 0;
        opacity: .25;
    }

    50% {
        translate: 8% 0;
        opacity: .86;
    }

    84%,
    100% {
        translate: -8% 0;
        opacity: .25;
    }
}

@keyframes itpLabGridShift {
    to {
        background-position: 42px 42px, 42px 42px;
    }
}

@keyframes itpLabGlowFloat {

    0%,
    100% {
        transform: translate3d(0, 0, 0) scale(1);
    }

    50% {
        transform: translate3d(-24px, 22px, 0) scale(1.07);
    }
}

@keyframes itpCoreFloat {

    0%,
    100% {
        transform: translate(-50%, -50%) rotate(45deg);
    }

    50% {
        transform: translate(-50%, calc(-50% - 12px)) rotate(45deg);
    }
}

@keyframes itpCardScan {

    0%,
    16% {
        left: -30%;
        opacity: 0;
    }

    40% {
        opacity: 1;
    }

    72%,
    100% {
        left: 120%;
        opacity: 0;
    }
}

@keyframes itpStackOne {

    0%,
    100% {
        transform: translate3d(0, 0, 0) rotate(-3deg);
    }

    50% {
        transform: translate3d(10px, -10px, 0) rotate(-1.5deg);
    }
}

@keyframes itpStackTwo {

    0%,
    100% {
        transform: translate3d(0, 0, 0) rotate(2.5deg);
    }

    50% {
        transform: translate3d(-12px, -8px, 0) rotate(1deg);
    }
}

@keyframes itpStackThree {

    0%,
    100% {
        transform: translate3d(0, 0, 0) rotate(-1.5deg);
    }

    50% {
        transform: translate3d(8px, -12px, 0) rotate(0deg);
    }
}

@keyframes itpBarPulse {

    0%,
    100% {
        opacity: .52;
        transform: scaleX(.92);
        transform-origin: left;
    }

    50% {
        opacity: 1;
        transform: scaleX(1);
    }
}

@keyframes itpPacketRun {
    from {
        left: 0%;
    }

    to {
        left: 100%;
    }
}

@keyframes itpCtaPulse {

    0%,
    100% {
        transform: scale(1);
        opacity: .45;
    }

    50% {
        transform: scale(1.1);
        opacity: .9;
    }
}

/* ---------------- TABLET ---------------- */
@media (max-width: 1080px) {

    .itp-hero-grid,
    .itp-about-grid,
    .itp-cta-box {
        grid-template-columns: 1fr;
    }

    .itp-hero-lab {
        min-height: 530px;
    }

    .itp-about-visual {
        min-height: 500px;
    }

    .itp-include-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .itp-cta-actions {
        flex-direction: row;
        flex-wrap: wrap;
    }
}

/* ---------------- MOBILE ---------------- */
@media (max-width: 680px) {
    .itp-hero {
        min-height: auto;
        padding: 108px 0 66px;
    }

    .itp-hero-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 34px;
    }

    .itp-hero-copy {
        width: 100%;
        max-width: 100%;
    }

    .itp-hero-copy h1 {
        max-width: 100%;
        font-size: clamp(32px, 10.2vw, 46px);
        line-height: 1.05;
        letter-spacing: -1.1px;
    }

    .itp-hero-copy p {
        max-width: 100%;
        font-size: 15px;
        line-height: 1.72;
    }

    .itp-hero-actions {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .itp-hero-actions .btn {
        width: 100%;
        min-width: 0;
    }

    .itp-hero-lab {
        min-height: auto;
        width: 100%;
        padding: 17px;
        display: grid;
        grid-template-columns: 1fr;
        gap: 11px;
        border-radius: 28px;
    }

    .itp-lab-grid,
    .itp-data-rail {
        display: none;
    }

    .itp-core-badge {
        position: relative;
        left: auto;
        top: auto;
        width: 70px;
        height: 70px;
        margin: 4px auto 6px;
        border-radius: 23px;
        transform: rotate(45deg);
        animation: itpMobileCoreFloat 6s ease-in-out infinite;
    }

    .itp-stack-card,
    .itp-stack-card.one,
    .itp-stack-card.two,
    .itp-stack-card.three {
        position: relative;
        left: auto;
        right: auto;
        top: auto;
        bottom: auto;
        width: 100%;
        min-width: 0;
        transform: none;
        animation: itpMobileStackFloat 7s ease-in-out infinite;
    }

    .itp-stack-card.two {
        animation-delay: -2.5s;
    }

    .itp-stack-card.three {
        animation-delay: -5s;
    }

    .itp-stack-status {
        display: none;
    }

    .itp-about-grid {
        grid-template-columns: 1fr;
        gap: 34px;
    }

    .itp-about-visual {
        min-height: auto;
        padding: 10px;
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
        border-radius: 28px;
    }

    .itp-about-image {
        position: relative;
        inset: auto;
        min-height: 310px;
        border-radius: 22px;
    }

    .itp-about-module,
    .itp-about-module.top,
    .itp-about-module.bottom {
        position: relative;
        top: auto;
        right: auto;
        bottom: auto;
        left: auto;
        width: 100%;
        min-width: 0;
    }

    .itp-about-content h2 {
        font-size: clamp(30px, 9vw, 43px);
        letter-spacing: -1px;
    }

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

    .itp-service-list {
        gap: 18px;
    }

    .itp-service-group {
        border-radius: 24px;
    }

    .itp-service-head {
        padding: 22px 18px;
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .itp-service-number {
        width: 58px;
        height: 58px;
        border-radius: 18px;
        font-size: 18px;
    }

    .itp-service-symbol {
        display: none;
    }

    .itp-service-copy h3 {
        font-size: clamp(25px, 8vw, 34px);
    }

    .itp-service-body {
        padding: 16px;
    }

    .itp-include-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .itp-include-image {
        height: 185px;
    }

    .itp-include-body {
        padding: 18px;
    }

    .itp-cta-box {
        grid-template-columns: 1fr;
        padding: 30px 19px;
        gap: 24px;
        border-radius: 28px;
    }

    .itp-cta-content h2 {
        font-size: clamp(30px, 9vw, 43px);
        letter-spacing: -1px;
    }

    .itp-cta-actions {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr;
    }

    .itp-cta-actions .btn {
        width: 100%;
    }
}

@media (max-width: 380px) {
    .itp-hero-copy h1 {
        font-size: clamp(27px, 10vw, 36px);
    }

    .itp-stack-card {
        padding: 14px;
    }

    .itp-stack-icon {
        width: 42px;
        height: 42px;
    }
}

@keyframes itpMobileCoreFloat {

    0%,
    100% {
        transform: translateY(0) rotate(45deg);
    }

    50% {
        transform: translateY(-6px) rotate(45deg);
    }
}

@keyframes itpMobileStackFloat {

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

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


/* =========================================================
           ALL INCLUDED SERVICE CARDS — HORIZONTAL SCROLL
        ========================================================= */

.smm-includes-title,
.itp-includes-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.smm-include-grid,
.itp-include-grid {
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 25px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 5px 4px 18px;
    scroll-snap-type: x proximity;
    scroll-padding-inline: 4px;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    cursor: grab;
}

.smm-include-grid::-webkit-scrollbar,
.itp-include-grid::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

.smm-include-grid.is-dragging,
.itp-include-grid.is-dragging {
    cursor: grabbing;
    scroll-snap-type: none;
    user-select: none;
}

.smm-include-card,
.itp-include-card {
    flex: 0 0 clamp(285px, 30vw, 350px);
    min-width: 0;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    scroll-snap-align: start;
}

.smm-include-body,
.itp-include-body {
    flex: 1 1 auto;
}

.smm-include-image img,
.itp-include-image img {
    -webkit-user-drag: none;
    user-select: none;
}

@media (max-width: 1080px) {

    .smm-include-card,
    .itp-include-card {
        flex-basis: min(44vw, 330px);
    }
}

@media (max-width: 680px) {

    .smm-includes-title,
    .itp-includes-title {
        align-items: flex-start;
        gap: 10px;
    }

    .smm-includes-title::after,
    .itp-includes-title::after {
        content: "Swipe to view all";
        max-width: 90px;
        text-align: right;
        line-height: 1.35;
    }

    .smm-include-grid,
    .itp-include-grid {
        gap: 12px;
        padding: 4px 2px 14px;
    }

    .smm-include-card,
    .itp-include-card {
        flex: 0 0 min(82vw, 310px);
    }
}

@media (max-width: 380px) {

    .smm-include-card,
    .itp-include-card {
        flex-basis: min(84vw, 285px);
    }
}

/* =========================================================
   CERTIFICATIONS & PARTNERSHIPS
========================================================= */

.trust-certificates {
    position: relative;
    padding: 92px 0;
    overflow: hidden;
    background:
        radial-gradient(circle at 85% 18%,
            rgba(1, 64, 193, 0.07),
            transparent 28%),
        linear-gradient(180deg,
            #f6f9fd 0%,
            #f2f6fb 100%);
}

.trust-certificates::before {
    content: "";
    position: absolute;
    left: -100px;
    bottom: -160px;
    width: 360px;
    height: 360px;
    border-radius: 50%;
    background: rgba(1, 64, 193, 0.04);
    pointer-events: none;
}

.trust-certificates-wrap {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: 65px;
    align-items: center;
}

.trust-certificates-content {
    max-width: 470px;
}

.trust-certificates-content h2 {
    margin: 14px 0 18px;
    color: var(--navy);
    font-size: clamp(34px, 4vw, 54px);
    line-height: 1.06;
    letter-spacing: -1.5px;
}

.trust-certificates-content h2 span {
    display: block;
    color: var(--blue);
}

.trust-certificates-content p {
    color: var(--muted);
    font-size: 15.5px;
    line-height: 1.82;
}

/* ================= CERTIFICATE CARDS ================= */

.trust-cards-scroll {
    width: 100%;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 14px 4px 24px;

    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
}

.trust-cards-scroll::-webkit-scrollbar {
    display: none;
}

/* Horizontal card row */
.trust-cards-track {
    display: flex;
    align-items: stretch;
    gap: 16px;
    width: max-content;
}

/* Main certificate card */
.trust-certificate-card {
    position: relative;
    flex: 0 0 250px;
    width: 250px;
    min-height: 325px;
    padding: 22px;
    overflow: hidden;

    border: 1px solid rgba(1, 64, 193, 0.12);
    border-radius: 26px;

    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 16px 40px rgba(7, 20, 39, 0.07);

    scroll-snap-align: start;
    transition:
        transform 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}

.trust-certificate-card::before {
    content: "";
    position: absolute;
    right: -55px;
    bottom: -65px;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: rgba(1, 64, 193, 0.045);
    transition: transform 0.3s ease;
}

.trust-certificate-card:hover {
    transform: translateY(-8px);
    border-color: rgba(1, 64, 193, 0.34);
    box-shadow: 0 26px 60px rgba(7, 20, 39, 0.14);
}

.trust-certificate-card:hover::before {
    transform: scale(1.18);
}

/* Card number */
.trust-card-number {
    position: absolute;
    top: 16px;
    right: 18px;
    z-index: 4;

    color: rgba(1, 64, 193, 0.12);
    font-size: 22px;
    font-weight: 900;
    line-height: 1;
}

/* Certificate image container */
.trust-logo-box {
    position: relative;
    z-index: 2;

    width: 100%;
    height: 145px;
    padding: 14px;

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

    overflow: hidden;
    border: 1px solid rgba(1, 64, 193, 0.10);
    border-radius: 18px;

    background: linear-gradient(145deg,
            #ffffff 0%,
            #f4f8ff 100%);
}

/* Certificate image */
.trust-logo-box img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;

    object-fit: contain;
    object-position: center;
}

/* Text content */
.trust-card-content {
    position: relative;
    z-index: 2;
    padding-top: 20px;
}

.trust-card-content h3 {
    margin: 0 0 9px;
    color: var(--navy);
    font-size: 18px;
    line-height: 1.25;
    font-weight: 800;
}

.trust-card-content p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.65;
}

/* ================= TABLET ================= */

@media (max-width: 1080px) {
    .trust-certificates-wrap {
        grid-template-columns: 1fr;
        gap: 34px;
    }

    .trust-certificates-content {
        max-width: 700px;
    }

    .trust-certificate-card {
        flex-basis: 260px;
        width: 260px;
    }
}

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

@media (max-width: 680px) {
    .trust-certificates {
        padding: 72px 0;
    }

    .trust-marker {
        display: none;
    }

    .trust-certificates-wrap {
        gap: 25px;
    }

    .trust-certificates-content h2 {
        font-size: clamp(30px, 9vw, 42px);
        letter-spacing: -1px;
    }

    .trust-certificates-content p {
        font-size: 14.5px;
    }

    .trust-cards-scroll {
        margin-right: -12px;
        padding-right: 12px;
        padding-bottom: 18px;
    }

    .trust-cards-track {
        gap: 14px;
    }

    .trust-certificate-card {
        flex: 0 0 min(78vw, 270px);
        width: min(78vw, 270px);
        min-height: 310px;
        padding: 17px;
        border-radius: 22px;
    }

    .trust-logo-box {
        height: 135px;
        padding: 12px;
    }

    .trust-card-content {
        padding-top: 17px;
    }

    .trust-card-content h3 {
        font-size: 17px;
    }
}

/* =========================================================
           16 SHARED SERVICE DETAIL PAGES
        ========================================================= */
.sd-page {
    overflow: hidden;
    background: #fff;
}

.sd-hero {
    min-height: 100vh;
    padding: 150px 0 90px;
    display: flex;
    align-items: center;
    overflow: hidden;
    isolation: isolate;
    background:
        radial-gradient(circle at 14% 18%, rgba(1, 64, 193, .13), transparent 28%),
        radial-gradient(circle at 86% 80%, rgba(59, 130, 246, .11), transparent 30%),
        linear-gradient(180deg, #fff 0%, #f3f7ff 52%, #fff 100%);
}

.sd-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -5;
    background-image:
        linear-gradient(rgba(1, 64, 193, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(1, 64, 193, .045) 1px, transparent 1px);
    background-size: 64px 64px;
    animation: sdGridDrift 24s linear infinite;
    pointer-events: none;
}

.sd-hero-animation {
    position: absolute;
    inset: 0;
    z-index: -2;
    overflow: hidden;
    pointer-events: none;
}

.sd-orbit {
    position: absolute;
    left: 50%;
    top: 50%;
    border: 1px solid rgba(1, 64, 193, .11);
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.sd-orbit.one {
    width: min(650px, 78vw);
    aspect-ratio: 1;
    animation: sdOrbitPulse 9s ease-in-out infinite;
}

.sd-orbit.two {
    width: min(900px, 96vw);
    aspect-ratio: 1;
    animation: sdOrbitPulse 12s ease-in-out infinite reverse;
}

.sd-orbit.three {
    width: min(1120px, 118vw);
    aspect-ratio: 1;
    opacity: .55;
    animation: sdOrbitPulse 15s ease-in-out infinite;
}

.sd-flow-line {
    position: absolute;
    left: 8%;
    right: 8%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(1, 64, 193, .18), transparent);
    transform-origin: center;
}

.sd-flow-line.line-one {
    top: 26%;
    transform: rotate(-8deg);
}

.sd-flow-line.line-two {
    top: 54%;
    transform: rotate(6deg);
}

.sd-flow-line.line-three {
    top: 76%;
    transform: rotate(-4deg);
}

.sd-flow-line i {
    position: absolute;
    left: 0;
    top: 50%;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--blue);
    box-shadow: 0 0 20px rgba(1, 64, 193, .56);
    transform: translate(-50%, -50%);
    animation: sdPacketMove 10s linear infinite;
}

.sd-flow-line.line-two i {
    animation-duration: 13s;
    animation-delay: -4s;
}

.sd-flow-line.line-three i {
    animation-duration: 16s;
    animation-delay: -8s;
}

.sd-node {
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid rgba(1, 64, 193, .42);
    box-shadow: 0 0 0 8px rgba(1, 64, 193, .045), 0 12px 32px rgba(1, 64, 193, .18);
    animation: sdNodeFloat 7s ease-in-out infinite;
}

.sd-node.n1 {
    left: 11%;
    top: 24%;
}

.sd-node.n2 {
    right: 13%;
    top: 22%;
    animation-delay: -2s;
}

.sd-node.n3 {
    left: 18%;
    bottom: 18%;
    animation-delay: -4s;
}

.sd-node.n4 {
    right: 20%;
    bottom: 21%;
    animation-delay: -6s;
}

.sd-hero .container {
    position: relative;
    z-index: 3;
}

.sd-hero-content {
    width: min(930px, 100%);
    margin: auto;
    text-align: center;
}

.sd-back-link {
    min-height: 42px;
    margin: 0 auto 18px;
    padding: 0 15px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    border: 1px solid rgba(1, 64, 193, .14);
    border-radius: 999px;
    color: #53657d;
    background: rgba(255, 255, 255, .78);
    font-size: 12px;
    font-weight: 850;
    cursor: pointer;
    backdrop-filter: blur(12px);
    transition: .25s ease;
}

.sd-back-link:hover {
    color: var(--blue);
    border-color: rgba(1, 64, 193, .34);
    transform: translateY(-2px);
}

.sd-hero-content h1 {
    margin: 15px 0 22px;
    color: var(--navy);
    font-size: clamp(38px, 5vw, 72px);
    line-height: .98;
    letter-spacing: -2.8px;
}

.sd-hero-content h1 span {
    color: var(--blue);
}

.sd-hero-content>p {
    width: min(760px, 100%);
    margin: 0 auto;
    color: #566980;
    font-size: 18px;
    line-height: 1.85;
}

.sd-hero-actions {
    margin-top: 30px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 13px;
}

.sd-about {
    background: #fff;
}

.sd-about-grid {
    display: grid;
    grid-template-columns: .92fr 1.08fr;
    gap: 58px;
    align-items: center;
}

.sd-about-visual {
    position: relative;
    min-height: 540px;
    padding: 13px;
    border-radius: 40px;
    background: linear-gradient(145deg, rgba(1, 64, 193, .22), rgba(96, 165, 250, .10));
    box-shadow: 0 34px 90px rgba(7, 20, 39, .14);
}

.sd-about-image {
    position: absolute;
    inset: 13px;
    overflow: hidden;
    border-radius: 30px;
    background: linear-gradient(135deg, #071427, #0140c1);
}

.sd-about-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, transparent 38%, rgba(7, 20, 39, .66)),
        linear-gradient(120deg, rgba(1, 64, 193, .15), transparent 55%);
    z-index: 2;
}

.sd-about-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sd-about-image.image-missing img {
    display: none;
}

.sd-about-image .sd-fallback-icon {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: rgba(255, 255, 255, .82);
    font-size: 78px;
}

.sd-about-caption {
    position: absolute;
    left: 36px;
    right: 36px;
    bottom: 32px;
    z-index: 3;
    color: #fff;
}

.sd-about-caption small {
    display: block;
    margin-bottom: 7px;
    color: #dce9ff;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: .6px;
}

.sd-about-caption b {
    display: block;
    font-size: clamp(26px, 3vw, 42px);
    line-height: 1.05;
}

.sd-about-badge {
    position: absolute;
    z-index: 4;
    min-width: 170px;
    padding: 16px 18px;
    border: 1px solid rgba(1, 64, 193, .14);
    border-radius: 20px;
    background: rgba(255, 255, 255, .95);
    box-shadow: 0 18px 45px rgba(7, 20, 39, .12);
    backdrop-filter: blur(12px);
}

.sd-about-badge.top {
    right: -28px;
    top: 42px;
}

.sd-about-badge.bottom {
    left: -28px;
    bottom: 42px;
}

.sd-about-badge b {
    display: block;
    margin-bottom: 5px;
    color: var(--blue);
    font-size: 17px;
}

.sd-about-badge span {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.45;
}

.sd-about-copy h2 {
    margin-bottom: 22px;
    color: var(--navy);
    font-size: clamp(34px, 4.2vw, 60px);
    line-height: 1.05;
    letter-spacing: -1.7px;
}

.sd-about-copy p {
    margin-bottom: 16px;
    color: var(--muted);
    font-size: 16px;
    line-height: 1.9;
}

.sd-about-highlights {
    margin-top: 26px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.sd-about-highlights span {
    min-height: 58px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--line);
    border-radius: 18px;
    color: var(--navy);
    background: var(--soft);
    font-size: 13px;
    font-weight: 850;
}

.sd-about-highlights i {
    color: var(--blue);
}

.sd-key-points {
    overflow: hidden;
    background:
        radial-gradient(circle at 10% 16%, rgba(1, 64, 193, .07), transparent 26%),
        radial-gradient(circle at 90% 84%, rgba(1, 64, 193, .06), transparent 28%),
        linear-gradient(180deg, #f5f9ff, #fff);
}

.sd-key-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.sd-key-card {
    position: relative;
    min-height: 285px;
    padding: 28px;
    overflow: hidden;
    border: 1px solid rgba(1, 64, 193, .13);
    border-radius: 30px;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 18px 48px rgba(7, 20, 39, .07);
    transition: .3s ease;
}

.sd-key-card::after {
    content: "";
    position: absolute;
    right: -65px;
    bottom: -75px;
    width: 170px;
    height: 170px;
    border-radius: 50%;
    background: rgba(1, 64, 193, .055);
    transition: .3s ease;
}

.sd-key-card:hover {
    transform: translateY(-9px);
    border-color: rgba(1, 64, 193, .38);
    box-shadow: 0 28px 72px rgba(7, 20, 39, .12);
}

.sd-key-icon {
    position: relative;
    z-index: 2;
    width: 62px;
    height: 62px;
    margin-bottom: 26px;
    display: grid;
    place-items: center;
    border-radius: 21px;
    color: #fff;
    background: linear-gradient(135deg, var(--blue), #0a65e8);
    box-shadow: 0 17px 38px rgba(1, 64, 193, .25);
    font-size: 22px;
}

.sd-key-card h3,
.sd-key-card p {
    position: relative;
    z-index: 2;
}

.sd-key-card h3 {
    margin-bottom: 11px;
    color: var(--navy);
    font-size: 21px;
    line-height: 1.18;
}

.sd-key-card p {
    color: var(--muted);
    font-size: 14px;
    line-height: 1.72;
}

.sd-includes {
    background: #fff;
}

.sd-include-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.sd-include-card {
    width: 100%;
    min-width: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid rgba(1, 64, 193, .13);
    border-radius: 26px;
    color: inherit;
    background: #fff;
    box-shadow: 0 16px 42px rgba(7, 20, 39, .07);
    text-align: left;
    cursor: pointer;
    transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}

.sd-include-card:hover,
.sd-include-card:focus-visible {
    transform: translateY(-8px);
    border-color: rgba(1, 64, 193, .42);
    box-shadow: 0 28px 68px rgba(7, 20, 39, .13);
    outline: none;
}

.sd-include-media {
    position: relative;
    height: 220px;
    overflow: hidden;
    background:
        radial-gradient(circle at 25% 22%, rgba(255, 255, 255, .20), transparent 26%),
        linear-gradient(135deg, #071427, #0140c1);
}

.sd-include-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 48%, rgba(7, 20, 39, .48));
    z-index: 2;
}

.sd-include-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .45s ease;
}

.sd-include-card:hover .sd-include-media img {
    transform: scale(1.06);
}

.sd-include-media.image-missing img {
    display: none;
}

.sd-include-fallback {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: rgba(255, 255, 255, .88);
    font-size: 46px;
}

.sd-card-cue {
    position: absolute;
    right: 16px;
    bottom: 15px;
    z-index: 3;
    min-height: 36px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 1px solid rgba(255, 255, 255, .20);
    border-radius: 999px;
    color: #fff;
    background: rgba(7, 20, 39, .52);
    font-size: 10px;
    font-weight: 900;
    backdrop-filter: blur(10px);
}

.sd-include-body {
    flex: 1 1 auto;
    padding: 22px;
}

.sd-include-body h3 {
    margin-bottom: 9px;
    color: var(--navy);
    font-size: 20px;
    line-height: 1.2;
}

.sd-include-body p {
    color: var(--muted);
    font-size: 13.5px;
    line-height: 1.68;
}

.sd-cta {
    background: #f5f9ff;
}

.sd-cta-box {
    position: relative;
    padding: 64px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 34px;
    align-items: center;
    overflow: hidden;
    border-radius: 44px;
    color: #fff;
    background:
        radial-gradient(circle at 88% 18%, rgba(1, 64, 193, .34), transparent 34%),
        linear-gradient(135deg, var(--navy), #0b1d3c);
    box-shadow: 0 30px 90px rgba(7, 20, 39, .19);
}

.sd-cta-box::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
    background-size: 48px 48px;
}

.sd-cta-box::after {
    content: "";
    position: absolute;
    right: -100px;
    bottom: -175px;
    width: 330px;
    height: 330px;
    border: 1px solid rgba(255, 255, 255, .10);
    border-radius: 50%;
    box-shadow: 0 0 0 34px rgba(255, 255, 255, .025);
    animation: sdCtaPulse 8s ease-in-out infinite;
}

.sd-cta-content,
.sd-cta-actions {
    position: relative;
    z-index: 2;
}

.sd-cta-content h2 {
    max-width: 780px;
    font-size: clamp(34px, 4.4vw, 62px);
    line-height: 1.04;
    letter-spacing: -1.5px;
}

.sd-cta-content p {
    max-width: 680px;
    margin-top: 15px;
    color: #c9d8ef;
    line-height: 1.8;
}

.sd-cta-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Shared service inclusion popup */
.sd-detail-modal {
    position: fixed;
    inset: 0;
    z-index: 2600;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(3, 16, 36, .68);
    backdrop-filter: blur(10px);
}

.sd-detail-modal.open {
    display: flex;
}

.sd-detail-dialog {
    position: relative;
    width: min(1040px, 100%);
    max-height: min(760px, calc(100vh - 40px));
    display: grid;
    grid-template-columns: .92fr 1.08fr;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 34px;
    background: #fff;
    box-shadow: 0 36px 120px rgba(0, 0, 0, .38);
    animation: sdModalIn .28s ease both;
}

.sd-detail-close {
    position: absolute;
    right: 16px;
    top: 16px;
    z-index: 5;
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .20);
    border-radius: 15px;
    color: #fff;
    background: rgba(7, 20, 39, .56);
    font-size: 21px;
    cursor: pointer;
    backdrop-filter: blur(12px);
}

.sd-detail-media {
    position: relative;
    min-height: 520px;
    overflow: hidden;
    background: linear-gradient(135deg, #071427, #0140c1);
}

.sd-detail-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 45%, rgba(7, 20, 39, .56));
}

.sd-detail-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sd-detail-media.image-missing img {
    display: none;
}

.sd-detail-fallback {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: rgba(255, 255, 255, .82);
    font-size: 76px;
}

.sd-detail-content {
    padding: 58px 54px 46px;
    overflow-y: auto;
}

.sd-detail-label {
    display: inline-flex;
    margin-bottom: 15px;
    padding: 8px 11px;
    border-radius: 999px;
    color: var(--blue);
    background: var(--soft-2);
    font-size: 11px;
    font-weight: 950;
    letter-spacing: .5px;
    text-transform: uppercase;
}

.sd-detail-content h2 {
    margin-bottom: 17px;
    color: var(--navy);
    font-size: clamp(30px, 3.4vw, 48px);
    line-height: 1.05;
    letter-spacing: -1.2px;
}

.sd-detail-content p {
    color: var(--muted);
    font-size: 15.5px;
    line-height: 1.88;
    white-space: pre-line;
}

.sd-detail-content .btn {
    margin-top: 28px;
}

body.sd-modal-open {
    overflow: hidden;
}

@keyframes sdGridDrift {
    to {
        background-position: 64px 64px, 64px 64px;
    }
}

@keyframes sdLightSweep {

    0%,
    18% {
        left: -45%;
        opacity: 0;
    }

    38% {
        opacity: 1;
    }

    62%,
    100% {
        left: 110%;
        opacity: 0;
    }
}

@keyframes sdOrbitPulse {

    0%,
    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: .45;
    }

    50% {
        transform: translate(-50%, -50%) scale(1.06);
        opacity: .9;
    }
}

@keyframes sdPacketMove {
    from {
        left: 0%;
    }

    to {
        left: 100%;
    }
}

@keyframes sdNodeFloat {

    0%,
    100% {
        transform: translate3d(0, 0, 0);
    }

    50% {
        transform: translate3d(16px, -18px, 0);
    }
}

@keyframes sdCtaPulse {

    0%,
    100% {
        transform: scale(1);
        opacity: .45;
    }

    50% {
        transform: scale(1.1);
        opacity: .9;
    }
}

@keyframes sdModalIn {
    from {
        opacity: 0;
        transform: translateY(20px) scale(.97);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@media (max-width: 1080px) {

    .sd-about-grid,
    .sd-cta-box {
        grid-template-columns: 1fr;
    }

    .sd-key-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .sd-include-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .sd-cta-actions {
        flex-direction: row;
        flex-wrap: wrap;
    }
}

@media (max-width: 760px) {
    .sd-hero {
        min-height: auto;
        padding: 112px 0 72px;
    }

    .sd-orbit.two,
    .sd-orbit.three,
    .sd-node {
        display: none;
    }

    .sd-hero-content h1 {
        font-size: clamp(33px, 10.5vw, 48px);
        line-height: 1.04;
        letter-spacing: -1.2px;
    }

    .sd-hero-content>p {
        font-size: 15.5px;
        line-height: 1.75;
    }

    .sd-hero-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .sd-about-grid {
        gap: 34px;
    }

    .sd-about-visual {
        min-height: auto;
        padding: 10px;
        display: grid;
        gap: 10px;
        border-radius: 28px;
    }

    .sd-about-image {
        position: relative;
        inset: auto;
        min-height: 330px;
        border-radius: 22px;
    }

    .sd-about-badge,
    .sd-about-badge.top,
    .sd-about-badge.bottom {
        position: relative;
        left: auto;
        right: auto;
        top: auto;
        bottom: auto;
        width: 100%;
        min-width: 0;
    }

    .sd-about-copy h2 {
        font-size: clamp(30px, 9vw, 43px);
        letter-spacing: -1px;
    }

    .sd-about-highlights,
    .sd-key-grid,
    .sd-include-grid {
        grid-template-columns: 1fr;
    }

    .sd-key-card {
        min-height: auto;
    }

    .sd-include-media {
        height: 210px;
    }

    .sd-cta-box {
        padding: 32px 22px;
        border-radius: 30px;
    }

    .sd-cta-content h2 {
        font-size: clamp(30px, 9vw, 43px);
        letter-spacing: -1px;
    }

    .sd-cta-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .sd-detail-modal {
        padding: 12px;
    }

    .sd-detail-dialog {
        max-height: calc(100vh - 24px);
        grid-template-columns: 1fr;
        overflow-y: auto;
        border-radius: 26px;
    }

    .sd-detail-media {
        min-height: 265px;
    }

    .sd-detail-content {
        padding: 30px 22px 28px;
        overflow: visible;
    }

    .sd-detail-content .btn {
        width: 100%;
    }
}



/* =========================================================
           EXPANDED SERVICE PAGES + NEW MESH HERO ANIMATION
        ========================================================= */
.sd-hero {
    min-height: 92vh;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .90), rgba(244, 248, 255, .88) 58%, #fff),
        radial-gradient(circle at 18% 20%, rgba(1, 64, 193, .12), transparent 34%);
}

.sd-hero::before {
    background-image:
        radial-gradient(circle, rgba(1, 64, 193, .10) 1.1px, transparent 1.1px);
    background-size: 31px 31px;
    opacity: .36;
    animation: sdMeshDots 22s linear infinite;
}

.sd-mesh-animation {
    z-index: -3;
}

.sd-aurora {
    position: absolute;
    border-radius: 50%;
    filter: blur(16px);
    opacity: .34;
    mix-blend-mode: multiply;
    animation: sdAuroraDrift 13s ease-in-out infinite alternate;
}

.sd-aurora.aurora-one {
    width: 420px;
    height: 420px;
    left: -110px;
    top: 14%;
    background: rgba(1, 64, 193, .15);
}

.sd-aurora.aurora-two {
    width: 360px;
    height: 360px;
    right: -70px;
    top: 8%;
    background: rgba(71, 150, 255, .15);
    animation-delay: -4s;
}

.sd-aurora.aurora-three {
    width: 520px;
    height: 260px;
    left: 34%;
    bottom: -120px;
    background: rgba(1, 64, 193, .09);
    animation-delay: -8s;
}

.sd-scan-beam {
    position: absolute;
    left: -18%;
    width: 136%;
    height: 72px;
    background: linear-gradient(90deg, transparent 5%, rgba(1, 64, 193, .025) 30%, rgba(1, 64, 193, .10) 50%, rgba(1, 64, 193, .025) 70%, transparent 95%);
    transform: rotate(-8deg);
    opacity: .65;
    animation: sdBeamFlow 10s ease-in-out infinite;
}

.sd-scan-beam.beam-one {
    top: 24%;
}

.sd-scan-beam.beam-two {
    top: 68%;
    animation-delay: -5s;
    transform: rotate(7deg);
}

.sd-data-column {
    position: absolute;
    display: grid;
    gap: 10px;
    width: 150px;
    opacity: .42;
    animation: sdColumnFloat 8s ease-in-out infinite;
}

.sd-data-column.column-one {
    left: 5%;
    top: 44%;
}

.sd-data-column.column-two {
    right: 6%;
    top: 48%;
    animation-delay: -4s;
}

.sd-data-column i {
    height: 7px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(1, 64, 193, .40), rgba(1, 64, 193, .04));
}

.sd-data-column i:nth-child(2) {
    width: 72%;
}

.sd-data-column i:nth-child(3) {
    width: 88%;
}

.sd-data-column i:nth-child(4) {
    width: 54%;
}

.sd-glass-signal {
    position: absolute;
    min-width: 178px;
    padding: 14px 16px;
    display: grid;
    grid-template-columns: 38px 1fr;
    column-gap: 11px;
    align-items: center;
    border: 1px solid rgba(1, 64, 193, .12);
    border-radius: 18px;
    background: rgba(255, 255, 255, .70);
    box-shadow: 0 18px 50px rgba(7, 20, 39, .08);
    backdrop-filter: blur(14px);
    animation: sdSignalFloat 8s ease-in-out infinite;
}

.sd-glass-signal>i {
    grid-row: 1 / span 2;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    color: #fff;
    background: linear-gradient(135deg, var(--blue), #0a65e8);
}

.sd-glass-signal b {
    color: var(--navy);
    font-size: 12px;
}

.sd-glass-signal small {
    color: var(--muted);
    font-size: 9px;
}

.sd-glass-signal.signal-one {
    left: 7%;
    top: 20%;
    transform: rotate(-3deg);
}

.sd-glass-signal.signal-two {
    right: 8%;
    top: 24%;
    transform: rotate(3deg);
    animation-delay: -2.7s;
}

.sd-glass-signal.signal-three {
    right: 11%;
    bottom: 13%;
    transform: rotate(-2deg);
    animation-delay: -5.4s;
}

.sd-mesh-dot {
    position: absolute;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--blue);
    box-shadow: 0 0 0 8px rgba(1, 64, 193, .05), 0 0 24px rgba(1, 64, 193, .38);
    animation: sdMeshDotFloat 7s ease-in-out infinite;
}

.sd-mesh-dot.dot-one {
    left: 22%;
    top: 18%;
}

.sd-mesh-dot.dot-two {
    right: 24%;
    top: 16%;
    animation-delay: -2s;
}

.sd-mesh-dot.dot-three {
    left: 18%;
    bottom: 20%;
    animation-delay: -4s;
}

.sd-mesh-dot.dot-four {
    right: 27%;
    bottom: 22%;
    animation-delay: -6s;
}

.sd-hero-content {
    width: min(980px, 100%);
}

.sd-hero-content>p {
    max-width: 830px;
}

.sd-hero-proof {
    margin: 25px auto 0;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
}

.sd-hero-proof span {
    padding: 10px 13px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(1, 64, 193, .12);
    border-radius: 999px;
    background: rgba(255, 255, 255, .76);
    color: #53657d;
    font-size: 11px;
    font-weight: 850;
    backdrop-filter: blur(10px);
}

.sd-hero-proof i {
    color: var(--blue);
}

.sd-challenges {
    background: linear-gradient(180deg, #f6faff, #fff);
}

.sd-challenge-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}

.sd-challenge-card {
    min-height: 210px;
    padding: 28px;
    display: grid;
    grid-template-columns: 62px 1fr;
    gap: 20px;
    border: 1px solid var(--line);
    border-radius: 28px;
    background: #fff;
    box-shadow: 0 18px 50px rgba(7, 20, 39, .065);
    transition: .3s ease;
}

.sd-challenge-card:hover {
    transform: translateY(-7px);
    border-color: rgba(1, 64, 193, .35);
    box-shadow: 0 28px 70px rgba(7, 20, 39, .11);
}

.sd-challenge-icon {
    width: 62px;
    height: 62px;
    display: grid;
    place-items: center;
    border-radius: 20px;
    color: var(--blue);
    background: var(--soft-2);
    font-size: 21px;
}

.sd-challenge-card small {
    color: var(--blue);
    font-size: 10px;
    font-weight: 950;
    letter-spacing: .6px;
    text-transform: uppercase;
}

.sd-challenge-card h3 {
    margin: 8px 0 9px;
    color: var(--navy);
    font-size: 22px;
    line-height: 1.15;
}

.sd-challenge-card p {
    color: var(--muted);
    font-size: 14px;
    line-height: 1.72;
}

.sd-process-section {
    color: #fff;
    background: #071427;
    overflow: hidden;
}

.sd-process-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 12% 18%, rgba(1, 64, 193, .22), transparent 28%), linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
    background-size: auto, 68px 68px, 68px 68px;
}

.sd-process-section .container {
    position: relative;
    z-index: 2;
}

.sd-process-head {
    margin-bottom: 42px;
    display: grid;
    grid-template-columns: 1fr .72fr;
    gap: 40px;
    align-items: end;
}

.sd-process-head .title {
    color: #fff;
}

.sd-process-head .text {
    color: #c9d8ef;
}

.sd-process-track {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 32px;
    overflow: hidden;
    background: rgba(255, 255, 255, .045);
}

.sd-process-step {
    min-height: 250px;
    padding: 28px;
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: 16px;
    border-right: 1px solid rgba(255, 255, 255, .11);
    border-bottom: 1px solid rgba(255, 255, 255, .11);
}

.sd-process-step:nth-child(3n) {
    border-right: 0;
}

.sd-process-step:nth-last-child(-n+3) {
    border-bottom: 0;
}

.sd-process-step>span {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    color: #fff;
    background: linear-gradient(135deg, var(--blue), #0a65e8);
    font-size: 12px;
    font-weight: 950;
    box-shadow: 0 14px 30px rgba(1, 64, 193, .28);
}

.sd-process-step h3 {
    margin: 5px 0 10px;
    font-size: 20px;
    line-height: 1.15;
}

.sd-process-step p {
    color: #c9d8ef;
    font-size: 13.5px;
    line-height: 1.7;
}

.sd-deliverables {
    background: linear-gradient(180deg, #fff, #f6faff 50%, #fff);
}

.sd-deliverable-layout {
    display: grid;
    grid-template-columns: .78fr 1.22fr;
    gap: 44px;
    align-items: start;
}

.sd-deliverable-intro {
    position: sticky;
    top: 120px;
    padding: 34px;
    border-radius: 32px;
    color: #fff;
    background: linear-gradient(145deg, var(--navy), #0b1d3c);
    box-shadow: var(--shadow);
}

.sd-deliverable-intro .title {
    color: #fff;
    font-size: clamp(32px, 3.7vw, 50px);
}

.sd-deliverable-intro .text {
    color: #c9d8ef;
}

.sd-suitable-box {
    margin-top: 26px;
    padding: 18px;
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 20px;
    background: rgba(255, 255, 255, .07);
}

.sd-suitable-box small {
    display: block;
    margin-bottom: 7px;
    color: #89b9ff;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .5px;
}

.sd-suitable-box p {
    color: #e4edfb;
    line-height: 1.65;
}

.sd-output-list {
    display: grid;
    gap: 13px;
}

.sd-output-row {
    padding: 22px;
    display: grid;
    grid-template-columns: 54px 1fr;
    gap: 17px;
    border: 1px solid var(--line);
    border-radius: 23px;
    background: #fff;
    box-shadow: 0 14px 36px rgba(7, 20, 39, .055);
}

.sd-output-row>span {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    border-radius: 17px;
    color: var(--blue);
    background: var(--soft-2);
}

.sd-output-row h3 {
    margin: 2px 0 7px;
    color: var(--navy);
    font-size: 19px;
}

.sd-output-row p {
    color: var(--muted);
    font-size: 13.5px;
    line-height: 1.68;
}

.sd-outcome-wrap {
    margin-top: 92px;
}

.sd-outcome-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.sd-outcome-card {
    min-height: 240px;
    padding: 26px;
    border: 1px solid var(--line);
    border-radius: 27px;
    background: #fff;
    box-shadow: 0 16px 44px rgba(7, 20, 39, .065);
}

.sd-outcome-card>i {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    margin-bottom: 22px;
    border-radius: 19px;
    color: #fff;
    background: linear-gradient(135deg, var(--blue), #0a65e8);
    box-shadow: 0 16px 34px rgba(1, 64, 193, .24);
}

.sd-outcome-card h3 {
    margin-bottom: 9px;
    color: var(--navy);
    font-size: 20px;
    line-height: 1.17;
}

.sd-outcome-card p {
    color: var(--muted);
    font-size: 13.5px;
    line-height: 1.68;
}

.sd-faq-section {
    background: #fff;
}

.sd-faq-layout {
    display: grid;
    grid-template-columns: .78fr 1.22fr;
    gap: 54px;
    align-items: start;
}

.sd-faq-intro {
    position: sticky;
    top: 120px;
}

.sd-faq-list {
    display: grid;
    gap: 12px;
}

.sd-faq-item {
    border: 1px solid var(--line);
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 12px 32px rgba(7, 20, 39, .05);
    overflow: hidden;
}

.sd-faq-item summary {
    min-height: 76px;
    padding: 20px 22px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    color: var(--navy);
    font-size: 16px;
    font-weight: 900;
    cursor: pointer;
    list-style: none;
}

.sd-faq-item summary::-webkit-details-marker {
    display: none;
}

.sd-faq-item summary i {
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border-radius: 13px;
    color: var(--blue);
    background: var(--soft-2);
    transition: .25s ease;
}

.sd-faq-item[open] summary i {
    transform: rotate(45deg);
    color: #fff;
    background: var(--blue);
}

.sd-faq-answer {
    padding: 0 22px 22px;
}

.sd-faq-answer p {
    padding-top: 17px;
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: 14.5px;
    line-height: 1.8;
}

@keyframes sdMeshDots {
    to {
        background-position: 31px 31px;
    }
}

@keyframes sdHeroHalo {
    from {
        border-radius: 46% 54% 58% 42% / 52% 45% 55% 48%;
        transform: translate(-50%, -50%) scale(1);
    }

    to {
        border-radius: 58% 42% 44% 56% / 42% 58% 44% 56%;
        transform: translate(-50%, -50%) scale(1.06);
    }
}

@keyframes sdAuroraDrift {
    from {
        transform: translate3d(-2%, -1%, 0) scale(1);
    }

    to {
        transform: translate3d(5%, 4%, 0) scale(1.10);
    }
}

@keyframes sdBeamFlow {

    0%,
    100% {
        translate: -8% 0;
        opacity: .25;
    }

    50% {
        translate: 8% 0;
        opacity: .85;
    }
}

@keyframes sdColumnFloat {

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

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

@keyframes sdSignalFloat {

    0%,
    100% {
        translate: 0 0;
    }

    50% {
        translate: 0 -12px;
    }
}

@keyframes sdMeshDotFloat {

    0%,
    100% {
        transform: translate3d(0, 0, 0);
        opacity: .45;
    }

    50% {
        transform: translate3d(14px, -18px, 0);
        opacity: 1;
    }
}

@media(max-width:1080px) {
    .sd-glass-signal {
        display: none;
    }

    .sd-challenge-grid {
        grid-template-columns: 1fr 1fr;
    }

    .sd-process-head,
    .sd-deliverable-layout,
    .sd-faq-layout {
        grid-template-columns: 1fr;
    }

    .sd-process-track {
        grid-template-columns: repeat(2, 1fr);
    }

    .sd-process-step:nth-child(3n) {
        border-right: 1px solid rgba(255, 255, 255, .11);
    }

    .sd-process-step:nth-child(2n) {
        border-right: 0;
    }

    .sd-process-step:nth-last-child(-n+3) {
        border-bottom: 1px solid rgba(255, 255, 255, .11);
    }

    .sd-process-step:nth-last-child(-n+2) {
        border-bottom: 0;
    }

    .sd-deliverable-intro,
    .sd-faq-intro {
        position: relative;
        top: auto;
    }

    .sd-outcome-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media(max-width:680px) {
    .sd-hero {
        min-height: auto;
    }

    .sd-data-column,
    .sd-scan-beam,
    .sd-mesh-dot.dot-three,
    .sd-mesh-dot.dot-four {
        display: none;
    }

    .sd-hero-proof {
        display: grid;
        grid-template-columns: 1fr;
    }

    .sd-hero-proof span {
        justify-content: center;
    }

    .sd-challenge-grid,
    .sd-process-track,
    .sd-outcome-grid {
        grid-template-columns: 1fr;
    }

    .sd-challenge-card {
        min-height: auto;
        padding: 22px 18px;
        grid-template-columns: 52px 1fr;
        gap: 14px;
    }

    .sd-challenge-icon {
        width: 52px;
        height: 52px;
        border-radius: 17px;
    }

    .sd-process-head {
        gap: 12px;
    }

    .sd-process-track {
        border-radius: 24px;
    }

    .sd-process-step,
    .sd-process-step:nth-child(2n),
    .sd-process-step:nth-child(3n),
    .sd-process-step:nth-last-child(-n+2),
    .sd-process-step:nth-last-child(-n+3) {
        min-height: auto;
        border-right: 0;
        border-bottom: 1px solid rgba(255, 255, 255, .11);
    }

    .sd-process-step:last-child {
        border-bottom: 0;
    }

    .sd-deliverable-intro {
        padding: 25px 20px;
        border-radius: 26px;
    }

    .sd-output-row {
        padding: 18px;
        grid-template-columns: 48px 1fr;
    }

    .sd-output-row>span {
        width: 48px;
        height: 48px;
    }

    .sd-outcome-wrap {
        margin-top: 68px;
    }

    .sd-outcome-card {
        min-height: auto;
    }

    .sd-faq-layout {
        gap: 28px;
    }

    .sd-faq-item summary {
        min-height: 70px;
        padding: 18px;
        font-size: 14px;
    }

    .sd-faq-answer {
        padding: 0 18px 18px;
    }
}

/* =========================================================
           UNIQUE SHARED HERO — DIGITAL FLOW FABRIC
           Used by all 16 service detail pages.
           SVG paths + canvas strokes only: no circles, dots or cards.
        ========================================================= */
.sd-hero {
    min-height: 92vh;
    position: relative;
    isolation: isolate;
    background:
        linear-gradient(146deg, #ffffff 0%, #f1f6ff 42%, #fbfdff 68%, #ffffff 100%);
}

.sd-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    width: auto;
    height: auto;
    opacity: .58;
    pointer-events: none;
    background-image:
        repeating-linear-gradient(118deg,
            transparent 0,
            transparent 112px,
            rgba(1, 64, 193, .043) 113px,
            rgba(1, 64, 193, .043) 114px,
            transparent 115px,
            transparent 226px);
    background-size: 260px 100%;
    animation: sdFlowFieldDrift 28s linear infinite;
}

.sd-hero-animation.sd-flow-fabric {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    opacity: 1;
    pointer-events: none;
}

.sd-flow-canvas,
.sd-flow-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    pointer-events: none;
}

.sd-flow-canvas {
    z-index: 2;
    opacity: .92;
}

.sd-flow-svg {
    z-index: 1;
    overflow: visible;
}

.sd-flow-band {
    transform-box: fill-box;
    transform-origin: center;
    will-change: transform, opacity;
}

.sd-flow-band.band-one {
    fill: rgba(1, 64, 193, .035);
    animation: sdBandOneDrift 15s ease-in-out infinite alternate;
}

.sd-flow-band.band-two {
    fill: rgba(53, 126, 238, .042);
    animation: sdBandTwoDrift 18s ease-in-out infinite alternate;
}

.sd-flow-band.band-three {
    fill: rgba(1, 64, 193, .025);
    animation: sdBandThreeDrift 21s ease-in-out infinite alternate;
}

.sd-flow-thread {
    fill: none;
    stroke: rgba(1, 64, 193, .13);
    stroke-width: 1.35;
    vector-effect: non-scaling-stroke;
    stroke-linecap: butt;
    stroke-linejoin: bevel;
}

.sd-flow-thread.thread-two,
.sd-flow-thread.thread-four {
    stroke: rgba(1, 64, 193, .075);
}

.sd-flow-runner {
    fill: none;
    stroke: rgba(1, 64, 193, .48);
    stroke-width: 2.1;
    vector-effect: non-scaling-stroke;
    stroke-linecap: butt;
    stroke-linejoin: bevel;
    stroke-dasharray: 8 92;
    will-change: stroke-dashoffset, opacity;
}

.sd-flow-runner.runner-one {
    animation: sdRunnerForward 8.5s linear infinite;
}

.sd-flow-runner.runner-two {
    opacity: .72;
    animation: sdRunnerReverse 11s linear infinite;
}

.sd-flow-runner.runner-three {
    opacity: .54;
    animation: sdRunnerForward 14s linear infinite -5s;
}

.sd-slash-bank {
    fill: none;
    stroke: rgba(1, 64, 193, .13);
    stroke-width: 1.25;
    vector-effect: non-scaling-stroke;
    stroke-linecap: butt;
    animation: sdSlashDrift 10s ease-in-out infinite alternate;
}

.sd-slash-bank.slash-right {
    stroke: rgba(1, 64, 193, .09);
    animation-delay: -5s;
}

.sd-hero .container {
    position: relative;
    z-index: 3;
}

@keyframes sdFlowFieldDrift {
    from {
        background-position: 0 0;
    }

    to {
        background-position: 260px 0;
    }
}

@keyframes sdBandOneDrift {
    from {
        transform: translate3d(-1.4%, -1%, 0) skewX(-1deg);
        opacity: .72;
    }

    to {
        transform: translate3d(1.8%, 1.4%, 0) skewX(1.6deg);
        opacity: 1;
    }
}

@keyframes sdBandTwoDrift {
    from {
        transform: translate3d(1.6%, 1.2%, 0) skewX(1deg);
        opacity: .82;
    }

    to {
        transform: translate3d(-1.8%, -1.2%, 0) skewX(-1.4deg);
        opacity: 1;
    }
}

@keyframes sdBandThreeDrift {
    from {
        transform: translate3d(-1%, .6%, 0);
        opacity: .62;
    }

    to {
        transform: translate3d(1.2%, -.8%, 0);
        opacity: .92;
    }
}

@keyframes sdRunnerForward {
    from {
        stroke-dashoffset: 0;
    }

    to {
        stroke-dashoffset: -100;
    }
}

@keyframes sdRunnerReverse {
    from {
        stroke-dashoffset: -100;
    }

    to {
        stroke-dashoffset: 0;
    }
}

@keyframes sdSlashDrift {
    from {
        transform: translate3d(0, -14px, 0);
        opacity: .42;
    }

    to {
        transform: translate3d(0, 18px, 0);
        opacity: .9;
    }
}

@media (max-width: 1080px) {
    .sd-hero::after {
        width: 94vw;
    }

    .sd-flow-svg {
        width: 118%;
        left: -9%;
    }
}

@media (max-width: 680px) {
    .sd-hero {
        min-height: auto;
        background: linear-gradient(154deg, #ffffff 0%, #f2f7ff 55%, #ffffff 100%);
    }

    .sd-hero::before {
        opacity: .38;
        background-size: 210px 100%;
    }

    .sd-hero::after {
        width: 100%;
        background: linear-gradient(90deg,
                rgba(255, 255, 255, .70),
                rgba(255, 255, 255, .95) 24%,
                rgba(255, 255, 255, .96) 76%,
                rgba(255, 255, 255, .70));
    }

    .sd-flow-svg {
        width: 150%;
        left: -25%;
        opacity: .76;
    }

    .sd-flow-canvas {
        opacity: .72;
    }

    .sd-slash-bank {
        display: none;
    }
}

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

    .sd-hero::before,
    .sd-flow-band,
    .sd-flow-runner,
    .sd-slash-bank {
        animation: none !important;
    }

    .sd-flow-canvas {
        opacity: .52;
    }
}



/* =========================================================
           CONTACT PAGE
        ========================================================= */
.contact-page {
    overflow: hidden;
    background: #fff;
}

.contact-hero {
    min-height: 92vh;
    padding: 150px 0 88px;
    display: flex;
    align-items: center;
    overflow: hidden;
    isolation: isolate;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .94), rgba(244, 248, 255, .92)),
        linear-gradient(120deg, #fff 0%, #edf4ff 54%, #fff 100%);
}

.contact-hero::before {
    content: "";
    position: absolute;
    inset: -18%;
    z-index: -3;
    background:
        conic-gradient(from 215deg at 72% 44%, transparent 0 20%, rgba(1, 64, 193, .09) 24%, transparent 31% 100%),
        linear-gradient(115deg, transparent 10%, rgba(1, 64, 193, .045) 44%, transparent 70%);
    animation: contactHeroSweep 14s ease-in-out infinite alternate;
    pointer-events: none;
}

.contact-hero::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(1, 64, 193, .22), transparent);
}

.contact-hero-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: .93fr 1.07fr;
    gap: 72px;
    align-items: center;
}

.contact-hero-copy {
    max-width: 650px;
}

.contact-hero-copy h1 {
    margin: 15px 0 22px;
    color: var(--navy);
    font-size: clamp(40px, 5vw, 74px);
    line-height: .98;
    letter-spacing: -2.8px;
}

.contact-hero-copy h1 span {
    display: block;
    color: var(--blue);
}

.contact-hero-copy>p {
    max-width: 610px;
    color: #566980;
    font-size: 17px;
    line-height: 1.86;
}

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

.contact-hero-meta {
    margin-top: 28px;
    display: flex;
    flex-wrap: wrap;
    gap: 18px 26px;
    color: #607188;
    font-size: 13px;
    font-weight: 800;
}

.contact-hero-meta span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.contact-hero-meta i {
    color: var(--blue);
}

.contact-signal-art {
    position: relative;
    min-height: 560px;
    overflow: hidden;
}

.contact-signal-art::before {
    content: "";
    position: absolute;
    inset: 11% 7%;
    background: linear-gradient(135deg, rgba(255, 255, 255, .9), rgba(233, 242, 255, .62));
    clip-path: polygon(8% 14%, 82% 2%, 98% 34%, 87% 88%, 31% 99%, 2% 68%);
    border: 1px solid rgba(1, 64, 193, .12);
    box-shadow: 0 34px 100px rgba(7, 20, 39, .10);
}

.contact-signal-svg {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.contact-signal-path {
    fill: none;
    stroke: rgba(1, 64, 193, .20);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-dasharray: 9 13;
    animation: contactPathFlow 13s linear infinite;
}

.contact-signal-path.secondary {
    stroke: rgba(1, 64, 193, .11);
    animation-duration: 18s;
    animation-direction: reverse;
}

.contact-envelope {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 5;
    width: 210px;
    height: 142px;
    transform: translate(-50%, -50%) rotate(-4deg);
    filter: drop-shadow(0 28px 40px rgba(1, 64, 193, .18));
    animation: contactEnvelopeFloat 7s ease-in-out infinite;
}

.contact-envelope svg {
    width: 100%;
    height: 100%;
}

.contact-channel-label {
    position: absolute;
    z-index: 6;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--navy);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .2px;
    animation: contactLabelFloat 7s ease-in-out infinite;
}

.contact-channel-label i {
    color: var(--blue);
}

.contact-channel-label.email {
    left: 8%;
    top: 20%;
}

.contact-channel-label.call {
    right: 8%;
    top: 24%;
    animation-delay: -2.2s;
}

.contact-channel-label.visit {
    left: 13%;
    bottom: 18%;
    animation-delay: -4.4s;
}

.contact-channel-label.whatsapp {
    right: 9%;
    bottom: 16%;
    animation-delay: -5.7s;
}

.contact-channels {
    padding: 92px 0;
    background: #fff;
}

.contact-channel-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.contact-channel-card {
    min-height: 230px;
    padding: 28px;
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(1, 64, 193, .13);
    border-radius: 28px;
    background: linear-gradient(145deg, #fff, #f8fbff);
    box-shadow: 0 18px 48px rgba(7, 20, 39, .065);
    transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}

.contact-channel-card:hover {
    transform: translateY(-8px);
    border-color: rgba(1, 64, 193, .38);
    box-shadow: 0 28px 70px rgba(7, 20, 39, .11);
}

.contact-channel-icon {
    width: 58px;
    height: 58px;
    margin-bottom: 24px;
    display: grid;
    place-items: center;
    border-radius: 19px;
    color: #fff;
    background: linear-gradient(135deg, var(--blue), #0a65e8);
    box-shadow: 0 16px 34px rgba(1, 64, 193, .23);
    font-size: 20px;
}

.contact-channel-card h3 {
    margin-bottom: 9px;
    color: var(--navy);
    font-size: 20px;
}

.contact-channel-card p {
    flex: 1;
    color: var(--muted);
    font-size: 13.5px;
    line-height: 1.65;
}

.contact-channel-link {
    margin-top: 20px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--blue);
    font-size: 13px;
    font-weight: 950;
}

.contact-main {
    padding: 104px 0;
    overflow: hidden;
    background:
        linear-gradient(180deg, #f4f8ff 0%, #fff 100%);
}

.contact-main-grid {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 26px;
    align-items: stretch;
}

.contact-form-panel,
.contact-location-panel {
    border: 1px solid rgba(1, 64, 193, .13);
    border-radius: 34px;
    background: #fff;
    box-shadow: 0 24px 68px rgba(7, 20, 39, .09);
    overflow: hidden;
}

.contact-form-panel {
    padding: 40px;
}

.contact-panel-label {
    display: inline-flex;
    margin-bottom: 13px;
    color: var(--blue);
    font-size: 11px;
    font-weight: 950;
    letter-spacing: .75px;
    text-transform: uppercase;
}

.contact-form-panel h2,
.contact-location-copy h2 {
    color: var(--navy);
    font-size: clamp(30px, 3.8vw, 50px);
    line-height: 1.05;
    letter-spacing: -1.4px;
}

.contact-form-intro {
    margin: 14px 0 26px;
    color: var(--muted);
    line-height: 1.75;
}

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

.contact-field-group {
    display: grid;
    gap: 7px;
}

.contact-field-group.full,
.contact-consent,
.contact-form .form-note,
.contact-form button {
    grid-column: 1 / -1;
}

.contact-field-group label {
    color: var(--navy);
    font-size: 12px;
    font-weight: 900;
}

.contact-field {
    width: 100%;
    min-height: 52px;
    padding: 13px 15px;
    border: 1px solid rgba(1, 64, 193, .15);
    border-radius: 15px;
    background: #f8fbff;
    color: var(--ink);
    outline: none;
    transition: border-color .22s ease, box-shadow .22s ease, background .22s ease;
}

.contact-field:focus {
    border-color: rgba(1, 64, 193, .52);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(1, 64, 193, .07);
}

textarea.contact-field {
    min-height: 132px;
    resize: vertical;
}

.contact-consent {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.55;
}

.contact-consent input {
    margin-top: 3px;
    accent-color: var(--blue);
}

.contact-form .form-note {
    color: #08753d;
    background: #ecfff4;
    border: 1px solid #bcebd0;
}

.contact-location-panel {
    display: grid;
    grid-template-rows: minmax(350px, 1fr) auto;
}

.contact-map {
    min-height: 390px;
    background: #eaf2ff;
}

.contact-map iframe {
    width: 100%;
    height: 100%;
    min-height: 390px;
    display: block;
    border: 0;
}

.contact-location-copy {
    padding: 30px;
}

.contact-location-copy h2 {
    font-size: clamp(26px, 3vw, 38px);
}

.contact-address {
    margin-top: 14px;
    color: var(--muted);
    line-height: 1.75;
}

.contact-location-actions {
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.contact-next {
    padding: 100px 0;
    background: #fff;
}

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

.contact-next-step {
    position: relative;
    padding: 30px;
    border-left: 3px solid var(--blue);
    background: linear-gradient(90deg, rgba(1, 64, 193, .045), transparent 70%);
}

.contact-next-step span {
    display: block;
    margin-bottom: 18px;
    color: rgba(1, 64, 193, .20);
    font-size: 44px;
    font-weight: 950;
    line-height: 1;
}

.contact-next-step h3 {
    margin-bottom: 9px;
    color: var(--navy);
    font-size: 21px;
}

.contact-next-step p {
    color: var(--muted);
    font-size: 14px;
    line-height: 1.72;
}

.contact-faq {
    padding: 100px 0;
    background: linear-gradient(180deg, #f6faff, #fff);
}

.contact-faq-grid {
    width: min(900px, 100%);
    margin: auto;
    display: grid;
    gap: 12px;
}

.contact-faq details {
    border: 1px solid rgba(1, 64, 193, .13);
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 12px 32px rgba(7, 20, 39, .05);
    overflow: hidden;
}

.contact-faq summary {
    min-height: 68px;
    padding: 20px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    color: var(--navy);
    font-weight: 900;
    cursor: pointer;
    list-style: none;
}

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

.contact-faq summary::after {
    content: "+";
    flex: 0 0 auto;
    color: var(--blue);
    font-size: 24px;
}

.contact-faq details[open] summary::after {
    content: "−";
}

.contact-faq details p {
    padding: 0 22px 22px;
    color: var(--muted);
    line-height: 1.75;
}

@keyframes contactHeroSweep {
    from {
        transform: translate3d(-2%, -1%, 0) rotate(-2deg);
    }

    to {
        transform: translate3d(3%, 2%, 0) rotate(2deg);
    }
}

@keyframes contactPathFlow {
    to {
        stroke-dashoffset: -88;
    }
}

@keyframes contactEnvelopeFloat {

    0%,
    100% {
        transform: translate(-50%, -50%) rotate(-4deg);
    }

    50% {
        transform: translate(-50%, calc(-50% - 14px)) rotate(2deg);
    }
}

@keyframes contactLabelFloat {

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

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

@media (max-width: 1080px) {

    .contact-hero-grid,
    .contact-main-grid {
        grid-template-columns: 1fr;
    }

    .contact-signal-art {
        min-height: 480px;
    }

    .contact-channel-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 680px) {
    .contact-hero {
        min-height: auto;
        padding: 112px 0 66px;
    }

    .contact-hero-grid {
        gap: 34px;
    }

    .contact-hero-copy h1 {
        font-size: clamp(34px, 11vw, 48px);
        letter-spacing: -1.3px;
    }

    .contact-hero-copy>p {
        font-size: 15.5px;
        line-height: 1.72;
    }

    .contact-hero-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .contact-signal-art {
        min-height: 370px;
    }

    .contact-envelope {
        width: 155px;
        height: 106px;
    }

    .contact-channel-label {
        font-size: 10px;
    }

    .contact-channel-label.email {
        left: 2%;
        top: 18%;
    }

    .contact-channel-label.call {
        right: 2%;
        top: 22%;
    }

    .contact-channel-label.visit {
        left: 4%;
        bottom: 16%;
    }

    .contact-channel-label.whatsapp {
        right: 2%;
        bottom: 14%;
    }

    .contact-channels,
    .contact-main,
    .contact-next,
    .contact-faq {
        padding: 72px 0;
    }

    .contact-channel-grid,
    .contact-next-grid,
    .contact-form {
        grid-template-columns: 1fr;
    }

    .contact-channel-card {
        min-height: auto;
        padding: 24px;
        border-radius: 23px;
    }

    .contact-form-panel {
        padding: 26px 18px;
        border-radius: 26px;
    }

    .contact-location-panel {
        border-radius: 26px;
    }

    .contact-map,
    .contact-map iframe {
        min-height: 310px;
    }

    .contact-location-copy {
        padding: 24px 18px;
    }

    .contact-location-actions {
        display: grid;
        grid-template-columns: 1fr;
    }
}


/* =========================================================
           OUR WORK PAGES — IT WORK + SOCIAL MEDIA WORK
        ========================================================= */
.ow-page {
    overflow: hidden;
    background: #fff;
}

.ow-hero {
    position: relative;
    min-height: 100vh;
    padding: 150px 0 92px;
    display: flex;
    align-items: center;
    overflow: hidden;
    isolation: isolate;
    background:
        radial-gradient(circle at 14% 20%, rgba(1, 64, 193, .14), transparent 30%),
        radial-gradient(circle at 86% 78%, rgba(48, 128, 255, .10), transparent 32%),
        linear-gradient(180deg, #ffffff 0%, #f3f7ff 54%, #ffffff 100%);
}

.ow-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -4;
    background-image:
        linear-gradient(rgba(1, 64, 193, .042) 1px, transparent 1px),
        linear-gradient(90deg, rgba(1, 64, 193, .042) 1px, transparent 1px);
    background-size: 74px 74px;
    animation: owGridDrift 28s linear infinite;
    pointer-events: none;
}

.ow-hero::after {
    content: "";
    position: absolute;
    left: -30%;
    top: 0;
    z-index: -3;
    width: 44%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(1, 64, 193, .07), transparent);
    transform: skewX(-17deg);
    animation: owLightSweep 10s ease-in-out infinite;
    pointer-events: none;
}

.ow-flow-bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: .82;
}

.ow-flow-bg path {
    fill: none;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}

.ow-flow-bg .ow-path-base {
    stroke: rgba(1, 64, 193, .10);
    stroke-width: 1.2;
}

.ow-flow-bg .ow-path-moving {
    stroke: rgba(1, 64, 193, .34);
    stroke-width: 1.5;
    stroke-dasharray: 22 34;
    animation: owPathTravel 12s linear infinite;
}

.ow-flow-bg .ow-path-moving.slow {
    stroke: rgba(1, 64, 193, .22);
    stroke-dasharray: 12 42;
    animation-duration: 18s;
    animation-direction: reverse;
}

.ow-hero .container {
    position: relative;
    z-index: 3;
}

.ow-hero-content {
    width: min(920px, 100%);
    margin: auto;
    text-align: center;
}

.ow-hero-content h1 {
    margin: 15px 0 23px;
    color: var(--navy);
    font-size: clamp(40px, 5vw, 74px);
    line-height: .98;
    letter-spacing: -2.8px;
}

.ow-hero-content h1 span {
    color: var(--blue);
}

.ow-hero-content>p {
    width: min(760px, 100%);
    margin: 0 auto;
    color: #566980;
    font-size: 18px;
    line-height: 1.85;
}

.ow-hero-actions {
    margin-top: 31px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 13px;
}

.ow-projects {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 8% 12%, rgba(1, 64, 193, .065), transparent 25%),
        radial-gradient(circle at 92% 84%, rgba(1, 64, 193, .055), transparent 27%),
        linear-gradient(180deg, #f6f9ff 0%, #ffffff 100%);
}

.ow-project-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;
}

.ow-project-card {
    min-width: 0;
    overflow: hidden;
    border: 1px solid rgba(1, 64, 193, .14);
    border-radius: 28px;
    background: #fff;
    box-shadow: 0 18px 48px rgba(7, 20, 39, .075);
    transition: transform .32s ease, border-color .32s ease, box-shadow .32s ease;
}

.ow-project-card:hover {
    transform: translateY(-9px);
    border-color: rgba(1, 64, 193, .38);
    box-shadow: 0 30px 76px rgba(7, 20, 39, .13);
}

.ow-project-media {
    position: relative;
    height: 225px;
    display: grid;
    place-items: center;
    overflow: hidden;
    background:
        radial-gradient(circle at 26% 20%, rgba(255, 255, 255, .22), transparent 26%),
        linear-gradient(135deg, #071427 0%, #0140c1 100%);
}

.ow-project-media::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(180deg, transparent 55%, rgba(7, 20, 39, .34));
    pointer-events: none;
}

.ow-project-media img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .48s ease;
}

.ow-project-card:hover .ow-project-media img {
    transform: scale(1.055);
}

.ow-project-fallback {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: grid;
    place-items: center;
    color: rgba(255, 255, 255, .88);
    font-size: 46px;
}

.ow-project-media.image-missing img {
    display: none;
}

.ow-project-body {
    padding: 23px 22px 25px;
}

.ow-project-type {
    display: block;
    margin-bottom: 9px;
    color: var(--blue);
    font-size: 11px;
    line-height: 1.45;
    font-weight: 950;
    letter-spacing: .55px;
    text-transform: uppercase;
}

.ow-project-body h3 {
    color: var(--navy);
    font-size: 21px;
    line-height: 1.2;
}


.ow-project-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 9px;
}

.ow-project-meta .ow-project-type {
    margin-bottom: 0;
}

.ow-project-category {
    flex: 0 0 auto;
    max-width: 48%;
    overflow: hidden;
    padding: 6px 9px;
    border: 1px solid rgba(1, 64, 193, .13);
    border-radius: 999px;
    background: rgba(1, 64, 193, .055);
    color: #50657e;
    font-size: 10px;
    font-weight: 850;
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ow-project-live {
    width: 100%;
    margin-top: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 11px 15px;
    border: 1px solid rgba(1, 64, 193, .18);
    border-radius: 13px;
    background: rgba(1, 64, 193, .055);
    color: var(--blue);
    font-size: 13px;
    font-weight: 900;
    text-decoration: none;
    transition: background .25s ease, color .25s ease, transform .25s ease;
}

.ow-project-live:hover {
    background: var(--blue);
    color: #fff;
    transform: translateY(-2px);
}

.ow-project-filter {
    margin: 0 0 30px;
    padding: 18px;
    display: grid;
    grid-template-columns: minmax(210px, 1.35fr) repeat(2, minmax(165px, .8fr)) auto;
    gap: 13px;
    align-items: end;
    border: 1px solid rgba(1, 64, 193, .13);
    border-radius: 22px;
    background: rgba(255, 255, 255, .9);
    box-shadow: 0 16px 42px rgba(7, 20, 39, .06);
    backdrop-filter: blur(12px);
}

.ow-filter-field {
    min-width: 0;
}

.ow-filter-field label {
    display: block;
    margin: 0 0 7px;
    color: #596b81;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .45px;
    text-transform: uppercase;
}

.ow-filter-field input,
.ow-filter-field select {
    width: 100%;
    height: 46px;
    padding: 0 13px;
    border: 1px solid rgba(7, 20, 39, .14);
    border-radius: 13px;
    outline: none;
    background: #fff;
    color: var(--navy);
    font: inherit;
    font-size: 14px;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.ow-filter-field input:focus,
.ow-filter-field select:focus {
    border-color: rgba(1, 64, 193, .55);
    box-shadow: 0 0 0 4px rgba(1, 64, 193, .08);
}

.ow-filter-reset {
    height: 46px;
    padding: 0 17px;
    border: 1px solid rgba(1, 64, 193, .18);
    border-radius: 13px;
    background: #f4f7fc;
    color: var(--navy);
    font-weight: 900;
    cursor: pointer;
    transition: .22s ease;
}

.ow-filter-reset:hover {
    border-color: var(--blue);
    color: var(--blue);
}

.ow-project-result-line {
    grid-column: 1 / -1;
    margin-top: -2px;
    color: #6a7b90;
    font-size: 13px;
    font-weight: 750;
}

.ow-project-empty,
.ow-project-loading {
    grid-column: 1 / -1;
    min-height: 180px;
    display: grid;
    place-items: center;
    padding: 28px;
    border: 1px dashed rgba(1, 64, 193, .23);
    border-radius: 22px;
    background: rgba(255, 255, 255, .72);
    color: #63758b;
    text-align: center;
    line-height: 1.7;
}

@media (max-width: 900px) {
    .ow-project-filter {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 620px) {
    .ow-project-filter {
        grid-template-columns: 1fr;
        padding: 15px;
    }

    .ow-project-result-line {
        grid-column: auto;
    }
}

.ow-cta {
    background: #fff;
}

.ow-cta-box {
    position: relative;
    padding: 64px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 34px;
    align-items: center;
    overflow: hidden;
    border-radius: 44px;
    color: #fff;
    background:
        radial-gradient(circle at 88% 18%, rgba(1, 64, 193, .34), transparent 34%),
        linear-gradient(135deg, var(--navy), #0b1d3c);
    box-shadow: 0 30px 90px rgba(7, 20, 39, .19);
}

.ow-cta-box::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
    background-size: 50px 50px;
    opacity: .72;
}

.ow-cta-box::after {
    content: "";
    position: absolute;
    width: 340px;
    height: 340px;
    right: -120px;
    bottom: -190px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .10);
    box-shadow: 0 0 0 36px rgba(255, 255, 255, .025);
    animation: owCtaPulse 8s ease-in-out infinite;
}

.ow-cta-content,
.ow-cta-actions {
    position: relative;
    z-index: 2;
}

.ow-cta-content h2 {
    max-width: 760px;
    font-size: clamp(34px, 4.4vw, 62px);
    line-height: 1.04;
    letter-spacing: -1.5px;
}

.ow-cta-content p {
    max-width: 690px;
    margin-top: 15px;
    color: #c9d8ef;
    line-height: 1.8;
}

.ow-cta-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

@keyframes owGridDrift {
    to {
        background-position: 74px 74px, 74px 74px;
    }
}

@keyframes owLightSweep {

    0%,
    16% {
        left: -42%;
        opacity: 0;
    }

    36% {
        opacity: 1;
    }

    65%,
    100% {
        left: 108%;
        opacity: 0;
    }
}

@keyframes owPathTravel {
    to {
        stroke-dashoffset: -220;
    }
}

@keyframes owCtaPulse {

    0%,
    100% {
        transform: scale(1);
        opacity: .45;
    }

    50% {
        transform: scale(1.1);
        opacity: .9;
    }
}

@media (max-width: 1080px) {
    .ow-project-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ow-cta-box {
        grid-template-columns: 1fr;
    }

    .ow-cta-actions {
        flex-direction: row;
        flex-wrap: wrap;
    }
}

@media (max-width: 680px) {
    .ow-hero {
        min-height: auto;
        padding: 116px 0 72px;
    }

    .ow-hero-content h1 {
        font-size: clamp(34px, 10.8vw, 48px);
        line-height: 1.04;
        letter-spacing: -1.2px;
    }

    .ow-hero-content>p {
        font-size: 15.5px;
        line-height: 1.75;
    }

    .ow-hero-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .ow-project-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .ow-project-card {
        border-radius: 24px;
    }

    .ow-project-media {
        height: 230px;
    }

    .ow-cta-box {
        padding: 32px 21px;
        gap: 25px;
        border-radius: 30px;
    }

    .ow-cta-content h2 {
        font-size: clamp(30px, 9vw, 43px);
        letter-spacing: -1px;
    }

    .ow-cta-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .ow-cta-actions .btn {
        width: 100%;
    }
}



/* =========================================================
           NEW SILENT HERO ANIMATIONS — CONTACT + OUR WORK PAGES
        ========================================================= */

/* ---------------- CONTACT HERO: CONNECTED COMMUNICATION HUB ---------------- */
.contact-hero.contact-hero-new {
    min-height: 100vh;
    background:
        radial-gradient(circle at 14% 18%, rgba(1, 64, 193, .13), transparent 30%),
        radial-gradient(circle at 84% 78%, rgba(42, 123, 255, .10), transparent 32%),
        linear-gradient(180deg, #ffffff 0%, #f3f7ff 56%, #ffffff 100%);
}

.contact-hero.contact-hero-new::before {
    inset: 0;
    background-image:
        linear-gradient(rgba(1, 64, 193, .038) 1px, transparent 1px),
        linear-gradient(90deg, rgba(1, 64, 193, .038) 1px, transparent 1px);
    background-size: 72px 72px;
    animation: contactNewGridMove 26s linear infinite;
    opacity: .72;
}

.contact-hero.contact-hero-new::after {
    left: -30%;
    right: auto;
    top: 0;
    bottom: auto;
    width: 46%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(1, 64, 193, .065), transparent);
    transform: skewX(-18deg);
    animation: contactNewSweep 10s ease-in-out infinite;
    opacity: 1;
}

.contact-connect-stage {
    min-height: 570px;
    overflow: hidden;
    border: 1px solid rgba(1, 64, 193, .13);
    border-radius: 46px;
    background:
        radial-gradient(circle at 50% 48%, rgba(1, 64, 193, .10), transparent 29%),
        linear-gradient(145deg, rgba(255, 255, 255, .84), rgba(233, 242, 255, .58));
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, .72),
        0 34px 100px rgba(7, 20, 39, .10);
}

.contact-connect-stage::before {
    inset: 9%;
    clip-path: none;
    border-radius: 42% 58% 46% 54% / 55% 42% 58% 45%;
    border: 1px solid rgba(1, 64, 193, .10);
    background:
        radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .74), rgba(231, 240, 255, .32) 62%, transparent 63%);
    box-shadow: 0 0 0 35px rgba(1, 64, 193, .025), 0 0 0 72px rgba(1, 64, 193, .018);
    animation: contactBlobMorph 12s ease-in-out infinite alternate;
}

.contact-connect-stage::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(120deg, transparent 15%, rgba(255, 255, 255, .72) 48%, transparent 75%);
    transform: translateX(-120%);
    animation: contactStageShine 9s ease-in-out infinite;
    pointer-events: none;
}

.contact-route-svg {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.contact-route-line {
    fill: none;
    stroke: rgba(1, 64, 193, .26);
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-dasharray: 11 14;
    animation: contactRouteDash 13s linear infinite;
}

.contact-route-line.soft {
    stroke: rgba(1, 64, 193, .14);
    animation-duration: 17s;
    animation-direction: reverse;
}

.contact-route-pulse {
    fill: #0140c1;
    filter: drop-shadow(0 0 10px rgba(1, 64, 193, .62));
}

.contact-route-pulse.muted {
    fill: #5b9cff;
    opacity: .72;
}

.contact-connect-hub {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 6;
    width: 132px;
    height: 132px;
    transform: translate(-50%, -50%);
    display: grid;
    place-items: center;
}

.contact-hub-core {
    position: relative;
    z-index: 3;
    width: 88px;
    height: 88px;
    display: grid;
    place-items: center;
    border-radius: 28px;
    color: #fff;
    background: linear-gradient(135deg, var(--blue), #0a65e8);
    box-shadow: 0 24px 58px rgba(1, 64, 193, .30);
    font-size: 27px;
    transform: rotate(-7deg);
    animation: contactHubFloat 6.8s ease-in-out infinite;
}

.contact-hub-ring {
    position: absolute;
    inset: 8px;
    border: 1px solid rgba(1, 64, 193, .20);
    border-radius: 38px;
    animation: contactHubRing 4.8s ease-out infinite;
}

.contact-hub-ring.ring-two {
    animation-delay: -2.4s;
}

.contact-connect-card {
    position: absolute;
    z-index: 5;
    min-width: 132px;
    padding: 15px 17px;
    display: flex;
    align-items: center;
    gap: 11px;
    border: 1px solid rgba(1, 64, 193, .14);
    border-radius: 19px;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 18px 44px rgba(7, 20, 39, .10);
    color: var(--navy);
    font-size: 12px;
    font-weight: 900;
    backdrop-filter: blur(14px);
    animation: contactCardFloat 7.5s ease-in-out infinite;
}

.contact-connect-card i {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    color: #fff;
    background: linear-gradient(135deg, var(--blue), #0a65e8);
    box-shadow: 0 10px 24px rgba(1, 64, 193, .22);
}

.contact-connect-card.email-card {
    left: 5%;
    top: 12%;
}

.contact-connect-card.call-card {
    right: 5%;
    top: 15%;
    animation-delay: -2s;
}

.contact-connect-card.visit-card {
    left: 7%;
    bottom: 12%;
    animation-delay: -4s;
}

.contact-connect-card.whatsapp-card {
    right: 5%;
    bottom: 11%;
    animation-delay: -5.5s;
}

/* ---------------- IT WORK HERO: DIGITAL ARCHITECTURE ---------------- */
.ow-hero.ow-hero-it {
    background:
        radial-gradient(circle at 15% 18%, rgba(1, 64, 193, .14), transparent 29%),
        radial-gradient(circle at 86% 82%, rgba(44, 126, 255, .09), transparent 31%),
        linear-gradient(180deg, #fff 0%, #f1f6ff 54%, #fff 100%);
}

.ow-hero.ow-hero-it::before {
    background-image:
        linear-gradient(rgba(1, 64, 193, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(1, 64, 193, .045) 1px, transparent 1px);
    background-size: 54px 54px;
    animation: owItGridMove 24s linear infinite;
}

.ow-it-architecture {
    position: absolute;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    overflow: hidden;
}

.ow-it-grid-layer {
    position: absolute;
    left: 50%;
    top: 52%;
    width: min(920px, 88vw);
    height: min(540px, 64vh);
    transform: translate(-50%, -50%) perspective(900px) rotateX(62deg);
    transform-origin: center;
    background-image:
        linear-gradient(rgba(1, 64, 193, .08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(1, 64, 193, .08) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(circle, #000 18%, rgba(0, 0, 0, .82) 46%, transparent 76%);
    animation: owItBlueprintShift 18s linear infinite;
    opacity: .70;
}

.ow-it-scan-line {
    position: absolute;
    left: 8%;
    right: 8%;
    top: 12%;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(1, 64, 193, .38), transparent);
    box-shadow: 0 0 24px rgba(1, 64, 193, .24);
    animation: owItScan 8s ease-in-out infinite;
}

.ow-it-panel {
    position: absolute;
    width: 185px;
    min-height: 118px;
    padding: 18px;
    display: grid;
    grid-template-columns: 42px 1fr;
    gap: 10px 12px;
    align-items: center;
    border: 1px solid rgba(1, 64, 193, .12);
    border-radius: 22px;
    background: rgba(255, 255, 255, .70);
    box-shadow: 0 20px 50px rgba(7, 20, 39, .07);
    backdrop-filter: blur(14px);
    animation: owItPanelFloat 8s ease-in-out infinite;
    opacity: .76;
}

.ow-it-panel i {
    grid-row: 1 / 4;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    color: #fff;
    background: linear-gradient(135deg, var(--blue), #0a65e8);
    box-shadow: 0 12px 26px rgba(1, 64, 193, .22);
}

.ow-it-panel span {
    height: 6px;
    border-radius: 999px;
    background: rgba(1, 64, 193, .12);
    overflow: hidden;
}

.ow-it-panel span::after {
    content: "";
    display: block;
    width: 70%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, rgba(1, 64, 193, .18), rgba(1, 64, 193, .46));
    animation: owItBarPulse 4.8s ease-in-out infinite;
}

.ow-it-panel span:nth-of-type(2)::after {
    width: 52%;
    animation-delay: -1.6s;
}

.ow-it-panel span:nth-of-type(3)::after {
    width: 82%;
    animation-delay: -3.2s;
}

.ow-it-panel.panel-one {
    left: 4%;
    top: 15%;
    transform: rotate(-4deg);
}

.ow-it-panel.panel-two {
    right: 4%;
    top: 18%;
    transform: rotate(4deg);
    animation-delay: -2s;
}

.ow-it-panel.panel-three {
    left: 6%;
    bottom: 13%;
    transform: rotate(3deg);
    animation-delay: -4s;
}

.ow-it-panel.panel-four {
    right: 5%;
    bottom: 14%;
    transform: rotate(-3deg);
    animation-delay: -6s;
}

.ow-it-rail {
    position: absolute;
    left: 7%;
    right: 7%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(1, 64, 193, .18), transparent);
}

.ow-it-rail.rail-one {
    top: 34%;
    transform: rotate(-5deg);
}

.ow-it-rail.rail-two {
    bottom: 30%;
    transform: rotate(5deg);
}

.ow-it-rail b {
    position: absolute;
    left: 0;
    top: 50%;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--blue);
    box-shadow: 0 0 18px rgba(1, 64, 193, .52);
    transform: translate(-50%, -50%);
    animation: owItPacketRun 11s linear infinite;
}

.ow-it-rail.rail-two b {
    animation-duration: 14s;
    animation-delay: -5s;
}

.ow-it-core {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 118px;
    height: 118px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(1, 64, 193, .13);
    border-radius: 38px;
    color: rgba(1, 64, 193, .18);
    background: rgba(255, 255, 255, .28);
    box-shadow: 0 0 0 28px rgba(1, 64, 193, .025), 0 0 0 64px rgba(1, 64, 193, .015);
    transform: translate(-50%, -50%) rotate(45deg);
    font-size: 34px;
    animation: owItCorePulse 7s ease-in-out infinite;
}

.ow-it-core i {
    transform: rotate(-45deg);
}

/* ---------------- SOCIAL WORK HERO: CREATIVE CONTENT FLOW ---------------- */
.ow-hero.ow-hero-social {
    background:
        radial-gradient(circle at 18% 20%, rgba(1, 64, 193, .11), transparent 30%),
        radial-gradient(circle at 82% 76%, rgba(81, 153, 255, .11), transparent 31%),
        linear-gradient(180deg, #fff 0%, #f4f8ff 55%, #fff 100%);
}

.ow-hero.ow-hero-social::before {
    background-image: radial-gradient(circle, rgba(1, 64, 193, .105) 1.15px, transparent 1.3px);
    background-size: 34px 34px;
    animation: owSocialDotsMove 22s linear infinite;
    opacity: .48;
}

.ow-social-canvas {
    position: absolute;
    inset: 0;
    z-index: -2;
    overflow: hidden;
    pointer-events: none;
}

.ow-social-routes {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: .70;
}

.ow-social-route {
    fill: none;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}

.ow-social-route.base {
    stroke: rgba(1, 64, 193, .10);
    stroke-width: 1.2;
}

.ow-social-route.moving {
    stroke: rgba(1, 64, 193, .28);
    stroke-width: 1.7;
    stroke-dasharray: 18 34;
    animation: owSocialRouteMove 13s linear infinite;
}

.ow-social-route.moving.reverse {
    animation-direction: reverse;
    animation-duration: 17s;
}

.ow-social-tile {
    position: absolute;
    width: 168px;
    min-height: 124px;
    padding: 17px;
    border: 1px solid rgba(1, 64, 193, .12);
    border-radius: 24px;
    background: rgba(255, 255, 255, .78);
    box-shadow: 0 20px 52px rgba(7, 20, 39, .08);
    backdrop-filter: blur(14px);
    animation: owSocialTileFloat 7.5s ease-in-out infinite;
    opacity: .78;
}

.ow-social-tile i {
    width: 44px;
    height: 44px;
    margin-bottom: 14px;
    display: grid;
    place-items: center;
    border-radius: 15px;
    color: #fff;
    background: linear-gradient(135deg, var(--blue), #0a65e8);
    box-shadow: 0 12px 28px rgba(1, 64, 193, .22);
}

.ow-social-tile span {
    display: block;
    height: 7px;
    margin-top: 8px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(1, 64, 193, .18), rgba(1, 64, 193, .05));
}

.ow-social-tile span:last-child {
    width: 66%;
}

.ow-social-tile.tile-one {
    left: 4%;
    top: 15%;
    transform: rotate(-6deg);
}

.ow-social-tile.tile-two {
    right: 5%;
    top: 18%;
    transform: rotate(5deg);
    animation-delay: -2s;
}

.ow-social-tile.tile-three {
    left: 7%;
    bottom: 13%;
    transform: rotate(4deg);
    animation-delay: -4s;
}

.ow-social-tile.tile-four {
    right: 6%;
    bottom: 14%;
    transform: rotate(-5deg);
    animation-delay: -6s;
}

.ow-social-frame {
    position: absolute;
    width: 270px;
    height: 180px;
    border: 1px solid rgba(1, 64, 193, .09);
    border-radius: 32px;
    background: linear-gradient(145deg, rgba(255, 255, 255, .20), rgba(1, 64, 193, .025));
    box-shadow: 0 0 0 18px rgba(1, 64, 193, .018);
    animation: owSocialFrameDrift 11s ease-in-out infinite;
    opacity: .70;
}

.ow-social-frame.frame-one {
    left: 22%;
    top: 10%;
    transform: rotate(12deg);
}

.ow-social-frame.frame-two {
    right: 20%;
    bottom: 8%;
    transform: rotate(-11deg);
    animation-delay: -5.5s;
}

.ow-social-glow {
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(720px, 80vw);
    aspect-ratio: 1;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(255, 255, 255, .86) 0%, rgba(233, 242, 255, .44) 38%, transparent 70%);
    animation: owSocialGlowPulse 9s ease-in-out infinite;
}

@keyframes contactNewGridMove {
    to {
        background-position: 72px 72px, 72px 72px;
    }
}

@keyframes contactNewSweep {

    0%,
    16% {
        left: -42%;
        opacity: 0;
    }

    38% {
        opacity: 1;
    }

    68%,
    100% {
        left: 108%;
        opacity: 0;
    }
}

@keyframes contactBlobMorph {
    0% {
        border-radius: 42% 58% 46% 54% / 55% 42% 58% 45%;
        transform: rotate(-2deg) scale(1);
    }

    100% {
        border-radius: 56% 44% 58% 42% / 43% 57% 45% 55%;
        transform: rotate(3deg) scale(1.04);
    }
}

@keyframes contactStageShine {

    0%,
    18% {
        transform: translateX(-120%);
        opacity: 0;
    }

    42% {
        opacity: .72;
    }

    72%,
    100% {
        transform: translateX(120%);
        opacity: 0;
    }
}

@keyframes contactRouteDash {
    to {
        stroke-dashoffset: -240;
    }
}

@keyframes contactHubFloat {

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

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

@keyframes contactHubRing {
    0% {
        transform: scale(.66);
        opacity: .70;
    }

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

@keyframes contactCardFloat {

    0%,
    100% {
        translate: 0 0;
    }

    50% {
        translate: 0 -10px;
    }
}

@keyframes owItGridMove {
    to {
        background-position: 54px 54px, 54px 54px;
    }
}

@keyframes owItBlueprintShift {
    to {
        background-position: 48px 48px, 48px 48px;
    }
}

@keyframes owItScan {

    0%,
    100% {
        top: 12%;
        opacity: 0;
    }

    20% {
        opacity: .72;
    }

    80% {
        opacity: .72;
    }

    100% {
        top: 88%;
        opacity: 0;
    }
}

@keyframes owItPanelFloat {

    0%,
    100% {
        translate: 0 0;
    }

    50% {
        translate: 0 -12px;
    }
}

@keyframes owItBarPulse {

    0%,
    100% {
        opacity: .48;
        transform: scaleX(.90);
        transform-origin: left;
    }

    50% {
        opacity: 1;
        transform: scaleX(1);
    }
}

@keyframes owItPacketRun {
    from {
        left: 0%;
    }

    to {
        left: 100%;
    }
}

@keyframes owItCorePulse {

    0%,
    100% {
        transform: translate(-50%, -50%) rotate(45deg) scale(1);
    }

    50% {
        transform: translate(-50%, -50%) rotate(45deg) scale(1.06);
    }
}

@keyframes owSocialDotsMove {
    to {
        background-position: 34px 34px;
    }
}

@keyframes owSocialRouteMove {
    to {
        stroke-dashoffset: -230;
    }
}

@keyframes owSocialTileFloat {

    0%,
    100% {
        translate: 0 0;
    }

    50% {
        translate: 0 -13px;
    }
}

@keyframes owSocialFrameDrift {

    0%,
    100% {
        translate: 0 0;
    }

    50% {
        translate: 18px -16px;
    }
}

@keyframes owSocialGlowPulse {

    0%,
    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: .72;
    }

    50% {
        transform: translate(-50%, -50%) scale(1.07);
        opacity: 1;
    }
}

@media (max-width: 1080px) {

    .ow-it-panel,
    .ow-social-tile {
        opacity: .50;
        transform: scale(.88) !important;
    }

    .contact-connect-stage {
        min-height: 520px;
    }
}

@media (max-width: 680px) {
    .contact-hero.contact-hero-new {
        min-height: auto;
        padding: 112px 0 70px;
    }

    .contact-connect-stage {
        min-height: 420px;
        border-radius: 30px;
    }

    .contact-connect-hub {
        width: 106px;
        height: 106px;
    }

    .contact-hub-core {
        width: 72px;
        height: 72px;
        border-radius: 23px;
        font-size: 22px;
    }

    .contact-connect-card {
        min-width: 104px;
        padding: 11px 12px;
        gap: 8px;
        border-radius: 15px;
        font-size: 10px;
    }

    .contact-connect-card i {
        width: 29px;
        height: 29px;
        border-radius: 9px;
    }

    .contact-connect-card.email-card {
        left: 3%;
        top: 10%;
    }

    .contact-connect-card.call-card {
        right: 3%;
        top: 12%;
    }

    .contact-connect-card.visit-card {
        left: 4%;
        bottom: 10%;
    }

    .contact-connect-card.whatsapp-card {
        right: 3%;
        bottom: 9%;
    }

    .ow-it-panel,
    .ow-social-tile,
    .ow-social-frame,
    .ow-it-rail {
        display: none;
    }

    .ow-it-core {
        width: 88px;
        height: 88px;
        border-radius: 28px;
        opacity: .54;
    }

    .ow-it-grid-layer {
        width: 110vw;
        height: 54vh;
        opacity: .48;
    }

    .ow-social-glow {
        width: 110vw;
        opacity: .72;
    }

    .ow-social-routes {
        width: 145%;
        left: -22%;
    }
}

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

    .contact-hero.contact-hero-new::before,
    .contact-hero.contact-hero-new::after,
    .contact-connect-stage::before,
    .contact-connect-stage::after,
    .contact-route-line,
    .contact-connect-card,
    .contact-hub-core,
    .contact-hub-ring,
    .ow-it-grid-layer,
    .ow-it-scan-line,
    .ow-it-panel,
    .ow-it-rail b,
    .ow-it-core,
    .ow-social-route,
    .ow-social-tile,
    .ow-social-frame,
    .ow-social-glow {
        animation: none !important;
    }
}


/* ===== Standalone page + unified SMTP forms ===== */
.contact-form .form-note {
    display: none;
    grid-column: 1 / -1;
    padding: 13px 15px;
    border-radius: 14px;
    font-weight: 750;
}

.contact-form .form-note.is-visible {
    display: block;
}

.contact-form .form-note.is-success {
    color: #08753d;
    background: #ecfff4;
    border: 1px solid #bcebd0;
}

.contact-form .form-note.is-error {
    color: #9f1c1c;
    background: #fff1f1;
    border: 1px solid #f0bcbc;
}

.homepage-contact-form {
    background: rgba(255, 255, 255, .09);
    border: 1px solid rgba(255, 255, 255, .16);
    padding: 20px;
    border-radius: 22px;
}

.homepage-contact-form label {
    color: #eef5ff;
}

.homepage-contact-form .contact-field {
    background: #fff;
    color: #101828;
}

.modal-card {
    width: min(760px, calc(100% - 28px));
    max-height: calc(100vh - 34px);
    overflow: auto;
    scrollbar-width: none;
}

.modal-body.contact-form {
    padding: 24px;
}

.modal-body.contact-form label {
    color: var(--ink);
}

.modal-body.contact-form .contact-consent {
    grid-column: 1 / -1;
}

.enquiry-honeypot {
    position: absolute !important;
    left: -10000px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}

@media (max-width: 680px) {
    .modal-body.contact-form {
        grid-template-columns: 1fr;
        padding: 18px;
    }

    .homepage-contact-form {
        padding: 16px;
    }
}

/* ================= REAL CLIENT LOGOS ================= */
.logo-track {
    animation-duration: 48s;
}

.logo-track.reverse {
    animation-duration: 52s;
}

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

.logo-box {
    overflow: hidden;
    text-decoration: none;
}

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

.logo-box.is-dark-logo {
    background: #071427;
    border-color: rgba(255, 255, 255, .14);
}

.client-marquee-action {
    display: flex;
    justify-content: center;
    margin-top: 2rem;
}

.oc-logo-card.is-dark-logo {
    background: #071427;
    border-color: rgba(1, 64, 193, .34);
}

.oc-logo-card.is-dark-logo::before {
    background: linear-gradient(135deg, rgba(1, 64, 193, .26), transparent 54%, rgba(255, 255, 255, .05));
}

.oc-logo-card.is-dark-logo .oc-logo-number {
    color: rgba(255, 255, 255, .16);
}

.oc-panel-head>p {
    margin: 0;
    color: var(--muted);
    font-size: .86rem;
    font-weight: 800;
}

@media (max-width: 680px) {
    .logo-box {
        width: 152px;
        height: 78px;
        padding: 12px;
        border-radius: 17px;
    }

    .logo-track {
        gap: 12px;
        animation-duration: 38s;
    }

    .logo-track.reverse {
        animation-duration: 42s;
    }

    .client-marquee-action {
        margin-top: 1.4rem;
    }
}

/* ================= HOME PAGE ENHANCEMENTS ================= */
.hero-empty {
    min-height: 540px;
    border: none;
    background: transparent;
    box-shadow: none;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
}

.hero-empty::before,
.hero-empty::after {
    display: none;
    content: none;
}

.hero-artwork {
    position: relative;
    width: 100%;
    min-height: 540px;
}

.hero-art-card {
    position: absolute;
    border: 1px solid rgba(1, 64, 193, .14);
    background: rgba(255, 255, 255, .94);
    border-radius: 30px;
    box-shadow: 0 28px 70px rgba(7, 20, 39, .12);
    backdrop-filter: blur(8px);
}

.hero-art-dashboard {
    inset: 48px 42px 74px 36px;
    padding: 28px;
    z-index: 2;
}

.hero-art-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 20px;
}

.hero-art-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border-radius: 999px;
    background: rgba(1, 64, 193, .08);
    color: var(--blue);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .25px;
    text-transform: uppercase;
}

.hero-art-badge {
    color: var(--navy);
    font-weight: 900;
    font-size: 13px;
}

.hero-art-dashboard h3 {
    color: var(--navy);
    font-size: clamp(24px, 2.2vw, 34px);
    line-height: 1.14;
    margin-bottom: 24px;
    max-width: 420px;
}

.hero-art-bars {
    display: grid;
    gap: 12px;
    margin-bottom: 24px;
}

.hero-art-bars span {
    position: relative;
    display: block;
    height: 12px;
    border-radius: 999px;
    background: #edf3fb;
    overflow: hidden;
}

.hero-art-bars span::after {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--w);
    border-radius: inherit;
    background: linear-gradient(90deg, var(--blue), #5a88ff);
}

.hero-art-mini-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.hero-art-mini-grid div {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 15px 16px;
    border-radius: 18px;
    background: #f7faff;
    color: var(--navy);
    font-weight: 800;
    box-shadow: inset 0 0 0 1px rgba(1, 64, 193, .08);
}

.hero-art-mini-grid i {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: rgba(1, 64, 193, .10);
    color: var(--blue);
}

.hero-art-floating {
    width: 180px;
    padding: 18px 20px;
    z-index: 4;
}

.hero-art-floating-one {
    top: 16px;
    right: 0;
}

.hero-art-floating-two {
    right: 18px;
    bottom: 16px;
}

.floating-kicker {
    display: block;
    color: #6b7d95;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .32px;
    margin-bottom: 8px;
}

.hero-art-floating strong {
    display: block;
    color: var(--blue);
    font-size: 38px;
    line-height: 1;
    margin-bottom: 4px;
}

.hero-art-floating small {
    display: block;
    color: #55667d;
    line-height: 1.5;
    font-size: 12px;
}

.hero-art-phone {
    width: 190px;
    height: 350px;
    right: 48px;
    top: 120px;
    padding: 16px;
    z-index: 3;
    border-radius: 34px;
    background: linear-gradient(180deg, #ffffff, #f2f6ff);
}

.hero-phone-head {
    width: 72px;
    height: 8px;
    border-radius: 999px;
    background: #d9e5fb;
    margin: 0 auto 22px;
}

.hero-phone-body {
    display: grid;
    gap: 12px;
}

.hero-phone-line {
    height: 12px;
    border-radius: 999px;
    background: #edf3fb;
}

.hero-phone-line.large {
    height: 88px;
    border-radius: 26px;
    background: linear-gradient(180deg, rgba(1, 64, 193, .12), rgba(1, 64, 193, .04));
}

.hero-phone-pill {
    margin-top: 10px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    border-radius: 999px;
    background: rgba(1, 64, 193, .08);
    color: var(--blue);
    font-size: 12px;
    font-weight: 800;
}

.hero-art-orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(circle, rgba(1, 64, 193, .14), rgba(1, 64, 193, 0));
    filter: blur(4px);
}

.hero-art-orb.orb-one {
    width: 240px;
    height: 240px;
    top: 0;
    left: 36px;
}

.hero-art-orb.orb-two {
    width: 180px;
    height: 180px;
    right: 120px;
    bottom: 40px;
}

.home-stats {
    background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
}

.home-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.home-stat-card {
    padding: 28px 24px;
    border-radius: 28px;
    background: #fff;
    border: 1px solid var(--line);
    box-shadow: 0 18px 44px rgba(7, 20, 39, .06);
}

.home-stat-count {
    display: block;
    color: var(--blue);
    font-size: 44px;
    line-height: 1;
    font-weight: 950;
    margin-bottom: 10px;
}

.home-stat-card span {
    display: block;
    color: var(--navy);
    font-size: 17px;
    font-weight: 850;
    margin-bottom: 10px;
}

.home-stat-card p {
    color: var(--muted);
    font-size: 14px;
    line-height: 1.72;
}

.home-featured-projects {
    margin-top: 24px;
}

.home-work-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

.testimonial-stars {
    display: flex;
    gap: 5px;
    color: #f4b400;
    margin-bottom: 14px;
}

.home-faq {
    background: #fff;
}

.home-faq-grid {
    display: grid;
    gap: 14px;
    max-width: 980px;
    margin: 0 auto;
}

.home-faq-item {
    border-radius: 24px;
    border: 1px solid var(--line);
    background: #f8fbff;
    box-shadow: 0 14px 34px rgba(7, 20, 39, .045);
    overflow: hidden;
}

.home-faq-item summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 22px 24px;
    color: var(--navy);
    font-size: 17px;
    font-weight: 850;
}

.home-faq-item summary::-webkit-details-marker {
    display: none;
}

.home-faq-item summary i {
    color: var(--blue);
    transition: transform .25s ease;
}

.home-faq-item[open] summary i {
    transform: rotate(45deg);
}

.home-faq-answer {
    padding: 0 24px 22px;
}

.home-faq-answer p {
    color: var(--muted);
    line-height: 1.82;
    font-size: 15px;
}

.legal-page {
    padding: 160px 0 90px;
    background: linear-gradient(180deg, #f7fbff 0%, #ffffff 100%);
}

.legal-page-head {
    max-width: 860px;
    margin-bottom: 30px;
}

.legal-page-head h1 {
    color: var(--navy);
    font-size: clamp(34px, 4vw, 54px);
    line-height: 1.08;
    margin: 14px 0 14px;
}

.legal-page-head p {
    color: var(--muted);
    line-height: 1.82;
    font-size: 16px;
}

.legal-page-body {
    display: grid;
    gap: 18px;
}

.legal-block {
    padding: 28px 28px 26px;
    border-radius: 28px;
    background: #fff;
    border: 1px solid var(--line);
    box-shadow: 0 16px 38px rgba(7, 20, 39, .05);
}

.legal-block h2 {
    color: var(--navy);
    font-size: 22px;
    margin-bottom: 10px;
}

.legal-block p {
    color: var(--muted);
    line-height: 1.82;
    margin-bottom: 10px;
    font-size: 15px;
}

@media (max-width: 1080px) {
    .hero-art-dashboard {
        inset: 24px 24px 60px 24px;
    }

    .hero-art-phone {
        right: 18px;
        top: 138px;
    }

    .hero-art-floating-one {
        right: 8px;
    }

    .hero-art-floating-two {
        right: 20px;
    }

    .home-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 780px) {
    .hero-empty {
        min-height: auto;
        margin-top: 12px;
    }

    .hero-artwork {
        min-height: 460px;
    }

    .hero-art-dashboard {
        inset: 18px 12px 58px 12px;
        padding: 20px;
    }

    .hero-art-phone {
        width: 150px;
        height: 280px;
        right: 10px;
        top: 150px;
    }

    .hero-art-floating {
        width: 150px;
        padding: 16px;
    }

    .hero-art-mini-grid {
        grid-template-columns: 1fr 1fr;
    }

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

    .home-work-footer {
        flex-direction: column;
    }
}

@media (max-width: 680px) {
    .hero-art-dashboard h3 {
        font-size: 24px;
    }

    .hero-art-phone {
        display: none;
    }

    .hero-art-floating {
        width: 138px;
    }

    .hero-art-floating strong {
        font-size: 30px;
    }

    .home-stat-count {
        font-size: 38px;
    }

    .home-faq-item summary {
        font-size: 16px;
        padding: 18px 18px;
    }

    .home-faq-answer {
        padding: 0 18px 18px;
    }

    .legal-page {
        padding: 136px 0 72px;
    }

    .legal-block {
        padding: 22px 18px;
        border-radius: 22px;
    }
}