/* THEIA — перший екран «Цифри, яким можна вірити» і жива модель ферми (26.10.2026, варіант А з полотна чернеток).
 * Стоїть поверх Next-головної: старий перший екран (main > section:first-of-type) сховано, наш блок — #thh-root на його місці.
 * Кольори й типографіка — дизайн-система THEIA (Ніч, Папір, Золото, Аква; Fixel Display / Fixel Text / JetBrains Mono).
 * Сцени мають фіксований розмір і масштабуються сходинками (--s), щоб 3D не розсипалось на вузьких екранах.
 */
main > section:first-of-type { display: none !important; }
html { overflow-x: clip; }  /* старі блоки Next-збірки (біжучий рядок, сітки) ширші за телефон — без горизонтального прокручування */
#thh-root { --ink:#F6F1E7; --mute:#A9B5B4; --line:#E6E9EE1F; --gold:#F2B233; --aqua:#19B3C2; --dawn:#FF6A3D; --ok:#3DBE92; --raised:#101F22;
  --mono:"JetBrains Mono Variable","JetBrains Mono",ui-monospace,monospace; --disp:"Fixel Display","Fixel Text",system-ui,sans-serif; --text:"Fixel Text",system-ui,sans-serif;
  color: var(--ink); font-family: var(--text); background: #061417; }
#thh-root *, #thh-root *::before, #thh-root *::after { box-sizing: border-box; }
#thh-root > section { overflow-x: clip; }  /* 3D-сцени виходять за колонку — без горизонтального прокручування */
.thh-wrap { max-width: 1280px; margin: 0 auto; padding: 0 32px; }
.thh-kicker { font: 600 13px/18px var(--text); letter-spacing: .06em; text-transform: uppercase; color: var(--gold); }
.thh-card { background: var(--raised); border: 1px solid var(--line); border-radius: 16px; padding: 16px; color: var(--ink); }
.thh-ctitle { font: 600 13px/18px var(--text); letter-spacing: .06em; text-transform: uppercase; color: var(--mute); margin: 0; }
.thh-btn { height: 44px; padding: 0 20px; border-radius: 12px; border: 1px solid transparent; font: 600 15px/1 var(--text); display: inline-flex; align-items: center; justify-content: center; text-decoration: none; cursor: pointer; }
.thh-btn:focus-visible, .thh-chip:focus-visible, .thh-lbl:focus-visible { outline: 2px solid var(--aqua); outline-offset: 2px; }
.thh-btn--primary { background: var(--gold); color: #061417; }
.thh-btn--ghost { background: transparent; color: var(--ink); border-color: #E6E9EE80; }
.thh-btn--ghost:hover { border-color: var(--gold); color: var(--gold); }
.thh-status { display: inline-flex; align-items: center; gap: 8px; font: 400 13px/18px var(--text); color: var(--ink); }
.thh-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.thh-dot--ok { background: var(--ok); } .thh-dot--warn { background: var(--gold); } .thh-dot--crit { background: var(--dawn); box-shadow: 0 0 8px 2px #FF6A3D66; }
.thh-mono { font-family: var(--mono); font-weight: 500; }

/* ---------- перший екран ---------- */
.thh-hero { padding: 150px 0 80px; }
.thh-hero .thh-wrap { display: grid; grid-template-columns: minmax(0, 540px) minmax(0, 1fr); gap: 40px; align-items: center; }
.thh-copy { display: flex; flex-direction: column; gap: 24px; }
.thh-h1 { margin: 0; font: 700 58px/1.04 var(--disp); letter-spacing: -.01em; }
.thh-sub { margin: 0; font-size: 18px; line-height: 28px; color: var(--mute); max-width: 520px; }
.thh-pillars { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 24px; font-size: 15px; }
.thh-pillars li { display: flex; gap: 10px; align-items: baseline; }
.thh-pillars span { font: 500 12px/1 var(--mono); color: var(--gold); }
.thh-ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
.thh-note { margin: 0; font-size: 13px; line-height: 18px; color: var(--mute); }

.thh-box { --s: 1; position: relative; height: calc(640px * var(--s)); }
.thh-stage { position: absolute; left: 0; top: 0; width: 640px; height: 640px; transform: scale(var(--s)); transform-origin: 0 0; perspective: 1700px; perspective-origin: 40% 30%; }
.thh-scene { position: absolute; inset: 40px 0 0 0; transform-style: preserve-3d; transform: rotateX(26deg) rotateY(-16deg) rotateZ(4deg); animation: thh-tilt 14s cubic-bezier(.45,0,.2,1) infinite both; }
.thh-docs { position: absolute; left: 0; top: 40px; width: 150px; display: flex; flex-direction: column; gap: 10px; }
.thh-doc { padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--raised); font: 500 12px/16px var(--mono); color: var(--mute); animation: thh-doc 14s ease-out infinite both; transform: translateZ(-140px); }
.thh-doc b { display: block; color: var(--ink); font-weight: 500; }
.thh-pnl { position: absolute; left: 176px; top: 0; width: 440px; padding: 20px 22px; animation: thh-pnl 14s ease-out infinite both; }
.thh-pnl-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.thh-row { display: flex; justify-content: space-between; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 15px; animation: thh-row 14s ease-out infinite both; }
.thh-row:last-child { border-bottom: 0; }
.thh-row .thh-mono { font-size: 15px; }
.thh-pnl-foot { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.thh-ok { animation: thh-ok 14s ease-out infinite both; }
.thh-src { margin: 10px 0 0; font-size: 12px; line-height: 16px; color: var(--mute); }
.thh-tiles { position: absolute; left: 230px; top: 380px; width: 400px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.thh-tile { padding: 12px; transform: translateZ(110px); animation: thh-tile 14s ease-out infinite both; }
.thh-tile .thh-ctitle { font-size: 11px; margin-bottom: 6px; }
.thh-tile-v { font: 700 24px/28px var(--disp); }
.thh-tile-v small { font: 400 13px var(--text); color: var(--mute); }
.thh-tile-n { font: 500 11px/14px var(--mono); color: var(--mute); margin-top: 4px; }
.thh-alert { position: absolute; left: 380px; top: 290px; width: 270px; padding: 14px 16px; border-color: #FF6A3D99; transform: translateZ(190px); animation: thh-alert 14s cubic-bezier(.2,.9,.3,1.2) infinite both; }
.thh-alert p { margin: 8px 0 0; font-size: 14px; line-height: 20px; }
.thh-alert .thh-mono { display: block; margin-top: 6px; font-size: 11px; line-height: 14px; color: var(--mute); }
@keyframes thh-tilt { 0%,40% { transform: rotateX(0) rotateY(0) rotateZ(0) } 54%,100% { transform: rotateX(26deg) rotateY(-16deg) rotateZ(4deg) } }
@keyframes thh-doc { 0% { opacity: 0; transform: translateX(-90px) translateZ(-140px) } 7%,40% { opacity: 1; transform: translateX(0) translateZ(0) } 54%,90% { opacity: 1; transform: translateZ(-140px) } 100% { opacity: 0; transform: translateZ(-140px) } }
@keyframes thh-pnl { 0%,9% { opacity: 0; transform: translateY(24px) scale(.97) } 15%,92% { opacity: 1; transform: none } 100% { opacity: 0 } }
@keyframes thh-row { 0%,15% { opacity: 0; transform: translateX(-12px) } 20%,92% { opacity: 1; transform: none } 100% { opacity: 0 } }
@keyframes thh-ok { 0%,33% { opacity: 0; transform: scale(.8) } 37%,92% { opacity: 1; transform: none } 100% { opacity: 0 } }
@keyframes thh-tile { 0%,52% { opacity: 0; transform: translateZ(20px) translateY(30px) } 60%,92% { opacity: 1; transform: translateZ(110px) } 100% { opacity: 0; transform: translateZ(110px) } }
@keyframes thh-alert { 0%,66% { opacity: 0; transform: translateZ(190px) scale(.85) } 71%,92% { opacity: 1; transform: translateZ(190px) } 100% { opacity: 0; transform: translateZ(190px) } }

/* ---------- жива модель ферми ---------- */
.thh-farm { padding: 40px 0 96px; border-top: 1px solid var(--line); }
.thh-farm .thh-wrap { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 40px; align-items: start; }
.thh-farm h2 { margin: 0; font: 700 44px/1.08 var(--disp); }
.thh-fcopy { display: flex; flex-direction: column; gap: 20px; padding-top: 32px; }
.thh-fcopy > p { margin: 0; font-size: 17px; line-height: 26px; color: var(--mute); }
.thh-detail { display: flex; flex-direction: column; gap: 10px; padding: 18px 20px; }
.thh-drow { display: flex; justify-content: space-between; gap: 16px; padding-bottom: 8px; border-bottom: 1px solid var(--line); font-size: 15px; }
.thh-drow span:first-child { color: var(--mute); }
.thh-chips { display: none; flex-wrap: wrap; gap: 8px; }
.thh-chip { min-height: 44px; padding: 0 14px; border-radius: 12px; border: 1px solid #E6E9EE38; background: var(--raised); color: var(--ink); font: 600 13px/1 var(--text); cursor: pointer; }
.thh-chip[aria-pressed="true"] { border-color: var(--gold); color: var(--gold); }
.thh-legend { display: flex; gap: 20px; font-size: 13px; color: var(--mute); }
.thh-legend span { display: flex; align-items: center; gap: 8px; }
.thh-legend i { width: 10px; height: 10px; border-radius: 50%; }
.thh-fbox { --s: 1; position: relative; height: calc(660px * var(--s)); }
.thh-fstage { position: absolute; left: 0; top: 0; width: 860px; height: 660px; transform: scale(var(--s)); transform-origin: 0 0; perspective: 2200px; perspective-origin: 50% 25%; }
.thh-live { position: absolute; right: 0; top: 0; display: flex; align-items: center; gap: 8px; font: 500 12px/16px var(--mono); color: var(--mute); }
.thh-live i { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); animation: thh-blink 2.4s ease-in-out infinite; }
@keyframes thh-blink { 50% { opacity: .35 } }
.thh-plate { position: absolute; left: 50%; top: 49%; width: 700px; height: 480px; margin: -240px 0 0 -350px; transform-style: preserve-3d; transform: rotateX(60deg) rotateZ(45deg); border-radius: 28px; background: #0B1C1F; border: 1px solid #E6E9EE1A; }
.thh-o { position: absolute; transform-style: preserve-3d; }
.thh-top { position: absolute; inset: 0; background: #18323A; border: 1px solid #E6E9EE2E; }
.thh-front { position: absolute; left: 0; top: 100%; width: 100%; background-color: #12262B; border: 1px solid var(--line); transform-origin: top center; transform: rotateX(90deg);
  background-image: repeating-linear-gradient(90deg, transparent 0 12px, #F2B23333 12px 20px); background-size: 100% 7px; background-position: 0 40%; background-repeat: no-repeat; }
.thh-side { position: absolute; left: 100%; top: 0; height: 100%; background: #0E2125; border: 1px solid var(--line); transform-origin: left center; transform: rotateY(-90deg); }
.thh-roof { position: absolute; left: -4px; right: -4px; border: 1px solid #E6E9EE2E; background: repeating-linear-gradient(90deg, #2A4A51 0 7px, #23424A 7px 14px); }
.thh-roof.a { top: 0; transform-origin: top center; }
.thh-roof.b { bottom: 0; transform-origin: bottom center; background: repeating-linear-gradient(90deg, #365C64 0 7px, #2E535B 7px 14px); }
.thh-o.on .thh-roof, .thh-o.on .thh-top { border-color: var(--gold); }
.thh-sp { position: absolute; width: 0; height: 0; transform-style: preserve-3d; }
.thh-up { position: absolute; bottom: 0; transform-origin: 50% 100%; transform: rotateZ(-45deg) rotateX(-60deg); }
.thh-silo { border-radius: 18px 18px 4px 4px / 9px 9px 4px 4px; background: linear-gradient(90deg, #16313A, #3A626B 55%, #1B3940); box-shadow: inset 0 10px 0 -6px #4E7880; }
.thh-silo i { position: absolute; left: 0; right: 0; height: 2px; background: #0B1C1F66; }
.thh-tank { border-radius: 20px 20px 6px 6px / 10px 10px 6px 6px; background: linear-gradient(90deg, #7F9497, #E3EAEA 50%, #8EA3A6); }
.thh-tree { background: linear-gradient(90deg, #1B4A3A, #2E7A5C); clip-path: polygon(50% 0, 100% 88%, 58% 88%, 58% 100%, 42% 100%, 42% 88%, 0 88%); }
.thh-field { position: absolute; border-radius: 8px; background: repeating-linear-gradient(90deg, #1C4234 0 10px, #24503F 10px 20px); }
.thh-pad { position: absolute; border: 2px dashed #A9B5B455; border-radius: 10px; background: #11302A; }
.thh-cow { position: absolute; width: 12px; height: 7px; border-radius: 4px; background: #E9E3D6; box-shadow: inset -3px 0 0 #26302F; animation: thh-graze 9s ease-in-out infinite alternate; }
@keyframes thh-graze { to { transform: translate(9px, 5px) } }
.thh-road { position: absolute; background: #08161A; border-radius: 6px; }
.thh-road::after { content: ""; position: absolute; left: 8px; right: 8px; top: 50%; border-top: 2px dashed #E6E9EE33; }
.thh-truck { position: absolute; left: 0; top: 0; transform-style: preserve-3d; animation: thh-drive 11s linear infinite; }
@keyframes thh-drive { 0% { transform: translate3d(240px, 404px, 0); opacity: 0 } 6%,88% { opacity: 1 } 100% { transform: translate3d(660px, 404px, 0); opacity: 0 } }
.thh-flow { position: absolute; left: 0; top: 0; width: 9px; height: 9px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--aqua); animation: thh-flow 3s linear infinite both; }
.thh-flow.money { background: var(--gold); }
@keyframes thh-flow { 0% { opacity: 0; transform: translate3d(var(--x0), var(--y0), 6px) } 12%,88% { opacity: 1 } 100% { opacity: 0; transform: translate3d(var(--x1), var(--y1), 6px) } }
.thh-pin { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform-style: preserve-3d; }  /* точка прив'язки мітки, повернута до глядача */
.thh-lbl { position: absolute; left: 0; bottom: 0; display: flex; flex-direction: column; gap: 2px; justify-content: center; min-height: 44px; white-space: nowrap; padding: 7px 12px; border-radius: 12px;
  border: 1px solid #E6E9EE38; background: #0F1F22F2; color: var(--ink); font: 600 11px/14px var(--text); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; text-align: left; }
.thh-lbl b { font: 500 14px/18px var(--mono); letter-spacing: 0; text-transform: none; }
.thh-lbl[aria-pressed="true"] { border-color: var(--gold); color: var(--gold); }
.thh-lbl.crit { box-shadow: 0 0 0 1px #FF6A3D99; }
.thh-log { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; gap: 4px; font: 500 13px/18px var(--mono); }
.thh-log > div { display: grid; grid-template-columns: 56px 110px minmax(0, 1fr); gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.thh-log > div:last-child { border-bottom: 0; }
.thh-log > div > span:first-child { color: var(--mute); }

/* ---------- ширина екрана ---------- */
@media (max-width: 1359px) { .thh-box { --s: .9 } .thh-fbox { --s: .84 } }
@media (max-width: 1279px) { .thh-box { --s: .82 } .thh-fbox { --s: .8 } .thh-h1 { font-size: 50px } }
@media (max-width: 1099px) { .thh-box { --s: .7 } .thh-fbox { --s: .66 } }
@media (max-width: 999px) {
  .thh-hero { padding: 120px 0 56px; }
  .thh-hero .thh-wrap, .thh-farm .thh-wrap { grid-template-columns: minmax(0, 1fr); }
  .thh-box { --s: .95; max-width: 610px; } .thh-fbox { --s: .78; }
  .thh-fcopy { padding-top: 0; }
}
@media (max-width: 719px) {
  .thh-wrap { padding: 0 16px; }
  .thh-h1 { font-size: 40px; } .thh-farm h2 { font-size: 32px; }
  .thh-pillars { grid-template-columns: minmax(0, 1fr); }
  .thh-box { --s: .56; } .thh-fbox { --s: .42; }
  .thh-chips { display: flex; } .thh-lbl { display: none; } .thh-log, .thh-live { display: none; }
}
@media (max-width: 400px) { .thh-box { --s: .5; } .thh-fbox { --s: .4; } }
@media (prefers-reduced-motion: reduce) {
  .thh-scene, .thh-doc, .thh-pnl, .thh-row, .thh-ok, .thh-tile, .thh-alert, .thh-cow, .thh-live i { animation: none; }
  .thh-flow, .thh-truck { display: none; }
}