/* YAS Dynamics — базовые стили. Без градиентов, теней под карточками, каруселей. */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:hidden}
body{
  margin:0;
  overflow-x:hidden;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-sans);
  font-size:var(--text-body);
  line-height:var(--lh-body);
  font-weight:var(--fw-regular);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent-ink);text-underline-offset:.2em}
a:focus-visible,button:focus-visible,summary:focus-visible{
  outline:var(--ring-w) solid var(--focus);
  outline-offset:var(--ring-offset);
  border-radius:var(--r-xs);
}

h1,h2,h3,h4{margin:0 0 var(--s-4);font-weight:var(--fw-semibold);letter-spacing:var(--tr-heading)}
h1{font-size:var(--text-display);line-height:var(--lh-display);letter-spacing:var(--tr-display)}
h2{font-size:var(--text-h2);line-height:var(--lh-h2)}
h3{font-size:var(--text-h3);line-height:var(--lh-h3);letter-spacing:var(--tr-h3)}
h4{font-size:var(--text-h4);line-height:var(--lh-h3)}
p{margin:0 0 var(--s-4);max-width:var(--measure)}
ul,ol{margin:0 0 var(--s-4);padding-left:1.35em;max-width:var(--measure)}
li{margin-bottom:var(--s-2)}
strong{font-weight:var(--fw-semibold)}

.wrap{width:100%;max-width:var(--container);margin:0 auto;padding:0 var(--pad-x)}
.narrow{max-width:var(--container-narrow)}
.section{padding:var(--section-y) 0;border-top:var(--bw) solid var(--line)}
.section--tight{padding:var(--section-y-tight) 0}
.section--surface{background:var(--surface)}
.lead{font-size:var(--text-lead);line-height:var(--lh-lead);color:var(--text-muted);max-width:var(--measure)}
.muted{color:var(--text-muted)}
.num{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.eyebrow{
  font-size:var(--text-caption);text-transform:uppercase;letter-spacing:var(--tr-caps);
  color:var(--text-muted);margin:0 0 var(--s-3);font-weight:var(--fw-medium);
}

/* ШАПКА */
.site-header{
  height:var(--header-h);display:flex;align-items:center;
  border-bottom:var(--bw) solid var(--line);background:var(--bg);
  position:sticky;top:0;z-index:10;
}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);width:100%;min-width:0}
.brand{font-weight:var(--fw-semibold);letter-spacing:var(--tr-heading);color:var(--text);text-decoration:none;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.header-cta{
  font-size:var(--text-caption);text-decoration:none;
  display:inline-flex;align-items:center;min-height:32px;padding:0 var(--s-3);
  border-radius:var(--r-sm);border:var(--bw) solid var(--line-strong);color:var(--text);
  transition:background var(--dur-fast) var(--ease);flex-shrink:0;
}
.header-cta:hover{background:var(--surface)}
.header-cta .full{display:none}
@media (min-width:560px){
  .header-cta{font-size:var(--text-sm);min-height:36px;padding:0 var(--s-4)}
  .header-cta .full{display:inline}
  .header-cta .short{display:none}
}

/* КНОПКИ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);
  min-height:48px;padding:0 var(--s-5);border-radius:var(--r-sm);
  font-size:var(--text-body);font-weight:var(--fw-medium);line-height:var(--lh-ui);
  text-decoration:none;border:var(--bw) solid transparent;cursor:pointer;
  transition:background var(--dur-fast) var(--ease);
}
.btn-primary{background:var(--accent);color:var(--on-accent)}
.btn-primary:hover{background:var(--accent-hover)}
.btn-ghost{background:transparent;color:var(--text);border-color:var(--line-strong)}
.btn-ghost:hover{background:var(--surface)}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--s-3);margin:var(--s-6) 0 var(--s-4)}

/* ПЕРВЫЙ ЭКРАН */
.hero{padding:var(--s-8) 0 var(--section-y)}
.hero h1{max-width:22ch}
.hero-grid{display:grid;gap:var(--s-7);align-items:center;min-width:0}
.hero-grid>*{min-width:0}
.hero-art{order:-1;position:relative;border-radius:var(--r-lg);overflow:hidden;background:var(--surface)}
.hero-art svg{width:100%;height:auto;display:block}

.demo-card{
  position:absolute;right:var(--s-4);bottom:var(--s-4);
  width:min(230px,calc(100% - 32px));
  background:var(--bg);border:var(--bw) solid var(--line);border-radius:var(--r-md);
  padding:var(--s-3) var(--s-4);
}
.demo-top{display:flex;align-items:center;gap:var(--s-2);color:var(--text-muted);font-size:var(--text-caption);margin-bottom:var(--s-2)}
.pulse-dot{width:7px;height:7px;border-radius:50%;background:var(--accent);flex-shrink:0}
.demo-row{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3)}
.demo-row strong{font-size:var(--text-sm);font-weight:var(--fw-semibold)}
.demo-btn{background:var(--accent);color:var(--on-accent);font-size:var(--text-caption);font-weight:var(--fw-semibold);padding:6px 12px;border-radius:999px;white-space:nowrap}

/* иконки шагов */
.step-icon{display:inline-block;width:28px;height:28px;color:var(--accent-ink);margin-bottom:var(--s-2)}
.step-icon svg{display:block;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.75}
@media (min-width:900px){
  .hero-grid{grid-template-columns:1.05fr 0.95fr;gap:var(--s-9)}
  .hero-art{order:0}
}
.scene{font-size:var(--text-lead);line-height:var(--lh-lead);color:var(--text);max-width:var(--measure);margin:0}
.hero .lead{margin-bottom:var(--s-5)}
.price{font-family:var(--font-mono);font-size:var(--text-h3);font-weight:var(--fw-semibold);margin:0 0 var(--s-2);color:var(--accent-ink)}
.price-note{font-size:var(--text-sm);color:var(--text-muted);max-width:var(--measure);margin:0}

.chips{display:flex;flex-wrap:wrap;gap:var(--s-2);margin:0 0 var(--s-5);padding:0;list-style:none}
.chip{
  display:inline-flex;align-items:center;padding:6px 14px;border-radius:999px;
  border:var(--bw) solid var(--line-strong);font-size:var(--text-caption);
  color:var(--text-muted);background:var(--surface);white-space:nowrap;
}

/* ШАГИ */
.steps{display:grid;gap:var(--s-6);margin:0;padding:0;list-style:none;counter-reset:step}
.step{border-top:var(--bw) solid var(--line);padding-top:var(--s-4);margin:0}
.step-num{font-family:var(--font-mono);font-size:var(--text-sm);color:var(--accent-ink);display:block;margin-bottom:var(--s-2)}
.step h3{font-size:var(--text-h4);margin-bottom:var(--s-2)}
.step p{margin-bottom:0;font-size:var(--text-body)}

/* СХЕМА-ИЛЛЮСТРАЦИЯ (не рендер изделия — линейная диаграмма и мокап уведомления) */
.diagram-wrap{margin:0 0 var(--s-7);border:var(--bw) solid var(--line);border-radius:var(--r-md);padding:var(--s-6) var(--s-5);background:var(--surface)}
.diagram{width:100%;height:auto;display:block;max-width:640px;margin:0 auto}
.diagram--mobile{display:block;max-width:280px}
.diagram--desktop{display:none}
@media (min-width:640px){
  .diagram--mobile{display:none}
  .diagram--desktop{display:block}
}
.diagram text{font-family:var(--font-sans);fill:var(--text)}
.diagram .lbl{font-size:13px;fill:var(--text-muted)}
.diagram .lbl-strong{font-size:13px;fill:var(--text);font-weight:600}
.diagram .node-line{stroke:var(--line-strong);stroke-width:1.5}
.diagram .node-fill{fill:var(--surface)}
.diagram .accent-fill{fill:var(--accent)}
.diagram .accent-stroke{stroke:var(--accent-ink)}
.diagram .dash{stroke:var(--line-strong);stroke-width:1.5;stroke-dasharray:3 4}

/* ТАБЛИЦЫ */
.table-scroll{overflow-x:auto;margin:0 0 var(--s-5);-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;font-size:var(--text-sm);min-width:520px}
caption{text-align:left;color:var(--text-muted);font-size:var(--text-sm);padding-bottom:var(--s-3)}
th,td{text-align:left;padding:var(--s-3) var(--s-4) var(--s-3) 0;border-bottom:var(--bw) solid var(--line);vertical-align:top}
th{font-weight:var(--fw-medium);color:var(--text-muted)}
th[scope="row"]{font-weight:var(--fw-regular);color:var(--text-muted);width:44%}
td .num{font-size:var(--text-sm)}
.src{color:var(--text-muted);font-size:var(--text-caption);white-space:nowrap}

/* СПИСКИ-ОТВЕТЫ */
.qa{border-top:var(--bw) solid var(--line);padding-top:var(--s-5);margin-bottom:var(--s-6)}
.qa h3{font-size:var(--text-h4)}
.qa p:last-child{margin-bottom:0}

.note{
  background:var(--surface);border-left:3px solid var(--accent);
  padding:var(--s-4) var(--s-5);margin:0 0 var(--s-5);border-radius:0 var(--r-sm) var(--r-sm) 0;
}
.note p:last-child{margin-bottom:0}

/* ПОДВАЛ */
.site-footer{border-top:var(--bw) solid var(--line);padding:var(--s-8) 0;color:var(--text-muted);font-size:var(--text-sm)}
.site-footer a{color:var(--accent-ink)}
.site-footer p{max-width:var(--measure)}

@media (min-width:640px){
  :root{--pad-x:var(--pad-x-md)}
  .steps{grid-template-columns:repeat(2,1fr);gap:var(--s-6) var(--gutter)}
}
@media (min-width:900px){
  :root{--pad-x:var(--pad-x-lg);--header-h:var(--header-h-md)}
  .steps{grid-template-columns:repeat(3,1fr)}
  .hero{padding-top:var(--s-11)}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}