:root{

--primary:#7f1d1d;
--secondary:#991b1b;
--accent:#dc2626;

--dark:#2b0a0a;
--dark2:#4a1111;
--dark3:#6b1b1b;

--white:#ffffff;
--text:#f8fafc;

}



*{

margin:0;
padding:0;
box-sizing:border-box;

}



html,
body{

height:100%;

}



body{

font-family:"Segoe UI",Tahoma,sans-serif;

background:

linear-gradient(

135deg,

var(--dark),

var(--dark2),

var(--dark3)

);


background-attachment:fixed;

overflow-x:hidden;

color:white;

position:relative;

}





body:before{

content:"";

position:fixed;

inset:0;


background:


radial-gradient(

circle at 20% 20%,

rgba(220,38,38,.25),

transparent 30%

),


radial-gradient(

circle at 80% 80%,

rgba(153,27,27,.25),

transparent 35%

),


radial-gradient(

circle at 50% 30%,

rgba(255,255,255,.08),

transparent 25%

);



animation:bgMove 18s infinite alternate;


z-index:-2;

}



body:after{

content:"";

position:fixed;

inset:0;

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

z-index:-1;

}





@keyframes bgMove{


from{

transform:scale(1);

}


to{

transform:scale(1.12);

}


}







.glass{


background:

rgba(255,255,255,.10);


backdrop-filter:blur(20px);


-webkit-backdrop-filter:blur(20px);



border:

1px solid rgba(255,255,255,.15);



border-radius:28px;



box-shadow:

0 25px 60px rgba(0,0,0,.45);



color:white;


}





.logo-ppni{


width:120px;

height:120px;


object-fit:contain;


background:white;


padding:12px;


border-radius:50%;


box-shadow:

0 0 35px rgba(255,255,255,.25);



transition:.3s;


}



.logo-ppni:hover{


transform:scale(1.05);


}





.hero-title{


font-size:58px;

font-weight:800;


letter-spacing:1px;


line-height:65px;


color:white;



text-shadow:

0 3px 20px rgba(0,0,0,.35);


}





.hero-sub{


font-size:20px;


color:#fecaca;


line-height:32px;


}





.login-card{


max-width:470px;


width:100%;


padding:45px;


background:

rgba(255,255,255,.10);



backdrop-filter:blur(22px);


border-radius:30px;


}





.logo-login{


width:80px;


height:80px;


object-fit:contain;


background:white;


border-radius:50%;


padding:8px;


box-shadow:

0 0 25px rgba(255,255,255,.3);


}





.form-label{


font-weight:600;


color:white;


}





.form-control,
.form-select{


background:

rgba(255,255,255,.12);



border:

1px solid rgba(255,255,255,.18);



border-radius:14px;



padding:13px 15px;



color:white;


}



.form-control::placeholder{


color:#fecaca;


}



.form-control:focus,
.form-select:focus{


background:

rgba(255,255,255,.18);



border-color:#f87171;



color:white;



box-shadow:

0 0 0 .25rem rgba(220,38,38,.25);


}



.form-select option{


color:#111827;


}


.btn-login{


background:


linear-gradient(

135deg,

#dc2626,

#7f1d1d

);



border:none;


border-radius:14px;


padding:14px;


font-size:17px;


font-weight:700;


color:white;


width:100%;



transition:.3s;



box-shadow:


0 15px 30px rgba(220,38,38,.35);



}



.btn-login:hover{


transform:translateY(-3px);



background:


linear-gradient(

135deg,

#ef4444,

#991b1b

);



box-shadow:


0 20px 40px rgba(220,38,38,.45);


}





.feature-box{


background:

rgba(255,255,255,.10);


backdrop-filter:blur(20px);


border-radius:25px;


padding:25px;


border:

1px solid rgba(255,255,255,.15);


box-shadow:

0 20px 50px rgba(0,0,0,.3);


}





.feature-box h4{


color:#f87171;


font-weight:700;


}





.feature-item{


font-size:15px;


color:white;


}





.feature-item i{


color:#f87171 !important;


}





.login-card h2{


font-weight:700;


color:white;


}





.login-card p{


color:#fecaca !important;


}





hr{


border-color:

rgba(255,255,255,.15);


}





footer{


color:#fecaca !important;


font-size:14px;


}





@media(max-width:992px){


.hero-title{


font-size:42px;


line-height:48px;


}



.hero-sub{


font-size:17px;


}



.login-card{


margin:20px;


padding:35px;


}



.logo-ppni{


width:90px;


height:90px;


}


}