.mobile-preview-section {background: transparent;padding: 0;}.service-preview-img {position: relative;z-index: 1;overflow: hidden;display: flex;justify-content: center;align-items: center;transition: transform 0.3s ease;margin-top: 50px;}.service-preview-img:hover {transform: translateY(-10px);}.service-preview-img img {width: 100%;height: auto;display: block;}.mobile-device-frame {max-width: 100%;width: 100%;margin: 0 auto;background: #fff;border-radius: 2rem;box-shadow: 0 1.25rem 3.75rem rgba(0, 0, 0, 0.15);overflow: hidden;border: 0.75rem solid #2d3436;position: relative;z-index: 1;}@media (max-width: 450px) {.mobile-device-frame {border-width: 8px;border-radius: 30px;}}.app-screen {padding: 0;position: relative;min-height: 80vh;width: 100%;overflow: hidden;}.app-screen-food {background: linear-gradient(135deg, #086ad8 0%, #0652a8 100%);}.app-screen-ai {background: linear-gradient(135deg, #086ad8 0%, #0652a8 100%);}.app-screen-whatsapp {background: #e5ddd5;display: flex;flex-direction: column;}.app-screen-devops {background: linear-gradient(135deg, #232526 0%, #414345 100%);color: white;}.app-screen-api {background: linear-gradient(135deg, #6c5ce7 0%, #a29bfe 100%);color: white;display: flex;flex-direction: column;align-items: center;}.app-screen-custom {background: #1e1e1e;display: flex;flex-direction: column;}.app-header-bar {background: rgba(255, 255, 255, 0.15);padding: 20px 20px 15px;-webkit-backdrop-filter: blur(10px);backdrop-filter: blur(10px);}.app-screen-devops .app-header-bar,.app-screen-api .app-header-bar {background: rgba(255, 255, 255, 0.1);border-bottom: 1px solid rgba(255, 255, 255, 0.1);}.app-location {color: white;display: flex;align-items: center;gap: 8px;margin-bottom: 15px;}.app-location i {font-size: 18px;}.app-location-text h5 {font-size: 12px;margin: 0;opacity: 0.9;}.app-location-text p {font-size: 15px;margin: 0;font-weight: 600;}.app-screen-devops .app-location i {color: #00cec9;}.app-search {background: white;border-radius: 15px;padding: 12px 15px;display: flex;align-items: center;gap: 10px;}.app-search i {color: #086ad8;}.app-search input {border: none;outline: none;flex: 1;font-size: 14px;}.app-categories {background: white;padding: 20px;}.app-section-title {font-size: 18px;font-weight: 600;margin-bottom: 15px;color: #2d3436;}.app-category-scroll {display: flex;gap: 12px;overflow-x: auto;padding-bottom: 10px;}.app-category-item {min-width: 75px;text-align: center;}.app-category-icon {width: 60px;height: 60px;background: linear-gradient(135deg, #def5ff 0%, #e8f4ff 100%);border-radius: 15px;display: flex;align-items: center;justify-content: center;font-size: 28px;margin: 0 auto 8px;transition: all 0.3s ease;}.app-category-item.active .app-category-icon {background: linear-gradient(135deg, #086ad8 0%, #0652a8 100%);color: white;}.app-category-name {font-size: 12px;color: #636e72;font-weight: 500;}.app-category-item.active .app-category-name {color: #086ad8;font-weight: 600;}.app-food-list {background: white;padding: 0 20px 20px;}.app-food-card {background: #fff;border-radius: 20px;padding: 12px;margin-bottom: 12px;display: flex;gap: 12px;box-shadow: 0 3px 15px rgba(0, 0, 0, 0.08);}.app-food-image {width: 85px;height: 85px;border-radius: 15px;background: linear-gradient(135deg, #def5ff 0%, #e8f4ff 100%);display: flex;align-items: center;justify-content: center;font-size: 40px;flex-shrink: 0;}.app-food-info {flex: 1;display: flex;flex-direction: column;justify-content: space-between;}.app-food-name {font-size: 14px;font-weight: 600;color: #2d3436;margin-bottom: 3px;}.app-food-restaurant {font-size: 11px;color: #636e72;margin-bottom: 5px;}.app-food-rating {display: flex;align-items: center;gap: 4px;font-size: 11px;color: #636e72;}.app-food-rating i {color: #ffc107;font-size: 12px;}.app-food-footer {display: flex;justify-content: space-between;align-items: center;margin-top: 5px;}.app-food-price {font-size: 16px;font-weight: 700;color: #086ad8;}.app-add-btn {width: 30px;height: 30px;background: linear-gradient(135deg, #086ad8 0%, #0652a8 100%);border-radius: 10px;display: flex;align-items: center;justify-content: center;color: white;border: none;font-size: 14px;}.app-bottom-nav {background: white;padding: 12px 20px 15px;display: flex;justify-content: space-around;border-top: 1px solid #e9ecef;}.app-nav-item {display: flex;flex-direction: column;align-items: center;gap: 3px;}.app-nav-item i {font-size: 18px;color: #b2bec3;}.app-nav-item span {font-size: 10px;color: #b2bec3;}.app-nav-item.active i,.app-nav-item.active span {color: #086ad8;}.ai-stat-card {background: #f0f7ff;border-radius: 15px;padding: 15px;margin-bottom: 15px;display: flex;align-items: center;gap: 15px;}.ai-stat-icon {width: 45px;height: 45px;background: #fff;border-radius: 10px;display: flex;align-items: center;justify-content: center;color: #086ad8;font-size: 20px;box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);}.ai-stat-info h6 {margin: 0;font-size: 12px;color: #636e72;}.ai-stat-info h4 {margin: 0;font-size: 18px;color: #086ad8;font-weight: 700;}.ai-dashboard {background: white;border-radius: 20px 20px 0 0;padding: 20px;min-height: 400px;margin-top: 20px;}.ai-graph {height: 100px;background: #f8f9fa;border-radius: 10px;display: flex;align-items: flex-end;justify-content: space-around;padding: 10px;margin-bottom: 20px;}.ai-bar {width: 8px;background: #086ad8;border-radius: 4px;opacity: 0.3;}.ai-bar.active {height: 70% !important;opacity: 1;}.wa-header {background: #075e54;padding: 15px 15px 10px;display: flex;align-items: center;gap: 15px;color: white;}.wa-back {font-size: 16px;}.wa-profile-pic {width: 40px;height: 40px;background: white;border-radius: 50%;display: flex;align-items: center;justify-content: center;color: #075e54;font-size: 20px;}.wa-info h5 {margin: 0;font-size: 16px;color: white;font-weight: 500;}.wa-info p {margin: 0;font-size: 12px;color: #dcf8c6;}.wa-chat-area {flex: 1;padding: 20px;overflow-y: auto;display: flex;flex-direction: column;gap: 15px;background-image: url("https://user-images.githubusercontent.com/15075759/28719144-86dc0f70-73b1-11e7-911d-60d70fcded21.png");background-size: contain;}.wa-msg {max-width: 80%;padding: 8px 12px;border-radius: 8px;font-size: 14px;line-height: 1.4;position: relative;box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);}.wa-msg.in {background: white;align-self: flex-start;border-top-left-radius: 0;}.wa-msg.out {background: #dcf8c6;align-self: flex-end;border-top-right-radius: 0;}.wa-msg-meta {font-size: 10px;color: #999;text-align: right;margin-top: 4px;}.wa-btn-group {display: flex;flex-direction: column;gap: 5px;margin-top: 10px;}.wa-btn {background: white;border: none;padding: 10px;border-radius: 5px;color: #00a5f4;font-weight: 500;font-size: 14px;text-align: center;box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);cursor: pointer;}.console-widget {background: rgba(255, 255, 255, 0.05);margin: 15px;padding: 15px;border-radius: 10px;border: 1px solid rgba(255, 255, 255, 0.1);}.widget-title {font-size: 12px;text-transform: uppercase;color: #b2bec3;margin-bottom: 10px;letter-spacing: 1px;}.status-row {display: flex;justify-content: space-between;align-items: center;margin-bottom: 8px;}.status-label {font-size: 14px;}.status-val {font-weight: bold;font-family: monospace;}.status-val.green {color: #00b894;}.status-val.yellow {color: #fdcb6e;}.status-val.blue {color: #0984e3;}.pipeline-step {display: flex;align-items: center;gap: 10px;margin-bottom: 12px;}.step-icon {width: 30px;height: 30px;border-radius: 50%;background: #2d3436;display: flex;align-items: center;justify-content: center;font-size: 12px;}.step-icon.done {background: #00b894;color: white;}.step-icon.active {background: #0984e3;color: white;box-shadow: 0 0 10px rgba(9, 132, 227, 0.5);}.step-line {flex: 1;height: 2px;background: rgba(255, 255, 255, 0.1);}.step-line.active {background: #0984e3;}.integration-hub {position: relative;width: 100%;height: 300px;display: flex;align-items: center;justify-content: center;margin-top: 20px;}.hub-center {width: 80px;height: 80px;background: white;border-radius: 50%;display: flex;align-items: center;justify-content: center;color: #6c5ce7;font-size: 32px;z-index: 2;box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);}.hub-satellite {position: absolute;width: 50px;height: 50px;background: rgba(255, 255, 255, 0.2);border-radius: 12px;display: flex;align-items: center;justify-content: center;font-size: 20px;color: white;animation: float 3s ease-in-out infinite;}.hub-satellite.s1 {top: 40px;left: 60px;animation-delay: 0s;}.hub-satellite.s2 {top: 40px;right: 60px;animation-delay: 1s;}.hub-satellite.s3 {bottom: 40px;left: 80px;animation-delay: 2s;}.hub-satellite.s4 {bottom: 60px;right: 80px;animation-delay: 0.5s;}@keyframes float {0% {transform: translateY(0px);}50% {transform: translateY(-10px);}100% {transform: translateY(0px);}}.connection-line {position: absolute;top: 50%;left: 50%;width: 100px;height: 2px;background: rgba(255, 255, 255, 0.3);transform-origin: 0 0;z-index: 1;}.line-1 {transform: rotate(135deg);}.line-2 {transform: rotate(45deg);}.line-3 {transform: rotate(225deg);}.line-4 {transform: rotate(315deg);}.api-request-box {width: 90%;background: rgba(0, 0, 0, 0.2);border-radius: 10px;padding: 15px;font-family: monospace;font-size: 12px;margin-top: auto;margin-bottom: 20px;}.req-method {color: #fdcb6e;font-weight: bold;margin-right: 10px;}.req-url {color: white;opacity: 0.8;}.req-status {color: #00b894;float: right;}.editor-header {background: #252526;padding: 10px 15px;display: flex;align-items: center;gap: 8px;border-bottom: 1px solid #333;}.dot {width: 12px;height: 12px;border-radius: 50%;}.red {background: #ff5f56;}.yellow {background: #ffbd2e;}.green {background: #27c93f;}.tab {background: #1e1e1e;color: white;padding: 5px 15px;font-size: 12px;border-radius: 5px 5px 0 0;margin-left: 10px;}.code-area {padding: 20px;font-family: "Consolas", "Monaco", monospace;font-size: 12px;line-height: 1.6;color: #d4d4d4;}.kwd {color: #569cd6;} .str {color: #ce9178;} .fn {color: #dcdcaa;} .cls {color: #4ec9b0;} .app-preview-overlay {margin-top: auto;background: white;border-radius: 20px 20px 0 0;padding: 20px;height: 250px;animation: slideUp 1s ease-out;box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.3);}@keyframes slideUp {from {transform: translateY(100%);}to {transform: translateY(0);}}.ui-card {background: white;border: 1px solid #eee;border-radius: 10px;padding: 15px;margin-bottom: 10px;display: flex;align-items: center;gap: 10px;box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);}.ui-avatar {width: 40px;height: 40px;background: #0984e3;border-radius: 50%;}.ui-lines {flex: 1;}.line {height: 8px;background: #dfe6e9;border-radius: 4px;margin-bottom: 5px;}.line.short {width: 60%;}.process__box {background: white;padding: 30px 20px;border-radius: 10px;transition: all 0.3s ease;height: 100%;display: flex;flex-direction: column;}.process__box:hover {transform: translateY(-5px);box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);}.process__box--icon {width: 80px;height: 80px;line-height: 80px;text-align: center;background: rgba(8, 106, 216, 0.1);color: #086ad8;font-size: 32px;border-radius: 50%;margin: 0 auto 20px;position: relative;}.process__box--count {position: absolute;top: 0;right: 0;width: 25px;height: 25px;line-height: 25px;background: #086ad8;color: white;font-size: 12px;border-radius: 50%;font-weight: 600;}.process__box--title {font-size: 20px;font-weight: 700;margin-bottom: 10px;color: #001d23;}@media (max-width: 480px) {.app-screen {min-height: 60vh;}.mobile-device-frame {max-width: 100%;border: 0.5rem solid #2d3436;}}@media (min-width: 481px) and (max-width: 768px) {.app-screen {min-height: 70vh;}}@media (min-width: 769px) and (max-width: 1024px) {.app-screen {min-height: 80vh;}}@media (min-width: 1025px) and (max-width: 1440px) {.app-screen {min-height: 85vh;}}@media (min-width: 1441px) {.app-screen {min-height: 90vh;}}