/* Okmand landing.
   System: one container, one section rhythm, two layout components
   (.trio of .cell cards, and .split cards with a text half and a stage half).
   Everything is sized from the tokens below. */

.landing {
  /* layout */
  --page: 1120px; --gutter: 24px; --gap: 16px;
  --section: 104px; --head-gap: 52px;
  /* spacing scale */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;
  /* radii */
  --r-in: 14px; --r-card: 22px; --r-pill: 999px;
  --pad: 28px; --pad-lg: 48px;
  /* type */
  --dw: 500;
  --fs-display: clamp(36px, 5.2vw, 70px);
  --fs-h2: clamp(28px, 3.7vw, 50px);
  --fs-h3: 21px; --fs-h3-lg: 30px;
  --fs-lead: 19px; --fs-body: 16px; --fs-sm: 14px; --fs-xs: 12.5px;
  /* accents: flat colour, used small */
  --blue: #3b5bdb; --green: #2f7d5b; --amber: #8a5800; --violet: #6741d9; --coral: #c2410c; --cyan: #0b7285;
  /* code */
  --code-key: #6741d9; --code-str: #2f7d5b; --code-num: #c2410c; --code-kw: #3b5bdb; --code-fn: #0b7285; --code-com: #8c8c87;
  font-size: var(--fs-body); overflow-x: hidden;
}
[data-theme="dark"] .landing {
  --bg: #0a0a0b; --bg-subtle: #121213; --bg-muted: #1c1c1e; --border: #242427; --border-strong: #37373b;
  --blue: #8da2fb; --green: #6fc49c; --amber: #e0b050; --violet: #b79cf7; --coral: #f0907f; --cyan: #6cc7d9;
  --code-key: #b79cf7; --code-str: #8fd3ae; --code-num: #f0a37f; --code-kw: #8da2fb; --code-fn: #6cc7d9; --code-com: #6f6f6b;
}
.t-blue { --c: var(--blue); } .t-green { --c: var(--green); } .t-amber { --c: var(--amber); }
.t-violet { --c: var(--violet); } .t-coral { --c: var(--coral); } .t-cyan { --c: var(--cyan); }

/* ---------- motion ---------- */
.js .rv { opacity: 0; transform: translateY(18px); filter: blur(5px); transition: opacity 0.8s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1), filter 0.8s; transition-delay: var(--d, 0ms); }
.js .rv.in { opacity: 1; transform: none; filter: none; }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 45%, transparent); } 50% { box-shadow: 0 0 0 8px transparent; } }
@keyframes blink { 50% { opacity: 0; } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes word { to { opacity: 1; transform: none; filter: none; } }
@keyframes notif { from { opacity: 0; transform: translateY(40px) scale(0.94); } }
@keyframes pop { from { transform: scale(0.6); opacity: 0; } }
@keyframes pinfill { to { background: var(--text); border-color: var(--text); } }
@keyframes fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes draw { to { stroke-dashoffset: 0; } }

/* ---------- primitives ---------- */
.wrap { max-width: var(--page); margin: 0 auto; padding: 0 var(--gutter); }
.landing .btn { border-radius: var(--r-pill); }
.landing .btn.lg { height: 46px; padding: 0 22px; }
.landing .btn.sm { height: 30px; padding: 0 12px; font-size: var(--fs-xs); }
.dim { color: var(--text-3); }
.linkish { background: none; border: 0; padding: 0; font: inherit; color: var(--text-3); cursor: pointer; }
.linkish:hover { color: var(--text); }
pre.code { margin: 0; }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; border-radius: var(--r-pill); font-size: 12px; font-weight: 500; white-space: nowrap; color: var(--c, var(--text-2)); background: color-mix(in srgb, var(--c, var(--text-3)) 14%, transparent); }
.ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex: none; color: var(--c, var(--text)); background: color-mix(in srgb, var(--c, var(--text-3)) 14%, transparent); }
.ico .i { width: 18px; height: 18px; }
.seg { display: inline-flex; padding: 3px; border: 1px solid var(--border); border-radius: var(--r-pill); background: var(--bg-subtle); gap: 2px; max-width: 100%; }
.seg button { height: 32px; padding: 0 15px; border-radius: var(--r-pill); border: 0; background: transparent; color: var(--text-2); font: inherit; font-size: 13.5px; font-weight: 500; white-space: nowrap; cursor: pointer; transition: background 0.2s, color 0.2s; }
.seg button:hover { color: var(--text); }
.seg button.on { background: var(--primary); color: var(--on-primary); }
.checks-list { list-style: none; padding: 0; margin: var(--s5) 0 0; display: grid; gap: var(--s3); color: var(--text-2); font-size: 15.5px; }
.checks-list li { display: flex; gap: var(--s3); }
.checks-list .i { margin-top: 4px; color: var(--green); }

/* ---------- nav ---------- */
.l-nav { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3); border-bottom: 1px solid transparent; transition: border-color 0.3s; }
.l-nav.scrolled { border-bottom-color: var(--border); }
.l-nav-in { max-width: var(--page); margin: 0 auto; height: 64px; padding: 0 var(--gutter); display: flex; align-items: center; gap: var(--s6); }
.l-nav .brand { padding: 0; }
.l-links { display: flex; gap: 26px; color: var(--text-2); font-size: var(--fs-sm); margin: 0; }
.l-links a { transition: color 0.15s; } .l-links a:hover { color: var(--text); }
.l-nav .right { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.l-nav .lang-btn { font-size: 11px; font-weight: 600; letter-spacing: 0.04em; color: var(--text-2); }
.menu-btn { display: none; }

/* ---------- hero ---------- */
.hero { position: relative; padding: 72px 0 0; text-align: center; }
.hero-bg { position: absolute; inset: -64px 0 auto 0; height: 720px; width: 100%; pointer-events: none; -webkit-mask-image: radial-gradient(ellipse 60% 70% at 50% 32%, #000 15%, transparent 72%); mask-image: radial-gradient(ellipse 60% 70% at 50% 32%, #000 15%, transparent 72%); }
.hero > .wrap { position: relative; }
.tag { display: inline-flex; align-items: center; gap: 10px; height: 34px; padding: 0 14px 0 6px; border: 1px solid var(--border); border-radius: var(--r-pill); font-size: 13px; color: var(--text-2); background: color-mix(in srgb, var(--bg) 70%, transparent); backdrop-filter: blur(8px); margin-bottom: var(--s6); transition: border-color 0.2s, color 0.2s; }
.tag:hover { border-color: var(--border-strong); color: var(--text); }
.tag .i { width: 13px; height: 13px; transition: transform 0.2s; } .tag:hover .i { transform: translateX(2px); }
.hero h1 { font-size: var(--fs-display); font-weight: var(--dw); letter-spacing: -0.03em; line-height: 1.06; max-width: 1000px; margin: 0 auto; text-wrap: balance; }
.hero h1 .w { display: inline-block; opacity: 0; transform: translateY(0.4em); filter: blur(8px); animation: word 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) forwards; animation-delay: calc(var(--n) * 60ms + 80ms); }
.hero .lead { max-width: 680px; margin: var(--s6) auto 0; font-size: var(--fs-lead); color: var(--text-2); line-height: 1.55; text-wrap: pretty; }
.hero .cta { display: flex; justify-content: center; gap: 10px; margin-top: var(--s6); }

/* ---------- live demo ---------- */
.demo { margin: var(--s8) auto 0; border: 1px solid var(--border); border-radius: var(--r-card); background: var(--bg-subtle); text-align: left; font-size: 13px; overflow: hidden; box-shadow: var(--shadow); }
.demo-bar { display: flex; align-items: center; gap: var(--s3); height: 48px; padding: 0 14px; border-bottom: 1px solid var(--border); }
.lights { display: flex; gap: 6px; }
.lights i { width: 10px; height: 10px; border-radius: 50%; background: var(--border-strong); }
.steps { display: flex; align-items: center; gap: 4px; margin: 0 auto; }
.steps span { padding: 4px 10px; border-radius: var(--r-pill); font-size: 12px; color: var(--text-3); transition: background 0.3s, color 0.3s; }
.steps span.on { background: color-mix(in srgb, var(--blue) 16%, transparent); color: var(--blue); }
.steps span.done { color: var(--text-2); }
.steps i { width: 14px; height: 1px; background: var(--border-strong); }
.demo-body { display: grid; grid-template-columns: 1fr 300px 1fr; height: 496px; }
.pane { min-width: 0; padding: 18px 20px; border-right: 1px solid var(--border); overflow: hidden; display: flex; flex-direction: column; }
.pane:last-child { border-right: 0; }
.pane-h { display: flex; align-items: center; gap: var(--s2); font-size: 12px; color: var(--text-3); margin-bottom: var(--s4); height: 16px; }
.live { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; color: var(--green); }
.live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--green); animation: blink 1.4s steps(2) infinite; }
.feed { display: grid; gap: 10px; align-content: start; }
.feed > div { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: var(--r-in); background: var(--bg); border: 1px solid var(--border); font-size: 13.5px; line-height: 1.4; animation: fadeUp 0.35s both; }
.feed .i { margin-top: 2px; color: var(--text-3); }
.feed .warn .i { color: var(--amber); } .feed .ok .i { color: var(--green); } .feed .bad .i { color: var(--coral); } .feed .wait .i { color: var(--blue); animation: spin 1s linear infinite; }
.feed b { font-weight: 500; }
.phonewrap { background: var(--bg); align-items: center; }
.phonewrap .pane-h { align-self: stretch; margin-bottom: var(--s2); }
.phone { width: 232px; height: 392px; border: 1px solid var(--border-strong); border-radius: 34px; padding: 8px; background: var(--bg-subtle); position: relative; flex: none; }
.phone::before { content: ""; position: absolute; top: 16px; left: 50%; width: 64px; height: 18px; margin-left: -32px; border-radius: 12px; background: var(--bg-subtle); border: 1px solid var(--border); z-index: 2; }
.screen { height: 100%; border-radius: 27px; background: var(--bg); border: 1px solid var(--border); overflow: hidden; position: relative; padding: 48px 14px 14px; display: flex; flex-direction: column; }
.screen > * { animation: fadeUp 0.45s both; }
.lock-time { text-align: center; font-size: 46px; font-weight: 500; letter-spacing: -0.04em; margin-top: 18px; line-height: 1; }
.lock-date { text-align: center; color: var(--text-3); font-size: 12px; margin-top: 6px; }
.notif { margin-top: auto; border: 1px solid var(--border); border-radius: 16px; padding: 12px; background: var(--bg-subtle); display: flex; gap: 10px; animation: notif 0.6s cubic-bezier(0.2, 0.9, 0.3, 1.2) both; }
.notif .mark { flex: none; }
.notif b { display: block; font-size: 12px; font-weight: 600; }
.notif span { font-size: 12px; color: var(--text-2); line-height: 1.35; display: block; }
.p-eyebrow { font-size: 11px; color: var(--c, var(--text-3)); }
.p-amount { font-size: 26px; font-weight: 600; letter-spacing: -0.03em; margin-top: 2px; }
.p-sub { font-size: 12px; color: var(--text-2); margin-bottom: 10px; }
.p-row { display: flex; justify-content: space-between; gap: 8px; padding: 7px 0; border-top: 1px solid var(--border); font-size: 11.5px; }
.p-row span:first-child { color: var(--text-3); }
.p-actions { margin-top: auto; display: grid; gap: 6px; }
.p-actions .btn { height: 38px; font-size: 13px; }
.p-actions .btn.accent.wait { animation: pulse 1.6s infinite; }
.p-center { margin: auto; text-align: center; }
.p-center h4 { margin: 14px 0 4px; font-size: 15px; font-weight: 600; }
.p-center p { font-size: 12px; color: var(--text-2); }
.ring { width: 56px; height: 56px; border-radius: 50%; margin: 0 auto; display: grid; place-items: center; border: 1.5px solid var(--border); }
.ring.spin { border-top-color: var(--accent); animation: spin 0.8s linear infinite; }
.ring.ok { border-color: var(--green); color: var(--green); background: color-mix(in srgb, var(--green) 12%, transparent); animation: pop 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.4); }
.ring.bad { border-color: var(--coral); color: var(--coral); background: color-mix(in srgb, var(--coral) 12%, transparent); }
.ring .i { width: 24px; height: 24px; }
.pin { display: flex; justify-content: center; gap: 10px; margin: 14px 0; }
.pin i { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--border-strong); transition: background 0.15s, border-color 0.15s, transform 0.15s; }
.pin i.on { background: var(--text); border-color: var(--text); transform: scale(1.1); }
.logline { position: relative; padding: 0 0 15px 20px; animation: fadeUp 0.4s both; }
.logline::before { content: ""; position: absolute; left: 3px; top: 6px; width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid var(--border-strong); background: var(--bg-subtle); z-index: 1; }
.logline::after { content: ""; position: absolute; left: 6.5px; top: 14px; bottom: -6px; width: 1px; background: var(--border); }
.logline:last-child::after { display: none; }
.logline.ok::before { background: var(--green); border-color: var(--green); }
.logline.bad::before { background: var(--coral); border-color: var(--coral); }
.logline b { font-weight: 500; display: block; font-size: 13.5px; line-height: 1.35; }
.logline span { font-family: var(--mono); font-size: 11px; color: var(--text-3); }
.facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); margin-top: var(--s7); text-align: left; }
.facts > div { padding: var(--s2) var(--pad); display: grid; gap: var(--s2); align-content: start; }
.facts > div + div { border-left: 1px solid var(--border); }
.facts b { font-size: 40px; font-weight: var(--dw); letter-spacing: -0.035em; line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums; }
.facts b em { font-style: normal; color: var(--c); }
.facts > div > span { color: var(--text-2); font-size: var(--fs-sm); line-height: 1.4; }

/* ---------- section rhythm ---------- */
.band { padding: var(--section) 0; }
.band-head { max-width: 820px; margin: 0 auto var(--head-gap); text-align: center; }
.band-head h2, .split-text > h2 { font-size: var(--fs-h2); font-weight: var(--dw); letter-spacing: -0.028em; line-height: 1.08; text-wrap: balance; }
.band-head p { color: var(--text-2); margin: var(--s4) auto 0; font-size: 18px; line-height: 1.55; max-width: 620px; text-wrap: pretty; }
.stack { display: grid; gap: var(--gap); }

/* ---------- component: cell + trio ---------- */
.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.cell { border: 1px solid var(--border); border-radius: var(--r-card); background: var(--bg-subtle); padding: var(--pad); display: flex; flex-direction: column; min-width: 0; transition: border-color 0.3s; }
.cell:hover { border-color: var(--border-strong); }
.cell .ico { margin-bottom: var(--s6); }
.cell h3 { font-size: var(--fs-h3); font-weight: var(--dw); letter-spacing: -0.018em; line-height: 1.2; }
.cell h3 + p, .cell > div > h3 + p { color: var(--text-2); font-size: 15.5px; line-height: 1.5; margin-top: var(--s2); }
.cell-foot { margin-top: auto; padding-top: var(--pad); font-size: var(--fs-sm); }
.inrow { display: flex; align-items: center; gap: var(--s3); min-height: 48px; padding: 0 var(--s3) 0 var(--s4); border: 1px solid var(--border); border-radius: var(--r-in); background: var(--bg); font-size: var(--fs-sm); }
.inrow > :last-child { margin-left: auto; }
.inrow b { font-weight: 500; }

/* ---------- component: split ---------- */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border: 1px solid var(--border); border-radius: var(--r-card); background: var(--bg-subtle); overflow: hidden; min-height: 540px; }
.split-text { padding: var(--pad-lg); display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.split-text > h3 { font-size: var(--fs-h3-lg); font-weight: var(--dw); letter-spacing: -0.024em; line-height: 1.12; text-wrap: balance; }
.split-text > p { color: var(--text-2); font-size: 17px; line-height: 1.55; margin-top: var(--s4); max-width: 440px; }
.split-stage { position: relative; min-width: 0; display: grid; place-items: center; padding: var(--s6); border-left: 1px solid var(--border); background-color: var(--bg); background-image: radial-gradient(color-mix(in srgb, var(--text) 10%, transparent) 1px, transparent 1px); background-size: 22px 22px; }
.split.rev .split-stage { order: -1; border-left: 0; border-right: 1px solid var(--border); }
.split-stage.plain { background-image: none; padding: 0; place-items: stretch; }

/* ---------- why: comparison, one card on the three-column grid ---------- */
.cmp { width: 100%; margin-top: var(--s8); table-layout: fixed; border-collapse: separate; border-spacing: 0; font-size: var(--fs-body); border: 1px solid var(--border); border-radius: var(--r-card); background: var(--bg-subtle); overflow: hidden; }
.cmp caption { caption-side: top; text-align: center; padding-bottom: var(--s6); }
.cmp caption b { display: block; font-size: var(--fs-h3-lg); font-weight: var(--dw); letter-spacing: -0.024em; line-height: 1.12; }
.cmp caption span { display: block; margin-top: var(--s2); color: var(--text-2); font-size: var(--fs-body); }
.cmp th, .cmp td { width: 33.333%; text-align: left; padding: 18px var(--pad); border-bottom: 1px solid var(--border); vertical-align: middle; font-weight: 400; line-height: 1.4; }
.cmp tbody tr:last-child > * { border-bottom: 0; }
.cmp thead th, .cmp thead td { height: 64px; font-size: var(--fs-sm); color: var(--text-2); font-weight: 500; }
.cmp thead th:last-child { display: table-cell; font-size: var(--fs-body); font-weight: 600; color: var(--text); }
.cmp thead th .mark { display: inline-grid; vertical-align: -6px; margin-right: 10px; }
.cmp tbody th { color: var(--text); font-weight: 500; }
.cmp tbody td:nth-child(2) { color: var(--text-2); }
.cmp td:last-child, .cmp thead th:last-child { background: color-mix(in srgb, var(--blue) 8%, var(--bg-subtle)); border-left: 1px solid var(--border); font-weight: 500; }
.cmp td:nth-child(2), .cmp thead th:nth-child(2) { border-left: 1px solid var(--border); }
.cmp td .i { width: 22px; height: 22px; padding: 5px; border-radius: 50%; margin-right: 12px; vertical-align: -6px; stroke-width: 2.2; color: var(--c); background: color-mix(in srgb, var(--c) 16%, transparent); }
.cmp tbody td:nth-child(2) .i { --c: var(--coral); }
.cmp td:last-child .i { --c: var(--green); }
.cmp tbody tr { transition: background 0.15s; }

/* ---------- how it works ---------- */
.how .split-text { padding: var(--pad); justify-content: center; gap: var(--s1); }
.how-steps { display: grid; gap: var(--s1); }
.how-steps button { position: relative; display: flex; gap: var(--s4); align-items: flex-start; text-align: left; padding: 18px 20px; border-radius: var(--r-in); border: 1px solid transparent; background: transparent; color: var(--text-2); font: inherit; cursor: pointer; overflow: hidden; transition: background 0.25s, border-color 0.25s, color 0.25s; }
.how-steps button:hover { color: var(--text); }
.how-steps button.on { background: var(--bg); border-color: var(--border); color: var(--text); }
.how-steps .n { width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--border-strong); display: grid; place-items: center; font-size: 12px; font-family: var(--mono); flex: none; margin-top: 1px; transition: background 0.25s, color 0.25s, border-color 0.25s; }
.how-steps button.on .n { background: var(--blue); color: var(--bg); border-color: var(--blue); }
.how-steps b { display: block; font-size: 18px; font-weight: var(--dw); letter-spacing: -0.012em; line-height: 1.45; }
.how-steps .d { display: block; max-height: 0; opacity: 0; color: var(--text-2); font-size: 15px; line-height: 1.5; overflow: hidden; transition: max-height 0.4s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.3s, margin 0.3s; }
.how-steps button.on .d { max-height: 150px; opacity: 1; margin-top: 6px; }
.how-steps button.on.auto::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--blue); transform-origin: left; animation: fill 7s linear forwards; }
.viz { position: absolute; inset: 0; padding: var(--s6); display: grid; place-items: center; opacity: 0; transform: scale(0.97); transition: opacity 0.45s, transform 0.55s cubic-bezier(0.2, 0.7, 0.2, 1); pointer-events: none; font-size: 13px; }
.viz.on { opacity: 1; transform: none; pointer-events: auto; }
.doc { width: 320px; max-width: 100%; background: var(--bg-subtle); border: 1px solid var(--border); border-radius: 16px; padding: var(--s5); box-shadow: var(--shadow); }
.doc h4 { margin: 0 0 4px; font-size: 15px; font-weight: 600; }
.doc .p-row { font-size: 12.5px; padding: 9px 0; }
.sigline { margin-top: 18px; padding-top: 14px; border-top: 1px dashed var(--border-strong); display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; }
.sigline > svg { width: 110px; height: 40px; overflow: visible; }
.sigline > svg path { fill: none; stroke: var(--blue); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 420; stroke-dashoffset: 420; }
.viz.on .sigline > svg path { transition: stroke-dashoffset 1.6s 0.4s ease-in-out; stroke-dashoffset: 0; }
.seal { opacity: 0; transform: scale(0.8); max-width: 100%; }
.viz.on .seal { transition: opacity 0.4s 1.9s, transform 0.4s 1.9s cubic-bezier(0.2, 0.9, 0.3, 1.4); opacity: 1; transform: none; }
.checks { width: 340px; max-width: 100%; display: grid; gap: var(--s2); }
.checks .req { display: flex; gap: 10px; align-items: center; background: var(--bg-subtle); border: 1px solid var(--border); border-radius: var(--r-in); padding: 14px 16px; margin-bottom: var(--s2); font-size: 14px; }
.checks .req b { font-weight: 500; }
.chk { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border: 1px solid var(--border); border-radius: var(--r-in); background: var(--bg-subtle); font-size: 14px; opacity: 0; transform: translateX(-10px); }
.chk .i { color: var(--green); }
.chk.go { border-color: var(--blue); } .chk.go .i { color: var(--blue); }
.viz.on .chk { transition: opacity 0.4s, transform 0.4s; transition-delay: calc(var(--k) * 260ms + 350ms); opacity: 1; transform: none; }
.signcard { width: 300px; max-width: 100%; }
.signcard .notif { margin: 0 0 var(--s3); animation: none; }
.viz.on .signcard .notif { animation: notif 0.6s 0.3s both; }
.signcard .doc { width: auto; opacity: 0; }
.viz.on .signcard .doc { animation: fadeUp 0.5s 1s both; }
.viz.on .signcard .pin i { animation: pinfill 0.2s forwards; animation-delay: calc(var(--k) * 180ms + 1700ms); }
.signcard .signed { display: flex; align-items: center; justify-content: center; gap: var(--s2); font-size: 13px; color: var(--green); opacity: 0; }
.viz.on .signcard .signed { animation: fadeUp 0.4s 3s both; }
.chain { width: 100%; max-width: 400px; }
.block { display: flex; align-items: center; gap: var(--s3); padding: 12px 14px; background: var(--bg-subtle); border: 1px solid var(--border); border-radius: var(--r-in); font-size: 14px; transition: border-color 0.3s, background 0.3s; opacity: 0; }
.viz.on .block { animation: fadeUp 0.4s both; animation-delay: calc(var(--k) * 160ms + 250ms); }
.block b { font-weight: 500; }
.block .mono { margin-left: auto; color: var(--text-3); font-size: 11px; transition: color 0.3s; }
.block.bad { border-color: var(--coral); background: color-mix(in srgb, var(--coral) 8%, var(--bg-subtle)); }
.block.bad .mono { color: var(--coral); }
.joint { height: 12px; width: 1px; margin-left: 22px; background: var(--border-strong); }
.joint.bad { background: transparent; border-left: 1px dashed var(--coral); }
.chain-foot { display: flex; align-items: center; gap: 10px; margin-top: var(--s4); font-size: 13px; background: var(--bg-subtle); border: 1px solid var(--border); border-radius: var(--r-pill); padding: 6px 6px 6px 14px; }
.chain-foot .state-l { display: inline-flex; align-items: center; gap: var(--s2); color: var(--green); }
.chain-foot .state-l.bad { color: var(--coral); }
.chain-foot .btn { margin-left: auto; }

/* ---------- product frame ---------- */
.frame-tabs { display: flex; justify-content: center; margin-bottom: var(--s5); }
.frame { border: 1px solid var(--border); border-radius: var(--r-card); overflow: hidden; background: var(--bg-subtle); box-shadow: var(--shadow); }
.frame-bar { display: flex; align-items: center; gap: var(--s4); height: 48px; padding: 0 14px; border-bottom: 1px solid var(--border); }
.frame-url { flex: 1; max-width: 360px; margin: 0 auto; height: 28px; border-radius: var(--r-pill); background: var(--bg); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; gap: var(--s2); font-size: 12px; color: var(--text-3); }
.frame-url .i { width: 12px; height: 12px; color: var(--green); }
.frame-view { position: relative; overflow: hidden; background: var(--bg); }
.frame-view iframe { border: 0; width: 1360px; height: 760px; transform-origin: 0 0; display: block; }

/* ---------- use cases ---------- */
.pills { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s6); }
.pills button { display: inline-flex; align-items: center; gap: var(--s2); height: 38px; padding: 0 16px; border-radius: var(--r-pill); border: 1px solid var(--border); background: transparent; color: var(--text-2); font: inherit; font-size: var(--fs-sm); font-weight: 500; cursor: pointer; transition: background 0.2s, color 0.2s, border-color 0.2s; }
.pills button::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--c); }
.pills button:hover { border-color: var(--border-strong); color: var(--text); }
.pills button.on { background: var(--bg); color: var(--text); border-color: var(--border-strong); }
.uses-text > h3, .uses-text > p, .uses-text > ul { transition: opacity 0.22s, transform 0.22s; }
.uses-text.out > h3, .uses-text.out > p, .uses-text.out > ul { opacity: 0; transform: translateY(6px); }
.uses .phone { width: 250px; height: 430px; background: var(--bg-subtle); box-shadow: var(--shadow); }
.uses .screen > * { animation: fadeUp 0.35s both; }
.signers { display: flex; align-items: center; gap: var(--s2); padding: 8px 0; border-top: 1px solid var(--border); font-size: 11.5px; }
.signers .avatar { width: 22px; height: 22px; font-size: 9px; }
.signers span:last-child { margin-left: auto; color: var(--text-3); }

/* ---------- control ---------- */
.sw { width: 44px; height: 26px; border-radius: var(--r-pill); background: var(--bg-muted); border: 1px solid var(--border-strong); position: relative; transition: background 0.25s, border-color 0.25s; flex: none; padding: 0; cursor: pointer; }
.sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: var(--text); transition: transform 0.25s cubic-bezier(0.2, 0.9, 0.3, 1.3); }
.sw.on { background: var(--coral); border-color: var(--coral); }
.sw.on::after { transform: translateX(18px); background: #fff; }
.meter-row { display: grid; gap: 10px; }
.meter-row .nums { display: flex; justify-content: space-between; font-size: 13px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.meter-row .nums b { color: var(--text); font-weight: 500; }
.big-meter { height: 8px; border-radius: 8px; background: var(--bg-muted); overflow: hidden; }
.big-meter i { display: block; height: 100%; width: 0; background: var(--amber); border-radius: 8px; transition: width 1.6s cubic-bezier(0.2, 0.7, 0.2, 1) 0.3s; }
.cell.in .big-meter i { width: var(--w); }
.wide { flex-direction: row; align-items: center; gap: var(--s7); padding: var(--pad) var(--pad) var(--pad) var(--pad); }
.wide > div { flex: 1; min-width: 0; }
.wide .ico { margin-bottom: var(--s5); }
.wallet { display: grid; gap: var(--s3); justify-items: start; }
.wallet-rows { width: 100%; background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-in); }
.wallet-rows > div { display: grid; grid-template-columns: 180px 1fr; align-items: center; gap: var(--s4); padding: 13px 16px; border-bottom: 1px solid var(--border); font-size: 14.5px; }
.wallet-rows > div:last-child { border-bottom: 0; }
.wallet-rows .k { color: var(--text-2); }
.swap { transition: opacity 0.2s, transform 0.2s; display: inline-block; font-weight: 500; }
.swap.out { opacity: 0; transform: translateY(4px); }

/* ---------- developers: coloured code ---------- */
.codewin { display: flex; flex-direction: column; width: 100%; height: 100%; font-size: 13px; }
.codebar { display: flex; align-items: center; gap: 2px; height: 48px; padding: 0 12px; border-bottom: 1px solid var(--border); background: var(--bg-subtle); }
.codebar button { height: 30px; padding: 0 12px; border-radius: var(--r-pill); border: 0; background: transparent; color: var(--text-3); font: inherit; font-size: var(--fs-xs); cursor: pointer; transition: color 0.15s, background 0.15s; }
.codebar button:hover { color: var(--text); }
.codebar button.on { background: var(--bg-muted); color: var(--text); }
.codebar .copy { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; }
.codewin .code { flex: 1; padding: var(--s5) var(--s5) var(--s5) 0; font-family: var(--mono); font-size: 13px; line-height: 1.75; color: var(--text-2); white-space: pre; overflow: auto; counter-reset: ln; }
.codewin .code .ln { display: block; }
.codewin .code .ln::before { counter-increment: ln; content: counter(ln); display: inline-block; width: 44px; padding-right: 16px; text-align: right; color: var(--text-3); opacity: 0.6; user-select: none; }
.ck { color: var(--code-key); } .cs { color: var(--code-str); } .cn { color: var(--code-num); } .cw { color: var(--code-kw); } .cf { color: var(--code-fn); } .cc { color: var(--code-com); font-style: italic; } .cv { color: var(--text); }
.codeout { display: flex; align-items: center; gap: 10px; padding: 12px var(--s5); border-top: 1px solid var(--border); background: var(--bg-subtle); font-family: var(--mono); font-size: 12px; color: var(--text-2); }
.codeout b { color: var(--green); font-weight: 500; }
.std { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s5) var(--gap); padding: 0 4px var(--s5); }
.std .mono { font-size: 12px; color: var(--c); }
.std h4 { font-size: 16px; font-weight: var(--dw); margin: 8px 0 4px; }
.std p { font-size: var(--fs-sm) !important; color: var(--text-2); line-height: 1.5; padding: 0 !important; }
.verify { padding: 0 4px var(--s5); }
.verify-lead { color: var(--text-2); font-size: 15.5px !important; max-width: 700px; padding: 0 !important; }
.verify-body { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); margin-top: var(--s4); align-items: start; }
.verify textarea { font-family: var(--mono); font-size: 12.5px !important; line-height: 1.6; resize: vertical; min-height: 210px; white-space: pre; }
.verify .f label { font-size: 13px; color: var(--text-2); font-weight: 400; }
.verify-side { display: grid; gap: var(--s3); }
.vrow { display: grid; gap: 6px; font-size: 13px; color: var(--text-2); }
.vrow code { font-family: var(--mono); font-size: 12px; color: var(--text); background: var(--bg-subtle); border: 1px solid var(--border); border-radius: var(--r-in); padding: 10px 12px; overflow-wrap: anywhere; line-height: 1.5; transition: border-color 0.2s, color 0.2s; }
.vstate { display: flex; align-items: center; gap: 10px; font-size: var(--fs-sm); font-weight: 500; color: var(--green); min-height: 24px; }
.vstate.bad { color: var(--coral); }
.verify.bad #vNow { border-color: var(--coral); color: var(--coral); }
.verify-side .btn { justify-self: start; }
.note { text-align: center; font-size: var(--fs-sm); color: var(--text-3); margin-top: var(--s5); }

/* ---------- pricing ---------- */
.price .cell { gap: 0; }
.price-top { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); min-height: 26px; }
.price-sub { color: var(--text-2); font-size: 15px; margin-top: var(--s1); }
.price ul { list-style: none; padding: 0; margin: var(--s5) 0 var(--pad); display: grid; gap: 10px; font-size: 14.5px; color: var(--text-2); }
.price li { display: flex; gap: 10px; }
.price li .i { margin-top: 3px; color: var(--green); }
.price .btn { margin-top: auto; height: 42px; }

/* ---------- accordion ---------- */
.acc { border-top: 1px solid var(--border); }
.acc.narrow { max-width: 760px; margin: 0 auto; }
.acc details { border-bottom: 1px solid var(--border); }
.acc summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--s4); padding: 22px 4px; font-size: 18px; font-weight: var(--dw); letter-spacing: -0.012em; }
.acc summary::-webkit-details-marker { display: none; }
.acc summary .i { color: var(--text-3); transition: transform 0.25s; }
.acc details[open] summary .i { transform: rotate(180deg); }
.acc details > p { color: var(--text-2); padding: 0 40px var(--s5) 4px; font-size: 16px; line-height: 1.6; animation: fadeUp 0.3s both; }
.acc details > div { animation: fadeUp 0.3s both; }

/* ---------- pilot form ---------- */
.form { width: 100%; max-width: 420px; border: 1px solid var(--border); border-radius: var(--r-card); background: var(--bg-subtle); padding: var(--s5); display: grid; gap: var(--s4); box-shadow: var(--shadow); font-size: var(--fs-sm); }
.f { display: grid; gap: 6px; }
.f label { font-weight: 500; }
.f input, .f textarea { width: 100%; border: 1px solid var(--border-strong); border-radius: 12px; background: var(--bg); color: var(--text); font: inherit; font-size: 16px; padding: 10px 12px; transition: border-color 0.15s, box-shadow 0.15s; }
.f input { height: 44px; }
.f input:focus, .f textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.f [aria-invalid="true"] { border-color: var(--coral); }
.f .err { color: var(--coral); font-size: 13px; }
.f .err:empty { display: none; }
.form .btn { width: 100%; }
.form-note { font-size: 13px; color: var(--text-3); text-align: center; }
.form-done { text-align: center; padding: 40px 8px; outline: none; }
.form-done h3 { font-size: 20px; font-weight: 600; margin: 18px 0 6px; letter-spacing: -0.02em; }
.form-done p { color: var(--text-2); }
.spinner { width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor; border-top-color: transparent; animation: spin 0.7s linear infinite; }

/* ---------- footer ---------- */
.foot { border-top: 1px solid var(--border); padding: var(--s7) 0; font-size: 13px; color: var(--text-3); }
.foot .wrap { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--s6) var(--gap); align-items: start; }
.foot .wrap > div:first-child { grid-column: span 3; }
.foot h3 { margin: 0 0 var(--s3); font-size: 13px; font-weight: 500; color: var(--text); line-height: 24px; }
.foot a { display: block; padding: 4px 0; color: var(--text-3); transition: color 0.2s; }
.foot a:hover { color: var(--text); }
.foot .brand { color: var(--text); padding: 0 0 var(--s3); display: flex; }
.foot .legal { grid-column: 1 / -1; border-top: 1px solid var(--border); padding-top: var(--s5); display: flex; justify-content: space-between; }

/* ---------- small screens ---------- */
@media (max-width: 960px) {
  .landing { --gutter: 20px; --section: 72px; --head-gap: 36px; --pad: 22px; --pad-lg: 24px; --fs-lead: 17px; --fs-h3-lg: 26px; }
  .l-nav-in { gap: var(--s3); }
  .menu-btn { display: inline-flex; }
  .l-nav .btn.icon { width: 42px; height: 42px; }
  .l-links { display: none; position: absolute; top: 64px; left: 0; right: 0; flex-direction: column; gap: 0; background: var(--bg); border-bottom: 1px solid var(--border); padding: 8px var(--gutter) 16px; }
  .l-links.open { display: flex; }
  .l-links a { padding: 14px 4px; border-bottom: 1px solid var(--border); font-size: 16px; color: var(--text); }
  .l-nav .right { gap: 2px; }
  .l-nav .btn.primary { display: none; }
  .hero { padding-top: 44px; }
  .hero h1 { font-size: clamp(34px, 9.4vw, 44px); }
  .hero .cta { flex-direction: column; align-items: stretch; max-width: 320px; margin-left: auto; margin-right: auto; }
  .demo { margin-top: var(--s7); border-radius: 18px; }
  .demo-body { grid-template-columns: 1fr; height: auto; }
  .pane { border-right: 0; border-bottom: 1px solid var(--border); }
  .pane.phonewrap { order: -1; padding-bottom: var(--s5); }
  .pane:not(.phonewrap) { height: 220px; }
  .pane:last-child { border-bottom: 0; }
  .steps { display: none; }
  .demo-bar .lights { margin-right: auto; }
  .facts { grid-template-columns: 1fr; gap: 0; margin-top: var(--s6); }
  .facts > div { grid-template-columns: 96px 1fr; align-items: baseline; padding: 18px 0; }
  .facts > div + div { border-left: 0; border-top: 1px solid var(--border); }
  .facts b { font-size: 32px; }
  .band-head p { font-size: 17px; }
  .trio, .std { grid-template-columns: 1fr; }
  .cell .ico { margin-bottom: var(--s5); }
  .wide { flex-direction: column; align-items: stretch; gap: var(--s5); }
  .cmp { width: 100%; margin: var(--s6) 0 0; border-spacing: 0; }
  .cmp, .cmp tbody, .cmp tr, .cmp th, .cmp td { display: block; }
  .cmp caption { display: block; }
  .cmp thead { display: none; }
  .cmp tr { border: 1px solid var(--border); border-radius: 18px; padding: 16px; margin-bottom: 10px; background: var(--bg-subtle); }
  .cmp th, .cmp td { padding: 0 !important; border: 0 !important; background: none !important; border-radius: 0 !important; }
  .cmp tbody th { font-size: 13px; color: var(--text-3); margin-bottom: 10px; }
  .cmp tbody td:nth-child(2) { margin-bottom: 6px; font-size: 14px; }
  .cmp td:last-child { font-size: 16px; }
  .split { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .split-stage, .split.rev .split-stage { order: -1; border: 0; border-bottom: 1px solid var(--border); min-height: 380px; padding: var(--s4); }
  .split.keep .split-stage { order: 0; border-bottom: 0; border-top: 1px solid var(--border); min-height: 0; }
  .how .split-text { padding: var(--s3); }
  .how-steps button { padding: 14px; }
  .viz { padding: var(--s4); }
  .sigline > svg { width: 96px; height: 36px; }
  .uses .split-stage { min-height: 470px; }
  .frame-tabs { overflow-x: auto; justify-content: flex-start; margin: 0 calc(-1 * var(--gutter)) var(--s5); padding: 0 var(--gutter); scrollbar-width: none; }
  .frame-tabs::-webkit-scrollbar { display: none; }
  .frame-bar .frame-url { display: none; }
  .frame-bar .btn { margin-left: auto; }
  .pills { flex-wrap: nowrap; overflow-x: auto; margin: 0 calc(-1 * var(--pad-lg)) var(--s5); padding: 0 var(--pad-lg); scrollbar-width: none; }
  .pills::-webkit-scrollbar { display: none; }
  .pills button { flex: none; height: 40px; }
  .wallet-rows > div { grid-template-columns: 1fr; gap: 2px; }
  .codewin .code { font-size: 11.5px; }
  .codewin .code .ln::before { width: 30px; padding-right: 10px; }
  .dev .split-stage { min-height: 0; }
  .verify-body { grid-template-columns: 1fr; }
  .form { max-width: none; }
  .pilot .split-stage { padding: var(--s4); min-height: 0; }
  .foot .wrap { grid-template-columns: 1fr 1fr; }
  .foot .wrap > div:first-child { grid-column: 1 / -1; }
  .acc summary { font-size: 16.5px; }
  .acc details > p { padding-right: 8px; }
  .seg button { min-height: 38px; }
}
@media (prefers-reduced-motion: reduce) {
  .js .rv { opacity: 1; transform: none; filter: none; transition: none; }
  .hero h1 .w { opacity: 1; transform: none; filter: none; animation: none; }
}

/* alignment pass */
.pills { gap: 6px; flex-wrap: nowrap; }
.pills button { padding: 0 13px; height: 36px; white-space: nowrap; }
.cell h3 { text-wrap: balance; }
.codewin .code { font-size: 12.5px; }
@media (max-width: 960px) { .pills button { height: 40px; } }

.cell-foot > * { min-height: 48px; }
.meter-row { align-content: center; }

/* rows shared across the three cards: tiles, titles, text and footers line up in any language */
@media (min-width: 961px) {
  @supports (grid-template-rows: subgrid) {
    .trio { grid-template-rows: auto auto auto auto; }
    .trio > .cell { display: grid; grid-template-rows: subgrid; grid-row: span 4; align-content: start; }
    .trio > .cell > * { align-self: start; min-width: 0; }
    .trio > .cell > .cell-foot, .trio > .cell > .btn { align-self: end; margin-top: 0; }
    .trio > .cell > .ico { margin-bottom: var(--s6); }
    .price > .cell > ul { margin-bottom: var(--pad); }
  }
}

.split-stage.plain { grid-template-columns: minmax(0, 1fr); }
.codewin { min-width: 0; overflow: hidden; }

/* icon boxes: always centred */
.ico { padding: 0; border: 0; line-height: 0; }
.ico > svg { display: block; margin: 0; }
.notif span.mark { display: grid; }

/* accordion as a card: same surface, padding and radius as every other card */
.acc.card { border: 1px solid var(--border); border-radius: var(--r-card); background: var(--bg-subtle); overflow: hidden; }
.acc.card details { border-bottom: 1px solid var(--border); }
.acc.card details:last-child { border-bottom: 0; }
.acc.card summary { padding: 20px var(--pad); gap: var(--s4); justify-content: flex-start; transition: background 0.2s; }
.acc.card summary:hover { background: color-mix(in srgb, var(--text) 3%, transparent); }
.acc.card summary .ico { margin: 0; }
.acc.card summary .ico .i { color: var(--c); transform: none; }
.acc.card .sum { display: grid; gap: 2px; min-width: 0; }
.acc.card .sum b { font-size: 17px; font-weight: var(--dw); letter-spacing: -0.012em; }
.acc.card .sum span { font-size: var(--fs-sm); font-weight: 400; color: var(--text-2); letter-spacing: 0; }
.acc.card summary > .i { margin-left: auto; }
.acc.card details > div { padding: var(--s2) var(--pad) var(--pad); }
.acc.card .std, .acc.card .verify { padding-left: var(--pad); padding-right: var(--pad); }
@media (max-width: 960px) { .acc.card summary { padding: 16px var(--pad); } .acc.card .sum span { display: none; } }

/* ---------- phone: iPhone-like silhouette ----------
   tall 19.5:9 body, continuous corners, dark metal frame, side buttons,
   dynamic island, status bar and home indicator */
.phone { --pw: 212px; width: var(--pw); height: auto; aspect-ratio: 9 / 18.6; padding: 7px; border: 0; border-radius: 40px; background: #050506; position: relative; flex: none;
  box-shadow: 0 0 0 2px #3f3f44, var(--shadow); }
.phone::before { content: ""; position: absolute; left: -4.5px; top: 17%; width: 3px; height: 128px; border-radius: 2px 0 0 2px; z-index: 0; margin: 0; border: 0;
  background: linear-gradient(#3f3f44 0 20px, transparent 20px 34px, #3f3f44 34px 76px, transparent 76px 88px, #3f3f44 88px 128px); }
.phone::after { content: ""; position: absolute; right: -4.5px; top: 27%; width: 3px; height: 62px; border-radius: 0 2px 2px 0; background: #3f3f44; }
.screen { border: 0; border-radius: 33px; padding: 50px 14px 22px; }
.screen::before { content: ""; position: absolute; top: 9px; left: 50%; width: 62px; height: 19px; margin-left: -31px; border-radius: 12px; background: #050506; z-index: 3; animation: none; }
.screen::after { content: ""; position: absolute; bottom: 7px; left: 50%; width: 36%; height: 4px; margin-left: -18%; border-radius: 4px; background: var(--text); opacity: 0.32; animation: none; }
.statusbar { position: absolute; top: 7px; left: 7px; right: 7px; height: 38px; padding: 4px 20px 0; display: flex; align-items: center; justify-content: space-between; z-index: 4; font-size: 11px; font-weight: 600; letter-spacing: -0.01em; color: var(--text); pointer-events: none; }
.statusbar .sb { display: flex; align-items: center; gap: 4px; }
.statusbar svg { height: 9px; width: auto; fill: currentColor; }
.lock-time { margin-top: 26px; font-size: 52px; font-weight: 500; }
.demo-body { height: 514px; }
.uses .phone { --pw: 228px; width: var(--pw); height: auto; background: #050506; }
.uses .screen { background: var(--bg-subtle); }
@media (max-width: 960px) { .demo-body { height: auto; } .phone { --pw: 216px; } }

@media (max-width: 960px) {
  .cmp { border: 0; background: none; border-radius: 0; overflow: visible; margin-top: var(--s7); }
  .cmp th, .cmp td { width: auto; }
  .cmp caption { padding-bottom: var(--s5); }
  .cmp tbody td:nth-child(2) { margin-bottom: 10px; }
  .cmp td .i { margin-right: 10px; }
}

.cmp thead th:last-child { border-top-right-radius: calc(var(--r-card) - 1px); }
.cmp tbody tr:last-child td:last-child { border-bottom-right-radius: calc(var(--r-card) - 1px); }
.cmp td span { white-space: nowrap; }
@media (max-width: 960px) { .cmp thead th:last-child, .cmp tbody tr:last-child td:last-child { border-radius: 0; } .cmp td span { white-space: normal; } }