:root{
 --bg:#071015;--panel:#0d1921;--panel2:#10212b;--line:rgba(180,224,232,.16);
 --text:#f2f7f6;--muted:#9db0b5;--cyan:#70d7e5;--mint:#a8efc4;--lime:#d9ff80;
 --amber:#ffc970;--danger:#ff8f86;--max:1160px;--radius:22px;
 --shadow:0 24px 72px rgba(0,0,0,.28)
}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:
 radial-gradient(circle at 12% 8%,rgba(112,215,229,.11),transparent 28rem),
 radial-gradient(circle at 88% 13%,rgba(168,239,196,.08),transparent 31rem),
 var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.65}
a{color:inherit}.site-header{position:sticky;top:0;z-index:20;border-bottom:1px solid var(--line);background:rgba(7,16,21,.91);backdrop-filter:blur(18px)}
.header-inner{width:min(var(--max),calc(100% - 32px));margin:auto;min-height:68px;display:flex;align-items:center;gap:24px;justify-content:space-between}
.brand{display:inline-flex;align-items:center;gap:12px;text-decoration:none;font-weight:850;letter-spacing:-.02em}
.brand-mark{width:35px;height:35px;border-radius:11px;display:grid;place-items:center;color:#061016;background:linear-gradient(135deg,var(--cyan),var(--lime));font-size:12px;font-weight:900}
.nav{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end}.nav a{text-decoration:none;color:var(--muted);font-size:12px;padding:8px 9px;border-radius:10px}.nav a:hover,.nav a[aria-current=page]{color:var(--text);background:rgba(112,215,229,.1)}
main{overflow:hidden}.hero{width:min(var(--max),calc(100% - 32px));margin:42px auto 28px;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr);gap:24px;align-items:stretch}
.hero-copy,.hero-map,.section-card,.quick-summary,.faq,.sources-panel,.panel{border:1px solid var(--line);background:linear-gradient(180deg,rgba(17,31,41,.94),rgba(9,20,27,.96));box-shadow:var(--shadow);border-radius:var(--radius)}
.hero-copy{padding:clamp(28px,6vw,66px)}.eyebrow,.section-label,.card-code{margin:0 0 14px;color:var(--cyan);text-transform:uppercase;letter-spacing:.15em;font-size:11px;font-weight:850}
h1,h2,h3,p{margin-top:0}h1{max-width:900px;margin-bottom:24px;font-size:clamp(42px,6.2vw,78px);line-height:.99;letter-spacing:-.055em}
.hero-lead{max-width:760px;margin-bottom:0;color:#c9d5d7;font-size:clamp(18px,2.1vw,23px)}
.hero-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}.pill{border:1px solid var(--line);color:var(--muted);padding:7px 10px;border-radius:999px;font-size:12px}
.hero-map{padding:24px;display:grid;align-content:center;min-height:420px;background:
 linear-gradient(rgba(112,215,229,.055) 1px,transparent 1px),
 linear-gradient(90deg,rgba(112,215,229,.055) 1px,transparent 1px),
 linear-gradient(180deg,rgba(17,31,41,.96),rgba(8,18,24,.96));background-size:28px 28px,28px 28px,auto}
.map-title{font-size:15px;color:var(--muted);margin-bottom:18px}.formula-row{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));align-items:center;gap:8px}
.node{min-height:78px;border:1px solid rgba(112,215,229,.35);border-radius:16px;padding:12px 8px;display:grid;place-items:center;text-align:center;background:rgba(112,215,229,.08);font-size:13px;font-weight:780}
.node.art{color:var(--lime);border-color:rgba(217,255,128,.42);background:rgba(217,255,128,.08)}.connector{color:var(--muted);text-align:center}
.content-shell{width:min(var(--max),calc(100% - 32px));margin:0 auto 64px;display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:24px;align-items:start}.article{display:grid;gap:22px}
.quick-summary{padding:24px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.quick-summary h2{grid-column:1/-1;font-size:28px}
.summary-item{border:1px solid var(--line);border-radius:15px;padding:17px;background:rgba(255,255,255,.025);color:#d8e3e4}
.section-card{padding:clamp(24px,5vw,52px)}.section-card h2{font-size:clamp(30px,4vw,48px);line-height:1.05;letter-spacing:-.035em;max-width:850px}.section-card p{color:#c2d0d2;font-size:17px;max-width:900px}
.card-grid{margin-top:24px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.info-card{border:1px solid var(--line);border-radius:16px;padding:20px;background:rgba(255,255,255,.025)}.info-card h3{margin-bottom:8px;font-size:19px}.info-card p{font-size:14px;margin:0;color:var(--muted)}
.callout{margin-top:24px;border-left:4px solid var(--lime);background:rgba(217,255,128,.07);padding:20px 22px;border-radius:0 16px 16px 0;color:#e9ffd2;font-weight:750}
.checklist{margin:24px 0 0;padding:0;list-style:none;display:grid;gap:10px}.checklist li{position:relative;border:1px solid var(--line);border-radius:14px;padding:14px 16px 14px 46px;color:#d3dedf;background:rgba(255,255,255,.025)}.checklist li:before{content:"✓";position:absolute;left:16px;color:var(--mint);font-weight:900}
.comparison{margin-top:24px;overflow-x:auto;border:1px solid var(--line);border-radius:16px}.comparison-row{min-width:700px;display:grid;grid-template-columns:1fr 1.35fr 1.35fr}.comparison-row>*{padding:14px 16px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}.comparison-row>*:last-child{border-right:0}.comparison-row:last-child>*{border-bottom:0}.comparison-head{color:var(--cyan);background:rgba(112,215,229,.08);font-weight:800}
.sidebar{position:sticky;top:92px;display:grid;gap:14px}.panel{padding:20px}.panel h2{font-size:16px;margin-bottom:13px}.side-links{display:grid;gap:6px}.side-links a{color:var(--muted);text-decoration:none;border-radius:10px;padding:8px 10px;font-size:13px}.side-links a:hover{background:rgba(112,215,229,.08);color:var(--text)}
.formula-picker{display:grid;gap:10px}.formula-picker button{appearance:none;text-align:left;border:1px solid var(--line);background:rgba(255,255,255,.03);color:var(--text);border-radius:12px;padding:12px;cursor:pointer}.formula-picker button:hover,.formula-picker button.is-active{border-color:var(--cyan);background:rgba(112,215,229,.09)}
.formula-result{margin-top:12px;min-height:112px;color:var(--muted);font-size:13px;white-space:pre-line}
.faq,.sources-panel{padding:clamp(24px,5vw,48px)}.faq h2,.sources-panel h2{font-size:36px}details{border-top:1px solid var(--line);padding:15px 0}details:last-child{border-bottom:1px solid var(--line)}summary{cursor:pointer;font-weight:780}details p{color:var(--muted);margin:12px 0 0}
.source-list{display:grid;gap:12px}.source-item{display:grid;gap:5px;padding:17px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.025)}.source-item a{color:var(--cyan);font-weight:800;text-decoration:none}.source-item p{margin:0;color:var(--muted);font-size:14px}
.answer-line{display:inline-flex;align-items:center;gap:8px;color:var(--lime);font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.12em}.answer-line:before{content:"";width:28px;height:2px;background:var(--lime)}
.site-footer{border-top:1px solid var(--line);padding:34px 0 50px;color:var(--muted)}.footer-inner{width:min(var(--max),calc(100% - 32px));margin:auto;display:grid;grid-template-columns:1fr auto;gap:24px}.footer-links{display:flex;flex-wrap:wrap;gap:12px}.footer-links a{color:var(--muted);text-decoration:none;font-size:13px}
.not-found{width:min(780px,calc(100% - 32px));margin:12vh auto;padding:50px;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);text-align:center}.not-found h1{font-size:clamp(48px,10vw,110px)}
@media(max-width:930px){.hero,.content-shell{grid-template-columns:1fr}.sidebar{position:static;grid-row:1}.nav{display:none}.card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.hero{margin-top:18px}.hero-copy,.hero-map,.section-card,.faq,.sources-panel{padding:22px}h1{font-size:46px}.quick-summary,.card-grid{grid-template-columns:1fr}.quick-summary h2{grid-column:auto}.formula-row{grid-template-columns:1fr}.connector{transform:rotate(90deg)}.footer-inner{grid-template-columns:1fr}}


/* ===== NAVIGATOR HERO TITLE FIX V3 ===== */

/*
 * Фикс только для H1 первого экрана.
 * Слова переносятся исключительно по пробелам.
 */
.hero-copy {
  min-width: 0;
}

.hero-copy h1 {
  width: 100%;
  max-width: 100%;
  margin-bottom: 24px;

  font-size: clamp(32px, 3.1vw, 48px);
  line-height: 1.02;
  letter-spacing: -0.055em;

  white-space: normal;
  overflow-wrap: normal;
  word-wrap: normal;
  word-break: normal;
  hyphens: none;
  text-wrap: balance;
}

/*
 * После перехода hero в одну колонку
 * заголовок снова может стать крупнее.
 */
@media (max-width: 930px) {
  .hero-copy h1 {
    font-size: clamp(38px, 7vw, 54px);
  }
}

@media (max-width: 560px) {
  .hero-copy h1 {
    font-size: 34px;
  }
}

@media (max-width: 420px) {
  .hero-copy h1 {
    font-size: 26px;
    letter-spacing: -0.045em;
  }
}


/* ===== NAVIGATOR FORMULA LABELS FIX V1 ===== */

/*
 * Плюсы занимают только необходимую ширину,
 * а прямоугольники компонентов получают всё
 * оставшееся пространство.
 */
.hero-map .formula-row {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr) max-content
    minmax(0, 1fr) max-content
    minmax(0, 1.16fr) max-content
    minmax(0, 1fr);

  align-items: center;
  column-gap: 6px;
  row-gap: 8px;
}

/*
 * Названия компонентов остаются внутри контура.
 */
.hero-map .node {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;

  padding: 12px 4px;

  font-size: clamp(10px, 0.86vw, 12px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  text-align: center;

  white-space: nowrap;
  overflow: hidden;
  word-break: normal;
  overflow-wrap: normal;
  hyphens: none;
}

.hero-map .connector {
  min-width: 0;
  padding: 0 1px;
  text-align: center;
}

/*
 * Текст кнопок в правой панели переносится
 * только по пробелам и не выходит за рамку.
 */
.sidebar .formula-picker button {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;

  padding: 12px 10px;
  line-height: 1.25;

  white-space: normal;
  word-break: normal;
  overflow-wrap: normal;
  hyphens: none;
}

/*
 * На телефоне схема снова становится вертикальной.
 */
@media (max-width: 620px) {
  .hero-map .formula-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .hero-map .node {
    padding: 12px 8px;
    font-size: 13px;
    white-space: normal;
  }

  .hero-map .connector {
    transform: rotate(90deg);
  }
}