:root{ --wa-green:#25D366; --wa-dark:#128C7E; --bg:#f5f7f8; --card:#ffffff; --text:#111B21; --soft:#667781; }
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{ margin:0; background:linear-gradient(180deg,#f4f7f8,#e9edef); font-family:'Inter',sans-serif; color:var(--text); }
.main-header{ position:sticky; top:0; z-index:999; background:rgba(255,255,255,.92); backdrop-filter:blur(10px); border-bottom:1px solid rgba(0,0,0,.04); padding:14px 0; }
.brand-logo img{ height:48px; width:auto; display:block; }
.main-btn{ background:var(--wa-green); color:white; border:none; border-radius:18px; padding:14px 22px; font-weight:700; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; transition:.25s;}
.main-btn:hover{ transform:translateY(-2px); color:white; }
.nav-btn{ border:none; background:#eef3f5; border-radius:16px; padding:10px 18px; font-weight:600; }
.hero{ padding:90px 20px 110px; } .hero-brand img{ height:72px; margin-bottom:28px; }
.hero-title{ font-size:4.2rem; line-height:1.05; font-weight:800; letter-spacing:-2px; }
.hero-title span{ color:var(--wa-green); }
.hero-text{ font-size:1.15rem; color:var(--soft); max-width:620px; margin-top:24px; line-height:1.8; }
.hero-actions{ display:flex; gap:14px; margin-top:34px; flex-wrap:wrap; }
.phone{ width:320px; background:#111B21; border-radius:42px; padding:14px; margin:auto; box-shadow:0 30px 60px rgba(0,0,0,.15); }
.phone-screen{ background:#f0f2f5; border-radius:30px; overflow:hidden; }
.phone-top{ background:#128C7E; padding:18px; color:white; }
.phone-content{ padding:16px; } 
.phone-card{ background:white; border-radius:22px; padding:16px; margin-bottom:14px; }
.mock-btn{ background:var(--wa-green); color:white; border:none; border-radius:14px; width:100%; padding:12px; font-weight:700; }
.section{ padding:90px 20px; }
.section-title{ font-size:2.5rem; font-weight:800; text-align:center; margin-bottom:16px; }
.section-text{ color:var(--soft); text-align:center; max-width:760px; margin:auto; line-height:1.8; }
.feature-card{ background:white; border-radius:30px; padding:30px; height:100%; box-shadow:0 10px 30px rgba(0,0,0,.05); }
.feature-icon{ width:72px; height:72px; border-radius:22px; background:#ebf7ef; color:var(--wa-green); display:flex; align-items:center; justify-content:center; font-size:2rem; margin-bottom:20px; }
.plan-card{ background:white; border-radius:30px; padding:34px; box-shadow:0 10px 30px rgba(0,0,0,.05); height:100%; }
.plan-price{ font-size:2.5rem; font-weight:800; margin:18px 0; }
.faq-item{ background:white; border-radius:24px; padding:24px; margin-bottom:16px; box-shadow:0 8px 24px rgba(0,0,0,.04); }
.cta{ background:linear-gradient(135deg,#128C7E,#25D366); border-radius:40px; padding:70px 30px; color:white; text-align:center; }
.footer{ padding:50px 20px 80px; text-align:center; color:#7b8a93; }
.register-modal{ border:none; border-radius:32px; overflow:hidden; }
.modal-logo img{ height:72px; } .modern-input{ border:none; background:#f0f2f5; border-radius:18px; padding:15px 18px; min-height:56px; }
.modern-input:focus{ box-shadow:none; background:#eef3f5; } 
textarea.modern-input{  min-height:120px; }
.submit-btn{ width:100%; border:none; background:#25D366; color:white; border-radius:20px; padding:16px; font-weight:700; }
.success-box{ display:none; background:#ebf7ef; color:#128C7E; padding:18px; border-radius:20px; margin-top:20px; line-height:1.7; }

@media(max-width:768px){ 
.hero{ padding-top:70px; text-align:center; }
.hero-title{ font-size:2.7rem; }
.hero-actions{ justify-content:center; }
.section-title{ font-size:2rem; }
.hero-brand img{ height:60px; }
}
</style>