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

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

body{
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    background: radial-gradient(circle at top, #0b0b0b, #050505 60%);
    color:#e5e5e5;
    overflow-x:hidden;
}

/* =========================
   HERO BACKGROUND
========================= */
.hero{
    background:
    radial-gradient(circle at top,
    rgba(34,197,94,.35),
    transparent 55%),
    radial-gradient(circle at bottom,
    rgba(59,130,246,.15),
    transparent 60%);
}

/* =========================
   CARD GLASS STYLE
========================= */
.card{
    background: rgba(255,255,255,.04);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 24px;
    transition: all .25s ease;
}

.card:hover{
    transform: translateY(-6px);
    border-color: rgba(34,197,94,.4);
    box-shadow: 0 10px 40px rgba(34,197,94,.08);
}

/* =========================
   BUTTON STYLE
========================= */
.btn{
    transition: all .2s ease;
}

.btn:hover{
    transform: translateY(-2px);
    opacity: .95;
}

/* =========================
   LINKS
========================= */
a{
    text-decoration:none;
    transition:.2s ease;
}

a:hover{
    opacity:.85;
}

/* =========================
   SCROLLBAR PREMIUM
========================= */
::-webkit-scrollbar{
    width:10px;
}

::-webkit-scrollbar-track{
    background:#0a0a0a;
}

::-webkit-scrollbar-thumb{
    background: linear-gradient(180deg, #22c55e, #16a34a);
    border-radius:20px;
    border:2px solid #0a0a0a;
}

/* =========================
   SELECTION COLOR
========================= */
::selection{
    background:#22c55e;
    color:#000;
}

/* =========================
   TEXT GLOW HERO
========================= */
.hero h1,
.hero h2{
    text-shadow: 0 0 25px rgba(34,197,94,.25);
}

/* =========================
   FLOAT CART BUTTON
========================= */
.floating-cart{
    position:fixed;
    bottom:20px;
    right:20px;
    width:60px;
    height:60px;
    border-radius:50%;
    background:#22c55e;
    color:#000;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:24px;
    box-shadow:0 10px 30px rgba(34,197,94,.25);
    transition:.2s ease;
}

.floating-cart:hover{
    transform:scale(1.1);
}

/* =========================
   ANIMATION
========================= */
@keyframes fadeUp{
    from{
        opacity:0;
        transform:translateY(20px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

.fade-up{
    animation:fadeUp .8s ease both;
}