:root{--bg:#02070b;--panel:#071018;--text:#f6f8fb;--muted:#b9c4d1;--green:#25d84c;--blue:#0098ff;--line:rgba(255,255,255,.12);--radius:24px}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:radial-gradient(circle at 15% 0%,rgba(0,152,255,.18),transparent 28%),radial-gradient(circle at 80% 10%,rgba(37,216,76,.14),transparent 25%),var(--bg);color:var(--text);font-family:Inter,Segoe UI,Arial,sans-serif}a{color:inherit;text-decoration:none}.topbar{position:sticky;top:0;z-index:10;height:92px;display:flex;align-items:center;gap:34px;padding:0 5vw;background:rgba(2,7,11,.78);backdrop-filter:blur(18px);border-bottom:1px solid var(--line)}.brand img{width:285px;display:block;filter:drop-shadow(0 0 12px rgba(0,152,255,.16))}nav{display:flex;gap:26px;margin-left:auto}nav a{text-transform:uppercase;font-size:13px;color:#dbe5ee;letter-spacing:.04em}nav a:hover{color:var(--green)}.topCta{border:1px solid rgba(37,216,76,.65);border-radius:14px;padding:12px 18px;text-transform:uppercase;font-size:12px;color:#dfe8f2}.topCta strong{display:block;font-size:18px;color:var(--green)}.hero{position:relative;display:grid;grid-template-columns:1.05fr .8fr;gap:35px;align-items:center;min-height:720px;padding:78px 5vw 54px;overflow:hidden;background:linear-gradient(90deg,rgba(2,7,11,.98),rgba(2,7,11,.70)),url('assets/icone-teknali.png') right 7% center/520px no-repeat}.hero:after{content:"";position:absolute;inset:auto 0 0;height:180px;background:linear-gradient(180deg,transparent,rgba(2,7,11,.96));pointer-events:none}.hero>*{position:relative;z-index:1}.eyebrow{display:inline-flex;color:var(--green);text-transform:uppercase;letter-spacing:.16em;font-weight:850;font-size:12px}.hero h1{font-size:clamp(43px,5.4vw,76px);line-height:.98;margin:18px 0;text-transform:uppercase;letter-spacing:-.045em}.hero h1::after{content:"";display:block;width:220px;height:4px;margin-top:24px;border-radius:999px;background:linear-gradient(90deg,var(--green),var(--blue))}.hero p{max-width:720px;color:#d7dee8;font-size:20px;line-height:1.7}.actions,.social{display:flex;gap:16px;flex-wrap:wrap}.btn,.codeForm button{border-radius:12px;padding:16px 26px;font-weight:900;text-transform:uppercase;border:1px solid var(--line);cursor:pointer}.primary,.codeForm button{background:linear-gradient(90deg,#20bd40,var(--green));color:#021006}.secondary{background:rgba(255,255,255,.06);color:#edf5ff}.heroVisual{min-height:560px;display:flex;align-items:end;justify-content:center}.photoWrap{position:relative}.photoWrap:before{content:"";position:absolute;inset:12% -8% 0;border-radius:38px;background:linear-gradient(135deg,rgba(37,216,76,.28),rgba(0,152,255,.22));filter:blur(26px)}.photoWrap img{position:relative;width:min(480px,92vw);display:block;filter:drop-shadow(0 28px 45px rgba(0,0,0,.5))}.helloCard{position:absolute;right:5vw;bottom:78px;max-width:350px;padding:24px 26px;border-radius:22px;background:rgba(5,13,20,.82);border:1px solid rgba(37,216,76,.55);box-shadow:0 24px 70px rgba(0,0,0,.45);backdrop-filter:blur(12px)}.helloCard strong{display:block;font-size:22px;margin-bottom:10px}.helloCard span{color:#d7dee8;line-height:1.6}.trust,.stats,.searchBox,.about,.faq,.products,.marcas,.contact{margin:30px 5vw}.trust,.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:linear-gradient(90deg,rgba(37,216,76,.32),rgba(0,152,255,.28))}.trust div,.stats div{padding:24px;background:rgba(5,12,18,.92)}.trust strong,.stats strong{display:block;font-size:22px}.trust span,.stats span{color:var(--muted);line-height:1.55}.searchBox{display:grid;grid-template-columns:1fr 1.1fr;gap:22px;padding:36px;border:1px solid rgba(37,216,76,.45);border-radius:var(--radius);background:linear-gradient(135deg,rgba(37,216,76,.09),rgba(0,152,255,.07))}.searchBox h2,.sectionTitle h2,.about h2,.sectionHead h2,.contact h2{font-size:36px;margin:10px 0}.searchBox p,.contact p{color:var(--muted);line-height:1.7}.codeForm{display:flex;gap:12px;align-items:center}.codeForm input{width:100%;padding:18px 20px;border-radius:12px;border:1px solid var(--line);background:#03080d;color:white;font-size:16px}.searchBox small{grid-column:1/-1;color:var(--muted)}.sectionTitle{text-align:center;max-width:850px;margin:0 auto 28px}.sectionTitle p{color:var(--muted);font-size:18px;line-height:1.7}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.cards article,.values div,details,.contactCards a{padding:28px;border-radius:18px;border:1px solid var(--line);background:rgba(6,14,22,.78);transition:.25s}.cards article:hover,.contactCards a:hover{transform:translateY(-4px);border-color:rgba(37,216,76,.55)}.cards b,.values b,.contactCards b{font-size:20px;color:var(--green)}.cards p,.about p,details p,.contactCards span{color:#cfd8e3;line-height:1.7}.marcas{background:#f7fafc;color:#081018;border-radius:24px;padding:30px 0 34px;border:1px solid rgba(0,0,0,.08);box-shadow:0 20px 60px rgba(0,0,0,.25)}.sectionHead{display:flex;align-items:center;gap:18px;justify-content:center;text-transform:uppercase;text-align:center}.sectionHead span{height:1px;width:170px;background:linear-gradient(90deg,transparent,var(--green),var(--blue),transparent)}.marquee{overflow:hidden;padding:22px 0;background:#fff;border-top:1px solid rgba(0,0,0,.06);border-bottom:1px solid rgba(0,0,0,.06)}.track{display:flex;gap:44px;width:max-content;animation:marquee 32s linear infinite}.track img{height:48px;max-width:160px;object-fit:contain}@keyframes marquee{to{transform:translateX(-50%)}}.about{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:center;padding:34px;border-radius:var(--radius);background:rgba(4,10,16,.65);border:1px solid var(--line)}.icon{width:110px;float:left;margin:0 22px 10px 0}.values{display:grid;gap:14px}.faq{max-width:980px}.faq details{margin:12px 0}.faq summary{cursor:pointer;font-weight:850;font-size:18px}.contact{display:grid;grid-template-columns:.85fr 1.15fr;gap:28px;padding:34px;border-radius:var(--radius);border:1px solid rgba(0,152,255,.25);background:linear-gradient(135deg,rgba(0,152,255,.08),rgba(37,216,76,.06))}.contactCards{display:grid;grid-template-columns:1fr 1fr;gap:14px}.contactCards a span{display:block}footer{text-align:center;padding:54px 5vw;border-top:1px solid var(--line);background:#010407}footer img{width:270px;max-width:90%;filter:drop-shadow(0 0 12px rgba(0,152,255,.16))}footer p{color:var(--muted)}.social{justify-content:center}.social a{color:#dfe7ef;border:1px solid var(--line);padding:12px 18px;border-radius:999px}.floatWhats{position:fixed;right:22px;bottom:22px;z-index:20;background:var(--green);color:#041006;font-weight:950;padding:15px 20px;border-radius:999px;box-shadow:0 16px 40px rgba(37,216,76,.32)}.reveal{opacity:0;transform:translateY(22px);transition:.8s ease}.reveal.show{opacity:1;transform:none}@media(max-width:1050px){.topbar{flex-wrap:wrap}.brand img{width:230px}nav{order:3;width:100%;overflow:auto;margin:0}.hero,.searchBox,.about,.contact{grid-template-columns:1fr}.heroVisual{min-height:auto}.helloCard{position:relative;right:auto;bottom:auto;margin:-70px 18px 0}.trust,.stats,.grid{grid-template-columns:1fr 1fr}}@media(max-width:640px){.hero{padding-top:44px}.hero p{font-size:17px}.hero h1::after{width:160px}.trust,.stats,.grid,.contactCards{grid-template-columns:1fr}.codeForm{flex-direction:column}.codeForm button{width:100%}.sectionHead span{display:none}.topCta{width:100%;text-align:center}.photoWrap img{width:100%}}

/* ==========================================================
   AJUSTES MOBILE TEKNALI — preserva o layout do desktop
   Aplicado apenas para telas menores.
   ========================================================== */
@media (max-width: 1050px){
  html,body{overflow-x:hidden}
  .topbar{
    height:auto;
    min-height:74px;
    padding:12px 4vw 14px;
    gap:12px;
    align-items:center;
  }
  .brand{flex:1 1 auto;min-width:0}
  .brand img{width:210px;max-width:62vw}
  nav{
    order:3;
    width:100%;
    margin:2px 0 0;
    padding:6px 0 2px;
    gap:8px;
    overflow-x:auto;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }
  nav::-webkit-scrollbar{display:none}
  nav a{
    flex:0 0 auto;
    padding:10px 12px;
    border:1px solid rgba(255,255,255,.10);
    border-radius:999px;
    background:rgba(255,255,255,.045);
    font-size:11px;
    white-space:nowrap;
  }
  .topCta{
    width:auto;
    flex:0 0 auto;
    padding:9px 11px;
    border-radius:12px;
    font-size:10px;
    line-height:1.15;
    text-align:center;
  }
  .topCta strong{font-size:14px}

  .hero{
    grid-template-columns:1fr;
    min-height:auto;
    gap:18px;
    padding:46px 5vw 36px;
    text-align:center;
    background:
      linear-gradient(180deg,rgba(2,7,11,.98),rgba(2,7,11,.82)),
      url('assets/icone-teknali.png') center 88px/310px no-repeat;
  }
  .hero h1{
    max-width:820px;
    margin:14px auto 12px;
    font-size:clamp(36px,8.3vw,58px);
    line-height:1.02;
    letter-spacing:-.035em;
  }
  .hero h1::after{margin:20px auto 0}
  .hero p{
    max-width:760px;
    margin-left:auto;
    margin-right:auto;
    font-size:18px;
    line-height:1.62;
  }
  .actions{justify-content:center}
  .btn,.codeForm button{min-height:52px;display:inline-flex;align-items:center;justify-content:center}
  .heroVisual{
    min-height:0;
    align-items:center;
    padding-top:6px;
  }
  .photoWrap img{width:min(380px,78vw)}
  .photoWrap:before{inset:14% 2% 0;border-radius:32px;filter:blur(22px)}
  .helloCard{
    max-width:520px;
    margin:-46px auto 0;
    padding:20px 22px;
    text-align:left;
  }

  .trust,.stats,.searchBox,.about,.faq,.products,.marcas,.contact{margin-left:4vw;margin-right:4vw}
  .trust,.stats{grid-template-columns:1fr 1fr;border-radius:20px}
  .trust div,.stats div{padding:20px}
  .grid{grid-template-columns:1fr 1fr}
  .cards article,.values div,details,.contactCards a{padding:24px}
  .searchBox,.about,.contact{grid-template-columns:1fr;padding:28px;border-radius:22px}
  .contactCards{grid-template-columns:1fr 1fr}
}

@media (max-width: 640px){
  :root{--radius:20px}
  body{
    background:
      radial-gradient(circle at 20% 0%,rgba(0,152,255,.15),transparent 25%),
      radial-gradient(circle at 88% 8%,rgba(37,216,76,.10),transparent 23%),
      var(--bg);
  }
  .topbar{
    padding:10px 14px 12px;
    gap:9px;
  }
  .brand img{width:178px;max-width:58vw}
  .topCta{
    padding:8px 10px;
    font-size:0;
    min-width:106px;
  }
  .topCta::before{content:"WhatsApp";font-size:10px;text-transform:uppercase;letter-spacing:.03em;color:#dfe8f2;display:block}
  .topCta strong{font-size:13px;margin-top:2px}
  nav{gap:7px;padding-bottom:4px}
  nav a{font-size:10.5px;padding:9px 10px}

  .hero{
    padding:34px 18px 28px;
    gap:12px;
    background:
      linear-gradient(180deg,rgba(2,7,11,.98),rgba(2,7,11,.84)),
      url('assets/icone-teknali.png') center 78px/245px no-repeat;
  }
  .eyebrow{font-size:10.5px;letter-spacing:.13em;justify-content:center}
  .hero h1{
    font-size:34px;
    line-height:1.04;
    margin:13px auto 12px;
  }
  .hero h1::after{width:132px;height:3px;margin-top:17px}
  .hero p{
    font-size:16px;
    line-height:1.58;
    margin-top:0;
  }
  .actions{display:grid;grid-template-columns:1fr;gap:10px;margin-top:16px}
  .btn,.codeForm button{
    width:100%;
    min-height:52px;
    padding:14px 16px;
    font-size:13px;
    border-radius:14px;
  }
  .heroVisual{margin-top:4px}
  .photoWrap img{width:min(315px,82vw)}
  .helloCard{
    margin:-38px 4px 0;
    padding:18px 18px;
    border-radius:18px;
    text-align:center;
  }
  .helloCard strong{font-size:19px;margin-bottom:7px}
  .helloCard span{font-size:14.5px;line-height:1.5}

  .trust,.stats,.searchBox,.about,.faq,.products,.marcas,.contact{margin:22px 14px}
  .trust,.stats,.grid,.contactCards{grid-template-columns:1fr}
  .trust div,.stats div{padding:18px 18px}
  .trust strong,.stats strong{font-size:19px;margin-bottom:5px}
  .trust span,.stats span{font-size:14.5px}

  .searchBox,.about,.contact{padding:22px 18px}
  .searchBox h2,.sectionTitle h2,.about h2,.sectionHead h2,.contact h2{
    font-size:28px;
    line-height:1.12;
  }
  .sectionTitle{margin-bottom:18px}
  .sectionTitle p{font-size:15.5px;line-height:1.58}
  .codeForm{display:grid;grid-template-columns:1fr;gap:10px}
  .codeForm input{height:54px;padding:15px 16px;font-size:15px}
  .searchBox small{font-size:13px;line-height:1.45}

  .cards article,.values div,details,.contactCards a{
    padding:21px 18px;
    border-radius:17px;
  }
  .cards article:hover,.contactCards a:hover{transform:none}
  .cards b,.values b,.contactCards b{font-size:18px}
  .cards p,.about p,details p,.contactCards span{font-size:14.8px;line-height:1.58}

  .marcas{padding:22px 0 25px;border-radius:20px}
  .sectionHead{padding:0 12px}
  .sectionHead span{display:none}
  .marquee{padding:18px 0}
  .track{gap:30px;animation-duration:44s}
  .track img{height:42px;max-width:138px}

  .about{text-align:center}
  .icon{float:none;display:block;width:82px;margin:0 auto 14px}
  .values{text-align:left}
  .faq summary{font-size:16px;line-height:1.35}

  .contact{text-align:center}
  .contactCards{text-align:left}
  footer{padding:40px 18px 86px}
  footer img{width:220px}
  footer p{font-size:14px;line-height:1.5}
  .social{gap:9px}
  .social a{padding:10px 13px;font-size:13px}
  .floatWhats{
    left:14px;
    right:14px;
    bottom:14px;
    text-align:center;
    padding:14px 18px;
    border-radius:16px;
  }
}

@media (max-width: 380px){
  .brand img{width:160px}
  .topCta{min-width:98px;padding-left:8px;padding-right:8px}
  .hero h1{font-size:30px}
  .hero p{font-size:15.3px}
  .searchBox h2,.sectionTitle h2,.about h2,.sectionHead h2,.contact h2{font-size:25px}
}