:root {
  --ink: #19142a;
  --muted: #6e687b;
  --purple: #6041df;
  --purple-dark: #4325ad;
  --purple-soft: #eee9ff;
  --lilac: #f7f4ff;
  --line: rgba(80, 52, 150, .13);
  --gradient: linear-gradient(135deg, #3876d9 0%, #4984e3 54%, #598cdf 100%);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: #fff; font-family: "DM Sans", sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

.site-header { display: flex; width: min(1160px, calc(100% - 40px)); height: 82px; align-items: center; justify-content: space-between; margin: 0 auto; }
.brand,.footer-brand { display: flex; align-items: center; gap: 11px; }
.brand-wordmark { display: block; width: 150px; line-height: 0; }
.brand-wordmark img { width: 100%; height: auto; }
.brand strong,.footer-brand strong { color: var(--purple); font: 700 15px/1 "Manrope", sans-serif; }
.site-header nav { display: flex; align-items: center; gap: 28px; color: #5f586c; font-size: 13px; font-weight: 700; }
.header-cta { padding: 11px 19px; border-radius: 999px; color: #fff; background: var(--purple); }

main { overflow: hidden; }
.request-handoff { display: grid; width: min(1080px,calc(100% - 40px)); grid-template-columns: auto 1fr auto; align-items: center; gap: 18px; margin: 8px auto 18px; padding: 18px 20px; border: 1px solid rgba(96,65,223,.2); border-radius: 20px; background: linear-gradient(115deg,#f4f8ff,#fff 58%,#f5edff); box-shadow: 0 14px 34px rgba(67,37,173,.08); }
.request-handoff[hidden] { display: none; }
.request-handoff__mark { display: grid; width: 44px; height: 44px; place-items: center; border-radius: 14px; color: #fff; background: var(--gradient); font-size: 20px; font-weight: 800; }
.request-handoff__copy { min-width: 0; }
.request-handoff__copy > span,.request-handoff__copy > strong,.request-handoff__copy > small { display: block; }
.request-handoff__copy > span { margin-bottom: 3px; color: var(--purple); font-size: 10px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.request-handoff__copy > strong { font: 800 16px/1.25 "Manrope",sans-serif; }
.request-handoff__copy p { margin: 5px 0 8px; color: var(--muted); font-size: 12px; line-height: 1.45; }
.request-handoff__copy code { display: inline-block; max-width: 100%; padding: 5px 8px; overflow: hidden; border-radius: 7px; color: #4b3496; background: rgba(96,65,223,.08); font: 600 10px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace; text-overflow: ellipsis; user-select: all; white-space: nowrap; }
.request-handoff__copy small { margin-top: 6px; color: #777080; font-size: 10px; }
.request-handoff__copy small[data-state="success"] { color: #277a55; }
.request-handoff__copy small[data-state="error"] { color: #a3443b; }
.request-handoff button { min-height: 43px; padding: 0 16px; border: 0; border-radius: 13px; color: #fff; background: var(--purple); font: 800 12px/1 "DM Sans",sans-serif; cursor: pointer; white-space: nowrap; }
.hero { display: grid; width: min(1160px, calc(100% - 40px)); grid-template-columns: minmax(0,.92fr) minmax(500px,1.08fr); align-items: start; gap: 48px; margin: 8px auto 0; padding: 48px 52px; overflow: hidden; border: 1px solid var(--line); border-radius: 32px; background: radial-gradient(circle at 94% 10%,rgba(82, 136, 224,.13),transparent 28%),linear-gradient(145deg,#fff 16%,#f5f9ff 100%); }
.hero-copy { align-self: start; padding-top: 28px; }
.eyebrow { display: flex; align-items: center; gap: 10px; margin: 0; color: var(--purple); font-size: 11px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.eyebrow::before { width: 24px; height: 3px; border-radius: 99px; background: var(--gradient); content: ""; }
h1 { max-width: 530px; margin: 20px 0 22px; font: 800 clamp(42px,4vw,56px)/1.04 "Manrope",sans-serif; letter-spacing: -.05em; }
h1 em { color: var(--purple); font-style: normal; }
.hero-intro { max-width: 500px; margin: 0; color: var(--muted); font-size: 17px; line-height: 1.58; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; margin-top: 30px; }
.primary-cta { display: inline-flex; min-height: 56px; align-items: center; justify-content: center; gap: 13px; padding: 0 22px; border-radius: 16px; color: #fff; background: var(--gradient); box-shadow: 0 16px 34px rgba(85,56,217,.22); font-size: 14px; font-weight: 800; transition: transform .2s ease,box-shadow .2s ease; }
.primary-cta:hover { box-shadow: 0 20px 42px rgba(85,56,217,.28); transform: translateY(-2px); }
.primary-cta span { font-size: 19px; }
.hero-demo { position: relative; display: grid; min-height: 450px; grid-template-columns: minmax(205px,.95fr) minmax(180px,1.05fr); align-items: center; gap: 18px; padding: 30px 20px 0 30px; overflow: hidden; border-radius: 28px 10px 28px 10px; color: #fff; background: linear-gradient(145deg,#17396f,#2c5dad 55%,#437bd4); box-shadow: 0 24px 58px rgba(54,32,112,.18); }
.hero-demo::before { position: absolute; top: -190px; right: -130px; width: 380px; height: 380px; border: 70px solid rgba(255,255,255,.06); border-radius: 50%; content: ""; }
.demo-flow { position: relative; z-index: 2; align-self: center; padding-bottom: 34px; }
.demo-label { margin: 0 0 22px; color: #d9ceff; font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.demo-flow ol { display: grid; gap: 17px; margin: 0; padding: 0; list-style: none; }
.demo-flow li { display: grid; grid-template-columns: 37px 1fr; align-items: start; gap: 12px; }
.demo-flow li > span { display: grid; width: 37px; height: 37px; place-items: center; border: 1px solid rgba(255,255,255,.24); border-radius: 12px; color: #fff; background: rgba(255,255,255,.1); font-size: 12px; font-weight: 800; }
.demo-flow strong,.demo-flow small { display: block; }
.demo-flow strong { font: 700 14px/1.3 "Manrope",sans-serif; }
.demo-flow small { margin-top: 4px; color: #d6ccea; font-size: 11px; line-height: 1.4; }
.demo-phone { position: relative; z-index: 2; width: 194px; align-self: end; justify-self: end; margin: 0; padding: 6px 6px 0; overflow: hidden; border: 4px solid #211b31; border-bottom: 0; border-radius: 31px 31px 0 0; background: #fff; box-shadow: 0 25px 55px rgba(12,6,34,.35); }
.demo-phone::before { position: absolute; z-index: 2; top: 11px; left: 50%; width: 70px; height: 19px; border-radius: 99px; background: #211b31; content: ""; transform: translateX(-50%); }
.demo-phone figcaption { position: absolute; z-index: 3; top: 48px; left: 12px; display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 12px; color: #422492; background: #fff; box-shadow: 0 12px 30px rgba(29,13,70,.18); font-size: 9px; font-weight: 800; }
.demo-phone figcaption::before { width: 7px; height: 7px; border-radius: 50%; background: #6d45dd; box-shadow: 0 0 0 5px #eee9ff; content: ""; }
.demo-phone img { width: 100%; height: auto; border-radius: 24px 24px 0 0; }

.closing-action { display: flex; width: min(1080px,calc(100% - 40px)); align-items: center; justify-content: space-between; gap: 28px; margin: 54px auto 70px; padding: 27px 30px; border: 1px solid var(--line); border-radius: 22px; background: var(--lilac); }
.closing-action p { display: flex; align-items: baseline; gap: 12px; margin: 0; }
.closing-action strong { font: 800 18px/1.2 "Manrope",sans-serif; }
.closing-action p span { color: var(--muted); font-size: 13px; }
.closing-action > a { padding: 14px 18px; border-radius: 14px; color: #fff; background: var(--gradient); font-size: 13px; font-weight: 800; white-space: nowrap; }
.closing-action > a span { margin-left: 8px; }

footer { display: flex; width: min(1080px,calc(100% - 40px)); align-items: center; justify-content: space-between; gap: 24px; margin: 0 auto; padding: 24px 0 38px; border-top: 1px solid var(--line); color: #7b7485; font-size: 12px; }
.footer-brand { color: var(--ink); }
.footer-brand .brand-wordmark { width: 118px; }
.mobile-install { display: none; }

@media (max-width: 940px) {
  .hero { grid-template-columns: 1fr; padding: 48px; }
  .hero-copy { max-width: 720px; }
  .hero-demo { width: min(100%,700px); justify-self: center; }
  .closing-action p { display: grid; gap: 5px; }
}

@media (max-width: 620px) {
  body { padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
  .site-header { width: calc(100% - 28px); height: 68px; }
  .brand-wordmark { width: 126px; }
  .brand strong { font-size: 12px; }
  .header-cta { padding: 10px 15px; font-size: 12px; }
  .request-handoff { width: calc(100% - 20px); grid-template-columns: 40px 1fr; gap: 12px; margin: 2px auto 12px; padding: 15px; border-radius: 19px; }
  .request-handoff__mark { width: 40px; height: 40px; border-radius: 12px; }
  .request-handoff__copy > strong { font-size: 14px; }
  .request-handoff__copy p { font-size: 11px; }
  .request-handoff button { grid-column: 1 / -1; width: 100%; }
  .hero { width: calc(100% - 20px); grid-template-columns: 1fr; gap: 34px; margin-top: 0; padding: 34px 19px 0; border-radius: 27px; }
  .hero-copy { padding-top: 0; }
  .eyebrow { font-size: 9px; }
  h1 { margin: 18px 0; font-size: clamp(37px,11.5vw,49px); }
  .hero-intro { font-size: 16px; line-height: 1.52; }
  .hero-actions { display: grid; gap: 16px; margin-top: 25px; }
  .primary-cta { width: 100%; min-height: 54px; }
  .hero-demo { display: block; min-height: 0; padding: 25px 17px 0; border-radius: 24px 9px 24px 9px; }
  .demo-flow { padding: 0 3px 27px; }
  .demo-flow ol { gap: 13px; }
  .demo-flow li { grid-template-columns: 34px 1fr; gap: 10px; }
  .demo-flow li > span { width: 34px; height: 34px; }
  .demo-phone { width: 205px; justify-self: center; margin-inline: auto; border-radius: 30px 30px 0 0; }
  .demo-phone figcaption { left: 10px; }
  .closing-action { width: calc(100% - 30px); align-items: stretch; flex-direction: column; gap: 18px; margin-bottom: 52px; padding: 23px; }
  .closing-action p { display: grid; gap: 5px; }
  .closing-action > a { text-align: center; }
  footer { width: calc(100% - 36px); flex-direction: column; gap: 12px; padding-bottom: 25px; text-align: center; }
  .mobile-install { position: fixed; z-index: 20; right: 9px; bottom: calc(8px + env(safe-area-inset-bottom)); left: 9px; display: grid; min-height: 66px; grid-template-columns: 46px 1fr auto; align-items: center; gap: 10px; padding: 8px 9px; border: 1px solid var(--line); border-radius: 19px; background: rgba(255,255,255,.94); box-shadow: 0 13px 40px rgba(42,25,82,.2); backdrop-filter: blur(18px); }
  .mobile-install > img { width: 46px; border-radius: 13px; }
  .mobile-install div { min-width: 0; }
  .mobile-install strong,.mobile-install span { display: block; }
  .mobile-install strong { font-size: 12px; }
  .mobile-install span { margin-top: 3px; overflow: hidden; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
  .mobile-install a { padding: 11px 17px; border-radius: 13px; color: #fff; background: var(--gradient); font-size: 12px; font-weight: 800; }
}

@media (prefers-reduced-motion: no-preference) {
  .hero-copy > * { animation: rise .55s both; }
  .hero-copy > *:nth-child(2) { animation-delay: .06s; }
  .hero-copy > *:nth-child(3) { animation-delay: .12s; }
  .hero-copy > *:nth-child(4) { animation-delay: .18s; }
  .hero-demo { animation: rise .65s .12s both; }
  @keyframes rise { from { opacity: 0; transform: translateY(15px); } }
}