:root {
  --black: #050505;
  --ink: #10131a;
  --muted: #667085;
  --white: #fff;
  --blue: #168cff;
  --cyan: #54e5ff;
  --yellow: #fafa05;
  --green: #30a05c;
  --line: rgba(255, 255, 255, .15);
  --radius: 24px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--black); font: 16px/1.65 Inter, "Segoe UI", Arial, sans-serif; }
a { color: inherit; }
img { display: block; max-width: 100%; }
.container { width: min(1080px, calc(100% - 40px)); margin-inline: auto; }

.section-dark { position: relative; overflow: hidden; color: #fff; background: radial-gradient(circle at 70% 5%, #123c7d 0, #06132e 24%, #020719 52%, #000 78%); }
.section-black { color: #fff; background: #000; }
.section-light { background: #f6f7f9; }
.glow { position: absolute; border-radius: 50%; filter: blur(80px); pointer-events: none; opacity: .32; }
.glow--one { width: 420px; height: 420px; top: -260px; right: 5%; background: #227eff; }
.glow--two { width: 520px; height: 520px; right: -250px; bottom: -260px; background: #175eff; }

.hero { min-height: 780px; display: grid; align-items: center; text-align: center; }
.hero__inner { position: relative; z-index: 1; padding: 82px 0 90px; }
.eyebrow { margin: 0 0 14px; font-size: 13px; font-weight: 850; letter-spacing: .15em; text-transform: uppercase; }
.eyebrow--blue { color: #0876e2; }
.hero__badge { display: inline-flex; margin: 0 0 22px; padding: 8px 15px; border: 1px solid rgba(87, 239, 142, .55); border-radius: 999px; color: #bfffd5; background: rgba(25, 159, 76, .2); box-shadow: 0 0 28px rgba(53, 220, 117, .12); font-size: 12px; font-weight: 850; letter-spacing: .14em; }
.hero h1 { max-width: 1040px; margin: 0 auto; font-size: clamp(48px, 5.5vw, 72px); font-weight: 700; letter-spacing: -.055em; line-height: 1.04; }
.hero h1 span { color: #56e78a; text-shadow: 0 0 34px rgba(86, 231, 138, .14); }
.hero__promise { margin: 24px auto 0; color: #fff; font-size: clamp(23px, 3vw, 36px); font-weight: 650; letter-spacing: -.035em; line-height: 1.2; }
.hero__copy { max-width: 850px; margin: 24px auto 26px; font-size: 18px; color: #d8deea; }
.hero__copy strong { color: #fff; }
.hero-benefits { width: min(860px, 100%); display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 0 auto 30px; text-align: left; }
.hero-benefits > div { display: flex; align-items: center; gap: 12px; min-height: 76px; padding: 14px 16px; border: 1px solid rgba(255,255,255,.14); border-radius: 12px; color: #eef3fb; background: linear-gradient(145deg, rgba(255,255,255,.09), rgba(255,255,255,.035)); box-shadow: inset 0 1px rgba(255,255,255,.08); font-size: 13px; font-weight: 750; }
.hero-benefits i { flex: 0 0 auto; display: grid; width: 31px; height: 31px; place-items: center; border-radius: 50%; color: #062010; background: #56e78a; box-shadow: 0 0 20px rgba(86,231,138,.2); font-style: normal; font-weight: 950; }
.hero__note { margin: 13px 0 0; color: #bac3d3; font-size: 13px; }

.button { display: inline-flex; min-height: 54px; align-items: center; justify-content: center; gap: 18px; padding: 14px 28px; border: 0; border-radius: 7px; text-decoration: none; font: inherit; font-weight: 850; cursor: pointer; transition: transform .2s ease, box-shadow .2s ease, filter .2s ease; }
.button:hover { transform: translateY(-2px); filter: brightness(1.04); }
.button:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
.button span { font-size: 22px; line-height: 1; }
.button--yellow { color: #171717; background: var(--yellow); box-shadow: 0 15px 38px rgba(250, 250, 5, .15); }
.button--hero { min-height: 62px; padding-inline: 34px; font-size: 18px; }
.button--green { width: 100%; color: #fff; background: var(--green); }
.button--blue { color: #fff; background: #0174c7; }

.lead-section { position: relative; overflow: hidden; padding: 96px 0 88px; }
.lead-glow { position: absolute; width: 560px; height: 560px; left: -280px; top: 8%; border-radius: 50%; background: #074d8e; filter: blur(110px); opacity: .28; pointer-events: none; }
.lead-grid { position: relative; display: grid; grid-template-columns: minmax(0, 760px); justify-content: center; gap: 24px; }
.form-card { position: relative; color: var(--ink); background: linear-gradient(180deg, #fff 0%, #f7f9fc 100%); border: 1px solid rgba(255,255,255,.72); border-radius: var(--radius); padding: 42px; box-shadow: 0 30px 90px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.05); }
.form-card::before { content: ""; position: absolute; inset: -1px 34px auto; height: 4px; border-radius: 0 0 6px 6px; background: linear-gradient(90deg, var(--cyan), var(--blue)); }
.form-card h2, .proof h2, .about h2, .compare-card h2, .final h2 { margin: 0; font-size: clamp(30px, 3.2vw, 46px); line-height: 1.12; letter-spacing: -.04em; }
.form-card__head > p:last-child { margin: 14px 0 26px; color: #4a5362; }
form { display: grid; gap: 14px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
label { display: grid; gap: 6px; color: #161616; font-size: 13px; font-weight: 750; }
label span { color: #67707d; font-weight: 500; }
input, select { width: 100%; height: 46px; padding: 0 14px; border: 1px solid #dce1e7; border-radius: 6px; background: #f3f4f6; color: #151515; font: inherit; }
input:focus, select:focus { outline: 2px solid #0c82ec; border-color: #0c82ec; background: #fff; }
.form-legal { margin: -2px 0 0; text-align: center; color: #747b86; font-size: 11px; }
.form-status { min-height: 0; margin: 0; color: #18733e; text-align: center; font-weight: 700; }
.partner-card { display: grid; grid-template-columns: 2fr 1fr; overflow: hidden; border: 1px solid rgba(255,255,255,.14); border-radius: var(--radius); background: linear-gradient(145deg, rgba(22,44,76,.85), rgba(5,8,14,.9)); box-shadow: 0 28px 80px rgba(0,0,0,.42); }
.partner-card__image { position: relative; grid-row: 1 / 3; overflow: hidden; min-height: 300px; background: #050505; }
.partner-card__image img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; }
.partner-card__image::after { content: ""; position: absolute; inset: auto 0 0; height: 34%; background: linear-gradient(transparent, rgba(3,7,13,.92)); pointer-events: none; }
.partner-card__stamp { position: absolute; z-index: 1; right: 18px; top: 18px; display: grid; min-width: 92px; padding: 11px 14px; border: 1px solid rgba(255,255,255,.28); border-radius: 12px; color: #07101c; background: var(--yellow); box-shadow: 0 12px 28px rgba(0,0,0,.28); transform: rotate(2deg); }
.partner-card__stamp strong { font-size: 25px; line-height: 1; }
.partner-card__stamp span { font-size: 10px; font-weight: 800; text-transform: uppercase; }
.partner-card__caption { display: flex; align-items: flex-start; justify-content: flex-end; flex-direction: column; gap: 12px; padding: 30px 22px 10px; }
.partner-card__caption > div { display: grid; }
.partner-card__caption strong { font-size: 20px; }
.partner-card__caption div span { color: #aeb9ca; font-size: 12px; }
.online-dot { display: inline-flex; align-items: center; gap: 7px; color: #bdf6cf; font-size: 11px; font-weight: 750; white-space: nowrap; }
.online-dot::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #35dc75; box-shadow: 0 0 0 5px rgba(53,220,117,.12); }
.partner-card__trust { display: grid; align-self: start; gap: 7px; margin: 0 22px 24px; padding: 14px; border-radius: 12px; color: #d8e0ec; background: rgba(255,255,255,.06); font-size: 11px; }
.result-proof { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 26px; margin-top: 28px; padding: 25px 30px; border: 1px solid rgba(255, 215, 0, .3); border-radius: 18px; color: #fff; background: linear-gradient(110deg, rgba(255, 210, 0, .12), rgba(255,255,255,.045) 45%, rgba(86,231,138,.1)); box-shadow: 0 24px 70px rgba(0,0,0,.32); }
.result-proof__stars { color: #ffd43b; font-size: 21px; letter-spacing: .12em; text-shadow: 0 0 18px rgba(255,212,59,.24); white-space: nowrap; }
.result-proof__content { display: grid; }
.result-proof__content span { color: #aeb8c8; font-size: 11px; font-weight: 850; letter-spacing: .13em; }
.result-proof__content strong { font-size: clamp(20px, 2.5vw, 30px); line-height: 1.25; letter-spacing: -.025em; }
.result-proof__content em { color: #56e78a; font-style: normal; }
.result-proof__badge { display: grid; width: 84px; height: 84px; place-items: center; border-radius: 50%; color: #102013; background: #56e78a; box-shadow: 0 0 0 8px rgba(86,231,138,.08), 0 15px 35px rgba(0,0,0,.25); font-size: 20px; font-weight: 950; transform: rotate(3deg); }

.proof { padding: 58px 0 86px; border-top: 1px solid var(--line); text-align: center; }
.proof__inner > p:not(.eyebrow) { max-width: 720px; margin: 14px auto 32px; color: #bfc4cc; }
.proof img { width: min(100%, 850px); margin: 0 auto; }

.about { padding: 100px 0 80px; }
.about__grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 90px; align-items: start; }
.about__copy { color: #444d5b; font-size: 18px; }
.about__copy p:first-child { margin-top: 0; }

.price { padding: 0 0 88px; }
.price__card { padding: 48px; border-radius: var(--radius); text-align: center; background: #fff; box-shadow: 0 20px 60px rgba(15, 23, 42, .08); }
.price__card > p { margin: 0 0 8px; font-size: 24px; font-weight: 800; }
.price__old { color: #606979; font-size: 18px; }
.price h2 { margin: 12px 0 25px; font-size: clamp(36px, 5vw, 64px); line-height: 1; letter-spacing: -.05em; text-transform: uppercase; }
.price h2 span { color: #087ada; }

.transformation { padding: 0 0 100px; }
.compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.compare-card { min-height: 470px; padding: 44px; border: 1px solid #e3e6eb; border-radius: var(--radius); background: #fff; }
.compare-card--problem .eyebrow { color: #db4c4c; }
.compare-card--solution { color: #fff; border-color: #075ba3; background: #062b4c; box-shadow: 0 22px 55px rgba(0, 87, 164, .2); }
.compare-card--solution .eyebrow { color: #70dfff; }
.compare-card ul { display: grid; gap: 18px; margin: 30px 0 0; padding: 0; list-style: none; }
.compare-card li { position: relative; padding-left: 30px; }
.compare-card li::before { content: "✦"; position: absolute; left: 0; top: 0; color: #d74d4d; }
.compare-card--solution li::before { content: "✓"; color: #62e38d; font-weight: 900; }

.final { padding: 104px 0; text-align: center; }
.final__inner { position: relative; z-index: 1; }
.final h2 { font-size: clamp(40px, 5vw, 64px); text-transform: uppercase; }
.final__inner > p:not(.eyebrow):not(.final__limit) { max-width: 820px; margin: 24px auto; color: #d2d8e1; font-size: 18px; }
.final__offer { width: min(560px, 100%); margin: 36px auto 18px; display: flex; align-items: center; justify-content: space-between; gap: 28px; padding: 24px 30px; border: 1px solid rgba(83, 229, 255, .45); border-radius: 16px; background: rgba(17, 73, 128, .3); text-align: left; }
.final__offer div { display: grid; }
.final__offer span { color: #aeb8c9; font-size: 13px; text-transform: uppercase; }
.final__offer s { font-size: 21px; }
.final__offer strong { color: var(--cyan); font-size: 28px; }
.final__limit { margin: 0 0 24px; color: #f1dc75; font-weight: 750; }

footer { padding: 28px 0; color: #9fa6b2; background: #050505; border-top: 1px solid #202020; text-align: center; font-size: 13px; }

@media (max-width: 820px) {
  .container { width: min(100% - 28px, 640px); }
  .hero { min-height: auto; }
  .hero__inner { padding: 54px 0 64px; }
  .hero h1 { font-size: clamp(38px, 10.8vw, 48px); }
  .hero__promise { font-size: clamp(22px, 7.2vw, 31px); }
  .hero__copy { font-size: 16px; }
  .hero-benefits { grid-template-columns: 1fr; }
  .hero-benefits > div { min-height: 62px; }
  .button--hero { width: 100%; padding-inline: 18px; font-size: 16px; }
  .lead-grid, .about__grid, .compare-grid { grid-template-columns: 1fr; }
  .lead-section { padding: 68px 0; }
  .lead-grid { gap: 24px; }
  .about__grid { gap: 28px; }
  .form-card { padding: 30px 22px; }
  .partner-card { width: 100%; }
  .partner-card { display: block; }
  .partner-card__image { aspect-ratio: 1 / .94; min-height: 0; }
  .partner-card__caption { padding: 18px 18px 14px; }
  .partner-card__trust { margin: 0 18px 18px; }
  .result-proof { grid-template-columns: 1fr; gap: 12px; padding: 24px 22px; text-align: center; }
  .result-proof__badge { width: 74px; height: 74px; margin: 5px auto 0; }
  .field-row { grid-template-columns: 1fr; }
  .compare-card { min-height: auto; padding: 32px 24px; }
  .price__card { padding: 38px 22px; }
  .final__offer { align-items: flex-start; flex-direction: column; }
}

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