/* ==========================================================================
   Hybriun: "Luz híbrida"
   Tema escuro nas cores da marca. Duas luzes (azul royal e roxo) saem das duas peças
   do símbolo e iluminam produtos reais, cards e cenas em movimento.

   1. Tokens e base          7. Projetos
   2. Botões, rótulos        8. Cena do processo
   3. Cabeçalho e menu       9. Blocos de apoio (órbita, FAQ, blog, tabelas)
   4. Seções                10. Formulário
   5. Topo da página inicial 11. Páginas internas, artigo e case
   6. Serviços (ilustrações) 12. Rodapé · 13. Movimento
   ========================================================================== */

/* 1. Tokens e base --------------------------------------------------------- */

:root {
	--bg: #07080b;
	--bg-2: #0a0c10;
	--surface: #0e1116;
	--surface-2: #151922;
	--line: rgba(255, 255, 255, 0.08);
	--line-2: rgba(255, 255, 255, 0.16);
	--fg: #f4f5f7;
	--fg-2: #b6bcc7;
	--fg-3: #838a97;

	/* Cores da marca: azul royal e roxo. As versões claras servem a textos e traços finos sobre o fundo escuro. */
	--royal: #2f5bff;
	--sky: #8aa3ff;
	--violet: #934bff;
	--lilac: #c9adff;
	--indigo: #6a4dff;
	--grad: linear-gradient(100deg, #2f5bff 0%, #6a4dff 52%, #a44bff 100%);
	--grad-text: linear-gradient(100deg, #7391ff 0%, #a183ff 50%, #d28cff 100%);
	--c: var(--royal);

	--sans: "Roboto", "Roboto Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
	--mono: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

	--gutter: clamp(1.25rem, 4vw, 2.5rem);
	--max: 77.5rem;
	--pad: max(var(--gutter), calc((100% - var(--max)) / 2));
	--space: clamp(4.5rem, 9vw, 8.5rem);
	--r: 1.5rem;
	--r-sm: 0.9rem;

	--ease: cubic-bezier(0.16, 1, 0.3, 1);
	--ease-io: cubic-bezier(0.65, 0, 0.35, 1);
}

@font-face {
	font-family: "Roboto Fallback";
	src: local("Helvetica Neue"), local("Arial");
	size-adjust: 100.3%;
	ascent-override: 92.7%;
	descent-override: 24.4%;
	line-gap-override: 0%;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html.hy-anim {
	scroll-behavior: smooth;
}

html {
	background: var(--bg);
	color-scheme: dark;
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-padding-top: 6.5rem;
}

body {
	margin: 0;
	background: var(--bg);
	color: var(--fg-2);
	font-family: var(--sans);
	font-size: 1.0625rem;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	overflow-x: clip;
}

/* Grão fino por cima de tudo: tira o aspecto "chapado" dos fundos escuros. */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 70;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	opacity: 0.05;
	pointer-events: none;
}

img,
svg,
video,
canvas {
	display: block;
	max-width: 100%;
}

img,
video {
	height: auto;
}

a {
	color: inherit;
	text-decoration: none;
}

button {
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
}

h1,
h2,
h3,
h4 {
	margin: 0;
	color: var(--fg);
	font-weight: 600;
	letter-spacing: -0.03em;
	line-height: 1.08;
	text-wrap: balance;
}

h2 {
	font-size: clamp(1.9rem, 1.1rem + 2.8vw, 3.25rem);
}

h3 {
	font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.5rem);
	letter-spacing: -0.02em;
	line-height: 1.2;
}

p {
	margin: 0;
	text-wrap: pretty;
}

ul,
ol,
dl,
dd,
figure {
	margin: 0;
	padding: 0;
}

ul,
ol {
	list-style: none;
}

strong {
	color: var(--fg);
	font-weight: 600;
}

sup {
	font-size: 0.62em;
	vertical-align: 0.55em;
	line-height: 0;
}

:focus-visible {
	outline: 2px solid var(--sky);
	outline-offset: 3px;
}

::selection {
	background: var(--royal);
	color: #fff;
}

.hy-skip {
	position: fixed;
	left: 1rem;
	top: -5rem;
	z-index: 200;
	padding: 0.8rem 1.1rem;
	border-radius: 999px;
	background: var(--fg);
	color: var(--bg);
	font-size: 0.9rem;
	font-weight: 600;
	transition: top 0.3s var(--ease);
}

.hy-skip:focus {
	top: 1rem;
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Palavras de títulos animados (marcação gerada no servidor). */
.hy-w {
	display: inline-block;
	overflow: hidden;
	vertical-align: top;
	padding-block: 0.14em;
	margin-block: -0.14em;
}

.hy-wi {
	display: inline-block;
}

/* Texto em gradiente: a "luz" da marca (do azul ao roxo) aplicada à tipografia. */
.hy-display em,
.hy-display em .hy-wi,
.hy-stat b,
.hy-404__0 {
	background: var(--grad-text);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	font-style: normal;
}

/* Luz ambiente que acompanha o cursor (só em telas com mouse). */
.hy-aura {
	position: fixed;
	left: 0;
	top: 0;
	z-index: 65;
	width: 44rem;
	height: 44rem;
	margin: -22rem 0 0 -22rem;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(72, 100, 255, 0.1), rgba(147, 75, 255, 0.05) 40%, transparent 68%);
	mix-blend-mode: screen;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.8s;
}

.hy-aura.is-on {
	opacity: 1;
}

.hy-main,
.hy-footer {
	position: relative;
	z-index: 2;
}

/* 2. Botões, rótulos e superfícies ----------------------------------------- */

.hy-btn,
.wp-block-button__link {
	position: relative;
	isolation: isolate;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.7em;
	padding: 1.05em 1.55em;
	overflow: hidden;
	border: 0;
	border-radius: 999px;
	background: var(--grad);
	box-shadow: 0 0 0 1px rgba(190, 205, 255, 0.35) inset, 0 14px 40px -14px rgba(47, 91, 255, 0.85);
	color: #fff;
	font-family: var(--sans);
	font-size: 0.97rem;
	font-weight: 600;
	letter-spacing: -0.005em;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease), background-color 0.4s, border-color 0.4s, color 0.3s;
}

/* Reflexo que atravessa o botão no hover. */
.hy-btn::before,
.wp-block-button__link::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.55) 50%, transparent 70%);
	transform: translateX(-120%);
	transition: transform 0.9s var(--ease);
}

.hy-btn::after,
.wp-block-button__link::after {
	content: "";
	flex: none;
	width: 1.05em;
	height: 1.05em;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform 0.5s var(--ease);
}

.hy-btn:hover,
.wp-block-button__link:hover,
.hy-btn:focus-visible,
.wp-block-button__link:focus-visible {
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 0 0 1px rgba(215, 222, 255, 0.6) inset, 0 20px 50px -14px rgba(86, 80, 255, 1);
}

.hy-btn:hover::before,
.wp-block-button__link:hover::before {
	transform: translateX(120%);
}

.hy-btn:hover::after,
.wp-block-button__link:hover::after {
	transform: translateX(0.25em);
}

.hy-btn--sm {
	padding: 0.8em 1.2em;
	font-size: 0.88rem;
}

/* Contorno (vidro) */
.hy-btn--ghost,
.hy-btn--light,
.wp-block-button.is-style-ghost .wp-block-button__link {
	background: rgba(255, 255, 255, 0.05);
	box-shadow: 0 0 0 1px var(--line-2) inset;
	color: var(--fg);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}

.hy-btn--ghost:hover,
.hy-btn--ghost:focus-visible,
.hy-btn--light:hover,
.wp-block-button.is-style-ghost .wp-block-button__link:hover,
.wp-block-button.is-style-ghost .wp-block-button__link:focus-visible {
	background: rgba(255, 255, 255, 0.11);
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.4) inset, 0 14px 40px -18px rgba(255, 255, 255, 0.35);
	color: var(--fg);
}

.hy-btn--ghost::before,
.hy-btn--light::before,
.wp-block-button.is-style-ghost .wp-block-button__link::before {
	background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.16) 50%, transparent 70%);
}

/* Link com seta */
.wp-block-button.is-style-link .wp-block-button__link,
.hy-link {
	padding: 0.3em 0;
	overflow: visible;
	border-radius: 0;
	background: none;
	box-shadow: inset 0 -1px 0 var(--line-2);
	color: var(--fg);
	font-size: 1rem;
}

.wp-block-button.is-style-link .wp-block-button__link::before {
	display: none;
}

.wp-block-button.is-style-link .wp-block-button__link:hover,
.wp-block-button.is-style-link .wp-block-button__link:focus-visible,
.hy-link:hover {
	transform: none;
	box-shadow: inset 0 -2px 0 var(--sky);
	color: var(--fg);
}

.wp-block-buttons {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.9rem 1rem;
}

.wp-block-buttons > .wp-block-button {
	margin: 0;
}

/* Rótulos: pequenas etiquetas de vidro com um ponto aceso. */
.hy-label,
.hy-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	width: fit-content;
	padding: 0.5rem 0.95rem 0.5rem 0.8rem;
	border: 1px solid var(--line-2);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.04);
	color: var(--fg-2);
	font-family: var(--mono);
	font-size: 0.7rem;
	font-weight: 500;
	letter-spacing: 0.11em;
	line-height: 1.2;
	text-transform: uppercase;
}

.hy-label::before,
.hy-eyebrow::before {
	content: "";
	flex: none;
	width: 0.42rem;
	height: 0.42rem;
	border-radius: 50%;
	background: var(--c);
	box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--c) 22%, transparent), 0 0 14px var(--c);
}

.hy-label a {
	color: inherit;
}

/* Superfície padrão dos cards + luz que segue o cursor (variáveis --sx/--sy vêm do JS). */
/* :where() mantém a especificidade em zero: cada componente pode sobrescrever à vontade. */
:where(.hy-bento__card, .hy-tile, .hy-pcard, .hy-post, .hy-stat, .hy-step, .hy-tech, .hy-form-wrap, .hy-ficha, .hy-pv, .hy-faqs details) {
	position: relative;
	border: 1px solid var(--line);
	border-radius: var(--r);
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015));
	isolation: isolate;
}

:is(.hy-bento__card, .hy-tile, .hy-pcard, .hy-post, .hy-stat, .hy-step, .hy-tech, .hy-form-wrap, .hy-ficha, .hy-faqs details)::after {
	content: "";
	position: absolute;
	inset: -1px;
	z-index: 3;
	padding: 1px;
	border-radius: inherit;
	background: radial-gradient(22rem circle at var(--sx, 50%) var(--sy, -40%), color-mix(in srgb, var(--c) 95%, #fff 5%), transparent 62%);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.45s;
}

:is(.hy-bento__card, .hy-tile, .hy-pcard, .hy-post, .hy-stat, .hy-step, .hy-tech, .hy-form-wrap, .hy-ficha, .hy-faqs details):hover::after {
	opacity: 1;
}

:is(.hy-bento__card, .hy-tile, .hy-pcard, .hy-post, .hy-stat, .hy-tech)::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	background: radial-gradient(26rem circle at var(--sx, 50%) var(--sy, -40%), color-mix(in srgb, var(--c) 16%, transparent), transparent 60%);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.45s;
}

:is(.hy-bento__card, .hy-tile, .hy-pcard, .hy-post, .hy-stat, .hy-tech):hover::before {
	opacity: 1;
}

/* Links em texto corrido */
:where(.hy-prose, .hy-split__b, .hy-tile, .hy-faqs, .hy-step, .hy-tech, .hy-head, .hy-contact__intro, .hy-faqwrap__a) :is(p, li) > a,
.hy-form__legal a,
.hy-content > :is(p, ul, ol) a {
	color: var(--fg);
	text-decoration: underline;
	text-decoration-color: var(--sky);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.22em;
	transition: color 0.3s;
}

:where(.hy-prose, .hy-split__b, .hy-tile, .hy-faqs, .hy-step, .hy-tech, .hy-head, .hy-contact__intro, .hy-faqwrap__a) :is(p, li) > a:hover,
.hy-form__legal a:hover,
.hy-content > :is(p, ul, ol) a:hover {
	color: var(--sky);
}

/* 3. Cabeçalho e menu ------------------------------------------------------ */

.hy-header {
	position: fixed;
	inset: 0.9rem 0 auto;
	z-index: 100;
	display: flex;
	justify-content: center;
	padding-inline: var(--gutter);
	pointer-events: none;
}

.hy-header__in {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	width: min(100%, var(--max));
	height: 4rem;
	padding: 0 0.55rem 0 1.4rem;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: rgba(12, 14, 19, 0.55);
	-webkit-backdrop-filter: blur(18px) saturate(1.6);
	backdrop-filter: blur(18px) saturate(1.6);
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset;
	pointer-events: auto;
	transition: background-color 0.4s, border-color 0.4s, box-shadow 0.4s;
	/* O nome fica no mesmo elemento do desfoque: num elemento pai, ele isolaria o fundo e o vidro deixaria de desfocar a página. */
	view-transition-name: hy-header;
}

.hy-header.is-scrolled .hy-header__in {
	border-color: var(--line-2);
	background: rgba(10, 12, 16, 0.82);
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.07) inset, 0 20px 50px -24px rgba(0, 0, 0, 0.9);
}

.hy-brand {
	display: block;
	flex: none;
	padding-block: 0.4rem;
	color: var(--fg);
}

.hy-logo {
	width: auto;
	height: 1.6rem;
	overflow: visible;
}

.hy-logo__a,
.hy-logo__b {
	transform-box: fill-box;
	transform-origin: center;
	transition: transform 0.6s var(--ease), fill 0.4s;
}

.hy-brand:hover .hy-logo__a {
	fill: var(--sky);
	transform: translate(-22px, 16px);
}

.hy-brand:hover .hy-logo__b {
	fill: var(--lilac);
	transform: translate(22px, -16px);
}

.hy-menu {
	display: flex;
	align-items: center;
	gap: 0.25rem;
	color: var(--fg-2);
	font-size: 0.93rem;
	font-weight: 500;
}

.hy-menu > li {
	position: relative;
}

.hy-menu > li > a {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	padding: 0.6rem 0.95rem;
	border-radius: 999px;
	transition: color 0.3s, background-color 0.3s;
}

.hy-menu > li > a:hover,
.hy-menu > li:focus-within > a {
	background: rgba(255, 255, 255, 0.07);
	color: var(--fg);
}

.hy-menu > .current-menu-item > a,
.hy-menu > .current-menu-ancestor > a,
.hy-menu > .current_page_parent > a,
.hy-menu > .current-page-ancestor > a {
	color: var(--fg);
}

.hy-menu > .current-menu-item > a::after,
.hy-menu > .current-menu-ancestor > a::after,
.hy-menu > .current_page_parent > a::after,
.hy-menu > .current-page-ancestor > a::after {
	content: "";
	order: -1;
	width: 0.35rem;
	height: 0.35rem;
	border-radius: 50%;
	background: var(--royal);
	box-shadow: 0 0 10px var(--royal);
}

.hy-menu > .menu-item-has-children > a::before {
	content: "";
	order: 2;
	width: 0.36em;
	height: 0.36em;
	margin-top: -0.2em;
	border: solid currentColor;
	border-width: 0 1.5px 1.5px 0;
	transform: rotate(45deg);
	transition: transform 0.4s var(--ease);
}

.hy-menu > .menu-item-has-children:hover > a::before,
.hy-menu > .menu-item-has-children:focus-within > a::before {
	transform: translateY(0.2em) rotate(-135deg);
}

.hy-menu .sub-menu {
	position: absolute;
	top: calc(100% + 0.9rem);
	left: 50%;
	display: grid;
	gap: 0.15rem;
	width: max-content;
	min-width: 20rem;
	padding: 0.5rem;
	border: 1px solid var(--line-2);
	border-radius: 1.25rem;
	background: #0d0f14;
	box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.9);
	counter-reset: sub;
	opacity: 0;
	visibility: hidden;
	transform: translate(-50%, 0.6rem) scale(0.98);
	transform-origin: 50% 0;
	transition: opacity 0.3s, transform 0.45s var(--ease), visibility 0s 0.3s;
}

/* Ponte invisível entre o item e o submenu, para o hover não se perder no vão. */
.hy-menu .sub-menu::before {
	content: "";
	position: absolute;
	inset: -1rem 0 100%;
}

.hy-menu > li:hover > .sub-menu,
.hy-menu > li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, 0);
	transition: opacity 0.3s, transform 0.45s var(--ease);
}

.hy-menu .sub-menu li {
	counter-increment: sub;
}

.hy-menu .sub-menu a {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	padding: 0.8rem 0.9rem;
	border-radius: 0.85rem;
	color: var(--fg-2);
	transition: background-color 0.3s, color 0.3s;
}

.hy-menu .sub-menu a::before {
	content: counter(sub, decimal-leading-zero);
	color: var(--sky);
	font-family: var(--mono);
	font-size: 0.68rem;
	letter-spacing: 0.08em;
}

.hy-menu .sub-menu a:hover,
.hy-menu .sub-menu a:focus-visible,
.hy-menu .sub-menu .current-menu-item > a {
	background: rgba(255, 255, 255, 0.07);
	color: var(--fg);
}

.hy-header__end {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.hy-burger {
	display: none;
	align-items: center;
	gap: 0.7rem;
	padding: 0.7rem 0.9rem;
	color: var(--fg);
	font-family: var(--mono);
	font-size: 0.7rem;
	font-weight: 500;
	letter-spacing: 0.11em;
	text-transform: uppercase;
}

.hy-burger__i {
	position: relative;
	width: 1.4rem;
	height: 0.5rem;
}

.hy-burger__i::before,
.hy-burger__i::after {
	content: "";
	position: absolute;
	left: 0;
	width: 100%;
	height: 1.5px;
	background: currentColor;
	transition: transform 0.5s var(--ease), top 0.5s var(--ease);
}

.hy-burger__i::before {
	top: 0;
}

.hy-burger__i::after {
	top: 100%;
}

.is-open .hy-burger__i::before {
	top: 50%;
	transform: rotate(45deg);
}

.is-open .hy-burger__i::after {
	top: 50%;
	transform: rotate(-45deg);
}

/* Menu em tela cheia (celular e tablet) */
.hy-drawer {
	position: fixed;
	inset: 0;
	z-index: 90;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 2.5rem;
	padding: 6.5rem var(--gutter) 2rem;
	overflow-y: auto;
	overscroll-behavior: contain;
	background:
		radial-gradient(60% 40% at 0% 0%, rgba(47, 91, 255, 0.22), transparent 70%),
		radial-gradient(60% 40% at 100% 100%, rgba(147, 75, 255, 0.2), transparent 70%),
		rgba(7, 8, 11, 0.97);
	-webkit-backdrop-filter: blur(20px);
	backdrop-filter: blur(20px);
	color: var(--fg);
	clip-path: circle(0% at calc(100% - 3rem) 3rem);
	visibility: hidden;
	transition: clip-path 0.8s var(--ease-io), visibility 0s 0.8s;
}

.hy-drawer.is-open {
	clip-path: circle(150% at calc(100% - 3rem) 3rem);
	visibility: visible;
	transition: clip-path 0.8s var(--ease-io);
}

.hy-drawer__menu > li {
	border-bottom: 1px solid var(--line);
	opacity: 0;
	transform: translateY(1.5rem);
	transition: opacity 0.3s, transform 0.3s;
}

.hy-drawer.is-open .hy-drawer__menu > li {
	opacity: 1;
	transform: none;
	transition: opacity 0.7s var(--ease) calc(0.3s + var(--i, 0) * 0.06s), transform 0.9s var(--ease) calc(0.3s + var(--i, 0) * 0.06s);
}

.hy-drawer__menu > li:nth-child(2) { --i: 1; }
.hy-drawer__menu > li:nth-child(3) { --i: 2; }
.hy-drawer__menu > li:nth-child(4) { --i: 3; }
.hy-drawer__menu > li:nth-child(5) { --i: 4; }
.hy-drawer__menu > li:nth-child(6) { --i: 5; }

.hy-drawer__menu > li > a {
	display: block;
	padding: 0.7rem 0;
	font-size: clamp(1.8rem, 8vw, 2.75rem);
	font-weight: 600;
	letter-spacing: -0.035em;
	line-height: 1.1;
}

.hy-drawer__menu .sub-menu {
	display: grid;
	gap: 0.1rem;
	padding: 0 0 1rem;
	counter-reset: sub;
}

.hy-drawer__menu .sub-menu li {
	counter-increment: sub;
}

.hy-drawer__menu .sub-menu a {
	display: flex;
	gap: 0.9rem;
	align-items: baseline;
	padding: 0.4rem 0;
	color: var(--fg-2);
	font-size: 1.02rem;
}

.hy-drawer__menu .sub-menu a::before {
	content: counter(sub, decimal-leading-zero);
	color: var(--sky);
	font-family: var(--mono);
	font-size: 0.68rem;
}

.hy-drawer__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem 2rem;
}

.hy-drawer__foot .hy-btn--light {
	background: var(--grad);
	box-shadow: 0 14px 40px -14px rgba(47, 91, 255, 0.85);
	color: #fff;
}

.hy-drawer__mail {
	font-family: var(--mono);
	font-size: 0.8rem;
	letter-spacing: 0.04em;
}

.hy-header.is-open .hy-header__in {
	border-color: transparent;
	background: transparent;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	box-shadow: none;
}

@media (max-width: 64rem) {
	.hy-nav {
		display: none;
	}

	.hy-burger {
		display: inline-flex;
	}
}

@media (max-width: 34rem) {
	.hy-header__cta {
		display: none;
	}
}

@media (min-width: 64.01rem) {
	.hy-drawer {
		display: none;
	}
}

/* 4. Seções ---------------------------------------------------------------- */

.hy-main {
	display: block;
}

.hy-content {
	counter-reset: sec;
}

.hy-section {
	position: relative;
	padding: var(--space) var(--pad);
}

.hy-section--tint {
	border-block: 1px solid var(--line);
	background:
		radial-gradient(50% 60% at 100% 0%, rgba(147, 75, 255, 0.09), transparent 70%),
		radial-gradient(40% 50% at 0% 100%, rgba(47, 91, 255, 0.07), transparent 70%),
		var(--bg-2);
}

.hy-section--ink {
	border-block: 1px solid var(--line);
	background:
		radial-gradient(45% 60% at 50% 0%, rgba(47, 91, 255, 0.14), transparent 70%),
		#05060a;
}

.hy-section--flush {
	padding-top: clamp(1.5rem, 4vw, 3rem);
}

.hy-section--strip {
	padding-block: 0;
	padding-inline: 0;
}

/* Cabeçalho de seção: etiqueta, título e apoio, centralizados. */
.hy-head {
	display: grid;
	justify-items: center;
	gap: 1.15rem;
	max-width: 50rem;
	margin: 0 auto clamp(2.75rem, 5vw, 4.5rem);
	text-align: center;
}

.hy-head > .hy-label {
	counter-increment: sec;
}

.hy-head > .hy-label::after {
	content: counter(sec, decimal-leading-zero);
	order: -2;
	color: var(--fg-3);
}

.hy-head > .hy-label::before {
	order: -1;
}

.hy-head__text {
	max-width: 40rem;
	color: var(--fg-2);
	font-size: clamp(1.05rem, 1rem + 0.3vw, 1.2rem);
	line-height: 1.55;
}

.hy-more {
	justify-content: center;
	margin-top: clamp(2.5rem, 5vw, 4rem);
}

/* Faixa de tecnologias: duas linhas em sentidos opostos. */
.hy-marquee-wrap {
	display: grid;
	gap: 0.75rem;
	padding-block: 1.6rem;
	overflow: hidden;
	border-block: 1px solid var(--line);
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.hy-marquee {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.75rem;
	padding: 1.6rem var(--gutter);
	color: var(--fg-2);
	font-family: var(--mono);
	font-size: 0.78rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	white-space: nowrap;
}

.hy-marquee-wrap .hy-marquee {
	flex-wrap: nowrap;
	justify-content: flex-start;
	gap: 0;
	width: max-content;
	padding: 0;
	animation: hy-marquee var(--dur, 46s) linear infinite;
}

.hy-marquee-wrap .hy-marquee--rev {
	animation-direction: reverse;
}

.hy-marquee-wrap:hover .hy-marquee {
	animation-play-state: paused;
}

.hy-marquee li {
	display: inline-flex;
	flex: none;
	align-items: center;
	gap: 0.7rem;
	padding: 0.75rem 1.15rem;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.03);
}

/* Margem (e não gap) entre os itens: o laço de -50% fecha sem salto. */
.hy-marquee-wrap .hy-marquee li {
	margin-right: 0.75rem;
}

.hy-marquee li::before {
	content: "";
	width: 0.4rem;
	height: 0.4rem;
	background: var(--royal);
	transform: rotate(45deg);
}

.hy-marquee li:nth-child(3n + 2)::before {
	background: var(--violet);
}

.hy-marquee li:nth-child(3n)::before {
	background: var(--lilac);
}

@keyframes hy-marquee {
	to { transform: translateX(-50%); }
}

/* Quem somos: declaração + números */
.hy-about {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.9fr);
	gap: clamp(2.5rem, 6vw, 6rem);
	align-items: center;
}

.hy-about__text {
	display: grid;
	gap: 1.75rem;
	justify-items: start;
}

.hy-statement__t {
	color: var(--fg);
	font-size: clamp(1.5rem, 1rem + 1.9vw, 2.5rem);
	font-weight: 500;
	letter-spacing: -0.028em;
	line-height: 1.22;
	text-wrap: pretty;
}

.hy-stats {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
}

.hy-stat {
	display: grid;
	gap: 0.6rem;
	align-content: start;
	padding: clamp(1.25rem, 2vw, 1.75rem);
}

.hy-stat b {
	font-family: var(--sans);
	font-size: clamp(2.75rem, 1.5rem + 3.4vw, 4.25rem);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.05em;
	line-height: 0.95;
}

.hy-stat span {
	color: var(--fg-2);
	font-size: 0.95rem;
	line-height: 1.4;
}

.hy-stat:nth-child(2) {
	--c: var(--violet);
}

.hy-stat:nth-child(3) {
	--c: var(--indigo);
}

@media (max-width: 58rem) {
	.hy-about {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Blocos de texto com ícone */
.hy-tiles {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
	counter-reset: tile;
}

.hy-tiles--3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.hy-tile {
	display: grid;
	align-content: start;
	gap: 0.75rem;
	padding: clamp(1.5rem, 2.2vw, 2rem);
	counter-increment: tile;
	transition: transform 0.6s var(--ease), border-color 0.4s;
}

.hy-tile:hover {
	border-color: var(--line-2);
	transform: translateY(-4px);
}

/* Ícone de cada bloco: um medalhão com o número e um traço que acende no hover. */
.hy-tile > :first-child::before {
	content: counter(tile, decimal-leading-zero);
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	margin-bottom: 1.25rem;
	border: 1px solid var(--line-2);
	border-radius: 0.9rem;
	background: linear-gradient(140deg, color-mix(in srgb, var(--c) 30%, transparent), transparent 70%);
	color: var(--fg);
	font-family: var(--mono);
	font-size: 0.78rem;
	font-weight: 500;
	letter-spacing: 0.06em;
	transition: box-shadow 0.5s, border-color 0.5s;
}

.hy-tile:hover > :first-child::before {
	border-color: color-mix(in srgb, var(--c) 70%, transparent);
	box-shadow: 0 0 30px -4px color-mix(in srgb, var(--c) 80%, transparent);
}

.hy-tile:nth-child(3n + 2) {
	--c: var(--violet);
}

.hy-tile:nth-child(3n) {
	--c: var(--indigo);
}

.hy-tile p {
	color: var(--fg-2);
	font-size: 0.98rem;
	line-height: 1.6;
}

@media (max-width: 56rem) {
	.hy-tiles,
	.hy-tiles--3 {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Duas colunas: título fixo à esquerda, conteúdo à direita */
.hy-split {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: 2rem 1.5rem;
	align-items: start;
}

.hy-split + .hy-split {
	margin-top: clamp(3.5rem, 7vw, 6rem);
	padding-top: clamp(3.5rem, 7vw, 6rem);
	border-top: 1px solid var(--line);
}

.hy-split__a {
	position: sticky;
	top: 7rem;
	display: grid;
	grid-column: 1 / span 5;
	gap: 1.25rem;
	justify-items: start;
}

.hy-split__a h2 {
	font-size: clamp(1.8rem, 1.1rem + 2.2vw, 2.9rem);
}

.hy-split__b {
	display: grid;
	grid-column: 7 / -1;
	grid-template-columns: minmax(0, 1fr);
	gap: 1.25rem;
	font-size: clamp(1.05rem, 1rem + 0.25vw, 1.15rem);
	line-height: 1.65;
}

.hy-split__b > .wp-block-buttons {
	margin-top: 0.5rem;
}

@media (max-width: 56rem) {
	.hy-split__a,
	.hy-split__b {
		position: static;
		grid-column: 1 / -1;
	}
}

/* Lista de entregas */
.hy-checks {
	display: grid;
	gap: 0.6rem;
	color: var(--fg);
}

.hy-checks li {
	position: relative;
	padding: 0.95rem 1.1rem 0.95rem 3.1rem;
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	background: rgba(255, 255, 255, 0.025);
	font-size: 1rem;
	line-height: 1.45;
	transition: border-color 0.4s, background-color 0.4s, transform 0.5s var(--ease);
}

.hy-checks li:hover {
	border-color: rgba(138, 163, 255, 0.45);
	background: rgba(72, 100, 255, 0.06);
	transform: translateX(0.3rem);
}

.hy-checks li::before {
	content: "";
	position: absolute;
	left: 1rem;
	top: 0.95rem;
	width: 1.35rem;
	height: 1.35rem;
	border-radius: 50%;
	background: var(--grad);
	box-shadow: 0 0 16px -2px rgba(86, 80, 255, 0.8);
}

.hy-checks li::after {
	content: "";
	position: absolute;
	left: 1.42rem;
	top: 1.32rem;
	width: 0.5rem;
	height: 0.28rem;
	border: solid #fff;
	border-width: 0 0 2px 2px;
	transform: rotate(-45deg);
}

/* 5. Topo da página inicial ------------------------------------------------ */

.hy-hero {
	display: grid;
	justify-items: center;
	padding-top: clamp(7.5rem, 6rem + 6vw, 10.5rem);
	padding-bottom: 0;
	overflow: clip;
	text-align: center;
}

.hy-hero::after {
	content: "";
	position: absolute;
	inset: auto 0 0;
	z-index: 3;
	height: clamp(4rem, 12vw, 10rem);
	background: linear-gradient(transparent, var(--bg));
	pointer-events: none;
}

.hy-hero__text {
	position: relative;
	z-index: 2;
	display: grid;
	justify-items: center;
	gap: 1.6rem;
	max-width: 60rem;
}

.hy-display {
	font-size: clamp(2.6rem, 1rem + 5.6vw, 5.4rem);
	font-weight: 600;
	letter-spacing: -0.042em;
	line-height: 1.02;
}

.hy-lead {
	max-width: 40rem;
	color: var(--fg-2);
	font-size: clamp(1.1rem, 1rem + 0.45vw, 1.3rem);
	line-height: 1.55;
}

.hy-hero__text > .wp-block-buttons {
	justify-content: center;
	margin-top: 0.4rem;
}

.hy-hero__caps {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem 1.75rem;
	margin-top: 0.4rem;
	color: var(--fg-3);
	font-size: 0.9rem;
}

.hy-hero__caps li {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
}

.hy-hero__caps li::before {
	content: "";
	width: 1.05rem;
	height: 1.05rem;
	background: var(--royal);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Fundo: as duas peças do símbolo viram feixes de luz (uma azul, uma roxa). */
.hy-hero__bg,
.hy-phero__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	background:
		radial-gradient(34% 40% at 6% 4%, rgba(47, 91, 255, 0.14), transparent 72%),
		radial-gradient(34% 40% at 96% 2%, rgba(147, 75, 255, 0.15), transparent 72%);
	pointer-events: none;
}

/* Escurece o centro: os feixes iluminam as bordas, o texto fica no escuro. */
.hy-hero__bg::after,
.hy-phero__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse 46% 44% at 50% 36%, rgba(7, 8, 11, 0.9), transparent 78%);
}

.hy-beam {
	position: absolute;
	top: -20%;
	width: auto;
	height: 84%;
	filter: blur(72px);
	opacity: 0.66;
	will-change: transform;
}

.hy-beam--a {
	left: -16%;
	animation: hy-drift-a 19s ease-in-out infinite alternate;
}

.hy-beam--b {
	right: -18%;
	opacity: 0.62;
	animation: hy-drift-b 23s ease-in-out infinite alternate;
}

/* A luz nasce nos cantos de cima e se apaga antes do meio da tela. */
.hy-beam__s1 {
	stop-color: var(--sky);
}

.hy-beam__s2 {
	stop-color: var(--royal);
	stop-opacity: 0.45;
}

.hy-beam__s3 {
	stop-color: var(--royal);
	stop-opacity: 0;
}

.hy-beam--b .hy-beam__s1 {
	stop-color: #c08bff;
}

.hy-beam--b .hy-beam__s2,
.hy-beam--b .hy-beam__s3 {
	stop-color: var(--violet);
}

@keyframes hy-drift-a {
	to { transform: translate(6%, 6%) rotate(6deg) scale(1.1); }
}

@keyframes hy-drift-b {
	to { transform: translate(-7%, 8%) rotate(-7deg) scale(1.12); }
}

.hy-hero__grid {
	position: absolute;
	inset: 0;
	z-index: 1;
	background-image: linear-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.055) 1px, transparent 1px);
	background-size: 4rem 4rem;
	background-position: 50% 0;
	-webkit-mask-image: radial-gradient(ellipse 75% 62% at 50% 28%, #000 12%, transparent 78%);
	mask-image: radial-gradient(ellipse 75% 62% at 50% 28%, #000 12%, transparent 78%);
}

/* A grade "acende" em volta do cursor. */
.hy-hero__grid--lit {
	background-image: linear-gradient(rgba(138, 163, 255, 0.75) 1px, transparent 1px), linear-gradient(90deg, rgba(138, 163, 255, 0.75) 1px, transparent 1px);
	-webkit-mask-image: radial-gradient(17rem circle at var(--mx, 50%) var(--my, -40%), #000, transparent 72%);
	mask-image: radial-gradient(17rem circle at var(--mx, 50%) var(--my, -40%), #000, transparent 72%);
}

.hy-dust {
	position: absolute;
	inset: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
}

/* Vitrine: um sistema web e dois aplicativos reais, em perspectiva. */
.hy-heroviz {
	width: 100%;
	margin-top: clamp(3rem, 6vw, 5rem);
}

.hy-show {
	position: relative;
	z-index: 1;
	width: min(100%, 68rem);
	margin-inline: auto;
	perspective: 1800px;
	container-type: inline-size;
}

.hy-show::before {
	content: "";
	position: absolute;
	inset: -12% -8% 8%;
	z-index: -1;
	background:
		radial-gradient(45% 55% at 30% 40%, rgba(47, 91, 255, 0.42), transparent 70%),
		radial-gradient(45% 55% at 72% 46%, rgba(147, 75, 255, 0.4), transparent 70%);
	filter: blur(30px);
}

.hy-show__tilt {
	position: relative;
	aspect-ratio: 16 / 9.1;
	transform: rotateX(calc(var(--t, 0) * 26deg)) scale(calc(1 - var(--t, 0) * 0.07));
	transform-origin: 50% 0;
	transform-style: preserve-3d;
	will-change: transform;
}

.hy-browser {
	position: absolute;
	inset: 0 8.5% auto;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 1.5cqw;
	background: #0c0e12;
	box-shadow: 0 0 0 0.6cqw rgba(255, 255, 255, 0.04), 0 4cqw 9cqw -2cqw rgba(0, 0, 0, 0.9);
}

.hy-browser__bar {
	display: flex;
	align-items: center;
	gap: 0.75cqw;
	height: 3.6cqw;
	padding-inline: 1.5cqw;
	border-bottom: 1px solid var(--line);
	background: #14171d;
}

.hy-browser__bar i {
	width: 1.05cqw;
	height: 1.05cqw;
	border-radius: 50%;
	background: #3a3f4a;
}

.hy-browser__bar i:nth-child(1) { background: #ff5f57; }
.hy-browser__bar i:nth-child(2) { background: #febc2e; }
.hy-browser__bar i:nth-child(3) { background: #28c840; }

.hy-browser__bar span {
	flex: 1;
	max-width: 40%;
	margin: 0 auto;
	padding: 0.45cqw 1.4cqw;
	border-radius: 99px;
	background: rgba(255, 255, 255, 0.06);
	color: var(--fg-3);
	font-family: var(--mono);
	font-size: max(0.5rem, 1.05cqw);
	line-height: 1;
}

.hy-browser img {
	width: 100%;
}

.hy-device {
	position: absolute;
	width: 17.5%;
	padding: 0.55cqw;
	border: 1px solid rgba(255, 255, 255, 0.28);
	border-radius: 2.9cqw;
	background: #090a0d;
	box-shadow: 0 3cqw 7cqw -1cqw rgba(0, 0, 0, 0.95), 0 0 0 0.35cqw rgba(255, 255, 255, 0.04);
}

.hy-device img {
	width: 100%;
	border-radius: 2.35cqw;
}

.hy-device--l {
	left: 0;
	bottom: 2%;
	transform: translate3d(0, calc(var(--t, 0) * 9cqw), 6cqw) rotate(-5deg);
}

.hy-device--r {
	right: 0;
	bottom: -4%;
	transform: translate3d(0, calc(var(--t, 0) * 14cqw), 9cqw) rotate(5deg);
}

/* Etiquetas flutuantes em volta da vitrine */
.hy-float {
	position: absolute;
	display: inline-flex;
	align-items: center;
	gap: 0.9cqw;
	padding: 1cqw 1.5cqw;
	border: 1px solid var(--line-2);
	border-radius: 99px;
	background: rgba(14, 17, 22, 0.82);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	box-shadow: 0 2cqw 4cqw -1.5cqw rgba(0, 0, 0, 0.9);
	color: var(--fg);
	font-family: var(--mono);
	font-size: max(0.56rem, 1.15cqw);
	font-weight: 500;
	letter-spacing: 0.04em;
	line-height: 1;
	white-space: nowrap;
	animation: hy-bob 6s ease-in-out infinite alternate;
}

@keyframes hy-bob {
	to { translate: 0 -0.9cqw; }
}

.hy-float--live {
	left: 2%;
	top: 12%;
	transform: translateZ(12cqw);
}

.hy-float--live i {
	width: 0.85cqw;
	height: 0.85cqw;
	border-radius: 50%;
	background: #3ddc84;
	box-shadow: 0 0 0 0 rgba(61, 220, 132, 0.7);
	animation: hy-ping 1.8s ease-out infinite;
}

@keyframes hy-ping {
	70% { box-shadow: 0 0 0 0.9cqw rgba(61, 220, 132, 0); }
	100% { box-shadow: 0 0 0 0 rgba(61, 220, 132, 0); }
}

.hy-float--api {
	right: 1%;
	top: 22%;
	transform: translateZ(14cqw);
	animation-duration: 7.5s;
	animation-delay: -2s;
}

.hy-float--api span {
	color: var(--lilac);
}

.hy-float--api b {
	padding: 0.3cqw 0.7cqw;
	border-radius: 0.5cqw;
	background: rgba(61, 220, 132, 0.16);
	color: #6ee7a0;
	font-weight: 500;
}

.hy-float--build {
	left: 20%;
	bottom: 6%;
	transform: translateZ(16cqw);
	animation-duration: 8s;
	animation-delay: -4s;
}

.hy-float--build small {
	color: var(--fg-3);
	font-size: 1em;
}

.hy-float--build span {
	width: 7cqw;
	height: 0.5cqw;
	overflow: hidden;
	border-radius: 99px;
	background: rgba(255, 255, 255, 0.12);
}

.hy-float--build span i {
	display: block;
	height: 100%;
	background: var(--grad);
	transform-origin: left;
	animation: hy-load 3.6s var(--ease-io) infinite;
}

@keyframes hy-load {
	0% { transform: scaleX(0); }
	70%, 100% { transform: scaleX(1); }
}

.hy-float--ux {
	right: 21%;
	bottom: 14%;
	border-radius: 0.5cqw 1.6cqw 1.6cqw 1.6cqw;
	border-color: transparent;
	background: var(--violet);
	color: #fff;
	transform: translateZ(18cqw);
	animation-duration: 6.5s;
	animation-delay: -1s;
}

.hy-float--ux svg {
	position: absolute;
	left: -1.6cqw;
	top: -1.9cqw;
	width: 2.2cqw;
	fill: var(--violet);
	stroke: #fff;
	stroke-width: 1.5;
}

@media (max-width: 40rem) {
	/* Em celulares, os feixes desfocados dão lugar ao gradiente de fundo (mais leve). */
	.hy-beam {
		display: none;
	}

	.hy-float {
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}

	.hy-browser {
		inset-inline: 4%;
	}

	.hy-device {
		width: 22%;
	}

	.hy-float--build,
	.hy-float--ux {
		display: none;
	}
}

/* 6. Serviços: grade "bento" e ilustrações animadas ------------------------- */

.hy-bento {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: 1.1rem;
}

.hy-bento__card {
	display: flex;
	flex-direction: column;
	grid-column: span 6;
	overflow: hidden;
	transition: border-color 0.4s, transform 0.7s var(--ease);
}

.hy-bento__card:nth-child(4n + 1),
.hy-bento__card:nth-child(4n) {
	grid-column: span 7;
}

.hy-bento__card:nth-child(4n + 2),
.hy-bento__card:nth-child(4n + 3) {
	grid-column: span 5;
}

.hy-bento__card:hover {
	border-color: var(--line-2);
	transform: translateY(-6px);
}

.hy-bento__card--web,
.hy-bento__card--api {
	--c: var(--violet);
}

.hy-bento__card--ux {
	--c: var(--indigo);
}

.hy-bento__art {
	position: relative;
	flex: 1;
	min-height: clamp(15rem, 12rem + 9vw, 19.5rem);
	overflow: hidden;
	border-bottom: 1px solid var(--line);
	background:
		radial-gradient(70% 90% at 50% 100%, color-mix(in srgb, var(--c) 22%, transparent), transparent 72%),
		linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px) 0 0 / 2.25rem 2.25rem,
		linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px) 0 0 / 2.25rem 2.25rem;
}

.hy-bento__body {
	position: relative;
	display: grid;
	gap: 0.6rem;
	padding: 1.6rem 4.5rem 1.8rem 1.75rem;
}

.hy-bento__n {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 0.9rem;
	color: var(--fg-3);
	font-family: var(--mono);
	font-size: 0.7rem;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}

.hy-bento__n b {
	padding: 0.3rem 0.55rem;
	border-radius: 0.5rem;
	background: color-mix(in srgb, var(--c) 20%, transparent);
	color: var(--fg);
	font-weight: 500;
}

.hy-bento__t {
	font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem);
	letter-spacing: -0.028em;
	line-height: 1.12;
}

.hy-bento__t a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 4;
}

.hy-bento__d {
	max-width: 34em;
	font-size: 0.98rem;
	line-height: 1.55;
}

.hy-bento__go {
	position: absolute;
	right: 1.5rem;
	top: 1.5rem;
	display: grid;
	place-items: center;
	width: 2.6rem;
	height: 2.6rem;
	border: 1px solid var(--line-2);
	border-radius: 50%;
	color: var(--fg);
	transition: background-color 0.45s var(--ease), color 0.45s, border-color 0.45s, transform 0.6s var(--ease);
}

.hy-bento__go .hy-ico {
	width: 1.1rem;
	height: 1.1rem;
}

.hy-bento__card:hover .hy-bento__go {
	border-color: transparent;
	background: var(--grad);
	color: #fff;
	transform: rotate(45deg);
}

@media (max-width: 58rem) {
	.hy-bento__card,
	.hy-bento__card:nth-child(n) {
		grid-column: 1 / -1;
	}
}

/* Ilustrações: cada uma ocupa todo o quadro e se mede pela altura (cqh). */
.hy-art {
	position: absolute;
	inset: 0;
	container-type: size;
}

/* -- Aplicativos: três aparelhos com telas reais; o do centro fica à frente. */
.hy-art__phone {
	position: absolute;
	top: 13cqh;
	left: 50%;
	width: auto;
	height: 112cqh;
	aspect-ratio: 421 / 912;
	padding: 1.3cqh;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.26);
	border-radius: 7.5cqh;
	background: #090a0d;
	box-shadow: 0 6cqh 14cqh -3cqh rgba(0, 0, 0, 0.9);
	transition: transform 0.9s var(--ease);
}

.hy-art__phone img {
	width: 100%;
	border-radius: 6.2cqh;
}

.hy-art__phone--c {
	z-index: 2;
	transform: translateX(-50%);
}

.hy-art__phone--l {
	top: 30cqh;
	height: 96cqh;
	opacity: 0.85;
	transform: translateX(-152%) rotate(-9deg);
}

.hy-art__phone--r {
	top: 30cqh;
	height: 96cqh;
	opacity: 0.85;
	transform: translateX(52%) rotate(9deg);
}

.hy-bento__card:hover .hy-art__phone--l,
.hy-phero__panel:hover .hy-art__phone--l {
	transform: translateX(-166%) rotate(-13deg);
}

.hy-bento__card:hover .hy-art__phone--r,
.hy-phero__panel:hover .hy-art__phone--r {
	transform: translateX(66%) rotate(13deg);
}

/* A tela do centro fica parada: a captura tem a proporção da tela do aparelho, e rolar
   a imagem só deixava uma faixa vazia embaixo. */
.hy-art__screen {
	height: 100%;
	overflow: hidden;
	border-radius: 6.2cqh;
}

.hy-art__screen img {
	height: 100%;
	object-fit: cover;
	object-position: top;
	border-radius: 0;
}

.hy-art__island {
	position: absolute;
	top: 3.2cqh;
	left: 50%;
	z-index: 3;
	width: 30%;
	height: 3.4cqh;
	border-radius: 99px;
	background: #050608;
	transform: translateX(-50%);
}

.hy-art__chip {
	position: absolute;
	z-index: 3;
	padding: 2.2cqh 3.4cqh;
	border: 1px solid var(--line-2);
	border-radius: 99px;
	background: rgba(14, 17, 22, 0.85);
	color: var(--fg);
	font-family: var(--mono);
	font-size: max(0.6rem, 4.2cqh);
	letter-spacing: 0.06em;
	line-height: 1;
	animation: hy-bob-s 5s ease-in-out infinite alternate;
}

@keyframes hy-bob-s {
	to { translate: 0 -3cqh; }
}

.hy-art__chip--ios {
	left: 8%;
	top: 14cqh;
}

.hy-art__chip--and {
	right: 8%;
	top: 22cqh;
	animation-delay: -2.5s;
}

.hy-art__toast {
	position: absolute;
	right: 6%;
	bottom: 12cqh;
	z-index: 4;
	display: flex;
	align-items: center;
	gap: 3cqh;
	padding: 3cqh 4cqh;
	border: 1px solid var(--line-2);
	border-radius: 4cqh;
	background: rgba(20, 24, 31, 0.92);
	box-shadow: 0 6cqh 12cqh -4cqh rgba(0, 0, 0, 0.9);
	animation: hy-toast 7s var(--ease) infinite;
}

.hy-art__toast i {
	width: 7cqh;
	height: 7cqh;
	border-radius: 2cqh;
	background: var(--grad);
}

.hy-art__toast span {
	display: grid;
	gap: 1cqh;
	line-height: 1;
}

.hy-art__toast b {
	color: var(--fg);
	font-size: max(0.62rem, 4.2cqh);
	font-weight: 600;
}

.hy-art__toast small {
	color: var(--fg-3);
	font-size: max(0.55rem, 3.4cqh);
}

@keyframes hy-toast {
	0%, 8% { opacity: 0; transform: translateY(8cqh) scale(0.94); }
	16%, 72% { opacity: 1; transform: none; }
	82%, 100% { opacity: 0; transform: translateY(-6cqh) scale(0.96); }
}

/* -- Sistemas web: painel real com relatórios que se desenham. */
.hy-art__win {
	position: absolute;
	inset: 13cqh 9% auto;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 4cqh;
	background: #0c0e12;
	box-shadow: 0 8cqh 16cqh -4cqh rgba(0, 0, 0, 0.9);
	transition: transform 0.9s var(--ease);
}

.hy-bento__card:hover .hy-art__win,
.hy-phero__panel:hover .hy-art__win {
	transform: translateY(-3cqh) scale(1.015);
}

.hy-art__bar {
	display: flex;
	align-items: center;
	gap: 1.6cqh;
	height: 8cqh;
	padding-inline: 3.5cqh;
	border-bottom: 1px solid var(--line);
	background: #14171d;
}

.hy-art__bar i {
	width: 2.2cqh;
	height: 2.2cqh;
	border-radius: 50%;
	background: #3a3f4a;
}

.hy-art__bar span {
	flex: 1;
	max-width: 36%;
	height: 3.4cqh;
	margin: 0 auto;
	border-radius: 99px;
	background: rgba(255, 255, 255, 0.07);
}

.hy-art__win img {
	width: 100%;
}

.hy-art__panel {
	position: absolute;
	z-index: 2;
	display: grid;
	gap: 2cqh;
	padding: 4cqh;
	border: 1px solid var(--line-2);
	border-radius: 4cqh;
	background: rgba(16, 19, 25, 0.9);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	box-shadow: 0 6cqh 14cqh -4cqh rgba(0, 0, 0, 0.95);
	line-height: 1;
	animation: hy-bob-s 6s ease-in-out infinite alternate;
}

.hy-art__panel small {
	color: var(--fg-3);
	font-family: var(--mono);
	font-size: max(0.55rem, 3.4cqh);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.hy-art__panel b {
	color: var(--fg);
	font-size: max(0.7rem, 5cqh);
	font-weight: 600;
	white-space: nowrap;
}

.hy-art__panel--chart {
	right: 4%;
	bottom: 9cqh;
	width: 34cqh;
}

.hy-art__bars {
	display: flex;
	align-items: flex-end;
	gap: 1.6cqh;
	height: 20cqh;
}

.hy-art__bars i {
	flex: 1;
	border-radius: 1cqh 1cqh 0 0;
	background: linear-gradient(var(--violet), rgba(147, 75, 255, 0.25));
	transform-origin: bottom;
	animation: hy-bar 3.8s var(--ease-io) infinite alternate;
}

.hy-art__bars i:nth-child(1) { height: 38%; animation-delay: -0.3s; }
.hy-art__bars i:nth-child(2) { height: 62%; animation-delay: -1.1s; }
.hy-art__bars i:nth-child(3) { height: 48%; animation-delay: -2s; }
.hy-art__bars i:nth-child(4) { height: 84%; animation-delay: -0.7s; background: var(--grad); }
.hy-art__bars i:nth-child(5) { height: 58%; animation-delay: -1.7s; }
.hy-art__bars i:nth-child(6) { height: 74%; animation-delay: -2.6s; }
.hy-art__bars i:nth-child(7) { height: 96%; animation-delay: -1.3s; }

@keyframes hy-bar {
	from { transform: scaleY(0.55); }
	to { transform: scaleY(1); }
}

/* A largura acompanha o texto: com largura fixa, "automatizados" saía do quadro. */
.hy-art__panel--kpi {
	left: 4%;
	bottom: 16cqh;
	width: max-content;
	min-width: 36cqh;
	animation-delay: -3s;
}

.hy-art__panel--kpi svg {
	width: 100%;
	height: 9cqh;
	overflow: visible;
}

.hy-art__panel--kpi polyline {
	fill: none;
	stroke: var(--sky);
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-dasharray: 1;
	vector-effect: non-scaling-stroke;
	animation: hy-draw 4.5s var(--ease-io) infinite;
}

@keyframes hy-draw {
	0% { stroke-dashoffset: 1; }
	55%, 100% { stroke-dashoffset: 0; }
}

.hy-art__cursor {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 3;
	width: 6.5cqh;
	fill: #fff;
	stroke: #0a0b0e;
	stroke-width: 1.5;
	stroke-linejoin: round;
	animation: hy-roam 9s var(--ease-io) infinite;
}

@keyframes hy-roam {
	0%, 100% { translate: 40cqw 30cqh; }
	30% { translate: 62cqw 58cqh; }
	55% { translate: 26cqw 66cqh; }
	80% { translate: 52cqw 42cqh; }
}

/* -- APIs: um hub central com pacotes viajando pelas conexões. */
.hy-art__net {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.hy-art__net path {
	fill: none;
	stroke: rgba(255, 255, 255, 0.18);
	stroke-width: 1.2;
	stroke-dasharray: 4 5;
	vector-effect: non-scaling-stroke;
	animation: hy-dash 1.2s linear infinite;
}

@keyframes hy-dash {
	to { stroke-dashoffset: -9; }
}

.hy-art__net circle {
	fill: var(--lilac);
	filter: drop-shadow(0 0 6px var(--royal));
}

.hy-art__net circle:nth-of-type(even) {
	fill: var(--sky);
	filter: drop-shadow(0 0 6px var(--violet));
}

.hy-art__node {
	position: absolute;
	padding: 2.4cqh 3.6cqh;
	border: 1px solid var(--line-2);
	border-radius: 99px;
	background: rgba(14, 17, 22, 0.9);
	color: var(--fg);
	font-family: var(--mono);
	font-size: max(0.58rem, 3.9cqh);
	letter-spacing: 0.05em;
	line-height: 1;
	white-space: nowrap;
	transform: translate(-50%, -50%);
}

.hy-art__node--1 { left: 17%; top: 21%; }
.hy-art__node--2 { left: 83%; top: 21%; }
.hy-art__node--3 { left: 17%; top: 79%; }
.hy-art__node--4 { left: 83%; top: 79%; }

.hy-art__hub {
	position: absolute;
	left: 50%;
	top: 50%;
	display: grid;
	place-items: center;
	width: 26cqh;
	height: 26cqh;
	border-radius: 28%;
	background: var(--grad);
	box-shadow: 0 0 12cqh -2cqh rgba(86, 80, 255, 0.9);
	transform: translate(-50%, -50%) rotate(45deg);
	transition: transform 0.9s var(--ease);
}

.hy-bento__card:hover .hy-art__hub,
.hy-phero__panel:hover .hy-art__hub {
	transform: translate(-50%, -50%) rotate(135deg) scale(1.08);
}

.hy-art__hub b {
	color: #fff;
	font-family: var(--mono);
	font-size: max(0.7rem, 6cqh);
	font-weight: 500;
	letter-spacing: 0.04em;
	transform: rotate(-45deg);
	transition: transform 0.9s var(--ease);
}

.hy-bento__card:hover .hy-art__hub b,
.hy-phero__panel:hover .hy-art__hub b {
	transform: rotate(-135deg);
}

.hy-art__hub i {
	position: absolute;
	inset: -5cqh;
	border: 1px solid rgba(138, 163, 255, 0.55);
	border-radius: 30%;
	animation: hy-ring 3s ease-out infinite;
}

.hy-art__hub i + i {
	animation-delay: -1.5s;
}

@keyframes hy-ring {
	from { opacity: 0.9; transform: scale(0.8); }
	to { opacity: 0; transform: scale(1.7); }
}

.hy-art__term {
	position: absolute;
	left: 50%;
	bottom: 5cqh;
	display: inline-flex;
	gap: 2.5cqh;
	align-items: center;
	padding: 2.4cqh 4cqh;
	border: 1px solid var(--line-2);
	border-radius: 2.5cqh;
	background: rgba(8, 9, 12, 0.92);
	color: var(--fg-2);
	font-family: var(--mono);
	font-size: max(0.56rem, 3.7cqh);
	line-height: 1;
	white-space: nowrap;
	transform: translateX(-50%);
}

.hy-art__term span {
	color: var(--lilac);
}

.hy-art__term b {
	color: #6ee7a0;
	font-weight: 500;
}

.hy-art__term i {
	color: var(--fg-3);
	font-style: normal;
}

@media (max-width: 30rem) {
	.hy-art__node--3,
	.hy-art__node--4 {
		top: 66%;
	}
}

/* -- UX/UI: uma prancheta de design em andamento. */
.hy-art__frame {
	position: absolute;
	left: 50%;
	top: 12cqh;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	align-content: start;
	gap: 3cqh;
	width: 46cqh;
	height: 100cqh;
	padding: 5cqh 4cqh;
	border: 1px solid rgba(255, 255, 255, 0.24);
	border-radius: 6cqh;
	background: #0c0e12;
	box-shadow: 0 8cqh 16cqh -4cqh rgba(0, 0, 0, 0.9);
	transform: translateX(-50%);
}

.hy-art__frame .k {
	display: block;
	border-radius: 2cqh;
	background: rgba(255, 255, 255, 0.1);
}

.hy-art__frame .k1 {
	grid-column: 1 / -1;
	width: 55%;
	height: 4cqh;
	background: rgba(255, 255, 255, 0.5);
}

.hy-art__frame .k2 {
	grid-column: 1 / -1;
	height: 26cqh;
	background: var(--grad);
	animation: hy-hue 8s ease-in-out infinite alternate;
}

@keyframes hy-hue {
	to { filter: hue-rotate(-28deg) saturate(1.15); }
}

.hy-art__frame .k3,
.hy-art__frame .k4 {
	height: 14cqh;
}

.hy-art__frame .k5 {
	grid-column: 1 / -1;
	height: 9cqh;
	border-radius: 99px;
	background: rgba(255, 255, 255, 0.85);
}

/* Caixa de seleção que percorre os elementos, como no Figma. */
.hy-art__sel {
	position: absolute;
	inset: 12cqh 3cqh auto;
	height: 28cqh;
	border: 1.5px solid var(--violet);
	border-radius: 1cqh;
	animation: hy-select 9s var(--ease-io) infinite;
}

.hy-art__sel i {
	position: absolute;
	width: 2.6cqh;
	height: 2.6cqh;
	border: 1.5px solid var(--violet);
	background: #fff;
}

.hy-art__sel i:nth-child(1) { left: -1.4cqh; top: -1.4cqh; }
.hy-art__sel i:nth-child(2) { right: -1.4cqh; top: -1.4cqh; }
.hy-art__sel i:nth-child(3) { left: -1.4cqh; bottom: -1.4cqh; }
.hy-art__sel i:nth-child(4) { right: -1.4cqh; bottom: -1.4cqh; }

@keyframes hy-select {
	0%, 28% { inset: 12cqh 3cqh auto; height: 28cqh; }
	36%, 62% { inset: 43cqh 51% auto 3cqh; height: 16cqh; }
	70%, 92% { inset: 62cqh 3cqh auto; height: 11cqh; }
	100% { inset: 12cqh 3cqh auto; height: 28cqh; }
}

.hy-art__pen {
	position: absolute;
	right: 4%;
	top: 16cqh;
	width: 34%;
	overflow: visible;
}

.hy-art__pen path {
	fill: none;
	stroke: var(--lilac);
	stroke-width: 2;
	stroke-linecap: round;
	stroke-dasharray: 1;
	vector-effect: non-scaling-stroke;
	animation: hy-draw 6s var(--ease-io) infinite;
}

.hy-art__pen circle {
	fill: #0c0e12;
	stroke: var(--lilac);
	stroke-width: 2;
	vector-effect: non-scaling-stroke;
}

.hy-art__layers {
	position: absolute;
	left: 4%;
	top: 20cqh;
	display: grid;
	gap: 2.4cqh;
	width: 30cqh;
	padding: 4cqh;
	border: 1px solid var(--line-2);
	border-radius: 3.5cqh;
	background: rgba(16, 19, 25, 0.9);
}

.hy-art__layers small {
	color: var(--fg-3);
	font-family: var(--mono);
	font-size: max(0.55rem, 3.2cqh);
	letter-spacing: 0.08em;
	line-height: 1;
	text-transform: uppercase;
}

.hy-art__layers b {
	height: 3cqh;
	border-radius: 99px;
	background: rgba(255, 255, 255, 0.14);
}

.hy-art__layers b:nth-of-type(2) {
	width: 70%;
	background: var(--violet);
}

.hy-art__layers b:nth-of-type(3) { width: 85%; }
.hy-art__layers b:nth-of-type(4) { width: 55%; }

.hy-art__swatches {
	position: absolute;
	right: 6%;
	bottom: 10cqh;
	display: flex;
	gap: 2cqh;
	padding: 3cqh;
	border: 1px solid var(--line-2);
	border-radius: 99px;
	background: rgba(16, 19, 25, 0.9);
}

.hy-art__swatches i {
	width: 7cqh;
	height: 7cqh;
	border-radius: 50%;
	background: var(--royal);
}

.hy-art__swatches i:nth-child(2) { background: var(--lilac); }
.hy-art__swatches i:nth-child(3) { background: var(--violet); }
.hy-art__swatches i:nth-child(4) { background: #f4f5f7; }

.hy-art__who {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 3;
	animation: hy-roam-ux 9s var(--ease-io) infinite;
}

.hy-art__who svg {
	width: 6cqh;
	fill: var(--royal);
	stroke: #fff;
	stroke-width: 1.5;
	stroke-linejoin: round;
}

.hy-art__who span {
	display: block;
	margin: -1cqh 0 0 5cqh;
	padding: 1.6cqh 3cqh;
	border-radius: 1cqh 3cqh 3cqh 3cqh;
	background: var(--royal);
	color: #fff;
	font-size: max(0.56rem, 3.4cqh);
	font-weight: 600;
	line-height: 1;
}

@keyframes hy-roam-ux {
	0%, 28% { translate: 58cqw 36cqh; }
	36%, 62% { translate: 47cqw 56cqh; }
	70%, 92% { translate: 60cqw 72cqh; }
	100% { translate: 58cqw 36cqh; }
}

/* 7. Projetos -------------------------------------------------------------- */

/* Pilha: cada case é um painel que "gruda" no topo; o seguinte desliza por cima. */
.hy-stack {
	display: grid;
	gap: 1.5rem;
}

.hy-proj {
	position: sticky;
	top: calc(6.25rem + var(--i, 0) * 0.9rem);
	display: grid;
	grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
	min-height: min(34rem, 74svh);
	overflow: hidden;
	border: 1px solid var(--line-2);
	border-radius: 1.9rem;
	background:
		radial-gradient(80% 110% at 100% 0%, color-mix(in srgb, var(--c) 42%, transparent), transparent 62%),
		radial-gradient(60% 80% at 0% 100%, color-mix(in srgb, var(--c) 14%, transparent), transparent 70%),
		#0d0f14;
	box-shadow: 0 -18px 50px -30px rgba(0, 0, 0, 0.9);
	transform: scale(var(--s, 1));
	transform-origin: 50% 0;
	isolation: isolate;
}

/* Escurece o painel que ficou por baixo. */
.hy-proj::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 5;
	background: #07080b;
	opacity: var(--o, 0);
	pointer-events: none;
}

.hy-proj__body {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.9rem;
	padding: clamp(1.75rem, 3.4vw, 3.25rem);
}

.hy-proj__n {
	margin-bottom: auto;
	color: var(--fg-3);
	font-family: var(--mono);
	font-size: 0.78rem;
	letter-spacing: 0.08em;
}

.hy-proj__n b {
	color: var(--c);
	font-weight: 500;
}

.hy-proj__meta,
.hy-pcard__meta {
	color: var(--fg-2);
	font-family: var(--mono);
	font-size: 0.7rem;
	font-weight: 500;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}

.hy-proj__t {
	font-size: clamp(2.3rem, 1.2rem + 3.6vw, 4.25rem);
	letter-spacing: -0.045em;
	line-height: 1;
}

.hy-proj__t a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 4;
}

.hy-proj__d {
	max-width: 30em;
	font-size: 1.05rem;
	line-height: 1.55;
}

.hy-proj__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin-top: 0.4rem;
}

.hy-proj__tags li,
.hy-pills li {
	padding: 0.5rem 0.85rem;
	border: 1px solid var(--line-2);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.04);
	color: var(--fg);
	font-family: var(--mono);
	font-size: 0.68rem;
	letter-spacing: 0.07em;
	line-height: 1;
	text-transform: uppercase;
}

.hy-proj__go {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	margin-top: 1.25rem;
	padding: 0.85rem 1.2rem;
	border-radius: 999px;
	background: #fff;
	color: #0a0b0e;
	font-size: 0.92rem;
	font-weight: 600;
	line-height: 1;
	transition: transform 0.6s var(--ease), background-color 0.4s;
}

.hy-proj__go .hy-ico {
	width: 1rem;
	height: 1rem;
	transition: transform 0.6s var(--ease);
}

.hy-proj:hover .hy-proj__go {
	background: var(--c);
	transform: translateX(0.4rem);
}

.hy-proj:hover .hy-proj__go .hy-ico {
	transform: rotate(45deg);
}

.hy-proj__media {
	position: relative;
	margin: clamp(0.75rem, 1.4vw, 1.25rem);
	overflow: hidden;
	border-radius: 1.3rem;
	background: color-mix(in srgb, var(--c) 16%, #0a0b0e);
	view-transition-class: hy-morph;
}

.hy-proj__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1.4s var(--ease);
}

.hy-proj__media--contain img {
	padding: 3%;
	object-fit: contain;
}

.hy-proj:hover .hy-proj__media img {
	transform: scale(1.05);
}

@media (max-width: 56rem) {
	.hy-proj {
		position: relative;
		top: auto;
		grid-template-columns: minmax(0, 1fr);
		transform: none;
	}

	.hy-proj::after {
		display: none;
	}

	.hy-proj__media {
		order: -1;
		aspect-ratio: 4 / 3;
	}

	.hy-proj__n {
		margin-bottom: 0.25rem;
	}
}

/* Grade de cartões (arquivo de projetos, serviços, sobre) */
.hy-cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.1rem;
}

.hy-pcard {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	transition: border-color 0.4s, transform 0.7s var(--ease);
}

.hy-pcard:hover {
	border-color: var(--line-2);
	transform: translateY(-6px);
}

.hy-pcard__media {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background:
		radial-gradient(80% 90% at 50% 100%, color-mix(in srgb, var(--c) 45%, transparent), transparent 70%),
		#0b0d11;
	view-transition-class: hy-morph;
}

.hy-pcard__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1.2s var(--ease);
}

.hy-pcard__media--contain img {
	padding: 5%;
	object-fit: contain;
}

.hy-pcard:hover .hy-pcard__media img {
	transform: scale(1.06);
}

.hy-pcard__body {
	position: relative;
	display: grid;
	gap: 0.5rem;
	padding: 1.4rem 4rem 1.6rem 1.5rem;
	border-top: 1px solid var(--line);
}

.hy-pcard__t {
	font-size: clamp(1.4rem, 1.15rem + 0.8vw, 1.8rem);
	letter-spacing: -0.03em;
}

.hy-pcard__t a::after {
	content: "";
	position: absolute;
	inset: -100vh 0 0;
	z-index: 4;
}

.hy-pcard__d {
	font-size: 0.95rem;
	line-height: 1.5;
}

.hy-pcard__go {
	position: absolute;
	right: 1.25rem;
	top: 1.25rem;
	display: grid;
	place-items: center;
	width: 2.4rem;
	height: 2.4rem;
	border: 1px solid var(--line-2);
	border-radius: 50%;
	color: var(--fg);
	transition: background-color 0.45s, color 0.45s, border-color 0.45s, transform 0.6s var(--ease);
}

.hy-pcard__go .hy-ico {
	width: 1rem;
	height: 1rem;
}

.hy-pcard:hover .hy-pcard__go {
	border-color: transparent;
	background: var(--c);
	color: #0a0b0e;
	transform: rotate(45deg);
}

.hy-pcard.is-filtered {
	display: none;
}

@media (max-width: 64rem) {
	.hy-cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 40rem) {
	.hy-cards {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Filtros */
.hy-filters {
	margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
}

.hy-filters ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.hy-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	padding: 0.75em 1.15em;
	border: 1px solid var(--line-2);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.03);
	color: var(--fg-2);
	font-size: 0.9rem;
	font-weight: 500;
	line-height: 1;
	transition: background-color 0.35s, color 0.35s, border-color 0.35s, box-shadow 0.35s;
}

.hy-chip sup {
	color: var(--fg-3);
	font-family: var(--mono);
	font-size: 0.64rem;
	vertical-align: 0.5em;
}

.hy-chip:hover {
	border-color: rgba(255, 255, 255, 0.4);
	color: var(--fg);
}

.hy-chip.is-active {
	border-color: transparent;
	background: var(--grad);
	box-shadow: 0 10px 30px -12px rgba(47, 91, 255, 0.9);
	color: #fff;
}

.hy-chip.is-active sup {
	color: rgba(255, 255, 255, 0.82);
}

/* Rótulo que acompanha o cursor sobre os projetos */
.hy-cursor {
	position: fixed;
	left: 0;
	top: 0;
	z-index: 80;
	display: grid;
	place-items: center;
	width: 6rem;
	height: 6rem;
	margin: -3rem 0 0 -3rem;
	border-radius: 50%;
	background: var(--grad);
	box-shadow: 0 0 60px -6px rgba(86, 80, 255, 0.9);
	color: #fff;
	font-family: var(--mono);
	font-size: 0.64rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	pointer-events: none;
	scale: 0;
	transition: scale 0.5s var(--ease);
}

.hy-cursor.is-on {
	scale: 1;
}

/* 8. Cena do processo ------------------------------------------------------ */

.hy-section--scene::before {
	content: "";
	position: absolute;
	inset: 10% auto 10% 0;
	width: 50%;
	background: radial-gradient(60% 50% at 20% 50%, rgba(47, 91, 255, 0.13), transparent 72%);
	pointer-events: none;
}

.hy-scene {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
	gap: clamp(2rem, 5vw, 5rem);
	align-items: start;
}

.hy-scene > .hy-pv {
	position: sticky;
	top: max(6.5rem, calc(50svh - 17rem));
}

/* Linha do tempo. Os números ficam centrados no trilho, que começa no primeiro e termina
   no último; a parte acesa para exatamente no número da etapa ativa.
   (--ra, --rb e --p vêm do JavaScript; sem ele o trilho ocupa a altura toda.) */
.hy-steps {
	--dot: 2rem;
	--rail: 3.4rem;
	position: relative;
	display: grid;
	gap: clamp(1rem, 4svh, 2.25rem);
	padding: 4svh 0 14svh var(--rail);
	counter-reset: step;
}

.hy-steps::before,
.hy-steps::after {
	content: "";
	position: absolute;
	left: calc(var(--dot) / 2 - 1px);
	top: var(--ra, 0px);
	bottom: var(--rb, 0px);
	width: 2px;
	border-radius: 2px;
	background: var(--line-2);
}

.hy-steps::after {
	background: linear-gradient(var(--royal), var(--violet));
	box-shadow: 0 0 18px rgba(86, 80, 255, 0.8);
	transform: scaleY(var(--p, 0));
	transform-origin: top;
	transition: transform 0.9s var(--ease);
}

.hy-step {
	--pad: clamp(1.4rem, 2.2vw, 1.9rem);
	display: grid;
	gap: 0.7rem;
	padding: var(--pad);
	counter-increment: step;
	transition: border-color 0.6s, background-color 0.6s, box-shadow 0.6s;
}

/* O destaque fica no conteúdo, não no cartão inteiro: assim o número nunca esmaece
   nem deixa a linha aparecer por trás dele. */
.hy-step > * {
	opacity: 0.62;
	transition: opacity 0.6s;
}

/* O número da etapa, centrado sobre o trilho e alinhado ao título. */
.hy-step::before {
	content: counter(step, decimal-leading-zero);
	position: absolute;
	left: calc(-1 * var(--rail) - 1px); /* 1px: a borda do cartão */
	top: calc(var(--pad) - 0.18rem);
	z-index: 1;
	display: grid;
	place-items: center;
	width: var(--dot);
	height: var(--dot);
	border: 1px solid var(--line-2);
	border-radius: 50%;
	background: var(--bg);
	color: var(--fg-2);
	font-family: var(--mono);
	font-size: 0.68rem;
	font-weight: 500;
	line-height: 1;
	transition: background-color 0.5s, color 0.5s, border-color 0.5s, box-shadow 0.5s, scale 0.6s var(--ease);
}

.hy-step.is-active {
	border-color: rgba(138, 163, 255, 0.55);
	background: linear-gradient(180deg, rgba(72, 100, 255, 0.12), rgba(255, 255, 255, 0.02));
	box-shadow: 0 30px 70px -40px rgba(47, 91, 255, 0.9);
}

.hy-step.is-active > * {
	opacity: 1;
}

.hy-step.is-past > * {
	opacity: 0.82;
}

.hy-step.is-active::before,
.hy-step.is-past::before {
	border-color: transparent;
	background: var(--grad);
	box-shadow: 0 0 20px rgba(86, 80, 255, 0.85);
	color: #fff;
}

.hy-step.is-active::before {
	scale: 1.12;
}

.hy-step :is(h2, h3) {
	font-size: clamp(1.25rem, 1.05rem + 0.7vw, 1.6rem);
	letter-spacing: -0.025em;
	line-height: 1.15;
}

.hy-step p {
	font-size: 1rem;
	line-height: 1.6;
}

.hy-step .hy-checks {
	margin-top: 0.5rem;
}

.hy-step .hy-checks li {
	padding-block: 0.7rem;
	font-size: 0.93rem;
}

.hy-step .hy-checks li::before {
	top: 0.7rem;
}

.hy-step .hy-checks li::after {
	top: 1.07rem;
}

/* Sem JavaScript todas as etapas ficam legíveis. */
html:not(.hy-js) .hy-step > * {
	opacity: 1;
}

@media (max-width: 62rem) {
	.hy-scene {
		grid-template-columns: minmax(0, 1fr);
		gap: 1.75rem;
	}

	/* Em telas estreitas a ilustração não fica presa ao topo (ela cobriria o texto):
	   abre a seção, conta a história sozinha e as etapas rolam livres, todas legíveis. */
	.hy-scene > .hy-pv {
		position: relative;
		top: auto;
		width: min(100%, 26rem);
		margin-inline: auto;
	}

	.hy-steps {
		--dot: 1.85rem;
		--rail: 2.7rem;
		gap: 1rem;
		padding-block: 0.25rem 0.5rem;
	}

	.hy-step > *,
	.hy-step.is-past > * {
		opacity: 1;
	}
}

/* A ilustração: o produto evolui conforme a etapa ativa.
   0 ideia · 1 protótipo · 2 desenvolvimento · 3 testes · 4 no ar · 5 evolução */
.hy-pv {
	overflow: hidden;
	background: linear-gradient(180deg, #11141a, #0b0d11);
	box-shadow: 0 40px 90px -40px #000;
	container-type: inline-size;
}

.hy-pv__top {
	display: flex;
	align-items: center;
	gap: 2.6cqw;
	height: 9cqw;
	padding-inline: 3.4cqw;
	border-bottom: 1px solid var(--line);
	background: rgba(255, 255, 255, 0.03);
}

.hy-pv__dots {
	display: flex;
	gap: 1.2cqw;
}

.hy-pv__dots i {
	width: 1.9cqw;
	height: 1.9cqw;
	border-radius: 50%;
	background: #3a3f4a;
}

.hy-pv__label {
	color: var(--fg);
	font-family: var(--mono);
	font-size: max(0.62rem, 2.5cqw);
	letter-spacing: 0.1em;
	line-height: 1;
	text-transform: uppercase;
}

.hy-pv__label::before {
	content: "";
	display: inline-block;
	width: 1.5cqw;
	height: 1.5cqw;
	margin-right: 1.6cqw;
	border-radius: 50%;
	background: var(--royal);
	box-shadow: 0 0 10px var(--royal);
}

.hy-pv__meter {
	flex: 1;
	max-width: 28cqw;
	height: 0.9cqw;
	margin-left: auto;
	overflow: hidden;
	border-radius: 99px;
	background: rgba(255, 255, 255, 0.1);
}

.hy-pv__meter i {
	display: block;
	height: 100%;
	background: var(--grad);
	transform: scaleX(calc((var(--st, 4) + 1) / 6));
	transform-origin: left;
	transition: transform 0.9s var(--ease);
}

.hy-pv[data-state="0"] { --st: 0; }
.hy-pv[data-state="1"] { --st: 1; }
.hy-pv[data-state="2"] { --st: 2; }
.hy-pv[data-state="3"] { --st: 3; }
.hy-pv[data-state="4"] { --st: 4; }
.hy-pv[data-state="5"] { --st: 5; }

.hy-pv__stage {
	position: relative;
	aspect-ratio: 1 / 0.86;
}

.hy-pv__grid {
	position: absolute;
	inset: 0;
	background-image: linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
	background-size: 6cqw 6cqw;
	-webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 45%, #000 30%, transparent 100%);
	mask-image: radial-gradient(ellipse 70% 70% at 50% 45%, #000 30%, transparent 100%);
	transition: opacity 0.8s;
}

.hy-pv:is([data-state="4"], [data-state="5"]) .hy-pv__grid {
	opacity: 0.4;
}

.hy-pv__win,
.hy-pv__phone {
	position: absolute;
	border: 1px solid rgba(255, 255, 255, 0.7);
	background: #0c0e12;
	transition: border-color 0.6s, box-shadow 0.8s var(--ease), transform 1s var(--ease);
}

.hy-pv__win {
	left: 6%;
	top: 14%;
	display: flex;
	flex-direction: column;
	width: 70%;
	height: 62%;
	overflow: hidden;
	border-radius: 2cqw;
}

.hy-pv__bar {
	display: flex;
	flex: none;
	align-items: center;
	gap: 1.1cqw;
	height: 5.6cqw;
	padding-inline: 2.2cqw;
	border-bottom: 1px solid rgba(255, 255, 255, 0.35);
}

.hy-pv__bar i {
	width: 1.4cqw;
	height: 1.4cqw;
	border: 1px solid rgba(255, 255, 255, 0.7);
	border-radius: 50%;
}

.hy-pv__bar span {
	flex: 1;
	height: 2.3cqw;
	margin-left: 1.6cqw;
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: 99px;
}

.hy-pv__cols {
	display: grid;
	flex: 1;
	grid-template-columns: 24% 1fr;
	min-height: 0;
}

.hy-pv__side {
	display: flex;
	flex-direction: column;
	gap: 2.1cqw;
	padding: 2.8cqw 2.2cqw;
	border-right: 1px solid rgba(255, 255, 255, 0.3);
}

.hy-pv__side .ui {
	height: 1.8cqw;
}

.hy-pv__side .ui:nth-child(1) { width: 64%; margin-bottom: 1.2cqw; }
.hy-pv__side .ui:nth-child(3) { width: 78%; }
.hy-pv__side .ui:nth-child(4) { width: 90%; }

.hy-pv__main {
	display: flex;
	flex-direction: column;
	gap: 2.2cqw;
	min-height: 0;
	padding: 2.8cqw 15cqw 2.8cqw 2.8cqw;
}

.hy-pv__main .ui--title {
	width: 48%;
	height: 2.7cqw;
}

.hy-pv__kpis {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5cqw;
}

.hy-pv__kpis .ui {
	height: 8cqw;
}

.hy-pv__main .ui--chart {
	flex: 1;
	min-height: 8cqw;
	padding: 1.4cqw;
}

.hy-pv__main .ui--chart svg {
	width: 100%;
	height: 100%;
	overflow: visible;
}

.hy-pv__main .ui--chart polyline {
	fill: none;
	stroke: var(--lilac);
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
	vector-effect: non-scaling-stroke;
	transition: stroke-dashoffset 1.4s var(--ease-io) 0.3s;
}

.hy-pv__main .ui--row {
	height: 1.8cqw;
}

.hy-pv__phone {
	right: 8%;
	bottom: 9%;
	width: 29%;
	aspect-ratio: 9 / 18.4;
	padding: 1.3cqw;
	border-radius: 4.8cqw;
	outline: 1.2cqw solid #0b0d11;
}

.hy-pv__island {
	position: absolute;
	top: 2.5cqw;
	left: 50%;
	width: 30%;
	height: 1.9cqw;
	border: 1px solid rgba(255, 255, 255, 0.7);
	border-radius: 99px;
	background: #050608;
	transform: translateX(-50%);
}

.hy-pv__screen {
	display: flex;
	flex-direction: column;
	gap: 1.5cqw;
	height: 100%;
	padding: 6cqw 1.5cqw 1.5cqw;
	overflow: hidden;
	border-radius: 3.6cqw;
}

.hy-pv__screen .ui--bar { width: 48%; height: 2.2cqw; }
.hy-pv__screen .ui--card { height: 12cqw; border-radius: 1.4cqw; }
.hy-pv__screen .ui--line { height: 1.5cqw; }
.hy-pv__screen .ui--item { height: 5cqw; border-radius: 1.1cqw; }
.hy-pv__screen .ui--cta { height: 4.6cqw; margin-top: auto; border-radius: 99px; }

.hy-pv__chips {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.1cqw;
}

.hy-pv__chips .ui {
	height: 4.6cqw;
	border-radius: 1.1cqw;
}

/* Peças de interface */
.hy-pv .ui {
	display: block;
	border: 1px solid transparent;
	border-radius: 0.7cqw;
	background: rgba(255, 255, 255, 0.13);
	transition: transform 0.95s var(--ease), background 0.6s, border-color 0.6s, box-shadow 0.6s;
	transition-delay: calc(var(--i, 0) * 30ms);
}

.hy-pv .ui--strong {
	background: rgba(255, 255, 255, 0.8);
}

.hy-pv .ui--accent {
	background: var(--grad);
	box-shadow: 0 0 5cqw -1cqw rgba(86, 80, 255, 0.9);
}

/* 0. Ideia: rascunho tracejado, fora do alinhamento, com notas soltas. */
.hy-pv[data-state="0"] .ui {
	border: 1px dashed rgba(255, 255, 255, 0.5);
	background: transparent;
	box-shadow: none;
	transform: translate(var(--x, 0), var(--y, 0)) rotate(var(--r, 0deg));
}

.hy-pv[data-state="0"] :is(.hy-pv__win, .hy-pv__phone, .hy-pv__bar i, .hy-pv__bar span, .hy-pv__island) {
	border-style: dashed;
	border-color: rgba(255, 255, 255, 0.5);
}

.hy-pv[data-state="0"] .hy-pv__bar {
	border-bottom-style: dashed;
}

.hy-pv[data-state="0"] .hy-pv__side {
	border-right-style: dashed;
}

.hy-pv[data-state="0"] .hy-pv__win {
	transform: rotate(-1deg);
}

.hy-pv[data-state="0"] .hy-pv__phone {
	transform: rotate(1.6deg) translateY(0.6cqw);
}

/* 1. Protótipo: tudo no grid, só linhas, com cotas. */
.hy-pv[data-state="1"] .ui {
	border-color: rgba(255, 255, 255, 0.75);
	background: transparent;
	box-shadow: none;
}

.hy-pv[data-state="1"] .ui--accent {
	border-color: var(--sky);
}

/* 2 e 3. Desenvolvimento e testes: as peças ganham corpo. */
.hy-pv:is([data-state="2"], [data-state="3"]) .ui--accent {
	background: rgba(255, 255, 255, 0.34);
	box-shadow: none;
}

.hy-pv:is([data-state="2"], [data-state="3"], [data-state="4"], [data-state="5"]) :is(.hy-pv__win, .hy-pv__phone) {
	border-color: rgba(255, 255, 255, 0.28);
}

.hy-pv:is([data-state="2"], [data-state="3"], [data-state="4"], [data-state="5"]) .ui--chart {
	border-color: var(--line-2);
	background: transparent;
}

.hy-pv:is([data-state="2"], [data-state="3"], [data-state="4"], [data-state="5"]) .ui--chart polyline {
	stroke-dashoffset: 0;
}

/* 4 e 5. No ar: o produto acende. */
.hy-pv:is([data-state="4"], [data-state="5"]) .hy-pv__phone {
	box-shadow: 0 3cqw 8cqw -2cqw #000, 0 0 10cqw -3cqw rgba(86, 80, 255, 0.7);
	transform: translateY(-1.4cqw);
}

.hy-pv:is([data-state="4"], [data-state="5"]) .hy-pv__win {
	box-shadow: 0 3cqw 8cqw -3cqw #000;
}

/* Acessórios de cada etapa */
:is(.hy-pv__note, .hy-pv__dim, .hy-pv__code, .hy-pv__tests, .hy-pv__live, .hy-pv__ver, .hy-pv__new) {
	position: absolute;
	opacity: 0;
	transition: opacity 0.4s, transform 0.7s var(--ease), clip-path 0.9s var(--ease);
}

.hy-pv__note {
	padding: 1.5cqw 2.2cqw;
	border-radius: 0.6cqw;
	background: #d6c6ff;
	box-shadow: 0 1.5cqw 3cqw -1cqw #000;
	color: #1c1140;
	font-size: max(0.6rem, 2.3cqw);
	font-weight: 600;
	line-height: 1;
	transform: translateY(2cqw) rotate(0deg) scale(0.9);
}

.hy-pv__note--1 { left: 4%; top: 5%; }
.hy-pv__note--2 { left: 48%; top: 3%; background: #aebcff; }
.hy-pv__note--3 { left: 8%; bottom: 7%; background: #f4f5f7; }

.hy-pv[data-state="0"] .hy-pv__note {
	opacity: 1;
}

.hy-pv[data-state="0"] .hy-pv__note--1 { transform: rotate(-6deg); }
.hy-pv[data-state="0"] .hy-pv__note--2 { transform: rotate(4deg); transition-delay: 0.1s; }
.hy-pv[data-state="0"] .hy-pv__note--3 { transform: rotate(-3deg); transition-delay: 0.2s; }

.hy-pv__dim {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 2.6cqw;
	color: var(--lilac);
	font-family: var(--mono);
	font-size: max(0.56rem, 2cqw);
	letter-spacing: 0.08em;
	line-height: 1;
	clip-path: inset(0 50%);
}

.hy-pv__dim::before {
	content: "";
	position: absolute;
	inset: 50% 0 auto;
	height: 1px;
	background: currentColor;
}

.hy-pv__dim::after {
	content: "";
	position: absolute;
	inset: 0;
	border-inline: 1px solid currentColor;
}

.hy-pv__dim em {
	position: relative;
	padding: 0 1.2cqw;
	background: #0e1015;
	font-style: normal;
}

.hy-pv__dim--w { left: 6%; top: 7%; width: 70%; }
.hy-pv__dim--p { right: 8%; bottom: 3%; width: 29%; }

.hy-pv[data-state="1"] .hy-pv__dim {
	opacity: 1;
	clip-path: inset(0);
	transition-delay: 0.3s;
}

.hy-pv__code {
	left: 3%;
	bottom: 5%;
	display: grid;
	gap: 1.5cqw;
	width: 38%;
	padding: 2.6cqw;
	border: 1px solid var(--line-2);
	border-radius: 1.6cqw;
	background: rgba(6, 7, 10, 0.94);
	box-shadow: 0 2cqw 5cqw -1cqw #000;
	transform: translateY(3cqw);
}

.hy-pv__code b {
	height: 1.3cqw;
	border-radius: 99px;
	background: rgba(255, 255, 255, 0.22);
	transform: scaleX(0);
	transform-origin: left;
}

.hy-pv__code b:nth-child(1) { width: 46%; background: var(--lilac); }
.hy-pv__code b:nth-child(2) { width: 82%; margin-left: 8%; }
.hy-pv__code b:nth-child(3) { width: 64%; margin-left: 8%; background: var(--sky); }
.hy-pv__code b:nth-child(4) { width: 72%; margin-left: 16%; }
.hy-pv__code b:nth-child(5) { width: 40%; margin-left: 8%; background: var(--royal); }
.hy-pv__code b:nth-child(6) { width: 22%; }

.hy-pv[data-state="2"] .hy-pv__code {
	opacity: 1;
	transform: none;
}

.hy-pv[data-state="2"] .hy-pv__code b {
	transform: none;
	transition: transform 0.6s var(--ease);
}

.hy-pv[data-state="2"] .hy-pv__code b:nth-child(1) { transition-delay: 0.3s; }
.hy-pv[data-state="2"] .hy-pv__code b:nth-child(2) { transition-delay: 0.5s; }
.hy-pv[data-state="2"] .hy-pv__code b:nth-child(3) { transition-delay: 0.7s; }
.hy-pv[data-state="2"] .hy-pv__code b:nth-child(4) { transition-delay: 0.9s; }
.hy-pv[data-state="2"] .hy-pv__code b:nth-child(5) { transition-delay: 1.1s; }
.hy-pv[data-state="2"] .hy-pv__code b:nth-child(6) { transition-delay: 1.3s; }

.hy-pv__tests {
	left: 3%;
	bottom: 5%;
	display: grid;
	gap: 1.3cqw;
	padding: 2.4cqw 2.8cqw;
	border: 1px solid var(--line-2);
	border-radius: 1.6cqw;
	background: rgba(6, 7, 10, 0.94);
	box-shadow: 0 2cqw 5cqw -1cqw #000;
	color: var(--fg);
	font-size: max(0.58rem, 2.2cqw);
	line-height: 1;
	transform: translateY(3cqw);
}

.hy-pv__tests li {
	display: flex;
	align-items: center;
	gap: 1.5cqw;
	opacity: 0.35;
	transition: opacity 0.5s;
}

.hy-pv__tests li::before {
	content: "✓";
	display: grid;
	place-items: center;
	width: 2.8cqw;
	height: 2.8cqw;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.12);
	color: transparent;
	font-size: 1.8cqw;
	transition: background-color 0.5s, color 0.5s;
}

.hy-pv[data-state="3"] .hy-pv__tests {
	opacity: 1;
	transform: none;
}

.hy-pv[data-state="3"] .hy-pv__tests li {
	opacity: 1;
}

.hy-pv[data-state="3"] .hy-pv__tests li::before {
	background: #3ddc84;
	color: #04210f;
}

.hy-pv[data-state="3"] .hy-pv__tests li:nth-child(1),
.hy-pv[data-state="3"] .hy-pv__tests li:nth-child(1)::before { transition-delay: 0.4s; }
.hy-pv[data-state="3"] .hy-pv__tests li:nth-child(2),
.hy-pv[data-state="3"] .hy-pv__tests li:nth-child(2)::before { transition-delay: 0.8s; }
.hy-pv[data-state="3"] .hy-pv__tests li:nth-child(3),
.hy-pv[data-state="3"] .hy-pv__tests li:nth-child(3)::before { transition-delay: 1.2s; }

.hy-pv__live {
	left: 4%;
	bottom: 7%;
	display: inline-flex;
	align-items: center;
	gap: 1.5cqw;
	padding: 1.7cqw 2.6cqw;
	border-radius: 99px;
	background: #fff;
	box-shadow: 0 2cqw 5cqw -1cqw #000;
	color: #0a0b0e;
	font-family: var(--mono);
	font-size: max(0.56rem, 2cqw);
	font-weight: 500;
	letter-spacing: 0.06em;
	line-height: 1;
	text-transform: uppercase;
	white-space: nowrap;
	transform: translateY(2cqw);
}

.hy-pv__live i {
	width: 1.5cqw;
	height: 1.5cqw;
	border-radius: 50%;
	background: #1fb866;
	animation: hy-ping 1.8s ease-out infinite;
}

.hy-pv:is([data-state="4"], [data-state="5"]) .hy-pv__live {
	opacity: 1;
	transform: none;
	transition-delay: 0.3s;
}

.hy-pv__ver {
	right: 5%;
	top: 6%;
	padding: 1.4cqw 2.2cqw;
	border-radius: 99px;
	background: var(--grad);
	box-shadow: 0 0 5cqw -1cqw rgba(86, 80, 255, 0.9);
	color: #fff;
	font-family: var(--mono);
	font-size: max(0.6rem, 2.2cqw);
	font-weight: 500;
	line-height: 1;
	transform: scale(0.6);
}

.hy-pv__new {
	right: 34%;
	top: 7%;
	padding: 1.4cqw 2.2cqw;
	border: 1px solid var(--line-2);
	border-radius: 99px;
	background: rgba(14, 17, 22, 0.94);
	color: var(--fg);
	font-size: max(0.58rem, 2.1cqw);
	line-height: 1;
	white-space: nowrap;
	transform: translateX(3cqw);
}

.hy-pv[data-state="5"] :is(.hy-pv__ver, .hy-pv__new) {
	opacity: 1;
	transform: none;
	transition-delay: 0.35s;
}

.hy-pv__cursor {
	position: absolute;
	left: 0;
	top: 0;
	width: 3.8cqw;
	fill: #fff;
	stroke: #0a0b0e;
	stroke-width: 1.5;
	stroke-linejoin: round;
	translate: 56cqw 26cqw;
	transition: translate 1.15s var(--ease);
}

.hy-pv[data-state="0"] .hy-pv__cursor { translate: 44cqw 22cqw; }
.hy-pv[data-state="1"] .hy-pv__cursor { translate: 78cqw 44cqw; }
.hy-pv[data-state="2"] .hy-pv__cursor { translate: 32cqw 62cqw; }
.hy-pv[data-state="3"] .hy-pv__cursor { translate: 22cqw 70cqw; }
.hy-pv[data-state="4"] .hy-pv__cursor { translate: 80cqw 72cqw; }
.hy-pv[data-state="5"] .hy-pv__cursor { translate: 70cqw 12cqw; }

/* 9. Blocos de apoio ------------------------------------------------------- */

/* Órbita: um único time em volta do seu produto. */
.hy-why {
	overflow: clip; /* as etiquetas em órbita não podem alargar a página */
}

.hy-why::before {
	content: "";
	position: absolute;
	inset: 0 0 0 auto;
	width: 55%;
	background: radial-gradient(55% 50% at 80% 45%, rgba(147, 75, 255, 0.13), transparent 72%);
	pointer-events: none;
}

.hy-why__grid {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: center;
}

.hy-orbit {
	position: relative;
	width: min(100%, 30rem);
	aspect-ratio: 1;
	margin-inline: auto;
	container-type: inline-size;
}

.hy-orbit__ring {
	position: absolute;
	inset: 0;
	border: 1px solid var(--line-2);
	border-radius: 50%;
}

.hy-orbit__ring--1 {
	inset: 31%;
	border-color: rgba(138, 163, 255, 0.5);
}

.hy-orbit__ring--2 {
	inset: 16%;
	border-style: dashed;
	animation: hy-spin 60s linear infinite;
}

.hy-orbit__ring--3 {
	border-color: var(--line);
}

.hy-orbit__arm {
	position: absolute;
	inset: 0;
	animation: hy-spin 34s linear infinite;
}

.hy-orbit__arm--2 {
	inset: 16%;
	animation-duration: 26s;
	animation-direction: reverse;
}

.hy-orbit__arm--3 {
	animation-delay: -17s;
}

.hy-orbit__arm span {
	position: absolute;
	left: 50%;
	top: 0;
	padding: 2.2cqw 3.4cqw;
	border: 1px solid var(--line-2);
	border-radius: 99px;
	background: #10131a;
	box-shadow: 0 3cqw 6cqw -2cqw #000;
	color: var(--fg);
	font-size: max(0.72rem, 3.3cqw);
	font-weight: 500;
	line-height: 1;
	white-space: nowrap;
	translate: -50% -50%;
	animation: hy-spin-rev 34s linear infinite;
}

.hy-orbit__arm span::before {
	content: "";
	display: inline-block;
	width: 1.8cqw;
	height: 1.8cqw;
	margin-right: 1.8cqw;
	border-radius: 50%;
	background: var(--royal);
	box-shadow: 0 0 10px var(--royal);
}

.hy-orbit__arm--2 span {
	animation-duration: 26s;
	animation-direction: reverse;
}

.hy-orbit__arm--2 span::before {
	background: var(--violet);
	box-shadow: 0 0 10px var(--violet);
}

.hy-orbit__arm--3 span {
	animation-delay: -17s;
}

.hy-orbit__arm--3 span::before {
	background: var(--lilac);
	box-shadow: 0 0 10px var(--lilac);
}

@keyframes hy-spin {
	to { rotate: 360deg; }
}

@keyframes hy-spin-rev {
	to { rotate: -360deg; }
}

.hy-orbit__core {
	position: absolute;
	inset: 35%;
	display: grid;
	place-content: center;
	justify-items: center;
	gap: 1.6cqw;
	border-radius: 50%;
	background: radial-gradient(circle at 30% 25%, #8aa3ff, var(--royal) 52%, #5a2bd6);
	box-shadow: 0 0 16cqw -2cqw rgba(86, 80, 255, 0.85), 0 0 0 2.4cqw rgba(86, 80, 255, 0.12);
	color: #fff;
}

.hy-orbit__core .hy-logo {
	width: 9cqw;
	height: auto;
}

.hy-orbit__core small {
	font-family: var(--mono);
	font-size: max(0.56rem, 2.2cqw);
	font-weight: 500;
	letter-spacing: 0.06em;
	line-height: 1;
	text-transform: uppercase;
}

@media (max-width: 58rem) {
	.hy-why__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.hy-orbit {
		width: min(100%, 22rem);
	}
}

/* Estrutura: a foto da sede ao lado do que existe por trás de cada projeto. */
.hy-structure {
	overflow: clip;
}

.hy-structure::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: 62%;
	background: radial-gradient(55% 52% at 24% 50%, rgba(47, 91, 255, 0.17), transparent 72%);
	pointer-events: none;
}

.hy-structure__grid {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
	gap: clamp(2.5rem, 6vw, 5.5rem);
	align-items: center;
}

.hy-structure__text {
	display: grid;
	gap: 1.25rem;
	justify-items: start;
}

.hy-structure__text h2 {
	font-size: clamp(1.9rem, 1.1rem + 2.4vw, 3.1rem);
}

.hy-structure__text > p:not(.hy-label) {
	max-width: 34rem;
	color: var(--fg-2);
	font-size: 1.08rem;
}

.hy-structure__text .hy-checks {
	width: 100%;
}

/* Foto com moldura (classe hy-photo em um bloco de imagem). */
.hy-photo {
	position: relative;
	isolation: isolate;
	aspect-ratio: 5 / 4;
	margin: 0;
	overflow: hidden;
	border: 1px solid var(--line-2);
	border-radius: calc(var(--r) * 1.15);
	background: var(--surface);
	box-shadow: 0 0 0 0.45rem rgba(255, 255, 255, 0.03), 0 50px 120px -50px rgba(47, 91, 255, 0.8);
}

/* A imagem é um pouco mais alta que a moldura: sobra para deslizar ao rolar.
   ("figure" no seletor para valer sobre o height:auto do bloco de imagem.) */
figure.hy-photo img {
	position: absolute;
	inset: -7% 0 auto;
	width: 100%;
	height: 114%;
	object-fit: cover;
	object-position: 50% 40%;
	transition: scale 1.4s var(--ease);
}

figure.hy-photo:hover img {
	scale: 1.03;
}

/* Luz da marca sobre a foto, para ela conversar com o fundo escuro. */
.hy-photo::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg, transparent 58%, rgba(7, 8, 11, 0.72)),
		linear-gradient(125deg, rgba(47, 91, 255, 0.2), transparent 42%, rgba(147, 75, 255, 0.16));
	pointer-events: none;
}

.hy-photo figcaption {
	position: absolute;
	left: 1rem;
	bottom: 1rem;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	margin: 0;
	padding: 0.6rem 1rem;
	border: 1px solid var(--line-2);
	border-radius: 999px;
	background: rgba(10, 12, 16, 0.62);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	color: var(--fg);
	font-family: var(--mono);
	font-size: 0.72rem;
	letter-spacing: 0.12em;
	line-height: 1;
	text-align: left;
	text-transform: uppercase;
}

.hy-photo figcaption::before {
	content: "";
	flex: none;
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background: var(--sky);
	box-shadow: 0 0 0 0.2rem rgba(138, 163, 255, 0.22), 0 0 12px var(--royal);
}

@media (max-width: 56rem) {
	.hy-structure__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.hy-structure::before {
		width: 100%;
	}
}

/* Perguntas frequentes */
.hy-faqwrap {
	display: grid;
	grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
	gap: clamp(2rem, 5vw, 5rem);
	align-items: start;
}

.hy-faqwrap__a {
	position: sticky;
	top: 7rem;
	display: grid;
	gap: 1.25rem;
	justify-items: start;
}

.hy-faqs {
	display: grid;
	gap: 0.75rem;
}

.hy-head + .hy-faqs,
.hy-section > .hy-faqs {
	width: min(100%, 52rem);
	margin-inline: auto;
}

.hy-faqs details {
	border-radius: 1.15rem;
	transition: border-color 0.4s, background-color 0.4s;
}

.hy-faqs details[open] {
	border-color: rgba(138, 163, 255, 0.45);
	background: linear-gradient(180deg, rgba(72, 100, 255, 0.09), rgba(255, 255, 255, 0.02));
}

.hy-faqs summary {
	position: relative;
	display: block;
	padding: 1.25rem 4rem 1.25rem 1.4rem;
	color: var(--fg);
	font-size: clamp(1.02rem, 1rem + 0.25vw, 1.15rem);
	font-weight: 500;
	letter-spacing: -0.01em;
	line-height: 1.35;
	list-style: none;
	cursor: pointer;
}

.hy-faqs summary::-webkit-details-marker {
	display: none;
}

/* Botão +/− */
.hy-faqs summary::before {
	content: "";
	position: absolute;
	right: 1.1rem;
	top: 50%;
	width: 2rem;
	height: 2rem;
	border: 1px solid var(--line-2);
	border-radius: 50%;
	background:
		linear-gradient(currentColor, currentColor) center / 0.75rem 1.5px no-repeat,
		linear-gradient(currentColor, currentColor) center / 1.5px 0.75rem no-repeat;
	translate: 0 -50%;
	transition: rotate 0.5s var(--ease), background-color 0.4s, border-color 0.4s, color 0.3s;
}

.hy-faqs details[open] summary::before {
	border-color: transparent;
	background:
		linear-gradient(#fff, #fff) center / 0.75rem 1.5px no-repeat,
		var(--grad);
	rotate: 180deg;
}

.hy-faqs details > :not(summary) {
	max-width: 44em;
	padding: 0 1.4rem 1.4rem;
	font-size: 1rem;
	line-height: 1.65;
}

@supports (interpolate-size: allow-keywords) {
	.hy-faqs details {
		interpolate-size: allow-keywords;
	}

	.hy-faqs details::details-content {
		block-size: 0;
		overflow: clip;
		opacity: 0;
		transition: block-size 0.55s var(--ease), opacity 0.45s, content-visibility 0.55s allow-discrete;
	}

	.hy-faqs details[open]::details-content {
		block-size: auto;
		opacity: 1;
	}
}

@media (max-width: 58rem) {
	.hy-faqwrap {
		grid-template-columns: minmax(0, 1fr);
	}

	.hy-faqwrap__a {
		position: static;
	}
}

/* Artigos do blog */
.hy-posts {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.1rem;
}

.hy-post {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	transition: border-color 0.4s, transform 0.7s var(--ease);
}

.hy-post:hover {
	border-color: var(--line-2);
	transform: translateY(-6px);
}

/* Capa gerada: cada artigo ganha uma matiz própria (--h), sempre entre o azul e o roxo da marca. */
.hy-post__cover {
	position: relative;
	aspect-ratio: 16 / 9.5;
	overflow: hidden;
	background:
		radial-gradient(90% 120% at 12% 0%, hsl(var(--h) 85% 55% / 0.75), transparent 60%),
		radial-gradient(80% 110% at 100% 100%, hsl(calc(var(--h) + 34) 85% 54% / 0.6), transparent 62%),
		#0c0e13;
}

.hy-post__cover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hy-post__rings {
	position: absolute;
	inset: -40% -10% -40% 30%;
	border-radius: 50%;
	background: repeating-radial-gradient(circle, transparent 0 1.1rem, rgba(255, 255, 255, 0.13) 1.1rem calc(1.1rem + 1px));
	transition: transform 1.4s var(--ease);
}

.hy-post:hover .hy-post__rings {
	transform: scale(1.12) rotate(8deg);
}

.hy-post__mark {
	position: absolute;
	right: 1.4rem;
	bottom: 1.2rem;
	color: rgba(255, 255, 255, 0.92);
	transition: transform 0.9s var(--ease);
}

.hy-post__mark .hy-logo {
	height: 2.6rem;
}

.hy-post:hover .hy-post__mark {
	transform: rotate(-8deg) scale(1.1);
}

.hy-post__cat {
	position: absolute;
	left: 1.1rem;
	top: 1.1rem;
	padding: 0.5rem 0.8rem;
	border-radius: 999px;
	background: rgba(7, 8, 11, 0.7);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	color: var(--fg);
	font-family: var(--mono);
	font-size: 0.66rem;
	letter-spacing: 0.09em;
	line-height: 1;
	text-transform: uppercase;
}

.hy-post__body {
	position: relative;
	display: grid;
	gap: 0.7rem;
	padding: 1.4rem 1.5rem 1.7rem;
}

.hy-post__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3rem 1.1rem;
	color: var(--fg-3);
	font-family: var(--mono);
	font-size: 0.68rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.hy-post__t {
	font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.45rem);
	letter-spacing: -0.022em;
	line-height: 1.2;
	transition: color 0.3s;
}

.hy-post__t a::after {
	content: "";
	position: absolute;
	inset: -100vh 0 0;
	z-index: 4;
}

.hy-post__d {
	font-size: 0.95rem;
	line-height: 1.55;
}

@media (max-width: 62rem) {
	.hy-posts {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 40rem) {
	.hy-posts {
		grid-template-columns: minmax(0, 1fr);
	}
}

.hy-empty {
	padding: 1.25rem;
	border: 1px dashed var(--line-2);
	border-radius: var(--r-sm);
	color: var(--fg-3);
	font-size: 0.95rem;
}

.hy-pagination {
	margin-top: 3rem;
}

.hy-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem;
}

.hy-pagination .page-numbers {
	display: inline-flex;
	padding: 0.75em 1.15em;
	border: 1px solid var(--line-2);
	border-radius: 999px;
	font-size: 0.9rem;
	line-height: 1;
}

.hy-pagination .current {
	border-color: transparent;
	background: var(--grad);
	color: #fff;
}

/* Tecnologias */
.hy-techs {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.1rem;
}

.hy-tech {
	display: grid;
	align-content: start;
	gap: 0.9rem;
	padding: clamp(1.5rem, 2.6vw, 2.25rem);
	transition: border-color 0.4s, transform 0.7s var(--ease);
}

.hy-tech:hover {
	border-color: var(--line-2);
	transform: translateY(-4px);
}

.hy-tech:nth-child(2),
.hy-tech:nth-child(3) {
	--c: var(--violet);
}

.hy-tech:nth-child(4) {
	--c: var(--indigo);
}

.hy-tech h2 {
	font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.4rem);
}

.hy-tech .hy-checks {
	margin-top: 0.25rem;
}

@media (max-width: 56rem) {
	.hy-techs {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Tabelas */
.wp-block-table {
	overflow-x: auto;
	border: 1px solid var(--line);
	border-radius: var(--r);
	background: rgba(255, 255, 255, 0.02);
}

.hy-section > .wp-block-table {
	width: min(100%, 60rem);
	margin-inline: auto;
}

.wp-block-table table {
	width: 100%;
	min-width: 34rem;
	border-collapse: collapse;
	font-size: 0.97rem;
	line-height: 1.5;
}

.wp-block-table :is(th, td) {
	padding: 1.05rem 1.3rem;
	border: 0;
	border-bottom: 1px solid var(--line);
	text-align: left;
	vertical-align: top;
}

.wp-block-table tbody tr:last-child td {
	border-bottom: 0;
}

.wp-block-table tbody tr {
	transition: background-color 0.3s;
}

.wp-block-table tbody tr:hover {
	background: rgba(255, 255, 255, 0.035);
}

.wp-block-table thead th {
	background: rgba(255, 255, 255, 0.04);
	color: var(--fg-3);
	font-family: var(--mono);
	font-size: 0.68rem;
	font-weight: 500;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}

.wp-block-table tbody td:first-child {
	color: var(--fg);
	font-weight: 600;
}

/* 10. Formulário ----------------------------------------------------------- */

.hy-contact {
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
	gap: clamp(2.5rem, 6vw, 6rem);
	align-items: start;
}

.hy-main--home .hy-contact::before,
.hy-page-contato .hy-contact::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(45% 55% at 85% 30%, rgba(47, 91, 255, 0.16), transparent 70%),
		radial-gradient(40% 50% at 10% 80%, rgba(147, 75, 255, 0.12), transparent 70%);
	pointer-events: none;
}

.hy-contact > * {
	position: relative;
}

.hy-contact__intro {
	position: sticky;
	top: 7rem;
	display: grid;
	gap: 1.4rem;
	justify-items: start;
}

.hy-contact__intro > p:not(.hy-label) {
	max-width: 30em;
	font-size: 1.12rem;
	line-height: 1.55;
}

.hy-next {
	display: grid;
	gap: 0.6rem;
	width: 100%;
	margin-top: 0.5rem;
	counter-reset: next;
}

.hy-next li {
	display: flex;
	gap: 1rem;
	align-items: center;
	padding: 0.9rem 1.1rem;
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	background: rgba(255, 255, 255, 0.025);
	color: var(--fg);
	font-weight: 500;
	counter-increment: next;
}

.hy-next li::before {
	content: counter(next, decimal-leading-zero);
	display: grid;
	flex: none;
	place-items: center;
	width: 2rem;
	height: 2rem;
	border-radius: 0.6rem;
	background: var(--grad);
	color: #fff;
	font-family: var(--mono);
	font-size: 0.72rem;
	font-weight: 500;
}

.hy-channels {
	display: grid;
	width: 100%;
	margin-top: 0.5rem;
}

.hy-channels li {
	display: grid;
	grid-template-columns: 7rem minmax(0, 1fr);
	gap: 1rem;
	padding: 0.9rem 0;
	border-top: 1px solid var(--line);
	color: var(--fg);
}

.hy-channels__k {
	padding-top: 0.3em;
	color: var(--fg-3);
	font-family: var(--mono);
	font-size: 0.68rem;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}

.hy-form-wrap {
	padding: clamp(1.5rem, 3vw, 2.6rem);
	border-color: var(--line-2);
	border-radius: 1.75rem;
	background: linear-gradient(180deg, rgba(20, 24, 31, 0.92), rgba(11, 13, 17, 0.92));
	box-shadow: 0 40px 100px -40px #000;
}

.hy-form {
	position: relative;
}

.hy-form__hp {
	position: absolute;
	left: -200vw;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.hy-form__fields {
	display: grid;
	gap: 1.4rem;
}

.hy-field {
	display: grid;
	gap: 0.6rem;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.hy-field > legend {
	float: left;
	width: 100%;
	margin-bottom: 0.6rem;
}

.hy-field > legend + * {
	clear: both;
}

.hy-field__l {
	display: block;
	padding: 0;
	color: var(--fg-2);
	font-family: var(--mono);
	font-size: 0.68rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	transition: color 0.3s;
}

.hy-field:focus-within .hy-field__l {
	color: var(--sky);
}

.hy-field__i {
	width: 100%;
	padding: 0.95rem 1.1rem;
	border: 1px solid var(--line-2);
	border-radius: var(--r-sm);
	outline: 0;
	background: rgba(255, 255, 255, 0.04);
	color: var(--fg);
	font-family: var(--sans);
	font-size: 1.05rem;
	line-height: 1.4;
	-webkit-appearance: none;
	appearance: none;
	transition: border-color 0.35s, background-color 0.35s, box-shadow 0.35s;
}

.hy-field__i:hover {
	border-color: rgba(255, 255, 255, 0.3);
}

.hy-field__i:focus {
	border-color: var(--sky);
	background: rgba(72, 100, 255, 0.07);
	box-shadow: 0 0 0 4px rgba(47, 91, 255, 0.2), 0 0 40px -10px rgba(47, 91, 255, 0.6);
}

textarea.hy-field__i {
	min-height: 7.5rem;
	resize: vertical;
}

.hy-field__i::placeholder {
	color: #6f7683;
}

.hy-field__h,
.hy-field__e,
.hy-form .wpcf7-not-valid-tip {
	color: var(--fg-3);
	font-size: 0.82rem;
}

.hy-field.is-invalid .hy-field__i,
.hy-field:has(.wpcf7-not-valid) .hy-field__i {
	border-color: #ff6b5e;
}

.hy-field.is-invalid .hy-field__l,
.hy-field:has(.wpcf7-not-valid) .hy-field__l,
.hy-field__e,
.hy-form .wpcf7-not-valid-tip {
	color: #ff8a7f;
}

.hy-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.hy-chip-i,
.hy-chips .wpcf7-list-item label {
	position: relative;
	cursor: pointer;
}

.hy-chip-i input,
.hy-chips .wpcf7-list-item input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.hy-chip-i span,
.hy-chips .wpcf7-list-item-label {
	display: inline-flex;
	padding: 0.8em 1.1em;
	border: 1px solid var(--line-2);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.03);
	color: var(--fg-2);
	font-size: 0.92rem;
	font-weight: 500;
	line-height: 1;
	transition: background-color 0.35s var(--ease), color 0.35s, border-color 0.35s, box-shadow 0.35s, transform 0.4s var(--ease);
}

.hy-chip-i:hover span,
.hy-chips .wpcf7-list-item label:hover .wpcf7-list-item-label {
	border-color: rgba(255, 255, 255, 0.4);
	color: var(--fg);
}

.hy-chip-i input:checked + span,
.hy-chips .wpcf7-list-item input:checked + .wpcf7-list-item-label {
	border-color: transparent;
	background: var(--grad);
	box-shadow: 0 10px 30px -12px rgba(47, 91, 255, 0.9);
	color: #fff;
	transform: scale(1.03);
}

.hy-chip-i input:focus-visible + span,
.hy-chips .wpcf7-list-item input:focus-visible + .wpcf7-list-item-label {
	outline: 2px solid var(--sky);
	outline-offset: 3px;
}

.hy-form__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.1rem 1.75rem;
	margin-top: 1.75rem;
	padding-top: 1.75rem;
	border-top: 1px solid var(--line);
}

.hy-form__legal {
	flex: 1 1 15rem;
	max-width: 30em;
	color: var(--fg-3);
	font-size: 0.8rem;
	line-height: 1.5;
}

.hy-form__status,
.hy-form .wpcf7-response-output {
	margin-top: 1rem;
	color: #ff8a7f;
	font-size: 0.95rem;
	font-weight: 500;
}

.hy-form__status:empty,
.hy-form .wpcf7-response-output:empty {
	display: none;
}

.hy-form.is-sending .hy-btn,
.hy-form.submitting .hy-btn {
	pointer-events: none;
	opacity: 0.55;
}

.hy-form.is-sent > :not(.hy-form__done),
.hy-form-cf7.is-sent > .wpcf7 {
	display: none;
}

/* Contact Form 7. O plugin embrulha cada campo em um <span>: com "display: contents" esses
   invólucros somem do layout e o formulário fica idêntico ao do tema. O CSS do plugin não é
   carregado, então o que ele esconde por padrão é escondido aqui. */
.hy-form .wpcf7-form-control-wrap,
.hy-form .wpcf7-list-item {
	display: contents;
}

.wpcf7 .hidden-fields-container {
	display: none;
}

.wpcf7 .screen-reader-response {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	border: 0;
	white-space: nowrap;
}

/* O aviso geral só aparece quando o envio falha; erros de campo já estão ao lado de cada campo. */
.hy-form:is(.init, .submitting, .resetting, .validating, .invalid) .wpcf7-response-output {
	display: none;
}

/* Envio concluído sem JavaScript: a página recarrega e a mensagem do plugin aparece aqui. */
.hy-form.sent .wpcf7-response-output {
	padding: 1rem 1.2rem;
	border: 1px solid rgba(138, 163, 255, 0.45);
	border-radius: var(--r-sm);
	background: rgba(72, 100, 255, 0.1);
	color: var(--fg);
}

.hy-form__done {
	display: grid;
	gap: 1rem;
	justify-items: start;
	padding: clamp(1rem, 3vw, 2rem) 0;
}

.hy-form__done[hidden] {
	display: none;
}

.hy-form__check {
	display: grid;
	place-items: center;
	width: 3.5rem;
	height: 3.5rem;
	border-radius: 50%;
	background: var(--grad);
	box-shadow: 0 0 50px -6px rgba(86, 80, 255, 0.9);
	color: #fff;
}

.hy-form__done-t {
	color: var(--fg);
	font-size: clamp(1.75rem, 1.2rem + 2vw, 2.6rem);
	font-weight: 600;
	letter-spacing: -0.035em;
	line-height: 1.05;
	outline: 0;
}

@media (max-width: 58rem) {
	.hy-contact {
		grid-template-columns: minmax(0, 1fr);
	}

	.hy-contact__intro {
		position: static;
	}
}

/* 11. Páginas internas, artigo e case -------------------------------------- */

.hy-phero {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(2rem, 5vw, 4rem);
	align-items: center;
	padding: clamp(8.5rem, 7rem + 6vw, 11.5rem) var(--pad) clamp(3rem, 6vw, 5rem);
	overflow: clip;
}

.hy-phero--art {
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
}

.hy-phero::after {
	content: "";
	position: absolute;
	inset: auto 0 0;
	height: 30%;
	background: linear-gradient(transparent, var(--bg));
	pointer-events: none;
}

.hy-phero__bg .hy-beam {
	opacity: 0.5;
}

.hy-phero__main {
	position: relative;
	z-index: 2;
	display: grid;
	gap: 1.4rem;
	justify-items: start;
}

.hy-phero__t {
	max-width: 15em;
	font-size: clamp(2.3rem, 1.1rem + 4.2vw, 4.4rem);
	letter-spacing: -0.04em;
	line-height: 1.03;
}

.hy-phero__lead {
	max-width: 36em;
	font-size: clamp(1.1rem, 1rem + 0.5vw, 1.3rem);
	line-height: 1.55;
}

.hy-phero__cta {
	margin-top: 0.4rem;
}

.hy-phero__art {
	position: relative;
	z-index: 2;
}

.hy-phero__panel {
	position: relative;
	aspect-ratio: 4 / 3.1;
	overflow: hidden;
	border: 1px solid var(--line-2);
	border-radius: 1.75rem;
	background:
		radial-gradient(70% 90% at 50% 100%, rgba(47, 91, 255, 0.25), transparent 72%),
		linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px) 0 0 / 2.25rem 2.25rem,
		linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px) 0 0 / 2.25rem 2.25rem,
		#0c0e13;
	box-shadow: 0 50px 100px -40px #000;
}

/* Emblema: o símbolo da marca dentro de anéis em rotação. */
.hy-emblem {
	position: relative;
	display: grid;
	place-items: center;
	width: min(100%, 24rem);
	aspect-ratio: 1;
	margin-left: auto;
}

.hy-emblem__ring {
	position: absolute;
	inset: 0;
	border: 1px solid var(--line-2);
	border-radius: 50%;
}

.hy-emblem__ring--1 {
	border-style: dashed;
	animation: hy-spin 50s linear infinite;
}

.hy-emblem__ring--2 {
	inset: 14%;
	border-color: rgba(138, 163, 255, 0.45);
	border-top-color: transparent;
	border-bottom-color: transparent;
	animation: hy-spin 18s linear infinite reverse;
}

.hy-emblem__ring--3 {
	inset: 28%;
	border-color: transparent;
	background: radial-gradient(circle at 35% 30%, rgba(138, 163, 255, 0.5), rgba(147, 75, 255, 0.25) 70%, transparent 72%);
	filter: blur(18px);
}

.hy-emblem__dot {
	position: absolute;
	inset: 0;
	animation: hy-spin 22s linear infinite;
}

.hy-emblem__dot::before {
	content: "";
	position: absolute;
	left: 50%;
	top: -0.3rem;
	width: 0.6rem;
	height: 0.6rem;
	border-radius: 50%;
	background: var(--royal);
	box-shadow: 0 0 16px var(--royal);
}

.hy-emblem__dot--2 {
	inset: 14%;
	animation-duration: 15s;
	animation-direction: reverse;
}

.hy-emblem__dot--2::before {
	background: var(--violet);
	box-shadow: 0 0 16px var(--violet);
}

.hy-emblem__mark {
	position: relative;
	width: 34%;
	height: auto;
	color: var(--fg);
	filter: drop-shadow(0 0 30px rgba(72, 100, 255, 0.55));
}

.hy-crumbs {
	color: var(--fg-3);
	font-family: var(--mono);
	font-size: 0.68rem;
	font-weight: 500;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}

.hy-crumbs ol {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3rem 0;
}

.hy-crumbs li:not(:last-child)::after {
	content: "/";
	margin-inline: 0.75em;
	color: var(--line-2);
}

.hy-crumbs a {
	transition: color 0.3s;
}

.hy-crumbs a:hover,
.hy-crumbs [aria-current] {
	color: var(--fg);
}

.hy-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
}

@media (max-width: 58rem) {
	.hy-phero--art {
		grid-template-columns: minmax(0, 1fr);
	}

	.hy-emblem {
		display: none;
	}
}

/* Conteúdo solto (fora de seções): coluna de leitura. */
.hy-content > :not(.hy-section) {
	width: min(100% - var(--gutter) * 2, 46rem);
	margin-inline: auto;
}

.hy-content > :not(.hy-section):last-child {
	margin-bottom: var(--space);
}

.hy-prose > * + *,
.hy-content > :not(.hy-section) + :not(.hy-section) {
	margin-top: 1.35rem;
}

.hy-prose > :is(h2, h3) + *,
.hy-content > :is(h2, h3) + * {
	margin-top: 1rem;
}

.hy-prose > h2,
.hy-content > h2 {
	margin-top: 3.25rem;
	font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.2rem);
	letter-spacing: -0.03em;
	line-height: 1.12;
}

.hy-prose > h3,
.hy-content > h3 {
	margin-top: 2.25rem;
}

.hy-prose > p,
.hy-prose > ul,
.hy-prose > ol,
.hy-content > p,
.hy-content > ul,
.hy-content > ol {
	font-size: 1.1rem;
	line-height: 1.75;
}

.hy-prose > p.hy-lead {
	max-width: none;
	color: var(--fg);
	font-size: clamp(1.2rem, 1.1rem + 0.6vw, 1.5rem);
	line-height: 1.5;
	letter-spacing: -0.012em;
}

.hy-prose > ul:not([class*="hy-"]),
.hy-content > ul:not([class*="hy-"]),
.hy-prose > ol,
.hy-content > ol:not([class*="hy-"]) {
	display: grid;
	gap: 0.7rem;
}

.hy-prose > ul:not([class*="hy-"]) > li,
.hy-content > ul:not([class*="hy-"]) > li {
	position: relative;
	padding-left: 1.7rem;
}

.hy-prose > ul:not([class*="hy-"]) > li::before,
.hy-content > ul:not([class*="hy-"]) > li::before {
	content: "";
	position: absolute;
	left: 0.15rem;
	top: 0.72em;
	width: 0.45rem;
	height: 0.45rem;
	background: var(--royal);
	transform: rotate(45deg);
}

.hy-prose > ol,
.hy-content > ol:not([class*="hy-"]) {
	counter-reset: ol;
}

.hy-prose > ol > li,
.hy-content > ol:not([class*="hy-"]) > li {
	position: relative;
	padding-left: 2.6rem;
	counter-increment: ol;
}

.hy-prose > ol > li::before,
.hy-content > ol:not([class*="hy-"]) > li::before {
	content: counter(ol, decimal-leading-zero);
	position: absolute;
	left: 0;
	top: 0.3em;
	padding: 0.25rem 0.4rem;
	border-radius: 0.4rem;
	background: rgba(72, 100, 255, 0.16);
	color: var(--sky);
	font-family: var(--mono);
	font-size: 0.68rem;
	font-weight: 500;
	line-height: 1;
}

.hy-prose > .wp-block-table {
	margin-block: 2rem;
}

.hy-prose > .hy-faqs {
	margin-top: 1.5rem;
}

.hy-prose blockquote {
	padding-left: 1.5rem;
	border-left: 2px solid var(--royal);
	color: var(--fg);
	font-size: 1.3rem;
	line-height: 1.45;
}

/* Artigo */
.hy-progress {
	position: fixed;
	inset: 0 0 auto;
	z-index: 110;
	height: 3px;
	pointer-events: none;
}

.hy-progress span {
	display: block;
	height: 100%;
	background: var(--grad);
	box-shadow: 0 0 14px rgba(86, 80, 255, 0.9);
	transform: scaleX(0);
	transform-origin: left;
}

.hy-phero--article .hy-phero__t {
	max-width: 19em;
	font-size: clamp(2rem, 1.2rem + 3vw, 3.6rem);
}

.hy-article__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 1.6rem;
	color: var(--fg-3);
	font-family: var(--mono);
	font-size: 0.68rem;
	font-weight: 500;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}

.hy-article__body {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: 2.5rem 1.5rem;
	align-items: start;
	padding: 0 var(--pad) var(--space);
}

.hy-toc {
	position: sticky;
	top: 7rem;
	display: grid;
	grid-column: 1 / span 3;
	gap: 1rem;
	padding: 1.25rem;
	border: 1px solid var(--line);
	border-radius: var(--r);
	background: rgba(255, 255, 255, 0.025);
}

.hy-toc ol {
	display: grid;
}

.hy-toc a {
	display: block;
	padding: 0.5rem 0 0.5rem 0.9rem;
	border-left: 2px solid var(--line);
	color: var(--fg-3);
	font-size: 0.9rem;
	line-height: 1.35;
	transition: color 0.3s, border-color 0.3s;
}

.hy-toc a:hover,
.hy-toc a.is-active {
	border-left-color: var(--sky);
	color: var(--fg);
}

.hy-article__body .hy-prose {
	grid-column: 5 / span 7;
}

.hy-article__body .hy-prose:only-child {
	grid-column: 3 / span 8;
}

.hy-article__cover {
	margin-bottom: 2.5rem;
	overflow: hidden;
	border-radius: var(--r);
}

@media (max-width: 62rem) {
	.hy-toc {
		position: static;
		grid-column: 1 / -1;
	}

	.hy-article__body .hy-prose,
	.hy-article__body .hy-prose:only-child {
		grid-column: 1 / -1;
	}
}

/* Case */
.hy-case .hy-phero__bg {
	background:
		radial-gradient(46% 50% at 18% 16%, color-mix(in srgb, var(--c) 34%, transparent), transparent 72%),
		radial-gradient(42% 46% at 88% 10%, rgba(147, 75, 255, 0.16), transparent 72%);
}

.hy-case .hy-beam--a stop {
	stop-color: var(--c);
}

.hy-case__cover {
	position: relative;
	z-index: 2;
	margin-inline: var(--pad);
}

.hy-case__cover::before {
	content: "";
	position: absolute;
	inset: 8% 6% -6%;
	z-index: -1;
	background: var(--c);
	filter: blur(70px);
	opacity: 0.4;
}

.hy-case__cover-in {
	position: relative;
	overflow: hidden;
	border: 1px solid var(--line-2);
	border-radius: 1.9rem;
	background:
		radial-gradient(80% 100% at 50% 100%, color-mix(in srgb, var(--c) 34%, transparent), transparent 70%),
		#0c0e13;
	view-transition-class: hy-morph;
}

.hy-case__cover img {
	width: 100%;
}

.hy-case__cover--cover .hy-case__cover-in {
	aspect-ratio: 16 / 9;
}

.hy-case__cover--cover img {
	height: 100%;
	object-fit: cover;
}

.hy-case__cover--contain img {
	width: auto;
	max-height: min(78svh, 44rem);
	margin-inline: auto;
	padding: 3%;
}

.hy-case__body {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: 3rem 1.5rem;
	align-items: start;
	padding: var(--space) var(--pad);
}

.hy-ficha {
	position: sticky;
	top: 7rem;
	display: grid;
	grid-column: 1 / span 4;
	gap: 1.25rem;
	justify-items: start;
	padding: clamp(1.25rem, 2vw, 1.75rem);
}

.hy-ficha dl {
	width: 100%;
}

.hy-ficha dl > div {
	display: grid;
	gap: 0.3rem;
	padding: 0.85rem 0;
	border-top: 1px solid var(--line);
}

.hy-ficha dt {
	color: var(--fg-3);
	font-family: var(--mono);
	font-size: 0.66rem;
	font-weight: 500;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}

.hy-ficha dd {
	color: var(--fg);
	font-weight: 500;
	line-height: 1.4;
}

.hy-case__body .hy-prose {
	grid-column: 6 / -1;
	max-width: 44rem;
}

.hy-case__body .hy-prose > h2:first-child {
	margin-top: 0;
}

.hy-press {
	display: grid;
	gap: 0.6rem;
}

.hy-press a {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 0.2rem 1.5rem;
	padding: 1.1rem 1.25rem;
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	background: rgba(255, 255, 255, 0.025);
	text-decoration: none !important;
	transition: border-color 0.4s, background-color 0.4s, transform 0.5s var(--ease);
}

.hy-press a:hover {
	border-color: color-mix(in srgb, var(--c) 60%, transparent);
	background: color-mix(in srgb, var(--c) 8%, transparent);
	transform: translateX(0.3rem);
}

.hy-press__v {
	grid-column: 1;
	color: var(--fg-3);
	font-family: var(--mono);
	font-size: 0.66rem;
	font-weight: 500;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}

.hy-press__t {
	grid-column: 1;
	color: var(--fg);
	font-weight: 500;
	line-height: 1.35;
}

.hy-press .hy-ico {
	grid-column: 2;
	grid-row: 1 / span 2;
	align-self: center;
	color: var(--fg-2);
}

.hy-case__gallery {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: clamp(2rem, 4vw, 4rem) 1.5rem;
	align-items: center;
	padding: var(--space) var(--pad);
	border-block: 1px solid var(--line);
	background:
		radial-gradient(50% 70% at 50% 50%, color-mix(in srgb, var(--c) 16%, transparent), transparent 72%),
		var(--bg-2);
}

.hy-shot {
	display: grid;
	grid-column: 1 / -1;
	gap: 1rem;
}

.hy-shot figcaption {
	color: var(--fg-3);
	font-family: var(--mono);
	font-size: 0.68rem;
	letter-spacing: 0.07em;
	text-transform: uppercase;
}

.hy-shot figcaption::before {
	content: "↳ ";
	color: var(--c);
}

.hy-shot--livre img {
	width: auto;
	max-height: 44rem;
	margin-inline: auto;
}

.hy-shot--livre figcaption {
	text-align: center;
}

.hy-shot--tela {
	grid-column: 1 / span 8;
}

.hy-shot--celular {
	grid-column: 10 / span 3;
}

.hy-shot--tela:only-child,
.hy-shot--celular:only-child {
	grid-column: 3 / span 8;
}

.hy-shot--tela .hy-shot__frame {
	position: relative;
	padding-top: 2.3rem;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: 1rem;
	background: #14171d;
	box-shadow: 0 50px 100px -40px #000;
}

.hy-shot--tela .hy-shot__frame::before {
	content: "";
	position: absolute;
	left: 1rem;
	top: 0.9rem;
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background: #ff5f57;
	box-shadow: 0.9rem 0 0 #febc2e, 1.8rem 0 0 #28c840;
}

.hy-shot--celular .hy-shot__frame {
	padding: 0.5rem;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.28);
	border-radius: 2.5rem;
	background: #090a0d;
	box-shadow: 0 50px 100px -40px #000;
}

.hy-shot--celular img {
	border-radius: 2.05rem;
}

@media (max-width: 56rem) {
	.hy-ficha {
		position: static;
		grid-column: 1 / -1;
	}

	.hy-case__body .hy-prose {
		grid-column: 1 / -1;
	}

	.hy-shot--tela,
	.hy-shot--tela:only-child {
		grid-column: 1 / -1;
	}

	.hy-shot--celular,
	.hy-shot--celular:only-child {
		grid-column: 4 / span 6;
	}
}

.hy-next-case {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 0.9rem 2rem;
	align-items: end;
	margin: 0 var(--pad) var(--space);
	padding: clamp(2rem, 5vw, 4rem);
	overflow: hidden;
	border: 1px solid var(--line-2);
	border-radius: 1.9rem;
	background:
		radial-gradient(70% 120% at 100% 0%, color-mix(in srgb, var(--c) 45%, transparent), transparent 62%),
		#0d0f14;
	isolation: isolate;
	transition: border-color 0.5s;
}

.hy-next-case::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: radial-gradient(90% 140% at 100% 0%, color-mix(in srgb, var(--c) 60%, transparent), transparent 66%);
	opacity: 0;
	transition: opacity 0.6s;
}

.hy-next-case > * {
	grid-column: 1;
}

.hy-next-case__t {
	color: var(--fg);
	font-size: clamp(2.6rem, 1rem + 7vw, 7rem);
	font-weight: 600;
	letter-spacing: -0.05em;
	line-height: 0.95;
}

.hy-next-case__d {
	color: var(--fg-2);
	font-family: var(--mono);
	font-size: 0.7rem;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}

.hy-next-case__go {
	display: grid;
	grid-column: 2;
	grid-row: 1 / span 3;
	place-items: center;
	align-self: end;
	width: clamp(3.5rem, 7vw, 6rem);
	height: clamp(3.5rem, 7vw, 6rem);
	border-radius: 50%;
	background: #fff;
	color: #0a0b0e;
	transition: transform 0.7s var(--ease), background-color 0.4s;
}

.hy-next-case__go .hy-ico {
	width: 40%;
	height: auto;
}

.hy-next-case:hover {
	border-color: color-mix(in srgb, var(--c) 70%, transparent);
}

.hy-next-case:hover::before {
	opacity: 1;
}

.hy-next-case:hover .hy-next-case__go {
	background: var(--c);
	transform: translateX(0.6rem) scale(1.06);
}

/* 404 */
.hy-404 {
	position: relative;
	display: grid;
	justify-items: center;
	align-content: center;
	gap: 1.5rem;
	min-height: 100svh;
	padding: 9rem var(--pad) var(--space);
	overflow: clip;
	text-align: center;
}

.hy-404 > :not(.hy-phero__bg) {
	position: relative;
	z-index: 2;
}

.hy-404__n {
	display: flex;
	color: var(--fg);
	font-size: clamp(7rem, 28vw, 20rem);
	font-weight: 700;
	letter-spacing: -0.07em;
	line-height: 0.8;
}

.hy-404__t {
	font-size: clamp(1.8rem, 1.2rem + 2.6vw, 3.25rem);
}

.hy-404__d {
	max-width: 32em;
	font-size: 1.1rem;
}

.hy-404__links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.75rem;
	margin-top: 0.5rem;
}

/* 12. Rodapé --------------------------------------------------------------- */

.hy-footer {
	padding: 0 var(--pad);
	overflow: hidden;
	border-top: 1px solid var(--line);
	background: #05060a;
}

.hy-footer__cta {
	position: relative;
	display: grid;
	gap: 1.75rem;
	justify-items: start;
	margin-top: clamp(3rem, 6vw, 5rem);
	padding: clamp(2.25rem, 5vw, 4.5rem);
	overflow: hidden;
	border: 1px solid var(--line-2);
	border-radius: 2rem;
	background: #0c0e13;
	isolation: isolate;
}

.hy-footer__beam {
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		radial-gradient(55% 90% at 100% 0%, rgba(47, 91, 255, 0.5), transparent 65%),
		radial-gradient(45% 80% at 0% 100%, rgba(147, 75, 255, 0.35), transparent 65%),
		linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px) 0 0 / 3rem 3rem,
		linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px) 0 0 / 3rem 3rem;
	transition: transform 1.4s var(--ease);
}

.hy-footer__cta:hover .hy-footer__beam {
	transform: scale(1.06);
}

.hy-footer__big {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 2rem;
	align-items: end;
	width: 100%;
	color: var(--fg);
	font-size: clamp(2.1rem, 1rem + 4.6vw, 5rem);
	font-weight: 600;
	letter-spacing: -0.045em;
	line-height: 1.02;
}

.hy-footer__big > span:first-child {
	max-width: 13em;
}

.hy-footer__go {
	display: grid;
	place-items: center;
	width: clamp(3.5rem, 7vw, 6rem);
	height: clamp(3.5rem, 7vw, 6rem);
	border-radius: 50%;
	background: var(--grad);
	box-shadow: 0 0 60px -8px rgba(86, 80, 255, 0.9);
	color: #fff;
	transition: transform 0.7s var(--ease);
}

.hy-footer__go .hy-ico {
	width: 38%;
	height: auto;
}

.hy-footer__big:hover .hy-footer__go {
	transform: rotate(45deg) scale(1.08);
}

.hy-footer__grid {
	display: grid;
	grid-template-columns: minmax(0, 2.2fr) repeat(3, minmax(0, 1fr));
	gap: 3rem 2rem;
	padding: clamp(3.5rem, 6vw, 5.5rem) 0;
}

.hy-footer__brand {
	display: grid;
	gap: 1.4rem;
	align-content: start;
	justify-items: start;
	color: var(--fg);
}

.hy-footer__brand p {
	max-width: 18em;
	color: var(--fg-2);
	font-size: 1.1rem;
	line-height: 1.45;
}

.hy-logo--footer {
	height: 1.9rem;
}

.hy-footer__h {
	margin-bottom: 1.2rem;
	color: var(--fg-3);
	font-family: var(--mono);
	font-size: 0.68rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.hy-footer__list {
	display: grid;
	gap: 0.65rem;
	color: var(--fg-2);
}

.hy-footer__list a,
.hy-footer__legal a,
.hy-footer__top {
	transition: color 0.3s;
}

.hy-footer__list a:hover,
.hy-footer__legal a:hover,
.hy-footer__top:hover {
	color: var(--sky);
}

/* O logo gigante: só o contorno, que acende em gradiente quando entra na tela. */
.hy-footer__mark {
	position: relative;
}

.hy-logo--giant {
	width: 100%;
	height: auto;
	fill: rgba(255, 255, 255, 0.03);
	stroke: rgba(255, 255, 255, 0.16);
	stroke-width: 1.2;
}

/* Uma luz percorre o interior do logo (a máscara é o próprio logo). */
.hy-footer__mark::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg, transparent 25%, rgba(72, 100, 255, 0.55) 45%, rgba(147, 75, 255, 0.45) 58%, transparent 78%);
	background-size: 260% 100%;
	-webkit-mask: url("../img/hybriun-logo.svg") center / 100% 100% no-repeat;
	mask: url("../img/hybriun-logo.svg") center / 100% 100% no-repeat;
	animation: hy-sweep 9s linear infinite;
	pointer-events: none;
}

@keyframes hy-sweep {
	from { background-position: 120% 0; }
	to { background-position: -120% 0; }
}

.hy-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem 2rem;
	margin-top: clamp(1.5rem, 3vw, 2.5rem);
	padding: 1.5rem 0 1.75rem;
	border-top: 1px solid var(--line);
	color: var(--fg-3);
	font-family: var(--mono);
	font-size: 0.68rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.hy-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
}

@media (max-width: 56rem) {
	.hy-footer__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.hy-footer__brand {
		grid-column: 1 / -1;
	}
}

/* 13. Movimento ------------------------------------------------------------ */

/* .hy-anim só existe com JavaScript ativo e sem preferência por movimento reduzido.
   Sem ela, todo o conteúdo aparece imediatamente. As revelações usam a propriedade
   "translate" para não brigar com os "transform" dos componentes. */

.hy-anim .hy-wi {
	translate: 0 112%;
	transition: translate 1.1s var(--ease);
	transition-delay: calc(var(--d, 0ms) + var(--i, 0) * 34ms);
}

.hy-anim .is-in .hy-wi {
	translate: 0 0;
}

/* Topos de página: entrada em CSS puro, desde o primeiro quadro. */
.hy-anim :is(.hy-display, .hy-phero__t) .hy-wi {
	animation: hy-word 1.15s var(--ease) both;
	animation-delay: calc(0.15s + var(--i, 0) * 45ms);
}

@keyframes hy-word {
	from { translate: 0 112%; }
	to { translate: 0 0; }
}

.hy-anim :is(.hy-hero__text > :not(.hy-display), .hy-phero__main > :not(.hy-phero__t), .hy-phero__art, .hy-404 > :not(.hy-phero__bg)) {
	animation: hy-rise 1.1s var(--ease) both;
	animation-delay: calc(0.35s + var(--n, 0) * 90ms);
}

.hy-anim .hy-hero__text > :nth-child(1),
.hy-anim .hy-phero__main > :nth-child(1) { animation-delay: 0.05s; }
.hy-anim .hy-phero__main > :nth-child(2) { --n: 0.5; }
.hy-anim .hy-hero__text > :nth-child(3),
.hy-anim .hy-phero__main > :nth-child(4) { --n: 3; }
.hy-anim .hy-hero__text > :nth-child(4),
.hy-anim .hy-phero__main > :nth-child(5) { --n: 4; }
.hy-anim .hy-hero__text > :nth-child(5),
.hy-anim .hy-phero__main > :nth-child(6) { --n: 5; }
.hy-anim .hy-phero__art { --n: 3; animation-duration: 1.5s; }
.hy-anim .hy-404 > :nth-child(3) { --n: 1; }
.hy-anim .hy-404 > :nth-child(4) { --n: 2; }
.hy-anim .hy-404 > :nth-child(5) { --n: 3; }
.hy-anim .hy-404 > :nth-child(6) { --n: 4; }

@keyframes hy-rise {
	from {
		opacity: 0;
		translate: 0 1.6rem;
	}
}

/* A vitrine sobe e os feixes de luz acendem. */
.hy-anim .hy-show {
	animation: hy-show 1.6s var(--ease) both 0.5s;
}

@keyframes hy-show {
	from {
		opacity: 0;
		translate: 0 5rem;
	}
}

.hy-anim :is(.hy-hero__bg, .hy-phero__bg) {
	animation: hy-fade 1.8s ease both;
}

@keyframes hy-fade {
	from { opacity: 0; }
}

.hy-anim .hy-float {
	opacity: 0;
	animation: hy-bob 6s ease-in-out infinite alternate, hy-pop 0.9s var(--ease) forwards;
	animation-delay: 0s, calc(1.5s + var(--k, 0) * 0.18s);
}

.hy-anim .hy-float--api { --k: 1; animation-duration: 7.5s, 0.9s; }
.hy-anim .hy-float--build { --k: 2; animation-duration: 8s, 0.9s; }
.hy-anim .hy-float--ux { --k: 3; animation-duration: 6.5s, 0.9s; }

@keyframes hy-pop {
	from {
		opacity: 0;
		scale: 0.8;
	}
	to {
		opacity: 1;
		scale: 1;
	}
}

/* Logo: as duas peças do símbolo se encaixam. */
.hy-anim .hy-header .hy-logo__a {
	animation: hy-lock-a 1.2s var(--ease) both 0.1s;
}

.hy-anim .hy-header .hy-logo__b {
	animation: hy-lock-b 1.2s var(--ease) both 0.1s;
}

@keyframes hy-lock-a {
	from {
		opacity: 0;
		transform: translate(-70px, 90px);
	}
}

@keyframes hy-lock-b {
	from {
		opacity: 0;
		transform: translate(70px, -90px);
	}
}

/* Revelação ao rolar: o JavaScript adiciona .is-in quando o elemento entra na tela. */
.hy-anim :is(
	.hy-head > .hy-label,
	.hy-head > .hy-head__text,
	.hy-about__text > *,
	.hy-stat,
	.hy-bento__card,
	.hy-proj,
	.hy-pcard,
	.hy-pv,
	.hy-tile,
	.hy-orbit,
	.hy-faqs > details,
	.hy-faqwrap__a > *,
	.hy-post,
	.hy-tech,
	.hy-split__a > *,
	.hy-split__b > *,
	.hy-photo,
	.hy-structure__text > *,
	.hy-more,
	.hy-contact__intro > *,
	.hy-form-wrap,
	.hy-section > .wp-block-table,
	.hy-filters,
	.hy-ficha,
	.hy-case__cover,
	.hy-case__body .hy-prose > *,
	.hy-shot,
	.hy-next-case,
	.hy-article__body > *,
	.hy-content > :not(.hy-section),
	.hy-footer__cta,
	.hy-footer__grid > *
) {
	opacity: 0;
	translate: 0 2.2rem;
}

.hy-anim .is-in:is(
	.hy-head > .hy-label,
	.hy-head > .hy-head__text,
	.hy-about__text > *,
	.hy-stat,
	.hy-bento__card,
	.hy-proj,
	.hy-pcard,
	.hy-pv,
	.hy-tile,
	.hy-orbit,
	.hy-faqs > details,
	.hy-faqwrap__a > *,
	.hy-post,
	.hy-tech,
	.hy-split__a > *,
	.hy-split__b > *,
	.hy-photo,
	.hy-structure__text > *,
	.hy-more,
	.hy-contact__intro > *,
	.hy-form-wrap,
	.hy-section > .wp-block-table,
	.hy-filters,
	.hy-ficha,
	.hy-case__cover,
	.hy-case__body .hy-prose > *,
	.hy-shot,
	.hy-next-case,
	.hy-article__body > *,
	.hy-content > :not(.hy-section),
	.hy-footer__cta,
	.hy-footer__grid > *
) {
	opacity: 1;
	translate: 0 0;
	transition-property: opacity, translate, transform, border-color, background-color;
	transition-duration: 0.9s, 1.2s, 0.7s, 0.4s, 0.4s;
	transition-timing-function: var(--ease);
	transition-delay: var(--d, 0ms), var(--d, 0ms), 0s, 0s, 0s;
}

/* As etapas da cena têm o próprio destaque (ativa/inativa): só entram deslizando. */
.hy-anim .hy-step {
	translate: 0 2.2rem;
}

.hy-anim .hy-step.is-in {
	translate: 0 0;
	transition: border-color 0.6s, background-color 0.6s, box-shadow 0.6s, translate 1.2s var(--ease) var(--d, 0ms);
}

/* Cartões escalam levemente ao entrar. */
.hy-anim :is(.hy-bento__card, .hy-pcard, .hy-post, .hy-proj, .hy-case__cover):not(.is-in) {
	scale: 0.96;
}

.hy-anim .is-in:is(.hy-bento__card, .hy-pcard, .hy-post, .hy-proj, .hy-case__cover) {
	scale: 1;
	transition-property: opacity, translate, scale, transform, border-color;
	transition-duration: 0.9s, 1.2s, 1.2s, 0.7s, 0.4s;
	transition-delay: var(--d, 0ms), var(--d, 0ms), var(--d, 0ms), 0s, 0s;
}

/* Chegando por uma transição entre páginas, a capa já vem "voando" do cartão. */
.hy-anim.hy-vt .hy-case__cover {
	opacity: 1;
	scale: 1;
	translate: 0 0;
}

/* Declaração: as palavras acendem conforme a leitura avança. */
.hy-anim .hy-statement__t .hy-sw {
	opacity: 0.2;
	transition: opacity 0.5s;
}

.hy-anim .hy-statement__t .hy-sw.is-on {
	opacity: 1;
}

/* Logo gigante do rodapé */
.hy-anim .hy-footer__mark {
	opacity: 0;
	translate: 0 18%;
	transition: translate 1.6s var(--ease), opacity 1.2s;
}

.hy-anim .hy-footer__mark.is-in {
	opacity: 1;
	translate: 0 0;
}

/* A foto desliza dentro da moldura conforme a página rola (onde há animação ligada à rolagem). */
@supports (animation-timeline: view()) {
	.hy-anim .hy-photo img {
		animation: hy-photo-pan linear both;
		animation-timeline: view();
		animation-range: entry 0% exit 100%;
	}

	@keyframes hy-photo-pan {
		from { translate: 0 -5.5%; }
		to { translate: 0 5.5%; }
	}
}

/* Transições entre páginas (navegadores com View Transitions entre documentos). */
@view-transition {
	navigation: auto;
}

::view-transition-old(root) {
	animation: hy-vt-out 0.3s var(--ease-io) both;
}

::view-transition-new(root) {
	animation: hy-vt-in 0.65s var(--ease) both;
}

::view-transition-group(.hy-morph) {
	animation-duration: 0.7s;
	animation-timing-function: var(--ease);
}

::view-transition-old(.hy-morph),
::view-transition-new(.hy-morph) {
	height: 100%;
	object-fit: cover;
}

@keyframes hy-vt-out {
	to {
		opacity: 0;
		transform: translateY(-0.75rem) scale(0.99);
	}
}

@keyframes hy-vt-in {
	from {
		opacity: 0;
		transform: translateY(1.25rem);
	}
}

@media (prefers-reduced-motion: reduce) {
	@view-transition {
		navigation: none;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	.hy-marquee-wrap .hy-marquee,
	.hy-beam {
		animation: none;
	}

	.hy-show__tilt {
		transform: none;
	}
}

@media print {
	.hy-header,
	.hy-drawer,
	.hy-footer__cta,
	.hy-footer__mark,
	.hy-cursor,
	.hy-aura,
	.hy-progress,
	.hy-heroviz,
	.hy-phero__bg,
	.hy-phero__art,
	body::before {
		display: none !important;
	}

	html,
	body {
		background: #fff;
		color: #111;
	}
}