:root{ --navy:#0A1931; --blue:#1A4DBE; --green:#00A63E; --bg:#F6F8FB; --border:#E2E8F0; }
*{box-sizing:border-box; font-family:'Inter',sans-serif;} body{margin:0; background:white; overflow-x:hidden;}
.topbar{background:var(--navy); color:white; text-align:center; padding:10px; font-size:13px;}.topbar span{color:#FFC800; font-weight:700;}
.header{background:white; border-bottom:1px solid var(--border); position:sticky; top:0; z-index:20;}.header-content{max-width:1200px; margin:0 auto; padding:14px 24px; display:flex; justify-content:space-between; align-items:center;}
.logo{font-weight:800; font-size:22px;}.logo-icon{color:var(--blue);}.nav-desktop{display:flex; gap:24px;}.nav-link{text-decoration:none; color:#334155; padding:8px 14px; border-radius:8px;}.nav-link.active{background:var(--navy); color:white;}
.header-actions{display:flex; gap:10px;}.btn-outline{border:1px solid var(--border); padding:10px 18px; border-radius:24px; text-decoration:none; color:var(--navy); font-size:13px;}.btn-blue{background:var(--blue); color:white; padding:12px 22px; border-radius:24px; text-decoration:none; font-weight:700;}
.nav-mobile-toggle{
  display:none;
  background:white;
  border:1px solid #E2E8F0;
  width:42px;
  height:42px;
  border-radius:10px;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.nav-mobile{display:none;flex-direction:column;background:#fff;padding:16px;border-top:1px solid #E2E8F0;position:absolute;top:100%;left:0;right:0;z-index:50;box-shadow:0 20px 40px rgba(10,25,49,.1)}
.nav-mobile a{text-decoration:none !important;color:#0A1931 !important;padding:14px 16px;border-radius:10px;font-weight:600;font-size:14px;display:block}
.nav-mobile a:hover{background:#F8FAFC;color:#1A4DBE !important}
.nav-mobile.open{display:flex}
.header{position:relative}
.hero{padding:60px 20px;}.hero-container{max-width:1200px; margin:0 auto; display:grid; grid-template-columns:1.1fr 0.9fr; gap:40px; align-items:center;}
.pill{background:#EEF2FF; color:var(--blue); border:1px solid #C7D2FE; padding:6px 12px; border-radius:20px; font-size:11px; font-weight:700; letter-spacing:1px;}
.hero-text h1{font-size:clamp(32px,5vw,56px); line-height:0.95; letter-spacing:-2px; font-weight:800; color:#0A0A4A;}.hero-text h1 span{color:var(--blue);}
.btn-blue-large{background:var(--blue); color:white; padding:16px 28px; border-radius:28px; text-decoration:none; font-weight:700; display:inline-block; margin-top:20px;}
.trust-row{display:flex; gap:20px; margin-top:20px; font-size:13px;}
.phone-wrapper{display:flex; justify-content:center;}
.phone-mockup{width:320px; background:white; border:8px solid #0A2A8A; border-radius:32px; padding:28px 22px 18px; box-shadow:0 30px 60px rgba(10,42,138,0.25); position:relative;}
.phone-notch{width:90px; height:18px; background:#0A2A8A; border-radius:0 0 12px 12px; position:absolute; top:0; left:50%; transform:translateX(-50%);}
.phone-badge{background:#E6F9ED; color:#00A63E; font-size:11px; font-weight:700; padding:6px 10px; border-radius:20px; display:inline-block; margin-top:10px;}
.phone-label{font-size:10px; letter-spacing:1.5px; color:#64748B; margin-top:18px; font-weight:600;}
.phone-value{font-size:42px; font-weight:800; color:var(--navy); margin-top:4px;}.phone-value small{font-size:16px;}
.phone-details{margin-top:24px;}.detail-row{display:flex; justify-content:space-between; padding:14px 0; border-bottom:1px solid #F1F5F9; font-size:13px;}
.btn-phone{background:#2348E0; color:white; width:100%; border:none; padding:14px; border-radius:12px; font-weight:700; margin-top:22px; cursor:pointer;}
@media(max-width:900px){.hero-container{grid-template-columns:1fr;}.nav-desktop,.header-actions{display:none;}.nav-mobile-toggle{display:block;}}

/* ===== CONFIGURAÇÃO DEFINITIVA CELULAR - CREDTECH ===== */
@media (max-width: 768px){
  .topbar{
    font-size: 11px;
    padding: 8px 10px;
  }
  .header-content{
    padding: 12px 16px;
  }
  .hero{
    padding: 24px 16px 40px 16px;
  }
  .hero-container{
    grid-template-columns: 1fr; /* 1 coluna no celular */
    gap: 32px;
    text-align: center;
  }
  .hero-text h1{
    font-size: 34px !important;
    line-height: 0.95 !important;
    text-align: center;
  }
  .hero-text p{
    text-align: center;
    font-size: 15px;
  }
  .trust-row{
    justify-content: center;
    flex-wrap: wrap;
  }
  .btn-blue-large{
    width: 100%;
    text-align: center;
  }
  /* CELULAR MOCKUP FICA MENOR E CENTRALIZADO */
  .phone-wrapper{
    order: -1; /* celular sobe pra cima no celular, igual Velotax faz */
  }
  .phone-mockup{
    width: 280px;
    padding: 20px 18px 16px;
    border-width: 6px;
    border-radius: 28px;
  }
  .phone-value{
    font-size: 36px;
  }
  /* MENU HAMBURGUER */
  .nav-desktop, .header-actions{
    display: none !important;
  }
  .nav-mobile-toggle{
    display: block !important;
  }
}

@media (max-width: 380px){
  .phone-mockup{
    width: 260px;
  }
}

.cadastro-wrapper{max-width:720px; margin:0 auto; padding:32px 20px 60px;}
.cadastro-header{text-align:center; margin-bottom:24px;}
.cadastro-header h1{font-size:clamp(28px,5vw,38px); letter-spacing:-1.5px; color:#0A1931; margin:12px 0 8px;}
.cadastro-header p{color:#64748B; font-size:14px;}
.progress-cadastro{height:4px; background:#E2E8F0; border-radius:10px; max-width:400px; margin:16px auto 0; overflow:hidden;}
.progress-cadastro div{height:100%; background:#1A4DBE; width:100%;}
.card-cadastro{background:white; border:1px solid #E2E8F0; border-radius:20px; padding:28px; box-shadow:0 10px 40px rgba(10,25,49,0.06);}
.form-section-title{font-weight:700; color:#0A1931; margin:28px 0 14px; display:flex; align-items:center; gap:10px; font-size:14px; letter-spacing:0.5px;}
.form-section-title span{background:#0A1931; color:white; width:24px; height:24px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12px;}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.input-eye{position:relative; display:flex; align-items:center;} .input-eye input{flex:1; padding-right:40px;} .input-eye button{position:absolute; right:8px; background:none; border:none; cursor:pointer;}
.security-row{display:flex; gap:16px; justify-content:center; margin-top:20px; font-size:11px; color:#64748B;}
@media(max-width:700px){.grid2{grid-template-columns:1fr;} .card-cadastro{padding:20px 16px;}}

/* ===== CADASTRO ESTILO VELOTAX EXTREMO PROFISSIONAL ===== */
.cadastro-body{margin:0; background:white;}
.cadastro-split{display:grid; grid-template-columns:1fr 1fr; min-height:100vh;}
.cadastro-left{background: radial-gradient(120% 120% at 20% 10%, #1A3CFF 0%, #0A1931 60%); color:white; padding:40px; display:flex; align-items:center;}
.left-content{max-width:420px;}
.logo-left{font-size:28px; font-weight:800; margin-bottom:24px;}
.logo-left span{color:#6EA8FF;}
.cadastro-left h1{font-size:42px; line-height:0.95; letter-spacing:-1.5px; font-weight:800;}
.cadastro-left p{color:#B4C6FF; font-size:15px; line-height:1.5; margin-top:16px;}
.check-list{margin-top:28px; display:flex; flex-direction:column; gap:14px;}
.check-list div{display:flex; gap:10px; align-items:center; font-size:14px;}
.check-list i{background:rgba(255,255,255,0.15); width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12px; font-style:normal;}
.app-card{background:white; color:#0A1931; border-radius:16px; padding:18px; margin-top:36px;}
.app-card p{color:#64748B; font-size:13px; margin:6px 0 12px;}
.app-badges{display:flex; gap:10px; font-size:12px; font-weight:600;}
.app-badges span{background:#0A1931; color:white; padding:8px 12px; border-radius:8px;}

.cadastro-right{background:white; padding:40px; display:flex; align-items:center; overflow-y:auto;}
.right-content{width:100%; max-width:480px; margin:0 auto;}
.right-content h2{font-size:26px; color:#0A1931; letter-spacing:-0.5px; margin:0;}
.sub{color:#64748B; font-size:14px; margin:6px 0 24px;}
.label-big{font-size:14px; font-weight:600; color:#0F172A; display:block; margin-bottom:10px;}
.input-velotax{width:100%; padding:16px 18px; border:2px solid #E2E8F0; border-radius:14px; font-size:15px; outline:none; background:white; transition:0.2s; margin-bottom:12px;}
.input-velotax:focus{border-color:#1A4DBE; box-shadow:0 0 0 4px #EEF2FF;}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.input-eye-velo{position:relative;} .input-eye-velo button{position:absolute; right:12px; top:50%; transform:translateY(-50%); background:none; border:none; cursor:pointer;}
.captcha-box{border:1px solid #E2E8F0; border-radius:10px; padding:12px 16px; display:flex; justify-content:space-between; align-items:center; margin:12px 0;}
.check-green{background:#00A63E; color:white; width:22px; height:22px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:12px; margin-right:6px;}
.btn-continuar{width:100%; background:#A5B4FC; color:white; border:none; padding:18px; border-radius:28px; font-weight:700; font-size:16px; margin-top:16px; cursor:pointer; transition:0.2s;}
.btn-continuar:hover{background:#2348E0;}
.btn-continuar{width:100%; background:#A5B4FC; color:white; border:none; padding:18px; border-radius:28px; font-weight:700; font-size:16px; margin-top:16px; cursor:pointer; opacity:0.6; transition:0.2s;}
.btn-continuar.ativo{background:#2348E0; opacity:1; box-shadow:0 8px 20px rgba(35,72,224,0.3);}

@media(max-width:900px){
  .cadastro-split{grid-template-columns:1fr;}
  .cadastro-left{padding:24px 20px;}
  .cadastro-left h1{font-size:32px;}
  .app-card{display:none;}
  .cadastro-right{padding:24px 16px;}
  .grid2{grid-template-columns:1fr;}
}

.req-section{padding:50px 20px;background:#fff;border-top:1px solid #E2E8F0}
.req-container{max-width:900px;margin:0 auto}
.req-container h2{font-size:22px;margin:0;color:#0A1931}
.req-container p{font-size:13px;color:#64748B;margin:6px 0 20px}
.req-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.req-card{border:1px solid #E2E8F0;border-radius:12px;padding:14px;display:flex;gap:10px;background:#fff}
.req-icon{width:28px;height:28px;background:#E6F9ED;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.req-card strong{display:block;font-size:13px;color:#0A1931}
.req-card span{font-size:11px;color:#64748B;line-height:1.4;margin-top:2px;display:block}

.como-section{padding:50px 20px;background:#fff;border-top:1px solid #E2E8F0}
.como-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;margin-top:16px}
.como-card{border:1px solid #E2E8F0;border-radius:12px;padding:18px;background:#fff;display:flex;flex-direction:column;gap:8px}
.como-num{width:28px;height:28px;background:#1A4DBE;color:#FFFFFF !important;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:900;-webkit-text-fill-color:#fff}
.como-card strong{font-size:13px;color:#0A1931}
.como-card span{font-size:11px;color:#64748B;line-height:1.5}

.valores-section{padding:40px 20px;background:#F6F8FB;border-top:1px solid #E2E8F0}
.valores-container{max-width:900px;margin:0 auto}
.valores-box{background:radial-gradient(80% 120% at 10% 10%,#1E3A8A 0%,#0a1931 50%,#1A4DBE 100%);border-radius:20px;padding:32px;text-align:center;color:#fff}
.valores-label{font-size:10px;letter-spacing:1.5px;opacity:.8;font-weight:700}
.valores-box h2{font-size:clamp(24px,4vw,36px);margin:10px 0;font-weight:800}
.valores-box h2 span{color:#60A5FA}
.valores-box p{font-size:12px;opacity:.8;max-width:600px;margin:0 auto 18px;line-height:1.5}
.btn-valores{background:#fff;color:#1E3A8A;padding:10px 20px;border-radius:20px;text-decoration:none;font-size:13px;font-weight:700;display:inline-block}

@media(max-width:768px){
  .req-grid{grid-template-columns:1fr}
  .como-grid{grid-template-columns:1fr}
}

.faq-section{padding:70px 20px;background:#F8FAFF;border-top:1px solid #E2E8F0}
.faq-container{max-width:800px;margin:0 auto}
.faq-pill{background:#EEF2FF;color:#1A4DBE;border:1px solid #C7D2FE;padding:6px 12px;border-radius:20px;font-size:10px;font-weight:700;letter-spacing:1px}
.faq-container h2{font-size:24px;margin:12px 0 6px;color:#0A1931;font-weight:800;letter-spacing:-0.5px}
.faq-sub{font-size:13px;color:#64748B;margin:0 0 24px}
.faq-list{display:flex;flex-direction:column;gap:12px}

.faq-item{background:#fff;border:1px solid #E2E8F0;border-radius:14px;overflow:hidden;transition:all.2s ease}
.faq-item:hover{border-color:#1A4DBE;box-shadow:0 4px 20px rgba(26,77,190,.08)}
.faq-item[open]{border-color:#1E3A8A;border-width:1.5px;box-shadow:0 8px 30px rgba(26,77,190,.12)}

.faq-item summary{list-style:none;padding:18px 20px;display:flex;justify-content:space-between;align-items:center;gap:16px;cursor:pointer;font-weight:700;color:#0A1931;font-size:14px}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary svg{width:20px;height:20px;stroke:#1A4DBE;flex-shrink:0;transition:transform.25s ease}
.faq-item[open] summary svg{transform:rotate(180deg)}
.faq-item summary:hover span{color:#1A4DBE}

.faq-answer{padding:0 20px 18px;font-size:13px;color:#475569;line-height:1.6;border-top:1px solid #0A1931;margin:0 20px;padding-top:14px}