/* Panda Banda — лендинг: секции, специфичные для главной страницы */

/* ---------- Общая разметка секций ---------- */
.landing-section { padding-top: 5rem; padding-bottom: 5rem; position: relative; overflow: hidden; }
.landing-section + .landing-section { border-top: 1px solid var(--line); }
.landing-section::before {
  content: ''; position: absolute; top: -120px; right: -120px; width: 360px; height: 360px;
  border-radius: 50%; background: radial-gradient(circle, rgba(var(--neon-rgb), .1), transparent 70%);
  pointer-events: none; z-index: 0;
}
.landing-section--alt::before {
  background: radial-gradient(circle, rgba(var(--magenta-rgb), .09), transparent 70%);
  top: auto; bottom: -120px; right: auto; left: -120px;
}
.landing-section > * { position: relative; z-index: 1; }
.landing-section--photo::after {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background: url('../scenes/office-team.png') center 20% / cover no-repeat;
  opacity: .07; filter: grayscale(.35);
}

/* ---------- Hero ---------- */
.hero-landing {
  position: relative; overflow: hidden; text-align: center;
  padding: 8rem 0 4rem;
}
.hero-landing__bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.hero-landing__bg img { width: 100%; height: 130%; object-fit: cover; opacity: .3; filter: saturate(1.15) contrast(1.05); }
.hero-landing__bg::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(var(--bg-rgb), .55) 0%, rgba(var(--bg-rgb), .8) 65%, var(--bg) 100%);
}
.particles-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.hero-landing__inner { position: relative; z-index: 1; max-width: 760px; margin: 0 auto; padding: 0 5vw; }
.hero-badge {
  display: inline-flex; align-items: center; gap: .5rem; padding: .5rem 1.1rem;
  border-radius: 50px; border: 1px solid rgba(var(--neon-rgb), .3);
  background: rgba(var(--neon-rgb), .06); font-size: .8rem; color: var(--neon);
  margin-bottom: 2rem;
}
.hero-badge .pulse-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--neon);
  animation: pulse-dot 2s infinite;
}
@keyframes pulse-dot { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .5; transform: scale(1.25); } }
.hero-landing h1 { font-size: clamp(2rem, 5vw, 3.4rem); font-weight: 800; line-height: 1.15; margin-bottom: 1.5rem; }
.hero-landing h1 .gradient-text {
  background: linear-gradient(135deg, var(--neon), var(--magenta));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.hero-subtitle { color: var(--muted); font-size: clamp(1rem, 1.6vw, 1.2rem); line-height: 1.7; margin-bottom: 2.5rem; }
.hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; }

/* ---------- Команда — 4 голоса ---------- */
.team-grid { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
.team-card { text-align: center; display: flex; flex-direction: column; height: 100%; }
.team-card__photo {
  position: absolute; inset: 0; z-index: -1; background-size: cover; background-position: center top;
  opacity: .16; filter: grayscale(.25) saturate(1.2);
  -webkit-mask-image: linear-gradient(180deg, black 0%, transparent 75%);
  mask-image: linear-gradient(180deg, black 0%, transparent 75%);
}
.team-card--marcus .team-card__photo { background-image: url('../scenes/work-marcus.png'); }
.team-card--cole .team-card__photo { background-image: url('../scenes/work-cole.png'); }
.team-card--percy .team-card__photo { background-image: url('../scenes/work-percy.png'); }
.team-card--minta .team-card__photo { background-image: url('../scenes/work-minta.png'); }
.team-card__avatar {
  width: 84px; height: 84px; border-radius: 50%; object-fit: cover; margin: 0 auto 1rem;
  border: 2px solid rgba(var(--neon-rgb), .5); box-shadow: 0 0 18px rgba(var(--neon-rgb), .3);
  animation: avatar-float 4s ease-in-out infinite;
}
@keyframes avatar-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.team-card__icon { display: flex; justify-content: center; margin-bottom: .5rem; color: var(--neon); }
.team-card h3 { font-size: 1.1rem; margin-bottom: .25rem; }
.team-card__role { display: block; font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--neon); margin-bottom: .75rem; }
.team-card__focus { font-size: .85rem; color: var(--muted); line-height: 1.55; margin-bottom: 1rem; }
.team-card__quote { font-size: .82rem; font-style: italic; color: var(--text); opacity: .85; border-left: 2px solid var(--neon); padding-left: .75rem; text-align: left; margin-top: auto; }

/* ---------- Почему мы / Как работаем — сетки карточек ---------- */
.feature-grid { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
.feature-card__icon {
  position: relative;
  width: 64px; height: 64px; border-radius: 18px; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(var(--neon-rgb), .16), rgba(var(--magenta-rgb), .1));
  border: 1px solid rgba(var(--neon-rgb), .25); color: var(--neon);
  margin-bottom: 1.25rem; box-shadow: 0 0 24px rgba(var(--neon-rgb), .15);
}
.feature-card h3 { font-size: 1.05rem; font-weight: 700; margin-bottom: .6rem; }
.feature-card p { font-size: .88rem; color: var(--muted); line-height: 1.6; }

.process-grid { display: grid; gap: 1.5rem; grid-template-columns: 1fr; counter-reset: step; }

@media (min-width: 640px) {
  .team-grid, .feature-grid, .process-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .team-grid, .feature-grid, .process-grid { grid-template-columns: repeat(4, 1fr); }
}
.process-card { position: relative; padding-top: 2.5rem; }
.process-card::before {
  counter-increment: step; content: counter(step);
  position: absolute; top: 1.5rem; left: 2rem;
  width: 32px; height: 32px; border-radius: 10px;
  background: linear-gradient(135deg, var(--neon), var(--neon-deep));
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: .9rem; color: var(--bg);
}
.process-card__icon {
  width: 48px; height: 48px; border-radius: 14px; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(var(--neon-rgb), .14), rgba(var(--magenta-rgb), .08));
  border: 1px solid rgba(var(--neon-rgb), .22); color: var(--neon);
  margin-left: auto; margin-bottom: .75rem;
}
.process-card p { font-size: .88rem; color: var(--muted); line-height: 1.6; }

/* ---------- Ночной дайджест ---------- */
.digest-feed { display: grid; gap: 1.5rem; grid-template-columns: repeat(2, 1fr); }
@media (max-width: 780px) { .digest-feed { grid-template-columns: 1fr; } }
.digest-card {
  background: rgba(var(--bg2-rgb), .55);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-color: rgba(var(--neon-rgb), .15);
  position: relative;
  transition: transform .4s cubic-bezier(.4,0,.2,1), border-color .4s, box-shadow .4s, background .4s;
}
.digest-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--neon), var(--magenta)); opacity: .7;
}
.digest-card:hover {
  transform: translateY(-8px);
  border-color: rgba(var(--neon-rgb), .4);
  box-shadow: 0 20px 50px rgba(var(--neon-rgb), .1);
  background: rgba(var(--bg2-rgb), .7);
}
.digest-card .article-card__meta { margin-bottom: .75rem; }
.digest-card .banda-comments { border-top: 1px solid var(--line); padding-top: 1rem; margin-top: .5rem; }
.digest-card .banda-comment { padding: 10px; }
.digest-empty { grid-column: 1 / -1; text-align: center; color: var(--muted); padding: 3rem 0; }
.digest-footer { text-align: center; margin-top: 2.5rem; }

/* ---------- Сравнение с конкурентами ---------- */
.compare-wrap { margin-top: 1rem; }

/* ---------- Присоединяйтесь ---------- */
.join-block { text-align: center; max-width: 640px; margin: 0 auto; }
.join-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; margin-top: 2rem; }
.join-tg {
  display: inline-flex; align-items: center; gap: .5rem; padding: .9rem 1.5rem; border-radius: 12px;
  border: 1px dashed var(--line); color: var(--muted); font-size: .9rem;
}

/* ---------- Scroll-to-top ---------- */
.scroll-top-btn {
  position: fixed; bottom: 2rem; right: 2rem; width: 46px; height: 46px; border-radius: 50%;
  background: var(--panel); border: 1px solid rgba(var(--neon-rgb), .3); color: var(--neon);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  opacity: 0; pointer-events: none; transition: all .3s; z-index: 60;
  box-shadow: 0 10px 30px rgba(0,0,0,.4);
}
.scroll-top-btn.is-visible { opacity: 1; pointer-events: all; }
.scroll-top-btn:hover { background: var(--neon); color: var(--bg); transform: translateY(-3px); }

@media (max-width: 640px) {
  .landing-section { padding-top: 3.5rem; padding-bottom: 3.5rem; }
  .hero-landing { padding: 7rem 0 3rem; }
}