/* ============================================================
   Пергамент под чистым стеклом — та же система, что у панели.
   Тёплая бумага, волосяные линии, начертания 400 и 500.
   ============================================================ */

:root{
  color-scheme:light;

  --parchment:#f7f4ee;
  --paper:#fffcf8;
  --parchment-deep:#f1ece3;

  --mist:#d6d1c7;
  --ash:#6c6962;
  --graphite:#6f6b63;
  --ink:#1f1c16;

  --teal:#0b6b6a;
  --teal-soft:#e4f1f0;

  --ok:#2f6b4f;
  --warn:#8a5a12;
  --danger:#9b3b32;
  --ok-bg:#eaf1ec;
  --warn-bg:#f5efe1;
  --danger-bg:#f6eae8;

  --brand:#6d4ee8;
  --brand-2:#1a9ae6;

  --r-card:16px;
  --r-input:12px;
  --r-btn:8px;
  --r-pill:9999px;
  --shadow:0 1px 2px rgba(31,28,22,.06), 0 8px 24px rgba(31,28,22,.04);
  --ease:cubic-bezier(.32,.72,0,1);
  --page:1120px;
  --nav:72px;
}

:root[data-theme="dark"]{
  color-scheme:dark;
  --parchment:#161410;
  --paper:#1f1c16;
  --parchment-deep:#12100d;
  --mist:#3a342b;
  --ash:#8a857a;
  --graphite:#b3ad9f;
  --ink:#f0ebe1;
  --teal:#2aa8a4;
  --teal-soft:#163332;
  --ok:#6fbf95;
  --warn:#d5aa5a;
  --danger:#e08b82;
  --ok-bg:#1c2a22;
  --warn-bg:#2b2419;
  --danger-bg:#2e1f1d;
  --shadow:0 1px 2px rgba(0,0,0,.45), 0 10px 28px rgba(0,0,0,.22);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  background-color:var(--parchment);
  color:var(--graphite);
  font:400 16px/1.5 "Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;
  background-image:radial-gradient(rgba(31,28,22,.035) .7px, transparent .8px);
  background-size:3.5px 3.5px;
  min-height:100%;
}
:root[data-theme="dark"] body{
  background-image:radial-gradient(rgba(240,235,225,.04) .7px, transparent .8px)
}
button,input,select,textarea{font:inherit}
h1,h2,h3,h4{font-weight:500;letter-spacing:-.03em;margin:0;color:var(--ink)}
b,strong{font-weight:500}
a{color:inherit;text-decoration:none}
img,svg{display:block}
code{font-family:ui-monospace,"SF Mono",Consolas,monospace;font-size:.9em;color:var(--ink)}
.hidden{display:none !important}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
button:focus:not(:focus-visible){outline:none}

*{scrollbar-width:thin;scrollbar-color:var(--mist) transparent}

.skip{
  position:absolute;left:16px;top:-40px;z-index:80;
  background:var(--ink);color:var(--parchment);padding:8px 12px;border-radius:var(--r-btn)
}
.skip:focus{top:16px}

.wrap{max-width:var(--page);margin:0 auto;padding:0 24px}
.center{text-align:center}
.center .lede{margin-left:auto;margin-right:auto}

.display{font-weight:500;color:var(--ink);letter-spacing:-.04em}
h1.display{font-size:clamp(36px,6vw,68px);line-height:1.02}
h2.display{font-size:clamp(28px,4.2vw,48px);line-height:1.08}
.display em{font-style:italic;font-weight:400;color:var(--teal)}
.lede{font-size:18px;font-weight:400;line-height:1.55;color:var(--graphite);max-width:640px;margin:20px 0 0}
.kicker,.mono{
  display:block;margin-bottom:16px;
  font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--ash)
}
.mono{display:inline}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 16px;border:1px solid transparent;border-radius:var(--r-input);
  cursor:pointer;font-weight:500;font-size:14px;
  transition:background .15s var(--ease),color .15s,border-color .15s,transform .15s var(--ease)
}
.btn[disabled]{opacity:.45;cursor:default;transform:none}
.btn--primary{background:var(--ink);color:var(--parchment)}
.btn--primary:hover{background:#3a372e}
.btn--primary:active{transform:translateY(1px)}
:root[data-theme="dark"] .btn--primary:hover{background:#d8d2c6;color:#1f1c16}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--mist);border-radius:var(--r-btn)}
.btn--ghost:hover{border-color:var(--graphite);background:var(--paper)}
.btn span{transition:transform .2s var(--ease)}
.btn:hover span{transform:translateX(3px)}

.brand{display:inline-flex;align-items:center;gap:10px;color:var(--ink);font-weight:500;font-size:16px;letter-spacing:-.02em}
.brand__mark{height:28px;width:28px}

/* ---------- навигация ---------- */
.topnav{
  position:fixed;top:0;left:0;right:0;z-index:50;height:var(--nav);
  background:transparent;border-bottom:1px solid transparent;
  transition:background-color .25s var(--ease),border-color .25s var(--ease),backdrop-filter .25s
}
.topnav.is-on,.topnav.is-solid{
  background:color-mix(in srgb, var(--parchment) 86%, transparent);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border-bottom-color:var(--mist)
}
.topnav__in{display:flex;align-items:center;gap:20px;height:var(--nav)}
.topnav__links{display:flex;gap:22px;margin:0 auto}
.topnav__links a{
  font-size:13px;color:var(--graphite);padding:6px 0;
  border-bottom:1px solid transparent;transition:color .15s,border-color .15s
}
.topnav__links a:hover,.topnav__links a.is-here{color:var(--ink);border-bottom-color:var(--ink)}
.topnav__right{display:flex;align-items:center;gap:10px;margin-left:auto}
.nav-login{font-size:13px;color:var(--graphite);padding:6px 8px;transition:color .15s}
.nav-login:hover{color:var(--ink)}
.topnav .btn{padding:8px 14px}
.nav-toggle{
  display:none;margin-left:auto;background:transparent;border:1px solid var(--mist);
  color:var(--graphite);width:36px;height:36px;border-radius:var(--r-btn);cursor:pointer
}

.icon-btn{
  background:transparent;border:1px solid var(--mist);color:var(--graphite);
  width:36px;height:36px;border-radius:var(--r-btn);cursor:pointer;
  display:grid;place-items:center;transition:.15s;flex:none
}
.icon-btn:hover{color:var(--ink);border-color:var(--graphite);background:var(--paper)}
.icon-sun{display:none}
:root[data-theme="dark"] .icon-moon{display:none}
:root[data-theme="dark"] .icon-sun{display:block}

/* ---------- герой ---------- */
.hero{
  position:relative;overflow:hidden;
  padding:calc(var(--nav) + 56px) 0 40px;
}
.hero__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.hero-mark{width:64px;height:64px;margin-bottom:28px}
.wordmark{
  display:inline-block;margin:0 0 18px;
  font-family:Cambria,Constantia,"Palatino Linotype",serif;
  font-style:italic;font-weight:400;
  font-size:clamp(28px,3.6vw,40px);line-height:1.1;
  color:var(--ink);letter-spacing:-.01em;
  transform:rotate(-5deg);transform-origin:left center
}
.hero-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:32px}
.hero-actions--center{justify-content:center}
.hero-meta{display:flex;gap:18px;flex-wrap:wrap;margin-top:28px;font-size:13px;color:var(--ash)}
.hero-meta b{color:var(--ink);font-weight:500}

.preview{
  background:var(--paper);border:1px solid var(--mist);border-radius:18px;
  box-shadow:var(--shadow);overflow:hidden;transform-origin:center bottom
}
.preview__chrome{
  display:flex;align-items:center;gap:6px;padding:10px 14px;
  background:var(--parchment-deep);border-bottom:1px solid var(--mist)
}
.dot{width:8px;height:8px;border-radius:50%;background:var(--mist)}
.preview__url{
  margin-left:8px;font-family:ui-monospace,Consolas,monospace;font-size:11px;color:var(--ash)
}
.preview__body{display:grid;grid-template-columns:148px 1fr;min-height:340px}
.preview__nav{
  background:var(--parchment-deep);border-right:1px solid var(--mist);
  padding:14px 10px;display:flex;flex-direction:column;gap:4px
}
.preview__nav span{
  display:block;padding:7px 10px;border-radius:10px;font-size:12px;color:var(--graphite)
}
.preview__nav span.on{background:var(--teal-soft);color:var(--teal);font-weight:500}
.preview__main{padding:18px 18px 16px}
.preview__h{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:14px}
.preview__title{font-size:15px;font-weight:500;letter-spacing:-.03em;color:var(--ink)}
.preview-row{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:10px 0;border-bottom:1px solid var(--mist);font-size:13px
}
.preview-row:last-child{border-bottom:0}
.preview-row b{color:var(--ink);font-weight:500}
.preview-row .muted{color:var(--ash)}
.tag{
  font-size:11px;font-weight:500;padding:2px 8px;border-radius:var(--r-pill);
  border:1px solid transparent;white-space:nowrap
}
.tag--ok{background:var(--ok-bg);color:var(--ok)}
.tag--warn{background:var(--warn-bg);color:var(--warn)}
.tag--danger{background:var(--danger-bg);color:var(--danger)}
.tag--mute{border-color:var(--mist);color:var(--graphite)}
.tag--new{background:var(--teal);color:#fff}

/* ---------- секции ---------- */
section{padding:96px 0}
section[id],header[id]{scroll-margin-top:88px}
.band{background:var(--parchment-deep);border-block:1px solid var(--mist)}

.split{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center}
.facts{display:flex;flex-direction:column;gap:0}
.fact{padding:22px 0;border-top:1px solid var(--mist)}
.fact:last-child{border-bottom:1px solid var(--mist)}
.fact b{display:block;color:var(--ink);font-size:17px;margin-bottom:6px}
.fact span{font-size:14px;line-height:1.6}

.tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:48px}
.tile{
  background:var(--paper);border:1px solid var(--mist);border-radius:var(--r-card);
  padding:28px;box-shadow:var(--shadow);position:relative;overflow:hidden;
  transition:transform .28s var(--ease),border-color .28s,box-shadow .28s
}
.tile::before{
  content:"";position:absolute;left:0;top:16px;bottom:16px;width:3px;border-radius:0 2px 2px 0;
  background:linear-gradient(180deg,var(--brand),var(--brand-2))
}
.tile:hover{transform:translateY(-4px);border-color:color-mix(in srgb, var(--teal) 45%, var(--mist))}
.tile .num{font-size:12px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:var(--ash)}
.tile h3{font-size:22px;line-height:1.2;margin:28px 0 10px}
.tile p{margin:0;font-size:15px;line-height:1.55}
.tile ul{margin:16px 0 0;padding-left:18px;font-size:14px;line-height:1.7}
.tile li+li{margin-top:4px}

.quad{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:48px}
.qcard{
  background:var(--paper);border:1px solid var(--mist);border-radius:var(--r-card);
  padding:28px;transition:transform .28s var(--ease)
}
.qcard:hover{transform:translateY(-3px)}
.qcard h3{font-size:20px;line-height:1.2;margin:12px 0 12px}
.qcard p{margin:0 0 12px;font-size:15px;line-height:1.6}
.qcard p:last-child{margin-bottom:0}
.qcard .hl{color:var(--ink)}

.cmp{margin-top:48px;border:1px solid var(--mist);border-radius:var(--r-card);overflow:hidden;background:var(--paper)}
.cmp-row{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--mist);transition:background .15s}
.cmp-row:last-child{border-bottom:0}
.cmp-row:hover{background:var(--parchment)}
.cmp-row > div{padding:18px 24px;font-size:15px}
.cmp-row > div:first-child{border-right:1px solid var(--mist);color:var(--ash)}
.cmp-row > div:last-child{color:var(--ink)}
.cmp-head > div{
  font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ash);padding-top:14px;padding-bottom:14px;background:var(--parchment-deep)
}

.sources{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:48px}
.source{
  background:var(--paper);border:1px solid var(--mist);border-radius:var(--r-card);padding:24px;
  transition:transform .28s var(--ease)
}
.source:hover{transform:translateY(-3px)}
.source .kicker{margin-bottom:12px}
.source b{display:block;font-size:18px;color:var(--ink);margin-bottom:8px;letter-spacing:-.02em}
.source p{margin:0;font-size:14px;line-height:1.6}

.quote{
  background:var(--paper);border:1px solid var(--mist);border-radius:22px;
  padding:48px 40px;box-shadow:var(--shadow);position:relative;overflow:hidden
}
.quote::before{
  content:"";position:absolute;inset:0 0 auto;height:3px;
  background:linear-gradient(90deg,var(--brand),var(--brand-2))
}
.quote h3{font-size:clamp(22px,3vw,32px);line-height:1.2;max-width:860px;margin:12px 0 18px}
.quote p{max-width:680px;margin:0 0 12px;font-size:16px}
.quote-meta{margin-top:24px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ash)}

.sec{display:grid;grid-template-columns:1fr 1fr;gap:8px 56px;margin-top:48px}
.sitem{border-top:1px solid var(--mist);padding:22px 0}
.sitem b{display:block;color:var(--ink);font-size:17px;margin-bottom:6px}
.sitem p{margin:0;font-size:15px;line-height:1.6}

.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:48px}
.step{
  background:var(--paper);border:1px solid var(--mist);border-radius:var(--r-card);padding:24px;
  transition:transform .28s var(--ease)
}
.step:hover{transform:translateY(-3px)}
.step b{display:block;font-size:28px;color:var(--ink);margin-bottom:16px;letter-spacing:-.04em}
.step h3{font-size:16px;margin:0 0 8px}
.step p{margin:0;font-size:14px;line-height:1.6}

.faq{max-width:760px;margin:48px auto 0}
.q{border-bottom:1px solid var(--mist)}
.q summary{
  list-style:none;cursor:pointer;padding:20px 0;
  font-size:17px;font-weight:500;color:var(--ink);
  display:flex;justify-content:space-between;gap:20px;align-items:center
}
.q summary::-webkit-details-marker{display:none}
.q summary::after{
  content:"";width:10px;height:10px;flex:none;
  border-right:1.5px solid var(--ash);border-bottom:1.5px solid var(--ash);
  transform:rotate(45deg);transition:transform .25s var(--ease)
}
.q[open] summary::after{transform:rotate(225deg)}
.q .q-body{
  display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s var(--ease)
}
.q[open] .q-body{grid-template-rows:1fr}
.q .q-body > p{overflow:hidden;margin:0;padding:0 0 20px;font-size:15px;line-height:1.65;max-width:640px}

.buy{
  background:var(--paper);border:1px solid var(--mist);border-radius:22px;
  padding:48px 40px;text-align:center;box-shadow:var(--shadow)
}
.buy .lede{margin-left:auto;margin-right:auto}
.buy-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:28px}
.buy-hint{margin-top:16px;font-size:13px;color:var(--ash)}

.cta{text-align:center;padding:120px 0}
.cta form{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:32px}
.cta input,.field input{
  background:var(--parchment);color:var(--ink);
  border:1px solid var(--mist);border-radius:var(--r-input);
  padding:11px 14px;outline:none;
  transition:border-color .15s var(--ease),box-shadow .15s var(--ease),background .15s
}
.cta input{min-width:280px}
.cta input:focus,.field input:focus{
  border-color:var(--teal);background:var(--paper);box-shadow:0 0 0 3px var(--teal-soft)
}
.cta input::placeholder,.field input::placeholder{color:var(--ash)}
.form-status{margin-top:14px;min-height:20px;font-size:13px;color:var(--ash)}
.form-status.is-ok{color:var(--ok)}
.form-status.is-err{color:var(--danger)}

footer{background:var(--parchment-deep);border-top:1px solid var(--mist);padding:56px 0 32px}
.foot-grid{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:32px}
.foot-grid .foot-h{margin:0 0 12px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ash);font-weight:500}
.foot-grid a{display:block;font-size:14px;color:var(--graphite);padding:5px 0;transition:color .15s}
.foot-grid a:hover{color:var(--ink)}
.foot-note{font-size:14px;max-width:280px;margin-top:12px}
.foot-bottom{
  margin-top:40px;padding-top:20px;border-top:1px solid var(--mist);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:12px;color:var(--ash)
}
.foot-bottom a{color:var(--ash);transition:color .15s}
.foot-bottom a:hover{color:var(--ink)}

/* ---------- документы ---------- */
.doc-head{padding:calc(var(--nav) + 56px) 0 40px}
.doc-head h1{font-size:clamp(30px,4.4vw,52px);line-height:1.08;color:var(--ink);margin:12px 0 0}
.doc-meta{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:18px;font-size:12px;color:var(--ash)}
.doc-body{padding:24px 0 96px}
.doc{max-width:760px;margin:0 auto;font-size:16px;line-height:1.7}
.doc h2{font-size:clamp(22px,2.4vw,28px);margin:52px 0 16px;padding-top:28px;border-top:1px solid var(--mist)}
.doc h2:first-child{margin-top:0;padding-top:0;border-top:0}
.doc h3{font-size:17px;margin:28px 0 10px}
.doc p{margin:0 0 14px}
.doc ul,.doc ol{margin:0 0 18px;padding-left:22px}
.doc li{margin-bottom:8px}
.doc a[href^="mailto"],.doc a[href^="http"]{color:var(--ink);border-bottom:1px solid var(--mist)}
.doc a:hover{border-bottom-color:var(--ink)}
.fill{color:var(--ink);border-bottom:1px dashed var(--ash)}
.note{
  border:1px solid var(--mist);border-radius:var(--r-card);
  padding:20px 22px;margin:0 0 22px;background:var(--paper)
}
.note .kicker{margin-bottom:8px}
.note p:last-child{margin-bottom:0}
.doc-nav{display:flex;flex-wrap:wrap;gap:10px;margin-top:48px;padding-top:24px;border-top:1px solid var(--mist)}
.doc-nav a{
  font-size:12px;letter-spacing:.04em;text-transform:uppercase;
  color:var(--graphite);border:1px solid var(--mist);border-radius:var(--r-pill);
  padding:8px 16px;transition:color .15s,border-color .15s
}
.doc-nav a:hover{color:var(--ink);border-color:var(--graphite)}

/* ---------- тарифы ---------- */
.period-switch{display:flex;justify-content:center;margin-top:36px}
.seg{
  display:inline-flex;gap:4px;flex-wrap:wrap;justify-content:center;
  border:1px solid var(--mist);border-radius:var(--r-pill);padding:4px;background:var(--paper)
}
.seg button{
  font-size:12px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;
  background:transparent;border:0;border-radius:var(--r-pill);
  padding:8px 16px;color:var(--graphite);cursor:pointer;
  transition:background .2s var(--ease),color .2s
}
.seg button:hover{color:var(--ink)}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--parchment)}
:root[data-theme="dark"] .seg button[aria-pressed="true"]{color:#1f1c16;background:var(--ink)}

.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:40px}
.plan{
  background:var(--paper);border:1px solid var(--mist);border-radius:var(--r-card);
  padding:28px;display:flex;flex-direction:column;transition:transform .28s var(--ease)
}
.plan:hover{transform:translateY(-4px)}
.plan.is-feat{border-color:transparent;box-shadow:var(--shadow);position:relative;overflow:hidden}
.plan.is-feat::before{
  content:"";position:absolute;inset:0 0 auto;height:3px;
  background:linear-gradient(90deg,var(--brand),var(--brand-2))
}
.plan h2{font-size:26px;margin:10px 0 6px}
.plan .keys{font-size:14px;margin:0}
.plan .price{font-size:clamp(30px,3.2vw,40px);letter-spacing:-.04em;color:var(--ink);margin:24px 0 4px}
.plan .per{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ash)}
.plan ul{list-style:none;padding:0;margin:24px 0;display:grid;gap:10px;font-size:14px}
.plan ul li{padding-left:18px;position:relative}
.plan ul li::before{content:"—";position:absolute;left:0;color:var(--ash)}
.plan .btn{width:100%;margin-top:auto}

.included{display:grid;grid-template-columns:repeat(3,1fr);gap:8px 32px;margin-top:48px}
.included div{border-top:1px solid var(--mist);padding:18px 0;font-size:14px;line-height:1.6}
.included b{display:block;color:var(--ink);margin-bottom:4px}

/* ---------- окно заказа ---------- */
.modal{
  position:fixed;inset:0;z-index:100;display:none;place-items:center;padding:20px;
  background:rgba(20,18,14,.42)
}
.modal.open{display:grid;animation:fade-in .22s var(--ease)}
.modal__box{
  background:var(--paper);border:1px solid var(--mist);border-radius:var(--r-card);
  width:min(520px,100%);max-height:90vh;overflow:auto;padding:28px;box-shadow:var(--shadow);
  animation:rise-in .32s var(--ease)
}
.modal-top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:24px}
.modal__box h2{font-size:24px;margin:8px 0 0}
.modal-close{
  width:34px;height:34px;border-radius:var(--r-pill);border:1px solid var(--mist);
  background:transparent;color:var(--ink);cursor:pointer;display:grid;place-items:center
}
.modal-close:hover{background:var(--parchment)}
.field{margin-bottom:18px}
.field .kicker,.field > label{display:block;margin-bottom:8px}
.field input{width:100%}
.agree{display:flex;gap:10px;align-items:flex-start;margin:0 0 18px;font-size:13px;line-height:1.45;color:var(--graphite);cursor:pointer}
.agree input{flex:none;width:16px;height:16px;margin:2px 0 0;accent-color:var(--teal);cursor:pointer}
.agree a{color:var(--teal);text-decoration:underline;text-underline-offset:2px}
.field .seg{display:flex;width:100%}
.field .seg button{flex:1;padding:8px 10px}
.total{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  border-top:1px solid var(--mist);padding-top:20px;margin-top:4px
}
.total b{font-size:32px;color:var(--ink)}
.modal .btn--primary{width:100%;margin-top:20px}
.stub-note{margin-top:16px;padding-top:16px;border-top:1px solid var(--mist);font-size:13px;line-height:1.6;color:var(--ash)}
.success{display:none;text-align:center}
.success.on{display:block;animation:rise-in .4s var(--ease)}
.success h2{margin:16px 0 12px}
.success p{margin:0 0 12px}
.receipt{
  border:1px solid var(--mist);border-radius:var(--r-card);padding:16px 18px;
  margin:22px 0;text-align:left;background:var(--parchment)
}
.receipt div{display:flex;justify-content:space-between;gap:16px;padding:6px 0;font-size:14px}
.receipt div span:last-child{color:var(--ink)}
.success-mark{width:56px;height:56px;margin:0 auto}

#confetti{position:fixed;inset:0;z-index:110;pointer-events:none;display:none}
#confetti.on{display:block}

/* ---------- появление ---------- */
.js .reveal{
  opacity:0;transform:translateY(16px);
  transition:opacity .7s var(--ease),transform .7s var(--ease)
}
.js .reveal.in{opacity:1;transform:none}
.js .reveal[data-d="1"]{transition-delay:.05s}
.js .reveal[data-d="2"]{transition-delay:.1s}
.js .reveal[data-d="3"]{transition-delay:.16s}
.js .reveal[data-d="4"]{transition-delay:.22s}
.js .reveal[data-d="5"]{transition-delay:.28s}
.js .reveal[data-d="6"]{transition-delay:.34s}

.hero-mark{animation:mark-in .8s var(--ease) both}
.wordmark{animation:word-in .9s var(--ease) .05s both}
.preview{animation:preview-in .9s var(--ease) .15s both}
.preview-row{animation:row-in .55s var(--ease) both}
.preview-row:nth-child(2){animation-delay:.35s}
.preview-row:nth-child(3){animation-delay:.45s}
.preview-row:nth-child(4){animation-delay:.55s}
.preview-row:nth-child(5){animation-delay:.65s}
.tag--new{animation:pulse-tag 2.4s var(--ease) 1.1s both}

@keyframes mark-in{
  from{opacity:0;transform:translateY(10px) scale(.96)}
  to{opacity:1;transform:none}
}
@keyframes word-in{
  from{opacity:0;transform:rotate(-5deg) translateY(10px)}
  to{opacity:1;transform:rotate(-5deg)}
}
@keyframes preview-in{
  from{opacity:0;transform:translateY(24px)}
  to{opacity:1;transform:none}
}
@keyframes row-in{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:none}
}
@keyframes pulse-tag{
  0%{transform:scale(.8);opacity:0}
  40%{transform:scale(1.06);opacity:1}
  100%{transform:scale(1);opacity:1}
}
@keyframes fade-in{from{opacity:0}to{opacity:1}}
@keyframes rise-in{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}

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

@media(max-width:980px){
  .hero__grid,.split,.quad,.sources,.sec,.plans,.included,.foot-grid{grid-template-columns:1fr 1fr}
  .preview__body{grid-template-columns:1fr}
  .preview__nav{display:none}
  .tiles{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr 1fr}
  .topnav__links,.nav-login{display:none}
  body.nav-open .topnav__links{
    display:flex;flex-direction:column;position:absolute;left:0;right:0;top:var(--nav);
    background:var(--parchment);border-bottom:1px solid var(--mist);padding:12px 24px 18px;gap:4px
  }
  body.nav-open .topnav__links a{padding:10px 0}
  .nav-toggle{display:grid;place-items:center}
  .icon-close{display:none}
  body.nav-open .icon-menu{display:none}
  body.nav-open .icon-close{display:block}
}
@media(max-width:700px){
  .hero__grid,.split,.quad,.sources,.sec,.plans,.included,.foot-grid,.steps,.cmp-row{grid-template-columns:1fr}
  .cmp-row > div:first-child{border-right:0;border-bottom:1px dashed var(--mist);padding-bottom:8px}
  .cmp-head{display:none}
  section{padding:72px 0}
  .quote,.buy{padding:32px 22px}
  .cta input{min-width:0;width:100%}
  .cta form,.buy-actions,.hero-actions{flex-direction:column}
  .cta .btn,.buy-actions .btn,.hero-actions .btn{width:100%}
}

/* реквизиты покупателя и акт */
[hidden]{display:none !important}
.field-hint{margin:8px 0 0;font-size:12.5px;line-height:1.5;color:var(--graphite)}
.field input[aria-invalid="true"]{border-color:var(--danger)}
.act-link{width:100%;justify-content:center;margin:0 0 12px}
.act-note{margin:0 0 16px;font-size:13px;line-height:1.55;color:var(--graphite)}

/* две колонки для наименования и ИИН/БИН, подвал окна с итогом всегда на виду */
.field-row{display:grid;grid-template-columns:1fr 150px;gap:12px}
.stub-note{margin:4px 0 18px;padding-top:0;border-top:0}
.checkout-foot{
  position:sticky;bottom:-28px;z-index:1;
  margin:0 -28px -28px;padding:18px 28px 20px;
  background:var(--paper);border-top:1px solid var(--mist)
}
.checkout-foot .total{border-top:0;padding-top:0;margin-top:0}
.checkout-foot .btn--primary{margin-top:14px}
.checkout-foot .form-status{margin-top:10px;min-height:0}
.checkout-foot .form-status:empty{display:none}
@media(max-width:560px){.field-row{grid-template-columns:1fr;gap:0}}

/* способ оплаты */
.pay-methods{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pay-opt{
  position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:10px;
  padding:14px 14px 12px;text-align:left;cursor:pointer;
  background:var(--paper);border:1px solid var(--mist);border-radius:var(--r-input);
  color:var(--graphite);font:inherit;transition:border-color .15s,box-shadow .15s,background .15s
}
.pay-opt:hover{border-color:var(--graphite)}
.pay-opt:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.pay-opt[aria-checked="true"]{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
/* логотипы банков нарисованы под светлый фон — держим под ними белую плашку в обеих темах */
.pay-opt__logo{
  display:flex;align-items:center;height:36px;padding:0 10px;
  background:#fff;border-radius:8px;border:1px solid rgba(31,28,22,.06)
}
.pay-opt__logo img{display:block;height:20px;width:auto}
.pay-opt__text{display:flex;flex-direction:column;gap:2px;line-height:1.25}
.pay-opt__text b{font-size:14px;font-weight:600;color:var(--ink)}
.pay-opt__text small{font-size:12.5px;color:var(--graphite)}
.pay-opt__check{
  position:absolute;top:12px;right:12px;width:18px;height:18px;border-radius:50%;
  border:1.5px solid var(--mist);background:var(--paper);transition:.15s
}
.pay-opt[aria-checked="true"] .pay-opt__check{border-color:var(--ink);background:var(--ink);box-shadow:inset 0 0 0 3.5px var(--paper)}
@media(max-width:420px){.pay-methods{grid-template-columns:1fr}.pay-opt{flex-direction:row;align-items:center}.pay-opt__check{top:50%;transform:translateY(-50%)}}

/* окно оплаты переводом на Kaspi */
.kaspi-pay{text-align:center;animation:rise-in .4s var(--ease)}
.kaspi-pay[hidden]{display:none}
.kaspi-pay__logo{
  display:inline-flex;align-items:center;justify-content:center;padding:12px 18px;margin:4px 0 18px;
  background:#fff;border-radius:12px;border:1px solid rgba(31,28,22,.08)
}
.kaspi-pay__logo img{display:block;height:28px;width:auto}
.kaspi-pay h2{margin:10px 0 10px}
.kaspi-pay p{margin:0 auto 18px;max-width:400px;line-height:1.55}
.kaspi-pay__phone{
  display:block;font-size:30px;font-weight:600;letter-spacing:-.02em;color:var(--ink);
  font-variant-numeric:tabular-nums;text-decoration:none
}
.kaspi-pay__phone:hover{color:var(--teal)}
.kaspi-pay__hint{display:block;margin:2px 0 18px;font-size:12.5px;color:var(--graphite)}
.kaspi-pay .btn{width:100%;justify-content:center}
.kaspi-pay__btn svg{flex:none}
.kaspi-pay .receipt{margin:20px 0 14px;text-align:left}
.kaspi-pay .act-note{text-align:center}
.kaspi-pay__close{margin-top:6px}

/* подсказка под ИИН/БИН */
.id-hint{margin:-8px 0 18px}
.id-hint.is-bad{color:var(--danger)}

/* меню на телефоне: знак слева, кнопки справа, бургер у самого края */
@media(max-width:980px){
  .topnav__in{gap:10px}
  .topnav__right{order:2}
  .nav-toggle{order:3;margin-left:0}
  .nav-toggle,.icon-btn{width:40px;height:40px}
}