/* ========== BASE ========== */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'DM Sans',system-ui,sans-serif;
  color:#1e1e2e;
  background:#fff;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  padding-bottom:60px;
}
a{text-decoration:none;color:inherit}
ul{list-style:none}

.wrap{max-width:70%;margin:0 auto;padding:0 32px}

h2{font-size:clamp(1.5rem,3vw,2.1rem);font-weight:700;margin-bottom:40px}

/* ========== NAV ========== */
.nav{
  position:fixed;top:0;left:0;width:100%;z-index:100;
  background:rgba(255,255,255,.88);backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(0,0,0,.05);
  transition:box-shadow .3s;
}
.nav.scrolled{box-shadow:0 1px 20px rgba(0,0,0,.06)}
.nav .wrap{display:flex;align-items:center;gap:48px;height:68px}

.logo{display:flex;flex-direction:column;align-items:stretch;line-height:1;width:88px}
.logo i{font-style:normal}
.logo strong,.logo span{display:flex;justify-content:space-between;color:#0066ff}
.logo strong{font-size:1.2rem;font-weight:700;margin-bottom:0}
.logo__divider{display:flex;align-items:center;gap:4px;margin:4px 0;opacity:.4}
.logo__dot{width:3px;height:3px;border-radius:50%;background:#0066ff}
.logo__line{flex:1;height:1px;background:#0066ff}
.logo__chip{flex-shrink:0}
.logo span{font-size:.42rem;font-weight:600;text-transform:uppercase;opacity:.6;margin-top:0}

.nav__links{display:flex;gap:28px}
.nav__links a{display:flex;align-items:center;gap:6px;font-size:.88rem;font-weight:500;color:#666;transition:color .2s}
.nav__links a svg{opacity:.5;transition:opacity .2s}
.nav__links a:hover,.nav__links a.active{color:#0066ff}
.nav__links a:hover svg,.nav__links a.active svg{opacity:1;stroke:#0066ff}

.nav__hamburger{display:none;background:none;border:none;cursor:pointer;padding:8px;flex-direction:column;gap:6px}
.nav__hamburger span{display:block;width:20px;height:2px;background:#1e1e2e;border-radius:2px;transition:.3s}

/* ========== BUTTONS ========== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:13px 28px;background:#0066ff;color:#fff;
  border:none;border-radius:10px;
  font-size:.9rem;font-weight:600;font-family:inherit;
  cursor:pointer;transition:all .25s;
}
.btn:hover{background:#0052cc;transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,102,255,.2)}
.btn--light{background:#f0f5ff;color:#0066ff}
.btn--light:hover{background:#e0ecff;box-shadow:none}

/* ========== HERO ========== */
.hero{
  padding:100px 0 60px;
  background:linear-gradient(180deg,#f8faff 0%,#fff 100%);
  overflow:hidden;
}
.hero__wrap{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}

.hero__badge{
  display:inline-block;font-size:.7rem;font-weight:600;
  color:#fff;background:linear-gradient(135deg,#0066ff,#00b4d8);
  padding:5px 14px;border-radius:20px;margin-bottom:12px;
  animation:badgePulse 2s ease-in-out infinite;
}
@keyframes badgePulse{
  0%,100%{box-shadow:0 0 0 0 rgba(0,102,255,.3)}
  50%{box-shadow:0 0 0 8px rgba(0,102,255,0)}
}

.hero__pill{
  display:inline-block;font-size:.75rem;font-weight:600;
  color:#0066ff;background:#eef4ff;
  padding:6px 16px;border-radius:20px;margin-bottom:20px;
}
.hero h1{font-size:clamp(2rem,4vw,3rem);font-weight:700;line-height:1.15;color:#2d2d3a;margin-bottom:18px}
.highlight-blue{color:#0066ff}
.highlight-teal{color:#00b4d8}
.hero p{font-size:1.05rem;color:#888;max-width:460px;margin-bottom:24px}
.hero p strong{color:#444;font-weight:600}
.hero__actions{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:28px}

/* Terminal */
.terminal{
  background:#1e1e2e;border-radius:10px;overflow:hidden;
  max-width:380px;box-shadow:0 8px 24px rgba(0,0,0,.1);
}
.terminal__bar{
  display:flex;gap:6px;padding:10px 14px;background:#16162a;
}
.terminal__bar span{width:10px;height:10px;border-radius:50%}
.terminal__bar span:nth-child(1){background:#ff5f57}
.terminal__bar span:nth-child(2){background:#febc2e}
.terminal__bar span:nth-child(3){background:#28c840}
.terminal__body{
  padding:16px;font-family:'DM Mono',monospace;font-size:.78rem;
  color:#a0f0a0;min-height:80px;line-height:1.8;
}
.terminal__body code{white-space:pre-wrap}
.terminal__body .cursor{
  display:inline-block;width:8px;height:14px;
  background:#a0f0a0;animation:blink 1s step-end infinite;vertical-align:middle;
}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}

/* Hero visual */
.hero__visual{position:relative;height:480px}
.hero__shape{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:240px;height:240px;border-radius:50%;
  border:1.5px dashed #d0e0ff;
  background:radial-gradient(circle,#f0f6ff 0%,transparent 70%);
}
.hero__shape--sm{
  width:140px;height:140px;
  border:1.5px dashed #e0e8f5;background:none;
  animation:shapeSpin 30s linear infinite reverse;
}
.hero__card{
  position:absolute;display:flex;align-items:center;gap:10px;
  background:#fff;border:1.5px solid #e8edf5;
  border-radius:12px;padding:10px 14px;
  box-shadow:0 3px 16px rgba(0,0,0,.04);color:#1e1e2e;z-index:1;
  transition:border-color .3s,box-shadow .3s;
}
.hero__card:hover{border-color:#c0d4f5;box-shadow:0 6px 24px rgba(0,102,255,.1)}
.hero__card strong{display:block;font-size:.78rem;font-weight:700;line-height:1.2}
.hero__card small{font-size:.65rem;color:#999;font-weight:400}
.hero__card-icon{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.hero__card-icon svg{width:15px;height:15px}
.hero__card-icon--blue{background:#eef4ff;color:#0066ff}
.hero__card-icon--green{background:#ecfdf5;color:#10b981}
.hero__card-icon--purple{background:#f3f0ff;color:#8b5cf6}
.hero__card-icon--orange{background:#fff7ed;color:#f59e0b}
.hero__card-icon--teal{background:#f0fdfa;color:#14b8a6}
.hero__card-icon--rose{background:#fff1f2;color:#f43f5e}
.hero__card-icon--sky{background:#e0f2fe;color:#0284c7}
.hero__card-icon--amber{background:#fef3c7;color:#d97706}

.hc1{top:0;left:0;animation:heroFloat 5s ease-in-out infinite}
.hc2{top:0;left:34%;animation:heroFloat 5.8s ease-in-out infinite .5s}
.hc3{top:0;left:68%;animation:heroFloat 6s ease-in-out infinite 1s}
.hc4{top:17%;left:2%;animation:heroFloat 5.5s ease-in-out infinite 1.5s}
.hc5{top:17%;left:36%;animation:heroFloat 5.2s ease-in-out infinite 2s}
.hc6{top:17%;left:68%;animation:heroFloat 5.7s ease-in-out infinite 2.5s}
.hc7{top:34%;left:0;animation:heroFloat 6.2s ease-in-out infinite 3s}
.hc8{top:34%;left:34%;animation:heroFloat 5.4s ease-in-out infinite 3.5s}
.hc9{top:34%;left:68%;animation:heroFloat 5.6s ease-in-out infinite .8s}
.hc10{top:51%;left:2%;animation:heroFloat 5.3s ease-in-out infinite 1.8s}
.hc11{top:51%;left:36%;animation:heroFloat 5.9s ease-in-out infinite 2.8s}
.hc12{top:51%;left:68%;animation:heroFloat 5.1s ease-in-out infinite 3.2s}

@keyframes heroFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes shapeSpin{from{transform:translate(-50%,-50%) rotate(0deg)}to{transform:translate(-50%,-50%) rotate(360deg)}}

/* ========== MÉTRICAS ========== */
.metrics{padding:48px 0;border-top:1px solid #f0f0f5;border-bottom:1px solid #f0f0f5;background:#fafbfd}
.metrics__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;text-align:center}
.metric{display:flex;flex-direction:column;gap:6px}
.metric__num{font-size:2rem;font-weight:800;color:#0066ff}
.metric__label{font-size:.85rem;color:#888}

/* ========== STEPS ========== */
.steps{padding:80px 0}
.steps h2{}
.steps__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.step{
  background:#fff;border:1px solid #eee;border-radius:14px;
  padding:28px 24px;transition:all .3s;display:flex;flex-direction:column;
}
.step:hover{border-color:#d0e0ff;box-shadow:0 8px 24px rgba(0,0,0,.04);transform:translateY(-4px)}
.step__num{
  width:40px;height:40px;border-radius:50%;
  background:linear-gradient(135deg,#0066ff,#00b4d8);color:#fff;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:1rem;font-weight:700;margin-bottom:16px;
}
.step h3{font-size:1rem;font-weight:700;margin-bottom:8px}
.step p{font-size:.85rem;color:#888;line-height:1.6}

/* ========== PROJETOS ========== */
.projetos{padding:80px 0;background:#fafbfd}
.projetos__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.proj{
  background:#fff;border:1px solid #eee;border-radius:14px;
  padding:28px 24px;transition:all .3s;display:flex;flex-direction:column;
}
.proj:hover{box-shadow:0 12px 32px rgba(0,0,0,.06);transform:translateY(-4px);border-color:transparent}
.proj--featured{border-color:#d0e0ff;background:linear-gradient(180deg,#f8fbff,#fff)}
.proj__icon{
  width:44px;height:44px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;margin-bottom:16px;
}
.proj__icon--blue{background:#eef4ff;color:#0066ff}
.proj__icon--green{background:#ecfdf5;color:#10b981}
.proj__icon--purple{background:#f3f0ff;color:#8b5cf6}
.proj__tag{
  display:inline-block;width:fit-content;font-size:.65rem;font-weight:600;
  letter-spacing:1px;text-transform:uppercase;
  padding:3px 10px;border-radius:20px;margin-bottom:12px;
  background:#eef4ff;color:#0066ff;
}
.proj__tag--green{background:#ecfdf5;color:#10b981}
.proj__tag--purple{background:#f3f0ff;color:#8b5cf6}
.proj h3{font-size:1.05rem;font-weight:700;margin-bottom:8px}
.proj p{font-size:.88rem;color:#777;flex:1;margin-bottom:16px}
.proj__techs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px}
.proj__techs span{font-size:.72rem;font-weight:600;padding:3px 10px;border-radius:20px;background:#f0f4ff;color:#0066ff}
.proj__link{font-size:.85rem;font-weight:600;color:#0066ff;transition:color .2s}
.proj__link:hover{color:#0052cc}

/* ========== SOBRE NÓS ========== */
.sobre{padding:80px 0}
.sobre--alt{background:#fafbfd}
.sobre__text p{font-size:.95rem;color:#666;line-height:1.9;margin-bottom:18px}
.sobre__text p strong{color:#333}
.sobre__section{}
.sobre__icon--large{
  width:56px;height:56px;border-radius:14px;
  background:#eef4ff;color:#0066ff;
  display:flex;align-items:center;justify-content:center;margin-bottom:20px;
}

/* ========== DEPOIMENTOS ========== */
.depo{padding:80px 0}
.depo h2{}
.depo__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.depo__card{
  background:#fafbfd;border:1px solid #f0f0f5;border-radius:14px;
  padding:28px 24px;transition:all .3s;
}
.depo__card:hover{border-color:#d0e0ff;box-shadow:0 8px 24px rgba(0,0,0,.04)}
.depo__card p{font-size:.9rem;color:#555;font-style:italic;margin-bottom:20px;line-height:1.7}
.depo__author{display:flex;align-items:center;gap:12px}
.depo__avatar{
  width:40px;height:40px;border-radius:50%;
  background:linear-gradient(135deg,#0066ff,#00b4d8);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:.75rem;font-weight:700;flex-shrink:0;
}
.depo__author strong{display:block;font-size:.85rem;color:#1e1e2e}
.depo__author span{font-size:.75rem;color:#999}

/* ========== FAQ ========== */
.faq{padding:80px 0;background:#fafbfd}
.faq h2{}
.faq__list{display:flex;flex-direction:column;gap:12px}
.faq__item{
  background:#fff;border:1px solid #eee;border-radius:12px;
  overflow:hidden;transition:border-color .3s;
}
.faq__item[open]{border-color:#d0e0ff}
.faq__item summary{
  padding:18px 24px;font-size:.95rem;font-weight:600;color:#1e1e2e;
  cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;
}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary::after{
  content:'+';font-size:1.2rem;color:#0066ff;font-weight:400;transition:transform .2s;
}
.faq__item[open] summary::after{content:'-'}
.faq__item p{padding:0 24px 18px;font-size:.9rem;color:#666;line-height:1.7}

/* ========== CONTATO ========== */
.contato{padding:80px 0}
.contato__sub{font-size:1rem;color:#666;margin-top:-24px;margin-bottom:40px}
.contato__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.contato__card{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:40px 24px;border-radius:16px;border:1px solid #e8edf5;
  background:#fff;transition:all .3s;
}
.contato__card:hover{box-shadow:0 12px 32px rgba(0,0,0,.06);transform:translateY(-4px);border-color:transparent}
.contato__icon{
  width:56px;height:56px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;margin-bottom:16px;
}
.contato__icon--green{background:#ecfdf5;color:#25d366}
.contato__icon--blue{background:#eef4ff;color:#0066ff}
.contato__icon--purple{background:#f3f0ff;color:#8b5cf6}
.contato__card h3{font-size:1.05rem;font-weight:700;margin-bottom:6px}
.contato__card p{font-size:.88rem;color:#666}

/* ========== FOOTER ========== */
.footer{
  position:fixed;bottom:0;left:0;width:100%;
  padding:14px 0;
  border-top:1px solid #e8edf5;
  background:rgba(255,255,255,.92);backdrop-filter:blur(12px);
  z-index:90;
}
.footer .wrap{display:flex;align-items:center;justify-content:center;gap:24px}
.footer__social{display:flex;gap:12px}
.footer__social a{
  width:32px;height:32px;border-radius:8px;
  background:#f0f5ff;color:#0066ff;
  display:flex;align-items:center;justify-content:center;
  transition:all .2s;
}
.footer__social a:hover{background:#0066ff;color:#fff}
.footer p{font-size:.78rem;color:#aaa;margin:0}

/* ========== WHATSAPP ========== */
.whatsapp{
  position:fixed;bottom:70px;right:24px;z-index:99;
  width:56px;height:56px;border-radius:50%;
  background:#25d366;color:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 16px rgba(37,211,102,.4);
  transition:transform .2s,box-shadow .2s;
}
.whatsapp:hover{transform:scale(1.1);box-shadow:0 6px 24px rgba(37,211,102,.5)}

/* ========== FADE ========== */
.fade-in{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s ease}
.fade-in.visible{opacity:1;transform:translateY(0)}

/* ========== RESPONSIVE ========== */
@media(max-width:1024px){
  .wrap{max-width:90%}
  .projetos__grid,.depo__grid,.steps__grid,.contato__grid{grid-template-columns:1fr 1fr}
}
@media(max-width:768px){
  .wrap{max-width:95%}
  .nav__links{display:none}
  .nav__hamburger{display:flex}
  .nav__links.open{
    display:flex;flex-direction:column;
    position:absolute;top:68px;left:0;right:0;
    background:rgba(255,255,255,.98);backdrop-filter:blur(16px);
    border-bottom:1px solid #eee;padding:20px 32px;gap:18px;
  }
  .hero{padding:100px 0 60px}
  .hero__wrap{grid-template-columns:1fr}
  .hero__visual{display:none}
  .projetos__grid,.depo__grid,.steps__grid,.contato__grid{grid-template-columns:1fr}
  .metrics__grid{grid-template-columns:repeat(2,1fr)}
}