/* =====================================================================
   SKINUP — fair-drop.css
   Подключать ПОСЛЕ style.css. 1) плашка бренда в hero  2) «Честный дроп»
   как кликабельный пункт  3) окно «Скрытые механики CS2-кейсов»
   ===================================================================== */

/* ---------- 1. Плашка бренда: прозрачная, серая, логотип = размер текста ---------- */
.hero .hero-brandbar{
  --bb-size:12px;                       /* общий размер: и текст, и логотип */
  gap:10px;padding:10px 16px;
  background:transparent;backdrop-filter:none;box-shadow:none;
  border:1px solid rgba(255,255,255,.14);
  color:#9a9ca8;font-size:var(--bb-size);
}
.hero .hero-brandbar img{
  width:auto;height:1.2em;              /* логотип по высоте текста */
  filter:grayscale(1) brightness(.78);  /* убираем фиолетовый, делаем серым */
  opacity:.95;
}
.hero .hero-brandbar b,
.hero .hero-brandbar span{
  color:#9a9ca8;font:600 var(--bb-size)/1 Inter,sans-serif;letter-spacing:.16em;text-transform:uppercase;
}
.hero .hero-brandbar i{height:1.2em;background:rgba(255,255,255,.16)}

/* ---------- 2. Кликабельный «Честный дроп» ---------- */
/* .hero-pitch имеет pointer-events:none — включаем клики только для этого пункта */
.hero-pitch__feats li.fd-link{pointer-events:auto;cursor:pointer;border-radius:12px;transition:background .2s}
.hero-pitch__feats li.fd-link:hover{background:rgba(129,108,255,.1)}
.hero-pitch__feats li.fd-link:focus-visible{outline:2px solid #8e7bff;outline-offset:4px}
.fd-link .hero-pitch__ico{animation:fdPulse 2.6s ease-out infinite;transition:background .2s,border-color .2s}
.fd-link:hover .hero-pitch__ico{background:#2a1f55;border-color:#a78bfa}
.fd-link b{border-bottom:1px dashed rgba(255,255,255,.45);padding-bottom:1px;transition:border-color .2s}
.fd-link:hover b{border-bottom-color:#a78bfa}
.fd-link small::after{content:" ›";color:#a78bfa;font-weight:700}
@keyframes fdPulse{0%{box-shadow:0 0 16px #7c3aed44,0 0 0 0 rgba(124,58,237,.55)}70%,100%{box-shadow:0 0 16px #7c3aed44,0 0 0 11px rgba(124,58,237,0)}}
@media(prefers-reduced-motion:reduce){.fd-link .hero-pitch__ico{animation:none}}

/* ---------- 3. Окно ---------- */
.fd-ov{position:fixed;inset:0;z-index:10050;display:none;align-items:center;justify-content:center;padding:16px;background:#05040cc7;backdrop-filter:blur(6px)}
.fd-ov.is-on{display:flex;animation:fdIn .18s ease both}
@keyframes fdIn{from{opacity:0}to{opacity:1}}
.fd-modal{display:flex;flex-direction:column;overflow:hidden;width:min(1000px,100%);height:min(700px,100%);border:1px solid #2a3342;border-radius:22px;
  background:linear-gradient(180deg,#131a26,#0b1017);box-shadow:0 30px 90px #000c,0 0 50px #7c68ff1a,inset 0 1px #ffffff0a}
.fd-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 22px;border-bottom:1px solid #1e2835}
.fd-head h2{margin:2px 0 0;color:#f3f5fb;font:800 21px 'Space Grotesk',sans-serif;letter-spacing:-.03em}
.fd-body{display:flex;flex:1;min-height:0}
.fd-tabs{display:flex;flex-direction:column;flex:0 0 260px;gap:4px;overflow:auto;padding:12px;border-right:1px solid #1e2835}
.fd-tab{padding:12px 13px;border:1px solid transparent;border-radius:11px;background:none;color:#7d899d;font:700 13px/1.3 Inter,sans-serif;text-align:left;transition:.18s}
.fd-tab:hover{background:#111827;color:#fff}
.fd-tab.is-on{border-color:#4d3d83;background:linear-gradient(135deg,#292244,#1a1a2b);color:#fff}
.fd-content{flex:1;min-width:0;overflow:auto;padding:26px 30px 34px;color:#c2cadb;font-size:15px;line-height:1.7;scrollbar-width:thin;scrollbar-color:#30384a transparent}
.fd-content h3{margin:0 0 8px;color:#f3f5fb;font:800 25px/1.2 'Space Grotesk',sans-serif;letter-spacing:-.03em}
.fd-content h4{margin:24px 0 6px;color:#f3f5fb;font:700 16px 'Space Grotesk',sans-serif}
.fd-content p{margin:0 0 12px}
.fd-content ul{margin:0 0 12px;padding-left:20px}
.fd-content li{margin:4px 0}
.fd-content .fd-q{margin:16px 0;padding:4px 0 4px 16px;border-left:3px solid #816cff;color:#fff;font-weight:600}
.fd-content b{color:#fff}
@media(max-width:760px){
  .fd-modal{height:100%;border-radius:18px}
  .fd-body{flex-direction:column}
  .fd-tabs{flex:0 0 auto;flex-direction:row;border-right:0;border-bottom:1px solid #1e2835}
  .fd-tab{flex:0 0 auto;white-space:nowrap}
  .fd-content{padding:20px 18px 30px}
}