/* ===========================
   MOBILE RESPONSIVE
   =========================== */

@media (max-width:768px){

.hero{

padding:40px 0 20px;

}

.hero .container{

display:flex;

flex-direction:column;

gap:30px;

}

.hero-content{

text-align:center;

}

.hero h1{

font-size:34px;

line-height:1.2;

}

.hero p{

font-size:16px;

padding:0 10px;

}

.hero-buttons{

display:flex;

flex-direction:column;

gap:15px;

margin-top:25px;

}

.hero-buttons a{

width:100%;

text-align:center;

}

.hero-right{

width:100%;

}

.glass-card{

margin:0 auto;

max-width:380px;

}

}


/* ===== Mobile Navigation ===== */

.mobile-menu{
display:none;
}

@media (max-width:768px){

.mobile-menu{
display:block;
background:none;
border:none;
font-size:30px;
color:#22c55e;
cursor:pointer;
}

.nav{
display:none !important;
position:absolute;
top:80px;
left:0;
width:100%;
background:#111827;
padding:20px;
flex-direction:column;
gap:15px;
border-top:1px solid rgba(255,255,255,.08);
}

.nav.show{
display:flex !important;
}

.nav a{
padding:12px 0;
}

}


@media (max-width:768px){

.header .container{

position:relative;

}

.mobile-menu{

position:absolute;

left:15px;

top:50%;

transform:translateY(-50%);

margin:0;

padding:0;

z-index:9999;

}

.logo{

margin:0 auto;

}

}


/* ===== Mobile Drawer Menu ===== */

@media (max-width:768px){

.mobile-menu{

position:absolute;

left:15px;

top:50%;

transform:translateY(-50%);

font-size:30px;

background:none;

border:none;

color:#22c55e;

z-index:10002;

}

.nav{

position:fixed !important;

top:0;

left:-270px;

width:260px;

height:100vh;

background:#111827;

display:flex !important;

flex-direction:column;

align-items:flex-start;

justify-content:flex-start;

padding:90px 25px 30px;

gap:22px;

transition:left .30s ease;

z-index:10001;

}

.nav.show{

left:0;

}

.nav a{

width:100%;

text-align:left;

font-size:17px;

padding:12px 0;

border-bottom:1px solid rgba(255,255,255,.06);

}

.login-btn{

margin-top:20px;

text-align:center !important;

}

body.menu-open::before{

content:"";

position:fixed;

top:0;

left:0;

width:100%;

height:100%;

background:rgba(0,0,0,.55);

z-index:10000;

}

}


@media (max-width:768px){

.menu-overlay{

display:none;

position:fixed;

top:0;

left:0;

width:100%;

height:100%;

background:rgba(0,0,0,.55);

z-index:10000;

}

.menu-overlay.show{

display:block;

}

.nav{

z-index:10001;

}

}


@media (max-width:768px){

.hero{
min-height:auto !important;
height:auto !important;
padding-bottom:20px !important;
}

.hero .container{
padding-bottom:0 !important;
margin-bottom:0 !important;
}

.hero-right{
margin-bottom:0 !important;
padding-bottom:0 !important;
}

.glass-card{
margin-bottom:0 !important;
}

}


/* ===== Mobile Homepage V2 ===== */

@media (max-width:768px){

.trust-strip{
display:none !important;
}

.live-stats{
margin-top:25px !important;
}

}


@media (max-width:768px){

.hero{
padding-bottom:0 !important;
margin-bottom:0 !important;
min-height:auto !important;
}

.hero-content{
margin-bottom:20px !important;
}

.hero-right{
margin-top:15px !important;
margin-bottom:10px !important;
}

.glass-card{
margin:0 auto 10px auto !important;
}

}


/* ===== Mobile Feature Cards ===== */

@media (max-width:768px){

.trust-strip{

display:block !important;

background:transparent !important;

padding:20px 15px !important;

}

.trust-strip .container{

display:grid !important;

grid-template-columns:repeat(4,1fr);

gap:10px;

}

.trust-item{

display:flex !important;

flex-direction:column;

justify-content:center;

align-items:center;

text-align:center;

background:#111827;

border:1px solid rgba(34,197,94,.25);

border-radius:14px;

padding:14px 6px;

min-height:92px;

transition:.3s;

}

.trust-item:hover{

transform:translateY(-3px);

border-color:#22c55e;

box-shadow:0 8px 18px rgba(34,197,94,.15);

}

.trust-item span{

display:block;

margin-top:8px;

font-size:11px;

font-weight:600;

line-height:1.25;

color:#ffffff;

}

.trust-item{

font-size:26px;

}

}


/* ===== HERO FINAL MOBILE FIX ===== */

@media (max-width:768px){

.hero{
min-height:unset !important;
height:auto !important;
padding-top:20px !important;
padding-bottom:0 !important;
margin-bottom:0 !important;
}

.hero .container{
display:flex !important;
flex-direction:column !important;
gap:15px !important;
align-items:center !important;
}

.hero-content{
padding:0 !important;
margin:0 !important;
}

.hero-buttons{
margin:20px 0 !important;
}

.hero-right{
margin:0 !important;
padding:0 !important;
}

.glass-card{
margin:0 !important;
}

.trust-strip{
margin-top:15px !important;
padding-top:15px !important;
}

.live-stats{
margin-top:20px !important;
}

}


/* ===== HERO MOBILE HEIGHT FIX ===== */

@media (max-width:768px){

.hero{

min-height:unset !important;

height:auto !important;

background-position:center center !important;

}

.hero .container{

min-height:auto !important;

padding-top:20px !important;

padding-bottom:0 !important;

margin-bottom:0 !important;

}

.hero-content{

padding-bottom:10px !important;

}

.hero-right{

margin:0 !important;

padding:0 !important;

}

.glass-card{

margin-bottom:0 !important;

}

}


/* ===== HERO FINAL SPACING TUNE ===== */

@media (max-width:768px){

.hero .container{
gap:8px !important;
}

.hero-content{
margin-bottom:0 !important;
padding-bottom:0 !important;
}

.hero-buttons{
margin:12px 0 !important;
}

.hero-right{
margin-top:6px !important;
}

.glass-card{
margin-top:0 !important;
margin-bottom:0 !important;
}

.trust-strip{
margin-top:6px !important;
padding-top:6px !important;
}

}


/* ===== MOBILE CTA BUTTON SIZE FIX ===== */

@media (max-width:768px){

.live-stats .btn-primary{

display:inline-flex !important;

align-items:center;

justify-content:center;

width:100%;

max-width:320px;

padding:14px 20px !important;

font-size:17px !important;

font-weight:700;

border-radius:14px !important;

margin:0 auto !important;

}

.live-stats div[style*="text-align:center"]{

margin-top:25px !important;

}

}