/* ========= Page 3: Viewer Challenges ========= */

.page-title{
  width: min(1200px, 100% - 32px);
  margin: calc(var(--header-h, 64px) + 12px) auto 0;
  padding-top: 8px;
  font-family: Orbitron, Inter, sans-serif;
  font-weight: 700;
  letter-spacing: .02em;
  filter: var(--nda-glow);
}

/* ===== Section 1: Challenge Hub ===== */
.hub{
  position:relative;
  background:
    radial-gradient(60% 40% at 10% 0%, rgba(75,255,231,.08), transparent 70%),
    radial-gradient(60% 40% at 90% 0%, rgba(255,75,216,.08), transparent 70%);
}
.hub-wrap{ display:grid; gap:14px; }
.hub-cards{
  display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(10px, 3vw, 22px);
}
.hcard{
  padding:12px; border-radius:14px;
  background: rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08);
  transition: transform .22s ease;
}
.hcard:hover{ transform: translateY(-3px); }
.hcard h3{ margin:0 0 6px; font-family: Orbitron, Inter, sans-serif; }
.bullets{ margin:8px 0 0; padding-left:18px; color:#dfe3ff; display:grid; gap:6px; }
.hub-figs{
  display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: clamp(10px, 3vw, 22px);
}
.hshot{
  padding:10px; border-radius:16px; border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03); filter: var(--nda-glow);
}



/* ===== Section 3: Voting ===== */
.voting{
  position:relative;
  background:
    radial-gradient(60% 40% at 0% 60%, rgba(75,255,231,.06), transparent 70%),
    radial-gradient(60% 40% at 100% 20%, rgba(255,75,216,.06), transparent 70%);
}
.vote-wrap{ display:grid; gap:14px; }
.vote-grid{ display:flex; flex-wrap:wrap; gap:10px; }
.vote-chip{
  appearance:none; border:1px solid rgba(255,255,255,.16);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  color:#e8ecff; padding:10px 14px; border-radius:999px; cursor:pointer;
  transition: transform .12s ease, border-color .2s ease, background .2s ease;
}
.vote-chip:hover{ transform: translateY(-2px); border-color: rgba(122,92,255,.35); background: rgba(122,92,255,.14); }

.progress-grid{
  display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:12px;
}
.pitem{ display:grid; grid-template-columns: 110px 1fr; align-items:center; gap:10px; }
.plabel{ color:#c8ceff; }
.pbar{ position:relative; height:10px; border-radius:999px; overflow:hidden; background: rgba(255,255,255,.08); }
.pf{
  display:block; width:0%; height:100%;
  background: linear-gradient(90deg, var(--nda-pink), var(--nda-cyan));
  box-shadow: 0 0 18px rgba(123,94,255,.35);
  transition: width 900ms cubic-bezier(.2,.6,.2,1);
}
.voting-figs{
  display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: clamp(10px, 3vw, 22px);
}
.vshot{
  padding:10px; border-radius:16px; border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03); filter: var(--nda-glow);
}

/* ===== Responsive (page 3, sections 1–3) ===== */
@media (max-width: 992px){
  .hub-cards{ grid-template-columns: 1fr; }
  .hub-figs, .carousel-figs, .voting-figs{ grid-template-columns: 1fr; }
  .progress-grid{ grid-template-columns: 1fr; }
}
/* ===== Section 4: Principles ===== */
.principles{
  position:relative;
  background:
    radial-gradient(60% 40% at 15% 0%, rgba(75,255,231,.08), transparent 70%),
    radial-gradient(60% 40% at 85% 0%, rgba(255,75,216,.08), transparent 70%);
}
.principles-wrap{ display:grid; gap:14px; }
.tenets{
  margin:0; padding-left:18px; color:#dfe3ff; display:grid; gap:8px;
}
.principles-figs{
  display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: clamp(10px, 3vw, 22px);
}
.pshot{
  padding:10px; border-radius:16px; border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03); filter: var(--nda-glow);
}

/* ===== Section 5: Moderation ===== */
.moderation{
  position:relative;
  background:
    radial-gradient(70% 50% at 50% 0%, rgba(122,92,255,.1), transparent 60%);
}
.mod-grid{ display:grid; gap:14px; }
.accordions{ display:grid; gap:10px; }
.acc-btn{
  width:100%; text-align:left; padding:12px 14px; border-radius:12px; cursor:pointer;
  color:#e8ecff; background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.acc-btn:hover{ background: rgba(122,92,255,.14); border-color: rgba(122,92,255,.35); transform: translateY(-1px); }
.acc-panel{
  padding:12px 14px; color:#dfe3ff; border-left:2px solid rgba(122,92,255,.5);
  background: rgba(255,255,255,.03); border-radius:8px;
}
.mod-figs{
  display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: clamp(10px, 3vw, 22px);
}
.mshot2{
  padding:10px; border-radius:16px; border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03); filter: var(--nda-glow);
}

/* ===== Section 6: Rewards ===== */
.rewards{
  position:relative;
  background:
    radial-gradient(60% 40% at 0% 60%, rgba(75,255,231,.06), transparent 70%),
    radial-gradient(60% 40% at 100% 20%, rgba(255,75,216,.06), transparent 70%);
}
.rewards-wrap{ display:grid; gap:14px; }
.track{
  display:grid; gap:10px;
}
.track-bar{
  position:relative; height:12px; border-radius:999px; overflow:hidden;
  background: rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12);
}
.track-fill{
  display:block; width:0%; height:100%;
  background: linear-gradient(90deg, var(--nda-pink), var(--nda-cyan));
  box-shadow: 0 0 18px rgba(123,94,255,.35);
  transition: width 1000ms cubic-bezier(.2,.6,.2,1);
}
.track-marks{
  margin:0; padding-left:18px; color:#dfe3ff; display:grid; gap:6px;
}
.reward-figs{
  display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: clamp(10px, 3vw, 22px);
}
.rshot2{
  padding:10px; border-radius:16px; border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03); filter: var(--nda-glow);
}

/* ===== Responsive (sections 4–6) ===== */
@media (max-width: 992px){
  .principles-figs, .mod-figs, .reward-figs{ grid-template-columns: 1fr; }
}
/* ===== Section 7: Etiquette ===== */
.etiquette{
  position:relative;
  background:
    radial-gradient(60% 40% at 10% 0%, rgba(75,255,231,.08), transparent 70%),
    radial-gradient(60% 40% at 90% 0%, rgba(255,75,216,.08), transparent 70%);
}
.etiquette-wrap{ display:grid; gap:14px; }
.tips{ margin:0; padding-left:18px; color:#dfe3ff; display:grid; gap:8px; }
.etiquette-figs{
  display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: clamp(10px,3vw,22px);
}
.eshot{
  padding:10px; border-radius:16px; border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03); filter: var(--nda-glow);
}

/* ===== Section 8: Localization ===== */
.localize{
  position:relative;
  background:
    radial-gradient(70% 50% at 50% 0%, rgba(122,92,255,.1), transparent 60%);
}
.loc-grid{ display:grid; gap:14px; }
.locale-controls{ display:flex; flex-wrap:wrap; gap:10px; }
.loc-chip{
  appearance:none; border:1px solid rgba(255,255,255,.16);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  color:#e8ecff; padding:10px 14px; border-radius:999px; cursor:pointer;
  transition: transform .12s ease, border-color .2s ease, background .2s ease;
}
.loc-chip:hover{ transform: translateY(-2px); border-color: rgba(122,92,255,.35); background: rgba(122,92,255,.14); }
.loc-chip.is-active{ outline:2px solid rgba(122,92,255,.45); }

.loc-sample{
  margin:0; padding:16px; border-radius:16px; text-align:center;
  border:1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.03);
}
.loc-caption{
  margin:0; font-family: Orbitron, Inter, sans-serif; font-weight:700;
  font-size: clamp(1.05rem, 2.6vw, 1.4rem); letter-spacing:.02em; color:#e8ecff;
}

.loc-figs{
  display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: clamp(10px,3vw,22px);
}
.lshot{
  padding:10px; border-radius:16px; border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03); filter: var(--nda-glow);
}

/* ===== Section 9: Playlists ===== */
.playlists{
  position:relative;
  background:
    radial-gradient(60% 40% at 0% 60%, rgba(75,255,231,.06), transparent 70%),
    radial-gradient(60% 40% at 100% 20%, rgba(255,75,216,.06), transparent 70%);
}
.plist-wrap{ display:grid; gap:14px; }
.plist-cards{
  display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(10px,3vw,22px);
}
.plist{
  padding:12px; border-radius:14px;
  background: rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08);
  transition: transform .22s ease, box-shadow .22s ease;
}
.plist:hover{ transform: translateY(-3px); box-shadow: 0 0 24px rgba(75,255,231,.16); }
.plist-figs{
  display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: clamp(10px,3vw,22px);
}
.pshot2{
  padding:10px; border-radius:16px; border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03); filter: var(--nda-glow);
}

/* ===== Responsive (7–9) ===== */
@media (max-width: 992px){
  .etiquette-figs, .loc-figs, .plist-cards, .plist-figs{ grid-template-columns: 1fr; }
}
/* ===== Section 10: Teamplay ===== */
.teamplay{
  position:relative;
  background:
    radial-gradient(60% 40% at 15% 0%, rgba(75,255,231,.08), transparent 70%),
    radial-gradient(60% 40% at 85% 0%, rgba(255,75,216,.08), transparent 70%);
}
.teamplay-wrap{ display:grid; gap:14px; }
.role-toggle{ display:flex; flex-wrap:wrap; gap:10px; }
.role-tab{
  appearance:none; border:1px solid rgba(255,255,255,.16);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  color:#e8ecff; padding:10px 14px; border-radius:999px; cursor:pointer;
  transition: transform .12s ease, border-color .2s ease, background .2s ease;
}
.role-tab:hover{ transform: translateY(-2px); border-color: rgba(122,92,255,.35); background: rgba(122,92,255,.14); }
.role-tab.is-active{ outline:2px solid rgba(122,92,255,.45); }
.role-points{ margin:0; padding-left:18px; color:#dfe3ff; display:grid; gap:8px; }
.team-figs{
  display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: clamp(10px,3vw,22px);
}
.tpshot{
  padding:10px; border-radius:16px; border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03); filter: var(--nda-glow);
}

/* ===== Section 11: Telemetry ===== */
.telemetry{
  position:relative;
  background:
    radial-gradient(70% 50% at 50% 0%, rgba(122,92,255,.1), transparent 60%);
}
.telemetry-wrap{ display:grid; gap:14px; }
.t-panel{
  border:1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.03);
  border-radius:16px; padding:12px; overflow:hidden; position:relative;
}
.t-row{ display:grid; grid-template-columns: 120px 1fr; gap:10px; padding:6px 0; }
.t-row .k{ color:#cfe0ff; font-weight:700; letter-spacing:.04em; text-transform:uppercase; }
.t-row .v{ color:#e8ecff; }
.trust-points{ margin:0; padding-left:18px; color:#dfe3ff; display:grid; gap:8px; }
.tele-figs{
  display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: clamp(10px,3vw,22px);
}
.tshot2{
  padding:10px; border-radius:16px; border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03); filter: var(--nda-glow);
}

/* ===== Section 12: Offline ===== */
.offline{
  position:relative;
  background:
    radial-gradient(60% 40% at 0% 60%, rgba(75,255,231,.06), transparent 70%),
    radial-gradient(60% 40% at 100% 20%, rgba(255,75,216,.06), transparent 70%);
}
.offline-wrap{ display:grid; gap:14px; }
.fallbacks{ display:grid; gap:8px; }
.fb-row{ display:flex; gap:10px; align-items:flex-start; }
.fb-dot{ width:10px; height:10px; border-radius:50%; background: linear-gradient(90deg, var(--nda-pink), var(--nda-cyan)); box-shadow: 0 0 10px rgba(123,94,255,.35); }
.off-figs{
  display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: clamp(10px,3vw,22px);
}
.oshot{
  padding:10px; border-radius:16px; border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03); filter: var(--nda-glow);
}

/* ===== Responsive (10–12) ===== */
@media (max-width: 992px){
  .team-figs, .tele-figs, .off-figs{ grid-template-columns: 1fr; }
}
/* ===== Section 13: Economy & Cooldowns ===== */
.economy{
  position:relative;
  background:
    radial-gradient(60% 40% at 10% 0%, rgba(75,255,231,.08), transparent 70%),
    radial-gradient(60% 40% at 90% 0%, rgba(255,75,216,.08), transparent 70%);
}
.eco-wrap{ display:grid; gap:14px; }
.cooldown-rail{ display:grid; gap:10px; }
.cd-item{ display:grid; grid-template-columns: 140px 1fr 52px; align-items:center; gap:10px; }
.cd-name{ color:#cfe0ff; font-weight:700; }
.cd-bar{
  position:relative; height:10px; border-radius:999px; overflow:hidden;
  background: rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12);
}
.cd-fill{
  display:block; width:0%; height:100%;
  background: linear-gradient(90deg, var(--nda-pink), var(--nda-cyan));
  box-shadow: 0 0 18px rgba(123,94,255,.35);
  transition: width 900ms cubic-bezier(.2,.6,.2,1);
}
.cd-time{ color:#dfe3ff; font-variant-numeric: tabular-nums; }
.eco-points{ margin:0; padding-left:18px; color:#dfe3ff; display:grid; gap:8px; }
.eco-figs{
  display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: clamp(10px,3vw,22px);
}
.ecoshot{
  padding:10px; border-radius:16px; border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03); filter: var(--nda-glow);
}

/* ===== Section 14: Safety-First Copywriting ===== */
.copywriting{
  position:relative;
  background:
    radial-gradient(70% 50% at 50% 0%, rgba(122,92,255,.1), transparent 60%);
}
.copy-wrap{ display:grid; gap:14px; }
.copy-grid{
  display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: clamp(10px,3vw,22px);
}
.copy-card{
  padding:12px; border-radius:14px; background: rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
}
.copy-card.do{ box-shadow: 0 0 20px rgba(75,255,231,.12); }
.copy-card.dont{ box-shadow: 0 0 20px rgba(255,75,216,.12); }
.copy-points{ margin:0; padding-left:18px; color:#dfe3ff; display:grid; gap:8px; }
.copy-figs{
  display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: clamp(10px,3vw,22px);
}
.cpshot{
  padding:10px; border-radius:16px; border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03); filter: var(--nda-glow);
}

/* ===== Section 15: Analytics ===== */
.analytics{
  position:relative;
  background:
    radial-gradient(60% 40% at 0% 60%, rgba(75,255,231,.06), transparent 70%),
    radial-gradient(60% 40% at 100% 20%, rgba(255,75,216,.06), transparent 70%);
}
.ana-wrap{ display:grid; gap:14px; }
.mini-bars{ display:grid; gap:8px; }
.bar-row{ display:grid; grid-template-columns: 120px 1fr 52px; align-items:center; gap:10px; }
.bname{ color:#cfe0ff; font-weight:700; }
.bbar{
  position:relative; height:10px; border-radius:999px; overflow:hidden;
  background: rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12);
}
.bf{
  display:block; width:0%; height:100%;
  background: linear-gradient(90deg, var(--nda-pink), var(--nda-cyan));
  box-shadow: 0 0 18px rgba(123,94,255,.35);
  transition: width 900ms cubic-bezier(.2,.6,.2,1);
}
.bval{ color:#dfe3ff; font-variant-numeric: tabular-nums; }
.ana-figs{
  display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: clamp(10px,3vw,22px);
}
.anshot{
  padding:10px; border-radius:16px; border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03); filter: var(--nda-glow);
}

/* ===== Responsive (13–15) ===== */
@media (max-width: 992px){
  .eco-figs, .copy-grid, .copy-figs, .ana-figs{ grid-template-columns: 1fr; }
}
/* ===== Section 16: Lab & Prototyping ===== */
.lab{
  position:relative;
  background:
    radial-gradient(60% 40% at 15% 0%, rgba(75,255,231,.08), transparent 70%),
    radial-gradient(60% 40% at 85% 0%, rgba(255,75,216,.08), transparent 70%);
}
.lab-wrap{ display:grid; gap:14px; }
.lab-tabs{ display:flex; flex-wrap:wrap; gap:10px; }
.lab-tab{
  appearance:none; border:1px solid rgba(255,255,255,.16);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  color:#e8ecff; padding:10px 14px; border-radius:999px; cursor:pointer;
  transition: transform .12s ease, border-color .2s ease, background .2s ease;
}
.lab-tab:hover{ transform: translateY(-2px); border-color: rgba(122,92,255,.35); background: rgba(122,92,255,.14); }
.lab-tab.is-active{ outline:2px solid rgba(122,92,255,.45); }
.lab-points{ margin:0; padding-left:18px; color:#dfe3ff; display:grid; gap:8px; }

.lab-figs{
  display:grid; grid-template-columns: repeat(3, minmax(0,1fr));
  gap: clamp(10px,3vw,22px);
}
.labshot{
  padding:10px; border-radius:16px; border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03); filter: var(--nda-glow);
}

/* ===== Section 17: Final Call ===== */
.final{
  position:relative;
  background:
    radial-gradient(70% 50% at 50% 0%, rgba(122,92,255,.1), transparent 60%);
}
.final-wrap{ display:grid; gap:14px; }
.final-figs{
  display:grid; grid-template-columns: repeat(3, minmax(0,1fr));
  gap: clamp(10px,3vw,22px);
}
.fshot{
  padding:10px; border-radius:16px; border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03); filter: var(--nda-glow);
}
.glow-ticker{
  overflow:hidden; white-space:nowrap; border:1px dashed rgba(255,255,255,.16);
  border-radius:999px; padding:10px 12px;
}
.glow-ticker span{
  display:inline-block; padding-right: 40px; letter-spacing:.2em; text-transform:uppercase; color:#cfe8ff;
  animation: marquee 16s linear infinite;
}

/* ===== Responsive (16–17) ===== */
@media (max-width: 992px){
  .lab-figs{ grid-template-columns: 1fr; }
  .final-figs{ grid-template-columns: 1fr; }
}
/* ===== CTA buttons (Section 17) ===== */
.final .cta-stack{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.final .cta-stack a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 16px;
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: .02em;
  text-decoration: none;              /* убираем подчёркивание */
  line-height: 1;
  transition: transform .16s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}

/* Filled neon */
.solid-btn{
  color: #071017;
  background: linear-gradient(90deg, var(--nda-pink), var(--nda-cyan));
  border: 1px solid rgba(255,255,255,.22);
  box-shadow: 0 0 20px rgba(123,94,255,.35), inset 0 0 0 1px rgba(255,255,255,.15);
}
.solid-btn:hover{ transform: translateY(-2px); box-shadow: 0 8px 30px rgba(123,94,255,.45); }
.solid-btn:active{ transform: translateY(0); }
.solid-btn:focus-visible{ outline: 0; box-shadow: 0 0 0 3px rgba(122,92,255,.55); }

/* Outline neon */
.outline-btn{
  color: #e8ecff;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.22);
  box-shadow: 0 0 0 0 rgba(123,94,255,0);
}
.outline-btn:hover{
  border-color: rgba(122,92,255,.55);
  background: rgba(122,92,255,.12);
  transform: translateY(-2px);
}
.outline-btn:active{ transform: translateY(0); }
.outline-btn:focus-visible{ outline: 0; box-shadow: 0 0 0 3px rgba(122,92,255,.45); }

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce){
  .final .cta-stack a{ transition: none; }
}