@import "https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap";
:root {
    --navy: #071230;
    --text: #536079;
    --purple: #5534ff;
    --purple-2: #9b43ed;
    --lavender: #f1edff;
    --blue: #2b75f5;
    --pink: #ff4f81;
    --green: #19b869;
    --border: #e0e4ef;
    --card: #ffffffeb;
    --shadow: 0 18px 50px #352f7017;
}
.home-service-heading {
    margin-top: 55px;
}
.section-heading > p {
    max-width: 720px;
    margin: 10px auto 0;
    font-size: 15px;
}
.client-marquee {
    border-block: 1px solid var(--border);
    margin-top: 22px;
    padding: 18px 0;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, #0000, #000 7% 93%, #0000);
    mask-image: linear-gradient(90deg, #0000, #000 7% 93%, #0000);
}
.marquee-track {
    align-items: center;
    gap: 58px;
    width: max-content;
    animation: 30s linear infinite marquee-left;
    display: flex;
}
.marquee-track:hover {
    animation-play-state: paused;
}
.marquee-track span {
    color: #7d879b;
    white-space: nowrap;
    align-items: center;
    gap: 12px;
    font-size: 17px;
    font-weight: 800;
    display: inline-flex;
}
.marquee-track b {
    color: var(--purple);
    font-size: 22px;
}
@keyframes marquee-left {
    to {
        transform: translate(-50%);
    }
}
.hero-orb {
    animation: 4.5s ease-in-out infinite orb-glow;
}
.metric-card {
    animation: 4s ease-in-out infinite metric-float;
}
.metric-card.traffic {
    animation-delay: -0.8s;
}
.metric-card.roi {
    animation-delay: -1.6s;
}
.metric-card.rating {
    animation-delay: -2.4s;
}
.network-icon {
    animation: 3.6s ease-in-out infinite icon-float;
}
.network-icon.meta {
    animation-delay: -1.1s;
}
.network-icon.insta {
    animation-delay: -2.2s;
}
.platforms,
.growth-note {
    animation: 4.8s ease-in-out -1.5s infinite metric-float;
}
@keyframes metric-float {
    0%,
    to {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-11px);
    }
}
@keyframes icon-float {
    0%,
    to {
        transform: translateY(0) rotate(0);
    }
    50% {
        transform: translateY(-10px) rotate(5deg);
    }
}
@keyframes orb-glow {
    0%,
    to {
        filter: saturate();
        box-shadow: 0 45px 100px #5634ff33;
    }
    50% {
        filter: saturate(1.2);
        box-shadow: 0 50px 115px #743eff57;
    }
}
.button,
.filter-row button,
.service-card,
.portfolio-card,
.blog-card,
.team-card,
.values-grid .value-card,
.contact-cards article,
.delivery article,
.package-band article,
.reviews-grid > article,
.included-grid article,
.related-grid > a,
.mvv-grid article,
.detail-process-grid article {
    transition:
        transform 0.25s,
        background-color 0.25s,
        color 0.25s,
        border-color 0.25s,
        box-shadow 0.25s;
}
.button.primary:hover {
    color: #fff;
    background: linear-gradient(120deg, #245eea, #7550ff);
    box-shadow: 0 16px 34px #245eea4d;
}
.button.secondary:hover {
    color: #fff;
    background: linear-gradient(120deg, #5534ff, #9342ee);
    border-color: #0000;
    box-shadow: 0 14px 30px #5534ff3d;
}
.filter-row button:hover {
    color: #fff;
    background: var(--purple);
    border-color: var(--purple);
    transform: translateY(-2px);
}
.service-card {
    color: inherit;
}
.service-card:hover {
    color: var(--navy);
    background: linear-gradient(145deg, #eee9ff, #fbfaff);
    border-color: #9f8cff;
}
.service-card:hover h3 {
    color: var(--purple);
}
.service-card:hover .icon-bubble {
    background: #fff;
    transform: rotate(-5deg) scale(1.05);
}
.service-card .text-link {
    pointer-events: none;
}
:is(
    .portfolio-card,
    .blog-card,
    .team-card,
    .values-grid .value-card,
    .contact-cards article,
    .delivery article,
    .reviews-grid > article,
    .included-grid article,
    .related-grid > a,
    .mvv-grid article,
    .detail-process-grid article
):hover {
    background-color: #f1edff;
    border-color: #b2a4ff;
    transform: translateY(-6px);
    box-shadow: 0 20px 45px #4e36ac24;
}
.package-band article:hover {
    transform: translateY(-4px);
}
.home-review-section {
    text-align: center;
}
.home-reviews {
    text-align: left;
    margin-top: 28px;
}
.home-reviews blockquote {
    min-height: 100px;
}
.floating-contacts {
    z-index: 45;
    flex-direction: column;
    gap: 12px;
    display: flex;
    position: fixed;
    bottom: 24px;
    right: 25px;
}
.floating-contact {
    color: #fff;
    border: 4px solid #fff;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    width: 58px;
    height: 58px;
    transition:
        transform 0.25s,
        background-color 0.25s,
        box-shadow 0.25s;
    display: flex;
    position: relative;
    box-shadow: 0 15px 35px #1f234c40;
}
.floating-contact svg {
    width: 28px;
    height: 28px;
}
.floating-contact.call {
    background: #1769e8;
}
.floating-contacts .whatsapp {
    color: #fff;
    font-size: initial;
    background: #20b95a;
    position: relative;
    bottom: auto;
    right: auto;
}
.floating-contact:hover {
    transform: translateY(-4px) scale(1.06);
    box-shadow: 0 18px 42px #27286052;
}
.floating-contact.call:hover {
    background: #0b4fbd;
}
.floating-contacts .whatsapp:hover {
    background: #128c45;
}
.floating-contact > span {
    background: var(--navy);
    color: #fff;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    border-radius: 8px;
    padding: 7px 11px;
    font-size: 11px;
    font-weight: 700;
    transition: all 0.2s;
    position: absolute;
    right: 68px;
    transform: translate(8px);
}
.floating-contact:hover > span {
    opacity: 1;
    transform: translate(0);
}
.team-photo {
    background-color: #f0ebff;
    background-size: 200%;
}
.values-grid .value-card {
    border: 1px solid var(--border);
    background: #fff;
    border-radius: 18px;
    min-height: 230px;
    padding: 30px;
}
.values-grid .value-card h2 {
    margin: 18px 0 12px;
    font-size: 20px;
}
.values-grid .value-card p,
.values-grid .value-card li {
    font-size: 14px;
}
.values-grid .value-card ul {
    color: var(--text);
    margin: 10px 0;
    padding: 0;
    line-height: 1.85;
    list-style: none;
}
.values-grid .value-card li:before {
    content: "✓";
    color: var(--purple);
    margin-right: 10px;
    font-weight: 800;
}
.values-grid .value-card > span {
    color: var(--purple);
    margin-top: 14px;
    font-size: 12px;
    font-weight: 800;
    display: inline-block;
}
.service-category {
    margin-top: 55px;
}
.service-category.alt {
    background: linear-gradient(135deg, #f0edff, #fbfaff);
    border-block: 1px solid #dfd8ff;
    margin-top: 60px;
    padding: 65px 0;
}
.service-category .section-heading {
    margin: 0 0 30px;
}
.service-category .services-grid {
    margin-top: 28px;
}
.service-detail-hero {
    grid-template-columns: 56% 44%;
    align-items: center;
    gap: 55px;
    min-height: 520px;
    padding-top: 30px;
    display: grid;
}
.service-detail-hero h1 {
    margin: 20px 0;
    font-size: clamp(47px, 5.5vw, 72px);
    line-height: 1.08;
}
.service-detail-hero > div:first-child > p {
    max-width: 700px;
    margin-bottom: 28px;
    font-size: 18px;
}
.service-detail-art {
    background: linear-gradient(145deg, #eee8ff, #d8ccff);
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    height: 430px;
    display: flex;
    position: relative;
    overflow: visible;
    box-shadow:
        inset 0 0 0 1px #6646ff1f,
        0 40px 80px #442b9d24;
}
.service-detail-art.blue {
    background: linear-gradient(145deg, #e9f4ff, #c9ddff);
}
.service-detail-art.pink {
    background: linear-gradient(145deg, #fff0f5, #ffd5e4);
}
.service-detail-art.orange {
    background: linear-gradient(145deg, #fff6e9, #ffddbc);
}
.service-detail-art.green {
    background: linear-gradient(145deg, #edfff4, #c7f4d9);
}
.service-detail-art > span {
    z-index: 3;
    color: #fff;
    background: linear-gradient(145deg, #5534ff, #9b43ed);
    border-radius: 42px;
    justify-content: center;
    align-items: center;
    width: 155px;
    height: 155px;
    font-size: 54px;
    font-weight: 900;
    animation: 4s ease-in-out infinite icon-float;
    display: flex;
    position: relative;
    box-shadow: 0 26px 55px #5534ff52;
}
.service-detail-art.blue > span {
    background: linear-gradient(145deg, #1a74ea, #65a2ff);
}
.service-detail-art.pink > span {
    background: linear-gradient(145deg, #ef3e7b, #ff7fa4);
}
.service-detail-art.orange > span {
    background: linear-gradient(145deg, #ef7a1c, #ffb14e);
}
.service-detail-art.green > span {
    background: linear-gradient(145deg, #0e9a4e, #39d174);
}
.detail-orbit {
    border: 1px dashed #5d41da66;
    border-radius: 50%;
    animation: 18s linear infinite detail-spin;
    position: absolute;
}
.orbit-one {
    inset: 42px;
}
.orbit-two {
    animation-duration: 12s;
    animation-direction: reverse;
    inset: 92px;
}
@keyframes detail-spin {
    to {
        transform: rotate(360deg);
    }
}
.detail-chip {
    z-index: 4;
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    color: var(--navy);
    background: #fffffff0;
    border-radius: 12px;
    padding: 13px 16px;
    font-size: 12px;
    font-weight: 800;
    animation: 4s ease-in-out infinite metric-float;
    position: absolute;
}
.detail-chip.c1 {
    top: 45px;
    left: -25px;
}
.detail-chip.c2 {
    animation-delay: -1.4s;
    top: 165px;
    right: -25px;
}
.detail-chip.c3 {
    animation-delay: -2.5s;
    bottom: 35px;
    left: 20px;
}
.outcome-bar {
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    background: #fff;
    border-radius: 18px;
    grid-template-columns: repeat(4, 1fr);
    padding: 25px;
    display: grid;
}
.outcome-bar article {
    border-right: 1px solid var(--border);
    align-items: center;
    gap: 13px;
    padding: 10px 24px;
    display: flex;
}
.outcome-bar article:last-child {
    border: 0;
}
.outcome-bar span {
    width: 38px;
    height: 38px;
    color: var(--purple);
    background: var(--lavender);
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    font-size: 11px;
    font-weight: 900;
    display: flex;
}
.outcome-bar strong {
    font-size: 13px;
}
.service-included {
    grid-template-columns: 32% 68%;
    align-items: start;
    gap: 55px;
    display: grid;
}
.service-included h2 {
    margin: 15px 0;
    font-size: 38px;
}
.included-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    display: grid;
}
.included-grid article {
    border: 1px solid var(--border);
    background: #fff;
    border-radius: 16px;
    padding: 22px;
}
.included-grid .icon-bubble {
    flex-basis: 42px;
    width: 42px;
    height: 42px;
    font-size: 14px;
}
.included-grid strong {
    margin: 14px 0 5px;
    font-size: 14px;
    display: block;
}
.included-grid p {
    font-size: 12px;
    line-height: 1.6;
}
.service-process {
    background: linear-gradient(135deg, #f6f3ff, #fff);
    border-block: 1px solid #e4dfff;
    padding: 65px 0;
}
.service-process .section-heading {
    margin: 0;
}
.detail-process-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 32px;
    display: grid;
}
.detail-process-grid article {
    border: 1px solid var(--border);
    background: #fff;
    border-radius: 16px;
    padding: 28px;
    position: relative;
}
.detail-process-grid article > span {
    color: #d7d0ff;
    font-size: 33px;
    font-weight: 900;
}
.detail-process-grid h3 {
    margin: 15px 0 8px;
    font-size: 17px;
}
.detail-process-grid p {
    font-size: 13px;
    line-height: 1.6;
}
.related-services .section-heading {
    margin-top: 0;
}
.related-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-top: 28px;
    display: grid;
}
.related-grid > a {
    border: 1px solid var(--border);
    background: #fff;
    border-radius: 17px;
    gap: 18px;
    min-height: 170px;
    padding: 24px;
    display: flex;
}
.related-grid .icon-bubble {
    flex-basis: 50px;
    width: 50px;
    height: 50px;
    font-size: 18px;
}
.related-grid h3 {
    margin: 3px 0 8px;
    font-size: 16px;
}
.related-grid p {
    font-size: 12px;
    line-height: 1.55;
}
.related-grid a span:last-child {
    color: var(--purple);
    margin-top: 10px;
    font-size: 11px;
    font-weight: 800;
    display: inline-block;
}
.mvv-hero {
    text-align: center;
    max-width: 950px;
    margin-top: 55px;
}
.mvv-hero h1 {
    margin: 20px 0;
    font-size: 65px;
    line-height: 1.1;
}
.mvv-hero p {
    max-width: 800px;
    margin: auto;
    font-size: 18px;
}
.mvv-feature {
    grid-template-columns: 1fr 1fr;
    gap: 25px;
    margin-top: 48px;
    display: grid;
}
.mvv-feature article {
    border: 1px solid var(--border);
    background: #fff;
    border-radius: 22px;
    padding: 42px;
    box-shadow: 0 16px 45px #2d305a0f;
}
.mvv-feature article.vision {
    background: linear-gradient(145deg, #f1edff, #fff);
}
.mvv-feature article > span:not(.icon-bubble) {
    color: var(--purple);
    letter-spacing: 0.1em;
    margin-top: 22px;
    font-size: 11px;
    font-weight: 900;
    display: block;
}
.mvv-feature h2 {
    margin: 12px 0;
    font-size: 31px;
    line-height: 1.25;
}
.mvv-feature p {
    font-size: 14px;
}
.mvv-feature ul {
    color: var(--text);
    padding-left: 20px;
    font-size: 12px;
    line-height: 1.9;
}
.mvv-feature li::marker {
    color: var(--purple);
}
.mvv-values .section-heading {
    margin-top: 0;
}
.mvv-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 30px;
    display: grid;
}
.mvv-grid article {
    border: 1px solid var(--border);
    background: #fff;
    border-radius: 18px;
    padding: 30px;
}
.mvv-grid h3 {
    margin: 18px 0 8px;
    font-size: 17px;
}
.mvv-grid p {
    font-size: 13px;
}
.mvv-promise {
    background: linear-gradient(135deg, #f0ebff, #fff);
    border: 1px solid #dcd5ff;
    border-radius: 20px;
    grid-template-columns: 40% 60%;
    align-items: center;
    gap: 40px;
    margin-bottom: 45px;
    padding: 45px;
    display: grid;
}
.mvv-promise h2 {
    margin-top: 15px;
    font-size: 35px;
}
.promise-points {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 22px;
    display: grid;
}
.promise-points span {
    color: var(--navy);
    background: #fff;
    border-radius: 10px;
    padding: 12px;
    font-size: 12px;
    font-weight: 800;
}
@media (max-width: 920px) {
    .service-detail-hero {
        grid-template-columns: 1fr;
        padding-top: 45px;
    }
    .service-detail-art {
        width: min(500px, 100%);
        margin: auto;
    }
    .outcome-bar {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }
    .outcome-bar article {
        border: 0;
    }
    .service-included {
        grid-template-columns: 1fr;
    }
    .detail-process-grid,
    .related-grid {
        grid-template-columns: 1fr 1fr;
    }
    .mvv-feature {
        grid-template-columns: 1fr;
    }
    .mvv-grid {
        grid-template-columns: 1fr 1fr;
    }
    .mvv-promise {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 620px) {
    .marquee-track {
        gap: 35px;
        animation-duration: 22s;
    }
    .marquee-track span {
        font-size: 14px;
    }
    .service-strip .service-card:nth-child(n) {
        display: flex;
    }
    .floating-contacts {
        bottom: 17px;
        right: 17px;
    }
    .floating-contact {
        width: 52px;
        height: 52px;
    }
    .floating-contact > span {
        display: none;
    }
    .team-photo {
        aspect-ratio: 1.2;
    }
    .service-detail-hero h1 {
        font-size: 42px;
    }
    .service-detail-art {
        height: 320px;
    }
    .service-detail-art > span {
        border-radius: 30px;
        width: 110px;
        height: 110px;
        font-size: 38px;
    }
    .detail-chip {
        padding: 9px 10px;
        font-size: 9px;
    }
    .detail-chip.c1 {
        top: 30px;
        left: -3px;
    }
    .detail-chip.c2 {
        top: 130px;
        right: -3px;
    }
    .detail-chip.c3 {
        bottom: 22px;
        left: 8px;
    }
    .outcome-bar,
    .included-grid,
    .detail-process-grid,
    .related-grid,
    .mvv-grid,
    .promise-points {
        grid-template-columns: 1fr;
    }
    .service-included h2 {
        font-size: 31px;
    }
    .mvv-hero h1 {
        font-size: 43px;
    }
    .mvv-feature article {
        padding: 27px;
    }
    .mvv-feature h2 {
        font-size: 25px;
    }
    .mvv-promise {
        padding: 28px;
    }
}
@media (prefers-reduced-motion: reduce) {
    *,
    :before,
    :after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}
* {
    box-sizing: border-box;
}
html {
    scroll-behavior: smooth;
}
body {
    color: var(--navy);
    -webkit-font-smoothing: antialiased;
    background:
        radial-gradient(circle at 82% 10%, #f2efff 0, #0000 28%),
        linear-gradient(135deg, #fbfcff, #f6f8ff 48%, #fff);
    margin: 0;
    font-family: Manrope, Arial, sans-serif;
}
a {
    color: inherit;
    text-decoration: none;
}
button,
input,
select,
textarea {
    font: inherit;
}
button {
    cursor: pointer;
}
p {
    color: var(--text);
    margin: 0;
    font-size: 17px;
    line-height: 1.75;
}
h1,
h2,
h3,
strong {
    color: var(--navy);
}
h1,
h2,
h3 {
    letter-spacing: -0.035em;
    margin: 0;
}
main {
    min-height: 65vh;
}
.shell {
    width: min(1400px, 100% - 48px);
    margin-inline: auto;
}
.section-space {
    margin-top: 80px;
    margin-bottom: 80px;
}
.site-header {
    z-index: 50;
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    background: #ffffffe6;
    border: 1px solid #e4e6f0cc;
    border-radius: 18px;
    align-items: center;
    gap: 32px;
    height: 86px;
    margin-top: 22px;
    padding: 0 30px;
    display: flex;
    position: sticky;
    top: 18px;
    box-shadow: 0 10px 40px #2d305a14;
}
.logo {
    align-items: center;
    gap: 8px;
    min-width: 170px;
    display: flex;
}
.logo-mark {
    letter-spacing: -6px;
    background: linear-gradient(135deg, #5a32ff, #287cff);
    color: #0000;
    -webkit-background-clip: text;
    padding-right: 5px;
    font-size: 34px;
    font-weight: 900;
    line-height: 1;
    transform: skew(-5deg);
}
.logo-copy {
    flex-direction: column;
    line-height: 1;
    display: flex;
}
.logo-copy strong {
    font-size: 23px;
}
.logo-copy small {
    letter-spacing: 6px;
    color: #747c95;
    margin-top: 8px;
    font-size: 8px;
}
.nav {
    flex: 1;
    justify-content: center;
    align-items: stretch;
    gap: 29px;
    height: 100%;
    display: flex;
}
.nav a {
    white-space: nowrap;
    align-items: center;
    font-size: 14px;
    font-weight: 600;
    display: flex;
    position: relative;
}
.nav a:after {
    content: "";
    background: var(--purple);
    border-radius: 2px;
    height: 2px;
    transition: all 0.2s;
    position: absolute;
    bottom: 20px;
    left: 0;
    right: 0;
    transform: scaleX(0);
}
.nav a:hover,
.nav a.active {
    color: var(--purple);
}
.nav a.active:after {
    transform: scaleX(1);
}
.nav-chevron {
    margin-left: 6px;
    font-size: 18px;
}
.header-actions {
    align-items: center;
    gap: 12px;
    display: flex;
}
.phone-pill {
    border: 1px solid var(--border);
    white-space: nowrap;
    border-radius: 12px;
    align-items: center;
    gap: 10px;
    height: 50px;
    padding: 0 15px;
    font-size: 13px;
    font-weight: 600;
    display: flex;
}
.phone-pill span {
    color: var(--purple);
}
.button {
    border: 0;
    border-radius: 12px;
    justify-content: center;
    align-items: center;
    gap: 18px;
    min-height: 56px;
    padding: 0 28px;
    font-size: 15px;
    font-weight: 700;
    transition:
        transform 0.2s,
        box-shadow 0.2s,
        border-color 0.2s;
    display: inline-flex;
}
.button:hover {
    transform: translateY(-2px);
}
.button.primary {
    color: #fff;
    background: linear-gradient(120deg, #5634ff, #9842ee);
    box-shadow: 0 12px 28px #5b34ff3b;
}
.button.secondary {
    color: var(--navy);
    background: #fff;
    border: 1px solid #d7dbe6;
}
.button.primary.small {
    white-space: nowrap;
    min-height: 50px;
    padding: 0 22px;
}
.menu-button {
    border: 1px solid var(--border);
    background: #fff;
    border-radius: 10px;
    width: 44px;
    height: 42px;
    padding: 10px;
    display: none;
}
.menu-button span {
    background: var(--navy);
    height: 2px;
    margin: 4px 0;
    display: block;
}
.eyebrow {
    color: var(--purple);
    letter-spacing: 0.08em;
    background: #ffffff8c;
    border: 1px solid #cfc8ff;
    border-radius: 999px;
    padding: 7px 20px;
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    display: inline-flex;
}
.gradient-text {
    background: linear-gradient(100deg, #4a58ff, #a43ee8);
    color: #0000;
    -webkit-background-clip: text;
    background-clip: text;
}
.breadcrumb {
    color: var(--text);
    align-items: center;
    gap: 13px;
    margin-top: 45px;
    font-size: 14px;
    display: flex;
}
.breadcrumb a:hover {
    color: var(--purple);
}
.button-row {
    flex-wrap: wrap;
    gap: 20px;
    display: flex;
}
.text-link {
    color: var(--purple);
    align-items: center;
    gap: 9px;
    font-size: 13px;
    font-weight: 700;
    display: inline-flex;
}
.text-link:hover span {
    transform: translate(4px);
}
.text-link span {
    transition: all 0.2s;
}
.icon-bubble {
    width: 60px;
    height: 60px;
    color: var(--purple);
    background: linear-gradient(135deg, #f3efff, #e4dcff);
    border-radius: 50%;
    flex: 0 0 60px;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    font-weight: 800;
    display: inline-flex;
}
.icon-bubble.blue {
    color: var(--blue);
    background: linear-gradient(135deg, #edf5ff, #d6e6ff);
}
.icon-bubble.pink {
    color: var(--pink);
    background: linear-gradient(135deg, #fff0f5, #ffdbe6);
}
.icon-bubble.orange {
    color: #f38a28;
    background: linear-gradient(135deg, #fff6e9, #ffe3c5);
}
.icon-bubble.green {
    color: var(--green);
    background: linear-gradient(135deg, #effff6, #d3f7e3);
}
.home-hero {
    grid-template-columns: 52% 48%;
    align-items: center;
    min-height: 590px;
    display: grid;
    position: relative;
}
.hero-copy {
    z-index: 2;
    padding-top: 45px;
    position: relative;
}
.hero-copy h1 {
    margin: 24px 0 22px;
    font-size: clamp(48px, 5vw, 78px);
    font-weight: 800;
    line-height: 1.13;
}
.hero-copy > p {
    max-width: 650px;
    margin-bottom: 28px;
    font-size: 19px;
}
.happy-clients {
    align-items: center;
    gap: 15px;
    margin-top: 34px;
    display: flex;
}
.happy-clients p {
    flex-direction: column;
    line-height: 1.35;
    display: flex;
}
.happy-clients small {
    color: #8490a7;
}
.avatar-stack {
    align-items: center;
    display: flex;
}
.avatar-stack span,
.avatar-stack b {
    background: #d9e4ff;
    border: 3px solid #fff;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    width: 44px;
    height: 44px;
    margin-left: -9px;
    font-size: 10px;
    display: flex;
}
.avatar-stack span:first-child {
    background: #f2d4bd;
    margin-left: 0;
}
.avatar-stack span:nth-child(2) {
    background: #d0dff3;
}
.avatar-stack span:nth-child(3) {
    background: #f0d2da;
}
.avatar-stack b {
    color: #fff;
    background: linear-gradient(135deg, #6542ff, #a44be7);
    font-size: 13px;
}
.hero-visual {
    min-height: 590px;
    position: relative;
    overflow: visible;
}
.hero-orb {
    background: linear-gradient(135deg, #ad58ee, #5e39ff);
    border-radius: 50%;
    width: 520px;
    height: 520px;
    position: absolute;
    top: 75px;
    right: 4%;
    box-shadow: 0 45px 100px #5634ff33;
}
.hero-orb:after {
    content: "";
    border: 1px dashed #ffffff8c;
    border-radius: 50%;
    position: absolute;
    inset: 62px;
}
.hero-visual > img {
    object-fit: contain;
    object-position: bottom;
    z-index: 2;
    filter: drop-shadow(0 30px 24px #181f4929);
    width: auto;
    height: 590px;
    position: absolute;
    bottom: 0;
    right: 5%;
}
.metric-card {
    z-index: 4;
    min-width: 150px;
    box-shadow: var(--shadow);
    background: #fffffff0;
    border: 1px solid #edf0f5;
    border-radius: 14px;
    flex-direction: column;
    gap: 6px;
    padding: 18px 19px;
    display: flex;
    position: absolute;
}
.metric-card small {
    color: #36425d;
    font-size: 11px;
}
.metric-card strong {
    font-size: 24px;
}
.metric-card span {
    color: var(--purple);
    font-weight: 700;
}
.metric-card em {
    color: #75819a;
    font-size: 10px;
    font-style: normal;
}
.metric-card .green,
.green {
    color: var(--green);
}
.stars {
    letter-spacing: 2px;
    color: #ffb800 !important;
}
.leads {
    top: 200px;
    left: -4%;
}
.traffic {
    top: 115px;
    right: -1%;
}
.roi {
    top: 340px;
    right: -6%;
}
.rating {
    bottom: 35px;
    left: -14%;
}
.network-icon {
    z-index: 4;
    width: 54px;
    height: 54px;
    box-shadow: var(--shadow);
    background: #fff;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    font-weight: 900;
    display: flex;
    position: absolute;
}
.network-icon.google {
    color: #3777f1;
    font-size: 24px;
    top: 360px;
    left: -10%;
}
.network-icon.meta {
    color: #1678ed;
    font-size: 30px;
    top: 120px;
    left: 8%;
}
.network-icon.insta {
    color: #ed3a84;
    font-size: 29px;
    bottom: 90px;
    right: -1%;
}
.platforms {
    z-index: 5;
    box-shadow: var(--shadow);
    background: #fff;
    border-radius: 999px;
    gap: 24px;
    padding: 15px 20px;
    display: flex;
    position: absolute;
    bottom: 0;
    right: -5%;
}
.platforms span {
    color: #1678ed;
    background: #edf3ff;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    width: 32px;
    height: 32px;
    font-weight: 800;
    display: flex;
}
.platforms span:nth-child(3) {
    color: #f0272f;
}
.platforms span:nth-child(4) {
    font-size: 13px;
}
.trusted {
    padding-top: 20px;
}
.trusted-title {
    color: #667189;
    letter-spacing: 0.12em;
    align-items: center;
    gap: 28px;
    font-size: 12px;
    font-weight: 800;
    display: flex;
}
.trusted-title span {
    background: #d9dde8;
    flex: 1;
    max-width: 280px;
    height: 1px;
}
.logo-row {
    color: #929bad;
    grid-template-columns: repeat(5, 1fr);
    align-items: center;
    margin-top: 24px;
    display: grid;
}
.logo-row b {
    border-right: 1px solid #d8dce6;
    padding: 0 28px;
    font-size: 20px;
    line-height: 1.05;
}
.logo-row b:first-child {
    padding-left: 25px;
}
.logo-row b:last-child {
    border: 0;
}
.logo-row small {
    letter-spacing: 0.12em;
    margin: 5px 0 0 35px;
    font-size: 8px;
    display: block;
}
.service-strip {
    grid-template-columns: repeat(5, 1fr);
    gap: 22px;
    margin-top: 42px;
    display: grid;
}
.service-card {
    border: 1px solid var(--border);
    background: var(--card);
    border-radius: 18px;
    gap: 16px;
    min-height: 180px;
    padding: 25px;
    transition: all 0.25s;
    display: flex;
    box-shadow: 0 14px 40px #3f36790b;
}
.service-card:hover {
    box-shadow: var(--shadow);
    border-color: #d4cdfd;
    transform: translateY(-5px);
}
.service-card .icon-bubble {
    flex-basis: 54px;
    width: 54px;
    height: 54px;
    font-size: 21px;
}
.service-card h3 {
    margin: 8px 0 12px;
    font-size: 16px;
}
.service-card p {
    margin-bottom: 16px;
    font-size: 13px;
    line-height: 1.65;
}
.home-results {
    border: 1px solid var(--border);
    background: #fff;
    border-radius: 22px;
    grid-template-columns: 30% 70%;
    align-items: center;
    padding: 50px;
    display: grid;
}
.home-results h2 {
    margin-top: 14px;
    font-size: 36px;
}
.result-points {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    display: grid;
}
.result-points > div {
    border-left: 1px solid var(--border);
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 0 25px;
    display: flex;
}
.result-points strong {
    font-size: 17px;
}
.result-points p {
    font-size: 14px;
}
.about-hero {
    grid-template-columns: 52% 48%;
    align-items: center;
    min-height: 490px;
    display: grid;
}
.about-copy h1,
.services-hero h1 {
    margin: 20px 0;
    font-size: clamp(46px, 5vw, 68px);
    line-height: 1.1;
}
.about-copy p,
.services-hero > div:first-child > p {
    max-width: 640px;
    font-size: 18px;
}
.about-visual,
.services-visual {
    height: 490px;
    position: relative;
}
.about-visual .hero-orb,
.services-visual .hero-orb {
    width: 410px;
    height: 410px;
    top: 45px;
    right: 10%;
}
.about-visual > img,
.services-visual > img {
    z-index: 2;
    object-fit: contain;
    width: auto;
    height: 480px;
    position: absolute;
    bottom: 0;
    right: 12%;
}
.growth-note {
    z-index: 4;
    box-shadow: var(--shadow);
    background: #fff;
    border-radius: 14px;
    align-items: center;
    gap: 12px;
    padding: 20px;
    display: flex;
    position: absolute;
    bottom: 80px;
    right: -1%;
}
.stats-bar {
    z-index: 5;
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    background: #fff;
    border-radius: 18px;
    grid-template-columns: repeat(4, 1fr);
    margin-top: -8px;
    padding: 25px 35px;
    display: grid;
    position: relative;
}
.stat {
    border-right: 1px solid var(--border);
    align-items: center;
    gap: 18px;
    padding: 0 25px;
    display: flex;
}
.stat:last-child {
    border: 0;
}
.stat .icon-bubble {
    flex-basis: 52px;
    width: 52px;
    height: 52px;
}
.stat > div {
    flex-direction: column;
    display: flex;
}
.stat strong {
    font-size: 25px;
}
.stat span {
    color: var(--text);
    margin-top: 5px;
    font-size: 13px;
}
.values-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 22px;
    display: grid;
}
.values-grid article {
    border: 1px solid var(--border);
    background: #fff;
    border-radius: 18px;
    min-height: 210px;
    padding: 30px;
}
.values-grid h2 {
    margin: 18px 0 12px;
    font-size: 20px;
}
.values-grid p,
.values-grid li {
    font-size: 14px;
}
.values-grid ul {
    color: var(--text);
    margin: 10px 0;
    padding: 0;
    line-height: 1.85;
    list-style: none;
}
.values-grid li:before {
    content: "✓";
    color: var(--purple);
    margin-right: 10px;
    font-weight: 800;
}
.choose {
    border: 1px solid var(--border);
    background: #fff;
    border-radius: 20px;
    grid-template-columns: 1.35fr repeat(4, 1fr);
    margin-top: 22px;
    padding: 38px 35px;
    display: grid;
}
.choose-intro {
    padding-right: 30px;
}
.choose-intro h2 {
    margin: 12px 0;
    font-size: 31px;
}
.choose-intro p {
    margin-bottom: 14px;
    font-size: 13px;
}
.choose-intro .button {
    min-height: 42px;
    padding: 0 16px;
    font-size: 12px;
}
.choose-point {
    text-align: center;
    border-left: 1px solid var(--border);
    padding: 0 25px;
}
.choose-point .icon-bubble {
    flex-basis: 50px;
    width: 50px;
    height: 50px;
}
.choose-point h3 {
    margin: 15px 0 8px;
    font-size: 15px;
}
.choose-point p {
    font-size: 12px;
    line-height: 1.6;
}
.process {
    border: 1px solid var(--border);
    background: #fff;
    border-top: 0;
    border-radius: 0 0 20px 20px;
    grid-template-columns: 1.35fr repeat(4, 1fr);
    padding: 30px 35px 38px;
    display: grid;
}
.process > div {
    padding-right: 35px;
}
.process h2 {
    margin: 12px 0;
    font-size: 30px;
}
.process > div p {
    font-size: 13px;
}
.process article {
    text-align: center;
    padding: 0 18px;
    position: relative;
}
.process article:not(:last-child):after {
    content: "····";
    color: #9487ff;
    letter-spacing: 6px;
    position: absolute;
    top: 22px;
    right: -23px;
}
.process article .icon-bubble {
    flex-basis: 54px;
    width: 54px;
    height: 54px;
}
.process article h3 {
    margin: 14px 0 8px;
    font-size: 12px;
}
.process article p {
    font-size: 11px;
    line-height: 1.55;
}
.team-section {
    text-align: center;
}
.team-section h2 {
    margin: 12px 0;
    font-size: 38px;
}
.team-grid {
    text-align: left;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
    margin-top: 28px;
    display: grid;
}
.team-card {
    background: linear-gradient(150deg, #f7f4ff, #fff);
    border: 1px solid #efedf7;
    border-radius: 16px;
    padding: 14px;
    overflow: hidden;
}
.team-photo {
    aspect-ratio: 1.55;
    background-image: url(./team-sprite.webp);
    background-repeat: no-repeat;
    background-size: 200% 200%;
    border-radius: 12px;
}
.person-0 {
    background-position: 0 0;
}
.person-1 {
    background-position: 100% 0;
}
.person-2 {
    background-position: 0 100%;
}
.person-3 {
    background-position: 100% 100%;
}
.team-card h3 {
    margin: 12px 3px 4px;
    font-size: 16px;
}
.team-card strong {
    color: var(--purple);
    margin: 0 3px;
    font-size: 11px;
}
.team-card p {
    margin: 7px 3px;
    font-size: 12px;
    line-height: 1.5;
}
.services-hero {
    grid-template-columns: 52% 48%;
    align-items: center;
    min-height: 430px;
    display: grid;
}
.services-hero h1 {
    font-size: 60px;
}
.services-visual {
    height: 430px;
}
.services-visual > img {
    height: 420px;
}
.services-visual .hero-orb {
    width: 360px;
    height: 360px;
}
.services-visual .leads {
    top: 70px;
    left: -1%;
}
.services-visual .roi {
    top: 180px;
    right: 0;
}
.services-visual .rating {
    bottom: 18px;
    left: -6%;
}
.services-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    display: grid;
}
.services-grid .service-card {
    min-height: 200px;
    padding: 28px;
}
.services-grid .service-card h3 {
    font-size: 18px;
}
.services-grid .service-card p {
    font-size: 14px;
}
.section-heading {
    text-align: center;
    margin-top: 55px;
}
.section-heading h2 {
    margin-top: 12px;
    font-size: 38px;
}
.delivery {
    grid-template-columns: repeat(4, 1fr);
    gap: 50px;
    margin-top: 28px;
    display: grid;
}
.delivery article {
    border: 1px solid var(--border);
    background: #fff;
    border-radius: 16px;
    gap: 16px;
    padding: 25px 18px;
    display: flex;
    position: relative;
}
.delivery article:not(:last-child):after {
    content: "····→";
    color: #a69df5;
    letter-spacing: 3px;
    position: absolute;
    top: 50%;
    right: -46px;
}
.delivery .step {
    color: #d6d1ec;
    font-size: 9px;
    position: absolute;
    top: 14px;
    left: 17px;
}
.delivery .icon-bubble {
    flex-basis: 50px;
    width: 50px;
    height: 50px;
}
.delivery h3 {
    margin: 5px 0 7px;
    font-size: 14px;
}
.delivery p {
    font-size: 12px;
    line-height: 1.55;
}
.package-band {
    background: linear-gradient(110deg, #f3efff, #fcfbff);
    border: 1px solid #ddd6ff;
    border-radius: 18px;
    grid-template-columns: 1.45fr repeat(3, 1fr);
    align-items: center;
    gap: 25px;
    margin-top: 30px;
    padding: 30px 36px;
    display: grid;
}
.package-band > div {
    align-items: center;
    gap: 22px;
    display: flex;
}
.package-band h2 {
    font-size: 25px;
}
.package-icon {
    width: 70px;
    height: 70px;
    color: var(--purple);
    background: #ded6ff;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    font-size: 35px;
    display: flex;
}
.package-band article {
    align-items: center;
    gap: 12px;
    display: flex;
}
.package-band article .icon-bubble {
    flex-basis: 46px;
    width: 46px;
    height: 46px;
    font-size: 18px;
}
.package-band h3 {
    margin-bottom: 6px;
    font-size: 12px;
}
.package-band p {
    font-size: 11px;
    line-height: 1.5;
}
.portfolio-head,
.blog-head {
    margin-top: 25px;
}
.portfolio-head h1,
.blog-head h1 {
    margin: 18px 0 8px;
    font-size: 70px;
}
.portfolio-head p,
.blog-head p {
    max-width: 580px;
    font-size: 19px;
}
.filter-row {
    grid-template-columns: repeat(6, 1fr);
    gap: 18px;
    margin: 40px 80px 32px;
    display: grid;
}
.filter-row button {
    border: 1px solid var(--border);
    height: 55px;
    color: var(--navy);
    background: #fff;
    border-radius: 999px;
    font-weight: 700;
}
.filter-row button.active {
    color: #fff;
    background: linear-gradient(120deg, #5634ff, #8b3ff4);
    border-color: #0000;
    box-shadow: 0 10px 24px #5534ff2e;
}
.portfolio-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    display: grid;
}
.portfolio-card,
.blog-card {
    border: 1px solid var(--border);
    background: #fff;
    border-radius: 18px;
    transition: all 0.25s;
    overflow: hidden;
    box-shadow: 0 10px 32px #3637620f;
}
.portfolio-card:hover,
.blog-card:hover {
    box-shadow: var(--shadow);
    transform: translateY(-5px);
}
.sprite {
    background-color: #eef1ff;
    background-repeat: no-repeat;
}
.portfolio-tile,
.blog-tile {
    aspect-ratio: 1.52;
    background-size: 300% 200%;
}
.portfolio-tile {
    background-image: url(./portfolio-sprite.webp);
}
.blog-tile {
    background-image: url(./blog-sprite.webp);
}
.tile-0 {
    background-position: 0 0;
}
.tile-1 {
    background-position: 50% 0;
}
.tile-2 {
    background-position: 100% 0;
}
.tile-3 {
    background-position: 0 100%;
}
.tile-4 {
    background-position: 50% 100%;
}
.tile-5 {
    background-position: 100% 100%;
}
.card-body {
    padding: 18px 20px 22px;
}
.mini-tag {
    color: var(--purple);
    text-transform: uppercase;
    background: #eeeaff;
    border-radius: 999px;
    padding: 5px 10px;
    font-size: 9px;
    font-weight: 800;
    display: inline-flex;
}
.card-body h3 {
    margin: 11px 0 5px;
    font-size: 20px;
}
.card-body p {
    font-size: 15px;
}
.case-study {
    background: #ffffffb3;
    border: 1px solid #d9d2ff;
    border-radius: 20px;
    grid-template-columns: 34% 66%;
    margin-top: 45px;
    display: grid;
    overflow: hidden;
}
.case-study > div:first-child {
    border-right: 1px solid var(--border);
    padding: 38px;
}
.case-study > div:first-child > strong {
    color: var(--purple);
}
.case-study h2 {
    margin: 15px 0 12px;
    font-size: 25px;
}
.case-study p {
    margin-bottom: 18px;
    font-size: 14px;
}
.case-study .button {
    min-height: 45px;
    padding: 0 18px;
    font-size: 12px;
}
.case-stats {
    grid-template-columns: repeat(4, 1fr);
    align-items: center;
    padding: 20px;
    display: grid;
}
.case-stats .stat {
    text-align: center;
    flex-direction: column;
    gap: 12px;
    padding: 12px;
}
.case-stats .stat > div {
    align-items: center;
}
.case-stats .stat strong {
    font-size: 25px;
}
.case-stats .stat span {
    font-size: 11px;
}
.blog-head {
    flex-direction: column;
    display: flex;
}
.blog-head p {
    max-width: 710px;
}
.blog-tools {
    flex-direction: column;
    align-items: flex-end;
    margin: 25px 0 28px;
    display: flex;
}
.blog-tools > input {
    border: 1px solid var(--border);
    background: #fff;
    border-radius: 10px;
    outline: none;
    width: 390px;
    height: 50px;
    padding: 0 18px;
}
.blog-tools > input:focus {
    border-color: var(--purple);
    box-shadow: 0 0 0 3px #ede9ff;
}
.filter-row.compact {
    gap: 10px;
    margin: 24px 0 0;
    display: flex;
}
.filter-row.compact button {
    height: 35px;
    padding: 0 18px;
    font-size: 11px;
}
.featured-post {
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    background: #fff;
    border-radius: 20px;
    grid-template-columns: 45% 55%;
    align-items: center;
    gap: 35px;
    padding: 20px;
    display: grid;
}
.featured-post .blog-tile {
    border-radius: 14px;
}
.featured-post > div:last-child {
    padding: 15px;
}
.blog-meta {
    color: var(--text);
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    display: flex;
}
.featured-post h2 {
    margin: 22px 0 15px;
    font-size: 32px;
    line-height: 1.25;
}
.featured-post p {
    margin-bottom: 18px;
    font-size: 15px;
}
.blog-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 28px;
    display: grid;
}
.blog-card .card-body h3 {
    font-size: 18px;
    line-height: 1.3;
}
.blog-card .card-body p {
    margin-bottom: 16px;
    font-size: 13px;
    line-height: 1.55;
}
.empty-state {
    text-align: center;
    padding: 50px;
}
.newsletter {
    color: #fff;
    background: linear-gradient(110deg, #5433ff, #9143ec);
    border-radius: 18px;
    grid-template-columns: auto 1.2fr 1.8fr;
    align-items: center;
    gap: 28px;
    margin-top: 45px;
    margin-bottom: 45px;
    padding: 35px 45px;
    display: grid;
}
.newsletter h2,
.newsletter p {
    color: #fff;
}
.newsletter h2 {
    font-size: 25px;
}
.newsletter p {
    max-width: 480px;
    font-size: 13px;
}
.newsletter-icon {
    width: 64px;
    height: 64px;
    color: var(--purple);
    background: #fff;
    border-radius: 16px;
    justify-content: center;
    align-items: center;
    font-size: 28px;
    display: flex;
}
.newsletter form {
    gap: 18px;
    display: flex;
}
.newsletter input {
    border: 0;
    border-radius: 9px;
    flex: 1;
    height: 50px;
    padding: 0 18px;
}
.newsletter .button {
    white-space: nowrap;
    min-height: 50px;
    color: var(--purple);
}
.contact-layout {
    grid-template-columns: 47% 53%;
    align-items: start;
    gap: 45px;
    margin-top: 35px;
    display: grid;
}
.contact-intro h1 {
    margin: 18px 0;
    font-size: 62px;
    line-height: 1.12;
}
.contact-intro > p {
    max-width: 550px;
    font-size: 17px;
}
.contact-cards {
    gap: 12px;
    max-width: 520px;
    margin-top: 24px;
    display: grid;
}
.contact-cards article {
    border: 1px solid var(--border);
    background: #fff;
    border-radius: 18px;
    align-items: center;
    gap: 20px;
    padding: 20px;
    display: flex;
}
.contact-cards .icon-bubble {
    flex-basis: 56px;
    width: 56px;
    height: 56px;
}
.contact-cards article > div {
    flex-direction: column;
    gap: 5px;
    display: flex;
}
.contact-cards strong {
    font-size: 13px;
}
.contact-cards a,
.contact-cards b {
    font-size: 16px;
}
.contact-cards small {
    color: var(--text);
}
.follow-row {
    align-items: center;
    gap: 20px;
    margin-top: 18px;
    display: flex;
}
.contact-form {
    box-shadow: var(--shadow);
    background: #fff;
    border: 1px solid #eceef4;
    border-radius: 22px;
    flex-direction: column;
    gap: 15px;
    padding: 42px;
    display: flex;
}
.contact-form h2 {
    font-size: 25px;
}
.contact-form > p {
    margin-top: -8px;
}
.contact-form label {
    flex-direction: column;
    gap: 7px;
    font-size: 13px;
    font-weight: 700;
    display: flex;
}
.contact-form label b {
    color: #ea405c;
}
.contact-form input,
.contact-form select,
.contact-form textarea {
    background: #fff;
    border: 1px solid #d9deea;
    border-radius: 8px;
    outline: none;
    width: 100%;
    padding: 0 16px;
}
.contact-form input,
.contact-form select {
    height: 52px;
}
.contact-form textarea {
    resize: vertical;
    height: 115px;
    padding-top: 15px;
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
    border-color: var(--purple);
    box-shadow: 0 0 0 3px #eeeaff;
}
.form-button {
    width: 100%;
    margin-top: 5px;
}
.contact-form small {
    color: var(--text);
}
.form-status {
    background: #ebfff4;
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 13px;
    color: #087d42 !important;
}
.map-panel {
    border: 1px solid var(--border);
    background-color: #f3f1dc;
    background-image:
        linear-gradient(27deg, #0000 46%, #d2dde4 47% 49%, #0000 50%),
        linear-gradient(153deg, #0000 46%, #d9e3e6 47% 49%, #0000 50%);
    border-radius: 20px;
    height: 300px;
    margin-top: 40px;
    position: relative;
    overflow: hidden;
}
.map-road {
    opacity: 0.8;
    background: #bdcad6;
    border-radius: 20px;
    height: 9px;
    position: absolute;
}
.r1 {
    width: 120%;
    top: 55%;
    left: -10%;
    transform: rotate(-8deg);
}
.r2 {
    width: 70%;
    top: 26%;
    right: -6%;
    transform: rotate(17deg);
}
.r3 {
    width: 75%;
    bottom: 15%;
    left: -15%;
    transform: rotate(25deg);
}
.map-card {
    z-index: 2;
    box-shadow: var(--shadow);
    background: #fff;
    border-radius: 16px;
    gap: 20px;
    padding: 24px;
    display: flex;
    position: absolute;
    top: 50%;
    left: 9%;
    transform: translateY(-50%);
}
.map-card > span,
.map-pin {
    color: var(--purple);
    font-size: 38px;
}
.map-card div {
    flex-direction: column;
    gap: 12px;
    display: flex;
}
.map-card a {
    color: var(--purple);
    font-size: 12px;
}
.map-pin {
    font-size: 48px;
    position: absolute;
    top: 36%;
    left: 53%;
}
.map-label {
    position: absolute;
    top: 56%;
    left: 50%;
}
.faq-teaser {
    border: 1px solid var(--border);
    background: #fff;
    border-radius: 20px;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 30px;
    margin-top: 28px;
    margin-bottom: 45px;
    padding: 32px 60px;
    display: grid;
}
.faq-art {
    color: #fff;
    background: linear-gradient(135deg, #e6e0ff, #754af0);
    border-radius: 30px;
    justify-content: center;
    align-items: center;
    width: 150px;
    height: 110px;
    font-size: 65px;
    font-weight: 800;
    display: flex;
    transform: rotate(-5deg);
}
.faq-teaser h2 {
    margin: 12px 0 4px;
    font-size: 26px;
}
.faq-teaser p {
    font-size: 14px;
}
.faq-teaser .button {
    min-height: 48px;
    font-size: 13px;
}
.center-heading {
    text-align: center;
    margin-top: 35px;
}
.center-heading h1 {
    margin: 18px 0;
    font-size: 60px;
    line-height: 1.15;
}
.center-heading p {
    max-width: 700px;
    margin: auto;
    font-size: 17px;
}
.review-summary {
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    background: #fff;
    border-radius: 18px;
    grid-template-columns: 1.2fr repeat(3, 1fr);
    margin-top: 40px;
    padding: 25px;
    display: grid;
}
.review-summary > div:first-child {
    border-right: 1px solid var(--border);
    flex-direction: column;
    justify-content: center;
    padding: 0 30px;
    display: flex;
}
.review-summary > div:first-child strong {
    font-size: 36px;
}
.review-summary > div:first-child p {
    font-size: 13px;
}
.reviews-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 28px;
    display: grid;
}
.reviews-grid > article {
    border: 1px solid var(--border);
    background: #fff;
    border-radius: 18px;
    padding: 30px;
    position: relative;
    box-shadow: 0 10px 30px #2d305a0d;
}
.quote-mark {
    color: #ded8ff;
    font-family: serif;
    font-size: 65px;
    position: absolute;
    top: 18px;
    right: 25px;
}
.reviews-grid blockquote {
    color: var(--text);
    min-height: 122px;
    margin: 20px 0 25px;
    font-size: 14px;
    line-height: 1.75;
}
.reviewer {
    align-items: center;
    gap: 14px;
    display: flex;
}
.reviewer .icon-bubble {
    flex-basis: 48px;
    width: 48px;
    height: 48px;
    font-size: 13px;
}
.reviewer > div {
    flex-direction: column;
    display: flex;
}
.reviewer span {
    color: var(--text);
    font-size: 11px;
}
.testimonial-highlight {
    background: linear-gradient(135deg, #f3efff, #fff);
    border: 1px solid #ddd7ff;
    border-radius: 20px;
    grid-template-columns: 1.1fr 1fr;
    gap: 50px;
    margin-top: 30px;
    padding: 45px;
    display: grid;
}
.testimonial-highlight h2 {
    margin: 15px 0;
    font-size: 35px;
}
.highlight-grid {
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    display: grid;
}
.highlight-grid > div {
    border: 1px solid var(--border);
    background: #fff;
    border-radius: 14px;
    align-items: center;
    gap: 13px;
    padding: 18px;
    display: flex;
}
.highlight-grid .icon-bubble {
    flex-basis: 44px;
    width: 44px;
    height: 44px;
    font-size: 18px;
}
.highlight-grid strong {
    font-size: 13px;
}
.privacy-hero {
    grid-template-columns: 57% 43%;
    align-items: center;
    min-height: 360px;
    display: grid;
}
.privacy-hero h1 {
    margin: 18px 0 8px;
    font-size: 68px;
}
.privacy-hero > div:first-child > strong {
    color: var(--text);
    font-size: 14px;
}
.privacy-hero p {
    max-width: 700px;
    margin-top: 18px;
    font-size: 16px;
}
.shield-art {
    background: linear-gradient(135deg, #f2eeff, #e1dcff);
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    width: 320px;
    height: 320px;
    margin: auto;
    display: flex;
    position: relative;
}
.shield-art > div {
    clip-path: polygon(50% 0, 95% 20%, 88% 78%, 50% 100%, 12% 78%, 5% 20%);
    color: #fff;
    background: linear-gradient(135deg, #8452ff, #4b37e8);
    border-radius: 90px 90px 110px 110px;
    justify-content: center;
    align-items: center;
    width: 180px;
    height: 210px;
    font-size: 75px;
    display: flex;
    box-shadow: 0 25px 50px #5334ff40;
}
.shield-icon {
    width: 45px;
    height: 45px;
    color: var(--purple);
    box-shadow: var(--shadow);
    background: #fff;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    display: flex;
    position: absolute;
}
.shield-icon.i1 {
    top: 80px;
    left: -10px;
}
.shield-icon.i2 {
    top: 90px;
    right: -10px;
}
.shield-icon.i3 {
    bottom: 20px;
    left: 15px;
}
.privacy-layout {
    grid-template-columns: 72% 28%;
    align-items: start;
    gap: 30px;
    margin-bottom: 45px;
    display: grid;
}
.policy-sections {
    border: 1px solid var(--border);
    background: #fff;
    border-radius: 18px;
    overflow: hidden;
}
.policy-sections article {
    border-bottom: 1px solid var(--border);
    gap: 25px;
    padding: 28px;
    scroll-margin-top: 125px;
    display: flex;
}
.policy-sections article:last-child {
    border: 0;
}
.policy-sections .icon-bubble {
    flex-basis: 58px;
    width: 58px;
    height: 58px;
}
.policy-sections h2 {
    align-items: center;
    gap: 12px;
    font-size: 19px;
    display: flex;
}
.policy-sections h2 span {
    background: var(--purple);
    color: #fff;
    border-radius: 7px;
    justify-content: center;
    align-items: center;
    width: 25px;
    height: 25px;
    font-size: 12px;
    display: inline-flex;
}
.policy-sections p,
.policy-sections li {
    font-size: 13px;
    line-height: 1.7;
}
.policy-sections ul {
    color: var(--text);
    padding-left: 18px;
}
.policy-sections li::marker {
    color: var(--purple);
}
.privacy-layout aside {
    border: 1px solid var(--border);
    background: #fff;
    border-radius: 18px;
    flex-direction: column;
    padding: 28px;
    display: flex;
    position: sticky;
    top: 120px;
}
.privacy-layout aside h2 {
    margin-bottom: 10px;
    font-size: 17px;
}
.privacy-layout aside > a {
    color: var(--text);
    border-left: 2px solid #0000;
    padding: 15px 12px;
    font-size: 12px;
}
.privacy-layout aside > a:hover {
    border-color: var(--purple);
    color: var(--purple);
    background: #f7f5ff;
}
.privacy-note {
    text-align: center;
    background: linear-gradient(135deg, #f8f6ff, #eeebff);
    border-radius: 16px;
    margin-top: 25px;
    padding: 28px 18px;
}
.privacy-note h3 {
    margin: 15px 0 8px;
    font-size: 15px;
}
.privacy-note p {
    font-size: 12px;
}
.privacy-note .button {
    min-height: 42px;
    margin-top: 20px;
    padding: 0 14px;
    font-size: 11px;
}
.cta-band {
    color: #fff;
    background: linear-gradient(110deg, #5132ff, #9945ed);
    border-radius: 18px;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 25px;
    margin-top: 35px;
    margin-bottom: 35px;
    padding: 30px 38px;
    display: grid;
}
.cta-band h2,
.cta-band p {
    color: #fff;
}
.cta-band h2 {
    font-size: 28px;
}
.cta-band p {
    font-size: 14px;
}
.cta-icon {
    width: 62px;
    height: 62px;
    color: var(--purple);
    background: #fff;
    border-radius: 16px;
    justify-content: center;
    align-items: center;
    font-size: 28px;
    display: flex;
}
.cta-band .button {
    min-width: 250px;
    color: var(--purple);
}
.footer {
    border-top: 1px solid var(--border);
    background: #ffffffd6;
    padding-top: 42px;
}
.footer-grid {
    grid-template-columns: 1.45fr repeat(4, 1fr);
    gap: 45px;
    padding-bottom: 35px;
    display: grid;
}
.footer-grid > div {
    flex-direction: column;
    align-items: flex-start;
    display: flex;
}
.footer .logo {
    margin-bottom: 15px;
}
.footer h3 {
    margin-bottom: 15px;
    font-size: 14px;
}
.footer p,
.footer a {
    color: var(--text);
    margin: 3px 0;
    font-size: 12px;
    line-height: 1.65;
}
.footer a:hover {
    color: var(--purple);
}
.footer-brand > p {
    max-width: 260px;
}
.socials {
    gap: 10px;
    margin-top: 15px;
    display: flex;
}
.socials a {
    background: #2176e7;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    width: 30px;
    height: 30px;
    font-weight: 800;
    color: #fff !important;
    display: flex !important;
}
.socials a:nth-child(2) {
    background: linear-gradient(135deg, #f8b72f, #ed275c, #6b49e8);
}
.socials a:nth-child(3) {
    background: #1674aa;
    font-size: 11px;
}
.socials a:nth-child(4) {
    background: #ee2937;
    font-size: 11px;
}
.footer-bottom {
    border-top: 1px solid var(--border);
    color: #748098;
    justify-content: space-between;
    align-items: center;
    min-height: 58px;
    font-size: 10px;
    display: flex;
}
.whatsapp {
    z-index: 40;
    color: #fff;
    background: linear-gradient(135deg, #6844ff, #4331da);
    border: 4px solid #fff;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    width: 58px;
    height: 58px;
    font-size: 31px;
    display: flex;
    position: fixed;
    bottom: 28px;
    right: 28px;
    box-shadow: 0 15px 35px #3824c247;
}
.portfolio-tile {
    background-size: 300%;
}
.blog-tile {
    background-size: 300% 200%;
}
@media (max-width: 1180px) {
    .site-header {
        gap: 18px;
        padding: 0 20px;
    }
    .logo {
        min-width: 160px;
    }
    .nav {
        gap: 15px;
    }
    .nav a {
        font-size: 12px;
    }
    .phone-pill {
        display: none;
    }
    .hero-copy h1 {
        font-size: 55px;
    }
    .hero-orb {
        width: 430px;
        height: 430px;
    }
    .hero-visual > img {
        height: 540px;
    }
    .traffic,
    .roi {
        right: 0;
    }
    .service-strip {
        grid-template-columns: repeat(3, 1fr);
    }
    .service-strip .service-card:nth-child(n + 4) {
        display: none;
    }
    .logo-row b {
        padding: 0 15px;
        font-size: 15px;
    }
    .services-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .footer-grid {
        grid-template-columns: 1.35fr repeat(3, 1fr);
    }
    .footer-grid > div:nth-child(4) {
        display: none;
    }
    .choose,
    .process {
        grid-template-columns: 1.2fr repeat(4, 1fr);
    }
    .choose-point {
        padding: 0 12px;
    }
    .delivery {
        gap: 25px;
    }
    .delivery article:not(:last-child):after {
        display: none;
    }
    .package-band {
        grid-template-columns: 1.2fr repeat(3, 1fr);
    }
}
@media (max-width: 920px) {
    .shell {
        width: min(100% - 30px, 760px);
    }
    .site-header {
        height: 70px;
        margin-top: 10px;
        top: 10px;
    }
    .menu-button {
        margin-left: auto;
        display: block;
    }
    .header-actions {
        display: none;
    }
    .nav {
        border: 1px solid var(--border);
        height: auto;
        box-shadow: var(--shadow);
        background: #fff;
        border-radius: 16px;
        flex-direction: column;
        gap: 0;
        padding: 15px;
        display: none;
        position: absolute;
        top: 78px;
        left: 0;
        right: 0;
    }
    .nav.open {
        display: flex;
    }
    .nav a {
        padding: 13px 15px;
    }
    .nav a:after {
        display: none;
    }
    .home-hero,
    .about-hero,
    .services-hero {
        grid-template-columns: 1fr;
    }
    .home-hero {
        padding-top: 35px;
    }
    .hero-copy {
        padding-top: 20px;
    }
    .hero-visual {
        min-height: 560px;
    }
    .hero-orb,
    .hero-visual > img {
        right: 50%;
        transform: translate(50%);
    }
    .leads {
        left: 4%;
    }
    .rating,
    .network-icon.google {
        left: 2%;
    }
    .platforms {
        right: 2%;
    }
    .trusted {
        margin-top: 15px;
    }
    .logo-row {
        grid-template-columns: repeat(3, 1fr);
        gap: 25px;
    }
    .logo-row b {
        border: 0;
    }
    .service-strip {
        grid-template-columns: repeat(2, 1fr);
    }
    .service-strip .service-card:nth-child(4) {
        display: flex;
    }
    .home-results {
        grid-template-columns: 1fr;
        padding: 30px;
    }
    .result-points {
        margin-top: 30px;
    }
    .about-copy,
    .services-hero > div:first-child {
        padding-top: 20px;
    }
    .about-visual,
    .services-visual {
        height: 470px;
    }
    .stats-bar {
        grid-template-columns: repeat(2, 1fr);
        gap: 22px;
    }
    .stat:nth-child(2) {
        border: 0;
    }
    .values-grid {
        grid-template-columns: 1fr 1fr;
    }
    .values-grid article:last-child {
        grid-column: 1/-1;
    }
    .choose {
        grid-template-columns: 1fr 1fr;
    }
    .choose-intro {
        grid-column: 1/-1;
        margin-bottom: 25px;
    }
    .choose-point {
        border-top: 1px solid var(--border);
        padding: 20px;
    }
    .process {
        grid-template-columns: 1fr 1fr;
    }
    .process > div {
        grid-column: 1/-1;
        margin-bottom: 25px;
    }
    .process article {
        padding: 15px;
    }
    .process article:after {
        display: none !important;
    }
    .team-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .services-grid,
    .delivery,
    .package-band {
        grid-template-columns: 1fr 1fr;
    }
    .package-band > div {
        grid-column: 1/-1;
    }
    .portfolio-head h1,
    .blog-head h1 {
        font-size: 55px;
    }
    .filter-row {
        grid-template-columns: repeat(3, 1fr);
        margin: 35px 0 25px;
    }
    .portfolio-grid,
    .blog-grid {
        grid-template-columns: 1fr 1fr;
    }
    .case-study {
        grid-template-columns: 1fr;
    }
    .case-study > div:first-child {
        border-right: 0;
        border-bottom: 1px solid var(--border);
    }
    .newsletter {
        grid-template-columns: auto 1fr;
    }
    .newsletter form {
        grid-column: 1/-1;
    }
    .contact-layout {
        grid-template-columns: 1fr;
    }
    .contact-cards {
        grid-template-columns: 1fr 1fr;
        max-width: none;
    }
    .faq-teaser {
        padding: 30px;
    }
    .faq-art {
        width: 100px;
    }
    .reviews-grid {
        grid-template-columns: 1fr 1fr;
    }
    .review-summary {
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }
    .review-summary > div:first-child,
    .review-summary .stat:nth-child(2) {
        border-right: 1px solid var(--border);
    }
    .testimonial-highlight,
    .privacy-layout {
        grid-template-columns: 1fr;
    }
    .privacy-layout aside {
        display: none;
        position: static;
    }
    .privacy-hero {
        grid-template-columns: 1fr;
    }
    .shield-art {
        margin-top: 20px;
    }
    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .footer-grid > div:nth-child(4) {
        display: flex;
    }
}
@media (max-width: 620px) {
    .shell {
        width: calc(100% - 24px);
    }
    .site-header {
        border-radius: 14px;
        padding: 0 14px;
    }
    .logo {
        min-width: 0;
    }
    .logo-mark {
        font-size: 28px;
    }
    .logo-copy strong {
        font-size: 19px;
    }
    .logo-copy small {
        letter-spacing: 4px;
        margin-top: 6px;
        font-size: 6px;
    }
    .hero-copy h1 {
        font-size: 42px;
    }
    .hero-copy > p {
        font-size: 16px;
    }
    .button {
        min-height: 52px;
        padding: 0 20px;
    }
    .button-row {
        gap: 12px;
    }
    .happy-clients {
        margin-top: 25px;
    }
    .hero-visual {
        min-height: 480px;
    }
    .hero-orb {
        width: 340px;
        height: 340px;
        top: 85px;
    }
    .hero-visual > img {
        height: 455px;
    }
    .metric-card {
        min-width: 118px;
        padding: 12px;
    }
    .metric-card strong {
        font-size: 18px;
    }
    .leads {
        top: 180px;
    }
    .traffic {
        top: 70px;
    }
    .roi {
        top: 280px;
    }
    .rating {
        bottom: 8px;
    }
    .network-icon {
        display: none;
    }
    .platforms {
        gap: 12px;
        padding: 10px 13px;
    }
    .platforms span {
        width: 25px;
        height: 25px;
        font-size: 11px;
    }
    .trusted {
        margin-top: 0;
    }
    .logo-row {
        grid-template-columns: 1fr 1fr;
    }
    .logo-row b:last-child {
        display: none;
    }
    .service-strip {
        grid-template-columns: 1fr;
    }
    .service-strip .service-card:nth-child(4) {
        display: none;
    }
    .home-results {
        padding: 25px;
    }
    .result-points {
        grid-template-columns: 1fr;
    }
    .result-points > div {
        border-left: 0;
        border-top: 1px solid var(--border);
        padding: 18px 0;
    }
    .about-copy h1,
    .services-hero h1 {
        font-size: 42px;
    }
    .about-visual,
    .services-visual {
        height: 400px;
    }
    .about-visual .hero-orb,
    .services-visual .hero-orb {
        width: 315px;
        height: 315px;
        right: 50%;
        transform: translate(50%);
    }
    .about-visual > img,
    .services-visual > img {
        height: 395px;
        right: 50%;
        transform: translate(50%);
    }
    .growth-note {
        padding: 12px;
        font-size: 12px;
        bottom: 35px;
        right: 0;
    }
    .stats-bar {
        gap: 14px;
        padding: 18px;
    }
    .stat {
        border: 0;
        padding: 0;
    }
    .stat .icon-bubble {
        flex-basis: 42px;
        width: 42px;
        height: 42px;
        font-size: 16px;
    }
    .stat strong {
        font-size: 18px;
    }
    .stat span {
        font-size: 10px;
    }
    .values-grid,
    .services-grid {
        grid-template-columns: 1fr;
    }
    .values-grid article:last-child {
        grid-column: auto;
    }
    .choose,
    .process {
        grid-template-columns: 1fr;
    }
    .choose-point {
        border-left: 0;
    }
    .team-section h2 {
        font-size: 30px;
    }
    .team-grid {
        grid-template-columns: 1fr;
    }
    .services-visual .leads {
        left: 0;
    }
    .services-visual .roi {
        right: 0;
    }
    .services-visual .rating {
        left: 0;
    }
    .services-grid .service-card {
        min-height: auto;
    }
    .delivery,
    .package-band {
        grid-template-columns: 1fr;
    }
    .portfolio-head h1,
    .blog-head h1 {
        font-size: 44px;
    }
    .portfolio-head p,
    .blog-head p {
        font-size: 15px;
    }
    .filter-row {
        margin: 30px 0 20px;
        padding-bottom: 5px;
        display: flex;
        overflow: auto;
    }
    .filter-row button {
        min-width: 125px;
        height: 44px;
    }
    .portfolio-grid,
    .blog-grid {
        grid-template-columns: 1fr;
    }
    .case-stats {
        grid-template-columns: 1fr 1fr;
    }
    .case-stats .stat:nth-child(2) {
        border-right: 0;
    }
    .cta-band {
        grid-template-columns: auto 1fr;
        padding: 24px;
    }
    .cta-band .button {
        grid-column: 1/-1;
        min-width: 0;
    }
    .cta-band h2 {
        font-size: 21px;
    }
    .featured-post {
        grid-template-columns: 1fr;
        padding: 14px;
    }
    .featured-post h2 {
        font-size: 24px;
    }
    .blog-tools {
        align-items: stretch;
    }
    .blog-tools > input {
        width: 100%;
    }
    .filter-row.compact {
        overflow: auto;
    }
    .newsletter {
        grid-template-columns: 1fr;
        padding: 28px;
    }
    .newsletter-icon {
        display: none;
    }
    .newsletter form {
        flex-direction: column;
        grid-column: auto;
    }
    .contact-intro h1 {
        font-size: 43px;
    }
    .contact-cards {
        grid-template-columns: 1fr;
    }
    .contact-form {
        padding: 25px;
    }
    .map-card {
        padding: 15px;
        left: 20px;
    }
    .map-pin {
        left: 75%;
    }
    .map-label {
        left: 58%;
    }
    .faq-teaser {
        text-align: center;
        grid-template-columns: 1fr;
    }
    .faq-art {
        margin: auto;
    }
    .review-summary {
        grid-template-columns: 1fr;
    }
    .review-summary > div:first-child,
    .review-summary .stat {
        border: 0;
        padding: 15px;
    }
    .reviews-grid {
        grid-template-columns: 1fr;
    }
    .reviews-grid blockquote {
        min-height: 0;
    }
    .testimonial-highlight {
        padding: 25px;
    }
    .highlight-grid {
        grid-template-columns: 1fr;
    }
    .privacy-hero h1 {
        font-size: 46px;
    }
    .shield-art {
        width: 260px;
        height: 260px;
    }
    .shield-art > div {
        width: 145px;
        height: 175px;
    }
    .policy-sections article {
        gap: 15px;
        padding: 22px 16px;
    }
    .policy-sections .icon-bubble {
        flex-basis: 45px;
        width: 45px;
        height: 45px;
        font-size: 18px;
    }
    .policy-sections h2 {
        font-size: 16px;
    }
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 30px;
    }
    .footer-brand {
        grid-column: 1/-1;
    }
    .footer-grid > div:nth-child(4) {
        display: none;
    }
    .footer-bottom {
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        gap: 6px;
    }
    .whatsapp {
        width: 52px;
        height: 52px;
        bottom: 18px;
        right: 18px;
    }
}
html,
body {
    overflow-x: hidden;
}
.animated-counter {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    min-width: 2ch;
    display: inline-block;
}
.contact-layout {
    grid-template-columns: minmax(0, 47fr) minmax(0, 53fr);
}
.contact-layout > * {
    min-width: 0;
}
.service-strip {
    grid-template-columns: repeat(4, 1fr);
}
.service-strip .service-card:nth-child(n) {
    display: flex;
}
.team-photo {
    aspect-ratio: 1;
    background-color: #f0ebff;
    background-size: 200% 200% !important;
}
.values-grid .value-card {
    display: block;
}
.floating-contacts .floating-contact.whatsapp {
    color: #fff;
    background: #20b95a;
    position: relative;
    bottom: auto;
    right: auto;
}
.trust-head {
    border: 1px solid var(--border);
    background: linear-gradient(135deg, #fff, #f3efff);
    border-radius: 22px 22px 0 0;
    grid-template-columns: 1fr 0.85fr;
    align-items: end;
    gap: 55px;
    padding: 35px 40px 25px;
    display: grid;
}
.trust-head h2 {
    margin-top: 12px;
    font-size: 34px;
}
.trust-head > p {
    font-size: 15px;
}
.trusted .client-marquee {
    background: #ffffffb3;
    margin-top: 0;
    padding: 24px 0;
}
.trust-proof-grid {
    border: 1px solid var(--border);
    background: #fff;
    border-top: 0;
    border-radius: 0 0 22px 22px;
    grid-template-columns: repeat(4, 1fr);
    display: grid;
    overflow: hidden;
}
.trust-proof-grid article {
    border-right: 1px solid var(--border);
    flex-direction: column;
    gap: 5px;
    padding: 25px 30px;
    transition: all 0.25s;
    display: flex;
}
.trust-proof-grid article:last-child {
    border-right: 0;
}
.trust-proof-grid strong {
    color: var(--purple);
    font-size: 28px;
}
.trust-proof-grid span {
    color: var(--text);
    font-size: 11px;
    font-weight: 700;
}
.trust-proof-grid article:hover {
    background: var(--lavender);
    transform: translateY(-3px);
}
.growth-stack {
    border: 1px solid var(--border);
    background: linear-gradient(135deg, #fff, #f7f5ff);
    border-radius: 24px;
    grid-template-columns: 32% 68%;
    gap: 45px;
    padding: 45px;
    display: grid;
    box-shadow: 0 22px 55px #362d6e12;
}
.growth-stack-intro {
    align-self: center;
}
.growth-stack-intro h2 {
    margin: 18px 0 14px;
    font-size: 39px;
    line-height: 1.16;
}
.growth-stack-intro p {
    margin-bottom: 24px;
    font-size: 14px;
}
.growth-stack-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    display: grid;
}
.growth-stack-grid article {
    border: 1px solid var(--border);
    background: #fff;
    border-radius: 18px;
    padding: 24px;
    transition: all 0.25s;
}
.growth-stack-grid .icon-bubble {
    flex-basis: 48px;
    width: 48px;
    height: 48px;
    font-size: 17px;
}
.growth-stack-grid h3 {
    margin: 16px 0 7px;
    font-size: 16px;
}
.growth-stack-grid p {
    font-size: 12px;
    line-height: 1.65;
}
.growth-stack-grid article:hover {
    color: var(--navy);
    background: #ece7ff;
    border-color: #a895ff;
    transform: translateY(-6px);
    box-shadow: 0 18px 38px #5334be21;
}
.growth-stack-grid article:hover h3 {
    color: var(--purple);
}
.why-choose-home {
    background: linear-gradient(125deg, #171039, #4a2dcc 52%, #8b3fe6);
    padding: 70px 0;
}
.why-choose-head {
    grid-template-columns: 1fr 0.8fr;
    align-items: end;
    gap: 65px;
    display: grid;
}
.why-choose-head h2 {
    color: #fff;
    max-width: 720px;
    margin-top: 18px;
    font-size: 45px;
    line-height: 1.12;
}
.why-choose-head > div:last-child {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    display: flex;
}
.why-choose-head p {
    color: #e5ddff;
    font-size: 15px;
}
.why-choose-head .button.secondary {
    color: var(--purple);
}
.reasons-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-top: 38px;
    display: grid;
}
.reasons-grid article {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    background: #ffffff1a;
    border: 1px solid #ffffff38;
    border-radius: 19px;
    min-height: 220px;
    padding: 30px;
    transition: all 0.25s;
    position: relative;
    overflow: hidden;
}
.reasons-grid article > span {
    color: #b9a9ff;
    font-size: 34px;
    font-weight: 900;
    display: block;
}
.reasons-grid h3 {
    color: #fff;
    margin: 18px 0 9px;
    font-size: 18px;
}
.reasons-grid p {
    color: #ddd8ef;
    font-size: 12px;
    line-height: 1.7;
}
.reasons-grid article:hover {
    background: #fff;
    border-color: #fff;
    transform: translateY(-7px);
    box-shadow: 0 24px 55px #08052047;
}
.reasons-grid article:hover > span,
.reasons-grid article:hover h3 {
    color: var(--purple);
}
.reasons-grid article:hover p {
    color: var(--text);
}
.reviewer-photo {
    background-image: url(./team-sprite.webp);
    background-repeat: no-repeat;
    background-size: 200% 200%;
    border: 3px solid #fff;
    border-radius: 50%;
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    box-shadow: 0 0 0 1px #dcd6ff;
}
.reviewer-photo.portrait-0 {
    background-position: 0 0;
}
.reviewer-photo.portrait-1 {
    background-position: 100% 0;
}
.reviewer-photo.portrait-2 {
    background-position: 0 100%;
}
.reviewer-photo.portrait-3 {
    background-position: 100% 100%;
}
.review-slider {
    margin-top: 30px;
    padding: 10px 0 28px;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, #0000, #000 4% 96%, #0000);
    mask-image: linear-gradient(90deg, #0000, #000 4% 96%, #0000);
}
.review-slider-track {
    gap: 20px;
    width: max-content;
    animation: 42s linear infinite review-scroll-left;
    display: flex;
}
.review-slider:hover .review-slider-track,
.review-slider:focus-within .review-slider-track {
    animation-play-state: paused;
}
.home-review-card {
    border: 1px solid var(--border);
    background: #fff;
    border-radius: 18px;
    flex: 0 0 calc(min(1400px, 100vw - 48px) / 3 - 13.3333px);
    width: calc(min(1400px, 100vw - 48px) / 3 - 13.3333px);
    min-height: 285px;
    padding: 28px;
    transition:
        transform 0.25s,
        background-color 0.25s,
        border-color 0.25s,
        box-shadow 0.25s;
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 30px #2d305a0f;
}
.home-review-card:hover {
    background: linear-gradient(145deg, #ebe5ff, #fff);
    border-color: #ad9cff;
    transform: translateY(-6px);
    box-shadow: 0 20px 45px #4e36ac26;
}
.review-card-head {
    justify-content: space-between;
    align-items: center;
    margin-bottom: 13px;
    display: flex;
}
.review-card-head .reviewer-photo {
    flex-basis: 58px;
    width: 58px;
    height: 58px;
}
.review-service {
    color: var(--purple);
    background: var(--lavender);
    border-radius: 999px;
    padding: 7px 10px;
    font-size: 9px;
    font-weight: 800;
}
.home-review-card blockquote {
    min-height: 105px;
    color: var(--text);
    margin: 14px 0 20px;
    font-size: 13px;
    line-height: 1.7;
}
@keyframes review-scroll-left {
    to {
        transform: translate(calc(-50% - 10px));
    }
}
.portfolio-card {
    color: inherit;
    display: block;
}
.project-link {
    color: var(--purple);
    align-items: center;
    gap: 7px;
    margin-top: 12px;
    font-size: 11px;
    font-weight: 800;
    display: inline-flex;
}
.project-link b {
    transition: transform 0.2s;
}
.portfolio-card:hover .project-link b {
    transform: translate(3px, -3px);
}
.blog-tile {
    aspect-ratio: 16/9;
}
.article-page {
    padding-top: 20px;
}
.article-header {
    text-align: center;
    max-width: 980px;
    margin: 0 auto 35px;
}
.article-header h1 {
    color: var(--navy);
    margin: 18px auto 16px;
    font-size: clamp(42px, 5vw, 68px);
    line-height: 1.08;
}
.article-header > p {
    max-width: 820px;
    margin: auto;
    font-size: 18px;
    line-height: 1.7;
}
.article-meta {
    color: var(--text);
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 18px;
    font-size: 11px;
    display: flex;
}
.article-hero-image {
    border: 1px solid var(--border);
    max-height: 620px;
    box-shadow: var(--shadow);
    border-radius: 24px;
}
.article-layout {
    grid-template-columns: minmax(0, 1fr) 275px;
    align-items: start;
    gap: 55px;
    max-width: 1120px;
    margin: 55px auto 0;
    display: grid;
}
.article-body {
    min-width: 0;
}
.article-body .article-lead {
    color: #293553;
    font-size: 19px;
    line-height: 1.8;
}
.article-body > section {
    margin-top: 48px;
    scroll-margin-top: 120px;
}
.article-body h2 {
    color: var(--navy);
    margin-bottom: 16px;
    font-size: 30px;
    line-height: 1.25;
}
.article-body p,
.article-body li {
    color: var(--text);
    font-size: 16px;
    line-height: 1.85;
}
.article-body ul {
    gap: 9px;
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
    display: grid;
}
.article-body li {
    padding-left: 28px;
    position: relative;
}
.article-body li:before {
    content: "✓";
    color: var(--purple);
    font-weight: 900;
    position: absolute;
    top: 0;
    left: 0;
}
.article-toc {
    border: 1px solid var(--border);
    background: #fff;
    border-radius: 18px;
    flex-direction: column;
    gap: 5px;
    padding: 25px;
    display: flex;
    position: sticky;
    top: 120px;
    box-shadow: 0 14px 38px #2d305a0f;
}
.article-toc > strong {
    color: var(--navy);
    margin-bottom: 8px;
    font-size: 15px;
}
.article-toc a {
    color: var(--text);
    border-left: 2px solid #0000;
    padding: 9px 10px;
    font-size: 11px;
    line-height: 1.45;
}
.article-toc a:hover {
    border-color: var(--purple);
    color: var(--purple);
    background: var(--lavender);
}
.article-toc hr {
    border: 0;
    border-top: 1px solid var(--border);
    width: 100%;
    margin: 13px 0;
}
.article-toc small {
    color: var(--text);
}
.article-toc b {
    color: var(--purple);
    font-size: 11px;
    line-height: 1.5;
}
.article-service-cta {
    background: linear-gradient(135deg, #f1edff, #fff);
    border: 1px solid #cfc4ff;
    border-radius: 18px;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 24px;
    margin-top: 45px;
    padding: 28px;
    display: grid;
}
.article-service-cta strong {
    color: var(--navy);
    font-size: 19px;
}
.article-service-cta p {
    margin-top: 7px;
    font-size: 13px;
}
.article-service-cta .button {
    min-width: 230px;
}
.article-faq details {
    border: 1px solid var(--border);
    background: #fff;
    border-radius: 13px;
    margin-top: 12px;
}
.article-faq summary {
    color: var(--navy);
    cursor: pointer;
    padding: 18px 20px;
    font-size: 14px;
    font-weight: 800;
}
.article-faq details p {
    padding: 0 20px 20px;
    font-size: 14px;
}
.related-articles .section-heading {
    margin-top: 0;
}
.related-blog-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 28px;
    display: grid;
}
.related-blog-grid > a {
    border: 1px solid var(--border);
    background: #fff;
    border-radius: 18px;
    padding: 28px;
    transition: all 0.25s;
    display: block;
}
.related-blog-grid h3 {
    color: var(--navy);
    margin: 14px 0 9px;
    font-size: 18px;
    line-height: 1.35;
}
.related-blog-grid p {
    min-height: 72px;
    color: var(--text);
    font-size: 13px;
    line-height: 1.65;
}
.related-blog-grid strong {
    color: var(--purple);
    margin-top: 16px;
    font-size: 11px;
    display: inline-block;
}
.related-blog-grid > a:hover {
    background: #f1edff;
    border-color: #a9f;
    transform: translateY(-6px);
    box-shadow: 0 20px 45px #4e36ac24;
}
.seo-overview-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 17px;
    margin-top: 30px;
    display: grid;
}
.seo-overview-grid > a {
    background: #fff;
    border: 1px solid #d9e2f2;
    border-radius: 17px;
    gap: 16px;
    min-height: 165px;
    padding: 24px;
    transition: all 0.25s;
    display: flex;
}
.seo-overview-grid .icon-bubble {
    flex-basis: 48px;
    width: 48px;
    height: 48px;
    font-size: 17px;
}
.seo-overview-grid h3 {
    margin: 3px 0 7px;
    font-size: 16px;
}
.seo-overview-grid p {
    font-size: 11px;
    line-height: 1.6;
}
.seo-overview-grid a span:last-child {
    color: var(--blue);
    margin-top: 9px;
    font-size: 9px;
    font-weight: 800;
    display: inline-block;
}
.seo-overview-grid > a:hover {
    background: #eaf3ff;
    border-color: #70a8ff;
    transform: translateY(-6px);
    box-shadow: 0 18px 42px #236bdc21;
}
.seo-overview-action {
    justify-content: center;
    margin-top: 28px;
    display: flex;
}
.seo-suite {
    background: linear-gradient(135deg, #eef6ff, #fff 58%, #f2efff);
    border-block: 1px solid #d9e5f7;
    padding: 75px 0;
}
.seo-suite-head {
    grid-template-columns: 1fr 0.8fr;
    align-items: end;
    gap: 55px;
    display: grid;
}
.seo-suite-head h2 {
    margin-top: 17px;
    font-size: 42px;
    line-height: 1.15;
}
.seo-suite-head > p {
    font-size: 14px;
}
.seo-module-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-top: 38px;
    display: grid;
}
.seo-module-grid article {
    background: #fff;
    border: 1px solid #dbe4f1;
    border-radius: 19px;
    min-height: 330px;
    padding: 28px;
    scroll-margin-top: 120px;
    transition: all 0.25s;
}
.seo-module-title {
    justify-content: space-between;
    align-items: center;
    display: flex;
}
.seo-module-title .icon-bubble {
    flex-basis: 52px;
    width: 52px;
    height: 52px;
    font-size: 18px;
}
.seo-module-title > span {
    color: #d7e5f8;
    font-size: 30px;
    font-weight: 900;
}
.seo-module-grid h3 {
    margin: 18px 0 8px;
    font-size: 18px;
}
.seo-module-grid p,
.seo-module-grid li {
    font-size: 12px;
    line-height: 1.65;
}
.seo-module-grid ul {
    color: var(--text);
    padding-left: 17px;
}
.seo-module-grid li::marker {
    color: var(--blue);
}
.seo-module-grid article:hover {
    background: #eaf3ff;
    border-color: #6ea6f8;
    transform: translateY(-7px);
    box-shadow: 0 20px 45px #2469cd24;
}
.seo-foundation-note {
    background: #fff;
    border: 1px solid #b8d3f8;
    border-radius: 15px;
    grid-template-columns: auto 1fr;
    gap: 15px;
    margin-top: 25px;
    padding: 22px 25px;
    display: grid;
}
.seo-foundation-note strong {
    color: var(--blue);
}
.seo-foundation-note p {
    font-size: 13px;
}
@media (max-width: 920px) {
    .service-strip {
        grid-template-columns: repeat(2, 1fr);
    }
    .service-strip .service-card:nth-child(n) {
        display: flex;
    }
    .trust-head,
    .growth-stack,
    .why-choose-head,
    .seo-suite-head {
        grid-template-columns: 1fr;
        gap: 25px;
    }
    .trust-proof-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .trust-proof-grid article:nth-child(2) {
        border-right: 0;
    }
    .growth-stack {
        padding: 32px;
    }
    .reasons-grid,
    .seo-overview-grid,
    .seo-module-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .home-review-card {
        flex-basis: calc(50vw - 28px);
        width: calc(50vw - 28px);
    }
    .article-layout {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    .article-toc {
        order: -1;
        position: static;
    }
    .article-service-cta {
        grid-template-columns: 1fr;
    }
    .related-blog-grid {
        grid-template-columns: 1fr 1fr;
    }
}
@media (max-width: 620px) {
    .service-strip {
        grid-template-columns: 1fr;
    }
    .service-strip .service-card:nth-child(n) {
        display: flex !important;
    }
    .values-grid .value-card {
        min-height: auto;
    }
    .team-photo {
        aspect-ratio: 1;
    }
    .trust-head {
        padding: 26px 22px 20px;
    }
    .trust-head h2 {
        font-size: 28px;
    }
    .trust-proof-grid {
        grid-template-columns: 1fr 1fr;
    }
    .trust-proof-grid article {
        padding: 20px 15px;
    }
    .trust-proof-grid strong {
        font-size: 22px;
    }
    .growth-stack {
        padding: 24px;
    }
    .growth-stack-intro h2 {
        font-size: 31px;
    }
    .growth-stack-grid,
    .reasons-grid,
    .seo-overview-grid,
    .seo-module-grid {
        grid-template-columns: 1fr;
    }
    .why-choose-home {
        padding: 55px 0;
    }
    .why-choose-head h2 {
        font-size: 34px;
    }
    .reasons-grid article {
        min-height: auto;
    }
    .reviewer-photo {
        flex-basis: 40px;
        width: 40px;
        height: 40px;
    }
    .review-slider {
        -webkit-mask-image: none;
        mask-image: none;
    }
    .home-review-card {
        flex-basis: calc(100vw - 38px);
        width: calc(100vw - 38px);
        min-height: 275px;
        padding: 24px;
    }
    .article-header h1 {
        font-size: 39px;
    }
    .article-header > p {
        font-size: 16px;
    }
    .article-hero-image {
        border-radius: 15px;
    }
    .article-layout {
        margin-top: 34px;
    }
    .article-body .article-lead {
        font-size: 17px;
    }
    .article-body h2 {
        font-size: 25px;
    }
    .article-body p,
    .article-body li {
        font-size: 15px;
    }
    .article-service-cta {
        padding: 23px;
    }
    .article-service-cta .button {
        min-width: 0;
    }
    .related-blog-grid {
        grid-template-columns: 1fr;
    }
    .seo-suite {
        padding: 55px 0;
    }
    .seo-suite-head h2 {
        font-size: 33px;
    }
    .seo-module-grid article {
        min-height: auto;
    }
    .seo-foundation-note {
        grid-template-columns: 1fr;
    }
    .floating-contacts {
        bottom: 17px;
        right: 17px;
    }
    .floating-contacts .floating-contact {
        width: 52px;
        height: 52px;
        bottom: auto;
        right: auto;
    }
}
@media (prefers-reduced-motion: reduce) {
    .review-slider {
        overflow-x: auto;
    }
    .review-slider-track {
        animation: none;
    }
}