/* Лендинг в бенто-сетке: плитки-сцены, белый, оранжевый, чёрный и бумага */
@import url('fonts/fonts.css?v=5');

:root {
  --bg: oklch(0.955 0.01 75);
  --white: oklch(0.995 0.003 75);
  --beige: oklch(0.91 0.025 70);
  --ink: oklch(0.2 0.012 270);
  --ink-2: oklch(0.38 0.012 270);
  --ink-3: oklch(0.55 0.01 270);
  --o: oklch(0.69 0.215 41);
  --o-ink: oklch(0.5 0.17 40);
  --rule: oklch(0.2 0.012 270 / 0.13);
  --d: 'Dela Gothic One', 'Geologica', sans-serif;
  --f: 'Geologica', system-ui, sans-serif;
  --m: 'PT Mono', ui-monospace, monospace;
  --g: clamp(12px, 2.2vw, 32px);
  --gap: clamp(8px, 0.9vw, 14px);
  --r: clamp(16px, 1.6vw, 26px);
  --pad: clamp(18px, 1.9vw, 30px);
  --ease: cubic-bezier(0.2, 0.7, 0.1, 1);
  --spring: cubic-bezier(0.2, 1.3, 0.35, 1);
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 17px/1.5 var(--f); letter-spacing: -0.005em; overflow-x: clip; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 400; }
p { margin: 0; }
::selection { background: var(--o); color: var(--ink); }
:focus-visible { outline: 2px solid var(--o); outline-offset: 3px; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 50; background: var(--ink); color: var(--white); padding: 10px 14px; }
.skip:focus { top: 12px; }
.lbl { font: 400 13px/1.2 var(--m); text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-2); }
.small { font: 400 13px/1.35 var(--m); color: var(--ink-2); }
.o { color: var(--o); }

/* Кнопки: прямоугольник со сдвинутой «тенью-оттиском» */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 52px; padding: 0 24px; border: 0; border-radius: 12px; background: var(--ink); color: var(--white); font: 600 16px/1 var(--f); text-decoration: none; cursor: pointer; white-space: nowrap; box-shadow: 0 0 0 0 var(--o); transition: transform 220ms var(--ease), box-shadow 220ms var(--ease); }
.btn svg { width: 18px; height: 18px; transition: transform 250ms var(--ease); }
.btn:hover { transform: translate(-3px, -3px); box-shadow: 3px 3px 0 0 var(--o); }
.btn:hover svg { transform: translateX(3px); }
.btn:active { transform: none; box-shadow: 0 0 0 0 var(--o); }
.btn.line { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }
.btn.line:hover { box-shadow: inset 0 0 0 2px var(--ink), 3px 3px 0 0 var(--o); }
.btn.white { background: var(--white); color: var(--ink); }
.orange .btn:hover, .orange .btn.white:hover { box-shadow: 3px 3px 0 0 var(--ink); }
.orange .btn:not(.white):hover { box-shadow: 3px 3px 0 0 var(--white); }
.btn.sm { min-height: 40px; padding: 0 16px; font-size: 15px; border-radius: 10px; }

/* Шапка */
.top { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 20px; height: 64px; padding: 0 var(--g); background: color-mix(in oklch, var(--bg) 90%, transparent); backdrop-filter: blur(8px); }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font: 600 17px/1 var(--f); letter-spacing: -0.02em; }
.top nav { margin-left: auto; display: flex; align-items: center; gap: 22px; }
.top .l { text-decoration: none; font-size: 15px; position: relative; }
.top .l::after { content: ''; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px; background: var(--o); transform: scaleX(0); transform-origin: left; transition: transform 250ms var(--ease); }
.top .l:hover::after { transform: scaleX(1); }

/* Сетка и плитки */
.bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); padding: 0 var(--g); }
.tile { position: relative; display: flex; flex-direction: column; gap: 14px; min-width: 0; padding: var(--pad); border-radius: var(--r); background: var(--white); overflow: hidden; text-decoration: none; }
.tile.white { background: var(--white); }
.tile.beige { background: var(--beige); }
.tile.orange { background: var(--o); }
.tile.orange .lbl, .tile.orange .small, .tile.orange p { color: oklch(0.2 0.012 270 / 0.82); }
.tile.ink-t { background: var(--ink); color: var(--white); }
.tile.ink-t .lbl, .tile.ink-t p, .tile.ink-t .small { color: oklch(0.86 0.01 75 / 0.75); }
.tile.hov { transition: transform 260ms var(--ease), box-shadow 260ms var(--ease); }
.tile.hov:hover { transform: translate(-4px, -4px); box-shadow: 4px 4px 0 0 var(--o); }
.tile .corner { position: absolute; right: var(--pad); top: var(--pad); width: 26px; height: 26px; transition: transform 300ms var(--ease); }
.tile.hov:hover .corner { transform: translate(3px, -3px); }
.grow { flex: 1 1 auto; min-height: 0; }

/* Первый экран */
.hero-b { padding-top: 4px; height: max(660px, calc(100vh - 72px)); height: max(660px, calc(100svh - 72px)); grid-template-rows: repeat(5, minmax(0, 1fr));
  grid-template-areas:
    "h h h h h h h i i i i i"
    "h h h h h h h i i i i i"
    "h h h h h h h i i i i i"
    "l l l l c c k k p p p p"
    "l l l l c c k k p p p p"; }
.t-h { grid-area: h; justify-content: flex-end; gap: clamp(16px, 2vh, 26px); }
.t-h .lbl { margin-bottom: auto; }
.t-h h1 { font-family: var(--d); font-size: clamp(40px, 5.3vw, 86px); line-height: 0.95; letter-spacing: -0.025em; }
.t-h .lead { font-size: clamp(16px, 1.25vw, 19px); max-width: 52ch; color: var(--ink-2); }
.ctas { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.t-i { grid-area: i; padding: 0; }
.t-i .art { position: absolute; inset: 0; }
.hint { position: absolute; left: var(--pad); bottom: 16px; font: 400 12px/1 var(--m); text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); pointer-events: none; }
.t-l { grid-area: l; gap: 10px; padding-bottom: 0; }
.thd { display: flex; justify-content: space-between; font: 400 13px/1 var(--m); text-transform: uppercase; letter-spacing: 0.05em; color: oklch(0.86 0.01 75 / 0.7); }
.thd .on { display: inline-flex; align-items: center; gap: 8px; color: var(--o); }
.thd .on i, .on-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--o); animation: blink 1.4s steps(2, end) infinite; }
@keyframes blink { 50% { opacity: 0.15; } }
.log { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; font: 400 13px/1.25 var(--m); -webkit-mask: linear-gradient(#000 70%, transparent); mask: linear-gradient(#000 70%, transparent); }
.lr { display: grid; grid-template-columns: 44px 84px minmax(0, 1fr) 38px minmax(0, 150px); gap: 10px; align-items: center; padding: 7px 0; border-top: 1px solid oklch(1 0 0 / 0.1); animation: lrIn 520ms var(--ease) both; }
@keyframes lrIn { from { opacity: 0; transform: translateY(-14px); clip-path: inset(0 0 100% 0); } to { opacity: 1; transform: none; clip-path: inset(0); } }
.lr .t { color: oklch(0.86 0.01 75 / 0.5); }
.lr .p { color: oklch(0.86 0.01 75 / 0.75); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lr .v { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; position: relative; }
.lr .v::after { content: ''; position: absolute; left: 0; top: 52%; height: 1.5px; width: 100%; background: var(--o); transform: scaleX(0); transform-origin: left; transition: transform 500ms var(--ease); }
.lr.no .v { color: oklch(0.86 0.01 75 / 0.45); }
.lr.no .v::after { transform: scaleX(1); }
.lr .s { text-align: right; }
.lr.ok .s { color: var(--o); }
.lr .st { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; padding: 4px 6px; border-radius: 5px; justify-self: end; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; transition: background 300ms, color 300ms; color: oklch(0.86 0.01 75 / 0.55); }
.lr .st.sent { background: var(--o); color: var(--ink); animation: stamp 420ms var(--spring) both; }
@keyframes stamp { from { transform: scale(1.8) rotate(-8deg); opacity: 0; } to { transform: none; opacity: 1; } }
.t-c { grid-area: c; justify-content: space-between; }
.clock { font: 400 clamp(40px, 4.2vw, 74px)/1 var(--m); letter-spacing: -0.06em; }
.t-k { grid-area: k; justify-content: space-between; }
.zero { font: 400 clamp(44px, 4.6vw, 80px)/1 var(--d); letter-spacing: -0.03em; }
.t-p { grid-area: p; justify-content: space-between; }
.roll { position: relative; height: 1.05em; font: 400 clamp(34px, 3.8vw, 64px)/1 var(--d); letter-spacing: -0.025em; overflow: hidden; }
.roll span { position: absolute; left: 0; top: 0; white-space: nowrap; transition: transform 700ms var(--spring), opacity 400ms; }
.roll span.up { transform: translateY(-110%); opacity: 0; }
.roll span.dn { transform: translateY(110%); opacity: 0; transition: none; }
.plats { max-width: 40ch; }

/* Картинка, которую печатает шейдер */
.art { position: relative; min-height: 120px; }
.art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.art canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: none; touch-action: pan-y; }
.art.gl img { opacity: 0; }

/* Факты */
.facts-b { margin-top: var(--gap); }
.facts-b .tile { grid-column: span 3; min-height: 230px; justify-content: flex-end; gap: 4px; }
.facts-b strong { font-weight: 600; font-size: 18px; letter-spacing: -0.015em; }
.facts-b span { color: var(--ink-2); font-size: 15px; }
.facts-b .orange span { color: oklch(0.2 0.012 270 / 0.8); }
.fx { position: relative; flex: 1; margin-bottom: 14px; }
.fx-click .fbtn { position: absolute; left: 0; top: 30%; padding: 10px 16px; border-radius: 10px; background: var(--ink); color: var(--white); font: 600 14px/1 var(--f); animation: press 3.2s var(--ease) infinite; }
.fx-click .cur { position: absolute; width: 26px; height: 26px; color: var(--ink); left: 0; top: 0; animation: curMove 3.2s var(--ease) infinite; }
@keyframes curMove { 0% { transform: translate(180px, 90px); } 45%, 100% { transform: translate(70px, 44px); } 55% { transform: translate(70px, 44px) scale(0.82); } 62% { transform: translate(70px, 44px) scale(1); } }
@keyframes press { 0%, 50% { background: var(--ink); color: var(--white); transform: none; } 55% { background: var(--o); color: var(--ink); transform: scale(0.95); } 70%, 100% { background: var(--o); color: var(--ink); transform: none; } }
.fx-sign svg { position: absolute; inset: 10% 0 0; width: 100%; height: 80%; }
.fx-sign path { fill: none; stroke: var(--ink); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 520; stroke-dashoffset: 520; animation: sign 4s var(--ease) infinite; }
@keyframes sign { 0% { stroke-dashoffset: 520; opacity: 1; } 55% { stroke-dashoffset: 0; } 85% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
.fx-sign::after { content: ''; position: absolute; left: 0; right: 30%; bottom: 8%; height: 1.5px; background: var(--ink-3); }
.fx-cv { display: grid; align-content: center; gap: 9px; }
.fx-cv i { position: relative; display: block; height: 9px; border-radius: 4px; background: oklch(0.2 0.012 270 / 0.1); overflow: hidden; }
.fx-cv i:nth-child(1) { width: 62%; } .fx-cv i:nth-child(2) { width: 88%; } .fx-cv i:nth-child(3) { width: 74%; } .fx-cv i:nth-child(4) { width: 92%; } .fx-cv i:nth-child(5) { width: 48%; }
.fx-cv i::after { content: ''; position: absolute; inset: 0; background: var(--o); transform: scaleX(0); transform-origin: left; animation: cv 4s var(--ease) infinite; }
.fx-cv i:nth-child(2)::after { animation-delay: 0.5s; } .fx-cv i:nth-child(4)::after { animation-delay: 1s; }
.fx-cv i:nth-child(1)::after, .fx-cv i:nth-child(3)::after, .fx-cv i:nth-child(5)::after { display: none; }
@keyframes cv { 0%, 10% { transform: scaleX(0); } 35%, 80% { transform: scaleX(1); } 100% { transform: scaleX(1); opacity: 0; } }
.fx-log i { position: absolute; left: 0; right: 0; height: 22px; border-radius: 6px; background: var(--white); }
.fx-log i::before { content: ''; position: absolute; left: 10px; top: 8px; width: 40%; height: 6px; border-radius: 3px; background: oklch(0.2 0.012 270 / 0.2); }
.fx-log i::after { content: ''; position: absolute; right: 10px; top: 6px; width: 34px; height: 10px; border-radius: 3px; background: var(--ink); }
.fx-log i:nth-child(1) { top: 10%; animation: lg1 3.6s var(--ease) infinite; }
.fx-log i:nth-child(2) { top: calc(10% + 30px); animation: lg2 3.6s var(--ease) infinite; }
.fx-log i:nth-child(3) { top: calc(10% + 60px); animation: lg3 3.6s var(--ease) infinite; }
@keyframes lg1 { 0% { transform: translate(-120%, 0) rotate(-6deg); } 20%, 85% { transform: none; } 100% { transform: none; opacity: 0; } }
@keyframes lg2 { 0%, 12% { transform: translate(120%, 0) rotate(5deg); } 32%, 85% { transform: none; } 100% { transform: none; opacity: 0; } }
@keyframes lg3 { 0%, 24% { transform: translate(0, 140%) rotate(-3deg); opacity: 0; } 44%, 85% { transform: none; opacity: 1; } 100% { transform: none; opacity: 0; } }

/* Секции */
.sec { padding-top: clamp(80px, 9vw, 140px); }
.sec.last { padding-top: clamp(40px, 5vw, 80px); }
.head { display: grid; grid-template-columns: minmax(140px, 1fr) 3fr; column-gap: 32px; row-gap: 14px; padding: 0 var(--g); margin-bottom: clamp(28px, 3.4vw, 48px); }
.head > :not(.lbl) { grid-column: 2; }
.head .lbl { padding-top: 0.8em; }
.head h2, .v0 h2 { font-family: var(--d); font-size: clamp(36px, 5vw, 84px); line-height: 0.95; letter-spacing: -0.025em; }
.sub { color: var(--ink-2); font-size: clamp(16px, 1.3vw, 19px); max-width: 52ch; }

/* Как работает */
.how-b { grid-auto-rows: minmax(250px, auto);
  grid-template-areas:
    "a a a a a b b b b c c c"
    "a a a a a b b b b c c c"
    "d d d d e e e e e e e e"
    "d d d d e e e e e e e e"; }
.how-b .tile { min-height: 0; }
.s-a { grid-area: a; } .s-b { grid-area: b; } .s-c { grid-area: c; } .s-d { grid-area: d; } .s-e { grid-area: e; }
.sh { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-direction: row-reverse; }
.sh b { font: 400 14px/1 var(--m); color: var(--o-ink); }
.ink-t .sh b, .orange .sh b { color: inherit; opacity: 0.7; }
.sh h3 { font-family: var(--d); font-size: clamp(28px, 2.5vw, 42px); line-height: 1; letter-spacing: -0.02em; }
.how-b p { font-size: 15.5px; color: var(--ink-2); max-width: 46ch; }
.how-b .art { min-height: 220px; }
.s-a .art { min-height: 300px; }

/* Сортировка */
.sorter { position: relative; min-height: 210px; }
.card { position: absolute; left: 6%; right: 6%; top: 50%; padding: 16px 18px; border-radius: 14px; background: var(--white); box-shadow: 0 1px 0 var(--rule); transform: translate(0, -40%) scale(0.92); opacity: 0; transition: transform 600ms var(--spring), opacity 300ms, background 300ms; }
.card.in { transform: translate(0, -50%); opacity: 1; }
.card .cm { font: 400 12px/1.2 var(--m); text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-3); }
.card .cv { position: relative; display: inline-block; margin-top: 6px; font-weight: 600; font-size: 19px; letter-spacing: -0.015em; }
.card .cv::after { content: ''; position: absolute; left: -2px; right: -2px; top: 54%; height: 2px; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform 400ms var(--ease); }
.card .row { display: flex; justify-content: space-between; align-items: baseline; margin-top: 12px; gap: 12px; }
.card .pc { font: 400 34px/1 var(--d); letter-spacing: -0.03em; }
.card .why { font: 400 13px/1.2 var(--m); color: var(--ink-2); opacity: 0; transform: translateY(6px); transition: opacity 300ms, transform 300ms; text-align: right; }
.card.ok { background: var(--o); }
.card.ok .why, .card.no .why { opacity: 1; transform: none; }
.card.ok .why, .card.ok .cm { color: oklch(0.2 0.012 270 / 0.75); }
.card.no .cv::after { transform: scaleX(1); }
.card.no .cv, .card.no .pc { color: var(--ink-3); }
.card.out-ok { transform: translate(60%, -50%) rotate(8deg) scale(0.8); opacity: 0; transition-duration: 700ms, 500ms; }
.card.out-no { transform: translate(-10%, 30%) rotate(-14deg) scale(0.85); opacity: 0; transition-duration: 700ms, 500ms; }
.tally { display: flex; gap: 22px; font: 400 13px/1 var(--m); text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-2); }
.tally b { font: 400 22px/1 var(--d); color: var(--ink); margin-right: 8px; }
.tally span:first-child b { color: var(--o-ink); }

/* Письмо набирается */
.letter p { color: var(--ink) !important; font-size: inherit !important; max-width: none !important; }
.letter { border-radius: 14px; background: var(--white); color: var(--ink); padding: 18px; font-size: 15.5px; line-height: 1.6; min-height: 260px; }
.lm { display: flex; justify-content: space-between; font: 400 11px/1 var(--m); text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-3); padding-bottom: 10px; margin-bottom: 12px; border-bottom: 1px solid var(--rule); }
#typed p + p { margin-top: 0.7em; }
#typed mark { background: linear-gradient(oklch(0.69 0.215 41 / 0.45), oklch(0.69 0.215 41 / 0.45)) left 85% / 0% 0.45em no-repeat; color: inherit; transition: background-size 700ms var(--ease); }
#typed mark.on { background-size: 100% 0.45em; }
.caret { display: inline-block; width: 2px; height: 1.05em; margin-left: 1px; vertical-align: -0.18em; background: var(--o); animation: blink 0.9s steps(2, end) infinite; }

/* Отправка */
.sent { display: grid; gap: 10px; }
.sn { display: flex; justify-content: space-between; align-items: baseline; font: 400 13px/1 var(--m); text-transform: uppercase; letter-spacing: 0.05em; }
.sn b { font: 400 26px/1 var(--d); letter-spacing: -0.02em; text-transform: none; }
.bar { height: 8px; border-radius: 4px; background: oklch(0.2 0.012 270 / 0.18); overflow: hidden; }
.bar i { display: block; height: 100%; width: 100%; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform 300ms var(--ease); }
.chans { display: flex; flex-wrap: wrap; gap: 6px; }
.chans span { font: 400 12px/1 var(--m); padding: 6px 8px; border-radius: 6px; border: 1.5px solid var(--ink); transition: background 200ms, color 200ms; }
.chans span.on { background: var(--ink); color: var(--o); }

/* Ответы */
.s-e { flex-direction: row; gap: var(--pad); }
.e-l { flex: 1 1 54%; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.e-r { flex: 1 1 46%; border-radius: 14px; overflow: hidden; }
.chat { display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; min-height: 220px; }
.msg { max-width: 92%; padding: 12px 14px; border-radius: 14px 14px 14px 4px; background: var(--beige); animation: msgIn 520ms var(--spring) both; }
.msg .mf { display: flex; justify-content: space-between; gap: 12px; font: 400 11px/1 var(--m); text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-2); margin-bottom: 6px; }
.msg .mt { font-size: 15px; line-height: 1.4; }
.msg .tg { font: 400 11px/1 var(--m); text-transform: uppercase; letter-spacing: 0.04em; padding: 3px 6px; border-radius: 4px; }
.msg .tg.inv { background: var(--o); color: var(--ink); }
.msg .tg.rej { background: var(--ink); color: var(--white); }
.msg.typing { width: 70px; padding: 14px; display: flex; gap: 5px; }
.msg.typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); animation: dot 1s infinite; }
.msg.typing i:nth-child(2) { animation-delay: 0.15s; } .msg.typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes dot { 0%, 60%, 100% { transform: none; opacity: 0.4; } 30% { transform: translateY(-4px); opacity: 1; } }
@keyframes msgIn { from { opacity: 0; transform: translateY(16px) scale(0.92); transform-origin: left bottom; } to { opacity: 1; transform: none; } }
.chat.clear .msg { animation: msgOut 400ms var(--ease) both; }
@keyframes msgOut { to { opacity: 0; transform: translateY(-10px); } }

/* Версии */
.ver-b { grid-template-areas: "v0 v0 v0 v0 v1 v1 v1 v1 v2 v2 v2 v2" "v3 v3 v3 v3 v1 v1 v1 v1 v2 v2 v2 v2"; }
.v0 { grid-area: v0; justify-content: space-between; min-height: 300px; }
.v0 h2 { font-size: clamp(30px, 2.9vw, 50px); }
.v1 { grid-area: v1; } .v2 { grid-area: v2; } .v3 { grid-area: v3; justify-content: space-between; }
.same { font-weight: 600; font-size: clamp(18px, 1.5vw, 22px); letter-spacing: -0.015em; line-height: 1.3; }
.vt { display: flex; gap: 18px; align-items: flex-start; }
.vt .k { font: 400 clamp(56px, 5vw, 88px)/0.8 var(--d); color: var(--o); }
.v2 .vt .k { color: var(--white); }
.vt h3 { font: 400 clamp(26px, 2.3vw, 38px)/1 var(--d); letter-spacing: -0.02em; }
.vt small { display: block; margin-top: 8px; font: 400 13px/1.2 var(--m); text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-2); }
.v2 .vt small { color: var(--ink); }
.ver-b dl { margin: 8px 0 auto; display: grid; }
.ver-b dt { font: 400 12px/1 var(--m); text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); padding-top: 12px; border-top: 1px solid var(--rule); }
.v2 dt { color: oklch(0.2 0.012 270 / 0.7); border-top-color: oklch(0.2 0.012 270 / 0.22); }
.ver-b dd { margin: 6px 0 14px; font-size: 16.5px; }
.ver-b .btn { align-self: flex-start; }

/* Тарифы */
.head .cur { justify-self: start; }
.cur { display: inline-flex; border-radius: 10px; overflow: hidden; box-shadow: inset 0 0 0 2px var(--ink); }
.cur button { font: 400 15px/1 var(--m); background: transparent; color: var(--ink); border: 0; min-width: 54px; min-height: 44px; cursor: pointer; }
.cur button[aria-pressed="true"] { background: var(--ink); color: var(--white); }
.price-b .tiers { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: var(--gap); }
.tier { display: flex; flex-direction: column; gap: 16px; padding: var(--pad); border-radius: var(--r); background: var(--white); }
.tier.hot { background: var(--o); }
.tier .top-l { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.tier h3 { font: 400 30px/1 var(--d); letter-spacing: -0.02em; }
.tier .badge { font: 400 12px/1 var(--m); text-transform: uppercase; letter-spacing: 0.05em; padding: 7px 9px; border-radius: 6px; background: var(--ink); color: var(--white); }
.tier .pr { font: 400 clamp(44px, 4.2vw, 68px)/1 var(--d); letter-spacing: -0.03em; }
.tier .pr small { font: 400 15px/1 var(--f); letter-spacing: 0; color: var(--ink-2); margin-left: 6px; }
.tier.hot .pr small, .tier.hot .ab, .tier.hot .fine { color: oklch(0.2 0.012 270 / 0.78); }
.tier .ab { color: var(--ink-2); }
.tier ul { list-style: none; margin: 0; padding: 16px 0 0; border-top: 1px solid var(--rule); display: grid; gap: 10px; align-content: start; flex: 1; }
.tier.hot ul { border-top-color: oklch(0.2 0.012 270 / 0.22); }
.tier li { position: relative; padding-left: 24px; font-size: 15.5px; line-height: 1.45; }
.tier li::before { content: ''; position: absolute; left: 2px; top: 6px; width: 10px; height: 5px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); }
.tier .btn { width: 100%; }
.tier.hot .btn:hover { box-shadow: 3px 3px 0 0 var(--white); }
.tier .fine { font: 400 13px/1.3 var(--m); color: var(--ink-3); text-align: center; }
.mods { grid-column: 1 / -1; flex-direction: row; gap: 32px; }
.mods .mh { flex: 1 1 28%; }
.mods h3 { font: 400 24px/1.1 var(--d); letter-spacing: -0.02em; }
.mods .mh p { color: var(--ink-2); font-size: 15px; margin-top: 10px; }
.mods #mods { flex: 1 1 72%; }
.mod { display: grid; grid-template-columns: 1.1fr 2fr auto; gap: 24px; padding: 16px 0; border-top: 1px solid var(--rule); align-items: baseline; }
.mod:first-child { border-top: 0; padding-top: 0; }
.mod b { font-weight: 600; }
.mod .d { color: var(--ink-2); font-size: 15px; }
.mod .p { font: 400 17px/1 var(--m); white-space: nowrap; }

/* Финал */
.fin { grid-column: 1 / -1; padding: clamp(28px, 5vw, 80px) var(--pad) var(--pad); gap: clamp(24px, 3vw, 44px); }
.fin h2 { font-family: var(--d); line-height: 0.88; letter-spacing: -0.035em; font-size: 14vw; }
.fin .ln { display: block; width: max-content; white-space: nowrap; }
.fin-row { display: flex; justify-content: space-between; align-items: center; gap: 20px 40px; flex-wrap: wrap; }
.fin-row p { font-size: clamp(20px, 2vw, 30px); font-weight: 500; letter-spacing: -0.02em; color: var(--ink) !important; max-width: 26ch; }

footer { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; padding: 30px var(--g) 40px; font-size: 14px; color: var(--ink-2); }
footer .colo { font: 400 13px/1.4 var(--m); }
footer nav { margin-left: auto; display: flex; gap: 22px; flex-wrap: wrap; }
footer nav a { text-decoration: none; }
footer nav a:hover { color: var(--o-ink); }

/* Скрыто до раздачи плиток */
.js .deal:not(.shown) > .tile, .js .reveal:not(.shown) > .tile, .js .reveal:not(.shown) .tier { opacity: 0; }
.nojs .deal > .tile, .nojs .reveal > .tile, .nojs .reveal .tier { opacity: 1 !important; }
.tile:not(.vis) *, .tile:not(.vis) *::before, .tile:not(.vis) *::after { animation-play-state: paused !important; }

/* Планшет */
@media (max-width: 1100px) {
  .bento { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .hero-b { height: auto; grid-template-rows: none;
    grid-template-areas: "h h h h h h" "i i i i i i" "l l l l l l" "c c c k k k" "p p p p p p"; }
  .t-h { min-height: 460px; }
  .t-i { aspect-ratio: 1.45; }
  .t-l { height: 300px; }
  .t-c, .t-k { min-height: 210px; }
  .t-p { min-height: 200px; }
  .facts-b .tile { grid-column: span 3; }
  .how-b { grid-template-areas: "a a a b b b" "c c c d d d" "e e e e e e"; grid-auto-rows: auto; }
  .how-b .tile { min-height: 520px; }
  .ver-b { grid-template-areas: "v0 v0 v0 v0 v0 v0" "v1 v1 v1 v2 v2 v2" "v3 v3 v3 v3 v3 v3"; }
  .v0 { min-height: 0; gap: 24px; }
  .mod { grid-template-columns: 1fr auto; }
  .mod .d { grid-column: 1 / -1; grid-row: 2; }
}
/* Телефон */
@media (max-width: 760px) {
  .hide-s { display: none; }
  .head { grid-template-columns: 1fr; }
  .head > :not(.lbl) { grid-column: 1; }
  .head .lbl { padding-top: 0; }
  .how-b { grid-template-areas: "a a a a a a" "b b b b b b" "c c c c c c" "d d d d d d" "e e e e e e"; }
  .how-b .tile { min-height: 0; }
  .s-e { flex-direction: column; }
  .e-r { min-height: 230px; }
  .ver-b { grid-template-areas: "v0 v0 v0 v0 v0 v0" "v1 v1 v1 v1 v1 v1" "v2 v2 v2 v2 v2 v2" "v3 v3 v3 v3 v3 v3"; }
  .price-b .tiers { grid-template-columns: 1fr; }
  .mods { flex-direction: column; gap: 16px; }
  .art canvas { cursor: auto; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .top { gap: 12px; height: 58px; }
  .top nav { gap: 14px; }
  .t-h { min-height: 0; }
  .t-h .lbl { margin-bottom: 30px; }
  .facts-b .tile { grid-column: span 6; min-height: 200px; }
  .lr { grid-template-columns: 40px minmax(0, 1fr) 34px auto; }
  .lr .p { display: none; }
  .ctas .btn { flex: 1 1 auto; }
  .btn { min-height: 50px; padding: 0 18px; }
  footer nav { margin-left: 0; }
}
@media (max-width: 420px) {
  .brand span { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}
.orange .art, .beige .art { background: var(--white); border-radius: 14px; overflow: hidden; }

/* ===================== v6: голография, отражения, 3D ===================== */
@property --ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
:root {
  --bg: oklch(0.975 0.006 80);
  --pearl: oklch(0.99 0.006 80);
  --h1: #ff5a00; --h2: #ff3d8b; --h3: #9b6bff; --h4: #2fd6c3; --h5: #ffd166;
  --holo: linear-gradient(100deg, var(--h1) 0%, var(--h2) 22%, var(--h3) 42%, var(--h4) 60%, var(--h5) 78%, var(--h1) 100%);
}
body { background: var(--bg); }
.top { position: fixed; left: 0; right: 0; background: color-mix(in oklch, var(--bg) 62%, transparent); backdrop-filter: blur(14px) saturate(1.4); }

/* Хром-голография в тексте */
.holo-text, .holo-text-s { background: var(--holo); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; animation: holoMove 7s linear infinite; }
@keyframes holoMove { to { background-position: 300% 0; } }


/* Кнопки: блик пробегает, стеклянная */
.btn.shine { overflow: hidden; }
.btn.shine::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.55) 45%, transparent 60%); transform: translateX(-120%); animation: btnShine 3.4s var(--ease) infinite 1.2s; }
@keyframes btnShine { 0%, 55% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } }
.btn.glass { background: rgba(255, 255, 255, 0.55); color: var(--ink); backdrop-filter: blur(10px) saturate(1.5); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.9), inset 0 -10px 20px -12px rgba(155, 107, 255, 0.35), 0 10px 30px -14px rgba(30, 20, 40, 0.35); }
.btn.glass:hover { box-shadow: inset 0 0 0 1.5px #fff, 3px 3px 0 0 var(--o), 0 10px 30px -14px rgba(30, 20, 40, 0.35); }

/* Первый экран с 3D-потоком конвертов */
.hero { position: relative; height: 100vh; height: 100svh; min-height: 640px; overflow: hidden; }
#gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hero::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 18%; background: linear-gradient(transparent, var(--bg)); pointer-events: none; }
.hero-in { position: relative; z-index: 2; height: 100%; display: grid; grid-template-columns: 1.35fr 1fr; grid-template-rows: 1fr auto; align-items: end; gap: 28px 48px; padding: 96px var(--g) clamp(48px, 8vh, 96px); pointer-events: none; }
.hero-in a, .hero-in .btn { pointer-events: auto; }
.tag { grid-column: 1 / -1; align-self: start; display: inline-flex; align-items: center; gap: 10px; justify-self: start; padding: 9px 14px; border-radius: 999px; background: rgba(255, 255, 255, 0.6); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.9); }
.tag .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--o); box-shadow: 0 0 0 4px oklch(0.69 0.215 41 / 0.2); animation: blink 1.4s steps(2, end) infinite; }
.h3d { font-family: var(--d); font-size: clamp(46px, 8.2vw, 148px); line-height: 0.9; letter-spacing: -0.035em; perspective: 900px; }
.h3d .ln { display: block; }
.h3d .ln > span { display: inline-block; transform-origin: 50% 100% -0.5em; }
.js .h3d .ln > span { opacity: 0; transform: rotateX(-95deg) translateY(0.2em); }
.js .h3d.go .ln > span { opacity: 1; transform: none; transition: transform 1.2s var(--spring), opacity 0.5s; }
.h3d.go .ln:nth-child(2) > span { transition-delay: 0.12s; }
.h3d.go .ln:nth-child(3) > span { transition-delay: 0.24s; }
.nojs .h3d .ln > span { opacity: 1; transform: none; }
.hero-side { display: grid; gap: 22px; max-width: 460px; justify-self: end; padding: 22px; border-radius: 22px; background: rgba(255, 255, 255, 0.5); backdrop-filter: blur(16px) saturate(1.5); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.95), 0 30px 60px -30px rgba(60, 30, 80, 0.3); }
.hero-side .lead { color: var(--ink); font-size: clamp(16px, 1.2vw, 18.5px); }
.cue { position: absolute; z-index: 2; left: 50%; bottom: 18px; transform: translateX(-50%); font: 400 12px/1 var(--m); text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-3); }

/* Голографическая карточка: рамка-перелив, наклон, блик, фольга */
.tile.holo { overflow: visible; isolation: isolate; transform-style: preserve-3d; transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform 600ms var(--ease), box-shadow 600ms var(--ease); box-shadow: 0 30px 60px -36px rgba(50, 30, 70, 0.35); }
.tile.holo.tilt { transition: transform 90ms linear, box-shadow 300ms; box-shadow: 0 40px 80px -30px rgba(50, 30, 70, 0.45); }
.tile.pearl { background: linear-gradient(160deg, #fff 0%, var(--pearl) 60%, oklch(0.975 0.012 300) 100%); }
.tile.holo::before { content: ''; position: absolute; inset: 0; z-index: 1; border-radius: inherit; padding: 1.5px; pointer-events: none; background: conic-gradient(from var(--ang), var(--h1), var(--h2), var(--h3), var(--h4), var(--h5), var(--h1)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); animation: spinAng 6s linear infinite; opacity: 0.8; }
@keyframes spinAng { to { --ang: 360deg; } }
.tile.holo > .foil { position: absolute; inset: 0; z-index: 3; border-radius: inherit; pointer-events: none; overflow: hidden; }
.tile.holo > .foil::before { content: ''; position: absolute; inset: -50%; background: repeating-linear-gradient(115deg, rgba(255, 61, 139, 0) 0%, rgba(255, 61, 139, 0.5) 2.5%, rgba(155, 107, 255, 0.5) 5%, rgba(47, 214, 195, 0.5) 7.5%, rgba(255, 209, 102, 0.5) 10%, rgba(255, 61, 139, 0) 12.5%, rgba(255, 61, 139, 0) 30%); transform: translate(var(--fx, 0%), var(--fy, 0%)); mix-blend-mode: soft-light; opacity: 0.1; transition: opacity 400ms; }
.tile.holo.tilt > .foil::before { opacity: 0.75; }
.tile.holo > .foil::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at var(--px, 50%) var(--py, 0%), rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0) 45%); mix-blend-mode: overlay; opacity: 0; transition: opacity 300ms; }
.tile.holo.tilt > .foil::after { opacity: 1; }
.ink-t > .foil::before { mix-blend-mode: color-dodge; opacity: 0; }
.ink-t.tilt > .foil::before { opacity: 0.22; }
.ink-t > .foil::after { mix-blend-mode: screen; }
.tile.holo .pop { position: absolute; pointer-events: none; transform: translateZ(70px); filter: drop-shadow(0 26px 24px rgba(60, 30, 80, 0.28)); z-index: 4; }
.bob { animation: bob 6s ease-in-out infinite; }
@keyframes bob { 0%, 100% { translate: 0 0; rotate: 0deg; } 50% { translate: 0 -12px; rotate: 4deg; } }
.tile.holo > :not(.foil):not(.pop):not(.shade):not(.lamp):not(.fimg):not(.sticker):not(.fin-sun) { position: relative; z-index: 2; }

/* Бенто «на смене» */
.live-b { position: relative; z-index: 3; grid-template-rows: repeat(2, minmax(220px, auto)); grid-template-areas: "l l l l l z z z r r r r" "l l l l l z z z c c c c"; }
.t-l { grid-area: l; min-height: 460px; }
.t-l .log { overflow: hidden; border-radius: 0 0 var(--r) var(--r); }
.t-z { grid-area: z; justify-content: flex-end; text-decoration: none; }
.t-z .pop { width: 74%; right: -8%; top: -14%; }
.t-z .zero { font-size: clamp(56px, 6vw, 104px); }
.t-r { grid-area: r; justify-content: space-between; }
.t-c { grid-area: c; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; }
.t-c .clock { font-size: clamp(48px, 5vw, 88px); }

/* 3D-барабан «Как работает» */
.drum-sec { position: relative; height: 460vh; margin-top: clamp(40px, 6vw, 100px); }
.stage { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; grid-template-columns: minmax(260px, 0.75fr) 1.6fr; align-items: center; padding: 64px var(--g) 0; overflow: hidden; }
.dhead { display: grid; gap: 16px; align-content: center; position: relative; z-index: 5; }
.dhead h2 { font-family: var(--d); font-size: clamp(40px, 5vw, 88px); line-height: 0.92; letter-spacing: -0.03em; }
.dprog { display: flex; align-items: baseline; gap: 8px; margin-top: 18px; font: 400 15px/1 var(--m); color: var(--ink-3); }
.dprog b { font: 400 54px/1 var(--d); color: var(--ink); letter-spacing: -0.03em; }
.dprog i { flex: 0 0 140px; height: 3px; margin-left: 12px; border-radius: 2px; background: var(--rule); overflow: hidden; align-self: center; }
.dprog em { display: block; height: 100%; background: var(--holo); background-size: 300% 100%; animation: holoMove 4s linear infinite; transform: scaleX(var(--p, 0.2)); transform-origin: left; }
.drum-wrap { position: relative; height: 100%; perspective: 1600px; perspective-origin: 50% 45%; }
.drum { position: absolute; left: 50%; top: 53%; width: 0; height: 0; transform-style: preserve-3d; }
.dc { --w: min(390px, 29vw); --h: min(560px, 72vh); position: absolute; width: var(--w); height: var(--h); left: calc(var(--w) / -2); top: calc(var(--h) / -2); gap: 12px; backface-visibility: hidden; }
.dc .pop { width: 50%; right: -8%; top: -10%; }
.dtop { display: flex; justify-content: space-between; font: 400 13px/1 var(--m); color: var(--ink-3); }
.dtop b { font-weight: 400; color: var(--o-ink); }
.ink-t .dtop, .ink-t .dtop b, .orange .dtop b, .orange .dtop { color: inherit; opacity: 0.75; }
.dc h3 { font-family: var(--d); font-size: clamp(30px, 2.5vw, 42px); line-height: 1; letter-spacing: -0.025em; margin-top: 24%; }
.dc p { font-size: 15px; color: var(--ink-2); }
.dc .sorter { min-height: 150px; flex: 1; }
.dc .card { left: 0; right: 0; }
.dc .letter { flex: 1; min-height: 0; font-size: 14.5px; overflow: hidden; }
.dc .chat { flex: 1; min-height: 0; overflow: hidden; }
.dc .msg .mt { font-size: 14px; }
.plats { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; align-content: flex-start; }
.plats span { font: 400 13px/1 var(--m); padding: 8px 10px; border-radius: 8px; background: rgba(255, 255, 255, 0.7); box-shadow: inset 0 0 0 1px var(--rule); transition: background 300ms, color 300ms, transform 400ms var(--spring); }
.plats span.on { background: var(--ink); color: #fff; transform: translateY(-3px); }

/* Факты, версии, тарифы, финал */
.facts-b { padding-top: clamp(40px, 5vw, 80px); }
.ver-b { grid-template-areas: "v1 v1 v1 v1 v1 v1 v2 v2 v2 v2 v2 v2"; }
.ver-b .tile { min-height: 480px; }
.price-b .tier { position: relative; box-shadow: 0 30px 60px -36px rgba(50, 30, 70, 0.35); }
.tier:not(.hot) { background: linear-gradient(160deg, #fff, var(--pearl) 60%, oklch(0.96 0.015 300)); }
.fin { overflow: visible; }
.fin-sun { position: absolute; width: min(32vw, 420px); right: 3%; top: -26%; z-index: 4; filter: drop-shadow(0 30px 30px rgba(120, 40, 0, 0.35)); pointer-events: none; }

@media (max-width: 1100px) {
  .hero-in { grid-template-columns: 1fr; }
  .hero-side { justify-self: start; }
  .live-b { grid-template-areas: "l l l l l l" "z z z r r r" "c c c c c c"; }
  .t-l { min-height: 380px; }
  .t-z, .t-r { min-height: 240px; }
  .ver-b { grid-template-areas: "v1 v1 v1 v2 v2 v2"; }
}
@media (max-width: 860px) {
  .drum-sec { height: auto; }
  .stage { position: relative; height: auto; display: block; padding-top: 0; overflow: visible; }
  .dhead { margin-bottom: 28px; }
  .dprog { display: none; }
  .drum-wrap { height: auto; perspective: none; }
  .drum { position: static; width: auto; height: auto; display: grid; gap: calc(var(--gap) * 2.4); }
  .dc { position: relative; left: auto; top: auto; width: auto; height: auto; min-height: 520px; transform: none; opacity: 1 !important; }
  .dc .pop { width: 40%; }
}
@media (max-width: 760px) {
  .ver-b { grid-template-areas: "v1 v1 v1 v1 v1 v1" "v2 v2 v2 v2 v2 v2"; }
  .live-b { grid-template-areas: "l l l l l l" "z z z z z z" "r r r r r r" "c c c c c c"; }
  .t-z .pop { width: 46%; right: -4%; top: -10%; }
  .fin-sun { width: 40vw; top: -12%; }
  .hero-in { padding-bottom: 60px; gap: 18px; }
  .hero-side { padding: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .js .h3d .ln > span { opacity: 1; transform: none; }
}

.roll span { background: var(--holo); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; animation: holoMove 7s linear infinite; padding-right: 0.05em; }
.dstat { display: flex; align-items: baseline; gap: 12px; }
.dstat b { font: 400 clamp(64px, 6vw, 104px)/1 var(--d); letter-spacing: -0.04em; }
.dstat span { font: 400 13px/1.2 var(--m); text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-2); }
.plats { flex: 0 0 auto; }
.drum-sec { margin-top: 0; }

/* ===== v6.1: шрифт Wix Madefor, меньше нагрузки ===== */
:root { --d: 'Wix Madefor Display', 'Wix Madefor Text', system-ui, sans-serif; --f: 'Wix Madefor Text', system-ui, sans-serif; }
body { font-family: var(--f); letter-spacing: -0.01em; }
.h3d, .head h2, .dhead h2, .v0 h2, .dc h3, .sh h3, .zero, .roll, .tier h3, .tier .pr, .vt h3, .vt .k, .fin h2, .dstat b, .mods h3, .sn b, .tally b, .card .pc, .dprog b, .notes li > b, .stat b { font-family: var(--d); font-weight: 800; }
.h3d { font-size: clamp(52px, 9vw, 164px); letter-spacing: -0.055em; line-height: 0.88; }
.head h2, .dhead h2 { letter-spacing: -0.05em; line-height: 0.92; }
.dc h3, .vt h3, .tier h3, .mods h3 { letter-spacing: -0.04em; }
.zero, .tier .pr, .dstat b, .roll { letter-spacing: -0.05em; }
.fin h2 { letter-spacing: -0.06em; }
.btn { font-family: var(--f); font-weight: 600; letter-spacing: -0.01em; }
/* подписи обычным текстом вместо моноширинных капсом */
.lbl, .small, .dtop, .tally, .sn, .chans span, .msg .mf, .card .cm, .lm, .tier .badge, .tier .fine, .cur button, .mod .p, .plats span, .dstat span, footer .colo, .vt small, .ver-b dt, .cue, .dprog, .card .why, .msg .tg, .thd { font-family: var(--f); text-transform: none; letter-spacing: -0.005em; }
.lbl { font-size: 14px; font-weight: 500; }
.small { font-size: 14px; }
.ver-b dt { font-size: 13px; font-weight: 500; }
.vt small, .dtop, .tally, .sn, .card .cm, .msg .mf, .lm, .dstat span, .cue { font-size: 13.5px; }
.msg .tg, .tier .badge { font-size: 12px; font-weight: 600; }
.clock { font-family: var(--d); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.04em; }
.sn b, .tally b, .dprog b, .dstat b { font-variant-numeric: tabular-nums; }

/* производительность: без размытия поверх 3D, рамки и фольга только при наведении */
.top { backdrop-filter: none; background: color-mix(in oklch, var(--bg) 92%, transparent); }
.hero-side { backdrop-filter: none; background: rgba(255, 255, 255, 0.86); }
.tag { backdrop-filter: none; background: rgba(255, 255, 255, 0.85); }
.btn.glass { backdrop-filter: none; background: rgba(255, 255, 255, 0.85); }
.tile.holo::before { animation: none; }
.tile.holo.tilt::before { animation: spinAng 3s linear infinite; }
.tile.holo > .foil { display: none; }
.tile.holo.tilt > .foil { display: block; }
.holo-text, .holo-text-s, .roll span, .dprog em { animation-timing-function: steps(80); animation-duration: 12s; }
.bob { will-change: transform; }

/* ===== v6.2: парящие плиты вместо наклона и обводки ===== */
.tile.holo { transform: none; transform-style: flat; isolation: auto; border-radius: var(--r);
  --edge: oklch(0.88 0.02 70);
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.95), inset 0 -1px 0 rgba(120, 90, 70, 0.08), 0 7px 0 -1px var(--edge), 0 8px 2px -1px rgba(80, 50, 30, 0.12);
  translate: 0 0; transition: translate 650ms var(--spring), box-shadow 400ms;
  }
.tile.holo.orange { --edge: oklch(0.55 0.19 40); box-shadow: inset 0 1.5px 0 rgba(255, 220, 190, 0.8), inset 0 -1px 0 rgba(120, 30, 0, 0.15), 0 7px 0 -1px var(--edge), 0 8px 2px -1px rgba(80, 30, 0, 0.2); }
.tile.holo.ink-t { --edge: #050507; box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.14), 0 7px 0 -1px var(--edge), 0 8px 2px -1px rgba(0, 0, 0, 0.25); }
.tile.holo::before, .tile.holo > .foil { display: none !important; }
.tile.holo.tilt { transform: none; }
@keyframes hover-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
/* тень на «полу» под плитой: уходит от курсора, при подъёме плиты бледнеет и расплывается */
.tile.holo > .shade { position: absolute; z-index: -1; left: 4%; right: 4%; top: calc(100% + 18px); height: 46px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(70, 45, 30, 0.34), rgba(70, 45, 30, 0.12) 55%, rgba(70, 45, 30, 0));
  translate: var(--sx, 0px) var(--sy, 0px); transition: translate 700ms var(--ease), scale 650ms var(--spring), opacity 500ms;
  }
@keyframes shade-float { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(0.93, 0.9); opacity: 0.82; } }
.tile.holo.orange > .shade { background: radial-gradient(closest-side, rgba(150, 50, 0, 0.32), rgba(150, 50, 0, 0.1) 55%, rgba(150, 50, 0, 0)); }
/* пятно света под курсором */
.tile.holo > .lamp { position: absolute; z-index: 1; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity 400ms;
  background: radial-gradient(circle 280px at var(--lx, 50%) var(--ly, 50%), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0)); mix-blend-mode: soft-light; }
.tile.holo.pearl > .lamp { background: radial-gradient(circle 280px at var(--lx, 50%) var(--ly, 50%), rgba(255, 190, 140, 0.3), rgba(255, 190, 140, 0)); mix-blend-mode: multiply; }
.tile.holo:hover > .lamp { opacity: 1; }
/* при наведении плита поднимается */
@media (hover: hover) {
  .tile.holo:not(.dc):hover { translate: 0 -12px; }
  .tile.holo:not(.dc):hover > .shade { scale: 1.12 1.25; opacity: 0.6; translate: var(--sx, 0px) calc(var(--sy, 0px) + 12px); }
}
.tile.holo .pop { transform: none; }
/* «пол» под рядами плит */
.bento.reveal, .price-b { position: relative; }
.bento.reveal::after, .price-b::after { content: ''; position: absolute; z-index: -2; left: 2%; right: 2%; bottom: -60px; height: 140px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, oklch(0.93 0.02 70 / 0.9), oklch(0.93 0.02 70 / 0)); }
main { position: relative; z-index: 0; }
.bento { padding-bottom: 34px; }
.dc { animation: none !important; }
.dc .lamp { display: none; }
.tile.holo { overflow: visible; }
.t-l { overflow: visible; }
@media (prefers-reduced-motion: reduce) { .tile.holo, .tile.holo > .shade { animation: none; } }
.bob { animation-duration: 9s; }

/* ===== v6.3: облака над белым полотном, чек, будильник, тарифы ===== */
:root { --bg: oklch(0.99 0.003 80); }
body { background: var(--bg); }

/* Плиты-облака: мягкие, без торца и без подъёма; тень лежит далеко внизу на «земле» */
.tile.holo, .tile.holo.orange, .tile.holo.ink-t { box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.9); translate: none !important; }
.tile.holo.orange { box-shadow: inset 0 1.5px 0 rgba(255, 220, 190, 0.7); }
.tile.holo.ink-t { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12); }
.tile.holo.pearl { background: #fff; }
.tile.holo.beige { background: oklch(0.955 0.018 75); }
.tile.holo > .shade { display: none; }
.bento { position: relative; }
.bento > .tile, .bento > .tiers { position: relative; z-index: 1; }
.ground { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.ground i { position: absolute; border-radius: 40%; background: rgba(70, 55, 45, 0.1); filter: blur(34px); will-change: transform; scale: 0.86 0.8; }
.bento.reveal::after, .price-b::after { display: none; }
.js .reveal:not(.shown) > .ground { opacity: 0; }
.ground { transition: opacity 1.2s var(--ease) 0.3s; }

/* Первый экран: без плашки, текст прямо на фоне */
.hero-in { grid-template-columns: minmax(0, 940px); grid-template-rows: 1fr auto auto; align-content: end; gap: 22px; }
.h3d { font-size: clamp(46px, 7.4vw, 132px); }
.hero-side { background: none; box-shadow: none; padding: 0; justify-self: start; max-width: 540px; gap: 22px; }
.hero-side .lead { font-size: clamp(17px, 1.3vw, 20px); color: var(--ink-2); }
.btn.glass { background: #fff; box-shadow: inset 0 0 0 1.5px var(--ink); }
.btn.glass:hover { box-shadow: inset 0 0 0 1.5px var(--ink), 3px 3px 0 0 var(--o); }

/* Журнал как кассовый чек из принтера */
.t-l { gap: 14px; overflow: hidden; }
.thd { color: var(--ink-2); }
.printer { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; }
.slot { width: 100%; height: 18px; border-radius: 10px; background: linear-gradient(#2a2622, #4a433c); box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.7); position: relative; z-index: 2; }
.tape { position: relative; z-index: 1; width: 88%; margin-top: -9px; flex: 1; min-height: 0; overflow: hidden; -webkit-mask: linear-gradient(#000 78%, transparent); mask: linear-gradient(#000 78%, transparent); }
.receipt { padding: 18px 18px 40px; background: #fffdf8; box-shadow: 0 6px 18px -8px rgba(70, 50, 30, 0.35), inset 0 10px 10px -8px rgba(0, 0, 0, 0.18); font: 400 13.5px/1.35 'PT Mono', ui-monospace, monospace; color: #2a2620; letter-spacing: 0; }
.rc { position: relative; padding: 10px 0 12px; border-bottom: 1.5px dashed rgba(40, 30, 20, 0.22); }
.rl { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; gap: 10px; }
.rl .t { color: #8a7f72; }
.rl .v { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rs { margin: 3px 0 0 56px; font-size: 12px; color: #8a7f72; }
.rc.no .v { text-decoration: line-through; text-decoration-color: rgba(40, 30, 20, 0.55); color: #8a7f72; }
.rc .stamp { position: absolute; right: 0; bottom: 7px; rotate: var(--rot, -4deg); padding: 4px 8px 3px; border: 2px solid currentColor; border-radius: 6px; font: 700 12px/1 var(--f); text-transform: uppercase; letter-spacing: 0.06em; font-style: normal; mix-blend-mode: multiply; animation: stampIn 380ms var(--spring) both; }
.rc.ok .stamp { color: var(--o); }
.rc.no .stamp { color: #9a8f84; }
@keyframes stampIn { from { scale: 2.2; opacity: 0; } to { scale: 1; opacity: 0.9; } }

/* Будильник со стрелками */
.t-c { flex-direction: row; align-items: center; justify-content: space-between; gap: 10px; overflow: visible; }
.tc-txt { display: grid; gap: 6px; align-content: center; }
.tc-txt .clock { font-size: clamp(40px, 3.6vw, 60px); }
.alarm { position: relative; flex: 0 0 auto; width: min(220px, 46%); aspect-ratio: 1; margin: -40px -10px -50px 0; }
.alarm img { width: 100%; height: 100%; filter: drop-shadow(0 18px 18px rgba(120, 50, 10, 0.25)); }
.alarm .hh, .alarm .mh { position: absolute; left: 46.6%; top: 51.2%; width: 0; height: 0; transform-origin: 0 0; transition: transform 500ms var(--spring); }
.alarm .hh::before, .alarm .mh::before { content: ''; position: absolute; left: -3px; bottom: 0; width: 6px; border-radius: 3px; background: var(--ink); }
.alarm .hh::before { height: 22%; height: calc(var(--aw, 220px) * 0.11); }
.alarm .mh::before { width: 4px; left: -2px; height: calc(var(--aw, 220px) * 0.17); background: var(--o); }
.alarm .pin { position: absolute; left: 46.6%; top: 51.2%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 2px #fff; }

/* Факты с 3D-картинками */
.facts-b .tile { min-height: 300px; justify-content: flex-end; overflow: visible; }
.fimg { position: absolute; z-index: 3; width: 58%; right: -6%; top: -18%; pointer-events: none; filter: drop-shadow(0 22px 20px rgba(60, 30, 80, 0.22)); }
.facts-b strong { font-size: 20px; letter-spacing: -0.02em; }

/* Тарифы: стикер, цена внизу рядом с кнопкой, без контурной кнопки и линий */
.tier { gap: 14px; padding: clamp(26px, 2.8vw, 42px); overflow: visible; }
.tier h3 { font-size: clamp(34px, 3vw, 52px); }
.tier .ab { font-size: 17px; max-width: 46ch; }
.tier ul { border-top: 0; padding-top: 8px; grid-template-columns: 1fr 1fr; gap: 10px 24px; }
.tier li { padding-left: 18px; }
.tier li::before { width: 7px; height: 7px; top: 8px; left: 0; border: 0; border-radius: 2px; background: var(--o); transform: none; }
.tier.hot li::before { background: var(--ink); }
.tier .tb { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-top: 18px; }
.tier .pr { border: 0; padding: 0; font-size: clamp(52px, 5vw, 86px); line-height: 0.9; }
.tier .pr small { display: block; margin: 8px 0 0 2px; }
.tier .tc { display: grid; gap: 8px; justify-items: center; }
.tier .btn { width: auto; min-width: 230px; }
.tier .fine { text-align: center; }
.sticker { position: absolute; z-index: 4; right: clamp(18px, 3vw, 44px); top: -34px; width: 104px; height: 104px; border-radius: 50%; display: grid; place-items: center; text-align: center; padding: 12px; background: var(--ink); color: #fff; font: 700 13px/1.15 var(--f); rotate: 12deg; box-shadow: 0 14px 26px -10px rgba(0, 0, 0, 0.45); animation: stick 9s ease-in-out infinite; }
@keyframes stick { 0%, 100% { rotate: 12deg; } 50% { rotate: 4deg; } }
.tier .badge { display: none; }
.mods { box-shadow: none; }

@media (max-width: 1100px) {
  .tier ul { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .hero-in { gap: 16px; }
  .fimg { width: 44%; top: -12%; }
  .facts-b .tile { min-height: 230px; }
  .alarm { width: 44%; margin: -20px -6px -30px 0; }
  .tier .tb { flex-direction: column; align-items: stretch; }
  .tier .btn { width: 100%; }
  .sticker { width: 86px; height: 86px; font-size: 11.5px; top: -26px; }
}

.tier.hot .ab { color: var(--ink) !important; }
.rs { padding-right: 108px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rc.no .rs { padding-right: 70px; }
@media (max-width: 640px) { .rs { margin-left: 0; } .rl { grid-template-columns: 42px minmax(0, 1fr) auto; } .receipt { padding: 14px 12px 40px; font-size: 12.5px; } .tape { width: 94%; } }

/* ===== v6.4: толстые глянцевые плиты на светло-сером, направленная тень ===== */
:root { --bg: #ececef; --r: 14px; }
body { background: var(--bg); }
.tile.holo, .tile.holo.pearl, .mods { --s1: #dcdce3; --s2: #d2d2da; --s3: #c7c7d0; border-radius: 14px;
  background: linear-gradient(128deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.95) 41%, rgba(255, 255, 255, 0) 52%), linear-gradient(135deg, #fdfdfe 0%, #f4f4f7 55%, #e9e9ee 100%);
  box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 rgba(140, 145, 170, 0.22),
    1px 1px 0 var(--s1), 2px 2px 0 var(--s1), 3px 3px 0 var(--s2), 4px 4px 0 var(--s2), 5px 5px 0 var(--s3), 6px 6px 0 var(--s3),
    7px 8px 3px rgba(60, 66, 95, 0.16); }
.tile.holo.orange { --s1: #e54d00; --s2: #cc4300; --s3: #b33a00;
  background: linear-gradient(128deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.32) 41%, rgba(255, 255, 255, 0) 52%), linear-gradient(135deg, #ff7d22 0%, #ff5f05 50%, #f25200 100%); }
.tile.holo.ink-t { --s1: #0c0c10; --s2: #08080b; --s3: #040406;
  background: linear-gradient(128deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.08) 41%, rgba(255, 255, 255, 0) 52%), linear-gradient(135deg, #24242b 0%, #18181d 60%, #121216 100%); }
.tile.holo.beige { --s1: #ddd6cb; --s2: #d2cabd; --s3: #c6bdaf;
  background: linear-gradient(128deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.6) 41%, rgba(255, 255, 255, 0) 52%), linear-gradient(135deg, #f6f2ec 0%, #efe9e0 100%); }
.tile.holo.orange, .tile.holo.ink-t, .tile.holo.beige { box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.35), 1px 1px 0 var(--s1), 2px 2px 0 var(--s1), 3px 3px 0 var(--s2), 4px 4px 0 var(--s2), 5px 5px 0 var(--s3), 6px 6px 0 var(--s3), 7px 8px 3px rgba(60, 66, 95, 0.18); }
/* тень на полу: чёткая, холодная, от одного источника света слева сверху */
.ground i { border-radius: 14px; background: rgba(62, 68, 98, 0.24); filter: blur(14px); scale: 1; }
.top { background: color-mix(in oklch, var(--bg) 92%, transparent); }
.hero::after { background: linear-gradient(transparent, var(--bg)); }
.dc.tile.holo { box-shadow: inset 1px 1px 0 #fff, 1px 1px 0 var(--s1), 2px 2px 0 var(--s1), 3px 3px 0 var(--s2), 4px 4px 0 var(--s2), 5px 5px 0 var(--s3), 6px 6px 0 var(--s3), 26px 34px 30px -6px rgba(60, 66, 95, 0.28); }
.receipt { box-shadow: 0 6px 14px -6px rgba(60, 66, 95, 0.3); }
.tag { background: #fff; }

/* ===== v6.5: ровный торец одним слоем, без полос; тени раздельные ===== */
.tile.holo, .tile.holo.pearl, .mods { background: linear-gradient(160deg, #ffffff 0%, #f7f7f9 60%, #f0f0f4 100%);
  box-shadow: inset 0 1px 0 #fff, 0 6px 0 0 var(--s2), 0 7px 2px 0 rgba(60, 66, 95, 0.14); }
.tile.holo.orange { background: linear-gradient(160deg, #ff7a1c 0%, #ff5f05 60%, #f45400 100%); }
.tile.holo.ink-t { background: linear-gradient(160deg, #24242b 0%, #18181d 100%); }
.tile.holo.beige { background: linear-gradient(160deg, #f6f2ec 0%, #eee8df 100%); }
.tile.holo.orange, .tile.holo.ink-t, .tile.holo.beige { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 6px 0 0 var(--s2), 0 7px 2px 0 rgba(60, 66, 95, 0.16); }
.dc.tile.holo { box-shadow: inset 0 1px 0 #fff, 0 6px 0 0 var(--s2), 0 30px 40px -12px rgba(60, 66, 95, 0.3); }
.ground i { background: rgba(62, 68, 98, 0.2); filter: blur(8px); scale: 0.92; border-radius: 16px; }

/* ===== v6.6: оранжевый только акцентом, без контуров, спокойное наведение ===== */
/* кнопки: основная оранжевая, вторая светло-серая без обводки */
.btn, .tier .btn, .orange .btn { background: var(--o); color: #fff; box-shadow: none; border-radius: 12px; }
.btn:hover, .orange .btn:hover, .orange .btn:not(.white):hover, .tier.hot .btn:hover { transform: none; box-shadow: none; background: oklch(0.63 0.2 41); }
.btn.soft { background: #e9e9ee; color: var(--ink); box-shadow: none; }
.btn.soft:hover { background: #dfdfe6; box-shadow: none; }
.btn.shine::after { display: none; }
.btn:hover svg { transform: translateX(2px); }
/* наведение: плитка на месте, 3D-предмет чуть увеличивается */
.tile.holo > .lamp { display: none !important; }
.tile.holo .pop, .tile.holo .fimg, .alarm img { transition: scale 500ms var(--ease); }
@media (hover: hover) { .tile.holo:hover .pop, .tile.holo:hover .fimg, .tile.holo:hover .alarm img { scale: 1.05; } }
/* картинка в фактах не уходит под соседнюю плитку */
.fimg { right: 4%; width: 50%; top: -16%; }
/* чек: без мелких подписей, обычный шрифт сайта с моноширинными цифрами */
.t-l { padding-top: 22px; }
.receipt { font: 400 14px/1.4 var(--f); font-variant-numeric: tabular-nums; letter-spacing: -0.005em; }
.rl .t, .rs { color: #9a9086; }
.rc .stamp { font-family: var(--f); }
/* карточки барабана: без контурных чипов, список через точки */
.chans, .plats { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.chans span, .plats span { padding: 0; border: 0; border-radius: 0; background: none !important; box-shadow: none; color: var(--ink-3); font-size: 14px; transform: none !important; position: relative; padding-left: 12px; }
.chans span::before, .plats span::before { content: ''; position: absolute; left: 0; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: #d0d0d8; transition: background 300ms; }
.chans span.on, .plats span.on { color: var(--ink); }
.chans span.on::before, .plats span.on::before { background: var(--o); }
.bar { background: #e6e6ec; height: 6px; }
.bar i { background: var(--o); }
.sn span { color: var(--ink-3); }
.card.ok { background: #fff; box-shadow: inset 3px 0 0 var(--o), 0 1px 0 var(--rule); }
.card.ok .why { color: var(--o-ink) !important; }
.card.ok .pc { color: var(--ink); }
.msg .tg.rej { background: #e6e6ec; color: var(--ink-2); }
.cur { box-shadow: none; background: #e6e6ec; padding: 3px; gap: 3px; border-radius: 12px; }
.cur button { border-radius: 9px; min-height: 38px; }
.cur button[aria-pressed="true"] { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(60, 66, 95, 0.2); }
/* версии и тарифы: светлые плитки, оранжевый только в мелочах */
.v2 .vt small, .v2 dt { color: var(--ink-3); }
.v2 dt { border-top-color: var(--rule); }
.tier.hot .pr small, .tier.hot .ab, .tier.hot .fine { color: var(--ink-2) !important; }
.tier.hot li::before { background: var(--o); }
.sticker { width: auto; height: auto; border-radius: 999px; padding: 8px 14px; background: var(--o); color: #fff; font-size: 13px; top: -14px; rotate: -4deg; box-shadow: 0 8px 16px -8px rgba(200, 70, 0, 0.6); animation: none; }
.fin h2 { color: var(--ink); text-shadow: none; }
.fin-row p { color: var(--ink-2) !important; }
.fin-sun { filter: drop-shadow(0 26px 26px rgba(60, 66, 95, 0.28)); }
.zero { color: var(--ink); }
@media (max-width: 760px) { .sticker { top: -12px; font-size: 12px; } }
.hero .btn.soft { background: #fff; }
.hero .btn.soft:hover { background: #f4f4f7; }
.dc .letter { background: #f2f2f5; }
.fin-sun { right: 3%; top: -22%; width: min(26vw, 340px); }
.fin-sun { z-index: 1; top: -32%; }
.fin h2, .fin-row { position: relative; z-index: 3; }

/* ===== v6.7: журнал агента как живой интерфейс ===== */
.t-l { gap: 18px; padding: 26px 26px 18px; overflow: hidden; }
.lg-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.lg-n { display: flex; align-items: baseline; gap: 12px; }
.lg-n b { display: inline-block; font: 800 clamp(56px, 5vw, 84px)/0.85 var(--d); letter-spacing: -0.05em; font-variant-numeric: tabular-nums; color: var(--ink); }
.lg-n span { font-size: 15px; color: var(--ink-3); max-width: 9ch; line-height: 1.2; }
.lg-now { display: flex; align-items: center; gap: 8px; min-width: 0; max-width: 55%; padding-bottom: 6px; font-size: 14px; color: var(--ink-2); }
.lg-now span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lg-now i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--o); box-shadow: 0 0 0 0 rgba(255, 90, 0, 0.4); animation: ping 1.6s ease-out infinite; }
@keyframes ping { 70% { box-shadow: 0 0 0 7px rgba(255, 90, 0, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 90, 0, 0); } }
.lg-list { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; -webkit-mask: linear-gradient(#000 82%, transparent); mask: linear-gradient(#000 82%, transparent); }
.lr2 { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows 420ms var(--ease), opacity 320ms; }
.lr2.open, .lr2.done:not(.no), .lr2.done.no.open { grid-template-rows: 1fr; opacity: 1; }
.lr2 > .in { min-height: 0; overflow: hidden; display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 11px 0; border-top: 1px solid rgba(27, 27, 33, 0.07); }
.lr2:first-child > .in { border-top: 0; }
.pl { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; font: 800 14px/1 'Arial Black', Arial, sans-serif; color: #fff; letter-spacing: -0.02em; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.15); }
.pl.hh { background: #d6001c; } .pl.li { background: #0a66c2; } .pl.th { background: #111; } .pl.hb { background: #6b7b8c; } .pl.id { background: #fff; color: #2557a7; box-shadow: inset 0 0 0 1px #e3e3ea; } .pl.dj { background: #2e2e38; font-size: 12px; }
.tx { min-width: 0; display: grid; gap: 2px; }
.tx b { font-weight: 600; font-size: 15.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color 300ms; }
.tx small { font-size: 13px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rs { display: grid; justify-items: end; gap: 5px; min-width: 120px; }
.rs .pc { font: 700 15px/1 var(--d); font-variant-numeric: tabular-nums; color: var(--ink); }
.rs .mt { width: 64px; height: 4px; border-radius: 2px; background: #e6e6ec; overflow: hidden; }
.rs .mt em { display: block; height: 100%; background: var(--ink-3); border-radius: 2px; }
.rs .tg { display: none; font-size: 13px; white-space: nowrap; max-width: 170px; overflow: hidden; text-overflow: ellipsis; }
.lr2.done .mt { display: none; }
.lr2.done .tg { display: inline-flex; align-items: center; gap: 6px; animation: tgIn 300ms var(--ease) both; }
@keyframes tgIn { from { opacity: 0; transform: translateY(4px); } }
.lr2.ok .tg { color: var(--ink); font-weight: 600; }
.lr2.ok .tg::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--o); }
.lr2.no .tg { color: var(--ink-3); }
.lr2.no .tx b, .lr2.no .rs .pc { color: var(--ink-3); }
.lr2.no .pl { opacity: 0.45; filter: grayscale(1); transition: opacity 300ms, filter 300ms; }
.lg-n { flex-wrap: wrap; }
.lg-n span { max-width: none; white-space: nowrap; }
.lg-ex { font-style: normal; font-size: 12.5px; color: var(--ink-3); padding: 2px 8px; border-radius: 6px; background: #ededf1; align-self: center; }
@media (max-width: 640px) { .t-l { padding: 20px 16px 14px; min-height: 420px; } .lg-top { flex-direction: column; align-items: flex-start; gap: 10px; } .lg-now { max-width: 100%; padding: 0; font-size: 13.5px; } .lr2 > .in { grid-template-columns: 32px minmax(0, 1fr) auto; gap: 10px; } .pl { width: 32px; height: 32px; font-size: 12px; } .rs { min-width: 0; } .lr2.done .pc { display: none; } .rs .tg { max-width: 96px; font-size: 12.5px; } .tx b { font-size: 14.5px; } }
.lr2 .rs { margin: 0; padding: 0; white-space: normal; overflow: visible; color: inherit; font-size: inherit; }

/* ===== v6.8: телефон: меньше 3D-иконки, нормальные отступы между плитами ===== */
@media (max-width: 760px) {
  .bento, .price-b { gap: 22px; row-gap: 22px; }
  .price-b .tiers { gap: 22px; }
  .drum { gap: 26px !important; }
  .facts-b .tile { min-height: 170px; padding-top: 22px; }
  .fimg { width: 30%; right: 5%; top: -10px; }
  .dc .pop { width: 30%; right: 2%; top: -14px; }
  .dc { min-height: 0 !important; }
  .dc h3 { margin-top: 56px; }
  .t-z .pop { width: 34%; right: 2%; top: -14px; }
  .alarm { width: 34%; margin: -10px 0 -16px 0; }
  .fin-sun { width: 30vw; top: -40px; right: 4%; }
  .sticker { top: -16px; right: 16px; }
  .sec { padding-top: 64px; }
}

/* ===== v6.9: ленивое появление ===== */
.dtop { justify-content: flex-start; }
.dprog { margin-top: 26px; }
.dprog i { margin-left: 0; flex-basis: 180px; }
.js .ld { opacity: 0; transform: translateY(46px); transition: opacity 800ms ease-out, transform 1000ms cubic-bezier(.16, 1, .3, 1); transition-delay: var(--ldd, 0ms); }
.js .ld.in { opacity: 1; transform: none; }
.js .ldi { opacity: 0; transform: translateY(36px) scale(.6) rotate(-12deg); transition: opacity 500ms ease-out, transform 1100ms cubic-bezier(.2, 1.45, .4, 1); }
.js .ldi.in { opacity: 1; transform: none; }
.nojs .ld, .nojs .ldi { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .ld, .js .ldi { opacity: 1; transform: none; transition: none; } }

/* ===== v6.10: телефон и планшет: без движущихся размытых теней и покачивания, плавная прокрутка ===== */
@media (max-width: 760px), (hover: none) {
  .ground { display: none; }
  .tile.holo, .tile.holo.pearl, .mods { box-shadow: inset 0 1px 0 #fff, 0 6px 0 0 var(--s2, #d2d2da), 0 22px 26px -16px rgba(60, 66, 95, 0.32); }
  .tile.holo.orange, .tile.holo.ink-t, .tile.holo.beige { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 6px 0 0 var(--s2), 0 22px 26px -16px rgba(60, 66, 95, 0.32); }
  .bob, .sticker { animation: none !important; }
  .top { backdrop-filter: none; }
  .lg-list { -webkit-mask: none; mask: none; }
  html { scroll-behavior: auto; }
}