/**
 * Intelliguard Elements — widget styles.
 *
 * Ported from the React marketing site (src/index.css + tailwind.config.ts).
 * All selectors are scoped under an `ig-` prefix to avoid theme collisions.
 * Brand tokens are exposed as CSS custom properties on the widget wrappers.
 */

/* =========================================================================
   Brand tokens
   ========================================================================= */
.ig-hero,
.ig-valueprops,
.ig-stats,
.ig-partners,
.ig-rfid,
.ig-parallax,
.ig-cta {
	--ig-navy: hsl(225 70% 17%);
	--ig-navy-light: hsl(225 50% 30%);
	--ig-gold: hsl(38 91% 55%);
	--ig-gold-light: hsl(38 91% 70%);
	--ig-teal: hsl(174 60% 42%);
	--ig-teal-light: hsl(174 50% 60%);
	--ig-background: var(--ig-surface, hsl(0 0% 100%));
	--ig-foreground: var(--ig-ink, hsl(225 70% 17%));
	--ig-muted-foreground: hsl(220 10% 46%);
	--ig-border: hsl(220 20% 90%);
	--ig-card: hsl(0 0% 100%);
	--ig-radius: 0.75rem;

	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	box-sizing: border-box;
}

.ig-hero *,
.ig-valueprops *,
.ig-stats *,
.ig-partners *,
.ig-rfid *,
.ig-parallax *,
.ig-cta * {
	box-sizing: border-box;
}

/* Container — matches Tailwind's centered container (max 1400px, 2rem pad). */
.ig-container {
	width: 100%;
	max-width: 1400px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 2rem;
	padding-right: 2rem;
}

/* Shared eyebrow label (SectionLabel.tsx). */
.ig-section-label {
	display: inline-block;
	font-size: 0.875rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--ig-gold);
}

/* =========================================================================
   Shared buttons
   ========================================================================= */
.ig-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	border-radius: 9999px;
	padding: 0.75rem 2rem;
	font-size: 1rem;
	font-weight: 600;
	text-decoration: none;
	line-height: 1.2;
	transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
	cursor: pointer;
}

.ig-btn--gold {
	background: var(--ig-gold);
	color: var(--ig-navy);
}

.ig-btn--gold:hover {
	background: var(--ig-gold-light);
	color: var(--ig-navy);
}

.ig-btn--glass {
	background: rgba(255, 255, 255, 0.1);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border: 1px solid rgba(255, 255, 255, 0.2);
	color: #fff;
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.ig-btn--glass:hover {
	background: rgba(255, 255, 255, 0.2);
	color: #fff;
}

.ig-btn__chevron {
	font-size: 1.1em;
	line-height: 1;
}

/* =========================================================================
   Hero
   ========================================================================= */
.ig-hero {
	position: relative;
	min-height: 80vh;
	display: flex;
	align-items: center;
	overflow: hidden;
	background: var(--ig-surface, var(--ig-navy));
}

.ig-hero__bg {
	position: absolute;
	inset: 0;
}

.ig-hero__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.ig-hero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to right,
		hsl(225 70% 17% / 0.9),
		hsl(225 70% 17% / 0.7),
		hsl(225 70% 17% / 0.4)
	);
}

/* Standardized image treatment for CENTERED hero content: the left-fading
   gradient above suits left-aligned copy (home). Centered copy would sit over
   the image's untinted side and fight the photo, so centered variants get a
   uniform scrim — consistent and readable over any image. */
.ig-hero--center-content .ig-hero__overlay,
.ig-hero--centered .ig-hero__overlay,
.ig-hero--with-search .ig-hero__overlay {
	background: hsl(225 70% 17% / 0.82);
}

/* Ribbon accents — gold bottom-left, teal top-right (index.css .ribbon-section). */
.ig-hero__ribbon {
	position: absolute;
	z-index: 1;
	pointer-events: none;
}

.ig-hero__ribbon--gold {
	left: -60px;
	bottom: -40px;
	width: 220px;
	height: 350px;
	background: var(--ig-gold);
	clip-path: polygon(100% 30%, 0 0, 0 100%, 100% 100%);
}

.ig-hero__ribbon--teal {
	right: -40px;
	top: -40px;
	width: 200px;
	height: 320px;
	background: var(--ig-teal);
	clip-path: polygon(0 0, 100% 0, 100% 100%, 0 60%);
}

.ig-hero__inner {
	position: relative;
	z-index: 10;
	padding-top: 5rem;
	padding-bottom: 5rem;
	padding-left: 15%;
}

.ig-hero__content {
	max-width: 48rem;
	animation: ig-fade-in-up 0.7s ease-out both;
}

.ig-hero__eyebrow {
	color: var(--ig-gold-light);
	margin-bottom: 1rem;
}

.ig-hero__heading {
	font-size: clamp(2.25rem, 5vw, 3.75rem);
	font-weight: 800;
	color: #fff;
	line-height: 1.1;
	margin: 0 0 1.5rem;
}

.ig-hero__sub {
	font-size: 1.125rem;
	color: rgba(255, 255, 255, 0.8);
	margin: 0 0 2rem;
	max-width: 42rem;
	line-height: 1.6;
}

.ig-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
}

/* =========================================================================
   Value Propositions
   ========================================================================= */
.ig-valueprops {
	padding: 5rem 0;
	background: var(--ig-background);
}

.ig-valueprops__intro {
	text-align: center;
	max-width: 48rem;
	margin: 0 auto 3.5rem;
}

.ig-valueprops__heading {
	font-size: clamp(1.875rem, 4vw, 2.25rem);
	font-weight: 700;
	color: var(--ig-navy);
	margin: 0.75rem 0 0;
}

.ig-valueprops__lead {
	margin-top: 2rem;
	color: var(--ig-muted-foreground);
	line-height: 1.7;
}

.ig-valueprops__grid {
	display: grid;
	gap: 2rem;
	max-width: 64rem;
	margin: 0 auto;
}

@media (min-width: 640px) {
	.ig-valueprops__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

.ig-card {
	border-radius: 1rem;
	padding: 2rem;
	background: var(--ig-card);
	border: 1px solid var(--ig-border);
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
	transition: box-shadow 0.2s ease;
}

.ig-card:hover {
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.12);
}

.ig-card__icon {
	width: 3.5rem;
	height: 3.5rem;
	background: hsl(174 60% 42% / 0.1);
	border-radius: 0.75rem;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 1.25rem;
	transition: background-color 0.2s ease;
}

.ig-card:hover .ig-card__icon {
	background: hsl(174 60% 42% / 0.2);
}

.ig-card__icon svg,
.ig-card__icon i {
	width: 1.75rem;
	height: 1.75rem;
	font-size: 1.75rem;
	color: var(--ig-teal);
}

.ig-card__title {
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--ig-navy);
	margin: 0 0 1rem;
}

.ig-card__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.ig-card__item {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	font-size: 0.875rem;
	line-height: 1.6;
	color: hsl(225 70% 17% / 0.8);
}

.ig-card__bar {
	color: var(--ig-teal);
	font-weight: 700;
	line-height: 1.3;
	flex-shrink: 0;
}

/* One Connected Platform panel. */
.ig-valueprops__panel {
	margin-top: 4rem;
	max-width: 56rem;
	margin-left: auto;
	margin-right: auto;
	border-radius: 1rem;
	padding: 2.5rem;
	background: var(--ig-navy);
	color: #fff;
	text-align: center;
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2);
}

.ig-valueprops__panel-heading {
	font-size: clamp(1.5rem, 3vw, 1.875rem);
	font-weight: 700;
	color: var(--ig-gold);
	margin: 0 0 1.5rem;
}

.ig-valueprops__panel-body {
	max-width: 42rem;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.ig-valueprops__panel-body p {
	color: rgba(255, 255, 255, 0.9);
	margin: 0;
}

/* =========================================================================
   Stats Banner
   ========================================================================= */
.ig-stats {
	background: var(--ig-surface, var(--ig-navy));
	padding: 4rem 0;
}

.ig-stats__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 2rem;
}

@media (min-width: 1024px) {
	.ig-stats__grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

.ig-stats__item {
	text-align: center;
}

.ig-stats__value {
	font-size: clamp(1.875rem, 4vw, 2.25rem);
	font-weight: 800;
	color: var(--ig-gold);
	margin-bottom: 0.5rem;
}

.ig-stats__label {
	color: rgba(255, 255, 255, 0.7);
	font-size: 0.875rem;
}

/* =========================================================================
   Partner Logos
   ========================================================================= */
.ig-partners {
	padding: 4rem 0;
	background: var(--ig-background);
}

.ig-partners__head {
	text-align: center;
	margin-bottom: 2.5rem;
}

.ig-partners__heading {
	font-size: clamp(1.5rem, 3vw, 1.875rem);
	font-weight: 700;
	color: var(--ig-navy);
	margin: 0.75rem 0 0;
}

.ig-partners__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1rem;
}

@media (min-width: 640px) {
	.ig-partners__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

.ig-partners__cell {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 6rem;
	padding: 1.5rem 1rem;
}

.ig-partners__logo {
	max-height: 2.5rem;
	max-width: 100%;
	object-fit: contain;
}

/* Marquee visible only on large screens (matches lg: breakpoint). */
.ig-partners__marquee-mask {
	display: none;
}

@media (min-width: 1024px) {
	.ig-partners__grid {
		display: none;
	}

	.ig-partners__marquee-mask {
		display: block;
		overflow: hidden;
	}
}

.ig-partners__marquee {
	display: flex;
	width: max-content;
	gap: 2rem;
	padding-right: 2rem;
	animation: ig-scroll-logos 20s linear infinite;
}

.ig-partners__marquee-cell {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 6rem;
	width: 14rem;
	flex-shrink: 0;
	padding: 0 1.25rem;
}

/* Pause the marquee on hover for readability. */
.ig-partners__marquee-mask:hover .ig-partners__marquee {
	animation-play-state: paused;
}

/* =========================================================================
   RFID Feature
   ========================================================================= */
.ig-rfid {
	padding: 5rem 0;
	background: var(--ig-background);
}

.ig-rfid__grid {
	display: grid;
	gap: 3rem;
	align-items: center;
}

@media (min-width: 1024px) {
	.ig-rfid__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	/* Image-left variant swaps the visual order. */
	.ig-rfid--image-left .ig-rfid__media {
		order: -1;
	}
}

.ig-rfid__heading {
	font-size: clamp(1.875rem, 4vw, 2.25rem);
	font-weight: 700;
	color: var(--ig-navy);
	margin: 0.75rem 0 1.5rem;
}

.ig-rfid__body {
	color: var(--ig-muted-foreground);
	line-height: 1.7;
	margin: 0 0 1.5rem;
}

.ig-rfid__list {
	list-style: none;
	margin: 0 0 2rem;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.ig-rfid__item {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	font-size: 0.875rem;
	color: var(--ig-foreground);
}

.ig-rfid__dot {
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 9999px;
	background: var(--ig-gold);
	flex-shrink: 0;
}

.ig-rfid__media {
	border-radius: 1rem;
	overflow: hidden;
	box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.15);
}

.ig-rfid__img {
	width: 100%;
	height: auto;
	display: block;
}

/* =========================================================================
   Parallax Features
   ========================================================================= */
.ig-parallax {
	position: relative;
	height: 467px;
	overflow: hidden;
	display: flex;
	align-items: center;
}

.ig-parallax__bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	background-attachment: fixed; /* CSS approximation of the scroll parallax. */
}

.ig-parallax__overlay {
	position: absolute;
	inset: 0;
	background: hsl(225 70% 17% / 0.7);
}

.ig-parallax__inner {
	position: relative;
	z-index: 10;
	width: 100%;
}

.ig-parallax__grid {
	display: grid;
	gap: 2rem;
}

@media (min-width: 640px) {
	.ig-parallax__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

.ig-parallax__card {
	text-align: center;
	border-radius: 1rem;
	padding: 2rem;
	background: rgba(255, 255, 255, 0.1);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border: 1px solid rgba(255, 255, 255, 0.2);
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2);
}

.ig-parallax__icon {
	width: 4rem;
	height: 4rem;
	margin: 0 auto 1rem;
	border-radius: 0.75rem;
	background: rgba(255, 255, 255, 0.1);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	border: 1px solid rgba(255, 255, 255, 0.15);
	display: flex;
	align-items: center;
	justify-content: center;
}

.ig-parallax__icon svg,
.ig-parallax__icon i {
	width: 2rem;
	height: 2rem;
	font-size: 2rem;
	color: var(--ig-gold);
}

.ig-parallax__title {
	font-size: 1.25rem;
	font-weight: 700;
	color: #fff;
	margin: 0 0 0.5rem;
}

.ig-parallax__desc {
	color: rgba(255, 255, 255, 0.7);
	font-size: 0.875rem;
	line-height: 1.6;
	max-width: 20rem;
	margin: 0 auto;
}

/* =========================================================================
   Request Demo CTA
   ========================================================================= */
.ig-cta {
	position: relative;
	padding: 6rem 0;
	background: var(--ig-surface, var(--ig-teal));
	overflow: hidden;
}

/* Expanding RFID wave rings. */
.ig-cta__rings {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.ig-cta__ring {
	position: absolute;
	left: 50%;
	top: 50%;
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: 9999px;
	transform: translate(-50%, -50%);
	animation: ig-ring-expand 4s ease-out infinite;
}

.ig-cta__ring--0 { --ig-ring-max: 600px; animation-delay: 0s; }
.ig-cta__ring--1 { --ig-ring-max: 800px; animation-delay: 0.8s; }
.ig-cta__ring--2 { --ig-ring-max: 1000px; animation-delay: 1.6s; }
.ig-cta__ring--3 { --ig-ring-max: 1200px; animation-delay: 2.4s; }
.ig-cta__ring--4 { --ig-ring-max: 1400px; animation-delay: 3.2s; }

/* Gold ribbon accents. */
.ig-cta__ribbon {
	position: absolute;
	width: 300px;
	height: 60px;
	background: var(--ig-gold);
	z-index: 1;
	pointer-events: none;
}

.ig-cta__ribbon--top {
	top: -15px;
	left: 0;
	clip-path: polygon(0 0, 100% 10%, 90% 100%, 0 100%);
}

.ig-cta__ribbon--bottom {
	bottom: -15px;
	right: 0;
	clip-path: polygon(10% 0, 100% 0, 100% 100%, 0 90%);
}

.ig-cta__inner {
	position: relative;
	z-index: 10;
	text-align: center;
}

.ig-cta__eyebrow {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	margin-bottom: 1rem;
}

.ig-cta__radio {
	color: rgba(255, 255, 255, 0.8);
	display: inline-flex;
	animation: ig-radio-wiggle 2s ease-in-out infinite;
}

.ig-cta__eyebrow-text {
	font-size: 0.875rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.15em;
	color: rgba(255, 255, 255, 0.7);
}

.ig-cta__heading {
	font-size: clamp(1.875rem, 5vw, 3rem);
	font-weight: 800;
	color: #fff;
	margin: 0 0 1.25rem;
}

.ig-cta__sub {
	color: rgba(255, 255, 255, 0.8);
	font-size: 1.125rem;
	max-width: 42rem;
	margin: 0 auto 2.5rem;
}

/* Pill button with gold slide-up hover fill. */
.ig-cta__btn {
	position: relative;
	display: inline-block;
	overflow: hidden;
	background: var(--ig-navy);
	color: #fff;
	border-radius: 9999px;
	padding: 1rem 2.5rem;
	font-size: 1rem;
	font-weight: 700;
	text-decoration: none;
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2);
}

.ig-cta__btn-fill {
	position: absolute;
	inset: 0;
	background: var(--ig-gold);
	border-radius: 9999px;
	transform: translateY(100%);
	transition: transform 0.3s ease-out;
}

.ig-cta__btn:hover .ig-cta__btn-fill {
	transform: translateY(0);
}

.ig-cta__btn-label {
	position: relative;
	z-index: 10;
	transition: color 0.3s ease;
}

.ig-cta__btn:hover .ig-cta__btn-label {
	color: var(--ig-navy);
}

/* =========================================================================
   Keyframes (ported from index.css)
   ========================================================================= */
@keyframes ig-fade-in-up {
	from { opacity: 0; transform: translateY(30px); }
	to   { opacity: 1; transform: translateY(0); }
}

@keyframes ig-scroll-logos {
	0%   { transform: translateX(0); }
	100% { transform: translateX(-50%); }
}

@keyframes ig-ring-expand {
	0%   { width: 80px; height: 80px; opacity: 0.4; }
	100% { width: var(--ig-ring-max, 600px); height: var(--ig-ring-max, 600px); opacity: 0; }
}

@keyframes ig-radio-wiggle {
	0%, 100% { transform: rotate(0deg); }
	25%      { transform: rotate(15deg); }
	75%      { transform: rotate(-15deg); }
}

/* Respect reduced-motion preferences. */
@media (prefers-reduced-motion: reduce) {
	.ig-hero__content,
	.ig-partners__marquee,
	.ig-cta__ring,
	.ig-cta__radio {
		animation: none !important;
	}
}

/* Elementor inlines Font Awesome icons as SVGs that rely on `fill: currentColor`
   from Elementor's icon stylesheet — which our canvas pages don't enqueue. Supply
   it here so every icon follows the color set by component CSS (gold/teal/white on
   dark surfaces) instead of falling back to black SVG fill. */
.e-font-icon-svg { fill: currentColor; }

/* Mobile safety: the hero inner is a flex item — min-width:auto let unbreakable
   content force it wider than the viewport (clipped both sides on phones).
   Allow it (and grid children) to shrink; long words wrap instead of overflowing. */
.ig-hero__inner { min-width: 0; }
.ig-hero__grid > * { min-width: 0; }
.ig-hero__heading { overflow-wrap: break-word; }

/* Hero "See ... in Action" buttons anchor-scroll to demo widgets on the same
   page. Smooth scrolling (unless reduced motion is preferred) and a top margin
   so the sticky header doesn't cover the section heading on arrival. */
@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

.ig-mp-scan,
.ig-mp-scan__anchor-alias,
.ig-mcws-ease,
.ig-mccab-explorer,
.ig-mi-modules {
	scroll-margin-top: 90px;
}

/* Hero contact form: inline error for API submissions. */
.ig-hero-form__error {
	margin: 0 0 0.5rem;
	font-size: 0.85rem;
	font-weight: 600;
	color: #b38b3f;
}