:root{
  --bg:#0D0D0D;
  --red:#FF1744;
  --gray:#4A4A4A;
  --soft:#F5F5F5;
  --panel:#1E1E1E;
}
*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--soft);
  font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial,sans-serif;
  line-height:1.6;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
.container{width:min(1180px,92%);margin-inline:auto}

.btn{display:inline-flex;align-items:center;gap:.6rem;padding:.9rem 1.2rem;border-radius:.8rem;border:1px solid transparent;
  background:linear-gradient(180deg,#FF1744,#D90429);color:#fff;text-decoration:none;font-weight:700;letter-spacing:.3px;
  box-shadow:0 10px 30px rgba(217,4,41,.2), inset 0 1px 0 rgba(255,255,255,.06); transition:transform .2s ease, box-shadow .3s ease, opacity .3s}
.btn:hover{transform:translateY(-2px);box-shadow:0 16px 36px rgba(217,4,41,.28), 0 0 20px rgba(255,23,68,.25)}
.btn-ghost{background:transparent;border-color:rgba(255,255,255,.12);color:var(--soft)}
.btn-ghost:hover{border-color:var(--red);box-shadow:0 0 0 3px rgba(255,23,68,.12)}
.btn-cta{position:relative}

.navbar{position:fixed;top:0;left:0;right:0;z-index:50;backdrop-filter:saturate(140%) blur(12px);
  background:rgba(13,13,13,.6);border-bottom:1px solid rgba(255,255,255,.06)}
.nav-wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.8rem 0}
.logo img{filter:drop-shadow(0 0 12px rgba(255,23,68,.18)); transform: scale(1.5);}
.menu{display:flex;gap:1.2rem}
.menu a{color:#DADADA;text-decoration:none;font-weight:600;opacity:.9}
.menu a:hover{color:#fff}
.menu-toggle{display:none;background:transparent;border:0;color:#fff;font-size:1.7rem}
.nav-cta{display:none}

.hero{padding-top:90px;position:relative;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1fr;gap:2rem;align-items:center;padding:3rem 0}
.hero{background:
  radial-gradient(1200px 600px at 85% 20%, rgba(255,23,68,.12) 0%, rgba(255,23,68,0) 60%),
  linear-gradient(180deg, rgba(255,23,68,.06) 0%, rgba(255,23,68,0) 12%),
  var(--bg);
}
.hero-text h1{font-size:2rem;line-height:1.15;margin:0 0 1rem;font-weight:800}
.hero-text p{color:#d3d3d3;margin:0 0 1.5rem;max-width:52ch}
.hero-media{position:relative; overflow:hidden}
.hero-media img{width:100%;height:auto;object-fit:cover; transform: scale(1.5); }
.hero-glow{position:absolute;inset:auto 0 -15% 0;height:180px;filter:blur(60px);background:radial-gradient(50% 50% at 50% 0%, rgba(255,23,68,.22) 0%, rgba(255,23,68,0) 70%);pointer-events:none}

/* Hero animated background: aurora + twinkles */
.hero{isolation:isolate}
.hero::before,.hero::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:-1}
/* Aurora blobs */
.hero::before{
  background:
    radial-gradient(40% 50% at 15% 20%, rgba(255,23,68,.22), rgba(255,23,68,0) 60%),
    radial-gradient(35% 45% at 85% 15%, rgba(255,112,180,.18), rgba(255,112,180,0) 60%),
    radial-gradient(30% 40% at 50% 90%, rgba(122,166,255,.16), rgba(122,166,255,0) 60%);
  filter: blur(10px) saturate(120%);
  animation: float-aurora 16s ease-in-out infinite alternate;
}
/* Star twinkles */
.hero::after{
  background:
    radial-gradient(2px 2px at 20% 30%, rgba(255,255,255,.7) 50%, rgba(255,255,255,0) 60%),
    radial-gradient(2px 2px at 70% 40%, rgba(255,255,255,.6) 50%, rgba(255,255,255,0) 60%),
    radial-gradient(2px 2px at 35% 70%, rgba(255,255,255,.55) 50%, rgba(255,255,255,0) 60%),
    radial-gradient(1.5px 1.5px at 55% 20%, rgba(255,255,255,.5) 50%, rgba(255,255,255,0) 60%),
    radial-gradient(1.5px 1.5px at 80% 75%, rgba(255,255,255,.5) 50%, rgba(255,255,255,0) 60%);
  opacity:.12;
  animation: twinkle 5s linear infinite;
}

@keyframes float-aurora{
  0%{transform:translate3d(0,0,0)}
  50%{transform:translate3d(0,-8px,0) scale(1.02)}
  100%{transform:translate3d(0,6px,0)}
}
@keyframes twinkle{
  0%,100%{opacity:.10}
  50%{opacity:.18}
}
@media (prefers-reduced-motion: reduce){
  .hero::before,.hero::after{animation:none}
}

.marquee{border-block:1px solid rgba(255,255,255,.06);background:rgba(15,15,15,.7); transform: rotateZ(1deg)}
.marquee{overflow:hidden}
.marquee-track{display:flex;gap:3rem;white-space:nowrap;animation:scroll 22s linear infinite;padding:.9rem 0}
.marquee-item{display:flex;align-items:center;gap:.8rem;opacity:.9}
.marquee-item img{width:96px;height:auto;opacity:.92}
.marquee-item span{color:#cfcfcf;font-weight:600;letter-spacing:.3px}
@keyframes scroll{to{transform:translateX(-50%)}}

.section-head{margin:3rem 0 2rem; text-align: center;}
.section-head h2{font-size:1.6rem;margin:0 0 .4rem;font-weight:800;}
.section-head p{margin:0;color:#cfcfcf}

.servicos{padding:2rem 0;background:linear-gradient(180deg, rgba(255,23,68,.04), rgba(255,23,68,0) 18%); }
.servicos-grid{display:grid;grid-template-columns:1fr;gap:1rem}
.servico-card{background:var(--panel);border:1px solid rgba(255,255,255,.08);border-radius:1rem;padding:1.4rem;position:relative;
  box-shadow:0 12px 28px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.02);transition:transform .2s ease, box-shadow .3s}
.servico-card:hover{transform:translateY(-4px);box-shadow:0 20px 44px rgba(0,0,0,.6), 0 0 24px rgba(255,23,68,.12)}
.servico-card .icon{width:44px;height:44px;border-radius:.8rem;display:grid;place-items:center;margin-bottom:.8rem;
  background:linear-gradient(180deg, rgba(255,23,68,.12), rgba(255,23,68,.04));color:var(--red);font-size:1.4rem}
.servico-card h3{margin:.3rem 0 .4rem;font-size:1.1rem}
.servico-card p{margin:0 0 1rem;color:#d3d3d3}

.portfolio{padding:2rem 0}
.projeto-card{display:grid;grid-template-columns:1fr;gap:1rem;align-items:center;background:linear-gradient(90deg,#1E1E1E, #D90429); margin-bottom: 2rem;
  border:1px solid rgba(255,255,255,.06);border-radius:1.2rem;padding:1.2rem;position:relative;overflow:hidden}
.projeto-card .projeto-text{z-index:1}
.projeto-card .badge{display:inline-flex;align-items:center;gap:.5rem;padding:.35rem .6rem;border-radius:999px;background:rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.08);color:#fff;font-weight:600;font-size:.82rem;margin-bottom:.6rem}
.projeto-card h3{margin:.2rem 0 .4rem;font-size:1.3rem}
.projeto-card p{margin:0;color:#f0f0f0;opacity:.92}
.projeto-card .projeto-media{justify-self:end;position:relative;max-width:520px}
.projeto-card .projeto-media img{filter:drop-shadow(0 12px 40px rgba(0,0,0,.6))}
.projeto-card.final{background:linear-gradient(90deg,#1E1E1E, #3b0b12)}
.projeto-card.final .logo-only img{width:120px;opacity:.9}

.etapas{padding:2rem 0}
.timeline{position:relative}
/* Mobile-first: left vertical line with dot + content grid */
.timeline-line{position:absolute;left:21px;top:0;bottom:0;width:2px;background:rgba(255,255,255,.08)}
.timeline-progress{position:absolute;left:-1px;top:0;width:4px;height:0;background:linear-gradient(180deg,var(--red),#D90429);box-shadow:0 0 18px rgba(255,23,68,.35)}
.timeline-items{display:grid;gap:1.4rem;position:relative}
.timeline-item{display:grid;grid-template-columns:42px 1fr;gap:.8rem;align-items:flex-start}
.timeline-item .dot{width:42px;height:42px;border-radius:999px;background:var(--panel);border:1px solid rgba(255,255,255,.12);
  color:var(--red);display:grid;place-items:center;box-shadow:0 0 0 4px rgba(255,23,68,.08)}
.timeline-item .content{padding:.8rem .9rem;border-radius:.9rem;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.06)}
.timeline-item .content h3{margin:0 0 .2rem;font-size:1.1rem}
.timeline-item .content p{margin:0;color:#d6d6d6}

/* Desktop >=768px: center line with alternating items */
@media(min-width:768px){
  .timeline-line{left:calc(50% - 1px)}
}

.footer{padding:3rem 0;border-top:1px solid rgba(255,255,255,.06);background:#0D0D0D}
.contato-box{display:grid;gap:1rem;justify-items:start}
.footer .email{color:#eaeaea;text-decoration:none}
.socials{display:flex;gap:1rem;justify-content:flex-start;margin:1.2rem 0}
.socials a{color:#e2e2e2;font-size:1.2rem;opacity:.9}
.socials a:hover{color:#fff}
.footer p{margin:0;color:#cfcfcf;opacity:.9}
.footer-legal{display:flex;flex-wrap:wrap;gap:.8rem 1.2rem;align-items:center;justify-content:space-between;border-top:1px solid rgba(255,255,255,.06);
  margin-top:1rem;padding-top:1rem;color:#cfcfcf}
.footer-legal .privacy{color:#eaeaea;text-decoration:none}
.footer-legal .privacy:hover{text-decoration:underline}

/* Footer redesign */
.footer{background:#0c0c0c}
.footer .container{display:grid;gap:2rem}
.footer-info{display:grid;grid-template-columns:repeat(3, minmax(0,1fr));gap:1rem;border:1px solid rgba(255,255,255,.06);border-radius:1rem;padding:1rem;background:#0b0b0b}
.footer-info .info-item{display:flex;gap:.9rem;align-items:center;padding:1rem;border:1px solid rgba(255,255,255,.06);border-radius:.8rem;background:rgba(255,255,255,.02)}
.footer-info .info-item i{width:42px;height:42px;border-radius:999px;display:grid;place-items:center;border:1px solid rgba(255,23,68,.35);color:var(--red);background:#0d0d0d;box-shadow:0 0 16px rgba(255,23,68,.08)}
.footer-info .info-item strong{display:block;color:#fff}
.footer-info .info-item p{margin:0;color:#d4d4d4}
.footer-info a{color:#eaeaea;text-decoration:none}
.footer-info a:hover{color:#fff}

.footer-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr;gap:2rem;border-top:1px solid rgba(255,255,255,.06);padding-top:1.5rem}
.footer-grid .brand p{margin:.6rem 0 0;color:#cfcfcf;opacity:.9}
.footer-grid h4{margin:0 0 .8rem;color:#fff;position:relative;font-size:1rem}
.footer-grid h4::after{content:"";position:absolute;left:0;bottom:-6px;width:32px;height:2px;background:var(--red);box-shadow:0 0 12px rgba(255,23,68,.4)}
.footer-grid ul{list-style:none;margin:0;padding:0;display:grid;gap:.45rem}
.footer-grid a{color:#d6d6d6;text-decoration:none;opacity:.95}
.footer-grid a:hover{color:#fff}
.footer .socials{margin:.9rem 0 0}
.footer .socials a{width:38px;height:38px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.12);border-radius:.6rem;color:#e8e8e8}
.footer .socials a:hover{border-color:rgba(255,23,68,.35);color:#fff;box-shadow:0 6px 20px rgba(255,23,68,.12)}

.footer-bar{display:flex;flex-wrap:wrap;gap:.8rem 1.2rem;align-items:center;justify-content:space-between;border-top:1px solid rgba(255,255,255,.06);
  margin-top:.5rem;padding-top:1rem;color:#cfcfcf}
.footer-bar .privacy{color:#eaeaea;text-decoration:none}
.footer-bar .privacy:hover{text-decoration:underline}

@media (max-width: 900px){
  .footer-info{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width: 560px){
  .footer-grid{grid-template-columns:1fr}
  .footer .socials{justify-content:flex-start}
}

.reveal{opacity:0;transform:translateY(12px);transition:opacity .6s ease, transform .6s ease}
.reveal.left{transform:translate(-16px,12px)}
.reveal.right{transform:translate(16px,12px)}
.reveal.visible{opacity:1;transform:translate(0,0)}

/* Rendering performance hints */
.servicos, .portfolio, .etapas, .cta-orcamento, .footer{content-visibility:auto; contain-intrinsic-size: 800px}
.footer{contain-intrinsic-size:360px}
@media (prefers-reduced-motion: reduce){
  .marquee-track{animation:none}
}

/* WhatsApp Floating Button */
.whatsapp-fab{position:fixed;right:max(16px, env(safe-area-inset-right));bottom:max(16px, env(safe-area-inset-bottom));
  width:56px;height:56px;border-radius:999px;display:grid;place-items:center;z-index:999;
  background:#25D366;color:#0b0b0b;text-decoration:none;border:1px solid rgba(255,255,255,.08);
  box-shadow:0 10px 30px rgba(0,0,0,.35), 0 0 0 0 rgba(255,23,68,0);
  transition:transform .2s ease, box-shadow .35s ease, background .2s ease}
.whatsapp-fab i{font-size:1.5rem; color: white;}
.whatsapp-fab::after{content:"Fale agora";position:absolute;right:64px;bottom:50%;transform:translateY(50%) translateX(6px);opacity:0;pointer-events:none;
  background:#0f0f0f;color:#fff;border:1px solid rgba(255,23,68,.35);border-radius:999px;padding:.35rem .6rem;font-weight:700;font-size:.85rem;white-space:nowrap;
  box-shadow:0 8px 24px rgba(255,23,68,.15), inset 0 0 0 1px rgba(255,255,255,.02);transition:opacity .2s ease, transform .2s ease}
.whatsapp-fab:hover::after, .whatsapp-fab:focus-visible::after{opacity:1;transform:translateY(50%) translateX(0)}
@media (max-width: 480px){.whatsapp-fab{width:52px;height:52px}}
@media (max-width: 480px){.whatsapp-fab::after{display:none}}
@media (prefers-reduced-motion: reduce){.whatsapp-fab{transition:none}}
.whatsapp-fab:hover{transform:translateY(-2px);box-shadow:0 18px 40px rgba(0,0,0,.45), 0 0 0 12px rgba(255,23,68,.10)}
.whatsapp-fab:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.cta-orcamento{padding:60px 20px}
.cta-orcamento.mcta{padding:60px 0;border:0}

/* Motion CTA */
.cta-orcamento.mcta{padding:60px 0}
.mcta-card{position:relative;border:1px solid rgba(255,255,255,.08);border-radius:1.2rem;overflow:hidden;
  background:#111;min-height:240px;display:grid;place-items:center;
  transform-style:preserve-3d;will-change:transform, box-shadow;transition:box-shadow .3s ease, border-color .3s ease}
.mcta-card:hover{border-color:rgba(255,23,68,.35);box-shadow:0 24px 80px rgba(255,23,68,.12), inset 0 0 0 1px rgba(255,255,255,.02)}
.mcta-bg{position:absolute;inset:-30%;background:
  radial-gradient(40% 35% at 30% 30%, rgba(255,23,68,.35), transparent 60%),
  radial-gradient(45% 40% at 70% 70%, rgba(255,23,68,.18), transparent 60%),
  linear-gradient(120deg, rgba(255,23,68,.18), rgba(255,23,68,.06), rgba(255,23,68,.18));
  filter:blur(30px);animation:mctaShift 8s ease-in-out infinite alternate}
@keyframes mctaShift{0%{transform:translate3d(-6%, -4%, 0) rotate(0deg)}50%{transform:translate3d(4%, 6%, 0) rotate(10deg)}100%{transform:translate3d(8%, -2%, 0) rotate(-6deg)}}

.orb{position:absolute;border-radius:999px;filter:blur(12px);opacity:.6;mix-blend-mode:screen}
.orb-1{width:120px;height:120px;left:6%;top:20%;background:rgba(255,23,68,.4);animation:float1 7s ease-in-out infinite}
.orb-2{width:180px;height:180px;right:8%;bottom:8%;background:rgba(255,23,68,.25);animation:float2 9s ease-in-out infinite}
.orb-3{width:90px;height:90px;right:26%;top:10%;background:rgba(255,23,68,.3);animation:float3 6s ease-in-out infinite}
@keyframes float1{50%{transform:translateY(-12px) translateX(6px)}}
@keyframes float2{50%{transform:translateY(10px) translateX(-10px)}}
@keyframes float3{50%{transform:translateY(-8px) translateX(-6px)}}

.mcta-content{position:relative;z-index:1;text-align:center;padding:2.2rem 1.2rem;display:grid;gap:1rem}
.mcta-content h2{margin:0;font-size:1.6rem;line-height:1.2}
.mcta-btn{position:relative; padding:.7rem 1rem; font-size:.95rem; justify-content:center}
.mcta-btn::after{content:"";position:absolute;inset:-8px;border-radius:1rem;box-shadow:0 0 0 0 rgba(255,23,68,.0);transition:box-shadow .35s ease;pointer-events:none}
.mcta-card:hover .mcta-btn::after{box-shadow:0 0 0 10px rgba(255,23,68,.12)}
.mcta-btn{animation:btnPulse 2.8s ease-in-out infinite}
@keyframes btnPulse{0%,100%{transform:translateZ(20px) scale(1)}50%{transform:translateZ(20px) scale(1.03)}}

@media (min-width: 860px){
  .mcta-content h2{font-size:2rem}
}

@media (prefers-reduced-motion: reduce){
  .mcta-bg, .orb, .mcta-btn{animation:none}
}

/* Contato - Neon Red */
.contato-sec{padding:2.5rem 0;}
.contato-card{background:#0b0b0b;border:1px solid rgba(255,23,68,.35);border-radius:1rem;padding:1.5rem;position:relative;
  box-shadow:0 0 24px rgba(255,23,68,.08), 0 0 60px rgba(255,23,68,.06), inset 0 0 0 1px rgba(255,255,255,.02)}
.contato-card::before{content:"";position:absolute;inset:-2px;border-radius:inherit;
  background:radial-gradient(120% 120% at 10% -10%, rgba(255,23,68,.35) 0, rgba(255,23,68,0) 45%),
             radial-gradient(100% 60% at 90% 110%, rgba(255,23,68,.22) 0, rgba(255,23,68,0) 55%);
  filter:blur(18px);z-index:-1}
.contato-card h2{margin:0 0 1rem;font-size:1.3rem}
.contato-card h2 span{font-size:.95rem;color:#e6e6e6;opacity:.9;font-weight:600}

/* Single-step form layout/effects */
.form-grid{display:grid;grid-template-columns:1fr;gap:1rem}
.form-grid .full{grid-column:1/-1}
.radio-list{display:grid;gap:.6rem}
.radio-list label{display:flex;align-items:center;gap:.5rem}
.contato-card{position:relative}
.contato-card::after{content:"";position:absolute;inset:-2px;border-radius:inherit;pointer-events:none;
  background:radial-gradient(80% 60% at 10% -10%, rgba(255,23,68,.25), transparent 45%),
             radial-gradient(80% 60% at 95% 110%, rgba(255,23,68,.18), transparent 55%);
  filter:blur(18px);opacity:.6;z-index:-1}
.input-box input{transition:transform .12s ease, box-shadow .2s ease}
.input-box input:hover{transform:translateY(-1px)}
.input-box input:focus{transform:translateY(-1px); box-shadow:0 0 0 3px rgba(255,23,68,.15), 0 0 24px rgba(255,23,68,.15)}
.form-actions{display:flex;justify-content:center;margin-top:.5rem}

@media (min-width: 860px){
  .form-grid{grid-template-columns:1fr 1fr}
}

.input-box{display:grid;gap:.4rem;margin-bottom:1rem}
.input-box label{font-weight:600;color:#eaeaea}
.input-box input[type="text"],
.input-box input[type="number"],
.input-box input[type="email"],
.input-box input[type="tel"]{
  background:#0d0d0d;border:1px solid rgba(255,255,255,.12);border-radius:.7rem;color:#fff;padding:.9rem 1rem;
  outline:none;transition:border-color .2s ease, box-shadow .2s ease}
.input-box input:focus{border-color:var(--red);box-shadow:0 0 0 3px rgba(255,23,68,.15), 0 0 24px rgba(255,23,68,.15)}

.btn-enviar input[type="submit"]{
  appearance:none;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;width:100%;
  padding:1rem 1.2rem;border-radius:.8rem;border:1px solid rgba(255,23,68,.6);
  background:linear-gradient(180deg, rgba(255,23,68,.95), #D90429);
  color:#fff;font-weight:800;letter-spacing:.3px;
  box-shadow:0 10px 30px rgba(217,4,41,.28), 0 0 24px rgba(255,23,68,.22);
  transition:transform .15s ease, box-shadow .2s ease, opacity .2s ease}
.btn-enviar input[type="submit"]:hover{transform:translateY(-2px);box-shadow:0 16px 38px rgba(217,4,41,.35), 0 0 36px rgba(255,23,68,.28)}
.btn-enviar input[type="submit"][disabled]{opacity:.6;cursor:not-allowed}

.form-status{margin-top:.8rem;font-weight:700}
.form-status.success{color:#5cff9a}
.form-status.error{color:#ff7a7a}

/* Multi-step form */
.progress-wrap{height:8px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.08);border-radius:999px;margin:0 0 1rem;overflow:hidden}
.progress-bar{height:100%;background:linear-gradient(90deg, var(--red), #D90429);width:0;transition:width .25s ease}
.form-step{display:none}
.form-step.active{display:block}
.form-nav{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap;margin-top:.5rem}
.form-nav .btn{width:auto;padding:.7rem 1rem;font-size:.95rem}