:root {
            --sys-blue: #017dd3;
            --sys-blue-dark: #0161a3;
            --bg-body: #f9f9f9;
            --bg-surface: #ffffff;
            --bg-premium-dark: #020617;
            --text-main: #202124;
            --text-muted: #5f6368;
            --border-radius-lg: 24px;
            --bs-blue: #0d6efd;
            --bs-indigo: #6610f2;
            --bs-purple: #6f42c1;
            --bs-pink: #d63384;
            --bs-red: #dc3545;
            --bs-orange: #fd7e14;
            --bs-yellow: #ffc107;
            --bs-green: #10B981;
            --bs-teal: #20c997;
            --bs-cyan: #0dcaf0;
            --bs-black: #000;
            --bs-white: #fff;
            --bs-gray: #6c757d;
            --bs-gray-dark: #343a40;
            --bs-gray-100: #f8f9fa;
            --bs-gray-200: #e9ecef;
            --bs-gray-300: #dee2e6;
            --bs-gray-400: #ced4da;
            --bs-gray-500: #adb5bd;
            --bs-gray-600: #6c757d;
            --bs-gray-700: #495057;
            --bs-gray-800: #343a40;
            --bs-gray-900: #212529;
            --bs-primary: #017dd3;
            --bs-secondary: #6c757d;
            --bs-success: #10B981;
            --bs-info: #0dcaf0;
            --bs-warning: #ffc107;
            --bs-danger: #dc3545;
            --bs-light: #f8f9fa;
            --bs-dark: #212529;
            --bs-primary-rgb: 1, 125, 211;
            --bs-secondary-rgb: 108, 117, 125;
            --bs-success-rgb: 16, 185, 129;
            --bs-info-rgb: 13, 202, 240;
            --bs-warning-rgb: 255, 193, 7;
            --bs-danger-rgb: 220, 53, 69;
            --bs-light-rgb: 248, 249, 250;
            --bs-dark-rgb: 33, 37, 41;
            --bs-primary-text-emphasis: #052c65;
            --bs-secondary-text-emphasis: #2b2f32;
            --bs-success-text-emphasis: #0a3622;
            --bs-info-text-emphasis: #055160;
            --bs-warning-text-emphasis: #664d03;
            --bs-danger-text-emphasis: #58151c;
            --bs-light-text-emphasis: #495057;
            --bs-dark-text-emphasis: #495057;
            --bs-primary-bg-subtle: #cfe2ff;
            --bs-secondary-bg-subtle: #e2e3e5;
            --bs-success-bg-subtle: #d1e7dd;
            --bs-info-bg-subtle: #cff4fc;
            --bs-warning-bg-subtle: #fff3cd;
            --bs-danger-bg-subtle: #f8d7da;
            --bs-light-bg-subtle: #fcfcfd;
            --bs-dark-bg-subtle: #ced4da;
            --bs-primary-border-subtle: #9ec5fe;
            --bs-secondary-border-subtle: #c4c8cb;
            --bs-success-border-subtle: #a3cfbb;
            --bs-info-border-subtle: #9eeaf9;
            --bs-warning-border-subtle: #ffe69c;
            --bs-danger-border-subtle: #f1aeb5;
            --bs-light-border-subtle: #e9ecef;
            --bs-dark-border-subtle: #adb5bd;
            --bs-white-rgb: 255, 255, 255;
            --bs-black-rgb: 0, 0, 0;
            --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
            --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
            --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
            --bs-body-font-family: var(--bs-font-sans-serif);
            --bs-body-font-size: 1rem;
            --bs-body-font-weight: 400;
            --bs-body-line-height: 1.5;
            --bs-body-color: #212529;
            --bs-body-color-rgb: 33, 37, 41;
            --bs-body-bg: #f9f9f9;
            --bs-body-bg-rgb: 249, 249, 249;
            --bs-emphasis-color: #000;
            --bs-emphasis-color-rgb: 0, 0, 0;
            --bs-secondary-color: rgba(33, 37, 41, 0.75);
            --bs-secondary-color-rgb: 33, 37, 41;
            --bs-secondary-bg: #e9ecef;
            --bs-secondary-bg-rgb: 233, 236, 239;
            --bs-tertiary-color: rgba(33, 37, 41, 0.5);
            --bs-tertiary-color-rgb: 33, 37, 41;
            --bs-tertiary-bg: #f8f9fa;
            --bs-tertiary-bg-rgb: 248, 249, 250;
            --bs-heading-color: inherit;
            --bs-link-color: #017dd3;
            --bs-link-color-rgb: 1, 125, 211;
            --bs-link-decoration: underline;
            --bs-link-hover-color: #0a58ca;
            --bs-link-hover-color-rgb: 10, 88, 202;
            --bs-code-color: #d63384;
            --bs-highlight-bg: #fff3cd;
            --bs-border-width: 1px;
            --bs-border-style: solid;
            --bs-border-color: #dee2e6;
            --bs-border-color-translucent: rgba(0, 0, 0, 0.175);
            --bs-border-radius: 0.375rem;
            --bs-border-radius-sm: 0.25rem;
            --bs-border-radius-lg: 0.5rem;
            --bs-border-radius-xl: 1rem;
            --bs-border-radius-xxl: 2rem;
            --bs-border-radius-2xl: var(--bs-border-radius-xxl);
            --bs-border-radius-pill: 50rem;
            --bs-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
            --bs-box-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
            --bs-box-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);
            --bs-box-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.075);
            --bs-focus-ring-width: 0.25rem;
            --bs-focus-ring-opacity: 0.25;
            --bs-focus-ring-color: rgba(1, 125, 211, 0.25);
            --bs-form-valid-color: #10B981;
            --bs-form-valid-border-color: #10B981;
            --bs-form-invalid-color: #dc3545;
            --bs-form-invalid-border-color: #dc3545;
        }

        body {
            font-family: 'Google Sans', sans-serif;
            color: var(--text-main);
            overflow-x: hidden;
            -webkit-font-smoothing: antialiased;
        }

        h1, h2, h3, h4, h5, h6 { font-family: 'Google Sans', sans-serif; font-weight: 800; letter-spacing: -0.03rem; }

       
        .ls-tighter { letter-spacing: -0.05rem !important; }
        .text-gradient { background: linear-gradient(135deg, #017dd3 0%, #0dcaf0 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
        .hover-lift { transition: transform 0.3s ease, box-shadow 0.3s ease; }
        .hover-lift:hover { transform: translateY(-10px); box-shadow: 0 20px 40px rgba(0,0,0,0.1) !important; }
        
        
        .navbar {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(12px);
            padding: 15px 0;
            box-shadow: 0 4px 30px rgba(0,0,0,0.03);
            transition: all 0.3s;
        }
        .nav-link { font-weight: 500; color: var(--text-main) !important; font-size: 0.95rem;}
        .btn-primary-sys {
            background-color: var(--sys-blue); border: none; padding: 10px 28px;
            border-radius: 50px; font-weight: 700; color: white; transition: 0.3s;
        }
        .btn-primary-sys:hover { background-color: var(--sys-blue-dark)!important; color: white!important; }

        
        .hero-section {
            padding: 90px 0 0;
            background: radial-gradient(circle at top right, rgba(1, 125, 211, 0.08) 0%, transparent 40%),
                        radial-gradient(circle at bottom left, rgba(1, 125, 211, 0.05) 0%, transparent 40%);
            position: relative;
            overflow: hidden;
            color: var(--text-main);
            z-index: 0;
        }
        .hero-section::before {
            content: '';
            position: absolute;
            top: 0; left: 0; width: 100%; height: 100%;
            background: url('https://images.unsplash.com/photo-1492691527719-9d1e07e534b4?q=80&w=1000&auto=format&fit=crop') no-repeat center center;
            background-size: cover;
            opacity: 0.02;
            z-index: -1;
            pointer-events: none;
        }
        .dashboard-card {
            background: #fff;
            border-radius: 16px;
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
            border: 1px solid rgba(0,0,0,0.08);
            position: relative;
            overflow: hidden;
        }
        .dashboard-card {
            background: #fff;
            border-radius: 16px;
            box-shadow: 0 15px 35px rgba(0,0,0,0.1);
            border: 1px solid rgba(0,0,0,0.05);
        }
        .icon-wrapper { width: 45px; height: 45px; display:flex; align-items:center; justify-content:center; }
        
        .hero-titulo { font-weight: 800!important; line-height: 1.1!important; color: var(--text-main); font-size: 40px; }
        .hero-lead { font-size: 1.2rem; opacity: 0.8; font-weight: 400; max-width: 600px; margin-bottom: 2rem; }
        .badge{
            font-size: 0.88rem;
        }
        .hero-badge {
            background: #10B981; color: var(--bg-body);
            padding: 8px 16px; border-radius: 30px; font-size: 0.85rem; font-weight: 700;
            display: inline-flex; align-items: center; gap: 8px; margin-bottom: 25px;
        }

        .hero-img-container {
            position: relative;
            z-index: 2;
        }
        .hero-mockup {
            transition: transform 0.5s ease;
            filter: drop-shadow(0 20px 50px rgba(0,0,0,0.5));
        }
        .hero-mockup:hover { transform: perspective(1000px) rotateY(-2deg) rotateX(2deg) translateY(-10px); }



.flop-new-card {
    right: 16px !important;
    top: -59px !important;
    width: 270px;
    z-index: 2;
    transform: rotate(3deg) !important;
    border-radius: 21px;
    border: 2px solid #d3d3d3;
}
.flop-new-venda {
    right: 16px !important;
    top: -59px !important;
    width: 270px;
    z-index: 2;
    transform: rotate(3deg) !important;
    border-radius: 21px;
    border: 2px solid #d3d3d3;
}
.flop-pix{
    right: -50px !important;
    width: 270px;
    z-index: 3;
    margin-top: 40px;
    bottom: -83px !important;
    border-radius: 21px;
    border: 2px solid #d3d3d3;   
}
.flop-log {
    right: -50px !important;
    width: 270px;
    z-index: 3;
    margin-top: 13px;
    bottom: -1px !important;
    border-radius: 21px;
    border: 2px solid #d3d3d3;
}
.flop-venda {
    left: -32px !important;
    bottom: -30px !important;
    width: 270px;
    z-index: 2;
    transform: rotate(2deg) !important;  
    border-radius: 21px;
    border: 2px solid #d3d3d3; 
}
.flop-grafic{
    left: -87px;
    top: -30%;
    z-index: 4;   
}
.flop-fogo{
    left: 15px !important;
    top: 60px !important;
    z-index: 3;
    transform: rotate(-6deg) !important;   
}
.flop-lei{
    left: 0px !important;
    top: 84px !important;
    z-index: 3;
    width: 270px;
    transform: rotate(-2deg) !important;  
    border-radius: 21px;
    border: 2px solid #d3d3d3;    
}
.flop-depoimento{
    left: 0px !important;
    bottom: -49px !important;
    z-index: 3;
    width: 270px;
    transform: rotate(-2deg) !important;
    border-radius: 21px;
    border: 2px solid #d3d3d3; 
}
.flop-icon {
    right: 79px !important;
    bottom: 80px !important;
    padding: 12px 15px 8px 15px !important;
    z-index: 3;
    border-radius: 50px !important;
}
.flop-select{
    right: 150px !important;
    top: -67px !important;
    z-index: 2;
    width: 200px;
    transform: rotate(3deg) !important;
    border-radius: 19px;
    border: 2px solid #d3d3d3;
}
.btn-site {
    border: 2px solid #017dd3;
    background: #ffffff;
    color: #017dd3;
}














        /* Animations */
        @keyframes float-y {
            0% { transform: translateY(0px); }
            50% { transform: translateY(-15px); }
            100% { transform: translateY(0px); }
        }
        .animate-float { animation: float-y 6s ease-in-out infinite; }
        .animate-float-delayed { animation: float-y 7s ease-in-out infinite 2s; }
        
        .hero-blob-bg {
            position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
            width: 140%; height: 140%;
            z-index: -1;
        }

        /* --- PAIN POINTS (DOR) --- */
        .pain-section { background: #f8fafc; color: var(--text-main); padding: 100px 0; position: relative; }
        .pain-card {
            background: #ffffff; border: 1px solid rgba(0,0,0,0.05);
            padding: 30px; border-radius: 20px; height: 100%; transition: 0.3s;
            box-shadow: 0 4px 20px rgba(0,0,0,0.03);
        }
        .pain-card:hover { transform: translateY(-10px); box-shadow: 0 20px 40px rgba(0,0,0,0.08);}
        .pain-icon { font-size: 2.5rem; line-height: 1; }

        /* --- FEATURES --- */
        .feature-section { padding: 40px 0; }
        .feature-box {
            padding: 40px; border-radius: 24px; background: var(--bg-surface);
            box-shadow: 0 10px 40px -10px rgba(0,0,0,0.05);
            border: 1px solid rgba(0,0,0,0.04);
            height: 100%; transition: 0.3s;
        }
        .feature-box:hover { transform: translateY(-5px); box-shadow: 0 20px 40px -10px rgba(0,0,0,0.1); border-color: rgba(0,0,0,0.08); }
        .feature-icon-bg {
            width: 60px; height: 60px; border-radius: 16px; display: flex; align-items: center; justify-content: center;
            font-size: 1.5rem; margin-bottom: 25px;
        }
        .feature-img-box {
            border-radius: 20px;
            overflow: hidden;
            transition: transform 0.3s;
        }
        .feature-img-box:hover { transform: translateY(-10px); }
        .feature-img {max-width: 100%; height: auto; display: block; width: 100%;}
        
        /* Blob Backgrounds for Images */
        .blob-bg {
            position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
            width: 120%; height: 120%;
            background: radial-gradient(circle, rgba(1, 125, 211, 0.15) 0%, rgba(0,0,0,0) 70%);
            z-index: -1; filter: blur(40px);
        }
        
        .feature-icon {
            width: 60px; height: 60px;
            border-radius: 16px;
            display: flex; align-items: center; justify-content: center;
            font-size: 1.8rem; margin-bottom: 20px;
        }

        /* Planos */
        .pricing-section { padding: 100px 0; background: linear-gradient(to bottom, #ffffff 0%, #f1f5f9 100%); }
        .card-price { 
            border: 1px solid rgba(0,0,0,0.04); background: white; border-radius: 24px; padding: 40px; transition: 0.3s; 
            box-shadow: 0 10px 40px -10px rgba(0,0,0,0.05); position: relative; overflow: hidden;
        }
        .card-price:hover { transform: translateY(-10px); box-shadow: 0 20px 40px -10px rgba(0,0,0,0.1); }
        .card-price.featured { 
            border: 2px solid var(--sys-primary); 
            box-shadow: 0 20px 60px rgba(1, 125, 211, 0.15); 
        }

        /* --- ESTILOS PREMIUM DOS CARDS DE PLANOS --- */
        .pricing-card {
            transition: all 0.3s ease;
            border-radius: 20px;
            background: #ffffff;
            position: relative;
            overflow: hidden;
            border: 1px solid #f1f5f9;
        }
        .pricing-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 20px 40px rgba(0,0,0,0.08) !important;
        }
        .pricing-badge {
            position: absolute;
            top: 0; right: 0; left: 0;
            background: var(--bs-primary);
            color: white;
            font-weight: 700;
            font-size: 0.8rem;
            letter-spacing: 1px;
            text-transform: uppercase;
            padding: 6px 0;
            text-align: center;
        }
        .price-display {
            font-size: 3.5rem;
            font-weight: 800;
            color: #0f172a;
            line-height: 1;
            letter-spacing: -1.5px;
        }
        .price-currency {
            font-size: 1.5rem;
            font-weight: 600;
            color: #64748b;
            vertical-align: top;
            margin-right: 2px;
        }
        .price-cents {
            font-size: 1.2rem;
            color: #64748b;
            vertical-align: super;
        }
        .price-period {
            font-size: 0.9rem;
            color: #64748b;
            font-weight: 500;
        }
        .feature-list {
            list-style: none;
            padding: 0; margin: 0;
        }
        .feature-item {
            display: flex;
            align-items: flex-start;
            padding: 0;
            border-bottom: 1px dashed #f1f5f9;
            font-size: 0.95rem;
            color: #475569;
            line-height: 1.8;
        }
        .feature-item:last-child { border-bottom: none; }
        .feature-icon {
            display: flex; align-items: center; justify-content: center;
            width: 22px; height: 22px;
            border-radius: 50%;
            background: #dcfce7;
            color: #16a34a;
            font-size: 0.7rem;
            margin-right: 12px;
            margin-top: 3px;
            flex-shrink: 0;
        }

        /* Mobile App Section */
        .app-section { background: #f1f5f9; border-radius: 30px; margin: 40px 0; overflow: hidden; }
        .app-mockup { 
            max-width: 700px; margin: 0 auto; display: block;
        }

        /* Timeline Horizontal */
        .timeline-steps { display: flex; justify-content: center; flex-wrap: wrap; position: relative; }
        .timeline-steps .step { position: relative; flex: 1; min-width: 150px; text-align: center; padding: 0 10px; }
        .timeline-steps .step-icon { width: 60px; height: 60px; background: #fff; border: 2px solid var(--sys-blue); color: var(--sys-blue); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; margin: 0 auto 15px; position: relative; z-index: 2; transition: 0.3s; }
        .timeline-steps .step:hover .step-icon { background: var(--sys-blue); color: white; transform: scale(1.1); box-shadow: 0 10px 20px rgba(1, 125, 211, 0.2); }
        .timeline-steps .step::after { content: ''; position: absolute; top: 30px; left: 50%; width: 100%; height: 2px; background: #e9ecef; z-index: 1; }
        .timeline-steps .step:last-child::after { display: none; }
        @media (max-width: 768px) { .timeline-steps .step::after { display: none; } .timeline-steps .step { margin-bottom: 30px; } }
        
        /* Loading Button Demo */
        .btn-loading { pointer-events: none; opacity: 0.8; }

        .hover-scale { transition: transform 0.3s; }
        .hover-scale:hover { transform: scale(1.05); }

        /* --- OTIMIZAÇÕES MOBILE --- */
        @media (max-width: 991px) {
            .hero-section {
                padding: 115px 0 60px; /* Ajustado para acomodar as abas */
                text-align: center; /* Centraliza tudo */
                background-attachment: scroll; /* Corrige bug visual no iOS */
            }
            .hero-titulo { font-size: 2.5rem; } /* Título menor */
            .hero-lead { margin-left: auto; margin-right: auto; }
            .hero-badge { margin-left: auto; margin-right: auto; }
            
            /* Botões do Hero Full Width */
            .hero-section .d-flex.gap-3 { width: 100%; }
            .hero-section .btn { width: 100%; display: block; }

            /* --- MENU MOBILE DE ABAS (SCROLL HORIZONTAL) --- */
            .landing-navbar {
                backdrop-filter: blur(25px) !important;
                -webkit-backdrop-filter: blur(25px) !important;
                padding: 12px 0 8px 0 !important;
                border: 1px solid rgba(0,0,0,0.05);
            }
            .landing-navbar .container {
                flex-direction: column;
                align-items: flex-start;
            }
            .landing-navbar .navbar-brand {
                margin-bottom: 12px;
                margin-left: 0;
            }
            .landing-navbar .navbar-toggler {
                display: none !important; /* Remove o botão de hambúrguer */
            }
            .landing-navbar .navbar-collapse {
                display: flex !important; /* Força o menu a ficar visível */
                width: 100%;
            }
            .landing-navbar .navbar-nav {
                flex-direction: row !important;
                width: 100%;
                overflow-x: auto;
                flex-wrap: nowrap;
                gap: 8px !important;
                padding-bottom: 4px;
                -webkit-overflow-scrolling: touch;
                scrollbar-width: none;
                align-items: center;
                margin-left: 0 !important;
            }
            .landing-navbar .navbar-nav::-webkit-scrollbar {
                display: none;
            }
            .landing-navbar .nav-link {
                background: rgba(1, 125, 211, 0.05);
                color: var(--bs-primary) !important;
                border-radius: 50px;
                padding: 8px 18px !important;
                font-weight: 600;
                font-size: 0.85rem;
                white-space: nowrap;
                border: 1px solid rgba(1, 125, 211, 0.12);
                transition: all 0.2s ease;
            }
            .landing-navbar .nav-link:hover,
            .landing-navbar .nav-link:active {
                background: var(--bs-primary);
                color: #fff !important;
            }
            /* Ajuste dos botões na barra de rolagem horizontal */
            .landing-navbar .btn {
                white-space: nowrap;
                padding: 8px 18px !important;
                font-size: 0.85rem !important;
                margin-top: 0 !important;
                border-radius: 50px;
            }
            
            /* Ajuste de Cards */
            .pain-card, .feature-box, .card-price { padding: 25px; }
            .display-4 { font-size: 2.5rem; }

            /* Timeline Vertical (Ícone à esquerda) */
            .timeline-steps { flex-direction: column; padding: 0 10px; }
            .timeline-steps .step { 
                display: flex; 
                text-align: left; 
                align-items: flex-start; 
                width: 100%; 
                margin-bottom: 25px;
                padding: 0;
            }
            .timeline-steps .step-icon { 
                margin: 0 15px 0 0; 
                min-width: 50px; width: 50px; height: 50px; 
                font-size: 1.2rem;
            }
            .timeline-steps .step::after { display: none; }
            
            /* --- CORREÇÕES VISUAIS PARA MOBILE (ELEMENTOS FLUTUANTES) --- */
            .dashboard-card {
                transform: none !important; /* Remove rotação */
                margin: 60px auto 60px !important;
                max-width: 100% !important;
            }
            
            /* Empilha os cards flutuantes (Notificações, Pix, etc)
             {
                position: relative !important;
                top: auto !important;
                bottom: auto !important;
                left: auto !important;
                right: auto !important;
                transform: none !important;
                margin: 15px auto !important;
                width: 100% !important;
                max-width: 100% !important;
                box-shadow: 0 4px 15px rgba(0,0,0,0.05) !important;
            } */

            .flop-new-card {
                right: -28px !important;
                top: -59px !important;
                width: 270px;
                z-index: 2;
                transform: rotate(3deg) !important;
                border-radius: 21px;
                border: 2px solid #d3d3d3;
            }
            .flop-new-venda {
                right: 16px !important;
                top: -59px !important;
                width: 270px;
                z-index: 2;
                transform: rotate(3deg) !important;
                border-radius: 21px;
                border: 2px solid #d3d3d3;
            }
            .flop-pix{
                right: -50px !important;
                width: 270px;
                z-index: 3;
                bottom: -130px !important;
                border-radius: 21px;
                border: 2px solid #d3d3d3;   
            }
            .flop-log {
                right: -119px !important;
                width: 270px;
                z-index: 3;
                bottom: -49px !important;
                border-radius: 21px;
                border: 2px solid #d3d3d3;
            }
            .flop-venda {
                left: -32px !important;
                bottom: -30px !important;
                width: 270px;
                z-index: 2;
                transform: rotate(2deg) !important;  
                border-radius: 21px;
                border: 2px solid #d3d3d3; 
            }
            .flop-grafic{
                left: -190px;
                top: -30%;
                z-index: 4;   
            }
            .flop-fogo{
                left: 15px !important;
                top: 60px !important;
                z-index: 3;
                transform: rotate(-6deg) !important;   
            }
            .flop-lei{
                left: -24px !important;
                top: -62px !important;
                z-index: 3;
                width: 270px;
                transform: rotate(-2deg) !important;
                border-radius: 21px;
                border: 2px solid #d3d3d3;   
            }
            .flop-depoimento{
                left: 0px !important;
                bottom: -94px !important;
                z-index: 3;
                width: 270px;
                transform: rotate(-2deg) !important;
                border-radius: 21px;
                border: 2px solid #d3d3d3;
            }
            .flop-select{
                right: -20px !important;
                top: -67px !important;
                z-index: 2;
                width: 200px;
                transform: rotate(3deg) !important;
                border-radius: 19px;
                border: 2px solid #d3d3d3;
            }
            .flop-icon {
                right: 79px !important;
                bottom: 80px !important;
                padding: 12px 15px 8px 15px !important;
                z-index: 3;
                border-radius: 50px !important;
            }                

            /* Ajuste para gráficos SVG flutuantes */
            .position-absolute.animate-float {
                position: relative !important;
                left: auto !important;
                top: auto !important;
                margin: 20px auto 0;
                text-align: center;
            }
            
            /* Remove padding extra dos containers de imagem */
            .position-relative[style*="padding: 20px"] {
                padding: 0 !important;
            }
            
            /* Ajuste do Mockup de Celular (App Section) */
            .phone-mockup {
                transform: scale(0.9);
                margin-bottom: 0px;
            }
            .col-lg-5[style*="min-height"] {
                min-height: auto !important;
                padding-top: 60px;
                padding-bottom: 60px;
            }
            
            /* Ajuste específico para o prompt de instalação no App Section */
            .app-section .position-absolute.bottom-0 {
                position: relative !important;
                bottom: auto !important;
                left: auto !important;
                transform: none !important;
                margin: 20px auto 0 !important;
            }

            /* Ajustes Gerais de Espaçamento */
            .display-4 { font-size: 2.2rem; }
            .display-5 { font-size: 1.8rem; }
            .display-6 { font-size: 1.6rem; }
            .feature-section { padding: 50px 0; }
        }
        @media (max-width: 576px) {
            .feature-section {
                padding: 0 0;
            }
        }
        @media (max-width: 767.98px) {
            .small-mobile {
                font-size: 1rem !important;
                align-items: start;
            }
        }

        /* Mantém o estilo 'small' original para telas maiores, se desejar */
        @media (min-width: 768px) {
            .small-mobile {
                font-size: 0.875em; 
            }
            
        }
        .letter-studio {
            letter-spacing: -0.2rem;
        }





.icon-circle-md {
    min-width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}      

/* Gradient Text */
.text-gradient-primary {
    background: linear-gradient(135deg, #017dd3 0%, #0a58ca 100%);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}

/* Persona Cards */
.persona-card { position: relative; overflow: hidden; border-radius: 24px; height: 400px; transition: 0.3s; }
.persona-card img { width: 100%; height: 100%; object-fit: cover; transition: 0.5s; }
.persona-card:hover img { transform: scale(1.1); }
.persona-overlay { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(to top, rgba(0,0,0,0.9), transparent); padding: 30px; color: white; }

/* --- Alinhamento com o painel (SaaS) --- */
.landing-public-page {
    font-family: 'Google Sans', system-ui, sans-serif;
    overflow-x: hidden;
}

.landing-navbar {
    z-index: 1030;
}

.landing-main {
    overflow-x: hidden;
}

.landing-section-studio .landing-prose h3,
.landing-section-studio .landing-prose h4 {
    font-size: 1.15rem;
    font-weight: 700;
    margin-top: 1.25rem;
    color: #0f172a;
}

.landing-prose ul,
.landing-prose ol {
    padding-left: 1.25rem;
}

.hover-lift-landing {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.hover-lift-landing:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.08) !important;
}

.landing-destaque .landing-destaque-img-wrap {
    border-radius: 20px;
    overflow: hidden;
    padding: 0 40px;
}

.landing-destaque .landing-destaque-img {
    display: block;
    width: 100%;
    max-height: 480px;
    object-fit: cover;
}


    /* Remove bordas, fundos e sombras da grade de funcionalidades */
    .card {
        border: none !important;
        background-color: transparent !important;
        box-shadow: none !important;
    }


/* --- Efeito de Duas Imagens Sobrepostas (Landing) --- */
.overlap-image-wrapper {
    position: relative;
    display: block;
    width: 100%;
    padding-bottom: 30px;
}
.overlap-img-main {
    width: 75%;
    border-radius: 20px;
    position: relative;
    z-index: 2;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}
.overlap-img-sec {
    width: 55%;
    position: absolute;
    bottom: 0;
    right: 5%;
    z-index: 3;
    border-radius: 20px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 15px 40px rgba(0,0,0,0.2);
    border: 5px solid #fff;
}
.overlap-image-wrapper:hover .overlap-img-main {
    transform: scale(0.95) translateX(-5%);
}
.overlap-image-wrapper:hover .overlap-img-sec {
    transform: scale(1.1) translateX(5%) translateY(-5%);
    z-index: 4;
}
.section-studio {
    margin-top: -70px;
}

/* --- Bloco: Print do Sistema (Imagem Larga) --- */
.landing-print-wrapper {
    position: relative;
    margin: 40px auto;
    width: 100%;
    max-width: 1280px;
}
.landing-print-img {
    width: 100%;
    height: auto;
    display: block;
    animation: float-y 6s ease-in-out infinite;
    border-radius: 16px;
}

/* --- Bloco: Print do Sistema (Camada Dupla / Sobreposição) --- */
.landing-print-dual-wrapper {
    position: relative;
    margin: 40px auto;
    width: 100%;
    max-width: 980px;
    padding-top: 160px; /* Aumentado para expor mais o print de trás e gerar curiosidade */
    transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.landing-print-back {
    position: absolute;
    top: 0;
    left: 5%;
    width: 90%;
    border-radius: 16px;
    box-shadow: 0 -10px 40px rgba(0,0,0,0.08);
    border: 1px solid rgba(0,0,0,0.05);
    z-index: 1;
    opacity: 0.7;
    cursor: pointer;
    transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    animation: float-y 8s ease-in-out infinite 1s;
}
.landing-print-front {
    position: relative;
    width: 100%;
    border-radius: 16px;
    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);
    border: 1px solid rgba(0,0,0,0.08);
    z-index: 2;
    display: block;
    margin-top: 0;
    transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    animation: float-y 6s ease-in-out infinite;
}
.landing-print-dual-wrapper:hover .landing-print-back,
.landing-print-dual-wrapper:hover .landing-print-front {
    animation-play-state: paused !important;
}
.landing-print-dual-wrapper:hover {
    transform: scale(1.02);
}
.landing-print-dual-wrapper:hover .landing-print-back {
    transform: translateY(-25px) !important;
    opacity: 1;
}
.landing-print-dual-wrapper:hover .landing-print-front {
    transform: translateY(10px) !important;
}

/* Efeito ESPECÍFICO ao passar o mouse na imagem de TRÁS */
.landing-print-dual-wrapper .landing-print-back:hover {
    transform: translateY(-15px) scale(1.05) !important;
    z-index: 10 !important;
    box-shadow: 0 30px 60px -15px rgba(0,0,0,0.3) !important;
}
.landing-print-dual-wrapper .landing-print-back:hover ~ .landing-print-front {
    transform: translateY(30px) scale(0.95) !important;
    opacity: 0.3 !important;
    z-index: 1 !important;
}

/* --- Efeito Cover Flow (Carrossel 3D) --- */
.coverflow-container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    overflow: hidden;
}
.coverflow-img {
    position: absolute;
    width: 65%;
    max-width: 720px;
    border-radius: 12px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.25);
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.2);
}
.coverflow-img.active-cover:hover {
    transform: translateX(0%) scale(1.08) !important;
    box-shadow: 0 25px 60px rgba(0,0,0,0.35) !important;
}
@media (max-width: 768px) {
    .coverflow-img { width: 80%; }
    .coverflow-container { height: 300px !important; }
}