/* ==========================================================================
   AfriAgentic hero — reproduces the approved demo's hero exactly.

   The Earth is the demo's own canvas graphic (#hero-earth there,
   #aa-hero-earth here), drawn by hero-earth.js. It is not a photograph and
   nothing has been added to it. The rules below mirror the demo stylesheet
   line for line:

     #hero-earth { position:absolute; left:0; right:0; bottom:0;
                   width:100%; height:86%; opacity:.5; z-index:0 }
     @media (max-width:1080px) { right:-30%; opacity:.34;
                                 width:min(90vh,900px); height:min(90vh,900px) }
     @media (max-width:680px)  { right:-45%; top:36%; opacity:.26 }

   The demo's comment on that block: the Earth sits low in the frame as a
   horizon arc, so the emblem above it reads against clean space rather than
   competing with the planet.

   Everything here is scoped to .aa-hero and the stylesheet loads on the front
   page only.
   ========================================================================== */

.aa-hero {
	position: relative;
	overflow: hidden;
}

/* The Elementor HTML widget is only a carrier; the canvas positions against
   the hero itself, exactly as the demo's does against .hero. */
.aa-net-widget {
	position: static !important;
}

/* The hero's HTML widget is already styled by the base build as the
   full-bleed visual layer — 86% of the hero height, anchored to its bottom
   edge, which is exactly the demo's #hero-earth box. Applying 86% again here
   compounded it and floated the planet off the bottom, so the canvas simply
   fills that layer. */
.aa-earth-frame {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}

#aa-hero-earth {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: .5;
	pointer-events: none;
}

/* Copy and emblem sit above the planet. The content row must not form its own
   stacking context or it would lift the canvas with it. */
.aa-hero > .e-con,
.aa-hero > .e-con-inner {
	position: relative;
	z-index: auto;
}

.aa-hero .aa-stage,
.elementor-1414 .elementor-element-fdc21f2 {
	position: relative;
	z-index: 2;
}

.aa-hero .e-con:has(> .elementor-widget-heading),
.elementor-1414 .elementor-element-f3b104c {
	position: relative;
	z-index: 3;
}

/* ==================== COMPOSITION ====================
   Measured against the demo at 1440/1200/834/390:
     content box   1240px, matching the demo's container
     headline      clamp(40px, 5.6vw, 84px) — 81 / 67 / 47 / 40px, as the demo
     copy          520px measure */

.aa-hero > .e-con {
	width: 1240px !important;
	max-width: 100% !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

.aa-hero h1,
.aa-hero .aa-hero-title .elementor-heading-title {
	font-size: clamp(40px, 5.6vw, 84px) !important;
	line-height: 1.06 !important;
	max-width: 600px;
}

.aa-hero .aa-hero-sub,
.aa-hero .elementor-widget-text-editor p {
	max-width: 520px;
}

.aa-hero .e-con:has(> .aa-btn),
.elementor-1414 .elementor-element-0dbf86d {
	padding-top: 12px !important;
}

/* ==================== RESPONSIVE ====================
   Demo breakpoints for the Earth are 1080px and 680px. */

@media (max-width: 1080px) {
	#aa-hero-earth {
		inset: auto auto 0 0;
		opacity: .34;
		width: min(90vh, 900px);
		height: min(90vh, 900px);
	}
}

@media (max-width: 767px) {
	.aa-hero {
		padding-left: 22px !important;
		padding-right: 22px !important;
		padding-bottom: 34px !important;
	}

	.aa-hero > .e-con,
	.aa-hero .e-con {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	.aa-hero h1,
	.aa-hero .aa-hero-title .elementor-heading-title,
	.aa-hero .aa-hero-sub,
	.aa-hero .elementor-widget-text-editor p {
		max-width: 100%;
	}

	/* Demo: .hero-ctas{width:100%} and .hero-ctas .btn{flex:1; min-width:150px} */
	.aa-hero .e-con:has(> .aa-btn) {
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		gap: 14px !important;
		width: 100%;
	}

	.aa-hero .aa-btn {
		flex: 1 1 0 !important;
		min-width: 0 !important;
	}

	.aa-hero .aa-btn .elementor-button {
		width: 100% !important;
		padding-left: 12px !important;
		padding-right: 12px !important;
		font-size: 12.5px !important;
		white-space: nowrap;
	}

	.aa-hero .aa-hero-meta {
		display: grid !important;
		grid-template-columns: repeat(3, 1fr) !important;
		gap: 10px !important;
	}

	.aa-hero .aa-hero-meta .k,
	.aa-hero .aa-hero-meta .v {
		white-space: nowrap;
	}

	.aa-hero .aa-hero-meta .v {
		font-size: 14px !important;
	}
}

@media (max-width: 680px) {
	#aa-hero-earth {
		inset: 25.6% auto auto 0;
		opacity: .26;
	}
}

@media (prefers-reduced-motion: reduce) {
	.aa-hero .aa-stage .ring {
		animation: none !important;
	}
}

/* AA-STAGE-SCALE — Neggriss is pinned to the widths the demo actually
   renders her at: 542 / 486 / 414 / 310px across the four breakpoints. */
.aa-hero .aa-stage{max-width:620px;margin-left:auto;}
.aa-hero .aa-stage img{width:100%;height:auto;max-width:596px;}
@media (max-width:1240px){.aa-hero .aa-stage img{max-width:534px;}}
@media (max-width:1024px){.aa-hero .aa-stage img{max-width:462px;}}
@media (max-width:680px){.aa-hero .aa-stage{max-width:340px;}.aa-hero .aa-stage img{max-width:338px;}}

/* ==================== AA-HERO-ADJUST ====================
   1. Title reveal, reproducing the demo's markup and keyframes:
        .line{overflow:hidden}  .line>span{translateY(110%) -> 0, 1s}
        delays .10s / .20s / .30s
   2. Hero content lifted toward the header.
   Hero-scoped; the stylesheet loads on the front page only. */

.aa-hero .aa-hero-title .line{display:block;overflow:hidden;}
.aa-hero .aa-hero-title .line > span{
	display:block;
	transform:translateY(110%);
	animation:aaLineUp 1s cubic-bezier(.22,.61,.36,1) forwards;
}
.aa-hero .aa-hero-title .line:nth-child(1) > span{animation-delay:.10s;}
.aa-hero .aa-hero-title .line:nth-child(2) > span{animation-delay:.20s;}
.aa-hero .aa-hero-title .line:nth-child(3) > span{animation-delay:.30s;}
@keyframes aaLineUp{to{transform:translateY(0);}}

/* The reveal system must not fade the hero copy separately, or the two
   animations fight and the lines appear before their mask does. */
.aa-hero .aa-hero-title{overflow:visible;}

/* Content sits a little closer to the menu bar. The hero carries 161/118/100px
   elsewhere to clear the fixed header; these trim roughly 26px off each. */
.aa-hero{padding-top:135px!important;}
@media (max-width:1024px){.aa-hero{padding-top:98px!important;}}
@media (max-width:767px){.aa-hero{padding-top:84px!important;}}

@media (prefers-reduced-motion: reduce){
	.aa-hero .aa-hero-title .line > span{transform:none;animation:none;}
}

/* AA-EXPO-HERO - the announcement strip adds 40px to the fixed header on
   desktop/tablet and 48px on phones. The hero's top padding absorbs exactly
   that, so the hero composition is unchanged - it simply starts below the
   strip instead of below the bare header. Nothing inside the hero moved. */
.aa-hero{ padding-top:175px !important; }
@media (max-width:1024px){ .aa-hero{ padding-top:138px !important; } }
@media (max-width:767px){ .aa-hero{ padding-top:132px !important; } }