/*
 * Homepage hero — 3 pillars (Software · AI · Mobility) on a full-viewport
 * dark stage. Sits ABOVE the existing Fusion Builder content of the Home
 * page; nothing about the page body markup or content changes.
 *
 * Palette: existing Avada Global Options vars (--awb-color-*).
 */

body.home.page #content { padding-top: 0 !important; }
body.home.page #post-area { padding-top: 0; }
body.home.page .avada-page-titlebar-wrapper { display: none; }

/* ─── HEADER OVERLAY (homepage only, when not sticky) ───────────── */

/* On the homepage at scroll-top we want the menu to float OVER the
   hero gradient — i.e. the menu appears anchored to the top of the
   viewport with no white strip above the hero. We achieve this with
   position: absolute on the wrapper: it pins to top:0 of the page,
   gets a transparent background, and the rest of the body (incl.
   .se-hero) starts at the actual top of the viewport.

   As soon as the user scrolls, Avada's JS adds .fusion-is-sticky and
   switches the inner .fusion-header to its built-in fixed/white state
   — our absolute rule stops applying (:not selector) and the default
   sticky behavior takes over unchanged. */
body.home .fusion-header-wrapper:not(.fusion-is-sticky) {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	z-index: 999;
	background: transparent !important;
	box-shadow: none !important;
}
body.home .fusion-header-wrapper:not(.fusion-is-sticky) .fusion-header,
body.home .fusion-header-wrapper:not(.fusion-is-sticky) .fusion-secondary-main-menu,
body.home .fusion-header-wrapper:not(.fusion-is-sticky) .fusion-row {
	background: transparent !important;
	background-color: transparent !important;
	box-shadow: none !important;
}

/* Belt-and-braces: even when sticky, force the homepage's sticky bar
   to white in case a combiner/global rule loses specificity. */
body.home .fusion-header-wrapper.fusion-is-sticky,
body.home .fusion-header-wrapper.fusion-is-sticky .fusion-header,
body.home .fusion-header-wrapper.fusion-is-sticky .fusion-secondary-main-menu {
	background-color: var(--header_sticky_bg_color, #ffffff) !important;
}

/* Menu items: light on dark hero, accent on hover */
body.home .fusion-header-wrapper:not(.fusion-is-sticky) .fusion-main-menu > ul > li > a,
body.home .fusion-header-wrapper:not(.fusion-is-sticky) .fusion-main-menu .fusion-menu > li > a {
	color: rgba(255, 255, 255, 0.92);
}
body.home .fusion-header-wrapper:not(.fusion-is-sticky) .fusion-main-menu > ul > li > a:hover,
body.home .fusion-header-wrapper:not(.fusion-is-sticky) .fusion-main-menu .fusion-menu > li > a:hover {
	color: var(--awb-color-5, #009fe3);
}

/* Mobile hamburger / flyout toggles get the same white treatment */
body.home .fusion-header-wrapper:not(.fusion-is-sticky) .awb-menu__main-toggle-icon,
body.home .fusion-header-wrapper:not(.fusion-is-sticky) .fusion-mobile-nav-item,
body.home .fusion-header-wrapper:not(.fusion-is-sticky) .fusion-icon-bars {
	color: var(--awb-color-1, #ffffff) !important;
	background-color: var(--awb-color-1, #ffffff);
}

/* Logo strategy on the homepage: KEEP THE STANDARD PNG VISIBLE IN
   BOTH STATES. The user confirmed they see the PNG (with filter:white)
   at scroll-top; we override Avada's default sticky-swap so the SAME
   PNG stays in the DOM when sticky activates — just without the
   filter, so its native dark-blue + light-blue text reads on the
   white sticky bar.

   This is more invasive than letting Avada swap to the smaller SVG,
   but eliminates the only remaining variable in the "logo disappears
   on scroll" report: the element being painted DOES NOT CHANGE
   across scroll states, only the filter does. */
body.home .fusion-header-wrapper.fusion-is-sticky .fusion-standard-logo {
	display: inline-block !important;
}
body.home .fusion-header-wrapper.fusion-is-sticky .fusion-sticky-logo {
	display: none !important;
}
body.home .fusion-header-wrapper:not(.fusion-is-sticky) .fusion-standard-logo,
body.home .fusion-header-wrapper:not(.fusion-is-sticky) .fusion-mobile-logo {
	filter: brightness(0) invert(1);
}
body.home .fusion-header-wrapper.fusion-is-sticky .fusion-standard-logo,
body.home .fusion-header-wrapper.fusion-is-sticky .fusion-mobile-logo,
body.home .fusion-sticky-logo,
.fusion-sticky-logo {
	filter: none !important;
}

/* ─── HERO ──────────────────────────────────────────────────────── */

.se-hero {
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	/* Full-bleed inside Avada's centered .fusion-row: the calc(50% - 50vw)
	   margins anchor the hero to the actual viewport edges. */
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	/* 100vh fallback, 100svh respects mobile browser chrome */
	min-height: 100vh;
	min-height: 100svh;
	/* Modest top padding — the absolute-positioned header overlays the
	   first ~100px of the hero, so 110px keeps the eyebrow line just
	   under the menu without a huge empty band. */
	padding: 110px 0 88px;
	color: var(--awb-color-1, #ffffff);
	/* Deep navy base matching the SE flyer cover (#0E1F45-ish), with two
	   gentle radial highlights at the corners. Animated very slowly so the
	   neural-network SVG stays the dominant visual layer. */
	background:
		linear-gradient(135deg, #0c1a3a 0%, #102448 55%, #091633 100%);
	background-size: 200% 200%;
	animation: se-hero-bg 28s ease-in-out infinite alternate;
	isolation: isolate;
}
@keyframes se-hero-bg {
	0%   { background-position: 0% 0%; }
	100% { background-position: 100% 100%; }
}

.se-hero__pattern {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	opacity: 0.95;
	pointer-events: none;
	/* No mix-blend-mode: we want the SVG's accent-blue nodes and lines to
	   render in their actual color over the navy base, not blended away. */
}

/* Subtle pulse on the neural network — a SE flyer is static print, on a
   live site we can let the network "breathe" without being distracting. */
.se-hero__network {
	animation: se-net-pulse 6s ease-in-out infinite;
	transform-origin: center;
}
@keyframes se-net-pulse {
	0%, 100% { opacity: 0.85; }
	50%      { opacity: 1.00; }
}
@media (prefers-reduced-motion: reduce) {
	.se-hero__network { animation: none; }
}

.se-hero__inner {
	position: relative;
	z-index: 1;
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 24px;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 22px;
	width: 100%;
}

.se-hero__eyebrow {
	margin: 0;
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.78);
	display: inline-flex;
	align-items: center;
	gap: 14px;
	animation: se-fade-up 700ms ease both;
}
.se-hero__eyebrow-bar {
	display: inline-block;
	width: 56px;
	height: 2px;
	background: var(--awb-color-5, #009fe3);
	border-radius: 1px;
}

.se-hero__headline {
	margin: 0;
	font-size: clamp(2.4rem, 5.4vw, 4.2rem);
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -0.02em;
	color: var(--awb-color-1, #ffffff);
	max-width: 18ch;
	animation: se-fade-up 800ms 120ms ease both;
}
.se-hero__headline-accent {
	background: linear-gradient(90deg, var(--awb-color-5, #009fe3), var(--awb-color-custom-10, #65bc7b));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.se-hero__sub {
	margin: 0;
	font-size: clamp(1rem, 1.4vw, 1.18rem);
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.80);
	max-width: 720px;
	animation: se-fade-up 800ms 240ms ease both;
}

/* ─── 3 PILLAR CARDS ────────────────────────────────────────────── */

.se-hero__pillars {
	list-style: none;
	margin: 28px 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
	width: 100%;
}

.se-pillar {
	margin: 0;
	padding: 0;
	opacity: 0;
	transform: translateY(20px);
	animation: se-fade-up 760ms cubic-bezier(.2,.7,.2,1) forwards;
	animation-delay: calc(360ms + var(--se-reveal-delay, 0ms));
}

.se-pillar__link {
	display: flex;
	flex-direction: column;
	gap: 12px;
	height: 100%;
	padding: 28px 26px 24px;
	text-align: left;
	text-decoration: none;
	color: var(--awb-color-1, #ffffff);
	background: rgba(255, 255, 255, 0.05);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 18px;
	transition: transform 320ms cubic-bezier(.2,.7,.2,1), background 280ms ease, border-color 280ms ease, box-shadow 320ms ease;
}
.se-pillar__link:hover {
	background: rgba(255, 255, 255, 0.10);
	border-color: rgba(255, 255, 255, 0.32);
	transform: translateY(-6px);
	box-shadow:
		0 28px 48px -12px rgba(0, 0, 0, 0.5),
		0 0 0 1px rgba(0, 159, 227, 0.22);
}

.se-pillar__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 14px;
	background: linear-gradient(135deg, rgba(0, 159, 227, 0.22), rgba(101, 188, 123, 0.10));
	color: var(--awb-color-5, #009fe3);
	transition: color 280ms ease, background 280ms ease;
}
.se-pillar__icon svg {
	width: 28px;
	height: 28px;
}
.se-pillar--ai       .se-pillar__icon { color: #b585ff; background: linear-gradient(135deg, rgba(181, 133, 255, 0.20), rgba(0, 159, 227, 0.10)); }
.se-pillar--mobility .se-pillar__icon { color: var(--awb-color-custom-10, #65bc7b); background: linear-gradient(135deg, rgba(101, 188, 123, 0.22), rgba(0, 159, 227, 0.10)); }

.se-pillar__title {
	margin: 0;
	font-size: clamp(1.25rem, 1.6vw, 1.5rem);
	font-weight: 800;
	line-height: 1.15;
	color: var(--awb-color-1, #ffffff);
	letter-spacing: -0.005em;
}

.se-pillar__accent {
	margin: 0;
	font-size: 0.92rem;
	line-height: 1.4;
	font-weight: 600;
	color: var(--awb-color-5, #009fe3);
}
.se-pillar--ai       .se-pillar__accent { color: #b585ff; }
.se-pillar--mobility .se-pillar__accent { color: var(--awb-color-custom-10, #65bc7b); }

.se-pillar__summary {
	margin: 0;
	font-size: 0.95rem;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.78);
}

.se-pillar__cta {
	margin-top: auto;
	padding-top: 4px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 0.92rem;
	font-weight: 600;
	color: var(--awb-color-1, #ffffff);
	opacity: 0.85;
	transition: opacity 220ms ease, gap 220ms ease;
}
.se-pillar__cta-arrow { transition: transform 280ms cubic-bezier(.2,.7,.2,1); }
.se-pillar__link:hover .se-pillar__cta { opacity: 1; gap: 12px; }
.se-pillar__link:hover .se-pillar__cta-arrow { transform: translateX(6px); }

/* ─── SCROLL HINT ───────────────────────────────────────────────── */

.se-hero__scroll {
	margin-top: 20px;
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	text-decoration: none;
	color: rgba(255, 255, 255, 0.6);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	transition: color 200ms ease;
	animation: se-fade-up 800ms 720ms ease both;
}
.se-hero__scroll:hover { color: var(--awb-color-1, #ffffff); }
.se-hero__scroll-dot {
	display: inline-block;
	width: 22px;
	height: 32px;
	border: 2px solid currentColor;
	border-radius: 14px;
	position: relative;
}
.se-hero__scroll-dot::before {
	content: "";
	position: absolute;
	top: 6px;
	left: 50%;
	width: 3px;
	height: 6px;
	background: currentColor;
	border-radius: 1.5px;
	transform: translateX(-50%);
	animation: se-scroll-dot 1.6s ease-in-out infinite;
}
@keyframes se-scroll-dot {
	0%   { transform: translate(-50%, 0);  opacity: 1; }
	60%  { transform: translate(-50%, 8px); opacity: 0; }
	100% { transform: translate(-50%, 0);  opacity: 0; }
}

/* ─── ANIMATIONS ────────────────────────────────────────────────── */

@keyframes se-fade-up {
	from { opacity: 0; transform: translateY(16px); }
	to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
	.se-hero { animation: none; }
	.se-hero__eyebrow,
	.se-hero__headline,
	.se-hero__sub,
	.se-pillar,
	.se-hero__scroll { animation: none; opacity: 1; transform: none; }
	.se-pillar__link:hover { transform: none; }
	.se-hero__scroll-dot::before { animation: none; opacity: 1; }
}

/* ─── TABLET (≤1024px) ──────────────────────────────────────────── */

@media (max-width: 1024px) {
	.se-hero { padding: 110px 0 64px; }
	.se-hero__inner { gap: 18px; }
	.se-hero__pillars { gap: 16px; }
	.se-pillar__link { padding: 24px 22px 22px; }
}

/* ─── MOBILE (≤640px) ───────────────────────────────────────────── */

@media (max-width: 640px) {
	.se-hero { padding: 92px 0 56px; }
	.se-hero__inner { padding: 0 18px; gap: 16px; }
	.se-hero__headline { font-size: clamp(1.9rem, 8vw, 2.4rem); max-width: 14ch; }
	.se-hero__sub { font-size: 0.98rem; }
	.se-hero__pillars { grid-template-columns: 1fr; gap: 14px; margin-top: 18px; }
	.se-pillar__link { padding: 22px 20px 20px; border-radius: 16px; }
	.se-pillar__icon { width: 44px; height: 44px; }
	.se-pillar__icon svg { width: 22px; height: 22px; }
	.se-hero__scroll { display: none; }
}