The hero occupies the entire viewport height with a darkened background image, left-aligned headline text in a large serif typeface, and a subtle gradient overlay that transitions from transparent to deep navy at the bottom.
This section uses a two-column grid layout. The left column displays a high-contrast photograph of chess pieces, symbolizing strategy and precision. The right column contains a serif heading, body text in a lighter weight, and a ghost-style call-to-action button with an arrow icon. The dark navy background maintains visual consistency with the overall design language.
DetailsCard component with a light background, centered icon in a bordered square frame, and service title below.
Three cards displayed in an equal-width grid, providing a strong contrast against the dark background.
Each card elevates on hover with a subtle shadow effect and a bottom border animation for interactivity.
When expanded, the answer text appears below with a smooth height transition. The plus icon rotates 45 degrees to form an X shape, indicating the open state.
The FAQ component uses a max-height animation technique for smooth open/close transitions without JavaScript animation libraries.
On smaller screens, the two-column layout stacks vertically with the timeline appearing first, followed by the FAQ section below.
