/* №476 — главная в дизайне варианта Г (ветка design, g3; слово David 09.11.2026: «готовь переезд на боевой сайт нового дизайна»).
   Шапка, подвал и окно «Скачать» — общие со всем сайтом (style.css); здесь — только середина страницы, всё внутри main.hg.
   Правило варианта: на каждом экране одна мысль и одна картинка. Ролики — фоном во всю ширину, слова поверх. */
.hg{--bg:#0f1b2d;--bg2:#162035;--card:#14223a;--line:#22324e;--muted:#9aa8c0;--soft:#d3dbe8;--accent:#f0a500;font-size:17px;line-height:1.6}
.hg *{box-sizing:border-box}
.hg .wrap{padding-left:max(20px,calc((100% - 1180px)/2));padding-right:max(20px,calc((100% - 1180px)/2))}
.hg section{padding-top:88px;padding-bottom:88px}
.hg .kick{color:var(--accent);font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.hg h2{font-size:clamp(28px,3.2vw,44px);line-height:1.12;letter-spacing:-.025em;margin:12px 0 16px;max-width:22ch;font-weight:800}
.hg .sub{color:var(--muted);font-size:19px;max-width:56ch;margin:0}
.hg .center{text-align:center}.hg .center h2,.hg .center .sub{margin-left:auto;margin-right:auto}
.hg .btns{display:flex;gap:12px;flex-wrap:wrap}
.hg .btns .btn{white-space:nowrap}  /* надпись кнопки — в одну строку; не помещаются рядом — вторая кнопка ниже */
.hg .btn-lg{padding:15px 28px;font-size:17px}

/* первый экран: ролик во всю ширину, слова поверх — слева внизу, где в кадре клавиши и дальний край зала; экран сцены и руки
   остаются открытыми; под словами кадр притемнён */
.hg .hero{position:relative;isolation:isolate;overflow:hidden;min-height:calc(100svh - 64px);display:flex;align-items:flex-end;
  padding-top:64px;padding-bottom:72px;background:#c9b9a0}
.hg .hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:0% 0%;z-index:-2;display:block}
.hg .hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(90% 118% at 0% 100%,rgba(9,14,24,.9) 0%,rgba(9,14,24,.76) 44%,rgba(9,14,24,0) 76%),
    linear-gradient(0deg,var(--bg) 0%,rgba(15,27,45,0) 14%)}
.hg .hero .txt{max-width:560px;text-shadow:0 2px 16px rgba(0,0,0,.5)}
.hg .badge{color:var(--accent);font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.hg h1{font-size:clamp(40px,5vw,64px);line-height:1.05;letter-spacing:-.03em;margin:16px 0 20px;font-weight:800}
.hg h1 span{color:var(--accent)}
.hg .lead{font-size:clamp(18px,1.5vw,21px);color:var(--soft);margin:0 0 30px;max-width:30ch}
.hg .small{margin-top:16px;color:var(--muted);font-size:14px}

/* схема: три устройства → три экрана, линии от устройства к его экранам */
.hg .how{background:var(--bg2)}
.hg .flow{position:relative;display:grid;grid-template-columns:1fr auto 1fr;gap:28px;align-items:center;margin-top:52px}
.hg .flow .gap{width:150px}
.hg .col{display:grid;gap:16px}
.hg .item{display:flex;align-items:center;gap:18px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px 18px}
.hg .item b{font-size:18px}
.hg .item .nm{display:flex;flex-direction:column;gap:3px}
.hg .item .to{font-size:14px;font-weight:600;color:var(--muted)}
.hg [data-src="op"] .to{color:var(--accent)}.hg [data-src="lead"] .to{color:#4fd18b}.hg [data-src="prea"] .to{color:#6fb1ff}
.hg .ico{flex:0 0 auto;width:64px;height:44px;position:relative}
.hg .ico.laptop::before{content:"";position:absolute;left:8px;right:8px;top:2px;height:30px;border:3px solid #9fb3d9;border-radius:4px}
.hg .ico.laptop::after{content:"";position:absolute;left:0;right:0;bottom:4px;height:5px;background:#9fb3d9;border-radius:0 0 4px 4px}
.hg .ico.tablet::before{content:"";position:absolute;left:12px;right:12px;top:0;bottom:0;border:3px solid #9fb3d9;border-radius:6px}
.hg .mini{flex:0 0 auto;width:112px;aspect-ratio:16/9;background:#000;border:1px solid #2a3550;border-radius:6px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;container-type:inline-size;text-align:center;padding:4px}
.hg .mini .l{font-size:8.5cqw;font-weight:700;line-height:1.5;color:#fff}
.hg .mini .c{color:var(--accent);font-size:7cqw;font-weight:800;line-height:1}
.hg .mini .r{color:var(--accent);font-size:7cqw;font-weight:700}
.hg .wires{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.hg .wires path{fill:none;stroke-width:2.5;stroke-linecap:round}
/* показ по очереди: устройство загорается своим цветом, от него прорисовываются дорожки, на конце загораются его экраны */
.hg .flow{--hl:#f0a500}
.hg .flow .item{transition:opacity .45s ease,border-color .45s ease,box-shadow .45s ease}
.hg .flow.anim .item.dim{opacity:.38}
.hg .flow.anim .item.on{border-color:var(--hl);box-shadow:0 0 0 1px var(--hl),0 14px 34px -16px var(--hl)}
.hg .flow.anim .item.on .ico::before,.hg .flow.anim .item.on .ico::after{border-color:var(--hl)}
.hg .flow.anim .item.on .ico.laptop::after{background:var(--hl)}
.hg .flow.anim .wires path{transition:stroke-dashoffset .9s cubic-bezier(.45,.05,.35,1)}
.hg .flow.anim .wires g{transition:opacity .35s ease}
.hg .flow.anim .wires g.off{opacity:0}
.hg .flow.anim .wires circle{opacity:0;transition:opacity .25s ease}
.hg .flow.anim .wires g.go circle{opacity:1;transition-delay:.75s}
.hg .flow .item[data-src]{cursor:pointer}

/* «Возможности» роликом фоном: слова поверх — там, где в кадре зал, а не планшет, рука и экран */
.hg .feats-head{padding-bottom:44px}
.hg .bgfeat{position:relative;isolation:isolate;overflow:hidden;width:100%;aspect-ratio:1916/1080;max-height:calc(100svh - 24px);
  min-height:560px;display:flex;align-items:center;background:#0a0e16;direction:ltr}
.hg .bgfeat+.bgfeat{margin-top:6px}
.hg .bgfeat video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;display:block}
.hg .bgfeat::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none}
.hg .bgfeat.right::before{background:linear-gradient(270deg,rgba(9,14,24,.88) 0%,rgba(9,14,24,.74) 20%,rgba(9,14,24,0) 36%)}
.hg .bgfeat.left::before{background:linear-gradient(90deg,rgba(9,14,24,.88) 0%,rgba(9,14,24,.74) 24%,rgba(9,14,24,0) 39%)}
.hg .bgtxt{width:100%;display:flex;padding:0 6vw}
.hg .bgfeat.right .bgtxt{justify-content:flex-end}
.hg .bgtxt .t{max-width:24vw;text-shadow:0 2px 14px rgba(0,0,0,.6)}
.hg .bgfeat.left .bgtxt .t{max-width:27vw}
.hg .bgtxt h3,.hg .feat h3{font-size:clamp(24px,2.2vw,36px);line-height:1.2;margin:0 0 12px;letter-spacing:-.02em;font-weight:800}
.hg .bgtxt p{color:var(--soft);font-size:clamp(17px,1.25vw,20px);margin:0}
.hg .ed{display:inline-block;margin-top:14px;font-size:13px;color:#9fb3d9;border:1px solid #33456a;border-radius:6px;padding:2px 8px}
.hg .bgtxt .ed{background:rgba(9,14,24,.55);text-shadow:none}

/* аккорды — на сцену и в телефоны */
.hg .feat{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:64px;align-items:center}
.hg .feat p{color:var(--soft);font-size:19px;margin:0}
.hg .chords{display:grid;grid-template-columns:1fr 34%;gap:22px;align-items:center;background:#0a0e16;border-radius:22px;padding:28px;box-shadow:0 0 0 1px #2c3038}
.hg .chords .cs{background:#000;border:1px solid #2a3550;border-radius:10px;padding:46px 18px 18px;position:relative;container-type:inline-size;text-align:center}
.hg .chords .lbl{position:absolute;top:12px;left:14px;font-size:clamp(9px,2.6cqw,13px);font-weight:700;letter-spacing:.12em;color:#7d8aa5;text-transform:uppercase;z-index:2}
.hg .chords .cl{font-size:7.4cqw;font-weight:700;line-height:2.8;white-space:normal}
.hg .chords .phone{background:#15171c;border-radius:22px;padding:8px 6px;box-shadow:0 0 0 1px #2c3038}
.hg .chords .phs{background:#000;border-radius:16px;aspect-ratio:9/17;display:flex;flex-direction:column;justify-content:center;position:relative;
  container-type:inline-size;text-align:center;padding:30px 8px 12px}
.hg .chords .phs .cl{font-size:10.5cqw;line-height:3;white-space:nowrap}
.hg .chords .capochip{position:absolute;top:10px;left:0;right:0;text-align:center;font-size:11cqw;color:#9fb3d9}
.hg .chords .capochip b{color:var(--accent)}
.hg i[data-c]{position:relative;display:inline-block;width:0;font-style:normal}
.hg i[data-c]::before{content:attr(data-c);position:absolute;bottom:1.15em;left:-.1em;color:var(--accent);font-size:.82em;font-weight:800;line-height:1}
.hg .more{margin-top:56px;text-align:center}.hg .more a{color:var(--accent);font-weight:700;text-decoration:none;font-size:18px}

/* версии */
.hg .eds{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:40px}
.hg .edc{display:block;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:26px;color:inherit;text-decoration:none;transition:border-color .2s ease}
.hg .edc:hover{border-color:#3a5078}
.hg .edc.hot{border-color:var(--accent)}
.hg .edc h3{margin:0;font-size:20px;font-weight:800}
.hg .edc .pr{font-size:clamp(30px,3vw,38px);font-weight:800;margin:10px 0 2px}.hg .edc .pr small{font-size:16px;color:var(--muted);font-weight:600}
.hg .edc .nt{color:var(--muted);font-size:15px}

/* от автора, призыв */
.hg .author{max-width:780px;margin:0 auto;text-align:center}
.hg .author blockquote{margin:14px 0 0;font-size:clamp(19px,1.8vw,23px);line-height:1.6;color:var(--soft);font-style:italic}
.hg .sig{margin-top:16px;color:var(--muted)}.hg .sig b{color:#fff}.hg .sig b span{color:var(--accent)}
.hg .goal{margin-top:36px;color:#e6dcc4;font-size:17px}
.hg .cta{text-align:center;background:var(--bg2)}
.hg .cta h2{max-width:none}.hg .cta p{color:var(--muted);font-size:19px;margin:0 0 28px}
.hg .cta .btns{justify-content:center}

@media (max-width:1100px){
  .hg .bgfeat{display:block;aspect-ratio:auto;max-height:none;min-height:0;background:none}
  .hg .bgfeat video{position:relative;inset:auto;height:auto;aspect-ratio:1916/1080}
  .hg .bgfeat::before{display:none}
  .hg .bgtxt,.hg .bgfeat.right .bgtxt{display:block;padding:22px 20px 40px}
  .hg .bgtxt .t,.hg .bgfeat.left .bgtxt .t{max-width:none;text-shadow:none}}
@media (max-width:1000px){
  .hg .lead{max-width:none}
  /* узкий экран: ролик сверху во всю ширину, к низу уходит в цвет страницы; заголовок ложится на нижнюю часть ролика */
  .hg .hero{display:block;min-height:0;padding-top:42vw;padding-bottom:40px;background:none}
  .hg .hero video{bottom:auto;height:62vw;object-position:50% 30%}
  .hg .hero::before{bottom:auto;height:calc(62vw + 1px);background:linear-gradient(180deg,rgba(15,27,45,0) 40%,rgba(15,27,45,.75) 75%,var(--bg) 100%)}
  .hg .hero .txt{max-width:none}
  .hg .wires,.hg .flow .gap{display:none}
  .hg .flow{grid-template-columns:1fr;gap:18px}
  .hg .feat{grid-template-columns:1fr;gap:28px}}
@media (max-width:640px){
  .hg .btns .btn{flex:1 1 auto;padding:14px 16px;font-size:16px}
  .hg section{padding-top:60px;padding-bottom:60px}
  .hg .eds{grid-template-columns:1fr}
  .hg .chords{padding:16px;gap:12px}.hg .mini{width:96px}.hg .item{padding:12px 14px;gap:14px}.hg .item b{font-size:16px}}
/* шире 1920 ролики не растягиваются: по сторонам поля, углы скруглены, слова стоят, как на 1920 */
@media (min-width:1960px){
  .hg .hero{max-width:1920px;margin-inline:auto;border-radius:0 0 22px 22px;padding-left:370px;padding-right:370px;min-height:min(calc(100svh - 64px),1080px)}
  .hg .bgfeat{max-width:1920px;margin-inline:auto;border-radius:22px}
  .hg .bgfeat+.bgfeat{margin-top:16px}
  .hg .bgtxt{padding:0 115px}.hg .bgtxt .t{max-width:461px}.hg .bgfeat.left .bgtxt .t{max-width:518px}}

/* иврит: страница справа налево, но ролики не зеркалятся — слова остаются там же, где в кадре зал; аккорды и мини-экраны —
   английская песня, слева направо */
[dir="rtl"] .hg .hero{direction:ltr}
[dir="rtl"] .hg .hero .txt{direction:rtl;text-align:right}
[dir="rtl"] .hg .bgtxt .t{direction:rtl;text-align:right}
[dir="rtl"] .hg .chords .lbl{direction:rtl}

/* окно «Скачать» — как было на главной */
#dl-modal{display:none;position:fixed;inset:0;background:rgba(4,10,22,0.88);z-index:500;align-items:center;justify-content:center;padding:20px}
#dl-modal.open{display:flex}
.dl-modal-box{background:var(--navy);border:1px solid rgba(255,255,255,0.1);border-radius:18px;padding:40px 36px 36px;max-width:900px;width:100%;position:relative;max-height:90vh;overflow-y:auto}
.dl-modal-close{position:absolute;top:14px;right:18px;background:none;border:none;color:var(--gray);font-size:1.5rem;cursor:pointer;line-height:1;padding:4px 8px}
.dl-modal-close:hover{color:#fff}
.dl-modal-box h3{font-size:1.4rem;font-weight:800;text-align:center;margin-bottom:6px}
.dl-modal-sub{text-align:center;color:var(--gray);font-size:0.85rem;margin-bottom:30px}
.dl-editions{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.dl-ed{background:var(--navy2);border:1px solid rgba(255,255,255,0.08);border-radius:12px;padding:22px;display:flex;flex-direction:column}
.dl-ed.featured{border-color:var(--gold)}
.dl-ed-popular{font-size:0.68rem;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;color:var(--gold);margin-bottom:6px}
.dl-ed-name{font-size:0.75rem;font-weight:600;color:var(--gray);text-transform:uppercase;letter-spacing:0.08em;margin-bottom:8px}
.dl-ed-price{font-size:2rem;font-weight:800;line-height:1;margin-bottom:4px}
.dl-ed-note{font-size:0.76rem;color:var(--gray);margin-bottom:16px}
.dl-ed-list{list-style:none;font-size:0.84rem;flex:1;margin-bottom:18px}
.dl-ed-list li{padding:5px 0;border-bottom:1px solid rgba(255,255,255,0.04);color:var(--gray);display:flex;gap:8px;align-items:flex-start}
.dl-ed-list li::before{content:"✓";color:var(--green);flex-shrink:0;margin-top:1px}
.dl-ed-list li:last-child{border-bottom:none}
.dl-ed-platform{font-size:0.75rem;color:var(--gray);margin-bottom:14px}
@media (max-width:680px){.dl-editions{grid-template-columns:1fr}.dl-modal-box{padding:28px 20px}}

/* кнопка «Музыка»: сначала выключена, в правом нижнем углу; на узком экране — только значок */
.dw-music{position:fixed;z-index:60;right:calc(16px + env(safe-area-inset-right,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));
  display:inline-flex;align-items:center;gap:10px;height:46px;padding:0 18px 0 14px;border-radius:999px;cursor:pointer;
  background:rgba(15,27,45,.84);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.2);color:#fff;font:600 15px/1 Inter,"Segoe UI",system-ui,-apple-system,sans-serif;
  box-shadow:0 10px 30px -12px rgba(0,0,0,.6);transition:border-color .25s ease,background .25s ease}
[dir="rtl"] .dw-music{right:auto;left:calc(16px + env(safe-area-inset-left,0px))}
.dw-music:hover{border-color:rgba(255,255,255,.4)}
.dw-music:focus-visible{outline:2px solid #f0a500;outline-offset:3px}
.dw-music[aria-pressed="true"]{border-color:#f0a500}
.dw-music .eq{display:inline-flex;align-items:flex-end;gap:3px;width:18px;height:16px}
.dw-music .eq i{display:block;width:4px;height:7px;border-radius:2px;background:#9aa8c0;transition:background .25s ease}
.dw-music .eq i:nth-child(2){height:14px}.dw-music .eq i:nth-child(3){height:10px}
.dw-music[aria-pressed="true"] .eq i{background:#f0a500;animation:dw-eq 1.1s ease-in-out infinite}
.dw-music[aria-pressed="true"] .eq i:nth-child(2){animation-delay:-.35s}
.dw-music[aria-pressed="true"] .eq i:nth-child(3){animation-delay:-.7s}
.dw-music.wait .eq i{background:#f0a500}
@keyframes dw-eq{0%,100%{height:5px}50%{height:16px}}
@media (prefers-reduced-motion:reduce){.dw-music[aria-pressed="true"] .eq i{animation:none;height:12px}}
@media (max-width:640px){.dw-music{width:46px;padding:0;justify-content:center}.dw-music .dw-music-lbl{display:none}}