@font-face {
	font-family: 'Manrope-Re';
	src: url("../fonts/Manrope-Regular.ttf") format("truetype");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Manrope-SemiBold';
	src: url("../fonts/Manrope-SemiBold.ttf") format("truetype");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Manrope-Bold';
	src: url("../fonts/Manrope-Bold.ttf") format("truetype");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Manrope-Extra';
	src: url("../fonts/Manrope-ExtraBold.ttf") format("truetype");
	font-weight: 800 900;
	font-style: normal;
	font-display: swap;
}
* {
	box-sizing: border-box;
}
html {
	scroll-behavior: smooth;
	scroll-snap-type: none !important;
	background: var(--npn-bg, #020817);
}
body {
	font-family: 'Manrope-Re';
}
body.npn-site-body {
	margin: 0;
	background: var(--npn-bg, #020817);
	color: #eef6ff;
	font-family: 'Manrope-Re';
	overflow-x: hidden;
}
body.npn-site-body a,
body a{
	color: inherit;
	text-decoration: none;
}
.npn-home-shell {
	min-height: 100vh;
	background:
		radial-gradient(
			circle at 18% 5%,
			rgba(59, 130, 246, 0.18),
			transparent 26%
		),
		radial-gradient(
			circle at 90% 18%,
			rgba(8, 213, 255, 0.12),
			transparent 24%
		),
		linear-gradient(180deg, #08101f 0%, #060b18 100%);
}
.npn-home-block {
	min-height: 100vh;
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	position: relative;
	overflow: hidden;
}
/* .npn-home-block:before {
	content: "";
	position: absolute;
	inset: auto -18% -35% -18%;
	height: 50%;
	background: radial-gradient(circle, rgba(8, 213, 255, 0.13), transparent 55%);
	pointer-events: none;
	filter: blur(10px);
} */
.npn-home-inner {
	margin: 0 auto;
	position: relative;
	z-index: 2;
}
#home .npn-home-inner {
	width: 100%;
}
.npn-featured-block .npn-home-inner,
.npn-footer-block .npn-home-inner{
	width: 1180px;
}
.row-box {
	border-bottom: 1px solid #26325f;
	width: 100%;
}
.npn-box-ft {
	width: 1180px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
}
/* =========================================================
   HEADER NAV - SVG ARROW / GLOW HOVER / ACTIVE
   Dùng đúng HTML hiện tại:
   .npn-nav > a
   .npn-nav-parent > button
   .npn-submenu
========================================================= */

.npn-header {
	position: sticky;
	top: 0;
	z-index: 100;
    max-width: 1180px;
	min-height: 73px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 26px;
	margin: 0 auto;
}

.npn-logo-mark {
	width: 14px;
	height: 14px;
	border-radius: 999px;
	display: inline-block;
	background: linear-gradient(135deg, #6ee7ff, #7c72ff);
	box-shadow: 0 0 18px rgba(103, 232, 255, 0.82);
}

.npn-nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	flex: 1 1 auto;
	min-width: 0;
}

.npn-nav > a,
.npn-nav-parent{
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 16px;
	border-radius: 999px;
	border: 1px solid transparent;
	background: transparent;
	color: #ffffff;
	text-decoration: none;
	font-family: inherit;
	font-size: 15px;
	font-weight: 800;
	line-height: 1;
	white-space: nowrap;
	cursor: pointer;
	transition:
		color 0.24s ease,
		background 0.24s ease,
		border-color 0.24s ease,
		box-shadow 0.24s ease,
		text-shadow 0.24s ease,
		transform 0.24s ease;
}
.npn-nav-parent-toggle {
	background: unset;
    border: unset;
    color: #fff;
    margin: 0;
    padding: 0;
}
.npn-nav > a:hover,
.npn-nav-parent:hover{
	background:
		radial-gradient(circle at 50% 0%, rgba(108, 239, 255, 0.22), transparent 62%),
		linear-gradient(180deg, rgba(30, 132, 255, 0.22), rgba(2, 18, 54, 0.38));
	border-color: rgba(112, 232, 255, 0.42);
	box-shadow:
		inset 0 0 0 1px rgba(124, 232, 255, 0.12),
		0 0 16px rgba(0, 226, 255, 0.28),
		0 0 36px rgba(0, 133, 255, 0.22);
	text-shadow: 0 0 12px rgba(112, 239, 255, 0.58);
	transform: translateY(-1px);
}
.npn-nav > a:hover,
.npn-nav-parent:hover > a{
	color: #76f0ff;
}
/* =========================================================
   HEADER ACTIVE FIX
   Active trang hiện tại khác với menu cha có submenu
========================================================= */


/* Active thật: chỉ áp dụng cho link trực tiếp đang là trang hiện tại */
.npn-nav > a.is-active {
	color: #76f0ff;
	background:
		radial-gradient(circle at 50% 0%, rgba(108, 239, 255, 0.25), transparent 62%),
		linear-gradient(180deg, rgba(30, 132, 255, 0.27), rgba(2, 18, 54, 0.42));
	border-color: rgba(112, 232, 255, 0.48);
	box-shadow:
		inset 0 0 0 1px rgba(124, 232, 255, 0.14),
		0 0 18px rgba(0, 226, 255, 0.32),
		0 0 42px rgba(0, 133, 255, 0.25);
	text-shadow: 0 0 14px rgba(112, 239, 255, 0.62);
}

/* Hover/open thì menu cha mới sáng */
.npn-nav-parent.is-open > button {
	color: #76f0ff;
	background:
		radial-gradient(circle at 50% 0%, rgba(108, 239, 255, 0.22), transparent 62%),
		linear-gradient(180deg, rgba(30, 132, 255, 0.22), rgba(2, 18, 54, 0.38));
	border-color: rgba(112, 232, 255, 0.42);
	box-shadow:
		inset 0 0 0 1px rgba(124, 232, 255, 0.12),
		0 0 16px rgba(0, 226, 255, 0.28),
		0 0 36px rgba(0, 133, 255, 0.22);
	text-shadow: 0 0 12px rgba(112, 239, 255, 0.58);
	transform: translateY(-1px);
}

/* Arrow chỉ xoay khi hover/open/child-active, không xoay chỉ vì parent có submenu */
.npn-nav-parent:hover .npn-menu-arrow svg,
.npn-nav-parent.is-open .npn-menu-arrow svg,
.npn-nav-parent.is-child-active .npn-menu-arrow svg {
	transform: rotate(180deg);
	filter: drop-shadow(0 0 8px rgba(112, 239, 255, 0.9));
}

/* Nếu CSS cũ còn .npn-nav-parent.is-active thì ép nó về bình thường */
.npn-nav-parent.is-active:not(.is-child-active) > button {
	background: transparent !important;
	border-color: transparent !important;
	box-shadow: none !important;
	text-shadow: none !important;
	color: #ffffff !important;
}

/* SVG arrow */
.npn-menu-arrow {
	width: 15px;
	height: 15px;
	flex: 0 0 15px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-left: 1px;
	color: currentColor;
}

.npn-menu-arrow svg {
	width: 100%;
	height: 100%;
	display: block;
	transition:
		transform 0.24s ease,
		filter 0.24s ease,
		opacity 0.24s ease;
}

.npn-nav-parent:hover .npn-menu-arrow svg,
.npn-nav-parent.is-active .npn-menu-arrow svg,
.npn-nav-parent.is-open .npn-menu-arrow svg {
	transform: rotate(180deg);
	filter: drop-shadow(0 0 8px rgba(112, 239, 255, 0.9));
}

/* Parent dropdown */
.npn-nav-parent {
	position: relative;
	display: inline-flex;
	align-items: center;
}

.npn-submenu {
	position: absolute;
	top: calc(100% + 12px);
	left: 50%;
	min-width: 230px;
	padding: 10px;
	border-radius: 18px;
	background: rgba(5, 16, 45, 0.97);
	border: 1px solid rgba(99, 214, 255, 0.22);
	box-shadow:
		0 20px 50px rgba(0, 0, 0, 0.38),
		0 0 24px rgba(0, 178, 255, 0.16);
	backdrop-filter: blur(16px);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translate(-50%, 10px);
	transition:
		opacity 0.24s ease,
		visibility 0.24s ease,
		transform 0.24s ease;
	z-index: 120;
}

.npn-nav-parent:hover .npn-submenu,
.npn-nav-parent.is-open .npn-submenu {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translate(-50%, 0);
}

.npn-submenu::before {
	content: "";
	position: absolute;
	left: 50%;
    top: -8px;
	width: 14px;
	height: 14px;
	background: rgba(5, 16, 45, 0.97);
	border-left: 1px solid rgba(99, 214, 255, 0.22);
	border-top: 1px solid rgba(99, 214, 255, 0.22);
	transform: translateX(-50%) rotate(45deg);
}

.npn-submenu a {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	min-height: 42px;
	padding: 0 14px;
	border-radius: 12px;
	color: #ffffff;
	text-decoration: none;
	font-size: 14px;
	font-weight: 750;
	white-space: nowrap;
	transition:
		color 0.22s ease,
		background 0.22s ease,
		box-shadow 0.22s ease,
		text-shadow 0.22s ease;
}

.npn-submenu a:hover,
.npn-submenu a.is-active {
	color: #7defff;
	background: rgba(0, 148, 255, 0.15);
	box-shadow:
		inset 0 0 0 1px rgba(112, 231, 255, 0.14),
		0 0 18px rgba(0, 226, 255, 0.12);
	text-shadow: 0 0 10px rgba(112, 239, 255, 0.46);
}

/* Login / Register */
.npn-head-actions {
	display: inline-flex;
	align-items: center;
	justify-content: flex-end;
	flex: 0 0 auto;
}

.npn-login {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0 18px;
	border-radius: 12px;
	border: 1px solid rgba(112, 232, 255, 0.52);
	background:
		linear-gradient(180deg, rgba(55, 151, 255, 0.95), rgba(18, 91, 210, 0.92));
	color: #ffffff;
	text-decoration: none;
	font-weight: 900;
	box-shadow:
		0 0 18px rgba(0, 226, 255, 0.22),
		inset 0 0 0 1px rgba(255, 255, 255, 0.08);
	transition:
		transform 0.22s ease,
		box-shadow 0.22s ease,
		background 0.22s ease;
}

.npn-login:hover {
	transform: translateY(-1px);
	box-shadow:
		0 0 26px rgba(0, 226, 255, 0.38),
		0 12px 26px rgba(0, 0, 0, 0.22),
		inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}
.npn-nav-parent::after {
	content: "";
	position: absolute;
	left: -8px;
	right: -8px;
	top: 100%;
	height: 16px;
	z-index: 119;
}
/* Profile dot */
.npn-profile-dot {
	width: 44px;
	height: 44px;
	border-radius: 999px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, #6ee7ff, #7c72ff);
	color: #ffffff;
	text-decoration: none;
	font-weight: 900;
	box-shadow: 0 0 20px rgba(103, 232, 255, 0.42);
}

/* Mobile button */
.npn-mobile-menu-toggle {
	display: none;
	width: 44px;
	height: 44px;
	border: 1px solid rgba(112, 232, 255, 0.28);
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.04);
	padding: 0;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: 5px;
	cursor: pointer;
}

.npn-mobile-menu-toggle span {
	width: 20px;
	height: 2px;
	border-radius: 999px;
	background: #ffffff;
	box-shadow: 0 0 8px rgba(112, 239, 255, 0.55);
}

/* Responsive */
@media (max-width: 1100px) {
	.npn-header {
		gap: 14px;
	}

	.npn-mobile-menu-toggle {
		display: inline-flex;
		order: 3;
	}

	.npn-head-actions {
		order: 2;
		margin-left: auto;
	}

	.npn-nav {
		position: absolute;
		left: 18px;
		right: 18px;
		top: calc(100% + 10px);
		display: none;
		flex-direction: column;
		align-items: stretch;
		gap: 8px;
		padding: 14px;
		border-radius: 20px;
		background: rgba(5, 16, 45, 0.98);
		border: 1px solid rgba(99, 214, 255, 0.22);
		box-shadow: 0 22px 60px rgba(0, 0, 0, 0.38);
		backdrop-filter: blur(16px);
	}

	.npn-header.is-menu-open .npn-nav,
	.npn-nav.is-open {
		display: flex;
	}

	.npn-nav > a,
	.npn-nav-parent > button {
		width: 100%;
		justify-content: space-between;
		border-radius: 14px;
		min-height: 48px;
	}

	.npn-nav-parent {
		display: block;
		width: 100%;
	}

	.npn-submenu {
		position: static;
		display: none;
		min-width: 0;
		margin-top: 8px;
		padding: 8px;
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transform: none;
		box-shadow: none;
		background: rgba(255, 255, 255, 0.04);
	}

	.npn-submenu::before {
		display: none;
	}

	.npn-nav-parent.is-open .npn-submenu {
		display: block;
		transform: none;
	}
}

@media (max-width: 560px) {
	.npn-header {
		min-height: 68px;
	}

	.npn-logo strong {
		max-width: 150px;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.npn-login {
		min-height: 40px;
		padding: 0 12px;
		font-size: 13px;
	}
}
.npn-logo {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 15px;
	font-weight: 900;
	color: #fff;
	white-space: nowrap;
}
.npn-logo img {
    height: 75px;
    width: 190px;
	object-fit: contain;
	display: block;
}
.npn-logo-mark {
	width: 14px;
	height: 14px;
	border-radius: 50%;
	display: inline-block;
	background: linear-gradient(135deg, #73e5ff, #6d7cff);
	box-shadow: 0 0 22px var(--npn-glow, #08d5ff);
}
.npn-head-actions {
	display: flex;
	align-items: center;
	gap: 12px;
}
.npn-login,
.npn-profile-dot {
	height: 38px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 10px;
	border: 1px solid rgba(103, 232, 249, 0.6);
	background: linear-gradient(135deg, #0ea5e9, #2f5edb);
	padding: 0 16px;
    font-weight: 600;
	color: #fff;
	box-shadow: 0 0 24px rgba(14, 165, 233, 0.22);
}
.npn-profile-dot {
	width: 38px;
	padding: 0;
	border-radius: 50%;
}
.npn-mobile-menu-toggle {
	display: none;
	width: 42px;
	height: 38px;
	border: 1px solid rgba(103, 232, 249, 0.36);
	border-radius: 10px;
	background: transparent;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: 5px;
}
.npn-mobile-menu-toggle span {
	width: 20px;
	height: 2px;
	background: #fff;
	border-radius: 4px;
}
.npn-hero-grid {
	display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(420px, 62%);
	gap: 20px;
	max-width: 1180px;
    padding: 52px 0;
	margin: 0 auto;
}
.npn-hero-copy h1 {
	margin-top: 0;
	margin-bottom: 14px;
}
.npn-hero-copy h1 p {
	margin: 0;
	color: #f5f9ff;
	font-size: clamp(30px, 5vw, 54px);
	line-height: 1.1;
	font-weight: 900;
	font-family: 'Manrope-Extra';
}

.npn-hero-benefits {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	margin-top: 20px;
	max-width: 650px;
}

.npn-hero-benefits span {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	min-height: 46px;
	padding: 13px 16px;
	border-radius: 12px;
	border: 1px solid rgba(103, 232, 249, 0.22);
	background:
		linear-gradient(135deg, rgba(22, 35, 69, 0.82), rgba(11, 26, 58, 0.72));
	font-weight: 600;
	color: #fff;
	box-shadow:
		inset 0 0 0 1px rgba(255, 255, 255, 0.025),
		0 10px 24px rgba(0, 0, 0, 0.14);
	transition:
		transform 0.24s cubic-bezier(0.2, 0.8, 0.2, 1),
		border-color 0.24s ease,
		background 0.24s ease,
		box-shadow 0.24s ease,
		color 0.24s ease;
}

.npn-hero-benefits span::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	background:
		radial-gradient(circle at 20% 0%, rgba(8, 213, 255, 0.42), transparent 38%),
		linear-gradient(135deg, rgba(14, 165, 233, 0.24), transparent 52%, rgba(47, 94, 219, 0.28));
	opacity: 0;
	transition: opacity 0.24s ease;
}

.npn-hero-benefits span::after {
	content: "";
	position: absolute;
	top: -40%;
	left: -55%;
	width: 42%;
	height: 180%;
	z-index: 1;
	background: linear-gradient(
		90deg,
		transparent,
		rgba(255, 255, 255, 0.34),
		rgba(126, 231, 255, 0.22),
		transparent
	);
	transform: skewX(-18deg) translateX(0);
	opacity: 0;
	pointer-events: none;
	transition:
		transform 0.52s cubic-bezier(0.2, 0.8, 0.2, 1),
		opacity 0.24s ease;
}

.npn-hero-benefits span:hover {
	transform: translateY(-4px) scale(1.018);
	color: #ffffff;
	border-color: rgba(126, 231, 255, 0.72);
	background:
		linear-gradient(135deg, rgba(6, 52, 84, 0.96), rgba(22, 67, 125, 0.88));
	box-shadow:
		0 0 34px rgba(8, 213, 255, 0.38),
		0 16px 34px rgba(0, 0, 0, 0.22),
		inset 0 0 0 1px rgba(255, 255, 255, 0.07);
}

.npn-hero-benefits span:hover::before {
	opacity: 1;
}

.npn-hero-benefits span:hover::after {
	opacity: 1;
	transform: skewX(-18deg) translateX(430%);
}

.npn-hero-benefits span:active {
	transform: translateY(-2px) scale(1.006);
}

.npn-hero-media {
	border: 1px solid rgba(78, 119, 213, 0.62);
    border-radius: 18px;
	background: rgba(24, 44, 94, 0.72);
	box-shadow: 0 0 0 1px rgba(126, 243, 255, 0.22), 0 0 34px rgba(82, 216, 255, 0.58), 0 0 68px rgba(8, 213, 255, 0.32), 0 22px 46px rgba(0, 0, 0, 0.34);
	min-height: 318px;
	height: 370px;
	position: relative;
}
.npn-video-frame {
	height: 370px;
}
.npn-video-placeholder {
	position: relative;
	min-height: 286px;
	border: 1px dashed rgba(117, 176, 255, 0.8);
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	background: rgba(28, 50, 109, 0.7);
}
.npn-video-placeholder img,
.npn-video-placeholder video,
.npn-hero-iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border: 0;
}
.npn-video-placeholder-text {
	position: relative;
	z-index: 2;
	text-align: center;
	padding: 20px;
	color: #eaf3ff;
	display: grid;
	gap: 13px;
	max-width: 520px;
	text-shadow: 0 2px 14px rgba(0, 0, 0, 0.35);
}
.npn-video-placeholder-text strong {
	font-size: 20px;
}
.npn-video-placeholder-text span {
	line-height: 1.55;
}
.npn-video-placeholder-text small {
	color: #bdd6ff;
}
/* Hero play button - center SVG */
.npn-hero-play {
	position: absolute;
	left: 50%;
	top: 50%;
	z-index: 8;
	width: 78px;
	height: 78px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transform: translate(-50%, -50%);
	cursor: pointer;
	transition: transform 0.22s ease, filter 0.22s ease;
}

.npn-hero-play svg {
	width: 78px;
	height: 78px;
	display: block;
	overflow: visible;
	filter:
		drop-shadow(0 0 18px rgba(8, 213, 255, 0.75))
		drop-shadow(0 12px 24px rgba(0, 0, 0, 0.32));
}

.npn-hero-play svg circle {
	fill: rgba(2, 20, 48, 0.82);
	stroke: rgba(84, 222, 255, 0.95);
	stroke-width: 2;
}

.npn-hero-play svg path {
	fill: #ffffff;
	transform-origin: center;
}

.npn-hero-play:hover {
	transform: translate(-50%, -50%) scale(1.06);
	filter: brightness(1.08);
}

.npn-hero-play:active {
	transform: translate(-50%, -50%) scale(0.98);
}
.npn-try-upload {
	padding-bottom: 48px;
	position: relative;
	z-index: 4;
	margin: 0 auto;
	max-width: 1180px;
}


.npn-upload-redirect {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	min-height: 150px;
	border-radius: 16px;
	background: rgba(6, 31, 52, 0.82);
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	color: #fff;
	box-shadow:
		0 0 28px rgba(8, 213, 255, 0.12),
		0 14px 34px rgba(0, 0, 0, 0.18);
	transition:
		transform 0.24s ease,
		box-shadow 0.24s ease,
		background 0.24s ease;
}

/* Đường viền chạy quanh box */
.npn-upload-redirect::before {
	content: "";
	position: absolute;
	width: 155%;
	height: 260%;
	left: 50%;
	top: 50%;
	z-index: 0;
	background: conic-gradient(
		from 0deg,
		transparent 0deg,
		transparent 58deg,
		rgba(82, 216, 255, 0.95) 88deg,
		rgba(255, 255, 255, 1) 105deg,
		rgba(126, 243, 255, 0.98) 124deg,
		rgba(47, 94, 219, 0.85) 158deg,
		transparent 210deg,
		transparent 360deg
	);
	transform: translate(-50%, -50%) rotate(0deg);
	animation: npnUploadBorderRotate 3.4s linear infinite;
}

/* Lớp che phần xoay ở giữa, chỉ chừa lại viền */
.npn-upload-redirect::after {
	content: "";
	position: absolute;
	inset: 3px;
	z-index: 1;
	border-radius: 13px;
	background:
		radial-gradient(circle at 22% 0%, rgba(8, 213, 255, 0.12), transparent 38%),
		linear-gradient(135deg, rgba(6, 31, 52, 0.98), rgba(8, 44, 72, 0.94));
	box-shadow:
		inset 0 0 0 1px rgba(255, 255, 255, 0.035),
		inset 0 0 24px rgba(8, 213, 255, 0.06);
}

/* Nội dung nằm trên lớp che */
.npn-upload-content,
.npn-upload-redirect strong,
.npn-upload-redirect em,
.npn-upload-redirect span {
	position: relative;
	z-index: 2;
}

.npn-upload-content {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 20px;
}

.npn-upload-redirect strong {
	font-size: 20px;
	font-weight: 900;
	color: #ffffff;
	text-shadow:
		0 0 14px rgba(82, 216, 255, 0.42),
		0 0 24px rgba(8, 213, 255, 0.18);
}

.npn-upload-redirect em,
.npn-upload-redirect span {
	font-style: normal;
	color: #d7eaff;
	font-size: 15px;
}

.npn-upload-redirect,
.npn-upload-redirect.is-dragover {
	background: rgba(8, 44, 72, 0.96);
	box-shadow:
		0 0 0 1px rgba(126, 243, 255, 0.22),
		0 0 34px rgba(82, 216, 255, 0.58),
		0 0 68px rgba(8, 213, 255, 0.32),
		0 22px 46px rgba(0, 0, 0, 0.34);
}

.npn-upload-redirect::before,
.npn-upload-redirect.is-dragover::before {
	animation-duration: 1.8
	
}/* =========================================================
   Hero title typing gradient effect - fixed height + inline cursor
========================================================= */

.npn-hero-title {
	position: relative;
	display: block;
	margin: 0 0 14px;
	font-family: 'Manrope-Extra', Arial, sans-serif;
	font-weight: 900;
	line-height: 1.02;
	letter-spacing: -0.055em;

	/* Chừa sẵn khoảng trống cho 2 dòng tiêu đề */
	min-height: calc(clamp(40px, 5.2vw, 76px) * 2.08);
}

.npn-hero-title p {
	margin: 0;
	padding: 0;
	font-size: clamp(40px, 5.2vw, 76px);
	line-height: 1.02;
	font-weight: 900;

	background:
		linear-gradient(
			90deg,
			#52d8ff 0%,
			#7ef3ff 22%,
			#6aa7ff 52%,
			#9aa7ff 78%,
			#ffffff 100%
		);
	background-size: 220% 100%;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;

	text-shadow:
		0 0 22px rgba(82, 216, 255, 0.26),
		0 0 46px rgba(8, 213, 255, 0.13);

	animation: npnHeroTitleGradient 4.8s ease-in-out infinite;
}

.npn-hero-title .npn-typing-line {
	display: block;
	white-space: nowrap;
}

/* Dấu nháy nằm sát ngay sau chữ đang gõ */
.npn-hero-title .npn-typing-cursor {
	display: inline-block;
	width: 4px;
	height: 0.82em;
	margin-left: 8px;
	border-radius: 999px;
	background: #7ef3ff;
	box-shadow:
		0 0 10px rgba(126, 243, 255, 0.95),
		0 0 22px rgba(8, 213, 255, 0.55);
	vertical-align: -0.04em;
	animation: npnHeroTypingCursor 0.78s steps(2, start) infinite;
}

@keyframes npnHeroTitleGradient {
	0% {
		background-position: 0% 50%;
	}

	50% {
		background-position: 100% 50%;
	}

	100% {
		background-position: 0% 50%;
	}
}

@keyframes npnHeroTypingCursor {
	0%,
	45% {
		opacity: 1;
	}

	46%,
	100% {
		opacity: 0;
	}
}

@media (max-width: 640px) {
	.npn-hero-title {
		min-height: calc(clamp(38px, 13vw, 58px) * 2.1);
		letter-spacing: -0.045em;
	}

	.npn-hero-title p {
		font-size: clamp(38px, 13vw, 58px);
	}

	.npn-hero-title .npn-typing-cursor {
		width: 3px;
		margin-left: 6px;
	}
}
.npn-upload-redirect:hover::after,
.npn-upload-redirect.is-dragover::after {
	background:
		radial-gradient(circle at 22% 0%, rgba(126, 243, 255, 0.22), transparent 42%),
		linear-gradient(135deg, rgba(7, 50, 82, 0.98), rgba(12, 73, 112, 0.96));
	box-shadow:
		inset 0 0 0 1px rgba(126, 243, 255, 0.14),
		inset 0 0 34px rgba(8, 213, 255, 0.16);
}

.npn-upload-redirect strong,
.npn-upload-redirect.is-dragover strong {
	color: #ffffff;
	text-shadow:
		0 0 10px rgba(255, 255, 255, 0.65),
		0 0 22px rgba(82, 216, 255, 0.75),
		0 0 38px rgba(8, 213, 255, 0.42);
}

.npn-upload-redirect span,
.npn-upload-redirect em,
.npn-upload-redirect.is-dragover span,
.npn-upload-redirect.is-dragover em {
	color: #eaffff;
}

@keyframes npnUploadBorderRotate {
	to {
		transform: translate(-50%, -50%) rotate(360deg);
	}
}

.npn-upload-redirect strong {
	font-size: 20px;
}
.npn-upload-redirect span {
	color: #d7eaff;
}
.npn-featured-block {
	align-items: center;
}

.npn-section-head-left {
	margin-bottom: 18px;
}

.npn-section-head-left small {
	display: block;
	color: #8db3df;
	font-weight: 700;
	margin-top: 8px;
}

.npn-service-tabs {
	border: 1px solid rgba(80, 116, 202, 0.6);
	border-radius: 14px;
	background: rgba(22, 35, 69, 0.72);
	overflow: hidden;
	box-shadow: 0 0 30px rgba(25, 75, 180, 0.12);
}

.npn-tab-list {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	padding: 12px 14px 10px;
	background: #070c1b;
}

.npn-tab-list button {
	height: 32px;
	border-radius: 999px;
	border: 1px solid rgba(80, 128, 230, 0.75);
	background: #111c38;
	color: #e9f3ff;
	padding: 0 14px;
	font-family: 'Manrope-Re' !important;
	font-weight: 800;
	cursor: pointer;
	transition: all .22s ease;
}

.npn-tab-list button:hover,
.npn-tab-list button.is-active {
	background: linear-gradient(135deg, #0ea5e9, #1d4ed8);
	border-color: #67e8f9;
	color: #fff;
	box-shadow: 0 0 18px rgba(8, 213, 255, 0.28);
}

.npn-tab-stage {
	position: relative;
}

.npn-tab-panel {
	display: none;
	position: relative;
	background: linear-gradient(135deg, rgba(20, 34, 72, 0.9), rgba(29, 43, 86, 0.94));
}

.npn-tab-panel.is-active {
	display: block;
}

.npn-tab-panel-top {
	height: 56px;
	border-top: 1px solid rgba(80, 116, 202, 0.5);
	border-bottom: 1px solid rgba(80, 116, 202, 0.5);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 0 14px;
	color: #cde5ff;
}

.npn-tab-panel-top span {
	font-weight: 800;
}

.npn-tab-panel-top em {
	font-style: normal;
	color: rgba(203, 229, 255, .65);
	margin: 0 5px;
}

.npn-tab-panel-top b {
	color: #fff;
}

.npn-slide-pause {
	height: 36px;
	border: 1px solid rgba(124, 155, 240, 0.55);
	border-radius: 9px;
	background: #253d86;
	color: #fff;
	font-weight: 900;
	padding: 0 16px;
	display: none;
	font-family: 'Manrope-Re' !important;
	cursor: pointer;
	transition: all .22s ease;
}

.npn-slide-pause:hover {
	background: #3450a6;
	box-shadow: 0 0 20px rgba(8, 213, 255, 0.20);
}

.npn-slide-pause.is-paused {
	background: #ffd000;
	color: #07152b;
	border-color: #ffd000;
}

.npn-service-swiper-wrap {
	position: relative;
	width: 100%;
}

.npn-service-swiper {
	position: relative;
	width: 100%;
	height: auto !important;
	min-height: 0 !important;
	overflow: hidden;
	background: #132552;
}

.npn-service-swiper .swiper-wrapper,
.npn-service-swiper .swiper-slide {
	width: 100%;
	height: 100%;
}

.npn-service-slide-card {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background: #132552;
}

.npn-service-slide-card img {
	display: block;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover !important;
	object-position: center center;
	border: 0 !important;
	border-radius: 0 !important;
	margin: 0 !important;
	transition: all 0.3s ease-in;
}

.npn-service-slide-card img:hover {
	box-shadow: 0 0 0 1px rgba(126, 243, 255, 0.22), 0 0 34px rgba(82, 216, 255, 0.58), 0 0 68px rgba(8, 213, 255, 0.32), 0 22px 46px rgba(0, 0, 0, 0.34);
	transition: all 0.3s ease-in;
}

.npn-service-placeholder {
	width: 100%;
	height: 100%;
	min-height: 360px;
	text-align: center;
	color: #fff;
	display: grid;
	place-content: center;
	gap: 9px;
	padding: 30px;
}

.npn-service-placeholder strong {
	font-size: 22px;
}

.npn-service-placeholder span {
	color: #d4e5ff;
}

.npn-service-placeholder small {
	color: #b4cff5;
}

.npn-service-nav {
	position: absolute;
	top: 50%;
	z-index: 10;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	border: 1px solid rgba(103, 232, 249, 0.72);
	background: rgba(7, 23, 46, 0.9);
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 0 20px rgba(8, 213, 255, 0.22);
	transform: translateY(-50%);
	transition: all .22s ease;
}

.npn-service-nav svg {
	width: 24px;
	height: 24px;
	display: block;
}

.npn-service-nav:hover {
	transform: translateY(-50%) scale(1.06);
	background: rgba(7, 35, 70, 0.96);
	box-shadow: 0 0 30px rgba(8, 213, 255, 0.46);
}

.npn-service-prev {
	left: 18px;
}

.npn-service-next {
	right: 18px;
}

.npn-service-nav.swiper-button-disabled {
	opacity: .35;
	cursor: default;
	transform: translateY(-50%);
}

.npn-footer-block {
	padding: 58px 0 0;
	align-items: center;
}


.npn-about-cta-wrap {
	display: grid;
	gap: 30px;
	text-align: center;
	margin: 28px auto 38px;
	max-width: 820px;
}
.npn-about h2 {
	margin: 0 0 16px;
	font-size: 26px;
}
.npn-about-text,
.npn-cta-text {
	color: #cddcf5;
	line-height: 1.7;
}
.npn-cta {
	display: grid;
	justify-items: center;
	gap: 12px;
}
.npn-cta-icon {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: #08d5ff;
	color: #06162b;
	box-shadow: 0 0 26px rgba(8, 213, 255, 0.55);
}
.npn-cta h3 {
	margin: 0;
	font-size: 22px;
}
.npn-cta a {
	height: 44px;
	border-radius: 6px;
	background: #0d6efd;
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 22px;
	font-weight: 800;
}
.npn-footer {
	border-top: 1px solid rgba(80, 116, 202, 0.6);
    padding: 20px 0 30px 0;
	display: flex;
	width: 100%;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	color: #fff;
}
.npn-footer p {
	margin: 0 !important;
}
.npn-footer-links {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
}

.npn-footer-links a:not(:last-child):after {
	content: " · ";
	color: #fff;
	margin-left: 6px;
}

.npn-footer-links a:hover {
	text-shadow: 0 0 14px rgba(112, 239, 255, 0.62);
	color: #76f0ff;
}

/* =========================
Contact floating menu
========================= */
.npn-contact-float {
	position: fixed;
	right: 34px;
	bottom: 34px;
	z-index: 80;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 14px;
}

.npn-contact-toggle {
	width: 62px;
	height: 62px;
	border: 0;
	border-radius: 999px;
	background: radial-gradient(circle at 30% 25%, #89f5ff 0%, #67d9e9 42%, #2898bd 100%);
	color: #fff;
	display: grid;
	place-items: center;
	cursor: pointer;
	box-shadow: 0 0 18px rgba(107, 214, 230, 0.9), 0 0 38px rgba(107, 214, 230, 0.36);
	transition: transform .25s ease, box-shadow .25s ease;
}

.npn-contact-toggle:hover {
	transform: translateY(-2px) scale(1.04);
	box-shadow: 0 0 24px rgba(107, 214, 230, 0.95), 0 0 56px rgba(107, 214, 230, 0.48);
}

.npn-contact-toggle svg {
	display: block;
}

.npn-contact-icon-close,
.npn-contact-float.is-open .npn-contact-icon-open {
	display: none;
}

.npn-contact-float.is-open .npn-contact-icon-close {
	display: grid;
}

.npn-contact-menu {
	min-width: 260px;
	max-width: 320px;
	display: grid;
	gap: 10px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(18px) scale(.94);
	transform-origin: right bottom;
	pointer-events: none;
	transition: opacity .24s ease, visibility .24s ease, transform .24s ease;
}

.npn-contact-float.is-open .npn-contact-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0) scale(1);
	pointer-events: auto;
}

.npn-contact-menu a {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 12px 14px;
	border-radius: 16px;
	background: rgba(2, 14, 32, 0.92);
	border: 1px solid rgba(130, 230, 255, 0.34);
	color: #fff;
	text-decoration: none;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.26), 0 0 22px rgba(0, 208, 255, 0.12);
	backdrop-filter: blur(12px);
	transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease, color .22s ease;
}

.npn-contact-menu a:hover {
	transform: translateX(-4px);
	border-color: rgba(151, 242, 255, 0.82);
	box-shadow: 0 14px 34px rgba(0, 0, 0, 0.32), 0 0 26px rgba(0, 208, 255, 0.34);
	color: #9ff3ff;
}

.npn-contact-menu a span {
	width: 38px;
	height: 38px;
	border-radius: 999px;
	background:
		radial-gradient(circle at 32% 24%, rgba(146, 244, 255, 0.30), rgba(103, 217, 233, 0.14) 58%, rgba(103, 217, 233, 0.08));
	color: #9fefff;
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	border: 1px solid rgba(130, 230, 255, 0.16);
	box-shadow: inset 0 0 18px rgba(103, 217, 233, 0.08);
}

.npn-contact-menu a span svg {
	display: block;
	width: 20px;
	height: 20px;
}

.npn-contact-menu a:hover span {
	color: #fff;
	background:
		radial-gradient(circle at 32% 24%, rgba(190, 250, 255, 0.42), rgba(103, 217, 233, 0.22) 58%, rgba(103, 217, 233, 0.12));
	box-shadow:
		0 0 18px rgba(103, 217, 233, 0.30),
		inset 0 0 18px rgba(103, 217, 233, 0.10);
}

.npn-contact-menu a strong {
	font-size: 13px;
	line-height: 1.25;
	font-weight: 800;
	word-break: break-word;
}


@media (max-width: 980px) {
	html {
		scroll-snap-type: none;
	}
	.npn-featured-block,
	.npn-footer-block .npn-home-inner,
	.npn-footer{
		padding-left: 20px;
		padding-right: 20px;
	}
	.npn-featured-block .npn-home-inner, .npn-footer-block .npn-home-inner {
		width: 100%;
	}
	.npn-home-block {
		min-height: auto;
	}
	.npn-footer-block .npn-home-inner {
		width: 100%;
	}
	.npn-hero-grid {
		grid-template-columns: 1fr;
		min-height: auto;
		padding: 34px 20px 150px;
	}
	.npn-try-upload {
		margin-top: -120px;
		padding: 0 20px;
	}
	
	.npn-member-card {
		grid-template-columns: 1fr;
	}
	.npn-member-info {
		display: none;
	}
	.npn-nav {
		position: absolute;
		left: 0;
		right: 0;
		top: 70px;
		display: none;
		background: #0d172d;
		border: 1px solid rgba(103, 232, 249, 0.2);
		border-radius: 16px;
		padding: 14px;
		flex-direction: column;
		align-items: stretch;
	}
	.npn-header.is-menu-open .npn-nav {
		display: flex;
	}
	.npn-mobile-menu-toggle {
		display: flex;
	}
	.npn-nav-parent {
		display: block;
	}
	.npn-submenu {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		margin-top: 8px;
		background: rgba(255, 255, 255, 0.04);
	}
}
@media (max-width: 640px) {
	.npn-home-inner {
		width: min(100% - 28px, var(--npn-container, 1180px));
	}
	.npn-header {
		height: auto;
		min-height: 68px;
		width: 100%;
	}
	.npn-hero-copy h1 {
		font-size: 46px;
	}
	.npn-hero-benefits {
		grid-template-columns: 1fr;
	}
	.npn-hero-media {
		min-height: 260px;
	}
	.npn-video-placeholder {
		min-height: 230px;
	}
	.npn-try-upload {
		padding-bottom: 28px;
	}
	.npn-upload-redirect {
		min-height: 130px;
	}
	.npn-tab-panel {
		min-height: 520px;
	}
	.npn-service-slide-link {
		height: 464px;
		min-height: 464px;
	}
	
	.npn-contact-float {
		right: 18px;
		bottom: 18px;
	}
	.npn-member-form-wrap {
		padding: 24px;
	}
	.npn-member-card {
		border-radius: 22px;
	}
	.npn-box-ft {
        flex-wrap: wrap;
        flex-direction: column-reverse;
        gap: 10px;
        justify-content: center;
        align-items: center;
	}
	.npn-hero-copy h1 p br {
		display: none;
	}
	.npn-hero-copy h1 {
		margin-bottom: 15px;
	}
	.npn-footer-links {
		justify-content: center;
	}
}
/* =========================
   Hero intro video / image
========================= */

.npn-hero-video-card {
	position: relative;
	width: 100%;
	min-height: 360px;
	border-radius: 22px;
	padding: 18px;
	background: rgba(31, 54, 118, 0.72);
	border: 1px solid rgba(98, 139, 255, 0.55);
	box-shadow:
		0 0 34px rgba(48, 108, 255, 0.2),
		inset 0 0 0 1px rgba(255,255,255,0.03);
	overflow: hidden;
}

.npn-hero-video-card.has-media {
	padding: 18px;
}

.npn-hero-video-card.is-empty {
	display: flex;
	align-items: center;
	justify-content: center;
}

.npn-hero-video-image,
.npn-hero-video-el,
.npn-hero-video-embed iframe {
	width: 100%;
	height: 100%;
	max-height: 370px;
	display: block;
	border-radius: 18px;
	object-fit: cover;
}

.npn-hero-video-embed {
	width: 100%;
	height: 100%;
}

.npn-hero-video-placeholder {
	width: 100%;
	min-height: 320px;
	border-radius: 18px;
	border: 1px dashed rgba(126, 190, 255, 0.78);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 28px;
	color: #eef6ff;
	background: rgba(24, 46, 105, 0.55);
}

.npn-hero-video-placeholder h3 {
	margin: 0 0 14px;
	font-size: 22px;
	font-weight: 900;
	color: #fff;
}

.npn-hero-video-placeholder p {
	max-width: 520px;
	margin: 0 auto 14px;
	font-size: 16px;
	line-height: 1.55;
	color: rgba(238, 246, 255, 0.92);
}

.npn-hero-video-placeholder span {
	font-size: 13px;
	color: rgba(238, 246, 255, 0.78);
}

.npn-hero-video-play {
	position: absolute;
	right: 34px;
	bottom: 34px;
	width: 64px;
	height: 64px;
	border-radius: 999px;
	border: 1px solid rgba(96, 220, 255, 0.8);
	background: rgba(0, 28, 58, 0.88);
	color: #fff;
	font-size: 22px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 0 22px rgba(56, 210, 255, 0.4);
	cursor: pointer;
}

@media (max-width: 768px) {
	.npn-hero-video-card {
		min-height: 260px;
		padding: 12px;
	}
}

/* =========================================================
   SERVICE SWIPER FINAL GUARD
   Chống CSS cũ là m slide bị tụt / dư chiều cao.
========================================================= */
.npn-tab-panel {
	min-height: 0 !important;
}

.npn-service-swiper,
.npn-service-swiper .swiper-wrapper,
.npn-service-swiper .swiper-slide,
.npn-service-slide-card {
	box-sizing: border-box;
}

.npn-service-swiper .swiper-slide {
	display: block;
}

.npn-service-slide-link,
.npn-service-slide {
	display: none !important;
}

@media (max-width: 768px) {

	.npn-tab-panel-top {
		height: auto;
		min-height: 56px;
		flex-wrap: wrap;
		padding: 10px 12px;
	}

	.npn-service-nav {
		width: 42px;
		height: 42px;
	}

	.npn-service-prev {
		left: 12px;
	}

	.npn-service-next {
		right: 12px;
	}
}
/* Custom scrollbar toà n frontend */
html {
	scrollbar-width: thin;
	scrollbar-color: rgba(126, 231, 255, 0.75) rgba(2, 16, 38, 0.95);
}

body::-webkit-scrollbar {
	width: 10px;
}

body::-webkit-scrollbar-track {
	background: rgba(2, 16, 38, 0.96);
	border-left: 1px solid rgba(120, 220, 255, 0.08);
}

body::-webkit-scrollbar-thumb {
	background: linear-gradient(
		180deg,
		rgba(130, 240, 255, 0.95),
		rgba(31, 157, 204, 0.9)
	);
	border-radius: 999px;
	border: 2px solid rgba(2, 16, 38, 0.96);
	box-shadow:
		0 0 12px rgba(0, 210, 255, 0.45),
		inset 0 0 8px rgba(255, 255, 255, 0.18);
}

body::-webkit-scrollbar-thumb:hover {
	background: linear-gradient(
		180deg,
		#b7f6ff,
		#28bde8
	);
	box-shadow:
		0 0 18px rgba(0, 210, 255, 0.72),
		inset 0 0 10px rgba(255, 255, 255, 0.26);
}

body::-webkit-scrollbar-corner {
	background: rgba(2, 16, 38, 0.96);
}

/* =========================================================
   FIXED TOP HEADER FINAL
========================================================= */
#home {
	z-index: 99999999999999;
}
.row-box {
	position: sticky !important;
	top: 0;
	left: 0;
	right: 0;
	z-index: 9999;
	width: 100%;
	background: rgba(5, 13, 31, 0.38);
	border-bottom: 1px solid rgba(112, 232, 255, 0.12);
	backdrop-filter: blur(0);
	-webkit-backdrop-filter: blur(0);

	transform: translateZ(0);
	will-change: background, box-shadow, border-color, backdrop-filter;
	transition:
		background 0.25s ease,
		box-shadow 0.25s ease,
		border-color 0.25s ease,
		backdrop-filter 0.25s ease,
		-webkit-backdrop-filter 0.25s ease;
}

.row-box.is-scrolled {
	background: rgba(5, 13, 31, 0.94);
	border-bottom-color: rgba(112, 232, 255, 0.24);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	box-shadow:
		0 12px 34px rgba(0, 0, 0, 0.26),
		0 0 24px rgba(8, 213, 255, 0.12);
}

.row-box .npn-header {
	position: relative !important;
	top: auto !important;
	z-index: 2;
	width: min(1180px, calc(100% - 32px));
	max-width: 1180px;
	min-height: 73px;
	margin: 0 auto;
	background: transparent !important;
	border-bottom: 0 !important;
	box-shadow: none !important;
	transition:
		min-height 0.25s ease,
		padding 0.25s ease;
}

.row-box.is-scrolled .npn-header {
	min-height: 66px;
}

.row-box .npn-logo img {
	transition:
		height 0.25s ease,
		width 0.25s ease;
}
/* Anchor scroll không bị header che */
#home,
#services,
#diy {
	scroll-margin-top: 90px;
}

/* Submenu phải nổi trên fixed header */
.npn-submenu {
	z-index: 10000;
}

/* Mobile */
@media (max-width: 768px) {
	.row-box .npn-header {
		width: min(100% - 24px, 1180px);
		min-height: 68px;
	}

	.row-box.is-scrolled .npn-logo img,
	.npn-logo img{
		height: auto;
        width: 130px;
	}
}
/* =========================
   Contact floating menu - Mobile safe click
========================= */

.npn-contact-float {
	position: fixed;
	right: 34px;
	bottom: 34px;
	z-index: 80;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 14px;

	/* Quan trọng: wrapper không chặn click toà n vùng */
	pointer-events: none;
}

/* Chỉ nút và menu mới nhận click */
.npn-contact-toggle,
.npn-contact-menu {
	pointer-events: auto;
}

.npn-contact-toggle {
	width: 62px;
	height: 62px;
	border: 0;
	border-radius: 999px;
	background: radial-gradient(circle at 30% 25%, #89f5ff 0%, #67d9e9 42%, #2898bd 100%);
	color: #fff;
	display: grid;
	place-items: center;
	cursor: pointer;
	box-shadow: 0 0 18px rgba(107, 214, 230, 0.9), 0 0 38px rgba(107, 214, 230, 0.36);
	transition: transform .25s ease, box-shadow .25s ease;
}

.npn-contact-toggle:hover {
	transform: translateY(-2px) scale(1.04);
	box-shadow: 0 0 24px rgba(107, 214, 230, 0.95), 0 0 56px rgba(107, 214, 230, 0.48);
}

.npn-contact-toggle svg {
	display: block;
}

.npn-contact-icon-close,
.npn-contact-float.is-open .npn-contact-icon-open {
	display: none;
}

.npn-contact-float.is-open .npn-contact-icon-close {
	display: grid;
}

.npn-contact-menu {
	min-width: 260px;
	max-width: 320px;
	display: grid;
	gap: 10px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(18px) scale(.94);
	transform-origin: right bottom;
	pointer-events: none;
	transition: opacity .24s ease, visibility .24s ease, transform .24s ease;
}

.npn-contact-float.is-open .npn-contact-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0) scale(1);
	pointer-events: auto;
}

/* Mobile: thu nhỏ nút, kéo sát góc hơn, không che slide */
@media (max-width: 640px) {
	.npn-contact-float {
		right: 14px;
		bottom: 14px;
		z-index: 70;
		gap: 10px;
	}

	.npn-contact-toggle {
		width: 52px;
		height: 52px;
		box-shadow:
			0 0 14px rgba(107, 214, 230, 0.75),
			0 0 28px rgba(107, 214, 230, 0.28);
	}

	.npn-contact-menu {
		min-width: min(270px, calc(100vw - 28px));
		max-width: calc(100vw - 28px);
	}
}

/* Mobile rất nhỏ */
@media (max-width: 430px) {
	.npn-contact-float {
		right: 12px;
		bottom: 12px;
	}

	.npn-contact-toggle {
		width: 48px;
		height: 48px;
	}
}
/* =========================================================
   MOBILE MENU FULLSCREEN + CLOSE ICON
========================================================= */

@media (max-width: 980px) {
	.row-box {
		z-index: 99999;
	}

	.npn-header {
		position: relative;
	}

	.npn-mobile-menu-toggle {
		position: relative;
		z-index: 100002;
		display: inline-flex;
		width: 42px;
		height: 42px;
		border-radius: 12px;
		border: 1px solid rgba(103, 232, 249, 0.42);
		background: rgba(6, 18, 42, 0.72);
		box-shadow: 0 0 18px rgba(8, 213, 255, 0.14);
		transition: 0.22s ease;
	}

	.npn-mobile-menu-toggle span {
		position: absolute;
		width: 20px;
		height: 2px;
		border-radius: 999px;
		background: #fff;
		transition:
			transform 0.22s ease,
			opacity 0.22s ease,
			top 0.22s ease;
	}

	.npn-mobile-menu-toggle span:nth-child(1) {
		top: 13px;
	}

	.npn-mobile-menu-toggle span:nth-child(2) {
		top: 20px;
	}

	.npn-mobile-menu-toggle span:nth-child(3) {
		top: 27px;
	}

	/* Khi mở menu: hamburger thà nh X */
	.npn-header.is-menu-open .npn-mobile-menu-toggle {
		background: rgba(8, 213, 255, 0.16);
		border-color: rgba(103, 232, 249, 0.72);
		box-shadow: 0 0 24px rgba(8, 213, 255, 0.32);
	}

	.npn-header.is-menu-open .npn-mobile-menu-toggle span:nth-child(1) {
		top: 20px;
		transform: rotate(45deg);
	}

	.npn-header.is-menu-open .npn-mobile-menu-toggle span:nth-child(2) {
		opacity: 0;
		transform: scaleX(0);
	}

	.npn-header.is-menu-open .npn-mobile-menu-toggle span:nth-child(3) {
		top: 20px;
		transform: rotate(-45deg);
	}

	/* Menu full mà n hình */
	.npn-nav {
		position: fixed !important;
		left: 0 !important;
		right: 0 !important;
		top: 0 !important;
		bottom: 0 !important;
		z-index: 100000;
		width: 100vw !important;
		height: 100vh !important;
		height: 100dvh !important;

		display: flex !important;
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-start;
		gap: 10px;

		padding: 92px 20px 28px !important;
		border-radius: 0 !important;
		border: 0 !important;
		background:
			radial-gradient(circle at 15% 0%, rgba(8, 213, 255, 0.16), transparent 32%),
			linear-gradient(180deg, rgba(5, 13, 31, 0.98), rgba(4, 9, 22, 0.99)) !important;
		backdrop-filter: blur(18px);
		box-shadow: none !important;

		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transform: translateY(-10px);
		transition:
			opacity 0.24s ease,
			visibility 0.24s ease,
			transform 0.24s ease;
		overflow-y: auto;
	}

	.npn-header.is-menu-open .npn-nav,
	.npn-nav.is-open {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transform: translateY(0);
	}

	.npn-nav > a,
	.npn-nav-parent > button {
		width: 100%;
		min-height: 58px;
		justify-content: space-between;
		padding: 0 20px;
		border-radius: 16px;
		font-size: 17px;
		font-weight: 900;
		background: rgba(12, 28, 62, 0.62);
		border: 1px solid rgba(103, 232, 249, 0.16);
	}

	.npn-nav > a.is-active {
		background:
			radial-gradient(circle at 50% 0%, rgba(108, 239, 255, 0.22), transparent 62%),
			linear-gradient(180deg, rgba(30, 132, 255, 0.28), rgba(2, 18, 54, 0.5));
		border-color: rgba(112, 232, 255, 0.48);
		box-shadow:
			inset 0 0 0 1px rgba(124, 232, 255, 0.14),
			0 0 22px rgba(0, 226, 255, 0.26);
	}

	.npn-nav-parent {
		width: 100%;
		display: block;
	}

	.npn-submenu {
		position: static !important;
		display: none;
		width: 100%;
		min-width: 0;
		margin: 8px 0 0;
		padding: 8px;
		border-radius: 16px;
		background: rgba(255, 255, 255, 0.045);
		border: 1px solid rgba(103, 232, 249, 0.12);
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transform: none !important;
		box-shadow: none;
	}

	.npn-submenu::before,
	.npn-nav-parent::after {
		display: none !important;
	}

	.npn-nav-parent.is-open .npn-submenu {
		display: grid;
		gap: 6px;
	}

	.npn-submenu a {
		min-height: 44px;
		padding: 0 16px;
		border-radius: 12px;
		font-size: 15px;
		color: #dbeafe;
		background: rgba(255, 255, 255, 0.035);
	}

	body.npn-mobile-menu-open {
		overflow: hidden;
		touch-action: none;
	}
}
/* =========================================================
   PAGE VERTICAL SWIPER
   Mỗi section là 1 slide full mà n hình
========================================================= */

:root {
	--npn-header-h: 73px;
	--npn-container-w: 1180px;
}

body.home {
	width: 100%;
	height: 100%;
	overflow: hidden;
	scroll-behavior: auto !important;
	scroll-snap-type: none !important;
}

.npn-home-shell {
	width: 100%;
	height: 100vh;
	height: 100dvh;
	overflow: hidden;
}

.npn-page-swiper {
	width: 100%;
	height: 100vh;
	height: 100dvh;
	overflow: hidden;
}

.npn-page-swiper > .swiper-wrapper {
	width: 100%;
	height: 100%;
}

.npn-page-slide {
	width: 100%;
	height: 100vh !important;
	height: 100dvh !important;
	min-height: 100vh !important;
	min-height: 100dvh !important;
	overflow: hidden !important;
	position: relative;
}

/* =========================================================
   Slide 1: Hero
========================================================= */

.npn-hero-block .npn-home-inner {
	width: 100%;
	height: calc(100dvh - var(--npn-header-h));
	display: flex;
	flex-direction: column;
	justify-content: center;
	overflow: hidden;
}

.npn-try-upload {
	width: min(var(--npn-container-w), calc(100% - 40px));
	margin: 0 auto;
	padding: 0 0 22px !important;
}

/* =========================================================
   Slide 2: Featured Services
========================================================= */

.npn-featured-block {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}

.npn-featured-block .npn-section-head-left {
	flex: 0 0 auto;
	margin: 0 0 16px !important;
	padding: 0 !important;
}

.npn-featured-block .npn-section-head-left p {
	margin: 0 !important;
	line-height: 1.45 !important;
}

.npn-service-tabs {
	flex: 0 0 auto !important;
	width: 100%;
	display: flex !important;
	flex-direction: column !important;
	overflow: hidden !important;
	border-radius: 14px;
}

.npn-tab-list {
	flex: 0 0 auto !important;
	padding: 10px 14px 9px !important;
}

.npn-tab-list button {
	height: 30px !important;
	font-size: 13px !important;
	padding: 0 12px !important;
}

.npn-tab-panel-top {
	flex: 0 0 48px !important;
	height: 48px !important;
	min-height: 48px !important;
}

.npn-tab-stage {
	flex: 0 0 auto !important;
	display: block !important;
	overflow: hidden !important;
}

.npn-tab-panel {
	width: 100% !important;
	min-height: 0 !important;
	overflow: hidden !important;
}

.npn-tab-panel.is-active {
	display: block !important;
}

/* Slide ảnh service vừa khung, không cần 3:2 */
.npn-service-swiper-wrap {
	position: relative;
	width: 100% !important;
	height: clamp(360px, 54vh, 570px) !important;
	overflow: hidden !important;
}

.npn-service-swiper {
	width: 100% !important;
	height: 100% !important;
	min-height: 0 !important;
	aspect-ratio: auto !important;
	overflow: hidden !important;
	background: #132552;
}

.npn-service-swiper .swiper-wrapper,
.npn-service-swiper .swiper-slide,
.npn-service-slide-card {
	width: 100% !important;
	height: 100% !important;
	min-height: 0 !important;
}
.npn-featured-block .npn-home-inner {
	min-height: 800px;
}


.npn-footer-block {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}


.npn-about-cta-wrap {
	gap: 18px !important;
	margin: 18px auto 24px !important;
	max-width: 820px;
}

.npn-about h2 {
	margin: 0 0 12px !important;
	font-size: 25px !important;
}

.npn-about-text,
.npn-cta-text {
	line-height: 1.55 !important;
}

.npn-cta {
	gap: 10px !important;
}

.npn-cta h3 {
	font-size: 22px !important;
}

.npn-cta a {
	height: 42px !important;
}

/* Mà n hình thấp */
@media (max-height: 760px) and (min-width: 981px) {
	

	

	.npn-service-swiper-wrap {
		height: clamp(320px, 50vh, 500px) !important;
	}

	

	

	

	.npn-about-cta-wrap {
		gap: 12px !important;
		margin: 12px auto 16px !important;
	}

	.npn-about h2 {
		font-size: 22px !important;
	}

	.npn-footer {
		padding: 14px 0 !important;
	}
}

/* Mobile: destroy page swiper, scroll thường */
@media (max-width: 980px) {
	html,
	body.npn-site-body {
		height: auto;
		overflow-x: hidden;
		overflow-y: auto;
	}

	.npn-home-shell,
	.npn-page-swiper,
	.npn-page-swiper > .swiper-wrapper,
	.npn-page-slide {
		height: auto !important;
		min-height: auto !important;
		overflow: visible !important;
		display: block !important;
		transform: none !important;
	}

	.npn-hero-block,
	.npn-featured-block,
	.npn-footer-block {
		padding-top: 0 !important;
	}
	.npn-hero-block {
		padding-top: 68px !important;
	}

	.npn-hero-block .npn-home-inner,
	.npn-featured-block .npn-home-inner,
	.npn-footer-block .npn-home-inner {
		width: 100%;
		height: auto !important;
		display: block !important;
		overflow: visible !important;
	}

	.npn-hero-grid {
		width: 100% !important;
		grid-template-columns: 1fr !important;
		padding: 26px 20px 20px !important;
	}

	.npn-try-upload {
		width: 100% !important;
		padding: 30px 20px !important;
	}

	.npn-service-swiper-wrap {
		height: clamp(260px, 62vw, 520px) !important;
	}

	

	.npn-footer {
		margin-top: 24px;
	}
}
/* =========================================================
   Hero title typing gradient effect - fixed height + inline cursor
========================================================= */

.npn-hero-title {
	position: relative;
	display: block;
	margin: 0 0 14px;
	font-family: 'Manrope-Extra', Arial, sans-serif;
	font-weight: 900;
	line-height: 1.02;
	letter-spacing: -0.055em;

	/* Chừa sẵn khoảng trống cho 2 dòng tiêu đề */
	min-height: calc(clamp(40px, 5.2vw, 76px) * 2.08);
}

.npn-hero-title p {
	margin: 0;
	padding: 0;
	font-size: clamp(40px, 5.2vw, 76px);
	line-height: 1.02;
	font-weight: 900;

	background:
		linear-gradient(
			90deg,
			#52d8ff 0%,
			#7ef3ff 22%,
			#6aa7ff 52%,
			#9aa7ff 78%,
			#ffffff 100%
		);
	background-size: 220% 100%;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;

	text-shadow:
		0 0 22px rgba(82, 216, 255, 0.26),
		0 0 46px rgba(8, 213, 255, 0.13);

	animation: npnHeroTitleGradient 4.8s ease-in-out infinite;
}

.npn-hero-title .npn-typing-line {
	display: block;
	white-space: nowrap;
}

/* Dấu nháy nằm sát ngay sau chữ đang gõ */
.npn-hero-title .npn-typing-cursor {
	display: inline-block;
	width: 4px;
	height: 0.82em;
	margin-left: 8px;
	border-radius: 999px;
	background: #7ef3ff;
	box-shadow:
		0 0 10px rgba(126, 243, 255, 0.95),
		0 0 22px rgba(8, 213, 255, 0.55);
	vertical-align: -0.04em;
	animation: npnHeroTypingCursor 0.78s steps(2, start) infinite;
}
.npn-hero-copy h1 p:first-child {
	font-size: 75px !important;
	margin-bottom: 15px;
}
.npn-hero-copy h1 p:last-child {
	font-size: 45px;
}
@keyframes npnHeroTitleGradient {
	0% {
		background-position: 0% 50%;
	}

	50% {
		background-position: 100% 50%;
	}

	100% {
		background-position: 0% 50%;
	}
}

@keyframes npnHeroTypingCursor {
	0%,
	45% {
		opacity: 1;
	}

	46%,
	100% {
		opacity: 0;
	}
}

@media (max-width: 640px) {
	.npn-hero-title {
		min-height: calc(clamp(38px, 13vw, 58px) * 2.1);
		letter-spacing: -0.045em;
	}

	.npn-hero-title p {
		font-size: clamp(38px, 13vw, 58px);
	}

	.npn-hero-title .npn-typing-cursor {
		width: 3px;
		margin-left: 6px;
	}
}

/* =========================================================
   Service image hover - smooth light only, no zoom
========================================================= */

.npn-service-slide-card {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

/* Lớp sáng phủ nhẹ, chỉ fade opacity */
.npn-service-slide-card::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	background:
		radial-gradient(circle at 28% 12%, rgba(126, 243, 255, 0.22), transparent 36%),
		linear-gradient(135deg, rgba(8, 213, 255, 0.10), transparent 58%),
		linear-gradient(0deg, rgba(3, 12, 30, 0.04), rgba(255, 255, 255, 0.05));
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.38s ease;
	will-change: opacity;
}

/* Vệt sáng chạy 1 lần khi hover */
.npn-service-slide-card::after {
	content: "";
	position: absolute;
	top: -45%;
	left: -70%;
	z-index: 3;
	width: 36%;
	height: 190%;
	background: linear-gradient(
		90deg,
		transparent,
		rgba(255, 255, 255, 0.24),
		rgba(126, 243, 255, 0.18),
		transparent
	);
	transform: skewX(-18deg) translate3d(0, 0, 0);
	opacity: 0;
	pointer-events: none;
	will-change: transform, opacity;
}

/* Ảnh không zoom, chỉ sáng nhẹ */
.npn-service-slide-card img {
	transform: translate3d(0, 0, 0) !important;
	transition: filter 0.42s ease !important;
	will-change: filter;
}

/* Hover mượt */
.npn-service-slide-card:hover::before {
	opacity: 1;
}

.npn-service-slide-card:hover::after {
	animation: npnServiceImageShineSmooth 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) 1;
}

.npn-service-slide-card:hover img {
	transform: translate3d(0, 0, 0) !important;
	filter: brightness(1.12) contrast(1.05) saturate(1.08);
}

/* Không dùng animation lặp để tránh giật */
@keyframes npnServiceImageShineSmooth {
	0% {
		transform: skewX(-18deg) translate3d(0, 0, 0);
		opacity: 0;
	}

	18% {
		opacity: 1;
	}

	100% {
		transform: skewX(-18deg) translate3d(520%, 0, 0);
		opacity: 0;
	}
}
/* =========================================================
   SMALL LAPTOP CONTENT FIT - SAFE VERSION
   Không đụng swiper-wrapper / swiper-slide để tránh mất section
========================================================= */

@media (min-width: 981px) and (max-width: 1440px) and (max-height: 850px) {

	/* Container nhỏ lại */
	

	/* SECTION 1 */
	.npn-hero-block .npn-home-inner {
		display: flex !important;
		flex-direction: column !important;
		justify-content: center !important;
		overflow: hidden !important;
	}

	.npn-hero-grid {
		gap: 14px !important;
		padding: 8px 0 8px !important;
		align-items: center !important;
	}

	.npn-hero-title {
		margin-bottom: 8px !important;
		min-height: calc(clamp(30px, 4.2vw, 54px) * 2.02) !important;
	}

	.npn-hero-title p {
		font-size: clamp(30px, 4.2vw, 54px) !important;
		line-height: 1 !important;
	}

	.npn-hero-subtitle {
		font-size: 14px !important;
		line-height: 1.42 !important;
		margin-top: 6px !important;
		margin-bottom: 10px !important;
		max-width: 520px !important;
	}

	.npn-hero-benefits {
		gap: 8px !important;
		margin-top: 12px !important;
	}
	.npn-hero-video-card,
	.npn-video-placeholder,
	.npn-hero-video-image,
	.npn-hero-video-el,
	.npn-hero-video-embed iframe,
	.npn-hero-video-placeholder {
		height: 100%;
		min-height: 0 !important;
	}

	.npn-try-upload {
		padding-bottom: 8px !important;
	}

	.npn-upload-redirect {
		min-height: 78px !important;
	}

	.npn-upload-redirect strong {
		font-size: 16px !important;
	}

	.npn-upload-redirect span,
	.npn-upload-redirect em {
		font-size: 13px !important;
	}

	/* SECTION 2 */
	.npn-featured-block .npn-home-inner {
		display: block !important;
	}

	.npn-featured-block .npn-section-head-left {
		margin-bottom: 10px !important;
		margin-top: 20px !important;
	}

	.npn-featured-block .npn-section-head-left h2 {
		font-size: 24px !important;
		margin-bottom: 5px !important;
	}

	.npn-featured-block .npn-section-head-left p {
		font-size: 14px !important;
		line-height: 1.4 !important;
	}

	.npn-tab-list {
		padding: 8px 12px !important;
		gap: 6px !important;
	}

	.npn-tab-list button {
		height: 28px !important;
		font-size: 12px !important;
		padding: 0 10px !important;
	}

	.npn-tab-panel-top {
		height: 42px !important;
		min-height: 42px !important;
		padding: 0 12px !important;
		font-size: 13px !important;
	}

	.npn-slide-pause {
		height: 32px !important;
		padding: 0 12px !important;
		font-size: 12px !important;
	}

	.npn-service-swiper-wrap {
		height: clamp(280px, 54vh, 470px) !important;
	}

	/* SECTION 3 */
	.npn-footer-block .npn-home-inner {
		display: flex !important;
		flex-direction: column !important;
		justify-content: center !important;
		overflow: hidden !important;
	}

	

	

	

	

	

	

	

	

	.npn-about-cta-wrap {
		gap: 10px !important;
		margin: 10px auto 12px !important;
		max-width: 760px !important;
	}

	.npn-about h2 {
		font-size: 21px !important;
		margin-bottom: 6px !important;
	}

	.npn-about-text,
	.npn-cta-text {
		font-size: 13px !important;
		line-height: 1.38 !important;
	}

	.npn-cta {
		gap: 7px !important;
	}

	.npn-cta h3 {
		font-size: 18px !important;
	}

	.npn-cta a {
		height: 36px !important;
		padding: 0 18px !important;
	}

	.npn-footer {
		padding: 10px 0 !important;
		font-size: 13px !important;
	}
}

/* =========================================================
   LENOVO / SMALL LAPTOP HERO FIT FIX
   Fix section 1 bị cắt dưới mà n laptop thấp
========================================================= */

@media (min-width: 981px) and (max-width: 1500px) and (max-height: 850px) {
	:root {
		--npn-laptop-header-h: 92px;
	}

	/* Section 1 vẫn đúng 1 khung */
	.npn-hero-block {
		height: 100dvh !important;
		min-height: 100dvh !important;
		overflow: hidden !important;
		padding-top: 0 !important;
	}
	/* Chừa khoảng top cho menu fixed */
	.npn-hero-block .npn-home-inner {
		box-sizing: border-box !important;
		padding-top: 0 !important;
		display: flex !important;
		flex-direction: column !important;
		justify-content: center !important;
		overflow: hidden !important;
		align-items: center;
	}

	/* Hero grid co lại */
	.npn-hero-grid {
		width: min(1120px, calc(100% - 56px)) !important;
		margin: 0 auto !important;
		grid-template-columns: minmax(0, 0.88fr) minmax(420px, 1.12fr) !important;
		gap: 14px !important;
		padding: 0 0 8px !important;
		align-items: center !important;
	}

	/* Tiêu đề co lại để không bị đẩy xuống */
	.npn-hero-title {
		margin-bottom: 6px !important;
		min-height: calc(clamp(34px, 4.3vw, 58px) * 2.02) !important;
	}

	.npn-hero-title p {
		font-size: clamp(34px, 4.3vw, 58px) !important;
		line-height: 0.98 !important;
	}

	.npn-hero-subtitle {
		font-size: 14px !important;
		line-height: 1.38 !important;
		margin-top: 6px !important;
		margin-bottom: 10px !important;
		max-width: 500px !important;
	}

	.npn-hero-benefits {
		gap: 8px !important;
		margin-top: 10px !important;
	}

	.npn-hero-benefits span {
		min-height: 34px !important;
		padding: 8px 10px !important;
		font-size: 12px !important;
		line-height: 1.25 !important;
		border-radius: 9px !important;
	}

	/* Video bên phải co chiều cao */
	.npn-hero-media,
	.npn-video-frame{
		height: 280px;
		min-height: unset !important;
	}

	/* Khối Try upload co lại */
	.npn-try-upload {
		width: min(1120px, calc(100% - 56px)) !important;
		margin: 0 auto !important;
		padding: 0 0 10px !important;
	}

	.npn-try-upload h2 {
		font-size: clamp(24px, 2.4vw, 32px) !important;
		line-height: 1.1 !important;
		margin: 0 0 8px !important;
	}

	.npn-try-upload p {
		font-size: 14px !important;
		line-height: 1.35 !important;
		margin: 0 0 10px !important;
	}

	.npn-upload-redirect {
		min-height: 78px !important;
		border-radius: 14px !important;
	}

	.npn-upload-content {
		padding: 12px 18px !important;
	}

	.npn-upload-redirect strong {
		font-size: 16px !important;
		line-height: 1.25 !important;
	}

	.npn-upload-redirect span,
	.npn-upload-redirect em {
		font-size: 12px !important;
		line-height: 1.25 !important;
	}
	.npn-footer-block {
		padding: 0 !important;
	}
}

/* Mà n laptop cực thấp hơn nữa */
@media (min-width: 981px) and (max-width: 1500px) and (max-height: 740px) {
	:root {
		--npn-laptop-header-h: 82px;
	}

	.npn-hero-grid {
		width: min(1060px, calc(100% - 60px)) !important;
		grid-template-columns: minmax(0, 0.85fr) minmax(390px, 1fr) !important;
		gap: 12px !important;
		padding-bottom: 30px !important;
	}

	.npn-hero-title {
		min-height: calc(clamp(30px, 4vw, 50px) * 2) !important;
	}

	.npn-hero-title p {
		font-size: clamp(30px, 4vw, 50px) !important;
	}

	.npn-hero-subtitle {
		font-size: 13px !important;
		margin-bottom: 8px !important;
	}

	.npn-hero-benefits {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 7px !important;
	}

	.npn-hero-benefits span {
		font-size: 13.5px !important;
	}

	.npn-try-upload {
		width: min(1060px, calc(100% - 60px)) !important;
		padding-bottom: 6px !important;
	}

	.npn-try-upload h2 {
		font-size: 24px !important;
		margin-bottom: 5px !important;
	}

	.npn-try-upload p {
		font-size: 13px !important;
		margin-bottom: 7px !important;
	}

	.npn-upload-redirect {
		min-height: 64px !important;
	}

	.npn-upload-redirect strong {
		font-size: 15px !important;
	}

	.npn-upload-redirect span,
	.npn-upload-redirect em {
		font-size: 11.5px !important;
	}
}
/* Cực thấp <= 540px: co thêm, ưu tiên không cắt */
@media (min-width: 981px) and (max-height: 540px) {
	:root {
		--npn-laptop-header-h: 64px;
	}

	.npn-hero-grid {
		width: min(1000px, calc(100% - 70px)) !important;
		grid-template-columns: minmax(0, 0.8fr) minmax(330px, 0.95fr) !important;
		gap: 8px !important;
	}

	.npn-hero-title {
		min-height: calc(clamp(24px, 3.2vw, 36px) * 2) !important;
	}

	.npn-hero-title p {
		font-size: clamp(24px, 3.2vw, 36px) !important;
	}

	.npn-hero-subtitle {
		font-size: 11.5px !important;
		line-height: 1.25 !important;
		margin-bottom: 5px !important;
	}

	.npn-hero-benefits span {
		min-height: 24px !important;
		padding: 5px 7px !important;
		font-size: 10.5px !important;
	}

	.npn-hero-video-card,
	.npn-video-placeholder,
	.npn-hero-video-image,
	.npn-hero-video-el,
	.npn-hero-video-embed iframe,
	.npn-hero-video-placeholder {
		height: clamp(135px, 31vh, 205px) !important;
	}

	.npn-try-upload {
		width: min(1000px, calc(100% - 70px)) !important;
	}

	.npn-try-upload h2 {
		font-size: 18px !important;
	}

	.npn-try-upload p {
		display: none !important;
	}

	.npn-upload-redirect {
		min-height: 44px !important;
	}

	.npn-upload-redirect span,
	.npn-upload-redirect em {
		display: none !important;
	}
}

/* v16: header account avatar uses uploaded avatar image */
.npn-profile-dot {
	position: relative;
	overflow: hidden;
}
.npn-profile-dot img {
	width: 100%;
	height: 100%;
	border-radius: inherit;
	object-fit: cover;
	display: block;
}
.npn-profile-dot span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}


.npn-contact-footer-block {
    background:
        radial-gradient(circle at 15% 12%, rgba(8, 213, 255, 0.12), transparent 34%),
        radial-gradient(circle at 88% 16%, rgba(79, 117, 255, 0.10), transparent 36%),
        linear-gradient(180deg, rgba(5, 12, 30, 0.98), rgba(3, 8, 20, 1));
}


.npn-admin-diy-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
}

.npn-admin-diy-head h2 {
    margin: 0 0 6px;
}

.npn-admin-diy-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 18px;
}

.npn-admin-diy-card {
    overflow: hidden;
    padding: 0 !important;
}

.npn-admin-diy-thumb {
    height: 170px;
    background: linear-gradient(135deg, rgba(255, 198, 41, .14), rgba(15, 23, 42, .06));
    display: grid;
    place-items: center;
}

.npn-admin-diy-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.npn-admin-diy-thumb span {
    width: 70px;
    height: 70px;
    border-radius: 20px;
    display: grid;
    place-items: center;
    background: #fff7df;
    color: #a16207;
    font-weight: 900;
}

.npn-admin-diy-body {
    padding: 18px;
}

.npn-admin-diy-badge {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    background: #fff3cd;
    color: #9a6700;
    font-size: 12px;
    font-weight: 800;
}

.npn-admin-diy-badge.is-available {
    background: #dcfce7;
    color: #166534;
}

.npn-admin-diy-body h3 {
    margin: 12px 0 8px;
    color: #0f172a;
    font-size: 20px;
}

.npn-admin-diy-body p,
.npn-admin-diy-body small {
    color: #64748b;
}

.npn-admin-diy-actions {
    display: flex;
    gap: 10px;
    margin-top: 16px;
}


@keyframes npnServiceTitleGradient {
	0%, 100% { background-position: 0% 50%; }
	50% { background-position: 100% 50%; }
}
@keyframes npnServiceCursorBlink {
	0%, 46% { opacity: 1; }
	47%, 100% { opacity: 0; }
}


/* =========================================================
   DIY STUDIO - Clean final CSS
   Dữ liệu lấy từ post type DIY Studio.
   Layout dùng chung engine tab/slide với Our Services.
   Panel đảo chiều: ảnh bên trái, nội dung bên phải.
========================================================= */

.npn-diy-service-block {
	align-items: center;
	padding-top: 0;
}

.npn-diy-service-block .npn-home-inner {
	width: min(1180px, calc(100vw - 64px));
}

.npn-diy-service-block .npn-home-service-shell,
.npn-diy-service-block .npn-home-service-shell.npn-diy-service-root {
	width: 100%;
	margin: 0 auto;
	position: relative;
}

/* Heading */
.npn-diy-service-block .npn-diy-heading {
	text-align: center;
	margin: 0 0 34px;
}

.npn-diy-service-block .npn-diy-heading h1 {
	margin: 0;
	font-family: 'Manrope-Extra', 'Manrope-Bold', Arial, sans-serif;
	font-size: clamp(42px, 5vw, 72px);
	line-height: 1;
	letter-spacing: -0.06em;
	background:
		linear-gradient(
			90deg,
			#fff7df 0%,
			#ffd35d 22%,
			#7ef3ff 48%,
			#8d7cff 74%,
			#fff7df 100%
		);
	background-size: 240% 100%;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
	text-shadow:
		0 0 26px rgba(255, 196, 67, 0.18),
		0 0 56px rgba(8, 213, 255, 0.10);
	animation: npnServiceTitleGradient 4.8s ease-in-out infinite;
}

.npn-diy-service-block .npn-diy-heading p {
	margin: 12px 0 0;
	color: rgba(255, 244, 212, 0.72);
	font-size: 16px;
	line-height: 1.6;
}

/* Top tab swiper */
.npn-diy-service-block .npn-service-tabs-wrap {
	position: relative;
	display: grid;
	grid-template-columns: 54px minmax(0, 1fr) 54px;
	gap: 18px;
	align-items: center;
	margin: 0 0 34px;
}

.npn-diy-service-block .npn-service-tabs-swiper {
	width: 100%;
	overflow: hidden;
}

.npn-diy-service-block .npn-service-tabs-swiper .swiper-wrapper {
	align-items: stretch;
}

.npn-diy-service-block .npn-service-tabs-swiper .swiper-slide {
	height: auto;
}

.npn-diy-service-block .npn-service-tab,
.npn-diy-service-block .npn-diy-tab {
	width: 100%;
	min-height: 132px;
	border-radius: 22px;
	padding: 22px 14px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	text-align: center;
	text-decoration: none;
	color: rgba(255, 245, 220, 0.78);
	border: 1px solid rgba(255, 196, 67, 0.25);
	background:
		radial-gradient(circle at 50% 0%, rgba(255, 196, 67, 0.14), transparent 58%),
		linear-gradient(180deg, rgba(38, 30, 62, 0.94), rgba(17, 18, 46, 0.98));
	box-shadow:
		inset 0 1px 0 rgba(255,255,255,0.04),
		0 18px 40px rgba(0,0,0,0.18);
	transition:
		color 0.24s ease,
		border-color 0.24s ease,
		background 0.24s ease,
		box-shadow 0.24s ease,
		transform 0.24s ease;
}

.npn-diy-service-block .npn-service-tab:hover,
.npn-diy-service-block .npn-service-tab.is-active,
.npn-diy-service-block .npn-diy-tab:hover,
.npn-diy-service-block .npn-diy-tab.is-active {
	color: #ffffff;
	border-color: rgba(255, 196, 67, 0.82);
	background:
		radial-gradient(circle at 18% 0%, rgba(255, 196, 67, 0.28), transparent 48%),
		radial-gradient(circle at 100% 0%, rgba(126, 243, 255, 0.18), transparent 46%),
		linear-gradient(135deg, rgba(86, 52, 50, 0.96), rgba(31, 30, 72, 0.98));
	box-shadow:
		0 0 0 1px rgba(255, 196, 67, 0.12),
		0 18px 42px rgba(0,0,0,0.26),
		0 0 34px rgba(255, 196, 67, 0.18);
	transform: translateY(-1px);
}

.npn-diy-service-block .npn-service-tab-icon,
.npn-diy-service-block .npn-diy-tab-icon {
	width: 58px;
	height: 58px;
	border-radius: 18px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #ffd35d;
	border: 1px solid rgba(255, 196, 67, 0.34);
	background: rgba(255, 196, 67, 0.12);
	box-shadow: 0 0 24px rgba(255, 196, 67, 0.10);
}

.npn-diy-service-block .npn-service-tab-icon svg,
.npn-diy-service-block .npn-diy-tab-icon svg {
	width: 28px;
	height: 28px;
	display: block;
}

.npn-diy-service-block .npn-service-tab strong,
.npn-diy-service-block .npn-diy-tab strong {
	font-size: 17px;
	line-height: 1.2;
	color: inherit;
}

/* Top tab prev / next */
.npn-diy-service-block .npn-service-tab-nav {
	width: 54px;
	height: 54px;
	border-radius: 999px;
	border: 1px solid rgba(255, 196, 67, 0.42);
	background: linear-gradient(135deg, #ffd35d, #ff9f1c);
	color: #1c1200;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow:
		0 0 28px rgba(255, 196, 67, 0.36),
		0 14px 32px rgba(0,0,0,0.28);
	transition:
		transform 0.24s ease,
		box-shadow 0.24s ease,
		background 0.24s ease;
}

.npn-diy-service-block .npn-service-tab-nav:hover {
	transform: translateY(-2px) scale(1.04);
	background: linear-gradient(135deg, #ffe98a, #ffb02e);
	box-shadow:
		0 0 38px rgba(255, 196, 67, 0.48),
		0 16px 36px rgba(0,0,0,0.32);
}

.npn-diy-service-block .npn-service-tab-nav svg {
	width: 22px;
	height: 22px;
	display: block;
}

/* Panels */
.npn-diy-service-block .npn-service-panels {
	position: relative;
}

.npn-diy-service-block .npn-service-panel,
.npn-diy-service-block .npn-diy-panel {
	display: none;
	grid-template-columns: minmax(420px, 1.08fr) minmax(0, 0.92fr);
	gap: 46px;
	align-items: center;
}

.npn-diy-service-block .npn-service-panel.is-active,
.npn-diy-service-block .npn-diy-panel.is-active {
	display: grid;
}

/* Image left */
.npn-diy-service-block .npn-service-slider-box,
.npn-diy-service-block .npn-diy-slider-box {
	order: 1;
	min-width: 0;
	border-color: rgba(255, 196, 67, 0.22);
}

/* Text right */
.npn-diy-service-block .npn-service-copy,
.npn-diy-service-block .npn-diy-copy {
	order: 2;
	min-width: 0;
}

.npn-diy-service-block .npn-service-copy h1,
.npn-diy-service-block .npn-diy-copy h1,
.npn-diy-service-block .npn-service-title-text {
	font-family: 'Manrope-Extra', 'Manrope-Bold', Arial, sans-serif;
	font-size: clamp(46px, 4.4vw, 70px);
	line-height: 1.08;
	letter-spacing: -0.055em;
	background: linear-gradient(90deg, #fff7df, #ffd35d, #7ef3ff);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
	text-shadow: 0 0 24px rgba(255, 196, 67, 0.18);
}

.npn-diy-service-block .npn-service-title-cursor {
	background: linear-gradient(180deg, #ffd35d, #7ef3ff);
	box-shadow: 0 0 16px rgba(255, 196, 67, 0.55);
}

.npn-diy-service-block .npn-service-excerpt,
.npn-diy-service-block .npn-diy-excerpt {
	color: rgba(225, 241, 255, 0.78);
}

.npn-diy-service-block .npn-service-content,
.npn-diy-service-block .npn-diy-content {
	max-height: 190px;
	overflow: hidden;
	color: rgba(225, 241, 255, 0.74);
}

/* Badge */
.npn-diy-service-block .npn-diy-badge {
	display: inline-flex;
	align-items: center;
	width: max-content;
	min-height: 30px;
	padding: 0 13px;
	margin-bottom: 18px;
	border-radius: 999px;
	background: linear-gradient(135deg, #ffd35d, #ff9f1c);
	color: #2a1800;
	font-size: 12px;
	box-shadow: 0 10px 24px rgba(255, 196, 67, 0.18);
}

.npn-diy-service-block .npn-diy-badge.is-coming_soon {
	background: rgba(255, 196, 67, 0.12);
	border: 1px solid rgba(255, 196, 67, 0.34);
	color: #ffd35d;
}

/* Detail image slider */
.npn-diy-service-block .npn-service-detail-swiper,
.npn-diy-service-block .npn-diy-detail-swiper {
	width: 100%;
	overflow: hidden;
}

.npn-diy-service-block .npn-service-detail-slide,
.npn-diy-service-block .npn-diy-detail-slide {
	display: block;
	border-radius: 24px;
	overflow: hidden;
	border: 1px solid rgba(255, 196, 67, 0.20);
	box-shadow:
		0 0 28px rgba(255, 196, 67, 0.12),
		0 0 54px rgba(8, 213, 255, 0.14);
}

.npn-diy-service-block .npn-service-detail-slide img,
.npn-diy-service-block .npn-diy-detail-slide img {
	display: block;
	width: 100%;
	height: clamp(310px, 38vw, 460px);
	object-fit: cover;
}

/* Image prev / next */
.npn-diy-service-block .npn-service-slider-nav {
	border-color: rgba(255, 196, 67, 0.24);
	color: #ffd35d;
	background: rgba(255, 196, 67, 0.10);
}

.npn-diy-service-block .npn-service-slider-nav:hover {
	background: rgba(255, 196, 67, 0.18);
	box-shadow: 0 0 26px rgba(255, 196, 67, 0.28);
}

/* Empty slide */
.npn-diy-service-block .npn-diy-empty-slide,
.npn-diy-service-block .npn-service-empty-slide.npn-diy-empty-slide {
	min-height: 360px;
	border-radius: 28px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	border: 1px dashed rgba(255, 196, 67, 0.34);
	background: rgba(255, 196, 67, 0.08);
	color: rgba(255, 247, 220, 0.9);
}

/* Learn more button */
.npn-diy-service-block .npn-diy-panel-button,
.npn-diy-service-block .npn-service-discover.npn-diy-panel-button {
	margin-top: 24px;
	min-height: 58px;
	padding: 0 30px;
	border-radius: 999px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	color: #071226;
	background: linear-gradient(135deg, #ffe66d, #ff9f1c);
	border: 1px solid rgba(255, 226, 107, 0.78);
	box-shadow:
		0 0 28px rgba(255, 196, 67, 0.36),
		0 18px 36px rgba(0,0,0,0.26);
	text-decoration: none;
}

/* Responsive */
@media (max-width: 1180px) {
	.npn-diy-service-block .npn-home-inner {
		width: min(100%, calc(100vw - 48px));
	}

	.npn-diy-service-block .npn-service-panel,
	.npn-diy-service-block .npn-diy-panel {
		grid-template-columns: 1fr;
		padding: 28px;
	}

	.npn-diy-service-block .npn-service-slider-box,
	.npn-diy-service-block .npn-diy-slider-box,
	.npn-diy-service-block .npn-service-copy,
	.npn-diy-service-block .npn-diy-copy {
		order: initial;
	}
}

@media (max-width: 720px) {
	.npn-diy-service-block .npn-home-inner {
		width: min(100%, calc(100vw - 28px));
	}

	.npn-diy-service-block .npn-service-tabs-wrap {
		grid-template-columns: 46px minmax(0, 1fr) 46px;
		gap: 10px;
	}

	.npn-diy-service-block .npn-service-tab {
		min-height: 112px;
	}

	.npn-diy-service-block .npn-service-copy h1,
	.npn-diy-service-block .npn-diy-copy h1,
	.npn-diy-service-block .npn-service-title-text {
		font-size: clamp(38px, 11vw, 56px);
	}

	.npn-diy-service-block .npn-service-detail-slide img,
	.npn-diy-service-block .npn-diy-detail-slide img {
		height: clamp(240px, 62vw, 360px);
	}
}
/* =========================================================
   DIY SECTION TONE FIX - v20260613
   Mục tiêu: phần DIY khác rõ phần Services nhưng vẫn cùng tông website.
   Không dùng vàng/cam; dùng teal + indigo + violet nhẹ.
========================================================= */
#diy.npn-diy-service-block {
    background:
        radial-gradient(circle at 8% 12%, rgba(26, 229, 205, 0.22), transparent 34%),
        radial-gradient(circle at 92% 10%, rgba(110, 90, 255, 0.24), transparent 36%),
        radial-gradient(circle at 58% 72%, rgba(22, 86, 190, 0.18), transparent 44%),
        linear-gradient(135deg, #02161c 0%, #071738 48%, #170d38 100%) !important;
}

#diy.npn-diy-service-block::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(16, 222, 207, 0.06), transparent 42%, rgba(123, 91, 255, 0.08)),
        radial-gradient(circle at 50% 0%, rgba(83, 227, 255, 0.10), transparent 45%);
    z-index: 0;
}

#diy.npn-diy-service-block .npn-home-inner,
#diy.npn-diy-service-block .npn-home-service-shell {
    position: relative;
    z-index: 2;
}

#diy.npn-diy-service-block .npn-service-tab,
#diy.npn-diy-service-block .npn-diy-tab {
    color: rgba(226, 244, 255, 0.82) !important;
    border-color: rgba(73, 227, 218, 0.28) !important;
    background:
        radial-gradient(circle at 50% 0%, rgba(58, 210, 255, 0.15), transparent 60%),
        linear-gradient(160deg, rgba(9, 37, 73, 0.98) 0%, rgba(9, 25, 61, 0.98) 48%, rgba(22, 14, 57, 0.98) 100%) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 18px 42px rgba(0, 0, 0, 0.22),
        0 0 0 1px rgba(73, 227, 218, 0.05) !important;
}

#diy.npn-diy-service-block .npn-service-tab:hover,
#diy.npn-diy-service-block .npn-service-tab.is-active,
#diy.npn-diy-service-block .npn-diy-tab:hover,
#diy.npn-diy-service-block .npn-diy-tab.is-active {
    color: #ffffff !important;
    border-color: rgba(100, 235, 229, 0.78) !important;
    background:
        radial-gradient(circle at 18% 0%, rgba(88, 235, 226, 0.42), transparent 46%),
        radial-gradient(circle at 100% 10%, rgba(117, 114, 255, 0.34), transparent 48%),
        linear-gradient(135deg, rgba(18, 114, 132, 0.98) 0%, rgba(28, 74, 160, 0.96) 52%, rgba(47, 29, 119, 0.98) 100%) !important;
    box-shadow:
        0 0 0 1px rgba(99, 235, 229, 0.15),
        0 22px 48px rgba(0, 0, 0, 0.30),
        0 0 34px rgba(53, 229, 223, 0.22),
        0 0 46px rgba(104, 103, 255, 0.16) !important;
}

#diy.npn-diy-service-block .npn-service-tab-icon,
#diy.npn-diy-service-block .npn-diy-tab-icon {
    color: #5ff8ef !important;
    border-color: rgba(93, 245, 236, 0.46) !important;
    background:
        radial-gradient(circle at 35% 20%, rgba(95, 248, 239, 0.24), transparent 58%),
        rgba(28, 68, 122, 0.56) !important;
    box-shadow:
        0 0 22px rgba(61, 230, 222, 0.20),
        inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

#diy.npn-diy-service-block .npn-service-tab-nav {
    color: #03101d !important;
    border-color: rgba(106, 239, 232, 0.72) !important;
    background: linear-gradient(135deg, #50f0e6 0%, #4fb7ff 52%, #8478ff 100%) !important;
    box-shadow:
        0 0 26px rgba(71, 229, 222, 0.34),
        0 16px 36px rgba(0, 0, 0, 0.30) !important;
}

#diy.npn-diy-service-block .npn-service-tab-nav:hover {
    background: linear-gradient(135deg, #79fff7 0%, #68c6ff 50%, #9a8cff 100%) !important;
    box-shadow:
        0 0 36px rgba(97, 245, 237, 0.44),
        0 18px 40px rgba(0, 0, 0, 0.34) !important;
}

#diy.npn-diy-service-block .npn-service-copy h1,
#diy.npn-diy-service-block .npn-diy-copy h1,
#diy.npn-diy-service-block .npn-service-title-text {
    background: linear-gradient(90deg, #b7fff9 0%, #50e7ff 34%, #78a8ff 67%, #c2b7ff 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
    text-shadow:
        0 0 24px rgba(80, 231, 255, 0.18),
        0 0 46px rgba(127, 118, 255, 0.16) !important;
}

#diy.npn-diy-service-block .npn-service-title-cursor {
    background: linear-gradient(180deg, #5ff8ef, #8478ff) !important;
    box-shadow: 0 0 16px rgba(95, 248, 239, 0.50) !important;
}

#diy.npn-diy-service-block .npn-service-content,
#diy.npn-diy-service-block .npn-diy-content,
#diy.npn-diy-service-block .npn-service-excerpt,
#diy.npn-diy-service-block .npn-diy-excerpt {
    color: rgba(217, 236, 255, 0.76) !important;
}

#diy.npn-diy-service-block .npn-service-slider-box,
#diy.npn-diy-service-block .npn-diy-slider-box {
    border-color: rgba(90, 244, 235, 0.26) !important;
}

#diy.npn-diy-service-block .npn-service-detail-slide,
#diy.npn-diy-service-block .npn-diy-detail-slide {
    border-color: rgba(88, 235, 226, 0.34) !important;
    box-shadow:
        0 0 32px rgba(60, 232, 222, 0.22),
        0 0 68px rgba(97, 105, 255, 0.16) !important;
}

#diy.npn-diy-service-block .npn-service-slider-nav {
    color: #5ff8ef !important;
    border-color: rgba(95, 248, 239, 0.34) !important;
    background: rgba(37, 109, 142, 0.34) !important;
    box-shadow: 0 0 22px rgba(74, 229, 223, 0.16) !important;
}

#diy.npn-diy-service-block .npn-service-slider-nav:hover {
    background: rgba(58, 143, 180, 0.46) !important;
    box-shadow: 0 0 28px rgba(89, 243, 235, 0.26) !important;
}

#diy.npn-diy-service-block .npn-diy-panel-button,
#diy.npn-diy-service-block .npn-service-discover.npn-diy-panel-button {
    color: #03101d !important;
    background: linear-gradient(135deg, #5ff8ef 0%, #4db9ff 55%, #8478ff 100%) !important;
    border-color: rgba(116, 246, 239, 0.72) !important;
    box-shadow:
        0 0 28px rgba(73, 235, 226, 0.30),
        0 18px 38px rgba(0, 0, 0, 0.28) !important;
}

#diy.npn-diy-service-block .npn-diy-badge {
    color: #03101d !important;
    background: linear-gradient(135deg, #5ff8ef, #76a9ff) !important;
    box-shadow: 0 10px 24px rgba(78, 229, 222, 0.18) !important;
}

#diy.npn-diy-service-block .npn-diy-badge.is-coming_soon {
    color: #84fff7 !important;
    background: rgba(95, 248, 239, 0.10) !important;
    border-color: rgba(95, 248, 239, 0.36) !important;
}

/* =========================================================
   FRONT CONTACT PAGE
========================================================= */
body.npn-contact-page-body {
    min-height: 100vh;
    background: #020817;
    color: #eef6ff;
}

.npn-contact-page-shell {
    min-height: 100vh;
    overflow: hidden;
    background:
        radial-gradient(circle at 14% 8%, rgba(8, 213, 255, 0.20), transparent 31%),
        radial-gradient(circle at 88% 16%, rgba(83, 105, 255, 0.18), transparent 31%),
        radial-gradient(circle at 50% 100%, rgba(8, 213, 255, 0.10), transparent 34%),
        linear-gradient(180deg, #08101f 0%, #050a17 44%, #020817 100%);
}

.npn-contact-page-main {
    position: relative;
    z-index: 1;
}

.npn-contact-container {
    width: min(1180px, calc(100% - 42px));
    margin: 0 auto;
}

.npn-contact-hero {
    position: relative;
    min-height: 650px;
    display: flex;
    align-items: center;
    padding: 92px 0 74px;
    overflow: hidden;
}

.npn-contact-gridline {
    position: absolute;
    inset: 0;
    opacity: 0.14;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(111, 231, 255, 0.18) 1px, transparent 1px),
        linear-gradient(90deg, rgba(111, 231, 255, 0.16) 1px, transparent 1px);
    background-size: 68px 68px;
    mask-image: radial-gradient(circle at 50% 35%, #000 0%, transparent 70%);
}

.npn-contact-orb {
    position: absolute;
    display: block;
    border-radius: 999px;
    filter: blur(3px);
    pointer-events: none;
}

.npn-contact-orb-one {
    width: 340px;
    height: 340px;
    left: -130px;
    top: 120px;
    background: radial-gradient(circle, rgba(8, 213, 255, 0.28), transparent 68%);
    animation: npnContactFloat 8s ease-in-out infinite;
}

.npn-contact-orb-two {
    width: 440px;
    height: 440px;
    right: -160px;
    top: 40px;
    background: radial-gradient(circle, rgba(64, 98, 255, 0.24), transparent 70%);
    animation: npnContactFloat 10s ease-in-out infinite reverse;
}

.npn-contact-hero-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(380px, 0.82fr);
    align-items: center;
    gap: 58px;
}

.npn-contact-hero-copy,
.npn-contact-visual,
.npn-contact-info-panel,
.npn-contact-form-panel {
    animation: npnContactRise 0.72s ease both;
}

.npn-contact-visual {
    animation-delay: 0.12s;
}

.npn-contact-info-panel {
    animation-delay: 0.18s;
}

.npn-contact-form-panel {
    animation-delay: 0.26s;
}

.npn-contact-kicker,
.npn-contact-section-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    width: fit-content;
    padding: 8px 13px;
    border-radius: 999px;
    color: #7df4ff;
    background: rgba(8, 213, 255, 0.10);
    border: 1px solid rgba(112, 232, 255, 0.22);
    font-family: 'Manrope-SemiBold';
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    box-shadow: inset 0 0 24px rgba(8, 213, 255, 0.05);
}

.npn-contact-kicker:before,
.npn-contact-section-label:before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: #1ee8ff;
    box-shadow: 0 0 16px rgba(30, 232, 255, 0.88);
}

.npn-contact-hero h1 {
    margin: 22px 0 20px;
    max-width: 760px;
    color: #ffffff;
    font-family: 'Manrope-Extra';
    font-size: clamp(44px, 6vw, 78px);
    line-height: 0.98;
    letter-spacing: -0.07em;
    text-shadow: 0 0 34px rgba(8, 213, 255, 0.16);
}

.npn-contact-hero-copy p {
    max-width: 680px;
    margin: 0;
    color: rgba(222, 236, 255, 0.78);
    font-size: 17px;
    line-height: 1.72;
}

.npn-contact-hero-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 30px;
}

.npn-contact-primary-link,
.npn-contact-secondary-link,
.npn-contact-submit-btn {
    min-height: 50px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 1px solid rgba(112, 232, 255, 0.38);
    color: #041223;
    background: linear-gradient(135deg, #41f2ff 0%, #10c6ff 48%, #3378ff 100%);
    font-family: 'Manrope-Bold';
    box-shadow:
        0 0 26px rgba(8, 213, 255, 0.28),
        0 16px 34px rgba(0, 0, 0, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.42);
    transition: transform 0.22s ease, box-shadow 0.22s ease, filter 0.22s ease;
}

.npn-contact-primary-link {
    padding: 0 22px;
}

.npn-contact-primary-link svg,
.npn-contact-submit-btn svg {
    width: 20px;
    height: 20px;
    transition: transform 0.22s ease;
}

.npn-contact-primary-link:hover,
.npn-contact-submit-btn:hover {
    transform: translateY(-2px);
    filter: saturate(1.08);
    box-shadow:
        0 0 38px rgba(8, 213, 255, 0.42),
        0 20px 40px rgba(0, 0, 0, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.52);
}

.npn-contact-primary-link:hover svg,
.npn-contact-submit-btn:hover svg {
    transform: translateX(3px);
}

.npn-contact-secondary-link {
    padding: 0 20px;
    color: #dffaff;
    background: rgba(16, 28, 58, 0.72);
    border-color: rgba(121, 155, 255, 0.26);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.npn-contact-secondary-link:hover {
    transform: translateY(-2px);
    border-color: rgba(112, 232, 255, 0.48);
    box-shadow: 0 18px 34px rgba(0, 0, 0, 0.22), 0 0 24px rgba(8, 213, 255, 0.12);
}

.npn-contact-hero-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 34px;
    max-width: 650px;
}

.npn-contact-hero-metrics div {
    min-height: 94px;
    padding: 16px;
    border-radius: 22px;
    background: rgba(14, 27, 59, 0.66);
    border: 1px solid rgba(112, 232, 255, 0.16);
    box-shadow: inset 0 0 24px rgba(8, 213, 255, 0.04);
}

.npn-contact-hero-metrics strong {
    display: block;
    color: #ffffff;
    font-family: 'Manrope-Extra';
    font-size: 28px;
    line-height: 1;
}

.npn-contact-hero-metrics span {
    display: block;
    margin-top: 9px;
    color: rgba(218, 232, 255, 0.67);
    font-size: 13px;
}

.npn-contact-visual {
    position: relative;
}

.npn-contact-visual:before {
    content: "";
    position: absolute;
    inset: 36px -20px -20px 30px;
    border-radius: 36px;
    background: linear-gradient(135deg, rgba(8, 213, 255, 0.16), rgba(43, 95, 255, 0.05));
    filter: blur(22px);
}

.npn-contact-visual-card {
    position: relative;
    min-height: 450px;
    padding: 22px;
    border-radius: 34px;
    background:
        linear-gradient(180deg, rgba(25, 44, 87, 0.82), rgba(8, 16, 38, 0.92)),
        radial-gradient(circle at 20% 10%, rgba(8, 213, 255, 0.22), transparent 40%);
    border: 1px solid rgba(112, 232, 255, 0.24);
    box-shadow:
        0 34px 80px rgba(0, 0, 0, 0.42),
        inset 0 0 0 1px rgba(255, 255, 255, 0.04),
        inset 0 0 70px rgba(8, 213, 255, 0.06);
    overflow: hidden;
}

.npn-contact-visual-top {
    display: flex;
    gap: 8px;
    margin-bottom: 22px;
}

.npn-contact-visual-top span {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: rgba(135, 159, 214, 0.8);
}

.npn-contact-visual-top span:first-child {
    background: #27e6ff;
    box-shadow: 0 0 16px rgba(39, 230, 255, 0.66);
}

.npn-contact-production-flow {
    position: relative;
    z-index: 2;
    display: grid;
    gap: 12px;
}

.npn-contact-production-flow div {
    position: relative;
    display: grid;
    grid-template-columns: 42px 1fr;
    grid-template-areas: "num title" "num meta";
    column-gap: 13px;
    align-items: center;
    min-height: 76px;
    padding: 15px 16px;
    border-radius: 22px;
    border: 1px solid rgba(112, 232, 255, 0.12);
    background: rgba(7, 18, 43, 0.70);
    transition: transform 0.22s ease, border-color 0.22s ease, background 0.22s ease;
}

.npn-contact-production-flow div:hover,
.npn-contact-production-flow div.is-active {
    transform: translateX(-5px);
    border-color: rgba(112, 232, 255, 0.38);
    background: rgba(8, 213, 255, 0.10);
}

.npn-contact-production-flow small {
    grid-area: num;
    width: 42px;
    height: 42px;
    border-radius: 15px;
    display: grid;
    place-items: center;
    color: #07162b;
    background: linear-gradient(135deg, #7df4ff, #3b82ff);
    font-family: 'Manrope-Extra';
    box-shadow: 0 0 22px rgba(8, 213, 255, 0.22);
}

.npn-contact-production-flow strong {
    grid-area: title;
    color: #ffffff;
    font-family: 'Manrope-Bold';
    font-size: 16px;
}

.npn-contact-production-flow em {
    grid-area: meta;
    margin-top: 4px;
    color: rgba(218, 232, 255, 0.58);
    font-style: normal;
    font-size: 13px;
}

.npn-contact-pulse-map {
    position: absolute;
    right: -54px;
    bottom: -64px;
    width: 250px;
    height: 250px;
    border-radius: 50%;
    border: 1px solid rgba(112, 232, 255, 0.14);
    background: radial-gradient(circle, rgba(8, 213, 255, 0.14), transparent 62%);
}

.npn-contact-pulse-map span {
    position: absolute;
    inset: 28px;
    border-radius: inherit;
    border: 1px solid rgba(112, 232, 255, 0.30);
    animation: npnContactPulse 2.8s ease-out infinite;
}

.npn-contact-pulse-map span:nth-child(2) {
    inset: 64px;
    animation-delay: 0.32s;
}

.npn-contact-pulse-map span:nth-child(3) {
    inset: 100px;
    background: #1ee8ff;
    box-shadow: 0 0 30px rgba(30, 232, 255, 0.72);
    animation-delay: 0.64s;
}

.npn-contact-content-section {
    position: relative;
    padding: 20px 0 92px;
}

.npn-contact-main-grid {
    display: grid;
    grid-template-columns: minmax(280px, 0.78fr) minmax(0, 1.22fr);
    gap: 26px;
    align-items: start;
}

.npn-contact-info-panel,
.npn-contact-form-panel {
    position: relative;
    border-radius: 32px;
    border: 1px solid rgba(112, 232, 255, 0.18);
    background:
        linear-gradient(180deg, rgba(18, 35, 72, 0.82), rgba(6, 15, 36, 0.92));
    box-shadow:
        0 32px 80px rgba(0, 0, 0, 0.33),
        inset 0 0 0 1px rgba(255, 255, 255, 0.04);
    overflow: hidden;
}

.npn-contact-info-panel:before,
.npn-contact-form-panel:before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(circle at var(--npn-contact-x, 50%) var(--npn-contact-y, 0%), rgba(8, 213, 255, 0.14), transparent 36%);
    opacity: 0;
    transition: opacity 0.22s ease;
}

.npn-contact-info-panel:hover:before,
.npn-contact-form-panel:hover:before {
    opacity: 1;
}

.npn-contact-info-panel {
    position: sticky;
    top: 104px;
    padding: 28px;
}

.npn-contact-info-panel h2,
.npn-contact-form-head h2 {
    position: relative;
    z-index: 2;
    margin: 16px 0 10px;
    color: #ffffff;
    font-family: 'Manrope-Extra';
    font-size: 30px;
    line-height: 1.08;
    letter-spacing: -0.045em;
}

.npn-contact-info-panel p,
.npn-contact-form-head p {
    position: relative;
    z-index: 2;
    margin: 0;
    color: rgba(218, 232, 255, 0.66);
    line-height: 1.65;
}

.npn-contact-card-list {
    position: relative;
    z-index: 2;
    display: grid;
    gap: 12px;
    margin-top: 24px;
}

.npn-contact-info-card {
    display: grid;
    grid-template-columns: 48px 1fr;
    align-items: center;
    gap: 14px;
    min-height: 78px;
    padding: 14px;
    border-radius: 22px;
    border: 1px solid rgba(112, 232, 255, 0.12);
    background: rgba(8, 18, 43, 0.68);
    transition: transform 0.22s ease, border-color 0.22s ease, background 0.22s ease, box-shadow 0.22s ease;
}

.npn-contact-info-card:hover {
    transform: translateY(-3px);
    border-color: rgba(112, 232, 255, 0.38);
    background: rgba(8, 213, 255, 0.10);
    box-shadow: 0 18px 30px rgba(0, 0, 0, 0.22);
}

.npn-contact-info-card > span {
    width: 48px;
    height: 48px;
    border-radius: 17px;
    display: grid;
    place-items: center;
    color: #051529;
    background: linear-gradient(135deg, #7df4ff, #3b82ff);
    box-shadow: 0 0 22px rgba(8, 213, 255, 0.24);
}

.npn-contact-info-card svg {
    width: 22px;
    height: 22px;
}

.npn-contact-info-card small,
.npn-contact-form-panel label span {
    display: block;
    margin-bottom: 6px;
    color: rgba(218, 232, 255, 0.58);
    font-family: 'Manrope-SemiBold';
    font-size: 12px;
}

.npn-contact-info-card strong {
    display: block;
    color: #ffffff;
    font-family: 'Manrope-Bold';
    font-size: 14px;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.npn-contact-socials {
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid rgba(112, 232, 255, 0.12);
}

.npn-contact-socials a {
    width: 42px;
    height: 42px;
    border-radius: 15px;
    display: grid;
    place-items: center;
    color: #dffaff;
    border: 1px solid rgba(112, 232, 255, 0.18);
    background: rgba(9, 20, 48, 0.72);
    transition: transform 0.22s ease, color 0.22s ease, border-color 0.22s ease, background 0.22s ease;
}

.npn-contact-socials a:hover {
    transform: translateY(-3px) rotate(-2deg);
    color: #041223;
    background: #39e9ff;
    border-color: rgba(112, 232, 255, 0.5);
}

.npn-contact-socials svg {
    width: 20px;
    height: 20px;
}

.npn-contact-form-panel {
    padding: 30px;
}

.npn-contact-form-head {
    position: relative;
    z-index: 2;
    margin-bottom: 24px;
}

.npn-contact-page-form {
    position: relative;
    z-index: 2;
    display: grid;
    gap: 16px;
}

.npn-hp-field {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.npn-contact-field-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.npn-contact-form-panel label {
    display: block;
}

.npn-contact-form-panel input,
.npn-contact-form-panel select,
.npn-contact-form-panel textarea {
    width: 100%;
    min-height: 54px;
    border: 1px solid rgba(112, 232, 255, 0.18);
    border-radius: 17px;
    outline: none;
    color: #ffffff;
    background: rgba(7, 17, 40, 0.78);
    padding: 0 16px;
    font: inherit;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.025);
    transition: border-color 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
}

.npn-contact-form-panel select {
    appearance: none;
    background-image:
        linear-gradient(45deg, transparent 50%, rgba(190, 244, 255, 0.82) 50%),
        linear-gradient(135deg, rgba(190, 244, 255, 0.82) 50%, transparent 50%);
    background-position:
        calc(100% - 20px) 24px,
        calc(100% - 14px) 24px;
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
    padding-right: 42px;
}

.npn-contact-form-panel select option {
    color: #07162b;
}

.npn-contact-form-panel textarea {
    min-height: 150px;
    padding: 15px 16px;
    resize: vertical;
    line-height: 1.6;
}

.npn-contact-form-panel input::placeholder,
.npn-contact-form-panel textarea::placeholder {
    color: rgba(218, 232, 255, 0.38);
}

.npn-contact-form-panel input:focus,
.npn-contact-form-panel select:focus,
.npn-contact-form-panel textarea:focus {
    border-color: rgba(112, 232, 255, 0.56);
    background: rgba(8, 20, 50, 0.94);
    box-shadow: 0 0 0 4px rgba(8, 213, 255, 0.10), inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.npn-contact-submit-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 4px;
}

.npn-contact-submit-btn {
    min-width: 184px;
    border: 0;
    padding: 0 22px;
    cursor: pointer;
}

.npn-contact-submit-btn.is-loading {
    pointer-events: none;
    opacity: 0.72;
}

.npn-contact-submit-btn.is-loading span:after {
    content: "...";
}

.npn-contact-submit-row p {
    margin: 0;
    color: rgba(218, 232, 255, 0.50);
    font-size: 13px;
    line-height: 1.45;
    text-align: right;
}

.npn-contact-form-message {
    min-height: 0;
    margin-top: 2px;
    border-radius: 16px;
    font-family: 'Manrope-SemiBold';
    font-size: 13px;
    line-height: 1.45;
}

.npn-contact-form-message:not(:empty) {
    padding: 12px 14px;
    border: 1px solid rgba(112, 232, 255, 0.18);
    background: rgba(8, 213, 255, 0.08);
    color: #c8fbff;
}

.npn-contact-form-message.is-error:not(:empty) {
    border-color: rgba(255, 112, 142, 0.34);
    background: rgba(255, 72, 119, 0.10);
    color: #ffd5df;
}

.npn-contact-form-message.is-success:not(:empty) {
    border-color: rgba(72, 255, 205, 0.30);
    background: rgba(72, 255, 205, 0.09);
    color: #c9fff1;
}

@keyframes npnContactRise {
    from {
        opacity: 0;
        transform: translateY(24px) scale(0.985);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes npnContactFloat {
    0%, 100% {
        transform: translate3d(0, 0, 0) scale(1);
    }
    50% {
        transform: translate3d(18px, -22px, 0) scale(1.06);
    }
}

@keyframes npnContactPulse {
    0% {
        opacity: 0.82;
        transform: scale(0.82);
    }
    100% {
        opacity: 0;
        transform: scale(1.42);
    }
}

@media (max-width: 1080px) {
    .npn-contact-hero {
        min-height: auto;
        padding: 72px 0 58px;
    }

    .npn-contact-hero-grid,
    .npn-contact-main-grid {
        grid-template-columns: 1fr;
    }

    .npn-contact-visual-card {
        min-height: 390px;
    }

    .npn-contact-info-panel {
        position: relative;
        top: auto;
    }
}

@media (max-width: 760px) {
    .npn-contact-container {
        width: min(100% - 28px, 1180px);
    }

    .npn-contact-hero {
        padding: 50px 0 42px;
    }

    .npn-contact-hero h1 {
        font-size: clamp(36px, 12vw, 52px);
    }

    .npn-contact-hero-copy p {
        font-size: 15px;
    }

    .npn-contact-hero-actions,
    .npn-contact-submit-row {
        align-items: stretch;
        flex-direction: column;
    }

    .npn-contact-primary-link,
    .npn-contact-secondary-link,
    .npn-contact-submit-btn {
        width: 100%;
    }

    .npn-contact-hero-metrics,
    .npn-contact-field-grid {
        grid-template-columns: 1fr;
    }

    .npn-contact-visual-card {
        min-height: 330px;
        padding: 16px;
        border-radius: 26px;
    }

    .npn-contact-production-flow div {
        min-height: 70px;
    }

    .npn-contact-info-panel,
    .npn-contact-form-panel {
        padding: 20px;
        border-radius: 26px;
    }

    .npn-contact-submit-row p {
        text-align: left;
    }
}

@media (prefers-reduced-motion: reduce) {
    .npn-contact-hero-copy,
    .npn-contact-visual,
    .npn-contact-info-panel,
    .npn-contact-form-panel,
    .npn-contact-orb,
    .npn-contact-pulse-map span {
        animation: none !important;
    }
}

.npn-contact-page-editor-section {
    position: relative;
    z-index: 3;
    padding: 0 0 28px;
    margin-top: -18px;
}

.npn-contact-page-editor-content {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(112, 232, 255, 0.16);
    border-radius: 30px;
    padding: clamp(24px, 4vw, 42px);
    background: linear-gradient(135deg, rgba(9, 26, 58, 0.78), rgba(7, 16, 39, 0.88));
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.04);
    color: rgba(236, 246, 255, 0.82);
}

.npn-contact-page-editor-content:before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 16% 0%, rgba(8, 213, 255, 0.12), transparent 34%),
        radial-gradient(circle at 86% 100%, rgba(255, 201, 31, 0.09), transparent 32%);
}

.npn-contact-page-editor-content > * {
    position: relative;
    z-index: 1;
}

.npn-contact-page-editor-content h2,
.npn-contact-page-editor-content h3,
.npn-contact-page-editor-content h4 {
    margin: 0 0 14px;
    color: #ffffff;
    font-family: 'Manrope-ExtraBold';
    letter-spacing: -0.03em;
}

.npn-contact-page-editor-content p,
.npn-contact-page-editor-content ul,
.npn-contact-page-editor-content ol {
    margin-top: 0;
    line-height: 1.75;
}

.npn-contact-page-editor-content a {
    color: #5df2ff;
    font-family: 'Manrope-SemiBold';
}

@media (max-width: 760px) {
    .npn-contact-page-editor-section {
        margin-top: 0;
    }

    .npn-contact-page-editor-content {
        border-radius: 24px;
    }
}

/* =========================================================
   FRONT FAQ PAGE
========================================================= */
body.npn-faq-page-body {
    min-height: 100vh;
    background: #020817;
    color: #eef6ff;
}

.npn-faq-page-shell {
    min-height: 100vh;
    overflow: hidden;
    background:
        radial-gradient(circle at 12% 12%, rgba(8, 213, 255, 0.20), transparent 31%),
        radial-gradient(circle at 88% 18%, rgba(255, 201, 31, 0.14), transparent 28%),
        radial-gradient(circle at 50% 100%, rgba(83, 105, 255, 0.11), transparent 36%),
        linear-gradient(180deg, #08101f 0%, #050a17 44%, #020817 100%);
}

.npn-faq-page-main {
    position: relative;
    z-index: 1;
}

.npn-faq-hero {
    position: relative;
    min-height: 620px;
    display: flex;
    align-items: center;
    padding: 92px 0 68px;
    overflow: hidden;
}

.npn-faq-gridline {
    position: absolute;
    inset: 0;
    opacity: 0.13;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(111, 231, 255, 0.18) 1px, transparent 1px),
        linear-gradient(90deg, rgba(111, 231, 255, 0.15) 1px, transparent 1px);
    background-size: 70px 70px;
    mask-image: radial-gradient(circle at 50% 32%, #000 0%, transparent 70%);
}

.npn-faq-orb {
    position: absolute;
    display: block;
    border-radius: 999px;
    pointer-events: none;
    filter: blur(3px);
}

.npn-faq-orb-one {
    width: 360px;
    height: 360px;
    left: -140px;
    top: 90px;
    background: radial-gradient(circle, rgba(8, 213, 255, 0.28), transparent 68%);
    animation: npnContactFloat 8s ease-in-out infinite;
}

.npn-faq-orb-two {
    width: 460px;
    height: 460px;
    right: -170px;
    top: 30px;
    background: radial-gradient(circle, rgba(255, 201, 31, 0.18), transparent 70%);
    animation: npnContactFloat 10s ease-in-out infinite reverse;
}

.npn-faq-hero-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(360px, 0.78fr);
    gap: 58px;
    align-items: center;
}

.npn-faq-hero-copy,
.npn-faq-visual-card,
.npn-faq-section-head,
.npn-faq-accordion,
.npn-faq-cta-card {
    animation: npnContactRise 0.72s ease both;
}

.npn-faq-visual-card {
    animation-delay: .12s;
}

.npn-faq-hero-copy h1 {
    margin: 22px 0 20px;
    max-width: 820px;
    color: #ffffff;
    font-family: 'Manrope-Extra';
    font-size: clamp(44px, 6vw, 78px);
    line-height: 0.98;
    letter-spacing: -0.07em;
    text-shadow: 0 0 34px rgba(8, 213, 255, 0.16);
}

.npn-faq-hero-copy p {
    max-width: 700px;
    margin: 0;
    color: rgba(222, 236, 255, 0.78);
    font-size: 17px;
    line-height: 1.72;
}

.npn-faq-visual-card {
    position: relative;
    min-height: 420px;
    padding: 28px;
    border-radius: 34px;
    border: 1px solid rgba(112, 232, 255, 0.24);
    background:
        radial-gradient(circle at 20% 10%, rgba(8, 213, 255, 0.20), transparent 38%),
        linear-gradient(180deg, rgba(24, 43, 87, 0.84), rgba(7, 16, 39, 0.94));
    box-shadow:
        0 34px 80px rgba(0, 0, 0, 0.42),
        inset 0 0 0 1px rgba(255, 255, 255, 0.04),
        inset 0 0 70px rgba(8, 213, 255, 0.06);
    overflow: hidden;
}

.npn-faq-visual-card:before {
    content: "";
    position: absolute;
    width: 220px;
    height: 220px;
    right: -76px;
    bottom: -84px;
    border-radius: 50%;
    border: 1px solid rgba(112, 232, 255, 0.18);
    background: radial-gradient(circle, rgba(8, 213, 255, 0.16), transparent 65%);
}

.npn-faq-visual-card > span {
    display: inline-flex;
    padding: 8px 12px;
    border-radius: 999px;
    color: #7df4ff;
    background: rgba(8, 213, 255, 0.10);
    border: 1px solid rgba(112, 232, 255, 0.20);
    font-family: 'Manrope-SemiBold';
    font-size: 12px;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.npn-faq-visual-card h2 {
    position: relative;
    z-index: 1;
    margin: 18px 0 12px;
    color: #ffffff;
    font-family: 'Manrope-Extra';
    font-size: 32px;
    line-height: 1.05;
    letter-spacing: -.045em;
}

.npn-faq-visual-card p {
    position: relative;
    z-index: 1;
    margin: 0;
    color: rgba(218, 232, 255, .68);
    line-height: 1.65;
}

.npn-faq-visual-stack {
    position: relative;
    z-index: 2;
    display: grid;
    gap: 12px;
    margin-top: 24px;
}

.npn-faq-visual-stack div {
    display: grid;
    grid-template-columns: 42px 1fr;
    gap: 12px;
    align-items: center;
    min-height: 68px;
    padding: 13px 14px;
    border-radius: 20px;
    border: 1px solid rgba(112, 232, 255, 0.13);
    background: rgba(6, 17, 42, 0.72);
    transition: transform .22s ease, border-color .22s ease, background .22s ease;
}

.npn-faq-visual-stack div:hover {
    transform: translateX(-5px);
    border-color: rgba(112, 232, 255, .36);
    background: rgba(8, 213, 255, .10);
}

.npn-faq-visual-stack small {
    width: 42px;
    height: 42px;
    border-radius: 15px;
    display: grid;
    place-items: center;
    color: #07162b;
    background: linear-gradient(135deg, #7df4ff, #3b82ff);
    font-family: 'Manrope-Extra';
}

.npn-faq-visual-stack strong {
    color: #ffffff;
    font-family: 'Manrope-Bold';
    line-height: 1.35;
}

.npn-faq-visual-count {
    position: absolute;
    right: 22px;
    bottom: 22px;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 96px;
    height: 96px;
    border-radius: 28px;
    border: 1px solid rgba(112, 232, 255, .22);
    background: rgba(8, 18, 43, .78);
    box-shadow: 0 20px 42px rgba(0,0,0,.28), inset 0 0 32px rgba(8,213,255,.07);
}

.npn-faq-visual-count strong {
    color: #ffffff;
    font-family: 'Manrope-Extra';
    font-size: 34px;
    line-height: 1;
}

.npn-faq-visual-count span {
    margin-top: -16px;
    color: rgba(218, 232, 255, .58);
    font-size: 12px;
}

.npn-faq-list-section {
    position: relative;
    z-index: 2;
    padding: 8px 0 50px;
}

.npn-faq-section-grid {
    display: grid;
    grid-template-columns: minmax(280px, .78fr) minmax(0, 1.22fr);
    gap: 26px;
    align-items: start;
}

.npn-faq-section-head,
.npn-faq-accordion,
.npn-faq-cta-card {
    position: relative;
    border-radius: 32px;
    border: 1px solid rgba(112, 232, 255, 0.18);
    background: linear-gradient(180deg, rgba(18, 35, 72, 0.82), rgba(6, 15, 36, 0.92));
    box-shadow: 0 32px 80px rgba(0, 0, 0, 0.32), inset 0 0 0 1px rgba(255,255,255,.04);
    overflow: hidden;
}

.npn-faq-section-head {
    position: sticky;
    top: 104px;
    padding: 28px;
}

.npn-faq-section-head h2,
.npn-faq-cta-card h2 {
    margin: 16px 0 10px;
    color: #ffffff;
    font-family: 'Manrope-Extra';
    font-size: 32px;
    line-height: 1.08;
    letter-spacing: -.045em;
}

.npn-faq-section-head p,
.npn-faq-cta-card p {
    margin: 0;
    color: rgba(218, 232, 255, .66);
    line-height: 1.65;
}

.npn-faq-search-box {
    display: grid;
    grid-template-columns: 22px 1fr;
    gap: 10px;
    align-items: center;
    min-height: 56px;
    margin-top: 24px;
    padding: 0 16px;
    border-radius: 18px;
    border: 1px solid rgba(112, 232, 255, .18);
    background: rgba(7, 17, 40, .78);
    color: rgba(218, 232, 255, .72);
    transition: border-color .22s ease, box-shadow .22s ease, background .22s ease;
}

.npn-faq-search-box:focus-within {
    border-color: rgba(112, 232, 255, .56);
    background: rgba(8, 20, 50, .94);
    box-shadow: 0 0 0 4px rgba(8, 213, 255, .10);
}

.npn-faq-search-box svg {
    width: 20px;
    height: 20px;
}

.npn-faq-search-box input {
    width: 100%;
    min-height: 52px;
    border: 0;
    outline: none;
    color: #ffffff;
    background: transparent;
    font: inherit;
}

.npn-faq-search-box input::placeholder {
    color: rgba(218, 232, 255, .38);
}

.npn-faq-accordion {
    display: grid;
    gap: 12px;
    padding: 16px;
}

.npn-faq-item {
    border-radius: 24px;
    border: 1px solid rgba(112, 232, 255, .12);
    background: rgba(8, 18, 43, .68);
    overflow: hidden;
    transition: transform .22s ease, border-color .22s ease, background .22s ease, box-shadow .22s ease;
}

.npn-faq-item:hover,
.npn-faq-item.is-open {
    border-color: rgba(112, 232, 255, .38);
    background: rgba(8, 213, 255, .08);
    box-shadow: 0 18px 34px rgba(0,0,0,.18);
}

.npn-faq-question {
    width: 100%;
    display: grid;
    grid-template-columns: 48px 1fr 42px;
    gap: 14px;
    align-items: center;
    min-height: 82px;
    padding: 16px;
    border: 0;
    cursor: pointer;
    text-align: left;
    background: transparent;
    color: #ffffff;
}

.npn-faq-question span {
    width: 48px;
    height: 48px;
    border-radius: 17px;
    display: grid;
    place-items: center;
    color: #051529;
    background: linear-gradient(135deg, #7df4ff, #3b82ff);
    font-family: 'Manrope-Extra';
    box-shadow: 0 0 22px rgba(8, 213, 255, .24);
}

.npn-faq-question strong {
    font-family: 'Manrope-Bold';
    font-size: 17px;
    line-height: 1.35;
}

.npn-faq-question em {
    position: relative;
    width: 42px;
    height: 42px;
    border-radius: 15px;
    border: 1px solid rgba(112, 232, 255, .18);
    background: rgba(9, 20, 48, .72);
}

.npn-faq-question em:before,
.npn-faq-question em:after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 16px;
    height: 2px;
    border-radius: 2px;
    background: #dffaff;
    transform: translate(-50%, -50%);
    transition: transform .22s ease, opacity .22s ease;
}

.npn-faq-question em:after {
    transform: translate(-50%, -50%) rotate(90deg);
}

.npn-faq-item.is-open .npn-faq-question em:after {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(0deg);
}

.npn-faq-answer {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .28s ease;
}

.npn-faq-answer > p {
    overflow: hidden;
    margin: 0;
    padding: 0 76px 0 78px;
    color: rgba(218, 232, 255, .70);
    line-height: 1.72;
    transition: padding .28s ease;
}

.npn-faq-item.is-open .npn-faq-answer {
    grid-template-rows: 1fr;
}

.npn-faq-item.is-open .npn-faq-answer > p {
    padding-bottom: 22px;
}

.npn-faq-item.is-filtered-out {
    display: none;
}

.npn-faq-empty {
    display: none;
    padding: 22px;
    border-radius: 22px;
    border: 1px solid rgba(255, 201, 31, .20);
    color: #ffe99c;
    background: rgba(255, 201, 31, .08);
    font-family: 'Manrope-SemiBold';
}

.npn-faq-empty.is-visible {
    display: block;
}

.npn-faq-cta-section {
    padding: 16px 0 92px;
}

.npn-faq-cta-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    padding: clamp(24px, 4vw, 42px);
    background:
        radial-gradient(circle at 12% 0%, rgba(8, 213, 255, .14), transparent 34%),
        radial-gradient(circle at 88% 100%, rgba(255, 201, 31, .09), transparent 32%),
        linear-gradient(135deg, rgba(9, 26, 58, .84), rgba(7, 16, 39, .94));
}

.npn-faq-cta-card > div {
    max-width: 740px;
}

.npn-faq-cta-card .npn-contact-primary-link {
    flex: 0 0 auto;
}

@media (max-width: 1080px) {
    .npn-faq-hero {
        min-height: auto;
        padding: 72px 0 58px;
    }

    .npn-faq-hero-grid,
    .npn-faq-section-grid {
        grid-template-columns: 1fr;
    }

    .npn-faq-section-head {
        position: relative;
        top: auto;
    }
}

@media (max-width: 760px) {
    .npn-faq-hero {
        padding: 50px 0 42px;
    }

    .npn-faq-hero-copy h1 {
        font-size: clamp(36px, 12vw, 52px);
    }

    .npn-faq-hero-copy p {
        font-size: 15px;
    }

    .npn-faq-visual-card,
    .npn-faq-section-head,
    .npn-faq-accordion,
    .npn-faq-cta-card {
        border-radius: 26px;
    }

    .npn-faq-visual-card,
    .npn-faq-section-head {
        padding: 20px;
    }

    .npn-faq-question {
        grid-template-columns: 42px 1fr 38px;
        min-height: 74px;
        padding: 14px;
    }

    .npn-faq-question span {
        width: 42px;
        height: 42px;
        border-radius: 15px;
    }

    .npn-faq-question strong {
        font-size: 15px;
    }

    .npn-faq-question em {
        width: 38px;
        height: 38px;
    }

    .npn-faq-answer > p {
        padding-left: 14px;
        padding-right: 14px;
    }

    .npn-faq-cta-card {
        align-items: stretch;
        flex-direction: column;
        padding: 22px;
    }

    .npn-faq-cta-card .npn-contact-primary-link {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .npn-faq-hero-copy,
    .npn-faq-visual-card,
    .npn-faq-section-head,
    .npn-faq-accordion,
    .npn-faq-cta-card,
    .npn-faq-orb {
        animation: none !important;
    }
}

/* =========================================================
   FRONT NEWSROOM PAGE
========================================================= */
body.npn-newsroom-page-body {
    min-height: 100vh;
    background: #020817;
    color: #eef6ff;
}

.npn-newsroom-page-shell {
    min-height: 100vh;
    overflow: hidden;
    background:
        radial-gradient(circle at 12% 9%, rgba(8, 213, 255, 0.22), transparent 31%),
        radial-gradient(circle at 84% 16%, rgba(255, 201, 31, 0.15), transparent 28%),
        radial-gradient(circle at 52% 100%, rgba(80, 116, 255, 0.13), transparent 38%),
        linear-gradient(180deg, #07101f 0%, #050a17 44%, #020817 100%);
}

.npn-newsroom-page-main {
    position: relative;
    z-index: 1;
}

.npn-newsroom-hero {
    position: relative;
    min-height: 640px;
    display: flex;
    align-items: center;
    padding: 96px 0 70px;
    overflow: hidden;
}

.npn-newsroom-gridline {
    position: absolute;
    inset: 0;
    opacity: 0.14;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(111, 231, 255, 0.18) 1px, transparent 1px),
        linear-gradient(90deg, rgba(111, 231, 255, 0.16) 1px, transparent 1px);
    background-size: 74px 74px;
    mask-image: radial-gradient(circle at 50% 34%, #000 0%, transparent 71%);
}

.npn-newsroom-orb {
    position: absolute;
    display: block;
    border-radius: 999px;
    pointer-events: none;
    filter: blur(3px);
}

.npn-newsroom-orb-one {
    width: 380px;
    height: 380px;
    left: -150px;
    top: 84px;
    background: radial-gradient(circle, rgba(8, 213, 255, 0.30), transparent 68%);
    animation: npnContactFloat 8s ease-in-out infinite;
}

.npn-newsroom-orb-two {
    width: 520px;
    height: 520px;
    right: -190px;
    top: 18px;
    background: radial-gradient(circle, rgba(255, 201, 31, 0.20), transparent 70%);
    animation: npnContactFloat 10s ease-in-out infinite reverse;
}

.npn-newsroom-hero-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1.03fr) minmax(360px, .80fr);
    gap: 58px;
    align-items: center;
}

.npn-newsroom-hero-copy,
.npn-newsroom-visual-card,
.npn-newsroom-section-head,
.npn-newsroom-card-grid,
.npn-newsroom-cta-card {
    animation: npnContactRise .72s ease both;
}

.npn-newsroom-visual-card {
    animation-delay: .12s;
}

.npn-newsroom-hero-copy h1 {
    margin: 22px 0 20px;
    max-width: 860px;
    color: #ffffff;
    font-family: 'Manrope-Extra';
    font-size: clamp(44px, 6vw, 78px);
    line-height: .98;
    letter-spacing: -.07em;
    text-shadow: 0 0 34px rgba(8, 213, 255, .16);
}

.npn-newsroom-hero-copy p {
    max-width: 720px;
    margin: 0;
    color: rgba(222, 236, 255, .78);
    font-size: 17px;
    line-height: 1.72;
}

.npn-newsroom-visual-card {
    position: relative;
    min-height: 440px;
    padding: 28px;
    border-radius: 34px;
    border: 1px solid rgba(112, 232, 255, .24);
    background:
        radial-gradient(circle at 18% 12%, rgba(8, 213, 255, .20), transparent 38%),
        linear-gradient(180deg, rgba(24, 43, 87, .86), rgba(7, 16, 39, .94));
    box-shadow:
        0 34px 80px rgba(0, 0, 0, .42),
        inset 0 0 0 1px rgba(255, 255, 255, .04),
        inset 0 0 70px rgba(8, 213, 255, .06);
    overflow: hidden;
}

.npn-newsroom-visual-card:before {
    content: "";
    position: absolute;
    width: 240px;
    height: 240px;
    right: -82px;
    bottom: -92px;
    border-radius: 50%;
    border: 1px solid rgba(112, 232, 255, .18);
    background: radial-gradient(circle, rgba(8, 213, 255, .16), transparent 65%);
}

.npn-newsroom-visual-label {
    display: inline-flex;
    padding: 8px 12px;
    border-radius: 999px;
    color: #7df4ff;
    background: rgba(8, 213, 255, .10);
    border: 1px solid rgba(112, 232, 255, .20);
    font-family: 'Manrope-SemiBold';
    font-size: 12px;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.npn-newsroom-visual-card h2 {
    position: relative;
    z-index: 1;
    margin: 18px 0 12px;
    color: #ffffff;
    font-family: 'Manrope-Extra';
    font-size: 32px;
    line-height: 1.05;
    letter-spacing: -.045em;
}

.npn-newsroom-visual-card p {
    position: relative;
    z-index: 1;
    margin: 0;
    color: rgba(218, 232, 255, .68);
    line-height: 1.65;
}

.npn-newsroom-visual-feed {
    position: relative;
    z-index: 2;
    display: grid;
    gap: 12px;
    margin-top: 24px;
}

.npn-newsroom-visual-feed div {
    display: grid;
    grid-template-columns: 42px 1fr;
    gap: 12px;
    align-items: center;
    min-height: 76px;
    padding: 13px 14px;
    border-radius: 20px;
    border: 1px solid rgba(112, 232, 255, .13);
    background: rgba(6, 17, 42, .72);
    transition: transform .22s ease, border-color .22s ease, background .22s ease;
}

.npn-newsroom-visual-feed div:hover {
    transform: translateX(-5px);
    border-color: rgba(112, 232, 255, .36);
    background: rgba(8, 213, 255, .10);
}

.npn-newsroom-visual-feed small {
    width: 42px;
    height: 42px;
    border-radius: 15px;
    display: grid;
    place-items: center;
    color: #07162b;
    background: linear-gradient(135deg, #7df4ff, #3b82ff);
    font-family: 'Manrope-Extra';
    grid-row: span 2;
}

.npn-newsroom-visual-feed strong {
    color: #ffffff;
    font-family: 'Manrope-Bold';
    line-height: 1.32;
}

.npn-newsroom-visual-feed em {
    margin-top: -6px;
    color: rgba(218, 232, 255, .50);
    font-size: 12px;
    font-style: normal;
}

.npn-newsroom-live-badge {
    position: absolute;
    right: 22px;
    bottom: 22px;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 112px;
    height: 96px;
    border-radius: 28px;
    border: 1px solid rgba(255, 201, 31, .28);
    background: rgba(8, 18, 43, .78);
    box-shadow: 0 20px 42px rgba(0,0,0,.28), inset 0 0 32px rgba(255,201,31,.07);
}

.npn-newsroom-live-badge strong {
    color: #ffffff;
    font-family: 'Manrope-Extra';
    font-size: 32px;
    line-height: 1;
}

.npn-newsroom-live-badge span {
    margin-top: -13px;
    color: rgba(218, 232, 255, .58);
    font-size: 12px;
    text-align: center;
}

.npn-newsroom-list-section {
    position: relative;
    z-index: 2;
    padding: 8px 0 58px;
}

.npn-newsroom-section-grid {
    display: grid;
    grid-template-columns: minmax(280px, .72fr) minmax(0, 1.28fr);
    gap: 26px;
    align-items: start;
}

.npn-newsroom-section-head,
.npn-newsroom-card-grid,
.npn-newsroom-cta-card {
    position: relative;
    border-radius: 32px;
    border: 1px solid rgba(112, 232, 255, .18);
    background: linear-gradient(180deg, rgba(18, 35, 72, .82), rgba(6, 15, 36, .92));
    box-shadow: 0 32px 80px rgba(0, 0, 0, .32), inset 0 0 0 1px rgba(255,255,255,.04);
    overflow: hidden;
}

.npn-newsroom-section-head {
    position: sticky;
    top: 104px;
    padding: 28px;
}

.npn-newsroom-section-head h2,
.npn-newsroom-cta-card h2 {
    margin: 16px 0 10px;
    color: #ffffff;
    font-family: 'Manrope-Extra';
    font-size: 32px;
    line-height: 1.08;
    letter-spacing: -.045em;
}

.npn-newsroom-section-head p,
.npn-newsroom-cta-card p {
    margin: 0;
    color: rgba(218, 232, 255, .66);
    line-height: 1.65;
}

.npn-newsroom-search-box {
    display: grid;
    grid-template-columns: 22px 1fr;
    gap: 10px;
    align-items: center;
    min-height: 56px;
    margin-top: 24px;
    padding: 0 16px;
    border-radius: 18px;
    border: 1px solid rgba(112, 232, 255, .18);
    background: rgba(7, 17, 40, .78);
    color: rgba(218, 232, 255, .72);
    transition: border-color .22s ease, box-shadow .22s ease, background .22s ease;
}

.npn-newsroom-search-box:focus-within {
    border-color: rgba(112, 232, 255, .56);
    background: rgba(8, 20, 50, .94);
    box-shadow: 0 0 0 4px rgba(8, 213, 255, .10);
}

.npn-newsroom-search-box svg {
    width: 20px;
    height: 20px;
}

.npn-newsroom-search-box input {
    width: 100%;
    min-height: 52px;
    border: 0;
    outline: none;
    color: #ffffff;
    background: transparent;
    font: inherit;
}

.npn-newsroom-search-box input::placeholder {
    color: rgba(218, 232, 255, .38);
}

.npn-newsroom-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

.npn-newsroom-filters button {
    min-height: 40px;
    padding: 0 14px;
    border: 1px solid rgba(112, 232, 255, .18);
    border-radius: 999px;
    color: rgba(224, 240, 255, .74);
    background: rgba(8, 18, 43, .62);
    font-family: 'Manrope-SemiBold';
    cursor: pointer;
    transition: transform .2s ease, border-color .2s ease, background .2s ease, color .2s ease;
}

.npn-newsroom-filters button:hover,
.npn-newsroom-filters button.is-active {
    transform: translateY(-2px);
    color: #061427;
    border-color: rgba(125, 244, 255, .58);
    background: linear-gradient(135deg, #7df4ff, #22d3ee);
}

.npn-newsroom-card-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    padding: 16px;
}

.npn-newsroom-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100%;
    border-radius: 26px;
    border: 1px solid rgba(112, 232, 255, .13);
    background: rgba(8, 18, 43, .70);
    overflow: hidden;
    transition: transform .24s ease, border-color .24s ease, background .24s ease, box-shadow .24s ease;
}

.npn-newsroom-card:hover {
    transform: translateY(-6px);
    border-color: rgba(112, 232, 255, .42);
    background: rgba(8, 213, 255, .08);
    box-shadow: 0 26px 54px rgba(0,0,0,.28);
}

.npn-newsroom-card.is-featured {
    grid-column: span 2;
    display: grid;
    grid-template-columns: minmax(260px, .92fr) minmax(0, 1.08fr);
}

.npn-newsroom-card-media {
    position: relative;
    min-height: 220px;
    background:
        radial-gradient(circle at 20% 18%, rgba(125, 244, 255, .22), transparent 32%),
        radial-gradient(circle at 86% 80%, rgba(255, 201, 31, .16), transparent 28%),
        linear-gradient(135deg, rgba(15, 37, 84, .92), rgba(4, 12, 30, .94));
    overflow: hidden;
}

.npn-newsroom-card-media img {
    width: 100%;
    height: 100%;
    min-height: 220px;
    object-fit: cover;
    display: block;
    transition: transform .35s ease;
}

.npn-newsroom-card:hover .npn-newsroom-card-media img {
    transform: scale(1.04);
}

.npn-newsroom-card-media > span {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    min-height: 220px;
    color: rgba(255,255,255,.92);
    font-family: 'Manrope-Extra';
    font-size: 72px;
    letter-spacing: -.06em;
}

.npn-newsroom-card-media em {
    position: absolute;
    left: 16px;
    top: 16px;
    display: inline-flex;
    min-height: 34px;
    align-items: center;
    padding: 0 12px;
    border-radius: 999px;
    color: #061427;
    background: linear-gradient(135deg, #7df4ff, #22d3ee);
    font-style: normal;
    font-family: 'Manrope-Bold';
    font-size: 12px;
    box-shadow: 0 10px 28px rgba(8, 213, 255, .22);
}

.npn-newsroom-card-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 22px;
}

.npn-newsroom-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}

.npn-newsroom-card-meta span {
    display: inline-flex;
    min-height: 28px;
    align-items: center;
    padding: 0 10px;
    border-radius: 999px;
    color: rgba(223, 240, 255, .68);
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(112, 232, 255, .10);
    font-size: 12px;
    font-family: 'Manrope-SemiBold';
}

.npn-newsroom-card h3 {
    margin: 0;
    color: #ffffff;
    font-family: 'Manrope-Extra';
    font-size: 24px;
    line-height: 1.14;
    letter-spacing: -.04em;
}

.npn-newsroom-card p {
    margin: 14px 0 0;
    color: rgba(218, 232, 255, .68);
    line-height: 1.65;
}

.npn-newsroom-card a {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    width: fit-content;
    margin-top: auto;
    padding-top: 20px;
    color: #7df4ff;
    font-family: 'Manrope-Bold';
    text-decoration: none;
}

.npn-newsroom-card a svg {
    width: 18px;
    height: 18px;
    transition: transform .22s ease;
}

.npn-newsroom-card a:hover svg {
    transform: translateX(4px);
}

.npn-newsroom-card.is-filtered-out {
    display: none;
}

.npn-newsroom-empty {
    display: none;
    grid-column: 1 / -1;
    padding: 22px;
    border-radius: 22px;
    border: 1px solid rgba(255, 201, 31, .20);
    color: #ffe99c;
    background: rgba(255, 201, 31, .08);
    font-family: 'Manrope-SemiBold';
}

.npn-newsroom-empty.is-visible {
    display: block;
}

.npn-newsroom-cta-section {
    padding: 16px 0 92px;
}

.npn-newsroom-cta-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    padding: clamp(24px, 4vw, 42px);
    background:
        radial-gradient(circle at 12% 0%, rgba(8, 213, 255, .14), transparent 34%),
        radial-gradient(circle at 88% 100%, rgba(255, 201, 31, .10), transparent 32%),
        linear-gradient(135deg, rgba(9, 26, 58, .84), rgba(7, 16, 39, .94));
}

.npn-newsroom-cta-card > div {
    max-width: 760px;
}

.npn-newsroom-cta-card .npn-contact-primary-link {
    flex: 0 0 auto;
}

@media (max-width: 1080px) {
    .npn-newsroom-hero {
        min-height: auto;
        padding: 72px 0 58px;
    }

    .npn-newsroom-hero-grid,
    .npn-newsroom-section-grid {
        grid-template-columns: 1fr;
    }

    .npn-newsroom-section-head {
        position: relative;
        top: auto;
    }
}

@media (max-width: 760px) {
    .npn-newsroom-hero {
        padding: 50px 0 42px;
    }

    .npn-newsroom-hero-copy h1 {
        font-size: clamp(36px, 12vw, 52px);
    }

    .npn-newsroom-hero-copy p {
        font-size: 15px;
    }

    .npn-newsroom-visual-card,
    .npn-newsroom-section-head,
    .npn-newsroom-card-grid,
    .npn-newsroom-cta-card {
        border-radius: 26px;
    }

    .npn-newsroom-visual-card,
    .npn-newsroom-section-head {
        padding: 20px;
    }

    .npn-newsroom-card-grid {
        grid-template-columns: 1fr;
    }

    .npn-newsroom-card.is-featured {
        grid-column: auto;
        display: flex;
    }

    .npn-newsroom-card h3 {
        font-size: 21px;
    }

    .npn-newsroom-cta-card {
        align-items: stretch;
        flex-direction: column;
        padding: 22px;
    }

    .npn-newsroom-cta-card .npn-contact-primary-link {
        width: 100%;
    }
}

/* =========================================================
   Pricing page
========================================================= */
body.npn-pricing-page-body,
body.npn-policy-page-body {
    background: #020916;
    color: #f8fbff;
}

.npn-pricing-page-shell,
.npn-policy-page-shell {
    min-height: 100vh;
    background:
        radial-gradient(circle at 16% 8%, rgba(36, 211, 255, .16), transparent 32%),
        radial-gradient(circle at 84% 16%, rgba(255, 205, 17, .10), transparent 28%),
        linear-gradient(180deg, #030b18 0%, #061024 42%, #020916 100%);
    overflow: hidden;
}

.npn-pricing-page-main,
.npn-policy-page-main {
    padding-top: 78px;
}

.npn-pricing-hero,
.npn-policy-hero {
    position: relative;
    padding: 96px 0 68px;
    overflow: hidden;
}

.npn-pricing-gridline,
.npn-policy-gridline {
    position: absolute;
    inset: 0;
    opacity: .14;
    background-image:
        linear-gradient(rgba(123, 229, 255, .2) 1px, transparent 1px),
        linear-gradient(90deg, rgba(123, 229, 255, .2) 1px, transparent 1px);
    background-size: 70px 70px;
    mask-image: linear-gradient(180deg, transparent, #000 18%, #000 74%, transparent);
    pointer-events: none;
}

.npn-pricing-orb,
.npn-policy-orb {
    position: absolute;
    display: block;
    border-radius: 999px;
    filter: blur(1px);
    pointer-events: none;
}

.npn-pricing-orb-one,
.npn-policy-orb-one {
    width: 420px;
    height: 420px;
    left: -130px;
    top: 70px;
    background: radial-gradient(circle, rgba(44, 226, 255, .22), transparent 68%);
}

.npn-pricing-orb-two,
.npn-policy-orb-two {
    width: 520px;
    height: 520px;
    right: -190px;
    top: 10px;
    background: radial-gradient(circle, rgba(255, 204, 17, .14), transparent 66%);
}

.npn-pricing-hero-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(360px, .78fr);
    gap: 44px;
    align-items: center;
}

.npn-pricing-hero-copy,
.npn-pricing-visual-card,
.npn-pricing-section-head,
.npn-pricing-plan-card,
.npn-pricing-note-card,
.npn-policy-content-card {
    animation: npnContactRise .7s ease both;
}

.npn-pricing-hero-copy h1,
.npn-policy-hero h1 {
    margin: 18px 0 18px;
    font-size: clamp(44px, 6vw, 86px);
    line-height: .95;
    letter-spacing: -.065em;
    color: #fff;
    max-width: 880px;
    text-wrap: balance;
}

.npn-pricing-hero-copy p,
.npn-policy-hero p {
    margin: 0;
    max-width: 720px;
    color: #aebbd0;
    font-size: 18px;
    line-height: 1.74;
}

.npn-pricing-visual-card {
    position: relative;
    padding: 30px;
    border-radius: 34px;
    background: linear-gradient(145deg, rgba(26, 72, 119, .74), rgba(10, 24, 58, .96));
    border: 1px solid rgba(85, 213, 255, .24);
    box-shadow: 0 34px 90px rgba(0, 0, 0, .34), inset 0 1px 0 rgba(255, 255, 255, .08);
    overflow: hidden;
}

.npn-pricing-visual-card:before {
    content: '';
    position: absolute;
    width: 240px;
    height: 240px;
    right: -80px;
    bottom: -90px;
    border-radius: 50%;
    border: 1px solid rgba(99, 220, 255, .18);
    box-shadow: inset 0 0 55px rgba(44, 226, 255, .10);
}

.npn-pricing-visual-label {
    display: inline-flex;
    width: fit-content;
    padding: 9px 15px;
    border-radius: 999px;
    background: rgba(35, 217, 255, .14);
    border: 1px solid rgba(73, 224, 255, .28);
    color: #77edff;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.npn-pricing-visual-card h2 {
    position: relative;
    margin: 22px 0 12px;
    color: #fff;
    font-size: 34px;
    line-height: 1.12;
    letter-spacing: -.04em;
}

.npn-pricing-visual-card p {
    position: relative;
    margin: 0 0 24px;
    color: #b5c2d6;
    line-height: 1.7;
}

.npn-pricing-visual-stack {
    position: relative;
    display: grid;
    gap: 12px;
}

.npn-pricing-visual-stack div {
    display: grid;
    grid-template-columns: 54px 1fr;
    gap: 12px;
    align-items: center;
    min-height: 74px;
    padding: 14px;
    border-radius: 20px;
    background: rgba(3, 13, 35, .64);
    border: 1px solid rgba(83, 209, 255, .14);
    transition: transform .24s ease, border-color .24s ease, background .24s ease;
}

.npn-pricing-visual-stack div:hover {
    transform: translateY(-3px);
    background: rgba(7, 25, 62, .74);
    border-color: rgba(83, 209, 255, .32);
}

.npn-pricing-visual-stack small {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #74efff, #2f8cff);
    color: #06223d;
    font-weight: 950;
}

.npn-pricing-visual-stack strong,
.npn-pricing-visual-stack em {
    display: block;
}

.npn-pricing-visual-stack strong {
    color: #fff;
    font-size: 17px;
}

.npn-pricing-visual-stack em {
    margin-top: 4px;
    color: #9dafc9;
    font-style: normal;
    font-size: 13px;
}

.npn-pricing-live-badge {
    position: absolute;
    right: 28px;
    bottom: 22px;
    width: 112px;
    height: 112px;
    border-radius: 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(10, 29, 62, .88);
    border: 1px solid rgba(74, 221, 255, .18);
    box-shadow: 0 18px 55px rgba(0, 0, 0, .28), 0 0 44px rgba(38, 213, 255, .12);
}

.npn-pricing-live-badge strong {
    color: #fff;
    font-size: 32px;
    letter-spacing: -.04em;
}

.npn-pricing-live-badge span {
    margin-top: 4px;
    color: #9dafc9;
    font-size: 12px;
    text-align: center;
}

.npn-pricing-common-section,
.npn-pricing-member-section,
.npn-pricing-note-section,
.npn-policy-content-section {
    position: relative;
    padding: 36px 0 72px;
}

.npn-pricing-section-head {
    max-width: 760px;
    margin-bottom: 26px;
}

.npn-pricing-section-head h2,
.npn-pricing-note-card h2 {
    margin: 12px 0 10px;
    color: #fff;
    font-size: clamp(30px, 4vw, 54px);
    line-height: 1.05;
    letter-spacing: -.055em;
}

.npn-pricing-section-head p,
.npn-pricing-note-card p {
    margin: 0;
    color: #aebbd0;
    font-size: 16px;
    line-height: 1.72;
}

.npn-pricing-card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.npn-pricing-common-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.npn-pricing-plan-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100%;
    padding: 24px;
    border-radius: 28px;
    background: linear-gradient(180deg, rgba(20, 42, 83, .92), rgba(8, 20, 49, .96));
    border: 1px solid rgba(79, 203, 255, .18);
    box-shadow: 0 22px 55px rgba(0, 0, 0, .24), inset 0 1px 0 rgba(255, 255, 255, .06);
    overflow: hidden;
    transition: transform .24s ease, border-color .24s ease, box-shadow .24s ease;
}

.npn-pricing-plan-card:before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    background: radial-gradient(circle at 18% 0%, rgba(38, 224, 255, .18), transparent 34%);
    opacity: .75;
    pointer-events: none;
}

.npn-pricing-plan-card:hover {
    transform: translateY(-6px);
    border-color: rgba(74, 225, 255, .44);
    box-shadow: 0 30px 76px rgba(0, 0, 0, .32), 0 0 50px rgba(35, 217, 255, .10);
}

.npn-pricing-plan-card.is-highlighted {
    border-color: rgba(45, 231, 255, .58);
    box-shadow: 0 26px 72px rgba(35, 213, 255, .12), inset 0 1px 0 rgba(255, 255, 255, .10);
}

.npn-pricing-plan-card.is-common {
    background: linear-gradient(135deg, rgba(16, 69, 111, .96), rgba(9, 23, 58, .96));
}

.npn-pricing-plan-card > * {
    position: relative;
    z-index: 1;
}

.npn-pricing-plan-badge {
    width: fit-content;
    margin-bottom: 18px;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(42, 226, 255, .14);
    border: 1px solid rgba(74, 228, 255, .26);
    color: #80f2ff;
    font-size: 12px;
    font-weight: 900;
}

.npn-pricing-plan-card h3 {
    margin: 0 0 10px;
    color: #fff;
    font-size: 25px;
    line-height: 1.16;
    letter-spacing: -.035em;
}

.npn-pricing-plan-desc {
    margin: 0 0 20px;
    color: #aebbd0;
    line-height: 1.62;
}

.npn-pricing-price {
    margin: 0 0 20px;
    padding: 18px 0 20px;
    border-top: 1px solid rgba(119, 206, 255, .13);
    border-bottom: 1px solid rgba(119, 206, 255, .13);
}

.npn-pricing-price strong {
    display: block;
    color: #fff;
    font-size: 43px;
    line-height: 1;
    letter-spacing: -.06em;
}

.npn-pricing-price span {
    display: block;
    margin-top: 6px;
    color: #8fa2bf;
    font-size: 13px;
}

.npn-pricing-features {
    display: grid;
    gap: 11px;
    margin: 0 0 24px;
    padding: 0;
    list-style: none;
}

.npn-pricing-features li {
    position: relative;
    padding-left: 26px;
    color: #dce9fb;
    line-height: 1.45;
}

.npn-pricing-features li:before {
    content: '';
    position: absolute;
    left: 0;
    top: .42em;
    width: 14px;
    height: 14px;
    border-radius: 999px;
    background: linear-gradient(135deg, #7ff5ff, #2a89ff);
    box-shadow: 0 0 18px rgba(47, 217, 255, .38);
}

.npn-pricing-plan-link {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 48px;
    padding: 0 18px;
    border-radius: 999px;
    background: linear-gradient(135deg, #2ce4ef, #16aef1);
    color: #041423;
    font-weight: 950;
    text-decoration: none;
    box-shadow: 0 16px 34px rgba(34, 207, 240, .22);
}

.npn-pricing-plan-link svg {
    width: 18px;
    height: 18px;
}

.npn-pricing-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 22px;
}

.npn-pricing-tabs button {
    border: 1px solid rgba(91, 200, 255, .18);
    background: rgba(14, 32, 68, .82);
    color: #c8d7ee;
    border-radius: 999px;
    padding: 10px 16px;
    font-weight: 900;
    cursor: pointer;
    transition: background .22s ease, color .22s ease, border-color .22s ease, transform .22s ease;
}

.npn-pricing-tabs button:hover,
.npn-pricing-tabs button.is-active {
    transform: translateY(-2px);
    border-color: rgba(78, 232, 255, .48);
    background: rgba(45, 226, 255, .16);
    color: #85f6ff;
}

.npn-pricing-plan-card.is-filtered-out {
    display: none;
}

.npn-pricing-empty {
    display: none;
    grid-column: 1 / -1;
    padding: 24px;
    border-radius: 22px;
    background: rgba(9, 22, 49, .72);
    border: 1px solid rgba(90, 206, 255, .16);
    color: #aebbd0;
}

.npn-pricing-empty.is-visible {
    display: block;
}

.npn-pricing-note-card {
    display: flex;
    justify-content: space-between;
    gap: 28px;
    align-items: center;
    padding: 34px;
    border-radius: 34px;
    background: linear-gradient(135deg, rgba(19, 57, 103, .88), rgba(8, 20, 49, .95));
    border: 1px solid rgba(75, 220, 255, .22);
    box-shadow: 0 30px 80px rgba(0, 0, 0, .28);
}

.npn-pricing-note-card > div {
    max-width: 780px;
}

/* =========================================================
   Policy page
========================================================= */
.npn-policy-hero .npn-contact-container {
    position: relative;
    z-index: 1;
}

.npn-policy-content-card {
    max-width: 980px;
    margin: 0 auto;
    padding: 38px;
    border-radius: 32px;
    background: linear-gradient(180deg, rgba(17, 39, 78, .92), rgba(7, 18, 43, .96));
    border: 1px solid rgba(84, 205, 255, .18);
    color: #c9d8ee;
    box-shadow: 0 28px 82px rgba(0, 0, 0, .32), inset 0 1px 0 rgba(255, 255, 255, .06);
}

.npn-policy-content-card h2,
.npn-policy-content-card h3,
.npn-policy-content-card h4 {
    color: #fff;
    letter-spacing: -.03em;
    margin: 1.25em 0 .55em;
}

.npn-policy-content-card h2:first-child,
.npn-policy-content-card h3:first-child,
.npn-policy-content-card h4:first-child {
    margin-top: 0;
}

.npn-policy-content-card p,
.npn-policy-content-card li {
    color: #c9d8ee;
    line-height: 1.78;
}

.npn-policy-content-card a {
    color: #7deeff;
}

.npn-policy-content-card ul,
.npn-policy-content-card ol {
    padding-left: 1.35em;
}

@media (max-width: 1080px) {
    .npn-pricing-hero-grid {
        grid-template-columns: 1fr;
    }

    .npn-pricing-card-grid,
    .npn-pricing-common-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .npn-pricing-page-main,
    .npn-policy-page-main {
        padding-top: 68px;
    }

    .npn-pricing-hero,
    .npn-policy-hero {
        padding: 72px 0 42px;
    }

    .npn-pricing-hero-copy h1,
    .npn-policy-hero h1 {
        font-size: clamp(38px, 13vw, 58px);
    }

    .npn-pricing-visual-card,
    .npn-pricing-note-card,
    .npn-policy-content-card {
        border-radius: 26px;
        padding: 22px;
    }

    .npn-pricing-live-badge {
        position: relative;
        right: auto;
        bottom: auto;
        margin-top: 18px;
        width: 100%;
        height: auto;
        min-height: 86px;
    }

    .npn-pricing-card-grid,
    .npn-pricing-common-grid {
        grid-template-columns: 1fr;
    }

    .npn-pricing-note-card {
        align-items: flex-start;
        flex-direction: column;
    }

    .npn-pricing-note-card .npn-contact-primary-link {
        width: 100%;
        justify-content: center;
    }
}

/* Pricing temporary update state */
.npn-pricing-page-paused .npn-pricing-page-main {
    min-height: calc(100vh - 180px);
}
.npn-pricing-paused-section {
    position: relative;
    overflow: hidden;
    padding: clamp(90px, 12vw, 150px) 0 clamp(120px, 14vw, 190px);
    background:
        radial-gradient(circle at 20% 0%, rgba(30, 213, 225, .18), transparent 34%),
        radial-gradient(circle at 85% 20%, rgba(79, 119, 255, .16), transparent 38%),
        linear-gradient(180deg, rgba(3, 10, 24, .96), rgba(5, 12, 27, 1));
}
.npn-pricing-paused-card {
    position: relative;
    max-width: 880px;
    margin: 0 auto;
    padding: clamp(34px, 6vw, 72px);
    border: 1px solid rgba(39, 219, 232, .28);
    border-radius: 36px;
    background: linear-gradient(145deg, rgba(11, 28, 58, .92), rgba(8, 19, 43, .96));
    box-shadow: 0 36px 110px rgba(0, 0, 0, .48), inset 0 1px 0 rgba(255, 255, 255, .08);
    text-align: center;
    isolation: isolate;
}
.npn-pricing-paused-card::before {
    content: "";
    position: absolute;
    inset: 18px;
    border-radius: 28px;
    border: 1px dashed rgba(36, 221, 232, .25);
    pointer-events: none;
    z-index: -1;
}
.npn-pricing-paused-card h1 {
    margin: 18px 0 14px;
    font-size: clamp(44px, 8vw, 86px);
    line-height: .92;
    color: #fff;
    letter-spacing: -.07em;
}
.npn-pricing-paused-card > p {
    margin: 0 auto;
    max-width: 580px;
    color: rgba(224, 239, 255, .82);
    font-size: clamp(18px, 2.3vw, 24px);
    line-height: 1.55;
}
.npn-pricing-paused-content {
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, .1);
    color: rgba(221, 235, 255, .78);
}
.npn-pricing-paused-orb {
    position: absolute;
    width: 340px;
    height: 340px;
    border-radius: 999px;
    filter: blur(24px);
    opacity: .28;
    pointer-events: none;
}
.npn-pricing-paused-orb-one {
    left: -120px;
    top: 80px;
    background: #1ddde5;
}
.npn-pricing-paused-orb-two {
    right: -100px;
    bottom: 20px;
    background: #4a7cff;
}

/* Newsroom distinct editorial layout */
.npn-newsroom-page-v2 .npn-newsroom-page-main {
    background:
        radial-gradient(circle at 8% 12%, rgba(31, 218, 229, .12), transparent 32%),
        radial-gradient(circle at 93% 8%, rgba(88, 113, 255, .16), transparent 34%),
        linear-gradient(180deg, #030a16 0%, #061126 44%, #020814 100%);
}
.npn-newsroom-v2-hero {
    position: relative;
    overflow: hidden;
    padding: clamp(78px, 10vw, 128px) 0 42px;
}
.npn-newsroom-v2-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
    background-size: 84px 84px;
    mask-image: linear-gradient(180deg, #000 0%, transparent 90%);
    pointer-events: none;
}
.npn-newsroom-v2-hero-inner {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 32px;
    align-items: end;
    padding-bottom: 38px;
    border-bottom: 1px solid rgba(116, 207, 255, .18);
}
.npn-newsroom-v2-hero-copy h1 {
    max-width: 880px;
    margin: 18px 0 16px;
    color: #fff;
    font-size: clamp(52px, 8.4vw, 112px);
    line-height: .88;
    letter-spacing: -.08em;
}
.npn-newsroom-v2-hero-copy p {
    max-width: 760px;
    margin: 0;
    color: rgba(220, 235, 255, .76);
    font-size: clamp(17px, 1.8vw, 22px);
    line-height: 1.7;
}
.npn-newsroom-v2-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: flex-end;
}
.npn-newsroom-v2-orb {
    position: absolute;
    border-radius: 999px;
    pointer-events: none;
    filter: blur(20px);
    opacity: .25;
}
.npn-newsroom-v2-orb-one {
    left: -110px;
    top: 60px;
    width: 300px;
    height: 300px;
    background: #20dde7;
}
.npn-newsroom-v2-orb-two {
    right: -120px;
    top: 120px;
    width: 360px;
    height: 360px;
    background: #4a72ff;
}
.npn-newsroom-v2-feature-section {
    position: relative;
    padding: 36px 0 62px;
}
.npn-newsroom-v2-feature-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(310px, .75fr);
    gap: 24px;
    align-items: stretch;
}
.npn-newsroom-v2-lead-card,
.npn-newsroom-v2-digest,
.npn-newsroom-v2-row,
.npn-newsroom-v2-cta-card {
    border: 1px solid rgba(77, 203, 244, .2);
    background: linear-gradient(145deg, rgba(12, 32, 65, .9), rgba(7, 18, 40, .96));
    box-shadow: 0 24px 80px rgba(0, 0, 0, .32);
}
.npn-newsroom-v2-lead-card {
    display: grid;
    grid-template-columns: minmax(260px, .92fr) minmax(0, 1fr);
    overflow: hidden;
    border-radius: 34px;
}
.npn-newsroom-v2-lead-media {
    position: relative;
    min-height: 360px;
    background: radial-gradient(circle at 30% 20%, rgba(37, 223, 232, .28), transparent 38%), rgba(9, 24, 52, .82);
}
.npn-newsroom-v2-lead-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.npn-newsroom-v2-lead-media > span {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: rgba(255, 255, 255, .9);
    font-size: 110px;
    font-weight: 900;
}
.npn-newsroom-v2-lead-media em {
    position: absolute;
    left: 22px;
    top: 22px;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(4, 17, 38, .76);
    color: #6df4ff;
    border: 1px solid rgba(109, 244, 255, .35);
    font-style: normal;
    font-weight: 800;
}
.npn-newsroom-v2-lead-body {
    padding: clamp(28px, 4vw, 46px);
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.npn-newsroom-v2-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
    color: rgba(191, 211, 239, .78);
    font-size: 13px;
    font-weight: 800;
}
.npn-newsroom-v2-meta span {
    padding: 7px 11px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .08);
}
.npn-newsroom-v2-lead-body h2,
.npn-newsroom-v2-digest h2,
.npn-newsroom-v2-toolbar h2,
.npn-newsroom-v2-cta-card h2 {
    margin: 0 0 14px;
    color: #fff;
    letter-spacing: -.045em;
}
.npn-newsroom-v2-lead-body h2 {
    font-size: clamp(30px, 4.2vw, 54px);
    line-height: .98;
}
.npn-newsroom-v2-lead-body p,
.npn-newsroom-v2-digest p,
.npn-newsroom-v2-toolbar p,
.npn-newsroom-v2-row-body p,
.npn-newsroom-v2-cta-card p {
    color: rgba(218, 233, 255, .74);
    line-height: 1.72;
}
.npn-newsroom-v2-lead-body a,
.npn-newsroom-v2-row-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #30e6f0;
    font-weight: 900;
    text-decoration: none;
}
.npn-newsroom-v2-lead-body a svg,
.npn-newsroom-v2-row-link svg {
    width: 18px;
    height: 18px;
}
.npn-newsroom-v2-digest {
    position: relative;
    overflow: hidden;
    border-radius: 34px;
    padding: 30px;
}
.npn-newsroom-v2-digest::after {
    content: "";
    position: absolute;
    right: -80px;
    bottom: -80px;
    width: 220px;
    height: 220px;
    border-radius: 999px;
    border: 1px solid rgba(63, 210, 239, .24);
}
.npn-newsroom-v2-digest-list {
    display: grid;
    gap: 14px;
    margin-top: 24px;
}
.npn-newsroom-v2-digest-list div {
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: 12px;
    padding: 15px;
    border-radius: 20px;
    background: rgba(2, 11, 27, .44);
    border: 1px solid rgba(255, 255, 255, .07);
}
.npn-newsroom-v2-digest-list small {
    grid-row: span 2;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    color: #041426;
    background: linear-gradient(135deg, #6df4ff, #4ea7ff);
    font-weight: 900;
}
.npn-newsroom-v2-digest-list strong {
    color: #fff;
}
.npn-newsroom-v2-digest-list em {
    color: rgba(200, 219, 245, .64);
    font-style: normal;
    font-size: 13px;
}
.npn-newsroom-v2-stat {
    margin-top: 26px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 13px 16px;
    border-radius: 22px;
    background: rgba(29, 221, 229, .1);
    border: 1px solid rgba(29, 221, 229, .22);
}
.npn-newsroom-v2-stat strong {
    color: #fff;
    font-size: 28px;
}
.npn-newsroom-v2-stat span {
    color: rgba(218, 233, 255, .72);
}
.npn-newsroom-v2-list-section {
    padding: 24px 0 86px;
}
.npn-newsroom-v2-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(270px, 390px);
    gap: 24px;
    align-items: end;
    margin-bottom: 18px;
}
.npn-newsroom-v2-filters {
    margin-bottom: 22px;
}
.npn-newsroom-v2-stream {
    display: grid;
    gap: 16px;
}
.npn-newsroom-v2-row {
    display: grid;
    grid-template-columns: 58px 130px minmax(0, 1fr) auto;
    gap: 18px;
    align-items: center;
    border-radius: 28px;
    padding: 16px;
    transition: transform .25s ease, border-color .25s ease, background .25s ease;
}
.npn-newsroom-v2-row:hover {
    transform: translateY(-3px);
    border-color: rgba(57, 232, 240, .42);
    background: linear-gradient(145deg, rgba(14, 40, 78, .94), rgba(8, 20, 44, .98));
}
.npn-newsroom-v2-row-index {
    color: rgba(109, 244, 255, .92);
    font-weight: 900;
    font-size: 18px;
    text-align: center;
}
.npn-newsroom-v2-row-media {
    width: 130px;
    height: 94px;
    border-radius: 22px;
    overflow: hidden;
    background: rgba(255, 255, 255, .06);
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 36px;
    font-weight: 900;
}
.npn-newsroom-v2-row-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.npn-newsroom-v2-row-body h3 {
    margin: 0 0 8px;
    color: #fff;
    font-size: clamp(21px, 2.2vw, 30px);
    letter-spacing: -.035em;
}
.npn-newsroom-v2-row-body p {
    margin: 0;
}
.npn-newsroom-v2-row-link {
    width: 46px;
    height: 46px;
    border-radius: 999px;
    justify-content: center;
    background: rgba(32, 221, 230, .1);
    border: 1px solid rgba(32, 221, 230, .28);
}
.npn-newsroom-v2-cta-card {
    border-radius: 34px;
    padding: clamp(28px, 4vw, 46px);
}

/* FAQ distinct command-center layout */
.npn-faq-page-v2 .npn-faq-page-main {
    background:
        radial-gradient(circle at 50% 0%, rgba(40, 218, 231, .16), transparent 32%),
        radial-gradient(circle at 8% 40%, rgba(83, 111, 255, .14), transparent 32%),
        linear-gradient(180deg, #030a16 0%, #061126 50%, #020814 100%);
}
.npn-faq-v2-hero {
    position: relative;
    overflow: hidden;
    padding: clamp(76px, 10vw, 132px) 0 48px;
}
.npn-faq-v2-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: conic-gradient(from 180deg at 50% 0%, rgba(37, 221, 232, .12), transparent, rgba(73, 116, 255, .1), transparent);
    pointer-events: none;
}
.npn-faq-v2-hero-card {
    position: relative;
    max-width: 100%;
    margin: 0 auto;
    text-align: center;
}
.npn-faq-v2-hero-card h1 {
    margin: 18px 0 16px;
    color: #fff;
    font-size: clamp(50px, 9vw, 112px);
    line-height: .88;
}
.npn-faq-v2-hero-card p {
    max-width: 760px;
    margin: 0 auto;
    color: rgba(221, 236, 255, .76);
    font-size: clamp(17px, 1.9vw, 22px);
    line-height: 1.72;
}
.npn-faq-v2-hero-card .npn-contact-hero-actions {
    justify-content: center;
    margin-top: 28px;
}
.npn-faq-v2-quick-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-top: 46px;
}
.npn-faq-v2-quick-card {
    min-height: 130px;
    padding: 20px;
    border-radius: 28px;
    border: 1px solid rgba(96, 214, 245, .2);
    background: linear-gradient(145deg, rgba(15, 39, 76, .78), rgba(5, 15, 34, .88));
    box-shadow: 0 20px 70px rgba(0, 0, 0, .28);
}
.npn-faq-v2-quick-card span {
    display: inline-grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 15px;
    background: linear-gradient(135deg, #6df4ff, #4ea7ff);
    color: #031629;
    font-weight: 900;
    margin-bottom: 14px;
}
.npn-faq-v2-quick-card strong {
    display: block;
    color: #fff;
    line-height: 1.35;
}
.npn-faq-v2-orb {
    position: absolute;
    border-radius: 999px;
    pointer-events: none;
    filter: blur(20px);
    opacity: .25;
}
.npn-faq-v2-orb-one {
    left: -120px;
    top: 100px;
    width: 320px;
    height: 320px;
    background: #1ddde5;
}
.npn-faq-v2-orb-two {
    right: -130px;
    bottom: 40px;
    width: 360px;
    height: 360px;
    background: #4b74ff;
}
.npn-faq-v2-list-section {
    padding: 40px 0 88px;
}
.npn-faq-v2-grid {
    display: grid;
    grid-template-columns: minmax(280px, 390px) minmax(0, 1fr);
    gap: 26px;
    align-items: start;
}
.npn-faq-v2-side-card {
    position: sticky;
    top: 105px;
    padding: 28px;
    border-radius: 32px;
    background: linear-gradient(145deg, rgba(13, 35, 70, .92), rgba(6, 17, 39, .98));
    border: 1px solid rgba(86, 211, 244, .22);
    box-shadow: 0 28px 80px rgba(0, 0, 0, .34);
}
.npn-faq-v2-side-card h2,
.npn-faq-v2-head h2,
.npn-faq-v2-cta-card h2 {
    color: #fff;
    margin: 12px 0 14px;
}
.npn-faq-v2-side-card h2 {
    font-size: clamp(28px, 3vw, 38px);
    line-height: 1.02;
}
.npn-faq-v2-side-card p,
.npn-faq-v2-head p,
.npn-faq-v2-cta-card p {
    color: rgba(219, 234, 255, .74);
    line-height: 1.72;
}
.npn-faq-v2-search-box {
    margin-top: 22px;
}
.npn-faq-v2-count {
    margin-top: 22px;
    padding: 22px;
    border-radius: 24px;
    background: rgba(27, 219, 229, .1);
    border: 1px solid rgba(27, 219, 229, .22);
}
.npn-faq-v2-count strong {
    display: block;
    color: #fff;
    font-size: 48px;
    line-height: 1;
    letter-spacing: -.05em;
}
.npn-faq-v2-count span {
    color: rgba(218, 233, 255, .7);
    font-weight: 800;
}
.npn-faq-v2-content {
    min-width: 0;
}
.npn-faq-v2-head {
    margin-bottom: 20px;
    padding: 0 6px;
}
.npn-faq-v2-head h2 {
    font-size: clamp(34px, 5vw, 62px);
    line-height: .96;
}
.npn-faq-v2-accordion {
    display: grid;
    gap: 14px;
}
.npn-faq-v2-item {
    overflow: hidden;
    border-radius: 26px;
    border: 1px solid rgba(86, 211, 244, .18);
    background: rgba(8, 22, 48, .78);
    box-shadow: 0 18px 60px rgba(0, 0, 0, .24);
}
.npn-faq-v2-question {
    padding: 22px 24px;
}
.npn-faq-v2-answer p {
    color: rgba(221, 236, 255, .76);
    line-height: 1.75;
}
.npn-faq-v2-cta-card {
    border-radius: 34px;
    background: linear-gradient(135deg, rgba(17, 48, 91, .92), rgba(7, 18, 40, .98));
    border: 1px solid rgba(82, 212, 245, .24);
    box-shadow: 0 28px 86px rgba(0, 0, 0, .32);
}

@media (max-width: 1024px) {
    .npn-newsroom-v2-hero-inner,
    .npn-newsroom-v2-feature-grid,
    .npn-newsroom-v2-toolbar,
    .npn-faq-v2-grid {
        grid-template-columns: 1fr;
    }
    .npn-newsroom-v2-actions {
        justify-content: flex-start;
    }
    .npn-faq-v2-side-card {
        position: relative;
        top: auto;
    }
    .npn-faq-v2-quick-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 760px) {
    .npn-newsroom-v2-lead-card,
    .npn-newsroom-v2-row {
        grid-template-columns: 1fr;
    }
    .npn-newsroom-v2-row-index {
        text-align: left;
    }
    .npn-newsroom-v2-row-media {
        width: 100%;
        height: 180px;
    }
    .npn-newsroom-v2-row-link {
        width: auto;
        height: auto;
        padding: 13px 16px;
        justify-content: center;
    }
    .npn-faq-v2-quick-grid {
        grid-template-columns: 1fr;
    }
    .npn-pricing-paused-card {
        text-align: left;
    }
}

/* Customer realtime notifications */
.npn-customer-notification-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
}
.npn-customer-bell {
    width: 38px;
    height: 38px;
    border-radius: 999px;
    border: 1px solid rgba(103, 232, 249, .6);
    background: linear-gradient(135deg, rgba(14, 165, 233, .96), rgba(47, 94, 219, .96));
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: pointer;
    box-shadow: 0 0 24px rgba(14, 165, 233, .22);
}
.npn-customer-bell em {
    position: absolute;
    top: -7px;
    right: -7px;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: #ef4444;
    color: #fff;
    border: 2px solid #06172f;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-style: normal;
    font-weight: 900;
}
.npn-customer-notification-panel {
    position: absolute;
    right: 0;
    top: calc(100% + 12px);
    width: min(400px, calc(100vw - 32px));
    border-radius: 20px;
    border: 1px solid rgba(92, 190, 255, .32);
    background:
        radial-gradient(circle at 20% 8%, rgba(31, 205, 255, .12), transparent 32%),
        linear-gradient(180deg, rgba(9, 28, 62, .98), rgba(4, 12, 30, .98));
    box-shadow: 0 28px 70px rgba(0, 0, 0, .38), 0 0 32px rgba(0, 226, 255, .14);
    z-index: 180;
    overflow: hidden;
}
.npn-customer-notification-head {
    padding: 15px;
    border-bottom: 1px solid rgba(103, 232, 249, .14);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}
.npn-customer-notification-head strong,
.npn-customer-notification-head span {
    display: block;
}
.npn-customer-notification-head strong {
    color: #fff;
    font-size: 15px;
    margin-bottom: 3px;
}
.npn-customer-notification-head span {
    color: #9fb3d8;
    font-size: 12px;
    font-weight: 700;
}
.npn-customer-notification-head button {
    border: 1px solid rgba(103, 232, 249, .28);
    border-radius: 999px;
    background: rgba(255, 255, 255, .06);
    color: #7defff;
    padding: 8px 10px;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    white-space: nowrap;
}
.npn-customer-notification-list {
    max-height: 380px;
    overflow: auto;
    padding: 8px;
}
.npn-customer-notification-empty {
    color: #9fb3d8;
    padding: 26px 14px;
    text-align: center;
    font-weight: 700;
}
.npn-customer-notification-item {
    display: grid;
    grid-template-columns: 10px 1fr;
    gap: 12px;
    padding: 13px 12px;
    border-radius: 15px;
    border: 1px solid transparent;
    color: #fff;
    text-decoration: none;
}
.npn-customer-notification-item:hover {
    border-color: rgba(103, 232, 249, .18);
    background: rgba(255, 255, 255, .05);
}
.npn-customer-notification-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #50617e;
    margin-top: 7px;
}
.npn-customer-notification-item.is-unread .npn-customer-notification-dot {
    background: #22d3ee;
    box-shadow: 0 0 0 5px rgba(34, 211, 238, .16);
}
.npn-customer-notification-copy strong,
.npn-customer-notification-copy em,
.npn-customer-notification-copy time {
    display: block;
}
.npn-customer-notification-copy strong {
    color: #fff;
    font-size: 14px;
    margin-bottom: 4px;
}
.npn-customer-notification-copy em {
    color: #b9c6df;
    font-size: 13px;
    line-height: 1.4;
    font-style: normal;
}
.npn-customer-notification-copy time {
    color: #7d90b2;
    font-size: 12px;
    font-weight: 700;
    margin-top: 6px;
}
.npn-customer-toast {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 9999;
    width: min(380px, calc(100vw - 48px));
    padding: 15px 16px;
    border-radius: 18px;
    border: 1px solid rgba(103, 232, 249, .26);
    background: linear-gradient(180deg, rgba(9, 28, 62, .98), rgba(4, 12, 30, .98));
    box-shadow: 0 24px 70px rgba(0, 0, 0, .40), 0 0 26px rgba(0, 226, 255, .12);
    color: #fff;
    text-decoration: none;
    opacity: 0;
    transform: translateY(18px);
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease;
}
.npn-customer-toast.is-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.npn-customer-toast strong,
.npn-customer-toast span {
    display: block;
}
.npn-customer-toast strong {
    margin-bottom: 5px;
    font-size: 15px;
}
.npn-customer-toast span {
    color: #b9c6df;
    font-size: 13px;
    line-height: 1.4;
}
@media (max-width: 720px) {
    .npn-customer-notification-panel {
        right: -50px;
    }
}

/* v43 - WebSocket live chat */
.npn-contact-menu button {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    border: 0;
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
    font: inherit;
}
.npn-live-chat-widget {
    position: absolute;
    right: 0;
    bottom: calc(100% + 18px);
    width: min(380px, calc(100vw - 32px));
    height: 500px;
    max-height: calc(100vh - 130px);
    display: grid;
    grid-template-rows: auto 1fr auto;
    border: 1px solid rgba(103, 232, 249, .24);
    border-radius: 22px;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(9, 28, 62, .98), rgba(4, 12, 30, .98));
    box-shadow: 0 24px 70px rgba(0, 0, 0, .45), 0 0 30px rgba(0, 226, 255, .12);
    z-index: 2147483647 !important;
}
.npn-live-chat-widget[hidden] {
    display: none !important;
}
.npn-live-chat-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding: 15px 16px;
    border-bottom: 1px solid rgba(103, 232, 249, .14);
    background: rgba(255, 255, 255, .04);
}
.npn-live-chat-head strong,
.npn-live-chat-head span {
    display: block;
}
.npn-live-chat-head strong {
    color: #fff;
    font-size: 15px;
    margin-bottom: 3px;
}
.npn-live-chat-head span {
    color: #9fb3d8;
    font-size: 12px;
    font-weight: 700;
}
.npn-live-chat-head button {
    width: 30px;
    height: 30px;
    border: 1px solid rgba(103, 232, 249, .22);
    border-radius: 999px;
    background: rgba(255, 255, 255, .06);
    color: #fff;
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
}
.npn-live-chat-messages {
    overflow: auto;
    padding: 14px;
}
.npn-live-chat-empty {
    padding: 28px 14px;
    color: #9fb3d8;
    text-align: center;
    font-weight: 700;
}
.npn-live-chat-message {
    max-width: 82%;
    margin: 0 0 10px;
    padding: 10px 12px;
    border-radius: 15px;
    border: 1px solid rgba(103, 232, 249, .16);
    background: rgba(255, 255, 255, .05);
    color: #fff;
}
.npn-live-chat-message.is-mine {
    margin-left: auto;
    background: rgba(34, 211, 238, .16);
    border-color: rgba(34, 211, 238, .28);
}
.npn-live-chat-message strong,
.npn-live-chat-message p,
.npn-live-chat-message time {
    display: block;
    margin: 0;
}
.npn-live-chat-message strong {
    color: #7defff;
    font-size: 12px;
    margin-bottom: 4px;
}
.npn-live-chat-message p {
    color: #fff;
    font-size: 13px;
    line-height: 1.45;
}
.npn-live-chat-message time {
    color: #7d90b2;
    font-size: 11px;
    margin-top: 6px;
    font-weight: 700;
}
.npn-live-chat-form {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    padding: 12px;
    border-top: 1px solid rgba(103, 232, 249, .14);
    background: rgba(255, 255, 255, .04);
}
.npn-live-chat-form input {
    width: 100%;
    border: 1px solid rgba(103, 232, 249, .22);
    border-radius: 999px;
    background: rgba(255, 255, 255, .06);
    color: #fff;
    padding: 10px 13px;
    outline: none;
}
.npn-live-chat-form input::placeholder {
    color: #7d90b2;
}
.npn-live-chat-form button {
    border: 0;
    border-radius: 999px;
    background: #22d3ee;
    color: #071a2f;
    font-weight: 900;
    padding: 10px 14px;
    cursor: pointer;
}
@media (max-width: 720px) {
    .npn-live-chat-widget {
        right: -8px;
        width: min(360px, calc(100vw - 24px));
    }
}
.npn-contact-menu button[data-npn-live-chat-open] {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 12px 14px;
    border-radius: 16px;
    background: rgba(2, 14, 32, 0.92);
    border: 1px solid rgba(130, 230, 255, 0.34);
    color: #fff;
    text-decoration: none;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.26), 0 0 22px rgba(0, 208, 255, 0.12);
    backdrop-filter: blur(12px);
    transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease, color .22s ease;
}
.npn-contact-menu button[data-npn-live-chat-open]:hover {
    transform: translateX(-4px);
    border-color: rgba(151, 242, 255, 0.82);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.32), 0 0 26px rgba(0, 208, 255, 0.34);
    color: #9ff3ff;
}
.npn-contact-menu button[data-npn-live-chat-open] span {
    width: 38px;
    height: 38px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 32% 24%, rgba(146, 244, 255, 0.30), rgba(103, 217, 233, 0.14) 58%, rgba(103, 217, 233, 0.08));
    color: #9fefff;
}
.npn-contact-menu button[data-npn-live-chat-open] strong {
    font-size: 14px;
    font-weight: 800;
}

/* v44 - Live chat tách riêng khỏi menu liên hệ */
.npn-live-chat-float {
    position: fixed;
    right: 34px;
    bottom: 110px;
    z-index: 2147483646;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    pointer-events: none;
}
.npn-live-chat-open-btn,
.npn-live-chat-float .npn-live-chat-widget {
    pointer-events: auto;
}
.npn-live-chat-open-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 54px;
    padding: 9px 15px 9px 10px;
    border-radius: 999px;
    border: 1px solid rgba(130, 230, 255, 0.44);
    background: linear-gradient(135deg, rgba(3, 18, 43, 0.96), rgba(6, 39, 73, 0.94));
    color: #fff;
    cursor: pointer;
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.34), 0 0 26px rgba(0, 208, 255, 0.18);
    backdrop-filter: blur(12px);
    transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.npn-live-chat-open-btn:hover {
    transform: translateY(-2px);
    border-color: rgba(151, 242, 255, 0.86);
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.40), 0 0 34px rgba(0, 208, 255, 0.34);
}
.npn-live-chat-open-btn span {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    background: radial-gradient(circle at 30% 24%, rgba(146, 244, 255, 0.42), rgba(34, 211, 238, 0.18) 58%, rgba(34, 211, 238, 0.10));
    color: #9fefff;
    border: 1px solid rgba(130, 230, 255, 0.18);
}
.npn-live-chat-open-btn strong {
    font-size: 14px;
    line-height: 1;
    font-weight: 900;
    white-space: nowrap;
}
.npn-live-chat-float .npn-live-chat-widget {
    right: 0;
    bottom: calc(100% + 14px);
}
body.npn-live-chat-open .npn-live-chat-open-btn {
    opacity: 0;
    transform: translateY(8px) scale(.92);
    pointer-events: none;
}
@media (max-width: 720px) {
    .npn-live-chat-float {
        right: 14px;
        bottom: 78px;
        z-index: 2147483646;
    }
    .npn-live-chat-open-btn {
        min-height: 48px;
        padding: 8px 12px 8px 8px;
    }
    .npn-live-chat-open-btn span {
        width: 32px;
        height: 32px;
    }
    .npn-live-chat-float .npn-live-chat-widget {
        right: -4px;
        bottom: calc(100% + 12px);
        width: min(360px, calc(100vw - 24px));
    }
}

/* v46 - trạng thái đã xem và typing trong live chat */
.npn-live-chat-read-status {
    display: inline-block;
    margin-left: 8px;
    color: #9fefff;
    font-weight: 800;
}
.npn-live-chat-typing {
    padding: 8px 14px 0;
    color: #9fefff;
    font-size: 12px;
    font-weight: 800;
}
.npn-live-chat-typing::after {
    content: '...';
    display: inline-block;
    width: 18px;
    overflow: hidden;
    vertical-align: bottom;
    animation: npnChatDots 1.2s steps(4, end) infinite;
}
@keyframes npnChatDots {
    from { width: 0; }
    to { width: 18px; }
}

/* v47 - DIY Studio embedded iframe modal */
body.npn-diy-iframe-open {
    overflow: hidden;
}
body.npn-diy-iframe-open .npn-live-chat-float {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
.npn-diy-iframe-modal {
    position: fixed;
    inset: 0;
    z-index: 2147483645;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 8px;
}
.npn-diy-iframe-modal.is-open {
    display: flex;
}
.npn-diy-iframe-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(1, 8, 20, 0.82);
    backdrop-filter: blur(8px);
}
.npn-diy-iframe-dialog {
    position: relative;
    width: calc(100vw - 16px);
    max-width: 1840px;
    height: calc(100dvh - 16px);
    max-height: 1120px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid rgba(148, 225, 255, 0.34);
    border-radius: 18px;
    background: #061225;
    box-shadow: 0 28px 90px rgba(0, 0, 0, 0.58);
}
.npn-diy-iframe-header {
    min-height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 12px 16px 12px 20px;
    border-bottom: 1px solid rgba(148, 225, 255, 0.18);
    background: linear-gradient(135deg, rgba(7, 28, 54, 0.98), rgba(4, 17, 36, 0.98));
    color: #fff;
}
.npn-diy-iframe-header > div:first-child {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.npn-diy-iframe-header strong {
    overflow: hidden;
    font-size: 16px;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.npn-diy-iframe-header span {
    color: rgba(220, 242, 255, 0.7);
    font-size: 12px;
}
.npn-diy-iframe-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
}
.npn-diy-iframe-actions a,
.npn-diy-iframe-actions button {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(148, 225, 255, 0.28);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.07);
    color: #fff;
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
}
.npn-diy-iframe-actions a {
    padding: 0 14px;
}
.npn-diy-iframe-actions button {
    width: 40px;
    padding: 0;
    font-size: 25px;
    line-height: 1;
}
.npn-diy-iframe-actions a:hover,
.npn-diy-iframe-actions button:hover {
    border-color: rgba(158, 238, 255, 0.72);
    background: rgba(74, 211, 255, 0.16);
}
.npn-diy-iframe-dialog iframe {
    width: 100%;
    height: 100%;
    min-height: 0;
    flex: 1 1 auto;
    display: block;
    border: 0;
    background: #fff;
}
.npn-diy-iframe-loading {
    position: absolute;
    inset: 64px 0 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f5f8fc;
    color: #18314d;
    font-weight: 800;
}
.npn-diy-iframe-loading[hidden] {
    display: none;
}
@media (max-width: 720px) {
    .npn-diy-iframe-modal {
        padding: 0;
    }
    .npn-diy-iframe-dialog {
        width: 100vw;
        height: 100dvh;
        max-height: none;
        border: 0;
        border-radius: 0;
    }
    .npn-diy-iframe-header {
        min-height: 58px;
        padding: 10px 10px 10px 14px;
    }
    .npn-diy-iframe-header span,
    .npn-diy-iframe-actions a {
        display: none;
    }
    .npn-diy-iframe-loading {
        inset: 58px 0 0;
    }
}

/* =========================================================
   FAQ SIMPLE BILINGUAL LAYOUT - WEBSITE THEME
========================================================= */
body.npn-faq-simple-body {
    min-height: 100vh;
    background: #020817;
    color: #eef6ff;
}

.npn-faq-simple-shell {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    background:
        radial-gradient(circle at 14% 8%, rgba(59, 130, 246, 0.20), transparent 30%),
        radial-gradient(circle at 88% 18%, rgba(8, 213, 255, 0.14), transparent 28%),
        linear-gradient(180deg, #08101f 0%, #060b18 100%);
}

.npn-faq-simple-shell::before {
    content: "";
    position: absolute;
    inset: 73px 0 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(126, 243, 255, 0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(126, 243, 255, 0.025) 1px, transparent 1px);
    background-size: 72px 72px;
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.74), transparent 84%);
}

.npn-faq-simple-main {
    position: relative;
    z-index: 1;
    min-height: calc(100vh - 190px);
    padding: clamp(62px, 8vw, 104px) 20px clamp(86px, 10vw, 128px);
}

.npn-faq-simple-container {
    width: min(960px, 100%);
    margin: 0 auto;
}

.npn-faq-simple-header {
    margin-bottom: 38px;
    text-align: center;
}

.npn-faq-language-switch {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 26px;
    padding: 5px;
    border: 1px solid rgba(112, 232, 255, 0.22);
    border-radius: 999px;
    background: rgba(5, 16, 45, 0.72);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.025),
        0 18px 42px rgba(0, 0, 0, 0.28),
        0 0 26px rgba(8, 213, 255, 0.08);
    backdrop-filter: blur(16px);
}

.npn-faq-language-switch a {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 17px;
    border: 1px solid transparent;
    border-radius: 999px;
    color: rgba(218, 232, 255, 0.68);
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
    transition:
        color .22s ease,
        background .22s ease,
        border-color .22s ease,
        box-shadow .22s ease,
        transform .22s ease;
}

.npn-faq-language-switch a:hover {
    color: #76f0ff;
    background: rgba(8, 213, 255, 0.08);
}

.npn-faq-language-switch a[aria-current="page"] {
    color: #ffffff;
    border-color: rgba(126, 243, 255, 0.48);
    background:
        radial-gradient(circle at 50% 0%, rgba(126, 243, 255, 0.28), transparent 64%),
        linear-gradient(180deg, rgba(55, 151, 255, 0.96), rgba(18, 91, 210, 0.92));
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.08),
        0 0 18px rgba(0, 226, 255, 0.28),
        0 8px 20px rgba(0, 0, 0, 0.22);
    text-shadow: 0 0 12px rgba(112, 239, 255, 0.42);
}

.npn-faq-simple-header h1 {
    max-width: 820px;
    margin: 0 auto;
    font-family: 'Manrope-Extra', 'Manrope', sans-serif;
    font-size: clamp(38px, 5.4vw, 62px);
    line-height: 1.02;
    letter-spacing: -0.055em;
    background: linear-gradient(
        90deg,
        #52d8ff 0%,
        #7ef3ff 24%,
        #6aa7ff 54%,
        #9aa7ff 78%,
        #ffffff 100%
    );
    background-size: 180% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    text-shadow:
        0 0 24px rgba(82, 216, 255, 0.20),
        0 0 50px rgba(8, 213, 255, 0.08);
}

.npn-faq-simple-header p {
    max-width: 680px;
    margin: 18px auto 0;
    color: rgba(218, 232, 255, 0.68);
    font-size: 16px;
    line-height: 1.72;
}

.npn-faq-simple-list.npn-faq-accordion {
    display: grid;
    gap: 14px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
    animation: none;
}

.npn-faq-simple-list .npn-faq-item {
    position: relative;
    border: 1px solid rgba(112, 232, 255, 0.14);
    border-radius: 22px;
    background:
        radial-gradient(circle at 0% 0%, rgba(8, 213, 255, 0.065), transparent 34%),
        linear-gradient(145deg, rgba(14, 31, 64, 0.88), rgba(7, 17, 39, 0.95));
    box-shadow:
        0 20px 54px rgba(0, 0, 0, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.035);
    overflow: hidden;
    transition:
        transform .22s ease,
        border-color .22s ease,
        background .22s ease,
        box-shadow .22s ease;
}

.npn-faq-simple-list .npn-faq-item:hover {
    transform: translateY(-2px);
    border-color: rgba(112, 232, 255, 0.32);
    box-shadow:
        0 24px 62px rgba(0, 0, 0, 0.30),
        0 0 24px rgba(0, 213, 255, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.npn-faq-simple-list .npn-faq-item.is-open {
    border-color: rgba(112, 232, 255, 0.44);
    background:
        radial-gradient(circle at 0% 0%, rgba(8, 213, 255, 0.12), transparent 38%),
        linear-gradient(145deg, rgba(16, 40, 80, 0.94), rgba(7, 19, 44, 0.98));
    box-shadow:
        0 26px 68px rgba(0, 0, 0, 0.34),
        0 0 28px rgba(0, 213, 255, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.055);
}

.npn-faq-simple-list .npn-faq-question {
    min-height: 82px;
    grid-template-columns: 44px minmax(0, 1fr) 40px;
    gap: 16px;
    padding: 18px 20px;
    color: #ffffff;
}

.npn-faq-simple-list .npn-faq-question span {
    width: 44px;
    height: 44px;
    border: 1px solid rgba(126, 243, 255, 0.42);
    border-radius: 15px;
    color: #06162b;
    background: linear-gradient(135deg, #7df4ff, #4f8dff);
    box-shadow:
        0 0 22px rgba(8, 213, 255, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.45);
    font-family: 'Manrope-Extra', 'Manrope', sans-serif;
    font-size: 13px;
}

.npn-faq-simple-list .npn-faq-question strong {
    color: #ffffff;
    font-family: 'Manrope-Bold', 'Manrope', sans-serif;
    font-size: 16px;
    line-height: 1.48;
}

.npn-faq-simple-list .npn-faq-question em {
    width: 40px;
    height: 40px;
    border: 1px solid rgba(112, 232, 255, 0.22);
    border-radius: 14px;
    background: rgba(5, 16, 42, 0.72);
    box-shadow: inset 0 0 18px rgba(8, 213, 255, 0.045);
}

.npn-faq-simple-list .npn-faq-question em::before,
.npn-faq-simple-list .npn-faq-question em::after {
    width: 15px;
    background: #dffaff;
    box-shadow: 0 0 8px rgba(112, 239, 255, 0.38);
}

.npn-faq-simple-list .npn-faq-item.is-open .npn-faq-question em {
    border-color: rgba(126, 243, 255, 0.48);
    background: rgba(8, 213, 255, 0.10);
    box-shadow: 0 0 18px rgba(8, 213, 255, 0.10);
}

.npn-faq-simple-list .npn-faq-answer {
    position: relative;
    border-top: 1px solid transparent;
    background: transparent;
    box-shadow: none;
    transition:
        grid-template-rows .28s ease,
        border-color .28s ease,
        background .28s ease,
        box-shadow .28s ease;
}

.npn-faq-simple-list .npn-faq-answer > p {
    position: relative;
    padding: 0 76px 0 80px;
    color: rgba(235, 247, 255, 0.78);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.82;
    text-shadow: 0 1px 12px rgba(126, 243, 255, 0.05);
}

.npn-faq-simple-list .npn-faq-item.is-open .npn-faq-answer {
    border-top-color: rgba(126, 243, 255, 0.24);
    background:
        linear-gradient(90deg, rgba(27, 102, 176, 0.20), rgba(8, 213, 255, 0.08) 42%, rgba(8, 213, 255, 0.025)),
        rgba(5, 17, 38, 0.62);
    box-shadow:
        inset 4px 0 0 rgba(97, 229, 255, 0.92),
        inset 0 14px 34px rgba(8, 213, 255, 0.035),
        0 -1px 0 rgba(255, 255, 255, 0.025);
}

.npn-faq-simple-list .npn-faq-item.is-open .npn-faq-answer > p {
    padding-top: 22px;
    padding-bottom: 26px;
    color: #f4fbff;
}

.npn-faq-simple-empty {
    padding: 26px;
    border: 1px solid rgba(112, 232, 255, 0.18);
    border-radius: 22px;
    background: linear-gradient(145deg, rgba(14, 31, 64, 0.88), rgba(7, 17, 39, 0.95));
    color: rgba(218, 232, 255, 0.68);
    text-align: center;
    box-shadow: 0 20px 54px rgba(0, 0, 0, 0.24);
}

@media (max-width: 640px) {
    .npn-faq-simple-main {
        min-height: 0;
        padding: 46px 14px 78px;
    }

    .npn-faq-simple-header {
        margin-bottom: 28px;
    }

    .npn-faq-language-switch {
        margin-bottom: 22px;
    }

    .npn-faq-language-switch a {
        min-height: 38px;
        padding: 0 14px;
        font-size: 13px;
    }

    .npn-faq-simple-header h1 {
        font-size: clamp(34px, 11vw, 46px);
    }

    .npn-faq-simple-header p {
        font-size: 15px;
    }

    .npn-faq-simple-list {
        gap: 11px;
    }

    .npn-faq-simple-list .npn-faq-item {
        border-radius: 18px;
    }

    .npn-faq-simple-list .npn-faq-question {
        min-height: 72px;
        grid-template-columns: 38px minmax(0, 1fr) 36px;
        gap: 11px;
        padding: 15px;
    }

    .npn-faq-simple-list .npn-faq-question span {
        width: 38px;
        height: 38px;
        border-radius: 12px;
    }

    .npn-faq-simple-list .npn-faq-question strong {
        font-size: 15px;
    }

    .npn-faq-simple-list .npn-faq-question em {
        width: 36px;
        height: 36px;
        border-radius: 12px;
    }

    .npn-faq-simple-list .npn-faq-answer > p {
        padding-left: 20px;
        padding-right: 20px;
        font-size: 14.5px;
    }

    .npn-faq-simple-list .npn-faq-item.is-open .npn-faq-answer > p {
        padding-top: 18px;
        padding-bottom: 21px;
    }
}

/* =========================================================
   FAQ PREMIUM TECH — Linear × Vercel direction
========================================================= */
body.npn-faq-premium-body {
    min-height: 100vh;
    background: #020713;
    color: #eff7ff;
}

.npn-faq-premium-shell {
    min-height: 100vh;
    background: #020713;
}

.npn-faq-premium-main {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: clamp(58px, 7vw, 92px) 20px clamp(84px, 9vw, 124px);
    background:
        linear-gradient(rgba(93, 220, 255, .025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(93, 220, 255, .025) 1px, transparent 1px),
        radial-gradient(circle at 50% -8%, rgba(35, 203, 255, .17), transparent 35%),
        radial-gradient(circle at 90% 26%, rgba(65, 91, 255, .13), transparent 28%),
        linear-gradient(180deg, #071020 0%, #030916 55%, #020713 100%);
    background-size: 72px 72px, 72px 72px, auto, auto, auto;
}

.npn-faq-premium-main::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(2, 7, 19, 0) 0%, rgba(2, 7, 19, .48) 76%, #020713 100%);
}

.npn-faq-premium-glow {
    position: absolute;
    z-index: -1;
    border-radius: 999px;
    filter: blur(70px);
    pointer-events: none;
    opacity: .24;
}

.npn-faq-premium-glow-one {
    width: 360px;
    height: 360px;
    top: 190px;
    left: -210px;
    background: #0bdcf3;
}

.npn-faq-premium-glow-two {
    width: 420px;
    height: 420px;
    right: -250px;
    bottom: 190px;
    background: #355cff;
}

.npn-faq-premium-container {
    width: min(1240px, 100%);
    margin: 0 auto;
}

.npn-faq-premium-hero {
    max-width: 980px;
    margin: 0 auto clamp(54px, 7vw, 82px);
    text-align: center;
}

.npn-faq-premium-hero-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 30px;
}

.npn-faq-premium-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: rgba(139, 237, 255, .86);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .18em;
}

.npn-faq-premium-eyebrow::before {
    content: "";
    width: 34px;
    height: 1px;
    background: linear-gradient(90deg, transparent, #65eaff);
    box-shadow: 0 0 10px rgba(101, 234, 255, .72);
}

.npn-faq-premium-language {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px;
    border: 1px solid rgba(126, 222, 255, .17);
    border-radius: 12px;
    background: rgba(6, 18, 41, .68);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035), 0 12px 34px rgba(0, 0, 0, .26);
    backdrop-filter: blur(18px);
}

.npn-faq-premium-language a {
    min-width: 44px;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: 9px;
    color: rgba(218, 234, 255, .55);
    font-size: 12px;
    font-weight: 900;
    text-decoration: none;
    transition: color .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
}

.npn-faq-premium-language a:hover {
    color: #dffbff;
    background: rgba(65, 209, 255, .08);
}

.npn-faq-premium-language a[aria-current="page"] {
    color: #fff;
    border-color: rgba(113, 229, 255, .34);
    background: linear-gradient(180deg, rgba(35, 170, 247, .95), rgba(27, 91, 211, .92));
    box-shadow: 0 0 20px rgba(38, 204, 255, .22), inset 0 1px 0 rgba(255, 255, 255, .16);
}

.npn-faq-premium-title-wrap h1 {
    max-width: 940px;
    margin: 0 auto;
    color: #fff;
    font-family: 'Manrope-Extra', 'Manrope', sans-serif;
    font-size: clamp(46px, 7.1vw, 86px);
    line-height: .98;
    letter-spacing: -.065em;
    text-wrap: balance;
    text-shadow: 0 14px 50px rgba(0, 0, 0, .34);
}

.npn-faq-premium-title-wrap h1::after {
    content: ".";
    color: #5ce8ff;
    text-shadow: 0 0 24px rgba(92, 232, 255, .5);
}

.npn-faq-premium-title-wrap p {
    max-width: 720px;
    margin: 22px auto 0;
    color: rgba(211, 227, 248, .68);
    font-size: clamp(15px, 1.5vw, 18px);
    line-height: 1.78;
    text-wrap: balance;
}

.npn-faq-premium-search {
    position: relative;
    max-width: 760px;
    min-height: 64px;
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 36px auto 0;
    padding: 0 16px 0 20px;
    border: 1px solid rgba(111, 220, 255, .22);
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(16, 35, 68, .82), rgba(7, 18, 40, .92));
    box-shadow:
        0 28px 70px rgba(0, 0, 0, .30),
        0 0 34px rgba(27, 213, 255, .055),
        inset 0 1px 0 rgba(255, 255, 255, .045);
    backdrop-filter: blur(20px);
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.npn-faq-premium-search:focus-within {
    transform: translateY(-2px);
    border-color: rgba(98, 232, 255, .52);
    box-shadow:
        0 30px 80px rgba(0, 0, 0, .34),
        0 0 38px rgba(27, 213, 255, .13),
        inset 0 1px 0 rgba(255, 255, 255, .065);
}

.npn-faq-premium-search svg {
    width: 21px;
    height: 21px;
    flex: 0 0 auto;
    fill: none;
    stroke: #72e8ff;
    stroke-width: 1.8;
    stroke-linecap: round;
}

.npn-faq-premium-search input {
    min-width: 0;
    width: 100%;
    height: 62px;
    border: 0;
    outline: 0;
    background: transparent;
    color: #fff;
    font: inherit;
    font-size: 15px;
    font-weight: 700;
}

.npn-faq-premium-search input::placeholder {
    color: rgba(211, 227, 248, .42);
}

.npn-faq-premium-search kbd {
    min-width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border: 1px solid rgba(141, 221, 255, .18);
    border-radius: 8px;
    background: rgba(255, 255, 255, .045);
    color: rgba(222, 240, 255, .6);
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .28);
}

.npn-faq-premium-layout {
    display: grid;
    grid-template-columns: minmax(235px, 286px) minmax(0, 1fr);
    gap: clamp(24px, 3vw, 38px);
    align-items: start;
}

.npn-faq-premium-sidebar {
    position: sticky;
    top: 100px;
    padding: 22px;
    border: 1px solid rgba(119, 220, 255, .14);
    border-radius: 24px;
    background: linear-gradient(155deg, rgba(13, 30, 61, .78), rgba(5, 14, 33, .9));
    box-shadow: 0 24px 70px rgba(0, 0, 0, .25), inset 0 1px 0 rgba(255, 255, 255, .035);
    backdrop-filter: blur(18px);
}

.npn-faq-premium-sidebar-head {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 13px;
    align-items: start;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(123, 219, 255, .1);
}

.npn-faq-premium-sidebar-head > span {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(94, 224, 255, .22);
    border-radius: 12px;
    background: rgba(45, 205, 255, .08);
}

.npn-faq-premium-sidebar-head svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: #70eaff;
    stroke-width: 1.8;
    stroke-linecap: round;
}

.npn-faq-premium-sidebar-head h2 {
    margin: 1px 0 5px;
    color: #fff;
    font-size: 16px;
    line-height: 1.3;
}

.npn-faq-premium-sidebar-head p {
    margin: 0;
    color: rgba(207, 226, 249, .5);
    font-size: 12px;
    line-height: 1.55;
}

.npn-faq-premium-categories {
    display: grid;
    gap: 7px;
    margin-top: 16px;
}

.npn-faq-premium-categories button {
    width: 100%;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 11px 0 14px;
    border: 1px solid transparent;
    border-radius: 13px;
    background: transparent;
    color: rgba(213, 231, 252, .58);
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    text-align: left;
    cursor: pointer;
    transition: color .2s ease, border-color .2s ease, background .2s ease, transform .2s ease;
}

.npn-faq-premium-categories button:hover {
    transform: translateX(2px);
    color: #fff;
    background: rgba(68, 209, 255, .055);
}

.npn-faq-premium-categories button strong {
    min-width: 27px;
    height: 27px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: rgba(255, 255, 255, .045);
    color: rgba(214, 234, 255, .55);
    font-size: 11px;
}

.npn-faq-premium-categories button.is-active {
    border-color: rgba(99, 225, 255, .21);
    background: linear-gradient(90deg, rgba(25, 182, 237, .16), rgba(37, 87, 214, .08));
    color: #fff;
    box-shadow: inset 3px 0 0 #5ee9ff, 0 0 22px rgba(36, 205, 255, .06);
}

.npn-faq-premium-categories button.is-active strong {
    background: linear-gradient(135deg, #62eaff, #4a8cff);
    color: #04142a;
    box-shadow: 0 0 14px rgba(59, 210, 255, .22);
}

.npn-faq-premium-content {
    min-width: 0;
}

.npn-faq-premium-content-head {
    min-height: 54px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 16px;
    padding: 0 4px;
}

.npn-faq-premium-content-head > div {
    display: flex;
    align-items: center;
    gap: 12px;
}

.npn-faq-premium-section-mark {
    width: 4px;
    height: 26px;
    border-radius: 999px;
    background: linear-gradient(180deg, #73f0ff, #3b82f6);
    box-shadow: 0 0 16px rgba(84, 228, 255, .4);
}

.npn-faq-premium-content-head h2 {
    margin: 0;
    color: #fff;
    font-size: clamp(22px, 2.3vw, 30px);
    letter-spacing: -.035em;
}

.npn-faq-premium-result-meta {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    color: rgba(207, 226, 249, .45);
    font-size: 12px;
    font-weight: 800;
}

.npn-faq-premium-result-meta strong {
    color: #7eeeff;
    font-size: 15px;
}

.npn-faq-premium-list.npn-faq-accordion {
    display: grid;
    gap: 12px;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
}

.npn-faq-premium-item {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(116, 211, 250, .12);
    border-radius: 19px;
    background: linear-gradient(145deg, rgba(12, 27, 55, .82), rgba(5, 14, 32, .93));
    box-shadow: 0 18px 52px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255, 255, 255, .025);
    transition: border-color .22s ease, background .22s ease, box-shadow .22s ease, transform .22s ease;
}

.npn-faq-premium-item::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: linear-gradient(180deg, #6ff1ff, #387dff);
    box-shadow: 0 0 18px rgba(87, 229, 255, .55);
    opacity: 0;
    transition: opacity .22s ease;
}

.npn-faq-premium-item:hover {
    transform: translateY(-1px);
    border-color: rgba(108, 224, 255, .26);
    box-shadow: 0 22px 62px rgba(0, 0, 0, .28), 0 0 24px rgba(37, 213, 255, .045);
}

.npn-faq-premium-item.is-open {
    border-color: rgba(104, 229, 255, .34);
    background: linear-gradient(145deg, rgba(15, 38, 75, .92), rgba(6, 18, 41, .98));
    box-shadow: 0 26px 72px rgba(0, 0, 0, .32), 0 0 32px rgba(41, 215, 255, .08), inset 0 1px 0 rgba(255, 255, 255, .04);
}

.npn-faq-premium-item.is-open::before {
    opacity: 1;
}

.npn-faq-premium-question {
    width: 100%;
    min-height: 82px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 38px;
    gap: 20px;
    align-items: center;
    padding: 18px 20px 18px 24px;
    border: 0;
    background: transparent;
    color: #fff;
    text-align: left;
    cursor: pointer;
}

.npn-faq-premium-question-copy {
    min-width: 0;
    display: block;
    width: auto;
    height: auto;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.npn-faq-premium-question-copy small {
    display: block;
    margin-bottom: 6px;
    color: #63dff7;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.npn-faq-premium-question-copy strong {
    display: block;
    color: #f7fbff;
    font-family: 'Manrope-Bold', 'Manrope', sans-serif;
    font-size: 15.5px;
    line-height: 1.48;
    letter-spacing: -.015em;
}

.npn-faq-premium-question em {
    position: relative;
    width: 38px;
    height: 38px;
    display: block;
    border: 1px solid rgba(118, 220, 255, .17);
    border-radius: 12px;
    background: rgba(255, 255, 255, .025);
    transition: transform .24s ease, border-color .24s ease, background .24s ease, box-shadow .24s ease;
}

.npn-faq-premium-question em::before,
.npn-faq-premium-question em::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 13px;
    height: 1.5px;
    border-radius: 999px;
    background: #dffbff;
    box-shadow: 0 0 8px rgba(100, 230, 255, .3);
    transform: translate(-50%, -50%);
}

.npn-faq-premium-question em::after {
    transform: translate(-50%, -50%) rotate(90deg);
}

.npn-faq-premium-item.is-open .npn-faq-premium-question em {
    transform: rotate(180deg);
    border-color: rgba(99, 230, 255, .42);
    background: rgba(52, 210, 255, .09);
    box-shadow: 0 0 18px rgba(45, 218, 255, .12);
}

.npn-faq-premium-item.is-open .npn-faq-premium-question em::after {
    opacity: 0;
}

.npn-faq-premium-answer {
    display: grid;
    grid-template-rows: 0fr;
    border-top: 1px solid transparent;
    background: transparent;
    transition: grid-template-rows .3s ease, border-color .3s ease, background .3s ease;
}

.npn-faq-premium-answer > p {
    min-height: 0;
    overflow: hidden;
    margin: 0;
    padding: 0 78px 0 24px;
    color: rgba(224, 240, 255, .78);
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.82;
    transition: padding .3s ease, color .3s ease;
}

.npn-faq-premium-item.is-open .npn-faq-premium-answer {
    grid-template-rows: 1fr;
    border-top-color: rgba(107, 225, 255, .14);
    background:
        linear-gradient(90deg, rgba(33, 153, 219, .12), transparent 56%),
        rgba(5, 16, 37, .55);
}

.npn-faq-premium-item.is-open .npn-faq-premium-answer > p {
    padding-top: 20px;
    padding-bottom: 24px;
    color: #ecf8ff;
}

.npn-faq-premium-empty {
    min-height: 180px;
    display: none;
    place-items: center;
    align-content: center;
    gap: 12px;
    padding: 28px;
    border: 1px dashed rgba(115, 219, 255, .2);
    border-radius: 20px;
    background: rgba(8, 21, 45, .56);
    color: rgba(210, 231, 253, .56);
    text-align: center;
}

.npn-faq-premium-empty.is-visible,
.npn-faq-premium-empty:not([hidden]) {
    display: grid;
}

.npn-faq-premium-empty > span {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(112, 225, 255, .22);
    border-radius: 14px;
    color: #72e9ff;
    background: rgba(55, 211, 255, .07);
    font-size: 18px;
    font-weight: 900;
}

.npn-faq-premium-empty p {
    max-width: 460px;
    margin: 0;
    line-height: 1.7;
}

.npn-faq-premium-cta {
    position: relative;
    display: grid;
    grid-template-columns: 62px minmax(0, 1fr) auto;
    gap: 22px;
    align-items: center;
    margin-top: clamp(54px, 7vw, 84px);
    padding: clamp(26px, 4vw, 42px);
    overflow: hidden;
    border: 1px solid rgba(111, 226, 255, .21);
    border-radius: 28px;
    background:
        radial-gradient(circle at 12% 0%, rgba(62, 218, 255, .16), transparent 34%),
        linear-gradient(125deg, rgba(18, 48, 89, .92), rgba(7, 20, 45, .98));
    box-shadow: 0 30px 86px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .045);
}

.npn-faq-premium-cta::after {
    content: "";
    position: absolute;
    width: 230px;
    height: 230px;
    right: -90px;
    top: -130px;
    border-radius: 999px;
    background: rgba(55, 108, 255, .22);
    filter: blur(36px);
    pointer-events: none;
}

.npn-faq-premium-cta-icon {
    width: 62px;
    height: 62px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(117, 235, 255, .34);
    border-radius: 19px;
    background: linear-gradient(145deg, rgba(64, 217, 255, .18), rgba(61, 99, 255, .12));
    box-shadow: 0 0 28px rgba(44, 211, 255, .1), inset 0 1px 0 rgba(255, 255, 255, .08);
}

.npn-faq-premium-cta-icon svg {
    width: 28px;
    height: 28px;
    fill: none;
    stroke: #78efff;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.npn-faq-premium-cta-copy {
    min-width: 0;
}

.npn-faq-premium-cta-copy > span {
    display: block;
    margin-bottom: 6px;
    color: #6ceaff;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .16em;
}

.npn-faq-premium-cta-copy h2 {
    margin: 0;
    color: #fff;
    font-size: clamp(22px, 2.6vw, 34px);
    line-height: 1.2;
    letter-spacing: -.04em;
}

.npn-faq-premium-cta-copy p {
    max-width: 660px;
    margin: 8px 0 0;
    color: rgba(211, 230, 252, .6);
    font-size: 14px;
    line-height: 1.7;
}

.npn-faq-premium-cta-button {
    position: relative;
    z-index: 1;
    min-height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0 20px;
    border: 1px solid rgba(126, 239, 255, .42);
    border-radius: 14px;
    background: linear-gradient(135deg, #64eaff, #3d83f6);
    color: #04142a;
    font-size: 13px;
    font-weight: 900;
    text-decoration: none;
    box-shadow: 0 12px 30px rgba(37, 174, 255, .2), inset 0 1px 0 rgba(255, 255, 255, .42);
    transition: transform .2s ease, box-shadow .2s ease;
}

.npn-faq-premium-cta-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 17px 38px rgba(37, 174, 255, .28), 0 0 24px rgba(70, 218, 255, .14), inset 0 1px 0 rgba(255, 255, 255, .5);
}

.npn-faq-premium-cta-button svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

@media (max-width: 900px) {
    .npn-faq-premium-layout {
        grid-template-columns: 1fr;
    }

    .npn-faq-premium-sidebar {
        position: static;
    }

    .npn-faq-premium-sidebar-head {
        grid-template-columns: 40px minmax(0, 1fr);
    }

    .npn-faq-premium-categories {
        display: flex;
        gap: 8px;
        overflow-x: auto;
        padding-bottom: 3px;
        scrollbar-width: none;
    }

    .npn-faq-premium-categories::-webkit-scrollbar {
        display: none;
    }

    .npn-faq-premium-categories button {
        width: auto;
        flex: 0 0 auto;
        min-width: 142px;
    }

    .npn-faq-premium-categories button:hover {
        transform: translateY(-1px);
    }
}

@media (max-width: 680px) {
    .npn-faq-premium-main {
        padding: 44px 14px 76px;
        background-size: 54px 54px, 54px 54px, auto, auto, auto;
    }

    .npn-faq-premium-hero {
        margin-bottom: 44px;
    }

    .npn-faq-premium-hero-top {
        margin-bottom: 24px;
    }

    .npn-faq-premium-eyebrow {
        font-size: 10px;
        letter-spacing: .12em;
    }

    .npn-faq-premium-eyebrow::before {
        width: 20px;
    }

    .npn-faq-premium-language a {
        min-width: 38px;
        min-height: 34px;
    }

    .npn-faq-premium-title-wrap h1 {
        font-size: clamp(40px, 13vw, 58px);
    }

    .npn-faq-premium-title-wrap p {
        margin-top: 17px;
        font-size: 14.5px;
    }

    .npn-faq-premium-search {
        min-height: 58px;
        margin-top: 28px;
        border-radius: 16px;
    }

    .npn-faq-premium-search input {
        height: 56px;
        font-size: 14px;
    }

    .npn-faq-premium-search kbd {
        display: none;
    }

    .npn-faq-premium-sidebar {
        padding: 17px;
        border-radius: 20px;
    }

    .npn-faq-premium-content-head {
        align-items: flex-end;
    }

    .npn-faq-premium-content-head h2 {
        font-size: 22px;
    }

    .npn-faq-premium-result-meta {
        white-space: nowrap;
    }

    .npn-faq-premium-item {
        border-radius: 17px;
    }

    .npn-faq-premium-question {
        min-height: 74px;
        grid-template-columns: minmax(0, 1fr) 36px;
        gap: 13px;
        padding: 16px 14px 16px 18px;
    }

    .npn-faq-premium-question-copy strong {
        font-size: 14.5px;
    }

    .npn-faq-premium-question em {
        width: 36px;
        height: 36px;
    }

    .npn-faq-premium-answer > p {
        padding-left: 18px;
        padding-right: 18px;
        font-size: 14px;
    }

    .npn-faq-premium-cta {
        grid-template-columns: 52px minmax(0, 1fr);
        gap: 16px;
        padding: 23px 20px;
        border-radius: 22px;
    }

    .npn-faq-premium-cta-icon {
        width: 52px;
        height: 52px;
        border-radius: 16px;
    }

    .npn-faq-premium-cta-button {
        grid-column: 1 / -1;
        width: 100%;
        margin-top: 3px;
    }
}

/* Reset the legacy numbered FAQ badge for the premium question copy wrapper. */
.npn-faq-premium-question .npn-faq-premium-question-copy {
    width: auto;
    height: auto;
    display: block;
    place-items: initial;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: inherit;
    font-family: inherit;
    box-shadow: none;
}

/* =========================================================
   Premium Tech Terms & Conditions
========================================================= */
body.npn-terms-page-body {
    margin: 0;
    background: #020713;
    color: #dce8f7;
}

.npn-terms-shell {
    min-height: 100vh;
    background: #020713;
}

.npn-terms-reading-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2147483000;
    height: 3px;
    pointer-events: none;
}

.npn-terms-reading-progress span {
    display: block;
    width: 0;
    height: 100%;
    border-radius: 0 999px 999px 0;
    background: linear-gradient(90deg, #2b7fff, #58e7ff, #86fff1);
    box-shadow: 0 0 16px rgba(73, 220, 255, .82);
    transition: width .08s linear;
}

.npn-terms-main {
    position: relative;
    isolation: isolate;
    min-height: 80vh;
    overflow: clip;
    padding: 72px 0 104px;
    background:
        radial-gradient(circle at 14% 10%, rgba(20, 119, 255, .14), transparent 31%),
        radial-gradient(circle at 87% 32%, rgba(47, 221, 255, .10), transparent 28%),
        linear-gradient(180deg, #061022 0%, #020713 46%, #030916 100%);
}

.npn-terms-main::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -4;
    opacity: .22;
    background-image:
        linear-gradient(rgba(111, 207, 255, .055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(111, 207, 255, .055) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: linear-gradient(to bottom, #000, transparent 76%);
}

.npn-terms-grid {
    position: absolute;
    inset: 0;
    z-index: -3;
    pointer-events: none;
    background: linear-gradient(110deg, transparent 12%, rgba(65, 202, 255, .04), transparent 68%);
}

.npn-terms-glow {
    position: absolute;
    z-index: -2;
    border-radius: 50%;
    filter: blur(10px);
    pointer-events: none;
}

.npn-terms-glow-one {
    top: 40px;
    left: -180px;
    width: 520px;
    height: 520px;
    background: radial-gradient(circle, rgba(32, 119, 255, .20), transparent 68%);
}

.npn-terms-glow-two {
    top: 450px;
    right: -190px;
    width: 560px;
    height: 560px;
    background: radial-gradient(circle, rgba(48, 224, 255, .13), transparent 70%);
}

.npn-terms-container {
    position: relative;
    z-index: 1;
    width: min(1320px, calc(100% - 48px));
    margin: 0 auto;
}

.npn-terms-hero {
    padding: 34px 0 64px;
}

.npn-terms-hero-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 42px;
}

.npn-legal-document-tabs {
	display: inline-grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 6px;
	margin: -16px 0 34px;
	padding: 6px;
	border: 1px solid rgba(103, 232, 249, 0.22);
	border-radius: 16px;
	background: rgba(6, 19, 41, 0.72);
	box-shadow: 0 14px 36px rgba(2, 8, 23, 0.28);
}

.npn-legal-document-tabs a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 42px;
	padding: 9px 18px;
	border-radius: 11px;
	color: rgba(224, 242, 254, 0.72);
	font-size: 13px;
	font-weight: 900;
	text-align: center;
	transition: color .2s ease, background .2s ease, box-shadow .2s ease, transform .2s ease;
}

.npn-legal-document-tabs a:hover {
	color: #ffffff;
	transform: translateY(-1px);
}

.npn-legal-document-tabs a.is-active {
	color: #03101d;
	background: linear-gradient(135deg, #67e8f9, #22d3ee);
	box-shadow: 0 8px 22px rgba(34, 211, 238, 0.24);
}

.npn-privacy-document-tabs a.is-active {
	background: linear-gradient(135deg, #a7f3d0, #34d399);
}

.npn-terms-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    color: #78eaff;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .18em;
}

.npn-terms-eyebrow::before {
    content: "";
    width: 30px;
    height: 1px;
    background: linear-gradient(90deg, #2e87ff, #73f0ff);
    box-shadow: 0 0 10px rgba(84, 224, 255, .7);
}

.npn-terms-language {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px;
    border: 1px solid rgba(135, 217, 255, .18);
    border-radius: 14px;
    background: rgba(8, 22, 43, .78);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 14px 34px rgba(0, 0, 0, .22);
    backdrop-filter: blur(16px);
}

.npn-terms-language a {
    min-width: 48px;
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    color: #91a7c3;
    font-size: 12px;
    font-weight: 900;
    text-decoration: none;
    transition: color .22s ease, background .22s ease, box-shadow .22s ease, transform .22s ease;
}

.npn-terms-language a:hover {
    color: #fff;
    transform: translateY(-1px);
}

.npn-terms-language a[aria-current="page"] {
    color: #fff;
    background: linear-gradient(135deg, #1478f8, #27b9f4);
    box-shadow: 0 8px 20px rgba(19, 128, 255, .28), inset 0 1px 0 rgba(255, 255, 255, .25);
}

.npn-terms-hero-copy {
    max-width: 950px;
}

.npn-terms-hero-copy h1 {
    max-width: 900px;
    margin: 0;
    color: #fff;
    font-size: clamp(48px, 6.6vw, 90px);
    line-height: .98;
    letter-spacing: -.066em;
    text-wrap: balance;
}

.npn-terms-hero-copy h1::after {
    content: ".";
    margin-left: 5px;
    color: #58ddff;
    text-shadow: 0 0 22px rgba(78, 221, 255, .62);
}

.npn-terms-hero-copy p {
    max-width: 760px;
    margin: 28px 0 0;
    color: #a9b9ce;
    font-size: clamp(17px, 1.7vw, 21px);
    line-height: 1.75;
}

.npn-terms-meta-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    gap: 14px;
    margin-top: 42px;
}

.npn-terms-meta-card,
.npn-terms-print {
    min-height: 76px;
    border: 1px solid rgba(111, 204, 255, .14);
    border-radius: 18px;
    background: rgba(7, 20, 41, .70);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035), 0 18px 50px rgba(0, 0, 0, .18);
    backdrop-filter: blur(16px);
}

.npn-terms-meta-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
}

.npn-terms-meta-card > span {
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(88, 225, 255, .18);
    border-radius: 14px;
    background: rgba(31, 159, 255, .11);
    color: #69e7ff;
}

.npn-terms-meta-card svg,
.npn-terms-print svg,
.npn-terms-sidebar-help svg,
.npn-terms-acceptance-note svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.npn-terms-meta-card small,
.npn-terms-meta-card strong {
    display: block;
}

.npn-terms-meta-card small {
    margin-bottom: 5px;
    color: #768ba8;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.npn-terms-meta-card strong {
    color: #edf8ff;
    font-size: 15px;
}

.npn-terms-print {
    min-width: 190px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    padding: 0 22px;
    color: #d9f7ff;
    font: inherit;
    font-size: 13px;
    font-weight: 900;
    cursor: pointer;
    transition: transform .22s ease, border-color .22s ease, background .22s ease, box-shadow .22s ease;
}

.npn-terms-print:hover {
    transform: translateY(-2px);
    border-color: rgba(88, 225, 255, .44);
    background: rgba(14, 52, 86, .84);
    box-shadow: 0 16px 34px rgba(0, 103, 170, .18);
}

.npn-terms-summary {
    position: relative;
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 20px;
    align-items: start;
    margin-top: 18px;
    padding: 24px 26px;
    overflow: hidden;
    border: 1px solid rgba(89, 224, 255, .20);
    border-radius: 22px;
    background: linear-gradient(135deg, rgba(13, 44, 78, .78), rgba(7, 22, 43, .78));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045), 0 24px 60px rgba(0, 0, 0, .20);
}

.npn-terms-summary::after {
    content: "";
    position: absolute;
    width: 220px;
    height: 220px;
    top: -150px;
    right: -80px;
    border-radius: 50%;
    background: rgba(62, 216, 255, .13);
    filter: blur(15px);
}

.npn-terms-summary-mark {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(111, 233, 255, .22);
    border-radius: 16px;
    background: rgba(41, 175, 255, .12);
}

.npn-terms-summary-mark span,
.npn-terms-summary-mark span::before,
.npn-terms-summary-mark span::after {
    display: block;
    width: 21px;
    height: 2px;
    border-radius: 999px;
    background: #71e9ff;
    box-shadow: 0 0 9px rgba(75, 220, 255, .50);
}

.npn-terms-summary-mark span {
    position: relative;
}

.npn-terms-summary-mark span::before,
.npn-terms-summary-mark span::after {
    content: "";
    position: absolute;
    left: 0;
}

.npn-terms-summary-mark span::before { top: -7px; }
.npn-terms-summary-mark span::after { top: 7px; width: 14px; }

.npn-terms-summary small {
    display: block;
    margin: 1px 0 8px;
    color: #6fe7ff;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.npn-terms-summary p {
    position: relative;
    z-index: 1;
    margin: 0;
    color: #c4d3e5;
    line-height: 1.75;
}

.npn-terms-layout {
    display: grid;
    grid-template-columns: 310px minmax(0, 1fr);
    gap: 34px;
    align-items: start;
}

.npn-terms-sidebar {
    position: sticky;
    top: 92px;
    display: grid;
    gap: 16px;
}

.npn-terms-sidebar-card,
.npn-terms-sidebar-help {
    border: 1px solid rgba(111, 204, 255, .14);
    border-radius: 22px;
    background: rgba(6, 18, 37, .78);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035), 0 24px 60px rgba(0, 0, 0, .18);
    backdrop-filter: blur(18px);
}

.npn-terms-sidebar-card {
    padding: 20px 12px 12px;
}

.npn-terms-sidebar-head {
    padding: 0 10px 15px;
}

.npn-terms-sidebar-head > span {
    color: #eef9ff;
    font-size: 15px;
    font-weight: 900;
}

.npn-terms-sidebar-head p {
    margin: 8px 0 0;
    color: #71849f;
    font-size: 12px;
    line-height: 1.55;
}

.npn-terms-toc {
    display: grid;
    gap: 4px;
    max-height: min(58vh, 590px);
    overflow: auto;
    padding-right: 2px;
    scrollbar-width: thin;
    scrollbar-color: rgba(91, 217, 255, .25) transparent;
}

.npn-terms-toc a {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 8px;
    align-items: start;
    padding: 11px 10px;
    border: 1px solid transparent;
    border-radius: 13px;
    color: #8295ae;
    text-decoration: none;
    transition: color .2s ease, border-color .2s ease, background .2s ease, transform .2s ease;
}

.npn-terms-toc a:hover {
    color: #d9f7ff;
    transform: translateX(2px);
    background: rgba(27, 101, 153, .10);
}

.npn-terms-toc a.is-active {
    color: #ecfbff;
    border-color: rgba(87, 221, 255, .16);
    background: linear-gradient(90deg, rgba(33, 143, 227, .18), rgba(19, 70, 111, .08));
}

.npn-terms-toc a small {
    padding-top: 2px;
    color: #4fcfe9;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .06em;
}

.npn-terms-toc a span {
    font-size: 12px;
    font-weight: 750;
    line-height: 1.45;
}

.npn-terms-sidebar-help {
    padding: 20px;
}

.npn-terms-sidebar-help > span {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
    border-radius: 13px;
    background: linear-gradient(135deg, rgba(27, 128, 255, .22), rgba(64, 224, 255, .11));
    color: #68e6ff;
}

.npn-terms-sidebar-help strong {
    display: block;
    color: #fff;
    font-size: 15px;
}

.npn-terms-sidebar-help p {
    margin: 9px 0 15px;
    color: #8295ae;
    font-size: 12px;
    line-height: 1.65;
}

.npn-terms-sidebar-help a,
.npn-terms-contact-card > a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #72e8ff;
    font-size: 12px;
    font-weight: 900;
    text-decoration: none;
}

.npn-terms-sidebar-help a span,
.npn-terms-contact-card > a span {
    transition: transform .2s ease;
}

.npn-terms-sidebar-help a:hover span,
.npn-terms-contact-card > a:hover span {
    transform: translate(2px, -2px);
}

.npn-terms-document {
    min-width: 0;
}

.npn-terms-acceptance-note {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 13px;
    align-items: center;
    margin-bottom: 16px;
    padding: 15px 18px;
    border: 1px solid rgba(80, 225, 193, .16);
    border-radius: 17px;
    background: rgba(12, 61, 61, .26);
}

.npn-terms-acceptance-note span {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: rgba(76, 229, 191, .10);
    color: #71f0ce;
}

.npn-terms-acceptance-note p {
    margin: 0;
    color: #b8dcd6;
    font-size: 13px;
    line-height: 1.6;
}

.npn-terms-section {
    position: relative;
    scroll-margin-top: 112px;
    margin-bottom: 16px;
    overflow: hidden;
    border: 1px solid rgba(111, 204, 255, .13);
    border-radius: 22px;
    background: linear-gradient(145deg, rgba(8, 23, 45, .88), rgba(5, 15, 31, .88));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .032), 0 20px 55px rgba(0, 0, 0, .17);
    transition: border-color .24s ease, transform .24s ease, box-shadow .24s ease, background .24s ease;
}

.npn-terms-section::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 2px;
    opacity: 0;
    background: linear-gradient(180deg, #278bff, #6eeaff, transparent);
    box-shadow: 0 0 14px rgba(76, 222, 255, .55);
    transition: opacity .22s ease;
}

.npn-terms-section:hover,
.npn-terms-section.is-active {
    border-color: rgba(90, 220, 255, .26);
    background: linear-gradient(145deg, rgba(11, 31, 58, .94), rgba(5, 17, 35, .94));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045), 0 25px 65px rgba(0, 0, 0, .23);
}

.npn-terms-section:hover::before,
.npn-terms-section.is-active::before {
    opacity: 1;
}

.npn-terms-section > header {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 18px;
    align-items: center;
    padding: 25px 30px 20px;
}

.npn-terms-section > header > span {
    width: 54px;
    height: 54px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(81, 219, 255, .17);
    border-radius: 16px;
    background: rgba(28, 128, 211, .12);
    color: #65e3ff;
    font-size: 12px;
    font-weight: 950;
    letter-spacing: .07em;
}

.npn-terms-section h2 {
    margin: 0;
    color: #f2f9ff;
    font-size: clamp(21px, 2.1vw, 29px);
    line-height: 1.2;
    letter-spacing: -.028em;
}

.npn-terms-section-content {
    padding: 0 30px 30px 106px;
    color: #aab9cc;
    font-size: 15px;
    line-height: 1.84;
}

.npn-terms-section-content p {
    margin: 0 0 16px;
}

.npn-terms-section-content p:last-child {
    margin-bottom: 0;
}

.npn-terms-section-content strong,
.npn-terms-section-content b {
    color: #eef9ff;
}

.npn-terms-section-content a {
    color: #66e0ff;
    text-underline-offset: 3px;
}

.npn-terms-section-content ul,
.npn-terms-section-content ol {
    margin: 14px 0 18px;
    padding-left: 22px;
}

.npn-terms-section-content li {
    margin: 7px 0;
}

.npn-terms-contact-card {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 26px;
    margin-top: 26px;
    padding: 32px;
    overflow: hidden;
    border: 1px solid rgba(94, 226, 255, .24);
    border-radius: 24px;
    background:
        radial-gradient(circle at 100% 0%, rgba(63, 218, 255, .18), transparent 34%),
        linear-gradient(135deg, rgba(15, 54, 92, .88), rgba(6, 22, 43, .92));
    box-shadow: 0 26px 70px rgba(0, 0, 0, .23);
}

.npn-terms-contact-card small {
    color: #69e5ff;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .14em;
}

.npn-terms-contact-card h2 {
    margin: 8px 0 9px;
    color: #fff;
    font-size: clamp(24px, 3vw, 36px);
    letter-spacing: -.04em;
}

.npn-terms-contact-card p {
    max-width: 650px;
    margin: 0;
    color: #aebfd2;
    line-height: 1.68;
}

.npn-terms-contact-card > a {
    min-width: 170px;
    min-height: 50px;
    justify-content: center;
    padding: 0 20px;
    border: 1px solid rgba(117, 235, 255, .24);
    border-radius: 14px;
    background: linear-gradient(135deg, #1478f8, #27b9f4);
    color: #fff;
    box-shadow: 0 14px 32px rgba(22, 133, 241, .25);
}

.npn-terms-back-top {
    width: max-content;
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 24px 0 0 auto;
    color: #7890aa;
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
    transition: color .2s ease, transform .2s ease;
}

.npn-terms-back-top:hover {
    color: #67e5ff;
    transform: translateY(-2px);
}

@media (max-width: 1050px) {
    .npn-terms-layout {
        grid-template-columns: 260px minmax(0, 1fr);
        gap: 22px;
    }

    .npn-terms-section > header {
        padding: 23px 24px 18px;
    }

    .npn-terms-section-content {
        padding: 0 24px 26px 100px;
    }
}

@media (max-width: 860px) {
    .npn-terms-main {
        padding-top: 42px;
    }

    .npn-terms-container {
        width: min(100% - 30px, 760px);
    }

    .npn-terms-hero {
        padding-bottom: 40px;
    }

    .npn-terms-hero-top {
        margin-bottom: 32px;
    }

    .npn-terms-meta-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .npn-terms-print {
        grid-column: 1 / -1;
        min-height: 58px;
    }

    .npn-terms-layout {
        grid-template-columns: 1fr;
    }

    .npn-terms-sidebar {
        position: static;
    }

    .npn-terms-sidebar-card {
        padding: 18px 14px 14px;
    }

    .npn-terms-toc {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-height: none;
        overflow: visible;
    }

    .npn-terms-sidebar-help {
        display: none;
    }
}

@media (max-width: 620px) {
    .npn-terms-main {
        padding: 30px 0 70px;
    }

    .npn-terms-container {
        width: min(100% - 22px, 560px);
    }

    .npn-terms-hero-top {
        align-items: flex-start;
        gap: 14px;
        margin-bottom: 30px;
    }

    .npn-terms-eyebrow {
        padding-top: 11px;
        font-size: 10px;
        letter-spacing: .12em;
    }

    .npn-terms-eyebrow::before {
        width: 18px;
    }

    .npn-terms-language a {
        min-width: 42px;
        min-height: 35px;
    }

	.npn-legal-document-tabs {
		display: grid;
		width: 100%;
		margin-top: -12px;
	}

	.npn-legal-document-tabs a {
		padding-inline: 10px;
		font-size: 12px;
	}

    .npn-terms-hero-copy h1 {
        font-size: clamp(42px, 14vw, 62px);
    }

    .npn-terms-hero-copy p {
        margin-top: 22px;
        font-size: 16px;
        line-height: 1.66;
    }

    .npn-terms-meta-row {
        grid-template-columns: 1fr;
        margin-top: 30px;
    }

    .npn-terms-print {
        grid-column: auto;
    }

    .npn-terms-summary {
        grid-template-columns: 1fr;
        padding: 22px;
    }

    .npn-terms-summary-mark {
        width: 46px;
        height: 46px;
    }

    .npn-terms-toc {
        grid-template-columns: 1fr;
    }

    .npn-terms-section > header {
        grid-template-columns: 46px minmax(0, 1fr);
        gap: 13px;
        padding: 20px 18px 15px;
    }

    .npn-terms-section > header > span {
        width: 44px;
        height: 44px;
        border-radius: 13px;
    }

    .npn-terms-section h2 {
        font-size: 20px;
    }

    .npn-terms-section-content {
        padding: 0 18px 22px;
        font-size: 14px;
        line-height: 1.78;
    }

    .npn-terms-contact-card {
        display: grid;
        padding: 24px 20px;
    }

    .npn-terms-contact-card > a {
        width: 100%;
    }
}

@media print {
    body.npn-terms-page-body,
    .npn-terms-shell,
    .npn-terms-main {
        background: #fff !important;
        color: #111 !important;
    }

    .npn-terms-shell > header,
    .npn-terms-shell > footer,
    .npn-terms-reading-progress,
    .npn-terms-glow,
    .npn-terms-grid,
    .npn-terms-language,
    .npn-legal-document-tabs,
    .npn-terms-print,
    .npn-terms-sidebar,
    .npn-terms-contact-card,
    .npn-terms-back-top,
    [data-contact-float],
    [data-live-chat-widget],
    .npn-live-chat-widget,
    .npn-contact-float {
        display: none !important;
    }

    .npn-terms-main {
        padding: 0 !important;
    }

    .npn-terms-container {
        width: 100% !important;
    }

    .npn-terms-hero {
        padding: 0 0 24px !important;
    }

    .npn-terms-eyebrow,
    .npn-terms-hero-copy h1,
    .npn-terms-meta-card strong,
    .npn-terms-section h2 {
        color: #111 !important;
        text-shadow: none !important;
    }

    .npn-terms-hero-copy p,
    .npn-terms-summary p,
    .npn-terms-section-content,
    .npn-terms-acceptance-note p {
        color: #333 !important;
    }

    .npn-terms-meta-row {
        grid-template-columns: repeat(2, 1fr);
    }

    .npn-terms-meta-card,
    .npn-terms-summary,
    .npn-terms-section,
    .npn-terms-acceptance-note {
        border: 1px solid #d7dce3 !important;
        background: #fff !important;
        box-shadow: none !important;
        break-inside: avoid;
    }

    .npn-terms-layout {
        display: block !important;
    }

    .npn-terms-section {
        margin-bottom: 12px;
    }
}

/* =========================================================
   Premium Privacy Policy / International trust-center style
========================================================= */
body.npn-privacy-page-body,
.npn-privacy-shell {
    background: #020814;
}

.npn-privacy-main {
    background:
        radial-gradient(circle at 12% 8%, rgba(17, 194, 171, .13), transparent 30%),
        radial-gradient(circle at 86% 26%, rgba(48, 151, 255, .13), transparent 29%),
        radial-gradient(circle at 52% 86%, rgba(50, 225, 194, .055), transparent 35%),
        linear-gradient(180deg, #061225 0%, #020814 48%, #030a17 100%);
}

.npn-privacy-reading-progress span {
    background: linear-gradient(90deg, #20bba6, #59e7dd, #6cb8ff);
    box-shadow: 0 0 16px rgba(71, 224, 210, .78);
}

.npn-privacy-eyebrow {
    color: #72eee0;
}

.npn-privacy-eyebrow::before {
    background: linear-gradient(90deg, #18b9a3, #6aebdf);
    box-shadow: 0 0 10px rgba(70, 229, 213, .66);
}

.npn-privacy-page-body .npn-terms-language a[aria-current="page"] {
    background: linear-gradient(135deg, #0f9f96, #2db8d8 58%, #317ff2);
    box-shadow: 0 8px 22px rgba(20, 173, 164, .24), inset 0 1px 0 rgba(255, 255, 255, .25);
}

.npn-privacy-page-body .npn-terms-hero-copy h1::after {
    color: #63eadb;
    text-shadow: 0 0 23px rgba(67, 224, 210, .58);
}

.npn-privacy-page-body .npn-terms-meta-card > span {
    border-color: rgba(89, 231, 215, .19);
    background: linear-gradient(145deg, rgba(24, 176, 162, .14), rgba(42, 133, 231, .09));
    color: #6ce7da;
}

.npn-privacy-summary {
    border-color: rgba(85, 229, 211, .22);
    background: linear-gradient(135deg, rgba(8, 58, 65, .74), rgba(7, 27, 50, .82));
}

.npn-privacy-summary::after {
    background: rgba(56, 219, 199, .14);
}

.npn-privacy-shield {
    width: 52px;
    height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(101, 236, 220, .24);
    border-radius: 16px;
    background: linear-gradient(145deg, rgba(27, 184, 166, .16), rgba(47, 135, 224, .09));
    color: #70ebdc;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 13px 28px rgba(0, 0, 0, .15);
}

.npn-privacy-shield svg {
    width: 25px;
    height: 25px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.npn-privacy-overview {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 13px;
    margin-top: 18px;
}

.npn-privacy-overview article {
    position: relative;
    min-height: 184px;
    overflow: hidden;
    padding: 22px 20px 20px;
    border: 1px solid rgba(107, 214, 224, .13);
    border-radius: 20px;
    background:
        linear-gradient(145deg, rgba(8, 27, 50, .86), rgba(5, 18, 35, .86));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035), 0 20px 50px rgba(0, 0, 0, .16);
    transition: transform .24s ease, border-color .24s ease, background .24s ease, box-shadow .24s ease;
}

.npn-privacy-overview article::after {
    content: "";
    position: absolute;
    width: 120px;
    height: 120px;
    right: -62px;
    bottom: -72px;
    border-radius: 50%;
    background: rgba(45, 214, 196, .10);
    filter: blur(4px);
    transition: transform .3s ease, background .3s ease;
}

.npn-privacy-overview article:hover {
    transform: translateY(-4px);
    border-color: rgba(93, 231, 217, .27);
    background: linear-gradient(145deg, rgba(10, 39, 59, .94), rgba(5, 22, 41, .94));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 27px 58px rgba(0, 0, 0, .22);
}

.npn-privacy-overview article:hover::after {
    transform: scale(1.22);
    background: rgba(55, 224, 205, .14);
}

.npn-privacy-overview article > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 26px;
    margin-bottom: 24px;
    padding: 0 9px;
    border: 1px solid rgba(94, 230, 216, .17);
    border-radius: 999px;
    background: rgba(33, 174, 165, .09);
    color: #66ded3;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .07em;
}

.npn-privacy-overview article strong {
    position: relative;
    z-index: 1;
    display: block;
    color: #f2fcff;
    font-size: 15px;
    line-height: 1.35;
}

.npn-privacy-overview article p {
    position: relative;
    z-index: 1;
    margin: 10px 0 0;
    color: #839ab3;
    font-size: 12px;
    line-height: 1.68;
}

.npn-privacy-page-body .npn-terms-toc a small {
    color: #55d8ca;
}

.npn-privacy-page-body .npn-terms-toc a.is-active {
    border-color: rgba(88, 225, 211, .17);
    background: linear-gradient(90deg, rgba(27, 166, 154, .18), rgba(21, 87, 129, .08));
}

.npn-privacy-sidebar-help > span {
    background: linear-gradient(135deg, rgba(25, 177, 161, .20), rgba(44, 137, 231, .10));
    color: #6ae5d8;
}

.npn-privacy-page-body .npn-terms-sidebar-help a,
.npn-privacy-page-body .npn-terms-contact-card > a {
    color: #6ee8dc;
}

.npn-privacy-rights-note {
    border-color: rgba(75, 220, 204, .18);
    background: linear-gradient(135deg, rgba(8, 64, 68, .28), rgba(8, 34, 56, .28));
}

.npn-privacy-rights-note span {
    background: rgba(65, 218, 198, .11);
    color: #73eadc;
}

.npn-privacy-rights-note p {
    color: #b8dad8;
}

.npn-privacy-section::before {
    background: linear-gradient(180deg, #20bba6, #66eadc, #4c92f3, transparent);
    box-shadow: 0 0 14px rgba(74, 224, 210, .50);
}

.npn-privacy-page-body .npn-terms-section:hover,
.npn-privacy-page-body .npn-terms-section.is-active {
    border-color: rgba(89, 224, 211, .25);
    background: linear-gradient(145deg, rgba(9, 39, 56, .95), rgba(5, 19, 37, .95));
}

.npn-privacy-page-body .npn-terms-section > header > span {
    border-color: rgba(91, 229, 215, .19);
    background: linear-gradient(145deg, rgba(29, 178, 164, .13), rgba(42, 130, 218, .08));
    color: #63dfd3;
}

.npn-privacy-request-card {
    border-color: rgba(86, 228, 213, .19);
    background:
        radial-gradient(circle at 82% 26%, rgba(64, 215, 200, .12), transparent 31%),
        linear-gradient(135deg, rgba(8, 54, 65, .88), rgba(7, 25, 48, .92));
}

.npn-privacy-request-card > a {
    border: 1px solid rgba(101, 235, 221, .23);
    border-radius: 13px;
    padding: 12px 15px;
    background: rgba(43, 197, 184, .10);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}

.npn-privacy-request-card > a:hover {
    background: rgba(43, 197, 184, .17);
    border-color: rgba(101, 235, 221, .42);
}

@media (max-width: 1080px) {
    .npn-privacy-overview {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .npn-privacy-overview article {
        min-height: 158px;
    }
}

@media (max-width: 620px) {
    .npn-privacy-overview {
        grid-template-columns: 1fr;
    }
    .npn-privacy-overview article {
        min-height: 0;
        padding: 18px;
    }
    .npn-privacy-overview article > span {
        margin-bottom: 16px;
    }
}

@media print {
    .npn-privacy-overview {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }
    .npn-privacy-overview article {
        min-height: 0 !important;
        break-inside: avoid;
        border: 1px solid #d9e2e8 !important;
        background: #fff !important;
        color: #111 !important;
        box-shadow: none !important;
    }
    .npn-privacy-overview article strong,
    .npn-privacy-overview article p {
        color: #111 !important;
    }
}

/* =========================================================
   ABOUT US — PREMIUM TECH / BILINGUAL
========================================================= */
body.npn-about-page-body {
    min-height: 100vh;
    background: #020817;
    color: #edf6ff;
}

.npn-about-shell {
    min-height: 100vh;
    overflow: hidden;
    background:
        radial-gradient(circle at 18% 4%, rgba(29, 183, 232, .15), transparent 28%),
        radial-gradient(circle at 88% 14%, rgba(77, 97, 234, .14), transparent 26%),
        linear-gradient(180deg, #08101f 0%, #050b17 52%, #020817 100%);
}

.npn-about-main {
    position: relative;
    z-index: 1;
}

.npn-about-container {
    width: min(1180px, calc(100% - 42px));
    margin: 0 auto;
}

.npn-about-hero {
    position: relative;
    min-height: 650px;
    display: flex;
    align-items: center;
    padding: 86px 0 82px;
    overflow: hidden;
    border-bottom: 1px solid rgba(118, 211, 255, .10);
}

.npn-about-grid {
    position: absolute;
    inset: 0;
    opacity: .15;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(116, 219, 255, .13) 1px, transparent 1px),
        linear-gradient(90deg, rgba(116, 219, 255, .11) 1px, transparent 1px);
    background-size: 70px 70px;
    mask-image: radial-gradient(circle at 50% 38%, #000 0%, transparent 72%);
}

.npn-about-glow {
    position: absolute;
    display: block;
    border-radius: 999px;
    pointer-events: none;
    filter: blur(10px);
}

.npn-about-glow-one {
    width: 440px;
    height: 440px;
    left: -190px;
    top: 60px;
    background: radial-gradient(circle, rgba(26, 209, 235, .22), transparent 68%);
}

.npn-about-glow-two {
    width: 520px;
    height: 520px;
    right: -230px;
    top: 20px;
    background: radial-gradient(circle, rgba(91, 107, 244, .20), transparent 70%);
}

.npn-about-hero .npn-about-container {
    position: relative;
    z-index: 2;
}

.npn-about-hero-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 56px;
}

.npn-about-eyebrow,
.npn-about-section-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #70e8f4;
    font-family: 'Manrope-Bold';
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .18em;
    line-height: 1.4;
    text-transform: uppercase;
}

.npn-about-eyebrow::before,
.npn-about-section-label::before {
    content: "";
    width: 22px;
    height: 1px;
    background: linear-gradient(90deg, #64e7f3, rgba(100, 231, 243, .18));
    box-shadow: 0 0 12px rgba(100, 231, 243, .44);
}

.npn-about-language {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px;
    border: 1px solid rgba(128, 220, 255, .16);
    border-radius: 999px;
    background: rgba(6, 18, 40, .72);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
    backdrop-filter: blur(14px);
}

.npn-about-language a {
    min-width: 44px;
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    color: #8192aa;
    font-family: 'Manrope-Bold';
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    transition: .22s ease;
}

.npn-about-language a:hover {
    color: #fff;
}

.npn-about-language a[aria-current="page"] {
    background: linear-gradient(135deg, #5de6f2, #7a8fff);
    color: #031020;
    box-shadow: 0 8px 24px rgba(64, 211, 241, .22);
}

.npn-about-hero-copy {
    max-width: 900px;
}

.npn-about-hero-copy h1 {
    max-width: 850px;
    margin: 0;
    color: #fff;
    font-family: 'Manrope-Extra';
    font-size: clamp(52px, 7.2vw, 92px);
    font-weight: 900;
    letter-spacing: -.065em;
    line-height: .98;
    text-wrap: balance;
}

.npn-about-hero-copy h1::first-line {
    color: #fff;
}

.npn-about-hero-copy p {
    max-width: 720px;
    margin: 28px 0 0;
    color: #a9bbd1;
    font-size: 18px;
    line-height: 1.78;
}

.npn-about-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 34px;
}

.npn-about-button {
    min-height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    padding: 0 20px;
    border: 1px solid transparent;
    border-radius: 13px;
    font-family: 'Manrope-Bold';
    font-size: 13px;
    font-weight: 800;
    transition: transform .22s ease, border-color .22s ease, background .22s ease, box-shadow .22s ease;
}

.npn-about-button:hover {
    transform: translateY(-2px);
}

.npn-about-button-primary {
    background: linear-gradient(135deg, #60e9f4, #7e91ff);
    color: #04101f !important;
    box-shadow: 0 14px 34px rgba(70, 205, 239, .20);
}

.npn-about-button-primary:hover {
    box-shadow: 0 18px 42px rgba(70, 205, 239, .30);
}

.npn-about-button-primary span {
    font-size: 16px;
}

.npn-about-button-secondary {
    border-color: rgba(128, 220, 255, .20);
    background: rgba(255, 255, 255, .035);
    color: #dcecff !important;
}

.npn-about-button-secondary:hover {
    border-color: rgba(128, 220, 255, .38);
    background: rgba(95, 220, 245, .08);
}

.npn-about-proof {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 28px;
    margin-top: 60px;
    padding-top: 24px;
    border-top: 1px solid rgba(125, 213, 255, .11);
}

.npn-about-proof span {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #8497ae;
    font-family: 'Manrope-SemiBold';
    font-size: 12px;
    font-weight: 600;
}

.npn-about-proof i {
    width: 7px;
    height: 7px;
    display: block;
    border-radius: 999px;
    background: #62e8ef;
    box-shadow: 0 0 14px rgba(98, 232, 239, .75);
}

.npn-about-story-section {
    padding: 120px 0;
}

.npn-about-story-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr);
    gap: 80px;
    align-items: start;
}

.npn-about-story-copy h2,
.npn-about-section-head h2,
.npn-about-cta-card h2 {
    margin: 18px 0 0;
    color: #fff;
    font-family: 'Manrope-Extra';
    font-weight: 900;
    letter-spacing: -.045em;
    line-height: 1.08;
    text-wrap: balance;
}

.npn-about-story-copy h2 {
    max-width: 620px;
    font-size: clamp(38px, 5vw, 62px);
}

.npn-about-story-copy > p,
.npn-about-custom-content p {
    max-width: 650px;
    margin: 26px 0 0;
    color: #9eb1c8;
    font-size: 16px;
    line-height: 1.85;
}

.npn-about-custom-content {
    margin-top: 26px;
}

.npn-about-custom-content h2,
.npn-about-custom-content h3,
.npn-about-custom-content h4 {
    margin: 28px 0 8px;
    color: #fff;
    letter-spacing: -.03em;
}

.npn-about-custom-content h2:first-child,
.npn-about-custom-content h3:first-child,
.npn-about-custom-content h4:first-child,
.npn-about-custom-content p:first-child {
    margin-top: 0;
}

.npn-about-custom-content a {
    color: #6fe6f2;
}

.npn-about-services {
    padding: 28px;
    border: 1px solid rgba(122, 213, 255, .14);
    border-radius: 26px;
    background:
        radial-gradient(circle at 90% 8%, rgba(85, 137, 247, .10), transparent 30%),
        linear-gradient(160deg, rgba(12, 28, 56, .92), rgba(5, 16, 35, .94));
    box-shadow: 0 30px 80px rgba(0, 0, 0, .24), inset 0 1px 0 rgba(255, 255, 255, .04);
}

.npn-about-service-list {
    margin-top: 21px;
}

.npn-about-service-list article {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 14px;
    padding: 20px 0;
    border-top: 1px solid rgba(120, 206, 255, .10);
}

.npn-about-service-list article:first-child {
    border-top: 0;
}

.npn-about-service-list article > span {
    color: #5cdde9;
    font-family: 'Manrope-Bold';
    font-size: 11px;
    letter-spacing: .08em;
}

.npn-about-service-list h3 {
    margin: -2px 0 0;
    color: #f4f9ff;
    font-family: 'Manrope-Bold';
    font-size: 16px;
    letter-spacing: -.02em;
}

.npn-about-service-list p {
    margin: 7px 0 0;
    color: #7f93aa;
    font-size: 12px;
    line-height: 1.65;
}

.npn-about-principles-section {
    padding: 112px 0;
    border-top: 1px solid rgba(118, 211, 255, .09);
    border-bottom: 1px solid rgba(118, 211, 255, .09);
    background: rgba(3, 12, 28, .38);
}

.npn-about-section-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 430px);
    gap: 56px;
    align-items: end;
}

.npn-about-section-head h2 {
    font-size: clamp(38px, 5vw, 58px);
}

.npn-about-section-head > p {
    margin: 0 0 5px;
    color: #8fa3ba;
    font-size: 15px;
    line-height: 1.75;
}

.npn-about-principles-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-top: 54px;
}

.npn-about-principles-grid article {
    min-height: 265px;
    padding: 28px;
    border: 1px solid rgba(119, 211, 255, .13);
    border-radius: 22px;
    background: linear-gradient(155deg, rgba(12, 29, 58, .78), rgba(5, 16, 34, .86));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035);
    transition: transform .25s ease, border-color .25s ease, background .25s ease;
}

.npn-about-principles-grid article:hover {
    transform: translateY(-4px);
    border-color: rgba(102, 226, 240, .28);
    background: linear-gradient(155deg, rgba(14, 39, 71, .88), rgba(6, 20, 42, .92));
}

.npn-about-principles-grid article > span {
    display: inline-flex;
    min-width: 42px;
    min-height: 28px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(102, 226, 240, .16);
    border-radius: 999px;
    background: rgba(76, 213, 231, .07);
    color: #63e0ec;
    font-family: 'Manrope-Bold';
    font-size: 10px;
    letter-spacing: .08em;
}

.npn-about-principles-grid h3 {
    margin: 54px 0 0;
    color: #fff;
    font-family: 'Manrope-Bold';
    font-size: 22px;
    letter-spacing: -.03em;
}

.npn-about-principles-grid p {
    margin: 13px 0 0;
    color: #8498af;
    font-size: 13px;
    line-height: 1.72;
}

.npn-about-cta-section {
    padding: 104px 0 120px;
}

.npn-about-cta-card {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 44px;
    padding: 52px;
    border: 1px solid rgba(120, 216, 255, .18);
    border-radius: 30px;
    background:
        radial-gradient(circle at 88% 20%, rgba(91, 113, 245, .20), transparent 34%),
        radial-gradient(circle at 10% 100%, rgba(48, 214, 228, .13), transparent 36%),
        linear-gradient(135deg, rgba(14, 40, 74, .92), rgba(6, 18, 41, .96));
    box-shadow: 0 32px 90px rgba(0, 0, 0, .30), inset 0 1px 0 rgba(255, 255, 255, .05);
}

.npn-about-cta-card > div:first-child {
    max-width: 680px;
}

.npn-about-cta-card h2 {
    font-size: clamp(34px, 4.5vw, 54px);
}

.npn-about-cta-card p {
    max-width: 620px;
    margin: 18px 0 0;
    color: #9eb1c8;
    font-size: 15px;
    line-height: 1.75;
}

.npn-about-cta-card .npn-about-actions {
    flex: 0 0 auto;
    margin-top: 0;
}

@media (max-width: 980px) {
    .npn-about-hero {
        min-height: 590px;
    }
    .npn-about-story-grid {
        grid-template-columns: 1fr;
        gap: 52px;
    }
    .npn-about-services {
        max-width: none;
    }
    .npn-about-section-head {
        grid-template-columns: 1fr;
        gap: 22px;
    }
    .npn-about-principles-grid {
        grid-template-columns: 1fr;
    }
    .npn-about-principles-grid article {
        min-height: 0;
    }
    .npn-about-principles-grid h3 {
        margin-top: 34px;
    }
    .npn-about-cta-card {
        align-items: flex-start;
        flex-direction: column;
    }
    .npn-about-cta-card .npn-about-actions {
        width: 100%;
    }
}

@media (max-width: 720px) {
    .npn-about-container {
        width: min(100% - 28px, 1180px);
    }
    .npn-about-hero {
        min-height: 0;
        padding: 64px 0 58px;
    }
    .npn-about-hero-top {
        margin-bottom: 42px;
    }
    .npn-about-eyebrow {
        max-width: calc(100% - 112px);
        font-size: 9px;
    }
    .npn-about-hero-copy h1 {
        font-size: clamp(42px, 14vw, 62px);
        letter-spacing: -.055em;
    }
    .npn-about-hero-copy p {
        margin-top: 22px;
        font-size: 15px;
        line-height: 1.72;
    }
    .npn-about-actions {
        align-items: stretch;
        flex-direction: column;
    }
    .npn-about-button {
        width: 100%;
    }
    .npn-about-proof {
        align-items: flex-start;
        flex-direction: column;
        margin-top: 45px;
    }
    .npn-about-story-section,
    .npn-about-principles-section {
        padding: 78px 0;
    }
    .npn-about-story-grid {
        gap: 42px;
    }
    .npn-about-story-copy h2,
    .npn-about-section-head h2 {
        font-size: 38px;
    }
    .npn-about-story-copy > p,
    .npn-about-custom-content p {
        font-size: 14px;
    }
    .npn-about-services {
        padding: 22px;
        border-radius: 22px;
    }
    .npn-about-service-list article {
        grid-template-columns: 32px minmax(0, 1fr);
        padding: 18px 0;
    }
    .npn-about-principles-grid {
        margin-top: 34px;
    }
    .npn-about-principles-grid article {
        padding: 24px;
    }
    .npn-about-cta-section {
        padding: 72px 0 90px;
    }
    .npn-about-cta-card {
        gap: 30px;
        padding: 30px 22px;
        border-radius: 24px;
    }
    .npn-about-cta-card h2 {
        font-size: 36px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .npn-about-button,
    .npn-about-principles-grid article {
        transition: none;
    }
}

/* v17: account profile dropdown in the public header */
.npn-profile-menu {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
}

.npn-profile-menu::after {
	content: "";
	position: absolute;
	top: 100%;
	right: 0;
	width: 100%;
	height: 14px;
}

.npn-profile-submenu {
	position: absolute;
	top: calc(100% + 12px);
	right: 0;
	z-index: 10050;
	width: 240px;
	max-width: calc(100vw - 24px);
	padding: 10px;
	border: 1px solid rgba(78, 213, 255, 0.28);
	border-radius: 16px;
	background:
		radial-gradient(circle at 88% 0%, rgba(22, 178, 255, 0.14), transparent 38%),
		linear-gradient(180deg, rgba(10, 26, 55, 0.99), rgba(5, 15, 35, 0.99));
	box-shadow: 0 22px 55px rgba(0, 0, 0, 0.42), 0 0 26px rgba(14, 197, 255, 0.10);
	display: flex;
	flex-direction: column;
	gap: 4px;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY(-8px) scale(0.98);
	transform-origin: top right;
	transition: opacity 0.18s ease, visibility 0.18s ease, transform 0.18s ease;
}

.npn-profile-menu:hover .npn-profile-submenu,
.npn-profile-menu:focus-within .npn-profile-submenu {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateY(0) scale(1);
}

.npn-profile-submenu-user {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
	padding: 10px 11px 12px;
	margin-bottom: 4px;
	border-bottom: 1px solid rgba(132, 205, 255, 0.16);
}

.npn-profile-submenu-user strong,
.npn-profile-submenu-user span {
	display: block;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.npn-profile-submenu-user strong {
	color: #ffffff;
	font-size: 15px;
	line-height: 1.35;
	font-weight: 800;
}

.npn-profile-submenu-user span {
	color: rgba(208, 232, 255, 0.72);
	font-size: 12px;
	line-height: 1.45;
}

.npn-profile-submenu > a {
	display: flex;
	align-items: center;
	min-height: 40px;
	padding: 9px 11px;
	border-radius: 10px;
	color: rgba(234, 246, 255, 0.92);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.35;
	text-decoration: none;
	white-space: normal;
	transition: color 0.16s ease, background 0.16s ease, transform 0.16s ease;
}

.npn-profile-submenu > a:hover,
.npn-profile-submenu > a:focus-visible {
	color: #ffffff;
	background: rgba(23, 198, 255, 0.13);
	transform: translateX(2px);
	outline: none;
}

.npn-profile-submenu > a:last-child {
	color: #ffb7bf;
}

.npn-profile-submenu > a:last-child:hover,
.npn-profile-submenu > a:last-child:focus-visible {
	background: rgba(255, 82, 104, 0.12);
	color: #ffd4d9;
}

@media (max-width: 767px) {
	.npn-profile-submenu {
		right: -6px;
		width: min(240px, calc(100vw - 20px));
	}
}