/* ============================================================
   Карта экосистемы — стили уникального шаблона (template-ecosystem.php)
   Бренд-палитра из «Дизайн — цвета и градиенты.md».
   ============================================================ */
.eco-page{
	--eco-grad:linear-gradient(180deg,#1765E5 0%,#2A75F2 60%,#3D85FF 100%);
	--eco-accent:#0048A2;
	--eco-ink:#0f2444;
	--eco-line:#d7e0ee;
	--eco-soft:#eef3fb;
	--eco-cta:#FFB329;
	color:var(--eco-ink);
}
.eco-page .container{max-width:1200px;margin:0 auto;padding:0 20px;}

/* ---------- HERO ---------- */
.eco-hero{background:var(--eco-grad);color:#fff;padding:64px 0 58px;text-align:center;}
.eco-hero__eyebrow{margin:0 0 14px;font-size:14px;letter-spacing:.08em;text-transform:uppercase;opacity:.9;font-weight:600;}
.eco-hero__title{margin:0 auto 18px;max-width:900px;font-size:40px;line-height:1.15;font-weight:800;color:#fff;}
.eco-hero__lead{margin:0 auto 28px;max-width:760px;font-size:18px;line-height:1.6;opacity:.95;}
.eco-hero__btn{display:inline-block;background:var(--eco-cta);color:#1a1a1a;font-weight:700;padding:15px 34px;border-radius:10px;text-decoration:none;transition:transform .15s,box-shadow .15s;}
.eco-hero__btn:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,0,0,.18);}

/* ---------- ТАБЫ ---------- */
.eco-tabs-wrap{background:var(--eco-soft);border-bottom:1px solid var(--eco-line);padding:22px 0 18px;position:sticky;top:0;z-index:30;}
.eco-tabs{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;}
.eco-tab{border:1.5px solid var(--eco-line);background:#fff;color:var(--eco-ink);font-weight:600;font-size:15px;padding:11px 22px;border-radius:999px;cursor:pointer;transition:all .15s;}
.eco-tab:hover{border-color:#9db9e6;}
.eco-tab.is-active{background:var(--eco-accent);border-color:var(--eco-accent);color:#fff;box-shadow:0 6px 16px rgba(0,72,162,.25);}
.eco-tagline{margin:16px auto 0;max-width:760px;text-align:center;font-size:16px;color:#4a5a72;}

/* ---------- СЦЕНА ---------- */
.eco-stage{padding:34px 0 8px;background:#fff;}
.eco-stage__grid{display:grid;grid-template-columns:1fr 380px;gap:28px;align-items:start;}

/* ---------- КАРТА / ДОРОЖКИ ---------- */
.eco-boards{position:relative;}
.eco-board{position:relative;display:none;}
.eco-board.is-active{display:block;}
.eco-wires{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;overflow:visible;}
.eco-wires path{fill:none;stroke:#c3d3ec;stroke-width:2;transition:stroke .2s,opacity .2s;}
.eco-wires path.is-hot{stroke:var(--eco-accent);stroke-width:2.6;}

.eco-lane{position:relative;padding:12px 0;}
.eco-lane + .eco-lane{margin-top:8px;}
.eco-lane + .eco-lane::before{content:"";position:absolute;top:-14px;left:50%;transform:translateX(-50%);width:2px;height:16px;background:linear-gradient(#c3d3ec,#c3d3ec);}
.eco-lane__label{display:block;text-align:center;font-size:12px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;color:#7488a5;margin-bottom:12px;}
.eco-lane__row{position:relative;z-index:2;display:flex;flex-wrap:wrap;gap:14px;justify-content:center;}

/* ---------- КАРТОЧКА-ПРОЦЕСС ---------- */
.eco-card{position:relative;z-index:2;width:190px;min-height:104px;background:#fff;border:1.5px solid var(--eco-line);border-radius:14px;padding:16px 14px;display:flex;flex-direction:column;align-items:flex-start;gap:9px;cursor:pointer;text-align:left;transition:border-color .15s,box-shadow .15s,transform .15s,opacity .2s;}
.eco-card:hover{border-color:#9db9e6;box-shadow:0 8px 22px rgba(23,101,229,.12);transform:translateY(-2px);}
.eco-card__ico{width:38px;height:38px;border-radius:10px;background:var(--eco-soft);color:var(--eco-accent);display:flex;align-items:center;justify-content:center;}
.eco-card__ico svg{width:22px;height:22px;}
.eco-card__title{font-size:15px;font-weight:700;line-height:1.25;color:var(--eco-ink);}
.eco-card__badge{position:absolute;top:10px;right:10px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:#fff;background:rgba(255,255,255,.25);padding:3px 8px;border-radius:999px;}
.eco-card.is-core{width:300px;background:var(--eco-grad);border:none;color:#fff;box-shadow:0 14px 34px rgba(23,101,229,.32);}
.eco-card.is-core .eco-card__ico{background:rgba(255,255,255,.2);color:#fff;}
.eco-card.is-core .eco-card__title{color:#fff;font-size:17px;}

.eco-card.is-active{border-color:var(--eco-accent);box-shadow:0 10px 28px rgba(0,72,162,.28);}
.eco-card.is-active:not(.is-core){background:var(--eco-soft);}
.eco-board.has-sel .eco-card{opacity:.38;}
.eco-board.has-sel .eco-card.is-active,
.eco-board.has-sel .eco-card.is-linked{opacity:1;}
.eco-board.has-sel .eco-card.is-linked{border-color:#9db9e6;}

/* ---------- ПАНЕЛЬ БЛОКА ---------- */
.eco-panel{position:sticky;top:96px;background:#fff;border:1.5px solid var(--eco-line);border-radius:16px;padding:24px;min-height:320px;box-shadow:0 10px 30px rgba(15,36,68,.06);}
.eco-panel__empty{color:#7488a5;text-align:center;padding:26px 8px;}
.eco-panel__empty-ico{width:56px;height:56px;margin:0 auto 14px;border-radius:14px;background:var(--eco-soft);color:var(--eco-accent);display:flex;align-items:center;justify-content:center;}
.eco-panel__empty-ico svg{width:30px;height:30px;}
.eco-panel__empty p{margin:0;font-size:15px;line-height:1.5;}

.eco-p__head{display:flex;align-items:center;gap:12px;margin-bottom:16px;}
.eco-p__ico{width:44px;height:44px;flex:none;border-radius:11px;background:var(--eco-grad);color:#fff;display:flex;align-items:center;justify-content:center;}
.eco-p__ico svg{width:24px;height:24px;}
.eco-p__title{margin:0;font-size:20px;font-weight:800;line-height:1.2;}
.eco-p__block{margin:0 0 16px;}
.eco-p__label{font-size:12px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;color:#7488a5;margin:0 0 8px;}
.eco-p__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;}
.eco-p__list li{position:relative;padding-left:20px;font-size:14.5px;line-height:1.45;color:#33465f;}
.eco-p__list li::before{content:"";position:absolute;left:2px;top:8px;width:7px;height:7px;border-radius:50%;background:var(--eco-accent);}
.eco-p__chips{display:flex;flex-wrap:wrap;gap:7px;}
.eco-p__chip{font-size:13px;font-weight:600;color:var(--eco-accent);background:var(--eco-soft);border:1px solid #dbe6f7;padding:5px 11px;border-radius:999px;}
.eco-p__ai{display:flex;gap:10px;background:linear-gradient(90deg,#eef4ff,#f6f9ff);border-left:3px solid var(--eco-accent);border-radius:8px;padding:12px 14px;font-size:14px;line-height:1.5;color:#2b3d55;}
.eco-p__ai b{color:var(--eco-accent);}
.eco-p__mat{display:flex;flex-direction:column;gap:0;}
.eco-p__step{position:relative;padding:9px 0 9px 26px;font-size:14px;line-height:1.4;color:#33465f;}
.eco-p__step + .eco-p__step{border-top:1px dashed var(--eco-line);}
.eco-p__step::before{content:"";position:absolute;left:6px;top:14px;width:9px;height:9px;border-radius:50%;border:2px solid #b9c9e2;background:#fff;}
.eco-p__step--base::before{border-color:#b9c9e2;}
.eco-p__step--growth::before{border-color:#2A75F2;}
.eco-p__step--next::before{background:var(--eco-accent);border-color:var(--eco-accent);}
.eco-p__step small{display:block;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#8a9bb5;margin-bottom:2px;}
.eco-p__cta{display:inline-flex;align-items:center;gap:8px;margin-top:4px;background:var(--eco-accent);color:#fff;font-weight:700;font-size:14.5px;padding:12px 20px;border-radius:10px;text-decoration:none;transition:background .15s,transform .15s;}
.eco-p__cta:hover{background:#003c88;transform:translateY(-1px);color:#fff;}

/* ---------- ТЕКСТОВАЯ ВЕРСИЯ ---------- */
.eco-text{background:var(--eco-soft);padding:52px 0;margin-top:26px;}
.eco-text__h{text-align:center;font-size:28px;font-weight:800;margin:0 0 34px;}
.eco-text__niche{margin:0 0 34px;}
.eco-text__niche h3{font-size:22px;font-weight:800;color:var(--eco-accent);margin:0 0 4px;}
.eco-text__tag{margin:0 0 18px;color:#4a5a72;}
.eco-text__blocks{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;}
.eco-text__block{background:#fff;border:1px solid var(--eco-line);border-radius:12px;padding:18px;}
.eco-text__block h4{margin:0 0 8px;font-size:16px;font-weight:700;}
.eco-text__core{color:var(--eco-accent);font-weight:700;}
.eco-text__block p{margin:0 0 7px;font-size:13.5px;line-height:1.5;color:#40526c;}
.eco-text__link{display:inline-block;margin-top:4px;font-size:13.5px;font-weight:700;color:var(--eco-accent);text-decoration:none;}
.eco-text__link:hover{text-decoration:underline;}

/* ---------- CTA (наследует sol-cta) ---------- */
.eco-cta{margin-top:0;}

/* ---------- Перебиваем кнопочный ресет Twenty Twenty-One ----------
   Тема задаёт button:not(:hover):not(:active):not(.has-text-color){background/color} со специфичностью (0,3,1)
   и красит наши кнопки-карточки в тёмный. Поднимаем специфичность выше (0,4,1). */
.eco-page .eco-tabs-wrap .eco-tabs button.eco-tab{background-color:#fff;color:var(--eco-ink);border:1.5px solid var(--eco-line);}
.eco-page .eco-tabs-wrap .eco-tabs button.eco-tab.is-active{background-color:var(--eco-accent);color:#fff;border-color:var(--eco-accent);}
.eco-page .eco-boards .eco-lane__row button.eco-card{background-color:#fff;color:var(--eco-ink);}
.eco-page .eco-boards .eco-lane__row button.eco-card.is-core{background-color:transparent;color:#fff;}
.eco-page .eco-boards .eco-lane__row button.eco-card.is-active:not(.is-core){background-color:var(--eco-soft);}

/* ---------- ПЕРЕКЛЮЧАТЕЛЬ РЕЖИМОВ (карта / диагностика, задача 14) ---------- */
.eco-hero__actions{margin-bottom:18px;}
.eco-mode-toggle{display:inline-flex;gap:6px;background:rgba(255,255,255,.14);border-radius:999px;padding:5px;}
.eco-page .eco-mode-toggle button.eco-mode-toggle__btn{border:none;background:transparent;color:#fff;font-weight:700;font-size:14.5px;padding:10px 20px;border-radius:999px;cursor:pointer;transition:background .15s,color .15s;}
.eco-page .eco-mode-toggle button.eco-mode-toggle__btn.is-active{background:#fff;color:var(--eco-accent);}

/* ---------- САМОДИАГНОСТИКА «Индекс порядка» (задача 14) ---------- */
.eco-diag{background:#fff;padding:44px 0 60px;}
.eco-diag__lead{max-width:640px;margin:0 auto 24px;text-align:center;color:#4a5a72;font-size:16px;line-height:1.55;}
.eco-diag__progress{max-width:640px;margin:0 auto 8px;height:8px;background:var(--eco-soft);border-radius:999px;overflow:hidden;}
.eco-diag__progress-bar{height:100%;width:0%;background:var(--eco-grad);border-radius:999px;transition:width .25s ease;}
.eco-diag__count{max-width:640px;margin:0 auto 30px;text-align:center;font-size:13px;font-weight:700;color:#7488a5;text-transform:uppercase;letter-spacing:.05em;}

.eco-diag__q{max-width:640px;margin:0 auto 26px;padding-bottom:26px;border-bottom:1px solid var(--eco-line);}
.eco-diag__q:last-of-type{border-bottom:none;}
.eco-diag__q-num{margin:0 0 8px;font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--eco-accent);}
.eco-diag__q-text{margin:0 0 16px;font-size:18px;font-weight:700;line-height:1.4;color:var(--eco-ink);}
.eco-diag__answers{display:flex;flex-wrap:wrap;gap:10px;}
.eco-page .eco-diag__answers button.eco-diag__answer{flex:1 1 150px;border:1.5px solid var(--eco-line);background:#fff;color:var(--eco-ink);font-weight:600;font-size:14.5px;padding:13px 16px;border-radius:12px;cursor:pointer;text-align:center;transition:all .15s;}
.eco-page .eco-diag__answers button.eco-diag__answer:hover{border-color:#9db9e6;}
.eco-page .eco-diag__answers button.eco-diag__answer.is-selected{background:var(--eco-accent);border-color:var(--eco-accent);color:#fff;}

.eco-page button.eco-diag__submit{display:block;margin:36px auto 0;background:var(--eco-cta);color:#1a1a1a;border:none;font-weight:700;font-size:16px;padding:16px 44px;border-radius:12px;cursor:pointer;transition:transform .15s,box-shadow .15s,opacity .15s;}
.eco-page button.eco-diag__submit:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,0,0,.14);}
.eco-page button.eco-diag__submit:disabled{opacity:.4;cursor:not-allowed;transform:none;box-shadow:none;}

.eco-diag__result-top{display:flex;align-items:center;gap:26px;max-width:760px;margin:0 auto 34px;flex-wrap:wrap;justify-content:center;text-align:center;}
.eco-diag__index{flex:none;background:var(--eco-grad);color:#fff;border-radius:20px;padding:22px 30px;box-shadow:0 14px 34px rgba(23,101,229,.28);}
.eco-diag__index-num{font-size:48px;font-weight:800;line-height:1;}
.eco-diag__index-max{font-size:18px;opacity:.85;}
.eco-diag__verdict{max-width:420px;text-align:left;}
.eco-diag__verdict-title{margin:0 0 6px;font-size:21px;font-weight:800;color:var(--eco-ink);}
.eco-diag__verdict-text{margin:0;font-size:14.5px;line-height:1.5;color:#4a5a72;}

.eco-diag__bars{max-width:640px;margin:0 auto 30px;display:flex;flex-direction:column;gap:14px;}
.eco-diag__bar-row{display:flex;align-items:center;gap:14px;}
.eco-diag__bar-label{flex:0 0 150px;font-size:13.5px;font-weight:700;color:var(--eco-ink);}
.eco-diag__bar-track{flex:1 1 auto;height:12px;background:var(--eco-soft);border-radius:999px;overflow:hidden;}
.eco-diag__bar-fill{height:100%;border-radius:999px;background:var(--eco-grad);}
.eco-diag__bar-fill.is-low{background:#e05a4e;}
.eco-diag__bar-fill.is-mid{background:var(--eco-cta);}
.eco-diag__bar-val{flex:0 0 34px;text-align:right;font-size:13px;font-weight:700;color:#7488a5;}

.eco-diag__risks{max-width:640px;margin:0 auto 34px;display:flex;flex-direction:column;gap:12px;}
.eco-diag__risk{background:var(--eco-soft);border-left:3px solid #e05a4e;border-radius:10px;padding:14px 18px;}
.eco-diag__risk-title{margin:0 0 4px;font-size:14.5px;font-weight:800;color:var(--eco-ink);}
.eco-diag__risk-text{margin:0 0 8px;font-size:14px;line-height:1.5;color:#40526c;}
.eco-diag__risk-link{font-size:13.5px;font-weight:700;color:var(--eco-accent);text-decoration:none;}
.eco-diag__risk-link:hover{text-decoration:underline;}

.eco-diag__result-cta{max-width:520px;margin:0 auto;text-align:center;}
.eco-diag__result-cta-text{margin:0 0 16px;font-size:15px;color:#4a5a72;}
.eco-page div.eco-diag__cta-btn{display:inline-block;background:var(--eco-accent);color:#fff;font-weight:700;font-size:15.5px;padding:15px 34px;border-radius:12px;cursor:pointer;transition:background .15s,transform .15s;}
.eco-page div.eco-diag__cta-btn:hover{background:#003c88;transform:translateY(-1px);}
.eco-page button.eco-diag__reset{display:block;margin:14px auto 0;background:none;border:none;color:#7488a5;font-size:13.5px;font-weight:600;text-decoration:underline;cursor:pointer;}

/* ---------- АДАПТИВ ---------- */
@media (max-width:980px){
	.eco-stage__grid{grid-template-columns:1fr;}
	.eco-panel{position:static;order:2;margin-top:8px;}
	.eco-wires{display:none;}
	.eco-hero__title{font-size:30px;}
	.eco-hero__lead{font-size:16px;}
}
@media (max-width:560px){
	.eco-tabs-wrap{position:static;}
	.eco-card{width:calc(50% - 7px);min-height:96px;}
	.eco-card.is-core{width:100%;}
	.eco-lane__row{gap:10px;}
	.eco-hero{padding:46px 0 40px;}
	.eco-hero__title{font-size:25px;}
	.eco-text__blocks{grid-template-columns:1fr;}
	.eco-diag__answers{flex-direction:column;}
	.eco-page .eco-diag__answers button.eco-diag__answer{flex:1 1 auto;}
	.eco-diag__result-top{flex-direction:column;text-align:center;}
	.eco-diag__verdict{text-align:center;}
	.eco-diag__bar-row{flex-wrap:wrap;}
	.eco-diag__bar-label{flex:1 1 100%;}
	.eco-diag__bar-track{flex:1 1 auto;}
}