.hero-section {
padding: 6rem 0 4rem;
position: relative;
overflow: hidden;
}

.hero-section::before {
content: '';
position: absolute;
top: -50%;
right: -20%;
width: 600px;
height: 600px;
background: radial-gradient(circle, rgba(255, 23, 68, 0.15) 0%, transparent 70%);
border-radius: 50%;
animation: pulse 8s ease-in-out infinite;
}

@keyframes pulse {
0%, 100% {
transform: scale(1);
opacity: 0.5;
}
50% {
transform: scale(1.2);
opacity: 0.8;
}
}

.hero-section h1 {
margin-bottom: 2rem;
}

@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}

.hero-section .content-image {
margin: 3rem 0;
}

.hero-section p {
font-size: 1.15rem;
line-height: 1.8;
}

.navigation-index {
background: var(--dark-alt);
padding: 2rem 0;
border-top: 1px solid rgba(255, 255, 255, 0.05);
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.navigation-index details {
background: rgba(255, 255, 255, 0.02);
border-radius: var(--border-radius);
padding: 1.5rem;
border: 1px solid rgba(255, 255, 255, 0.05);
}

.navigation-index summary {
cursor: pointer;
font-size: 1.2rem;
color: var(--light);
user-select: none;
list-style: none;
display: flex;
align-items: center;
gap: 1rem;
}

.navigation-index summary::-webkit-details-marker {
display: none;
}

.navigation-index summary::before {
content: '▶';
color: var(--primary);
transition: transform 0.3s;
}

.navigation-index details[open] summary::before {
transform: rotate(90deg);
}

.index-nav {
margin-top: 1.5rem;
}

.index-nav ul {
list-style: none;
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 0.75rem;
}

.index-nav ul li a {
display: block;
padding: 0.75rem 1rem;
background: rgba(255, 255, 255, 0.03);
border-radius: 8px;
border-left: 3px solid var(--primary);
transition: var(--transition);
}

.index-nav ul li a:hover {
background: rgba(255, 23, 68, 0.1);
border-left-color: var(--accent);
transform: translateX(5px);
}

.registration {
background: linear-gradient(180deg, var(--dark) 0%, var(--dark-alt) 100%);
}

.timeline-step {
position: relative;
padding-left: 2.5rem;
margin-bottom: 2rem;
}

.timeline-step::before {
content: '';
position: absolute;
left: 0;
top: 0.5rem;
width: 12px;
height: 12px;
background: var(--primary);
border-radius: 50%;
box-shadow: 0 0 0 4px rgba(255, 23, 68, 0.2);
}

.timeline-step::after {
content: '';
position: absolute;
left: 5.5px;
top: 1.5rem;
width: 1px;
height: calc(100% + 0.5rem);
background: linear-gradient(180deg, var(--primary) 0%, transparent 100%);
}

.timeline-step:last-child::after {
display: none;
}

.timeline-step p,
.timeline-step ul {
background: rgba(255, 255, 255, 0.02);
padding: 1.5rem;
border-radius: 12px;
border-left: 2px solid var(--primary);
}

.mobile-app {
background: var(--dark);
position: relative;
}

.mobile-app::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('data:image/svg+xml,<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"><rect width="1" height="1" fill="rgba(255,23,68,0.03)"/></svg>') repeat;
opacity: 0.5;
}

.feature-list ul {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1.5rem;
}

.feature-list ul li {
background: var(--gradient-dark);
padding: 1.5rem;
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.05);
transition: var(--transition);
list-style: none;
position: relative;
padding-left: 3rem;
}

.feature-list ul li::before {
content: '✓';
position: absolute;
left: 1rem;
top: 1.5rem;
color: var(--success);
font-size: 1.5rem;
font-weight: bold;
}

.feature-list ul li:hover {
transform: translateX(8px);
border-color: var(--primary);
box-shadow: var(--shadow-md);
}

.game-sections {
background: var(--dark-alt);
}

.cards-grid-4 {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 2rem;
margin: 2rem 0;
}

.game-card {
background: var(--gradient-dark);
border-radius: var(--border-radius);
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.05);
transition: var(--transition);
}

.game-card:hover {
transform: translateY(-12px);
box-shadow: var(--shadow-xl);
border-color: var(--secondary);
}

.game-card figure {
margin: 0;
}

.game-card p {
padding: 1.5rem;
margin: 0;
}

.advantages {
background: var(--dark);
}

.highlight-boxes {
display: grid;
gap: 2rem;
}

.highlight-box {
background: var(--gradient-dark);
padding: 2.5rem;
border-radius: var(--border-radius);
border: 1px solid rgba(255, 255, 255, 0.05);
position: relative;
overflow: hidden;
transition: var(--transition);
}

.highlight-box::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 4px;
height: 100%;
background: var(--gradient-primary);
}

.highlight-box:hover {
transform: translateX(8px);
box-shadow: var(--shadow-lg);
border-color: rgba(255, 23, 68, 0.3);
}

.highlight-box h3 {
margin-bottom: 1.5rem;
}

.payment-methods {
background: var(--dark-alt);
}

.table-responsive {
overflow-x: auto;
margin: 2rem 0;
border-radius: var(--border-radius);
box-shadow: var(--shadow-md);
}

table {
width: 100%;
border-collapse: collapse;
background: var(--gradient-dark);
}

thead {
background: rgba(255, 23, 68, 0.1);
}

thead th {
padding: 1.25rem;
text-align: left;
font-weight: 700;
color: var(--light);
border-bottom: 2px solid var(--primary);
}

tbody tr {
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
transition: var(--transition);
}

tbody tr:hover {
background: rgba(255, 255, 255, 0.02);
}

tbody td {
padding: 1.25rem;
color: var(--text);
}

.security {
background: var(--dark);
}

.feature-blocks {
display: grid;
gap: 2rem;
}

.feature-block {
background: var(--gradient-dark);
padding: 2.5rem;
border-radius: var(--border-radius);
border: 1px solid rgba(255, 255, 255, 0.05);
position: relative;
}

.feature-block::after {
content: '';
position: absolute;
top: 2rem;
right: 2rem;
width: 60px;
height: 60px;
background: var(--gradient-primary);
opacity: 0.1;
border-radius: 50%;
}

.feature-block h3 {
position: relative;
z-index: 1;
}

.faq {
background: var(--dark-alt);
}

.accordion-item {
background: var(--gradient-dark);
border: 1px solid rgba(255, 255, 255, 0.05);
border-radius: var(--border-radius);
margin-bottom: 1rem;
overflow: hidden;
transition: var(--transition);
}

.accordion-item:hover {
border-color: var(--primary);
}

.accordion-header {
padding: 1.5rem;
cursor: pointer;
user-select: none;
margin: 0;
font-size: 1.3rem;
display: flex;
align-items: center;
gap: 1rem;
color: var(--light);
position: relative;
}

.accordion-header::before {
content: '+';
color: var(--primary);
font-size: 2rem;
font-weight: 700;
line-height: 1;
transition: transform 0.3s;
}

.accordion-item.active .accordion-header::before {
transform: rotate(45deg);
}

.accordion-body {
max-height: 0;
overflow: hidden;
transition: max-height 0.4s ease-out, padding 0.4s ease-out;
padding: 0 1.5rem;
}

.accordion-item.active .accordion-body {
max-height: 1000px;
padding: 0 1.5rem 1.5rem;
}

.cta-section {
background: var(--gradient-primary);
padding: 5rem 0;
text-align: center;
position: relative;
overflow: hidden;
}

.cta-section::before {
content: '';
position: absolute;
top: -50%;
left: -10%;
width: 500px;
height: 500px;
background: radial-gradient(circle, rgba(255, 214, 0, 0.3) 0%, transparent 70%);
border-radius: 50%;
animation: float 6s ease-in-out infinite;
}

.cta-section::after {
content: '';
position: absolute;
bottom: -50%;
right: -10%;
width: 500px;
height: 500px;
background: radial-gradient(circle, rgba(0, 229, 255, 0.3) 0%, transparent 70%);
border-radius: 50%;
animation: float 8s ease-in-out infinite reverse;
}

@keyframes float {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-20px);
}
}

.cta-section h2 {
color: white;
font-size: clamp(2rem, 4vw, 3rem);
margin-bottom: 1.5rem;
position: relative;
z-index: 1;
}

.cta-section p {
color: rgba(255, 255, 255, 0.95);
font-size: 1.2rem;
margin-bottom: 2rem;
position: relative;
z-index: 1;
}

.cta-section .btn-primary {
background: white;
color: var(--primary);
font-size: 1.25rem;
padding: 1.25rem 3rem;
position: relative;
z-index: 1;
}

.cta-section .btn-primary:hover {
background: var(--accent);
color: var(--dark);
}

@media (max-width: 767px) {
.section-padding {
padding: 3rem 0;
}

.hero-section {
padding: 3rem 0 2rem;
}

h1 {
font-size: 2.25rem;
}

h2 {
font-size: 1.75rem;
}

h3 {
font-size: 1.4rem;
}

p {
font-size: 1rem;
}

.btn {
padding: 0.875rem 2rem;
font-size: 1rem;
}

.cards-grid-4 {
grid-template-columns: 1fr;
gap: 1.5rem;
}

.index-nav ul {
grid-template-columns: 1fr;
}

.table-responsive {
font-size: 0.9rem;
}

thead th,
tbody td {
padding: 0.875rem;
}

.cta-section {
padding: 3rem 0;
}

.cta-section h2 {
font-size: 1.75rem;
}

.cta-section .btn-primary {
font-size: 1.1rem;
padding: 1rem 2rem;
width: 100%;
}

.timeline-step {
padding-left: 2rem;
}

.highlight-box,
.feature-block {
padding: 1.5rem;
}

.game-card .content-image.portrait img {
max-width: 60%;
height: auto;
margin: 0 auto;
}
}