/* ══════════════════════════════════════
   HERO BLUEPRINT — tset.ru
   ══════════════════════════════════════ */
.site-hero {
  position: relative;
  background: #07192e;
  overflow: hidden;
  font-family: 'Manrope', sans-serif;
  color: #c8d8e8;
  width: 100%;
}

.sh-blueprint {
  position: absolute; top: 0; right: 0; bottom: 0;
  z-index: 0;
  pointer-events: none;
  width: 130%; height: 100%;
}

.sh-overlay {
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 55%;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg,
    rgba(7,25,46,.95) 0%,
    rgba(7,25,46,.88) 25%,
    rgba(7,25,46,.75) 50%,
    rgba(7,25,46,.55) 75%,
    rgba(7,25,46,.0) 100%
  );
}

.sh-body {
  display: grid;
  grid-template-columns: 52% 1fr;
  min-height: 520px;
  position: relative; z-index: 2;
  max-width: 1440px;
  margin: 0 auto;
}

.sh-left {
  padding: 60px 48px 60px 44px;
  display: flex; flex-direction: column;
  justify-content: center;
}

.sh-eyebrow {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 28px;
  opacity: 0; animation: up .4s .1s ease both;
}
.sh-ey-line { width: 22px; height: 1.5px; background: #4a9eff; flex-shrink: 0; }
.sh-ey-txt {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
  color: #4a9eff;
}

.sh-h1 {
  font-family: 'Oswald', sans-serif;
  font-size: clamp(44px, 5.8vw, 76px);
  font-weight: 700; line-height: .88;
  letter-spacing: .01em; text-transform: uppercase;
  color: #fff; margin-bottom: 24px;
  opacity: 0; animation: up .55s .2s ease both;
}
.sh-h1 .hi { color: #4a9eff; }
.sh-h1 .lo { font-weight: 300; color: #2a5070; }

.sh-desc {
  font-size: 14px; font-weight: 300; line-height: 1.75;
  color: #6a8aa8; max-width: 420px; margin-bottom: 36px;
  opacity: 0; animation: up .5s .32s ease both;
}
.sh-desc strong { color: #c8d8e8; font-weight: 500; }

.sh-cta {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  opacity: 0; animation: up .45s .44s ease both;
}
.sh-btn-main {
  display: inline-flex; align-items: center; gap: 10px;
  background: #4a9eff; color: #fff;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  text-decoration: none; padding: 13px 24px;
  border: 1.5px solid #4a9eff;
  transition: background .18s, color .18s;
}
.sh-btn-main:hover { background: transparent; color: #4a9eff; }
.sh-btn-main svg { width: 12px; height: 12px; }
.sh-btn-out {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  color: #2a5070; text-decoration: none;
  border-bottom: 1px solid #0f2d4a;
  padding-bottom: 2px;
  transition: color .15s, border-color .15s;
}
.sh-btn-out:hover { color: #c8d8e8; border-color: #2a5070; }

.sh-stats {
  display: flex; gap: 0;
  margin-top: 44px; padding-top: 28px;
  border-top: 1px solid #0a2038;
  opacity: 0; animation: up .45s .58s ease both;
}
.sh-stat {
  flex: 1; padding-right: 22px; margin-right: 22px;
  border-right: 1px solid #0a2038;
}
.sh-stat:last-child { border: none; padding: 0; margin: 0; }
.sh-stat-n {
  font-family: 'Oswald', sans-serif;
  font-size: 30px; font-weight: 600; line-height: 1;
  color: #fff; letter-spacing: .01em;
}
.sh-stat-n sup { font-size: 12px; color: #4a9eff; }
.sh-stat-l {
  font-size: 10px; letter-spacing: .07em; text-transform: uppercase;
  color: #6a9fc0; margin-top: 4px;
}

.sh-right {
  border-left: 1px solid #091e34;
  display: flex; flex-direction: column;
  position: relative; z-index: 3;
  opacity: 0; animation: fade .7s .35s ease both;
}
.sh-right-hd {
  padding: 16px 24px; border-bottom: 1px solid #091e34;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px; letter-spacing: .2em; text-transform: uppercase;
  color: #1a3d5a;
  display: flex; align-items: center; gap: 8px;
}
.sh-right-hd::before {
  content: ''; width: 4px; height: 4px;
  border-radius: 50%; background: #4a9eff; flex-shrink: 0;
  animation: blink 2s infinite;
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.3} }

.sh-cats { flex: 1; display: flex; flex-direction: column; }
.sh-cat {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 20px;
  border-bottom: 1px solid #071828;
  text-decoration: none;
  position: relative; overflow: hidden;
  transition: background .15s;
}
.sh-cat::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  width: 2px; background: #4a9eff;
  transform: scaleY(0); transform-origin: bottom;
  transition: transform .22s ease;
}
.sh-cat:hover { background: rgba(74,158,255,.05); }
.sh-cat:hover::before { transform: scaleY(1); }
.sh-cat-icon {
  width: 30px; height: 30px; flex-shrink: 0;
  border: 1px solid #0a2038;
  display: grid; place-items: center; color: #1e4a72;
  transition: color .15s, border-color .15s;
}
.sh-cat:hover .sh-cat-icon { color: #4a9eff; border-color: #1a3a6a; }
.sh-cat-icon svg { width: 14px; height: 14px; }
.sh-cat-info { flex: 1; min-width: 0; }
.sh-cat-name {
  font-size: 12.5px; font-weight: 300; color: #c8e8ff;
  transition: color .15s;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sh-cat:hover .sh-cat-name { color: #fff; }
.sh-cat-sub {
  font-size: 10px; color: #7ab0d0; margin-top: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sh-cat-arr {
  color: #7ab0d0; flex-shrink: 0;
  transition: color .15s, transform .15s;
}
.sh-cat:hover .sh-cat-arr { color: #4a9eff; transform: translateX(3px); }

.sh-ticker {
  border-top: 1px solid #091e34; height: 40px;
  overflow: hidden; display: flex; align-items: center;
  background: #040e1c; position: relative; z-index: 2;
}
.sh-tick-track {
  display: flex;
  animation: scroll 42s linear infinite;
  white-space: nowrap;
}
.sh-tick {
  flex-shrink: 0; display: flex; align-items: center; gap: 12px;
  padding: 0 26px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px; letter-spacing: .13em; text-transform: uppercase;
  color: #6a9fc0;
}
.sh-tick-dot { width: 4px; height: 4px; border-radius: 50%; background: #4a9eff; flex-shrink: 0; }

@keyframes up   { from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:none} }
@keyframes fade { from{opacity:0} to{opacity:1} }
@keyframes scroll { to{transform:translateX(-50%)} }

/* SVG Blueprint Animations */
.draw-1 {
  stroke-dasharray: 1500; stroke-dashoffset: 1500;
  animation: lp1 14s 0s ease-in-out infinite;
}
.draw-2 {
  stroke-dasharray: 1000; stroke-dashoffset: 1000;
  animation: lp2 14s .5s ease-in-out infinite;
}
.draw-3 {
  stroke-dasharray: 600; stroke-dashoffset: 600;
  animation: lp3 14s 1.0s ease-in-out infinite;
}
.draw-4 {
  stroke-dasharray: 400; stroke-dashoffset: 400;
  animation: lp4 14s 1.4s ease-in-out infinite;
}
.draw-5 {
  stroke-dasharray: 300; stroke-dashoffset: 300;
  animation: lp5 14s 1.7s ease-in-out infinite;
}
.draw-dim {
  stroke-dasharray: 800; stroke-dashoffset: 800;
  animation: lpd 14s 1.9s ease-in-out infinite;
}

@keyframes lp1 { 0%,100%{stroke-dashoffset:1500} 28%,68%{stroke-dashoffset:0} 84%{stroke-dashoffset:1500} }
@keyframes lp2 { 0%,100%{stroke-dashoffset:1000} 28%,68%{stroke-dashoffset:0} 84%{stroke-dashoffset:1000} }
@keyframes lp3 { 0%,100%{stroke-dashoffset:600}  28%,68%{stroke-dashoffset:0} 84%{stroke-dashoffset:600}  }
@keyframes lp4 { 0%,100%{stroke-dashoffset:400}  28%,68%{stroke-dashoffset:0} 84%{stroke-dashoffset:400}  }
@keyframes lp5 { 0%,100%{stroke-dashoffset:300}  28%,68%{stroke-dashoffset:0} 84%{stroke-dashoffset:300}  }
@keyframes lpd { 0%,100%{stroke-dashoffset:800}  28%,68%{stroke-dashoffset:0} 84%{stroke-dashoffset:800}  }

.fade-1 { opacity:0; animation: opL 14s  .8s ease-in-out infinite; }
.fade-2 { opacity:0; animation: opL 14s 1.1s ease-in-out infinite; }
.fade-3 { opacity:0; animation: opL 14s 1.4s ease-in-out infinite; }
.fade-4 { opacity:0; animation: opL 14s 1.7s ease-in-out infinite; }
.fade-5 { opacity:0; animation: opL 14s 2.0s ease-in-out infinite; }

@keyframes opL { 0%,100%{opacity:0} 32%,68%{opacity:1} 82%{opacity:0} }

.pipe-pulse {
  animation: pipePulse 2.4s ease-in-out infinite;
}
@keyframes pipePulse { 0%,100%{r:3;opacity:.8} 50%{r:5.5;opacity:.35} }

@media (max-width: 860px) {
  .sh-body { grid-template-columns: 1fr; }
  .sh-right { display: none; }
  .sh-left { padding: 40px 24px; }
}