/* ============================================================
   NEWS PIPELINE · AI News & Content Platform · Landing
   Тот же язык дизайна, что и страница входа (newspipeline-login):
   тёмный командный HUD, неон cyan/orange, Orbitron + Rajdhani.
   ============================================================ */

:root{
  --ink:#060b12;
  --panel:rgba(10,20,32,.78);
  --panel-solid:#0a1420;
  --cyan:#45e0f5;
  --cyan-dim:rgba(69,224,245,.35);
  --cyan-glow:rgba(69,224,245,.18);
  --cyan-soft:#c9f6ff;
  --orange:#ff9a3c;
  --orange-dim:rgba(255,154,60,.4);
  --green:#54f0b8;
  --steel:#7e97a8;
  --line:rgba(69,224,245,.22);
  --font-d:'Orbitron',sans-serif;
  --font-b:'Rajdhani',sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  background:var(--ink);
  font-family:var(--font-b);
  color:var(--cyan-soft);
  overflow-x:hidden;
  min-height:100vh;
}

/* ================= SCENE / BACKGROUND ================= */

.scene{
  position:relative;
  min-height:100vh;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:56px 24px 64px;
  background:
    radial-gradient(1200px 700px at 50% 20%, #0d1c2c 0%, transparent 60%),
    radial-gradient(900px 600px at 15% 85%, #0a1826 0%, transparent 55%),
    radial-gradient(900px 600px at 85% 80%, #0a1826 0%, transparent 55%),
    var(--ink);
}

/* moving grid floor */
.bg-floor{
  position:fixed;
  left:-20%;
  right:-20%;
  bottom:-12%;
  height:55%;
  background-image:
    linear-gradient(rgba(69,224,245,.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(69,224,245,.10) 1px, transparent 1px);
  background-size:64px 64px;
  transform:perspective(600px) rotateX(62deg);
  transform-origin:center top;
  -webkit-mask-image:linear-gradient(to bottom, transparent, #000 30%, transparent 95%);
          mask-image:linear-gradient(to bottom, transparent, #000 30%, transparent 95%);
  animation:floorScroll 14s linear infinite;
  pointer-events:none;
  z-index:0;
}
@keyframes floorScroll{
  from{background-position:0 0, 0 0}
  to{background-position:0 64px, 0 0}
}

/* ceiling cables */
.bg-cables{
  position:absolute;
  top:0;left:0;right:0;
  height:220px;
  pointer-events:none;
  opacity:.6;
  z-index:0;
}
.bg-cables svg{width:100%;height:100%}

/* ambient particles */
.bg-dust{
  position:fixed;
  inset:0;
  pointer-events:none;
  overflow:hidden;
  z-index:0;
}
.dust{
  position:absolute;
  width:3px;height:3px;
  border-radius:50%;
  background:var(--cyan);
  opacity:0;
  filter:blur(.5px);
  animation:dustFloat linear infinite;
}
@keyframes dustFloat{
  0%{transform:translateY(20px);opacity:0}
  15%{opacity:.55}
  85%{opacity:.35}
  100%{transform:translateY(-80vh);opacity:0}
}

/* ================= HUD FRAME ================= */

.hud{
  position:relative;
  width:min(1180px,100%);
  z-index:1;
}

.hud-frame{
  position:relative;
  background:linear-gradient(180deg, rgba(12,24,38,.92), rgba(8,16,26,.94));
  border:1px solid var(--line);
  box-shadow:
    0 0 60px rgba(69,224,245,.10),
    0 30px 80px rgba(0,0,0,.6),
    inset 0 0 80px rgba(69,224,245,.04);
  padding:44px 40px 36px;
  clip-path:polygon(28px 0, calc(100% - 28px) 0, 100% 28px, 100% calc(100% - 28px), calc(100% - 28px) 100%, 28px 100%, 0 calc(100% - 28px), 0 28px);
}

.corner{
  position:absolute;
  width:34px;height:34px;
  border:2px solid var(--cyan);
  filter:drop-shadow(0 0 6px var(--cyan-dim));
  pointer-events:none;
  z-index:5;
}
.corner.tl{top:-2px;left:-2px;border-right:none;border-bottom:none}
.corner.tr{top:-2px;right:-2px;border-left:none;border-bottom:none}
.corner.bl{bottom:-2px;left:-2px;border-right:none;border-top:none}
.corner.br{bottom:-2px;right:-2px;border-left:none;border-top:none}

.hud-scan{
  position:absolute;
  left:0;right:0;
  height:110px;
  top:-110px;
  background:linear-gradient(to bottom, transparent, rgba(69,224,245,.06) 60%, rgba(69,224,245,.14) 98%, rgba(69,224,245,.35) 100%);
  animation:hudScan 9s linear infinite;
  pointer-events:none;
  z-index:4;
}
@keyframes hudScan{
  0%{top:-110px;opacity:0}
  8%{opacity:1}
  90%{opacity:1}
  100%{top:100%;opacity:0}
}

/* ================= HERO ================= */

.hero{
  text-align:center;
  padding:8px 0 30px;
}

.logo{
  position:relative;
  width:92px;height:104px;
  margin:0 auto 16px;
  animation:logoFloat 5s ease-in-out infinite;
}
@keyframes logoFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.logo svg{width:100%;height:100%;display:block;overflow:visible}
.logo .hex-outer{
  fill:rgba(8,18,30,.9);
  stroke:url(#hexGrad);
  stroke-width:2.5;
  filter:drop-shadow(0 0 12px rgba(255,154,60,.35)) drop-shadow(0 0 20px rgba(69,224,245,.25));
}
.logo .hex-inner{fill:none;stroke:rgba(69,224,245,.4);stroke-width:1;stroke-dasharray:4 6}
.logo .glyph{
  font-family:var(--font-d);
  font-size:44px;
  font-weight:900;
  fill:#fff;
  text-anchor:middle;
  dominant-baseline:central;
  filter:drop-shadow(0 0 8px var(--cyan))
}
.logo .halo{
  fill:none;
  stroke:var(--cyan-dim);
  stroke-width:1;
  animation:haloPulse 3s ease-in-out infinite;
  transform-origin:center;
}
@keyframes haloPulse{
  0%,100%{opacity:.2;transform:scale(1)}
  50%{opacity:.7;transform:scale(1.06)}
}

.hero h1{
  font-family:var(--font-d);
  font-size:clamp(26px,4.4vw,44px);
  font-weight:900;
  letter-spacing:.16em;
  margin-right:-.16em;
  white-space:nowrap;
  color:#fff;
  text-shadow:
    0 0 10px rgba(69,224,245,.7),
    0 0 34px rgba(69,224,245,.35);
  animation:brandGlow 4s ease-in-out infinite;
}
@keyframes brandGlow{
  0%,100%{text-shadow:0 0 10px rgba(69,224,245,.7),0 0 34px rgba(69,224,245,.35)}
  50%{text-shadow:0 0 14px rgba(69,224,245,.95),0 0 48px rgba(69,224,245,.5)}
}
.hero .sub{
  font-family:var(--font-d);
  font-size:11px;
  font-weight:500;
  letter-spacing:.42em;
  margin-right:-.42em;
  color:var(--steel);
  text-transform:uppercase;
  margin-top:10px;
}
.hero .lead{
  max-width:760px;
  margin:22px auto 26px;
  font-size:17px;
  font-weight:500;
  line-height:1.65;
  letter-spacing:.04em;
  color:var(--cyan-soft);
}
.hero .lead b{color:#fff;font-weight:600}

/* CTA — как кнопка входа */
.btn-signin{
  position:relative;
  display:inline-block;
  padding:13px 46px;
  font-family:var(--font-d);
  font-size:15px;
  font-weight:700;
  letter-spacing:.28em;
  text-transform:uppercase;
  text-decoration:none;
  color:#03222b;
  cursor:pointer;
  border:1px solid var(--cyan);
  background:linear-gradient(180deg, #9ff1fd 0%, #45e0f5 55%, #23b9d6 100%);
  box-shadow:
    0 0 16px rgba(69,224,245,.45),
    0 0 46px rgba(69,224,245,.18),
    inset 0 1px 0 rgba(255,255,255,.55);
  clip-path:polygon(12px 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 12px 100%, 0 50%);
  transition:transform .15s ease, box-shadow .25s ease, filter .25s ease;
  overflow:hidden;
}
.btn-signin .chev{letter-spacing:0;margin-left:10px;font-weight:900}
.btn-signin:hover{
  filter:brightness(1.08);
  box-shadow:0 0 24px rgba(69,224,245,.7), 0 0 70px rgba(69,224,245,.3), inset 0 1px 0 rgba(255,255,255,.6);
}
.btn-signin:active{transform:translateY(1px) scale(.995)}
.btn-signin::before{
  content:'';
  position:absolute;
  top:-40%;bottom:-40%;
  width:34%;
  left:-45%;
  background:linear-gradient(105deg, transparent, rgba(255,255,255,.75), transparent);
  transform:skewX(-20deg);
  animation:shine 3.4s ease-in-out infinite;
}
@keyframes shine{
  0%,55%{left:-45%}
  85%,100%{left:130%}
}
.btn-signin:focus-visible{outline:2px solid #fff;outline-offset:3px}

/* ================= STATS STRIP ================= */

.stats{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
  margin:6px 0 28px;
}
.stat{
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:12px 14px;
  background:rgba(4,12,20,.7);
  border:1px solid var(--line);
  border-left:3px solid var(--cyan);
  text-align:left;
}
.stat.orange{border-left-color:var(--orange)}
.stat.green{border-left-color:var(--green)}
.stat .v{
  font-family:var(--font-d);
  font-size:22px;
  font-weight:700;
  color:#fff;
  text-shadow:0 0 12px var(--cyan-dim);
  font-variant-numeric:tabular-nums;
}
.stat.orange .v{text-shadow:0 0 12px var(--orange-dim)}
.stat .k{
  font-size:11px;
  font-weight:600;
  letter-spacing:.18em;
  color:var(--steel);
  text-transform:uppercase;
}

/* ================= FEATURE CARDS ================= */

.features{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}

.card{
  position:relative;
  background:rgba(8,18,30,.7);
  border:1px solid var(--line);
  padding:18px 18px 20px;
  opacity:0;
  transform:translateY(22px);
  transition:opacity .7s ease, transform .7s ease;
}
.card.in{opacity:1;transform:none}
.card::before{
  content:'';
  position:absolute;
  top:-1px;left:-1px;
  width:26px;height:3px;
  background:var(--cyan);
  box-shadow:0 0 8px var(--cyan-dim);
}
.card.accent-orange::before{background:var(--orange);box-shadow:0 0 8px var(--orange-dim)}

.card-title{
  font-family:var(--font-d);
  font-size:11px;
  font-weight:700;
  letter-spacing:.22em;
  color:var(--cyan-soft);
  text-transform:uppercase;
  margin-bottom:12px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
}
.card-title .tag{color:var(--orange);font-size:9px;letter-spacing:.2em}

.card .ic{
  width:44px;height:44px;
  display:flex;align-items:center;justify-content:center;
  margin-bottom:14px;
  background:rgba(69,224,245,.08);
  border:1px solid var(--line);
}
.card .ic svg{width:22px;height:22px;stroke:var(--cyan);fill:none;stroke-width:1.6;filter:drop-shadow(0 0 5px var(--cyan-dim))}
.card.accent-orange .ic svg{stroke:var(--orange);filter:drop-shadow(0 0 5px var(--orange-dim))}

.card p{
  font-size:15px;
  font-weight:500;
  line-height:1.6;
  letter-spacing:.03em;
  color:var(--steel);
}
.card p b{color:var(--cyan-soft);font-weight:600}

/* индикаторы внутри карточек */
.ticks{display:flex;flex-direction:column;gap:9px;margin-top:14px}
.tick{display:flex;align-items:center;gap:10px;font-size:11px;letter-spacing:.1em;color:var(--steel);text-transform:uppercase}
.tick .bar{
  flex:1;height:4px;
  background:rgba(69,224,245,.12);
  position:relative;overflow:hidden;
}
.tick .bar i{
  position:absolute;inset:0;
  transform-origin:left;
  background:linear-gradient(90deg, var(--cyan), rgba(69,224,245,.4));
  animation:tickLoad 1.6s cubic-bezier(.2,.8,.2,1) forwards;
  transform:scaleX(0);
}
.tick .bar i.o{background:linear-gradient(90deg, var(--orange), rgba(255,154,60,.4))}
.tick .val{font-family:var(--font-d);font-size:10px;color:var(--cyan-soft);min-width:38px;text-align:right}
@keyframes tickLoad{to{transform:scaleX(var(--w,1))}}

.mini-bars{display:flex;align-items:flex-end;gap:4px;height:42px;margin-top:14px}
.mini-bars i{
  flex:1;
  background:linear-gradient(to top, rgba(69,224,245,.85), rgba(69,224,245,.15));
  animation:barPulse 2.6s ease-in-out infinite;
  transform-origin:bottom;
}
@keyframes barPulse{
  0%,100%{transform:scaleY(.45)}
  50%{transform:scaleY(1)}
}

/* мини-радар в карточке */
.radar{
  position:relative;
  width:84px;height:84px;
  flex:none;
  margin-top:14px;
}
.radar svg{width:100%;height:100%;display:block}
.radar .ring{fill:none;stroke:var(--line);stroke-width:1}
.radar .ring.dashed{stroke-dasharray:3 5}
.radar .cross{stroke:rgba(69,224,245,.18);stroke-width:1}
.radar-sweep{
  position:absolute;inset:0;
  border-radius:50%;
  background:conic-gradient(from 0deg, rgba(69,224,245,.5), transparent 70deg, transparent 360deg);
  -webkit-mask:radial-gradient(circle, transparent 12%, #000 13%);
          mask:radial-gradient(circle, transparent 12%, #000 13%);
  animation:spin 4s linear infinite;
}
.radar .blip{fill:var(--orange);animation:blip 2.4s ease-in-out infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes blip{0%,100%{opacity:.15}45%{opacity:1}}

/* ================= TICKER ================= */

.ticker{
  margin-top:26px;
  border:1px solid var(--line);
  background:rgba(4,12,20,.75);
  display:flex;
  align-items:center;
  overflow:hidden;
  height:38px;
}
.ticker .tk-label{
  flex:none;
  height:100%;
  display:flex;align-items:center;
  padding:0 24px 0 14px;
  font-family:var(--font-d);
  font-size:10px;font-weight:700;
  letter-spacing:.2em;
  color:#03222b;
  background:linear-gradient(180deg,#9ff1fd,#2fc7e2);
  clip-path:polygon(0 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
}
.tk-viewport{flex:1;overflow:hidden;position:relative;height:100%}
.tk-track{
  position:absolute;
  display:flex;
  align-items:center;
  height:100%;
  white-space:nowrap;
  animation:tick 38s linear infinite;
  will-change:transform;
}
.tk-track span{
  font-size:13px;
  font-weight:600;
  letter-spacing:.12em;
  color:var(--cyan-soft);
  text-transform:uppercase;
  padding:0 26px;
}
.tk-track span b{color:var(--orange)}
.tk-track span::after{
  content:'◆';
  color:var(--cyan-dim);
  margin-left:26px;
  font-size:9px;
}
@keyframes tick{to{transform:translateX(-50%)}}

/* ================= FOOTER ================= */

.foot{
  margin-top:22px;
  padding-top:14px;
  border-top:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  font-family:var(--font-d);
  font-size:8px;
  letter-spacing:.22em;
  color:rgba(126,151,168,.7);
  text-transform:uppercase;
}
.foot .ok{color:var(--green)}

/* ================= RESPONSIVE ================= */

@media (max-width:980px){
  .features{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:640px){
  .scene{padding:28px 14px 40px}
  .hud-frame{padding:26px 18px 24px;clip-path:polygon(18px 0, calc(100% - 18px) 0, 100% 18px, 100% calc(100% - 18px), calc(100% - 18px) 100%, 18px 100%, 0 calc(100% - 18px), 0 18px)}
  .hero h1{font-size:clamp(19px,6.4vw,26px);letter-spacing:.12em;margin-right:-.12em}
  .stats{grid-template-columns:1fr 1fr;gap:10px}
  .corner{width:24px;height:24px}
  .foot{flex-direction:column;gap:4px;align-items:center;text-align:center}
}

/* ================= MOTION SAFETY ================= */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .tk-track{animation:none;transform:none}
  .card{opacity:1;transform:none}
}