/* ==========================================================================
   Saved for our clients (/savings/), 02.11.2026 — по образцу /trust/ (css/tools-trust.css).
   Цвета — --site-* (css/site-tokens.css), тема Light/Dark; один синий акцент, кромка 3px, без теней.
   Полный экран: .sv-stage:fullscreen (Fullscreen API) или body.sv-tv (?tv=1 / браузеры ТВ без API).
   ========================================================================== */
.sv-page{ background:var(--site-bg,#fff); color:var(--site-text,#3a4366); }
.sv-page main{ font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif; }
.sv-page h1, .sv-page h2{ background:none; -webkit-text-fill-color:currentColor; }

.sv-hero{ padding:24px 0 48px; }
.sv-hero .hv2-container{ display:flex; flex-direction:column; align-items:center; }

/* ---------- Сцена со счётчиком ---------- */
.sv-stage{ position:relative; width:100%; max-width:1400px; min-height:calc(100vh - 140px); padding:56px 24px; text-align:center;
  background:var(--site-bg-soft,#f6f8fc); border-top:3px solid var(--site-accent,#2d4bdb); border-radius:0 0 12px 12px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; }

.sv-tools{ position:absolute; top:12px; right:12px; display:flex; gap:6px; }
.sv-btn{ display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; padding:0; border-radius:10px;
  border:1px solid var(--site-line,#e2e6f2); background:var(--site-surface,#fff); color:var(--site-link,#2d4bdb); font-size:1.05rem; cursor:pointer; }
.sv-btn:hover{ border-color:var(--site-accent,#2d4bdb); }
.sv-btn:focus-visible{ outline:2px solid var(--site-accent,#2d4bdb); outline-offset:2px; }

.sv-label{ display:inline-flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:6px 10px; padding:6px 16px;
  border-radius:999px; background:var(--site-accent-soft,#eef1ff); color:var(--site-link,#2d4bdb); font-size:.8125rem; font-weight:600; }
.sv-sep{ opacity:.5; }
.sv-live{ display:inline-flex; align-items:center; gap:6px; }
.sv-dot{ width:8px; height:8px; border-radius:50%; background:var(--site-accent,#2d4bdb); animation:sv-pulse 1.6s ease-in-out infinite; }
@keyframes sv-pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.25; } }
@media (prefers-reduced-motion:reduce){ .sv-dot{ animation:none; } }

.sv-title{ margin:0 0 .3em; font-size:clamp(22px,3.6vw,60px); font-weight:900; line-height:1; text-transform:uppercase; letter-spacing:.02em; color:var(--site-accent,#2d4bdb); }

/* Число: ширина «$25,056,767.25» ≈ 8 em — размер от ширины экрана, чтобы не вылезало */
.sv-counter{ margin:0; font-size:clamp(44px,10.5vw,170px); font-weight:900; line-height:1.05; letter-spacing:-.03em;
  color:var(--site-ink,#0b1020); font-variant-numeric:tabular-nums; white-space:nowrap; }
.sv-cur{ color:var(--site-accent,#2d4bdb); margin-inline-end:.04em; }
.sv-cents{ font-size:.38em; font-weight:700; color:var(--site-muted,#5c6690); letter-spacing:0; }

.sv-facts{ display:flex; flex-wrap:wrap; justify-content:center; gap:4px 12px; font-size:clamp(14px,1.6vw,20px); color:var(--site-muted,#5c6690); }
.sv-facts strong{ color:var(--site-ink,#0b1020); font-weight:700; font-variant-numeric:tabular-nums; }

.sv-logo{ display:none; }
.sv-nodata{ margin:12px 0 0; color:var(--site-muted,#5c6690); }

/* ---------- Как считаем ---------- */
.sv-note{ max-width:760px; margin-top:24px; text-align:center; font-size:.875rem; line-height:1.6; color:var(--site-muted,#5c6690); }
.sv-note-t{ margin:0 0 6px; font-size:.9375rem; font-weight:700; color:var(--site-ink,#0b1020); }
.sv-note-t i{ color:var(--site-link,#2d4bdb); }
.sv-note p{ margin:0; }
.sv-rate{ margin-top:6px !important; opacity:.85; }

/* ---------- Полный экран ---------- */
.sv-stage:fullscreen{ max-width:none; padding:4vh 2vw; border-radius:0; background:var(--site-bg,#fff); }
.sv-stage:-webkit-full-screen{ max-width:none; width:100%; height:100%; padding:4vh 2vw; border-radius:0; background:var(--site-bg,#fff); }
body.sv-tv{ overflow:hidden; }
body.sv-tv .hv2-header, body.sv-tv footer, body.sv-tv .sv-note{ display:none !important; }
body.sv-tv .sv-hero{ padding:0; }
body.sv-tv .sv-stage{ position:fixed; top:0; right:0; bottom:0; left:0; z-index:2000; max-width:none; padding:4vh 2vw; border-radius:0; background:var(--site-bg,#fff); }

.sv-stage:fullscreen .sv-label, body.sv-tv .sv-label{ font-size:clamp(14px,1.6vw,26px); padding:.4em 1.1em; }
.sv-stage:fullscreen .sv-title, body.sv-tv .sv-title{ margin:0 0 2vh; font-size:min(4.6vw,9vh); }
.sv-stage:fullscreen .sv-counter, body.sv-tv .sv-counter{ font-size:min(14vw,45vh); margin:0; line-height:1; }
.sv-stage:fullscreen .sv-facts, body.sv-tv .sv-facts{ font-size:min(2.2vw,4vh); }
.sv-stage:fullscreen .sv-logo, body.sv-tv .sv-logo{ display:block; position:absolute; bottom:4vh; left:50%; transform:translateX(-50%); width:auto; height:min(5vh,48px); }
.sv-stage:fullscreen .sv-tools, body.sv-tv .sv-tools{ opacity:.25; transition:opacity .2s; }
.sv-stage:fullscreen .sv-tools:hover, body.sv-tv .sv-tools:hover,
.sv-stage:fullscreen .sv-tools:focus-within, body.sv-tv .sv-tools:focus-within{ opacity:1; }

@media (max-width:767.98px){
  .sv-hero{ padding-top:24px; }
  .sv-stage{ padding:56px 12px 28px; }
}

/* Размер числа подгоняет скрипт страницы: ~94% ширины сцены, не выше ~62% её высоты (fit() в savings/index.php). */
.sv-counter{ letter-spacing:-.035em; }
/* Центы не показываем: на экране 16:9 они съедали ширину и число получалось мельче (решение владельца 02.11.2026). */
.sv-cents{ display:none; }

/* ---------- Две половины: CLIENTS SAVED / CLIENTS EARNED (02.11.2026) ---------- */
.sv-stage{ justify-content:space-evenly; }
.sv-half{ width:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:2vh 0; }
.sv-half + .sv-half{ border-top:1px solid var(--site-line,#e2e6f2); }
.sv-page .sv-title{ margin:0 0 .15em; font-size:clamp(28px,6vw,96px); font-weight:900; line-height:1; letter-spacing:.01em; }
.sv-stage:fullscreen .sv-title, body.sv-tv .sv-title{ margin:0 0 1vh; font-size:min(8vw,11vh); }
.sv-stage:fullscreen .sv-half, body.sv-tv .sv-half{ flex:1 1 0; }

/* ---------- Жёлто-оранжевая сцена, синий текст, линия со значком USDT (02.11.2026, просьба владельца) ----------
   Сцена одинакова в светлой и тёмной теме: это экран стенда, а не часть интерфейса. */
.sv-page .sv-stage{ --sv-bg:#ffb000; --sv-blue:#1736d6; --sv-blue-deep:#0f24a3;
  background:var(--sv-bg); border-top:0; border-radius:16px; }
.sv-page .sv-stage:fullscreen, body.sv-tv .sv-stage{ border-radius:0; background:var(--sv-bg); }
.sv-page .sv-stage:-webkit-full-screen{ border-radius:0; background:var(--sv-bg); }
.sv-page .sv-title{ color:var(--sv-blue); font-size:clamp(34px,7.5vw,120px); }
.sv-page .sv-counter{ color:var(--sv-blue-deep); }
.sv-page .sv-cur{ color:var(--sv-blue); }
.sv-half + .sv-half{ border-top:0; }
.sv-stage:fullscreen .sv-title, body.sv-tv .sv-title{ font-size:min(9.5vw,14vh); margin:0 0 .5vh; }

.sv-divider{ position:relative; width:100%; height:clamp(48px,7vh,84px); display:flex; align-items:center; justify-content:center; flex:0 0 auto; }
.sv-divider::before{ content:""; position:absolute; left:0; right:0; top:50%; height:clamp(4px,.6vh,8px); transform:translateY(-50%);
  background:var(--sv-blue); border-radius:4px; }
.sv-divider-badge{ position:relative; display:flex; align-items:center; justify-content:center; width:clamp(48px,7vh,84px); height:clamp(48px,7vh,84px);
  border-radius:50%; background:#fff; border:clamp(4px,.6vh,8px) solid var(--sv-blue); }
.sv-divider-badge img{ width:62%; height:auto; }

.sv-page .sv-btn{ background:rgba(255,255,255,.6); border-color:transparent; color:var(--sv-blue); }

.sv-page .sv-title{ white-space:nowrap; }
.sv-half{ padding:1vh 0; }
.sv-divider{ height:clamp(64px,10vh,112px); }
.sv-divider-badge{ width:clamp(64px,10vh,112px); height:clamp(64px,10vh,112px); }
.sv-divider::before{ height:clamp(6px,1vh,12px); }
.sv-divider-badge{ border-width:clamp(6px,1vh,12px); }

/* Центы снова видны (02.11.2026): на них держится динамика, как на /trust/ */
.sv-page .sv-cents{ display:inline; font-size:.42em; color:var(--sv-blue); letter-spacing:0; }

/* Надписи — во всю ширину, наравне с числами (02.11.2026: «цифры большие, а текст маленький»).
   Стартовый размер с запасом; итог подгоняет fit() в savings/index.php по ширине сцены. */
.sv-page .sv-title{ font-size:clamp(34px,12vw,220px); line-height:.95; }
.sv-stage:fullscreen .sv-title, body.sv-tv .sv-title{ font-size:min(14vw,22vh); margin:0 0 .5vh; }
/* Знак $ и центы — тем же цветом, что цифры (02.11.2026: «у знака другой тон») */
.sv-page .sv-cur, .sv-page .sv-cents{ color:var(--sv-blue-deep); }
/* Знак $ — чёрный (02.11.2026, решение владельца) */
.sv-page .sv-cur{ color:#000; }
/* Цифры, знак $ и центы — чёрные; надписи остаются синими (02.11.2026, решение владельца) */
.sv-page .sv-counter, .sv-page .sv-cur, .sv-page .sv-cents{ color:#000; }