:root {
    --twitch: #9146ff;
    --fb: #1877f2;
    --ig: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
    --of-blue: #008fcc;
    --ai-neon: #00f2ff;
    --glass: rgba(0, 0, 0, 0.65); /* Increased transparency */
    --border: rgba(255, 255, 255, 0.1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body { 
    background: #050505; 
    color: white; 
    font-family: 'Inter', sans-serif;
    overflow-x: hidden; 
}

.main-bg-layer { 
    position: fixed; 
    top: 0; left: 0; width: 100%; height: 100%; z-index: -1; 
    background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('images/background.png') no-repeat center center/cover;
    animation: slowZoom 30s infinite alternate ease-in-out;
}

@keyframes slowZoom { 0% { transform: scale(1); } 100% { transform: scale(1.1); } }

.vertical-layout-stack {
    display: flex; flex-direction: column; align-items: center;
    padding: 80px 20px; gap: 50px; width: 100%;
}

.glass-panel {
    background: var(--glass); backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px); border: 1px solid var(--border);
    border-radius: 35px; width: 100%; max-width: 650px; text-align: center;
    box-shadow: 0 30px 60px rgba(0,0,0,0.8);
    padding: 50px;
}

/* HEADER PIZAZZ */
.main-heading {
    font-size: 3.2rem;
    font-weight: 900;
    text-transform: uppercase;
    color: #fff;
    text-shadow: 0 0 15px var(--twitch), 0 0 30px var(--twitch);
    animation: neonFlicker 2s infinite;
    margin-bottom: 5px;
}

@keyframes neonFlicker {
    0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% { opacity: 1; }
    20%, 22%, 24%, 55% { opacity: 0.8; }
}

.sub-heading { font-size: 1.2rem; opacity: 0.8; letter-spacing: 2px; }

/* BRANDED BUTTONS */
.navigation-hub { display: flex; flex-direction: column; gap: 15px; margin-top: 30px; }
.action-btn { 
    display: flex; align-items: center; justify-content: center; gap: 15px;
    padding: 18px; border-radius: 15px; text-decoration: none; color: white;
    font-weight: 800; transition: 0.3s; border: none; font-size: 1.1rem;
}

.twitch-btn { background: var(--twitch); box-shadow: 0 5px 15px rgba(145, 70, 255, 0.4); }
.fb-btn { background: var(--fb); box-shadow: 0 5px 15px rgba(24, 119, 242, 0.4); }
.ig-btn { background: var(--ig); box-shadow: 0 5px 15px rgba(220, 39, 67, 0.4); }

.action-btn:hover { transform: translateY(-3px); filter: brightness(1.2); }

/* MADISON'S PLAYHOUSE FIXES */
.of-massive-card { max-width: 800px; }
.accent-divider { height: 3px; width: 80px; margin: 20px auto; border-radius: 10px; }
.header-glow { background: var(--twitch); }
.of-glow { background: var(--of-blue); }
.ai-glow { background: var(--ai-neon); }

.of-showcase { display: flex; align-items: center; gap: 40px; margin-top: 30px; }
.of-image-frame { flex: 0 0 240px; height: 240px; border-radius: 25px; overflow: hidden; position: relative; border: 2px solid var(--of-blue); }
.of-model-img { width: 100%; height: 100%; object-fit: cover; }
.of-verified-badge { position: absolute; bottom: 10px; right: 10px; background: white; color: var(--of-blue); border-radius: 50%; width: 25px; height: 25px; display: flex; align-items: center; justify-content: center; font-size: 0.9rem; }

.of-details { text-align: left; flex: 1; }
.of-details h3 { font-size: 2.2rem; color: var(--of-blue); margin-bottom: 5px; }
.of-description { margin-bottom: 20px; opacity: 0.7; }

.of-mega-btn { background: var(--of-blue); width: 100%; padding: 22px; font-size: 1.2rem; }
.of-button-text { display: flex; align-items: center; gap: 10px; justify-content: center; }

.model-social-refs { display: flex; gap: 25px; margin-top: 25px; justify-content: center; background: rgba(255,255,255,0.05); padding: 15px; border-radius: 15px; }
.ref-link { font-size: 2rem; color: white; transition: 0.3s; }
.fb-ref:hover { color: var(--fb); }
.ig-ref:hover { color: #E1306C; }
.x-ref:hover { color: #1DA1F2; }

/* AI CORE - THE BIGGEST ELEMENT */
.ai-massive-core { max-width: 900px; padding: 70px; border: 1px solid var(--ai-neon); box-shadow: 0 0 30px rgba(0, 242, 255, 0.2); }
.status-text { color: #00ff41; margin-bottom: 30px; font-weight: bold; }
.live-dot { height: 10px; width: 10px; background: #00ff41; border-radius: 50%; display: inline-block; margin-right: 8px; box-shadow: 0 0 10px #00ff41; }
.ai-mega-btn { background: linear-gradient(90deg, #7000ff, #00f2ff); font-size: 1.8rem; padding: 35px; border-radius: 25px; width: 100%; box-shadow: 0 10px 40px rgba(0, 242, 255, 0.4); }

/* FOOTER */
.discrete-btn { background: none; border: 1px solid #ff0000; color: #ff0000; padding: 10px 20px; border-radius: 10px; cursor: pointer; font-weight: bold; }

@media (max-width: 768px) {
    .of-showcase { flex-direction: column; text-align: center; }
    .of-details { text-align: center; }
    .main-heading { font-size: 2.2rem; }
}