/*
 * Extras for the Elementor-built pages (front page, Services, Contact).
 *
 * Elementor owns layout for these sections — every band, card and button is
 * styled through the builder using the kit's global colours, so nothing here
 * restyles what a builder control already covers. This sheet only carries what
 * the builder cannot express: the seamless platform loop, the card hover lift
 * and the responsive map frame.
 */

/* theme.json's core/paragraph defaults are emitted as `:root :where(p)`, which
   sits directly on the <p>. A colour or line-height set on the widget wrapper
   by Elementor is only *inherited* there, so the paragraph default wins and the
   builder control looks broken. Hand the paragraph back to its widget. */
.elementor-widget-text-editor p {
	color: inherit;
	line-height: inherit;
}

.h2-marquee {
	/* Fade both ends so chips arrive and leave instead of being cut off. */
	-webkit-mask-image: linear-gradient( 90deg, transparent, #000 7%, #000 93%, transparent );
			mask-image: linear-gradient( 90deg, transparent, #000 7%, #000 93%, transparent );
	overflow: hidden;
	width: 100%;
}

.h2-marquee-track {
	animation: h2-marquee-loop 34s linear infinite;
	display: flex;
	gap: 0;
	width: -moz-max-content;
	width: max-content;
}

/* Each set carries the gap that separates it from its duplicate, which is how
   translating by 50% of the track lands exactly on the second set. */
.h2-marquee-set {
	display: flex;
	flex-wrap: nowrap;
	gap: 14px;
	padding-right: 14px;
}

.h2-marquee span {
	background: var(--sonipat-chip);
	border: 1px solid var(--sonipat-border);
	border-radius: 999px;
	color: var(--sonipat-text-muted);
	flex: 0 0 auto;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	padding: 0.6rem 1.15rem;
	text-transform: uppercase;
	white-space: nowrap;
}

.h2-marquee:hover .h2-marquee-track {
	animation-play-state: paused;
}

@keyframes h2-marquee-loop {
	to {
		transform: translateX( -50% );
	}
}

/*
 * The front-page tool matrix — two labelled rows scrolling against each other.
 *
 * Elementor cannot express this, so the whole thing is one HTML widget: a row is
 * a label column plus a clipped viewport, and the viewport holds a track of two
 * identical sets. Each set ends in `padding-right` equal to the tile gap, which
 * is what makes `translateX(-50%)` land the duplicate flush on the original and
 * keep the loop seamless in both directions.
 */
.h2-tools {
	display: flex;
	flex-direction: column;
	gap: 20px;
	width: 100%;
}

.h2-tools-row {
	align-items: center;
	display: grid;
	gap: 28px;
	grid-template-columns: minmax( 150px, 190px ) minmax( 0, 1fr );
}

/* The gutter label is right-aligned so both rows start on the same edge, and
   carries the dot that ties it to the tiles it names. */
.h2-tools-key {
	align-items: center;
	color: var(--sonipat-text-faint);
	display: flex;
	font-size: 0.7rem;
	font-weight: 700;
	gap: 0.6rem;
	justify-content: flex-end;
	letter-spacing: 0.16em;
	line-height: 1.3;
	text-align: right;
	text-transform: uppercase;
}

.h2-tools-key::after {
	background: var(--sonipat-primary);
	border-radius: 50%;
	box-shadow: 0 0 0 4px var(--sonipat-primary-soft);
	content: "";
	flex: 0 0 auto;
	height: 7px;
	width: 7px;
}

.h2-tools-view {
	-webkit-mask-image: linear-gradient( 90deg, transparent, #000 8%, #000 92%, transparent );
			mask-image: linear-gradient( 90deg, transparent, #000 8%, #000 92%, transparent );
	overflow: hidden;
	width: 100%;
}

.h2-tools-track {
	display: flex;
	width: -moz-max-content;
	width: max-content;
	will-change: transform;
}

.h2-tools-set {
	display: flex;
	flex-wrap: nowrap;
	gap: 14px;
	padding-right: 14px;
}

/* Opposite directions and different periods, so the rows never sync up. */
.h2-tools--left .h2-tools-track {
	animation: h2-tools-left 42s linear infinite;
}

.h2-tools--right .h2-tools-track {
	animation: h2-tools-right 50s linear infinite;
}

@keyframes h2-tools-left {
	to {
		transform: translateX( -50% );
	}
}

@keyframes h2-tools-right {
	from {
		transform: translateX( -50% );
	}
	to {
		transform: translateX( 0 );
	}
}

/* Tints are declared per tile class — the markup ships no inline styles, and a
   row can reuse a colour at any position. These are the fallbacks. */
.h2-tool {
	--tool-edge: var(--sonipat-border);
	--tool-ink: var(--sonipat-primary);
	--tool-wash: var(--sonipat-chip);
	align-items: center;
	background: linear-gradient( 180deg, var(--sonipat-surface), var(--sonipat-surface-hover) );
	border: 1px solid var(--sonipat-border);
	border-radius: 16px;
	box-shadow: 0 14px 28px -22px rgba( 23, 1, 44, 0.28 );
	display: flex;
	flex: 0 0 auto;
	gap: 0.8rem;
	padding: 0.6rem 1.15rem 0.6rem 0.6rem;
	transition: transform 0.3s cubic-bezier( 0.2, 0.7, 0.3, 1 ), box-shadow 0.3s ease, border-color 0.3s ease;
	white-space: nowrap;
}

.h2-tool.is-violet {
	--tool-edge: rgba( 106, 71, 237, 0.34 );
	--tool-ink: #4a2ec9;
	--tool-wash: rgba( 106, 71, 237, 0.10 );
}

.h2-tool.is-pink {
	--tool-edge: rgba( 214, 51, 132, 0.32 );
	--tool-ink: #b32a72;
	--tool-wash: rgba( 214, 51, 132, 0.10 );
}

.h2-tool.is-teal {
	--tool-edge: rgba( 12, 165, 152, 0.32 );
	--tool-ink: #067a70;
	--tool-wash: rgba( 12, 165, 152, 0.10 );
}

.h2-tool.is-amber {
	--tool-edge: rgba( 232, 148, 20, 0.34 );
	--tool-ink: #9a6100;
	--tool-wash: rgba( 232, 148, 20, 0.12 );
}

/* Lime only works as a wash here — as type on white it fails contrast, so the
   ink is the darkened partner tone. */
.h2-tool.is-lime {
	--tool-edge: rgba( 140, 190, 0, 0.36 );
	--tool-ink: #4f6b00;
	--tool-wash: rgba( 198, 248, 6, 0.22 );
}

.h2-tool-mark {
	align-items: center;
	background: var(--tool-wash);
	border-radius: 11px;
	color: var(--tool-ink);
	display: flex;
	flex: 0 0 auto;
	font-size: 0.84rem;
	font-weight: 800;
	height: 38px;
	justify-content: center;
	letter-spacing: -0.01em;
	transition: transform 0.3s cubic-bezier( 0.2, 0.7, 0.3, 1 );
	width: 38px;
}

.h2-tool-text {
	display: flex;
	flex: 0 0 auto;
	flex-direction: column;
	gap: 1px;
}

.h2-tool-name {
	color: var(--sonipat-text);
	font-size: 0.94rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.2;
}

.h2-tool-kind {
	color: var(--tool-ink);
	font-size: 0.66rem;
	font-weight: 600;
	letter-spacing: 0.13em;
	line-height: 1.2;
	text-transform: uppercase;
}

/* Pausing the track rather than the tile keeps the row still while a pointer is
   inside it, so hovering one card does not shove its neighbours. */
.h2-tools-view:hover .h2-tools-track {
	animation-play-state: paused;
}

.h2-tool:hover {
	border-color: var(--tool-edge);
	box-shadow: 0 20px 34px -20px var(--tool-edge);
	transform: translateY( -5px );
}

.h2-tool:hover .h2-tool-mark {
	transform: scale( 1.06 );
}

@media ( max-width: 1024px ) {
	.h2-tools-row {
		gap: 18px;
		grid-template-columns: minmax( 118px, 150px ) minmax( 0, 1fr );
	}
}

.h2-card {
	transition: transform 0.35s cubic-bezier( 0.2, 0.7, 0.3, 1 ), box-shadow 0.35s ease;
}

.h2-card:hover {
	box-shadow: var(--sonipat-shadow-lift);
	transform: translateY( -6px );
}

/*
 * The testimonials band — three quote cards, one of them lit.
 *
 * Every colour inside a card is set by the builder's own controls, so this sheet
 * only adds what a control cannot express: the wash behind the band, the
 * watermark glyph bleeding out of the corner, the rule above the attribution and
 * the accent edge on the card's own top border.
 */
.h2-voices {
	overflow: hidden;
	position: relative;
}

.h2-voices .h2-inner {
	position: relative;
	z-index: 1;
}

.h2-voices::before {
	background:
		radial-gradient( 34% 42% at 10% 16%, rgba( 106, 71, 237, 0.11 ), transparent 70% ),
		radial-gradient( 30% 38% at 90% 82%, rgba( 198, 248, 6, 0.17 ), transparent 72% );
	content: "";
	inset: 0;
	pointer-events: none;
	position: absolute;
	z-index: 0;
}

.h2-voice {
	overflow: hidden;
	position: relative;
}

/* The edge is the card's own top border, clipped to the corner radius by the
   container. It thickens on hover instead of moving, so it stays honest while
   the card itself lifts. */
.h2-voice::before {
	background: linear-gradient( 90deg, var(--sonipat-primary), var(--sonipat-secondary) );
	content: "";
	height: 3px;
	left: 0;
	position: absolute;
	top: 0;
	transition: height 0.35s ease;
	width: 100%;
}

.h2-voice:hover::before {
	height: 6px;
}

/* A closing quote mark, oversized and bled off the bottom corner. */
.h2-voice::after {
	color: var(--sonipat-primary);
	content: "\201D";
	font-family: Georgia, "Times New Roman", serif;
	font-size: 8.5rem;
	font-weight: 700;
	line-height: 1;
	opacity: 0.11;
	pointer-events: none;
	position: absolute;
	right: 10px;
	bottom: -3.4rem;
	transition: opacity 0.35s ease;
	z-index: 0;
}

.h2-voice:hover::after {
	opacity: 0.16;
}

/* The widget's own blocks have to sit above the watermark. */
.h2-voice .elementor-testimonial-wrapper {
	position: relative;
	z-index: 1;
}

.h2-voice .elementor-testimonial-meta {
	border-top: 1px solid var(--sonipat-border);
	margin-top: 1.5rem;
	padding-top: 1.15rem;
}

.h2-voice .elementor-testimonial-name {
	margin-bottom: 0.35rem;
}

.h2-voice--feature {
	border-color: rgba( 198, 248, 6, 0.26 );
}

.h2-voice--feature::before {
	background: linear-gradient( 90deg, var(--sonipat-secondary), var(--sonipat-primary) );
}

.h2-voice--feature::after {
	color: var(--sonipat-secondary);
	opacity: 0.2;
}

.h2-voice--feature:hover::after {
	opacity: 0.32;
}

.h2-voice--feature .elementor-testimonial-meta {
	border-top-color: rgba( 244, 241, 255, 0.16 );
}

.h2-voice--feature:hover {
	border-color: rgba( 198, 248, 6, 0.5 );
	box-shadow: 0 34px 70px -34px rgba( 198, 248, 6, 0.34 );
}

/*
 * The notes band — the newest posts, one of them given the room.
 *
 * The cards come from [sonipat_latest_notes] rather than from the builder, so this
 * sheet carries everything about them: the grid, the type, the hairlines, the hover.
 * The lead card spans both rows on the left and the two following it sit beside it,
 * which is the shape an editorial index has and a card row does not.
 *
 * The cards reveal through the stagger contract the service pages already use
 * (data-mx-stagger on the grid, data-mx-reveal on each card). That tween writes
 * `transform` every frame, and so does the hover lift below, so the two have to take
 * turns: while a reveal is running the attribute pauses the transform transition.
 */
[data-mx-revealing] {
	transition-property: border-color, box-shadow, background-color !important;
}

.h2-notes {
	display: grid;
	gap: 18px;
	grid-template-columns: 1.15fr 1fr;
}

.h2-note {
	background: var(--sonipat-surface);
	border: 1px solid var(--sonipat-border);
	border-radius: 20px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	overflow: hidden;
	padding: 26px 26px 22px;
	position: relative;
	transition: transform var(--sonipat-duration) var(--sonipat-ease), box-shadow var(--sonipat-duration) ease, border-color var(--sonipat-duration) ease;
}

.h2-note:hover {
	border-color: var(--sonipat-border-strong);
	box-shadow: var(--sonipat-shadow-lift);
	transform: translateY( -5px );
}

.h2-note--lead {
	grid-row: span 2;
	padding: 34px 34px 28px;
}

/* The lead spans both grid rows, so it holds a card more height than its own
   copy fills. The banner is the child that grows: the foot rule still lands at
   the bottom of the card and the space between is picture, not white. */
.h2-note--lead .h2-note-media {
	border-radius: 14px;
	flex: 1 1 auto;
	height: auto;
	min-height: 140px;
	object-fit: cover;
	width: 100%;
}

/* The position in the index, bled into the corner behind the type. */
.h2-note-index {
	color: var(--sonipat-primary);
	font-size: 2.6rem;
	font-weight: 800;
	line-height: 1;
	opacity: 0.12;
	pointer-events: none;
	position: absolute;
	right: 22px;
	top: 18px;
}

.h2-note--lead .h2-note-index {
	font-size: 4.4rem;
	opacity: 0.14;
	right: 28px;
	top: 24px;
}

.h2-note-meta {
	align-items: center;
	display: flex;
	font-size: 0.72rem;
	font-weight: 700;
	gap: 10px;
	letter-spacing: 0.12em;
	margin: 0;
	text-transform: uppercase;
}

/* Above the stretched title link, or the topic would never be reachable by click. */
.h2-note-cat {
	color: var(--sonipat-primary-hover);
	position: relative;
	text-decoration: none;
	z-index: 1;
}

.h2-note-cat:hover {
	text-decoration: underline;
}

.h2-note-sep {
	background: var(--sonipat-border);
	flex: 0 0 18px;
	height: 1px;
	width: 18px;
}

.h2-note-date {
	color: var(--sonipat-text-faint);
}

.h2-note-title {
	font-size: 1.24rem;
	line-height: 1.3;
	margin: 2px 0 0;
}

.h2-note--lead .h2-note-title {
	font-size: clamp( 1.45rem, 2.1vw, 1.9rem);
	letter-spacing: -0.015em;
}

.h2-note-title a {
	color: var(--sonipat-text);
	text-decoration: none;
}

/* One click target for the whole card, one stop for the keyboard. */
.h2-note-title a::after {
	content: "";
	inset: 0;
	position: absolute;
}

.h2-note:hover .h2-note-title a {
	color: var(--sonipat-primary-hover);
}

.h2-note-ex {
	color: var(--sonipat-text-muted);
	font-size: 0.95rem;
	line-height: 1.62;
	margin: 0;
}

.h2-note--row .h2-note-ex {
	font-size: 0.9rem;
}

.h2-note-foot {
	align-items: center;
	border-top: 1px solid var(--sonipat-border);
	display: flex;
	font-size: 0.72rem;
	gap: 12px;
	letter-spacing: 0.1em;
	margin: auto 0 0;
	padding-top: 14px;
	text-transform: uppercase;
}

.h2-note-min {
	color: var(--sonipat-text-faint);
	font-weight: 700;
}

.h2-note-go {
	color: var(--sonipat-primary);
	font-size: 1.1rem;
	margin-left: auto;
	transition: transform var(--sonipat-duration) var(--sonipat-ease);
}

.h2-note:hover .h2-note-go {
	transform: translateX( 5px );
}

.h2-notes-empty {
	color: var(--sonipat-text-muted);
	margin: 0;
}

/* The Google Maps embed only takes a pixel size, and Elementor's HTML widget has
   no responsive control for it. The frame clips the corners and the iframe fills
   it, so the map scales with the container instead of forcing a sideways scroll. */
.c2-map {
	border: 1px solid var( --sonipat-border );
	border-radius: 18px;
	overflow: hidden;
	width: 100%;
}

.c2-map iframe {
	border: 0;
	display: block;
	height: clamp( 320px, 42vh, 480px );
	width: 100%;
}

@media ( max-width: 767px ) {
	/* Narrow: the label becomes a centred caption and every tile is shown at
	   once instead of scrolling past. */
	.h2-tools-row {
		grid-template-columns: minmax( 0, 1fr );
		justify-items: center;
	}

	.h2-tools-key {
		justify-content: center;
		text-align: center;
	}

	.h2-tools-view {
		-webkit-mask-image: none;
				mask-image: none;
		overflow: visible;
	}

	.h2-tools--left .h2-tools-track,
	.h2-tools--right .h2-tools-track {
		animation: none;
		flex-wrap: wrap;
		justify-content: center;
		gap: 12px;
		width: 100%;
	}

	.h2-tools-set {
		flex-wrap: wrap;
		gap: 12px;
		justify-content: center;
		padding-right: 0;
		width: 100%;
	}

	/* The duplicate set only exists to make the loop seamless. */
	.h2-tools-set[ aria-hidden="true" ] {
		display: none;
	}

	.h2-tool {
		transition: none;
	}

	.h2-tool:hover {
		box-shadow: 0 14px 28px -22px rgba( 23, 1, 44, 0.28 );
		transform: none;
	}

	.h2-marquee-track {
		animation: none;
		flex-wrap: wrap;
		justify-content: center;
		gap: 10px;
		width: 100%;
	}

	/* The duplicate set only exists to make the loop seamless. */
	.h2-marquee-set[ aria-hidden="true" ] {
		display: none;
	}

	.h2-marquee-set {
		flex-wrap: wrap;
		justify-content: center;
		gap: 10px;
		padding-right: 0;
		width: 100%;
	}

	.h2-marquee {
		-webkit-mask-image: none;
				mask-image: none;
		overflow: visible;
	}

	.h2-card {
		transition: none;
	}

	.h2-card:hover {
		box-shadow: inherit;
		transform: none;
	}

	/* A finger has no hover state, so the edges and marks stay put. */
	.h2-voice::before,
	.h2-voice::after {
		transition: none;
	}

	.h2-voice:hover::before {
		height: 3px;
	}

	.h2-voice:hover::after {
		opacity: 0.11;
	}

	.h2-voice--feature:hover::after {
		opacity: 0.2;
	}

	/* One note under the next: the two-column grid would give the lead card half
	   the width it needs and squeeze the index numeral onto its title. */
	.h2-notes {
		grid-template-columns: minmax( 0, 1fr );
	}

	.h2-note--lead {
		grid-row: auto;
		padding: 26px 22px 20px;
	}

	/* Nothing is left over to absorb on a stacked card, so the banner takes a
	   ratio of its own instead of the desktop fill. */
	.h2-note--lead .h2-note-media {
		aspect-ratio: 16 / 9;
		flex: 0 0 auto;
		min-height: 0;
	}

	.h2-note--lead .h2-note-index {
		font-size: 2.6rem;
		right: 20px;
		top: 16px;
	}

	.h2-note--lead .h2-note-title {
		font-size: 1.3rem;
	}

	/* A finger has no hover state, so the lift and the arrow stay put. */
	.h2-note,
	.h2-note:hover .h2-note-go {
		transition: none;
	}

	.h2-note:hover {
		box-shadow: inherit;
		transform: none;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	/* Nothing moves: the rows lay out flat, the duplicate set goes away and all
	   ten platforms are readable without a scroll. */
	.h2-tools-view {
		-webkit-mask-image: none;
				mask-image: none;
		overflow: visible;
	}

	.h2-tools--left .h2-tools-track,
	.h2-tools--right .h2-tools-track {
		animation: none;
		flex-wrap: wrap;
		gap: 12px;
		justify-content: flex-start;
		width: 100%;
	}

	.h2-tools-set {
		flex-wrap: wrap;
		gap: 12px;
		padding-right: 0;
		width: 100%;
	}

	.h2-tools-set[ aria-hidden="true" ] {
		display: none;
	}

	.h2-tool,
	.h2-tool:hover {
		transition: none;
		transform: none;
	}

	.h2-tool:hover .h2-tool-mark {
		transform: none;
	}

	.h2-marquee-track {
		animation: none;
		flex-wrap: wrap;
		justify-content: center;
		gap: 10px;
		width: 100%;
	}

	.h2-marquee-set {
		flex-wrap: wrap;
		gap: 10px;
		justify-content: center;
		padding-right: 0;
		width: 100%;
	}

	.h2-marquee-set[ aria-hidden="true" ] {
		display: none;
	}

	.h2-marquee {
		-webkit-mask-image: none;
				mask-image: none;
		overflow: visible;
	}

	.h2-card,
	.h2-card:hover {
		transition: none;
		transform: none;
	}

	.h2-voice::before,
	.h2-voice::after {
		transition: none;
	}

	.h2-voice:hover::before {
		height: 3px;
	}

	.h2-voice:hover::after {
		opacity: 0.11;
	}

	.h2-voice--feature:hover {
		box-shadow: none;
	}

	.h2-voice--feature:hover::after {
		opacity: 0.2;
	}

	/* The tween that reveals these cards writes `transform`, so a running hover
	   transition would fight it. Nothing lifts when motion is off. */
	.h2-note,
	.h2-note:hover,
	.h2-note:hover .h2-note-go {
		transform: none;
		transition: none;
	}
}

/*
 * Front-page hero — the animated layer the builder cannot express.
 *
 * The band's own background colour is set by Elementor; these pseudo-elements
 * sit above it (z-index 0) and below the content column (z-index 1) to add a
 * drifting gradient field and a faint grid. `overflow: hidden` clips the orbs as
 * they travel, and `pointer-events: none` keeps the buttons clickable.
 */
.h2-hero-band {
	position: relative;
	overflow: hidden;
}

.h2-hero-band .h2-inner {
	position: relative;
	z-index: 1;
}

.h2-hero-band::before,
.h2-hero-band::after {
	content: "";
	position: absolute;
	inset: -25%;
	z-index: 0;
	pointer-events: none;
}

.h2-hero-band::before {
	background:
		radial-gradient( 38% 46% at 22% 28%, rgba( 106, 71, 237, 0.60 ), transparent 70% ),
		radial-gradient( 40% 48% at 82% 22%, rgba( 198, 248, 6, 0.20 ), transparent 70% ),
		radial-gradient( 46% 54% at 62% 86%, rgba( 84, 52, 208, 0.50 ), transparent 72% );
	filter: blur( 10px );
	animation: h2-hero-drift 20s ease-in-out infinite alternate;
}

.h2-hero-band::after {
	background-image:
		linear-gradient( rgba( 255, 255, 255, 0.05 ) 1px, transparent 1px ),
		linear-gradient( 90deg, rgba( 255, 255, 255, 0.05 ) 1px, transparent 1px );
	background-size: 46px 46px;
	-webkit-mask-image: radial-gradient( circle at 50% 38%, #000, transparent 76% );
			mask-image: radial-gradient( circle at 50% 38%, #000, transparent 76% );
}

@keyframes h2-hero-drift {
	0% {
		transform: translate3d( -2%, -1%, 0 ) scale( 1 );
	}
	50% {
		transform: translate3d( 3%, 2%, 0 ) scale( 1.08 );
	}
	100% {
		transform: translate3d( -1%, 3%, 0 ) scale( 1.02 );
	}
}

/* Two words in the headline carry the brand gradient. Elementor paints the h1 a
   solid on-dark colour; text-fill-color on the span wins for just these glyphs. */
.h2-accent {
	background: linear-gradient( 100deg, #C6F806 0%, #9FE870 42%, #8B74FF 100% );
	-webkit-background-clip: text;
			background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}

/* Top scroll-progress bar. Injected by the animation bundle on the front page
   only; scaleX is scrubbed 0 -> 1 by ScrollTrigger. */
.h2-scroll-progress {
	background: linear-gradient( 90deg, #6A47ED 0%, #8B74FF 55%, #C6F806 100% );
	height: 3px;
	left: 0;
	pointer-events: none;
	position: fixed;
	top: 0;
	transform: scaleX( 0 );
	transform-origin: 0 50%;
	width: 100%;
	z-index: 99999;
}

/* Floating orbs behind the hero copy. The bundle injects these nodes; they are
   clipped by the band's overflow and drift on their own float loop, with the
   scroll parallax layered on top by GSAP on pointer-fine devices. */
.h2-hero-decor {
	inset: 0;
	overflow: hidden;
	pointer-events: none;
	position: absolute;
	z-index: 0;
}

.h2-orb {
	border-radius: 50%;
	filter: blur( 2px );
	opacity: 0.55;
	position: absolute;
}

.h2-orb-a {
	animation: h2-float 9s ease-in-out infinite;
	background: radial-gradient( circle at 32% 30%, rgba( 198, 248, 6, 0.75 ), rgba( 198, 248, 6, 0 ) 70% );
	height: 130px;
	left: 12%;
	top: 20%;
	width: 130px;
}

.h2-orb-b {
	animation: h2-float 12s ease-in-out infinite reverse;
	background: radial-gradient( circle at 32% 30%, rgba( 139, 116, 255, 0.85 ), rgba( 106, 71, 237, 0 ) 70% );
	bottom: 14%;
	height: 190px;
	right: 10%;
	width: 190px;
}

.h2-orb-c {
	animation: h2-float 8s ease-in-out infinite;
	background: radial-gradient( circle at 32% 30%, rgba( 244, 241, 255, 0.55 ), rgba( 244, 241, 255, 0 ) 70% );
	height: 72px;
	left: 24%;
	top: 62%;
	width: 72px;
}

@keyframes h2-float {
	0%, 100% {
		transform: translate( 0, 0 );
	}
	50% {
		transform: translate( 16px, -20px );
	}
}

/* The scroll affordance under the hero CTA. */
.h2-scroll-cue {
	align-items: center;
	color: var( --sonipat-on-dark, #F4F1FF );
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 6px;
	opacity: 0.82;
}

.h2-scroll-mouse {
	border: 2px solid rgba( 244, 241, 255, 0.45 );
	border-radius: 14px;
	display: flex;
	height: 42px;
	justify-content: center;
	padding-top: 7px;
	width: 26px;
}

.h2-scroll-dot {
	animation: h2-scroll-dot 1.9s ease-in-out infinite;
	background: #C6F806;
	border-radius: 2px;
	height: 8px;
	width: 4px;
}

.h2-scroll-text {
	font-size: 0.62rem;
	letter-spacing: 0.28em;
	text-transform: uppercase;
}

@keyframes h2-scroll-dot {
	0% {
		opacity: 0;
		transform: translateY( 0 );
	}
	30% {
		opacity: 1;
	}
	70% {
		opacity: 1;
	}
	100% {
		opacity: 0;
		transform: translateY( 12px );
	}
}

/* Only when GSAP actually loaded (it adds .gsap-ready before boot), so a blocked
   CDN or reduced motion never hides the hero — the fromTo tween lifts the inline
   opacity back to 1 as it plays.
   Two selectors because a boxed Elementor container paints its widgets inside its
   own `e-con-inner` wrapper: the wrapper is never hidden, only the items the
   tween actually animates, which are one level deeper when it is present. */
.gsap-ready .h2-hero-band .h2-hero-copy > .e-con-inner > *,
.gsap-ready .h2-hero-band .h2-hero-copy > .elementor-element {
	opacity: 0;
}

/* Elementor can flip one canvas document between edit and preview without
   reloading it, so the pre-hide must never win while the builder is active. */
body.elementor-editor-active .h2-hero-band .h2-hero-copy > .e-con-inner > *,
body.elementor-editor-active .h2-hero-band .h2-hero-copy > .elementor-element {
	opacity: 1;
}

@media ( max-width: 767px ) {
	/* A blurred, drifting field is the first thing to go on a phone. */
	.h2-hero-band::before {
		animation: none;
		filter: blur( 6px );
	}

	.h2-hero-band::after {
		background-size: 34px 34px;
	}

	/* Three blurred orbs with no parallax behind them is pure paint cost. */
	.h2-hero-decor {
		display: none;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.h2-hero-band::before {
		animation: none;
	}

	.h2-scroll-dot {
		animation: none;
	}

	/* The motion engine bails before it injects these under reduced motion, so
	   pinching the CSS too is belt-and-braces against a stale node. */
	.h2-orb {
		animation: none;
	}

	.h2-scroll-progress,
	.h2-hero-decor {
		display: none;
	}

	/* The GSAP bundle returns before it adds .gsap-ready under reduced motion, so
	   the pre-hide never applies — but if it is ever present, drop it. */
	.gsap-ready .h2-hero-band .h2-hero-copy > .e-con-inner > *,
	.gsap-ready .h2-hero-band .h2-hero-copy > .elementor-element {
		opacity: 1;
	}
}