/*        <section class="hero">
            <div class="container">
                <div class="hero-content">
                    <h1 class="h1--inner"><span>Expert Website </span> Audit</h1>
                    <p class="hero-description">Our manual website audit finds what's costing you traffic and conversions. You get a full roadmap to fix SEO gaps, speed issues, UX friction, and technical blockers - with clear priorities your team can act on immediately. Get your FREE Express Audit - see critical issues within 60 seconds.</p>
                    <div data-wa-widget
                        data-wa-id="hero"
                        data-wa-mode="website"
                        data-wa-cta="#price-section"
                        style="width: 100%; max-width: 550px;">
                    </div>
                    <ul class="hero-items">
                        <li>No Credit Card Required</li>
                        <li>Free 15-Point Check</li>
                        <li>Results in 60 Seconds</li>
                    </ul>
                </div>

                <div class="hero-image">

                    <!-- Мобильная картинка -->
                    <div class="hero-image-mob">
                        <a href="/audits/website-audit/sample/" aria-label="Preview audit report">
                            <img src="/img/website-audit-single-page.webp" alt="Web Audit preview" />
                        </a>
                    </div>

                    <!-- Десктопный мокап — весь кликабельный -->
                    <a href="/audits/website-audit/sample/"
                        class="scene hero-image-desktop"
                        aria-label="Preview audit report">

                        <div class="float-circle"></div>
                        <div class="float-square"></div>

                        <!-- BACK CARD -->
                        <div class="card card-back">
                            <div class="card-header">
                                <div class="ch-dot" style="background:#e03131"></div>
                                <span class="ch-title">SEO &amp; Indexation</span>
                                <span class="ch-badge badge-red">3 issues</span>
                            </div>
                            <div class="seo-header">
                                <div class="seo-header-title">Section 1 — Indexation Checks</div>
                                <div class="seo-header-sub">example.com · 42 pages crawled</div>
                            </div>
                            <div class="seo-item">
                                <div class="seo-icon si-r">✕</div>
                                <div>
                                    <div class="seo-name">Broken links — 5 found</div>
                                    <div class="seo-desc">404 errors on /articles — redirect or remove</div>
                                </div>
                            </div>
                            <div class="seo-item">
                                <div class="seo-icon si-r">✕</div>
                                <div>
                                    <div class="seo-name">Missing sitemap.xml</div>
                                    <div class="seo-desc">Crawlers can't index the site efficiently</div>
                                </div>
                            </div>
                            <div class="seo-item">
                                <div class="seo-icon si-o">!</div>
                                <div>
                                    <div class="seo-name">URL underscores detected</div>
                                    <div class="seo-desc">Use hyphens to improve keyword relevance</div>
                                </div>
                            </div>
                            <div class="seo-item">
                                <div class="seo-icon si-g">✓</div>
                                <div>
                                    <div class="seo-name">Meta titles — all present</div>
                                    <div class="seo-desc">All 42 pages have optimised title tags</div>
                                </div>
                            </div>
                            <div class="seo-item">
                                <div class="seo-icon si-g">✓</div>
                                <div>
                                    <div class="seo-name">Canonical tags — correct</div>
                                    <div class="seo-desc">No duplicate content issues detected</div>
                                </div>
                            </div>
                        </div>

                        <!-- FRONT CARD -->
                        <div class="card card-front">
                            <div class="card-header">
                                <div class="ch-dot" style="background:#1E88E5"></div>
                                <span class="ch-title">Overall Health Score</span>
                                <span class="ch-badge badge-blue">65 / 100</span>
                            </div>
                            <div class="score-section">
                                <div class="donut-wrap">
                                    <svg width="68" height="68" viewBox="0 0 68 68">
                                        <circle class="donut-bg" cx="34" cy="34" r="29" />
                                        <circle class="donut-fill" cx="34" cy="34" r="29" />
                                    </svg>
                                    <div class="donut-inner">
                                        <span class="donut-num">65%</span>
                                        <span class="donut-sub">Score</span>
                                    </div>
                                </div>
                                <div class="score-bars">
                                    <div class="sbar-row"><span class="sbar-name">SEO</span>
                                        <div class="sbar-track">
                                            <div class="sbar-fill fb" style="width:68%"></div>
                                        </div><span class="sbar-val">68</span>
                                    </div>
                                    <div class="sbar-row"><span class="sbar-name">Technical</span>
                                        <div class="sbar-track">
                                            <div class="sbar-fill ft" style="width:62%"></div>
                                        </div><span class="sbar-val">62</span>
                                    </div>
                                    <div class="sbar-row"><span class="sbar-name">Legal &amp; GDPR</span>
                                        <div class="sbar-track">
                                            <div class="sbar-fill fo" style="width:40%"></div>
                                        </div><span class="sbar-val">40</span>
                                    </div>
                                    <div class="sbar-row"><span class="sbar-name">UX</span>
                                        <div class="sbar-track">
                                            <div class="sbar-fill fr" style="width:38%"></div>
                                        </div><span class="sbar-val">38</span>
                                    </div>
                                    <div class="sbar-row"><span class="sbar-name">Performance</span>
                                        <div class="sbar-track">
                                            <div class="sbar-fill fo" style="width:60%"></div>
                                        </div><span class="sbar-val">60</span>
                                    </div>
                                </div>
                            </div>
                            <div class="issues-head">
                                <span class="issues-head-title">Critical Issues</span>
                                <span class="issues-count">7 issues</span>
                            </div>
                            <div class="issue-item">
                                <div class="ii-dot ii-dr"></div>
                                <div class="ii-text">
                                    <div class="ii-name">Pricing page hidden behind login</div>
                                    <div class="ii-desc">30-40% estimated conversion loss</div>
                                </div>
                                <span class="ii-chip ic-r">Critical</span>
                            </div>
                            <div class="issue-item">
                                <div class="ii-dot ii-dr"></div>
                                <div class="ii-text">
                                    <div class="ii-name">No Cookie Consent (GDPR)</div>
                                    <div class="ii-desc">Legal violation, potential fines</div>
                                </div>
                                <span class="ii-chip ic-r">Critical</span>
                            </div>
                            <div class="issue-item">
                                <div class="ii-dot ii-do"></div>
                                <div class="ii-text">
                                    <div class="ii-name">Images hosted without CDN</div>
                                    <div class="ii-desc">Slow loading speeds, high bounce</div>
                                </div>
                                <span class="ii-chip ic-o">High</span>
                            </div>
                            <div class="issue-item">
                                <div class="ii-dot ii-dy"></div>
                                <div class="ii-text">
                                    <div class="ii-name">Inconsistent H1 hierarchy</div>
                                    <div class="ii-desc">Confuses search engine crawlers</div>
                                </div>
                                <span class="ii-chip ic-y">Medium</span>
                            </div>
                        </div>

                        <!-- Pill внутри ссылки — просто визуальный элемент, не ссылка -->
                        <div class="sample-pill">
                            <span class="pill-dot"></span>
                            <span>Preview Report</span>
                        </div>

                    </a><!-- /scene -->

                </div><!-- /hero-image -->

            </div>
        </section>*/

/* =====================
   HERO MOCKUP SCENE
   hero-mockup.css
   ===================== */

/* Враппер */
.hero-image {
    flex: 1 1 50%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    max-width: 100%;
    text-align: center;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

/* Главная: управление видимостью */
.hero-image-home.hero-image-mob {
    display: none;
}

.hero-image-home.hero-image-desktop {
    display: block;
}

.hero-image-home .hero-image-mob {
    display: none;
}

.hero-image-home .hero-image-desktop {
    display: block;
}

/* Старое изображение на главной */
.hero-image p {
    font-size: 16px;
    padding: 0;
    margin: 0;
}

.hero-image img {
    max-width: 65%;
    height: auto;
    padding-top: 10px;
}

/* Floating elements (главная) */
.floating-badge,
.floating-chart,
.floating-circle,
.floating-square {
    position: absolute;
    will-change: transform;
}

.floating-badge {
    top: 32%;
    left: 5%;
    transform: rotate(-4deg);
    display: flex;
    flex-direction: row;
    background: #ffffff;
    border-radius: 8px;
    padding: 10px 15px 7px 0;
    z-index: 10;
    border: 1px solid #d9e8f5;
}

.floating-circle {
    top: 12%;
    left: 75%;
    animation: gentle-sway 2s ease-in-out infinite alternate;
    animation-delay: 2s;
    background-color: #d1e2fb;
    padding: 38px;
    border-radius: 60%;
}

.floating-square {
    top: 25%;
    left: 7%;
    animation: gentle-sway 4s ease-in-out infinite alternate;
    animation-delay: 1s;
    background-color: #70f19f;
    padding: 45px;
    border-radius: 12%;
}

.floating-chart {
    bottom: -2%;
    right: 20%;
    transform: rotate(8deg);
    background: #ffffff;
    border-radius: 8px;
    padding: 8px;
    border: 1px solid #c8f2d7;
}

/* =====================
   SCENE (страница аудита)
   ===================== */

.scene {
    position: relative;
    width: 420px;
    height: 420px;
    flex-shrink: 0;
}

.float-circle {
    position: absolute;
    top: 6%;
    right: 0%;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background-color: #d1e2fb;
    animation: gentle-sway 3s ease-in-out infinite alternate;
    z-index: 0;
    pointer-events: none;
}

.float-square {
    position: absolute;
    bottom: 16%;
    left: -2%;
    width: 44px;
    height: 44px;
    border-radius: 12%;
    background-color: #70f19f;
    animation: gentle-sway 4s ease-in-out infinite alternate;
    animation-delay: 1s;
    z-index: 0;
    pointer-events: none;
}

/* Карточки */
.card {
    position: absolute;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .06), 0 12px 40px rgba(0, 0, 0, .10);
    overflow: hidden;
    transition: transform .4s cubic-bezier(.16, 1, .3, 1), box-shadow .4s cubic-bezier(.16, 1, .3, 1);
}

.card-back {
    width: 300px;
    height: 330px;
    top: 44px;
    left: 0;
    transform: rotate(-5.5deg) translateY(10px);
    z-index: 1;
    opacity: .92;
}

.card-front {
    width: 315px;
    height: 360px;
    top: 0;
    right: 0;
    z-index: 3;
}

.scene:hover .card-back {
    transform: rotate(-7.5deg) translateY(16px);
}

.scene:hover .card-front {
    transform: translateY(-7px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, .08), 0 24px 60px rgba(0, 0, 0, .14);
}

/* Card header */
.card-header {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 11px 14px 10px;
    border-bottom: 1px solid #f0f1f3;
    background: #fdfdfd;
}

.ch-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
}

.ch-title {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #999;
}

.ch-badge {
    margin-left: auto;
    font-size: 9.5px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 99px;
}

.badge-blue {
    background: #e8f2fe;
    color: #1a56db;
}

.badge-red {
    background: #fff0f0;
    color: #c92a2a;
}

/* Score section */
.score-section {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 13px 14px;
    background: linear-gradient(135deg, #f4f8ff 0%, #f0f5fc 100%);
    border-bottom: 1px solid #edf0f5;
}

.donut-wrap {
    position: relative;
    width: 68px;
    height: 68px;
    flex-shrink: 0;
}

.donut-wrap svg {
    transform: rotate(-90deg);
}

.donut-bg {
    fill: none;
    stroke: #e4eaf3;
    stroke-width: 6.5;
}

.donut-fill {
    fill: none;
    stroke: #1E88E5;
    stroke-width: 6.5;
    stroke-linecap: round;
    stroke-dasharray: 182;
    stroke-dashoffset: 64;
}

.donut-inner {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.donut-num {
    font-size: 18px;
    font-weight: 800;
    color: #111;
    line-height: 1;
}

.donut-sub {
    font-size: 8px;
    color: #bbb;
    letter-spacing: .03em;
    margin-top: 1px;
}

.score-bars {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.sbar-row {
    display: flex;
    align-items: center;
    gap: 5px;
}

.sbar-name {
    font-size: 8.5px;
    color: #888;
    width: 76px;
    flex-shrink: 0;
}

.sbar-track {
    flex: 1;
    height: 4px;
    background: #e4eaf3;
    border-radius: 2px;
    overflow: hidden;
}

.sbar-fill {
    height: 100%;
    border-radius: 2px;
}

.fb {
    background: #1E88E5;
}

.ft {
    background: #0ca678;
}

.fo {
    background: #e8590c;
}

.fr {
    background: #e03131;
}

.sbar-val {
    font-size: 8.5px;
    color: #bbb;
    width: 20px;
    text-align: right;
    font-weight: 600;
}

/* Issues */
.issues-head {
    padding: 10px 14px 6px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.issues-head-title {
    font-size: 10px;
    font-weight: 700;
    color: #111;
}

.issues-count {
    font-size: 9px;
    background: #fff0f0;
    color: #c92a2a;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 99px;
}

.issue-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-top: 1px solid #f5f5f6;
}

.ii-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

.ii-dr {
    background: #e03131;
}

.ii-do {
    background: #e8590c;
}

.ii-dy {
    background: #e0a800;
}

.ii-text {
    flex: 1;
}

.ii-name {
    font-size: 10.5px;
    font-weight: 600;
    color: #222;
}

.ii-desc {
    font-size: 9px;
    color: #bbb;
    margin-top: 1px;
}

.ii-chip {
    font-size: 8.5px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    white-space: nowrap;
}

.ic-r {
    background: #fef2f2;
    color: #c92a2a;
}

.ic-o {
    background: #fff7ed;
    color: #c05700;
}

.ic-y {
    background: #fefce8;
    color: #8a6900;
}

/* SEO card */
.seo-header {
    padding: 10px 14px 8px;
}

.seo-header-title {
    font-size: 11px;
    font-weight: 700;
    color: #111;
}

.seo-header-sub {
    font-size: 9.5px;
    color: #aaa;
    margin-top: 1px;
}

.seo-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 7px 14px;
    border-top: 1px solid #f5f5f6;
}

.seo-icon {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 10px;
    font-weight: 800;
}

.si-r {
    background: #fef2f2;
    color: #c92a2a;
}

.si-o {
    background: #fff7ed;
    color: #c05700;
}

.si-g {
    background: #f0fdf4;
    color: #0ca678;
}

.seo-name {
    font-size: 10.5px;
    font-weight: 600;
    color: #222;
}

.seo-desc {
    font-size: 9px;
    color: #aaa;
    margin-top: 1px;
}

/* =====================
   SAMPLE PILL
   ===================== */
.sample-pill {
    font-family: 'Plus Jakarta Sans', 'Segoe UI', sans-serif;
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: #1E88E5;
    color: #fff !important;
    font-size: 16px;
    font-weight: 500;
    padding: 7px 16px;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(30, 136, 229, .3);
    white-space: nowrap;
    z-index: 10;
    text-decoration: none;
    transition: background 0.18s ease, box-shadow 0.18s ease;
}

.sample-pill:hover {
    background: #1976d2;
    box-shadow: 0 4px 14px rgba(30, 136, 229, .45);
    color: #fff !important;
}

.pill-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #fff;
    opacity: .9;
    flex-shrink: 0;
    animation: pill-pulse 2s infinite;
}

/* =====================
   АНИМАЦИИ
   ===================== */
@keyframes gentle-sway {
    0% {
        transform: translate(0, 0) rotate(-10deg);
    }

    100% {
        transform: translate(8px, -6px) rotate(3deg);
    }
}

@keyframes pill-pulse {

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

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

/* =====================
   RESPONSIVE
   ===================== */
@media (max-width: 1024px) {
    .hero-image {
        margin-top: 16px;
        justify-content: center;
    }

    .hero-image-home .hero-image-mob {
        display: block;
    }

    .hero-image-home .hero-image-desktop {
        display: none;
    }


    .hero-image img {
        max-width: 85%;
    }

    .hero-image-home.hero-image-mob {
        display: block;
    }

    .hero-image-home.hero-image-desktop {
        display: none;
    }

    .scene {
        width: 100%;
        max-width: 400px;
        height: 400px;
    }

    .card-back {
        width: 260px;
        height: 290px;
        top: 40px;
        left: 0;
    }

    .card-front {
        width: 270px;
        height: 320px;
        top: 0;
        right: 0;
    }

    .sample-pill {
        font-size: 13px;
        padding: 6px 14px;
    }
}