:root{
  --bg:#0b1220;
  --surface:#0f1a2e;
  --elev:#13203a;
  --text:#e6ecff;
  --muted:#b9c6ff;
  --primary:#1e40af; /* azul escuro */
  --primary-600:#1d4ed8; /* azul */
  --primary-500:#2563eb;
  --accent:#60a5fa; /* azul claro */
  --ring:rgba(37, 99, 235, .45);
  --shadow:0 10px 30px rgba(0,0,0,.25);
  --border:rgba(255,255,255,.06);
  --gradient:linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
  color:var(--text); background:linear-gradient(180deg,#0a1224 0%, #0d1630 100%);
  line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}

/* Layout */
.container{width:min(1200px, 92vw); margin-inline:auto; padding:0 20px}
.section{padding:100px 0}
.section.alt{background:rgba(255,255,255,.02)}
.section.highlight{background:var(--gradient); color:white}
.section h2{font-size:clamp(32px, 5vw, 48px); margin:0 0 16px; font-weight:700; line-height:1.2}
.section h3{font-size:clamp(24px, 4vw, 32px); margin:0 0 16px; font-weight:600; line-height:1.3}
.section h4{font-size:clamp(18px, 3vw, 24px); margin:0 0 12px; font-weight:600; line-height:1.4}
.section .section-sub{color:var(--muted); margin:0 0 48px; font-size:1.125rem; line-height:1.7}

/* Header */
.site-header{position:sticky; top:0; z-index:50; backdrop-filter:saturate(180%) blur(14px); background:rgba(11,18,32,.7); border-bottom:1px solid rgba(255,255,255,.06); transition:transform 0.3s ease}
.header-inner{display:flex; align-items:center; justify-content:space-between; min-height:80px}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--text); font-weight:700; font-size:1.25rem}
.brand .logo{height:32px}
.nav{display:flex; gap:24px; align-items:center; margin-left:40px}
.nav a{color:var(--muted); text-decoration:none; font-weight:500; font-size:0.875rem; transition:color 0.2s ease; padding:8px 0}
.nav a:hover{color:var(--primary)}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:12px 24px; border-radius:8px; border:1px solid transparent; text-decoration:none; font-weight:600; cursor:pointer; transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1); font-size:0.95rem; position:relative; overflow:hidden}
.btn::before{content:''; position:absolute; top:0; left:-100%; width:100%; height:100%; background:linear-gradient(90deg, transparent, rgba(255,255,255,.2), transparent); transition:left 0.5s ease}
.btn:hover::before{left:100%}
.btn-primary{background:var(--gradient); color:white !important; border:none; box-shadow:0 4px 14px 0 rgba(30, 64, 175, 0.25); font-weight:700; background-size:200% 200%; animation:shimmer 3s ease-in-out infinite}
.btn-primary:hover{background:var(--primary-600); transform:translateY(-2px) scale(1.05); box-shadow:0 8px 25px 0 rgba(30, 64, 175, 0.4); color:white !important; animation:glow 2s ease-in-out infinite}
.btn-ghost{background:transparent; color:var(--primary); border:1px solid var(--primary); position:relative}
.btn-ghost::after{content:''; position:absolute; top:0; left:0; width:0; height:100%; background:var(--primary); transition:width 0.3s ease; z-index:-1}
.btn-ghost:hover::after{width:100%}
.btn-ghost:hover{color:white; transform:translateY(-1px); box-shadow:0 4px 15px rgba(30, 64, 175, 0.3)}
.btn-lg{padding:16px 32px; font-size:1.1rem; font-weight:700}

/* Language Selector */
.language-selector{display:flex; gap:8px; align-items:center; margin-left:24px}
.lang-btn{background:transparent; border:1px solid rgba(255,255,255,.2); color:var(--muted); padding:8px 12px; border-radius:6px; font-size:0.75rem; cursor:pointer; transition:all 0.3s ease; display:flex; flex-direction:row; align-items:center; gap:8px; min-width:80px}
.lang-btn:hover{background:rgba(255,255,255,.1); color:var(--text); border-color:rgba(255,255,255,.4)}
.lang-btn.active{background:var(--primary); color:white; border-color:var(--primary)}
.lang-btn.active:hover{background:var(--primary-600); border-color:var(--primary-600)}

.flag{width:20px; height:14px; object-fit:contain}
.lang-text{font-size:0.8rem; font-weight:500; line-height:1}

.mobile-lang{margin:16px 0; justify-content:center}
.mobile-lang .lang-btn{flex:1; justify-content:center; min-width:100px}

.menu-toggle{display:none; background:none; border:0; padding:8px; border-radius:8px; cursor:pointer}
.menu-toggle span{display:block; width:24px; height:2px; background:var(--text); margin:4px 0; transition:all 0.2s ease}

/* Mobile nav */
.mobile-nav{display:none; flex-direction:column; padding:20px; background:rgba(11,18,32,.95); border-bottom:1px solid rgba(255,255,255,.06); box-shadow:0 4px 6px -1px rgba(0,0,0,.1)}
.mobile-nav a{padding:12px 16px; text-decoration:none; color:var(--text); border-radius:8px; font-weight:500; transition:background 0.2s ease}
.mobile-nav a:hover{background:var(--surface)}
.mobile-nav .btn{box-shadow:none; margin-top:8px}

/* Hero */
.hero{position:relative; overflow:hidden; padding:120px 0; background:radial-gradient(1000px 500px at 0% -20%, rgba(96,165,250,.25), transparent), radial-gradient(800px 400px at 100% -10%, rgba(29,78,216,.25), transparent); animation:heroBackground 20s ease-in-out infinite}
.hero-grid{display:grid; grid-template-columns:1.2fr 1fr; gap:60px; align-items:center}
.hero-copy h1{font-size:clamp(40px, 6vw, 64px); line-height:1.1; margin:0 0 24px; letter-spacing:-.02em; font-weight:800; animation:fadeInUp 1s ease-out}
.accent-dot{color:var(--accent); animation:pulse 2s ease-in-out infinite}
.hero-copy p{color:var(--muted); margin:0 0 24px; font-size:1.125rem; line-height:1.7; animation:fadeInUp 1s ease-out 0.2s both}
.hero-actions{display:flex; gap:16px; flex-wrap:wrap; margin:32px 0; animation:fadeInUp 1s ease-out 0.4s both}
.trust-badges{display:flex; gap:24px; list-style:none; padding:0; margin:32px 0 0; color:var(--muted); animation:fadeInUp 1s ease-out 0.6s both}
.badge{background:var(--surface); padding:8px 16px; border-radius:20px; font-size:0.875rem; font-weight:600; color:var(--accent); border:1px solid rgba(255,255,255,.06); transition:all 0.3s ease; position:relative; overflow:hidden}
.badge::before{content:''; position:absolute; top:0; left:-100%; width:100%; height:100%; background:linear-gradient(90deg, transparent, rgba(96,165,250,.2), transparent); transition:left 0.5s ease}
.badge:hover::before{left:100%}
.badge:hover{transform:translateY(-2px); box-shadow:0 8px 25px rgba(96,165,250,.3)}
.hero-art{position:relative; animation:fadeInRight 1s ease-out 0.8s both}
.hero-art img{width:100%; height:auto; filter:drop-shadow(0 20px 50px rgba(0,0,0,.35)); transition:transform 0.3s ease}
.hero-art:hover img{transform:scale(1.05) rotate(2deg)}
.hero-wave{position:absolute; inset:auto 0 0 0; height:120px; background:linear-gradient(180deg, transparent, rgba(255,255,255,.04)); pointer-events:none; animation:wave 3s ease-in-out infinite}

/* Floating elements */
.hero::before{content:''; position:absolute; top:20%; left:10%; width:60px; height:60px; background:rgba(96,165,250,.1); border-radius:50%; animation:float 6s ease-in-out infinite}
.hero::after{content:''; position:absolute; top:60%; right:15%; width:40px; height:40px; background:rgba(29,78,216,.1); border-radius:50%; animation:float 8s ease-in-out infinite reverse}

/* CTA Banner */
.cta-banner{background:var(--gradient); color:white; text-align:center; padding:80px 0}
.cta-banner h2{color:white; margin-bottom:16px}
.cta-banner p{color:rgba(255,255,255,.9); font-size:1.125rem; margin-bottom:32px}

/* Services Grid */
.services-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; margin:32px 0}
.service-item{background:var(--surface); padding:20px; border-radius:12px; text-align:center; font-weight:600; color:var(--text); border:1px solid rgba(255,255,255,.06)}

/* Stats */
.stats{text-align:center; margin:48px 0}
.stat{display:flex; flex-direction:column; align-items:center; gap:8px}
.stat-number{font-size:3rem; font-weight:800; color:var(--primary); line-height:1}
.stat-label{color:var(--muted); font-size:1rem; font-weight:500}

/* Features Grid */
.features-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:32px; margin:48px 0}
.feature-card{background:var(--surface); padding:32px; border-radius:16px; border:1px solid rgba(255,255,255,.06); transition:all 0.4s cubic-bezier(0.4, 0, 0.2, 1); position:relative; overflow:hidden}
.feature-card::before{content:''; position:absolute; top:0; left:0; width:100%; height:100%; background:linear-gradient(135deg, rgba(96,165,250,.1), transparent); opacity:0; transition:opacity 0.3s ease}
.feature-card:hover::before{opacity:1}
.feature-card:hover{transform:translateY(-8px) scale(1.02); box-shadow:0 20px 40px rgba(37,99,235,.2); border-color:rgba(96,165,250,.5)}
.feature-card h3{margin-bottom:16px; color:var(--text); transition:color 0.3s ease}
.feature-card:hover h3{color:var(--accent)}
.feature-card p{color:var(--muted); margin-bottom:24px; line-height:1.6}

/* CTA Section */
.cta-section{text-align:center; margin:48px 0}
.cta-section h4{font-size:1.5rem; margin-bottom:24px; color:var(--text)}
.cta-buttons{display:flex; gap:16px; justify-content:center; flex-wrap:wrap}

/* Services Cards */
.services-cards{display:grid; grid-template-columns:repeat(2, 1fr); gap:24px; margin:48px 0}
.service-card{background:var(--surface); padding:32px; border-radius:16px; border:1px solid rgba(255,255,255,.06); transition:all 0.4s cubic-bezier(0.4, 0, 0.2, 1); position:relative; overflow:hidden}
.service-card::before{content:''; position:absolute; top:0; left:-100%; width:100%; height:100%; background:linear-gradient(90deg, transparent, rgba(96,165,250,.1), transparent); transition:left 0.6s ease}
.service-card:hover::before{left:100%}
.service-card:hover{transform:translateY(-6px) scale(1.01); box-shadow:0 16px 35px rgba(37,99,235,.2); border-color:rgba(96,165,250,.4)}
.service-card h4{margin-bottom:16px; color:var(--text); font-size:1.25rem; transition:color 0.3s ease}
.service-card:hover h4{color:var(--accent)}
.service-card p{color:var(--muted); margin-bottom:24px; line-height:1.6}

/* Custom Solution */
.custom-solution{background:var(--surface); padding:48px; border-radius:16px; text-align:center; margin:48px 0; border:1px solid rgba(255,255,255,.06)}
.custom-solution p{font-size:1.125rem; margin-bottom:24px; color:var(--muted)}

/* Stats Section */
.stats-section{display:grid; grid-template-columns:repeat(3, minmax(120px, 1fr)); gap:32px; margin:48px 0; text-align:center; overflow:visible}
.stat-item{display:flex; flex-direction:column; align-items:center; gap:8px; overflow:visible; min-width:0}
.stat-item .stat-number{font-size:2.5rem; font-weight:800; color:var(--primary); line-height:1; white-space:nowrap; overflow:visible; display:inline-block; width:auto; min-width:fit-content; font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif; text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased}
.stat-item .stat-label{color:var(--muted); font-size:0.875rem; font-weight:500}

/* Cards */
.cards{display:grid; grid-template-columns:repeat(3, 1fr); gap:24px}
.card{background:var(--surface); border:1px solid rgba(255,255,255,.06); border-radius:16px; padding:32px; transition:all 0.4s cubic-bezier(0.4, 0, 0.2, 1); position:relative; overflow:hidden}
.card::before{content:''; position:absolute; top:0; left:0; width:100%; height:100%; background:linear-gradient(135deg, rgba(96,165,250,.1), transparent); opacity:0; transition:opacity 0.3s ease}
.card:hover::before{opacity:1}
.card:hover{transform:translateY(-6px) scale(1.02); border-color:rgba(96,165,250,.5); box-shadow:0 16px 35px rgba(37,99,235,.2)}
.card-icon{position:relative; z-index:1}
.card-icon img{width:48px; height:48px; margin-bottom:16px; transition:transform 0.3s ease}
.card:hover .card-icon img{transform:scale(1.1) rotate(5deg)}
.card h3{margin:16px 0 12px; color:var(--text); transition:color 0.3s ease; position:relative; z-index:1}
.card:hover h3{color:var(--accent)}
.card p{color:var(--muted); margin-bottom:16px; line-height:1.6; position:relative; z-index:1}
.list{margin:16px 0 0; padding-left:20px; color:var(--muted); position:relative; z-index:1}
.list li{margin-bottom:8px; transition:color 0.3s ease}
.card:hover .list li{color:var(--text)}

/* Two columns */
.two-col{display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:start}
.about-card, .contact-card{background:var(--surface); border:1px solid rgba(255,255,255,.06); border-radius:16px; padding:32px}

/* Testimonials */
.testimonials{display:grid; grid-template-columns:repeat(2, 1fr); gap:32px; margin:48px 0}
.testimonial{background:var(--elev); border:1px solid rgba(255,255,255,.06); border-radius:16px; padding:32px; transition:all 0.4s cubic-bezier(0.4, 0, 0.2, 1); position:relative; overflow:hidden}
.testimonial::before{content:''; position:absolute; top:0; left:0; width:100%; height:100%; background:linear-gradient(135deg, rgba(96,165,250,.05), transparent); opacity:0; transition:opacity 0.3s ease}
.testimonial:hover::before{opacity:1}
.testimonial:hover{transform:translateY(-4px) scale(1.01); box-shadow:0 15px 35px rgba(0,0,0,.3); border-color:rgba(96,165,250,.3)}
.testimonial blockquote{margin:0 0 16px; font-size:1.125rem; line-height:1.6; color:var(--text); font-style:italic; position:relative; z-index:1}
.testimonial blockquote::before{content:'"'; position:absolute; top:-10px; left:-10px; font-size:3rem; color:var(--accent); opacity:0.3; font-family:serif}
.testimonial figcaption{color:var(--muted); font-size:0.95rem; font-weight:500; position:relative; z-index:1}

/* Process Steps */
.process-steps{display:grid; grid-template-columns:repeat(4, 1fr); gap:32px; margin:48px 0}
.step{text-align:center; position:relative; transition:all 0.3s ease}
.step:hover{transform:translateY(-5px)}
.step-number{width:60px; height:60px; background:var(--gradient); color:white; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.5rem; font-weight:800; margin:0 auto 24px; transition:all 0.3s ease; position:relative; overflow:hidden}
.step-number::before{content:''; position:absolute; top:0; left:0; width:100%; height:100%; background:linear-gradient(45deg, transparent, rgba(255,255,255,.2), transparent); transform:translateX(-100%); transition:transform 0.6s ease}
.step:hover .step-number::before{transform:translateX(100%)}
.step:hover .step-number{transform:scale(1.1); box-shadow:0 8px 25px rgba(30, 64, 175, 0.4)}
.step h4{margin-bottom:16px; color:var(--text); font-size:1.25rem; transition:color 0.3s ease}
.step:hover h4{color:var(--accent)}
.step p{color:var(--muted); line-height:1.6}

/* Process CTA */
.process-cta{text-align:center; margin:48px 0}

/* FAQ Section */
.faq-section{background:var(--surface); padding:100px 0}
.faq-list{display:grid; gap:24px; margin:48px 0}
.faq-item{background:var(--elev); padding:32px; border-radius:16px; border:1px solid rgba(255,255,255,.06)}
.faq-item h4{margin-bottom:16px; color:var(--text); font-size:1.125rem}
.faq-item p{color:var(--muted); line-height:1.6; margin:0}

/* Contact Grid */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:48px; margin:48px 0}
.contact-form-section{background:var(--surface); padding:32px; border-radius:16px; border:1px solid rgba(255,255,255,.06)}
.contact-info{display:flex; flex-direction:column; gap:32px}
.contact-item h4{margin-bottom:8px; color:var(--text); font-size:1.125rem}
.contact-item p{color:var(--muted); margin:0; line-height:1.6}

/* Form */
.form-group{margin-bottom:24px}
input, textarea{
  width:100% !important; padding:16px !important; border-radius:8px !important; 
  border:2px solid rgba(255,255,255,.4) !important; background:rgba(255,255,255,.15) !important; 
  color:var(--text) !important; outline:none !important; font-size:1rem !important;
  transition:all 0.2s ease !important; box-sizing:border-box !important; 
  backdrop-filter:blur(10px) !important; display:block !important; 
  min-height:48px !important; opacity:1 !important; visibility:visible !important;
}
input:focus, textarea:focus{border-color:var(--accent); box-shadow:0 0 0 6px var(--ring)}
input::placeholder, textarea::placeholder{color:rgba(255,255,255,.6); opacity:1}
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder{color:rgba(255,255,255,.6); opacity:1}
input::-moz-placeholder, textarea::-moz-placeholder{color:rgba(255,255,255,.6); opacity:1}
input:-ms-input-placeholder, textarea:-ms-input-placeholder{color:rgba(255,255,255,.6); opacity:1}
.form label{display:flex; flex-direction:column; gap:8px; font-weight:600; color:var(--text)}
.form-msg{margin-top:16px; min-height:20px; color:var(--accent); font-weight:500}

/* Footer */
.site-footer{border-top:1px solid rgba(255,255,255,.06); background:rgba(11,18,32,.8); padding:80px 0 40px}
.footer-content{margin-bottom:48px}
.footer-brand{margin-bottom:48px}
.footer-brand h3{color:var(--text); margin-bottom:16px; font-size:1.5rem}
.footer-brand p{color:var(--muted); margin:0; line-height:1.6}
.footer-links{display:grid; grid-template-columns:repeat(3, 1fr); gap:48px}
.footer-column h4{color:var(--text); margin-bottom:24px; font-size:1.125rem}
.footer-nav{display:flex; flex-direction:column; gap:12px}
.footer-nav a{color:var(--muted); text-decoration:none; transition:color 0.2s ease}
.footer-nav a:hover{color:var(--text)}
.footer-bottom{display:flex; justify-content:space-between; align-items:center; padding-top:32px; border-top:1px solid rgba(255,255,255,.06)}
.footer-bottom p{color:var(--muted); margin:0}
.footer-legal{display:flex; gap:24px}
.footer-legal a{color:var(--muted); text-decoration:none; transition:color 0.2s ease}
.footer-legal a:hover{color:var(--text)}

/* Responsive */
@media (max-width: 1024px){
  .hero-grid{grid-template-columns:1fr; gap:48px; text-align:center}
  .two-col{grid-template-columns:1fr; gap:32px}
  .features-grid{grid-template-columns:1fr; gap:24px}
  .services-cards{grid-template-columns:1fr; gap:20px}
  .process-steps{grid-template-columns:repeat(2, 1fr); gap:24px}
  .contact-grid{grid-template-columns:1fr; gap:32px}
  .footer-links{grid-template-columns:repeat(2, 1fr); gap:32px}
}
@media (max-width: 768px){
  .section{padding:60px 0}
  .container{padding:0 16px}
  .hero{padding:80px 0}
  .hero-copy h1{font-size:clamp(32px, 8vw, 48px)}
  .services-grid{grid-template-columns:repeat(2, 1fr); gap:16px}
  .cards{grid-template-columns:1fr; gap:20px}
  .testimonials{grid-template-columns:1fr; gap:24px}
  .process-steps{grid-template-columns:1fr; gap:32px}
  .stats-section{grid-template-columns:1fr; gap:24px}
  .footer-links{grid-template-columns:1fr; gap:24px}
  .footer-bottom{flex-direction:column; gap:16px; text-align:center}
  .nav{display:none}
  .menu-toggle{display:inline-block}
  .mobile-nav{display:none}
  .mobile-nav[aria-hidden="false"]{display:flex}
  .language-selector{margin-left:0; margin-top:16px}
}
@media (max-width: 480px){
  .hero-actions{flex-direction:column; align-items:center}
  .cta-buttons{flex-direction:column; align-items:center}
  .services-grid{grid-template-columns:1fr}
  .trust-badges{flex-direction:column; align-items:center; gap:12px}
}

/* Animations */
@keyframes fadeInUp{
  from{opacity:0; transform:translateY(30px)}
  to{opacity:1; transform:translateY(0)}
}

@keyframes fadeInRight{
  from{opacity:0; transform:translateX(30px)}
  to{opacity:1; transform:translateX(0)}
}

@keyframes pulse{
  0%, 100%{opacity:1; transform:scale(1)}
  50%{opacity:0.8; transform:scale(1.05)}
}

@keyframes heroBackground{
  0%, 100%{background-position:0% 50%}
  50%{background-position:100% 50%}
}

@keyframes wave{
  0%, 100%{transform:translateY(0px)}
  50%{transform:translateY(-10px)}
}

@keyframes float{
  0%, 100%{transform:translateY(0px) rotate(0deg)}
  50%{transform:translateY(-20px) rotate(180deg)}
}

@keyframes slideInLeft{
  from{opacity:0; transform:translateX(-50px)}
  to{opacity:1; transform:translateX(0)}
}

@keyframes slideInRight{
  from{opacity:0; transform:translateX(50px)}
  to{opacity:1; transform:translateX(0)}
}

@keyframes bounce{
  0%, 20%, 50%, 80%, 100%{transform:translateY(0)}
  40%{transform:translateY(-10px)}
  60%{transform:translateY(-5px)}
}

@keyframes shimmer{
  0%{background-position:-200% 0}
  100%{background-position:200% 0}
}

@keyframes glow{
  0%, 100%{box-shadow:0 0 5px rgba(96,165,250,.5)}
  50%{box-shadow:0 0 20px rgba(96,165,250,.8), 0 0 30px rgba(96,165,250,.6)}
}

/* Force input visibility - Override any conflicting styles */
.form input[type="email"], 
.form input[type="text"], 
.form textarea {
  width: 100% !important;
  padding: 16px !important;
  border: 2px solid rgba(255,255,255,.4) !important;
  background: rgba(255,255,255,.15) !important;
  color: #e6ecff !important;
  border-radius: 8px !important;
  font-size: 16px !important;
  min-height: 48px !important;
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif !important;
}
