/* Invoise landing. Page chrome follows the theme; paper (sheets, receipt) stays paper. */

@font-face { font-family:"Sofia Sans XC"; src:url(assets/fonts/sofia-xcond-latin.woff2) format("woff2"); font-weight:400 900; font-display:swap; unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:"Sofia Sans XC"; src:url(assets/fonts/sofia-xcond-cyrillic.woff2) format("woff2"); font-weight:400 900; font-display:swap; unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family:"Onest"; src:url(assets/fonts/onest-latin.woff2) format("woff2"); font-weight:400 700; font-display:swap; unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:"Onest"; src:url(assets/fonts/onest-cyrillic.woff2) format("woff2"); font-weight:400 700; font-display:swap; unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family:"Martian Mono"; src:url(assets/fonts/martian-mono-latin.woff2) format("woff2"); font-weight:400 600; font-display:swap; unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:"Martian Mono"; src:url(assets/fonts/martian-mono-cyrillic.woff2) format("woff2"); font-weight:400 600; font-display:swap; unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }

:root {
  color-scheme:light;
  --page:#f2f2f2; --panel:#eaeaea; --raised:#e0e0e0; --line:#d3d3d3; --line-strong:#bdbdbd;
  --ink:#161616; --muted:#5c5c5c;
  --blue:#2438d9; --blue-hover:#1a2bb4; --on-blue:#fff;
  --sheet:#fcfbf7; --canary:#f3d750; --rose:#f4b3c2; --sheet-ink:#161616; --sheet-muted:#55524a; --sheet-line:rgba(22,22,22,.22); --stamp:#2438d9; --pen:#1c2a8c;
  --sheet-shadow:0 1px 0 rgba(0,0,0,.06),0 22px 44px -22px rgba(0,0,0,.4);
  --display:"Sofia Sans XC","Arial Narrow",sans-serif;
  --body:"Onest",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mono:"Martian Mono",ui-monospace,Menlo,monospace;
  --gut:max(20px,calc(50vw - 620px));
  --top:64px;
}
@media (prefers-color-scheme:dark) {
  :root:not([data-theme="light"]) {
    color-scheme:dark;
    --page:#010101; --panel:#0a0a0a; --raised:#141414; --line:#242424; --line-strong:#3a3a3a;
    --ink:#e8e8e8; --muted:#999;
    --blue:#4558f5; --blue-hover:#5b6cff;
    --sheet:#ebe9e2; --canary:#e2c645; --rose:#e3a3b3;
    --sheet-shadow:0 30px 60px -28px rgba(0,0,0,.9);
  }
}
:root[data-theme="dark"] {
  color-scheme:dark;
  --page:#010101; --panel:#0a0a0a; --raised:#141414; --line:#242424; --line-strong:#3a3a3a;
  --ink:#e8e8e8; --muted:#999;
  --blue:#4558f5; --blue-hover:#5b6cff;
  --sheet:#ebe9e2; --canary:#e2c645; --rose:#e3a3b3;
  --sheet-shadow:0 30px 60px -28px rgba(0,0,0,.9);
}

*,*::before,*::after { box-sizing:border-box; }
html { overscroll-behavior-x:none; -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--top) + 16px); }
body { margin:0; background:var(--page); color:var(--ink); font:400 17px/1.55 var(--body); -webkit-font-smoothing:antialiased; overflow-x:clip; }
h1,h2,h3,p,ol,ul,dl,dd,figure,fieldset { margin:0; padding:0; }
ol,ul { list-style:none; }
fieldset { border:0; min-width:0; }
a { color:inherit; }
img,svg { display:block; }
button { font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }
:focus-visible { outline:2px solid var(--blue); outline-offset:3px; border-radius:4px; }
.mono { font-family:var(--mono); }
code { font:inherit; }
.skip { position:absolute; left:-999px; top:8px; z-index:100; background:var(--ink); color:var(--page); padding:10px 14px; border-radius:8px; }
.skip:focus { left:12px; }

/* Type */
.display { font:800 clamp(60px,9.2vw,150px)/.88 var(--display); letter-spacing:-.012em; text-wrap:balance; }
.display-2 { font:800 clamp(42px,6vw,92px)/.92 var(--display); letter-spacing:-.008em; text-wrap:balance; max-width:16ch; }
:lang(ru) .display { font-size:clamp(50px,7.7vw,126px); line-height:.92; }
:lang(ru) .display-2 { font-size:clamp(38px,5.2vw,80px); line-height:.96; max-width:19ch; }
.lede { font-size:clamp(18px,1.5vw,21px); line-height:1.5; max-width:34em; color:var(--muted); }

/* Buttons */
.btn { display:inline-flex; align-items:center; justify-content:center; min-height:52px; padding:0 26px; border-radius:10px; background:var(--blue); color:var(--on-blue); font-weight:600; font-size:17px; text-decoration:none; transition:background .15s,transform .15s; }
.btn:hover { background:var(--blue-hover); transform:translateY(-1px); }
.btn:active { transform:none; }
.btn-small { min-height:40px; padding:0 16px; font-size:15px; }
.btn-big { min-height:64px; padding:0 36px; font-size:20px; }
.btn-ghost { background:transparent; color:var(--ink); box-shadow:inset 0 0 0 1px var(--line-strong); }
.btn-ghost:hover { background:var(--panel); }

/* Header */
.top { position:sticky; top:0; z-index:50; height:var(--top); padding-inline:var(--gut); background:color-mix(in srgb,var(--page) 82%,transparent); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom:1px solid transparent; transition:border-color .2s; }
.top.is-stuck { border-bottom-color:var(--line); }
.top-in { height:100%; display:flex; align-items:center; gap:28px; }
.brand { display:inline-flex; align-items:center; gap:10px; text-decoration:none; font:800 26px/1 var(--display); letter-spacing:.01em; }
.top-nav { display:flex; gap:24px; margin-left:12px; font-size:15px; }
.top-nav a,.top-signin { text-decoration:none; color:var(--muted); transition:color .15s; }
.top-nav a:hover,.top-signin:hover { color:var(--ink); }
.top-tools { margin-left:auto; display:flex; align-items:center; gap:14px; font-size:15px; }
/* Language selector: the panel and type of the former EN/RU tabs, the chosen one dark. */
.lang { position:relative; }
.lang-current { height:36px; display:flex; align-items:center; gap:6px; padding:0 10px; border-radius:9px; border:1px solid var(--line); background:var(--panel); font-size:13px; font-weight:600; color:var(--ink); }
.lang-current svg { color:var(--muted); transition:transform .2s; }
.lang-current[aria-expanded="true"] svg { transform:rotate(180deg); }
.lang-list { position:absolute; top:calc(100% + 6px); right:0; z-index:40; min-width:180px; margin:0; padding:3px; list-style:none; display:flex; flex-direction:column; gap:2px; border-radius:9px; background:var(--panel); border:1px solid var(--line); box-shadow:0 14px 36px rgba(0,0,0,.18); }
.lang-list[hidden] { display:none; }
.lang-list button { width:100%; text-align:left; padding:7px 10px; border-radius:6px; font-size:13px; font-weight:600; color:var(--muted); }
.lang-list button:hover, .lang-list button:focus-visible { color:var(--ink); background:var(--raised); }
.lang-list button[aria-selected="true"] { background:var(--ink); color:var(--page); }
.theme { width:36px; height:36px; display:grid; place-items:center; border-radius:9px; border:1px solid var(--line); background:var(--panel); transition:transform .4s cubic-bezier(.2,.8,.2,1); }
.theme:hover { transform:rotate(180deg); }

/* Hero */
.hero { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(360px,.8fr); gap:clamp(32px,5vw,80px); align-items:center; min-height:calc(100svh - var(--top)); padding:clamp(36px,6vh,72px) var(--gut) clamp(56px,9vh,104px); }
.hero-copy { display:flex; flex-direction:column; gap:28px; align-items:flex-start; }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; }
.hero-note { font-size:15px; color:var(--muted); margin-top:-10px; }
.hero-volume { margin-top:-22px; }
.hero-volume a { color:var(--ink); font-weight:600; text-underline-offset:4px; text-decoration-color:var(--blue); text-decoration-thickness:2px; }
.hero-volume a:hover { color:var(--blue); }
.hero-new { display:flex; align-items:baseline; gap:12px; max-width:36em; margin-top:-6px; font-size:15px; color:var(--muted); }
.new-mark { flex:none; padding:4px 7px 2px; border:2px solid var(--blue); border-radius:5px; color:var(--blue); font:800 15px/1 var(--display); letter-spacing:.08em; text-transform:uppercase; rotate:-4deg; }
.hero-new a { color:var(--ink); font-weight:600; text-underline-offset:4px; text-decoration-color:var(--blue); text-decoration-thickness:2px; }
.hero-new a:hover { color:var(--blue); }

.stack { width:min(100%,440px); justify-self:end; }
.stack-sheets { position:relative; }
.sheet { border-radius:3px; box-shadow:var(--sheet-shadow); color:var(--sheet-ink); }
.sheet-rose,.sheet-canary { position:absolute; inset:0; }
.sheet-rose { background:var(--rose); transform:translate(18px,14px) rotate(5.5deg); }
.sheet-canary { background:var(--canary); transform:translate(-10px,8px) rotate(-3.5deg); }
.sheet-top { position:relative; background:var(--sheet); transform:rotate(-.8deg); }
.stack-tip { margin-top:34px; font-size:14px; color:var(--muted); text-align:center; }

.invoice { padding:26px 26px 22px; font:400 12.5px/1.5 var(--mono); display:flex; flex-direction:column; gap:16px; }
.inv-head { display:flex; justify-content:space-between; align-items:baseline; padding-bottom:12px; border-bottom:2px solid var(--sheet-ink); }
.inv-title { font:800 34px/1 var(--display); }
.inv-no { color:var(--sheet-muted); }
.inv-row { display:flex; justify-content:space-between; align-items:baseline; gap:16px; }
.inv-amount { align-items:baseline; cursor:text; }
.inv-field { display:flex; align-items:baseline; gap:8px; }
.inv-field input { width:5.2ch; min-width:0; padding:0 0 2px; border:0; border-bottom:2px dashed var(--sheet-line); border-radius:0; background:none; color:inherit; caret-color:var(--stamp); font:800 60px/1 var(--display); text-align:right; outline:0; transition:border-color .15s; }
.inv-field input:hover,.inv-field input:focus { border-bottom-color:var(--stamp); }
.inv-unit { font-weight:600; }
.inv-nets legend { float:left; width:100%; margin-bottom:8px; }
.inv-chips { clear:both; display:flex; flex-wrap:wrap; gap:6px; }
.chip { display:inline-flex; align-items:center; gap:6px; padding:5px 10px 5px 6px; border-radius:99px; box-shadow:inset 0 0 0 1px var(--sheet-line); font:500 11.5px/1 var(--mono); color:var(--sheet-ink); transition:background .15s,color .15s; }
.chip img { width:18px; height:18px; border-radius:50%; }
.chip:hover { background:rgba(22,22,22,.07); }
.chip[aria-pressed="true"] { background:var(--sheet-ink); color:var(--sheet); box-shadow:none; }
.inv-sum { display:flex; flex-direction:column; gap:6px; padding-top:14px; border-top:1px dashed var(--sheet-line); }
.inv-total { font-weight:600; font-size:13.5px; }
.inv-total b { font:800 30px/1 var(--display); letter-spacing:.01em; }
.num { font-variant-numeric:tabular-nums; white-space:nowrap; }
.inv-hint { min-height:4.5em; max-width:58%; font-size:11.5px; color:var(--sheet-muted); }
.inv-foot { display:flex; justify-content:space-between; align-items:flex-end; gap:16px; padding-top:14px; border-top:2px solid var(--sheet-ink); }
.inv-link { display:flex; flex-direction:column; gap:4px; min-width:0; }
.inv-status { color:var(--sheet-muted); font-size:11.5px; }
.inv-url { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.inv-qr { width:64px; height:64px; flex:none; fill:var(--sheet-ink); }

.stamp { position:absolute; right:30px; bottom:104px; padding:6px 16px 4px; border:3px solid var(--stamp); border-radius:8px; outline:1.5px solid var(--stamp); outline-offset:3px; color:var(--stamp); font:800 38px/1 var(--display); letter-spacing:.08em; mix-blend-mode:multiply; pointer-events:none; opacity:0; transform:rotate(-13deg) scale(1.9); }
.stamp.is-on { animation:stamp-hit .42s cubic-bezier(.2,1.5,.4,1) forwards; }
@keyframes stamp-hit { 0% { opacity:0; transform:rotate(-20deg) scale(1.9); } 55% { opacity:.9; transform:rotate(-12deg) scale(.94); } 100% { opacity:.84; transform:rotate(-13deg) scale(1); } }
.stack.is-hit .sheet-top { animation:sheet-thud .3s ease-out; }
@keyframes sheet-thud { 30% { transform:rotate(-.8deg) translateY(3px) scale(.995); } 100% { transform:rotate(-.8deg); } }

/* Page-load sequence: copy settles, sheets are dealt, stamp lands (see app.js). */
@media (prefers-reduced-motion:no-preference) {
  .js .hero-copy > * { animation:rise .8s cubic-bezier(.2,.8,.2,1) both; }
  .js .hero-copy > :nth-child(2) { animation-delay:.08s; }
  .js .hero-copy > :nth-child(3) { animation-delay:.16s; }
  .js .hero-copy > :nth-child(4),.js .hero-copy > :nth-child(5) { animation-delay:.22s; }
  .js .hero-copy > :nth-child(6) { animation-delay:.3s; }
  .js .sheet-rose { animation:deal-rose .9s cubic-bezier(.2,.8,.2,1) .15s both; }
  .js .sheet-canary { animation:deal-canary .9s cubic-bezier(.2,.8,.2,1) .28s both; }
  .js .stack:not(.is-dealt) .sheet-top { animation:deal-top .9s cubic-bezier(.2,.8,.2,1) .42s both; }
  .js .stack-tip { animation:rise .8s ease 1.5s both; }
}
@keyframes rise { from { opacity:0; transform:translateY(18px); } }
@keyframes deal-rose { from { opacity:0; transform:translate(120px,90px) rotate(24deg); } }
@keyframes deal-canary { from { opacity:0; transform:translate(90px,110px) rotate(-22deg); } }
@keyframes deal-top { from { opacity:0; transform:translate(60px,130px) rotate(12deg); } }

/* Networks strip */
.nets { border-block:1px solid var(--line); overflow:hidden; padding-block:22px; }
.nets-track { display:flex; width:max-content; gap:64px; padding-right:64px; animation:marquee 50s linear infinite; }
.nets:hover .nets-track,.nets:focus-within .nets-track { animation-play-state:paused; }
@keyframes marquee { to { transform:translateX(-50%); } }
.net { display:flex; align-items:center; gap:14px; white-space:nowrap; }
.net img { width:34px; height:34px; border-radius:50%; }
.net b { font:700 36px/1 var(--display); letter-spacing:.005em; }
.net span { font-size:14px; color:var(--muted); padding-top:6px; }

/* How it works: vertical scroll drives a horizontal track */
.how { height:300vh; }
.how-pin { position:sticky; top:0; height:100svh; display:flex; flex-direction:column; overflow:hidden; padding-top:calc(var(--top) + clamp(20px,5vh,56px)); }
.how-head { display:flex; justify-content:space-between; align-items:flex-end; gap:40px; padding-inline:var(--gut); }
.how-head .display-2 { max-width:18ch; }
.how-dots { display:flex; gap:28px; font-size:15px; color:var(--muted); padding-bottom:10px; white-space:nowrap; }
.how-dots li { display:flex; align-items:center; gap:10px; transition:color .25s; }
.how-dots li::before { content:""; width:28px; height:3px; border-radius:2px; background:var(--line-strong); transition:background .25s,width .35s cubic-bezier(.2,.8,.2,1); }
.how-dots li.is-on { color:var(--ink); }
.how-dots li.is-on::before { background:var(--blue); width:56px; }
.how-view { flex:1; min-height:0; }
.how-track { display:flex; width:300%; height:100%; transform:translate3d(calc(var(--p,0) * -66.6667%),0,0); will-change:transform; }
.step { width:33.3334%; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center; gap:clamp(32px,6vw,96px); padding-inline:var(--gut); }
.step-copy { display:flex; flex-direction:column; gap:18px; align-items:flex-start; }
.step-n { display:grid; place-items:center; width:84px; height:104px; border-radius:3px; background:var(--sheet); color:var(--sheet-ink); box-shadow:var(--sheet-shadow); font:800 76px/1 var(--display); transform:rotate(-4deg); }
.step:nth-child(2) .step-n { background:var(--canary); transform:rotate(3deg); }
.step:nth-child(3) .step-n { background:var(--rose); transform:rotate(-2deg); }
.step h3 { font:800 clamp(40px,4.6vw,68px)/.95 var(--display); }
.step p { max-width:30em; color:var(--muted); font-size:clamp(17px,1.35vw,20px); }

.mock { justify-self:center; width:min(100%,460px); padding:28px; border-radius:14px; background:var(--panel); border:1px solid var(--line); font-size:15px; display:flex; flex-direction:column; gap:14px; }
.mock-btn { display:flex; align-items:center; justify-content:center; min-height:44px; border-radius:9px; background:var(--raised); border:1px solid var(--line); }
.mock-btn-main { background:var(--ink); border-color:var(--ink); color:var(--page); font-weight:500; }
.mock-auth { align-items:center; text-align:center; padding:40px 36px; }
.mock-auth strong { font-weight:500; font-size:19px; margin:6px 0 10px; }
.mock-auth .mock-btn { align-self:stretch; }
.mock-auth small { margin-top:4px; font-size:13px; color:var(--muted); }
.mock-field { display:flex; justify-content:space-between; align-items:center; min-height:48px; padding:0 14px; border-radius:9px; background:var(--page); border:1px solid var(--line); }
.mock-field span { color:var(--muted); }
.mock-field b { display:flex; align-items:center; gap:8px; font-weight:500; }
.mock-field i { font-style:normal; color:var(--muted); }
.mock-result { display:flex; justify-content:space-between; gap:12px; padding:12px 14px; border-radius:9px; border:1px dashed var(--line-strong); font:400 12.5px/1.6 var(--mono); }
.mock-result span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mock-result em { font-style:normal; color:var(--blue); font-family:var(--body); font-size:13px; font-weight:600; }
.mock-table { gap:0; padding:10px 0 0; overflow:hidden; }
.mock-tr { display:grid; grid-template-columns:1.3fr .8fr .8fr; align-items:center; gap:12px; padding:13px 24px; border-top:1px solid var(--line); font-variant-numeric:tabular-nums; }
.mock-tr > :last-child { text-align:right; }
.mock-th { border-top:0; color:var(--muted); font-size:13px; padding-block:8px; }
.pill { justify-self:start; padding:2px 10px; border-radius:99px; border:1px solid var(--line-strong); font-size:13px; }
.mock-toast { display:flex; justify-content:space-between; gap:12px; margin:14px; padding:12px 14px; border-radius:9px; background:var(--ink); color:var(--page); font-size:14px; }
.mock-toast .mono { font-size:12px; opacity:.75; }

@media (prefers-reduced-motion:no-preference) and (min-width:901px) {
  .js .mock-result,.js .mock-table .mock-tr:not(.mock-th),.js .mock-toast { opacity:0; transform:translateY(10px); transition:opacity .45s ease,transform .45s cubic-bezier(.2,.8,.2,1); }
  .js .step.is-active .mock-result { opacity:1; transform:none; transition-delay:.5s; }
  .js .step.is-active .mock-result + .mock-result { transition-delay:.65s; }
  .js .step.is-active .mock-table .mock-tr { opacity:1; transform:none; }
  .js .step.is-active .mock-table .mock-tr:nth-child(2) { transition-delay:.15s; }
  .js .step.is-active .mock-table .mock-tr:nth-child(3) { transition-delay:.3s; }
  .js .step.is-active .mock-table .mock-tr:nth-child(4) { transition-delay:.45s; }
  .js .step.is-active .mock-toast { opacity:1; transform:none; transition-delay:.85s; }
}

/* Wallet: three key tags on a rail; picking two signs the slip below */
@property --drop { syntax:"<length>"; inherits:true; initial-value:0px; }
.wal,.crd { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(40px,6vw,96px); align-items:center; padding:clamp(72px,12vh,140px) var(--gut); border-top:1px solid var(--line); }
.wal-copy,.crd-copy { display:flex; flex-direction:column; gap:24px; align-items:flex-start; }
.wal-lede { max-width:32em; color:var(--muted); font-size:clamp(17px,1.35vw,20px); }
.wal-facts { width:100%; max-width:36em; margin-top:8px; }
.wal-facts li { display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:6px 28px; padding:18px 0; border-top:1px solid var(--line); }
.wal-facts li:last-child { border-bottom:1px solid var(--line); }
.wal-facts h3 { font:800 clamp(24px,2.1vw,30px)/1 var(--display); }
.wal-facts p { color:var(--muted); font-size:15.5px; }

.keys { width:min(100%,500px); justify-self:end; }
.keys-rack { position:relative; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; padding-top:40px; }
.keys-rack::before { content:""; position:absolute; top:0; left:-8px; right:-8px; height:6px; border-radius:3px; background:var(--ink); }
.tag { --r:0deg; position:relative; display:block; text-align:left; translate:0 var(--drop); rotate:var(--r); transform-origin:50% calc(-40px - var(--drop)); filter:drop-shadow(0 14px 14px rgba(0,0,0,.2)); transition:--drop .5s cubic-bezier(.2,1.5,.4,1),rotate .7s cubic-bezier(.2,1.8,.35,1); }
.tag::before { content:""; position:absolute; z-index:1; left:50%; top:calc(-40px - var(--drop)); width:2px; height:calc(60px + var(--drop)); margin-left:-1px; border-radius:1px; background:var(--muted); }
.tag::after { content:""; position:absolute; left:50%; top:calc(-44px - var(--drop)); width:12px; height:12px; margin-left:-6px; border-radius:50%; border:2px solid var(--ink); background:var(--page); }
.tag-you { --r:-3deg; }
.tag-del { --r:2.5deg; }
.tag-inv { --r:-2deg; }
.tag:hover { --drop:4px; }
.tag[aria-pressed="true"] { --r:0deg; --drop:18px; }
.tag[aria-pressed="true"]:hover { --drop:15px; }
.tag:hover::before { background:var(--ink); }
.tag:not([aria-pressed="true"]):hover .tag-paper { box-shadow:inset 0 -5px 0 color-mix(in srgb,var(--stamp) 35%,transparent); }
.tag-paper { display:flex; flex-direction:column; gap:8px; min-height:176px; padding:46px 14px 18px; border-radius:4px; background:radial-gradient(circle at 50% 20px,rgba(22,22,22,.13) 0 10px,transparent 10.5px),var(--sheet); color:var(--sheet-ink); clip-path:polygon(18px 0,calc(100% - 18px) 0,100% 18px,100% 100%,0 100%,0 18px); -webkit-mask:radial-gradient(circle 6px at 50% 20px,#0000 97%,#000); mask:radial-gradient(circle 6px at 50% 20px,#0000 97%,#000); transition:box-shadow .3s; }
.tag-del .tag-paper { background-color:var(--canary); }
.tag-inv .tag-paper { background-color:var(--rose); }
.tag[aria-pressed="true"] .tag-paper { box-shadow:inset 0 -5px 0 var(--stamp); }
.tag-paper b { font:800 clamp(26px,2.3vw,32px)/.95 var(--display); }
.tag-paper span { font:400 11px/1.45 var(--mono); color:var(--sheet-muted); }

.slip { position:relative; transition:height .42s cubic-bezier(.2,.8,.2,1); margin-top:44px; padding:22px 24px 20px; border-radius:3px; background:var(--sheet); color:var(--sheet-ink); box-shadow:var(--sheet-shadow); font:400 12.5px/1.5 var(--mono); rotate:.6deg; }
.slip-head { display:flex; justify-content:space-between; align-items:baseline; gap:16px; padding-bottom:12px; border-bottom:2px solid var(--sheet-ink); }
.slip-title { font:800 clamp(24px,2.2vw,30px)/1 var(--display); }
.slip-rule { flex:none; color:var(--sheet-muted); }
.slip-sigs { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; padding:10px 0 14px; }
.sig { display:flex; flex-direction:column; gap:5px; }
.sig svg { width:100%; height:50px; overflow:visible; border-bottom:1px solid var(--sheet-ink); }
.sig path { fill:none; stroke:var(--pen); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:1; stroke-dashoffset:1; transition:stroke-dashoffset .8s cubic-bezier(.45,0,.25,1); }
.sig.is-signed path { stroke-dashoffset:0; }
.sig-name { font-size:11.5px; color:var(--sheet-muted); }
.slip-text { min-height:6em; max-width:62%; padding-top:12px; border-top:1px dashed var(--sheet-line); font-size:12px; color:var(--sheet-muted); }
.slip.is-sizing { overflow:hidden; }
.slip-title.is-new,.slip-text.is-new,.sig-name.is-new { animation:pane-in .4s cubic-bezier(.2,.8,.2,1) both; }
.slip .stamp { right:20px; bottom:26px; padding:5px 12px 3px; font-size:26px; border-width:2.5px; outline-width:1px; }

@keyframes tag-swing { 30% { rotate:calc(var(--r) + 1.5deg); } 65% { rotate:calc(var(--r) - .8deg); } }

/* Card: the KYC form nobody fills in, and the card that comes instead */
.crd-art { position:relative; width:min(100%,540px); padding-bottom:130px; }
.kyc { position:relative; width:min(100%,430px); padding:26px 26px 30px; border-radius:3px; background:var(--canary); color:var(--sheet-ink); box-shadow:var(--sheet-shadow); font:400 12.5px/1.5 var(--mono); rotate:-2deg; }
.kyc-head { display:flex; justify-content:space-between; align-items:baseline; gap:16px; padding-bottom:12px; margin-bottom:4px; border-bottom:2px solid var(--sheet-ink); }
.kyc-head b { font:800 clamp(24px,2.2vw,30px)/1 var(--display); }
.kyc-head span { color:var(--sheet-muted); }
.kyc-fields li { position:relative; display:flex; align-items:flex-end; gap:12px; padding:13px 0 5px; }
.kyc-fields span { flex:none; }
.kyc-fields i { flex:1; min-width:24px; min-height:1.3em; border-bottom:1px solid var(--sheet-line); font-style:normal; text-align:right; }
.kyc-fields svg { position:absolute; left:-8px; top:calc(50% - 2px); width:calc(100% + 16px); height:12px; overflow:visible; }
.kyc-fields path { fill:none; stroke:var(--pen); stroke-width:2.4; stroke-linecap:round; stroke-dasharray:1; stroke-dashoffset:0; }
.kyc-ok i { text-align:left; padding-left:6px; }
.kyc-ok b { font-weight:600; }
.kyc .stamp { top:118px; right:18px; bottom:auto; font-size:34px; }
html:not(.js) .kyc .stamp { opacity:.84; transform:rotate(-13deg); }

.vcard { position:absolute; right:0; bottom:0; width:min(74%,370px); aspect-ratio:1.586; perspective:900px; rotate:-7deg; }
.vcard-face { position:relative; height:100%; display:flex; flex-direction:column; justify-content:space-between; padding:clamp(16px,2.6vw,24px); border-radius:16px; background:var(--stamp); color:#fff; box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),0 34px 50px -24px rgba(0,0,0,.7); overflow:hidden; transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)); transition:transform .5s cubic-bezier(.2,.8,.2,1); }
.vcard-top { display:flex; align-items:center; gap:8px; font:800 22px/1 var(--display); letter-spacing:.01em; }
.vcard-top em { margin-left:auto; font:400 10.5px/1 var(--mono); font-style:normal; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.65); }
.vcard-num { font:500 clamp(14px,1.55vw,18px)/1 var(--mono); letter-spacing:.06em; white-space:nowrap; }
.vcard-bot { display:flex; justify-content:space-between; align-items:flex-end; font:400 12px/1 var(--mono); color:rgba(255,255,255,.65); }
.vcard-bot b { font:italic 800 clamp(28px,3vw,36px)/.75 var(--display); letter-spacing:.02em; color:#fff; }
.vcard-glare { position:absolute; inset:0; background:radial-gradient(circle at var(--gx,30%) var(--gy,20%),rgba(255,255,255,.22),transparent 58%); opacity:0; transition:opacity .3s; pointer-events:none; }
.vcard.is-tilting .vcard-face { transition:transform .12s linear; }
.vcard.is-tilting .vcard-glare { opacity:1; }

.printer-card { width:min(100%,400px); }
.receipt.chit { padding:28px 20px 36px; }
.chit .rc-lines { gap:8px; }
.chit-total { margin-top:14px; padding-top:14px; border-top:2px solid var(--sheet-ink); font-weight:600; }
.chit-total dd { font:800 26px/1 var(--display); }
.chit-foot { margin-top:14px; padding-top:12px; border-top:1px dashed var(--sheet-line); color:var(--sheet-muted); text-align:center; }
.crd-small { max-width:40em; font-size:14.5px; color:var(--muted); }

@media (prefers-reduced-motion:no-preference) {
  .tag:hover { animation:tag-swing .9s cubic-bezier(.3,.7,.4,1); }
  .js .kyc-fields path { stroke-dashoffset:1; transition:stroke-dashoffset .3s cubic-bezier(.5,0,.3,1) calc(var(--i) * .16s + .25s); }
  .js .crd-art.is-live .kyc-fields path { stroke-dashoffset:0; }
  .js .vcard { opacity:0; translate:70px 40px; rotate:6deg; transition:opacity .5s ease 1.6s,translate .9s cubic-bezier(.2,.8,.2,1) 1.6s,rotate .9s cubic-bezier(.2,.8,.2,1) 1.6s; }
  .js .crd-art.is-live .vcard { opacity:1; translate:0 0; rotate:-7deg; }
}

/* Pricing */
.price { padding:clamp(72px,12vh,140px) var(--gut); }
.price-grid { display:grid; grid-template-columns:minmax(300px,400px) minmax(0,1fr); gap:clamp(40px,7vw,110px); margin-top:clamp(40px,6vh,72px); align-items:start; }
.printer { position:relative; }
.printer-slot { position:relative; z-index:2; height:26px; border-radius:13px; background:var(--ink); box-shadow:inset 0 -9px 0 -5px color-mix(in srgb,var(--page) 35%,transparent); }
.printer-out { overflow:hidden; margin:-12px 16px 0; padding-bottom:30px; }
.receipt { --z:7px; padding:34px 22px 40px; background:var(--sheet); color:var(--sheet-ink); font:400 12.5px/1.5 var(--mono); transform:translateY(calc((1 - var(--print,1)) * -100%)); filter:drop-shadow(0 16px 18px rgba(0,0,0,.22)); -webkit-mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/calc(2*var(--z)) 100%; mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/calc(2*var(--z)) 100%; }
.rc-head { display:flex; flex-direction:column; align-items:center; gap:4px; padding-bottom:18px; margin-bottom:16px; border-bottom:1px dashed var(--sheet-line); color:var(--sheet-muted); }
.rc-head b { font:800 40px/1 var(--display); letter-spacing:.14em; color:var(--sheet-ink); }
.rc-lines { display:flex; flex-direction:column; gap:9px; }
.rc-lines div { display:flex; align-items:baseline; align-items:last baseline; }
.rc-lines dt { flex:1; display:flex; align-items:baseline; align-items:last baseline; min-width:0; }
.rc-lines dt::after { content:""; flex:1; min-width:12px; margin:0 8px; border-bottom:1px dotted var(--sheet-line); transform:translateY(-3px); }
.rc-lines dd { font-variant-numeric:tabular-nums; }
.rc-total { margin-top:16px; padding-top:16px; border-top:2px solid var(--sheet-ink); gap:12px; font-weight:600; }
.rc-total div { align-items:center; gap:18px; }
.rc-total dt { display:block; text-wrap:balance; }
.rc-total dt::after { display:none; }
.rc-total dd { font:800 46px/.9 var(--display); }
.rc-foot { margin-top:22px; padding-top:16px; border-top:1px dashed var(--sheet-line); text-align:center; color:var(--sheet-muted); }

.price-copy { display:flex; flex-direction:column; gap:36px; padding-top:20px; }
.price-point { display:flex; flex-direction:column; gap:10px; }
.price-point h3 { font:800 clamp(30px,3.2vw,46px)/1 var(--display); }
.price-point p { max-width:36em; color:var(--muted); }
.price-point a,.faq-list a { color:var(--ink); font-weight:600; text-underline-offset:4px; text-decoration-color:var(--blue); text-decoration-thickness:2px; white-space:nowrap; }
.price-point a:hover,.faq-list a:hover { color:var(--blue); }
.price-small { max-width:44em; padding-top:24px; border-top:1px solid var(--line); font-size:14.5px; color:var(--muted); }

/* Included */
.inc { padding:clamp(48px,8vh,96px) var(--gut) clamp(72px,12vh,140px); }
.inc-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:18px; margin-top:clamp(40px,6vh,72px); }
.note { grid-column:span 2; display:flex; flex-direction:column; gap:10px; padding:26px; border-radius:3px; transition:transform .3s cubic-bezier(.2,.8,.2,1); }
.note-wide { grid-column:span 3; }
.note h3 { font:800 clamp(28px,2.6vw,38px)/1 var(--display); }
.note p { font-size:16px; max-width:32em; }
.note-sheet,.note-canary,.note-rose { color:var(--sheet-ink); box-shadow:var(--sheet-shadow); }
.note-sheet { background:var(--sheet); transform:rotate(-.5deg); }
.note-canary { background:var(--canary); transform:rotate(.6deg); }
.note-rose { background:var(--rose); transform:rotate(-.7deg); }
.note-sheet:hover,.note-canary:hover,.note-rose:hover { transform:rotate(0) translateY(-4px); }
.note-plain { background:var(--panel); border:1px solid var(--line); }
.note-plain p { color:var(--muted); }
.note-pill { align-self:flex-start; margin-top:auto; padding:8px 12px; border-radius:99px; box-shadow:inset 0 0 0 1px var(--sheet-line); font-size:12px; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.note-log { margin-top:auto; padding-top:8px; font-size:11.5px; display:flex; flex-direction:column; gap:4px; }
.note-log li { display:flex; justify-content:space-between; padding-top:4px; border-top:1px dashed var(--sheet-line); }
.note-demo { margin-top:auto; padding-top:10px; display:flex; flex-direction:column; gap:8px; font-size:14px; }
.demo-row { display:flex; align-items:center; gap:12px; min-height:48px; padding:8px 12px; border-radius:9px; background:var(--page); border:1px solid var(--line); }
.demo-logo { flex:none; display:grid; place-items:center; width:32px; height:32px; border-radius:8px; background:var(--canary); color:var(--sheet-ink); font:800 20px/1 var(--display); }
.demo-shop { display:flex; flex-direction:column; min-width:0; }
.demo-shop b { font-weight:600; }
.demo-shop span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font:400 11px/1.4 var(--mono); color:var(--muted); }
.demo-end { margin-left:auto; flex:none; }
.demo-switch { position:relative; width:40px; height:24px; border-radius:12px; background:var(--blue); }
.demo-switch::after { content:""; position:absolute; top:3px; right:3px; width:18px; height:18px; border-radius:50%; background:#fff; }

/* Developers */
.dev { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(36px,6vw,96px); align-items:center; padding:clamp(72px,12vh,140px) var(--gut); border-top:1px solid var(--line); }
.dev-copy { display:flex; flex-direction:column; gap:24px; align-items:flex-start; }
.dev-copy p { color:var(--muted); max-width:32em; }
.code { border-radius:14px; background:#0a0a0a; border:1px solid #242424; color:#cfcfcf; overflow:hidden; min-width:0; }
.code-tabs { display:flex; align-items:center; gap:4px; padding:8px; border-bottom:1px solid #242424; font-size:14px; }
.code-tabs button { padding:8px 12px; border-radius:8px; color:#999; transition:color .15s,background .15s; }
.code-tabs button:hover { color:#e8e8e8; }
.code-tabs button[aria-selected="true"] { background:#1c1c1c; color:#e8e8e8; }
.code-tabs .code-copy { margin-left:auto; box-shadow:inset 0 0 0 1px #2e2e2e; }
.code-tabs :focus-visible { outline-color:#8c9bff; }
.code-body { overflow:hidden; transition:height .38s cubic-bezier(.2,.8,.2,1); }
.code-pane { margin:0; padding:22px 22px 26px; overflow-x:auto; font:400 12.5px/1.75 var(--mono); tab-size:2; animation:pane-in .4s cubic-bezier(.2,.8,.2,1) both; }
@keyframes pane-in { from { opacity:0; transform:translateY(8px); } }
.code-pane[hidden] { display:none; }
.code-pane:focus-visible { outline-offset:-3px; outline-color:#8c9bff; }
.c-k { color:#f3d750; }
.c-s { color:#f0f0f0; }
.c-v { color:#f4b3c2; }
.c-c { color:#777; }

/* FAQ */
.faq { display:grid; grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr); gap:clamp(32px,6vw,96px); padding:clamp(72px,12vh,140px) var(--gut); border-top:1px solid var(--line); align-items:start; }
.faq .display-2 { position:sticky; top:calc(var(--top) + 32px); }
.faq-list details { border-top:1px solid var(--line); }
.faq-list details:last-child { border-bottom:1px solid var(--line); }
.faq-list summary { display:flex; justify-content:space-between; align-items:center; gap:24px; padding:22px 0; cursor:pointer; list-style:none; font:700 clamp(26px,2.6vw,38px)/1.05 var(--display); }
.faq-list summary::-webkit-details-marker { display:none; }
.faq-list summary::after { content:""; flex:none; width:22px; height:22px; background:linear-gradient(currentColor,currentColor) 50%/100% 3px no-repeat,linear-gradient(currentColor,currentColor) 50%/3px 100% no-repeat; transition:transform .3s cubic-bezier(.2,.8,.2,1); }
.faq-list details[open] summary::after { transform:rotate(45deg); }
.faq-list summary:hover { color:var(--blue); }
.faq-list details p { padding:0 48px 26px 0; max-width:40em; color:var(--muted); }
@supports (interpolate-size:allow-keywords) {
  .faq-list details { interpolate-size:allow-keywords; }
  .faq-list details::details-content { block-size:0; overflow:clip; transition:block-size .35s cubic-bezier(.2,.8,.2,1),content-visibility .35s allow-discrete; }
  .faq-list details[open]::details-content { block-size:auto; }
}

/* Final: one full-width canary sheet */
.end { display:flex; flex-direction:column; gap:32px; align-items:flex-start; padding:clamp(72px,13vh,150px) var(--gut); background:var(--canary); color:var(--sheet-ink); }
.end .display { font-size:clamp(64px,11.4vw,188px); }
:lang(ru) .end .display { font-size:clamp(52px,9.3vw,152px); }
.end .btn { background:var(--sheet-ink); color:var(--canary); }
.end .btn:hover { background:#000; }
.end .hero-note { color:var(--sheet-ink); opacity:.75; margin-top:-14px; }
.end :focus-visible { outline-color:var(--sheet-ink); }

.foot { padding:28px var(--gut); font-size:14.5px; color:var(--muted); }
.foot-in,.foot nav,.foot-left { display:flex; flex-wrap:wrap; gap:12px 28px; align-items:center; }
.foot-in { justify-content:space-between; }
.foot a { text-decoration:none; }
.foot-maker { display:inline-flex; align-items:center; gap:8px; color:var(--ink); }
.foot-maker svg { flex:none; }
.foot a:hover { color:var(--ink); }

/* Narrow screens: everything stacks, the pinned track becomes a plain list */
@media (max-width:1080px) {
  .top-nav { display:none; }
}
@media (max-width:900px) {
  .hero { grid-template-columns:minmax(0,1fr); min-height:0; }
  .stack { justify-self:center; margin-top:12px; }
  .how { height:auto; padding-block:72px 24px; }
  .how-pin { position:static; height:auto; overflow:visible; padding-top:0; }
  .how-dots { display:none; }
  .how-track { width:100%; height:auto; flex-direction:column; gap:72px; margin-top:48px; transform:none; }
  .step { width:100%; grid-template-columns:minmax(0,1fr); gap:28px; }
  .mock { justify-self:start; }
  .price-grid,.dev,.faq,.wal,.crd { grid-template-columns:minmax(0,1fr); }
  .keys { justify-self:start; }
  .crd-copy { order:-1; }
  .printer { max-width:400px; }
  .faq .display-2 { position:static; }
  .note,.note-wide { grid-column:span 6; }
}
@media (max-width:560px) {
  body { font-size:16px; }
  .top-in { gap:12px; }
  .top-tools { gap:8px; }
  .top-signin { display:none; }
  .brand span { display:none; }
  .invoice { padding:20px 18px 18px; }
  .inv-field input { font-size:48px; }
  .stamp { right:18px; bottom:100px; font-size:30px; }
  .sheet-rose { transform:translate(8px,12px) rotate(3.5deg); }
  .sheet-canary { transform:translate(-6px,8px) rotate(-2.5deg); }
  .faq-list details p { padding-right:0; }
  .wal-facts li { grid-template-columns:minmax(0,1fr); }
  .keys-rack { gap:10px; }
  .tag-paper { min-height:150px; padding:42px 10px 14px; }
  .tag-paper b { font-size:24px; }
  .tag-paper span { font-size:10px; }
  .slip { padding:18px 16px 16px; }
  .slip-sigs { gap:14px; }
  .slip-text { max-width:none; min-height:0; padding-bottom:58px; }
  .kyc { padding:20px 18px 24px; }
  .kyc-fields span { font-size:11.5px; }
  .crd-art { padding-bottom:110px; }
  .vcard { width:84%; }
}

@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  .nets { overflow-x:auto; }
  .nets-track { animation:none; }
  .how { height:auto; padding-block:72px 24px; }
  .how-pin { position:static; height:auto; overflow:visible; padding-top:0; }
  .how-dots { display:none; }
  .how-track { width:100%; height:auto; flex-direction:column; gap:72px; margin-top:48px; transform:none; }
  .step { width:100%; }
  .stamp.is-on { animation:none; opacity:.84; transform:rotate(-13deg); }
  .btn,.note,.theme,.code-body,.tag,.tag-paper,.sig path,.vcard-face { transition:none; }
  .code-pane,.slip-title,.slip-text,.sig-name { animation:none; }
}