/* Homepage v2 — light-first. Loaded only on index.html, on top of styles.css.
   Dark is used on purpose: the demo "stage" and the footer. */
body.home-light {
  --bg: #ffffff;
  --bg-2: #f3f6fb;
  --bg-3: #e8eef7;
  --ink: #0f1d3a;
  --ink-2: #2a3a5e;
  --soft: #4a5878;
  --rule: #dbe3ef;
  --accent-text: #036898;
  --body: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: 18px;
}
.home-light :focus-visible { outline-color: var(--teal); box-shadow: 0 0 0 6px var(--white); }
.home-light .dark :focus-visible { outline-color: var(--cyan-light); box-shadow: 0 0 0 6px var(--navy); }
:where(.home-light main) :where(h1, h2, h3) { font-family: var(--display); color: var(--ink); }
.home-light .site-footer { color: var(--muted); }
.home-light .site-footer h2 { font-family: var(--mono); }
.home-light main a:not(.btn) { color: var(--blue); }
.home-light main a:not(.btn):hover { color: var(--navy); }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font: 700 14px/1.3 var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--accent-text); }
.eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--cyan); }
.h-lede { font-size: clamp(18px, 1.7vw, 21px); line-height: 1.55; color: var(--soft); max-width: 620px; }
.hs { padding-block: clamp(72px, 9vw, 120px); }
.hs--tint { background: var(--bg-2); }
.hs-head { display: flex; flex-direction: column; gap: 16px; max-width: 760px; margin-bottom: clamp(36px, 5vw, 60px); }
.hs-head--c { margin-inline: auto; text-align: center; align-items: center; }
.hs-head h2 { font-size: clamp(34px, 4.6vw, 56px); line-height: 1.04; letter-spacing: -0.035em; }
.home-light .btn-outline { color: var(--navy); border-color: #9aaccc; }
.home-light .btn-outline:hover { border-color: var(--navy); color: var(--navy); background: var(--bg-2); }
.home-light .btn-primary { box-shadow: 0 12px 28px -14px rgba(5, 158, 196, .9); }
.btn-lg { min-height: 56px; padding: 16px 30px; font-size: 17px; }

/* ---------- Hero ---------- */
.h-hero { position: relative; overflow: hidden; padding-block: clamp(40px, 4.5vw, 64px) clamp(64px, 7vw, 96px);
  background: radial-gradient(55% 70% at 88% 18%, rgba(5, 158, 196, .16), transparent 70%),
              radial-gradient(45% 60% at 5% 95%, rgba(13, 68, 140, .09), transparent 70%), var(--bg); }
.h-hero-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); gap: clamp(36px, 5vw, 72px); align-items: center; }
.h-copy { display: flex; flex-direction: column; gap: 20px; }
.h-copy h1 { font-size: clamp(40px, 4.5vw, 64px); line-height: 0.98; letter-spacing: -0.045em; }
.h-copy h1 em { font-style: normal; color: var(--accent-text); background: linear-gradient(transparent 70%, rgba(5, 158, 196, .22) 70%); }
.picker { display: flex; flex-direction: column; gap: 12px; background: var(--white); border: 1px solid var(--rule); border-radius: 18px; padding: 18px; box-shadow: 0 24px 50px -36px rgba(15, 29, 58, .45); }
.picker-q { font: 700 17px var(--body); color: var(--ink); }
.picker-q span { font-weight: 500; color: var(--soft); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { font: 600 15px var(--body); color: var(--ink-2); background: var(--bg-2); border: 1.5px solid transparent; border-radius: 999px; padding: 8px 15px; min-height: 42px; cursor: pointer; transition: background-color .15s, border-color .15s, color .15s; }
.chip:hover { border-color: #9aaccc; }
.chip[aria-pressed="true"] { background: var(--navy); color: var(--white); }
.chip-more { position: relative; }
.chip-more select { appearance: none; -webkit-appearance: none; font: 600 15px var(--body); color: var(--ink-2); background: var(--white); border: 1.5px dashed #9aaccc; border-radius: 999px; padding: 8px 34px 8px 15px; min-height: 42px; cursor: pointer; max-width: 210px; }
.chip-more::after { content: ""; position: absolute; right: 15px; top: 50%; width: 7px; height: 7px; border-right: 2px solid var(--ink-2); border-bottom: 2px solid var(--ink-2); transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.chip-more select.on { background: var(--navy); color: var(--white); border-style: solid; border-color: var(--navy); }
.h-ctas { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.home-light main a.h-call, .h-call { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; color: var(--navy) !important; text-decoration: none; padding: 8px 6px; min-height: 48px; }
.h-call svg { width: 20px; height: 20px; color: var(--teal); }
.h-call:hover { text-decoration: underline; }
.h-trust { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 22px; color: var(--soft); font-size: 15.5px; }
.h-trust li { display: inline-flex; align-items: center; gap: 8px; }
.h-trust svg { width: 18px; height: 18px; color: var(--teal); flex: none; }
.h-trust b { color: var(--ink); }

/* Hero visual */
.stage { position: relative; aspect-ratio: 1 / 0.86; }
.stage-laptop { position: absolute; left: 0; top: 4%; width: 86%; border-radius: 14px; background: #e8edf5; border: 1px solid var(--rule); box-shadow: 0 50px 80px -40px rgba(15, 29, 58, .55); overflow: hidden; }
.stage-bar { display: flex; align-items: center; gap: 7px; padding: 10px 14px; background: #e8edf5; }
.stage-bar i { width: 10px; height: 10px; border-radius: 50%; background: #c3cde0; }
.stage-bar i:nth-child(1) { background: #ef6a5e; } .stage-bar i:nth-child(2) { background: #f4bf4f; } .stage-bar i:nth-child(3) { background: #61c454; }
.stage-url { margin-left: 10px; flex: 1; min-width: 0; background: var(--white); border-radius: 6px; padding: 4px 10px; font: 500 12px var(--mono); color: var(--soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stage-screen { position: relative; aspect-ratio: 16 / 10; background: var(--white); overflow: hidden; }
.stage-phone { position: absolute; right: 0; bottom: 0; width: 30%; aspect-ratio: 390 / 844; border-radius: 30px; border: 8px solid #111827; background: #111827; box-shadow: 0 40px 60px -30px rgba(15, 29, 58, .7); overflow: hidden; }
.stage-phone .stage-screen { aspect-ratio: auto; height: 100%; border-radius: 22px; }
.stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; opacity: 0; transition: opacity .6s ease; }
.stage img.on { opacity: 1; }
.stage-toast { position: absolute; left: -4%; bottom: 10%; display: flex; gap: 12px; align-items: center; background: var(--white); border: 1px solid var(--rule); border-radius: 14px; padding: 12px 16px 12px 12px; box-shadow: 0 24px 40px -24px rgba(15, 29, 58, .5); max-width: 62%; }
.stage-toast .ic { width: 38px; height: 38px; border-radius: 10px; background: #e6f4fa; color: var(--teal); display: grid; place-items: center; flex: none; }
.stage-toast .ic svg { width: 20px; height: 20px; }
.stage-toast b { display: block; font-size: 15px; color: var(--ink); line-height: 1.25; }
.stage-toast span { font-size: 13px; color: var(--soft); }
.stage-cap { position: absolute; left: 0; top: -2px; transform: translateY(-120%); display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; font-size: 15px; color: var(--soft); white-space: nowrap; }
.stage-cap b { color: var(--ink); }
.stage-cap a { font-weight: 700; }
@media (prefers-reduced-motion: no-preference) {
  .stage-toast { animation: toast 6s 1.2s ease-in-out infinite; }
  @keyframes toast { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
}
@media (max-width: 980px) {
  .h-hero-grid { grid-template-columns: 1fr; }
  .stage { max-width: 640px; margin-top: 44px; }
}
@media (max-width: 520px) {
  .stage-toast { left: 0; bottom: -6%; max-width: 78%; }
  .stage-cap { font-size: 13.5px; white-space: normal; }
}

/* ---------- Why ---------- */
.journey { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; counter-reset: j; }
.journey li { position: relative; background: var(--white); border: 1px solid var(--rule); border-radius: 18px; padding: 28px; display: flex; flex-direction: column; gap: 12px; }
.journey li::before { counter-increment: j; content: counter(j); width: 34px; height: 34px; border-radius: 50%; background: var(--navy); color: var(--white); display: grid; place-items: center; font: 700 15px var(--display); }
.journey li + li::after { content: ""; position: absolute; left: -21px; top: 44px; width: 22px; height: 2px; background: var(--rule); }
.journey h3 { font-size: 23px; letter-spacing: -0.02em; }
.journey p { color: var(--soft); }
.journey .say { font: 600 15px var(--body); color: var(--ink-2); background: var(--bg-2); border-radius: 10px; padding: 10px 12px; }
.versus { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 28px; }
.vs { border-radius: 18px; padding: 30px; display: flex; flex-direction: column; gap: 16px; }
.vs h3 { font-size: 22px; }
.vs ul { list-style: none; display: grid; gap: 12px; }
.vs li { display: flex; gap: 12px; align-items: flex-start; }
.vs li svg { width: 22px; height: 22px; flex: none; margin-top: 1px; }
.vs--no { background: var(--white); border: 1px solid var(--rule); color: var(--soft); }
.vs--no svg { color: #b3261e; }
.vs--yes { background: var(--navy); color: #dbe6f7; }
.vs--yes h3 { color: var(--white); }
.vs--yes svg { color: var(--cyan-light); }
@media (max-width: 860px) { .journey, .versus { grid-template-columns: 1fr; } .journey li + li::after { display: none; } }

/* ---------- Demo stage (dark) ---------- */
.dark { background: var(--navy); color: var(--white); position: relative; overflow: hidden; }
.dark::before { content: ""; position: absolute; inset: 0; background: radial-gradient(50% 60% at 85% 0%, rgba(5, 158, 196, .18), transparent 70%); pointer-events: none; }
.dark .wrap { position: relative; }
.dark h2, .dark h3 { color: var(--white); }
.dark .h-lede { color: var(--muted); }
.dark .eyebrow { color: var(--cyan-light); }
.home-light .dark a:not(.btn) { color: var(--cyan-light); }
.home-light .dark a:not(.btn):hover { color: var(--white); }
.home-light .dark .work h3 a { color: var(--white); }
.home-light .dark .work h3 a:hover { color: var(--cyan-light); }
.dark .btn-primary { color: var(--navy); }
.dark .btn-outline { color: var(--white); border-color: #6a83b8; }
.dark .btn-outline:hover { background: transparent; border-color: var(--white); color: var(--white); }
.dark .work p { font-family: var(--body); }
.try-flag { display: inline-flex; align-items: center; gap: 10px; align-self: flex-start; background: rgba(5, 158, 196, .14); border: 1px solid rgba(92, 198, 226, .4); color: var(--white); border-radius: 999px; padding: 7px 14px; font-weight: 600; font-size: 15px; }
.try-flag svg { width: 18px; height: 18px; color: var(--cyan-light); }
.dark-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; margin-top: 44px; padding-top: 28px; border-top: 1px solid var(--line); color: var(--muted); font-size: 15.5px; }

/* ---------- Outcomes ---------- */
.wins { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.win { background: var(--white); border: 1px solid var(--rule); border-radius: 18px; padding: 28px; display: flex; flex-direction: column; gap: 12px; transition: border-color .2s, box-shadow .2s, transform .2s; }
.win:hover { border-color: #b8c8e2; box-shadow: 0 24px 40px -30px rgba(15, 29, 58, .45); transform: translateY(-2px); }
.win .ic { width: 48px; height: 48px; border-radius: 14px; background: #e6f4fa; color: var(--teal); display: grid; place-items: center; }
.win .ic svg { width: 24px; height: 24px; }
.win h3 { font-size: 22px; letter-spacing: -0.02em; }
.win p { color: var(--soft); font-size: 16.5px; }
.win a { margin-top: auto; font-weight: 700; font-size: 15.5px; text-decoration: none; }
.win a:hover { text-decoration: underline; }
@media (max-width: 1020px) { .wins { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .wins { grid-template-columns: 1fr; } }

/* ---------- Offer ---------- */
.offer { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: 20px; align-items: stretch; }
.offer-main { position: relative; overflow: hidden; border-radius: 24px; padding: clamp(30px, 4vw, 48px); background: linear-gradient(135deg, var(--blue) 0%, var(--teal) 100%); color: var(--white); display: flex; flex-direction: column; gap: 18px; }
.offer-main::after { content: ""; position: absolute; right: -30px; bottom: -50px; width: 230px; height: 300px; background: url("../img/bluefire-flame.png") no-repeat center / contain; opacity: .12; pointer-events: none; }
.offer-main > * { position: relative; z-index: 1; }
.offer-main h2 { color: var(--white); font-size: clamp(32px, 4vw, 48px); line-height: 1.04; letter-spacing: -0.035em; }
.offer-tag { align-self: flex-start; font: 700 13px var(--body); letter-spacing: .08em; text-transform: uppercase; background: rgba(255, 255, 255, .16); border-radius: 999px; padding: 6px 12px; }
.offer-price { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font-family: var(--display); }
.offer-price b { font-size: clamp(56px, 7vw, 84px); line-height: 1; letter-spacing: -0.05em; }
.offer-price span { font-size: 20px; color: #dff1f9; }
.offer-main ul { list-style: none; display: grid; gap: 10px; color: #eef8fc; }
.offer-main li { display: flex; gap: 10px; }
.offer-main li svg { width: 20px; height: 20px; flex: none; margin-top: 2px; color: #9fe3f4; }
.offer-main .fine { font-size: 14.5px; color: #d3ecf6; }
.offer-main .btn-primary { background: var(--white); color: var(--navy); box-shadow: none; align-self: flex-start; }
.offer-main .btn-primary:hover { background: var(--bg-2); }
.offer-side { background: var(--white); border: 1px solid var(--rule); border-radius: 24px; padding: clamp(26px, 3vw, 36px); display: flex; flex-direction: column; gap: 14px; }
.offer-side h3 { font-size: 23px; }
.offer-side p { color: var(--soft); font-size: 16px; }
.tiers { list-style: none; display: grid; }
.tiers li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.tiers li:first-child { border-top: 1px solid var(--rule); }
.tiers b { font-family: var(--display); font-size: 19px; color: var(--ink); }
.tiers span { color: var(--soft); font-size: 14.5px; display: block; }
.tiers strong { font-family: var(--display); font-size: 22px; color: var(--ink); white-space: nowrap; }
.offer-side a.more { margin-top: auto; font-weight: 700; }
@media (max-width: 900px) { .offer { grid-template-columns: 1fr; } }

/* ---------- People & promise ---------- */
.people { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.photo-slot { aspect-ratio: 5 / 4; border-radius: 22px; border: 2px dashed #9aaccc; background: repeating-linear-gradient(45deg, var(--bg-2) 0 14px, var(--bg-3) 14px 28px); display: grid; place-items: center; text-align: center; padding: 24px; color: var(--soft); font-size: 15px; }
.photo-slot b { display: block; color: var(--ink); font-size: 17px; margin-bottom: 4px; }
.photo-slot img { width: 100%; height: 100%; object-fit: cover; border-radius: 20px; }
.people-copy { display: flex; flex-direction: column; gap: 18px; }
.people-copy h2 { font-size: clamp(32px, 4.2vw, 50px); line-height: 1.05; letter-spacing: -0.035em; }
.people-copy p { color: var(--soft); }
.promise { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 4px; }
.promise li { display: flex; gap: 12px; align-items: flex-start; background: var(--bg-2); border-radius: 14px; padding: 16px; font-weight: 600; color: var(--ink); font-size: 16px; line-height: 1.4; }
.promise svg { width: 22px; height: 22px; color: var(--teal); flex: none; }
@media (max-width: 900px) { .people { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .promise { grid-template-columns: 1fr; } }

/* ---------- Steps (light) ---------- */
.lsteps { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; counter-reset: s; }
.lsteps li { display: flex; flex-direction: column; gap: 10px; padding-top: 22px; border-top: 3px solid var(--rule); }
.lsteps li:first-child { border-top-color: var(--cyan); }
.lsteps li::before { counter-increment: s; content: "Step " counter(s); font: 700 14px var(--body); letter-spacing: .06em; text-transform: uppercase; color: var(--accent-text); }
.lsteps h3 { font-size: 22px; }
.lsteps p { color: var(--soft); font-size: 16.5px; }
@media (max-width: 900px) { .lsteps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .lsteps { grid-template-columns: 1fr; } }

/* ---------- FAQ (light) ---------- */
.lfaq { display: grid; gap: 12px; max-width: 880px; margin-inline: auto; }
.lfaq details { background: var(--white); border: 1px solid var(--rule); border-radius: 14px; }
.lfaq summary { cursor: pointer; list-style: none; padding: 22px 60px 22px 24px; font: 700 19px var(--display); color: var(--ink); position: relative; letter-spacing: -0.01em; }
.lfaq summary::-webkit-details-marker { display: none; }
.lfaq summary::after { content: "+"; position: absolute; right: 24px; top: 50%; transform: translateY(-50%); font: 500 26px var(--body); color: var(--teal); }
.lfaq details[open] summary::after { content: "\2212"; }
.lfaq details p { padding: 0 24px 22px; color: var(--soft); }

/* ---------- Final CTA ---------- */
.final { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 20px; max-width: 820px; margin-inline: auto; }
.final h2 { font-size: clamp(36px, 5vw, 62px); line-height: 1.02; letter-spacing: -0.04em; }
.final .h-ctas { justify-content: center; }

/* ---------- Mobile action bar ---------- */
.mbar { display: none; }
@media (max-width: 720px) {
  .mbar { display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, .96); border-top: 1px solid var(--rule); box-shadow: 0 -10px 30px -20px rgba(15, 29, 58, .5); backdrop-filter: blur(8px); }
  .mbar .btn { min-height: 50px; padding-inline: 12px; }
  body.home-light { padding-bottom: 76px; }
}

/* =================== v3: dark live hero + bluer, livelier body =================== */
body.home-light { --bg-2: #edf3fb; --bg-3: #dfe9f6; }
.hs--tint { background: var(--bg-2); }

/* Hero on navy */
.h-hero--dark { background: var(--navy); color: var(--white); isolation: isolate; padding-block: clamp(44px, 5vw, 72px) clamp(56px, 6vw, 88px); }
.h-hero--dark .wrap { position: relative; z-index: 1; }
.h-hero--dark h1 { color: var(--white) !important; }
.h-hero--dark h1 em { color: var(--cyan-light); background: linear-gradient(transparent 72%, rgba(5, 158, 196, .35) 72%); }
.h-hero--dark .eyebrow { color: var(--cyan-light); }
.h-hero--dark .h-lede { color: var(--muted); }
.h-hero--dark .picker { background: rgba(255, 255, 255, .05); border-color: var(--line-2); box-shadow: none; backdrop-filter: blur(6px); }
.h-hero--dark .picker-q { color: var(--white); }
.h-hero--dark .picker-q span { color: var(--muted); }
.h-hero--dark .chip { background: rgba(255, 255, 255, .07); color: #dbe6f7; }
.h-hero--dark .chip:hover { border-color: var(--muted-2); }
.h-hero--dark .chip[aria-pressed="true"] { background: var(--cyan); color: var(--navy); }
.h-hero--dark .chip-more select { background: transparent; color: #dbe6f7; border-color: var(--line-2); }
.h-hero--dark .chip-more select option { color: var(--ink); background: var(--white); }
.h-hero--dark .chip-more::after { border-color: #dbe6f7; }
.h-hero--dark .chip-more select.on { background: var(--cyan); color: var(--navy); border-color: var(--cyan); }
.h-hero--dark .chip-more:has(select.on)::after { border-color: var(--navy); }
.home-light .h-hero--dark a.h-call { color: var(--white) !important; }
.h-hero--dark .h-call svg { color: var(--cyan-light); }
.h-hero--dark .h-trust { color: var(--muted); }
.h-hero--dark .h-trust b { color: var(--white); }
.h-hero--dark .h-trust svg { color: var(--cyan-light); }
.h-hero--dark :focus-visible { outline-color: var(--cyan-light); box-shadow: 0 0 0 6px var(--navy); }

/* Living background: drifting glows, a slowly panning grid, embers rising like a blue flame */
.hero-fx { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.fx-blob { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .55; }
.fx-b1 { width: 620px; height: 620px; right: -140px; top: -220px; background: radial-gradient(circle, rgba(5, 158, 196, .55), transparent 65%); }
.fx-b2 { width: 560px; height: 560px; left: -200px; bottom: -260px; background: radial-gradient(circle, rgba(13, 68, 140, .9), transparent 65%); }
.fx-b3 { width: 420px; height: 420px; left: 42%; top: 30%; background: radial-gradient(circle, rgba(3, 104, 152, .45), transparent 65%); opacity: .35; }
.fx-grid { position: absolute; inset: -56px; background-image: linear-gradient(rgba(92, 198, 226, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(92, 198, 226, .07) 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(80% 70% at 60% 40%, #000 30%, transparent 85%); -webkit-mask-image: radial-gradient(80% 70% at 60% 40%, #000 30%, transparent 85%); }
.fx-embers span { position: absolute; bottom: -20px; left: var(--x); width: var(--s); height: var(--s); border-radius: 50%; background: radial-gradient(circle, #9fe7f7 0%, rgba(5, 158, 196, .8) 45%, transparent 70%); opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .fx-b1 { animation: drift1 22s ease-in-out infinite alternate; }
  .fx-b2 { animation: drift2 26s ease-in-out infinite alternate; }
  .fx-b3 { animation: drift3 30s ease-in-out infinite alternate; }
  .fx-grid { animation: gridpan 40s linear infinite; }
  .fx-embers span { animation: ember var(--t) linear var(--d) infinite; }
  @keyframes drift1 { to { transform: translate(-120px, 90px) scale(1.12); } }
  @keyframes drift2 { to { transform: translate(140px, -60px) scale(1.08); } }
  @keyframes drift3 { to { transform: translate(-90px, -70px) scale(.9); } }
  @keyframes gridpan { to { transform: translate(56px, 56px); } }
  @keyframes ember { 0% { transform: translate(0, 0); opacity: 0; } 12% { opacity: var(--o); } 80% { opacity: calc(var(--o) * .6); } 100% { transform: translate(var(--sway), -105vh); opacity: 0; } }
}

/* Three-device showcase */
.live { position: relative; display: flex; flex-direction: column; gap: 18px; }
.live .trio { aspect-ratio: 16 / 11.2; }
.live .dev { background: #0a1430; }
.live .dev .shot img { transition: opacity .8s ease, transform 1.2s ease; transform: scale(1.015); }
.live .dev .shot img.on { transform: none; }
.live .trio a:hover .dev--laptop { border-color: var(--cyan); }
.live-toast { position: absolute; left: -5%; bottom: 14%; z-index: 3; display: flex; gap: 12px; align-items: center; background: var(--white); color: var(--ink); border-radius: 14px; padding: 11px 16px 11px 11px; box-shadow: 0 24px 40px -18px rgba(0, 0, 0, .65); max-width: 64%; }
.live-toast .ic { width: 38px; height: 38px; border-radius: 10px; background: #e6f4fa; color: var(--teal); display: grid; place-items: center; flex: none; }
.live-toast .ic svg { width: 20px; height: 20px; }
.live-toast b { display: block; font-size: 15px; line-height: 1.25; }
.live-toast [data-toast] > span { font-size: 13px; color: var(--soft); }
.live-toast [data-toast] { transition: opacity .35s ease, transform .35s ease; }
.live-toast [data-toast].out { opacity: 0; transform: translateY(6px); }
.live-cap { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 15.5px; color: var(--muted); }
.live-cap b { color: var(--white); }
.live-cap .dot { width: 9px; height: 9px; border-radius: 50%; background: #7ee2a8; box-shadow: 0 0 0 0 rgba(126, 226, 168, .6); }
.home-light .live-cap a { color: var(--cyan-light); font-weight: 700; text-decoration: none; }
.home-light .live-cap a:hover { color: var(--white); text-decoration: underline; }
@media (prefers-reduced-motion: no-preference) {
  .live-toast { animation: toast 6s 1.2s ease-in-out infinite; }
  .live-cap .dot { animation: pulse 2.2s ease-out infinite; }
  @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(126, 226, 168, .6); } 100% { box-shadow: 0 0 0 10px rgba(126, 226, 168, 0); } }
}
@media (max-width: 980px) { .live { max-width: 660px; margin-top: 12px; } }
@media (max-width: 520px) { .live-toast { left: 0; bottom: 4%; max-width: 76%; padding: 9px 12px 9px 9px; } .live-toast b { font-size: 13.5px; } }

/* Industry ticker under the hero */
.ticker { background: linear-gradient(90deg, var(--blue), var(--teal)); color: #e7f5fb; overflow: hidden; }
.ticker-track { display: flex; gap: 44px; width: max-content; padding-block: 15px; font: 600 15px var(--body); letter-spacing: .02em; }
.ticker-track span { display: inline-flex; align-items: center; gap: 44px; white-space: nowrap; }
.ticker-track span::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, .5); }
@media (prefers-reduced-motion: no-preference) { .ticker-track { animation: strip 70s linear infinite; } .ticker:hover .ticker-track { animation-play-state: paused; } }

/* Bluer body sections */
.hs--blue { background: linear-gradient(160deg, #e4eefb 0%, #d9e8f8 100%); }
.hs--blue .lsteps li { background: var(--white); border-radius: 16px; padding: 24px; border-top: 0; position: relative; overflow: hidden; box-shadow: 0 18px 40px -30px rgba(13, 68, 140, .45); }
.hs--blue .lsteps li::after { content: ""; position: absolute; left: 0; top: 0; height: 4px; width: 100%; background: linear-gradient(90deg, var(--cyan), var(--blue)); transform-origin: left; transform: scaleX(var(--fill, 1)); transition: transform .9s cubic-bezier(.6, 0, .2, 1) var(--d, 0s); }
.win .ic, .stage-toast .ic { background: linear-gradient(135deg, #e3f3fa, #d6e6f7); }
.win { border-color: #d6e2f1; }
.journey li { border-color: #d6e2f1; }
.vs--yes { background: linear-gradient(150deg, var(--navy) 0%, #17306a 100%); }
.final-band { position: relative; overflow: hidden; border-radius: 28px; padding: clamp(44px, 6vw, 80px) clamp(24px, 4vw, 48px); background: linear-gradient(120deg, var(--navy) 0%, var(--blue) 55%, var(--teal) 100%); }
.final-band::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px); background-size: 48px 48px; mask-image: radial-gradient(70% 80% at 50% 50%, #000, transparent); -webkit-mask-image: radial-gradient(70% 80% at 50% 50%, #000, transparent); }
.final-band::after { content: ""; position: absolute; right: -40px; bottom: -70px; width: 260px; height: 340px; background: url("../img/bluefire-flame.png") no-repeat center / contain; opacity: .12; }
.final-band .final { position: relative; z-index: 1; }
.final-band h2 { color: var(--white) !important; }
.final-band .h-lede { color: #d8ecf7; }
.final-band .eyebrow { color: #9fe3f4; }
.final-band .eyebrow::before { background: #9fe3f4; }
.final-band .btn-primary { background: var(--white); color: var(--navy); box-shadow: none; }
.home-light .final-band a.h-call { color: var(--white) !important; }
.final-band .h-call svg { color: #9fe3f4; }
.final-band :focus-visible { outline-color: var(--white); box-shadow: 0 0 0 6px var(--navy); }

/* Motion: scroll reveals and small flourishes (all off with reduced motion) */
@media (prefers-reduced-motion: no-preference) {
  .js .rv { opacity: 0; transform: translateY(26px); transition: opacity .7s cubic-bezier(.2, .7, .2, 1), transform .7s cubic-bezier(.2, .7, .2, 1); transition-delay: var(--d, 0s); }
  .js .rv.in { opacity: 1; transform: none; }
  .js .vs li { opacity: 0; transform: translateX(-12px); transition: opacity .5s ease, transform .5s ease; transition-delay: calc(var(--i, 0) * 90ms + .25s); }
  .js .vs.in li { opacity: 1; transform: none; }
  .js .journey li + li::after { transform: scaleX(0); transform-origin: left; transition: transform .6s ease .5s; }
  .js .journey.in li + li::after { transform: scaleX(1); }
  .js .hs--blue .lsteps li { --fill: 0; }
  .js .hs--blue .lsteps.in li { --fill: 1; }
  .win:hover .ic { animation: bob .6s ease; }
  @keyframes bob { 40% { transform: translateY(-4px) rotate(-6deg); } }
  .offer-main::before { content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 30%; z-index: 0; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .16), transparent); transform: skewX(-18deg); animation: shine 7s 2s ease-in-out infinite; pointer-events: none; }
  @keyframes shine { 0%, 70% { left: -40%; } 100% { left: 130%; } }
  .offer-main .btn-primary { animation: nudge 3.6s 3s ease-in-out infinite; }
  @keyframes nudge { 0%, 88%, 100% { transform: none; } 92% { transform: translateX(4px); } 96% { transform: translateX(0); } }
}
.home-light .live-cap a:not(.btn) { color: var(--cyan-light); font-weight: 700; text-decoration: none; }
.home-light .live-cap a:not(.btn):hover { color: var(--white); text-decoration: underline; }
.live .dev--laptop { width: 82%; }
.live .dev--tablet { width: 30%; right: 14%; }
.live .dev--phone { width: 17.5%; bottom: 3%; }
@media (max-width: 980px) {
  .h-hero--dark .h-hero-grid { display: flex; flex-direction: column; gap: 20px; }
  .h-hero--dark .h-copy { display: contents; }
  .h-hero--dark .eyebrow { order: 1; } .h-hero--dark h1 { order: 2; } .h-hero--dark .h-lede { order: 3; }
  .h-hero--dark .live { order: 4; margin: 6px 0 4px; width: 100%; }
  .h-hero--dark .picker { order: 5; } .h-hero--dark .h-ctas { order: 6; } .h-hero--dark .h-trust { order: 7; }
}

/* Hero glow: a very subtle, slow pulse (replaces the rising specks) */
.fx-embers { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .fx-b1 { animation: drift1 22s ease-in-out infinite alternate, glow 9s ease-in-out infinite; }
  .fx-b2 { animation: drift2 26s ease-in-out infinite alternate, glow 11s ease-in-out -4s infinite; }
  .fx-b3 { animation: drift3 30s ease-in-out infinite alternate, glow 13s ease-in-out -8s infinite; }
  @keyframes glow { 0%, 100% { opacity: .38; } 50% { opacity: .62; } }
}

/* Julie's photo */
.julie { position: relative; margin: 0; max-width: 460px; justify-self: center; width: 100%; }
.julie img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 24px; box-shadow: 0 40px 70px -40px rgba(15, 29, 58, .55); }
.julie::before { content: ""; position: absolute; inset: 22px -22px -22px 22px; border-radius: 24px; background: linear-gradient(135deg, var(--cyan), var(--blue)); opacity: .18; z-index: -1; }
.julie figcaption { position: absolute; left: 18px; bottom: 18px; background: rgba(255, 255, 255, .94); backdrop-filter: blur(6px); border-radius: 14px; padding: 10px 16px; font-size: 14px; color: var(--soft); box-shadow: 0 16px 30px -18px rgba(15, 29, 58, .6); }
.julie figcaption b { display: block; font: 700 17px var(--display); color: var(--ink); }
.people { isolation: isolate; }