/* =========================================================================
   LuxAccs — RU DARK theme for landing / blog / article pages.
   Loaded AFTER home_ru.css, only by the *_ru.html.j2 templates, scoped under
   body.ru-dark. home_ru.css already darkens the shared components (nav, footer,
   lead form, .post cards, .faq, buttons, CSS variables); this file covers the
   page-specific components: landing .lb-*, blog hero, article prose, TOC,
   breadcrumbs — plus the shimmering dark previews. Fluid canvas + grain reuse
   home_ru.css's .ru-fluid / .ru-grain. Other 7 languages are untouched (light).
   ========================================================================= */
.ru-dark .drops{display:none}

/* ---- breadcrumbs ---- */
.ru-dark .breadcrumbs{color:var(--dim2)}
.ru-dark .breadcrumbs a,.ru-dark .breadcrumbs .sep-label{color:var(--dim)}
.ru-dark .breadcrumbs a:hover{color:var(--teal)}
.ru-dark .breadcrumbs .current{color:var(--d-ink)}

/* ---- related-block eyebrow ---- */
.ru-dark .lbl{display:inline-block;margin-bottom:14px;padding:7px 13px;border-radius:40px}

/* Dark preview covers + Kit mascot (outline & shimmering visor) now live in
   home_ru.css so they apply on every RU page (incl. the homepage blog cards). */

/* ---- blog hero ---- */
.ru-dark .pg-blog-hero .back{color:var(--dim)}
.ru-dark .pg-blog-hero .back:hover{color:var(--teal)}
.ru-dark .pg-blog-hero .sub{color:var(--dim)}
.ru-dark .author-box{background:linear-gradient(160deg,var(--panel2),var(--panel));border:1px solid var(--brd)}
.ru-dark .author-box .ab-name{color:var(--d-ink)}
.ru-dark .author-box .ab-role{color:var(--dim2)}
.ru-dark .author-box .ab-bio{color:var(--dim)}
.ru-dark .author-box .ab-link{color:var(--teal)}

/* =========================================================================
   ARTICLE — dark panel + prose + TOC
   ========================================================================= */
.ru-dark .article,.ru-dark .article-page{background:linear-gradient(160deg,var(--panel2),var(--panel));
  border:1px solid var(--brd);box-shadow:0 40px 90px -40px rgba(0,0,0,.6)}
.ru-dark .article h1{color:var(--d-ink)}
.ru-dark .article .ameta{color:var(--dim);border-bottom:1px solid var(--brd);padding-bottom:20px}
.ru-dark .article .ac p,.ru-dark .article .ac li{color:#cfc6e0}
.ru-dark .article .ac h2,.ru-dark .article .ac h3{color:var(--d-ink)}
.ru-dark .article .ac li::marker{color:var(--teal)}
.ru-dark .article .ac blockquote{border-left-color:var(--teal);background:none;color:var(--d-ink)}
.ru-dark .article .ac a{color:var(--teal)}
.ru-dark .article .ac a:hover{color:var(--mag-b)}
.ru-dark .article .ac th{background:var(--panel-hi);color:var(--d-ink)}
.ru-dark .article .ac td{color:#cfc6e0;border-top:1px solid var(--brd)}
.ru-dark .article .ac table tbody tr:hover{background:rgba(255,255,255,.03)}
.ru-dark .article .afoot{border-top:1px solid var(--brd)}
.ru-dark .article .afoot p{color:var(--dim)}
.ru-dark .toc-box{background:linear-gradient(160deg,var(--panel2),var(--panel));border:1px solid var(--brd)}
.ru-dark .toc-label{color:var(--teal)}
.ru-dark .toc-box li{border-top-color:var(--brd)}
.ru-dark .toc-box a{color:var(--dim)}
.ru-dark .toc-box a:hover{color:var(--teal)}
.ru-dark .toc-box a::before{color:var(--teal)}

/* =========================================================================
   LANDING (.lb-*) — dark
   ========================================================================= */
.ru-dark .lb-hero::before{display:none}
.ru-dark .lb-main{background:linear-gradient(160deg,var(--panel2),var(--panel));border:1px solid var(--brd)}
.ru-dark .lb-main .sub{color:var(--dim)}
.ru-dark .lb-pill{background:rgba(255,255,255,.05);border:1px solid var(--brd);color:var(--d-ink)}
.ru-dark .lb-avatars .av-txt{color:var(--dim)}
.ru-dark .lb-avatars .av-stack span{border-color:var(--panel)}
.ru-dark .lb-live-card{background:linear-gradient(160deg,var(--panel2),var(--panel));border:1px solid var(--brd)}
.ru-dark .lb-live-card .row{color:var(--dim)}
.ru-dark .lb-live-card .row b{color:var(--d-ink)}
.ru-dark .lb-lbl{color:var(--teal);background:rgba(255,255,255,.05);border:1px solid var(--brd)}

/* full-width loss calculator */
.ru-dark .lb-calc{max-width:none;background:linear-gradient(160deg,var(--panel2),var(--panel));border:1px solid var(--brd);box-shadow:none}
.ru-dark .lb-calc .cl-top h3{color:var(--d-ink)}
.ru-dark .lb-calc .cl-top span{color:var(--teal);background:rgba(255,255,255,.05);border:1px solid var(--brd)}
.ru-dark .lb-slider-row label{color:var(--dim)}
.ru-dark .lb-slider-row label b{color:var(--teal)}
.ru-dark .lb-calc input[type=range]{background:linear-gradient(90deg,var(--teal),var(--mag))}
.ru-dark .lb-calc input[type=range]::-webkit-slider-thumb{border-color:var(--mag-b)}
.ru-dark .lb-calc input[type=range]::-moz-range-thumb{border-color:var(--mag-b)}

/* benefits bento */
.ru-dark .lb-bento-grid .card{background:linear-gradient(160deg,var(--panel2),var(--panel));border:1px solid var(--brd)}
.ru-dark .lb-bento-grid .card.big{background:linear-gradient(150deg,var(--teal-d),var(--mag))}
.ru-dark .lb-bento-grid .card .ic{background:linear-gradient(150deg,rgba(18,181,201,.16),rgba(199,36,177,.14));color:var(--d-ink)}
.ru-dark .lb-bento-grid .card h4{color:var(--d-ink)}
.ru-dark .lb-bento-grid .card p{color:var(--dim)}
.ru-dark .lb-bento-grid .card.big p{color:rgba(255,255,255,.9)}

/* compare */
.ru-dark .lb-vs .bad-col{background:rgba(224,33,158,.06);border:1px solid rgba(224,33,158,.3)}
.ru-dark .lb-vs .good-col{background:linear-gradient(160deg,var(--panel2),var(--panel));border:1px solid rgba(60,230,176,.34);box-shadow:none}
.ru-dark .lb-vs h3{color:var(--d-ink)}
.ru-dark .lb-vs li{color:var(--dim)}
.ru-dark .lb-vs .x{color:var(--mag-b)}
.ru-dark .lb-vs .v{color:var(--pos)}

/* deepdive */
.ru-dark .lb-deepdive .text-col p{color:var(--dim)}
.ru-dark .lb-deepdive .tip-card{background:rgba(18,181,201,.08);border-left-color:var(--teal);color:var(--d-ink)}
.ru-dark .lb-deepdive .highlight-list{background:linear-gradient(160deg,var(--panel2),var(--panel));border:1px solid var(--brd)}
.ru-dark .lb-deepdive .highlight-list li{color:var(--dim);border-bottom-color:var(--brd)}
.ru-dark .lb-deepdive .v{color:var(--pos)}
.ru-dark .lb-vert-chips span{background:rgba(255,255,255,.05);color:var(--d-ink);border:1px solid var(--brd)}

/* sticky CTA */
.ru-dark .lb-sticky-cta{background:rgba(8,4,16,.9);backdrop-filter:blur(18px);border-top:1px solid var(--brd);box-shadow:0 -10px 40px -20px rgba(0,0,0,.7)}
.ru-dark .lb-sticky-cta .info{color:var(--d-ink)}

/* Quotes without a background band (client request): the "цитата от LuxAccs"
   pull-quote sits directly on the page, no purple stripe behind it. */
.ru-dark .lb-quote{background:none}
.ru-dark .lb-quote .mark{color:var(--mag-b);opacity:.5}
/* quote text spans the header width, and types itself out on scroll-in
   (blinking caret while .qt-typing; text is set char-by-char by pages_ru.js).
   Left-aligned so the already-typed text stays put and only the caret advances
   (centered text would re-centre and "jump" on every keystroke). */
.ru-dark .lb-quote{text-align:start}
.ru-dark .lb-quote p{max-width:none;margin-left:0;margin-right:0}
.ru-dark .lb-quote p.qt-typing::after{content:"▌";color:var(--teal);margin-left:1px;font-weight:400;animation:qtBlink .85s step-end infinite}
@keyframes qtBlink{50%{opacity:0}}

/* the already-dark landing blocks (stat card / marquee / final CTA / result)
   inherit their gradients from styles.css and read fine on dark. */

/* ---- platform showcase ("витрина") embedded in RU articles ---- */
.ru-dark .rshow{margin:64px 0 8px}
.ru-dark .rshow-head{text-align:center;max-width:60ch;margin:0 auto 30px}
.ru-dark .rshow-head .lbl{display:inline-block;margin-bottom:14px}
.ru-dark .rshow-head h2{font-size:clamp(1.5rem,3.2vw,2.2rem);letter-spacing:-.02em;margin:0 0 10px;line-height:1.1}
.ru-dark .rshow-head p{color:var(--dim);font-size:1.02rem;line-height:1.55;margin:0 auto;max-width:52ch}
/* Default (no-JS / mobile / reduced-motion): responsive grid. JS upgrades this
   into a rotating 3D turntable by adding .is-orbit (see pages_ru.js). */
.ru-dark .rshow-orbit{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:16px}
.ru-dark .rshow-orbit .rshow-ring{display:contents}
.ru-dark .rshow-orbit .rshow-floater{display:contents}
.ru-dark .rshow-hint{display:none;text-align:center;color:var(--dim2);font-size:.8rem;margin:18px 0 0}
/* ---- 3D turntable mode ---- */
.ru-dark .rshow-orbit.is-orbit{display:block;position:relative;height:400px;margin-top:6px;
  perspective:2200px;perspective-origin:50% 46%}
.ru-dark .rshow-orbit.is-orbit .rshow-ring{display:block;position:absolute;left:50%;top:50%;width:0;height:0;
  transform-style:preserve-3d;will-change:transform}
.ru-dark .rshow-orbit.is-orbit .rshow-floater{display:block;position:absolute;left:0;top:0;width:236px;
  transform-style:preserve-3d;backface-visibility:hidden;-webkit-backface-visibility:hidden;will-change:transform,opacity}
.ru-dark .rshow-orbit.is-orbit .rshow-card{height:100%;min-height:206px}
.ru-dark .rshow-orbit.is-orbit + .rshow-hint{display:block}
.ru-dark .rshow-card{display:flex;flex-direction:column;gap:12px;padding:20px;border-radius:var(--rr);
  background:linear-gradient(160deg,var(--panel2),var(--panel));border:1px solid var(--brd);position:relative;overflow:hidden;
  transition:transform .22s var(--ee),border-color .22s,box-shadow .22s}
.ru-dark .rshow-card::after{content:"";position:absolute;left:0;top:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--teal),var(--indigo) 55%,var(--mag-b));opacity:.55;transition:opacity .22s}
.ru-dark .rshow-card:hover{transform:translateY(-4px);border-color:var(--brd-hi);
  box-shadow:0 22px 44px -22px rgba(0,0,0,.75),0 0 34px -14px rgba(18,181,201,.4)}
.ru-dark .rshow-card:hover::after{opacity:1}
.ru-dark .rshow-card.feat{border-color:rgba(18,181,201,.4)}
.ru-dark .rshow-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.ru-dark .rshow-tag{font-size:.66rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#080410;
  background:linear-gradient(120deg,var(--teal),var(--mag-b));padding:4px 10px;border-radius:40px;align-self:flex-start}
.ru-dark .rshow-nm{font-weight:800;font-size:1.12rem;color:var(--d-ink);letter-spacing:-.01em}
.ru-dark .rshow-ds{color:var(--dim);font-size:.86rem;line-height:1.5;flex:1}
.ru-dark .rshow-go{margin-top:2px;display:inline-flex;align-items:center;gap:7px;font-weight:700;font-size:.86rem;
  color:var(--teal);transition:gap .22s,color .22s}
.ru-dark .rshow-go span{transition:transform .22s var(--ee)}
.ru-dark .rshow-card:hover .rshow-go{gap:11px;color:var(--d-ink)}
.ru-dark .rshow-card:hover .rshow-go span{transform:translateX(3px)}
@media(max-width:520px){.ru-dark .rshow-orbit{grid-template-columns:1fr 1fr;gap:12px}
  .ru-dark .rshow-card{padding:15px}.ru-dark .rshow-ds{display:none}}
@media(prefers-reduced-motion:reduce){.ru-dark .rshow-card,.ru-dark .rshow-go,.ru-dark .rshow-go span{transition:none}
  .ru-dark .rshow-card:hover{transform:none}}

/* ---- contextual mid-article CTA (injected by build.py inject_mid_cta_ru) ---- */
.ru-dark .inline-cta{display:flex;align-items:center;justify-content:space-between;gap:22px;flex-wrap:wrap;
  margin:38px 0;padding:22px 26px;border-radius:var(--rr);position:relative;overflow:hidden;
  background:linear-gradient(150deg,rgba(18,181,201,.12),rgba(199,36,177,.1));border:1px solid var(--brd-hi)}
.ru-dark .inline-cta::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;
  background:linear-gradient(180deg,var(--teal),var(--indigo) 55%,var(--mag-b))}
.ru-dark .inline-cta .ic-txt{display:flex;flex-direction:column;gap:5px;min-width:min(100%,260px);flex:1}
.ru-dark .inline-cta .ic-txt strong{font-size:1.12rem;font-weight:800;color:var(--d-ink);letter-spacing:-.01em}
.ru-dark .inline-cta .ic-txt span{color:var(--dim);font-size:.92rem;line-height:1.5}
.ru-dark .inline-cta .ic-btn{flex:none;white-space:nowrap}
@media(max-width:560px){.ru-dark .inline-cta{padding:20px}.ru-dark .inline-cta .ic-btn{width:100%;text-align:center}}

/* ---- answer-first "Кратко" (TL;DR) box — GEO / AI-snippet source ---- */
.ru-dark .article-tldr{margin:0 0 30px;padding:18px 22px;border-radius:14px;
  background:linear-gradient(150deg,rgba(18,181,201,.1),rgba(91,42,157,.08));
  border:1px solid var(--brd);border-left:3px solid var(--teal)}
.ru-dark .article-tldr .tldr-badge{display:inline-block;font-size:.68rem;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--teal);margin-bottom:7px}
.ru-dark .article-tldr p{margin:0;color:var(--d-ink);font-size:1.04rem;line-height:1.6;font-weight:500}

/* ---- reassurance micro-copy under CTAs (risk-reversal, closes objections) ---- */
.ru-dark .lb-reassure{display:flex;flex-wrap:wrap;gap:8px 20px;margin:16px 0 0;padding:0;
  font-size:.86rem;font-weight:600;color:var(--dim);list-style:none}
.ru-dark .lb-reassure span{white-space:nowrap;color:var(--dim)}
.ru-dark .lb-reassure-center{justify-content:center;text-align:center}

/* ===== RTL (Hebrew) adjustments for dark-theme-specific components ===== */
html[dir="rtl"] .ru-dark .article .ac blockquote{border-left:0;border-right:3px solid var(--teal);padding-left:0;padding-right:18px}
html[dir="rtl"] .ru-dark .lb-deepdive .tip-card{border-left:0;border-right:3px solid var(--teal)}
html[dir="rtl"] .ru-dark .lb-quote p.qt-typing::after{margin-left:0;margin-right:1px}