:root {
        --site-bg: #f6f8f7;
        --site-surface: #ffffff;
        --site-dark: #111827;
        --site-text: #334155;
        --site-muted: #64748b;
        --site-border: #e2e8f0;

        --site-primary: #0f8a4b;
        --site-primary-dark: #0b6b3a;
        --site-primary-soft: #eaf7f0;

        --site-success: #16a34a;

        --site-radius: 24px;
    }
.dropdown-item.active, .dropdown-item:active {
    color: #ffffff !important;
    text-decoration: none;
    background-color: var(--site-primary);
}
    * {
        box-sizing: border-box;
    }

    html {
        scroll-behavior: smooth;
    }

    body {
        margin: 0;
        background: var(--site-bg);
        color: var(--site-text);
        font-family:
            Inter,
            -apple-system,
            BlinkMacSystemFont,
            "Segoe UI",
            sans-serif;
		overflow-x:hidden;
    }

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

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

    .container {
        max-width: 1240px;
    }

    /* ------------------------------
       Navbar
    ------------------------------ */

    .site-navbar {
        padding: 18px 0;
        background: rgba(246, 248, 247, .92);
        border-bottom: 1px solid rgba(226, 232, 240, .8);
        backdrop-filter: blur(16px);
    }

    .navbar-brand {
        display: flex;
        align-items: center;
        gap: 11px;
        font-size: 1.08rem;
        font-weight: 800;
        letter-spacing: -.02em;
        color: var(--site-dark);
    }
	.navbar-brand img {
		height:48px;width:auto;
	}
    .brand-icon {
        width: 40px;
        height: 40px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 13px;
        background: var(--site-dark);
        color: #fff;
    }

    .navbar-nav .nav-link {
        color: #475569;
        font-size: .95rem;
        font-weight: 600;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .navbar-nav .nav-link:hover {
        color: var(--site-primary);
    }

    .btn {
        border-radius: 14px;
        padding: 12px 20px;
        font-weight: 700;
    }

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

    .btn-primary:hover,
    .btn-primary:focus {
        border-color: var(--site-primary-dark);
        background: var(--site-primary-dark);
    }

    .btn-light-custom {
        border: 1px solid var(--site-border);
        background: #fff;
        color: var(--site-dark);
    }

    .btn-light-custom:hover {
        border-color: #cbd5e1;
        background: #f8fafc;
    }

    /* ------------------------------
       Hero
    ------------------------------ */

    .hero {
        position: relative;
        overflow: hidden;
        padding: 94px 0 110px;
    }

    .hero::before {
        content: "";
        position: absolute;
        top: -180px;
        left: 45%;
        width: 500px;
        height: 500px;
        border-radius: 50%;
        background: rgba(15, 138, 75, .08);
        filter: blur(20px);
        pointer-events: none;
    }

    .hero::after {
        content: "";
        position: absolute;
        right: -150px;
        bottom: -250px;
        width: 520px;
        height: 520px;
        border-radius: 50%;
        background: rgba(22, 163, 74, .05);
        pointer-events: none;
    }

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

    .hero-kicker,
    .section-kicker {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 20px;
        color: var(--site-primary);
        font-size: .82rem;
        font-weight: 800;
        letter-spacing: .11em;
        text-transform: uppercase;
    }

    .hero-kicker::before,
    .section-kicker::before {
        content: "";
        width: 24px;
        height: 2px;
        background: currentColor;
    }

    .hero h1 {
        max-width: 720px;
        margin: 0 0 24px;
        color: var(--site-dark);
        font-size: clamp(2.1rem, 4.2vw, 3.8rem);
        line-height: 1.02;
        font-weight: 850;
        letter-spacing: -.045em;
    }

    .hero h1 .accent {
        color: var(--site-primary);
    }

    .hero-lead {
        max-width: 640px;
        margin-bottom: 30px;
        color: var(--site-muted);
        font-size: 1.13rem;
        line-height: 1.72;
    }

    .hero-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        margin-bottom: 34px;
    }

    .hero-benefits {
        display: flex;
        flex-wrap: wrap;
        gap: 18px 26px;
        padding: 0;
        margin: 0;
        list-style: none;
    }

    .hero-benefits li {
        display: flex;
        align-items: center;
        gap: 8px;
        color: #475569;
        font-size: .91rem;
        font-weight: 600;
    }

    .hero-benefits i {
        color: var(--site-success);
    }

    /* ------------------------------
       Browser animation
    ------------------------------ */

    .browser-stage {
        position: relative;
        z-index: 2;
        min-height: 510px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .browser-glow {
        position: absolute;
        width: 78%;
        aspect-ratio: 1;
        border-radius: 50%;
        background:
            radial-gradient(
                circle,
                rgba(15, 138, 75, .15) 0%,
                rgba(15, 138, 75, 0) 68%
            );
    }

    .browser-window {
        position: relative;
        width: 100%;
        max-width: 570px;
        overflow: hidden;
        border: 1px solid #d8dee9;
        border-radius: 24px;
        background: #fff;
        box-shadow: 0 28px 70px rgba(15, 23, 42, .12);
        transform: rotate(1deg);
        animation: browserFloat 5s ease-in-out infinite;
    }

    @keyframes browserFloat {
        0%,
        100% {
            transform: translateY(0) rotate(1deg);
        }

        50% {
            transform: translateY(-9px) rotate(.3deg);
        }
    }

    .browser-toolbar {
        height: 54px;
        display: flex;
        align-items: center;
        gap: 15px;
        padding: 0 16px;
        background: #f8fafc;
        border-bottom: 1px solid #e5e7eb;
    }

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

    .browser-dot {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: #cbd5e1;
    }

    .browser-address {
        flex: 1;
        height: 30px;
		line-height:30px;
        border-radius: 9px;
        background: #eef2f7;
		font-size:12px;
		font-family:courier;
		padding-left:10px;
    }

    .browser-canvas {
        position: relative;
        min-height: 430px;
        padding: 22px;
        overflow: hidden;
        background: #fff;
    }

    .site-build {
        display: grid;
        gap: 16px;
    }

    .build-block {
        opacity: 0;
        transform: translateY(16px) scale(.98);
        animation:
            buildBlock 8s cubic-bezier(.2, .75, .3, 1) infinite;
    }

    @keyframes buildBlock {
        0%,
        8% {
            opacity: 0;
            transform: translateY(15px) scale(.98);
        }

        14%,
        73% {
            opacity: 1;
            transform: translateY(0) scale(1);
        }

        86%,
        100% {
            opacity: 0;
            transform: translateY(-8px) scale(.99);
        }
    }

    .build-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        animation-delay: .3s;
    }

    .fake-logo {
        width: 82px;
        height: 17px;
        border-radius: 6px;
        background: #1f2937;
    }

    .fake-nav {
        display: flex;
        gap: 9px;
    }

    .fake-nav span {
        display: block;
        width: 38px;
        height: 7px;
        border-radius: 99px;
        background: #d7dce4;
    }

    .build-hero {
        display: grid;
        grid-template-columns: 1.18fr .82fr;
        gap: 16px;
        animation-delay: .8s;
    }

    .fake-copy,
    .fake-visual {
        min-height: 145px;
        border-radius: 18px;
    }

    .fake-copy {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 20px;
        background: #eef9f3;
    }

    .fake-title {
        width: 82%;
        height: 17px;
        margin-bottom: 10px;
        border-radius: 6px;
        background: var(--site-primary);
    }

    .fake-text {
        width: 92%;
        height: 7px;
        margin-bottom: 7px;
        border-radius: 99px;
        background: #bdd9c9;
    }

    .fake-text.short {
        width: 64%;
    }

    .fake-button {
        width: 76px;
        height: 25px;
        margin-top: 11px;
        border-radius: 8px;
        background: #111827;
    }

    .fake-visual {
        position: relative;
        overflow: hidden;
        background:
            linear-gradient(
                145deg,
                #dff4e8,
                #f3fbf6
            );
    }

    .fake-visual::before {
        content: "";
        position: absolute;
        width: 88px;
        height: 88px;
        left: 50%;
        top: 50%;
        border-radius: 23px;
        background: #22a761;
        transform: translate(-50%, -50%) rotate(12deg);
    }

    .fake-visual::after {
        content: "";
        position: absolute;
        width: 55px;
        height: 55px;
        left: 52%;
        top: 46%;
        border-radius: 50%;
        border: 10px solid rgba(255, 255, 255, .85);
        transform: translate(-50%, -50%);
    }

    .build-cards {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
        animation-delay: 1.3s;
    }

    .fake-card {
        min-height: 92px;
        padding: 14px;
        border: 1px solid #e5e7eb;
        border-radius: 14px;
        background: #fff;
    }

    .fake-card-icon {
        width: 25px;
        height: 25px;
        margin-bottom: 10px;
        border-radius: 8px;
        background: #d9f1e3;
    }

    .fake-card-line {
        width: 70%;
        height: 7px;
        margin-bottom: 6px;
        border-radius: 20px;
        background: #bfc5d0;
    }

    .fake-card-line:last-child {
        width: 47%;
    }

    .build-footer {
        height: 40px;
        border-radius: 12px;
        background: #111827;
        animation-delay: 1.8s;
    }

    .build-cursor {
        position: absolute;
        z-index: 10;
        left: 75%;
        top: 26%;
        font-size: 1.7rem;
        color: #111827;
        filter: drop-shadow(0 3px 5px rgba(15, 23, 42, .15));
        animation: cursorMove 8s ease-in-out infinite;
    }

    @keyframes cursorMove {
        0% {
            opacity: 0;
            left: 82%;
            top: 18%;
        }

        10% {
            opacity: 1;
        }

        25% {
            left: 34%;
            top: 35%;
        }

        43% {
            left: 65%;
            top: 54%;
        }

        61% {
            left: 29%;
            top: 77%;
        }

        76% {
            left: 72%;
            top: 83%;
            opacity: 1;
        }

        90%,
        100% {
            opacity: 0;
            left: 82%;
            top: 18%;
        }
    }

    .floating-badge {
        position: absolute;
        z-index: 4;
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 12px 15px;
        border: 1px solid #e2e8f0;
        border-radius: 15px;
        background: rgba(255, 255, 255, .94);
        color: var(--site-dark);
        font-size: .82rem;
        font-weight: 700;
        box-shadow: 0 15px 40px rgba(15, 23, 42, .08);
        backdrop-filter: blur(10px);
    }

    .floating-badge i {
        color: var(--site-primary);
        font-size: 1.1rem;
    }

    .floating-badge.one {
        left: -22px;
        top: 82px;
    }

    .floating-badge.two {
        right: -8px;
        bottom: 64px;
    }

    /* ------------------------------
       Generic sections
    ------------------------------ */

    .section {
        padding: 100px 0;
    }

    .section-white {
        background: #fff;
    }

    .section-dark {
        background: #111827;
        color: #fff;
    }

    .section-heading {
        max-width: 760px;
        margin-bottom: 48px;
    }

    .section-heading h2 {
        margin-bottom: 18px;
        color: var(--site-dark);
        font-size: clamp(2rem, 4vw, 3.35rem);
        line-height: 1.08;
        font-weight: 830;
        letter-spacing: -.045em;
    }

    .section-heading p {
        margin: 0;
        color: var(--site-muted);
        font-size: 1.05rem;
        line-height: 1.75;
    }

    /* ------------------------------
       Service hub
    ------------------------------ */

    .service-card {
        position: relative;
        height: 100%;
        padding: 30px;
        overflow: hidden;
        border: 1px solid var(--site-border);
        border-radius: var(--site-radius);
        background: #fff;
        transition:
            transform .25s ease,
            border-color .25s ease,
            box-shadow .25s ease;
    }

    .service-card:hover {
        transform: translateY(-5px);
        border-color: #b9dfca;
        box-shadow: 0 20px 44px rgba(15, 23, 42, .07);
    }

    .service-icon {
        width: 52px;
        height: 52px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 26px;
        border-radius: 16px;
        background: var(--site-primary-soft);
        color: var(--site-primary);
        font-size: 1.35rem;
    }

    .service-card h3 {
        margin-bottom: 13px;
        color: var(--site-dark);
        font-size: 1.4rem;
        font-weight: 800;
        letter-spacing: -.025em;
    }

    .service-card > p {
        min-height: 72px;
        margin-bottom: 25px;
        color: var(--site-muted);
        line-height: 1.65;
    }

    .service-links {
        padding: 0;
        margin: 0;
        list-style: none;
    }

    .service-links li + li {
        margin-top: 10px;
    }

    .service-links a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        color: #334155;
        font-size: .92rem;
        font-weight: 700;
    }

    .service-links a:hover {
        color: var(--site-primary);
    }

    .service-links i {
        font-size: .8rem;
    }

    /* ------------------------------
       Mix services
    ------------------------------ */

    .mix-card {
        height: 100%;
        padding: 28px;
        border-radius: 22px;
        background: #f2faf5;
    }

    .mix-card-number {
        margin-bottom: 36px;
        color: #739b84;
        font-size: .83rem;
        font-weight: 800;
        letter-spacing: .1em;
    }

    .mix-card h3 {
        margin-bottom: 12px;
        color: var(--site-dark);
        font-size: 1.23rem;
        font-weight: 800;
    }

    .mix-card p {
        margin-bottom: 20px;
        color: var(--site-muted);
        line-height: 1.65;
    }

    .text-link {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        color: var(--site-primary);
        font-weight: 800;
    }

    .text-link:hover {
        color: var(--site-primary-dark);
    }

    /* ------------------------------
       Process
    ------------------------------ */

    .process-item {
        position: relative;
        padding-left: 73px;
    }

    .process-item + .process-item {
        margin-top: 34px;
    }

    .process-number {
        position: absolute;
        top: 0;
        left: 0;
        width: 50px;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 15px;
        background: var(--site-primary-soft);
        color: var(--site-primary);
        font-weight: 800;
    }

    .process-item h3 {
        margin-bottom: 7px;
        color: var(--site-dark);
        font-size: 1.12rem;
        font-weight: 800;
    }

    .process-item p {
        margin: 0;
        color: var(--site-muted);
        line-height: 1.65;
    }

    .process-panel {
        min-height: 100%;
        padding: 42px;
        border-radius: 28px;
        background: #111827;
        color: #fff;
    }

    .process-panel h3 {
        max-width: 440px;
        margin-bottom: 18px;
        font-size: 2rem;
        line-height: 1.15;
        font-weight: 800;
        letter-spacing: -.035em;
    }

    .process-panel p {
        max-width: 480px;
        margin-bottom: 30px;
        color: #b8c1cf;
        line-height: 1.7;
    }

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

    .stat-box {
        padding: 18px;
        border: 1px solid rgba(255, 255, 255, .1);
        border-radius: 16px;
        background: rgba(255, 255, 255, .05);
    }

    .stat-value {
        margin-bottom: 3px;
        font-size: 1.35rem;
        font-weight: 800;
    }

    .stat-label {
        color: #9ca7b7;
        font-size: .84rem;
    }

    /* ------------------------------
       Portfolio swiper
    ------------------------------ */

    .portfolio-swiper {
        overflow: hidden;
    }

    .portfolio-card {
        overflow: hidden;
        border: 1px solid var(--site-border);
        border-radius: 24px;
        background: #fff;
    }

    .portfolio-preview {
        position: relative;
        height: 270px;
        padding: 22px;
        overflow: hidden;
        background: #eaf7f0;
    }

    .portfolio-preview.dark {
        background: #1b2130;
    }

    .portfolio-preview.green {
        background: #e5f7ed;
    }

    .mini-browser {
        height: 100%;
        padding: 12px;
        border-radius: 17px;
        background: #fff;
        box-shadow: 0 18px 40px rgba(15, 23, 42, .12);
        transform: rotate(-2deg) translateY(15px);
    }

    .mini-browser-head {
        width: 100%;
        height: 25px;
        margin-bottom: 10px;
        border-radius: 7px;
        background: #f1f5f9;
    }

    .mini-browser-hero {
        height: 80px;
        margin-bottom: 10px;
        border-radius: 10px;
        background: #d9f1e3;
    }

    .mini-browser-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }

    .mini-browser-grid span {
        height: 66px;
        border-radius: 9px;
        background: #f1f5f9;
    }

    .portfolio-content {
        padding: 24px;
    }

    .portfolio-meta {
        margin-bottom: 8px;
        color: var(--site-primary);
        font-size: .8rem;
        font-weight: 800;
        letter-spacing: .06em;
        text-transform: uppercase;
    }

    .portfolio-content h3 {
        margin-bottom: 8px;
        color: var(--site-dark);
        font-size: 1.18rem;
        font-weight: 800;
    }

    .portfolio-content p {
        margin: 0;
        color: var(--site-muted);
        font-size: .92rem;
        line-height: 1.6;
    }

    .swiper-controls {
        display: flex;
        gap: 10px;
        margin-top: 30px;
    }

    .swiper-button-custom {
        width: 45px;
        height: 45px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 1px solid var(--site-border);
        border-radius: 13px;
        background: #fff;
        color: var(--site-dark);
        cursor: pointer;
        transition:
            color .2s ease,
            border-color .2s ease,
            background .2s ease;
    }

    .swiper-button-custom:hover {
        border-color: #b9dfca;
        background: var(--site-primary-soft);
        color: var(--site-primary);
    }

    /* ------------------------------
       CTA
    ------------------------------ */

    .cta-box {
        position: relative;
        overflow: hidden;
        padding: 54px;
        border-radius: 30px;
        background: var(--site-primary);
        color: #fff;
    }

    .cta-box::after {
        content: "";
        position: absolute;
        width: 300px;
        height: 300px;
        right: -100px;
        top: -130px;
        border: 65px solid rgba(255, 255, 255, .08);
        border-radius: 50%;
    }

    .cta-box h2 {
        max-width: 680px;
        margin-bottom: 15px;
        font-size: clamp(2rem, 4vw, 3.2rem);
        font-weight: 830;
        line-height: 1.08;
        letter-spacing: -.045em;
    }

    .cta-box p {
        max-width: 650px;
        margin-bottom: 28px;
        color: rgba(255, 255, 255, .78);
        font-size: 1.03rem;
        line-height: 1.7;
    }

    .cta-box .btn-light {
        color: var(--site-dark);
        font-weight: 800;
    }

    /* ------------------------------
       Footer
    ------------------------------ */

    .footer {
        padding: 70px 0 30px;
        background: #0f172a;
        color: #94a3b8;
    }

    .footer-brand {
        color: #fff;
        font-size: 1.15rem;
        font-weight: 800;
    }

    .footer h4 {
        margin-bottom: 18px;
        color: #fff;
        font-size: .95rem;
        font-weight: 800;
    }

    .footer-links {
        padding: 0;
        margin: 0;
        list-style: none;
    }

    .footer-links li + li {
        margin-top: 10px;
    }

    .footer-links a:hover {
        color: #fff;
    }

    .footer-bottom {
        margin-top: 50px;
        padding-top: 24px;
        border-top: 1px solid rgba(255, 255, 255, .08);
        font-size: .86rem;
    }

    /* ------------------------------
       Responsive
    ------------------------------ */

    @media (max-width: 991.98px) {
        .hero {
            padding-top: 70px;
        }

        .browser-stage {
            min-height: 470px;
            margin-top: 55px;
        }

        .floating-badge.one {
            left: 10px;
        }

        .floating-badge.two {
            right: 10px;
        }

        .service-card > p {
            min-height: auto;
        }
    }

    @media (max-width: 767.98px) {
        .hero {
            padding: 58px 0 78px;
        }

        .hero h1 {
            font-size: 2.25rem;
        }

        .section {
            padding: 74px 0;
        }

        .browser-stage {
            min-height: auto;
        }

        .browser-window {
            transform: none;
            animation: none;
        }

        .floating-badge {
            display: none;
        }

        .browser-canvas {
            min-height: 360px;
            padding: 15px;
        }

        .fake-copy,
        .fake-visual {
            min-height: 115px;
        }

        .build-cards {
            gap: 7px;
        }

        .fake-card {
            min-height: 80px;
            padding: 10px;
        }

        .cta-box {
            padding: 35px 26px;
        }
    }

    @media (prefers-reduced-motion: reduce) {
        *,
        *::before,
        *::after {
            scroll-behavior: auto !important;
            animation-duration: .01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: .01ms !important;
        }

        .build-block {
            opacity: 1;
            transform: none;
        }

        .build-cursor {
            display: none;
        }
    }
	
	
/* ------------------------------
   SEO browser animation
   Фиксированная высота без прыжков HERO
------------------------------ */

.seo-browser {
    max-width: 590px;
}

.browser-stage {
    position: relative;
    z-index: 2;
    height: 510px;
    min-height: 510px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.seo-search-page {
    height: 430px;
    min-height: 430px;
    padding: 28px 30px;
    overflow: hidden;
    background: #fff;
}

.seo-search-logo {
    margin-bottom: 20px;
    color: var(--site-primary);
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: -.04em;
}

.seo-search-box {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 46px;
    gap: 10px;
    padding: 0 16px;
    margin-bottom: 13px;
    overflow: hidden;
    border: 1px solid #dbe2e8;
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 4px 14px rgba(15, 23, 42, .05);
}

.seo-search-box > i {
    flex: 0 0 auto;
    color: #64748b;
}

.seo-search-text {
    position: relative;
    display: inline-block;
    width: 0;
    overflow: hidden;
    color: var(--site-dark);
    font-size: .94rem;
    font-weight: 600;
    white-space: nowrap;
    animation: seoTyping 8s steps(23, end) infinite;
}

.seo-search-cursor {
    width: 2px;
    height: 19px;
    flex: 0 0 auto;
    background: var(--site-primary);
    animation:
        seoCursorBlink .7s steps(1) infinite,
        seoCursorFade 8s linear infinite;
}

@keyframes seoTyping {
    0%,
    8% {
        width: 0;
    }

    34%,
    82% {
        width: 178px;
    }

    94%,
    100% {
        width: 0;
    }
}

@keyframes seoCursorBlink {
    0%,
    49% {
        opacity: 1;
    }

    50%,
    100% {
        opacity: 0;
    }
}

@keyframes seoCursorFade {
    0%,
    34% {
        visibility: visible;
    }

    35%,
    86% {
        visibility: hidden;
    }

    87%,
    100% {
        visibility: visible;
    }
}

.seo-search-meta {
    margin-bottom: 22px;
    color: #94a3b8;
    font-size: .72rem;
    opacity: 0;
    transform: translateY(3px);
    animation: seoMeta 8s ease infinite;
}

@keyframes seoMeta {
    0%,
    34% {
        opacity: 0;
        transform: translateY(3px);
    }

    40%,
    82% {
        opacity: 1;
        transform: translateY(0);
    }

    90%,
    100% {
        opacity: 0;
        transform: translateY(-2px);
    }
}

.seo-results {
    display: grid;
    gap: 6px;
}

.seo-result {
    position: relative;
    min-height: 84px;
    padding: 11px 14px 11px 17px;
    border-radius: 12px;
    opacity: 0;
    transform: translateY(16px);
    background: transparent;
}

.seo-result::before {
    content: "";
    position: absolute;
    top: 11px;
    bottom: 11px;
    left: 0;
    width: 3px;
    border-radius: 10px;
    background: transparent;
}

.seo-result-url {
    margin-bottom: 4px;
    color: #64748b;
    font-size: .72rem;
    line-height: 1.3;
}

.seo-result-title {
    margin-bottom: 5px;
    color: #1d4ed8;
    font-size: .97rem;
    font-weight: 700;
    line-height: 1.3;
}

.seo-result-description {
    max-width: 450px;
    color: #64748b;
    font-size: .77rem;
    line-height: 1.45;
}

.seo-result-1 {
    animation:
        seoResultOne 8s ease infinite,
        seoResultPromote 8s ease infinite;
}

.seo-result-2 {
    animation: seoResultTwo 8s ease infinite;
}

.seo-result-3 {
    animation: seoResultThree 8s ease infinite;
}

@keyframes seoResultOne {
    0%,
    38% {
        opacity: 0;
        transform: translateY(16px);
    }

    45%,
    84% {
        opacity: 1;
        transform: translateY(0);
    }

    92%,
    100% {
        opacity: 0;
        transform: translateY(-5px);
    }
}

@keyframes seoResultTwo {
    0%,
    45% {
        opacity: 0;
        transform: translateY(16px);
    }

    52%,
    84% {
        opacity: 1;
        transform: translateY(0);
    }

    92%,
    100% {
        opacity: 0;
        transform: translateY(-5px);
    }
}

@keyframes seoResultThree {
    0%,
    52% {
        opacity: 0;
        transform: translateY(16px);
    }

    59%,
    84% {
        opacity: 1;
        transform: translateY(0);
    }

    92%,
    100% {
        opacity: 0;
        transform: translateY(-5px);
    }
}

@keyframes seoResultPromote {
    0%,
    62% {
        background: transparent;
    }

    68%,
    82% {
        background: var(--site-primary-soft);
    }

    88%,
    100% {
        background: transparent;
    }
}

.seo-result-1::before {
    animation: seoResultMarker 8s ease infinite;
}

@keyframes seoResultMarker {
    0%,
    64% {
        background: transparent;
    }

    69%,
    82% {
        background: var(--site-primary);
    }

    88%,
    100% {
        background: transparent;
    }
}

@media (max-width: 767.98px) {

    .browser-stage {
        height: 430px;
        min-height: 430px;
    }

    .seo-search-page {
        height: 370px;
        min-height: 370px;
        padding: 20px 18px;
    }

    .seo-search-logo {
        margin-bottom: 14px;
        font-size: 1.35rem;
    }

    .seo-search-box {
        min-height: 42px;
    }

    .seo-search-text {
        font-size: .85rem;
    }

    .seo-search-meta {
        margin-bottom: 14px;
    }

    .seo-results {
        gap: 2px;
    }

    .seo-result {
        min-height: 76px;
        padding: 8px 10px 8px 14px;
    }

    .seo-result::before {
        top: 8px;
        bottom: 8px;
    }

    .seo-result-title {
        font-size: .86rem;
    }

    .seo-result-description {
        font-size: .7rem;
        line-height: 1.35;
    }

    .seo-result-url {
        font-size: .66rem;
    }
}

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

    .seo-search-text {
        width: auto;
        animation: none;
    }

    .seo-search-cursor {
        display: none;
    }

    .seo-search-meta,
    .seo-result {
        opacity: 1;
        transform: none;
        animation: none;
    }

    .seo-result-1 {
        background: var(--site-primary-soft);
    }

    .seo-result-1::before {
        background: var(--site-primary);
        animation: none;
    }
}	
/* ------------------------------
   HTML typing browser animation
------------------------------ */

.code-browser {
    max-width: 590px;
}

.code-editor {
    height: 430px;
    min-height: 430px;
    overflow: hidden;
    background: #0f172a;
}

.code-editor-head {
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 18px;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
    background: #111827;
}

.code-file {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #e2e8f0;
    font-family: Consolas, Monaco, monospace;
    font-size: .78rem;
}

.code-file::before {
    content: "<>";
    color: var(--site-primary);
    font-size: .72rem;
    font-weight: 700;
}

.code-status {
    color: #64748b;
    font-family: Consolas, Monaco, monospace;
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.code-editor-body {
    padding: 22px 18px;
    font-family: Consolas, Monaco, "Courier New", monospace;
    font-size: .78rem;
    line-height: 1.65;
}

.code-line {
    display: flex;
    min-height: 21px;
    opacity: 0;
    transform: translateY(4px);
    animation: codeLineAppear 10s linear infinite;
}

.code-number {
    width: 30px;
    flex: 0 0 30px;
    margin-right: 14px;
    color: #475569;
    text-align: right;
    user-select: none;
}

.code-text {
    position: relative;
    display: inline-block;
    width: 0;
    overflow: hidden;
    color: #cbd5e1;
    white-space: nowrap;
    animation: codeTyping 10s steps(40, end) infinite;
}

.code-indent-1 {
    padding-left: 18px;
}

.code-indent-2 {
    padding-left: 36px;
}

.code-tag {
    color: #7dd3fc;
}

.code-attr {
    color: #86efac;
}

.code-string {
    color: #fcd34d;
}

.code-line-1 {
    animation-delay: 0s;
}

.code-line-1 .code-text {
    animation-delay: 0s;
}

.code-line-2 {
    animation-delay: .35s;
}

.code-line-2 .code-text {
    animation-delay: .35s;
}

.code-line-3 {
    animation-delay: .75s;
}

.code-line-3 .code-text {
    animation-delay: .75s;
}

.code-line-4 {
    animation-delay: 1.15s;
}

.code-line-4 .code-text {
    animation-delay: 1.15s;
}

.code-line-5 {
    animation-delay: 1.6s;
}

.code-line-5 .code-text {
    animation-delay: 1.6s;
}

.code-line-6 {
    animation-delay: 2s;
}

.code-line-6 .code-text {
    animation-delay: 2s;
}

.code-line-7 {
    animation-delay: 2.4s;
}

.code-line-7 .code-text {
    animation-delay: 2.4s;
}

.code-line-8 {
    animation-delay: 2.8s;
}

.code-line-8 .code-text {
    animation-delay: 2.8s;
}

.code-line-9 {
    animation-delay: 3.3s;
}

.code-line-9 .code-text {
    animation-delay: 3.3s;
}

.code-line-10 {
    animation-delay: 3.8s;
}

.code-line-10 .code-text {
    animation-delay: 3.8s;
}

.code-line-11 {
    animation-delay: 4.2s;
}

.code-line-11 .code-text {
    animation-delay: 4.2s;
}

.code-line-12 {
    animation-delay: 4.6s;
}

.code-line-12 .code-text {
    animation-delay: 4.6s;
}

@keyframes codeLineAppear {
    0%,
    3% {
        opacity: 0;
        transform: translateY(4px);
    }

    7%,
    82% {
        opacity: 1;
        transform: translateY(0);
    }

    90%,
    100% {
        opacity: 0;
        transform: translateY(-2px);
    }
}

@keyframes codeTyping {
    0%,
    3% {
        width: 0;
    }

    10%,
    82% {
        width: 100%;
    }

    90%,
    100% {
        width: 0;
    }
}

.code-caret {
    display: inline-block;
    width: 2px;
    height: 15px;
    margin-left: 3px;
    vertical-align: middle;
    background: var(--site-primary);
    animation: codeCaretBlink .65s steps(1) infinite;
}

@keyframes codeCaretBlink {
    0%,
    49% {
        opacity: 1;
    }

    50%,
    100% {
        opacity: 0;
    }
}


/* небольшая подсветка редактора */

.code-editor::after {
    content: "";
    position: absolute;
    inset: 54px 0 0;
    pointer-events: none;
    background:
        linear-gradient(
            90deg,
            rgba(15, 138, 75, .025),
            transparent 35%
        );
}


/* mobile */

@media (max-width: 767.98px) {

    .code-editor {
        height: 370px;
        min-height: 370px;
    }

    .code-editor-body {
        padding: 16px 12px;
        font-size: .66rem;
        line-height: 1.55;
    }

    .code-number {
        width: 24px;
        flex-basis: 24px;
        margin-right: 9px;
    }

    .code-indent-1 {
        padding-left: 12px;
    }

    .code-indent-2 {
        padding-left: 24px;
    }
}


/* reduced motion */

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

    .code-line {
        opacity: 1;
        transform: none;
        animation: none;
    }

    .code-text {
        width: 100%;
        animation: none;
    }

    .code-caret {
        display: none;
    }
}
.code-line-13 {
    animation-delay: 5s;
}

.code-line-13 .code-text {
    animation-delay: 5s;
}

.code-line-14 {
    animation-delay: 5.4s;
}

.code-line-14 .code-text {
    animation-delay: 5.4s;
}

.code-line-15 {
    animation-delay: 5.8s;
}

.code-line-15 .code-text {
    animation-delay: 5.8s;
}

.code-line-16 {
    animation-delay: 6.2s;
}

.code-line-16 .code-text {
    animation-delay: 6.2s;
}

.code-line-17 {
    animation-delay: 6.6s;
}

.code-line-17 .code-text {
    animation-delay: 6.6s;
}

/* ==========================================================
   INTERNET SHOP HERO ANIMATION
   Добавить в /assets/style.css
========================================================== */

.shop-browser-stage {
    position: relative;
    z-index: 2;
    height: 510px;
    min-height: 510px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.shop-browser {
    max-width: 590px;
}

.shop-demo {
    position: relative;
    height: 430px;
    min-height: 430px;
    padding: 22px;
    overflow: hidden;
    background: #fff;
}

.shop-demo-header {
    height: 45px;
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 24px;
    padding-bottom: 13px;
    border-bottom: 1px solid #eef2f4;
}

.shop-demo-logo {
    color: var(--site-dark);
    font-size: .95rem;
    font-weight: 900;
    letter-spacing: .08em;
}

.shop-demo-nav {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-left: auto;
    color: #64748b;
    font-size: .7rem;
    font-weight: 600;
}

.shop-demo-cart {
    position: relative;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 38px;
    border-radius: 12px;
    background: var(--site-primary-soft);
    color: var(--site-primary);
    font-size: 1rem;
    animation: shopCartPulse 9s ease infinite;
}

.shop-cart-count {
    position: absolute;
    top: -5px;
    right: -5px;
    width: 18px;
    height: 18px;
    overflow: hidden;
    border: 2px solid #fff;
    border-radius: 50%;
    background: var(--site-primary);
    color: #fff;
    font-size: .58rem;
    font-weight: 800;
    line-height: 14px;
    text-align: center;
}

.shop-cart-zero,
.shop-cart-one {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.shop-cart-zero {
    opacity: 1;
    animation: shopCartZero 9s linear infinite;
}

.shop-cart-one {
    opacity: 0;
    transform: translateY(8px);
    animation: shopCartOne 9s ease infinite;
}

.shop-demo-title {
    margin-bottom: 16px;
    color: var(--site-dark);
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: -.02em;
}

.shop-products {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.shop-product {
    position: relative;
    min-width: 0;
    padding: 10px;
    border: 1px solid #e7ebe9;
    border-radius: 15px;
    background: #fff;
}

.shop-product-main {
    animation: shopProductSelected 9s ease infinite;
}

.shop-product-image {
    position: relative;
    height: 112px;
    margin-bottom: 10px;
    overflow: hidden;
    border-radius: 11px;
    background: #eff8f3;
}

.shop-product-image.second {
    background: #f4f5f6;
}

.shop-product-image.third {
    background: #edf6f4;
}

.shop-product-object {
    position: absolute;
    width: 62px;
    height: 72px;
    top: 50%;
    left: 50%;
    border-radius: 14px 14px 22px 22px;
    background: #cedbd4;
    transform: translate(-50%, -50%);
}

.shop-product-main .shop-product-object {
    background: #91c8aa;
}

.shop-product-image.second .shop-product-object {
    width: 70px;
    height: 60px;
    border-radius: 50%;
    background: #d4d9dc;
}

.shop-product-image.third .shop-product-object {
    width: 54px;
    height: 76px;
    border-radius: 27px;
    background: #a9cdc0;
}

.shop-product-name {
    margin-bottom: 7px;
    overflow: hidden;
    color: #334155;
    font-size: .72rem;
    font-weight: 700;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.shop-product-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 5px;
}

.shop-product-price {
    color: var(--site-dark);
    font-size: .72rem;
    font-weight: 800;
}

.shop-add-button {
    width: 27px;
    height: 27px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 27px;
    border-radius: 8px;
    background: var(--site-primary);
    color: #fff;
    font-size: .75rem;
}

.shop-product-main .shop-add-button {
    animation: shopButtonClick 9s ease infinite;
}


/* ----------------------------------
   CURSOR
---------------------------------- */

.shop-demo-cursor {
    position: absolute;
    z-index: 15;
    top: 115px;
    left: 455px;
    color: #111827;
    font-size: 1.65rem;
    filter: drop-shadow(0 3px 3px rgba(15, 23, 42, .18));
    pointer-events: none;
    animation: shopCursor 9s cubic-bezier(.45, .05, .25, 1) infinite;
}


/* ----------------------------------
   FLYING PRODUCT
---------------------------------- */

.shop-flying-product {
    position: absolute;
    z-index: 14;
    width: 34px;
    height: 34px;
    top: 235px;
    left: 117px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: var(--site-primary);
    color: #fff;
    font-size: .9rem;
    opacity: 0;
    pointer-events: none;
    animation: shopProductFly 9s cubic-bezier(.4, 0, .2, 1) infinite;
}


/* ----------------------------------
   CURSOR MOVEMENT
---------------------------------- */

@keyframes shopCursor {

    0%,
    12% {
        top: 115px;
        left: 455px;
        opacity: 0;
    }

    18% {
        opacity: 1;
    }

    30% {
        top: 325px;
        left: 156px;
        opacity: 1;
    }

    38% {
        top: 325px;
        left: 156px;
        transform: scale(.82);
    }

    43% {
        top: 325px;
        left: 156px;
        transform: scale(1);
    }

    58% {
        top: 72px;
        left: 505px;
        opacity: 1;
    }

    70% {
        top: 72px;
        left: 505px;
        opacity: 1;
    }

    84%,
    100% {
        top: 115px;
        left: 455px;
        opacity: 0;
    }
}


/* ----------------------------------
   ADD BUTTON CLICK
---------------------------------- */

@keyframes shopButtonClick {

    0%,
    31% {
        transform: scale(1);
        background: var(--site-primary);
    }

    35% {
        transform: scale(.82);
        background: var(--site-primary-dark);
    }

    40% {
        transform: scale(1.08);
    }

    45%,
    100% {
        transform: scale(1);
        background: var(--site-primary);
    }
}


/* ----------------------------------
   PRODUCT HIGHLIGHT
---------------------------------- */

@keyframes shopProductSelected {

    0%,
    24% {
        border-color: #e7ebe9;
        transform: translateY(0);
        box-shadow: none;
    }

    28%,
    43% {
        border-color: #a9d8bc;
        transform: translateY(-3px);
        box-shadow: 0 10px 24px rgba(15, 138, 75, .08);
    }

    50%,
    100% {
        border-color: #e7ebe9;
        transform: translateY(0);
        box-shadow: none;
    }
}


/* ----------------------------------
   PRODUCT FLIES TO CART
---------------------------------- */

@keyframes shopProductFly {

    0%,
    37% {
        top: 235px;
        left: 117px;
        opacity: 0;
        transform: scale(.65) rotate(0deg);
    }

    40% {
        opacity: 1;
    }

    48% {
        top: 165px;
        left: 255px;
        opacity: 1;
        transform: scale(.8) rotate(8deg);
    }

    57% {
        top: 67px;
        left: 500px;
        opacity: 1;
        transform: scale(.45) rotate(18deg);
    }

    60% {
        top: 67px;
        left: 500px;
        opacity: 0;
        transform: scale(.2) rotate(20deg);
    }

    100% {
        opacity: 0;
    }
}


/* ----------------------------------
   CART COUNTER
---------------------------------- */

@keyframes shopCartZero {

    0%,
    57% {
        opacity: 1;
        transform: translateY(0);
    }

    60%,
    100% {
        opacity: 0;
        transform: translateY(-8px);
    }
}

@keyframes shopCartOne {

    0%,
    57% {
        opacity: 0;
        transform: translateY(8px);
    }

    61%,
    84% {
        opacity: 1;
        transform: translateY(0);
    }

    92%,
    100% {
        opacity: 0;
        transform: translateY(-5px);
    }
}


/* ----------------------------------
   CART PULSE
---------------------------------- */

@keyframes shopCartPulse {

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

    60% {
        transform: scale(1.18);
    }

    65% {
        transform: scale(.94);
    }

    70% {
        transform: scale(1.06);
    }

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


/* ----------------------------------
   MOBILE
---------------------------------- */

@media (max-width: 767.98px) {

    .shop-browser-stage {
        height: 430px;
        min-height: 430px;
    }

    .shop-demo {
        height: 370px;
        min-height: 370px;
        padding: 16px;
    }

    .shop-demo-header {
        gap: 10px;
        margin-bottom: 17px;
    }

    .shop-demo-nav {
        gap: 8px;
        font-size: .58rem;
    }

    .shop-demo-title {
        margin-bottom: 12px;
        font-size: .92rem;
    }

    .shop-products {
        gap: 7px;
    }

    .shop-product {
        padding: 7px;
    }

    .shop-product-image {
        height: 90px;
    }

    .shop-product-object {
        transform: translate(-50%, -50%) scale(.8);
    }

    .shop-product-name,
    .shop-product-price {
        font-size: .6rem;
    }

    .shop-add-button {
        width: 23px;
        height: 23px;
        flex-basis: 23px;
        font-size: .65rem;
    }

    .shop-demo-cursor,
    .shop-flying-product {
        display: none;
    }

    .shop-product-main {
        animation: shopProductSelectedMobile 9s ease infinite;
    }

    @keyframes shopProductSelectedMobile {

        0%,
        30% {
            border-color: #e7ebe9;
        }

        35%,
        55% {
            border-color: var(--site-primary);
            background: var(--site-primary-soft);
        }

        65%,
        100% {
            border-color: #e7ebe9;
            background: #fff;
        }
    }
}


/* ----------------------------------
   REDUCED MOTION
---------------------------------- */

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

    .shop-demo-cursor,
    .shop-flying-product {
        display: none;
    }

    .shop-product-main,
    .shop-product-main .shop-add-button,
    .shop-demo-cart,
    .shop-cart-zero,
    .shop-cart-one {
        animation: none;
    }

    .shop-cart-zero {
        display: none;
    }

    .shop-cart-one {
        opacity: 1;
        transform: none;
    }
}
/* ==========================================================
   CONTEXT ADS ANALYTICS HERO
   Добавить в /assets/style.css
========================================================== */

.ads-dashboard-stage {
    position: relative;
    z-index: 2;
    height: 510px;
    min-height: 510px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ads-browser {
    max-width: 590px;
}

.ads-dashboard {
    height: 430px;
    min-height: 430px;
    padding: 20px;
    overflow: hidden;
    background: #f8faf9;
}

.ads-dashboard-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 15px;
}

.ads-dashboard-title {
    color: var(--site-dark);
    font-size: .95rem;
    font-weight: 800;
}

.ads-dashboard-period {
    margin-top: 2px;
    color: #94a3b8;
    font-size: .65rem;
}

.ads-live {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 9px;
    border-radius: 20px;
    background: var(--site-primary-soft);
    color: var(--site-primary);
    font-size: .62rem;
    font-weight: 700;
}

.ads-live span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--site-primary);
    animation: adsLivePulse 1.5s ease infinite;
}

@keyframes adsLivePulse {
    0%,
    100% {
        opacity: .4;
        transform: scale(.8);
    }

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


/* ----------------------------------
   METRICS
---------------------------------- */

.ads-metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 9px;
    margin-bottom: 12px;
}

.ads-metric {
    min-width: 0;
    padding: 11px;
    border: 1px solid #e5ebe8;
    border-radius: 12px;
    background: #fff;
    opacity: 0;
    transform: translateY(8px);
}

.ads-metric-1 {
    animation: adsMetricShow 9s ease infinite;
}

.ads-metric-2 {
    animation: adsMetricShow 9s .35s ease infinite;
}

.ads-metric-3 {
    animation: adsMetricShow 9s .7s ease infinite;
}

@keyframes adsMetricShow {
    0%,
    8% {
        opacity: 0;
        transform: translateY(8px);
    }

    16%,
    86% {
        opacity: 1;
        transform: translateY(0);
    }

    94%,
    100% {
        opacity: 0;
        transform: translateY(-3px);
    }
}

.ads-metric-label {
    margin-bottom: 4px;
    color: #94a3b8;
    font-size: .6rem;
}

.ads-metric-value {
    color: var(--site-dark);
    font-size: .96rem;
    font-weight: 800;
    line-height: 1.2;
}

.ads-metric-change {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-top: 4px;
    color: var(--site-primary);
    font-size: .58rem;
    font-weight: 700;
}

.ads-metric-change.down {
    color: var(--site-primary);
}


/* ----------------------------------
   MAIN CHART
---------------------------------- */

.ads-chart-panel {
    padding: 12px 13px 8px;
    margin-bottom: 11px;
    border: 1px solid #e5ebe8;
    border-radius: 14px;
    background: #fff;
}

.ads-chart-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}

.ads-chart-title {
    color: var(--site-dark);
    font-size: .72rem;
    font-weight: 800;
}

.ads-chart-caption {
    color: #94a3b8;
    font-size: .56rem;
}

.ads-chart-legend {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #64748b;
    font-size: .56rem;
}

.ads-chart-legend span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--site-primary);
}

.ads-chart {
    position: relative;
    height: 132px;
    overflow: hidden;
}

.ads-grid-line {
    position: absolute;
    right: 0;
    left: 0;
    height: 1px;
    background: #edf1ef;
}

.ads-grid-line.line-1 {
    top: 10%;
}

.ads-grid-line.line-2 {
    top: 37%;
}

.ads-grid-line.line-3 {
    top: 64%;
}

.ads-grid-line.line-4 {
    top: 91%;
}

.ads-line-chart {
    position: absolute;
    z-index: 2;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.ads-chart-path {
    fill: none;
    stroke: var(--site-primary);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;

    stroke-dasharray: 800;
    stroke-dashoffset: 800;

    animation: adsDrawLine 9s ease infinite;
}

@keyframes adsDrawLine {
    0%,
    18% {
        stroke-dashoffset: 800;
        opacity: 0;
    }

    22% {
        opacity: 1;
    }

    58%,
    85% {
        stroke-dashoffset: 0;
        opacity: 1;
    }

    94%,
    100% {
        stroke-dashoffset: 0;
        opacity: 0;
    }
}

.ads-chart-area {
    fill: var(--site-primary-soft);
    opacity: 0;
    animation: adsAreaShow 9s ease infinite;
}

@keyframes adsAreaShow {
    0%,
    40% {
        opacity: 0;
    }

    55%,
    85% {
        opacity: .75;
    }

    94%,
    100% {
        opacity: 0;
    }
}


/* ----------------------------------
   CHART POINTS
---------------------------------- */

.ads-point {
    position: absolute;
    z-index: 5;
    width: 8px;
    height: 8px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: var(--site-primary);
    box-shadow: 0 0 0 2px rgba(15, 138, 75, .16);
    opacity: 0;
}

.ads-point.point-1 {
    left: 18%;
    top: 66%;
    animation: adsPointShow 9s 2.6s ease infinite;
}

.ads-point.point-2 {
    left: 48%;
    top: 46%;
    animation: adsPointShow 9s 3.1s ease infinite;
}

.ads-point.point-3 {
    left: 72%;
    top: 31%;
    animation: adsPointShow 9s 3.6s ease infinite;
}

.ads-point.point-4 {
    left: 96%;
    top: 10%;
    animation: adsPointShow 9s 4.1s ease infinite;
}

@keyframes adsPointShow {
    0%,
    10% {
        opacity: 0;
        transform: scale(.4);
    }

    18%,
    70% {
        opacity: 1;
        transform: scale(1);
    }

    82%,
    100% {
        opacity: 0;
        transform: scale(.7);
    }
}

.ads-chart-days {
    display: flex;
    justify-content: space-between;
    margin-top: 2px;
    color: #a0aaa5;
    font-size: .52rem;
}


/* ----------------------------------
   CHANNELS / PROGRESS
---------------------------------- */

.ads-bottom-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 9px;
}

.ads-channel {
    padding: 9px 10px;
    border: 1px solid #e5ebe8;
    border-radius: 11px;
    background: #fff;
}

.ads-channel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 7px;
    color: #64748b;
    font-size: .57rem;
}

.ads-channel-head strong {
    color: var(--site-dark);
    font-size: .62rem;
}

.ads-progress {
    height: 5px;
    overflow: hidden;
    border-radius: 20px;
    background: #edf2ef;
}

.ads-progress span {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: var(--site-primary);
}

.ads-progress-google {
    animation: adsProgressGoogle 9s ease infinite;
}

.ads-progress-yandex {
    animation: adsProgressYandex 9s ease infinite;
}

@keyframes adsProgressGoogle {
    0%,
    45% {
        width: 0;
    }

    65%,
    86% {
        width: 64%;
    }

    95%,
    100% {
        width: 0;
    }
}

@keyframes adsProgressYandex {
    0%,
    50% {
        width: 0;
    }

    70%,
    86% {
        width: 36%;
    }

    95%,
    100% {
        width: 0;
    }
}


/* ----------------------------------
   MOBILE
---------------------------------- */

@media (max-width: 767.98px) {

    .ads-dashboard-stage {
        height: 430px;
        min-height: 430px;
    }

    .ads-dashboard {
        height: 370px;
        min-height: 370px;
        padding: 13px;
    }

    .ads-dashboard-head {
        margin-bottom: 10px;
    }

    .ads-metric {
        padding: 8px;
    }

    .ads-metric-value {
        font-size: .78rem;
    }

    .ads-metric-label {
        font-size: .54rem;
    }

    .ads-metric-change {
        font-size: .5rem;
    }

    .ads-chart-panel {
        padding: 9px 10px 6px;
    }

    .ads-chart {
        height: 110px;
    }

    .ads-channel {
        padding: 7px 8px;
    }
}


/* ----------------------------------
   REDUCED MOTION
---------------------------------- */

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

    .ads-live span,
    .ads-metric,
    .ads-chart-path,
    .ads-chart-area,
    .ads-point,
    .ads-progress-google,
    .ads-progress-yandex {
        animation: none;
    }

    .ads-metric,
    .ads-point {
        opacity: 1;
        transform: none;
    }

    .ads-chart-path {
        stroke-dashoffset: 0;
        opacity: 1;
    }

    .ads-chart-area {
        opacity: .75;
    }

    .ads-progress-google {
        width: 64%;
    }

    .ads-progress-yandex {
        width: 36%;
    }
}

/* ==========================================================
   LANDING PAGE BUILD HERO
   Добавить в /assets/style.css
========================================================== */

.landing-builder-stage {
    position: relative;
    z-index: 2;
    height: 510px;
    min-height: 510px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.landing-browser {
    max-width: 590px;
}

.landing-builder {
    position: relative;
    height: 430px;
    min-height: 430px;
    padding: 18px;
    overflow: hidden;
    background: #fff;
}


/* ----------------------------------
   BLOCKS
---------------------------------- */

.landing-build-block {
    opacity: 0;
    transform: translateY(14px) scale(.985);
}


/* HEADER */

.landing-build-header {
    height: 32px;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 11px;

    animation: landingBuildHeader 10s ease infinite;
}

.landing-mini-logo {
    width: 56px;
    height: 12px;
    border-radius: 4px;
    background: var(--site-dark);
}

.landing-mini-nav {
    display: flex;
    gap: 6px;
    margin-left: auto;
}

.landing-mini-nav span {
    width: 30px;
    height: 5px;
    border-radius: 20px;
    background: #d4dbd7;
}

.landing-mini-nav-btn {
    width: 49px;
    height: 19px;
    margin-left: 4px;
    border-radius: 6px;
    background: var(--site-primary);
}


/* HERO */

.landing-build-hero {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 10px;
    height: 140px;
    margin-bottom: 10px;

    animation: landingBuildHero 10s ease infinite;
}

.landing-build-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 16px;
    border-radius: 13px;
    background: var(--site-primary-soft);
}

.landing-build-eyebrow {
    width: 49px;
    height: 5px;
    margin-bottom: 8px;
    border-radius: 10px;
    background: #89bea0;
}

.landing-build-title {
    width: 88%;
    height: 11px;
    margin-bottom: 6px;
    border-radius: 4px;
    background: var(--site-dark);
}

.landing-build-title.short {
    width: 62%;
    margin-bottom: 10px;
}

.landing-build-text {
    width: 94%;
    height: 5px;
    margin-bottom: 5px;
    border-radius: 20px;
    background: #bfcfc6;
}

.landing-build-text.short {
    width: 68%;
}

.landing-build-button {
    width: 65px;
    height: 21px;
    margin-top: 10px;
    border-radius: 6px;
    background: var(--site-primary);
}

.landing-build-visual {
    position: relative;
    overflow: hidden;
    border-radius: 13px;
    background:
        linear-gradient(
            145deg,
            #e9f7ef,
            #f6fbf8
        );
}

.landing-visual-shape {
    position: absolute;
    border-radius: 50%;
}

.landing-visual-shape.one {
    width: 95px;
    height: 95px;
    right: -15px;
    top: -25px;
    background: #c8e8d5;
}

.landing-visual-shape.two {
    width: 70px;
    height: 70px;
    left: 8px;
    bottom: -24px;
    background: #d8f0e2;
}

.landing-visual-card {
    position: absolute;
    width: 80px;
    height: 91px;
    left: 50%;
    top: 50%;
    border-radius: 14px;
    background: var(--site-primary);
    box-shadow: 0 11px 25px rgba(15, 138, 75, .16);
    transform: translate(-50%, -50%) rotate(5deg);
}


/* BENEFITS */

.landing-build-benefits {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 10px;

    animation: landingBuildBenefits 10s ease infinite;
}

.landing-benefit {
    height: 45px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px;
    border: 1px solid #e6ebe8;
    border-radius: 10px;
}

.landing-benefit-icon {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    border-radius: 7px;
    background: var(--site-primary-soft);
}

.landing-benefit-line {
    width: 58%;
    height: 5px;
    border-radius: 20px;
    background: #c9d1cd;
}


/* CONTENT SECTION */

.landing-build-section {
    padding: 12px;
    margin-bottom: 10px;
    border-radius: 12px;
    background: #f8faf9;

    animation: landingBuildSection 10s ease infinite;
}

.landing-section-title {
    width: 110px;
    height: 8px;
    margin-bottom: 10px;
    border-radius: 4px;
    background: var(--site-dark);
}

.landing-section-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 7px;
}

.landing-section-card {
    height: 52px;
    padding: 8px;
    border: 1px solid #e6ebe8;
    border-radius: 9px;
    background: #fff;
}

.landing-section-card span {
    display: block;
    width: 24px;
    height: 18px;
    margin-bottom: 6px;
    border-radius: 5px;
    background: #d9eee2;
}

.landing-section-card i {
    display: block;
    width: 75%;
    height: 4px;
    margin-bottom: 4px;
    border-radius: 20px;
    background: #d2d8d5;
}

.landing-section-card i:last-child {
    width: 50%;
}


/* CTA */

.landing-build-cta {
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 13px;
    border-radius: 11px;
    background: var(--site-dark);

    animation: landingBuildCta 10s ease infinite;
}

.landing-build-cta > div {
    flex: 1;
}

.landing-build-cta span {
    display: block;
    width: 110px;
    height: 6px;
    margin-bottom: 5px;
    border-radius: 10px;
    background: #fff;
}

.landing-build-cta i {
    display: block;
    width: 72px;
    height: 4px;
    border-radius: 10px;
    background: #64748b;
}

.landing-build-cta button {
    width: 65px;
    height: 25px;
    border: 0;
    border-radius: 7px;
    background: var(--site-primary);
}


/* ----------------------------------
   CURSOR
---------------------------------- */

.landing-builder-cursor {
    position: absolute;
    z-index: 20;
    top: 40px;
    left: 455px;
    color: var(--site-dark);
    font-size: 1.55rem;
    opacity: 0;
    filter: drop-shadow(0 3px 4px rgba(15, 23, 42, .18));

    animation: landingBuilderCursor 10s ease-in-out infinite;
}


/* ----------------------------------
   ANIMATION TIMELINE
---------------------------------- */

@keyframes landingBuildHeader {

    0%,
    5% {
        opacity: 0;
        transform: translateY(14px) scale(.985);
    }

    10%,
    84% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    93%,
    100% {
        opacity: 0;
        transform: translateY(-4px) scale(.99);
    }
}

@keyframes landingBuildHero {

    0%,
    14% {
        opacity: 0;
        transform: translateY(14px) scale(.985);
    }

    21%,
    84% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    93%,
    100% {
        opacity: 0;
        transform: translateY(-4px) scale(.99);
    }
}

@keyframes landingBuildBenefits {

    0%,
    27% {
        opacity: 0;
        transform: translateY(14px) scale(.985);
    }

    34%,
    84% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    93%,
    100% {
        opacity: 0;
        transform: translateY(-4px) scale(.99);
    }
}

@keyframes landingBuildSection {

    0%,
    39% {
        opacity: 0;
        transform: translateY(14px) scale(.985);
    }

    46%,
    84% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    93%,
    100% {
        opacity: 0;
        transform: translateY(-4px) scale(.99);
    }
}

@keyframes landingBuildCta {

    0%,
    52% {
        opacity: 0;
        transform: translateY(14px) scale(.985);
    }

    59%,
    84% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    93%,
    100% {
        opacity: 0;
        transform: translateY(-4px) scale(.99);
    }
}


/* ----------------------------------
   CURSOR MOVEMENT
---------------------------------- */

@keyframes landingBuilderCursor {

    0%,
    5% {
        top: 35px;
        left: 470px;
        opacity: 0;
    }

    8% {
        opacity: 1;
    }

    14% {
        top: 35px;
        left: 110px;
    }

    25% {
        top: 105px;
        left: 210px;
    }

    38% {
        top: 215px;
        left: 110px;
    }

    51% {
        top: 290px;
        left: 315px;
    }

    65% {
        top: 375px;
        left: 470px;
    }

    76% {
        top: 375px;
        left: 470px;
        transform: scale(.8);
    }

    80% {
        transform: scale(1);
    }

    86% {
        opacity: 1;
    }

    95%,
    100% {
        top: 35px;
        left: 470px;
        opacity: 0;
    }
}


/* ----------------------------------
   FINISH EFFECT
---------------------------------- */

.landing-browser {
    animation: landingBrowserReady 10s ease infinite;
}

@keyframes landingBrowserReady {

    0%,
    60% {
        border-color: #d8dee9;
    }

    68%,
    84% {
        border-color: #b1dac2;
        box-shadow:
            0 28px 70px rgba(15, 23, 42, .12),
            0 0 0 3px rgba(15, 138, 75, .04);
    }

    93%,
    100% {
        border-color: #d8dee9;
    }
}


/* ----------------------------------
   MOBILE
---------------------------------- */

@media (max-width: 767.98px) {

    .landing-builder-stage {
        height: 430px;
        min-height: 430px;
    }

    .landing-builder {
        height: 370px;
        min-height: 370px;
        padding: 13px;
    }

    .landing-build-header {
        height: 27px;
        margin-bottom: 8px;
    }

    .landing-mini-nav {
        display: none;
    }

    .landing-build-hero {
        height: 122px;
        margin-bottom: 8px;
    }

    .landing-build-copy {
        padding: 11px;
    }

    .landing-build-benefits {
        gap: 5px;
        margin-bottom: 8px;
    }

    .landing-benefit {
        height: 39px;
        padding: 6px;
    }

    .landing-benefit-icon {
        width: 18px;
        height: 18px;
        flex-basis: 18px;
    }

    .landing-build-section {
        padding: 8px;
        margin-bottom: 8px;
    }

    .landing-section-card {
        height: 43px;
        padding: 6px;
    }

    .landing-build-cta {
        height: 43px;
    }

    .landing-builder-cursor {
        display: none;
    }
}


/* ----------------------------------
   REDUCED MOTION
---------------------------------- */

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

    .landing-build-block {
        opacity: 1;
        transform: none;
        animation: none;
    }

    .landing-builder-cursor {
        display: none;
    }

    .landing-browser {
        animation: none;
    }
}

/* ==========================================================
   CORPORATE SITE BUILD HERO
   Добавить в /assets/style.css
========================================================== */

.corp-builder-stage {
    position: relative;
    z-index: 2;
    height: 510px;
    min-height: 510px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.corp-browser {
    max-width: 590px;
}

.corp-builder {
    position: relative;
    height: 430px;
    min-height: 430px;
    padding: 18px;
    overflow: hidden;
    background: #fff;
}

.corp-build-block {
    opacity: 0;
    transform: translateY(14px) scale(.985);
}


/* ----------------------------------
   HEADER
---------------------------------- */

.corp-build-header {
    height: 31px;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;

    animation: corpBuildHeader 11s ease infinite;
}

.corp-logo {
    width: 64px;
    height: 13px;
    border-radius: 4px;
    background: var(--site-dark);
}

.corp-nav {
    display: flex;
    gap: 7px;
    margin-left: auto;
}

.corp-nav span {
    width: 29px;
    height: 5px;
    border-radius: 20px;
    background: #d3dad6;
}

.corp-nav-button {
    width: 48px;
    height: 19px;
    margin-left: 4px;
    border-radius: 6px;
    background: var(--site-primary);
}


/* ----------------------------------
   HERO
---------------------------------- */

.corp-build-hero {
    display: grid;
    grid-template-columns: 1.08fr .92fr;
    gap: 10px;
    height: 132px;
    margin-bottom: 9px;

    animation: corpBuildHero 11s ease infinite;
}

.corp-hero-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 15px;
    border-radius: 13px;
    background: #f5f8f6;
}

.corp-eyebrow {
    width: 54px;
    height: 5px;
    margin-bottom: 8px;
    border-radius: 20px;
    background: #8ebca1;
}

.corp-title {
    width: 91%;
    height: 11px;
    margin-bottom: 6px;
    border-radius: 4px;
    background: var(--site-dark);
}

.corp-title.short {
    width: 63%;
    margin-bottom: 9px;
}

.corp-text {
    width: 94%;
    height: 4px;
    margin-bottom: 5px;
    border-radius: 20px;
    background: #c8d0cc;
}

.corp-text.short {
    width: 67%;
}

.corp-button {
    width: 64px;
    height: 20px;
    margin-top: 8px;
    border-radius: 6px;
    background: var(--site-primary);
}


/* ----------------------------------
   CORPORATE VISUAL
---------------------------------- */

.corp-hero-visual {
    position: relative;
    overflow: hidden;
    border-radius: 13px;
    background:
        linear-gradient(
            145deg,
            #e7f4ec,
            #f6faf8
        );
}

.corp-building {
    position: absolute;
    z-index: 2;
    width: 84px;
    height: 91px;
    left: 50%;
    bottom: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    padding: 15px 13px;
    border-radius: 8px 8px 0 0;
    background: var(--site-dark);
    transform: translateX(-50%);
}

.corp-building::before {
    content: "";
    position: absolute;
    top: -17px;
    left: 17px;
    width: 50px;
    height: 18px;
    border-radius: 6px 6px 0 0;
    background: #263345;
}

.corp-building span {
    height: 13px;
    border-radius: 2px;
    background: rgba(255, 255, 255, .7);
}

.corp-visual-circle {
    position: absolute;
    width: 105px;
    height: 105px;
    right: -33px;
    top: -35px;
    border-radius: 50%;
    background: #cce8d7;
}


/* ----------------------------------
   STATS
---------------------------------- */

.corp-build-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 7px;
    margin-bottom: 9px;

    animation: corpBuildStats 11s ease infinite;
}

.corp-stat {
    height: 43px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 8px;
    border: 1px solid #e5eae7;
    border-radius: 9px;
    background: #fff;
}

.corp-stat strong {
    width: 34px;
    height: 7px;
    margin-bottom: 5px;
    border-radius: 3px;
    background: var(--site-primary);
}

.corp-stat span {
    width: 65%;
    height: 4px;
    border-radius: 20px;
    background: #d0d7d3;
}


/* ----------------------------------
   SERVICES
---------------------------------- */

.corp-build-services {
    padding: 11px;
    margin-bottom: 9px;
    border-radius: 11px;
    background: #f8faf9;

    animation: corpBuildServices 11s ease infinite;
}

.corp-section-head {
    margin-bottom: 9px;
}

.corp-section-head span {
    display: block;
    width: 100px;
    height: 8px;
    margin-bottom: 5px;
    border-radius: 4px;
    background: var(--site-dark);
}

.corp-section-head i {
    display: block;
    width: 145px;
    height: 4px;
    border-radius: 20px;
    background: #ced5d1;
}

.corp-service-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 7px;
}

.corp-service-mini {
    height: 55px;
    padding: 7px;
    border: 1px solid #e4e9e6;
    border-radius: 8px;
    background: #fff;
}

.corp-service-mini b {
    display: block;
    width: 22px;
    height: 18px;
    margin-bottom: 6px;
    border-radius: 5px;
    background: var(--site-primary-soft);
}

.corp-service-mini span {
    display: block;
    width: 70%;
    height: 5px;
    margin-bottom: 5px;
    border-radius: 20px;
    background: #aebbb4;
}

.corp-service-mini i {
    display: block;
    width: 85%;
    height: 3px;
    margin-bottom: 3px;
    border-radius: 20px;
    background: #d6dcda;
}

.corp-service-mini i:last-child {
    width: 55%;
}


/* ----------------------------------
   CTA
---------------------------------- */

.corp-build-cta {
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 10px;
    background: var(--site-dark);

    animation: corpBuildCta 11s ease infinite;
}

.corp-build-cta > div {
    flex: 1;
}

.corp-build-cta span {
    display: block;
    width: 115px;
    height: 6px;
    margin-bottom: 5px;
    border-radius: 10px;
    background: #fff;
}

.corp-build-cta i {
    display: block;
    width: 76px;
    height: 4px;
    border-radius: 10px;
    background: #64748b;
}

.corp-build-cta button {
    width: 67px;
    height: 25px;
    border: 0;
    border-radius: 7px;
    background: var(--site-primary);
}


/* ----------------------------------
   CURSOR
---------------------------------- */

.corp-builder-cursor {
    position: absolute;
    z-index: 20;
    top: 35px;
    left: 470px;
    color: var(--site-dark);
    font-size: 1.55rem;
    opacity: 0;
    filter: drop-shadow(0 3px 4px rgba(15, 23, 42, .18));

    animation: corpBuilderCursor 11s ease-in-out infinite;
}


/* ----------------------------------
   BUILD SEQUENCE
---------------------------------- */

@keyframes corpBuildHeader {

    0%,
    5% {
        opacity: 0;
        transform: translateY(14px) scale(.985);
    }

    10%,
    86% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    94%,
    100% {
        opacity: 0;
        transform: translateY(-4px) scale(.99);
    }
}

@keyframes corpBuildHero {

    0%,
    15% {
        opacity: 0;
        transform: translateY(14px) scale(.985);
    }

    22%,
    86% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    94%,
    100% {
        opacity: 0;
        transform: translateY(-4px) scale(.99);
    }
}

@keyframes corpBuildStats {

    0%,
    28% {
        opacity: 0;
        transform: translateY(14px) scale(.985);
    }

    35%,
    86% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    94%,
    100% {
        opacity: 0;
        transform: translateY(-4px) scale(.99);
    }
}

@keyframes corpBuildServices {

    0%,
    41% {
        opacity: 0;
        transform: translateY(14px) scale(.985);
    }

    48%,
    86% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    94%,
    100% {
        opacity: 0;
        transform: translateY(-4px) scale(.99);
    }
}

@keyframes corpBuildCta {

    0%,
    54% {
        opacity: 0;
        transform: translateY(14px) scale(.985);
    }

    61%,
    86% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    94%,
    100% {
        opacity: 0;
        transform: translateY(-4px) scale(.99);
    }
}


/* ----------------------------------
   CURSOR MOVEMENT
---------------------------------- */

@keyframes corpBuilderCursor {

    0%,
    5% {
        top: 31px;
        left: 470px;
        opacity: 0;
    }

    8% {
        opacity: 1;
    }

    14% {
        top: 35px;
        left: 110px;
    }

    27% {
        top: 105px;
        left: 210px;
    }

    39% {
        top: 205px;
        left: 355px;
    }

    52% {
        top: 280px;
        left: 155px;
    }

    66% {
        top: 372px;
        left: 470px;
    }

    77% {
        top: 372px;
        left: 470px;
        transform: scale(.8);
    }

    81% {
        transform: scale(1);
    }

    88% {
        opacity: 1;
    }

    96%,
    100% {
        top: 31px;
        left: 470px;
        opacity: 0;
    }
}


/* ----------------------------------
   READY EFFECT
---------------------------------- */

.corp-browser {
    animation: corpBrowserReady 11s ease infinite;
}

@keyframes corpBrowserReady {

    0%,
    62% {
        border-color: #d8dee9;
    }

    70%,
    86% {
        border-color: #b1dac2;
        box-shadow:
            0 28px 70px rgba(15, 23, 42, .12),
            0 0 0 3px rgba(15, 138, 75, .04);
    }

    94%,
    100% {
        border-color: #d8dee9;
    }
}


/* ----------------------------------
   MOBILE
---------------------------------- */

@media (max-width: 767.98px) {

    .corp-builder-stage {
        height: 430px;
        min-height: 430px;
    }

    .corp-builder {
        height: 370px;
        min-height: 370px;
        padding: 13px;
    }

    .corp-build-header {
        height: 26px;
        margin-bottom: 7px;
    }

    .corp-nav {
        display: none;
    }

    .corp-build-hero {
        height: 118px;
        margin-bottom: 7px;
    }

    .corp-hero-copy {
        padding: 10px;
    }

    .corp-build-stats {
        gap: 4px;
        margin-bottom: 7px;
    }

    .corp-stat {
        height: 36px;
        padding: 6px;
    }

    .corp-build-services {
        padding: 7px;
        margin-bottom: 7px;
    }

    .corp-service-mini {
        height: 45px;
        padding: 5px;
    }

    .corp-build-cta {
        height: 42px;
    }

    .corp-builder-cursor {
        display: none;
    }
}


/* ----------------------------------
   REDUCED MOTION
---------------------------------- */

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

    .corp-build-block {
        opacity: 1;
        transform: none;
        animation: none;
    }

    .corp-builder-cursor {
        display: none;
    }

    .corp-browser {
        animation: none;
    }
}

/* ==========================================================
   SERVICES SITE BUILD HERO
   Добавить в /assets/style.css
========================================================== */

.services-builder-stage {
    position: relative;
    z-index: 2;
    height: 510px;
    min-height: 510px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.services-browser {
    max-width: 590px;
}

.services-builder {
    position: relative;
    height: 430px;
    min-height: 430px;
    padding: 18px;
    overflow: hidden;
    background: #fff;
}

.services-build-block {
    opacity: 0;
    transform: translateY(14px) scale(.985);
}


/* ----------------------------------
   HEADER
---------------------------------- */

.services-build-header {
    height: 31px;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 9px;

    animation: servicesBuildHeader 11s ease infinite;
}

.services-logo {
    width: 61px;
    height: 13px;
    border-radius: 4px;
    background: var(--site-dark);
}

.services-nav {
    display: flex;
    gap: 7px;
    margin-left: auto;
}

.services-nav span {
    width: 31px;
    height: 5px;
    border-radius: 20px;
    background: #d3dad6;
}

.services-nav-button {
    width: 49px;
    height: 19px;
    margin-left: 4px;
    border-radius: 6px;
    background: var(--site-primary);
}


/* ----------------------------------
   HERO
---------------------------------- */

.services-build-hero {
    display: grid;
    grid-template-columns: 1.12fr .88fr;
    gap: 10px;
    height: 124px;
    margin-bottom: 9px;

    animation: servicesBuildHero 11s ease infinite;
}

.services-hero-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 14px;
    border-radius: 13px;
    background: var(--site-primary-soft);
}

.services-eyebrow {
    width: 50px;
    height: 5px;
    margin-bottom: 7px;
    border-radius: 20px;
    background: #8dbda1;
}

.services-title {
    width: 90%;
    height: 10px;
    margin-bottom: 6px;
    border-radius: 4px;
    background: var(--site-dark);
}

.services-title.short {
    width: 64%;
    margin-bottom: 9px;
}

.services-text {
    width: 94%;
    height: 4px;
    margin-bottom: 4px;
    border-radius: 20px;
    background: #bdcec4;
}

.services-text.short {
    width: 68%;
}

.services-button {
    width: 62px;
    height: 19px;
    margin-top: 8px;
    border-radius: 6px;
    background: var(--site-primary);
}


/* ----------------------------------
   HERO SIDE
---------------------------------- */

.services-hero-side {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.services-side-card {
    position: relative;
    flex: 1;
    padding: 13px;
    overflow: hidden;
    border-radius: 13px;
    background: var(--site-dark);
}

.services-side-card::after {
    content: "";
    position: absolute;
    width: 72px;
    height: 72px;
    right: -20px;
    bottom: -25px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .06);
}

.services-side-card.small {
    flex: .65;
    background: #f3f7f5;
}

.services-side-card span {
    display: block;
    width: 56%;
    height: 7px;
    margin-bottom: 7px;
    border-radius: 20px;
    background: var(--site-primary);
}

.services-side-card i {
    display: block;
    width: 84%;
    height: 4px;
    margin-bottom: 5px;
    border-radius: 20px;
    background: #64748b;
}

.services-side-card i:last-child {
    width: 58%;
}

.services-side-card.small span {
    background: var(--site-dark);
}

.services-side-card.small i {
    background: #cdd6d1;
}


/* ----------------------------------
   SERVICE GRID
---------------------------------- */

.services-build-grid {
    padding: 10px;
    margin-bottom: 9px;
    border-radius: 11px;
    background: #f8faf9;

    animation: servicesBuildGrid 11s ease infinite;
}

.services-section-head {
    margin-bottom: 8px;
}

.services-section-head span {
    display: block;
    width: 105px;
    height: 8px;
    margin-bottom: 5px;
    border-radius: 4px;
    background: var(--site-dark);
}

.services-section-head i {
    display: block;
    width: 145px;
    height: 4px;
    border-radius: 20px;
    background: #d0d7d3;
}

.services-mini-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 7px;
}

.services-mini-card {
    height: 55px;
    padding: 7px;
    border: 1px solid #e4e9e6;
    border-radius: 9px;
    background: #fff;
}

.services-mini-card b {
    display: block;
    width: 22px;
    height: 20px;
    margin-bottom: 6px;
    border-radius: 6px;
    background: var(--site-primary-soft);
}

.services-mini-card span {
    display: block;
    width: 72%;
    height: 5px;
    margin-bottom: 5px;
    border-radius: 20px;
    background: #aebbb4;
}

.services-mini-card i {
    display: block;
    width: 87%;
    height: 3px;
    border-radius: 20px;
    background: #d6dcda;
}


/* ----------------------------------
   PROCESS
---------------------------------- */

.services-build-process {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 7px;
    margin-bottom: 9px;

    animation: servicesBuildProcess 11s ease infinite;
}

.services-process-line {
    height: 39px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px;
    border: 1px solid #e5eae7;
    border-radius: 9px;
    background: #fff;
}

.services-process-line span {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    border-radius: 50%;
    background: var(--site-primary);
}

.services-process-line i {
    width: 65%;
    height: 5px;
    border-radius: 20px;
    background: #c9d1cd;
}


/* ----------------------------------
   CTA
---------------------------------- */

.services-build-cta {
    height: 47px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 10px;
    background: var(--site-dark);

    animation: servicesBuildCta 11s ease infinite;
}

.services-build-cta > div {
    flex: 1;
}

.services-build-cta span {
    display: block;
    width: 112px;
    height: 6px;
    margin-bottom: 5px;
    border-radius: 10px;
    background: #fff;
}

.services-build-cta i {
    display: block;
    width: 74px;
    height: 4px;
    border-radius: 10px;
    background: #64748b;
}

.services-build-cta button {
    width: 66px;
    height: 25px;
    border: 0;
    border-radius: 7px;
    background: var(--site-primary);
}


/* ----------------------------------
   CURSOR
---------------------------------- */

.services-builder-cursor {
    position: absolute;
    z-index: 20;
    top: 35px;
    left: 470px;
    color: var(--site-dark);
    font-size: 1.55rem;
    opacity: 0;
    filter: drop-shadow(0 3px 4px rgba(15, 23, 42, .18));

    animation: servicesBuilderCursor 11s ease-in-out infinite;
}


/* ----------------------------------
   BUILD SEQUENCE
---------------------------------- */

@keyframes servicesBuildHeader {

    0%,
    5% {
        opacity: 0;
        transform: translateY(14px) scale(.985);
    }

    10%,
    86% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    94%,
    100% {
        opacity: 0;
        transform: translateY(-4px) scale(.99);
    }
}

@keyframes servicesBuildHero {

    0%,
    15% {
        opacity: 0;
        transform: translateY(14px) scale(.985);
    }

    22%,
    86% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    94%,
    100% {
        opacity: 0;
        transform: translateY(-4px) scale(.99);
    }
}

@keyframes servicesBuildGrid {

    0%,
    29% {
        opacity: 0;
        transform: translateY(14px) scale(.985);
    }

    36%,
    86% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    94%,
    100% {
        opacity: 0;
        transform: translateY(-4px) scale(.99);
    }
}

@keyframes servicesBuildProcess {

    0%,
    42% {
        opacity: 0;
        transform: translateY(14px) scale(.985);
    }

    49%,
    86% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    94%,
    100% {
        opacity: 0;
        transform: translateY(-4px) scale(.99);
    }
}

@keyframes servicesBuildCta {

    0%,
    55% {
        opacity: 0;
        transform: translateY(14px) scale(.985);
    }

    62%,
    86% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    94%,
    100% {
        opacity: 0;
        transform: translateY(-4px) scale(.99);
    }
}


/* ----------------------------------
   CURSOR MOVEMENT
---------------------------------- */

@keyframes servicesBuilderCursor {

    0%,
    5% {
        top: 30px;
        left: 470px;
        opacity: 0;
    }

    8% {
        opacity: 1;
    }

    14% {
        top: 34px;
        left: 110px;
    }

    26% {
        top: 105px;
        left: 215px;
    }

    39% {
        top: 218px;
        left: 340px;
    }

    52% {
        top: 310px;
        left: 160px;
    }

    66% {
        top: 380px;
        left: 470px;
    }

    77% {
        top: 380px;
        left: 470px;
        transform: scale(.8);
    }

    81% {
        transform: scale(1);
    }

    88% {
        opacity: 1;
    }

    96%,
    100% {
        top: 30px;
        left: 470px;
        opacity: 0;
    }
}


/* ----------------------------------
   READY EFFECT
---------------------------------- */

.services-browser {
    animation: servicesBrowserReady 11s ease infinite;
}

@keyframes servicesBrowserReady {

    0%,
    62% {
        border-color: #d8dee9;
    }

    70%,
    86% {
        border-color: #b1dac2;
        box-shadow:
            0 28px 70px rgba(15, 23, 42, .12),
            0 0 0 3px rgba(15, 138, 75, .04);
    }

    94%,
    100% {
        border-color: #d8dee9;
    }
}


/* ----------------------------------
   MOBILE
---------------------------------- */

@media (max-width: 767.98px) {

    .services-builder-stage {
        height: 430px;
        min-height: 430px;
    }

    .services-builder {
        height: 370px;
        min-height: 370px;
        padding: 13px;
    }

    .services-build-header {
        height: 26px;
        margin-bottom: 7px;
    }

    .services-nav {
        display: none;
    }

    .services-build-hero {
        height: 112px;
        margin-bottom: 7px;
    }

    .services-hero-copy {
        padding: 10px;
    }

    .services-build-grid {
        padding: 7px;
        margin-bottom: 7px;
    }

    .services-mini-card {
        height: 45px;
        padding: 5px;
    }

    .services-build-process {
        gap: 4px;
        margin-bottom: 7px;
    }

    .services-process-line {
        height: 33px;
        padding: 5px;
    }

    .services-process-line span {
        width: 17px;
        height: 17px;
        flex-basis: 17px;
    }

    .services-build-cta {
        height: 42px;
    }

    .services-builder-cursor {
        display: none;
    }
}


/* ----------------------------------
   REDUCED MOTION
---------------------------------- */

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

    .services-build-block {
        opacity: 1;
        transform: none;
        animation: none;
    }

    .services-builder-cursor {
        display: none;
    }

    .services-browser {
        animation: none;
    }
}
/* ==========================================================
   CATALOG SITE BUILD HERO
   Добавить в /assets/style.css
========================================================== */

.catalog-builder-stage {
    position: relative;
    z-index: 2;
    height: 510px;
    min-height: 510px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.catalog-browser {
    max-width: 590px;
}

.catalog-builder {
    position: relative;
    height: 430px;
    min-height: 430px;
    padding: 18px;
    overflow: hidden;
    background: #fff;
}

.catalog-build-block {
    opacity: 0;
    transform: translateY(14px) scale(.985);
}


/* HEADER */

.catalog-build-header {
    height: 31px;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 9px;
    animation: catalogBuildHeader 11s ease infinite;
}

.catalog-logo {
    width: 62px;
    height: 13px;
    border-radius: 4px;
    background: var(--site-dark);
}

.catalog-nav {
    display: flex;
    gap: 7px;
    margin-left: auto;
}

.catalog-nav span {
    width: 31px;
    height: 5px;
    border-radius: 20px;
    background: #d3dad6;
}

.catalog-search {
    width: 49px;
    height: 21px;
    display: flex;
    align-items: center;
    padding: 0 7px;
    border: 1px solid #dfe6e2;
    border-radius: 7px;
}

.catalog-search i {
    width: 18px;
    height: 4px;
    border-radius: 20px;
    background: #bcc7c1;
}


/* INTRO */

.catalog-build-intro {
    height: 92px;
    display: grid;
    grid-template-columns: 1.2fr .8fr;
    gap: 10px;
    margin-bottom: 9px;
    padding: 13px;
    border-radius: 12px;
    background: var(--site-primary-soft);
    animation: catalogBuildIntro 11s ease infinite;
}

.catalog-eyebrow {
    width: 48px;
    height: 5px;
    margin-bottom: 7px;
    border-radius: 20px;
    background: #8dbda1;
}

.catalog-title {
    width: 90%;
    height: 10px;
    margin-bottom: 6px;
    border-radius: 4px;
    background: var(--site-dark);
}

.catalog-title.short {
    width: 61%;
    margin-bottom: 9px;
}

.catalog-text {
    width: 94%;
    height: 4px;
    margin-bottom: 5px;
    border-radius: 20px;
    background: #bdcec4;
}

.catalog-text.short {
    width: 67%;
}

.catalog-intro-visual {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    background: #fff;
}

.catalog-intro-visual span,
.catalog-intro-visual i,
.catalog-intro-visual b {
    position: absolute;
    display: block;
    border-radius: 8px;
}

.catalog-intro-visual span {
    width: 48px;
    height: 55px;
    left: 15px;
    bottom: 9px;
    background: #b7dcca;
}

.catalog-intro-visual i {
    width: 39px;
    height: 42px;
    right: 13px;
    top: 13px;
    background: #dcebe3;
}

.catalog-intro-visual b {
    width: 28px;
    height: 26px;
    right: 27px;
    bottom: 10px;
    background: var(--site-primary);
}


/* FILTERS */

.catalog-build-filters {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 7px;
    margin-bottom: 9px;
    animation: catalogBuildFilters 11s ease infinite;
}

.catalog-filter {
    height: 31px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 9px;
    border: 1px solid #e2e8e5;
    border-radius: 8px;
    background: #fff;
}

.catalog-filter span {
    width: 55%;
    height: 5px;
    border-radius: 20px;
    background: #c3cdc8;
}

.catalog-filter i {
    color: #94a3b8;
    font-size: .55rem;
}


/* GRID */

.catalog-build-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 7px;
    margin-bottom: 10px;
    animation: catalogBuildGrid 11s ease infinite;
}

.catalog-mini-card {
    min-width: 0;
    padding: 7px;
    border: 1px solid #e4e9e6;
    border-radius: 9px;
    background: #fff;
}

.catalog-mini-image {
    position: relative;
    height: 70px;
    margin-bottom: 7px;
    overflow: hidden;
    border-radius: 7px;
    background: #edf5f1;
}

.catalog-mini-image::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 37px;
    height: 45px;
    border-radius: 9px;
    background: #b7d7c6;
    transform: translate(-50%, -50%);
}

.catalog-mini-image.two {
    background: #f2f4f3;
}

.catalog-mini-image.two::after {
    width: 45px;
    height: 33px;
    border-radius: 50%;
    background: #cfd7d3;
}

.catalog-mini-image.three {
    background: #edf6f4;
}

.catalog-mini-image.three::after {
    width: 31px;
    height: 48px;
    border-radius: 15px;
    background: #a9cdc0;
}

.catalog-mini-image.four {
    background: #f5f7f6;
}

.catalog-mini-image.four::after {
    width: 43px;
    height: 40px;
    background: #d3dfd9;
}

.catalog-mini-card > span {
    display: block;
    width: 78%;
    height: 5px;
    margin-bottom: 5px;
    border-radius: 20px;
    background: #9ca9a2;
}

.catalog-mini-card > i {
    display: block;
    width: 58%;
    height: 4px;
    margin-bottom: 6px;
    border-radius: 20px;
    background: #d1d8d4;
}

.catalog-mini-card > b {
    display: block;
    width: 42px;
    height: 6px;
    border-radius: 20px;
    background: var(--site-primary);
}


/* PAGINATION */

.catalog-build-pagination {
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    animation: catalogBuildPagination 11s ease infinite;
}

.catalog-build-pagination span {
    width: 19px;
    height: 19px;
    border-radius: 6px;
    background: #eef2f0;
}

.catalog-build-pagination span.active {
    background: var(--site-primary);
}


/* CURSOR */

.catalog-builder-cursor {
    position: absolute;
    z-index: 20;
    top: 35px;
    left: 470px;
    color: var(--site-dark);
    font-size: 1.55rem;
    opacity: 0;
    filter: drop-shadow(0 3px 4px rgba(15, 23, 42, .18));
    animation: catalogBuilderCursor 11s ease-in-out infinite;
}


/* BUILD SEQUENCE */

@keyframes catalogBuildHeader {
    0%,
    5% {
        opacity: 0;
        transform: translateY(14px) scale(.985);
    }

    10%,
    86% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    94%,
    100% {
        opacity: 0;
        transform: translateY(-4px) scale(.99);
    }
}

@keyframes catalogBuildIntro {
    0%,
    15% {
        opacity: 0;
        transform: translateY(14px) scale(.985);
    }

    22%,
    86% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    94%,
    100% {
        opacity: 0;
        transform: translateY(-4px) scale(.99);
    }
}

@keyframes catalogBuildFilters {
    0%,
    29% {
        opacity: 0;
        transform: translateY(14px) scale(.985);
    }

    36%,
    86% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    94%,
    100% {
        opacity: 0;
        transform: translateY(-4px) scale(.99);
    }
}

@keyframes catalogBuildGrid {
    0%,
    42% {
        opacity: 0;
        transform: translateY(14px) scale(.985);
    }

    49%,
    86% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    94%,
    100% {
        opacity: 0;
        transform: translateY(-4px) scale(.99);
    }
}

@keyframes catalogBuildPagination {
    0%,
    55% {
        opacity: 0;
        transform: translateY(14px) scale(.985);
    }

    62%,
    86% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    94%,
    100% {
        opacity: 0;
        transform: translateY(-4px) scale(.99);
    }
}


/* CURSOR MOVEMENT */

@keyframes catalogBuilderCursor {
    0%,
    5% {
        top: 31px;
        left: 470px;
        opacity: 0;
    }

    8% {
        opacity: 1;
    }

    15% {
        top: 34px;
        left: 110px;
    }

    28% {
        top: 105px;
        left: 210px;
    }

    40% {
        top: 176px;
        left: 160px;
    }

    53% {
        top: 275px;
        left: 350px;
    }

    66% {
        top: 391px;
        left: 275px;
    }

    77% {
        top: 391px;
        left: 275px;
        transform: scale(.8);
    }

    81% {
        transform: scale(1);
    }

    88% {
        opacity: 1;
    }

    96%,
    100% {
        top: 31px;
        left: 470px;
        opacity: 0;
    }
}


/* READY EFFECT */

.catalog-browser {
    animation: catalogBrowserReady 11s ease infinite;
}

@keyframes catalogBrowserReady {
    0%,
    62% {
        border-color: #d8dee9;
    }

    70%,
    86% {
        border-color: #b1dac2;
        box-shadow:
            0 28px 70px rgba(15, 23, 42, .12),
            0 0 0 3px rgba(15, 138, 75, .04);
    }

    94%,
    100% {
        border-color: #d8dee9;
    }
}


/* MOBILE */

@media (max-width: 767.98px) {

    .catalog-builder-stage {
        height: 430px;
        min-height: 430px;
    }

    .catalog-builder {
        height: 370px;
        min-height: 370px;
        padding: 13px;
    }

    .catalog-build-header {
        height: 26px;
        margin-bottom: 7px;
    }

    .catalog-nav {
        display: none;
    }

    .catalog-build-intro {
        height: 80px;
        margin-bottom: 7px;
        padding: 9px;
    }

    .catalog-build-filters {
        gap: 4px;
        margin-bottom: 7px;
    }

    .catalog-filter {
        height: 27px;
        padding: 0 6px;
    }

    .catalog-build-grid {
        gap: 4px;
        margin-bottom: 7px;
    }

    .catalog-mini-card {
        padding: 5px;
    }

    .catalog-mini-image {
        height: 55px;
    }

    .catalog-mini-image::after {
        transform: translate(-50%, -50%) scale(.8);
    }

    .catalog-builder-cursor {
        display: none;
    }
}


/* REDUCED MOTION */

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

    .catalog-build-block {
        opacity: 1;
        transform: none;
        animation: none;
    }

    .catalog-builder-cursor {
        display: none;
    }

    .catalog-browser {
        animation: none;
    }
}

/* Common navigation additions */
.site-navbar .dropdown-menu {
    min-width: 230px;
    padding: 10px;
    border: 1px solid var(--site-border);
    border-radius: 14px;
    box-shadow: 0 18px 45px rgba(15, 23, 42, .10);
}

.site-navbar .dropdown-item {
    padding: 9px 12px;
    border-radius: 9px;
    color: #475569;
    font-size: .93rem;
    font-weight: 600;
}

.site-navbar .dropdown-item:hover,
.site-navbar .dropdown-item:focus {
    background: #f1f5f9;
    color: var(--site-primary);
}

.footer-brand img {
    max-width: 100%;
    object-fit: contain;
}
.accordion {
    --bs-accordion-bg: transparent;
    --bs-accordion-border-width: 0;
    --bs-accordion-border-radius: 0;
    --bs-accordion-inner-border-radius: 0;
    --bs-accordion-btn-focus-box-shadow: none;
}

.accordion-item {
    overflow: hidden;
    margin-bottom: 14px;
    background: var(--site-surface, #fff);
    border: 1px solid var(--site-border, #e2e8f0);
    border-radius: 20px !important;
    transition:
        border-color .25s ease,
        box-shadow .25s ease;
}

.accordion-item:last-child {
    margin-bottom: 0;
}

.accordion-item:hover {
    border-color: #cbd5e1;
    box-shadow: 0 10px 28px rgba(15, 23, 42, .05);
}

.accordion-header {
    margin: 0;
}

.accordion-button {
    padding: 20px 24px;
    background: transparent;
    color: var(--site-dark, #0f172a);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.4;
    box-shadow: none !important;
}

.accordion-button:not(.collapsed) {
    background: var(--site-primary-soft, #eaf7f0);
    color: var(--site-primary-dark, #08723d);
}

.accordion-button:focus {
    box-shadow: none;
}


/* Аккуратная стрелка */

.accordion-button::after {
    flex-shrink: 0;

    width: 10px;
    height: 10px;
    margin-left: auto;

    background-image: none !important;

    border-right: 2px solid #64748b;
    border-bottom: 2px solid #64748b;

    transform: rotate(45deg);
    transition: transform .2s ease;
}

.accordion-button:not(.collapsed)::after {
    border-color: var(--site-primary, #0f8a4b);
    transform: rotate(-135deg);
}

/* Тело */

.accordion-body {
    padding: 4px 24px 24px;
    color: var(--site-muted, #64748b);
    line-height: 1.75;
}

.accordion-body p:last-child {
    margin-bottom: 0;
}


/* Mobile */

@media (max-width: 767.98px) {

    .accordion-item {
        margin-bottom: 10px;
        border-radius: 17px !important;
    }

    .accordion-button {
        padding: 19px 58px 19px 19px;
        font-size: .95rem;
    }

    .accordion-button::after {
        right: 18px;
        width: 32px;
        height: 32px;
    }

    .accordion-button::before {
        right: 28px;
    }

    .accordion-body {
        padding: 2px 19px 20px;
        font-size: .93rem;
    }
}
/* ==========================================================
   SEO AUDIT HERO
   Если нужен отдельный интерфейс аудита в правой колонке
========================================================== */

.seo-audit-ui {
    padding: 8px 0;
}

.seo-audit-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 16px;
}

.seo-audit-title {
    width: 145px;
    height: 12px;
    margin-bottom: 7px;
    border-radius: 4px;
    background: var(--site-dark);
}

.seo-audit-subtitle {
    width: 95px;
    height: 5px;
    border-radius: 20px;
    background: #ccd5d0;
}

.seo-audit-score {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 5px solid #bfe1cc;
    border-radius: 50%;
    color: var(--site-primary);
    font-size: .9rem;
    font-weight: 800;
}

.seo-audit-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 13px;
}

.seo-audit-stat {
    padding: 10px;
    border: 1px solid #e4eae7;
    border-radius: 10px;
    background: #fff;
}

.seo-audit-stat span,
.seo-audit-stat strong {
    display: block;
    border-radius: 20px;
}

.seo-audit-stat span {
    width: 55%;
    height: 4px;
    margin-bottom: 7px;
    background: #cbd4cf;
}

.seo-audit-stat strong {
    width: 40%;
    height: 8px;
    background: var(--site-dark);
}

.seo-audit-list {
    display: grid;
    gap: 7px;
    margin-bottom: 13px;
}

.seo-audit-row {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 10px;
    border: 1px solid #e6ebe8;
    border-radius: 9px;
    background: #fff;
}

.seo-audit-status {
    width: 9px;
    height: 9px;
    flex: 0 0 9px;
    border-radius: 50%;
}

.seo-audit-row-error .seo-audit-status {
    background: #ef4444;
}

.seo-audit-row-warning .seo-audit-status {
    background: #f59e0b;
}

.seo-audit-row-ok .seo-audit-status {
    background: var(--site-primary);
}

.seo-audit-row > div {
    flex: 1;
}

.seo-audit-row strong,
.seo-audit-row i {
    display: block;
    border-radius: 20px;
}

.seo-audit-row strong {
    width: 60%;
    height: 5px;
    margin-bottom: 5px;
    background: #9eaaa4;
}

.seo-audit-row i {
    width: 82%;
    height: 4px;
    background: #d8dedb;
}

.seo-audit-progress {
    padding: 10px;
    border: 1px solid #e5ebe8;
    border-radius: 10px;
    background: #f8faf9;
}

.seo-audit-progress-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 7px;
}

.seo-audit-progress-head span,
.seo-audit-progress-head i {
    display: block;
    height: 4px;
    border-radius: 20px;
}

.seo-audit-progress-head span {
    width: 85px;
    background: #aeb8b3;
}

.seo-audit-progress-head i {
    width: 24px;
    background: #c9d2cd;
}

.seo-audit-progress-bar {
    height: 6px;
    overflow: hidden;
    border-radius: 20px;
    background: #e6ece8;
}

.seo-audit-progress-bar span {
    display: block;
    width: 78%;
    height: 100%;
    border-radius: inherit;
    background: var(--site-primary);
    animation: seoAuditProgress 5s ease-in-out infinite;
}

@keyframes seoAuditProgress {
    0% {
        width: 18%;
    }

    55% {
        width: 78%;
    }

    80%,
    100% {
        width: 78%;
    }
}