/* Recursos da home: cartão neutro, acento fino e ícones Lucide. */
.home-site .feature-intro { max-width: 620px; line-height: 1.7; color: #bfc4b9; margin-top: 1.2rem; }
.home-site { grid-template-columns: minmax(0, 1fr); }
.home-site > * { min-width: 0; max-width: 100%; }
.home-site .features-section,
.home-site .feature-carousel { width: 100%; max-width: 100%; min-width: 0; contain: inline-size; }
.home-site .feature-carousel .feature-grid {
  display: flex; width: 100%; max-width: 100%; min-width: 0; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 8px 2px 24px; margin: 0; scrollbar-width: thin;
  scrollbar-color: #777c64 transparent; overscroll-behavior-x: contain;
}
.home-site .feature-carousel .feature-card {
  display: flex; flex-direction: column; flex: 0 0 calc((100% - 40px) / 3);
  min-width: 0; scroll-snap-align: start; box-sizing: border-box;
}
.home-site .feature-carousel .feature-card > p:not(.feature-number) { line-height: 1.75; margin: .85rem 0 1.2rem; }
.home-site .feature-carousel .feature-card h3 { min-height: 2.6em; line-height: 1.3; margin: 0; }
.home-site .feature-carousel .feature-tags { display: flex; flex-wrap: wrap; margin-bottom: 1rem; }
.home-site .feature-availability { margin-top: auto; padding-top: 1rem; color: var(--feature-accent); font-size: .78rem; font-weight: 600; }
.feature-card-top { display: flex; justify-content: space-between; align-items: center; }
.feature-index { font-size: .75rem; font-variant-numeric: tabular-nums; opacity: .45; }
.home-site .feature-carousel .feature-number { font-size: .65rem; letter-spacing: .08em; text-transform: uppercase; margin: 1.5rem 0 .75rem; }
.home-site .feature-moderation { --feature-accent: #8eb5ef; --feature-tint: #8eb5ef18; }
.home-site .feature-welcome { --feature-accent: #7ddec8; --feature-tint: #7ddec818; }
.home-site .feature-stickers { --feature-accent: #c8a0ef; --feature-tint: #c8a0ef18; }
.feature-carousel-footer, .feature-carousel-controls { display: flex; align-items: center; gap: 12px; }
.feature-carousel-footer { justify-content: space-between; padding-top: 16px; color: #bfc4b9; font-size: .8rem; }
.feature-carousel-controls[hidden] { display: none; }
.feature-position { min-width: 66px; font-variant-numeric: tabular-nums; }
.home-site .feature-carousel-controls button { width: 44px; height: 44px; padding: 0; border: 1px solid #737967; border-radius: 50%; background: transparent; color: #f6f1e5; font-size: 1.25rem; cursor: pointer; }
.home-site .feature-carousel-controls button:hover:not(:disabled) { background: #f6d653; color: #20251d; border-color: #f6d653; }
.home-site .feature-carousel-controls button:disabled { opacity: .3; cursor: default; }
.feature-carousel :focus-visible { outline: 2px solid var(--feature-accent, #b59620); outline-offset: 3px; }
html[data-theme=light] .home-site .feature-moderation { --feature-accent: #35629b; --feature-tint: #35629b12; }
html[data-theme=light] .home-site .feature-welcome { --feature-accent: #1b6a5c; --feature-tint: #1b6a5c12; }
html[data-theme=light] .home-site .feature-stickers { --feature-accent: #7e4ca0; --feature-tint: #7e4ca012; }
html[data-theme=light] .home-site .feature-intro,
html[data-theme=light] .feature-carousel-footer { color: #5c6256; }
html[data-theme=light] .home-site .feature-carousel-controls button { color: #24271f; border-color: #b6b9ad; }
.home-site .feature-moderation .feature-lucide,
.home-site .feature-welcome .feature-lucide,
.home-site .feature-stickers .feature-lucide { animation: profileNod 6s ease-in-out infinite; }
.home-site .feature-stickers .feature-lucide { animation-delay: 2s; }
@media (max-width: 1000px) { .home-site .feature-carousel .feature-card { flex-basis: calc((100% - 20px) / 2); } }
@media (max-width: 600px) {
  .home-site .feature-carousel .feature-card { flex-basis: 88%; }
  .feature-carousel-footer { align-items: flex-start; gap: 20px; }
  .feature-carousel-footer > span { max-width: 145px; line-height: 1.5; }
}
@media (prefers-reduced-motion: reduce) { .home-site .feature-carousel .feature-lucide { animation: none !important; } }
.home-site .feature-visual .feature-lucide {
  width: 34px;
  height: 34px;
  color: var(--feature-accent);
  transition: transform .25s ease;
}
.home-site .feature-visual { border-radius: 14px; }
.feature-icon-person { animation: profileNod 6s ease-in-out infinite; }
.feature-icon-buttons { animation: buttonTap 5s ease-in-out infinite; }
.feature-icon-facets { animation: facetLight 7s ease-in-out infinite; }
.home-site .feature-card:is(:hover, :focus-within) .feature-lucide { transform: translateY(-2px); }
@keyframes profileNod { 0%, 75%, 100% { transform: translateY(0); } 85% { transform: translateY(-.6px); } }
@keyframes buttonTap { 0%, 70%, 90%, 100% { opacity: 1; } 76%, 86% { opacity: .35; } }
@keyframes facetLight { 0%, 65%, 100% { opacity: 1; } 80% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) {
  .home-site .feature-card, .home-site .feature-lucide { transition: none !important; }
  .feature-icon-person, .feature-icon-buttons, .feature-icon-facets { animation: none !important; }
}
.home-site .feature-grid { align-items: stretch; }

.home-site .feature-profile { --feature-accent: #e07a72; --feature-tint: rgba(224, 122, 114, .16); }
.home-site .feature-games { --feature-accent: #7ddec8; --feature-tint: rgba(125, 222, 200, .14); }
.home-site .feature-economy { --feature-accent: #f6d653; --feature-tint: rgba(246, 214, 83, .14); }

.home-site .feature-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 0;
  padding: 1.35rem 1.35rem 1.2rem;
  color: #f6f1e5 !important;
  border: 1px solid rgba(246, 241, 229, .12) !important;
  border-radius: 16px;
  background: #1c201b !important;
  box-shadow: 0 16px 36px rgba(0, 0, 0, .16);
  transition: transform .28s cubic-bezier(.2, .85, .25, 1), border-color .28s, box-shadow .28s !important;
}

.home-site .feature-card::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 3px;
  background: var(--feature-accent);
}

.home-site .feature-card::after { content: none; }

.home-site .feature-card:hover {
  transform: translateY(-4px) !important;
  border-color: color-mix(in srgb, var(--feature-accent) 55%, transparent) !important;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .24) !important;
}

.home-site .feature-card h3 {
  color: #f7f3ea !important;
  font-size: 1.28rem;
  letter-spacing: -.02em;
}

.home-site .feature-card p:not(.feature-number) {
  max-width: 36rem;
  color: rgba(246, 241, 229, .68) !important;
}

.home-site .feature-card .feature-number {
  margin: 1.15rem 0 .4rem;
  color: var(--feature-accent) !important;
  font-weight: 700;
  letter-spacing: .16em;
}

.home-site .feature-card a {
  margin-top: auto;
  padding-top: 1rem;
  color: var(--feature-accent) !important;
  letter-spacing: .01em;
}

.home-site .feature-card a:hover { color: #fff6c8 !important; }

.home-site .feature-tags { gap: .4rem; }
.home-site .feature-tags span {
  padding: .32rem .55rem;
  border: 1px solid rgba(246, 241, 229, .14) !important;
  border-radius: 7px;
  background: rgba(255, 255, 255, .03) !important;
  color: rgba(246, 241, 229, .82) !important;
  font-weight: 600;
}

.feature-visual {
  display: grid;
  width: 76px;
  height: 76px;
  flex: 0 0 76px;
  place-items: center;
  margin: 0;
  border-radius: 18px;
  background: var(--feature-tint);
  filter: none;
}

.feature-visual svg {
  display: block;
  width: 54px;
  height: 54px;
  overflow: visible;
}

.mark { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.mark-fill, .mark-status, .mark-ping, .mark-status-ring { stroke: none; }
.mark-stroke, .mark-ring, .pad-body, .gem-stroke, .gem-facet, .coin-face, .coin-mark { stroke-width: 2; }
.mark-status-ring { fill: var(--mark-paper, #1c201b); }

.feature-visual-profile .mark-fill { fill: #e07a72; opacity: .18; }
.feature-visual-profile .mark-stroke,
.feature-visual-profile .mark-ring { stroke: #e07a72; }
.feature-visual-profile .mark-status,
.feature-visual-profile .mark-ping { fill: #3cba6a; }
.feature-visual-profile .mark-person {
  transform-origin: 22px 24px;
  animation: markBreathe 3.2s ease-in-out infinite;
}
.feature-visual-profile .mark-ping {
  transform-origin: 33.5px 33px;
  animation: markPing 2.4s ease-out infinite;
}

.feature-visual-games .pad-body { stroke: #2f9d8a; fill: rgba(47, 157, 138, .16); }
.feature-visual-games .pad-dpad { fill: #1f7d6e; stroke: none; }
.feature-visual-games .pad-btn { stroke: none; transform-box: fill-box; transform-origin: center; animation: padPress 2.6s ease-in-out infinite; }
.feature-visual-games .pad-btn-a { fill: #f0c43a; }
.feature-visual-games .pad-btn-b { fill: #e15b52; animation-delay: .22s; }
.feature-visual-games .pad-btn-c { fill: #6aa7ff; animation-delay: .44s; }

.feature-visual-economy .gem-fill { fill: #f6d653; opacity: .2; stroke: none; }
.feature-visual-economy .gem-stroke,
.feature-visual-economy .gem-facet,
.feature-visual-economy .coin-face,
.feature-visual-economy .coin-mark { stroke: #e2c15a; }
.feature-visual-economy .coin-face { fill: #f6d653; }
.feature-visual-economy .coin {
  transform-box: fill-box;
  transform-origin: center;
  animation: coinTurn 3.4s ease-in-out infinite;
}

html[data-theme=light] .home-site .feature-card { --mark-paper: #fffdf8; }
html[data-theme=light] .feature-visual-profile .mark-stroke,
html[data-theme=light] .feature-visual-profile .mark-ring { stroke: #9d3a34; }
html[data-theme=light] .feature-visual-profile .mark-fill { fill: #9d3a34; }
html[data-theme=light] .feature-visual-games .pad-body { stroke: #1b6a5c; fill: rgba(27, 106, 92, .12); }
html[data-theme=light] .feature-visual-games .pad-dpad { fill: #1b6a5c; }
html[data-theme=light] .feature-visual-economy .gem-stroke,
html[data-theme=light] .feature-visual-economy .gem-facet,
html[data-theme=light] .feature-visual-economy .coin-face,
html[data-theme=light] .feature-visual-economy .coin-mark { stroke: #8a6d12; }
html[data-theme=light] .feature-visual-economy .gem-fill { fill: #8a6d12; }
html[data-theme=light] .feature-visual-economy .coin-face { fill: #f3d36a; }

.home-site .feature-card:hover .mark-person { animation-duration: 1.6s; }
.home-site .feature-card:hover .pad-btn { animation-duration: 1.15s; }
.home-site .feature-card:hover .coin { animation-duration: 1.6s; }

@keyframes markBreathe {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-1.4px); }
}
@keyframes markPing {
  0% { transform: scale(1); opacity: .5; }
  100% { transform: scale(1.85); opacity: 0; }
}
@keyframes padPress {
  0%, 100% { opacity: .78; transform: scale(1); }
  16%, 32% { opacity: 1; transform: scale(1.16); }
  46% { opacity: .78; transform: scale(1); }
}
@keyframes coinTurn {
  0%, 68%, 100% { transform: scaleX(1); }
  76%, 84% { transform: scaleX(.16); }
}

@media (prefers-reduced-motion: reduce) {
  .mark-person, .mark-ping, .pad-btn, .coin { animation: none !important; }
  .pad-btn { opacity: 1; }
}

html[data-theme=light] .home-site .feature-profile { --feature-accent: #9d3a34; --feature-tint: rgba(157, 58, 52, .1); }
html[data-theme=light] .home-site .feature-games { --feature-accent: #1b6a5c; --feature-tint: rgba(27, 106, 92, .1); }
html[data-theme=light] .home-site .feature-economy { --feature-accent: #8a6d12; --feature-tint: rgba(138, 109, 18, .12); }

html[data-theme=light] .home-site .feature-card {
  border-color: rgba(36, 39, 31, .12) !important;
  background: #fffdf8 !important;
  color: #24271f !important;
  box-shadow: 0 14px 32px rgba(54, 48, 32, .07) !important;
}

html[data-theme=light] .home-site .feature-card:hover {
  border-color: color-mix(in srgb, var(--feature-accent) 38%, transparent) !important;
  box-shadow: 0 16px 34px rgba(54, 48, 32, .12) !important;
}

html[data-theme=light] .home-site .feature-card h3 { color: #24271f !important; }
html[data-theme=light] .home-site .feature-card p:not(.feature-number) { color: #5c6256 !important; }
html[data-theme=light] .home-site .feature-card a { color: var(--feature-accent) !important; }
html[data-theme=light] .home-site .feature-card a:hover { color: #24271f !important; }
html[data-theme=light] .home-site .feature-tags span {
  border-color: rgba(36, 39, 31, .12) !important;
  background: rgba(36, 39, 31, .03) !important;
  color: #3d4338 !important;
}

@media (max-width: 600px) {
  .home-site .feature-card { padding: 1.15rem 1.1rem 1.05rem; }
  .feature-visual { width: 68px; height: 68px; }
  .feature-visual svg { width: 46px; height: 46px; }
}