/* ============================================
   WIMOB LANDING v5
   ============================================ */

:root{
  --slate-950:#020617;--slate-900:#0f172a;--slate-800:#1e293b;--slate-700:#334155;
  --slate-600:#475569;--slate-500:#64748b;--slate-400:#94a3b8;--slate-300:#cbd5e1;
  --slate-200:#e2e8f0;--slate-100:#f1f5f9;--slate-50:#f8fafc;
  --blue-600:#2563eb;--blue-500:#3b82f6;--blue-400:#60a5fa;--blue-100:#dbeafe;--blue-50:#eff6ff;
  --cyan:#22d3ee;
  --white:#ffffff;
  --font:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  --max-w:1140px;--r:12px;--r-sm:8px;--r-lg:20px;--r-xl:28px;
}

/* Reset */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:hidden;max-width:100%}
body{font-family:var(--font);color:var(--slate-700);background:var(--white);line-height:1.6;overflow-x:hidden;max-width:100%;-webkit-font-smoothing:antialiased;position:relative}
img{max-width:100%;display:block}a{text-decoration:none;color:inherit}ul{list-style:none}
button{background:none;border:none;font:inherit;cursor:pointer}
hr{border:none;border-top:1px solid var(--slate-200);margin:20px 0}
:focus-visible{outline:2px solid var(--blue-500);outline-offset:2px}

/* Layout */
.container{max-width:var(--max-w);margin:0 auto;padding:0 24px}
.container-sm{max-width:740px}
.w-full{width:100%}
.bg-slate{background:var(--slate-50)}

/* Typography */
.label{font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--blue-500);margin-bottom:10px}
.label.accent{color:var(--cyan)}
.label.light{color:var(--blue-400)}
.title{font-size:clamp(1.8rem,3.5vw,2.65rem);font-weight:800;line-height:1.15;letter-spacing:-.035em;color:var(--slate-900);margin-bottom:16px;max-width:680px}
.title.light{color:var(--white)}
.subtitle{font-size:1.05rem;color:var(--slate-500);line-height:1.7;max-width:600px}
.subtitle.light-muted{color:var(--slate-400)}
.gradient-text{background:linear-gradient(135deg,var(--blue-500),var(--cyan));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:600;font-size:.93rem;border-radius:var(--r-sm);padding:12px 24px;transition:all .25s cubic-bezier(.16,1,.3,1);white-space:nowrap;cursor:pointer}
.btn-primary{background:var(--blue-600);color:var(--white);box-shadow:0 1px 3px rgba(0,0,0,.08),0 4px 12px rgba(37,99,235,.3)}
.btn-primary:hover{background:#1d4ed8;transform:translateY(-1px);box-shadow:0 2px 6px rgba(0,0,0,.1),0 8px 20px rgba(37,99,235,.35)}
.btn-outline{border:1.5px solid var(--slate-200);color:var(--slate-700)}
.btn-outline:hover{border-color:var(--slate-300);background:var(--slate-50)}
.btn-white{background:var(--white);color:var(--slate-900);font-weight:700}
.btn-white:hover{background:var(--slate-100);transform:translateY(-1px);box-shadow:0 8px 24px rgba(0,0,0,.15)}
.btn-sm{padding:8px 16px;font-size:.85rem}
.btn-lg{padding:14px 28px;font-size:1rem;border-radius:var(--r)}
.link-subtle{font-size:.9rem;font-weight:500;color:var(--slate-500);transition:color .2s}
.link-subtle:hover{color:var(--slate-800)}

/* ── Nav ── */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;height:64px;display:flex;align-items:center;transition:background .3s,border-color .3s,box-shadow .3s;border-bottom:1px solid transparent}
.nav.scrolled{background:rgba(255,255,255,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-color:var(--slate-100);box-shadow:0 1px 3px rgba(0,0,0,.04)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;width:100%;max-width:var(--max-w);margin:0 auto;padding:0 24px}
.logo{font-family:'Montserrat',sans-serif;font-size:1.8rem;font-weight:600;letter-spacing:normal;color:var(--slate-900);-webkit-font-smoothing:antialiased}
.nav-links{display:flex;gap:28px}.nav-links a{font-size:.9rem;font-weight:500;color:var(--slate-500);transition:color .2s}.nav-links a:hover{color:var(--slate-900)}
.nav-cta{display:flex;align-items:center;gap:16px}
.burger{display:none;flex-direction:column;gap:5px;width:28px;padding:4px 0}
.burger span{display:block;height:2px;background:var(--slate-700);border-radius:2px;transition:all .3s}
.burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}.burger.open span:nth-child(2){opacity:0}.burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mobile-panel{position:fixed;inset:0;z-index:99;background:var(--white);padding:80px 24px 24px;display:flex;flex-direction:column;gap:4px;transform:translateX(100%);transition:transform .35s cubic-bezier(.16,1,.3,1);visibility:hidden}
.mobile-panel.open{transform:translateX(0);visibility:visible}
.mp-link{font-size:1.15rem;font-weight:600;padding:14px 0;color:var(--slate-900);border-bottom:1px solid var(--slate-100)}

/* ── Hero ── */
.hero{position:relative;padding:140px 0 0;text-align:center;overflow:hidden;background:var(--white)}
.hero-accent{position:absolute;top:-280px;left:50%;transform:translateX(-50%);width:900px;height:900px;background:radial-gradient(circle,rgba(59,130,246,.07) 0%,transparent 65%);pointer-events:none}
.hero-body{max-width:720px;margin:0 auto;position:relative;z-index:1}
.hero h1{font-size:clamp(2.25rem,5.5vw,3.5rem);font-weight:900;line-height:1.1;letter-spacing:-.045em;color:var(--slate-900);margin-bottom:24px}
.hero-sub{font-size:clamp(1rem,1.8vw,1.12rem);color:var(--slate-500);max-width:600px;margin:0 auto 36px;line-height:1.75}
.hero-actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.hero-micro{font-size:.82rem;color:var(--slate-400);margin-bottom:64px}
.pill{display:inline-flex;align-items:center;gap:8px;background:var(--blue-50);border:1px solid var(--blue-100);padding:5px 16px 5px 6px;border-radius:100px;font-size:.82rem;font-weight:600;color:var(--slate-600);margin-bottom:28px;transition:background .2s}
.pill:hover{background:var(--blue-100)}
.pill-badge{background:var(--blue-600);color:white;font-size:.68rem;font-weight:700;padding:2px 8px;border-radius:100px;text-transform:uppercase;letter-spacing:.04em}

/* Browser mockup */
.hero-visual{max-width:1000px;margin:0 auto;position:relative;z-index:1}
.browser-chrome{display:flex;align-items:center;gap:12px;padding:12px 18px;background:var(--slate-900);border-radius:var(--r-lg) var(--r-lg) 0 0;border:1px solid var(--slate-800);border-bottom:none}
.browser-light-chrome{background:var(--slate-100);border-color:var(--slate-200)}
.chrome-dots{display:flex;gap:6px}
.chrome-dots i{width:10px;height:10px;border-radius:50%;background:var(--slate-700)}
.browser-light-chrome .chrome-dots i{background:var(--slate-300)}
.chrome-url{font-size:.75rem;font-weight:500;color:var(--slate-500);background:var(--slate-800);padding:4px 12px;border-radius:6px;margin-left:8px}
.browser-light-chrome .chrome-url{background:var(--white);color:var(--slate-500)}
.browser-viewport{border:1px solid var(--slate-800);border-top:none;background:var(--slate-950);min-height:320px;overflow:hidden;position:relative}
.browser-light-vp{border-color:var(--slate-200);background:var(--slate-100)}
.browser-viewport img{width:100%;display:block}
.img-fallback{display:flex;align-items:center;justify-content:center;min-height:400px;color:var(--slate-600);font-weight:800;font-size:1.5rem}
.img-fallback::after{content:'wimob'}

/* ── Trust bar ── */
.trust-bar{padding:20px 0;overflow:hidden;border-bottom:1px solid var(--slate-100)}
.marquee{overflow:hidden;mask-image:linear-gradient(to right,transparent,black 8%,black 92%,transparent);-webkit-mask-image:linear-gradient(to right,transparent,black 8%,black 92%,transparent)}
.marquee-track{display:flex;width:max-content;animation:scroll-x 30s linear infinite;--scroll-dist:-50%}
.marquee-track span{white-space:nowrap;font-size:.85rem;font-weight:600;color:var(--slate-400);margin-right:12px}
.marquee-track .sep{color:var(--slate-200);margin-right:12px}
@keyframes scroll-x{0%{transform:translateX(0)}100%{transform:translateX(var(--scroll-dist))}}

/* ── Sections ── */
.section{padding:100px 0;overflow-x:hidden}

/* ── Timeline (Como Funciona) ── */
.timeline{position:relative;margin-top:64px;display:flex;flex-direction:column;gap:0}
.tl-line{position:absolute;left:32px;top:0;bottom:0;width:2px;background:linear-gradient(to bottom,var(--blue-100),var(--slate-200));z-index:0}
.tl-step{display:flex;gap:32px;position:relative;z-index:1;padding-bottom:48px}
.tl-step:last-child{padding-bottom:0}
.tl-marker{width:64px;height:64px;border-radius:50%;background:var(--white);border:2px solid var(--blue-500);display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 4px 12px rgba(59,130,246,.12);position:relative;z-index:2}
.tl-marker span{font-size:.8rem;font-weight:800;color:var(--blue-600);letter-spacing:.02em}
.tl-card{flex:1;background:var(--white);border:1px solid var(--slate-200);border-radius:var(--r-lg);padding:32px;transition:all .35s ease}
.tl-card:hover{border-color:var(--blue-400);box-shadow:0 8px 32px rgba(59,130,246,.08);transform:translateY(-2px)}
.tl-card h3{font-size:1.2rem;font-weight:700;color:var(--slate-900);margin-bottom:8px;letter-spacing:-.01em}
.tl-card p{font-size:.95rem;color:var(--slate-500);line-height:1.65;margin-bottom:20px}
.tl-metrics{display:flex;gap:32px}
.tl-metric{display:flex;flex-direction:column}
.tl-metric strong{font-size:1.5rem;font-weight:800;color:var(--blue-600);letter-spacing:-.03em}
.tl-metric span{font-size:.75rem;color:var(--slate-400);font-weight:500}

/* ── Features (Plataforma) ── */
.features{display:flex;flex-direction:column;gap:20px;margin-top:48px}
.feat-card{background:var(--white);border:1px solid var(--slate-200);border-radius:var(--r-lg);padding:36px 32px;transition:all .35s ease;overflow:hidden}
.feat-card:hover{border-color:var(--blue-400);box-shadow:0 8px 32px rgba(59,130,246,.06);transform:translateY(-2px)}
.feat-icon{width:44px;height:44px;border-radius:var(--r-sm);background:var(--blue-50);color:var(--blue-600);display:flex;align-items:center;justify-content:center;margin-bottom:20px}
.feat-icon svg{width:22px;height:22px}
.feat-card h3{font-size:1.15rem;font-weight:700;color:var(--slate-900);margin-bottom:8px;letter-spacing:-.01em}
.feat-card p{font-size:.95rem;color:var(--slate-500);line-height:1.6}

.feat-hero{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.feat-row{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.feat-wide{display:flex;align-items:center;gap:40px;justify-content:space-between}

/* Skeleton form mock */
.mock-form{background:var(--slate-50);border:1px solid var(--slate-200);border-radius:var(--r);padding:24px;display:flex;flex-direction:column;gap:14px}
.mock-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.mock-label{font-size:.85rem;font-weight:600;color:var(--slate-600);flex-shrink:0;min-width:85px}
.mock-input{flex:1;min-height:36px;background:var(--white);border:1px solid var(--slate-200);border-radius:var(--r-sm);display:flex;align-items:center;gap:6px;padding:4px 8px;flex-wrap:wrap}
.mock-tag{background:var(--slate-100);color:var(--slate-700);font-size:.7rem;font-weight:600;padding:4px 8px;border-radius:4px;border:1px solid var(--slate-200);line-height:1}
.mock-toggle{width:36px;height:20px;background:var(--blue-500);border-radius:12px;position:relative;flex-shrink:0}
.mock-toggle::after{content:'';position:absolute;top:2px;right:2px;width:16px;height:16px;background:var(--white);border-radius:50%}

.feat-stats{display:flex;gap:36px;flex-shrink:0}
.fs{text-align:center}
.fs strong{display:block;font-size:1.65rem;font-weight:800;color:var(--slate-900);letter-spacing:-.03em}
.fs span{font-size:.78rem;color:var(--slate-500)}

/* ── IA Section ── */
.section-dark{background:var(--slate-950);color:var(--white);overflow:hidden}
.ai-grid{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center}
.check-list{margin-top:28px;display:flex;flex-direction:column;gap:16px}
.check-list li{display:flex;gap:12px;font-size:.95rem;color:var(--slate-400);line-height:1.55}
.check-list svg{width:22px;height:22px;color:var(--cyan);flex-shrink:0;margin-top:2px}
.check-list strong{color:var(--white)}

.chat-win{background:var(--slate-900);border:1px solid var(--slate-800);border-radius:var(--r-lg);overflow:hidden;box-shadow:0 24px 64px rgba(0,0,0,.4)}
.chat-bar{display:flex;align-items:center;gap:14px;padding:14px 18px;border-bottom:1px solid var(--slate-800)}
.chat-dots{display:flex;gap:6px}.chat-dots i{width:10px;height:10px;border-radius:50%;background:var(--slate-700)}
.chat-bar span{font-size:.82rem;font-weight:600;color:var(--slate-400)}
.chat-body{padding:24px 20px;display:flex;flex-direction:column;gap:16px}
.msg{max-width:88%;font-size:.9rem;line-height:1.55}
.msg-user{align-self:flex-end;background:var(--blue-600);color:var(--white);padding:12px 16px;border-radius:var(--r) var(--r) 0 var(--r)}
.msg-ai{display:flex;gap:10px;color:var(--slate-400)}
.msg-ai p{margin-bottom:6px}.msg-ai strong{color:var(--white)}
.ai-badge{width:28px;height:28px;border-radius:8px;background:rgba(34,211,238,.12);color:var(--cyan);display:flex;align-items:center;justify-content:center;font-size:.65rem;font-weight:800;flex-shrink:0}
.file-chip{display:inline-flex;align-items:center;gap:10px;background:rgba(255,255,255,.05);border:1px solid var(--slate-700);padding:10px 14px;border-radius:var(--r-sm);color:var(--white);font-weight:500;font-size:.85rem}
.file-chip svg{width:18px;height:18px;color:#22c55e}

/* ── W/Site ── */
.wsite-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:64px;align-items:center}
.arrow-list{margin:20px 0 28px;display:flex;flex-direction:column;gap:10px}
.arrow-list li{position:relative;padding-left:22px;font-size:.95rem;color:var(--slate-600);line-height:1.55}
.arrow-list li::before{content:'→';position:absolute;left:0;color:var(--blue-500);font-weight:700}

/* ── Pricing ── */
.pricing{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:48px;align-items:stretch}
.price-card{background:var(--white);border:1px solid var(--slate-200);border-radius:var(--r-xl);padding:36px 28px;transition:all .35s ease;position:relative;display:flex;flex-direction:column}
.price-card:hover{transform:translateY(-4px);box-shadow:0 12px 32px rgba(59,130,246,.08)}
.price-card.featured{border:2px solid var(--blue-500);box-shadow:0 0 0 1px rgba(59,130,246,.08),0 12px 40px rgba(59,130,246,.12)}
.price-card.featured:hover{box-shadow:0 0 0 1px rgba(59,130,246,.12),0 20px 48px rgba(59,130,246,.16)}
.pc-badge{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--blue-600);color:var(--white);font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;padding:4px 14px;border-radius:100px;box-shadow:0 4px 12px rgba(37,99,235,.3)}
.pc-head{margin-bottom:20px}
.pc-head h3{font-size:1.35rem;font-weight:800;color:var(--slate-900);margin-bottom:2px}
.pc-head p{font-size:.85rem;color:var(--slate-500)}
.pc-price{margin-bottom:28px;padding-bottom:28px;border-bottom:1px solid var(--slate-100)}
.pc-price .curr{font-size:1rem;font-weight:600;color:var(--slate-500);vertical-align:top}
.pc-price .val{font-size:3rem;font-weight:900;color:var(--slate-900);letter-spacing:-.04em;line-height:1;margin:0 4px}
.pc-price .per{font-size:.82rem;color:var(--slate-400)}
.pc-list{display:flex;flex-direction:column;gap:12px;margin-bottom:32px;flex-grow:1}
.pc-list li{font-size:.9rem;color:var(--slate-600);padding-left:26px;position:relative;line-height:1.45}
.pc-list li::before{position:absolute;left:0;font-size:.85rem}
.pc-list li.yes::before{content:'✓';color:var(--blue-500);font-weight:700}
.pc-list li.no::before{content:'✗';color:var(--slate-400)}.pc-list li.no{color:var(--slate-400)}
.pricing-note{text-align:center;margin-top:32px;font-size:.88rem;color:var(--slate-400)}

/* ── FAQ ── */
.faq-list{margin-top:40px;display:flex;flex-direction:column}
.faq{border-bottom:1px solid var(--slate-200)}
.faq summary{display:flex;justify-content:space-between;align-items:center;padding:20px 0;font-size:.95rem;font-weight:600;color:var(--slate-900);cursor:pointer;list-style:none;transition:color .2s}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';font-size:1.2rem;font-weight:400;color:var(--slate-400);transition:transform .3s}
.faq[open] summary::after{content:'−'}
.faq summary:hover{color:var(--blue-500)}
.faq p{padding:0 0 20px;font-size:.9rem;color:var(--slate-500);line-height:1.7}

/* ── CTA Final ── */
.cta-final{background:var(--slate-950);padding:120px 0;text-align:center;position:relative;overflow:hidden}
.cta-glow{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:700px;height:700px;background:radial-gradient(circle,rgba(59,130,246,.15),transparent 65%);pointer-events:none}
.cta-final h2{font-size:clamp(2rem,4vw,2.75rem);font-weight:900;color:var(--white);letter-spacing:-.04em;line-height:1.1;margin-bottom:16px}
.cta-final p{font-size:1.05rem;color:var(--slate-300);margin-bottom:32px;max-width:480px;margin-left:auto;margin-right:auto}
.cta-micro{display:block;margin-top:20px;font-size:.82rem;color:var(--slate-400)}

/* ── Footer ── */
.footer{background:var(--slate-50);border-top:1px solid var(--slate-200);padding:72px 0 36px}
.footer-grid{display:grid;grid-template-columns:2.5fr 1fr 1fr 1fr;gap:48px;margin-bottom:48px}
.footer-brand .logo{display:inline-block;margin-bottom:12px}
.footer-brand p{font-size:.88rem;color:var(--slate-500);max-width:280px;line-height:1.6}
.footer-col h4{font-size:.75rem;text-transform:uppercase;letter-spacing:.1em;font-weight:700;color:var(--slate-900);margin-bottom:16px}
.footer-col a{display:block;font-size:.9rem;color:var(--slate-500);margin-bottom:10px;transition:color .2s}
.footer-col a:hover{color:var(--blue-500)}
.footer-bottom{padding-top:24px;border-top:1px solid var(--slate-200);font-size:.82rem;color:var(--slate-400)}

/* ── Animations ── */
.slide-up{opacity:0;transform:translateY(32px);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1);transition-delay:var(--d,0s)}
.slide-up.visible{opacity:1;transform:translateY(0)}

.slide-left{opacity:0;transform:translateX(-50px);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1);transition-delay:var(--d,0s)}
.slide-left.visible{opacity:1;transform:translateX(0)}

.slide-right{opacity:0;transform:translateX(50px);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1);transition-delay:var(--d,0s)}
.slide-right.visible{opacity:1;transform:translateX(0)}

.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1);transition-delay:var(--d,0s)}
.reveal.visible{opacity:1;transform:translateY(0)}

/* ── Responsive ── */
.show-on-mobile{display:none}
@media(max-width:1024px){
  .hero h1{font-size:clamp(2rem,5vw,2.75rem)}
  .timeline{margin-top:48px}
  .tl-line{left:32px}
  .feat-hero{grid-template-columns:1fr}
  .feat-row{grid-template-columns:1fr}
  .feat-wide{flex-direction:column;align-items:flex-start}
  .ai-grid{grid-template-columns:1fr;gap:48px}
  .wsite-grid{grid-template-columns:1fr;gap:40px}
  .pricing{grid-template-columns:1fr;max-width:420px;margin-left:auto;margin-right:auto}
  .footer-grid{grid-template-columns:1fr 1fr}
}

@media(max-width:768px){
  .hide-on-mobile{display:none}
  .show-on-mobile{display:inline}
  .nav-links,.nav-cta{display:none}
  .burger{display:flex}
  .hero{padding:120px 0 0}
  .hero h1{font-size:clamp(1.75rem,7vw,2.25rem)}
  .hero-visual{margin-top:40px}
  .trust-bar{display:none}
  .section{padding:72px 0}
  .tl-line{display:none}
  .tl-step{flex-direction:column;gap:16px}
  .tl-marker{width:48px;height:48px}
  .footer-grid{grid-template-columns:1fr}
  .footer-bottom{text-align:center}
  .feat-stats{flex-wrap:wrap;gap:20px}
}