/**
 * NovoClean visual polish — layered flowing WAVY / LINEAR decorations.
 * No circular blobs or radial bubble shapes.
 * Tokens live in main.css. Shapes stay behind content; pointer-events: none.
 */

:root {
	/* Soft filled wave — light blue (top edge flowing down) */
	--nc-wave-soft-blue: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 220' preserveAspectRatio='none'%3E%3Cpath fill='%23159fea' fill-opacity='0.14' d='M0,96 C180,160 360,40 540,88 C720,136 900,200 1080,152 C1260,104 1350,48 1440,72 L1440,0 L0,0 Z'/%3E%3C/svg%3E");

	/* Mid navy wave band */
	--nc-wave-navy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 220' preserveAspectRatio='none'%3E%3Cpath fill='%230b2f55' fill-opacity='0.08' d='M0,128 C200,64 400,176 640,120 C880,64 1120,40 1440,96 L1440,220 L0,220 Z'/%3E%3C/svg%3E");

	/* Aqua accent wave */
	--nc-wave-aqua: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 180' preserveAspectRatio='none'%3E%3Cpath fill='%2325c7c7' fill-opacity='0.1' d='M0,80 C240,140 480,20 720,70 C960,120 1200,150 1440,90 L1440,180 L0,180 Z'/%3E%3C/svg%3E");

	/* Thin stroke wave line */
	--nc-wave-line: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none' fill='none'%3E%3Cpath d='M0,42 C180,18 360,62 540,38 C720,14 900,58 1080,34 C1260,10 1350,50 1440,28' stroke='%23159fea' stroke-opacity='0.35' stroke-width='2'/%3E%3C/svg%3E");

	/* Thin navy stroke */
	--nc-wave-line-navy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none' fill='none'%3E%3Cpath d='M0,50 C220,20 440,70 720,40 C1000,10 1220,60 1440,32' stroke='%230b2f55' stroke-opacity='0.18' stroke-width='1.5'/%3E%3C/svg%3E");

	/* Bottom divider wave into page background */
	--nc-wave-divider: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 64' preserveAspectRatio='none'%3E%3Cpath fill='%23f3f6f8' d='M0,24 C240,56 480,0 720,28 C960,56 1200,48 1440,16 L1440,64 L0,64 Z'/%3E%3C/svg%3E");

	/* Inverse wave for dark panels (lighter blue on navy) */
	--nc-wave-on-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 200' preserveAspectRatio='none'%3E%3Cpath fill='%23159fea' fill-opacity='0.16' d='M0,80 C200,140 400,20 700,70 C1000,120 1240,160 1440,90 L1440,0 L0,0 Z'/%3E%3C/svg%3E");

	--nc-wave-on-dark-2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 180' preserveAspectRatio='none'%3E%3Cpath fill='%2325c7c7' fill-opacity='0.1' d='M0,100 C280,40 560,140 840,80 C1120,20 1280,110 1440,70 L1440,180 L0,180 Z'/%3E%3C/svg%3E");

	--nc-wave-on-dark-line: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none' fill='none'%3E%3Cpath d='M0,36 C200,60 400,12 720,40 C1040,68 1240,20 1440,44' stroke='%23ffffff' stroke-opacity='0.18' stroke-width='1.5'/%3E%3C/svg%3E");
}

/* -------------------------------------------------------------------------- */
/* Reusable decorative system                                                  */
/* -------------------------------------------------------------------------- */

.novo-wave-bg,
.novo-section-decoration,
.novo-gradient-shape,
.novo-blue-layer,
.novo-hero-decoration {
	position: relative;
	isolation: isolate;
	overflow: hidden;
}

.novo-wave-bg > *,
.novo-section-decoration > *,
.novo-gradient-shape > *,
.novo-blue-layer > *,
.novo-hero-decoration > * {
	position: relative;
	z-index: 1;
}

.novo-wave-bg::before,
.novo-section-decoration::before,
.novo-gradient-shape::before,
.novo-blue-layer::before,
.novo-hero-decoration::before,
.novo-wave-bg::after,
.novo-section-decoration::after,
.novo-gradient-shape::after,
.novo-blue-layer::after,
.novo-hero-decoration::after {
	pointer-events: none;
	z-index: 0;
}

/* Hero / wave-bg: layered horizontal waves + soft linear wash */
.novo-wave-bg::before,
.novo-hero-decoration::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: clamp(140px, 32vw, 320px);
	max-width: 100%;
	background-image:
		var(--nc-wave-line),
		var(--nc-wave-soft-blue),
		linear-gradient(180deg, rgba(21, 159, 234, 0.1) 0%, transparent 78%);
	background-repeat: no-repeat;
	background-size:
		140% 48px,
		120% 100%,
		100% 100%;
	background-position:
		center 28%,
		center top,
		center top;
}

.novo-wave-bg::after,
.novo-hero-decoration::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: clamp(100px, 22vw, 220px);
	max-width: 100%;
	background-image:
		var(--nc-wave-line-navy),
		var(--nc-wave-navy),
		var(--nc-wave-aqua);
	background-repeat: no-repeat;
	background-size:
		130% 40px,
		115% 78%,
		125% 70%;
	background-position:
		center 18%,
		center bottom,
		center 40%;
}

/* Section: diagonal linear bands + thin wave accent (no blobs) */
.novo-section-decoration {
	background:
		linear-gradient(
			168deg,
			transparent 0%,
			transparent 18%,
			rgba(21, 159, 234, 0.05) 18%,
			rgba(21, 159, 234, 0.05) 34%,
			transparent 34%,
			transparent 62%,
			rgba(11, 47, 85, 0.035) 62%,
			rgba(11, 47, 85, 0.035) 78%,
			transparent 78%
		),
		linear-gradient(180deg, var(--nc-surface) 0%, var(--nc-surface) 100%);
}

.novo-section-decoration::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: clamp(56px, 10vw, 110px);
	max-width: 100%;
	background-image: var(--nc-wave-soft-blue), var(--nc-wave-line);
	background-repeat: no-repeat;
	background-size: 110% 100%, 120% 36px;
	background-position: center top, center 55%;
	opacity: 0.85;
}

.novo-section-decoration::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: clamp(48px, 8vw, 90px);
	max-width: 100%;
	background-image: var(--nc-wave-aqua), var(--nc-wave-line-navy);
	background-repeat: no-repeat;
	background-size: 115% 100%, 125% 32px;
	background-position: center bottom, center 40%;
	opacity: 0.75;
}

/* Soft linear wash with wave edge */
.novo-gradient-shape {
	background: linear-gradient(180deg, var(--nc-blue-light) 0%, var(--nc-background) 72%);
}

.novo-gradient-shape::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: clamp(28px, 5vw, 56px);
	max-width: 100%;
	background-image: var(--nc-wave-divider);
	background-repeat: no-repeat;
	background-size: 120% 100%;
	background-position: center bottom;
}

.novo-gradient-shape::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 18%;
	height: 48px;
	max-width: 100%;
	background-image: var(--nc-wave-line);
	background-repeat: no-repeat;
	background-size: 140% 100%;
	background-position: center;
	opacity: 0.7;
}

/* Navy layered panel — flowing waves on dark */
.novo-blue-layer {
	background: linear-gradient(155deg, var(--nc-navy-deep) 0%, var(--nc-navy) 48%, var(--nc-navy-mid) 100%);
}

.novo-blue-layer::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: clamp(90px, 24vw, 200px);
	max-width: 100%;
	background-image: var(--nc-wave-on-dark), var(--nc-wave-on-dark-line);
	background-repeat: no-repeat;
	background-size: 120% 100%, 135% 40px;
	background-position: center top, center 55%;
}

.novo-blue-layer::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: clamp(80px, 20vw, 170px);
	max-width: 100%;
	background-image: var(--nc-wave-on-dark-2), var(--nc-wave-on-dark-line);
	background-repeat: no-repeat;
	background-size: 125% 100%, 130% 36px;
	background-position: center bottom, center 35%;
}

/* Curved / wave section edges */
.novo-curve-top::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: -1px;
	height: clamp(24px, 4vw, 48px);
	max-width: 100%;
	background-image: var(--nc-wave-soft-blue);
	background-repeat: no-repeat;
	background-size: 120% 100%;
	background-position: center top;
	pointer-events: none;
	z-index: 0;
	transform: scaleY(-1);
}

.novo-curve-bottom::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: clamp(24px, 4vw, 52px);
	max-width: 100%;
	background-image: var(--nc-wave-divider);
	background-repeat: no-repeat;
	background-size: 120% 100%;
	background-position: center bottom;
	pointer-events: none;
	z-index: 0;
}

/* Soft blue transition band */
.novo-transition-band {
	position: relative;
	padding: clamp(28px, 4vw, 48px) 0;
	overflow: hidden;
	background:
		linear-gradient(
			172deg,
			var(--nc-blue-light) 0%,
			var(--nc-blue-light) 42%,
			rgba(243, 246, 248, 0.65) 58%,
			var(--nc-background) 100%
		);
}

.novo-transition-band::before {
	content: "";
	position: absolute;
	inset: 0;
	max-width: 100%;
	background-image: var(--nc-wave-line), var(--nc-wave-soft-blue);
	background-repeat: no-repeat;
	background-size: 140% 40px, 115% 70%;
	background-position: center 45%, center top;
	pointer-events: none;
	opacity: 0.85;
}

/* -------------------------------------------------------------------------- */
/* Applied polish on existing structural classes                               */
/* -------------------------------------------------------------------------- */

.page-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background:
		linear-gradient(
			168deg,
			rgba(21, 159, 234, 0.1) 0%,
			rgba(21, 159, 234, 0.1) 22%,
			transparent 22%,
			transparent 48%,
			rgba(11, 47, 85, 0.04) 48%,
			rgba(11, 47, 85, 0.04) 62%,
			transparent 62%
		),
		linear-gradient(180deg, var(--nc-blue-light) 0%, var(--nc-background) 78%);
	border-bottom: 0;
}

.page-hero::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: clamp(70px, 14vw, 140px);
	max-width: 100%;
	background-image: var(--nc-wave-soft-blue), var(--nc-wave-line);
	background-repeat: no-repeat;
	background-size: 115% 100%, 130% 36px;
	background-position: center top, center 60%;
	pointer-events: none;
	z-index: 0;
}

.page-hero::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: clamp(28px, 5vw, 56px);
	max-width: 100%;
	background-image: var(--nc-wave-divider);
	background-repeat: no-repeat;
	background-size: 120% 100%;
	background-position: center bottom;
	pointer-events: none;
	z-index: 0;
}

.page-hero > .container {
	position: relative;
	z-index: 1;
}

.trust-strip {
	position: relative;
	z-index: 1;
	box-shadow: 0 -1px 0 rgba(11, 47, 85, 0.03);
}

.final-cta {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background: linear-gradient(155deg, var(--nc-navy-deep) 0%, var(--nc-navy) 48%, var(--nc-navy-mid) 100%);
	border-radius: var(--nc-radius-lg);
	box-shadow: var(--nc-shadow);
}

.final-cta::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: clamp(70px, 28%, 140px);
	max-width: 100%;
	background-image: var(--nc-wave-on-dark), var(--nc-wave-on-dark-line);
	background-repeat: no-repeat;
	background-size: 125% 100%, 140% 36px;
	background-position: center top, center 50%;
	pointer-events: none;
	z-index: 0;
}

.final-cta::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: clamp(60px, 26%, 120px);
	max-width: 100%;
	background-image: var(--nc-wave-on-dark-2), var(--nc-wave-on-dark-line);
	background-repeat: no-repeat;
	background-size: 130% 100%, 135% 32px;
	background-position: center bottom, center 40%;
	pointer-events: none;
	z-index: 0;
}

.final-cta > * {
	position: relative;
	z-index: 1;
}

/* -------------------------------------------------------------------------- */
/* Responsive — scale / simplify waves                                         */
/* -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
	.novo-wave-bg::before,
	.novo-hero-decoration::before {
		height: clamp(120px, 28vw, 240px);
		background-size:
			130% 40px,
			115% 100%,
			100% 100%;
	}

	.novo-wave-bg::after,
	.novo-hero-decoration::after {
		height: clamp(90px, 20vw, 180px);
	}
}

@media (max-width: 768px) {
	.novo-wave-bg::before,
	.novo-hero-decoration::before {
		height: clamp(88px, 26vw, 160px);
		background-size:
			160% 32px,
			130% 100%,
			100% 100%;
		opacity: 0.9;
	}

	.novo-wave-bg::after,
	.novo-hero-decoration::after {
		height: clamp(72px, 20vw, 130px);
		background-size:
			150% 28px,
			130% 80%,
			140% 65%;
		opacity: 0.8;
	}

	.novo-section-decoration::before {
		height: clamp(40px, 9vw, 72px);
		opacity: 0.65;
	}

	.novo-section-decoration::after {
		height: clamp(36px, 8vw, 64px);
		opacity: 0.55;
	}

	.novo-section-decoration {
		background:
			linear-gradient(
				168deg,
				transparent 0%,
				transparent 22%,
				rgba(21, 159, 234, 0.04) 22%,
				rgba(21, 159, 234, 0.04) 38%,
				transparent 38%
			),
			var(--nc-surface);
	}

	.final-cta::before,
	.novo-blue-layer::before {
		height: clamp(48px, 22%, 90px);
	}

	.final-cta::after,
	.novo-blue-layer::after {
		height: clamp(44px, 20%, 80px);
	}

	.page-hero::before {
		height: clamp(48px, 12vw, 90px);
	}
}

@media (max-width: 480px) {
	.novo-wave-bg::before,
	.novo-hero-decoration::before {
		height: 72px;
		background-image: var(--nc-wave-soft-blue), linear-gradient(180deg, rgba(21, 159, 234, 0.08), transparent 80%);
		background-size: 160% 100%, 100% 100%;
		background-position: center top, center top;
		opacity: 0.75;
	}

	.novo-wave-bg::after,
	.novo-hero-decoration::after {
		height: 56px;
		background-image: var(--nc-wave-navy);
		background-size: 160% 100%;
		opacity: 0.55;
	}

	.novo-section-decoration::before,
	.novo-section-decoration::after {
		height: 36px;
		opacity: 0.45;
	}

	.page-hero::after,
	.novo-gradient-shape::before,
	.novo-curve-bottom::after {
		height: 20px;
	}

	.final-cta::before,
	.final-cta::after,
	.novo-blue-layer::before,
	.novo-blue-layer::after {
		opacity: 0.7;
		height: 48px;
	}
}

@media (max-width: 375px) {
	.novo-wave-bg::before,
	.novo-hero-decoration::before {
		height: 56px;
	}

	.novo-wave-bg::after,
	.novo-hero-decoration::after {
		height: 44px;
	}
}

@media (max-width: 320px) {
	.novo-wave-bg::before,
	.novo-hero-decoration::before,
	.novo-wave-bg::after,
	.novo-hero-decoration::after,
	.page-hero::before {
		height: 40px;
	}

	.novo-section-decoration::before,
	.novo-section-decoration::after {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.novo-wave-bg::before,
	.novo-hero-decoration::before,
	.final-cta::before,
	.novo-blue-layer::before {
		transform: none;
	}
}