:root {
     --primary: #0064FE;
     --secondary: #00BAEA;
     --bg: #F4F5F7;
     --card: rgba(255, 255, 255, 0.72);
     --text: #111111;
     --muted: #737373;
     --border: rgba(255, 255, 255, 0.85);
     --shadow: 0 10px 35px rgba(17, 17, 17, 0.05);
     --shadow-hover: 0 16px 40px rgba(0, 100, 254, 0.10);
     --glass-blur: 24px;
     --radius: 34px;
     --transition: 350ms cubic-bezier(0.19, 1, 0.22, 1);
}
 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
}
 html {
     scroll-behavior: smooth;
}
 body {
     font-family: "Inter", sans-serif;
     background: var(--bg);
     overflow-x: hidden;
     color: var(--text);
     min-height: 100vh;
}
 .page {
     max-width: 560px;
     margin: auto;
     position: relative;
     z-index: 2;
     overflow: hidden;
}

section {
  padding: 0 15px;
}

 .bg-glow {
     position: fixed;
     pointer-events: none;
     filter: blur(110px);
     z-index: 0;
     border-radius: 999px;
}
 .glow1 {
     top: -120px;
     right: -80px;
     width: 260px;
     height: 260px;
     background: rgba(0, 186, 234, 0.14);
}
 .glow2 {
     top: 420px;
     left: -120px;
     width: 220px;
     height: 220px;
     background: rgba(0, 100, 254, 0.10);
}
 .glass {
     background: var(--card);
     backdrop-filter: blur(var(--glass-blur));
     -webkit-backdrop-filter: blur(var(--glass-blur));
     border: 1px solid var(--border);
     box-shadow: var(--shadow);
}

 .glass-prod {
     background: #fff;
     backdrop-filter: blur(var(--glass-blur));
     -webkit-backdrop-filter: blur(var(--glass-blur));
     border: 1px solid var(--border);
     box-shadow: var(--shadow);
}


 .hero {
     padding: 26px 26px 100px 26px;
     border-radius: 0 0 40px 40px;
     overflow: hidden;
     position: relative;
}
 .hero-top {
     display: flex;
     align-items: center;
     justify-content: space-between;
}
 .logo {
     width: 145px;
}
 .menu-btn {
     width: 48px;
     height: 48px;
     border: none;
     background: rgba(255, 255, 255, 0.65);
     border-radius: 18px;
     font-size: 18px;
     cursor: pointer;
}
 .tag {
     display: inline-flex;
     padding: 8px 14px;
     background: rgba(0, 100, 254, 0.08);
     color: var(--primary);
     font-size: 12px;
     font-weight: 700;
     border-radius: 999px;
     margin-top: 30px;
}
 .hero h1 {
     font-size: 52px;
     font-weight: 900;
     line-height: 1;
     letter-spacing: -3px;
     margin-top: 24px;
}
 .hero h1 span {
     display: block;
     color: var(--primary);
}
 .hero p {
     margin-top: 26px;
     font-size: 16px;
     line-height: 1.6;
     color: var(--muted);
     max-width: 340px;
}
 .hero-buttons {
     display: inline-grid;
     gap: 12px;
     margin-top: 32px;
}

 .btn-primary {
     border: none;
     height: 56px;
     padding: 5px 35px;
     min-width: 180px;
     background: linear-gradient(135deg, var(--primary), var(--secondary));
     color: white;
     font-weight: 700;
     border-radius: 12px;
     cursor: pointer;
     box-shadow: 0 10px 25px rgba(0, 100, 254, 0.18);
     transition: var(--transition);
}

 .btn-primary:hover {
     transform: translateY(-2px);
}
 .btn-secondary {
     height: 56px;
     padding: 5px 35px;
     min-width: 180px;
     background: rgba(255, 255, 255, 0.60);
     border: 1px solid #0064fe52;
     box-shadow: 0 10px 25px rgba(0, 100, 254, 0.18);
     transition: var(--transition);
     border-radius: 12px;
     font-weight: 700;
     cursor: pointer;
}

 .trust-grid {
     margin: -75px 15px 0 15px;
     padding: 10px 34px;
     display: grid;
     grid-template-columns: 1fr;
     gap: 14px;
     border-radius: 36px;
     overflow: hidden;
}
 .trust-card {
     padding: 24px 0;
     background: rgba(255, 255, 255, 0.48);
     display: flex;
     gap: 24px;
     align-items: center;
}

 .trust-card-text span {
     font-size: 24px;
     font-weight: 800;
     letter-spacing: -1px;
     color: var(--primary);
}
 .trust-card-text p {
     margin-top: 8px;
     font-size: 14px;
     line-height: 1.6;
     color: var(--muted);
}

 .trust-card i {
     color: var(--primary);
     font-size: 24px;
}


 .products {
     margin-top: 34px;
}

.footer-contato {
     margin-top: 34px;
}
 .section-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-bottom: 24px;
}
 .section-header span {
     font-size: 12px;
     font-weight: 700;
     color: var(--primary);
     text-transform: uppercase;
}
 .section-header h2 {
     font-size: 34px;
     font-weight: 900;
     letter-spacing: -2px;
     margin-top: 4px;
}

.search-wrapper{

display:flex;

align-items:center;

width:52px;

height:52px;

overflow:hidden;

transition:

450ms
cubic-bezier(
0.19,
1,
0.22,
1
);

border-radius:22px;

background:

rgba(
255,
255,
255,
0.72
);

backdrop-filter:

blur(24px);

box-shadow:

0 8px 30px

rgba(
0,
0,
0,
0.04
);

}

.search-wrapper.open{
width:250px;
padding-right:14px;
padding-left: 14px;

}

#searchInput{
display: none;
border:none;

background:transparent;

outline:none;
flex:1;

font-size:14px;

font-weight:600;

padding-left:6px;

opacity:0;

transition:.25s;

color:#111;

}

.search-wrapper.open #searchInput{
opacity:1;
  display: block;

}

#searchButton {
  width: 100%;
  height: 100%;
  background: none;
  border: none;
}

.search-wrapper .open #searchButton {
  height: 100%;
  width: fit-content;
}

#searchInput::placeholder{

color:#8A8F98;

}
















 .product-list {
     display: flex;
     flex-direction: column;
     gap: 18px;
}

 .contato {
     display: flex;
     flex-direction: column;
     gap: 18px;
}

 .info-card {
     border-radius: 32px;
     transition: var(--transition);

    padding: 24px;
    border-radius: 28px;
    text-align: center;
}

.footer-top {
    width: 100px;
    height: 100px;
    margin: auto;
    border-radius: 20px;
    background: rgba(0, 100, 254, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
}

.footer-top h3 {
    font-size: 16px;
    font-weight: 700;
}

.footer-top p {
    margin-top: 8px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--muted);
}

 .product-card-text {
    padding: 24px 0 24px 24px;
 }

 .product-card-image {
  height: 210px;
 }

  .product-card-image img {
     height: 100%;
     object-fit: contain;
}

 .product-card {
     display: grid;
     grid-template-columns: auto 1fr 1fr;
     justify-content: space-between;
     align-items: center;
     border-radius: 32px;
     transition: var(--transition);
     overflow: hidden;
     position: relative;
     cursor: pointer;
     height: 210px;
}
 .product-card:hover {
     transform: translateY(-4px);
     box-shadow: var(--shadow-hover);
}
 .product-card span {
     font-size: 12px;
     font-weight: 800;
     color: var(--primary);
}
 .product-card h3 {
     margin-top: 8px;
     font-size: 24px;
     font-weight: 800;
     letter-spacing: -1px;
}
 .product-card p {
     margin-top: 8px;
     font-size: 14px;
     color: var(--muted);
}
 .cta-reseller {
     margin: 36px 15px 0 15px;
     padding: 34px;
     border-radius: 36px;
     overflow: hidden;
     position: relative;
     display: flex;
     justify-content: space-between;
     align-items: center;
     background-image: url('../assets/images/revendedor.png');
     background-size: cover;
}

.cta-reseller button i {
  margin-left: 16px;
}

 .cta-glow {
     position: absolute;
     right: -100px;
     top: -80px;
     width: 220px;
     height: 220px;
     background: rgba(0, 186, 234, 0.12);
     filter: blur(80px);
}

 .cta-content {
     position: relative;
     z-index: 2;
}
 .cta-content h2 {
     font-size: 42px;
     font-weight: 800;
     line-height: 1.2;
     letter-spacing: -2px;
     margin-top: 12px;
     color: #fff;
}
 .cta-content h2 span {
     display: block;
     color: var(--primary);
     font-size: inherit;
}
 .cta-content p {
     margin-top: 18px;
     line-height: 1.6;
     color: #fff;
     max-width: 240px;
}
 .cta-content button {
     margin-top: 26px;
}
 .cta-image {
     position: relative;
     width: 120px;
     height: 120px;
     display: flex;
     align-items: center;
     justify-content: center;
}
 .circle-bg {
     position: absolute;
     width: 100%;
     height: 100%;
     background: linear-gradient(135deg, var(--primary), var(--secondary));
     opacity: .12;
     border-radius: 50%;
}
 .cta-image i {
     font-size: 46px;
     color: var(--primary);
     position: relative;
     z-index: 2;
}
 .applications {
     margin-top: 38px;
}
 .applications-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 18px;
}
 .application-card {
     overflow: hidden;
     border-radius: 30px;
     transition: var(--transition);
}
 .application-card:hover {
     transform: translateY(-4px);
}
 .application-image {
     height: 120px;
     background: linear-gradient(135deg, #ECECEC, #F8F8F8);
}
 .application-content {
     padding: 18px;
}
 .application-content h3 {
     font-size: 18px;
     font-weight: 700;
}
 .application-content p {
     margin-top: 8px;
     font-size: 14px;
     line-height: 1.6;
     color: var(--muted);
}
 .features {
     margin-top: 40px;
}
 .feature-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 16px;
}
 .feature-card {
     padding: 24px;
     border-radius: 28px;
     text-align: center;
     transition: var(--transition);
}

 .feature-card-detail {
     padding: 24px;
     margin-top: 30px;
     border-radius: 28px;
     text-align: center;
     transition: var(--transition);
     font-size:15px;
     font-weight:600;
     line-height:1.5;
}
 .feature-card:hover {
     transform: translateY(-3px);
}

 .feature-icon {
     width: 58px;
     height: 58px;
     margin: auto;
     border-radius: 20px;
     background: rgba(0, 100, 254, 0.08);
     display: flex;
     align-items: center;
     justify-content: center;
     margin-bottom: 18px;
}
 .feature-icon i {
     font-size: 22px;
     color: var(--primary);
}
 .feature-card h3 {
     font-size: 16px;
     font-weight: 700;
}
 .feature-card p {
     margin-top: 8px;
     font-size: 14px;
     line-height: 1.6;
     color: var(--muted);
}
 .footer {
     margin-top: 40px;
     padding: 28px;
     border-radius: 34px 34px 0 0;
}
 .footer-logo {
     width: 130px;
}
 .footer-grid {
     margin-top: 24px;
     display: grid;
     grid-template-columns: 1fr;
     gap: 24px;
}
 .footer-grid h4 {
     font-size: 15px;
     margin-bottom: 5px;
     margin-top: 15px;
}
 .footer-grid p {
     font-size: 14px;
     line-height: 1.6;
     color: var(--muted);
}
 .footer-copy {
     margin-top: 24px;
     padding-top: 20px;
     border-top: 1px solid rgba(0, 0, 0, 0.06);
     font-size: 13px;
     color: var(--muted);
}
 .fade-up {
     opacity: 0;
     transition: 700ms;
}
 .fade-up.visible {
     opacity: 1;
}
 @media(min-width:768px) {
     .page {
         max-width: 900px;
    }

    .products {
         margin-top: 48px;
    }

    .footer-contato {
         margin-top: 48px;
    }
    
     .product-list {
         display: grid;
         grid-template-columns: 1fr 1fr;
    }

    .contato {
         display: grid;
         grid-template-columns: 1fr;
    }
     .applications-grid {
         grid-template-columns: repeat(4, 1fr);
    }
     .feature-grid {
         grid-template-columns: repeat(4, 1fr);
    }
}
 @media(min-width:1200px) {
     .page {
         max-width: 1200px;
    }

     .hero {
         padding: 44px 44px 100px 44px;
    }
     .hero h1 {
         font-size: 72px;
    }
     .logo {
         width: 180px;
    }
}

 .mobile-tabs {
     position: fixed;
     bottom: 20px;
     left: 50%;
     transform: translateX(-50%);
     width: fit-content;
     max-width: 520px;
     padding: 8px;
     display: flex;
     gap: 8px;
     overflow-x: auto;
     overflow-y: hidden;
     z-index: 998;
     scrollbar-width: none;
     border-radius: 24px;
     background: rgba(255, 255, 255, 0.62);
     backdrop-filter: blur(28px);
}

 .mobile-tabs::-webkit-scrollbar {
     display: none;
}
.mobile-tabs .tab-btn {
     display:flex;
     flex-direction:column;
     justify-content:center;
     align-items:center;
     gap:4px;
     height: 60px;
     padding: 0 18px;
     border: none;
     border-radius: 12px;
     background: transparent;
     font-weight: 700;
     font-size: 14px;
     white-space: nowrap;
     cursor: pointer;
     transition: 300ms;
     flex-shrink: 0;
}

.mobile-tabs .tab-btn.active {
     background: linear-gradient(135deg, #0064FE, #00BAEA);
     color: white;
     box-shadow: 0 6px 18px rgba(0, 100, 254, 0.18);
}
.mobile-tabs .tab-btn:hover {
     background: linear-gradient(-135deg, #0064FE, #00BAEA);
     color: white;
     box-shadow: 0 6px 18px rgba(0, 100, 254, 0.18);
}

 .mobile-drawer {
     position: fixed;
     top: 0;
     right: -100%;
     width: 300px;
     height: 100vh;
     background: rgba(255, 255, 255, 0.84);
     backdrop-filter: blur(34px);
     transition: 450ms cubic-bezier(0.19, 1, 0.22, 1);
     z-index: 1200;
     padding: 34px;
}
 .mobile-drawer.open {
     right: 0;
}
 .drawer-content {
     margin-top: 80px;
     display: flex;
     flex-direction: column;
     gap: 26px;
}
 .drawer-content a {
     text-decoration: none;
     font-size: 18px;
     font-weight: 700;
     color: #111;
}
 .drawer-cta {
     margin-top: 20px;
}





.tab-content{
  display:none;
  padding-bottom: 115px !important;
  animation: fadeTab .35s cubic-bezier(0.19,1,0.22,1);
}

.tab-content.active{

display:block;

}

@keyframes fadeTab{

0%{

opacity:0;

transform:

translateY(12px);

}

100%{

opacity:1;

transform:

translateY(0);

}

}


.whatsapp-card{

position:relative;

display:flex;

align-items:center;

gap:18px;

padding:22px 24px;

border-radius:28px;

overflow:hidden;

background:

linear-gradient(
135deg,

#0064FE 0%,

#004DCC 45%,

#013A9A 100%

);

box-shadow:

0 12px 35px

rgba(
0,
100,
254,
0.25
),

inset
0 1px 1px

rgba(
255,
255,
255,
0.18
);

min-height:110px;

}

.bg-effect{

position:absolute;

right:-80px;

bottom:-70px;

width:220px;

height:180px;

border-radius:50%;

background:

radial-gradient(

circle,

rgba(
255,
255,
255,
0.10
),

transparent 70%

);

pointer-events:none;

}

.bg-effect::before{

content:"";

position:absolute;

right:20px;

bottom:20px;

width:180px;

height:180px;

border-radius:50%;

border:

1px solid

rgba(
255,
255,
255,
0.08
);

}

.left-icon{

width:66px;

height:66px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

background:

rgba(
255,
255,
255,
0.10
);

backdrop-filter:

blur(
18px
);

box-shadow:

0 0 30px

rgba(
0,
186,
234,
0.30
);

flex-shrink:0;

}

.left-icon i{

font-size:32px;

color:white;

}

.content{

flex:1;

z-index:2;

}

.content h3{

font-size:28px;

font-weight:800;

color:white;

letter-spacing:-0.5px;

margin-bottom:6px;

}

.content p{

font-size:18px;

color:

rgba(
255,
255,
255,
0.85
);

font-weight:500;

}

.action-btn{

width:74px;

height:74px;

border:none;

border-radius:50%;

background:white;

display:flex;

align-items:center;

justify-content:center;

cursor:pointer;

flex-shrink:0;

box-shadow:

0 0 30px

rgba(
0,
186,
234,
0.30
);

transition:

.35s;

z-index:2;

}

.action-btn:hover{

transform:

scale(
1.08
);

}

.action-btn i{

font-size:28px;

color:

#0064FE;

}

@media(max-width:550px){
  #mobilemenu span {
    display: none;
  }
}

@media(max-width:520px){

.content h3{

font-size:20px;

}

.content p{

font-size:14px;

}

.left-icon{

width:58px;

height:58px;

}

.action-btn{

width:62px;

height:62px;

}

}


/* PRODUCT PAGE */
.product-page{

display:none;

}

.product-detail-container{

padding:24px;

}

.product-top{

display:flex;

justify-content:space-between;

margin-bottom:22px;

}

.circle-btn{

width:54px;

height:54px;

border:none;

border-radius:18px;

display:flex;

align-items:center;

justify-content:center;

background:

rgba(
255,
255,
255,
0.72
);

backdrop-filter:

blur(
24px
);

}

.product-number{

font-size:22px;

font-weight:800;

color:#0064FE;

margin-bottom:14px;

}

.product-page h1{

font-size:64px;

font-weight:900;

line-height:.92;

letter-spacing:-3px;

margin-bottom:18px;

}

.product-page p{

font-size:22px;

line-height:1.5;

color:#5C6470;

max-width:300px;

}

.detail-product-wrapper{

position:relative;

margin-top:50px;

height:460px;
max-height: auto;

display:flex;

align-items:center;

justify-content:center;

}


.detail-image{

position:relative;

z-index:2;

width:90%;

object-fit:contain;

filter:

drop-shadow(

0 25px 35px

rgba(
0,
100,
254,
0.18
)

);

}

.detail-dots{

display:flex;

justify-content:center;

gap:10px;

margin-top:20px;

}

.dot{

width:34px;

height:8px;

border-radius:999px;

background:#D5DBE7;

}

.dot.active{

background:#0064FE;

}

.detail-features{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap:14px;
  margin-top:30px;
  padding: 34px;
  border-radius: 36px;
  overflow: hidden;
}



.mini-feature{
  border-radius:24px;
  font-size:15px;
  font-weight:600;
  text-align:center;
  line-height:1.5;
}

.icon-feature{
  height: 60px;
  width: 60px;
  text-align: center;
  align-content: center;
  border-radius: 999px;
  border: none;
  font-size:26px;
  color: var(--primary);
  font-weight:600;
  margin: 0 auto 15px auto;
  box-shadow: 0 10px 25px rgba(0, 100, 254, 0.3);
}


.detail-button button {
  position: absolute;
  right: 15px;
  bottom: 15px;
 height: 50px;
 width: 50px;
 text-align: center;
 vertical-align: center;
 background: rgba(255, 255, 255, 1);
 border: none;
 border-radius: 999px;
 font-weight: 700;
 cursor: pointer;
 box-shadow: 0 10px 25px rgba(0, 100, 254, 0.3);
}

.invisible {
  display: none;
}

.detail-carousel{

display:flex;

height:100%;

position:relative;

z-index:2;

}

.detail-slide{

min-width:100%;

display:flex;

justify-content:center;

align-items:center;

transition:

500ms
cubic-bezier(
0.19,
1,
0.22,
1
);

}

.detail-slide img{
border-radius: 32px;
width:88%;
max-width: 500px;

object-fit:contain;

filter:

drop-shadow(

0 20px 40px

rgba(
0,
100,
254,
0.18

)

);

}

.detail-dots{

display:flex;

justify-content:center;

gap:10px;

margin-top:26px;

}

.dot{

width:24px;

height:6px;

border-radius:999px;

background:#D7DDE8;

transition:.3s;

cursor:pointer;

}

.dot.active{

background:#0064FE;

width:42px;

}


.app1 {
  background-image: url('../assets/images/1.jpg');
  background-size: cover;
}

.app2 {
  background-image: url('../assets/images/2.jpg');
  background-size: cover;
}

.app3 {
  background-image: url('../assets/images/3.jpg');
  background-size: cover;
}

.app4 {
  background-image: url('../assets/images/4.jpg');
  background-size: cover;
}