/* public/css/site.css */
:root { --primary: #2563eb; --primary-dark: #1d4ed8; --secondary: #0f172a; --accent: #10b981; --light-bg: #f8fafc; }
body.site-body { font-family: 'Inter', sans-serif; color: var(--secondary); overflow-x: hidden; background-color: var(--light-bg); }
.navbar-custom { background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(0,0,0,0.05); transition: all 0.3s ease; }
.hero { background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%); color: white; padding: 160px 0 100px; position: relative; overflow: hidden; }
.hero-glow { position: absolute; top: -20%; right: -10%; width: 80vw; height: 80vh; background: radial-gradient(circle, rgba(37,99,235,0.15) 0%, rgba(15,23,42,0) 70%); border-radius: 50%; z-index: 0; }
.hero-content { position: relative; z-index: 1; }
.hero h1 { font-weight: 900; font-size: 3.5rem; letter-spacing: -1px; line-height: 1.1; margin-bottom: 1.5rem; }
.hero h1 span { color: #3b82f6; }
.hero p { font-size: 1.25rem; color: #94a3b8; margin-bottom: 2.5rem; font-weight: 300; }
.btn-cta { background-color: var(--primary); color: white; padding: 16px 40px; font-weight: 700; font-size: 1.1rem; border-radius: 50px; transition: all 0.3s; box-shadow: 0 10px 25px -5px rgba(37, 99, 235, 0.4); border: none; display: inline-flex; align-items: center; text-decoration: none; }
.btn-cta:hover { transform: translateY(-3px); background-color: var(--primary-dark); color: white; box-shadow: 0 15px 30px -5px rgba(37, 99, 235, 0.6); }
.hero-image-wrapper { position: relative; z-index: 1; perspective: 1000px; }
.mockup-img { border-radius: 24px; border: 8px solid #334155; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5); transform: rotateY(-15deg) rotateX(5deg) scale(0.95); transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1); }
.hero-image-wrapper:hover .mockup-img { transform: rotateY(0) rotateX(0) scale(1); }
.trust-section { background: white; padding: 2rem 0; border-bottom: 1px solid #e2e8f0; }
.trust-text { font-size: 0.85rem; font-weight: 600; color: #64748b; letter-spacing: 1px; }
.pain-section { padding: 100px 0; }
.pain-card { background: white; border-radius: 20px; padding: 3rem; box-shadow: 0 10px 30px rgba(0,0,0,0.03); border: 1px solid #f1f5f9; height: 100%; }
.pain-list { list-style: none; padding: 0; }
.pain-list li { margin-bottom: 1rem; font-size: 1.1rem; display: flex; align-items: flex-start; gap: 10px; }
.features-section { background: white; padding: 100px 0; }
.feature-box { padding: 2rem; border-radius: 16px; transition: all 0.3s; border: 1px solid transparent; height: 100%; }
.feature-box:hover { background: var(--light-bg); border-color: #e2e8f0; transform: translateY(-5px); }
.feature-icon { width: 64px; height: 64px; background: rgba(37,99,235,0.1); color: var(--primary); border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 1.75rem; margin-bottom: 1.5rem; }
.pricing-card { border-radius: 20px; transition: all 0.3s; position: relative; overflow: hidden; border: 1px solid #e2e8f0; }
.pricing-card:hover { transform: translateY(-10px); box-shadow: 0 20px 40px rgba(0,0,0,0.08); }
.pricing-card.destaque { border: 2px solid var(--primary); box-shadow: 0 15px 35px rgba(37,99,235,0.15); }
.bottom-cta { background: var(--primary); padding: 80px 0; color: white; text-align: center; }
.bottom-cta h2 { font-weight: 800; }
.btn-white { background: white; color: var(--primary); font-weight: 700; padding: 15px 40px; border-radius: 50px; text-decoration: none; transition: 0.3s; display: inline-block;}
.btn-white:hover { transform: translateY(-3px); box-shadow: 0 10px 20px rgba(0,0,0,0.2); color: var(--primary-dark); }
.site-footer { background: var(--secondary); color: #94a3b8; padding: 60px 0 30px; font-size: 0.9rem; }
.site-footer a { color: #cbd5e1; text-decoration: none; transition: 0.2s; }
.site-footer a:hover { color: white; }
@media (max-width: 991px) { .hero { padding: 120px 0 60px; text-align: center; } .hero h1 { font-size: 2.5rem; } .hero-image-wrapper { margin-top: 3rem; } .mockup-img { transform: none; max-width: 280px; } }