/* =====================================
   SEO PREMIUM PAGE
===================================== */


*{

box-sizing:border-box;

}



body{


background:

radial-gradient(
circle at top,
#064d2a,
#020b07 60%
);


color:white;


font-family:Arial, Helvetica, sans-serif;


}






/* =====================================
   CONTAINER
===================================== */


.seo-page{


max-width:1200px;


margin:auto;


padding:40px 20px;


}









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


.seo-hero{


display:grid;


grid-template-columns:1.2fr .8fr;


gap:40px;


align-items:center;


padding:60px 30px;


background:

rgba(255,255,255,.08);


border:

1px solid rgba(255,255,255,.15);


border-radius:35px;


backdrop-filter:blur(20px);


box-shadow:

0 20px 60px rgba(0,0,0,.5);


}






.seo-hero-text span{


display:inline-block;


padding:8px 18px;


border-radius:30px;


background:

rgba(0,230,118,.15);


color:#00e676;


font-weight:bold;


margin-bottom:20px;


}






.seo-hero h1{


font-size:48px;


line-height:1.1;


margin-bottom:20px;


}



.seo-hero p{


font-size:18px;


line-height:1.7;


opacity:.85;


max-width:550px;


}









/* =====================================
   BOTÃO
===================================== */


.btn-voltar{


display:inline-flex;


align-items:center;


gap:10px;


margin-top:30px;


padding:15px 30px;


border-radius:30px;


background:#00e676;


color:white;


text-decoration:none;


font-weight:bold;


transition:.3s;


}



.btn-voltar:hover{


transform:translateY(-5px);


box-shadow:

0 0 25px #00e676;


}









/* =====================================
   DASHBOARD SAAS
===================================== */


.seo-dashboard{


display:grid;


gap:20px;


}





.dashboard-card{


background:

rgba(255,255,255,.10);


border:

1px solid rgba(255,255,255,.2);


padding:25px;


border-radius:25px;


text-align:center;


backdrop-filter:blur(15px);


transition:.3s;


}



.dashboard-card:hover{


transform:translateY(-8px);


border-color:#00e676;


}





.dashboard-card i{


font-size:35px;


color:#00e676;


margin-bottom:15px;


}




.dashboard-card strong{


display:block;


font-size:42px;


color:#00e676;


margin:10px 0;


}





.dashboard-card p{


opacity:.7;


}









/* =====================================
   TITULOS
===================================== */


.pagina-titulo{


text-align:center;


margin:70px 0 40px;


}



.pagina-titulo h2{


font-size:38px;


margin-bottom:15px;


}



.pagina-titulo p{


opacity:.8;


}









/* =====================================
   GRID CARDS
===================================== */


.seo-grid{


display:grid;


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


gap:25px;


}





.seo-card{


padding:35px 25px;


text-align:center;


background:

rgba(255,255,255,.08);


border:

1px solid rgba(255,255,255,.15);


border-radius:25px;


backdrop-filter:blur(15px);


transition:.3s;


}





.seo-card:hover{


transform:translateY(-10px);


background:

rgba(0,230,118,.12);


}





.seo-card i{


font-size:45px;


color:#00e676;


margin-bottom:20px;


}




.seo-card h2{


font-size:22px;


margin-bottom:15px;


}



.seo-card p{


line-height:1.6;


opacity:.85;


}









/* =====================================
   TECNOLOGIA
===================================== */


.seo-tech{


margin-top:60px;


padding:40px;


background:

rgba(0,0,0,.25);


border-radius:30px;


}





.seo-tech h2{


text-align:center;


font-size:32px;


margin-bottom:35px;


}




.tech-grid{


display:grid;


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


gap:25px;


}





.tech-grid div{


background:

rgba(255,255,255,.08);


padding:30px;


border-radius:20px;


text-align:center;


}



.tech-grid i{


font-size:40px;


color:#00e676;


margin-bottom:15px;


}





.tech-grid h3{


margin-bottom:10px;


}





.tech-grid p{


opacity:.8;


}









/* =====================================
   TEXTO FINAL
===================================== */


.seo-text{


margin-top:50px;


padding:40px;


background:

rgba(255,255,255,.08);


border-radius:30px;


backdrop-filter:blur(15px);


}





.seo-text h2{


color:#00e676;


margin-bottom:25px;


font-size:30px;


}





.seo-text ul{


list-style:none;


padding:0;


}





.seo-text li{


padding:15px;


margin-bottom:10px;


background:

rgba(0,230,118,.10);


border-radius:15px;


}









/* =====================================
   RESPONSIVO
===================================== */


@media(max-width:1000px){


.seo-hero{


grid-template-columns:1fr;


}



.seo-grid{


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


}



}





@media(max-width:600px){


.seo-hero h1{


font-size:34px;


}




.seo-grid,


.tech-grid{


grid-template-columns:1fr;


}



.seo-text,


.seo-tech{


padding:25px;


}



}