/*=====================================================
 KLED AI PAYMENT GATEWAY
 Light Theme V2
======================================================*/

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

:root{

--bg:#f6f6f4;
--card:#ffffff;
--card2:#fbfbfa;

--text:#141414;
--muted:#6f6f72;

--border:#e9e9e7;

--primary:#111111;

--radius:26px;

--shadow:
0 10px 35px rgba(0,0,0,.05);

}

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

html{
scroll-behavior:smooth;
}

body{

font-family:"Fragment Mono", monospace;

background:var(--bg);

color:var(--text);

overflow-x:hidden;

min-height:100vh;

position:relative;

}



/*======================================
BACKGROUND
======================================*/

body::before{

content:"";

position:fixed;

inset:0;

background:

radial-gradient(circle at top left,
rgba(0,0,0,.025),
transparent 40%),

radial-gradient(circle at bottom right,
rgba(0,0,0,.02),
transparent 35%);

z-index:-3;

}

body::after{

content:"";

position:fixed;

inset:0;

background-image:

radial-gradient(rgba(0,0,0,.045) 1px,
transparent 1px);

background-size:120px 120px;

opacity:.25;

pointer-events:none;

z-index:-2;

}



/*======================================
NAVBAR
======================================*/

.navbar{

max-width:1320px;

margin:auto;

padding:20px 30px;

display:flex;

justify-content:space-between;

align-items:center;

}

.logo{

display:flex;

align-items:center;

gap:14px;

}

.logo-image{

width:145px;

height:auto;

display:block;

}

.logo-text{

display:flex;

flex-direction:column;

}

.logo-text span{

font-size:18px;

font-weight:700;

}

.logo-text small{

margin-top:4px;

font-size:12px;

color:var(--muted);

}

.home-btn{

padding:13px 24px;

border-radius:14px;

background:#111;

color:#fff;

text-decoration:none;

font-size:14px;

transition:.25s;

}

.home-btn:hover{

transform:translateY(-2px);

background:#222;

}



/*======================================
HERO
======================================*/

.hero{

max-width:920px;

margin:70px auto;

text-align:center;

padding:0 25px;

}

.badge{

display:inline-block;

padding:10px 20px;

border:1px solid var(--border);

border-radius:999px;

background:#fff;

font-size:13px;

color:#555;

margin-bottom:28px;

}

.hero h1{

font-size:58px;

line-height:1.1;

font-weight:700;

letter-spacing:-2px;

margin-bottom:22px;

}

.hero p{

font-size:18px;

line-height:1.9;

color:var(--muted);

max-width:760px;

margin:auto;

}



/*======================================
LAYOUT
======================================*/

.container{

max-width:1260px;

margin:auto;

padding:0 30px 80px;

}

.top-grid{

display:grid;

grid-template-columns:1fr 360px;

gap:28px;

margin-bottom:32px;

}



/*======================================
CARDS
======================================*/

.wallet-card,

.status-card,

.payment-card{

background:#fff;

border:1px solid var(--border);

border-radius:28px;

box-shadow:var(--shadow);

}

.wallet-card{

padding:38px;

}

.status-card{

padding:34px;

}

.payment-card{

padding:42px;

}



/*======================================
WALLET
======================================*/

.card-head{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:32px;

}

.card-label{

display:block;

font-size:13px;

margin-bottom:6px;

color:#777;

}

.card-head h2{

font-size:30px;

font-weight:700;

}

.live-status{

padding:9px 16px;

border-radius:999px;

background:#f2f8f2;

color:#2f7b44;

font-size:13px;

}

.wallet-box{

display:flex;

gap:14px;

margin-bottom:25px;

}

.wallet-box input{

flex:1;

height:64px;

border-radius:16px;

border:1px solid var(--border);

background:#fafafa;

padding:0 20px;

font-size:14px;

font-family:inherit;

color:#111;

outline:none;

}

.wallet-box input:focus{

border-color:#111;

}

.copy-btn{

padding:0 28px;

border:none;

border-radius:16px;

background:#111;

color:#fff;

cursor:pointer;

font-family:inherit;

transition:.25s;

}

.copy-btn:hover{

background:#222;

transform:translateY(-2px);

}

.wallet-note{

font-size:14px;

line-height:1.8;

color:var(--muted);

}



/*======================================
STATUS
======================================*/

.status-head{

font-size:24px;

margin-bottom:28px;

}

.status-body{

min-height:220px;

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

text-align:center;

}

.waiting-icon{

font-size:58px;

margin-bottom:20px;

}

.status-body h3{

font-size:26px;

margin-bottom:12px;

}

.status-body p{

font-size:14px;

line-height:1.8;

max-width:240px;

color:var(--muted);

}

/*======================================
FORM
======================================*/

.form-header{

margin-bottom:38px;

}

.form-header h2{

font-size:34px;

font-weight:700;

margin-bottom:10px;

letter-spacing:-1px;

}

.form-header p{

font-size:15px;

color:var(--muted);

line-height:1.8;

}

.form-grid{

display:grid;

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

gap:22px;

}

.input-group{

display:flex;

flex-direction:column;

}

.input-group label{

margin-bottom:10px;

font-size:13px;

color:#555;

}

.input-group input{

height:62px;

border:1px solid var(--border);

border-radius:16px;

background:#fafafa;

padding:0 18px;

font-size:14px;

font-family:inherit;

outline:none;

transition:.25s;

}

.input-group input:focus{

background:#fff;

border-color:#111;

box-shadow:0 0 0 4px rgba(0,0,0,.05);

}

.input-group input::placeholder{

color:#9ca3af;

}



/*======================================
BUTTON
======================================*/

.submit-area{

margin-top:34px;

}

.submit-btn{

width:100%;

height:64px;

border:none;

border-radius:18px;

background:#111;

color:#fff;

font-size:16px;

font-family:inherit;

cursor:pointer;

transition:.25s;

}

.submit-btn:hover{

background:#222;

transform:translateY(-2px);

}

.submit-btn:active{

transform:scale(.99);

}

.submit-note{

margin-top:15px;

font-size:13px;

color:var(--muted);

text-align:center;

}



/*======================================
TIMELINE
======================================*/

.timeline{

margin-top:70px;

}

.timeline-title{

font-size:36px;

text-align:center;

margin-bottom:45px;

letter-spacing:-1px;

}

.timeline-grid{

display:grid;

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

gap:20px;

}

.step{

background:#fff;

border:1px solid var(--border);

border-radius:24px;

padding:28px;

transition:.25s;

}

.step:hover{

transform:translateY(-6px);

box-shadow:0 10px 30px rgba(0,0,0,.05);

}

.step-icon{

width:54px;

height:54px;

border-radius:50%;

background:#111;

color:#fff;

display:flex;

align-items:center;

justify-content:center;

margin-bottom:20px;

font-size:18px;

}

.step h4{

font-size:18px;

margin-bottom:10px;

}

.step p{

font-size:14px;

line-height:1.8;

color:var(--muted);

}



/*======================================
SECURITY
======================================*/

.security{

display:grid;

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

gap:20px;

margin-top:65px;

}

.security-card{

background:#fff;

border:1px solid var(--border);

border-radius:24px;

padding:28px;

transition:.25s;

}

.security-card:hover{

transform:translateY(-4px);

}

.security-card h4{

font-size:19px;

margin-bottom:12px;

}

.security-card p{

font-size:14px;

line-height:1.8;

color:var(--muted);

}



/*======================================
STATUS RESULT
======================================*/

.payment-info{

display:flex;

flex-direction:column;

gap:14px;

text-align:left;

}

.payment-info h3{

margin-bottom:6px;

}

.payment-info p{

font-size:15px;

word-break:break-word;

line-height:1.8;

}

.success-state{

text-align:center;

}

.success-icon{

width:74px;

height:74px;

margin:auto;

margin-bottom:22px;

border-radius:50%;

background:#ecfdf3;

color:#22c55e;

display:flex;

align-items:center;

justify-content:center;

font-size:34px;

font-weight:700;

}

.success-state h3{

margin-bottom:12px;

}

.success-state p{

line-height:1.8;

color:var(--muted);

}



/*======================================
FOOTER
======================================*/

.footer{

margin-top:90px;

padding:40px;

text-align:center;

font-size:14px;

color:#777;

border-top:1px solid var(--border);

}



/*======================================
SCROLLBAR
======================================*/

::-webkit-scrollbar{

width:9px;

}

::-webkit-scrollbar-thumb{

background:#cfcfcf;

border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

background:#999;

}



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

@media(max-width:1100px){

.top-grid{

grid-template-columns:1fr;

}

.timeline-grid{

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

}

.security{

grid-template-columns:1fr;

}

}

@media(max-width:768px){

.navbar{

padding:20px;

flex-direction:column;

gap:20px;

}

.logo-image{

width:120px;

}

.hero{

margin:45px auto;

}

.hero h1{

font-size:40px;

}

.hero p{

font-size:16px;

}

.container{

padding:0 20px 60px;

}

.wallet-card,

.status-card,

.payment-card{

padding:24px;

border-radius:22px;

}

.wallet-box{

flex-direction:column;

}

.copy-btn{

height:58px;

width:100%;

}

.form-grid{

grid-template-columns:1fr;

}

.timeline-grid{

grid-template-columns:1fr;

}

.security{

grid-template-columns:1fr;

}

.timeline-title{

font-size:30px;

}

}

@media(max-width:480px){

.hero h1{

font-size:30px;

}

.card-head{

flex-direction:column;

align-items:flex-start;

gap:18px;

}

.card-head h2{

font-size:24px;

}

.logo-image{

width:100px;

}

.step{

padding:22px;

}

.submit-btn{

height:58px;

}

}