/* =========================================================
   VNIIO — Compact UI Theme (cards fixed + no glitches)
   - One-line compact brand cards
   - No layout shift on hover (facts overlay belt)
   - Lightweight effects, stable heights
   ========================================================= */

/* ===== Theme & Base ===== */
:root{
  /* Palette */
  --bg:#0b0c10;
  --panel:#0f1117;
  --panel-2:#11131a;
  --text:#e6e9ef;
  --muted:#9aa8c2;
  --line:#1a2133;

  --brand:#6b86ff;
  --brand-2:#00d4ff;
  --ok:#10d8b0;
  --warn:#f2b94b;
  --danger:#ff6b6b;

  /* Card metrics (used for overlay math) */
  --pad:14px;      /* inner padding of card */
  --gap:14px;      /* grid gap inside card */
  --logo-w:88px;   /* logo column width in compact layout */
  --cta-w:220px;   /* CTA column width in compact layout */
  --card-h:108px;  /* fixed card height (desktop) */

  /* FX */
  --shadow-sm: 0 8px 22px rgba(6,10,26,.22);
  --shadow-lg: 0 22px 46px rgba(6,10,26,.34);
  --card-border: 1px solid rgba(255,255,255,.08);
}

.logo img {
    filter: invert(1);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, "Helvetica Neue", Helvetica, sans-serif;
  color:var(--text);
  background: radial-gradient(1200px 800px at 20% -10%, #162039 0%, #0b0c10 45%) fixed;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.container{max-width:1120px;margin:0 auto;padding:0 16px}

.visually-hidden{
  position:absolute!important; clip:rect(1px,1px,1px,1px); clip-path:inset(50%);
  width:1px;height:1px;overflow:hidden;white-space:nowrap;border:0;padding:0;margin:-1px;
}

/* ===== Header (unchanged, small refinements) ===== */
.header{background:rgba(255,255,255,.02);border-bottom:1px solid var(--line);backdrop-filter: blur(6px)}
.header__grid{display:flex;align-items:center;gap:12px;padding:10px 0}
.logo img{height:36px;width:auto;filter:drop-shadow(0 4px 14px rgba(95,128,255,.25))}
#hamburger{display:none}
.btn-hamburger{
  width:34px;height:22px;border:0;border-radius:8px;cursor:pointer;
  background:
    linear-gradient(#e6e9ef 0,#e6e9ef 2px,transparent 2px,transparent 10px,#e6e9ef 10px,#e6e9ef 12px,transparent 12px,transparent 20px,#e6e9ef 20px,#e6e9ef 22px);
  opacity:.85;transition:transform .15s ease, opacity .15s ease
}
.btn-hamburger:active{transform:translateY(1px);opacity:.95}
@media (min-width: 860px){ .btn-hamburger{display:none} }

.top-menu__nav{margin-left:auto}
.top-menu__list{display:flex;gap:8px;list-style:none;margin:0;padding:0}
.top-menu__list a{
  display:block;padding:10px 12px;border-radius:12px;color:#e6e9ef;opacity:.9;
  transition:opacity .2s ease, background .2s ease, transform .15s ease
}
.top-menu__list a:hover{background:rgba(95,128,255,.12);opacity:1;transform:translateY(-1px)}
@media (max-width: 859px){
  .top-menu__nav{display:none}
  #hamburger:checked ~ .top-menu__nav{
    display:block;position:absolute;left:0;right:0;top:56px;background:var(--panel);border-bottom:1px solid var(--line)
  }
  .top-menu__list{flex-direction:column;padding:10px}
}

/* ===== Intro ===== */
.main{display:flex;flex-direction:column;gap:24px;padding:16px 0 36px}
.h1{font-size:clamp(22px,4vw,32px);line-height:1.25;margin:8px 0 4px}
.sub{color:var(--muted);margin:0 0 8px}
.dates{display:flex;gap:10px;flex-wrap:wrap}
.date-chip{
  background:rgba(95,128,255,.12);color:#e6e9ef;border:1px solid rgba(95,128,255,.25);
  border-radius:999px;padding:6px 10px;font-size:14px
}
.date-chip.acc{background:rgba(16,216,176,.12);border-color:rgba(16,216,176,.25)}

/* =========================================================
   Rating — Compact brand cards (stable height, no jitter)
   - Grid: [logo | info | CTA]
   - Facts appear as overlay belt (no reflow)
   ========================================================= */

.rating-wrap{display:flex;flex-direction:column;gap:14px}
.cards{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}

/* Card: compact defaults */
.card{
  position:relative; overflow:visible;
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01)), var(--panel-2);
  border:var(--card-border);
  border-radius:14px;
  box-shadow: 0 2px 0 rgba(255,255,255,.04) inset, var(--shadow-sm);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease;
}

/* One-line compact layout */
.card--row,
.card{ /* make compact the default; .card--row kept for compat */
  display:grid;
  grid-template-columns: var(--logo-w) 1fr var(--cta-w);
  column-gap: var(--gap);
  padding: var(--pad);
  align-items:center;
  min-height: var(--card-h);
}

/* Hover elevation (subtle, no size change) */
.card:hover{ transform:translateY(-2px); box-shadow:var(--shadow-lg) }

/* Left column: logo + place */
.card__head{display:grid;grid-template-rows:auto auto;gap:8px;align-items:center;justify-items:center}
.card__logo{
  width:var(--logo-w); height:52px; object-fit:cover; border-radius:12px;
  background:#0b0c10;border:1px solid rgba(255,255,255,.06)
}
.badge{
  min-width:32px;height:24px;padding:0 8px;border-radius:999px;
  background: linear-gradient(135deg, var(--brand), var(--brand-2)); color:#0b0c10;
  display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:12px;
  box-shadow:inset 0 -2px 0 rgba(0,0,0,.25)
}

/* Center column: title + rating + quick meta */
.card__title h3{margin:0 0 6px;font-size:18px;letter-spacing:.2px}
.stars{display:flex;align-items:center;gap:8px}
.stars__val{font-weight:800;color:#fff;font-size:14px}
.stars__bar{
  position:relative;display:block;flex:1;max-width:180px;height:8px;border-radius:999px;
  background:linear-gradient(90deg,#39405a,#2b3047);
}
.stars__bar::after{
  content:"";position:absolute;left:0;top:0;bottom:0;border-radius:inherit;
  width:var(--v,90%);background:linear-gradient(90deg,#ffd166,var(--ok))
}

/* Quick meta icons (stay visible; concise) */
.meta-quick{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:6px}
.ico-chip{
  width:36px;height:36px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;
  color:#dbe6ff;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);
  transition:transform .12s ease, background .12s ease, border-color .12s ease;
  cursor:pointer;
}
.ico-chip:hover{ transform:translateY(-1px); background:rgba(255,255,255,.06); border-color:rgba(95,128,255,.35) }
.ico-chip:focus-visible{ outline:2px solid rgba(95,128,255,.65); outline-offset:2px }
.ico-svg{ width:18px; height:18px }

/* Right column: compact CTAs in a vertical stack */
.card__cta{display:flex;gap:8px;align-items:stretch;justify-self:end}
.btn{
  --bg: linear-gradient(135deg, var(--brand), var(--brand-2));
  --b: rgba(255,255,255,.14);
  --c:#0b0c10;
  appearance:none;border:1px solid var(--b);background:var(--bg);color:var(--c);
  padding:10px 12px;border-radius:12px;cursor:pointer;text-decoration:none;font-weight:800;
  letter-spacing:.2px;text-align:center;
  transition: transform .12s ease, box-shadow .16s ease, filter .16s ease, background .22s ease;
  box-shadow: 0 8px 18px rgba(0,212,255,.16), inset 0 -2px 0 rgba(0,0,0,.25)
}
.btn:hover{ transform:translateY(-1px); filter:saturate(1.05); box-shadow:0 14px 26px rgba(95,128,255,.26), inset 0 -2px 0 rgba(0,0,0,.25) }
.btn:active{ transform:translateY(0) }
.btn--ghost{ --bg: rgba(255,255,255,.02); --c:#e6e9ef; --b: rgba(255,255,255,.12); box-shadow:none }
.btn--ghost:hover{ background:rgba(255,255,255,.06) }
.btn--light{ --bg: #0f1322; --c:#e6e9ef; --b: rgba(255,255,255,.10); box-shadow:none }

/* Bottom status strip (thin, single line) */
.card__meta{
  grid-column: 1 / -1;
  display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:6px;
  font-size:12.5px;color:var(--muted);border-top:1px dashed rgba(255,255,255,.08);padding-top:8px
}
.card__meta .added{
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:9px;padding:3px 7px;color:#c8d2ea
}

/* ===== Facts Belt Overlay (no layout shift) =====
   - Hidden overlay that appears on hover/focus
   - Uses CSS vars to avoid overlapping logo/CTA columns
   - Does not change card height
*/
.card__facts{
  position:absolute; z-index:6;
  left: calc(var(--pad) + var(--logo-w) + var(--gap));
  right: calc(var(--pad) + var(--cta-w));
  bottom: calc(var(--pad) - 2px);

  display:flex; align-items:center; gap:8px; flex-wrap:nowrap; overflow:auto;
  margin:0; padding:0; list-style:none; white-space:nowrap;

  /* Hidden by default, but space is not reserved (overlay) */
  opacity:0; visibility:hidden; transform:translateY(6px);
  transition:opacity .14s ease, transform .14s ease, visibility 0s linear .14s;
  pointer-events:none;

  -webkit-overflow-scrolling:touch;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
}
.card:hover .card__facts,
.card:focus-within .card__facts{
  opacity:1; visibility:visible; transform:translateY(0); transition-delay:0s; pointer-events:auto;
}
.card__facts li{
  display:inline-flex; align-items:center; gap:6px;
  background: rgba(255,255,255,.03);
  border:1px dashed rgba(255,255,255,.12);
  border-radius:10px; padding:6px 8px; font-size:13px; color:var(--text)
}
.card__facts li strong{color:#cfe0ff}
.card__facts li::before{
  content:""; width:6px; height:6px; border-radius:50%;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  box-shadow: 0 0 0 2px rgba(95,128,255,.12);
}

/* ===== Tooltip bubble (from JS) ===== */
.tip{
  position:fixed; z-index:60; max-width:min(360px, 85vw);
  background:linear-gradient(180deg, rgba(18,22,35,.98), rgba(13,16,26,.98));
  color:#e6e9ef; border:1px solid rgba(95,128,255,.35); border-radius:12px;
  padding:10px 12px; font-size:14px; line-height:1.45;
  box-shadow: 0 16px 36px rgba(6,10,26,.45), inset 0 1px 0 rgba(255,255,255,.04);
  opacity:0; transform:translateY(6px) scale(.98);
  transition:opacity .14s ease, transform .14s ease;
  pointer-events:none;
}
.tip.show{ opacity:1; transform:translateY(0) scale(1) }
.tip::after{
  content:""; position:absolute; width:10px; height:10px; background:inherit;
  border-left:1px solid rgba(95,128,255,.35); border-top:1px solid rgba(95,128,255,.35);
  transform: rotate(45deg);
  left: var(--after-left, 16px);
  top: var(--after-top, -6px);
  box-shadow: 0 4px 18px rgba(6,10,26,.35);
}

/* ===== Trust / Info / Content (kept concise) ===== */
.trust{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.trust__item{
  background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.08);
  border-radius:12px;padding:10px;display:flex;gap:10px;align-items:flex-start
}
.trust .ico{font-size:18px}

.infoblock{padding:6px 0}
.infocards{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.infocard{
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
  border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:12px
}
.infocard h3{margin:0 0 6px}

.content p{margin:0 0 10px}
.nice-list{padding-left:20px}
.nice-list li{margin:6px 0}

/* ===== Tables ===== */
.table-scroll{overflow:auto;-webkit-overflow-scrolling:touch;border:1px solid rgba(255,255,255,.08);border-radius:12px;background:rgba(255,255,255,.02)}
.tbl{border-collapse:separate;border-spacing:0;width:100%;min-width:680px;color:#dbe6ff}
.tbl th,.tbl td{padding:12px 14px;border-bottom:1px solid rgba(255,255,255,.08)}
.tbl thead th{position:sticky;top:0;background:rgba(95,128,255,.08);font-weight:800;border-bottom:1px solid rgba(255,255,255,.12)}
.tbl tr:last-child td{border-bottom:0}
.tbl--compact td{font-size:14px}

/* ===== FAQ ===== */
.faq{display:flex;flex-direction:column;gap:10px}
.faq-item{
  border:1px solid rgba(255,255,255,.08);border-radius:12px;background:rgba(255,255,255,.02);
  overflow:hidden;transition:box-shadow .16s ease, border-color .16s ease
}
.faq-item summary{
  padding:12px 14px;cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px;font-weight:700;color:#e6e9ef
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item .faq-body{padding:0 14px 12px 14px;border-top:1px dashed rgba(255,255,255,.08);color:#c8d2ea}
.faq-item.open{box-shadow:0 14px 26px rgba(10,12,20,.28);border-color:rgba(95,128,255,.25)}

/* ===== Expert ===== */
.expert{
  background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.08);
  border-radius:14px;padding:12px;display:flex;flex-direction:column;gap:10px
}
.expert__card{display:flex;gap:12px;align-items:center}
.expert__meta h2{margin:0 0 2px}
.expert__name{margin:0}
.expert__job{margin:0 0 4px;color:#b8c3dc}
.expert__bio{margin:0}
.expert__disclaimer{font-size:13px;color:#9fb0cf;border-top:1px dashed rgba(255,255,255,.08);padding-top:10px}

/* ===== Footer ===== */
.footer{background:linear-gradient(180deg,#0b0c10,#0a0b10);color:#c2cbe3;margin-top:auto;border-top:1px solid var(--line)}
.footer__grid{display:flex;flex-direction:column;gap:16px;padding:16px 0}
.footer__cols{display:grid;grid-template-columns:2fr 1fr 1fr;gap:14px}
.footer__col h4{margin:0 0 8px;color:#fff}
.footer__col p{margin:0;color:#b8c3dc}
.footer__list{list-style:none;margin:0;padding:0}
.footer__list li{margin:6px 0}
.footer__list a{color:#b8c3dc;transition:color .12s ease, transform .12s ease}
.footer__list a:hover{color:#fff;transform:translateX(2px)}
.footer__badges{display:flex;align-items:center;gap:12px}
.footer__disclaimer{font-size:13px;color:#94a3b8;border-top:1px solid #141824;padding-top:10px}
@media (max-width:820px){.footer__cols{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.footer__cols{grid-template-columns:1fr}}

/* ===== Scrollbars for facts (WebKit) ===== */
.card__facts::-webkit-scrollbar{height:7px}
.card__facts::-webkit-scrollbar-track{background:rgba(255,255,255,.04);border-radius:999px}
.card__facts::-webkit-scrollbar-thumb{
  background:linear-gradient(135deg, rgba(95,128,255,.55), rgba(0,212,255,.45));
  border-radius:999px
}

/* ===== Responsive — compact first ===== */
@media (max-width: 1020px){
  :root{ --cta-w:210px; --card-h:108px }
  .stars__bar{ max-width:none }
}
@media (max-width: 860px){
  :root{ --cta-w:200px; --logo-w:80px; --card-h:112px }
  .card__logo{ height:50px }
  .card__title h3{ font-size:17px }
}
@media (max-width: 760px){
  /* Switch to two-row compact stack, still tight */
  .card{
    grid-template-columns: var(--logo-w) 1fr;
    grid-auto-rows:auto;
    row-gap:10px;
    min-height:auto;
  }
  .card__cta{ grid-column:1/-1;gap:8px }
  .card__cta .btn{ flex:1; min-width:0 }
  /* Facts: on small screens show inline below title (no overlay) */
  .card__facts{
    position:static; opacity:1; visibility:visible; transform:none;
    -webkit-mask-image:none; mask-image:none; pointer-events:auto; margin-top:6px; overflow:visible; flex-wrap:wrap
  }
}
@media (max-width: 560px){
  :root{ --logo-w:72px }
  .btn{ padding:9px 10px; border-radius:11px; font-weight:800 }
  .card__facts li{ padding:6px 7px; font-size:12.5px }
}

/* ===== Motion safety ===== */
@media (prefers-reduced-motion: reduce){
  *{transition:none!important;animation:none!important;scroll-behavior:auto!important}
}

/* ===== Accessibility helpers ===== */
.card:focus-within{ outline:2px solid rgba(95,128,255,.5); outline-offset:3px }
a:focus-visible{ outline:2px solid rgba(107,134,255,.75); outline-offset:2px; border-radius:8px }

/* ===== Color scheme hint for UA ===== */
:root{ color-scheme: dark }

/* ===== Stability + Compact refinements (post color-scheme) ===== */

/* 1) Typography and truncation for compact layout */
.card__title h3{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.card__title{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:0; /* allow ellipsis in grid */
}
.btn{ white-space:nowrap; text-overflow:ellipsis; overflow:hidden }

/* 2) Image container stability + placeholder */
.card__logo{
  position:relative;
  background:
    radial-gradient(120px 60px at 50% 50%, rgba(107,134,255,.16), rgba(0,0,0,0)),
    #0b0c10;
  overflow:hidden;
  will-change: transform;
  transform: translateZ(0); /* reduce subpixel jitter in Safari */
}
.card__logo::after{
  content:"";
  position:absolute; inset:0; pointer-events:none;
  background-image: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.05), rgba(255,255,255,0));
  transform: translateX(-120%);
  opacity:.0;
  transition: transform .8s ease, opacity .3s ease;
}
.card:hover .card__logo::after{ transform: translateX(120%); opacity:.6 }

/* Broken image fallback: add [data-broken] from onerror handler if desired */
.card__logo[data-broken="1"]{
  background:
    repeating-linear-gradient(45deg, #111628 0 10px, #0d1324 10px 20px);
}
.card__logo[data-broken="1"]::before{
  content:"img"; position:absolute; inset:auto auto 6px 8px;
  font:700 10px/1 ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial;
  color:#6c7eb8; opacity:.75; letter-spacing:.6px;
}

/* 3) Compact variants via modifiers (optional) */
.card--compact{
  --logo-w:72px;
  --cta-w:196px;
  --card-h:96px;
  padding: 12px;
  column-gap: 12px;
}
.card--tight{
  --logo-w:64px;
  --cta-w:180px;
  --card-h:92px;
  padding: 10px;
  column-gap: 10px;
}
.cards.density-compact .card{ padding:12px; column-gap:12px }
.cards.density-compact .card__logo{ width:var(--logo-w); height:48px }
.cards.density-comfortable .card{ padding:16px; column-gap:16px }

/* 4) Facts belt tokens: semantic accents */
.card__facts .fact--ok{ border-color: rgba(16,216,176,.35); color:#b9ffea }
.card__facts .fact--warn{ border-color: rgba(242,185,75,.35); color:#ffe7b8 }
.card__facts .fact--slow{ border-color: rgba(255,107,107,.35); color:#ffd0d0 }

/* 5) Safer transitions (no layout jump) */
.card,
.card *{
  /* Prevent accidental font-swap jumps by avoiding transition on font-related props */
  transition-property: background-color, color, border-color, transform, box-shadow, opacity;
}
.card{ will-change: transform }

/* 6) Optional glass accent if supported */
@supports (backdrop-filter: blur(6px)){
  .btn--light{ background: rgba(14,18,34,.72); backdrop-filter: blur(6px) }
  .tip{ backdrop-filter: blur(3px) }
}

/* 7) Content-visibility for long lists (progressive rendering) */
.cards > .card{
  content-visibility: auto;
  contain-intrinsic-size: var(--card-h) calc(100%); /* hint for layout while offscreen */
}

/* 8) Star bar micro-anim only when not reduced */
@media (prefers-reduced-motion: no-preference){
  .stars__bar::after{
    transition: width .35s ease-in-out;
  }
}

/* 9) Coarse pointer/touch: keep overlay facts visible on interaction */
@media (pointer:coarse){
  .card__facts{ opacity:1; visibility:visible; transform:none; pointer-events:auto; -webkit-mask-image:none; mask-image:none }
}

/* 10) High-contrast (forced colors) safeguards */
@media (forced-colors: active){
  .card, .faq-item, .infocard, .expert, .footer, .table-scroll{ border-color: CanvasText }
  .btn, .btn--ghost, .btn--light{ forced-color-adjust:auto; background: ButtonFace; color: ButtonText; border-color: ButtonText }
  .ico-chip{ border-color: ButtonText }
  .stars__bar{ background: GrayText }
  .stars__bar::after{ background: Highlight }
  .badge{ background: Highlight; color: HighlightText }
}

/* 11) Print essentials */
@media print{
  body{ background:#fff; color:#000 }
  .header, .footer, .btn, .meta-quick, .card__cta, .trust, .infoblock, .faq, .expert__card img, .footer__badges{ display:none!important }
  .card, .infocard, .expert{ border:1px solid #000 }
  .card__logo{ border:1px solid #000 }
  .tbl{ color:#000 }
}

/* 12) Debug helpers (enable when needed) */
/* .card{ outline:1px solid rgba(0,255,128,.25) } */
/* .card__facts{ outline:1px dashed rgba(0,255,255,.35) } */
/* .card__title h3{ background:rgba(255,0,0,.05) } */

/* End of continuation */

@media (min-width: 1080px){
.card__facts {
    display: none;
    }
}

/* Footer badges (semantic) */
.footer__badges{display:block}
.badge-list{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0;padding:0;list-style:none
}
.badge{margin:0;padding:0}

.badge__link{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 10px;border-radius:999px;
  background:#ffffff;border:1px solid var(--line);
  color:#0f172a;font-weight:700;
  box-shadow:0 6px 16px rgba(2,6,23,.06);
  transition:transform .12s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease
}
.badge__link:hover{ transform:translateY(-1px); background:#f8fafc; border-color:#c7d2fe; box-shadow:0 12px 28px rgba(2,6,23,.08) }
.badge__link:active{ transform:translateY(0) }

.badge__ico{
  display:inline-grid;place-items:center;
  width:32px;height:32px;border-radius:50%;
  font-size:12px;font-weight:900;letter-spacing:.4px;
  color:#fff;user-select:none
}
.badge__ico--age{
  background:
    radial-gradient(circle at 30% 30%, #ffffff 0 18%, transparent 19%) ,
    linear-gradient(135deg, var(--brand), var(--brand-2));
  box-shadow:inset 0 -2px 0 rgba(0,0,0,.08)
}

.badge__svg{
  width:20px;height:20px;color:var(--brand)
}
.badge__text{
  font-size:14px;line-height:1;color:#111827
}

/* Адаптив */
@media (max-width:520px){
  .badge__link{padding:8px 10px}
  .badge__text{font-weight:600}
}

@media (max-width:1080px){
.trust, .infocards {
    display: flex;
    flex-wrap: wrap;
}}


ul.card__facts {
    display: none;
}

/* Мобильные «поля» по краям и чуть плотнее карточки */
@media (max-width: 640px){
  .container{ padding-left:12px; padding-right:12px }
  .main{ padding-bottom:32px }
  .cards{ gap:10px }
  .card--row{ padding:12px }
  .footer .container{ padding-left:12px; padding-right:12px }
}

/* Таблицы: надёжный горизонтальный скролл на узких экранах */
.table-scroll{
  position: relative;
  display: block;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch; /* инерционный скролл iOS */
  scrollbar-gutter: stable both-edges;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
}

/* Подсказка-градиент (мягкий намёк, что есть прокрутка) */
@media (hover: hover){
  .table-scroll::after{
    content:"";
    position:absolute; top:0; right:0; width:24px; height:100%;
    pointer-events:none;
    background: linear-gradient(to left, rgba(0,0,0,.06), rgba(0,0,0,0));
    border-top-right-radius:12px; border-bottom-right-radius:12px;
  }
}

/* Таблица внутри — минимум, чтобы появлялся скролл, но не ломалась вью */
.tbl{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

/* Удобочитаемость на очень узких экранах */
@media (max-width: 560px){
  .tbl{ min-width: 620px }
}

/* Лёгкая стилизация горизонтального скроллбара (WebKit) */
.table-scroll::-webkit-scrollbar{ height:8px }
.table-scroll::-webkit-scrollbar-thumb{
  background:#d1d5db; border-radius:8px
}
.table-scroll::-webkit-scrollbar-track{ background:transparent }