/* Movimento e acabamento — camada separada do style.css original */
.header{transition:box-shadow .3s}
.header.is-scrolled{box-shadow:0 6px 28px rgba(0,0,0,.22)}

.scroll-progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:40;background:linear-gradient(90deg,#bd7906,#ffdc64,#f1b928);box-shadow:0 0 12px rgba(241,185,40,.6)}

/* Entrada da hero */
.hero-copy>*{opacity:0;transform:translateY(22px);animation:bsRise .8s cubic-bezier(.2,.7,.2,1) forwards}
.hero-copy>*:nth-child(1){animation-delay:.05s}
.hero-copy>*:nth-child(2){animation-delay:.18s}
.hero-copy>*:nth-child(3){animation-delay:.32s}
.hero-copy>*:nth-child(4){animation-delay:.46s}
.hero-art img{animation:bsFloat 7s ease-in-out infinite}
.hero-channels{opacity:0;animation:bsFadeLeft .9s .55s cubic-bezier(.2,.7,.2,1) forwards}
.orbit-one{animation:bsSpin 38s linear infinite}
.orbit-two{animation:bsSpin 26s linear infinite reverse}
.orbit::after{content:"";position:absolute;top:-4px;left:50%;width:8px;height:8px;border-radius:50%;background:#ffd24b;box-shadow:0 0 14px 4px rgba(255,210,75,.55)}
.art-point{animation:bsPing 2.6s ease-out infinite}
.art-point-2{animation-delay:1.3s}
@keyframes bsPing{0%{box-shadow:0 0 0 0 rgba(255,210,75,.65)}80%,100%{box-shadow:0 0 0 18px rgba(255,210,75,0)}}

/* Linha de varredura sobre a hero (radar) */
.hero-lines::after{content:"";position:absolute;inset:-20% -10%;background:linear-gradient(100deg,transparent 46%,rgba(255,210,75,.07) 50%,transparent 54%);animation:bsSweep 9s linear infinite}
@keyframes bsSweep{from{transform:translateX(-35%)}to{transform:translateX(35%)}}

/* Pontos de veículos se movendo no fundo */
.hero-tracks{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.hero-tracks span{position:absolute;width:6px;height:6px;border-radius:50%;background:#ffd24b;box-shadow:0 0 10px 3px rgba(255,210,75,.45);opacity:.0;offset-rotate:0deg;animation:bsTrack 14s linear infinite}
.hero-tracks span:nth-child(1){offset-path:path("M -40 380 C 220 300, 420 420, 760 300 S 1240 200, 1600 260");animation-delay:0s}
.hero-tracks span:nth-child(2){offset-path:path("M -40 120 C 300 180, 520 60, 900 140 S 1300 260, 1600 160");animation-delay:4.5s;animation-duration:17s}
.hero-tracks span:nth-child(3){offset-path:path("M -40 470 C 260 520, 700 380, 1000 460 S 1400 520, 1600 430");animation-delay:9s;animation-duration:19s}
@keyframes bsTrack{0%{offset-distance:0%;opacity:0}6%{opacity:.9}94%{opacity:.9}100%{offset-distance:100%;opacity:0}}

/* Revelar ao rolar */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.reveal.from-left{transform:translateX(-36px)}
.reveal.from-right{transform:translateX(36px)}
.reveal.zoom{transform:scale(.94)}
.reveal.is-in{opacity:1;transform:none}

/* Cartões de recurso */
.resource{transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s,border-color .35s,background .35s;will-change:transform}
.resource:hover{transform:translateY(-8px);box-shadow:0 18px 38px rgba(0,0,0,.35),0 0 0 1px rgba(241,185,40,.55) inset}
.resource .icon{transition:transform .45s cubic-bezier(.2,.7,.2,1),color .3s}
.resource:hover .icon{transform:scale(1.15) rotate(-6deg);color:#ffdc64}

/* Painel da plataforma */
.dashboard-art img{transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.dashboard-art:hover img{transform:scale(1.03)}
.dashboard-halo{animation:bsGlow 4.5s ease-in-out infinite}
@keyframes bsGlow{0%,100%{opacity:.75}50%{opacity:1}}
.feature-checks li{transition:transform .3s}
.feature-checks li:hover{transform:translateX(6px)}

/* Botões dourados com brilho */
.btn-gold{position:relative;overflow:hidden}
.btn-gold::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);animation:bsShine 4.2s ease-in-out infinite}
@keyframes bsShine{0%,70%{left:-60%}100%{left:130%}}
.btn .icon-arrow{transition:transform .25s}
.btn:hover .icon-arrow,.inline-cta:hover .icon{transform:translateX(5px)}
.inline-cta .icon{transition:transform .25s}

/* Estatísticas */
.stat .icon{transition:transform .4s}
.stat:hover .icon{transform:translateY(-4px) scale(1.08)}

/* Imagem da franquia */
.franchise-image img{transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.franchise-image:hover img{transform:scale(1.06)}

@keyframes bsRise{to{opacity:1;transform:none}}
@keyframes bsFadeLeft{from{opacity:0;transform:translateX(30px)}to{opacity:1;transform:none}}
@keyframes bsFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes bsSpin{to{transform:rotate(360deg)}}

@media(max-width:650px){.hero-tracks{display:none}}
@media(prefers-reduced-motion:reduce){.reveal,.hero-copy>*,.hero-channels{opacity:1!important;transform:none!important}.hero-tracks,.scroll-progress{display:none}}

/* ===== Cartões IoT / IA e canais — acabamento elegante ===== */
.hero-channels{perspective:900px}
.tech-duo{gap:12px}
.tech-chip{position:relative;border:0;border-radius:18px;isolation:isolate;overflow:hidden;
  background:linear-gradient(155deg,rgba(28,44,60,.78),rgba(8,16,26,.86));
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:0 14px 34px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.08);
  transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s}
.tech-chip::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.2px;z-index:-1;
  background:conic-gradient(from var(--ang,0deg),rgba(255,214,90,.95),rgba(255,214,90,.08) 30%,rgba(255,214,90,.75) 55%,rgba(255,214,90,.05) 80%,rgba(255,214,90,.95));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  animation:bsBorder 6s linear infinite}
.tech-chip.ai::before{background:conic-gradient(from var(--ang,0deg),rgba(104,197,255,.95),rgba(104,197,255,.08) 30%,rgba(104,197,255,.75) 55%,rgba(104,197,255,.05) 80%,rgba(104,197,255,.95))}
.tech-chip::after{content:"";position:absolute;inset:-40% -40% auto auto;width:120%;height:120%;z-index:-1;
  background:radial-gradient(circle,rgba(255,210,75,.22),transparent 60%);opacity:.7;transition:opacity .45s}
.tech-chip.ai::after{background:radial-gradient(circle,rgba(70,170,255,.25),transparent 60%)}
.tech-chip .big-tech{background:linear-gradient(180deg,#fff 30%,#ffd968);-webkit-background-clip:text;background-clip:text;color:transparent;letter-spacing:-1px}
.tech-chip span:not(.big-tech),.tech-chip small{color:#cfd8e2;letter-spacing:.2px}
.tech-chip.ai .icon{filter:drop-shadow(0 0 8px rgba(104,197,255,.6))}
.tech-chip:hover{transform:translateY(-6px) rotateX(6deg);box-shadow:0 22px 44px rgba(0,0,0,.55),0 0 28px rgba(255,200,60,.18)}
.tech-chip.ai:hover{box-shadow:0 22px 44px rgba(0,0,0,.55),0 0 28px rgba(60,160,255,.25)}
.tech-chip:hover::after{opacity:1}
@property --ang{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes bsBorder{to{--ang:360deg}}

.channel-list{gap:10px}
.channel-list li{position:relative;border:1px solid rgba(255,255,255,.08);border-radius:14px;overflow:hidden;
  background:linear-gradient(120deg,rgba(22,36,52,.72),rgba(6,14,24,.78));
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:0 8px 22px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.06);
  padding:8px 14px 8px 8px;gap:12px;font-weight:600;letter-spacing:.1px;
  transition:transform .35s cubic-bezier(.2,.7,.2,1),border-color .35s,background .35s,box-shadow .35s}
.channel-list li::before{content:"";position:absolute;left:0;top:18%;bottom:18%;width:3px;border-radius:0 3px 3px 0;
  background:linear-gradient(180deg,#ffe07a,#e3a514);opacity:0;transition:opacity .35s}
.channel-list li::after{content:"";position:absolute;right:14px;top:50%;width:7px;height:7px;margin-top:-4px;
  border-top:2px solid rgba(255,214,90,.9);border-right:2px solid rgba(255,214,90,.9);transform:rotate(45deg) translateX(-6px);opacity:0;transition:all .35s}
.channel-list li:hover{transform:translateX(-6px);border-color:rgba(255,214,90,.45);
  background:linear-gradient(120deg,rgba(36,52,70,.85),rgba(10,20,32,.88));box-shadow:0 12px 28px rgba(0,0,0,.45),0 0 18px rgba(255,200,60,.12)}
.channel-list li:hover::before{opacity:1}
.channel-list li:hover::after{opacity:1;transform:rotate(45deg) translateX(0)}
.channel-list li>.icon{width:34px;height:34px;padding:8px;border-radius:50%;color:#ffd24b;
  background:radial-gradient(circle at 30% 30%,rgba(255,214,90,.28),rgba(255,214,90,.08));
  box-shadow:inset 0 0 0 1px rgba(255,214,90,.35);transition:transform .35s}
.channel-icon.whatsapp{width:34px;height:34px;border:0;font-size:14px;font-weight:800;
  background:radial-gradient(circle at 30% 30%,#2fd36f,#0f9a46);box-shadow:0 0 0 1px rgba(255,255,255,.18) inset,0 0 14px rgba(18,174,82,.45)}
.channel-list li:hover>.icon,.channel-list li:hover .channel-icon{transform:scale(1.08) rotate(-6deg)}
.channel-list li{opacity:0;animation:bsFadeLeft .7s cubic-bezier(.2,.7,.2,1) forwards}
.channel-list li:nth-child(1){animation-delay:.75s}.channel-list li:nth-child(2){animation-delay:.85s}
.channel-list li:nth-child(3){animation-delay:.95s}.channel-list li:nth-child(4){animation-delay:1.05s}
.tech-chip{opacity:0;animation:bsRise .8s cubic-bezier(.2,.7,.2,1) forwards}
.tech-chip.iot{animation-delay:.55s}.tech-chip.ai{animation-delay:.65s}
@media(max-width:980px){.channel-list li{padding:6px 10px 6px 6px}.channel-list li>.icon,.channel-icon.whatsapp{width:28px;height:28px;padding:6px}.channel-list li::after{display:none}}
@media(prefers-reduced-motion:reduce){.channel-list li,.tech-chip{opacity:1;animation:none}.tech-chip::before{animation:none}}

/* ===== Botao "Acessar Plataforma" do topo — cartao ===== */
.btn-access{position:relative;isolation:isolate;border:0;border-radius:12px;padding:8px 18px 8px 8px;min-height:48px;gap:10px;
  color:#fff;font-weight:700;letter-spacing:.2px;
  background:linear-gradient(135deg,#141c26,#0a0f15);
  box-shadow:0 8px 20px rgba(9,14,22,.22),inset 0 1px 0 rgba(255,255,255,.07);
  transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s}
.btn-access::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.2px;z-index:-1;
  background:linear-gradient(135deg,#ffe07a,#d9980c 45%,rgba(255,214,90,.25) 70%,#ffd24b);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.btn-access .icon{width:32px;height:32px;padding:8px;border-radius:9px;color:#0a0f15;
  background:linear-gradient(160deg,#ffe05b,#f2b31d 60%,#d38e0a);box-shadow:0 4px 12px rgba(241,185,40,.35)}
.btn-access span{background:linear-gradient(180deg,#fff,#ffe9a6);-webkit-background-clip:text;background-clip:text;color:transparent}
.btn-access:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(9,14,22,.3),0 0 22px rgba(241,185,40,.28)}
.btn-access:hover .icon{transform:rotate(-8deg)}
.btn-access .icon{transition:transform .3s}
@media(max-width:650px){.btn-access{padding:5px;min-height:40px;border-radius:10px}.btn-access .icon{width:30px;height:30px;padding:7px}}

/* ===== Logo do rodape em cartao ===== */
.footer-logo-card{display:inline-flex;align-items:center;padding:12px 18px;border-radius:14px;margin-bottom:14px;
  background:linear-gradient(160deg,#ffffff,#eef1f4);
  box-shadow:0 10px 26px rgba(0,0,0,.35),0 0 0 1px rgba(255,214,90,.35);
  transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s}
.footer-logo-card img{width:220px;height:auto}
.footer-logo-card:hover{transform:translateY(-3px);box-shadow:0 14px 32px rgba(0,0,0,.45),0 0 0 1px rgba(255,214,90,.6),0 0 22px rgba(241,185,40,.2)}

/* ===== Contato e assinatura CDX no rodape ===== */
.footer-contact{display:flex!important;align-items:center;gap:10px;margin-top:10px;padding:8px 12px 8px 8px;border-radius:12px;width:max-content;max-width:100%;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);transition:background .3s,border-color .3s,transform .3s}
.footer-contact:hover{background:rgba(255,214,90,.08);border-color:rgba(255,214,90,.4);transform:translateX(4px)}
.footer-contact .icon{width:28px;height:28px;padding:6px;border-radius:50%;color:#ffd24b;background:rgba(255,214,90,.12)}
.footer-contact .channel-icon.whatsapp{width:28px;height:28px;font-size:12px}
.dev-by{color:#9aa6b4}
.dev-by a{color:#ffd24b}
.dev-by a:hover{text-decoration:underline}
.login-foot a{color:#b07a06;font-weight:700}
@media(max-width:650px){.footer-contact{width:100%}}

/* ===== Celular: botao "Acessar Plataforma" com texto visivel (nao so o cadeado) ===== */
@media(max-width:650px){
  .brand img{width:150px}
  .header-inner{gap:10px}
  .btn-access{font-size:11px!important;line-height:1.15;min-height:42px;padding:5px 10px 5px 5px;gap:7px;border-radius:11px;margin-left:auto}
  .btn-access .icon{width:30px;height:30px;padding:7px;border-radius:8px}
  .btn-access span{display:block;max-width:64px;white-space:normal;text-align:left;font-weight:800}
}
@media(max-width:360px){.brand img{width:128px}.btn-access span{max-width:58px;font-size:10.5px}}
