/* ===========================================================
   HERO v3 — кинематографичный тёмный блок
   Графитовая панель с бирюзовым свечением, крупный заголовок,
   живой «терминал» разработчика, count-up статистика и marquee.
   Заскоуплено под .hero2.
   =========================================================== */
.hero2{
  position:relative;z-index:1;
  max-width:var(--maxw);margin:0 auto;
  padding:clamp(20px,4vw,40px) 24px clamp(40px,6vw,72px);
}

/* ── тёмная панель-сцена ── */
.hero2__panel{
  position:relative;overflow:hidden;
  border-radius:24px;
  background:
    radial-gradient(120% 120% at 80% -10%, rgba(15,118,110,.34), transparent 55%),
    radial-gradient(90% 90% at 0% 110%, rgba(232,163,23,.10), transparent 50%),
    linear-gradient(160deg, #0B1D1B 0%, #0A1614 55%, #081210 100%);
  border:1px solid rgba(94,234,212,.14);
  box-shadow:
    0 2px 8px rgba(8,18,16,.4),
    0 40px 90px -40px rgba(8,18,16,.9),
    inset 0 1px 0 rgba(255,255,255,.05);
  isolation:isolate;
}
/* тонкая техническая сетка поверх панели */
.hero2__panel::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(94,234,212,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(94,234,212,.05) 1px, transparent 1px);
  background-size:44px 44px;
  mask-image:radial-gradient(120% 100% at 70% 0%, #000 40%, transparent 85%);
  -webkit-mask-image:radial-gradient(120% 100% at 70% 0%, #000 40%, transparent 85%);
}
/* плавающее свечение-«дыхание» */
.hero2__glow{
  position:absolute;z-index:0;top:-20%;right:-8%;
  width:520px;height:520px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle, rgba(45,212,191,.30), transparent 65%);
  filter:blur(18px);
  animation:heroBreath 9s ease-in-out infinite;
}
@keyframes heroBreath{
  0%,100%{transform:translate(0,0) scale(1);opacity:.9}
  50%{transform:translate(-24px,26px) scale(1.12);opacity:1}
}

.hero2__inner{
  position:relative;z-index:1;
  display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4vw,56px);
  align-items:center;
  padding:clamp(30px,4.6vw,62px) clamp(26px,4vw,58px) clamp(20px,2.6vw,32px);
}

/* ── левая колонка ── */
.hero2 .eyebrow2{display:inline-flex;align-items:center;gap:12px;
  font-family:var(--mono);font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(226,240,237,.62);margin-bottom:clamp(20px,2.6vw,30px);
  padding:8px 14px;border:1px solid rgba(94,234,212,.20);border-radius:100px;
  background:rgba(10,22,20,.5);backdrop-filter:blur(6px)}
.hero2 .eyebrow2 .dot{width:7px;height:7px;border-radius:50%;background:var(--gold);
  box-shadow:0 0 0 0 rgba(232,163,23,.55);animation:h2pulse 2.4s ease-out infinite}
.hero2 .eyebrow2 b{color:#eafffb;font-weight:600}
@keyframes h2pulse{
  0%{box-shadow:0 0 0 0 rgba(232,163,23,.55)}
  70%{box-shadow:0 0 0 8px rgba(232,163,23,0)}
  100%{box-shadow:0 0 0 0 rgba(232,163,23,0)}
}

.hero2 .title2{font-family:var(--disp);font-weight:700;color:#F5FBFA;
  font-size:clamp(2.25rem,5.9vw,4.6rem);line-height:1.02;letter-spacing:-.035em;
  margin-bottom:clamp(20px,2.6vw,30px);text-wrap:balance;
  text-shadow:0 1px 0 rgba(255,255,255,.06),0 18px 40px rgba(0,0,0,.35);
  opacity:0;transform:translateY(16px);animation:titleIn .8s cubic-bezier(.22,1,.36,1) .1s forwards}
@keyframes titleIn{to{opacity:1;transform:none}}
.hero2 .title2 .accent{
  position:relative;display:inline-block;color:transparent;-webkit-background-clip:text;background-clip:text;
  background-image:linear-gradient(120deg,#7dffec 0%,#2dd4bf 45%,#0f766e 100%);
  -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 6px 18px rgba(20,184,166,.45));
}
.hero2 .title2 .accent::before{
  content:"";position:absolute;inset:-18% -10%;z-index:-1;border-radius:50%;
  background:radial-gradient(closest-side,rgba(45,212,191,.32),transparent 72%);
  filter:blur(6px);opacity:0;animation:accentGlow 1.1s .35s ease forwards}
@keyframes accentGlow{to{opacity:1}}
.hero2 .title2 .accent::after{
  content:"";position:absolute;left:0;right:0;bottom:.02em;height:.11em;border-radius:4px;
  background:linear-gradient(90deg,#5eead4,#0f766e);opacity:.65;
  transform:scaleX(0);transform-origin:left;animation:accentUnderline 1s .55s ease forwards}
@keyframes accentUnderline{to{transform:scaleX(1)}}
@media (prefers-reduced-motion: reduce){
  .hero2 .title2{opacity:1;transform:none;animation:none}
  .hero2 .title2 .accent::before{animation:none;opacity:1}
}

.hero2 .sub2{font-size:clamp(1rem,1.4vw,1.18rem);line-height:1.62;color:rgba(214,232,228,.72);
  max-width:540px;margin-bottom:clamp(26px,3vw,36px)}

.hero2 .actions2{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:clamp(30px,3.6vw,44px)}
.hero2 .btn2{font-family:"Manrope",sans-serif;font-weight:700;font-size:.96rem;
  padding:16px 30px;border-radius:12px;text-decoration:none;display:inline-flex;align-items:center;gap:10px;
  cursor:pointer;border:1px solid transparent;
  transition:transform .2s cubic-bezier(.2,.7,.2,1),box-shadow .2s,background .2s,border-color .2s,color .2s}
.hero2 .btn2 span{transition:transform .25s cubic-bezier(.2,.7,.2,1)}
.hero2 .btn2--primary{background:linear-gradient(120deg,#14b8a6,#0f766e);color:#fff;
  box-shadow:0 4px 0 0 #0a4f48,0 10px 28px -8px rgba(20,184,166,.6),inset 0 1px 0 rgba(255,255,255,.25);
  transform:translateY(0)}
.hero2 .btn2--primary:hover{transform:translateY(-2px);
  box-shadow:0 6px 0 0 #0a4f48,0 18px 38px -8px rgba(20,184,166,.75),inset 0 1px 0 rgba(255,255,255,.3)}
.hero2 .btn2--primary:hover span{transform:translateX(4px)}
.hero2 .btn2--primary:active{transform:translateY(2px);
  box-shadow:0 1px 0 0 #0a4f48,0 8px 20px -8px rgba(20,184,166,.55),inset 0 1px 0 rgba(255,255,255,.2)}
.hero2 .btn2--ghost{background:rgba(255,255,255,.04);color:#eafffb;border-color:rgba(94,234,212,.28);
  box-shadow:0 3px 0 0 rgba(94,234,212,.16);transform:translateY(0)}
.hero2 .btn2--ghost:hover{border-color:rgba(94,234,212,.6);background:rgba(94,234,212,.10);transform:translateY(-2px);
  box-shadow:0 5px 0 0 rgba(94,234,212,.22)}
.hero2 .btn2--ghost:active{transform:translateY(2px);box-shadow:0 1px 0 0 rgba(94,234,212,.16)}
.hero2 .btn2:focus-visible{outline:2px solid #5eead4;outline-offset:3px}
@media (prefers-reduced-motion: reduce){
  .hero2 .btn2--primary:hover,.hero2 .btn2--primary:active,.hero2 .btn2--ghost:hover,.hero2 .btn2--ghost:active{transform:none}
}

/* count-up статистика */
.hero2__stats{display:flex;gap:clamp(20px,3vw,40px);flex-wrap:wrap;
  padding-top:clamp(22px,2.6vw,30px);border-top:1px solid rgba(94,234,212,.14)}
.hstat{display:flex;flex-direction:column;gap:2px}
.hstat__num{font-family:var(--disp);font-weight:800;font-size:clamp(1.7rem,3vw,2.3rem);
  line-height:1;letter-spacing:-.03em;color:#F5FBFA}
.hstat span{font-family:var(--mono);font-size:.68rem;line-height:1.35;letter-spacing:.08em;
  text-transform:uppercase;color:rgba(180,206,200,.6)}

/* ── правый «терминал» ── */
.terminal{
  position:relative;border-radius:14px;overflow:hidden;
  background:linear-gradient(180deg,#0a1917,#07120f);
  border:1px solid rgba(94,234,212,.16);
  box-shadow:0 30px 70px -30px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.04);
  transform:perspective(1200px) rotateY(-7deg) rotateX(3deg);
  transition:transform .5s cubic-bezier(.2,.7,.2,1);
}
.terminal:hover{transform:perspective(1200px) rotateY(0deg) rotateX(0deg)}
.terminal__bar{display:flex;align-items:center;gap:8px;padding:12px 16px;
  background:rgba(255,255,255,.03);border-bottom:1px solid rgba(94,234,212,.12)}
.terminal__dot{width:11px;height:11px;border-radius:50%;background:#26413d}
.terminal__dot:nth-child(1){background:#ff5f57}
.terminal__dot:nth-child(2){background:#febc2e}
.terminal__dot:nth-child(3){background:#28c840}
.terminal__title{margin-left:8px;font-family:var(--mono);font-size:.72rem;letter-spacing:.04em;
  color:rgba(180,206,200,.55)}
.terminal__body{margin:0;padding:22px 22px 24px;font-family:var(--mono);
  font-size:clamp(.76rem,1vw,.86rem);line-height:1.85;color:#cfe9e3;overflow-x:auto}
.terminal__body code{white-space:pre}
.terminal .tl{display:block;opacity:0;transform:translateY(6px);
  animation:tlIn .4s ease forwards}
.terminal .tl:nth-child(1){animation-delay:.30s}
.terminal .tl:nth-child(2){animation-delay:.55s}
.terminal .tl:nth-child(3){animation-delay:.75s}
.terminal .tl:nth-child(4){animation-delay:.95s}
.terminal .tl:nth-child(5){animation-delay:1.15s}
.terminal .tl:nth-child(6){animation-delay:1.35s}
.terminal .tl:nth-child(7){animation-delay:1.6s}
@keyframes tlIn{to{opacity:1;transform:none}}
.terminal .tl-live{display:block}
.terminal .c-muted{color:#5c8078}
.terminal .c-fn{color:#5eead4}
.terminal .c-key{color:#f0a868}
.terminal .c-prop{color:#7dd3fc}
.terminal .c-str{color:#a7f3d0}
.terminal .c-bool{color:#fca5a5}
.terminal .c-ok{color:#4ade80}
.terminal .caret{color:#5eead4;animation:blink 1.05s step-end infinite;margin-left:2px}
@keyframes blink{50%{opacity:0}}

/* ── marquee ── */
.marquee{position:relative;z-index:1;overflow:hidden;
  border-top:1px solid rgba(94,234,212,.12);
  padding:14px 0;
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee__track{display:flex;align-items:center;gap:26px;width:max-content;
  animation:marqueeMove 28s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee__track span{font-family:var(--mono);font-size:.8rem;letter-spacing:.12em;
  text-transform:uppercase;color:rgba(200,224,218,.62);white-space:nowrap}
.marquee__track i{width:5px;height:5px;border-radius:50%;background:rgba(94,234,212,.55);flex:none}
@keyframes marqueeMove{to{transform:translateX(-50%)}}

@media(max-width:920px){
  .hero2__inner{grid-template-columns:1fr}
  .terminal{transform:none;max-width:520px}
  .terminal:hover{transform:none}
}
@media(max-width:520px){
  .hero2__panel{border-radius:18px}
  .hero2 .actions2{flex-direction:column;align-items:stretch}
  .hero2 .btn2{justify-content:center}
  .terminal{display:none}
}
@media(prefers-reduced-motion:reduce){
  .hero2__glow,.terminal .tl,.caret,.marquee__track,.hero2 .title2 .accent::after{animation:none}
  .terminal .tl{opacity:1;transform:none}
  .hero2 .title2 .accent::after{transform:scaleX(1)}
}