:root {
  --navy: #0d1b3a;
  --navy-deep: #09152d;
  --blue: #2359de;
  --sky: #79a8fb;
  --orange: #ff884d;
  --orange-soft: #ffe2cf;
  --ink: #13213a;
  --muted: #66758d;
  --line: #dce3ef;
  --page: #f7f9fd;
  --white: #ffffff;
  --teal: #067a7d;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--page); color: var(--ink); font-family: Manrope, sans-serif; }
a { color: inherit; text-decoration: none; }
button, select { font: inherit; }
button { cursor: pointer; }

.topbar { align-items: center; background: var(--white); border-bottom: 1px solid #edf0f5; display: flex; height: 94px; justify-content: space-between; padding: 0 4vw; }
.wordmark { align-items: center; display: flex; font-size: 15px; font-weight: 800; gap: 10px; line-height: 1; }
.wordmark img { height: 48px; object-fit: contain; width: 78px; }
.wordmark small { color: var(--muted); display: block; font-size: 8px; letter-spacing: .02em; margin-top: 5px; text-align: center; }
.mark { background: var(--navy); color: var(--orange); display: grid; font-size: 16px; height: 42px; place-items: center; width: 42px; }
.topbar nav { align-items: center; color: #52627a; display: flex; font-size: 14px; font-weight: 600; gap: 34px; }
.topbar nav a:hover { color: var(--blue); }

.orange-button, .primary { background: var(--orange); border: 0; border-radius: 12px; box-shadow: 0 12px 22px rgba(255, 136, 77, .24); color: var(--navy-deep); display: inline-flex; font-size: 15px; font-weight: 800; gap: 14px; justify-content: center; padding: 17px 27px; }
.orange-button.small { padding: 14px 24px; }
.outline { background: transparent; border: 1px solid rgba(255,255,255,.55); border-radius: 12px; color: var(--white); display: inline-flex; font-size: 15px; font-weight: 700; justify-content: center; padding: 16px 23px; }
.outline.small { background: var(--white); border-color: var(--line); color: var(--ink); padding: 10px 15px; }

.wrap { margin: 0 auto; max-width: 1440px; padding-left: 4vw; padding-right: 4vw; }
.hero { background: var(--navy); color: var(--white); display: grid; gap: 7vw; grid-template-columns: minmax(380px, .9fr) minmax(470px, 1.1fr); max-width: none; overflow: hidden; padding-bottom: 96px; padding-top: 124px; position: relative; }
.hero > div { position: relative; z-index: 1; }
.hero-arc { border: 1px solid rgba(121,168,251,.12); border-radius: 50%; height: 900px; left: -540px; position: absolute; top: -410px; width: 900px; }
.hero-line { background: rgba(255,255,255,.12); height: 1px; left: 0; position: absolute; width: 100%; }
.line-one { top: 72%; }
.line-two { background: rgba(121,168,251,.13); top: 24%; }
.hero-streak { background: rgba(255,255,255,.16); box-shadow: 230px 0 0 rgba(121,168,251,.12), 640px 0 0 rgba(255,255,255,.08); height: 1px; left: 10%; position: absolute; top: 14%; width: 110px; }
.eyebrow { color: var(--blue); font-size: 12px; font-weight: 800; letter-spacing: .14em; margin: 0 0 18px; text-transform: uppercase; }
.hero .eyebrow { color: var(--orange); }
.hero h1 { color: var(--white); font-size: clamp(54px, 6.3vw, 94px); font-weight: 800; letter-spacing: -.08em; line-height: .97; margin: 0 0 30px; max-width: 740px; }
.hero h1 strong { color: var(--sky); font-weight: 800; }
.lede { color: #b7c8e5; font-size: 19px; line-height: 1.75; margin: 0; max-width: 670px; }
.actions { align-items: center; display: flex; gap: 14px; margin: 34px 0 18px; }
.micro { color: #b7c8e5; font-size: 12px; margin: 0; }
.hero-card { align-self: center; background: var(--white); border: 1px solid #b7c8e3; border-radius: 26px; box-shadow: 0 22px 45px rgba(2, 10, 28, .35); color: var(--ink); min-height: 426px; padding: 52px; }
.pill { background: var(--orange-soft); color: #a34f2b; display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .04em; padding: 8px 12px; }
.hero-card h2 { font-size: 40px; letter-spacing: -.055em; line-height: 1.1; margin: 34px 0 13px; }
.hero-card p { color: var(--muted); font-size: 16px; line-height: 1.65; margin: 0; }
.steps { align-items: center; display: flex; margin: 38px 0; }
.steps b, .steps span { background: #edf2ff; color: var(--blue); display: grid; font-size: 12px; font-weight: 800; height: 31px; place-items: center; width: 31px; }
.steps b { background: var(--blue); color: var(--white); }
.steps i { background: #cbd7ea; flex: 1; height: 1px; }
.note { border-top: 1px solid var(--line); display: flex; flex-direction: column; font-size: 13px; gap: 5px; padding-top: 18px; }
.note small { color: var(--muted); font-size: 12px; }

.block { padding-bottom: 104px; padding-top: 104px; }
.section-title { font-size: clamp(42px, 5vw, 70px); letter-spacing: -.07em; line-height: 1; margin: 0 0 16px; }
.section-lede { color: var(--muted); font-size: 18px; line-height: 1.7; margin: 0; max-width: 710px; }
.grid { display: grid; gap: 16px; grid-template-columns: repeat(4, 1fr); margin-top: 38px; }
.grid article { background: var(--white); border: 1px solid var(--line); border-radius: 18px; min-height: 262px; padding: 28px; }
.icon { align-items: center; display: flex; height: 58px; justify-content: center; margin-bottom: 38px; width: 58px; }
.icon svg { fill: none; height: 29px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.65; width: 29px; }
.blue { background: #edf2ff; color: var(--blue); }.teal { background: #e0f2f0; color: var(--teal); }.orange { background: var(--orange-soft); color: #a65330; }.violet { background: #f0efff; color: #7a72c7; }
.grid h3 { font-size: 19px; letter-spacing: -.03em; margin: 0 0 11px; }.grid p { color: var(--muted); font-size: 14px; line-height: 1.7; margin: 0; }

.dark { background: var(--navy); color: var(--white); display: grid; gap: 7vw; grid-template-columns: .85fr 1.15fr; max-width: none; padding-bottom: 112px; padding-top: 112px; }
.light { color: var(--orange); }.dark-title { font-size: clamp(42px, 5vw, 70px); letter-spacing: -.07em; line-height: 1; margin: 0 0 17px; }.dark-lede { color: #b7c8e5; font-size: 18px; line-height: 1.7; }
.journey { display: grid; gap: 26px; grid-template-columns: repeat(3, 1fr); }.journey div { border-top: 1px solid rgba(255,255,255,.22); padding-top: 20px; }.journey b { color: var(--sky); font-size: 13px; }.journey h3 { font-size: 18px; margin: 23px 0 9px; }.journey p { color: #b7c8e5; font-size: 14px; line-height: 1.7; }
.split { display: grid; gap: 7vw; grid-template-columns: 1fr 1fr; padding-bottom: 112px; padding-top: 112px; }.learn { display: grid; gap: 12px; }.learn div { background: var(--white); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 7px; padding: 24px; }.learn strong { font-size: 16px; }.learn span { color: var(--muted); font-size: 13px; }

.blog { background: #edf2ff; max-width: none; padding-bottom: 112px; padding-top: 112px; }.blog-intro { max-width: 760px; }.blog-grid { display: grid; gap: 16px; grid-template-columns: repeat(3, 1fr); margin-top: 40px; }.blog-grid article { background: var(--white); border: 1px solid var(--line); display: flex; flex-direction: column; min-height: 300px; padding: 30px; }.blog-grid .tag { color: var(--blue); font-size: 11px; font-weight: 800; letter-spacing: .09em; margin: 0 0 28px; text-transform: uppercase; }.blog-grid h3 { font-size: 22px; letter-spacing: -.045em; line-height: 1.22; margin: 0 0 14px; }.blog-grid article > p:not(.tag) { color: var(--muted); font-size: 14px; line-height: 1.7; margin: 0; }.blog-grid a { color: var(--blue); font-size: 13px; font-weight: 800; margin-top: auto; padding-top: 28px; }.blog-grid a span { margin-left: 7px; }

.modal { background: rgba(9, 21, 45, .78); display: grid; inset: 0; padding: 20px; place-items: center; position: fixed; z-index: 20; }.hidden { display: none; }.quiz-card { background: var(--white); border-radius: 20px; max-width: 560px; padding: 38px; position: relative; width: 100%; }.close { background: none; border: 0; color: var(--muted); font-size: 28px; position: absolute; right: 17px; top: 12px; }.progress { background: #e8edf5; height: 5px; margin-bottom: 30px; }.progress span { background: var(--blue); display: block; height: 100%; width: 50%; }.quiz-card h2 { font-size: 34px; letter-spacing: -.055em; line-height: 1.12; margin: 0 0 12px; }.quiz-card > p:not(.eyebrow):not(.demo) { color: var(--muted); font-size: 14px; line-height: 1.7; }.quiz-options { display: grid; gap: 10px; }.quiz-options select { border: 1px solid var(--line); padding: 14px; width: 100%; }.choice { align-items: center; background: var(--white); border: 1px solid var(--line); display: flex; font-size: 13px; gap: 12px; padding: 15px; text-align: left; width: 100%; }.choice:hover,.choice.selected { background: #edf2ff; border-color: var(--blue); }.choice-mark { border: 1px solid #b7c8e3; border-radius: 50%; display: grid; font-size: 10px; height: 18px; place-items: center; width: 18px; }.selected .choice-mark { background: var(--blue); border-color: var(--blue); color: var(--white); }.quiz-actions { align-items: center; display: flex; justify-content: space-between; margin-top: 28px; }.text-btn { background: none; border: 0; color: var(--muted); }.demo { color: #8a98ad; font-size: 10px; margin: 22px 0 0; text-align: center; }

@media (max-width: 900px) { .topbar nav a { display: none; }.hero,.dark,.split { gap: 42px; grid-template-columns: 1fr; }.hero { padding-top: 78px; }.grid { grid-template-columns: repeat(2,1fr); }.journey,.blog-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .topbar { height: 76px; }.topbar nav { gap: 8px; }.orange-button.small { padding: 11px 14px; }.hero h1 { font-size: 54px; }.actions { align-items: stretch; flex-direction: column; }.grid { grid-template-columns: 1fr; }.hero-card { min-height: 0; padding: 32px 24px; }.hero-card h2 { font-size: 32px; }.quiz-card { padding: 32px 22px; } }

.lead-form { display: grid; gap: 14px; }.lead-form label { color: var(--ink); display: flex; flex-direction: column; font-size: 12px; font-weight: 800; gap: 7px; }.lead-form input,.lead-form select { background: var(--white); border: 1px solid var(--line); border-radius: 4px; color: var(--ink); padding: 13px; width: 100%; }.lead-form .consent { align-items: flex-start; flex-direction: row; font-size: 11px; font-weight: 600; line-height: 1.55; }.lead-form .consent input { margin: 3px 0 0; width: auto; }.lead-form em { color: var(--muted); font-style: normal; }.data-note { color: var(--muted); font-size: 11px; line-height: 1.6; margin: 16px 0 0; }.result-card { background: #edf2ff; border: 1px solid var(--line); margin-top: 18px; padding: 22px; }.result-label { color: var(--blue); font-size: 10px; font-weight: 800; letter-spacing: .1em; margin: 0 0 8px; text-transform: uppercase; }.result-card h3 { font-size: 25px; letter-spacing: -.04em; margin: 0 0 13px; }.result-card p,.result-card li { color: var(--muted); font-size: 13px; line-height: 1.65; }.result-card p strong { color: var(--ink); }.result-card ul { margin: 12px 0 0; padding-left: 19px; }.trust { background: var(--navy); color: var(--white); max-width: none; padding-bottom: 112px; padding-top: 112px; }.trust .eyebrow { color: var(--orange); }.trust-grid { display: grid; gap: 16px; grid-template-columns: repeat(3,1fr); margin-top: 38px; }.trust-grid div { border-top: 1px solid rgba(255,255,255,.24); display: flex; flex-direction: column; gap: 10px; padding-top: 22px; }.trust-grid strong { font-size: 17px; }.trust-grid span { color: #b7c8e5; font-size: 13px; line-height: 1.7; }
@media (max-width: 900px) { .trust-grid { grid-template-columns: 1fr; } }

/* Keep the complete review form reachable on small screens and at zoom. */
.quiz-card { max-height: calc(100dvh - 40px); overflow-y: auto; overscroll-behavior: contain; }
.quiz-card :focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }