/* =====================================================
           ROOT
        ====================================================== */

        :root {

            --cf-green:
                #22c55e;

            --cf-green-dark:
                #15803d;

            --cf-green-soft:
                #dcfce7;

            --cf-navy:
                #071a12;

            --cf-navy-2:
                #0b2a1d;

            --cf-text:
                #17201c;

            --cf-muted:
                #64748b;

        }


        /* =====================================================
           BODY
        ====================================================== */

        html {

            scroll-behavior:
                smooth;

        }


		body {
			margin: 0;
			min-height: 100vh;
			font-family: "Inter", sans-serif;

			background:
				radial-gradient(
					circle at 10% 15%,
					rgba(34, 197, 94, .18),
					transparent 28%
				),
				radial-gradient(
					circle at 90% 35%,
					rgba(59, 130, 246, .12),
					transparent 30%
				),
				linear-gradient(
					135deg,
					#ecfdf5 0%,
					#f0fdf4 35%,
					#eff6ff 70%,
					#f8fafc 100%
				);

			color: #0f172a;
		}

		body::before {
			content: "";
			position: fixed;
			inset: 0;

			background-image:
				linear-gradient(
					90deg,
					transparent 49.8%,
					rgba(22, 163, 74, .035) 50%,
					transparent 50.2%
				),
				linear-gradient(
					0deg,
					transparent 49.8%,
					rgba(22, 163, 74, .035) 50%,
					transparent 50.2%
				);

			background-size: 140px 140px;

			pointer-events: none;
			z-index: -1;
		}

        /* =====================================================
           PAGE
        ====================================================== */

        .cf-page {

            min-height:
                100vh;

            overflow:
                hidden;

            position:
                relative;

        }


        /* =====================================================
           DECORATIVE BACKGROUND
        ====================================================== */

        .cf-page::before {

            content:
                "";

            position:
                fixed;

            width:
                500px;

            height:
                500px;

            border-radius:
                50%;

            background:
                rgba(34,197,94,.07);

            top:
                500px;

            left:
                -220px;

            pointer-events:
                none;

        }


        .cf-page::after {

            content:
                "";

            position:
                fixed;

            width:
                400px;

            height:
                400px;

            border-radius:
                50%;

            background:
                rgba(21,128,61,.05);

            right:
                -180px;

            bottom:
                100px;

            pointer-events:
                none;

        }


        /* =====================================================
           CONTENT
        ====================================================== */

        .cf-content {

            position:
                relative;

            z-index:
                2;

        }


        /* =====================================================
           FOOTER
        ====================================================== */

		.cf-footer {
			margin-top: 70px;

			background:
				radial-gradient(
					circle at 85% 20%,
					rgba(34, 197, 94, .16),
					transparent 28%
				),
				linear-gradient(
					135deg,
					#052e16 0%,
					#064e3b 55%,
					#0f172a 100%
				);

			color: #cbd5e1;

			border-top:
				1px solid rgba(255,255,255,.08);

			position: relative;
			overflow: hidden;
		}


		.cf-footer::before {
			content: "";

			position: absolute;

			width: 280px;
			height: 280px;

			border: 1px solid rgba(74,222,128,.10);

			border-radius: 50%;

			right: -100px;
			top: -140px;
		}


		.cf-footer-inner {
			max-width: 1100px;

			margin: auto;

			padding:
				35px 20px 25px;

			text-align: center;

			position: relative;
			z-index: 2;
		}


		.cf-footer-brand {
			font-size: 20px;
			font-weight: 800;

			color: white;

			margin-bottom: 6px;
		}


		.cf-footer-brand span {
			color: #4ade80;
		}


		.cf-footer-description {
			font-size: 13px;

			color: #94a3b8;

			margin-bottom: 20px;
		}


		.cf-footer-bottom {
			padding-top: 18px;

			border-top:
				1px solid rgba(255,255,255,.08);

			font-size: 12px;

			color: #64748b;
		}


        .cf-footer strong {

            color:
                #15803d;

        }


        /* =====================================================
           PWA INSTALL
        ====================================================== */

        .cf-install-banner {

            position:
                fixed;

            left:
                15px;

            right:
                15px;

            bottom:
                20px;

            z-index:
                9999;

            display:
                flex;

            align-items:
                center;

            gap:
                12px;

            padding:
                13px 15px;

            border-radius:
                14px;

            background:
                rgba(255,255,255,.94);

            backdrop-filter:
                blur(12px);

            border:
                1px solid rgba(15,23,42,.08);

            box-shadow:
                0 15px 40px rgba(15,23,42,.18);

        }


        .cf-install-text {

            flex:
                1;

            font-size:
                13px;

            line-height:
                1.4;

            color:
                #334155;

        }


        .cf-install-btn {

            border:
                0;

            background:
                var(--cf-green);

            color:
                white;

            padding:
                8px 14px;

            border-radius:
                9px;

            font-weight:
                700;

        }


        .cf-install-close {

            width:
                30px;

            height:
                30px;

            border:
                0;

            border-radius:
                50%;

            background:
                #f1f5f9;

            color:
                #64748b;

            font-size:
                18px;

        }