/* ==========================================
TYPOGRAPHY
========================================== */

h1,
h2,
h3,
h4,
h5,
h6{

    font-family:var(--font-heading);

}

/* ==========================================
SECTION
========================================== */

section{

    position:relative;

    padding:120px 0;

}

.section-header{

    max-width:760px;

    margin:0 auto 70px;

    text-align:center;

}

.section-header span{

    display:inline-block;

    margin-bottom:18px;

    color:var(--primary-light);

    font-size:14px;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

}

.section-header h2{

    font-size:clamp(38px,5vw,60px);

    line-height:1.05;

    letter-spacing:-2px;

    margin-bottom:24px;

}

.section-header p{

    color:var(--text-secondary);

    font-size:19px;

    line-height:1.8;

}

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

.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    padding:16px 34px;

    border-radius:999px;

    transition:var(--transition);

    border:none;

    font-weight:700;

}

.btn-primary{

    background:linear-gradient(135deg,#2563EB,#3B82F6);

    color:#fff;

    box-shadow:0 15px 40px rgba(37,99,235,.35);

}

.btn-primary:hover{

    transform:translateY(-4px);

    box-shadow:0 25px 60px rgba(37,99,235,.45);

}

.btn-secondary{

    background:rgba(255,255,255,.05);

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

    color:#fff;

}

.btn-secondary:hover{

    background:rgba(255,255,255,.08);

    transform:translateY(-4px);

}

/* ==========================================
CARD
========================================== */

.card{

    background:var(--card);

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

    border-radius:var(--radius-lg);

    backdrop-filter:blur(20px);

    transition:var(--transition);

}

.card:hover{

    transform:translateY(-8px);

    border-color:rgba(96,165,250,.30);

    box-shadow:var(--shadow);

}

/* ==========================================
INPUT
========================================== */

.input{

    width:100%;

    padding:18px 22px;

    border-radius:18px;

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

    background:rgba(255,255,255,.04);

    color:#fff;

    transition:var(--transition);

}

.input:focus{

    border-color:#3B82F6;

    box-shadow:0 0 0 4px rgba(59,130,246,.12);

}