.home-page {
    --home-ink: #17324d;
    --home-paper: #fffaf0;
    --home-gold: #d9a05b;
    --home-red: #a35454;
    display: grid;
    gap: clamp(1.5rem, 4vw, 3.5rem);
    margin-inline: auto;
    max-width: 1320px;
    overflow: hidden;
    padding: .5rem clamp(.25rem, 2vw, 1.5rem) 2rem;
}

.home-hero {
    background: radial-gradient(circle at 18% 16%, rgba(255,255,255,.14) 0 2px, transparent 3px), linear-gradient(135deg, #123e6b, var(--bs-primary) 55%, #2879b8);
    background-size: 34px 34px, auto;
    border-radius: clamp(1rem, 2vw, 1.75rem);
    box-shadow: 0 22px 50px rgba(28,52,74,.2);
    color: white;
    display: grid;
    grid-template-columns: minmax(0,.9fr) minmax(340px,1.1fr);
    grid-template-rows: 1fr auto;
    min-height: min(690px,75vh);
    overflow: hidden;
    padding: clamp(2rem,6vw,5.5rem);
    position: relative;
}

.home-hero::after { background: linear-gradient(90deg,rgba(10,36,61,.4),transparent 55%); content: ""; inset: 0; pointer-events: none; position: absolute; }
.home-hero__copy, .home-hero__actions { align-self: center; position: relative; z-index: 2; }
.home-hero__copy h1, .home-hero__copy h2 { color: white; font-size: clamp(2.6rem,6vw,5.8rem); line-height: .95; margin-bottom: 1.5rem; text-wrap: balance; }
.home-hero__copy p { font-size: clamp(1.1rem,1.5vw,1.4rem); max-width: 36rem; }
.home-hero__copy ul { display: grid; gap: .55rem; list-style: none; margin: 1.75rem 0 0; padding: 0; }
.home-hero__copy li { align-items: center; display: flex; font-weight: 600; gap: .6rem; }
.home-hero__copy .text-muted { color: rgba(255,255,255,.82) !important; }
.home-hero__copy .text-primary { color: rgba(255,255,255,.9) !important; }
.home-stat-icon { align-items: center; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.22); border-radius: .55rem; display: inline-flex; flex: 0 0 2rem; height: 2rem; justify-content: center; text-shadow: 0 2px 5px rgba(0,0,0,.2); }
.home-hero__actions { align-items: center; display: flex; flex-wrap: wrap; gap: .75rem; grid-column: 1; margin-top: 1.5rem; }
.home-hero__actions .btn { align-items: center; border-radius: 999px; display: inline-flex; gap: .6rem; padding-inline: 1.4rem; }
.home-hero__actions .btn-danger { box-shadow: 0 10px 25px rgba(80,20,20,.3); }
.home-hero__actions .btn-light { background: rgba(255,255,255,.94); color: var(--bs-primary); }

.home-hero__games { align-self: center; grid-column: 2; grid-row: 1/span 2; justify-self: end; max-width: 580px; perspective: 1000px; position: relative; width: 90%; z-index: 2; }
.home-hero__image-frame { background: #f8ead1; border: 8px solid rgba(255,255,255,.88); border-radius: 1rem; box-shadow: 0 28px 45px rgba(6,21,37,.38); display: block; overflow: hidden; transform: rotateY(-7deg) rotateZ(2deg); transition: transform 250ms ease,box-shadow 250ms ease; }
.home-hero__image-frame img { aspect-ratio: 1.03; display: block; height: auto; object-fit: cover; width: 100%; }
.home-hero__games:hover .home-hero__image-frame { box-shadow: 0 34px 55px rgba(6,21,37,.45); transform: rotateY(-3deg) rotateZ(1deg) translateY(-5px); }
.home-floating-card { background: white; border: 5px solid white; border-radius: .8rem; box-shadow: 0 15px 28px rgba(6,21,37,.38); display: block; position: absolute; }
.home-floating-card .cover150 { display: block; }
.home-floating-card--left { bottom: -3rem; left: -3.5rem; transform: rotate(-8deg); }
.home-floating-card--right { right: -2.5rem; top: -2.25rem; transform: rotate(7deg); }

.home-feature { align-items: center; display: grid; gap: clamp(2rem,7vw,6rem); grid-template-columns: repeat(2,minmax(0,1fr)); padding: clamp(2rem,5vw,4.5rem); }
.home-feature__copy h2, .home-community__copy h2 { color: var(--home-ink); font-size: clamp(2rem,4vw,3.75rem); line-height: 1; margin-bottom: 1.25rem; text-wrap: balance; }
.home-feature__copy p, .home-community__copy p { max-width: 44rem; }
.home-feature__copy li, .home-community__copy li { margin-bottom: .45rem; }
.home-feature--free { background: var(--home-ink); border-radius: 1.5rem; color: white; }
.home-feature--free h2, .home-feature--free a { color: white; }
.home-seals { display: grid; gap: clamp(.8rem,2vw,1.5rem); grid-template-columns: repeat(2,minmax(90px,150px)); justify-content: center; }
.home-seals span { align-items: center; aspect-ratio: 1; background: #f0d8b0; border: 4px solid #fff8e8; border-radius: 50%; box-shadow: inset 0 0 0 5px var(--home-gold),0 14px 25px rgba(0,0,0,.22); color: var(--home-ink); display: flex; font-size: clamp(2.2rem,5vw,4.2rem); justify-content: center; position: relative; }
.home-seals span:nth-child(2) { transform: rotate(5deg); } .home-seals span:nth-child(3) { transform: rotate(-4deg); }
.home-seals .bi-slash-lg { color: var(--home-red); position: absolute; }
.home-feature--pace { background: rgba(255,250,240,.72); border: 1px solid rgba(217,160,91,.38); border-radius: 1.5rem; }

.home-timeline { align-items: center; display: flex; justify-content: center; margin-bottom: 2.25rem; }
.home-timeline::before { background: var(--home-gold); content: ""; height: 4px; position: absolute; width: min(28vw,330px); }
.home-timeline span { align-items: center; background: var(--bs-primary); border: 5px solid var(--home-paper); border-radius: 50%; box-shadow: 0 6px 15px rgba(23,50,77,.2); color: white; display: flex; font-size: 1.5rem; height: 64px; justify-content: center; margin-inline: clamp(.7rem,3vw,2.5rem); position: relative; width: 64px; }
.home-game-pair { display: flex; justify-content: center; min-height: 175px; position: relative; }
.home-game-pair>span { border: 4px solid white; transition: transform 180ms ease; }
.home-game-cover { border: 4px solid white; border-radius: .5rem; box-shadow: 0 2px 10px rgba(0,0,0,.1); display: block; height: 150px; object-fit: contain; transition: transform 180ms ease; width: auto; }
.home-game-pair>:first-child { transform: rotate(-5deg) translateX(12px); } .home-game-pair>:last-child { transform: rotate(5deg) translateX(-12px) translateY(10px); }
.home-game-pair:hover>:first-child { transform: rotate(-7deg) translateX(5px) translateY(-8px); } .home-game-pair:hover>:last-child { transform: rotate(7deg) translateX(-5px) translateY(2px); }
.home-feature--parallel { padding-block: clamp(1rem,3vw,2.5rem); }
.home-feature__visual--cards { background-image: radial-gradient(circle,rgba(26,92,158,.18) 2px,transparent 2px); background-size: 22px 22px; border-radius: 50%; padding: 3.5rem 1rem; }

.home-community { align-items: center; background: linear-gradient(135deg,#ead0a4,#f7ead4); border-radius: 1.5rem; display: grid; gap: 2rem; grid-template-columns: .4fr 1fr 180px; overflow: hidden; padding: clamp(2rem,5vw,4rem); }
.home-community__tokens { display: grid; gap: 1rem; justify-content: center; }
.home-community__tokens span { align-items: center; background: var(--bs-primary); border-radius: 30% 30% 42% 42%; box-shadow: 0 8px 15px rgba(23,50,77,.2); color: white; display: flex; font-size: 2rem; height: 70px; justify-content: center; transform: rotate(-5deg); width: 70px; }
.home-community__tokens span:nth-child(2) { background: var(--home-red); transform: rotate(6deg); } .home-community__tokens span:nth-child(3) { background: #6b8e6d; transform: rotate(-2deg); }
.home-community__game { filter: drop-shadow(0 18px 20px rgba(48,34,18,.25)); transform: rotate(5deg); }
.home-final-cta { align-items: center; display: flex; gap: 2rem; justify-content: center; padding: clamp(2rem,4vw,4rem) 1rem; text-align: center; }
.home-final-cta h2 { color: var(--bs-primary); font-size: clamp(3rem,7vw,6rem); line-height: 1; margin-bottom: 1rem; }
.home-final-cta .btn { border-radius: 999px; }

@media (max-width:991.98px) {
    .home-hero { grid-template-columns: 1fr; grid-template-rows: auto auto auto; }
    .home-hero__copy { grid-column: 1; grid-row: 1; } .home-hero__actions { grid-row: 2; }
    .home-hero__games { grid-column: 1; grid-row: 3; justify-self: center; margin-top: 4rem; width: min(85%,580px); }
    .home-community { grid-template-columns: 120px 1fr; } .home-community__game { display: none; }
}

@media (max-width:767.98px) {
    .home-page { gap: 1.25rem; } .home-hero { min-height: auto; padding: 2rem 1.25rem 4rem; }
    .home-hero__copy h1, .home-hero__copy h2 { font-size: clamp(2.4rem,14vw,4.4rem); }
    .home-hero__games { width: 88%; } .home-floating-card { display: none; }
    .home-feature { gap: 2.5rem; grid-template-columns: 1fr; padding: 2rem 1.25rem; }
    .home-feature--free .home-seals, .home-feature--parallel .home-feature__visual { order: 2; }
    .home-feature--parallel .home-feature__copy { order: 1; }
    .home-seals { grid-template-columns: repeat(4,minmax(58px,90px)); } .home-seals span { border-width: 2px; font-size: 2rem; }
    .home-community { grid-template-columns: 1fr; padding: 2rem 1.25rem; } .home-community__tokens { display: flex; justify-content: flex-start; }
    .home-community__tokens span { height: 54px; width: 54px; }
}

@media (max-width:420px) {
    .home-hero__actions { align-items: stretch; flex-direction: column; } .home-hero__actions .btn { justify-content: center; width: 100%; }
    .home-seals { gap: .45rem; } .home-timeline span { height: 54px; margin-inline: .6rem; width: 54px; } .home-game-pair>:last-child { display: none; }
}

@media (prefers-reduced-motion:reduce) { .home-page *, .home-page *::before, .home-page *::after { transition-duration: .01ms !important; } }