/* Hero Background */
        .hero-section {
            background: linear-gradient(135deg, rgba(255,251,235,0.4) 0%, rgba(240,253,250,0.3) 50%, rgba(239,246,255,0.4) 100%);
            border-bottom: 1px solid #f1f5f9;
            position: relative;
        }

        /* Decorative Background Elements */
        .bg-deco-circle {
            position: absolute;
            border-radius: 50%;
            filter: blur(60px);
            z-index: 0;
        }
        .bg-deco-1 { width: 300px; height: 300px; background: rgba(254,240,138,0.3); top: 30%; left: -50px; }
        .bg-deco-2 { width: 400px; height: 400px; background: rgba(207,250,254,0.3); bottom: 10%; right: -50px; }

        /* Typography & Components */
        .fw-black { font-weight: 900; }
        
        .sketch-underline { position: relative; display: inline-block; }
        .sketch-underline::after {
            content: '';
            position: absolute;
            left: 5%;
            bottom: -5px;
            width: 90%;
            height: 12px;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 252 14' fill='none'%3E%3Cpath d='M3 11C45.5 5.5 119.5 2 249 9.5' stroke='%23ef4444' stroke-width='4.5' stroke-linecap='round'/%3E%3C/svg%3E");
            background-size: 100% 100%;
            background-repeat: no-repeat;
        }

        .btn-try-free {
            background-color: #00873c;
            color: white;
            padding: 12px 32px;
            font-weight: 700;
            border-radius: 8px;
            box-shadow: 0 10px 15px -3px rgba(0, 135, 60, 0.3);
            transition: all 0.3s ease;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }
        .btn-try-free:hover {
            background-color: #006d30;
            color: white;
        }
        .btn-try-free i { transition: transform 0.3s; }
        .btn-try-free:hover i { transform: translateX(4px); }

        /* Phone Mockups (Hero) */
        .mockup-container {
            position: relative;
            width: 100%;
            max-width: 420px;
            height: 460px;
            margin: 0 auto;
            z-index: 1;
        }
        .phone-frame {
            position: absolute;
            background-color: #020617;
            border-radius: 36px;
            padding: 10px;
            box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);
            border: 1px solid #1e293b;
            transition: all 0.5s ease;
        }
        .phone-back {
            left: 1rem;
            top: 2rem;
            width: 210px;
            height: 410px;
            transform: rotate(-12deg);
        }
        .phone-back:hover { transform: rotate(-4deg); z-index: 10; }
        .phone-front {
            right: 1rem;
            bottom: 0.5rem;
            width: 215px;
            height: 415px;
            transform: rotate(-4deg);
        }
        .phone-front:hover { transform: rotate(2deg); z-index: 10; }
        
        .phone-screen {
            width: 100%;
            height: 100%;
            border-radius: 28px;
            overflow: hidden;
            display: flex;
            flex-direction: column;
        }
        .phone-screen-light { background-color: #f8fafc; border: 1px solid #f1f5f9; }
        .phone-screen-dark { background-color: #1e293b; border: 1px solid #1e293b; }
        .status-bar { height: 24px; padding: 0 16px; font-size: 9px; display: flex; justify-content: space-between; align-items: center; user-select: none; }

        /* Section Layouts */
        .dotted-divider { position: relative; }
        @media (min-width: 992px) {
            .dotted-divider::after {
                content: '';
                position: absolute;
                top: 5%;
                right: 0;
                height: 90%;
                border-right: 2px dashed #3b6cb4;
                opacity: 0.6;
            }
        }

        .icon-box {
            width: 56px;
            height: 56px;
            border-radius: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
            transition: transform 0.3s;
        }
        .feature-row:hover .icon-box { transform: scale(1.05); }

        /* Blueprint Cards */
        .blueprint-card {
            background-color: #3b6cb4;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            color: white;
            height: 100%;
            border-radius: 16px;
            padding: 32px;
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
        }
        .blueprint-card:hover {
            background-color: #2b4d83;
            transform: translateY(-6px);
            box-shadow: 0 12px 24px -10px rgba(59, 108, 180, 0.4);
        }

        /* Industry Tabs */
        .industry-tab {
            padding: 10px 24px;
            border-radius: 50px;
            font-weight: 700;
            font-size: 14px;
            border: none;
            transition: all 0.2s;
        }
        .industry-tab.active {
            background-color: #00873c;
            color: white;
            box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
        }
        .industry-tab.inactive {
            background-color: #f1f5f9;
            color: #334155;
        }
        .industry-tab.inactive:hover { background-color: #e2e8f0; }

        .industry-panel { display: none; }
        .industry-panel.active { display: block; animation: fadeIn 0.4s ease; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

        /* Analytical Image Wrapper */
        .img-profile-wrapper {
            position: relative;
            width: 100%;
            max-width: 350px;
            aspect-ratio: 1;
            border-radius: 50%;
            border: 8px solid white;
            box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);
            overflow: hidden;
            margin: 0 auto;
        }
        .img-profile-wrapper img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s ease;
        }
        .img-profile-wrapper:hover img { transform: scale(1.05); }

        /* Feature Cards (JS Generated) */
        .feature-grid-card {
            background: white;
            border-radius: 12px;
            padding: 16px;
            box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
            transition: all 0.3s ease;
            text-decoration: none;
            display: block;
        }
        .feature-grid-card:hover { box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1); transform: translateY(-3px); }
        .feature-grid-card img {
            width: 100%;
            height: 200px;
            object-fit: contain;
            border-radius: 8px;
            transition: transform 0.5s ease;
        }
        .feature-grid-card:hover img { transform: scale(0.95); opacity: 0.8; }