#myl-hm{--bg:#050506;--tx:#F4F1EC;--mut:#B3ADA4;--line:#E9D8B6;--red:#FF2D2D;--red-glow:#FF5A5A;--ok:#3ddc84;
  --font:'Inter',ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color-scheme:dark;font-family:var(--font);color:var(--tx)}
#myl-hm{position:relative;overflow:hidden;isolation:isolate;min-height:min(780px,94vh);display:grid;grid-template-rows:1fr auto;background:var(--bg)}
#myl-hm .media{position:absolute;inset:0 0 0 28%;z-index:0;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 24%);mask-image:linear-gradient(90deg,transparent 0,#000 24%)}
#myl-hm .frame{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;opacity:0;transition:opacity .9s ease;will-change:opacity,transform}
#myl-hm .frame.on{opacity:1}
#myl-hm .frame.kb{animation:mhm-kb 3.4s ease-out forwards}
#myl-hm .frame.final.kb{animation:mhm-kbf 7s ease-out forwards}
@keyframes mhm-kb{from{transform:scale(1.045)}to{transform:scale(1)}}
@keyframes mhm-kbf{from{transform:scale(1.08)}to{transform:scale(1)}}
#myl-hm .flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none;z-index:1;mix-blend-mode:screen}
#myl-hm .flash.go{animation:mhm-flash 1s ease forwards}
#myl-hm .flash.cut{animation:mhm-cut .45s ease forwards}
@keyframes mhm-cut{10%{opacity:.18}100%{opacity:0}}
#myl-hm .frame.wipe{transition:none;opacity:1}
#myl-hm .frame.wipe.kb{animation:mhm-wipe .95s cubic-bezier(.7,0,.2,1) both,mhm-kb 3.4s ease-out forwards}
@keyframes mhm-wipe{from{clip-path:inset(0 0 0 100%)}to{clip-path:inset(0 0 0 0)}}
#myl-hm .grain{position:absolute;inset:-50%;z-index:2;pointer-events:none;opacity:.07;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");animation:mhm-grain .9s steps(6) infinite}
@keyframes mhm-grain{0%{transform:translate(0,0)}20%{transform:translate(-4%,3%)}40%{transform:translate(3%,-5%)}60%{transform:translate(-6%,-2%)}80%{transform:translate(5%,4%)}100%{transform:translate(0,0)}}
#myl-hm .vig{position:absolute;inset:0;z-index:2;pointer-events:none;background:radial-gradient(ellipse at 60% 50%,transparent 55%,rgba(3,3,4,.6) 100%)}
#myl-hm .cbar{position:absolute;left:0;right:0;height:3.2vh;background:#000;z-index:4;transform:scaleY(0);transition:transform .9s cubic-bezier(.7,0,.2,1)}
#myl-hm .cbar.t{top:0;transform-origin:top}
#myl-hm .cbar.b{bottom:0;transform-origin:bottom}
#myl-hm.in .cbar{transform:scaleY(1)}
#myl-hm .hud{position:absolute;z-index:5;top:calc(3.2vh + 14px);left:max(24px,env(safe-area-inset-left,0px));right:84px;display:flex;justify-content:space-between;gap:16px;font:500 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.14em;color:rgba(244,241,236,.7);pointer-events:none;text-transform:uppercase}
#myl-hm .rec{display:flex;align-items:center;gap:8px}
#myl-hm .rec i{width:7px;height:7px;border-radius:50%;background:#ff3b3b;box-shadow:0 0 10px #ff3b3b;animation:mhm-blink 1.2s steps(2) infinite}
#myl-hm .hud b{color:var(--line);font-weight:600}
@keyframes mhm-blink{50%{opacity:.15}}
@keyframes mhm-flash{12%{opacity:.55}100%{opacity:0}}
#myl-hm .shade{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(90deg,rgba(5,5,6,.94) 0%,rgba(5,5,6,.78) 28%,rgba(5,5,6,.25) 52%,rgba(5,5,6,0) 68%),
  linear-gradient(0deg,rgba(5,5,6,.95) 0%,rgba(5,5,6,.55) 14%,rgba(5,5,6,0) 30%),
  linear-gradient(180deg,rgba(5,5,6,.5) 0%,rgba(5,5,6,0) 16%)}
#myl-hm .wrap{position:relative;z-index:3;width:100%;max-width:1320px;margin:0 auto;align-self:center;padding-block:64px 24px;
  padding-left:max(24px,env(safe-area-inset-left,0px));padding-right:max(24px,env(safe-area-inset-right,0px))}
#myl-hm .copy{max-width:540px}
#myl-hm .h1{margin:0 0 22px;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--line);display:flex;align-items:center;gap:12px;line-height:1.4}
#myl-hm .h1::before{content:"";width:32px;height:1px;background:var(--line);opacity:.7;flex:none}
#myl-hm .texts{display:grid}
#myl-hm .st{grid-area:1/1;opacity:0;transition:opacity .35s ease;pointer-events:none}
#myl-hm .st.is-active{opacity:1;pointer-events:auto}
#myl-hm .st .kick,#myl-hm .st p{opacity:0;transform:translateY(14px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
#myl-hm .st.is-active .kick{opacity:1;transform:none;transition-delay:.05s}
#myl-hm .st.is-active p{opacity:1;transform:none;transition-delay:1s}
#myl-hm .w{display:inline-block;white-space:nowrap}
#myl-hm .c{display:inline-block;opacity:0;transform:translate3d(0,.9em,0);filter:blur(10px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1),filter .8s ease;transition-delay:calc(var(--k)*22ms + .12s);will-change:transform,opacity,filter}
#myl-hm .st.is-active .c{opacity:1;transform:none;filter:blur(0)}
#myl-hm .st:not(.is-active) .c{transition-delay:0s;transition-duration:.25s}
#myl-hm .st h2{transition:text-shadow .7s ease}
#myl-hm .st h2.rgb{text-shadow:-6px 0 rgba(255,40,80,.75),6px 0 rgba(40,220,255,.75)}
#myl-hm .st h2 em .w:last-child .c{color:#fff3d6;text-shadow:0 0 24px rgba(233,216,182,.35)}
#myl-hm .kick{display:inline-flex;align-items:center;gap:10px;font-size:13px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--red-glow)}
#myl-hm .kick i{width:8px;height:8px;border-radius:50%;background:var(--red);box-shadow:0 0 12px var(--red)}
#myl-hm .st h2{margin:14px 0 0;font-size:clamp(34px,4.4vw,60px);line-height:1.03;font-weight:800;letter-spacing:-.035em;text-wrap:balance;color:var(--tx)}
#myl-hm .st h2 em{font-style:normal;color:var(--line)}
#myl-hm .st p{margin:16px 0 0;font-size:17px;line-height:1.6;color:var(--mut);max-width:44ch}
#myl-hm .st p b{color:var(--tx);font-weight:600}
#myl-hm .status{margin-top:24px;display:grid;gap:10px}
#myl-hm .status .lab{display:flex;align-items:center;gap:10px;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--tx);min-height:18px}
#myl-hm .status .lab i{width:7px;height:7px;border-radius:50%;background:var(--line);animation:mhm-pulse 1.2s ease-in-out infinite}
#myl-hm .status.done .lab i{background:var(--ok);animation:none;box-shadow:0 0 10px var(--ok)}
#myl-hm .status.done .lab{color:var(--ok)}
@keyframes mhm-pulse{50%{opacity:.25}}
#myl-hm .steps{display:flex;gap:6px}
#myl-hm .steps span{height:3px;width:28px;border-radius:2px;background:rgba(244,241,236,.18);transition:background .4s}
#myl-hm .steps span.on{background:var(--line)}
#myl-hm .status.done .steps span{background:var(--ok)}
#myl-hm .actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
#myl-hm .btn{display:inline-flex;align-items:center;padding:16px 26px;border-radius:999px;font-size:15px;font-weight:600;text-decoration:none;color:var(--tx);border:1px solid rgba(244,241,236,.28);background:rgba(5,5,6,.35);backdrop-filter:blur(6px);transition:transform .2s,border-color .2s}
#myl-hm .btn:hover{transform:translateY(-2px);border-color:rgba(244,241,236,.6);color:var(--tx)}
#myl-hm .btn:focus-visible{outline:2px solid var(--line);outline-offset:3px}
#myl-hm .btn--pri{background:var(--red);border-color:var(--red);box-shadow:0 10px 40px -10px rgba(255,45,45,.7)}
#myl-hm .proof{margin:18px 0 0;font-size:13px;color:var(--mut)}
#myl-hm .proof b{color:#F5C451;letter-spacing:.1em}
#myl-hm .nav{position:relative;z-index:5;width:100%;max-width:1320px;margin:0 auto;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;
  padding-block:0 calc(3.2vh + 22px);padding-left:max(24px,env(safe-area-inset-left,0px));padding-right:max(24px,env(safe-area-inset-right,0px))}
#myl-hm .tab{all:unset;cursor:pointer;display:grid;gap:10px;color:var(--mut);font-size:13px;font-weight:600;letter-spacing:.04em}
#myl-hm .tab:focus-visible{outline:2px solid var(--line);outline-offset:6px;border-radius:4px}
#myl-hm .tab .bar{height:2px;background:rgba(244,241,236,.18);border-radius:2px;overflow:hidden}
#myl-hm .tab .bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--red),var(--red-glow))}
#myl-hm .tab.is-active{color:var(--tx)}
#myl-hm .ctrl{position:absolute;z-index:6;right:max(20px,env(safe-area-inset-right,0px));top:calc(3.2vh + 4px)}
#myl-hm .ctrl button{all:unset;cursor:pointer;width:40px;height:40px;border-radius:50%;border:1px solid rgba(244,241,236,.3);display:grid;place-items:center;color:var(--tx);background:rgba(5,5,6,.45)}
#myl-hm .ctrl button:focus-visible{outline:2px solid var(--line)}
@media (max-width:860px){#myl-hm{min-height:auto;grid-template-rows:auto auto auto}
#myl-hm .media{position:relative;inset:auto;aspect-ratio:16/10;grid-row:1;-webkit-mask-image:none;mask-image:none}
#myl-hm .hud{top:calc(3.2vh + 10px);font-size:9.5px;letter-spacing:.1em;right:64px}
#myl-hm .hud .sep,#myl-hm .hud #mhm-scname{display:none}
#myl-hm .cbar.b{display:none}
#myl-hm .cbar.t{height:2.4vh}
#myl-hm .grain,#myl-hm .vig{display:none}
#myl-hm .frame{object-position:50% 50%}
#myl-hm .shade{inset:auto 0 auto 0;top:0;height:0;background:none}
#myl-hm .media::after{content:"";position:absolute;inset:auto 0 0 0;height:30%;background:linear-gradient(0deg,var(--bg),transparent);z-index:2}
#myl-hm .wrap{grid-row:2;padding-block:18px 12px}
#myl-hm .nav{grid-row:3;display:flex;gap:14px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
#myl-hm .nav::-webkit-scrollbar{display:none}
#myl-hm .tab{flex:0 0 auto;min-width:96px;font-size:12px;letter-spacing:0}
#myl-hm .st p{font-size:15.5px}
}
@media (prefers-reduced-motion:reduce){#myl-hm .c{opacity:1!important;transform:none!important;filter:none!important;transition:none!important}
#myl-hm .grain{animation:none}
#myl-hm .frame.wipe.kb{animation:none}
#myl-hm .frame,#myl-hm .st{transition:none}
#myl-hm .frame.kb,#myl-hm .frame.final.kb{animation:none}
#myl-hm .flash.go{animation:none}
}
#myl-hm h1,#myl-hm h2,#myl-hm p{font-family:var(--font)}
#myl-hm img.frame{max-width:none;height:100%}
/* O tema forca tamanho de h1/h2 com !important no celular; aqui o hero mantem a propria escala. */
#myl-hm .h1{font-size:12px!important;line-height:1.4!important;letter-spacing:.14em!important}
#myl-hm .st h2{font-size:clamp(34px,4.4vw,60px)!important;line-height:1.03!important}
@media (max-width:860px){#myl-hm .h1{font-size:11px!important}#myl-hm .st h2{font-size:clamp(30px,8.6vw,40px)!important}}