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

.hero{

padding:55px;

border-radius:36px;

display:grid;

grid-template-columns:
2fr 1fr;

gap:40px;

}

.eyebrow{

display:inline-flex;
align-items: center;
margin-bottom:15px;

color:var(--primary-light);

}

.hero h2{

font-size:clamp(
2rem,
5vw,
3.7rem
);

line-height:1.2;

font-weight:800;

max-width:800px;

}

.hero p{

margin-top:20px;

max-width:700px;

color:var(--text-light);

}

.hero-actions{

margin-top:30px;

display:flex;

gap:15px;

}

.stats{

display:grid;

grid-template-columns:1fr;

gap:20px;

}

.stats div{

padding:24px;

background:#121c2d;

border-radius:22px;

text-align:center;

}

.stats strong{

display:block;

font-size:38px;

font-weight:800;

}

.stats span{

color:var(--text-light);

}


/* =====================
SKILLS
===================== */

.skills{

padding:40px;

border-radius:30px;

}

.skill{

margin-bottom:24px;

}

.skill-head{

display:flex;

justify-content:space-between;

margin-bottom:10px;

}

.bar{

height:12px;

background:#151f31;

border-radius:999px;

overflow:hidden;

}

.bar div{

height:100%;

background:
linear-gradient(
90deg,
#4f7cff,
#00c6ff
);

border-radius:999px;

}

/* =====================
CLIENTS
===================== */

.clients{

padding:40px;

border-radius:30px;

}

.client-grid{

display:grid;

grid-template-columns:
repeat(4,1fr);

gap:20px;

}

.client-grid span{

padding:24px;

text-align:center;

border-radius:18px;

background:#121c2d;

font-weight:700;

}


/* =====================
SERVICES
===================== */

.services h3,
.skills h3,
.testimonials h3,
.clients h3{

font-size:32px;

margin-bottom:24px;

}

.service-grid{

display:grid;

grid-template-columns:
repeat(2,1fr);

gap:24px;

}

.service-card{

padding:32px;

border-radius:24px;

transition:.35s;

}

.service-card:hover{

transform:translateY(-8px);

border-color:
rgba(79,124,255,.4);

}

.service-card h4{

font-size:22px;

margin-bottom:12px;

}

.service-card p{

color:var(--text-light);

}


/* =====================
TESTIMONIALS
===================== */

.testimonial-grid{

display:grid;

grid-template-columns:
repeat(2,1fr);

gap:24px;

}

.testimonial{

padding:30px;

border-radius:24px;

}

.testimonial p{

color:var(--text-light);

margin-bottom:20px;

}


/* ======================
CTA
====================== */

.cta-section{

margin-top:60px;

}

.cta-card{

position:relative;

overflow:hidden;

padding:80px 50px;

border-radius:36px;

background:
linear-gradient(
135deg,
rgba(79,124,255,.15),
rgba(0,198,255,.08)
);

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

text-align:center;

}

.cta-card::before{

content:"";

position:absolute;

width:500px;
height:500px;

border-radius:50%;

background:
radial-gradient(
circle,
rgba(79,124,255,.15),
transparent 70%
);

top:-250px;
left:-250px;

}

.cta-card span{

display:block;

color:#7ea1ff;

margin-bottom:12px;

}

.cta-card h2{

font-size:48px;

margin-bottom:20px;

}

.cta-card p{

max-width:650px;

margin:auto;

color:var(--text-light);

}

.cta-actions{

display:flex;

justify-content:center;

gap:16px;

margin-top:30px;

}



/* ====================
PORTFOLIO
==================== */

.portfolio-section{

margin-top:20px;

}


.view-all{

color:white;

text-decoration:none;

font-weight:600;

}

.portfolio-grid{

display:grid;

grid-template-columns:
repeat(2,1fr);

gap:28px;

}

.portfolio-card{

position:relative;

overflow:hidden;

border-radius:28px;

background:#101826;

cursor:pointer;

transition:.4s;

}

.portfolio-card:hover{

transform:
translateY(-8px);

}

.portfolio-image{

height:320px;

overflow:hidden;

}

.portfolio-image img{

width:100%;
height:100%;

object-fit:cover;

transition:.8s;

}

.portfolio-card:hover img{

transform:scale(1.08);

}

.portfolio-content{

padding:24px;

}

.portfolio-content span{

color:var(--primary-light);

font-size:14px;

}

.portfolio-content h4{

font-size:24px;

margin-top:8px;

}

.portfolio-card::before{

content:"";

position:absolute;

width:300px;
height:300px;

background:
radial-gradient(
circle,
rgba(79,124,255,.18),
transparent 70%
);

left:var(--x);
top:var(--y);

transform:
translate(-50%,-50%);

opacity:0;

transition:.3s;

pointer-events:none;

}

.portfolio-card:hover::before{

opacity:1;

}


/* ======================
BLOG
====================== */

.blog-preview{

margin-top:40px;

}

.blog-grid{

display:grid;

grid-template-columns:
repeat(3,1fr);

gap:24px;

}

.blog-card{

overflow:hidden;

border-radius:28px;

transition:.4s;

}

.blog-card:hover{

transform:
translateY(-8px);

}

.blog-image{

height:220px;

overflow:hidden;

}

.blog-image img{

width:100%;
height:100%;

object-fit:cover;

transition:.8s;

}

.blog-card:hover img{

transform:scale(1.08);

}

.blog-content{

padding:24px;

}

.blog-content span{

color:#7ea1ff;

font-size:14px;

}

.blog-content h4{

font-size:22px;

margin:10px 0;

}

.blog-content p{

color:var(--text-light);

}