/* Reset & Base */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
:root{
--primary:#8b5cf6;
--primary-glow:rgba(139,92,246,0.5);
--secondary:#7c3aed;
--accent:#c4b5fd;
--accent-glow:rgba(196,181,253,0.3);
--bg-dark:#0d0221;
--bg-mid:#1e0a3a;
--bg-darker:#080114;
--card-bg:rgba(30,10,58,0.7);
--card-border:rgba(139,92,246,0.25);
--text-light:#ffffff;
--text-gray:#c4b5fd;
--font-heading:'Space Grotesk',system-ui,sans-serif;
--font-body:'IBM Plex Sans',system-ui,sans-serif;
--font-mono:'IBM Plex Mono',monospace;
--transition:0.4s ease-out;
--radius:6px;
}
body{
font-family:var(--font-body);
background:linear-gradient(180deg,var(--bg-dark) 0%,var(--bg-mid) 50%,var(--bg-darker) 100%);
color:var(--text-light);
line-height:1.6;
min-height:100vh;
position:relative;
overflow-x:hidden;
}
body::before{
content:'';
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:
repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(139,92,246,0.03) 2px,rgba(139,92,246,0.03) 4px),
repeating-linear-gradient(90deg,transparent,transparent 2px,rgba(139,92,246,0.03) 2px,rgba(139,92,246,0.03) 4px);
pointer-events:none;
z-index:1;
opacity:0.4;
}
body::after{
content:'';
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><filter id="noise"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="4" stitchTiles="stitch"/></filter><rect width="100" height="100" filter="url(%23noise)" opacity="0.05"/></svg>');
pointer-events:none;
z-index:2;
}
.oc8k-container{max-width:1200px;margin:0 auto;padding:0 20px;position:relative;z-index:3;}
h1,h2,h3,h4,h5,h6{font-family:var(--font-heading);font-weight:700;line-height:1.2;}
a{color:var(--primary);text-decoration:none;transition:color var(--transition);}
a:hover{color:var(--accent);}
button{cursor:pointer;font-family:inherit;}
img{max-width:100%;height:auto;display:block;}

/* Age Modal */
.oc8k-age-modal{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(8,1,20,0.95);
display:flex;
align-items:center;
justify-content:center;
z-index:9999;
opacity:0;
visibility:hidden;
transition:opacity var(--transition),visibility var(--transition);
}
.oc8k-age-modal.oc8k-active{opacity:1;visibility:visible;}
.oc8k-age-modal-content{
background:var(--card-bg);
border:2px solid var(--card-border);
border-left:4px solid var(--primary);
padding:40px;
max-width:500px;
width:90%;
text-align:center;
position:relative;
z-index:10000;
}
.oc8k-age-modal-icon{
font-size:80px;
margin-bottom:20px;
filter:drop-shadow(0 0 20px var(--primary-glow));
}
.oc8k-age-modal-content h2{
font-size:28px;
margin-bottom:15px;
color:var(--primary);
}
.oc8k-age-modal-content p{
font-size:16px;
margin-bottom:30px;
color:var(--text-gray);
}
.oc8k-age-modal-buttons{
display:flex;
gap:15px;
justify-content:center;
flex-wrap:wrap;
}
.oc8k-btn-age-confirm,
.oc8k-btn-age-exit{
padding:15px 35px;
font-size:16px;
font-weight:600;
border:2px solid;
transition:all var(--transition);
}
.oc8k-btn-age-confirm{
background:var(--primary);
border-color:var(--primary);
color:#fff;
}
.oc8k-btn-age-confirm:hover{
background:var(--secondary);
border-color:var(--secondary);
transform:scale(1.03);
box-shadow:0 0 25px var(--primary-glow);
}
.oc8k-btn-age-exit{
background:transparent;
border-color:var(--text-gray);
color:var(--text-gray);
}
.oc8k-btn-age-exit:hover{
background:rgba(255,255,255,0.05);
border-color:var(--accent);
color:var(--accent);
}

/* Header */
.oc8k-header{
position:sticky;
top:0;
background:rgba(13,2,33,0.85);
backdrop-filter:blur(10px);
border-bottom:1px solid var(--card-border);
z-index:1000;
padding:15px 0;
}
.oc8k-header-inner{
display:flex;
align-items:center;
justify-content:space-between;
}
.oc8k-logo{
font-size:24px;
font-weight:700;
color:var(--primary);
font-family:var(--font-heading);
display:flex;
align-items:center;
gap:8px;
}
.oc8k-logo:hover{
color:var(--accent);
}
.oc8k-nav{
display:flex;
align-items:center;
gap:30px;
}
.oc8k-nav a{
font-size:15px;
font-weight:500;
color:var(--text-gray);
transition:color var(--transition);
}
.oc8k-nav a:hover{
color:var(--primary);
}
.oc8k-age-badge{
background:var(--primary);
color:#fff;
padding:6px 12px;
border-radius:20px;
font-size:13px;
font-weight:700;
box-shadow:0 0 15px var(--primary-glow);
}
.oc8k-mobile-toggle{
display:none;
background:transparent;
border:2px solid var(--primary);
color:var(--primary);
padding:8px 12px;
font-size:20px;
}
@media(max-width:768px){
.oc8k-nav{
position:fixed;
top:60px;
left:0;
width:100%;
background:rgba(13,2,33,0.98);
flex-direction:column;
padding:30px;
gap:20px;
transform:translateX(-100%);
transition:transform var(--transition);
border-bottom:2px solid var(--primary);
}
.oc8k-nav.oc8k-active{transform:translateX(0);}
.oc8k-mobile-toggle{display:block;}
}

/* Hero */
.oc8k-hero{
min-height:90vh;
display:flex;
align-items:center;
padding:80px 0;
position:relative;
overflow:hidden;
}
.oc8k-hero::before{
content:'';
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:linear-gradient(135deg,rgba(139,92,246,0.1) 0%,transparent 50%,rgba(124,58,237,0.1) 100%);
animation:oc8k-gradient-shift 8s ease infinite;
}
@keyframes oc8k-gradient-shift{
0%,100%{opacity:0.3;}
50%{opacity:0.6;}
}
.oc8k-hero-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:60px;
align-items:center;
position:relative;
z-index:3;
}
.oc8k-hero-content{position:relative;}
.oc8k-hero-badge{
display:inline-block;
background:var(--primary);
color:#fff;
padding:8px 20px;
border-radius:30px;
font-size:14px;
font-weight:700;
margin-bottom:20px;
box-shadow:0 0 20px var(--primary-glow);
}
.oc8k-hero h1{
font-size:56px;
margin-bottom:20px;
line-height:1.1;
background:linear-gradient(135deg,var(--primary),var(--accent));
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
background-clip:text;
}
.oc8k-hero p{
font-size:20px;
color:var(--text-gray);
margin-bottom:30px;
}
.oc8k-hero-buttons{
display:flex;
gap:15px;
flex-wrap:wrap;
margin-bottom:15px;
}
.oc8k-btn-primary,
.oc8k-btn-secondary{
padding:16px 36px;
font-size:16px;
font-weight:600;
border:2px solid;
transition:all var(--transition);
}
.oc8k-btn-primary{
background:var(--primary);
border-color:var(--primary);
color:#fff;
}
.oc8k-btn-primary:hover{
background:var(--secondary);
border-color:var(--secondary);
transform:scale(1.03);
box-shadow:0 0 30px var(--primary-glow);
}
.oc8k-btn-secondary{
background:transparent;
border-color:var(--accent);
color:var(--accent);
}
.oc8k-btn-secondary:hover{
background:var(--accent);
color:var(--bg-dark);
}
.oc8k-hero-disclaimer{
font-size:13px;
color:rgba(196,181,253,0.6);
font-style:italic;
}
.oc8k-hero-image{
position:relative;
height:500px;
background:linear-gradient(135deg,var(--primary),var(--secondary));
border:2px solid var(--card-border);
border-left:4px solid var(--primary);
display:flex;
align-items:center;
justify-content:center;
overflow:hidden;
}
.oc8k-hero-image::before{
content:'🎰';
font-size:120px;
opacity:0.3;
animation:oc8k-float 3s ease-in-out infinite;
}
@keyframes oc8k-float{
0%,100%{transform:translateY(0);}
50%{transform:translateY(-20px);}
}
@media(max-width:1024px){
.oc8k-hero-grid{grid-template-columns:1fr;gap:40px;}
.oc8k-hero h1{font-size:42px;}
.oc8k-hero-image{height:350px;}
}
@media(max-width:640px){
.oc8k-hero h1{font-size:32px;}
.oc8k-hero p{font-size:16px;}
.oc8k-hero-buttons{flex-direction:column;}
.oc8k-btn-primary,.oc8k-btn-secondary{width:100%;}
}

/* Section */
.oc8k-section{
padding:80px 0;
position:relative;
z-index:3;
}
.oc8k-section-header{
text-align:center;
margin-bottom:50px;
}
.oc8k-section-header h2{
font-size:42px;
margin-bottom:15px;
display:inline-flex;
align-items:center;
gap:15px;
}
.oc8k-section-header p{
font-size:18px;
color:var(--text-gray);
}

/* Games Grid */
.oc8k-games-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
gap:30px;
}
.oc8k-game-card{
background:var(--card-bg);
border:2px solid var(--card-border);
border-left:4px solid var(--primary);
padding:0;
transition:all var(--transition);
position:relative;
overflow:hidden;
}
.oc8k-game-card::before{
content:'';
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:linear-gradient(135deg,rgba(139,92,246,0.1),transparent);
opacity:0;
transition:opacity var(--transition);
pointer-events:none;
}
.oc8k-game-card:hover{
transform:scale(1.03);
border-color:var(--primary);
box-shadow:0 0 30px var(--primary-glow);
}
.oc8k-game-card:hover::before{opacity:1;}
.oc8k-game-image-wrap{
position:relative;
height:200px;
overflow:hidden;
background:linear-gradient(135deg,var(--bg-mid),var(--bg-darker));
}
.oc8k-game-image-wrap img{
width:100%;
height:100%;
object-fit:cover;
}
.oc8k-game-image-fallback{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
display:flex;
align-items:center;
justify-content:center;
background:linear-gradient(135deg,var(--primary),var(--secondary));
color:#fff;
font-weight:700;
font-size:18px;
text-align:center;
padding:20px;
}
.oc8k-game-meta{
display:flex;
justify-content:space-between;
align-items:center;
padding:15px 20px 10px;
}
.oc8k-game-category{
font-size:12px;
color:var(--accent);
text-transform:uppercase;
font-weight:600;
letter-spacing:1px;
}
.oc8k-game-card h3{
font-size:20px;
padding:0 20px 15px;
color:var(--text-light);
}
.oc8k-game-card button{
width:calc(100% - 40px);
margin:0 20px 20px;
padding:12px;
background:var(--primary);
border:2px solid var(--primary);
color:#fff;
font-weight:600;
transition:all var(--transition);
}
.oc8k-game-card button:hover{
background:var(--secondary);
border-color:var(--secondary);
box-shadow:0 0 20px var(--primary-glow);
}

/* Game Modal */
.game-modal{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(8,1,20,0.95);
z-index:9999;
display:flex;
align-items:center;
justify-content:center;
opacity:0;
visibility:hidden;
transition:opacity var(--transition),visibility var(--transition);
}
.game-modal.active{opacity:1;visibility:visible;}
.modal-content{
background:var(--card-bg);
border:2px solid var(--card-border);
width:95%;
max-width:1200px;
height:90%;
max-height:800px;
display:flex;
flex-direction:column;
position:relative;
}
.modal-header{
display:flex;
align-items:center;
justify-content:space-between;
padding:20px;
border-bottom:2px solid var(--card-border);
gap:15px;
}
.modal-header h2{
font-size:24px;
flex:1;
}
.close-btn{
background:transparent;
border:2px solid var(--primary);
color:var(--primary);
font-size:28px;
width:45px;
height:45px;
display:flex;
align-items:center;
justify-content:center;
transition:all var(--transition);
}
.close-btn:hover{
background:var(--primary);
color:#fff;
}
#game-iframe{
flex:1;
width:100%;
border:none;
background:#000;
}
.demo-unavailable{
flex:1;
display:flex;
align-items:center;
justify-content:center;
font-size:20px;
color:var(--text-gray);
}

/* Trust Block */
.oc8k-trust{
background:var(--card-bg);
border:2px solid var(--card-border);
border-left:4px solid var(--primary);
padding:40px;
margin:60px auto;
max-width:900px;
}
.oc8k-trust h3{
font-size:28px;
margin-bottom:25px;
text-align:center;
color:var(--primary);
}
.oc8k-trust ul{
list-style:none;
display:grid;
gap:15px;
}
.oc8k-trust li{
padding-left:30px;
position:relative;
font-size:16px;
color:var(--text-gray);
}
.oc8k-trust li::before{
content:'✓';
position:absolute;
left:0;
color:var(--primary);
font-weight:700;
font-size:20px;
}

/* How It Works */
.oc8k-steps{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:30px;
}
.oc8k-step{
background:var(--card-bg);
border:2px solid var(--card-border);
border-left:4px solid var(--primary);
padding:35px;
text-align:center;
transition:all var(--transition);
}
.oc8k-step:hover{
transform:scale(1.03);
box-shadow:0 0 30px var(--primary-glow);
}
.oc8k-step-icon{
font-size:60px;
margin-bottom:20px;
filter:drop-shadow(0 0 15px var(--primary-glow));
}
.oc8k-step h3{
font-size:22px;
margin-bottom:12px;
color:var(--primary);
}
.oc8k-step p{
color:var(--text-gray);
font-size:15px;
}

/* Features */
.oc8k-features{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
gap:30px;
}
.oc8k-feature{
background:var(--card-bg);
border:2px solid var(--card-border);
border-left:4px solid var(--primary);
padding:30px;
transition:all var(--transition);
}
.oc8k-feature:hover{
transform:scale(1.03);
box-shadow:0 0 30px var(--primary-glow);
}
.oc8k-feature-icon{
font-size:50px;
margin-bottom:15px;
}
.oc8k-feature h3{
font-size:20px;
margin-bottom:10px;
color:var(--primary);
}
.oc8k-feature p{
color:var(--text-gray);
font-size:14px;
}

/* CTA Band */
.oc8k-cta-band{
background:linear-gradient(135deg,var(--primary),var(--secondary));
padding:60px 40px;
text-align:center;
border:2px solid var(--card-border);
margin:80px 0;
position:relative;
overflow:hidden;
}
.oc8k-cta-band::before{
content:'';
position:absolute;
top:-50%;
left:-50%;
width:200%;
height:200%;
background:linear-gradient(45deg,transparent,rgba(255,255,255,0.1),transparent);
transform:rotate(45deg);
animation:oc8k-shimmer 3s infinite;
}
@keyframes oc8k-shimmer{
0%{transform:translateX(-100%) rotate(45deg);}
100%{transform:translateX(100%) rotate(45deg);}
}
.oc8k-cta-band h2{
font-size:38px;
margin-bottom:15px;
position:relative;
z-index:2;
}
.oc8k-cta-band p{
font-size:18px;
margin-bottom:25px;
opacity:0.9;
position:relative;
z-index:2;
}
.oc8k-cta-band button{
background:#fff;
color:var(--secondary);
border:2px solid #fff;
padding:16px 40px;
font-size:16px;
font-weight:700;
transition:all var(--transition);
position:relative;
z-index:2;
}
.oc8k-cta-band button:hover{
background:transparent;
color:#fff;
transform:scale(1.05);
}

/* Responsible */
.oc8k-responsible{
background:var(--card-bg);
border:2px solid var(--card-border);
border-left:4px solid var(--primary);
padding:60px 40px;
text-align:center;
max-width:900px;
margin:0 auto;
}
.oc8k-responsible-icon{
font-size:80px;
margin-bottom:20px;
filter:drop-shadow(0 0 20px var(--primary-glow));
}
.oc8k-responsible h2{
font-size:36px;
margin-bottom:20px;
color:var(--primary);
}
.oc8k-responsible p{
font-size:16px;
color:var(--text-gray);
margin-bottom:25px;
line-height:1.8;
}
.oc8k-responsible a{
color:var(--accent);
text-decoration:underline;
}

/* FAQ */
.oc8k-faq{
max-width:900px;
margin:0 auto;
}
.oc8k-faq-item{
background:var(--card-bg);
border:2px solid var(--card-border);
border-left:4px solid var(--primary);
margin-bottom:20px;
overflow:hidden;
}
.oc8k-faq-question{
width:100%;
text-align:left;
padding:20px 25px;
background:transparent;
border:none;
color:var(--text-light);
font-size:18px;
font-weight:600;
display:flex;
justify-content:space-between;
align-items:center;
transition:all var(--transition);
}
.oc8k-faq-question:hover{
background:rgba(139,92,246,0.1);
}
.oc8k-faq-question::after{
content:'+';
font-size:28px;
color:var(--primary);
transition:transform var(--transition);
}
.oc8k-faq-question.oc8k-active::after{
transform:rotate(45deg);
}
.oc8k-faq-answer{
max-height:0;
overflow:hidden;
transition:max-height var(--transition);
}
.oc8k-faq-answer.oc8k-active{
max-height:500px;
}
.oc8k-faq-answer p{
padding:0 25px 25px;
color:var(--text-gray);
line-height:1.8;
}

/* Footer */
.oc8k-footer{
background:rgba(13,2,33,0.95);
border-top:2px solid var(--card-border);
padding:60px 0 30px;
margin-top:80px;
position:relative;
z-index:3;
}
.oc8k-footer-main{
display:grid;
grid-template-columns:2fr 1fr 1fr;
gap:40px;
margin-bottom:40px;
padding-bottom:30px;
border-bottom:1px solid var(--card-border);
}
.oc8k-footer-logo{
font-size:28px;
font-weight:700;
color:var(--primary);
margin-bottom:20px;
display:block;
}
.oc8k-footer-disclaimer{
color:var(--text-gray);
font-size:14px;
line-height:1.8;
margin-bottom:20px;
}
.oc8k-footer-badge-large{
display:inline-block;
background:var(--primary);
color:#fff;
padding:12px 24px;
border-radius:30px;
font-size:18px;
font-weight:700;
box-shadow:0 0 25px var(--primary-glow);
}
.oc8k-footer h4{
font-size:16px;
margin-bottom:15px;
color:var(--primary);
text-transform:uppercase;
letter-spacing:1px;
}
.oc8k-footer ul{
list-style:none;
}
.oc8k-footer li{
margin-bottom:10px;
}
.oc8k-footer a{
color:var(--text-gray);
font-size:14px;
}
.oc8k-footer a:hover{
color:var(--primary);
}
.oc8k-footer-bottom{
text-align:center;
color:var(--text-gray);
font-size:13px;
}
@media(max-width:768px){
.oc8k-footer-main{grid-template-columns:1fr;gap:30px;}
}

/* Filter Buttons */
.oc8k-filter-buttons{
display:flex;
gap:15px;
justify-content:center;
flex-wrap:wrap;
margin-bottom:40px;
}
.oc8k-filter-btn{
padding:10px 20px;
background:var(--card-bg);
border:2px solid var(--card-border);
color:var(--text-gray);
font-weight:600;
transition:all var(--transition);
}
.oc8k-filter-btn:hover,
.oc8k-filter-btn.oc8k-active{
background:var(--primary);
border-color:var(--primary);
color:#fff;
box-shadow:0 0 20px var(--primary-glow);
}

/* Simple Page Layout */
.oc8k-simple-header{
background:rgba(13,2,33,0.95);
border-bottom:2px solid var(--card-border);
padding:20px 0;
}
.oc8k-simple-content{
padding:80px 0;
max-width:900px;
margin:0 auto;
}
.oc8k-simple-content h1{
font-size:42px;
margin-bottom:30px;
color:var(--primary);
}
.oc8k-simple-content h2{
font-size:28px;
margin-top:40px;
margin-bottom:20px;
color:var(--primary);
}
.oc8k-simple-content h3{
font-size:22px;
margin-top:30px;
margin-bottom:15px;
color:var(--accent);
}
.oc8k-simple-content p{
margin-bottom:20px;
color:var(--text-gray);
line-height:1.8;
}
.oc8k-simple-content ul{
margin:20px 0;
padding-left:30px;
color:var(--text-gray);
}
.oc8k-simple-content li{
margin-bottom:12px;
line-height:1.8;
}
.oc8k-age-notice{
background:var(--card-bg);
border:2px solid var(--primary);
border-left:4px solid var(--primary);
padding:25px;
margin-bottom:40px;
text-align:center;
}
.oc8k-age-notice strong{
color:var(--primary);
font-size:18px;
}

/* Corner Badge Decoration */
.oc8k-corner-badge{
position:absolute;
top:15px;
right:15px;
background:var(--primary);
color:#fff;
width:50px;
height:50px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-weight:700;
font-size:14px;
box-shadow:0 0 20px var(--primary-glow);
z-index:10;
}