/* css/home.css */

/* ---------- Home hero / intro ---------- */
.home-hero{
    padding: 1.75rem;
    border-radius: 22px;
    border: 1px solid rgba(16,185,129,.35);

    background:
            radial-gradient(120% 120% at 0% 0%, rgba(59,130,246,.22), transparent 55%),
            radial-gradient(120% 120% at 100% 100%, rgba(16,185,129,.22), transparent 55%),
            linear-gradient(135deg, rgba(59,130,246,.18), rgba(16,185,129,.18));

    box-shadow:
            0 18px 40px rgba(0,0,0,.10),
            inset 0 0 0 1px rgba(255,255,255,.15);
}

.home-hero h1,
.home-hero h2{
    font-weight: 700;
    letter-spacing: -0.03em;
}

.home-hero p{
    max-width: 720px;
    color: rgba(0,0,0,.65);
}

/* Dark mode text tuning */
[data-bs-theme="dark"] .home-hero p{
    color: rgba(255,255,255,.70);
}

/* ---------- Grid cards ---------- */
.home-grid{
    margin-top: 1.25rem;
}

.home-grid .card{
    height: 100%;
    position: relative;
    overflow: hidden;
}

/* Gradient accent line on top of cards */
.home-grid .card::before{
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(
            90deg,
            rgba(59,130,246,.9),
            rgba(16,185,129,.9)
    );
}

/* Hover effect = slightly alive */
.home-grid .card:hover{
    transform: translateY(-3px);
    box-shadow:
            0 20px 45px rgba(0,0,0,.15),
            0 0 0 1px rgba(59,130,246,.25);
}

/* ---------- Icon / stat blocks ---------- */
.home-stat{
    display: flex;
    align-items: center;
    gap: .75rem;
}

.home-stat .icon{
    width: 42px;
    height: 42px;
    border-radius: 12px;

    display: grid;
    place-items: center;

    background: linear-gradient(
            135deg,
            rgba(59,130,246,.25),
            rgba(16,185,129,.25)
    );

    box-shadow: inset 0 0 0 1px rgba(255,255,255,.25);
}

.home-stat .value{
    font-size: 1.4rem;
    font-weight: 700;
}

/* ---------- Welcome badge ---------- */
.home-badge{
    display: inline-block;
    padding: .4rem .75rem;
    border-radius: 999px;
    font-size: .85rem;
    font-weight: 600;

    background: linear-gradient(
            135deg,
            rgba(59,130,246,.20),
            rgba(16,185,129,.20)
    );

    border: 1px solid rgba(59,130,246,.35);
}