:root{

--bg:#050505;
--bg2:#0d0d0f;

--card:rgba(255,255,255,0.06);

--border:rgba(255,255,255,0.08);

--text:#ffffff;

--muted:#9ea2ad;

--accent:#d12b2f;

--accent2:#8b1114;

--green:#22c55e;

--shadow:
0 20px 80px rgba(0,0,0,0.45);

}

/* RESET */

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

html{
scroll-behavior:smooth;
}

body{

background:
linear-gradient(
180deg,
#050505 0%,
#090909 100%
);

color:var(--text);

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

overflow-x:hidden;

-webkit-font-smoothing:
antialiased;

}

/* BACKGROUND */

.bg-noise{

position:fixed;
inset:0;

opacity:.04;

pointer-events:none;

background-image:
radial-gradient(
rgba(255,255,255,.4) 1px,
transparent 1px
);

background-size:3px 3px;

z-index:-2;

}

.bg-gradient{

position:fixed;

width:700px;
height:700px;

background:
radial-gradient(
circle,
rgba(209,43,47,.18),
transparent 70%
);

top:-200px;
right:-200px;

filter:blur(80px);

z-index:-3;

}

/* CONTAINER */

.container{
width:min(1180px,92%);
margin:auto;
}

/* HERO */

.hero{
padding:40px 0 120px;
position:relative;
}

/* NAVBAR */

.navbar{

display:flex;
justify-content:space-between;
align-items:center;

margin-bottom:90px;

}

.logo{

font-size:32px;
font-weight:800;
letter-spacing:-2px;

}

.logo span{
color:var(--accent);
}

.nav-badge{

padding:14px 20px;

background:
rgba(255,255,255,0.05);

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

border-radius:999px;

backdrop-filter:blur(20px);

font-size:13px;
font-weight:600;

color:var(--muted);

}

/* HERO GRID */

.hero-grid{

display:grid;
grid-template-columns:1fr 1fr;
gap:70px;
align-items:center;

}

/* LEFT */

.hero-chip{

display:inline-flex;
align-items:center;

padding:12px 18px;

background:
rgba(255,255,255,0.05);

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

border-radius:999px;

font-size:13px;
font-weight:600;

color:#d1d5db;

backdrop-filter:blur(20px);

}

.hero-title{

margin-top:30px;

font-size:76px;
line-height:82px;

letter-spacing:-4px;

font-weight:800;

max-width:650px;

}

.hero-title span{

background:
linear-gradient(
135deg,
#ffffff,
#c9c9c9
);

-webkit-background-clip:text;
-webkit-text-fill-color:transparent;

}

.hero-text{

margin-top:28px;

max-width:560px;

font-size:18px;
line-height:34px;

color:var(--muted);

}

/* BUTTONS */

.hero-buttons{
margin-top:38px;
}

.primary-btn{

height:64px;
padding:0 34px;

border:none;

border-radius:20px;

background:
linear-gradient(
135deg,
var(--accent),
var(--accent2)
);

color:#fff;

font-size:16px;
font-weight:700;

cursor:pointer;

transition:.35s;

box-shadow:
0 20px 40px rgba(209,43,47,.25);

}

.primary-btn:hover{

transform:
translateY(-3px)
scale(1.02);

}

/* LIVE STRIP */

.live-strip{

margin-top:34px;

display:flex;
align-items:center;
gap:12px;

color:#c4c8d0;

font-size:14px;

}

.live-dot{

width:10px;
height:10px;

border-radius:50%;

background:var(--green);

box-shadow:
0 0 12px var(--green);

animation:pulse 1.5s infinite;

}

@keyframes pulse{

0%{
transform:scale(1);
opacity:1;
}

50%{
transform:scale(1.4);
opacity:.6;
}

100%{
transform:scale(1);
opacity:1;
}

}

/* APPROVAL CARD */

.approval-card{

padding:38px;

background:var(--card);

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

border-radius:34px;

backdrop-filter:blur(40px);

box-shadow:var(--shadow);

}

.card-top{

display:flex;
justify-content:space-between;
align-items:flex-start;

gap:20px;

}

.card-label{

font-size:12px;
letter-spacing:1px;

color:#9ea2ad;

font-weight:700;

}

.approval-amount{

margin-top:16px;

font-size:72px;
line-height:72px;

font-weight:800;

letter-spacing:-4px;

}

.approval-badge{

padding:12px 18px;

border-radius:999px;

background:
rgba(34,197,94,.12);

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

font-size:13px;
font-weight:700;

color:#86efac;

}

/* STATS */

.stats-grid{

margin-top:34px;

display:grid;
grid-template-columns:repeat(3,1fr);
gap:16px;

}

.stat-card{

padding:24px;

background:
rgba(255,255,255,0.04);

border:
1px solid rgba(255,255,255,0.05);

border-radius:24px;

}

.stat-label{

font-size:11px;
letter-spacing:1px;

font-weight:700;

color:#7e8591;

}

.stat-value{

margin-top:14px;

font-size:28px;
font-weight:800;

letter-spacing:-2px;

}

.green{
color:#22c55e;
}

.stat-sub{

margin-top:6px;

font-size:13px;

color:#8f96a3;

}

/* ACTIVITY */

.activity-box{

margin-top:26px;

display:flex;
flex-direction:column;
gap:14px;

}

.activity-item{

display:flex;
align-items:center;
gap:12px;

font-size:14px;

color:#d1d5db;

}

.activity-pulse{

width:8px;
height:8px;

border-radius:50%;

background:#22c55e;

}

/* CALCULATOR */

.calculator-section{
padding-bottom:120px;
}

.section-heading{

text-align:center;

max-width:760px;

margin:auto;

}

.section-chip{

display:inline-flex;

padding:12px 18px;

background:
rgba(255,255,255,0.05);

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

border-radius:999px;

font-size:13px;
font-weight:600;

color:#d1d5db;

}

.section-title{

margin-top:28px;

font-size:58px;
line-height:64px;

font-weight:800;

letter-spacing:-3px;

}

.section-text{

margin-top:22px;

font-size:18px;
line-height:34px;

color:var(--muted);

}

/* CALCULATOR CARD */

.calculator-card{

margin-top:60px;

padding:42px;

background:var(--card);

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

border-radius:36px;

backdrop-filter:blur(40px);

box-shadow:var(--shadow);

}

.calculator-grid{

display:grid;
grid-template-columns:1.2fr .8fr;
gap:40px;

}

/* AMOUNT */

.amount-display{

font-size:82px;
line-height:82px;

font-weight:800;

letter-spacing:-5px;

}

.amount-subtext{

margin-top:18px;

font-size:17px;
line-height:30px;

color:var(--muted);

}

/* RANGE */

.range-group{
margin-top:40px;
}

.range-top{

display:flex;
justify-content:space-between;
align-items:center;

margin-bottom:18px;

font-size:15px;
font-weight:600;

}

.range-slider{

width:100%;

appearance:none;

height:12px;

border-radius:999px;

background:
rgba(255,255,255,0.08);

outline:none;

}

.range-slider::-webkit-slider-thumb{

appearance:none;

width:28px;
height:28px;

border-radius:50%;

background:
linear-gradient(
135deg,
var(--accent),
var(--accent2)
);

cursor:pointer;

box-shadow:
0 10px 24px rgba(209,43,47,.4);

}

.big-btn{
margin-top:42px;
width:100%;
}

/* RESULT CARDS */

.calculator-right{

display:flex;
flex-direction:column;
gap:18px;

}

.result-card{

padding:30px;

background:
rgba(255,255,255,0.04);

border:
1px solid rgba(255,255,255,0.05);

border-radius:28px;

}

.result-label{

font-size:12px;
letter-spacing:1px;

font-weight:700;

color:#7e8591;

}

.result-value{

margin-top:14px;

font-size:42px;
font-weight:800;

letter-spacing:-2px;

}

/* POPUP */

.popup-overlay{

position:fixed;
inset:0;

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

backdrop-filter:blur(10px);

display:flex;
justify-content:center;
align-items:center;

padding:20px;

z-index:999;

}

.popup-box{

width:min(680px,100%);

padding:40px;

background:
#0e0e10;

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

border-radius:34px;

position:relative;

box-shadow:
0 30px 90px rgba(0,0,0,.55);

}

/* CLOSE */

.close-btn{

position:absolute;
top:18px;
right:18px;

width:42px;
height:42px;

border:none;

border-radius:50%;

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

color:#fff;

font-size:24px;

cursor:pointer;

}

/* PROGRESS */

.progress-wrap{
margin-bottom:40px;
}

.progress-bar{

height:10px;

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

border-radius:999px;

overflow:hidden;

}

.progress-fill{

width:50%;
height:100%;

background:
linear-gradient(
135deg,
var(--accent),
var(--accent2)
);

border-radius:999px;

transition:.4s;

}

.progress-text{

margin-top:12px;

font-size:14px;

color:var(--muted);

}

/* TITLES */

.popup-title{

font-size:40px;
line-height:44px;

font-weight:800;

letter-spacing:-2px;

}

.popup-subtitle{

margin-top:14px;

font-size:16px;
line-height:30px;

color:var(--muted);

}

/* FORM */

.form-grid{

margin-top:34px;

display:grid;
grid-template-columns:1fr 1fr;
gap:22px;

}

.full{
grid-column:1/-1;
}

.input-group{
display:flex;
flex-direction:column;
}

.input-group label{

margin-bottom:12px;

font-size:14px;
font-weight:600;

color:#d1d5db;

}

.input-group input,
.input-group select{

height:62px;

padding:0 18px;

border-radius:18px;

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

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

color:#fff;

font-size:16px;

outline:none;

transition:.3s;

}

.input-group input:focus,
.input-group select:focus{

border-color:
rgba(209,43,47,.5);

box-shadow:
0 0 0 4px rgba(209,43,47,.15);

}

/* POPUP BUTTONS */

.popup-buttons{

margin-top:34px;

display:flex;
justify-content:space-between;
gap:16px;

}

.next-btn,
.submit-btn,
.back-btn{

flex:1;

height:62px;

border:none;

border-radius:18px;

font-size:16px;
font-weight:700;

cursor:pointer;

}

.next-btn,
.submit-btn{

background:
linear-gradient(
135deg,
var(--accent),
var(--accent2)
);

color:#fff;

}

.back-btn{

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

color:#fff;

}

/* PROCESSING */

.processing-screen{

position:fixed;
inset:0;

background:#050505;

display:flex;
justify-content:center;
align-items:center;

z-index:9999;

padding:20px;

}

.processing-box{

width:min(520px,100%);

padding:50px;

text-align:center;

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

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

border-radius:34px;

backdrop-filter:blur(30px);

}

/* LOADER */

.loader-ring{

width:100px;
height:100px;

margin:auto;

border-radius:50%;

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

border-top:
6px solid var(--accent);

animation:spin 1s linear infinite;

}

@keyframes spin{

to{
transform:rotate(360deg);
}

}

.processing-title{

margin-top:34px;

font-size:42px;
line-height:46px;

font-weight:800;

letter-spacing:-2px;

}

.processing-text{

margin-top:18px;

font-size:17px;
line-height:30px;

color:var(--muted);

}

/* PROGRESS */

.processing-progress{

margin-top:34px;

height:12px;

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

border-radius:999px;

overflow:hidden;

}

.processing-progress-fill{

width:0%;
height:100%;

background:
linear-gradient(
135deg,
var(--accent),
var(--accent2)
);

border-radius:999px;

transition:1s;

}

/* SUCCESS */

.success-screen{

padding:100px 0;

}

.success-box{

max-width:860px;

margin:auto;

padding:60px;

text-align:center;

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

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

border-radius:38px;

backdrop-filter:blur(40px);

}

/* ICON */

.success-icon{

width:110px;
height:110px;

margin:auto;

display:flex;
justify-content:center;
align-items:center;

border-radius:50%;

background:
rgba(34,197,94,.12);

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

font-size:44px;
font-weight:800;

color:#22c55e;

}

.success-title{

margin-top:34px;

font-size:76px;
line-height:76px;

font-weight:800;

letter-spacing:-4px;

}

.success-subtitle{

margin-top:20px;

font-size:20px;
line-height:34px;

color:#d1d5db;

}

.success-message{

margin-top:16px;

font-size:18px;

color:var(--muted);

}

/* SUCCESS CARD */

.success-card{

margin-top:50px;

padding:40px;

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

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

border-radius:32px;

}

.success-label{

font-size:12px;
letter-spacing:1px;

font-weight:700;

color:#9ea2ad;

}

.success-amount{

margin-top:18px;

font-size:72px;
line-height:72px;

font-weight:800;

letter-spacing:-4px;

}

/* SUCCESS GRID */

.success-grid{

margin-top:34px;

display:grid;
grid-template-columns:repeat(3,1fr);
gap:18px;

}

.success-item{

padding:24px;

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

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

border-radius:24px;

}

.success-item p{

font-size:13px;

color:#9ea2ad;

}

.success-item h3{

margin-top:10px;

font-size:30px;
font-weight:800;

}

/* REF */

.reference-box{

margin-top:28px;

padding:26px;

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

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

border-radius:24px;

}

.reference-box p{

font-size:13px;

color:#9ea2ad;

}

.reference-box h3{

margin-top:12px;

font-size:34px;
font-weight:800;

color:#fff;

}

/* HIDDEN */

.hidden{
display:none !important;
}

/* MOBILE */

@media(max-width:980px){

.hero-grid,
.calculator-grid,
.stats-grid,
.success-grid,
.form-grid{

grid-template-columns:1fr;

}

.hero-title{

font-size:54px;
line-height:58px;

}

.section-title{

font-size:42px;
line-height:48px;

}

.amount-display,
.approval-amount,
.success-title,
.success-amount{

font-size:54px;
line-height:56px;

}

.popup-box,
.success-box,
.calculator-card,
.approval-card{

padding:28px;

}

.processing-box{

padding:36px;

}

.navbar{

flex-direction:column;
gap:20px;

}

}