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

:root {
  --navy: #071832;
  --navy-2: #0b2448;
  --blue: #169ee8;
  --cyan: #56d4ff;
  --ink: #10213a;
  --muted: #5f6c7d;
  --line: #dbe3ec;
  --paper: #f4f7fb;
  --white: #fff;
  --lime: #b9ed54;
  font-family: 'Manrope', system-ui, sans-serif;
  color: var(--ink);
  background: var(--paper);
  font-synthesis: none;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; background: var(--paper); }
button, input { font: inherit; }
a { color: inherit; }

.site-header {
  min-height: 82px;
  padding: 14px max(22px, calc((100vw - 1200px) / 2));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  color: white;
  background: var(--navy);
  border-bottom: 1px solid rgba(255,255,255,.12);
}

.brand { display: inline-flex; align-items: center; gap: 12px; color: white; text-decoration: none; line-height: 1; }
.brand > span:last-child { display: grid; gap: 4px; letter-spacing: .08em; }
.brand strong { font-family: 'Space Grotesk', sans-serif; font-size: 16px; }
.brand small { font-size: 9px; font-weight: 800; letter-spacing: .32em; color: var(--cyan); }
.brand-icon { position: relative; width: 40px; height: 40px; display: block; }
.brand-icon i { position: absolute; left: 50%; bottom: 9px; border: 3px solid var(--cyan); border-width: 3px 3px 0 0; border-radius: 0 100% 0 0; transform: translateX(-50%) rotate(-45deg); }
.brand-icon i:nth-child(1) { width: 34px; height: 34px; bottom: -5px; }
.brand-icon i:nth-child(2) { width: 24px; height: 24px; bottom: 0; }
.brand-icon i:nth-child(3) { width: 14px; height: 14px; bottom: 5px; }
.brand-icon b { position: absolute; left: 17px; bottom: 3px; width: 7px; height: 7px; border-radius: 50%; background: white; }
.header-note { display: inline-flex; align-items: center; gap: 9px; font-size: 12px; font-weight: 700; color: #dcecff; }
.header-note span { width: 8px; height: 8px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 5px rgba(185,237,84,.12); }

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 64px max(22px, calc((100vw - 1200px) / 2)) 72px;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(360px, .76fr);
  gap: clamp(44px, 7vw, 92px);
  align-items: center;
  color: white;
  background:
    radial-gradient(circle at 18% 18%, rgba(38,170,241,.21), transparent 28%),
    radial-gradient(circle at 72% 74%, rgba(74,204,255,.09), transparent 25%),
    linear-gradient(135deg, #071832 0%, #0a2142 58%, #06162d 100%);
}

.hero::before, .hero::after { content: ''; position: absolute; z-index: -1; border: 1px solid rgba(86,212,255,.11); border-radius: 50%; }
.hero::before { width: 590px; height: 590px; top: -330px; right: 28%; }
.hero::after { width: 850px; height: 850px; top: -458px; right: 17%; }
.hero-copy { min-width: 0; max-width: 650px; }
.eyebrow { margin: 0 0 18px; color: var(--cyan); font-size: 12px; font-weight: 800; letter-spacing: .17em; text-transform: uppercase; }
h1, h2 { font-family: 'Space Grotesk', sans-serif; letter-spacing: -.045em; margin: 0; }
h1 { max-width: 660px; font-size: clamp(42px, 5.5vw, 76px); line-height: .99; }
.hero-lede { max-width: 610px; margin: 23px 0 30px; font-size: clamp(17px, 2vw, 20px); line-height: 1.6; color: #bed0e5; }

.offer-panel { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.22fr); margin: 0 0 30px; max-width: 620px; overflow: hidden; border: 1px solid rgba(255,255,255,.14); border-radius: 18px; box-shadow: 0 18px 50px rgba(0,0,0,.2); }
.offer-panel > div { min-height: 137px; padding: 20px 24px; display: flex; flex-direction: column; justify-content: center; }
.trial-offer { background: #0d2f5b; }
.price-offer { background: linear-gradient(135deg, #178ed5, #27b4f1); }
.offer-panel span { font-size: 10px; font-weight: 800; letter-spacing: .16em; }
.offer-panel strong { font-family: 'Space Grotesk', sans-serif; line-height: .94; }
.trial-offer strong { margin-top: 7px; font-size: clamp(30px, 4vw, 45px); }
.trial-offer b { color: var(--lime); font-size: 22px; }
.price-offer strong { margin: 4px 0; font-size: clamp(45px, 6vw, 66px); }
.price-offer sup { font-size: .48em; vertical-align: top; position: relative; top: .17em; }
.price-offer small { font-size: .27em; letter-spacing: 0; }
.price-offer b { font-size: 10px; letter-spacing: .11em; }
.price-offer del { margin-right: 5px; color: rgba(255,255,255,.72); text-decoration-thickness: 2px; }

.benefit-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 22px; }
.benefit-grid li { min-width: 0; display: flex; align-items: center; gap: 13px; }
.benefit-icon { width: 37px; height: 37px; flex: 0 0 37px; display: grid; place-items: center; border-radius: 11px; color: var(--cyan); background: rgba(86,212,255,.1); border: 1px solid rgba(86,212,255,.18); font-weight: 800; font-size: 20px; }
.benefit-icon.speed { font-size: 18px; }
.benefit-grid div { min-width: 0; display: grid; gap: 2px; }
.benefit-grid strong { font-size: 13px; }
.benefit-grid small { font-size: 10px; text-transform: uppercase; letter-spacing: .07em; color: #8299b2; }

.lead-card { position: relative; min-width: 0; overflow: hidden; color: var(--ink); background: white; border-radius: 22px; box-shadow: 0 34px 90px rgba(0,0,0,.28); }
.card-topline { display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 38px; color: #cfe8ff; background: #0d2d55; font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.card-topline span { width: 7px; height: 7px; border-radius: 50%; background: var(--lime); }
.form-heading { padding: 28px 30px 18px; }
.form-heading p { margin: 0 0 7px; font-size: 10px; font-weight: 800; letter-spacing: .15em; color: #168ed1; text-transform: uppercase; }
.form-heading h2 { font-size: clamp(31px, 4vw, 41px); }
.form-heading > span { display: block; margin-top: 10px; color: var(--muted); line-height: 1.55; font-size: 13px; }
form { padding: 0 30px 30px; }
.field { display: grid; gap: 7px; margin-bottom: 14px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field label { font-size: 11px; font-weight: 800; color: #34445a; }
.field input { min-width: 0; width: 100%; height: 51px; padding: 0 14px; color: var(--ink); background: #fbfcfe; border: 1px solid #d7e0ea; border-radius: 10px; outline: none; font-size: 14px; transition: border-color .2s, box-shadow .2s, background .2s; }
.field input::placeholder { color: #96a2b1; }
.field input:focus { background: white; border-color: var(--blue); box-shadow: 0 0 0 4px rgba(22,158,232,.11); }
.consent { display: grid; grid-template-columns: 17px 1fr; gap: 9px; align-items: start; margin: 4px 0 17px; color: #687587; font-size: 10px; line-height: 1.45; }
.consent input { width: 16px; height: 16px; margin: 1px 0 0; accent-color: var(--blue); }
.submit-button { width: 100%; min-height: 58px; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; border: 0; border-radius: 11px; color: white; background: linear-gradient(100deg, #087fc4, #18a8ed); font-size: 14px; font-weight: 800; cursor: pointer; box-shadow: 0 12px 25px rgba(22,158,232,.25); }
.submit-button span:last-child { font-size: 22px; }
.submit-button:hover { filter: brightness(1.05); transform: translateY(-1px); }
.submit-button:disabled { opacity: .65; cursor: wait; transform: none; }
.privacy-note { margin: 12px 8px 0; color: #8490a0; font-size: 9px; line-height: 1.5; text-align: center; }
.privacy-note a { color: #526074; }
.form-error { margin: 0 0 12px; padding: 10px 12px; color: #9b2230; background: #fff0f2; border: 1px solid #f4c7cd; border-radius: 8px; font-size: 12px; }
.honeypot { position: absolute; left: -9999px; }

.how-it-works { max-width: 1200px; margin: 0 auto; padding: 64px 22px 50px; display: grid; grid-template-columns: .72fr 1.28fr; gap: 60px; align-items: center; }
.eyebrow.dark { margin-bottom: 12px; color: #1288c8; }
.how-it-works h2 { max-width: 410px; font-size: clamp(31px, 4vw, 45px); line-height: 1.06; }
.how-it-works ol { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); }
.how-it-works li { min-height: 136px; padding: 4px 20px; display: flex; gap: 12px; border-left: 1px solid var(--line); }
.how-it-works li b { color: #199edc; font-family: 'Space Grotesk', sans-serif; font-size: 12px; }
.how-it-works li span { display: flex; flex-direction: column; gap: 7px; padding-top: 27px; }
.how-it-works li strong { font-size: 14px; }
.how-it-works li small { color: var(--muted); font-size: 11px; line-height: 1.5; }
.offer-disclaimer { max-width: 1160px; margin: 0 auto; padding: 0 22px 40px; color: #7a8695; font-size: 9px; line-height: 1.6; text-align: center; }
footer { min-height: 72px; padding: 18px max(22px, calc((100vw - 1200px) / 2)); display: flex; justify-content: space-between; gap: 20px; align-items: center; color: #94a6ba; background: var(--navy); font-size: 10px; letter-spacing: .05em; }

.thank-you-page { min-height: 100vh; display: grid; grid-template-rows: auto 1fr auto; background: var(--navy); color: white; }
.thank-you-main { display: grid; place-items: center; padding: 52px 22px; background: radial-gradient(circle at center, #0e315f 0%, var(--navy) 58%); }
.thank-you-card { width: min(620px, 100%); padding: clamp(34px, 6vw, 60px); text-align: center; color: var(--ink); background: white; border-radius: 24px; box-shadow: 0 35px 90px rgba(0,0,0,.3); }
.checkmark { width: 68px; height: 68px; margin: 0 auto 24px; display: grid; place-items: center; border-radius: 50%; color: #087fc4; background: #e5f6ff; font-size: 31px; font-weight: 800; }
.thank-you-card h1 { font-size: clamp(36px, 6vw, 55px); }
.thank-you-card p { margin: 18px auto 0; max-width: 470px; color: var(--muted); line-height: 1.65; }
.thank-you-card a { display: inline-block; margin-top: 26px; color: #087fc4; font-weight: 800; text-decoration: none; }

@media (max-width: 900px) {
  .hero { grid-template-columns: minmax(0, 1fr); padding-top: 50px; }
  .hero-copy { max-width: none; }
  .lead-card { width: min(620px, 100%); justify-self: center; }
  .how-it-works { grid-template-columns: 1fr; gap: 36px; }
}

@media (max-width: 600px) {
  .site-header { min-height: 70px; }
  .header-note { display: none; }
  .hero { padding: 18px 18px 50px; gap: 42px; }
  .lead-card { order: -1; }
  h1 { font-size: 44px; }
  .hero-lede { font-size: 16px; }
  .offer-panel { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
  .offer-panel > div { min-height: 118px; padding: 16px; }
  .trial-offer strong { font-size: 29px; }
  .trial-offer b { font-size: 18px; }
  .price-offer strong { font-size: 47px; }
  .benefit-grid { gap: 15px 12px; }
  .benefit-grid strong { font-size: 11px; }
  .benefit-grid small { font-size: 8px; }
  .form-heading { padding: 24px 20px 16px; }
  form { padding: 0 20px 24px; }
  .field-row { grid-template-columns: 1fr; gap: 0; }
  .how-it-works { padding: 48px 20px 34px; }
  .how-it-works ol { grid-template-columns: 1fr; }
  .how-it-works li { min-height: 86px; border-left: 0; border-top: 1px solid var(--line); padding: 16px 4px; }
  .how-it-works li span { padding-top: 0; }
  footer { align-items: flex-start; flex-direction: column; }
}

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