/* ==========================================================
   BATTLE MVP — HOW IT WORKS  (v3 — FAQ fixed)
   ========================================================== */

:root {
  --acc:  #00ffa6;
  --acc2: #00cfff;
  --bg:   #060d0f;
  --c1:   #081018;
  --sep:  rgba(255,255,255,.06);
  --bdr:  rgba(0,255,166,.1);
  --mut:  #3a5566;
  --txt:  #eaf1ff;
  --r:    10px;
  --f1:   'Barlow Condensed', sans-serif;
}

.hw { display:flex; flex-direction:column; gap:12px; }

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

.hw-hero {
  position:relative; border-radius:var(--r);
  overflow:hidden; border:1px solid var(--bdr);
}

.hw-hbg { position:absolute; inset:0; pointer-events:none; z-index:0; }

.hw-hbg-grid {
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(0,255,166,.04) 1px, transparent 1px),
    linear-gradient(90deg,rgba(0,255,166,.04) 1px,transparent 1px);
  background-size:24px 24px;
}

.hw-hbg-ga {
  position:absolute; top:-60px; left:-60px; width:260px; height:260px;
  background:radial-gradient(circle,rgba(0,255,166,.18),transparent 70%); filter:blur(60px);
}

.hw-hbg-gb {
  position:absolute; top:-60px; right:-60px; width:260px; height:260px;
  background:radial-gradient(circle,rgba(0,207,255,.12),transparent 70%); filter:blur(60px);
}

.hw-hbg-scan {
  position:absolute; top:0; left:-100%; width:40%; height:2px;
  background:linear-gradient(90deg,transparent,var(--acc),var(--acc2),transparent);
  animation:hw-scan 4s ease-in-out infinite;
}

.hw-hero-in {
  position:relative; z-index:1;
  display:grid; grid-template-columns:1fr 320px;
  background:linear-gradient(135deg,#071218,#030810);
  padding:22px 22px; gap:0;
}

/* LEFT */
.hw-hero-l {
  display:flex; flex-direction:column; gap:12px;
  padding-right:22px; border-right:1px solid var(--sep);
}

.hw-tag {
  display:flex; align-items:center; gap:7px;
  font-size:9px; font-weight:700; letter-spacing:.18em; color:var(--acc); text-transform:uppercase;
}

.hw-tag-dot {
  width:6px; height:6px; border-radius:50%;
  background:var(--acc); box-shadow:0 0 8px var(--acc);
  animation:hw-blink 1.2s ease-in-out infinite;
}

.hw-h1 {
  font-family:var(--f1); font-size:46px; font-weight:900;
  line-height:1; color:var(--txt); letter-spacing:.02em; margin:0;
}

.hw-h1-acc { color:var(--acc); text-shadow:0 0 14px rgba(0,255,166,.4); }

.hw-h1-desc {
  font-size:12px; color:rgba(234,241,255,.58); line-height:1.6; margin:0;
}

.hw-h1-desc b { color:var(--txt); }

/* PILLS */
.hw-pills { display:flex; align-items:center; gap:4px; flex-wrap:wrap; }

.hw-pill {
  padding:4px 11px; border-radius:20px;
  background:rgba(255,255,255,.05); border:1px solid var(--sep);
  color:var(--mut); font-size:9px; font-weight:700; letter-spacing:.1em;
  cursor:pointer; transition:all .15s; text-transform:uppercase;
}

.hw-pill:hover { color:rgba(234,241,255,.7); background:rgba(0,255,166,.06); border-color:rgba(0,255,166,.18); }

.hw-pill.active {
  background:rgba(0,255,166,.12); border-color:rgba(0,255,166,.3);
  color:var(--acc); box-shadow:0 0 10px rgba(0,255,166,.12);
}

.hw-pill-sep { color:var(--mut); font-size:11px; }

/* DETAIL BOX */
.hw-detail-box {
  padding:12px 14px; border-radius:9px;
  background:rgba(0,255,166,.04); border:1px solid rgba(0,255,166,.12);
  display:flex; flex-direction:column; gap:3px;
}

.hw-db-step  { font-size:8px; font-weight:700; letter-spacing:.14em; color:var(--acc); text-transform:uppercase; }
.hw-db-title { font-size:14px; font-weight:800; color:#fff; }
.hw-db-text  { font-size:11px; color:var(--mut); line-height:1.55; }

/* RIGHT */
.hw-hero-r { padding-left:22px; display:flex; }

.hw-live-card { width:100%; display:flex; flex-direction:column; gap:12px; }

.hw-lc-head {
  display:flex; align-items:center; gap:7px;
  font-size:9px; font-weight:700; letter-spacing:.1em; color:var(--acc); text-transform:uppercase;
}

.hw-lc-dot {
  width:7px; height:7px; border-radius:50%;
  background:var(--acc); box-shadow:0 0 8px var(--acc);
  animation:hw-blink .9s ease-in-out infinite;
}

/* LIVE STATS */
.hw-lc-stats {
  display:flex; align-items:center;
  background:rgba(255,255,255,.03); border:1px solid var(--sep); border-radius:8px; padding:7px 0;
}

.hw-lcs       { flex:1; text-align:center; }
.hw-lcs-val   { font-family:var(--f1); font-size:19px; font-weight:800; color:#fff; line-height:1; }
.hw-lcs-lbl   { font-size:8px; font-weight:700; letter-spacing:.1em; color:var(--mut); text-transform:uppercase; margin-top:2px; }
.hw-lcs-sep   { width:1px; height:26px; background:var(--sep); flex-shrink:0; }

/* PIPELINE */
.hw-pipeline { display:flex; align-items:center; }

.hw-pls {
  display:flex; flex-direction:column; align-items:center; gap:2px;
  flex:1; padding:6px 2px; border-radius:7px;
  cursor:pointer; transition:all .2s;
}

.hw-pls:hover { background:rgba(255,255,255,.04); }
.hw-pls.active { background:rgba(0,255,166,.07); }

.hw-pls-ico {
  font-size:16px; line-height:1;
  filter:grayscale(1) opacity(.4);
  transition:filter .2s;
}

.hw-pls.active .hw-pls-ico { filter:none; }

.hw-pls-lbl {
  font-size:6px; font-weight:700; letter-spacing:.1em;
  color:var(--mut); text-transform:uppercase; transition:color .2s;
}

.hw-pls.active .hw-pls-lbl { color:var(--acc); }

.hw-pls-line { flex-shrink:0; width:12px; height:1px; background:rgba(255,255,255,.1); }

/* CTA */
.hw-lc-ctas { display:flex; gap:6px; }

.hw-play-btn {
  flex:1; padding:9px; border-radius:8px; text-align:center;
  background:linear-gradient(135deg,var(--acc),var(--acc2));
  color:#001a0f; font-weight:800; font-size:12px;
  text-decoration:none; transition:all .2s;
}

.hw-play-btn:hover { transform:translateY(-2px); box-shadow:0 6px 18px rgba(0,255,166,.35); }

.hw-rank-link {
  padding:9px 12px; border-radius:8px;
  background:rgba(255,255,255,.06); border:1px solid var(--sep);
  color:var(--txt); font-size:11px; font-weight:700;
  text-decoration:none; white-space:nowrap; transition:all .15s;
}

.hw-rank-link:hover { background:rgba(255,255,255,.1); }

/* ==========================================================
   BODY
   ========================================================== */

.hw-body {
  display:grid; grid-template-columns:1fr 228px;
  gap:12px; align-items:start;
}

.hw-main { display:flex; flex-direction:column; gap:12px; }

/* CARD */
.hw-card {
  background:var(--c1); border:1px solid var(--sep);
  border-radius:var(--r); padding:16px;
}

.hw-ch  { display:flex; align-items:baseline; gap:10px; margin-bottom:14px; }
.hw-ct  { font-size:9px; font-weight:700; letter-spacing:.14em; color:var(--mut); text-transform:uppercase; }
.hw-csub{ font-size:10px; color:var(--mut); }

/* ==========================================================
   STEPS
   ========================================================== */

.hw-steps { display:flex; flex-direction:column; }

.hw-step {
  display:flex; gap:12px;
  padding:10px 6px;
  border-bottom:1px solid rgba(255,255,255,.03);
  cursor:pointer; transition:background .12s; border-radius:8px;
}

.hw-step:last-child { border-bottom:none; }
.hw-step:hover      { background:rgba(255,255,255,.025); }
.hw-step.active     { background:rgba(0,255,166,.04); }

.hw-step-left {
  display:flex; flex-direction:column; align-items:center;
  flex-shrink:0; width:32px;
}

.hw-step-num {
  width:32px; height:32px; border-radius:50%;
  background:rgba(255,255,255,.06); border:1px solid var(--sep);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--f1); font-size:15px; font-weight:800; color:var(--mut);
  flex-shrink:0; transition:all .2s;
}

.hw-step.active .hw-step-num {
  background:rgba(0,255,166,.14); border-color:rgba(0,255,166,.3);
  color:var(--acc); box-shadow:0 0 10px rgba(0,255,166,.18);
}

.hw-step-vline {
  width:2px; flex:1; min-height:16px;
  background:rgba(255,255,255,.06); border-radius:1px; margin-top:4px;
}

.hw-step.active .hw-step-vline { background:rgba(0,255,166,.18); }

.hw-step-body { flex:1; min-width:0; padding-bottom:6px; }

.hw-step-head {
  display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:4px;
}

.hw-step-ico   { font-size:17px; flex-shrink:0; }
.hw-step-title { font-size:14px; font-weight:800; color:#fff; flex:1; min-width:0; }

.hw-step-tag {
  font-size:8px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  padding:2px 7px; border-radius:4px;
  background:rgba(255,255,255,.06); border:1px solid var(--sep); color:var(--mut);
  flex-shrink:0;
}

.hw-step.active .hw-step-tag {
  background:rgba(0,255,166,.1); border-color:rgba(0,255,166,.25); color:var(--acc);
}

.hw-step-desc {
  font-size:12px; color:rgba(234,241,255,.6); line-height:1.5; margin:0;
}

/* expand — grid trick for smooth animation */
.hw-step-expand {
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows .3s ease;
  overflow:hidden;
}

.hw-step.active .hw-step-expand {
  grid-template-rows:1fr;
}

.hw-step-expand-inner {
  min-height:0; /* required for grid trick */
  font-size:11px; color:var(--mut); line-height:1.55;
  padding-top:0;
  transition:padding-top .3s ease;
}

.hw-step.active .hw-step-expand-inner {
  padding-top:6px;
}

/* ==========================================================
   MODES
   ========================================================== */

.hw-modes { display:flex; flex-direction:column; gap:8px; }

.hw-mode {
  display:flex; align-items:center; gap:12px;
  padding:12px 14px; border-radius:9px;
  background:rgba(255,255,255,.025);
  border:1px solid rgba(255,255,255,.05);
  transition:all .2s;
}

.hw-mode:hover { transform:translateX(3px); border-color:rgba(255,255,255,.1); }

.hw-mode-ico  { font-size:26px; flex-shrink:0; }
.hw-mode-body { flex:1; min-width:0; }
.hw-mode-nm   { font-size:14px; font-weight:800; }
.hw-mode-desc { font-size:11px; color:var(--mut); margin-top:2px; }

.hw-mode-badge {
  padding:3px 9px; border-radius:5px;
  font-size:8px; font-weight:800; letter-spacing:.12em;
  flex-shrink:0;
}

.hw-mode-play {
  padding:7px 14px; border-radius:7px; border:1px solid;
  font-size:12px; font-weight:700; text-decoration:none;
  flex-shrink:0; transition:opacity .15s; background:transparent;
}

.hw-mode-play:hover { opacity:.75; }

/* ==========================================================
   PLATFORM FEATURES
   ========================================================== */

.hw-feats {
  display:grid; grid-template-columns:1fr 1fr; gap:7px;
}

.hw-feat {
  display:flex; align-items:center; gap:10px;
  padding:11px 13px; border-radius:9px;
  background:rgba(255,255,255,.03); border:1px solid var(--sep);
  cursor:pointer; transition:all .18s;
  outline:none; position:relative; overflow:hidden;
}

.hw-feat::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(135deg,color-mix(in srgb,var(--fc) 8%,transparent),transparent);
  opacity:0; transition:opacity .2s;
}

.hw-feat:hover {
  border-color:color-mix(in srgb,var(--fc) 35%,transparent);
  transform:translateY(-2px);
  box-shadow:0 6px 20px rgba(0,0,0,.3);
}

.hw-feat:hover::before { opacity:1; }

.hw-feat-ico  { font-size:22px; flex-shrink:0; position:relative; z-index:1; }

.hw-feat-body { flex:1; min-width:0; position:relative; z-index:1; }

.hw-feat-t { font-size:13px; font-weight:800; color:#fff; }
.hw-feat-d { font-size:10px; color:var(--mut); margin-top:1px; }

.hw-feat-arrow {
  font-size:18px; color:var(--mut);
  flex-shrink:0; position:relative; z-index:1;
  transition:all .18s;
}

.hw-feat:hover .hw-feat-arrow {
  color:var(--fc); transform:translateX(3px);
}

/* ==========================================================
   FAQ — FIXED ACCORDION
   ========================================================== */

.hw-faqs { display:flex; flex-direction:column; }

.hw-faq {
  border-bottom:1px solid rgba(255,255,255,.06);
  cursor:pointer;
  user-select:none;
}

.hw-faq:last-child { border-bottom:none; }

.hw-faq-q {
  display:flex; justify-content:space-between; align-items:center;
  gap:12px;
  padding:14px 4px;
  font-size:14px; font-weight:700; color:var(--txt);
}

.hw-faq-arr {
  font-size:20px; color:var(--mut); flex-shrink:0;
  transition:transform .25s ease, color .15s;
  line-height:1;
}

.hw-faq.open .hw-faq-arr {
  transform:rotate(90deg);
  color:var(--acc);
}

/* ── ANSWER: max-height trick — reliable cross-browser ── */
.hw-faq-a {
  max-height:0;
  overflow:hidden;
  transition:max-height .3s ease, padding .3s ease;
  font-size:12px;
  color:var(--mut);
  line-height:1.6;
  padding:0 4px;
}

.hw-faq.open .hw-faq-a {
  max-height:200px; /* достаточно большое, чтоб вместить любой ответ */
  padding:0 4px 14px;
}

/* ==========================================================
   SIDEBAR
   ========================================================== */

.hw-sb  { display:flex; flex-direction:column; gap:12px; }

.hw-scard {
  background:var(--c1); border:1px solid var(--sep);
  border-radius:var(--r); padding:13px;
}

.hw-scard.why-card {
  border-color:rgba(0,255,166,.12);
  background:linear-gradient(135deg,rgba(0,255,166,.04),var(--c1));
}

.hw-scard.cta-card {
  display:flex; flex-direction:column; align-items:center; gap:7px;
  text-align:center;
  background:linear-gradient(135deg,rgba(0,207,255,.05),rgba(0,255,166,.04),var(--c1));
  border-color:rgba(0,255,166,.13);
}

.hw-sct {
  font-size:9px; font-weight:700; letter-spacing:.14em;
  color:var(--mut); text-transform:uppercase; margin-bottom:9px;
}

/* RULES */
.hw-rule {
  display:flex; align-items:flex-start; gap:8px;
  padding:5px 0; border-bottom:1px solid rgba(255,255,255,.03);
  font-size:11px; color:rgba(234,241,255,.68);
}

.hw-rule:last-child { border-bottom:none; }
.hw-rule > span:first-child { font-size:13px; flex-shrink:0; margin-top:1px; }
.hw-rule b { color:#fff; }

/* WHY */
.hw-why {
  display:flex; align-items:center; gap:7px;
  padding:5px 0; border-bottom:1px solid rgba(255,255,255,.03);
  font-size:11px;
}

.hw-why:last-child { border-bottom:none; }

.hw-why-ic {
  width:15px; height:15px; border-radius:4px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-size:8px; font-weight:800;
}

.hw-why-ic.ok { background:rgba(0,255,166,.12); border:1px solid rgba(0,255,166,.25); color:var(--acc); }
.hw-why-ic.no { background:rgba(248,113,113,.08); border:1px solid rgba(248,113,113,.2); color:#f87171; }

/* CTA */
.hw-cta-ico   { font-size:34px; }
.hw-cta-title { font-size:15px; font-weight:800; color:#fff; }
.hw-cta-sub   { font-size:10px; color:var(--mut); }

.hw-cta-btn {
  width:100%; padding:9px; border-radius:8px; text-align:center;
  background:linear-gradient(135deg,var(--acc),var(--acc2));
  color:#001a0f; font-weight:800; font-size:12px;
  text-decoration:none; transition:all .2s; display:block;
}

.hw-cta-btn.ghost {
  background:rgba(255,255,255,.06); border:1px solid var(--sep); color:var(--txt);
}

.hw-cta-btn:hover { transform:translateY(-1px); }
.hw-cta-btn:not(.ghost):hover { box-shadow:0 6px 18px rgba(0,255,166,.35); }
.hw-cta-note { font-size:9px; color:var(--mut); }

/* LIVE */
.hw-lv-row {
  display:flex; justify-content:space-between; align-items:center;
  padding:5px 0; border-bottom:1px solid rgba(255,255,255,.03); font-size:11px;
}

.hw-lv-row:last-child { border-bottom:none; }
.hw-lv-row > span:first-child { color:var(--mut); }
.hw-lv-val { font-weight:700; color:var(--txt); }

/* ==========================================================
   FEATURE MODAL
   ========================================================== */

.hw-modal-overlay {
  position:fixed; inset:0; z-index:9999;
  background:rgba(0,0,0,.8); backdrop-filter:blur(8px);
  display:flex; align-items:center; justify-content:center; padding:20px;
}

.hw-modal-overlay.hidden { display:none; }

.hw-modal {
  width:100%; max-width:560px;
  background:#0a1520; border:1px solid rgba(0,255,166,.2);
  border-radius:14px; box-shadow:0 30px 80px rgba(0,0,0,.8);
  overflow:hidden; position:relative;
  animation:hw-modal-in .25s cubic-bezier(.4,0,.2,1);
}

@keyframes hw-modal-in {
  from { transform:translateY(20px) scale(.97); opacity:0; }
  to   { transform:translateY(0) scale(1); opacity:1; }
}

.hw-modal-close {
  position:absolute; top:12px; right:12px;
  width:28px; height:28px; border-radius:7px;
  background:rgba(255,255,255,.08); border:1px solid var(--sep);
  color:var(--mut); font-size:12px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:all .12s; z-index:2;
}

.hw-modal-close:hover { background:rgba(248,113,113,.15); color:#f87171; }

.hw-modal-head {
  display:flex; align-items:center; gap:14px;
  padding:20px 20px 14px;
  border-bottom:1px solid var(--sep);
  background:rgba(0,255,166,.03);
}

.hw-modal-ico   { font-size:36px; line-height:1; }
.hw-modal-title { font-size:20px; font-weight:800; line-height:1; }
.hw-modal-hl    { font-size:12px; color:var(--mut); margin-top:4px; }

.hw-modal-body {
  padding:14px 20px 0;
  font-size:13px; color:rgba(234,241,255,.65); line-height:1.65;
}

.hw-modal-points {
  padding:12px 20px;
  display:flex; flex-direction:column; gap:6px;
}

.hw-mp {
  display:flex; align-items:flex-start; gap:8px;
  font-size:12px; color:rgba(234,241,255,.75);
}

.hw-mp > span { font-size:12px; font-weight:700; flex-shrink:0; margin-top:1px; }

.hw-modal-footer {
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 20px;
  border-top:1px solid var(--sep);
  background:rgba(255,255,255,.02);
}

.hw-modal-prev,
.hw-modal-next {
  padding:6px 14px; border-radius:7px;
  background:rgba(255,255,255,.06); border:1px solid var(--sep);
  color:var(--txt); font-size:11px; font-weight:700;
  cursor:pointer; transition:all .15s;
}

.hw-modal-prev:hover,
.hw-modal-next:hover { background:rgba(0,255,166,.1); border-color:rgba(0,255,166,.25); color:var(--acc); }

.hw-modal-dots { display:flex; gap:5px; }

.hw-mdot {
  width:7px; height:7px; border-radius:50%;
  background:rgba(255,255,255,.15); cursor:pointer; transition:all .15s;
}

.hw-mdot.active { background:var(--acc); box-shadow:0 0 6px var(--acc); }

/* ==========================================================
   ANIMATIONS
   ========================================================== */

@keyframes hw-blink { 0%,100%{opacity:1} 50%{opacity:.25} }
@keyframes hw-scan  { 0%{left:-40%} 100%{left:130%} }

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

@media (max-width:1050px) {
  .hw-body { grid-template-columns:1fr; }
  .hw-sb   { display:grid; grid-template-columns:1fr 1fr; }
}

@media (max-width:860px) {
  .hw-hero-in { grid-template-columns:1fr; padding:14px; }
  .hw-hero-l  { padding-right:0; border-right:none; border-bottom:1px solid var(--sep); padding-bottom:14px; }
  .hw-hero-r  { padding-left:0; padding-top:14px; }
  .hw-feats   { grid-template-columns:1fr; }
  .hw-sb      { grid-template-columns:1fr; }
}

@media (max-width:540px) {
  .hw-h1   { font-size:34px; }
  .hw-feats{ grid-template-columns:1fr; }
}