/* #hero — mereu „de noapte", indiferent de tema sistemului. */
#hero {
  position: relative; overflow: hidden; color: #fff;
  background:
    radial-gradient(80% 60% at 75% 30%, rgb(124 58 237 / 0.35), transparent 70%),
    radial-gradient(60% 50% at 10% 90%, rgb(91 43 192 / 0.35), transparent 70%),
    var(--night);
  padding-block: clamp(36px, 7vw, 96px) clamp(48px, 8vw, 110px);
}
html[data-mode="glow"] #hero { background: #000; }
.hero__grid { display: grid; gap: clamp(28px, 5vw, 56px); align-items: center; }
@media (min-width: 960px) { .hero__grid { grid-template-columns: 1.05fr 1fr; } }
#hero .eyebrow { color: var(--violet-300); }
#hero h1 { color: #fff; margin-bottom: 0.4em; }
.hero__accent {
  background: linear-gradient(90deg, #b8a4f0, #fff6d8 70%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
html[data-mode="glow"] .hero__accent { background: none; color: #8f86b0; }
.hero__lead { font-size: var(--step-1); color: #d4d0ea; max-width: 34em; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin: 26px 0 22px; }
.hero__ctas .btn { min-height: 52px; padding-inline: 26px; font-size: 1.05rem; }
.hero__facts { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: var(--step--1); color: #b6b2d0; }
.hero__facts li::before { content: "✓"; color: var(--violet-300); font-weight: 800; margin-right: 6px; }

.hero__pov { margin: 0; }
.hero__pov figcaption { font-size: 0.78rem; color: #8d89a8; margin-top: 10px; }
.pov {
  position: relative; aspect-ratio: 16 / 10; border-radius: 18px; overflow: hidden;
  border: 1px solid rgb(184 164 240 / 0.25);
  box-shadow: 0 30px 80px rgb(0 0 0 / 0.55), 0 0 0 6px rgb(255 255 255 / 0.03);
  transform: perspective(1200px) rotateY(-4deg) rotateX(2deg);
}
@media (max-width: 959px) { .pov { transform: none; } }
.pov__scene { width: 100%; height: 100%; }
.pov__beam { transform-origin: 320px 262px; animation: beam-sway 7s ease-in-out infinite; }
@keyframes beam-sway {
  0%, 100% { transform: translateX(-10px) scale(1); }
  50% { transform: translateX(12px) scale(1.04); }
}
.pov__stars circle { animation: twinkle 4s ease-in-out infinite; }
.pov__stars circle:nth-child(2n) { animation-delay: -2s; }
@keyframes twinkle { 50% { opacity: 0.3; } }
.pov__hud { position: absolute; inset: 0; color: #fff; font-size: clamp(10px, 1.6vw, 13px); letter-spacing: 0.05em; pointer-events: none; }
.pov__hud > span { position: absolute; text-shadow: 0 1px 2px rgb(0 0 0 / 0.6); }
.pov__rec { top: 6%; left: 6%; display: inline-flex; align-items: center; gap: 6px; font-weight: 800; }
.pov__dot { width: 9px; height: 9px; border-radius: 50%; background: #ff3b3b; box-shadow: 0 0 8px #ff3b3b; animation: rec 1.2s steps(2, jump-none) infinite; }
@keyframes rec { 50% { opacity: 0.15; } }
.pov__meta { top: 6%; right: 6%; }
.pov__time { bottom: 7%; left: 6%; }
.pov__bat { bottom: 7%; right: 6%; }
.pov__corner { position: absolute; width: 22px; height: 22px; border: 2px solid rgb(255 255 255 / 0.7); }
.pov__corner--tl { top: 3%; left: 3%; border-right: 0; border-bottom: 0; }
.pov__corner--tr { top: 3%; right: 3%; border-left: 0; border-bottom: 0; }
.pov__corner--bl { bottom: 3%; left: 3%; border-right: 0; border-top: 0; }
.pov__corner--br { bottom: 3%; right: 3%; border-left: 0; border-top: 0; }