:root{
  --vb-brand:#6d5dfb; --vb-brand-2:#00d4ff; --vb-accent:#14b8a6;
  --vb-bg: radial-gradient(circle at 12% 14%, rgba(109,93,251,.22), transparent 30%), radial-gradient(circle at 88% 10%, rgba(0,212,255,.20), transparent 26%), linear-gradient(135deg,#f8fbff 0%,#eef3ff 52%,#ffffff 100%);
  --vb-surface:rgba(255,255,255,.82); --vb-surface-strong:rgba(255,255,255,.94); --vb-border:rgba(100,116,139,.22);
  --vb-text-soft:#64748b; --vb-shadow:0 24px 70px rgba(15,23,42,.13); --vb-shadow-hover:0 28px 90px rgba(109,93,251,.24);
  --vb-radius:28px;
}
[data-bs-theme="dark"]{
  --vb-bg: radial-gradient(circle at 16% 12%, rgba(109,93,251,.28), transparent 32%), radial-gradient(circle at 86% 16%, rgba(0,212,255,.16), transparent 30%), linear-gradient(135deg,#020617 0%,#0f172a 58%,#111827 100%);
  --vb-surface:rgba(15,23,42,.76); --vb-surface-strong:rgba(15,23,42,.9); --vb-border:rgba(148,163,184,.22);
  --vb-text-soft:#94a3b8; --vb-shadow:0 24px 70px rgba(0,0,0,.35); --vb-shadow-hover:0 28px 90px rgba(0,212,255,.16);
}
*{box-sizing:border-box} html{max-width:100%;overflow-x:hidden;scroll-padding-top:96px} body{min-height:100vh;max-width:100%;overflow-x:hidden;background:var(--vb-bg);background-attachment:scroll!important;background-size:cover;color:var(--bs-body-color);font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif} a{text-decoration:none} img{max-width:100%;height:auto}.text-soft{color:var(--vb-text-soft)!important}.fw-black{font-weight:900;letter-spacing:-.04em}.gradient-text{background:linear-gradient(135deg,var(--vb-brand),var(--vb-brand-2));-webkit-background-clip:text;background-clip:text;color:transparent}.page-shell{padding-top:104px;padding-bottom:58px;position:relative}.container-narrow{max-width:920px}.glass-card{background:var(--vb-surface);border:1px solid var(--vb-border);box-shadow:var(--vb-shadow);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-radius:var(--vb-radius)}
/* navbar preserved behavior */
.vb-navbar{background:var(--vb-surface);border-bottom:1px solid var(--vb-border);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:0 10px 32px rgba(15,23,42,.08)}.vb-brand{display:flex;align-items:center;gap:10px;font-weight:900;letter-spacing:-.04em}.vb-brand img{width:42px;height:42px;border-radius:15px;box-shadow:0 12px 30px rgba(109,93,251,.28)}.vb-brand small{font-weight:800;opacity:.65}.nav-link{font-weight:750;border-radius:14px;padding:.62rem .82rem!important}.nav-link i{margin-right:.28rem}.nav-link:hover,.nav-link.active,.dropdown-toggle.active{color:var(--vb-brand)!important;background:rgba(109,93,251,.10)}.vb-dropdown{background:var(--vb-surface-strong);border:1px solid var(--vb-border);box-shadow:var(--vb-shadow);border-radius:20px;padding:10px}.dropdown-item{border-radius:13px;font-weight:650;padding:.62rem .72rem}.dropdown-item.active,.dropdown-item:active{background:linear-gradient(135deg,var(--vb-brand),var(--vb-brand-2));color:#fff}.vb-theme-btn{width:124px;min-width:124px;height:44px;display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:16px;border:1px solid var(--vb-border);background:var(--vb-surface-strong);color:var(--bs-body-color);font-weight:800;box-shadow:0 12px 30px rgba(15,23,42,.08);white-space:nowrap}.vb-theme-btn:hover{border-color:rgba(109,93,251,.55);color:var(--vb-brand);transform:translateY(-1px)}
.btn-brand{--bs-btn-color:#fff;--bs-btn-bg:var(--vb-brand);--bs-btn-border-color:var(--vb-brand);--bs-btn-hover-color:#fff;--bs-btn-hover-bg:#5c4ff0;--bs-btn-hover-border-color:#5c4ff0;box-shadow:0 14px 32px rgba(109,93,251,.26);font-weight:800;border-radius:16px}.btn-glass{background:var(--vb-surface-strong);border:1px solid var(--vb-border);color:var(--bs-body-color);box-shadow:0 12px 30px rgba(15,23,42,.08);font-weight:750;border-radius:16px}.btn-glass:hover{border-color:rgba(109,93,251,.45);color:var(--vb-brand)}
.hero{position:relative;overflow:hidden;padding:clamp(26px,5vw,58px);isolation:isolate}.hero:before{content:"";position:absolute;inset:auto -12% -36% 42%;height:340px;border-radius:999px;background:linear-gradient(135deg,rgba(109,93,251,.22),rgba(0,212,255,.2));filter:blur(4px);z-index:-1}
.hero-title{font-size:clamp(2.2rem,3vw,3.1rem);font-weight:950;letter-spacing:-.065em;line-height:.95}.hero-lead{font-size:clamp(1.04rem,1.6vw,1.26rem);color:var(--vb-text-soft);max-width:760px}.hero-stat{padding:18px;border-radius:22px;background:rgba(109,93,251,.09);border:1px solid rgba(109,93,251,.16)}.hero-stat strong{font-size:1.5rem}.section-heading{text-align:center;margin-bottom:30px}.section-heading h1,.section-heading h2{font-weight:950;letter-spacing:-.055em}.blog-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:26px}.posts-grid{display:grid;gap:22px}.post-card{display:grid;grid-template-columns:230px minmax(0,1fr);gap:20px;overflow:hidden;color:inherit;background:var(--vb-surface);border:1px solid var(--vb-border);box-shadow:var(--vb-shadow);border-radius:var(--vb-radius);transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}.post-card:hover{color:inherit;transform:translateY(-6px);box-shadow:var(--vb-shadow-hover);border-color:rgba(109,93,251,.42)}.post-thumb{min-height:180px;background:#0f172a;overflow:hidden}.post-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease}.post-card:hover .post-thumb img{transform:scale(1.045)}.post-body{padding:22px 22px 22px 0}.post-body h2{font-size:1.35rem;font-weight:900;letter-spacing:-.035em}.post-meta{display:flex;flex-wrap:wrap;gap:9px;color:var(--vb-text-soft);font-size:.92rem}.post-meta span{display:inline-flex;align-items:center;gap:5px}.chip,.tag-link{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:8px 12px;background:rgba(109,93,251,.10);color:var(--vb-brand);font-weight:800;font-size:.86rem}.tag-link:hover{background:linear-gradient(135deg,var(--vb-brand),var(--vb-brand-2));color:white}.sidebar{display:grid;gap:18px;align-self:start;position:sticky;top:96px}.side-card{padding:22px}.side-card h3{font-size:1.05rem;font-weight:900;letter-spacing:-.025em}.search-box{position:relative}.search-box i{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:var(--vb-text-soft)}.search-box .form-control{height:54px;border-radius:18px;background:var(--vb-surface-strong);border:1px solid var(--vb-border);padding-left:45px}.search-box .form-control:focus{box-shadow:0 0 0 .25rem rgba(109,93,251,.16);border-color:rgba(109,93,251,.65)}.link-list{display:grid;gap:10px;margin:0;padding:0;list-style:none}.link-list a{display:flex;justify-content:space-between;gap:12px;padding:12px 14px;border-radius:16px;color:inherit;background:rgba(148,163,184,.08);font-weight:700}.link-list a:hover{background:rgba(109,93,251,.12);color:var(--vb-brand)}.pagination-modern .page-link{min-width:44px;height:44px;display:grid;place-items:center;border-radius:16px!important;border:1px solid var(--vb-border);background:var(--vb-surface);color:var(--bs-body-color);font-weight:900;box-shadow:0 12px 28px rgba(15,23,42,.08)}.pagination-modern .active .page-link{color:#fff;background:linear-gradient(135deg,var(--vb-brand),var(--vb-brand-2));border-color:transparent}.article-shell{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:26px}.article-card{padding:clamp(22px,4vw,46px)}.article-cover{border-radius:26px;overflow:hidden;box-shadow:var(--vb-shadow);margin:22px 0}.article-cover img{width:100%;display:block}.article-content{font-size:1.06rem;line-height:1.82}.article-content h2{margin-top:2.1rem;font-weight:950;letter-spacing:-.04em}.article-content h3{margin-top:1.6rem;font-weight:900}.article-content p{margin-bottom:1.15rem}.article-content blockquote{padding:22px 24px;border-radius:22px;background:rgba(109,93,251,.10);border-left:5px solid var(--vb-brand);font-weight:700}.article-content pre{border-radius:22px;padding:20px;background:#0f172a;color:#e5e7eb;overflow:auto}.toc a{display:block;padding:9px 0;color:var(--vb-text-soft);font-weight:700}.toc a:hover{color:var(--vb-brand)}.service-panel{padding:clamp(22px,4vw,38px)}.service-form .form-control{height:58px;border-radius:18px;background:var(--vb-surface-strong);border:1px solid var(--vb-border);font-weight:800;letter-spacing:.08em;text-transform:uppercase}.vendor-result{border-radius:22px;background:rgba(20,184,166,.10);border:1px solid rgba(20,184,166,.24);padding:20px}.vendor-table{overflow:hidden;border-radius:22px;border:1px solid var(--vb-border)}.vendor-table .table{margin:0}.feature-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;list-style:none;margin:0;padding:0}.feature-list li{padding:15px 16px;border-radius:18px;background:rgba(109,93,251,.08);font-weight:750}.feature-list i{color:var(--vb-brand);margin-right:8px}.footer{padding:34px 0 44px;color:var(--vb-text-soft)}.vb-to-top{position:fixed;right:22px;bottom:22px;width:48px;height:48px;border-radius:18px;border:1px solid var(--vb-border);background:var(--vb-surface-strong);box-shadow:var(--vb-shadow);color:var(--bs-body-color);display:grid;place-items:center;opacity:0;pointer-events:none;transform:translateY(10px);transition:.2s ease;z-index:1030}.vb-to-top.is-visible{opacity:1;pointer-events:auto;transform:none}.empty-state{display:none;padding:28px;text-align:center}.empty-state.is-visible{display:block}.ad-placeholder{min-height:250px;border-radius:22px;border:1px dashed var(--vb-border);display:grid;place-items:center;color:var(--vb-text-soft);background:rgba(148,163,184,.07);font-weight:800}.breadcrumbs-modern{--bs-breadcrumb-divider:'›'}.breadcrumbs-modern a{color:var(--vb-text-soft);font-weight:700}.breadcrumbs-modern .active{font-weight:800}.code-inline{padding:.15rem .35rem;border-radius:.45rem;background:rgba(109,93,251,.12);color:var(--vb-brand);font-weight:800}.mini-card{padding:18px;border-radius:22px;background:rgba(148,163,184,.08);border:1px solid var(--vb-border)}
@media(max-width:1199.98px){.blog-grid,.article-shell{grid-template-columns:1fr}.sidebar{position:static;grid-template-columns:repeat(2,minmax(0,1fr))}.sidebar .wide{grid-column:1/-1}}
@media(max-width:991.98px){.page-shell{padding-top:88px}.vb-theme-btn{width:124px;min-width:124px;margin-top:8px}.vb-navbar .navbar-collapse{padding-top:10px}.nav-link{padding:.72rem .8rem!important}.post-card{grid-template-columns:180px minmax(0,1fr)}.post-body{padding:18px 18px 18px 0}}
@media(max-width:767.98px){.hero{padding:24px}.post-card{grid-template-columns:1fr}.post-thumb{aspect-ratio:16/9;min-height:0}.post-body{padding:18px}.sidebar{grid-template-columns:1fr}.article-card{padding:20px}.article-content{font-size:1rem}.vb-theme-btn{width:124px;min-width:124px}.page-shell{padding-bottom:36px}.hero-title{font-size:2.35rem}}


/* Download page */
.download-hero{overflow:hidden;position:relative}
.download-hero::after{content:"";position:absolute;right:-90px;top:-110px;width:300px;aspect-ratio:1;border-radius:999px;background:radial-gradient(circle,rgba(0,212,255,.22),transparent 68%);pointer-events:none}
.download-search-panel{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px;border-radius:24px;background:rgba(148,163,184,.10);border:1px solid var(--vb-border)}
.download-search-panel .search-box{flex:1 1 330px}.download-search-panel .form-control{height:56px;border-radius:18px;background:var(--vb-surface-strong);border:1px solid var(--vb-border)}
.download-counter{padding:11px 14px;border-radius:16px;background:var(--vb-surface-strong);border:1px solid var(--vb-border);font-weight:800;color:var(--vb-text-soft);white-space:nowrap}.download-counter b{color:var(--bs-body-color)}
.download-hero-card{min-height:260px;border-radius:30px;padding:28px;background:linear-gradient(135deg,rgba(109,93,251,.95),rgba(0,212,255,.82));color:#fff;box-shadow:var(--vb-shadow);display:flex;flex-direction:column;justify-content:flex-end;position:relative;overflow:hidden}.download-hero-card::before{content:"";position:absolute;inset:-30% -20% auto auto;width:220px;aspect-ratio:1;border-radius:999px;background:rgba(255,255,255,.22)}.download-hero-card i{font-size:4.4rem;margin-bottom:auto;filter:drop-shadow(0 16px 30px rgba(0,0,0,.18))}.download-hero-card strong{font-size:1.45rem;line-height:1.05}.download-hero-card span{opacity:.86;margin-top:8px}
.download-quick{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.download-quick a{display:flex;align-items:center;gap:12px;padding:16px;border-radius:22px;background:var(--vb-surface);border:1px solid var(--vb-border);box-shadow:0 14px 34px rgba(15,23,42,.08);color:var(--bs-body-color);font-weight:900}.download-quick a:hover{transform:translateY(-3px);color:var(--vb-brand);border-color:rgba(109,93,251,.38)}.download-quick i{width:38px;height:38px;display:grid;place-items:center;border-radius:15px;background:rgba(109,93,251,.12);color:var(--vb-brand)}
.download-section{padding:clamp(20px,3vw,34px);margin-bottom:24px}.download-count{padding:8px 13px;border-radius:999px;background:rgba(109,93,251,.10);color:var(--vb-brand);font-weight:900}.download-list{display:grid;gap:14px}.download-card{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:16px;padding:16px;border-radius:24px;background:rgba(148,163,184,.075);border:1px solid var(--vb-border);transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}.download-card:hover{transform:translateY(-2px);border-color:rgba(109,93,251,.36);box-shadow:0 16px 38px rgba(15,23,42,.10)}.download-icon{width:54px;height:54px;border-radius:20px;background:linear-gradient(135deg,rgba(109,93,251,.16),rgba(0,212,255,.14));display:grid;place-items:center;color:var(--vb-brand);font-size:1.45rem}.download-main h3{font-size:1.06rem;font-weight:950;letter-spacing:-.025em;margin:1px 0 5px}.download-main p{margin:0 0 8px;color:var(--vb-text-soft)}.download-kicker{font-size:.76rem;text-transform:uppercase;letter-spacing:.08em;color:var(--vb-brand);font-weight:950}.download-meta{display:flex;flex-wrap:wrap;gap:10px;color:var(--vb-text-soft);font-size:.88rem;font-weight:750}.download-meta span{display:inline-flex;align-items:center;gap:5px}.download-actions{display:flex;gap:8px;align-items:center;justify-content:flex-end;flex-wrap:wrap}.download-actions .btn{border-radius:14px;font-weight:850}.download-card[hidden]{display:none!important}
@media(max-width:991.98px){.download-quick{grid-template-columns:repeat(2,minmax(0,1fr))}.download-card{grid-template-columns:auto minmax(0,1fr)}.download-actions{grid-column:1/-1;justify-content:flex-start;padding-left:70px}}
@media(max-width:575.98px){.download-search-panel{padding:10px}.download-counter{width:100%}.download-quick{grid-template-columns:1fr}.download-card{grid-template-columns:1fr}.download-icon{width:48px;height:48px}.download-actions{padding-left:0}.download-actions .btn{width:100%;justify-content:center}.download-hero-card{min-height:210px}}


/* =========================================================
   VARIANT 01 — CRYSTAL NEWS
   Светлый стеклянный новостной стиль для блога
   ========================================================= */
:root {
  --vb-brand: #2563eb;
  --vb-brand-2: #06b6d4;
  --vb-accent: #7c3aed;
  --vb-bg: #f4f8ff;
  --vb-bg-soft: #e9f2ff;
  --vb-card: rgba(255, 255, 255, .82);
  --vb-card-strong: rgba(255, 255, 255, .94);
  --vb-border: rgba(37, 99, 235, .15);
  --vb-shadow: 0 14px 36px rgba(37, 99, 235, .09);
  --vb-shadow-hover: 0 18px 44px rgba(37, 99, 235, .14);
  --vb-text-soft: #64748b;
  --vb-radius-xl: 30px;
}
[data-bs-theme="dark"] {
  --vb-brand: #60a5fa;
  --vb-brand-2: #22d3ee;
  --vb-accent: #a78bfa;
  --vb-bg: #07111f;
  --vb-bg-soft: #0f1d33;
  --vb-card: rgba(15, 23, 42, .78);
  --vb-card-strong: rgba(15, 23, 42, .92);
  --vb-border: rgba(96, 165, 250, .22);
  --vb-shadow: 0 16px 38px rgba(0, 0, 0, .24);
  --vb-shadow-hover: 0 20px 48px rgba(34, 211, 238, .10);
  --vb-text-soft: #a8b6cc;
}
body {
  background:
    radial-gradient(circle at 12% 12%, color-mix(in srgb, var(--vb-brand) 20%, transparent), transparent 32%),
    radial-gradient(circle at 88% 8%, color-mix(in srgb, var(--vb-brand-2) 18%, transparent), transparent 34%),
    linear-gradient(135deg, var(--vb-bg), var(--vb-bg-soft) 52%, var(--vb-bg));
}
.vb-navbar {
  background: color-mix(in srgb, var(--vb-card-strong) 86%, transparent) !important;
  border-bottom: 1px solid var(--vb-border);
  box-shadow: 0 18px 48px rgba(15, 23, 42, .07);
}
.vb-brand img { border-radius: 16px; box-shadow: 0 14px 34px color-mix(in srgb, var(--vb-brand) 32%, transparent); }
.vb-hero, .glass-card, .article-card, .download-card, .vendor-card, .sidebar-card {
  background: linear-gradient(145deg, color-mix(in srgb, var(--vb-card) 92%, transparent), color-mix(in srgb, var(--vb-card-strong) 80%, transparent));
  border: 1px solid var(--vb-border);
  box-shadow: var(--vb-shadow);
  backdrop-filter: blur(22px);
}
.article-card:hover, .download-card:hover { transform: translateY(-8px); box-shadow: var(--vb-shadow-hover); }
.post-cover::after { background: linear-gradient(180deg, transparent 30%, rgba(15,23,42,.60)); }
.btn-brand, .badge-soft-primary { background: linear-gradient(135deg, var(--vb-brand), var(--vb-brand-2)) !important; color: #fff !important; border-color: transparent !important; }
.section-kicker, .text-gradient { background: linear-gradient(135deg, var(--vb-brand), var(--vb-brand-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }


/* === Hero refresh: 01 Crystal News === */
.hero{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(300px,410px);
  grid-template-areas:
    "badge stats"
    "title stats"
    "social stats"
    "lead stats"
    "actions stats";
  gap:18px 34px;
  align-items:center;
  padding:clamp(30px,5vw,64px);
  background:
    radial-gradient(circle at 12% 10%, rgba(255,255,255,.78), transparent 26%),
    radial-gradient(circle at 88% 16%, rgba(0,212,255,.18), transparent 32%),
    linear-gradient(135deg, rgba(255,255,255,.74), rgba(236,247,255,.58));
}

.hero > .social-row {
    grid-area: social;
    justify-content: flex-start;
    padding-top: 0;
}

[data-bs-theme="dark"] .hero{
  background:
    radial-gradient(circle at 15% 8%, rgba(56,189,248,.18), transparent 30%),
    radial-gradient(circle at 88% 15%, rgba(109,93,251,.22), transparent 34%),
    linear-gradient(135deg, rgba(15,23,42,.84), rgba(2,6,23,.68));
}
.hero:before{inset:-28% -18% auto auto;width:410px;height:410px;background:linear-gradient(135deg,rgba(109,93,251,.28),rgba(0,212,255,.20));filter:blur(2px)}
.hero:after{content:"";position:absolute;right:clamp(18px,4vw,46px);top:50%;width:220px;height:220px;transform:translateY(-50%) rotate(12deg);border-radius:36px;background:linear-gradient(135deg,rgba(255,255,255,.28),rgba(255,255,255,.05));border:1px solid rgba(255,255,255,.28);box-shadow:0 24px 80px rgba(109,93,251,.20);z-index:-1}
.hero>.badge{grid-area:badge;justify-self:start}.hero>.hero-title{grid-area:title}.hero>.hero-lead{grid-area:lead}.hero>.d-flex{grid-area:actions}.hero>.row{grid-area:stats;margin-top:0!important;width:100%;display:grid;grid-template-columns:1fr!important;gap:14px;transform:none}
.hero>.row>[class*="col-"]{width:100%;max-width:none;padding:0}.hero-stat{position:relative;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 20px;border-radius:26px;background:rgba(255,255,255,.62);border:1px solid rgba(255,255,255,.52);box-shadow:0 18px 48px rgba(15,23,42,.10);backdrop-filter:blur(18px)}
[data-bs-theme="dark"] .hero-stat{background:rgba(15,23,42,.66);border-color:rgba(148,163,184,.22);box-shadow:0 18px 50px rgba(0,0,0,.26)}
.hero-stat:before{content:"";width:12px;height:44px;border-radius:999px;background:linear-gradient(180deg,var(--vb-brand),var(--vb-brand-2));box-shadow:0 10px 28px rgba(109,93,251,.30)}
.hero-stat strong{font-size:clamp(1.2rem,2vw,1.75rem);white-space:nowrap}.hero-stat .text-soft{text-align:right;font-weight:700}
@media(max-width:991.98px){.hero{grid-template-columns:1fr;grid-template-areas:"badge" "title" "social" "lead" "actions" "stats"}.hero>.row{grid-template-columns:repeat(3,1fr)!important}.hero-stat{display:block}.hero-stat:before{display:block;width:42px;height:8px;margin-bottom:12px}.hero-stat .text-soft{text-align:left}}

@media(max-width:767.98px){.hero>.row{grid-template-columns:1fr!important}.hero-stat{display:flex}.hero-stat .text-soft{text-align:right}}

/* === Fix: download hero alignment after variant hero redesign === */
.download-hero.hero {
  display: block !important;
  grid-template-columns: none !important;
  grid-template-areas: none !important;
  align-items: initial !important;
  overflow: hidden;
  position: relative;
}

.download-hero.hero > .row {
  position: relative !important;
  z-index: 1;
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  inset: auto !important;
  transform: none !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.download-hero.hero > .row > [class*="col-"] {
  width: auto;
  max-width: 100%;
}

.download-hero.hero::before {
  content: "";
  position: absolute;
  left: -120px;
  bottom: -140px;
  width: 320px;
  height: 320px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(109,93,251,.16), transparent 68%);
  pointer-events: none;
  z-index: 0;
  display: block;
  filter: none;
}

.download-hero.hero::after {
  content: "";
  position: absolute;
  right: -90px;
  top: -110px;
  width: 300px;
  height: 300px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(0,212,255,.22), transparent 68%);
  pointer-events: none;
  z-index: 0;
  transform: none;
  border: 0;
  box-shadow: none;
}

.download-hero .download-search-panel,
.download-hero .download-hero-card {
  position: relative;
  z-index: 2;
}

@media (max-width: 991.98px) {
  .download-hero.hero > .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .download-hero .download-hero-card {
    min-height: 180px;
  }
}

/* === Fix: article content card must not jump on hover === */
.glass-card.article-card,
.glass-card.article-card:hover,
.article-card:hover {
  transform: none !important;
}

.glass-card.article-card {
  transition: box-shadow .18s ease, border-color .18s ease, background-color .18s ease !important;
}

.glass-card.article-card:hover,
.article-card:hover {
  box-shadow: var(--vb-shadow) !important;
  border-color: var(--vb-border) !important;
}


/* =========================================================
   MOBILE NAVBAR IMPORTED FROM USER TEMPLATE
   Оставлено поведение как в исходных файлах: overlay-menu under fixed header,
   stable theme button width, opaque mobile menu, no Bootstrap height stutter.
   ========================================================= */
:root{
  --vb-nav:78px;
  --vb-line:var(--vb-border);
  --vb-surface-2:var(--vb-surface-strong);
  --vb-primary:var(--vb-brand);
  --vb-text:var(--bs-body-color);
}
/* === FixPack 2026-05 v2: mobile menu + page scroll === */
/* Desktop home: intentionally no vertical browser scroll. */
@media (min-width: 992px) {
  body.page-home {
    height: 100svh;
    min-height: 100svh;
    overflow: hidden;
  }

  body.page-home .page-shell {
    height: calc(100svh - var(--vb-nav));
    min-height: 0;
    overflow: hidden;
  }

  @supports (height: 100dvh) {
    body.page-home {
      height: 100dvh;
      min-height: 100dvh;
    }

    body.page-home .page-shell {
      height: calc(100dvh - var(--vb-nav));
    }
  }
}

/* Mobile/tablet home: content may scroll normally. */
@media (max-width: 991.98px) {
  html {
    overflow-x: hidden;
  }

  body.page-home {
    height: auto;
    min-height: 100svh;
    overflow-x: hidden;
    overflow-y: auto;
  }

  body.page-home .page-shell {
    height: auto;
    min-height: calc(100svh - var(--vb-nav));
    overflow: visible;
  }

  @supports (min-height: 100dvh) {
    body.page-home {
      min-height: 100dvh;
    }

    body.page-home .page-shell {
      min-height: calc(100dvh - var(--vb-nav));
    }
  }
}

/* Other pages: keep the native browser scrollbar usable by mouse. */
body:not(.page-home) {
  min-height: 100vh;
  overflow-x: hidden;
  overflow-y: visible;
}

/* Active menu items, including clean URLs like /terms. */
.vb-navbar .nav-link.active,
.vb-navbar .dropdown-toggle.active,
.vb-dropdown .dropdown-item.active {
  background: rgba(109, 93, 252, .12);
  color: var(--vb-primary) !important;
}

.vb-dropdown .dropdown-item.active {
  font-weight: 850;
}

[data-bs-theme="dark"] .vb-navbar .nav-link.active,
[data-bs-theme="dark"] .vb-navbar .dropdown-toggle.active,
[data-bs-theme="dark"] .vb-dropdown .dropdown-item.active {
  background: rgba(109, 93, 252, .2);
}

/* Mobile navbar: menu opens as an overlay under the fixed header,
   so brand/toggler never move and Bootstrap height animation does not stutter. */
@media (max-width: 991.98px) {
  .vb-navbar.site-navbar, .vb-navbar {
    min-height: var(--vb-nav);
    padding-top: 0;
    padding-bottom: 0;
  }

  .vb-navbar.site-navbar, .vb-navbar > .container-xl {
    position: relative;
    min-height: var(--vb-nav);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: .75rem;
  }

  .vb-brand {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
  }

  .vb-brand span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .vb-navbar .navbar-toggler {
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    margin: 0;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    border: 1px solid var(--vb-line);
    background: var(--vb-surface);
    box-shadow: none;
  }

  .vb-navbar .navbar-toggler:focus {
    box-shadow: 0 0 0 .22rem rgba(109, 93, 252, .18);
  }

  .vb-navbar .navbar-collapse {
    position: absolute;
    top: calc(100% + 10px);
    left: var(--bs-gutter-x, .75rem);
    right: var(--bs-gutter-x, .75rem);
    z-index: 1055;
    width: auto;
    max-height: calc(100dvh - var(--vb-nav) - 24px);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: .85rem;
    border: 1px solid var(--vb-line);
    border-radius: 24px;
    background: var(--vb-surface-2);
    box-shadow: var(--vb-shadow);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
  }

  .vb-navbar .navbar-collapse:not(.show):not(.collapsing) {
    display: none;
  }

  .vb-navbar .navbar-collapse.show {
    display: block;
    height: auto !important;
    opacity: 1;
    transform: translateY(0) scale(1);
    animation: none;
  }

  .vb-navbar .navbar-collapse.collapsing {
    display: block;
    height: auto !important;
    transition: none !important;
    will-change: opacity, transform;
    backface-visibility: hidden;
    animation: vbMenuIn .14s ease-out both;
  }

  .vb-navbar.is-menu-closing .navbar-collapse.collapsing {
    animation: vbMenuOut .10s ease-in both;
  }

  .vb-navbar .navbar-nav {
    gap: .32rem;
    align-items: stretch !important;
  }

  .vb-navbar .nav-link {
    width: 100%;
    min-height: 44px;
    justify-content: flex-start;
    border-radius: 16px;
    padding: .68rem .82rem !important;
  }

  .vb-navbar .dropdown-menu {
    position: static !important;
    transform: none !important;
    width: 100%;
    margin: .3rem 0 .45rem;
  }

  .vb-dropdown {
    width: 100%;
    border-radius: 18px;
  }

  .vb-dropdown .dropdown-item {
    min-height: 42px;
    display: flex;
    align-items: center;
  }

  .vb-theme-btn {
    width: 100%;
    min-height: 46px;
    margin-top: .65rem !important;
    border-radius: 16px;
  }
}

@keyframes vbMenuIn {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes vbMenuOut {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateY(-8px) scale(.985);
  }
}


/* === FixPack 2026-05 v4: opaque mobile menu + stable scrollbar on theme switch === */
html.has-page-scroll {
  overflow-x: hidden;
  overflow-y: scroll;
}

html.has-page-scroll body {
  overflow-x: hidden;
  overflow-y: visible;
}

@media (min-width: 992px) {
  html.is-page-home {
    overflow-x: hidden;
    overflow-y: hidden;
  }

  html.is-page-home body.page-home {
    height: 100svh;
    min-height: 100svh;
    overflow: hidden;
  }

  @supports (height: 100dvh) {
    html.is-page-home body.page-home {
      height: 100dvh;
      min-height: 100dvh;
    }
  }
}

@media (max-width: 991.98px) {
  html.is-page-home {
    overflow-x: hidden;
    overflow-y: auto;
  }

  html.is-page-home body.page-home {
    height: auto;
    min-height: 100svh;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .vb-navbar .navbar-collapse {
    background: #ffffff !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  [data-bs-theme="dark"] .vb-navbar .navbar-collapse {
    background: #0f172a !important;
  }

  .vb-navbar .dropdown-menu.vb-dropdown,
  .vb-navbar .vb-dropdown {
    background: #ffffff !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  [data-bs-theme="dark"] .vb-navbar .dropdown-menu.vb-dropdown,
  [data-bs-theme="dark"] .vb-navbar .vb-dropdown {
    background: #111827 !important;
  }
}

/* === FixPack 2026-05 v5: keep Chrome scrollbar stable on theme toggle === */
html.has-page-scroll {
  overflow-x: hidden !important;
  overflow-y: scroll !important;
}

html.has-page-scroll body {
  overflow-x: hidden !important;
}

html.has-page-scroll body:not(.page-home) {
  min-height: calc(100vh + 1px);
  overflow-y: visible !important;
}

@media (min-width: 992px) {
  html.is-page-home:not(.has-page-scroll) {
    overflow-x: hidden !important;
    overflow-y: hidden !important;
  }

  html.is-page-home:not(.has-page-scroll) body.page-home {
    overflow: hidden !important;
  }
}

@media (max-width: 991.98px) {
  html.is-page-home.has-page-scroll {
    overflow-x: hidden !important;
    overflow-y: scroll !important;
  }

  html.is-page-home.has-page-scroll body.page-home {
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }
}


/* === FixPack 2026-05 v6: stable Chrome scrollbar + no desktop navbar shift + mobile brand hitbox === */
html {
  overflow-x: hidden;
}

html.has-page-scroll {
  overflow-x: hidden !important;
  overflow-y: scroll !important;
  scrollbar-gutter: stable;
}

html.has-page-scroll body {
  overflow-x: hidden !important;
}

html.has-page-scroll body:not(.page-home) {
  overflow-y: visible !important;
}

@media (min-width: 992px) {
  html.is-page-home:not(.has-page-scroll) {
    overflow-x: hidden !important;
    overflow-y: hidden !important;
  }

  html.is-page-home:not(.has-page-scroll) body.page-home {
    height: 100svh !important;
    min-height: 100svh !important;
    overflow: hidden !important;
  }
}

@media (max-width: 991.98px) {
  html.is-page-home.has-page-scroll,
  html.has-page-scroll.is-page-home {
    overflow-x: hidden !important;
    overflow-y: scroll !important;
    scrollbar-gutter: stable;
  }

  html.is-page-home.has-page-scroll body.page-home,
  html.has-page-scroll.is-page-home body.page-home {
    height: auto !important;
    min-height: 100svh !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  .vb-navbar.site-navbar, .vb-navbar > .container-xl {
    align-items: center !important;
  }

  .vb-brand {
    flex: 0 1 auto !important;
    width: auto !important;
    max-width: calc(100% - 60px);
  }

  .vb-brand span {
    flex: 0 1 auto;
  }
}


/* === FixPack 2026-05 v7: Chrome native scrollbar stability + no first-paint navbar shift ===
   Keep desktop home locked. Every other page gets a real, draggable Chrome scrollbar
   before JS starts, because html has the initial class in markup. */
html {
  overflow-x: hidden !important;
  scrollbar-gutter: auto !important;
}

html.has-page-scroll {
  overflow-y: scroll !important;
}

html.has-page-scroll body {
  overflow-x: hidden !important;
  overflow-y: visible !important;
}

html.has-page-scroll body:not(.page-home) {
  min-height: 100vh;
}

@media (min-width: 992px) {
  html.is-page-home:not(.has-page-scroll) {
    overflow-x: hidden !important;
    overflow-y: hidden !important;
  }

  html.is-page-home:not(.has-page-scroll) body.page-home {
    height: 100svh !important;
    min-height: 100svh !important;
    overflow: hidden !important;
  }

  html.is-page-home:not(.has-page-scroll) body.page-home .page-shell {
    height: calc(100svh - var(--vb-nav)) !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }
}

@media (max-width: 991.98px) {
  html.is-page-home {
    overflow-x: hidden !important;
    overflow-y: scroll !important;
  }

  html.is-page-home body.page-home {
    height: auto !important;
    min-height: 100svh !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
  }

  html.is-page-home body.page-home .page-shell {
    height: auto !important;
    min-height: calc(100svh - var(--vb-nav)) !important;
    overflow: visible !important;
  }
}

/* Fixed header must keep the same horizontal geometry from the first paint. */
.vb-navbar.site-navbar, .vb-navbar {
  left: 0;
  right: 0;
  width: 100%;
}

.vb-navbar.site-navbar, .vb-navbar > .container-xl {
  width: 100%;
}

/* === FixPack 2026-05 v8: prevent desktop navbar shift from theme button label update === */
@media (min-width: 992px) {
  .vb-theme-btn {
    width: 132px;
    min-width: 132px;
    max-width: 132px;
    flex: 0 0 132px;
    padding-left: .95rem;
    padding-right: .95rem;
  }

  .vb-theme-btn [data-vb-theme-label] {
    display: inline-block;
    min-width: 64px;
    text-align: left;
  }
}

/* === Mobile scroll performance fix === */
@media (max-width: 991.98px) {
  body {
    background-attachment: scroll !important;
  }

  .site-navbar,
  .vb-navbar.site-navbar, .vb-navbar,
  .glass-card,
  .content-card,
  .social-link,
  .btn-glass,
  .vb-dropdown {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  .vb-navbar.site-navbar, .vb-navbar {
    background: rgba(255, 255, 255, .96) !important;
  }

  [data-bs-theme="dark"] .vb-navbar.site-navbar, .vb-navbar {
    background: rgba(9, 13, 26, .96) !important;
  }

  .content-card,
  .glass-card,
  .btn-glass,
  .social-link {
    box-shadow: 0 10px 28px rgba(15, 23, 42, .10) !important;
  }

  [data-bs-theme="dark"] .content-card,
  [data-bs-theme="dark"] .glass-card,
  [data-bs-theme="dark"] .btn-glass,
  [data-bs-theme="dark"] .social-link {
    box-shadow: 0 12px 30px rgba(0, 0, 0, .24) !important;
  }
}

@media (hover: none), (pointer: coarse) {
  .content-card,
  .poster-frame img,
  .home-card,
  .social-link,
  .btn-clear-search,
  .vb-to-top {
    transition: none !important;
  }

  .content-card:hover,
  .home-card:hover,
  .social-link:hover {
    transform: none !important;
    filter: none !important;
  }

  .content-card:hover .poster-frame img {
    transform: none !important;
  }
}

/* Mobile gallery: vertical page scroll must not open screenshots */
.screens-strip {
  touch-action: pan-y !important;
}

.screen-shot {
  pointer-events: auto !important;
}

.screen-shot img {
  pointer-events: none !important;
}

/* Blog-specific safe adjustments after imported mobile menu. */
@media (max-width: 991.98px){
  .vb-navbar .navbar-collapse{
    left:.75rem!important;
    right:.75rem!important;
  }
  .vb-navbar .navbar-nav{width:100%;}
  .vb-navbar .dropdown-toggle::after{margin-left:auto;}
  .vb-navbar .nav-link{display:flex;align-items:center;gap:.35rem;}
  .vb-theme-btn{width:100%!important;max-width:none!important;min-width:0!important;flex:0 0 auto!important;}
}
@media (min-width: 992px){
  .vb-theme-btn{width:132px!important;min-width:132px!important;max-width:132px!important;flex:0 0 132px!important;}
}

/* === Blog home scroll fix ===
   Navbar remains imported from the reference template, but blog pages must scroll normally.
   The original reference site locked desktop home scroll; for this blog template it is disabled. */
html.is-page-home,
html.is-page-home:not(.has-page-scroll),
html.is-page-home.has-page-scroll,
html.has-page-scroll.is-page-home {
  height: auto !important;
  min-height: 100% !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

body.page-home,
html.is-page-home body.page-home,
html.is-page-home:not(.has-page-scroll) body.page-home,
html.is-page-home.has-page-scroll body.page-home,
html.has-page-scroll.is-page-home body.page-home {
  height: auto !important;
  min-height: 100vh !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

body.page-home .page-shell,
html.is-page-home body.page-home .page-shell,
html.is-page-home:not(.has-page-scroll) body.page-home .page-shell,
html.is-page-home.has-page-scroll body.page-home .page-shell,
html.has-page-scroll.is-page-home body.page-home .page-shell {
  height: auto !important;
  min-height: auto !important;
  overflow: visible !important;
}

@supports (min-height: 100dvh) {
  body.page-home,
  html.is-page-home body.page-home,
  html.is-page-home:not(.has-page-scroll) body.page-home,
  html.is-page-home.has-page-scroll body.page-home,
  html.has-page-scroll.is-page-home body.page-home {
    min-height: 100dvh !important;
  }
}

/* === FixPack: mobile fixed navbar restore for blog pages ===
   Keep the imported mobile overlay menu, but do NOT let container rules
   override Bootstrap .fixed-top on the navbar itself. */
@media (max-width: 991.98px) {
  .navbar.fixed-top.vb-navbar,
  .vb-navbar.site-navbar.fixed-top {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    left: 0 !important;
    z-index: 1030 !important;
    width: 100% !important;
  }

  .navbar.fixed-top.vb-navbar > .container-xl,
  .vb-navbar.site-navbar.fixed-top > .container-xl {
    position: relative !important;
  }
}
/* Download page: file title links mirror the real /download file links. */
.download-title-link {
  color: inherit;
  text-decoration: none;
}
.download-title-link:hover {
  color: var(--brand, var(--vb-primary, #6d5dfc));
}

/* === Form loading overlay ===
   Добавь класс form-loading на form или любой блок с формой,
   чтобы временно заблокировать ввод и показать премиальный loader.
   Пример: <form class="service-form form-loading">...</form>
*/
.form-loading {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  cursor: wait;
}

.form-loading::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 50;
  border-radius: inherit;
  background:
    radial-gradient(circle at 50% 42%, rgba(109, 93, 252, .18), transparent 34%),
    rgba(255, 255, 255, .68);
  -webkit-backdrop-filter: blur(10px) saturate(1.15);
  backdrop-filter: blur(10px) saturate(1.15);
}

[data-bs-theme="dark"] .form-loading::before {
  background:
    radial-gradient(circle at 50% 42%, rgba(0, 212, 255, .18), transparent 34%),
    rgba(2, 6, 23, .62);
}

.form-loading::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 51;
  width: 56px;
  height: 56px;
  margin-left: -28px;
  margin-top: -28px;
  border-radius: 50%;
  border: 4px solid rgba(148, 163, 184, .28);
  border-top-color: var(--brand, #6d5dfc);
  border-right-color: var(--brand-2, #00d4ff);
  box-shadow:
    0 0 0 10px rgba(109, 93, 252, .08),
    0 18px 42px rgba(15, 23, 42, .18);
  animation: vbFormLoaderSpin .75s linear infinite;
}

.form-loading input,
.form-loading textarea,
.form-loading select,
.form-loading button,
.form-loading a {
  pointer-events: none;
}

@keyframes vbFormLoaderSpin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .form-loading::after {
    animation-duration: 1.4s;
  }
}

/* === V-Blog notes / alert blocks === */
:root {
  --note-bg: rgba(255, 255, 255, .78);
  --note-border: rgba(148, 163, 184, .26);
  --note-text: var(--bs-body-color, #172033);
  --note-muted: var(--text-soft, #64748b);
  --note-shadow: 0 16px 40px rgba(15, 23, 42, .08);

  --note-danger: #ef4444;
  --note-info: #0ea5e9;
  --note-warning: #f59e0b;
  --note-default: #64748b;
  --note-success: #22c55e;
}

[data-bs-theme="dark"] {
  --note-bg: rgba(15, 23, 42, .78);
  --note-border: rgba(148, 163, 184, .18);
  --note-text: var(--bs-body-color, #edf3ff);
  --note-muted: var(--text-soft, #a6b1c5);
  --note-shadow: 0 18px 44px rgba(0, 0, 0, .28);
}

.note {
  --note-accent: var(--note-default);
  --note-accent-soft: rgba(100, 116, 139, .13);

  position: relative;
  display: block;
  width: 100%;
  margin: 18px 0;
  padding: 16px 18px 16px 58px;
  border: 1px solid color-mix(in srgb, var(--note-accent) 34%, var(--note-border));
  border-left: 5px solid var(--note-accent);
  border-radius: 22px;
  color: var(--note-text);
  background:
    radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--note-accent) 16%, transparent), transparent 36%),
    linear-gradient(135deg, color-mix(in srgb, var(--note-accent) 7%, transparent), transparent 58%),
    var(--note-bg);
  box-shadow: var(--note-shadow);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.note::before {
  content: "i";
  position: absolute;
  left: 16px;
  top: 15px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: #fff;
  background: linear-gradient(135deg, var(--note-accent), color-mix(in srgb, var(--note-accent) 72%, #ffffff));
  box-shadow: 0 10px 24px color-mix(in srgb, var(--note-accent) 30%, transparent);
  font-weight: 900;
  font-size: .95rem;
  line-height: 1;
}

.note > :first-child {
  margin-top: 0;
}

.note > :last-child {
  margin-bottom: 0;
}

.note a {
  color: var(--note-accent);
  font-weight: 800;
  text-decoration: none;
}

.note a:hover {
  text-decoration: underline;
}

.note.note-danger {
  --note-accent: var(--note-danger);
  --note-accent-soft: rgba(239, 68, 68, .13);
}

.note.note-danger::before {
  content: "!";
}

.note.note-info {
  --note-accent: var(--note-info);
  --note-accent-soft: rgba(14, 165, 233, .13);
}

.note.note-info::before {
  content: "i";
}

.note.note-warning {
  --note-accent: var(--note-warning);
  --note-accent-soft: rgba(245, 158, 11, .15);
}

.note.note-warning::before {
  content: "!";
}

.note.note-default {
  --note-accent: var(--note-default);
  --note-accent-soft: rgba(100, 116, 139, .13);
}

.note.note-default::before {
  content: "•";
}

.note.note-success {
  --note-accent: var(--note-success);
  --note-accent-soft: rgba(34, 197, 94, .13);
}

.note.note-success::before {
  content: "✓";
}

[data-bs-theme="dark"] .note {
  background:
    radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--note-accent) 20%, transparent), transparent 38%),
    linear-gradient(135deg, color-mix(in srgb, var(--note-accent) 9%, transparent), transparent 60%),
    var(--note-bg);
}

@supports not (color: color-mix(in srgb, red, blue)) {
  .note {
    border-color: var(--note-border);
    background: var(--note-bg);
  }
}

@media (max-width: 575.98px) {
  .note {
    padding: 14px 14px 14px 52px;
    border-radius: 18px;
  }

  .note::before {
    left: 14px;
    top: 14px;
    width: 28px;
    height: 28px;
    border-radius: 10px;
  }
}

/* === Fix: visible note colors for older Chromium without color-mix() === */
.note {
  border-color: rgba(100, 116, 139, .28);
  border-left-color: #64748b;
  background:
    radial-gradient(circle at 0% 0%, rgba(100, 116, 139, .14), transparent 38%),
    linear-gradient(135deg, rgba(100, 116, 139, .07), transparent 62%),
    var(--note-bg);
}

.note::before {
  background: linear-gradient(135deg, #64748b, #94a3b8);
  box-shadow: 0 10px 24px rgba(100, 116, 139, .26);
}

.note.note-danger {
  border-color: rgba(239, 68, 68, .32);
  border-left-color: #ef4444;
  background:
    radial-gradient(circle at 0% 0%, rgba(239, 68, 68, .18), transparent 38%),
    linear-gradient(135deg, rgba(239, 68, 68, .09), transparent 62%),
    var(--note-bg);
}

.note.note-danger::before {
  background: linear-gradient(135deg, #ef4444, #f97316);
  box-shadow: 0 10px 24px rgba(239, 68, 68, .30);
}

.note.note-info {
  border-color: rgba(14, 165, 233, .34);
  border-left-color: #0ea5e9;
  background:
    radial-gradient(circle at 0% 0%, rgba(14, 165, 233, .18), transparent 38%),
    linear-gradient(135deg, rgba(14, 165, 233, .09), transparent 62%),
    var(--note-bg);
}

.note.note-info::before {
  background: linear-gradient(135deg, #0ea5e9, #22d3ee);
  box-shadow: 0 10px 24px rgba(14, 165, 233, .30);
}

.note.note-warning {
  border-color: rgba(245, 158, 11, .38);
  border-left-color: #f59e0b;
  background:
    radial-gradient(circle at 0% 0%, rgba(245, 158, 11, .20), transparent 38%),
    linear-gradient(135deg, rgba(245, 158, 11, .10), transparent 62%),
    var(--note-bg);
}

.note.note-warning::before {
  background: linear-gradient(135deg, #f59e0b, #f97316);
  box-shadow: 0 10px 24px rgba(245, 158, 11, .32);
}

.note.note-default {
  border-color: rgba(100, 116, 139, .30);
  border-left-color: #64748b;
  background:
    radial-gradient(circle at 0% 0%, rgba(100, 116, 139, .15), transparent 38%),
    linear-gradient(135deg, rgba(100, 116, 139, .08), transparent 62%),
    var(--note-bg);
}

.note.note-default::before {
  background: linear-gradient(135deg, #64748b, #94a3b8);
  box-shadow: 0 10px 24px rgba(100, 116, 139, .28);
}

.note.note-success {
  border-color: rgba(34, 197, 94, .34);
  border-left-color: #22c55e;
  background:
    radial-gradient(circle at 0% 0%, rgba(34, 197, 94, .18), transparent 38%),
    linear-gradient(135deg, rgba(34, 197, 94, .09), transparent 62%),
    var(--note-bg);
}

.note.note-success::before {
  background: linear-gradient(135deg, #22c55e, #14b8a6);
  box-shadow: 0 10px 24px rgba(34, 197, 94, .30);
}

[data-bs-theme="dark"] .note.note-danger {
  border-color: rgba(248, 113, 113, .34);
  border-left-color: #f87171;
  background:
    radial-gradient(circle at 0% 0%, rgba(248, 113, 113, .20), transparent 38%),
    linear-gradient(135deg, rgba(248, 113, 113, .10), transparent 62%),
    var(--note-bg);
}

[data-bs-theme="dark"] .note.note-info {
  border-color: rgba(56, 189, 248, .36);
  border-left-color: #38bdf8;
  background:
    radial-gradient(circle at 0% 0%, rgba(56, 189, 248, .20), transparent 38%),
    linear-gradient(135deg, rgba(56, 189, 248, .10), transparent 62%),
    var(--note-bg);
}

[data-bs-theme="dark"] .note.note-warning {
  border-color: rgba(251, 191, 36, .38);
  border-left-color: #fbbf24;
  background:
    radial-gradient(circle at 0% 0%, rgba(251, 191, 36, .20), transparent 38%),
    linear-gradient(135deg, rgba(251, 191, 36, .10), transparent 62%),
    var(--note-bg);
}

[data-bs-theme="dark"] .note.note-success {
  border-color: rgba(74, 222, 128, .36);
  border-left-color: #4ade80;
  background:
    radial-gradient(circle at 0% 0%, rgba(74, 222, 128, .20), transparent 38%),
    linear-gradient(135deg, rgba(74, 222, 128, .10), transparent 62%),
    var(--note-bg);
}

.hash-card {
  max-width: 100%;
  overflow-x: auto !important;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  touch-action: pan-x pan-y;
}

.hash-card p {
  width: max-content;
  min-width: 100%;
  max-width: none;
  white-space: nowrap;
  margin-bottom: 12px;
  padding-right: 18px;
}

.hash-card p:last-child {
  margin-bottom: 0;
}

.hash-card::-webkit-scrollbar {
  height: 7px;
}

.hash-card::-webkit-scrollbar-thumb {
  background: rgba(109, 93, 252, .45);
  border-radius: 999px;
}

.hash-card::-webkit-scrollbar-track {
  background: rgba(148, 163, 184, .18);
  border-radius: 999px;
}

.article-card,
.article-content,
.hash-card {
  min-width: 0;
}

/* === Chrome native scrollbar stability fix ===
   Не стилизуем системный scrollbar html/body: в Chrome 109 кастомный
   html::-webkit-scrollbar вместе с overflow !important может подвешивать
   страницу при перетаскивании правого скроллбара мышкой. */
html,
html.has-page-scroll,
html.is-page-home,
html.is-page-home.has-page-scroll,
html.has-page-scroll.is-page-home {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  scrollbar-gutter: stable;
}

body,
html.has-page-scroll body,
html.has-page-scroll body:not(.page-home),
body.page-home,
html.is-page-home body.page-home,
html.has-page-scroll.is-page-home body.page-home {
  overflow-x: hidden !important;
  overflow-y: visible !important;
  min-height: 100vh;
}

.page-shell,
body.page-home .page-shell,
html.is-page-home body.page-home .page-shell {
  height: auto !important;
  min-height: auto !important;
  overflow: visible !important;
}

.social-row { padding-top: 18px; display: flex; justify-content: center; align-items: center; gap: clamp(8px, 1.4vw, 14px); flex-wrap: wrap; }


.social-link {
  width: clamp(40px, 5vw, 52px);
  height: clamp(40px, 5vw, 52px);
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: var(--surface-card);
  border: 1px solid rgba(148,163,184,.24);
  color: var(--bs-body-color);
  box-shadow: 0 14px 34px rgba(15,23,42,.10);
  font-size: clamp(1rem, 1.6vw, 1.24rem);
  transition: .2s ease;
}
.social-link:hover { transform: translateY(-4px); color: #fff; background: linear-gradient(135deg, var(--brand), var(--brand-2)); }