:root {
  --ink: #151a3a; --mute: #6b7194; --line: #e9eaf6; --bg: #f7f8ff; --surface: #fff;
  --acc: #4f3df5; --acc2: #a855f7; --soft: #f1efff; --acc-ink: #3d2fd0; --navy: #0d1033;
  --green: #2f9e6b; --green-soft: #e3f6ec; --red: #e5484d; --amber: #f5a524;
  --sh: 0 1px 2px rgba(21,26,58,.04), 0 18px 40px -18px rgba(21,26,58,.2);
  --field-h: 38px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: Figtree, "Segoe UI", system-ui, sans-serif; font-size: 15px; line-height: 1.55; color: var(--ink); background: var(--bg); }
body.lock { overflow: hidden; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
[hidden] { display: none !important; }
.wrap { max-width: 1160px; margin: 0 auto; padding: 0 24px; }
.sec { padding: 84px 0; }
.ic { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.grad { background: linear-gradient(90deg, var(--acc), var(--acc2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tag { display: inline-flex; align-items: center; gap: 8px; height: 26px; padding: 0 12px; border-radius: 13px; background: var(--soft); color: var(--acc-ink); font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.sec-h { text-align: center; max-width: 680px; margin: 0 auto 44px; }
.sec-h h2 { margin: 14px 0 12px; font-size: 40px; line-height: 1.1; font-weight: 800; letter-spacing: -.03em; }
.sec-h p { color: var(--mute); font-size: 16.5px; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 22px; border: 0; border-radius: 20px; font: inherit; font-weight: 700; font-size: 14px; cursor: pointer; background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); transition: transform .15s, filter .15s; }
.btn:hover { transform: translateY(-1px); }
.btn-pri { background: var(--acc); color: #fff; box-shadow: 0 12px 24px -12px rgba(79,61,245,.8); }
.btn-pri:hover { filter: brightness(1.08); }
.btn-lg { height: 46px; padding: 0 28px; border-radius: 23px; font-size: 15px; }
.btn-sm { height: 36px; padding: 0 18px; }
.btn-w { width: 100%; }
.btn .ic { width: 16px; height: 16px; }

/* top strip + nav */
.strip-t { background: linear-gradient(90deg, #0d1033, #231f63); color: #e6e4ff; font-size: 12.5px; font-weight: 600; text-align: center; padding: 8px 16px; }
.strip-t b { color: #fff; }
.strip-t i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #5eead4; margin-right: 8px; animation: pls 1.6s infinite; }
@keyframes pls { 50% { box-shadow: 0 0 0 6px rgba(94,234,212,.2); } }
.nav-w { position: sticky; top: 0; z-index: 40; background: rgba(247,248,255,.82); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(233,234,246,.7); }
.nav { display: flex; align-items: center; height: 68px; gap: 24px; }
.logo { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 20px; letter-spacing: -.02em;width: 200px; }
.logo i { width: 34px; height: 34px; border-radius: 11px; background: linear-gradient(135deg, var(--acc), var(--acc2)); color: #fff; display: grid; place-items: center; font-style: normal; font-size: 17px; }
.nav-m { display: flex; gap: 32px; margin: 0 auto; }
.nav-m a { font-weight: 600; font-size: 13.5px; opacity: .8; }
.nav-m a:hover { color: var(--acc); opacity: 1; }
.nav-r { display: flex; gap: 10px; }

/* hero */
.hero { position: relative; overflow: hidden; background: radial-gradient(900px 480px at 8% -10%, #dcd9ff, transparent 62%), radial-gradient(800px 480px at 100% 0, #f1d9ff, transparent 58%); }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); gap: 48px; align-items: center; padding-top: 56px; padding-bottom: 72px; }
.hero h1 { margin: 18px 0 16px; font-size: 62px; line-height: 1.02; font-weight: 800; letter-spacing: -.04em; }
.hero .lead { color: var(--mute); font-size: 17px; max-width: 470px; margin-bottom: 22px; }
.nums { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 24px; }
.nums div { padding: 8px 14px; border-radius: 14px; background: rgba(255,255,255,.75); box-shadow: inset 0 0 0 1px var(--line); line-height: 1.2; }
.nums b { display: block; font-size: 19px; font-weight: 800; letter-spacing: -.02em; }
.nums span { font-size: 11.5px; color: var(--mute); font-weight: 600; }
.hform { background: #fff; border-radius: 22px; padding: 18px 18px 16px; box-shadow: var(--sh), inset 0 0 0 1px var(--line); max-width: 500px; transition: box-shadow .3s; }
.hform.pulse { box-shadow: 0 0 0 4px rgba(79,61,245,.28), var(--sh); }
.hform label, .lbl { display: block; margin: 0 0 5px; font-weight: 700; font-size: 13px; }
.hform .f { margin-bottom: 10px; }
.hform small { display: block; margin-top: 10px; text-align: center; color: var(--mute); font-size: 12px; }
.hero-links { margin-top: 16px; display: flex; gap: 18px; font-size: 13px; font-weight: 700; color: var(--acc-ink); }

/* fields */
.in { display: block; width: 100%; height: var(--field-h); border: 0; border-radius: 12px; padding: 0 12px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); font: inherit; font-size: 14px; outline: 0; }
.in::placeholder { color: #9aa5c0; }
.in:focus { box-shadow: inset 0 0 0 1.5px var(--acc), 0 0 0 3px rgba(79,61,245,.2); }
.f.bad .in { box-shadow: inset 0 0 0 1.5px var(--red); }
.slug { display: flex; align-items: stretch; height: var(--field-h); border-radius: 12px; overflow: hidden; background: #fff; box-shadow: inset 0 0 0 1px #c9cdea; }
.slug:focus-within { box-shadow: inset 0 0 0 1.5px var(--acc), 0 0 0 3px rgba(79,61,245,.2); }
.slug.ok { box-shadow: inset 0 0 0 1.5px var(--green); }
.slug.ok:focus-within { box-shadow: inset 0 0 0 1.5px var(--green), 0 0 0 3px rgba(47,158,107,.2); }
.slug.no { box-shadow: inset 0 0 0 1.5px var(--red); }
.slug .in { box-shadow: none; border-radius: 0; font-family: "DM Mono", monospace; flex: 1; min-width: 0; height: auto; }
.slug .in:focus { box-shadow: none; }
.slug .suf { padding: 0 12px; border-left: 1px solid #c9cdea; background: var(--bg); color: var(--mute); font: 500 13px "DM Mono", monospace; display: flex; align-items: center; white-space: nowrap; }
.st { display: flex; align-items: center; gap: 8px; min-height: 30px; margin-top: 7px; padding: 5px 10px; border-radius: 10px; font-size: 12.5px; font-weight: 600; color: var(--mute); background: var(--bg); transition: background .15s, color .15s; }
.st i { flex: none; width: 17px; height: 17px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 10.5px; font-weight: 800; background: var(--line); color: var(--mute); }
.st code { font: 500 12.5px "DM Mono", monospace; }
.st.ok { background: var(--green-soft); color: var(--green); } .st.ok i { background: var(--green); color: #fff; }
.st.no { background: #fdecec; color: var(--red); } .st.no i { background: var(--red); color: #fff; }
.st.wait i { background: transparent; border: 2px solid var(--line); border-top-color: var(--acc); animation: spn .7s linear infinite; }
@keyframes spn { to { transform: rotate(360deg); } }
.sug { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.sug button { height: 26px; padding: 0 10px; border: 0; border-radius: 13px; background: var(--soft); color: var(--acc-ink); font: 500 12px "DM Mono", monospace; cursor: pointer; }
.err { color: var(--red); font-size: 12.5px; margin-top: 3px; }
.err:empty { display: none; }

/* hero preview */
.pv-wrap { position: relative; }
.browser { background: #fff; border-radius: 22px; box-shadow: 0 40px 70px -30px rgba(21,26,58,.5), inset 0 0 0 1px var(--line); overflow: hidden; }
.b-bar { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: #f6f7fd; border-bottom: 1px solid var(--line); }
.dots { display: flex; gap: 6px; } .dots i { width: 10px; height: 10px; border-radius: 50%; background: #d6dbf0; }
.b-url { flex: 1; min-width: 0; height: 26px; border-radius: 13px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); font: 500 12px/26px "DM Mono", monospace; color: var(--mute); padding: 0 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.b-url b { color: var(--acc-ink); font-weight: 500; }
.shop { padding: 18px; }
.shop-h { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; font-weight: 800; font-size: 17px; gap: 10px; }
.shop-h span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shop-h span:last-child { font-size: 12px; color: var(--mute); font-weight: 600; flex: none; }
.shop-ban { height: 130px; border-radius: 16px; background: linear-gradient(135deg, var(--navy), #1b3475 60%, #4b6fe0); color: #fff; padding: 20px; display: flex; flex-direction: column; justify-content: center; }
.shop-ban b { font-size: 20px; letter-spacing: -.01em; } .shop-ban small { opacity: .75; }
.shop-g { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 12px; }
.prod { border-radius: 14px; box-shadow: inset 0 0 0 1px var(--line); padding: 8px; }
.prod i { display: block; height: 78px; border-radius: 10px; background: linear-gradient(135deg, #fff, #cbd8ff); margin-bottom: 8px; }
.prod:nth-child(2) i { background: linear-gradient(135deg, #fff, #eadfff); } .prod:nth-child(3) i { background: linear-gradient(135deg, #fff, #d4f0e0); }
.prod b { display: block; font-size: 12px; } .prod small { color: var(--acc-ink); font-weight: 700; font-size: 12px; }
.chip { position: absolute; display: flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 16px; background: #fff; box-shadow: var(--sh), inset 0 0 0 1px var(--line); font-weight: 700; font-size: 12.5px; animation: flt 5s ease-in-out infinite; }
.chip i { width: 22px; height: 22px; border-radius: 50%; background: var(--green-soft); color: var(--green); display: grid; place-items: center; font-style: normal; font-size: 12px; }
.chip.c1 { left: -26px; top: 70px; } .chip.c2 { right: -18px; bottom: 54px; animation-delay: -2.5s; } .chip.c2 i { background: var(--soft); color: var(--acc); }
@keyframes flt { 50% { transform: translateY(-9px); } }

/* brands */
.proof { background: #fff; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.proof .wrap { display: block; padding-top: 44px; padding-bottom: 44px; }
.proof h3 { font-size: 19px; line-height: 1.25; font-weight: 800; letter-spacing: -.02em; margin: 8px 0 6px; }
.proof p { color: var(--mute); font-size: 12.5px; }
.facts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.facts span { padding: 4px 10px; border-radius: 10px; background: var(--soft); color: var(--acc-ink); font-size: 11.5px; font-weight: 700; }

/* bento */
.bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.bc { background: #fff; border-radius: 26px; padding: 22px; box-shadow: var(--sh), inset 0 0 0 1px var(--line); display: flex; flex-direction: column; overflow: hidden; }
.bc.w4 { grid-column: span 4; } .bc.w2 { grid-column: span 2; }
.bc h3 { margin: 18px 0 6px; font-size: 20px; font-weight: 800; letter-spacing: -.02em; }
.bc p { color: var(--mute); font-size: 14px; }
.demo { flex: 1; min-height: 190px; border-radius: 18px; background: linear-gradient(160deg, #f6f5ff, #fff); box-shadow: inset 0 0 0 1px var(--line); padding: 16px; display: flex; flex-direction: column; justify-content: center; gap: 10px; position: relative; overflow: hidden; }
.d-url { display: flex; align-items: center; gap: 4px; height: 40px; padding: 0 14px; border-radius: 20px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); font: 500 15px "DM Mono", monospace; }
.d-url b { color: var(--acc-ink); font-weight: 500; } .d-url span { color: var(--mute); }
.d-url em { margin-left: auto; font: 700 11px Figtree, sans-serif; font-style: normal; padding: 3px 9px; border-radius: 10px; background: var(--green-soft); color: var(--green); }
.caret { width: 2px; height: 18px; background: var(--acc); animation: blk 1s steps(1) infinite; }
@keyframes blk { 50% { opacity: 0; } }
.d-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.d-tiles i { height: 46px; border-radius: 10px; background: linear-gradient(135deg, #fff, #cbd8ff); box-shadow: inset 0 0 0 1px var(--line); }
.d-tiles i:nth-child(2) { background: linear-gradient(135deg, #fff, #eadfff); } .d-tiles i:nth-child(3) { background: linear-gradient(135deg, #fff, #d4f0e0); } .d-tiles i:nth-child(4) { background: linear-gradient(135deg, #fff, #ffe4d2); }
.nf { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: #fff; box-shadow: var(--sh), inset 0 0 0 1px var(--line); font-size: 12.5px; opacity: 0; animation: nfa 7s infinite; }
.nf:nth-child(2) { animation-delay: 1.2s; } .nf:nth-child(3) { animation-delay: 2.4s; }
.nf i { width: 28px; height: 28px; border-radius: 9px; background: var(--soft); color: var(--acc); display: grid; place-items: center; font-style: normal; font-weight: 800; flex: none; }
.nf b { display: block; font-size: 12.5px; } .nf span { color: var(--mute); font-size: 11.5px; }
@keyframes nfa { 0% { opacity: 0; transform: translateY(14px); } 8%, 82% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.cl { display: grid; gap: 11px; }
.cl .r div { display: flex; justify-content: space-between; font-size: 12px; font-weight: 700; margin-bottom: 4px; }
.cl .r i { display: block; height: 7px; border-radius: 4px; background: var(--line); overflow: hidden; }
.cl .r i::after { content: ""; display: block; height: 100%; width: 0; border-radius: 4px; background: linear-gradient(90deg, var(--acc), var(--acc2)); transition: width 1.2s cubic-bezier(.2,.8,.2,1); }
.in-view .cl .r i::after { width: var(--w); }
.d-dom { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; }
.d-dom .p { padding: 10px 16px; border-radius: 20px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); font: 500 14px "DM Mono", monospace; }
.d-dom .p.b { background: var(--acc); color: #fff; box-shadow: 0 12px 22px -12px rgba(79,61,245,.9); animation: glw 3s infinite; }
.d-dom .a { color: var(--acc); font-size: 20px; font-weight: 800; }
@keyframes glw { 50% { box-shadow: 0 0 0 7px rgba(79,61,245,.18); } }
.d-btn { align-self: center; padding: 6px 14px; border-radius: 14px; background: var(--soft); color: var(--acc-ink); font-weight: 700; font-size: 12px; }

/* preview section */
.showc { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 22px; align-items: start; }
.cap { margin-bottom: 12px; }
.note-s { text-align: center; color: var(--mute); font-size: 12px; margin-top: 20px; }
.showc .browser { box-shadow: 0 40px 70px -34px rgba(21,26,58,.45), inset 0 0 0 1px var(--line); }
.sf { padding: 16px; }
.sf-h { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.sf-h b { font-size: 16px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 42%; }
.sf-s { flex: 1; height: 30px; border-radius: 15px; background: var(--bg); color: #a3a8c8; font-size: 11.5px; line-height: 30px; padding: 0 12px; }
.sf-c { font-size: 11.5px; font-weight: 700; padding: 6px 12px; border-radius: 15px; background: var(--ink); color: #fff; white-space: nowrap; }
.sf-ban { height: 150px; border-radius: 18px; background: linear-gradient(120deg, var(--navy), #1b3475 55%, #6b7cff); color: #fff; padding: 22px; display: flex; align-items: center; position: relative; overflow: hidden; }
.sf-ban::after { content: ""; position: absolute; right: -30px; top: -30px; width: 150px; height: 150px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.35), transparent 65%); }
.sf-ban small { display: block; font-size: 10px; letter-spacing: .1em; opacity: .75; margin-bottom: 6px; font-weight: 700; }
.sf-ban b { display: block; font-size: 19px; line-height: 1.2; max-width: 230px; margin-bottom: 12px; }
.sf-ban u { text-decoration: none; display: inline-block; padding: 6px 14px; border-radius: 14px; background: #fff; color: var(--ink); font-size: 11.5px; font-weight: 800; }
.sf-cats { display: flex; gap: 6px; margin: 14px 0 12px; flex-wrap: wrap; }
.sf-cats span { font-size: 11.5px; font-weight: 700; padding: 5px 12px; border-radius: 14px; background: var(--bg); color: var(--mute); }
.sf-cats .on { background: var(--acc); color: #fff; }
.sf-g { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sfp { position: relative; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--line); padding: 8px; }
.sfp i { display: block; height: 100px; border-radius: 10px; background: linear-gradient(135deg, #fff, #cbd8ff); margin-bottom: 8px; }
.sfp:nth-child(2) i { background: linear-gradient(135deg, #fff, #eadfff); } .sfp:nth-child(3) i { background: linear-gradient(135deg, #fff, #d4f0e0); } .sfp:nth-child(4) i { background: linear-gradient(135deg, #fff, #ffe4d2); }
.sfp em { position: absolute; top: 14px; left: 14px; z-index: 1; font-style: normal; font-size: 9.5px; font-weight: 800; padding: 2px 8px; border-radius: 9px; background: var(--acc); color: #fff; }
.sfp b { display: block; font-size: 12.5px; } .sfp small { color: var(--acc-ink); font-weight: 800; font-size: 12.5px; }
.db { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; padding: 12px; background: linear-gradient(160deg, #f6f5ff, #fff); }
.db-side { background: #fff; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--line); display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 10px 0; align-self: start; }
.db-side i { width: 24px; height: 24px; border-radius: 8px; background: var(--line); } .db-side i.on { background: var(--acc); }
.db-main { min-width: 0; }
.db-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.db-top b { font-size: 14px; font-weight: 800; } .db-top span { font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); color: var(--mute); }
.db-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 10px; }
.dbs { background: #fff; border-radius: 12px; padding: 9px 10px; box-shadow: inset 0 0 0 1px var(--line); }
.dbs small { display: block; font-size: 10px; color: var(--mute); font-weight: 600; } .dbs b { font-size: 15px; font-weight: 800; letter-spacing: -.02em; } .dbs em { display: block; font-style: normal; font-size: 10px; font-weight: 700; color: var(--green); }
.db-chart { background: #fff; border-radius: 14px; padding: 12px 12px 8px; box-shadow: inset 0 0 0 1px var(--line); margin-bottom: 10px; }
.db-chart .h { display: flex; justify-content: space-between; font-size: 11px; margin-bottom: 4px; } .db-chart .h span { color: var(--green); font-weight: 700; }
.db-chart svg { display: block; width: 100%; }
.db-chart .ln { stroke-dasharray: 700; stroke-dashoffset: 700; transition: stroke-dashoffset 1.8s ease; }
.in-view .db-chart .ln { stroke-dashoffset: 0; }
.db-chart .xl { display: flex; justify-content: space-between; font-size: 9.5px; color: #a3a8c8; margin-top: 4px; }
.db-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.db-box { background: #fff; border-radius: 14px; padding: 10px 12px; box-shadow: inset 0 0 0 1px var(--line); }
.db-box h5 { margin: 0 0 8px; font-size: 11px; font-weight: 800; }
.tb { margin-bottom: 8px; font-size: 10.5px; } .tb div { display: flex; justify-content: space-between; font-weight: 600; margin-bottom: 3px; }
.tb i { display: block; height: 5px; border-radius: 3px; background: var(--line); overflow: hidden; }
.tb i::after { content: ""; display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--acc), var(--acc2)); border-radius: 3px; transition: width 1.2s ease; }
.in-view .tb i::after { width: var(--w); }
.od { display: flex; align-items: center; gap: 8px; font-size: 10.5px; margin-bottom: 8px; color: var(--mute); line-height: 1.25; }
.od b { display: block; font-weight: 700; color: var(--ink); }
.od .av { width: 24px; height: 24px; font-size: 9px; margin: 0; border: 0; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 800; flex: none; }
.od .s { margin-left: auto; padding: 2px 8px; border-radius: 10px; font-weight: 700; font-size: 9.5px; background: var(--green-soft); color: var(--green); white-space: nowrap; }
.od .s.w { background: #fff3df; color: #b7791f; } .od .s.p { background: var(--soft); color: var(--acc-ink); }
@media (max-width: 1000px) { .showc { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .db-stats { grid-template-columns: 1fr 1fr; } .db-cols { grid-template-columns: 1fr; } .db { grid-template-columns: 1fr; } .db-side { display: none; } }

/* how it works (dark) */
.dark-s { background: radial-gradient(700px 400px at 90% 0, #3b2a8f, transparent 60%), linear-gradient(160deg, #0b0e2e, #171a52); color: #fff; }
.dark-s .sec-h p { color: rgba(255,255,255,.7); } .dark-s .tag { background: rgba(255,255,255,.12); color: #d9d5ff; }
.steps3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.s3 { padding: 26px; border-radius: 24px; background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); position: relative; }
.s3 em { position: absolute; top: 22px; right: 24px; font: 500 12px "DM Mono", monospace; font-style: normal; color: #a9b4ff; }
.s3 .n { font-size: 56px; font-weight: 800; line-height: 1; letter-spacing: -.04em; background: linear-gradient(135deg, #fff, #8f9bff); -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: 18px; }
.s3 h3 { font-size: 20px; font-weight: 800; margin-bottom: 6px; } .s3 p { color: rgba(255,255,255,.7); font-size: 14px; }
.live { margin-top: 18px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.live div { padding: 14px 12px; border-radius: 16px; background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); font-size: 12.5px; font-weight: 700; text-align: center; color: rgba(255,255,255,.55); animation: lv 10s infinite; }
.live div:nth-child(2) { animation-delay: 2s; } .live div:nth-child(3) { animation-delay: 4s; } .live div:nth-child(4) { animation-delay: 6s; } .live div:nth-child(5) { animation-delay: 8s; }
.live b { display: block; font-size: 18px; margin-bottom: 2px; }
@keyframes lv { 0%, 18% { background: rgba(94,234,212,.2); color: #fff; box-shadow: inset 0 0 0 1.5px #5eead4; } 22%, 100% { background: rgba(255,255,255,.06); color: rgba(255,255,255,.55); } }

/* timeline */
.tl { display: grid; grid-template-columns: repeat(6, 1fr); position: relative; padding-top: 6px; }
.tl::before { content: ""; position: absolute; left: 8%; right: 8%; top: 25px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, var(--acc), var(--acc2), var(--line)); }
.tp { text-align: center; padding: 0 8px; position: relative; }
.tp i { display: grid; place-items: center; width: 38px; height: 38px; margin: 0 auto 12px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px var(--acc), var(--sh); font-style: normal; font-weight: 800; font-size: 12px; color: var(--acc-ink); position: relative; }
.tp.end i { box-shadow: 0 0 0 3px #c9cdea, var(--sh); color: var(--mute); }
.tp b { display: block; font-size: 14px; } .tp span { color: var(--mute); font-size: 12.5px; display: block; margin-top: 2px; }

/* pricing */
.pr { display: grid; grid-template-columns: 1.15fr .85fr; gap: 16px; max-width: 880px; margin: 0 auto; }
.pc { border-radius: 26px; padding: 30px; background: #fff; box-shadow: var(--sh), inset 0 0 0 1px var(--line); position: relative; }
.pc.pop { box-shadow: 0 0 0 2px #a99bff, 0 30px 50px -28px rgba(79,61,245,.6); background: linear-gradient(#fbfaff, #fff); }
.pc .bdg { position: absolute; top: -13px; left: 28px; height: 26px; padding: 0 14px; border-radius: 13px; background: var(--acc); color: #fff; font-size: 11.5px; font-weight: 800; display: inline-flex; align-items: center; }
.pc h3 { font-size: 22px; font-weight: 800; } .pc .big { font-size: 44px; font-weight: 800; letter-spacing: -.03em; margin: 8px 0 2px; } .pc .big small { font-size: 14px; color: var(--mute); font-weight: 600; letter-spacing: 0; margin-left: 8px; }
.pc ul { display: grid; gap: 9px; margin: 18px 0 24px; font-size: 14px; } .pc li { display: flex; gap: 10px; align-items: center; } .pc li .ic { color: var(--green); width: 16px; height: 16px; stroke-width: 2.8; }
.pc.alt { background: #fafaff; display: flex; flex-direction: column; justify-content: center; } .pc.alt p { color: var(--mute); margin: 8px 0 18px; }

/* faq */
.faq { max-width: 760px; margin: 0 auto; }
.chips { display: flex; justify-content: center; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; }
.chips button { height: 36px; padding: 0 18px; border: 0; border-radius: 18px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); font: inherit; font-weight: 700; font-size: 13px; color: var(--mute); cursor: pointer; }
.chips button.on { background: var(--ink); color: #fff; box-shadow: none; }
.fg { display: none; gap: 10px; } .fg.on { display: grid; }
.fg details { background: #fff; border-radius: 18px; box-shadow: inset 0 0 0 1px var(--line); padding: 16px 22px; }
.fg summary { cursor: pointer; font-weight: 700; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.fg summary::after { content: "+"; color: var(--mute); font-size: 20px; line-height: 1; }
.fg details[open] summary::after { content: "\2212"; }
.fg details p { margin-top: 10px; color: var(--mute); }

/* cta + footer */
.cta { border-radius: 32px; padding: 60px 30px; text-align: center; color: #fff; background: radial-gradient(500px 260px at 15% 0, rgba(255,255,255,.22), transparent 60%), linear-gradient(110deg, #5b6cff, #6b4bf5 55%, #a855f7); position: relative; overflow: hidden; }
.cta h2 { font-size: 40px; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; margin-bottom: 10px; } .cta p { opacity: .85; margin-bottom: 26px; font-size: 16.5px; }
.cta .btn { background: #fff; color: var(--ink); box-shadow: none; }
.foot { padding: 50px 0 28px; }
.fgrid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 28px; }
.fgrid p { color: var(--mute); font-size: 13px; margin: 12px 0; max-width: 260px; }
.fgrid h4 { font-size: 13px; font-weight: 800; margin-bottom: 12px; } .fgrid li { margin-bottom: 9px; font-size: 13px; color: var(--mute); } .fgrid li a:hover { color: var(--acc); }
.legal { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; border-top: 1px solid var(--line); margin-top: 30px; padding-top: 20px; color: var(--mute); font-size: 12.5px; }
.legal a { margin-left: 20px; }

.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .8s cubic-bezier(.22,1,.36,1), transform .8s cubic-bezier(.22,1,.36,1); transition-delay: var(--rd, 0s); will-change: opacity, transform; }
.js .reveal.in-view { opacity: 1; transform: none; will-change: auto; }

/* modal */
.ov { position: fixed; inset: 0; z-index: 100; display: none; align-items: center; justify-content: center; padding: 20px; background: rgba(13,16,51,.6); backdrop-filter: blur(4px); }
.ov.on { display: flex; animation: fdi .18s ease; }
@keyframes fdi { from { opacity: 0; } } @keyframes upi { from { opacity: 0; transform: translateY(14px) scale(.98); } }
.modal { position: relative; display: grid; grid-template-columns: 340px minmax(0, 1fr); width: 100%; max-width: 880px; max-height: calc(100vh - 40px); background: #fff; border-radius: 26px; overflow: hidden; box-shadow: 0 40px 80px -30px rgba(10,18,40,.6); animation: upi .22s ease; }
.x { position: absolute; top: 14px; right: 14px; z-index: 2; width: 34px; height: 34px; border: 0; border-radius: 50%; background: var(--bg); color: var(--mute); font-size: 18px; cursor: pointer; line-height: 1; }
.m-side { background: linear-gradient(160deg, #0f1546, #231f63 70%, #2e3166); color: #fff; padding: 28px 26px; display: flex; flex-direction: column; justify-content: space-between; gap: 22px; }
.m-side h2 { font-size: 22px; line-height: 1.2; font-weight: 800; letter-spacing: -.02em; margin-bottom: 8px; } .m-side p { color: rgba(255,255,255,.72); font-size: 13.5px; }
.m-side ul { display: grid; gap: 8px; font-size: 13px; color: rgba(255,255,255,.85); } .m-side li::before { content: "\2713"; color: #6fcf97; font-weight: 800; margin-right: 9px; }
.m-side .browser { box-shadow: 0 20px 40px -20px rgba(0,0,0,.6); border-radius: 16px; }
.m-side .b-bar { padding: 9px 12px; } .m-side .b-url { height: 20px; line-height: 20px; font-size: 10.5px; padding: 0 9px; }
.m-side .shop { padding: 12px; } .m-side .shop-h { font-size: 13px; margin-bottom: 8px; } .m-side .shop-h span:last-child { font-size: 10.5px; }
.m-side .shop-ban { height: 56px; padding: 10px 12px; border-radius: 10px; } .m-side .shop-ban b { font-size: 12px; } .m-side .shop-ban small { font-size: 10px; }
.m-side .shop-g { gap: 6px; margin-top: 8px; } .m-side .prod { padding: 5px; border-radius: 8px; } .m-side .prod i { height: 34px; margin-bottom: 4px; } .m-side .prod b, .m-side .prod small { font-size: 9px; }
.m-main { padding: 28px 30px 26px; overflow-y: auto; min-width: 0; }
.stepper { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; padding-right: 40px; }
.sp { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 13px; color: var(--mute); }
.sp b { width: 24px; height: 24px; border-radius: 50%; background: var(--line); display: grid; place-items: center; font-size: 12px; }
.sp.on { color: var(--ink); } .sp.on b { background: var(--navy); color: #fff; } .sp.done b { background: var(--green-soft); color: var(--green); }
.sp-l { flex: 0 0 28px; height: 2px; background: var(--line); }
.m-main h1 { font-size: 22px; font-weight: 800; letter-spacing: -.02em; margin-bottom: 2px; } .m-sub { color: var(--mute); margin-bottom: 18px; font-size: 14px; }
.pane { display: none; } .pane.on { display: block; }
.g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.f { margin-bottom: 12px; } .g2 .f { margin-bottom: 0; }
.f label { display: block; margin: 0 0 4px; font-weight: 600; font-size: 13px; } .opt { color: var(--mute); font-weight: 500; }
.pw { position: relative; } .pw .in { padding-right: 70px; }
.pw button { position: absolute; right: 4px; top: 4px; height: 30px; padding: 0 10px; border: 0; border-radius: 9px; background: transparent; color: var(--acc-ink); font: inherit; font-weight: 600; font-size: 12.5px; cursor: pointer; }
.wa { display: flex; } .wa span { display: flex; align-items: center; padding: 0 12px; border-radius: 12px 0 0 12px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); color: var(--mute); font-weight: 600; } .wa .in { border-radius: 0 12px 12px 0; }
.terms { display: flex; gap: 10px; align-items: flex-start; margin: 4px 0 12px; font-size: 13px; cursor: pointer; } .terms input { margin-top: 3px; accent-color: var(--acc); }
.ts { height: 40px; border-radius: 12px; background: #f6f8fe; box-shadow: inset 0 0 0 1px var(--line); display: flex; align-items: center; gap: 10px; padding: 0 14px; color: var(--mute); font-size: 12.5px; margin-bottom: 12px; }
.ts i { width: 18px; height: 18px; border-radius: 50%; background: var(--green-soft); color: var(--green); display: grid; place-items: center; font-style: normal; font-size: 11px; font-weight: 800; }
.row { display: flex; gap: 10px; } .row .btn:first-child { flex: none; } .row .btn-pri { flex: 1; }
.bar-t { height: 8px; border-radius: 4px; background: var(--line); overflow: hidden; margin-bottom: 16px; } .bar-t i { display: block; height: 100%; width: 0; background: var(--acc); border-radius: 4px; transition: width .5s ease; }
.psteps { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 2px; }
.psteps li { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 14px; color: var(--mute); font-weight: 600; }
.psteps li b { width: 24px; height: 24px; border-radius: 50%; background: var(--line); color: var(--mute); display: grid; place-items: center; font-size: 12px; flex: none; }
.psteps li.run { background: var(--soft); color: var(--ink); } .psteps li.run b { background: var(--acc); color: #fff; animation: bwp 1s infinite; }
.psteps li.done { color: var(--ink); } .psteps li.done b { background: var(--green-soft); color: var(--green); }
.psteps li.fail { background: #fdecec; color: var(--red); } .psteps li.fail b { background: var(--red); color: #fff; }
@keyframes bwp { 50% { box-shadow: 0 0 0 5px rgba(79,61,245,.2); } }
.box { padding: 12px 14px; border-radius: 14px; font-size: 13.5px; margin-bottom: 14px; } .box b { display: block; }
.box.err { background: #fdecec; color: var(--red); } .box.ok { background: var(--green-soft); color: var(--green); } .box code { font: 500 13px "DM Mono", monospace; }
.wait { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; background: var(--soft); margin-bottom: 14px; font-size: 13px; }
.wait > i { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--acc); color: #fff; display: grid; place-items: center; font-style: normal; font-size: 15px; }
.wait b { display: block; font-size: 14px; } .wait span { color: var(--mute); } .wait span b { display: inline; font-size: inherit; color: var(--ink); }
.wait em { display: block; margin-top: 4px; font: 500 12px "DM Mono", monospace; font-style: normal; color: var(--acc-ink); }

@media (max-width: 1000px) {
  .hero .wrap { grid-template-columns: 1fr; } .chip { display: none; }
  .proof .wrap { grid-template-columns: 1fr; gap: 18px; }
  .bc.w4, .bc.w2 { grid-column: span 6; }
  .steps3 { grid-template-columns: 1fr; } .live { grid-template-columns: 1fr 1fr; }
  .tl { grid-template-columns: 1fr 1fr 1fr; row-gap: 26px; } .tl::before { display: none; }
  .pr { grid-template-columns: 1fr; } .fgrid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .nav-m { display: none; } .nav-r { margin-left: auto; }
  .hero h1 { font-size: 40px; } .sec { padding: 56px 0; } .sec-h h2, .cta h2 { font-size: 30px; }
  .ov { padding: 0; align-items: flex-end; }
  .modal { grid-template-columns: 1fr; max-width: none; max-height: 94vh; border-radius: 24px 24px 0 0; }
  .m-side { display: none; } .m-main { padding: 22px 18px; } .g2 { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } .reveal { opacity: 1; transform: none; } .nf { opacity: 1; } }

/* soft theme override */
:root { --ink: #1a1a1a; --mute: #666; --line: #ececec; --bg: #fff; --soft: #f4f4f5; --acc-ink: #4a3fc4; --navy: #1a1a1a;
  --sh: 0 1px 2px rgba(0,0,0,.03), 0 24px 48px -24px rgba(0,0,0,.12); }
body { font-family: Inter, "Segoe UI", system-ui, sans-serif; font-size: 15px; line-height: 1.6; }
.tag { height: 34px; padding: 0 22px; border-radius: 17px; background: #fff; color: #444; box-shadow: inset 0 0 0 1px #d9d9dc; font-size: 12px; font-weight: 500; letter-spacing: .12em; }
.sec-h { max-width: 760px; }
.sec-h h2, .cta h2 { font-weight: 700; letter-spacing: -.035em; color: var(--ink); }
.hero h1 { font-weight: 700; letter-spacing: -.045em; }
.sec-h p, .hero .lead { color: var(--mute); font-weight: 400; }
.grad { background: none; color: var(--acc); }
.strip-t { background: #f6f6f7; color: #555; box-shadow: inset 0 -1px 0 #ececec; }
.strip-t b { color: var(--ink); }
.nav-w { background: rgba(255,255,255,.85); border-bottom-color: #f0f0f0; }
.hero { background: radial-gradient(800px 420px at 10% -10%, #f3f1ff, transparent 62%), radial-gradient(700px 420px at 100% 0, #fbf1ff, transparent 58%); }
.nums div { background: #fff; box-shadow: inset 0 0 0 1px #ececec; }
.hform { box-shadow: var(--sh), inset 0 0 0 1px #ececec; }
.btn-pri { background: #1a1a1a; box-shadow: 0 10px 22px -12px rgba(0,0,0,.5); }
.btn-pri:hover { filter: none; background: #000; }
.logo i { background: #1a1a1a; }
.sec { background: #fff; }
#fitur { background: #fff; padding-top: 96px; }
.prow { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: center; margin-bottom: 84px; }
.prow:last-child { margin-bottom: 0; }
.prow.rev { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } .prow.rev .copy { order: 2; }
.copy { padding-left: 12px; }
.copy .ico { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: #e2f3e8; font-size: 28px; margin-bottom: 18px; }
.prow.rev .copy .ico { background: #e9e6fb; }
.copy h3 { font-size: 34px; font-weight: 700; line-height: 1.15; letter-spacing: -.035em; color: var(--ink); margin-bottom: 14px; }
.copy p { color: var(--mute); font-size: 16.5px; margin-bottom: 20px; }
.copy ul { display: grid; gap: 10px; font-size: 14.5px; color: #444; }
.copy li { display: flex; align-items: center; gap: 10px; }
.copy li .ic { width: 16px; height: 16px; color: #3a9b6a; stroke-width: 2.8; }
.showc { display: block; }
.showc .browser { box-shadow: 0 40px 80px -40px rgba(0,0,0,.22), 0 0 0 1px #ececec; }
.sf-ban { background: linear-gradient(120deg, #e9ecf7, #dfe6fb 60%, #efe6fb); color: var(--ink); }
.sf-ban::after { background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.8), transparent 65%); }
.sf-ban small { opacity: .6; } .sf-ban u { background: #1a1a1a; color: #fff; }
.sf-c { background: #1a1a1a; } .sf-cats .on { background: #1a1a1a; } .sfp em { background: #1a1a1a; }
.sfp small { color: var(--ink); }
.db { background: #fafafa; } .db-side i.on { background: #1a1a1a; }
.tb i::after { background: #8d84e8; }
.db-chart svg stop:first-child { stop-color: #8d84e8; }
.dark-s { background: #fafafa; color: var(--ink); }
.dark-s .sec-h p { color: var(--mute); } .dark-s .tag { background: #fff; color: #444; }
.s3 { background: #fff; box-shadow: inset 0 0 0 1px #ececec, var(--sh); }
.s3 em { color: #9a9aa2; }
.s3 .n { background: none; color: #1a1a1a; opacity: .9; font-weight: 700; }
.s3 p { color: var(--mute); }
.live div { background: #fff; box-shadow: inset 0 0 0 1px #ececec; color: #888; }
@keyframes lv { 0%, 18% { background: #e9f6ee; color: #1a1a1a; box-shadow: inset 0 0 0 1.5px #7cc79e; } 22%, 100% { background: #fff; color: #888; } }
.tl::before { background: linear-gradient(90deg, #cfcfd4, #cfcfd4); height: 2px; }
.tp i { box-shadow: 0 0 0 2px #1a1a1a, var(--sh); color: #1a1a1a; }
.pc { box-shadow: var(--sh), inset 0 0 0 1px #ececec; }
.pc.pop { box-shadow: 0 0 0 1.5px #1a1a1a, var(--sh); background: #fff; }
.pc .bdg { background: #1a1a1a; } .pc.alt { background: #fafafa; }
.cta { background: #f6f6f7; color: var(--ink); box-shadow: inset 0 0 0 1px #ececec; }
.cta .btn { background: #1a1a1a; color: #fff; }
.cta p { opacity: 1; color: var(--mute); }
@media (max-width: 1000px) { .prow, .prow.rev { grid-template-columns: 1fr; gap: 28px; } .prow.rev .copy { order: 0; } .copy h3 { font-size: 28px; } }

/* more benefits */
.copy .ico.g { background: #e2f3e8; } .copy .ico.b { background: #e4ebfb; } .copy .ico.o { background: #fdebd9; }
.kpi { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.kpi span { font-size: 32px; font-weight: 700; letter-spacing: -.03em; color: var(--ink); }
.kpi em { font-style: normal; color: var(--mute); font-size: 15px; }
.th-prof { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.th-prof b { font-size: 11px; color: var(--mute); font-weight: 500; margin-right: 4px; }
.th-prof span { font-size: 11.5px; font-weight: 500; padding: 4px 12px; border-radius: 14px; background: #f4f4f5; color: #555; cursor: pointer; }
.th-prof span.on { background: #1a1a1a; color: #fff; }
.sf[data-th="food"] .sf-ban { background: linear-gradient(120deg, #fdf0dc, #fbe3c4 60%, #f8dcc9); }
.sf[data-th="beauty"] .sf-ban { background: linear-gradient(120deg, #fbe9f0, #f6dbe9 60%, #efdcf7); }
.sf[data-th="gadget"] .sf-ban { background: linear-gradient(120deg, #e6eef9, #d6e3f8 60%, #dcdcf5); }
.co { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 16px; background: #fafafa; }
.co-c { background: #fff; border-radius: 14px; padding: 14px; box-shadow: inset 0 0 0 1px var(--line); }
.co-c h5 { margin: 0 0 10px; font-size: 12.5px; font-weight: 600; }
.co-l { display: grid; gap: 8px; }
.co-l li { display: grid; grid-template-columns: 22px 1fr auto; grid-template-areas: "i n c" "i d c"; column-gap: 8px; align-items: center; padding: 8px 10px; border-radius: 11px; box-shadow: inset 0 0 0 1px var(--line); font-size: 11px; }
.co-l li:first-child { box-shadow: inset 0 0 0 1.5px #1a1a1a; }
.co-l i { grid-area: i; width: 20px; height: 20px; border-radius: 6px; background: #e8e8ea; } .co-l b { grid-area: n; font-weight: 600; font-size: 12px; } .co-l span { grid-area: d; color: var(--mute); } .co-l em { grid-area: c; font-style: normal; font-weight: 600; }
.pay { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.pay span { font-size: 11px; font-weight: 500; padding: 5px 10px; border-radius: 12px; background: #f4f4f5; color: #444; }
.pay span:nth-child(2) { background: #1a1a1a; color: #fff; }
.co-t { display: flex; justify-content: space-between; font-size: 12px; padding-top: 10px; border-top: 1px solid var(--line); margin-bottom: 10px; } .co-t b { font-size: 14px; }
.co-c u { display: block; text-align: center; text-decoration: none; padding: 8px; border-radius: 16px; background: #1a1a1a; color: #fff; font-size: 12px; font-weight: 600; }
.dbv { padding: 18px; background: #fafafa; }
.dbv-h { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; } .dbv-h b { font: 500 13px "DM Mono", monospace; } .dbv-h span { font-size: 11px; color: var(--mute); }
.dbv table { width: 100%; border-collapse: collapse; background: #fff; border-radius: 14px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--line); font-size: 12px; }
.dbv td { padding: 11px 14px; border-bottom: 1px solid #f0f0f0; } .dbv tr:last-child td { border: 0; }
.dbv td:first-child { font: 500 12px "DM Mono", monospace; } .dbv td:nth-child(2) { color: var(--mute); } .dbv td:last-child { text-align: right; font-weight: 600; }
.dbv-f { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 12px; font-size: 12px; color: #444; } .dbv-f span { display: flex; align-items: center; gap: 6px; } .dbv-f .ic { width: 14px; height: 14px; color: #3a9b6a; stroke-width: 2.8; }
.imp { padding: 20px; background: #fafafa; text-align: center; }
.imp-s { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; } .pl { font-size: 12px; font-weight: 500; padding: 7px 16px; border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 1px #d9d9dc; }
.imp-a { font-size: 20px; color: #9a9aa2; margin: 8px 0; }
.imp-i { background: #fff; border-radius: 14px; padding: 14px 16px; box-shadow: inset 0 0 0 1px var(--line); text-align: left; }
.imp-i div { display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 4px; } .imp-i b { font-weight: 600; }
.imp-i i { display: block; height: 6px; border-radius: 3px; background: #eee; margin-bottom: 12px; overflow: hidden; } .imp-i i:last-of-type { margin: 0; }
.imp-i i::after { content: ""; display: block; height: 100%; width: 0; background: #7cc79e; border-radius: 3px; transition: width 1.4s ease; } .in-view .imp-i i::after { width: var(--w); }
.imp-n { display: flex; justify-content: center; align-items: center; gap: 6px; margin-top: 14px; font-size: 12.5px; font-weight: 500; } .imp-n .ic { width: 15px; height: 15px; color: #3a9b6a; stroke-width: 2.8; }
.sec.alt { background: #fafafa; }
.ftabs { max-width: 860px; margin: 0 auto; }
.ftb { margin-bottom: 22px; }
.fbox { background: #fff; border-radius: 24px; box-shadow: inset 0 0 0 1px #ececec, var(--sh); padding: 30px 34px; }
.ft { display: none; grid-template-columns: 1fr 1fr; gap: 14px 40px; } .ft.on { display: grid; }
.ft li { display: flex; align-items: center; gap: 12px; font-size: 15px; color: #333; }
.ft .ic { width: 18px; height: 18px; color: #3a9b6a; stroke-width: 2.6; padding: 3px; box-sizing: content-box; border-radius: 50%; background: #e2f3e8; }
@media (max-width: 700px) { .ft { grid-template-columns: 1fr; } .co { grid-template-columns: 1fr; } .fbox { padding: 22px; } }

/* fade mask on illustrations */
@media (min-width: 768px) {
  .prow .fr { padding-bottom: 6px; }
  .prow .browser { -webkit-mask-image: linear-gradient(to right, #000 62%, rgba(0,0,0,.45) 82%, transparent), linear-gradient(to bottom, #000 58%, transparent); -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, #000 62%, rgba(0,0,0,.45) 82%, transparent), linear-gradient(to bottom, #000 58%, transparent); mask-composite: intersect; box-shadow: none; }
  .prow.rev .browser { -webkit-mask-image: linear-gradient(to left, #000 62%, rgba(0,0,0,.45) 82%, transparent), linear-gradient(to bottom, #000 58%, transparent); mask-image: linear-gradient(to left, #000 62%, rgba(0,0,0,.45) 82%, transparent), linear-gradient(to bottom, #000 58%, transparent); }
}

@media (min-width: 768px) {
  .prow:has(.co, .dbv, .imp) .browser { -webkit-mask-image: linear-gradient(to right, #000 78%, rgba(0,0,0,.5) 92%, transparent), linear-gradient(to bottom, #000 80%, transparent); mask-image: linear-gradient(to right, #000 78%, rgba(0,0,0,.5) 92%, transparent), linear-gradient(to bottom, #000 80%, transparent); }
  .prow.rev:has(.co, .dbv, .imp) .browser { -webkit-mask-image: linear-gradient(to left, #000 78%, rgba(0,0,0,.5) 92%, transparent), linear-gradient(to bottom, #000 80%, transparent); mask-image: linear-gradient(to left, #000 78%, rgba(0,0,0,.5) 92%, transparent), linear-gradient(to bottom, #000 80%, transparent); }
}

/* inline icon + title */
.copy .ct { position: relative; margin-bottom: 14px; padding-top: 6px; }
.copy .ct h3 { margin: 0; padding-left: 76px; min-height: 76px; display: flex; align-items: center; }
.copy .ct .ico { position: absolute; left: -8px; top: 50%; transform: translateY(-50%); width: 84px; height: 84px; margin: 0; z-index: 0; }
.copy .ct h3 { position: relative; z-index: 1; }
.copy .ct .ico img { width: 52px; height: 52px; object-fit: contain; }
.copy .ct .ico { display: grid; place-items: center; border-radius: 50%; opacity: .95; }
.copy .ico.g, .prow.rev .copy .ico.g { background: #b8e3c6; } .copy .ico.b, .prow.rev .copy .ico.b { background: #c9d8f7; } .copy .ico.o, .prow.rev .copy .ico.o { background: #fbd9b8; }
@media (max-width: 1000px) { .copy .ct h3 { font-size: 26px; padding-left: 64px; } .copy .ct .ico { width: 64px; height: 64px; } .copy .ct .ico img { width: 40px; height: 40px; } }

/* brand chips */
.proof-h { text-align: center; margin-bottom: 26px; }
.proof-h h3 { font-size: 22px; font-weight: 600; letter-spacing: -.02em; margin: 14px 0 12px; }
.proof .facts { justify-content: center; margin: 0; }
.proof .facts span { background: #f4f4f5; color: #555; font-weight: 500; }
.brands { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; padding: 14px 0 22px; -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent); }
.bchip { display: inline-flex; align-items: center; gap: 14px; height: 64px; padding: 0 26px 0 14px; border-radius: 32px; background: #fff; box-shadow: inset 0 0 0 1px #e6e6e9; color: #333; font-size: 15px; font-weight: 500; opacity: 0; transform: translateY(8px); animation: bch .55s cubic-bezier(.22,1,.36,1) forwards; transition: box-shadow .25s, transform .25s; }
.bchip:first-child { box-shadow: inset 0 0 0 1.5px #3b82f6, 0 12px 28px -14px rgba(59,130,246,.45); color: #2563eb; }
.bchip:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1.5px #c8c8ce, 0 14px 28px -16px rgba(0,0,0,.25); }
.bchip:first-child:hover { box-shadow: inset 0 0 0 1.5px #3b82f6, 0 14px 28px -14px rgba(59,130,246,.5); }
.bchip .lg { display: grid; place-items: center; width: 70px; height: 40px; border-radius: 20px; background: #f6f6f7; padding: 0 10px; flex: none; }
.bchip .lg.dark { background: #1b1b2f; }
.bchip .lg img { max-width: 100%; max-height: 24px; object-fit: contain; }
.bchip .lg i { font-style: normal; font-weight: 700; font-size: 13px; color: #888; }
.bchip.more { color: #888; padding: 0 22px; border: 1.5px dashed #d0d0d5; box-shadow: none; background: transparent; cursor: pointer; }
.bchip.more:hover { box-shadow: none; border-color: #999; color: #444; }
.bchip.more b { font-size: 20px; font-weight: 400; margin-right: 6px; }
@keyframes bch { to { opacity: 1; transform: none; } }
@media (max-width: 700px) { .brands { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; padding-left: 4px; scrollbar-width: none; } .bchip { flex: none; } }

/* typography match */
:root { --ink: #181b31; --mute: #808291; }
body { font-weight: 400; line-height: 1.7; }
h1, h2, h3, h4, h5, h6 { font-weight: 600; color: #181b31; }
.hero h1 { font-weight: 600; letter-spacing: -.03em; line-height: 1.12; }
.sec-h h2, .cta h2 { font-weight: 600; letter-spacing: -.025em; line-height: 1.2; }
.copy h3 { font-weight: 600; letter-spacing: -.025em; line-height: 1.2; }
.copy p, .sec-h p, .hero .lead { color: #808291; line-height: 1.7; }
.kpi span { font-weight: 600; letter-spacing: -.02em; }
.kpi em { color: #808291; }
.proof-h h3 { font-weight: 600; }
.tag { font-weight: 500; letter-spacing: .1em; color: #555; }
.copy li, .ft li { color: #5b5e72; }

/* brand: ocean blue to navy */
:root { --brand: #0b4a8f; --brand-d: #081f4d; --brand-dd: #050f2b; }
.hero { background: radial-gradient(700px 420px at 85% 10%, rgba(56,152,236,.38), transparent 62%), radial-gradient(600px 400px at 0% 0%, rgba(24,112,200,.45), transparent 60%), linear-gradient(165deg, #0f6bb8 0%, #0b4a8f 38%, #081f4d 100%); color: #fff; }
.hero .wrap { padding-top: 64px; padding-bottom: 150px; position: relative; z-index: 1; }
.hero .tag { background: rgba(255,255,255,.12); color: #e4f0ff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.3); }
.hero h1 { color: #fff; }
.hero .grad { color: #8fd0ff; }
.hero .lead { color: rgba(255,255,255,.8); }
.nums div { background: rgba(255,255,255,.12); box-shadow: inset 0 0 0 1px rgba(255,255,255,.22); backdrop-filter: blur(6px); }
.nums b { color: #fff; } .nums span { color: rgba(255,255,255,.72); }
.hero-links { color: #cfe6ff; }
.hero .hform { box-shadow: 0 30px 60px -28px rgba(3,12,40,.7); }
.hero .hform, .hero .pv-wrap { color: var(--ink); }
.proof { border-top: 0; }
.hero .hform small { color: #808291; }
.hero .pv-wrap .browser { box-shadow: 0 40px 80px -30px rgba(3,12,40,.8); }
.curve { position: absolute; left: 0; right: 0; bottom: -1px; height: 110px; pointer-events: none; z-index: 0; }
.curve svg { display: block; width: 100%; height: 100%; overflow: visible; }
.curve.top { top: -1px; bottom: auto; transform: scaleY(-1); }
.btn-pri, .logo i { background: var(--brand-d); }
.btn-pri:hover { background: #0b2f6b; }
.hero .btn-pri { background: var(--brand-d); }
.foot { position: relative; background: var(--brand-dd); color: rgba(255,255,255,.72); padding-top: 150px; margin-top: 0; }
.foot .logo, .foot h4 { color: #fff; }
.foot p, .foot li a, .foot .legal, .foot .legal span { color: rgba(255,255,255,.62); }
.foot li a:hover { color: #fff; }
.foot .legal { border-top-color: rgba(255,255,255,.12); }
.foot .logo i { background: #1d5fb0; }
@media (max-width: 700px) { .curve { height: 60px; } .hero .wrap { padding-bottom: 90px; } .foot { padding-top: 90px; } }

@media (min-width: 768px) {
  .hero .pv-wrap .chip { z-index: 3; }
  .hero .pv-wrap .browser { -webkit-mask-image: linear-gradient(to right, #000 62%, rgba(0,0,0,.45) 82%, transparent), linear-gradient(to bottom, #000 58%, transparent); -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, #000 62%, rgba(0,0,0,.45) 82%, transparent), linear-gradient(to bottom, #000 58%, transparent); mask-composite: intersect; box-shadow: none; }
}

/* round 5 tweaks */
.hcheck { display: grid; gap: 10px; margin: 0 0 26px; }
.hcheck li { display: flex; align-items: center; gap: 12px; font-size: 16px; font-weight: 400; color: rgba(255,255,255,.92); }
.hcheck .ic { width: 20px; height: 20px; padding: 4px; box-sizing: content-box; border-radius: 50%; background: rgba(143,208,255,.22); color: #9fd8ff; stroke-width: 3; }
.hero-links { font-weight: 500; font-size: 13.5px; }
.st { font-weight: 400; }
.st code { font-weight: 400; }
.slug { border: 1px solid #b4bbd2; box-shadow: none; }
.slug:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(11,74,143,.18); }
.slug.ok { border-color: var(--green); box-shadow: none; } .slug.ok:focus-within { border-color: var(--green); box-shadow: 0 0 0 3px rgba(47,158,107,.2); }
.slug.no { border-color: var(--red); box-shadow: none; }
.slug .suf { border-left: 1px solid #d5d9e8; }
.in { box-shadow: inset 0 0 0 1px #c6cce0; }
.in:focus { box-shadow: inset 0 0 0 1.5px var(--brand), 0 0 0 3px rgba(11,74,143,.18); }
/* flow */
.flow { position: relative; height: 270px; max-width: 1100px; margin: 0 auto; }
.flow > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.flow path { fill: none; stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.fl-bg { stroke: #e3e6ee; }
.fl-ln { stroke: var(--brand-d); stroke-dasharray: 3000; stroke-dashoffset: 3000; }
.in-view .fl-ln { animation: fl 3.2s cubic-bezier(.45,.05,.3,1) .1s forwards; }
@keyframes fl { to { stroke-dashoffset: 0; } }
.fn { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -17px); width: 17%; text-align: center; opacity: 0; }
.in-view .fn { animation: fnp .6s cubic-bezier(.22,1,.36,1) var(--d) forwards; }
@keyframes fnp { from { opacity: 0; transform: translate(-50%, -7px); } to { opacity: 1; transform: translate(-50%, -17px); } }
.fp { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 16px 0 12px; border-radius: 17px; background: var(--brand-d); color: #fff; font-size: 13px; font-weight: 500; letter-spacing: .04em; white-space: nowrap; box-shadow: 0 0 0 5px #fff; }
.fp .bolt { width: 13px; height: 13px; }
.flow .fp path { fill: #9fd8ff; stroke: none; }
.fn b { display: block; margin-top: 14px; font-size: 14.5px; font-weight: 600; color: var(--ink); }
.fn em { display: block; margin-top: 2px; font-style: normal; font-size: 12.5px; line-height: 1.5; color: var(--mute); }
.fn:last-child .fp { background: #3a4668; }
@media (max-width: 900px) {
  .flow { height: auto; display: grid; gap: 22px; padding-left: 26px; }
  .flow > svg { display: none; }
  .flow::before { content: ""; position: absolute; left: 6px; top: 10px; bottom: 10px; width: 2px; background: #e3e6ee; }
  .fn { position: relative; left: auto; top: auto; transform: none; width: auto; text-align: left; opacity: 1; }
  .in-view .fn { animation: none; }
  .fn::before { content: ""; position: absolute; left: -26px; top: 12px; width: 14px; height: 14px; border-radius: 50%; background: var(--brand-d); box-shadow: 0 0 0 4px #fff; }
  .fn b { margin-top: 8px; }
  .fp { box-shadow: none; }
}

/* nav on brand color */
.nav-w { background: linear-gradient(90deg, #0f6bb8, #0d5ea6 50%, #0b4a8f); backdrop-filter: none; border-bottom: 1px solid rgba(255,255,255,.12); }
.nav-w .logo { color: #fff; } .nav-w .logo i { background: #fff; color: var(--brand-d); }
.nav-w .nav-m a { color: #fff; opacity: .85; font-weight: 500; } .nav-w .nav-m a:hover { color: #fff; opacity: 1; }
.nav-w .btn { background: transparent; color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.45); }
.nav-w .btn:hover { background: rgba(255,255,255,.12); }
.nav-w .btn-pri { background: #fff; color: var(--brand-d); box-shadow: none; }
.nav-w .btn-pri:hover { background: #eaf3ff; }
.strip-t { background: #081f4d; color: rgba(255,255,255,.82); box-shadow: none; }
.strip-t b { color: #fff; }

/* logo-only brand chips */
.bchip { justify-content: center; gap: 0; height: 68px; min-width: 150px; padding: 0 28px; cursor: default; }
.bchip:first-child, .bchip:first-child:hover { box-shadow: inset 0 0 0 1px #e6e6e9; color: inherit; }
.bchip:hover { transform: none; box-shadow: inset 0 0 0 1px #e6e6e9; }
.bchip img { display: block; max-width: 130px; max-height: 36px; object-fit: contain; }
.bchip.dark { background: #1b1b2f; box-shadow: none; }
.bchip.dark:first-child, .bchip.dark:hover, .bchip.dark:first-child:hover { box-shadow: none; }

/* hero like BrandPush */
.hero { background: radial-gradient(800px 460px at 12% 8%, rgba(70,130,200,.45), transparent 62%), linear-gradient(165deg, #2a6aa8 0%, #1c4c8a 42%, #102c5a 100%); }
.hero .wrap { padding-top: 120px; padding-bottom: 150px; }
.nav-w { background: transparent; margin-bottom: -68px; border-bottom: 0; transition: background .25s, box-shadow .25s; background: linear-gradient(90deg, #2a6aa8, #1c4c8a 60%, #14396e); box-shadow: 0 10px 30px -18px rgba(3,12,40,.7);}
.nav-w.solid { background: linear-gradient(90deg, #2a6aa8, #1c4c8a 60%, #14396e); box-shadow: 0 10px 30px -18px rgba(3,12,40,.7); }
.nav-w .nav-m a { font-weight: 400; font-size: 15px; opacity: .92; }
.nav-w .btn { background: transparent; box-shadow: none; font-weight: 400; font-size: 15px; padding: 0 14px; }
.nav-w .btn:hover { background: transparent; text-decoration: underline; }
.nav-w .btn-pri { background: transparent; color: #fff; box-shadow: none; font-weight: 500; }
.nav-w .btn-pri:hover { background: transparent; }
.strip-t { background: #0f2c5c; }
.hpill { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 18px 0 14px; border-radius: 19px; background: #fff; color: #181b31; font-size: 13.5px; font-weight: 500; }
.hpill .bl { width: 14px; height: 14px; fill: #f0485f; }
.hero h1 { font-size: 54px; font-weight: 700; letter-spacing: -.03em; line-height: 1.12; margin: 22px 0 16px; }
.hero .lead { color: #cdd8ec; font-size: 18px; max-width: 520px; margin-bottom: 22px; }
.hcheck { gap: 8px; margin-bottom: 26px; }
.hcheck li { align-items: flex-start; font-size: 16px; color: #cdd8ec; }
.hcheck li b { color: #fff; font-weight: 600; }
.hcheck .ck { flex: none; width: 20px; height: 20px; margin-top: 2px; padding: 4px; box-sizing: border-box; border-radius: 50%; background: #4caf7d; fill: none; stroke: #fff; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
.hero .hform .btn-pri { background: linear-gradient(90deg, #ff7a59, #f0485f); box-shadow: 0 14px 26px -14px rgba(240,72,95,.9); color: #fff; }
.hero .hform .btn-pri:hover { background: linear-gradient(90deg, #ff8a6b, #f4566d); }
.hero-act { margin-top: 18px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.ghost { display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 24px; border-radius: 23px; color: #fff; font-weight: 500; font-size: 15px; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.7); transition: background .2s; }
.ghost:hover { background: rgba(255,255,255,.1);color: #fff; }
.ghost svg { width: 13px; height: 13px; fill: #fff; }
.trust { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: #cdd8ec; }
.trust .ck { width: 16px; height: 16px; fill: none; stroke: #cdd8ec; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 700px) { .hero .wrap { padding-top: 100px; } .hero h1 { font-size: 38px; } }
.bchip .bn { font-weight: 600; font-size: 16px; color: #555; letter-spacing: -.01em; } .bchip.dark .bn { color: #fff; }

/* Inter typography */
body { font-feature-settings: "cv11", "ss03"; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, h5 { font-weight: 600; letter-spacing: -.035em; }
.hero h1 { font-weight: 600; letter-spacing: -.04em; line-height: 1.08; }
.sec-h h2, .cta h2 { font-weight: 600; letter-spacing: -.035em; line-height: 1.12; }
.copy h3 { letter-spacing: -.035em; line-height: 1.15; }
.tag, .hpill, .fp { letter-spacing: .06em; }
.btn, .btn-lg { font-weight: 600; }

/* base size 16px */
body { font-size: 16px; }
@media (max-width: 767px) { .in, .slug .in, input, textarea, select { font-size: 16px; } }
/* FAQ */
.fq { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 72px; align-items: start; }
.fq-l { position: sticky; top: 110px; }
.fq-lab { display: inline-block; font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: #5b6fa0; margin-bottom: 16px; }
.fq-l h2 { font-size: 42px; font-weight: 600; letter-spacing: -.035em; line-height: 1.1; margin-bottom: 18px; }
.fq-l h2 em { font-style: italic; font-weight: 500; color: #2a6aa8; }
.fq-l p { color: #6b6e82; max-width: 340px; margin-bottom: 22px; }
.fq-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; font-size: 15px; color: var(--brand); border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.fq-link:hover { color: var(--brand-d); }
.fq-r { border-top: 1px solid #e6e8ef; }
.fq-i { border-bottom: 1px solid #e6e8ef; }
.fq-q { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 0; background: none; border: 0; text-align: left; font: inherit; font-size: 17px; font-weight: 500; color: var(--ink); cursor: pointer; letter-spacing: -.01em; }
.fq-q:hover { color: var(--brand); }
.fq-q:focus-visible { outline: 2px solid var(--brand); outline-offset: 4px; border-radius: 6px; }
.fq-ch { flex: none; width: 18px; height: 18px; color: #8a8fa6; transition: transform .3s cubic-bezier(.22,1,.36,1); }
.fq-i.open .fq-ch { transform: rotate(180deg); color: var(--brand); }
.fq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s cubic-bezier(.22,1,.36,1); }
.fq-i.open .fq-a { grid-template-rows: 1fr; }
.fq-a > div { overflow: hidden; }
.fq-a p { padding: 0 40px 24px 0; color: #5f6377; line-height: 1.7; }
@media (max-width: 900px) { .fq { grid-template-columns: 1fr; gap: 32px; } .fq-l { position: static; } .fq-l h2 { font-size: 32px; } .fq-a p { padding-right: 0; } }

/* pricing comparison */
.pt-wrap { max-width: 1120px; margin: 0 auto; }
.pt { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; background: #fff; border-radius: 24px; box-shadow: inset 0 0 0 1px #e6e8ef, var(--sh); }
.pt th, .pt td { padding: 14px 12px; text-align: center; font-size: 14.5px; border-bottom: 1px solid #eef0f5; vertical-align: middle; }
.pt .pt-l { text-align: left; width: 27%; padding-left: 26px; color: #3a3e55; font-weight: 400; }
.pt thead th { position: sticky; top: 68px; z-index: 5; background: #fff; border-bottom: 1px solid #e6e8ef; vertical-align: top; padding-top: 26px; padding-bottom: 22px; }
.pt thead th:first-child { border-top-left-radius: 24px; } .pt thead th:last-child { border-top-right-radius: 24px; }
.pt-l b { display: block; font-size: 17px; font-weight: 600; color: var(--ink); } .pt-l span { display: block; font-size: 13px; color: #808291; margin-top: 4px; font-weight: 400; }
.pt-h { position: relative; }
.pt-h h4 { font-size: 17px; font-weight: 600; margin: 0; }
.best { font-size: 12.5px; color: #808291; margin: 2px 0 10px; min-height: 18px; }
.pp b { font-size: 26px; font-weight: 600; letter-spacing: -.03em; color: var(--ink); } .pp small { font-size: 12.5px; color: #808291; margin-left: 3px; }
.dly { display: inline-block; margin: 6px 0 14px; padding: 3px 10px; border-radius: 12px; background: #eef4fb; color: #2a5e99; font-size: 12px; font-weight: 500; }
.pbtn { display: block; text-align: center; margin: 0 6px; height: 40px; line-height: 40px; border-radius: 20px; font-size: 14px; font-weight: 600; color: var(--brand-d); box-shadow: inset 0 0 0 1.5px #c9d3e6; transition: background .2s; }
.pbtn:hover { background: #f1f5fb; }
.pbtn.pri { background: var(--brand-d); color: #fff; box-shadow: none; } .pbtn.pri:hover { background: #0b2f6b; }
.pt .pop { background: #f4f8fe; }
.pt thead th.pop { box-shadow: inset 0 3px 0 #2a6aa8; }
.badge { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); font-style: normal; font-size: 11.5px; font-weight: 600; white-space: nowrap; padding: 4px 12px; border-radius: 12px; background: #2a6aa8; color: #fff; }
.pt .grp td { text-align: left; padding: 22px 26px 10px; font-size: 12.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #5b6fa0; background: #fff; border-bottom-color: #e6e8ef; }
.pt tbody tr:last-child td { border-bottom: 0; }
.pk { width: 20px; height: 20px; padding: 4px; box-sizing: border-box; border-radius: 50%; background: #dff3e8; fill: none; stroke: #2f9e6b; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.pd { color: #c3c7d4; } .pv { font-size: 13.5px; color: #3a3e55; line-height: 1.4; display: inline-block; }
.pm { display: none; }
@media (max-width: 960px) {
  .pt { display: none; } .pm { display: block; }
  .pm-tabs { display: flex; gap: 6px; overflow-x: auto; padding: 4px 2px 14px; scrollbar-width: none; }
  .pm-tabs button { flex: none; height: 38px; padding: 0 18px; border: 0; border-radius: 19px; background: #fff; box-shadow: inset 0 0 0 1px #dfe2ec; font: inherit; font-size: 14px; font-weight: 500; color: #5f6377; cursor: pointer; }
  .pm-tabs button.on { background: var(--brand-d); color: #fff; box-shadow: none; }
  .pm-card { position: relative; background: #fff; border-radius: 22px; box-shadow: inset 0 0 0 1px #e6e8ef, var(--sh); padding: 26px 20px 22px; }
  .pm-top { text-align: center; padding-top: 8px; } .pm-top h4 { font-size: 20px; font-weight: 600; margin: 0; }
  .pm-card h5 { margin: 22px 0 6px; font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #5b6fa0; }
  .pm-r { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 11px 0; border-bottom: 1px solid #eef0f5; font-size: 14.5px; color: #3a3e55; }
  .pm-v { flex: none; max-width: 48%; text-align: right; }
  .pm-card .pbtn { margin: 22px 0 0; }
}

/* type scale: 15px base */
body { font-size: 15px; }
.hero h1 { font-size: 48px; }
.hero .lead { font-size: 15px; max-width: 470px; }
.hcheck li { font-size: 15px; } .trust { font-size: 13px; } .ghost { font-size: 14px; }
.sec-h h2, .cta h2 { font-size: 36px; }
.sec-h p, .cta p { font-size: 15px; }
.copy h3 { font-size: 30px; } .copy p { font-size: 15px; } .copy li { font-size: 14px; }
.kpi span { font-size: 28px; } .kpi em { font-size: 14px; }
.proof-h h3 { font-size: 20px; }
.fq-l h2 { font-size: 36px; } .fq-l p { font-size: 15px; } .fq-q { font-size: 16px; } .fq-a p { font-size: 15px; }
.ft li { font-size: 15px; }
.pt th, .pt td { font-size: 14px; }
.pp { white-space: nowrap; } .best { min-height: 36px; }
@media (max-width: 960px) { .best { min-height: 0; } }
@media (max-width: 900px) { .copy h3 { font-size: 26px; } .fq-l h2 { font-size: 30px; } }
@media (max-width: 700px) { .hero h1 { font-size: 34px; } .sec-h h2, .cta h2 { font-size: 27px; } .copy h3 { font-size: 24px; } }
.best { min-height: 44px; line-height: 1.7; } .pp b { font-size: 25px; } .pp small { display: block; margin: 0; line-height: 1.3; }
@media (max-width: 960px) { .best { min-height: 0; } .pm-top .pp small { display: inline; margin-left: 4px; } }

.fn { width: 15.6%; }
.nav-r .btn { white-space: nowrap; }
@media (max-width: 520px) { .nav-r .btn-sm { padding-left: 12px; padding-right: 12px; font-size: 13px; } .nav-r { gap: 2px; } .hben { align-items: flex-start; } }
.dnote { display: flex; align-items: center; gap: 7px; margin: 8px 0 0; font-size: 12.5px; color: #6b6e82; }
.dnote svg { flex: none; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pm-card.enter > * { animation: pmIn .5s cubic-bezier(.22,1,.36,1) both; animation-delay: var(--i, 0ms); }
@keyframes pmIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.pm-tabs button { transition: background .25s, color .25s, box-shadow .25s; }
@media (max-width: 900px) {
  .flow { padding-left: 0; gap: 34px; justify-items: stretch; }
  .flow::before { display: none; }
  .fn { text-align: center; width: 100%; max-width: 420px; margin: 0 auto; }
  .fn::before { display: none; }
  .fn:not(:last-child)::after { content: ""; position: absolute; left: 50%; bottom: -26px; width: 2px; height: 18px; margin-left: -1px; border-radius: 1px; background: #d5dae6; }
}
.cta { padding: 64px 24px 44px; }
.cta-in { max-width: 640px; margin: 0 auto; }
.cta .cta-lead { font-size: 16px; line-height: 1.7; margin: 0 auto 18px; max-width: 520px; }
.cta p.cta-b { margin: 0 0 24px; font-size: 14px; font-weight: 500; color: var(--brand); opacity: 1; letter-spacing: .01em; }
.cta .btn { background: linear-gradient(90deg, #ff7a59, #f0485f); box-shadow: 0 14px 26px -14px rgba(240,72,95,.9); color: #fff; }
.cta .btn:hover { background: linear-gradient(90deg, #ff8a6b, #f4566d); }
.cta-g { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 22px; margin: 22px 0 0; }
.cta-g li { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #3a3e55; }
.cta-g .ck { flex: none; width: 18px; height: 18px; padding: 4px; box-sizing: border-box; border-radius: 50%; background: #4caf7d; fill: none; stroke: #fff; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
.cta-hr { border: 0; height: 1px; background: #e3e5ec; margin: 30px auto 20px; max-width: 420px; }
.cta .cta-trust { margin: 0; font-size: 13px; color: #6b6e82; line-height: 1.6; }
.cta .cta-trust b { color: var(--ink); font-weight: 600; }
@media (max-width: 700px) { .cta { padding: 48px 20px 36px; } .cta-g { flex-direction: column; align-items: center; } }
.nav-w .btn-pri, .how-cta .btn-pri { background: linear-gradient(90deg, #ff7a59, #f0485f); color: #fff; box-shadow: 0 10px 20px -12px rgba(240,72,95,.9); font-weight: 600; }
.nav-w .btn-pri { padding: 0 18px; }
.nav-w .btn-pri:hover, .how-cta .btn-pri:hover { background: linear-gradient(90deg, #ff8a6b, #f4566d); text-decoration: none; }
@media (max-width: 520px) { .nav-w .btn-pri { padding: 0 12px; } }
.hero .hs .lead { max-width: 540px; }
/* hero slider + copy v2 */
.hslides { display: grid; }
.hs { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity .6s cubic-bezier(.22,1,.36,1), transform .6s cubic-bezier(.22,1,.36,1), visibility 0s .6s; }
.hs.on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.hero h1 { font-size: 44px; }
.hdots { display: flex; gap: 8px; margin: 4px 0 16px; }
.hdots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 4px; background: rgba(255,255,255,.4); cursor: pointer; transition: width .3s, background .3s; }
.hdots button.on { width: 26px; background: #fff; }
.hben { display: flex; align-items: center; gap: 12px; margin: 0 0 22px; font-size: 15px; color: #fff; font-weight: 500; }
.hben .ck, .pben .ck { flex: none; width: 20px; height: 20px; padding: 4px; box-sizing: border-box; border-radius: 50%; background: #4caf7d; fill: none; stroke: #fff; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
.proof-p { max-width: 560px; margin: 0 auto 16px; color: #808291; font-size: 15px; }
.ft-cta, .how-cta { text-align: center; margin-top: 28px; }
.trial-note { display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: 8px; font-weight: 500; color: #3a3e55; }
.trial-note .ck { width: 20px; height: 20px; padding: 4px; box-sizing: border-box; border-radius: 50%; background: #4caf7d; fill: none; stroke: #fff; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
.pben { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px 26px; margin: -14px 0 34px; }
.pben li { display: flex; align-items: center; gap: 10px; font-size: 15px; color: #3a3e55; }
.cta .cta-b { margin: 18px 0 0; font-size: 14px; opacity: .85; }
.fgrid { grid-template-columns: 1.6fr 1fr; }
@media (max-width: 700px) { .hero h1 { font-size: 30px; } .fgrid { grid-template-columns: 1fr; } }
header .container, nav#top,footer .container {
display:none;
}
.container {
width:100% !important;
padding:0 !important;
}
#content {
padding:0 !important;
}
footer {
padding: 0;
margin: 0;
}


/* Button text color on hover/focus/active (an OpenCart theme `.btn:hover` would turn it dark) */
.btn:not(.btn-pri):hover, .btn:not(.btn-pri):focus, .btn:not(.btn-pri):active { color: var(--ink); text-decoration: none; }
.btn.btn-pri:hover, .btn.btn-pri:focus, .btn.btn-pri:active { color: #fff; text-decoration: none; }
.nav-w .btn:hover, .nav-w .btn:focus, .nav-w .btn:active { color: #fff; }
.nav-w .btn:hover { text-decoration: underline; }
.nav-w .btn.btn-pri:hover { text-decoration: none; }
.cta .btn:hover, .cta .btn:focus { color: #fff; }
.btn:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
.btn-pri:disabled, .btn-pri:disabled:hover { opacity: .7; cursor: default; transform: none; }
.ghost:hover, .ghost:focus, .ghost:active { color: #fff; text-decoration: none; }