/* Лендинг Неон-67 (решения #21, #26): макет A «Питч-дек» с доской C. Только токены theme.css.
   Грузится после style.css и переопределяет заводскую витрину Цеха (.hero, .monitor, .cta). */

#landing{display:flex;flex-direction:column;gap:var(--space-16);padding-bottom:var(--space-16)}
#landing .mono{font-family:var(--font-mono);font-size:var(--text-sm);letter-spacing:.02em}
#landing .kicker{margin:0 0 var(--space-3);font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:.08em;text-transform:uppercase;color:var(--color-action-primary)}
#landing .kicker-lime{color:var(--color-action-accent)}
#landing .section-head{display:flex;flex-direction:column;gap:var(--space-3);margin-bottom:var(--space-8);max-width:60rem}
#landing .section-head h2,#landing h2{margin:0;font-family:var(--font-display);font-size:clamp(1.6rem,3.2vw,2.6rem);line-height:1.05;letter-spacing:-.02em;text-wrap:balance}
#landing #shift:not(:has(> :not(.hidden))){margin-top:calc(-1 * var(--space-16))}
#landing .panel h2{font-size:var(--text-xl)}
#landing .card{background:var(--color-surface-card);border:1px solid var(--color-border-default);border-radius:var(--radius-xl);padding:var(--space-6)}
.top-nav{display:flex;gap:var(--space-6);font-weight:600;font-size:var(--text-sm)}
.top-nav a{color:var(--color-text-primary);text-decoration:none}
.top-nav a:hover,.top-nav a:focus-visible{color:var(--color-action-primary);outline:none;text-decoration:underline}
.mark-num{color:var(--color-action-primary)}

/* Hero: копия слева, пульт «Играть» справа. Пульт — единственный тёмный блок первого экрана:
   куда жать, видно сходу и гостю, и вошедшему. */
.hero{
  display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--space-10);align-items:center;
  padding:var(--space-12) 0 var(--space-4);position:relative
}
.hero::before{content:'';position:absolute;right:-8rem;top:-6rem;width:32rem;height:32rem;border-radius:50%;z-index:-1;
  background:radial-gradient(circle,var(--color-surface-sunken),transparent 65%)}
.hero-copy{display:flex;flex-direction:column;gap:var(--space-6);min-width:0;grid-column:1;grid-row:1}
.hero-copy .eyebrow{margin:0;font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:.08em;text-transform:uppercase;color:var(--color-action-primary)}
.hero-copy h1{margin:0;font-family:var(--font-display);font-size:clamp(2.4rem,5.2vw,4.6rem);line-height:.98;letter-spacing:-.03em;font-weight:900}
#landing .hl{background:var(--color-action-accent);color:var(--color-text-on-accent);padding:0 .18em;border-radius:.18em;display:inline-block;white-space:nowrap}
.hero-copy .lead{margin:0;font-size:var(--text-lg);line-height:1.5;color:var(--color-text-secondary);max-width:38rem}
.play{
  grid-column:2;grid-row:1;display:flex;flex-direction:column;gap:var(--space-4);min-width:0;
  background:var(--color-material-enamel-ink);color:var(--color-surface-page);border-radius:var(--radius-xl);
  padding:var(--space-8);box-shadow:10px 10px 0 var(--color-action-primary)
}
.play .play-kicker{margin:0;color:var(--color-action-accent);text-transform:uppercase;letter-spacing:.08em;font-size:var(--text-xs)}
.play .fine{margin:0;color:var(--color-border-default);line-height:1.45}
.cta{display:flex;gap:var(--space-3);align-items:flex-end;flex-wrap:wrap;margin:0}
.cta .grow{flex:1 1 12rem;min-width:0;display:flex;flex-direction:column;gap:var(--space-2);font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:.08em;text-transform:uppercase;color:var(--color-border-default)}
.cta input{width:100%;min-width:0;min-height:52px;border-radius:var(--radius-md);border:2px solid transparent;background:var(--color-surface-page);color:var(--color-text-primary);font-size:var(--text-lg);font-family:var(--font-sans);letter-spacing:0;text-transform:none;padding:0 var(--space-4)}
.cta input:focus-visible{outline:none;border-color:var(--color-action-accent)}
.play .crew-line{color:var(--color-surface-page);font-size:var(--text-md)}
.play .crew-line strong{color:var(--color-action-accent)}
.play .crew-line button{background:transparent;color:var(--color-surface-page);border:1px solid var(--color-border-default);border-radius:var(--radius-full);min-height:36px;padding:0 var(--space-3);font-size:var(--text-sm);cursor:pointer}
.play .crew-line button:hover,.play .crew-line button:focus-visible{border-color:var(--color-action-accent);color:var(--color-action-accent);outline:none}
.play-row{display:flex;flex-direction:column;gap:var(--space-3)}
.play-btn{
  min-height:76px;width:100%;border:0;border-radius:var(--radius-md);cursor:pointer;
  background:var(--color-action-accent);color:var(--color-text-on-accent);
  font-family:var(--font-display);font-weight:900;font-size:clamp(1.5rem,2.4vw,2.1rem);text-transform:uppercase;letter-spacing:.06em
}
.play-btn:hover,.play-btn:focus-visible{outline:none;box-shadow:0 0 0 4px var(--color-surface-page),0 0 0 7px var(--color-action-danger)}
.play-btn:active{transform:translate(2px,2px)}
.play-btn:disabled{opacity:.6;cursor:progress}
.play .secondary{
  background:transparent;color:var(--color-surface-page);border:2px solid var(--color-surface-page);border-radius:var(--radius-md);
  min-height:48px;padding:var(--space-2) var(--space-5);font-weight:800;font-size:var(--text-md);cursor:pointer
}
.play .secondary:hover,.play .secondary:focus-visible{border-color:var(--color-action-accent);color:var(--color-action-accent);outline:none}
/* В планёрке и спринте hero сжимается: заголовок остаётся, пульт и лид уступают место лобби. */
.hero.compact{padding:var(--space-6) 0 var(--space-2);grid-template-columns:1fr}
.hero.compact .hero-copy h1{font-size:clamp(1.6rem,3vw,2.4rem)}
.hero.compact .lead,.hero.compact .eyebrow,.hero.compact .play-row,.hero.compact .play-kicker,.hero.compact #playNote{display:none}
.hero.compact .play{grid-column:1;grid-row:2;padding:var(--space-4) var(--space-6);box-shadow:none;flex-direction:row;align-items:center}
/* Кнопка в шапке — тот же «Играть» на любой прокрутке. */
.top-play{
  min-height:44px;padding:0 var(--space-5);border:0;border-radius:var(--radius-full);cursor:pointer;
  background:var(--color-action-accent);color:var(--color-text-on-accent);font-weight:900;font-size:var(--text-md);letter-spacing:.02em
}
.top-play:hover,.top-play:focus-visible{outline:none;box-shadow:0 0 0 3px var(--color-action-danger)}

/* Живая сцена — полоса на всю ширину: студия целиком, без карточки и табличек. */
.monitor.live{
  margin:0;padding:var(--space-3) var(--space-3) var(--space-2);border-radius:var(--radius-xl);border:0;
  background:var(--color-material-enamel-ink);color:var(--color-surface-page);box-shadow:none;display:flex;flex-direction:column;gap:var(--space-2)
}
.monitor.live::before,.monitor.live::after{content:none}
.monitor.live .monitor-head{display:flex;justify-content:space-between;align-items:center;gap:var(--space-3);border:0;padding:var(--space-1) var(--space-2);background:none}
.monitor.live .monitor-title{font-family:var(--font-mono);font-size:var(--text-sm);letter-spacing:.02em;color:var(--color-border-default)}
.monitor.live canvas{width:100%;height:auto;border:0;border-radius:var(--radius-md);background:var(--color-surface-sunken);image-rendering:pixelated;box-shadow:none}
.monitor.live figcaption{margin:0;padding:var(--space-1) var(--space-2);background:none;border:0;color:var(--color-border-default)}
.tag{font-family:var(--font-mono);font-size:var(--text-xs);border-radius:var(--radius-full);padding:var(--space-1) var(--space-3);white-space:nowrap}
.monitor.live .tag-live{background:var(--color-action-accent);color:var(--color-text-on-accent)}
.monitor.live .tag-soon{background:var(--color-material-metal-dark,var(--color-surface-raised));color:var(--color-surface-page)}

/* Финальный призыв перед подвалом */
.last-call{display:flex;flex-direction:column;align-items:center;gap:var(--space-5);text-align:center;padding:var(--space-8) 0 0}
.last-call h2{max-width:40rem}
.last-call .play-btn{max-width:24rem}
.last-call .fine{margin:0;color:var(--color-text-tertiary)}

/* Нам доверяют */
.trust .chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--space-3)}
.trust .chips li{border:1px solid var(--color-border-default);background:var(--color-surface-card);border-radius:var(--radius-full);padding:var(--space-3) var(--space-5);font-weight:700}
.trust .chips .chip-bad{color:var(--color-action-danger);border-color:var(--color-action-danger)}

/* Постирония — тёмная полоса */
.thesis{
  display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:var(--space-10);align-items:center;
  background:var(--color-material-enamel-ink);color:var(--color-surface-page);border-radius:var(--radius-xl);padding:var(--space-12)
}
.thesis h2{color:var(--color-surface-page)}
.thesis p{margin:0;color:var(--color-border-default);font-size:var(--text-lg);line-height:1.5}
.thesis-copy{display:flex;flex-direction:column;gap:var(--space-4)}
.stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3);margin:0}
.stats div{background:var(--color-material-metal-dark,var(--color-material-metal));border-radius:var(--radius-lg);padding:var(--space-5)}
.stats dd{margin:0;font-family:var(--font-display);font-size:2.6rem;font-weight:900;line-height:1;color:var(--color-surface-page)}
.stats dt{margin-top:var(--space-2);font-family:var(--font-mono);font-size:var(--text-xs);color:var(--color-border-default)}
.stats .stat-lime{color:var(--color-action-accent)}
.stats .stat-cyan{color:var(--color-action-primary-hover)}
.stats .stat-pink{color:var(--color-action-danger)}

/* Как это работает — четыре карточки */
.how .section-head{flex-direction:row;justify-content:space-between;align-items:flex-end;gap:var(--space-8);max-width:none}
.how .section-head p{max-width:24rem;margin:0}
.grad-text{background:linear-gradient(135deg,var(--color-action-primary),var(--color-action-danger));-webkit-background-clip:text;background-clip:text;color:transparent}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-5)}
.steps .card{display:flex;flex-direction:column;gap:var(--space-3)}
.steps h3{margin:0;font-size:var(--text-lg);font-weight:800}
.steps p{margin:0;color:var(--color-text-secondary);line-height:1.4}
.steps .card-hot{border:2px solid var(--color-text-primary);box-shadow:6px 6px 0 var(--color-action-accent)}
.steps .card-dark{background:var(--color-material-enamel-ink);border-color:var(--color-material-enamel-ink);color:var(--color-surface-page)}
.steps .card-dark h3{color:var(--color-surface-page)}
.steps .card-dark p{color:var(--color-border-default)}
.steps .card-dark .kicker{color:var(--color-action-accent)}

/* Доска спринта со стикерами (макет C) */
.columns-board{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--space-5);align-items:start}
.col{display:flex;flex-direction:column;gap:var(--space-4)}
.colh{margin:0;font-family:var(--font-display);font-size:var(--text-sm);text-transform:uppercase;letter-spacing:.04em;padding:var(--space-3) var(--space-4);
  background:var(--color-text-primary);color:var(--color-surface-page);border:3px solid var(--color-text-primary)}
.colh-violet{background:var(--color-action-primary);border-color:var(--color-text-primary)}
.colh-lime{background:var(--color-text-primary);box-shadow:6px 6px 0 var(--color-action-accent)}
.colh-pink{background:var(--color-action-danger)}
.note{margin:0;padding:var(--space-4);border:3px solid var(--color-text-primary);box-shadow:5px 5px 0 var(--color-text-primary);background:var(--color-surface-card);font-weight:500;line-height:1.35}
.note-lime{background:var(--color-action-accent);color:var(--color-text-on-accent)}
.note-cyan{background:var(--color-surface-sunken)}
.note-pink{background:var(--color-action-danger);color:var(--color-text-on-action)}
.note-dash{border-style:dashed}
.rot-l{transform:rotate(-2deg)}
.rot-r{transform:rotate(1.5deg)}

/* Сейчас в студии и спринт недели */
.studio{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-5)}
.studio .card{margin:0}
.presence-head h2{font-size:var(--text-xl)}

/* Тарифы */
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-5)}
.plan{display:flex;flex-direction:column;gap:var(--space-3);position:relative;padding:var(--space-8)}
.plan h3{margin:0;font-size:var(--text-lg);font-weight:800}
.plan .price{margin:0;font-family:var(--font-display);font-size:2.4rem;font-weight:900;line-height:1}
.plan p{margin:0;color:var(--color-text-secondary);line-height:1.5}
.plan-hot{border:2px solid var(--color-text-primary);box-shadow:8px 8px 0 var(--color-action-primary)}
.plan .badge{position:absolute;top:calc(-1 * var(--space-3));left:var(--space-6);margin:0;padding:var(--space-1) var(--space-3);border-radius:var(--radius-full);
  background:linear-gradient(135deg,var(--color-action-primary),var(--color-action-danger));color:var(--color-text-on-action);font-size:var(--text-xs)}

/* Телефон и планшет */
@media (max-width:1100px){
  .steps,.columns-board{grid-template-columns:repeat(2,minmax(0,1fr))}
  .plans{grid-template-columns:1fr}
  .thesis{grid-template-columns:1fr;padding:var(--space-8)}
}
@media (max-width:820px){
  /* Телефон: заголовок, сразу пульт «Играть», лид — ниже; всё в одной колонке. */
  .hero{grid-template-columns:1fr;padding-top:var(--space-4);gap:var(--space-5)}
  .hero-copy{display:contents}
  .hero::before{content:none}
  .hero-copy .eyebrow{order:1}
  .hero-copy h1{order:2;font-size:clamp(2.2rem,11vw,3.2rem)}
  .play{order:3;grid-column:1;grid-row:auto;padding:var(--space-5);box-shadow:6px 6px 0 var(--color-action-primary)}
  .hero-copy .lead{order:4;font-size:var(--text-md)}
  .play-btn{min-height:64px}
  .hero.compact .play{flex-direction:column;align-items:flex-start}
  .steps,.columns-board,.studio{grid-template-columns:1fr}
  .how .section-head{flex-direction:column;align-items:flex-start}
  .top{flex-wrap:nowrap;gap:var(--space-3)}
  .top .mark{flex:1;min-width:0}
  .top-nav,.top-sub,.top .online{display:none}
  .top-play{margin-left:auto;flex:0 0 auto}
  .last-call h2{font-size:clamp(1.4rem,6vw,2rem)}
}
@media (prefers-reduced-motion:reduce){.rot-l,.rot-r{transform:none}}