/**
 * ER High-Tech Hero Slider CSS — Fullcast Engine
 * Open Spacious Design, Split Duo Columns, Ken Burns Zoom, Plan-to-Pay Interactive Rail & Flat Line SVGs
 */

:root {
	--bg-deep: #050914;
	--bg-raise: #0A1224;
	--ink: #E8EEFC;
	--ink-dim: #93A1C4;
	--line: rgba(120, 150, 255, 0.14);
	--radius-pill: 100px;
	--ease-out: cubic-bezier(.16, 1, .3, 1);
	--acc: 253, 64, 0;
	--acc-2: 255, 138, 80;
}

.er-hero-slider-wrap {
	position: relative;
	width: 100%;
	min-height: var(--hero-height, 760px);
	background: var(--bg-deep);
	overflow: hidden;
	color: var(--ink);
	font-family: 'Inter', system-ui, sans-serif;
	box-sizing: border-box;
	isolation: isolate;
	-webkit-font-smoothing: antialiased;
}

.er-hero-slider-wrap * {
	box-sizing: border-box;
}

.er-hero-slider-inner {
	position: relative;
	width: 100%;
	height: 100%;
	min-height: var(--hero-height, 760px);
}

/* Background Aurora Drift */
.er-hero-aurora {
	position: absolute;
	inset: -20%;
	z-index: 0;
	pointer-events: none;
	filter: blur(90px);
	opacity: .5;
}

/* Bottom Fade Mask for Seamless Infinite Section Transition */
.er-hero-bottom-fade {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	width: 100%;
	height: var(--bottom-fade-height, 140px);
	z-index: 4;
	pointer-events: none;
	background: linear-gradient(to top, var(--bottom-fade-col, #050914) 0%, rgba(5, 9, 20, 0.6) 45%, transparent 100%);
}

.er-hero-aurora::before,
.er-hero-aurora::after {
	content: "";
	position: absolute;
	width: 55vw;
	height: 55vw;
	border-radius: 50%;
}

.er-hero-aurora::before {
	background: radial-gradient(circle, rgba(var(--acc), .26), transparent 65%);
	top: -8%;
	left: -6%;
	animation: er-driftA 26s ease-in-out infinite alternate;
}

.er-hero-aurora::after {
	background: radial-gradient(circle, rgba(var(--acc-2), .16), transparent 65%);
	bottom: -14%;
	right: -8%;
	animation: er-driftB 32s ease-in-out infinite alternate;
}

@keyframes er-driftA {
	from { transform: translate(0, 0) scale(1); }
	to { transform: translate(9vw, 7vh) scale(1.15); }
}

@keyframes er-driftB {
	from { transform: translate(0, 0) scale(1.1); }
	to { transform: translate(-8vw, -6vh) scale(.95); }
}

/* Slide Base State & Transitions */
.er-hero-slide {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	visibility: hidden;
	transition: opacity 1s var(--ease-out), visibility 0s 1s;
	z-index: 2;
	display: flex;
	align-items: center;
}

.er-hero-slide.is-active {
	opacity: 1;
	visibility: visible;
	z-index: 3;
	transition: opacity 1s var(--ease-out);
}

.er-hero-slide::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(115deg, rgba(var(--acc), .32), transparent 55%, rgba(var(--acc), .14));
	mix-blend-mode: overlay;
}

/* Vignette gradient overlay to maintain high text contrast over motion canvas */
.er-hero-slide::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background:
		linear-gradient(to bottom, rgba(5,9,20,.55), transparent 30%, transparent 65%, rgba(5,9,20,.75)),
		radial-gradient(ellipse 70% 70% at 30% 50%, rgba(5,9,20,.35), transparent 70%);
}

.er-hero-slide.align-center::after {
	background:
		linear-gradient(to bottom, rgba(5,9,20,.55), transparent 30%, transparent 65%, rgba(5,9,20,.75)),
		radial-gradient(ellipse 60% 65% at 50% 50%, rgba(5,9,20,.45), transparent 75%);
}

/* Background Layers & Textures */
.er-hero-bg-layer {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center;
	z-index: 0;
}

.er-hero-bg-layer.photo {
	filter: saturate(.85) contrast(1.05) brightness(.85);
	animation: er-kenburns 26s ease-in-out infinite alternate;
	will-change: transform;
}

@keyframes er-kenburns {
	from { transform: scale(1.03) translate(0, 0); }
	to { transform: scale(1.13) translate(-2.5%, -1.5%); }
}

.er-hero-overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
}

.er-hero-overlay.photo-grade {
	background: linear-gradient(90deg, rgba(5, 9, 20, .96) 0%, rgba(5, 9, 20, .82) 30%, rgba(5, 9, 20, .38) 58%, rgba(5, 9, 20, .10) 100%);
}

.er-hero-canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 2;
}

/* Slide Container & Alignments */
.er-hero-container {
	position: relative;
	z-index: 4;
	height: 100%;
	width: 100%;
	max-width: 1280px;
	margin: 0 auto;
	padding: clamp(60px, 8vh, 100px) clamp(24px, 6vw, 80px) clamp(110px, 13vh, 150px);
	display: flex;
	flex-direction: column;
	justify-content: center;
	box-sizing: border-box;
}

.er-hero-slide.align-left .er-hero-container { align-items: flex-start; text-align: left; }
.er-hero-slide.align-center .er-hero-container { align-items: center; text-align: center; }

.er-hero-slide .content { max-width: 760px; width: 100%; }
.er-hero-slide.align-center .content { max-width: 860px; margin: 0 auto; }

/* Split Layout (2 Column Duo Grid) */
.duo {
	display: grid;
	grid-template-columns: 1.05fr .95fr;
	gap: clamp(32px, 5vw, 72px);
	align-items: center;
	width: 100%;
}

.er-hero-slide.split .content { max-width: none; }
.er-hero-slide.flip .visual { order: -1; }

.visual {
	position: relative;
	margin: 0;
}

.visual::before {
	content: "";
	position: absolute;
	inset: -6%;
	background: radial-gradient(ellipse at 50% 55%, rgba(var(--acc), .22), transparent 70%);
	filter: blur(30px);
	z-index: 0;
}

.visual img, .visual video {
	position: relative;
	z-index: 1;
	width: 100%;
	height: auto;
	border-radius: 20px;
	border: 1px solid rgba(150, 170, 230, .25);
	box-shadow: 0 20px 40px -15px rgba(0, 0, 0, .6);
	object-fit: cover;
	display: block;
}

.logo-chip {
	position: absolute;
	left: 20px;
	bottom: 20px;
	z-index: 2;
	background: rgba(10, 18, 36, .75);
	backdrop-filter: blur(12px);
	border: 1px solid rgba(255, 255, 255, .15);
	padding: 10px 16px;
	border-radius: 12px;
	display: flex;
	align-items: center;
	box-shadow: 0 10px 25px rgba(0, 0, 0, .4);
}

.logo-chip img {
	height: 22px;
	width: auto;
	border: none;
	box-shadow: none;
	border-radius: 0;
}

/* Typography & Content Spacing */
.badge {
	display: inline-block;
	font-size: clamp(11px, 1.2vw, 13px);
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	margin-bottom: 16px;
}

.title {
	font-size: clamp(34px, 4.5vw, 56px);
	line-height: 1.12;
	font-weight: 500;
	letter-spacing: -0.02em;
	margin: 0 0 20px 0;
}

.er-hero-slide.split .title {
	font-size: clamp(30px, 3.8vw, 48px);
}

.title .highlight {
	color: var(--er-highlight-col, rgb(var(--acc)));
	background: linear-gradient(135deg, var(--er-highlight-col, rgb(var(--acc))), rgb(var(--acc-2)));
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.desc {
	font-size: clamp(15px, 1.6vw, 18px);
	line-height: 1.6;
	color: var(--ink-dim);
	margin: 0 0 28px 0;
	max-width: 650px;
}

.er-hero-slide.align-center .desc {
	margin-left: auto;
	margin-right: auto;
}

/* Action Buttons (Pill Buttons) */
.actions {
	display: flex;
	gap: 16px;
	align-items: center;
	flex-wrap: wrap;
}

.er-hero-slide.align-center .actions {
	justify-content: center;
}

.slot + .actions {
	margin-top: 20px;
	justify-content: center;
}

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 14px 32px;
	border-radius: var(--radius-pill);
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	transition: transform .3s var(--ease-out), box-shadow .3s, background .3s, border-color .3s;
	position: relative;
	overflow: hidden;
}

.btn-primary, .btn-style-orange_primary, .btn-style-cyan_glow, .btn-style-green_primary, .btn-style-blue_primary, .btn-style-purple_gradient {
	background: linear-gradient(135deg, rgb(var(--acc)), rgb(var(--acc-2)));
	color: #ffffff;
	box-shadow: 0 10px 25px -5px rgba(var(--acc), .4);
	border: 1px solid rgba(255, 255, 255, .2);
}

.btn-primary:hover, .btn-style-orange_primary:hover, .btn-style-cyan_glow:hover, .btn-style-green_primary:hover {
	transform: translateY(-2px);
	box-shadow: 0 14px 30px -4px rgba(var(--acc), .55);
}

.btn-ghost, .btn-style-translucent, .btn-style-outline {
	background: rgba(232, 238, 252, .04);
	border: 1px solid rgba(150, 170, 230, .28);
	backdrop-filter: blur(6px);
	color: #ffffff;
}

.btn-ghost:hover, .btn-style-translucent:hover, .btn-style-outline:hover {
	background: rgba(232, 238, 252, .09);
	border-color: rgba(var(--acc-2), .45);
	transform: translateY(-2px);
}

/* Component Slot (Plan-to-Pay Slide 7) */
.slot {
	width: 100%;
	max-width: 1040px;
	margin: 24px auto 0;
	padding: 0;
	background: transparent;
	border: none;
	box-shadow: none;
	backdrop-filter: none;
	box-sizing: border-box;
}

.p2p-steps {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px;
	position: relative;
}

.p2p-steps::before {
	content: "";
	position: absolute;
	top: 21px;
	left: 12%;
	right: 12%;
	height: 1px;
	background: linear-gradient(90deg, #3FD9E8, #fd4000, #d8c94e, #c9a03f);
	opacity: .55;
}

.p2p-step { text-align: center; position: relative; }

.p2p-step .num {
	width: 42px;
	height: 42px;
	margin: 0 auto 14px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	font-size: 12px;
	font-weight: 600;
	background: var(--bg-deep);
	border: 1.5px solid var(--c);
	color: var(--c);
}

.p2p-step h3 { font-size: 16px; font-weight: 600; margin-bottom: 6px; color: #fff; }
.p2p-step p { font-size: 13.5px; line-height: 1.5; color: var(--ink-dim); max-width: 22ch; margin: 0 auto; }

.p2p-divider {
	height: 1px;
	background: rgba(150, 170, 230, .18);
	margin: 20px 0 18px;
}

.p2p-toggle {
	display: flex;
	width: max-content;
	margin: 0 auto 18px;
	padding: 4px;
	border-radius: var(--radius-pill);
	background: rgba(10, 18, 36, .6);
	border: 1px solid rgba(150, 170, 230, .2);
	backdrop-filter: blur(8px);
}

.p2p-toggle .tg {
	border: none;
	cursor: pointer;
	padding: 9px 18px;
	border-radius: var(--radius-pill);
	background: transparent;
	color: var(--ink-dim);
	font-family: 'Inter', sans-serif;
	font-size: 13px;
	font-weight: 600;
	transition: background .3s, color .3s;
}

.p2p-toggle .tg.active { background: #ffffff; color: #0A1224; }

.p2p-stats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
	margin-bottom: 0;
}

.p2p-stats .stat { display: none; text-align: center; }

.p2p-stats[data-view="cost"] .stat[data-for="cost"],
.p2p-stats[data-view="upside"] .stat[data-for="upside"] {
	display: block;
	animation: er-statIn .45s var(--ease-out);
}

@keyframes er-statIn {
	from { opacity: 0; transform: translateY(10px); }
	to { opacity: 1; transform: none; }
}

.p2p-stats .stat b {
	display: block;
	font-size: clamp(16px, 1.6vw, 20px);
	font-weight: 600;
	margin-bottom: 5px;
}

.p2p-stats .stat[data-for="cost"] b { color: #ff6a3c; }
.p2p-stats .stat[data-for="upside"] b { color: #d8c94e; }
.p2p-stats .stat span { font-size: 13.5px; color: var(--ink-dim); }

/* Animation Choreography */
.badge, .title, .desc, .actions, .visual, .slot {
	opacity: 0;
	transform: translateY(26px);
}

.visual { transform: translateY(30px) scale(.97); }

.er-hero-slide.is-active .slot { transition: opacity .9s var(--ease-out) .6s, transform .9s var(--ease-out) .6s; opacity: 1; transform: none; }
.er-hero-slide.is-active .visual { transition: opacity 1s var(--ease-out) .45s, transform 1s var(--ease-out) .45s; opacity: 1; transform: none; }
.er-hero-slide.is-active .badge { transition: opacity .8s var(--ease-out) .15s, transform .8s var(--ease-out) .15s; opacity: 1; transform: none; }
.er-hero-slide.is-active .title { transition: opacity .9s var(--ease-out) .28s, transform .9s var(--ease-out) .28s; opacity: 1; transform: none; }
.er-hero-slide.is-active .desc { transition: opacity .9s var(--ease-out) .42s, transform .9s var(--ease-out) .42s; opacity: 1; transform: none; }
.er-hero-slide.is-active .actions { transition: opacity .9s var(--ease-out) .56s, transform .9s var(--ease-out) .56s; opacity: 1; transform: none; }

/* Flat Line SVG Controls (Navigation & Pagination) */
.controls {
	position: absolute;
	z-index: 5;
	left: 50%;
	bottom: 36px;
	transform: translateX(-50%);
	display: flex;
	align-items: center;
}

.arrow {
	position: absolute;
	z-index: 5;
	top: 50%;
	transform: translateY(-50%);
	width: 52px;
	height: 52px;
	border-radius: 50%;
	border: 1px solid rgba(150, 170, 230, .26);
	background: rgba(10, 18, 36, .5);
	backdrop-filter: blur(8px);
	color: var(--ink);
	cursor: pointer;
	display: grid;
	place-items: center;
	transition: background .3s, border-color .3s, transform .3s var(--ease-out);
}

#prev, .er-hero-prev { left: clamp(16px, 3vw, 44px); }
#next, .er-hero-next { right: clamp(16px, 3vw, 44px); }

.arrow:hover {
	background: rgba(var(--acc), .16);
	border-color: rgba(var(--acc-2), .5);
	transform: translateY(-50%) scale(1.08);
}

.arrow svg {
	width: 20px;
	height: 20px;
	stroke-width: 2px;
}

.dots { display: flex; gap: 14px; }

.dot {
	position: relative;
	width: 44px;
	height: 4px;
	border-radius: 4px;
	background: rgba(150, 170, 230, .22);
	border: none;
	cursor: pointer;
	overflow: hidden;
	transition: background .3s;
}

.dot .fill {
	position: absolute;
	inset: 0;
	transform-origin: left;
	transform: scaleX(0);
	background: linear-gradient(90deg, rgb(var(--acc)), rgb(var(--acc-2)));
	border-radius: 4px;
}

.dot.done .fill, .dot.is-active .fill { transform: scaleX(1); }

.dot.running .fill { animation: er-progress var(--dur, 6s) linear forwards; }

@keyframes er-progress {
	from { transform: scaleX(0); }
	to { transform: scaleX(1); }
}

/* Responsive Breakpoints */
@media (max-width: 900px) {
	.duo { grid-template-columns: 1fr; gap: 28px; }
	.visual, .flip .visual { max-width: 440px; order: 2; }
	.logo-chip { left: 12px; bottom: 12px; padding: 8px 12px; }
	.logo-chip img { height: 18px; }
	.er-hero-slide.split .title { font-size: clamp(26px, 6vw, 40px); }
}

@media (max-width: 640px) {
	.er-hero-slider-wrap { min-height: 580px; }
	.p2p-steps { grid-template-columns: repeat(2, 1fr); gap: 20px 12px; }
	.p2p-steps::before { display: none; }
	.p2p-stats { grid-template-columns: repeat(2, 1fr); gap: 18px 12px; }
	.p2p-divider { margin: 22px 0 18px; }
	.p2p-toggle { margin-bottom: 20px; }
	.p2p-toggle .tg { padding: 9px 14px; font-size: 12.5px; }
	.visual { max-width: 100%; }
	.visual img { border-radius: 14px; }
	.desc { margin-bottom: 32px; }
	.btn { padding: 13px 24px; font-size: 14px; width: 100%; text-align: center; }
	.actions { width: 100%; flex-direction: column; }
	.er-hero-slide.align-center .actions { align-items: center; }
	.controls { bottom: 24px; }
	.dot { width: 36px; }
	.arrow { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.er-hero-aurora::before, .er-hero-aurora::after { animation: none; }
	.er-hero-bg-layer.photo { animation: none; }
	.badge, .title, .desc, .actions, .visual, .slot { opacity: 1; transform: none; transition: none; }
	.er-hero-slide { transition: opacity .2s; }
	.dot.running .fill { animation: none; transform: scaleX(1); }
}