@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
    --max: 1280px;

    --text: #263350;
    --title: #24314f;
    --muted: #566380;

    --bg: #f4f6fb;
    --surface: #ffffff;
    --line: #dbe2f0;

    --blue: #3a71d3;
    --blue-strong: #2f61bf;
    --teal: #69bbb7;
    --orange: #de9c62;

    --ok: #58b8b2;
    --warn: #d59a56;

    --r-sm: 12px;
    --r: 18px;
    --r-lg: 24px;

    --shadow-sm: 0 7px 18px rgba(38, 55, 96, .09);
    --shadow: 0 20px 40px rgba(38, 55, 96, .13);
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    min-height: 100%;
    font-family: 'Manrope', 'Segoe UI', sans-serif;
    color: var(--text);
    background:
        radial-gradient(900px 300px at -12% 18%, rgba(107, 188, 191, .20), transparent 62%),
        radial-gradient(920px 380px at 110% 30%, rgba(130, 162, 225, .22), transparent 64%),
        radial-gradient(1050px 370px at 55% 38%, rgba(197, 210, 238, .28), transparent 68%),
        linear-gradient(180deg, #f6f8fc 0%, #f2f5fb 100%);
}

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

.frame-top,
.frame-bottom {
    height: 46px;
    background:
        radial-gradient(140px 60px at 12% 30%, rgba(80, 104, 173, .35), transparent 70%),
        radial-gradient(220px 80px at 78% 18%, rgba(72, 112, 203, .26), transparent 72%),
        linear-gradient(90deg, #272a36 0%, #1e2231 22%, #212843 52%, #1f2540 78%, #232733 100%);
}

.frame-bottom {
    margin-top: 12px;
}

.container {
    width: min(var(--max), calc(100% - 30px));
    margin: 0 auto;
    padding: 0;
}

.topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    border-bottom: 1px solid rgba(219, 226, 240, .9);
    background: rgba(248, 250, 255, .92);
    backdrop-filter: blur(12px);
}

.topbar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 78px;
}

.brand {
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

.brand-logo {
    display: block;
    width: clamp(240px, 27vw, 275px);
    height: auto;
}

.nav {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #2f3d5d;
    font-size: 16px;
    font-weight: 700;
    background: linear-gradient(180deg, #edf3ff, #e4ecfb);
    border: 1px solid #d4def0;
    border-radius: 14px;
    padding: 8px 10px;
    box-shadow: var(--shadow-sm);
}

.nav-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 4px;
    width: 46px;
    height: 46px;
    border: 1px solid #d8cff6;
    border-radius: 12px;
    background: linear-gradient(180deg, #f8f5ff, #efe8ff);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
}

.nav-toggle span {
    width: 18px;
    height: 2px;
    border-radius: 999px;
    background: #4e3f88;
    transition: .18s ease;
}

.nav-main {
    display: flex;
    align-items: center;
    gap: 6px;
}

.nav-main a {
    font-size: 14px;
    font-weight: 700;
    color: #38507c;
    padding: 9px 12px;
    border-radius: 10px;
    transition: .14s ease;
}

.nav-main a:hover {
    background: rgba(255, 255, 255, .75);
    color: #2a3f68;
}

.nav-cta {
    display: flex;
    align-items: center;
    gap: 8px;
}

.nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    font-size: 13px;
    font-weight: 800;
    padding: 10px 12px;
    transition: .14s ease;
    border: 1px solid transparent;
}

.nav-btn-soft {
    background: linear-gradient(180deg, #ffffff, #f3f7ff);
    border-color: #d2dff3;
    color: #365489;
}

.nav-btn-soft:hover {
    filter: brightness(1.01);
    transform: translateY(-1px);
}

.nav-btn-strong {
    background: linear-gradient(180deg, #4f85e0, #376cc9);
    border-color: #3d6fca;
    color: #ffffff;
    box-shadow: 0 8px 16px rgba(52, 96, 180, .28);
}

.nav-btn-strong:hover {
    filter: brightness(1.03);
    transform: translateY(-1px);
}

.btn:disabled,
.btn.is-disabled {
    cursor: default;
    opacity: .72;
    filter: saturate(.86);
    transform: none;
    box-shadow: none;
}

main.container {
    padding-top: 34px;
}

h1,
h2,
h3 {
    margin: 0;
    color: var(--title);
}

h1 {
    font-size: clamp(28px, 3vw, 42px);
    line-height: 1.06;
    letter-spacing: -.02em;
    margin-bottom: 10px;
}

h2 {
    font-size: clamp(22px, 2.2vw, 34px);
    line-height: 1.15;
    letter-spacing: -.01em;
}

h3 {
    font-size: clamp(20px, 1.8vw, 28px);
    line-height: 1.2;
}

p {
    margin: 0;
    line-height: 1.56;
}

.muted {
    color: var(--muted);
    font-size: clamp(18px, 1.4vw, 22px);
}

.tiny {
    font-size: 12px;
}

.card {
    border: 1px solid var(--line);
    background: linear-gradient(180deg, rgba(255, 255, 255, .96), #ffffff 60%);
    border-radius: var(--r-lg);
    padding: 28px;
    box-shadow:
        0 14px 34px rgba(38, 55, 96, .14),
        0 2px 0 rgba(255, 255, 255, .9) inset;
}

.card+.card {
    margin-top: 0;
}

.hero {
    padding: 38px 48px;
    background:
        radial-gradient(700px 220px at 20% 10%, rgba(164, 191, 235, .25), transparent 65%),
        radial-gradient(900px 320px at 100% 20%, rgba(131, 168, 228, .24), transparent 68%),
        linear-gradient(180deg, #f8faff 0%, #f4f7fc 100%);
    box-shadow:
        0 24px 46px rgba(41, 64, 112, .2),
        0 1px 0 rgba(255, 255, 255, .9) inset;
}

.reveal {
    opacity: 0;
    transform: translateY(18px);
    animation: homeReveal .8s cubic-bezier(.2, .8, .2, 1) forwards;
}

.reveal-1 { animation-delay: .05s; }
.reveal-2 { animation-delay: .16s; }
.reveal-3 { animation-delay: .28s; }
.reveal-4 { animation-delay: .4s; }
.reveal-5 { animation-delay: .52s; }

@keyframes homeReveal {
    from {
        opacity: 0;
        transform: translateY(18px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero-top {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 32px;
}

.hero-copy {
    max-width: 58%;
    display: flex;
    flex-direction: column;
}

.hero-title-row {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 10px;
}

.logo-panel {
    flex: 0 0 228px;
    background: #ffffff;
    border: 1px solid #dbe3f1;
    border-radius: 16px;
    padding: 10px;
    box-shadow: var(--shadow-sm);
}

.logo-panel img {
    width: 100%;
    height: auto;
    display: block;
}

.hero-title-copy {
    min-width: 0;
}

.hero-lead {
    max-width: 16ch;
    font-size: clamp(24px, 2.1vw, 32px);
    line-height: 1.18;
    margin: 10px 0 10px;
    color: #31476f;
    font-weight: 600;
    letter-spacing: -.025em;
}

.hero-copy h1 {
    max-width: 10ch;
    margin-bottom: 4px;
    font-family: inherit;
    font-size: clamp(50px, 5vw, 76px);
    line-height: .97;
    letter-spacing: -.05em;
    color: #223f72;
    text-wrap: balance;
    font-weight: 800;
}

.hero-title-main,
.hero-title-sub {
    display: block;
}

.hero-title-main {
    font-size: .88em;
}

.hero-title-sub {
    margin-top: .08em;
    font-size: .68em;
    line-height: .96;
}

.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid #cfdbf1;
    background: rgba(255, 255, 255, .72);
    color: #41618f;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.cta {
    margin-top: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
}

.btn {
    border: 4px solid #ffffff;
    border-radius: 22px;
    background: linear-gradient(165deg, #5fb6e6 0%, #2d86c2 45%, #2f77b4 100%);
    color: #fff;
    font-size: clamp(23px, 1.9vw, 29px);
    font-weight: 700;
    padding: 15px 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 12px 22px rgba(56, 101, 190, .3);
    cursor: pointer;
    transition: .14s ease;
}

.cta .btn {
    min-width: 260px;
    min-height: 84px;
}

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

.btn.small {
    font-size: 14px;
    padding: 10px 14px;
}

.btn.ghost {
    background: #fff;
    color: #304062;
    border: 1px solid var(--line);
    box-shadow: var(--shadow-sm);
}

.price {
    margin-top: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid #d6deec;
    border-radius: 999px;
    background: #f7f9fd;
    color: #435277;
    font-size: clamp(15px, 1.2vw, 19px);
    font-weight: 600;
    padding: 9px 18px;
}

.bullets {
    margin-top: 18px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.meta-row {
    margin-top: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.hero-meta-row {
    flex-direction: row;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.hero-meta-row .bullet,
.hero-meta-row .price {
    white-space: nowrap;
}

.hero-meta-row-right {
    margin-top: 12px;
    justify-content: center;
}

.hero-actions {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding-top: 18px;
}

.hero-secondary-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 12px 18px;
    border: 1px solid #c8daf4;
    border-radius: 14px;
    background: linear-gradient(180deg, #ffffff, #edf5ff);
    color: #2f568f;
    font-size: 15px;
    font-weight: 800;
    text-decoration: none;
    box-shadow: 0 10px 18px rgba(45, 91, 171, .14);
    transition: .14s ease;
}

.hero-secondary-link:hover {
    transform: translateY(-1px);
    filter: brightness(1.02);
}

.hero-proof-grid {
    margin-top: 18px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.hero-proof-grid-side {
    margin-top: 14px;
    width: 100%;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
}

.hero-promo-under {
    margin-top: 4px;
    width: 100%;
}

.hero-promo-under .promo-badge {
    margin: 0 auto;
}

.hero-promo-under .hero-promo-badge {
    width: min(430px, 100%);
    min-height: 0;
    border-radius: 18px;
}

.hero-promo-badge .promo-head {
    padding: 10px 12px 7px;
}

.hero-promo-line {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 10px 14px 6px;
}

.hero-promo-badge .promo-price {
    padding: 0;
    font-size: 42px;
    flex: 0 0 auto;
}

.hero-promo-badge .promo-foot {
    padding: 0;
    gap: 10px;
    font-size: 16px;
    justify-content: flex-start;
    flex: 0 1 auto;
}

.hero-promo-badge .promo-foot .old {
    white-space: nowrap;
    font-size: 15px;
}

.hero-promo-badge .promo-footer {
    padding-bottom: 12px;
    text-align: center;
}

.hero-proof-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 104px;
    padding: 14px 14px 12px;
    border: 1px solid #d7e1f2;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .95), rgba(246, 250, 255, .92));
    box-shadow: 0 10px 18px rgba(40, 73, 128, .08);
}

.hero-proof-card strong {
    color: #284d80;
    font-size: 13px;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.hero-proof-card span {
    color: #506280;
    font-size: 14px;
    line-height: 1.4;
    font-weight: 600;
}

.hero-proof-grid-side .hero-proof-card {
    min-height: 86px;
    padding: 12px 12px 10px;
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(242, 247, 255, .94));
}

.hero-proof-grid-side .hero-proof-card strong {
    font-size: 12px;
}

.hero-proof-grid-side .hero-proof-card span {
    font-size: 13px;
    line-height: 1.35;
}

.bullet {
    border: 1px solid #d5deed;
    border-radius: 999px;
    background: #f8fbff;
    color: #445376;
    font-size: clamp(15px, 1.2vw, 18px);
    font-weight: 600;
    padding: 8px 16px;
}

.hero-card {
    flex: 0 0 42%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.mini {
    border: 1px solid #d4ddec;
    border-radius: 18px;
    background: linear-gradient(180deg, #f8f9fd, #f2f5fb 58%, #eff3fb 100%);
    box-shadow: var(--shadow-sm);
    padding: 18px;
}

.report-mini h3 {
    color: #425072;
    margin-bottom: 12px;
    font-size: clamp(22px, 1.8vw, 28px);
}

.report-mini {
    position: relative;
}

.hero-report {
    padding: 24px;
    border-color: #d3dff2;
    background:
        radial-gradient(220px 140px at 20% 8%, rgba(255, 255, 255, .8), transparent 70%),
        linear-gradient(180deg, #fbfdff, #f1f6fe 62%, #eef4fc);
    box-shadow:
        0 18px 34px rgba(43, 74, 127, .16),
        inset 0 1px 0 rgba(255, 255, 255, .88);
}

.hero-report-head {
    margin-bottom: 16px;
}

.hero-report-kicker {
    display: inline-flex;
    margin-bottom: 8px;
    padding: 6px 10px;
    border-radius: 999px;
    background: #eaf3ff;
    color: #3d6499;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.hero-score-ring {
    position: relative;
    display: grid;
    place-items: center;
    width: 168px;
    height: 168px;
    margin: 4px auto 16px;
    border-radius: 50%;
    background:
        radial-gradient(circle at center, #f8fbff 0 56%, transparent 57%),
        conic-gradient(#68bbb6 0 68%, #d7e3f2 68% 100%);
    box-shadow:
        inset 0 0 0 10px rgba(255, 255, 255, .92),
        0 12px 24px rgba(44, 76, 131, .12);
    animation: scoreFloat 3.8s ease-in-out infinite;
}

@keyframes scoreFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

.hero-score-ring-inner {
    display: flex;
    align-items: baseline;
    gap: 2px;
    color: #2b4672;
}

.hero-score-ring-inner strong {
    font-size: 52px;
    line-height: 1;
}

.hero-score-ring-inner span {
    font-size: 18px;
    font-weight: 800;
}

.hero-report-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 0 0 16px;
}

.hero-report-metric {
    padding: 11px 10px 10px;
    border: 1px solid #dbe5f3;
    border-radius: 15px;
    background: rgba(255, 255, 255, .76);
    text-align: center;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75);
}

.hero-report-metric-k {
    display: block;
    margin-bottom: 5px;
    color: #6481aa;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.hero-report-metric strong {
    color: #294878;
    font-size: 15px;
    line-height: 1.2;
}

.proof-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 22px;
}

.proof-strip-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 18px 20px;
    border: 1px solid #d7e1f2;
    border-radius: 20px;
    background:
        radial-gradient(280px 120px at 10% 10%, rgba(105, 187, 183, .12), transparent 70%),
        linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(245, 249, 255, .94));
    box-shadow: 0 16px 28px rgba(40, 73, 128, .08);
}

.proof-strip-item strong {
    color: #294c7f;
    font-size: 18px;
}

.proof-strip-item span {
    color: #5a6b87;
    font-size: 15px;
    line-height: 1.5;
    font-weight: 600;
}

.metric {
    margin-bottom: 10px;
}

.metric-line {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 6px;
    color: #5a6783;
}

.metric-line span {
    font-weight: 700;
    letter-spacing: .05em;
    font-size: clamp(12px, 1.1vw, 14px);
}

.metric-line b {
    color: #2c3b5f;
    font-size: clamp(30px, 2vw, 36px);
}

.metric-line b span {
    font-size: .62em;
    font-weight: 600;
}

.bar {
    height: 12px;
    background: #dde3ef;
    border-radius: 999px;
    overflow: hidden;
}

.bar i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #6fbdb9, #88d0ce);
}

.bar .b1 {
    width: 72%;
}

.bar.orange i {
    background: linear-gradient(90deg, #ddaa6f, #e8bc8a);
}

.bar.orange .b2 {
    width: 38%;
}

.mini-checks {
    list-style: none;
    margin: 14px 0 0;
    padding: 0;
    border: 1px solid #d6deec;
    border-radius: 14px;
    background: #fbfcff;
}

.mini-checks li {
    position: relative;
    padding: 12px 12px 12px 34px;
    font-size: clamp(14px, 1.1vw, 16px);
    line-height: 1.4;
    color: #445273;
    border-bottom: 1px solid #e2e7f2;
}

.mini-checks li:last-child {
    border-bottom: 0;
}

.mini-checks li::before {
    content: "";
    position: absolute;
    left: 12px;
    top: 15px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.mini-checks li.ok::before {
    background: #69bbb7;
}

.mini-checks li.warn::before {
    background: #d8a062;
}

.promo-badge {
    position: relative;
    margin: 12px auto 0;
    width: 196px;
    border-radius: 24px 24px 16px 16px;
    border: 4px solid #ffffff;
    background: linear-gradient(165deg, #5fb6e6 0%, #2d86c2 45%, #2f77b4 100%);
    box-shadow:
        0 18px 32px rgba(35, 82, 160, .38),
        0 0 0 2px rgba(147, 198, 239, .85);
    overflow: hidden;
    z-index: 3;
    animation: promoPulse 2.4s ease-in-out infinite;
}

.promo-click {
    display: block;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

.promo-click:hover {
    filter: brightness(1.04);
}

.promo-under-cta {
    margin-top: 10px;
    display: flex;
    justify-content: center;
}

.promo-head {
    background: linear-gradient(180deg, rgba(255, 255, 255, .24), rgba(255, 255, 255, .08));
    color: #f6feff;
    text-align: center;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.15;
    padding: 10px 10px 7px;
    text-shadow: 0 1px 0 rgba(16, 62, 114, .5);
}

.promo-ribbon {
    position: absolute;
    top: 8px;
    right: 10px;
    width: 22px;
    height: 16px;
    background: linear-gradient(180deg, #ffb36a, #e9964f);
    border-radius: 4px 4px 2px 2px;
    transform: rotate(34deg);
    box-shadow: 0 3px 8px rgba(166, 94, 34, .35);
}

.promo-ribbon::after {
    content: "";
    position: absolute;
    right: -5px;
    top: 0;
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 6px solid #e9964f;
}

.promo-ribbon::before {
    content: "";
    position: absolute;
    left: 3px;
    top: 5px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .85);
}

.promo-price {
    text-align: center;
    font-size: 52px;
    line-height: 1;
    letter-spacing: -.02em;
    color: #ffffff;
    font-weight: 900;
    text-shadow: 0 2px 8px rgba(14, 53, 108, .55);
    padding: 12px 10px 8px;
}

.promo-foot {
    display: flex;
    justify-content: center;
    align-items: baseline;
    gap: 12px;
    padding: 0 10px 12px;
    color: #e8f1ff;
    font-size: 18px;
    font-weight: 800;
}

.promo-foot .old {
    text-decoration: line-through;
    opacity: .9;
}

.promo-foot .off {
    color: #ffffff;
    background: rgba(245, 163, 86, .92);
    border: 1px solid rgba(255, 211, 166, .9);
    border-radius: 999px;
    padding: 1px 7px;
    line-height: 1.4;
}

.promo-footer {
    padding: 0 10px 12px;
    color: #e8f1ff;
    font-size: 10px;
    font-weight: 500;
}

@keyframes promoPulse {

    0%,
    100% {
        transform: translateY(0) scale(1);
        box-shadow:
            0 18px 32px rgba(35, 82, 160, .38),
            0 0 0 2px rgba(147, 198, 239, .85);
    }

    50% {
        transform: translateY(-1px) scale(1.02);
        box-shadow:
            0 24px 38px rgba(35, 82, 160, .5),
            0 0 0 4px rgba(178, 218, 248, .65);
    }
}

.grid3,
.grid2 {
    display: grid;
    gap: 22px;
    margin-top: 24px;
}

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

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

.steps .card,
.features .card {
    min-height: 205px;
}

.feature-card {
    position: relative;
    overflow: hidden;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.feature-card::after {
    content: "";
    position: absolute;
    right: -18px;
    top: -18px;
    width: 86px;
    height: 86px;
    border-radius: 24px;
    background: radial-gradient(circle, rgba(120, 202, 197, .28), rgba(120, 202, 197, 0));
}

.feature-card:hover {
    transform: translateY(-3px);
    border-color: #c9daf1;
    box-shadow: 0 22px 34px rgba(42, 74, 127, .14);
}

.feature-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-bottom: 16px;
    border-radius: 14px;
    background: linear-gradient(180deg, #e5f1ff, #d7e8ff);
    color: #355a90;
    font-size: 16px;
    font-weight: 900;
    letter-spacing: .04em;
}

.steps h2,
.features h2 {
    font-size: clamp(23px, 1.8vw, 29px);
    line-height: 1.22;
    margin-bottom: 10px;
}

.steps .muted,
.features .muted {
    font-size: clamp(16px, 1.2vw, 19px);
}

.num {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 8px;
    background: linear-gradient(180deg, #7ca5e7, #5c84d2);
    color: #fff;
    font-size: 22px;
    font-weight: 700;
    transform: translateY(-2px);
}

.num.teal {
    background: linear-gradient(180deg, #78cac5, #59aea8);
}

.num.orange {
    background: linear-gradient(180deg, #e8b17f, #d39058);
}

.home-title {
    margin-top: 58px;
    text-align: center;
}

.home-title h2 {
    font-size: clamp(34px, 2.8vw, 44px);
}

.insight-shell {
    margin-top: 28px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
}

.insight-shell-copy {
    max-width: 62%;
}

.insight-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    max-width: 34%;
}

.app-banner {
    position: relative;
    overflow: hidden;
    margin-top: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 24px 28px;
    border: 1px solid #c8daf4;
    background:
        linear-gradient(180deg, #f8fcff 0%, #eef5ff 62%, #f4f9ff 100%),
        radial-gradient(360px 170px at 12% 20%, rgba(109, 190, 186, .20), transparent 70%),
        radial-gradient(440px 200px at 86% 76%, rgba(86, 152, 231, .24), transparent 72%);
    box-shadow: 0 20px 34px rgba(45, 91, 171, .18);
}

.app-banner-copy {
    position: relative;
    z-index: 2;
    max-width: 60%;
}

.app-banner-visual {
    position: relative;
    z-index: 2;
    flex: 0 0 32%;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 160px;
    padding: 18px 20px;
    border: 1px solid rgba(200, 218, 244, .9);
    border-radius: 20px;
    background:
        radial-gradient(240px 100px at 20% 10%, rgba(105, 187, 183, .10), transparent 70%),
        linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(241, 246, 255, .92));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .88),
        0 16px 28px rgba(45, 91, 171, .14);
    transition: transform .14s ease, box-shadow .14s ease, filter .14s ease;
}

.app-banner-visual img {
    width: min(100%, 300px);
    height: auto;
    display: block;
}

.app-banner-visual:hover {
    transform: translateY(-1px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .88),
        0 14px 24px rgba(45, 91, 171, .12);
    filter: brightness(1.01);
}

.app-banner-copy h2 {
    margin-bottom: 8px;
}

.app-banner-copy .muted {
    font-size: clamp(16px, 1.15vw, 20px);
}

.app-banner-actions {
    margin-top: 12px;
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.app-banner-link,
.report-inline-link {
    color: #45669d;
    font-size: 15px;
    font-weight: 800;
    text-decoration: none;
}

.app-banner-link:hover,
.report-inline-link:hover {
    color: #28497f;
    text-decoration: underline;
}

.app-banner-question {
    margin-top: 10px;
    color: #3f5d8f;
    font-size: clamp(14px, 1vw, 18px);
    font-weight: 700;
}

.app-banner-btn {
    font-size: clamp(14px, 1vw, 18px);
    padding: 10px 16px;
    border-radius: 14px;
    border-color: #c8daf4 !important;
    background: linear-gradient(180deg, #ffffff, #f1f6ff);
    color: #2f4f86 !important;
    box-shadow: 0 12px 22px rgba(45, 91, 171, .18);
}

.faq-wrap {
    margin-top: 58px;
}

.faq-head {
    text-align: center;
    margin-bottom: 18px;
}

.faq-head h2 {
    font-size: clamp(34px, 2.8vw, 44px);
}

.faq-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.faq-item {
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(248, 251, 255, .92));
    border: 1px solid #d8e2f2;
}

.faq-item h3 {
    font-size: clamp(20px, 1.5vw, 24px);
    margin-bottom: 8px;
}

.faq-item .muted {
    font-size: clamp(15px, 1.1vw, 18px);
}

.cta-bottom {
    margin-top: 48px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    padding: 28px;
    border-radius: 22px;
    border: 1px solid #c7d9f3;
    background:
        radial-gradient(420px 180px at 20% 10%, rgba(105, 187, 183, .18), transparent 65%),
        radial-gradient(460px 220px at 85% 80%, rgba(87, 151, 232, .24), transparent 68%),
        linear-gradient(165deg, #f7fbff 0%, #edf4ff 60%, #f3f8ff 100%);
    box-shadow: 0 22px 36px rgba(45, 91, 171, .22);
}

.cta-bottom-copy h2 {
    margin-bottom: 8px;
}

.cta-bottom-copy .muted {
    font-size: clamp(16px, 1.2vw, 20px);
}

.cta-bottom-meta {
    margin-top: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tag {
    padding: 7px 12px;
    border-radius: 999px;
    border: 1px solid #cddcf3;
    background: rgba(255, 255, 255, .78);
    color: #43608d;
    font-size: 13px;
    font-weight: 700;
}

.cta-bottom-action {
    min-width: 280px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.cta-strong {
    width: 100%;
    min-height: 76px;
    justify-content: center;
    text-align: center;
}

.cta-price {
    font-size: 34px;
    line-height: 1;
    color: #224072;
    font-weight: 900;
    text-align: center;
}

.cta-price span {
    margin-left: 6px;
    font-size: .45em;
    font-weight: 700;
    color: #546c95;
}

.cta-crossapp {
    margin-top: 20px;
    border-color: #f0d4b1;
    background:
        radial-gradient(420px 180px at 16% 12%, rgba(255, 202, 132, .2), transparent 65%),
        radial-gradient(460px 220px at 87% 86%, rgba(243, 168, 105, .25), transparent 68%),
        linear-gradient(165deg, #fffaf3 0%, #fff4e5 58%, #fff9ef 100%);
    box-shadow: 0 18px 30px rgba(178, 121, 58, .2);
}

.cta-crossapp .cta-bottom-copy h2 {
    color: #7b4a16;
}

.cta-crossapp .cta-bottom-copy .muted {
    color: #7b5b34;
}

.cta-crossapp .tag {
    border-color: #f1d8bc;
    color: #75512b;
    background: rgba(255, 255, 255, .84);
}

.cta-crossapp-btn {
    width: 100%;
    min-height: 68px;
    border-radius: 16px;
    border: 1px solid #efcda4;
    background: linear-gradient(180deg, #f4b56d, #e6a157);
    color: #4a2c0b !important;
    font-weight: 800;
    box-shadow: 0 10px 20px rgba(189, 123, 42, .28);
}

.cta-crossapp-btn:hover {
    border-color: #e7bf90;
    background: linear-gradient(180deg, #efae64, #dd9950);
}

.with-ico {
    position: relative;
    padding-left: 52px;
}

.with-ico::before {
    content: "";
    position: absolute;
    left: 0;
    top: 6px;
    width: 36px;
    height: 36px;
    border-radius: 11px;
    background: linear-gradient(180deg, #f4f7ff, #dfe8f8);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), var(--shadow-sm);
}

.with-ico.doc::after,
.with-ico.lens::after,
.with-ico.flash::after {
    position: absolute;
    left: 10px;
    top: 12px;
    font-size: 18px;
}

.with-ico.doc::after {
    content: "📄";
}

.with-ico.lens::after {
    content: "🔍";
}

.with-ico.flash::after {
    content: "⚡";
}

.mini-lines .line {
    height: 10px;
    border-radius: 999px;
    margin: 9px 0;
    background: linear-gradient(90deg, rgba(60, 105, 190, .25), rgba(60, 105, 190, .08));
}

.mini-lines.lite {
    margin-top: 12px;
}

.mini-lines.lite .line:nth-child(1) {
    width: 76%;
}

.mini-lines.lite .line:nth-child(2) {
    width: 53%;
}

.analyze-page {
    max-width: 1120px;
    margin: 6px auto 0;
    padding: 0;
    border-radius: 28px;
    border-color: #d6deef;
    background: linear-gradient(180deg, #ffffff 0%, #fafcff 78%, #f6f9fe 100%);
    box-shadow:
        0 22px 44px rgba(45, 71, 124, .13),
        0 1px 0 rgba(255, 255, 255, .92) inset;
    overflow: hidden;
}

.analyze-card {
    padding: 34px 34px 22px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .98), #fcfdff 100%);
}

.analyze-page h1 {
    margin-bottom: 10px;
    font-size: clamp(38px, 3.3vw, 58px);
    line-height: 1.07;
    letter-spacing: -.02em;
}

.analyze-topline {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    color: #4a5a7d;
    font-size: clamp(17px, 1.15vw, 30px);
    font-weight: 500;
    margin-bottom: 14px;
}

.analyze-topline span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.trust-ico {
    font-size: .86em;
    transform: translateY(-1px);
}

.analyze-tip {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid #d8e2f2;
    border-radius: 15px;
    background: linear-gradient(180deg, #f4f7fc, #edf2fb);
    color: #4e5d7e;
    font-size: clamp(16px, 1.05vw, 21px);
    font-weight: 500;
    padding: 13px 15px;
    margin-bottom: 14px;
}

.tip-emphasis {
    color: #215db4;
    font-weight: 800;
}

.tip-ico {
    font-size: 1.1em;
    transform: translateY(-1px);
}

.analyze-form label {
    margin: 11px 0 7px;
    font-size: clamp(17px, 1.05vw, 26px);
    color: #2f3d60;
    letter-spacing: -.01em;
}

.email-capture-card {
    margin: 6px 0 14px;
    padding: 13px 14px 11px;
    border: 1px solid #cfe2ff;
    border-radius: 14px;
    background: linear-gradient(180deg, #f4f9ff, #edf5ff);
}

.email-capture-card label {
    display: block;
    margin-top: 0;
    color: #1f4f90;
    font-weight: 800;
}

.email-capture-help {
    margin: 7px 2px 0;
    color: #4b6798;
    font-size: 12px;
    font-weight: 700;
}

.analyze-form input[type="email"],
.analyze-form input[type="text"],
.analyze-form textarea {
    border-color: #d3ddef;
    border-radius: 13px;
    background: #f7f9fe;
    font-size: clamp(16px, 1vw, 23px);
    color: #2f3f61;
    padding: 12px 14px;
}

.analyze-form textarea {
    min-height: 120px;
    line-height: 1.5;
}

.analyze-form input::placeholder,
.analyze-form textarea::placeholder {
    color: #9aa7c2;
}

.analyze-form input[type="email"]:invalid {
    border-color: #e0b4bf;
    background: #fff8fa;
}

.analyze-form input[type="email"]:focus,
.analyze-form input[type="text"]:focus {
    border-color: #7ea8e3;
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(76, 128, 211, .14);
}

.analyze-form input[type="text"].is-invalid {
    border-color: #d86a83;
    background: #fff8fa;
}

.analyze-form input[type="text"].is-valid {
    border-color: #74bc94;
    background: #f6fffa;
}

.analyze-or {
    margin: 22px 0 20px;
    color: #215db4;
    font-size: 15px;
    letter-spacing: .08em;
}

.analyze-file-input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}

.analyze-file-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 9px;
    margin-top: 2px;
    border: 1px solid #d5dff1;
    border-radius: 15px;
    background: linear-gradient(180deg, #f7faff, #f1f5fd);
    color: #334769;
    font-size: clamp(16px, 1.05vw, 23px);
    line-height: 1.35;
    padding: 13px 16px;
    cursor: pointer;
    transition: .14s ease;
}

.analyze-file-label-copy {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 auto;
    min-width: 0;
}

.file-browse-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 11px;
    border-radius: 999px;
    border: 1px solid #d0d9ea;
    background: linear-gradient(180deg, #ffffff, #eef3fb);
    color: #3a4f77;
    font-size: 13px;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
    margin-left: auto;
    box-shadow: 0 3px 8px rgba(63, 88, 138, .15);
}

.analyze-file-label:hover {
    border-color: #9ab8e9;
    background: linear-gradient(180deg, #f3f8ff, #eaf2ff);
}

.quote-input-card {
    border-style: dashed;
}

.quote-input-card.has-file {
    border-color: #b9d6f4;
    background: linear-gradient(180deg, #f7fbff, #f2f8ff);
}

.analyze-file-label .tip-ico {
    margin-right: 2px;
}

.analyze-file-label .file-action {
    margin-right: 4px;
}

.analyze-file-selected {
    margin: 8px 2px 0;
    color: #5c6f95;
    font-size: clamp(13px, .9vw, 16px);
    font-weight: 600;
}

.analyze-file-selected.is-selected {
    color: #215db4;
}

.analyze-file-hint {
    margin: 6px 2px 0;
    color: #7a88a8;
    font-size: 12px;
    font-weight: 600;
}

.analyze-file-preview-msg {
    margin: 7px 2px 0;
    min-height: 1.2em;
    font-size: 12px;
    font-weight: 700;
    color: #667ba6;
}

.analyze-file-preview-msg.is-loading {
    color: #3d61a8;
}

.analyze-file-preview-msg.is-ok {
    color: #1f7a4b;
}

.analyze-file-preview-msg.is-warn {
    color: #8a6200;
}

.analyze-file-preview-msg.is-error {
    color: #9c2947;
}

.third-quote-toggle {
    border: 1px solid #d8d0f2;
    border-radius: 14px;
    background: linear-gradient(180deg, #f8f4ff, #f3edff);
    padding: 10px 12px;
    cursor: pointer;
    transition: .15s ease;
}

.third-quote-toggle input {
    transform: scale(1.18);
}

.third-quote-toggle-copy {
    display: inline-flex;
    flex-direction: column;
    gap: 2px;
    color: #4c4185;
}

.third-quote-toggle-copy b {
    font-size: 15px;
    line-height: 1.2;
}

.third-quote-toggle-copy small {
    font-size: 12px;
    color: #6b619f;
}

.third-quote-toggle.is-active {
    border-color: #c6b4f1;
    background: linear-gradient(180deg, #f4ecff, #eee3ff);
    box-shadow: 0 8px 18px rgba(113, 84, 189, .14);
}

.analyze-actions {
    margin-top: 45px !important;
    justify-content: flex-start !important;
    gap: 10px;
    flex-wrap: wrap;
}

.analyze-submit {
    min-width: 390px;
    min-height: 62px;
    font-size: clamp(19px, 1.3vw, 29px);
    padding: 12px 28px;
    border-width: 2px;
    border-color: #b2d2f6;
    border-radius: 16px;
    box-shadow:
        0 10px 18px rgba(52, 98, 180, .24),
        0 1px 0 rgba(255, 255, 255, .6) inset;
}

.analyze-test {
    min-height: 62px;
    border-radius: 16px;
    padding: 12px 24px;
    font-size: clamp(17px, 1.05vw, 22px);
}

.analyze-back {
    min-height: 62px;
}

.analyze-actions .btn.ghost {
    font-size: clamp(16px, 1vw, 21px);
    border-radius: 16px;
    border: 1px solid #d5dff1;
    color: #2f3e60;
    padding: 11px 20px;
    box-shadow: 0 6px 14px rgba(54, 83, 136, .12);
}

.analyze-marketing {
    margin-top: 12px;
    color: #5f6f8f;
    font-size: clamp(13px, .95vw, 16px);
    font-weight: 600;
    line-height: 1.45;
}

.analyze-legal {
    margin-top: 4px;
    font-size: clamp(11px, .8vw, 14px);
    color: #8d99b2;
    line-height: 1.45;
}

.analyze-benefits {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    border-top: 1px solid #dce4f3;
    background: linear-gradient(180deg, #eef3fb, #e9eff9);
    padding: 12px 18px 13px;
}

.benefit-col {
    padding: 8px 14px;
}

.benefit-col+.benefit-col {
    border-left: 1px solid #d9e2f2;
}

.benefit-item {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #37486d;
    font-size: clamp(16px, 1vw, 20px);
    font-weight: 600;
    line-height: 1.35;
}

.benefit-item+.benefit-item {
    margin-top: 8px;
}

.benefit-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 23px;
    height: 23px;
    border-radius: 50%;
    background: linear-gradient(180deg, #edf4ff, #dce9fd);
    color: #3e639f;
    font-size: 14px;
    line-height: 1;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85);
}

.form label {
    display: block;
    margin: 14px 0 8px;
    color: #425173;
    font-weight: 700;
}

.form input[type="email"],
.form textarea,
.form input[type="file"] {
    width: 100%;
    border: 1px solid #d6deee;
    border-radius: 12px;
    background: #fbfcff;
    color: #283757;
    padding: 12px;
    font: inherit;
    outline: none;
}

.form input[type="email"]:focus,
.form textarea:focus,
.form input[type="file"]:focus {
    border-color: #85a9e3;
    box-shadow: 0 0 0 4px rgba(68, 124, 214, .14);
}

.form textarea {
    min-height: 170px;
    resize: vertical;
}

.or {
    margin: 14px 0;
    text-align: center;
    color: #68799c;
    font-weight: 700;
    position: relative;
}

.or::before,
.or::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 40%;
    height: 2px;
    background: #215db4;
}

.or::before {
    left: 0;
}

.or::after {
    right: 0;
}

.or.analyze-or {
    color: #215db4;
}

.or.analyze-or::before,
.or.analyze-or::after {
    background: #215db4;
}

.row {
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.alert {
    border: 1px solid #d4deed;
    background: #f8fbff;
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 12px;
}

.alert.warn {
    border-color: #efce90;
    background: #fff7e8;
}

.alert.bad {
    border-color: #ebb8c4;
    background: #fff2f5;
}

.alert.ok {
    border-color: #a8dfc8;
    background: #ecfbf3;
}

.loader {
    display: flex;
    gap: 8px;
    margin-top: 14px;
}

.loader div {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: rgba(62, 113, 205, .35);
    animation: pulse 1.2s infinite ease-in-out;
}

.loader div:nth-child(2) {
    animation-delay: .15s;
}

.loader div:nth-child(3) {
    animation-delay: .3s;
}

@keyframes pulse {

    0%,
    80%,
    100% {
        transform: scale(.6);
        opacity: .5;
    }

    40% {
        transform: scale(1);
        opacity: 1;
    }
}

.scores {
    display: flex;
    gap: 10px;
}

.score {
    min-width: 130px;
    border: 1px solid #d6deed;
    border-radius: 14px;
    background: #f8fbff;
    padding: 12px;
}

.score .k {
    color: #60729a;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.score .v {
    margin-top: 4px;
    font-size: 24px;
    font-weight: 800;
    color: #2b3b5f;
}

.score .t {
    margin-top: 3px;
    font-size: 12px;
    color: #687a9f;
    font-weight: 700;
}

.list {
    margin: 0;
    padding-left: 19px;
}

.list li {
    margin: 8px 0;
}

.chips {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.chip {
    border: 1px solid #dbe3f1;
    border-radius: 13px;
    padding: 12px 14px;
    background: #fbfdff;
}

.chip-title {
    font-weight: 800;
}

.chip-sub {
    margin-top: 6px;
    color: #63728f;
    font-size: 13px;
}

.precheck-card {
    max-width: 980px;
    margin: 8px auto 0;
}

.precheck-intro {
    margin: 8px 0 14px;
}

.precheck-grid {
    margin-top: 10px;
    gap: 12px;
}

.precheck-preview {
    margin-top: 14px;
    padding: 16px;
    border-radius: 14px;
}

.precheck-preview .chip-title {
    margin-bottom: 8px;
}

.precheck-preview .muted {
    font-size: 15px;
}

.precheck-preview-text {
    white-space: normal;
    line-height: 1.5;
}

.precheck-actions {
    margin-top: 16px;
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.precheck-legal {
    margin-top: 10px;
    color: #7a88a4;
}

.report-page {
    max-width: 1120px;
    margin: 0 auto;
}

.report-access h2 {
    margin-bottom: 6px;
}

.report-progress {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 12px 0 18px;
    padding: 16px 18px;
    border: 1px solid #d7e1f2;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(251, 253, 255, .98), rgba(243, 248, 255, .94));
}

.report-progress-visual {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 168px;
}

.report-spinner {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 3px solid rgba(105, 187, 183, .18);
    border-top-color: #69bbb7;
    animation: reportSpin .9s linear infinite;
    flex: 0 0 auto;
}

.report-progress-bar {
    position: relative;
    display: block;
    flex: 1 1 auto;
    height: 10px;
    border-radius: 999px;
    overflow: hidden;
    background: #dbe5f3;
}

.report-progress-bar i {
    display: block;
    width: 46%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #69bbb7, #7d9ff0);
    animation: reportLoad 1.4s ease-in-out infinite;
}

.report-progress-copy {
    min-width: 0;
}

.report-progress-text {
    margin: 0 0 4px;
    color: #35507d;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
}

.report-progress[data-state="running"] .report-spinner {
    border-top-color: #4f85e0;
}

.report-progress[data-state="running"] .report-progress-bar i {
    background: linear-gradient(90deg, #4f85e0, #69bbb7);
}

.report-progress[data-state="done"] .report-spinner {
    animation: none;
    border-color: #69bbb7;
    background: radial-gradient(circle at center, #69bbb7 0 38%, transparent 39%);
}

.report-progress[data-state="done"] .report-progress-bar i {
    width: 100%;
    animation: none;
    background: linear-gradient(90deg, #69bbb7, #88d0ce);
}

.report-progress[data-state="failed"] .report-spinner,
.report-progress[data-state="delayed"] .report-spinner {
    animation: none;
    border-color: rgba(213, 154, 86, .26);
    border-top-color: #d59a56;
}

.report-progress[data-state="failed"] .report-progress-bar i,
.report-progress[data-state="delayed"] .report-progress-bar i {
    background: linear-gradient(90deg, #d59a56, #e4bc8a);
}

@keyframes reportSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes reportLoad {
    0% { transform: translateX(-65%); }
    50% { transform: translateX(95%); }
    100% { transform: translateX(-65%); }
}

.report-generated {
    margin-top: 8px;
    color: #6f81a3;
}

.report-tools {
    margin-top: 14px;
    gap: 10px;
    justify-content: flex-start;
    flex-wrap: wrap;
}

.report-next-steps {
    margin-top: 22px;
    border-color: #d9e4f5;
    background: linear-gradient(180deg, rgba(250, 252, 255, .98), rgba(245, 249, 255, .96));
}

.report-next-steps h2 {
    margin-bottom: 6px;
}

.report-next-tools {
    align-items: center;
}

.report-page .hero {
    padding: 34px;
    border-color: #bfd1ee;
    background:
        radial-gradient(600px 220px at 10% 8%, rgba(111, 179, 226, .18), transparent 62%),
        radial-gradient(760px 260px at 100% 0%, rgba(120, 196, 192, .16), transparent 64%),
        linear-gradient(180deg, #f8fbff 0%, #eff5ff 100%);
}

.report-page h1 {
    font-size: clamp(32px, 2.5vw, 44px);
}

.report-page .muted {
    font-size: clamp(15px, 1.05vw, 18px);
}

.report-page .card {
    border-radius: 18px;
    border: 1px solid #cdd9ee;
    background: linear-gradient(180deg, #ffffff, #fafdff);
    box-shadow:
        0 10px 24px rgba(44, 72, 124, .10),
        0 1px 0 rgba(255, 255, 255, .92) inset;
    padding: 22px;
}

.report-page .card+.card {
    margin-top: 16px;
}

.report-page .card h2 {
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #e1e8f5;
}

.report-page .score {
    min-width: 170px;
    border: 1px solid #bdd1ee;
    background: linear-gradient(180deg, #ffffff, #eef5ff);
    box-shadow: 0 8px 16px rgba(44, 86, 156, .12);
}

.report-page .score .k {
    color: #4b628f;
    font-size: 12px;
}

.report-page .score .v {
    font-size: 34px;
    color: #1f4f92;
}

.report-page .score .t {
    color: #4f6897;
}

.report-page .grid2 {
    gap: 18px;
    align-items: stretch;
    margin-bottom: 28px;
}

.report-page .grid2>.card {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.report-page .chips {
    gap: 12px;
}

.report-page .chip {
    border-color: #d2ddf0;
    background: linear-gradient(180deg, #fdfefe, #f6faff);
}

.report-page .risk li {
    padding: 14px 0;
    border-bottom: 1px solid #dfe7f4;
}

.report-page .q li {
    margin: 10px 0;
}

.example-page .example-info-wrap {
    margin-bottom: 18px;
}

.example-page .example-info-card {
    border-color: #d7e0ef;
    background: linear-gradient(180deg, #ffffff, #f7faff);
}

.example-page .example-inline-title {
    margin-top: 14px;
}

.example-page .example-report-wrap {
    border: 1px dashed #bfd0eb;
    border-radius: 18px;
    padding: 14px;
    background: linear-gradient(180deg, rgba(233, 242, 255, .42), rgba(242, 248, 255, .18));
}

.example-page .example-report-head {
    border-color: #bfd1ee;
    background: linear-gradient(180deg, #f2f7ff, #edf4ff);
}

.example-page .example-report-head h2 {
    margin-bottom: 8px;
}

.badge {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    border: 1px solid #d6deec;
    background: #f8fbff;
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 800;
}

.badge.ok {
    color: #177850;
    border-color: #a9dec7;
    background: #ecfbf3;
}

.badge.warn {
    color: #8a5a00;
    border-color: #efcf92;
    background: #fff7e8;
}

.badge.bad {
    color: #8f2644;
    border-color: #ebb8c4;
    background: #fff2f5;
}

.badge.info {
    color: #3158b9;
    border-color: #b7c9ef;
    background: #eef3ff;
}

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

.risk li {
    display: flex;
    gap: 10px;
    padding: 12px 0;
    border-bottom: 1px solid #e2e8f2;
}

.risk li:last-child {
    border-bottom: 0;
}

.q {
    margin: 0;
    padding-left: 19px;
}

.q li {
    margin: 9px 0;
}

.statusbox {
    margin-top: 12px;
    color: #5b6f95;
    font-weight: 700;
}

.footer {
    margin-top: 42px;
    border-top: 1px solid #dce2ef;
    background: rgba(244, 247, 252, .94);
}

.footer .container {
    min-height: 90px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.footer .muted {
    font-size: clamp(15px, 1.1vw, 18px);
    color: #5f6f93;
}

.footer-legal a {
    color: #345995;
    font-weight: 700;
    text-decoration: none;
}

.footer-legal a:hover {
    text-decoration: underline;
}

.footer-left {
    text-align: left;
}

.footer-right {
    text-align: right;
}

.legal-page {
    max-width: 980px;
    margin: 6px auto 0;
}

.legal-head {
    margin-bottom: 10px;
}

.legal-updated {
    margin-top: 6px;
    color: #6b7d9f;
    font-size: 14px;
}

.legal-section {
    margin-top: 12px;
    padding: 16px 18px;
    border: 1px solid #dce4f2;
    border-radius: 14px;
    background: linear-gradient(180deg, #ffffff, #f9fbff);
}

.legal-section h2 {
    margin: 0 0 8px;
    font-size: clamp(19px, 1.3vw, 25px);
}

.legal-section p {
    color: #3e4f72;
    font-size: 16px;
}

.legal-section p + p {
    margin-top: 8px;
}

.legal-section ul {
    margin: 8px 0 0;
    padding-left: 20px;
    color: #3e4f72;
}

.legal-section li {
    margin: 6px 0;
}

@media (max-width: 1100px) {
    .hero-top {
        flex-direction: column;
    }

    .hero-copy,
    .hero-card {
        max-width: 100%;
        flex: 1 1 auto;
    }

    .hero-proof-grid,
    .proof-strip {
        grid-template-columns: 1fr;
    }

    .hero-proof-grid-side {
        grid-template-columns: 1fr;
    }

    .grid3,
    .grid2,
    .chips {
        grid-template-columns: 1fr;
    }

    .hero-title-row {
        flex-direction: row;
        align-items: center;
    }

    .logo-panel {
        flex: 0 0 132px;
        width: 132px;
    }

    .hero-title-copy {
        flex: 1 1 auto;
    }

    .promo-price {
        font-size: 39px;
    }

    .faq-list {
        grid-template-columns: 1fr;
    }

    .app-banner {
        flex-direction: column;
        align-items: flex-start;
        overflow: visible;
        background:
            linear-gradient(180deg, rgba(248, 252, 255, .98) 0%, rgba(243, 249, 255, .94) 100%),
            radial-gradient(300px 150px at 12% 20%, rgba(109, 190, 186, .16), transparent 70%),
            linear-gradient(170deg, #f8fcff 0%, #eef5ff 62%, #f4f9ff 100%);
    }

    .app-banner-copy {
        max-width: 100%;
        padding-right: 0;
    }

    .app-banner-visual {
        width: 100%;
        min-height: 140px;
        flex: 1 1 auto;
        padding: 16px;
    }

    .app-banner-visual img {
        width: min(100%, 260px);
    }

    .app-banner::after {
        display: none;
    }

    .report-page .score {
        min-width: 0;
    }

    .report-progress {
        flex-direction: column;
        align-items: flex-start;
    }

    .report-progress-visual {
        width: 100%;
        min-width: 0;
    }

    .insight-shell {
        flex-direction: column;
        align-items: flex-start;
    }

    .insight-shell-copy,
    .insight-badges {
        max-width: 100%;
    }

    .insight-badges {
        justify-content: flex-start;
    }

    .example-page .example-report-wrap {
        padding: 10px;
    }

    .cta-bottom {
        flex-direction: column;
        align-items: flex-start;
    }

    .cta-bottom-action {
        width: 100%;
        min-width: 0;
    }
}

@media (max-width: 780px) {
    body.nav-open {
        overflow: hidden;
    }

    .frame-top,
    .frame-bottom {
        height: 22px;
    }

    .container {
        width: calc(100% - 24px);
    }

    .topbar .container {
        position: relative;
        min-height: 54px;
        padding: 8px 0;
        gap: 10px;
    }

    .brand {
        max-width: calc(100% - 58px);
    }

    .brand-logo {
        width: min(176px, 100%);
    }

    .nav-toggle {
        display: inline-flex;
    }

    .nav {
        position: absolute;
        top: calc(100% + 8px);
        left: 12px;
        right: 12px;
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        padding: 12px;
        border-radius: 16px;
        font-size: 13px;
    }

    .nav.is-open {
        display: flex;
    }

    .nav-main,
    .nav-cta {
        width: 100%;
        justify-content: flex-start;
        flex-direction: column;
        align-items: stretch;
    }

    .nav-main a,
    .nav-btn {
        width: 100%;
        font-size: 13px;
        padding: 10px 12px;
        text-align: center;
    }

    .nav-main a {
        background: rgba(255, 255, 255, .68);
    }

    .nav-toggle[aria-expanded="true"] span:nth-child(1) {
        transform: translateY(6px) rotate(45deg);
    }

    .nav-toggle[aria-expanded="true"] span:nth-child(2) {
        opacity: 0;
    }

    .nav-toggle[aria-expanded="true"] span:nth-child(3) {
        transform: translateY(-6px) rotate(-45deg);
    }

    main.container {
        padding-top: 18px;
    }

    h1 {
        font-size: 38px;
    }

    h2 {
        font-size: 28px;
    }

    .hero {
        padding: 24px;
    }

    .hero-copy h1 {
        font-size: clamp(48px, 12vw, 64px);
        max-width: 12ch;
    }

    .hero-meta-row {
        flex-wrap: wrap;
    }

    .grid3,
    .grid2 {
        gap: 14px;
        margin-top: 16px;
    }

    .home-title,
    .app-banner,
    .faq-wrap,
    .cta-bottom {
        margin-top: 28px;
    }

    .proof-strip {
        margin-top: 16px;
    }

    .hero-lead,
    .muted,
    .steps .muted,
    .features .muted {
        font-size: 16px;
    }

    .hero-score-ring {
        width: 144px;
        height: 144px;
    }

    .hero-score-ring-inner strong {
        font-size: 44px;
    }

    .hero-report-metrics {
        grid-template-columns: 1fr;
    }

    .hero-proof-card,
    .proof-strip-item {
        min-height: 0;
    }

    .btn {
        font-size: 18px;
        width: 100%;
        padding: 13px 18px;
    }

    .cta .btn {
        min-width: 0;
        min-height: 0;
    }

    .cta {
        flex-direction: column;
        align-items: stretch;
    }

    .promo-badge {
        width: 100%;
        max-width: 220px;
        margin: 8px auto 0;
    }

    .hero-promo-under .hero-promo-badge {
        max-width: 100%;
        width: min(430px, 100%);
    }

    .hero-promo-line {
        gap: 10px;
        padding: 8px 12px 6px;
    }

    .hero-promo-badge .promo-price {
        font-size: 34px;
    }

    .hero-promo-badge .promo-foot {
        gap: 8px;
        font-size: 14px;
    }

    .hero-promo-badge .promo-foot .old {
        font-size: 13px;
    }

    .price,
    .bullet {
        font-size: 14px;
    }

    .row {
        flex-direction: column;
        align-items: stretch;
    }

    .row .btn,
    .row a.btn {
        width: 100%;
    }

    .precheck-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .precheck-actions .btn,
    .precheck-actions a.btn {
        width: 100%;
    }

    .report-mini h3 {
        font-size: 22px;
    }

    .metric-line b {
        font-size: 24px;
    }

    .mini-checks li {
        font-size: 14px;
    }

    .steps h2,
    .features h2 {
        font-size: 25px;
    }

    .footer .muted {
        font-size: 13px;
    }

    .footer .container {
        justify-content: center;
        flex-direction: column;
        gap: 6px;
        text-align: center;
    }

    .footer-left,
    .footer-right {
        text-align: center;
    }

    .legal-section p,
    .legal-section li {
        font-size: 15px;
    }

    .analyze-card {
        padding: 24px 18px 20px;
    }

    .analyze-page h1 {
        font-size: 42px;
    }

    .analyze-topline {
        font-size: 17px;
    }

    .analyze-submit {
        min-width: 0;
        width: 100%;
    }

    .analyze-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .analyze-actions .btn,
    .analyze-actions a.btn {
        width: 100%;
    }

    .analyze-benefits {
        grid-template-columns: 1fr;
        padding: 10px 12px;
    }

    .benefit-col {
        padding: 8px;
        border-bottom: 1px solid #dbe3f1;
        border-left: 0;
    }

    .benefit-col:last-child {
        border-bottom: 0;
    }
}

@media (max-width: 620px) {
    .hero-promo-line {
        flex-wrap: wrap;
    }

    .hero-promo-badge .promo-foot {
        justify-content: center;
        flex-wrap: wrap;
    }

    .hero-meta-row {
        gap: 8px;
    }

    .hero-meta-price {
        display: none;
    }
}

/* Comparer visual identity override (distinct from Analyzer) */
:root {
    --blue: #4c5be7;
    --blue-strong: #3f4bcc;
    --teal: #7f4bd7;
    --orange: #f08a31;
    --ok: #46a86a;
    --warn: #d17a2e;
}

html,
body {
    background:
        radial-gradient(920px 340px at -10% 16%, rgba(125, 91, 214, .18), transparent 64%),
        radial-gradient(940px 360px at 110% 26%, rgba(242, 149, 67, .18), transparent 66%),
        radial-gradient(980px 340px at 52% 40%, rgba(188, 198, 245, .22), transparent 70%),
        linear-gradient(180deg, #f8f8ff 0%, #f3f5ff 100%);
}

.frame-top,
.frame-bottom {
    background:
        radial-gradient(200px 80px at 12% 26%, rgba(100, 90, 201, .35), transparent 72%),
        radial-gradient(240px 86px at 78% 20%, rgba(240, 138, 49, .28), transparent 74%),
        linear-gradient(90deg, #2b2442 0%, #322950 48%, #2b2442 100%);
}

.topbar {
    border-bottom-color: rgba(220, 218, 245, .9);
    background: rgba(251, 250, 255, .93);
}

.nav {
    background: linear-gradient(180deg, #f3efff, #ece6ff);
    border-color: #d8cff6;
}

.nav-main a {
    color: #4e3f88;
}

.nav-main a:hover {
    color: #3f326f;
}

.nav-btn-soft {
    background: linear-gradient(180deg, #ffffff, #f4f2ff);
    border-color: #d8d1f3;
    color: #4a3f83;
}

.nav-btn-strong {
    background: linear-gradient(180deg, #f3a14a, #e9822f);
    border-color: #dd7a2a;
    box-shadow: 0 8px 16px rgba(207, 117, 39, .28);
}

.hero {
    background:
        radial-gradient(680px 240px at 18% 10%, rgba(132, 98, 220, .20), transparent 66%),
        radial-gradient(840px 300px at 95% 20%, rgba(242, 153, 76, .18), transparent 70%),
        linear-gradient(180deg, #fbf9ff 0%, #f4f6ff 100%);
}

.hero-copy h1 {
    color: #4a3f86;
}

.btn {
    background: linear-gradient(165deg, #f3a14a 0%, #ea8634 52%, #d97727 100%);
    box-shadow: 0 12px 22px rgba(204, 117, 44, .28);
}

.btn.ghost {
    color: #453b74;
    border-color: #d9d3ef;
}

.analyze-submit {
    border-color: #f0c89f;
    box-shadow:
        0 10px 18px rgba(201, 118, 46, .24),
        0 1px 0 rgba(255, 255, 255, .6) inset;
}

.analyze-file-label:hover {
    border-color: #d5c0f1;
    background: linear-gradient(180deg, #f7f2ff, #f0eaff);
}

.badge.info {
    color: #4f40a2;
    border-color: #cfc6f2;
    background: #f3f0ff;
}

.statusbox {
    color: #5a4d98;
}

@media (prefers-reduced-motion: reduce) {
    .reveal,
    .hero-score-ring,
    .promo-badge {
        animation: none !important;
        transform: none !important;
        opacity: 1 !important;
    }
}

/* Compare page: launch offer badge in landscape format */
.promo-landscape {
    width: min(460px, 100%);
    border-radius: 18px;
    padding-bottom: 2px;
}

.promo-landscape .promo-price {
    font-size: 44px;
    padding-top: 10px;
}

.promo-landscape .promo-foot {
    justify-content: space-between;
    gap: 8px;
    padding-inline: 14px;
    font-size: 16px;
}

.promo-landscape .promo-footer {
    text-align: center;
    font-size: 11px;
}