/* ==========================================================================
   MX1 home sections — the hero's brand system carried down the page.
   Navy surfaces, electric-blue accents, chamfered MX1 cuts on every shape.
   Scoped to .mx1hs; motion only under .mx1hs--motion.
   ========================================================================== */
.mx1hs {
	--hs-blue: #365de3;
	--hs-blue-2: #4672f9;
	--hs-glow: #5f98fd;
	--hs-navy: #080e38;
	--hs-deep: #0f172a;
	--hs-paper: #f2f4ff;
	--hs-mute: rgba(242, 244, 255, 0.68);
	--hs-line: rgba(242, 244, 255, 0.12);
	--hs-glass: rgba(242, 244, 255, 0.045);
	--hs-cut: 18px;
	--hs-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--hs-gutter: clamp(1rem, 0.4rem + 3vw, 3.5rem);
	--hs-chamfer: polygon(var(--hs-cut) 0, 100% 0, 100% calc(100% - var(--hs-cut)), calc(100% - var(--hs-cut)) 100%, 0 100%, 0 var(--hs-cut));

	position: relative; isolation: isolate;
	width: 100vw; margin-inline: calc(50% - 50vw);
	background: linear-gradient(180deg, var(--hs-deep) 0%, #0b1238 40%, var(--hs-deep) 70%, var(--hs-navy) 100%);
	color: var(--hs-paper); text-align: start;
}
.mx1hs *, .mx1hs *::before, .mx1hs *::after { box-sizing: border-box; }
.mx1hs ul, .mx1hs dl { margin: 0; padding: 0; list-style: none; }
.mx1hs p { margin: 0; }

.mx1hs-sec { position: relative; padding-block: clamp(4.5rem, 9vw, 8rem); }
.mx1hs-sec + .mx1hs-sec { border-block-start: 1px solid var(--hs-line); }
.mx1hs-wrap { width: 100%; max-width: 1440px; margin-inline: auto; padding-inline: var(--hs-gutter); }

/* ---------- type ---------- */
.mx1hs-kicker {
	display: inline-flex; align-items: center; gap: 0.6rem; margin-block-end: 1.1rem !important;
	padding: 0.4rem 0.95rem; font-size: 0.92rem; font-weight: 600; color: var(--hs-paper);
	background: rgba(70, 114, 249, 0.12); box-shadow: inset 0 0 0 1px rgba(95, 152, 253, 0.35); border-radius: 999px;
}
.mx1hs-kicker::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--hs-glow); }
.mx1hs .mx1hs-h2 { margin: 0; font-size: clamp(2rem, 1.2rem + 2.6vw, 3.6rem); font-weight: 800; line-height: 1.2; color: var(--hs-paper); letter-spacing: 0; }
.mx1hs-grad { background: linear-gradient(100deg, var(--hs-glow) 0%, var(--hs-blue-2) 45%, #b9ccff 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.mx1hs-head { max-width: 46rem; margin-block-end: clamp(2rem, 4vw, 3.25rem); }
.mx1hs-head--center { max-width: 56rem; margin-inline: auto; text-align: center; }

/* ---------- shared shapes ---------- */
.mx1hs-ico { flex: none; display: grid; place-items: center; width: 48px; height: 48px; color: var(--hs-glow); background: rgba(70, 114, 249, 0.12); clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); transition: background 0.4s, color 0.4s; }
.mx1hs .mx1hs-ico svg { width: 26px !important; height: 26px !important; max-width: none; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

.mx1hs .mx1hs-btn {
	position: relative; overflow: hidden; isolation: isolate;
	display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
	min-height: 52px; padding: 0 1.6rem; font-size: 1rem; font-weight: 700; text-decoration: none; white-space: nowrap;
	clip-path: var(--hs-chamfer); --hs-cut: 14px;
	transition: background 0.3s, color 0.3s, box-shadow 0.3s, filter 0.3s;
}
.mx1hs .mx1hs-btn span { transition: transform 0.3s var(--hs-ease); }
.mx1hs .mx1hs-btn:hover span { transform: translateX(-4px); }
.mx1hs .mx1hs-btn--lg { min-height: 58px; padding: 0 2rem; font-size: 1.05rem; }
.mx1hs .mx1hs-btn--primary { background: linear-gradient(120deg, var(--hs-blue-2), var(--hs-blue)); color: #fff; }
.mx1hs .mx1hs-btn--primary:hover, .mx1hs .mx1hs-btn--primary:focus-visible { background: linear-gradient(120deg, var(--hs-glow), var(--hs-blue-2)); color: #fff; filter: drop-shadow(0 8px 24px rgba(70, 114, 249, 0.5)); }
.mx1hs .mx1hs-btn--light { background: #fff; color: var(--hs-navy); }
.mx1hs .mx1hs-btn--light:hover, .mx1hs .mx1hs-btn--light:focus-visible { background: var(--hs-paper); color: var(--hs-blue); }
.mx1hs .mx1hs-btn--ghost { background: rgba(242, 244, 255, 0.06); color: var(--hs-paper); box-shadow: inset 0 0 0 1px rgba(242, 244, 255, 0.3); }
.mx1hs .mx1hs-btn--ghost:hover, .mx1hs .mx1hs-btn--ghost:focus-visible { background: rgba(242, 244, 255, 0.16); color: #fff; }
.mx1hs .mx1hs-btn:focus-visible { outline: 2px solid var(--hs-glow); outline-offset: -4px; }

/* ---------- 1. why + numbers ---------- */
.mx1hs-why { padding-block-start: clamp(3.5rem, 7vw, 6rem); }
.mx1hs-why__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.mx1hs-pillars { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; margin-block-start: clamp(1.75rem, 3.5vw, 2.5rem) !important; }
.mx1hs-pillar {
	display: flex; gap: 1rem; align-items: flex-start; padding: 1.25rem;
	background: var(--hs-glass); box-shadow: inset 0 0 0 1px var(--hs-line); clip-path: var(--hs-chamfer);
	transition: background 0.4s var(--hs-ease);
}
.mx1hs-pillar:hover { background: rgba(70, 114, 249, 0.1); }
.mx1hs-pillar:hover .mx1hs-ico { background: var(--hs-blue-2); color: #fff; }
.mx1hs-pillar strong { display: block; font-size: 1.08rem; font-weight: 700; color: #fff; margin-block-end: 0.3rem; }
.mx1hs-pillar small { display: block; font-size: 0.92rem; line-height: 1.75; color: var(--hs-mute); }

.mx1hs-numbers {
	position: relative; overflow: hidden; padding: clamp(1.75rem, 3.5vw, 2.75rem);
	background: linear-gradient(140deg, var(--hs-blue-2) 0%, var(--hs-blue) 55%, #2445b8 100%);
	--hs-cut: 28px; clip-path: var(--hs-chamfer);
}
.mx1hs-numbers__mark { position: absolute; inset-inline-start: -8%; inset-block-end: -14%; width: 80%; opacity: 0.12; pointer-events: none; }
.mx1hs-numbers__mark img { width: 100%; height: auto; }
.mx1hs-numbers__title { position: relative; font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); font-weight: 800; color: #fff; }
.mx1hs-numbers__text { position: relative; margin-block: 0.6rem 1.75rem !important; color: rgba(255, 255, 255, 0.85); line-height: 1.8; }
.mx1hs-stats { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin-block-end: 1.75rem !important; background: rgba(255, 255, 255, 0.22); }
.mx1hs-stat { padding: 1.1rem 1rem; background: #3a5fe4; }
.mx1hs-stat dt { font-size: clamp(2.2rem, 1.6rem + 2vw, 3.2rem); font-weight: 800; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; }
.mx1hs-stat dd { margin: 0.45rem 0 0; font-size: 0.92rem; color: rgba(255, 255, 255, 0.88); }
.mx1hs-numbers .mx1hs-btn { position: relative; }

/* ---------- 2. services explorer ---------- */
.mx1hs-services::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(40% 50% at 80% 20%, rgba(70, 114, 249, 0.18), transparent 70%); }
.mx1hs-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; margin-block-end: 1.25rem; }
.mx1hs .mx1hs-tab {
	display: flex; align-items: center; gap: 0.9rem; width: 100%; min-height: 0; margin: 0; padding: 1rem 1.15rem;
	font: inherit; font-size: 1.05rem; font-weight: 700; color: var(--hs-paper); text-align: start; text-transform: none; letter-spacing: 0;
	background: var(--hs-glass); border: 0; border-radius: 0; box-shadow: inset 0 0 0 1px var(--hs-line); clip-path: var(--hs-chamfer);
	cursor: pointer; transition: background 0.4s var(--hs-ease), box-shadow 0.4s;
}
.mx1hs .mx1hs-tab:hover { background: rgba(70, 114, 249, 0.1); color: #fff; }
.mx1hs .mx1hs-tab[aria-selected="true"] { background: linear-gradient(130deg, var(--hs-blue-2), var(--hs-blue) 65%, #2445b8); box-shadow: none; color: #fff; }
.mx1hs .mx1hs-tab[aria-selected="true"] .mx1hs-ico { background: rgba(255, 255, 255, 0.18); color: #fff; }
.mx1hs-tab__label { flex: 1; line-height: 1.45; }
.mx1hs-tab__count { font-size: 0.8rem; letter-spacing: 0.12em; color: var(--hs-mute); }
.mx1hs .mx1hs-tab[aria-selected="true"] .mx1hs-tab__count { color: rgba(255, 255, 255, 0.8); }
.mx1hs .mx1hs-tab:focus-visible { outline: 2px solid var(--hs-glow); outline-offset: -4px; }

.mx1hs-panel { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 2.2fr); gap: 0.75rem; }
.mx1hs-panel[hidden] { display: none; }
.mx1hs-panel__intro {
	display: flex; flex-direction: column; gap: 1rem; padding: clamp(1.5rem, 2.5vw, 2rem);
	background: rgba(8, 14, 56, 0.6); box-shadow: inset 0 0 0 1px var(--hs-line); --hs-cut: 24px; clip-path: var(--hs-chamfer);
}
.mx1hs-panel__intro h3 { margin: 0; font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem); font-weight: 800; line-height: 1.35; color: #fff; }
.mx1hs-panel__intro p { color: var(--hs-mute); line-height: 1.85; }
.mx1hs-panel__intro .mx1hs-btn { margin-block-start: auto; align-self: flex-start; }
.mx1hs-items { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; }
.mx1hs-item {
	position: relative; display: flex; flex-direction: column; gap: 0.55rem; min-height: 200px; padding: 1.35rem;
	background: var(--hs-glass); box-shadow: inset 0 0 0 1px var(--hs-line); clip-path: var(--hs-chamfer);
	transition: background 0.4s var(--hs-ease), transform 0.4s var(--hs-ease);
}
.mx1hs-item:hover { background: rgba(70, 114, 249, 0.1); transform: translateY(-4px); }
.mx1hs-item:hover .mx1hs-ico { background: var(--hs-blue-2); color: #fff; }
.mx1hs-item .mx1hs-ico { margin-block-end: 0.4rem; }
.mx1hs-item strong { font-size: 1.08rem; font-weight: 700; color: #fff; line-height: 1.5; }
.mx1hs-item small { font-size: 0.92rem; line-height: 1.75; color: var(--hs-mute); }
.mx1hs-item__n { position: absolute; inset-block-start: 1.1rem; left: 1.25rem; font-size: 0.78rem; letter-spacing: 0.14em; color: rgba(242, 244, 255, 0.3); }
.mx1hs--motion .mx1hs-panel:not([hidden]) .mx1hs-item { animation: mx1hs-in 0.6s var(--hs-ease) both; animation-delay: calc(var(--i) * 0.06s); }
.mx1hs--motion .mx1hs-panel:not([hidden]) .mx1hs-panel__intro { animation: mx1hs-in 0.6s var(--hs-ease) both; }
@keyframes mx1hs-in { from { opacity: 0; translate: 0 16px; } }

/* ---------- 3. pricing ---------- */
.mx1hs-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(0.75rem, 1.5vw, 1.25rem); align-items: stretch; max-width: 1180px; margin-inline: auto !important; }
.mx1hs-plan {
	position: relative; display: flex; flex-direction: column; gap: 1.1rem; padding: clamp(1.5rem, 2.5vw, 2.25rem);
	background: var(--hs-glass); box-shadow: inset 0 0 0 1px var(--hs-line); --hs-cut: 26px; clip-path: var(--hs-chamfer);
}
.mx1hs-plan h3 { margin: 0; font-size: 1.2rem; font-weight: 700; color: #fff; }
.mx1hs-plan__price { display: flex; align-items: baseline; gap: 0.5rem; }
.mx1hs-plan__price strong { font-size: clamp(2.6rem, 2rem + 2vw, 3.6rem); font-weight: 800; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; }
.mx1hs-plan__price span { font-size: 0.9rem; color: var(--hs-mute); }
.mx1hs-plan ul { display: grid; gap: 0.7rem; padding-block: 1.1rem !important; border-block: 1px solid var(--hs-line); }
.mx1hs-plan li { display: flex; align-items: center; gap: 0.65rem; font-size: 0.95rem; color: var(--hs-paper); }
.mx1hs-tick { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: rgba(70, 114, 249, 0.2); color: var(--hs-glow); }
.mx1hs .mx1hs-tick svg { width: 13px !important; height: 13px !important; fill: none; stroke: currentColor; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.mx1hs-plan .mx1hs-btn { margin-block-start: auto; }
.mx1hs-plan--hot { background: linear-gradient(150deg, var(--hs-blue-2) 0%, var(--hs-blue) 55%, #2445b8 100%); box-shadow: none; }
.mx1hs-plan--hot .mx1hs-plan__price span, .mx1hs-plan--hot li { color: rgba(255, 255, 255, 0.9); }
.mx1hs-plan--hot ul { border-color: rgba(255, 255, 255, 0.25); }
.mx1hs-plan--hot .mx1hs-tick { background: rgba(255, 255, 255, 0.22); color: #fff; }
.mx1hs-plan__badge { position: absolute; inset-block-start: 1.25rem; left: 1.25rem; padding: 0.3rem 0.8rem; font-size: 0.8rem; font-weight: 700; color: var(--hs-navy); background: #fff; border-radius: 999px; }
@media (min-width: 900px) { .mx1hs-plan--hot { transform: translateY(-14px); } }

/* ---------- 4. clients wall ---------- */
.mx1hs-wall { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border-block-start: 1px solid var(--hs-line); border-inline-start: 1px solid var(--hs-line); }
.mx1hs-wall li { display: grid; place-items: center; height: 120px; padding: 1rem; border-block-end: 1px solid var(--hs-line); border-inline-end: 1px solid var(--hs-line); transition: background 0.3s; }
.mx1hs-wall li:hover { background: rgba(70, 114, 249, 0.08); }
.mx1hs-wall img { width: calc(var(--lw, 140px) * 0.9); height: calc(var(--lh, 40px) * 0.9); max-width: 100%; object-fit: contain; filter: grayscale(1) brightness(0) invert(1); opacity: 0.72; transition: filter 0.3s, opacity 0.3s; }
.mx1hs-wall li:hover img { filter: none; opacity: 1; }
@media (hover: none), (max-width: 1023px) { .mx1hs-wall img { filter: none; opacity: 1; } }

/* ---------- 5. closing CTA ---------- */
.mx1hs-cta { padding-block: clamp(3rem, 6vw, 5rem) clamp(4rem, 8vw, 6.5rem); }
.mx1hs-cta__band {
	position: relative; overflow: hidden; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2rem;
	padding: clamp(2rem, 5vw, 4rem);
	background: radial-gradient(60% 120% at 0% 0%, rgba(95, 152, 253, 0.65), transparent 60%), linear-gradient(130deg, var(--hs-blue-2) 0%, var(--hs-blue) 50%, #1d3aa6 100%);
	--hs-cut: 36px; clip-path: var(--hs-chamfer);
}
.mx1hs-cta__mark { position: absolute; left: -4%; inset-block-start: 50%; width: 46%; translate: 0 -50%; opacity: 0.14; pointer-events: none; }
.mx1hs-cta__mark img { width: 100%; height: auto; }
.mx1hs-cta__copy { position: relative; max-width: 40rem; }
.mx1hs-cta__copy p { margin-block-start: 1rem !important; font-size: clamp(1rem, 0.95rem + 0.3vw, 1.2rem); line-height: 1.85; color: rgba(255, 255, 255, 0.88); }
.mx1hs-cta .mx1hs-h2 { color: #fff; }
.mx1hs-cta__actions { position: relative; display: flex; flex-wrap: wrap; gap: 0.75rem; }
.mx1hs-cta .mx1hs-btn--ghost { background: rgba(4, 6, 26, 0.2); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45); }

/* ---------- reveal ---------- */
.mx1hs--motion [data-rv] { opacity: 0; translate: 0 28px; transition: opacity 0.9s var(--hs-ease), translate 0.9s var(--hs-ease); transition-delay: calc(var(--i, 0) * 0.07s); }
.mx1hs--motion [data-rv].is-in { opacity: 1; translate: none; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
	.mx1hs-panel { grid-template-columns: 1fr; }
	.mx1hs-items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1023px) {
	.mx1hs-why__grid { grid-template-columns: 1fr; }
	.mx1hs-plans { grid-template-columns: 1fr; max-width: 520px; }
	.mx1hs-wall { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.mx1hs-tabs { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(-1 * var(--hs-gutter)); padding-inline: var(--hs-gutter); }
	.mx1hs-tabs::-webkit-scrollbar { display: none; }
	.mx1hs .mx1hs-tab { flex: 0 0 auto; width: auto; scroll-snap-align: start; }
}
@media (max-width: 600px) {
	.mx1hs-pillars { grid-template-columns: 1fr; }
	.mx1hs-items { grid-template-columns: 1fr; }
	.mx1hs-item { min-height: 0; }
	.mx1hs .mx1hs-tab { font-size: 0.95rem; padding: 0.8rem 1rem; }
	.mx1hs .mx1hs-tab .mx1hs-ico { width: 38px; height: 38px; }
	.mx1hs-tab__count { display: none; }
	.mx1hs-wall { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.mx1hs-wall li { height: 84px; padding: 0.6rem; }
	.mx1hs-wall img { width: calc(var(--lw, 140px) * 0.62); height: calc(var(--lh, 40px) * 0.62); }
	.mx1hs-cta__actions, .mx1hs-cta__actions .mx1hs-btn, .mx1hs-numbers .mx1hs-btn, .mx1hs-panel__intro .mx1hs-btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
	.mx1hs *, .mx1hs *::before, .mx1hs *::after { animation: none !important; transition: none !important; }
}