/* =========================================================
   HERO
   ========================================================= */
:root {
    --hero-top-offset: 90px;
    --hero-min-h: 100vh;
    --hero-content-max: 900px;
    --hero-content-max-xl: 980px;
    --hero-content-max-with-sites: 760px;
    --hero-content-max-with-sites-xl: 820px;

    --hero-bg-radial-left: rgba(52, 146, 214, 0.18);
    --hero-bg-radial-right: rgba(28, 92, 158, 0.14);

    --hero-badge-font-size: 14px;
    --hero-badge-font-size-mobile: 13px;
    --hero-badge-padding-y: 9px;
    --hero-badge-padding-x: 14px;
    --hero-badge-bg: rgba(255, 255, 255, 0.78);
    --hero-badge-border: rgba(11, 18, 32, 0.09);
    --hero-badge-accent: #1866a5;
    --hero-badge-shadow: 0 8px 22px rgba(11, 18, 32, 0.04);

    --hero-h1-size: clamp(48px, 4.3vw, 72px);
    --hero-h1-size-with-sites: clamp(40px, 3.4vw, 58px);
    --hero-h1-size-mobile: clamp(34px, 9vw, 48px);

    --hero-h1-line: 1;
    --hero-h1-line-mobile: 1.04;

    --hero-h1-max: 23ch;
    --hero-h1-max-with-sites: 14ch;

    --hero-lead-size: clamp(17px, 1.05vw, 19px);
    --hero-lead-size-mobile: 15.5px;
    --hero-lead-line: 1.58;
    --hero-lead-line-mobile: 1.65;
    --hero-lead-max: 58ch;
    --hero-lead-max-mobile: 46ch;

    --hero-cta-gap: 14px;
    --hero-cta-gap-mobile: 12px;

    --hero-sites-column-width: clamp(280px, 18vw, 330px);
    --hero-sites-left-offset: max(110px, calc(50% - 870px));
    --hero-sites-right-offset: max(110px, calc(50% - 870px));
    --hero-sites-top: 50%;
    --hero-sites-gap: 22px;
    --hero-sites-hover-shift: 22px;
    --hero-sites-transition: .65s cubic-bezier(.22, 1, .36, 1);

    --hero-site-radius: 12px;
    --hero-site-border: rgba(11, 18, 32, 0.08);
    --hero-site-bg: rgba(255, 255, 255, 0.78);
    --hero-site-shadow:
        0 22px 48px rgba(11, 18, 32, 0.10),
        0 6px 18px rgba(11, 18, 32, 0.05);
    --hero-site-shadow-hover:
        0 26px 56px rgba(11, 18, 32, 0.14),
        0 8px 22px rgba(11, 18, 32, 0.06);

    --hero-site-size-min: 260px;
    --hero-site-size-fluid: 16vw;
    --hero-site-size-max: 320px;
    --hero-site-size: clamp(var(--hero-site-size-min), var(--hero-site-size-fluid), var(--hero-site-size-max));

    --hero-site-left-1: var(--hero-site-size);
    --hero-site-left-2: var(--hero-site-size);
    --hero-site-left-3: var(--hero-site-size);

    --hero-site-right-1: var(--hero-site-size);
    --hero-site-right-2: var(--hero-site-size);
    --hero-site-right-3: var(--hero-site-size);

    --hero-ui-transition: .3s ease;

    --audit-shell-bg: rgba(255, 255, 255, 0.94);
    --audit-border: rgba(52, 146, 214, 0.18);
    --audit-shadow:
        0 20px 48px rgba(11, 18, 32, 0.08),
        0 8px 22px rgba(11, 18, 32, 0.05);
    --audit-gradient:
        linear-gradient(
            90deg,
            rgba(52, 146, 214, 0.95) 0%,
            rgb(165, 210, 241) 50%,
            rgba(19, 70, 146, 0.92) 100%
        );
    --audit-hover-transform: translateY(-6px) scale(1.01);
    --audit-hover-shadow:
        0 24px 56px rgba(11, 18, 32, 0.12),
        0 10px 28px rgba(11, 18, 32, 0.08);
}

.hero {
    position: relative;
    z-index: 1;
    --hero-sites-shift: 0px;
}

.hero--light {
    background:
        radial-gradient(900px 420px at 14% 10%, var(--hero-bg-radial-left), transparent 60%),
        radial-gradient(800px 380px at 86% 18%, var(--hero-bg-radial-right), transparent 55%),
        linear-gradient(180deg, #ffffff, var(--bg));
}

.hero--fade {
    position: relative;
    min-height: var(--hero-min-h);
    margin-top: calc(var(--hero-top-offset) * -1);
    padding-top: var(--hero-top-offset);
}

.hero__grid {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: clamp(18px, 2.4vw, 34px);
    align-items: start;
}

.hero__sticky {
    position: relative;
    min-height: calc(100svh - var(--header-h));
    display: block;
    padding-bottom: var(--s6);
    overflow: hidden;
}

.hero__content {
    position: relative;
    z-index: 3;
    max-width: var(--hero-content-max);
    height: calc(100vh - var(--hero-top-offset) * 2);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.text-accent {
    color: var(--brand2);
}

.hero__trust-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.32em;
    width: max-content;
    max-width: 100%;
    margin: 0 auto;
    padding: var(--hero-badge-padding-y) var(--hero-badge-padding-x);
    border: 2px solid var(--hero-badge-border);
    border-radius: 10px;
    background: var(--hero-badge-bg);
    box-shadow: var(--hero-badge-shadow);
    color: rgba(11, 18, 32, 0.78);
    font-size: calc(var(--hero-badge-font-size) * 1.3);
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: 1.15;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.hero__trust-badge-accent {
    color: var(--hero-badge-accent);
    font-weight: 800;
}

.hero--center .h1,
.hero--center .h-hero {
    max-width: var(--hero-h1-max);
    margin-left: auto;
    margin-right: auto;
    font-size: var(--hero-h1-size);
    line-height: var(--hero-h1-line);
    letter-spacing: -0.045em;
    font-weight: 800;
    text-wrap: balance;
}

.lead {
    max-width: var(--hero-lead-max);
    /* max-width: calc(var(--hero-lead-max)*1.5); */
    margin-left: auto;
    margin-right: auto;
    font-size: var(--hero-lead-size);
    line-height: var(--hero-lead-line);
    color: rgba(11, 18, 32, 0.58);
    text-wrap: pretty;
}

.eyebrow,
.hero__badge,
.hero__bullets,
.hero__social-proof {
    display: none;
}

.cta-row {
    width: 100%;
    display: grid;
    gap: var(--hero-cta-gap-mobile);
    justify-items: stretch;
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    border: 1px solid transparent;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 900;
    letter-spacing: -0.01em;
    transition:
        transform var(--hero-ui-transition),
        box-shadow var(--hero-ui-transition),
        border-color var(--hero-ui-transition),
        background var(--hero-ui-transition);
}

.btn:hover {
    transform: translateY(-1px);
}

.cta-row .btn {
    justify-content: center;
    min-height: 44px;
}

.btn-primary {
    color: #fff;
    background: linear-gradient(135deg, var(--brand2), var(--brand));
    box-shadow: 0 16px 34px rgba(28, 92, 158, 0.26);
}

.btn-primary:hover {
    box-shadow: 0 18px 44px rgba(28, 92, 158, 0.30);
}

.btn-ghost {
    color: rgba(11, 18, 32, 0.92);
    background: rgba(255, 255, 255, 0.92);
    border-color: rgba(11, 18, 32, 0.14);
}

.btn-ghost:hover {
    border-color: rgba(52, 146, 214, 0.30);
    box-shadow: 0 14px 34px rgba(11, 18, 32, 0.10);
}

.left_images_sites,
.right_images_sites {
    position: absolute;
    top: var(--hero-sites-top);
    z-index: 1;
    width: var(--hero-sites-column-width);
    pointer-events: none;
    transition:
        transform var(--hero-sites-transition),
        opacity .45s ease;
}

.left_images_sites {
    left: var(--hero-sites-left-offset);
    transform: translate3d(var(--hero-sites-shift), -50%, 0);
}

.right_images_sites {
    right: var(--hero-sites-right-offset);
    transform: translate3d(calc(var(--hero-sites-shift) * -1), -50%, 0);
}

.content_images_sites {
    display: flex;
    flex-direction: column;
    gap: var(--hero-sites-gap);
}

.content_left_images_sites {
    align-items: flex-start;
}

.content_right_images_sites {
    align-items: flex-end;
}

.hero-site-card {
    display: block;
    overflow: hidden;
    border: 1px solid var(--hero-site-border);
    border-radius: var(--hero-site-radius);
    background: var(--hero-site-bg);
    box-shadow: var(--hero-site-shadow);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition:
        transform var(--hero-sites-transition),
        box-shadow .45s ease;
}

.hero-site-card img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    user-select: none;
}

.content_left_images_sites .hero-site-card:nth-child(1) {
    width: var(--hero-site-left-1);
    transform: translateX(8px) rotate(-2deg);
}

.content_left_images_sites .hero-site-card:nth-child(2) {
    width: var(--hero-site-left-2);
    transform: translateX(-6px) rotate(.8deg);
}

.content_left_images_sites .hero-site-card:nth-child(3) {
    width: var(--hero-site-left-3);
    transform: translateX(14px) rotate(-1.4deg);
}

.content_right_images_sites .hero-site-card:nth-child(1) {
    width: var(--hero-site-right-1);
    transform: translateX(-8px) rotate(2deg);
}

.content_right_images_sites .hero-site-card:nth-child(2) {
    width: var(--hero-site-right-2);
    transform: translateX(6px) rotate(-.8deg);
}

.content_right_images_sites .hero-site-card:nth-child(3) {
    width: var(--hero-site-right-3);
    transform: translateX(-14px) rotate(1.4deg);
}

.hero:hover,
.hero:focus-within {
    --hero-sites-shift: var(--hero-sites-hover-shift);
}

.hero:hover .hero-site-card,
.hero:focus-within .hero-site-card {
    box-shadow: var(--hero-site-shadow-hover);
}

.hero:hover .content_left_images_sites .hero-site-card:nth-child(1),
.hero:focus-within .content_left_images_sites .hero-site-card:nth-child(1) {
    transform: translateX(12px) rotate(-2deg);
}

.hero:hover .content_left_images_sites .hero-site-card:nth-child(2),
.hero:focus-within .content_left_images_sites .hero-site-card:nth-child(2) {
    transform: translateX(-2px) rotate(.8deg);
}

.hero:hover .content_left_images_sites .hero-site-card:nth-child(3),
.hero:focus-within .content_left_images_sites .hero-site-card:nth-child(3) {
    transform: translateX(18px) rotate(-1.4deg);
}

.hero:hover .content_right_images_sites .hero-site-card:nth-child(1),
.hero:focus-within .content_right_images_sites .hero-site-card:nth-child(1) {
    transform: translateX(-12px) rotate(2deg);
}

.hero:hover .content_right_images_sites .hero-site-card:nth-child(2),
.hero:focus-within .content_right_images_sites .hero-site-card:nth-child(2) {
    transform: translateX(2px) rotate(-.8deg);
}

.hero:hover .content_right_images_sites .hero-site-card:nth-child(3),
.hero:focus-within .content_right_images_sites .hero-site-card:nth-child(3) {
    transform: translateX(-18px) rotate(1.4deg);
}

.hero--fade .hero__sticky {
    position: relative !important;
    top: auto !important;
    min-height: calc(100vh - var(--hero-top-offset));
    display: grid;
    align-items: center;
}

.hero--fade .hero__content {
    will-change: opacity, transform, filter;
    transform: translateY(0);
    opacity: 1;
    filter: blur(0);
    transition:
        opacity 0.08s linear,
        transform 0.08s linear,
        filter 0.08s linear;
}

.hero--fade .hero__panel {
    will-change: opacity, transform, filter;
}

.section--after-hero {
    margin-top: 0 !important;
    position: relative;
    z-index: 2;
    will-change: margin-top;
    transform: none !important;
}

.coherence-flow__wire {
    margin-top: -33px;
}

/* =========================================================
   SITE AUDIT BANNER
   ========================================================= */
.site-audit-banner {
    width: 100%;
    max-width: 920px;
    margin: 0 auto;
    padding: 0 28px;
    position: relative;
    z-index: 3;
}

.site-audit-banner__form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

.site-audit-banner__intro {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: center;
    text-align: center;
}

.site-audit-banner__heading {
    margin: 0;
    max-width: 20ch;
    color: var(--text);
    font-size: clamp(28px, 7vw, 46px);
    line-height: 0.98;
    letter-spacing: -0.045em;
    font-weight: 900;
    text-wrap: balance;
}

.site-audit-banner__hint {
    margin: 0 auto;
    color: rgba(11, 18, 32, 0.56);
    font-size: 14px;
    line-height: 1.45;
    text-align: right;
    width: 100% !important;
}

.site-audit-banner__shell,
.site-audit-banner__hint,
.site-audit-banner__submit-icon {
    transition:
        transform .28s cubic-bezier(.22, 1, .36, 1),
        box-shadow .28s cubic-bezier(.22, 1, .36, 1),
        filter .28s ease,
        color .2s ease,
        opacity .28s ease;
}

.site-audit-banner__shell {
    position: relative;
    width: 100%;
    padding: 4px;
    border-radius: 18px;
    background: var(--audit-gradient);
    box-shadow: var(--audit-shadow);
    margin: 10px 0 0 0;
}

.site-audit-banner__field {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 66px;
    width: 100%;
    padding: 0 8px 0 16px;
    background: #fff;
    border: 1px solid #dbe8f3;
    border-radius: 14px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.site-audit-banner__icon {
    flex: 0 0 auto;
    font-size: 20px;
    color: #3492d6;
    opacity: 0.95;
}

.site-audit-banner__field input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: #0b132b;
    font-size: 17px;
    font-weight: 500;
    letter-spacing: -0.015em;
}

.site-audit-banner__field input::placeholder {
    color: #8a97a8;
}

.site-audit-banner__field:focus-within {
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.5),
        0 0 0 6px rgba(52, 146, 214, 0.10);
}

.site-audit-banner__submit {
    flex: 0 0 auto;
    min-height: 46px;
    padding: 0 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 0;
    border-radius: 10px;
    background: linear-gradient(90deg, #1a5fcd 0%, #1775b0 100%);
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    box-shadow:
        0 10px 22px rgba(92, 96, 255, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.22);
    transition:
        transform .18s ease,
        box-shadow .18s ease,
        filter .18s ease;
}

.site-audit-banner__submit:active {
    transform: translateY(0);
}

.site-audit-banner__submit[disabled] {
    opacity: 0.75;
    pointer-events: none;
}

.site-audit-banner__submit-label {
    display: inline-block;
    line-height: 1;
    white-space: nowrap;
}

.site-audit-banner__submit-icon {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    transform-origin: center;
    will-change: transform;
}

.site-audit-banner__submit-icon svg {
    width: 100% !important;
    height: 100% !important;
    display: block;
}

.site-audit-banner__form:is(:hover, :focus-within) .site-audit-banner__shell,
.site-audit-banner__form:is(:hover, :focus-within) .site-audit-banner__hint,
.site-audit-banner__form:is(:hover, :focus-within) .site-audit-banner__submit-icon {
    transform: var(--audit-hover-transform);
    filter: saturate(1.04);
}

.site-audit-banner__form:is(:hover, :focus-within) .site-audit-banner__shell {
    box-shadow: var(--audit-hover-shadow);
}

@media (min-width: 900px) {
    .hero__sticky {
        display: grid;
        align-items: center;
        min-height: calc(100vh - var(--header-h));
    }

    .hero__content {
        justify-content: center;
    }

    .cta-row {
        width: auto;
        display: flex;
        justify-content: center;
        gap: var(--hero-cta-gap);
    }
}

@media (min-width: 1280px) and (max-width: 1499px) {
    .hero__content {
        max-width: var(--hero-content-max-with-sites);
    }

    .hero--center .h1,
    .hero--center .h-hero {
        max-width: var(--hero-h1-max-with-sites);
        font-size: var(--hero-h1-size-with-sites);
        line-height: 1.02;
    }

    .lead {
        max-width: 50ch;
    }
}

@media (min-width: 1500px) {
    .hero__content {
        max-width: var(--hero-content-max-with-sites-xl);
    }
}

@media (max-width: 1279px) {
    .left_images_sites,
    .right_images_sites {
        display: none !important;
    }

    .hero__content {
        max-width: 1080px;
    }
}

@media (max-width: 980px) {
    .hero__grid {
        grid-template-columns: 1fr;
    }

    .hero__panel {
        display: none;
    }

    .grid-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .grid-3 {
        grid-template-columns: 1fr;
    }

    .hero__value-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .hero__stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 899px) {
    .hero__sticky {
        padding-top: calc(var(--header-h) - var(--s7) - var(--s5)) !important;
        padding-bottom: var(--s4) !important;
    }

    .hero__content {
        height: auto !important;
        padding-left: clamp(16px, 4.8vw, 22px) !important;
        padding-right: clamp(16px, 4.8vw, 22px) !important;
    }

    .cta-row {
        width: 100%;
    }
}

@media (max-width: 768px) {
    .site-audit-banner {
        padding: 0;
    }
}

@media (max-width: 640px) {
    .section {
        padding: 28px 0 !important;
    }

    .section--tight {
        padding: 22px 0 !important;
    }

    .hero__sticky {
        min-height: auto !important;
        padding-top: calc(var(--s6) + env(safe-area-inset-top)) !important;
        padding-bottom: var(--s6) !important;
    }

    .hero__content {
        max-width: 560px;
        height: auto !important;
        margin: 0 auto;
        justify-content: flex-start !important;
        text-align: center;
        padding-left: clamp(18px, 5vw, 24px) !important;
        padding-right: clamp(18px, 5vw, 24px) !important;
    }

    .hero__trust-badge {
        max-width: 100%;
        padding: 10px 14px;
        font-size: var(--hero-badge-font-size-mobile);
        line-height: 1.2;
    }

    .hero--center .h1,
    .hero--center .h-hero {
        max-width: 12ch !important;
        margin-top: var(--s4) !important;
        font-size: clamp(42px, 12vw, 58px) !important;
        line-height: 0.95 !important;
        letter-spacing: -0.06em !important;
    }

    .lead {
        max-width: calc(var(--hero-lead-max)*.7);
        margin-top: var(--s4) !important;
        font-size: 15px !important;
        line-height: 1.6 !important;
    }

    .cta-row {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        justify-items: stretch;
        margin-top: var(--s6) !important;
    }

    .cta-row .btn {
        width: 100% !important;
        max-width: 100% !important;
        min-height: 54px;
        margin: 0 auto !important;
        justify-content: center !important;
        border-radius: 16px;
        white-space: nowrap;
    }

    .hero .cta-row .btn {
        gap: 8px !important;
        padding: 14px 14px !important;
        font-size: 14px !important;
    }

    .hero .cta-row .btn .material-symbols-outlined,
    .cta-row .btn .material-symbols-outlined {
        font-size: 18px;
    }

    .site-audit-banner {
        margin-top: 8px;
    }

    .site-audit-banner__form {
        gap: 12px;
    }

    .site-audit-banner__heading {
        max-width: 20ch;
        font-size: clamp(26px, 8vw, 34px);
        line-height: 1;
    }

    .site-audit-banner__hint {
        font-size: 13px;
        /* max-width: 26ch; */
        margin: -5px 0 15px 0;
        padding-right: 5px;
    }

    .site-audit-banner__field {
        min-height: 64px;
        padding: 0 6px 0 14px;
        gap: 8px;
        border-radius: 16px;
    }

    .site-audit-banner__field input {
        font-size: 15px;
    }

    .site-audit-banner__submit {
        min-height: 42px;
        padding: 0 12px;
        border-radius: 10px;
        font-size: 13px;
    }

    .stat--hide-mobile {
        display: none;
    }

    .hero__value-cards,
    .hero__stats {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 420px) {
    .hero__content {
        padding-left: 18px !important;
        padding-right: 18px !important;
    }
}

@media (max-width: 380px) {
    .hero--center .h1,
    .hero--center .h-hero {
        font-size: clamp(36px, 11vw, 46px) !important;
    }

    .hero .cta-row .btn {
        padding: 12px 10px !important;
        font-size: 13px !important;
    }

    .site-audit-banner__submit {
        font-size: 12px;
    }
}

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

    .btn,
    .hero--fade .hero__content,
    .left_images_sites,
    .right_images_sites,
    .hero-site-card,
    .site-audit-banner__shell,
    .site-audit-banner__hint,
    .site-audit-banner__submit-icon {
        transition: none !important;
    }
}