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

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

    font-family: "Manrope", sans-serif;

}

/* ==========================================
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{

position:relative;

overflow:hidden;

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

border:1px solid rgba(255,255,255,.08);

border-radius:34px;

backdrop-filter:blur(18px);

transition:.35s;

}

.card::before{

content:"";

position:absolute;

inset:-1px;

background:

radial-gradient(circle at var(--x,50%) var(--y,50%),rgba(96,165,250,.18),transparent 35%);

opacity:0;

transition:.35s;

pointer-events:none;

}

.card:hover{

transform:translateY(-10px);

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

box-shadow:0 30px 80px rgba(0,0,0,.35);

}

.card:hover::before{

opacity:1;

}

/* ==========================================
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);

}

/* ==========================================
SCROLL REVEAL
========================================== */

.reveal{

opacity:0;

transform:translateY(60px);

transition:1s cubic-bezier(.22,1,.36,1);

will-change:transform,opacity;

}

.reveal.show{

opacity:1;

transform:translateY(0);

}