/* Главная: яркие акценты у игр и заказа, спокойные пояснения. */
.home { background-image: none; }
.home section { scroll-margin-top: 116px; padding-block: 60px; }
.home .hero { padding-block: 56px 64px; background: radial-gradient(ellipse at 90% 25%, color-mix(in srgb, var(--yellow) 24%, transparent), transparent 55%); }
.home .hero .container { grid-template-columns: 1.08fr 1fr; gap: 48px; }
.home .hero h1 { font-size: clamp(32px, 4.2vw, 50px); }
.home .hero .lead { font-size: 18px; margin-block: 22px 18px; }
.hero-result { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 8px; font-size: 16px; }
.hero-result li { padding-left: 25px; position: relative; }
.hero-result li::before { content: "✓"; position: absolute; left: 0; color: var(--purple); font-weight: 900; }
.hero-offer { display: grid; gap: 3px; }
.hero-offer strong { font-size: 21px; }
.hero-offer > span { color: var(--muted); font-size: 15px; }
.home .hero-actions { margin-block: 18px; gap: 12px; }
.hero-entry { color: var(--muted); font-size: 14px; margin: 0; }
.hero-entry a { color: inherit; text-underline-offset: 3px; }
.hero-example { min-width: 0; background: var(--surface); border: 3px solid var(--line); border-radius: 24px; box-shadow: 7px 7px 0 var(--ink); overflow: hidden; transform: rotate(1deg); }
.example-heading { padding: 15px 20px; font-size: 13px; font-weight: 800; display: flex; align-items: center; gap: 9px; }
.example-dot { width: 10px; height: 10px; background: var(--lime); border: 2px solid var(--line); border-radius: 50%; flex: none; }
.example-cover { display: block; position: relative; background: var(--ink); }
.example-cover img { display: block; width: 100%; height: auto; }
.example-play { position: absolute; left: 16px; bottom: 16px; background: var(--yellow); color: #1b1340; padding: 10px 16px; border: 2px solid var(--line); border-radius: 12px; font-size: 14px; }
.example-cover:hover .example-play { background: var(--lime); }
.example-caption { padding: 22px; }
.example-caption h3 { font-size: 19px; line-height: 1.4; }
.example-caption p { color: var(--muted); font-size: 15px; margin: 10px 0 0; }
.home #how, .home #games, .home #faq { background: var(--surface); }
.home #how .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.home .step { background: transparent; border: 0; border-radius: 0; padding: 0; box-shadow: none; }
.home .step:hover, .home #catalog .card:hover { transform: none; }
.home .step p { font-size: 15px; color: var(--muted); }
.home .step-num { width: 38px; height: 38px; font-size: 17px; border-width: 2px; box-shadow: none; rotate: 0deg; border-radius: 12px; }
.home .deco { display: none; }
.home #catalog .card { border: 1px solid color-mix(in srgb, var(--muted) 28%, transparent); box-shadow: none; padding: 18px; }
.home #catalog .game-cover { height: 110px; font-size: 48px; border: 0; }
.home .faq details { box-shadow: none; border: 1px solid color-mix(in srgb, var(--muted) 28%, transparent); }
.home .promo-card { box-shadow: none; border-width: 1px; }
.home .sticker.cyan { background: transparent; color: var(--text); border: 0; box-shadow: none; rotate: 0deg; padding: 0; }
.catalog-more { margin-top: 30px; text-align: center; }
.catalog-more p { margin: 14px 0 0; color: var(--muted); font-size: 15px; }
.home :focus-visible { outline: 3px solid var(--purple); outline-offset: 5px; }
@media (max-width: 860px) {
  .home .hero .container { grid-template-columns: 1fr; gap: 30px; }
  .hero-example { width: min(100%, 540px); justify-self: center; transform: none; }
  .home #how .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .home section { padding-block: 40px; }
  .home .hero { padding-block: 32px 40px; }
  .home .hero h1 { font-size: 34px; }
  .home .hero-actions { display: grid; }
  .home .hero .lead { font-size: 17px; }
  .home #how .grid { grid-template-columns: 1fr; gap: 20px; }
  .home .step { display: grid; grid-template-columns: 38px 1fr; column-gap: 16px; }
  .home .step-num { grid-row: span 2; margin: 0; }
  .home .step h3 { font-size: 17px; align-self: center; }
  .home .step p { grid-column: 2; margin: 4px 0 0; }
  .home .kid-card { padding: 18px; box-shadow: 3px 3px 0 var(--ink); }
  .home .kid-card h3 { line-height: 1.3; }
  .home .grid { margin-top: 26px; }
  .example-heading { font-size: 12px; padding: 12px 16px; }
  .example-caption { padding: 18px; }
}