{} *{} /*endBaseStyles*/ #IE-warning { display: none; position: fixed; width: 100%; height: 100%; z-index: 9999; background: white; } .IE-warning-message { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; } /* ===== Paleta Lucro Disruptivo (inspirada na sua imagem) ===== */ :root{ --bg: #0a0610; /* preto profundo com nuance roxa */ --bg-2:#0f0a18; /* camada para cartões */ --ink:#efecf7; /* texto principal */ --muted:#a79dbe; /* texto secundário */ --royal:#7c3aed; /* roxo royal */ --neon:#c084fc; /* roxo neon claro */ --electric:#a855f7; /* acento intermediário */ --accent:#8b5cf6; /* botão gradiente base */ --stroke:#221832; /* borda sutil */ --success:#9cff57; /* verde de confirmação (parcimonioso) */ } *{box-sizing:border-box} html,body{height:100%} body{ margin:0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial; background: radial-gradient(1200px 600px at 70% -10%, rgba(124,58,237,.35), transparent 60%), radial-gradient(800px 400px at -10% 20%, rgba(168,85,247,.2), transparent 55%), var(--bg); color:var(--ink); line-height:1.55; } a{color:inherit; text-decoration:none} .wrap{max-width:1200px; margin:0 auto; padding:0 24px} /* ===== Micro animações elegantes ===== */ .reveal{opacity:0; transform:translateY(12px); transition:opacity .6s ease, transform .6s ease} .reveal.show{opacity:1; transform:none} .glow{filter:drop-shadow(0 0 18px rgba(168,85,247,.25))} /* ===== Botões ===== */ .btn{display:inline-flex; align-items:center; gap:.6rem; padding:16px 22px; font-weight:800; border-radius:14px; background: linear-gradient(180deg, var(--neon), var(--electric)); color:#0e0618; box-shadow:0 8px 24px rgba(124,58,237,.25); transition:transform .15s ease, box-shadow .2s ease} .btn:hover{ transform:translateY(-2px); box-shadow:0 12px 34px rgba(124,58,237,.34)} .btn.secondary{ background:transparent; color:var(--ink); border:1px solid var(--stroke); box-shadow:none } /* ===== HERO ===== */ header.hero{ position:relative; padding:110px 0 80px; overflow:hidden; border-bottom:1px solid var(--stroke) } .hero-grid{ display:grid; grid-template-columns: 1.1fr .9fr; gap:56px; align-items:center } .kicker{ display:inline-flex; align-items:center; gap:10px; padding:8px 12px; border:1px solid var(--stroke); border-radius:999px; color:var(--muted); font-size:.82rem; letter-spacing:.02em } .kicker::before{ content:""; width:8px; height:8px; border-radius:999px; background:var(--neon) } h1{ font-family: "Playfair Display", serif; font-weight:800; line-height:1.05; margin:16px 0 12px; font-size: clamp(2.2rem, 1.7rem + 2.4vw, 4rem) } h1 .accent{ color:var(--neon) } .sub{ font-size: clamp(1.05rem, .9rem + .6vw, 1.35rem); color:var(--muted); margin:0 0 28px } .hero-ctas{ display:flex; gap:14px; flex-wrap:wrap } .hero-media{ position:relative; min-height:420px; border-radius:22px; background: linear-gradient(135deg, #130a22, #0d0717); border:1px solid var(--stroke); overflow:hidden } .halo{ position:absolute; inset:-40%; background:radial-gradient(600px 300px at 75% 10%, rgba(124,58,237,.30), transparent 60%) } .mock{ position:absolute; inset:16px; border-radius:18px; border:1px dashed #2a2036; display:grid; place-items:center; color:#8f86a8; text-align:center; padding:24px; font-size:.95rem } /* ===== Seções ===== */ section{ padding:80px 0; border-bottom:1px solid var(--stroke) } h2{ font-family:"Playfair Display", serif; font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.6rem); line-height:1.2; margin:0 0 10px } p.lead{ color:var(--muted); font-size:1.08rem; margin:0 0 22px } .grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:28px } .grid-3{ display:grid; grid-template-columns:repeat(3, 1fr); gap:20px } .grid-4{ display:grid; grid-template-columns:repeat(4, 1fr); gap:18px } .card{ background:var(--bg-2); border:1px solid var(--stroke); border-radius:16px; padding:20px } .card h3{ margin:6px 0 6px; font-size:1.1rem } .muted{ color:var(--muted) } .compare{ display:grid; grid-template-columns:1fr 1fr; gap:22px } .panel{ background:var(--bg-2); border:1px solid var(--stroke); border-radius:16px; padding:24px } .panel h3{ margin-top:0; font-size:.95rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted) } .panel ul{ margin:0; padding-left:18px } .proof{ display:grid; grid-template-columns:repeat(3, 1fr); gap:18px } .p{ background:var(--bg-2); border:1px dashed var(--stroke); border-radius:16px; min-height:120px; padding:18px; color:#998fb4 } .forwho ul{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:0; padding:0; list-style:none } .forwho li{ background:var(--bg-2); border:1px solid var(--stroke); padding:14px 16px; border-radius:12px } .cta-center{ text-align:center } .cta-center h2{ margin-bottom:10px } footer{ padding:44px 0; color:var(--muted) } /* Selo/insígnia circular */ .seal{ width:92px; height:92px; border-radius:50%; border:1px solid var(--stroke); display:grid; place-items:center; position:absolute; right:18px; top:18px; font-size:.7rem; color:var(--muted) } /* Responsivo */ @media (max-width: 1024px){ .hero-grid,.grid-2,.compare,.proof{ grid-template-columns:1fr } .grid-3{ grid-template-columns:1fr 1fr } } @media (max-width: 560px){ .grid-3,.grid-4{ grid-template-columns:1fr } .forwho ul{ grid-template-columns:1fr } header.hero{ padding:86px 0 64px } }