:root {
    --navy: #061842;
    --navy-2: #0a2661;
    --blue: #075fff;
    --blue-2: #0797ff;
    --green: #00df78;
    --ink: #07183b;
    --muted: #66738c;
    --paper: #f5f8ff;
    --white: #fff;
    --line: #dfe7f5;
    --shadow: 0 28px 80px rgba(5, 31, 88, .13);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: "DM Sans", sans-serif; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
.sales-header {
    width: min(1220px, calc(100% - 40px));
    min-height: 128px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    z-index: 10;
}
.sales-brand img { width: 230px; height: auto; display: block; }
.sales-header nav { display: flex; align-items: center; gap: 28px; color: #54627d; font-size: 13px; font-weight: 700; }
.sales-header nav > a { transition: .2s ease; }
.sales-header nav > a:hover { color: var(--blue); }
.header-button, .outline-button { padding: 12px 18px; border-radius: 12px; }
.header-button { color: white !important; background: linear-gradient(135deg, var(--blue), #0649d8); box-shadow: 0 12px 30px rgba(7, 95, 255, .24); }
.outline-button { color: var(--blue) !important; border: 1px solid #bfcff0; background: rgba(255,255,255,.65); }
main { width: min(1220px, calc(100% - 40px)); margin: auto; }
.sales-hero {
    min-height: 680px;
    padding: 72px 0 96px;
    display: grid;
    grid-template-columns: 1.03fr .97fr;
    align-items: center;
    gap: 72px;
    position: relative;
}
.sales-hero::before {
    content: "";
    width: 650px;
    height: 650px;
    position: absolute;
    right: -330px;
    top: -170px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(7,151,255,.14), transparent 66%);
    pointer-events: none;
}
.sales-eyebrow, .section-title > span, .final-cta > span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--blue);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .15em;
}
.sales-eyebrow::before { content: ""; width: 24px; height: 2px; border-radius: 2px; background: var(--green); }
.sales-hero h1 {
    margin: 19px 0 23px;
    max-width: 700px;
    font: 800 clamp(46px, 5.5vw, 74px)/1.01 "Manrope", sans-serif;
    letter-spacing: -.062em;
}
.sales-hero h1 em {
    color: transparent;
    background: linear-gradient(100deg, var(--blue), #0797ff 60%, var(--green));
    background-clip: text;
    -webkit-background-clip: text;
    font-style: normal;
}
.hero-copy > p { max-width: 650px; margin: 0; color: var(--muted); font-size: 18px; line-height: 1.65; }
.hero-actions { margin-top: 32px; display: flex; align-items: center; gap: 18px; }
.cta {
    min-height: 58px;
    padding: 0 20px 0 25px;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    border-radius: 13px;
    color: white;
    background: linear-gradient(135deg, var(--blue), #0646cc);
    box-shadow: 0 18px 38px rgba(7, 95, 255, .25);
    font-weight: 800;
    transition: .2s ease;
}
.cta:hover { transform: translateY(-2px); box-shadow: 0 22px 45px rgba(7, 95, 255, .32); }
.cta b { color: var(--green); font-size: 21px; }
.hero-actions small { max-width: 150px; color: #8792a8; font-size: 11px; line-height: 1.45; }
.trust-row { margin-top: 35px; display: flex; gap: 18px; flex-wrap: wrap; color: #66748d; font-size: 11px; font-weight: 700; }
.trust-row span::first-letter { color: var(--green); }
.hero-visual { min-height: 520px; position: relative; display: flex; align-items: flex-end; justify-content: center; }
.result-backdrop {
    width: 410px;
    height: 410px;
    position: absolute;
    top: 0;
    right: 5px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,.95) 0 28%, rgba(225,237,255,.82) 55%, rgba(225,237,255,0) 72%);
}
.result-backdrop::before, .result-backdrop::after { content: ""; position: absolute; border-radius: 50%; border: 1px dashed rgba(7,95,255,.17); }
.result-backdrop::before { inset: 22px; }
.result-backdrop::after { inset: 72px; }
.result-backdrop span { width: 46px; position: absolute; bottom: 96px; border-radius: 12px 12px 4px 4px; background: linear-gradient(180deg, rgba(7,151,255,.28), rgba(7,95,255,.08)); }
.result-backdrop span:nth-child(1) { height: 74px; left: 118px; }
.result-backdrop span:nth-child(2) { height: 122px; left: 181px; }
.result-backdrop span:nth-child(3) { height: 172px; left: 244px; }
.profit-preview {
    width: min(390px, 88%);
    padding: 28px;
    position: relative;
    z-index: 2;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 22px;
    color: white;
    background: linear-gradient(145deg, rgba(5,24,66,.97), rgba(7,49,127,.96));
    box-shadow: 0 35px 80px rgba(5,31,88,.27);
    backdrop-filter: blur(14px);
    transform: translateX(-55px);
}
.preview-top { margin-bottom: 28px; display: flex; justify-content: space-between; align-items: center; }
.preview-top > span { color: #8eb8ff; font-size: 9px; font-weight: 800; letter-spacing: .12em; }
.preview-top i { padding: 6px 9px; border-radius: 20px; color: #76f7b4; background: rgba(0,223,120,.12); font-size: 9px; font-style: normal; }
.profit-preview > small { display: block; color: #9eafd0; font-size: 11px; }
.profit-preview > strong { display: block; margin: 4px 0 22px; color: white; font: 800 43px "Manrope"; letter-spacing: -.05em; }
.preview-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.preview-grid div { padding: 14px; border: 1px solid rgba(255,255,255,.1); border-radius: 11px; background: rgba(255,255,255,.05); }
.preview-grid span, .ideal-cost span { display: block; color: #9eafd0; font-size: 9px; }
.preview-grid b { display: block; margin-top: 7px; font-size: 16px; }
.preview-grid div:first-child b { color: var(--green); }
.cost-line { margin-top: 18px; padding: 15px 0; border-top: 1px solid rgba(255,255,255,.1); border-bottom: 1px solid rgba(255,255,255,.1); display: flex; justify-content: space-between; color: #a7b6d3; font-size: 10px; }
.cost-line b { color: white; }
.ideal-cost { margin-top: 16px; padding: 15px; border: 1px solid rgba(0,223,120,.18); border-radius: 11px; background: rgba(0,223,120,.08); }
.ideal-cost strong { display: block; margin-top: 5px; color: var(--green); font-size: 23px; }
.problem-strip {
    margin-bottom: 110px;
    padding: 27px 32px;
    display: grid;
    grid-template-columns: .72fr 1.28fr;
    align-items: center;
    gap: 48px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: white;
    box-shadow: 0 15px 45px rgba(6,32,85,.06);
}
.problem-strip strong { display: flex; align-items: center; gap: 13px; font: 700 17px "Manrope"; }
.problem-strip strong span { width: 34px; height: 34px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 10px; color: white; background: var(--blue); }
.problem-strip p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.6; }
.steps { padding-bottom: 115px; }
.section-title { max-width: 690px; margin-bottom: 42px; }
.section-title h2, .benefits h2, .final-cta h2 { margin: 11px 0 0; font: 800 clamp(31px, 4vw, 48px)/1.1 "Manrope"; letter-spacing: -.045em; }
.step-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.step-grid article { padding: 29px; border: 1px solid var(--line); border-radius: 18px; background: white; box-shadow: 0 15px 40px rgba(6,32,85,.045); transition: .2s ease; }
.step-grid article:hover { transform: translateY(-4px); border-color: #b9cdf6; box-shadow: 0 22px 50px rgba(6,32,85,.09); }
.step-grid i { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 13px; color: white; background: linear-gradient(135deg, var(--blue), var(--blue-2)); box-shadow: 0 10px 24px rgba(7,95,255,.2); font-size: 11px; font-weight: 800; font-style: normal; }
.step-grid h3 { margin: 25px 0 9px; font: 700 18px "Manrope"; }
.step-grid p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.6; }
.benefits { margin-bottom: 100px; padding: 65px; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; border: 1px solid #d5e2fb; border-radius: 28px; background: linear-gradient(135deg, #edf4ff, #f8fbff 55%, #edfff6); }
.benefits h2 { font-size: 39px; }
.benefits > div p { color: var(--muted); line-height: 1.65; }
.benefits ul { margin: 0; padding: 0; list-style: none; }
.benefits li { padding: 19px 0 19px 44px; position: relative; border-bottom: 1px solid #d4e0f2; display: flex; flex-direction: column; gap: 5px; }
.benefits li::before { content: "✓"; width: 28px; height: 28px; position: absolute; left: 0; top: 18px; display: grid; place-items: center; border-radius: 9px; color: #006b39; background: rgba(0,223,120,.16); font-weight: 800; }
.benefits li b { font-size: 14px; }
.benefits li span { color: var(--muted); font-size: 12px; }
.final-cta { margin-bottom: 70px; padding: 70px; position: relative; overflow: hidden; text-align: center; border-radius: 28px; color: white; background: linear-gradient(135deg, #041536, #07317d); box-shadow: var(--shadow); }
.final-cta::after { content: ""; width: 350px; height: 350px; position: absolute; right: -130px; top: -180px; border-radius: 50%; background: radial-gradient(circle, rgba(0,223,120,.2), transparent 65%); }
.final-cta h2 { max-width: 720px; margin: 13px auto 29px; position: relative; z-index: 1; }
.final-cta > span { color: #6da8ff; }
.cta.light { position: relative; z-index: 1; color: var(--navy); background: white; box-shadow: none; }
.cta.light b { color: var(--green); }
.sales-footer { min-height: 78px; padding: 0 max(20px, calc((100% - 1220px)/2)); display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--line); color: #7c889f; background: white; font-size: 11px; }
@media (max-width: 900px) {
    .sales-header nav > a:not(.header-button):not(.outline-button) { display: none; }
    .sales-hero { grid-template-columns: 1fr; padding-top: 50px; gap: 20px; }
    .hero-visual { min-height: 560px; }
    .result-backdrop { left: 50%; right: auto; transform: translateX(-50%); }
    .profit-preview { transform: translateX(-45px); }
    .problem-strip, .benefits { grid-template-columns: 1fr; }
    .step-grid { grid-template-columns: 1fr; }
    .benefits { padding: 38px; gap: 30px; }
}
@media (max-width: 580px) {
    .sales-header, main { width: calc(100% - 24px); }
    .sales-header { min-height: 104px; }
    .sales-brand img { width: 175px; height: auto; }
    .sales-header nav { gap: 9px; }
    .sales-header .header-button { display: none; }
    .sales-hero { padding: 48px 0 65px; }
    .sales-hero h1 { font-size: 42px; }
    .hero-actions { align-items: flex-start; flex-direction: column; }
    .hero-visual { min-height: 475px; }
    .result-backdrop { width: 300px; height: 300px; }
    .result-backdrop span { bottom: 67px; width: 34px; }
    .result-backdrop span:nth-child(1) { height: 50px; left: 85px; }
    .result-backdrop span:nth-child(2) { height: 85px; left: 133px; }
    .result-backdrop span:nth-child(3) { height: 120px; left: 181px; }
    .profit-preview { width: 96%; padding: 22px; transform: none; }
    .problem-strip { margin-bottom: 75px; padding: 22px; gap: 15px; }
    .benefits, .final-cta { padding: 34px 23px; }
    .sales-footer { padding: 20px; gap: 10px; }
}