:root{
--branco:#c8ced3;
--papel:#d8dde1;
--cinza:#b8c0c6;
--texto2:#4f5861;
--linha:rgba(23,23,23,.18);
--sombra:0 30px 84px rgba(15,15,15,.2);
}

html,
body{
background:var(--branco);
}

body::before{
background-image:
linear-gradient(rgba(23,23,23,.06) 1px,transparent 1px),
linear-gradient(90deg,rgba(23,23,23,.06) 1px,transparent 1px),
radial-gradient(circle at 8% 20%,rgba(242,103,34,.16),transparent 25%);
}

.site-header{
background:rgba(200,206,211,.94);
}

nav ul{
gap:12px;
}

nav a{
min-height:42px;
padding:9px 19px;
border:1.5px solid rgba(242,103,34,.76);
border-radius:999px;
background:rgba(242,103,34,.045);
box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);
}

nav a:hover{
color:#fff;
border-color:#f26722;
background:#f26722;
box-shadow:0 12px 28px rgba(242,103,34,.22);
}

.hero::after{
background:linear-gradient(to top,var(--branco),transparent);
}

.about{
background:var(--branco);
}

.services{
background:
linear-gradient(135deg,rgba(15,15,15,.96),rgba(36,36,36,.94)),
var(--grafite);
color:#fff;
}

.services::before{
content:"";
position:absolute;
inset:0;
background:
radial-gradient(circle at 16% 8%,rgba(242,103,34,.2),transparent 28%),
repeating-linear-gradient(45deg,rgba(255,255,255,.035) 0 1px,transparent 1px 13px);
pointer-events:none;
}

.services .container{
position:relative;
z-index:1;
}

.services .section-kicker{
color:var(--laranja-claro);
}

.services h2,
.card h3{
color:#fff;
}

.cards{
border-top:1px solid rgba(255,255,255,.16);
}

.card{
grid-template-columns:112px 64px minmax(260px,.86fr) minmax(360px,1.2fr);
gap:24px;
align-items:start;
min-height:auto;
padding:38px 0;
border-bottom:1px solid rgba(255,255,255,.16);
}

.card::before{
grid-column:1;
grid-row:1 / span 3;
align-self:start;
color:rgba(255,255,255,.2);
}

.service-icon{
position:static;
grid-column:2;
grid-row:1;
width:54px;
height:54px;
font-size:1.25rem;
align-self:start;
margin:0;
background:var(--laranja);
color:#fff;
}

.card h3{
grid-column:3;
grid-row:1 / span 3;
margin:0;
padding-top:4px;
}

.card p{
grid-column:4;
margin:0 0 12px;
max-width:620px;
color:rgba(255,255,255,.82);
}

.card:hover .service-icon{
background:#fff;
color:var(--laranja);
}

.about-box{
background:
linear-gradient(135deg,rgba(242,103,34,.17),transparent 34%),
linear-gradient(315deg,rgba(23,23,23,.09),transparent 42%),
linear-gradient(180deg,#dfe4e7,rgba(207,214,218,.82));
}

.phone-screen,
.phone-screen.light{
background:linear-gradient(180deg,#eef1f2,#cfd6da);
}

.phone-showcase{
background:
linear-gradient(135deg,#b8c0c6,var(--branco) 41.7%,var(--laranja) 41.9%,var(--laranja) 49%,#171717 49.2%,#0f0f0f 100%);
}

.section-heading{
display:block;
text-align:center;
margin-bottom:40px;
}

.section-heading .section-kicker{
justify-content:center;
margin-bottom:18px;
}

.services h2{
text-align:center;
margin-inline:auto;
margin-bottom:0;
}

.contact-form input,
.contact-form textarea{
background:rgba(244,246,247,.95);
}

@media(max-width:1100px){
.card{
grid-template-columns:92px 58px minmax(220px,.9fr) minmax(260px,1fr);
gap:20px;
}

.phone-showcase{
background:linear-gradient(180deg,#b8c0c6,var(--branco) 40%,var(--laranja) 40.2%,var(--laranja) 48%,#171717 48.2%,#0f0f0f 100%);
}
}

@media(max-width:820px){
nav ul{
gap:6px;
}

.card{
grid-template-columns:76px 54px 1fr;
gap:14px;
padding:30px 0;
}

.card::before{
position:static;
grid-column:1;
grid-row:1;
font-size:4.2rem;
}

.service-icon{
position:static;
grid-column:2;
grid-row:1;
width:48px;
height:48px;
}

.card h3{
grid-column:3;
grid-row:1;
font-size:1.72rem;
}

.card p{
grid-column:1 / -1;
margin-bottom:10px;
}
}

@media(max-width:768px){
nav ul{
background:rgba(200,206,211,.98);
}

nav a{
justify-content:center;
border:1.5px solid rgba(242,103,34,.76);
border-radius:999px;
}

.card{
padding:28px 0;
}

.card::before{
position:static;
left:auto;
top:auto;
}

.service-icon{
position:static;
left:auto;
bottom:auto;
}
}