.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    background: var(--text);
    color: var(--bg);
    border-color: var(--text);
    transition: all var(--tr)
}

.btn:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff
}

.btn-outline {
    background: #fff0;
    color: var(--text);
    border-color: var(--border-dark)
}

.btn-outline:hover {
    background: var(--text);
    color: var(--bg);
    border-color: var(--text)
}

.btn .arrow {
    transition: transform var(--tr);
    display: inline-block;
    font-size: .85rem
}

.btn:hover .arrow {
    transform: translate(3px, -3px)
}

.section {
    padding: clamp(56px, 2.5vw, 110px) clamp(20px, 3.5vw, 44px);
    border-top: 1px solid var(--border-light);
    position: relative
}

.section-inner {
    max-width: var(--max-w);
    margin: 0 auto
}

.section-header {
    display: flex;
    align-items: baseline;
    gap: 16px;
    margin-bottom: clamp(28px, 2vw, 52px)
}

.section-num {
    font-size: clamp(2.8rem, 5.5vw, 5rem);
    font-weight: 300;
    color: var(--border);
    line-height: 1;
    letter-spacing: -.04em;
    user-select: none
}

.section-title {
    font-size: clamp(.68rem, .85vw, .78rem);
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--text-muted)
}

.section-fade {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .7s var(--ease), transform .7s var(--ease)
}

.section-fade.visible {
    opacity: 1;
    transform: translateY(0)
}

.rail {
    position: fixed;
    left: 0;
    top: 0;
    width: var(--rail-w);
    height: 100vh;
    z-index: 99;
    background: var(--bg);
    border-right: 1px solid var(--border-light);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(10px, 2.2vh, 22px);
    padding-top: var(--nav-h);
    transition: background .3s ease, border-color .3s ease
}

.rail::before {
    content: "";
    position: absolute;
    left: 50%;
    top: calc(var(--nav-h) + 36px);
    bottom: 36px;
    width: 1px;
    background: var(--border-light);
    transform: translateX(-50%);
    transition: background .3s ease
}

.rail-num {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    background: var(--bg);
    color: var(--border-dark);
    font-size: .72rem;
    font-weight: 400;
    letter-spacing: .04em;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: color .25s ease, background .25s ease, transform .25s ease
}

.rail-num.active {
    color: var(--accent);
    font-weight: 700
}

.rail-num.active::before {
    content: "";
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--accent);
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    opacity: .15
}

.rail-num:hover {
    color: var(--accent);
    transform: scale(1.08)
}

[data-theme="dark"] .rail {
    background: var(--bg);
    border-right-color: var(--border)
}

[data-theme="dark"] .rail::before {
    background: var(--border)
}

[data-theme="dark"] .rail-num {
    background: var(--bg);
    color: var(--text-muted)
}

[data-theme="dark"] .rail-num.active {
    color: var(--accent-light)
}

[data-theme="dark"] .rail-num:hover {
    color: var(--accent-light)
}

@media (max-width:900px) {
    .rail {
        width: 55px
    }
}

@media (max-width:650px) {
    .rail {
        display: none
    }
}

.side-theme-toggle:hover {
    color: var(--accent);
    transform: translateY(-50%) translateX(-3px)
}

.side-theme-sun,
.side-theme-moon {
    font-size: 15px;
    line-height: 1
}

.side-theme-line {
    width: 14px;
    height: 1px;
    background: var(--border)
}

[data-theme="dark"] .side-theme-sun {
    opacity: .35
}

[data-theme="dark"] .side-theme-moon {
    color: var(--accent)
}

@media (max-width:768px) {
    .side-theme-toggle {
        width: 38px;
        height: 82px
    }
}

.d-box {
    fill: var(--bg);
    stroke: var(--border);
    stroke-width: 1
}

.d-box-hi {
    fill: var(--accent-light);
    stroke: var(--accent);
    stroke-width: 1
}

.d-box-alt {
    fill: var(--bg-alt);
    stroke: var(--border);
    stroke-width: .8
}

.d-line-d {
    stroke: var(--border);
    stroke-width: .7;
    fill: none;
    stroke-dasharray: 3, 3
}

.d-curve {
    stroke: var(--border-dark);
    stroke-width: 1.4;
    fill: none
}

.d-text {
    font-family: var(--font);
    font-size: 8.5px;
    font-weight: 600;
    fill: var(--text);
    text-anchor: middle;
    dominant-baseline: central;
    letter-spacing: .04em
}

.d-text-sm {
    font-family: var(--font);
    font-size: 6.5px;
    font-weight: 500;
    fill: var(--text-muted);
    text-anchor: middle;
    dominant-baseline: central;
    letter-spacing: .06em
}

.d-text-accent {
    font-family: var(--font);
    font-size: 9px;
    font-weight: 700;
    fill: var(--accent);
    text-anchor: middle;
    dominant-baseline: central;
    letter-spacing: .04em
}

.d-curve.flow-active {
    animation: path-breathe 6s ease-in-out infinite
}

.d-curve.flow-active:nth-of-type(2) {
    animation-delay: 1.2s
}

.d-curve.flow-active:nth-of-type(3) {
    animation-delay: 2.4s
}

.d-curve.flow-active:nth-of-type(4) {
    animation-delay: 3.6s
}

.d-curve.flow-active:nth-of-type(5) {
    animation-delay: 4.8s
}

@keyframes path-breathe {

    0%,
    100% {
        opacity: .5;
        stroke-width: 1.2
    }

    50% {
        opacity: .75;
        stroke-width: 1.6
    }
}

.tag {
    display: inline-block;
    padding: 4px 10px;
    font-size: .6rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    border: 1px solid var(--border);
    color: var(--text-muted);
    transition: all var(--tr)
}

.tag:hover {
    border-color: var(--accent);
    color: var(--accent)
}

.work-tech {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    font-size: .7rem;
    color: var(--text-muted);
    line-height: 1.6
}

.work-tech span:not(:last-child)::after {
    content: '\00b7';
    margin: 0 5px;
    color: var(--border-dark)
}

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

.svc-card {
    border: 1px solid var(--border);
    background: var(--bg-card);
    padding: clamp(20px, 2.5vw, 32px);
    transition: border-color var(--tr), background-color var(--tr);
    display: flex;
    flex-direction: column;
    position: relative
}

.svc-card:hover {
    border-color: var(--accent);
    background-color: var(--accent-bg)
}

.svc-card:nth-child(1) {
    grid-column: span 6
}

.svc-card:nth-child(2) {
    grid-column: span 6
}

.svc-card:nth-child(3) {
    grid-column: span 4
}

.svc-card:nth-child(4) {
    grid-column: span 4
}

.svc-card:nth-child(5) {
    grid-column: span 4
}

.svc-card:nth-child(6) {
    grid-column: span 12
}

.svc-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px
}

.svc-num {
    font-size: .65rem;
    font-weight: 500;
    color: var(--text-muted);
    letter-spacing: .06em
}

.svc-arrow {
    font-size: 1rem;
    color: var(--accent);
    opacity: 0;
    transform: translateX(-8px);
    transition: all .35s var(--ease)
}

.svc-card:hover .svc-arrow {
    opacity: 1;
    transform: translateX(0)
}

.svc-title {
    font-size: clamp(.95rem, 1.3vw, 1.15rem);
    font-weight: 700;
    margin-bottom: 10px;
    letter-spacing: -.01em;
    transition: transform .35s var(--ease)
}

.svc-card:hover .svc-title {
    transform: translateX(3px)
}

.svc-desc {
    font-size: .88rem;
    line-height: 1.72;
    color: var(--text-sec)
}

.svc-card:nth-child(6) {
    flex-direction: row;
    align-items: center;
    gap: clamp(20px, 3vw, 40px)
}

.svc-card:nth-child(6) .svc-text {
    flex: 1
}

.svc-card:nth-child(6) .svc-visual {
    flex-shrink: 0;
    width: clamp(120px, 15vw, 200px);
    aspect-ratio: 4/3;
    border: 1px solid var(--border-light);
    background: var(--bg-alt);
    display: flex;
    align-items: center;
    justify-content: center
}

.svc-img {
    width: 100%;
    object-fit: contain;
    display: block;
    margin-bottom: 16px;
    border-radius: 8px;
    opacity: .85;
    transition: opacity var(--tr), transform var(--tr)
}

.svc-card:hover .svc-img {
    opacity: 1;
    transform: scale(1.02)
}

.svc-card:nth-child(6) .svc-img {
    height: clamp(100px, 12vw, 140px);
    margin-bottom: 12px
}

.trusted-section {
    width: 100%;
    background: var(--bg);
    border-top: 1px solid var(--border-light);
    border-bottom: 1px solid var(--border-light)
}

.trusted-inner {
    width: 100%;
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 28px clamp(20px, 4vw, 56px) 30px
}

.trusted-label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 24px;
    color: var(--text-muted);
    font-size: .55rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase
}

.trusted-line {
    width: 18px;
    height: 1px;
    background: var(--border-dark)
}

.trusted-logos {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    align-items: center;
    justify-items: center;
    gap: 30px
}

.trusted-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    color: #777;
    opacity: .75;
    transition: opacity var(--tr), color var(--tr), transform var(--tr)
}

.trusted-logo:hover {
    opacity: 1;
    color: var(--accent);
    transform: translateY(-2px)
}

.trusted-logo {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-sec);
    font-size: .8rem;
    font-weight: 600;
    opacity: .7;
    transition: opacity var(--tr), color var(--tr)
}

.trusted-logo:hover {
    opacity: 1;
    color: var(--accent)
}

.trusted-logo img {
    filter: brightness(0) invert(1);
    width: 90px;
    height: 28px;
    object-fit: contain;
    display: block
}

[data-theme="dark"] .trusted-logo img {
    filter: brightness(0) invert(1)
}

.trusted-logo img {
    filter: brightness(1) invert(0)
}

.logo-stripe {
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -.04em
}

.logo-shopify {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: .95rem;
    font-weight: 600
}

.shopify-bag {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 20px;
    border-radius: 3px;
    background: #777;
    color: #fff;
    font-size: .65rem;
    font-weight: 700
}

.logo-google {
    font-size: 1.05rem;
    font-weight: 500;
    letter-spacing: -.04em
}

.logo-microsoft {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: .88rem;
    font-weight: 600
}

.ms-grid {
    display: grid;
    grid-template-columns: repeat(2, 7px);
    grid-template-rows: repeat(2, 7px);
    gap: 2px
}

.ms-grid i {
    display: block;
    background: #777
}

.logo-airbnb {
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -.03em
}

.logo-samsung {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .12em
}

@media (max-width:900px) {
    .trusted-logos {
        grid-template-columns: repeat(3, 1fr);
        row-gap: 24px
    }
}

@media (max-width:520px) {
    .trusted-inner {
        padding: 24px 20px
    }

    .trusted-label {
        font-size: .5rem;
        letter-spacing: .12em
    }

    .trusted-logos {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px
    }

    .trusted-logo {
        min-height: 28px
    }
}

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

/* .work-card {
    border: 1px solid var(--border);
    background: var(--bg-card);
    padding: clamp(18px, 2.5vw, 28px);
    transition: border-color 0.35s var(--ease);
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    border-radius: 4px
}

.work-card:hover {
    border-color: var(--accent)
}

.work-card:focus {
    outline: 2px solid var(--accent);
    outline-offset: 2px
}

.work-card:nth-child(1) {
    grid-column: span 7
}

.work-card:nth-child(2) {
    grid-column: span 5
}

.work-card:nth-child(3) {
    grid-column: span 5
}

.work-card:nth-child(4) {
    grid-column: span 7
}

.work-card:nth-child(5) {
    grid-column: span 6
}

.work-card:nth-child(6) {
    grid-column: span 6
}

.work-card:nth-child(7) {
    grid-column: span 12
}

.work-top {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 10px
}

.work-num {
    font-size: .65rem;
    font-weight: 400;
    color: var(--text-muted);
    letter-spacing: .04em
}

.work-cat {
    font-size: .6rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 4px
}

.work-title {
    font-size: clamp(1.05rem, 1.5vw, 1.3rem);
    font-weight: 700;
    letter-spacing: -.01em;
    margin-bottom: 8px;
    transition: transform 0.35s var(--ease);
    color: var(--text-primary)
}

.work-card:hover .work-title {
    transform: translateX(3px)
}

.work-desc {
    font-size: .88rem;
    line-height: 1.72;
    color: var(--text-sec);
    margin-bottom: 12px
}

.work-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 6px
}

.work-tags .tag {
    display: inline-block;
    padding: 4px 10px;
    background: var(--bg);
    border: 1px solid var(--border-light);
    border-radius: 3px;
    font-size: .65rem;
    font-weight: 500;
    letter-spacing: .02em;
    color: var(--text-sec)
}

.work-tech {
    margin-bottom: 16px;
    font-size: .7rem;
    color: var(--text-muted);
    display: flex;
    flex-wrap: wrap;
    gap: 8px
}

.work-tech span {
    position: relative;
    padding-right: 12px
}

.work-tech span:not(:last-child)::after {
    content: '·';
    position: absolute;
    right: 0;
    color: var(--border)
}

.work-link {
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid var(--border-light);
    align-self: flex-start;
    color: var(--text-sec);
    transition: color var(--tr)
}

.work-link .arrow {
    transition: transform var(--tr);
    display: inline-block;
    font-size: .9rem
}

.work-card:hover .work-link {
    color: var(--accent)
}

.work-card:hover .work-link .arrow {
    transform: translate(3px, -3px)
}

.work-diagram {
    margin-top: 16px;
    border: 1px solid var(--border-light);
    background: var(--bg);
    padding: 14px;
    aspect-ratio: 16 / 9;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 3px
}

.work-diagram img {
    width: 100%;
    height: 100%;
    object-fit: contain
}

.work-diagram svg {
    width: 100%;
    height: 100%
}
 */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s var(--ease)
}

.modal.open {
    opacity: 1;
    pointer-events: all
}

.modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgb(26 26 26 / .85);
    backdrop-filter: blur(4px)
}

.modal-container {
    position: relative;
    width: 90%;
    max-width: 900px;
    max-height: 85vh;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 6px;
    overflow-y: auto;
    z-index: 1;
    transform: translateY(20px);
    transition: transform 0.3s var(--ease)
}

.modal.open .modal-container {
    transform: translateY(0)
}

.modal-close {
    position: sticky;
    top: 20px;
    right: 20px;
    float: right;
    width: 40px;
    height: 40px;
    border: 1px solid var(--border);
    background: var(--bg-card);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.25s var(--ease);
    color: var(--text-sec);
    z-index: 10
}

.modal-close:hover {
    background: var(--bg);
    border-color: var(--accent);
    color: var(--accent);
    transform: rotate(90deg)
}

.modal-content {
    padding: clamp(30px, 5vw, 60px);
    clear: both
}

.modal-num {
    font-size: .7rem;
    font-weight: 400;
    color: var(--text-muted);
    letter-spacing: .04em;
    margin-bottom: 6px
}

.modal-cat {
    font-size: .65rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 12px
}

.modal-title {
    font-size: clamp(1.8rem, 3vw, 2.5rem);
    font-weight: 700;
    letter-spacing: -.02em;
    margin-bottom: 30px;
    color: var(--text-primary)
}

.modal-tech {
    font-size: .85rem;
    color: var(--text-muted);
    line-height: 1.8
}

.modal-back {
    margin-top: 30px;
    padding: 14px 28px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.25s var(--ease);
    display: inline-flex;
    align-items: center;
    gap: 8px
}

.modal-back:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--bg-card)
}

.modal-back .arrow {
    display: inline-block;
    transform: rotate(180deg);
    transition: transform 0.25s var(--ease)
}

.modal-back:hover .arrow {
    transform: rotate(180deg) translate(3px, -3px)
}

.modal-carousel {
    position: relative;
    width: 100%;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    overflow: hidden
}

.carousel-track-container {
    width: 100%;
    height: 400px;
    overflow: hidden;
    position: relative
}

.carousel-track {
    display: flex;
    transition: transform 0.4s cubic-bezier(.4, 0, .2, 1);
    height: 100%
}

.carousel-slide {
    min-width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px
}

.carousel-slide img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 4px
}

.carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--bg-card);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.25s var(--ease);
    z-index: 10;
    color: var(--text-sec)
}

.carousel-btn:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--bg-card);
    transform: translateY(-50%) scale(1.1)
}

.carousel-btn:disabled {
    opacity: .3;
    cursor: not-allowed;
    pointer-events: none
}

.carousel-btn-prev {
    left: 15px
}

.carousel-btn-next {
    right: 15px
}

.carousel-counter {
    position: absolute;
    top: 15px;
    right: 15px;
    background: rgb(26 26 26 / .85);
    color: var(--bg-card);
    padding: 6px 12px;
    border-radius: 20px;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .02em;
    backdrop-filter: blur(4px);
    z-index: 10
}

.carousel-indicators {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 10
}

.carousel-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--border);
    border: none;
    cursor: pointer;
    transition: all 0.25s var(--ease);
    padding: 0
}

.carousel-indicator:hover {
    background: var(--text-muted);
    transform: scale(1.2)
}

.carousel-indicator.active {
    background: var(--accent);
    width: 24px;
    border-radius: 4px
}

@media (max-width:768px) {
    .carousel-track-container {
        height: 300px
    }

    .carousel-btn {
        width: 36px;
        height: 36px
    }

    .carousel-btn-prev {
        left: 10px
    }

    .carousel-btn-next {
        right: 10px
    }

    .carousel-counter {
        top: 10px;
        right: 10px;
        font-size: .7rem;
        padding: 5px 10px
    }
}

@media (max-width:480px) {
    .carousel-track-container {
        height: 250px
    }
}

@media (max-width:1024px) {
    .work-card:nth-child(odd) {
        grid-column: span 6
    }

    .work-card:nth-child(even) {
        grid-column: span 6
    }

    .work-card:nth-child(11) {
        grid-column: span 12
    }
}

@media (max-width:768px) {
    .work-grid {
        grid-template-columns: 1fr;
        gap: 12px
    }

    .work-card {
        grid-column: span 1 !important
    }

    .work-diagram {
        aspect-ratio: 4 / 3
    }

    .modal-container {
        width: 95%;
        max-height: 90vh
    }

    .modal-content {
        padding: 25px
    }

    .modal-close {
        top: 15px;
        right: 15px
    }
}

@media (max-width:480px) {
    .work-card {
        padding: 16px
    }

    .work-title {
        font-size: 1.1rem
    }

    .work-desc {
        font-size: .85rem
    }

    .modal-title {
        font-size: 1.6rem
    }
}

.cap-layout {
    position: relative;
    padding: clamp(40px, 6vw, 80px) 0
}

.cap-bg-grid {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(var(--border-light) 1px, transparent 1px), linear-gradient(90deg, var(--border-light) 1px, transparent 1px);
    background-size: 40px 40px;
    opacity: .3;
    pointer-events: none;
    mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, black 40%, transparent 100%);
    -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, black 40%, transparent 100%)
}

.cap-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
    gap: clamp(20px, 3vw, 32px);
    position: relative;
    z-index: 1
}

.cap-cat {
    position: relative;
    padding: clamp(28px, 4vw, 40px);
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 16px;
    transition: all 0.4s cubic-bezier(.4, 0, .2, 1);
    overflow: hidden;
    isolation: isolate
}

.cap-cat::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--accent) 0%, transparent 100%);
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: -1
}

.cap-cat:hover {
    transform: translateY(-8px);
    border-color: var(--accent);
    box-shadow: 0 20px 40px -10px rgb(0 0 0 / .1), 0 0 0 1px var(--accent)
}

.cap-cat:hover::before {
    opacity: .03
}

.cap-hover-effect {
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, var(--accent) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.6s ease;
    pointer-events: none;
    z-index: -1
}

.cap-cat:hover .cap-hover-effect {
    opacity: .05
}

.cap-icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--accent-light, #f5f1ed) 0%, var(--bg) 100%);
    border: 1px solid var(--border);
    border-radius: 12px;
    margin-bottom: 20px;
    color: var(--accent);
    transition: all 0.3s ease
}

.cap-cat:hover .cap-icon {
    transform: scale(1.1) rotate(5deg);
    border-color: var(--accent);
    box-shadow: 0 8px 16px rgb(0 0 0 / .08)
}

.cap-title {
    font-size: clamp(1.1rem, 2vw, 1.3rem);
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--text);
    margin-bottom: 8px;
    line-height: 1.3
}

.cap-desc {
    font-size: .9rem;
    color: var(--text-sec);
    margin-bottom: 24px;
    line-height: 1.6;
    opacity: .8
}

.cap-list {
    display: flex;
    flex-direction: column;
    gap: 12px
}

.cap-item {
    font-size: .9rem;
    font-weight: 400;
    color: var(--text-sec);
    display: flex;
    align-items: flex-start;
    gap: 12px;
    transition: all 0.3s cubic-bezier(.4, 0, .2, 1);
    cursor: default;
    padding: 4px 0;
    position: relative;
    padding-left: 0
}

.cap-item:hover {
    color: var(--text);
    padding-left: 8px
}

.cap-bullet {
    width: 6px;
    height: 6px;
    background: var(--border);
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 7px;
    transition: all 0.3s ease;
    position: relative
}

.cap-bullet::after {
    content: '';
    position: absolute;
    inset: -4px;
    border: 2px solid var(--accent);
    border-radius: 50%;
    opacity: 0;
    transform: scale(.5);
    transition: all 0.3s ease
}

.cap-item:hover .cap-bullet {
    background: var(--accent);
    transform: scale(1.3)
}

.cap-item:hover .cap-bullet::after {
    opacity: .3;
    transform: scale(1)
}

.cap-connectors {
    position: absolute;
    inset: -20px;
    pointer-events: none;
    z-index: 0;
    opacity: .4
}

.cap-connectors svg {
    width: 100%;
    height: 100%
}

.cap-line {
    stroke: url(#lineGradient);
    stroke-width: 1;
    fill: none;
    stroke-dasharray: 6 4;
    animation: dash 20s linear infinite
}

@keyframes dash {
    to {
        stroke-dashoffset: -100
    }
}

.cap-cat[data-category="web"]:hover {
    --accent: #4A90E2
}

.cap-cat[data-category="marketing"]:hover {
    --accent: #E24A90
}

.cap-cat[data-category="seo"]:hover {
    --accent: #90E24A
}

.cap-cat[data-category="design"]:hover {
    --accent: #E2904A
}

.cap-cat[data-category="business"]:hover {
    --accent: #904AE2
}

@media (max-width:768px) {
    .cap-grid {
        grid-template-columns: 1fr;
        gap: 20px
    }

    .cap-connectors {
        display: none
    }

    .cap-cat {
        padding: 24px
    }

    .cap-icon {
        width: 48px;
        height: 48px
    }

    .cap-icon svg {
        width: 24px;
        height: 24px
    }
}

@media (min-width:769px) and (max-width:1024px) {
    .cap-grid {
        grid-template-columns: repeat(2, 1fr)
    }
}

@media (min-width:1025px) {
    .cap-grid {
        grid-template-columns: repeat(3, 1fr)
    }
}

.cap-cat {
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 0.6s ease forwards
}

.cap-cat:nth-child(1) {
    animation-delay: 0.1s
}

.cap-cat:nth-child(2) {
    animation-delay: 0.2s
}

.cap-cat:nth-child(3) {
    animation-delay: 0.3s
}

.cap-cat:nth-child(4) {
    animation-delay: 0.4s
}

.cap-cat:nth-child(5) {
    animation-delay: 0.5s
}

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

@media (prefers-color-scheme:dark) {
    .cap-cat {
        background: rgb(255 255 255 / .02)
    }

    .cap-bg-grid {
        opacity: .15
    }
}

.process-intro {
    margin-bottom: clamp(48px, 7vw, 80px);
    max-width: 680px
}

.process-intro .h2 {
    margin-bottom: 16px
}

.process-subtitle {
    font-size: 1.05rem;
    color: var(--text-sec);
    opacity: .8
}

.process-container {
    position: relative;
    max-width: 800px
}

.process-progress {
    position: absolute;
    left: 19px;
    top: 0;
    bottom: 0;
    width: 2px;
    z-index: 0
}

.progress-line {
    position: absolute;
    inset: 0;
    background: var(--border);
    opacity: .3
}

.progress-fill {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 0%;
    background: linear-gradient(180deg, var(--text) 0%, var(--text-sec) 100%);
    transition: height 0.6s cubic-bezier(.4, 0, .2, 1)
}

.process-timeline {
    position: relative;
    padding-left: 0
}

.proc-step {
    position: relative;
    padding-bottom: clamp(24px, 3vw, 32px);
    opacity: 0;
    transform: translateX(-20px);
    animation: slideInLeft 0.6s cubic-bezier(.4, 0, .2, 1) forwards
}

.proc-step:nth-child(1) {
    animation-delay: 0.1s
}

.proc-step:nth-child(2) {
    animation-delay: 0.2s
}

.proc-step:nth-child(3) {
    animation-delay: 0.3s
}

.proc-step:nth-child(4) {
    animation-delay: 0.4s
}

.proc-step:nth-child(5) {
    animation-delay: 0.5s
}

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

.proc-connector {
    position: absolute;
    left: 20px;
    top: 40px;
    bottom: -24px;
    width: 1px;
    background: var(--border);
    opacity: .3
}

.proc-step:last-child .proc-connector {
    display: none
}

.proc-card {
    position: relative;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    transition: all 0.4s cubic-bezier(.4, 0, .2, 1);
    overflow: hidden
}

.proc-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--text) 0%, var(--text-sec) 100%);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s cubic-bezier(.4, 0, .2, 1)
}

.proc-step.active .proc-card {
    border-color: var(--text);
    box-shadow: 0 8px 24px rgb(0 0 0 / .08)
}

.proc-step.active .proc-card::before {
    transform: scaleX(1)
}

.proc-header {
    display: flex;
    align-items: center;
    gap: clamp(16px, 2.5vw, 24px);
    width: 100%;
    padding: clamp(20px, 3vw, 28px);
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    transition: background 0.3s ease
}

.proc-header:hover {
    background: rgb(0 0 0 / .01)
}

.proc-header:focus-visible {
    outline: 2px solid var(--text);
    outline-offset: -2px
}

.proc-number-badge {
    position: relative;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    z-index: 1
}

.badge-num {
    font-size: .85rem;
    font-weight: 700;
    color: var(--text-sec);
    transition: all 0.3s ease;
    position: relative;
    z-index: 2
}

.badge-ring {
    position: absolute;
    inset: 0;
    border: 2px solid var(--border);
    border-radius: 50%;
    transition: all 0.4s cubic-bezier(.4, 0, .2, 1)
}

.badge-ring::before {
    content: '';
    position: absolute;
    inset: -6px;
    border: 1px solid var(--border);
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.3s ease
}

.proc-step.active .badge-num {
    color: var(--text);
    font-size: .9rem
}

.proc-step.active .badge-ring {
    border-color: var(--text);
    border-width: 3px;
    transform: scale(1.1)
}

.proc-step.active .badge-ring::before {
    opacity: .2
}

.proc-content-header {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px
}

.proc-title-group {
    flex: 1
}

.proc-title {
    font-size: clamp(1.15rem, 2vw, 1.35rem);
    font-weight: 700;
    letter-spacing: -.02em;
    margin-bottom: 4px;
    transition: color 0.3s ease
}

.proc-subtitle {
    font-size: .85rem;
    color: var(--text-sec);
    opacity: .7;
    letter-spacing: .02em
}

.proc-step.active .proc-title {
    color: var(--text)
}

.proc-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff0;
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-sec);
    transition: all 0.3s ease;
    flex-shrink: 0
}

.proc-step.active .proc-icon {
    background: var(--text);
    border-color: var(--text);
    color: var(--bg);
    transform: scale(1.05)
}

.proc-toggle {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-sec);
    transition: transform 0.4s cubic-bezier(.4, 0, .2, 1);
    flex-shrink: 0
}

.proc-step.active .proc-toggle {
    transform: rotate(180deg)
}

.proc-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s cubic-bezier(.4, 0, .2, 1)
}

.proc-step.active .proc-body {
    max-height: 600px
}

.proc-body-inner {
    padding: 0 clamp(20px, 3vw, 28px) clamp(24px, 3.5vw, 32px);
    border-top: 1px solid var(--border);
    padding-top: clamp(20px, 3vw, 28px);
    margin-top: -1px
}

.proc-desc {
    font-size: .95rem;
    line-height: 1.7;
    color: var(--text-sec);
    margin-bottom: 24px
}

.proc-details {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 24px;
    padding: 16px;
    background: rgb(0 0 0 / .02);
    border-radius: 8px;
    border: 1px solid var(--border-light)
}

.proc-detail-item {
    display: flex;
    flex-direction: column;
    gap: 4px
}

.detail-label {
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--text-sec);
    opacity: .6
}

.detail-value {
    font-size: .9rem;
    font-weight: 600;
    color: var(--text)
}

.proc-checklist {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px
}

.proc-checklist li {
    font-size: .9rem;
    color: var(--text-sec);
    padding-left: 28px;
    position: relative;
    line-height: 1.6
}

.proc-checklist li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 7px;
    width: 16px;
    height: 16px;
    border: 2px solid var(--border);
    border-radius: 3px;
    background: var(--bg);
    transition: all 0.3s ease
}

.proc-checklist li::after {
    content: '✓';
    position: absolute;
    left: 3px;
    top: 5px;
    font-size: .7rem;
    color: var(--bg);
    opacity: 0;
    transform: scale(0);
    transition: all 0.3s cubic-bezier(.4, 0, .2, 1)
}

.proc-step.active .proc-checklist li::before {
    border-color: var(--text);
    background: var(--text)
}

.proc-step.active .proc-checklist li::after {
    opacity: 1;
    transform: scale(1)
}

@media (max-width:640px) {
    .process-progress {
        left: 19px
    }

    .proc-header {
        padding: 16px
    }

    .proc-number-badge {
        width: 36px;
        height: 36px
    }

    .proc-icon {
        width: 32px;
        height: 32px
    }

    .proc-icon svg {
        width: 16px;
        height: 16px
    }

    .proc-details {
        grid-template-columns: 1fr;
        gap: 12px
    }

    .proc-body-inner {
        padding: 16px 16px 20px
    }
}

@media (prefers-color-scheme:dark) {
    .proc-card {
        background: rgb(255 255 255 / .02)
    }

    .proc-details {
        background: rgb(255 255 255 / .03)
    }
}

.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(28px, 4vw, 56px);
    align-items: start
}

.about-intro {
    border-right: 1px solid var(--border);
    padding-right: clamp(24px, 3.5vw, 48px)
}

.about-intro .h3 {
    margin-bottom: 18px
}

.about-intro .body-text {
    margin-bottom: 12px
}

.about-right {
    padding-left: clamp(4px, 1vw, 16px)
}

.about-right>.label {
    margin-bottom: 22px
}

.about-principle {
    margin-bottom: 26px
}

.about-principle:last-child {
    margin-bottom: 0
}

.about-p-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 6px
}

.about-p-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    color: var(--accent);
    opacity: .6;
    margin-top: 2px
}

.about-p-num {
    font-size: .6rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 2px
}

.about-p-title {
    font-size: .98rem;
    font-weight: 600;
    margin-bottom: 6px
}

.about-p-desc {
    font-size: .9rem;
    line-height: 1.75;
    color: var(--text-sec)
}

.testimonials {
    position: relative;
    padding: 120px 0;
    background: var(--bg);
    color: var(--text);
    overflow: hidden;
    transition: background .3s ease, color .3s ease
}

.testimonials-container {
    width: min(1400px, calc(100% - 80px));
    margin: 0 auto
}

.testimonial-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 55px
}

.section-label {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 25px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 3px;
    color: var(--text-muted)
}

.section-label span {
    font-size: 15px;
    color: var(--border-dark)
}

.section-label i {
    width: 35px;
    height: 1px;
    background: var(--border-dark)
}

.testimonial-header h2 {
    margin: 0;
    font-size: clamp(48px, 5vw, 82px);
    line-height: .92;
    font-weight: 700;
    letter-spacing: -4px;
    color: var(--text)
}

.testimonial-header h2 span {
    color: var(--accent)
}

.testimonial-header p {
    max-width: 550px;
    margin: 25px 0 0;
    font-size: 17px;
    line-height: 1.7;
    color: var(--text-sec)
}

.testimonial-nav {
    display: flex;
    gap: 12px
}

.testimonial-nav button {
    width: 56px;
    height: 56px;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: var(--bg-card);
    color: var(--text);
    font-size: 22px;
    cursor: pointer;
    transition: transform .25s ease, background .25s ease, color .25s ease, border-color .25s ease
}

.testimonial-nav button:hover {
    transform: translateY(-3px);
    border-color: var(--border-dark)
}

.testimonial-nav button.active {
    color: #fff;
    background: var(--accent);
    border-color: var(--accent)
}

.testimonials-swiper {
    width: 100%;
    overflow: hidden
}

.testimonials-swiper .swiper-wrapper {
    align-items: stretch
}

.testimonials-swiper .swiper-slide {
    height: auto;
    box-sizing: border-box
}

.testimonials-swiper .testimonial-card {
    height: 100%;
    box-sizing: border-box
}

.testimonial-navigation {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 25px
}

.testimonial-navigation button {
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: var(--bg-card);
    color: var(--text);
    font-size: 18px;
    cursor: pointer;
    transition: .25s ease
}

.testimonial-navigation button:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    transform: translateY(-2px)
}

.testimonial-navigation button.swiper-button-disabled {
    opacity: .35
}

.testimonial-pagination {
    display: flex;
    justify-content: center;
    gap: 7px;
    margin-top: 20px
}

.testimonial-pagination .swiper-pagination-bullet {
    width: 7px;
    height: 7px;
    margin: 0 !important;
    background: var(--border-dark);
    opacity: .45;
    transition: .25s ease
}

.testimonial-pagination .swiper-pagination-bullet-active {
    width: 24px;
    border-radius: 10px;
    background: var(--accent);
    opacity: 1
}

.testimonial-card {
    position: relative;
    min-height: 360px;
    padding: 38px;
    background: var(--glass-card);
    border: 1px solid var(--border);
    border-radius: 20px;
    box-shadow: 0 8px 30px rgb(0 0 0 / .04);
    transition: transform .3s ease, box-shadow .3s ease, background .3s ease, border-color .3s ease
}

.testimonial-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 45px rgb(0 0 0 / .08)
}

.testimonial-card.featured {
    border-color: var(--border-dark);
    background: var(--accent-bg)
}

.featured-label {
    position: absolute;
    top: 28px;
    right: 28px;
    padding: 9px 15px;
    border-radius: 50px;
    background: var(--accent-bg);
    border: 1px solid var(--border);
    color: var(--accent);
    font-size: 11px;
    font-weight: 600
}

.stars {
    margin-bottom: 30px;
    color: #D99A24;
    font-size: 18px;
    letter-spacing: 3px
}

.quote-mark {
    position: absolute;
    top: 55px;
    right: 35px;
    font-family: Georgia, serif;
    font-size: 70px;
    line-height: 1;
    color: var(--border-dark);
    opacity: .7
}

.testimonial-card blockquote {
    position: relative;
    margin: 0;
    max-width: 470px;
    font-size: 19px;
    line-height: 1.65;
    color: var(--text)
}

.client {
    display: flex;
    align-items: center;
    margin-top: 45px;
    padding-top: 25px;
    border-top: 1px solid var(--border)
}

.avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--accent-bg);
    border: 1px solid var(--border);
    color: var(--accent);
    font-size: 14px;
    font-weight: 700
}

.client-info {
    display: flex;
    flex-direction: column;
    margin-left: 14px
}

.client-info strong {
    font-size: 14px;
    color: var(--text)
}

.client-info span {
    margin-top: 5px;
    font-size: 12px;
    color: var(--text-muted)
}

.client-company {
    margin-left: auto;
    font-size: 14px;
    font-weight: 700;
    color: var(--accent)
}

.testimonial-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 38px
}

.testimonial-note {
    position: relative;
    display: flex;
    flex-direction: column;
    font-family: "Caveat", cursive;
    font-size: 21px;
    line-height: 1.05;
    color: var(--text-muted)
}

.note-arrow {
    position: absolute;
    left: 125px;
    top: 25px;
    color: var(--accent);
    font-family: Arial, sans-serif;
    font-size: 35px
}

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

.testimonial-dots span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--border-dark);
    opacity: .55
}

.testimonial-dots span.active {
    background: var(--accent);
    opacity: 1
}

.all-testimonials {
    display: flex;
    align-items: center;
    gap: 15px;
    padding-bottom: 7px;
    border-bottom: 1px solid var(--accent);
    color: var(--accent);
    text-decoration: none;
    font-size: 14px;
    font-weight: 600
}

.all-testimonials span {
    font-size: 20px;
    transition: transform .2s ease
}

.all-testimonials:hover span {
    transform: translateX(5px)
}

@media (min-width:1000px) {
    .testimonials {
        padding: 80px 0
    }

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

    .testimonial-card {
        min-height: auto
    }
}

@media (max-width: 767px) {

    .testimonials {
        padding: 60px 0 65px;
    }

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

    .testimonial-header {
        margin-bottom: 25px;
    }

    .testimonial-header h2 {
        font-size: 34px;
        line-height: .95;
        letter-spacing: -1.5px;
    }

    .testimonial-header p {
        max-width: 100%;
        margin-top: 14px;

        font-size: 11px;
        line-height: 1.5;
    }


    /* =====================================
       SWIPER
    ===================================== */

    .testimonials-swiper {
        width: 100%;
        overflow: hidden;
    }

    .testimonials-swiper .swiper-wrapper {
        align-items: stretch;
    }

    .testimonials-swiper .swiper-slide {
        width: auto;
        height: auto;
    }


    /* =====================================
       COMPACT CARD
    ===================================== */

    .testimonial-card {
        min-height: 185px;

        height: 185px;

        padding: 12px 10px;

        border-radius: 10px;

        box-shadow:
            0 4px 15px rgb(0 0 0 / .04);
    }


    /* =====================================
       STARS
    ===================================== */

    .stars {
        margin-bottom: 10px;

        font-size: 8px;

        letter-spacing: 1px;
    }


    /* =====================================
       QUOTE
    ===================================== */

    .quote-mark {
        top: 25px;
        right: 8px;

        font-size: 32px;
    }


    /* =====================================
       TESTIMONIAL TEXT
    ===================================== */

    .testimonial-card blockquote {

        max-width: 100%;

        margin: 0;

        font-size: 9px;

        line-height: 1.45;

        display: -webkit-box;
        --webkit-line-clamp: 5;
        -webkit-box-orient: vertical;

        overflow: hidden;
    }


    /* =====================================
       CLIENT
    ===================================== */

    .client {

        margin-top: 14px;

        padding-top: 9px;
    }


    .avatar {

        width: 25px;
        height: 25px;

        font-size: 7px;
    }


    .client-info {

        margin-left: 6px;

        min-width: 0;
    }


    .client-info strong {

        font-size: 7px;

        white-space: nowrap;
    }


    .client-info span {

        margin-top: 2px;

        font-size: 5.5px;

        white-space: nowrap;

        overflow: hidden;
        text-overflow: ellipsis;
    }


    .client-company {

        display: none;
    }


    /* =====================================
       FEATURED LABEL
    ===================================== */

    .featured-label {

        top: 8px;
        right: 7px;

        padding: 3px 5px;

        font-size: 5px;
    }


    /* =====================================
       NAVIGATION
    ===================================== */

    .testimonial-navigation {

        justify-content: flex-start;

        margin-top: 15px;

        gap: 7px;
    }

    .testimonial-navigation button {

        width: 32px;
        height: 32px;

        font-size: 13px;
    }


    /* =====================================
       PAGINATION
    ===================================== */

    .testimonial-pagination {

        margin-top: 12px;

        gap: 5px;
    }

    .testimonial-pagination .swiper-pagination-bullet {

        width: 5px;
        height: 5px;
    }

    .testimonial-pagination
    .swiper-pagination-bullet-active {

        width: 16px;
    }


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

    .testimonial-bottom {

        margin-top: 25px;
    }

    .testimonial-note {

        font-size: 15px;
    }

    .all-testimonials {

        font-size: 11px;

        gap: 8px;
    }

    .all-testimonials span {

        font-size: 15px;
    }
}

@media (max-width:380px) {
    .testimonials {
        padding: 60px 0 65px
    }

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

    .testimonial-grid {
        gap: 8px
    }

    .testimonial-card {
        min-height: 190px;
        padding: 15px 13px;
        border-radius: 9px
    }

    .stars {
        font-size: 10px;
        margin-bottom: 18px
    }

    .quote-mark {
        font-size: 38px;
        top: 38px
    }

    .testimonial-card blockquote {
        font-size: 10px;
        line-height: 1.55
    }

    .client {
        margin-top: 20px;
        padding-top: 13px
    }

    .avatar {
        width: 31px;
        height: 31px;
        font-size: 8px
    }

    .client-info strong {
        font-size: 8.5px
    }

    .client-info span {
        font-size: 6.5px
    }

    .testimonial-header h2 {
        font-size: 33px;
        letter-spacing: -1.5px
    }

    .testimonial-header p {
        font-size: 11.5px
    }
}

.about-preview {
    position: relative;
    padding: 90px 0;
    background: var(--bg);
    color: var(--text);
    overflow: hidden
}

.about-inner {
    width: min(1280px, calc(100% - 80px));
    margin: auto;
    display: grid;
    grid-template-columns: 42% 58%;
    align-items: center;
    min-height: 420px
}

.about-content {
    position: relative;
    z-index: 2;
    padding-right: 60px
}

.about-label {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 22px;
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 2px
}

.about-label>span:first-child {
    font-size: 16px;
    color: var(--border-dark)
}

.about-label .line {
    width: 30px;
    height: 1px;
    background: var(--border-dark)
}

.about-content h2 {
    margin: 0 0 22px;
    color: var(--text);
    font-size: clamp(32px, 3vw, 48px);
    line-height: 1.02;
    letter-spacing: -2px;
    font-weight: 700
}

.about-content h2 span {
    color: var(--accent)
}

.about-content p {
    max-width: 480px;
    margin: 0 0 28px;
    color: var(--text-sec);
    font-size: 14px;
    line-height: 1.7
}

.about-btn {
    display: inline-flex;
    align-items: center;
    gap: 15px;
    padding: 14px 20px;
    background: var(--text);
    color: var(--bg);
    text-decoration: none;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .3px;
    transition: transform .3s ease, background .3s ease, color .3s ease
}

.about-btn span {
    font-size: 16px;
    transition: transform .3s ease
}

.about-btn:hover {
    background: var(--accent);
    color: #fff;
    transform: translateY(-2px)
}

.about-btn:hover span {
    transform: translate(3px, -3px)
}

.about-visual {
    position: relative;
    height: 420px;
    display: flex;
    align-items: center;
    justify-content: flex-end
}

.image-wrapper {
    position: relative;
    width: 88%;
    height: 100%;
    overflow: hidden;
    border-radius: 10px
}

.image-wrapper::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgb(0 0 0 / .06), transparent 50%);
    pointer-events: none
}

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

.about-visual:hover img {
    transform: scale(1.04)
}

.about-stat {
    position: absolute;
    display: flex;
    flex-direction: column;
    padding: 18px 22px;
    min-width: 130px;
    background: rgb(255 255 255 / .92);
    color: var(--text);
    border: 1px solid var(--border);
    box-shadow: 0 10px 35px rgb(0 0 0 / .08);
    backdrop-filter: blur(10px);
    z-index: 3
}

.about-stat strong {
    color: var(--accent);
    font-size: 27px;
    line-height: 1;
    margin-bottom: 6px
}

.about-stat span {
    color: var(--text-sec);
    font-size: 10px;
    line-height: 1.3
}

.stat-experience {
    left: 3%;
    bottom: 22px
}

.stat-projects {
    right: -10px;
    bottom: 22px
}

.about-note {
    position: absolute;
    right: -45px;
    top: 28px;
    z-index: 4;
    font-family: "Caveat", cursive;
    color: var(--text-muted);
    font-size: 20px;
    line-height: .95;
    transform: rotate(-7deg)
}

.about-note em {
    color: var(--accent)
}

.about-content,
.about-visual {
    opacity: 0;
    transform: translateY(35px);
    transition: opacity .8s ease, transform .8s ease
}

.about-preview.visible .about-content,
.about-preview.visible .about-visual {
    opacity: 1;
    transform: translateY(0)
}

.about-preview.visible .about-visual {
    transition-delay: .15s
}

@media (max-width:900px) {
    .about-inner {
        width: min(100% - 40px, 650px);
        grid-template-columns: 1fr;
        gap: 45px
    }

    .about-content {
        padding-right: 0
    }

    .about-visual {
        height: 360px
    }

    .image-wrapper {
        width: 100%
    }

    .about-note {
        right: 10px
    }

    .stat-projects {
        right: 10px
    }

    .stat-experience {
        left: 10px
    }
}

@media (max-width:650px) {
    .about-preview {
        padding: 70px 0 75px;
        background: var(--bg);
        color: var(--text);
        overflow: hidden
    }

    .about-inner {
        width: calc(100% - 30px);
        max-width: 520px;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        gap: 38px;
        min-height: auto
    }

    .about-content {
        padding-right: 0;
        width: 100%
    }

    .about-label {
        gap: 8px;
        margin-bottom: 17px;
        color: var(--text-muted);
        font-size: 9px;
        letter-spacing: 1.7px
    }

    .about-label>span:first-child {
        font-size: 14px;
        color: var(--border-dark)
    }

    .about-label .line {
        width: 25px;
        background: var(--border-dark)
    }

    .about-content h2 {
        max-width: 360px;
        margin: 0 0 16px;
        color: var(--text);
        font-size: 36px;
        line-height: 1.01;
        letter-spacing: -1.7px;
        font-weight: 700
    }

    .about-content h2 span {
        color: var(--accent)
    }

    .about-content p {
        max-width: 350px;
        margin: 0 0 22px;
        color: var(--text-sec);
        font-size: 12.5px;
        line-height: 1.65
    }

    .about-btn {
        padding: 13px 17px;
        gap: 13px;
        background: var(--text);
        color: var(--bg);
        font-size: 9.5px;
        letter-spacing: .2px
    }

    .about-btn span {
        font-size: 14px
    }

    .about-btn:hover {
        background: var(--accent);
        color: #fff;
        transform: translateY(-2px)
    }

    .about-visual {
        width: 100%;
        height: 300px;
        display: block;
        position: relative
    }

    .image-wrapper {
        width: 100%;
        height: 100%;
        border-radius: 12px;
        overflow: hidden
    }

    .image-wrapper::after {
        background: linear-gradient(90deg, rgb(0 0 0 / .06), transparent 60%)
    }

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

    .about-stat {
        padding: 13px 15px;
        min-width: 105px;
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: 8px;
        box-shadow: 0 8px 25px rgb(0 0 0 / .08);
        backdrop-filter: blur(10px)
    }

    .about-stat strong {
        margin-bottom: 5px;
        color: var(--accent);
        font-size: 22px;
        line-height: 1
    }

    .about-stat span {
        color: var(--text-sec);
        font-size: 9px;
        line-height: 1.3
    }

    .stat-experience {
        left: 10px;
        bottom: -15px
    }

    .stat-projects {
        right: 10px;
        bottom: -15px
    }

    .about-note {
        right: 7px;
        top: -12px;
        color: var(--text-muted);
        font-size: 17px;
        line-height: .95;
        transform: rotate(-7deg)
    }

    .about-note em {
        color: var(--accent)
    }

    .about-content,
    .about-visual {
        opacity: 0;
        transform: translateY(25px);
        transition: opacity .7s ease, transform .7s ease
    }

    .about-preview.visible .about-content,
    .about-preview.visible .about-visual {
        opacity: 1;
        transform: translateY(0)
    }

    .about-preview.visible .about-visual {
        transition-delay: .12s
    }
}

.agency-services {
    position: relative;
    padding: 110px 0;
    background: var(--bg);
    color: var(--text);
    overflow: hidden
}

.agency-services__container {
    width: min(1280px, calc(100% - 80px));
    margin: 0 auto
}

.agency-services__header {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 80px;
    align-items: end;
    margin-bottom: 55px
}

.agency-services__eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 22px;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 2px
}

.agency-services__eyebrow span {
    color: var(--border-dark);
    font-size: 16px
}

.agency-services__eyebrow i {
    width: 30px;
    height: 1px;
    background: var(--border-dark)
}

.agency-services__heading h2 {
    margin: 0;
    font-size: clamp(42px, 5vw, 45px);
    line-height: .98;
    letter-spacing: -3px;
    font-weight: 700;
    color: var(--text)
}

.agency-services__heading h2 span {
    color: var(--accent)
}

.agency-services__intro {
    max-width: 430px
}

.agency-services__intro p {
    margin: 0;
    color: var(--text-sec);
    font-size: 15px;
    line-height: 1.75
}

.agency-services__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid var(--border);
    border-left: 1px solid var(--border)
}

.agency-service-card {
    position: relative;
    min-height: 265px;
    padding: 30px;
    background: var(--bg-card);
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    transition: background .3s ease, transform .3s ease, box-shadow .3s ease
}

.agency-service-card:hover {
    background: var(--bg-alt);
    transform: translateY(-3px);
    z-index: 2;
    box-shadow: 0 15px 40px rgb(0 0 0 / .08)
}

.agency-service-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 45px
}

.agency-service-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--border-dark);
    border-radius: 8px;
    color: var(--accent);
    font-size: 16px;
    font-weight: 600
}

[data-theme="dark"] .agency-service-card__icon img {
    filter: brightness(0) invert(1)
}

.agency-service-card__top>span {
    color: var(--text-muted);
    font-size: 11px;
    letter-spacing: 1px
}

.agency-service-card h3 {
    margin: 0 0 12px;
    color: var(--text);
    font-size: 18px;
    line-height: 1.2;
    letter-spacing: -.4px
}

.agency-service-card p {
    max-width: 320px;
    margin: 0;
    color: var(--text-sec);
    font-size: 13px;
    line-height: 1.65
}

.agency-service-card>a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--accent);
    text-decoration: none;
    font-size: 11px;
    font-weight: 600;
    opacity: .75
}

.agency-service-card>a span {
    transition: transform .25s ease
}

.agency-service-card:hover>a {
    opacity: 1
}

.agency-service-card:hover>a span {
    transform: translate(3px, -3px)
}

.agency-services__cta {
    position: relative;
    grid-column: span 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 270px;
    padding: 45px 50px;
    background: var(--accent-bg);
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    overflow: hidden
}

.agency-services__cta::before {
    content: "";
    position: absolute;
    width: 300px;
    height: 300px;
    right: -90px;
    bottom: -170px;
    border: 1px solid var(--border-dark);
    border-radius: 50%
}

.agency-services__cta::after {
    content: "";
    position: absolute;
    width: 170px;
    height: 170px;
    right: 30px;
    top: -90px;
    border: 1px solid var(--border-dark);
    border-radius: 50%
}

.agency-services__cta-content {
    position: relative;
    z-index: 2;
    max-width: 570px
}

.agency-services__cta-content>span {
    display: block;
    margin-bottom: 18px;
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 2px
}

.agency-services__cta-content h3 {
    margin: 0 0 15px;
    color: var(--text);
    font-size: clamp(35px, 4vw, 55px);
    line-height: .98;
    letter-spacing: -2px
}

.agency-services__cta-content p {
    max-width: 440px;
    margin: 0 0 25px;
    color: var(--text-sec);
    font-size: 13px;
    line-height: 1.65
}

.agency-services__cta-content a {
    display: inline-flex;
    align-items: center;
    gap: 18px;
    padding: 14px 20px;
    background: var(--text);
    color: var(--bg);
    text-decoration: none;
    font-size: 11px;
    font-weight: 600;
    transition: background .3s ease, color .3s ease, transform .3s ease
}

.agency-services__cta-content a span {
    font-size: 16px
}

.agency-services__cta-content a:hover {
    background: var(--accent);
    color: #fff;
    transform: translateY(-2px)
}

.agency-services__cta-arrow {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 105px;
    height: 105px;
    border: 1px solid var(--border-dark);
    border-radius: 50%;
    color: var(--accent);
    font-size: 40px;
    transform: rotate(-20deg);
    transition: transform .4s ease
}

.agency-services__cta:hover .agency-services__cta-arrow {
    transform: rotate(0deg) scale(1.05)
}

@media (max-width:650px) {
    .agency-services {
        padding: 70px 0 75px;
        background: var(--bg);
        color: var(--text)
    }

    .agency-services__container {
        width: calc(100% - 30px);
        max-width: 520px;
        margin: 0 auto
    }

    .agency-services__header {
        display: block;
        margin-bottom: 35px
    }

    .agency-services__eyebrow {
        gap: 8px;
        margin-bottom: 16px;
        color: var(--text-muted);
        font-size: 9px;
        letter-spacing: 1.7px
    }

    .agency-services__eyebrow span {
        color: var(--border-dark);
        font-size: 14px
    }

    .agency-services__eyebrow i {
        width: 24px;
        background: var(--border-dark)
    }

    .agency-services__heading h2 {
        max-width: 340px;
        margin: 0;
        color: var(--text);
        font-size: 36px;
        line-height: 1;
        letter-spacing: -1.8px
    }

    .agency-services__heading h2 span {
        color: var(--accent)
    }

    .agency-services__intro {
        max-width: 340px;
        margin-top: 16px
    }

    .agency-services__intro p {
        margin: 0;
        color: var(--text-sec);
        font-size: 12px;
        line-height: 1.65
    }

    .agency-services__grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        border: 0
    }

    .agency-service-card {
        position: relative;
        min-height: 205px;
        padding: 18px 16px;
        display: flex;
        flex-direction: column;
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: 10px;
        box-shadow: none;
        transform: none;
        transition: background .3s ease, border-color .3s ease, transform .3s ease
    }

    .agency-service-card:hover {
        background: var(--accent-bg);
        border-color: var(--border-dark);
        transform: translateY(-2px);
        box-shadow: none
    }

    .agency-service-card__top {
        margin-bottom: 25px
    }

    .agency-service-card__icon {
        width: 32px;
        height: 32px;
        background: var(--accent-bg);
        border: 1px solid var(--border-dark);
        border-radius: 7px;
        color: var(--accent);
        font-size: 13px
    }

    .agency-service-card__top>span {
        color: var(--text-muted);
        font-size: 8px;
        letter-spacing: 1px
    }

    .agency-service-card h3 {
        margin: 0 0 8px;
        color: var(--text);
        font-size: 16px;
        line-height: 1.15;
        letter-spacing: -.4px
    }

    .agency-service-card p {
        max-width: 100%;
        margin: 0;
        color: var(--text-sec);
        font-size: 10.5px;
        line-height: 1.55
    }

    .agency-service-card>a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        margin-top: auto;
        padding-top: 14px;
        color: var(--accent);
        text-decoration: none;
        font-size: 9px;
        font-weight: 600;
        opacity: .9
    }

    .agency-service-card>a span {
        font-size: 14px;
        transition: transform .25s ease
    }

    .agency-service-card:hover>a span {
        transform: translate(3px, -3px)
    }

    .agency-services__cta {
        grid-column: 1 / -1;
        position: relative;
        display: block;
        min-height: 270px;
        margin-top: 5px;
        padding: 28px 22px;
        background: var(--accent-bg);
        border: 1px solid var(--border);
        border-radius: 12px;
        overflow: hidden
    }

    .agency-services__cta::before {
        width: 220px;
        height: 220px;
        right: -100px;
        bottom: -130px;
        border-color: var(--border-dark)
    }

    .agency-services__cta::after {
        width: 130px;
        height: 130px;
        right: 10px;
        top: -75px;
        border-color: var(--border-dark)
    }

    .agency-services__cta-content {
        position: relative;
        z-index: 2;
        max-width: 100%
    }

    .agency-services__cta-content>span {
        margin-bottom: 14px;
        color: var(--text-muted);
        font-size: 9px;
        letter-spacing: 1.7px
    }

    .agency-services__cta-content h3 {
        max-width: 260px;
        margin: 0 0 12px;
        color: var(--text);
        font-size: 32px;
        line-height: 1;
        letter-spacing: -1.5px
    }

    .agency-services__cta-content p {
        max-width: 280px;
        margin: 0 0 20px;
        color: var(--text-sec);
        font-size: 11px;
        line-height: 1.6
    }

    .agency-services__cta-content a {
        display: inline-flex;
        align-items: center;
        gap: 13px;
        padding: 12px 16px;
        background: var(--text);
        color: var(--bg);
        font-size: 9px;
        font-weight: 600;
        text-decoration: none
    }

    .agency-services__cta-content a:hover {
        background: var(--accent);
        color: #fff
    }

    .agency-services__cta-arrow {
        position: absolute;
        right: 16px;
        bottom: 18px;
        width: 58px;
        height: 58px;
        border: 1px solid var(--border-dark);
        border-radius: 50%;
        color: var(--accent);
        font-size: 23px;
        transform: rotate(-20deg)
    }

    .agency-services__cta:hover .agency-services__cta-arrow {
        transform: rotate(0deg) scale(1.05)
    }
}

.agency-process {
    position: relative;
    padding: 105px 0;
    background: var(--bg);
    color: var(--text);
    overflow: hidden
}

.agency-process__container {
    width: min(1280px, calc(100% - 80px));
    margin: 0 auto
}

.agency-process__header {
    position: relative;
    z-index: 2;
    margin-bottom: 58px
}

.agency-process__eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 2px
}

.agency-process__eyebrow>span {
    color: var(--border-dark);
    font-size: 17px;
    font-weight: 400
}

.agency-process__eyebrow i {
    display: block;
    width: 30px;
    height: 1px;
    background: var(--border-dark)
}

.agency-process__header h2 {
    margin: 0 0 11px;
    color: var(--text);
    font-size: clamp(36px, 4vw, 55px);
    line-height: 1;
    letter-spacing: -2.5px;
    font-weight: 700
}

.agency-process__header h2 span {
    color: var(--accent)
}

.agency-process__header p {
    margin: 0;
    max-width: 550px;
    color: var(--text-sec);
    font-size: 14px;
    line-height: 1.65
}

.agency-process__steps {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0;
    align-items: start;
    padding-top: 5px
}

[data-theme="dark"] .agency-process__icon img {
    filter: brightness(0) invert(1) !important
}

@media (min-width:1001px) {
    .agency-process__steps::before {
        content: "";
        position: absolute;
        left: 24px;
        right: 24px;
        top: 29px;
        height: 1px;
        background: linear-gradient(90deg, transparent 0%, var(--border-dark) 8%, var(--border-dark) 92%, transparent 100%);
        z-index: 0
    }

    .agency-process__step {
        position: relative;
        min-width: 0;
        padding-right: 35px;
        z-index: 2
    }

    .agency-process__icon {
        position: relative;
        z-index: 3;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 48px;
        height: 48px;
        margin-bottom: 20px;
        background: var(--accent-bg);
        border: 5px solid var(--bg);
        border-radius: 50%;
        box-shadow: 0 0 0 1px var(--border-dark);
        color: var(--accent);
        font-size: 15px;
        transition: background .3s ease, color .3s ease, transform .3s ease, box-shadow .3s ease
    }

    .agency-process__step:hover .agency-process__icon {
        background: var(--accent);
        color: #fff;
        transform: translateY(-4px);
        box-shadow: 0 0 0 1px var(--accent), 0 8px 20px rgb(184 73 73 / .15)
    }

    .agency-process__number {
        position: absolute;
        top: 64px;
        left: 0;
        color: var(--text-muted);
        font-size: 10px;
        font-weight: 600;
        letter-spacing: 1px
    }

    .agency-process__content {
        padding-left: 28px;
        padding-right: 10px
    }

    .agency-process__content h3 {
        margin: 0 0 8px;
        color: var(--text);
        font-size: 15px;
        line-height: 1.25;
        font-weight: 700
    }

    .agency-process__content p {
        max-width: 180px;
        margin: 0;
        color: var(--text-sec);
        font-size: 11px;
        line-height: 1.55
    }

    .agency-process__step:not(:last-child)::after {
        content: "";
        position: absolute;
        top: 27px;
        right: 14px;
        width: 4px;
        height: 4px;
        background: var(--border-dark);
        border-radius: 50%;
        z-index: 4
    }

    .agency-process__connector {
        display: none !important
    }
}

@media (max-width:1000px) {
    .agency-process {
        padding: 85px 0
    }

    .agency-process__container {
        width: min(100% - 50px, 760px)
    }

    .agency-process__header {
        margin-bottom: 45px
    }

    .agency-process__header h2 {
        font-size: 44px
    }

    .agency-process__steps {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 50px 35px;
        padding: 0
    }

    .agency-process__connector {
        display: none !important
    }

    .agency-process__step {
        position: relative;
        min-height: 130px;
        padding: 0
    }

    .agency-process__icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 46px;
        height: 46px;
        margin-bottom: 18px;
        background: var(--accent-bg);
        border: 1px solid var(--border-dark);
        border-radius: 50%;
        color: var(--accent);
        font-size: 15px;
        transition: background .3s ease, color .3s ease, transform .3s ease
    }

    .agency-process__step:hover .agency-process__icon {
        background: var(--accent);
        color: #fff;
        transform: scale(1.05)
    }

    .agency-process__number {
        position: absolute;
        top: 15px;
        left: 60px;
        color: var(--text-muted);
        font-size: 9px;
        letter-spacing: 1px
    }

    .agency-process__content {
        padding-left: 0;
        padding-right: 20px
    }

    .agency-process__content h3 {
        margin: 0 0 8px;
        color: var(--text);
        font-size: 16px
    }

    .agency-process__content p {
        max-width: 300px;
        margin: 0;
        color: var(--text-sec);
        font-size: 12px;
        line-height: 1.6
    }

    .agency-process__steps::before {
        display: none
    }
}

@media (max-width:600px) {
    .agency-process {
        padding: 70px 0
    }

    .agency-process__container {
        width: calc(100% - 32px);
        max-width: 520px;
        margin: 0 auto
    }

    .agency-process__header {
        margin-bottom: 45px
    }

    .agency-process__eyebrow {
        margin-bottom: 17px;
        font-size: 9px;
        letter-spacing: 1.7px
    }

    .agency-process__eyebrow>span {
        font-size: 15px
    }

    .agency-process__eyebrow i {
        width: 25px
    }

    .agency-process__header h2 {
        max-width: 360px;
        margin-bottom: 13px;
        color: var(--text);
        font-size: 35px;
        line-height: 1.02;
        letter-spacing: -1.7px
    }

    .agency-process__header p {
        max-width: 350px;
        color: var(--text-sec);
        font-size: 13px;
        line-height: 1.65
    }

    .agency-process__steps {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 0;
        padding-left: 0
    }

    .agency-process__step::before {
        content: "";
        position: absolute;
        left: 25px;
        top: 24px;
        bottom: 24px;
        width: 1px;
        background: linear-gradient(to bottom, transparent, var(--border-dark) 5%, var(--border-dark) 95%, transparent);
        z-index: 0
    }

    .agency-process__step {
        position: relative;
        display: grid;
        grid-template-columns: 50px 1fr;
        min-height: 125px;
        padding: 0;
        z-index: 2
    }

    .agency-process__icon {
        position: relative;
        z-index: 3;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 50px;
        height: 50px;
        margin: 0;
        background: var(--accent-bg);
        border: 5px solid var(--bg);
        border-radius: 50%;
        box-shadow: 0 0 0 1px var(--border-dark);
        color: var(--accent);
        font-size: 14px;
        transition: background .3s ease, color .3s ease, transform .3s ease
    }

    .agency-process__step:hover .agency-process__icon {
        background: var(--accent);
        color: #fff;
        transform: scale(1.05)
    }

    .agency-process__number {
        position: absolute;
        top: 3px;
        left: 68px;
        color: var(--text-muted);
        font-size: 9px;
        letter-spacing: 1px
    }

    .agency-process__content {
        padding: 20px 0 0 28px
    }

    .agency-process__content h3 {
        margin: 0 0 7px;
        color: var(--text);
        font-size: 17px;
        line-height: 1.2
    }

    .agency-process__content p {
        max-width: 280px;
        margin: 0;
        color: var(--text-sec);
        font-size: 12px;
        line-height: 1.55
    }

    .agency-process__connector {
        display: none !important
    }
}

@media (max-width:380px) {
    .agency-process {
        padding: 60px 0
    }

    .agency-process__container {
        width: calc(100% - 26px)
    }

    .agency-process__header h2 {
        font-size: 31px;
        letter-spacing: -1.4px
    }

    .agency-process__header p {
        font-size: 12px
    }

    .agency-process__step {
        grid-template-columns: 46px 1fr;
        min-height: 120px
    }

    .agency-process__steps::before {
        left: 23px
    }

    .agency-process__icon {
        width: 46px;
        height: 46px
    }

    .agency-process__number {
        left: 62px
    }

    .agency-process__content {
        padding-left: 23px;
        padding-top: 19px
    }

    .agency-process__content h3 {
        font-size: 16px
    }

    .agency-process__content p {
        font-size: 11px
    }
}

.agency-process__header,
.agency-process__step {
    opacity: 0;
    transform: translateY(25px);
    transition: opacity .65s ease, transform .65s ease
}

.agency-process.is-visible .agency-process__header {
    opacity: 1;
    transform: translateY(0)
}

.agency-process.is-visible .agency-process__step {
    opacity: 1;
    transform: translateY(0)
}

.agency-process.is-visible .agency-process__step:nth-child(1) {
    transition-delay: .05s
}

.agency-process.is-visible .agency-process__step:nth-child(3) {
    transition-delay: .15s
}

.agency-process.is-visible .agency-process__step:nth-child(5) {
    transition-delay: .25s
}

.agency-process.is-visible .agency-process__step:nth-child(7) {
    transition-delay: .35s
}

.agency-process.is-visible .agency-process__step:nth-child(9) {
    transition-delay: .45s
}

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

    .agency-process__header,
    .agency-process__step,
    .agency-process__icon {
        transition: none !important;
        opacity: 1;
        transform: none
    }
}

.results-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border: 1px solid var(--border)
}

.result-item {
    padding: clamp(22px, 3vw, 36px);
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 16px;
    transition: background .4s var(--ease);
    opacity: 0;
    transform: translateY(14px)
}

.result-item:nth-child(2n) {
    border-right: none
}

.result-item:nth-child(n+5) {
    border-bottom: none
}

.result-item:hover {
    background: var(--accent-bg)
}

.result-item.result-visible {
    opacity: 1;
    transform: translateY(0);
    transition: opacity .5s var(--ease), transform .5s var(--ease), background .4s var(--ease)
}

.result-text {
    font-size: clamp(.95rem, 1.4vw, 1.25rem);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -.01em
}

.result-item.accent .result-text {
    color: var(--accent)
}

.result-icon {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    color: var(--accent);
    opacity: .5
}

.contact {
    min-height: 70vh;
    display: flex;
    align-items: center;
    background: var(--bg)
}

.contact-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 430px);
    gap: clamp(50px, 8vw, 120px);
    align-items: center;
    width: 100%
}

.contact-left {
    max-width: 650px
}

.contact-eyebrow {
    display: block;
    margin-bottom: 20px;
    font-size: .58rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--accent)
}

.contact-heading {
    margin: 0;
    font-size: clamp(3.2rem, 7vw, 7rem);
    line-height: .88;
    font-weight: 600;
    letter-spacing: -.065em;
    color: var(--text)
}

.contact-heading span {
    color: var(--accent)
}

.contact-description {
    max-width: 500px;
    margin: 30px 0 0;
    font-size: .95rem;
    line-height: 1.8;
    color: var(--text-sec)
}

.contact-info {
    display: flex;
    flex-direction: column;
    max-width: 520px;
    margin-top: 42px;
    border-top: 1px solid var(--border)
}

.contact-link {
    display: grid;
    grid-template-columns: 100px 1fr auto;
    align-items: center;
    padding: 15px 0;
    border-bottom: 1px solid var(--border);
    text-decoration: none;
    transition: padding var(--tr)
}

.contact-link:hover {
    padding-left: 8px
}

.contact-link .label {
    font-size: .56rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--text-muted)
}

.contact-link .value {
    font-size: .88rem;
    font-weight: 500;
    color: var(--text-sec);
    transition: color var(--tr)
}

.contact-link .arrow {
    font-size: 1rem;
    color: var(--accent);
    transition: transform var(--tr)
}

.contact-link:hover .value {
    color: var(--text)
}

.contact-link:hover .arrow {
    transform: translate(3px, -3px)
}

.contact-card {
    position: relative;
    min-height: 430px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 26px;
    border-radius: 24px;
    border: 1px solid darkred;
    color: #fff;
    overflow: hidden
}

.contact-card::before,
.contact-card::after {
    content: '';
    position: absolute;
    border: 1px solid rgb(255 255 255 / .15);
    border-radius: 50%
}

.contact-card::before {
    width: 260px;
    height: 260px;
    right: -100px;
    top: -100px
}

.contact-card::after {
    width: 180px;
    height: 180px;
    right: -70px;
    top: -70px;
    opacity: .7
}

.card-top {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: .58rem;
    font-weight: 600;
    letter-spacing: .14em
}

.card-content {
    position: relative;
    z-index: 2
}

.card-content p {
    max-width: 310px;
    margin: 0 0 32px;
    font-size: clamp(1.5rem, 2.4vw, 2rem);
    line-height: 1.15;
    font-weight: 500;
    letter-spacing: -.025em
}

.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 35px;
    min-width: 155px;
    padding: 14px 18px;
    border-radius: 100px;
    background: #fff;
    color: var(--accent);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    text-decoration: none;
    transition: transform var(--tr), box-shadow var(--tr)
}

.btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgb(0 0 0 / .12)
}

.card-tags {
    position: relative;
    z-index: 2;
    display: flex;
    gap: 10px;
    flex-wrap: wrap
}

.card-tags span {
    padding: 6px 9px;
    border: 1px solid rgb(255 255 255 / .3);
    border-radius: 100px;
    font-size: .48rem;
    font-weight: 600;
    letter-spacing: .1em
}

.map-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 22px
}

.map-header h3 {
    margin: 0;
    font-size: clamp(1.8rem, 3vw, 2.8rem);
    line-height: 1;
    font-weight: 600;
    letter-spacing: -.045em;
    color: var(--text)
}

.map-header h3 span {
    color: var(--accent)
}

.btn-directions {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 11px 17px;
    border: 1px solid var(--border-dark);
    border-radius: 100px;
    color: var(--text);
    font-size: .62rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    text-decoration: none;
    transition: all var(--tr)
}

.btn-directions:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff
}

.map-container {
    position: relative;
    width: 100%;
    height: 360px;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 22px;
    background: var(--bg-alt)
}

.map-container iframe {
    width: 100%;
    height: 100%;
    border: 0;
    filter: grayscale(100%);
    opacity: .8;
    transition: filter var(--tr), opacity var(--tr)
}

.map-container:hover iframe {
    filter: grayscale(20%);
    opacity: 1
}

.map-label {
    position: absolute;
    left: 22px;
    bottom: 22px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: rgb(253 244 244 / .95);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    box-shadow: 0 12px 30px rgb(0 0 0 / .08);
    backdrop-filter: blur(10px)
}

.pin {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    font-size: .55rem
}

.map-label strong {
    display: block;
    font-size: .72rem;
    font-weight: 600;
    color: var(--text)
}

.map-label span {
    display: block;
    margin-top: 2px;
    font-size: .55rem;
    color: var(--text-muted)
}

@media (max-width:900px) {
    .contact {
        min-height: auto
    }

    .contact-inner {
        grid-template-columns: 1fr;
        gap: 50px
    }

    .contact-card {
        min-height: 360px
    }
}

@media (max-width:700px) {
    .map-header {
        flex-direction: column;
        align-items: flex-start
    }

    .map-container {
        height: 300px;
        border-radius: 18px
    }

    .map-label {
        left: 14px;
        bottom: 14px
    }
}

@media (max-width:520px) {
    .contact {
        padding-top: 70px;
        padding-bottom: 70px
    }

    .contact-heading {
        font-size: 3.3rem
    }

    .contact-description {
        font-size: .88rem
    }

    .contact-link {
        grid-template-columns: 80px 1fr auto
    }

    .contact-card {
        min-height: 340px;
        padding: 22px;
        border-radius: 18px
    }

    .card-content p {
        font-size: 1.45rem
    }
}

.floo-footer {
    position: relative;
    margin-left: var(--rail-w);
    padding: 70px clamp(24px, 4vw, 60px) 25px;
    background: var(--bg);
    color: var(--text);
    border-top: 1px solid var(--border);
    overflow: hidden;
    transition: background .3s ease, color .3s ease
}

.floo-footer-inner {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: var(--max-w);
    margin: 0 auto
}

.floo-footer-cta {
    min-height: 260px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 45px 50px;
    background: var(--accent);
    border-radius: 18px;
    position: relative;
    overflow: hidden
}

.floo-footer-cta::before {
    content: "";
    position: absolute;
    width: 330px;
    height: 330px;
    right: -120px;
    bottom: -220px;
    border: 1px solid rgb(255 255 255 / .25);
    border-radius: 50%
}

.floo-footer-cta::after {
    content: "";
    position: absolute;
    width: 190px;
    height: 190px;
    right: 30px;
    top: -130px;
    border: 1px solid rgb(255 255 255 / .18);
    border-radius: 50%
}

.floo-footer-cta-text {
    position: relative;
    z-index: 2
}

.floo-footer-eyebrow {
    display: block;
    margin-bottom: 18px;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 2px;
    color: rgb(255 255 255 / .7)
}

.floo-footer-cta h2 {
    margin: 0;
    font-size: clamp(42px, 5vw, 72px);
    line-height: .88;
    letter-spacing: -3px;
    font-weight: 700;
    color: #fff
}

.floo-footer-cta h2 span {
    color: var(--text)
}

.floo-footer-talk {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 25px;
    padding: 17px 20px 17px 24px;
    background: var(--text);
    color: var(--bg);
    text-decoration: none;
    font-size: 11px;
    font-weight: 600;
    border-radius: 7px;
    transition: transform .3s ease, background .3s ease, color .3s ease
}

.floo-footer-talk b {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid var(--border);
    border-radius: 50%;
    font-size: 15px;
    font-weight: 400
}

.floo-footer-talk:hover {
    transform: translateY(-4px);
    background: #fff;
    color: var(--accent)
}

.floo-footer-main {
    display: grid;
    grid-template-columns: 1.7fr 1fr 1.2fr 1fr;
    gap: 50px;
    padding: 65px 5px 55px
}

.floo-footer-brand {
    display: flex;
    flex-direction: column;
    align-items: flex-start
}

.floo-footer-logo {
    display: inline-flex;
    width: 135px;
    height: auto;
    text-decoration: none
}

.floo-footer-logo img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain
}

[data-theme="dark"] .floo-footer-logo img {
    filter: brightness(0) invert(1)
}

.floo-footer-brand p {
    max-width: 260px;
    margin: 20px 0 25px;
    font-size: 11px;
    line-height: 1.7;
    color: var(--text-sec)
}

.floo-footer-location {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 9px;
    letter-spacing: .06em;
    color: var(--text-muted)
}

.location-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 4px var(--accent-bg)
}

.floo-footer-column {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px
}

.floo-footer-column-title {
    margin-bottom: 8px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--text)
}

.floo-footer-column a {
    position: relative;
    width: fit-content;
    color: var(--text-muted);
    text-decoration: none;
    font-size: 10px;
    line-height: 1.3;
    transition: color .25s ease, transform .25s ease
}

.floo-footer-column a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -3px;
    width: 0;
    height: 1px;
    background: var(--accent);
    transition: width .25s ease
}

.floo-footer-column a:hover {
    color: var(--accent);
    transform: translateX(3px)
}

.floo-footer-column a:hover::after {
    width: 100%
}

.floo-footer-wordmark {
    margin-top: 5px;
    font-size: clamp(80px, 14vw, 205px);
    line-height: .72;
    font-weight: 700;
    letter-spacing: -.09em;
    white-space: nowrap;
    color: #fff0;
    -webkit-text-stroke: 1px var(--border-dark);
    user-select: none;
    opacity: .65
}

.floo-footer-wordmark span {
    color: #fff0
}

.floo-footer-wordmark b {
    color: var(--accent);
    -webkit-text-stroke: 0
}

.floo-footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--border)
}

.floo-footer-bottom span,
.floo-footer-bottom a {
    font-size: 8px;
    letter-spacing: .04em;
    color: var(--text-muted);
    text-decoration: none
}

.floo-footer-bottom div {
    display: flex;
    gap: 20px
}

.floo-footer-bottom a:hover {
    color: var(--accent)
}

@media (max-width:900px) {
    .floo-footer {
        margin-left: 0
    }

    .floo-footer-main {
        grid-template-columns: 1.5fr 1fr 1fr;
        gap: 40px 30px
    }

    .floo-footer-brand {
        grid-row: span 2
    }

    .floo-footer-wordmark {
        font-size: 15vw
    }
}

@media (max-width:650px) {
    .floo-footer {
        margin-left: 0;
        padding: 45px 15px 20px
    }

    .floo-footer-cta {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-end;
        padding: 28px 22px;
        border-radius: 13px
    }

    .floo-footer-cta h2 {
        font-size: 43px;
        line-height: .9;
        letter-spacing: -2px
    }

    .floo-footer-eyebrow {
        margin-bottom: 14px;
        font-size: 8px
    }

    .floo-footer-talk {
        margin-top: 25px;
        padding: 13px 15px 13px 17px;
        gap: 18px;
        font-size: 9px
    }

    .floo-footer-talk b {
        width: 24px;
        height: 24px;
        font-size: 13px
    }

    .floo-footer-main {
        display: grid;
        gap: 40px 25px;
        padding: 45px 3px 35px
    }

    .floo-footer-brand {
        grid-column: 1 / -1;
        grid-row: auto
    }

    .floo-footer-logo {
        width: 120px
    }

    .floo-footer-brand p {
        max-width: 250px;
        margin: 16px 0 20px;
        font-size: 10px
    }

    .floo-footer-column {
        gap: 10px
    }

    .floo-footer-column-title {
        margin-bottom: 6px;
        font-size: 8px;
        letter-spacing: 1.6px
    }

    .floo-footer-column a {
        font-size: 9px
    }

    .floo-footer-wordmark {
        margin-top: 10px;
        font-size: 20vw;
        line-height: .75;
        letter-spacing: -.1em
    }

    .floo-footer-bottom {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
        padding-top: 18px
    }

    .floo-footer-bottom div {
        order: 3;
        gap: 15px
    }

    .floo-footer-bottom span,
    .floo-footer-bottom a {
        font-size: 7.5px
    }
}

@media (max-width:380px) {
    .floo-footer {
        padding-left: 12px;
        padding-right: 12px
    }

    .floo-footer-cta {
        padding: 23px 18px
    }

    .floo-footer-cta h2 {
        font-size: 37px
    }

    .floo-footer-main {
        gap: 35px 18px
    }

    .floo-footer-wordmark {
        font-size: 19vw
    }
}

.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 300;
    background: rgb(250 247 242 / .92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(20px, 4vw, 48px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .35s var(--ease)
}

.modal-overlay.open {
    opacity: 1;
    pointer-events: all
}

.modal-container {
    background: var(--bg);
    border: 1px solid var(--border);
    width: 100%;
    max-width: 780px;
    max-height: 85vh;
    overflow-y: auto;
    position: relative;
    transform: translateY(20px);
    transition: transform .4s var(--ease)
}

.modal-overlay.open .modal-container {
    transform: translateY(0)
}

.modal-close {
    position: sticky;
    top: 0;
    float: right;
    margin: 16px 16px 0 0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    font-weight: 300;
    color: var(--text-sec);
    z-index: 10;
    transition: color var(--tr)
}

.modal-close:hover {
    color: var(--text)
}

.modal-close:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px
}

.modal-content {
    padding: clamp(24px, 4vw, 48px)
}

.modal-num {
    font-size: .65rem;
    font-weight: 500;
    color: var(--text-muted);
    letter-spacing: .06em;
    margin-bottom: 6px
}

.modal-cat {
    font-size: .62rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 12px
}

.modal-title {
    font-size: clamp(1.5rem, 3vw, 2.2rem);
    font-weight: 700;
    letter-spacing: -.025em;
    line-height: 1.15;
    margin-bottom: 28px
}

.modal-section {
    padding-top: 20px;
    border-top: 1px solid var(--border-light)
}

.modal-section:first-of-type {
    border-top: none;
    padding-top: 0
}

.modal-section h3 {
    font-size: .65rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 10px
}

.modal-section p {
    font-size: .92rem;
    line-height: 1.78;
    color: var(--text-sec)
}

.modal-section ul {
    display: flex;
    flex-direction: column;
    gap: 6px
}

.modal-section li {
    font-size: .9rem;
    line-height: 1.7;
    color: var(--text-sec);
    padding-left: 14px;
    position: relative
}

.modal-section li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 10px;
    width: 4px;
    height: 1px;
    background: var(--text-muted)
}

.modal-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px
}

.modal-tech {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    font-size: .85rem;
    color: var(--text-sec)
}

.modal-tech span:not(:last-child)::after {
    content: '\00b7';
    margin: 0 6px;
    color: var(--border-dark)
}

.modal-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 28px;
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-sec);
    transition: color var(--tr);
    cursor: pointer;
    border: none;
    background: none;
    padding: 0
}

.modal-back:hover {
    color: var(--accent)
}

.modal-back .arrow {
    transition: transform var(--tr);
    display: inline-block
}

.modal-back:hover .arrow {
    transform: translate(-3px, -3px)
}

.mobile-menu {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: var(--bg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 28px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .4s var(--ease)
}

.mobile-menu.open {
    opacity: 1;
    pointer-events: all
}

.mobile-menu a {
    font-size: clamp(1.5rem, 4vw, 2.2rem);
    font-weight: 700;
    letter-spacing: -.02em;
    transition: opacity var(--tr), color var(--tr);
    color: var(--text)
}

.mobile-menu a:hover {
    opacity: .5;
    color: var(--accent)
}

.mobile-menu-close {
    position: absolute;
    top: 18px;
    right: 20px;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    font-weight: 300;
    color: var(--text)
}

.mobile-menu-close:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px
}

@keyframes float-d {

    0%,
    100% {
        transform: translateX(-50%) translateY(0)
    }

    50% {
        transform: translateX(-50%) translateY(7px)
    }
}

@keyframes pulse-dot {

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

    50% {
        opacity: .35;
        transform: scale(.8)
    }
}

@keyframes path-breathe {

    0%,
    100% {
        opacity: .5;
        stroke-width: 1.2
    }

    50% {
        opacity: .75;
        stroke-width: 1.6
    }
}

@media(max-width:1023px) {
    .rail {
        display: none
    }

    main,
    .footer {
        margin-left: 0
    }

    .nav {
        left: 0
    }

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

    .work-card:nth-child(n) {
        grid-column: auto
    }

    .svc-card:nth-child(n) {
        grid-column: auto
    }

    .svc-card:nth-child(6) {
        grid-column: span 2
    }

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

    .cap-cat:nth-child(3n) {
        border-right: 1px solid var(--border)
    }

    .cap-cat:nth-child(2n) {
        border-right: none
    }

    .cap-cat:last-child {
        border-right: none
    }

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

    .about-intro {
        border-right: none;
        border-bottom: 1px solid var(--border);
        padding-right: 0;
        padding-bottom: 28px
    }

    .about-right {
        padding-left: 0
    }

    .contact-inner {
        grid-template-columns: 1fr
    }

    .cap-connectors {
        display: none
    }
}

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

    .nav-menu-btn {
        display: flex
    }

    .hero-inner {
        grid-template-columns: 1fr;
        gap: 36px
    }

    .hero-diagram {
        order: -1
    }

    .hero-diagram svg {
        max-width: 320px
    }

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

    .result-item {
        border-right: none !important
    }

    .result-item:nth-child(odd) {
        border-bottom: 1px solid var(--border)
    }

    .result-item:last-child {
        border-bottom: none !important
    }

    .footer-inner {
        flex-direction: column;
        align-items: flex-start
    }

    .footer-bottom {
        flex-direction: column;
        align-items: flex-start
    }
}

@media(max-width:580px) {
    .svc-card:nth-child(6) {
        grid-column: auto;
        flex-direction: column
    }

    .svc-card:nth-child(6) .svc-visual {
        width: 100%;
        max-width: 200px;
        margin: 0 auto
    }

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

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

    .cap-cat {
        border-right: none !important
    }

    .hero-btns {
        flex-direction: column
    }

    .hero-btns .btn {
        justify-content: center
    }

    .process-timeline {
        padding-left: 20px
    }

    .proc-dot {
        left: -18px
    }

    .contact-actions {
        align-items: stretch
    }

    .contact-actions .btn {
        justify-content: center
    }
}

.skip-link {
    position: absolute;
    top: -100%;
    left: 16px;
    background: var(--text);
    color: var(--bg);
    padding: 8px 16px;
    font-size: .78rem;
    font-weight: 600;
    z-index: 9999;
    transition: top .2s;
    border-radius: 0
}

.skip-link:focus {
    top: 8px
}

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px
}

@media(prefers-reduced-motion:reduce) {
    html {
        scroll-behavior: auto
    }

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

    .section-fade {
        opacity: 1;
        transform: none
    }

    .hero-scroll {
        animation: none
    }

    .nav-status .dot {
        animation: none
    }

    .result-item {
        opacity: 1;
        transform: none
    }

    .d-curve.flow-active {
        animation: none
    }
}

#services {
    overflow: hidden;
}

.services-swiper {
    width: 100%;
    overflow: hidden;
}

.services-swiper .swiper-wrapper {
    align-items: stretch;
}

.services-swiper .swiper-slide {
    height: auto;
    box-sizing: border-box;
}

.services-swiper .svc-card {
    height: 100%;
    box-sizing: border-box;
}

/* Navigation */
.services-navigation {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 25px;
}

.services-navigation button {
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid var(--border);
    border-radius: 50%;
    background: var(--bg-card);
    color: var(--text);

    font-size: 18px;
    cursor: pointer;

    transition:
        background .25s ease,
        color .25s ease,
        border-color .25s ease,
        transform .25s ease;
}

.services-navigation button:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    transform: translateY(-2px);
}

.services-navigation button.swiper-button-disabled {
    opacity: .35;
    cursor: not-allowed;
    transform: none;
}

/* Pagination */
.services-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 7px;
    margin-top: 22px;
}

.services-pagination .swiper-pagination-bullet {
    width: 7px;
    height: 7px;
    margin: 0 !important;
    background: var(--border-dark);
    opacity: .45;
    transition:
        width .25s ease,
        background .25s ease,
        opacity .25s ease;
}

.services-pagination .swiper-pagination-bullet-active {
    width: 24px;
    border-radius: 10px;
    background: var(--accent);
    opacity: 1;
}

/* Mobile */
@media (max-width: 650px) {

    .services-swiper {
        overflow: visible;
    }

    .services-navigation {
        justify-content: flex-start;
        margin-top: 20px;
    }

    .services-navigation button {
        width: 40px;
        height: 40px;
        font-size: 16px;
    }

    .services-pagination {
        margin-top: 18px;
    }
}
.transformation-section {
    position: relative;
    padding: 105px 0 65px;
    background: var(--bg);
    color: var(--text);
    overflow: hidden;
    transition: background .3s ease, color .3s ease
}

.transformation-inner {
    width: min(1380px, calc(100% - 70px));
    margin: 0 auto
}

.transformation-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 50px;
    margin-bottom: 45px
}

.transformation-heading {
    max-width: 700px
}

.transformation-label {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 17px;
    color: var(--text-muted);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase
}

.transformation-label span {
    color: var(--accent);
    font-variant-numeric: tabular-nums
}

.transformation-label i {
    width: 27px;
    height: 1px;
    background: var(--border-dark)
}

.transformation-heading h2 {
    margin: 0;
    color: var(--text);
    font-size: clamp(42px, 5vw, 65px);
    font-weight: 700;
    line-height: .91;
    letter-spacing: -.055em
}

.transformation-heading h2 em {
    display: block;
    color: var(--accent);
    font-style: normal
}

.transformation-heading p {
    max-width: 500px;
    margin: 18px 0 0;
    color: var(--text-sec);
    font-size: 12px;
    line-height: 1.65
}

.transformation-note {
    position: absolute;
    top: 10px;
    left: 56%;
    display: flex;
    flex-direction: column;
    max-width: 150px;
    font-family: "Caveat", cursive;
    color: var(--text);
    font-size: 18px;
    line-height: 1.05;
    transform: rotate(-5deg)
}

.transformation-note strong {
    font-weight: 400
}

.transformation-note b {
    position: absolute;
    right: -18px;
    bottom: -30px;
    color: var(--text-muted);
    font-family: Arial, sans-serif;
    font-size: 27px;
    font-weight: 400
}

.transformation-note.after-note {
    left: auto;
    right: 3%;
    transform: rotate(4deg)
}

.transformation-note.after-note strong {
    color: var(--text)
}

.case-meta {
    display: flex;
    flex-direction: column;
    min-width: 190px;
    padding-bottom: 4px;
    text-align: right
}

.case-meta span {
    margin-bottom: 8px;
    color: var(--accent);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .14em
}

.case-meta strong {
    color: var(--text);
    font-size: 11px;
    font-weight: 600
}

.case-meta small {
    margin-top: 5px;
    color: var(--text-muted);
    font-size: 8px
}

.transformation-stage {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, .78fr) 90px minmax(0, 1fr);
    align-items: center;
    gap: 0;
    min-height: 470px;
    padding: 30px;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: var(--bg-card);
    box-shadow: 0 20px 70px rgb(0 0 0 / .06);
    transition: background .3s ease, border-color .3s ease
}

.case-screen {
    min-width: 0
}

.case-before {
    transform: translateY(20px)
}

.case-after {
    transform: translateY(-20px)
}

.screen-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    padding: 0 3px
}

.screen-label {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .1em
}

.screen-label span {
    color: var(--text-muted);
    font-size: 12px
}

.screen-status {
    color: var(--text-muted);
    font-size: 8px;
    letter-spacing: .04em
}

.browser {
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg);
    box-shadow: 0 15px 35px rgb(0 0 0 / .08);
    transition: transform .35s ease, box-shadow .35s ease
}

.browser:hover {
    transform: translateY(-4px);
    box-shadow: 0 25px 50px rgb(0 0 0 / .14)
}

.browser-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 32px;
    padding: 0 10px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-card)
}

.browser-dots {
    display: flex;
    gap: 4px
}

.browser-dots i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--border-dark)
}

.browser-bar>span {
    flex: 1;
    overflow: hidden;
    padding: 4px 9px;
    border-radius: 4px;
    background: var(--bg);
    color: var(--text-muted);
    font-size: 7px;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    text-overflow: ellipsis
}

.browser-content {
    position: relative;
    overflow: hidden
}
#beforeImage{
    object-fit: contain;
}
.browser-content img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    opacity: 1;
    transform: scale(1);
    transition: opacity .35s ease, transform .55s cubic-bezier(.22, 1, .36, 1)
}

.browser-content img.changing {
    opacity: 0;
    transform: scale(1.035) translateY(5px)
}

.browser-content img.changed {
    animation: imageEnter .6s cubic-bezier(.22, 1, .36, 1)
}

@keyframes imageEnter {
    0% {
        opacity: 0;
        transform: scale(1.025) translateY(7px)
    }

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

.browser::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(105deg, transparent 30%, rgb(255 255 255 / .12) 50%, transparent 70%);
    transform: translateX(-120%);
    opacity: 0
}

.browser.refreshing::after {
    opacity: 1;
    animation: screenSweep .7s ease
}

@keyframes screenSweep {
    0% {
        transform: translateX(-120%)
    }

    100% {
        transform: translateX(120%)
    }
}

.transform-circle {
    transition: transform .3s ease, box-shadow .3s ease
}

.transform-circle.refreshing {
    animation: transformPulse .65s ease
}

@keyframes transformPulse {
    0% {
        transform: scale(1);
        box-shadow: 0 10px 25px rgb(184 73 73 / .25)
    }

    45% {
        transform: scale(1.18);
        box-shadow: 0 0 0 8px rgb(184 73 73 / .08), 0 15px 35px rgb(184 73 73 / .38)
    }

    100% {
        transform: scale(1);
        box-shadow: 0 10px 25px rgb(184 73 73 / .25)
    }
}

.case-transform>span {
    transition: color .3s ease, background .3s ease
}

.case-transform.refreshing>span {
    color: var(--accent)
}

.screen-caption {
    transition: opacity .3s ease, transform .3s ease
}

.screen-caption.changing {
    opacity: 0;
    transform: translateY(4px)
}

.screen-caption.changed {
    animation: captionEnter .45s ease
}

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

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

.case-screen.refreshing .browser {
    border-color: var(--accent)
}

.browser {
    transition: border-color .3s ease, box-shadow .3s ease
}

.screen-caption {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 10px
}

.screen-caption span {
    padding: 5px 8px;
    border: 1px solid var(--border);
    border-radius: 50px;
    color: var(--text-muted);
    font-size: 10px;
    line-height: 1
}

.case-after .screen-caption span {
    color: var(--text-sec)
}

.case-after .screen-caption span::first-letter {
    color: var(--accent)
}

.case-transform {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 9px;
    height: 100%
}

.transform-line {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--border);
    transform: translateY(-50%)
}

.transform-circle {
    position: relative;
    z-index: 2;
    width: 43px;
    height: 43px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    font-size: 18px;
    box-shadow: 0 10px 25px rgb(184 73 73 / .25)
}

.case-transform>span {
    position: relative;
    z-index: 2;
    padding: 3px 7px;
    background: var(--bg-card);
    color: var(--text-muted);
    font-size: 6px;
    font-weight: 700;
    letter-spacing: .12em
}

.transformation-results {
    display: grid;
    grid-template-columns: 1.25fr repeat(3, 1fr) 180px;
    align-items: center;
    margin-top: 22px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg-card);
    overflow: hidden
}

.results-intro,
.result {
    min-height: 82px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 15px 20px;
    border-right: 1px solid var(--border)
}

.results-intro span {
    color: var(--accent);
    font-size: 7px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase
}

.results-intro strong {
    margin-top: 5px;
    color: var(--text);
    font-size: 13px
}

.result {
    gap: 4px
}

.result-number {
    color: var(--accent);
    font-size: 25px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.04em
}

.result>div {
    display: flex;
    flex-direction: column
}

.result>div strong {
    color: var(--text);
    font-size: 10px
}

.result>div small {
    margin-top: 2px;
    color: var(--text-muted);
    font-size: 10px
}

.transformation-button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    align-self: stretch;
    padding: 0 18px;
    background: var(--accent);
    color: #fff;
    text-decoration: none;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    transition: background .25s ease
}

.transformation-button:hover {
    background: var(--text)
}

.transformation-button span {
    font-size: 16px;
    transition: transform .25s ease
}

.transformation-button:hover span {
    transform: translate(3px, -3px)
}

[data-theme="dark"] .transformation-stage,
[data-theme="dark"] .transformation-results {
    box-shadow: 0 25px 70px rgb(0 0 0 / .25)
}

[data-theme="dark"] .browser {
    box-shadow: 0 20px 45px rgb(0 0 0 / .35)
}

[data-theme="dark"] .case-before .browser-content img {
    filter: saturate(.25) brightness(.78) contrast(.95)
}

@media (max-width:1050px) {
    .transformation-inner {
        width: calc(100% - 50px)
    }

    .transformation-stage {
        grid-template-columns: minmax(0, 1fr) 65px minmax(0, 1fr);
        padding: 22px
    }

    .browser-content {
        height: 260px
    }

    .transformation-results {
        grid-template-columns: repeat(3, 1fr)
    }

    .results-intro {
        grid-column: 1 / -1;
        min-height: auto;
        padding: 12px 15px;
        border-right: 0;
        border-bottom: 1px solid var(--border)
    }

    .results-intro strong {
        display: inline;
        margin-left: 8px
    }

    .transformation-button {
        min-height: 65px
    }

    .transformation-process {
        grid-template-columns: repeat(4, 1fr)
    }

    .transformation-process em {
        display: none
    }
}

@media (max-width:700px) {
    .transformation-section {
        padding: 70px 0 60px
    }

    .transformation-inner {
        width: calc(100% - 30px)
    }

    .transformation-header {
        display: block;
        margin-bottom: 28px
    }

    .case-meta {
        display: none
    }

    .transformation-label {
        margin-bottom: 14px;
        font-size: 8px
    }

    .transformation-heading h2 {
        font-size: 36px;
        line-height: .95;
        letter-spacing: -.045em
    }

    .transformation-heading p {
        max-width: 340px;
        margin-top: 13px;
        font-size: 10px;
        line-height: 1.6
    }

    .transformation-stage {
        display: flex;
        flex-direction: column;
        gap: 14px;
        min-height: auto;
        padding: 15px;
        border-radius: 12px
    }

    .case-before,
    .case-after {
        width: 100%;
        transform: none
    }

    .screen-header {
        margin-bottom: 8px
    }

    .screen-label {
        font-size: 12px
    }

    .screen-status {
        font-size: 6px
    }

    .browser {
        border-radius: 8px
    }

    .browser-bar {
        height: 28px;
        padding: 0 8px
    }

    .browser-dots i {
        width: 4px;
        height: 4px
    }

    .browser-bar>span {
        font-size: 6px
    }

    .browser-content {
        height: 180px
    }

    .screen-caption {
        margin-top: 7px;
        gap: 5px
    }

    .screen-caption span {
        padding: 4px 6px;
        font-size: 6px
    }

    .case-transform {
        width: 100%;
        height: 32px;
        flex-direction: row;
        gap: 8px
    }

    .transform-line {
        top: 50%
    }

    .transform-circle {
        width: 30px;
        height: 30px;
        font-size: 13px
    }

    .case-transform>span {
        font-size: 6px
    }

    .transformation-results {
        grid-template-columns: repeat(3, 1fr);
        margin-top: 16px;
        border-radius: 9px
    }

    .results-intro {
        grid-column: 1 / -1;
        min-height: auto;
        padding: 10px 12px
    }

    .results-intro span {
        font-size: 6px
    }

    .results-intro strong {
        font-size: 10px
    }

    .result {
        min-height: 75px;
        padding: 10px 8px;
        border-right: 1px solid var(--border)
    }

    .result:nth-of-type(4) {
        border-right: 0
    }

    .result-number {
        font-size: 19px
    }

    .result>div strong {
        font-size: 7px
    }

    .result>div small {
        font-size: 6px
    }

    .transformation-button {
        grid-column: 1 / -1;
        min-height: 42px;
        padding: 0 13px;
        font-size: 7px
    }

    .transformation-button span {
        font-size: 13px
    }

    .transformation-process {
        grid-template-columns: repeat(2, 1fr);
        margin-top: 25px;
        padding-top: 14px
    }

    .transformation-process>span {
        padding: 9px 8px;
        font-size: 8px;
        border-bottom: 1px solid var(--border)
    }

    .transformation-process>span:first-child {
        padding-left: 8px
    }

    .transformation-process>span:nth-child(2n) {
        border-right: 0
    }

    .transformation-process>span:nth-child(3),
    .transformation-process>span:nth-child(4) {
        border-bottom: 0
    }
}

@media (max-width:380px) {
    .transformation-section {
        padding: 60px 0 55px
    }

    .transformation-inner {
        width: calc(100% - 24px)
    }

    .transformation-heading h2 {
        font-size: 32px
    }

    .transformation-heading p {
        font-size: 9.5px
    }

    .transformation-stage {
        padding: 11px
    }

    .browser-content {
        height: 155px
    }

    .screen-caption span:nth-child(3) {
        display: none
    }

    .result {
        padding: 9px 6px
    }

    .result-number {
        font-size: 17px
    }

    .result>div strong {
        font-size: 6.5px
    }

    .result>div small {
        display: none
    }

    .transformation-process>span {
        font-size: 7px
    }
}

@media (max-width:900px) {
    .transformation-section {
        padding: 90px 0 65px
    }

    .transformation-inner {
        width: calc(100% - 48px)
    }

    .transformation-header {
        display: block;
        min-height: auto;
        margin-bottom: 45px
    }

    .transformation-note {
        display: none
    }

    .transformation-intro h2,
    .transformation-header h2 {
        font-size: clamp(40px, 7vw, 54px)
    }

    .transformation-intro p,
    .transformation-header p {
        max-width: 600px
    }

    .transformation-main {
        display: flex;
        flex-direction: column;
        gap: 40px
    }

    .transformation-showcase {
        order: 1;
        width: 100%;
        min-height: 480px
    }

    .transformation-results {
        order: 2;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0;
        width: 100%
    }

    .result-item {
        padding: 0 18px;
        border-bottom: 0;
        border-right: 1px solid var(--border)
    }

    .result-item:first-child {
        padding-left: 0
    }

    .result-item:nth-child(3) {
        border-right: 0
    }

    .result-icon {
        width: 34px;
        height: 34px;
        font-size: 15px
    }

    .result-item strong {
        font-size: 24px
    }

    .transformation-button {
        grid-column: 1 / -1;
        width: 220px;
        margin-top: 25px
    }

    .transformation-process {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: 18px;
        margin-top: 45px
    }

    .transformation-process>div {
        padding: 0 15px
    }

    .transformation-process>div:nth-child(2n) {
        border-right: 0
    }
}

@media (max-width:650px) {
    .transformation-section {
        padding: 70px 0 70px
    }

    .transformation-inner {
        width: calc(100% - 30px);
        max-width: 520px
    }

    .transformation-header {
        margin-bottom: 30px
    }

    .transformation-label {
        gap: 8px;
        margin-bottom: 15px;
        font-size: 8px;
        letter-spacing: .15em
    }

    .transformation-label span {
        font-size: 12px
    }

    .transformation-label i {
        width: 22px
    }

    .transformation-intro h2,
    .transformation-header h2 {
        max-width: 360px;
        font-size: 36px;
        line-height: .97;
        letter-spacing: -.045em
    }

    .transformation-intro p,
    .transformation-header p {
        max-width: 335px;
        margin-top: 14px;
        font-size: 10.5px;
        line-height: 1.65
    }

    .transformation-main {
        gap: 28px
    }

    .transformation-showcase {
        width: 100%;
        min-height: 475px
    }

    .transformation-browser {
        border-radius: 10px
    }

    .before-browser {
        top: 0;
        left: 0;
        width: 92%;
        transform: rotate(-2deg)
    }

    .after-browser {
        right: 0;
        bottom: 0;
        width: 92%;
        transform: rotate(2deg)
    }

    .browser-top {
        height: 31px;
        padding: 0 9px;
        gap: 7px
    }

    .browser-controls {
        gap: 4px
    }

    .browser-controls i {
        width: 5px;
        height: 5px
    }

    .browser-top>span {
        padding: 4px 8px;
        font-size: 6.5px
    }

    .browser-image {
        height: 175px
    }

    .browser-problems,
    .browser-benefits {
        min-height: 39px;
        gap: 7px;
        padding: 0 10px;
        font-size: 6px;
        white-space: nowrap
    }

    .transformation-connector {
        width: 34px;
        height: 34px;
        font-size: 15px
    }

    .transformation-results {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0
    }

    .result-item {
        display: block;
        padding: 0 8px;
        border-right: 1px solid var(--border)
    }

    .result-item:first-child {
        padding-left: 0
    }

    .result-item:nth-child(3) {
        padding-right: 0;
        border-right: 0
    }

    .result-icon {
        display: none
    }

    .result-item span {
        margin-bottom: 5px;
        color: var(--text-muted);
        font-size: 6.5px;
        line-height: 1.25;
        letter-spacing: .02em
    }

    .result-item strong {
        font-size: 20px;
        letter-spacing: -.04em
    }

    .result-item small {
        display: block;
        margin: 4px 0 0;
        font-size: 6.5px
    }

    .transformation-button {
        grid-column: 1 / -1;
        width: 100%;
        margin-top: 18px;
        padding: 12px 14px;
        border-radius: 6px;
        font-size: 8px
    }

    .transformation-button .arrow-icon {
        font-size: 13px
    }

    .transformation-process {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin-top: 35px;
        padding-top: 18px
    }

    .transformation-process>div {
        gap: 7px;
        padding: 11px 8px;
        border-bottom: 1px solid var(--border)
    }

    .transformation-process>div:first-child {
        padding-left: 8px
    }

    .transformation-process>div:nth-child(2n) {
        border-right: 0
    }

    .transformation-process>div:nth-child(3),
    .transformation-process>div:nth-child(4) {
        border-bottom: 0
    }

    .transformation-process span {
        font-size: 7px
    }

    .transformation-process strong {
        font-size: 9px
    }

    .transformation-process p {
        display: none
    }
}

@media (max-width:380px) {
    .transformation-section {
        padding: 60px 0 65px
    }

    .transformation-inner {
        width: calc(100% - 24px)
    }

    .transformation-intro h2,
    .transformation-header h2 {
        font-size: 32px;
        letter-spacing: -.04em
    }

    .transformation-intro p,
    .transformation-header p {
        font-size: 10px
    }

    .transformation-showcase {
        min-height: 420px
    }

    .browser-image {
        height: 150px
    }

    .browser-problems,
    .browser-benefits {
        display: none
    }

    .result-item {
        padding: 0 6px
    }

    .result-item span {
        font-size: 6px
    }

    .result-item strong {
        font-size: 18px
    }

    .result-item small {
        font-size: 6px
    }

    .transformation-process>div {
        padding: 10px 6px
    }

    .transformation-process strong {
        font-size: 8px
    }
}

@media (max-width:340px) {
    .transformation-inner {
        width: calc(100% - 20px)
    }

    .transformation-intro h2,
    .transformation-header h2 {
        font-size: 29px
    }

    .transformation-showcase {
        min-height: 385px
    }

    .browser-image {
        height: 135px
    }

    .result-item strong {
        font-size: 16px
    }
}

.floo-chat {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 9999;
    font-family: var(--font)
}

.floo-chat-trigger {
    position: relative;
    display: flex;
    align-items: center;
    height: 48px;
    padding: 0 8px 0 14px;
    gap: 9px;
    border: 1px solid var(--border);
    border-radius: 50px;
    background: var(--bg-card);
    color: var(--text);
    box-shadow: 0 12px 35px rgb(0 0 0 / .16);
    cursor: pointer;
    font-family: inherit;
    transition: transform .35s cubic-bezier(.22, 1, .36, 1), background .25s ease, border-color .25s ease, box-shadow .25s ease
}

.floo-chat-trigger:hover {
    transform: translateY(-3px);
    border-color: var(--accent);
    box-shadow: 0 18px 45px rgb(0 0 0 / .22)
}

.trigger-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 4px var(--accent-bg);
    animation: flooPulse 2.5s infinite
}

@keyframes flooPulse {

    0%,
    100% {
        box-shadow: 0 0 0 3px var(--accent-bg)
    }

    50% {
        box-shadow: 0 0 0 6px var(--accent-bg)
    }
}

.trigger-text {
    font-size: 10px;
    font-weight: 650;
    letter-spacing: -.01em
}

.trigger-arrow {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    font-size: 14px;
    transition: transform .25s ease
}

.floo-chat-trigger:hover .trigger-arrow {
    transform: translate(2px, -2px)
}

.floo-chat-panel {
    position: absolute;
    right: 0;
    bottom: 62px;
    width: 390px;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: var(--bg-card);
    color: var(--text);
    box-shadow: 0 35px 90px rgb(0 0 0 / .25);
    opacity: 0;
    visibility: hidden;
    transform: translateY(15px) scale(.96);
    transform-origin: bottom right;
    transition: opacity .3s ease, visibility .3s ease, transform .4s cubic-bezier(.22, 1, .36, 1)
}

.floo-chat.is-open .floo-chat-panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1)
}

.floo-chat-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 17px;
    border-bottom: 1px solid var(--border)
}

.floo-chat-brand {
    display: flex;
    align-items: center;
    gap: 10px
}

.floo-chat-mark {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: var(--accent);
    color: #fff
}

.floo-chat-mark span {
    width: 9px;
    height: 9px;
    border: 2px solid #fff;
    border-radius: 50%
}

.floo-chat-brand>div:last-child {
    display: flex;
    flex-direction: column
}

.floo-chat-brand strong {
    font-size: 11px;
    font-weight: 700;
    color: var(--text)
}

.floo-chat-brand small {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 3px;
    color: var(--text-muted);
    font-size: 7px
}

.floo-chat-brand small i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #55a66e
}

.floo-chat-close {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: #fff0;
    color: var(--text-muted);
    font-size: 21px;
    cursor: pointer;
    transition: color .2s ease, transform .25s ease
}

.floo-chat-close:hover {
    color: var(--text);
    transform: rotate(90deg)
}

.floo-chat-intro {
    padding: 24px 20px 17px
}

.floo-chat-eyebrow {
    color: var(--accent);
    font-size: 7px;
    font-weight: 700;
    letter-spacing: .16em
}

.floo-chat-intro h3 {
    margin: 8px 0 9px;
    color: var(--text);
    font-size: 27px;
    line-height: .98;
    letter-spacing: -.045em
}

.floo-chat-intro h3 em {
    color: var(--accent);
    font-style: normal
}

.floo-chat-intro p {
    max-width: 285px;
    margin: 0;
    color: var(--text-sec);
    font-size: 9px;
    line-height: 1.55
}

.floo-chat-messages {
    max-height: 300px;
    overflow-y: auto;
    padding: 4px 20px 18px;
    scrollbar-width: thin;
    scrollbar-color: var(--border-dark) #fff0
}

.floo-bot-message {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 14px
}

.floo-user-message {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    margin: 0 0 14px
}

.floo-user-bubble {
    max-width: 260px;
    padding: 10px 12px;
    border: 1px solid var(--accent);
    border-radius: 11px 4px 11px 11px;
    background: var(--accent);
    color: #fff;
    font-size: 9px;
    line-height: 1.5;
    word-break: break-word
}

.floo-bot-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: var(--bg);
    color: var(--accent);
    font-size: 8px;
    font-weight: 700
}

.floo-bubble {
    max-width: 260px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 4px 11px 11px 11px;
    background: var(--bg-alt);
    color: var(--text-sec);
    font-size: 9px;
    line-height: 1.5
}

.floo-options {
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition: opacity .25s ease, transform .25s ease, max-height .3s ease
}

.floo-options.is-hidden {
    opacity: 0;
    transform: translateY(-6px);
    max-height: 0;
    overflow: hidden;
    pointer-events: none;
    margin: 0
}

.floo-options button {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 12px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: #fff0;
    color: var(--text);
    font-family: inherit;
    cursor: pointer;
    text-align: left;
    transition: background .25s ease, border-color .25s ease, transform .25s ease
}

.floo-options button:hover {
    background: var(--accent-bg);
    border-color: var(--border-dark);
    transform: translateX(3px)
}

.floo-options button span {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 9px;
    font-weight: 600
}

.floo-options button small {
    color: var(--text-muted);
    font-size: 7px;
    font-variant-numeric: tabular-nums
}

.floo-options button b {
    color: var(--accent);
    font-size: 14px;
    font-weight: 400;
    transition: transform .2s ease
}

.floo-options button:hover b {
    transform: translate(3px, -3px)
}

.floo-chat-composer {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 12px;
    padding: 5px 5px 5px 13px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg);
    transition: border-color .2s ease
}

.floo-chat-composer:focus-within {
    border-color: var(--accent)
}

.floo-chat-composer input {
    flex: 1;
    min-width: 0;
    height: 32px;
    border: 0;
    outline: 0;
    background: #fff0;
    color: var(--text);
    font-family: inherit;
    font-size: 9px
}

.floo-chat-composer input::placeholder {
    color: var(--text-muted)
}

.floo-chat-composer button {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border: 0;
    border-radius: 7px;
    background: var(--accent);
    color: #fff;
    font-size: 13px;
    cursor: pointer;
    transition: transform .2s ease, background .2s ease
}

.floo-chat-composer button:hover {
    background: var(--text);
    transform: translate(2px, -2px)
}

.floo-chat-footer {
    display: flex;
    justify-content: space-between;
    padding: 13px 20px 14px;
    color: var(--text-muted);
    font-size: 6px;
    font-weight: 600;
    letter-spacing: .12em
}

[data-theme="dark"] .floo-chat-panel {
    box-shadow: 0 35px 100px rgb(0 0 0 / .55)
}

[data-theme="dark"] .floo-chat-trigger {
    box-shadow: 0 15px 40px rgb(0 0 0 / .4)
}

@media (max-width:600px) {
    .floo-chat {
        right: 14px;
        bottom: 14px
    }

    .floo-chat-trigger {
        height: 46px;
        padding-left: 12px
    }

    .trigger-text {
        font-size: 9px
    }

    .trigger-arrow {
        width: 30px;
        height: 30px
    }

    .floo-chat-panel {
        right: 0;
        bottom: 58px;
        width: min(calc(100vw - 28px), 390px);
        border-radius: 16px
    }

    .floo-chat-intro {
        padding: 20px 17px 14px
    }

    .floo-chat-intro h3 {
        font-size: 24px
    }

    .floo-chat-messages {
        padding-left: 17px;
        padding-right: 17px
    }

    .floo-chat-footer {
        padding-left: 17px;
        padding-right: 17px
    }
}

@media (max-width:380px) {
    .floo-chat {
        right: 10px;
        bottom: 10px
    }

    .floo-chat-panel {
        width: calc(100vw - 20px)
    }

    .floo-chat-intro h3 {
        font-size: 22px
    }
}



 
.social-ads-hero {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 640px;
    padding: 32px 36px;
    overflow: hidden;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
}
 
/* TOP */
.social-ads-top {
    position: relative;
    z-index: 20;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
.social-ads-label { display: flex; align-items: center; gap: 16px; }
.social-ads-label > span { width: 38px; height: 1px; background: var(--text); }
.social-ads-label p {
    margin: 0;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .32em;
    color: var(--text);
}
.social-ads-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    font-size: 8px;
    font-weight: 600;
    letter-spacing: .28em;
    color: var(--text-sec);
    text-align: right;
}
 
/* MAIN */
.social-ads-container {
    position: relative;
    z-index: 5;
    width: min(var(--max-w), 100%);
    height: calc(100vh - 125px);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 43% 57%;
    align-items: center;
}
 
/* LEFT */
.social-ads-content { position: relative; z-index: 10; padding-left: 20px; max-width: 570px; }
.social-ads-eyebrow {
    margin-bottom: 15px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .3em;
    color: var(--text-sec);
}
.social-ads-content h1 {
    margin: 0;
    font-size: clamp(48px, 5vw, 76px);
    font-weight: 700;
    line-height: .92;
    letter-spacing: -.035em;
    color: var(--text);
}
.social-ads-content h1 span { color: var(--accent); }
.social-ads-description {
    max-width: 400px;
    margin: 22px 0 26px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-sec);
}
.social-ads-button {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    width: 190px;
    padding: 15px 20px;
    background: var(--accent);
    color: #fff;
    text-decoration: none;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .14em;
    border-radius: 999px;
    transition: transform var(--tr), background var(--tr);
}
.social-ads-button b { font-size: 17px; font-weight: 400; transition: transform var(--tr); }
.social-ads-button:hover { background: var(--accent-light); transform: translateY(-2px); }
.social-ads-button:hover b { transform: translateX(4px); }
 
/* SERVICES */
.social-ads-services {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    width: 100%;
    margin-top: 40px;
    border-top: 1px solid var(--border);
    padding-top: 18px;
}
.social-service { min-width: 0; display: flex; flex-direction: column; gap: 9px; padding-right: 10px; }
.social-service:not(:first-child) { padding-left: 14px; border-left: 1px solid var(--border); }
.social-service-icon { width: 22px; height: 22px; display: flex; align-items: center; color: var(--text); }
.social-service-icon svg { width: 100%; height: 100%; }
.social-service span { color: var(--text-sec); font-size: 11.5px; font-weight: 600; line-height: 1.4; }
 
/* RIGHT VISUAL */
.social-ads-visual { position: relative; width: 100%; height: 570px; }
.social-visual-circle {
    position: absolute;
    left: 52%; top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 1px solid var(--border-light);
    pointer-events: none;
}
.circle-one { width: 510px; height: 510px; }
.circle-two { width: 390px; height: 390px; }
.circle-three { width: 285px; height: 285px; }
 
/* PLATFORM ICONS */
.social-platforms { position: absolute; top: 0; left: 31%; z-index: 10; display: flex; gap: 10px; }
.platform {
    width: 34px; height: 34px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 9px;
    box-shadow: 0 10px 20px rgba(0,0,0,.10);
}
.platform svg { width: 60%; height: 60%; }
.platform.instagram { background: radial-gradient(circle at 30% 110%, #fdf497 0%, #fd5949 35%, #d6249f 65%, #285AEB 100%); }
.platform.facebook { background: #1877F2; }
.platform.tiktok { background: #010101; }
.platform.linkedin { background: #0A66C2; }
.platform.youtube { background: #FF0000; }
.platform-letter { color: #fff; font-weight: 800; font-size: 13px; letter-spacing: -0.02em; }
 
/* BACK AD CARD (Facebook post mock — stays light like a real screenshot) */
.social-ad-card {
    position: absolute;
    z-index: 4;
    top: 150px;
    left: 0%;
    width: 235px;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 22px 45px rgba(0,0,0,.20);
    transform: rotate(-6deg);
    font-family: Arial, sans-serif;
}
.social-ad-header { position: relative; display: flex; align-items: center; gap: 8px; padding: 10px 12px; }
.social-ad-avatar {
    width: 26px; height: 26px; border-radius: 50%;
    background: var(--accent);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.social-ad-avatar svg { width: 16px; height: 16px; }
.social-ad-header div { line-height: 1.3; }
.social-ad-header strong { display: block; font-size: 10px; color: #111; }
.social-ad-header small { display: block; font-size: 8px; color: #8a8a8a; }
.social-ad-header b { margin-left: auto; color: #999; font-weight: 700; letter-spacing: 1px; font-size: 10px; }
.social-ad-desc { margin: 0; padding: 0 12px 10px; font-family: var(--font); font-size: 9.5px; line-height: 1.45; color: #333; }
.social-ad-image { position: relative; height: 200px; overflow: hidden; background: linear-gradient(155deg, #2a2422 0%, #17130f 65%, #0c0a09 100%); }
.ad-image-overlay { position: absolute; inset: 0; padding: 16px; color: #fff; display: flex; flex-direction: column; justify-content: space-between; }
.ad-image-overlay strong { font-family: var(--font); font-size: 22px; font-weight: 700; line-height: .95; letter-spacing: -.03em; }
.ad-image-overlay strong em { font-style: normal; color: var(--accent-light); }
.ad-image-overlay small { font-family: var(--font); font-size: 7px; font-weight: 700; letter-spacing: .22em; color: rgba(255,255,255,.7); line-height: 1.9; }
.social-ad-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px; }
.social-ad-footer strong { font-size: 10px; line-height: 1.35; color: #111; }
.social-ad-footer button { flex-shrink: 0; border: none; background: #eef0f2; color: #111; font-family: var(--font); font-size: 8.5px; font-weight: 700; padding: 7px 10px; border-radius: 6px; }
.social-ad-engagement { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; border-top: 1px solid #eee; font-size: 8px; color: #888; }
.social-ad-engagement .ad-reactions { display: flex; align-items: center; gap: 4px; color: #555; }
.social-ad-actions { display: flex; justify-content: space-around; padding: 4px 6px 9px; border-top: 1px solid #f1f1f1; font-family: var(--font); font-size: 8.5px; font-weight: 700; color: #555; }
.social-ad-actions span { display: flex; align-items: center; gap: 5px; }
.social-ad-actions svg { width: 11px; height: 11px; }
 
/* PHONE (device chrome stays dark metal, screen stays a real "white app" mock) */
.social-phone {
    position: absolute;
    z-index: 8;
    top: 42px;
    left: 38%;
    width: 270px;
    height: 500px;
    padding: 6px;
    background: linear-gradient(145deg, #3b3b3b 0%, #111 18%, #050505 55%, #292929 100%);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 38px;
    box-shadow: 0 30px 60px rgba(0,0,0,.30), 0 8px 20px rgba(0,0,0,.18);
    transform: rotate(5deg);
    transition: transform .5s ease, box-shadow .5s ease;
}
.social-phone::after { content: ""; position: absolute; inset: 2px; border-radius: 35px; border: 1px solid rgba(255,255,255,.08); pointer-events: none; z-index: 30; }
.social-phone::before { content: ""; position: absolute; z-index: 40; top: 12px; left: 50%; width: 82px; height: 23px; transform: translateX(-50%); border-radius: 20px; background: #050505; box-shadow: inset 0 1px 2px rgba(255,255,255,.05), 0 1px 2px rgba(0,0,0,.35); }
.social-phone-screen { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 32px; background: #fff; color: #111; box-shadow: inset 0 0 0 1px rgba(0,0,0,.18); }
.social-phone-screen::after { content: ""; position: absolute; inset: 0; z-index: 25; pointer-events: none; background: linear-gradient(115deg, rgba(255,255,255,.08), transparent 28%, transparent 75%, rgba(255,255,255,.035)); }
.phone-status { position: relative; z-index: 10; height: 30px; display: flex; align-items: center; justify-content: space-between; padding: 9px 17px 0; font-family: Arial, sans-serif; font-size: 9px; font-weight: 700; color: #111; }
.phone-header { position: relative; z-index: 10; display: flex; align-items: center; gap: 8px; padding: 11px 13px 9px; border-bottom: 1px solid #eee; }
.phone-header .phone-avatar { width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.phone-header .phone-avatar svg { width: 13px; height: 13px; }
.phone-header div { line-height: 1.3; }
.phone-header strong { display: block; color: #111; font-family: Arial, sans-serif; font-size: 10px; font-weight: 700; }
.phone-header span { display: block; margin-top: 1px; color: #888; font-family: Arial, sans-serif; font-size: 7px; }
.phone-header b { margin-left: auto; color: #555; font-size: 10px; letter-spacing: 1px; }
.phone-ad-content { position: relative; width: 100%; height: 330px; overflow: hidden; background: linear-gradient(160deg,#f3e6da,#ecd8c8); display: flex; align-items: center; justify-content: center; }
.phone-ad-content .owl-illustration { width: 130px; height: 130px; color: var(--accent); }
.phone-ad-content::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(to top, rgba(0,0,0,.30), transparent 42%); }
.phone-ad-copy { position: absolute; z-index: 5; left: 18px; right: 18px; bottom: 18px; }
.phone-ad-copy strong { display: block; color: #111; font-family: var(--font); font-size: 28px; font-weight: 700; line-height: .88; letter-spacing: -.03em; }
.phone-ad-copy em { color: var(--accent); font-style: normal; }
.phone-ad-copy small { display: block; margin-top: 13px; color: #222; font-family: var(--font); font-size: 8px; font-weight: 700; line-height: 1; letter-spacing: .2em; }
.phone-ad-copy button { display: flex; align-items: center; gap: 6px; width: max-content; margin-top: 12px; padding: 8px 12px; border: 1px solid var(--accent); border-radius: 20px; background: rgba(255,255,255,.75); color: var(--accent); font-family: var(--font); font-size: 8px; font-weight: 700; }
.phone-ad-copy button span { font-size: 11px; }
.phone-engagement { position: relative; z-index: 10; padding: 9px 12px 11px; background: #fff; color: #111; font-family: Arial, sans-serif; font-size: 9px; }
.phone-engagement .icon-row { display: flex; align-items: center; justify-content: space-between; }
.phone-engagement .icon-row-left { display: flex; align-items: center; gap: 11px; }
.phone-engagement svg { width: 16px; height: 16px; }
.phone-engagement strong { display: block; margin-top: 7px; font-size: 9px; }
.phone-engagement p { margin: 4px 0 0; font-size: 8.5px; color: #333; line-height: 1.4; }
.phone-engagement p .tag { color: #1971c2; }
 
/* METRICS */
.social-metric {
    position: absolute; z-index: 15; width: 130px; padding: 12px 14px;
    display: grid; grid-template-columns: 1fr auto;
    background: var(--glass-bg); border: 1px solid var(--border);
    border-radius: 10px; box-shadow: 0 14px 30px rgba(0,0,0,.10);
    backdrop-filter: blur(10px);
}
.social-metric strong { color: var(--text); font-size: 21px; font-weight: 700; line-height: 1; letter-spacing: -.03em; }
.social-metric span { grid-column: 1; margin-top: 6px; color: var(--text-sec); font-size: 9px; font-weight: 600; }
.social-metric b { grid-column: 2; grid-row: 1 / 3; align-self: center; color: var(--accent); font-size: 15px; font-weight: 400; }
.metric-one { top: 100px; right: 2%; }
.metric-two { top: 210px; right: 0; }
.metric-three { top: 320px; right: 3%; }
 
/* CALLOUT */
.social-callout { position: absolute; z-index: 20; right: 1%; bottom: 15px; color: var(--accent); transform: rotate(-7deg); text-align: right; }
.social-callout span { font-family: var(--hand); font-weight: 700; font-size: 26px; line-height: .9; }
.social-callout b { display: block; margin-top: 2px; font-size: 22px; font-weight: 400; }
 
/* BOTTOM */
.social-ads-bottom { position: absolute; left: 36px; right: 36px; bottom: 30px; z-index: 30; display: flex; justify-content: space-between; align-items: center; }
.social-bottom-left { display: flex; align-items: center; gap: 12px; }
.social-bottom-left > span { width: 2px; height: 30px; background: var(--accent); }
.social-bottom-left p { margin: 0; color: var(--text-sec); font-size: 9px; font-weight: 700; line-height: 1.8; letter-spacing: .25em; }
.social-bottom-right { display: flex; align-items: center; gap: 14px; color: var(--text-sec); font-size: 9px; font-weight: 700; letter-spacing: .25em; }
.social-bottom-right span { width: 28px; height: 1px; background: var(--text-sec); }
 
/* TABLET */
@media (max-width: 1000px) {
    .social-ads-hero { height: auto; min-height: 100svh; overflow: hidden; }
    .social-ads-container { height: auto; display: flex; flex-direction: column; padding-top: 80px; }
    .social-ads-content { width: 100%; max-width: 650px; margin: 0 auto; padding: 0; text-align: center; }
    .social-ads-description { margin-left: auto; margin-right: auto; }
    .social-ads-services { text-align: left; }
    .social-ads-visual { width: min(700px, 100%); height: 560px; margin-top: 20px; }
}
 
/* MOBILE */
@media (max-width: 650px) {
    .social-ads-hero { height: auto; min-height: 100svh; padding: 24px 18px 30px; }
    .social-ads-label { gap: 9px; }
    .social-ads-label > span { width: 21px; }
    .social-ads-label p { font-size: 7px; letter-spacing: .25em; }
    .social-ads-meta { display: none; }
    .social-ads-container { padding-top: 65px; }
    .social-ads-eyebrow { margin-bottom: 14px; font-size: 8px; letter-spacing: .22em; }
    .social-ads-content h1 { font-size: clamp(43px, 13vw, 58px); line-height: .91; }
    .social-ads-description { max-width: 330px; margin-top: 17px; font-size: 12.5px; }
    .social-ads-button { width: 178px; padding: 14px 18px; }
    .social-ads-services { grid-template-columns: repeat(2, 1fr); margin-top: 30px; }
    .social-service { padding: 12px 9px; }
    .social-service:not(:first-child) { padding-left: 9px; }
    .social-service:nth-child(3), .social-service:nth-child(4) { border-top: 1px solid var(--border); }
    .social-service:nth-child(3) { border-left: 0; }
    .social-ads-visual { height: 520px; margin-top: 25px; }
    .circle-one { width: 390px; height: 390px; }
    .circle-two { width: 300px; height: 300px; }
    .circle-three { width: 220px; height: 220px; }
    .social-platforms { top: 0; left: 50%; transform: translateX(-50%); gap: 6px; }
    .platform { width: 28px; height: 28px; border-radius: 7px; }
    .social-ad-card { top: 165px; left: 6%; width: 195px; transform: rotate(-5deg); }
    .social-ad-image { height: 180px; }
    .social-phone { top: 45px; left: 50%; width: 230px; height: 415px; transform: translateX(-50%) rotate(5deg); border-radius: 27px; }
    .social-phone-screen { border-radius: 21px; }
    .phone-ad-content { height: 260px; }
    .phone-ad-content .owl-illustration { width: 100px; height: 100px; }
    .phone-ad-copy strong { font-size: 24px; }
    .social-metric { width: 104px; padding: 10px 11px; }
    .social-metric strong { font-size: 16px; }
    .social-metric span { font-size: 7.5px; }
    .metric-one { top: 100px; right: 0; }
    .metric-two { top: 218px; left: 0; right: auto; }
    .metric-three { top: 335px; right: 0; }
    .social-callout { right: 0; bottom: 8px; }
    .social-callout span { font-size: 21px; }
    .social-callout b { font-size: 18px; }
    .social-ads-bottom { position: relative; left: auto; right: auto; bottom: auto; margin-top: 14px; }
    .social-bottom-right { display: none; }
}
 
@media (max-width: 380px) {
    .social-ads-content h1 { font-size: 40px; }
    .social-ads-description { font-size: 11.5px; }
    .social-ads-services { margin-top: 25px; }
    .social-ads-visual { height: 470px; }
    .social-phone { width: 205px; height: 375px; }
    .phone-ad-content { height: 230px; }
    .phone-ad-copy strong { font-size: 22px; }
    .social-metric { width: 92px; }
    .social-metric strong { font-size: 14px; }
}
 
 
/* ==========================================================================
   SECTION 2 — "SPEND SMARTER. GET REAL RESULTS." HERO
   ========================================================================== */
 
.spend-hero {
    position: relative;
    width: 100%;
    min-height: 700px;
    padding: 32px 40px;
    overflow: hidden;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    display: flex;
    flex-direction: column;
}
 
/* TOP BAR */
.spend-top { display: flex; justify-content: space-between; align-items: center; z-index: 20; position: relative; }
.spend-label { display: flex; align-items: center; gap: 16px; }
.spend-label > span { width: 38px; height: 1px; background: var(--text); }
.spend-label p { margin: 0; font-size: 10px; font-weight: 700; letter-spacing: .3em; color: var(--text); }
.spend-meta { display: flex; align-items: center; gap: 12px; font-size: 11px; font-weight: 600; letter-spacing: .18em; color: var(--text); }
.spend-meta span.dot { width: 3px; height: 3px; border-radius: 50%; background: var(--text-muted); }
 
/* MAIN */
.spend-main {
    position: relative;
    flex: 1;
    width: min(var(--max-w), 100%);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 46% 54%;
    align-items: center;
    gap: 20px;
}
 
/* LEFT */
.spend-content { max-width: 610px; }
.spend-content h1 { margin: 12px 0 0; font-size: clamp(46px, 4.6vw, 72px); font-weight: 700; line-height: 1.02; letter-spacing: -.03em; }
.spend-content h1 .line-red { color: var(--accent); }
.spend-desc { max-width: 460px; margin: 22px 0 30px; font-size: 15px; line-height: 1.6; color: var(--text-sec); }
 
/* STAT CARDS */
.spend-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 30px; }
.stat-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px; padding: 18px 16px 16px; transition: background var(--tr), border-color var(--tr); }
.stat-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.stat-icon { width: 40px; height: 40px; border-radius: 50%; background: var(--accent-bg); display: flex; align-items: center; justify-content: center; color: var(--accent); }
.stat-icon svg { width: 19px; height: 19px; }
.stat-badge { display: inline-flex; align-items: center; gap: 3px; padding: 4px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; }
.stat-badge.down { background: var(--accent-bg); color: var(--accent); }
.stat-badge.up { background: var(--success-bg); color: var(--success); }
.stat-badge svg { width: 10px; height: 10px; }
.stat-title { font-size: 12.5px; color: var(--text-sec); font-weight: 600; margin-bottom: 6px; }
.stat-value { font-size: 25px; font-weight: 700; letter-spacing: -.02em; margin-bottom: 5px; color: var(--text); }
.stat-sub { font-size: 11px; color: var(--text-muted); margin-bottom: 12px; }
.stat-spark { width: 100%; height: 24px; display: block; }
 
/* CTA ROW */
.spend-cta { display: flex; align-items: center; gap: 26px; }
.spend-button {
    display: inline-flex; align-items: center; gap: 18px;
    padding: 16px 24px;
    background: var(--accent);
    color: #fff;
    text-decoration: none;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .12em;
    transition: transform var(--tr), background var(--tr);
}
.spend-button svg { width: 15px; height: 15px; transition: transform var(--tr); }
.spend-button:hover { background: var(--accent-light); transform: translateY(-2px); }
.spend-button:hover svg { transform: translateX(4px); }
.spend-link { color: var(--text); text-decoration: none; font-size: 13px; font-weight: 600; border-bottom: 1.5px solid var(--border-dark); padding-bottom: 2px; }
 
/* RIGHT VISUAL */
/* =========================
   RIGHT VISUAL
========================= */

.spend-visual {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 560px;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: visible;
}

/* Soft background glow */
.spend-glow {
    position: absolute;

    width: 560px;
    height: 560px;

    left: 50%;
    top: 50%;

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

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            color-mix(in srgb, var(--accent) 13%, transparent) 0%,
            color-mix(in srgb, var(--accent) 6%, transparent) 42%,
            transparent 72%
        );

    pointer-events: none;
}

/* Transparent generated artwork */
.spend-visual-image {
    position: relative;
    z-index: 5;

    display: block;

    width: min(760px, 115%);
    height: auto;

    object-fit: contain;

    transform: translateX(-2%) rotate(0deg);

    filter:
        drop-shadow(0 25px 35px rgba(0, 0, 0, .08));

    user-select: none;
    pointer-events: none;
}

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

    .spend-hero {
        height: auto;
        min-height: 100svh;
        padding: 22px 20px;
        overflow: hidden;
    }

    .spend-main {
        grid-template-columns: 1fr;
        width: 100%;
        gap: 10px;
    }

    .spend-content {
        max-width: 640px;
        width: 100%;
        margin: 0 auto;
        text-align: center;
    }

    .spend-content h1 {
        font-size: clamp(40px, 7vw, 58px);
        margin-top: 10px;
    }

    .spend-desc {
        max-width: 500px;
        margin: 14px auto 20px;
        font-size: 13px;
    }

    .spend-stats {
        text-align: left;
        gap: 10px;
        margin-bottom: 18px;
    }

    .spend-cta {
        justify-content: center;
    }

    .spend-meta {
        display: none;
    }

    /* IMPORTANT */
    .spend-visual {
        min-height: 0;
        height: 400px;
        margin-top: 5px;

        display: flex;
        align-items: center;
        justify-content: center;
    }

    .spend-visual-image {
        width: 600px;
        max-width: 120%;
        height: auto;
    }

    .spend-glow {
        width: 400px;
        height: 400px;
    }
}
 
@media (max-width: 650px) {

    .spend-hero {
        min-height: 100svh;
        padding: 16px 14px;
    }

    .spend-main {
        gap: 4px;
    }

    .spend-content h1 {
        font-size: clamp(34px, 10vw, 46px);
        line-height: .96;
    }

    .spend-desc {
        max-width: 350px;
        margin: 10px auto 14px;
        font-size: 11px;
        line-height: 1.4;
    }

    .spend-stats {
        gap: 7px;
        margin-bottom: 12px;
    }

    .stat-card {
        padding: 10px;
    }

    .spend-cta {
        gap: 12px;
    }

    /* SMALLER IMAGE AREA */
    .spend-visual {
        min-height: 0;
        margin-top: 0;
    }

    .spend-visual-image {
        width: 400px;
        max-width: 125%;
    }

    .spend-glow {
        width: 280px;
        height: 280px;
    }
}

/* =========================================
   SELECTED WORK - COMPACT CARDS
========================================= */
/* =========================================
   WORK SECTION
========================================= */

#work {
    overflow: hidden;
}

#workGrid {
    width: 100vw;
    margin-left: calc(50% - 50vw);

    overflow: hidden;

    display: flex;
    flex-direction: column;

    gap: 14px;
}


/* =========================================
   ROW
========================================= */

.work-row {
    width: 100%;
    overflow: hidden;
    position: relative;
}

.work-track {
    display: flex;
    width: max-content;

    gap: 14px;

    will-change: transform;
}


/* TOP ROW → LEFT */
.work-row-left .work-track {
    animation: workScrollLeft 35s linear infinite;
}

/* BOTTOM ROW → RIGHT */
.work-row-right .work-track {
    animation: workScrollRight 38s linear infinite;
}


/* =========================================
   CARD
========================================= */

.work-card {
    width: 300px;
    min-width: 360px;
    flex: 0 0 300px;

    background: var(--work-card-bg, #fff);

    border: 1px solid var(
        --work-card-border,
        rgba(0, 0, 0, 0.08)
    );

    border-radius: 14px;

    overflow: hidden;

    cursor: pointer;

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease;
}

.work-card:hover {
    transform: translateY(-3px);

    box-shadow:
        0 12px 28px rgba(0, 0, 0, .08);
}


/* =========================================
   IMAGE
========================================= */

.work-image {
    position: relative;
    padding: 10px;
    width: 100%;
    height: 200px;

    overflow: hidden;

    background: var(--work-image-bg, #f1f1f1);
}

.work-image img,
.work-image svg {
    width: 100%;
    height: 100%;

    display: block;
    border-radius: 20px;

    object-fit: cover;

    transition: transform .45s ease;
}

.work-card:hover .work-image img {
    transform: scale(1.025);
}


/* =========================================
   IMAGE OVERLAY
========================================= */

.work-image-overlay {
    position: absolute;
    inset: 0;

    padding: 9px;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.work-num {
    width: 25px;
    height: 25px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: rgba(255,255,255,.92);
    color: #111;

    font-size: 9px;
    font-weight: 600;
}

.work-view {
    padding: 5px 8px;

    border-radius: 999px;

    background: rgba(255,255,255,.92);
    color: #111;

    font-size: 9px;
    font-weight: 600;

    opacity: 0;

    transform: translateY(-3px);

    transition:
        opacity .2s ease,
        transform .2s ease;
}

.work-card:hover .work-view {
    opacity: 1;
    transform: translateY(0);
}


/* =========================================
   CONTENT
========================================= */

.work-card-content {
    padding: 10px 12px 12px;
}

.work-cat {
    margin: 0 0 4px;

    font-size: 7px;
    line-height: 1.3;

    letter-spacing: .1em;
    text-transform: uppercase;

    color: var(
        --work-muted,
        rgba(20,20,20,.55)
    );
}

.work-title {
    margin: 0 0 4px;

    font-size: 14px;
    line-height: 1.2;

    font-weight: 600;

    letter-spacing: -.015em;

    color: var(
        --work-title,
        #111
    );
}

.work-desc {
    margin: 0;

    font-size: 9px;
    line-height: 1.4;

    color: var(
        --work-text,
        rgba(20,20,20,.62)
    );

    display: -webkit-box;
    --webkit-line-clamp: 1;
    -webkit-box-orient: vertical;

    overflow: hidden;
}


/* Hide tags */
.work-tags {
    display: none;
}


/* =========================================
   INFINITE SCROLL
========================================= */

@keyframes workScrollLeft {

    from {
        transform: translateX(0);
    }

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

@keyframes workScrollRight {

    from {
        transform: translateX(
            calc(-50% - 7px)
        );
    }

    to {
        transform: translateX(0);
    }
}


/* Pause on hover */
#workGrid:hover .work-track {
    animation-play-state: paused;
}


/* =========================================
   LIGHT THEME
========================================= */

:root {
    --work-card-bg: #ffffff;

    --work-card-border:
        rgba(0,0,0,.08);

    --work-image-bg:
        #f3f3f3;

    --work-title:
        #111111;

    --work-text:
        rgba(17,17,17,.62);

    --work-muted:
        rgba(17,17,17,.5);
}


/* =========================================
   DARK THEME
========================================= */

[data-theme="dark"] {

    --work-card-bg:
        #111111;

    --work-card-border:
        rgba(255,255,255,.10);

    --work-image-bg:
        #1b1b1b;

    --work-title:
        #f5f5f5;

    --work-text:
        rgba(255,255,255,.62);

    --work-muted:
        rgba(255,255,255,.45);
}


/* If your website uses .dark instead */
.dark {

    --work-card-bg:
        #111111;

    --work-card-border:
        rgba(255,255,255,.10);

    --work-image-bg:
        #1b1b1b;

    --work-title:
        #f5f5f5;

    --work-text:
        rgba(255,255,255,.62);

    --work-muted:
        rgba(255,255,255,.45);
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 768px) {

    #workGrid {
        gap: 10px;
    }

    .work-track {
        gap: 10px;
    }

    .work-card {
        width: 245px;
        min-width: 245px;
        flex-basis: 245px;

        border-radius: 12px;
    }

    .work-image {
         height: 118px;
    }

    .work-card-content {
        padding: 8px 10px 9px;
    }

    .work-cat {
        font-size: 6px;
        margin-bottom: 3px;
    }

    .work-title {
        font-size: 12px;
        margin-bottom: 3px;
    }

    .work-desc {
        font-size: 8px;
        line-height: 1.35;

        --webkit-line-clamp: 1;
    }

    .work-num {
        width: 22px;
        height: 22px;
        font-size: 8px;
    }

    .work-view {
        opacity: 1;
        transform: none;

        font-size: 8px;

        padding: 4px 7px;
    }

    .work-row-left .work-track {
        animation-duration: 28s;
    }

    .work-row-right .work-track {
        animation-duration: 31s;
    }
}


/* =========================================
   VERY SMALL MOBILE
========================================= */

@media (max-width: 480px) {

    .work-card {
        width: 220px;
        min-width: 300px;
        flex-basis: 220px;
    }

    .work-image {
         height: 135px;
    }

    .work-card-content {
        padding: 7px 9px 8px;
    }

    .work-title {
        font-size: 11px;
    }

    .work-desc {
        font-size: 7.5px;
    }
}


/* Reduced motion */
@media (prefers-reduced-motion: reduce) {

    .work-track {
        animation: none !important;
    }
}