.header { background:white; padding:20px 0; box-shadow:0 2px 6px rgba(0,0,0,.05); }
.hero { padding:120px 0; background:linear-gradient(135deg, var(--primary), var(--primary-dark)); color:white; }
.hero-grid { display:flex; align-items:center; justify-content:space-between; gap:40px; }
.hero-text h2 { font-size:42px; font-weight:700; }
.mockup { width:380px; height:320px; background:#fff3; border-radius:20px; backdrop-filter:blur(10px); box-shadow:0 10px 40px rgba(0,0,0,.1); animation:float 4s ease-in-out infinite; }
@keyframes float { 0%{ transform:translateY(0);} 50%{transform:translateY(-10px);}100%{transform:translateY(0);} }

.features { padding:80px 0; }
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:25px; }
.card { background:white; padding:30px; border-radius:16px; box-shadow:0 4px 20px rgba(0,0,0,.06); transition:.2s; }
.card:hover { transform:translateY(-6px); }

.pricing { padding:80px 0; }
.plans-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:30px; }
.plan-card { background:white; border-radius:18px; padding:35px 25px; box-shadow:0 4px 25px rgba(0,0,0,.08); text-align:center; position:relative; }
.plan-card.destaque { border:2px solid var(--primary); transform:scale(1.05); }
.badge { position:absolute; top:-12px; left:50%; transform:translateX(-50%); background:var(--primary); color:white; padding:5px 15px; border-radius:20px; font-size:14px; }
.btn-plan { display:inline-block; margin-top:20px; padding:12px 26px; border-radius:12px; background:var(--primary-dark); color:white; }
.destaque-btn { background:var(--primary); }

/* Responsividade para hero mockups: evitar corte em tablets/phones */
@media (max-width: 1024px) {
	.hero { padding:60px 0; }
	.hero-grid { flex-direction: column-reverse; gap:20px; align-items: center; }
	.hero-text { text-align: center; }
	.hero-visual { width: 100%; display:flex; justify-content:center; align-items:center; }
	.mockup-container { max-width: 620px; width: 100%; overflow: visible; }
	.mockup-desktop { width: 80%; max-width: 520px; height: auto; transform: none; }
	.mockup-mobile { width: 220px; max-width: 45%; height: auto; margin-top: 16px; }
	.mockup-screen, .mobile-screen { overflow: visible; }
}

@media (max-width: 768px) {
	.hero { padding:40px 0; }
	.hero-grid { gap:12px; }
	/* Priorizar mockup mobile em telas pequenas para evitar corte */
	.mockup-desktop { display: none; }
	.mockup-mobile { display: block; width: 260px; max-width: 70%; }
	.hero-text h1, .hero-text p, .hero-text .hero-cta { text-align: center; }
}