/* reset.css */
/* Base */

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

html {
    /* HTML-first dark fallback, in the first render-blocking stylesheet. */
    background: #010207;
    scroll-behavior: smooth;
}

body {
    font-family: Arial, sans-serif;
    background: #010207;
    color: white;
    user-select: none;
}

img {
    user-select: none;
    -webkit-user-drag: none;
    pointer-events: none;
}

/* services.css */
/* Services */

.services {
    position: relative;
    min-height: 100vh;
    padding: 90px 52px 90px;
    background: transparent;
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
}

.services-bg-glow {
    position: absolute;
    inset: auto -10% -40% -10%;
    height: 420px;
    background:
        radial-gradient(circle, rgba(42,127,255,0.18), transparent 62%);
    pointer-events: none;
    display: none;
}

.services-top {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
    gap: 70px;
    margin-bottom: 34px;
}

.services-top p {
    max-width: 560px;
    margin-top: 0px;
    margin-left: 80px;
    color: rgba(255,255,255,0.72);
    font-size: 18px;
    line-height: 1.55;
}

.services-label span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #2a7fff;
    box-shadow: 0 0 14px rgba(42,127,255,0.8);
}

.services h2 {
    max-width: 720px;
    font-size: 43px;
    line-height: 0.98;
    letter-spacing: -1.6px;
    font-weight: 900;
    color: #ffffff;
}

.services h2 span {
    display: inline-block;
    background: linear-gradient(
        90deg,
        #ffffff,
        #2a7fff,
        #7a5cff
    );
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

/* Service Cards */

.service-cards {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(4, minmax(240px, 320px));
    gap: 22px;
    justify-content: center;
    perspective: 1200px;
    margin-top: 10px;
}

.service-cards {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(4, minmax(240px, 320px));
    gap: 22px;
    justify-content: center;
    perspective: 1200px;
}

.service-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    width: 100%;
    min-height: 410px;
    padding: 30px 26px 32px;
    border-radius: 26px;
    border: 1px solid rgba(85, 104, 255, 0.24);
    background:
        linear-gradient(
            180deg,
            rgba(28, 36, 82, 0.56),
            rgba(10, 14, 35, 0.76)
        );
    box-shadow: 0 0 40px rgba(76, 94, 255, 0.12);
    display: flex;
    flex-direction: column;
    backdrop-filter: blur(6px);
    transition: none;
    transition:
        transform 0.28s ease,
        box-shadow 0.28s ease,
        border-color 0.28s ease;
}

.service-card::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    background: conic-gradient(
        from var(--angle, 0deg),
        transparent 0%,
        transparent 68%,
        rgba(42,127,255,0.9) 82%,
        rgba(116,77,255,0.9) 90%,
        transparent 100%
    );
    opacity: 1;
    z-index: -2;
    animation: featureBorderSpin 8s linear infinite;
}

.service-card::after {
    content: "";
    position: absolute;
    inset: 1px;
    border-radius: 25px;
    background:
        linear-gradient(
            180deg,
            rgba(28, 36, 82, 0.88),
            rgba(8, 12, 32, 0.98)
        );
    z-index: -1;
}

.service-card:hover {
    transform: translateY(-8px) scale(1.025);
    border-color: rgba(90, 120, 255, 0.62);
    box-shadow:
        0 0 34px rgba(86,102,255,0.30),
        0 0 90px rgba(86,102,255,0.16);
}

.service-icon {
    width: 104px;
    height: 104px;
    margin-bottom: 30px;
    border-radius: 28px;
    background:
        rgba(90,110,255,0.10);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        inset 0 0 28px rgba(90,110,255,0.10),
        0 0 34px rgba(90,110,255,0.12);
}

.service-icon img {
    width: 118px;
    height: 118px;
    object-fit: contain;
}

.service-card h3 {
    margin-bottom: 18px;
    color: white;
    font-size: 26px;
    line-height: 1.05;
    letter-spacing: -0.8px;
    font-weight: 900;
}

.service-card p {
    color: rgba(255,255,255,0.70);
    font-size: 16px;
    line-height: 1.5;
}

.service-card button {
    display: none;
}

/* Services Text */

.services-gradient-text {
    position: relative;
    z-index: 2;
    max-width: 980px;
    margin: 42px auto 0;
    text-align: center;
    text-shadow: 0 0 32px rgba(90,110,255,0.18);
}

.services-gradient-title {
    display: block;
    margin-bottom: 8px;
    font-size: 30px;
    line-height: 1.2;
    font-weight: 900;
    letter-spacing: -0.5px;
    background: linear-gradient(
        90deg,
        #ffffff,
        #2a7fff,
        #ffffff,
        #744dff,
        #ffffff
    );
    background-size: 260% 260%;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    animation: servicesTextGradient 8s ease-in-out infinite;
}

.services-gradient-description {
    display: block;
    font-size: 18px;
    line-height: 1.35;
    font-weight: 400;
    color: rgba(255,255,255,0.82);
    -webkit-text-fill-color: rgba(255,255,255,0.82);
    background: none;
    animation: none;
}

/* Animations */

@keyframes servicesTextGradient {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/* Desktop */

@media (min-width: 1500px) {
    .services-top {
        width: 100%;
        max-width: 1500px;
        margin: 0 auto 54px;
        display: grid;
        grid-template-columns: 680px 620px;
        column-gap: 120px;
        align-items: start;
        justify-content: center;
    }

    .services-top > div {
        grid-column: 1;
        grid-row: 1;
        width: 680px;
    }

    .services-top > p {
        grid-column: 2;
        grid-row: 1;
        width: 620px;
        max-width: 620px;
        margin-top: 0;
        font-size: 19px;
        line-height: 1.5;
    }

    .services h2 {
        max-width: 760px;
        font-size: 56px;
        line-height: 0.96;
        letter-spacing: -1.8px;
    }
}

/* Mobile Services */

@media screen and (max-width: 430px) {
    .services {
        position: relative !important;
        width: 100% !important;
        max-width: 100% !important;
        min-height: auto !important;
        padding: 58px 18px 64px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        overflow: hidden !important;
    }

    .services-bg-glow {
        display: none !important;
    }

    .services-label,
    .section-label.services-label {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        transform: none !important;
        width: 100% !important;
        margin: 0 0 12px !important;
        padding: 0 !important;
        display: block !important;
        font-size: 10px !important;
        line-height: 1 !important;
        font-weight: 500 !important;
        letter-spacing: 0.34em !important;
        color: rgba(186,204,255,0.84) !important;
        text-transform: uppercase !important;
        text-align: center !important;
        text-shadow: 0 0 9px rgba(92,124,255,0.16) !important;
    }

    .services-label span,
    .section-label.services-label span {
        display: none !important;
    }

    .services-top {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 22px !important;
        padding: 0 !important;
        display: block !important;
    }

    .services-top > div {
        width: 100% !important;
        max-width: 100% !important;
    }

    .services h2 {
        width: 100% !important;
        max-width: 330px !important;
        margin: 0 !important;
        padding: 0 !important;
        font-size: 31px !important;
        line-height: 0.96 !important;
        letter-spacing: -1.2px !important;
        font-weight: 900 !important;
        color: #ffffff !important;
        text-align: left !important;
    }

    .services-top p {
        width: 100% !important;
        max-width: 330px !important;
        margin: 14px 0 0 !important;
        padding: 0 !important;
        font-size: 13px !important;
        line-height: 1.35 !important;
        color: rgba(255,255,255,0.68) !important;
        text-align: left !important;
    }

    .service-cards {
        width: 100% !important;
        max-width: 100% !important;
        margin: 18px auto 0 !important;
        padding: 0 !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
        justify-content: center !important;
        align-items: stretch !important;
        perspective: none !important;
    }

    .service-card {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 214px !important;
        padding: 18px 12px 16px !important;
        border-radius: 18px !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
        transform: none !important;
    }

    .service-card:hover {
        transform: none !important;
    }

    .service-card::after {
        border-radius: 17px !important;
    }

    .service-icon {
        width: 56px !important;
        height: 56px !important;
        margin-bottom: 16px !important;
        border-radius: 16px !important;
    }

    .service-icon img {
        width: 66px !important;
        height: 66px !important;
    }

    .service-card h3 {
        margin: 0 0 9px !important;
        font-size: 17px !important;
        line-height: 1.02 !important;
        letter-spacing: -0.4px !important;
    }

    .service-card p {
        margin: 0 !important;
        font-size: 11.5px !important;
        line-height: 1.3 !important;
        color: rgba(255,255,255,0.68) !important;
    }

    .services-gradient-text {
        width: 100% !important;
        max-width: 340px !important;
        margin: 28px auto 0 !important;
        text-align: center !important;
    }

    .services-gradient-title {
        margin-bottom: 7px !important;
        font-size: 20px !important;
        line-height: 1.12 !important;
        letter-spacing: -0.25px !important;
    }

    .services-gradient-description {
        font-size: 12.5px !important;
        line-height: 1.32 !important;
    }

    .services-gradient-description br {
        display: none !important;
    }
}

/* Small Phones */

@media screen and (max-width: 374px) {
    .services {
        padding: 50px 14px 58px !important;
    }

    .services h2 {
        max-width: 292px !important;
        font-size: 27px !important;
        line-height: 0.97 !important;
        letter-spacing: -1px !important;
    }

    .services-top p {
        max-width: 292px !important;
        font-size: 11.5px !important;
        line-height: 1.32 !important;
    }

    .service-cards {
        gap: 8px !important;
        margin-top: 16px !important;
    }

    .service-card {
        min-height: 194px !important;
        padding: 15px 10px 14px !important;
        border-radius: 16px !important;
    }

    .service-card::after {
        border-radius: 15px !important;
    }

    .service-icon {
        width: 48px !important;
        height: 48px !important;
        margin-bottom: 13px !important;
        border-radius: 14px !important;
    }

    .service-icon img {
        width: 58px !important;
        height: 58px !important;
    }

    .service-card h3 {
        font-size: 15px !important;
        line-height: 1.02 !important;
        margin-bottom: 7px !important;
    }

    .service-card p {
        font-size: 10.2px !important;
        line-height: 1.25 !important;
    }

    .services-gradient-text {
        max-width: 300px !important;
        margin-top: 24px !important;
    }

    .services-gradient-title {
        font-size: 18px !important;
    }

    .services-gradient-description {
        font-size: 11.2px !important;
    }
}

/* iPhone 375–393 */

@media screen and (min-width: 375px) and (max-width: 393px) {
    .services {
        padding: 56px 16px 62px !important;
    }

    .services h2 {
        max-width: 320px !important;
        font-size: 30px !important;
        line-height: 0.96 !important;
    }

    .services-top p {
        max-width: 320px !important;
        font-size: 12.5px !important;
        line-height: 1.34 !important;
    }

    .service-cards {
        gap: 9px !important;
    }

    .service-card {
        min-height: 208px !important;
        padding: 17px 11px 15px !important;
    }

    .service-icon {
        width: 54px !important;
        height: 54px !important;
        margin-bottom: 15px !important;
    }

    .service-icon img {
        width: 64px !important;
        height: 64px !important;
    }

    .service-card h3 {
        font-size: 16.2px !important;
    }

    .service-card p {
        font-size: 11px !important;
        line-height: 1.28 !important;
    }
}

/* Large Phones */

@media screen and (min-width: 394px) and (max-width: 430px) {
    .services {
        padding: 60px 20px 68px !important;
    }

    .services h2 {
        max-width: 360px !important;
        font-size: 33px !important;
        line-height: 0.96 !important;
    }

    .services-top p {
        max-width: 360px !important;
        font-size: 13.4px !important;
        line-height: 1.36 !important;
    }

    .service-cards {
        gap: 11px !important;
    }

    .service-card {
        min-height: 224px !important;
        padding: 19px 13px 17px !important;
    }

    .service-icon {
        width: 60px !important;
        height: 60px !important;
        margin-bottom: 16px !important;
    }

    .service-icon img {
        width: 72px !important;
        height: 72px !important;
    }

    .service-card h3 {
        font-size: 17.5px !important;
    }

    .service-card p {
        font-size: 11.8px !important;
        line-height: 1.3 !important;
    }

    .services-gradient-title {
        font-size: 21px !important;
    }

    .services-gradient-description {
        font-size: 12.8px !important;
    }
}

/* cases.css */
/* Projects */

.cases {
    min-height: 100vh;
    padding: 42px 52px;
    background: transparent;
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.cases-top {
    text-align: center;
    margin-bottom: 40px;
}

.cases-label span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #2a7fff;
    box-shadow: 0 0 14px rgba(42,127,255,0.8);
}

.cases-top h2 {
    font-size: 52px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: -2px;
    margin-bottom: 18px;
}

.cases-top p {
    max-width: 620px;
    color: rgba(255,255,255,0.72);
    font-size: 18px;
    line-height: 1.55;
}

/* Projects Grid */

.cases-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
}

.case-card {
    min-height: 610px;
    padding: 18px;
    border-radius: 24px;
    background:
        linear-gradient(
            180deg,
            rgba(14,20,50,0.88),
            rgba(6,9,24,0.98)
        );
    border: 1px solid rgba(90,110,255,0.22);
    box-shadow: 0 0 50px rgba(70,100,255,0.10);
    display: flex;
    flex-direction: column;
}

.case-head {
    display: grid;
    grid-template-columns: 112px 1fr;
    gap: 16px;
    margin-bottom: 16px;
    align-items: center;
}

.case-image-placeholder {
    width: 112px;
    height: 112px;
    border-radius: 22px;
    overflow: hidden;
    border: 1px solid rgba(90,110,255,0.28);
    background: rgba(255,255,255,0.035);
}

.case-image-placeholder img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.case-image-placeholder-letter {
    display: grid;
    place-items: center;
}

.case-image-placeholder-letter span {
    color: #2f7cff;
    font-size: 42px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: -2px;
}

/* Project Content */

.case-number {
    display: inline-block;
    margin-bottom: 8px;
    color: #2f7cff;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 1.2px;
}

.case-card h3 {
    margin-bottom: 6px;
    font-size: 24px;
    line-height: 1;
    letter-spacing: -0.7px;
    font-weight: 900;
}

.case-subtitle {
    color: rgba(255,255,255,0.78);
    font-size: 12px;
    line-height: 1.3;
}

.case-subtitle strong {
    color: rgba(255,255,255,0.92);
    font-weight: 900;
}

.case-card h4 {
    margin-top: 10px;
    margin-bottom: 5px;
    font-size: 15px;
    font-weight: 900;
}

.case-card p {
    color: rgba(255,255,255,0.68);
    font-size: 12px;
    line-height: 1.32;
}

.case-card ul {
    display: grid;
    gap: 4px;
    margin-bottom: 6px;
    list-style: none;
}

.case-card li {
    color: rgba(255,255,255,0.72);
    font-size: 12px;
    line-height: 1.25;
}

.case-card li::before {
    content: "•";
    color: #2f7cff;
    margin-right: 6px;
}

/* Project Action */

.case-action {
    display: none;
}

/* Project Action */
@media (min-width: 1025px) {
    /* Project Action */

    .case-action {
        width: fit-content;
        min-height: 34px;
        margin-top: auto;
        padding: 9px 12px;

        align-self: center;
        align-items: center;
        justify-content: center;
        gap: 7px;

        border-radius: 10px;

        font-size: 11px;
        line-height: 1;
        font-weight: 800;
        letter-spacing: 0.25px;
    }

    .case-action-link {
        display: inline-flex;

        color: rgba(255,255,255,0.84);
        text-decoration: none;

        border: 1px solid rgba(47,124,255,0.30);
        background:
            linear-gradient(
                135deg,
                rgba(47,124,255,0.08),
                rgba(116,77,255,0.05)
            );

        box-shadow:
            inset 0 0 18px rgba(47,124,255,0.03);

        cursor: pointer;

        transition:
            color 180ms ease,
            border-color 180ms ease,
            background 180ms ease,
            box-shadow 180ms ease,
            transform 180ms ease;
    }

    .case-action-link:hover {
        color: white;

        border-color: rgba(47,124,255,0.58);

        background:
            linear-gradient(
                135deg,
                rgba(47,124,255,0.15),
                rgba(116,77,255,0.09)
            );

        box-shadow:
            0 0 18px rgba(47,124,255,0.10),
            inset 0 0 18px rgba(47,124,255,0.04);

        transform: translateY(-1px);
    }

    .case-action-link:focus-visible {
        outline: 2px solid rgba(47,124,255,0.88);
        outline-offset: 3px;

        color: white;
        border-color: rgba(47,124,255,0.72);
    }

    .case-action-status {
        display: inline-flex;

        color: rgba(255,255,255,0.48);

        border: 1px solid rgba(255,255,255,0.10);
        background: rgba(255,255,255,0.025);

        cursor: default;
        user-select: none;
    }

    .case-action-status-dot {
        width: 6px;
        height: 6px;
        flex: 0 0 6px;

        border-radius: 50%;

        background: rgba(116,77,255,0.82);

        box-shadow:
            0 0 8px rgba(116,77,255,0.52),
            0 0 14px rgba(47,124,255,0.24);
    }

}

/* process.css */
/* Process */

.process {
    position: relative;
    min-height: 100vh;
    padding: 90px 52px 80px;
    background: transparent;
    color: white;
    overflow: visible;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.process-top {
    position: relative;
    margin-bottom: 56px;
}

.process-label span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #2a7fff;
    box-shadow: 0 0 14px rgba(42,127,255,0.8);
}

.process-title-wrap {
    text-align: center;
}

.process h2 {
    font-size: 52px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: -2px;
    margin-bottom: 18px;
}

.process-top p {
    max-width: 620px;
    margin: 0 auto;
    color: rgba(255,255,255,0.72);
    font-size: 18px;
    line-height: 1.55;
}

/* Process Cards */

.process-cards {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 28px;
    position: relative;
}

.process-card {
    height: 350px;
    padding: 28px 22px;
    border-radius: 20px;
    border: 1px solid rgba(70, 105, 255, 0.28);
    background:
        linear-gradient(
            180deg,
            rgba(13, 22, 58, 0.82),
            rgba(5, 9, 28, 0.92)
        );
    box-shadow: 0 0 35px rgba(37, 83, 255, 0.12);
    position: relative;
    isolation: isolate;
    overflow: visible;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition:
        transform 0.28s ease,
        box-shadow 0.28s ease,
        border-color 0.28s ease;
}

.process-card::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    background: conic-gradient(
        from var(--angle, 0deg),
        transparent 0%,
        transparent 64%,
        rgba(42,127,255,1) 78%,
        rgba(93,116,255,1) 88%,
        rgba(42,127,255,0.9) 94%,
        transparent 100%
    );
    z-index: -2;
    animation: featureBorderSpin 5s linear infinite;
}

.process-card::after {
    content: "";
    position: absolute;
    inset: 1px;
    border-radius: 19px;
    background:
        linear-gradient(
            180deg,
            rgba(13, 22, 58, 0.94),
            rgba(5, 9, 28, 0.99)
        );
    z-index: -1;
}

.process-card:nth-child(3)::before,
.process-card:nth-child(4)::before {
    background: conic-gradient(
        from var(--angle, 0deg),
        transparent 0%,
        transparent 64%,
        rgba(116,77,255,1) 78%,
        rgba(174,94,255,1) 88%,
        rgba(116,77,255,0.9) 94%,
        transparent 100%
    );
}

.process-card:nth-child(5)::before,
.process-card:nth-child(6)::before {
    background: conic-gradient(
        from var(--angle, 0deg),
        transparent 0%,
        transparent 64%,
        rgba(255,184,77,1) 78%,
        rgba(255,220,120,1) 88%,
        rgba(255,184,77,0.9) 94%,
        transparent 100%
    );
}

.process-number {
    align-self: flex-start;
    color: #247cff;
    font-size: 36px;
    font-weight: 900;
    line-height: 1;
}

.process-card:nth-child(3) .process-glow,
.process-card:nth-child(4) .process-glow {
    background: #744dff;
    box-shadow:
        0 0 12px #744dff,
        0 0 30px #744dff,
        0 0 60px rgba(116,77,255,0.9);
}

.process-card:nth-child(5) .process-glow,
.process-card:nth-child(6) .process-glow {
    background: #ffb84d;
    box-shadow:
        0 0 12px #ffb84d,
        0 0 30px #ffb84d,
        0 0 60px rgba(255,184,77,0.9);
}

.process-dot {
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #2a7fff;
    z-index: 10;
    box-shadow:
        0 0 10px #2a7fff,
        0 0 28px #2a7fff,
        0 0 70px rgba(42,127,255,0.95);
    animation: processDotPulse 2.5s ease-in-out infinite;
}

.process-card:nth-child(3) .process-dot,
.process-card:nth-child(4) .process-dot {
    background: #744dff;
    box-shadow:
        0 0 10px #744dff,
        0 0 25px #744dff,
        0 0 60px rgba(116,77,255,0.9);
}

.process-card:nth-child(5) .process-dot,
.process-card:nth-child(6) .process-dot {
    background: #ffb84d;
    box-shadow:
        0 0 10px #ffb84d,
        0 0 25px #ffb84d,
        0 0 60px rgba(255,184,77,0.9);
}

.process-icon {
    width: 74px;
    height: 74px;
    min-width: 74px;
    min-height: 74px;
    margin: 18px 0 22px;
    border-radius: 50%;
    border: 1px solid rgba(65,115,255,0.45);
    color: #2280ff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    box-shadow:
        inset 0 0 24px rgba(40,100,255,0.12),
        0 0 28px rgba(40,100,255,0.14);
}

.process-card:nth-child(3) .process-icon,
.process-card:nth-child(4) .process-icon {
    border-color: rgba(128, 86, 255, 0.55);
    color: #8056ff;
    box-shadow:
        inset 0 0 24px rgba(128, 86, 255, 0.14),
        0 0 28px rgba(128, 86, 255, 0.18);
}

.process-card:nth-child(5) .process-icon,
.process-card:nth-child(6) .process-icon {
    border-color: rgba(255,184,77,0.48);
    color: #ffb84d;
}

.process-icon img {
    width: 38px;
    height: 38px;
    object-fit: contain;
    filter:
        brightness(0)
        saturate(100%)
        invert(43%)
        sepia(98%)
        saturate(2534%)
        hue-rotate(205deg)
        brightness(112%)
        contrast(105%)
        drop-shadow(0 0 12px rgba(37,128,255,0.75));
}

.process-card h3 {
    font-size: 18px;
    line-height: 1;
    margin-bottom: 14px;
}

.process-card p {
    color: rgba(255,255,255,0.72);
    font-size: 13px;
    line-height: 1.4;
}

.process-card:hover {
    transform: translateY(-8px);
    border-color: rgba(96,124,255,0.72);
    box-shadow:
        0 0 42px rgba(67,102,255,0.38),
        0 0 110px rgba(67,102,255,0.18);
}

/* Process Button */

.process-btn {
    width: 300px;
    height: 66px;
    margin: 42px auto 0;
    border: none;
    border-radius: 14px;
    background: linear-gradient(135deg, #2680ff, #714dff);
    color: white;
    font-size: 18px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    cursor: pointer;
    box-shadow: 0 0 40px rgba(67,102,255,0.35);
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        filter 0.25s ease;
}

.process-btn:hover {
    transform: translateY(-5px);
    filter: brightness(1.12);
    box-shadow:
        0 0 45px rgba(67,102,255,0.55),
        0 0 100px rgba(67,102,255,0.25);
}

/* Process Colors */

.process-card:nth-child(1) .process-number,
.process-card:nth-child(2) .process-number {
    color: #247cff;
}

.process-card:nth-child(3) .process-number,
.process-card:nth-child(4) .process-number {
    color: #744dff;
}

.process-card:nth-child(5) .process-number,
.process-card:nth-child(6) .process-number {
    color: #ffb84d;
}

.process-card:nth-child(1) .process-icon img,
.process-card:nth-child(2) .process-icon img {
    filter:
        brightness(0)
        saturate(100%)
        invert(43%)
        sepia(98%)
        saturate(2534%)
        hue-rotate(205deg)
        brightness(112%)
        contrast(105%)
        drop-shadow(0 0 12px rgba(37,128,255,0.75));
}

.process-card:nth-child(3) .process-icon img,
.process-card:nth-child(4) .process-icon img {
    filter:
        brightness(0)
        saturate(100%)
        invert(42%)
        sepia(87%)
        saturate(2798%)
        hue-rotate(238deg)
        brightness(101%)
        contrast(103%)
        drop-shadow(0 0 12px rgba(116,77,255,0.75));
}

.process-card:nth-child(5) .process-icon img,
.process-card:nth-child(6) .process-icon img {
    filter:
        brightness(0)
        saturate(100%)
        invert(75%)
        sepia(76%)
        saturate(871%)
        hue-rotate(337deg)
        brightness(103%)
        contrast(101%)
        drop-shadow(0 0 12px rgba(255,184,77,0.75));
}

/* Hover */

.nav a {
    position: relative;
}

.nav a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -8px;
    width: 0;
    height: 2px;
    border-radius: 999px;
    background: #4d6bff;
    box-shadow: 0 0 14px rgba(77, 107, 255, 0.8);
    transition: width 0.25s ease;
}

.nav a:hover::after {
    width: 100%;
}

.contact-btn {
    transition:
        transform 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease,
        background 0.25s ease;
}

.contact-btn:hover {
    transform: translateY(-3px);
    border-color: rgba(93, 111, 255, 0.7);
    background: rgba(35, 42, 90, 0.58);
    box-shadow:
        0 0 24px rgba(86, 102, 255, 0.35),
        0 0 70px rgba(86, 102, 255, 0.16);
}

.feature-card {
    transition:
        transform 0.35s ease,
        border-color 0.35s ease,
        box-shadow 0.35s ease,
        background 0.35s ease;
}

.process .feature-card:hover {
    box-shadow:
        0 0 28px rgba(86,102,255,0.26),
        0 0 70px rgba(86,102,255,0.12);
}

.primary-btn {
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        filter 0.25s ease;
}

.primary-btn:hover {
    transform: translateY(-5px);
    filter: brightness(1.12);
    box-shadow:
        0 0 35px rgba(86, 102, 255, 0.55),
        0 0 90px rgba(86, 102, 255, 0.25);
}

.secondary-btn {
    transition:
        transform 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease,
        background 0.25s ease;
}

.secondary-btn:hover {
    transform: translateY(-5px);
    border-color: rgba(255,255,255,0.85);
    background: rgba(255,255,255,0.06);
    box-shadow:
        0 0 26px rgba(255,255,255,0.16),
        0 0 70px rgba(86, 102, 255, 0.14);
}

.service-card {
    transition:
        transform 0.28s ease,
        box-shadow 0.28s ease,
        border-color 0.28s ease;
}

.service-card:hover .service-icon {
    background: rgba(20, 119, 255, 0.1);
    box-shadow:
        inset 0 0 30px rgba(80, 120, 255, 0.1),
        0 0 34px rgba(20, 119, 255, 0.16);
}

.service-card button {
    transition:
        transform 0.25s ease,
        background 0.25s ease,
        box-shadow 0.25s ease;
}

.service-card:hover button {
    transform: translateY(-2px) translateX(3px);
    background: rgba(20, 119, 255, 0.14);
    box-shadow: 0 0 24px rgba(20, 119, 255, 0.22);
}

/* Animations */

@keyframes processDotPulse {
    0%, 100% {
        transform: translateX(-50%) scale(1);
        opacity: 1;
    }

    50% {
        transform: translateX(-50%) scale(1.35);
        opacity: 0.85;
    }
}

@keyframes featureBorderSpin {
    to {
        --angle: 360deg;
    }
}

@property --angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

/* Responsive */

@media (max-width: 1500px) {
    .process {
        padding: 76px 52px 70px;
    }

    .process-top {
        margin-bottom: 44px;
    }

    .process h2 {
        font-size: 42px;
    }

    .process-cards {
        gap: 20px;
    }

    .process-card {
        height: 330px;
        padding: 24px 18px;
    }

    .process-card p {
        font-size: 13px;
    }
}

/* Large Screens */

@media (min-width: 1700px) {
    .services {
        padding: 90px 72px 90px;
    }

    .services-top {
        max-width: 1500px;
        width: 100%;
        margin: 0 auto 54px;
        display: grid;
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .services h2 {
        max-width: 760px;
        font-size: 58px;
        line-height: 0.98;
    }

    .services-top p {
        max-width: 760px;
        margin-top: 0;
        font-size: 19px;
        line-height: 1.5;
    }

    .service-cards {
        max-width: 1500px;
        width: 100%;
        margin: 0 auto;
        grid-template-columns: repeat(4, 1fr);
        gap: 26px;
    }
}

/* Constant alpha tints reproduce the approved desktop colours in WebKit,
   without out-of-gamut intermediate saturation. Sizes and assets stay intact. */
#sopaxSite .process-card:nth-child(-n+2) .process-icon img,
#sopaxSite .value-icon-img {
    -webkit-filter: url('#sopax-tint-blue') drop-shadow(0 0 12px rgba(37,128,255,.75)) !important;
    filter: url('#sopax-tint-blue') drop-shadow(0 0 12px rgba(37,128,255,.75)) !important;
}
#sopaxSite .process-card:nth-child(3) .process-icon img {
    -webkit-filter: url('#sopax-tint-violet') drop-shadow(0 0 12px rgba(116,77,255,.75)) !important;
    filter: url('#sopax-tint-violet') drop-shadow(0 0 12px rgba(116,77,255,.75)) !important;
}
#sopaxSite .process-card:nth-child(n+5) .process-icon img {
    -webkit-filter: url('#sopax-tint-amber') drop-shadow(0 0 12px rgba(255,184,77,.75)) !important;
    filter: url('#sopax-tint-amber') drop-shadow(0 0 12px rgba(255,184,77,.75)) !important;
}

/* about.css */
/* About */

.about {
    min-height: 100vh;
    padding-top: 40px;
    padding-bottom: 30px;
    padding-left: clamp(40px, 4vw, 72px);
    padding-right: clamp(40px, 4vw, 72px);
    background: transparent;
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
}

.about-hero {
    display: grid;
    grid-template-columns: 0.82fr 1.18fr;
    gap: 44px;
    align-items: center;
    margin-bottom: -20px;
}

.about-left h2 {
    font-size: 56px;
    line-height: 1;
    letter-spacing: -2px;
    margin-bottom: 22px;
}

.about-left p {
    max-width: 620px;
    font-size: 20px;
    line-height: 1.5;
    color: rgba(255,255,255,0.76);
}

.about-line {
    width: 78px;
    height: 2px;
    margin: 22px 0;
    background: #247cff;
    box-shadow: 0 0 18px rgba(36,124,255,0.8);
}

.about-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    max-width: 680px;
}

.about-stats div {
    padding-right: 22px;
    border-right: 1px solid rgba(90,110,255,0.24);
}

.about-stats div:last-child {
    border-right: none;
}

.about-stats strong {
    display: block;
    margin-bottom: 8px;
    color: #2f7cff;
    font-size: 44px;
    line-height: 1;
    font-weight: 900;
}

.about-stats span {
    color: rgba(255,255,255,0.72);
    font-size: 15px;
    line-height: 1.35;
}

/* Founders */

.team-block {
    border: none;
    box-shadow: none;
    background: transparent;
    padding: 0;
}

.team-block > h3 {
    position: relative;
    z-index: 2;
    font-size: 44px;
    line-height: 1;
    letter-spacing: -2px;
    margin-bottom: 26px;
}

.team-cards {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.team-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 26px;
    align-items: center;
    min-height: 190px;
    padding: 22px;
    border-radius: 26px;
    border: 1px solid rgba(85,104,255,0.24);
    background:
        linear-gradient(
            180deg,
            rgba(28,36,82,0.56),
            rgba(10,14,35,0.76)
        );
    box-shadow: 0 0 40px rgba(76,94,255,0.12);
}

.team-card::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    background: conic-gradient(
        from var(--angle, 0deg),
        transparent 0%,
        transparent 68%,
        rgba(42,127,255,0.9) 82%,
        rgba(116,77,255,0.9) 90%,
        transparent 100%
    );
    z-index: -2;
    animation: featureBorderSpin 8s linear infinite;
}

.team-card::after {
    content: "";
    position: absolute;
    inset: 1px;
    border-radius: 25px;
    background:
        linear-gradient(
            180deg,
            rgba(28,36,82,0.88),
            rgba(8,12,32,0.98)
        );
    z-index: -1;
}

.team-card img {
    width: 160px;
    height: 160px;
    border-radius: 24px;
    object-fit: cover;
    object-position: center;
    border: 1px solid rgba(90,110,255,0.28);
    animation: founderPhotoGlow 4s ease-in-out infinite;
    box-shadow: 0 0 18px rgba(45,124,255,0.18);
}

.team-card:nth-child(1) img {
    object-position: center 10%;
}

.team-card:nth-child(2) img {
    object-position: center 70%;
}

.team-info h4 {
    margin-bottom: 6px;
    font-size: 26px;
    line-height: 1;
    font-weight: 900;
}

.team-info span {
    display: block;
    margin-bottom: 10px;
    color: rgba(255,255,255,0.72);
    font-size: 14px;
}

.team-info p {
    color: rgba(255,255,255,0.72);
    font-size: 14px;
    line-height: 1.45;
}

/* Values */

.about-values-wrap {
    margin-top: 90;
}

.about-section-title {
    font-size: 38px;
    line-height: 1;
    letter-spacing: -1px;
    margin-bottom: 22px;
}

.values-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
}

.value-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: 160px;
    padding: 24px 26px;
    border-radius: 22px;
    border: 1px solid rgba(85,104,255,0.24);
    background:
        linear-gradient(
            180deg,
            rgba(28,36,82,0.56),
            rgba(10,14,35,0.76)
        );
    box-shadow: 0 0 40px rgba(76,94,255,0.12);
    transition:
        transform 0.28s ease,
        box-shadow 0.28s ease;
}

.value-card::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    background: conic-gradient(
        from var(--angle, 0deg),
        transparent 0%,
        transparent 68%,
        rgba(42,127,255,0.9) 82%,
        rgba(116,77,255,0.9) 90%,
        transparent 100%
    );
    z-index: -2;
    animation: featureBorderSpin 8s linear infinite;
}

.value-card::after {
    content: "";
    position: absolute;
    inset: 1px;
    border-radius: 21px;
    background:
        linear-gradient(
            180deg,
            rgba(28,36,82,0.88),
            rgba(8,12,32,0.98)
        );
    z-index: -1;
}

.value-card:hover {
    transform: translateY(-4px) scale(1.02);
    border-color: rgba(90,120,255,0.65);
    box-shadow:
        0 0 32px rgba(67,102,255,0.18),
        0 0 70px rgba(76,94,255,0.10);
}

.value-icon-img {
    width: 64px;
    height: 64px;
    object-fit: contain;
    margin-bottom: 14px;
    display: block;
    filter:
        brightness(0)
        saturate(100%)
        invert(43%)
        sepia(98%)
        saturate(2534%)
        hue-rotate(205deg)
        brightness(112%)
        contrast(105%)
        drop-shadow(0 0 12px rgba(37,128,255,0.75));
}

.value-card h4 {
    margin-bottom: 10px;
    font-size: 20px;
}

.value-card p {
    color: rgba(255,255,255,0.72);
    font-size: 15px;
    line-height: 1.42;
}

/* Animations */

@keyframes founderCardSweep {
    0% {
        transform: translateX(-140%);
        opacity: 0;
    }

    25% {
        opacity: 1;
    }

    100% {
        transform: translateX(140%);
        opacity: 0;
    }
}

@keyframes founderPhotoGlow {
    0%, 100% {
        box-shadow: 0 0 18px rgba(45,124,255,0.15);
    }

    50% {
        box-shadow:
            0 0 30px rgba(45,124,255,0.35),
            0 0 50px rgba(107,92,255,0.18);
    }
}

@keyframes aboutCardSweep {
    0% {
        transform: translateX(-120%);
        opacity: 0;
    }

    30% {
        opacity: 1;
    }

    100% {
        transform: translateX(120%);
        opacity: 0;
    }
}

/* contacts.css */
/* Contact Panel */

.contact-overlay {
    position: fixed;
    inset: 0;
    background: rgba(1,4,14,0.38);
    -webkit-backdrop-filter: blur(10px) saturate(125%);
    backdrop-filter: blur(10px) saturate(125%);
    opacity: 0;
    visibility: hidden;
    transition: 0.3s ease;
    z-index: 90;
}

.contact-overlay.active {
    opacity: 1;
    visibility: visible;
}

.contact-panel {
    position: fixed;
    top: 0;
    right: -460px;
    width: 420px;
    height: 100vh;
    background:
        radial-gradient(circle at 20% 0%, rgba(255,255,255,0.14), transparent 28%),
        radial-gradient(circle at 104% 20%, rgba(73,177,255,0.12), transparent 34%),
        radial-gradient(circle at 56% 104%, rgba(125,91,255,0.12), transparent 38%),
        linear-gradient(
            145deg,
            rgba(236,246,255,0.095),
            rgba(72,93,214,0.075) 50%,
            rgba(30,24,80,0.075)
        );
    border-left: 1px solid rgba(216,233,255,0.30);
    box-shadow:
        -24px 0 90px rgba(0,0,0,0.40),
        inset 1px 0 0 rgba(255,255,255,0.18);
    -webkit-backdrop-filter: blur(34px) saturate(175%) brightness(1.05);
    backdrop-filter: blur(34px) saturate(175%) brightness(1.05);
    transition: right 0.35s ease;
    z-index: 100;
    padding: 42px;
}

.contact-panel.active {
    right: 0;
}

.contact-close {
    position: absolute;
    top: 26px;
    right: 26px;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(214,230,255,0.28);
    border-radius: 12px;
    background:
        radial-gradient(circle at 28% -10%, rgba(255,255,255,0.20), transparent 48%),
        linear-gradient(135deg, rgba(255,255,255,0.075), rgba(92,113,255,0.07));
    box-shadow:
        0 10px 24px rgba(0,0,0,0.16),
        inset 0 1px 0 rgba(255,255,255,0.34);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    backdrop-filter: blur(16px) saturate(160%);
    color: white;
    font-size: 18px;
    cursor: pointer;
    transition: 0.25s ease;
}

.calc-modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    border: 1px solid rgba(214,230,255,0.28);
    border-radius: 12px;
    background: rgba(255,255,255,0.07);
    color: white;
    font-size: 18px;
    cursor: pointer;
}

.contact-close,
.project-modal-close,
.lead-popup-close,
.calc-modal-close {
    transition:
        transform 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease,
        background 0.25s ease;
}

.contact-close:hover,
.project-modal-close:hover,
.lead-popup-close:hover,
.calc-modal-close:hover {
    transform:
        translateY(-3px)
        rotate(90deg);
    border-color: rgba(93, 111, 255, 0.7);
    background: rgba(35, 42, 90, 0.58);
    box-shadow:
        0 0 24px rgba(86, 102, 255, 0.35),
        0 0 70px rgba(86, 102, 255, 0.16);
}

.contact-panel-content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.contact-label {
    width: 100%;
    margin: 0 0 28px;
    display: block;
    color: #5d74ff;
    font-size: 32px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: 1.8px;
    text-align: center;
}

.contact-link {
    width: 100%;
    max-width: 520px;
    height: 86px;
    margin: 0 auto 18px;
    padding: 0 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    border-radius: 20px;
    overflow: hidden;
    isolation: isolate;
    background:
        radial-gradient(circle at 18% -32%, rgba(255,255,255,0.18), transparent 46%),
        radial-gradient(circle at 104% 50%, rgba(77,181,255,0.10), transparent 44%),
        linear-gradient(135deg, rgba(245,250,255,0.075), rgba(91,114,255,0.065) 58%, rgba(87,63,190,0.05));
    border: 1px solid rgba(211,229,255,0.24);
    box-shadow:
        0 12px 30px rgba(0,0,0,0.13),
        inset 0 1px 0 rgba(255,255,255,0.26),
        inset 1px 0 0 rgba(214,238,255,0.10),
        inset -1px 0 0 rgba(153,139,255,0.10);
    -webkit-backdrop-filter: blur(18px) saturate(165%);
    backdrop-filter: blur(18px) saturate(165%);
    color: white;
    text-decoration: none;
    font-size: 20px;
    line-height: 1;
    font-weight: 800;
    text-align: center;
    transition: 0.25s ease;
}

.mail-contact-icon,
.phone-contact-icon {
    width: 20px;
    height: 20px;
}

.contact-panel h2 {
    margin-top: 18px;
    margin-bottom: 18px;
    font-size: 46px;
    line-height: 0.95;
    font-weight: 900;
}

.contact-panel p {
    color: rgba(255,255,255,0.62);
    line-height: 1.6;
    margin-bottom: 38px;
}

.contact-link:hover {
    transform: translateX(6px);
    border-color: rgba(220,236,255,0.36);
    background:
        radial-gradient(circle at 18% -32%, rgba(255,255,255,0.22), transparent 46%),
        radial-gradient(circle at 104% 50%, rgba(77,181,255,0.14), transparent 44%),
        linear-gradient(135deg, rgba(245,250,255,0.095), rgba(91,114,255,0.085) 58%, rgba(87,63,190,0.065));
    box-shadow:
        0 14px 34px rgba(0,0,0,0.16),
        0 0 28px rgba(90,110,255,0.14),
        inset 0 1px 0 rgba(255,255,255,0.34);
}

/* Scroll Top */

.scroll-top-btn {
    position: fixed;
    right: 22px;
    left: auto;
    bottom: 32px;
    z-index: 250;
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    display: flex;
    opacity: 0;
    visibility: hidden;
    align-items: center;
    justify-content: center;
    transform: translateY(12px);
    transition:
        opacity 0.3s ease,
        visibility 0.3s ease,
        transform 0.3s ease;
}

.scroll-top-btn.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.scroll-top-btn img {
    width: 90px;
    height: 90px;
    object-fit: contain;
}

/* Contacts */

.contacts {
    min-height: 85vh;
    padding: 100px 52px;
    display: grid;
    background: transparent;
    color: white;
    grid-template-columns: 1fr 420px;
    gap: 60px;
    align-items: center;
}

.contacts-left h2 {
    margin-top: 18px;
    margin-bottom: 24px;
    font-size: 58px;
    line-height: 0.95;
    letter-spacing: -2px;
    font-weight: 900;
}

.contacts-left p {
    max-width: 540px;
    color: rgba(255,255,255,0.72);
    font-size: 18px;
    line-height: 1.6;
    margin-bottom: 42px;
}

.contacts-links {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.contact-item {
    width: 520px;
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 22px 24px;
    border-radius: 20px;
    text-decoration: none;
    color: white;
    background:
        linear-gradient(
            180deg,
            rgba(14,20,50,0.72),
            rgba(7,10,25,0.92)
        );
    border: 1px solid rgba(90,110,255,0.18);
    transition:
        transform 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease;
}

.contact-item:hover {
    transform: translateY(-4px);
    border-color: rgba(90,110,255,0.55);
    box-shadow: 0 0 36px rgba(90,110,255,0.16);
}

.contact-icon {
    width: 58px;
    height: 58px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    background: rgba(90,110,255,0.12);
    color: #5d74ff;
    box-shadow: 0 0 24px rgba(90,110,255,0.12);
}

.contact-item strong {
    display: block;
    margin-bottom: 4px;
    font-size: 18px;
}

.contact-item span {
    color: rgba(255,255,255,0.66);
    font-size: 15px;
}

.contacts-card {
    transform: translate(-150px, -40px);
    padding: 38px;
    border-radius: 28px;
    background:
        linear-gradient(
            180deg,
            rgba(18,24,60,0.95),
            rgba(8,12,30,1)
        );
    border: 1px solid rgba(90,110,255,0.24);
    box-shadow: 0 0 50px rgba(90,110,255,0.12);
}

.contacts-card h3 {
    font-size: 34px;
    margin-bottom: 18px;
}

.contacts-card p {
    color: rgba(255,255,255,0.7);
    line-height: 1.6;
    margin-bottom: 28px;
}

.contacts-btn {
    width: 100%;
    height: 68px;
    border: none;
    border-radius: 18px;
    background:
        linear-gradient(
            135deg,
            #2a7fff,
            #744dff
        );
    color: white;
    font-size: 18px;
    font-weight: 800;
    cursor: pointer;
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.contact-custom-icon {
    width: 22px;
    height: 22px;
    object-fit: contain;
    flex-shrink: 0;
    filter:
        brightness(0)
        saturate(100%)
        invert(43%)
        sepia(98%)
        saturate(2534%)
        hue-rotate(223deg)
        brightness(105%)
        contrast(101%);
    drop-shadow:
        0 0 10px rgba(86, 102, 255, 0.55);
}

.contacts-btn:hover {
    transform: translateY(-4px);
    box-shadow: 0 0 36px rgba(90,110,255,0.35);
}

/* Footer */

.site-footer {
    position: relative;
    width: 100%;
    padding: 0 52px 34px;
    color: white;
    overflow: hidden;
    background: transparent;
}

.site-footer::before {
    content: "";

    position: absolute;
    left: 50%;
    top: 0;

    width: calc(100% - 104px);
    max-width: 1440px;
    height: 1px;

    transform: translateX(-50%);

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(42,127,255,0.18) 18%,
            rgba(255,255,255,0.16) 50%,
            rgba(116,77,255,0.18) 82%,
            transparent 100%
        );

    pointer-events: none;
}

.site-footer-glow {
    position: absolute;
    left: 50%;
    top: -110px;

    width: 720px;
    height: 220px;

    transform: translateX(-50%);

    background:
        radial-gradient(
            ellipse at center,
            rgba(42,127,255,0.07) 0%,
            rgba(116,77,255,0.035) 38%,
            transparent 72%
        );

    filter: blur(18px);

    pointer-events: none;
}

.site-footer-inner {
    position: relative;
    z-index: 2;

    width: 100%;
    max-width: 1440px;

    margin: 0 auto;
    padding-top: 38px;
}

.site-footer-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 80px;
    align-items: start;
}

.site-footer-brand {
    max-width: 470px;
}

.site-footer-logo-row {
    display: flex;
    align-items: center;
    gap: 12px;

    margin-bottom: 14px;
}

.site-footer-logo {
    width: 42px;
    height: 42px;

    flex: 0 0 42px;

    object-fit: contain;
}

.site-footer-logo-row strong {
    color: rgba(255,255,255,0.92);

    font-size: 13px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: 0.7px;
}

.site-footer-brand p {
    margin: 0;

    color: rgba(255,255,255,0.52);

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

.site-footer-links {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 11px;
}

.site-footer-links a {
    position: relative;

    color: rgba(255,255,255,0.58);

    font-size: 12px;
    line-height: 1.35;
    font-weight: 600;

    text-decoration: none;

    transition:
        color 180ms ease,
        text-shadow 180ms ease,
        transform 180ms ease;
}

.site-footer-links a:hover {
    color: rgba(255,255,255,0.96);

    text-shadow:
        0 0 14px rgba(42,127,255,0.30);

    transform: translateX(-2px);
}

.site-footer-links a:focus-visible {
    outline: 2px solid rgba(47,124,255,0.88);
    outline-offset: 4px;

    border-radius: 4px;

    color: white;
}

.site-footer-bottom {
    width: 100%;

    margin-top: 34px;
    padding-top: 20px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;

    border-top: 1px solid rgba(255,255,255,0.055);

    color: rgba(255,255,255,0.34);

    font-size: 10.5px;
    line-height: 1;
    font-weight: 600;
    letter-spacing: 0.25px;
}

.site-footer-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.site-footer-status-dot {
    width: 5px;
    height: 5px;

    flex: 0 0 5px;

    border-radius: 50%;

    background: #2a7fff;

    box-shadow:
        0 0 8px rgba(42,127,255,0.72),
        0 0 14px rgba(116,77,255,0.32);
}

/* Exact approved desktop filter results, without WebKit's out-of-gamut
   saturate/hue chain. Reuse each original alpha silhouette at its existing size. */
:root {
    --sopax-contact-icon: #7973ff;
    --sopax-contact-panel-icon: #4087ff;
}
#sopaxSite .contact-glyph {
    display: inline-block;
    background-color: var(--sopax-contact-icon) !important;
    -webkit-mask: var(--contact-glyph) center / contain no-repeat;
    mask: var(--contact-glyph) center / contain no-repeat;
    filter: none !important;
}
#sopaxSite .contact-panel .contact-glyph {
    background-color: var(--sopax-contact-panel-icon) !important;
    filter: drop-shadow(0 0 10px rgba(42,127,255,.55)) !important;
}
.contact-glyph-mail { --contact-glyph: url('/images/icons/mail.webp'); }
.contact-glyph-telephone { --contact-glyph: url('/images/icons/telephone.webp'); }
.contact-glyph-telegram { --contact-glyph: url('/images/icons/telegram.webp'); }

/* modals.css */
/* Modal */

.calc-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 300;
    background: rgba(1, 4, 14, 0.42);
    -webkit-backdrop-filter: blur(10px) saturate(125%);
    backdrop-filter: blur(10px) saturate(125%);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.22s ease, visibility 0.22s ease;
}

.calc-modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.calc-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 520px;
    max-width: calc(100% - 32px);
    padding: 34px;
    border-radius: 28px;
    overflow: hidden;
    border: 1px solid rgba(220,235,255,0.34);
    background:
        radial-gradient(circle at 16% -12%, rgba(255,255,255,0.18), transparent 34%),
        radial-gradient(circle at 108% 8%, rgba(73,177,255,0.12), transparent 38%),
        radial-gradient(circle at 74% 112%, rgba(125,91,255,0.13), transparent 42%),
        linear-gradient(
            135deg,
            rgba(239,247,255,0.10),
            rgba(93,124,255,0.075) 52%,
            rgba(63,43,143,0.07)
        );
    box-shadow:
        0 30px 90px rgba(0,0,0,0.44),
        0 0 70px rgba(74,96,255,0.12),
        inset 0 1px 0 rgba(255,255,255,0.62),
        inset 1px 0 0 rgba(216,239,255,0.18),
        inset -1px 0 0 rgba(158,142,255,0.16);
    -webkit-backdrop-filter: blur(34px) saturate(180%) brightness(1.06);
    backdrop-filter: blur(34px) saturate(180%) brightness(1.06);
    transform: translate(-50%, -45%) scale(0.96);
    opacity: 0;
    visibility: hidden;
    z-index: 301;
    transition:
        opacity 0.25s ease,
        visibility 0.25s ease,
        transform 0.25s ease;
}

.calc-modal.active {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) scale(1);
}

.calc-modal-title {
    margin-bottom: 26px;
    color: #ffffff;
    font-size: 30px;
    line-height: 1.08;
    font-weight: 900;
    letter-spacing: -1.2px;
    text-align: center;
}

.calc-modal-title span {
    display: block;
    white-space: nowrap;
}

.calc-modal > p:not(.calc-policy-text) {
    margin-bottom: 24px;
    color: rgba(255,255,255,0.72);
    font-size: 16px;
    line-height: 1.45;
    text-align: left;
    text-align: center;
}

.calc-modal input,
.calc-modal textarea {
    width: 100%;
    margin-bottom: 12px;
    padding: 16px 18px;
    border-radius: 14px;
    border: 1px solid rgba(205,224,255,0.20);
    background:
        linear-gradient(135deg, rgba(255,255,255,0.07), rgba(92,112,255,0.045));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.10),
        0 8px 24px rgba(0,0,0,0.10);
    -webkit-backdrop-filter: blur(14px) saturate(145%);
    backdrop-filter: blur(14px) saturate(145%);
    color: white;
    font-size: 15px;
    outline: none;
}

.calc-modal input:focus,
.calc-modal textarea:focus {
    border-color: rgba(176,205,255,0.48);
    box-shadow:
        0 0 0 3px rgba(95,122,255,0.09),
        inset 0 1px 0 rgba(255,255,255,0.14);
}

.calc-modal-close {
    border: 1px solid rgba(214,230,255,0.28);
    background:
        radial-gradient(circle at 28% -10%, rgba(255,255,255,0.20), transparent 48%),
        linear-gradient(135deg, rgba(255,255,255,0.075), rgba(92,113,255,0.07));
    box-shadow:
        0 10px 24px rgba(0,0,0,0.16),
        inset 0 1px 0 rgba(255,255,255,0.36);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    backdrop-filter: blur(16px) saturate(160%);
}

.calc-modal textarea {
    height: 110px;
    resize: none;
}

.calc-send-btn {
    width: 100%;
    height: 62px;
    margin-top: 6px;
    border: none;
    border-radius: 16px;
    background: linear-gradient(135deg, #2a7fff, #744dff);
    color: white;
    font-size: 17px;
    font-weight: 900;
    cursor: pointer;
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.calc-send-btn:hover {
    transform: translateY(-4px);
    box-shadow: 0 0 36px rgba(90,110,255,0.35);
}

.calc-policy-text {
    margin: 2px 0 14px;
    color: rgba(255,255,255,0.46);
    font-size: 11.5px;
    line-height: 1.45;
    font-weight: 300;
    text-align: center;
}

.calc-policy-text a {
    color: rgba(255,255,255,0.82);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color 0.25s ease;
}

.calc-policy-text a:hover {
    color: #5d74ff;
}

/* Contact Icons */

.contact-link-telegram .telegram-contact-icon {
    width: 22px;
    height: 22px;
    min-width: 22px;
    max-width: 22px;
    min-height: 22px;
    max-height: 22px;
    flex: 0 0 22px;
    object-fit: contain;
    object-position: center;
    filter:
        brightness(0)
        saturate(100%)
        invert(47%)
        sepia(95%)
        saturate(2668%)
        hue-rotate(202deg)
        brightness(101%)
        contrast(101%)
        drop-shadow(0 0 10px rgba(42,127,255,0.55));
}

.contact-link-telegram {
    border-color: rgba(90,110,255,0.22);
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,0.065),
            rgba(255,255,255,0.028)
        );
}

.contact-panel .contact-link {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    text-align: left;
}

.contact-panel .mail-contact-icon,
.contact-panel .phone-contact-icon,
.contact-panel .telegram-contact-icon {
    width: 22px;
    height: 22px;
    min-width: 22px;
    max-width: 22px;
    min-height: 22px;
    max-height: 22px;
    flex: 0 0 22px;
    object-fit: contain;
    object-position: center;
    filter:
        brightness(0)
        saturate(100%)
        invert(47%)
        sepia(95%)
        saturate(2668%)
        hue-rotate(202deg)
        brightness(101%)
        contrast(101%)
        drop-shadow(0 0 10px rgba(42,127,255,0.55));
}

/* Toast */

.site-toast {
    position: fixed;
    right: 34px;
    top: 34px;
    width: 360px;
    max-width: calc(100% - 32px);
    padding: 18px 20px;
    display: flex;
    align-items: center;
    gap: 14px;
    border-radius: 20px;
    border: 1px solid rgba(90,110,255,0.32);
    background:
        linear-gradient(
            180deg,
            rgba(15, 22, 54, 0.96),
            rgba(5, 8, 24, 0.98)
        );
    box-shadow:
        0 0 34px rgba(42,127,255,0.24),
        0 0 90px rgba(90,110,255,0.14);
    backdrop-filter: blur(14px);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-14px) translateX(18px) scale(0.96);
    z-index: 500;
    transition:
        opacity 0.28s ease,
        visibility 0.28s ease,
        transform 0.28s ease;
}

.site-toast.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) translateX(0) scale(1);
}

.site-toast-icon {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: linear-gradient(135deg, #2a7fff, #744dff);
    color: white;
    font-size: 22px;
    font-weight: 900;
    box-shadow: 0 0 22px rgba(42,127,255,0.45);
}

.site-toast-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.site-toast-content strong {
    color: #ffffff;
    font-size: 16px;
    line-height: 1.15;
    font-weight: 900;
}

.site-toast-content span {
    color: rgba(255,255,255,0.68);
    font-size: 14px;
    line-height: 1.35;
}

.site-toast.error {
    border-color: rgba(255, 90, 110, 0.38);
    box-shadow:
        0 0 34px rgba(255,90,110,0.20),
        0 0 90px rgba(255,90,110,0.10);
}

.site-toast.error .site-toast-icon {
    background: linear-gradient(135deg, #ff4d6d, #ff7a4d);
    box-shadow: 0 0 22px rgba(255,90,110,0.45);
}

/* solutions.css */
/* Solutions */

.solutions {
    --solutions-content-width: 1120px;

    position: relative;
    min-height: 100vh;
    width: 100%;
    padding: 90px 60px 70px;
    background:
        radial-gradient(circle at 18% 22%, rgba(42,127,255,0.16), transparent 30%),
        radial-gradient(circle at 88% 72%, rgba(116,77,255,0.14), transparent 32%),
        #020511;
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
}

.solutions-top {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: var(--solutions-content-width);
    margin: 0 auto 42px;
    display: grid;
    grid-template-columns: 1.18fr 0.82fr;
    align-items: end;
    gap: 56px;
    transform: translateY(-25px);
}

.solutions-top h2 {
    margin: 0;
    font-size: 52px;
    line-height: 1;
    letter-spacing: -2px;
    font-weight: 900;
}

.solutions-top p {
    align-self: end;
    max-width: 620px;
    margin: 0;
    transform: translateY(-3px);
    color: rgba(255,255,255,0.72);
    font-size: 18px;
    line-height: 1.55;
}

.solutions-table {
    position: relative;
    z-index: 2;
    overflow: hidden;
    width: 100%;
    max-width: var(--solutions-content-width);
    min-height: 520px;
    margin: 0 auto;
    border-radius: 24px;
    border: 1px solid rgba(85,104,255,0.28);
    background:
        linear-gradient(
            180deg,
            rgba(28,36,82,0.56),
            rgba(10,14,35,0.78)
        );
    box-shadow:
        0 0 40px rgba(76,94,255,0.14),
        0 0 90px rgba(76,94,255,0.08);
}

.solutions-table::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            115deg,
            transparent 0%,
            rgba(255,255,255,0.04) 38%,
            rgba(93,116,255,0.18) 50%,
            rgba(255,255,255,0.04) 62%,
            transparent 100%
        );
    transform: translateX(-120%);
    animation: solutionsTableSweep 6s ease-in-out infinite;
    pointer-events: none;
    z-index: 1;
}

.solutions-row {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.solutions-row > div {
    min-height: 76px;
    padding: 20px 24px;
    border-right: 1px solid rgba(255,255,255,0.14);
    border-bottom: 1px solid rgba(255,255,255,0.13);
    font-size: 18px;
    line-height: 1.4;
    font-weight: 700;
    color: rgba(255,255,255,0.9);
}

.solutions-row > div:last-child {
    border-right: none;
}

.solutions-row:last-child > div {
    border-bottom: none;
}

/* Solution head */

.solutions-head {
    background:
        linear-gradient(
            90deg,
            rgba(42,127,255,0.18),
            rgba(116,77,255,0.20)
        );
}

.solutions-head div {
    min-height: 84px;
    display: flex;
    align-items: center;
    font-size: 32px;
    line-height: 1.05;
    font-weight: 900;
    letter-spacing: -0.8px;
    color: white;
}

.solutions-head-item {
    display: flex;
    align-items: center;
    gap: 16px;
}

.solutions-head span {
    display: block;
    max-width: 420px;
    background-size: 210% 100%;
    background-position: 0% 50%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    font-size: 28px;
    line-height: 1.05;
    font-weight: 900;
    text-shadow:
        0 0 16px rgba(42,127,255,0.26),
        0 0 34px rgba(255,255,255,0.08);
    animation: solutionsHeadGradient 4.8s ease-in-out infinite;
}

.solution-head-left span {
    background-image:
        linear-gradient(
            100deg,
            rgba(255,255,255,0.92) 0%,
            rgba(120,180,255,0.98) 32%,
            rgba(255,255,255,1) 52%,
            rgba(42,127,255,0.98) 74%,
            rgba(255,255,255,0.9) 100%
        );
    background-size: 210% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.solution-head-right span {
    background-image:
        linear-gradient(
            100deg,
            rgba(255,255,255,0.94) 0%,
            rgba(190,160,255,0.98) 32%,
            rgba(255,255,255,1) 52%,
            rgba(116,77,255,0.98) 74%,
            rgba(255,255,255,0.92) 100%
        );
    background-size: 210% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    text-shadow:
        0 0 16px rgba(116,77,255,0.30),
        0 0 34px rgba(255,255,255,0.08);
}

.solutions-head-gif {
    width: 54px;
    height: 54px;
    object-fit: contain;
    flex-shrink: 0;
    transform: translateY(-8px);
    filter:
        invert(1)
        brightness(2)
        hue-rotate(180deg);
}

.solution-head-right {
    display: flex;
    align-items: center;
    gap: 16px;
}

.solution-head-left {
    gap: 8px;
}

.solution-head-left .task-gif {
    margin-left: 0;
}

.task-gif {
    transform: translateY(-8px) scaleX(-1);
}

/* Animations */

@keyframes solutionsTableSweep {
    0% {
        transform: translateX(-120%);
        opacity: 0;
    }

    35% {
        opacity: 1;
    }

    100% {
        transform: translateX(120%);
        opacity: 0;
    }
}

@keyframes solutionsHeadGradient {
    0%, 100% {
        background-position: 0% 50%;
        opacity: 0.9;
    }

    50% {
        background-position: 100% 50%;
        opacity: 1;
    }
}

/* Responsive */

@media (max-width: 1500px) {
    .solutions {
        --solutions-content-width: 1040px;
        padding: 82px 52px 58px;
    }

    .solutions-top {
        grid-template-columns: 1.2fr 0.8fr;
        gap: 44px;
        margin-bottom: 10px;
    }

    .solutions-top h2 {
        margin: 0;
        margin-top: -16px;
        font-size: 48px;
    }

    .solutions-top p {
        margin: 0;
        margin-top: -12px;
        transform: translateY(-2px);
        font-size: 17px;
        line-height: 1.5;
    }

    .solutions-table {
        min-height: 400px;
    }

    .solutions-row > div {
        min-height: 58px;
        padding: 18px 22px;
        font-size: 16px;
    }

    .solutions-head div {
        min-height: 28px;
        font-size: 30px;
    }
}

/* audience.css */
/* Audience */

.audience {
    position: relative;
    min-height: fit-content;
    padding: 40px 56px 26px;
    color: white;
    background: transparent;
    overflow: hidden;
}

.audience-label {
    top: 36px;
    left: 60px;
}

.audience-top {
    text-align: center;
    margin-bottom: 26px;
    position: relative;
    z-index: 2;
}

.audience-top h2 {
    margin-bottom: 10px;
    text-transform: uppercase;
}

.audience-title {
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    gap: 12px;
    white-space: nowrap;
}

.audience-title-main {
    display: inline-block;
    font-size: 46px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: -2px;
    background: linear-gradient(
        90deg,
        #2a7fff,
        #744dff,
        #ffffff,
        #2a7fff
    );
    background-size: 260% 260%;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    animation: audienceTitleGradient 7s ease-in-out infinite;
}

.audience-title-sub {
    display: inline-block;
    font-size: 46px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: -2px;
    color: #ffffff;
    background: none;
    -webkit-text-fill-color: #ffffff;
}

.audience-top p {
    max-width: 820px;
    margin: 0 auto;
    color: rgba(255,255,255,0.72);
    font-size: 18px;
    line-height: 1.4;
}

/* Audience Grid */

.audience-grid {
    max-width: 1420px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.audience-item {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: 0.82fr 1.3fr;
    height: 172px;
    min-height: 0;
    overflow: hidden;
    border-radius: 22px;
    border: 1px solid rgba(85,104,255,0.28);
    background:
        linear-gradient(
            180deg,
            rgba(28,36,82,0.56),
            rgba(10,14,35,0.86)
        );
    box-shadow:
        0 0 24px rgba(76,94,255,0.10),
        inset 0 0 24px rgba(116,77,255,0.06);
}

.audience-item::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background:
        linear-gradient(
            135deg,
            rgba(42,127,255,0.9),
            rgba(116,77,255,0.35),
            rgba(42,127,255,0.65)
        );
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0.75;
    z-index: 3;
    pointer-events: none;
}

.audience-item::after {
    display: none;
}

.audience-photo {
    overflow: hidden;
    background: rgba(5,8,22,0.92);
}

.audience-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.audience-info {
    position: relative;
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background:
        linear-gradient(
            180deg,
            rgba(18,24,60,0.78),
            rgba(7,10,28,0.96)
        );
}

.audience-info::before {
    content: "";
    position: absolute;
    left: 0;
    top: 18px;
    bottom: 18px;
    width: 1px;
    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(42,127,255,0.75),
            rgba(116,77,255,0.75),
            transparent
        );
}

.audience-info h3 {
    max-width: 265px;
    font-size: 25px;
    line-height: 1.08;
    margin-bottom: 10px;
    font-weight: 900;
    text-transform: uppercase;
}

.audience-info p {
    max-width: 240px;
    color: rgba(255,255,255,0.72);
    font-size: 13.5px;
    line-height: 1.34;
}

.audience-icon {
    position: absolute;
    right: 16px;
    bottom: 14px;
    width: 56px;
    height: 56px;
    object-fit: contain;
    filter:
        invert(1)
        sepia(1)
        saturate(8)
        hue-rotate(155deg)
        brightness(2.4)
        contrast(1.2)
        drop-shadow(0 0 10px rgba(80, 210, 255, 0.95))
        drop-shadow(0 0 20px rgba(42, 127, 255, 0.75));
}

/* Audience Benefits */

.audience-why {
    max-width: 1420px;
    margin: 28px auto 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 34px;
    position: relative;
    z-index: 2;
}

.audience-why-card {
    padding: 0;
    min-height: auto;
    border: none;
    background: none;
    box-shadow: none;
    border-radius: 0;
    overflow: visible;
    isolation: auto;
}

.audience-why-card::before,
.audience-why-card::after {
    display: none;
}

.audience-why-card h3 {
    margin-bottom: 6px;
    color: white;
    font-size: 18px;
    line-height: 1.15;
    font-weight: 900;
}

.audience-why-card p {
    color: rgba(255,255,255,0.62);
    font-size: 12px;
    line-height: 1.35;
}

.audience-footnote {
    width: calc(100% - 120px);
    max-width: 1100px;
    margin: 28px auto 0;
    text-align: center;
    color: rgba(255,255,255,0.38);
    font-size: 12px;
    line-height: 1.45;
    font-style: italic;
}

/* Animations */

@keyframes audienceTitleGradient {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/* Large Screens */

@media (min-width: 1700px) {
    .audience {
        min-height: 100vh;
        padding: 36px 72px 64px;
    }

    .audience-top {
        margin-bottom: 24px;
    }

    .audience-title-main {
        font-size: 46px;
    }

    .audience-title-sub {
        font-size: 46px;
    }

    .audience-top p {
        font-size: 18px;
        line-height: 1.35;
        max-width: 980px;
    }

    .audience-grid {
        max-width: 2000px;
        gap: 26px;
    }

    .audience-item {
        height: 210px;
        grid-template-columns: 200px 1fr;
    }

    .audience-info {
        padding: 22px 112px 22px 24px;
    }

    .audience-info h3 {
        font-size: 26px;
        line-height: 1.08;
        max-width: 285px;
    }

    .audience-info p {
        font-size: 13.5px;
        line-height: 1.32;
        max-width: 265px;
    }

    .audience-icon {
        width: 52px;
        height: 52px;
        right: 24px;
        bottom: 20px;
    }

    .audience-why {
        max-width: 1500px;
        margin-top: 50px;
        gap: 42px;
    }

    .audience-why-card {
        min-height: auto;
        padding: 0;
    }

    .audience-why-card h3 {
        font-size: 19px;
        margin-bottom: 7px;
    }

    .audience-why-card p {
        font-size: 12px;
        line-height: 1.35;
    }

    .audience-footnote {
        width: calc(100% - 140px);
        max-width: 1180px;
        margin: 34px auto 0;
        font-size: 11.5px;
        line-height: 1.4;
    }
}

/* Laptop */

@media (max-width: 1500px) {
    .audience {
        padding: 34px 42px 22px;
    }

    .audience-top {
        margin-bottom: 36px;
    }

    .audience-title-main {
        font-size: 34px;
    }

    .audience-title-sub {
        font-size: 34px;
    }

    .audience-top p {
        font-size: 13px;
        line-height: 1.28;
        max-width: 700px;
    }

    .audience-grid {
        max-width: 1280px;
        gap: 22px;
    }

    .audience-item {
        height: 158px;
        min-height: 0;
        border-radius: 18px;
    }

    .audience-info {
        padding: 13px 58px 13px 14px;
    }

    .audience-info h3 {
        font-size: 15px;
        line-height: 1.05;
        margin-bottom: 7px;
        max-width: 185px;
    }

    .audience-info p {
        font-size: 9.6px;
        line-height: 1.25;
        max-width: 170px;
    }

    .audience-icon {
        width: 44px;
        height: 44px;
        right: 12px;
        bottom: 10px;
    }

    .audience-why {
        max-width: 1180px;
        margin-top: 38px;
        gap: 18px;
    }

    .audience-why-card {
        min-height: auto;
        padding: 0;
        border-radius: 0;
    }

    .audience-why-card h3 {
        font-size: 15px;
        margin-bottom: 6px;
    }

    .audience-why-card p {
        font-size: 9.8px;
        line-height: 1.25;
    }
}

/* common.css */
/* Desktop */

html,
body {
    margin: 0;
    background:
        radial-gradient(
            circle at 15% 20%,
            rgba(47,113,225,.12),
            transparent 35%
        ),
        radial-gradient(
            circle at 85% 30%,
            rgba(128,88,203,.11),
            transparent 40%
        ),
        radial-gradient(
            circle at 50% 80%,
            rgba(92,83,193,.09),
            transparent 45%
        ),
        linear-gradient(
            135deg,
            #010207 0%,
            #01040c 30%,
            #020511 60%,
            #03081a 100%
        );
    background-attachment: scroll;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    background:
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 120px,
            rgba(42,127,255,.015) 121px,
            transparent 122px
        );
    pointer-events: none;
}

section {
    position: relative;
}

section:not(.hero)::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: min(1200px, 88vw);
    height: 4px;
    transform: translateX(-50%);
    border-radius: 999px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(42,127,255,0.95),
        rgba(255,255,255,0.85),
        rgba(116,77,255,0.95),
        transparent
    );
    box-shadow:
        0 0 28px rgba(42,127,255,0.95),
        0 0 80px rgba(116,77,255,0.45);
    opacity: 0.95;
    animation: sectionDividerGlow 4s ease-in-out infinite;
}

.hero,
.services,
.process,
.solutions,
.why,
.audience,
.cases,
.about,
.contacts {
    min-height: 100vh;
    width: 100%;
    background: transparent;
    padding-left: clamp(40px, 4vw, 72px);
    padding-right: clamp(40px, 4vw, 72px);
}

/* Services */

.services {
    min-height: 100vh;
    padding-top: 40px;
    padding-bottom: 40px;
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.service-cards {
    grid-template-columns: repeat(4, minmax(260px, 320px));
    justify-content: center;
}

/* Process */

.process {
    min-height: 100vh;
    padding-top: clamp(80px, 8vh, 120px);
    padding-bottom: clamp(80px, 8vh, 120px);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.process-top {
    padding-top: 0;
}

/* About */

.about {
    height: 100vh;
    padding-top: 80px;
    padding-bottom: 80px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.about-hero {
    grid-template-columns: minmax(420px, 0.85fr) minmax(520px, 1.15fr);
}

.about-image {
    height: clamp(260px, 28vh, 340px);
}

/* Contacts */

.contacts {
    grid-template-columns: minmax(420px, 560px) minmax(360px, 420px);
    justify-content: center;
    gap: clamp(60px, 8vw, 140px);
    align-items: center;
}

.contacts-card {
    transform: none;
}

.contact-item {
    width: 100%;
}

/* Section Labels */

.services,
.cases,
.process,
.solutions,
.audience,
.about,
.contacts {
    position: relative;
}

.section-label {
    position: absolute;
    left: max(6vw, calc((100% - 1200px) / 2));
    width: min(1200px, 88vw);
    transform: none;
    color: rgba(186, 204, 255, 0.84);
    font-size: 11px;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: 0.42em;
    text-transform: uppercase;
    text-align: center;
    text-shadow: 0 0 12px rgba(92, 124, 255, 0.20);
    z-index: 20;
    margin: 0;
}

.section-label span {
    display: none;
}

.section-label::after {
    content: none;
}

.services-label,
.process-label,
.cases-label,
.solutions-label,
.audience-label,
.about-label,
.contacts-label {
    top: 36px;
}

.cases-label,
.about-label {
    top: 40px;
}

/* Preserve the approved desktop audience spacing. */
@media (min-width: 1367px) {
    .audience { padding-top: clamp(112px, 8vw, 150px); }
}

.services-top h2 {
    transform: translate(0, 0);
}

.services-top p {
    transform: translate(0, 0);
}

.cases-top h2 {
    text-align: center;
    transform: translate(0, 0);
}

.cases-top p {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    transform: translate(0, 0);
}

.services-top h2 {
    transform: translate(0, 20px);
}

.services-top p {
    transform: translate(0, 20px);
}

.cases-top h2 {
    transform: translate(0, 0);
}

.cases-top p {
    transform: translate(0, 0);
}

.page-top-anchor {
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}

section {
    /* Anchor destinations must keep their real height, even off screen. */
    content-visibility: visible;
}

/* CTA */

.hero-button-note {
    margin-top: 24px;
    color: rgba(255,255,255,0.68);
    font-size: 14px;
    line-height: 1.35;
    font-weight: 300;
    letter-spacing: 0.1px;
}

.contacts-button-note {
    margin-top: 16px;
    color: rgba(255,255,255,0.62);
    font-size: 14px;
    line-height: 1.35;
    font-weight: 300;
    text-align: center;
    letter-spacing: 0.1px;
}

/* Animations */

@keyframes sectionDividerGlow {
    0%, 100% {
        opacity: 0.55;
        width: min(900px, 78vw);
    }

    50% {
        opacity: 1;
        width: min(1300px, 92vw);
    }
}

/* Large Screens */

@media (min-width: 1600px) {
    .hero-left h1 {
        font-size: clamp(60px, 4vw, 76px);
    }

    .service-card {
        width: 100%;
        height: 450px;
    }

    .team-cards {
        grid-template-columns: repeat(2, 300px);
        justify-content: center;
    }
}

/* Laptop */

@media (max-width: 1500px) {
    .services,
    .process,
    .solutions,
    .audience,
    .contacts {
        min-height: 100vh;
    }

    .about {
        min-height: 100vh;
        height: 100vh;
        padding-top: 34px;
        padding-bottom: 24px;
    }

    .service-cards {
        grid-template-columns: repeat(4, minmax(240px, 1fr));
    }

    .service-card {
        width: 100%;
    }

    .team-cards {
        grid-template-columns: repeat(2, 280px);
    }

    .hero-button-note {
        margin-top: 12px;
        font-size: 13px;
    }

    .contacts-button-note {
        margin-top: 14px;
        font-size: 13px;
    }
}

/* header.css */
/* Hero */

.hero {
    padding: 24px 52px;
    padding-bottom: 0;
    overflow: hidden;
    position: relative;
    background: transparent;
    isolation: isolate;
}

.hero::after {
    content: "";
    position: absolute;
    right: -30px;
    top: 51%;
    width: 62vw;
    height: 82vh;
    background-image: url("/images/rocket.webp?v=999");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 1;
    pointer-events: none;
    transform: translateY(-50%);
}

/* Header */

.header {
    height: 54px;
    overflow: visible;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    z-index: 10;
}

.logo {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -0.4px;
}

.logo-image {
    width: 64px;
    height: 64px;
    object-fit: contain;
    flex-shrink: 0;
    animation:
        logoNeonPulse 3.8s ease-in-out infinite,
        logoColorShift 6s ease-in-out infinite;
}

/* Navigation */

.nav {
    display: flex;
    gap: 38px;
}

.nav a {
    color: rgba(255,255,255,0.82);
    text-decoration: none;
    font-size: 15px;
    transition: 0.2s;
}

.nav a:hover {
    color: white;
}

/* Contact Button */

.contact-btn {
    position: relative;
    z-index: 20;
    overflow: hidden;
    height: 52px;
    padding: 0 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    white-space: nowrap;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.18);
    background: rgba(15, 15, 25, 0.55);
    color: white;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    backdrop-filter: blur(10px);
    box-shadow: 0 0 24px rgba(90, 110, 255, 0.12);
}

.phone-icon {
    width: 18px;
    height: 18px;
    object-fit: contain;
    flex-shrink: 0;
    /* Same approved Chrome colour, encoded in the asset: WebKit clips the
       chained saturate/hue filters to magenta instead of this blue-violet. */
    filter: none;
}

/* Contact Links */

.contact-link {
    display: flex;
    align-items: center;
    gap: 14px;
    height: 68px;
    padding: 0 22px;
    margin-bottom: 16px;
    border-radius: 18px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(90,110,255,0.14);
    color: white;
    text-decoration: none;
    font-size: 17px;
    font-weight: 600;
    transition: 0.25s ease;
}

.phone-contact-icon {
    width: 14px;
    height: 14px;
    object-fit: contain;
    flex-shrink: 0;
    filter:
        brightness(0)
        saturate(100%)
        invert(43%)
        sepia(98%)
        saturate(2534%)
        hue-rotate(223deg)
        brightness(105%)
        contrast(101%);
    drop-shadow:
        0 0 10px rgba(86, 102, 255, 0.55);
}

.mail-contact-icon {
    width: 14px;
    height: 14px;
    object-fit: contain;
    flex-shrink: 0;
    filter:
        brightness(0)
        saturate(100%)
        invert(43%)
        sepia(98%)
        saturate(2534%)
        hue-rotate(223deg)
        brightness(105%)
        contrast(101%);
    drop-shadow:
        0 0 10px rgba(86, 102, 255, 0.55);
}

/* Animations */

@keyframes logoColorShift {
    0% {
        filter: hue-rotate(0deg);
    }

    50% {
        filter: hue-rotate(45deg);
    }

    100% {
        filter: hue-rotate(0deg);
    }
}

/* Large Screens */

@media (min-width: 1700px) {
    .nav {
        gap: 46px;
    }

    .nav a {
        font-size: 22px;
        transition:
            color 0.35s ease,
            opacity 0.35s ease,
            transform 0.35s ease;
    }

    .nav a:hover {
        color: #ffffff;
        transform: translateY(-1px);
    }

    .contact-btn {
        height: 56px;
        padding: 0 28px;
        font-size: 16px;
    }
}

/* Figma-led header composition: keep original SOPAX controls, move nav to glass center */

.hero .header {
    position: relative;
    z-index: 30;
}

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

.hero .nav {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 6px 10px;
    overflow: hidden;
    isolation: isolate;
    border: 1px solid rgba(180, 197, 255, 0.20);
    border-radius: 19px;
    background:
        radial-gradient(
            circle at 18% -30%,
            rgba(255, 255, 255, 0.15),
            transparent 40%
        ),
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.055),
            rgba(49, 65, 168, 0.09) 46%,
            rgba(4, 8, 24, 0.44)
        );
    box-shadow:
        0 16px 38px rgba(0, 0, 0, 0.22),
        0 0 24px rgba(69, 92, 255, 0.07),
        inset 0 1px 0 rgba(255, 255, 255, 0.17),
        inset 0 -12px 28px rgba(49, 63, 161, 0.05);
    -webkit-backdrop-filter: blur(26px) saturate(155%);
    backdrop-filter: blur(26px) saturate(155%);
    white-space: nowrap;
}

.hero .nav::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background:
        linear-gradient(
            112deg,
            rgba(255, 255, 255, 0.14),
            rgba(255, 255, 255, 0.025) 28%,
            transparent 46%
        );
}

.hero .nav::after {
    content: "";
    position: absolute;
    left: 8%;
    right: 8%;
    top: 0;
    height: 1px;
    pointer-events: none;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(232, 239, 255, 0.72),
        rgba(145, 166, 255, 0.32),
        transparent
    );
    opacity: 0.68;
}

.hero .nav a {
    position: relative;
    z-index: 1;
    padding: 8px 10px;
    border-radius: 11px;
    font-size: 13px;
    line-height: 1;
    color: rgba(255, 255, 255, 0.70);
    transition:
        color 180ms cubic-bezier(0.23, 1, 0.32, 1),
        background-color 180ms cubic-bezier(0.23, 1, 0.32, 1),
        box-shadow 180ms cubic-bezier(0.23, 1, 0.32, 1);
}

/* process.css contains the legacy underline hover used by the old header.
   The floating hero navigation uses material states instead. */
.hero .nav a::after {
    content: none;
    display: none;
}

@media (hover: hover) and (pointer: fine) {
    .hero .nav a:hover {
        color: rgba(255, 255, 255, 0.96);
        background: linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.10),
            rgba(84, 103, 255, 0.065)
        );
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.14),
            inset 0 0 0 1px rgba(160, 178, 255, 0.08),
            0 5px 18px rgba(37, 58, 168, 0.11);
    }
}

.hero .nav a:focus-visible {
    outline: 1px solid rgba(168, 190, 255, 0.74);
    outline-offset: 1px;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.07);
}

.hero .contact-btn {
    border-color: rgba(180, 197, 255, 0.20);
    background:
        radial-gradient(
            circle at 18% -24%,
            rgba(255, 255, 255, 0.14),
            transparent 42%
        ),
        linear-gradient(
            140deg,
            rgba(255, 255, 255, 0.055),
            rgba(50, 66, 168, 0.075) 48%,
            rgba(5, 9, 25, 0.46)
        );
    box-shadow:
        0 14px 34px rgba(0, 0, 0, 0.20),
        0 0 24px rgba(69, 92, 255, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
    -webkit-backdrop-filter: blur(24px) saturate(150%);
    backdrop-filter: blur(24px) saturate(150%);
    transition:
        border-color 180ms cubic-bezier(0.23, 1, 0.32, 1),
        box-shadow 180ms cubic-bezier(0.23, 1, 0.32, 1),
        transform 180ms cubic-bezier(0.23, 1, 0.32, 1);
}

@media (hover: hover) and (pointer: fine) {
    .hero .contact-btn:hover {
        border-color: rgba(194, 209, 255, 0.28);
        box-shadow:
            0 16px 38px rgba(0, 0, 0, 0.22),
            0 0 30px rgba(69, 92, 255, 0.12),
            inset 0 1px 0 rgba(255, 255, 255, 0.18);
        transform: translateY(-1px);
    }
}

@media (min-width: 1700px) {
    .hero .nav {
        gap: 4px;
        padding: 6px 10px;
    }

    .hero .nav a {
        padding: 9px 12px;
        font-size: 14px;
    }
}

@media (prefers-reduced-transparency: reduce) {
    .hero .nav,
    .hero .contact-btn {
        background: rgba(8, 11, 28, 0.94);
        border-color: rgba(126, 145, 255, 0.34);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    .hero .nav::before,
    .hero .nav::after {
        display: none;
    }
}

/* hero.css */
/* Hero */

.hero {
    position: relative;
}

.hero::after {
    content: "";
    position: absolute;
    right: -260px;
    top: 50%;
    width: 900px;
    height: 900px;
    transform: translateY(-50%);
    background: radial-gradient(
        circle,
        rgba(42,127,255,.10) 0%,
        rgba(116,77,255,.06) 40%,
        transparent 75%
    );
    filter: blur(130px);
    pointer-events: none;
    z-index: 0;
}

.hero-rocket-wrap {
    position: absolute;
    right: 20px;
    top: 52%;
    width: 50vw;
    max-width: 780px;
    transform: translateY(-50%);
    pointer-events: none;
    z-index: 1;
    -webkit-mask-image:
        linear-gradient(to right, transparent 0%, black 14%, black 86%, transparent 100%),
        linear-gradient(to bottom, transparent 0%, black 10%, black 88%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image:
        linear-gradient(to right, transparent 0%, black 14%, black 86%, transparent 100%),
        linear-gradient(to bottom, transparent 0%, black 10%, black 88%, transparent 100%);
    mask-composite: intersect;
}

.hero-rocket-wrap::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(
            circle at 55% 52%,
            transparent 0%,
            transparent 42%,
            rgba(2,5,17,0.28) 68%,
            rgba(2,5,17,0.88) 100%
        );
    pointer-events: none;
    mix-blend-mode: multiply;
}

.hero-rocket {
    width: 100%;
    display: block;
    opacity: 1;
    mix-blend-mode: screen;
    filter:
        brightness(1.18)
        contrast(1.12)
        saturate(1.18);
}

.header,
.hero-content {
    position: relative;
    z-index: 3;
}

.hero-content {
    margin-top: 36px;
    position: relative;
    z-index: 3;
}

.hero-left {
    width: 50%;
    position: relative;
    z-index: 5;
}

.hero-left h1 {
    font-size: 56px;
    line-height: 1.08;
    letter-spacing: -2px;
    font-weight: 900;
    max-width: 800px;
}

.hero-nowrap {
    white-space: nowrap;
}

.hero-left h1 span {
    display: inline-block;
    color: rgba(255,255,255,0.92);
}

.hero-subtitle {
    margin-top: 22px;
    max-width: 720px;
    font-size: 20px;
    line-height: 1.45;
    font-weight: 500;
    color: rgba(255,255,255,0.82);
    position: relative;
}

.hero-subtitle::before {
    display: none;
}

.hero-subtitle::after {
    --scanner-from: 60px;
    --scanner-to: 460px;
    content: "";
    position: absolute;
    top: -16px;
    left: 0;
    width: 120px;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(
        90deg,
        transparent,
        #2a7fff,
        #744dff,
        transparent
    );
    box-shadow:
        0 0 18px rgba(90,110,255,0.9),
        0 0 40px rgba(90,110,255,0.55);
    animation: heroScanner 3s ease-in-out infinite;
}

.hero-guarantee-gradient,
.sopax-gradient-text {
    display: inline-block;
    background:
        linear-gradient(
            100deg,
            rgba(255,255,255,0.92) 0%,
            rgba(120,180,255,0.98) 32%,
            rgba(255,255,255,1) 52%,
            rgba(42,127,255,0.98) 74%,
            rgba(255,255,255,0.9) 100%
        );
    background-size: 210% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow:
        0 0 16px rgba(42,127,255,0.26),
        0 0 34px rgba(255,255,255,0.08);
    animation: desktopGuaranteeGradient 4.8s ease-in-out infinite;
}

.calc-modal-title .sopax-gradient-text { display: inline-block; }

.hero-guarantee-gradient {
    font-weight: 900;
    letter-spacing: 0.42px;
    text-transform: uppercase;
}

.hero-subtitle {
    position: relative;
}

/* Features */

.features {
    display: flex;
    gap: 14px;
    margin-top: 34px;
}

.feature-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    width: 230px;
    height: 82px;
    border-radius: 16px;
    border: 1px solid rgba(85, 104, 255, 0.24);
    background:
        linear-gradient(
            180deg,
            rgba(28, 36, 82, 0.56),
            rgba(10, 14, 35, 0.76)
        );
    box-shadow: 0 0 40px rgba(76, 94, 255, 0.12);
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0 18px;
    backdrop-filter: blur(6px);
    transition:
        transform 0.28s ease,
        box-shadow 0.28s ease;
}

.feature-card::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    background: conic-gradient(
        from var(--angle, 0deg),
        transparent 0%,
        transparent 68%,
        rgba(42,127,255,0.9) 82%,
        rgba(116,77,255,0.9) 90%,
        transparent 100%
    );
    opacity: 1;
    z-index: -2;
    animation: featureBorderSpin 8s linear infinite;
}

.feature-card::after {
    content: "";
    position: absolute;
    inset: 1px;
    border-radius: 15px;
    background:
        linear-gradient(
            180deg,
            rgba(28, 36, 82, 0.88),
            rgba(8, 12, 32, 0.98)
        );
    z-index: -1;
}

.feature-img {
    width: 34px;
    height: 34px;
    object-fit: contain;
    flex-shrink: 0;
    filter:
        brightness(0)
        saturate(100%)
        invert(43%)
        sepia(98%)
        saturate(2534%)
        hue-rotate(223deg)
        brightness(105%)
        contrast(101%);
}

/* Buttons */

.hero-buttons {
    display: flex;
    gap: 18px;
    margin-top: 38px;
}

.primary-btn {
    position: relative;
    overflow: hidden;
    width: 330px;
    height: 70px;
    padding: 0 24px;
    border: none;
    border-radius: 16px;
    background: linear-gradient(
        120deg,
        #06122f,
        #0b2f78,
        #1f6fff,
        #5b6dff,
        #10245c,
        #06122f
    );
    background-size: 320% 320%;
    color: white;
    font-size: 18px;
    font-weight: 800;
    cursor: pointer;
    box-shadow:
        0 0 34px rgba(42,127,255,0.46),
        0 0 80px rgba(18,46,120,0.52),
        inset 0 0 22px rgba(255,255,255,0.08);
    animation: primaryButtonGradient 3.2s ease-in-out infinite;
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
        filter 0.18s ease;
}

.primary-btn:active {
    transform: translateY(2px) scale(0.97) !important;
    filter: brightness(0.88) !important;
    box-shadow:
        0 0 18px rgba(42,127,255,0.34),
        0 0 42px rgba(18,46,120,0.34),
        inset 0 4px 18px rgba(0,0,0,0.38),
        inset 0 0 18px rgba(255,255,255,0.05);
}

.primary-btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: -90%;
    width: 70%;
    height: 100%;
    background: linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,0.34),
        rgba(80,140,255,0.45),
        transparent
    );
    transform: skewX(-20deg);
    animation: primaryButtonShine 2.4s ease-in-out infinite;
    pointer-events: none;
}

.primary-btn:hover {
    transform: translateY(-4px);
    box-shadow:
        0 0 46px rgba(42,127,255,0.72),
        0 0 100px rgba(12,42,120,0.62),
        0 0 140px rgba(60,110,255,0.28),
        inset 0 0 26px rgba(255,255,255,0.10);
}

.secondary-btn {
    width: 190px;
    height: 70px;
    padding: 0 24px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.44);
    background: transparent;
    color: white;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
}

/* Animations */

@keyframes desktopGuaranteeGradient {
    0%, 100% {
        background-position: 0% 50%;
        opacity: 0.9;
    }

    50% {
        background-position: 100% 50%;
        opacity: 1;
    }
}

@keyframes heroScanner {
    0% {
        transform: translateX(calc(-50% + var(--scanner-from, 0px)));
    }

    50% {
        transform: translateX(calc(-50% + var(--scanner-to, 500px)));
    }

    100% {
        transform: translateX(calc(-50% + var(--scanner-from, 0px)));
    }
}

@keyframes primaryButtonGradient {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

@keyframes primaryButtonShine {
    0% {
        left: -90%;
    }

    45% {
        left: 130%;
    }

    100% {
        left: 130%;
    }
}

/* Laptop */

@media (max-width: 1500px) {
    .hero {
        padding: 28px 44px;
    }

    .hero-rocket-wrap {
        right: 10px;
        top: 53%;
        width: 48vw;
        max-width: 660px;
    }

    .hero-left {
        width: 52%;
    }

    .hero-left h1 {
        font-size: 54px;
        line-height: 1.12;
        letter-spacing: -2px;
        max-width: 760px;
    }

    .features {
        gap: 14px;
        margin-top: 28px;
        max-width: 760px;
    }

    .feature-card {
        width: 210px;
        height: 80px;
        padding: 0 24px;
        gap: 12px;
        border-radius: 16px;
        transition:
            transform 0.35s ease,
            border-color 0.35s ease,
            box-shadow 0.35s ease,
            background 0.35s ease;
    }

    .feature-icon {
        font-size: 30px;
    }

    .feature-text {
        font-size: 16px;
        line-height: 1.18;
    }

    .hero-buttons {
        gap: 18px;
        margin-top: 36px;
    }

    .primary-btn {
        width: 310px;
        height: 65px;
    }

    .secondary-btn {
        width: 185px;
        height: 65px;
    }

    .nav {
        gap: 34px;
    }

    .nav a {
        font-size: 20px;
    }

    .contact-btn {
        height: 52px;
        padding: 0 28px;
        font-size: 15px;
    }
}

/* Large Screens */

@media (min-width: 1800px) {
    .hero-rocket-wrap {
        right: 160px;
        width: 70vw;
        max-width: 820px;
    }
}

/* Silver android hero — static Figma-led composition */

.hero {
    height: 100svh;
    min-height: 720px;
    overflow: hidden;
    background: transparent;
    isolation: isolate;
}

.hero::after {
    right: -15vw;
    top: 48%;
    width: 70vw;
    height: 92vh;
    background: radial-gradient(
        ellipse at center,
        rgba(42, 127, 255, 0.16) 0%,
        rgba(72, 82, 255, 0.08) 42%,
        transparent 72%
    );
    filter: blur(92px);
    z-index: 0;
}

.hero-atmosphere,
.hero-glow {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.hero-atmosphere {
    z-index: 1;
    overflow: hidden;
}

.hero-atmosphere::before {
    content: "";
    position: absolute;
    left: 28%;
    right: -18%;
    bottom: -38%;
    height: 108%;
    border-radius: 50%;
    background:
        radial-gradient(
            ellipse at 56% 34%,
            rgba(201, 224, 255, 0.16) 0%,
            rgba(87, 118, 255, 0.12) 28%,
            rgba(83, 65, 219, 0.07) 46%,
            transparent 72%
        );
    filter: blur(42px);
    opacity: 0.92;
}

.hero-atmosphere::after {
    content: "";
    position: absolute;
    left: 30%;
    right: -16%;
    bottom: -52%;
    height: 118%;
    background: linear-gradient(
        180deg,
        transparent 0%,
        rgba(11, 22, 62, 0.08) 32%,
        rgba(7, 15, 44, 0.30) 62%,
        rgba(3, 8, 27, 0.58) 100%
    );
    filter: blur(48px);
    opacity: 0.72;
}

.hero-glow {
    inset: 8% -8% -8% 35%;
    background: radial-gradient(
        ellipse at 54% 52%,
        rgba(22, 105, 255, 0.23) 0%,
        rgba(49, 65, 214, 0.11) 36%,
        rgba(84, 47, 190, 0.05) 56%,
        transparent 76%
    );
    filter: blur(44px);
    opacity: 0.92;
}

.hero-content {
    position: relative;
    z-index: 5;
    height: calc(100svh - 88px);
    min-height: 620px;
    margin-top: 10px;
    display: flex;
    align-items: center;
}

.hero-left {
    width: min(48%, 760px);
    margin-top: -2vh;
    transform-origin: left center;
}

.hero-left h1 {
    max-width: 780px;
}

.hero-visual {
    position: absolute;
    z-index: 2;
    top: 0;
    right: 0;
    width: 64%;
    height: 100%;
    pointer-events: none;
}

.hero-visual::before {
    content: "";
    position: absolute;
    z-index: 0;
    inset: 8% 0 0 4%;
    background: radial-gradient(
        ellipse at 46% 50%,
        rgba(28, 112, 255, 0.18),
        rgba(27, 51, 147, 0.08) 44%,
        transparent 70%
    );
    filter: blur(34px);
    opacity: 0.9;
}

/* Foreground light is deliberately above the android. */
.hero-visual::after {
    content: "";
    position: absolute;
    z-index: 5;
    inset: 4% -4% -2% 30%;
    pointer-events: none;
    background:
        linear-gradient(
            112deg,
            transparent 24%,
            rgba(188, 220, 255, 0.055) 43%,
            rgba(116, 149, 255, 0.045) 50%,
            transparent 64%
        );
    mix-blend-mode: screen;
    opacity: 0.9;
}

.hero-android-layer,
.hero-android-parallax {
    position: absolute;
    inset: 0;
}

.hero-android-layer {
    z-index: 3;
}

.hero-android-parallax {
    transform-style: preserve-3d;
    transition: transform 220ms cubic-bezier(0.23, 1, 0.32, 1);
}

.hero-android {
    position: absolute;
    right: 6.5vw;
    top: -6.5svh;
    height: 113svh;
    min-height: 820px;
    width: auto;
    max-width: none;
    display: block;
    object-fit: contain;
    opacity: 0.99;
    -webkit-mask-image: radial-gradient(
        ellipse 80% 95% at 59% 48%,
        #000 0%,
        #000 67%,
        rgba(0, 0, 0, 0.88) 79%,
        transparent 100%
    );
    mask-image: radial-gradient(
        ellipse 80% 95% at 59% 48%,
        #000 0%,
        #000 67%,
        rgba(0, 0, 0, 0.88) 79%,
        transparent 100%
    );
}

/* Cards live behind the android silhouette instead of being pasted on top. */
.hero-benefits {
    position: absolute;
    z-index: auto;
    top: 16%;
    right: -0.8vw;
    width: 360px;
    height: 620px;
    display: block;
}

.hero-benefit {
    position: absolute;
    z-index: 2;
    isolation: isolate;
    overflow: hidden;
    width: 206px;
    min-height: 70px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border: 1px solid rgba(244, 251, 255, 0.58);
    border-radius: 20px;
    background:
        radial-gradient(
            ellipse at 12% -18%,
            rgba(255, 255, 255, 0.38) 0%,
            rgba(224, 245, 255, 0.15) 28%,
            transparent 58%
        ),
        radial-gradient(
            ellipse at 106% 6%,
            rgba(81, 198, 255, 0.20) 0%,
            rgba(86, 158, 255, 0.07) 40%,
            transparent 64%
        ),
        radial-gradient(
            ellipse at 76% 118%,
            rgba(136, 98, 255, 0.22) 0%,
            rgba(116, 84, 240, 0.07) 42%,
            transparent 66%
        ),
        linear-gradient(
            135deg,
            rgba(242, 249, 255, 0.18) 0%,
            rgba(170, 211, 255, 0.095) 34%,
            rgba(119, 116, 246, 0.105) 68%,
            rgba(220, 230, 255, 0.055) 100%
        );
    box-shadow:
        0 24px 64px rgba(0, 0, 0, 0.18),
        0 11px 34px rgba(52, 104, 255, 0.15),
        0 0 54px rgba(119, 94, 255, 0.12),
        inset 0 1.5px 0 rgba(255, 255, 255, 0.96),
        inset 1px 0 0 rgba(231, 248, 255, 0.50),
        inset -1px 0 0 rgba(168, 153, 255, 0.34),
        inset 0 -18px 44px rgba(83, 100, 255, 0.055);
    -webkit-backdrop-filter: blur(26px) saturate(205%) brightness(1.16);
    backdrop-filter: blur(26px) saturate(205%) brightness(1.16);
    outline: 1px solid rgba(255, 255, 255, 0.24);
    outline-offset: -2px;
    transform: translate3d(
        calc(var(--hero-glass-parallax-x, 0px) + var(--hero-card-scene-x, 0px)),
        calc(var(--hero-glass-parallax-y, 0px) + var(--hero-card-scene-y, 0px)),
        0
    );
    transition: transform 240ms cubic-bezier(0.23, 1, 0.32, 1);
}

/* Local contrast only under copy; the rest of the pane stays luminous. */
.hero-benefit::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: 8px;
    right: 7px;
    bottom: 8px;
    left: 47px;
    border-radius: 13px;
    pointer-events: none;
    background:
        radial-gradient(
            ellipse at 28% 50%,
            rgba(1, 5, 18, 0.52),
            rgba(3, 9, 28, 0.27) 52%,
            transparent 88%
        );
    opacity: 0.88;
}

/* Specular rim + blue/violet refraction + a faint inner lens reflection. */
.hero-benefit::after {
    content: "";
    position: absolute;
    z-index: 0;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background:
        linear-gradient(
            90deg,
            transparent 4%,
            rgba(255, 255, 255, 0.98) 22%,
            rgba(218, 246, 255, 0.76) 50%,
            rgba(181, 164, 255, 0.62) 79%,
            transparent 96%
        ) top 0 left 50% / 90% 2px no-repeat,
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.66),
            rgba(114, 204, 255, 0.18) 55%,
            transparent 92%
        ) top 10px left 0 / 1px 72% no-repeat,
        linear-gradient(
            180deg,
            rgba(176, 159, 255, 0.12),
            transparent 60%
        ) top 12px right 0 / 1px 66% no-repeat,
        radial-gradient(
            ellipse at 16% -8%,
            rgba(255, 255, 255, 0.34),
            transparent 50%
        ),
        radial-gradient(
            ellipse at 70% 108%,
            rgba(105, 132, 255, 0.12),
            transparent 54%
        );
    opacity: 0.94;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.09),
        inset 0 0 26px rgba(161, 207, 255, 0.045),
        0 0 18px rgba(121, 191, 255, 0.11);
}

.hero-benefit:nth-child(1) {
    z-index: 2;
    top: 0;
    right: -18px;
}

.hero-benefit:nth-child(2) {
    z-index: 4;
    top: 43%;
    right: 18px;
}

.hero-benefit:nth-child(3) {
    z-index: 4;
    right: -4px;
    bottom: 0;
}

.hero-benefit img {
    position: relative;
    z-index: 2;
    width: 26px;
    height: 26px;
    flex: 0 0 auto;
    object-fit: contain;
    filter:
        brightness(0)
        saturate(100%)
        invert(43%)
        sepia(98%)
        saturate(2534%)
        hue-rotate(223deg)
        brightness(138%)
        contrast(122%)
        drop-shadow(0 0 12px rgba(163, 214, 255, 0.82));
}

.hero-benefit span {
    position: relative;
    z-index: 2;
    font-size: 13px;
    line-height: 1.2;
    font-weight: 750;
    color: #ffffff;
    text-shadow:
        0 1px 8px rgba(0, 0, 0, 0.62),
        0 0 15px rgba(176, 220, 255, 0.30);
}

/* Secondary control only; animated primary CTA is intentionally untouched. */
.secondary-btn {
    border-color: rgba(220, 235, 255, 0.36);
    background:
        radial-gradient(circle at 20% -35%, rgba(255,255,255,0.20), transparent 48%),
        linear-gradient(135deg, rgba(245,250,255,0.085), rgba(92,116,255,0.08) 56%, rgba(95,66,206,0.06));
    box-shadow:
        0 12px 28px rgba(0,0,0,0.16),
        inset 0 1px 0 rgba(255,255,255,0.46),
        inset 0 -1px 0 rgba(129,150,255,0.12);
    -webkit-backdrop-filter: blur(18px) saturate(165%);
    backdrop-filter: blur(18px) saturate(165%);
}

@media (min-width: 1501px) {
    .hero-left h1 {
        font-size: clamp(56px, 3.35vw, 66px);
    }

    .hero-subtitle {
        font-size: clamp(17px, 1.12vw, 21px);
    }

    .hero-benefits {
        right: 0.8vw;
        width: 390px;
    }

    .hero-benefit {
        width: 216px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .logo-image,
    .hero-subtitle::after,
    .hero-guarantee-gradient,
    .sopax-gradient-text,
    .primary-btn,
    .primary-btn::before {
        animation: none !important;
    }

    .hero-android-parallax,
    .hero-benefit {
        transition: none;
        transform: none;
    }
}

@media (prefers-reduced-transparency: reduce) {
    .hero-benefit {
        background: rgba(15, 24, 52, 0.90);
        border-color: rgba(173, 201, 255, 0.42);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    .hero-benefit::after {
        opacity: 0.58;
    }
}

/* mobile.css */
/* Mobile Base */

@media screen and (max-width: 430px) {
    *,
    *::before,
    *::after {
        box-sizing: border-box;
    }

    html,
    body {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    body {
        background: #030717 !important;
    }

    .hero {
        --hero-text-top: 18px;
        --hero-title-width: 404px;
        --hero-title-size: 24px;
        --hero-subtitle-width: 342px;
        --hero-subtitle-size: 11.4px;
        --hero-subtitle-top: 20px;
        --rocket-top: 258px;
        --rocket-height: 326px;
        --rocket-width: min(92vw, 382px);
        --guarantee-top: 492px;
        --guarantee-width: 330px;
        --guarantee-size: 11.8px;
        --features-top: 366px;
        --features-width: 340px;
        --feature-height: 56px;
        --feature-gap: 9px;
        --feature-radius: 14px;
        --feature-icon: 18px;
        --feature-font: 8.4px;
        --hero-buttons-width: 340px;
        --hero-button-height: 46px;
        position: relative !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 715px !important;
        padding: 18px 18px calc(34px + env(safe-area-inset-bottom)) !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
        background:
            radial-gradient(circle at 50% 38%, rgba(28, 78, 165, 0.16), transparent 30%),
            radial-gradient(circle at 50% 56%, rgba(9, 14, 38, 0.90), transparent 43%),
            radial-gradient(circle at 50% 68%, rgba(4, 7, 22, 0.98), transparent 58%),
            linear-gradient(
                180deg,
                #030717 0%,
                #040816 26%,
                #020512 58%,
                #030717 100%
            ) !important;
    }

    .hero::before {
        content: "" !important;
        position: absolute !important;
        left: 50% !important;
        top: 210px !important;
        z-index: 1 !important;
        width: 132vw !important;
        height: 420px !important;
        transform: translateX(-50%) !important;
        background:
            radial-gradient(circle at 50% 44%, rgba(3, 7, 23, 0.18), transparent 35%),
            radial-gradient(circle at 50% 55%, rgba(2, 5, 17, 0.78), transparent 60%),
            linear-gradient(
                180deg,
                rgba(3, 7, 23, 0) 0%,
                rgba(3, 7, 23, 0.48) 34%,
                rgba(3, 7, 23, 0.92) 78%,
                rgba(3, 7, 23, 0) 100%
            ) !important;
        pointer-events: none !important;
    }

    .hero::after {
        content: "" !important;
        position: absolute !important;
        left: 50% !important;
        bottom: 88px !important;
        z-index: 1 !important;
        width: 120vw !important;
        height: 230px !important;
        transform: translateX(-50%) !important;
        background:
            radial-gradient(circle at 50% 50%, rgba(42,127,255,0.06), transparent 34%),
            radial-gradient(circle at 50% 60%, rgba(116,77,255,0.06), transparent 48%) !important;
        filter: blur(8px) !important;
        opacity: 0.68 !important;
        pointer-events: none !important;
    }

    .header {
        position: relative !important;
        z-index: 20 !important;
        width: 100% !important;
        min-width: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 10px !important;
        flex: 0 0 auto !important;
    }

    .logo {
        min-width: 0 !important;
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        font-size: 0 !important;
        line-height: 1 !important;
        letter-spacing: 0.35px !important;
        white-space: nowrap !important;
    }

    .logo::after {
        content: "SOPAX DA" !important;
        display: inline-block !important;
        font-size: 14px !important;
        line-height: 1.05 !important;
        font-weight: 900 !important;
        letter-spacing: 0.55px !important;
        color: currentColor !important;
        white-space: nowrap !important;
    }

    .logo-image {
        width: 44px !important;
        height: 44px !important;
        flex-shrink: 0 !important;
    }

    .nav {
        display: none !important;
    }

    .contact-btn {
        width: 38px !important;
        min-width: 38px !important;
        height: 38px !important;
        padding: 0 !important;
        border-radius: 999px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0 !important;
        font-size: 0 !important;
        line-height: 0 !important;
        color: transparent !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }

    .phone-icon {
        width: 16px !important;
        height: 16px !important;
        flex-shrink: 0 !important;
        margin: 0 !important;
    }

    .hero-content {
        position: relative !important;
        z-index: 5 !important;
        width: 100% !important;
        min-width: 0 !important;
        display: flex !important;
        align-items: flex-start !important;
        justify-content: center !important;
        padding-top: var(--hero-text-top) !important;
        margin: 0 !important;
    }

    .hero-left {
        position: relative !important;
        width: 100% !important;
        max-width: 430px !important;
        min-width: 0 !important;
        margin: 0 auto !important;
        padding: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
    }

    .hero-left h1 {
        position: relative !important;
        z-index: 8 !important;
        width: 100% !important;
        max-width: var(--hero-title-width) !important;
        min-height: 74px !important;
        margin: 0 auto !important;
        padding: 0 !important;
        font-size: 0 !important;
        line-height: 0 !important;
        letter-spacing: 0 !important;
        font-weight: 900 !important;
        text-align: center !important;
        color: transparent !important;
    }

    .hero-left h1 br {
        display: none !important;
    }

    .hero-left h1 span,
    .hero-nowrap {
        display: inline !important;
        white-space: normal !important;
    }

    .hero-left h1::before {
        content: "Создаем цифровые решения\Aдля бизнеса: сайты, платформы\Aприложения и Telegram-боты" !important;
        display: block !important;
        width: 100% !important;
        max-width: 392px !important;
        margin: 0 auto !important;
        white-space: pre !important;
        text-wrap: initial !important;
        overflow-wrap: normal !important;
        word-break: normal !important;
        font-size: 22.1px !important;
        line-height: 1.08 !important;
        letter-spacing: -0.62px !important;
        font-weight: 900 !important;
        color: #ffffff !important;
        text-align: center !important;
    }

    .hero-left h1::after,
    .hero-left h1 span::before,
    .hero-left h1 span::after,
    .hero-nowrap::before,
    .hero-nowrap::after {
        content: none !important;
        display: none !important;
    }

    .hero-subtitle {
        position: relative !important;
        z-index: 8 !important;
        width: 100% !important;
        max-width: var(--hero-subtitle-width) !important;
        min-height: 42px !important;
        margin: var(--hero-subtitle-top) auto 0 !important;
        padding: 0 !important;
        font-size: 0 !important;
        line-height: 0 !important;
        text-align: center !important;
        color: transparent !important;
        overflow: visible !important;
    }

    .hero-subtitle br {
        display: none !important;
    }

    .hero-subtitle::before {
        content: "Подбираем решение под вашу задачу\Aа не продаем лишнюю разработку" !important;
        display: block !important;
        white-space: pre-line !important;
        font-size: var(--hero-subtitle-size) !important;
        line-height: 1.28 !important;
        font-weight: 500 !important;
        letter-spacing: -0.05px !important;
        color: rgba(255,255,255,0.72) !important;
        text-align: center !important;
    }

    .hero-subtitle::after {
        content: "" !important;
        position: absolute !important;
        top: -12px !important;
        left: 50% !important;
        width: 92px !important;
        height: 2px !important;
        border-radius: 999px !important;
        background: linear-gradient(
            90deg,
            transparent,
            #2a7fff,
            #744dff,
            transparent
        ) !important;
        box-shadow:
            0 0 14px rgba(65,119,255,0.52),
            0 0 24px rgba(116,77,255,0.26) !important;
        animation: heroScannerPhone 3s ease-in-out infinite !important;
        pointer-events: none !important;
    }

    .hero-left::after {
        content: "ГАРАНТИЯ РЕЗУЛЬТАТА ИЛИ ВЕРНЁМ ОПЛАТУ" !important;
        position: absolute !important;
        left: 50% !important;
        top: var(--guarantee-top) !important;
        z-index: 9 !important;
        width: 100% !important;
        max-width: var(--guarantee-width) !important;
        transform: translateX(-50%) !important;
        display: block !important;
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
        background:
            linear-gradient(
                100deg,
                rgba(255,255,255,0.92) 0%,
                rgba(120,180,255,0.98) 32%,
                rgba(255,255,255,1) 52%,
                rgba(42,127,255,0.98) 74%,
                rgba(255,255,255,0.9) 100%
            ) !important;
        background-size: 210% 100% !important;
        -webkit-background-clip: text !important;
        background-clip: text !important;
        box-shadow: none !important;
        font-size: var(--guarantee-size) !important;
        line-height: 1.25 !important;
        font-weight: 900 !important;
        letter-spacing: 0.42px !important;
        text-transform: uppercase !important;
        color: transparent !important;
        text-align: center !important;
        text-shadow:
            0 0 16px rgba(42,127,255,0.26),
            0 0 34px rgba(255,255,255,0.08) !important;
        animation: mobileGuaranteeGradient 4.8s ease-in-out infinite !important;
        pointer-events: none !important;
    }

    .hero > .hero-rocket-wrap {
        position: absolute !important;
        z-index: 2 !important;
        left: 50% !important;
        top: var(--rocket-top) !important;
        width: 100% !important;
        max-width: 100% !important;
        height: var(--rocket-height) !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        transform: translateX(-50%) !important;
        pointer-events: none !important;
        overflow: visible !important;
    }

    .hero > .hero-rocket-wrap .hero-rocket {
        position: relative !important;
        width: var(--rocket-width) !important;
        max-width: 100% !important;
        max-height: var(--rocket-height) !important;
        height: auto !important;
        object-fit: contain !important;
        transform: none !important;
        filter:
            drop-shadow(0 0 18px rgba(42,127,255,0.18))
            drop-shadow(0 22px 42px rgba(0,0,0,0.42)) !important;
        opacity: 0.96 !important;
    }

    .features {
        position: relative !important;
        z-index: 10 !important;
        width: 100% !important;
        max-width: var(--features-width) !important;
        min-width: 0 !important;
        margin: var(--features-top) auto 0 !important;
        padding: 0 !important;
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: var(--feature-gap) !important;
        align-items: stretch !important;
        overflow: visible !important;
    }

    .feature-card {
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
        height: var(--feature-height) !important;
        min-height: var(--feature-height) !important;
        max-height: var(--feature-height) !important;
        padding: 4px !important;
        border-radius: var(--feature-radius) !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 3px !important;
        transform: none !important;
        overflow: hidden !important;
    }

    .feature-card::after {
        border-radius: calc(var(--feature-radius) - 1px) !important;
    }

    .feature-card:hover {
        transform: none !important;
    }

    .feature-img {
        width: var(--feature-icon) !important;
        height: var(--feature-icon) !important;
        flex-shrink: 0 !important;
    }

    .feature-text {
        width: 100% !important;
        font-size: var(--feature-font) !important;
        line-height: 1.04 !important;
        font-weight: 600 !important;
        text-align: center !important;
    }

    .hero-buttons {
        position: relative !important;
        z-index: 10 !important;
        width: 100% !important;
        max-width: var(--hero-buttons-width) !important;
        min-width: 0 !important;
        margin: 12px auto 0 !important;
        padding: 0 !important;
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }

    .primary-btn,
    .secondary-btn {
        width: 100% !important;
        min-width: 0 !important;
        height: var(--hero-button-height) !important;
        padding: 0 10px !important;
        border-radius: 15px !important;
        font-size: 12.5px !important;
        line-height: 1.1 !important;
        white-space: nowrap !important;
    }

    .hero-button-note {
        position: relative !important;
        z-index: 10 !important;
        margin: 8px auto 0 !important;
        font-size: 11px !important;
        line-height: 1.25 !important;
        color: rgba(255,255,255,0.50) !important;
    }
}

/* Mobile Deck */

@media screen and (max-width: 430px) {
    .mobile-card-deck {
        --deck-width: 82vw;
        --deck-max-width: 340px;
        --deck-side-shift: 24px;
        --deck-back-shift: 42px;
        --deck-next-y: 14px;
        --deck-after-y: 28px;
        --deck-next-scale: 0.94;
        --deck-after-scale: 0.88;
        --deck-next-opacity: 0.72;
        --deck-after-opacity: 0.42;
        --deck-speed: 420ms;
        position: relative !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding: 0 !important;
        display: block !important;
        overflow: visible !important;
        touch-action: pan-y !important;
        user-select: none !important;
        -webkit-user-select: none !important;
        -webkit-tap-highlight-color: transparent !important;
    }

    .mobile-card-deck .deck-card {
        position: absolute !important;
        left: 50% !important;
        top: 0 !important;
        width: var(--deck-width) !important;
        max-width: var(--deck-max-width) !important;
        margin: 0 !important;
        transition:
            transform var(--deck-speed) cubic-bezier(0.22, 1, 0.36, 1),
            opacity var(--deck-speed) ease,
            filter var(--deck-speed) ease,
            box-shadow var(--deck-speed) ease !important;
        will-change: transform, opacity !important;
        pointer-events: none !important;
    }

    .mobile-card-deck .deck-card.is-active {
        z-index: 5 !important;
        opacity: 1 !important;
        filter: none !important;
        transform:
            translateX(-50%)
            translateY(0)
            scale(1) !important;
        pointer-events: auto !important;
    }

    .mobile-card-deck .deck-card.is-next {
        z-index: 4 !important;
        opacity: var(--deck-next-opacity) !important;
        filter: saturate(0.92) brightness(0.88) !important;
        transform:
            translateX(calc(-50% + var(--deck-side-shift)))
            translateY(var(--deck-next-y))
            scale(var(--deck-next-scale)) !important;
    }

    .mobile-card-deck .deck-card.is-after {
        z-index: 3 !important;
        opacity: var(--deck-after-opacity) !important;
        filter: saturate(0.82) brightness(0.76) !important;
        transform:
            translateX(calc(-50% + var(--deck-back-shift)))
            translateY(var(--deck-after-y))
            scale(var(--deck-after-scale)) !important;
    }

    .mobile-card-deck .deck-card.is-prev,
    .mobile-card-deck .deck-card.is-hidden {
        z-index: 1 !important;
        opacity: 0 !important;
        visibility: hidden !important;
        filter: blur(1px) brightness(0.5) !important;
        transform:
            translateX(calc(-50% + var(--deck-back-shift)))
            translateY(var(--deck-after-y))
            scale(0.80) !important;
    }

    .mobile-card-deck .deck-card.is-leaving {
        z-index: 6 !important;
        opacity: 0 !important;
        transform:
            translateX(calc(-50% + 64px))
            translateY(34px)
            scale(0.84)
            rotate(1.5deg) !important;
    }

    .mobile-card-deck .deck-card::before,
    .mobile-card-deck .deck-card::after {
        pointer-events: none !important;
    }

    .service-cards.mobile-card-deck {
        --deck-width: 78vw;
        --deck-max-width: 318px;
        margin-top: 28px !important;
        margin-bottom: 66px !important;
    }

    .cases-grid.mobile-card-deck {
        --deck-width: 78vw;
        --deck-max-width: 318px;
        margin-top: 0 !important;
        margin-bottom: 66px !important;
    }

    .values-grid.mobile-card-deck {
        --value-card-size: 178px;
        --deck-width: var(--value-card-size);
        --deck-max-width: var(--value-card-size);
        margin-top: 0 !important;
        margin-bottom: 58px !important;
    }
}

/* Swipe Hints */

@media screen and (max-width: 430px) {
    .services,
    .cases,
    .about-values-wrap {
        overflow: visible !important;
    }

    .service-cards.mobile-card-deck,
    .cases-grid.mobile-card-deck,
    .values-grid.mobile-card-deck {
        position: relative !important;
        overflow: visible !important;
    }

    .service-cards.mobile-card-deck::before,
    .cases-grid.mobile-card-deck::before,
    .values-grid.mobile-card-deck::before {
        content: "⭠   свайп   ⭢" !important;
        position: absolute !important;
        left: 50% !important;
        top: calc(100% + -25px) !important;
        z-index: 40 !important;
        width: 122px !important;
        height: 20px !important;
        transform: translateX(-50%) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border: none !important;
        background: transparent !important;
        box-shadow: none !important;
        color: rgba(255,255,255,0.72) !important;
        font-size: 9.5px !important;
        line-height: 1 !important;
        font-weight: 800 !important;
        letter-spacing: 0.85px !important;
        text-transform: uppercase !important;
        text-shadow:
            0 0 12px rgba(42,127,255,0.62),
            0 0 24px rgba(116,77,255,0.28) !important;
        animation: mobileSwipeHintText 2.7s ease-in-out infinite !important;
        pointer-events: none !important;
    }

    .service-cards.mobile-card-deck::after,
    .cases-grid.mobile-card-deck::after,
    .values-grid.mobile-card-deck::after {
        content: "" !important;
        position: absolute !important;
        left: 50% !important;
        top: calc(100% + -8px) !important;
        z-index: 39 !important;
        width: 82px !important;
        height: 4px !important;
        transform: translateX(-50%) !important;
        border-radius: 999px !important;
        background:
            linear-gradient(
                90deg,
                transparent 0%,
                rgba(42,127,255,0.24) 18%,
                rgba(255,255,255,0.82) 50%,
                rgba(116,77,255,0.28) 82%,
                transparent 100%
            ) !important;
        box-shadow:
            0 0 14px rgba(42,127,255,0.42),
            0 0 26px rgba(116,77,255,0.22) !important;
        animation: mobileSwipeHintLine 2.7s ease-in-out infinite !important;
        pointer-events: none !important;
    }
}

/* Services */

@media screen and (max-width: 430px) {
    .services {
        overflow: visible !important;
    }

    .service-cards {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        gap: 0 !important;
    }

    .service-card {
        width: 78vw !important;
        max-width: 318px !important;
        padding: 16px 16px 18px !important;
        border-radius: 18px !important;
        transform: none !important;
        text-align: center !important;
        box-shadow:
            0 18px 34px rgba(0,0,0,0.28),
            0 0 28px rgba(42,127,255,0.08) !important;
    }

    .service-card:hover {
        transform: none !important;
    }

    .service-card img,
    .service-card .service-icon,
    .service-card .service-img,
    .service-card .service-card-icon,
    .service-card .icon,
    .service-card .card-icon {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
        text-align: center !important;
    }

    .service-card .service-icon img,
    .service-card .service-img img,
    .service-card .service-card-icon img,
    .service-card .icon img,
    .service-card .card-icon img {
        display: block !important;
        margin: auto !important;
        object-fit: contain !important;
        object-position: center !important;
        transform: none !important;
    }

    .service-card h3 {
        width: 100% !important;
        max-width: 250px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        font-size: 17px !important;
        line-height: 1.08 !important;
        text-align: center !important;
        text-wrap: balance !important;
    }

    .service-card p {
        font-size: 12px !important;
        line-height: 1.36 !important;
        text-align: inherit !important;
    }
}

/* Process */

@media screen and (max-width: 430px) {
    .process {
        position: relative !important;
        width: 100% !important;
        max-width: 100% !important;
        min-height: auto !important;
        height: auto !important;
        padding: 58px 18px 70px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        overflow: visible !important;
    }

    .process-label,
    .section-label.process-label,
    .solutions-label,
    .section-label.solutions-label,
    .audience-label,
    .section-label.audience-label,
    .cases-label,
    .section-label.cases-label,
    .about-label,
    .section-label.about-label,
    .contacts-label,
    .section-label.contacts-label {
        position: relative !important;
        inset: auto !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 8px !important;
        font-size: 11px !important;
        line-height: 1 !important;
        font-weight: 700 !important;
        letter-spacing: 0.5px !important;
        color: rgba(42,127,255,0.95) !important;
        text-align: left !important;
    }

    .process-label span,
    .section-label.process-label span,
    .solutions-label span,
    .section-label.solutions-label span,
    .audience-label span,
    .section-label.audience-label span,
    .cases-label span,
    .section-label.cases-label span,
    .about-label span,
    .section-label.about-label span,
    .contacts-label span,
    .section-label.contacts-label span {
        display: inline-block !important;
        width: 8px !important;
        height: 8px !important;
        border-radius: 50% !important;
        background: #2a7fff !important;
        box-shadow: 0 0 14px rgba(42,127,255,0.8) !important;
    }

    .process-label,
    .section-label.process-label {
        width: 100% !important;
        margin: 0 0 42px !important;
    }

    .process-top {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 24px !important;
        padding: 0 !important;
    }

    .process-title-wrap {
        width: 100% !important;
        max-width: 100% !important;
        text-align: center !important;
    }

    .process h2 {
        width: 100% !important;
        max-width: 350px !important;
        margin: 0 auto 14px !important;
        padding: 0 !important;
        font-size: 34px !important;
        line-height: 0.98 !important;
        letter-spacing: -1.35px !important;
        font-weight: 900 !important;
        text-align: center !important;
    }

    .process-top p {
        width: 100% !important;
        max-width: 285px !important;
        margin: 0 auto !important;
        padding: 0 !important;
        font-size: 13.2px !important;
        line-height: 1.36 !important;
        color: rgba(255,255,255,0.72) !important;
        text-align: center !important;
        text-wrap: balance !important;
    }

    .process-cards,
    .process-cards.mobile-card-deck {
        position: relative !important;
        width: 100% !important;
        max-width: 370px !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 30px auto 0 !important;
        padding: 0 !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 17px 12px !important;
        overflow: visible !important;
        touch-action: auto !important;
        user-select: auto !important;
        -webkit-user-select: auto !important;
    }

    .process-cards.mobile-card-deck .deck-card,
    .process-cards.mobile-card-deck .deck-card.is-active,
    .process-cards.mobile-card-deck .deck-card.is-next,
    .process-cards.mobile-card-deck .deck-card.is-after,
    .process-cards.mobile-card-deck .deck-card.is-prev,
    .process-cards.mobile-card-deck .deck-card.is-hidden,
    .process-cards.mobile-card-deck .deck-card.is-leaving,
    .process-card {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        z-index: 1 !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        height: 216px !important;
        min-height: 216px !important;
        max-height: 216px !important;
        margin: 0 !important;
        padding: 19px 10px 15px !important;
        opacity: 1 !important;
        visibility: visible !important;
        filter: none !important;
        transform: none !important;
        pointer-events: auto !important;
        transition: none !important;
        animation: none !important;
        overflow: visible !important;
    }

    .process-card {
        border-radius: 18px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        text-align: center !important;
        box-shadow:
            0 16px 28px rgba(0,0,0,0.25),
            0 0 24px rgba(42,127,255,0.085) !important;
    }

    .process-card:hover {
        transform: none !important;
    }

    .process-card::before {
        border-radius: 18px !important;
    }

    .process-card::after {
        border-radius: 17px !important;
    }

    .process-dot {
        position: absolute !important;
        left: 50% !important;
        top: -7px !important;
        z-index: 8 !important;
        width: 15px !important;
        height: 15px !important;
        transform: translateX(-50%) !important;
        border-radius: 999px !important;
        opacity: 1 !important;
        visibility: visible !important;
        overflow: visible !important;
        pointer-events: none !important;
    }

    .process-number {
        align-self: flex-start !important;
        font-size: 24px !important;
        line-height: 1 !important;
    }

    .process-icon {
        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
        min-height: 48px !important;
        margin: 13px 0 13px !important;
        font-size: 20px !important;
    }

    .process-icon img {
        width: 24px !important;
        height: 24px !important;
        object-fit: contain !important;
    }

    .process-card h3 {
        width: 100% !important;
        max-width: 150px !important;
        margin: 0 auto 7px !important;
        font-size: 13.4px !important;
        line-height: 1.08 !important;
        letter-spacing: -0.24px !important;
        text-wrap: balance !important;
    }

    .process-card p {
        width: 100% !important;
        max-width: 150px !important;
        margin: 0 auto !important;
        font-size: 9.7px !important;
        line-height: 1.28 !important;
        color: rgba(255,255,255,0.72) !important;
        text-wrap: balance !important;
    }

    .process-btn {
        width: 100% !important;
        max-width: 292px !important;
        height: 52px !important;
        margin: 30px auto 0 !important;
        border-radius: 15px !important;
        font-size: 14px !important;
        line-height: 1 !important;
    }

    .process-card:nth-child(1) .process-number,
    .process-card:nth-child(2) .process-number {
        color: #247cff !important;
    }

    .process-card:nth-child(1) .process-icon,
    .process-card:nth-child(2) .process-icon {
        border-color: rgba(65,115,255,0.45) !important;
        color: #2280ff !important;
    }

    .process-card:nth-child(3) .process-number,
    .process-card:nth-child(4) .process-number {
        color: #744dff !important;
    }

    .process-card:nth-child(3) .process-dot,
    .process-card:nth-child(4) .process-dot {
        background: #744dff !important;
        box-shadow:
            0 0 10px #744dff,
            0 0 25px #744dff,
            0 0 60px rgba(116,77,255,0.9) !important;
    }

    .process-card:nth-child(3) .process-icon,
    .process-card:nth-child(4) .process-icon {
        border-color: rgba(128, 86, 255, 0.55) !important;
        color: #8056ff !important;
        box-shadow:
            inset 0 0 24px rgba(128, 86, 255, 0.14),
            0 0 28px rgba(128, 86, 255, 0.18) !important;
    }

    .process-card:nth-child(3) .process-icon img {
        -webkit-filter:
            brightness(0)
            saturate(100%)
            invert(42%)
            sepia(87%)
            saturate(2798%)
            hue-rotate(238deg)
            brightness(101%)
            contrast(103%)
            drop-shadow(0 0 12px rgba(116,77,255,0.75)) !important;
        filter:
            brightness(0)
            saturate(100%)
            invert(42%)
            sepia(87%)
            saturate(2798%)
            hue-rotate(238deg)
            brightness(101%)
            contrast(103%)
            drop-shadow(0 0 12px rgba(116,77,255,0.75)) !important;
    }

    .process-card:nth-child(4) .process-icon {
        text-shadow: 0 0 12px rgba(116,77,255,0.75) !important;
    }

    .process-card:nth-child(3)::before,
    .process-card:nth-child(4)::before {
        background: conic-gradient(
            from var(--angle, 0deg),
            transparent 0%,
            transparent 64%,
            rgba(116,77,255,1) 78%,
            rgba(174,94,255,1) 88%,
            rgba(116,77,255,0.9) 94%,
            transparent 100%
        ) !important;
    }

    .process-card:nth-child(5) .process-number,
    .process-card:nth-child(6) .process-number {
        color: #ffb84d !important;
    }

    .process-card:nth-child(5) .process-dot,
    .process-card:nth-child(6) .process-dot {
        background: #ffb84d !important;
        box-shadow:
            0 0 10px #ffb84d,
            0 0 25px #ffb84d,
            0 0 60px rgba(255,184,77,0.9) !important;
    }

    .process-card:nth-child(5) .process-icon,
    .process-card:nth-child(6) .process-icon {
        border-color: rgba(255,184,77,0.48) !important;
        color: #ffb84d !important;
    }

    .process-card:nth-child(5) .process-icon img,
    .process-card:nth-child(6) .process-icon img {
        -webkit-filter:
            brightness(0)
            saturate(100%)
            invert(75%)
            sepia(76%)
            saturate(871%)
            hue-rotate(337deg)
            brightness(103%)
            contrast(101%)
            drop-shadow(0 0 12px rgba(255,184,77,0.75)) !important;
        filter:
            brightness(0)
            saturate(100%)
            invert(75%)
            sepia(76%)
            saturate(871%)
            hue-rotate(337deg)
            brightness(103%)
            contrast(101%)
            drop-shadow(0 0 12px rgba(255,184,77,0.75)) !important;
    }

    .process-card:nth-child(5)::before,
    .process-card:nth-child(6)::before {
        background: conic-gradient(
            from var(--angle, 0deg),
            transparent 0%,
            transparent 64%,
            rgba(255,184,77,1) 78%,
            rgba(255,220,120,1) 88%,
            rgba(255,184,77,0.9) 94%,
            transparent 100%
        ) !important;
    }
}

/* Solutions */

.solutions-swipe-hint {
    display: none;
}

@media screen and (max-width: 430px) {
    .solutions {
        position: relative !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: auto !important;
        padding: 58px 18px 88px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        overflow: visible !important;
    }

    .solutions-label,
    .section-label.solutions-label {
        width: 100% !important;
        margin: 0 0 32px !important;
    }

    .solutions-top {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 32px !important;
        padding: 0 !important;
        display: block !important;
        transform: none !important;
    }

    @media screen and (max-width: 430px) {
        .solutions-top h2 {
            max-width: 340px !important;
            font-size: 0 !important;
            line-height: 0 !important;
            color: transparent !important;
        }

        .solutions-top h2::before {
            content: "Найдем нужное решение\Aпод вашу задачу" !important;
            display: block !important;
            white-space: pre !important;
            font-size: 30px !important;
            line-height: 0.98 !important;
            letter-spacing: -1.35px !important;
            font-weight: 900 !important;
            color: #ffffff !important;
            text-align: left !important;
        }
    }

    .solutions-top h2 span {
        display: block !important;
    }

    .solutions-top p {
        width: 100% !important;
        max-width: 320px !important;
        margin: 16px 0 0 !important;
        padding: 0 !important;
        font-size: 13px !important;
        line-height: 1.38 !important;
        color: rgba(255,255,255,0.70) !important;
        text-align: left !important;
    }

    .solutions-table {
        position: relative !important;
        width: 100% !important;
        max-width: 342px !important;
        height: 232px !important;
        min-height: 232px !important;
        max-height: 232px !important;
        margin: 38px auto 0 !important;
        padding: 0 !important;
        display: block !important;
        border: none !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        outline: none !important;
        perspective: 1200px !important;
        transform-style: preserve-3d !important;
        overflow: visible !important;
        touch-action: pan-y !important;
        overscroll-behavior-x: contain !important;
        overscroll-behavior-y: auto !important;
        user-select: none !important;
        -webkit-user-select: none !important;
        -webkit-tap-highlight-color: transparent !important;
    }

    .solutions-table::before,
    .solutions-table::after {
        content: "" !important;
        position: absolute !important;
        left: 50% !important;
        border-radius: 22px !important;
        background:
            linear-gradient(
                180deg,
                rgba(18,26,62,0.66),
                rgba(6,10,30,0.90)
            ) !important;
        pointer-events: none !important;
    }

    .solutions-table::before {
        top: 18px !important;
        z-index: 1 !important;
        width: calc(100% - 18px) !important;
        height: 216px !important;
        transform: translateX(-50%) translateY(12px) scale(0.94) !important;
        border: 1px solid rgba(85,104,255,0.16) !important;
        opacity: 0.55 !important;
    }

    .solutions-table::after {
        top: 30px !important;
        z-index: 0 !important;
        width: calc(100% - 34px) !important;
        height: 216px !important;
        transform: translateX(-50%) translateY(20px) scale(0.88) !important;
        border: 1px solid rgba(85,104,255,0.10) !important;
        opacity: 0.32 !important;
    }

    .solutions-head,
    .solutions-head div,
    .solutions-head-item,
    .solutions-head-gif,
    .task-gif {
        display: none !important;
    }

    .solutions-row:not(.solutions-head) {
        position: absolute !important;
        left: 50% !important;
        top: 0 !important;
        z-index: 2 !important;
        width: 100% !important;
        max-width: 342px !important;
        height: 222px !important;
        min-height: 222px !important;
        max-height: 222px !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: stretch !important;
        gap: 0 !important;
        border: 1px solid rgba(85,104,255,0.34) !important;
        border-radius: 22px !important;
        background:
            radial-gradient(circle at 18% 0%, rgba(42,127,255,0.14), transparent 34%),
            linear-gradient(
                180deg,
                rgba(25,34,78,0.98),
                rgba(8,12,32,1)
            ) !important;
        box-shadow:
            0 18px 36px rgba(0,0,0,0.36),
            0 0 28px rgba(42,127,255,0.12),
            inset 0 1px 0 rgba(255,255,255,0.08) !important;
        overflow: hidden !important;
        opacity: 0 !important;
        visibility: hidden !important;
        filter: brightness(0.74) saturate(0.88) !important;
        pointer-events: none !important;
        transform:
            translateX(calc(-50% + 42px))
            translateY(28px)
            scale(0.88) !important;
        transform-origin: center center !important;
        transform-style: preserve-3d !important;
        backface-visibility: hidden !important;
        -webkit-backface-visibility: hidden !important;
        transition:
            transform 620ms cubic-bezier(0.22, 1, 0.36, 1),
            opacity 520ms ease,
            visibility 520ms ease,
            filter 620ms ease,
            box-shadow 620ms ease !important;
        animation: none !important;
        will-change: transform, opacity, filter !important;
    }

    .solutions-row:not(.solutions-head).is-active {
        z-index: 16 !important;
        opacity: 1 !important;
        visibility: visible !important;
        filter: brightness(1) saturate(1) !important;
        transform:
            translateX(-50%)
            translateY(0)
            scale(1) !important;
        pointer-events: auto !important;
    }

    .solutions-row:not(.solutions-head).is-next-ready {
        z-index: 12 !important;
        opacity: 0.72 !important;
        visibility: visible !important;
        filter: brightness(0.86) saturate(0.92) !important;
        transform:
            translateX(calc(-50% + 24px))
            translateY(14px)
            scale(0.95) !important;
        pointer-events: none !important;
    }

    .solutions-row:not(.solutions-head).is-behind {
        z-index: 8 !important;
        opacity: 0.42 !important;
        visibility: visible !important;
        filter: brightness(0.68) saturate(0.82) blur(0.15px) !important;
        transform:
            translateX(calc(-50% + 42px))
            translateY(28px)
            scale(0.90) !important;
        pointer-events: none !important;
    }

    .solutions-row:not(.solutions-head).is-hidden {
        z-index: 1 !important;
        opacity: 0 !important;
        visibility: hidden !important;
        filter: brightness(0.58) saturate(0.76) blur(0.2px) !important;
        transform:
            translateX(calc(-50% + 42px))
            translateY(28px)
            scale(0.86) !important;
        pointer-events: none !important;
    }
    
    .solutions-row:not(.solutions-head).is-leaving-left {
        z-index: 18 !important;
        opacity: 0 !important;
        visibility: visible !important;
        filter: brightness(0.64) saturate(0.80) blur(0.15px) !important;
        transform:
            translateX(calc(-50% - 64px))
            translateY(18px)
            scale(0.86) !important;
        pointer-events: none !important;
    }

    .solutions-row:not(.solutions-head).is-leaving-right {
        z-index: 18 !important;
        opacity: 0 !important;
        visibility: visible !important;
        filter: brightness(0.64) saturate(0.80) blur(0.15px) !important;
        transform:
            translateX(calc(-50% + 64px))
            translateY(18px)
            scale(0.86) !important;
        pointer-events: none !important;
    }

    .solutions-row:not(.solutions-head).is-leaving {
        z-index: 7 !important;
        opacity: 0.36 !important;
        visibility: visible !important;
        filter: brightness(0.64) saturate(0.80) blur(0.15px) !important;
        transform:
            translateX(calc(-50% + 64px))
            translateY(18px)
            scale(0.86) !important;
        pointer-events: none !important;
    }

    .solutions-row:not(.solutions-head)::before {
        content: "" !important;
        position: absolute !important;
        left: 0 !important;
        right: 0 !important;
        top: 50% !important;
        z-index: 3 !important;
        height: 1px !important;
        background:
            linear-gradient(
                90deg,
                transparent,
                rgba(255,255,255,0.14),
                transparent
            ) !important;
        pointer-events: none !important;
    }

    .solutions-row:not(.solutions-head)::after {
        content: "" !important;
        position: absolute !important;
        inset: 0 !important;
        z-index: 4 !important;
        background:
            linear-gradient(
                180deg,
                rgba(255,255,255,0.10) 0%,
                transparent 30%,
                transparent 70%,
                rgba(0,0,0,0.18) 100%
            ) !important;
        opacity: 0.55 !important;
        pointer-events: none !important;
    }

    .solutions-row > div {
        position: relative !important;
        z-index: 5 !important;
        width: 100% !important;
        min-height: 0 !important;
        padding: 16px 16px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        border: none !important;
        border-bottom: 1px solid rgba(255,255,255,0.08) !important;
        background: transparent !important;
        text-align: left !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        filter: none !important;
        text-shadow: none !important;
        animation: none !important;
    }

    .solutions-row > div:first-child {
        flex: 0 0 46% !important;
        font-size: 14px !important;
        line-height: 1.18 !important;
        font-weight: 900 !important;
        letter-spacing: -0.25px !important;
        color: rgba(255,255,255,0.96) !important;
    }

    .solutions-row > div:last-child {
        flex: 1 1 auto !important;
        border-bottom: none !important;
        font-size: 11.4px !important;
        line-height: 1.35 !important;
        font-weight: 500 !important;
        color: rgba(255,255,255,0.76) !important;
    }

    .solutions-row > div:first-child::before,
    .solutions-row > div:last-child::before {
        display: block !important;
        flex: 0 0 68px !important;
        min-width: 68px !important;
        margin-right: 10px !important;
        font-size: 9px !important;
        line-height: 1.2 !important;
        font-weight: 900 !important;
        letter-spacing: 0.7px !important;
        text-transform: uppercase !important;
    }

    .solutions-row > div:first-child::before {
        content: "ЕСЛИ ВАША ЗАДАЧА:" !important;
        color: #2a7fff !important;
    }

    .solutions-row > div:last-child::before {
        content: "ТО ВАШЕ РЕШЕНИЕ:" !important;
        color: #744dff !important;
    }

    .solutions-row:not(.solutions-head):first-of-type {
        display: none !important;
    }

    .solutions-swipe-hint {
        position: relative !important;
        z-index: 20 !important;
        width: 100% !important;
        max-width: 342px !important;
        height: 52px !important;
        margin: 24px auto 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        pointer-events: none !important;
        user-select: none !important;
        -webkit-user-select: none !important;
    }

    .solutions-swipe-hint span {
        position: relative !important;
        width: 122px !important;
        height: 20px !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 0 !important;
        line-height: 0 !important;
        color: transparent !important;
    }

    .solutions-swipe-hint span::before {
        content: "⭠   свайп   ⭢" !important;
        position: absolute !important;
        left: 50% !important;
        top: 0 !important;
        width: 122px !important;
        height: 20px !important;
        transform: translateX(-50%) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        color: rgba(255,255,255,0.72) !important;
        font-size: 9.5px !important;
        line-height: 1 !important;
        font-weight: 800 !important;
        letter-spacing: 0.85px !important;
        text-transform: uppercase !important;
        text-shadow:
            0 0 12px rgba(42,127,255,0.62),
            0 0 24px rgba(116,77,255,0.28) !important;
        animation: mobileSwipeHintText 2.7s ease-in-out infinite !important;
    }

    .solutions-swipe-hint span::after {
        content: "" !important;
        position: absolute !important;
        left: 50% !important;
        top: 27px !important;
        width: 82px !important;
        height: 4px !important;
        transform: translateX(-50%) !important;
        border-radius: 999px !important;
        background:
            linear-gradient(
                90deg,
                transparent 0%,
                rgba(42,127,255,0.24) 18%,
                rgba(255,255,255,0.82) 50%,
                rgba(116,77,255,0.28) 82%,
                transparent 100%
            ) !important;
        box-shadow:
            0 0 14px rgba(42,127,255,0.42),
            0 0 26px rgba(116,77,255,0.22) !important;
        animation: mobileSwipeHintLine 2.7s ease-in-out infinite !important;
    }
}

/* Audience */

@media screen and (max-width: 430px) {
    .audience {
        position: relative !important;
        width: 100% !important;
        max-width: 100% !important;
        min-height: auto !important;
        height: auto !important;
        padding: 58px 18px 64px !important;
        color: white !important;
        background: transparent !important;
        overflow: visible !important;
    }

    .audience::after {
        content: none !important;
        display: none !important;
    }

    .audience-label,
    .section-label.audience-label {
        width: 100% !important;
        margin: 0 0 20px !important;
    }

    .audience-top {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 28px !important;
        padding: 0 !important;
        text-align: center !important;
    }

    .audience-top h2 {
        margin: 0 auto 14px !important;
        padding: 0 !important;
        text-transform: none !important;
    }

    .audience-title {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 2px !important;
        white-space: normal !important;
        text-align: center !important;
    }

    .audience-title-main,
    .audience-title-sub {
        display: block !important;
        font-size: 33px !important;
        line-height: 0.97 !important;
        letter-spacing: -1.3px !important;
        font-weight: 900 !important;
        text-align: center !important;
    }

    .audience-top p {
        width: 100% !important;
        max-width: 320px !important;
        margin: 0 auto !important;
        padding: 0 !important;
        font-size: 13px !important;
        line-height: 1.38 !important;
        color: rgba(255,255,255,0.70) !important;
        text-align: center !important;
        text-wrap: balance !important;
    }

    .audience-top p br {
        display: none !important;
    }

    .audience-grid,
    .audience-grid.mobile-card-deck {
        position: relative !important;
        width: 100% !important;
        max-width: 336px !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 0 auto !important;
        padding: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
        overflow: visible !important;
        scroll-snap-type: none !important;
        scroll-padding-left: 0 !important;
        touch-action: auto !important;
        user-select: auto !important;
        -webkit-user-select: auto !important;
    }

    .audience-grid.mobile-card-deck .deck-card,
    .audience-grid.mobile-card-deck .deck-card.is-active,
    .audience-grid.mobile-card-deck .deck-card.is-next,
    .audience-grid.mobile-card-deck .deck-card.is-after,
    .audience-grid.mobile-card-deck .deck-card.is-prev,
    .audience-grid.mobile-card-deck .deck-card.is-hidden,
    .audience-grid.mobile-card-deck .deck-card.is-leaving,
    .audience-item {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        z-index: 1 !important;
        flex: none !important;
        width: 100% !important;
        max-width: 336px !important;
        height: 146px !important;
        min-height: 146px !important;
        max-height: 146px !important;
        margin: 0 !important;
        opacity: 1 !important;
        visibility: visible !important;
        filter: none !important;
        transform: none !important;
        pointer-events: auto !important;
        transition: none !important;
        animation: none !important;
        scroll-snap-align: none !important;
    }

    .audience-item {
        display: grid !important;
        grid-template-columns: 130px 1fr !important;
        border-radius: 16px !important;
        overflow: hidden !important;
        box-shadow:
            0 18px 34px rgba(0,0,0,0.28),
            0 0 28px rgba(42,127,255,0.08) !important;
    }

    .audience-photo {
        width: 100% !important;
        height: 100% !important;
        overflow: hidden !important;
    }

    .audience-photo img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center !important;
    }

    .audience-info {
        position: relative !important;
        width: 100% !important;
        min-width: 0 !important;
        padding: 13px 44px 13px 13px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        text-align: left !important;
    }

    .audience-info::before {
        top: 12px !important;
        bottom: 12px !important;
    }

    .audience-info h3 {
        max-width: 160px !important;
        margin: 0 0 6px !important;
        font-size: 13.6px !important;
        line-height: 1.05 !important;
        letter-spacing: -0.3px !important;
        font-weight: 900 !important;
        text-transform: none !important;
        text-wrap: balance !important;
    }

    .audience-item:nth-child(6) .audience-info h3 {
        font-size: 14.6px !important;
        line-height: 1.04 !important;
    }

    .audience-info p {
        max-width: 160px !important;
        margin: 0 !important;
        font-size: 9.5px !important;
        line-height: 1.25 !important;
        color: rgba(255,255,255,0.70) !important;
        text-wrap: balance !important;
    }

    .audience-icon {
        position: absolute !important;
        right: 10px !important;
        bottom: 10px !important;
        width: 31px !important;
        height: 31px !important;
        object-fit: contain !important;
    }

    .audience-why {
        width: 100% !important;
        max-width: 92% !important;
        margin: 30px auto 0 !important;
        padding: 0 !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 20px 16px !important;
    }

    .audience-why-card {
        width: 100% !important;
        min-width: 0 !important;
        padding: 0 !important;
        border: none !important;
        background: none !important;
        box-shadow: none !important;
    }

    .audience-why-card h3 {
        margin: 0 0 6px !important;
        font-size: 12.8px !important;
        line-height: 1.12 !important;
        font-weight: 900 !important;
        color: white !important;
    }

    .audience-why-card p {
        margin: 0 !important;
        font-size: 9.8px !important;
        line-height: 1.32 !important;
        color: rgba(255,255,255,0.62) !important;
    }

    .audience-footnote {
        width: 100% !important;
        max-width: 310px !important;
        margin: 24px auto 0 !important;
        font-size: 9.4px !important;
        line-height: 1.35 !important;
        text-align: center !important;
        color: rgba(255,255,255,0.38) !important;
    }
}

/* Cases */

@media screen and (max-width: 430px) {
    .cases {
        position: relative !important;
        width: 100% !important;
        max-width: 100% !important;
        min-height: auto !important;
        padding: 62px 0 74px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        overflow: visible !important;
        background:
            radial-gradient(circle at 50% 16%, rgba(42,127,255,0.12), transparent 32%),
            linear-gradient(
                180deg,
                rgba(7,11,31,0) 0%,
                rgba(8,13,38,0.82) 24%,
                rgba(6,10,29,0.92) 72%,
                rgba(7,11,31,0) 100%
            ) !important;
    }

    .cases::before {
        content: none !important;
        display: none !important;
    }

    .cases::after {
        content: "" !important;
        position: absolute !important;
        top: 0 !important;
        left: 50% !important;
        z-index: 4 !important;
        width: min(900px, 78vw) !important;
        height: 4px !important;
        transform: translateX(-50%) !important;
        border-radius: 999px !important;
        background: linear-gradient(
            90deg,
            transparent,
            rgba(42,127,255,0.95),
            rgba(255,255,255,0.85),
            rgba(116,77,255,0.95),
            transparent
        ) !important;
        box-shadow:
            0 0 28px rgba(42,127,255,0.95),
            0 0 80px rgba(116,77,255,0.45) !important;
        opacity: 0.95 !important;
        animation: casesSectionDividerGlow 4s ease-in-out infinite !important;
        pointer-events: none !important;
    }

    .cases-label,
    .section-label.cases-label,
    .cases-top,
    .cases-grid {
        position: relative !important;
        z-index: 2 !important;
    }

    .cases-label,
    .section-label.cases-label {
        width: calc(100% - 36px) !important;
        margin: 0 auto 20px !important;
    }

    .cases-top {
        width: calc(100% - 36px) !important;
        max-width: 100% !important;
        margin: 0 auto 30px !important;
        padding: 0 !important;
        text-align: center !important;
    }

    .cases-top h2 {
        max-width: 350px !important;
        margin: 0 auto 12px !important;
        font-size: 35px !important;
        line-height: 0.98 !important;
        letter-spacing: -1.35px !important;
        font-weight: 900 !important;
        text-align: center !important;
        text-shadow:
            0 0 22px rgba(42,127,255,0.18),
            0 0 38px rgba(116,77,255,0.12) !important;
    }

    .cases-top p {
        max-width: 320px !important;
        margin: 0 auto !important;
        font-size: 13px !important;
        line-height: 1.38 !important;
        color: rgba(255,255,255,0.70) !important;
        text-align: center !important;
        text-wrap: balance !important;
    }

    .cases-grid {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
        grid-template-columns: none !important;
        gap: 0 !important;
        overflow: visible !important;
        scroll-snap-type: none !important;
        scroll-padding-left: 0 !important;
        -webkit-overflow-scrolling: auto !important;
        scrollbar-width: none !important;
    }

    .cases-grid::-webkit-scrollbar {
        display: none !important;
    }

    .cases-grid.mobile-card-deck .deck-card.is-prev,
    .cases-grid.mobile-card-deck .deck-card.is-hidden,
    .cases-grid.mobile-card-deck .deck-card.is-leaving {
        opacity: 0 !important;
        visibility: hidden !important;
    }

    .cases-grid.mobile-card-deck .deck-card:not(.is-active)::before,
    .cases-grid.mobile-card-deck .case-card::before,
    .cases-grid.mobile-card-deck .case-card::after {
        content: none !important;
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
    }

    .case-card {
        position: relative !important;
        flex: none !important;
        width: 78vw !important;
        max-width: 318px !important;
        min-height: 600px !important;
        padding: 16px 14px 18px !important;
        border-radius: 20px !important;
        scroll-snap-align: none !important;
        display: flex !important;
        flex-direction: column !important;
        outline: none !important;
        overflow: hidden !important;
        box-shadow:
            0 18px 34px rgba(0,0,0,0.30),
            0 0 34px rgba(42,127,255,0.10) !important;
    }

    .case-card,
    .case-card *,
    .case-head,
    .case-body,
    .case-content,
    .case-image-placeholder {
        outline: none !important;
    }

    .case-card .case-head,
    .case-card .case-body,
    .case-card .case-content {
        border: none !important;
        box-shadow: none !important;
    }

    .case-head {
        display: grid !important;
        grid-template-columns: 76px 1fr !important;
        gap: 11px !important;
        margin-bottom: 14px !important;
        align-items: center !important;
    }

    .case-image-placeholder {
        width: 76px !important;
        height: 76px !important;
        border-radius: 16px !important;
    }

    .case-number {
        margin-bottom: 6px !important;
        font-size: 9px !important;
        line-height: 1 !important;
        letter-spacing: 1px !important;
    }

    .case-card h3 {
        margin: 0 0 6px !important;
        font-size: 18px !important;
        line-height: 1.03 !important;
        letter-spacing: -0.45px !important;
        text-wrap: balance !important;
    }

    .case-subtitle {
        font-size: 10.2px !important;
        line-height: 1.28 !important;
    }

    .case-card h4 {
        margin-top: 10px !important;
        margin-bottom: 5px !important;
        font-size: 12.4px !important;
        line-height: 1.1 !important;
    }

    .case-card p {
        margin: 0 !important;
        font-size: 10.1px !important;
        line-height: 1.32 !important;
        color: rgba(255,255,255,0.68) !important;
    }

    .case-card ul {
        gap: 4px !important;
        margin: 0 0 6px !important;
        padding: 0 !important;
    }

    .case-card li {
        font-size: 10px !important;
        line-height: 1.25 !important;
    }

    .case-card li::before {
        margin-right: 5px !important;
    }

    /* Mobile Project Action */

    .case-action {
        width: fit-content !important;
        min-width: 0 !important;
        min-height: 34px !important;
        margin-top: auto !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding: 8px 13px !important;

        align-self: center !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;

        border-radius: 10px !important;

        font-size: 9.8px !important;
        line-height: 1 !important;
        font-weight: 800 !important;
        letter-spacing: 0.2px !important;
        white-space: nowrap !important;
    }

    .case-action-link {
        display: inline-flex !important;

        color: rgba(255,255,255,0.86) !important;
        text-decoration: none !important;

        border: 1px solid rgba(47,124,255,0.34) !important;

        background:
            linear-gradient(
                135deg,
                rgba(47,124,255,0.10),
                rgba(116,77,255,0.06)
            ) !important;

        box-shadow:
            0 0 14px rgba(47,124,255,0.06),
            inset 0 0 16px rgba(47,124,255,0.035) !important;

        -webkit-tap-highlight-color: transparent !important;

        transition:
            color 150ms ease,
            border-color 150ms ease,
            background 150ms ease,
            box-shadow 150ms ease,
            transform 120ms ease !important;
    }

    .case-action-link:active {
        color: #ffffff !important;

        border-color: rgba(83,139,255,0.62) !important;

        background:
            linear-gradient(
                135deg,
                rgba(47,124,255,0.18),
                rgba(116,77,255,0.12)
            ) !important;

        box-shadow:
            0 0 18px rgba(47,124,255,0.12),
            inset 0 0 18px rgba(116,77,255,0.06) !important;

        transform: scale(0.97) !important;
    }

    .case-action-link:focus-visible {
        outline: 2px solid rgba(47,124,255,0.90) !important;
        outline-offset: 3px !important;
    }

    .case-action-status {
        display: inline-flex !important;

        color: rgba(255,255,255,0.48) !important;

        border: 1px solid rgba(255,255,255,0.10) !important;
        background: rgba(255,255,255,0.025) !important;

        box-shadow:
            inset 0 0 14px rgba(116,77,255,0.025) !important;

        user-select: none !important;
        -webkit-user-select: none !important;
        pointer-events: none !important;
    }

    .case-action-status-dot {
        width: 6px !important;
        min-width: 6px !important;
        height: 6px !important;
        flex: 0 0 6px !important;

        border-radius: 50% !important;

        background: rgba(116,77,255,0.82) !important;

        box-shadow:
            0 0 8px rgba(116,77,255,0.52),
            0 0 14px rgba(47,124,255,0.24) !important;
    }
}

/* About */

@media screen and (max-width: 430px) {
    .about {
        width: 100% !important;
        max-width: 100% !important;
        min-height: auto !important;
        height: auto !important;
        padding: 58px 18px 46px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        overflow-x: hidden !important;
        overflow-y: visible !important;
    }

    .about-label,
    .section-label.about-label {
        width: 100% !important;
        margin: 0 0 20px !important;
    }

    .about-hero {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 34px !important;
        align-items: start !important;
    }

    .about-left {
        width: 100% !important;
        max-width: 100% !important;
    }

    .about-left h2 {
        max-width: 350px !important;
        margin: 0 0 16px !important;
        font-size: 35px !important;
        line-height: 0.98 !important;
        letter-spacing: -1.35px !important;
        font-weight: 900 !important;
    }

    .about-left p {
        max-width: 320px !important;
        margin: 0 !important;
        font-size: 13px !important;
        line-height: 1.38 !important;
        color: rgba(255,255,255,0.72) !important;
    }

    .about-line {
        width: 64px !important;
        height: 2px !important;
        margin: 18px 0 !important;
    }

    .about-stats {
        width: 100% !important;
        max-width: 320px !important;
        margin: 0 !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 18px 16px !important;
    }

    .about-stats div {
        padding: 0 12px 0 0 !important;
        border-right: none !important;
        border-bottom: 1px solid rgba(90,110,255,0.18) !important;
    }

    .about-stats div:nth-child(3),
    .about-stats div:nth-child(4) {
        border-bottom: none !important;
    }

    .about-stats strong {
        margin: 0 0 6px !important;
        font-size: 32px !important;
        line-height: 1 !important;
    }

    .about-stats span {
        font-size: 11px !important;
        line-height: 1.25 !important;
        color: rgba(255,255,255,0.68) !important;
    }

    .team-block {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }

    .team-block > h3,
    .about-section-title {
        width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        text-align: center !important;
    }

    .team-block > h3 {
        margin-top: 0 !important;
        margin-bottom: 18px !important;
        font-size: 29px !important;
        line-height: 0.98 !important;
        letter-spacing: -1.1px !important;
        font-weight: 900 !important;
    }

    .team-cards {
        width: 100% !important;
        max-width: 92% !important;
        margin: 0 auto !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 14px !important;
    }

    .team-card {
        width: 100% !important;
        min-height: 158px !important;
        padding: 14px !important;
        display: grid !important;
        grid-template-columns: 100px 1fr !important;
        gap: 13px !important;
        align-items: center !important;
        border-radius: 18px !important;
        overflow: hidden !important;
    }

    .team-card::after {
        border-radius: 17px !important;
    }

    .team-card img {
        width: 100px !important;
        height: 120px !important;
        border-radius: 16px !important;
        object-fit: cover !important;
    }

    .team-card:nth-child(1) img {
        object-position: center 10% !important;
    }

    .team-card:nth-child(2) img {
        object-position: center 70% !important;
    }

    .team-info {
        width: 100% !important;
        min-width: 0 !important;
    }

    .team-info h4 {
        margin: 0 0 5px !important;
        font-size: 16.8px !important;
        line-height: 1 !important;
        letter-spacing: -0.35px !important;
    }

    .team-info span {
        margin: 0 0 8px !important;
        font-size: 10px !important;
        line-height: 1.25 !important;
        color: rgba(255,255,255,0.70) !important;
    }

    .team-info p {
        margin: 0 !important;
        font-size: 9.6px !important;
        line-height: 1.3 !important;
        color: rgba(255,255,255,0.70) !important;
    }

    .about-values-wrap {
        position: relative !important;
        z-index: 5 !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 36px 0 0 !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    .about-section-title {
        position: relative !important;
        z-index: 6 !important;
        display: block !important;
        margin-top: 0 !important;
        margin-bottom: 18px !important;
        font-size: 29px !important;
        line-height: 1 !important;
        letter-spacing: -1px !important;
        font-weight: 900 !important;
        color: #ffffff !important;
    }

    .values-grid {
        position: relative !important;
        z-index: 6 !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
        grid-template-columns: none !important;
        gap: 0 !important;
        overflow: visible !important;
        scroll-snap-type: none !important;
        scroll-padding-left: 0 !important;
        -webkit-overflow-scrolling: auto !important;
        scrollbar-width: none !important;
    }

    .values-grid::-webkit-scrollbar {
        display: none !important;
    }

    .value-card {
        position: relative !important;
        flex: none !important;
        width: var(--value-card-size) !important;
        max-width: var(--value-card-size) !important;
        height: var(--value-card-size) !important;
        min-height: var(--value-card-size) !important;
        max-height: var(--value-card-size) !important;
        padding: 10px 10px !important;
        border-radius: 18px !important;
        scroll-snap-align: none !important;
        overflow: visible !important;
        margin-bottom: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        box-shadow:
            0 16px 28px rgba(0,0,0,0.24),
            0 0 24px rgba(42,127,255,0.07) !important;
    }

    .value-card::before {
        content: "" !important;
        position: absolute !important;
        inset: 7px -6px -7px 6px !important;
        z-index: -1 !important;
        border: 1px solid rgba(90,110,255,0.14) !important;
        border-radius: 18px !important;
        background: rgba(13, 18, 45, 0.58) !important;
        pointer-events: none !important;
    }

    .value-card::after {
        border-radius: 17px !important;
    }

    .value-card:hover {
        transform: none !important;
    }

    .value-icon-img {
        width: 64px !important;
        height: 64px !important;
        margin: 0 auto 7px !important;
        display: block !important;
        object-fit: contain !important;
    }

    .value-card h4 {
        width: 100% !important;
        max-width: 230px !important;
        margin: 0 auto 5px !important;
        font-size: 16.4px !important;
        line-height: 1.04 !important;
        letter-spacing: -0.3px !important;
        text-align: center !important;
        text-wrap: balance !important;
    }

    .value-card p {
        width: 100% !important;
        max-width: 230px !important;
        margin: 0 auto !important;
        font-size: 11px !important;
        line-height: 1.24 !important;
        color: rgba(255,255,255,0.72) !important;
        text-align: center !important;
        text-wrap: balance !important;
    }
}

/* Contacts */

@media screen and (max-width: 430px) {
    .contacts {
        width: 100% !important;
        max-width: 100% !important;
        min-height: auto !important;
        padding: 46px 18px 72px !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 34px !important;
        align-items: start !important;
        background: transparent !important;
        color: white !important;
        overflow: hidden !important;
    }

    .contacts-left {
        width: 100% !important;
        max-width: 100% !important;
        text-align: center !important;
    }

    .contacts-label,
    .section-label.contacts-label {
        width: 100% !important;
        margin: 0 0 10px !important;
        justify-content: flex-start !important;
        text-align: left !important;
    }

    .contacts-left h2 {
        max-width: 350px !important;
        margin: 0 auto 18px !important;
        font-size: 34px !important;
        line-height: 0.96 !important;
        letter-spacing: -1.35px !important;
        font-weight: 900 !important;
        text-align: center !important;
    }

    .contacts-left p {
        max-width: 320px !important;
        margin: 0 auto 28px !important;
        font-size: 13px !important;
        line-height: 1.38 !important;
        color: rgba(255,255,255,0.72) !important;
        text-align: center !important;
        text-wrap: balance !important;
    }

    .contacts-links {
        width: 100% !important;
        max-width: 86% !important;
        margin: 0 auto !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 14px !important;
    }

    .contact-item {
        width: 100% !important;
        max-width: 100% !important;
        min-height: 62px !important;
        padding: 13px 14px !important;
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        border-radius: 16px !important;
        text-decoration: none !important;
        color: white !important;
        transform: none !important;
        text-align: left !important;
        box-shadow:
            0 16px 28px rgba(0,0,0,0.22),
            0 0 22px rgba(42,127,255,0.06) !important;
    }

    .contact-item:hover {
        transform: none !important;
    }

    .contact-icon {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
        border-radius: 12px !important;
        font-size: 18px !important;
    }

    .contact-custom-icon {
        width: 20px !important;
        height: 20px !important;
        object-fit: contain !important;
        flex-shrink: 0 !important;
    }

    .contact-item strong {
        margin: 0 0 3px !important;
        font-size: 13.5px !important;
        line-height: 1.15 !important;
    }

    .contact-item span {
        display: block !important;
        font-size: 10.8px !important;
        line-height: 1.25 !important;
        color: rgba(255,255,255,0.66) !important;
        word-break: break-word !important;
    }

    .contacts-card {
        width: 100% !important;
        max-width: 86% !important;
        transform: none !important;
        padding: 20px 18px !important;
        border-radius: 20px !important;
        margin: 0 auto !important;
        text-align: center !important;
        box-shadow:
            0 18px 34px rgba(0,0,0,0.28),
            0 0 28px rgba(42,127,255,0.08) !important;
    }

    .contacts-card h3 {
        margin: 0 auto 10px !important;
        font-size: 23px !important;
        line-height: 1 !important;
        letter-spacing: -0.65px !important;
        text-align: center !important;
    }

    .contacts-card p {
        margin: 0 auto 20px !important;
        font-size: 12px !important;
        line-height: 1.38 !important;
        color: rgba(255,255,255,0.70) !important;
        text-align: center !important;
    }

    .contacts-btn {
        width: 100% !important;
        height: 52px !important;
        border-radius: 15px !important;
        font-size: 14px !important;
        line-height: 1 !important;
    }

    .contacts-btn:hover {
        transform: none !important;
    }

    .calc-modal {
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        width: calc(100% - 28px) !important;
        max-width: 390px !important;
        max-height: calc(100vh - 32px) !important;
        padding: 26px 18px 20px !important;
        border-radius: 24px !important;
        transform: translate(-50%, -46%) scale(0.96) !important;
        overflow-y: auto !important;
        z-index: 320 !important;
    }

    .calc-modal.active {
        transform: translate(-50%, -50%) scale(1) !important;
    }

    .calc-modal-close {
        width: 34px !important;
        height: 34px !important;
        top: 18px !important;
        right: 18px !important;
        border-radius: 10px !important;
        font-size: 15px !important;
        line-height: 1 !important;
    }

    .calc-modal-close:hover {
        transform: none !important;
    }

    .calc-modal-title {
        max-width: 300px !important;
        margin: 28px auto 16px !important;
        font-size: 24px !important;
        line-height: 1.05 !important;
        letter-spacing: -0.8px !important;
        text-align: center !important;
    }

    .calc-modal-title span {
        white-space: normal !important;
    }

    .calc-modal > p:not(.calc-policy-text) {
        margin: 0 0 18px !important;
        font-size: 12.5px !important;
        line-height: 1.35 !important;
        text-align: center !important;
    }

    .calc-modal input,
    .calc-modal textarea {
        width: 100% !important;
        margin-bottom: 10px !important;
        padding: 14px !important;
        border-radius: 13px !important;
        font-size: 14px !important;
        line-height: 1.2 !important;
    }

    .calc-modal textarea {
        height: 92px !important;
        min-height: 92px !important;
        max-height: 120px !important;
        resize: none !important;
    }

    .calc-policy-text {
        margin: 0 0 12px !important;
        font-size: 9.8px !important;
        line-height: 1.35 !important;
        color: rgba(255,255,255,0.46) !important;
    }

    .calc-send-btn {
        width: 100% !important;
        height: 54px !important;
        margin-top: 4px !important;
        border-radius: 15px !important;
        font-size: 15px !important;
        line-height: 1 !important;
    }

    .calc-send-btn:hover {
        transform: none !important;
    }

    .contact-overlay {
        position: fixed !important;
        inset: 0 !important;
        z-index: 300 !important;
        background:
            radial-gradient(circle at 50% 30%, rgba(42,127,255,0.16), transparent 34%),
            rgba(2,5,17,0.76) !important;
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transition:
            opacity 260ms ease,
            visibility 260ms ease !important;
    }

    .contact-overlay.active {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    .contact-panel {
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        z-index: 310 !important;
        width: calc(100% - 32px) !important;
        max-width: 390px !important;
        height: auto !important;
        max-height: calc(100dvh - 32px) !important;
        transform: translate(-50%, -46%) scale(0.96) !important;
        border: 1px solid rgba(90,110,255,0.28) !important;
        border-radius: 24px !important;
        background:
            linear-gradient(
                180deg,
                rgba(14,20,50,0.98),
                rgba(5,8,24,0.98)
            ) !important;
        box-shadow:
            0 24px 60px rgba(0,0,0,0.50),
            0 0 42px rgba(42,127,255,0.18),
            0 0 90px rgba(116,77,255,0.10) !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        overflow: hidden !important;
        transition:
            opacity 280ms ease,
            visibility 280ms ease,
            transform 280ms cubic-bezier(0.22, 1, 0.36, 1) !important;
    }

    .contact-panel.active {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transform: translate(-50%, -50%) scale(1) !important;
    }

    .contact-close {
        position: absolute !important;
        top: 14px !important;
        right: 14px !important;
        z-index: 3 !important;
        width: 34px !important;
        height: 34px !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border: 1px solid rgba(255,255,255,0.10) !important;
        border-radius: 11px !important;
        background: rgba(255,255,255,0.06) !important;
        color: rgba(255,255,255,0.86) !important;
        font-size: 14px !important;
        line-height: 1 !important;
        transform: none !important;
    }

    .contact-panel-content {
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: calc(100dvh - 32px) !important;
        padding: 56px 18px 20px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        text-align: center !important;
    }

    .contact-label {
        width: 100% !important;
        margin: 0 auto 20px !important;
        font-size: 25px !important;
        line-height: 1 !important;
        letter-spacing: 1.2px !important;
        font-weight: 900 !important;
        color: #ffffff !important;
        text-align: center !important;
    }

    .contact-link {
        position: relative !important;
        width: 100% !important;
        max-width: 100% !important;
        min-height: 62px !important;
        height: auto !important;
        margin: 0 0 12px !important;
        padding: 13px 14px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 12px !important;
        border: 1px solid rgba(90,110,255,0.22) !important;
        border-radius: 16px !important;
        background:
            linear-gradient(
                180deg,
                rgba(255,255,255,0.065),
                rgba(255,255,255,0.028)
            ) !important;
        box-shadow:
            0 14px 26px rgba(0,0,0,0.22),
            0 0 22px rgba(42,127,255,0.07) !important;
        color: #ffffff !important;
        text-decoration: none !important;
        font-size: 13.5px !important;
        line-height: 1.2 !important;
        font-weight: 700 !important;
        text-align: left !important;
        overflow: hidden !important;
    }

    .contact-link:last-child {
        margin-bottom: 0 !important;
    }

    .contact-link span {
        display: block !important;
        min-width: 0 !important;
        color: rgba(255,255,255,0.88) !important;
        overflow-wrap: anywhere !important;
        word-break: break-word !important;
    }

    .contact-panel img,
    .contact-panel svg,
    .contact-link img,
    .contact-link svg,
    .mail-contact-icon,
    .phone-contact-icon,
    .telegram-contact-icon {
        position: static !important;
        inset: auto !important;
        display: block !important;
        width: 20px !important;
        min-width: 20px !important;
        max-width: 20px !important;
        height: 20px !important;
        min-height: 20px !important;
        max-height: 20px !important;
        flex: 0 0 20px !important;
        object-fit: contain !important;
        object-position: center !important;
        transform: none !important;
        scale: 1 !important;
        opacity: 1 !important;
        visibility: visible !important;
        z-index: 1 !important;
    }

    .contact-panel:not(.active) img,
    .contact-panel:not(.active) svg,
    .contact-panel:not(.active) .mail-contact-icon,
    .contact-panel:not(.active) .phone-contact-icon,
    .contact-panel:not(.active) .telegram-contact-icon {
        opacity: 0 !important;
        visibility: hidden !important;
    }

    .contact-panel .mail-contact-icon,
    .contact-panel .phone-contact-icon,
    .contact-panel .telegram-contact-icon {
        filter:
            brightness(0)
            saturate(100%)
            invert(47%)
            sepia(95%)
            saturate(2668%)
            hue-rotate(202deg)
            brightness(101%)
            contrast(101%)
            drop-shadow(0 0 10px rgba(42,127,255,0.55)) !important;
    }

    .site-toast {
        top: 16px !important;
        right: 14px !important;
        left: 14px !important;
        width: auto !important;
        max-width: none !important;
        padding: 14px !important;
        border-radius: 18px !important;
        gap: 12px !important;
        transform: translateY(-14px) scale(0.96) !important;
        z-index: 500 !important;
    }

    .site-toast.active {
        transform: translateY(0) scale(1) !important;
    }

    .site-toast-icon {
        width: 36px !important;
        height: 36px !important;
        border-radius: 12px !important;
        font-size: 18px !important;
    }

    .site-toast-content strong {
        font-size: 14px !important;
        line-height: 1.15 !important;
    }

    .site-toast-content span {
        font-size: 12px !important;
        line-height: 1.3 !important;
    }

    .scroll-top-btn {
        right: 18px !important;
        bottom: 24px !important;
        width: 28px !important;
        height: 28px !important;
        z-index: 260 !important;
    }

    .scroll-top-btn img {
        width: 76px !important;
        height: 76px !important;
    }
}

/* Footer */

@media screen and (max-width: 430px) {
    .site-footer {
        position: relative !important;

        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;

        margin: 0 !important;

        padding:
            0
            18px
            calc(28px + env(safe-area-inset-bottom)) !important;

        color: #ffffff !important;

        overflow: hidden !important;
    }

    .site-footer::before {
        left: 50% !important;
        right: auto !important;

        width: calc(100% - 36px) !important;
        max-width: none !important;

        transform: translateX(-50%) !important;

        background:
            linear-gradient(
                90deg,
                transparent 0%,
                rgba(42,127,255,0.18) 18%,
                rgba(255,255,255,0.16) 50%,
                rgba(116,77,255,0.18) 82%,
                transparent 100%
            ) !important;
    }

    .site-footer .site-footer-glow {
        position: absolute !important;

        left: 50% !important;
        top: -76px !important;

        width: 420px !important;
        max-width: 120vw !important;
        height: 170px !important;

        transform: translateX(-50%) !important;

        opacity: 0.9 !important;

        pointer-events: none !important;
    }

    .site-footer .site-footer-inner {
        position: relative !important;
        z-index: 2 !important;

        width: 100% !important;
        min-width: 0 !important;
        max-width: 360px !important;

        margin: 0 auto !important;
        padding: 30px 0 0 !important;

        display: block !important;
    }

    .site-footer .site-footer-main {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;

        grid-template-columns: none !important;
        grid-template-rows: none !important;

        gap: 24px !important;

        text-align: center !important;
    }

    .site-footer .site-footer-brand {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 320px !important;

        margin: 0 auto !important;
        padding: 0 !important;

        display: block !important;

        text-align: center !important;
    }

    .site-footer .site-footer-logo-row {
        width: 100% !important;
        min-width: 0 !important;

        margin: 0 auto 12px !important;
        padding: 0 !important;

        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;

        gap: 10px !important;

        text-align: center !important;
    }

    .site-footer .site-footer-logo {
        position: static !important;

        width: 38px !important;
        min-width: 38px !important;
        max-width: 38px !important;

        height: 38px !important;
        min-height: 38px !important;
        max-height: 38px !important;

        margin: 0 !important;
        padding: 0 !important;

        flex: 0 0 38px !important;

        object-fit: contain !important;
        object-position: center !important;

        transform: none !important;
    }

    .site-footer .site-footer-logo-row strong {
        display: block !important;

        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;

        margin: 0 !important;
        padding: 0 !important;

        font-size: 12px !important;
        line-height: 1 !important;
        font-weight: 900 !important;
        letter-spacing: 0.55px !important;

        color: #ffffff !important;

        white-space: nowrap !important;
        word-break: normal !important;
        overflow-wrap: normal !important;

        text-align: left !important;
    }

    .site-footer .site-footer-brand p {
        display: block !important;

        width: 100% !important;
        min-width: 0 !important;
        max-width: 292px !important;

        margin: 0 auto !important;
        padding: 0 !important;

        font-size: 11px !important;
        line-height: 1.5 !important;
        font-weight: 400 !important;

        color: rgba(255,255,255,0.48) !important;

        text-align: center !important;

        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
        text-wrap: balance !important;
    }

    .site-footer .site-footer-links {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 320px !important;

        margin: 0 auto !important;
        padding: 0 !important;

        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;

        gap: 10px !important;

        text-align: center !important;
    }

    .site-footer .site-footer-links a {
        display: block !important;

        width: auto !important;
        min-width: 0 !important;
        max-width: 100% !important;

        margin: 0 auto !important;
        padding: 0 !important;

        color: rgba(255,255,255,0.58) !important;

        font-size: 10.5px !important;
        line-height: 1.4 !important;
        font-weight: 600 !important;

        text-align: center !important;
        text-decoration: none !important;

        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: anywhere !important;

        transform: none !important;

        -webkit-tap-highlight-color: transparent !important;
    }

    .site-footer .site-footer-links a:hover {
        color: rgba(255,255,255,0.82) !important;
        transform: none !important;
    }

    .site-footer .site-footer-links a:active {
        color: #ffffff !important;
        transform: none !important;
    }

    .site-footer .site-footer-bottom {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 320px !important;

        margin: 26px auto 0 !important;
        padding: 17px 0 0 !important;

        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;

        grid-template-columns: none !important;

        gap: 9px !important;

        border-top: 1px solid rgba(255,255,255,0.055) !important;

        color: rgba(255,255,255,0.32) !important;

        font-size: 9px !important;
        line-height: 1.25 !important;

        text-align: center !important;
    }

    .site-footer .site-footer-bottom > * {
        width: auto !important;
        max-width: 100% !important;

        margin: 0 !important;

        text-align: center !important;
    }

    .site-footer .site-footer-status {
        display: inline-flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;

        width: auto !important;

        gap: 6px !important;

        white-space: normal !important;
        text-align: center !important;
    }

    .site-footer .site-footer-status-dot {
        width: 5px !important;
        min-width: 5px !important;
        max-width: 5px !important;

        height: 5px !important;
        min-height: 5px !important;
        max-height: 5px !important;

        flex: 0 0 5px !important;
    }
}

/* Small Phones */

@media screen and (max-width: 374px) {
    .hero {
        --hero-text-top: 6px;
        --hero-title-width: 314px;
        --hero-title-size: 20px;
        --hero-subtitle-width: 292px;
        --hero-subtitle-size: 9.7px;
        --hero-subtitle-top: 18px;
        --rocket-top: 218px;
        --rocket-height: 274px;
        --rocket-width: min(88vw, 318px);
        --guarantee-top: 428px;
        --guarantee-width: 280px;
        --guarantee-size: 10px;
        --features-top: 330px;
        --features-width: 300px;
        --feature-height: 46px;
        --feature-gap: 6px;
        --feature-radius: 11px;
        --feature-icon: 14px;
        --feature-font: 6.8px;
        --hero-buttons-width: 300px;
        --hero-button-height: 41px;
        min-height: 642px !important;
        padding: 14px 12px calc(24px + env(safe-area-inset-bottom)) !important;
    }

    .logo {
        gap: 5px !important;
    }

    .logo::after {
        font-size: 11px !important;
        letter-spacing: 0.35px !important;
    }

    .logo-image {
        width: 36px !important;
        height: 36px !important;
    }

    .contact-btn {
        width: 34px !important;
        min-width: 34px !important;
        height: 34px !important;
    }

    .phone-icon {
        width: 13px !important;
        height: 13px !important;
    }

    .hero-left h1 {
        min-height: 59px !important;
    }

    .hero-left h1::before {
        max-width: 314px !important;
        font-size: 18px !important;
        line-height: 1.08 !important;
        letter-spacing: -0.68px !important;
    }

    .hero-subtitle {
        margin-top: 9px !important;
    }

    .hero-buttons {
        margin-top: 9px !important;
        gap: 7px !important;
    }

    .primary-btn,
    .secondary-btn {
        font-size: 11.2px !important;
        border-radius: 14px !important;
    }

    .hero-button-note {
        display: none !important;
    }

    .process,
    .solutions,
    .audience,
    .about {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    .process {
        padding-top: 50px !important;
        padding-bottom: 62px !important;
    }

    .solutions {
        padding-top: 50px !important;
        padding-bottom: 78px !important;
    }

    .audience {
        padding-top: 50px !important;
        padding-bottom: 58px !important;
    }

    .about {
        padding-top: 50px !important;
        padding-bottom: 42px !important;
    }

    .process h2,
    .solutions-top h2,
    .audience-title-main,
    .audience-title-sub,
    .cases-top h2,
    .about-left h2,
    .contacts-left h2 {
        font-size: 29px !important;
        line-height: 0.98 !important;
        letter-spacing: -1.1px !important;
    }

    .process-top p,
    .solutions-top p,
    .audience-top p,
    .cases-top p,
    .about-left p,
    .contacts-left p {
        max-width: 290px !important;
        font-size: 11.8px !important;
        line-height: 1.34 !important;
    }

    .service-cards.mobile-card-deck {
        --deck-width: 80vw;
        --deck-max-width: 280px;
        --deck-side-shift: 22px;
        --deck-back-shift: 38px;
        margin-bottom: 60px !important;
    }

    .cases-grid.mobile-card-deck {
        --deck-width: 80vw;
        --deck-max-width: 292px;
        --deck-side-shift: 22px;
        --deck-back-shift: 38px;
        margin-bottom: 60px !important;
    }

    .values-grid.mobile-card-deck {
        --value-card-size: 168px;
        --deck-width: var(--value-card-size);
        --deck-max-width: var(--value-card-size);
        --deck-side-shift: 22px;
        --deck-back-shift: 38px;
        margin-bottom: 60px !important;
    }

    .service-cards.mobile-card-deck::before,
    .cases-grid.mobile-card-deck::before,
    .values-grid.mobile-card-deck::before {
        top: calc(100% + 18px) !important;
        width: 108px !important;
        font-size: 8.6px !important;
        letter-spacing: 0.7px !important;
    }

    .service-cards.mobile-card-deck::after,
    .cases-grid.mobile-card-deck::after,
    .values-grid.mobile-card-deck::after {
        top: calc(100% + 43px) !important;
        width: 72px !important;
        height: 3px !important;
    }

    .service-card {
        width: 80vw !important;
        max-width: 280px !important;
        padding: 15px 14px 17px !important;
        border-radius: 16px !important;
    }

    .service-card h3 {
        font-size: 15.8px !important;
    }

    .process-cards,
    .process-cards.mobile-card-deck {
        max-width: 304px !important;
        gap: 15px 10px !important;
    }

    .process-cards.mobile-card-deck .deck-card,
    .process-cards.mobile-card-deck .deck-card.is-active,
    .process-cards.mobile-card-deck .deck-card.is-next,
    .process-cards.mobile-card-deck .deck-card.is-after,
    .process-cards.mobile-card-deck .deck-card.is-prev,
    .process-cards.mobile-card-deck .deck-card.is-hidden,
    .process-cards.mobile-card-deck .deck-card.is-leaving,
    .process-card {
        height: 198px !important;
        min-height: 198px !important;
        max-height: 198px !important;
        padding: 18px 8px 13px !important;
    }

    .process-number {
        font-size: 21px !important;
    }

    .process-icon {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
        margin: 11px 0 11px !important;
    }

    .process-icon img {
        width: 21px !important;
        height: 21px !important;
    }

    .process-card h3 {
        max-width: 124px !important;
        font-size: 11.4px !important;
        line-height: 1.08 !important;
    }

    .process-card p {
        max-width: 124px !important;
        font-size: 8.3px !important;
        line-height: 1.25 !important;
    }

    .solutions {
        padding: 50px 14px 78px !important;
    }

    .solutions-top h2 {
        max-width: 312px !important;
        font-size: 29px !important;
        line-height: 0.98 !important;
        letter-spacing: -1.1px !important;
    }

    .solutions-top p {
        max-width: 290px !important;
        font-size: 11.8px !important;
        line-height: 1.34 !important;
    }

    .solutions-table {
        max-width: 294px !important;
        height: 208px !important;
        min-height: 208px !important;
        max-height: 208px !important;
    }

    .solutions-table::before,
    .solutions-table::after {
        height: 198px !important;
    }

    .solutions-row:not(.solutions-head) {
        max-width: 294px !important;
        height: 198px !important;
        min-height: 198px !important;
        max-height: 198px !important;
        border-radius: 20px !important;
    }

    .solutions-row > div {
        padding: 13px 13px !important;
    }

    .solutions-row > div:first-child {
        font-size: 12.2px !important;
        line-height: 1.16 !important;
    }

    .solutions-row > div:last-child {
        font-size: 10.2px !important;
        line-height: 1.3 !important;
    }

    .solutions-row > div:first-child::before,
    .solutions-row > div:last-child::before {
        flex-basis: 58px !important;
        min-width: 58px !important;
        margin-right: 8px !important;
        font-size: 8px !important;
    }

    .solutions-swipe-hint {
        max-width: 294px !important;
        height: 48px !important;
        margin-top: 22px !important;
    }

    .solutions-swipe-hint span {
        font-size: 8.6px !important;
        letter-spacing: 0.7px !important;
    }

    .audience-grid,
    .audience-grid.mobile-card-deck {
        max-width: 294px !important;
        gap: 10px !important;
    }

    .audience-grid.mobile-card-deck .deck-card,
    .audience-grid.mobile-card-deck .deck-card.is-active,
    .audience-grid.mobile-card-deck .deck-card.is-next,
    .audience-grid.mobile-card-deck .deck-card.is-after,
    .audience-grid.mobile-card-deck .deck-card.is-prev,
    .audience-grid.mobile-card-deck .deck-card.is-hidden,
    .audience-grid.mobile-card-deck .deck-card.is-leaving,
    .audience-item {
        max-width: 294px !important;
        height: 132px !important;
        min-height: 132px !important;
        max-height: 132px !important;
    }

    .audience-item {
        grid-template-columns: 112px 1fr !important;
    }

    .audience-info {
        padding: 10px 36px 10px 10px !important;
    }

    .audience-info h3 {
        max-width: 132px !important;
        font-size: 11.8px !important;
        line-height: 1.04 !important;
        margin-bottom: 5px !important;
    }

    .audience-item:nth-child(6) .audience-info h3 {
        font-size: 12.6px !important;
    }

    .audience-info p {
        max-width: 132px !important;
        font-size: 8.3px !important;
        line-height: 1.22 !important;
    }

    .audience-icon {
        width: 26px !important;
        height: 26px !important;
        right: 8px !important;
        bottom: 8px !important;
    }

    .audience-why {
        max-width: 91% !important;
        gap: 16px 12px !important;
        margin-top: 24px !important;
    }

    .audience-why-card h3 {
        font-size: 11.8px !important;
    }

    .audience-why-card p {
        font-size: 9px !important;
        line-height: 1.28 !important;
    }

    .audience-footnote {
        max-width: 290px !important;
        font-size: 9px !important;
    }

    .cases {
        padding: 52px 0 64px !important;
    }

    .cases-label,
    .section-label.cases-label,
    .cases-top {
        width: calc(100% - 28px) !important;
    }

    .case-card {
        width: 80vw !important;
        max-width: 292px !important;
        min-height: 585px !important;
        padding: 15px 13px 17px !important;
        border-radius: 18px !important;
    }

    .case-head {
        grid-template-columns: 68px 1fr !important;
        gap: 10px !important;
    }

    .case-image-placeholder {
        width: 68px !important;
        height: 68px !important;
        border-radius: 15px !important;
    }

    .case-card h3 {
        font-size: 16px !important;
    }

    .case-subtitle {
        font-size: 9.2px !important;
    }

    .case-card h4 {
        font-size: 11.5px !important;
    }

    .case-card p,
    .case-card li {
        font-size: 9.2px !important;
        line-height: 1.25 !important;
    }

    .about-stats {
        max-width: 290px !important;
        gap: 16px 12px !important;
    }

    .about-stats strong {
        font-size: 28px !important;
    }

    .about-stats span {
        font-size: 10px !important;
    }

    .team-block > h3,
    .about-section-title {
        font-size: 26px !important;
    }

    .team-card {
        min-height: 150px !important;
        padding: 13px !important;
        grid-template-columns: 90px 1fr !important;
        gap: 11px !important;
        border-radius: 17px !important;
    }

    .team-card img {
        width: 90px !important;
        height: 112px !important;
        border-radius: 15px !important;
    }

    .team-info h4 {
        font-size: 15px !important;
    }

    .team-info span {
        font-size: 9.2px !important;
    }

    .team-info p {
        font-size: 8.8px !important;
        line-height: 1.25 !important;
    }

    .value-card {
        width: var(--value-card-size) !important;
        max-width: var(--value-card-size) !important;
        height: var(--value-card-size) !important;
        min-height: var(--value-card-size) !important;
        max-height: var(--value-card-size) !important;
        padding: 8px 8px !important;
    }

    .value-icon-img {
        width: 56px !important;
        height: 56px !important;
        margin-bottom: 6px !important;
    }

    .value-card h4 {
        font-size: 14.8px !important;
        line-height: 1.03 !important;
        margin-bottom: 4px !important;
    }

    .value-card p {
        font-size: 10px !important;
        line-height: 1.2 !important;
    }

    .contacts {
        padding: 42px 14px 68px !important;
    }

    .contacts-links,
    .contacts-card {
        max-width: 88% !important;
    }

    .contact-item {
        min-height: 58px !important;
        padding: 12px 13px !important;
    }

    .contact-icon {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        min-height: 36px !important;
    }

    .contacts-card {
        padding: 18px 16px !important;
    }

    .contacts-card h3 {
        font-size: 21px !important;
    }

    .contact-panel {
        width: calc(100% - 24px) !important;
        border-radius: 22px !important;
    }

    .contact-panel-content {
        padding: 52px 14px 18px !important;
    }

    .contact-label {
        margin-bottom: 18px !important;
        font-size: 23px !important;
    }

    .contact-link {
        min-height: 58px !important;
        padding: 12px 13px !important;
        border-radius: 15px !important;
        font-size: 12.5px !important;
    }

    .contact-panel img,
    .contact-panel svg,
    .contact-link img,
    .contact-link svg,
    .mail-contact-icon,
    .phone-contact-icon,
    .telegram-contact-icon {
        width: 18px !important;
        min-width: 18px !important;
        max-width: 18px !important;
        height: 18px !important;
        min-height: 18px !important;
        max-height: 18px !important;
        flex-basis: 18px !important;
    }
}

/* iPhone 375–393 */

@media screen and (min-width: 375px) and (max-width: 393px) {
    .hero {
        --hero-text-top: 5px;
        --hero-title-width: 360px;
        --hero-title-size: 23px;
        --hero-subtitle-width: 332px;
        --hero-subtitle-size: 10.8px;
        --hero-subtitle-top: 20px;
        --rocket-top: 216px;
        --rocket-height: 306px;
        --rocket-width: min(91vw, 364px);
        --guarantee-top: 440px;
        --guarantee-width: 315px;
        --guarantee-size: 11.2px;
        --features-top: 352px;
        --features-width: 326px;
        --feature-height: 52px;
        --feature-gap: 8px;
        --feature-radius: 13px;
        --feature-icon: 17px;
        --feature-font: 8.1px;
        --hero-buttons-width: 326px;
        --hero-button-height: 45px;
        min-height: 690px !important;
        padding: 16px 16px calc(26px + env(safe-area-inset-bottom)) !important;
    }

    .logo {
        gap: 5px !important;
    }

    .logo::after {
        font-size: 12px !important;
        letter-spacing: 0.42px !important;
    }

    .logo-image {
        width: 48px !important;
        height: 48px !important;
    }

    .contact-btn {
        width: 36px !important;
        min-width: 36px !important;
        height: 36px !important;
    }

    .hero-left h1 {
        min-height: 67px !important;
    }

    .hero-left h1::before {
        max-width: 360px !important;
        font-size: 20.4px !important;
        line-height: 1.08 !important;
        letter-spacing: -0.66px !important;
    }

    .hero-subtitle {
        margin-top: 20px !important;
    }

    .process {
        padding: 56px 16px 66px !important;
    }

    .solutions {
        padding: 56px 16px 86px !important;
    }

    .audience {
        padding: 56px 16px 62px !important;
    }

    .about {
        padding: 56px 16px 44px !important;
    }

    .process h2,
    .solutions-top h2,
    .audience-title-main,
    .audience-title-sub,
    .cases-top h2,
    .about-left h2,
    .contacts-left h2 {
        font-size: 32px !important;
    }

    .process-top p,
    .solutions-top p,
    .audience-top p,
    .cases-top p,
    .about-left p,
    .contacts-left p {
        max-width: 310px !important;
        font-size: 12.5px !important;
        line-height: 1.36 !important;
    }

    .service-cards.mobile-card-deck {
        --deck-width: 78vw;
        --deck-max-width: 304px;
    }

    .cases-grid.mobile-card-deck {
        --deck-width: 78vw;
        --deck-max-width: 306px;
    }

    .values-grid.mobile-card-deck {
        --value-card-size: 178px;
        --deck-width: var(--value-card-size);
        --deck-max-width: var(--value-card-size);
    }

    .service-card {
        width: 78vw !important;
        max-width: 304px !important;
    }

    .process-card {
        width: 78vw !important;
        max-width: 304px !important;
        height: 216px !important;
        min-height: 216px !important;
        max-height: 216px !important;
    }

    .solutions {
        padding: 56px 16px 86px !important;
    }

    .solutions-top h2 {
        font-size: 32px !important;
    }

    .solutions-top p {
        max-width: 310px !important;
        font-size: 12.5px !important;
        line-height: 1.36 !important;
    }

    .solutions-table {
        max-width: 320px !important;
        height: 222px !important;
        min-height: 222px !important;
        max-height: 222px !important;
    }

    .solutions-table::before,
    .solutions-table::after {
        height: 212px !important;
    }

    .solutions-row:not(.solutions-head) {
        max-width: 320px !important;
        height: 212px !important;
        min-height: 212px !important;
        max-height: 212px !important;
    }

    .solutions-row > div {
        padding: 14px 15px !important;
    }

    .solutions-row > div:first-child {
        font-size: 13.2px !important;
        line-height: 1.17 !important;
    }

    .solutions-row > div:last-child {
        font-size: 10.9px !important;
        line-height: 1.33 !important;
    }
    
    .solutions-swipe-hint {
        max-width: 320px !important;
    }

    .audience-item {
        width: 82vw !important;
        max-width: 320px !important;
        height: 140px !important;
        min-height: 140px !important;
        grid-template-columns: 122px 1fr !important;
    }

    .audience-info h3 {
        max-width: 148px !important;
        font-size: 12.8px !important;
    }

    .audience-item:nth-child(6) .audience-info h3 {
        font-size: 13.8px !important;
    }

    .audience-info p {
        max-width: 148px !important;
        font-size: 8.9px !important;
    }

    .audience-icon {
        width: 28px !important;
        height: 28px !important;
    }

    .cases {
        padding: 58px 0 68px !important;
    }

    .cases-label,
    .section-label.cases-label,
    .cases-top {
        width: calc(100% - 32px) !important;
    }

    .case-card {
        width: 78vw !important;
        max-width: 306px !important;
        min-height: 595px !important;
    }

    .case-head {
        grid-template-columns: 74px 1fr !important;
    }

    .case-image-placeholder {
        width: 74px !important;
        height: 74px !important;
    }

    .case-card h3 {
        font-size: 17.2px !important;
    }

    .case-card p,
    .case-card li {
        font-size: 9.8px !important;
    }

    .team-card {
        grid-template-columns: 96px 1fr !important;
        min-height: 154px !important;
    }

    .team-card img {
        width: 96px !important;
        height: 116px !important;
    }

    .team-info h4 {
        font-size: 16.2px !important;
    }

    .team-info p {
        font-size: 9.2px !important;
    }

    .value-card {
        width: var(--value-card-size) !important;
        max-width: var(--value-card-size) !important;
        height: var(--value-card-size) !important;
        min-height: var(--value-card-size) !important;
        max-height: var(--value-card-size) !important;
        padding: 9px 9px !important;
    }

    .value-icon-img {
        width: 62px !important;
        height: 62px !important;
        margin-bottom: 6px !important;
    }

    .value-card h4 {
        font-size: 15.8px !important;
        line-height: 1.03 !important;
        margin-bottom: 5px !important;
    }

    .value-card p {
        font-size: 10.6px !important;
        line-height: 1.22 !important;
    }
}

/* Large Phones */

@media screen and (min-width: 394px) and (max-width: 430px) {
    .hero {
        --hero-text-top: 5px;
        --hero-title-width: 412px;
        --hero-title-size: 24px;
        --hero-subtitle-width: 352px;
        --hero-subtitle-size: 11.2px;
        --hero-subtitle-top: 10px;
        --rocket-top: 210px;
        --rocket-height: 336px;
        --rocket-width: min(91vw, 386px);
        --guarantee-top: 462px;
        --guarantee-width: 340px;
        --guarantee-size: 11.8px;
        --features-top: 370px;
        --features-width: 352px;
        --feature-height: 56px;
        --feature-gap: 8px;
        --feature-radius: 15px;
        --feature-icon: 18px;
        --feature-font: 8.8px;
        --hero-buttons-width: 352px;
        --hero-button-height: 46px;
        min-height: 724px !important;
        padding: 20px 20px calc(28px + env(safe-area-inset-bottom)) !important;
    }

    .logo {
        gap: 5px !important;
    }

    .logo::after {
        font-size: 13px !important;
        letter-spacing: 0.45px !important;
    }

    .logo-image {
        width: 54px !important;
        height: 54px !important;
    }

    .contact-btn {
        width: 38px !important;
        min-width: 38px !important;
        height: 38px !important;
    }

    .hero-left h1 {
        min-height: 74px !important;
    }

    .hero-left h1::before {
        max-width: 392px !important;
        font-size: 22.1px !important;
        line-height: 1.08 !important;
        letter-spacing: -0.62px !important;
    }

    .hero-subtitle {
        margin-top: 20px !important;
    }

    .process {
        padding: 60px 20px 72px !important;
    }

    .solutions {
        padding: 60px 20px 92px !important;
    }

    .audience {
        padding: 60px 20px 68px !important;
    }

    .about {
        padding: 60px 20px 46px !important;
    }

    .process h2,
    .solutions-top h2,
    .audience-title-main,
    .audience-title-sub,
    .cases-top h2,
    .about-left h2,
    .contacts-left h2 {
        font-size: 35px !important;
    }

    .process-top p,
    .solutions-top p,
    .audience-top p,
    .cases-top p,
    .about-left p,
    .contacts-left p {
        max-width: 340px !important;
        font-size: 13.2px !important;
        line-height: 1.38 !important;
    }

    .service-cards.mobile-card-deck {
        --deck-width: 76vw;
        --deck-max-width: 318px;
    }

    .cases-grid.mobile-card-deck {
        --deck-width: 76vw;
        --deck-max-width: 318px;
    }

    .values-grid.mobile-card-deck {
        --value-card-size: 188px;
        --deck-width: var(--value-card-size);
        --deck-max-width: var(--value-card-size);
    }

    .service-card {
        width: 76vw !important;
        max-width: 318px !important;
    }

    .process-cards,
    .process-cards.mobile-card-deck {
        max-width: 368px !important;
        gap: 18px 13px !important;
    }

    .process-cards.mobile-card-deck .deck-card,
    .process-cards.mobile-card-deck .deck-card.is-active,
    .process-cards.mobile-card-deck .deck-card.is-next,
    .process-cards.mobile-card-deck .deck-card.is-after,
    .process-cards.mobile-card-deck .deck-card.is-prev,
    .process-cards.mobile-card-deck .deck-card.is-hidden,
    .process-cards.mobile-card-deck .deck-card.is-leaving,
    .process-card {
        height: 226px !important;
        min-height: 226px !important;
        max-height: 226px !important;
    }

    .process-card h3 {
        font-size: 13.8px !important;
    }

    .process-card p {
        font-size: 9.9px !important;
    }

    .solutions {
        padding: 60px 20px 92px !important;
    }

    .solutions-top h2 {
        font-size: 35px !important;
    }

    .solutions-top p {
        max-width: 340px !important;
        font-size: 13.2px !important;
        line-height: 1.38 !important;
    }

    .solutions-table {
        max-width: 336px !important;
        height: 232px !important;
        min-height: 232px !important;
        max-height: 232px !important;
    }

    .solutions-row:not(.solutions-head) {
        max-width: 336px !important;
        height: 222px !important;
        min-height: 222px !important;
        max-height: 222px !important;
    }

    .solutions-row > div:first-child {
        font-size: 14.2px !important;
    }

    .solutions-row > div:last-child {
        font-size: 11.5px !important;
    }
    
    .solutions-swipe-hint {
        max-width: 336px !important;
    }

    .audience-item {
        width: 80vw !important;
        max-width: 336px !important;
        height: 148px !important;
        min-height: 148px !important;
        grid-template-columns: 132px 1fr !important;
    }

    .audience-info {
        padding: 13px 44px 13px 13px !important;
    }

    .audience-info h3 {
        max-width: 160px !important;
        font-size: 13.8px !important;
    }

    .audience-item:nth-child(6) .audience-info h3 {
        font-size: 14.8px !important;
    }

    .audience-info p {
        max-width: 160px !important;
        font-size: 9.6px !important;
    }

    .audience-icon {
        width: 31px !important;
        height: 31px !important;
    }

    .cases {
        padding: 62px 0 74px !important;
    }

    .cases-label,
    .section-label.cases-label,
    .cases-top {
        width: calc(100% - 40px) !important;
    }

    .case-card {
        width: 76vw !important;
        max-width: 318px !important;
        min-height: 605px !important;
    }

    .case-head {
        grid-template-columns: 80px 1fr !important;
    }

    .case-image-placeholder {
        width: 80px !important;
        height: 80px !important;
    }

    .case-card h3 {
        font-size: 18.5px !important;
    }

    .case-card p,
    .case-card li {
        font-size: 10.2px !important;
    }

    .about-stats {
        max-width: 340px !important;
    }

    .team-card {
        grid-template-columns: 106px 1fr !important;
        min-height: 164px !important;
    }

    .team-card img {
        width: 106px !important;
        height: 126px !important;
    }

    .team-info h4 {
        font-size: 17.4px !important;
    }

    .team-info p {
        font-size: 9.8px !important;
    }

    .value-card {
        width: var(--value-card-size) !important;
        max-width: var(--value-card-size) !important;
        height: var(--value-card-size) !important;
        min-height: var(--value-card-size) !important;
        max-height: var(--value-card-size) !important;
        padding: 10px 10px !important;
    }

    .value-icon-img {
        width: 66px !important;
        height: 66px !important;
        margin-bottom: 7px !important;
    }

    .value-card h4 {
        font-size: 16.6px !important;
        line-height: 1.03 !important;
        margin-bottom: 5px !important;
    }

    .value-card p {
        font-size: 11.1px !important;
        line-height: 1.22 !important;
    }
}

/* Landscape Lock */

@media screen and (max-width: 932px) and (max-height: 500px) and (orientation: landscape) {
    html,
    body {
        width: 100% !important;
        height: 100% !important;
        overflow: hidden !important;
        overscroll-behavior: none !important;
        background: #030717 !important;
    }

    body > * {
        visibility: hidden !important;
    }

    body::before {
        content: "" !important;
        position: fixed !important;
        inset: 0 !important;
        z-index: 99998 !important;
        visibility: visible !important;
        background:
            radial-gradient(circle at 50% 30%, rgba(42,127,255,0.24), transparent 34%),
            radial-gradient(circle at 50% 70%, rgba(116,77,255,0.18), transparent 42%),
            #030717 !important;
    }

    body::after {
        content: "Поверните телефон вертикально" !important;
        position: fixed !important;
        left: 50% !important;
        top: 50% !important;
        z-index: 99999 !important;
        visibility: visible !important;
        width: calc(100% - 48px) !important;
        max-width: 420px !important;
        padding: 28px 24px !important;
        transform: translate(-50%, -50%) !important;
        border: 1px solid rgba(90,110,255,0.28) !important;
        border-radius: 24px !important;
        background: rgba(8,12,32,0.94) !important;
        box-shadow:
            0 0 40px rgba(42,127,255,0.22),
            0 0 90px rgba(116,77,255,0.12) !important;
        color: #ffffff !important;
        font-size: 24px !important;
        line-height: 1.15 !important;
        font-weight: 900 !important;
        letter-spacing: -0.6px !important;
        text-align: center !important;
    }
}

/* Animations */

@keyframes heroScannerPhone {
    0% {
        transform: translateX(-116px);
    }

    50% {
        transform: translateX(20px);
    }

    100% {
        transform: translateX(-116px);
    }
}

@keyframes mobileGuaranteeGradient {
    0%, 100% {
        background-position: 0% 50%;
        opacity: 0.9;
    }

    50% {
        background-position: 100% 50%;
        opacity: 1;
    }
}

@keyframes mobileSwipeHintText {
    0%, 100% {
        opacity: 0.52;
        transform: translateX(-50%);
    }

    35% {
        opacity: 1;
        transform: translateX(calc(-50% - 7px));
    }

    70% {
        opacity: 1;
        transform: translateX(calc(-50% + 7px));
    }
}

@keyframes mobileSwipeHintLine {
    0%, 100% {
        opacity: 0.34;
        transform: translateX(-50%) scaleX(0.68);
    }

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

@keyframes casesSectionDividerGlow {
    0%, 100% {
        opacity: 0.55;
        width: min(900px, 78vw);
    }

    50% {
        opacity: 1;
        width: min(1300px, 92vw);
    }
}

/* ipad.css */
/* iPad Portrait */

@media screen and (min-width: 744px) and (max-width: 1024px) and (orientation: portrait) {
    html,
    body {
        overflow-x: hidden !important;
    }

    section {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    .hero {
        --ipad-portrait-controls-width: 590px;
        --ipad-portrait-card-height: 62px;
        --ipad-portrait-card-gap: 12px;
        --ipad-portrait-card-radius: 17px;
        --ipad-portrait-card-padding-x: 14px;
        --ipad-portrait-icon-size: 25px;
        --ipad-portrait-card-font: 12px;
        --ipad-portrait-content-top: 56px;
        --ipad-portrait-features-top: 500px;
        --ipad-portrait-buttons-top: 18px;
        --ipad-portrait-button-height: 54px;
        --ipad-portrait-button-gap: 16px;
        --ipad-portrait-button-radius: 17px;
        --ipad-portrait-scanner-left: -5px;
        --ipad-portrait-scanner-left-x: -210px;
        --ipad-portrait-scanner-right-x: 90px;
        --ipad-hero-subtitle-offset: -5px;
        --ipad-hero-guarantee-offset: -13px;
        --ipad-hero-rocket-offset: 5px;

        position: relative !important;
        width: 100% !important;
        max-width: 100% !important;
        min-height: 1030px !important;
        height: auto !important;
        padding: 28px 42px 54px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        overflow: hidden !important;
        background:
            radial-gradient(circle at 50% 38%, rgba(28, 78, 165, 0.16), transparent 30%),
            radial-gradient(circle at 50% 56%, rgba(9, 14, 38, 0.90), transparent 43%),
            radial-gradient(circle at 50% 68%, rgba(4, 7, 22, 0.98), transparent 58%),
            linear-gradient(
                180deg,
                #030717 0%,
                #040816 26%,
                #020512 58%,
                #030717 100%
            ) !important;
    }

    .hero::before {
        content: "" !important;
        position: absolute !important;
        left: 50% !important;
        top: 230px !important;
        z-index: 1 !important;
        width: 132vw !important;
        height: 560px !important;
        transform: translateX(-50%) !important;
        background:
            radial-gradient(circle at 50% 44%, rgba(3, 7, 23, 0.16), transparent 35%),
            radial-gradient(circle at 50% 55%, rgba(2, 5, 17, 0.58), transparent 60%),
            linear-gradient(
                180deg,
                rgba(3, 7, 23, 0) 0%,
                rgba(3, 7, 23, 0.34) 34%,
                rgba(3, 7, 23, 0.76) 78%,
                rgba(3, 7, 23, 0) 100%
            ) !important;
        pointer-events: none !important;
    }

    .hero::after {
        content: "" !important;
        position: absolute !important;
        left: 50% !important;
        bottom: 104px !important;
        z-index: 1 !important;
        width: 120vw !important;
        height: 260px !important;
        transform: translateX(-50%) !important;
        background:
            radial-gradient(circle at 50% 50%, rgba(42,127,255,0.06), transparent 34%),
            radial-gradient(circle at 50% 60%, rgba(116,77,255,0.06), transparent 48%) !important;
        filter: blur(8px) !important;
        opacity: 0.68 !important;
        pointer-events: none !important;
    }

    .header {
        position: relative !important;
        z-index: 40 !important;
        width: 100% !important;
        max-width: 860px !important;
        margin: 0 auto !important;
        padding: 0 !important;
        display: grid !important;
        grid-template-columns: auto auto !important;
        grid-template-areas:
            "logo contact"
            "nav nav" !important;
        row-gap: 14px !important;
        column-gap: 20px !important;
        align-items: center !important;
    }

    .logo {
        grid-area: logo !important;
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        font-size: 20px !important;
        line-height: 1 !important;
        white-space: nowrap !important;
    }

    .logo-image {
        width: 56px !important;
        height: 56px !important;
    }

    .nav {
        grid-area: nav !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 20px !important;
        font-size: 13px !important;
        line-height: 1 !important;
        white-space: nowrap !important;
    }

    .nav a {
        font-size: 13px !important;
        line-height: 1 !important;
    }

    .contact-btn {
        grid-area: contact !important;
        justify-self: end !important;
        height: 42px !important;
        padding: 0 16px !important;
        border-radius: 999px !important;
        font-size: 12px !important;
        line-height: 1 !important;
        white-space: nowrap !important;
    }

    .phone-icon {
        width: 14px !important;
        height: 14px !important;
    }

    .hero-content {
        position: relative !important;
        z-index: 10 !important;
        width: 100% !important;
        max-width: 720px !important;
        margin: 0 auto !important;
        padding-top: var(--ipad-portrait-content-top) !important;
    }

    .hero-left {
        position: relative !important;
        width: 100% !important;
        max-width: 720px !important;
        margin: 0 auto !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
    }

    .hero-left h1 {
        position: relative !important;
        z-index: 12 !important;
        width: 100% !important;
        max-width: 700px !important;
        min-height: 126px !important;
        margin: 0 auto !important;
        padding: 0 !important;
        font-size: 0 !important;
        line-height: 0 !important;
        letter-spacing: 0 !important;
        color: transparent !important;
        text-align: center !important;
    }

    .hero-left h1 br,
    .hero-left h1 span {
        display: none !important;
    }

    .hero-left h1::before {
        content: "Создаём цифровые решения\Aдля бизнеса: сайты, платформы,\Aприложения, Telegram-боты" !important;
        display: block !important;
        width: 100% !important;
        max-width: 700px !important;
        margin: 0 auto !important;
        white-space: pre !important;
        font-size: 39px !important;
        line-height: 1.07 !important;
        letter-spacing: -1px !important;
        font-weight: 900 !important;
        color: #ffffff !important;
        text-align: center !important;
    }

    .hero-subtitle {
        position: relative !important;
        z-index: 12 !important;
        width: 100% !important;
        max-width: 640px !important;
        margin: 28px auto 0 !important;
        transform: translateY(var(--ipad-hero-subtitle-offset)) !important;
        font-size: 15px !important;
        line-height: 1.34 !important;
        color: rgba(255,255,255,0.70) !important;
        text-align: center !important;
    }
    
    .hero-subtitle::after {
        content: "" !important;
        position: absolute !important;
        top: -14px !important;
        left: 50% !important;
        width: 120px !important;
        height: 3px !important;
        border-radius: 999px !important;
        background:
            linear-gradient(
                90deg,
                transparent,
                #2a7fff,
                #744dff,
                transparent
            ) !important;
        box-shadow:
            0 0 18px rgba(65,119,255,0.56),
            0 0 30px rgba(116,77,255,0.30) !important;
        animation: ipadPortraitHeroScanner 3s ease-in-out infinite !important;
        pointer-events: none !important;
    }

    .hero-guarantee-gradient {
        display: none !important;
    }

    .hero-left::after {
        content: "ГАРАНТИЯ РЕЗУЛЬТАТА ИЛИ ВЕРНЁМ ОПЛАТУ" !important;
        position: absolute !important;
        left: 50% !important;
        top: calc(682px + var(--ipad-hero-guarantee-offset)) !important;
        z-index: 24 !important;
        width: 100% !important;
        max-width: 520px !important;
        transform: translateX(-50%) !important;
        display: block !important;
        background:
            linear-gradient(
                100deg,
                rgba(255,255,255,0.92) 0%,
                rgba(120,180,255,0.98) 32%,
                rgba(255,255,255,1) 52%,
                rgba(42,127,255,0.98) 74%,
                rgba(255,255,255,0.9) 100%
            ) !important;
        background-size: 210% 100% !important;
        -webkit-background-clip: text !important;
        background-clip: text !important;
        font-size: 16px !important;
        line-height: 1.2 !important;
        font-weight: 900 !important;
        letter-spacing: 0.5px !important;
        text-transform: uppercase !important;
        color: transparent !important;
        text-align: center !important;
        text-shadow:
            0 0 16px rgba(42,127,255,0.26),
            0 0 34px rgba(255,255,255,0.08) !important;
        animation: ipadGuaranteeGradient 4.8s ease-in-out infinite !important;
        pointer-events: none !important;
    }

    .hero > .hero-rocket-wrap {
        position: absolute !important;
        z-index: 2 !important;
        left: 50% !important;
        top: calc(305px + var(--ipad-hero-rocket-offset)) !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 500px !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        transform: translateX(-50%) !important;
        pointer-events: none !important;
        overflow: visible !important;
    }

    .hero > .hero-rocket-wrap::before,
    .hero > .hero-rocket-wrap::after {
        content: none !important;
        display: none !important;
    }

    .hero > .hero-rocket-wrap .hero-rocket {
        position: relative !important;
        z-index: 2 !important;
        width: min(104vw, 900px) !important;
        max-width: 900px !important;
        max-height: 500px !important;
        height: auto !important;
        margin: 0 !important;
        object-fit: contain !important;
        object-position: center !important;
        transform: none !important;
        opacity: 0.96 !important;
        filter:
            drop-shadow(0 0 18px rgba(42,127,255,0.18))
            drop-shadow(0 22px 42px rgba(0,0,0,0.42)) !important;
        -webkit-mask-image: none !important;
        mask-image: none !important;
    }

    .hero .features {
        position: relative !important;
        z-index: 20 !important;
        width: 100% !important;
        max-width: var(--ipad-portrait-controls-width) !important;
        margin: var(--ipad-portrait-features-top) auto 0 !important;
        padding: 0 !important;
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: var(--ipad-portrait-card-gap) !important;
        justify-content: center !important;
        align-items: stretch !important;
    }

    .hero .features > .feature-card {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        height: var(--ipad-portrait-card-height) !important;
        min-height: var(--ipad-portrait-card-height) !important;
        max-height: var(--ipad-portrait-card-height) !important;
        padding: 0 var(--ipad-portrait-card-padding-x) !important;
        border-radius: var(--ipad-portrait-card-radius) !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 10px !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        transform: none !important;
    }

    .hero .features > .feature-card::before {
        border-radius: var(--ipad-portrait-card-radius) !important;
    }

    .hero .features > .feature-card::after {
        inset: 1px !important;
        border-radius: calc(var(--ipad-portrait-card-radius) - 1px) !important;
    }

    .hero .features > .feature-card .feature-img {
        width: var(--ipad-portrait-icon-size) !important;
        height: var(--ipad-portrait-icon-size) !important;
        flex: 0 0 var(--ipad-portrait-icon-size) !important;
    }

    .hero .features > .feature-card .feature-text {
        width: auto !important;
        max-width: 100px !important;
        font-size: var(--ipad-portrait-card-font) !important;
        line-height: 1.06 !important;
        font-weight: 800 !important;
        text-align: left !important;
    }

    .hero-buttons {
        position: relative !important;
        z-index: 20 !important;
        width: 100% !important;
        max-width: var(--ipad-portrait-controls-width) !important;
        margin: var(--ipad-portrait-buttons-top) auto 0 !important;
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: var(--ipad-portrait-button-gap) !important;
    }

    .primary-btn,
    .secondary-btn {
        width: 100% !important;
        height: var(--ipad-portrait-button-height) !important;
        min-height: var(--ipad-portrait-button-height) !important;
        max-height: var(--ipad-portrait-button-height) !important;
        border-radius: var(--ipad-portrait-button-radius) !important;
        font-size: 15.5px !important;
        line-height: 1 !important;
    }

    .hero-button-note {
        position: relative !important;
        z-index: 20 !important;
        margin: 12px auto 0 !important;
        font-size: 13px !important;
        line-height: 1.25 !important;
    }

    .services-label,
    .process-label,
    .solutions-label,
    .audience-label,
    .cases-label,
    .about-label,
    .contacts-label,
    .section-label {
        position: relative !important;
        inset: auto !important;
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        margin: 0 0 22px !important;
        padding: 0 !important;
        font-size: 13px !important;
        line-height: 1 !important;
        font-weight: 800 !important;
        letter-spacing: 0.5px !important;
        color: rgba(42,127,255,0.96) !important;
        text-align: left !important;
    }

    .services-label span,
    .process-label span,
    .solutions-label span,
    .audience-label span,
    .cases-label span,
    .about-label span,
    .contacts-label span,
    .section-label span {
        display: inline-block !important;
        width: 9px !important;
        height: 9px !important;
        border-radius: 50% !important;
        background: #2a7fff !important;
        box-shadow: 0 0 14px rgba(42,127,255,0.8) !important;
    }

    .services {
        min-height: auto !important;
        padding: 90px 44px 90px !important;
        justify-content: flex-start !important;
    }

    .services-top {
        width: 100% !important;
        max-width: 920px !important;
        margin: 0 auto 36px !important;
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 46px !important;
        align-items: end !important;
    }

    .services-top > div,
    .services-top > p {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
    }

    .services h2 {
        max-width: 440px !important;
        font-size: 44px !important;
        line-height: 0.98 !important;
        letter-spacing: -1.5px !important;
    }

    .services-top p {
        font-size: 16px !important;
        line-height: 1.42 !important;
    }

    .service-cards {
        width: 100% !important;
        max-width: 920px !important;
        margin: 0 auto !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 20px !important;
    }

    .service-card {
        min-height: 330px !important;
        padding: 28px 26px !important;
        border-radius: 24px !important;
    }

    .service-card::after {
        border-radius: 23px !important;
    }

    .service-icon {
        width: 86px !important;
        height: 86px !important;
        margin-bottom: 24px !important;
        border-radius: 24px !important;
    }

    .service-icon img {
        width: 96px !important;
        height: 96px !important;
    }

    .service-card h3 {
        font-size: 25px !important;
        line-height: 1.04 !important;
    }

    .service-card p {
        font-size: 15px !important;
        line-height: 1.42 !important;
    }

    .services-gradient-text {
        max-width: 760px !important;
        margin: 42px auto 0 !important;
    }

    .process {
        min-height: auto !important;
        padding: 90px 44px 90px !important;
        justify-content: flex-start !important;
    }

    .process-top {
        width: 100% !important;
        max-width: 920px !important;
        margin: 0 auto 44px !important;
    }

    .process-title-wrap {
        text-align: center !important;
    }

    .process h2 {
        font-size: 48px !important;
        line-height: 1 !important;
        letter-spacing: -1.6px !important;
        margin-bottom: 16px !important;
    }

    .process-top p {
        max-width: 660px !important;
        font-size: 17px !important;
        line-height: 1.45 !important;
    }

    .process-cards {
        width: 100% !important;
        max-width: 920px !important;
        margin: 0 auto !important;
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 18px !important;
        transform: none !important;
    }

    .process-card {
        height: 315px !important;
        min-height: 315px !important;
        max-height: 315px !important;
        padding: 24px 18px 22px !important;
        border-radius: 20px !important;
    }

    .process-card::after {
        border-radius: 19px !important;
    }

    .process-number {
        font-size: 38px !important;
    }

    .process-icon {
        width: 72px !important;
        height: 72px !important;
        min-width: 72px !important;
        min-height: 72px !important;
        margin: 18px 0 20px !important;
    }

    .process-icon img {
        width: 36px !important;
        height: 36px !important;
    }

    .process-card h3 {
        font-size: 18px !important;
        line-height: 1.04 !important;
        margin-bottom: 12px !important;
    }

    .process-card p {
        font-size: 12.5px !important;
        line-height: 1.32 !important;
    }

    .process-btn {
        width: 360px !important;
        height: 64px !important;
        margin: 38px auto 0 !important;
        font-size: 18px !important;
        border-radius: 18px !important;
    }

    .solutions {
        min-height: auto !important;
        padding: 90px 44px 90px !important;
        justify-content: flex-start !important;
    }

    .solutions-label,
    .section-label.solutions-label {
        margin-bottom: 34px !important;
    }

    .solutions-top {
        width: 100% !important;
        max-width: 920px !important;
        margin: 0 auto 34px !important;
        display: grid !important;
        grid-template-columns: 0.95fr 1.05fr !important;
        gap: 56px !important;
        align-items: end !important;
        transform: none !important;
    }

    .solutions-top h2 {
        max-width: 390px !important;
        margin: 0 !important;
        font-size: 44px !important;
        line-height: 1 !important;
        letter-spacing: -1.6px !important;
    }

    .solutions-top p {
        max-width: 430px !important;
        margin: 0 0 8px !important;
        font-size: 16px !important;
        line-height: 1.48 !important;
    }

    .solutions-table {
        width: 100% !important;
        max-width: 920px !important;
        min-height: auto !important;
        margin: 0 auto !important;
        border-radius: 24px !important;
        overflow: hidden !important;
    }

    .solutions-head div {
        min-height: 76px !important;
        font-size: 26px !important;
    }

    .solutions-head span {
        font-size: 24px !important;
    }

    .solutions-head-gif {
        width: 46px !important;
        height: 46px !important;
    }

    .solutions-row > div {
        min-height: 72px !important;
        padding: 18px 20px !important;
        font-size: 15.5px !important;
        line-height: 1.35 !important;
    }

    .audience {
        min-height: auto !important;
        padding: 90px 44px 80px !important;
    }

    .audience-top {
        max-width: 920px !important;
        margin: 0 auto 34px !important;
        text-align: center !important;
    }

    .audience-title {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 4px !important;
        white-space: normal !important;
        text-align: center !important;
    }

    .audience-title-main,
    .audience-title-sub {
        display: block !important;
        font-size: 42px !important;
        line-height: 1 !important;
        letter-spacing: -1.6px !important;
        text-align: center !important;
    }

    .audience-top p {
        max-width: 760px !important;
        font-size: 16px !important;
        line-height: 1.4 !important;
    }

    .audience-grid,
    .audience-grid.mobile-card-deck {
        position: relative !important;
        width: 100% !important;
        max-width: 620px !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 0 auto !important;
        padding: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 16px !important;
        overflow: visible !important;
        scroll-snap-type: none !important;
        touch-action: auto !important;
        user-select: auto !important;
        -webkit-user-select: auto !important;
    }

    .audience-grid.mobile-card-deck .deck-card,
    .audience-grid.mobile-card-deck .deck-card.is-active,
    .audience-grid.mobile-card-deck .deck-card.is-next,
    .audience-grid.mobile-card-deck .deck-card.is-after,
    .audience-grid.mobile-card-deck .deck-card.is-prev,
    .audience-grid.mobile-card-deck .deck-card.is-hidden,
    .audience-grid.mobile-card-deck .deck-card.is-leaving,
    .audience-item {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        z-index: 1 !important;
        flex: none !important;
        width: 100% !important;
        max-width: 620px !important;
        height: 190px !important;
        min-height: 190px !important;
        max-height: 190px !important;
        margin: 0 !important;
        opacity: 1 !important;
        visibility: visible !important;
        filter: none !important;
        transform: none !important;
        pointer-events: auto !important;
        transition: none !important;
        animation: none !important;
        scroll-snap-align: none !important;
    }

    .audience-item {
        display: grid !important;
        grid-template-columns: 210px 1fr !important;
        border-radius: 22px !important;
        overflow: hidden !important;
        box-shadow:
            0 18px 34px rgba(0,0,0,0.28),
            0 0 28px rgba(42,127,255,0.08) !important;
    }

    .audience-grid .audience-item:last-child:nth-child(odd) {
        grid-column: auto !important;
        width: 100% !important;
        max-width: 620px !important;
        justify-self: auto !important;
    }

    .audience-photo {
        width: 100% !important;
        height: 100% !important;
        overflow: hidden !important;
    }

    .audience-photo img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center !important;
    }

    .audience-info {
        position: relative !important;
        width: 100% !important;
        min-width: 0 !important;
        padding: 22px 70px 22px 22px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        text-align: left !important;
    }

    .audience-info h3 {
        max-width: 300px !important;
        margin: 0 0 8px !important;
        font-size: 21px !important;
        line-height: 1.05 !important;
        letter-spacing: -0.4px !important;
        font-weight: 900 !important;
        text-wrap: balance !important;
    }

    .audience-info p {
        max-width: 310px !important;
        margin: 0 !important;
        font-size: 13px !important;
        line-height: 1.32 !important;
        color: rgba(255,255,255,0.70) !important;
        text-wrap: balance !important;
    }

    .audience-icon {
        position: absolute !important;
        right: 18px !important;
        bottom: 18px !important;
        width: 44px !important;
        height: 44px !important;
        object-fit: contain !important;
    }

    .audience-why {
        width: 100% !important;
        max-width: 620px !important;
        margin: 42px auto 0 !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 26px 30px !important;
    }

    .audience-footnote {
        width: 100% !important;
        max-width: 620px !important;
        margin: 34px auto 0 !important;
    }

    .cases {
        position: relative !important;
        width: 100% !important;
        max-width: 100% !important;
        min-height: auto !important;
        padding: 90px 0 96px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        overflow: visible !important;
        background:
            radial-gradient(circle at 50% 16%, rgba(42,127,255,0.12), transparent 32%),
            linear-gradient(
                180deg,
                rgba(7,11,31,0) 0%,
                rgba(8,13,38,0.82) 24%,
                rgba(6,10,29,0.92) 72%,
                rgba(7,11,31,0) 100%
            ) !important;
    }

    .cases {
        position: relative !important;
        width: 100% !important;
        max-width: 100% !important;
        min-height: auto !important;
        padding: 90px 0 96px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        overflow: visible !important;
        background:
            radial-gradient(circle at 50% 16%, rgba(42,127,255,0.12), transparent 32%),
            linear-gradient(
                180deg,
                rgba(7,11,31,0) 0%,
                rgba(8,13,38,0.82) 24%,
                rgba(6,10,29,0.92) 72%,
                rgba(7,11,31,0) 100%
            ) !important;
    }

    .cases::before {
        content: none !important;
        display: none !important;
    }

    .cases::after {
        content: "" !important;
        position: absolute !important;
        top: 0 !important;
        left: 50% !important;
        z-index: 4 !important;
        width: min(900px, 78vw) !important;
        height: 4px !important;
        transform: translateX(-50%) !important;
        border-radius: 999px !important;
        background: linear-gradient(
            90deg,
            transparent,
            rgba(42,127,255,0.95),
            rgba(255,255,255,0.85),
            rgba(116,77,255,0.95),
            transparent
        ) !important;
        box-shadow:
            0 0 28px rgba(42,127,255,0.95),
            0 0 80px rgba(116,77,255,0.45) !important;
        opacity: 0.95 !important;
        animation: casesSectionDividerGlow 4s ease-in-out infinite !important;
        pointer-events: none !important;
    }

    .cases-label,
    .section-label.cases-label {
        position: relative !important;
        z-index: 6 !important;
        width: calc(100% - 88px) !important;
        max-width: 920px !important;
        margin: 0 auto 22px !important;
    }

    .cases-top {
        position: relative !important;
        z-index: 6 !important;
        width: calc(100% - 88px) !important;
        max-width: 920px !important;
        margin: 0 auto 34px !important;
        text-align: center !important;
    }

    .cases-top h2 {
        max-width: 760px !important;
        margin: 0 auto 14px !important;
        font-size: 48px !important;
        line-height: 1 !important;
        letter-spacing: -1.6px !important;
        text-align: center !important;
        text-shadow:
            0 0 22px rgba(42,127,255,0.18),
            0 0 38px rgba(116,77,255,0.12) !important;
    }

    .cases-top p {
        max-width: 680px !important;
        margin: 0 auto !important;
        font-size: 16px !important;
        line-height: 1.4 !important;
        color: rgba(255,255,255,0.70) !important;
        text-align: center !important;
        text-wrap: balance !important;
    }

    .cases-grid,
    .cases-grid.mobile-card-deck {
        --deck-width: 58vw;
        --deck-max-width: 520px;
        --deck-side-shift: 34px;
        --deck-back-shift: 66px;
        --deck-next-y: 18px;
        --deck-after-y: 36px;
        --deck-next-scale: 0.94;
        --deck-after-scale: 0.88;
        --deck-next-opacity: 0.72;
        --deck-after-opacity: 0.42;
        --deck-speed: 420ms;

        position: relative !important;
        z-index: 6 !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto 74px !important;
        padding: 0 !important;
        display: block !important;
        grid-template-columns: none !important;
        gap: 0 !important;
        overflow: visible !important;
        scroll-snap-type: none !important;
        scroll-padding-left: 0 !important;
        -webkit-overflow-scrolling: auto !important;
        scrollbar-width: none !important;
        touch-action: pan-y !important;
        user-select: none !important;
        -webkit-user-select: none !important;
        -webkit-tap-highlight-color: transparent !important;
    }

    .cases-grid::-webkit-scrollbar {
        display: none !important;
    }

    .cases-grid.mobile-card-deck .deck-card {
        position: absolute !important;
        left: 50% !important;
        top: 0 !important;
        width: var(--deck-width) !important;
        max-width: var(--deck-max-width) !important;
        margin: 0 !important;
        transition:
            transform var(--deck-speed) cubic-bezier(0.22, 1, 0.36, 1),
            opacity var(--deck-speed) ease,
            filter var(--deck-speed) ease,
            box-shadow var(--deck-speed) ease !important;
        will-change: transform, opacity !important;
        pointer-events: none !important;
        scroll-snap-align: none !important;
    }

    .cases-grid.mobile-card-deck .deck-card.is-active {
        z-index: 5 !important;
        opacity: 1 !important;
        visibility: visible !important;
        filter: none !important;
        transform:
            translateX(-50%)
            translateY(0)
            scale(1) !important;
        pointer-events: auto !important;
    }

    .cases-grid.mobile-card-deck .deck-card.is-next {
        z-index: 4 !important;
        opacity: var(--deck-next-opacity) !important;
        visibility: visible !important;
        filter: saturate(0.92) brightness(0.88) !important;
        transform:
            translateX(calc(-50% + var(--deck-side-shift)))
            translateY(var(--deck-next-y))
            scale(var(--deck-next-scale)) !important;
        pointer-events: none !important;
    }

    .cases-grid.mobile-card-deck .deck-card.is-after {
        z-index: 3 !important;
        opacity: var(--deck-after-opacity) !important;
        visibility: visible !important;
        filter: saturate(0.82) brightness(0.76) !important;
        transform:
            translateX(calc(-50% + var(--deck-back-shift)))
            translateY(var(--deck-after-y))
            scale(var(--deck-after-scale)) !important;
        pointer-events: none !important;
    }

    .cases-grid.mobile-card-deck .deck-card.is-prev,
    .cases-grid.mobile-card-deck .deck-card.is-hidden {
        z-index: 1 !important;
        opacity: 0 !important;
        visibility: hidden !important;
        filter: blur(1px) brightness(0.5) !important;
        transform:
            translateX(calc(-50% + var(--deck-back-shift)))
            translateY(var(--deck-after-y))
            scale(0.80) !important;
        pointer-events: none !important;
    }

    .cases-grid.mobile-card-deck .deck-card.is-leaving {
        z-index: 6 !important;
        opacity: 0 !important;
        visibility: visible !important;
        filter: saturate(0.78) brightness(0.72) !important;
        transform:
            translateX(calc(-50% + 82px))
            translateY(44px)
            scale(0.84)
            rotate(1.5deg) !important;
        pointer-events: none !important;
    }

    .cases-grid.mobile-card-deck .deck-card::before,
    .cases-grid.mobile-card-deck .deck-card::after {
        pointer-events: none !important;
    }

    .cases-grid.mobile-card-deck .deck-card:not(.is-active)::before,
    .cases-grid.mobile-card-deck .case-card::before,
    .cases-grid.mobile-card-deck .case-card::after {
        content: none !important;
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
    }

    .case-card {
        position: relative !important;
        flex: none !important;
        width: var(--deck-width) !important;
        max-width: var(--deck-max-width) !important;
        min-height: 690px !important;
        padding: 22px !important;
        border-radius: 24px !important;
        display: flex !important;
        flex-direction: column !important;
        outline: none !important;
        overflow: hidden !important;
        scroll-snap-align: none !important;
        box-shadow:
            0 22px 42px rgba(0,0,0,0.32),
            0 0 38px rgba(42,127,255,0.11) !important;
    }

    .case-card,
    .case-card *,
    .case-head,
    .case-body,
    .case-content,
    .case-image-placeholder {
        outline: none !important;
    }

    .case-card .case-head,
    .case-card .case-body,
    .case-card .case-content {
        border: none !important;
        box-shadow: none !important;
    }

    .case-head {
        display: grid !important;
        grid-template-columns: 104px 1fr !important;
        gap: 16px !important;
        margin-bottom: 18px !important;
        align-items: center !important;
    }

    .case-image-placeholder {
        width: 104px !important;
        height: 104px !important;
        border-radius: 20px !important;
    }

    .case-number {
        margin-bottom: 8px !important;
        font-size: 11px !important;
        line-height: 1 !important;
        letter-spacing: 1px !important;
    }

    .case-card h3 {
        margin: 0 0 8px !important;
        font-size: 25px !important;
        line-height: 1.04 !important;
        letter-spacing: -0.55px !important;
        text-wrap: balance !important;
    }

    .case-subtitle {
        font-size: 12.5px !important;
        line-height: 1.3 !important;
    }

    .case-card h4 {
        margin-top: 14px !important;
        margin-bottom: 7px !important;
        font-size: 15px !important;
        line-height: 1.12 !important;
    }

    .case-card p {
        margin: 0 !important;
        font-size: 12.5px !important;
        line-height: 1.32 !important;
        color: rgba(255,255,255,0.68) !important;
    }

    .case-card ul {
        gap: 5px !important;
        margin: 0 0 8px !important;
        padding: 0 !important;
    }

    .case-card li {
        font-size: 12.5px !important;
        line-height: 1.32 !important;
    }

    .case-card li::before {
        margin-right: 6px !important;
    }

    /* iPad Project Action */

    .case-action {
        width: fit-content !important;
        min-width: 0 !important;
        min-height: 40px !important;

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

        padding: 10px 16px !important;

        align-self: center !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 7px !important;

        border-radius: 11px !important;

        font-size: 11.5px !important;
        line-height: 1 !important;
        font-weight: 800 !important;
        letter-spacing: 0.25px !important;

        white-space: nowrap !important;
    }

    .case-action-link {
        display: inline-flex !important;

        color: rgba(255,255,255,0.86) !important;
        text-decoration: none !important;

        border: 1px solid rgba(47,124,255,0.34) !important;

        background:
            linear-gradient(
                135deg,
                rgba(47,124,255,0.10),
                rgba(116,77,255,0.06)
            ) !important;

        box-shadow:
            0 0 16px rgba(47,124,255,0.07),
            inset 0 0 18px rgba(47,124,255,0.035) !important;

        -webkit-tap-highlight-color: transparent !important;

        transition:
            color 150ms ease,
            border-color 150ms ease,
            background 150ms ease,
            box-shadow 150ms ease,
            transform 120ms ease !important;
    }

    .case-action-link:hover {
        color: #ffffff !important;

        border-color: rgba(47,124,255,0.56) !important;

        background:
            linear-gradient(
                135deg,
                rgba(47,124,255,0.15),
                rgba(116,77,255,0.09)
            ) !important;

        box-shadow:
            0 0 20px rgba(47,124,255,0.12),
            inset 0 0 18px rgba(116,77,255,0.045) !important;

        transform: translateY(-1px) !important;
    }

    .case-action-link:active {
        color: #ffffff !important;

        border-color: rgba(83,139,255,0.68) !important;

        background:
            linear-gradient(
                135deg,
                rgba(47,124,255,0.19),
                rgba(116,77,255,0.12)
            ) !important;

        transform: scale(0.98) !important;
    }

    .case-action-link:focus-visible {
        outline: 2px solid rgba(47,124,255,0.90) !important;
        outline-offset: 3px !important;
    }

    .case-action-status {
        display: inline-flex !important;

        color: rgba(255,255,255,0.48) !important;

        border: 1px solid rgba(255,255,255,0.10) !important;
        background: rgba(255,255,255,0.025) !important;

        box-shadow:
            inset 0 0 16px rgba(116,77,255,0.025) !important;

        cursor: default !important;

        user-select: none !important;
        -webkit-user-select: none !important;

        pointer-events: none !important;
    }

    .case-action-status-dot {
        width: 7px !important;
        min-width: 7px !important;
        height: 7px !important;
        flex: 0 0 7px !important;

        border-radius: 50% !important;

        background: rgba(116,77,255,0.82) !important;

        box-shadow:
            0 0 9px rgba(116,77,255,0.54),
            0 0 16px rgba(47,124,255,0.26) !important;
    }

    .cases-grid.mobile-card-deck::after {
        content: "" !important;
        position: absolute !important;
        left: 50% !important;
        top: calc(100% - 12px) !important;
        z-index: 39 !important;
        width: 92px !important;
        height: 4px !important;
        transform: translateX(-50%) !important;
        border-radius: 999px !important;
        background:
            linear-gradient(
                90deg,
                transparent 0%,
                rgba(42,127,255,0.24) 18%,
                rgba(255,255,255,0.82) 50%,
                rgba(116,77,255,0.28) 82%,
                transparent 100%
            ) !important;
        box-shadow:
            0 0 14px rgba(42,127,255,0.42),
            0 0 26px rgba(116,77,255,0.22) !important;
        animation: ipadSwipeHintLine 2.7s ease-in-out infinite !important;
        pointer-events: none !important;
    }

    .about {
        width: 100% !important;
        max-width: 100% !important;
        min-height: auto !important;
        height: auto !important;
        padding: 90px 44px 90px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        overflow-x: hidden !important;
        overflow-y: visible !important;
    }

    .about-hero {
        width: 100% !important;
        max-width: 720px !important;
        margin: 0 auto !important;
        padding: 0 !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 46px !important;
        align-items: start !important;
        overflow: visible !important;
    }

    .about-left {
        width: 100% !important;
        max-width: 100% !important;
    }

    .about-left h2 {
        max-width: 680px !important;
        margin: 0 0 18px !important;
        font-size: 48px !important;
        line-height: 1 !important;
        letter-spacing: -1.6px !important;
    }

    .about-left p {
        max-width: 680px !important;
        margin: 0 !important;
        font-size: 17px !important;
        line-height: 1.48 !important;
        color: rgba(255,255,255,0.72) !important;
    }

    .about-line {
        width: 76px !important;
        height: 2px !important;
        margin: 24px 0 !important;
    }

    .about-stats {
        width: 100% !important;
        max-width: 680px !important;
        margin: 0 !important;
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 0 !important;
    }

    .about-stats strong {
        font-size: 40px !important;
    }

    .about-stats span {
        font-size: 13px !important;
    }

    .team-block {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        overflow: visible !important;
    }

    .team-block > h3 {
        width: 100% !important;
        margin: 0 auto 24px !important;
        font-size: 42px !important;
        line-height: 1 !important;
        letter-spacing: -1.4px !important;
        font-weight: 900 !important;
        text-align: center !important;
    }

    .team-cards {
        width: 100% !important;
        max-width: 620px !important;
        margin: 0 auto !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 18px !important;
        overflow: visible !important;
    }

    .team-card {
        width: 100% !important;
        min-height: 210px !important;
        padding: 22px !important;
        display: grid !important;
        grid-template-columns: 160px 1fr !important;
        gap: 24px !important;
        align-items: center !important;
        border-radius: 22px !important;
        overflow: hidden !important;
    }

    .team-card::before,
    .team-card::after {
        pointer-events: none !important;
    }

    .team-card::after {
        border-radius: 21px !important;
    }

    .team-card img {
        width: 160px !important;
        height: 180px !important;
        border-radius: 20px !important;
        object-fit: cover !important;
    }

    .team-card:nth-child(1) img {
        object-position: center 10% !important;
    }

    .team-card:nth-child(2) img {
        object-position: center 70% !important;
    }

    .team-info {
        width: 100% !important;
        min-width: 0 !important;
    }

    .team-info h4 {
        margin: 0 0 6px !important;
        font-size: 27px !important;
        line-height: 1 !important;
        letter-spacing: -0.5px !important;
    }

    .team-info span {
        margin: 0 0 12px !important;
        font-size: 13px !important;
        line-height: 1.25 !important;
        color: rgba(255,255,255,0.70) !important;
    }

    .team-info p {
        margin: 0 !important;
        font-size: 13.5px !important;
        line-height: 1.42 !important;
        color: rgba(255,255,255,0.70) !important;
    }

    .about-values-wrap {
        position: relative !important;
        z-index: 5 !important;
        width: 100% !important;
        max-width: 920px !important;
        margin: 54px auto 0 !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    .about-section-title {
        position: relative !important;
        z-index: 6 !important;
        display: block !important;
        width: 100% !important;
        margin: 0 auto 24px !important;
        font-size: 42px !important;
        line-height: 1 !important;
        letter-spacing: -1.4px !important;
        font-weight: 900 !important;
        color: #ffffff !important;
        text-align: center !important;
    }

    .about-values-wrap::before,
    .about-values-wrap::after {
        content: none !important;
        display: none !important;
    }

    .values-grid,
    .values-grid.mobile-card-deck {
        position: relative !important;
        z-index: 6 !important;
        width: 100% !important;
        max-width: 920px !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 0 auto !important;
        padding: 0 !important;
        display: grid !important;
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
        gap: 14px !important;
        overflow: visible !important;
        touch-action: auto !important;
        user-select: auto !important;
        -webkit-user-select: auto !important;
    }

    .values-grid::-webkit-scrollbar {
        display: none !important;
    }

    .values-grid::before,
    .values-grid::after {
        content: none !important;
        display: none !important;
    }

    .values-grid.mobile-card-deck .deck-card,
    .values-grid.mobile-card-deck .deck-card.is-active,
    .values-grid.mobile-card-deck .deck-card.is-next,
    .values-grid.mobile-card-deck .deck-card.is-after,
    .values-grid.mobile-card-deck .deck-card.is-prev,
    .values-grid.mobile-card-deck .deck-card.is-hidden,
    .values-grid.mobile-card-deck .deck-card.is-leaving,
    .value-card {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        z-index: 1 !important;
        flex: none !important;
        width: 100% !important;
        max-width: none !important;
        height: 148px !important;
        min-height: 148px !important;
        max-height: 148px !important;
        margin: 0 !important;
        padding: 12px 9px !important;
        border-radius: 18px !important;
        scroll-snap-align: none !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        opacity: 1 !important;
        visibility: visible !important;
        filter: none !important;
        transform: none !important;
        transition: none !important;
        animation: none !important;
        pointer-events: auto !important;
        box-shadow:
            0 16px 28px rgba(0,0,0,0.24),
            0 0 24px rgba(42,127,255,0.07) !important;
    }

    .values-grid .value-card:nth-child(5) {
        grid-column: auto !important;
        width: 100% !important;
        max-width: none !important;
        justify-self: auto !important;
    }

    .value-card::before {
        content: none !important;
        display: none !important;
    }

    .value-card::after {
        border-radius: 17px !important;
    }

    .value-card:hover {
        transform: none !important;
    }

    .value-icon-img {
        width: 48px !important;
        height: 48px !important;
        margin: 0 auto 7px !important;
        display: block !important;
        object-fit: contain !important;
    }

    .value-card h4 {
        width: 100% !important;
        max-width: 130px !important;
        margin: 0 auto 5px !important;
        font-size: 14px !important;
        line-height: 1.02 !important;
        letter-spacing: -0.25px !important;
        text-align: center !important;
        text-wrap: balance !important;
    }

    .value-card p {
        width: 100% !important;
        max-width: 130px !important;
        margin: 0 auto !important;
        font-size: 9.5px !important;
        line-height: 1.18 !important;
        color: rgba(255,255,255,0.72) !important;
        text-align: center !important;
        text-wrap: balance !important;
    }

    .contacts {
        min-height: auto !important;
        padding: 72px 44px 100px !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 34px !important;
        overflow: hidden !important;
        text-align: center !important;
    }

    .contacts-left {
        width: 100% !important;
        max-width: 720px !important;
        margin: 0 auto !important;
        text-align: center !important;
    }

    .contacts-label,
    .section-label.contacts-label {
        width: 100% !important;
        margin: 0 0 12px !important;
        justify-content: flex-start !important;
        text-align: left !important;
    }

    .contacts-left h2 {
        max-width: 680px !important;
        margin: 0 auto 18px !important;
        font-size: 48px !important;
        line-height: 0.98 !important;
        letter-spacing: -1.6px !important;
        text-align: center !important;
    }

    .contacts-left p {
        max-width: 600px !important;
        min-height: 46px !important;
        margin: 0 auto 30px !important;
        font-size: 0 !important;
        line-height: 0 !important;
        text-align: center !important;
    }

    .contacts-left p::before {
        content: "Напиши нам любым удобным способом, ответим,\Aобсудим задачу и предложим решение" !important;
        display: block !important;
        white-space: pre !important;
        font-size: 16px !important;
        line-height: 1.45 !important;
        color: rgba(255,255,255,0.72) !important;
        text-align: center !important;
    }

    .contacts-links {
        width: 100% !important;
        max-width: 640px !important;
        margin: 0 auto !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 16px !important;
    }

    .contact-item {
        width: 100% !important;
        max-width: 640px !important;
        min-height: 84px !important;
        padding: 20px 22px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 14px !important;
        text-align: left !important;
    }

    .contact-item div {
        min-width: 0 !important;
        text-align: left !important;
    }

    .contact-item strong,
    .contact-item span {
        display: block !important;
        text-align: left !important;
    }

    .contacts-card {
        width: 100% !important;
        max-width: 640px !important;
        margin: 0 auto !important;
        transform: none !important;
        padding: 34px !important;
        text-align: center !important;
    }

    .contacts-card h3 {
        font-size: 34px !important;
        text-align: center !important;
    }

    .contacts-card p {
        text-align: center !important;
    }

    .contacts-btn {
        height: 64px !important;
    }

    .contact-panel-content {
        align-items: center !important;
        text-align: left !important;
    }

    .contact-link {
        justify-content: flex-start !important;
        text-align: left !important;
    }

    .contact-link span {
        text-align: left !important;
    }
}

/* iPad Landscape */

@media screen and (min-width: 1025px) and (max-width: 1366px) {
    html {
        scroll-padding-top: 88px !important;
    }

    .header {
        margin-top: 8px !important;
        gap: 16px !important;
        align-items: center !important;
    }

    .logo {
        font-size: 12px !important;
        gap: 9px !important;
    }

    .logo-image {
        width: 42px !important;
        height: 42px !important;
    }

    .nav {
        display: flex !important;
        align-items: center !important;
        gap: 16px !important;
        font-size: 13px !important;
        line-height: 1 !important;
        white-space: nowrap !important;
    }

    .contact-btn {
        height: 42px !important;
        padding: 0 14px !important;
        font-size: 12px !important;
        white-space: nowrap !important;
    }

    .phone-icon {
        width: 14px !important;
        height: 14px !important;
    }

    .hero-left h1 {
        font-size: clamp(40px, 3.8vw, 52px) !important;
        line-height: 1.04 !important;
    }

    .hero-subtitle {
        font-size: clamp(14px, 1.1vw, 17px) !important;
    }

    .hero-rocket {
        width: min(50vw, 720px) !important;
    }

    #about,
    #process,
    #projects,
    #tasks,
    #approach,
    #contacts,
    section,
    .section,
    .about,
    .process,
    .projects,
    .tasks,
    .approach,
    .contacts {
        scroll-margin-top: 96px !important;
    }

    .about,
    .process,
    .projects,
    .tasks,
    .approach,
    .contacts {
        padding-top: 58px !important;
        padding-bottom: 64px !important;
    }

    #about,
    .about {
        padding-top: 100px !important;
        min-height: 880px !important;
    }

    .about .values,
    .values,
    .values-grid {
        margin-bottom: 34px !important;
    }

    .value-card,
    .values-card,
    .values-grid .card,
    .values .card {
        height: 200px !important;
        min-height: 200px !important;
        max-height: 200px !important;
        padding: 22px 22px !important;
    }

    .value-card img,
    .values-card img,
    .values-grid .card img,
    .values .card img {
        width: 64px !important;
        height: 64px !important;
    }

    .value-card h3,
    .values-card h3,
    .values-grid .card h3,
    .values .card h3 {
        font-size: 20px !important;
        line-height: 0.9 !important;
        margin-top: 10px !important;
        margin-bottom: 10px !important;
    }

    .value-card p,
    .values-card p,
    .values-grid .card p,
    .values .card p {
        font-size: 13px !important;
        line-height: 1.22 !important;
    }

    #process,
    .process {
        min-height: 820px !important;
    }

    .process-cards {
        width: 97vw !important;
        max-width: 1220px !important;
        margin-left: 50% !important;
        margin-right: 0 !important;
        margin-bottom: 64px !important;
        transform: translateX(-50%) !important;
        display: grid !important;
        grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    .process-card {
        min-height: 280px !important;
        height: auto !important;
        padding: 24px 12px 28px !important;
        overflow: visible !important;
    }

    .process-card p {
        font-size: 12.2px !important;
        line-height: 1.18 !important;
    }

    .process-card h3 {
        font-size: 16.5px !important;
        line-height: 1.04 !important;
    }

    #contacts,
    .contacts {
        padding-top: 72px !important;
    }

    .process-card:nth-child(1) .process-number,
    .process-card:nth-child(2) .process-number {
        color: #247cff !important;
    }

    .process-card:nth-child(3) .process-number,
    .process-card:nth-child(4) .process-number {
        color: #744dff !important;
    }

    .process-card:nth-child(5) .process-number,
    .process-card:nth-child(6) .process-number {
        color: #ffb84d !important;
    }

    .process-card:nth-child(1) .process-icon,
    .process-card:nth-child(2) .process-icon {
        border-color: rgba(65,115,255,0.45) !important;
        color: #2280ff !important;
        box-shadow:
            inset 0 0 24px rgba(40,100,255,0.12),
            0 0 28px rgba(40,100,255,0.14) !important;
    }

    .process-card:nth-child(3) .process-icon,
    .process-card:nth-child(4) .process-icon {
        border-color: rgba(128,86,255,0.55) !important;
        color: #8056ff !important;
        box-shadow:
            inset 0 0 24px rgba(128,86,255,0.14),
            0 0 28px rgba(128,86,255,0.18) !important;
    }

    .process-card:nth-child(5) .process-icon,
    .process-card:nth-child(6) .process-icon {
        border-color: rgba(255,184,77,0.48) !important;
        color: #ffb84d !important;
        box-shadow:
            inset 0 0 24px rgba(255,184,77,0.12),
            0 0 28px rgba(255,184,77,0.16) !important;
    }

    .process-card:nth-child(3) .process-dot,
    .process-card:nth-child(4) .process-dot {
        background: #744dff !important;
        box-shadow:
            0 0 10px #744dff,
            0 0 25px #744dff,
            0 0 60px rgba(116,77,255,0.9) !important;
    }

    .process-card:nth-child(5) .process-dot,
    .process-card:nth-child(6) .process-dot {
        background: #ffb84d !important;
        box-shadow:
            0 0 10px #ffb84d,
            0 0 25px #ffb84d,
            0 0 60px rgba(255,184,77,0.9) !important;
    }
}

@media screen and (min-width: 1024px) and (max-width: 1366px) and (orientation: landscape) {
    .hero {
        --ipad-landscape-controls-width: 540px;
        --ipad-landscape-card-height: 66px;
        --ipad-landscape-button-height: 66px;
        --ipad-landscape-card-gap: 13px;
        --ipad-landscape-button-gap: 18px;
        --ipad-landscape-card-radius: 15px;
        --ipad-landscape-button-radius: 16px;
        --ipad-landscape-icon-size: 24px;
        --ipad-landscape-card-font: 12px;
        --ipad-landscape-content-top: 68px;
        --ipad-landscape-features-top: 30px;
        --ipad-landscape-buttons-top: 24px;
        --ipad-landscape-scanner-width: 150px;
        --ipad-landscape-scanner-from: 0px;
        --ipad-landscape-animation-x: 240px; /* меньше значение — меньше уход вправо */
        --ipad-landscape-scanner-to: var(--ipad-landscape-animation-x);
        --ipad-landscape-scanner-top: -16px;

        overflow: hidden !important;
    }

    .header {
        position: relative !important;
        z-index: 40 !important;
        margin-top: -4px !important;
        transform: none !important;
        align-items: center !important;
    }

    .nav {
        gap: 18px !important;
    }

    .nav a {
        font-size: 14px !important;
        line-height: 1 !important;
    }

    .logo {
        font-size: 13px !important;
        line-height: 1 !important;
    }

    .logo-image {
        width: 42px !important;
        height: 42px !important;
    }

    .contact-btn {
        height: 40px !important;
        padding: 0 14px !important;
        font-size: 12px !important;
        line-height: 1 !important;
    }

    .hero-content {
        margin-top: var(--ipad-landscape-content-top) !important;
    }

    .hero-left h1 {
        font-size: clamp(38px, 3.6vw, 48px) !important;
        line-height: 1.04 !important;
        letter-spacing: -1.4px !important;
    }

    .hero-subtitle {
        position: relative !important;
        margin-top: 24px !important;
        font-size: 15px !important;
        line-height: 1.4 !important;
        overflow: visible !important;
    }

    .hero-subtitle::before {
        display: none !important;
        content: none !important;
    }

    .hero-subtitle::after {
        content: "" !important;
        position: absolute !important;
        top: var(--ipad-landscape-scanner-top) !important;
        left: 0 !important;
        right: auto !important;
        width: var(--ipad-landscape-scanner-width) !important;
        height: 3px !important;
        border-radius: 999px !important;
        background:
            linear-gradient(
                90deg,
                transparent 0%,
                rgba(42,127,255,1) 25%,
                rgba(255,255,255,0.95) 50%,
                rgba(116,77,255,1) 75%,
                transparent 100%
            ) !important;
        box-shadow:
            0 0 22px rgba(42,127,255,1),
            0 0 54px rgba(116,77,255,0.85),
            0 0 90px rgba(42,127,255,0.35) !important;
        animation: ipadHeroScannerLandscapeControlled 2.8s ease-in-out infinite !important;
        pointer-events: none !important;
    }

    .hero .features {
        width: 100% !important;
        max-width: var(--ipad-landscape-controls-width) !important;
        margin-top: var(--ipad-landscape-features-top) !important;
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: var(--ipad-landscape-card-gap) !important;
        justify-content: start !important;
        align-items: stretch !important;
        overflow: visible !important;
    }

    .hero .features > .feature-card {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        height: var(--ipad-landscape-card-height) !important;
        min-height: var(--ipad-landscape-card-height) !important;
        max-height: var(--ipad-landscape-card-height) !important;
        padding: 0 13px !important;
        border-radius: var(--ipad-landscape-card-radius) !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 10px !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        transform: none !important;
    }

    .hero .features > .feature-card::before {
        border-radius: var(--ipad-landscape-card-radius) !important;
    }

    .hero .features > .feature-card::after {
        inset: 1px !important;
        border-radius: calc(var(--ipad-landscape-card-radius) - 1px) !important;
    }

    .hero .features > .feature-card .feature-img {
        width: var(--ipad-landscape-icon-size) !important;
        height: var(--ipad-landscape-icon-size) !important;
        flex: 0 0 var(--ipad-landscape-icon-size) !important;
    }

    .hero .features > .feature-card .feature-text {
        width: auto !important;
        max-width: 92px !important;
        font-size: var(--ipad-landscape-card-font) !important;
        line-height: 1.06 !important;
        font-weight: 800 !important;
        text-align: left !important;
    }

    .hero-buttons {
        width: 100% !important;
        max-width: var(--ipad-landscape-controls-width) !important;
        margin-top: var(--ipad-landscape-buttons-top) !important;
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: var(--ipad-landscape-button-gap) !important;
    }

    .primary-btn,
    .secondary-btn {
        width: 100% !important;
        height: var(--ipad-landscape-button-height) !important;
        min-height: var(--ipad-landscape-button-height) !important;
        max-height: var(--ipad-landscape-button-height) !important;
        border-radius: var(--ipad-landscape-button-radius) !important;
        font-size: 15px !important;
        line-height: 1 !important;
    }

    .services {
        --ipad-landscape-service-card-height: 297px;
    }

    .services-top {
        align-items: end !important;
        gap: 44px !important;
    }

    .services-top > div {
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-end !important;
    }

    .services h2 {
        margin-bottom: 0 !important;
        line-height: 0.98 !important;
    }

    .services-top p {
        margin: 0 0 2px !important;
        line-height: 1.38 !important;
        transform: translateY(3px) !important;
    }

    .service-cards {
        align-items: stretch !important;
    }

    .service-card {
        height: var(--ipad-landscape-service-card-height) !important;
        min-height: var(--ipad-landscape-service-card-height) !important;
        max-height: var(--ipad-landscape-service-card-height) !important;
        padding-top: 24px !important;
        padding-bottom: 24px !important;
    }

    .service-icon {
        margin-bottom: 18px !important;
    }

    .service-card h3 {
        margin-bottom: 12px !important;
        line-height: 1.03 !important;
    }

    .service-card p {
        line-height: 1.32 !important;
    }

    .audience {
        --ipad-landscape-audience-photo-width: 150px;
        --ipad-landscape-audience-card-height: 190px;
    }

    .audience-grid {
        align-items: stretch !important;
    }

    .audience-item {
        width: 100% !important;
        min-width: 0 !important;
        height: var(--ipad-landscape-audience-card-height) !important;
        min-height: var(--ipad-landscape-audience-card-height) !important;
        max-height: var(--ipad-landscape-audience-card-height) !important;
        display: grid !important;
        grid-template-columns: var(--ipad-landscape-audience-photo-width) minmax(0, 1fr) !important;
        overflow: hidden !important;
    }

    .audience-photo {
        width: var(--ipad-landscape-audience-photo-width) !important;
        min-width: var(--ipad-landscape-audience-photo-width) !important;
        max-width: var(--ipad-landscape-audience-photo-width) !important;
        height: var(--ipad-landscape-audience-card-height) !important;
        min-height: var(--ipad-landscape-audience-card-height) !important;
        max-height: var(--ipad-landscape-audience-card-height) !important;
        overflow: hidden !important;
        aspect-ratio: auto !important;
    }

    .audience-photo img,
    .audience-item:nth-child(5) .audience-photo img,
    .audience-item:nth-child(6) .audience-photo img {
        display: block !important;
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;
        min-height: 100% !important;
        max-height: 100% !important;
        object-fit: cover !important;
        object-position: center !important;
        aspect-ratio: auto !important;
        transform: none !important;
    }

    .contact-panel-content {
        text-align: left !important;
    }

    .contact-link {
        justify-content: flex-start !important;
        text-align: left !important;
    }

    .contact-link span {
        text-align: left !important;
    }
    
    /* Projects — iPad Landscape */

    .cases .cases-grid > .case-card {
        height: 750px !important;
        min-height: 750px !important;
        max-height: 750px !important;
    }
}

/* Footer — iPad Portrait */

@media screen and (min-width: 744px) and (max-width: 1024px) and (orientation: portrait) {
    .site-footer {
        position: relative !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 44px 32px !important;
        overflow: hidden !important;
    }

    .site-footer::before {
        left: 50% !important;
        width: calc(100% - 88px) !important;
        max-width: 920px !important;
        transform: translateX(-50%) !important;
    }

    .site-footer-glow {
        top: -90px !important;
        width: 620px !important;
        height: 200px !important;
    }

    .site-footer-inner {
        width: 100% !important;
        max-width: 920px !important;
        margin: 0 auto !important;
        padding-top: 34px !important;
    }

    .site-footer-main {
        width: 100% !important;

        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(260px, 0.8fr) !important;

        gap: 44px !important;
        align-items: start !important;
    }

    .site-footer-brand {
        width: 100% !important;
        max-width: 400px !important;
    }

    .site-footer-logo-row {
        gap: 11px !important;
        margin-bottom: 12px !important;
    }

    .site-footer-logo {
        width: 40px !important;
        min-width: 40px !important;
        height: 40px !important;
        flex: 0 0 40px !important;
    }

    .site-footer-logo-row strong {
        font-size: 12px !important;
        line-height: 1 !important;
        letter-spacing: 0.6px !important;
    }

    .site-footer-brand p {
        max-width: 360px !important;

        font-size: 12px !important;
        line-height: 1.5 !important;
    }

    .site-footer-links {
        width: 100% !important;

        display: flex !important;
        flex-direction: column !important;
        align-items: flex-end !important;

        gap: 10px !important;

        text-align: right !important;
    }

    .site-footer-links a {
        max-width: 300px !important;

        font-size: 11.5px !important;
        line-height: 1.35 !important;

        overflow-wrap: anywhere !important;
    }

    .site-footer-bottom {
        margin-top: 30px !important;
        padding-top: 18px !important;

        gap: 20px !important;

        font-size: 10px !important;
    }

    .site-footer-status {
        gap: 6px !important;
    }
}


/* Footer — iPad Landscape */

@media screen and (min-width: 1024px) and (max-width: 1366px) and (orientation: landscape) {
    .site-footer {
        position: relative !important;
        width: 100% !important;
        max-width: 100% !important;

        padding: 0 44px 30px !important;

        overflow: hidden !important;
    }

    .site-footer::before {
        width: calc(100% - 88px) !important;
        max-width: 1220px !important;
    }

    .site-footer-inner {
        width: 100% !important;
        max-width: 1220px !important;

        margin: 0 auto !important;
        padding-top: 34px !important;
    }

    .site-footer-main {
        grid-template-columns: minmax(0, 1fr) auto !important;
        gap: 60px !important;
    }

    .site-footer-brand {
        max-width: 440px !important;
    }

    .site-footer-logo {
        width: 40px !important;
        height: 40px !important;
        flex: 0 0 40px !important;
    }

    .site-footer-logo-row strong {
        font-size: 12px !important;
    }

    .site-footer-brand p {
        font-size: 12px !important;
    }

    .site-footer-links {
        gap: 10px !important;
    }

    .site-footer-links a {
        font-size: 11.5px !important;
    }

    .site-footer-bottom {
        margin-top: 28px !important;
        padding-top: 18px !important;

        font-size: 10px !important;
    }
}

/* Modal */

@media screen and (min-width: 744px) and (max-width: 1366px) {
    .contact-panel-content {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .contact-label {
        width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        text-align: center !important;
    }

    .contact-link {
        width: 100% !important;
        max-width: 360px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        display: flex !important;
        align-items: center !important;
    }
}

/* Animations */

@keyframes ipadGuaranteeGradient {
    0%, 100% {
        background-position: 0% 50%;
        opacity: 0.9;
    }

    50% {
        background-position: 100% 50%;
        opacity: 1;
    }
}

@keyframes ipadSwipeHintText {
    0%, 100% {
        opacity: 0.52;
        transform: translateX(-50%);
    }

    35% {
        opacity: 1;
        transform: translateX(calc(-50% - 7px));
    }

    70% {
        opacity: 1;
        transform: translateX(calc(-50% + 7px));
    }
}

@keyframes ipadSwipeHintLine {
    0%, 100% {
        opacity: 0.34;
        transform: translateX(-50%) scaleX(0.68);
    }

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

@keyframes ipadHeroScannerLandscapeControlled {
    0% {
        transform: translateX(var(--ipad-landscape-scanner-from));
        opacity: 0.45;
    }

    50% {
        transform: translateX(var(--ipad-landscape-scanner-to));
        opacity: 1;
    }

    100% {
        transform: translateX(var(--ipad-landscape-scanner-from));
        opacity: 0.45;
    }
}

@keyframes ipadPortraitHeroScanner {
    0% {
        transform: translateX(var(--ipad-portrait-scanner-left-x));
    }

    50% {
        transform: translateX(var(--ipad-portrait-scanner-right-x));
    }

    100% {
        transform: translateX(var(--ipad-portrait-scanner-left-x));
    }
}

/* Approved tablet header and Hero-only adaptation. Scene sizing lives in hero-scene.css. */

@media screen and (min-width: 744px) and (max-width: 1024px) and (orientation: portrait) {
    .hero .header { position: relative !important; z-index: 40 !important; height: 92px !important; padding: 0 !important; display: grid !important; grid-template-columns: 1fr auto !important; grid-template-areas:
            "logo contact"
            "nav nav" !important; row-gap: 8px !important; align-items: center !important; }
    .hero .logo { grid-area: logo !important; font-size: 14px !important; gap: 8px !important; }
    .hero .logo-image { width: 44px !important; height: 44px !important; }
    .hero .contact-btn { grid-area: contact !important; justify-self: end !important; }
    .hero .nav { grid-area: nav !important; position: relative !important; left: auto !important; top: auto !important; transform: none !important; justify-self: center !important; width: max-content !important; max-width: 100% !important; gap: 1px !important; padding: 5px 8px !important; }
    .hero .nav a { padding: 8px 9px !important; font-size: 11px !important; }
    .hero-content { z-index: 12 !important; width: 100% !important; margin: 0 !important; }
    .hero-left h1 { width: 100% !important; margin: 0 !important; letter-spacing: -1.6px !important; }
    .hero-left h1 br { display: initial !important; }
    .hero-left h1 span,
    .hero-nowrap { display: inline !important; white-space: normal !important; }
    .hero-subtitle { width: 100% !important; font-size: 14px !important; line-height: 1.38 !important; }
    .hero-buttons { z-index: 14 !important; }
    .hero-visual { z-index: 4 !important; width: 100% !important; }
    .hero-benefit span { font-size: 11px !important; }
}

@media screen and (min-width: 1024px) and (max-width: 1366px) and (orientation: landscape) {
    .hero { padding: 24px 38px 0 !important; }
    .hero .header { position: relative !important; z-index: 40 !important; height: 54px !important; padding: 0 !important; display: flex !important; align-items: center !important; justify-content: space-between !important; }
    .hero .logo { font-size: 13px !important; gap: 6px !important; }
    .hero .logo-image { width: 48px !important; height: 48px !important; }
    .hero .nav { position: absolute !important; left: 50% !important; top: 50% !important; transform: translate(-50%, -50%) !important; gap: 0 !important; padding: 4px 7px !important; }
    .hero .nav a { padding: 7px 8px !important; font-size: 10.5px !important; }
    .hero .contact-btn { height: 44px !important; padding: 0 16px !important; font-size: 12px !important; }
    .hero-content { position: relative !important; z-index: 12 !important; width: 100% !important; margin: 0 !important; padding: 0 !important; display: flex !important; align-items: center !important; }
    .hero-left { max-width: 610px !important; margin: 0 !important; text-align: left !important; }
    .hero-left h1 { max-width: 610px !important; line-height: 1.07 !important; letter-spacing: -1.8px !important; text-align: left !important; }
    .hero-subtitle { max-width: 560px !important; line-height: 1.42 !important; text-align: left !important; }
    .hero-visual { position: absolute !important; z-index: 3 !important; top: 0 !important; right: -1% !important; width: 63% !important; height: 100% !important; }
    .hero-benefits { width: 300px !important; }
    .hero-benefit:nth-child(1) { top: 0 !important; right: -4px !important; left: auto !important; }
    .hero-benefit:nth-child(2) { top: 49% !important; right: 8px !important; left: auto !important; }
    .hero-benefit:nth-child(3) { right: -2px !important; bottom: 0 !important; left: auto !important; }
    .hero-benefit span { font-size: 10.5px !important; }
}

/* polish.css */
/* Final composition and shared material. Loaded after device styles. */
:root {
    --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
    --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
    --glass-control: radial-gradient(ellipse at 15% -30%, rgba(255,255,255,.25), transparent 52%),
        linear-gradient(125deg, rgba(192,225,255,.12), rgba(75,105,202,.10) 48%, rgba(145,112,226,.19));
}

/* Glass shells sit below the android; their readable content sits above it.
   Card wrappers must not create stacking contexts. */
.hero { background: #010207 !important; }
@media (min-width: 1367px) { .services { background: #010207 !important; } }
.hero::after { display: none !important; }
.hero-atmosphere { mask-image: linear-gradient(#000 65%, transparent); }
.hero-left { position: relative; z-index: 7; }
.hero-visual { mask-image: none; }
.hero-visual::after {
    inset: auto -10% 0 -10% !important; height: 150px;
    background: linear-gradient(0deg, #010207 6%, rgba(1,2,7,.85) 30%, transparent);
    mix-blend-mode: normal; opacity: 1; z-index: 6;
}
.hero-android { right: 10vw; height: min(113svh, 960px); }
.hero-android-stage { position: absolute; inset: 0; z-index: 3; }
.hero-android-layer { transform-origin: 65% 55%; }
.hero-android-parallax { transition: none; transform-origin: 65% 45%; }
.hero-benefits { top: 30%; right: 0; height: 310px; }
.hero-benefit, .hero-benefit:nth-child(n) {
    z-index: auto !important; isolation: auto; overflow: visible;
    width: 208px; min-height: 76px; padding: 0 !important; border: 0 !important; border-radius: 24px;
    background: none !important; outline: none !important; box-shadow: none !important;
    backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
    transform: none; transition: none;
}
.hero-benefit::before, .hero-benefit::after { content: none; }
.hero-benefit:nth-child(1) { top: 0; right: 42px; }
.hero-benefit:nth-child(2) { top: 40%; right: -12px; }
.hero-benefit:nth-child(3) { bottom: 0; right: 30px; }
.benefit-glass {
    position: absolute; inset: 0 0 0 -44px; z-index: 2; border-radius: inherit;
    border: 1px solid rgba(237,248,255,.45);
    background: radial-gradient(ellipse at 5% 0%, rgba(255,255,255,.4), transparent 50%),
        radial-gradient(ellipse at 95% 110%, rgba(170,144,255,.30), transparent 62%),
        linear-gradient(115deg, rgba(222,243,255,.20), rgba(125,172,230,.065) 50%, rgba(149,134,248,.12));
    box-shadow: 0 16px 38px rgba(0,0,0,.2), 0 4px 24px rgba(60,113,255,.14),
        inset 0 2px 1px rgba(255,255,255,.72), inset 1px 0 1px rgba(227,248,255,.5),
        inset 0 -2px 2px rgba(192,178,255,.5), inset 0 -10px 16px rgba(109,156,255,.1);
    backdrop-filter: blur(18px) saturate(190%) brightness(1.2);
    -webkit-backdrop-filter: blur(18px) saturate(190%) brightness(1.2);
}
.benefit-glass::before, .benefit-glass::after { content: ""; position: absolute; inset: 3px; border-radius: inherit; pointer-events: none; }
.benefit-glass::before {
    background: linear-gradient(135deg, rgba(255,255,255,.55), transparent 26%, transparent 68%, rgba(185,190,255,.45));
    mask-image: linear-gradient(#000, transparent 34%, transparent 68%, #000);
    box-shadow: inset 0 0 0 1px rgba(237,248,255,.25);
}
.benefit-glass::after {
    inset: 8px 8px 8px 18px;
    background: linear-gradient(112deg, transparent 8%, rgba(235,247,255,.15) 12%, transparent 22%, transparent 76%, rgba(204,213,255,.08) 82%, transparent 87%);
}
.benefit-content {
    position: relative; z-index: 4; width: 100%; min-height: 76px;
    display: flex; align-items: center; gap: 12px; padding: 14px 18px;
}
.benefit-content::before { content: ""; position: absolute; inset: 10px 6px 10px 42px; border-radius: 16px;
    background: radial-gradient(ellipse, rgba(5,12,34,.52), transparent 76%); }
.hero-benefit span { font-weight: 650; }
.hero-benefit img { filter: brightness(0) invert(1) drop-shadow(0 0 7px rgba(166,213,255,.45)); }
@keyframes androidBreath {
    0%, 100% { transform: translate3d(0,0,0) rotate(-.15deg); }
    50% { transform: translate3d(0,-7px,0) rotate(.25deg); }
}
@keyframes androidLight {
    0%, 100% { opacity: .55; transform: translate3d(-8px,0,0) scale(.98); }
    50% { opacity: .95; transform: translate3d(12px,-10px,0) scale(1.04); }
}
@media (prefers-reduced-motion: no-preference) {
    .hero-android { animation: androidBreath 14s ease-in-out infinite; animation-play-state: paused; }
    .hero-visual::before { animation: androidLight 18s ease-in-out infinite; animation-play-state: paused; }
    .hero-motion-visible .hero-android, .hero-motion-visible .hero-visual::before { animation-play-state: running; }
}
/* Keep link geometry constant; the glass pane moves independently under the text. */
.hero .nav a { border: 1px solid transparent; }

/* Utility controls share one material; branded animated CTA selectors are excluded. */
.contact-panel .contact-link, .secondary-btn, .contact-close,
.calc-modal-close, .project-modal-close, .lead-popup-close, .scroll-top-btn {
    background: var(--glass-control);
    border-color: rgba(225,240,255,.32);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.46), inset 0 -1px 0 rgba(155,167,255,.19), 0 10px 26px rgba(0,0,0,.18);
    backdrop-filter: blur(18px) saturate(165%);
    -webkit-backdrop-filter: blur(18px) saturate(165%);
    transition: transform 160ms var(--ease-out), opacity 200ms var(--ease-out), border-color 180ms ease, box-shadow 180ms ease;
}
.contact-close:hover, .calc-modal-close:hover, .project-modal-close:hover, .lead-popup-close:hover,
.contact-panel .contact-link:hover { transform: none; background: var(--glass-control); }
@media (hover: hover) and (pointer: fine) {
    .contact-panel .contact-link:hover, .secondary-btn:hover, .contact-close:hover,
    .calc-modal-close:hover, .project-modal-close:hover, .lead-popup-close:hover, .scroll-top-btn:hover {
        transform: translateY(-1px);
        border-color: rgba(232,248,255,.62);
        box-shadow: inset 0 1px 0 rgba(255,255,255,.68), inset 10px 8px 24px rgba(221,239,255,.06), 0 12px 30px rgba(0,0,0,.2);
    }
}
.contact-panel .contact-link:active, .secondary-btn:active, .contact-close:active,
.calc-modal-close:active, .project-modal-close:active, .lead-popup-close:active, .scroll-top-btn:active { transform: scale(.98); }
.contact-overlay, .calc-modal-overlay {
    background: rgba(2,5,17,.28) !important;
    backdrop-filter: blur(6px) saturate(115%) !important;
    -webkit-backdrop-filter: blur(6px) saturate(115%) !important;
    transition: opacity 240ms var(--ease-out), visibility 240ms !important;
}
.contact-panel {
    right: 0;
    transform: translateX(105%);
    visibility: hidden;
    transition: transform 300ms var(--ease-drawer), visibility 300ms;
    overflow-y: auto;
    height: 100dvh;
}
.contact-panel.active { transform: translateX(0); visibility: visible; }
.calc-modal { max-height: calc(100dvh - 32px); overflow-y: auto;
    transition: opacity 250ms var(--ease-out), visibility 250ms, transform 250ms var(--ease-out); }

/* Deliberate section boundaries, without continuously animating their width. */
section:not(.hero)::before { animation: none; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto !important; }
    .hero-android, .hero-visual::before { animation: none !important; }
    .contact-panel, .calc-modal { transition: opacity 160ms ease, visibility 160ms !important; }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
    .benefit-glass, .contact-panel, .calc-modal { background: #18243c !important; backdrop-filter: none !important; }
}
@media (max-width: 743px) {
    .contact-panel { overflow-y: auto !important; transition: opacity 250ms var(--ease-out), visibility 250ms, transform 250ms var(--ease-out) !important; }
    .contact-panel .contact-link { background: var(--glass-control) !important; }
}
.contact-panel .contact-label { color: #bed4ff; }
.calc-modal input::placeholder, .calc-modal textarea::placeholder { color: rgba(225,235,255,.58); }
.contact-overlay:not(.active), .calc-modal-overlay:not(.active),
.contact-panel:not(.active), .calc-modal:not(.active) { pointer-events: none; }
@media (max-width: 350px) {
    .contact-panel { padding-inline: 24px !important; }
    .contact-panel .contact-link { width: 100% !important; padding-inline: 12px !important; gap: 8px !important; font-size: 11.5px !important; }
}

/* Targeted utility material: primary animated CTAs remain untouched. */
.hero .secondary-btn {
    position: relative;
    overflow: hidden;
    color: #f6f8ff;
    background: radial-gradient(ellipse at 12% 0%,rgba(248,252,255,.24),transparent 55%),
        linear-gradient(122deg,rgba(207,235,255,.14),rgba(78,104,209,.13) 48%,rgba(153,112,224,.22)) !important;
    border: 1px solid rgba(226,242,255,.48) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.64),inset 0 -1px 0 rgba(165,153,255,.31),0 12px 30px rgba(0,0,0,.24) !important;
    backdrop-filter: blur(18px) saturate(165%);
    -webkit-backdrop-filter: blur(18px) saturate(165%);
}
.hero .secondary-btn::after { content:""; position:absolute; inset:1px; border-radius:inherit; pointer-events:none;
    background:linear-gradient(115deg,rgba(255,255,255,.13),transparent 31%,transparent 76%,rgba(169,179,255,.09)); }
@media (hover:hover) and (pointer:fine) {
    .hero .secondary-btn:hover { transform:translateY(-2px); border-color:rgba(246,250,255,.72) !important;
        box-shadow:inset 0 1px 0 rgba(255,255,255,.82),inset 8px 6px 18px rgba(226,240,255,.08),0 17px 34px rgba(0,0,0,.27) !important; }
}
@media (min-width:1367px) {
    .process-btn { position:relative; overflow:hidden; color:#f7f9ff;
        border:1px solid rgba(226,242,255,.39) !important;
        background:radial-gradient(ellipse at 16% 0%,rgba(246,250,255,.24),transparent 50%),
            linear-gradient(120deg,rgba(186,215,255,.13),rgba(72,93,187,.13) 50%,rgba(155,114,222,.22)) !important;
        box-shadow:inset 0 1px 0 rgba(255,255,255,.58),inset 0 -1px 0 rgba(165,153,255,.22),0 13px 28px rgba(0,0,0,.2) !important;
        backdrop-filter:blur(16px) saturate(155%); -webkit-backdrop-filter:blur(16px) saturate(155%);
        transition:transform 180ms var(--ease-out),border-color 180ms ease,box-shadow 180ms ease !important; }
    .process-btn:hover { transform:translateY(-2px); filter:none !important; border-color:rgba(240,249,255,.62) !important;
        box-shadow:inset 0 1px 0 rgba(255,255,255,.74),0 16px 30px rgba(0,0,0,.24) !important; }

}
.scroll-top-btn { right:24px !important; bottom:24px !important; width:48px !important; height:48px !important;
    border:1px solid rgba(222,238,255,.42) !important; border-radius:17px !important;
    background:radial-gradient(ellipse at 18% 0,rgba(240,250,255,.23),transparent 56%),
        linear-gradient(130deg,rgba(130,170,224,.22),rgba(17,28,56,.82) 55%,rgba(96,78,174,.43)) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.63),inset 0 -1px 0 rgba(156,151,255,.28),0 12px 28px rgba(0,0,0,.25) !important;
    backdrop-filter:blur(17px) saturate(165%); -webkit-backdrop-filter:blur(17px) saturate(165%);
    transform:translateY(7px) scale(.94);
    transition:opacity 200ms ease,visibility 200ms,transform 220ms var(--ease-out),border-color 180ms ease !important; }
.scroll-top-btn.visible { transform:translateY(0) scale(1); }
.scroll-top-btn svg { width:22px; height:22px; fill:none; stroke:#edf4ff; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; transition:transform 180ms var(--ease-out); }
@media (hover:hover) and (pointer:fine) {
    .scroll-top-btn.visible:hover { transform:translateY(-2px) scale(1); border-color:rgba(239,249,255,.70) !important; }
    .scroll-top-btn:hover svg { transform:translateY(-2px); }
}
@media (max-width:743px) { .scroll-top-btn { right:16px !important; bottom:18px !important; width:44px !important; height:44px !important; } }
@media (prefers-reduced-motion:reduce) { .scroll-top-btn,.scroll-top-btn svg,.hero .secondary-btn,.process-btn { transition:none !important; } }

/* One restrained blue → indigo → violet material across informational surfaces. */
@media (min-width: 1367px) {
    .solutions-table, .audience-item {
        border-color: rgba(205,215,255,.29) !important;
        background: radial-gradient(ellipse at 4% 0%,rgba(183,219,255,.14),transparent 48%),
            radial-gradient(ellipse at 96% 100%,rgba(156,109,224,.16),transparent 57%),
            linear-gradient(125deg,rgba(31,45,89,.42),rgba(16,22,49,.68) 54%,rgba(69,40,104,.36)) !important;
        box-shadow: inset 0 1px 0 rgba(244,249,255,.33),inset 0 -1px 0 rgba(157,139,227,.19),
            0 17px 36px rgba(0,0,0,.23),0 6px 22px rgba(67,66,154,.08) !important;
        backdrop-filter: blur(16px) saturate(145%);
        -webkit-backdrop-filter: blur(16px) saturate(145%);
    }
    .solutions-table::after { content:""; position:absolute; inset:1px; border-radius:inherit; pointer-events:none;
        background:linear-gradient(114deg,rgba(255,255,255,.07),transparent 23%,transparent 70%,rgba(171,150,244,.06)); }
    .audience-item::before { background:linear-gradient(135deg,rgba(216,235,255,.46),rgba(104,126,217,.14) 45%,rgba(181,139,235,.42)) !important; opacity:.65; }
    .audience-item { transition: transform 220ms var(--ease-out),border-color 220ms ease,box-shadow 220ms ease; }
    .audience-item:hover { transform:translateY(-2px); border-color:rgba(215,209,255,.42) !important;
        box-shadow:inset 0 1px 0 rgba(255,255,255,.40),0 19px 38px rgba(0,0,0,.24) !important; }
}

/* hero-scene.css */
/* Hero occupies its own document space; scrolling moves directly to Services. */
html, body { overflow-x: clip !important; overflow-y: visible; }
.hero-scene-stage { position: relative; height: auto; background: #010207; overflow: visible; }
.hero-scene-stage > .hero { position: relative !important; height: 100svh !important; min-height: 0 !important; overflow: clip !important; }
.hero-scene-stage .hero-content { min-height: 0; }
.hero-android { -webkit-mask-image: linear-gradient(to right,#000 0%,#000 84%,transparent 100%),linear-gradient(to bottom,#000 0%,#000 85%,transparent 100%); -webkit-mask-composite: source-in; mask-image: linear-gradient(to right,#000 0%,#000 84%,transparent 100%),linear-gradient(to bottom,#000 0%,#000 85%,transparent 100%); mask-composite: intersect; }
.mobile-menu-toggle, .mobile-menu-contact { display: none; }
@media (min-width: 1024px) and (max-width: 1366px) and (orientation: landscape) {
}
@media (min-width: 744px) and (max-width: 1366px) and (orientation: landscape) {
}
/* Phone: copy above a compact, self-contained product composition. */
@media (max-width: 743px) {
    .hero-scene-stage { height: auto; }
    .hero-scene-stage > .hero { position: relative !important; height: auto !important; padding: calc(56px + env(safe-area-inset-top)) 16px 0 !important; isolation: auto; }
    .hero .header { position: fixed !important; top: calc(12px + env(safe-area-inset-top)) !important; left: 16px; right: 16px; width: auto !important; z-index: 200; height: 42px !important; min-height: 42px !important; margin: 0 !important; padding: 0 !important; display: flex !important; gap: 8px; align-items: center !important; overflow: visible !important; }
    main > section[id] { scroll-margin-top: calc(76px + env(safe-area-inset-top)); }
    .hero::before { content: none !important; display: none !important; }
    .hero .logo::after { content: none !important; display: none !important; }
    .hero .logo { width: auto !important; margin-right: auto; gap: 6px !important; }
    .hero .logo span { font-size: 10px !important; }
    .hero .logo-image { width: 26px !important; height: 26px !important; }
    .hero .contact-btn { display: flex !important; order: 1; width: 42px !important; min-width: 42px; height: 42px !important; padding: 0 !important; justify-content: center; border-radius: 14px !important; background: var(--glass-control); }
    .hero .contact-btn span { display: none; }
    .hero .contact-btn .phone-icon { width: 18px !important; height: 18px !important; }
    .mobile-menu-toggle { display: flex; order: 2; flex: 0 0 42px; flex-direction: column; justify-content: center; align-items: center; gap: 6px; width: 42px; height: 42px; border: 1px solid rgba(225,240,255,.3); border-radius: 14px; color: white; background: var(--glass-control); box-shadow: inset 0 1px 0 rgba(255,255,255,.4); backdrop-filter: blur(16px); }
    .mobile-menu-toggle span { display: block; width: 17px; height: 1px; background: currentColor; transition: transform 200ms var(--ease-out); }
    .mobile-menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
    .mobile-menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
    .hero .nav { position: absolute !important; top: 54px !important; left: 0 !important; right: 0 !important; bottom: auto !important; width: 100% !important; max-width: none !important; height: auto !important; display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 6px !important; padding: 12px !important;
        background: radial-gradient(ellipse at 0 0,rgba(220,240,255,.28),transparent 62%),linear-gradient(135deg,rgba(39,52,91,.95),rgba(27,22,65,.95)) !important;
        backdrop-filter: blur(28px) saturate(170%) !important; border: 1px solid rgba(226,240,255,.35) !important; border-radius: 22px !important; z-index: 50 !important; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-6px) !important; transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out), visibility 200ms; }
    .hero .nav.is-open { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0) !important; }
    .hero .nav a, .hero .nav a[href] { display: flex !important; justify-content: center; padding: 13px 10px !important; font-size: 14px !important; }
    .hero-content { position: relative !important; display: grid !important; grid-template-columns: minmax(0,1fr); align-items: start !important; height: auto !important; min-height: 0 !important; margin-top: 16px !important; padding: 0 !important; }
    .hero-left { display: contents !important; }
    .hero-left h1 { grid-row: 1; color: white !important; font-size: clamp(25px,7vw,30px) !important; line-height: 1.04 !important; letter-spacing: -1px !important; margin: 0 auto 12px !important; width: 100% !important; text-align: center !important; }
    .hero-left h1::before { content: none !important; display: none !important; }
    .hero-left h1 br { display: initial !important; }
    .hero-left h1 { min-height: 0 !important; max-width: none !important; }
    .hero-left h1 span { font-size: inherit !important; color: rgba(255,255,255,.94) !important; }
    .hero-subtitle { color: rgba(255,255,255,.76) !important; grid-row: 3; width: 100% !important; max-width: 350px !important; margin: 4px auto 14px !important; font-size: 12px !important; line-height: 1.4 !important; text-align: center !important; }
    .hero-subtitle br { display: none; }
    .hero-subtitle .hero-guarantee-gradient { display: block; padding-top: 8px; font-size: 10.5px !important; }
    .hero-subtitle::before, .hero-subtitle::after, .hero-left::after { display: none !important; content: none !important; }
    .hero-buttons { grid-row: 4; display: grid !important; grid-template-columns: 1fr 1fr; width: min(100%,360px) !important; gap: 10px !important; margin: 0 auto 20px !important; }
    .hero-buttons .primary-btn, .hero-buttons .secondary-btn { width: 100% !important; height: 46px !important; min-height: 46px !important; }
    .hero-button-note { display: none !important; }
    .hero-visual { grid-row: 2; position: relative !important; width: 100% !important; height: 270px !important; min-height: 0 !important; margin: 0 0 2px !important; inset: auto !important; }
    .hero-visual::after { display: none; }
}
@media (max-width: 350px) {
    .hero .logo span { font-size: 9px !important; }

}
/* Portrait tablet uses the same vertical hierarchy, with room for a larger object. */
@media (min-width: 744px) and (max-width: 1024px) and (orientation: portrait) {
    .hero-scene-stage { height: auto; }
    .hero-scene-stage > .hero { position: relative !important; height: auto !important; padding: 20px 30px 0 !important; }
    .hero-left h1::before, .hero-left::after { content: none !important; display: none !important; }
    .hero-left h1 { color: white !important; min-height: 0 !important; max-width: 710px !important; margin-inline: auto !important; font-size: 36px !important; line-height: 1.07 !important; }
    .hero-subtitle { transform: none !important; margin: 14px auto 0 !important; max-width: 650px !important; text-align: center !important; }
    .hero-guarantee-gradient { display: inline !important; }
    .hero-content { display: grid !important; grid-template-columns: minmax(0,1fr); height: auto !important; min-height: 0 !important; max-width: none !important; padding-top: 20px !important; }
    .hero-left { display: contents !important; }
    .hero-left h1 { grid-row: 1; text-align: center !important; }
    .hero-subtitle { grid-row: 3; }
    .hero-buttons { grid-row: 4; position: relative !important; inset: auto !important; margin: 18px auto 26px !important; justify-content: center !important; }
    .hero-button-note { display: none !important; }
    .hero-visual { grid-row: 2; position: relative !important; height: 430px !important; margin-top: 16px; inset: auto !important; }
    .hero-visual::after { display: none; }
    .hero-subtitle::after { content: none !important; display: none !important; }
}
@media (min-width: 744px) and (max-width: 1200px) and (orientation: landscape) {
    .hero-scene-stage > .hero { height: 100svh !important; }
    .hero-content { height: calc(100svh - 78px) !important; min-height: 0 !important; }
    .hero-left { width: 50% !important; }
    .hero-left h1 { font-size: clamp(34px, 3.8vw, 46px) !important; }
    .hero-subtitle { font-size: 14px !important; }
}
@media (prefers-reduced-motion: reduce) {
    .hero-scene-stage { height: auto; }
    .hero-scene-stage > .hero { position: relative !important; }
    .hero .nav, .mobile-menu-toggle span { transition: none !important; }
}


/* Desktop remains display:contents: its original containing blocks are unchanged.
   Responsive uses a 1440×900 desktop scene capture, normalized to the image top.
   All descendants retain the same pixel geometry; only the whole scene scales. */
.hero-visual-scene { display: contents; }
@media (max-width: 743px), (min-width: 744px) and (max-width: 1366px) and (orientation: landscape), (min-width: 744px) and (max-width: 1024px) and (orientation: portrait) {
    .hero-visual { --scene-scale: .38; --scene-fade: 72%; --plaque-scale: 1.06; }
    .hero-visual-scene {
        display: block; position: absolute; width: 865px; height: 960px;
        top: 0; left: 50%; margin-left: calc(-400px * var(--scene-scale));
        transform: scale(var(--scene-scale)); transform-origin: 0 0;
    }
    .hero-visual-scene .hero-android-stage { inset: 0; mask-image: none; }
    .hero-visual-scene .hero-android {
        left: 80px !important; right: auto !important; top: 0 !important;
        height: 960px !important; width: 640px !important; min-height: 0 !important;
        max-height: none !important; max-width: none !important;
        transform: none !important; animation: none !important;
        -webkit-mask-image: linear-gradient(to right,#000 84%,transparent 100%), linear-gradient(#000 var(--scene-fade),transparent 100%) !important;
        mask-image: linear-gradient(to right,#000 84%,transparent 100%), linear-gradient(#000 var(--scene-fade),transparent 100%) !important;
    }
    .hero-visual-scene .hero-benefits {
        inset: 303px 0 auto auto !important; width: 360px !important; height: 310px !important;
    }
    .hero-visual-scene .hero-benefit { width: 208px !important; min-height: 76px !important; border-radius: 24px !important; }
    .hero-visual-scene .hero-benefit:nth-child(1) { inset: 0 42px auto auto !important; }
    .hero-visual-scene .hero-benefit:nth-child(2) { inset: 40% -12px auto auto !important; }
    .hero-visual-scene .hero-benefit:nth-child(3) { inset: auto 30px 0 auto !important; }
    .hero-visual-scene .benefit-glass { inset: 0 0 0 -44px; }
    .hero-visual-scene .benefit-content { z-index: 4; min-height: 76px; padding: 14px 18px; gap: 12px; }
    /* Scale the two material layers separately to preserve shell/robot/text depth.
       Both layers share the same uniform scale and right-center origin. */
    .hero-visual-scene .benefit-glass,
    .hero-visual-scene .benefit-content {
        transform: scale(var(--plaque-scale)); transform-origin: right center;
        pointer-events: none;
    }
    .hero-visual-scene .hero-benefit img { width: 26px !important; height: 26px !important; }
    .hero-visual-scene .hero-benefit span { font-size: 13px !important; line-height: 1.2 !important; }
}
@media (max-width: 743px) {
    .hero-visual { --scene-fade: 69%; height: calc(960px * var(--scene-scale)) !important; }
}
@media (max-width: 350px) { .hero-visual { --scene-scale: .30; } }
@media (min-width: 410px) and (max-width: 743px) { .hero-visual { --scene-scale: .41; } }
@media (min-width: 744px) and (max-width: 1024px) and (orientation: portrait) {
    .hero-visual { --scene-scale: .52; height: calc(960px * var(--scene-scale)) !important; }
}
@media (min-width: 744px) and (max-width: 1366px) and (orientation: landscape) {
    .hero-visual { --scene-scale: .72; }
}

/* section-rhythm.css */
/* The approved centered labels sit above the original section content. */
main > section[id] > .section-label {
    text-align: center !important;
    justify-content: center !important;
    color: rgba(186,204,255,.84) !important;
    font-weight: 500 !important;
    font-size: 11px !important;
    letter-spacing: .42em !important;
    text-transform: uppercase;
    transform: none !important;
}
main > section[id] > .section-label span { display: none !important; }
main > section[id] > .section-label::after { content: none !important; }
@media (max-width: 743px) {
    main > section[id] > .section-label {
        display: block !important;
        font-size: 9px !important;
        width: 100% !important;
        left: auto !important;
    }
}

/* The original Projects heading starts at the same height as the new label.
   Put only this label in the existing content flow, leaving cards unchanged. */
@media (min-width: 1025px) {
    .cases > .section-label {
        position: relative;
        inset: auto;
        width: 100%;
        margin-bottom: 28px;
    }
}

/* site-background.css */
/* One continuous WebGL2 material behind the entire page, ribbons above it.
   Static SOPAX surface remains available before init / on failure / reduced motion. */
:root { --site-flow-art: url("/images/site-flow.svg?v=20261001-ribbon-2"); }
html { background: #040714; }
body {
    position: relative;
    isolation: isolate;
    background:
        url("/images/liquid-field.svg?v=20261001-liquid-4") center / 100% 100% no-repeat,
        conic-gradient(from 210deg at 48% 46%, #040714, #0b1d48, #17284d,
            #102951, #07112b, #201c4b, #2b1a4c, #19143d, #040714) !important;
    background-attachment: scroll !important;
    background-size: 100% 100% !important;
    background-repeat: no-repeat !important;
}
body::before { content: none; }
#liquidMetalBackground {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    z-index: -2;
    pointer-events: none;
    visibility: hidden;
    opacity: 0;
    transition: opacity 450ms ease;
}
body.liquid-metal-ready #liquidMetalBackground { visibility: visible; opacity: 1; }
/* Existing responsive artwork is a single page layer, never a shader substitute. */
body::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: var(--site-flow-art) center / 100% 100% no-repeat;
    opacity: .36;
}
main { position: relative; isolation: isolate; }
main::before { content: none; }
main > section[id] { background: transparent !important; }
/* Only Hero backplates change. All approved geometry, robot, cards and CTA stay intact. */
.hero-scene-stage { background: transparent; }
.hero { background: linear-gradient(180deg, rgba(1,2,7,.48) 0%,
    rgba(1,2,7,.48) 72%, transparent 100%) !important; }
/* Replace the old black backplate with an alpha fade, so the approved robot
   fade reveals the live surface rather than an opaque black rectangle. */
.hero-visual::after { background: none !important; }
@media (min-width: 1367px) {
    .hero-android {
        -webkit-mask-image: linear-gradient(to right, #000 84%, transparent 100%),
            linear-gradient(#000 75%, transparent 90.5%);
        mask-image: linear-gradient(to right, #000 84%, transparent 100%),
            linear-gradient(#000 75%, transparent 90.5%);
    }
}
@media (min-width: 744px) and (max-width: 1366px) {
    :root { --site-flow-art: url("/images/site-flow-tablet.svg?v=20261001-ribbon-2"); }
}
@media (max-width: 743px) {
    :root { --site-flow-art: url("/images/site-flow-mobile.svg?v=20261001-ribbon-2"); }
    body.liquid-metal-ready #liquidMetalBackground { opacity: .82; }
    body::after { opacity: .28; }
}
@media (prefers-reduced-motion: reduce) {
    #liquidMetalBackground { visibility: hidden !important; }
}

/* Palette-only fallback and ribbon light; no new artwork or section canvases. */
body { background-color: var(--palette-low,#040714) !important;
    background-image: url("/images/liquid-field.svg?v=20261001-liquid-4"),
    conic-gradient(from 210deg at 48% 46%,var(--palette-low,#040714),var(--palette-high,#142d6b),var(--palette-tint,#724fd8),var(--palette-low,#040714)) !important; }
/* Safari: avoid a document-sized filtered SVG underneath the opaque canvas.
   The same palette gradient remains visible before its first frame. Failure,
   reduced motion and mobile retain the original SVG fallback. */
@media (min-width: 744px) {
    body.webkit-canvas-background {
        background-image: conic-gradient(from 210deg at 48% 46%,var(--palette-low,#040714),var(--palette-high,#142d6b),var(--palette-tint,#724fd8),var(--palette-low,#040714)) !important;
    }
}
body::after { filter: hue-rotate(var(--site-flow-hue,0deg)); transition: filter 600ms ease; }
@media (prefers-reduced-motion:reduce) { body::after { transition: none; } }

/* Filter the visible ribbon window, then scroll the unchanged document artwork
   inside it. The pseudo-element remains the HTML-first / no-script fallback. */
.site-flow-ribbon {
    position: fixed; inset: 0; z-index: -1; pointer-events: none;
    overflow: hidden; visibility: hidden; opacity: .36;
    filter: hue-rotate(var(--site-flow-hue,0deg)); transition: filter 600ms ease;
    will-change: filter;
}
.site-flow-ribbon-art {
    position: absolute; top: 0; left: 0; width: 100%;
    background: var(--site-flow-art) center / 100% 100% no-repeat;
    will-change: transform;
}
body.site-ribbon-ready::after { content: none; }
body.site-ribbon-ready .site-flow-ribbon { visibility: visible; }
@media (max-width:743px) { .site-flow-ribbon { opacity: .28; } }
@media (prefers-reduced-motion:reduce) { .site-flow-ribbon { transition: none; } }

/* WebKit: the approved SVG is rasterized losslessly once, rather than
   re-rasterizing a document-sized vector layer during every hue/scroll update.
   Artwork geometry, alpha, scrolling and hue interpolation stay unchanged. */
@supports (font: -apple-system-body) {
    body { --site-flow-art: url("/images/site-flow-safari.webp?v=20261013-raster-1"); }
    @media (min-width:744px) and (max-width:1366px) {
        body { --site-flow-art: url("/images/site-flow-tablet-safari.webp?v=20261013-raster-1"); }
    }
    @media (max-width:743px) {
        body { --site-flow-art: url("/images/site-flow-mobile-safari.webp?v=20261013-raster-1"); }
    }
}

/* liquid-polish.css */
/* Targeted native glass layer. No primary CTA or baseline card selectors. */
:root {
    --sopax-blue: 23,108,255;
    --sopax-cyan: 105,213,255;
    --sopax-indigo: 90,84,255;
    --sopax-violet: 139,92,255;
    --sopax-glass-surface: radial-gradient(ellipse at 12% 0%,rgba(197,221,255,.20),transparent 60%),linear-gradient(125deg,rgba(130,182,243,.12),rgba(33,52,105,.20) 50%,rgba(118,88,197,.18));
    --sopax-glass-edge: rgba(220,238,255,.43);
    --sopax-glass-shadow: inset 0 1px 1px rgba(246,252,255,.62),inset 1px 0 1px rgba(173,221,255,.32),inset 0 -1px 1px rgba(177,157,245,.32),0 9px 24px rgba(1,4,15,.22);
    --sopax-glass-reflection: linear-gradient(115deg,rgba(223,244,255,.15),transparent 28%,transparent 67%,rgba(157,135,237,.12));
    --glass-control: var(--sopax-glass-surface);
    --sopax-spotlight: 0;
}
:is(#goToCases,#openContact,#mobileMenuToggle,.scroll-top-btn,.contact-panel .contact-link,.contact-close) {
    isolation: isolate; overflow: hidden;
    background: var(--sopax-glass-surface) !important;
    border: 1px solid var(--sopax-glass-edge) !important;
    box-shadow: var(--sopax-glass-shadow) !important;
    backdrop-filter: blur(16px) saturate(155%);
    -webkit-backdrop-filter: blur(16px) saturate(155%);
    transition: transform 180ms var(--ease-out),border-color 180ms ease,box-shadow 180ms ease,opacity 200ms ease,visibility 200ms !important;
}
:is(#goToCases,#openContact,#mobileMenuToggle,.contact-panel .contact-link) { position: relative; }
:is(#goToCases,#openContact,#mobileMenuToggle,.scroll-top-btn,.contact-panel .contact-link,.contact-close)::before,
:is(#goToCases,#openContact,#mobileMenuToggle,.scroll-top-btn,.contact-panel .contact-link,.contact-close)::after {
    content: ""; position: absolute; inset: 1px; border-radius: inherit; z-index: -1; pointer-events: none;
}
:is(#goToCases,#openContact,#mobileMenuToggle,.scroll-top-btn,.contact-panel .contact-link,.contact-close)::before {
    background: radial-gradient(100px circle at var(--pointer-x,50%) var(--pointer-y,40%),rgba(var(--sopax-cyan),var(--sopax-spotlight)),transparent 74%),radial-gradient(140px circle at var(--pointer-x,50%) var(--pointer-y,40%),rgba(var(--sopax-violet),var(--sopax-spotlight)),transparent 90%),var(--sopax-glass-reflection);
}
:is(#goToCases,#openContact,#mobileMenuToggle,.scroll-top-btn,.contact-panel .contact-link,.contact-close)::after {
    box-shadow: inset 0 0 0 1px rgba(223,243,255,.13),inset -2px -2px 6px rgba(159,148,239,.10);
    background: linear-gradient(160deg,rgba(230,246,255,.10),transparent 17%,transparent 78%,rgba(141,156,255,.08));
}
.hero-benefit { pointer-events: auto; }
.hero-benefit .benefit-glass::after {
    background: radial-gradient(110px circle at var(--pointer-x,60%) var(--pointer-y,40%),rgba(var(--sopax-cyan),var(--sopax-spotlight)),transparent 76%),radial-gradient(140px circle at var(--pointer-x,60%) var(--pointer-y,40%),rgba(var(--sopax-violet),var(--sopax-spotlight)),transparent 90%),linear-gradient(112deg,transparent 8%,rgba(235,247,255,.15) 12%,transparent 22%,transparent 76%,rgba(204,213,255,.08) 82%,transparent 87%);
}
@media (min-width:1025px) and (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
    .is-glass-pointed { --sopax-spotlight: .075; }
    :is(#goToCases,#openContact,#mobileMenuToggle,.scroll-top-btn.visible,.contact-panel .contact-link,.contact-close):hover {
        transform: translateY(-1px) scale(1.018) !important;
        border-color: rgba(230,247,255,.65) !important;
        box-shadow: var(--sopax-glass-shadow),inset 0 0 12px rgba(var(--sopax-cyan),.035) !important;
    }
    .hero-benefit.is-glass-pointed .benefit-glass { border-color: rgba(232,246,255,.59); }
}
:is(#goToCases,#openContact,#mobileMenuToggle,.scroll-top-btn.visible,.contact-panel .contact-link,.contact-close):active { transform: scale(.989) !important; }
:is(#goToCases,#openContact,#mobileMenuToggle,.scroll-top-btn,.contact-panel .contact-link,.contact-close):focus-visible {
    outline: 2px solid #a9d3ff !important; outline-offset: 4px;
}
@media (max-width:743px) {
    .hero #openContact,.hero #mobileMenuToggle { width:44px !important; min-width:44px; height:44px !important; flex-basis:44px; }
    .hero .header { height:44px !important; min-height:44px !important; }
}
@media (prefers-reduced-motion:reduce) {
    :is(#goToCases,#openContact,#mobileMenuToggle,.scroll-top-btn,.contact-panel .contact-link,.contact-close) { transition:none !important; }
    :is(#goToCases,#openContact,#mobileMenuToggle,.scroll-top-btn.visible,.contact-panel .contact-link,.contact-close):is(:hover,:active) { transform:none !important; }
    .is-glass-pointed { --sopax-spotlight:0; }
}

/* control-materials.css */
/* Shared button material. Layout, labels and existing branded animations stay intact. */
@property --pointer-x { syntax: '<percentage>'; inherits: true; initial-value: 50%; }
@property --pointer-y { syntax: '<percentage>'; inherits: true; initial-value: 20%; }
@property --material-spotlight { syntax: '<number>'; inherits: true; initial-value: .03; }
#sopaxSite .sopax-material-filters { position: absolute; pointer-events: none; }
#sopaxSite .sopax-glass-control {
    --material-ease: cubic-bezier(.2,.7,.2,1);
    --material-duration: 340ms;
    --material-spotlight: .03;
    isolation: isolate; overflow: hidden;
    background: linear-gradient(135deg,rgba(255,255,255,.055),rgba(49,65,168,.09) 46%,rgba(4,8,24,.44)) !important;
    border-color: transparent !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.17),inset 0 -12px 28px rgba(49,63,161,.05),0 7px 18px rgba(4,7,20,.22) !important;
    backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
    color: #eef4ff; touch-action: manipulation;
    transition: transform var(--material-duration) var(--material-ease),box-shadow var(--material-duration) var(--material-ease),background-color var(--material-duration) var(--material-ease),--pointer-x 340ms var(--material-ease),--pointer-y 340ms var(--material-ease),--material-spotlight var(--material-duration) var(--material-ease),opacity 200ms ease,visibility 200ms !important;
}
#sopaxSite :is(.primary-btn,.process-btn,.contacts-btn,.calc-send-btn,.case-action-link,.contact-item).sopax-glass-control { position: relative; }
#sopaxSite .sopax-glass-surface {
    display: block !important; position: absolute; inset: 1px; z-index: -1;
    width: auto; height: auto; border-radius: inherit; pointer-events: none;
    background: radial-gradient(ellipse at 12% 0%,rgba(255,255,255,.09),transparent 57%),linear-gradient(115deg,rgba(255,255,255,.035),rgba(49,65,168,.035) 46%,rgba(4,8,24,.12));
    -webkit-backdrop-filter: blur(26px) saturate(155%);
    backdrop-filter: url("#sopax-liquid-glass") blur(26px) saturate(155%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.10);
}
/* User image reference: Efecto Dorado 1, adapted as translucent glass. */
#sopaxSite .sopax-gold-control {
    background: linear-gradient(90deg,rgba(246,224,115,.78) 0%,rgba(194,143,26,.74) 24%,rgba(249,227,122,.82) 50%,rgba(183,140,26,.70) 74%,rgba(240,217,108,.78) 100%),linear-gradient(135deg,rgba(255,255,255,.12),rgba(49,65,168,.025) 46%,rgba(4,8,24,.20)) !important;
    color: #0a0e18 !important; text-shadow: 0 1px 0 rgba(255,245,189,.16) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.17),inset 0 -12px 28px rgba(49,63,161,.05),0 7px 18px rgba(4,7,20,.22) !important;
}
#sopaxSite .sopax-gold-control .sopax-glass-surface {
    background: radial-gradient(ellipse at 16% 0%,rgba(249,227,122,.20),transparent 43%),linear-gradient(90deg,rgba(246,224,115,.06),rgba(194,143,26,.04) 24%,rgba(249,227,122,.10) 50%,rgba(183,140,26,.035) 74%,rgba(240,217,108,.06));
    box-shadow: inset 0 1px 0 rgba(249,227,122,.10);
}
#sopaxSite .sopax-gold-control .sopax-glass-surface::after {
    background: radial-gradient(110px circle at var(--pointer-x) var(--pointer-y),rgba(249,227,122,var(--material-spotlight)),transparent 75%),linear-gradient(90deg,transparent 18%,rgba(246,224,115,.08) 28%,transparent 35%,rgba(249,227,122,.12) 44%,rgba(249,227,122,.22) 49%,rgba(249,227,122,.07) 54%,transparent 60%,rgba(240,217,108,.10) 78%,transparent 91%);
}
#sopaxSite .sopax-gold-control.primary-btn::before { opacity: .14; }
#sopaxSite .sopax-glass-surface::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit;
    /* Noise/displacement affects the reflection only, never the label. */
    filter: url("#sopax-liquid-glass");
    background: radial-gradient(110px circle at var(--pointer-x) var(--pointer-y),rgba(238,244,255,var(--material-spotlight)),transparent 75%),linear-gradient(118deg,transparent 4%,rgba(238,244,255,.07) 8%,rgba(220,231,255,.025) 14%,transparent 21%,transparent 78%,rgba(142,99,255,.05) 83%,transparent 90%);
    transition: opacity var(--material-duration) var(--material-ease),filter var(--material-duration) var(--material-ease),transform 140ms var(--material-ease);
}
#sopaxSite .sopax-glass-control:not(.primary-btn)::before,
#sopaxSite .sopax-glass-control:not(.primary-btn)::after { content: none !important; }
#sopaxSite .sopax-glass-control:focus-visible { outline: 2px solid #eef4ff !important; outline-offset: 4px; }
#sopaxSite .sopax-glass-control:is(:disabled,[aria-disabled="true"]) { opacity: .45; cursor: not-allowed; pointer-events: none; transform: none !important; }
/* Static navigation text stays calm; links do not receive button material children. */
#sopaxSite .hero .nav a { color: #dce7ff; background: transparent; box-shadow: none; }
#sopaxSite .hero .nav a:focus-visible { outline: 2px solid #eef4ff; outline-offset: 1px; color: white; }
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
    #sopaxSite .sopax-glass-control:hover {
        --material-duration: 270ms; --material-spotlight: .08;
        transform: translateY(-1px) scale(1.02) !important;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.22),inset 0 -1px 0 rgba(142,99,255,.06),0 10px 25px rgba(4,7,20,.26) !important;
    }
    #sopaxSite .sopax-icon-control:hover { transform: translateY(-1px) scale(1.015) !important; --material-spotlight: .06; }
    #sopaxSite .sopax-glass-control:hover .sopax-glass-surface::after { opacity: 1; filter: url("#sopax-liquid-glass") brightness(1.02); }
    #sopaxSite .hero .nav a:hover { color: white; background: rgba(220,231,255,.055); box-shadow: none; }
}
#sopaxSite .sopax-glass-control:active {
    --material-duration: 130ms; --material-spotlight: .05;
    transform: translateY(1px) scale(.987) !important; filter: none !important;
    box-shadow: inset 0 2px 5px rgba(4,7,20,.32),inset 0 1px 0 rgba(238,244,255,.12),0 2px 6px rgba(4,7,20,.20) !important;
}
#sopaxSite .sopax-glass-control:active .sopax-glass-surface::after { transform: scaleY(.94); }
@media (max-width:743px) {
    #sopaxSite .mobile-menu-toggle[aria-expanded="true"] > span:nth-of-type(2) { transform: translateY(-3.5px) rotate(-45deg); }
    #sopaxSite .sopax-icon-control,#sopaxSite #openContact { min-width: 44px; min-height: 44px; }
    #sopaxSite .hero .nav a { min-height: 44px; box-sizing: border-box; }
    #sopaxSite .sopax-glass-surface { -webkit-backdrop-filter: blur(16px); backdrop-filter: url("#sopax-liquid-glass") blur(16px); }
}
/* Existing cards: surface intensity varies, card and carousel geometry is unchanged. */
#sopaxSite .sopax-glass-panel { position: relative; isolation: isolate; background: transparent !important;
    border-color: rgba(206,221,255,.30) !important;
    box-shadow: inset 0 1px 1px rgba(238,244,255,.38),inset -1px -1px 2px rgba(150,119,240,.20),0 9px 25px rgba(4,7,20,.20) !important; }
#sopaxSite .sopax-panel-surface { display: block; position: absolute; inset: 1px; border-radius: inherit; z-index: -1; pointer-events: none;
    background: radial-gradient(ellipse at 12% 0%,rgba(219,235,255,.19),transparent 55%),linear-gradient(125deg,rgba(104,140,203,.22),rgba(16,32,70,.30) 52%,rgba(125,97,202,.17));
    -webkit-backdrop-filter: blur(9px) saturate(125%); backdrop-filter: url("#sopax-liquid-glass") blur(9px) saturate(125%);
    box-shadow: inset 1px 1px 4px rgba(238,244,255,.15),inset -2px -2px 6px rgba(148,111,228,.16); }
#sopaxSite .sopax-panel-surface::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; filter: url("#sopax-liquid-glass");
    background: linear-gradient(116deg,transparent 3%,rgba(220,231,255,.10) 8%,transparent 18%,transparent 75%,rgba(178,158,242,.09) 86%,transparent 96%); }
#sopaxSite .audience-item .sopax-panel-surface,#sopaxSite .audience-why-card .sopax-panel-surface {
    background: radial-gradient(ellipse at 16% 0%,rgba(230,240,255,.22),transparent 65%),linear-gradient(120deg,rgba(147,181,229,.19),rgba(32,48,93,.25),rgba(153,132,211,.14)); }
#sopaxSite .audience-info { background: transparent !important; }
#sopaxSite .team-card { background: transparent !important; border-color: rgba(211,221,255,.32); box-shadow: inset 0 1px 1px rgba(238,244,255,.32),0 9px 25px rgba(4,7,20,.20); }
#sopaxSite .team-card::after { background: radial-gradient(ellipse at 16% 0%,rgba(223,235,255,.18),transparent 63%),linear-gradient(125deg,rgba(110,139,205,.32),rgba(29,32,70,.52),rgba(147,117,211,.30)) !important;
    -webkit-backdrop-filter: blur(9px) saturate(125%); backdrop-filter: url("#sopax-liquid-glass") blur(9px) saturate(125%); }
/* Keep the original rotating founder/value border animation, confined to its edge. */
#sopaxSite :is(.team-card,.value-card)::before { padding: 1px; -webkit-mask: linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); mask-composite: exclude; }
#sopaxSite .value-card::after { background: transparent !important; }
#sopaxSite .value-card .sopax-panel-surface { background: radial-gradient(ellipse at 12% 0%,rgba(225,239,255,.12),transparent 65%),linear-gradient(125deg,rgba(83,120,190,.30),rgba(22,36,72,.48),rgba(137,109,194,.28)); }
#sopaxSite .solutions-row:not(.solutions-head) { background: linear-gradient(125deg,rgba(104,140,203,.26),rgba(24,36,77,.40),rgba(148,120,208,.24)); }
#sopaxSite :is(.case-card,.team-card,.audience-item,.audience-why-card,.value-card) p,
#sopaxSite .case-card li { color: rgba(241,245,255,.88); }
@media (max-width:743px) {
    #sopaxSite .sopax-panel-surface,#sopaxSite .team-card::after { -webkit-backdrop-filter: blur(5px); backdrop-filter: url("#sopax-liquid-glass") blur(5px); }
}
@media (prefers-reduced-motion:reduce) {
    #sopaxSite .sopax-glass-control { transition: none !important; }
    #sopaxSite .sopax-glass-control:is(:hover,:active) { transform: none !important; }
    #sopaxSite .sopax-glass-surface::after { transform: none !important; transition: none; background: linear-gradient(120deg,rgba(238,244,255,.12),transparent 35%,rgba(114,79,216,.10)); }
}
@media (prefers-reduced-transparency:reduce),(prefers-contrast:more) {
    #sopaxSite .sopax-glass-control,#sopaxSite .team-card::after,#sopaxSite .sopax-panel-surface { background: #09122c !important; }
    #sopaxSite .sopax-glass-surface,#sopaxSite .sopax-panel-surface,#sopaxSite .team-card::after { backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* Stacked glass must not superimpose three projects' text. Preserve the rear
   shells and their transforms; only the active/leaving card exposes content. */
#sopaxSite .mobile-card-deck .case-card:not(.is-active):not(.is-leaving) > :not(.sopax-panel-surface),
#sopaxSite .mobile-card-deck .case-card:not(.is-active):not(.is-leaving) > :not(.sopax-panel-surface) * { visibility: hidden !important; }
#sopaxSite .case-number { color: #bed4ff; }

@media (prefers-reduced-transparency:reduce),(prefers-contrast:more) {
    #sopaxSite .sopax-gold-control { background: #09122c !important; color: #eef4ff !important; }
}

/* Approved ordinary secondary surfaces stay unchanged. */
#sopaxSite :is(#goToCases,#openContact,.secondary-btn).sopax-glass-control {
    background: linear-gradient(135deg,rgba(235,245,255,.24),rgba(136,172,230,.18) 46%,rgba(4,8,24,.06)) !important;
}
#sopaxSite :is(#goToCases,#openContact,.secondary-btn) .sopax-glass-surface {
    background: radial-gradient(ellipse at 12% 0%,rgba(226,239,255,.26),transparent 57%),linear-gradient(115deg,rgba(255,255,255,.075),rgba(136,172,230,.055) 46%,rgba(4,8,24,.035));
}
/* Matte utility contrast comes from internal light, never an external halo. */
#sopaxSite :is(.sopax-icon-control,.project-focus-close).sopax-glass-control {
    background: linear-gradient(135deg,rgba(148,187,244,.25),rgba(73,91,161,.24) 46%,rgba(15,25,51,.38)) !important;
    color: #f4f8ff !important; filter: none !important;
    box-shadow: inset 0 1px 2px rgba(170,202,245,.08),0 5px 14px rgba(4,7,20,.20) !important;
}
#sopaxSite :is(.sopax-icon-control,.project-focus-close) .sopax-glass-surface {
    background: radial-gradient(ellipse at 22% 5%,rgba(170,205,250,.20),transparent 66%),linear-gradient(125deg,rgba(124,163,219,.08),rgba(108,94,195,.08));
    box-shadow: none;
}
#sopaxSite :is(.sopax-icon-control,.project-focus-close) .sopax-glass-surface::after {
    opacity: 1;
    background: linear-gradient(118deg,transparent 6%,rgba(175,207,248,.10) 18%,transparent 38%,transparent 70%,rgba(158,138,230,.08) 85%,transparent 96%);
}
#sopaxSite #projectFocusOverlay.is-pointer-open .project-focus-close { outline: none !important; }
/* Contact sheet radius hierarchy: 32 outer / 20 option areas / 12 icons. */
#sopaxSite #contactPanel {
    border-radius: 32px !important;
    border-color: rgba(160,184,220,.14) !important;
    box-shadow: inset 0 1px 0 rgba(160,184,220,.06),0 24px 70px rgba(1,4,14,.32) !important;
}
#sopaxSite #contactPanel .contact-link {
    border-radius: 20px !important; border-color: transparent !important;
    background: linear-gradient(125deg,rgba(159,187,226,.12),rgba(67,85,136,.08) 55%,rgba(112,96,175,.10)) !important;
    box-shadow: 0 5px 14px rgba(4,7,20,.13) !important;
}
#sopaxSite #contactPanel .contact-link .sopax-glass-surface {
    background: radial-gradient(ellipse at 18% 0%,rgba(200,221,250,.055),transparent 64%),linear-gradient(125deg,rgba(124,157,206,.035),rgba(114,93,185,.025));
    box-shadow: none;
}
#sopaxSite #contactPanel .contact-link .sopax-glass-surface::after { opacity: .16; }
#sopaxSite #contactPanel .contact-close { border-radius: 12px !important; }
#sopaxSite .scroll-top-btn.sopax-glass-control {
    background: linear-gradient(130deg,rgba(158,195,245,.32),rgba(64,86,142,.32) 55%,rgba(99,87,173,.27)) !important;
}
#sopaxSite .scroll-top-btn svg { stroke: #f5f9ff; stroke-width: 2.2; opacity: 1; }
@media (max-width:743px) {
    #sopaxSite #openContact.sopax-glass-control {
        background: linear-gradient(135deg,rgba(148,187,244,.25),rgba(73,91,161,.24) 46%,rgba(15,25,51,.38)) !important;
        box-shadow: inset 0 1px 2px rgba(170,202,245,.08),0 5px 14px rgba(4,7,20,.20) !important;
    }
    #sopaxSite #openContact .sopax-glass-surface { background: radial-gradient(ellipse at 22% 5%,rgba(170,205,250,.20),transparent 66%),linear-gradient(125deg,rgba(124,163,219,.08),rgba(108,94,195,.08)); box-shadow: none; }
}
@media (hover:hover) and (pointer:fine) {
    #sopaxSite :is(.sopax-icon-control,.project-focus-close).sopax-glass-control:hover {
        background: linear-gradient(135deg,rgba(165,202,250,.32),rgba(86,107,178,.28) 46%,rgba(20,32,62,.32)) !important;
        box-shadow: inset 0 1px 2px rgba(175,208,248,.10),0 6px 15px rgba(4,7,20,.22) !important;
        color: #fff !important;
    }
    #sopaxSite .scroll-top-btn.visible:hover { transform: translateY(-1px) scale(1.015) !important; }
    #sopaxSite .scroll-top-btn:hover svg { stroke: #fff; transform: translateY(-1px); }
    #sopaxSite #contactPanel .contact-link:hover { background: linear-gradient(125deg,rgba(172,199,238,.17),rgba(72,93,149,.11) 55%,rgba(121,104,186,.13)) !important; box-shadow: 0 5px 14px rgba(4,7,20,.16) !important; }
}
#sopaxSite .scroll-top-btn:focus-visible { outline: 2px solid #a9cdff !important; outline-offset: 4px; }
@media (prefers-reduced-motion:reduce) {
    #sopaxSite .scroll-top-btn.visible:hover,#sopaxSite .scroll-top-btn:hover svg { transform: none !important; }
}

/* targeted-refinement.css */
/* Targeted Oct 2 refinement. Existing section geometry remains the source of truth. */
:root { --sopax-font: ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"; }
#sopaxSite,#sopaxSite * { font-family: var(--sopax-font); }
#sopaxSite :is(h1,h2) { font-weight: 800 !important; letter-spacing: -.025em !important; }
#sopaxSite :is(h3,h4) { font-weight: 700 !important; }
#sopaxSite :is(p,li,input,textarea) { font-weight: 400; }
#sopaxSite :is(button,.case-action-link,.contact-link) { font-weight: 600; }
#sopaxSite :is(.section-label,.contact-label) { font-weight: 600; }
#sopaxSite .hero .nav a {
    position: relative; isolation: isolate; overflow: hidden;
    --nav-light: 0;
    transition: color 220ms ease,box-shadow 260ms ease,transform 220ms ease,--pointer-x 340ms ease,--pointer-y 340ms ease;
}
#sopaxSite .hero .nav a::before {
    content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
    pointer-events: none; opacity: var(--nav-light);
    background: radial-gradient(70px circle at var(--pointer-x,50%) var(--pointer-y,20%),rgba(240,247,255,.30),transparent 85%),linear-gradient(115deg,rgba(223,236,255,.12),rgba(93,118,235,.08),rgba(175,143,245,.13));
    box-shadow: inset 0 1px 0 rgba(239,247,255,.42),inset 0 -1px 0 rgba(167,153,244,.22);
    backdrop-filter: url("#sopax-liquid-glass") blur(4px);
    transition: opacity 260ms ease;
}
@media (hover:hover) and (pointer:fine) {
    #sopaxSite .hero .nav a:hover { --nav-light: 1; background: transparent; color: #fff; box-shadow: 0 4px 12px rgba(2,5,18,.16); }
}
#sopaxSite .hero .nav a:focus-visible { --nav-light: 1; outline: 2px solid #eef4ff; outline-offset: 2px; }
#sopaxSite .hero .nav a:active { transform: translateY(1px); }

/* More translucent informational glass, with readable foreground text. */
#sopaxSite :is(.service-card,.process-card,.contacts-card).sopax-glass-panel { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
#sopaxSite :is(.service-card,.process-card)::after { content: none !important; }
#sopaxSite :is(.service-card,.process-card)::before {
    padding: 1px; -webkit-mask: linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor; mask: linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); mask-composite: exclude;
}
#sopaxSite :is(.service-card,.process-card,.contacts-card) .sopax-panel-surface {
    background: radial-gradient(ellipse at 12% -5%,rgba(235,246,255,.22),transparent 62%),linear-gradient(120deg,rgba(150,185,230,.17),rgba(27,43,84,.26) 55%,rgba(151,121,214,.15));
    backdrop-filter: url("#sopax-liquid-glass") blur(8px) saturate(125%);
    -webkit-backdrop-filter: blur(8px) saturate(125%);
}
#sopaxSite :is(.service-card,.process-card,.contacts-card) p { color: #e0e7f5 !important; }
#sopaxSite .contacts-card .sopax-panel-surface { background: radial-gradient(ellipse at 18% 0%,rgba(228,243,255,.24),transparent 70%),linear-gradient(120deg,rgba(109,151,219,.18),rgba(20,36,77,.23),rgba(156,123,221,.17)); }

/* Advantages are text, not individual material panels. */
#sopaxSite .audience-why-card {
    background: transparent !important; border-color: transparent !important;
    box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
#sopaxSite .audience-why-card::before,#sopaxSite .audience-why-card::after { content: none !important; }
#sopaxSite .audience-why-card .sopax-panel-surface { display: none; }
#sopaxSite .solutions-top { background: transparent !important; border: none !important; box-shadow: none !important; backdrop-filter: none !important; }
#sopaxSite .solutions-top::before,#sopaxSite .solutions-top::after { content: none !important; }

/* Floating contact sheet. Blur/refraction is confined to a decorative layer. */
#sopaxSite .contact-overlay,#sopaxSite .calc-modal-overlay {
    background: rgba(2,5,18,.30) !important;
    backdrop-filter: blur(4px) saturate(105%) !important; -webkit-backdrop-filter: blur(4px) saturate(105%) !important;
    transition: opacity 300ms ease,visibility 300ms !important;
}
#sopaxSite :is(.contact-panel,.calc-modal) {
    isolation: isolate; background: rgba(13,26,55,.25) !important;
    border: 1px solid rgba(219,234,255,.36) !important;
    box-shadow: inset 0 1px 0 rgba(250,253,255,.48),inset -1px -1px 0 rgba(159,142,235,.20),0 24px 70px rgba(1,4,14,.38) !important;
    backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
#sopaxSite :is(.contact-panel,.calc-modal)::before {
    content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1; pointer-events: none;
    background: radial-gradient(ellipse at 6% 0%,rgba(233,246,255,.23),transparent 64%),linear-gradient(125deg,rgba(104,148,217,.18),rgba(15,29,67,.26),rgba(146,118,218,.18));
    backdrop-filter: url("#sopax-liquid-glass") blur(12px) saturate(130%);
    -webkit-backdrop-filter: blur(12px) saturate(130%);
}
#sopaxSite .contact-panel {
    top: 18px !important; right: 18px !important; bottom: 18px !important; left: auto !important;
    width: min(430px,calc(100% - 36px)) !important; height: calc(100dvh - 36px) !important;
    border-radius: 28px !important; padding: 82px 28px 32px !important;
    opacity: 0; visibility: hidden; transform: translateX(calc(100% + 36px)) !important;
    transition: transform 380ms cubic-bezier(.22,.75,.25,1),opacity 260ms ease,visibility 380ms !important;
}
#sopaxSite .contact-panel.active { opacity: 1; visibility: visible; transform: translateX(0) !important; }
#sopaxSite .contact-panel-content { height: auto !important; min-height: 100%; justify-content: center; gap: 0; }
#sopaxSite .contact-panel .contact-label { font-size: 26px !important; letter-spacing: .10em; margin-bottom: 28px; color: #e4eeff; }
#sopaxSite .contact-panel .contact-link { min-height: 68px !important; height: auto !important; padding: 20px 12px !important; gap: 12px !important; font-size: 15px !important; }
#sopaxSite .contact-panel .contact-link:last-child { margin-bottom: 0; }
#sopaxSite .contact-close { width: 44px !important; height: 44px !important; top: 20px !important; right: 20px !important; }
#sopaxSite .calc-modal { transition: opacity 300ms ease,visibility 300ms,transform 340ms cubic-bezier(.22,.75,.25,1) !important; }
#sopaxSite .calc-modal input:focus-visible,#sopaxSite .calc-modal textarea:focus-visible { outline: 2px solid #dce9ff; outline-offset: 2px; }
html:has(#contactPanel.active,#calcModal.active) { overflow: hidden; }
html { scrollbar-gutter: stable; }

/* Translucent rear shells must not reveal stacked category/value text. */
#sopaxSite .mobile-card-deck :is(.service-card,.value-card).deck-card:not(.is-active):not(.is-leaving) > :not(.sopax-panel-surface),
#sopaxSite .mobile-card-deck :is(.service-card,.value-card).deck-card:not(.is-active):not(.is-leaving) > :not(.sopax-panel-surface) * { visibility: hidden !important; }
#sopaxSite .solutions-controls { display: none; }
@media (max-width:430px) {
    #sopaxSite .solutions-table { touch-action: pan-y !important; }
    #sopaxSite .solutions-row:not(.solutions-head) {
        isolation: isolate; background: transparent !important;
        border-color: rgba(218,231,255,.34) !important;
        box-shadow: inset 0 1px 0 rgba(242,247,255,.35),0 12px 28px rgba(2,5,18,.25) !important;
        transition: transform 400ms cubic-bezier(.22,.75,.25,1),opacity 300ms ease,visibility 400ms !important;
    }
    #sopaxSite .solutions-row:not(.solutions-head)::after {
        z-index: -1 !important; opacity: 1 !important;
        background: radial-gradient(ellipse at 8% 0%,rgba(230,244,255,.25),transparent 70%),linear-gradient(120deg,rgba(134,170,223,.32),rgba(24,36,77,.52),rgba(148,120,208,.30)) !important;
        backdrop-filter: url("#sopax-liquid-glass") blur(5px); -webkit-backdrop-filter: blur(5px);
    }
    #sopaxSite .solutions-row:not(.solutions-head):not(.is-active):not(.is-leaving-left):not(.is-leaving-right) > div { visibility: hidden !important; }
    #sopaxSite .solutions-row > div { color: #eef3ff !important; }
    #sopaxSite .solutions-row > div::before { color: #b9d2ff !important; }
    #sopaxSite .solutions-table::before,#sopaxSite .solutions-table::after { background: rgba(116,136,213,.15) !important; }
    #sopaxSite .solutions-controls { display: flex; justify-content: center; align-items: center; gap: 16px; margin-top: 24px; }
    #sopaxSite .solutions-controls button { position: relative; isolation: isolate; appearance: none; -webkit-appearance: none; border: 0; padding: 0; font-size: 18px; width: 44px; height: 44px; border-radius: 14px; color: #eef4ff; cursor: pointer; }
    #sopaxSite .solutions-status { min-width: 52px; text-align: center; font-size: 12px; color: #dce9ff; }
    #sopaxSite .solutions-swipe-hint { margin-top: 12px !important; }
}
@media (max-width:743px) {
    #sopaxSite :is(.service-card,.process-card,.contacts-card) .sopax-panel-surface { backdrop-filter: url("#sopax-liquid-glass") blur(5px); -webkit-backdrop-filter: blur(5px); }
    #sopaxSite .contact-panel {
        top: auto !important; bottom: max(14px,env(safe-area-inset-bottom)) !important;
        right: 14px !important; left: 14px !important; width: auto !important; height: auto !important;
        max-height: calc(100dvh - 28px); padding: 72px 22px 26px !important;
        border-radius: 28px !important; transform: translateY(calc(100% + 28px)) !important;
    }
    #sopaxSite .contact-panel.active { transform: translateY(0) !important; }
    #sopaxSite .contact-panel-content { min-height: 0; }
    #sopaxSite .contact-panel .contact-label { font-size: 23px !important; margin-bottom: 24px; }
    #sopaxSite .contact-panel .contact-link { font-size: 14px !important; margin-bottom: 12px; }
    #sopaxSite .calc-modal {
        top: calc((100dvh + env(safe-area-inset-top) - env(safe-area-inset-bottom))/2) !important;
        bottom: auto !important; left: 14px !important; right: 14px !important;
        width: auto !important; max-width: none !important;
        max-height: calc(100dvh - 28px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
        overflow-y: auto; overscroll-behavior: contain;
        transform: translateY(calc(-50% + 12px)) !important;
    }
    #sopaxSite .calc-modal.active { transform: translateY(-50%) !important; }
    #sopaxSite :is(.contact-panel,.calc-modal)::before { backdrop-filter: url("#sopax-liquid-glass") blur(7px); -webkit-backdrop-filter: blur(7px); }
}
@media (prefers-reduced-motion:reduce) {
    #sopaxSite :is(.contact-panel,.calc-modal,.contact-overlay,.calc-modal-overlay),#sopaxSite .solutions-row { transition: none !important; }
    #sopaxSite .hero .nav a,#sopaxSite .hero .nav a::before { transition: none; }
    #sopaxSite .hero .nav a:active { transform: none; }
}
@media (prefers-reduced-transparency:reduce),(prefers-contrast:more) {
    #sopaxSite :is(.contact-panel,.calc-modal),#sopaxSite .solutions-row:not(.solutions-head)::after { background: #111c36 !important; }
    #sopaxSite :is(.contact-panel,.calc-modal)::before { backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* rim-about-hand.css */
/* Retain the original column widths in one top-aligned natural row. */
@media (min-width:1025px) {
    #sopaxSite .about { height: auto; min-height: 0; justify-content: flex-start; }
    #sopaxSite .about > .section-label { position: relative; inset: auto; width: 100%; margin-bottom: 28px; }
    #sopaxSite .about-hero { align-items: start; row-gap: 48px; margin-bottom: 4px; }
    #sopaxSite .about-left { grid-column: 1; grid-row: 1; }
    #sopaxSite .team-block { grid-column: 2; grid-row: 1; margin-top: 48px; }
}

/* Only internal About spacing; content, type and natural row heights retained. */
#sopaxSite .about-left h2 { margin-bottom: 24px; }
#sopaxSite .about-text { display: grid; gap: 12px; }
#sopaxSite .team-block > h3 { margin-bottom: 24px; }
#sopaxSite .team-cards { gap: 24px; }
@media (min-width:744px) and (max-width:1024px) {
    #sopaxSite .about-hero { gap: 32px !important; }
    #sopaxSite .about-left h2,#sopaxSite .team-block > h3 { margin-bottom: 24px !important; }
    #sopaxSite .team-cards { gap: 24px !important; }
    #sopaxSite .about-values-wrap { margin-top: 24px !important; }
}
@media (max-width:743px) {
    #sopaxSite .about-hero { gap: 32px !important; }
    #sopaxSite .about-text { gap: 8px; }
    #sopaxSite .about-left h2,#sopaxSite .team-block > h3 { margin-bottom: 16px !important; }
    #sopaxSite .team-cards { gap: 16px !important; }
    #sopaxSite .about-values-wrap { margin-top: 36px !important; }
}

#sopaxSite .project-hand-composition { width: 100%; max-width: 1440px; margin: 0 auto; }
#sopaxSite .project-hand-composition.is-hand-ready { display: block; }
#sopaxSite .project-hand { min-width: 0; }
#sopaxSite .project-hand-stage { position: relative; min-height: 360px; width: 100%; perspective: 1200px; touch-action: pan-y; }
#sopaxSite .project-hand-card {
    position: absolute; left: 50%; top: 0; width: 180px; height: 256px;
    margin: 0; padding: 18px; box-sizing: border-box; border: 1px solid; border-radius: 24px;
    overflow: hidden; cursor: pointer; transform-origin: 50% 90%;
    transform: translateX(-50%) translate3d(var(--hand-x),var(--hand-y),0) rotate(var(--hand-angle)) scale(var(--hand-scale));
    transition: transform 480ms cubic-bezier(.22,.75,.25,1),opacity 180ms ease;
}
#sopaxSite .project-hand-face { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; width: 100%; height: 100%; text-align: center; }
#sopaxSite .project-hand-card .case-number { margin: 0; }
#sopaxSite .project-hand-card .case-image-placeholder { width: 68px !important; height: 68px !important; border-radius: 16px; flex-shrink: 0; }
#sopaxSite .project-hand-card img { width: 100% !important; height: 100% !important; min-width: 0 !important; min-height: 0 !important; max-width: 100% !important; max-height: 100% !important; object-fit: contain !important; }
#sopaxSite .project-hand-card h3 { font-size: 14px; line-height: 1.2; letter-spacing: -.02em; margin: 0; text-align: center; overflow-wrap: anywhere; }
#sopaxSite .project-hand-caption { font-size: 11px; line-height: 1.4; color: rgba(241,245,255,.88); margin: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
#sopaxSite .project-hand-card.is-selected { border-color: rgba(238,245,255,.7) !important; }
#sopaxSite .project-hand-card.is-project-origin { opacity: 0; }
#sopaxSite .project-hand-card:focus-visible { outline: 3px solid #e8f1ff; outline-offset: 4px; }
#sopaxSite .project-hand-controls { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 48px; }
#sopaxSite .project-hand-controls button { position: relative; width: 44px; height: 44px; padding: 0; border: 1px solid; border-radius: 14px; color: white; font-size: 20px; cursor: pointer; }
#sopaxSite .project-hand-controls [role="status"] { max-width: 240px; font-size: 12px; line-height: 1.4; text-align: center; }

/* Native top layer gives the focused card real modality and background inertness. */
#sopaxSite .project-focus-overlay { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; border: 0; padding: 24px; background: transparent; color: inherit; overflow: hidden; box-sizing: border-box; }
#sopaxSite .project-focus-overlay[open] { display: grid; place-items: center; }
#sopaxSite .project-focus-overlay::backdrop { background: rgba(3,7,22,0); backdrop-filter: blur(0); transition: background-color 400ms ease,backdrop-filter 400ms ease; }
#sopaxSite .project-focus-overlay.is-open::backdrop { background: rgba(3,7,22,.62); backdrop-filter: blur(2px); }
#sopaxSite .project-focus-card { position: relative; width: min(720px,100%) !important; max-width: 720px !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; max-height: calc(100dvh - 48px) !important; margin: 0 !important; padding: 20px 28px 16px !important; overflow-x: hidden !important; overflow-y: auto !important; overscroll-behavior: contain; scrollbar-width: thin; }
#sopaxSite .project-focus-card[hidden] { display: none !important; }
#sopaxSite .project-focus-card .case-head { display: grid !important; grid-template-columns: 80px minmax(0,1fr) !important; gap: 20px !important; margin: 0 48px 12px 0 !important; align-items: center; }
#sopaxSite .project-focus-card .case-head h3 { font-size: 24px !important; line-height: 1.1 !important; }
#sopaxSite .project-focus-card .case-image-placeholder { width: 80px !important; height: 80px !important; }
#sopaxSite .project-focus-card .case-image-placeholder img { object-fit: contain !important; }
/* Independent column flow: a short left block never inherits the right row height.
   Original DOM order stays intact for reading and the existing mobile stack. */
#sopaxSite .project-focus-copy { display: flow-root; }
#sopaxSite .project-detail-section { min-width: 0; width: calc((100% - 24px)/2); margin-bottom: 10px; }
#sopaxSite .project-detail-section:nth-child(odd) { float: left; clear: left; }
#sopaxSite .project-detail-section:nth-child(even) { float: right; clear: right; }
#sopaxSite .project-detail-section:nth-last-child(-n+2) { margin-bottom: 0; }
#sopaxSite .project-focus-copy h4 { margin: 0 0 6px !important; }
#sopaxSite .project-focus-card p,#sopaxSite .project-focus-card li { font-size: 14px !important; line-height: 1.45 !important; }
#sopaxSite .project-focus-copy ul { gap: 4px; margin: 0; }
#sopaxSite .project-focus-card .case-action { flex-shrink: 0; margin-top: 12px; }
#sopaxSite .project-focus-close { position: absolute; top: 16px; right: 16px; z-index: 3; width: 44px; height: 44px; padding: 0; border: 1px solid; border-radius: 14px; color: white; font: inherit; font-size: 28px; line-height: 1; cursor: pointer; }
#sopaxSite .project-flight { position: fixed; left: 0; top: 0; margin: 0; transform-origin: center; transition: none; pointer-events: none; z-index: 20 !important; }
@media (hover:hover) and (pointer:fine) {
    #sopaxSite .project-hand-card:not(.project-flight):hover { transform: translateX(-50%) translate3d(var(--hand-x),calc(var(--hand-y) - 14px),0) rotate(calc(var(--hand-angle) * .8)) scale(var(--hand-scale)); }
    #sopaxSite .project-hand-card:hover .sopax-panel-surface::after { opacity: .8; }
}
@media (max-width:743px) {
    #sopaxSite .project-hand-stage { min-height: 320px; overflow: clip; }
    #sopaxSite .project-hand-card { width: min(196px,60%); }
    #sopaxSite .project-hand-card.hand-distant { opacity: .3; pointer-events: none; }
    #sopaxSite .project-hand-card.is-project-origin { opacity: 0; }
    /* One scroll container; the card and its glass grow with all of the copy. */
    #sopaxSite .project-focus-overlay { padding: max(12px,env(safe-area-inset-top)) 12px max(12px,env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain; }
    #sopaxSite .project-focus-overlay[open] { display: flex; flex-direction: column; }
    #sopaxSite .project-focus-card { padding: 16px 20px !important; max-height: none !important; overflow: visible !important; flex-shrink: 0; margin-block: auto !important; }
    #sopaxSite .project-focus-card .case-head { grid-template-columns: 56px minmax(0,1fr) !important; gap: 12px !important; margin: 12px 0 12px !important; }
    #sopaxSite .project-focus-card .case-image-placeholder { width: 56px !important; height: 56px !important; }
    #sopaxSite .project-focus-copy { display: grid; grid-template-columns: 1fr; gap: 10px; }
    #sopaxSite .project-focus-copy .project-detail-section { float: none; clear: none; width: auto; margin: 0; }
    #sopaxSite .project-focus-close { position: sticky; top: 0; right: auto; align-self: flex-end; margin-bottom: 0; }
}
@media (prefers-reduced-motion:reduce) {
    #sopaxSite .project-hand-card,#sopaxSite .project-focus-overlay::backdrop { transition: none; }
}

/* Preserved section label and Values spacing corrections. */
#sopaxSite .cases > .section-label { position: absolute !important; top: 36px !important; width: min(1200px,88vw) !important; left: max(6vw,calc((100% - 1200px)/2)) !important; margin: 0 !important; }
/* Values move up within their wrapper; the About/Founders row stays intact. */
#sopaxSite .about-section-title { margin-bottom: 12px !important; }
#sopaxSite .about-values-wrap { padding-bottom: 52px !important; }
@media (max-width:1024px) {
    #sopaxSite .cases > .section-label { position: relative !important; top: 0 !important; left: auto !important; margin: 0 auto 22px !important; }
}
@media (max-width:743px) {
    #sopaxSite .cases { padding-top: 44px !important; }
    #sopaxSite .cases > .section-label { left: auto !important; width: 100% !important; margin-bottom: 34px !important; }
    #sopaxSite .about-values-wrap { padding-bottom: 44px !important; }
}
#sopaxSite .project-hand-open-hint { margin: 0 0 12px; text-align: center; color: #becce5; font-size: 12px; line-height: 1.5; }

/* desktop-navigation.css */
/* Desktop morph overlay only; top-state and all responsive navigation styles preserved. */
#sopaxSite .desktop-menu-toggle,#sopaxSite .desktop-navigation-panel,.desktop-nav-flight { display: none; }
@media (min-width:1280px) and (hover:hover) and (pointer:fine) {
    #sopaxSite .desktop-menu-toggle {
        display: flex; position: fixed; right: 28px; top: 28px; width: 48px; height: 48px; padding: 0;
        flex-direction: column; justify-content: center; align-items: center; gap: 6px; z-index: 110;
        color: white; border: 1px solid rgba(206,221,255,.3); border-radius: 15px; cursor: pointer;
        opacity: 0; visibility: hidden; transform: scale(.78); pointer-events: none;
        transition: opacity 200ms ease 220ms,transform 320ms cubic-bezier(.22,.75,.25,1) 160ms,visibility 0s 520ms;
    }
    #sopaxSite.desktop-nav-compact .desktop-menu-toggle { opacity: 1; visibility: visible; transform: scale(1); pointer-events: auto; transition-delay: 240ms,180ms,0s; }
    #sopaxSite .desktop-menu-toggle > span { display: block; width: 18px; height: 1px; background: currentColor; position: relative; z-index: 4; transition: transform 200ms ease; }
    #sopaxSite .desktop-menu-toggle[aria-expanded="true"] > span:nth-of-type(1) { transform: translateY(3.5px) rotate(45deg); }
    #sopaxSite .desktop-menu-toggle[aria-expanded="true"] > span:nth-of-type(2) { transform: translateY(-3.5px) rotate(-45deg); }
    #sopaxSite .desktop-menu-toggle:focus-visible { outline: 3px solid #e8f1ff; outline-offset: 4px; }
    #sopaxSite.desktop-nav-compact .hero .nav,#sopaxSite .hero .nav.is-morphing { opacity: 0; pointer-events: none; }
    #sopaxSite .desktop-navigation-panel {
        display: grid; position: fixed; right: 28px; top: 88px; width: 240px; padding: 12px; box-sizing: border-box;
        z-index: 109; border: 1px solid rgba(206,221,255,.3); border-radius: 22px;
        opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-8px) scale(.98); transform-origin: top right;
        transition: opacity 180ms ease,transform 240ms cubic-bezier(.22,.75,.25,1),visibility 240ms;
    }
    #sopaxSite .desktop-navigation-panel.is-open { opacity: 1; visibility: visible; pointer-events: auto; transform: none; }
    #sopaxSite .desktop-navigation-panel a { display: flex; align-items: center; min-height: 44px; padding: 8px 14px; box-sizing: border-box; border-radius: 12px; color: #dce7ff; text-decoration: none; font-size: 14px; }
    #sopaxSite .desktop-navigation-panel a:hover,#sopaxSite .desktop-navigation-panel a:focus-visible { color: white; background: rgba(220,231,255,.08); }
    #sopaxSite .desktop-navigation-panel a:focus-visible { outline: 2px solid #e8f1ff; outline-offset: -2px; }
    .desktop-nav-flight { display: flex; align-items: center; box-sizing: border-box; position: fixed; z-index: 111; pointer-events: none; overflow: hidden; transform-origin: left top; visibility: hidden; }
    .desktop-nav-flight a { transition: opacity 100ms ease; }
    .desktop-nav-flight.is-collapsing a { opacity: 0; }
}
@media (prefers-reduced-motion:reduce) {
    #sopaxSite .desktop-menu-toggle,#sopaxSite .desktop-navigation-panel,#sopaxSite .desktop-menu-toggle > span { transition: none; }
}

/* glass-edge-radius.css */
/* Geometry and specular edge only. Approved fills, type and layout stay intact. */
#sopaxSite {
    --radius-panel: 32px;
    --radius-dialog: 28px;
    --radius-card: 24px;
    --radius-control: 16px;
    --radius-small: 12px;
    --radius-pill: 999px;
}
#sopaxSite .sopax-glass-control {
    --glass-radius: var(--radius-control);
    --edge-opacity: .62;
    border-radius: var(--glass-radius) !important;
}
#sopaxSite :is(.sopax-icon-control,.project-focus-close,#mobileMenuToggle) { --glass-radius: var(--radius-small); }
#sopaxSite #scrollTopBtn { --glass-radius: var(--radius-control); }
#sopaxSite #contactPanel { --glass-radius: var(--radius-panel); border-radius: var(--glass-radius) !important; border-color: transparent !important; box-shadow: 0 24px 70px rgba(1,4,14,.32) !important; }
#sopaxSite #contactPanel .contact-link { --glass-radius: var(--radius-control); border-radius: var(--glass-radius) !important; }
#sopaxSite #contactPanel .contact-close { border-radius: var(--radius-small) !important; }
#sopaxSite :is(.sopax-glass-panel,.team-card) {
    --glass-radius: var(--radius-card);
    --edge-opacity: .64;
    border-radius: var(--glass-radius) !important;
    border-color: transparent !important;
    box-shadow: 0 9px 25px rgba(4,7,20,.20) !important;
}
#sopaxSite .project-hand-card.is-selected { border-color: transparent !important; --edge-opacity: .92; }
#sopaxSite .project-focus-card { --glass-radius: var(--radius-dialog); }
#sopaxSite .calc-modal { --glass-radius: var(--radius-dialog); border-radius: var(--glass-radius) !important; border-color: transparent !important; box-shadow: 0 24px 70px rgba(1,4,14,.38) !important; }
#sopaxSite .calc-modal :is(input,textarea) { border-radius: var(--radius-control); }
/* Inset layers need the inset radius, not the full outer radius. Local clipping
   contains displacement/reflection pixels without clipping external shadows. */
#sopaxSite :is(.sopax-glass-surface,.sopax-panel-surface) {
    border-radius: max(0px,calc(var(--glass-radius) - 1px)) !important;
    overflow: clip;
}
#sopaxSite :is(.sopax-glass-surface,.sopax-panel-surface)::after {
    border-radius: inherit !important;
}
#sopaxSite :is(.team-card,.value-card)::after {
    border-radius: max(0px,calc(var(--glass-radius) - 1px)) !important;
    overflow: clip;
}
#sopaxSite :is(#contactPanel,.calc-modal)::before { border-radius: inherit; overflow: clip; }
/* Retire the old bright independent rims; the shared reflection replaces them. */
#sopaxSite :is(.service-card,.process-card,.value-card,.audience-item)::before { content: none !important; }
/* Reflection is confined to a fractional inner stroke. Only its light moves;
   neither the element, its mask nor its content is rotated or resized. */
#sopaxSite :is(.sopax-glass-surface,.sopax-panel-surface)::before,
#sopaxSite .team-card::before,
#sopaxSite :is(#contactPanel,.calc-modal)::after {
    content: "" !important;
    position: absolute; inset: 0; z-index: 2; pointer-events: none;
    border-radius: inherit !important; padding: .75px;
    background: linear-gradient(115deg,transparent 18%,rgba(219,234,250,.08) 34%,rgba(219,234,250,.24) 43%,rgba(171,193,232,.10) 49%,transparent 61%),linear-gradient(135deg,rgba(210,230,249,.20),rgba(150,177,218,.045) 45%,rgba(130,116,188,.12));
    background-size: 240% 100%,100% 100%; background-position: 0% 0%,0 0;
    -webkit-mask: linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
    mask-composite: exclude;
    opacity: var(--edge-opacity,.58);
    animation: sopaxSpecularEdge 16s ease-in-out infinite alternate;
    transition: opacity 260ms ease;
}
#sopaxSite .team-card::before { z-index: 2; }
/* Ordinary cards keep the static reflection until interaction; large offscreen
   decorative boxes do not need a continuously repainting light. */
#sopaxSite .sopax-panel-surface::before,
#sopaxSite .team-card::before { animation-play-state: paused; }
#sopaxSite .project-focus-card:not([hidden]) .sopax-panel-surface::before { animation-play-state: running; }
/* Internal Contact options retain their borderless appearance. */
#sopaxSite #contactPanel .contact-link { --edge-opacity: .20; }
#sopaxSite #contactPanel .contact-link .sopax-glass-surface::before { animation: none; }
@keyframes sopaxSpecularEdge {
    from { background-position: 0% 0%,0 0; }
    to { background-position: 100% 0%,0 0; }
}
@media (hover:hover) and (pointer:fine) {
    #sopaxSite :is(.sopax-glass-control,.sopax-glass-panel,.team-card):hover { --edge-opacity: .84; }
    #sopaxSite #contactPanel .contact-link:hover { --edge-opacity: .30; }
    #sopaxSite .sopax-glass-panel:hover .sopax-panel-surface::before,
    #sopaxSite .team-card:hover::before { animation-play-state: running; }
}
@media (max-width:743px) {
    #sopaxSite { --radius-card: 20px; }
    #sopaxSite #openContact { --glass-radius: var(--radius-small); }
}
@media (prefers-reduced-motion:reduce) {
    #sopaxSite :is(.sopax-glass-surface,.sopax-panel-surface)::before,
    #sopaxSite .team-card::before,
    #sopaxSite :is(#contactPanel,.calc-modal)::after {
        animation: none !important; transition: none; background-position: 48% 0%,0 0;
    }
}
/* CSS-only pause, shared by the existing visibility lifecycle. */
body[data-liquid-paused] :is(.sopax-glass-surface,.sopax-panel-surface)::before,
body[data-liquid-paused] .team-card::before,
body[data-liquid-paused] :is(#contactPanel,.calc-modal)::after { animation-play-state: paused; }

/* release-fixes.css */
/* Release correctness: a bounded shell, one content scroller, HTML-first fallback. */
#sopaxSite .project-focus-content { display: contents; }
#sopaxSite .hero .header { justify-content: flex-end !important; }
@media (max-width:743px) {
    #sopaxSite .project-focus-overlay {
        height: 100vh; height: 100dvh;
        overflow: hidden;
        padding: max(12px,env(safe-area-inset-top)) 12px max(12px,env(safe-area-inset-bottom));
    }
    #sopaxSite .project-focus-overlay[open] { display: grid; place-items: center; }
    #sopaxSite .project-focus-card {
        display: flex !important; flex-direction: column; gap: 12px;
        height: auto !important;
        max-height: calc(100vh - max(12px,env(safe-area-inset-top)) - max(12px,env(safe-area-inset-bottom))) !important;
        max-height: calc(100dvh - max(12px,env(safe-area-inset-top)) - max(12px,env(safe-area-inset-bottom))) !important;
        margin: 0 !important; overflow: hidden !important;
    }
    #sopaxSite .project-focus-close { position: relative; inset: auto; flex: 0 0 44px; align-self: flex-end; }
    #sopaxSite .project-focus-content {
        display: flex; flex-direction: column; gap: 12px;
        min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
        scrollbar-width: thin; padding-bottom: 2px;
    }
    #sopaxSite .project-focus-content > * { flex-shrink: 0; }
    #sopaxSite .project-focus-card .case-head { margin: 0 !important; }
    #sopaxSite .project-focus-card .case-action {
        position: relative !important; inset: auto !important;
        margin: 0 auto !important; flex-shrink: 0; max-width: 100%;
    }
}
/* Before enhancement, every original project and task remains readable. */
#sopaxSite .project-hand-composition:not(.is-hand-ready) .case-card {
    position: relative !important; inset: auto !important; transform: none !important;
    height: auto !important; max-height: none !important;
    opacity: 1 !important; visibility: visible !important; overflow: visible !important;
}
#sopaxSite .project-hand-composition:not(.is-hand-ready) { display: grid !important; gap: 24px; }
@media (max-width:430px) {
    #sopaxSite .solutions-table:not(.solutions-ready) {
        height: auto !important; min-height: 0 !important; max-height: none !important;
        display: grid !important; gap: 16px; overflow: visible !important;
    }
    #sopaxSite .solutions-table:not(.solutions-ready)::before,
    #sopaxSite .solutions-table:not(.solutions-ready)::after { content: none !important; }
    #sopaxSite .solutions-table:not(.solutions-ready) .solutions-row:not(.solutions-head) {
        position: relative !important; inset: auto !important; transform: none !important;
        height: auto !important; min-height: 222px !important; max-height: none !important;
        opacity: 1 !important; visibility: visible !important; filter: none !important;
        pointer-events: auto !important;
    }
    #sopaxSite .solutions-table:not(.solutions-ready) .solutions-row > div { visibility: visible !important; }
}
/* Nav-like frost. One blur per surface; the denser fill carries depth. */
#sopaxSite {
    --matte-fill: radial-gradient(ellipse at 12% 0%,rgba(210,227,255,.16),transparent 65%),
        linear-gradient(125deg,rgba(48,65,108,.82),rgba(27,32,69,.88) 55%,rgba(67,45,106,.80));
    --matte-blur: blur(10px) saturate(120%);
}
#sopaxSite :is(.service-card,.value-card) .sopax-panel-surface,
#sopaxSite .team-card::after,
#sopaxSite .solutions-row:not(.solutions-head) {
    background: var(--matte-fill) !important;
    -webkit-backdrop-filter: var(--matte-blur) !important;
    backdrop-filter: var(--matte-blur) !important;
}
#sopaxSite :is(.service-card,.value-card) .sopax-panel-surface::after { filter: none; }
@media (max-width:430px) {
    #sopaxSite .solutions-row:not(.solutions-head) { background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
    #sopaxSite .solutions-row:not(.solutions-head)::after {
        background: var(--matte-fill) !important;
        backdrop-filter: var(--matte-blur) !important; -webkit-backdrop-filter: var(--matte-blur) !important;
    }
}
/* Move labels within the existing section gutter; content geometry stays put. */
#sopaxSite { --section-label-top: 20px; --section-label-gap: 44px; }
#sopaxSite main > section[id] > .section-label {
    position: absolute !important; top: var(--section-label-top) !important;
    left: 0 !important; width: 100% !important; margin: 0 !important;
}
#sopaxSite .about > .section-label { position: relative !important; inset: auto !important; margin-bottom: var(--section-label-gap) !important; }
@media (max-width:1024px) {
    #sopaxSite { --section-label-top: 16px; --section-label-gap: 40px; }
    #sopaxSite main > section[id] > .section-label {
        position: relative !important; inset: auto !important;
        margin: 0 0 var(--section-label-gap) !important;
    }
}
@media (prefers-reduced-transparency:reduce),(prefers-contrast:more) {
    #sopaxSite { --matte-fill: #18233b; --matte-blur: none; }
}

/* Intrinsic text width must not push animated icons out of the clipping card. */
#sopaxSite .audience-item { min-width: 0; }
#sopaxSite .audience-info { min-width: 0; min-height: 0; }
#sopaxSite .audience-info h3 { overflow-wrap: anywhere; }
@media (min-width:744px) {
    #sopaxSite .audience-item { height: auto; min-height: 172px; grid-template-columns: minmax(0,.82fr) minmax(0,1.3fr); }
}
@media (min-width:1510px) {
    #sopaxSite .audience-item { min-height: 210px; grid-template-columns: 200px minmax(0,1fr); }
}
@media (min-width:744px) and (max-width:1500px) {
    #sopaxSite .audience-item { min-height: 158px; }
}

/* Mobile-only visual corrections; the controls keep their existing hit areas. */
@media (max-width:743px) {
    #sopaxSite :is(#mobileMenuToggle,#openContact) .sopax-glass-surface::before {
        clip-path: inset(0 0 3px);
    }
    #sopaxSite #closeCalcModal {
        width: 44px !important; height: 44px !important;
        top: 8px !important; right: 8px !important;
        font-size: 14px !important;
        border: 0 !important; background: transparent !important; box-shadow: none !important;
    }
    #sopaxSite #closeCalcModal .sopax-glass-surface {
        inset: 6px; border-radius: 10px !important;
        background: linear-gradient(135deg,rgba(148,187,244,.25),rgba(73,91,161,.24) 46%,rgba(15,25,51,.38));
        box-shadow: inset 0 1px 2px rgba(170,202,245,.08),0 5px 14px rgba(4,7,20,.20);
    }
}

/* Profiled desktop filter cost: one frosted pass on large informational panels.
   Keep the approved fills, reflections, radii, layouts and control materials. */
@media (min-width:744px) {
    #sopaxSite .sopax-panel-surface,
    #sopaxSite .team-card::after,
    #sopaxSite .solutions-row:not(.solutions-head) {
        -webkit-backdrop-filter: blur(6px) saturate(125%) !important;
        backdrop-filter: blur(6px) saturate(125%) !important;
    }
    #sopaxSite .sopax-panel-surface::after { filter: none !important; }
}
@media (prefers-reduced-transparency:reduce),(prefers-contrast:more) {
    #sopaxSite .sopax-panel-surface,
    #sopaxSite .team-card::after,
    #sopaxSite .solutions-row:not(.solutions-head) {
        -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
    }
}