:root{
  --navy:#04111f;
  --navy-2:#071b33;
  --blue:#00c8ff;
  --blue-2:#087cff;
  --ice:#f7fbff;
  --white:#ffffff;
  --muted:#5f6f83;
  --text:#142033;
  --soft:#e7eef7;
  --line:#dce7f2;
  --green:#18b76b;
  --shadow:0 24px 70px rgba(4,17,31,.12);
  --radius:28px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:Inter,Arial,Helvetica,sans-serif;
  color:var(--text);
  background:var(--ice);
  line-height:1.65;
  overflow-x:hidden;
}

img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
.container{width:min(1180px,92%);margin:0 auto}
.section{padding:96px 0}
.section.compact{padding:72px 0}
.bg-white{background:#fff}
.bg-ice{background:var(--ice)}
.bg-dark{background:var(--navy);color:#fff}
.eyebrow{
  display:inline-flex;
  gap:8px;
  align-items:center;
  padding:9px 14px;
  border-radius:999px;
  background:rgba(0,200,255,.11);
  color:#006f9c;
  font-weight:800;
  font-size:13px;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.bg-dark .eyebrow{background:rgba(0,200,255,.16);color:#8fefff}
.title{
  font-size:clamp(34px,5vw,58px);
  line-height:1.05;
  letter-spacing:-.04em;
  margin:18px 0 16px;
}
.title.center{text-align:center}
.lead{
  color:var(--muted);
  font-size:18px;
  max-width:720px;
}
.bg-dark .lead{color:#c8d5e3}
.center-text{text-align:center;margin-left:auto;margin-right:auto}

.header{
  position:fixed;
  inset:0 0 auto 0;
  z-index:50;
  background:rgba(255,255,255,.9);
  backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(220,231,242,.75);
}
.nav{
  height:84px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}
.brand{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:190px;
}
.brand-chip{
  background:#02070d;
  border-radius:18px;
  padding:8px 14px;
  box-shadow:0 14px 32px rgba(4,17,31,.16);
}
.brand-chip img{height:48px;width:auto}
.nav-links{
  display:flex;
  align-items:center;
  gap:24px;
  color:#324257;
  font-weight:700;
  font-size:14px;
}
.nav-links a{transition:.2s}
.nav-links a:hover{color:#007fb8}
.nav-actions{display:flex;align-items:center;gap:10px}
.mobile-toggle{
  display:none;
  width:46px;
  height:46px;
  border:1px solid var(--line);
  background:#fff;
  border-radius:14px;
  font-size:22px;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:52px;
  padding:15px 24px;
  border-radius:999px;
  font-weight:900;
  border:1px solid transparent;
  cursor:pointer;
  transition:.25s ease;
  white-space:nowrap;
}
.btn-primary{
  color:#03101c;
  background:linear-gradient(90deg,var(--blue),#7cecff);
  box-shadow:0 18px 36px rgba(0,200,255,.24);
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 24px 44px rgba(0,200,255,.32)}
.btn-dark{
  color:#fff;
  background:var(--navy);
  border-color:rgba(255,255,255,.08);
}
.btn-dark:hover{transform:translateY(-2px);background:#09233f}
.btn-outline{
  color:var(--navy);
  background:#fff;
  border-color:var(--line);
}
.bg-dark .btn-outline{background:rgba(255,255,255,.06);color:#fff;border-color:rgba(255,255,255,.18)}
.btn-outline:hover{transform:translateY(-2px);border-color:#9cdff3}
.btn-small{min-height:44px;padding:12px 18px;font-size:14px}

.hero{
  position:relative;
  padding:132px 0 84px;
  background:
    radial-gradient(circle at 80% 10%, rgba(0,200,255,.18), transparent 34%),
    linear-gradient(135deg,#ffffff 0%,#f4f9ff 50%,#eaf6ff 100%);
  overflow:hidden;
}
.hero:after{
  content:"";
  position:absolute;
  right:-120px;
  top:120px;
  width:620px;
  height:620px;
  border-radius:50%;
  background:linear-gradient(135deg,rgba(0,200,255,.18),rgba(8,124,255,.08));
  z-index:0;
}
.hero-grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:1.02fr .98fr;
  gap:54px;
  align-items:center;
}
.hero h1{
  font-size:clamp(44px,6vw,76px);
  line-height:.98;
  letter-spacing:-.055em;
  margin:18px 0 22px;
  color:#071728;
}
.hero h1 span{
  background:linear-gradient(90deg,#007fb8,var(--blue-2));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}
.hero .subtitle{
  color:#52657a;
  font-size:19px;
  max-width:640px;
  margin-bottom:28px;
}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin:28px 0}
.hero-badges{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
  margin-top:28px;
  max-width:690px;
}
.hero-badge{
  background:#fff;
  border:1px solid var(--line);
  border-radius:18px;
  padding:14px;
  box-shadow:0 14px 34px rgba(4,17,31,.06);
}
.hero-badge strong{display:block;color:#071728;font-size:15px}
.hero-badge small{color:var(--muted);font-weight:700}
.hero-visual{
  position:relative;
  min-height:610px;
}
.hero-card-main{
  position:absolute;
  inset:0 0 auto auto;
  width:min(520px,100%);
  min-height:540px;
  background:linear-gradient(180deg,#071728,#0d2845);
  border-radius:42px;
  box-shadow:var(--shadow);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.16);
}
.hero-card-main:before{
  content:"";
  position:absolute;
  inset:0;
  background:url('../assets/pattern-lines.svg') center/cover;
  opacity:.55;
}
.hero-card-main img{
  position:absolute;
  left:50%;
  top:48%;
  transform:translate(-50%,-50%);
  width:86%;
  max-height:430px;
  object-fit:contain;
  filter:drop-shadow(0 30px 45px rgba(0,0,0,.32));
}
.floating-card{
  position:absolute;
  background:#fff;
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  border-radius:24px;
  padding:18px;
  z-index:2;
}
.floating-card.one{left:0;bottom:72px;width:260px}
.floating-card.two{right:20px;bottom:10px;width:240px}
.floating-card .icon{
  width:42px;height:42px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(0,200,255,.12);
  color:#007fb8;
  font-size:20px;
  margin-bottom:10px;
}
.floating-card strong{display:block;color:#071728}
.floating-card p{font-size:13px;color:var(--muted);line-height:1.45;margin-top:4px}

.trust-strip{
  background:#071728;
  color:#fff;
  padding:22px 0;
}
.trust-grid{
  display:grid;
  grid-template-columns:1.2fr repeat(3,1fr);
  gap:20px;
  align-items:center;
}
.trust-item{
  display:flex;
  gap:12px;
  align-items:center;
  color:#d5e3f0;
}
.trust-item strong{display:block;color:#fff;font-size:20px;line-height:1}
.trust-dot{
  width:42px;height:42px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(0,200,255,.14);
  color:#71e8ff;
}

.split{
  display:grid;
  grid-template-columns:.95fr 1.05fr;
  gap:54px;
  align-items:center;
}
.image-frame{
  position:relative;
  border-radius:34px;
  overflow:hidden;
  box-shadow:var(--shadow);
  background:#fff;
  border:1px solid var(--line);
}
.image-frame img{
  width:100%;
  height:520px;
  object-fit:cover;
}
.image-frame.circle img{object-fit:contain;padding:24px;background:#f6fbff}
.info-list{
  display:grid;
  gap:14px;
  margin-top:28px;
}
.info-line{
  display:flex;
  gap:14px;
  padding:18px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:20px;
}
.info-line .check{
  width:30px;height:30px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(0,200,255,.15);
  color:#007fb8;
  flex:0 0 auto;
  font-weight:900;
}

.problem-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
  margin-top:42px;
}
.problem-card{
  padding:28px;
  border-radius:26px;
  background:#fff;
  border:1px solid var(--line);
  box-shadow:0 18px 42px rgba(4,17,31,.06);
  transition:.25s;
}
.problem-card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.problem-card .num{
  width:46px;height:46px;border-radius:16px;
  background:linear-gradient(135deg,#dff8ff,#eff9ff);
  color:#007fb8;
  display:flex;align-items:center;justify-content:center;
  font-weight:900;
  margin-bottom:18px;
}
.problem-card h3{font-size:22px;margin-bottom:8px;color:#071728}
.problem-card p{color:var(--muted)}

.service-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
  margin-top:44px;
}
.service-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:30px;
  overflow:hidden;
  box-shadow:0 18px 42px rgba(4,17,31,.06);
  transition:.25s;
}
.service-card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.service-img{
  background:linear-gradient(135deg,#eef9ff,#ffffff);
  height:260px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
}
.service-img img{
  max-height:100%;
  width:100%;
  object-fit:contain;
}
.service-body{padding:26px}
.service-body h3{font-size:23px;margin-bottom:8px;color:#071728}
.service-body p{color:var(--muted);margin-bottom:18px}
.service-tag{
  display:inline-flex;
  padding:8px 12px;
  border-radius:999px;
  background:#eff9ff;
  color:#007fb8;
  font-weight:800;
  font-size:12px;
  text-transform:uppercase;
}

.carousel-wrap{
  position:relative;
  margin-top:44px;
}
.carousel{
  display:flex;
  gap:22px;
  overflow:auto;
  padding:4px 2px 18px;
  scroll-snap-type:x mandatory;
  scrollbar-width:thin;
}
.carousel::-webkit-scrollbar{height:8px}
.carousel::-webkit-scrollbar-thumb{background:#9adff3;border-radius:999px}
.lock-slide{
  min-width:340px;
  scroll-snap-align:start;
  background:#fff;
  border:1px solid var(--line);
  border-radius:30px;
  overflow:hidden;
  box-shadow:0 16px 38px rgba(4,17,31,.07);
}
.lock-slide .pic{
  height:330px;
  background:linear-gradient(135deg,#f4fbff,#fff);
  display:flex;align-items:center;justify-content:center;
  padding:20px;
}
.lock-slide .pic img{height:100%;width:100%;object-fit:contain}
.lock-slide .body{padding:24px}
.lock-slide h3{font-size:22px;color:#071728}
.lock-slide p{color:var(--muted);margin:8px 0 18px}
.carousel-actions{
  display:flex;
  gap:10px;
  justify-content:flex-end;
  margin-top:14px;
}
.circle-btn{
  width:48px;height:48px;border-radius:50%;
  border:1px solid var(--line);
  background:#fff;
  cursor:pointer;
  font-size:20px;
  transition:.2s;
}
.circle-btn:hover{background:#eff9ff;border-color:#9adff3}

.steps{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
  margin-top:44px;
}
.step{
  position:relative;
  background:#fff;
  border:1px solid var(--line);
  padding:26px;
  border-radius:26px;
  box-shadow:0 16px 38px rgba(4,17,31,.05);
}
.step strong{
  display:flex;
  align-items:center;
  justify-content:center;
  width:44px;height:44px;border-radius:16px;
  background:var(--navy);
  color:#7cecff;
  margin-bottom:18px;
}
.step h3{font-size:20px;color:#071728;margin-bottom:8px}
.step p{color:var(--muted)}

.benefits-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
  margin-top:42px;
}
.benefit{
  padding:22px;
  border-radius:24px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
}
.benefit .bicon{
  width:42px;height:42px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(0,200,255,.15);
  color:#80edff;
  margin-bottom:14px;
}
.benefit p{color:#c8d5e3;font-size:15px}

.brands{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
  margin-top:42px;
}
.brand-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:28px;
  padding:28px;
  min-height:150px;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 16px 38px rgba(4,17,31,.05);
}
.brand-card img{max-height:88px;object-fit:contain}

.testimonials{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
  margin-top:44px;
}
.testimonial{
  background:#fff;
  border:1px solid var(--line);
  border-radius:28px;
  padding:28px;
  box-shadow:0 16px 38px rgba(4,17,31,.05);
}
.stars{color:#f6b300;font-size:20px;letter-spacing:2px;margin-bottom:14px}
.testimonial p{color:#52657a}
.person{
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:20px;
}
.avatar{
  width:44px;height:44px;border-radius:50%;
  background:linear-gradient(135deg,var(--blue),var(--blue-2));
  color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-weight:900;
}

.compare{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px;
  margin-top:44px;
}
.compare-box{
  border-radius:30px;
  padding:34px;
  border:1px solid var(--line);
  background:#fff;
}
.compare-box.speed{
  background:linear-gradient(135deg,#071728,#092a4b);
  color:#fff;
  border-color:rgba(255,255,255,.12);
  box-shadow:var(--shadow);
}
.compare-box h3{font-size:28px;margin-bottom:20px}
.compare-box ul{list-style:none;display:grid;gap:14px}
.compare-box li{
  display:flex;
  gap:10px;
  align-items:flex-start;
  color:#52657a;
}
.compare-box.speed li{color:#d7e5f0}
.compare-box li:before{
  content:"✓";
  color:#007fb8;
  font-weight:900;
}
.compare-box.speed li:before{color:#7cecff}
.compare-box.common li:before{
  content:"•";
  color:#9aa9b9;
}

.faq{
  max-width:900px;
  margin:42px auto 0;
  display:grid;
  gap:12px;
}
.faq-item{
  background:#fff;
  border:1px solid var(--line);
  border-radius:22px;
  overflow:hidden;
}
.faq-question{
  width:100%;
  background:none;
  border:0;
  padding:22px 24px;
  display:flex;
  justify-content:space-between;
  gap:20px;
  align-items:center;
  text-align:left;
  font-weight:900;
  color:#071728;
  cursor:pointer;
  font-size:16px;
}
.faq-question span:last-child{
  width:30px;height:30px;border-radius:50%;
  background:#eff9ff;
  color:#007fb8;
  display:flex;align-items:center;justify-content:center;
  flex:0 0 auto;
}
.faq-answer{
  max-height:0;
  overflow:hidden;
  transition:.25s ease;
}
.faq-answer p{
  padding:0 24px 22px;
  color:var(--muted);
}
.faq-item.open .faq-answer{max-height:180px}

.cta-final{
  background:
    linear-gradient(90deg,rgba(4,17,31,.94),rgba(4,17,31,.72)),
    url('../assets/hero-outdoor.png') center/cover;
  color:#fff;
}
.cta-box{
  max-width:760px;
}
.cta-final .title{text-align:left}
.cta-final .lead{color:#d3e1ee}

.footer{
  background:#fff;
  border-top:1px solid var(--line);
  padding:60px 0 26px;
}
.footer-grid{
  display:grid;
  grid-template-columns:2fr 1fr 1fr 1.3fr;
  gap:36px;
}
.footer-logo{
  display:inline-flex;
  background:#02070d;
  border-radius:18px;
  padding:8px 14px;
  margin-bottom:18px;
}
.footer-logo img{height:52px}
.footer p,.footer a{color:#5f6f83}
.footer h4{color:#071728;margin-bottom:16px}
.footer-links{display:grid;gap:10px}
.map-card{
  background:#eff9ff;
  border:1px solid var(--line);
  border-radius:22px;
  padding:18px;
}
.map-visual{
  height:120px;
  border-radius:16px;
  background:
    radial-gradient(circle at 60% 45%, #007fb8 0 5px, transparent 6px),
    linear-gradient(45deg, transparent 48%, rgba(0,127,184,.16) 49% 51%, transparent 52%),
    linear-gradient(-35deg, transparent 48%, rgba(0,127,184,.12) 49% 51%, transparent 52%),
    #fff;
  border:1px solid #dce7f2;
}
.copyright{
  margin-top:40px;
  padding-top:22px;
  border-top:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  font-size:14px;
  color:#7a8a9c;
}

.whatsapp-float{
  position:fixed;
  right:22px;
  bottom:22px;
  z-index:60;
  width:62px;
  height:62px;
  border-radius:50%;
  background:#25d366;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 18px 40px rgba(37,211,102,.32);
  font-size:28px;
}

.page-hero{
  padding:140px 0 76px;
  background:
    radial-gradient(circle at 84% 12%, rgba(0,200,255,.18), transparent 34%),
    linear-gradient(135deg,#ffffff,#eef8ff);
}
.page-hero-grid{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:50px;
  align-items:center;
}
.page-hero .visual{
  background:#fff;
  border:1px solid var(--line);
  border-radius:36px;
  padding:26px;
  box-shadow:var(--shadow);
}
.page-hero .visual img{height:430px;width:100%;object-fit:contain}

@media(max-width:1020px){
  .nav-links,.nav-actions .btn{display:none}
  .mobile-toggle{display:block}
  .header.menu-open .nav-links{
    display:flex;
    position:absolute;
    left:4%;
    right:4%;
    top:84px;
    flex-direction:column;
    align-items:flex-start;
    background:#fff;
    border:1px solid var(--line);
    padding:20px;
    border-radius:22px;
    box-shadow:var(--shadow);
  }
  .hero-grid,.split,.page-hero-grid,.trust-grid,.compare,.footer-grid{grid-template-columns:1fr}
  .hero{padding-top:118px}
  .hero-visual{min-height:520px}
  .hero-card-main{position:relative;width:100%;min-height:430px}
  .floating-card.one{left:10px;bottom:44px}
  .floating-card.two{right:10px}
  .hero-badges,.problem-grid,.service-grid,.steps,.benefits-grid,.brands,.testimonials{grid-template-columns:1fr 1fr}
  .trust-grid{gap:14px}
  .section{padding:76px 0}
}

@media(max-width:680px){
  .container{width:min(100% - 28px,1180px)}
  .nav{height:76px}
  .brand-chip img{height:42px}
  .header.menu-open .nav-links{top:76px}
  .hero h1{font-size:44px}
  .hero .subtitle{font-size:17px}
  .hero-badges,.problem-grid,.service-grid,.steps,.benefits-grid,.brands,.testimonials{grid-template-columns:1fr}
  .hero-actions,.btns{flex-direction:column}
  .btn{width:100%}
  .floating-card{position:relative!important;left:auto!important;right:auto!important;bottom:auto!important;width:100%!important;margin-top:14px}
  .hero-visual{min-height:auto}
  .hero-card-main{min-height:360px}
  .lock-slide{min-width:88%}
  .page-hero .visual img{height:320px}
  .image-frame img{height:360px}
  .copyright{flex-direction:column}
}


/* Ajustes V2 — visual mais claro, logo sem chip e mais confiança */
.header{
  background:rgba(247,251,255,.94);
  border-bottom:1px solid rgba(220,231,242,.95);
}
.brand-chip,
.footer-logo{
  background:transparent!important;
  box-shadow:none!important;
  border-radius:0!important;
  padding:0!important;
}
.brand-chip img{
  height:54px;
  filter:drop-shadow(0 8px 18px rgba(4,17,31,.10));
}
.footer-logo img{
  height:66px;
  filter:drop-shadow(0 10px 22px rgba(4,17,31,.10));
}
.footer{
  background:#f7fbff!important;
}
.footer .copyright a{
  color:#007fb8;
  font-weight:900;
}

/* Centralização das seções de vitrine/modelos e páginas internas */
.center-block{
  text-align:center;
}
.center-block .eyebrow,
.section-head.center .eyebrow{
  margin-left:auto;
  margin-right:auto;
}
.section-head{
  margin-bottom:44px;
}
.section-head.center{
  text-align:center;
}
.section-head.center .lead{
  margin-left:auto;
  margin-right:auto;
}

/* Hero das páginas internas centralizado */
.page-hero{
  padding:132px 0 72px;
}
.page-hero-grid{
  grid-template-columns:1fr!important;
  max-width:980px;
  margin:0 auto;
  text-align:center;
}
.page-hero .lead{
  margin-left:auto;
  margin-right:auto;
}
.page-hero .hero-actions{
  justify-content:center;
}
.page-hero .visual{
  max-width:560px;
  margin:10px auto 0;
}

/* Home: showcase animado de fechaduras */
.animated-locks{
  background:linear-gradient(180deg,#ffffff 0%,#eef8ff 100%);
  overflow:hidden;
}
.lock-motion{
  position:relative;
  min-height:520px;
  margin-top:44px;
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:42px;
  align-items:center;
}
.motion-copy{
  max-width:460px;
}
.motion-stage{
  position:relative;
  min-height:500px;
  border-radius:42px;
  background:
    radial-gradient(circle at 50% 35%, rgba(0,200,255,.20), transparent 30%),
    linear-gradient(135deg,#ffffff,#eaf8ff);
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  overflow:hidden;
}
.motion-stage:before{
  content:"";
  position:absolute;
  inset:8%;
  border:1px dashed rgba(0,127,184,.18);
  border-radius:50%;
  animation:spinRing 18s linear infinite;
}
.lock-float{
  position:absolute;
  width:210px;
  min-height:260px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:30px;
  box-shadow:0 24px 60px rgba(4,17,31,.12);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  animation:floatLock 5s ease-in-out infinite;
}
.lock-float img{
  max-height:230px;
  object-fit:contain;
}
.lock-float.main{
  width:270px;
  min-height:350px;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  z-index:3;
  animation:pulseMain 4s ease-in-out infinite;
}
.lock-float.one{left:8%;top:10%;animation-delay:.3s}
.lock-float.two{right:7%;top:16%;animation-delay:.9s}
.lock-float.three{left:13%;bottom:9%;animation-delay:1.4s}
.lock-float.four{right:12%;bottom:7%;animation-delay:2s}
.motion-pill{
  position:absolute;
  left:50%;
  bottom:28px;
  transform:translateX(-50%);
  z-index:4;
  background:#071728;
  color:#fff;
  padding:14px 18px;
  border-radius:999px;
  font-weight:900;
  box-shadow:0 18px 42px rgba(4,17,31,.22);
}
.motion-pill span{
  color:#7cecff;
}
@keyframes floatLock{
  0%,100%{transform:translateY(0) rotate(-1deg)}
  50%{transform:translateY(-16px) rotate(1.5deg)}
}
@keyframes pulseMain{
  0%,100%{transform:translate(-50%,-50%) scale(1)}
  50%{transform:translate(-50%,-50%) scale(1.035)}
}
@keyframes spinRing{
  from{transform:rotate(0)}
  to{transform:rotate(360deg)}
}

/* Texto da seção modelos direcionado ao cliente final */
.client-copy{
  max-width:780px;
}

/* Rodapé: assinatura Desordeiro */
.made-by{
  color:#7a8a9c;
}
.made-by a{
  color:#007fb8;
  font-weight:900;
}

@media(max-width:1020px){
  .brand-chip img{height:48px}
  .lock-motion{grid-template-columns:1fr}
  .motion-copy{text-align:center;margin:0 auto}
  .motion-copy .lead{margin-left:auto;margin-right:auto}
}
@media(max-width:680px){
  .motion-stage{min-height:560px}
  .lock-float{width:160px;min-height:210px}
  .lock-float.main{width:220px;min-height:300px}
  .lock-float.one{left:4%;top:8%}
  .lock-float.two{right:4%;top:10%}
  .lock-float.three{left:5%;bottom:13%}
  .lock-float.four{right:5%;bottom:13%}
}


/* Ajustes V3 — menu e rodapé em azul marinho */
.header{
  background:rgba(4,17,31,.96)!important;
  border-bottom:1px solid rgba(255,255,255,.10)!important;
  box-shadow:0 14px 36px rgba(4,17,31,.18);
}
.nav-links{
  color:#d7e5f0!important;
}
.nav-links a{
  color:#d7e5f0!important;
}
.nav-links a:hover{
  color:#7cecff!important;
}
.mobile-toggle{
  background:rgba(255,255,255,.08)!important;
  color:#fff!important;
  border-color:rgba(255,255,255,.18)!important;
}
.header.menu-open .nav-links{
  background:#071b33!important;
  border-color:rgba(255,255,255,.12)!important;
}
.header.menu-open .nav-links a{
  color:#fff!important;
}

.footer{
  background:#04111f!important;
  color:#d7e5f0!important;
  border-top:1px solid rgba(255,255,255,.10)!important;
}
.footer p,
.footer a{
  color:#c8d5e3!important;
}
.footer a:hover{
  color:#7cecff!important;
}
.footer h4{
  color:#ffffff!important;
}
.footer .copyright{
  border-top:1px solid rgba(255,255,255,.12)!important;
  color:#9fb3c8!important;
}
.footer .copyright span{
  color:#9fb3c8!important;
}
.footer .copyright a,
.footer .made-by a{
  color:#7cecff!important;
  font-weight:900!important;
}
.map-card{
  background:#071b33!important;
  border-color:rgba(255,255,255,.12)!important;
}
.map-card p{
  color:#c8d5e3!important;
}
.map-visual{
  background:
    radial-gradient(circle at 60% 45%, #00c8ff 0 5px, transparent 6px),
    linear-gradient(45deg, transparent 48%, rgba(0,200,255,.18) 49% 51%, transparent 52%),
    linear-gradient(-35deg, transparent 48%, rgba(0,200,255,.14) 49% 51%, transparent 52%),
    rgba(255,255,255,.08)!important;
  border-color:rgba(255,255,255,.14)!important;
}


/* Ajustes V4 — animação real em HTML/CSS e CTA final centralizado sem imagem */
.lock-motion-v4{
  grid-template-columns:.82fr 1.18fr;
  align-items:center;
}

.moving-lock-showcase{
  position:relative;
  min-height:560px;
  border-radius:46px;
  background:
    radial-gradient(circle at 50% 50%, rgba(0,200,255,.22), transparent 34%),
    linear-gradient(135deg,#ffffff 0%,#f3fbff 48%,#e8f7ff 100%);
  border:1px solid var(--line);
  box-shadow:0 30px 90px rgba(4,17,31,.12);
  overflow:hidden;
}

.showcase-orbit{
  position:absolute;
  inset:58px;
  border:1px dashed rgba(0,127,184,.22);
  border-radius:50%;
  animation:orbitSpin 18s linear infinite;
}

.showcase-orbit:before,
.showcase-orbit:after{
  content:"";
  position:absolute;
  border-radius:50%;
  border:1px solid rgba(0,200,255,.15);
}
.showcase-orbit:before{inset:54px}
.showcase-orbit:after{inset:108px}

.moving-lock-card{
  position:absolute;
  width:180px;
  height:220px;
  background:rgba(255,255,255,.88);
  border:1px solid rgba(220,231,242,.95);
  border-radius:30px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px 16px 48px;
  box-shadow:0 24px 60px rgba(4,17,31,.14);
  backdrop-filter:blur(12px);
  animation:cardOrbit 16s ease-in-out infinite;
  z-index:2;
}

.moving-lock-card img{
  width:100%;
  height:100%;
  object-fit:contain;
}

.moving-lock-card span{
  position:absolute;
  left:18px;
  right:18px;
  bottom:14px;
  min-height:30px;
  border-radius:999px;
  background:#071728;
  color:#7cecff;
  font-weight:900;
  font-size:13px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.moving-lock-card.card-a{
  left:8%;
  top:12%;
  animation-delay:0s;
}
.moving-lock-card.card-b{
  right:8%;
  top:13%;
  animation-delay:-3.2s;
}
.moving-lock-card.card-c{
  left:10%;
  bottom:12%;
  animation-delay:-6.4s;
}
.moving-lock-card.card-d{
  right:10%;
  bottom:11%;
  animation-delay:-9.6s;
}
.moving-lock-card.card-e{
  left:50%;
  top:4%;
  transform:translateX(-50%);
  animation-delay:-12.8s;
}

.showcase-center{
  position:absolute;
  left:50%;
  top:53%;
  transform:translate(-50%,-50%);
  z-index:5;
  width:300px;
  min-height:370px;
  border-radius:38px;
  background:#fff;
  border:1px solid var(--line);
  box-shadow:0 30px 80px rgba(4,17,31,.16);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:28px 24px;
  animation:centerBreath 4.6s ease-in-out infinite;
}

.showcase-center img{
  width:100%;
  height:275px;
  object-fit:contain;
}

.showcase-center strong{
  margin-top:18px;
  padding:12px 18px;
  border-radius:999px;
  background:#071728;
  color:#7cecff;
  box-shadow:0 14px 34px rgba(4,17,31,.18);
}

@keyframes orbitSpin{
  from{transform:rotate(0deg)}
  to{transform:rotate(360deg)}
}

@keyframes centerBreath{
  0%,100%{transform:translate(-50%,-50%) scale(1)}
  50%{transform:translate(-50%,-50%) scale(1.035)}
}

@keyframes cardOrbit{
  0%,100%{translate:0 0; scale:1; rotate:-1deg}
  25%{translate:18px -18px; scale:1.04; rotate:1.5deg}
  50%{translate:0 -30px; scale:.98; rotate:-.5deg}
  75%{translate:-18px 12px; scale:1.03; rotate:1deg}
}

/* CTA final sem imagem de fundo e totalmente centralizado */
.cta-final{
  background:
    radial-gradient(circle at 50% 0%, rgba(0,200,255,.18), transparent 34%),
    linear-gradient(135deg,#04111f 0%,#071b33 56%,#082642 100%)!important;
  color:#fff!important;
  text-align:center!important;
}
.cta-final .container,
.cta-final .cta-box{
  max-width:880px!important;
  margin-left:auto!important;
  margin-right:auto!important;
  text-align:center!important;
}
.cta-final .title,
.cta-final .lead{
  text-align:center!important;
  margin-left:auto!important;
  margin-right:auto!important;
}
.cta-final .hero-actions{
  justify-content:center!important;
}
.cta-final .eyebrow{
  margin-left:auto!important;
  margin-right:auto!important;
}

/* Ajuste para o botão secundário no CTA ficar legível no fundo escuro */
.cta-final .btn-outline{
  background:#fff!important;
  color:#071728!important;
  border-color:#fff!important;
}

@media(max-width:1020px){
  .lock-motion-v4{
    grid-template-columns:1fr;
  }
  .moving-lock-showcase{
    min-height:620px;
  }
  .motion-copy{
    text-align:center;
  }
  .motion-copy .hero-actions{
    justify-content:center;
  }
}

@media(max-width:680px){
  .moving-lock-showcase{
    min-height:560px;
    border-radius:32px;
  }
  .showcase-center{
    width:230px;
    min-height:310px;
  }
  .showcase-center img{
    height:220px;
  }
  .moving-lock-card{
    width:138px;
    height:178px;
    border-radius:24px;
  }
  .moving-lock-card.card-a{left:2%;top:10%}
  .moving-lock-card.card-b{right:2%;top:12%}
  .moving-lock-card.card-c{left:3%;bottom:10%}
  .moving-lock-card.card-d{right:3%;bottom:10%}
  .moving-lock-card.card-e{top:2%}
}


/* Ajuste V5 — seção animada sem imagens, apenas animação HTML/CSS estilo vídeo */
.lock-motion-v5{
  grid-template-columns:.82fr 1.18fr;
  align-items:center;
}

.video-lock-demo{
  position:relative;
  min-height:560px;
  border-radius:42px;
  background:
    radial-gradient(circle at 50% 38%, rgba(0,200,255,.18), transparent 34%),
    linear-gradient(135deg,#ffffff 0%,#f4fbff 48%,#e8f7ff 100%);
  border:1px solid var(--line);
  box-shadow:0 30px 90px rgba(4,17,31,.12);
  overflow:hidden;
}

.video-topbar{
  height:62px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:0 24px;
  border-bottom:1px solid rgba(220,231,242,.9);
  background:rgba(255,255,255,.62);
  backdrop-filter:blur(12px);
  color:#5f6f83;
}

.video-topbar span{
  width:12px;
  height:12px;
  border-radius:50%;
  background:#b9d7e7;
}

.video-topbar span:first-child{
  background:#00c8ff;
}

.video-topbar strong{
  margin-left:10px;
  color:#071728;
  font-size:14px;
  letter-spacing:.03em;
  text-transform:uppercase;
}

.video-stage{
  position:absolute;
  inset:62px 0 0;
  display:flex;
  align-items:center;
  justify-content:center;
}

.video-stage:before{
  content:"";
  position:absolute;
  width:620px;
  height:620px;
  border-radius:50%;
  border:1px dashed rgba(0,127,184,.20);
  animation:v5Spin 22s linear infinite;
}

.video-stage:after{
  content:"";
  position:absolute;
  width:360px;
  height:360px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(0,200,255,.14), transparent 62%);
  animation:v5Breath 4.5s ease-in-out infinite;
}

.animated-door{
  position:relative;
  z-index:3;
  width:280px;
  height:390px;
  border-radius:28px;
  background:
    linear-gradient(90deg, rgba(255,255,255,.20), transparent 36%),
    linear-gradient(135deg,#b78d63,#7c5533 58%,#5f3b22);
  box-shadow:
    inset 18px 0 40px rgba(255,255,255,.16),
    inset -18px 0 40px rgba(0,0,0,.20),
    0 34px 90px rgba(4,17,31,.20);
  overflow:hidden;
  animation:doorFloat 5s ease-in-out infinite;
}

.door-light{
  position:absolute;
  inset:0;
  background:linear-gradient(105deg, transparent 0 38%, rgba(255,255,255,.24) 45%, transparent 54% 100%);
  transform:translateX(-120%);
  animation:lightSweep 4s ease-in-out infinite;
}

.smart-lock{
  position:absolute;
  left:50%;
  top:50%;
  width:106px;
  height:270px;
  transform:translate(-50%,-50%);
  border-radius:30px;
  background:
    linear-gradient(145deg,#111827,#020617);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:
    inset 0 0 18px rgba(255,255,255,.10),
    0 22px 40px rgba(0,0,0,.32);
}

.fingerprint{
  position:absolute;
  top:26px;
  left:50%;
  width:52px;
  height:52px;
  transform:translateX(-50%);
  border-radius:50%;
  border:2px solid rgba(0,200,255,.72);
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 0 22px rgba(0,200,255,.55);
  animation:fingerprintGlow 2.4s ease-in-out infinite;
}

.fingerprint i{
  position:absolute;
  border:2px solid rgba(124,236,255,.75);
  border-radius:50%;
}

.fingerprint i:nth-child(1){width:34px;height:34px}
.fingerprint i:nth-child(2){width:22px;height:22px}
.fingerprint i:nth-child(3){width:10px;height:10px}

.keypad{
  position:absolute;
  top:100px;
  left:50%;
  transform:translateX(-50%);
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:11px;
}

.keypad span{
  width:10px;
  height:10px;
  border-radius:50%;
  background:#dff8ff;
  box-shadow:0 0 14px rgba(0,200,255,.7);
  animation:keyBlink 2.8s ease-in-out infinite;
}

.keypad span:nth-child(2){animation-delay:.2s}
.keypad span:nth-child(3){animation-delay:.4s}
.keypad span:nth-child(4){animation-delay:.6s}
.keypad span:nth-child(5){animation-delay:.8s}
.keypad span:nth-child(6){animation-delay:1s}
.keypad span:nth-child(7){animation-delay:1.2s}
.keypad span:nth-child(8){animation-delay:1.4s}
.keypad span:nth-child(9){animation-delay:1.6s}

.handle{
  position:absolute;
  right:-98px;
  bottom:66px;
  width:155px;
  height:35px;
  border-radius:999px;
  background:linear-gradient(90deg,#0f172a,#475569 55%,#111827);
  box-shadow:0 16px 26px rgba(0,0,0,.28);
  transform-origin:20px 50%;
  animation:handleMove 5s ease-in-out infinite;
}

.scan-line{
  position:absolute;
  z-index:8;
  width:480px;
  height:3px;
  border-radius:999px;
  background:linear-gradient(90deg, transparent, #00c8ff, transparent);
  box-shadow:0 0 28px rgba(0,200,255,.7);
  animation:scanMove 3.2s ease-in-out infinite;
}

.pulse-ring{
  position:absolute;
  z-index:2;
  width:320px;
  height:320px;
  border:1px solid rgba(0,200,255,.26);
  border-radius:50%;
  animation:pulseRing 3.6s ease-in-out infinite;
}

.pulse-ring.ring-b{
  width:430px;
  height:430px;
  animation-delay:1.2s;
}

.status-card{
  position:absolute;
  z-index:9;
  background:#fff;
  border:1px solid var(--line);
  border-radius:22px;
  padding:16px 18px;
  box-shadow:0 20px 48px rgba(4,17,31,.13);
  animation:statusFloat 4s ease-in-out infinite;
}

.status-card strong{
  display:block;
  color:#071728;
  font-size:15px;
}

.status-card small{
  color:#007fb8;
  font-weight:800;
}

.status-a{
  left:54px;
  top:112px;
}

.status-b{
  right:46px;
  bottom:90px;
  animation-delay:1.2s;
}

@keyframes v5Spin{
  from{transform:rotate(0deg)}
  to{transform:rotate(360deg)}
}

@keyframes v5Breath{
  0%,100%{transform:scale(.94);opacity:.65}
  50%{transform:scale(1.08);opacity:1}
}

@keyframes doorFloat{
  0%,100%{transform:translateY(0) rotate(-.6deg)}
  50%{transform:translateY(-14px) rotate(.6deg)}
}

@keyframes lightSweep{
  0%,25%{transform:translateX(-130%)}
  55%,100%{transform:translateX(130%)}
}

@keyframes fingerprintGlow{
  0%,100%{box-shadow:0 0 18px rgba(0,200,255,.42);transform:translateX(-50%) scale(1)}
  50%{box-shadow:0 0 34px rgba(0,200,255,.78);transform:translateX(-50%) scale(1.06)}
}

@keyframes keyBlink{
  0%,100%{opacity:.45;transform:scale(.86)}
  50%{opacity:1;transform:scale(1.22)}
}

@keyframes handleMove{
  0%,70%,100%{transform:rotate(0deg)}
  82%{transform:rotate(8deg)}
}

@keyframes scanMove{
  0%{top:22%;opacity:0}
  15%{opacity:1}
  55%{top:72%;opacity:1}
  100%{top:82%;opacity:0}
}

@keyframes pulseRing{
  0%{transform:scale(.78);opacity:.72}
  100%{transform:scale(1.24);opacity:0}
}

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

@media(max-width:1020px){
  .lock-motion-v5{
    grid-template-columns:1fr;
  }
  .video-lock-demo{
    min-height:600px;
  }
  .motion-copy{
    text-align:center;
  }
  .motion-copy .lead{
    margin-left:auto;
    margin-right:auto;
  }
  .motion-copy .hero-actions{
    justify-content:center;
  }
}

@media(max-width:680px){
  .video-lock-demo{
    min-height:590px;
    border-radius:30px;
  }
  .animated-door{
    width:230px;
    height:330px;
  }
  .smart-lock{
    width:88px;
    height:230px;
  }
  .handle{
    right:-82px;
    width:130px;
  }
  .status-card{
    max-width:190px;
  }
  .status-a{
    left:18px;
    top:94px;
  }
  .status-b{
    right:18px;
    bottom:58px;
  }
  .scan-line{
    width:300px;
  }
}