/* BigShop AI marketing site: shared by index.html and the generated feature pages */
:root { --bg: #07080b; --s1: #0d0f14; --s2: #12141a; --line: rgba(255,255,255,.07); --line2: rgba(255,255,255,.12);
  --tx: #eceef2; --mut: #8b91a0; --dim: #5d6370; --lime: #8dba3f; --lime-tx: #a8d45f; --violet: #8b5cf6; --blue: #3b82f6;
  --head: "Inter Tight", Inter, -apple-system, system-ui, sans-serif; --mono: "JetBrains Mono", ui-monospace, Menlo, monospace; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body { margin: 0; background: var(--bg); color: var(--tx); font: 400 16px/1.6 Inter, -apple-system, system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
main { overflow-x: clip; }
img, svg { display: block; }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.ic { width: 1em; height: 1em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
h1, h2, h3 { font-family: var(--head); font-weight: 700; letter-spacing: -.028em; margin: 0; }
h2 { font-size: clamp(32px, 4.6vw, 54px); line-height: 1.04; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font: 500 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--lime-tx); }
.eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 10px var(--lime); }
.lead { color: var(--mut); font-size: 18px; line-height: 1.65; }
.muted { color: var(--mut); }
.center { text-align: center; } .center .lead { max-width: 640px; margin-left: auto; margin-right: auto; }
.sec { padding: 128px 0; position: relative; }
.sec-head { margin-bottom: 64px; } .sec-head h2 { margin: 18px 0 18px; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 22px; border-radius: 12px; font-weight: 600; font-size: 15px; white-space: nowrap;
  transition: transform .2s, box-shadow .2s, background .2s; }
.btn.p { color: #0a0c06; background: linear-gradient(180deg, #a3cf55, #86b23a); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 8px 24px -8px rgba(141,186,63,.6); }
.btn.p:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 14px 32px -8px rgba(141,186,63,.75); }
.btn.g { color: var(--tx); background: rgba(255,255,255,.04); border: 1px solid var(--line2); }
.btn.g:hover { background: rgba(255,255,255,.08); }
.btn.sm { height: 38px; padding: 0 16px; font-size: 14px; border-radius: 10px; }

/* nav */
.nav { position: sticky; top: 0; z-index: 50; transition: background .3s, border-color .3s; border-bottom: 1px solid transparent; }
.nav.scrolled { background: rgba(7,8,11,.72); -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%); border-color: var(--line); }
.nav .wrap { display: flex; align-items: center; gap: 36px; height: 68px; }
.logo { display: flex; align-items: center; gap: 10px; font: 700 18px var(--head); letter-spacing: -.02em; }
.logo svg { width: 28px; height: 28px; }
.nav-links { display: flex; gap: 28px; font-size: 14px; color: var(--mut); } .nav-links a:hover { color: var(--tx); }
.nav-r { margin-left: auto; display: flex; align-items: center; gap: 18px; font-size: 14px; }
.menu { display: none; position: relative; }
.menu summary { display: grid; place-items: center; width: 40px; height: 38px; border-radius: 10px; border: 1px solid var(--line2); cursor: pointer; list-style: none; font-size: 18px; }
.menu summary::-webkit-details-marker { display: none; }
.menu nav { position: absolute; right: 0; top: 48px; display: grid; width: 230px; padding: 8px; border-radius: 16px; background: #0d0f14; border: 1px solid var(--line2); box-shadow: 0 30px 60px -10px rgba(0,0,0,.8); }
.menu nav a { padding: 11px 12px; border-radius: 10px; color: var(--mut); font-size: 15px; } .menu nav a:hover { color: var(--tx); background: rgba(255,255,255,.05); }
/* hero: a still of the real app with real UI pieces animating on top (8s loop, transform/opacity only).
   Positions are in cqw of the shot so every piece lines up with the screenshot at any width (frame height = 62.5cqw). */
.hshot { position: relative; max-width: 1100px; margin: 0 auto; container-type: inline-size; }
.hshot .bs-frame > div { aspect-ratio: 16 / 10; background: #131417; }
.hbase { display: block; width: 100%; height: 100%; }
.hcard img, .hjar img, .hph img { height: auto; }
.hshot .ov { position: absolute; animation-duration: 8s; animation-timing-function: cubic-bezier(.65,0,.35,1); animation-iteration-count: infinite; animation-fill-mode: both; }
.hcard { left: 38.19cqw; top: 30.98cqw; width: 18.61cqw; z-index: 2; transform: translate(111.94%, -107.55%); animation-name: h-card; }
.hcard img { display: block; width: 100%; border-radius: .83cqw; }
.hcard::before, .hcard::after { content: ""; position: absolute; inset: 0; border-radius: .83cqw; pointer-events: none; opacity: 0; animation: 8s cubic-bezier(.65,0,.35,1) infinite both; }
.hcard::before { box-shadow: 0 2.4cqw 4cqw -1cqw rgba(0,0,0,.75), 0 0 0 .15cqw rgba(141,186,63,.8); animation-name: h-lift; }
.hcard::after { box-shadow: 0 0 0 .15cqw rgba(16,185,129,.9), 0 0 2cqw rgba(16,185,129,.5); animation-name: h-ring; }
.hslot { width: 18.61cqw; aspect-ratio: 268 / 212; border-radius: .83cqw; opacity: 0; }
.hslot.a { left: 38.19cqw; top: 30.98cqw; border: .14cqw dashed rgba(141,186,63,.5); background: rgba(141,186,63,.05); animation-name: h-slot-a; }
.hslot.b { left: 59.03cqw; top: 15.14cqw; border: .14cqw dashed rgba(141,186,63,.8); background: rgba(141,186,63,.08); box-shadow: 0 0 2cqw rgba(141,186,63,.25); animation-name: h-slot-b; }
.hjar { left: 78.5cqw; top: 18.75cqw; width: 28cqw; z-index: 3; animation-name: h-jar; filter: drop-shadow(0 3cqw 4cqw rgba(0,0,0,.6)); }
.hjar img, .hph { display: block; width: 100%; animation: h-float 6s ease-in-out infinite alternate; }
.hphone { left: -4cqw; top: 21.25cqw; width: 17cqw; z-index: 3; animation-name: h-phone; }
.hph { padding: .55cqw; border-radius: 2.8cqw; background: linear-gradient(160deg, #30333d, #14151a); box-shadow: 0 3cqw 6cqw -1cqw rgba(0,0,0,.75), inset 0 0 0 1px rgba(255,255,255,.1); animation-delay: -3s; }
.hph > div { overflow: hidden; border-radius: 2.3cqw; background: #131417; }
.hph .st { padding: .7cqw 1.6cqw .2cqw; font-size: .8cqw; } .hph .st i { width: 4.6cqw; height: 1.35cqw; }
.hph img { display: block; width: 100%; }
.hnote { left: -3cqw; top: 13.4cqw; z-index: 4; display: flex; align-items: center; gap: .9cqw; width: 21cqw; padding: .9cqw 1.1cqw; border-radius: 1.3cqw; font-size: 1.05cqw; line-height: 1.35;
  background: rgba(22,24,30,.88); border: 1px solid rgba(255,255,255,.12); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 2cqw 4cqw -1cqw rgba(0,0,0,.7); animation-name: h-note; }
.hnote i { display: grid; place-items: center; flex: none; width: 2.6cqw; height: 2.6cqw; border-radius: .7cqw; font-size: 1.5cqw; color: #4ade80; background: rgba(74,222,128,.15); }
.hnote b { display: block; } .hnote small { color: var(--mut); font-size: .92cqw; }
@keyframes h-card { 0%, 21% { transform: none; opacity: 1; } 24% { transform: translateY(-2%) scale(1.04) rotate(1.5deg); } 34% { transform: translate(111.94%, -109.5%) scale(1.04) rotate(1.5deg); }
  37%, 89% { transform: translate(111.94%, -107.55%); opacity: 1; } 94% { transform: translate(111.94%, -107.55%); opacity: 0; } 94.01% { transform: none; opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes h-lift { 0%, 21% { opacity: 0; } 24%, 34% { opacity: 1; } 37%, 100% { opacity: 0; } }
@keyframes h-ring { 0%, 36% { opacity: 0; } 38% { opacity: 1; } 56%, 100% { opacity: 0; } }
@keyframes h-slot-a { 0%, 22% { opacity: 0; } 24%, 37% { opacity: 1; } 41%, 100% { opacity: 0; } }
@keyframes h-slot-b { 0%, 23% { opacity: 0; } 26%, 33% { opacity: 1; } 36%, 100% { opacity: 0; } }
@keyframes h-jar { 0%, 3.75% { opacity: 0; transform: translateY(4%) scale(.97); clip-path: inset(0 0 65.5% 0 round 2cqw); } 11.25%, 12.5% { opacity: 1; transform: none; clip-path: inset(0 0 65.5% 0 round 2cqw); }
  19%, 90% { opacity: 1; transform: none; clip-path: inset(0 0 0 0 round 2cqw); } 96%, 100% { opacity: 0; transform: translateY(3%); clip-path: inset(0 0 0 0 round 2cqw); } }
@keyframes h-phone { 0%, 37.5% { opacity: 0; transform: translateY(14%); } 45%, 90% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: translateY(8%); } }
@keyframes h-note { 0%, 46% { opacity: 0; transform: translateY(-40%) scale(.96); } 51%, 89% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; transform: translateY(-20%); } }
@keyframes h-float { to { transform: translateY(-1.2%); } }
/* phones: board on top, phone and BigJar step out below it */
@media (max-width: 640px) { .hshot { padding-bottom: 56vw; } }
@container (max-width: 640px) {
  .hjar { left: 43cqw; top: 40cqw; width: 55cqw; }
  .hphone { left: 3cqw; top: 34cqw; width: 37cqw; }
  .hph { padding: 1.1cqw; border-radius: 6cqw; } .hph > div { border-radius: 5cqw; } .hph .st { padding: 1.5cqw 3.4cqw .4cqw; font-size: 1.8cqw; } .hph .st i { width: 10cqw; height: 3cqw; }
  .hnote { display: none; }
}
.htour-wrap { margin-top: 22px; text-align: center; }
.htour { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px 9px 12px; border-radius: 99px; font: 500 14px Inter, sans-serif; color: var(--tx); background: rgba(255,255,255,.04); border: 1px solid var(--line2); cursor: pointer; transition: background .2s; }
.htour:hover { background: rgba(255,255,255,.08); } .htour .ic { color: var(--lime-tx); }
#tour { width: min(1100px, 92vw); padding: 0; border: 1px solid var(--line2); border-radius: 18px; background: #0d0f14; color: var(--tx); overflow: hidden; }
#tour::backdrop { background: rgba(5,6,9,.78); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
#tour video { display: block; width: 100%; aspect-ratio: 16 / 10; background: #131417; }
.tclose { position: absolute; top: 10px; right: 10px; z-index: 1; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line2); background: rgba(13,15,20,.85); color: var(--tx); font-size: 15px; cursor: pointer; }
/* BigJar section: real panel loop */
.jarvid { max-width: 420px; margin: 0 auto; border-radius: 21px; overflow: hidden; border: 1px solid var(--line2); box-shadow: 0 50px 100px -40px rgba(139,92,246,.45), 0 30px 60px -30px rgba(0,0,0,.8); }
.jarvid video { display: block; width: 100%; aspect-ratio: 400 / 620; background: #0a0c12; }

/* hero */
.hero { position: relative; isolation: isolate; overflow: hidden; margin-top: -69px; padding: 69px 0 40px; }
.hero-copy { max-width: 1000px; margin: 0 auto; padding: 84px 0 56px; text-align: center; }
.ann { display: inline-flex; align-items: center; gap: 10px; padding: 5px 14px 5px 5px; border-radius: 99px; font-size: 14px; color: var(--mut);
  background: rgba(255,255,255,.03); border: 1px solid var(--line2); transition: border-color .2s; }
.ann:hover { border-color: rgba(141,186,63,.5); }
.ann b { padding: 3px 10px; border-radius: 99px; font: 500 11px/1.6 var(--mono); letter-spacing: .08em; color: #0a0c06; background: var(--lime); }
.hero h1 { margin: 28px 0 24px; font-size: clamp(42px, 7vw, 86px); line-height: 1; letter-spacing: -.036em; }
.hero h1 span { background: linear-gradient(180deg, #c3e88a, #8dba3f); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero .lead { max-width: 660px; margin: 0 auto 36px; font-size: 19px; }
.ctas { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.trust { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 22px; margin-top: 32px; font-size: 14px; color: var(--mut); }
.trust span { display: flex; align-items: center; gap: 7px; } .trust .ic { color: var(--lime); font-size: 15px; }
.trust b { color: var(--tx); font-weight: 600; }

/* integrations */
.works { padding: 56px 0 24px; text-align: center; }
.works p { margin: 0 0 26px; font: 500 12px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.works ul { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; max-width: 1040px; margin: 0 auto; padding: 0; list-style: none; }
.works li { padding: 16px 12px; border-radius: 14px; background: rgba(255,255,255,.02); border: 1px solid var(--line); transition: border-color .25s, background .25s; }
.works li:hover { border-color: var(--line2); background: rgba(255,255,255,.04); }
.works li b { display: block; font: 700 16px var(--head); letter-spacing: -.01em; color: #d3d6de; }
.works li small { font: 500 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.segs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.seg { padding: 24px; border-radius: 18px; background: var(--s1); border: 1px solid var(--line); }
.seg i { display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 18px; border-radius: 12px; font-size: 20px; color: var(--lime-tx); background: rgba(141,186,63,.1); border: 1px solid rgba(141,186,63,.22); }
.seg h3 { margin-bottom: 6px; font-size: 17px; letter-spacing: -.01em; } .seg p { margin: 0; color: var(--mut); font-size: 14px; line-height: 1.5; }


/* split sections */
.split { display: grid; grid-template-columns: 1fr 1.05fr; gap: 72px; align-items: center; }
.split.rev { grid-template-columns: 1.05fr 1fr; }
.split h2 { margin: 18px 0 20px; }
.points { display: grid; gap: 22px; margin: 36px 0 0; padding: 0; list-style: none; }
.points li { display: grid; grid-template-columns: 44px 1fr; gap: 16px; }
.points i { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; font-size: 20px; color: var(--c, var(--lime-tx));
  background: color-mix(in srgb, var(--c, var(--lime)) 12%, transparent); border: 1px solid color-mix(in srgb, var(--c, var(--lime)) 25%, transparent); }
.points b { display: block; font-size: 16px; } .points span { color: var(--mut); font-size: 15px; }

/* bento */
.bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.tile { position: relative; overflow: hidden; display: flex; flex-direction: column; min-height: 340px; padding: 28px; border-radius: 22px; background: var(--s1); border: 1px solid var(--line); }
.tile.w4 { grid-column: span 4; } .tile.w2 { grid-column: span 2; } .tile.w3 { grid-column: span 3; }
.tile h3 { font-size: 20px; letter-spacing: -.02em; margin-bottom: 6px; } .tile p { margin: 0; color: var(--mut); font-size: 15px; line-height: 1.55; }
.vis { position: relative; flex: 1; margin: 0 -28px 24px; display: grid; place-items: center; min-height: 190px; }
/* tile visuals: real UI snippets from the app */
.ui { width: calc(100% - 56px); font-size: 12px; }
.tg { display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; border-radius: 6px; font: 600 11px/1.5 Inter; white-space: nowrap; color: var(--tc, #6ee7b7); background: color-mix(in srgb, var(--tc, #10b981) 16%, transparent); }
.tg.r { --tc: #f87171; } .tg.b { --tc: #60a5fa; } .tg.n { --tc: #a9b0b8; }
.mb { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; min-height: 220px; }
.mb > div { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.mb h4 { display: flex; align-items: center; gap: 6px; height: 32px; margin: 0; padding: 0 10px; border-radius: 8px; font: 600 12px Inter; border-top: 2px solid var(--c); background: color-mix(in srgb, var(--c) 13%, #15171c); white-space: nowrap; }
.mb h4::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--c); }
.mb h4 em { margin-left: auto; font: 500 10px var(--mono); font-style: normal; color: var(--c); }
.mc { display: flex; flex-direction: column; gap: 3px; height: 86px; padding: 10px 11px; border-radius: 10px; background: #16181e; border: 1px solid #2a2c33; border-left: 3px solid #3f3f46; white-space: nowrap; overflow: hidden; }
.mc b { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #fff; }
.mc > span { flex: none; overflow: hidden; text-overflow: ellipsis; color: var(--mut); font-size: 11px; }
.mc footer { margin-top: auto; display: flex; justify-content: space-between; align-items: center; font-size: 10px; color: var(--dim); }
.mc footer em { padding: 1px 6px; border-radius: 4px; font-style: normal; font-weight: 700; color: #f87171; background: rgba(127,29,29,.35); }
.mc .bar { display: block; height: 4px; margin-top: auto; border-radius: 2px; background: #2b3242; overflow: hidden; } .mc .bar i { display: block; height: 100%; width: 62%; background: var(--blue); }
.mc.ok { border-color: rgba(16,185,129,.45); box-shadow: 0 0 14px rgba(16,185,129,.15); }
.mc.go { position: absolute; left: 0; top: 134px; width: calc((100% - 20px) / 3); border-color: rgba(141,186,63,.55); border-left-color: var(--lime);
  box-shadow: 0 12px 30px -10px rgba(141,186,63,.5); animation: wf 7s cubic-bezier(.65,0,.35,1) infinite; }
@keyframes wf { 0% { transform: translateX(0); opacity: 0; } 6%, 24% { transform: translateX(0); opacity: 1; } 36%, 56% { transform: translateX(calc(100% + 10px)); opacity: 1; } 68%, 90% { transform: translateX(calc(200% + 20px)); opacity: 1; } 100% { transform: translateX(calc(200% + 20px)); opacity: 0; } }
.inv { position: relative; width: min(100%, 290px); margin: 0 auto; padding: 14px 16px; border-radius: 12px; background: #f4f3ee; color: #1b1d22; box-shadow: 0 24px 50px -16px rgba(0,0,0,.85); transform: rotate(-1.5deg); }
.inv header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; font-size: 13px; font-weight: 700; }
.inv header .tg { --tc: #4d7c0f; }
.inv .row { display: flex; justify-content: space-between; padding: 5px 0; border-top: 1px solid #e0ded6; font: 500 11px var(--mono); }
.inv .row.core span + span { color: #c2410c; }
.inv footer { display: flex; justify-content: space-between; align-items: center; margin-top: 4px; padding-top: 8px; border-top: 1.5px solid #1b1d22; font-size: 13px; font-weight: 700; }
.inv footer .tg { --tc: #2563eb; }
.scanwrap { position: absolute; inset: 40px 8px 44px; animation: sweep 3.2s ease-in-out infinite; pointer-events: none; }
.scanwrap::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--lime); box-shadow: 0 0 14px 3px rgba(141,186,63,.55); }
@keyframes sweep { 0% { transform: translateY(0); opacity: 0; } 10%, 80% { opacity: 1; } 90%, 100% { transform: translateY(100%); opacity: 0; } }
.cam { position: relative; height: 150px; display: grid; place-items: center; border-radius: 14px; background: radial-gradient(circle at 50% 45%, #262a33, #0c0d11); overflow: hidden; }
.cam::before { content: ""; position: absolute; inset: 22px 18%; border: 2px solid #4ade80; border-radius: 10px; box-shadow: 0 0 18px rgba(74,222,128,.4); }
.cam .scanwrap { inset: 22px 18%; } .cam .scanwrap::before { background: #4ade80; box-shadow: 0 0 14px 3px rgba(74,222,128,.5); }
.lbl { padding: 8px 12px; border-radius: 6px; background: #ebe9e1; color: #15161c; text-align: center; transform: rotate(-3deg); }
.lbl i { display: block; width: 104px; height: 30px; background: repeating-linear-gradient(90deg, #15161c 0 2px, transparent 2px 4px, #15161c 4px 5px, transparent 5px 8px); }
.lbl b { display: block; margin-top: 4px; font: 700 13px var(--mono); letter-spacing: .12em; }
.res { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; padding: 10px 12px; border-radius: 12px; background: #16181e; border: 1px solid rgba(74,222,128,.3); }
.res b { font-size: 13px; white-space: nowrap; } .res div { display: flex; gap: 6px; }
.face { position: relative; width: 100px; height: 100px; margin: 0 auto 14px; display: grid; place-items: center; border-radius: 50%; color: var(--lime-tx); font-size: 42px; background: radial-gradient(circle, rgba(141,186,63,.14), transparent 70%); }
.face::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px dashed rgba(141,186,63,.55); animation: spin 9s linear infinite; }
@keyframes spin { to { transform: rotate(1turn); } }
.idc { padding: 12px; border-radius: 12px; text-align: center; background: #16181e; border: 1px solid var(--line); }
.idc b { display: block; font-size: 14px; } .idc small { display: block; margin: 2px 0 8px; color: var(--mut); font-size: 12px; }
.kpi { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 16px; }
.kpi small { font: 500 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--mut); }
.kpi b { font: 700 32px var(--head); letter-spacing: -.03em; }
.hb { display: grid; grid-template-columns: 62px 1fr 38px; gap: 10px; align-items: center; margin-bottom: 10px; color: var(--mut); }
.hb i { height: 8px; border-radius: 4px; background: #23262e; overflow: hidden; }
.hb i::before { content: ""; display: block; height: 100%; width: var(--w); border-radius: inherit; background: linear-gradient(90deg, #6d922f, var(--lime));
  transform-origin: left; transform: scaleX(var(--s, 1)); transition: transform 1s cubic-bezier(.2,.7,.2,1) .25s; }
.js .tile:not(.is-in) .hb i::before { --s: 0; }
.hb b { text-align: right; font: 500 12px var(--mono); color: var(--tx); }
.log { border-radius: 14px; background: #101218; border: 1px solid var(--line); overflow: hidden; }
.log header { display: flex; align-items: center; gap: 8px; padding: 11px 14px; font-size: 13px; font-weight: 600; border-bottom: 1px solid var(--line); }
.log header .tg { margin-left: auto; }
.log header .dot { width: 8px; height: 8px; border-radius: 50%; background: #10b981; box-shadow: 0 0 8px #10b981; }
.log .row { display: flex; align-items: center; gap: 10px; padding: 10px 14px; font-size: 12px; }
.log .row + .row { border-top: 1px solid var(--line); }
.log .row > span:first-child { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--mut); }
.log .row b { font: 500 12px var(--mono); color: var(--tx); }
.log .vin { padding: 10px 14px; font: 500 11px var(--mono); color: var(--mut); border-bottom: 1px solid var(--line); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.log .vin b { color: var(--tx); }
.site { border-radius: 14px; background: #101218; border: 1px solid var(--line); overflow: hidden; }
.site .bar { display: flex; align-items: center; gap: 6px; padding: 9px 12px; background: #0c0d11; border-bottom: 1px solid var(--line); }
.site .bar i { width: 7px; height: 7px; border-radius: 50%; background: #2a2d35; }
.site .bar span { flex: 1; min-width: 0; margin-left: 6px; padding: 3px 10px; border-radius: 6px; background: #16181e; color: var(--mut); font: 500 11px var(--mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.site .body { padding: 14px; }
.site .body > b { display: block; font: 700 15px var(--head); letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.site .body small { display: flex; align-items: center; gap: 6px; margin: 4px 0 10px; color: var(--mut); font-size: 11px; }
.site .body small::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #10b981; box-shadow: 0 0 6px #10b981; }
.site .chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.site .go { display: flex; align-items: center; justify-content: center; height: 34px; border-radius: 9px; font-weight: 600; font-size: 12px; color: #0a0c06; background: linear-gradient(180deg, #a3cf55, #86b23a); }
.spin { flex: none; width: 13px; height: 13px; border-radius: 50%; border: 2px solid rgba(96,165,250,.3); border-top-color: #60a5fa; animation: spin .8s linear infinite; }

/* mobile app */
.phone { position: relative; width: 300px; height: 610px; margin: 0 auto; padding: 9px; border-radius: 50px; background: linear-gradient(160deg, #30333d, #14151a);
  box-shadow: 0 60px 120px -40px rgba(141,186,63,.35), 0 40px 80px rgba(0,0,0,.7), inset 0 0 0 1px rgba(255,255,255,.1); }
.scr { position: relative; height: 100%; display: flex; flex-direction: column; border-radius: 42px; overflow: hidden; background: #131417; font-size: 12px; }
.scr img { flex: 1; min-height: 0; width: 100%; object-fit: contain; object-position: 50% 0; }
.st { display: flex; justify-content: space-between; align-items: center; padding: 14px 26px 6px; font-weight: 600; font-size: 13px; } .st i { width: 86px; height: 25px; border-radius: 99px; background: #000; }
.scr h4 { margin: 14px 18px 10px; font: 700 22px var(--head); letter-spacing: -.02em; }
.tabs { display: flex; gap: 8px; padding: 0 18px 14px; overflow: hidden; white-space: nowrap; } .tabs span { padding: 7px 11px; border-radius: 9px; background: #24272c; color: var(--mut); font-weight: 500; } .tabs span:first-child { background: var(--lime); color: #fff; }
.sr { margin: 0 18px 9px; padding: 11px 12px; border-radius: 12px; background: #2a1e17; border: 1px solid #8a4a20; line-height: 1.45; } .sr b { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; } .sr small { color: var(--mut); }
.sr.b { background: #16181e; border-color: #2e2e33; }
.qb { margin-top: auto; display: flex; justify-content: space-around; padding: 12px 6px 24px; border-top: 1px solid var(--line); background: #17181c; font-weight: 600; }
.qb span { display: flex; align-items: center; gap: 4px; } .qb .ic { font-size: 14px; }
.float { position: absolute; z-index: 2; display: flex; align-items: center; gap: 10px; width: 214px; padding: 12px 14px; border-radius: 14px; background: rgba(18,20,26,.9); border: 1px solid var(--line2);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 20px 40px -10px rgba(0,0,0,.7); font-size: 13px; line-height: 1.35; animation: bob 6s ease-in-out infinite; }
.float i { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; font-size: 16px; color: var(--c); background: color-mix(in srgb, var(--c) 15%, transparent); }
.float small { display: block; color: var(--mut); font-size: 12px; }
.float.f1 { right: -186px; top: 96px; --c: #4ade80; } .float.f2 { left: -190px; top: 286px; --c: var(--violet); animation-delay: -2s; } .float.f3 { right: -186px; bottom: 112px; --c: var(--lime-tx); animation-delay: -4s; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.stores { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 36px; }
.store { display: flex; align-items: center; gap: 12px; height: 56px; padding: 0 20px 0 16px; border-radius: 14px; background: #fff; color: #0a0a0a; }
.store .ic { font-size: 24px; } .store small { display: block; font-size: 11px; line-height: 1.1; color: #555; } .store b { display: block; font: 700 17px/1.15 var(--head); letter-spacing: -.01em; }

/* testimonials */
.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.q { display: flex; flex-direction: column; padding: 32px; border-radius: 22px; background: var(--s1); border: 1px solid var(--line); }
.q blockquote { margin: 0 0 32px; font: 600 20px/1.45 var(--head); letter-spacing: -.015em; }
.q blockquote::before { content: "“"; display: block; height: 34px; font: 700 64px/1 var(--head); color: var(--lime); }
.q .ph { color: var(--mut); font-weight: 500; font-style: italic; }
.who { margin-top: auto; display: flex; align-items: center; gap: 12px; padding-top: 22px; border-top: 1px solid var(--line); font-size: 14px; }
.who i { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; font-style: normal; font-weight: 700; color: var(--lime-tx); background: #172012; border: 1px dashed rgba(141,186,63,.4); }
.who small { display: block; color: var(--mut); font-size: 13px; }
.metric { margin-left: auto; text-align: right; font: 700 22px var(--head); color: var(--lime-tx); } .metric small { font: 500 11px var(--mono); color: var(--dim); }

/* switch band */
.switch { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; align-items: center; padding: 56px; border-radius: 28px;
  background: linear-gradient(135deg, #10131a, #0b0d12); border: 1px solid var(--line2); }
.switch h2 { font-size: clamp(28px, 3.4vw, 40px); margin: 16px 0 14px; }
.plats { display: flex; flex-wrap: wrap; gap: 10px; }
.plats span { padding: 10px 16px; border-radius: 12px; font-weight: 600; font-size: 15px; color: var(--mut); background: rgba(255,255,255,.03); border: 1px solid var(--line2); }
.plats span:last-child { color: var(--lime-tx); border-color: rgba(141,186,63,.35); }

/* pricing */
.tiers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; align-items: stretch; }
.tier { position: relative; display: flex; flex-direction: column; padding: 30px 26px; border-radius: 22px; background: var(--s1); border: 1px solid var(--line); }
.tier h3 { font-size: 20px; } .tier .u { color: var(--mut); font-size: 14px; }
.price { margin: 22px 0 6px; font: 700 46px/1 var(--head); letter-spacing: -.04em; } .price small { font: 400 15px Inter; letter-spacing: 0; color: var(--mut); }
.tier ul { flex: 1; margin: 22px 0 28px; padding: 22px 0 0; list-style: none; border-top: 1px solid var(--line); display: grid; gap: 11px; align-content: start; font-size: 14px; color: #c5c9d2; }
.tier li { display: flex; gap: 10px; } .tier li .ic { margin-top: 4px; color: var(--lime); }
.tier .btn { width: 100%; }
.tier.pop { background: linear-gradient(180deg, #131a0e, var(--s1) 45%); border-color: transparent; }
.tier.pop::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none;
  background: conic-gradient(from var(--bs-angle), rgba(141,186,63,.25) 0 60%, var(--lime) 75%, #c3e88a 80%, rgba(141,186,63,.25) 92%); animation: bs-spin 6s linear infinite;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; }
.badge { position: absolute; top: -12px; left: 26px; padding: 4px 12px; border-radius: 99px; font: 500 11px/1.6 var(--mono); letter-spacing: .06em; color: #0a0c06; background: var(--lime); }

/* faq */
.faq { max-width: 820px; margin: 0 auto; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; justify-content: space-between; gap: 24px; padding: 24px 0; cursor: pointer; list-style: none; font: 600 18px var(--head); letter-spacing: -.01em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; font: 400 20px Inter; color: var(--lime-tx); border: 1px solid var(--line2); transition: transform .25s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: -6px 0 26px; max-width: 700px; color: var(--mut); line-height: 1.7; }

/* final cta + footer */
.final { position: relative; isolation: isolate; overflow: hidden; padding: 150px 0; text-align: center; border-top: 1px solid var(--line); }
.final h2 { font-size: clamp(38px, 6vw, 72px); letter-spacing: -.036em; }
.final .lead { margin: 22px auto 38px; }
.site-foot { padding: 72px 0 40px; border-top: 1px solid var(--line); font-size: 14px; }
.fgrid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 40px; }
.fgrid h5 { margin: 4px 0 18px; font: 500 12px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.fgrid a { display: block; margin-bottom: 12px; color: var(--mut); } .fgrid a:hover { color: var(--tx); }
.fgrid p { max-width: 300px; color: var(--mut); margin: 16px 0 22px; }
.fbar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--line); color: var(--dim); }
.fbar nav { display: flex; flex-wrap: wrap; gap: 20px; } .fbar a:hover { color: var(--tx); }
.mbar { display: none; }

@media (max-width: 960px) {
  .nav-links { display: none; } .menu { display: block; }
  .works ul { grid-template-columns: repeat(3, 1fr); } .segs { grid-template-columns: repeat(2, 1fr); } .seg:last-child { grid-column: 1 / -1; }
  .split, .split.rev, .switch { grid-template-columns: 1fr; gap: 48px; }
  .split.rev > :first-child { order: 2; }
  .bento { grid-template-columns: 1fr 1fr; } .tile.w4, .tile.w3 { grid-column: span 2; } .tile.w2 { grid-column: span 1; }
  .bento > .tile.w2:last-child:nth-child(even) { grid-column: span 2; }
  .tiers { grid-template-columns: 1fr 1fr; } .quotes { grid-template-columns: 1fr; }
  .fgrid { grid-template-columns: 1fr 1fr; } .fgrid > :first-child { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .wrap { padding: 0 16px; }
  .nav-r .signin, .nav-r > .btn { display: none; }
  .sec { padding: 84px 0; } .sec-head { margin-bottom: 44px; }
  .hero-copy { padding: 48px 0 40px; } .hero .lead { font-size: 17px; } .lead { font-size: 16px; }
  .ctas .btn { flex: 1 1 100%; }
  .bento, .tiers { grid-template-columns: 1fr; } .tile.w4, .tile.w3, .tile.w2 { grid-column: auto; }
  .bento > .tile.w2:last-child:nth-child(even) { grid-column: auto; }
  .switch { padding: 32px 22px; }
  .float { display: none; }
  .phone { width: 270px; height: 550px; }
  .works ul, .segs { grid-template-columns: 1fr 1fr; } .seg { padding: 20px; }
  .q { padding: 26px; }
  .final { padding: 100px 0; }
  .mbar { display: flex; position: fixed; z-index: 60; left: 12px; right: 12px; bottom: 12px; gap: 10px; padding: 8px; border-radius: 16px;
    background: rgba(13,15,20,.82); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid var(--line2);
    transform: translateY(140%); transition: transform .35s cubic-bezier(.2,.7,.2,1); }
  .mbar.on { transform: none; } .mbar .btn { flex: 1; height: 46px; }
  .site-foot { padding-bottom: 100px; }
}

/* ===================== animation kit (from site-animations.html) ===================== */
@keyframes bs-drift-a { to { transform: translate(18%, 12%) scale(1.15); } }
@keyframes bs-drift-b { to { transform: translate(-20%, 8%) scale(.9); } }
@keyframes bs-drift-c { to { transform: translate(10%, -14%) scale(1.2); } }
@keyframes bs-beam-x { from { transform: translateX(-30vw); } to { transform: translateX(130vw); } }
@keyframes bs-beam-y { from { transform: translateY(-30vh); } to { transform: translateY(110vh); } }
.bs-bg { --cell: 64px; position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.bs-bg > * { position: absolute; }
/* shop footage behind the hero: dark and soft so the headline stays readable, fades into the page */
.bs-film, .bs-shade { top: 0; left: 0; right: 0; height: 980px; }
.bs-film { width: 100%; object-fit: cover; opacity: .36; }
.bs-shade { background: radial-gradient(ellipse 55% 42% at 50% 30%, rgba(7,8,11,.6), transparent 75%), linear-gradient(180deg, rgba(7,8,11,.5) 0%, rgba(7,8,11,.15) 40%, rgba(7,8,11,.7) 75%, var(--bg) 100%); }
@media (max-width: 640px) { .bs-film, .bs-shade { height: 760px; } }
.bs-aurora { width: 70vmax; aspect-ratio: 1; border-radius: 50%; will-change: transform; animation: 22s ease-in-out infinite alternate; }
.bs-aurora.a { left: -18vmax; top: -38vmax; background: radial-gradient(circle, rgba(141,186,63,.26), transparent 62%); animation-name: bs-drift-a; }
.bs-aurora.b { right: -26vmax; top: -30vmax; background: radial-gradient(circle, rgba(59,130,246,.16), transparent 62%); animation-name: bs-drift-b; animation-duration: 27s; }
.bs-aurora.c { left: 20vmax; top: -10vmax; background: radial-gradient(circle, rgba(139,92,246,.14), transparent 62%); animation-name: bs-drift-c; animation-duration: 31s; }
.bs-lines { inset: 0; -webkit-mask: radial-gradient(ellipse 75% 60% at 50% 0%, #000 35%, transparent 80%); mask: radial-gradient(ellipse 75% 60% at 50% 0%, #000 35%, transparent 80%); }
.bs-lines > * { position: absolute; }
.bs-grid, .bs-spot { inset: 0; background-size: var(--cell) var(--cell); background-position: center top;
  background-image: linear-gradient(var(--c) 1px, transparent 1px), linear-gradient(90deg, var(--c) 1px, transparent 1px); }
.bs-grid { --c: rgba(255,255,255,.05); }
.bs-spot { --c: rgba(141,186,63,.5); opacity: 0; transition: opacity .4s;
  -webkit-mask: radial-gradient(240px circle at var(--mx, -999px) var(--my, -999px), #000, transparent 70%); mask: radial-gradient(240px circle at var(--mx, -999px) var(--my, -999px), #000, transparent 70%); }
.bs-bg.is-hover .bs-spot { opacity: 1; }
.bs-beam { animation: linear infinite; animation-delay: var(--d, 0s); opacity: .8; }
.bs-beam.x { left: 0; top: calc(var(--r) * var(--cell)); width: 22vw; height: 1px; animation-name: bs-beam-x; animation-duration: var(--s, 7s); background: linear-gradient(90deg, transparent, var(--lime), transparent); }
.bs-beam.y { top: 0; left: calc(50% + var(--k) * var(--cell)); width: 1px; height: 30vh; animation-name: bs-beam-y; animation-duration: var(--s, 6s); background: linear-gradient(180deg, transparent, var(--violet), transparent); }
.bs-grain { inset: 0; opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.bs-bg::after { content: ""; position: absolute; inset: auto 0 0; height: 260px; background: linear-gradient(transparent, var(--bg)); }
.bs-bg.center .bs-aurora.a { left: 10%; top: 15%; } .bs-bg.center .bs-aurora.b { right: 0; top: 25%; } .bs-bg.center .bs-aurora.c { display: none; }
.bs-bg.center .bs-lines { -webkit-mask: radial-gradient(ellipse 60% 70% at 50% 50%, #000 20%, transparent 75%); mask: radial-gradient(ellipse 60% 70% at 50% 50%, #000 20%, transparent 75%); }
.bs-bg.center::after { display: none; }
.bs-paused, .bs-paused * { animation-play-state: paused !important; }
@property --bs-angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes bs-spin { to { --bs-angle: 360deg; } }
.bs-frame { position: relative; max-width: 1100px; margin: 0 auto; padding: 1px; border-radius: 24px;
  background: conic-gradient(from var(--bs-angle), rgba(255,255,255,.09) 0 70%, var(--lime) 80%, var(--violet) 88%, rgba(255,255,255,.09) 95%);
  animation: bs-spin 8s linear infinite; box-shadow: 0 50px 140px -40px rgba(141,186,63,.4), 0 30px 80px rgba(0,0,0,.6); }
.bs-frame > * { border-radius: 23px; overflow: hidden; }
.js [data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity .35s cubic-bezier(.2,.7,.2,1), transform .35s cubic-bezier(.2,.7,.2,1); transition-delay: calc(var(--i, 0) * 70ms); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
.bs-glow { position: relative; }
.bs-glow::before, .bs-glow::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s; z-index: 2; }
.bs-glow::before { padding: 1px; background: radial-gradient(280px circle at var(--gx, 50%) var(--gy, 50%), rgba(141,186,63,.7), transparent 45%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; }
.bs-glow::after { background: radial-gradient(400px circle at var(--gx, 50%) var(--gy, 50%), rgba(141,186,63,.06), transparent 50%); }
[data-glow-group]:hover .bs-glow::before { opacity: 1; } .bs-glow:hover::after { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; }
  .bs-beam, .bs-spot, .scanwrap { display: none; }
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
}


.plat { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.plat .seg { display: grid; grid-template-columns: 42px 1fr; column-gap: 14px; align-items: center; align-content: start; }
.plat .seg i { margin-bottom: 0; }
.plat .seg h3 { margin: 0; font-size: 18px; }
.plat .seg p, .plat .seg .more { grid-column: 1 / -1; justify-self: start; }
.plat .seg p { margin-top: 14px; font-size: 15px; }
.langs { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 14px; margin-top: 28px; color: var(--mut); font-size: 14px; }
.langs b { display: inline-flex; align-items: center; gap: 8px; color: var(--tx); font-weight: 600; }
.langs b svg { color: var(--lime-tx); }
.langs span { padding: 5px 12px; border-radius: 999px; border: 1px solid var(--line2); background: rgba(255,255,255,.02); }
@media (max-width: 960px) { .plat { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .plat { grid-template-columns: 1fr; } }
/* demo request modal (form logic in script-new.js) */
.modal-overlay { position: fixed; inset: 0; z-index: 200; background: rgba(4,5,8,.72); backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; padding: 24px; }
.modal-content { background: var(--s1); border: 1px solid var(--line2); border-radius: 20px; padding: 28px 30px; max-width: 480px; width: 100%; position: relative; max-height: 90vh; overflow-y: auto; box-shadow: 0 30px 80px -20px rgba(0,0,0,.7); }
.modal-close { position: absolute; top: 12px; right: 12px; background: none; border: 0; color: var(--mut); font-size: 30px; cursor: pointer; line-height: 1; width: 44px; height: 44px; }
.modal-close:hover { color: var(--tx); }
.modal-header { margin-bottom: 8px; }
.modal-header h2 { font-size: 28px; line-height: 1.05; margin-bottom: 6px; }
.modal-header p { color: var(--mut); margin: 0; font-size: 15px; }
.demo-form label { display: block; color: var(--mut); font-size: 14px; font-weight: 500; margin: 12px 0 5px; }
.demo-form input, .demo-form textarea { width: 100%; padding: 10px 14px; background: var(--s2); border: 1px solid var(--line2); border-radius: 12px; color: var(--tx); font: inherit; font-size: 16px; }
.demo-form input:focus, .demo-form textarea:focus { outline: none; border-color: var(--lime); box-shadow: 0 0 0 3px rgba(141,186,63,.25); }
.demo-form input::placeholder, .demo-form textarea::placeholder { color: var(--dim); }
.demo-form input[readonly], .demo-form textarea[readonly] { opacity: .7; }
.demo-form .btn-block { width: 100%; margin-top: 18px; border: 0; cursor: pointer; font-family: inherit; }
.demo-form .phone-row { display: flex; gap: 8px; }
.demo-form .cc-wrap { position: relative; flex: 0 0 96px; width: 96px; }
.demo-form .cc-wrap input { padding-left: 12px; padding-right: 30px; }
.demo-form .cc-toggle { position: absolute; top: 0; right: 0; height: 100%; width: 30px; display: flex; align-items: center; justify-content: center; background: none; border: 0; color: var(--mut); cursor: pointer; padding: 0; }
.demo-form .cc-menu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 20; min-width: 250px; max-height: 224px; overflow-y: auto; margin: 0; padding: 6px; list-style: none; background: var(--s2); border: 1px solid var(--line2); border-radius: 12px; box-shadow: 0 16px 40px rgba(0,0,0,.5); }
.demo-form .cc-menu.open-up { top: auto; bottom: calc(100% + 6px); }
.demo-form .cc-menu[hidden] { display: none; }
.demo-form .cc-menu li { display: flex; gap: 10px; align-items: baseline; padding: 9px 10px; border-radius: 8px; color: var(--mut); font-size: 15px; cursor: pointer; }
.demo-form .cc-menu li b { color: var(--tx); min-width: 44px; font-weight: 600; }
.demo-form .cc-menu li:hover, .demo-form .cc-menu li.active { background: rgba(255,255,255,.06); color: var(--tx); }
.demo-form .cc-menu li[aria-selected="true"] { background: rgba(141,186,63,.14); }
.demo-form .phone-row > input { flex: 1 1 auto; min-width: 0; }
.demo-form .field-error { color: #f87171; font-size: 14px; margin: 6px 0 0; line-height: 1.4; }
.demo-form .field-error[hidden] { display: none; }
.demo-form input.input-invalid, .demo-form input.input-invalid:focus { border-color: #f87171; box-shadow: 0 0 0 3px rgba(248,113,113,.15); }
.btn-spinner { display: none; width: 16px; height: 16px; border: 2px solid rgba(10,12,6,.25); border-top-color: #0a0c06; border-radius: 50%; animation: spin .8s linear infinite; }
.btn.is-loading { cursor: progress; opacity: .85; pointer-events: none; }
.btn.is-loading .btn-spinner { display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }
.modal-success { text-align: center; padding: 32px 0 8px; }
.success-icon svg { margin: 0 auto 16px; }
.modal-success h3 { font-family: var(--head); font-size: 28px; margin-bottom: 8px; }
.modal-success p { color: var(--mut); margin: 0 0 24px; }
.modal-success .btn { border: 0; cursor: pointer; font-family: inherit; }
@media (max-width: 600px) { .modal-content { padding: 28px 20px; } .demo-form .cc-wrap { flex-basis: 84px; width: 84px; } }
@media (prefers-reduced-motion: reduce) { .btn-spinner { animation-duration: 1.6s; } }

/* feature pages (scripts/build-pages.js) */
.phero { padding: 88px 0 72px; text-align: center; border-bottom: 1px solid var(--line); background: radial-gradient(640px 320px at 50% 0, rgba(141,186,63,.13), transparent 70%); }
.phero h1 { max-width: 920px; margin: 20px auto; font-size: clamp(38px, 5.6vw, 64px); line-height: 1.04; letter-spacing: -.032em; }
.phero h1 span { color: var(--lime-tx); }
.phero .lead { max-width: 680px; margin: 0 auto 32px; }
.crumbs { margin-bottom: 18px; font-size: 13px; color: var(--dim); } .crumbs a:hover { color: var(--tx); }
.fgroup { display: grid; grid-template-columns: 1fr 1.4fr; gap: 56px; padding: 72px 0; border-bottom: 1px solid var(--line); }
.fgroup:last-child { border-bottom: 0; }
.fgroup h2 { margin: 14px 0 16px; font-size: clamp(28px, 3.4vw, 40px); line-height: 1.08; }
.fgroup .lead { font-size: 17px; }
.flist { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 0; padding: 0; list-style: none; align-content: start; }
.flist li { padding: 20px; border-radius: 16px; background: var(--s1); border: 1px solid var(--line); }
.flist b { display: block; margin-bottom: 6px; font-size: 16px; }
.flist span { color: var(--mut); font-size: 14.5px; line-height: 1.55; }
.media { margin-top: 28px; border-radius: 16px; overflow: hidden; border: 1px solid var(--line2); }
.media img, .media video { width: 100%; height: auto; }
.note { margin-top: 18px; color: var(--dim); font-size: 14px; }
.related-sec { padding-top: 0; }
.related { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.related a { display: block; padding: 22px; border-radius: 16px; background: var(--s1); border: 1px solid var(--line); transition: border-color .2s; }
.related a:hover { border-color: var(--line2); }
.related b { display: block; margin-bottom: 6px; font: 700 17px var(--head); }
.related span { color: var(--mut); font-size: 14px; }
.cta-band { padding: 96px 0; text-align: center; border-top: 1px solid var(--line); }
.cta-band h2 { font-size: clamp(32px, 4.4vw, 52px); }
.cta-band .lead { max-width: 600px; margin: 18px auto 32px; }
.seg .more { display: inline-block; margin-top: 12px; color: var(--lime-tx); font-size: 14px; font-weight: 600; } .seg .more:hover { color: var(--tx); }
/* comparison pages: "which fits you" pair, and link cards in a feature list */
.fit { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-content: start; }
.fit > div { padding: 22px; border-radius: 16px; background: var(--s1); border: 1px solid var(--line); }
.fit > .us { border-color: rgba(141,186,63,.45); }
.fit h3 { margin: 0 0 12px; font-size: 17px; }
.fit ul { margin: 0; padding-left: 18px; color: var(--mut); font-size: 14.5px; line-height: 1.55; }
.fit li + li { margin-top: 8px; }
.flist a { display: block; margin: -20px; padding: 20px; border-radius: 16px; }
.flist li:has(a) { transition: border-color .2s; } .flist li:has(a):hover { border-color: var(--line2); }
.flist a b::after { content: " →"; color: var(--lime-tx); }
.fgroup .lead a { color: var(--lime-tx); text-decoration: underline; text-underline-offset: 3px; }
.prose p { margin: 0 0 16px; color: var(--mut); font-size: 17px; line-height: 1.65; } .prose p:last-child { margin-bottom: 0; }
/* side-by-side table; on phones each row becomes a card with labelled cells */
.vsec { padding: 72px 0; border-bottom: 1px solid var(--line); }
.vsec .sec-head { margin-bottom: 36px; }
.vs { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 15px; }
.vs th, .vs td { padding: 16px 18px; text-align: left; vertical-align: top; line-height: 1.5; border-bottom: 1px solid var(--line); }
.vs thead th { font: 700 18px var(--head); border-bottom-color: var(--line2); }
.vs tbody th { width: 22%; font-weight: 600; }
.vs td { width: 39%; color: var(--mut); }
.vs .us { background: rgba(141,186,63,.07); color: var(--tx); }
.vs thead .us { color: var(--lime-tx); border-radius: 14px 14px 0 0; }
.vs tbody tr:last-child > * { border-bottom: 0; } .vs tbody tr:last-child .us { border-radius: 0 0 14px 14px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.vs-note a { color: var(--mut); text-decoration: underline; }
.vs-note { margin-top: 18px; text-align: center; font-size: 13px; color: var(--dim); }
@media (max-width: 960px) { .fgroup { grid-template-columns: 1fr; gap: 28px; padding: 56px 0; } .related { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .phero { padding: 60px 0 52px; } .flist, .related, .fit { grid-template-columns: 1fr; } .cta-band { padding: 72px 0; } }
@media (max-width: 640px) {
  .vsec { padding: 56px 0; }
  .vs thead { display: none; }
  .vs, .vs tbody, .vs tr, .vs th, .vs td { display: block; width: auto; }
  .vs tr { margin-bottom: 12px; padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--s1); }
  .vs th, .vs td { padding: 0; border: 0; }
  .vs tbody th { width: auto; margin-bottom: 10px; font-size: 16px; }
  .vs td { padding: 10px 12px; border-radius: 10px; }
  .vs td + td { margin-top: 6px; }
  .vs td::before { content: attr(data-label); display: block; margin-bottom: 2px; font: 500 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
  .vs td.us::before { color: var(--lime-tx); }
  .vs tbody tr:last-child .us { border-radius: 10px; }
}