/* ==========================================================================
LAYOUT.CSS
Estrutura Mobile First
========================================================================== */

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

.hero {

position: relative;

overflow: hidden;

background:
linear-gradient(
180deg,
#ffffff 0%,
#f7fbff 100%
);

padding-top: 3rem;
padding-bottom: 4rem;
}

.hero::before {

content: "";

position: absolute;

width: 500px;
height: 500px;

border-radius: 50%;

background:
radial-gradient(
circle,
rgba(45,140,255,.08),
transparent 70%
);

top: -150px;
right: -150px;

pointer-events: none;
}

.hero-content {

display: grid;

gap: 2rem;

align-items: center;
}

.hero-image {

order: 2;
}

.hero-image img {

max-width: 550px;

width: 100%;

margin-inline: auto;
}

.hero-text h1 {

margin-bottom: 1rem;

font-size: clamp(2.3rem, 6vw, 4.2rem);

line-height: 1.08;
}



.hero-text p {

margin-bottom: 2rem;

max-width: 650px;

margin-inline: auto;
}

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

.services-grid {

display: grid;

gap: 1.5rem;

margin-top: 3rem;
}

/* ==========================================================================
ABOUT
========================================================================== */

.about-grid {

display: grid;

gap: 2rem;

align-items: center;
}

/* ==========================================================================
FAQ
========================================================================== */

.faq .container {

max-width: 900px;
}

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

.cta-final {

padding-top: 2rem;
}

/* ==========================================================================
FOOTER
========================================================================== */

footer {

border-top:
1px solid
var(--color-border);

padding:
3rem
1rem;

text-align:
center;
}

/* ==========================================================================
TABLET
========================================================================== */

@media (min-width: 768px) {

.services-grid {


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


}

.pain-points ul {


display: grid;

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

gap: 1rem;


}

.benefits ul {


display: grid;

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

gap: 1rem;


}
}

/* ==========================================================================
DESKTOP
========================================================================== */

@media (min-width: 1024px) {

.hero-content {


grid-template-columns:
  1fr 1fr;


}

.hero-image {


order: 2;


}

.hero-text {


order: 1;

text-align: left;


}

.hero-text h1 {

font-size: clamp(3rem, 4.4vw, 5rem);

line-height: 1.05;
}

.hero-text p {


margin-inline: 0;


}

.services-grid {


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


}

.about-grid {


grid-template-columns:
  420px 1fr;


}

.pain-points ul {


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


}

.benefits ul {


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


}
}

/* ==========================================================================
LARGE DESKTOP
========================================================================== */

@media (min-width: 1280px) {

.hero {

min-height: 78vh;

display: flex;

align-items: center;
}

.hero-content {


gap: 4rem;


}
}