/* CSS Reset & Variables */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
:root{
--primary:#06b6d4;
--primary-glow:rgba(6,182,212,0.5);
--secondary:#0891b2;
--accent:#67e8f9;
--accent-glow:rgba(103,232,249,0.3);
--bg-gradient-from:#042f2e;
--bg-gradient-via:#134e4a;
--bg-gradient-to:#021716;
--card-bg:rgba(19,78,74,0.6);
--card-border:rgba(6,182,212,0.25);
--gold:#d4af37;
--gold-light:#f4e5c2;
--gold-dark:#b8941f;
--dark:#0a0e0e;
--white:#ffffff;
--gray:#9ca3af;
--transition:0.4s ease-out;
--radius:6px;
}
body{
font-family:'Source Sans Pro',system-ui,sans-serif;
font-weight:400;
color:var(--white);
background:linear-gradient(135deg,var(--bg-gradient-from) 0%,var(--bg-gradient-via) 50%,var(--bg-gradient-to) 100%);
background-attachment:fixed;
line-height:1.6;
overflow-x:hidden;
}
h1,h2,h3,h4,h5,h6{
font-family:'Playfair Display',Georgia,serif;
font-weight:600;
line-height:1.2;
margin-bottom:1rem;
}
h1{font-size:3.5rem;letter-spacing:2px;}
h2{font-size:2.5rem;letter-spacing:1.5px;}
h3{font-size:2rem;}
p{margin-bottom:1rem;}
a{color:var(--primary);text-decoration:none;transition:color var(--transition);}
a:hover{color:var(--accent);}
img{max-width:100%;height:auto;display:block;}
.container{max-width:1200px;margin:0 auto;padding:0 1.5rem;}

/* Header & Navigation */
header{
position:fixed;
top:0;
left:0;
right:0;
z-index:1000;
backdrop-filter:blur(15px);
background:rgba(4,47,46,0.85);
border-bottom:1px solid var(--card-border);
box-shadow:0 4px 20px rgba(0,0,0,0.3);
}
nav{
display:flex;
justify-content:space-between;
align-items:center;
padding:1rem 1.5rem;
max-width:1200px;
margin:0 auto;
}
.logo{
font-family:'Playfair Display',Georgia,serif;
font-size:1.8rem;
font-weight:700;
color:var(--gold);
text-shadow:0 0 20px var(--primary-glow);
display:flex;
align-items:center;
gap:0.5rem;
}
.logo-icon{
font-size:2rem;
}
.nav-links{
display:flex;
gap:2rem;
list-style:none;
align-items:center;
}
.nav-links a{
color:var(--white);
font-weight:600;
letter-spacing:0.5px;
position:relative;
padding:0.5rem 0;
}
.nav-links a::after{
content:'';
position:absolute;
bottom:0;
left:0;
width:0;
height:2px;
background:var(--gold);
transition:width var(--transition);
}
.nav-links a:hover::after{width:100%;}
.badge-18{
background:var(--gold);
color:var(--dark);
padding:0.3rem 0.7rem;
border-radius:var(--radius);
font-weight:700;
font-size:0.9rem;
box-shadow:0 0 15px var(--primary-glow);
}
.mobile-toggle{
display:none;
flex-direction:column;
gap:5px;
background:none;
border:none;
cursor:pointer;
padding:0.5rem;
}
.mobile-toggle span{
width:25px;
height:3px;
background:var(--gold);
display:block;
transition:var(--transition);
}

/* Hero Section */
.hero{
height:100vh;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
position:relative;
margin-top:70px;
background:linear-gradient(rgba(4,47,46,0.7),rgba(2,23,22,0.8)),url('ban.jpg') center/cover;
}
.hero::before{
content:'';
position:absolute;
inset:0;
background:linear-gradient(135deg,transparent,var(--primary-glow));
opacity:0.3;
}
.hero-content{
position:relative;
z-index:10;
max-width:800px;
padding:2rem;
}
.hero h1{
font-size:4rem;
margin-bottom:1.5rem;
color:var(--gold-light);
text-shadow:0 0 30px var(--primary-glow),2px 2px 4px rgba(0,0,0,0.8);
animation:shimmer 3s infinite;
}
.hero p{
font-size:1.3rem;
margin-bottom:2.5rem;
color:var(--white);
text-shadow:1px 1px 3px rgba(0,0,0,0.8);
}
.cta-buttons{
display:flex;
gap:1.5rem;
justify-content:center;
flex-wrap:wrap;
}
.btn{
padding:1rem 2.5rem;
font-size:1.1rem;
font-weight:700;
letter-spacing:1px;
border:2px solid;
cursor:pointer;
transition:all var(--transition);
text-transform:uppercase;
border-radius:var(--radius);
display:inline-block;
}
.btn-primary{
background:var(--gold);
border-color:var(--gold);
color:var(--dark);
box-shadow:0 5px 20px rgba(212,175,55,0.4);
}
.btn-primary:hover{
transform:scale(1.03);
box-shadow:0 8px 30px rgba(212,175,55,0.6);
background:var(--gold-light);
}
.btn-secondary{
background:transparent;
border-color:var(--primary);
color:var(--primary);
box-shadow:0 0 20px var(--primary-glow);
}
.btn-secondary:hover{
background:var(--primary);
color:var(--dark);
transform:scale(1.03);
}

/* Sections */
section{
padding:80px 0;
position:relative;
}
.section-header{
text-align:center;
margin-bottom:4rem;
}
.section-header h2{
color:var(--gold);
margin-bottom:1rem;
text-shadow:0 0 20px var(--primary-glow);
}
.section-header p{
color:var(--gray);
font-size:1.1rem;
max-width:600px;
margin:0 auto;
}

/* Cards Grid */
.cards-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:2rem;
margin-top:3rem;
}
.card{
background:var(--card-bg);
border:1px solid var(--card-border);
border-left:4px solid var(--gold);
padding:2rem;
border-radius:var(--radius);
transition:all var(--transition);
backdrop-filter:blur(10px);
position:relative;
overflow:hidden;
}
.card::before{
content:'';
position:absolute;
top:-50%;
left:-50%;
width:200%;
height:200%;
background:linear-gradient(45deg,transparent,var(--accent-glow),transparent);
transform:rotate(45deg);
transition:all 0.6s;
opacity:0;
}
.card:hover::before{
opacity:1;
animation:shimmerMove 1.5s infinite;
}
.card:hover{
transform:translateY(-8px) scale(1.03);
border-color:var(--gold);
box-shadow:0 10px 40px var(--primary-glow);
}
.card-icon{
font-size:3rem;
margin-bottom:1rem;
color:var(--gold);
text-shadow:0 0 15px var(--primary-glow);
}
.card h3{
color:var(--gold-light);
margin-bottom:1rem;
}
.card p{
color:var(--gray);
margin-bottom:0;
}

/* Gaming Section */
.gaming{
background:rgba(2,23,22,0.5);
}

/* Amenities Section */
.amenities-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:2rem;
}

/* Events Section */
.events{
background:rgba(2,23,22,0.5);
}
.event-card{
background:var(--card-bg);
border:1px solid var(--card-border);
padding:1.5rem;
border-radius:var(--radius);
margin-bottom:1.5rem;
display:flex;
justify-content:space-between;
align-items:center;
transition:all var(--transition);
}
.event-card:hover{
border-color:var(--gold);
transform:translateX(8px);
}
.event-date{
background:var(--gold);
color:var(--dark);
padding:1rem;
border-radius:var(--radius);
text-align:center;
font-weight:700;
min-width:80px;
}
.event-details h4{
color:var(--gold-light);
margin-bottom:0.5rem;
}

/* Membership Section */
.membership-tiers{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:2rem;
}
.tier-card{
background:var(--card-bg);
border:2px solid var(--card-border);
padding:2.5rem 2rem;
border-radius:var(--radius);
text-align:center;
transition:all var(--transition);
position:relative;
}
.tier-card.featured{
border-color:var(--gold);
transform:scale(1.05);
}
.tier-card:hover{
transform:scale(1.08);
box-shadow:0 15px 50px var(--primary-glow);
}
.tier-name{
font-size:1.8rem;
color:var(--gold);
margin-bottom:1.5rem;
}
.tier-benefits{
list-style:none;
margin-bottom:2rem;
}
.tier-benefits li{
padding:0.5rem 0;
border-bottom:1px solid var(--card-border);
color:var(--gray);
}
.tier-benefits li:last-child{border-bottom:none;}

/* Location Section */
.location{
background:rgba(2,23,22,0.5);
}
.location-content{
display:grid;
grid-template-columns:1fr 1fr;
gap:3rem;
align-items:center;
}
.map-placeholder{
background:var(--card-bg);
border:2px solid var(--card-border);
height:400px;
border-radius:var(--radius);
display:flex;
align-items:center;
justify-content:center;
font-size:3rem;
color:var(--primary);
}
.contact-info{
background:var(--card-bg);
padding:2rem;
border-radius:var(--radius);
border:1px solid var(--card-border);
}
.contact-info h3{
color:var(--gold);
margin-bottom:1.5rem;
}
.info-item{
display:flex;
align-items:center;
gap:1rem;
margin-bottom:1.5rem;
color:var(--gray);
}
.info-icon{
font-size:1.5rem;
color:var(--gold);
}

/* Email Form */
.email-form{
max-width:500px;
margin:2rem auto 0;
}
.form-group{
display:flex;
gap:1rem;
}
.form-group input{
flex:1;
padding:1rem;
background:var(--card-bg);
border:1px solid var(--card-border);
border-radius:var(--radius);
color:var(--white);
font-size:1rem;
}
.form-group input:focus{
outline:none;
border-color:var(--gold);
box-shadow:0 0 15px var(--primary-glow);
}

/* Disclaimer Section */
.disclaimer{
background:rgba(2,23,22,0.8);
border-top:2px solid var(--gold);
padding:3rem 0;
text-align:center;
}
.disclaimer-content{
display:flex;
align-items:center;
justify-content:center;
gap:2rem;
flex-wrap:wrap;
}
.disclaimer-badge{
font-size:4rem;
color:var(--gold);
text-shadow:0 0 20px var(--primary-glow);
}
.disclaimer-text h3{
color:var(--gold);
margin-bottom:1rem;
}
.disclaimer-text p{
color:var(--gray);
max-width:600px;
margin:0 auto;
}

/* Footer */
footer{
background:var(--dark);
padding:3rem 0 1.5rem;
border-top:1px solid var(--card-border);
}
.footer-content{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:3rem;
margin-bottom:2rem;
}
.footer-section h3{
color:var(--gold);
margin-bottom:1.5rem;
}
.footer-links{
list-style:none;
}
.footer-links li{
margin-bottom:0.8rem;
}
.footer-links a{
color:var(--gray);
transition:color var(--transition);
}
.footer-links a:hover{
color:var(--gold);
}
.footer-badge-large{
text-align:center;
}
.badge-18-large{
display:inline-block;
background:var(--gold);
color:var(--dark);
padding:1.5rem 2rem;
border-radius:var(--radius);
font-size:3rem;
font-weight:700;
box-shadow:0 0 30px var(--primary-glow);
margin-bottom:1rem;
}
.footer-bottom{
text-align:center;
padding-top:2rem;
border-top:1px solid var(--card-border);
color:var(--gray);
font-size:0.9rem;
}

/* Age Verification Modal */
.modal{
display:none;
position:fixed;
inset:0;
background:rgba(0,0,0,0.95);
z-index:9999;
align-items:center;
justify-content:center;
backdrop-filter:blur(10px);
}
.modal.active{display:flex;}
.modal-content{
background:linear-gradient(135deg,var(--bg-gradient-from),var(--bg-gradient-via));
border:2px solid var(--gold);
border-radius:var(--radius);
padding:3rem;
max-width:500px;
text-align:center;
box-shadow:0 0 60px var(--primary-glow);
position:relative;
}
.modal-icon{
font-size:5rem;
color:var(--gold);
margin-bottom:1.5rem;
text-shadow:0 0 30px var(--primary-glow);
}
.modal-content h2{
color:var(--gold-light);
margin-bottom:1.5rem;
}
.modal-content p{
color:var(--gray);
margin-bottom:2rem;
font-size:1.1rem;
}
.modal-buttons{
display:flex;
gap:1rem;
justify-content:center;
}

/* Animations */
@keyframes shimmer{
0%,100%{text-shadow:0 0 20px var(--primary-glow),2px 2px 4px rgba(0,0,0,0.8);}
50%{text-shadow:0 0 40px var(--accent-glow),0 0 60px var(--primary-glow),2px 2px 4px rgba(0,0,0,0.8);}
}
@keyframes shimmerMove{
0%{transform:translateX(-100%) rotate(45deg);}
100%{transform:translateX(100%) rotate(45deg);}
}

/* Privacy & Terms Pages */
.content-page{
padding:120px 0 80px;
}
.content-page h1{
color:var(--gold);
margin-bottom:2rem;
text-align:center;
}
.content-box{
background:var(--card-bg);
border:1px solid var(--card-border);
border-left:4px solid var(--gold);
padding:3rem;
border-radius:var(--radius);
max-width:900px;
margin:0 auto;
line-height:1.8;
}
.content-box h2{
color:var(--gold-light);
margin-top:2rem;
margin-bottom:1rem;
}
.content-box p{
color:var(--gray);
margin-bottom:1.5rem;
}
.content-box ul{
color:var(--gray);
margin-left:2rem;
margin-bottom:1.5rem;
}

/* Responsive Design */
@media(max-width:768px){
.mobile-toggle{display:flex;}
.nav-links{
position:fixed;
top:70px;
left:-100%;
flex-direction:column;
background:rgba(4,47,46,0.98);
width:100%;
padding:2rem;
gap:1rem;
transition:left var(--transition);
border-bottom:2px solid var(--gold);
}
.nav-links.active{left:0;}
.hero h1{font-size:2.5rem;}
.hero p{font-size:1.1rem;}
h1{font-size:2.5rem;}
h2{font-size:2rem;}
.cta-buttons{flex-direction:column;}
.location-content{grid-template-columns:1fr;}
.cards-grid{grid-template-columns:1fr;}
.membership-tiers{grid-template-columns:1fr;}
.tier-card.featured{transform:scale(1);}
.footer-content{grid-template-columns:1fr;}
.modal-content{margin:1rem;padding:2rem;}
}
@media(max-width:480px){
.hero h1{font-size:2rem;}
.badge-18-large{font-size:2rem;padding:1rem 1.5rem;}
.disclaimer-badge{font-size:3rem;}
}