:root {
  --ink: #171b4b;
  --muted: #62677f;
  --line: #dfe3ec;
  --blue: #585ce6;
  --blue-dark: #3e43bd;
  --cyan: #4bb7dc;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: #fff; }

body {
  margin: 0;
  color: var(--ink);
  background: radial-gradient(circle at 88% 5%, rgba(91,184,224,.2), transparent 29rem), linear-gradient(180deg,#f5faff 0,#fff 38rem);
  font-family: Manrope, Inter, Arial, sans-serif;
}

.site-shell { min-height: 100vh; padding: 30px clamp(20px,4vw,64px) 22px; }
.brand { width: max-content; margin: 0 auto; color: #11163e; font-size: 26px; font-weight: 800; letter-spacing: -1.4px; }
.brand b { color: var(--blue); position: relative; }
.brand b::after { content: ""; position: absolute; width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); top: -2px; right: 0; }
.brand span:last-child { color: #3e8ec5; }

.hero { width: min(1210px,100%); min-height: calc(100vh - 145px); margin: 34px auto 20px; display: grid; grid-template-columns: minmax(0,.93fr) minmax(460px,1.07fr); align-items: center; gap: clamp(48px,7vw,105px); }
.intro { padding: 24px 0 48px; }
.eyebrow { display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: var(--blue); }
.eyebrow span { width: 30px; height: 2px; background: var(--cyan); }
h1 { max-width: 610px; margin: 20px 0 22px; font-size: clamp(46px,5vw,72px); line-height: 1.02; letter-spacing: -3.8px; font-weight: 750; }
.lead { max-width: 565px; margin: 0; font-size: 17px; line-height: 1.7; color: #434862; }
.lead strong { color: var(--ink); }

.trust-list { display: grid; grid-template-columns: repeat(3,1fr); margin-top: 42px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.trust-list div { min-width: 0; display: flex; align-items: center; gap: 10px; padding: 18px 12px 18px 0; }
.trust-list div + div { border-left: 1px solid var(--line); padding-left: 16px; }
.trust-list i { color: var(--blue); font-size: 12px; font-style: normal; font-weight: 800; }
.trust-list span { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
.trust-list b { font-size: 12px; white-space: nowrap; }
.trust-list small { color: var(--muted); font-size: 10px; line-height: 1.3; }
.micro-proof { margin: 20px 0 0; color: var(--muted); font-size: 12px; }
.micro-proof span { padding: 0 7px; color: var(--cyan); }

.offer-card { overflow: hidden; background: rgba(255,255,255,.96); border: 1px solid rgba(29,35,81,.16); border-radius: 26px; box-shadow: 0 28px 75px rgba(33,50,107,.15); }
.image-wrap { position: relative; height: clamp(350px,42vw,490px); overflow: hidden; }
.image-wrap::after { content: ""; position: absolute; inset: auto 0 0; height: 32%; background: linear-gradient(transparent,rgba(17,22,62,.22)); pointer-events: none; }
.image-wrap img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center 48%; }
.image-badge { position: absolute; z-index: 1; right: 22px; bottom: 20px; width: 82px; height: 82px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff; background: rgba(23,27,75,.86); border: 1px solid rgba(255,255,255,.4); border-radius: 50%; backdrop-filter: blur(10px); }
.image-badge b { font-size: 20px; line-height: 1; }
.image-badge span { margin-top: 4px; font-size: 10px; text-transform: uppercase; letter-spacing: 1px; }
.offer-action { padding: 24px 26px 22px; text-align: center; }
.offer-action p { margin: 0 0 16px; font-size: 15px; font-weight: 750; }
.offer-action small { display: block; margin-top: 12px; color: #85899a; font-size: 10px; }

.primary-button { width: 100%; height: 56px; padding: 0 24px; display: flex; align-items: center; justify-content: center; gap: 18px; color: #fff; background: linear-gradient(105deg,var(--blue),#6a61e8); border-radius: 999px; box-shadow: 0 11px 26px rgba(88,92,230,.25); font-size: 13px; font-weight: 800; letter-spacing: .6px; text-decoration: none; transition: transform .18s ease,box-shadow .18s ease,background .18s ease; }
.primary-button:hover { transform: translateY(-2px); background: linear-gradient(105deg,var(--blue-dark),var(--blue)); box-shadow: 0 15px 30px rgba(88,92,230,.3); }
.primary-button:focus-visible { outline: 3px solid rgba(88,92,230,.3); outline-offset: 3px; }
.primary-button span { font-size: 21px; font-weight: 500; }
footer { width: min(1210px,100%); margin: 0 auto; display: flex; justify-content: space-between; color: #9195a4; font-size: 10px; }

@media (max-width: 900px) {
  .site-shell { padding-inline: 24px; }
  .hero { grid-template-columns: 1fr; gap: 24px; max-width: 700px; }
  .intro { padding-bottom: 15px; text-align: center; }
  .eyebrow { justify-content: center; }
  h1,.lead { margin-left: auto; margin-right: auto; }
  .trust-list { max-width: 580px; margin-left: auto; margin-right: auto; text-align: left; }
  .micro-proof { text-align: center; }
  .image-wrap { height: min(68vw,480px); }
}

@media (max-width: 600px) {
  .site-shell { padding: 20px 14px 16px; }
  .brand { font-size: 22px; }
  .hero { min-height: 0; margin-top: 28px; }
  .intro { padding: 8px 5px 12px; }
  .eyebrow { font-size: 9px; letter-spacing: 1.1px; }
  h1 { margin: 15px auto 17px; font-size: 39px; letter-spacing: -2px; }
  .lead { font-size: 14px; line-height: 1.62; }
  .trust-list { grid-template-columns: 1fr; margin-top: 28px; }
  .trust-list div + div { border-left: 0; border-top: 1px solid var(--line); padding-left: 0; }
  .trust-list div { padding: 13px 4px; }
  .trust-list small { font-size: 11px; }
  .micro-proof { display: none; }
  .offer-card { border-radius: 20px; }
  .image-wrap { height: 330px; }
  .image-badge { right: 16px; bottom: 14px; width: 70px; height: 70px; }
  .offer-action { padding: 20px 18px 18px; }
  footer { margin-top: 24px; flex-direction: column; gap: 5px; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { scroll-behavior: auto !important; transition: none !important; }
}