:root{

    --bg:#070B14;
    --card:#111827;
    --input:#0f1728;

    --primary:#2962FF;
    --secondary:#00D395;

    --text:#FFFFFF;
    --text-muted:#A6ADBB;

    --border:rgba(255,255,255,.08);

    --radius:24px;

}

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

html{
    scroll-behavior:smooth;
}

body{

    font-family:'Inter',sans-serif;
    color:var(--text);
    overflow-x:hidden;

    background:
    radial-gradient(circle at top left,#1a4cff22 0%,transparent 35%),
    radial-gradient(circle at bottom right,#00d39518 0%,transparent 30%),
    radial-gradient(circle at center,#5b2cff18 0%,transparent 40%),
    var(--bg);

}

button,
input,
img,
a{

    transition:.25s ease;

}

::selection{

    background:var(--primary);
    color:#fff;

}

/* ===========================
 *  Navbar
 = *========================== */

.navbar{

    background:transparent;
    padding:30px 0;

}

/* ===========================
 *  Buttons
 = *========================== */

.btn-connect{

    background:var(--primary);
    color:#fff;
    border:none;
    border-radius:16px;
    padding:14px 30px;
    font-weight:600;
    cursor:pointer;

}

.btn-connect:hover{

    color:#fff;
    transform:translateY(-2px);
    box-shadow:0 15px 40px rgba(41,98,255,.35);

}

.btn-send{

    margin-top:25px;
    width:100%;
    height:58px;

    border:none;
    border-radius:18px;

    color:#fff;
    font-weight:700;

    background:linear-gradient(135deg,#2962FF,#3B82F6);

    cursor:pointer;

}

.btn-send:hover{

    color:#fff;
    transform:translateY(-2px);

    box-shadow:0 20px 45px rgba(41,98,255,.4);

}

/* ===========================
 *  Hero
 = *========================== */

.hero{

    min-height:85vh;
    display:flex;
    align-items:center;
    padding:70px 0;

}

/* ===========================
 *  Card
 = *========================== */

.send-card{

    background:rgba(17,24,39,.65);

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

    border-radius:28px;

    backdrop-filter:blur(20px);

    padding:45px;

    box-shadow:
    0 30px 80px rgba(0,0,0,.45);

}

.send-card:hover{

    border-color:rgba(255,255,255,.12);

}

/* ===========================
 *  Forms
 = *========================== */

.form-label{

    font-size:.9rem;
    font-weight:600;
    color:#E5E7EB;
    margin-bottom:.75rem;

}

.form-control{

    background:var(--input);
    border:1px solid #1f2937;

    color:#fff;

    height:58px;

    border-radius:16px;

}

.form-control:hover{

    border-color:#374151;

}

.form-control:focus{

    background:var(--input);

    color:#fff;

    border-color:var(--primary);

    outline:none;

    box-shadow:
    0 0 0 .2rem rgba(41,98,255,.15);

}

.form-control::placeholder{

    color:#9CA3AF;
    opacity:1;

}

/* ===========================
 *  Amount
 = *========================== */

.amount-wrapper{

    position:relative;

}

.amount-input{

    padding-right:70px;

}

.coin{

    position:absolute;

    right:18px;
    top:50%;

    transform:translateY(-50%);

    display:flex;
    align-items:center;

}

.coin img{

    width:32px;
    height:32px;

}

/* ===========================
 *  Showcase
 = *========================== */

.showcase{

    padding:60px 0;

}

.showcase-image{

    max-width:100px;
    width:100%;
    height:auto;

    filter:drop-shadow(0 0 40px rgba(255,60,60,.35));

}

.showcase-image:hover{

    transform:scale(1.05);

}

.chart-wrapper{
    position: relative;
    height: 280px;
    width: 100%;
}

#trxChart{
    width:100% !important;
    height:100% !important;
}