*{
min-width:0;
}

html,
body{
max-width:100%;
}

img,
svg,
video,
canvas{
max-width:100%;
height:auto;
}

.container{
width:min(1210px,calc(100% - clamp(24px,5vw,48px)));
}

.hero-stage,
.phone-scene,
.desktop-frame,
.phone-mockup{
max-width:100%;
}

@media(max-width:1200px){
.hero-grid{
grid-template-columns:minmax(0,.9fr) minmax(380px,1fr);
gap:42px;
}

.desktop-frame{
width:min(100%,570px);
}

.hero-phone{
right:0;
width:220px;
}

.screen-copy strong{
font-size:3.15rem;
}
}

@media(max-width:1024px){
.hero,
.phone-showcase{
overflow:visible;
}

.hero-grid{
grid-template-columns:1fr;
align-items:center;
padding:92px 0 104px;
}

.hero-content{
padding-bottom:0;
}

.hero-stage{
min-height:auto;
display:grid;
grid-template-columns:1fr;
gap:26px;
place-items:center;
perspective:none;
}

.desktop-frame{
position:relative;
left:auto;
right:auto;
top:auto;
bottom:auto;
width:min(100%,680px);
transform:none;
border-width:10px;
}

.desktop-frame::after{
display:none;
}

.hero-phone{
position:relative;
left:auto;
right:auto;
top:auto;
bottom:auto;
width:min(238px,68vw);
transform:none;
margin:0 auto;
}

.phone-showcase-grid{
grid-template-columns:1fr;
gap:44px;
}

.phone-scene{
min-height:auto;
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:22px;
place-items:center;
perspective:none;
padding:6px 0 18px;
}

.phone-shadow{
display:none;
}

.phone-front,
.phone-back{
position:relative;
left:auto;
right:auto;
top:auto;
bottom:auto;
width:min(250px,100%);
transform:none;
}

.card{
grid-template-columns:88px 56px minmax(0,1fr);
gap:18px;
}

.card::before{
grid-column:1;
grid-row:1;
font-size:4.9rem;
}

.service-icon{
grid-column:2;
grid-row:1;
position:static;
}

.card h3{
grid-column:3;
grid-row:1;
}

.card p{
grid-column:1 / -1;
max-width:none;
}
}

@media(max-width:900px){
.nav{
position:relative;
min-height:74px;
}

.menu-toggle{
display:flex;
align-items:center;
justify-content:center;
}

.site-nav{
margin-left:auto;
}

nav ul{
display:none;
position:absolute;
left:0;
right:0;
top:100%;
width:100%;
padding:12px;
background:rgba(200,206,211,.98);
border:1px solid var(--linha);
box-shadow:0 20px 40px rgba(23,23,23,.12);
flex-direction:column;
align-items:stretch;
gap:8px;
z-index:1001;
}

nav ul.ativo{
display:flex;
}

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

section{
padding:clamp(64px,10vw,88px) 0;
}

.about-grid,
.contact-grid{
grid-template-columns:1fr;
gap:36px;
}

.about-box{
min-height:260px;
}
}

@media(max-width:720px){
.topbar-contact{
justify-content:center;
text-align:center;
}

.logo{
font-size:clamp(1.25rem,6vw,1.6rem);
}

.logo img{
width:42px;
height:42px;
}

.hero{
min-height:auto;
}

.hero-word{
width:100%;
white-space:normal;
font-size:clamp(4rem,22vw,6.6rem);
top:40px;
}

.hero-grid{
padding:70px 0 82px;
gap:30px;
}

.hero h1{
font-size:clamp(2.75rem,14vw,4.2rem);
line-height:.92;
}

.eyebrow,
.section-kicker{
font-size:.72rem;
line-height:1.2;
}

.desktop-frame{
border-width:7px;
border-radius:14px;
}

.desktop-bar{
height:28px;
}

.desktop-screen{
height:calc(100% - 28px);
padding:18px;
}

.screen-copy strong{
font-size:clamp(2rem,10vw,2.8rem);
}

.screen-grid{
grid-template-columns:1fr;
gap:8px;
margin-top:16px;
}

.screen-grid div{
min-height:auto;
padding:11px;
}

.screen-grid div:nth-child(n+3){
display:flex !important;
}

.phone-mockup{
border-width:6px;
border-radius:30px;
}

.phone-notch{
width:68px;
height:19px;
}

.phone-scene{
grid-template-columns:1fr;
gap:18px;
}

.phone-front,
.phone-back,
.hero-phone{
width:min(245px,82vw);
}

.phone-showcase{
background:linear-gradient(180deg,#b8c0c6,var(--branco) 34%,var(--laranja) 34.2%,var(--laranja) 44%,#171717 44.2%,#0f0f0f 100%);
}

.phone-copy{
max-width:none;
}

.card{
grid-template-columns:70px 52px minmax(0,1fr);
gap:12px;
padding:28px 0;
}

.card::before{
font-size:4rem;
}

.service-icon{
width:46px;
height:46px;
font-size:1.08rem;
}

.card h3{
font-size:1.55rem;
line-height:1.05;
}

.card p{
font-size:.96rem;
}
}

@media(max-width:480px){
.container{
width:min(100% - 24px,1210px);
}

.topbar-contact{
gap:4px 8px;
font-size:.78rem;
}

.nav{
min-height:68px;
}

.logo{
gap:8px;
}

.logo img{
width:36px;
height:36px;
}

.menu-toggle{
width:40px;
height:40px;
}

.hero-grid{
padding:62px 0 72px;
}

.hero p{
font-size:.96rem;
}

.btn{
width:100%;
justify-content:center;
}

.hero-stage{
gap:18px;
}

.desktop-frame{
aspect-ratio:4/3;
}

.screen-copy strong{
font-size:2.1rem;
}

.screen-grid span{
font-size:.8rem;
}

.hero-phone,
.phone-front,
.phone-back{
width:min(222px,82vw);
}

.phone-screen{
padding:50px 16px 18px;
}

.phone-screen h3{
font-size:1.55rem;
}

.phone-screen p,
.phone-screen small{
font-size:.74rem;
}

h2{
font-size:clamp(2.45rem,16vw,3.2rem);
}

.about-box{
font-size:2.05rem;
min-height:220px;
}

.card{
grid-template-columns:1fr;
gap:10px;
padding:26px 0;
}

.card::before,
.service-icon,
.card h3,
.card p{
grid-column:1;
}

.card::before{
font-size:3.5rem;
line-height:.8;
}

.service-icon{
width:48px;
height:48px;
}

.contact-form{
padding:16px;
}

input,
textarea,
button{
font-size:.95rem;
}

.whatsapp{
width:52px;
height:52px;
right:12px;
bottom:12px;
}
}

@media(max-width:360px){
.hero h1{
font-size:2.48rem;
}

.hero-phone,
.phone-front,
.phone-back{
width:min(205px,84vw);
}

.screen-grid div{
padding:9px;
}
}