:root { --blue: #0052ff; --cyan: #00e5ff; --dark: #0a0d14; }
body { background: var(--dark); color: #fff; font-family: 'Montserrat', sans-serif; margin: 0; line-height: 1.6; }

.navbar { display: flex; justify-content: space-between; padding: 20px; background: rgba(0,0,0,0.5); position: sticky; top: 0; z-index: 10; }
.logo { font-weight: 900; font-size: 24px; }
.logo span { color: var(--cyan); }

.hero-promo { padding: 60px 20px; text-align: center; background: radial-gradient(circle, #152238 0%, #0a0d14 100%); }
.slot-machine-min { background: #1a1f2b; padding: 30px; border-radius: 20px; max-width: 400px; margin: 0 auto; border: 1px solid var(--blue); }
.slots { display: flex; gap: 10px; justify-content: center; margin-bottom: 20px; font-size: 40px; }
.s-box { background: #000; padding: 10px; border-radius: 10px; width: 60px; height: 60px; }

button { background: var(--blue); color: #fff; border: none; padding: 15px 30px; border-radius: 10px; font-weight: bold; cursor: pointer; width: 100%; }

.content-text { max-width: 800px; margin: 40px auto; padding: 20px; color: #ccc; }
.content-text h2, h3 { color: #fff; }

.modal { display: none; position: fixed; top:0; left:0; width:100%; height:100%; background: rgba(0,0,0,0.9); align-items: center; justify-content: center; z-index: 100; }
.modal-body { background: #1a1f2b; padding: 40px; border-radius: 20px; text-align: center; border: 1px solid var(--cyan); }
.cta-final { display: block; background: #00ff88; color: #000; padding: 20px; text-decoration: none; border-radius: 10px; font-weight: 900; margin-top: 20px; }