.hero-logo {
    position: absolute;
    top: 30px;
    left: 40px;
    width: 120px;
    z-index: 10;
    opacity: 0.95;
    transition: 0.2s ease;
}
.form__policy {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 18px;
    border: 1px solid rgba(17, 24, 39, 0.10);
    border-radius: 18px;
    background: #f8faff;
}

.checkbox__input.agree {
    width: 20px;
    height: 20px;
    min-width: 20px;
    margin: 2px 0 0;
    accent-color: #1A62E4;
    cursor: pointer;
}

.checkbox__label.agree_label {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    color: rgba(17, 24, 39, 0.72);
    cursor: pointer;
}

.checkbox__label.agree_label a {
    color: #1A62E4;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.form__policy.is-invalid {
    border-color: #dc2626;
    box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.08);
}

@media (max-width: 900px) {
    .form__policy {
        padding: 14px;
        border-radius: 16px;
    }

    .checkbox__label.agree_label {
        font-size: 13px;
    }
}
@media (max-width: 900px) {
    .hero-logo {
        top: 20px;
        left: 20px;
        width: 90px;
    }
}
@media (max-width: 900px) {
    .auction-start-date-field {
        order: 7;
    }

    .auction-start-time-field {
        order: 8;
    }

    .auction-end-date-field {
        order: 9;
    }

    .auction-end-time-field {
        order: 10;
    }
    .auction-field-full{
        order: 11;
    }
    .auction-field-full{
        order: 11;
    }
}
.hero-logo-big {
    width: 510px;
    margin-bottom: 28px;
    display: block;
    filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.25));
}

@media (max-width: 900px) {
    .hero-logo-big {
        width: 310px;
        margin: 0 auto 20px;
    }

    .hero-note {
        padding-top: 25px
    }

    .pricing-kv {
        gap: 0 !important;
    }
}

.pricing-example {
    margin: 45px auto 0;
    max-width: 860px;
    background: #f6f8ff;
    border-radius: 20px;
    padding: 28px;
    /*
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
    */
}

.pricing-example h3 {
    text-align: center;
    margin-bottom: 18px;
}

.pricing-example-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 22px;
}

@media (max-width: 400px) {
    .pricing-example-grid {
        display: flex;
        gap: 14px 22px;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }

    .pricing-kv {
        min-width: -webkit-fill-available !important;
    }
}

.pricing-kv {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    background: #ffffff;
    border-radius: 14px;
    padding: 14px 16px;
    /*
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.05);
    */
}

.pricing-kv span {
    opacity: 0.8;
}

.pricing-note {
    margin: 16px 0 0;
    text-align: center;
    font-size: 14px;
    opacity: 0.8;
}

.hero-logo:hover {
    opacity: 1;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

html, body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

body {
    position: relative;
}

body {
    font-size: 17px;
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial;
    color: #222;
}

/* anchor offset because of fixed header */
#pricing, #why-artamon, #categories, #how-it-works, #screens, #success-stories, #private-control, #role-picker, #audience, #book-demo, #faq, #top {
    scroll-margin-top: 92px;
}

h1, h2, h3 {
    margin: 0 0 15px;
    font-weight: 700;
}

a {
    text-decoration: none;
}

.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.08);
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(10px);
    transition: background .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.site-header.scrolled {
    background: rgba(255, 255, 255, 0.92);
    border-bottom: 1px solid rgba(17, 24, 39, 0.08);
    box-shadow: 0 10px 30px rgba(17, 24, 39, 0.10);
}

.header-inner {
    display: grid;
    grid-template-columns: minmax(100px, 1fr) auto minmax(100px, 1fr);
    align-items: center;
    height: 72px;
    gap: 18px;
}
@media (max-width: 900px) {
    .header-inner {
        display: flex;
        justify-content: space-between;
    }
}
.brand-logo {
    width: 100px;
    height: 34px;
    display: block;
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.25));
}
.brand {
    display: inline-flex;
    align-items: center;
    justify-self: start;
    gap: 10px;
    color: #fff;
}
.logo_artamon_primary {
    display: none ;
}
.site-header.scrolled .logo_artamon_primary {
    display: block ;
}
.site-header.scrolled .logo_artamon_white {
    display: none ;
}



.site-header.scrolled .brand-logo {
    filter: none;
}

.brand-name {
    font-weight: 700;
    letter-spacing: -0.02em;
    font-size: 1.3rem;
}

.nav {
    display: flex;
    align-items: center;
    justify-content: center;
    justify-self: center;
    gap: 18px;
}

.nav a {
    font-weight: 600;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.92);
    padding: 10px 10px;
    border-radius: 10px;
    transition: background .2s ease, color .2s ease;
}

.site-header.scrolled .nav a {
    color: #1e5eff;
}

.nav a:hover {
    background: rgba(255, 255, 255, 0.14);
}

.site-header.scrolled .nav a:hover {
    background: rgba(17, 24, 39, 0.06);
}

.header-actions {
    display: flex;
    align-items: center;
    justify-self: end;
    gap: 14px;
}

@media (min-width: 901px) and (max-width: 1100px) {
    .header-inner {
        gap: 10px;
        grid-template-columns: minmax(100px, 1fr) auto minmax(170px, 1fr);
    }

    .nav {
        gap: 6px;
    }

    .nav a {
        padding: 10px 4px;
        font-size: 12.5px;
    }

    .header-actions {
        gap: 8px;
    }

    .header-actions .btn-cta {
        padding: 10px 11px;
        font-size: 13px;
    }
}

.header-link {
    font-size: 14px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    opacity: 0.95;
    padding: 10px 10px;
    border-radius: 10px;
    transition: background .2s ease;
}

.site-header.scrolled .header-link {
    color: rgba(17, 24, 39, 0.82);
}

.header-link:hover {
    background: rgba(255, 255, 255, 0.14);
}

.site-header.scrolled .header-link:hover {
    background: rgba(17, 24, 39, 0.06);
}

/* grouped links */
.header-links-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Main CTA button in header */
.btn-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 16px;
    border-radius: 999px;
    font-weight: 800;
    font-size: 14px;
    color: #1A62E4;
    background: #ffffff;
    /*
    box-shadow: 0 10px 25px rgba(255, 255, 255, 0.22);
    */
    transition: transform .2s ease, box-shadow .2s ease;
    white-space: nowrap;
}

.site-header.scrolled .btn-cta {
    background: #1A62E4;
    color: #fff;
    /*
    box-shadow: 0 14px 30px rgba(26, 98, 228, 0.28);
    */
}

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

/* Hamburger */
.burger {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.08);
    display: none;
    align-items: center;
    justify-content: center;
    gap: 5px;
    flex-direction: column;
    cursor: pointer;
}

.site-header.scrolled .burger {
    border: 1px solid rgba(17, 24, 39, 0.10);
    background: rgba(17, 24, 39, 0.04);
}

.burger span {
    width: 18px;
    height: 2px;
    background: rgba(255, 255, 255, 0.92);
    border-radius: 2px;
    transition: transform .2s ease, opacity .2s ease;
}

.site-header.scrolled .burger span {
    background: rgba(17, 24, 39, 0.86);
}

.burger.open span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.burger.open span:nth-child(2) {
    opacity: 0;
}

.burger.open span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* Mobile menu panel */
.mobile-menu {
    display: none;
    background: rgba(255, 255, 255, 0.96);
    border-bottom: 1px solid rgba(17, 24, 39, 0.10);
    /*
    box-shadow: 0 18px 40px rgba(17, 24, 39, 0.10);
    */
}

.mobile-menu.open {
    display: block;
}

.mobile-menu-inner {
    padding: 16px 0 20px;
    display: grid;
    gap: 10px;
}

.m-link {
    padding: 12px 12px;
    border-radius: 12px;
    font-weight: 700;
    color: rgba(17, 24, 39, 0.86);
    background: rgba(17, 24, 39, 0.03);
}

.m-link:hover {
    background: rgba(17, 24, 39, 0.06);
}

.m-divider {
    height: 1px;
    background: rgba(17, 24, 39, 0.10);
    margin: 6px 0;
}

.m-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 16px;
    border-radius: 999px;
    font-weight: 800;
    color: #fff;
    background: #1A62E4;
}

/* prevent background scroll when menu open */
body.menu-open {
    overflow: hidden;
}

/* =========================
   HERO
========================= */
.hero {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 110px 0 80px;
    background: #1A62E4;
    min-height: 100vh;
    color: #fff;
}

.hero-right {
    flex: 1;
    max-width: 600px;
    padding: 40px;
    text-align: center;
}

.hero-left {
    position: relative;
    perspective: 800px;
}

.hero-mockup {
    width: 100%;
    border-radius: 20px;
    /*
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25);
    */
    transform: translateZ(0);
    transition: transform 0.15s ease-out;
}

.hero-title {
    font-size: 52px;
    margin-bottom: 20px;
}

.hero-sub {
    font-size: 18px;
    opacity: 0.9;
    margin-bottom: 22px;
    max-width: 520px;
    line-height: 1.5;
}


.hero-cta-panel {
    margin-top: 34px;
    padding: 16px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.95);
    /*
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.18);
    */
    max-width: 520px;
}

.hero-cta-row-centered {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: space-around;
}

.hero-btn-blue {
    background: #1A62E4;
    color: #ffffff;
    /*
    box-shadow: 0 14px 30px rgba(26, 98, 228, 0.30);
    */
}

.hero-btn-outline-blue {
    background: #ffffff;
    color: #1A62E4;
    border: 2px solid #1A62E4;
    box-shadow: none;
}

.hero-btn-outline-blue:hover {
    background: rgba(26, 98, 228, 0.08);
}

.hero-btn {
    display: inline-block;
    padding: 16px 38px;
    background: #ffffff;
    color: #1A62E4;
    border-radius: 50px;
    font-weight: 800;
    /*
    box-shadow: 0 10px 25px rgba(255, 255, 255, 0.25);
    */
    transition: 0.2s ease;
}

.hero-btn:hover {
    transform: translateY(-3px);
    /*
    box-shadow: 0 14px 30px rgba(255, 255, 255, 0.35);
    */
}

/* CTA strength */
.hero-btn-strong {
    background: #ffffff;
    color: #1A62E4;
}

.hero-btn-ghost {
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.22);
    box-shadow: none;
}

.hero-btn-ghost:hover {
    transform: translateY(-3px);
    background: rgba(255, 255, 255, 0.18);
}

.hero-benefits {
    display: flex;
    gap: 12px;
    margin-top: 15px;
    justify-content: center;
}

.benefit {
    background: rgba(255, 255, 255, 0.12);
    padding: 10px 18px;
    border-radius: 40px;
    font-size: 14px;
}

.role-picker-section {
    background: #ffffff;
    color: #111827;
    padding: 34px 0;
    border-bottom: 1px solid rgba(17, 24, 39, 0.08);
}

.role-picker-shell {
    display: grid;
    grid-template-columns: minmax(220px, 0.55fr) minmax(0, 1.45fr);
    gap: 24px;
    align-items: center;
}

.role-picker-copy h2 {
    margin: 0 0 8px;
    color: #111827;
    font-size: 24px;
    line-height: 1.2;
}

.role-picker-copy p {
    margin: 0;
    color: #4b5563;
    font-size: 15px;
    line-height: 1.5;
}

.role-selector {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.role-selector__button {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 112px;
    min-width: 0;
    padding: 16px;
    border: 1px solid rgba(17, 24, 39, 0.10);
    border-radius: 18px;
    background: #f6f8ff;
    color: #111827;
    cursor: pointer;
    text-align: left;
    transition: transform .2s ease, border-color .2s ease, background .2s ease, color .2s ease;
}

.role-selector__button span {
    display: block;
    margin-bottom: 8px;
    font: inherit;
    font-size: 15px;
    font-weight: 900;
    line-height: 1.25;
}

.role-selector__button small {
    color: #6b7280;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.35;
}

.role-selector__button:hover {
    transform: translateY(-2px);
    border-color: rgba(26, 98, 228, 0.30);
}

.role-selector__button.is-active {
    border-color: #1A62E4;
    background: #1A62E4;
    color: #ffffff;
}

.role-selector__button.is-active small {
    color: rgba(255, 255, 255, 0.84);
}

body.role-is-updating [data-role-text],
body.role-is-updating [data-role-paragraphs],
body.role-is-updating [data-role-cards] {
    opacity: 0.45;
    transform: translateY(4px);
}

[data-role-text],
[data-role-paragraphs],
[data-role-cards] {
    transition: opacity .18s ease, transform .18s ease;
}

/* =========================
   SECTIONS
========================= */
.section {
    padding: 100px 0;
    background: #1A62E4;
    color: #fff;
}

.section.white {
    background: #fff;
    color: #000;
}

.container {
    width: 100%;
    max-width: 1300px;
    margin: 0 auto;
    padding-left: 16px;
    padding-right: 16px;
}

.section-title {
    text-align: center;
    font-size: 42px;
    margin-bottom: 20px;
}

.section-sub {
    text-align: center;
    font-size: 18px;
    max-width: 600px;
    margin: 0 auto 50px;
    opacity: 0.8;
}

.section-cta {
    display: flex;
    justify-content: center;
    margin-top: 28px;
}

.section-cta-inline {
    margin-top: 18px;
}

.marketplace-points {
    margin-bottom: 36px;
}

.marketplace-points .card {
    display: flex;
    align-items: center;
    justify-content: center;
}

.marketplace-points .card h3 {
    margin: 0;
    font-size: 20px;
    line-height: 1.35;
}

.marketplace-sub {
    margin-bottom: 0;
}

.audience-section {
    position: relative;
    overflow: hidden;
    background:
            radial-gradient(
                    1100px 360px at 50% -120px,
                    rgba(26, 98, 228, 0.09),
                    transparent 60%
            ),
            #ffffff;
}

.audience-section__intro {
    max-width: 860px;
    margin-bottom: 28px;
}

.audience-benefits {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin: 0 auto 44px;
}

.audience-benefit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 10px 18px;
    border: 1px solid rgba(26, 98, 228, 0.14);
    border-radius: 999px;
    background: #f6f8ff;
    color: #1A62E4;
    font-size: 14px;
    font-weight: 800;
}

.audience-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    align-items: stretch;
}

.audience-grid--focused {
    grid-template-columns: minmax(0, 920px);
    justify-content: center;
}

.audience-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 100%;
    padding: 26px 22px 24px;
    border: 1px solid rgba(17, 24, 39, 0.08);
    border-radius: 20px;
    background: linear-gradient(180deg, #ffffff 0%, #f6f8ff 100%);
    color: #111827;
    transition: transform .25s ease, border-color .25s ease;
}

.audience-card:hover {
    transform: translateY(-5px);
    border-color: rgba(26, 98, 228, 0.24);
}

.audience-card--featured {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 24px;
    padding: 34px;
}

.audience-card--featured .audience-card__title,
.audience-card--featured .audience-card__eyebrow,
.audience-card--featured .audience-card__cta {
    grid-column: 1 / -1;
}

.audience-card__eyebrow {
    display: inline-flex;
    justify-self: center;
    align-items: center;
    min-height: 34px;
    padding: 7px 14px;
    border-radius: 999px;
    background: rgba(26, 98, 228, 0.08);
    color: #1A62E4;
    font-size: 13px;
    font-weight: 900;
}

.audience-card__title {
    min-height: 58px;
    margin: 0 0 18px;
    color: #111827;
    font-size: 21px;
    line-height: 1.2;
    text-align: center;
}

.audience-card__section {
    margin-bottom: 16px;
}

.audience-card__section span {
    display: block;
    margin-bottom: 6px;
    color: #1A62E4;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.06em;
    line-height: 1.2;
    text-transform: uppercase;
}

.audience-card__section p {
    margin: 0;
    color: #374151;
    font-size: 14px;
    line-height: 1.55;
}

.audience-card__services {
    padding: 14px;
    border-radius: 14px;
    background: rgba(26, 98, 228, 0.06);
}

.audience-card__result {
    margin-top: 0;
}

.audience-card__result p {
    color: #166534;
    font-weight: 700;
}

.audience-card__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    justify-self: center;
    min-height: 50px;
    margin-top: 4px;
    padding: 13px 16px;
    border-radius: 999px;
    background: #1A62E4;
    color: #ffffff;
    font-size: 14px;
    font-weight: 900;
    line-height: 1.25;
    text-align: center;
    transition: transform .2s ease, background .2s ease;
}

.audience-card__cta:hover {
    transform: translateY(-2px);
    background: #1349b8;
}

.audience-summary {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(280px, 1fr);
    gap: 30px;
    margin-top: 38px;
    padding: 34px;
    border-radius: 24px;
    background: #1A62E4;
    color: #ffffff;
}

.audience-summary__content h3 {
    margin: 0 0 14px;
    font-size: 28px;
    line-height: 1.2;
}

.audience-summary__content p {
    margin: 0;
    font-size: 16px;
    line-height: 1.6;
    opacity: 0.92;
}

.audience-summary__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 18px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.audience-summary__list li {
    position: relative;
    padding-left: 28px;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
}

.audience-summary__list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 2px;
    width: 18px;
    height: 18px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
}

.audience-summary__list li::after {
    content: "";
    position: absolute;
    left: 6px;
    top: 6px;
    width: 5px;
    height: 8px;
    border: solid #ffffff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.audience-summary__actions {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
}

.audience-summary__actions .hero-btn-outline-blue {
    border-color: #ffffff;
}

@media (max-width: 1180px) {
    .role-picker-shell {
        grid-template-columns: 1fr;
    }

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

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

    .audience-grid--focused {
        grid-template-columns: minmax(0, 920px);
    }

    .audience-card__title {
        min-height: auto;
    }

    .audience-summary {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 700px) {
    .role-picker-section {
        padding: 24px 0 28px;
    }

    .role-picker-copy h2,
    .role-picker-copy p {
        text-align: center;
    }

    .role-selector {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
        margin: 0;
        padding: 0;
        overflow: visible;
    }

    .role-selector__button {
        width: 100%;
        min-height: 104px;
        text-align: center;
    }

    .audience-section {
        padding: 76px 0;
    }

    .audience-section .section-title {
        font-size: 32px;
    }

    .audience-section__intro {
        margin-bottom: 24px;
        font-size: 16px;
    }

    .audience-benefits {
        margin-bottom: 30px;
    }

    .audience-benefit {
        width: 100%;
        max-width: 320px;
    }

    .audience-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .audience-card {
        padding: 24px 18px 22px;
    }

    .audience-card--featured {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .audience-card__title {
        font-size: 20px;
    }

    .audience-summary {
        margin-top: 28px;
        padding: 26px 20px;
        border-radius: 20px;
    }

    .audience-summary__content h3 {
        font-size: 24px;
    }

    .audience-summary__list {
        grid-template-columns: 1fr;
    }

    .audience-summary__actions {
        align-items: center;
        flex-direction: column;
    }

    .audience-summary__actions .hero-btn {
        width: 100%;
        max-width: 320px;
        padding-left: 18px;
        padding-right: 18px;
    }
}

/* Pricing section moved slightly up */
#pricing {
    padding-top: 70px;
}

/* cards */
.cards-3 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 25px;
}

.card {
    background: #f6f8ff;
    border-radius: 20px;
    padding: 25px;
    text-align: center;
    font-size: 18px;
    /*
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
    */
}

.steps {
    display: flex;
    gap: 30px;
    justify-content: center;
    flex-wrap: wrap;
}

.step {
    text-align: center;
    max-width: 200px;
}

.step-num {
    width: 60px;
    height: 60px;
    background: #fff;
    color: #1A62E4;
    border-radius: 50%;
    font-size: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 10px;
}

/* screens */
.screens {
    display: flex;
    gap: 30px;
    justify-content: center;
    flex-wrap: wrap;
}

.screens img {
    width: 450px;
    border-radius: 20px;
    /*
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    */
}

/* CTA section */
.cta {
    padding: 100px 0;
    text-align: center;
    background: #1A62E4;
    color: #fff;
}

.cta h2 {
    font-size: 40px;
    margin-bottom: 30px;
}

.cta-sub {
    max-width: 680px;
    margin: -8px auto 30px;
    padding: 0 16px;
    font-size: 18px;
    line-height: 1.55;
    opacity: 0.9;
}

/* Demo booking */
.demo-booking-section {
    position: relative;
    background: #f7f9fc;
    color: #111827;
}

.demo-booking-section .section-title {
    color: #111827;
}

.demo-booking-section .section-sub {
    color: #4b5563;
    opacity: 1;
}

.demo-booking-shell {
    display: grid;
    grid-template-columns: minmax(290px, 0.78fr) minmax(0, 1.22fr);
    gap: 0;
    max-width: 1180px;
    margin: 0 auto;
    align-items: stretch;
    padding: 0;
    border: 1px solid rgba(17, 24, 39, 0.08);
    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0 14px 34px rgba(17, 24, 39, 0.08);
}

.demo-booking-summary,
.demo-booking-form {
    min-width: 0;
}

.demo-booking-summary {
    position: relative;
    overflow: hidden;
    padding: 32px;
    border-radius: 20px 0 0 20px;
    background: #f2f6ff;
    color: #111827;
}

.demo-booking-summary::before {
    display: none;
}

.demo-booking-summary > * {
    position: relative;
    z-index: 1;
}

.demo-booking-summary h3 {
    color: #111827;
    font-size: 24px;
    line-height: 1.2;
    margin-bottom: 20px;
}

.demo-booking-summary ul {
    display: grid;
    gap: 13px;
    list-style: none;
    margin: 0;
    padding: 0;
    color: #374151;
    line-height: 1.45;
}

.demo-booking-summary li {
    position: relative;
    padding-left: 28px;
    font-weight: 600;
}

.demo-booking-summary li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 3px;
    width: 18px;
    height: 18px;
    border-radius: 999px;
    background: rgba(26, 98, 228, 0.12);
    box-shadow: none;
}

.demo-booking-summary li::after {
    content: "";
    position: absolute;
    left: 6px;
    top: 7px;
    width: 5px;
    height: 8px;
    border: solid #1A62E4;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.demo-booking-duration {
    margin-top: 28px;
    padding: 18px;
    border-radius: 14px;
    border: 1px solid rgba(26, 98, 228, 0.12);
    background: #ffffff;
}

.demo-booking-duration span {
    display: block;
    margin-bottom: 6px;
    color: #6b7280;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
}

.demo-booking-duration b {
    color: #111827;
    font-size: 22px;
}

.demo-booking-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 20px;
    padding: 32px;
    border-radius: 0 20px 20px 0;
    background: #ffffff;
}

.demo-field {
    display: grid;
    gap: 7px;
}

.demo-field-full {
    grid-column: 1 / -1;
}

.demo-field label {
    color: #1f2937;
    font-size: 14px;
    font-weight: 800;
}

.demo-field label b {
    color: #E54959;
}

.demo-field input,
.demo-field select,
.demo-field textarea {
    width: 100%;
    min-height: 50px;
    border: 1px solid rgba(17, 24, 39, 0.11);
    border-radius: 12px;
    background: #ffffff;
    color: #111827;
    font: inherit;
    padding: 14px 15px;
    outline: none;
    transition: background .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.demo-field select {
    cursor: pointer;
}

.demo-field textarea {
    resize: vertical;
    line-height: 1.45;
    min-height: 112px;
}

.demo-field input:focus,
.demo-field select:focus,
.demo-field textarea:focus {
    background: #ffffff;
    border-color: #1A62E4;
    box-shadow: 0 0 0 3px rgba(26, 98, 228, 0.10);
}

.demo-field.is-invalid input,
.demo-field.is-invalid select,
.demo-field.is-invalid textarea {
    border-color: #E54959;
    background: #fff8f8;
}

.demo-error {
    min-height: 17px;
    color: #E54959;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.35;
}

.demo-slots {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(106px, 1fr));
    gap: 9px;
    padding: 12px;
    border: 1px solid rgba(17, 24, 39, 0.08);
    border-radius: 14px;
    background: #f7f9fc;
}

.demo-slots button {
    min-height: 40px;
    border: 1px solid rgba(17, 24, 39, 0.10);
    border-radius: 10px;
    background: #ffffff;
    color: #1f2937;
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.demo-slots button:hover {
    transform: translateY(-1px);
    border-color: #1A62E4;
    color: #1A62E4;
}

.demo-slots button.active {
    background: #1A62E4;
    color: #ffffff;
    border-color: #1A62E4;
    box-shadow: none;
}

.demo-hp {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.demo-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: min(100%, 260px);
    min-height: 52px;
    padding: 15px 34px;
    border: none;
    border-radius: 999px;
    background: linear-gradient(180deg, #1A62E4 0%, #1349b8 100%);
    color: #ffffff;
    font: inherit;
    font-weight: 900;
    cursor: pointer;
    box-shadow: none;
    transition: transform .2s ease, opacity .2s ease, box-shadow .2s ease;
}

.demo-submit:hover {
    transform: translateY(-2px);
}

.demo-submit:disabled {
    cursor: wait;
    opacity: 0.7;
    transform: none;
}

.demo-message {
    min-height: 22px;
    margin-top: 14px;
    padding: 0 2px;
    font-size: 14px;
    font-weight: 700;
}

.demo-message.success {
    color: #16a34a;
}

.demo-message.error {
    color: #E54959;
}

/* Footer */
.footer {
    background: #0d3aa8;
    color: #fff;
    padding: 30px 0;
}

.footer-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
@media (max-width: 768px) {
    .footer-inner {
        justify-content: normal;
    }
    .footer-links{
        display: flex;
        flex-direction: column;
    }
}
.footer-links a {
    color: #fff;
    margin-left: 20px;
    opacity: 0.8;
}

.footer-links a:hover {
    opacity: 1;
}

/* Auctions */
.auction-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
}

.auction-card {
    background: #f8faff;
    border-radius: 20px;
    padding: 35px 25px;
    text-align: center;
    /*
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
    */
    transition: 0.3s ease;
}

.auction-card:hover {
    transform: translateY(-6px);
    /*
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.14);
    */
}

/* Numbers */
.numbers {
    display: flex;
    justify-content: center;
    gap: 50px;
    flex-wrap: wrap;
}

.num-box {
    text-align: center;
    min-width: 160px;
}

.num {
    font-size: 52px;
    font-weight: 700;
    margin-bottom: 10px;
}

/* FAQ */
.faq-section {
    padding: 120px 0;
    background: #0E56D6;
    color: #fff;
}

.white-text {
    color: #fff;
}

.faq-list {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.faq-list summary {
    background: rgba(255, 255, 255, 0.12);
    padding: 22px 24px;
    border-radius: 14px;
    font-size: 20px;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
    color: #fff;
    transition: 0.3s ease;
}

.faq-list summary:hover {
    background: rgba(255, 255, 255, 0.18);
}

.faq-list summary::-webkit-details-marker {
    display: none;
}

.faq-list details {
    border-radius: 14px;
    overflow: hidden;
}

.faq-list p {
    background: rgba(255, 255, 255, 0.08);
    margin: 0;
    padding: 18px 24px 24px;
    font-size: 17px;
    line-height: 1.6;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

details[open] summary {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

/* Subtitle */
.section-subtitle {
    font-size: 20px;
    font-weight: 400;
    line-height: 1.55;
    max-width: 650px;
    margin: 0 auto 55px;
    text-align: center;
    color: inherit;
    opacity: 0.92;
    backdrop-filter: blur(2px);
}

/* =========================
   HOW (one combined section)
========================= */
.how-one {
    background: linear-gradient(180deg, #f9fafb 0%, #ffffff 100%);
}

.how-one .section-sub {
    max-width: 760px;
    margin: 0 auto 36px;
    color: #6b7280;
}

.how-one-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 28px;
}

.how-one-card {
    background: #ffffff;
    border-radius: 20px;
    padding: 26px 26px 28px;
    border: 1px solid rgba(17, 24, 39, 0.06);
    /*box-shadow: 0 12px 30px rgba(17, 24, 39, 0.06),
    0 2px 6px rgba(17, 24, 39, 0.05);*/
    transition: transform .35s ease, box-shadow .35s ease;
}

.how-one-card:hover {
    transform: translateY(-4px);
    /*    box-shadow: 0 22px 60px rgba(17, 24, 39, 0.10),
        0 6px 14px rgba(17, 24, 39, 0.08);*/
}

.how-one-card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
}

.how-one-card h3 {
    font-size: 18px;
    margin: 0;
    color: #111827;
}

.how-one-badge {
    font-size: 12px;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(17, 24, 39, 0.06);
    color: #111827;
    white-space: nowrap;
}

.how-one-timeline {
    list-style: none;
    padding: 0;
    margin: 0;
}

.how-one-timeline li {
    display: grid;
    grid-template-columns: 14px 1fr;
    gap: 14px;
    padding: 12px 0;
    position: relative;
}

.how-one-timeline li:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 6px;
    top: 26px;
    bottom: -10px;
    width: 2px;
    background: rgba(17, 24, 39, 0.12);
}

.how-one-timeline .dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #1A62E4;
}

.how-one-timeline .txt b {
    font-size: 14px;
    color: #111827;
}

.how-one-timeline .txt small {
    display: block;
    font-size: 13px;
    color: #6b7280;
}

/* SPLIT */
.how-one-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.how-one-col {
    background: linear-gradient(180deg, rgba(17, 24, 39, 0.04), rgba(17, 24, 39, 0.01));
    border-radius: 14px;
    padding: 14px;
    border: 1px solid rgba(17, 24, 39, 0.06);
}

.how-one-col-title {
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 10px;
    color: #111827;
    display: flex;
    align-items: center;
    gap: 6px;
}

.how-one-list {
    padding-left: 16px;
    margin: 0;
}

.how-one-list li {
    font-size: 13.5px;
    margin: 7px 0;
    color: #374151;
}

.how-one-result {
    margin-top: 14px;
    padding: 14px 16px;
    border-radius: 14px;
    background: linear-gradient(135deg, #16a34a, #22c55e);
    color: #fff;
}

.how-one-result-title {
    font-size: 12px;
    opacity: 0.75;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.how-one-result-text {
    font-size: 14px;
}

/* Pricing emphasis */
.pricing-last {
    grid-column: 1 / -1;
}

.pricing-user {
    border: 1px solid rgba(34, 197, 94, 0.35);
    background: linear-gradient(180deg, rgba(34, 197, 94, 0.10), rgba(34, 197, 94, 0.04));
}

.pricing-our {
    opacity: 0.78;
}

.pricing-user.pricing-last {
    background: linear-gradient(135deg, #16a34a, #22c55e);
    color: #fff;
    border: none;
    /*
    box-shadow: 0 18px 40px rgba(34, 197, 94, 0.35);
    */
}

.pricing-user.pricing-last span {
    opacity: 0.86;
}

.pricing-user.pricing-last b {
    font-size: 28px;
}

/* =========================
   Back to top button
========================= */
.back-to-top {
    position: fixed;
    right: 18px;
    bottom: 18px;
    width: 48px;
    height: 48px;
    border-radius: 999px;
    border: 1px solid rgba(17, 24, 39, 0.12);
    background: rgba(255, 255, 255, 0.92);
    /*
    box-shadow: 0 18px 40px rgba(17, 24, 39, 0.18);
    */
    color: #111827;
    font-weight: 900;
    cursor: pointer;
    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;
    transition: opacity .25s ease, transform .25s ease;
    z-index: 1200;
}

.back-to-top.show {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.back-to-top:hover {
    transform: translateY(-2px);
}


/* =========================
   Responsive
========================= */
@media (max-width: 900px) {


    .hero-title {
        font-size: 32px;
    }

    .hero-cta-row, .hero-cta-row-centered {
        justify-content: center;
    }

    .nav, .header-link {
        display: none;
    }

    .btn-cta {
        display: none;
    }

    .burger {
        display: inline-flex;
    }

    .screens img {
        width: 100%;
        max-width: 320px;
    }

    .demo-booking-shell {
        grid-template-columns: 1fr;
        padding: 0;
        border-radius: 18px;
    }

    .demo-booking-form {
        grid-template-columns: 1fr;
        padding: 24px;
        border-radius: 0 0 18px 18px;
    }

    .demo-booking-summary {
        padding: 26px;
        border-radius: 18px 18px 0 0;
    }

    .demo-booking-summary h3 {
        font-size: 24px;
    }
}

@media (max-width: 600px) {
    .demo-booking-section {
        padding: 76px 0;
    }

    .demo-booking-shell {
        margin: 0 -2px;
        border-radius: 16px;
        box-shadow: 0 10px 26px rgba(17, 24, 39, 0.08);
    }

    .demo-booking-summary {
        border-radius: 16px 16px 0 0;
    }

    .demo-booking-form {
        border-radius: 0 0 16px 16px;
    }

    .demo-booking-form {
        padding: 20px 16px;
        gap: 14px;
    }

    .demo-booking-summary {
        padding: 24px 20px;
    }

    .demo-booking-duration {
        margin-top: 24px;
    }

    .demo-slots {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding: 10px;
        gap: 8px;
    }

    .demo-slots button {
        min-height: 42px;
        font-size: 13px;
    }

    .demo-submit {
        width: 100%;
    }
}

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

    .how-one-cols {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-mockup {
        transition: none;
    }
}


/* PRIMARY CTA ON WHITE BACKGROUND */
.hero-btn-blue,
.section.white .hero-btn-strong,
.section.white .btn-cta {
    background: linear-gradient(180deg, #1A62E4 0%, #1349b8 100%);
    color: #ffffff;
    font-weight: 800;
    border-radius: 999px;
    padding: 16px 48px;
    /*    box-shadow: 0 14px 28px rgba(26, 98, 228, 0.35),
        inset 0 -2px 0 rgba(0, 0, 0, 0.15);*/
    border: none;
    transition: transform .2s ease,
    box-shadow .2s ease,
    background .2s ease;
}

.hero-btn-blue:hover,
.section.white .hero-btn-strong:hover,
.section.white .btn-cta:hover {
    transform: translateY(-2px);
    /*  box-shadow: 0 18px 36px rgba(26, 98, 228, 0.45),
      inset 0 -1px 0 rgba(0, 0, 0, 0.18);*/
}

.hero-btn-blue:active,
.section.white .hero-btn-strong:active,
.section.white .btn-cta:active {
    transform: translateY(0);
    /*
    box-shadow: 0 10px 20px rgba(26, 98, 228, 0.35),

    inset 0 2px 4px rgba(0, 0, 0, 0.25); */
}

.hero-btn-outline-blue {
    background: #ffffff;
    color: #1A62E4;
    border: 2px solid rgba(26, 98, 228, 0.35);
    font-weight: 700;
    border-radius: 999px;
    padding: 14px 80px;
    /*
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.06);
    */
    transition: transform .2s ease,
    box-shadow .2s ease,
    border-color .2s ease,
    background .2s ease;
}

.hero-btn-outline-blue:hover {
    background: #f3f7ff;
    border-color: #1A62E4;
    transform: translateY(-1px);
    /*
    box-shadow: 0 10px 22px rgba(26, 98, 228, 0.18);
    */
}

.section-cta,
.hero-cta-panel {
    margin-top: 70px;
}

@media (max-width: 768px) {
    .hero-btn-strong {
        width: 100%;
        max-width: 320px;
        justify-content: center;
        padding: 16px 0;
    }

    .section-cta,
    .hero-cta-panel {
        margin-top: 27px;
    }
}

/* FIX: center text inside CTA buttons on mobile */
@media (max-width: 768px) {
    .hero-btn,
    .hero-btn-blue,
    .hero-btn-outline-blue,
    .section.white .hero-btn-strong {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        text-align: center;
    }
}

@media (max-width: 900px) {
    .header-actions .btn-cta {
        display: none !important;
    }
}

.hero-btn *,
.btn-cta * {
    text-align: center;
}

/* Safari backdrop fallback */
.site-header {
    background: rgba(255, 255, 255, 0.92);
}

@supports ((backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))) {
    .site-header {
        background: rgba(255, 255, 255, 0.08);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }
}

/* iOS safe-area */
body {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
}

/* fixed header Safari repaint fix */
.site-header {
    will-change: background;
    transform: translateZ(0);
}

@media (max-width: 900px) {
    #mainNav {
        display: none !important;
    }

    .burger {
        display: inline-flex !important;
    }
}

/* iOS Safari FIX — real mobile breakpoint */
@media screen and (max-device-width: 900px) {
    #mainNav {
        display: none !important;
    }

    .btn-cta {
        display: none !important;
    }

    .burger {
        display: inline-flex !important;
    }
}

/* =========================
   IMAGE POPUP (SAFARI SAFE)
========================= */
.image-popup {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: none;
}

.image-popup.active {
    display: block;
}

.image-popup-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
}

.image-popup-content {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    margin: auto;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
}

.image-popup-content img {
    max-width: 100%;
    max-height: 100%;
    border-radius: 16px;
    /*
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
    */
}

/* Close button */
.image-popup-close {
    position: absolute;
    top: -12px;
    right: -12px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: #ffffff;
    color: #111;
    font-size: 28px;
    font-weight: 600;
    cursor: pointer;
    /*
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    */
}

/* Prevent background scroll */
body.popup-open {
    overflow: hidden;
}

#categories.section.white.auctions {
    position: relative;
    padding: 0px 0;
    background:
            radial-gradient(
                    1200px 400px at 50% -120px,
                    rgba(26, 98, 228, 0.10),
                    transparent 60%
            ),
            #ffffff;
}
#categories .container {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 28px;
    padding: 70px 60px 80px;
    /*   box-shadow:
               0 30px 80px rgba(17, 24, 39, 0.12),
               0 10px 30px rgba(17, 24, 39, 0.08);*/
}
#categories .section-title {
    font-size: 44px;
    letter-spacing: -0.02em;
}

#categories .section-sub {
    max-width: 720px;
    font-size: 19px;
    opacity: 0.85;
}
#categories .auction-card {
    background: linear-gradient(
            180deg,
            #ffffff 0%,
            #f6f8ff 100%
    );
    border-radius: 22px;
    padding: 36px 28px;
    /* box-shadow:
             0 12px 30px rgba(17, 24, 39, 0.08),
             inset 0 1px 0 rgba(255, 255, 255, 0.7);*/
    transition: transform .25s ease, box-shadow .25s ease;
}

#categories .auction-card:hover {
    transform: translateY(-6px);
    /*    box-shadow:
                0 20px 50px rgba(17, 24, 39, 0.14),
                inset 0 1px 0 rgba(255, 255, 255, 0.85);*/
}
#categories .section-cta {
    margin-top: 60px;
}

#categories .section-cta a.hero-btn-strong {
    padding: 18px 52px;
    font-size: 16px;
    /* box-shadow:
             0 18px 40px rgba(26, 98, 228, 0.35),
             inset 0 -2px 0 rgba(0, 0, 0, 0.18);*/
}

@media (max-width: 900px) {
    #categories .container {
        padding: 50px 20px 60px;
        border-radius: 20px;
    }

    #categories .section-title {
        font-size: 32px;
    }
}