*{
margin:0;
padding:0;
box-sizing:border-box;
}

html{
scroll-behavior:smooth;
}

body{

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

background:#f8f9fd;

overflow:hidden;

min-height:100vh;

display:flex;
align-items:center;
justify-content:center;

position:relative;

padding:24px;

}

/* ==========
BACKGROUND
========== */

.bg-blob{

position:absolute;

border-radius:50%;

filter:blur(140px);

pointer-events:none;

}

.blob-1{

width:500px;
height:500px;

top:-120px;
right:-120px;

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

}

.blob-2{

width:500px;
height:500px;

bottom:-120px;
left:-120px;

background:
rgba(255,196,120,.3);

}

/* ==========
HERO
========== */

.hero{

position:relative;

z-index:2;

max-width:900px;

width:100%;

text-align:center;

}

/* ==========
NAME
========== */

.name{

display:flex;

align-items:center;

justify-content:center;

gap:10px;

font-size:18px;

font-weight:700;

color:#0f172a;

margin-bottom:35px;

}

.dot{

width:10px;
height:10px;

border-radius:50%;

background:#4f7cff;

}

/* ==========
TITLE
========== */

.hero h1{

font-size:
clamp(18px,3vw,35px);

line-height:1.1;

font-weight:800;

color:#0f172a;

margin-bottom:28px;

}

.hero h1 span{

color:#4f7cff;

}

/* ==========
DESC
========== */

.hero p{

max-width:700px;

margin:auto;

font-size:14px;

line-height:1.9;

color:#6b7280;

margin-bottom:48px;

}

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

.hero-buttons{

display:flex;

justify-content:center;

gap:20px;

margin-bottom:50px;

flex-wrap:wrap;

}

.btn-primary,
.btn-secondary{

width:230px;

height:50px;

display:flex;

align-items:center;

justify-content:center;

gap:12px;

border-radius:20px;

font-size:14px;

font-weight:700;

text-decoration:none;

transition:.3s;

}

.btn-primary{

background:
linear-gradient(
135deg,
#4f7cff,
#3366ff
);

color:white;

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

}

.btn-secondary{

background:white;

color:#0f172a;

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

}

.btn-primary:hover,
.btn-secondary:hover{

transform:
translateY(-4px);

}

/* ==========
SOCIALS
========== */

.socials{

display:flex;

justify-content:center;

gap:20px;

}

.socials a{

width:48px;
height:48px;

background:white;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

text-decoration:none;

color:#0f172a;

font-size:20px;

box-shadow:
0 5px 20px rgba(0,0,0,.06);

transition:.3s;

}

.socials a:hover{

transform:
translateY(-4px);

color:#4f7cff;

}

/* responsive */
@media(max-width:768px){

.name{

font-size:20px;

}

.hero h1 {
	font-size: 26px;
}

.hero p{

font-size:14px;

}

.btn-primary,
.btn-secondary{

width:100%;

max-width:340px;

height:50px;

font-size:14px;

}

.socials a{
	
font-size:16px;

}

}