/* ==========================================================
   BUTTONS
========================================================== */

.ws-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    min-height:48px;
    padding:13px 24px;
    border:1px solid transparent;
    border-radius:var(--radius-md);
    font-weight:var(--fw-semibold);
    line-height:1;
    transition:background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}

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

.ws-btn-primary{
    background:var(--ws-primary);
    color:var(--ws-white);
    box-shadow:0 12px 28px rgba(0,232,122,.22);
}

.ws-btn-primary:hover{
    background:var(--ws-primary-dark);
    color:var(--ws-white);
}

.ws-btn-outline{
    border-color:var(--ws-border-strong);
    background:var(--ws-white);
    color:var(--ws-text);
}

.ws-btn-outline:hover{
    border-color:var(--ws-primary);
    color:var(--ws-primary);
    box-shadow:var(--shadow-sm);
}

/* ==========================================================
   CARDS AND SECTIONS
========================================================== */

.section{
    position:relative;
}

.section-compact{
    padding:48px 0;
}

.section-muted{
    background:var(--ws-muted);
}

.section-dark{
    background:#111827;
    color:var(--ws-white);
}

.section-dark p,
.section-dark span{
    color:rgba(255,255,255,.72);
}

.section-heading{
    max-width:760px;
    margin:0 auto 48px;
    text-align:center;
}

.section-heading.align-left{
    margin:0;
    text-align:left;
}

.section-heading h2{
    margin-top:12px;
    color:var(--ws-text);
    font-size:var(--fs-3xl);
}

.section-dark .section-heading h2{
    color:var(--ws-white);
}

.section-heading p{
    margin-top:16px;
    font-size:var(--fs-lg);
}

.eyebrow{
    display:inline-flex;
    align-items:center;
    min-height:32px;
    padding:6px 12px;
    border:1px solid rgba(0,232,122,.18);
    border-radius:var(--radius-pill);
    background:rgba(0,232,122,.10);
    color:var(--ws-primary-dark);
    font-size:var(--fs-sm);
    font-weight:var(--fw-semibold);
}

.section-dark .eyebrow{
    border-color:rgba(255,255,255,.16);
    background:rgba(255,255,255,.08);
    color:var(--ws-white);
}

.ws-card{
    border:1px solid var(--ws-border);
    border-radius:var(--radius-lg);
    background:var(--ws-white);
    box-shadow:var(--shadow-sm);
    transition:transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.ws-card:hover{
    transform:translateY(-4px);
    border-color:rgba(0,232,122,.24);
    box-shadow:var(--shadow-md);
}