@layer components {
  #home-hero > .container-x { position: relative; }
  .home-bonus-action { position: absolute; top: 32px; right: 24px; }
  .home-bonus-trigger { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border: 1px solid #ffd2a4; border-radius: 50%; background: #fff; color: #0f1f3d; font: inherit; font-size: 25px; cursor: pointer; box-shadow: 0 4px 20px #ff8a3940; transition: border-color .2s, box-shadow .2s; }
  .home-bonus-trigger:hover { border-color: #0f1f3d; box-shadow: 0 6px 20px #0f1f3d14; }
  .home-bonus-count { position: absolute; right: 2px; top: 2px; width: 9px; height: 9px; border: 2px solid #fff; border-radius: 50%; background: #fff09a; }
  .home-bonus-dialog { position: fixed; inset: 170px max(24px, calc((100vw - 1200px) / 2)) auto auto; margin: 0; width: min(255px, calc(100% - 32px)); max-height: calc(100dvh - 190px); overflow-y: auto; padding: 0; border: 1px solid #d7c2ec; border-radius: 16px; background: #f5effb; color: #0f1f3d; box-shadow: 0 24px 60px #0f1f3d30; }
  .home-bonus-dialog::backdrop { background: transparent; }
  .home-bonus-header { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 6px; padding: 8px; background: linear-gradient(100deg, #74489b, #9868b6); color: #fff; }
  .home-bonus-eyebrow { display: none; }
  .home-bonus-header h2 { margin: 0; font-size: 13px; font-weight: 800; line-height: 1.25; }
  .home-bonus-close { display: grid; place-items: center; width: 26px; height: 26px; border: 0; border-radius: 8px; background: #ffffff20; color: #fff; font-size: 26px; line-height: 1; cursor: pointer; }
  .home-bonus-list { display: grid; gap: 6px; margin: 0; padding: 0 6px; list-style: none; }
  .home-bonus-card { display: flex; align-items: center; gap: 6px; padding: 8px; border: 1px solid #e3e8ef; border-radius: 14px; background: #f8fafc; }
  .home-bonus-card img { width: 28px; height: 28px; flex-shrink: 0; object-fit: contain; border-radius: 10px; }
  .home-bonus-offer { flex: 1; }
  .home-bonus-offer h3 { margin: 0 0 2px; font-size: 12px; font-weight: 750; }
  .home-bonus-offer > span { display: block; font-size: 11px; color: #68758b; }
  .home-bonus-offer strong { display: block; font-size: 15px; font-weight: 800; white-space: nowrap; color: #7844a8; }
  .home-bonus-links { display: grid; gap: 5px; flex-shrink: 0; text-align: center; }
  .home-bonus-claim { padding: 8px 5px; border: 1px solid #d69b57; border-radius: 9px; background: linear-gradient(110deg, #ffe9c9, #edc894); color: #62482d; font-size: 10px; font-weight: 700; text-decoration: none; }
  .home-bonus-claim:hover { background: #edc894; }
  .home-bonus-terms { font-size: 9px; color: #68758b; text-underline-offset: 3px; }
  .home-bonus-all { display: block; padding: 10px 8px 6px; text-align: center; color: #7844a8; font-size: 12px; font-weight: 650; text-decoration: none; }
  .home-bonus-note { margin: 0; padding: 0 8px 8px; font-size: 10px; line-height: 1.6; text-align: center; color: #80728e; }
  .home-bonus-trigger:focus-visible, .home-bonus-dialog :focus-visible { outline: 2px solid #3a6fd8; outline-offset: 3px; }
  @media (max-width: 1100px) {
    .home-bonus-action { position: static; display: flex; justify-content: flex-end; margin-bottom: 16px; }
  }
  @media (max-width: 480px) {
    .home-bonus-dialog { inset: 90px 16px auto auto; max-height: calc(100dvh - 110px); border-radius: 16px; }
  }
}