*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: Tahoma, Geneva, sans-serif; font-size: 17px; line-height: 1.8; color: #e8dff5; background: linear-gradient(135deg, #1a0533 0%, #0d001a 50%, #1a0533 100%); background-attachment: fixed; }
header {
    background: linear-gradient(90deg, #ff2d95, #b000ff, #00f0ff, #ff2d95);
    background-size: 300% 100%;
    animation: discoHeader 4s ease infinite;
    padding: 18px 20px; text-align: center; color: #fff; font-size: 16px; font-weight: bold; letter-spacing: 3px;
    text-shadow: 0 0 10px rgba(255,255,255,0.5);
}
@keyframes discoHeader { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
.container { max-width: 800px; margin: 0 auto; padding: 30px 20px 50px; }
h1 {
    font-size: 28px; line-height: 1.4; margin-bottom: 20px;
    background: linear-gradient(90deg, #ff2d95, #ffae00, #00f0ff, #b000ff, #ff2d95);
    background-size: 300% auto;
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    animation: discoText 4s linear infinite;
}
@keyframes discoText { 0%{background-position:0% center} 100%{background-position:300% center} }
h2 { font-size: 22px; color: #ff2d95; margin: 30px 0 14px; text-shadow: 0 0 8px rgba(255,45,149,0.4); }
h3 { font-size: 19px; color: #ffae00; margin: 22px 0 10px; text-shadow: 0 0 6px rgba(255,174,0,0.3); }
p { margin-bottom: 16px; color: #c8b8e0; }
ul, ol { margin: 14px 0 18px 24px; }
li { margin-bottom: 8px; color: #c8b8e0; }
a { color: #00f0ff; text-decoration: none; transition: all 0.3s; }
a:hover { color: #ff2d95; text-shadow: 0 0 8px rgba(255,45,149,0.5); }
.related { background: rgba(176,0,255,0.08); border: 1px solid rgba(255,45,149,0.2); border-radius: 14px; padding: 28px 24px; margin: 34px 0; box-shadow: 0 0 20px rgba(176,0,255,0.08); }
.related h2 { margin-top: 0; font-size: 20px; }
.related-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
.related-card { background: rgba(26,5,51,0.6); border-radius: 10px; padding: 16px; border: 1px solid rgba(255,45,149,0.15); transition: all 0.3s; }
.related-card:hover { border-color: rgba(0,240,255,0.5); box-shadow: 0 0 15px rgba(0,240,255,0.15); }
.related-card a { font-weight: bold; font-size: 15px; display: block; margin-bottom: 6px; }
.related-card p { font-size: 13px; color: #8b7aaa; margin: 0; line-height: 1.5; }
.faq { margin: 36px 0; }
.faq h2 { margin-bottom: 18px; }
.faq details { border-bottom: 1px solid rgba(255,45,149,0.15); }
.faq details:first-of-type { border-top: 1px solid rgba(255,45,149,0.15); }
.faq summary { font-weight: bold; font-size: 17px; color: #ff2d95; cursor: pointer; padding: 16px 30px 16px 0; list-style: none; position: relative; user-select: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-size: 22px; font-weight: bold; color: #00f0ff; }
.faq details[open] summary::after { content: '\2212'; }
.faq details p { padding: 0 0 16px 0; margin: 0; color: #c8b8e0; line-height: 1.8; }
footer {
    background: linear-gradient(90deg, #ff2d95, #b000ff, #00f0ff);
    background-size: 200% 100%;
    animation: discoHeader 4s ease infinite;
    color: #fff; text-align: center; padding: 20px; font-size: 13px;
    text-shadow: 0 0 5px rgba(255,255,255,0.3);
}
@media (max-width: 600px) { h1 { font-size: 23px; } h2 { font-size: 19px; } .related-grid { grid-template-columns: 1fr; } .container { padding: 20px 16px 40px; } }

/* CTA Button — full width */
.welcome { margin: 28px 0; }
.welcome a {
    display: block;
    width: 100%;
    background: linear-gradient(135deg, #ff2d95, #ff0055);
    color: #fff;
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 20px;
    font-weight: bold;
    padding: 18px 20px;
    border-radius: 12px;
    text-decoration: none;
    text-align: center;
    letter-spacing: 3px;
    box-shadow: 0 0 25px rgba(255,45,149,0.5), 0 0 50px rgba(255,45,149,0.2);
    transition: all 0.3s;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
.welcome a:hover {
    box-shadow: 0 0 35px rgba(255,45,149,0.7), 0 0 70px rgba(255,45,149,0.3);
    transform: translateY(-2px);
    color: #fff;
}

/* Burger Menu */
.burger { position: relative; display: inline-block; float: right; cursor: pointer; padding: 4px 0; z-index: 1003; }
.burger span { display: block; width: 26px; height: 3px; background: #fff; margin: 5px 0; border-radius: 2px; transition: all 0.3s; }
.burger.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 6px); }
.burger.active span:nth-child(2) { opacity: 0; }
.burger.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -6px); }
header { position: relative; z-index: 1001; }
.nav-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(10,5,26,0.97); z-index: 1002; overflow-y: auto; padding: 70px 20px 30px; }
.nav-overlay.active { display: flex; justify-content: center; align-items: flex-start; }
.nav-overlay ul { list-style: none; max-width: 700px; margin: 0 auto; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 20px; }
.nav-overlay li { margin-bottom: 0; }
.nav-overlay a { display: block; color: #c8b8e0; font-family: Tahoma, sans-serif; font-size: 15px; padding: 12px 16px; border-radius: 8px; text-decoration: none; transition: all 0.2s; border-bottom: none; cursor: pointer; pointer-events: auto; }
.nav-overlay a:hover { background: rgba(255,45,149,0.15); color: #ff2d95; }
@media (max-width: 600px) { .nav-overlay ul { columns: 1; } }