/* ===== HERO ===== */
.hero{
  isolation: isolate;
  overflow: clip;
  padding-top: 96px;
  padding-bottom: 96px;
}
.hero-grid{
  display: grid;
  grid-template-columns: 1fr minmax(0, 520px) 1fr;
  gap: 28px;
  align-items: center;
}

.hero-side{
  display: flex; align-items: center; justify-content: center;
}

.hero-center{
  text-align: center;
  background: linear-gradient(180deg, rgba(125,92,255,.12), rgba(199,255,61,.08));
  border: 1px solid rgba(199,255,61,.18);
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: var(--shadow);
}

.glow-title{
  font-family: Sora, Inter, sans-serif;
  font-size: clamp(2.1rem, 2.2rem + 1.5vw, 3.4rem);
  line-height: 1.1;
  margin: 0 0 12px;
  letter-spacing: .5px;
  text-shadow:
    0 0 12px rgba(199,255,61,.35),
    0 0 22px rgba(125,92,255,.25);
}

.lead{
  margin: 0 0 16px;
  color: var(--muted);
  font-size: 1.05rem;
}

.hero-points{
  margin: 0 0 18px 0; padding: 0; list-style: none;
  display: grid; gap: 8px;
}
.hero-points li{
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(16,20,30,.65);
  border: 1px solid rgba(199,255,61,.12);
}

/* Floating micro-anim for side images */
@keyframes floaty {
  0%   { transform: translateY(0) rotate(-.3deg); }
  50%  { transform: translateY(-8px) rotate(.3deg); }
  100% { transform: translateY(0) rotate(-.3deg); }
}
.floaty{ animation: floaty 5s var(--ease) infinite; }
.floaty.delay{ animation-delay: 1.2s; }

/* Decorative neon glows */
.hero-glow{
  position: absolute; inset: -20% -10% auto -10%;
  height: 60%; pointer-events: none; filter: blur(40px); opacity: .6;
  background: radial-gradient(50% 60% at 30% 40%, rgba(199,255,61,.22), transparent 60%);
  z-index: -1;
}
.hero-glow--two{
  inset: auto -10% -20% -10%;
  background: radial-gradient(50% 60% at 70% 50%, rgba(125,92,255,.25), transparent 60%);
  opacity: .55;
}

/* Responsive layout: images stack on mobile */
@media (max-width: 991px){
  .hero-grid{
    grid-template-columns: 1fr; gap: 18px;
  }
  .hero-side:first-child{ order: 2; }
  .hero-side:last-of-type{ order: 3; }
  .hero-center{ order: 1; }
}
/* фон-полосы: непрерывные внутри секции, но не «заезжают» на hero */
.why-fun{
  position: relative;
  overflow: visible;
}

.why-fun .lanes-bg{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  /* Минимальный вылет, чтобы не было шва на стыке, но без перекрытия hero */
  top: -16px;                           /* было: -20vh */
  height: calc(100% + 32px);            /* было: calc(100% + 40vh) */
  width: 100vw;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}

.why-fun .lanes-bg::before{
  content: "";
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(90deg, rgba(199,255,61,.10) 0 2px, transparent 2px 14px),
    radial-gradient(800px 500px at 12% 0%, rgba(125,92,255,.18), transparent 60%),
    radial-gradient(800px 500px at 88% 100%, rgba(199,255,61,.12), transparent 60%);
  mix-blend-mode: screen;
  opacity: .6;
  animation: laneMove 18s linear infinite;
  will-change: transform;
}

/* Жёстче «маскируем» верх и низ, чтобы полосы не были видны вне секции */
.why-fun .lanes-bg::after{
  content: "";
  position: absolute; inset: 0;
  /* сплошная заливка сверху ~64px + плавное исчезновение */
  background:
    linear-gradient(
      180deg,
      var(--bg) 0 64px,                /* плотное перекрытие у стыка с hero */
      rgba(11,13,18,0) 144px,          /* мягкое растворение */
      rgba(11,13,18,0) calc(100% - 144px),
      var(--bg) 100%
    );
  pointer-events: none;
}

/* Дополнительно подстрахуемся на очень маленьких экранах */
@media (max-width: 575px){
  .why-fun .lanes-bg{ top: -12px; height: calc(100% + 24px); }
  .why-fun .lanes-bg::after{
    background:
      linear-gradient(
        180deg,
        var(--bg) 0 48px,
        rgba(11,13,18,0) 112px,
        rgba(11,13,18,0) calc(100% - 112px),
        var(--bg) 100%
      );
  }
}



.why-head{
  text-align: center;
  margin-bottom: 28px;
}
.why-head h2{
  margin: 0 0 8px;
  font-family: Sora, Inter, sans-serif;
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem);
  text-shadow:
    0 0 10px rgba(199,255,61,.25),
    0 0 18px rgba(125,92,255,.18);
}
.why-sub{
  margin: 0;
  color: var(--muted);
}

/* Сетка карточек */
.fun-grid{
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.fun-card{
  position: relative;
  background: linear-gradient(180deg, rgba(16,20,30,.85), rgba(16,20,30,.9));
  border: 1px solid rgba(199,255,61,.18);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow);
  transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
  will-change: transform;
}

/* Неоновый sheen при hover */
.fun-card::after{
  content: "";
  position: absolute; inset: 0;
  background:
    conic-gradient(from 0deg at 50% 50%, rgba(199,255,61,.0), rgba(199,255,61,.25), rgba(125,92,255,.22), rgba(199,255,61,.0) 70%);
  border-radius: inherit;
  filter: blur(18px);
  opacity: 0;
  transform: scale(0.96);
  transition: opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease);
  pointer-events: none;
}
.fun-card:hover::after,
.fun-card:focus-within::after{
  opacity: .8;
  transform: scale(1);
}

.fun-card:hover{ transform: translateY(-4px); border-color: rgba(199,255,61,.35); }

/* Медиа с «орбитой яйца» вокруг иконки */
.fun-media{
  display: grid; place-items: center;
  margin: 6px 0 10px;
}
.fun-icon{
  position: relative;
  border-radius: 14px;
  box-shadow: 0 6px 22px rgba(0,0,0,.35);
}

/* вращающееся кольцо */
.fun-icon::before{
  content: "";
  position: absolute; inset: -16px;
  border-radius: 999px;
  border: 1px dashed rgba(199,255,61,.35);
  box-shadow: inset 0 0 18px rgba(125,92,255,.2);
  animation: spinRing 9s linear infinite;
  animation-play-state: paused;
}
@keyframes spinRing{
  from{ transform: rotate(0deg); }
  to  { transform: rotate(360deg); }
}

/* «Яйцо» на орбите */
.fun-icon::after{
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 14px; height: 18px;
  border-radius: 50% 50% 46% 46% / 60% 60% 40% 40%;
  background:
    radial-gradient(circle at 35% 35%, var(--accent) 0 60%, rgba(255,255,255,.2) 61% 70%, transparent 71%);
  filter: drop-shadow(0 0 6px var(--ring));
  transform: rotate(0deg) translateX(58px) rotate(0deg);
  transform-origin: 0 0;
  opacity: .95;
  animation: orbitEgg 6s linear infinite;
  animation-play-state: paused;
}

@keyframes orbitEgg{
  from{ transform: rotate(0deg) translateX(58px) rotate(0deg); }
  to  { transform: rotate(360deg) translateX(58px) rotate(-360deg); }
}

/* включаем орбитальные анимации только когда карточка видима */
.fun-card.is-visible .fun-icon::before,
.fun-card.is-visible .fun-icon::after{
  animation-play-state: running;
}

/* Заголовки и текст карточек */
.fun-card h3{
  margin: 6px 0 6px;
  font-size: 1.05rem;
}
.fun-card p{
  margin: 0;
  color: var(--muted);
}

/* Раскладка на устройствах */
@media (max-width: 991px){
  .fun-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 575px){
  .fun-grid{ grid-template-columns: 1fr; }
}
/* ===== SECTION 3: HOW IT PLAYS ===== */
.how-plays{
  position: relative;
  overflow: visible;
  border-top: 1px solid rgba(199,255,61,.12);
}

.how-wrap{
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 28px;
  align-items: start;
}

/* Head */
.how-head{
  margin-bottom: 10px;
  text-align: left;
}
.how-head h2{
  margin: 0 0 6px;
  font-family: Sora, Inter, sans-serif;
  font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem);
  text-shadow:
    0 0 10px rgba(199,255,61,.22),
    0 0 18px rgba(125,92,255,.18);
}
.how-sub{ margin: 0; color: var(--muted); }

/* Steps list with CSS counters */
.steps{ list-style: none; margin: 18px 0 0; padding: 0; counter-reset: s; display: grid; gap: 14px; }
.step{
  counter-increment: s;
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 14px;
  align-items: center;
  background: linear-gradient(180deg, rgba(16,20,30,.85), rgba(16,20,30,.9));
  border: 1px solid rgba(199,255,61,.18);
  border-radius: var(--radius);
  padding: 12px;
  box-shadow: var(--shadow);
  transition: transform var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}
.step:hover,
.step:focus-within{ transform: translateY(-3px); border-color: rgba(199,255,61,.32); }

.step::before{
  content: counter(s, decimal-leading-zero);
  align-self: start;
  justify-self: start;
  font-weight: 700;
  font-family: Sora, Inter, sans-serif;
  font-size: 1.05rem;
  color: var(--text);
  padding: 6px 10px;
  border-radius: 10px;
  background: radial-gradient(circle at 30% 30%, rgba(199,255,61,.25), transparent 60%),
              linear-gradient(180deg, rgba(125,92,255,.18), rgba(199,255,61,.14));
  border: 1px solid rgba(199,255,61,.28);
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
}

/* Step media + unique hop animation */
.steps-media{ width: 96px; }
.steps-icon{
  border-radius: 12px;
  box-shadow: 0 6px 22px rgba(0,0,0,.35);
  animation: hop 2.8s var(--ease) infinite;
  animation-play-state: paused;           /* включаем только при видимости */
}
@keyframes hop{
  0%   { transform: translateY(0) rotate(-.3deg); }
  30%  { transform: translateY(-10px) rotate(.3deg); }
  60%  { transform: translateY(0) rotate(-.2deg); }
  100% { transform: translateY(0) rotate(-.3deg); }
}
.step.is-visible .steps-icon{ animation-play-state: running; }

.steps-copy h3{ margin: 2px 0 4px; font-size: 1.05rem; }
.steps-copy p{ margin: 0; color: var(--muted); }

/* Right column: demo lane card */
.lane-col{ display: grid; gap: 18px; }
.lane-card{
  background: linear-gradient(180deg, rgba(16,20,30,.85), rgba(16,20,30,.92));
  border: 1px solid rgba(199,255,61,.18);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow);
}
.lane-label{
  margin: 0 0 8px;
  color: var(--muted);
  font-size: .95rem;
}

/* Track with continuous moving runner and reveal progress */
.lane-track{
  position: relative;
  height: 12px;
  border-radius: 999px;
  background:
    repeating-linear-gradient(90deg, rgba(199,255,61,.15) 0 2px, transparent 2px 14px),
    linear-gradient(180deg, rgba(125,92,255,.18), rgba(199,255,61,.12));
  overflow: hidden;
  border: 1px solid rgba(199,255,61,.28);
  margin-bottom: 10px;
}

/* progress grows on reveal */
.lane-progress{
  position: absolute; inset: 0;
  transform-origin: left center;
  transform: scaleX(0);
  background: linear-gradient(90deg, var(--accent), rgba(199,255,61,.2));
  filter: drop-shadow(0 0 8px var(--ring));
  transition: transform .9s var(--ease);
}
.how-plays.is-visible .lane-progress{ transform: scaleX(1); }

/* runner dot loops */
.lane-runner{
  position: absolute; top: 50%; left: -8px;
  width: 12px; height: 12px;
  transform: translateY(-50%);
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 14px rgba(199,255,61,.6);
  animation: runLoop 2.8s linear infinite;
  animation-play-state: paused;
}
.how-plays.is-visible .lane-runner{ animation-play-state: running; }

@keyframes runLoop{
  0%   { left: -8px; }
  100% { left: calc(100% - 4px); }
}

.micro-tips{
  margin: 0 0 14px; padding: 0 0 0 16px; color: var(--muted);
}
.sign-media{ justify-self: center; }

/* Responsive */
@media (max-width: 991px){
  .how-wrap{ grid-template-columns: 1fr; }
  .steps{ gap: 12px; }
  .steps-media{ width: 80px; }
}
@media (max-width: 575px){
  .step{ grid-template-columns: 80px 1fr; }
  .steps-media{ width: 80px; }
}

/* Respect motion preferences */
@media (prefers-reduced-motion: reduce){
  .steps-icon, .lane-runner { animation: none !important; }
  .lane-progress { transition: none !important; }
}
/* Hero всегда над фон-слоями соседних секций */
.hero{
  position: relative;
  z-index: 0;          /* слой контента */
}
.hero-glow{ z-index: -1; }   /* декоративные свечения остаются позади героя */
/* ===== SECTION 4: ROADSIDE CHALLENGES ===== */
.challenges{
  position: relative;
  overflow: visible;
  border-top: 1px solid rgba(199,255,61,.12);
}
.challenges::before{
  /* мягкая диагональная текстура, только внутри секции */
  content: "";
  position: absolute; inset: 0;
  z-index: -1; pointer-events: none;
  background:
    repeating-linear-gradient(
      135deg,
      rgba(125,92,255,.10) 0 2px,
      transparent 2px 18px
    ),
    radial-gradient(900px 520px at 20% 10%, rgba(125,92,255,.14), transparent 60%),
    radial-gradient(900px 520px at 80% 90%, rgba(199,255,61,.10), transparent 60%);
  mask-image: linear-gradient(180deg, transparent 0, black 6%, black 94%, transparent 100%);
}

.ch-head{ text-align: center; margin-bottom: 22px; }
.ch-head h2{
  margin: 0 0 8px;
  font-family: Sora, Inter, sans-serif;
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem);
  text-shadow:
    0 0 10px rgba(199,255,61,.22),
    0 0 18px rgba(125,92,255,.18);
}
.ch-sub{ margin: 0; color: var(--muted); }

.ch-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 18px;
}

.ch-card{
  position: relative;
  background: linear-gradient(180deg, rgba(16,20,30,.85), rgba(16,20,30,.92));
  border: 1px solid rgba(199,255,61,.18);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow);
  transition: transform var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}
.ch-card:hover,
.ch-card:focus-within{ transform: translateY(-3px); border-color: rgba(199,255,61,.32); }

.ch-media{ display: grid; place-items: center; margin-bottom: 10px; }
.ch-icon{ border-radius: 14px; box-shadow: 0 6px 22px rgba(0,0,0,.35); }

/* === Hazard scan overlay (runs when card visible) === */
.hazard-scan::after{
  content: "";
  position: absolute; left: -40%; top: 0; width: 40%; height: 100%;
  background: linear-gradient(90deg, rgba(199,255,61,.0), rgba(199,255,61,.18), rgba(199,255,61,.0));
  filter: blur(10px);
  transform: skewX(-12deg);
  opacity: 0;
  pointer-events: none;
}
.hazard-scan.is-visible::after{
  animation: scan 1.8s var(--ease) .2s forwards;
}
@keyframes scan{
  0%   { left: -40%; opacity: 0; }
  10%  { opacity: .8; }
  100% { left: 120%; opacity: 0; }
}

/* === Per-hazard micro animations (paused until visible) === */
@keyframes sway {
  0%,100% { transform: rotate(-1.5deg) translateY(0); }
  50%     { transform: rotate(1.5deg) translateY(-2px); }
}
@keyframes ripple {
  0%   { transform: scale(.6); opacity: .8; }
  100% { transform: scale(1.4); opacity: 0; }
}
@keyframes flicker {
  0% { filter: brightness(1) drop-shadow(0 0 6px rgba(199,255,61,.35)); }
  50%{ filter: brightness(1.22) drop-shadow(0 0 10px rgba(199,255,61,.55)); }
  100%{ filter: brightness(1) drop-shadow(0 0 6px rgba(199,255,61,.35)); }
}

/* cones sway */
.ch-card.is-visible .ch-icon--cones{ animation: sway 3.4s ease-in-out infinite; }
/* puddle ripple ring */
.ch-icon--puddle{ position: relative; overflow: visible; }
.ch-icon--puddle::after{
  content: "";
  position: absolute; left: 50%; top: 50%;
  width: 42%; aspect-ratio: 1/1; border-radius: 999px;
  border: 2px solid rgba(199,255,61,.45);
  transform: translate(-50%, -50%) scale(.6);
  opacity: 0;
}
.ch-card.is-visible .ch-icon--puddle::after{
  animation: ripple 1.8s ease-out .4s infinite;
}
/* lantern flicker */
.ch-card.is-visible .ch-icon--lantern{ animation: flicker 2.2s ease-in-out infinite; }

.ch-notes{
  margin-top: 20px;
  background: linear-gradient(180deg, rgba(16,20,30,.85), rgba(16,20,30,.92));
  border: 1px solid rgba(199,255,61,.18);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow);
}
.ch-notes h3{ margin: 0 0 8px; font-size: 1.05rem; }
.ch-notes p{ margin: 0 0 10px; color: var(--muted); }
.ch-list{ margin: 0; padding-left: 18px; color: var(--muted); }

/* Responsive */
@media (max-width: 991px){
  .ch-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 575px){
  .ch-grid{ grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce){
  .hazard-scan::after,
  .ch-icon--cones,
  .ch-icon--puddle::after,
  .ch-icon--lantern { animation: none !important; }
}
/* ===== SECTION 5: POWER-UPS & PERKS ===== */
.perks{
  position: relative;
  overflow: visible;
  border-top: 1px solid rgba(199,255,61,.12);
}
.perks::before{
  /* мягкая сетка точек + радиальные пятна внутри секции */
  content: "";
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(900px 520px at 20% 15%, rgba(125,92,255,.14), transparent 60%),
    radial-gradient(900px 520px at 85% 85%, rgba(199,255,61,.10), transparent 60%),
    radial-gradient(circle at 50% 50%, rgba(199,255,61,.08) 0 1px, transparent 2px);
  background-size: auto, auto, 14px 14px;
  mask-image: linear-gradient(180deg, transparent 0, black 8%, black 92%, transparent 100%);
}

.perks-head{ text-align: center; margin-bottom: 22px; }
.perks-head h2{
  margin: 0 0 8px;
  font-family: Sora, Inter, sans-serif;
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem);
  text-shadow:
    0 0 10px rgba(199,255,61,.22),
    0 0 18px rgba(125,92,255,.18);
}
.perks-sub{ margin: 0; color: var(--muted); }

.perks-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.perk-card{
  position: relative;
  background: linear-gradient(180deg, rgba(16,20,30,.85), rgba(16,20,30,.92));
  border: 1px solid rgba(199,255,61,.18);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow);
  transition: transform var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}
.perk-card:hover,
.perk-card:focus-within{ transform: translateY(-3px); border-color: rgba(199,255,61,.32); }

.perk-media{ display: grid; place-items: center; margin-bottom: 10px; }
.perk-icon{ border-radius: 14px; box-shadow: 0 6px 22px rgba(0,0,0,.35); }

/* === Unique animations (paused until visible) === */

/* Magnet: dashed orbit + tiny egg circling */
@keyframes orbit { from{transform:rotate(0)} to{transform:rotate(360deg)} }
@keyframes eggOrbit {
  from{ transform: rotate(0deg) translateX(56px) rotate(0deg); }
  to  { transform: rotate(360deg) translateX(56px) rotate(-360deg); }
}
.perk-card--magnet .perk-icon{ position: relative; }
.perk-card--magnet .perk-icon::before{
  content:""; position:absolute; inset:-16px; border-radius:999px;
  border:1px dashed rgba(199,255,61,.35);
  box-shadow: inset 0 0 16px rgba(125,92,255,.22);
  animation: orbit 10s linear infinite; animation-play-state: paused;
}
.perk-card--magnet .perk-icon::after{
  content:""; position:absolute; top:50%; left:50%; width:12px; height:16px;
  border-radius: 50% 50% 46% 46% / 60% 60% 40% 40%;
  background: radial-gradient(circle at 35% 35%, var(--accent) 0 60%, rgba(255,255,255,.2) 61% 70%, transparent 71%);
  filter: drop-shadow(0 0 6px var(--ring));
  transform-origin: 0 0;
  animation: eggOrbit 6s linear infinite; animation-play-state: paused;
}
.perk-card--magnet.is-visible .perk-icon::before,
.perk-card--magnet.is-visible .perk-icon::after{ animation-play-state: running; }

/* Shield: pulsing ring */
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(199,255,61,.35); }
  70%  { box-shadow: 0 0 0 14px rgba(199,255,61,0); }
  100% { box-shadow: 0 0 0 0 rgba(199,255,61,0); }
}
.perk-card--shield .perk-icon{ position: relative; }
.perk-card--shield.is-visible .perk-icon{
  animation: pulse 2.2s ease-out infinite;
}

/* Boost: streaks sweeping across */
@keyframes streakMove { from{ transform: translateX(-120%); } to{ transform: translateX(120%); } }
.perk-card--boost .perk-icon{ position: relative; overflow: visible; }
.perk-card--boost .perk-icon::before,
.perk-card--boost .perk-icon::after{
  content:""; position:absolute; top: 35%; left: -20%; width: 60%; height: 3px;
  background: linear-gradient(90deg, rgba(199,255,61,0), var(--accent), rgba(199,255,61,0));
  filter: blur(1px);
  transform: translateX(-120%);
  opacity: .85;
}
.perk-card--boost .perk-icon::after{ top: 60%; width: 72%; opacity: .6; }
.perk-card--boost.is-visible .perk-icon::before{ animation: streakMove 1.4s linear .1s infinite; }
.perk-card--boost.is-visible .perk-icon::after{ animation: streakMove 1.8s linear .4s infinite; }

/* Sparkle trail: twinkling dotted overlay */
@keyframes twinkle {
  0%,100% { opacity: .6; filter: brightness(1); }
  50%     { opacity: .95; filter: brightness(1.2); }
}
.perk-card--trail .perk-icon{ position: relative; }
.perk-card--trail .perk-icon::after{
  content:""; position:absolute; inset:-6px; border-radius:14px;
  background:
    radial-gradient(circle at 20% 30%, rgba(199,255,61,.35) 0 2px, transparent 3px),
    radial-gradient(circle at 70% 60%, rgba(125,92,255,.35) 0 2px, transparent 3px),
    radial-gradient(circle at 40% 80%, rgba(199,255,61,.35) 0 2px, transparent 3px);
  background-size: 18px 18px, 22px 22px, 20px 20px;
  mix-blend-mode: screen;
  opacity: .0;
}
.perk-card--trail.is-visible .perk-icon::after{
  animation: twinkle 2.4s ease-in-out infinite;
  opacity: 1;
}

/* Notes block */
.perks-notes{
  margin-top: 20px;
  background: linear-gradient(180deg, rgba(16,20,30,.85), rgba(16,20,30,.92));
  border: 1px solid rgba(199,255,61,.18);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow);
}
.perks-notes h3{ margin: 0 0 8px; font-size: 1.05rem; }
.perks-notes p{ margin: 0 0 10px; color: var(--muted); }
.perks-list{ margin: 0; padding-left: 18px; color: var(--muted); }

/* Responsive */
@media (max-width: 1199px){
  .perks-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 991px){
  .perks-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 575px){
  .perks-grid{ grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce){
  .perk-card--magnet .perk-icon::before,
  .perk-card--magnet .perk-icon::after,
  .perk-card--shield .perk-icon,
  .perk-card--boost .perk-icon::before,
  .perk-card--boost .perk-icon::after,
  .perk-card--trail .perk-icon::after { animation: none !important; }
}
/* ===== SECTION 6: NO PAYWALLS ===== */
.no-pay{
  position: relative;
  overflow: visible;
  border-top: 1px solid rgba(199,255,61,.12);
}
.no-pay::before{
  /* мягкая горизонтальная вуаль + точки */
  content:"";
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(125,92,255,.14), rgba(16,20,30,0) 40%),
    radial-gradient(circle at 50% 50%, rgba(199,255,61,.08) 0 1px, transparent 2px);
  background-size: auto, 16px 16px;
  mask-image: linear-gradient(180deg, transparent 0, black 8%, black 92%, transparent 100%);
}

.np-head{ text-align:center; margin-bottom: 22px; }
.np-head h2{
  margin:0 0 8px;
  font-family: Sora, Inter, sans-serif;
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem);
  text-shadow:
    0 0 10px rgba(199,255,61,.22),
    0 0 18px rgba(125,92,255,.18);
}
.np-sub{ margin:0; color: var(--muted); }

/* Banner with neon sheen */
.promise-banner{
  margin: 14px auto 0;
  display: inline-flex; gap: 10px; align-items: center;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(199,255,61,.28);
  background: rgba(16,20,30,.6);
  box-shadow: 0 10px 26px rgba(0,0,0,.35);
  font-weight: 700;
  letter-spacing: .2px;
  position: relative;
  overflow: hidden;
}
.promise-banner span{
  background: linear-gradient(90deg, var(--text), var(--accent), var(--text));
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  animation: sheen 3.2s linear infinite;
  background-size: 200% 100%;
}
.promise-banner em{ color: var(--muted); font-style: normal; }
@keyframes sheen{
  0%{ background-position: 0% 50%; }
  100%{ background-position: 200% 50%; }
}

/* Grid */
.np-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 18px;
}
.np-card{
  position: relative;
  background: linear-gradient(180deg, rgba(16,20,30,.85), rgba(16,20,30,.92));
  border: 1px solid rgba(199,255,61,.18);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow);
  transition: transform var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}
.np-card:hover,
.np-card:focus-within{ transform: translateY(-3px) rotate(-.2deg); border-color: rgba(199,255,61,.32); }

.np-media{ display:grid; place-items:center; margin-bottom:10px; }
.np-icon{ border-radius: 14px; box-shadow: 0 6px 22px rgba(0,0,0,.35); }

/* Unique animations (paused до видимости) */

/* Badge: pulsing ring */
@keyframes ringPulse {
  0%   { box-shadow: 0 0 0 0 rgba(199,255,61,.35); }
  70%  { box-shadow: 0 0 0 14px rgba(199,255,61,0); }
  100% { box-shadow: 0 0 0 0 rgba(199,255,61,0); }
}
.np-card--badge .np-icon{ position: relative; }
.np-card--badge.is-visible .np-icon{ animation: ringPulse 2.4s ease-out infinite; }

/* Ticket: animated dashed frame */
@keyframes dashMove { from{ background-position: 0 0; } to{ background-position: 18px 0; } }
.np-card--ticket .np-media{ position: relative; }
.np-card--ticket .np-media::after{
  content:"";
  position:absolute; inset:-10px;
  border-radius: 18px;
  background:
    repeating-linear-gradient(90deg, rgba(199,255,61,.5) 0 6px, transparent 6px 12px);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  padding: 2px;
  opacity: .0;
}
.np-card--ticket.is-visible .np-media::after{
  opacity: .9;
  animation: dashMove 1s linear infinite;
}

/* Handshake: gentle brightness flicker */
@keyframes trustFlicker {
  0%,100% { filter: brightness(1) drop-shadow(0 0 6px rgba(199,255,61,.35)); }
  50%     { filter: brightness(1.18) drop-shadow(0 0 10px rgba(199,255,61,.55)); }
}
.np-card--handshake.is-visible .np-icon{ animation: trustFlicker 2.2s ease-in-out infinite; }

/* Notes */
.np-notes{
  margin-top: 20px;
  background: linear-gradient(180deg, rgba(16,20,30,.85), rgba(16,20,30,.92));
  border: 1px solid rgba(199,255,61,.18);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow);
}
.np-notes h3{ margin: 0 0 8px; font-size: 1.05rem; }
.np-list{ margin: 0; padding-left: 18px; color: var(--muted); }

/* Responsive */
@media (max-width: 991px){
  .np-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 575px){
  .np-grid{ grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce){
  .np-card--badge .np-icon,
  .np-card--ticket .np-media::after,
  .np-card--handshake .np-icon,
  .promise-banner span { animation: none !important; }
}
/* ===== SECTION 7: LIGHTWEIGHT & OFFLINE-FRIENDLY ===== */
.light-offline{
  position: relative;
  overflow: visible;
  border-top: 1px solid rgba(199,255,61,.12);
}

/* фоновые offline-waves (непрерывные внутри секции) */
.light-offline .lo-waves{
  position: absolute;
  left: 50%; transform: translateX(-50%);
  top: -12px; height: calc(100% + 24px);
  width: 100vw; z-index: -1; pointer-events: none; overflow: hidden;
}
.light-offline .lo-waves::before{
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(125,92,255,.16), rgba(16,20,30,0) 40%),
    repeating-linear-gradient(90deg, rgba(199,255,61,.08) 0 2px, transparent 2px 16px);
  opacity: .7;
  animation: loWave 28s linear infinite;
}
.light-offline .lo-waves::after{
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, var(--bg) 0 72px,
      rgba(11,13,18,0) 140px,
      rgba(11,13,18,0) calc(100% - 140px),
      var(--bg) 100%);
}
@keyframes loWave{
  from{ transform: translateX(0); }
  to  { transform: translateX(-260px); }
}

.lo-head{ text-align:center; margin-bottom: 22px; }
.lo-head h2{
  margin:0 0 8px;
  font-family: Sora, Inter, sans-serif;
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem);
  text-shadow:
    0 0 10px rgba(199,255,61,.22),
    0 0 18px rgba(125,92,255,.18);
}
.lo-sub{ margin:0; color: var(--muted); }

/* highlights grid */
.lo-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin-top: 18px;
}
.lo-card{
  position: relative;
  background: linear-gradient(180deg, rgba(16,20,30,.85), rgba(16,20,30,.92));
  border: 1px solid rgba(199,255,61,.18);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow);
  transition: transform var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}
.lo-card:hover,
.lo-card:focus-within{ transform: translateY(-3px); border-color: rgba(199,255,61,.32); }

.lo-media{ display:grid; place-items:center; margin-bottom:10px; }
.lo-icon{ border-radius: 14px; box-shadow: 0 6px 22px rgba(0,0,0,.35); }

/* live indicators */
.lo-stats{
  display: grid; grid-template-columns: 1.2fr 1.2fr .8fr;
  gap: 18px; margin-top: 18px;
}
.stat{ background: linear-gradient(180deg, rgba(16,20,30,.85), rgba(16,20,30,.92));
  border:1px solid rgba(199,255,61,.18); border-radius: var(--radius);
  padding: 14px; box-shadow: var(--shadow);
}
.stat-label{ margin:0 0 8px; font-weight:700; }
.stat-hint{ margin:8px 0 0; color: var(--muted); font-size:.95rem; }

.bar{
  position: relative; height: 12px; border-radius: 999px;
  background: linear-gradient(180deg, rgba(125,92,255,.18), rgba(199,255,61,.12));
  border: 1px solid rgba(199,255,61,.28); overflow: hidden;
}
.bar-fill{
  position: absolute; left: 0; top: 0; bottom: 0; width: 0%;
  background: linear-gradient(90deg, var(--accent), rgba(199,255,61,.2));
  filter: drop-shadow(0 0 8px var(--ring));
  transition: width 1.1s var(--ease);
}
.light-offline.is-visible .bar-fill{
  /* ширина берётся из data-target (%) — см. правило ниже */
}
.bar-fill[data-target="88"]{ width: 88%; }
.bar-fill[data-target="42"]{ width: 42%; }

.pill{
  display:inline-flex; align-items:center; justify-content:center;
  padding: 6px 10px; border-radius: 999px; font-weight:700;
  background: rgba(16,20,30,.6);
  border:1px solid rgba(199,255,61,.28);
  box-shadow: 0 8px 20px rgba(0,0,0,.35);
}
.pill--ok{
  color:#0b0d12; background: var(--accent);
  text-shadow: 0 1px 0 rgba(255,255,255,.25);
}

/* offline demo */
.lo-offline{
  display: grid; grid-template-columns: .9fr 1.1fr;
  gap: 18px; margin-top: 18px;
  background: linear-gradient(180deg, rgba(16,20,30,.85), rgba(16,20,30,.92));
  border: 1px solid rgba(199,255,61,.18);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow);
}
.lo-offline-media{ justify-self:center; }
.lo-offline-copy h3{ margin: 0 0 8px; font-size: 1.05rem; }
.lo-offline-copy p{ margin: 0 0 12px; color: var(--muted); }

/* Responsive */
@media (max-width: 1199px){
  .lo-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 991px){
  .lo-grid{ grid-template-columns: 1fr 1fr; }
  .lo-stats{ grid-template-columns: 1fr; }
  .lo-offline{ grid-template-columns: 1fr; }
}
@media (max-width: 575px){
  .lo-grid{ grid-template-columns: 1fr; }
}

/* Respect motion preferences */
@media (prefers-reduced-motion: reduce){
  .light-offline .lo-waves::before{ animation: none !important; }
  .bar-fill{ transition: none !important; }
}
/* ===== SECTION 8: COMMUNITY NOTES ===== */
.community{
  position: relative;
  overflow: visible;
  border-top: 1px solid rgba(199,255,61,.12);
}

/* фоновый "starlight" в пределах секции (непрерывный) */
.community .cm-stars{
  position: absolute; left: 50%; transform: translateX(-50%);
  top: -10px; height: calc(100% + 20px); width: 100vw;
  z-index: -1; pointer-events: none; overflow: hidden;
}
.community .cm-stars::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(circle at 20% 30%, rgba(199,255,61,.22) 0 2px, transparent 3px),
    radial-gradient(circle at 70% 60%, rgba(125,92,255,.22) 0 2px, transparent 3px),
    radial-gradient(circle at 40% 80%, rgba(199,255,61,.22) 0 2px, transparent 3px);
  background-size: 18px 18px, 22px 22px, 20px 20px;
  mix-blend-mode: screen;
  opacity: .75;
  animation: starDrift 40s linear infinite;
}
.community .cm-stars::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg, var(--bg) 0 64px,
      rgba(11,13,18,0) 120px,
      rgba(11,13,18,0) calc(100% - 120px),
      var(--bg) 100%);
}
@keyframes starDrift{
  from{ transform: translateX(0); }
  to  { transform: translateX(-220px); }
}

.cm-head{ text-align:center; margin-bottom:22px; }
.cm-head h2{
  margin:0 0 8px;
  font-family: Sora, Inter, sans-serif;
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem);
  text-shadow:
    0 0 10px rgba(199,255,61,.22),
    0 0 18px rgba(125,92,255,.18);
}
.cm-sub{ margin:0; color: var(--muted); }

/* grid of notes */
.cm-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 18px;
}
@media (max-width: 1199px){ .cm-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 991px){ .cm-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 575px){ .cm-grid{ grid-template-columns: 1fr; } }

.note-card{
  position: relative;
  background: linear-gradient(180deg, rgba(16,20,30,.85), rgba(16,20,30,.92));
  border: 1px solid rgba(199,255,61,.18);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow);
  transition: transform var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}
.note-card:hover,
.note-card:focus-within{ transform: translateY(-3px) rotate(-.2deg); border-color: rgba(199,255,61,.32); }

.note-avatar{ margin: 0 0 10px; display:grid; place-items:center; }
.note-avatar img{ border-radius: 50%; box-shadow: 0 6px 22px rgba(0,0,0,.35); max-width: 140px; }

blockquote{ margin: 0; }
.quote-line{
  margin: 0 0 8px;
  line-height: 1.55;
  position: relative;
  background: linear-gradient(90deg, var(--text), var(--accent), var(--text));
  background-clip: text; -webkit-background-clip: text; color: transparent;
  background-size: 200% 100%;
  opacity: .95;
  /* shimmer включаем после появления карточки */
  transition: background-position 2.4s linear;
}
.note-card.is-visible .quote-line{ background-position: 200% 50%; }

.note-meta{
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  color: var(--muted);
}
.note-name{ font-weight: 700; color: var(--text); }
.note-tag{
  padding: 2px 8px; border-radius: 999px;
  background: rgba(16,20,30,.6);
  border: 1px solid rgba(199,255,61,.28);
  font-size: .9rem;
}

/* star badge twinkle */
.note-stars{
  margin-left: auto;
  font-weight: 700;
  letter-spacing: 1px;
  filter: drop-shadow(0 0 6px rgba(199,255,61,.35));
  opacity: .9;
}
@keyframes twinkle {
  0%,100% { opacity: .7; filter: brightness(1); }
  50%     { opacity: 1;  filter: brightness(1.25); }
}
.note-card.is-visible .note-stars{ animation: twinkle 2.8s ease-in-out infinite; }
/* ===== SECTION 9: DOWNLOAD CTA ===== */
.download{
  position: relative;
  overflow: visible;
  border-top: 1px solid rgba(199,255,61,.12);
}
.dl-head{ text-align: center; margin-bottom: 20px; }
.dl-head h2{
  margin: 0 0 8px;
  font-family: Sora, Inter, sans-serif;
  font-size: clamp(1.6rem, 1.2rem + 1.3vw, 2.2rem);
  text-shadow:
    0 0 10px rgba(199,255,61,.22),
    0 0 18px rgba(125,92,255,.18);
}
.dl-sub{ margin: 0; color: var(--muted); }

.dl-grid{
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 24px;
  align-items: center;
}
.dl-points{
  margin: 0 0 14px; padding: 0 0 0 18px; color: var(--muted);
}
.dl-cta{ display: grid; gap: 8px; align-content: start; }
.dl-note{ margin: 0; color: var(--muted); font-size: .95rem; }

.dl-media{ justify-self: center; }

/* store button shimmer + pulse */
.btn-store{
  position: relative;
  overflow: hidden;
}
.btn-store::after{
  content:"";
  position:absolute; top:0; bottom:0; left:-40%;
  width:40%;
  background: linear-gradient(90deg, rgba(255,255,255,.0), rgba(255,255,255,.45), rgba(255,255,255,.0));
  transform: skewX(-20deg);
  opacity: 0;
}
.download.is-visible .btn-store::after{
  animation: btnSheen 2.6s ease-in-out .2s infinite;
}
@keyframes btnSheen{
  0%   { left:-40%; opacity:0; }
  15%  { opacity:.9; }
  60%  { left:120%; opacity:0; }
  100% { left:120%; opacity:0; }
}
.btn-store:hover{ transform: translateY(-2px) rotate(-.3deg); }

/* section-bounded road stripes behind CTA */
.dl-bg{
  position: absolute;
  left: 50%; transform: translateX(-50%);
  top: -12px; height: calc(100% + 24px);
  width: 100vw; z-index: -1; pointer-events: none; overflow: hidden;
}
.dl-bg::before{
  content:"";
  position:absolute; inset:0;
  background:
    repeating-linear-gradient(90deg, rgba(199,255,61,.10) 0 2px, transparent 2px 14px),
    radial-gradient(900px 560px at 18% 12%, rgba(125,92,255,.18), transparent 60%),
    radial-gradient(900px 560px at 82% 88%, rgba(199,255,61,.12), transparent 60%);
  mix-blend-mode: screen;
  opacity: .65;
  animation: dlStripes 24s linear infinite;
}
.dl-bg::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg, var(--bg) 0 72px,
      rgba(11,13,18,0) 140px,
      rgba(11,13,18,0) calc(100% - 140px),
      var(--bg) 100%);
}
@keyframes dlStripes{
  from{ transform: translateX(0); }
  to  { transform: translateX(-240px); }
}

/* ===== SECTION 10: FAQ ===== */
.faq{
  position: relative;
  overflow: visible;
  border-top: 1px solid rgba(199,255,61,.12);
}
.faq-head{ text-align: center; margin-bottom: 18px; }
.faq-head h2{
  margin: 0 0 8px;
  font-family: Sora, Inter, sans-serif;
  font-size: clamp(1.6rem, 1.2rem + 1.3vw, 2.2rem);
  text-shadow:
    0 0 10px rgba(199,255,61,.22),
    0 0 18px rgba(125,92,255,.18);
}
.faq-sub{ margin: 0; color: var(--muted); }

.faq-list{ display: grid; gap: 10px; }

.faq-item{
  background: linear-gradient(180deg, rgba(16,20,30,.85), rgba(16,20,30,.92));
  border: 1px solid rgba(199,255,61,.18);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: clip;
}
.faq-item[open]{ border-color: rgba(199,255,61,.32); }

.faq-item summary{
  list-style: none;
  cursor: pointer;
  padding: 14px 16px;
  position: relative;
  display: flex; align-items: center;
  gap: 10px;
  color: var(--text);
  outline: none;
}
.faq-item summary::-webkit-details-marker{ display: none; }

/* chevron */
.faq-item summary::after{
  content: "";
  width: 10px; height: 10px;
  border-right: 2px solid var(--text);
  border-bottom: 2px solid var(--text);
  transform: rotate(-45deg);
  margin-left: auto;
  transition: transform var(--t-base) var(--ease);
}
.faq-item[open] summary::after{ transform: rotate(45deg); }

/* focus ring */
.faq-item summary:focus-visible{
  box-shadow: inset 0 0 0 2px var(--ring);
}

/* body */
.faq-body{
  padding: 0 16px 16px;
  color: var(--muted);
  animation: faqReveal var(--t-slow) var(--ease);
}
@keyframes faqReveal{
  from{ opacity: 0; transform: translateY(6px); }
  to  { opacity: 1; transform: none; }
}

/* dotted, section-bounded background */
.faq-bg{
  position: absolute; left: 50%; transform: translateX(-50%);
  top: -10px; height: calc(100% + 20px); width: 100vw;
  z-index: -1; pointer-events: none; overflow: hidden;
}
.faq-bg::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(circle at 25% 30%, rgba(199,255,61,.18) 0 1px, transparent 2px),
    radial-gradient(circle at 65% 70%, rgba(125,92,255,.18) 0 1px, transparent 2px);
  background-size: 16px 16px, 18px 18px;
  opacity: .75;
  animation: faqDots 36s linear infinite;
}
.faq-bg::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg, var(--bg) 0 64px,
      rgba(11,13,18,0) 120px,
      rgba(11,13,18,0) calc(100% - 120px),
      var(--bg) 100%);
}
@keyframes faqDots{
  from{ transform: translateX(0); }
  to  { transform: translateX(-200px); }
}

/* Responsive */
@media (max-width: 991px){
  .dl-grid{ grid-template-columns: 1fr; }
  .dl-media{ order: -1; }
}
/* ===== HOW-TO — SECTION 5: DOWNLOAD CTA ===== */
.htdl{
  position: relative;
  overflow: visible;
  border-top: 1px solid rgba(199,255,61,.12);
}
.htdl-head{ text-align: center; margin-bottom: 14px; }
.htdl-head h2{
  margin: 0 0 6px;
  font-family: Sora, Inter, sans-serif;
  font-size: clamp(1.6rem, 1.2rem + 1.3vw, 2.2rem);
  text-shadow: 0 0 10px rgba(199,255,61,.22), 0 0 18px rgba(125,92,255,.18);
}
.htdl-sub{ margin: 0; color: var(--muted); }

.htdl-grid{
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 24px;
  align-items: center;
}

/* points + CTA */
.htdl-points{ margin: 0 0 12px; padding-left: 18px; color: var(--muted); }
.btn-store{
  position: relative; overflow: hidden;
}
.btn-store::after{
  content:"";
  position:absolute; top:0; bottom:0; left:-40%;
  width:40%;
  background: linear-gradient(90deg, rgba(255,255,255,.0), rgba(255,255,255,.45), rgba(255,255,255,.0));
  transform: skewX(-20deg);
  opacity: 0;
}
.htdl.is-visible .btn-store::after{ animation: htdlSheen 2.6s ease-in-out .2s infinite; }
@keyframes htdlSheen{
  0%{ left:-40%; opacity:0; }
  15%{ opacity:.9; }
  60%{ left:120%; opacity:0; }
  100%{ left:120%; opacity:0; }
}

/* media w/ gentle float */
.htdl-media{ justify-self: center; }
.htdl-float{
  border-radius: 14px;
  box-shadow: 0 6px 22px rgba(0,0,0,.35);
  animation: htdlFloat 5.2s cubic-bezier(.2,.8,.2,1) infinite;
  animation-play-state: paused;
}
.htdl.is-visible .htdl-float{ animation-play-state: running; }
@keyframes htdlFloat{
  0%   { transform: translateY(0) rotate(-.3deg); }
  50%  { transform: translateY(-8px) rotate(.3deg); }
  100% { transform: translateY(0) rotate(-.3deg); }
}

/* section-bounded neon lanes */
.htdl .htdl-bg{
  position: absolute; left: 50%; transform: translateX(-50%);
  top: -12px; height: calc(100% + 24px); width: 100vw;
  z-index: -1; pointer-events: none; overflow: hidden;
}
.htdl .htdl-bg::before{
  content:""; position:absolute; inset:0;
  background:
    repeating-linear-gradient(90deg, rgba(199,255,61,.10) 0 2px, transparent 2px 14px),
    radial-gradient(900px 560px at 18% 12%, rgba(125,92,255,.18), transparent 60%),
    radial-gradient(900px 560px at 82% 88%, rgba(199,255,61,.12), transparent 60%);
  mix-blend-mode: screen; opacity: .7;
  animation: htdlStripes 24s linear infinite;
}
.htdl .htdl-bg::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg, var(--bg) 0 72px,
      rgba(11,13,18,0) 140px,
      rgba(11,13,18,0) calc(100% - 140px),
      var(--bg) 100%);
}
@keyframes htdlStripes{ from{ transform: translateX(0);} to{ transform: translateX(-240px);} }

/* responsive */
@media (max-width: 991px){
  .htdl-grid{ grid-template-columns: 1fr; }
  .htdl-media{ order: -1; }
}