/* Seção 01 — Posicionamento: anel de cinco partes com pontas arredondadas que se sobrepõem */
.ecl{padding-bottom:120px;overflow:hidden}
.ecl .section-kicker{border:0;margin-bottom:40px}
.ecl-stage{position:relative;display:flex;flex-direction:column;align-items:center}

.ecl-head{position:relative;z-index:3;text-align:center;max-width:900px}
.ecl-title{margin:0 0 26px;font-size:clamp(32px,3.6vw,56px);line-height:1.08;font-weight:400;letter-spacing:-.035em}
.ecl-title em{font-family:"Instrument Serif",Georgia,serif;font-style:italic;font-weight:400;letter-spacing:-.01em;color:var(--lilac);font-size:1.12em}
.ecl-copy{margin:0 auto;max-width:460px;font-size:14px;line-height:1.65;color:#c9c4d6}

.hx6{width:min(100%,720px);margin-top:56px;container-type:inline-size}
.hx6-symbol{position:relative;aspect-ratio:1}
.hx6-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.hx6-ground{fill:#000;opacity:.75;filter:url(#hx6-blur)}
/* dobra: a fita de cima projeta sombra na de baixo; a borda de cima ganha um filete de luz */
.hx6-shadow{fill:none;stroke:#000;stroke-width:12;opacity:.6;filter:url(#hx6-blur);pointer-events:none}
.hx6-edge{fill:none;stroke:#fff;stroke-width:1.6;opacity:.45;filter:url(#hx6-soft);pointer-events:none}
.hx6-seg{cursor:pointer}
.hx6-seg:hover,.hx6-seg.active{filter:brightness(1.12)}

/* textos posicionados nas fitas (coordenadas geradas junto com o desenho) */
.hx6-labels{position:absolute;inset:0;pointer-events:none}
.hx6-label,.hx6-para,.hx6-icon{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);color:#fff}
.t-light.hx6-label,.t-light.hx6-para,.t-light.hx6-icon,.t-lilac.hx6-label,.t-lilac.hx6-para,.t-lilac.hx6-icon{color:#221c30}
.hx6-label{pointer-events:auto;display:grid;justify-items:center;gap:.2cqw;padding:.6cqw 1cqw;background:none;border:0;cursor:pointer;font:inherit;text-align:center}
.hx6-num{font-size:6.4cqw;font-weight:700;line-height:1;letter-spacing:-.02em}
.hx6-name{display:none;font-size:1.95cqw;font-weight:600;letter-spacing:.01em}
.hx6-label:focus-visible{outline:2px solid var(--lilac);outline-offset:2px;border-radius:8px}
.hx6-para{margin:0;width:19cqw;font-size:1.6cqw;line-height:1.4;text-align:left;opacity:.85}
.hx6-para strong{display:block;margin-bottom:.3cqw;font-size:1.75cqw}
.hx6-icon{width:4.4cqw;height:4.4cqw;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

/* explicação do pilar ativo: só no celular, abaixo do símbolo */
.hx6-center{display:none}
.hx6-center.swap>*{animation:hx6-fade .45s ease}
@keyframes hx6-fade{from{opacity:0;transform:translateY(4px)}}
@container (max-width:560px){
  .hx6-para{display:none}
  /* no celular cada aba mostra ícone, número e nome empilhados no centro visível dela (medido sem o que a vizinha cobre);
     !important porque as posições do desktop estão inline no HTML */
  .hx6-label[data-pillar="0"]{--x:45.1%!important;--y:18.8%!important} .hx6-icon[data-part="0"]{--x:45.1%!important;--y:9.8%!important}
  .hx6-label[data-pillar="1"]{--x:78.5%!important;--y:38.5%!important} .hx6-icon[data-part="1"]{--x:78.5%!important;--y:29.5%!important}
  .hx6-label[data-pillar="2"]{--x:71.5%!important;--y:75.4%!important} .hx6-icon[data-part="2"]{--x:71.5%!important;--y:66.4%!important}
  .hx6-label[data-pillar="3"]{--x:34.4%!important;--y:80.2%!important} .hx6-icon[data-part="3"]{--x:34.4%!important;--y:71.2%!important}
  .hx6-label[data-pillar="4"]{--x:18.4%!important;--y:46.3%!important} .hx6-icon[data-part="4"]{--x:18.4%!important;--y:37.3%!important}
  .hx6-num{font-size:6.4cqw}
  .hx6-name{display:block;font-size:2.7cqw;white-space:nowrap}
  .hx6-icon{width:4.4cqw;height:4.4cqw}
  .hx6-center{display:block;margin-top:24px;padding:16px 18px;border:1px solid rgba(255,255,255,.3);border-radius:14px;background:rgba(20,19,24,.72);text-align:center}
  .hx6-center span{font-size:9px;letter-spacing:.2em;color:#9e9aa8}
  .hx6-center h3{font-size:16px;margin:6px 0}
  .hx6-center p{margin:0;font-size:13px;line-height:1.5;color:#b9b3c7}
}


/* entrada: as partes giram até se encaixar, uma de cada vez */
.hx6-seg{transform-box:view-box;transform-origin:0 0;transition:transform .5s cubic-bezier(.16,1,.3,1),filter .4s}
.motion .hx6:not(.visible) .hx6-seg{opacity:0}
.motion .hx6.visible .hx6-seg{animation:hx6-in 1.1s cubic-bezier(.16,1,.3,1) backwards;animation-delay:calc(var(--i) * .12s)}
@keyframes hx6-in{from{opacity:0;transform:rotate(-50deg) scale(.82)}}
.motion .hx6:not(.visible) .hx6-labels{opacity:0}
.motion .hx6.visible .hx6-labels{animation:hx6-fade .6s .7s ease backwards}
/* a parte ativa salta um pouco para fora, com seus textos */
.hx6-seg.active{transform:translate(calc(var(--dx) * 4px),calc(var(--dy) * 4px));filter:brightness(1.1)}
.hx6-label,.hx6-para,.hx6-icon{transition:transform .5s cubic-bezier(.16,1,.3,1)}
.hx6-label.active,.hx6-para.active,.hx6-icon.active{transform:translate(calc(-50% + var(--dx) * 1.85cqw),calc(-50% + var(--dy) * 1.85cqw))}

/* ao passar o mouse: seta em cotovelo se desenha e abre um card para o lado */
.hx6-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:3}
.hx6-line{fill:none;stroke:rgba(255,255,255,.55);stroke-width:.55;stroke-dasharray:1;stroke-dashoffset:1;opacity:0;transition:stroke-dashoffset .45s ease,opacity .15s}
.hx6-line.open{stroke-dashoffset:0;opacity:1}
#hx6-arrow path{fill:rgba(255,255,255,.7)}
.hx6-call{position:absolute;z-index:4;left:var(--x);top:var(--y);width:236px;padding:14px 16px;border-radius:12px;background:rgba(20,19,24,.72);backdrop-filter:blur(14px) saturate(110%);-webkit-backdrop-filter:blur(14px) saturate(110%);border:1px solid rgba(255,255,255,.3);box-shadow:0 18px 40px #0008;
  opacity:0;pointer-events:none;transform:translate(14px,-50%) translateX(-10px);transition:opacity .3s ease .25s,transform .45s cubic-bezier(.16,1,.3,1) .25s}
.hx6-call[data-side="left"]{transform:translate(calc(-100% - 14px),-50%) translateX(10px)}
.hx6-call.open{opacity:1;transform:translate(14px,-50%)}
.hx6-call[data-side="left"].open{transform:translate(calc(-100% - 14px),-50%)}
.hx6-call-num{font-size:10px;letter-spacing:.18em;color:#9e9aa8}
.hx6-call strong{display:block;margin:2px 0 8px;font-size:16px;font-weight:600}
.hx6-call ul,.hx6-center ul{list-style:none;margin:0;padding:0;font-size:13px;line-height:1.5;color:#cfc8de}
.hx6-call li,.hx6-center li{padding:3px 0}
.hx6-call li::before,.hx6-center li::before{content:"";margin-right:8px;color:#8a7fc4;font-size:10px}
.hx6-center ul{display:inline-block;margin-top:12px;text-align:left}

/* o símbolo encolhe o necessário para os cards caberem dentro da tela dos dois lados */
@media(min-width:1200px){.hx6{width:min(100%,720px,calc((100vw - 560px) / 1.093))}}
/* sem espaço nas laterais: as setas somem e a explicação fica no card abaixo do símbolo */
@media(max-width:1199px){
  .hx6-lines,.hx6-call{display:none}
  .hx6-center{display:block;max-width:560px;margin:24px auto 0;padding:16px 18px;border:1px solid rgba(255,255,255,.3);border-radius:14px;background:rgba(20,19,24,.72);text-align:center}
  .hx6-center span{font-size:9px;letter-spacing:.2em;color:#9e9aa8}
  .hx6-center h3{font-size:16px;margin:6px 0}
  .hx6-center p{margin:0;font-size:13px;line-height:1.5;color:#b9b3c7}
}

@media(max-width:760px){
  .ecl{padding-bottom:60px}
  .hx6{margin-top:36px}
}
@media(prefers-reduced-motion:reduce){
  .hx6-seg,.hx6-label,.hx6-para,.hx6-icon,.hx6-call,.hx6-line{transition:none}
}

/* Seção 03 — Ecossistema: três círculos de contorno que se cruzam */
.eco3{text-align:center;overflow:hidden}
.eco3-title{margin:10px 0 70px;font-size:clamp(40px,6.2vw,96px);line-height:1;font-weight:300;letter-spacing:-.045em;text-transform:uppercase}
.eco3-title span{display:block}
.eco3-title span:first-child{color:#a29dae}
.eco3-title span:last-child{font-weight:400;background:linear-gradient(90deg,#8f7cf7,#b9a2ff);-webkit-background-clip:text;background-clip:text;color:transparent}

.eco3-stage{position:relative;width:min(1080px,100%);margin:0 auto}
/* linha em L: vem da lateral e desce até o círculo do meio */
.eco3-stage::before{content:"";position:absolute;left:50%;top:-50px;width:50vw;height:50px;border-top:1px solid #ffffff38;border-left:1px solid #ffffff38;pointer-events:none}
.eco3-circles{list-style:none;margin:0;padding:0;position:relative;aspect-ratio:100/36}
.eco3-circle{position:absolute;top:0;left:calc(var(--i) * 32%);width:36%;aspect-ratio:1;border-radius:50%;border:1px solid #ffffff4d;display:grid;place-items:center;align-content:center;gap:14px;padding:0 9%;cursor:default;outline:none;
  transition:background .5s,border-color .5s,box-shadow .5s}
.eco3-label{font-size:clamp(22px,2.5vw,38px);font-weight:300;letter-spacing:-.02em;text-transform:uppercase;color:#d8d3e3;transition:transform .5s cubic-bezier(.16,1,.3,1),color .4s}
.eco3-detail{display:block;max-width:240px;font-size:13px;line-height:1.55;color:#b9b3c7;opacity:0;max-height:0;transform:translateY(8px);transition:opacity .4s,transform .5s cubic-bezier(.16,1,.3,1),max-height .5s}
.eco3-detail b{display:block;margin-bottom:4px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--lilac)}
.eco3-circle:hover,.eco3-circle:focus-visible{background:radial-gradient(circle,#5b3fc42e,transparent 70%);border-color:#b9a2ff;box-shadow:0 0 50px #7c5ce633,inset 0 0 40px #7c5ce622}
.eco3-circle:hover .eco3-label,.eco3-circle:focus-visible .eco3-label{color:#fff}
.eco3-circle:hover .eco3-detail,.eco3-circle:focus-visible .eco3-detail{opacity:1;max-height:160px;transform:none}

/* ✳ nos pontos onde os círculos se cruzam */
.eco3-mark{position:absolute;left:var(--x);top:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--bg);color:#8f7cf7;font-size:22px;line-height:1;pointer-events:none}

.eco3-copy{margin:70px auto 0;max-width:620px;font-size:clamp(17px,1.5vw,22px);line-height:1.45;color:#d8d3e3}
.eco3-copy em{font-style:normal;color:#a58bff}


/* movimento dos círculos: flutuam, seguem a luz do mouse e reagem entre si */
.eco3-circle{overflow:hidden;animation:eco3-float 7s ease-in-out infinite;animation-delay:calc(var(--i) * -2.3s);
  transition:background .5s,border-color .5s,box-shadow .5s,scale .6s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1),opacity .5s}
@keyframes eco3-float{50%{translate:0 -10px}}
/* luz que acompanha o cursor dentro do círculo */
.eco3-circle::after{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;opacity:0;transition:opacity .4s;
  background:radial-gradient(circle at var(--mx,50%) var(--my,50%),#a58bff40 0%,transparent 45%)}
/* cometa que percorre a borda */
.eco3-circle::before{content:"";position:absolute;inset:-1px;border-radius:50%;pointer-events:none;opacity:0;transition:opacity .4s;
  background:conic-gradient(from 0deg,transparent 0 62%,#b9a2ff00 62%,#d6c8ff 99%,#fff 100%);
  -webkit-mask:radial-gradient(closest-side,transparent calc(100% - 2px),#000 calc(100% - 1.5px));mask:radial-gradient(closest-side,transparent calc(100% - 2px),#000 calc(100% - 1.5px));
  animation:eco3-orbit 3.2s linear infinite paused}
@keyframes eco3-orbit{to{transform:rotate(360deg)}}
.eco3-label,.eco3-detail{position:relative;z-index:1}
@media(hover:hover) and (min-width:901px){
.eco3-circle:hover,.eco3-circle:focus-visible{scale:1.07;z-index:2;animation-play-state:paused}
.eco3-circle:hover::after,.eco3-circle:focus-visible::after,.eco3-circle:hover::before,.eco3-circle:focus-visible::before{opacity:1}
.eco3-circle:hover::before,.eco3-circle:focus-visible::before{animation-play-state:running}
/* os vizinhos se afastam e apagam um pouco */
.eco3-circles:hover .eco3-circle:not(:hover){opacity:.45;border-color:#ffffff26}
.eco3-circle:hover ~ .eco3-circle{transform:translateX(26px)}
.eco3-circle:has(~ .eco3-circle:hover){transform:translateX(-26px)}
}
.eco3-mark{transition:transform .8s cubic-bezier(.16,1,.3,1),color .4s,text-shadow .4s;z-index:3}
.eco3-stage:hover .eco3-mark{transform:translate(-50%,-50%) rotate(180deg) scale(1.2);color:#d6c8ff;text-shadow:0 0 14px #a58bff}

@media(max-width:900px){
  .eco3-title{margin-bottom:50px}
  .eco3-stage::before{display:none}
  /* no celular os círculos ficam empilhados e ainda se cruzando */
  .eco3-circles{aspect-ratio:auto;display:flex;flex-direction:column;align-items:center}
  .eco3-circle{position:relative;left:auto;width:min(78vw,300px);margin-top:-34px}
  .eco3-circle:first-child{margin-top:0}
  .eco3-label{font-size:26px}
  .eco3-detail{opacity:1;max-height:none;transform:none;font-size:12px;max-width:200px}
  .eco3-mark{display:none}
}
@media(prefers-reduced-motion:reduce){.eco3-circle,.eco3-label,.eco3-detail{transition:none}.eco3-circle{animation:none}.eco3-circle::before{animation:none}}


/* Seção 04 — Soluções: título e setas à esquerda, cards escuros em carrossel horizontal à direita */
.svc{display:grid;grid-template-columns:minmax(260px,.75fr) minmax(0,1.7fr);gap:clamp(32px,5vw,80px);align-items:center;margin-bottom:20px}
.svc-chip{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:8px;background:#f4f2f8;color:#2b2535;font-size:11px;font-weight:600;letter-spacing:.02em}
.svc-chip i{width:6px;height:6px;border-radius:50%;background:var(--purple)}
.svc-intro h2{margin:22px 0 18px;font-size:clamp(34px,3.6vw,56px);line-height:1.04;font-weight:400;letter-spacing:-.04em}
.svc-intro h2 em{font-family:"Instrument Serif",Georgia,serif;font-style:italic;font-size:1.08em;letter-spacing:-.01em}
.svc-intro>p{max-width:320px;font-size:14px;line-height:1.65;color:#b9b3c7}
.svc-nav{display:flex;gap:10px;margin-top:32px}
.svc-nav button{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-size:20px;line-height:1;cursor:pointer;transition:transform .25s,opacity .25s,background .25s}
.svc-prev{background:#1c1a22;color:#fff;border:1px solid rgba(255,255,255,.14)}
.svc-next{background:#f4f2f8;color:#14111b;border:0}
.svc-nav button:hover:not(:disabled){transform:scale(1.08)}
.svc-nav button:disabled{opacity:.35;cursor:default}

/* trilho: no desktop e no tablet os 3 cards cabem inteiros, sem sair pela borda; no celular vira carrossel de um card por vez */
.svc-track{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;padding:14px 0 6px}
.svc-track:focus-visible{outline:2px solid var(--lilac);outline-offset:6px;border-radius:24px}
.svc-card{position:relative;display:flex;flex-direction:column;min-width:0;min-height:440px;padding:24px 22px 22px;border-radius:24px;overflow:hidden;isolation:isolate;
  background:radial-gradient(ellipse 70% 45% at 12% 0%,#675aa633,transparent 70%),linear-gradient(180deg,#141219,#08070b);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 24px 50px #0008;border:1px solid rgba(255,255,255,.08);
  opacity:.62;transition:transform .7s cubic-bezier(.16,1,.3,1),opacity .6s,border-color .6s,box-shadow .6s}
/* card em destaque: sobe, clareia a borda e acende o ícone; o destaque percorre 1 → 2 → 3 sozinho */
.svc-card.is-active{opacity:1;transform:translateY(-10px);border-color:rgba(255,255,255,.2);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 30px 60px #000a,0 0 0 1px #675aa640}
.svc-card .svc-icon{transition:box-shadow .6s,transform .6s}
.svc-card.is-active .svc-icon{transform:scale(1.06);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 12px 50px #675aa6cc,0 0 90px #675aa688}
/* barra de tempo do destaque automático */
.svc-card::after{content:"";position:absolute;left:22px;right:22px;top:0;height:2px;border-radius:2px;background:linear-gradient(90deg,#8a7fc4,#c9c2ef);transform:scaleX(0);transform-origin:left;opacity:0}
.svc-card.is-active.is-timing::after{opacity:1;animation:svc-time var(--svc-t,4.5s) linear forwards}
@keyframes svc-time{to{transform:scaleX(1)}}
/* entrada: os cards sobem um depois do outro */
.motion .svc:not(.visible) .svc-card{opacity:0;transform:translateY(40px)}
.motion .svc.visible .svc-card{animation:svc-in .9s cubic-bezier(.16,1,.3,1) backwards}
.motion .svc.visible .svc-card:nth-child(2){animation-delay:.12s}
.motion .svc.visible .svc-card:nth-child(3){animation-delay:.24s}
@keyframes svc-in{from{opacity:0;transform:translateY(40px)}}
.svc-icon{display:grid;place-items:center;width:52px;height:52px;border-radius:14px;margin-bottom:56px;
  background:linear-gradient(160deg,#8a7fc4,#675aa6 55%,#4b4180);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 10px 40px #675aa699,0 0 70px #675aa655}
.svc-icon svg{width:24px;height:24px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.svc-card h3{margin:0;padding-bottom:16px;border-bottom:1px solid rgba(255,255,255,.12);font-size:clamp(21px,1.7vw,26px);font-weight:400;letter-spacing:-.025em;line-height:1.2;color:#fff}
.svc-card p{margin:16px 0 0;font-size:13px;line-height:1.6;color:#9e98ad}
.svc-card ul{list-style:none;margin:14px 0 24px;padding:0;font-size:12px;line-height:1.5;color:#cfc8de}
.svc-card li{padding:3px 0}
.svc-card li::before{content:"";margin-right:8px;color:#8a7fc4;font-size:10px}
.svc-foot{margin-top:auto;display:flex;align-items:center}
.svc-cta{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border:0;border-radius:100px;background:#f4f2f8;color:#14111b;font:inherit;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;cursor:pointer;transition:gap .3s,background .3s}
.svc-cta:hover{gap:12px;background:#fff}


.svc-card h3{font-size:clamp(19px,1.5vw,24px)}

/* tablet: título em cima, os 3 cards lado a lado embaixo */
@media(max-width:1180px){
  .svc{grid-template-columns:1fr;gap:28px}
  .svc-intro>p{max-width:460px}
  .svc-nav{margin-top:22px}
}
/* celular: um card por vez, do tamanho da área útil; passa sozinho, com as setas ou com o dedo */
@media(max-width:760px){
  .svc-track{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;overscroll-behavior-x:contain;scrollbar-width:none;padding:14px 0 10px}
  .svc-track::-webkit-scrollbar{display:none}
  .svc-card{flex:0 0 100%;scroll-snap-align:center;min-height:400px;opacity:1}
  .svc-card.is-active{transform:none}
  .svc-icon{margin-bottom:40px}
}
@media(prefers-reduced-motion:reduce){
  .svc-track{scroll-behavior:auto}
  .svc-card,.svc-card .svc-icon{transition:none}
  .svc-card::after{display:none}
}

/* Núcleo do anel: poço de vidro escuro com o símbolo S aceso, na linguagem do hero */
.hx6-symbol{--cx:-0.276;--cy:-0.961}
.hx6-symbol::before{content:"";position:absolute;inset:-6%;z-index:-1;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,#675aa640,#2e285233 55%,transparent 75%)}
.hx6-core{position:absolute;left:50%;top:50%;z-index:1;width:34%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;display:grid;place-items:center;pointer-events:none;
  background:radial-gradient(circle at calc(50% + var(--cx) * 22%) calc(50% + var(--cy) * 22%),#5a4f99 0%,#221d3d 38%,#0b0a12 72%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),inset 0 14px 34px #000d,inset 0 -8px 26px #675aa630,0 0 70px #675aa640;
  transition:background .7s cubic-bezier(.16,1,.3,1)}
.hx6-dial{position:absolute;inset:6%;border-radius:50%;
  background:repeating-conic-gradient(from 0deg,rgba(255,255,255,.55) 0 .5deg,transparent .5deg 6deg);
  -webkit-mask:radial-gradient(closest-side,transparent calc(100% - 7%),#000 calc(100% - 6.6%));mask:radial-gradient(closest-side,transparent calc(100% - 7%),#000 calc(100% - 6.6%));
  opacity:.45;animation:hx6-spin 48s linear infinite}
.hx6-core img{position:relative;width:44%;height:auto;filter:drop-shadow(0 0 16px #8b6cf0aa) drop-shadow(0 6px 10px #000a);animation:hx6-float 6s ease-in-out infinite}
@keyframes hx6-spin{to{transform:rotate(360deg)}}
@keyframes hx6-float{50%{transform:translateY(-3%)}}
/* entrada: o núcleo acende depois que as partes se encaixam */
.motion .hx6:not(.visible) .hx6-core{opacity:0}
.motion .hx6.visible .hx6-core{animation:hx6-core-in 1s cubic-bezier(.16,1,.3,1) .55s backwards}
@keyframes hx6-core-in{from{opacity:0;transform:translate(-50%,-50%) scale(.7)}}
@media(prefers-reduced-motion:reduce){
  .hx6-dial,.hx6-core img{animation:none}
}