/*
 * HotModel Home — Cinematic Candidate (issue #8767, F19/F20).
 * CSS de PRODUÇÃO que reproduz a composição canônica (motion-stage.v001):
 * palco por cena com aspect-ratio 682/N, caixas .hmc-el-bNNN posicionadas,
 * onda neon rosa, dashboard, device cluster, constelação e captions.
 * Escopo em .hm-cinematic para não vazar para o tema. Mobile empilha em grid.
 */
*{box-sizing:border-box}
html,body{margin:0;padding:0;max-width:100%;overflow-x:clip}
body.hm-cinematic{font-family:Arial,Helvetica,system-ui,-apple-system,'Segoe UI',sans-serif;background:var(--bg,#090508);color:#fff;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body.hm-cinematic #page,body.hm-cinematic #content,body.hm-cinematic #primary,body.hm-cinematic #main,body.hm-cinematic .site,body.hm-cinematic .site-content{all:unset!important;display:block!important}
body.hm-cinematic .site-header,body.hm-cinematic .site-footer,body.hm-cinematic #secondary{display:none!important}

.hmc-sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.hmc-skip{position:absolute;top:-48px;left:0;z-index:10000;background:var(--p,#e72b6c);color:#fff;padding:10px 18px;text-decoration:none;font-weight:700;border-radius:0 0 8px 0;transition:top .2s}
.hmc-skip:focus{top:0}

/* ===================== Palco e cena (base canônica) ===================== */
.hmc-stage{position:relative;isolation:isolate}
.hmc-stage>.hmc-scene{position:relative;overflow:hidden;isolation:isolate;width:100%;
  aspect-ratio:682/var(--h);min-height:235px;background:var(--bg);color:var(--fg)}
.hmc-scene::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 70% 42%,rgba(231,43,108,.10),transparent 55%);pointer-events:none}
.hmc-scene.light{--bg:#f0ece8;--fg:#1b1119}
.hmc-scene.dark{--bg:#090508;--fg:#faf7fa}

/* Primitivos posicionados (equivalentes às .el do canônico) */
.hmc-scene .hmc-heading,.hmc-scene .hmc-body,.hmc-scene [class*="hmc-el-"]{position:absolute;white-space:pre-line;isolation:isolate;z-index:2;line-height:1.3;color:inherit}
.hmc-scene .hmc-heading{font-family:Arial,Helvetica,sans-serif;font-weight:830;line-height:1.01;letter-spacing:-.05em;z-index:8;margin:0;font-size:clamp(21px,2.8vw,52px)}
.hmc-scene .hmc-body{opacity:.78;margin:0;font-size:clamp(10px,1.1vw,18px)}
.hmc-scene .hmc-heading .pink{color:#e72b6c}
/* Vetor/legenda dentro de um wrapper posicionado (ex.: hmc-el-bNNN > .hmc-vec):
   o img preenche o wrapper. Quando a classe hmc-vec/hmc-caption está no PRÓPRIO
   box posicionado (.hmc-el-bNNN), a geometria do box vale (canônico usa wrapper
   com geometria + img 100%); aqui o box é o img, então mantemos sua largura/
   altura em % e só aplicamos object-fit:contain para o SVG não esticar. */
.hmc-scene .hmc-vec:not([class*="hmc-el-"]),
.hmc-scene .hmc-caption:not([class*="hmc-el-"]){display:block;width:100%;height:100%;object-fit:contain}
.hmc-scene [class*="hmc-el-"].hmc-vec,
.hmc-scene [class*="hmc-el-"].hmc-caption{display:block;object-fit:contain}
.hmc-scene .hmc-photo,.hmc-scene .hmc-avatar{overflow:hidden}
.hmc-scene .hmc-photo figure,.hmc-scene .hmc-avatar figure{margin:0;width:100%;height:100%}
.hmc-scene .hmc-photo img,.hmc-scene .hmc-avatar img{display:block;width:100%;height:100%;object-fit:cover}
.hmc-scene .hmc-photo img{border-radius:10%}
.hmc-scene .hmc-avatar{border-radius:50%}
.hmc-scene .hmc-avatar img{border-radius:50%}

/* UI skeleton (cartões conceituais) */
.hmc-ui{border:1px solid rgba(231,43,108,.3);border-radius:8px;background:#19121a;box-shadow:0 8px 28px rgba(0,0,0,.19);z-index:4;overflow:hidden;padding:1.4%}
.hmc-scene.light .hmc-ui{background:#251522;color:#fff}
.hmc-ui .dots{display:flex;gap:4px;margin-bottom:7%}
.hmc-ui .dots b{width:5px;height:5px;border-radius:50%;background:#e72b6c}
.hmc-ui .line{background:#7d5868;height:6px;border-radius:10px;width:78%;margin-bottom:6%}
.hmc-ui .line.short{width:48%}
.hmc-ui .grid{display:flex;gap:5%;height:30%;margin-top:9%}
.hmc-ui .grid i{border:1px solid rgba(231,43,108,.3);background:#3a1e2e;flex:1;border-radius:4px}

/* Imagens cheias (dashboard, device cluster, floating-ui) */
.hmc-ui-img,.hmc-dash-img,.hmc-dev-img{display:block;width:100%;height:100%;object-fit:fill}
.hmc-dashboard{z-index:5;overflow:hidden;background:#0b1018;border-radius:10px}
.hmc-devices{z-index:5}
.hmc-devices .hmc-dev-img{object-fit:contain}

/* ============================ S01 — HERO ============================ */
.hmc-stage-s01{--h:285}
.hmc-stage-s01 .hmc-scene{--fg:#faf7fa;min-height:0;aspect-ratio:682/285;background:radial-gradient(ellipse at 68% 39%,#3b1425 0%,#13080f 47%,#070707 79%)}
.hmc-stage-s01 .hmc-scene::before{background:none}
.hmc-s01-bg{position:absolute;inset:0;z-index:0;background:radial-gradient(ellipse at 28% 20%,rgba(89,31,58,.15),transparent 52%)}
.hmc-s01-glow{position:absolute;inset:0;z-index:30;pointer-events:none;opacity:.6;filter:blur(10px);background:radial-gradient(ellipse at 69% 55%,rgba(231,43,108,.13),transparent 44%)}
.hmc-s01-header{position:absolute;z-index:75;left:8.8%;top:4.2%;width:84.5%;display:flex;align-items:center;gap:2%;font-size:clamp(9px,.89vw,13px)}
.hmc-wordmark{font-weight:900;font-size:clamp(12px,1.38vw,22px);letter-spacing:-.05em;text-decoration:none;color:#fff}
.hmc-wordmark .pink{color:#e72b6c}
.hmc-s01-nav{display:flex;gap:clamp(8px,1.7vw,25px);margin-left:2.7%;color:#ded6db}
.hmc-s01-nav a{color:inherit;text-decoration:none;opacity:.8;font-size:inherit}
.hmc-s01-account{margin-left:auto;display:flex;gap:8px}
.hmc-pill{padding:.6em .8em;line-height:1;border:1px solid #bcaeb4;border-radius:999px;white-space:nowrap;font-size:clamp(9px,.75vw,12px);text-decoration:none;color:#fff}
.hmc-pill.primary{background:#e72b6c;border-color:#e72b6c}
.hmc-s01-copy{position:absolute;z-index:75;left:8.65%;top:18.95%;width:33.58%}
.hmc-stage-s01 .hmc-heading{font-size:clamp(28px,5.08vw,79px);line-height:.86;letter-spacing:-.062em;font-weight:800}
.hmc-stage-s01 .hmc-heading span{display:block}
.hmc-s01-copy .hmc-desc{position:absolute;top:calc(100vw * 126 / 682);left:0;width:calc(100vw * 216 / 682);font-size:clamp(10px,1.04vw,17px);line-height:1.32;margin:0;max-width:100%;color:#f1e9eb}
.hmc-s01-copy .hmc-ctas{position:absolute;top:calc(100vw * 183 / 682);left:0;margin:0;display:flex;gap:clamp(8px,.5vw,12px);flex-wrap:nowrap;align-items:center}
.hmc-cta{border:1px solid #b8aeb2;border-radius:80px;padding:.78em 1.3em;font-size:clamp(9px,.77vw,13px);white-space:nowrap;opacity:.95;text-decoration:none;color:#fff}
.hmc-cta.primary{background:#e72b6c;border-color:#e72b6c}
.hmc-cta.secondary{border:0;border-radius:0;padding-left:0}
.hmc-cta.secondary::before{content:"▶";color:#e72b6c;border:1px solid #e72b6c;border-radius:50%;padding:.2em .45em;margin-right:.6em}
.hmc-s01-portrait{position:absolute;z-index:40;left:calc(100% * 198 / 682);top:0;width:calc(100% * 394 / 682);height:100%;pointer-events:none}
.hmc-portrait-source{display:block;width:100%;height:100%;object-fit:fill}
.hmc-stage-s01 .hmc-neon{position:absolute;z-index:48;left:0;top:0;width:100%;height:100%;object-fit:fill;pointer-events:none;filter:drop-shadow(0 0 2px #e72b6c44)}
.hmc-s01-labels{position:absolute;right:4.6%;top:43%;z-index:78;display:flex;flex-direction:column;gap:5px;text-transform:uppercase;letter-spacing:.1em;font-size:clamp(8px,.8vw,12px);color:rgba(255,255,255,.45)}

/* ============================ S02 ============================ */
.hmc-stage-s02{--h:199}
.hmc-el-b017{left:8.651%;top:9.548%;width:37.097%;font-family:Arial,sans-serif;font-size:clamp(22px,2.55vw,39px);line-height:1.06;font-weight:400;letter-spacing:-.035em;z-index:8}
.hmc-el-b017 span{display:block;white-space:nowrap}
.hmc-el-b017 .strongline{font-weight:850}
.hmc-el-b019,.hmc-el-b024{font-family:Arial,sans-serif;font-size:clamp(10px,.82vw,13px);font-weight:400;line-height:1.24;color:var(--fg)}
.hmc-el-b019{left:7.625%;top:39.698%;width:17.889%}
.hmc-el-b024{left:53.812%;top:39.196%;width:17.889%}
.hmc-el-b019 strong,.hmc-el-b024 strong{display:block;font-weight:800;font-size:clamp(13px,1.45vw,21px);line-height:1.03;margin-bottom:6px}
.hmc-el-b019 small,.hmc-el-b024 small{display:block;font-size:clamp(9px,.85vw,13px);font-weight:400}
.hmc-el-b020{left:7.478%;top:79.397%;width:3.812%;height:12.563%;z-index:6}
.hmc-el-b025{left:54.399%;top:76.884%;width:3.519%;height:12.060%;z-index:6}
.hmc-el-b021{left:23.021%;top:22.613%;width:19.795%;height:77.387%;z-index:3;border-radius:12%}
.hmc-el-b026{left:68.915%;top:18.090%;width:20.088%;height:81.407%;z-index:3;border-radius:12%}
.hmc-el-b021 img,.hmc-el-b026 img{border-radius:12%}
.hmc-el-b022{left:40.762%;top:46.231%;width:8.944%;height:43.719%;z-index:6;overflow:hidden;border-radius:6px}
.hmc-el-b027{left:85.924%;top:46.734%;width:11.144%;height:43.216%;z-index:6;overflow:hidden;border-radius:6px}

/* ============================ S03 ============================ */
.hmc-stage-s03{--h:180}
.hmc-el-b030{left:16.569%;top:0;width:64.809%;height:37.222%;z-index:1}
.hmc-el-b031{left:0;top:58.889%;width:59.091%;height:41.111%;z-index:1}
.hmc-el-b032{left:8.798%;top:23.333%;width:25.073%}
.hmc-el-b033{left:8.798%;top:50%;width:29.619%}
.hmc-el-b034{left:41.496%;top:12.778%;width:35.044%;height:75%}
.hmc-el-b035{left:41.789%;top:18.333%;width:11.144%;height:69.444%;z-index:3}
.hmc-el-b036{left:53.079%;top:15.556%;width:22.727%;height:18.333%}
.hmc-el-b037{left:54.399%;top:32.778%;width:21.114%;height:26.111%}
.hmc-el-b038{left:54.252%;top:62.222%;width:21.701%;height:25%}
.hmc-el-b039{left:82.405%;top:11.111%;width:3.959%;height:83.333%;z-index:6}
.hmc-el-b040{left:86.804%;top:14.444%;width:11.85%;list-style:none;margin:0;padding:0;font-size:clamp(8px,.8vw,12px);line-height:1.9;color:var(--fg);opacity:.85}

/* ============================ S04 ============================ */
.hmc-stage-s04{--h:163}
.hmc-el-b042{left:8.651%;top:14.724%;width:24.633%}
.hmc-el-b043{left:8.798%;top:42.945%;width:25.66%}
.hmc-el-b044{left:8.504%;top:73.62%;width:3.519%;height:15.337%;z-index:6}
.hmc-el-b045{left:42.375%;top:6.748%;width:12.17%;height:88.957%;z-index:3}
.hmc-el-b046{left:55.718%;top:6.748%;width:9.971%;height:41.104%;z-index:3}
.hmc-el-b047{left:66.862%;top:6.748%;width:9.238%;height:40.491%;z-index:3}
.hmc-el-b048{left:55.572%;top:52.761%;width:9.971%;height:41.718%;z-index:3}
.hmc-el-b049{left:66.569%;top:52.147%;width:10.264%;height:42.945%;z-index:3}
.hmc-el-b050{left:78.299%;top:47.239%;width:14.37%;height:46.626%;z-index:3}
.hmc-el-b051{left:78.006%;top:12.27%;width:17.889%;height:35.583%;z-index:6}

/* ============================ S05 (constelação) ============================ */
.hmc-stage-s05{--h:182}
.hmc-el-b053{left:0;top:.549%;width:24.194%;height:99.451%;z-index:3;border-radius:12%}
.hmc-el-b053 img{border-radius:12%}
.hmc-el-b054{left:25.953%;top:14.286%;width:26.54%}
.hmc-el-b055{left:26.1%;top:65.385%;width:24.633%}
.hmc-el-b056{left:53.666%;top:8.791%;width:43.109%;height:84.066%;z-index:1}
.hmc-el-b066{left:54.839%;top:7.143%;width:38.27%;height:77.473%;z-index:1}
.hmc-scene .hmc-el-b057,.hmc-scene .hmc-el-b058,.hmc-scene .hmc-el-b059,.hmc-scene .hmc-el-b060,.hmc-scene .hmc-el-b061,.hmc-scene .hmc-el-b062,.hmc-scene .hmc-el-b063,.hmc-scene .hmc-el-b064,.hmc-scene .hmc-el-b065{z-index:4}
.hmc-el-b057{left:67.009%;top:23.626%;width:11.144%;height:50.549%}
.hmc-el-b058{left:60.264%;top:8.791%;width:6.745%;height:25.275%}
.hmc-el-b059{left:79.765%;top:8.791%;width:6.745%;height:26.923%}
.hmc-el-b060{left:53.226%;top:30.769%;width:6.891%;height:25.275%}
.hmc-el-b061{left:78.299%;top:51.648%;width:7.771%;height:26.374%}
.hmc-el-b062{left:61.29%;top:49.451%;width:4.839%;height:18.681%}
.hmc-el-b063{left:58.211%;top:79.67%;width:4.545%;height:14.286%}
.hmc-el-b064{left:72.287%;top:82.418%;width:3.666%;height:14.835%}
.hmc-el-b065{left:85.484%;top:81.868%;width:5.425%;height:15.385%}

/* ============================ S06 (dashboard) ============================ */
.hmc-stage-s06{--h:212}
.hmc-el-b068{left:8.651%;top:12.264%;width:31.965%;font-family:Arial,sans-serif;line-height:1.02;letter-spacing:-.04em;font-size:clamp(22px,2.35vw,42px)}
.hmc-el-b068 .light-title{display:block;font-weight:420;font-size:.82em;letter-spacing:-.02em}
.hmc-el-b069{left:8.651%;top:34.906%;width:32.111%;font-size:clamp(10px,.92vw,14px);line-height:1.34}
.hmc-el-b070{left:12%;top:53%;width:29%;list-style:none;margin:0;padding:0;font-weight:450;font-size:clamp(10px,.95vw,15px);line-height:calc(100vw * 20 / 682)}
.hmc-el-b070 li{display:flex;align-items:center;gap:.6em}
.hmc-tool-ico{width:1.1em;height:1.1em;object-fit:contain;flex:0 0 auto}
.hmc-el-b076{left:44.868%;top:8.962%;width:50.44%;height:87.264%;z-index:5}

/* ============================ S07 (confiança) ============================ */
.hmc-stage-s07{--h:170}
.hmc-el-b083{left:8.651%;top:11.765%;width:30.205%;font-family:Arial,sans-serif;font-size:clamp(20px,2.45vw,38px);font-weight:850;line-height:1.02;letter-spacing:-.035em}
.hmc-el-b084{left:8.651%;top:40%;width:32.551%}
.hmc-el-b085{left:8.504%;top:64.706%;width:30.792%;list-style:none;margin:0;padding:0;font-size:clamp(9px,.9vw,14px);line-height:1.9;color:var(--fg);opacity:.9}
.hmc-el-b086{left:45.161%;top:.588%;width:32.111%;height:98.824%;z-index:3;border-radius:12%}
.hmc-el-b086 img{border-radius:12%}
.hmc-el-b087{left:80.352%;top:15.294%;width:15.543%;color:#e72b6c;font-size:clamp(14px,1.55vw,24px);line-height:1.14}
.hmc-el-b088{left:80.059%;top:60%;width:4.252%;height:17.647%;z-index:6}
.hmc-el-b089{left:8.651%;top:66.471%;width:2.493%;height:10%;z-index:6}
.hmc-el-b090{left:8.651%;top:81.176%;width:2.639%;height:11.176%;z-index:6}
.hmc-el-b091{left:25.66%;top:66.471%;width:2.639%;height:9.412%;z-index:6}
.hmc-el-b092{left:25.66%;top:81.765%;width:2.493%;height:9.412%;z-index:6}

/* ============================ S08 (devices) ============================ */
.hmc-stage-s08{--h:173}
.hmc-el-b094{left:8.651%;top:12.139%;width:26.1%;font-family:Arial,sans-serif;font-size:clamp(20px,2.45vw,38px);font-weight:850;line-height:1.02;letter-spacing:-.035em}
.hmc-el-b095{left:8.651%;top:51.445%;width:26.686%;font-size:clamp(10px,.92vw,14px);line-height:1.35}
.hmc-el-b097{left:33.578%;top:11.561%;width:43.11%;height:88.44%;z-index:5}
.hmc-el-b102{left:79.326%;top:22.543%;width:17.742%;list-style:none;margin:0;padding:0;font-size:clamp(9px,.81vw,12px);line-height:2.1;font-weight:400}
.hmc-el-b103{left:79.326%;top:21.965%;width:3.079%;height:67.052%;z-index:6}

/* ============================ S09 (pessoas reais + aviso) ============================ */
.hmc-stage-s09{--h:151}
.hmc-el-b105{left:8.798%;top:13.907%;width:33.138%}
.hmc-el-b106{left:8.651%;top:47.02%;width:30.059%}
.hmc-el-b107{left:8.651%;top:62%;width:33%;font-size:clamp(8px,.78vw,12px);line-height:1.45;opacity:.78;z-index:3}
.hmc-el-b108{left:45.455%;top:9.272%;width:13.783%;height:86.755%;z-index:3}
.hmc-el-b109{left:59.677%;top:9.934%;width:10.704%;height:39.073%;z-index:3}
.hmc-el-b110{left:70.968%;top:9.272%;width:11.29%;height:39.735%;z-index:3}
.hmc-el-b111{left:59.384%;top:50.993%;width:10.704%;height:45.695%;z-index:3}
.hmc-el-b112{left:70.968%;top:50.331%;width:9.971%;height:46.358%;z-index:3}
.hmc-el-b113{left:81.525%;top:50.993%;width:11.877%;height:44.371%;z-index:3}
.hmc-el-b114{left:82.698%;top:13.245%;width:12.463%;height:26.49%;z-index:6}

/* ============================ S10 (CTA final) ============================ */
.hmc-stage-s10{--h:168}
.hmc-el-b116{left:8.651%;top:11.31%;width:33.138%}
.hmc-el-b117{left:8.651%;top:40.476%;width:32.405%}
.hmc-el-b118{left:8.651%;top:67.262%;width:14.223%;z-index:7;display:grid;place-items:center;text-align:center}
.hmc-el-b119{left:24.34%;top:69.643%;width:14.663%;z-index:7;display:grid;place-items:center;text-align:center;border:0}
.hmc-el-b120{left:41.935%;top:.595%;width:45.455%;height:99.405%;z-index:3;border-radius:12%}
.hmc-el-b120 img{border-radius:12%}
.hmc-el-b121{left:43.988%;top:.595%;width:56.012%;height:98.81%;z-index:4}
.hmc-el-b123{left:89.443%;top:75.595%;width:4.545%;height:17.857%;z-index:6}

/* ============================ S11 (rodapé) ============================ */
.hmc-stage-s11{--h:165}
.hmc-footer .hmc-scene{color:#1b1119}
.hmc-el-b125{left:8.651%;top:15.152%;width:14%}
.hmc-footer-logo{font-family:Arial,sans-serif;font-size:clamp(17px,2.3vw,36px);font-weight:900;letter-spacing:-.06em;color:#181018}
.hmc-footer-logo span:first-child{color:#e72b6c}
.hmc-el-b126{left:8.798%;top:36.364%;width:16.862%;font-size:clamp(9px,.83vw,12px);line-height:1.4;opacity:.8}
.hmc-footer-col{display:flex;flex-direction:column;gap:.35em;font-size:clamp(9px,.82vw,13px);font-weight:400;line-height:1.55}
.hmc-footer-col strong{font-weight:750;margin-bottom:.3em}
.hmc-footer-col a{color:#2a1f28;text-decoration:none}
.hmc-el-b127{left:33.724%;top:16.364%;width:12%}
.hmc-el-b128{left:46.921%;top:16.364%;width:12%}
.hmc-el-b129{left:59.384%;top:16.364%;width:14.223%}
.hmc-el-b130{left:78.006%;top:16.364%;width:16%;font-size:clamp(10px,.93vw,14px);font-weight:750}
.hmc-el-b131{display:block;width:60%;height:auto;margin-top:.6em}
.hmc-social-ico{width:100%;height:auto;object-fit:contain}
.hmc-el-b134{left:8.798%;top:83.636%;width:40%;font-size:clamp(8px,.75vw,11px);opacity:.75}
.hmc-el-b135{left:74.78%;top:83.03%;width:18.915%;display:flex;gap:14px;font-size:clamp(8px,.75vw,11px)}
.hmc-el-b135 a{color:#5c4555;text-decoration:none}
.hmc-footer::after{content:"";position:absolute;left:0;top:73.333%;width:100%;height:26.667%;background:rgba(0,0,0,.04);z-index:0}

/* ============================ MOTION (issue #8767) ============================
 * Progressive enhancement: o motion SÓ liga quando o JS adiciona .hmc-motion
 * ao body (ver home-cinematic.js). Sem JS, com movimento reduzido, ou sem
 * IntersectionObserver, o conteúdo nasce VISÍVEL e estático (fail-safe a11y).
 * Entrada por cena/elemento (line-reveal/fade-up) ao entrar no viewport; onda
 * neon com stroke-draw/scroll; glows com fade suave; vetores (setas/play/check)
 * com stroke-draw. prefers-reduced-motion desativa tudo (regra no fim do CSS). */

/* Estado inicial (só sob .hmc-motion): elementos de cena começam escondidos. */
.hmc-motion .hmc-scene .hmc-heading,
.hmc-motion .hmc-scene .hmc-body,
.hmc-motion .hmc-scene .hmc-photo,
.hmc-motion .hmc-scene .hmc-avatar,
.hmc-motion .hmc-scene .hmc-ui,
.hmc-motion .hmc-scene .hmc-dashboard,
.hmc-motion .hmc-scene .hmc-devices,
.hmc-motion .hmc-scene .hmc-feature-list,
.hmc-motion .hmc-scene .hmc-tool-list,
.hmc-motion .hmc-scene .hmc-trust-list,
.hmc-motion .hmc-scene .hmc-cta,
.hmc-motion .hmc-scene .hmc-caption,
.hmc-motion .hmc-scene .hmc-ui-img,
.hmc-motion .hmc-scene .hmc-footer-col,
.hmc-motion .hmc-scene .hmc-footer-brand,
.hmc-motion .hmc-scene .hmc-footer-desc{
  opacity:0;transform:translateY(22px);
  transition:opacity .62s cubic-bezier(.22,.61,.36,1),transform .62s cubic-bezier(.22,.61,.36,1);
  will-change:opacity,transform}

/* line-reveal do heading: cada linha sobe e aparece com leve atraso. */
.hmc-motion .hmc-scene .hmc-heading span{opacity:0;transform:translateY(18px);
  transition:opacity .55s ease,transform .55s cubic-bezier(.22,.61,.36,1)}

/* Glows/grain: fade suave (opacity subtle no manifesto). */
.hmc-motion .hmc-s01-glow,
.hmc-motion .hmc-scene::before{opacity:0;transition:opacity 1.1s ease}

/* Vetores (setas/play/check/arcos): fade+desenho ao entrar. */
.hmc-motion .hmc-scene .hmc-vec{opacity:0;transition:opacity .7s ease .05s}

/* Onda neon (global-thread / s01-neon): stroke-draw + fade progressivo. */
.hmc-motion .hmc-neon{opacity:0;transform:translateY(10px) scale(1.01);
  transition:opacity 1.2s ease,transform 1.2s cubic-bezier(.22,.61,.36,1)}

/* --- Estado revelado: a cena entrou no viewport (.hmc-vis no palco) --------- */
.hmc-motion .hmc-vis .hmc-heading,
.hmc-motion .hmc-vis .hmc-body,
.hmc-motion .hmc-vis .hmc-photo,
.hmc-motion .hmc-vis .hmc-avatar,
.hmc-motion .hmc-vis .hmc-ui,
.hmc-motion .hmc-vis .hmc-dashboard,
.hmc-motion .hmc-vis .hmc-devices,
.hmc-motion .hmc-vis .hmc-feature-list,
.hmc-motion .hmc-vis .hmc-tool-list,
.hmc-motion .hmc-vis .hmc-trust-list,
.hmc-motion .hmc-vis .hmc-cta,
.hmc-motion .hmc-vis .hmc-caption,
.hmc-motion .hmc-vis .hmc-ui-img,
.hmc-motion .hmc-vis .hmc-footer-col,
.hmc-motion .hmc-vis .hmc-footer-brand,
.hmc-motion .hmc-vis .hmc-footer-desc{opacity:1;transform:none}
.hmc-motion .hmc-vis .hmc-heading span{opacity:1;transform:none}
.hmc-motion .hmc-vis .hmc-heading span:nth-child(2){transition-delay:.08s}
.hmc-motion .hmc-vis .hmc-heading span:nth-child(3){transition-delay:.16s}
.hmc-motion .hmc-vis .hmc-heading span:nth-child(4){transition-delay:.24s}
.hmc-motion .hmc-vis .hmc-s01-glow,
.hmc-motion .hmc-vis .hmc-scene::before{opacity:1}
.hmc-motion .hmc-vis .hmc-vec{opacity:1}
.hmc-motion .hmc-vis .hmc-neon{opacity:1;transform:none}

/* Stagger das grades de fotos/avatares (S04/S05/S09): entra em cascata. */
.hmc-motion .hmc-vis .hmc-photo,
.hmc-motion .hmc-vis .hmc-avatar{transition-delay:calc(var(--hmc-i,0) * .07s)}

/* Onda neon por scroll: o JS escreve --hmc-scroll (0..1) e desenha o traço. */
@keyframes hmc-neon-draw{from{stroke-dashoffset:var(--hmc-neon-len,1000)}to{stroke-dashoffset:0}}

/* ============================ MOBILE (<=740px) ============================ */
@media(max-width:740px){
  :root{--mobile-gutter:clamp(20px,6.4vw,32px)}
  .hmc-stage>.hmc-scene{aspect-ratio:auto!important;min-height:0!important;
    display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-rows:min-content;
    align-content:start;column-gap:10px;row-gap:0;padding:44px var(--mobile-gutter) 56px}
  .hmc-scene::before{opacity:.48}
  .hmc-scene .hmc-heading,.hmc-scene .hmc-body,.hmc-scene [class*="hmc-el-"]{
    position:relative!important;left:auto!important;top:auto!important;right:auto!important;bottom:auto!important;
    width:100%!important;height:auto!important;grid-column:1/-1;align-self:stretch;z-index:2;margin:0}
  .hmc-scene .hmc-heading{font-size:clamp(30px,8.9vw,44px)!important;line-height:1.05!important;letter-spacing:-.04em!important;font-weight:850;margin:0 0 14px!important;text-wrap:balance}
  .hmc-scene .hmc-body{font-size:clamp(14px,3.9vw,16px)!important;line-height:1.55;max-width:37ch;margin:0 0 22px!important;opacity:.83}
  .hmc-scene .hmc-photo,.hmc-scene .hmc-avatar{width:100%!important;height:auto!important;display:block;overflow:hidden;border-radius:15px}
  .hmc-scene .hmc-photo img,.hmc-scene .hmc-avatar img{border-radius:inherit;height:100%}
  .hmc-scene .hmc-ui,.hmc-scene .hmc-dashboard,.hmc-scene .hmc-devices{width:100%!important;height:auto!important;display:block;padding:0;border-radius:14px;overflow:hidden}
  .hmc-scene .hmc-vec{display:block;width:100%!important;height:auto!important}

  /* S01 */
  .hmc-stage-s01 .hmc-scene{display:block;min-height:0;padding:0 var(--mobile-gutter) 36px;background:radial-gradient(ellipse at 69% 70%,#351323 0,#10090e 49%,#090508 82%)}
  .hmc-s01-header{position:relative;left:auto;top:auto;width:100%;height:58px;display:flex;align-items:center;z-index:30}
  .hmc-wordmark{font-size:22px;letter-spacing:-.06em}
  .hmc-s01-nav{display:none}
  .hmc-s01-account{margin-left:auto;gap:7px}
  .hmc-pill{font-size:10px;padding:8px 10px}
  .hmc-s01-copy{position:relative;left:auto;top:auto;width:100%;padding-top:40px;z-index:35}
  .hmc-stage-s01 .hmc-heading{font-size:clamp(44px,12vw,65px)!important;line-height:.91;letter-spacing:-.055em;max-width:9ch}
  .hmc-s01-copy .hmc-desc{position:relative;top:auto;left:auto;width:100%;max-width:30ch;margin:23px 0 0;font-size:15px;line-height:1.54}
  .hmc-s01-copy .hmc-ctas{position:relative;top:auto;left:auto;width:100%;display:flex;gap:15px;flex-wrap:wrap;margin:24px 0 0}
  .hmc-cta{font-size:12px;min-height:44px;display:inline-flex;align-items:center}
  .hmc-s01-portrait{position:relative!important;left:auto!important;top:auto!important;width:100%!important;height:300px!important;margin-top:26px;border-radius:16px;overflow:hidden}
  .hmc-portrait-source{object-fit:cover;object-position:center 18%}
  .hmc-stage-s01 .hmc-neon{display:none}
  .hmc-s01-labels{display:none}

  /* S02 */
  .hmc-stage-s02 .hmc-scene{row-gap:0;padding-top:40px}
  .hmc-el-b017{font-size:clamp(30px,8.5vw,41px)!important;margin-bottom:24px!important}
  .hmc-el-b017 span{white-space:normal!important}
  .hmc-el-b019,.hmc-el-b024{max-width:34ch;font-size:13px!important;line-height:1.4!important;margin:0 0 14px!important}
  .hmc-el-b019 strong,.hmc-el-b024 strong{font-size:23px!important;margin-bottom:7px}
  .hmc-el-b021,.hmc-el-b026{grid-column:1/9!important;height:200px!important;border-radius:14px}
  .hmc-el-b022,.hmc-el-b027{grid-column:9/-1!important;height:120px!important;align-self:center}
  .hmc-el-b020,.hmc-el-b025{display:none!important}

  /* S03 */
  .hmc-el-b030,.hmc-el-b031,.hmc-el-b036,.hmc-el-b037,.hmc-el-b038,.hmc-el-b039{display:none!important}
  .hmc-el-b035{grid-column:1/9!important;height:210px!important;border-radius:14px}
  .hmc-el-b034{grid-column:8/-1!important;height:150px!important;align-self:center;z-index:9!important}
  .hmc-el-b040{display:flex!important;flex-wrap:wrap;gap:8px 18px;margin-top:16px!important}
  .hmc-el-b040 li{font-size:14px}

  /* S04 e S09 (grades de 6) */
  .hmc-stage-s04 .hmc-scene,.hmc-stage-s09 .hmc-scene{grid-template-columns:repeat(6,minmax(0,1fr));column-gap:9px;row-gap:9px}
  .hmc-el-b045,.hmc-el-b046,.hmc-el-b047,.hmc-el-b048,.hmc-el-b049,.hmc-el-b050,
  .hmc-el-b108,.hmc-el-b109,.hmc-el-b110,.hmc-el-b111,.hmc-el-b112,.hmc-el-b113{grid-column:span 2!important;aspect-ratio:3/4;height:auto!important;border-radius:12px;overflow:hidden}
  .hmc-el-b044,.hmc-el-b051,.hmc-el-b114{display:none!important}

  /* S05 */
  .hmc-stage-s05 .hmc-scene{column-gap:7px;row-gap:8px}
  .hmc-el-b056,.hmc-el-b066{display:none!important}
  .hmc-el-b053{grid-column:1/-1!important;aspect-ratio:1.85;max-height:205px;border-radius:17px}
  .hmc-scene .hmc-avatar{grid-column:span 4!important;aspect-ratio:1!important;max-width:101px;justify-self:center;border-radius:50%}

  /* S06 */
  .hmc-el-b070{display:block!important;font-size:14px!important;line-height:2.1!important;margin:0 0 22px!important}
  .hmc-el-b070 li{margin:8px 0}
  .hmc-el-b070::before{content:"";display:block;width:42px;height:3px;background:#e72b6c;margin-bottom:13px}
  .hmc-el-b076{aspect-ratio:344/185;border-radius:14px}

  /* S07 */
  .hmc-el-b085{display:block!important;line-height:2.2!important;font-size:13px!important;padding-left:14px;border-left:3px solid #e72b6c;margin-bottom:24px!important}
  .hmc-el-b086{width:83%!important;height:230px!important;justify-self:center;border-radius:18px}
  .hmc-el-b087{grid-column:1/-1!important;font-size:24px!important;text-align:center;margin-top:24px!important}
  .hmc-el-b088,.hmc-el-b089,.hmc-el-b090,.hmc-el-b091,.hmc-el-b092{display:none!important}

  /* S08 */
  .hmc-el-b097{aspect-ratio:294/153;max-height:280px;border-radius:17px}
  .hmc-el-b102{display:block!important;font-size:13px!important;line-height:2!important;margin:23px 0 0!important}
  .hmc-el-b103{display:none!important}

  /* S09 aviso */
  .hmc-el-b107{display:block!important;font-size:13px!important;line-height:1.5!important;margin:0 0 18px!important;opacity:.85}

  /* S10 */
  .hmc-el-b120{width:100%!important;height:265px!important;border-radius:19px;margin-bottom:22px!important}
  .hmc-el-b118,.hmc-el-b119{grid-column:1/-1!important;margin-bottom:10px!important;min-height:44px}
  .hmc-el-b119{color:#e72b6c!important;background:transparent!important;border:1px solid #e72b6c!important}
  .hmc-el-b121,.hmc-el-b123{display:none!important}

  /* S11 */
  .hmc-stage-s11 .hmc-scene{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:18px;padding-top:42px;padding-bottom:36px}
  .hmc-footer::after{display:none}
  .hmc-el-b125{margin-bottom:9px!important}
  .hmc-el-b126{max-width:35ch;margin-bottom:30px!important;font-size:14px!important;line-height:1.55!important}
  .hmc-el-b127{grid-column:1/2!important}
  .hmc-el-b128{grid-column:2/3!important}
  .hmc-el-b129,.hmc-el-b130{grid-column:1/-1!important}
  .hmc-footer-col{font-size:13px!important;margin-bottom:18px!important}
  .hmc-el-b131{width:155px!important}
  .hmc-el-b134,.hmc-el-b135{grid-column:1/-1!important;font-size:12px!important;margin:8px 0!important}
}

@media(max-width:359px){
  .hmc-stage>.hmc-scene{padding-left:18px;padding-right:18px;column-gap:8px}
  .hmc-scene .hmc-heading{font-size:30px!important}
  .hmc-scene .hmc-body{font-size:14px!important}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  /* Fail-safe a11y: mesmo que .hmc-motion esteja no body, nada fica escondido
     nem deslocado — tudo nasce visível e estático. */
  .hmc-motion .hmc-scene .hmc-heading,
  .hmc-motion .hmc-scene .hmc-heading span,
  .hmc-motion .hmc-scene .hmc-body,
  .hmc-motion .hmc-scene .hmc-photo,
  .hmc-motion .hmc-scene .hmc-avatar,
  .hmc-motion .hmc-scene .hmc-ui,
  .hmc-motion .hmc-scene .hmc-dashboard,
  .hmc-motion .hmc-scene .hmc-devices,
  .hmc-motion .hmc-scene .hmc-feature-list,
  .hmc-motion .hmc-scene .hmc-tool-list,
  .hmc-motion .hmc-scene .hmc-trust-list,
  .hmc-motion .hmc-scene .hmc-cta,
  .hmc-motion .hmc-scene .hmc-caption,
  .hmc-motion .hmc-scene .hmc-ui-img,
  .hmc-motion .hmc-scene .hmc-vec,
  .hmc-motion .hmc-neon,
  .hmc-motion .hmc-s01-glow,
  .hmc-motion .hmc-scene .hmc-footer-col,
  .hmc-motion .hmc-scene .hmc-footer-brand,
  .hmc-motion .hmc-scene .hmc-footer-desc{opacity:1!important;transform:none!important}
}
