/* Nav and footer base styles shared with pages outside the homepage (copied from landing.blade.php). */
:root {
            --topbar: #f1b400;
            --navy: #061a2d;
            --navy2: #082338;
            --navy3: #0d2740;
            --green: #2fc28a;
            --green2: #1aa773;
            --green-soft: rgba(47, 194, 138, .12);
            --btnText: #07211c;
            --lav: #dfe0ff;
            --sand: #f6edcf;
            --cardLav: #9fa6ff;
            --cardSand: #f0d279;
            --text: #0d1220;
            --muted: #6b7280;
            --white: #ffffff;
            --border: rgba(15, 23, 42, .08);
            --shadow: 0 18px 45px rgba(0, 0, 0, .18);
            --shadowSoft: 0 12px 30px rgba(15, 23, 42, .10);
            --shadowCard: 0 16px 40px rgba(15, 23, 42, .08);
            --radiusXL: 28px;
            --radiusLG: 20px;
            --radiusMD: 14px;
            --pricing-bg: #39c28f;
            --plan-white: #f4f4f4;
            --teal-1: #53d3be;
            --teal-2: #1aa9a1;
            --navy-1: #223656;
            --navy-2: #172742;
            --check: #28b487;
            --shadow-pricing: 0 18px 30px rgba(0, 0, 0, .16);
            --shadow-btn: 0 8px 16px rgba(0, 0, 0, .14);
        }
.main-nav {
            position: sticky;
            top: 0;
            z-index: 1030;
            background: transparent;
            
            border-bottom: 1px solid rgba(15, 23, 42, .08);
            box-shadow: 0 4px 18px rgba(15, 23, 42, .04);
        }
.brand-mark {
            line-height: 1;
        }
.brand-mark .top {
            font-size: 22px;
            font-weight: 900;
            color: var(--text);
        }
.brand-mark .bottom {
            font-size: 22px;
            font-weight: 900;
            color: var(--green);
        }
.nav-menu {
            gap: 10px;
        }
.nav-pill:hover {
            background: var(--green-soft);
            color: var(--green2);
            border-color: rgba(47, 194, 138, .3);
        }
.nav-cta {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 46px;
            padding: 0 20px;
            border-radius: 999px;
            background: var(--navy);
            color: #fff;
            font-weight: 800;
            transition: .2s ease;
            box-shadow: var(--shadowSoft);
        }
.nav-cta:hover,
        .nav-cta:focus {
            color: #fff;
            background: var(--navy2);
        }
footer {
            background: linear-gradient(180deg, var(--navy2), var(--navy));
            color: rgba(255, 255, 255, .85);
            padding: 120px 0 18px;
            position: relative;
            z-index: 1;
        }
.footer-title {
            font-weight: 900;
            font-size: 30px;
            color: #fff;
            margin-bottom: 12px;
            line-height: 1.05;
        }
.footer-title .green {
            color: var(--green);
        }
.footer-small {
            font-size: 15px;
            color: rgba(255, 255, 255, .76);
            line-height: 1.8;
        }
.footer-head {
            color: var(--green);
            font-weight: 800;
            text-transform: uppercase;
            font-size: 14px;
            margin-bottom: 14px;
            letter-spacing: .08em;
        }
.footer-links a {
            display: block;
            color: rgba(255, 255, 255, .9);
            margin: 8px 0;
            font-size: 17px;
        }
.footer-links a:hover {
            color: #fff;
        }
.join {
            margin-top: 18px;
        }
.btn-fb {
            background: var(--green);
            color: #fff;
            font-weight: 800;
            border-radius: 999px;
            padding: 10px 18px;
            display: inline-block;
            font-size: 14px;
        }
.socials {
            display: flex;
            gap: 10px;
            justify-content: flex-end;
            flex-wrap: wrap;
            margin-top: 16px;
        }
.soc {
            width: 38px;
            height: 38px;
            border-radius: 50%;
            background: rgba(255, 255, 255, .12);
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            font-weight: 900;
            font-size: 14px;
        }
.copyright {
            text-align: center;
            margin-top: 24px;
            padding-top: 14px;
            border-top: 1px solid rgba(255, 255, 255, .12);
            color: rgba(255, 255, 255, .60);
            font-size: 18px;
            font-weight: 600;
        }
@media (max-width: 1199.98px) {
  .nav-menu {
                gap: 8px;
            }
  .nav-pill {
                padding: 9px 14px;
                font-size: 13px;
            }
}
@media (max-width: 991.98px) {
  .main-nav {
                position: static;
            }
  .socials {
                justify-content: flex-start;
            }
}
@media (max-width: 767.98px) {
  .main-nav .container-fluid {
                padding-left: 16px !important;
                padding-right: 16px !important;
            }
  .hero .container-fluid,
            .clients .container-fluid,
            .why-section .container-fluid,
            .how .container-fluid,
            .compare .container-fluid,
            .pricing-section .container-fluid,
            .reviews .container-fluid,
            .faq .container-fluid,
            footer .container-fluid {
                padding-left: 16px !important;
                padding-right: 16px !important;
            }
  .btn-hero,
            .btn-hero-outline,
            .nav-cta {
                width: 100%;
            }
  footer {
                padding-top: 104px;
            }
  .copyright {
                font-size: 16px;
            }
}
.hero .nav-pill,
        .hero .eyebrow,
        .hero h1,
        .hero p,
        .hero .pill-note,
        .hero .checks div,
        .hero .strip-item {
            color: #fff;
        }
.nav-menu {
            gap: 12px;
        }
.nav-pill {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 10px 18px;
            border-radius: 999px;
            text-decoration: none;
            color: #fff;
            font-weight: 500;
            background: rgba(255, 255, 255, 0.10);
            border: 1px solid rgba(255, 255, 255, 0.18);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
            transition: all 0.3s ease;
        }
.nav-pill:hover {
            color: #fff;
            background: rgba(255, 255, 255, 0.18);
            border-color: rgba(255, 255, 255, 0.28);
            transform: translateY(-1px);
        }
.nav-cta {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 12px 22px;
            border-radius: 999px;
            text-decoration: none;
            color: #fff;
            font-weight: 600;
            background: rgba(255, 255, 255, 0.14);
            border: 1px solid rgba(255, 255, 255, 0.22);
            backdrop-filter: blur(14px);
            -webkit-backdrop-filter: blur(14px);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.16);
            transition: all 0.3s ease;
        }
.nav-cta:hover {
            color: #fff;
            background: rgba(255, 255, 255, 0.22);
            border-color: rgba(255, 255, 255, 0.30);
            transform: translateY(-1px);
        }