@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700;800;900&family=Roboto:wght@400;500;700;900&display=swap');

	html,
	body,
	body * {
		font-family: 'Tajawal', sans-serif !important;
	}

	.brand-en,
	.brand-en * {
		font-family: 'Roboto', sans-serif !important;
	}

	*,
	*::before,
	*::after {
		box-sizing: border-box;
		margin: 0;
		padding: 0
	}

	html {
		overflow-x: hidden;
		scroll-behavior: smooth
	}

	:root {
		--t: #007F80;
		--t2: #006375;
		--t3: #C7DDE1;
		--cr: #f8f9fb;
		--cr2: #f0f3f6;
		--w: #fff;
		--dk: #061a1b;
		--tx: #0d2b2c;
		--md: #2a5758;
		--mu: #6a9a9b
	}

	body {
		font-family: 'Tajawal', sans-serif;
		background: var(--cr);
		color: var(--tx);
		overflow-x: hidden;
		cursor: none
	}

	#cur,
	#curR {
		position: fixed;
		border-radius: 50%;
		pointer-events: none;
		z-index: 9999;
		top: 0;
		left: 0
	}

	#cur {
		width: 11px;
		height: 11px;
		background: var(--t);
		margin: -5.5px 0 0 -5.5px;
		mix-blend-mode: multiply;
		transition: width .2s, height .2s, margin .2s
	}

	#curR {
		width: 36px;
		height: 36px;
		border: 1.5px solid var(--t);
		opacity: .35;
		margin: -18px 0 0 -18px;
		transition: width .35s, height .35s, opacity .35s, margin .35s
	}

	.ncta {
		background: var(--t) !important;
		color: #fff !important;
		padding: .44rem 1.3rem;
		border-radius: 50px;
		font-weight: 700 !important;
		box-shadow: 0 4px 16px rgba(0, 127, 128, .3)
	}

	.ncta::after {
		display: none !important
	}

	.ncta:hover {
		transform: translateY(-2px);
		box-shadow: 0 8px 24px rgba(0, 127, 128, .42) !important
	}

	.hero {
		position: relative;
		min-height: 100vh;
		display: flex;
		align-items: center;
		overflow: hidden;
		padding-bottom: 100px;
	}

	#hCv {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		z-index: 0
	}

	.hero-ov {
		position: absolute;
		inset: 0;
		z-index: 1;
		background: linear-gradient(130deg, rgba(248, 249, 251, .97) 0%, rgba(248, 249, 251, .88) 52%, rgba(224, 240, 242, .7) 100%)
	}

	.hero-wave {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 3;
		line-height: 0
	}

	.hero-wave svg {
		display: block;
		width: 100%
	}

	.hero-grid {
		position: relative;
		z-index: 2;
		width: 100%;
		max-width: 1340px;
		margin: 0 auto;
		padding: 110px 5% 60px;
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 4rem;
		align-items: center
	}

	.h-badge {
		display: inline-flex;
		align-items: center;
		gap: .5rem;
		padding: .36rem 1rem .36rem .5rem;
		background: rgba(0, 127, 128, .09);
		border: 1px solid rgba(0, 127, 128, .2);
		border-radius: 50px;
		margin-bottom: 1.8rem;
		opacity: 0;
		animation: aFU .7s ease forwards .2s
	}

	.bpulse {
		width: 8px;
		height: 8px;
		background: var(--t);
		border-radius: 50%;
		animation: bping 2s infinite;
		flex-shrink: 0
	}

	@keyframes bping {

		0%,
		100% {
			box-shadow: 0 0 0 0 rgba(0, 127, 128, .5)
		}

		50% {
			box-shadow: 0 0 0 7px rgba(0, 127, 128, 0)
		}
	}

	.h-badge span {
		font-size: .78rem;
		font-weight: 700;
		color: var(--t2)
	}

	.h-title {
		margin-bottom: 1.6rem;
		padding-top: .3rem
	}

	.hln {
		display: block;
		padding: .12em 0;
		line-height: 1.1
	}

	.hlni {
		display: block;
		font-size: clamp(2.8rem, 4.6vw, 5rem);
		font-weight: 900;
		line-height: 1.15;
		letter-spacing: -2px;
		color: var(--tx);
		opacity: 0;
		transform: translateY(30px)
	}

	.hln:nth-child(1) .hlni {
		animation: wUp .9s cubic-bezier(.16, 1, .3, 1) forwards .3s
	}

	.hln:nth-child(2) .hlni {
		animation: wUp .9s cubic-bezier(.16, 1, .3, 1) forwards .5s;
		color: var(--t)
	}

	.hln:nth-child(3) .hlni {
		animation: wUp .9s cubic-bezier(.16, 1, .3, 1) forwards .7s
	}

	@keyframes wUp {
		to {
			opacity: 1;
			transform: translateY(0)
		}
	}

	@keyframes aFU {
		from {
			opacity: 0;
			transform: translateY(16px)
		}

		to {
			opacity: 1;
			transform: translateY(0)
		}
	}

	.h-sub {
		font-size: 1.02rem;
		color: var(--md);
		line-height: 1.88;
		margin-bottom: 2.2rem;
		max-width: 460px;
		opacity: 0;
		animation: aFU .7s ease forwards 1s
	}

	.h-btns {
		display: flex;
		gap: .9rem;
		flex-wrap: wrap;
		opacity: 0;
		animation: aFU .7s ease forwards 1.2s
	}

	.btn-fill {
		display: inline-flex;
		align-items: center;
		gap: .6rem;
		background: var(--t);
		color: #fff;
		padding: .88rem 2.2rem;
		border-radius: 50px;
		font-family: 'Tajawal', sans-serif;
		font-size: 1rem;
		font-weight: 800;
		text-decoration: none;
		border: none;
		cursor: none;
		box-shadow: 0 10px 30px rgba(0, 127, 128, .38);
		transition: transform .3s, box-shadow .3s;
		position: relative;
		overflow: hidden
	}

	.btn-fill::before {
		content: '';
		position: absolute;
		inset: 0;
		background: linear-gradient(135deg, rgba(255, 255, 255, .2), transparent);
		opacity: 0;
		transition: opacity .3s
	}

	.btn-fill:hover {
		transform: translateY(-3px) scale(1.02);
		box-shadow: 0 18px 44px rgba(0, 127, 128, .5)
	}

	.btn-fill:hover::before {
		opacity: 1
	}

	.btn-ghost {
		display: inline-flex;
		align-items: center;
		gap: .6rem;
		background: transparent;
		color: var(--t);
		padding: .88rem 2rem;
		border-radius: 50px;
		font-family: 'Tajawal', sans-serif;
		font-size: .95rem;
		font-weight: 700;
		border: 2px solid rgba(0, 127, 128, .22);
		cursor: none;
		text-decoration: none;
		transition: all .3s
	}

	.btn-ghost:hover {
		border-color: var(--t);
		background: rgba(0, 127, 128, .06);
		transform: translateY(-2px)
	}

	.h-pills {
		display: flex;
		gap: .8rem;
		flex-wrap: wrap;
		margin-top: 2.5rem;
		opacity: 0;
		animation: aFU .7s ease forwards 1.4s
	}

	.pill {
		display: flex;
		align-items: center;
		gap: .55rem;
		background: var(--w);
		border: 1px solid rgba(199, 221, 225, .6);
		border-radius: 50px;
		padding: .42rem 1rem;
		box-shadow: 0 4px 16px rgba(0, 127, 128, .07)
	}

	.pill-v {
		font-size: .98rem;
		font-weight: 900;
		color: var(--tx)
	}

	.pill-sep {
		width: 1px;
		height: 20px;
		background: rgba(199, 221, 225, .8)
	}

	.pill-l {
		font-size: .72rem;
		color: var(--mu);
		font-weight: 600
	}

	.hero-vis {
		opacity: 0;
		animation: visIn 1.1s cubic-bezier(.16, 1, .3, 1) forwards .6s;
		position: relative
	}

	@keyframes visIn {
		from {
			opacity: 0;
			transform: translateY(50px) scale(.93)
		}

		to {
			opacity: 1;
			transform: none
		}
	}

	.hv-blob {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 440px;
		height: 440px;
		border-radius: 50%;
		background: radial-gradient(ellipse, rgba(199, 221, 225, .5), rgba(0, 127, 128, .06) 70%);
		animation: blobP 7s ease-in-out infinite;
		pointer-events: none
	}

	@keyframes blobP {

		0%,
		100% {
			transform: translate(-50%, -50%) scale(1)
		}

		50% {
			transform: translate(-50%, -50%) scale(1.05)
		}
	}

	.hv-geo {
		position: absolute;
		pointer-events: none
	}

	.hg1 {
		width: 52px;
		height: 52px;
		background: linear-gradient(135deg, var(--t3), var(--t));
		border-radius: 14px;
		top: 6%;
		right: 4%;
		opacity: .65;
		animation: gf1 5s ease-in-out infinite;
		transform: rotate(22deg)
	}

	.hg2 {
		width: 36px;
		height: 36px;
		background: linear-gradient(135deg, rgba(199, 221, 225, .9), var(--t3));
		border-radius: 50%;
		bottom: 18%;
		left: 6%;
		opacity: .7;
		animation: gf2 7s ease-in-out infinite
	}

	.hg3 {
		width: 42px;
		height: 42px;
		border: 3px solid rgba(0, 127, 128, .22);
		border-radius: 12px;
		top: 22%;
		left: 8%;
		animation: gf1 9s ease-in-out infinite 1s;
		transform: rotate(12deg)
	}

	.hg4 {
		width: 56px;
		height: 7px;
		background: linear-gradient(90deg, var(--t3), var(--t));
		border-radius: 4px;
		bottom: 28%;
		right: 8%;
		opacity: .45;
		animation: gf2 6s ease-in-out infinite .5s
	}

	@keyframes gf1 {

		0%,
		100% {
			transform: rotate(22deg) translateY(0)
		}

		50% {
			transform: rotate(22deg) translateY(-14px)
		}
	}

	@keyframes gf2 {

		0%,
		100% {
			transform: translateY(0)
		}

		50% {
			transform: translateY(-12px)
		}
	}

	.hv-card {
		position: relative;
		z-index: 2;
		background: var(--w);
		border-radius: 24px;
		padding: 1.5rem;
		width: 310px;
		margin: 0 auto;
		box-shadow: 0 36px 90px rgba(0, 127, 128, .14), 0 8px 26px rgba(0, 0, 0, .07);
		animation: cardF 7s ease-in-out infinite 1.5s
	}

	@keyframes cardF {

		0%,
		100% {
			transform: translateY(0)
		}

		50% {
			transform: translateY(-15px)
		}
	}

	.hv-tag {
		position: absolute;
		background: var(--w);
		border-radius: 14px;
		padding: .6rem .85rem;
		box-shadow: 0 12px 28px rgba(0, 0, 0, .1);
		z-index: 3
	}

	.hvt1 {
		top: -16px;
		left: -28px;
		animation: gf2 5.5s ease-in-out infinite
	}

	.hvt2 {
		bottom: 20px;
		right: -30px;
		animation: gf1 6.5s ease-in-out infinite .7s
	}

	.hvt-i {
		font-size: 1rem;
		margin-bottom: .15rem
	}

	.hvt-v {
		font-weight: 900;
		color: var(--tx);
		font-size: .85rem
	}

	.hvt-l {
		font-size: .6rem;
		color: var(--mu)
	}

	.vc-hd {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: .85rem
	}

	.vc-lbl {
		font-size: .65rem;
		font-weight: 700;
		color: var(--mu);
		text-transform: uppercase;
		letter-spacing: .5px
	}

	.vc-live {
		display: flex;
		align-items: center;
		gap: .25rem;
		font-size: .64rem;
		font-weight: 700;
		color: var(--t)
	}

	.vdot {
		width: 5px;
		height: 5px;
		background: #22c55e;
		border-radius: 50%;
		animation: bping 2s infinite
	}

	.vc-n {
		font-size: 2.3rem;
		font-weight: 900;
		color: var(--tx);
		line-height: 1;
		margin-bottom: .18rem
	}

	.vc-up {
		font-size: .66rem;
		color: #22c55e;
		font-weight: 700;
		margin-bottom: .75rem
	}

	.vc-bars {
		display: flex;
		align-items: flex-end;
		gap: 3px;
		height: 38px;
		margin-bottom: .75rem
	}

	.vb {
		flex: 1;
		background: var(--t3);
		border-radius: 2px 2px 0 0
	}

	.vb.hi {
		background: linear-gradient(to top, var(--t2), var(--t))
	}

	.vc-hr {
		height: 1px;
		background: var(--cr2);
		margin-bottom: .75rem
	}

	.vc-row {
		display: flex;
		align-items: center;
		gap: .55rem;
		margin-bottom: .45rem
	}

	.vc-row:last-child {
		margin-bottom: 0
	}

	.vd {
		width: 22px;
		height: 22px;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: .55rem;
		font-weight: 700;
		color: #fff;
		flex-shrink: 0
	}

	.vd1 {
		background: var(--t)
	}

	.vd2 {
		background: #f59e0b
	}

	.vd3 {
		background: #6366f1
	}

	.vi {
		flex: 1
	}

	.vi-t {
		font-size: .67rem;
		font-weight: 700;
		color: var(--tx);
		margin-bottom: .12rem
	}

	.vi-b {
		height: 4px;
		background: var(--cr2);
		border-radius: 4px;
		overflow: hidden
	}

	.vi-f {
		height: 100%;
		background: linear-gradient(90deg, var(--t3), var(--t));
		border-radius: 4px
	}

	.vi-p {
		font-size: .62rem;
		font-weight: 800;
		color: var(--t);
		flex-shrink: 0
	}

	.wc-ic svg,
	.fgc-ic svg {
		display: block;
		flex-shrink: 0
	}

	.fi-ic svg,
	.fgf-ic svg,
	.cc-ico svg,
	.ww-ic svg,
	.hvt-i svg,
	.pfl-ico svg {
		display: block
	}

	.sx {
		opacity: 0;
		will-change: transform, opacity
	}

	.sx.fr {
		transform: translateX(90px) rotate(1.5deg)
	}

	.sx.fl {
		transform: translateX(-90px) rotate(-1.5deg)
	}

	.sx.fb {
		transform: translateY(65px) scale(.96)
	}

	.sx.fz {
		transform: scale(.84)
	}

	.sx.ftr {
		transform: rotate(7deg) scale(.9) translateY(40px)
	}

	.sx.ftl {
		transform: rotate(-7deg) scale(.9) translateY(40px)
	}

	.sx.on {
		opacity: 1 !important;
		transform: none !important;
		transition: opacity .9s cubic-bezier(.16, 1, .3, 1), transform .9s cubic-bezier(.16, 1, .3, 1)
	}

	.d1 {
		transition-delay: .1s !important
	}

	.d2 {
		transition-delay: .2s !important
	}

	.d3 {
		transition-delay: .3s !important
	}

	.d4 {
		transition-delay: .4s !important
	}

	.d5 {
		transition-delay: .5s !important
	}

	.d6 {
		transition-delay: .6s !important
	}

	.wrap {
		max-width: 1340px;
		margin: 0 auto
	}

	.stag {
		display: inline-block;
		padding: .27rem .82rem;
		background: rgba(199, 221, 225, .5);
		border: 1px solid rgba(0, 127, 128, .17);
		color: var(--t2);
		border-radius: 50px;
		font-size: .75rem;
		font-weight: 700;
		margin-bottom: .85rem
	}

	.stitle {
		font-size: clamp(2.2rem, 3.8vw, 3.4rem);
		font-weight: 900;
		line-height: 1.1;
		color: var(--tx);
		margin-bottom: .9rem
	}

	.stitle .hl {
		color: var(--t)
	}

	.ssub {
		font-size: .97rem;
		color: var(--md);
		line-height: 1.85
	}

	.sec-c {
		text-align: center
	}

	.sec-c .ssub {
		max-width: 520px;
		margin: 0 auto
	}

	.what {
		padding: 130px 5%;
		background: var(--w);
		position: relative;
		overflow: hidden
	}

	.what-bg-txt {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		font-size: 22vw;
		font-weight: 900;
		color: rgba(0, 127, 128, .022);
		white-space: nowrap;
		pointer-events: none;
		letter-spacing: -8px;
		user-select: none
	}

	.what-grid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 1.4rem;
		margin-top: 3rem
	}

	.wc-wide {
		grid-column: 1/-1;
		display: flex;
		align-items: center;
		gap: 2rem;
		background: linear-gradient(135deg, var(--t2), var(--t));
		border-radius: 26px;
		padding: 2.2rem 2.6rem;
		cursor: default;
		position: relative;
		overflow: hidden;
		transition: transform .4s cubic-bezier(.16, 1, .3, 1), box-shadow .4s;
		flex-wrap: wrap
	}

	.wc-wide::before {
		content: '';
		position: absolute;
		inset: 0;
		background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
		background-size: 40px 40px
	}

	.wc-wide:hover {
		transform: translateY(-5px);
		box-shadow: 0 26px 65px rgba(0, 127, 128, .32)
	}

	.ww-ic {
		width: 54px;
		height: 54px;
		border-radius: 16px;
		background: rgba(255, 255, 255, .2);
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 1.5rem;
		flex-shrink: 0;
		transition: transform .45s cubic-bezier(.34, 1.56, .64, 1)
	}

	.wc-wide:hover .ww-ic {
		transform: rotate(-10deg) scale(1.15)
	}

	.ww-body {
		flex: 1;
		min-width: 200px;
		position: relative;
		z-index: 1
	}

	.ww-body h3 {
		font-size: 1.18rem;
		font-weight: 800;
		color: #fff;
		margin-bottom: .4rem
	}

	.ww-body p {
		font-size: .86rem;
		color: rgba(255, 255, 255, .75);
		line-height: 1.75
	}

	.ww-stat {
		flex-shrink: 0;
		position: relative;
		z-index: 1;
		text-align: center
	}

	.ww-stat .sv {
		font-size: 2.6rem;
		font-weight: 900;
		color: #fff;
		line-height: 1
	}

	.ww-stat .sl {
		font-size: .72rem;
		color: rgba(255, 255, 255, .65);
		margin-top: .2rem
	}

	.wc {
		background: var(--cr);
		border-radius: 24px;
		padding: 2.2rem;
		border: 1.5px solid rgba(199, 221, 225, .4);
		position: relative;
		overflow: hidden;
		cursor: default;
		transition: all .5s cubic-bezier(.16, 1, .3, 1)
	}

	.wc::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		height: 3px;
		background: linear-gradient(90deg, var(--t3), var(--t));
		transform: scaleX(0);
		transform-origin: right;
		transition: transform .5s;
		border-radius: 0 0 24px 24px
	}

	.wc:hover {
		background: var(--w);
		border-color: var(--t3);
		transform: translateY(-8px);
		box-shadow: 0 22px 58px rgba(0, 127, 128, .1)
	}

	.wc:hover::after {
		transform: scaleX(1)
	}

	.wc-n {
		position: absolute;
		bottom: -16px;
		left: 1.2rem;
		font-size: 6rem;
		font-weight: 900;
		color: rgba(199, 221, 225, .28);
		line-height: 1;
		pointer-events: none;
		user-select: none;
		transition: color .4s
	}

	.wc:hover .wc-n {
		color: rgba(0, 127, 128, .06)
	}

	.wc-ic {
		width: 52px;
		height: 52px;
		border-radius: 15px;
		background: linear-gradient(135deg, rgba(199, 221, 225, .6), rgba(0, 127, 128, .12));
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 1.4rem;
		margin-bottom: 1.1rem;
		transition: transform .45s cubic-bezier(.34, 1.56, .64, 1)
	}

	.wc:hover .wc-ic {
		transform: rotate(-10deg) scale(1.15)
	}

	.wc h3 {
		font-size: 1.05rem;
		font-weight: 800;
		color: var(--tx);
		margin-bottom: .46rem
	}

	.wc p {
		font-size: .84rem;
		color: var(--md);
		line-height: 1.78
	}

	.power {
		padding: 160px 5%;
		position: relative;
		overflow: hidden;
		background: transparent
	}

	.pw-bg {
		position: absolute;
		inset: 0;
		z-index: 0;
		pointer-events: none
	}

	.pw-bg svg {
		position: absolute;
		width: 100%;
		left: 0
	}

	.pw-bg .pt {
		top: -1px
	}

	.pw-bg .pb {
		bottom: -1px;
		transform: scaleY(-1)
	}

	.pw-fill {
		position: absolute;
		top: 75px;
		bottom: 75px;
		left: 0;
		right: 0;
		background: linear-gradient(155deg, var(--t2) 0%, var(--t) 58%, #009a9b 100%)
	}

	.pw-gbg {
		position: absolute;
		top: 75px;
		bottom: 75px;
		left: 0;
		right: 0;
		background-image: linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
		background-size: 50px 50px
	}

	.pw-ghost {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		font-size: 18vw;
		font-weight: 900;
		color: rgba(255, 255, 255, .028);
		white-space: nowrap;
		pointer-events: none;
		letter-spacing: -6px;
		z-index: 1
	}

	.pw-circ {
		position: absolute;
		border-radius: 50%;
		border: 1px solid rgba(255, 255, 255, .08);
		z-index: 1
	}

	.pwc1 {
		width: 520px;
		height: 520px;
		top: -160px;
		left: -130px
	}

	.pwc2 {
		width: 340px;
		height: 340px;
		bottom: -90px;
		right: 14%
	}

	.pwc3 {
		width: 170px;
		height: 170px;
		top: 30%;
		right: 7%;
		border-style: dashed;
		animation: cspin 22s linear infinite
	}

	@keyframes cspin {
		to {
			transform: rotate(360deg)
		}
	}

	.pw-inner {
		max-width: 1340px;
		margin: 0 auto;
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 7rem;
		align-items: center;
		position: relative;
		z-index: 2
	}

	.pw-tag {
		background: rgba(255, 255, 255, .15);
		border: 1px solid rgba(255, 255, 255, .22);
		color: rgba(255, 255, 255, .92)
	}

	.pw-h {
		color: #fff;
		font-size: clamp(2.2rem, 3.8vw, 3.4rem);
		font-weight: 900;
		line-height: 1.1;
		margin-bottom: .9rem
	}

	.pw-p {
		color: rgba(255, 255, 255, .76);
		font-size: .96rem;
		line-height: 1.85;
		margin-bottom: 2.4rem
	}

	.flist {
		display: flex;
		flex-direction: column;
		gap: .9rem
	}

	.fi {
		display: flex;
		align-items: flex-start;
		gap: 1rem;
		padding: 1.05rem 1.3rem;
		background: rgba(255, 255, 255, .07);
		border: 1px solid rgba(255, 255, 255, .1);
		border-radius: 18px;
		transition: all .35s cubic-bezier(.16, 1, .3, 1);
		cursor: default
	}

	.fi:hover {
		background: rgba(255, 255, 255, .14);
		transform: translateX(-8px)
	}

	.fi-ic {
		width: 42px;
		height: 42px;
		border-radius: 12px;
		background: rgba(255, 255, 255, .15);
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 1.1rem;
		flex-shrink: 0;
		transition: transform .35s
	}

	.fi:hover .fi-ic {
		transform: scale(1.1) rotate(-5deg)
	}

	.fi-t {
		font-size: .88rem;
		font-weight: 800;
		color: #fff;
		margin-bottom: .2rem
	}

	.fi-d {
		font-size: .77rem;
		color: rgba(255, 255, 255, .62);
		line-height: 1.65
	}

	.pw-vis {
		position: relative
	}

	.pw-badges {
		display: flex;
		gap: .8rem;
		margin-bottom: 1.2rem;
		flex-wrap: wrap
	}

	.pw-fl {
		background: rgba(255, 255, 255, .15);
		backdrop-filter: blur(14px);
		border: 1px solid rgba(255, 255, 255, .22);
		border-radius: 14px;
		padding: .68rem .88rem;
		color: #fff;
		font-size: .74rem;
		display: flex;
		align-items: center;
		gap: .7rem
	}

	.pw-fl .pfl-ico {
		font-size: 1.2rem;
		flex-shrink: 0
	}

	.pw-fl .pfl-val {
		font-weight: 900;
		font-size: .9rem;
		line-height: 1
	}

	.pw-fl .pfl-lbl {
		font-size: .62rem;
		opacity: .72;
		margin-top: .1rem
	}

	.pw-badges .pw-fl:first-child {
		animation: badgeF1 5s ease-in-out infinite
	}

	.pw-badges .pw-fl:last-child {
		animation: badgeF2 6.5s ease-in-out infinite .5s
	}

	@keyframes badgeF1 {

		0%,
		100% {
			transform: translateY(0)
		}

		50% {
			transform: translateY(-5px)
		}
	}

	@keyframes badgeF2 {

		0%,
		100% {
			transform: translateY(0)
		}

		50% {
			transform: translateY(-6px)
		}
	}

	.pw-card {
		background: rgba(255, 255, 255, .1);
		backdrop-filter: blur(22px);
		border: 1px solid rgba(255, 255, 255, .18);
		border-radius: 26px;
		padding: 1.8rem;
		color: #fff
	}

	.pch {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 1.4rem
	}

	.pch h4 {
		font-size: .95rem;
		font-weight: 800
	}

	.pcb {
		background: rgba(255, 255, 255, .17);
		padding: .2rem .68rem;
		border-radius: 50px;
		font-size: .66rem;
		font-weight: 700;
		display: flex;
		align-items: center;
		gap: .26rem
	}

	.prow {
		margin-bottom: 1rem
	}

	.phd {
		display: flex;
		justify-content: space-between;
		font-size: .76rem;
		font-weight: 600;
		margin-bottom: .36rem;
		opacity: .9
	}

	.ptr {
		height: 7px;
		background: rgba(255, 255, 255, .14);
		border-radius: 7px;
		overflow: hidden
	}

	.pf {
		height: 100%;
		background: linear-gradient(90deg, rgba(255, 255, 255, .35), rgba(255, 255, 255, .88));
		border-radius: 7px
	}

	.p3g {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: .8rem;
		margin-top: 1.4rem
	}

	.pst {
		background: rgba(255, 255, 255, .1);
		border-radius: 14px;
		padding: .85rem;
		text-align: center
	}

	.pst .n {
		font-size: 1.4rem;
		font-weight: 900
	}

	.pst .l {
		font-size: .62rem;
		opacity: .65;
		margin-top: .12rem
	}

	.feats {
		padding: 130px 5%;
		background: var(--cr);
		position: relative;
		overflow: hidden
	}

	.feats-bgx {
		position: absolute;
		bottom: -40px;
		left: -20px;
		font-size: 20vw;
		font-weight: 900;
		color: rgba(0, 127, 128, .022);
		white-space: nowrap;
		pointer-events: none;
		letter-spacing: -8px;
		user-select: none
	}

	.fg-grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 1.3rem;
		margin-top: 3rem
	}

	.fg-full {
		grid-column: 1/-1;
		display: flex;
		align-items: center;
		gap: 2rem;
		background: linear-gradient(135deg, var(--t2), var(--t));
		border-radius: 22px;
		padding: 2rem 2.4rem;
		border: none;
		cursor: default;
		transition: transform .45s cubic-bezier(.16, 1, .3, 1), box-shadow .45s;
		position: relative;
		overflow: hidden;
		flex-wrap: wrap
	}

	.fg-full::before {
		content: '';
		position: absolute;
		inset: 0;
		background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
		background-size: 36px 36px
	}

	.fg-full:hover {
		transform: translateY(-5px);
		box-shadow: 0 22px 58px rgba(0, 127, 128, .3)
	}

	.fgf-n {
		font-size: 3.8rem;
		font-weight: 900;
		color: rgba(255, 255, 255, .1);
		line-height: 1;
		flex-shrink: 0;
		user-select: none
	}

	.fgf-ic {
		width: 48px;
		height: 48px;
		border-radius: 14px;
		background: rgba(255, 255, 255, .2);
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 1.35rem;
		flex-shrink: 0;
		transition: transform .45s cubic-bezier(.34, 1.56, .64, 1);
		position: relative;
		z-index: 1
	}

	.fg-full:hover .fgf-ic {
		transform: rotate(-10deg) scale(1.12)
	}

	.fgf-body {
		flex: 1;
		min-width: 200px;
		position: relative;
		z-index: 1
	}

	.fgf-body h3 {
		font-size: 1.05rem;
		font-weight: 800;
		color: #fff;
		margin-bottom: .38rem
	}

	.fgf-body p {
		font-size: .84rem;
		color: rgba(255, 255, 255, .74);
		line-height: 1.75
	}

	.fgf-badge {
		flex-shrink: 0;
		position: relative;
		z-index: 1;
		background: rgba(255, 255, 255, .18);
		border: 1px solid rgba(255, 255, 255, .25);
		color: #fff;
		padding: .32rem .88rem;
		border-radius: 50px;
		font-size: .76rem;
		font-weight: 700;
		white-space: nowrap
	}

	@media(max-width:600px) {
		.fgf-n {
			display: none
		}

		.fgf-badge {
			width: 100%;
			text-align: center;
			margin-top: .5rem
		}
	}

	.fgc {
		display: flex;
		align-items: center;
		gap: 1.5rem;
		background: var(--w);
		border-radius: 22px;
		padding: 1.85rem 2rem;
		border: 1.5px solid rgba(199, 221, 225, .4);
		cursor: default;
		position: relative;
		overflow: hidden;
		transition: all .5s cubic-bezier(.16, 1, .3, 1)
	}

	.fgc::before {
		content: '';
		position: absolute;
		right: 0;
		top: 0;
		bottom: 0;
		width: 4px;
		background: linear-gradient(to bottom, var(--t3), var(--t));
		transform: scaleY(0);
		transform-origin: top;
		transition: transform .45s
	}

	.fgc:hover {
		background: var(--cr);
		border-color: var(--t3);
		transform: translateX(-6px);
		box-shadow: 0 14px 40px rgba(0, 127, 128, .09)
	}

	.fgc:hover::before {
		transform: scaleY(1)
	}

	.fgc-n {
		font-size: 2.6rem;
		font-weight: 900;
		color: rgba(199, 221, 225, .5);
		line-height: 1;
		flex-shrink: 0;
		min-width: 44px;
		transition: color .4s, transform .4s
	}

	.fgc:hover .fgc-n {
		color: rgba(0, 127, 128, .13);
		transform: scale(1.08)
	}

	.fgc-ic {
		width: 48px;
		height: 48px;
		border-radius: 14px;
		background: linear-gradient(135deg, rgba(199, 221, 225, .6), rgba(0, 127, 128, .12));
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 1.3rem;
		flex-shrink: 0;
		transition: transform .45s cubic-bezier(.34, 1.56, .64, 1)
	}

	.fgc:hover .fgc-ic {
		transform: rotate(-12deg) scale(1.15)
	}

	.fgc-b h3 {
		font-size: .97rem;
		font-weight: 800;
		color: var(--tx);
		margin-bottom: .36rem;
		transition: color .3s
	}

	.fgc:hover .fgc-b h3 {
		color: var(--t)
	}

	.fgc-b p {
		font-size: .83rem;
		color: var(--md);
		line-height: 1.75
	}

	.cta {
		padding: 0 5% 130px;
		background: var(--cr)
	}

	.cta-hd {
		text-align: center;
		margin-bottom: 3.5rem
	}

	.cta-hd h2 {
		font-size: clamp(2.2rem, 4vw, 3.8rem);
		font-weight: 900;
		color: var(--tx);
		line-height: 1.1;
		margin-bottom: .9rem
	}

	.cta-hd h2 .hl {
		color: var(--t)
	}

	.cta-hd p {
		font-size: 1rem;
		color: var(--md);
		line-height: 1.82;
		max-width: 520px;
		margin: 0 auto
	}

	.cta-grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 1.4rem
	}

	.cta-card {
		border-radius: 30px;
		padding: 3.5rem 3rem;
		position: relative;
		overflow: hidden;
		cursor: none;
		transition: transform .4s cubic-bezier(.16, 1, .3, 1), box-shadow .4s
	}

	.cta-card:hover {
		transform: translateY(-8px)
	}

	.cc1 {
		background: linear-gradient(148deg, var(--t2), var(--t));
		box-shadow: 0 20px 58px rgba(0, 127, 128, .28)
	}

	.cc2 {
		background: var(--w);
		border: 2px solid rgba(199, 221, 225, .5);
		box-shadow: 0 10px 32px rgba(0, 127, 128, .07)
	}

	.cc1:hover {
		box-shadow: 0 30px 78px rgba(0, 127, 128, .42)
	}

	.cc2:hover {
		border-color: var(--t3);
		box-shadow: 0 20px 50px rgba(0, 127, 128, .12)
	}

	.cc1::before {
		content: '';
		position: absolute;
		inset: 0;
		background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
		background-size: 36px 36px
	}

	.cc1::after {
		content: '';
		position: absolute;
		width: 260px;
		height: 260px;
		border-radius: 50%;
		border: 1px solid rgba(255, 255, 255, .07);
		bottom: -100px;
		left: -60px
	}

	.cc-tag {
		position: relative;
		z-index: 1;
		display: inline-flex;
		align-items: center;
		gap: .4rem;
		padding: .24rem .76rem;
		border-radius: 50px;
		font-size: .71rem;
		font-weight: 700;
		margin-bottom: 1.5rem
	}

	.cc1 .cc-tag {
		background: rgba(255, 255, 255, .18);
		color: rgba(255, 255, 255, .92)
	}

	.cc2 .cc-tag {
		background: rgba(0, 127, 128, .09);
		color: var(--t2);
		border: 1px solid rgba(0, 127, 128, .15)
	}

	.cc-tdot {
		width: 6px;
		height: 6px;
		border-radius: 50%;
		background: currentColor;
		animation: bping 2s infinite
	}

	.cc-ico {
		width: 54px;
		height: 54px;
		border-radius: 16px;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 1.5rem;
		margin-bottom: 1.5rem;
		position: relative;
		z-index: 1
	}

	.cc1 .cc-ico {
		background: rgba(255, 255, 255, .18)
	}

	.cc2 .cc-ico {
		background: linear-gradient(135deg, rgba(199, 221, 225, .6), rgba(0, 127, 128, .12))
	}

	.cta-card h3 {
		position: relative;
		z-index: 1;
		font-size: clamp(1.5rem, 2.5vw, 2rem);
		font-weight: 900;
		line-height: 1.18;
		margin-bottom: .8rem
	}

	.cc1 h3 {
		color: #fff
	}

	.cc2 h3 {
		color: var(--tx)
	}

	.cta-card>p {
		position: relative;
		z-index: 1;
		font-size: .92rem;
		line-height: 1.82;
		margin-bottom: 2rem
	}

	.cc1>p {
		color: rgba(255, 255, 255, .76)
	}

	.cc2>p {
		color: var(--md)
	}

	.cc-btn {
		position: relative;
		z-index: 1;
		display: inline-flex;
		align-items: center;
		gap: .6rem;
		padding: .86rem 2.1rem;
		border-radius: 50px;
		font-family: 'Tajawal', sans-serif;
		font-size: .94rem;
		font-weight: 800;
		text-decoration: none;
		border: none;
		cursor: none;
		transition: all .3s
	}

	.cc1 .cc-btn {
		background: #fff;
		color: var(--t);
		box-shadow: 0 6px 20px rgba(0, 0, 0, .13)
	}

	.cc1 .cc-btn:hover {
		transform: translateY(-2px) scale(1.03);
		box-shadow: 0 10px 28px rgba(0, 0, 0, .2)
	}

	.cc2 .cc-btn {
		background: var(--t);
		color: #fff;
		box-shadow: 0 8px 24px rgba(0, 127, 128, .34)
	}

	.cc2 .cc-btn:hover {
		transform: translateY(-2px) scale(1.03);
		box-shadow: 0 14px 36px rgba(0, 127, 128, .5)
	}



	@media(max-width:1100px) {
		.hero-grid {
			grid-template-columns: 1fr;
			text-align: center
		}

		.h-btns,
		.h-pills {
			justify-content: center
		}

		.h-sub {
			max-width: 100%
		}

		.hero-vis {
			display: none
		}

		.pw-inner {
			grid-template-columns: 1fr
		}

		.what-grid,
		.cta-grid {
			grid-template-columns: 1fr
		}

		.wc-wide {
			flex-direction: column;
			align-items: flex-start;
			gap: 1rem
		}

		.fg-grid {
			grid-template-columns: 1fr
		}

		.ft-grid {
			grid-template-columns: 1fr 1fr
		}
	}

	@media(max-width:768px) {
		nav .navl {
			display: none
		}

		.ft-grid {
			grid-template-columns: 1fr
		}

		.cta-card {
			padding: 2.5rem 2rem
		}
	}

	#gotoTop {
		position: fixed;
		bottom: 32px;
		left: 32px;
		z-index: 9999;
		width: 48px;
		height: 48px;
		border-radius: 14px;
		background: linear-gradient(135deg, var(--teal2) 0%, var(--teal-lt) 100%);
		color: #fff;
		border: none;
		cursor: pointer;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 8px 24px rgba(103, 58, 183, 0.35);
		opacity: 0;
		transform: translateY(16px) scale(0.85);
		transition: opacity 0.35s ease, transform 0.35s ease, box-shadow 0.25s ease;
		pointer-events: none;
	}

	#gotoTop.visible {
		opacity: 1;
		transform: translateY(0) scale(1);
		pointer-events: auto;
	}

	#gotoTop:hover {
		transform: translateY(-3px) scale(1.08);
		box-shadow: 0 14px 32px rgba(103, 58, 183, 0.45);
	}

	.integration-sec {
		padding: 120px 5%;
		background: var(--w);
	}

	.intg-grid {
		display: grid;
		grid-template-columns: 280px repeat(2, 1fr);
		grid-template-rows: auto auto;
		gap: 1.2rem;
		margin-top: 3rem;
		align-items: stretch;
	}

	.intg-main {
		grid-row: 1 / 3;
		grid-column: 1;
		/* ← اليمين في RTL */
		background: linear-gradient(155deg, var(--t2), var(--t));
		border-radius: 22px;
		padding: 2.5rem 2rem;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		text-align: center;
		gap: .8rem;
		box-shadow: 0 20px 55px rgba(0, 127, 128, .28);
	}

	.intg-card {
		background: var(--cr);
		border-radius: 22px;
		padding: 2rem;
		border: 1.5px solid rgba(199, 221, 225, .4);
		position: relative;
		overflow: hidden;
		cursor: default;
		transition: all .5s cubic-bezier(.16, 1, .3, 1);
		display: flex;
		flex-direction: column;
		gap: .7rem;
	}

	.intg-card:hover {
		background: var(--w);
		border-color: var(--t3);
		transform: translateY(-6px);
		box-shadow: 0 18px 50px rgba(0, 127, 128, .1);
	}

	.intg-ico {
		width: 52px;
		height: 52px;
		border-radius: 15px;
		background: linear-gradient(135deg, rgba(199, 221, 225, .6), rgba(0, 127, 128, .12));
		display: flex;
		align-items: center;
		justify-content: center;
		transition: transform .45s cubic-bezier(.34, 1.56, .64, 1);
	}

	.intg-card:hover .intg-ico {
		transform: rotate(-10deg) scale(1.12);
	}

	.intg-card h3 {
		font-size: 1.05rem;
		font-weight: 800;
		color: var(--tx);
	}

	.intg-card p {
		font-size: .84rem;
		color: var(--md);
		line-height: 1.75;
		flex: 1;
	}

	.intg-badge {
		display: inline-flex;
		align-items: center;
		padding: .22rem .75rem;
		background: rgba(0, 127, 128, .09);
		border: 1px solid rgba(0, 127, 128, .18);
		color: var(--t2);
		border-radius: 50px;
		font-size: .72rem;
		font-weight: 700;
		width: fit-content;
	}



	.intg-main-ico {
		width: 80px;
		height: 80px;
		border-radius: 22px;
		background: rgba(255, 255, 255, .18);
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: .5rem;
	}

	@media(max-width:1100px) {
		.intg-grid {
			grid-template-columns: 1fr 1fr;
			grid-template-rows: auto;
		}

		.intg-main {
			grid-row: auto;
			grid-column: 1 / -1;
			flex-direction: row;
			justify-content: center;
			gap: 1.5rem;
			padding: 1.8rem 2rem;
		}
	}

	@media(max-width:600px) {
		.intg-grid {
			grid-template-columns: 1fr;
		}

		.intg-main {
			flex-direction: column;
		}
	}