/* Design rules from Hallmark (github.com/Nutlope/hallmark) applied by hand: Floor gates checked manually, sloplint not run (no Node on this machine). Colour, type and spacing go through the tokens below. Waived on the owner's request: 47c, the drifting currency-glyph field behind the hero is decorative by design (crypto theme); it is hidden under prefers-reduced-motion. */
:root{
  --paper:#0a0d12; --paper-2:#0f141b; --paper-3:#161d27;
  --line:#232b37; --line-2:#323c4b;
  --ink:#edf0f5; --ink-2:#aab3c2; --ink-3:#8a95a6;
  --accent:#3ee6a8; --accent-ink:#04140d; --accent-2:#2fbf8a; --accent-wash:#0e2820; --accent-line:#1f6a52;
  --loss:#ff6b61; --warn:#ffb454;

  --font-display:'Unbounded','Manrope',sans-serif;
  --font-body:'Manrope',sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  --text-body:1rem; --text-small:.875rem; --text-title:1.25rem;
  --text-section:clamp(2.25rem,4vw,3.25rem);
  --text-hero:clamp(2rem,4.4vw,3.5rem);

  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px;
  --space-6:32px; --space-7:48px; --space-8:64px; --space-9:96px; --space-10:128px;

  --radius-card:20px; --radius-ctl:12px;
  --measure:1180px; --gutter:16px;
  --ease:cubic-bezier(.2,.7,.2,1);
  --z-nav:50;
}
*{box-sizing:border-box;margin:0;padding:0}
html{overflow-x:clip;scroll-behavior:smooth;scroll-padding-top:var(--space-9);-webkit-text-size-adjust:100%}
body{overflow-x:clip;background:var(--paper);color:var(--ink);font:400 var(--text-body)/1.6 var(--font-body);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
svg{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:var(--space-1)}
.wrap{width:min(var(--measure),100% - 2 * var(--gutter));margin-inline:auto}
.narrow{width:min(820px,100% - 2 * var(--gutter))}
.gain{color:var(--accent)} .loss{color:var(--loss)}
.small,.note{font-size:var(--text-small);color:var(--ink-3)}
.note{margin-top:var(--space-3)}
.center{text-align:center}

h1,h2,h3{font-family:var(--font-display);font-weight:600;color:var(--ink);overflow-wrap:break-word;min-width:0}
h1{font-size:var(--text-hero);line-height:1.1;letter-spacing:-.035em}
h2{font-size:var(--text-section);line-height:1.1;letter-spacing:-.035em;margin-bottom:var(--space-7)}
h3{font-size:var(--text-title);letter-spacing:-.02em}
.lede{font-size:1.25rem;color:var(--ink-2);max-width:32ch;margin-top:var(--space-5)}
.lede-s{font-size:1.125rem;color:var(--ink-2);max-width:60ch;margin-bottom:var(--space-6)}

/* ---------- шапка ---------- */
.nav{position:fixed;inset:0 0 auto 0;z-index:var(--z-nav);display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);
  padding:var(--space-3) max(var(--gutter),calc((100% - var(--measure)) / 2));
  background:color-mix(in srgb,var(--paper) 84%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.logo{display:inline-flex;align-items:center;gap:var(--space-3);font:600 1.125rem var(--font-display);letter-spacing:-.03em}
.mark{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:var(--radius-ctl);background:var(--accent);color:var(--accent-ink);font:700 1.125rem var(--font-mono);overflow:hidden}
.mark.sm{width:28px;height:28px;font-size:1rem}
.mark b{grid-area:1 / 1;transition:transform .35s var(--ease),opacity .35s}
.mark b:last-child{transform:translateY(100%);opacity:0}
.logo:hover .mark b:first-child{transform:translateY(-100%);opacity:0}
.logo:hover .mark b:last-child{transform:none;opacity:1}

/* ---------- кнопки ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-ctl);padding:var(--space-3) var(--space-5);
  font-weight:700;font-size:var(--text-body);border:1px solid transparent;cursor:pointer;text-align:center;
  transition:transform .2s var(--ease),background-color .2s,border-color .2s}
.btn.primary{background:var(--accent);color:var(--accent-ink)}
.btn.primary:hover{background:var(--accent-2)}
.btn.ghost{background:var(--paper-3);border-color:var(--line-2)}
.btn.ghost:hover{border-color:var(--ink-3)}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.5;cursor:default}
.btn.big{padding:var(--space-4) var(--space-6)}
.btn.small{padding:var(--space-2) var(--space-4);font-size:var(--text-small)}
.btn.full{width:100%}

/* ---------- hero ---------- */
.hero{position:relative;isolation:isolate;overflow:clip;padding-top:calc(var(--space-9) + var(--space-2));padding-bottom:var(--space-8)}
.glyphs{position:absolute;inset:0;z-index:-1;width:100%;height:100%;pointer-events:none}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:var(--space-8);align-items:start}
.hero-copy{padding-top:var(--space-5)}
.rot{display:inline-block;transition:opacity .3s,transform .3s var(--ease);white-space:nowrap}
.rot.out{opacity:0;transform:translateY(var(--space-3))}
.actions{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-6)}

.route{margin-top:var(--space-7)}
.route-line{display:flex;align-items:center;gap:var(--space-3)}
.tk{display:grid;place-items:center;width:56px;height:56px;border:1px solid var(--line-2);border-radius:var(--radius-ctl);background:var(--paper-2);font:700 1.5rem var(--font-mono)}
.tk.core{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.tk.dest{color:var(--accent)}
.tk.flip{animation:flip .45s var(--ease)}
.ar{color:var(--ink-3);font:500 1.25rem var(--font-mono)}
.picks{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-4)}
.picks button{display:inline-flex;align-items:center;gap:var(--space-2);background:var(--paper-3);border:1px solid var(--line);border-radius:var(--radius-ctl);padding:var(--space-2) var(--space-3);font-size:var(--text-small);font-weight:600;cursor:pointer;transition:background-color .2s,border-color .2s}
.picks b{font:700 1rem var(--font-mono);color:var(--accent)}
.picks button:hover{border-color:var(--ink-3)}
.picks button:active{transform:translateY(1px)}
.picks button[aria-pressed=true]{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.picks button[aria-pressed=true] b{color:var(--accent-ink)}

.card{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius-card);padding:var(--space-5)}

/* ---------- калькулятор ---------- */
.calc-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--space-2) var(--space-3);margin-bottom:var(--space-4)}
.calc-head h2{font-size:var(--text-title);margin:0;letter-spacing:-.02em;white-space:nowrap}
.live{display:inline-flex;align-items:center;gap:var(--space-2);font-size:var(--text-small);color:var(--ink-3)}
.live i{width:8px;height:8px;border-radius:50%;background:var(--line-2)}
.live.ok i{background:var(--accent)} .live.stale i{background:var(--warn)} .live.stale{color:var(--warn)}
.field{display:block;font-size:var(--text-small);font-weight:600;color:var(--ink-3);margin-bottom:var(--space-2)}
.price{width:100%;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-ctl);padding:var(--space-3) var(--space-4);
  font:700 1.75rem var(--font-mono);letter-spacing:-.03em;outline:0;transition:border-color .2s}
.price:hover{border-color:var(--line-2)} .price:focus{border-color:var(--accent)}
input[type=range]{width:100%;margin-block:var(--space-4) var(--space-3);appearance:none;-webkit-appearance:none;height:6px;border-radius:var(--space-1);
  background:linear-gradient(90deg,var(--accent) var(--fill,15%),var(--paper-3) var(--fill,15%));outline:0}
input[type=range]:focus-visible{outline:2px solid var(--accent);outline-offset:6px}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:var(--accent);border:4px solid var(--paper-2);cursor:grab}
input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--accent);border:4px solid var(--paper-2);cursor:grab}
.chips{display:flex;gap:var(--space-2);flex-wrap:wrap}
.chips button{background:var(--paper-3);border:1px solid var(--line);border-radius:var(--radius-ctl);padding:var(--space-2) var(--space-4);font-size:var(--text-small);font-weight:600;cursor:pointer;transition:background-color .2s,border-color .2s}
.chips button:hover{border-color:var(--ink-3)}
.chips button:active{transform:translateY(1px)}
.chips button.on{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.bars{display:grid;gap:var(--space-4);margin-block:var(--space-5)}
.bar-label{display:flex;justify-content:space-between;gap:var(--space-3);font-size:var(--text-small);color:var(--ink-3);margin-bottom:var(--space-2)}
.bar-label>b{font:700 1rem var(--font-mono);letter-spacing:-.02em}
.bar{height:12px;border-radius:var(--space-2);background:var(--paper-3);overflow:hidden}
.bar i{display:block;height:100%;transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease)}
.b-now{background:var(--loss)} .b-ours{background:var(--accent)}
.result{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--space-4);padding-top:var(--space-5);border-top:1px solid var(--line)}
.result .small{display:block}
.result strong{display:block;font:700 clamp(1.625rem,3vw,2.25rem)/1.15 var(--font-mono);letter-spacing:-.04em;color:var(--accent)}
.stepper div{display:flex;align-items:center;gap:var(--space-2);margin-top:var(--space-1)}
.stepper button{width:40px;height:40px;border-radius:var(--radius-ctl);border:1px solid var(--line);background:var(--paper-3);cursor:pointer;font-size:1.25rem;line-height:1;transition:border-color .2s}
.stepper button:hover{border-color:var(--ink-3)} .stepper button:active{transform:translateY(1px)}
.stepper output{min-width:32px;text-align:center;font:700 1.125rem var(--font-mono)}
.month{margin-block:var(--space-3) var(--space-4);color:var(--ink-3);font-size:var(--text-small)}
.month b{color:var(--ink);font-size:var(--text-body)}
.unavail{margin-top:var(--space-3);padding:var(--space-3) var(--space-4);border-radius:var(--radius-ctl);border:1px solid var(--loss);color:var(--loss);font-size:var(--text-small)}
.calc.off .bars,.calc.off .result,.calc.off .month{opacity:.35}

/* ---------- лента курсов ---------- */
.tape{margin-top:var(--space-8);padding-block:var(--space-4);border-block:1px solid var(--line);overflow:hidden}
.tape-in{display:flex;align-items:baseline;gap:var(--space-5);width:max-content;padding-right:var(--space-5);animation:tape 44s linear infinite}
.tape:hover .tape-in{animation-play-state:paused}
.ti{display:inline-flex;align-items:baseline;gap:var(--space-2);white-space:nowrap}
.ti i{font-style:normal;font-size:var(--text-small);color:var(--ink-3)}
.ti b{font:700 1.25rem var(--font-mono);letter-spacing:-.02em}
.sep{color:var(--ink-3);font:500 1.125rem var(--font-mono)}
.flash{animation:flash .9s ease-out}

/* ---------- секции ---------- */
.sec{padding-block:var(--space-9)}
.math{padding-top:var(--space-10);padding-bottom:var(--space-8);background:var(--paper-2)}
.how{padding-block:var(--space-10) var(--space-9)}
.terms,.why{background:var(--paper-2)}
.docs{padding-bottom:var(--space-8)}
.faq{padding-block:var(--space-10) var(--space-9)}
.lead{background:var(--paper-2);padding-block:var(--space-9) var(--space-10)}

.math-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-8);align-items:center}
.versus{display:grid;gap:var(--space-5)}
.v-row{display:grid;grid-template-columns:var(--space-9) minmax(0,1fr);gap:var(--space-4);align-items:center}
.v-name{font-weight:700;color:var(--ink-2)}
.v-bar{display:flex;height:32px;border-radius:var(--space-2);background:var(--paper-3);overflow:hidden;transform:scaleX(0);transform-origin:left;transition:transform 1s var(--ease)}
.versus.seen .v-bar{transform:scaleX(1)}
.seg{display:block;height:100%}
.seg.loss{background:var(--loss)} .seg.warn{background:var(--warn)} .seg.gain{background:var(--accent)} .seg.gain2{background:var(--accent-2)}
.legend{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2) var(--space-4);font-size:var(--text-small);color:var(--ink-3)}
.sw{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:calc(var(--space-2) * -1)}
.sw.loss{background:var(--loss)} .sw.warn{background:var(--warn)} .sw.gain{background:var(--accent)}
.formula{padding:var(--space-4) var(--space-5);border-radius:var(--radius-ctl);background:var(--paper);border:1px solid var(--line);font:500 var(--text-small)/1.9 var(--font-mono);color:var(--ink-2);overflow-x:auto}
.formula b{color:var(--loss)}
.caret{display:inline-block;width:.6em;height:1.1em;margin-left:var(--space-1);background:var(--accent);vertical-align:text-bottom;animation:blink 1.1s steps(2,start) infinite}
.tbl{width:100%;border-collapse:collapse;font-size:var(--text-body)}
.tbl th,.tbl td{padding:var(--space-4) var(--space-2);border-bottom:1px solid var(--line);text-align:right;font-variant-numeric:tabular-nums}
.tbl td:not(:first-child){font-family:var(--font-mono)}
.tbl th:first-child,.tbl td:first-child{text-align:left;font-weight:700}
.tbl th{font-size:var(--text-small);font-weight:600;color:var(--ink-3)}
.math .lede-s{margin-top:var(--space-5);margin-bottom:0}

.how-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-8);align-items:start}
.steps{list-style:none;display:grid;gap:var(--space-2)}
.steps button{display:block;width:100%;text-align:left;background:transparent;border:1px solid var(--line);border-radius:var(--radius-ctl);padding:var(--space-4) var(--space-5);cursor:pointer;transition:background-color .25s,border-color .25s}
.steps button:hover{border-color:var(--line-2)}
.steps b{font:600 1.125rem var(--font-display);letter-spacing:-.02em;transition:color .25s}
.steps p{display:none;margin-top:var(--space-2);color:var(--ink-2);max-width:48ch}
.steps li.on button{background:var(--paper-2);border-color:var(--accent-line)}
.steps li.on b{color:var(--accent)}
.steps li.on p{display:block;animation:fade .35s var(--ease)}
.scheme{position:sticky;top:var(--space-9);padding:var(--space-5);background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius-card)}
.scheme svg{width:100%;height:auto}
.scheme text{fill:var(--ink);font:600 14px var(--font-body);text-anchor:middle}
.scheme .sub{fill:var(--ink-3);font-size:12px;font-weight:500}
.scheme .node rect{fill:var(--paper);stroke:var(--line-2);stroke-width:1.5}
.scheme .node.core rect{fill:var(--accent-wash);stroke:var(--accent-line)}
.scheme .node,.scheme .edge,.scheme .doc{opacity:.35;transition:opacity .35s}
.scheme .act{opacity:1}
.scheme .node.act rect{stroke:var(--accent)}
.scheme .edge path{fill:none;stroke:var(--accent);stroke-width:2;stroke-dasharray:5 6}
.scheme .tok{fill:var(--accent);font:700 18px var(--font-mono);text-anchor:middle;dominant-baseline:central}
.scheme .edge:not(.act) .tok{display:none}
.scheme .doc rect{fill:var(--accent-wash);stroke:var(--accent-line);stroke-dasharray:4 4}
.scheme .doc text{fill:var(--accent);font-size:13px}

.defs{display:grid;gap:0;border-top:1px solid var(--line)}
.defs div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:var(--space-5);padding-block:var(--space-5);border-bottom:1px solid var(--line)}
.defs dt{font:600 1.125rem var(--font-display);letter-spacing:-.02em}
.defs dd{color:var(--ink-2)}
.marquee{overflow:hidden;margin-top:var(--space-8);-webkit-mask-image:linear-gradient(90deg,transparent,var(--paper) 8%,var(--paper) 92%,transparent);mask-image:linear-gradient(90deg,transparent,var(--paper) 8%,var(--paper) 92%,transparent)}
.marquee div{display:flex;gap:var(--space-7);width:max-content;animation:scroll 48s linear infinite}
.marquee span{font:500 var(--text-section)/1.2 var(--font-display);letter-spacing:-.035em;color:var(--ink-3);white-space:nowrap}
.marquee:hover div{animation-play-state:paused}
.docs .note{margin-top:var(--space-5)}

.faq-list{display:grid;gap:var(--space-2)}
.faq details{border:1px solid var(--line);border-radius:var(--radius-ctl);background:var(--paper-2)}
.faq summary{cursor:pointer;list-style:none;padding:var(--space-4) calc(var(--space-8) - var(--space-2)) var(--space-4) var(--space-5);font-weight:700;position:relative;border-radius:var(--radius-ctl)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:var(--space-5);top:50%;transform:translateY(-50%);font:500 1.5rem var(--font-mono);color:var(--accent);transition:transform .25s var(--ease)}
.faq details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.faq details[open]{border-color:var(--accent-line)}
.faq p{padding:0 var(--space-5) var(--space-5);color:var(--ink-2);max-width:62ch}

.lead-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:var(--space-8);align-items:center}
.lead h2{font-size:var(--text-section)}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4);margin-bottom:var(--space-4)}
form label{display:block;font-size:var(--text-small);font-weight:600;color:var(--ink-3)}
form input,form select,form textarea{display:block;width:100%;margin-top:var(--space-2);background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-ctl);padding:var(--space-3) var(--space-4);outline:0;color:var(--ink);transition:border-color .2s}
form input:hover,form select:hover,form textarea:hover{border-color:var(--line-2)}
form input:focus,form select:focus,form textarea:focus{border-color:var(--accent)}
form input[aria-invalid=true]{border-color:var(--loss)}
form textarea{resize:vertical;margin-bottom:var(--space-4)}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0}
.form-msg{margin-top:var(--space-3);padding:var(--space-3) var(--space-4);border-radius:var(--radius-ctl);border:1px solid var(--loss);color:var(--loss);font-size:var(--text-small)}
.done{text-align:center;padding:var(--space-6) var(--space-2)}.done p{margin:var(--space-2) 0 var(--space-5);color:var(--ink-2)}

.foot{padding-block:var(--space-7)}
.foot-row{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:var(--space-4)}
.foot nav{display:flex;gap:var(--space-5);flex-wrap:wrap;font-size:var(--text-small);color:var(--ink-3)}
.foot nav a:hover{color:var(--ink)}

/* ---------- страница политики ---------- */
.doc{padding-top:calc(var(--space-9) + var(--space-5))}
.doc h1{margin-bottom:var(--space-6)}
.doc h2{font-size:var(--text-title);margin:var(--space-7) 0 var(--space-3)}
.doc p{color:var(--ink-2);max-width:65ch;margin-bottom:var(--space-3)}
.doc .warn-box{padding:var(--space-4) var(--space-5);border:1px solid var(--warn);border-radius:var(--radius-ctl);color:var(--warn)}
.note a{text-decoration:underline}

/* ---------- символы по клику ---------- */
.burst{position:fixed;left:0;top:0;z-index:60;pointer-events:none;font:700 1.25rem var(--font-mono);color:var(--accent)}

/* ---------- появление ---------- */
.js .reveal{opacity:0;transform:translateY(var(--space-5));transition:opacity .8s var(--ease),transform .8s var(--ease)}
.js .reveal.in{opacity:1;transform:none}
@keyframes flash{0%{opacity:.35}100%{opacity:1}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes flip{0%{opacity:0;transform:translateY(var(--space-3))}100%{opacity:1;transform:none}}
@keyframes blink{to{visibility:hidden}}
@keyframes tape{to{transform:translateX(-50%)}}
@keyframes scroll{to{transform:translateX(calc(-50% - var(--space-7) / 2))}}

/* ---------- адаптив ---------- */
@media (max-width:980px){
  .terms,.why{padding-block:var(--space-8)}
  .hero{padding-top:calc(var(--space-8) + var(--space-5))}
  .hero-grid,.math-grid,.how-grid,.lead-grid{grid-template-columns:minmax(0,1fr);gap:var(--space-7)}
  .hero-copy{padding-top:0}
  .scheme{position:static}
  .sec,.math,.how,.faq,.lead{padding-block:var(--space-8)}
  .defs div{grid-template-columns:minmax(0,1fr);gap:var(--space-2)}
}
.nav .btn{white-space:nowrap}
@media (max-width:480px){
  .nav .long{display:none}
}
@media (max-width:620px){
  .actions .btn{width:100%}
  .grid2{grid-template-columns:minmax(0,1fr)}
  .result{flex-direction:column;align-items:flex-start}
  .v-row{grid-template-columns:var(--space-8) minmax(0,1fr)}
  .price{font-size:1.5rem}
  .tk{width:48px;height:48px;font-size:1.25rem}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  .js .reveal{opacity:1;transform:none}
  .bar i,.v-bar{transform:none}
  .scheme .tok{display:none!important}
  .glyphs{display:none}
  .marquee div{flex-wrap:wrap;width:auto}
  .marquee span:nth-child(n+10){display:none}
  .tape-in{flex-wrap:wrap;width:auto}
  .tape-in>:nth-child(n+9){display:none}
}