/* ============================================================================
   NEON-LANDING — расширения над neon-tokens.css для целостной страницы.
   Промежуточные секции (между .nblock) и языковой тогл. Mobile-first.
   ============================================================================ */

html, body { margin: 0; padding: 0; }
body.neon-root {
  background: var(--bg);
  color: var(--white);
  font-family: var(--font);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; }

/* ——— Языковой тогл (липкая полоса сверху) ——— */
.lang-bar{
  position: sticky; top: 0; z-index: 50;
  background: rgba(5,8,12,.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.lang-bar-inner{
  max-width: 430px; margin: 0 auto;
  display: flex; align-items: center; gap: 10px;
  padding: 9px 22px;
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--mut);
}
.lang-bar .dot{ width: 6px; height: 6px; border-radius: 50%;
  background: var(--neon); box-shadow: 0 0 8px var(--neon); }
.lang-bar .toggle{ margin-left: auto; display: inline-flex; gap: 4px;
  border: 1px solid var(--line); border-radius: 999px; padding: 3px;
  background: rgba(20,30,40,.5); }
.lang-bar .toggle a{
  display: inline-block; padding: 5px 12px;
  border-radius: 999px; color: var(--mut);
  text-decoration: none; font-weight: 600; letter-spacing: .1em;
}
.lang-bar .toggle a.is-active{
  background: var(--neon); color: #03130B; box-shadow: 0 0 14px rgba(61,245,155,.4);
}

/* ——— Базовая обёртка для не-neon секций (тот же mobile-first контейнер) ——— */
.nsec{
  position: relative;
  width: 100%; max-width: 430px; margin: 0 auto;
  padding: 56px 22px;
  background: var(--bg);
  color: var(--white);
  isolation: isolate;
}
.nsec + .nsec{ padding-top: 0; }
.nsec .n-grid{
  position: absolute; inset: 0; z-index: -1;
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 26px 26px;
  opacity: .55;
}
.nsec .h2{
  font-family: var(--font-disp); font-weight: 800;
  letter-spacing: -.02em; line-height: .95;
  font-size: 32px; margin: 0 0 8px;
}
.nsec .h2 .h-neon{ color: var(--neon); text-shadow: var(--glow-soft); }
.nsec .sec-kicker{
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .24em; color: var(--mut);
  text-transform: uppercase; margin: 0 0 14px;
}
.nsec .sec-lede{
  color: var(--mut); font-size: 14px; line-height: 1.55;
  margin: 0 0 22px; max-width: 360px;
}

/* ——— Шаги «Как это работает» ——— */
.steps{ display: flex; flex-direction: column; gap: 14px; margin-top: 8px; }
.step{
  display: flex; gap: 14px; align-items: flex-start;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 16px;
  backdrop-filter: blur(6px);
}
.step .num{
  flex: none; width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--neon);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-weight: 700; font-size: 14px;
  color: var(--neon); box-shadow: inset 0 0 12px rgba(61,245,155,.18), 0 0 14px rgba(61,245,155,.18);
}
.step h3{ margin: 0 0 4px; font-size: 16px; font-weight: 700; letter-spacing: -.01em; }
.step p{ margin: 0; color: var(--mut); font-size: 13.5px; line-height: 1.5; }

/* ——— Карточки «Что внутри / Чего не будет» ——— */
.cards{ display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 8px; }
.card{
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 16px;
  backdrop-filter: blur(6px);
  position: relative;
}
.card.dn{ border-color: rgba(255,107,90,.28); }
.card .tag{
  display: inline-block; font-family: var(--font-mono); font-size: 10px;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--neon); border: 1px solid var(--line);
  padding: 3px 8px; border-radius: 999px; margin-bottom: 10px;
}
.card.dn .tag{ color: var(--down); border-color: rgba(255,107,90,.28); }
.card h3{ margin: 0 0 6px; font-size: 16px; font-weight: 700; letter-spacing: -.01em; }
.card p{ margin: 0; color: var(--mut); font-size: 13.5px; line-height: 1.5; }
.card ul{ margin: 6px 0 0; padding: 0; list-style: none; }
.card ul li{
  position: relative; padding-left: 18px;
  color: var(--mut); font-size: 13.5px; line-height: 1.6;
}
.card ul li::before{
  content: ""; position: absolute; left: 0; top: .65em;
  width: 8px; height: 1px; background: var(--neon);
}
.card.dn ul li::before{ background: var(--down); }

/* ——— Почему бесплатно ——— */
.why-box{
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 20px;
  backdrop-filter: blur(6px); margin-top: 6px;
}
.why-box .head{
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--neon-2); margin-bottom: 10px;
}
.why-box h3{ margin: 0 0 12px; font-size: 19px; font-weight: 800; letter-spacing: -.01em; line-height: 1.2; }
.why-box p{ margin: 0 0 10px; color: var(--mut); font-size: 14px; line-height: 1.55; }
.why-box p:last-child{ margin-bottom: 0; }
.why-box .x{ color: var(--down); font-weight: 700; }
.why-box .ok{ color: var(--neon); font-weight: 700; }

/* ——— Отзывы ——— */
.reviews{ display: flex; flex-direction: column; gap: 12px; margin-top: 8px; }
.review{
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 16px;
  backdrop-filter: blur(6px);
}
.review .quote{
  margin: 0 0 12px; font-size: 14.5px; line-height: 1.55;
  color: var(--white);
}
.review .meta{
  display: flex; align-items: center; gap: 10px;
}
.review .av{
  width: 34px; height: 34px; border-radius: 50%;
  background: linear-gradient(135deg, var(--neon), var(--neon-2));
  color: #03130B; font-weight: 800; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
  flex: none;
}
.review .who{ font-size: 13px; font-weight: 700; letter-spacing: -.01em; }
.review .ctx{
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em;
  color: var(--mut); text-transform: uppercase;
}
.review .amt{
  display: inline-block; margin-top: 2px;
  font-family: var(--font-mono); font-size: 11.5px;
  color: var(--neon); letter-spacing: .04em;
}

/* ——— Пруфы выводов ——— */
.proofs{ display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.proof{
  position: relative; aspect-ratio: 3 / 4;
  border: 1px solid var(--line); border-radius: var(--r-md);
  background:
    linear-gradient(180deg, rgba(20,30,40,.6), rgba(5,8,12,.6)),
    repeating-linear-gradient(0deg, var(--grid) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(90deg, var(--grid) 0 1px, transparent 1px 26px);
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 12px; overflow: hidden;
}
.proof .head{
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--mut);
}
.proof .num{
  font-family: var(--font-disp); font-weight: 800;
  font-size: 26px; letter-spacing: -.02em; color: var(--neon);
  text-shadow: var(--glow-soft); line-height: 1;
}
.proof .tail{
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em;
  color: var(--mut);
}
.proof.cy .num{ color: var(--neon-2); text-shadow: 0 0 18px rgba(55,224,255,.45); }
.proofs-note{
  margin-top: 10px; font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: .06em; color: var(--dim); text-align: center;
}

/* ——— Брокеры ——— */
.brokers{ display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 8px; }
.broker{
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 16px;
  backdrop-filter: blur(6px);
}
.broker h3{ margin: 0 0 6px; font-size: 18px; font-weight: 800; letter-spacing: -.02em; }
.broker p{ margin: 0; color: var(--mut); font-size: 12.5px; line-height: 1.5; }
.brokers-foot{
  margin-top: 12px; font-size: 13px; color: var(--mut); line-height: 1.5;
}

/* ——— Inline-CTA внутри обычных секций (короче, чем главный .btn-neon) ——— */
.cta-inline{
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--neon); color: #03130B;
  font-weight: 800; font-size: 15px; letter-spacing: -.01em;
  text-decoration: none; padding: 13px 18px;
  border-radius: var(--r-md); box-shadow: var(--glow-strong);
  transition: transform .15s, box-shadow .15s; min-height: 48px;
}
.cta-inline:hover{ transform: translateY(-2px); box-shadow: 0 0 42px rgba(61,245,155,.6); }
.cta-inline svg{ width: 18px; height: 18px; }

/* ——— Footer ——— */
.nfoot{
  max-width: 430px; margin: 0 auto; padding: 28px 22px 36px;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em;
  color: var(--dim); line-height: 1.6; text-align: center;
}
.nfoot a{ color: var(--mut); text-decoration: none; border-bottom: 1px dashed var(--line); }
.nfoot .disc{ margin-top: 10px; color: var(--dim); }

/* ——— Hero-первый: h1 крупнее, чем h2 в других neon-блоках ——— */
.nblock.is-hero .h-display{ font-size: 56px; }

/* ——— Stats-row внутри hero ——— */
.hero-metrics{ margin: 16px 22px 0; }

/* ============================================================================
   TABLET (≥720px) — снимаем «узкую полосу 430px», даём 2-колоночные сетки.
   ============================================================================ */
@media (min-width: 720px){
  body.neon-root{
    background:
      radial-gradient(60% 40% at 50% 0%, rgba(61,245,155,.06), transparent 70%),
      var(--bg);
  }

  /* Расширяем контейнеры до 720px */
  .lang-bar-inner,
  .nsec,
  .nfoot { max-width: 720px; padding-left: 28px; padding-right: 28px; }
  .nblock{ max-width: 720px; }

  /* Внутри nblock: контент тоже выходит на 720px */
  .nblock .n-foot{ padding-left: 28px; padding-right: 28px; }
  .nblock .candles{ margin-left: 28px; margin-right: 28px; }

  /* Секции в 2 колонки */
  .nsec{ padding: 72px 28px; }
  .nsec .h2{ font-size: 42px; }
  .cards{ grid-template-columns: 1fr 1fr; gap: 14px; }
  .cards > .card.dn{ grid-column: 1 / -1; }
  .brokers{ grid-template-columns: 1fr 1fr; gap: 14px; }
  .proofs{ grid-template-columns: repeat(4, 1fr); gap: 12px; }
  .reviews{ display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  .steps{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
}

/* ============================================================================
   DESKTOP (≥1024px) — full-screen hero-блоки, широкие сетки, крупная типографика.
   nblock'и становятся 100vh-секциями с центрированным контентом 1200px.
   ============================================================================ */
@media (min-width: 1024px){
  /* Контейнеры расширяются до 1200px */
  .lang-bar-inner,
  .nfoot{ max-width: 1200px; padding-left: 40px; padding-right: 40px; }

  /* Языковой тогл крупнее */
  .lang-bar-inner{ padding-top: 12px; padding-bottom: 12px; font-size: 12px; }
  .lang-bar .toggle a{ padding: 6px 14px; font-size: 11px; }

  /* ── nblock: full-width hero, высота по контенту с верхним/нижним запасом ── */
  .nblock{
    max-width: none; width: 100%;
    min-height: auto;
    padding: 0 40px 60px;
  }
  /* Шапка и нижний блок ограничены 1200px и центрированы */
  .nblock .n-head{
    max-width: 1200px; margin: 0 auto;
    padding: 28px 0;
  }
  .nblock .n-foot{
    max-width: 1200px;
    left: 50%; transform: translateX(-50%);
    padding: 0 40px 56px;
  }
  /* Внутри n-foot всё центрировано вертикально с большим запасом */
  .nblock .n-foot .lede{ font-size: 16px; line-height: 1.6; }

  /* CTA на десктопе крупнее, но не растягивается */
  .btn-neon{
    font-size: 20px; padding: 22px 28px;
    min-height: 64px; max-width: 460px;
    margin-left: auto; margin-right: auto;
  }
  .btn-neon small{ font-size: 12px; }

  /* ── HERO «КАНДЛЫ» ── */
  .nblock.candles-block .crown{
    max-width: 1200px; margin: 16px auto 0;
    padding: 0 40px; justify-content: center;
  }
  .nblock.candles-block .crown .num{ font-size: 88px; }
  .nblock.candles-block .crown .lbl{ font-size: 12px; letter-spacing: .2em; }
  /* Высоту контейнера оставляем близкой к исходной (свечи .candle используют
     inline height в px, рассчитанный под ~330px) */
  .nblock.candles-block .candles{
    max-width: 720px; margin: 36px auto 0;
    height: 360px; padding: 0;
  }
  .nblock.candles-block .n-foot{
    position: relative; transform: none; left: auto;
    text-align: center; margin-top: 40px; padding: 0 40px;
  }
  .nblock.candles-block .n-foot .h-display{ font-size: 88px; text-align: center; line-height: 1; }
  .nblock.candles-block .n-foot .lede{
    margin: 18px auto 24px; max-width: 600px; text-align: center;
  }

  /* ── BLOCK «ПУЛЬС» ── */
  .nblock.pulse .pulse-wrap{
    max-width: 880px; margin: 36px auto 0;
    padding: 0 40px;
  }
  .nblock.pulse .pulse-wrap svg{ height: 320px; }
  .pulse-foot .h-display{ font-size: 96px; text-align: center; line-height: 1; }
  .nblock.pulse .n-foot{
    position: relative; transform: none; left: auto;
    text-align: center; margin-top: 40px; padding: 0 40px;
  }
  .nblock.pulse .n-foot .lede{
    max-width: 600px; margin: 18px auto 24px; text-align: center;
  }

  /* ── BLOCK «ПРИЦЕЛ / HUD» — радар по центру ── */
  .nblock.reticle{ align-items: center; }
  .nblock.reticle .radar{
    width: 460px; height: 460px; margin: 30px auto;
  }
  .nblock.reticle .radar .ring.r1{ width: 420px; height: 420px; }
  .nblock.reticle .radar .ring.r2{ width: 300px; height: 300px; }
  .nblock.reticle .radar .ring.r3{ width: 180px; height: 180px; }
  .nblock.reticle .radar .ring.r4{ width: 80px; height: 80px; }
  .nblock.reticle .radar .sweep{ width: 420px; height: 420px; }
  .nblock.reticle .radar .cross-h{ width: 440px; }
  .nblock.reticle .radar .cross-v{ height: 440px; }
  .nblock.reticle .radar .blip span{ font-size: 10.5px; }
  .nblock.reticle .n-foot{
    position: relative; transform: none; left: auto;
    text-align: center; margin-top: 30px; padding: 0 40px;
    width: 100%;
  }
  .reticle-foot .h-display{ font-size: 72px; line-height: 1; }
  .nblock.reticle .n-foot .lede{
    max-width: 600px; margin: 18px auto 24px; text-align: center;
  }

  /* ── BLOCK «ГЛУБИНА» — широкий горизонт ── */
  .nblock.depth{
    display: flex; flex-direction: column;
    justify-content: space-between;
  }
  .nblock.depth .sky{ width: 100%; max-width: none; height: 160px; }
  .nblock.depth .depth-top{
    position: relative; top: auto; left: auto; right: auto;
    max-width: 1200px; margin: 60px auto 0;
    padding: 0 40px;
  }
  .depth-top .h-display{ font-size: 110px; line-height: 1; }
  .nblock.depth .n-foot{
    position: relative; transform: none;
    text-align: center; padding: 0 40px 60px;
    max-width: 900px; margin: 60px auto 0;
  }
  .nblock.depth .metrics{ gap: 14px; max-width: 720px; margin-left: auto; margin-right: auto; }
  .nblock.depth .metric{ padding: 18px 16px; }
  .nblock.depth .metric .k{ font-size: 11px; }
  .nblock.depth .metric .v{ font-size: 32px; }

  /* ── Промежуточные текстовые секции ── */
  .nsec{ max-width: 1200px; margin: 0 auto; padding: 110px 40px; }
  .nsec .sec-kicker{ font-size: 12px; }
  .nsec .h2{ font-size: 60px; max-width: 900px; }
  .nsec .sec-lede{ font-size: 17px; max-width: 720px; line-height: 1.6; }

  /* Шаги «Как это работает» — 3 в ряд, крупнее */
  .steps{ grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .step{ padding: 24px; }
  .step .num{ width: 44px; height: 44px; font-size: 16px; }
  .step h3{ font-size: 19px; margin-bottom: 8px; }
  .step p{ font-size: 14.5px; }

  /* Карточки «Что внутри» — 4 в ряд + аnti-card на всю ширину */
  .cards{ grid-template-columns: repeat(4, 1fr); gap: 18px; }
  .cards > .card.dn{ grid-column: 1 / -1; padding: 28px; }
  .card{ padding: 22px; }
  .card h3{ font-size: 18px; }
  .card p, .card ul li{ font-size: 14.5px; }
  .card.dn ul{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px 24px; }

  /* Why-box — увеличенная панель, контент по центру с большим отступом */
  .why-box{
    max-width: 880px; padding: 48px;
    margin: 0 auto;
  }
  .why-box .head{ font-size: 12px; margin-bottom: 14px; }
  .why-box h3{ font-size: 28px; line-height: 1.2; margin-bottom: 18px; }
  .why-box > p{ font-size: 16px; line-height: 1.65; }

  /* Отзывы — 3 в ряд */
  .reviews{ grid-template-columns: repeat(3, 1fr); gap: 18px; }
  .review{ padding: 22px; }
  .review .quote{ font-size: 15.5px; }

  /* Пруфы — 4 в ряд, крупнее */
  .proofs{ grid-template-columns: repeat(4, 1fr); gap: 16px; }
  .proof{ padding: 18px; aspect-ratio: 3 / 4; }
  .proof .num{ font-size: 38px; }
  .proof .head, .proof .tail{ font-size: 11px; }

  /* Брокеры */
  .brokers{ grid-template-columns: 1fr 1fr; gap: 18px; max-width: 900px; }
  .broker{ padding: 24px; }
  .broker h3{ font-size: 22px; }
  .broker p{ font-size: 14px; }

  /* Footer */
  .nfoot{ padding: 36px 40px 56px; font-size: 12.5px; }
}

/* ============================================================================
   WIDE (≥1440px) — апскейл крупных заголовков для очень широких экранов.
   ============================================================================ */
@media (min-width: 1440px){
  .nblock.candles-block .n-foot .h-display{ font-size: 108px; }
  .pulse-foot .h-display{ font-size: 116px; }
  .depth-top .h-display{ font-size: 132px; }
  .reticle-foot .h-display{ font-size: 86px; }
  .nsec .h2{ font-size: 64px; }
  .nblock.pulse .pulse-wrap svg{ height: 360px; }
  .nblock.reticle .radar{ width: 520px; height: 520px; }
  .nblock.reticle .radar .ring.r1{ width: 480px; height: 480px; }
  .nblock.reticle .radar .ring.r2{ width: 340px; height: 340px; }
  .nblock.reticle .radar .ring.r3{ width: 200px; height: 200px; }
  .nblock.reticle .radar .ring.r4{ width: 90px; height: 90px; }
  .nblock.reticle .radar .sweep{ width: 480px; height: 480px; }
  .nblock.reticle .radar .cross-h{ width: 500px; }
  .nblock.reticle .radar .cross-v{ height: 500px; }
}

/* ——— Уважение к настройкам уменьшения движения ——— */
@media (prefers-reduced-motion: reduce){
  .cta-inline{ transition: none; }
}