/* CSS Reset & Variables */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
:root{
--primary:#fbbf24;
--primary-glow:rgba(251,191,36,0.4);
--secondary:#f59e0b;
--accent:#fb923c;
--accent-glow:rgba(251,146,60,0.3);
--bg-start:#1c1917;
--bg-mid:#292524;
--bg-end:#0c0a09;
--card-bg:rgba(41,37,36,0.7);
--card-border:rgba(251,191,36,0.2);
--text-light:#fff;
--text-gray:#d1d5db;
--radius:14px;
--transition:0.4s ease-out;
}
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@600;700&family=Nunito:wght@400;500;600&family=Roboto+Mono&display=swap');
body{
font-family:'Nunito',system-ui,sans-serif;
font-weight:400;
background:linear-gradient(135deg,var(--bg-start) 0%,var(--bg-mid) 50%,var(--bg-end) 100%);
color:var(--text-light);
line-height:1.6;
min-height:100vh;
overflow-x:hidden;
}
h1,h2,h3,h4,h5,h6{font-family:'Poppins',system-ui,sans-serif;font-weight:600;line-height:1.2;}
a{color:var(--primary);text-decoration:none;transition:all var(--transition);}
a:hover{color:var(--secondary);}
img{max-width:100%;display:block;}
.container{max-width:1200px;margin:0 auto;padding:0 20px;}
button,.btn{
font-family:'Nunito',sans-serif;
cursor:pointer;
border:none;
transition:all var(--transition);
}

/* Navigation */
.header{
position:sticky;
top:0;
z-index:1000;
background:rgba(28,25,23,0.85);
backdrop-filter:blur(12px);
border-bottom:1px solid var(--card-border);
}
.nav{
display:flex;
align-items:center;
justify-content:space-between;
padding:16px 0;
}
.logo{
font-size:24px;
font-weight:700;
color:var(--primary);
display:flex;
align-items:center;
gap:8px;
}
.logo svg{width:32px;height:32px;fill:var(--primary);}
.nav-links{
display:flex;
gap:32px;
list-style:none;
align-items:center;
}
.nav-links a{
color:var(--text-gray);
font-weight:500;
position:relative;
}
.nav-links a:hover{color:var(--primary);}
.badge-18{
background:var(--accent);
color:#000;
padding:4px 12px;
border-radius:20px;
font-weight:700;
font-size:14px;
box-shadow:0 0 20px var(--accent-glow);
}
.mobile-toggle{display:none;background:transparent;color:var(--primary);font-size:28px;}
@media(max-width:768px){
.mobile-toggle{display:block;}
.nav-links{
position:fixed;
top:70px;
left:-100%;
flex-direction:column;
background:rgba(28,25,23,0.98);
width:100%;
padding:30px;
transition:left 0.3s ease;
}
.nav-links.active{left:0;}
}

/* Hero Section */
.hero{
min-height:90vh;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
position:relative;
padding:80px 20px;
background:radial-gradient(ellipse at center,rgba(251,191,36,0.1) 0%,transparent 70%);
}
.hero::before{
content:'';
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background:url('ban.jpeg');
background-size:cover;
z-index:0;
}
.hero-content{position:relative;z-index:1;max-width:800px;}
.hero h1{
font-size:clamp(36px,6vw,72px);
margin-bottom:20px;
text-shadow:0 0 30px var(--primary-glow);
animation:glow 2s ease-in-out infinite alternate;
}
@keyframes glow{
from{text-shadow:0 0 20px var(--primary-glow);}
to{text-shadow:0 0 40px var(--primary-glow),0 0 60px var(--primary-glow);}
}
.hero p{font-size:clamp(18px,3vw,24px);color:var(--text-gray);margin-bottom:40px;}
.cta-btn{
background:linear-gradient(135deg,var(--primary),var(--secondary));
color:#000;
padding:18px 48px;
border-radius:var(--radius);
font-size:20px;
font-weight:600;
box-shadow:0 8px 32px var(--primary-glow),inset 0 1px 0 rgba(255,255,255,0.2);
display:inline-block;
position:relative;
overflow:hidden;
}
.cta-btn::before{
content:'';
position:absolute;
top:0;
left:-100%;
width:100%;
height:100%;
background:linear-gradient(90deg,transparent,rgba(255,255,255,0.3),transparent);
transition:left 0.5s;
}
.cta-btn:hover{transform:scale(1.03);box-shadow:0 12px 48px var(--primary-glow),inset 0 1px 0 rgba(255,255,255,0.3);}
.cta-btn:hover::before{left:100%;}
.cta-btn:active{transform:scale(0.98);}

/* Sections */
section{padding:80px 20px;position:relative;}
.section-title{
text-align:center;
font-size:clamp(32px,5vw,48px);
margin-bottom:16px;
color:var(--primary);
}
.section-subtitle{
text-align:center;
font-size:18px;
color:var(--text-gray);
margin-bottom:60px;
}

/* Download Section */
.download-section{
background:linear-gradient(135deg,rgba(251,191,36,0.05),rgba(251,146,60,0.05));
}
.download-card{
max-width:600px;
margin:0 auto;
background:var(--card-bg);
border:1px solid var(--card-border);
border-radius:var(--radius);
padding:48px;
box-shadow:0 8px 32px rgba(0,0,0,0.4),inset 0 1px 0 rgba(255,255,255,0.05);
backdrop-filter:blur(10px);
}
.download-form{display:flex;flex-direction:column;gap:20px;}
.input-group{display:flex;gap:12px;flex-wrap:wrap;}
.download-form input{
flex:1;
min-width:250px;
padding:16px 20px;
border-radius:var(--radius);
border:1px solid var(--card-border);
background:rgba(0,0,0,0.3);
color:var(--text-light);
font-size:16px;
font-family:'Nunito',sans-serif;
}
.download-form input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-glow);}
.download-form button{
padding:16px 40px;
background:linear-gradient(135deg,var(--primary),var(--secondary));
color:#000;
font-size:18px;
font-weight:600;
border-radius:var(--radius);
box-shadow:0 4px 20px var(--primary-glow);
}
.download-form button:hover{transform:scale(1.03);}
.success-msg{
display:none;
text-align:center;
padding:24px;
background:rgba(34,197,94,0.2);
border:1px solid rgba(34,197,94,0.4);
border-radius:var(--radius);
color:#86efac;
font-size:18px;
}

/* Features Grid */
.features-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:32px;
}
.feature-card{
background:var(--card-bg);
border:1px solid var(--card-border);
border-radius:var(--radius);
padding:40px 32px;
text-align:center;
transition:all var(--transition);
box-shadow:0 4px 24px rgba(0,0,0,0.3),inset 0 1px 0 rgba(255,255,255,0.05);
position:relative;
overflow:hidden;
}
.feature-card::before{
content:'';
position:absolute;
top:0;
left:0;
right:0;
height:4px;
background:linear-gradient(90deg,var(--primary),var(--accent));
transform:scaleX(0);
transition:transform var(--transition);
}
.feature-card:hover{
transform:translateY(-8px) scale(1.03);
border-color:var(--primary);
box-shadow:0 12px 48px var(--primary-glow),inset 0 1px 0 rgba(255,255,255,0.1);
}
.feature-card:hover::before{transform:scaleX(1);}
.feature-icon{
width:80px;
height:80px;
margin:0 auto 24px;
background:linear-gradient(135deg,var(--primary),var(--secondary));
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-size:40px;
box-shadow:0 8px 32px var(--primary-glow);
}
.feature-card h3{font-size:24px;margin-bottom:12px;color:var(--primary);}
.feature-card p{color:var(--text-gray);font-size:16px;}

/* About Section */
.about-content{
max-width:900px;
margin:0 auto;
background:var(--card-bg);
border:1px solid var(--card-border);
border-radius:var(--radius);
padding:48px;
box-shadow:0 8px 32px rgba(0,0,0,0.4);
}
.about-content h3{font-size:28px;color:var(--primary);margin-bottom:20px;}
.about-content p{color:var(--text-gray);margin-bottom:20px;font-size:17px;}
.trust-badges{
display:flex;
justify-content:center;
gap:32px;
margin-top:40px;
flex-wrap:wrap;
}
.badge{
display:flex;
flex-direction:column;
align-items:center;
gap:8px;
}
.badge-icon{
width:64px;
height:64px;
background:linear-gradient(135deg,var(--accent),var(--secondary));
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-size:32px;
}
.badge span{color:var(--text-gray);font-size:14px;}

/* FAQ Section */
.faq-container{max-width:800px;margin:0 auto;}
.faq-item{
background:var(--card-bg);
border:1px solid var(--card-border);
border-radius:var(--radius);
margin-bottom:16px;
overflow:hidden;
box-shadow:0 4px 16px rgba(0,0,0,0.3);
}
.faq-question{
padding:24px;
cursor:pointer;
display:flex;
justify-content:space-between;
align-items:center;
font-weight:600;
font-size:18px;
color:var(--primary);
transition:all var(--transition);
}
.faq-question:hover{background:rgba(251,191,36,0.05);}
.faq-icon{
font-size:24px;
transition:transform var(--transition);
}
.faq-item.active .faq-icon{transform:rotate(180deg);}
.faq-answer{
max-height:0;
overflow:hidden;
transition:max-height var(--transition);
padding:0 24px;
color:var(--text-gray);
}
.faq-item.active .faq-answer{max-height:500px;padding:0 24px 24px;}

/* Disclaimer Section */
.disclaimer{
background:rgba(251,146,60,0.1);
border:2px solid var(--accent);
border-radius:var(--radius);
padding:32px;
margin:60px auto;
max-width:900px;
text-align:center;
}
.disclaimer h3{color:var(--accent);font-size:32px;margin-bottom:16px;}
.disclaimer p{color:var(--text-gray);font-size:16px;line-height:1.8;}

/* Footer */
.footer{
background:rgba(12,10,9,0.8);
border-top:1px solid var(--card-border);
padding:60px 20px 30px;
}
.footer-content{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:40px;
margin-bottom:40px;
}
.footer-section h4{color:var(--primary);margin-bottom:20px;font-size:20px;}
.footer-section p,.footer-section a{color:var(--text-gray);display:block;margin-bottom:12px;font-size:15px;}
.footer-section a:hover{color:var(--primary);padding-left:4px;}
.footer-badge-large{
display:flex;
align-items:center;
justify-content:center;
gap:12px;
background:var(--accent);
color:#000;
padding:16px 32px;
border-radius:var(--radius);
font-weight:700;
font-size:24px;
margin:20px 0;
box-shadow:0 0 40px var(--accent-glow);
width:fit-content;
}
.footer-bottom{
text-align:center;
padding-top:30px;
border-top:1px solid var(--card-border);
color:var(--text-gray);
font-size:14px;
}
.footer-links{
display:flex;
justify-content:center;
gap:24px;
margin-top:16px;
flex-wrap:wrap;
}

/* Modal */
.modal{
display:none;
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.9);
z-index:2000;
align-items:center;
justify-content:center;
}
.modal.active{display:flex;}
.modal-content{
background:var(--bg-mid);
border:2px solid var(--accent);
border-radius:var(--radius);
padding:48px;
max-width:500px;
text-align:center;
box-shadow:0 20px 80px rgba(0,0,0,0.8);
animation:modalSlide 0.3s ease-out;
}
@keyframes modalSlide{
from{transform:translateY(-50px);opacity:0;}
to{transform:translateY(0);opacity:1;}
}
.modal-content h2{color:var(--accent);font-size:36px;margin-bottom:20px;}
.modal-content p{color:var(--text-gray);margin-bottom:30px;font-size:18px;line-height:1.8;}
.modal-buttons{display:flex;gap:16px;justify-content:center;}
.modal-btn{
padding:14px 32px;
border-radius:var(--radius);
font-weight:600;
font-size:16px;
}
.btn-accept{background:linear-gradient(135deg,var(--primary),var(--secondary));color:#000;}
.btn-decline{background:transparent;border:2px solid var(--text-gray);color:var(--text-gray);}
.btn-accept:hover{transform:scale(1.03);box-shadow:0 8px 32px var(--primary-glow);}
.btn-decline:hover{border-color:var(--accent);color:var(--accent);}

/* Point System Page */
.page-header{
padding:60px 20px 40px;
text-align:center;
background:radial-gradient(ellipse at center,rgba(251,191,36,0.1) 0%,transparent 70%);
}
.page-header h1{font-size:clamp(32px,5vw,56px);color:var(--primary);margin-bottom:16px;}
.page-header p{font-size:18px;color:var(--text-gray);}
.content-section{
max-width:900px;
margin:0 auto 40px;
background:var(--card-bg);
border:1px solid var(--card-border);
border-radius:var(--radius);
padding:40px;
box-shadow:0 8px 32px rgba(0,0,0,0.4);
}
.content-section h2{color:var(--primary);font-size:32px;margin-bottom:24px;}
.content-section h3{color:var(--secondary);font-size:24px;margin:32px 0 16px;}
.content-section p,.content-section li{color:var(--text-gray);margin-bottom:12px;font-size:16px;line-height:1.7;}
.content-section ul{margin-left:24px;}
.scoring-table{
width:100%;
border-collapse:collapse;
margin:24px 0;
}
.scoring-table th,.scoring-table td{
padding:16px;
text-align:left;
border-bottom:1px solid var(--card-border);
}
.scoring-table th{
background:rgba(251,191,36,0.1);
color:var(--primary);
font-weight:600;
}
.scoring-table td{color:var(--text-gray);}
.scoring-table tr:hover{background:rgba(251,191,36,0.05);}
.tip-box{
background:rgba(251,146,60,0.1);
border-left:4px solid var(--accent);
padding:20px;
margin:24px 0;
border-radius:4px;
}
.tip-box strong{color:var(--accent);}

/* Responsive */
@media(max-width:640px){
.hero{min-height:80vh;padding:60px 20px;}
section{padding:60px 20px;}
.download-card{padding:32px 24px;}
.input-group{flex-direction:column;}
.about-content,.content-section{padding:32px 24px;}
.modal-content{padding:32px 24px;margin:20px;}
.footer-content{grid-template-columns:1fr;}
.features-grid{grid-template-columns:1fr;}
}