/* home — "Daylight" hero: huge headline, live numbers, a rising stair of real game screens */
.hero { position: relative; padding: 44px 0 40px; }
.h-top { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: start; }
.hero h1 { grid-column: 1 / -1; grid-row: 1; margin-left: -.05em; }
.hero h1 .l { display: block; }
.live { grid-column: 9 / -1; grid-row: 1; margin-top: 18px; border-top: 1px solid var(--ink); padding-top: 14px; }
.live-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 14px; font-weight: 500; }
.live-h > span:first-child { display: flex; align-items: center; gap: 10px; }
.live-h .muted { font-weight: 400; }
.stats { display: grid; grid-template-columns: 1fr 1.4fr; gap: 12px; margin-top: 18px; }
.stat b { display: block; font: 500 44px/1 var(--mono); letter-spacing: -.04em; }
.stat span { display: block; margin-top: 8px; font-size: 14px; color: var(--muted); }
.h-bot { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; margin-top: 40px; }
.h-copy { grid-column: 1 / 5; display: flex; flex-direction: column; justify-content: space-between; gap: 36px; padding-top: 6px; }
.ctas { display: flex; gap: 10px; margin-top: 32px; flex-wrap: wrap; }
.small { font-size: 13px; }

/* the stage: five dark slabs climbing to the right like a chart; the front one plays live */
.stage { grid-column: 5 / -1; position: relative; height: 400px; }
.slab { position: absolute; width: 190px; padding: 7px; border-radius: 36px; background: var(--slab); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07), var(--shadow-lg);
  transition: transform .5s var(--ease); }
.slab:hover { transform: translateY(-8px); }
.slab .scr { position: relative; aspect-ratio: 9 / 16; border-radius: 29px; overflow: hidden; background: #000; }
.slab .scr img, .slab .scr iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; }
.slab .scr img { opacity: 0; transition: opacity .6s; }
.slab .scr img.ok { opacity: 1; }
.slab .scr iframe { pointer-events: none; }
.slab .tag { position: absolute; left: 50%; bottom: -34px; transform: translateX(-50%); font-size: 13px; font-weight: 500; white-space: nowrap; color: var(--ink2); opacity: 0; transition: opacity .3s; }
.slab:hover .tag, .slab:focus-visible .tag { opacity: 1; }
.s1 { left: 0; top: 70px; z-index: 1; } .s2 { left: 17.5%; top: 30px; z-index: 2; } .s3 { left: 35%; top: -10px; z-index: 3; } .s4 { left: 52.5%; top: -50px; z-index: 4; } .s5 { left: 70%; top: -90px; z-index: 5; }
.toast-live { position: absolute; z-index: 6; right: 0; top: 300px; display: flex; align-items: center; gap: 12px; max-width: 360px; background: var(--card); border-radius: 16px; padding: 12px 16px 12px 14px;
  box-shadow: 0 1px 0 rgba(20, 18, 16, .04), 0 18px 40px -14px rgba(60, 38, 16, .32); font-size: 15px; transition: opacity .35s, transform .35s var(--ease); }
.toast-live.out { opacity: 0; transform: translateY(6px); }
.toast-live .av { width: 34px; height: 34px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; font: 600 13px/1 var(--mono); flex: none; overflow: hidden; }
.toast-live .av img { width: 100%; height: 100%; object-fit: cover; }
.toast-live b { font-weight: 600; }
.toast-live .t2 { display: block; font-size: 13px; color: var(--muted); margin-top: 1px; }
.toast-live .tx { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* arcade head */
.arc-r { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; justify-content: flex-end; }
.more { font-size: 15px; font-weight: 550; display: inline-flex; gap: 10px; align-items: center; }
.more .arr { font-family: var(--mono); opacity: .7; }

/* how it works */
.how { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
.how h2 { grid-column: 1 / 5; font-size: clamp(40px, 4.2vw, 60px); }
.steps { grid-column: 5 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 24px; }
.step { border-top: 1px solid var(--ink); padding-top: 18px; }
.step .n { font: 400 14px/1 var(--mono); color: var(--muted); }
.step h3 { font-size: 30px; letter-spacing: -.035em; line-height: 1.1; margin-top: 22px; font-weight: 650; }
.step p { font-size: 16px; color: var(--muted); margin: 10px 0 0; max-width: 270px; }

/* daily + pool */
.duo { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 24px; }
.duo .tile { padding: 30px; }
.duo .h3 { margin: 14px 0 8px; }
.duo p { margin: 0; }
.d-row { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-top: 22px; flex-wrap: wrap; }
.daily-empty { margin: 18px 0 0; font-size: 14px; color: var(--muted); }
.daily .board { margin-top: 18px; }

@media (max-width: 1180px) { .stage { transform: scale(.86); transform-origin: left top; } }
@media (max-width: 960px) {
  .h-top, .h-bot { display: block; }
  .live { margin-top: 28px; max-width: 520px; }
  .h-bot { margin-top: 28px; }
  .h-copy { gap: 26px; }
  .stage { transform: none; height: 470px; margin-top: 56px; }
  .how { display: block; }
  .steps { margin-top: 28px; }
  .duo { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .hero { padding-top: 24px; }
  .stat b { font-size: 34px; }
  .ctas { flex-direction: column; margin-top: 24px; }
  .ctas .btn { width: 100%; }
  .stage { height: calc(55vw + 120px); margin: 36px -16px 0; }
  .slab { width: 31vw; padding: 5px; border-radius: 22px; }
  .slab .scr { border-radius: 17px; }
  .slab .tag { display: none; }
  .s1 { left: 1vw; top: 76px; } .s2 { left: 18vw; top: 57px; } .s3 { left: 35vw; top: 38px; } .s4 { left: 52vw; top: 19px; } .s5 { left: 68vw; top: 0; }
  .toast-live { right: 16px; left: 16px; top: auto; bottom: -10px; max-width: none; font-size: 14px; }
  .steps { display: block; }
  .step { display: grid; grid-template-columns: 44px 1fr; padding: 16px 0 22px; }
  .step .n { padding-top: 8px; }
  .step h3 { margin-top: 0; font-size: 26px; }
  .step p { grid-column: 2; max-width: none; margin-top: 6px; }
  .duo .tile { padding: 22px; }
  .arc-r { justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) { .slab, .toast-live { transition: none; } .slab:hover { transform: none; } }