body.page-index {
    background: #f8fafc;
}

.page-index main > section:first-of-type {
    position: relative;
    overflow: hidden;
    /* padding-top: 4.5rem;
    padding-bottom: 4rem; */
    border-bottom: 1px solid #e2e8f0;
}

.page-index main > section:first-of-type::after {
    content: '';
    position: absolute;
    inset: auto -12% -45% auto;
    width: 18rem;
    height: 18rem;
    border-radius: 9999px;
    background: radial-gradient(circle, rgba(168, 85, 247, 0.16), rgba(168, 85, 247, 0));
    pointer-events: none;
}

.page-index .bg-gray-50 {
    border-top: 1px solid #e2e8f0;
}

.page-index #how-to-play,
.page-index #game-modes,
.page-index #why-play,
.page-index #faq,
.page-index .bg-gray-50 > section:last-child {
    padding-top: 4.5rem;
    padding-bottom: 4.5rem;
}

.page-index #how-to-play .bg-white,
.page-index #game-modes .bg-white,
.page-index #why-play .bg-white,
.page-index #faq .bg-gray-50 {
    border: 1px solid #e2e8f0;
    border-radius: 1.5rem;
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.06);
}

.page-index #faq .bg-gray-50 {
    background: #ffffff;
}

.page-index #faq .space-y-6 > div {
    position: relative;
    padding: 1.5rem 1.6rem;
    border: 1px solid #e2e8f0;
    border-radius: 1.4rem;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.06);
}

.page-index #faq .space-y-6 > div::before {
    content: '';
    position: absolute;
    left: 1.6rem;
    top: 1.2rem;
    width: 2.8rem;
    height: 0.2rem;
    border-radius: 9999px;
    background: linear-gradient(90deg, #8b5cf6, #ec4899);
}

.page-index #faq .space-y-6 > div h3 {
    margin-top: 0.9rem;
    letter-spacing: -0.01em;
}

.page-index main > section:first-of-type h1 {
    letter-spacing: -0.03em;
}

.page-index main > section:first-of-type .text-center {
    max-width: 56rem;
}

.page-index .bg-gray-50 > section:last-child > .container > div {
    border: 1px solid #e9d5ff;
    box-shadow: 0 18px 40px rgba(168, 85, 247, 0.08);
}

.page-index .bg-gray-50 > section:last-child a:last-child {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}

.page-index .bg-gray-50 > section:last-child .container,
.page-index #how-to-play .container,
.page-index #game-modes .container,
.page-index #why-play .container,
.page-index #faq .container {
    max-width: 72rem;
}

.page-index #why-play .bg-white:hover,
.page-index #game-modes .bg-white:hover {
    transform: translateY(-2px);
}

@media (max-width: 768px) {
    .page-index main > section:first-of-type {
        /* padding-top: 3.5rem;
        padding-bottom: 3rem; */
    }

    .page-index #how-to-play,
    .page-index #game-modes,
    .page-index #why-play,
    .page-index #faq,
    .page-index .bg-gray-50 > section:last-child {
        padding-top: 3.25rem;
        padding-bottom: 3.25rem;
    }
}