/* Interactive blocks after hero + popups (placeholders, no images) */
.ix { margin: 14px 0 22px; display: grid; gap: 14px; }
.ix-title { font-size: 17px; font-weight: 800; margin: 0 0 10px; } .ix-title small { color: var(--muted); font-weight: 600; font-size: 11px; }
.ix-card, .ix-panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); padding: 16px; }
.ix-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.ix-stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; text-align: center; display: grid; gap: 2px; }
.ix-stat strong { font-size: 24px; color: var(--green); } .ix-stat span { font-size: 12px; color: var(--muted); }
.ix-tabs, .ix-chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.ix-tabs::-webkit-scrollbar, .ix-chips::-webkit-scrollbar { display: none; }
.ix-tab, .ix-chip { flex: 0 0 auto; min-height: 42px; padding: 8px 16px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); color: var(--text); font: 600 13px/1 inherit; cursor: pointer; transition: .2s var(--ease); display: inline-flex; align-items: center; }
span.ix-chip { min-height: 0; padding: 4px 10px; font-size: 11px; cursor: default; color: var(--green); }
.ix-tab.is-active, .ix-chip.is-active { background: var(--green); color: var(--green-ink); border-color: var(--green); }
.ix-panels .ix-panel { display: none; gap: 10px; } .ix-panels .ix-panel.is-active { display: grid; }
.ix-panel ul, .ix-panel ol { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: 14px; color: var(--text-2); }
.ix-calc { display: grid; gap: 12px; } .ix-calc label { display: grid; gap: 6px; font-size: 13px; color: var(--text-2); }
.ix-calc input[type=number], .ix-search, .ix-login input { min-height: 44px; padding: 0 14px; border-radius: var(--radius-s); border: 1px solid var(--line); background: var(--surface-2); color: var(--text); font-size: 15px; width: 100%; }
.ix-calc input[type=range] { accent-color: var(--green); width: 100%; }
.ix-calc__res, .ix-mini { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.ix-calc__res > div, .ix-mini > div { background: var(--surface-2); border-radius: var(--radius-s); padding: 10px 12px; display: grid; gap: 2px; }
.ix-calc__res span, .ix-mini span { font-size: 11px; color: var(--muted); } .ix-calc__res b, .ix-mini b { font-size: 17px; }
.ix-filter { display: grid; gap: 12px; }
.ix-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.ix-tile { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); min-height: 96px; display: grid; place-items: center; align-content: center; gap: 8px; padding: 12px; font-size: 12px; font-weight: 700; text-align: center; transition: border-color .2s var(--ease); }
.ix-tile:hover { border-color: var(--green); } .ix-tile .cico { width: 34px; height: 34px; } .ix-tile[hidden] { display: none; }
.ix-random { justify-self: start; }
.ix-checklist { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; }
.ix-checklist label { display: flex; gap: 10px; align-items: center; min-height: 44px; padding: 0 12px; background: var(--surface-2); border-radius: var(--radius-s); cursor: pointer; font-size: 14px; }
.ix-checklist input { accent-color: var(--green); width: 18px; height: 18px; }
.ix-progress { height: 6px; background: var(--surface-3); border-radius: 99px; overflow: hidden; margin-bottom: 12px; } .ix-progress i { display: block; height: 100%; width: 0; background: var(--green); transition: width .3s var(--ease); }
.ix-login { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; } .ix-login .btn { justify-content: center; }
.ix-details { background: var(--surface-2); border-radius: var(--radius-s); padding: 12px 14px; margin-top: 8px; font-size: 14px; } .ix-details summary { cursor: pointer; font-weight: 700; }
.ix-contacts { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.ix-contact { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 0 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); font-weight: 700; } .ix-contact .cico { width: 28px; height: 28px; }
.ix-steps { counter-reset: s; }
.ix-exit { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; background: rgba(0, 0, 0, .7); padding: 16px; }
.ix-exit[hidden] { display: none; }
.ix-exit__box { position: relative; max-width: 420px; width: 100%; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-xl); padding: 28px 22px 22px; display: grid; gap: 12px; justify-items: start; }
.ix-exit__title { font-size: 22px; } .ix-exit__box p { margin: 0; color: var(--text-2); }
.ix-exit__close { position: absolute; top: 8px; right: 10px; width: 40px; height: 40px; border: 0; background: none; color: var(--text); font-size: 26px; cursor: pointer; }
.ix-toast { position: fixed; left: 14px; bottom: 82px; z-index: 300; display: flex; gap: 10px; align-items: center; max-width: 280px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 14px; font-size: 12px; box-shadow: 0 8px 30px rgba(0, 0, 0, .5); animation: ixin .35s var(--ease); }
.ix-toast[hidden] { display: none; } .ix-toast div { display: grid; } .ix-toast .cico { width: 30px; height: 30px; }
@keyframes ixin { from { transform: translateY(12px); opacity: 0; } }
@media (max-width: 640px) { .ix-stats, .ix-grid { grid-template-columns: repeat(2, 1fr); } .ix-login { grid-template-columns: 1fr; } .ix-toast { bottom: 76px; } }