/* JugnuCRM — base styles (extracted from the original single page) */
* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
            line-height: 1.6;
            color: #333;
            scroll-behavior: smooth;
        }

        /* Utility Classes */
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }

        .btn {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 12px 32px;
            border-radius: 50px;
            font-weight: 600;
            text-decoration: none;
            transition: all 0.3s ease;
            cursor: pointer;
            border: none;
            font-size: 16px;
        }

        .btn-primary {
            background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
            color: white;
            box-shadow: 0 4px 15px rgba(37, 99, 235, 0.3);
        }

        .btn-primary:hover {
            background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%);
            box-shadow: 0 6px 25px rgba(37, 99, 235, 0.5);
            transform: translateY(-2px);
        }

        .btn-secondary {
            background: transparent;
            color: #2563eb;
            border: 2px solid #2563eb;
        }

        .btn-secondary:hover {
            background: #eff6ff;
        }

        /* Navigation */
        nav {
            position: fixed;
            width: 100%;
            background: white;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            z-index: 1000;
            top: 0;
        }

        .nav-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 12px 20px;
            max-width: 1200px;
            margin: 0 auto;
        }

        .logo {
            display: flex;
            align-items: center;
            gap: 12px;
            text-decoration: none;
        }

        .logo img {
            height: 50px;
            width: auto;
        }

        .logo-text {
            font-size: 28px;
            font-weight: bold;
            background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .nav-menu {
            display: flex;
            list-style: none;
            gap: 32px;
            align-items: center;
        }

        .nav-menu a {
            color: #374151;
            text-decoration: none;
            font-weight: 500;
            transition: color 0.3s;
        }

        .nav-menu a:hover {
            color: #2563eb;
        }

        .mobile-menu-btn {
            display: none;
            background: none;
            border: none;
            font-size: 24px;
            cursor: pointer;
        }

        .nav-cta {
            background: linear-gradient(135deg, #f59e0b 0%, #ea580c 100%);
            color: white;
            padding: 12px 28px;
            border-radius: 50px;
            font-weight: 700;
            text-decoration: none;
            box-shadow: 0 4px 15px rgba(245, 158, 11, 0.4);
            transition: all 0.3s;
            animation: pulse 2s infinite;
        }

        .nav-cta:hover {
            background: linear-gradient(135deg, #ea580c 0%, #dc2626 100%);
            box-shadow: 0 6px 25px rgba(245, 158, 11, 0.6);
            transform: translateY(-2px);
        }

        @keyframes pulse {
            0%, 100% {
                box-shadow: 0 4px 15px rgba(245, 158, 11, 0.4);
            }
            50% {
                box-shadow: 0 6px 25px rgba(245, 158, 11, 0.6);
            }
        }

        /* Hero Section */
        .hero {
            padding: 140px 20px 80px;
            background: linear-gradient(135deg, #eff6ff 0%, #ffffff 50%, #faf5ff 100%);
        }

        .hero-content {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 60px;
            align-items: center;
            max-width: 1200px;
            margin: 0 auto;
        }

        .hero h1 {
            font-size: 56px;
            font-weight: bold;
            color: #111827;
            margin-bottom: 24px;
            line-height: 1.2;
        }

        .hero h1 .highlight {
            background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .hero p {
            font-size: 20px;
            color: #6b7280;
            margin-bottom: 32px;
        }

        .hero-buttons {
            display: flex;
            gap: 16px;
            flex-wrap: wrap;
        }

        .hero-image {
            background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
            border-radius: 24px;
            padding: 32px;
            box-shadow: 0 25px 50px rgba(0,0,0,0.2);
        }

        .hero-card {
            background: white;
            border-radius: 16px;
            padding: 24px;
        }

        .hero-card-item {
            display: flex;
            align-items: center;
            gap: 16px;
            margin-bottom: 16px;
        }

        .hero-icon {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .hero-icon svg {
            width: 24px;
            height: 24px;
        }

        .placeholder-bar {
            height: 12px;
            background: #e5e7eb;
            border-radius: 6px;
            margin-bottom: 8px;
        }

        /* Stats Section */
        .stats {
            background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
            padding: 64px 20px;
            color: white;
        }

        .stats-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 32px;
            max-width: 1200px;
            margin: 0 auto;
            text-align: center;
        }

        .stat-number {
            font-size: 48px;
            font-weight: bold;
            margin-bottom: 8px;
        }

        .stat-label {
            color: #bfdbfe;
        }

        /* Section Styles */
        section {
            padding: 80px 20px;
        }

        .section-header {
            text-align: center;
            margin-bottom: 64px;
        }

        .section-title {
            font-size: 48px;
            font-weight: bold;
            color: #111827;
            margin-bottom: 16px;
        }

        .section-divider {
            width: 96px;
            height: 4px;
            background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
            margin: 0 auto 24px;
        }

        .section-subtitle {
            font-size: 20px;
            color: #6b7280;
            max-width: 800px;
            margin: 0 auto;
        }

        /* About Section */
        .video-section {
            background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
            color: white;
        }

        .video-container {
            max-width: 900px;
            margin: 0 auto;
        }

        .video-wrapper {
            position: relative;
            padding-bottom: 56.25%; /* 16:9 aspect ratio */
            height: 0;
            overflow: hidden;
            border-radius: 16px;
            box-shadow: 0 25px 50px rgba(0,0,0,0.5);
        }

        .video-wrapper iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border: none;
            border-radius: 16px;
        }

        .video-badge {
            display: inline-block;
            background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
            color: white;
            padding: 8px 20px;
            border-radius: 50px;
            font-size: 14px;
            font-weight: 700;
            margin-bottom: 24px;
            animation: pulse 2s infinite;
        }

        /* About Section */
        .about-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 60px;
            align-items: center;
            max-width: 1200px;
            margin: 0 auto;
        }

        .about-content h3 {
            font-size: 36px;
            font-weight: bold;
            color: #111827;
            margin-bottom: 24px;
        }

        .about-content p {
            color: #6b7280;
            margin-bottom: 24px;
            line-height: 1.8;
        }

        .check-list {
            list-style: none;
        }

        .check-item {
            display: flex;
            align-items: flex-start;
            gap: 12px;
            margin-bottom: 16px;
        }

        .check-icon {
            width: 24px;
            height: 24px;
            background: #d1fae5;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            margin-top: 4px;
        }

        .check-icon svg {
            width: 16px;
            height: 16px;
            stroke: #059669;
        }

        .about-cards {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 24px;
        }

        .about-card {
            padding: 24px;
            border-radius: 16px;
            transition: transform 0.3s;
        }

        .about-card:hover {
            transform: translateY(-5px);
        }

        .about-card:nth-child(1) {
            background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
        }

        .about-card:nth-child(2) {
            background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%);
            margin-top: 32px;
        }

        .about-card:nth-child(3) {
            background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
            margin-top: -32px;
        }

        .about-card:nth-child(4) {
            background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
        }

        .about-card svg {
            width: 48px;
            height: 48px;
            margin-bottom: 16px;
        }

        .about-card h4 {
            font-weight: 600;
            margin-bottom: 8px;
        }

        .about-card p {
            font-size: 14px;
            color: #6b7280;
            margin: 0;
        }

        /* Features Section */
        .features {
            background: #f9fafb;
        }

        .features-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 32px;
            max-width: 1200px;
            margin: 0 auto;
        }

        .feature-card {
            background: white;
            padding: 32px;
            border-radius: 16px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.05);
            transition: all 0.3s;
            border: 1px solid #f3f4f6;
        }

        .feature-card:hover {
            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
            transform: translateY(-8px);
        }

        .feature-icon {
            width: 64px;
            height: 64px;
            background: #dbeafe;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 24px;
        }

        .feature-icon svg {
            width: 32px;
            height: 32px;
            stroke: #2563eb;
        }

        .feature-card h3 {
            font-size: 20px;
            font-weight: bold;
            margin-bottom: 12px;
        }

        .feature-card p {
            color: #6b7280;
            line-height: 1.7;
        }

        .feature-badge {
            display: inline-block;
            background: linear-gradient(135deg, #f59e0b 0%, #ea580c 100%);
            color: white;
            padding: 4px 12px;
            border-radius: 50px;
            font-size: 12px;
            font-weight: 600;
            margin-bottom: 16px;
        }

        /* Pricing Section */
        .pricing-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 24px;
            max-width: 1200px;
            margin: 0 auto;
        }

        .pricing-card {
            background: white;
            border: 2px solid #e5e7eb;
            border-radius: 16px;
            padding: 32px 24px;
            transition: all 0.3s;
            position: relative;
        }

        .pricing-card:hover {
            border-color: #93c5fd;
        }

        .pricing-card.recommended {
            border-color: #2563eb;
            box-shadow: 0 10px 30px rgba(37, 99, 235, 0.2);
            transform: scale(1.05);
        }

        .recommended-badge {
            position: absolute;
            top: -16px;
            left: 50%;
            transform: translateX(-50%);
            background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
            color: white;
            padding: 4px 16px;
            border-radius: 50px;
            font-size: 14px;
            font-weight: 600;
        }

        .pricing-header {
            text-align: center;
            margin-bottom: 24px;
        }

        .pricing-name {
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 16px;
        }

        .pricing-price {
            font-size: 36px;
            font-weight: bold;
            color: #111827;
        }

        .pricing-gst {
            color: #6b7280;
            font-size: 14px;
        }

        .pricing-period {
            color: #6b7280;
            font-size: 14px;
            margin-top: 4px;
        }

        .pricing-features {
            list-style: none;
            margin-bottom: 24px;
        }

        .pricing-features li {
            display: flex;
            align-items: flex-start;
            gap: 8px;
            margin-bottom: 12px;
            font-size: 14px;
            color: #6b7280;
        }

        .pricing-features svg {
            width: 20px;
            height: 20px;
            stroke: #10b981;
            flex-shrink: 0;
            margin-top: 2px;
        }

        .pricing-btn {
            width: 100%;
            padding: 12px;
            border-radius: 8px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
        }

        .pricing-card.recommended .pricing-btn {
            background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
            color: white;
            border: none;
        }

        .pricing-card.recommended .pricing-btn:hover {
            background: linear-gradient(135deg, #1d4ed8 0%, #6d28d9 100%);
        }

        .pricing-card:not(.recommended) .pricing-btn {
            background: #f3f4f6;
            color: #111827;
            border: none;
        }

        .pricing-card:not(.recommended) .pricing-btn:hover {
            background: #e5e7eb;
        }

        /* FAQ Section */
        .faq {
            background: #f9fafb;
        }

        .faq-container {
            max-width: 800px;
            margin: 0 auto;
        }

        .faq-item {
            background: white;
            border-radius: 12px;
            margin-bottom: 16px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
            overflow: hidden;
        }

        .faq-question {
            width: 100%;
            padding: 20px 24px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: white;
            border: none;
            cursor: pointer;
            font-size: 16px;
            font-weight: 600;
            text-align: left;
            transition: background 0.3s;
        }

        .faq-question:hover {
            background: #f9fafb;
        }

        .faq-toggle {
            color: #2563eb;
            font-size: 24px;
            font-weight: bold;
            flex-shrink: 0;
            margin-left: 16px;
        }

        .faq-answer {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease;
        }

        .faq-answer-content {
            padding: 0 24px 20px;
            color: #6b7280;
            line-height: 1.7;
        }

        .faq-item.active .faq-answer {
            max-height: 500px;
        }

        /* Contact Section */
        .contact {
            background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
            color: white;
        }

        .contact-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 60px;
            max-width: 1200px;
            margin: 0 auto;
        }

        .contact h2 {
            font-size: 48px;
            font-weight: bold;
            margin-bottom: 24px;
        }

        .contact-intro {
            font-size: 20px;
            color: #bfdbfe;
            margin-bottom: 32px;
        }

        .contact-info {
            display: flex;
            align-items: flex-start;
            gap: 12px;
            margin-bottom: 16px;
        }

        .contact-info svg {
            width: 24px;
            height: 24px;
            flex-shrink: 0;
            margin-top: 2px;
        }

        .contact-form {
            background: white;
            padding: 32px;
            border-radius: 16px;
            box-shadow: 0 25px 50px rgba(0,0,0,0.2);
        }

        .contact-form h3 {
            font-size: 24px;
            font-weight: bold;
            color: #111827;
            margin-bottom: 24px;
        }

        .form-group {
            margin-bottom: 16px;
        }

        .form-control {
            width: 100%;
            padding: 12px 16px;
            border: 1px solid #d1d5db;
            border-radius: 8px;
            font-size: 16px;
            transition: all 0.3s;
        }

        .form-control:focus {
            outline: none;
            border-color: #2563eb;
            box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
        }

        textarea.form-control {
            resize: none;
            min-height: 120px;
        }

        .submit-btn {
            width: 100%;
            padding: 12px;
            background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
            color: white;
            border: none;
            border-radius: 8px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
        }

        .submit-btn:hover {
            background: linear-gradient(135deg, #1d4ed8 0%, #6d28d9 100%);
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
        }

        .form-message {
            padding: 12px;
            border-radius: 8px;
            margin-bottom: 16px;
            display: none;
        }

        .form-message.success {
            background: #d1fae5;
            color: #065f46;
            border: 1px solid #10b981;
        }

        .form-message.error {
            background: #fee2e2;
            color: #991b1b;
            border: 1px solid #ef4444;
        }

        /* Footer */
        footer {
            background: #111827;
            color: white;
            padding: 48px 20px;
        }

        .footer-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 48px;
            max-width: 1200px;
            margin: 0 auto 32px;
        }

        .footer-logo {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 16px;
        }

        .footer-logo img {
            height: 50px;
            width: auto;
        }

        .footer-logo-text {
            font-size: 24px;
            font-weight: bold;
        }

        footer h4 {
            font-weight: 600;
            margin-bottom: 16px;
        }

        footer p {
            color: #9ca3af;
            line-height: 1.7;
        }

        .footer-links {
            list-style: none;
        }

        .footer-links li {
            margin-bottom: 8px;
        }

        .footer-links a {
            color: #9ca3af;
            text-decoration: none;
            transition: color 0.3s;
        }

        .footer-links a:hover {
            color: white;
        }

        .footer-bottom {
            border-top: 1px solid #374151;
            padding-top: 32px;
            text-align: center;
            color: #9ca3af;
        }

        .nxtvision-link {
            color: #60a5fa;
            font-weight: 600;
        }

        .social-links {
            display: flex;
            gap: 16px;
            margin-top: 16px;
        }

        .social-links a {
            width: 40px;
            height: 40px;
            background: #374151;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            transition: all 0.3s;
        }

        .social-links a:hover {
            background: #2563eb;
            transform: translateY(-3px);
        }

        .social-links svg {
            width: 20px;
            height: 20px;
        }

        /* Responsive */
        @media (max-width: 1024px) {
            .features-grid {
                grid-template-columns: repeat(2, 1fr);
            }

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

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

            .nav-menu.active {
                display: flex;
                flex-direction: column;
                position: absolute;
                top: 74px;
                left: 0;
                right: 0;
                background: white;
                padding: 20px;
                box-shadow: 0 4px 6px rgba(0,0,0,0.1);
            }

            .mobile-menu-btn {
                display: block;
            }

            .hero-content,
            .about-grid,
            .contact-grid {
                grid-template-columns: 1fr;
                gap: 40px;
            }

            .hero h1 {
                font-size: 36px;
            }

            .stats-grid {
                grid-template-columns: repeat(2, 1fr);
            }

            .features-grid {
                grid-template-columns: 1fr;
            }

            .pricing-grid {
                grid-template-columns: 1fr;
            }

            .pricing-card.recommended {
                transform: scale(1);
            }

            .footer-grid {
                grid-template-columns: 1fr;
                gap: 32px;
            }

            .about-cards {
                grid-template-columns: 1fr;
            }

            .about-card:nth-child(2),
            .about-card:nth-child(3) {
                margin-top: 0;
            }

            .logo-text {
                font-size: 22px;
            }
        }

        @media (max-width: 480px) {
            .hero h1 {
                font-size: 28px;
            }

            .section-title {
                font-size: 32px;
            }

            .stat-number {
                font-size: 36px;
            }
        }

/* ═══════════════════════════════════════════════════
   v2 — multi-page additions
═══════════════════════════════════════════════════ */
.skip-link{position:absolute;left:-999px;top:0;z-index:2000;background:#111827;color:#fff;padding:10px 16px}
.skip-link:focus{left:8px}
:focus-visible{outline:3px solid #2563eb;outline-offset:2px;border-radius:4px}
.container.narrow{max-width:820px}
.band{background:#f9fafb}
.center-row{text-align:center;margin-top:40px}
section{padding:72px 0}
.section-header{max-width:760px;margin:0 auto 44px;text-align:center}

/* ── NAV ── */
.nav-container{gap:16px}
.has-drop{position:relative}
.drop-btn{background:none;border:0;font:inherit;font-weight:500;color:#374151;cursor:pointer;padding:8px 12px;border-radius:8px;display:flex;align-items:center;gap:4px}
.drop-btn:hover,.drop-btn.active,.drop-btn[aria-expanded="true"]{color:#2563eb;background:#eff6ff}
.drop-panel{display:none;position:absolute;top:calc(100% + 8px);left:0;min-width:290px;background:#fff;border:1px solid #e5e7eb;border-radius:14px;padding:10px;box-shadow:0 20px 50px -20px rgba(17,24,39,.3);z-index:1200}
.has-drop.open .drop-panel{display:block}
.drop-group{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#9ca3af;padding:8px 10px 4px;margin:0}
.drop-panel a{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:8px;font-size:14px;color:#374151;text-decoration:none}
.drop-panel a:hover{background:#eff6ff;color:#2563eb}
.drop-ic{width:20px;text-align:center}
.drop-all{border-top:1px solid #e5e7eb;margin-top:6px;padding-top:10px!important;font-weight:700;color:#2563eb!important}
.nav-phone{display:flex;align-items:center;gap:6px;color:#374151;text-decoration:none;font-weight:700;font-size:14px;white-space:nowrap}
.nav-phone:hover{color:#2563eb}
.nav-phone-li{display:none}
@media(max-width:1150px){.nav-phone span{display:none}}
@media(max-width:1024px){
  .nav-menu{align-items:stretch}
  .nav-menu .has-drop{width:100%}
  .drop-btn{width:100%;justify-content:space-between;font-size:16px;padding:10px 12px}
  .drop-panel{position:static;border:0;border-left:2px solid #e5e7eb;border-radius:0;box-shadow:none;margin:4px 0 8px 12px;padding:0 0 0 6px;min-width:0}
  .nav-phone{display:none}
  .nav-phone-li{display:block}
}

/* ── HERO ── */
.hero-badge{display:inline-block;background:rgba(37,99,235,.1);border:1px solid rgba(37,99,235,.25);color:#1d4ed8;font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;padding:6px 14px;border-radius:999px;margin-bottom:20px}
.hero-trust{margin-top:22px;font-size:15px;color:#6b7280}
.btn-wa{background:#1faa53;color:#fff}
.btn-wa:hover{background:#178a43;color:#fff}
.btn-ghost{background:transparent;color:#2563eb;border:2px solid #d1d5db}
.btn-ghost:hover{border-color:#2563eb}
.btn.full{width:100%;justify-content:center}

/* Call panel (replaces the invented live-stats card) */
.callpanel{background:#0f1f3d;color:#dbe5f2;border-radius:20px;padding:24px;box-shadow:0 26px 60px -26px rgba(15,31,61,.6)}
.cp-top{display:flex;justify-content:space-between;align-items:center;font-size:14px;color:#9fb2cb;gap:12px;flex-wrap:wrap}
.cp-live{display:inline-flex;align-items:center;gap:8px;color:#fff;font-weight:700}
.cp-dot{width:10px;height:10px;border-radius:50%;background:#ffb81c;animation:cpPulse 1.8s ease-out infinite}
@keyframes cpPulse{0%{box-shadow:0 0 0 0 rgba(255,184,28,.65)}100%{box-shadow:0 0 0 14px rgba(255,184,28,0)}}
@media(prefers-reduced-motion:reduce){.cp-dot{animation:none;box-shadow:0 0 10px 2px rgba(255,184,28,.6)}}
.cp-lead{margin-top:18px;background:#1a2d52;border-radius:12px;padding:16px}
.cp-lead strong{font-size:18px;color:#fff;display:block}
.cp-meta{font-size:14px;color:#9fb2cb;margin-top:4px}
.cp-rows{margin-top:14px;display:grid;gap:8px;font-size:14px}
.cp-rows div{display:flex;justify-content:space-between;gap:12px;border-top:1px solid #2a3f68;padding-top:8px}
.cp-rows span:last-child{color:#fff;text-align:right}
.cp-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:16px}
.cp-actions span{text-align:center;font-size:13px;padding:9px 4px;border-radius:8px;background:#23385f;color:#dbe4f5}
.cp-actions span.on{background:#ffb81c;color:#0f1f3d;font-weight:700}
.cp-note{font-size:12px;color:#8193b3;margin-top:12px}

/* ── PAGE HERO ── */
.page-hero{background:linear-gradient(135deg,#eff6ff,#fff 65%);padding:48px 0 56px}
.page-hero h1{font-size:clamp(30px,4.4vw,46px);font-weight:800;line-height:1.15;color:#111827;margin:10px 0 14px}
.page-lead{font-size:18px;color:#6b7280;line-height:1.7;max-width:680px}
.page-tag{display:inline-block;background:#eff6ff;color:#1d4ed8;font-size:13px;font-weight:700;padding:6px 14px;border-radius:999px}
.page-hero .hero-buttons{margin-top:26px}
.crumbs{font-size:14px;color:#6b7280;margin-bottom:14px}
.crumbs a{color:#6b7280;text-decoration:none}
.crumbs a:hover{color:#2563eb;text-decoration:underline}

/* ── PROSE ── */
.prose-sec{padding:56px 20px}
.prose-inner{max-width:800px;margin:0 auto}
.prose-inner p{font-size:17px;line-height:1.85;color:#374151;margin-bottom:18px}
.prose-inner h2{font-size:26px;font-weight:800;color:#111827;margin:36px 0 14px}
.prose-inner h3{font-size:20px;font-weight:700;color:#111827;margin:26px 0 10px}
.prose-inner ul,.prose-inner ol{margin:0 0 18px 22px}
.prose-inner li{margin-bottom:8px;color:#374151;line-height:1.8}
.prose-inner a{color:#2563eb}
.callout{background:#eff6ff;border-radius:14px;padding:22px 24px;margin:30px 0}
.callout p{margin:0}

/* ── GRIDS ── */
.prob-grid,.feat-grid,.aud-grid,.rel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.prob,.feat,.aud-card,.rel-card{background:#fff;border:1px solid #e5e7eb;border-radius:16px;padding:26px}
.prob{border-left:4px solid #2563eb}
.prob h3,.feat h3,.rel-card h3{font-size:18px;font-weight:700;color:#111827;margin-bottom:8px}
.prob p,.feat p,.rel-card p{color:#6b7280;font-size:15px;line-height:1.7}
.feat-ic,.aud-ic,.rel-ic{font-size:26px;display:block;margin-bottom:10px}
a.feat-link,a.aud-card,a.rel-card{text-decoration:none;display:block;transition:border-color .2s,transform .2s,box-shadow .2s}
a.feat-link:hover,a.aud-card:hover,a.rel-card:hover{border-color:#2563eb;transform:translateY(-3px);box-shadow:0 16px 36px -22px rgba(17,24,39,.4)}
.aud-card h3{font-size:19px;font-weight:700;color:#111827;margin-bottom:8px}
.aud-card p{color:#6b7280;font-size:15px;line-height:1.7}
.go{display:inline-block;margin-top:14px;color:#2563eb;font-weight:700;font-size:15px}
@media(max-width:980px){.prob-grid,.feat-grid,.aud-grid,.rel-grid{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.prob-grid,.feat-grid,.aud-grid,.rel-grid{grid-template-columns:1fr}}

/* ── STEPS, CHECKS, TABLES ── */
.steps{counter-reset:st;display:grid;grid-template-columns:repeat(4,1fr);gap:26px;list-style:none;margin:0;padding:0}
.steps.three{grid-template-columns:repeat(3,1fr)}
.steps li{counter-increment:st}
.steps li::before{content:counter(st);display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#2563eb;color:#fff;font-weight:800;margin-bottom:12px}
.steps h3{font-size:17px;font-weight:700;color:#111827;margin-bottom:6px}
.steps p{color:#6b7280;font-size:15px;line-height:1.7}
@media(max-width:980px){.steps,.steps.three{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.steps,.steps.three{grid-template-columns:1fr}}
.checks{list-style:none;display:grid;gap:12px;margin:18px 0 0;padding:0}
.checks li{position:relative;padding-left:30px;color:#374151;line-height:1.75}
.checks li::before{content:"";position:absolute;left:4px;top:9px;width:13px;height:7px;border-left:2.5px solid #2563eb;border-bottom:2.5px solid #2563eb;transform:rotate(-45deg)}
.table-wrap{overflow-x:auto;border:1px solid #e5e7eb;border-radius:14px;background:#fff;margin:20px 0}
.table-wrap table{border-collapse:collapse;width:100%;min-width:560px;font-size:15px}
.table-wrap th,.table-wrap td{text-align:left;padding:14px 18px;border-bottom:1px solid #e5e7eb;vertical-align:top}
.table-wrap thead th{background:#f9fafb;font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:#6b7280}
.table-wrap tbody th{font-weight:700;color:#111827}
.fine-print{color:#6b7280;font-size:14px;line-height:1.7;margin-top:14px}
.lead-p{font-size:17px;line-height:1.8;color:#374151;margin-bottom:14px}

/* ── VIDEO (click to load) ── */
.video-frame{position:relative;aspect-ratio:16/9;border-radius:16px;overflow:hidden;background:#000;max-width:900px;margin:0 auto}
.video-play{all:unset;cursor:pointer;position:absolute;inset:0;display:grid;place-items:center}
.video-play img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.75}
.play-ic{position:relative;display:grid;place-items:center;width:78px;height:78px;border-radius:50%;background:#fff;color:#2563eb;font-size:26px;padding-left:5px}
.video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ── PRICING ── */
.price-two{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;max-width:860px;margin:0 auto}
@media(max-width:820px){.price-two{grid-template-columns:1fr}}
.pricing-card{background:#fff;border:1px solid #e5e7eb;border-radius:18px;padding:30px;position:relative}
.pricing-card.featured{border:2px solid #2563eb}
.pricing-badge{position:absolute;top:-13px;left:30px;background:#2563eb;color:#fff;font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:5px 12px;border-radius:999px}
.pricing-name{font-size:19px;font-weight:700;color:#111827}
.pricing-price{font-size:40px;font-weight:800;color:#111827;line-height:1.1;margin-top:8px}
.pricing-gst{font-size:15px;font-weight:500;color:#6b7280}
.pricing-period{color:#6b7280;font-size:15px;margin-bottom:8px}
.plan-alt{font-size:14px;color:#6b7280;margin:18px 0}
.save{color:#15803d;font-weight:700}

/* ── FAQ ── */
.faq-list{max-width:820px;margin:0 auto}
.faq-item{background:#fff;border:1px solid #e5e7eb;border-radius:12px;margin-bottom:12px;padding:18px 22px}
.faq-item summary{cursor:pointer;list-style:none;font-size:17px;font-weight:700;color:#111827;display:flex;justify-content:space-between;gap:16px}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";color:#2563eb;font-size:24px;line-height:1}
.faq-item[open] summary::after{content:"\2013"}
.faq-item p{margin-top:12px;color:#374151;line-height:1.8}

/* ── FORM ── */
.lead-form .form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:600px){.lead-form .form-row{grid-template-columns:1fr}}
.lead-form .form-group{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.lead-form label{font-size:14px;font-weight:700;color:#374151}
.lead-form .opt{font-weight:400;color:#9ca3af}
.lead-form input,.lead-form select,.lead-form textarea{width:100%;border:1.5px solid #d1d5db;border-radius:10px;padding:12px 14px;font-size:15px;font-family:inherit;color:#111827;background:#fff;outline:none}
.lead-form input:focus,.lead-form select:focus,.lead-form textarea:focus{border-color:#2563eb;box-shadow:0 0 0 3px rgba(37,99,235,.14)}
.lead-form textarea{min-height:96px;resize:vertical}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.form-submit{width:100%;justify-content:center;margin-top:6px}
.form-submit:disabled{opacity:.65;cursor:wait}
.form-message{display:none;margin-top:14px;padding:12px 14px;border-radius:10px;font-weight:500;font-size:15px}
.form-message.ok{display:block;background:#e6f6ec;color:#15803d}
.form-message.err{display:block;background:#fdecea;color:#c0362c}
.form-fine{color:#6b7280;font-size:13px;margin-top:12px;line-height:1.6}
.g-recaptcha{margin:6px 0 14px}

/* ── BLOG ── */
.posts{display:grid;gap:20px}
.post-card{display:block;background:#fff;border:1px solid #e5e7eb;border-radius:16px;padding:28px;text-decoration:none}
.post-card:hover{border-color:#2563eb}
.post-card h2,.post-card h3{font-size:21px;font-weight:700;color:#111827;margin-bottom:8px}
.post-card p{color:#6b7280;line-height:1.7}
.post-meta{color:#6b7280;font-size:15px;margin-top:12px}

/* ── FOOTER ── */
.site-foot{background:#0f1f3d;color:#aebbd3;padding:56px 20px 26px;font-size:15px}
.foot-grid{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1fr;gap:32px}
@media(max-width:1024px){.foot-grid{grid-template-columns:1fr 1fr 1fr}}
@media(max-width:640px){.foot-grid{grid-template-columns:1fr 1fr}}
.foot-brand p{margin-top:12px;line-height:1.7}
.foot-brand .logo{margin-bottom:4px}
.foot-brand .logo-text{color:#fff}
.foot-contact a{color:#fff;font-weight:700;text-decoration:none}
.foot-col h4{color:#fff;font-size:16px;margin-bottom:14px}
.foot-col a,.foot-col span{display:block;color:#d6deec;text-decoration:none;margin-bottom:9px;line-height:1.6}
.foot-col a:hover{color:#fff;text-decoration:underline}
.foot-base{max-width:1200px;margin:38px auto 0;padding-top:20px;border-top:1px solid #22345a;display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;font-size:13px}
.foot-social a{color:#d6deec;text-decoration:none;margin-left:14px}
.foot-social a:hover{color:#fff}

/* ── FLOATING WHATSAPP ── */
.wa-float{position:fixed;right:18px;bottom:18px;z-index:900;display:inline-flex;align-items:center;gap:8px;background:#1faa53;color:#fff;text-decoration:none;font-weight:700;font-size:15px;padding:13px 18px;border-radius:999px;box-shadow:0 12px 30px -10px rgba(0,0,0,.4)}
.wa-float:hover{background:#178a43;color:#fff}
@media(max-width:600px){.wa-float span{display:none}.wa-float{padding:14px}}

/* ── CONTACT SECTION tweaks ── */
.contact-info{display:flex;align-items:flex-start;gap:12px;margin-bottom:12px}
.contact-info a{color:inherit}

/* ── v2 nav fixes after visual review ── */
.logo-text{white-space:nowrap}
.nav-cta{white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;line-height:1.2;padding:10px 18px;border-radius:999px}
.nav-cta-li{display:none}
.nav-cta-desktop{display:inline-flex}
@media(max-width:1024px){
  .nav-cta-desktop{display:none}
  .nav-cta-li{display:block}
  .nav-cta-li .nav-cta{width:100%;margin-top:6px}
}

/* Fixed nav: give non-hero pages room so content is not hidden under it */
.page-hero{padding-top:124px}
@media(max-width:1024px){.page-hero{padding-top:110px}}

/* The legacy `nav { position: fixed }` rule applies to EVERY <nav>,
   including breadcrumbs. Reset it for anything that is not the site nav. */
nav.crumbs{position:static;width:auto;background:none;box-shadow:none;z-index:auto;padding:0}

/* ── Dropdown: bridge the gap so the menu survives the trip down ── */
.has-drop::after{content:"";position:absolute;top:100%;left:0;width:100%;height:12px;display:none}
.has-drop:hover::after,.has-drop.open::after{display:block}
.drop-panel{top:calc(100% + 10px)}
.has-drop:hover .drop-panel{display:block}
@media(max-width:1024px){.has-drop::after{display:none!important}.has-drop:hover .drop-panel{display:none}.has-drop.open .drop-panel{display:block}}

/* ── Cookie banner ── */
.cookie-banner{position:fixed;left:0;right:0;bottom:0;z-index:1500;display:none;gap:24px;align-items:center;justify-content:space-between;flex-wrap:wrap;background:#0f1f3d;color:#dbe5f2;padding:18px 5vw;box-shadow:0 -10px 30px -16px rgba(0,0,0,.5)}
.cookie-banner.show{display:flex}
.cookie-banner[hidden]{display:none}
.cookie-text{max-width:720px}
.cookie-text p{margin:0;font-size:14px;line-height:1.6}
.cookie-text p strong{color:#fff;font-size:16px}
.cookie-text p+p{margin-top:5px}
.cookie-text a{color:#fff;text-decoration:underline}
.cookie-btns{display:flex;gap:10px;flex-wrap:wrap}
.cookie-banner button{border:0;cursor:pointer;font:600 14px inherit;padding:11px 22px;border-radius:50px;white-space:nowrap}
.cookie-essential{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.45)}
.cookie-essential:hover{border-color:#fff}
.cookie-accept{background:#2563eb;color:#fff}
.cookie-accept:hover{background:#1d4ed8}
@media(max-width:620px){.cookie-banner{padding:16px}.cookie-btns{width:100%}.cookie-banner button{flex:1}}
/* The WhatsApp button always sits above the cookie banner. --cookie-h is the
   banner's measured height (0 when there is no banner), so the button never
   depends on a class being added later and cannot flicker. */
:root{--cookie-h:0px}
.wa-float{transition:bottom .18s ease;bottom:calc(var(--cookie-h) + 18px)}
@media(max-width:600px){.wa-float{bottom:calc(var(--cookie-h) + 14px)}}
/* Breadcrumb <nav> must not inherit the fixed site-nav rule (belt and braces) */
nav.crumbs{position:static!important;width:auto;background:none;box-shadow:none;z-index:auto;padding:0}