/* Лендинг сервиса. Мир тот же, что у сервиса: светлый корпус, чёрные табло, один оранжевый огонёк.
   Подпись страницы — табло: «как это работает» и финал стоят на чёрном дисплее, как в самом сервисе.
   Картинки — настоящие снимки экрана сервиса. Радиусы: панели 14, кнопки 10, клавиши 6. */

html{scroll-behavior:smooth;scroll-padding-top:84px}
body{background:var(--chassis)}
img{display:block;max-width:100%;height:auto}
figure{margin:0}
h1,h2,h3{margin:0;color:var(--ink);text-wrap:balance}
p{margin:0}
main{max-width:1240px;margin:0 auto;padding:0 24px}
section{padding:88px 0 0}

/* ---------- клавиши — те же, что в сервисе */
.key{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 16px;border-radius:10px;border:0;
  background:var(--deck2);color:var(--ink);text-decoration:none;font:500 14px/1 var(--sans);white-space:nowrap;cursor:pointer;
  box-shadow:inset 0 0 0 1px var(--line2),0 2px 0 rgba(18,18,17,.16);transition:transform .06s,background .12s}
.key:hover{background:#fff}
.key:active{transform:translateY(1px);box-shadow:inset 0 0 0 1px var(--line2),0 1px 0 rgba(18,18,17,.16)}
.key.orange{background:var(--accent);color:var(--accent-ink);box-shadow:inset 0 0 0 1px rgba(0,0,0,.12),0 2px 0 #b83f00}
.key.orange:hover{background:var(--accent2)}
.key.big{height:48px;padding:0 22px;font-size:15px;border-radius:12px}

/* ---------- шапка */
.nav{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:28px;height:64px;padding:0 24px;
  background:rgba(214,212,205,.88);backdrop-filter:saturate(1.2) blur(10px);-webkit-backdrop-filter:saturate(1.2) blur(10px);
  box-shadow:0 1px 0 var(--line)}
.brand{display:flex;align-items:center;gap:10px;font:600 16px/1 var(--sans);color:var(--ink);text-decoration:none}
.brand svg{width:30px;height:30px}
.brand .wm{font-size:21px}
.foot .wm{font-size:16px;color:var(--ink2)}
.nav nav{display:flex;gap:22px;flex:1}
.nav nav a{font:500 14px/1 var(--sans);color:var(--ink2);text-decoration:none}
.nav nav a:hover{color:var(--ink)}
.navgo{display:flex;align-items:center;gap:16px;margin-left:auto}
.navgo .signin{font:500 14px/1 var(--sans);color:var(--ink2);text-decoration:none;padding:10px 4px}
.navgo .signin:hover{color:var(--ink)}

/* ---------- первый экран */
.hero{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:36px 48px;align-items:start;align-content:center;padding-top:56px;min-height:min(calc(100dvh - 64px),860px)}
.hero h1{grid-column:1/-1;max-width:24ch;font:700 clamp(38px,5.2vw,72px)/1.02 var(--sans);letter-spacing:-.04em}
.hero-copy{padding-top:6px}
.lead{max-width:34ch;font:400 19px/1.5 var(--sans);color:var(--ink2)}
.ctas{display:flex;gap:10px;flex-wrap:wrap;margin-top:32px}
.hero-shot{border-radius:16px;overflow:hidden;background:var(--chassis);
  box-shadow:0 0 0 1px rgba(18,18,17,.14),0 30px 60px -24px rgba(60,52,40,.45),0 10px 20px -12px rgba(60,52,40,.3);
  animation:rise .7s cubic-bezier(.16,1,.3,1) both}
@keyframes rise{from{opacity:0;transform:translateY(18px)}}

/* ---------- как это работает: табло */
.how h2,.export h2,.final h2{font:700 clamp(28px,3vw,40px)/1.1 var(--sans);letter-spacing:-.025em;max-width:22ch}
.board{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;margin-top:32px;border-radius:var(--r);overflow:hidden;background:#000;
  box-shadow:inset 0 0 0 1px #000,0 1px 0 rgba(255,255,255,.4)}
.board .cell{display:flex;flex-direction:column;gap:12px;padding:26px 24px 22px;background:var(--scr);
  background-image:radial-gradient(rgba(255,255,255,.028) 1px,transparent 1.2px);background-size:5px 5px}
.board h3{font:600 20px/1.2 var(--sans);color:var(--sink)}
.board p{font:400 15px/1.5 var(--sans);color:#b6b2a8;flex:1}
.lcd{position:relative;display:flex;align-items:center;gap:9px;margin-top:6px;padding-top:14px;border-top:1px solid #2c2b28;font:500 13px/1.35 var(--mono);color:var(--sink);font-variant-numeric:tabular-nums}
/* ход работы: тонкая полоса по верхней кромке строки табло */
.lcd .bar{position:absolute;left:0;top:-1px;height:1px;width:calc(var(--p,0)*100%);background:var(--accent);transition:width .9s linear}
.lcd .bar.reset{transition:none}
.led{width:8px;height:8px;border-radius:50%;flex:none}
.led{background:#3fbf7f}
.led.run{background:var(--accent);animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:.35}}
.note{margin-top:12px;font:400 13px/1.4 var(--sans);color:var(--muted)}

/* ---------- слово к звуку: широкая полоса */
/* настоящий экран на фоне страницы: у дисплея и текста свои скругления, вторая рамка не нужна; текст снизу уходит в фон */
.wide figure{-webkit-mask-image:linear-gradient(#000 78%,transparent);mask-image:linear-gradient(#000 78%,transparent)}
.wide-copy{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;margin-top:28px}
.wide h2,.proof h2,.sound h2,.trust h2{font:700 clamp(26px,2.6vw,36px)/1.12 var(--sans);letter-spacing:-.025em}
.wide p,.proof-copy > p,.sound p,.trust p{font:400 17px/1.55 var(--sans);color:var(--ink2);max-width:58ch}

/* ---------- вычитка */
.proof{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:48px;align-items:center}
.proof-copy > p{margin-top:16px}
.keys{display:grid;gap:10px;margin:26px 0 0}
.keys div{display:grid;grid-template-columns:132px 1fr;align-items:center;gap:12px}
.keys dt{display:flex;gap:4px}
.keys dd{margin:0;font:400 15px/1.3 var(--sans);color:var(--ink2)}
kbd{display:inline-flex;align-items:center;justify-content:center;min-width:30px;height:28px;padding:0 8px;border-radius:6px;background:var(--deck2);
  box-shadow:inset 0 0 0 1px var(--line2),0 2px 0 rgba(18,18,17,.16);font:500 12.5px/1 var(--mono);color:var(--ink)}
.proof figure{border-radius:var(--r);overflow:hidden;background:var(--paper);box-shadow:0 0 0 1px var(--line2),0 20px 40px -26px rgba(60,52,40,.5)}

/* ---------- возможности: разные клетки, разный материал */
.grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.grid article{display:flex;flex-direction:column;gap:10px;padding:24px;border-radius:var(--r);background:var(--deck);box-shadow:inset 0 0 0 1px var(--line)}
.grid h3{font:600 20px/1.2 var(--sans);letter-spacing:-.01em}
.grid p{font:400 15px/1.5 var(--sans);color:var(--ink2)}
.g-long{grid-column:span 2;background:var(--scr) !important;box-shadow:inset 0 0 0 1px #000 !important}
.g-long h3{color:var(--sink)}.g-long p{color:#b6b2a8}
.big-lcd{font:600 56px/1 var(--mono);letter-spacing:-.03em;color:var(--sink);margin-bottom:auto;padding-bottom:28px}
.g-spk{grid-column:span 4}
.g-spk figure{border-radius:10px;overflow:hidden;margin-bottom:8px;box-shadow:0 0 0 1px #000}
.g-find,.g-chap,.g-mic{grid-column:span 2}
.findbar-demo{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px;border-radius:10px;background:var(--deck2);box-shadow:inset 0 0 0 1px var(--line2);margin-bottom:auto}
.findbar-demo .fq{flex:1;min-width:80px;padding:7px 10px;border-radius:7px;background:#fff;box-shadow:inset 0 0 0 1.5px var(--accent);font:400 14px/1 var(--sans)}
.findbar-demo .fc{font:500 12px/1 var(--mono);color:var(--ink2)}
.findbar-demo .fw{padding:6px 8px;border-radius:6px;background:var(--ink);color:var(--paper);font:500 12px/1 var(--sans)}
.g-find .findbar-demo{margin-bottom:14px}
.yt{margin:0 0 14px;padding:14px 16px;border-radius:10px;background:var(--scr);color:var(--sink);font:500 13px/1.6 var(--mono);white-space:pre;overflow:auto}
.g-mic{background:var(--paper) !important}
.recdot{width:56px;height:56px;border-radius:50%;margin-bottom:auto;display:grid;place-items:center;background:var(--deck2);box-shadow:inset 0 0 0 2px var(--ink),0 3px 0 rgba(0,0,0,.15)}
.recdot:after{content:"";width:22px;height:22px;border-radius:50%;background:var(--rec)}
.g-mic h3{margin-top:22px}

/* ---------- звук */
.sound{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:48px;align-items:center}
.sound-copy p{margin-top:16px}
.ab{padding:18px;border-radius:var(--r);background:var(--scr);color:var(--sink);box-shadow:inset 0 0 0 1px #000}
.ab-top{display:flex;justify-content:space-between;align-items:baseline;font:500 13px/1 var(--sans);color:var(--sdim)}
.ab-top b{font:600 20px/1 var(--mono);color:var(--sink)}
.ab-keys{display:grid;grid-template-columns:1fr 1fr;margin:16px 0 14px;border-radius:9px;overflow:hidden;box-shadow:inset 0 0 0 1px #34332f}
.ab-keys span{padding:12px;text-align:center;font:500 14px/1 var(--sans);color:var(--sdim)}
.ab-keys span.on{background:rgba(47,212,138,.16);color:#6ff0b4}
.ab p{font:400 14px/1.4 var(--sans);color:#b6b2a8}
.ab-wrap .note{margin-top:10px}

/* ---------- выгрузка */
.fmts{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:8px;margin:32px 0 0;padding:0;list-style:none}
.fmts li{display:flex;flex-direction:column;gap:8px;padding:16px 12px 14px;border-radius:10px;background:var(--deck2);box-shadow:inset 0 0 0 1px var(--line2),0 2px 0 rgba(18,18,17,.12)}
.fmts b{font:600 16px/1 var(--mono);color:var(--ink)}
.fmts li:nth-child(2) b{color:var(--accent-text)}
.fmts span{font:400 13px/1.3 var(--sans);color:var(--muted)}
.export .sub{margin-top:16px;font:400 16px/1.5 var(--sans);color:var(--ink2);max-width:60ch}

/* ---------- как устроено */
.trust{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:48px;align-items:center}
/* скриншот на том же фоне, что страница: без рамки — у блоков внутри свои скругления, второе было бы лишним */
.trust figure{margin:0}
.trust-copy p{margin-top:16px}
.facts{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:14px;max-width:58ch}
.facts li{font:400 15.5px/1.5 var(--sans);color:var(--ink2);padding-left:16px;border-left:2px solid var(--line2)}
.facts b{color:var(--ink);font-weight:600}

/* ---------- финал — на табло */
.final{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;margin:88px 0 0;padding:40px;border-radius:var(--r);background:var(--scr);
  background-image:radial-gradient(rgba(255,255,255,.028) 1px,transparent 1.2px);background-size:5px 5px;box-shadow:inset 0 0 0 1px #000}
.final h2{color:var(--sink)}
.foot{display:flex;gap:24px;flex-wrap:wrap;max-width:1240px;margin:0 auto;padding:40px 24px 56px;font:400 14px/1 var(--sans);color:var(--muted)}
.foot a{color:var(--ink2);margin-left:auto}

/* ---------- узкие экраны: каждая раскладка складывается явно */
@media (max-width:1024px){
  .nav nav{display:none}
  .hero,.proof,.sound,.trust{grid-template-columns:minmax(0,1fr);gap:32px}
  .hero{min-height:0;padding-top:40px}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g-long,.g-find,.g-chap,.g-mic{grid-column:span 1}
  .g-spk{grid-column:span 2}
  .fmts{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:640px){
  main{padding:0 16px}
  .nav{padding:0 16px;gap:12px}
  .nav .key{height:36px;padding:0 12px;font-size:13px}
  section{padding-top:64px}
  .lead{font-size:17px}
  .board{grid-template-columns:minmax(0,1fr)}
  .wide-copy{grid-template-columns:minmax(0,1fr);gap:12px}
  .grid{grid-template-columns:minmax(0,1fr)}
  .g-long,.g-find,.g-chap,.g-mic,.g-spk{grid-column:span 1}
  .keys div{grid-template-columns:110px 1fr}
  .fmts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .final{padding:28px 20px}
  .ctas .key{flex:1 1 auto}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.hero-shot{animation:none}
  .led.run{animation:pulse 1.6s ease-in-out infinite}.lcd .bar{transition:none}}
@keyframes pulse{50%{opacity:.4}}