/*!
 * ERP Design System – global stylesheet
 * ---------------------------------------------------------------
 * HOW TO USE: in Elementor, add the class names below to any
 * widget/container (Advanced > CSS Classes). No other CSS needed.
 *
 * CLASS INDEX
 *   Layout/sections : erp-section  erp-section-alt  erp-hero  erp-cta-banner
 *   Surfaces        : erp-card  erp-card-hover  erp-glow-box
 *   Buttons         : erp-btn  (on a Button widget)  erp-btn-ghost
 *   Text            : erp-accent (red word inside a heading <span class="erp-accent">)
 *   Media           : erp-img-zoom  erp-logo-grid  erp-no-anim (LCP image)
 *   Header          : erp-header  (on the header's top container)
 *   Motion          : erp-fade-up  erp-float  + Elementor's own Entrance Animations
 *   Tabs/Accordion  : erp-tabs  erp-accordion
 *
 * RULES: only `transform` and `opacity` are animated (GPU-friendly).
 * ------------------------------------------------------------- */

/* ============ 0. FONTS (self-hosted, 2 weights only) ============
 * Put Inter-Regular.woff2 (400) and Inter-SemiBold.woff2 (600) in /assets/fonts/.
 * size-adjust keeps the fallback metrics close to Inter => lower CLS. */
@font-face {
	font-family: "Inter";
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	src: url("fonts/Inter-Regular.woff2") format("woff2");
}
@font-face {
	font-family: "Inter";
	font-weight: 600;
	font-style: normal;
	font-display: swap;
	src: url("fonts/Inter-SemiBold.woff2") format("woff2");
}

/* ============ 1. DESIGN TOKENS ============
 * Mirror of Elementor Global Colors. Change colors in Elementor
 * (Site Settings > Global Colors) and these follow, because each
 * token falls back to the Elementor variable first. */
:root {
	--erp-bg:        var(--e-global-color-erp_bg, #0B0B0B);
	--erp-bg-alt:    var(--e-global-color-erp_bg_alt, #111111);
	--erp-card:      var(--e-global-color-erp_card, #161616);
	--erp-border:    var(--e-global-color-erp_border, #2A2A2A);
	--erp-red:       var(--e-global-color-erp_red, #E10600);
	--erp-red-hover: var(--e-global-color-erp_red_hover, #FF2A1F);
	--erp-heading:   var(--e-global-color-erp_heading, #FFFFFF);
	--erp-body:      var(--e-global-color-erp_body, #B5B5B5);
	--erp-muted:     var(--e-global-color-erp_muted, #7A7A7A);
	--erp-glow:      rgba(225, 6, 0, 0.25);
	--erp-glow-soft: rgba(225, 6, 0, 0.12);

	--erp-radius:    14px;
	--erp-ease:      cubic-bezier(.22, .61, .36, 1);
	--erp-t:         .3s var(--erp-ease);
	--erp-font:      "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ============ 2. BASE ============ */
html { scroll-behavior: smooth; scroll-padding-top: 90px; } /* smooth anchors, clear sticky header */
body {
	background: var(--erp-bg);
	color: var(--erp-body);
	font-family: var(--erp-font);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeSpeed;
}
h1, h2, h3, h4, h5, h6 { color: var(--erp-heading); font-family: var(--erp-font); }
a { transition: color var(--erp-t); }
::selection { background: var(--erp-red); color: #fff; }

/* Red highlighted word inside headings:  <span class="erp-accent">ERP</span> */
.erp-accent { color: var(--erp-red); }

/* Section backgrounds */
.erp-section     { background: var(--erp-bg); }
.erp-section-alt { background: var(--erp-bg-alt); }

/* ============ 3. PAGE TRANSITION (fade) ============
 * Fade-in is opacity only and very short so it cannot delay LCP. */
body { animation: erp-page-in .25s ease-out both; }
body.erp-leaving { opacity: 0; transition: opacity .18s ease-in; }
@keyframes erp-page-in { from { opacity: 0; } to { opacity: 1; } }

/* ============ 4. BUTTONS ============
 * Add class `erp-btn` to an Elementor Button widget. */
.erp-btn .elementor-button,
.elementor-button.erp-btn {
	background: var(--erp-red);
	color: #fff;
	border: 1px solid var(--erp-red);
	border-radius: 10px;
	font-family: var(--erp-font);
	font-weight: 600;
	transition: transform var(--erp-t), box-shadow var(--erp-t), background-color var(--erp-t);
	will-change: transform;
}
.erp-btn .elementor-button:hover,
.elementor-button.erp-btn:hover {
	background: var(--erp-red-hover);
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 8px 28px var(--erp-glow), 0 0 0 1px var(--erp-red-hover);
}
.erp-btn .elementor-button:active { transform: translateY(0); }

/* Outline / secondary button */
.erp-btn-ghost .elementor-button {
	background: transparent;
	color: var(--erp-heading);
	border: 1px solid var(--erp-border);
	border-radius: 10px;
	transition: transform var(--erp-t), box-shadow var(--erp-t), border-color var(--erp-t);
}
.erp-btn-ghost .elementor-button:hover {
	border-color: var(--erp-red);
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 8px 28px var(--erp-glow-soft);
}

/* ============ 5. CARDS ============
 * `erp-card` = panel look. Add `erp-card-hover` for lift + red border + glow. */
.erp-card {
	background: var(--erp-card);
	border: 1px solid var(--erp-border);
	border-radius: var(--erp-radius);
}
.erp-card-hover {
	transition: transform var(--erp-t), box-shadow var(--erp-t), border-color var(--erp-t);
	will-change: transform;
}
.erp-card-hover:hover {
	transform: translateY(-6px);
	border-color: var(--erp-red);
	box-shadow: 0 14px 40px var(--erp-glow-soft), 0 0 0 1px rgba(225, 6, 0, .35);
}

/* ============ 6. HERO / CTA BACKGROUNDS (CSS only) ============
 * Hero: red radial glows + slow floating blobs. Animates transform only. */
.erp-hero,
.erp-cta-banner {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	background:
		radial-gradient(60% 55% at 80% 10%, var(--erp-glow), transparent 70%),
		radial-gradient(45% 45% at 10% 90%, var(--erp-glow-soft), transparent 70%),
		var(--erp-bg);
}
.erp-hero::before,
.erp-hero::after {
	content: "";
	position: absolute;
	z-index: -1;
	width: 460px; height: 460px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(225, 6, 0, .28), transparent 65%);
	filter: blur(40px);
	pointer-events: none;
	will-change: transform;
}
.erp-hero::before { top: -120px; right: -80px; animation: erp-float 14s ease-in-out infinite; }
.erp-hero::after  { bottom: -160px; left: -120px; animation: erp-float 18s ease-in-out infinite reverse; }
@keyframes erp-float {
	0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
	50%      { transform: translate3d(-30px, 24px, 0) scale(1.08); }
}
/* Optional: add `erp-float` to any icon/shape for a gentle bob. */
.erp-float { animation: erp-bob 6s ease-in-out infinite; will-change: transform; }
@keyframes erp-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* Hero text fade-up on load (CSS only, no JS). Put `erp-fade-up` on hero
 * heading/paragraph/button; use inline style delays via the helpers below. */
.erp-fade-up { animation: erp-fade-up .7s var(--erp-ease) both; }
.erp-fade-up.d1 { animation-delay: .10s; }
.erp-fade-up.d2 { animation-delay: .20s; }
.erp-fade-up.d3 { animation-delay: .30s; }
.erp-fade-up.d4 { animation-delay: .40s; }
@keyframes erp-fade-up { from { opacity: 0; transform: translate3d(0, 24px, 0); } to { opacity: 1; transform: none; } }

/* LCP safety: NEVER animate the hero image. Put `erp-no-anim` on it. */
.erp-no-anim, .erp-no-anim * { animation: none !important; transition: none !important; opacity: 1 !important; transform: none !important; }

/* ============ 7. IMAGES ============
 * Gentle zoom inside a clipped wrapper. Add `erp-img-zoom` to the Image widget. */
.erp-img-zoom { overflow: hidden; border-radius: var(--erp-radius); }
.erp-img-zoom img { transition: transform .6s var(--erp-ease); will-change: transform; }
.erp-img-zoom:hover img { transform: scale(1.06); }

/* ============ 8. LOGO GRID ============
 * Put `erp-logo-grid` on the container (or Image Carousel/Gallery) holding logos. */
.erp-logo-grid img {
	filter: grayscale(1) brightness(1.4);
	opacity: .6;
	transition: filter var(--erp-t), opacity var(--erp-t), transform var(--erp-t);
}
.erp-logo-grid img:hover { filter: none; opacity: 1; transform: scale(1.05); }

/* ============ 9. TABS & ACCORDION ============
 * Smooth fade when switching; vertical tab look (left list, right panel).
 * Elementor toggles display, so we animate opacity/transform on reveal. */
.erp-tabs .elementor-tab-content,
.erp-accordion .elementor-tab-content {
	animation: erp-tab-in .35s var(--erp-ease) both;
}
@keyframes erp-tab-in { from { opacity: 0; transform: translate3d(0, 8px, 0); } to { opacity: 1; transform: none; } }

.erp-tabs .elementor-tab-title {
	transition: color var(--erp-t), background-color var(--erp-t), border-color var(--erp-t);
	border: 1px solid transparent;
	border-radius: 10px;
	color: var(--erp-body);
}
.erp-tabs .elementor-tab-title.elementor-active,
.erp-tabs .elementor-tab-title:hover {
	background: var(--erp-red);
	color: #fff;
}
.erp-tabs .elementor-tabs-content-wrapper,
.erp-tabs .elementor-tab-content {
	background: var(--erp-card);
	border-color: var(--erp-border);
	color: var(--erp-body);
}
.erp-accordion .elementor-accordion-item { border: 1px solid var(--erp-border); border-radius: 12px; margin-bottom: 12px; overflow: hidden; background: var(--erp-card); transition: border-color var(--erp-t); }
.erp-accordion .elementor-accordion-item:hover,
.erp-accordion .elementor-tab-title.elementor-active { border-color: var(--erp-red); }
.erp-accordion .elementor-accordion-icon { color: var(--erp-red); }

/* ============ 10. COUNTERS / STAT NUMBERS ============ */
.erp-stat .elementor-counter-number-wrapper { color: var(--erp-red); font-weight: 600; }

/* ============ 11. FORMS ============ */
.erp-form .elementor-field-textual {
	background: var(--erp-card);
	border: 1px solid var(--erp-border);
	color: var(--erp-heading);
	border-radius: 10px;
	transition: border-color var(--erp-t), box-shadow var(--erp-t);
}
.erp-form .elementor-field-textual:focus { border-color: var(--erp-red); box-shadow: 0 0 0 3px var(--erp-glow-soft); outline: 0; }
.erp-form .elementor-field-label { color: var(--erp-heading); }

/* ============ 12. STICKY HEADER ============
 * Add `erp-header` to the header's top container and set it Sticky: Top
 * (Elementor Pro) or use position:fixed via this class (free). No layout
 * properties change: the "shrink" is a logo scale (transform) and a
 * background layer that fades in (opacity) with backdrop blur. */
.erp-header {
	position: fixed;
	top: 0; left: 0; right: 0;
	z-index: 999;
	isolation: isolate;
	background: transparent;
	border-bottom: 1px solid transparent;
	transition: border-color var(--erp-t);
}
.erp-header::before {                       /* blurred dark layer, fades in on scroll */
	content: "";
	position: absolute; inset: 0; z-index: -1;
	background: rgba(11, 11, 11, .82);
	-webkit-backdrop-filter: blur(14px) saturate(140%);
	backdrop-filter: blur(14px) saturate(140%);
	opacity: 0;
	transition: opacity var(--erp-t);
}
.erp-header.is-scrolled { border-bottom-color: var(--erp-border); }
.erp-header.is-scrolled::before { opacity: 1; }
.erp-header .elementor-widget-image,
.erp-header .elementor-widget-theme-site-logo {
	transform-origin: left center;
	transform: scale(1.12);
	transition: transform var(--erp-t);
}
.erp-header.is-scrolled .elementor-widget-image,
.erp-header.is-scrolled .elementor-widget-theme-site-logo { transform: scale(1); }
body.admin-bar .erp-header { top: 32px; }
@media (max-width: 782px) { body.admin-bar .erp-header { top: 46px; } }

/* Nav menu links */
.erp-header .elementor-nav-menu a { transition: color var(--erp-t); }
.erp-header .elementor-nav-menu a:hover,
.erp-header .elementor-nav-menu a.elementor-item-active { color: var(--erp-red) !important; }

/* ============ 13. GLOW BOX (CTA banners etc.) ============ */
.erp-glow-box {
	background: var(--erp-card);
	border: 1px solid var(--erp-border);
	border-radius: 20px;
	box-shadow: 0 0 80px var(--erp-glow-soft) inset, 0 20px 60px rgba(0, 0, 0, .5);
}

/* ============ 14. RESPONSIVE ============ */
@media (max-width: 767px) {
	.erp-hero::before, .erp-hero::after { width: 280px; height: 280px; } /* lighter on mobile */
	.erp-card-hover:hover { transform: none; }                            /* no sticky hover on touch */
}

/* ============ 15. REDUCED MOTION ============
 * Disables every animation/transition for users who ask for it,
 * including Elementor's built-in entrance animations. */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}
	.elementor-invisible { visibility: visible !important; opacity: 1 !important; }
	.erp-card-hover:hover, .erp-btn .elementor-button:hover, .erp-img-zoom:hover img { transform: none; }
}