/* Nepras Modern Theme Extras — loaded site-wide after inline page styles.
   Electric Blue design system: rounded corners, glows, gradients, animations. */

:root {
	--nx-grad: linear-gradient(120deg, #2E6BFF 0%, #6494FF 50%, #2EC5FF 100%);
	--nx-radius: 16px;
	--nx-radius-sm: 10px;
}

::selection { background: rgba(46,107,255,0.35); color: #fff; }

/* ── Buttons: pill + gradient + glow ── */
.btn-primary, .btn-cta, .cta-submit, .btn-next, .sticky-consult {
	background: var(--nx-grad) !important;
	background-size: 200% 200% !important;
	color: #fff !important;
	border: none !important;
	border-radius: 999px !important;
	box-shadow: 0 8px 26px rgba(46,107,255,0.35);
	transition: box-shadow 0.25s, transform 0.25s !important;
	position: relative;
	overflow: hidden;
	animation: nxGradShift 6s ease infinite;
}
.btn-primary:hover, .btn-cta:hover, .cta-submit:hover, .btn-next:hover, .sticky-consult:hover {
	background: var(--nx-grad) !important;
	box-shadow: 0 14px 40px rgba(46,107,255,0.55);
	transform: translateY(-3px);
}
.btn-ghost, .btn-back {
	border-radius: 999px !important;
	transition: border-color 0.25s, background 0.25s, transform 0.25s !important;
}
.btn-ghost:hover, .btn-back:hover { transform: translateY(-2px); }

/* ── Rounded, glowing cards (cross-page components) ── */
.service-card, .project-card, .why-card, .form-card, .contact-form-wrap,
.cta-form-card, .sidebar-card, .promise-box, .service-option, .budget-option,
.timeline-option, .testimonial-card, .info-card, .price-card, .feature-card,
.related-mini-item, .quote-sidebar .sidebar-card, .founder-photo, .step-panel .form-group input,
.process-card, .value-card, .team-card, .industry-card, .benefit-card {
	border-radius: var(--nx-radius) !important;
}
.stack-item, .industry-pill, .tech-chip, .skill-chip, .project-tag,
.form-group input, .form-group select, .form-group textarea,
.cta-input, .cta-select, .dropdown-menu, .submenu, .info-icon {
	border-radius: var(--nx-radius-sm) !important;
}
.tech-chip, .skill-chip, .project-tag { border-radius: 999px !important; }

.service-card, .project-card, .why-card, .stack-item, .cta-form-card, .sidebar-card {
	transition: transform 0.3s, box-shadow 0.35s, border-color 0.3s, background 0.3s;
	will-change: transform;
}
.service-card:hover, .project-card:hover, .why-card:hover {
	box-shadow: 0 30px 60px rgba(4,10,26,0.4), 0 0 30px rgba(46,107,255,0.1);
	border-color: rgba(46,107,255,0.5) !important;
}
.stack-item:hover { transform: translateY(-5px) scale(1.03); box-shadow: 0 16px 34px rgba(11,20,40,0.3); }

/* ── Form focus glow ── */
.form-group input:focus, .form-group select:focus, .form-group textarea:focus,
.cta-input:focus, .cta-select:focus {
	border-color: #2E6BFF !important;
	box-shadow: 0 0 0 4px rgba(46,107,255,0.16);
}

/* ── Gradient text for emphasised words in big headings ── */
/* Base fallback: always readable even without background-clip support */
.page-hero h1 em, .section-heading em, .hero h1 em,
.article-hero h1 em {
	font-style: normal !important;
	color: #6494FF !important;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
	.page-hero h1 em, .section-heading em, .hero h1 em,
	.article-hero h1 em {
		background: var(--nx-grad);
		background-size: 200% auto;
		-webkit-background-clip: text;
		background-clip: text;
		color: transparent !important;
		animation: nxGradShift 6s ease infinite;
	}
	/* If word-stagger splits em into spans, clip per-span so gradient stays visible */
	.page-hero h1 em .nx-w, .section-heading em .nx-w, .hero h1 em .nx-w,
	.article-hero h1 em .nx-w, .hero h1 em .w {
		background: var(--nx-grad);
		background-size: 200% auto;
		-webkit-background-clip: text;
		background-clip: text;
		color: transparent;
		animation-name: nxWordIn, nxGradShift;
		animation-duration: 0.55s, 6s;
		animation-timing-function: cubic-bezier(0.2,0.7,0.3,1.1), ease;
		animation-iteration-count: 1, infinite;
		animation-fill-mode: both, none;
	}
}

/* ── Header polish ── */
header { backdrop-filter: blur(18px) saturate(1.4) !important; }
.logo-wrap img { transition: transform 0.3s; }
.logo-wrap:hover img { transform: scale(1.04); }

/* ── Scroll reveal ── */
.nx-reveal { opacity: 0; transform: translateY(34px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2,0.7,0.3,1); }
.nx-reveal.nx-in { opacity: 1; transform: translateY(0); }

/* ── Hero word-stagger ── */
.nx-w { display: inline-block; opacity: 0; transform: translateY(0.5em) rotate(2deg); animation: nxWordIn 0.55s cubic-bezier(0.2,0.7,0.3,1.1) both; }

/* ── Keyframes ── */
@keyframes nxGradShift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
@keyframes nxWordIn { to { opacity: 1; transform: translateY(0) rotate(0); } }

@media (prefers-reduced-motion: reduce) {
	.nx-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
	.nx-w { opacity: 1 !important; transform: none !important; animation: none !important; }
	.btn-primary, .btn-cta, .cta-submit, .btn-next, .sticky-consult { animation: none !important; }
}

/* ══ ALTERNATING LIGHT SECTIONS (index-test style rhythm) ══ */
section.nx-alt {
	background: linear-gradient(180deg, #FFFFFF 0%, #F4F7FE 100%) !important;
	color: #0B1428;
	border-top: 1px solid rgba(22,35,63,0.08);
	border-bottom: 1px solid rgba(22,35,63,0.08);
	/* re-scope palette variables so dark components flip to light automatically */
	--white: #0B1428;
	--muted: #51607F;
	--navy: #EAF1FF;
	--navy-mid: #FFFFFF;
	--navy-deep: #F4F7FE;
	--gold-light: #1E56E0;
	--border: rgba(22,35,63,0.14);
	--border-subtle: rgba(22,35,63,0.12);
}
section.nx-alt input, section.nx-alt select, section.nx-alt textarea {
	background: #FFFFFF !important;
	color: #0B1428 !important;
	border-color: rgba(22,35,63,0.18) !important;
}
section.nx-alt .service-card, section.nx-alt .why-card, section.nx-alt .project-card,
section.nx-alt .stack-item, section.nx-alt .price-card, section.nx-alt .feature-card,
section.nx-alt .value-card, section.nx-alt .team-card, section.nx-alt .benefit-card,
section.nx-alt .info-card, section.nx-alt .testimonial-card {
	box-shadow: 0 10px 30px rgba(22,35,63,0.07);
}
section.nx-alt .service-card:hover, section.nx-alt .why-card:hover, section.nx-alt .project-card:hover {
	box-shadow: 0 34px 70px rgba(22,35,63,0.14), 0 0 0 4px rgba(46,107,255,0.07);
}

/* ══ INNER-PAGE HERO POLISH (orbs + grid like index-test) ══ */
.page-hero, .article-hero, section.hero {
	background-image:
		radial-gradient(ellipse 60% 50% at 85% 10%, rgba(46,107,255,0.16) 0%, transparent 60%),
		radial-gradient(ellipse 50% 40% at 10% 90%, rgba(46,197,255,0.10) 0%, transparent 60%) !important;
}

/* ══ REAL IMAGE COMPONENTS ══ */
.nx-hero-img {
	width: 100%;
	aspect-ratio: 4/3;
	object-fit: cover;
	display: block;
	border-radius: 16px;
	border: 1px solid rgba(46,107,255,0.3);
	box-shadow: 0 40px 90px rgba(4,10,26,0.55), 0 0 60px rgba(46,107,255,0.12);
}
.nx-hero-img + .dash-mockup, .nx-hero-img ~ .dash-mockup { display: none !important; }
.featured-image { border-radius: 16px !important; border: 1px solid rgba(46,107,255,0.3) !important; margin-top: 2rem; }
.featured-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nx-cover-wrap { padding: 2.5rem 5% 0; }
.nx-cover-img {
	width: 100%;
	max-height: 460px;
	object-fit: cover;
	display: block;
	border-radius: 16px;
	border: 1px solid rgba(46,107,255,0.3);
	box-shadow: 0 30px 70px rgba(4,10,26,0.45);
}

/* ══ SERVICE PAGE IMAGE BAND ══ */
.nx-band { padding: 3rem 5% 0; }
.nx-band .nx-cover-img { max-height: 420px; }

/* ══ CONTRAST SAFETY: hardcoded white inline styles inside light sections ══ */
section.nx-alt [style*="250,251,254"],
section.nx-alt [style*="color:#fff"],
section.nx-alt [style*="color: #fff"],
section.nx-alt [style*="color:#FFF"],
section.nx-alt [style*="color:#FAFBFE"],
section.nx-alt [style*="color: #FAFBFE"],
section.section-light [style*="250,251,254"],
section.section-light [style*="color:#fff"],
section.section-light [style*="color: #fff"] {
	color: #16233F !important;
}
/* keep white text inside buttons/gradient chips even in light sections */
section.nx-alt .btn-primary, section.nx-alt .btn-primary *,
section.nx-alt .btn-cta, section.nx-alt .btn-next, section.nx-alt .cta-submit,
section.section-light .btn-primary, section.section-light .btn-primary * {
	color: #fff !important;
}