/* =====================
AUDIENCE PRODUK DIGITAL SEO
===================== */


.audience-section{

background:
radial-gradient(
circle at right,
rgba(212,175,55,.12),
transparent 35%
),
#050505;


padding:110px 25px;

}






.audience-container{

max-width:1200px;

margin:auto;

}








/* HEADING */


.audience-heading{

max-width:850px;

margin:0 auto 70px;

text-align:center;

}





.audience-heading h2{

font-size:
clamp(34px,4vw,56px);


line-height:1.1;


letter-spacing:-1.5px;


font-weight:900;


color:white;


margin-bottom:25px;

}






.audience-heading p{

font-size:17px;


line-height:1.8;


color:#bdbdbd;

}






.audience-heading strong{

color:white;

}









/* GRID */


.audience-grid{

display:grid;


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


gap:26px;

}









.audience-card{

padding:35px;


border-radius:30px;


background:
linear-gradient(
145deg,
rgba(255,255,255,.08),
rgba(255,255,255,.02)
);



border:
1px solid rgba(212,175,55,.20);


transition:.35s;

}









.audience-card:hover{

transform:
translateY(-8px);


border-color:
rgba(212,175,55,.6);

}










.audience-icon{

width:60px;

height:60px;


display:flex;


align-items:center;


justify-content:center;


font-size:28px;



border-radius:20px;



background:
rgba(212,175,55,.12);



border:
1px solid rgba(212,175,55,.25);



margin-bottom:25px;

}










.audience-card h3{

font-size:22px;


font-weight:900;


color:white;


margin-bottom:15px;

}








.audience-card p{

font-size:15px;


line-height:1.7;


color:#aaa;

}











/* CTA */


.audience-cta{

margin-top:60px;


padding:38px;


border-radius:32px;



display:flex;


justify-content:space-between;


align-items:center;


gap:30px;



background:
linear-gradient(
135deg,
rgba(212,175,55,.18),
rgba(255,255,255,.04)
);



border:
1px solid rgba(212,175,55,.35);

}








.audience-cta p{

max-width:650px;


font-size:17px;


line-height:1.7;


color:white;

}








.audience-cta a{

padding:

15px 28px;



border-radius:50px;



background:
linear-gradient(
135deg,
#d4af37,
#fff1a8
);



color:#050505;



font-weight:900;



text-decoration:none;



white-space:nowrap;

}









/* RESPONSIVE */


@media(max-width:950px){


.audience-grid{

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

}


}






@media(max-width:650px){


.audience-section{

padding:

80px 20px;

}




.audience-grid{

grid-template-columns:1fr;

}



.audience-cta{

flex-direction:column;


text-align:center;

}


}