/* Home — hero sign board from the mockup, sections designed in its language. */

.hero { padding: 56px var(--page-pad) 40px; border-bottom: 1px solid var(--color-border); }
.hero__top { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px; align-items: end; }
.hero__h1 { margin-top: 18px; font: 900 var(--fs-h1)/var(--lh-tight) var(--font-display); font-stretch: var(--stretch-display); letter-spacing: -.02em; text-transform: uppercase; }
.hero__h1 em { font-style: normal; color: var(--color-brand); }
.hero__sub { margin-top: 18px; font-size: var(--fs-lead); color: var(--color-text-2); max-width: 40ch; }
.hero__cta { display: flex; gap: 12px; flex-wrap: wrap; }
.hero__board { margin-top: 44px; }
/* signature motion: the board slides in once — below the LCP text, transform only */
.hero__board .sign { animation: slidein .6s var(--ease) both; }
.hero__board .sign:nth-child(2) { animation-delay: .07s; }
.hero__board .sign:nth-child(3) { animation-delay: .14s; }
.hero__board .sign:nth-child(4) { animation-delay: .21s; }
.hero__board .sign:nth-child(5) { animation-delay: .28s; }
@keyframes slidein { from { transform: translateX(-24px); opacity: 0; } }

.safety { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center; font: 500 13px/1.4 var(--font-mono); color: var(--color-muted); }
.safety b { color: var(--color-text); }
.safety .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--color-go); }

.ggrid--row { grid-template-columns: repeat(6, minmax(0, 1fr)); }

/* horizontal shelf (Slots carousel) */
.shelf { position: relative; }
.shelf__track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 5 * 16px) / 6); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 6px 0 4px; }
.shelf__track::-webkit-scrollbar { display: none; }
.shelf__track > * { scroll-snap-align: start; }
.shelf__btn { position: absolute; top: calc(50% - 40px); display: grid; place-items: center; width: 48px; height: 48px; border: 0; border-radius: var(--radius); background: var(--color-brand); color: var(--color-brand-ink); cursor: pointer; transition: opacity var(--dur-base) var(--ease), transform var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease); }
.shelf__btn:hover { background: var(--color-brand-hover); }
.shelf__btn .icon { width: 24px; height: 24px; }
.shelf__btn--prev { left: -14px; } .shelf__btn--next { right: -14px; }
.shelf__btn[disabled] { opacity: 0; pointer-events: none; }

.live-split { display: grid; grid-template-columns: minmax(260px, 1fr) 3fr; gap: 16px; align-items: start; }
.live-split .ggrid--row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.live-split__signs .sign { grid-template-columns: 56px minmax(0, 1fr) 48px; min-height: 64px; }
.live-split__signs .sign__pic { display: none; }
.live-split__signs .sign__name { font-size: 22px; padding-left: 14px; }
.live-split__signs .sign__code { font-size: 18px; }
.live-split__signs .sign__go .icon { width: 22px; height: 22px; }

.tables { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.ttile { position: relative; display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto; gap: 4px 16px; align-items: center; padding: 22px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); text-decoration: none; transition: border-color var(--dur-fast) var(--ease), transform var(--dur-slow) var(--ease); }
.ttile:hover { border-color: var(--color-brand); transform: translateY(-3px); }
.ttile__ic { grid-row: span 2; display: grid; place-items: center; width: 56px; height: 56px; border: 2px solid var(--color-text); border-radius: var(--radius); }
.ttile__ic .icon { width: 28px; height: 28px; }
.ttile__name { font: 900 26px/1 var(--font-display); font-stretch: 78%; text-transform: uppercase; }
.ttile__n { font: 500 12px/1.2 var(--font-mono); color: var(--color-muted); }
.ttile__go { grid-row: 1 / span 2; grid-column: 3; color: var(--color-brand); }
.ttile__go .icon { width: 24px; height: 24px; transition: transform var(--dur-base) var(--ease); }
.ttile:hover .ttile__go .icon { transform: translateX(4px); }

.logos { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 1200px) { .logos { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 520px) { .logos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.logos__item { display: grid; place-items: center; height: 80px; padding: 14px 18px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-fast) var(--ease); }
.logos__item:hover { transform: translateY(-3px); border-color: var(--color-brand); }
.logos__item img { max-height: 44px; width: auto; max-width: 100%; object-fit: contain; filter: grayscale(1) brightness(2.2); transition: filter var(--dur-base) var(--ease); }
.logos__item:hover img { filter: grayscale(1) brightness(2.6); }

@media (max-width: 1200px) {
  .ggrid--row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ggrid--row > :nth-child(n+9) { display: none; }
  .shelf__track { grid-auto-columns: calc((100% - 3 * 16px) / 4); }
  .live-split { grid-template-columns: 1fr; }
  .live-split__signs { grid-template-columns: 1fr 1fr; }
  .tables { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .hero { padding-top: 32px; }
  .hero__top { grid-template-columns: 1fr; }
  .ggrid--row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ggrid--row > :nth-child(n+7) { display: none; }
  .shelf__track { grid-auto-columns: calc((100% - 2 * 12px) / 3); gap: 12px; }
  .shelf__btn { display: none; }
  .live-split .ggrid--row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .live-split .ggrid--row > :nth-child(n+5) { display: none; }
}
@media (max-width: 620px) {
  .ggrid--row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shelf__track { grid-auto-columns: 44%; }
  .live-split__signs { grid-template-columns: 1fr; }
  .tables { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .hero__cta .btn { flex: 1; }
}