/* KiDesign v3 — mesma estrutura e imagens, acabamento visual evoluído */
:root{
  --red:#ff1744!important;
  --red-bright:#ff496a!important;
  --red-dark:#97001c!important;
  --black:#000!important;
  --black-soft:#070707!important;
  --black-card:#0c0c0e!important;
  --black-border:#28282d!important;
}
body{
  background:
    radial-gradient(ellipse 70% 40% at 84% 4%,rgba(255,23,68,.1),transparent 70%),
    radial-gradient(ellipse 50% 30% at 10% 38%,rgba(120,0,25,.08),transparent 70%),
    #000!important;
}
body:before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.014) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.014) 1px,transparent 1px);
  background-size:72px 72px;
  mask-image:linear-gradient(to bottom,#000,transparent 75%);
}
nav{
  background:linear-gradient(to bottom,rgba(0,0,0,.98),rgba(0,0,0,.55),transparent)!important;
  border-bottom:1px solid rgba(255,255,255,.045);
}
nav.scrolled{
  background:rgba(3,3,4,.88)!important;
  border-bottom:1px solid rgba(255,23,68,.22)!important;
  box-shadow:0 12px 45px rgba(0,0,0,.45),0 1px 0 rgba(255,255,255,.03);
}
.nav-logo img{filter:drop-shadow(0 0 14px rgba(255,23,68,.18))}
.nav-cta,.btn-primary,.mobile-cta{
  background:linear-gradient(105deg,#d9002d,#ff1744 50%,#ff3f61)!important;
  box-shadow:0 12px 32px rgba(255,23,68,.2)!important;
}
.nav-cta:hover,.btn-primary:hover{box-shadow:0 16px 42px rgba(255,23,68,.4)!important}
.hero{isolation:isolate}
.hero-grid{
  background-image:linear-gradient(rgba(255,23,68,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(255,23,68,.055) 1px,transparent 1px)!important;
  background-size:58px 58px!important;
}
.hero-glow{background:radial-gradient(ellipse 56% 75% at 72% 50%,rgba(255,23,68,.17),transparent 68%)!important}
.hero:after{
  content:"KIDESIGN / CREATIVE SYSTEM / 2026";position:absolute;right:25px;bottom:28px;
  color:rgba(255,255,255,.19);font-size:9px;letter-spacing:4px;writing-mode:vertical-rl;
}
.hero-tag{
  background:linear-gradient(90deg,rgba(255,23,68,.14),rgba(255,23,68,.035))!important;
  border-color:rgba(255,23,68,.5)!important;
  box-shadow:inset 0 0 18px rgba(255,23,68,.045),0 0 24px rgba(255,23,68,.035);
}
.hero h1{text-shadow:0 5px 30px rgba(0,0,0,.8)}
.hero h1 span{text-shadow:0 0 30px rgba(255,23,68,.18)}
.notebook-wrap:before{
  content:"";position:absolute;inset:8% -4% 10%;z-index:-1;
  border:1px solid rgba(255,23,68,.18);transform:skewY(-3deg);
  background:linear-gradient(135deg,rgba(255,23,68,.035),transparent 50%);
  box-shadow:0 0 80px rgba(255,23,68,.08);
}
.notebook-img{filter:drop-shadow(0 35px 70px rgba(255,23,68,.2)) drop-shadow(0 12px 35px rgba(0,0,0,.9))!important}
.notebook-badge{backdrop-filter:blur(15px);background:rgba(8,8,10,.82)!important;border-color:rgba(255,23,68,.45)!important;box-shadow:0 15px 40px rgba(0,0,0,.4)}
.client-logos{background:linear-gradient(90deg,#030303,#0a0a0c,#030303)!important;border-color:rgba(255,255,255,.07)!important}
.client-logo-row span{transition:.25s;text-shadow:0 0 0 transparent}.client-logo-row span:hover{color:#fff!important;text-shadow:0 0 18px rgba(255,23,68,.55);transform:translateY(-2px)}
.hero-stats-bar{background:linear-gradient(90deg,#0a0a0b,#111114,#080809)!important;border-color:rgba(255,23,68,.18)!important}
.stat{position:relative}.stat:before{content:"";position:absolute;top:0;left:10%;width:26%;height:1px;background:linear-gradient(90deg,var(--red),transparent)}
.marquee-wrap{background:linear-gradient(90deg,#c60029,#ff1744,#d6002d)!important;box-shadow:0 0 40px rgba(255,23,68,.13)}
section:not(.hero):not(.client-logos){position:relative}
.section-tag{letter-spacing:4px!important;text-shadow:0 0 18px rgba(255,23,68,.25)}
.section-title span{color:var(--red)!important}
.service-card,.process-card,.plan-card,.testimonial-card,.case-card{
  background:linear-gradient(145deg,rgba(18,18,21,.97),rgba(7,7,8,.99))!important;
  border-color:rgba(255,255,255,.1)!important;
  box-shadow:0 18px 50px rgba(0,0,0,.28);
}
.service-card:before,.process-card:before,.plan-card:before{
  content:"";position:absolute!important;left:0!important;top:0!important;width:38%!important;height:1px!important;
  background:linear-gradient(90deg,var(--red),transparent)!important;opacity:.8!important;
}
.service-card:hover,.process-card:hover,.plan-card:hover{
  border-color:rgba(255,23,68,.48)!important;
  box-shadow:0 24px 60px rgba(0,0,0,.42),inset 0 0 35px rgba(255,23,68,.035),0 0 25px rgba(255,23,68,.04)!important;
  transform:translateY(-7px)!important;
}
.service-icon{filter:saturate(.85) drop-shadow(0 0 10px rgba(255,23,68,.2))}
.pf-item,.case-card{overflow:hidden!important;box-shadow:0 20px 55px rgba(0,0,0,.35)}
.pf-item:after{content:"";position:absolute;inset:0;border:1px solid transparent;pointer-events:none;transition:.3s}
.pf-item:hover:after{border-color:rgba(255,23,68,.65);box-shadow:inset 0 0 34px rgba(255,23,68,.08)}
.pf-item img{transition:transform .7s cubic-bezier(.2,.8,.2,1),filter .5s!important}.pf-item:hover img{transform:scale(1.045)!important;filter:contrast(1.04) saturate(1.06)}
.portfolio-filter{background:rgba(7,7,8,.6);border:1px solid rgba(255,255,255,.06);padding:6px;display:inline-flex!important;backdrop-filter:blur(12px)}
.filter-btn.active{box-shadow:0 8px 25px rgba(255,23,68,.22)}
.process-section,.plans-section,.cases-section{background:linear-gradient(135deg,#050506,#0b0709 54%,#050505)!important}
.plan-card.featured{box-shadow:0 22px 70px rgba(255,23,68,.13)!important;border-color:rgba(255,23,68,.55)!important}
.faq-item,.faq-question{border-color:rgba(255,255,255,.09)!important}.faq-item:hover{background:rgba(255,23,68,.025)}
.cta-section{background:radial-gradient(circle at 50% 100%,rgba(255,23,68,.2),transparent 58%),#050505!important}
.cta-section:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,23,68,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,23,68,.04) 1px,transparent 1px);background-size:55px 55px;mask-image:radial-gradient(circle,#000,transparent 72%)}
footer{background:linear-gradient(180deg,#050505,#000)!important;border-top:1px solid rgba(255,23,68,.17)!important}
.cursor{box-shadow:0 0 14px rgba(255,23,68,.85)}.cursor-ring{border-color:rgba(255,23,68,.55)!important}
@media(max-width:900px){body{cursor:auto}.cursor,.cursor-ring{display:none}.hero:after{display:none}.notebook-wrap:before{inset:3% 0 10%}.portfolio-filter{display:flex!important;max-width:100%;overflow-x:auto}}
/* Mantém os movimentos originais ativos em desktop e celular. */
.notebook-img{animation:floatNb 6s ease-in-out infinite!important;animation-play-state:running!important}
.hero-logo-big{animation:float 6s ease-in-out infinite!important;animation-play-state:running!important}
.notebook-wrap:hover .notebook-img{animation-play-state:running!important}
.marquee-track{animation:marquee 20s linear infinite!important;animation-play-state:running!important}
.banner-track.to-right{animation:bannerRight 70s linear infinite!important;animation-play-state:running!important}
.banner-track.to-left{animation:bannerLeft 70s linear infinite!important;animation-play-state:running!important}
.banner-marquee:hover .banner-track{animation-play-state:running!important}