/* ============================================================
   Site Hans Werner — identidade azul bebê sobre o CSS base
   Tokens, texturas, bento, glows, micro-interações e mobile
   ============================================================ */

:root {
	--hw-blue: #8fd3ff;
	--hw-blue-soft: #c7e6ff;
	--hw-blue-deep: #4fa8ec;
	--hw-blue-ink: #0a0e14;
	--hw-glow-13: rgba(143, 211, 255, .13);
	--hw-glow-08: rgba(143, 211, 255, .08);
	--hw-grad: linear-gradient(120deg, #4fa8ec 0%, #8fd3ff 55%, #c7e6ff 100%);
	--r-sm: 12px;
	--r-md: 18px;
	--r-lg: 26px;
	--fs-floor: 15px;

	/* ---- escala tipográfica fluida (piso 15px sempre respeitado) ----
	   cresce continuamente entre 360px e 1600px de viewport,
	   sem saltos em breakpoint */
	/* Escala ancorada em px: o rem do site é fluido (~11.4px no desktop),
	   então valores em rem colapsavam no piso. 6 degraus, razão ~1.3. */
	--t-hero:  clamp(46px, 26px + 3.6vw, 72px);
	--t-h2:    clamp(30px, 18px + 2.3vw, 48px);
	--t-h3:    clamp(21px, 15px + 1.0vw, 28px);
	--t-h4:    clamp(17px, 14px + .48vw, 20px);
	--t-lead:  clamp(16px, 14.5px + .26vw, 17.5px);
	--t-body:  clamp(15px, 14px + .18vw, 16px);
	--t-micro: 15px;
}

/* ============================================================
   1. FUNDOS EM CANVAS (no lugar dos vídeos)
   ============================================================ */
.bg-canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	pointer-events: none;
}

body.home section.hero .bg-canvas {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}

.site-footer {
	position: relative;
	overflow: hidden;
}

.site-footer .bg-canvas { z-index: 0; opacity: .55; }

.site-footer > a.brand,
.site-footer > .content,
.site-footer > .end {
	position: relative;
	z-index: 1;
}

/* ============================================================
   2. TEXTURAS — grain global + grid blueprint nas seções escuras
   ============================================================ */
/* leve de verdade: camada fixa 1:1, sem blend (blend + 200% travava o scroll) */
body::after {
	content: "";
	position: fixed;
	inset: 0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
	background-size: 240px 240px;
	background-repeat: repeat;
	opacity: .045;
	pointer-events: none;
	z-index: 2400;
}

/* grid técnico quase imperceptível: textura, nunca concorrência
   com o texto. Some de vez atrás dos blocos de leitura longa. */
section.features,
section.why,
section.faq {
	background-image:
		linear-gradient(rgba(143, 211, 255, .012) 1px, transparent 1px),
		linear-gradient(90deg, rgba(143, 211, 255, .012) 1px, transparent 1px);
	background-size: 96px 96px;
}

/* ============================================================
   3. WATERMARKS numerados por seção (decorativos)
   ============================================================ */
/* clip corta igual a hidden mas NÃO vira contêiner de rolagem —
   é o que mantém o position:sticky do baralho e do retrato vivos.
   A especificidade precisa vencer `body.home section.*` da referência. */
body.home section.features,
body.home section.projects,
body.home section.why,
body.home section.news,
body.home section.ecosystem,
body section.faq {
	position: relative;
	overflow: hidden;
	overflow: clip;
}

section.features::before,
section.projects::before,
section.why::before,
section.news::before,
section.faq::before,
section.investors::before {
	position: absolute;
	right: -0.02em;
	top: .1em;
	font-family: "Hanken Grotesk", sans-serif;
	font-weight: 700;
	font-size: clamp(7rem, 20vw, 19rem);
	line-height: 1;
	letter-spacing: -.04em;
	color: rgba(143, 211, 255, .05);
	pointer-events: none;
	z-index: 0;
}

section.features::before { content: "01"; }
section.projects::before { content: "02"; }
section.why::before { content: "03"; }
section.news::before { content: "05"; }
section.faq::before { content: "?"; }

/* números alternam de lado: quebra o ritmo e dá movimento à página */
section.projects::before,
section.news::before {
	right: auto;
	left: -0.02em;
}

/* a tag numerada do cabeçalho acompanha a alternância */
@media (min-width: 900px) {
	body.home section.projects .section-title .tag,
	body.home section.ecosystem .section-title .tag {
		justify-content: flex-end;
	}

	body.home section.projects .section-title h2,
	body.home section.projects .section-title p {
		text-align: right !important;
	}

	body.home section.projects .section-title {
		flex-direction: row-reverse !important;
	}

	body.home section.projects .section-title p { margin-left: 0; }
}

/* ============================================================
   4. LOADER — grid, tagline animada e wipe azul
   ============================================================ */
.site-loader::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		radial-gradient(circle at 50% 40%, rgba(143, 211, 255, .07), transparent 55%),
		linear-gradient(rgba(143, 211, 255, .03) 1px, transparent 1px),
		linear-gradient(90deg, rgba(143, 211, 255, .03) 1px, transparent 1px);
	background-size: auto, 76px 76px, 76px 76px;
	pointer-events: none;
}

/* a frase é a mensagem, não legenda: grande e logo abaixo do contador */
.site-loader {
	flex-direction: column;
	align-items: center;
}

.site-loader .loader-tagline {
	position: relative;
	left: auto;
	transform: none;
	bottom: auto;
	margin-top: clamp(1.5rem, 4vh, 3rem);
	padding-inline: 1.5rem;
	text-align: center;
	font-family: "Hanken Grotesk", sans-serif;
	font-weight: 600;
	font-size: var(--t-h3);
	line-height: 1.3;
	letter-spacing: -.015em;
	color: #fff;
	white-space: normal;
	max-width: 26ch;
	z-index: 2;
}

/* a segunda linha ganha o azul: é onde está a virada */
.site-loader .loader-tagline .w.hl { color: var(--hw-blue); }

.site-loader .loader-tagline .w {
	display: inline-block;
	opacity: 0;
	transform: translateY(10px);
	transition: opacity .6s ease, transform .6s cubic-bezier(.5, 1, .89, 1);
	transition-delay: calc(var(--i) * 70ms + 300ms);
}

.site-loader.taglive .loader-tagline .w {
	opacity: 1;
	transform: translateY(0);
}

/* o anel volta GRANDE, envolvendo o número — o bug era o .preloader
   colapsar para o tamanho do texto no layout em coluna, o que
   encolhia o círculo num arco solto no canto */
.site-loader .preloader {
	width: clamp(15rem, 36vh, 21rem) !important;
	height: clamp(15rem, 36vh, 21rem) !important;
	max-width: none !important;
	max-height: none !important;
	flex: 0 0 auto;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}

.site-loader .preloader svg {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	transform: rotate(-90deg);
}

/* trilho apagado por trás do arco azul que se desenha */
.site-loader .preloader::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	border: 1px solid hsla(0, 0%, 100%, .12);
	pointer-events: none;
}

.site-loader .preloader .number div {
	transition: transform .16s cubic-bezier(.5, 1, .89, 1), color .3s ease;
}

.site-loader .preloader .number div.pop {
	transform: translateY(-5px);
	color: var(--hw-blue);
}

/* wipe de transição entre loader e site */
.site-transition {
	background: linear-gradient(165deg, #0a0e14 0%, #10202e 55%, #4fa8ec 160%);
	transform: scaleY(0);
	transform-origin: bottom;
	transition: transform .55s cubic-bezier(.85, 0, .15, 1), visibility 0s .55s, opacity 0s .55s;
}

.site-transition.wipe-in {
	visibility: visible;
	opacity: 1;
	transform: scaleY(1);
	transition: transform .55s cubic-bezier(.85, 0, .15, 1);
}

.site-transition.wipe-out {
	visibility: visible;
	opacity: 1;
	transform: scaleY(0);
	transform-origin: top;
	transition: transform .6s cubic-bezier(.85, 0, .15, 1);
}

/* ============================================================
   5. NAVBAR
   ============================================================ */
.navbar .brand,
.site-loader .brand,
.site-footer .brand {
	color: inherit;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: .65rem;
}

.navbar .brand svg.icon {
	width: 2rem;
	height: 2rem;
	flex: 0 0 auto;
	transition: transform .5s cubic-bezier(.5, 1, .89, 1);
}

.navbar .brand:hover svg.icon { transform: rotate(180deg); }

.navbar .brand .type {
	font-family: "Hanken Grotesk", sans-serif;
	font-weight: 600;
	font-size: var(--t-body);
	letter-spacing: .16em;
	text-transform: uppercase;
	white-space: nowrap;
}

.navbar ul.menu li a,
.navbar .open-contact a {
	font-size: var(--t-micro);
}

@media (max-width: 767px) {
	.navbar .brand .type { letter-spacing: .12em; }
}

/* pill central com progresso de rolagem embutido (desktop) */
@media (min-width: 1025px) {
	#hw-progress { display: none; }

	.navbar ul.menu {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		display: flex;
		align-items: center;
		gap: .15rem;
		margin: 0;
		padding: .45rem .55rem calc(.45rem + 2px);
		background: rgba(8, 12, 18, .62);
		-webkit-backdrop-filter: blur(16px) saturate(1.2);
		backdrop-filter: blur(16px) saturate(1.2);
		border: 1px solid rgba(143, 211, 255, .14);
		border-radius: 999px;
		overflow: hidden;
	}

	.navbar ul.menu li { margin: 0 !important; }

	.navbar ul.menu li a {
		display: block;
		padding: .5rem .95rem;
		border-radius: 999px;
		position: relative;
		z-index: 1;
		white-space: nowrap;
		transition: color .3s ease, background .3s ease;
	}

	.navbar ul.menu li a:hover { background: rgba(143, 211, 255, .1); }

	.navbar ul.menu li a.cur {
		color: var(--hw-blue);
		background: rgba(143, 211, 255, .12);
	}

	/* a barra de carregamento vive dentro da pill */
	.navbar ul.menu .menu-prog {
		position: absolute;
		left: 0;
		bottom: 0;
		height: 2.5px;
		width: 100%;
		transform-origin: left center;
		transform: scaleX(var(--p, 0));
		background: var(--hw-grad);
		z-index: 0;
		pointer-events: none;
	}
}

/* ============================================================
   6. HERO (fundo intocado) — subtítulo e pisos de fonte
   ============================================================ */
body.home section.hero .content .title .hero-sub {
	margin: 1.4rem auto 0;
	max-width: 36rem;
	font-size: var(--t-lead);
	line-height: 1.7;
	color: hsla(0, 0%, 100%, .65);
	text-transform: none;
	letter-spacing: 0;
}

body.home section.hero .content .title .hero-sub strong {
	color: var(--hw-blue-soft);
	font-weight: 600;
	/* a referência dava tamanho próprio ao strong e criava um degrau
	   avulso na escala; aqui ele herda a medida do parágrafo */
	font-size: inherit !important;
}

/* nenhum strong/em cria degrau novo: sempre herda do bloco */
main strong, main em, footer strong, footer em { font-size: inherit; }

/* ---- azuis sutis no hero: hierarquia por cor, não só por peso ---- */
body.home section.hero .content .title > p:first-of-type {
	color: var(--hw-blue) !important;
	opacity: .9;
	position: relative;
}

/* ponto que pisca no eyebrow: sinal de "no ar".
   Vive na ÚLTIMA PALAVRA do split (inline), nunca no <p>: o split
   troca o conteúdo por divs .line-container e um ::after no p cairia
   sozinho numa linha abaixo do texto. */
body.home section.hero .content .title > p:first-of-type .word:last-child::after {
	content: "";
	display: inline-block;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--hw-blue);
	margin-left: .6rem;
	vertical-align: middle;
	box-shadow: 0 0 0 0 rgba(143, 211, 255, .7);
	animation: hwBeacon 2.4s ease-out infinite;
}

@keyframes hwBeacon {
	0% { box-shadow: 0 0 0 0 rgba(143, 211, 255, .6); opacity: 1; }
	70% { box-shadow: 0 0 0 9px rgba(143, 211, 255, 0); opacity: .55; }
	100% { box-shadow: 0 0 0 0 rgba(143, 211, 255, 0); opacity: 1; }
}

/* brilho que atravessa a headline uma vez, ao entrar.
   Fica no .title, nunca no h2: overflow:hidden no h2 zera a altura
   dele (os .line-container do split não contribuem altura). */
body.home section.hero .content .title {
	position: relative;
	isolation: isolate;
}

body.home section.hero .content .title::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(105deg, transparent 42%, rgba(199, 230, 255, .22) 50%, transparent 58%);
	transform: translateX(-130%);
	pointer-events: none;
	z-index: 2;
	opacity: 0;
}

body.home section.hero .content .title:has(h2.show)::after {
	animation: hwHeroSheen 1.7s cubic-bezier(.5, 1, .89, 1) 1.1s;
}

@keyframes hwHeroSheen {
	0% { transform: translateX(-130%); opacity: 0; }
	15%, 85% { opacity: 1; }
	100% { transform: translateX(130%); opacity: 0; }
}

/* as palavras azuis do fecho respiram devagar */
body.home section.hero .content .title h2 .word:nth-last-of-type(-n+2) {
	animation: hwGlowSoft 4.5s ease-in-out 2.4s infinite;
}

@keyframes hwGlowSoft {
	0%, 100% { text-shadow: 0 0 0 rgba(143, 211, 255, 0); }
	50% { text-shadow: 0 0 22px rgba(143, 211, 255, .38); }
}

@media (prefers-reduced-motion: reduce) {
	body.home section.hero .content .title > p:first-of-type .word:last-child::after,
	body.home section.hero .content .title::after,
	body.home section.hero .content .title h2 .word:nth-last-of-type(-n+2) {
		animation: none;
	}
}

/* o fecho da frase ("empresa grande.") ganha o azul — realce sólido,
   não gradiente: com o split por palavra, cada uma rodaria o gradiente
   inteiro e o título ficaria manchado */
body.home section.hero .content .title h2 .word:nth-last-of-type(-n+2) {
	color: var(--hw-blue-soft);
}

body.home section.hero .content .side .infos .item .number {
	color: var(--hw-blue-soft) !important;
}

body.home section.hero .content .side .infos .item .number sub,
body.home section.hero .content .side .infos .item .number sup {
	color: var(--hw-blue) !important;
	opacity: .8;
}

body.home section.hero .content .side .infos .item .desc {
	color: hsla(205, 60%, 88%, .55) !important;
}

body.home section.hero .scroll div { color: var(--hw-blue) !important; opacity: .75; }

/* ritmo vertical do bloco do título: a referência deixava 6px entre
   eyebrow e h2, um vão de 74px do h2 pro subtítulo e ZERO antes dos
   botões. Escada equilibrada: 14 / 26 / 30. */
body.home section.hero .content .title > p:first-of-type {
	margin-bottom: 14px !important;
}

body.home section.hero .content .title h2 {
	margin-bottom: 0 !important;
}

body.home section.hero .content .title .hero-sub {
	margin-top: 26px !important;
}

/* respiro entre os dois botões do hero */
body.home section.hero .content .title .buttons {
	gap: 20px;
	margin-top: 30px !important;
}

body.home section.hero .content .title .buttons .btn.default {
	margin-top: 0 !important;
}

@media (max-width: 767px) {
	body.home section.hero .content .title .buttons { gap: 14px; }
}

/* ---- MOBILE: hero enxuta. Some o que o desktop já entrega ---- */
@media (max-width: 767px) {
	/* as 4 estatísticas laterais viram ruído numa tela estreita:
	   a copy do subtítulo já carrega o essencial */
	body.home section.hero .content .side { display: none !important; }

	/* o "Role para ver mais" é redundante: o próprio conteúdo convida */
	body.home section.hero .scroll { display: none !important; }

	/* subtítulo mais curto de leitura, sem cortar palavra nenhuma */
	body.home section.hero .content .title .hero-sub {
		max-width: 30ch;
		margin-top: 1.1rem;
	}

	body.home section.hero .content .title .buttons { margin-top: 1.6rem; }

	body.home section.hero .content { justify-content: center; }

	/* com o título maior, o bloco precisa começar abaixo da navbar */
	body.home section.hero .content .title {
		padding-top: 7.5rem !important;
		padding-bottom: 1rem;
	}
}

body.home section.hero .content .side .infos .item .desc {
	font-size: var(--t-micro);
}

/* o número da estatística entra na escala (era um tamanho avulso) */
body.home section.hero .content .side .infos .item .number {
	font-size: var(--t-h3) !important;
}

body.home section.hero .content .title > p:first-of-type {
	font-size: var(--t-micro);
}

body.home section.hero .scroll div {
	font-size: var(--t-micro);
}

@media (max-width: 767px) {
	body.home section.hero .content .title .hero-sub { max-width: 32ch; }
}

/* ============================================================
   6b. ABRANGÊNCIA — mesma linguagem da CTA: fundo claro, centrado
   e direto. Diz que a bagagem vem antes da ferramenta.
   ============================================================ */
section.scope {
	position: relative;
	overflow: clip;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	color: #06131f;
	padding: clamp(4.5rem, 9vh, 7rem) 1.25rem;
}

@media (min-width: 1025px) {
	section.scope {
		padding-left: max(2.5rem, calc((100% - 74rem) / 2));
		padding-right: max(2.5rem, calc((100% - 74rem) / 2));
	}
}

section.scope .bg-canvas { z-index: 0; }

section.scope .scope-rings {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	pointer-events: none;
	overflow: visible;
}

section.scope .scope-rings circle {
	fill: none;
	stroke: rgba(6, 19, 31, .16);
	stroke-width: 1;
	vector-effect: non-scaling-stroke;
	transform-origin: 600px 350px;
	animation: hwRingBreathe 9s ease-in-out infinite;
}

section.scope .scope-rings circle:nth-child(2) { animation-delay: -2.2s; stroke: rgba(6, 19, 31, .12); }
section.scope .scope-rings circle:nth-child(3) { animation-delay: -4.4s; stroke: rgba(6, 19, 31, .09); }
section.scope .scope-rings circle:nth-child(4) { animation-delay: -6.6s; stroke: rgba(6, 19, 31, .06); }

/* só o conteúdo sobe de camada: as duas camadas de fundo continuam
   absolutas (senão o canvas entra no fluxo e estica a seção) */
section.scope > :not(.bg-canvas):not(.scope-rings) {
	position: relative;
	z-index: 1;
}

section.scope .scope-eyebrow {
	font-size: var(--t-micro);
	letter-spacing: .18em;
	text-transform: uppercase;
	color: rgba(6, 19, 31, .55);
	margin-bottom: 1.2rem;
}

section.scope h2 {
	font-family: "Hanken Grotesk", sans-serif;
	font-weight: 600;
	font-size: var(--t-h2);
	line-height: 1.08;
	letter-spacing: -.03em;
	color: #06131f;
	max-width: 22ch;
}

/* a segunda linha do título carrega o peso da bagagem */
section.scope h2 .line-container:last-child .word { color: #0d3350; }

section.scope .scope-sub {
	margin-top: 1.4rem;
	max-width: 56ch;
	font-size: var(--t-lead);
	line-height: 1.72;
	color: rgba(6, 19, 31, .74);
}

/* ---- vídeo: fachada leve (o player do YouTube só carrega no clique) ---- */
section.scope .scope-video {
	width: 100%;
	max-width: 52rem;
	margin-top: clamp(2.2rem, 4.5vw, 3.4rem);
}

.video-facade {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	border: 0;
	padding: 0;
	border-radius: var(--r-lg);
	overflow: hidden;
	cursor: pointer;
	background: #06131f;
	box-shadow: 0 26px 60px -30px rgba(6, 19, 31, .75);
	transition: transform .45s cubic-bezier(.5, 1, .89, 1), box-shadow .45s ease;
}

.video-facade:hover { transform: translateY(-4px); box-shadow: 0 36px 76px -32px rgba(6, 19, 31, .85); }

.video-facade:focus-visible { outline: 3px solid #06131f; outline-offset: 4px; }

.video-facade .vf-poster {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 28%;
	filter: grayscale(12%) contrast(1.05);
	transition: transform .8s cubic-bezier(.5, 1, .89, 1);
}

.video-facade:hover .vf-poster { transform: scale(1.04); }

.video-facade .vf-shade {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(4, 8, 13, .9) 8%, rgba(4, 8, 13, .3) 48%, rgba(4, 8, 13, .12));
}

/* botão de play */
.video-facade .vf-play {
	position: absolute;
	left: 50%;
	top: 46%;
	transform: translate(-50%, -50%);
	width: clamp(4.2rem, 8vw, 5.4rem);
	height: clamp(4.2rem, 8vw, 5.4rem);
	border-radius: 50%;
	background: var(--hw-grad);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 0 0 0 rgba(143, 211, 255, .55);
	transition: transform .35s cubic-bezier(.5, 1, .89, 1);
	animation: hwPlayPulse 3s ease-out infinite;
}

.video-facade:hover .vf-play { transform: translate(-50%, -50%) scale(1.08); }

.video-facade .vf-play svg {
	width: 42%;
	height: 42%;
	fill: #06131f;
	margin-left: 8%;
}

@keyframes hwPlayPulse {
	0% { box-shadow: 0 0 0 0 rgba(143, 211, 255, .5); }
	70% { box-shadow: 0 0 0 22px rgba(143, 211, 255, 0); }
	100% { box-shadow: 0 0 0 0 rgba(143, 211, 255, 0); }
}

.video-facade .vf-meta {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 1.4rem 1.5rem;
	display: flex;
	flex-direction: column;
	gap: .25rem;
	text-align: left;
}

.video-facade .vf-label {
	font-size: var(--t-micro);
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--hw-blue);
}

.video-facade .vf-desc {
	font-family: "Hanken Grotesk", sans-serif;
	font-weight: 600;
	font-size: var(--t-h4);
	line-height: 1.25;
	color: #fff;
}

/* ---- modal do player ---- */
.video-modal {
	position: fixed;
	inset: 0;
	z-index: 3200;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(1rem, 4vw, 3rem);
	background: rgba(4, 8, 13, .92);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	opacity: 0;
	transition: opacity .35s ease;
}

.video-modal[hidden] { display: none; }

.video-modal.on { opacity: 1; }

.video-modal .vm-frame {
	width: min(100%, 68rem);
	aspect-ratio: 16 / 9;
	border-radius: var(--r-lg);
	overflow: hidden;
	background: #000;
	box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .9);
	transform: scale(.96);
	transition: transform .4s cubic-bezier(.5, 1, .89, 1);
}

.video-modal.on .vm-frame { transform: scale(1); }

.video-modal iframe {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

.video-modal .vm-close {
	position: absolute;
	top: clamp(1rem, 3vw, 2rem);
	right: clamp(1rem, 3vw, 2rem);
	width: 2.9rem;
	height: 2.9rem;
	border-radius: 50%;
	border: 1px solid rgba(143, 211, 255, .3);
	background: rgba(143, 211, 255, .08);
	cursor: pointer;
	transition: background .3s ease, border-color .3s ease, transform .3s ease;
}

.video-modal .vm-close:hover {
	background: rgba(143, 211, 255, .2);
	border-color: var(--hw-blue);
	transform: rotate(90deg);
}

.video-modal .vm-close::before,
.video-modal .vm-close::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 1.1rem;
	height: 1.5px;
	background: var(--hw-blue);
}

.video-modal .vm-close::before { transform: translate(-50%, -50%) rotate(45deg); }
.video-modal .vm-close::after { transform: translate(-50%, -50%) rotate(-45deg); }

@media (max-width: 600px) {
	.video-facade .vf-desc { font-size: var(--t-lead); }
	.video-facade .vf-meta { padding: 1.1rem 1.1rem; }
}

@media (prefers-reduced-motion: reduce) {
	.video-facade .vf-play { animation: none; }
	.video-facade, .video-facade .vf-poster, .video-modal .vm-frame { transition: none; }
}

/* seis frentes sem card: só tipografia sobre a luz */
section.scope .scope-list {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1.6rem, 3vw, 2.6rem) clamp(1.5rem, 4vw, 3.5rem);
	margin-top: clamp(2.5rem, 5vw, 4rem);
	width: 100%;
	max-width: 62rem;
	text-align: left;
}

section.scope .scope-list li {
	display: flex;
	flex-direction: column;
	gap: .3rem;
	padding-top: .9rem;
	border-top: 1px solid rgba(6, 19, 31, .18);
	transition: border-color .4s ease;
}

section.scope .scope-list li:hover { border-color: rgba(6, 19, 31, .5); }

section.scope .scope-list .k {
	font-family: "Hanken Grotesk", sans-serif;
	font-weight: 600;
	font-size: var(--t-h4);
	line-height: 1.2;
	color: #06131f;
}

section.scope .scope-list .v {
	font-size: var(--t-body);
	line-height: 1.6;
	color: rgba(6, 19, 31, .62);
}

section.scope .scope-note {
	margin-top: clamp(2.2rem, 4vw, 3rem);
	font-size: var(--t-micro);
	letter-spacing: .12em;
	text-transform: uppercase;
	color: rgba(6, 19, 31, .55);
}

section.scope .scope-note::before {
	content: "";
	display: inline-block;
	width: 18px;
	height: 1px;
	background: rgba(6, 19, 31, .45);
	vertical-align: middle;
	margin-right: .6rem;
}

/* etiqueta que enquadra a seção de peças digitais como UMA frente */
.p-frame {
	font-style: normal;
	font-weight: 600;
	color: var(--hw-blue);
}

@media (max-width: 900px) {
	section.scope .scope-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
	section.scope .scope-list {
		grid-template-columns: 1fr;
		text-align: center;
	}
	section.scope .scope-list li { align-items: center; }
}

@media (prefers-reduced-motion: reduce) {
	section.scope .scope-rings circle { animation: none; }
}

/* ============================================================
   7. PROJECTS — bento grid com cantos arredondados
   ============================================================ */
body.home section.projects {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	min-height: 0;
	display: block;
	padding: 6rem 1.25rem 7rem;
}

@media (min-width: 1025px) {
	body.home section.projects { padding: 8.75rem 2.5rem; }
}

body.home section.projects .content {
	position: static !important;
	width: 100% !important;
	height: auto !important;
}

/* header em duas colunas: título à esquerda, apoio à direita */
body.home section.projects .section-title {
	position: static !important;
	max-width: 74rem !important;
	width: 100%;
	margin: 0 auto 3rem !important;
	padding-top: 0 !important;
	text-align: left;
}

@media (min-width: 768px) {
	body.home section.projects .section-title {
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: flex-end;
		gap: 1.4rem 3rem;
	}

	body.home section.projects .section-title .tag {
		flex: 0 0 100%;
		justify-content: flex-start;
		margin-bottom: .4rem;
	}

	body.home section.projects .section-title h2 {
		flex: 1 1 34rem;
		max-width: 44rem;
		text-align: left;
		margin-bottom: 0 !important;
	}

	body.home section.projects .section-title p {
		flex: 0 1 26rem;
		max-width: 26rem;
		text-align: left;
		margin: 0 0 .5rem;
	}
}

/* grid bento: fotos 2×1, etapas 1×1, órbitas fechando o retângulo */
body.home section.projects .content .items {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr);
	grid-auto-flow: dense;
	gap: 1.25rem !important;
	max-width: 74rem;
	margin: 0 auto;
	max-height: none !important;
	padding-bottom: 0 !important;
}

body.home section.projects .content .items .item {
	width: 100% !important;
	height: 100% !important;
	min-height: 0;
	border-radius: var(--r-lg) !important;
	aspect-ratio: 1 / 1;
	background-color: #101418 !important;
	border: 1px solid rgba(143, 211, 255, .1);
	position: relative;
	overflow: hidden;
	transition: transform .45s cubic-bezier(.5, 1, .89, 1), border-color .45s ease;
}

body.home section.projects .content .items .item:not(.none):not(.tile-step) {
	grid-column: span 2;
	aspect-ratio: 16 / 9.5;
	cursor: pointer;
}

/* ---------- BARALHO DE ETAPAS: empilha e descola na rolagem ---------- */
body.home section.projects .deck {
	position: relative;
	/* mesma coluna das outras seções */
	max-width: 74rem;
	margin: clamp(4rem, 8vw, 7rem) auto 0;
	text-align: left;
	/* flex com gap em vez de margem entre as cartas: a restrição do
	   position:sticky considera a CAIXA DE MARGEM do item, então
	   margin-bottom expulsava as cartas de cima cedo demais e a pilha
	   ficava torta. gap ocupa espaço sem entrar nessa conta. */
	display: flex;
	flex-direction: column;
	gap: 26vh;
	/* pista final para a 4ª carta alcançar o topo e descansar lá
	   (padding, não margin: a do último filho colapsaria para fora) */
	padding-bottom: 46vh;
}

/* a pista final não fica vazia: uma frase fecha o processo */
body.home section.projects .deck::after {
	content: "Do briefing à entrega, sem parar a sua operação.";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 14vh;
	text-align: center;
	font-family: "Hanken Grotesk", sans-serif;
	font-weight: 600;
	font-size: var(--t-h3);
	line-height: 1.3;
	letter-spacing: -.02em;
	max-width: 22ch;
	margin: 0 auto;
	background: linear-gradient(100deg, var(--hw-blue-soft), var(--hw-blue) 60%, var(--hw-blue-deep));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	pointer-events: none;
}

body.home section.projects .deck-head { margin-bottom: 0 !important; }

body.home section.projects .deck-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	padding-bottom: 1rem;
	margin-bottom: 1.5rem;
	border-bottom: 1px solid rgba(143, 211, 255, .16);
}

body.home section.projects .deck-k {
	font-size: var(--t-micro);
	letter-spacing: .16em;
	text-transform: uppercase;
	color: hsla(0, 0%, 100%, .5);
}

body.home section.projects .deck-count {
	font-family: "Hanken Grotesk", sans-serif;
	font-size: var(--t-micro);
	letter-spacing: .1em;
	color: hsla(0, 0%, 100%, .4);
	font-variant-numeric: tabular-nums;
}

body.home section.projects .deck-count b {
	color: var(--hw-blue);
	font-weight: 600;
}

body.home section.projects .deck-card {
	position: sticky;
	/* cada carta para um pouco mais abaixo: revela a borda da anterior */
	top: calc(7rem + var(--i) * 1.5rem);
	min-height: 15rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: .6rem;
	padding: clamp(1.8rem, 3.5vw, 2.6rem);
	/* o espaçamento vem do gap do container (ver .deck acima) */
	margin-bottom: 0;
	border-radius: var(--r-lg);
	border: 1px solid rgba(143, 211, 255, .16);
	background:
		linear-gradient(165deg, rgba(143, 211, 255, .07), transparent 55%),
		#080b10;
	/* sombra por cima: a carta seguinte parece pousar sobre a anterior */
	box-shadow: 0 -26px 50px -28px rgba(0, 0, 0, .95), 0 18px 44px -30px rgba(0, 0, 0, .8);
	/* recua e inclina conforme é coberta pela próxima */
	transform:
		scale(var(--s, 1))
		translateY(var(--ty, 0px))
		rotate(var(--rot, 0deg));
	transform-origin: top center;
	transition: border-color .4s ease, box-shadow .4s ease;
	will-change: transform;
}

body.home section.projects .deck-card:last-child { margin-bottom: 0; }

/* cartas já cobertas escurecem levemente: profundidade real da pilha */
body.home section.projects .deck-card::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: #05070b;
	opacity: var(--dim, 0);
	pointer-events: none;
	transition: opacity .2s linear;
}

body.home section.projects .deck-card.top { border-color: rgba(143, 211, 255, .42); }

/* ---- arte animada à direita, no lugar do número ---- */
body.home section.projects .deck-card {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: clamp(1.5rem, 4vw, 3.5rem);
}

body.home section.projects .deck-card .dc-body {
	display: flex;
	flex-direction: column;
	gap: .7rem;
	position: relative;
	z-index: 2;
}

body.home section.projects .deck-card .dc-art {
	position: relative;
	z-index: 2;
	width: clamp(6.5rem, 12vw, 9.5rem);
	aspect-ratio: 1;
	flex: 0 0 auto;
}

body.home section.projects .deck-card .dc-svg {
	width: 100%;
	height: 100%;
	overflow: visible;
}

/* traço padrão de toda a arte */
body.home section.projects .deck-card .dc-svg :is(path, rect, circle) {
	stroke: var(--hw-blue);
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
	fill: none;
	vector-effect: non-scaling-stroke;
}

/* a arte só ganha vida na carta que está no topo da pilha */
body.home section.projects .deck-card .dc-svg { opacity: .38; transition: opacity .5s ease; }
body.home section.projects .deck-card.top .dc-svg { opacity: 1; }

/* --- 01 diagnóstico: documento sendo varrido + lente --- */
.dc-svg .doc rect { opacity: .5; }
.dc-svg .ln { opacity: .55; }
.dc-svg .scan {
	stroke: var(--hw-blue-soft);
	stroke-width: 2;
	filter: drop-shadow(0 0 6px rgba(143, 211, 255, .8));
}
.deck-card.top .dc-svg .scan { animation: dcScan 3.4s ease-in-out infinite; }
@keyframes dcScan {
	0%, 100% { transform: translateY(-32px); opacity: 0; }
	12%, 88% { opacity: 1; }
	50% { transform: translateY(32px); opacity: 1; }
}
.deck-card.top .dc-svg .lens { animation: dcLens 3.4s ease-in-out infinite; transform-origin: 82px 76px; }
@keyframes dcLens {
	0%, 100% { transform: translate(0, 0); }
	50% { transform: translate(-14px, -22px); }
}

/* --- 02 arquitetura: malha que se desenha e nós que acendem --- */
.dc-svg .grid path { opacity: .28; stroke-dasharray: 76; stroke-dashoffset: 76; }
.deck-card.top .dc-svg .grid path { animation: dcDraw 2.6s cubic-bezier(.5,1,.89,1) forwards; }
.dc-svg .grid path:nth-child(1) { animation-delay: .05s; }
.dc-svg .grid path:nth-child(2) { animation-delay: .15s; }
.dc-svg .grid path:nth-child(3) { animation-delay: .25s; }
.dc-svg .grid path:nth-child(4) { animation-delay: .35s; }
.dc-svg .grid path:nth-child(5) { animation-delay: .45s; }
.dc-svg .grid path:nth-child(6) { animation-delay: .55s; }
@keyframes dcDraw { to { stroke-dashoffset: 0; } }

.dc-svg .frame rect { stroke-dasharray: 304; stroke-dashoffset: 304; }
.deck-card.top .dc-svg .frame rect { animation: dcDraw 2.2s cubic-bezier(.5,1,.89,1) .3s forwards; }

.dc-svg .nodes circle { fill: #080b10; opacity: 0; }
.deck-card.top .dc-svg .nodes circle { animation: dcPop 2.6s ease-in-out infinite; }
.dc-svg .nodes circle:nth-child(2) { animation-delay: .18s; }
.dc-svg .nodes circle:nth-child(3) { animation-delay: .36s; }
.dc-svg .nodes circle:nth-child(4) { animation-delay: .54s; }
.dc-svg .nodes circle:nth-child(5) { animation-delay: .72s; }
@keyframes dcPop {
	0%, 70%, 100% { opacity: .35; }
	35% { opacity: 1; }
}

/* --- 03 design: camadas em profundidade + sinal de código --- */
.dc-svg .layers rect:nth-child(1) { opacity: .3; }
.dc-svg .layers rect:nth-child(2) { opacity: .55; }
.dc-svg .layers rect:nth-child(3) { opacity: 1; }
.deck-card.top .dc-svg .layers rect { animation: dcFloat 3.6s ease-in-out infinite; }
.dc-svg .layers rect:nth-child(2) { animation-delay: .2s; }
.dc-svg .layers rect:nth-child(3) { animation-delay: .4s; }
@keyframes dcFloat {
	0%, 100% { transform: translate(0, 0); }
	50% { transform: translate(-7px, -9px); }
}
.dc-svg .slash { stroke: var(--hw-blue-soft); }
.deck-card.top .dc-svg .code { animation: dcPulse 2.8s ease-in-out infinite; }
@keyframes dcPulse {
	0%, 100% { opacity: .55; }
	50% { opacity: 1; }
}

/* --- 04 entrega: ondas de sinal + pacote + confirmação --- */
.dc-svg .waves path { opacity: 0; stroke: var(--hw-blue-soft); }
.deck-card.top .dc-svg .waves path { animation: dcWave 2.8s ease-out infinite; }
.dc-svg .waves path:nth-child(2) { animation-delay: .35s; }
.dc-svg .waves path:nth-child(3) { animation-delay: .7s; }
@keyframes dcWave {
	0% { opacity: 0; }
	25% { opacity: .8; }
	100% { opacity: 0; }
}
.dc-svg .lid, .dc-svg .edge { opacity: .55; }
.dc-svg .check {
	stroke: var(--hw-blue-soft);
	stroke-width: 2;
	stroke-dasharray: 34;
	stroke-dashoffset: 34;
}
.deck-card.top .dc-svg .check { animation: dcCheck 2.8s ease-in-out infinite; }
@keyframes dcCheck {
	0%, 12% { stroke-dashoffset: 34; }
	38%, 78% { stroke-dashoffset: 0; }
	100% { stroke-dashoffset: 34; }
}

@media (max-width: 767px) {
	body.home section.projects .deck-card {
		grid-template-columns: 1fr;
		justify-items: center;
	}
	body.home section.projects .deck-card .dc-body { align-items: center; }
	body.home section.projects .deck-card .dc-art { order: -1; width: 5.5rem; }
}

@media (prefers-reduced-motion: reduce) {
	.dc-svg *, .dc-svg { animation: none !important; }
	.dc-svg .grid path, .dc-svg .frame rect, .dc-svg .check { stroke-dashoffset: 0 !important; }
	.dc-svg .nodes circle, .dc-svg .waves path { opacity: .7 !important; }
}

/* filete de acento à esquerda */
body.home section.projects .deck-card::before {
	content: "";
	position: absolute;
	left: 0;
	top: clamp(1.8rem, 3.5vw, 2.6rem);
	bottom: clamp(1.8rem, 3.5vw, 2.6rem);
	width: 3px;
	border-radius: 0 3px 3px 0;
	background: var(--hw-grad);
	opacity: .28;
	transition: opacity .45s ease;
	z-index: 1;
}

body.home section.projects .deck-card.top::before { opacity: 1; }

body.home section.projects .deck-card h4,
body.home section.projects .deck-card p {
	position: relative;
	z-index: 2;
	max-width: 42ch;
}

body.home section.projects .deck-card h4 {
	font-family: "Hanken Grotesk", sans-serif;
	font-weight: 600;
	font-size: var(--t-h2) !important;
	line-height: 1.1;
	letter-spacing: -.024em;
	color: #fff;
}

body.home section.projects .deck-card p {
	font-size: var(--t-lead);
	line-height: 1.72;
	color: hsla(0, 0%, 100%, .7);
}

@media (max-width: 767px) {
	body.home section.projects .deck { text-align: center; }
	body.home section.projects .deck-card { align-items: center; text-align: center; }
	body.home section.projects .deck-card p { margin-inline: auto; }
}

@media (prefers-reduced-motion: reduce) {
	body.home section.projects .deck-card { position: static; transform: none; }
}

/* etapas do processo como tiles do próprio bento (conteúdo centralizado) */
body.home section.projects .content .items .item.tile-step {
	grid-column: span 1;
	aspect-ratio: auto;
	min-height: 14rem;
	background: #07090d !important;
	padding: 1.6rem 1.3rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: .55rem;
	transition: background .4s ease, border-color .4s ease, transform .45s cubic-bezier(.5, 1, .89, 1);
}

body.home section.projects .content .items .item.tile-step:hover {
	background: #0b1017 !important;
	border-color: rgba(143, 211, 255, .34);
	transform: translateY(-4px);
}

body.home section.projects .items .item.tile-step .n {
	font-size: var(--t-micro);
	letter-spacing: .12em;
	color: var(--hw-blue);
}

body.home section.projects .items .item.tile-step h4 {
	font-family: "Hanken Grotesk", sans-serif;
	font-weight: 600;
	font-size: var(--t-h4);
	color: #fff;
	line-height: 1.3;
}

body.home section.projects .items .item.tile-step p {
	font-size: var(--t-micro);
	line-height: 1.68;
	color: hsla(0, 0%, 100%, .62);
}

body.home section.projects .content .items .item:hover {
	transform: translateY(-4px);
	border-color: rgba(143, 211, 255, .38);
}

body.home section.projects .items .item img {
	width: 100%;
	height: 100%;
	border-radius: 0;
	object-fit: cover;
	aspect-ratio: auto;
	transition: filter .45s ease, transform .6s cubic-bezier(.5, 1, .89, 1);
}

body.home section.projects .items .item:hover img {
	filter: brightness(.4) saturate(.85);
	transform: scale(1.04);
}

/* legenda bento: título sempre visível, descrição no hover */
body.home section.projects .items .item .cap {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	top: auto;
	transform: none;
	width: 100%;
	padding: 2.6rem 1.4rem 1.15rem;
	display: flex;
	flex-direction: column;
	gap: .4rem;
	align-items: flex-start;
	text-align: left;
	background: linear-gradient(to top, rgba(4, 6, 10, .92) 25%, rgba(4, 6, 10, .45) 65%, transparent);
	opacity: 1;
	pointer-events: none;
	z-index: 2;
}

body.home section.projects .items .item .cap strong {
	font-family: "Hanken Grotesk", sans-serif;
	font-weight: 600;
	font-size: var(--t-lead);
	line-height: 1.25;
	color: #fff;
	display: flex;
	align-items: center;
	gap: .5rem;
}

body.home section.projects .items .item .cap strong::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 2px;
	background: var(--hw-grad);
	flex: 0 0 auto;
}

body.home section.projects .items .item .cap span {
	font-size: var(--t-micro);
	line-height: 1.55;
	color: hsla(0, 0%, 100%, .78);
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	transition: max-height .5s cubic-bezier(.5, 1, .89, 1), opacity .4s ease;
}

body.home section.projects .items .item:hover .cap span {
	max-height: 6em;
	opacity: 1;
}

/* órbitas decorativas — família azul bebê */
.orb {
	width: 100%;
	height: 100%;
	aspect-ratio: auto;
	border-radius: 0;
	filter: blur(.5px);
}

.orb-1 { background: radial-gradient(circle at 32% 30%, #8fd3ff 0%, rgba(143, 211, 255, .14) 44%, transparent 72%); }
.orb-2 { background: radial-gradient(circle at 66% 32%, #c7e6ff 0%, rgba(199, 230, 255, .12) 40%, transparent 70%); }
.orb-3 { background: radial-gradient(circle at 40% 62%, #4fa8ec 0%, rgba(79, 168, 236, .16) 44%, transparent 74%); }
.orb-4 { background: radial-gradient(ellipse at 30% 50%, #8fd3ff 0%, rgba(79, 168, 236, .12) 46%, transparent 75%); }
.orb-5 { background: radial-gradient(circle at 45% 35%, #a9dcff 0%, rgba(169, 220, 255, .13) 42%, transparent 72%); }

@media (max-width: 1024px) {
	body.home section.projects .content .items { grid-template-columns: repeat(2, 1fr); }
	body.home section.projects .content .items .item:not(.none):not(.tile-step) { grid-column: span 2; }
	body.home section.projects .content .items .item.tile-step { grid-column: span 1; min-height: 12rem; }
}

@media (max-width: 600px) {
	body.home section.projects .content .items .item.tile-step {
		grid-column: span 2;
		min-height: 0;
		align-items: center;
		text-align: center;
	}
	body.home section.projects .items .item .cap span {
		max-height: 6em;
		opacity: 1;
	}
}

/* ============================================================
   8. WHY ("Três frentes") — fluxo sequencial com linha viva
   A copy diz "sempre nessa ordem": o design agora mostra a ordem.
   ============================================================ */
body.home section.why .flow {
	list-style: none;
	position: relative;
	max-width: 74rem;
	margin: 0 auto;
	padding: 0 0 0 4.5rem;
	counter-reset: none;
}

/* trilho vertical que liga as quatro frentes */
body.home section.why .flow-line {
	position: absolute;
	left: 1.35rem;
	top: .75rem;
	bottom: 3rem;
	width: 2px;
	background: rgba(143, 211, 255, .14);
	border-radius: 2px;
	overflow: hidden;
}

body.home section.why .flow-fill {
	display: block;
	width: 100%;
	height: 100%;
	background: linear-gradient(to bottom, #4fa8ec, #8fd3ff 55%, #c7e6ff);
	transform-origin: top center;
	transform: scaleY(var(--fp, 0));
	transition: transform .18s linear;
}

/* marco de cada etapa */
body.home section.why .flow .step {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1.5rem 2.5rem;
	padding: 0 0 clamp(3rem, 6vw, 5rem);
	opacity: .42;
	transform: translateY(14px);
	transition: opacity .6s ease, transform .6s cubic-bezier(.5, 1, .89, 1);
}

/* respiro maior no fecho da seção, antes do próximo bloco */
body.home section.why .flow .step:last-child {
	padding-bottom: clamp(4rem, 9vw, 8rem);
}

body.home section.why .flow .step.on {
	opacity: 1;
	transform: translateY(0);
}

@media (min-width: 900px) {
	body.home section.why .flow .step {
		grid-template-columns: minmax(0, 1fr) minmax(0, 20rem);
		align-items: center;
	}

	body.home section.why .flow .step:nth-child(odd) .media { justify-self: end; }
}

body.home section.why .flow .dot {
	position: absolute;
	left: -3.85rem;
	top: .1rem;
	width: 1.1rem;
	height: 1.1rem;
	border-radius: 50%;
	background: #0a0e12;
	border: 2px solid rgba(143, 211, 255, .3);
	transition: border-color .5s ease, box-shadow .5s ease, transform .5s cubic-bezier(.5, 1, .89, 1);
}

body.home section.why .flow .step.on .dot {
	border-color: var(--hw-blue);
	box-shadow: 0 0 0 5px rgba(143, 211, 255, .12);
	transform: scale(1.12);
}

body.home section.why .flow .num {
	display: inline-block;
	letter-spacing: .16em;
	color: var(--hw-blue);
	margin-bottom: .7rem;
	opacity: .75;
}

body.home section.why .flow .body h3 {
	font-family: "Hanken Grotesk", sans-serif;
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -.02em;
	color: #fff;
	margin-bottom: .8rem;
}

body.home section.why .flow .step.on .body h3 { color: var(--hw-blue); }

body.home section.why .flow .body h3 { transition: color .5s ease; }

body.home section.why .flow .body p {
	line-height: 1.76;
	color: hsla(0, 0%, 100%, .68);
	max-width: 54ch;
}

body.home section.why .flow .body .btn { margin-top: 1.5rem; }

/* imagem de apoio da etapa */
body.home section.why .flow .media {
	margin: 0;
	width: 100%;
	max-width: 20rem;
	aspect-ratio: 4 / 5;
	border-radius: var(--r-lg);
	overflow: hidden;
	border: 1px solid rgba(143, 211, 255, .14);
}

body.home section.why .flow .media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 30%;
	filter: saturate(.85) contrast(1.03);
	transition: transform .8s cubic-bezier(.5, 1, .89, 1), filter .8s ease;
}

body.home section.why .flow .media:hover img {
	transform: scale(1.045);
	filter: saturate(1) contrast(1.05);
}

/* o fecho não é uma quarta frente: é o resultado das três.
   Rótulo em vez de número, e o marcador da linha muda de forma. */
body.home section.why .flow .num-out {
	font-size: var(--t-micro) !important;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--hw-blue-soft) !important;
	opacity: .8;
}

body.home section.why .flow .step-out .dot {
	background: var(--hw-grad) !important;
	border-color: transparent !important;
	transform: rotate(45deg);
	border-radius: 3px !important;
}

/* ---- "Deixar rodando": anel girando, o sistema em operação ---- */
body.home section.why .flow .ring {
	position: relative;
	width: clamp(9rem, 16vw, 12.5rem);
	aspect-ratio: 1;
	justify-self: center;
	display: flex;
	align-items: center;
	justify-content: center;
}

body.home section.why .flow .ring svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
}

body.home section.why .flow .ring circle {
	fill: none;
	stroke-width: 1.5;
	vector-effect: non-scaling-stroke;
}

body.home section.why .flow .ring .track { stroke: rgba(143, 211, 255, .16); }

/* arco que gira sem parar: o sistema não depende de você */
body.home section.why .flow .ring .arc {
	stroke: var(--hw-blue);
	stroke-linecap: round;
	stroke-dasharray: 74 215;
	transform-origin: 60px 60px;
	filter: drop-shadow(0 0 5px rgba(143, 211, 255, .55));
	animation: hwSpin 2.6s linear infinite;
}

body.home section.why .flow .ring .arc.slow {
	stroke: var(--hw-blue-soft);
	stroke-dasharray: 40 168;
	opacity: .7;
	animation: hwSpinBack 4.2s linear infinite;
}

body.home section.why .flow .ring .core {
	fill: var(--hw-blue);
	stroke: none;
	filter: drop-shadow(0 0 6px rgba(143, 211, 255, .8));
}

body.home section.why .flow .ring .pulse circle {
	stroke: var(--hw-blue);
	opacity: 0;
	transform-origin: 60px 60px;
	animation: hwRipple 2.6s ease-out infinite;
}

body.home section.why .flow .ring-label {
	position: relative;
	z-index: 1;
	margin-top: 4.6rem;
	font-size: var(--t-micro);
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--hw-blue);
	opacity: .7;
}

@keyframes hwSpin { to { transform: rotate(360deg); } }
@keyframes hwSpinBack { to { transform: rotate(-360deg); } }
@keyframes hwRipple {
	0% { transform: scale(.55); opacity: .75; }
	100% { transform: scale(2.1); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
	body.home section.why .flow .ring .arc,
	body.home section.why .flow .ring .pulse circle { animation: none; }
}

/* card único que troca de face conforme a rolagem (pontual <-> contínua) */
body.home section.why .flow .swap {
	position: relative;
	width: 100%;
	max-width: 22rem;
	min-height: 15rem;
	border-radius: var(--r-lg);
	overflow: hidden;
	perspective: 1100px;
	isolation: isolate;
	background:
		radial-gradient(120% 100% at 100% 0%, rgba(79, 168, 236, .22), transparent 58%),
		linear-gradient(168deg, rgba(143, 211, 255, .1), rgba(10, 14, 18, 0) 52%),
		#080b10;
	box-shadow: 0 24px 60px -34px rgba(0, 0, 0, .95);
}

/* moldura em gradiente (borda viva, não linha chapada) */
body.home section.why .flow .swap::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	padding: 1px;
	background: linear-gradient(150deg, rgba(143, 211, 255, .55), rgba(143, 211, 255, .08) 45%, rgba(143, 211, 255, .35));
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	pointer-events: none;
	z-index: 3;
}

/* brilho que atravessa a carta a cada troca */
body.home section.why .flow .swap::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(105deg, transparent 38%, rgba(143, 211, 255, .16) 50%, transparent 62%);
	transform: translateX(-120%);
	pointer-events: none;
	z-index: 2;
}

body.home section.why .flow .swap.flash::after {
	animation: hwSheen .85s cubic-bezier(.5, 1, .89, 1);
}

@keyframes hwSheen {
	to { transform: translateX(120%); }
}

body.home section.why .flow .swap-face {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: .6rem;
	padding: 1.8rem 1.7rem 3rem;
	opacity: 0;
	transform: translateY(18px) rotateX(-14deg);
	transform-origin: center bottom;
	transition: opacity .5s ease, transform .6s cubic-bezier(.5, 1, .89, 1);
	pointer-events: none;
	z-index: 1;
}

body.home section.why .flow .swap-face.on {
	opacity: 1;
	transform: translateY(0) rotateX(0);
	pointer-events: auto;
}

body.home section.why .flow .swap-face.out {
	opacity: 0;
	transform: translateY(-18px) rotateX(14deg);
}

/* etiqueta de formato no topo da face */
body.home section.why .flow .swap-face::before {
	content: "Formato";
	position: absolute;
	left: 1.7rem;
	top: 1.5rem;
	font-size: var(--t-micro);
	letter-spacing: .18em;
	text-transform: uppercase;
	color: hsla(0, 0%, 100%, .38);
}

body.home section.why .flow .swap .opt-k {
	font-family: "Hanken Grotesk", sans-serif;
	font-weight: 600;
	font-size: var(--t-h4);
	color: #fff;
	line-height: 1.2;
	letter-spacing: -.018em;
	display: flex;
	align-items: center;
	gap: .55rem;
}

body.home section.why .flow .swap .opt-k::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 2px;
	background: var(--hw-grad);
	flex: 0 0 auto;
	transform: rotate(45deg);
}

body.home section.why .flow .swap .opt-v {
	font-size: var(--t-body);
	line-height: 1.68;
	color: hsla(0, 0%, 100%, .66);
}

body.home section.why .flow .swap-dots {
	position: absolute;
	left: 1.7rem;
	bottom: 1.4rem;
	display: flex;
	gap: .45rem;
	z-index: 4;
}

body.home section.why .flow .swap-dots i {
	width: 18px;
	height: 3px;
	border-radius: 3px;
	background: rgba(143, 211, 255, .22);
	transition: background .4s ease, width .4s ease;
}

body.home section.why .flow .swap-dots i.on {
	background: var(--hw-grad);
	width: 30px;
}

@media (prefers-reduced-motion: reduce) {
	body.home section.why .flow .swap.flash::after { animation: none; }
}

@media (max-width: 899px) {
	body.home section.why .flow { padding-left: 3.25rem; }
	body.home section.why .flow-line { left: .95rem; }
	body.home section.why .flow .dot { left: -2.9rem; }
	body.home section.why .flow .media { max-width: none; aspect-ratio: 16 / 10; }
	body.home section.why .flow .split { grid-template-columns: 1fr; max-width: none; }
	body.home section.why .flow .split .opt-or { justify-self: center; }
}

@media (prefers-reduced-motion: reduce) {
	body.home section.why .flow .step { opacity: 1; transform: none; }
}

/* ============================================================
   9. ECOSYSTEM ("Todo negócio...") — header 2 colunas + cards
   ============================================================ */
body.home section.ecosystem { padding-bottom: 5rem; }

/* ---- trilho horizontal comandado pela rolagem vertical (desktop) ----
   a seção ganha curso vertical, o conteúdo gruda e os cards desfilam
   para o lado conforme você sobe ou desce a página */
@media (min-width: 1025px) {
	body.home section.ecosystem.rail-scroll {
		height: var(--eco-h, 240vh);
		padding-bottom: 0;
	}

	body.home section.ecosystem.rail-scroll .inner {
		position: sticky;
		top: 0;
		min-height: 100vh;
		display: flex !important;
		flex-direction: column;
		justify-content: center;
		padding-top: 4rem !important;
		padding-bottom: 4rem !important;
	}

	/* o arraste manual sai de cena: quem conduz é o scroll */
	body.home section.ecosystem.rail-scroll .list {
		overflow-x: hidden !important;
		cursor: default !important;
	}
}

/* a referência empilhava título e trilho lado a lado numa coluna
   estreita; aqui o header ocupa a largura toda e o trilho vem abaixo */
body.home section.ecosystem .inner {
	display: block !important;
	width: 100%;
	padding: 0 !important;
}

/* o título ocupava uma coluna fixa de 33.75rem na referência */
body.home section.ecosystem .section-title {
	width: 100% !important;
	max-width: none !important;
	padding-right: 0 !important;
	margin-top: 0 !important;
}

/* a ref indentava a 1ª linha do título e puxava com margem negativa */
body.home section.ecosystem .section-title h2,
body.home section.ecosystem .section-title h2.show {
	text-indent: 0 !important;
	margin-top: 0 !important;
}

body.home section.ecosystem .section-title h2.show .line-container:first-child,
body.home section.ecosystem .section-title h2 .line-container:nth-child(n) {
	padding-left: 0 !important;
}

/* trilho: faixa de cards com respiro, sem fundo sólido */
body.home section.ecosystem .list .list-inner {
	background-color: transparent !important;
	gap: 1.25rem;
	padding-bottom: .25rem;
}

body.home section.ecosystem .list .card { margin-right: 0 !important; }

/* header: título à esquerda, contexto à direita */
@media (min-width: 768px) {
	body.home section.ecosystem .section-title {
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: wrap;
		align-items: flex-end;
		justify-content: space-between;
		gap: 1.2rem 3rem;
		max-width: none !important;
		margin-bottom: 3.2rem !important;
	}

	body.home section.ecosystem .section-title .tag {
		flex: 0 0 100%;
		margin-bottom: .3rem;
	}

	body.home section.ecosystem .section-title h2 {
		flex: 1 1 32rem;
		margin: 0 !important;
		text-align: left;
	}

	body.home section.ecosystem .section-title .eco-sub {
		flex: 0 1 27rem;
		margin: 0 0 .5rem !important;
		text-align: left;
	}
}

body.home section.ecosystem .section-title .eco-sub {
	margin-top: 1.4rem;
	font-size: var(--t-body);
	line-height: 1.72;
	color: hsla(0, 0%, 100%, .66);
	max-width: 27rem;
}

/* cards: pilha vertical limpa, sem título rotacionado */
body.home section.ecosystem .list .card {
	border-radius: var(--r-lg) !important;
	overflow: hidden;
	display: flex !important;
	flex-direction: column !important;
	min-height: 0 !important;
	border: 0 !important;
	position: relative;
	isolation: isolate;
	background:
		radial-gradient(130% 90% at 50% -10%, rgba(79, 168, 236, .22), transparent 60%),
		linear-gradient(168deg, rgba(143, 211, 255, .08), rgba(10, 14, 18, 0) 52%),
		#080b10 !important;
	box-shadow: 0 22px 55px -34px rgba(0, 0, 0, .95);
	transition: transform .5s cubic-bezier(.5, 1, .89, 1), box-shadow .5s ease;
}

/* moldura em gradiente, no lugar da borda chapada */
body.home section.ecosystem .list .card::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	padding: 1px;
	background: linear-gradient(155deg, rgba(143, 211, 255, .45), rgba(143, 211, 255, .06) 48%, rgba(143, 211, 255, .3));
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	opacity: .55;
	transition: opacity .45s ease;
	pointer-events: none;
	z-index: 3;
}

body.home section.ecosystem .list .card:hover {
	transform: translateY(-6px);
	box-shadow: 0 34px 70px -34px rgba(0, 0, 0, 1);
}

body.home section.ecosystem .list .card:hover::after { opacity: 1; }

@media (min-width: 1025px) {
	body.home section.ecosystem .list .card {
		width: 25rem !important;
		min-width: 25rem !important;
		min-height: 25rem !important;
		padding: 2.6rem 2.4rem !important;
	}
}

@media (max-width: 1024px) {
	body.home section.ecosystem .list .card {
		width: 20rem !important;
		min-width: 20rem !important;
		padding: 2rem 1.8rem !important;
	}
}

/* o contador da referência vira etiqueta discreta no topo */
body.home section.ecosystem .list .card::before {
	position: static !important;
	display: block;
	font-size: var(--t-micro) !important;
	letter-spacing: .14em !important;
	text-transform: uppercase;
	color: rgba(143, 211, 255, .45);
	margin-bottom: 1.6rem;
	order: -1;
}

/* título: horizontal, protagonista do card */
body.home section.ecosystem .list .card .side {
	writing-mode: horizontal-tb !important;
	transform: none !important;
	margin: 0 0 1rem !important;
	height: auto !important;
	text-align: center;
	width: 100%;
}

body.home section.ecosystem .list .card .side h4 {
	font-size: var(--t-h3) !important;
	line-height: 1.25 !important;
	letter-spacing: -.015em !important;
	font-weight: 600;
	color: #fff;
	margin: 0 auto !important;
	max-width: 18ch;
	transition: color .4s ease;
}

body.home section.ecosystem .list .card:hover .side h4 { color: var(--hw-blue); }

body.home section.ecosystem .list .card .content {
	flex: 1;
	justify-content: space-between;
	width: 100%;
}

/* índice + linha de falha: cada problema tem a sua fratura */
body.home section.ecosystem .list .card .content .thumb {
	width: 100% !important;
	height: auto !important;
	border-radius: 0 !important;
	background: transparent !important;
	margin: 0 auto 1.5rem !important;
	order: -1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .7rem;
}

/* hashtag no lugar do número: nomeia o problema em uma palavra */
body.home section.ecosystem .list .card .content .thumb .pnum {
	font-family: "Hanken Grotesk", sans-serif;
	font-weight: 600;
	font-size: var(--t-lead);
	line-height: 1.2;
	letter-spacing: -.01em;
	color: var(--hw-blue);
	padding: .45rem .9rem;
	border-radius: 999px;
	background: rgba(143, 211, 255, .1);
	border: 1px solid rgba(143, 211, 255, .22);
	white-space: nowrap;
	transition: background .45s ease, border-color .45s ease, color .45s ease;
}

body.home section.ecosystem .list .card:hover .content .thumb .pnum {
	background: rgba(143, 211, 255, .2);
	border-color: rgba(143, 211, 255, .5);
	color: var(--hw-blue-soft);
}

body.home section.ecosystem .list .card .fault {
	width: 100%;
	height: 2.2rem;
	overflow: visible;
}

body.home section.ecosystem .list .card .fault path {
	fill: none;
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
	vector-effect: non-scaling-stroke;
}

body.home section.ecosystem .list .card .fault .base {
	stroke: rgba(143, 211, 255, .18);
}

/* o pico fica escondido e só "dispara" quando o card entra em cena */
body.home section.ecosystem .list .card .fault .spike {
	stroke: var(--hw-blue);
	stroke-dasharray: 180;
	stroke-dashoffset: 180;
	filter: drop-shadow(0 0 5px rgba(143, 211, 255, .55));
	transition: stroke-dashoffset 1.1s cubic-bezier(.5, 1, .89, 1);
}

body.home section.ecosystem .list .card.is-inview .fault .spike,
body.home section.ecosystem .list .card:hover .fault .spike {
	stroke-dashoffset: 0;
}

body.home section.ecosystem .list .card .content p {
	flex: 1;
	max-width: 30ch;
	margin-bottom: 1.6rem !important;
}

/* trilho de progresso do arraste */
body.home section.ecosystem .rail {
	display: flex;
	align-items: center;
	gap: 1.2rem;
	margin-top: 2.4rem;
	max-width: 74rem;
}

body.home section.ecosystem .rail .drag-hint {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	font-size: var(--t-micro);
	letter-spacing: .14em;
	text-transform: uppercase;
	color: hsla(0, 0%, 100%, .45);
	white-space: nowrap;
}

body.home section.ecosystem .rail .drag-hint::before {
	content: "";
	width: 22px;
	height: 8px;
	border-left: 1px solid var(--hw-blue);
	border-right: 1px solid var(--hw-blue);
	border-top: 1px solid transparent;
	animation: hwDrag 2.4s ease-in-out infinite;
}

@keyframes hwDrag {
	0%, 100% { transform: translateX(-3px); opacity: .5; }
	50% { transform: translateX(3px); opacity: 1; }
}

body.home section.ecosystem .rail .track {
	flex: 1;
	height: 2px;
	background: rgba(143, 211, 255, .14);
	border-radius: 2px;
	overflow: hidden;
}

body.home section.ecosystem .rail .rail-fill {
	display: block;
	height: 100%;
	width: 100%;
	background: var(--hw-grad);
	border-radius: 2px;
	transform-origin: left center;
	transform: scaleX(var(--rp, .18));
	transition: transform .12s linear;
}

@media (prefers-reduced-motion: reduce) {
	body.home section.ecosystem .rail .drag-hint::before { animation: none; }
}

body.home section.ecosystem .list .card .content p {
	font-size: var(--t-body);
}

body.home section.ecosystem .list .card .side h4 {
	font-size: var(--t-body);
}

body.home section.ecosystem .list {
	overflow-x: auto;
	scrollbar-width: none;
	-ms-overflow-style: none;
	/* toque com inércia no celular */
	-webkit-overflow-scrolling: touch;
	touch-action: pan-x pan-y;
}

body.home section.ecosystem .list::-webkit-scrollbar { display: none; }

/* ---- MOBILE: trilho rola com o dedo e respiros mais justos ---- */
@media (max-width: 1024px) {
	body.home section.ecosystem {
		height: auto !important;
		padding-bottom: 3rem;
	}

	body.home section.ecosystem .inner {
		position: static !important;
		min-height: 0 !important;
		padding-top: 0 !important;
		padding-bottom: 0 !important;
	}

	body.home section.ecosystem .list {
		overflow-x: auto !important;
		cursor: grab !important;
		/* sangra até a borda e deixa o próximo card espiando */
		margin-right: -1.25rem !important;
		padding-right: 1.25rem;
		scroll-snap-type: x proximity;
	}

	body.home section.ecosystem .list .card {
		scroll-snap-align: center;
	}

	body.home section.ecosystem .list .list-inner { gap: 1rem; }

	/* espaçamentos do baralho no celular: sem buracos gigantes */
	body.home section.projects .deck {
		gap: 12vh;
		padding-bottom: 20vh;
	}

	body.home section.projects .deck::after {
		bottom: 6vh;
		font-size: var(--t-h4);
	}

	body.home section.projects .deck-card { min-height: 0; }

	/* fluxo das três frentes mais compacto */
	body.home section.why .flow .step { padding-bottom: 2.5rem; }
}

/* ============================================================
   10. FAQ
   ============================================================ */
section.faq {
	background-color: #121212;
	color: #fff;
	padding: 5rem 1.25rem;
	position: relative;
}

@media (min-width: 1025px) {
	section.faq { padding: 8.75rem 2.5rem; }
}

section.faq .section-title {
	max-width: 66rem;
	margin: 0 auto 3rem;
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	position: relative;
	z-index: 1;
}

section.faq .section-title .tag {
	display: flex;
	align-items: center;
	gap: .75rem;
	font-size: var(--t-micro);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: hsla(0, 0%, 100%, .5);
}

section.faq .section-title .tag .name::before {
	content: "";
	display: inline-block;
	width: 20px;
	height: 1px;
	background: var(--hw-blue);
	vertical-align: middle;
	margin-right: .75rem;
}

section.faq .section-title h2 {
	font-family: "Hanken Grotesk", sans-serif;
	font-weight: 500;
	font-size: var(--t-h2);
	line-height: 1.12;
	letter-spacing: -.01em;
	max-width: 42rem;
}

@media (min-width: 1025px) {
}

section.faq .faq-list {
	max-width: 66rem;
	margin: 0 auto;
	border-top: 1px solid hsla(0, 0%, 100%, .16);
	counter-reset: faq;
	position: relative;
	z-index: 1;
}

section.faq details {
	border-bottom: 1px solid hsla(0, 0%, 100%, .16);
	counter-increment: faq;
	overflow: hidden;
}

section.faq summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: baseline;
	gap: 1.4rem;
	padding: 1.6rem 0;
	font-family: "Hanken Grotesk", sans-serif;
	font-weight: 500;
	line-height: 1.4;
	transition: color .3s ease, padding-left .35s cubic-bezier(.5, 1, .89, 1);
}

@media (min-width: 1025px) {
	section.faq summary {
		padding: 2rem 0;
	}
}

section.faq summary::-webkit-details-marker { display: none; }

section.faq summary::before {
	content: counter(faq, decimal-leading-zero);
	font-size: var(--t-micro);
	letter-spacing: .1em;
	color: var(--hw-blue);
	opacity: .75;
	flex: 0 0 auto;
	font-variant-numeric: tabular-nums;
}

section.faq summary:hover {
	color: var(--hw-blue);
	padding-left: .5rem;
}

section.faq summary .q { flex: 1; }

section.faq summary .sig {
	position: relative;
	width: 22px;
	height: 22px;
	flex: 0 0 auto;
	align-self: center;
	transition: transform .35s ease;
}

section.faq summary .sig::before,
section.faq summary .sig::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	background: var(--hw-blue);
	transform: translate(-50%, -50%);
	transition: opacity .35s ease;
}

section.faq summary .sig::before { width: 14px; height: 1.5px; }
section.faq summary .sig::after { width: 1.5px; height: 14px; }

section.faq details[open] summary .sig { transform: rotate(90deg); }
section.faq details[open] summary .sig::after { opacity: 0; }

section.faq details p {
	padding: 0 0 1.9rem calc(1.4rem + 2.2ch);
	max-width: 64ch;
	font-size: var(--t-body);
	line-height: 1.75;
	color: hsla(0, 0%, 100%, .62);
}

@media (max-width: 600px) {
	section.faq details p { padding-left: 0; }
}

/* ============================================================
   11. CTA — conteúdo centrado na altura da seção, fundo claro
   ============================================================ */
body.home section.cta {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	text-align: center;
	position: relative;
	overflow: hidden;
	min-height: 76vh;
	padding-top: clamp(4.5rem, 9vh, 7rem) !important;
	padding-bottom: clamp(4.5rem, 9vh, 7rem) !important;
	color: #06131f;
}

body.home section.cta .bg-canvas { z-index: 0; }

/* círculos concêntricos em traço, na linguagem do hero */
body.home section.cta .cta-rings {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	pointer-events: none;
	overflow: visible;
}

body.home section.cta .cta-rings circle {
	fill: none;
	stroke: rgba(255, 255, 255, .55);
	stroke-width: 1;
	vector-effect: non-scaling-stroke;
	transform-origin: 600px 350px;
	animation: hwRingBreathe 9s ease-in-out infinite;
}

body.home section.cta .cta-rings circle:nth-child(1) { animation-delay: 0s; }
body.home section.cta .cta-rings circle:nth-child(2) { animation-delay: -2.2s; stroke: rgba(255, 255, 255, .42); }
body.home section.cta .cta-rings circle:nth-child(3) { animation-delay: -4.4s; stroke: rgba(255, 255, 255, .3); }
body.home section.cta .cta-rings circle:nth-child(4) { animation-delay: -6.6s; stroke: rgba(255, 255, 255, .2); }

@keyframes hwRingBreathe {
	0%, 100% { transform: scale(1); opacity: .9; }
	50% { transform: scale(1.045); opacity: .55; }
}

@media (prefers-reduced-motion: reduce) {
	body.home section.cta .cta-rings circle { animation: none; }
}

body.home section.cta h2 {
	order: 1;
	position: relative;
	z-index: 1;
	margin: 0 auto !important;
	max-width: 20ch;
	font-size: var(--t-h2) !important;
	line-height: 1.08 !important;
	letter-spacing: -.03em;
	color: #06131f;
}

body.home section.cta .cta-sub {
	order: 2;
	position: relative;
	z-index: 1;
	margin: 1.4rem auto 0;
	max-width: 46ch;
	font-size: var(--t-lead) !important;
	line-height: 1.72;
	color: rgba(6, 19, 31, .76);
}

body.home section.cta > div {
	order: 3;
	position: relative;
	z-index: 1;
	margin-top: 2.4rem;
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	justify-content: center !important;
}

body.home section.cta .cta-note {
	order: 4;
	position: relative;
	z-index: 1;
	margin-top: 2.2rem;
	font-size: var(--t-micro);
	letter-spacing: .12em;
	text-transform: uppercase;
	color: rgba(6, 19, 31, .58);
}

body.home section.cta .cta-note::before {
	content: "";
	display: inline-block;
	width: 18px;
	height: 1px;
	background: rgba(6, 19, 31, .45);
	vertical-align: middle;
	margin-right: .6rem;
}

/* no fundo claro os botões precisam de traço escuro */
body.home section.cta .btn { color: #06131f !important; }

body.home section.cta .btn.solid .container,
body.home section.cta .btn.solid {
	border-color: rgba(6, 19, 31, .35) !important;
}

/* ============================================================
   12. INVESTORS — tiles arredondados com ícones desenháveis
   ============================================================ */
body.home section.investors .list {
	row-gap: 4.5rem !important;
	position: relative;
	z-index: 1;
}

body.home section.investors .list .item { cursor: default; }

body.home section.investors .list .item .container {
	border: 1px solid rgba(143, 211, 255, .14);
	border-radius: var(--r-lg);
	background:
		linear-gradient(160deg, rgba(143, 211, 255, .05), transparent 55%);
	transition: border-color .45s ease, transform .45s cubic-bezier(.5, 1, .89, 1);
}

body.home section.investors .list .item:hover .container {
	border-color: rgba(143, 211, 255, .4);
	transform: translateY(-4px);
}

body.home section.investors .list .item .container svg {
	position: static !important;
	width: 3rem !important;
	height: 3rem !important;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.4;
	stroke-linecap: round;
	stroke-linejoin: round;
}

body.home section.investors .list .item h4 {
	opacity: .85;
	top: calc(100% + 1rem);
	text-align: center;
	font-size: var(--t-body);
}

body.home section.investors .list .item:hover h4 { color: var(--hw-blue); }

/* ============================================================
   13. FOOTER
   ============================================================ */
/* footer enxuto: só a barra final (a CTA acima já faz o convite) */
footer.site-footer {
	padding-top: clamp(2.5rem, 5vw, 4rem) !important;
	padding-bottom: 0 !important;
}

footer.site-footer .brand {
	margin-bottom: clamp(1.5rem, 3vw, 2.5rem) !important;
}

footer.site-footer .end {
	padding-top: clamp(1.2rem, 2.5vw, 2rem) !important;
	padding-bottom: clamp(1.5rem, 3vw, 2.2rem) !important;
	border-top: 1px solid rgba(143, 211, 255, .14);
}
.site-footer .end .copy { font-size: var(--t-micro); }
.site-footer .end ul.menu li a { font-size: var(--t-micro); }
.site-footer .end .to-top div { font-size: var(--t-micro); }

/* ============================================================
   14. MODAL DE CONTATO
   ============================================================ */
.modal-contact { border-radius: var(--r-lg) 0 0 var(--r-lg); }

@media (max-width: 767px) {
	.modal-contact { border-radius: 0; }
}

.modal-contact .contact-channels {
	display: flex;
	flex-direction: column;
	gap: .9rem;
	margin-top: 2rem;
}

.modal-contact .channel {
	display: flex;
	align-items: center;
	gap: 1.1rem;
	padding: 1.1rem 1.25rem;
	border: 1px solid rgba(10, 14, 20, .25);
	border-radius: var(--r-md);
	color: inherit;
	text-decoration: none;
	transition: border-color .3s ease, background .3s ease, transform .3s ease;
}

.modal-contact .channel:hover {
	border-color: rgba(10, 14, 20, .8);
	background: rgba(255, 255, 255, .28);
	transform: translateY(-2px);
}

.modal-contact .channel .ico {
	flex: 0 0 auto;
	width: 2.7rem;
	height: 2.7rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(10, 14, 20, .3);
	border-radius: var(--r-sm);
	background: rgba(255, 255, 255, .25);
}

.modal-contact .channel .ico svg {
	width: 1.2rem;
	height: 1.2rem;
	fill: none;
	stroke: #0a0e14;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.modal-contact .channel .body {
	display: flex;
	flex-direction: column;
	gap: .2rem;
	flex: 1;
	min-width: 0;
}

.modal-contact .channel .label {
	font-size: var(--t-micro);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: rgba(10, 14, 20, .6);
}

.modal-contact .channel .val {
	font-family: "Hanken Grotesk", sans-serif;
	font-weight: 600;
	font-size: var(--t-body);
	color: #0a0e14;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.modal-contact .channel .arr {
	flex: 0 0 auto;
	width: 1rem;
	height: 1rem;
	transition: transform .3s ease;
}

.modal-contact .channel .arr svg {
	width: 100%;
	height: 100%;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.modal-contact .channel:hover .arr { transform: translate(3px, -1px); }

/* ---- formulário do modal: porta de contato sem expor o WhatsApp ---- */
.modal-contact .mc-or {
	display: flex;
	align-items: center;
	gap: .9rem;
	margin: 1.8rem 0 1.2rem;
	font-size: var(--t-micro);
	letter-spacing: .12em;
	text-transform: uppercase;
	color: rgba(10, 14, 20, .5);
}

.modal-contact .mc-or::before,
.modal-contact .mc-or::after {
	content: "";
	flex: 1;
	height: 1px;
	background: rgba(10, 14, 20, .18);
}

.modal-contact .mc-form {
	display: flex;
	flex-direction: column;
	gap: .8rem;
	text-align: left;
}

.modal-contact .mc-field {
	display: flex;
	flex-direction: column;
	gap: .35rem;
}

.modal-contact .mc-field span {
	font-size: var(--t-micro);
	letter-spacing: .06em;
	color: rgba(10, 14, 20, .68);
}

.modal-contact .mc-field input,
.modal-contact .mc-field textarea {
	width: 100%;
	font-family: inherit;
	font-size: var(--t-body);
	color: #06131f;
	background: rgba(255, 255, 255, .55);
	border: 1px solid rgba(10, 14, 20, .22);
	border-radius: var(--r-sm);
	padding: .75rem .9rem;
	transition: border-color .3s ease, background .3s ease;
	resize: vertical;
}

.modal-contact .mc-field input:focus,
.modal-contact .mc-field textarea:focus {
	outline: none;
	border-color: #06131f;
	background: #fff;
}

.modal-contact .mc-field input::placeholder,
.modal-contact .mc-field textarea::placeholder {
	color: rgba(10, 14, 20, .38);
}

.modal-contact .mc-send {
	margin-top: .4rem;
	font-family: inherit;
	font-weight: 600;
	font-size: var(--t-micro);
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #f4fbff;
	background: #06131f;
	border: 0;
	border-radius: var(--r-sm);
	padding: .95rem 1.5rem;
	cursor: pointer;
	transition: transform .3s ease, opacity .3s ease;
}

.modal-contact .mc-send:hover { transform: translateY(-2px); }
.modal-contact .mc-send:disabled { opacity: .55; cursor: default; transform: none; }

.modal-contact .mc-status {
	min-height: 1.2em;
	font-size: var(--t-micro);
	line-height: 1.5;
	color: rgba(10, 14, 20, .68);
}

.modal-contact .mc-status.ok { color: #0b5c2f; font-weight: 600; }
.modal-contact .mc-status.erro { color: #8a1d1d; font-weight: 600; }

.modal-contact .modal-note {
	margin-top: 1.6rem;
	font-size: var(--t-micro);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: rgba(10, 14, 20, .55);
}

.modal-contact > p { font-size: var(--t-body); }

.modal-contact .close::before,
.modal-contact .close::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 1.1rem;
	height: 1.5px;
	background: currentColor;
}

.modal-contact .close::before { transform: translate(-50%, -50%) rotate(45deg); }
.modal-contact .close::after { transform: translate(-50%, -50%) rotate(-45deg); }

/* ============================================================
   15. BOTÕES — pisos, raio bento e mecânica de máscara
   ============================================================ */
.mask-bt .container span { font-size: var(--t-body); }

.btn.solid {
	border-radius: var(--r-sm);
	overflow: hidden;
}

.mask-bt.loop .container span.dup {
	position: absolute;
	left: 50%;
	top: 100%;
	transform: translate3d(-50%, var(--y, 0), 0) !important;
	white-space: nowrap;
}

.mask-bt .clone-container {
	clip-path: circle(var(--r, 0px) at var(--mx, 50%) var(--my, 50%));
	background: var(--hw-grad);
	pointer-events: none;
	overflow: hidden;
	border-radius: inherit;
	font-weight: 600;
}

/* A máscara do hover pinta o fundo de azul claro: TODO o conteúdo
   dentro dela precisa virar escuro, senão fica azul sobre azul.
   (Regra genérica de propósito — não amarrar a nenhuma seção.) */
.clone-container,
.clone-container *,
.mask-bt .clone-container,
.mask-bt .clone-container * {
	color: #06131f !important;
	-webkit-text-fill-color: #06131f !important;
}

.mask-bt .clone-container svg,
.clone-container svg { stroke: #06131f !important; fill: none; }

.mask-bt > svg.mask-circle { display: none; }

/* voltar ao topo: a referência empilha DUAS setas na imagem de fundo
   (truque do loop). Aqui fica uma só, desenhada em CSS. */
footer.site-footer .end .to-top .icon {
	background-image: none !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
}

footer.site-footer .end .to-top .icon::before {
	content: "";
	display: block;
	width: .5rem;
	height: .5rem;
	border-left: 1.5px solid currentColor;
	border-top: 1.5px solid currentColor;
	transform: rotate(45deg) translate(2px, 2px);
	transition: transform .3s ease;
}

footer.site-footer .end .to-top:hover .icon::before {
	transform: rotate(45deg) translate(-1px, -1px);
}

/* ============================================================
   16. CURSOR
   ============================================================ */
[data-ui="znt-cursor"] {
	position: fixed;
	left: 0;
	top: 0;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--hw-blue);
	pointer-events: none;
	z-index: 3000;
	transform: translate(-50%, -50%);
	transition: width .25s ease, height .25s ease, opacity .25s ease, background .25s ease;
	opacity: 0;
	mix-blend-mode: difference;
}

[data-ui="znt-cursor"].on { opacity: 1; }
[data-ui="znt-cursor"].hover { width: 44px; height: 44px; }

@media (hover: none), (pointer: coarse) {
	[data-ui="znt-cursor"] { display: none; }
}

/* ============================================================
   17. GLOWS AZUIS — desktop apenas, nunca no hero
   ============================================================ */
@media (min-width: 1025px) {
	.hw-glow {
		position: absolute;
		width: 30rem;
		aspect-ratio: 1;
		border-radius: 50%;
		background: radial-gradient(circle, var(--hw-glow-13), transparent 62%);
		filter: blur(24px);
		pointer-events: none;
		z-index: 0;
		animation: hwFloat 20s ease-in-out infinite alternate;
	}

	.hw-glow.ga { left: -10rem; top: -6rem; }
	.hw-glow.gb {
		right: -12rem;
		bottom: -8rem;
		width: 36rem;
		background: radial-gradient(circle, var(--hw-glow-08), transparent 60%);
		animation-duration: 26s;
		animation-delay: -8s;
	}

	@keyframes hwFloat {
		0% { transform: translate3d(0, 0, 0) scale(1); }
		50% { transform: translate3d(3rem, 2rem, 0) scale(1.1); }
		100% { transform: translate3d(-2rem, -1.5rem, 0) scale(.95); }
	}

	/* spotlight que acompanha o mouse (sem blend, barato) */
	.hw-spot {
		position: fixed;
		inset: 0;
		background: radial-gradient(32rem at var(--sx, 50%) var(--sy, 40%), rgba(143, 211, 255, .05), transparent 62%);
		pointer-events: none;
		z-index: 5;
		opacity: 0;
		transition: opacity .6s ease;
	}

	.hw-spot.on { opacity: 1; }
}

@media (max-width: 1024px) {
	.hw-glow, .hw-spot { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
	.hw-glow { animation: none; }
	.hw-spot { display: none !important; }
}

/* ============================================================
   18. ÍCONES ANIMADOS (desenho de traço) + micro-interações
   ============================================================ */
[data-draw] svg :is(path, circle, rect, polyline, line) {
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
}

[data-draw].draw-in svg :is(path, circle, rect, polyline, line) {
	stroke-dashoffset: 0;
	transition: stroke-dashoffset 1.3s cubic-bezier(.5, 1, .89, 1) calc(var(--di, 0) * 120ms + 150ms);
}

.hw-tilt {
	will-change: transform;
	transition: transform .25s cubic-bezier(.5, 1, .89, 1);
}

.hw-mag {
	transition: transform .3s cubic-bezier(.5, 1, .89, 1);
}

/* barra de progresso de leitura */
#hw-progress {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 3px;
	background: var(--hw-grad);
	transform-origin: left center;
	transform: scaleX(var(--p, 0));
	z-index: 2200;
	pointer-events: none;
}

/* news: cantos, enquadramento das fotos verticais e hover */
body.home section.news .grid .item {
	border-radius: var(--r-md);
	overflow: hidden;
	transition: transform .45s cubic-bezier(.5, 1, .89, 1), background .45s ease;
}

body.home section.news .grid .item:hover {
	transform: translateY(-4px);
	background: rgba(143, 211, 255, .045);
}

body.home section.news .grid .item .thumb {
	border-radius: var(--r-md);
	overflow: hidden;
}

body.home section.news .grid .item .thumb img {
	object-fit: cover;
	width: 100%;
	height: 100%;
	transition: transform .7s cubic-bezier(.5, 1, .89, 1);
}

body.home section.news .grid .item:hover .thumb img { transform: scale(1.05); }

/* fotos retrato dentro de máscara horizontal: foco no terço certo */
body.home section.news .grid .item:nth-child(1) .thumb img { object-position: center 24%; }
body.home section.news .grid .item:nth-child(2) .thumb img { object-position: center 42%; }
body.home section.news .grid .item:nth-child(3) .thumb img { object-position: center 18%; }
body.home section.news .grid .item:nth-child(4) .thumb img { object-position: center 58%; }

/* ============================================================
   NEWS ("Quem é Hans Werner") — texto solto + retrato com brilho
   Sem cards: a área respira como página de revista.
   ============================================================ */
body.home section.news .about {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(2.5rem, 5vw, 4.5rem);
	max-width: 74rem;
	margin: 0 auto;
	position: relative;
	z-index: 1;
}

@media (min-width: 1025px) {
	body.home section.news .about {
		grid-template-columns: minmax(0, 34rem) minmax(0, 1fr);
		gap: clamp(3rem, 5vw, 5rem);
		align-items: start;
	}

	/* a foto sangra para fora da coluna: presença de página de revista */
	body.home section.news .about .portrait {
		margin-left: clamp(-6rem, -4vw, -2rem);
	}
}

/* retrato solto, grande, com halo azul — sem moldura de card */
body.home section.news .about .portrait {
	position: relative;
	margin: 0;
	width: 100%;
	max-width: 40rem;
	aspect-ratio: 4 / 5;
	border: 0;
	border-radius: 0;
	background: none;
	overflow: visible;
}

@media (min-width: 1025px) {
	body.home section.news .about .portrait {
		position: sticky;
		top: 7rem;
	}
}

/* halo: mesma linguagem luminosa do hero */
body.home section.news .about .portrait::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 122%;
	height: 112%;
	transform: translate(-50%, -50%);
	background:
		radial-gradient(circle at 50% 45%, rgba(79, 168, 236, .38), transparent 62%),
		radial-gradient(circle at 62% 68%, rgba(143, 211, 255, .22), transparent 66%);
	filter: blur(38px);
	z-index: 0;
	pointer-events: none;
}

body.home section.news .about .portrait img {
	position: relative;
	z-index: 1;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 20%;
	display: block;
	border-radius: var(--r-lg);
	/* base do retrato se dissolve no fundo; o topo mantém o canto */
	-webkit-mask-image: linear-gradient(to bottom, #000 62%, rgba(0, 0, 0, .35) 88%, transparent 100%);
	mask-image: linear-gradient(to bottom, #000 62%, rgba(0, 0, 0, .35) 88%, transparent 100%);
	filter: grayscale(18%) contrast(1.06);
	transition: transform .9s cubic-bezier(.5, 1, .89, 1), filter .9s ease;
}

/* moldura em gradiente acompanhando o canto arredondado */
body.home section.news .about .portrait::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: var(--r-lg);
	padding: 1px;
	background: linear-gradient(155deg, rgba(143, 211, 255, .7), rgba(143, 211, 255, .05) 52%, transparent 72%);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	pointer-events: none;
	z-index: 2;
}

/* cantos técnicos: mesma linguagem dos detalhes do site */
body.home section.news .about .portrait .corner {
	position: absolute;
	width: 1.6rem;
	height: 1.6rem;
	border: 1.5px solid var(--hw-blue);
	z-index: 3;
	pointer-events: none;
	opacity: .8;
}

body.home section.news .about .portrait .corner.tl {
	top: -.35rem; left: -.35rem;
	border-right: 0; border-bottom: 0;
	border-top-left-radius: calc(var(--r-lg) * .55);
}

body.home section.news .about .portrait .corner.tr {
	top: -.35rem; right: -.35rem;
	border-left: 0; border-bottom: 0;
	border-top-right-radius: calc(var(--r-lg) * .55);
}

body.home section.news .about .portrait:hover img {
	transform: scale(1.03);
	filter: grayscale(0) contrast(1.08);
}

/* texto corrido, sem card */
body.home section.news .about .prose {
	max-width: 62ch;
	display: flex;
	flex-direction: column;
	gap: 1.35rem;
}

body.home section.news .about .prose p {
	font-size: var(--t-body);
	line-height: 1.82;
	color: hsla(0, 0%, 100%, .68);
}

body.home section.news .about .prose p strong {
	color: #fff;
	font-weight: 600;
}

body.home section.news .about .prose p em {
	font-style: normal;
	color: var(--hw-blue);
	font-weight: 600;
}

/* abertura com mais presença */
body.home section.news .about .prose .lede {
	font-size: var(--t-h3) !important;
	line-height: 1.4 !important;
	color: hsla(0, 0%, 100%, .88) !important;
	padding-bottom: 1.2rem;
	border-bottom: 1px solid rgba(143, 211, 255, .16);
}

body.home section.news .about .prose .lede strong { color: var(--hw-blue); }

/* frase-soco no meio do texto */
body.home section.news .about .prose .pull {
	font-family: "Hanken Grotesk", sans-serif;
	font-weight: 600;
	font-size: var(--t-h3) !important;
	line-height: 1.3 !important;
	letter-spacing: -.018em;
	color: #fff !important;
	padding: .2rem 0 .2rem 1.4rem;
	border-left: 2px solid;
	border-image: linear-gradient(to bottom, #4fa8ec, #8fd3ff) 1;
	margin: .6rem 0;
}

body.home section.news .about .b-link {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	margin-top: .8rem;
	font-size: var(--t-micro);
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #06131f;
	background: var(--hw-grad);
	padding: .85rem 1.5rem;
	border-radius: var(--r-sm);
	font-weight: 600;
	transition: transform .3s ease, filter .3s ease;
}

body.home section.news .about .b-link:hover {
	transform: translateY(-2px);
	filter: brightness(1.08);
}

body.home section.news .about .b-link svg {
	width: 14px;
	height: 14px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform .3s ease;
}

body.home section.news .about .b-link:hover svg { transform: translateX(3px); }

@media (max-width: 1024px) {
	body.home section.news .about .portrait { margin-inline: auto; }
	body.home section.news .about .prose { text-align: center; margin-inline: auto; }
	body.home section.news .about .prose .pull {
		border-left: 0;
		border-top: 2px solid;
		border-image: linear-gradient(to right, #4fa8ec, #8fd3ff) 1;
		padding: 1rem 0 0;
	}
	body.home section.news .about .b-link { align-self: center; }
}

/* diagramação dos cards: data como etiqueta acima do título */
body.home section.news .grid .item .infos .title {
	display: block !important;
}

body.home section.news .grid .item .infos .title .date {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	font-size: var(--t-micro);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--hw-blue);
	margin: 0 0 .7rem !important;
	width: auto !important;
}

body.home section.news .grid .item .infos .title .date::before {
	content: "";
	width: 16px;
	height: 1px;
	background: var(--hw-blue-deep);
}

body.home section.news .grid .item .infos .title h2 {
	font-size: var(--t-h4) !important;
	line-height: 1.28 !important;
	letter-spacing: -.015em;
	margin: 0 0 .6rem !important;
}

body.home section.news .grid .item .infos .desc p {
	font-size: var(--t-body);
	line-height: 1.7 !important;
	color: hsla(0, 0%, 100%, .64);
	max-width: 56ch;
}

/* tag e títulos de seção — pisos */
.tag .number div { font-size: var(--t-micro) !important; }
.tag .name { font-size: var(--t-micro) !important; }
.section-title p { font-size: var(--t-body); }
body.home section.features #fixed-features ul li p { font-size: var(--t-body); }
body.home section.why .flow .body p { font-size: var(--t-body); }
body.home section.why .flow .num { font-size: var(--t-micro); }
.menu-mobile .links ul li a { font-size: var(--t-micro); }
.menu-mobile .copy { font-size: var(--t-micro); }

/* rede de segurança do piso de 15px */
body.home section.hero .content .side .infos .item .number sub,
body.home section.hero .content .side .infos .item .number sup { font-size: var(--t-micro) !important; }
.mask-bt .clone-container span { font-size: var(--t-body) !important; }
section.faq summary .q { font-size: inherit; }
section.faq summary { font-size: var(--t-h4); }

@media (min-width: 1025px) {
	section.faq summary { font-size: var(--t-h4); }
}

/* ============================================================
   18c. RITMO TIPOGRÁFICO — hierarquia fluida e respiros
   ============================================================ */
.section-title h2 {
	font-size: var(--t-h2) !important;
	letter-spacing: -.02em;
	line-height: 1.06;
}

body.home section.hero .content .title h2 {
	font-size: var(--t-hero) !important;
	line-height: 1.04 !important;
	letter-spacing: -.03em;
}

.section-title p {
	font-size: var(--t-lead) !important;
	line-height: 1.75 !important;
	color: hsla(0, 0%, 100%, .68);
	max-width: 46ch;
}

/* corpo de texto do site inteiro na escala fluida */
body.home section.features #fixed-features ul li p,
body.home section.why .flow .body p,
body.home section.ecosystem .list .card .content p,
body.home section.news .about .block p,
section.faq details p,
body.home section.projects .items .item.tile-step p {
	font-size: var(--t-body) !important;
}

body.home section.features #fixed-features ul li h3,
body.home section.why .flow .body h3,
body.home section.news .about .block h3 {
	font-size: var(--t-h3) !important;
}

body.home section.ecosystem .list .card .side h4,
body.home section.projects .items .item .cap strong,
body.home section.projects .items .item.tile-step h4 {
	font-size: var(--t-h4) !important;
}

.section-title .tag { margin-bottom: 1.1rem; }

/* lista da seção IA: título e texto com mais presença */
body.home section.features #fixed-features ul li h3 {
	font-size: var(--t-h3);
	line-height: 1.25;
	letter-spacing: -.012em;
}

body.home section.features #fixed-features ul li p {
	line-height: 1.7;
	color: hsla(0, 0%, 100%, .66);
	max-width: 42ch;
}

/* cards do problema: conteúdo centralizado e leitura confortável */
body.home section.ecosystem .list .card .content {
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
}

body.home section.ecosystem .list .card .content .thumb { margin-left: auto; margin-right: auto; }

body.home section.ecosystem .list .card .content p {
	line-height: 1.7;
	color: hsla(0, 0%, 100%, .72);
	margin-left: auto;
	margin-right: auto;
}

body.home section.ecosystem .list .card .content .btn { margin-left: auto; margin-right: auto; }

body.home section.ecosystem .list .card .side h4 { line-height: 1.35; }

/* respostas do FAQ e textos de apoio */
section.faq details p { color: hsla(0, 0%, 100%, .68); }

body.home section.hero .content .title .hero-sub { color: hsla(0, 0%, 100%, .7); }

/* aproveitamento de largura nas seções de conteúdo */
@media (min-width: 1025px) {
	body.home section.projects { padding: 7rem 2.5rem 7.5rem; }
	section.faq { padding: 7.5rem 2.5rem; }
	section.faq .section-title,
	section.faq .faq-list { max-width: 70rem; }
}

/* ============================================================
   18b. TABLET (768–1024) — navbar compacta e why em 2 colunas
   ============================================================ */
@media (min-width: 768px) and (max-width: 1024px) {
	.navbar ul.menu { display: none !important; }

	.navbar .toggler { display: block !important; }

	.navbar .open-contact { margin-left: auto; margin-right: 1.25rem; }

}

/* ============================================================
   19. MOBILE — centralização de textos, títulos e elementos
   ============================================================ */
@media (max-width: 767px) {
	.section-title,
	.section-title h2,
	.section-title p,
	.section-title > div {
		text-align: center !important;
	}

	.section-title .tag {
		justify-content: center;
		margin-left: auto;
		margin-right: auto;
	}

	.section-title .btn { margin: 0 auto; }

	body.home section.hero .content .side .infos .item {
		text-align: center;
	}

	body.home section.features #fixed-features ul li {
		text-align: center;
	}

	body.home section.features #fixed-features ul li .num {
		margin-left: auto;
		margin-right: auto;
	}

	body.home section.projects .steps { text-align: center; }
	body.home section.projects .items .item .cap {
		align-items: center;
		text-align: center;
	}
	body.home section.projects .items .item .cap strong { justify-content: center; }

	body.home section.why .flow .body { text-align: center; }

	body.home section.ecosystem .section-title .eco-sub {
		margin-left: auto;
		margin-right: auto;
	}

	body.home section.ecosystem .list .card .content {
		text-align: center;
	}

	body.home section.ecosystem .list .card .content .thumb {
		margin-left: auto;
		margin-right: auto;
	}

	body.home section.news .grid .item .infos,
	body.home section.news .grid .item .infos .title,
	body.home section.news .grid .item .infos .desc {
		text-align: center;
	}

	section.faq .section-title { align-items: center; }
	section.faq summary { text-align: center; }
	section.faq details p {
		text-align: center;
		margin: 0 auto;
	}

	body.home section.investors .section-title,
	body.home section.investors .section-title h2 { text-align: center; }

	.site-footer .end { text-align: center; }
	.site-footer > a.brand { display: flex; justify-content: center; }

	.modal-contact h3,
	.modal-contact > p,
	.modal-contact .modal-note { text-align: center; }
}

/* ============================================================
   19b. MONTAGEM DO BENTO — peças que voam e encaixam
   ============================================================ */
.hw-assemble {
	transform: translate3d(var(--ax, 0), calc(var(--ay, 0px) + var(--py, 0px)), 0) scale(.9);
	opacity: 0;
	transition:
		transform .78s cubic-bezier(.22, 1.4, .36, 1) var(--ad, 0ms),
		opacity .5s ease var(--ad, 0ms);
	will-change: transform, opacity;
}

.hw-assemble.snap {
	transform: translate3d(0, var(--py, 0px), 0) scale(1);
	opacity: 1;
}

/* depois do encaixe, o parallax assume sozinho (sem overshoot) */
.hw-assemble.snap {
	transition:
		transform .78s cubic-bezier(.22, 1.4, .36, 1) var(--ad, 0ms),
		opacity .5s ease var(--ad, 0ms);
}

@media (prefers-reduced-motion: reduce) {
	.hw-assemble { transform: none !important; opacity: 1 !important; transition: none !important; }
}

/* ============================================================
   19c. BORDA QUE SE DESENHA ao entrar em cena
   ============================================================ */
.hw-stroke { position: relative; }

.hw-stroke::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	padding: 1px;
	background: conic-gradient(from var(--sa, 0deg), var(--hw-blue) 0deg, transparent var(--sw, 0deg));
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	opacity: 0;
	transition: opacity .5s ease;
	pointer-events: none;
}

.hw-stroke.drawn::after { opacity: .55; }

/* ============================================================
   19d. TÍTULOS revelados por cortina (wipe) em vez de fade
   ============================================================ */
[data-split] .line-container .word {
	-webkit-clip-path: inset(0 0 -12% 0);
	clip-path: inset(0 0 -12% 0);
}

/* ============================================================
   19e. MENU MOBILE — painel escuro, numerado e com entrada em cascata
   ============================================================ */
.menu-mobile {
	background:
		radial-gradient(120% 80% at 100% 0%, rgba(79, 168, 236, .22), transparent 62%),
		radial-gradient(100% 70% at 0% 100%, rgba(143, 211, 255, .12), transparent 60%),
		#080b10 !important;
	color: #fff !important;
	padding: 6.5rem 1.75rem 2rem !important;
	display: flex !important;
	flex-direction: column;
	justify-content: space-between;
	overflow-y: auto;
}

/* a referência pintava o painel de cor sólida por cima */
.menu-mobile::before { display: none !important; }

/* grade técnica de fundo, igual às seções */
.menu-mobile::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(143, 211, 255, .04) 1px, transparent 1px),
		linear-gradient(90deg, rgba(143, 211, 255, .04) 1px, transparent 1px);
	background-size: 76px 76px;
	pointer-events: none;
	z-index: 0;
}

.menu-mobile .content,
.menu-mobile .links,
.menu-mobile .copy { position: relative; z-index: 1; }

.menu-mobile .content ul {
	counter-reset: mnav;
	display: flex;
	flex-direction: column;
}

.menu-mobile .content ul li {
	counter-increment: mnav;
	border: 0 !important;
	opacity: 0;
	transform: translateY(18px);
	transition: opacity .45s ease, transform .5s cubic-bezier(.5, 1, .89, 1);
	transition-delay: calc(var(--mi, 0) * 55ms + 120ms);
}

.is-menu-open .menu-mobile .content ul li {
	opacity: 1;
	transform: translateY(0);
}

/* some com os filetes que a referência desenhava em ::before/::after */
.menu-mobile .content ul li::before,
.menu-mobile .content ul li::after {
	display: none !important;
}

.menu-mobile .content ul li a {
	display: flex !important;
	align-items: baseline;
	gap: .9rem;
	padding: .95rem 0 !important;
	color: #fff !important;
	font-family: "Hanken Grotesk", sans-serif;
	font-weight: 600;
	font-size: var(--t-h3) !important;
	line-height: 1.15;
	letter-spacing: -.02em;
	border-bottom: 1px solid rgba(143, 211, 255, .14);
	transition: color .3s ease, padding-left .35s cubic-bezier(.5, 1, .89, 1);
}

/* índice numerado antes de cada item */
.menu-mobile .content ul li a::before {
	content: counter(mnav, decimal-leading-zero);
	font-size: var(--t-micro);
	font-weight: 500;
	letter-spacing: .12em;
	color: var(--hw-blue);
	opacity: .65;
	flex: 0 0 auto;
	font-variant-numeric: tabular-nums;
}

.menu-mobile .content ul li a:active,
.menu-mobile .content ul li a:hover {
	color: var(--hw-blue) !important;
	padding-left: .4rem !important;
}

/* o último item é o convite: vira botão cheio */
.menu-mobile .content ul li:last-child a {
	margin-top: 1.4rem;
	justify-content: center;
	border-bottom: 0;
	border-radius: var(--r-sm);
	background: var(--hw-grad);
	color: #06131f !important;
	font-size: var(--t-h4) !important;
	padding: 1rem 1.25rem !important;
	letter-spacing: 0;
}

.menu-mobile .content ul li:last-child a::before { display: none; }

/* rodapé do painel */
.menu-mobile .links ul {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem 1.5rem;
	justify-content: center;
	padding-top: 1.5rem;
	border-top: 1px solid rgba(143, 211, 255, .14);
}

.menu-mobile .links ul li a {
	color: hsla(0, 0%, 100%, .6) !important;
	font-size: var(--t-micro);
	transition: color .3s ease;
}

.menu-mobile .links ul li a:hover { color: var(--hw-blue) !important; }

.menu-mobile .copy {
	text-align: center;
	margin-top: 1.1rem;
	font-size: var(--t-micro);
	color: hsla(0, 0%, 100%, .35);
}

/* botão de fechar com contraste no painel escuro */
.is-menu-open .navbar { color: #fff !important; }

@media (prefers-reduced-motion: reduce) {
	.menu-mobile .content ul li { opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   19f. SAÍDAS DE CONVERSÃO — nenhuma seção longa termina sem porta
   ============================================================ */
.faq-out,
.eco-out {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
	text-align: center;
	max-width: 74rem;
	margin: clamp(2.5rem, 5vw, 3.5rem) auto 0;
	padding-top: clamp(2rem, 4vw, 3rem);
	border-top: 1px solid rgba(143, 211, 255, .14);
	position: relative;
	z-index: 2;
}

.faq-out p,
.eco-out p {
	font-family: "Hanken Grotesk", sans-serif;
	font-weight: 600;
	font-size: var(--t-h3);
	line-height: 1.25;
	letter-spacing: -.02em;
	color: #fff;
}

/* link inline dentro das respostas do FAQ */
.faq-link {
	color: var(--hw-blue);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
	transition: color .3s ease;
}

.faq-link:hover { color: var(--hw-blue-soft); }

/* ============================================================
   20. DETALHES FINAIS
   ============================================================ */
/* rolagem livre: nada de snap; suavidade via lerp no JS */
html, body {
	scroll-behavior: auto;
	scroll-snap-type: none !important;
}

/* o modal de contato fica estacionado fora da tela à direita e criava
   rolagem horizontal; clip corta sem virar contêiner de rolagem
   (ao contrário de hidden, que quebraria o position:sticky do retrato) */
html {
	overflow-x: clip;
}

/* A referência montava o locomotive-scroll com overflow:hidden em body,
   main e .scroll-container. Cada um desses vira contêiner de rolagem e
   mata o position:sticky. Como o corte lateral já é feito pelo html
   acima, aqui eles voltam a ser transparentes para o sticky. */
body,
.main-wrapper,
.scroll-container,
main {
	/* clip no eixo X corta o que vaza (círculos do hero, modal fora da
	   tela) sem virar contêiner de rolagem; Y visível preserva o sticky */
	overflow-x: clip !important;
	overflow-y: visible !important;
}

/* campo que se organiza: caos -> grade, conforme a rolagem (desktop) */
/* fica ATRÁS do conteúdo (z-index baixo) e bem discreto: é textura de
   fundo, não camada por cima do texto */
#hw-field {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 0;
	opacity: .29;
	transition: opacity .4s ease;
	-webkit-mask-image: radial-gradient(125% 95% at 50% 50%, transparent 16%, #000 72%);
	mask-image: radial-gradient(125% 95% at 50% 50%, transparent 16%, #000 72%);
}

@media (max-width: 1024px) {
	#hw-field { display: none !important; }
}

::selection {
	background: var(--hw-blue);
	color: #0a0e14;
}

/* ============================================================
   21. FEATURES ("das IAs") — título correto e lista em linhas
   ============================================================ */
/* a referência escondia a 1ª linha do h2 e indentava as demais
   para contornar o canvas; aqui o título volta a ser título */
body.home section.features .section-title h2 {
	margin-top: 0 !important;
	margin-right: 0 !important;
}

body.home section.features .section-title h2 .line-container:nth-child(n) {
	display: block !important;
	padding-left: 0 !important;
}

body.home section.features .section-title h2 span.start,
body.home section.features .section-title h2 span.space {
	display: none !important;
	width: 0 !important;
}

body.home section.features .section-title p {
	margin-top: 1.4rem !important;
}

/* sem a esfera: coluna do ícone sai, lista ocupa o palco */
#fixed-features { position: relative; }

#fixed-features .icon { display: none !important; }

body.home section.features ul.list-mobile { display: none !important; }

body.home section.features ul.list-web {
	display: block !important;
	opacity: 1 !important;
	width: 100%;
	counter-reset: hwfeat;
}

body.home section.features ul.list-web li {
	position: relative !important;
	display: grid !important;
	grid-template-columns: 4.5rem minmax(0, 1fr) minmax(0, 1.15fr);
	align-items: start;
	gap: 1.5rem 2.5rem;
	padding: 2.4rem 0 !important;
	height: auto !important;
	min-height: 0 !important;
	border-top: 1px solid rgba(143, 211, 255, .16) !important;
	border-bottom: 0 !important;
	opacity: .45 !important;
	counter-increment: hwfeat;
	transition: opacity .5s ease, padding-left .4s cubic-bezier(.5, 1, .89, 1);
}

body.home section.features ul.list-web li:last-child {
	border-bottom: 1px solid rgba(143, 211, 255, .16) !important;
}

body.home section.features ul.list-web li.on { opacity: 1 !important; }

body.home section.features ul.list-web li:hover { opacity: 1 !important; }

body.home section.features ul.list-web li .num {
	width: 2.9rem;
	height: 2.9rem;
	border: 1px solid rgba(143, 211, 255, .3);
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	transition: background .4s ease, border-color .4s ease;
}

body.home section.features ul.list-web li .num::before {
	content: counter(hwfeat, decimal-leading-zero);
	font-size: var(--t-micro);
	letter-spacing: .06em;
	color: var(--hw-blue);
	font-variant-numeric: tabular-nums;
}

body.home section.features ul.list-web li.on .num,
body.home section.features ul.list-web li:hover .num {
	background: rgba(143, 211, 255, .14);
	border-color: rgba(143, 211, 255, .55);
}

body.home section.features ul.list-web li h3 {
	margin: .35rem 0 0 !important;
	font-size: var(--t-h3) !important;
	line-height: 1.25 !important;
	letter-spacing: -.014em;
	max-width: 20ch;
	transition: color .4s ease;
}

body.home section.features ul.list-web li.on h3,
body.home section.features ul.list-web li:hover h3 { color: var(--hw-blue); }

body.home section.features ul.list-web li p {
	margin: .5rem 0 0 !important;
	max-width: 52ch !important;
	font-size: var(--t-body) !important;
	line-height: 1.72 !important;
	color: hsla(0, 0%, 100%, .68) !important;
	position: static !important;
	width: auto !important;
}

@media (max-width: 767px) {
	body.home section.features ul.list-web li {
		grid-template-columns: 1fr;
		justify-items: center;
		text-align: center;
		gap: .9rem;
		padding: 2.2rem 0 !important;
	}

	body.home section.features ul.list-web li .num {
		position: static !important;
		margin: 0 auto !important;
		left: auto !important;
		top: auto !important;
	}

	body.home section.features ul.list-web li h3 {
		max-width: none;
		margin-top: 0 !important;
	}
}

/* ============================================================
   23. LARGURA ÚNICA — todas as seções na mesma coluna de 74rem
   ============================================================ */
@media (min-width: 1025px) {
	body.home section.features,
	body.home section.why,
	body.home section.news,
	body.home section.investors,
	section.faq {
		padding-left: max(2.5rem, calc((100% - 74rem) / 2)) !important;
		padding-right: max(2.5rem, calc((100% - 74rem) / 2)) !important;
	}

	body.home section.ecosystem .inner {
		max-width: 74rem !important;
		width: 100%;
		margin-left: auto;
		margin-right: auto;
	}

	/* o trilho sangra até a borda da tela (espelha o padding da seção).
	   Sem máscara: os cards saem de cena pela lateral, naturalmente. */
	body.home section.ecosystem .list {
		width: auto !important;
		display: block;
		margin-right: calc(-1 * max(2.5rem, (100vw - 74rem) / 2)) !important;
		padding-right: max(2.5rem, calc((100vw - 74rem) / 2));
	}

	body.home section.news .section-title,
	body.home section.news .grid,
	body.home section.investors .section-title,
	body.home section.investors .list,
	body.home section.why .section-title,
	body.home section.features .section-title,
	body.home section.features #fixed-features {
		max-width: 74rem !important;
		width: 100% !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}

	section.faq .section-title,
	section.faq .faq-list { max-width: 74rem; }
}

/* linha de destaque minimalista nos títulos de seção */
.section-title .tag .name { color: hsla(0, 0%, 100%, .6); }

/* sem js: garante conteúdo visível */
.no-js [data-split],
.no-js [data-anim] {
	opacity: 1 !important;
	transform: none !important;
}