/* ==========================================================
   Benefits Section — Unified Panel Redesign
   File: static/css/landing/benefits-panel.css

   Scope: every rule is namespaced under #benefits with the
   cs-benefits-* classes, unique to this file. The existing
   .benefit-card / .benefit-icon / .benefits-grid rules in
   style.css / redesign.css / home.css are left untouched (kept
   only for reference — nothing here overrides them), and the
   section's own background treatment in benefits-depth.css is
   untouched too.

   Uses the site's existing tokens (--primary, --cyan, --violet,
   --warning, --surface, --line, --radius, --font-display) for
   the colorful icon badges and wash backgrounds, instead of a
   brand-new palette.
========================================================== */

#benefits .cs-benefits-panel{
    position:relative;
    display:grid;
    grid-template-columns:1fr 1fr;
    margin-top:10px;
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-md);
    overflow:hidden;
}

#benefits .cs-benefits-item{
    position:relative;
    padding:44px 42px;
    overflow:hidden;
    transition:background var(--transition);
}

#benefits .cs-benefits-item::before{
    content:"";
    position:absolute;
    inset:0;
    opacity:.85;
    pointer-events:none;
    transition:opacity var(--transition);
}

#benefits .cs-benefits-item:nth-child(1)::before{ background:radial-gradient(130% 150% at 0% 0%, rgba(62,123,250,.30), transparent 62%); }
#benefits .cs-benefits-item:nth-child(2)::before{ background:radial-gradient(130% 150% at 100% 0%, rgba(34,211,238,.26), transparent 62%); }
#benefits .cs-benefits-item:nth-child(3)::before{ background:radial-gradient(130% 150% at 0% 100%, rgba(139,92,246,.30), transparent 62%); }
#benefits .cs-benefits-item:nth-child(4)::before{ background:radial-gradient(130% 150% at 100% 100%, rgba(245,158,11,.26), transparent 62%); }

#benefits .cs-benefits-item:hover::before{ opacity:1; }

#benefits .cs-benefits-item::after{
    content:"";
    position:absolute;
    top:0; left:0; right:0;
    height:3px;
}

#benefits .cs-benefits-item:nth-child(1)::after{ background:linear-gradient(90deg,var(--primary),transparent); }
#benefits .cs-benefits-item:nth-child(2)::after{ background:linear-gradient(90deg,var(--cyan),transparent); }
#benefits .cs-benefits-item:nth-child(3)::after{ background:linear-gradient(90deg,var(--violet),transparent); }
#benefits .cs-benefits-item:nth-child(4)::after{ background:linear-gradient(90deg,var(--warning),transparent); }

/* internal dividers forming a 2x2 spec-sheet instead of four
   separate floating cards */
#benefits .cs-benefits-item:nth-child(1),
#benefits .cs-benefits-item:nth-child(2){
    border-bottom:1px solid var(--line);
}
#benefits .cs-benefits-item:nth-child(odd){
    border-right:1px solid var(--line);
}

#benefits .cs-benefits-item:hover{
    background:rgba(148,163,255,.035);
}

#benefits .cs-benefits-icon{
    position:relative;
    z-index:1;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:60px;
    height:60px;
    border-radius:16px;
    margin-bottom:22px;
    color:#fff;
    transition:transform var(--transition);
}

#benefits .cs-benefits-item:hover .cs-benefits-icon{
    transform:translateY(-3px) scale(1.06);
}

#benefits .cs-benefits-icon svg{
    width:27px;
    height:27px;
}

#benefits .cs-benefits-icon--primary{
    background:linear-gradient(135deg,#5B93FF,var(--primary-dark));
    box-shadow:0 12px 32px rgba(62,123,250,.6);
}
#benefits .cs-benefits-icon--cyan{
    background:linear-gradient(135deg,#67E8F9,#0891B2);
    box-shadow:0 12px 32px rgba(34,211,238,.55);
}
#benefits .cs-benefits-icon--violet{
    background:linear-gradient(135deg,#C4B5FD,#7C3AED);
    box-shadow:0 12px 32px rgba(139,92,246,.55);
}
#benefits .cs-benefits-icon--amber{
    background:linear-gradient(135deg,#FDE68A,#D97706);
    box-shadow:0 12px 32px rgba(245,158,11,.55);
}

#benefits .cs-benefits-item h3{
    position:relative;
    z-index:1;
    font-size:1.28rem;
    font-weight:700;
    letter-spacing:-.01em;
    color:var(--gray-900);
    margin-bottom:12px;
}

#benefits .cs-benefits-item p{
    position:relative;
    z-index:1;
    max-width:42ch;
    color:var(--gray-500);
    font-size:.98rem;
    line-height:1.7;
}

@media (max-width: 860px){
    #benefits .cs-benefits-panel{
        grid-template-columns:1fr;
    }
    #benefits .cs-benefits-item{
        padding:36px 28px;
        border-right:none !important;
    }
    #benefits .cs-benefits-item:nth-child(3){
        border-bottom:1px solid var(--line);
    }
}