/* =========================================================================
   LuxAccs — RU homepage dark theme (concepts 5/6/7).
   Loaded ONLY by templates/home_ru.html.j2, scoped under body.ru-dark, so the
   other 7 languages / all other pages keep the original light styles.css.
   Font: Inter is inherited from styles.css — intentionally NOT overridden.
   ========================================================================= */
body.ru-dark{
  --teal:#12B5C9; --teal-d:#0B8F9E; --indigo:#5B2A9D; --indigo-d:#3A1D6E;
  --mag:#C724B1; --mag-b:#E0219E;
  --d-bg:#080410; --d-bg2:#0F0820; --panel:#130B22; --panel2:#181029; --panel-hi:#1e1433;
  --d-ink:#EDE7F2; --dim:#9385ac; --dim2:#6f6188;
  --brd:rgba(255,255,255,.11); --brd-hi:rgba(255,255,255,.18);
  --pos:#3ce6b0; --neg:#E0219E; --rr:18px; --ee:cubic-bezier(.22,1,.36,1);
  background:var(--d-bg); color:var(--d-ink);
}
body.ru-dark .page{position:relative;z-index:1}
.ru-dark .grad,.ru-dark .g-text{background:linear-gradient(115deg,var(--teal),var(--indigo) 55%,var(--mag-b));-webkit-background-clip:text;background-clip:text;color:transparent}
.ru-dark .lead{color:var(--dim)}
.ru-dark h1,.ru-dark h2,.ru-dark h3{color:var(--d-ink)}

/* ---- fluid canvas background (concept 7) ---- */
.ru-fluid{position:fixed;inset:0;z-index:-2;pointer-events:none}
.ru-grain{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='130' height='130'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---- eyebrow / section label ---- */
.ru-dark .lbl{background:rgba(255,255,255,.05);border:1px solid var(--brd);color:var(--teal);
  font-weight:700;letter-spacing:.16em;text-transform:uppercase;font-size:12.5px}

/* ---- buttons ---- */
.ru-dark .btn-primary{background:linear-gradient(120deg,var(--teal),var(--indigo),var(--mag));box-shadow:0 12px 32px -10px rgba(199,36,177,.5)}
.ru-dark .btn-primary:hover{box-shadow:0 20px 46px -12px rgba(199,36,177,.6)}
.ru-dark .btn-dark,.ru-dark .btn-ghost{background:rgba(255,255,255,.05);border:1px solid var(--brd);color:var(--d-ink)}
.ru-dark .btn-dark:hover,.ru-dark .btn-ghost:hover{background:rgba(255,255,255,.1)}

/* ---- nav (dark glass) ---- */
.ru-dark nav{background:rgba(8,4,16,.6);backdrop-filter:blur(18px);border:1px solid var(--brd);box-shadow:0 10px 40px -16px rgba(0,0,0,.7)}
.ru-dark .logo,.ru-dark .nav-links a{color:var(--d-ink)}
.ru-dark .nav-links a{color:var(--dim)}
.ru-dark .nav-links a:hover{color:var(--teal)}
.ru-dark .lang-current,.ru-dark .services-current{color:var(--d-ink)}
.ru-dark .lang-current{background:rgba(255,255,255,.06)}
.ru-dark .lang-menu,.ru-dark .services-dropdown{background:#130B22;border-color:var(--brd);box-shadow:0 20px 50px -18px rgba(0,0,0,.7)}
.ru-dark .lang-menu a,.ru-dark .services-dropdown a{color:var(--dim)}
.ru-dark .lang-menu a:hover,.ru-dark .services-dropdown a:hover{background:rgba(255,255,255,.06);color:var(--d-ink)}
.ru-dark .lang-menu a.active{color:var(--teal);background:rgba(18,181,201,.1)}
/* mobile burger + drawer — dark theme (RU home only) */
@media(max-width:880px){
  .ru-dark .nav-burger{background:rgba(255,255,255,.06)}
  .ru-dark .nav-burger span{background:var(--d-ink)}
  .ru-dark .nav-collapse{background:rgba(16,8,32,.98);border-color:var(--brd);box-shadow:0 24px 56px -20px rgba(0,0,0,.7)}
  .ru-dark .nav-collapse .nav-links>a:hover{background:rgba(255,255,255,.06);color:var(--d-ink)}
  .ru-dark .nav-collapse .nav-actions{border-top-color:var(--brd)}
}

/* =====================================================================
   HERO — cinematic (concept 6): giant word + core + live account card
   ===================================================================== */
.ru-hero{position:relative;padding:0}/* override bare header{padding:180px...} from styles.css */
.ru-hero-pin{position:relative;min-height:100vh;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;text-align:center;padding:clamp(112px,15vh,150px) 0 clamp(96px,13vh,124px)}
.ru-hero-bg{position:absolute;inset:0;z-index:0;pointer-events:none}
.ru-hero-bg i{position:absolute;border-radius:50%;filter:blur(80px);opacity:.42;will-change:transform}
.ru-hero-bg .hb1{width:44vw;height:44vw;background:var(--teal-d);left:-6vw;top:-6vh}
.ru-hero-bg .hb2{width:40vw;height:40vw;background:var(--mag);right:-6vw;top:8vh}
.ru-hero-bg .hb3{width:38vw;height:38vw;background:var(--indigo);left:30vw;bottom:-18vh}
.ru-hero-giant{position:absolute;left:50%;top:58%;transform:translate(-50%,-50%);z-index:2;
  font-weight:900;font-size:min(25vw,20rem);line-height:.8;letter-spacing:-.05em;color:transparent;
  -webkit-text-stroke:1.5px rgba(237,231,242,.28);white-space:nowrap;pointer-events:none;user-select:none;will-change:transform,opacity}
.ru-hero-core{position:relative;z-index:4;text-align:center;width:100%;max-width:1180px;padding:0 26px;
  flex:1;display:flex;flex-direction:column;justify-content:space-between;will-change:transform,opacity}
.ru-hero-top,.ru-hero-bottom{width:100%}
.ru-hero-core .ru-pill{display:inline-flex;align-items:center;gap:9px;font-size:.86rem;font-weight:600;
  padding:9px 18px;border:1px solid var(--brd);border-radius:40px;color:var(--d-ink);background:rgba(255,255,255,.06);backdrop-filter:blur(10px);margin-bottom:24px}
.ru-hero-core .ru-pill::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--teal);box-shadow:0 0 9px var(--teal);animation:ruBlink 1.6s infinite}
.ru-hero-core h1{font-size:clamp(2.6rem,6.6vw,5.6rem);font-weight:900;letter-spacing:-.03em;line-height:1;margin-bottom:22px}
.ru-hero-core h1 .hl{white-space:nowrap}
.ru-hero-sub{color:var(--dim);font-size:clamp(1.05rem,1.6vw,1.3rem);max-width:none;margin:0 auto 20px;line-height:1.55}
.ru-hero-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.ru-scroll-hint{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:5;font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:var(--dim);display:flex;flex-direction:column;align-items:center;gap:8px}
.ru-scroll-hint .m{width:22px;height:36px;border:1.5px solid var(--dim);border-radius:14px;position:relative}
.ru-scroll-hint .m::after{content:"";position:absolute;left:50%;top:7px;width:4px;height:7px;border-radius:3px;background:var(--dim);transform:translateX(-50%);animation:ruWheel 1.6s infinite}
@keyframes ruWheel{0%{opacity:0;top:7px}40%{opacity:1}80%{opacity:0;top:16px}100%{opacity:0}}
.ru-strip{border-block:1px solid var(--brd);overflow:hidden;padding:15px 0}
.ru-strip-track{display:flex;align-items:center;width:max-content;animation:ruSlide 45s linear infinite;font-size:1.25rem;font-weight:600;color:var(--dim);white-space:nowrap;will-change:transform}
.ru-strip-track span{flex:none}
.ru-strip-track b{flex:none;color:var(--mag-b);margin:0 clamp(22px,3vw,40px)}
@keyframes ruSlide{to{transform:translateX(calc(-100% / 6 * 3))}}
@keyframes ruBlink{50%{opacity:.35}}
/* Mobile: keep the two-line H1 ("Агентские аккаунты" / "с высоким трастом"),
   shrunk so each phrase stays on one line within the header width; and shrink
   the giant "ТРАСТ" so its outline fits inside the header width (was overflowing
   the frame at min(38vw,18rem)). Desktop (>860px) is untouched. */
@media(max-width:860px){.ru-hero-core h1{font-size:clamp(1.5rem,8vw,3.4rem)}}
@media(max-width:860px){.ru-hero-giant{font-size:min(28vw,16rem);top:50%}}

/* =====================================================================
   STATS — data-rich bento (concept 5)
   ===================================================================== */
.ru-bento{display:grid;grid-template-columns:repeat(12,1fr);gap:14px;grid-auto-rows:minmax(96px,auto);margin-top:38px}
.rcard{background:linear-gradient(160deg,var(--panel2),var(--panel));border:1px solid var(--brd);border-radius:var(--rr);position:relative;overflow:hidden}
.rcard::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent)}
.g3{grid-column:span 3}.g6{grid-column:span 6}.grow2{grid-row:span 2}
.rpad{padding:20px}
.kpi{display:flex;flex-direction:column;justify-content:space-between}
.kpi .top{display:flex;justify-content:space-between;align-items:flex-start;color:var(--dim);font-size:.82rem}
.kpi .val{font-weight:800;font-size:clamp(1.7rem,3vw,2.4rem);letter-spacing:-.5px;margin-top:8px;line-height:1}
.kpi .delta{font-size:.78rem;margin-top:6px}
.kpi .delta.pos{color:var(--pos)}
.kpi .delta.dim{color:var(--dim)}
.ru-spark{width:100%;height:34px;display:block;margin-top:12px}
.cta-mini{display:flex;flex-direction:column;justify-content:center;gap:10px;background:linear-gradient(150deg,rgba(18,181,201,.16),rgba(199,36,177,.12))}
.cta-mini h3{font-size:1.15rem}
.cta-mini p{color:var(--dim);font-size:.83rem}
.gauge-wrap{display:flex;align-items:center;gap:18px;margin-top:16px}
.gauge{width:96px;height:96px;flex:none;position:relative}
.gauge svg{transform:rotate(-90deg)}
.gauge .track{stroke:rgba(255,255,255,.08)}
.gauge .fill{stroke:url(#ruGauge);stroke-linecap:round;transition:stroke-dashoffset 1.3s var(--ee)}
.gauge .num{position:absolute;inset:0;display:grid;place-items:center;font-weight:800;font-size:1.4rem}
.gauge-info h3{font-size:1.05rem}
.gauge-info p{color:var(--dim);font-size:.82rem}
.ru-ticker{margin-top:14px;background:linear-gradient(160deg,var(--panel2),var(--panel));border:1px solid var(--brd);border-radius:var(--rr);position:relative;overflow:hidden}
.ru-ticker::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent)}
.ru-ticker .ti{display:flex;align-items:center;gap:14px;padding:9px 20px}
.ru-ticker .tl{font-size:.72rem;letter-spacing:.1em;color:var(--teal);flex:none;padding-right:14px;border-right:1px solid var(--brd);font-weight:700;position:relative;z-index:2}
.ru-ticker .tt-mask{flex:1;min-width:0;overflow:hidden}
.ru-ticker .tt{display:inline-block;font-size:.84rem;color:var(--dim);animation:ruTick 32s linear infinite;white-space:nowrap;will-change:transform}
.ru-ticker .tt b{color:var(--d-ink)}
.ru-ticker .tt .up{color:var(--pos)}
@keyframes ruTick{to{transform:translateX(-50%)}}
@media(max-width:1000px){.g3{grid-column:span 6}}
@media(max-width:620px){.ru-bento>*{grid-column:span 12!important}.grow2{grid-row:auto}}

/* =====================================================================
   EDITORIAL — "Не доступ, а стабильность" (concept 7)
   ===================================================================== */
.ru-ed{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(30px,6vw,80px);align-items:start;margin-top:20px}
.ru-ed-sticky{position:sticky;top:110px}
.ru-ed-sticky h2{font-size:clamp(2rem,4vw,3.1rem);margin:14px 0 16px;line-height:1.05}
.ru-ed-sticky .ru-ed-lead{color:var(--dim);font-size:1.15rem;line-height:1.6;max-width:40ch}
.ru-ed-item{padding:36px 0;border-top:1px solid var(--brd)}
.ru-ed-item:first-child{border-top:none}
.ru-ed-item .n{font-weight:800;font-size:1.2rem;color:var(--mag-b);font-variant-numeric:tabular-nums;letter-spacing:.02em}
.ru-ed-item h3{font-size:clamp(1.35rem,2.4vw,1.9rem);margin:8px 0 12px}
.ru-ed-item p{color:var(--dim);font-size:1.02rem;line-height:1.6;max-width:50ch}
@media(max-width:820px){.ru-ed{grid-template-columns:1fr;gap:20px}.ru-ed-sticky{position:static}}

/* =====================================================================
   SOURCES — data table (concept 5)
   ===================================================================== */
.ru-tbl{border:1px solid var(--brd);border-radius:var(--rr);overflow:hidden;margin-top:34px}
.ru-tr,.ru-th{display:grid;grid-template-columns:1.45fr 1fr .72fr .8fr 1.9fr;gap:16px;padding:15px 20px;align-items:center}
.ru-th{background:var(--panel);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);font-weight:700}
.ru-tr{border-top:1px solid var(--brd);transition:.2s}
.ru-tr:hover{background:var(--panel2)}
.ru-tr .nm{display:flex;align-items:center;gap:12px;font-weight:700;color:var(--d-ink)}
.ru-tr .nm:hover{color:var(--teal)}
.ru-tr .tag{color:var(--dim);font-size:.88rem}
.ru-trust{height:6px;border-radius:6px;background:rgba(255,255,255,.08);overflow:hidden;min-width:70px}
.ru-trust i{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,var(--teal),var(--mag))}
.ru-tr .msp{width:80px;height:24px}
.ru-actions{display:flex;align-items:center;gap:10px;justify-self:end;flex-wrap:nowrap;justify-content:flex-end}
.ru-view{font-size:.78rem;font-weight:700;color:var(--dim);background:rgba(255,255,255,.04);border:1px solid var(--brd);border-radius:40px;padding:7px 13px;cursor:pointer;transition:.2s;white-space:nowrap}
.ru-view:hover{color:var(--teal);border-color:var(--brd-hi)}
.ru-go{font-size:.78rem;font-weight:700;color:#fff;background:linear-gradient(120deg,var(--teal),var(--indigo),var(--mag));border:none;border-radius:40px;padding:8px 15px;cursor:pointer;transition:.2s;white-space:nowrap;box-shadow:0 8px 22px -10px rgba(199,36,177,.5);text-decoration:none;display:inline-block}
.ru-go:hover{transform:translateY(-1px);box-shadow:0 12px 28px -10px rgba(199,36,177,.6)}
@media(max-width:760px){.ru-th{display:none}.ru-tr{grid-template-columns:1fr auto;gap:10px 12px}.ru-tr .nm{grid-column:1/-1}.ru-tr .msp{display:none}.ru-actions{grid-column:1/-1;justify-content:flex-start}}

/* =====================================================================
   STEPS — vertical timeline (concept 6)
   ===================================================================== */
/* Horizontal, full-width stepper (dots centred on the line). */
.ru-timeline{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:20px;margin:52px 0 0}
/* Line runs exactly between the first and last dot centres. With 5 equal
   columns and 4×20px gaps, each end dot centre sits (100% - 80px)/10 from the
   container edge — so the track starts/ends there (not at a naive 10%/90%). */
.ru-timeline .trk{position:absolute;top:8px;left:calc((100% - 80px) / 10);right:calc((100% - 80px) / 10);height:2px;background:rgba(255,255,255,.12);border-radius:2px}
.ru-timeline .trk i{position:absolute;left:0;top:0;height:100%;width:0;background:linear-gradient(90deg,var(--teal),var(--mag-b));border-radius:2px;will-change:width}
.ru-tl-item{position:relative;text-align:center;padding:34px 6px 0}
.ru-tl-item::before{content:"";position:absolute;top:1px;left:50%;transform:translateX(-50%);width:16px;height:16px;border-radius:50%;background:var(--d-bg);border:2px solid var(--dim);transition:.4s}
.ru-tl-item.lit::before{border-color:var(--teal);background:var(--teal);box-shadow:0 0 16px var(--teal)}
.ru-tl-item .n{font-weight:800;color:var(--teal);font-size:.9rem;font-variant-numeric:tabular-nums}
.ru-tl-item h3{font-size:1.3rem;margin:6px 0 6px}
.ru-tl-item p{color:var(--dim);font-size:.92rem;line-height:1.5}
@media(max-width:760px){
  .ru-timeline{grid-template-columns:1fr;gap:0;padding-left:40px;margin-top:44px}
  .ru-timeline .trk{top:6px;bottom:6px;left:11px;right:auto;width:2px;height:auto}
  .ru-timeline .trk i{left:0;top:0;width:100%;height:0}
  .ru-tl-item{text-align:start;padding:0 0 42px}
  .ru-tl-item:last-child{padding-bottom:6px}
  .ru-tl-item::before{left:-36px;top:4px;transform:none}
  .ru-tl-item h3{font-size:1.4rem}
}

/* =====================================================================
   Restyle of reused (unchanged-content) sections for the dark theme
   ===================================================================== */
.ru-dark .seo-lead{background:linear-gradient(160deg,var(--panel2),var(--panel));border:1px solid var(--brd);box-shadow:none;max-width:none}
.ru-dark .seo-lead-body p{color:#cfc6e0}
.ru-dark .seo-lead-badges span{background:rgba(255,255,255,.05);color:var(--d-ink)}

.ru-dark .rev{background:linear-gradient(160deg,var(--panel2),var(--panel));border:1px solid var(--brd)}
.ru-dark .rev p{color:#cfc6e0}
.ru-dark .rev-nav{background:#130B22;border:1px solid var(--brd);color:var(--d-ink)}
.ru-dark .rev-nav:hover{background:var(--teal);color:#04121a}
/* even-height cards: review text grows so the author (ФИО) + verified badge
   line up along the bottom of every card in the row */
.ru-dark .rev{display:flex;flex-direction:column}
.ru-dark .rev p{flex:1 0 auto}
.ru-dark .rev .who{margin-top:22px}
/* real customer photo fills the 42×42 avatar slot; no gradient behind it */
.ru-dark .av-photo{object-fit:cover;background:none!important;border:1px solid var(--brd)}
/* per-review "verified by LuxAccs" badge at the bottom of each card */
.ru-dark .rev-verified{display:inline-flex;align-items:center;gap:6px;margin-top:12px;
  font-size:12px;font-weight:700;color:var(--pos);opacity:.9}
.ru-dark .rev-verified svg{flex:none}

.ru-dark .faq details{background:linear-gradient(160deg,var(--panel2),var(--panel));border:1px solid var(--brd)}
.ru-dark .faq details[open]{border-color:var(--teal)}
.ru-dark .faq summary{color:var(--d-ink)}
.ru-dark .faq summary::after{color:var(--teal)}
.ru-dark .faq details p{color:var(--dim)}

.ru-dark .post{background:linear-gradient(160deg,var(--panel2),var(--panel));border:1px solid var(--brd)}
.ru-dark .post:hover{border-color:var(--mag);box-shadow:0 30px 60px -28px rgba(199,36,177,.4)}
.ru-dark .post h3{color:var(--d-ink)}
.ru-dark .post p{color:var(--dim)}
/* Dark article previews (blog section here + blog index + article pages): the
   pastel sheen_bg is darkened into our palette, category tag stays crisp, and
   Kit gets a brand outline + a visor that shimmers on scroll (--sx by JS).
   Lives here (loaded on every RU page) so the homepage blog cards match. */
.ru-dark .post .cover .sheen,
.ru-dark .article .hero .sheen{filter:brightness(.32) saturate(1.5) contrast(1.05)}
.ru-dark .post .cat,
.ru-dark .article .cat{background:rgba(8,4,16,.8);border:1px solid var(--brd);color:var(--teal);backdrop-filter:blur(4px)}
.ru-dark .post .cover .mascot-ru,
.ru-dark .article .hero .mascot-ru{
  display:block;background-image:url("logos/kit.webp");background-size:contain;background-repeat:no-repeat;background-position:center;
  width:36px;height:47px;
  filter:drop-shadow(1px 0 var(--teal)) drop-shadow(-1px 0 var(--teal)) drop-shadow(0 1px var(--mag-b)) drop-shadow(0 -1px var(--mag-b)) drop-shadow(0 6px 12px rgba(0,0,0,.55))}
.ru-dark .article .hero .mascot-ru{width:48px;height:63px}
.ru-dark .mascot-ru .mascot-glass{position:absolute;top:33%;left:14%;right:14%;height:15%;border-radius:20px;pointer-events:none;
  background:linear-gradient(100deg,transparent 16%,rgba(18,181,201,.95) 40%,rgba(224,33,158,.95) 60%,transparent 84%);
  background-size:300% 100%;background-position:var(--sx,50%) 50%;mix-blend-mode:screen;opacity:.95}

.ru-dark footer{color:var(--dim);border-top:1px solid var(--brd);margin-top:60px}
/* Feedback CTA: header-width box, and a 2-column layout (heading+lead on the
   left, form on the right) so it reads wide instead of a tall narrow column. */
.ru-dark .apply{border:1px solid var(--brd-hi);max-width:1180px;margin-left:auto;margin-right:auto;
  padding:52px clamp(28px,4vw,54px);text-align:start}
.ru-dark .apply .inner{max-width:none;display:grid;grid-template-columns:1fr 1fr;
  column-gap:clamp(30px,4vw,56px);align-items:center;text-align:start}
.ru-dark .apply .inner > h2{grid-column:1;grid-row:1;margin:0 0 14px;font-size:clamp(27px,3.2vw,40px)}
.ru-dark .apply .inner > .lead{grid-column:1;grid-row:2;margin:0;max-width:42ch}
.ru-dark .apply .inner > .form{grid-column:2;grid-row:1 / span 2;margin:0}
@media(max-width:820px){
  .ru-dark .apply{text-align:center}
  .ru-dark .apply .inner{grid-template-columns:1fr;text-align:center;row-gap:8px}
  .ru-dark .apply .inner > h2,.ru-dark .apply .inner > .lead,.ru-dark .apply .inner > .form{grid-column:1;grid-row:auto}
  .ru-dark .apply .inner > .lead{max-width:none;margin:0 auto 22px}
}

@media(prefers-reduced-motion:reduce){
  .ru-strip-track,.ru-ticker .tt,.ru-hero-core .ru-pill::before,.ru-acct h3::before{animation:none!important}
  .ru-timeline .trk i{height:100%!important;width:100%!important}
  .ru-tl-item::before{border-color:var(--teal);background:var(--teal)}
}

/* ===== RTL (Hebrew) adjustments for dark-theme-specific components ===== */
/* Most layout mirrors automatically via <html dir="rtl">; these fix physical
   left/right rules that don't flip on their own. */
html[dir="rtl"] .ru-ticker .tl{padding-right:0;padding-left:14px;border-right:0;border-left:1px solid var(--brd)}
@media(max-width:760px){
  html[dir="rtl"] .ru-timeline{padding-left:0;padding-right:40px}
  html[dir="rtl"] .ru-timeline .trk{left:auto;right:11px}
  html[dir="rtl"] .ru-tl-item::before{left:auto;right:-36px}
}