/* Dobeo fx layer — decorative only; the page works without it. */
.fx-field{position:absolute;left:0;right:0;top:0;width:100%;pointer-events:none;z-index:0}
.hero{position:relative;isolation:isolate}
.hero>.grid12{position:relative;z-index:1}
.fx-ring{position:fixed;left:0;top:0;width:34px;height:34px;margin:-17px 0 0 -17px;border:1.5px solid var(--accent);border-radius:50%;pointer-events:none;z-index:50;opacity:0;transition:width .25s var(--ease),height .25s var(--ease),margin .25s var(--ease),opacity .3s,background-color .25s;mix-blend-mode:multiply}
.fx-ring.on{opacity:.9}
.fx-ring.big{width:64px;height:64px;margin:-32px 0 0 -32px;background:rgba(194,51,14,.08)}
.fx-ring.press{width:20px;height:20px;margin:-10px 0 0 -10px}
.apps-list .row{transition:transform .35s var(--ease)}
.fx-row-go{display:inline-block;transition:transform .35s var(--ease)}
.row:hover .arrow,.row:focus-visible .arrow{display:inline-block;animation:fx-hop .6s var(--ease)}
@keyframes fx-hop{0%{transform:translate(0,0)}45%{transform:translate(6px,-6px) rotate(-45deg)}100%{transform:translate(0,0) rotate(-45deg)}}
.display em{display:inline-block;transition:transform .5s cubic-bezier(.3,1.6,.4,1)}
.display em:hover{transform:rotate(-6deg) scale(1.06);color:var(--accent)}
.wordmark svg{transition:transform .5s cubic-bezier(.3,1.6,.4,1)}
.wordmark:hover svg{transform:translate(2px,-2px) rotate(0deg) scale(1.2)}
.fx-toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);background:var(--ink);color:var(--paper);font:500 .75rem/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;padding:.8rem 1.1rem;border-radius:999px;opacity:0;transition:.4s var(--ease);z-index:60;pointer-events:none}
.fx-toast.on{opacity:1;transform:translate(-50%,0)}
@media (prefers-reduced-motion:reduce){.fx-field,.fx-ring{display:none}.display em,.wordmark svg,.apps-list .row{transition:none}.row:hover .arrow{animation:none}}
/* Home headline (longer text): sized so each of the 3 lines stays on one line */
.hero .display{font-size:clamp(2.2rem,6.6vw,7.5rem);line-height:.95}
.hero .display .l3{padding-left:calc(100% / 12 * 5)}
@media (max-width:560px){.hero .display{font-size:8.4vw;line-height:1}.hero .display .l2{padding-left:0}.hero .display .l3{padding-left:22%}}
/* §01: a short statement, not a paragraph */
#o-que-fazemos .statement{font-size:clamp(1.8rem,3.4vw,3.4rem);margin-bottom:clamp(2.5rem,6vw,5rem)}