/* =====================================================
      KledEarning Premium Gateway v3
      Inspired by Kled.ai • Stripe • Apple
===================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

*{
margin:0;
padding:0;
box-sizing:border-box;
}

html{
scroll-behavior:smooth;
}

body{

font-family:'Inter',sans-serif;

background:#0D0D0D;

background-image:
radial-gradient(circle at 10% 10%,rgba(37,99,235,.18),transparent 30%),
radial-gradient(circle at 90% 90%,rgba(6,182,212,.15),transparent 28%),
linear-gradient(180deg,#0D0D0D,#0D0D0D);

color:#fff;

overflow-x:hidden;

min-height:100vh;

position:relative;

}


/* Animated Background Glow */

body::before{

content:"";

position:fixed;

width:650px;
height:650px;

left:-220px;
top:-180px;

background:#2A2A2A;

opacity:.15;

filter:blur(180px);

animation:glowLeft 18s infinite alternate ease-in-out;

pointer-events:none;

z-index:-2;

}

body::after{

content:"";

position:fixed;

width:700px;
height:700px;

right:-250px;
bottom:-220px;

background:#3A3A3A;

opacity:.14;

filter:blur(190px);

animation:glowRight 22s infinite alternate ease-in-out;

pointer-events:none;

z-index:-2;

}

@keyframes glowLeft{

from{

transform:translate(0,0);

}

to{

transform:translate(180px,120px);

}

}

@keyframes glowRight{

from{

transform:translate(0,0);

}

to{

transform:translate(-160px,-120px);

}

}


/* Main Card */

.container{

width:95%;
max-width:560px;

margin:60px auto;

padding:38px;

border-radius:30px;

background:

linear-gradient(
180deg,
rgba(255,255,255,.08),
rgba(255,255,255,.03));

border:1px solid rgba(255,255,255,.08);

backdrop-filter:blur(28px);

box-shadow:

0 35px 80px rgba(0,0,0,.55),

0 0 80px rgba(37,99,235,.08),

inset 0 1px rgba(255,255,255,.08);

position:relative;

overflow:hidden;

transition:.45s;

}


/* Premium Shine */

.container::before{

content:"";

position:absolute;

top:0;
left:-120%;

width:60%;
height:100%;

background:

linear-gradient(

90deg,

transparent,

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

transparent);

transform:skewX(-25deg);

animation:shine 7s infinite;

}

@keyframes shine{

100%{

left:170%;

}

}

.container:hover{

transform:translateY(-8px);

box-shadow:

0 45px 90px rgba(0,0,0,.65),

0 0 120px rgba(37,99,235,.18);

}


/* Headings */

h1{

font-size:38px;

font-weight:800;

letter-spacing:-1px;

text-align:center;

margin-bottom:8px;

background:

linear-gradient(90deg,#fff,#79d8ff);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

}

.subtitle{

text-align:center;

font-size:17px;

color:#A8A8A8;

margin-bottom:34px;

line-height:1.7;

}


/* Payment Info */

.info-box{

padding:22px;

border-radius:20px;

background:

linear-gradient(
135deg,
#2A2A2A,
#3A3A3A);

box-shadow:

0 20px 40px rgba(37,99,235,.35);

margin-bottom:30px;

position:relative;

overflow:hidden;

}

.info-box::after{

content:"";

position:absolute;

right:-80px;
top:-60px;

width:180px;
height:180px;

background:rgba(255,255,255,.08);

border-radius:50%;

}

.info-box h3{

font-size:24px;

margin-bottom:10px;

font-weight:700;

}

.info-box p{

color:#D4D4D4;

line-height:1.7;

}

/*==================================================
            PART 2
Wallet • Inputs • Buttons • Success
==================================================*/


/* Wallet Card */

.wallet-box{

margin-top:10px;

padding:24px;

border-radius:22px;

background:
linear-gradient(
180deg,
rgba(255,255,255,.05),
rgba(255,255,255,.02));

border:1px solid rgba(255,255,255,.08);

box-shadow:
0 15px 40px rgba(0,0,0,.25);

transition:.35s;

}

.wallet-box:hover{

transform:translateY(-4px);

border-color:rgba(59,130,246,.45);

box-shadow:
0 20px 45px rgba(37,99,235,.18);

}

.wallet-box h2{

font-size:20px;

margin-bottom:18px;

font-weight:700;

color:#fff;

}


/* Wallet Address */

#walletAddress{

width:100%;

display:block;

padding:18px;

background:#111111;

border:1px solid rgba(255,255,255,.08);

border-radius:16px;

color:#FFFFFF;

font-size:14px;

font-weight:600;

letter-spacing:.4px;

margin-bottom:18px;

outline:none;

box-sizing:border-box;

transition:.35s;

}

#walletAddress:hover{

border-color:#2A2A2A;

}

#walletAddress:focus{

border-color:#FFFFFF;

box-shadow:
0 0 0 4px rgba(59,130,246,.15);

}


/* Copy Button */

.wallet-box button{

width:100%;

padding:16px;

border-radius:16px;

border:none;

cursor:pointer;

font-size:16px;

font-weight:700;

color:#fff;

background:
linear-gradient(
135deg,
#2A2A2A,
#3A3A3A);

box-shadow:
0 15px 35px rgba(37,99,235,.35);

transition:.35s;

}

.wallet-box button:hover{

transform:translateY(-3px);

box-shadow:
0 22px 45px rgba(37,99,235,.50);

}


/* Form */

.payment-form{

margin-top:28px;

padding:28px;

border-radius:22px;

background:
linear-gradient(
180deg,
rgba(255,255,255,.05),
rgba(255,255,255,.02));

border:1px solid rgba(255,255,255,.08);

}

.payment-form h2{

font-size:24px;

margin-bottom:22px;

font-weight:700;

}


/* Inputs */

.payment-form input{

width:100%;

padding:18px;

margin-bottom:18px;

border-radius:16px;

border:1px solid rgba(255,255,255,.08);

background:#111111;

color:white;

font-size:15px;

transition:.35s;

}

.payment-form input::placeholder{

color:#8C8C8C;

}

.payment-form input:hover{

border-color:#2A2A2A;

}

.payment-form input:focus{

outline:none;

border-color:#FFFFFF;

background:#181818;

box-shadow:

0 0 0 4px rgba(59,130,246,.15),

0 0 25px rgba(37,99,235,.20);

}


/* Submit Button */

.payment-form button{

margin-top:8px;

width:100%;

padding:18px;

border:none;

border-radius:18px;

font-size:17px;

font-weight:700;

cursor:pointer;

color:white;

background:
linear-gradient(
135deg,
#2A2A2A,
#3A3A3A);

background-size:300%;

animation:gradientMove 5s linear infinite;

box-shadow:
0 20px 45px rgba(37,99,235,.35);

transition:.35s;

}

.payment-form button:hover{

transform:translateY(-4px);

box-shadow:
0 25px 55px rgba(37,99,235,.50);

}

.payment-form button:active{

transform:scale(.98);

}

@keyframes gradientMove{

0%{

background-position:0%;

}

100%{

background-position:300%;

}

}


/* Success */

#success{

margin-top:24px;

padding:18px;

border-radius:18px;

text-align:center;

font-weight:600;

font-size:15px;

background:
linear-gradient(
135deg,
rgba(34,197,94,.15),
rgba(16,185,129,.08));

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

color:#6EE7B7;

transition:.35s;

}

#success:hover{

box-shadow:
0 0 25px rgba(34,197,94,.20);

}

/*==================================================
            PART 3
 Premium Effects • Particles • Hover • Mobile
==================================================*/


/* Floating Light */

.container::after{

content:"";

position:absolute;

width:250px;
height:250px;

right:-120px;
top:-120px;

background:radial-gradient(circle,
rgba(59,130,246,.22),
transparent 70%);

pointer-events:none;

animation:rotateGlow 12s linear infinite;

}

@keyframes rotateGlow{

0%{
transform:rotate(0deg);
}

100%{
transform:rotate(360deg);
}

}


/* Wallet Shine */

.wallet-box{

position:relative;

overflow:hidden;

}

.wallet-box::before{

content:"";

position:absolute;

top:0;
left:-130%;

width:60%;
height:100%;

background:

linear-gradient(

90deg,

transparent,

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

transparent);

transform:skewX(-25deg);

animation:walletShine 6s infinite;

}

@keyframes walletShine{

100%{

left:180%;

}

}


/* Input Hover */

.payment-form input:hover{

transform:translateY(-2px);

}


/* Button Premium */

.payment-form button{

position:relative;

overflow:hidden;

}

.payment-form button::before{

content:"";

position:absolute;

left:-120%;
top:0;

width:60%;
height:100%;

background:

linear-gradient(

90deg,

transparent,

rgba(255,255,255,.35),

transparent);

transform:skewX(-25deg);

animation:buttonShine 4s infinite;

}

@keyframes buttonShine{

100%{

left:170%;

}

}

.payment-form button:hover{

letter-spacing:.5px;

}


/* Success Glow */

#success{

animation:successPulse 2.5s infinite;

}

@keyframes successPulse{

50%{

box-shadow:

0 0 25px rgba(34,197,94,.30);

}

}


/* Scroll Animation */

.container{

animation:

fadeUp .8s,

floatCard 7s ease-in-out infinite;

}


/* Glass Blur */

.info-box,
.wallet-box,
.payment-form{

backdrop-filter:blur(25px);

}


/* Better Scrollbar */

::-webkit-scrollbar{

width:8px;

}

::-webkit-scrollbar-track{

background:#111111;

}

::-webkit-scrollbar-thumb{

background:#2A2A2A;

border-radius:50px;

}

::-webkit-scrollbar-thumb:hover{

background:#3b82f6;

}


/* Selection */

::selection{

background:#2A2A2A;

color:white;

}


/* Mobile */

@media(max-width:768px){

.container{

width:94%;

padding:24px;

border-radius:22px;

}

h1{

font-size:30px;

}

.subtitle{

font-size:15px;

}

.info-box{

padding:18px;

}

.wallet-box{

padding:18px;

}

.payment-form{

padding:20px;

}

.payment-form input{

padding:16px;

font-size:14px;

}

.payment-form button{

padding:16px;

font-size:16px;

}

#walletAddress{

font-size:13px;

}

}

/*==================================================
            PART 4
      Luxury Fintech Finish
==================================================*/


/* Premium Animated Border */

.container{

position:relative;

}

.container::before{

content:"";

position:absolute;

inset:-1px;

border-radius:30px;

padding:1px;

background:

linear-gradient(
135deg,
rgba(59,130,246,.45),
transparent,
rgba(6,182,212,.45));

-webkit-mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);

-webkit-mask-composite:xor;

mask-composite:exclude;

pointer-events:none;

opacity:.65;

}


/* Card Glow */

.container{

box-shadow:

0 35px 90px rgba(0,0,0,.55),

0 0 80px rgba(37,99,235,.12),

0 0 150px rgba(6,182,212,.06);

}


/* Floating Blue Light */

.container::after{

content:"";

position:absolute;

width:220px;

height:220px;

right:-80px;

top:-80px;

border-radius:50%;

background:

radial-gradient(circle,

rgba(59,130,246,.22),

transparent 70%);

filter:blur(30px);

animation:orbMove 10s ease-in-out infinite;

pointer-events:none;

}

@keyframes orbMove{

0%{

transform:translate(0,0);

}

50%{

transform:translate(-25px,20px);

}

100%{

transform:translate(0,0);

}

}


/* Wallet Premium */

.wallet-box{

transition:.45s;

}

.wallet-box:hover{

transform:translateY(-6px);

box-shadow:

0 18px 40px rgba(37,99,235,.18);

}


/* Inputs */

.payment-form input{

transition:.35s;

}

.payment-form input:hover{

border-color:#FFFFFF;

background:#181818;

}

.payment-form input:focus{

transform:translateY(-2px);

}


/* Buttons */

button{

position:relative;

overflow:hidden;

}

button::after{

content:"";

position:absolute;

left:-120%;

top:0;

width:55%;

height:100%;

background:

linear-gradient(

90deg,

transparent,

rgba(255,255,255,.45),

transparent);

transform:skewX(-25deg);

animation:shineButton 5s infinite;

}

@keyframes shineButton{

100%{

left:170%;

}

}

button:hover{

filter:brightness(1.08);

}


/* Success Box */

#success{

transition:.35s;

}

#success:hover{

transform:scale(1.02);

}


/* Beautiful Scrollbar */

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#111111;

}

::-webkit-scrollbar-thumb{

background:linear-gradient(

180deg,

#2A2A2A,

#3A3A3A);

border-radius:50px;

}


/* Smooth Fade */

.container,
.wallet-box,
.payment-form,
.info-box{

animation:fadeIn .8s ease;

}

@keyframes fadeIn{

from{

opacity:0;

transform:translateY(25px);

}

to{

opacity:1;

transform:translateY(0);

}


/* Premium Mobile */

@media(max-width:600px){

.container{

margin:20px auto;

padding:22px;

}

h1{

font-size:28px;

}

.subtitle{

font-size:15px;

}

.info-box h3{

font-size:20px;

}

button{

font-size:15px;

}

}