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

.btn-primary{

height:56px;

padding:0 28px;

display:inline-flex;

align-items:center;

justify-content:center;

gap:10px;

border:none;

border-radius:16px;

cursor:pointer;

font-size:15px;

font-weight:600;

text-decoration:none;

background:
linear-gradient(
135deg,
#4f7cff,
#3b82f6
);

color:#fff;

transition:.3s ease;

box-shadow:
0 12px 25px rgba(79,124,255,.25);

}
.btn-primary:hover{

transform:translateY(-2px);

box-shadow:
0 18px 35px rgba(79,124,255,.35);

}
.btn-primary:active{

transform:translateY(0);

}
.btn-secondary{

height:56px;

padding:0 28px;

display:inline-flex;

align-items:center;

justify-content:center;

border-radius:16px;

text-decoration:none;

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

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

color:var(--text-color);

cursor:pointer;

transition:.3s ease;

}

.btn-secondary:hover{

border-color:#4f7cff;

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

}


.btn-outline{

height:56px;

padding:0 28px;

display:inline-flex;

align-items:center;

justify-content:center;

border-radius:16px;

background:none;

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

color:var(--text-color);

cursor:pointer;

transition:.3s ease;

}
.btn-outline:hover{

color:#4f7cff;

border-color:#4f7cff;

}


.section-header{

display:flex;

align-items:center;

justify-content:space-between;

margin:40px 0 30px 0;

}

.section-tag{

display:inline-flex;

padding:8px 16px;

border-radius:999px;

background:
rgba(79,124,255,.12);

color:var(--primary);

font-size:14px;

margin-bottom:12px;

}

.section-header h3{

font-size:34px;

}

.page-hero{

padding:60px;

border-radius:32px;

text-align:center;

}

.page-hero h1{

font-size:64px;

margin:20px 0;

}

.page-hero p{

max-width:700px;

margin:auto;

color:var(--text-light);

}

.badge-row {
	display: flex;
	gap: 5px;
}

.badge{

padding:8px 14px;

border-radius:999px;

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

color:#4f7cff;

font-size:13px;

font-weight:600;

}

.alert{

padding:18px 20px;

border-radius:16px;

margin-bottom:12px;

}

.success{

background:
rgba(34,197,94,.12);

}

.warning{

background:
rgba(245,158,11,.12);

}

.danger{

background:
rgba(239,68,68,.12);

}


/* forms */
.form-group{

display:flex;

flex-direction:column;

gap:10px;

margin-bottom:20px;

}

.form-group label{

font-size:14px;

font-weight:500;

color:var(--text-light);

}

input,
textarea,
select{

width:100%;

padding:16px 20px;

border-radius:16px;

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

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

backdrop-filter:blur(12px);

-webkit-backdrop-filter:blur(12px);

color:var(--text-color);

font-size:15px;

font-family:inherit;

transition:.3s ease;

}
input::placeholder,
textarea::placeholder{

color:rgba(255,255,255,.4);

}

input:focus,
textarea:focus,
select:focus{

outline:none;

border-color:#4f7cff;

box-shadow:

0 0 0 4px
rgba(79,124,255,.12),

0 10px 30px
rgba(79,124,255,.08);

}


textarea{

resize:vertical;

min-height:140px;

line-height:1.8;

}
input:disabled,
textarea:disabled{

opacity:.5;

cursor:not-allowed;

}


.newsletter{

padding:60px;

text-align:center;

border-radius:32px;

margin-top:60px;

}

.newsletter form{

display:flex;

justify-content:center;

gap:12px;

margin-top:24px;

}

.newsletter input{

font-family: Vazirmatn;

width:320px;

height:56px;

padding:0 20px;

border:none;

border-radius:16px;

background:#131d31;

color:white;

}


.newsletter button{

height:56px;

padding:0 24px;

border:none;

border-radius:16px;

cursor:pointer;

background:linear-gradient(
135deg,
#4f7cff,
#3b82f6
);

color:white;

font-weight:600;

font-family: Vazirmatn;

font-size:14px;

transition:.3s ease;

box-shadow:0 12px 25px rgba(79,124,255,.25);

}

.newsletter button:hover{

transform:translateY(-2px);

box-shadow:0 18px 35px rgba(79,124,255,.35);

}

.newsletter button:active{

transform:translateY(0);

box-shadow:0 10px 20px rgba(79,124,255,.2);

}

.form-demo{

padding:32px;

border-radius:24px;

max-width:700px;

}