/* Generated by tools/build_homepage_css.py; edit source styles instead. */
/* Source: vendor/css/vazirmatn-font-face.css */
@font-face { font-family: 'Vazirmatn'; src: url('../cdn_files/fonts/Vazirmatn%5Bwght%5D.woff2') format('woff2-variations'); font-weight: 100 900; font-style: normal; font-display: swap; }
/* Source: css/home2.css */
.about-v3 { padding: 64px 0; } .about-v3 .about-card { background: transparent;   border: none; border-radius: 0; box-shadow: none; padding: 0; } .about-v3 .about-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 32px; align-items: start; } .about-v3 .about-subtitle { color: var(--primary-color); font-weight: 700; font-size: clamp(1.1rem, 2.2vw, 1.4rem); margin: 0 0 10px 0; } .about-v3 .about-title-muted { color: #9aa3b2; font-weight: 600; font-size: 0.9em; } .about-v3 .about-desc { color: #c4cbda; line-height: 1.9; margin: 0 0 16px 0; max-width: 65ch; } .about-v3 .about-chips { display: flex; gap: 10px; flex-wrap: wrap; margin: 10px 0 0 0; } .about-v3 .chip { background: transparent; color: var(--secondary-color); padding: 6px 12px; border-radius: 999px; font-size: 0.82rem; border: 1px solid rgba(100, 116, 255, 0.35); } .about-v3 .chip:hover { background: linear-gradient( 135deg, var(--primary-color), var(--secondary-color) ); color: #fff; } .about-v3 .about-list-title { color: #e1e6f3; font-weight: 700; margin: 4px 0 12px 0; } .about-v3 .about-list { list-style: none; padding: 0; margin: 0 0 12px 0; } .about-v3 .about-list li { color: #c0c7d8; display: flex; align-items: center; gap: 10px; padding: 9px 0; } .about-v3 .about-list .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--secondary-color); flex: 0 0 8px; box-shadow: 0 0 0 3px rgba(100, 116, 255, 0.15); } .about-v3 .about-actions .btn { margin-top: 10px; } @media (max-width: 1024px) { .about-v3 .about-grid { grid-template-columns: 1fr; gap: 20px; } } :root { --primary-color: #013366; --secondary-color: #28ab88; } @import url("/static/cdn_files/Font_Persian_Shabnam_Shabnam.css"); * { margin: 0; padding: 0; box-sizing: border-box; } html, body { overflow-x: hidden; width: 100%; } body { font-family: "Vazirmatn", sans-serif; color: #222; line-height: 1.6; direction: rtl; scroll-behavior: smooth; } .main { background-color: #0f0a2e; margin: 0; border-radius: 0; width: 100%; overflow-x: hidden; } .container { max-width: 100%; margin: 0 auto; padding: 0 1rem; width: 100%; box-sizing: border-box; } @media (min-width: 640px) { .container { max-width: 100%; padding: 0 1.5rem; } } @media (min-width: 768px) { .container { max-width: 100%; padding: 0 2rem; } } @media (min-width: 1024px) { .container { max-width: 1200px; padding: 0 2rem; } } @media (min-width: 1280px) { .container { max-width: 1280px; padding: 0 2.5rem; } }   .icon { width: 1.25rem; height: 1.25rem; stroke-width: 2; }   .header { position: relative; transition: background-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease; z-index: 5; width: 100%; margin: 0; border-radius: 0; } .header.is-sticky { position: fixed; top: 0; left: 0; right: 0; background: rgba(15, 10, 46, 1); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25); } .header.is-sticky .header-content { height: 3.5rem; } .header-content { display: flex; align-items: center; justify-content: space-between; height: 4rem; padding: 0.5rem 0; } .logo { display: flex; align-items: center; gap: 0.5rem; } .logo-icon { width: 2.75rem; height: 2.75rem; display: flex; align-items: center; justify-content: center; border-radius: 0.5rem; color: white; font-weight: bold; font-size: 1.25rem; } .logo-icon img { width: 100%; height: 100%; margin-top: 1rem; object-fit: cover; } .logo-text { font-size: 1.5rem; font-weight: bold; color: white; } .nav { display: flex; align-items: center; } .nav-list { display: flex; align-items: center; gap: 0.25rem; list-style: none; margin: 0; padding: 0; } .nav-item { position: relative; margin: 0; padding: 0; } .nav-link { display: inline-block; padding: 0.4rem 0.875rem; color: #d1d5db; text-decoration: none; font-size: 0.8125rem; font-weight: 500; border-radius: 0.5rem; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: hidden; } .nav-link::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: linear-gradient(135deg, rgba(40, 171, 136, 0.1), rgba(1, 51, 102, 0.1)); opacity: 0; transition: opacity 0.3s ease; border-radius: 0.5rem; } .nav-link:hover { color: white; transform: translateY(-1px); } .nav-link:hover::before { opacity: 1; } .nav-link.active { color: white; background: linear-gradient(135deg, rgba(40, 171, 136, 0.15), rgba(1, 51, 102, 0.15)); border: 1px solid rgba(40, 171, 136, 0.3); } .nav-link.active::before { opacity: 1; }   .nav-link::after { content: ""; position: absolute; bottom: 0.25rem; right: 50%; left: 50%; height: 2px; background: linear-gradient(90deg, var(--secondary-color), var(--primary-color)); border-radius: 2px; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); transform: scaleX(0); } .nav-link:hover::after, .nav-link.active::after { right: 1rem; left: 1rem; transform: scaleX(1); } .header-actions { display: flex; align-items: center; gap: 0.5rem; } .header-actions .btn { padding: 0.45rem 0.875rem; font-size: 0.8125rem; white-space: nowrap; min-height: 2rem; border-radius: 0.5rem; } .header-actions .btn-ghost { padding: 0.45rem 0.75rem; border: 1px solid rgba(255, 255, 255, 0.15); } .header-actions .btn-ghost:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.25); } .header-actions #themeToggle { min-width: 2rem; width: 2rem; height: 2rem; padding: 0; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(255, 255, 255, 0.15); background: rgba(255, 255, 255, 0.05); } .header-actions #themeToggle:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.25); } .header-actions #themeIcon { font-size: 1rem; line-height: 1; }   .about { width: 100%; margin: 0 auto; background-color: #ffffff; padding: 3rem 0; box-sizing: border-box; } @media (min-width: 768px) { .about { padding: 4rem 0; } } @media (min-width: 1024px) { .about { padding: 5rem 0; } } .about .container { max-width: 100%; } .about-grid { display: flex; flex-direction: column; align-items: stretch; gap: 2rem; } @media (min-width: 768px) { .about-grid { flex-direction: row; gap: 4rem; } } .about-image { flex: 1; min-width: 0; position: relative; opacity: 0; transform: translateY(50px); transition: opacity 1.2s ease, transform 1.2s ease; } @media (min-width: 768px) { .about-image { min-width: 300px; } } .about-image-background { width: 80%; height: 100%; filter: brightness(0.9); border-radius: 2rem; box-shadow: 0px 10px 40px rgba(0, 0, 0, 0.3); object-fit: cover; } .about-image-overlay { position: absolute; top: 45%; left: -30px; z-index: 1; } .about-image-overlay img { width: 80%; height: 80%; object-fit: cover; filter: brightness(0.95); } .about-content { width: 100%; opacity: 0; transform: translateY(50px); transition: opacity 1.2s ease, transform 1.2s ease; } @media (min-width: 768px) { .about-content { width: 50%; } }   .about.animate .about-image { opacity: 1; transform: translateY(0); transition-delay: 0.2s; } .about.animate .about-content { opacity: 1; transform: translateY(0); transition-delay: 0.4s; } .about.animate .about-feature { opacity: 1; transform: translateY(0); } .about-feature:nth-child(1) { transition-delay: 0.5s; } .about-feature:nth-child(2) { transition-delay: 0.7s; } .about-feature:nth-child(3) { transition-delay: 0.9s; } .about-content .section-header { text-align: right; margin-bottom: 1.5rem; } .about-content .section-header .badge { margin-bottom: 0.5rem; margin-right: 0; padding: 0.25rem 0.75rem; font-size: 0.6875rem; font-weight: 500; border: 1px solid rgba(40, 171, 136, 0.15); background: rgba(40, 171, 136, 0.08); color: var(--secondary-color); } .about-content .section-title { color: var(--primary-color); font-size: 2.5rem; font-weight: 700; margin-bottom: 0.5rem; text-align: right; line-height: 1.3; letter-spacing: -0.3px; } .about-content .section-description { color: #555; font-size: 0.8125rem; line-height: 1.6; width: 90%; text-align: right; } .about-features { display: flex; flex-direction: column; gap: 0.625rem; } .about-feature { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem; width: 100%; background: #ffffff; border-radius: 0.5rem; border: 1px solid #e8e8e8; transition: all 0.2s ease, opacity 0.9s ease, transform 0.9s ease; opacity: 0; transform: translateY(40px); } @media (min-width: 768px) { .about-feature { width: 75%; } } .about-feature:hover { background: #fafafa; border-color: rgba(40, 171, 136, 0.2); } .about-feature-icon { width: 3rem; height: 3rem; display: flex; align-items: center; justify-content: center; border-radius: 0.375rem; background: linear-gradient( 135deg, var(--secondary-color), var(--primary-color) ); flex-shrink: 0; } .about-feature-icon svg { width: 1.5rem; height: 1.5rem; stroke: white; stroke-width: 2.5; } .about-feature-content { flex: 1; } .about-feature-title { font-size: 0.9375rem; font-weight: 600; color: var(--primary-color); margin-bottom: 0.375rem; line-height: 1.4; letter-spacing: -0.2px; } .about-feature-description { font-size: 0.75rem; line-height: 1.5; color: #666; } @media (max-width: 768px) { .about-content .section-title { font-size: 2rem; } .about-image-background { width: 100%; } .about-image-overlay { left: 0; top: 50%; transform: translateY(-50%); } .about-image-overlay img { width: 100%; height: auto; } }   .btn { padding: 0.5rem 1.5rem; border: none; border-radius: 0.5rem; font-family: "Vazirmatn", sans-serif; font-size: 0.875rem; font-weight: 500; cursor: pointer; transition: all 0.3s; display: inline-flex; align-items: center; gap: 0.5rem; } .btn-lg { padding: 1rem 2rem; font-size: 1.125rem; } .nounderline { text-decoration: none; } .btn-gradient-red { background: linear-gradient(135deg, #ff4b2b, #8b0000); color: white; border: none; padding: 10px 20px; border-radius: 8px; cursor: pointer; transition: all 0.3s ease; } .btn-gradient-red:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(255, 75, 43, 0.3); } .btn-gradient { background: linear-gradient(135deg, #28ab88, #013366); color: white; } .btn-gradient:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(40, 171, 136, 0.3); } .btn-ghost { background: transparent; color: white; } .btn-ghost:hover { background: rgba(255, 255, 255, 0.1); } .btn-outline { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.2); color: white; } .btn-outline:hover { background: rgba(255, 255, 255, 0.1); } .btn-menu { display: none; background: transparent; border: none; color: white; font-size: 1.5rem; cursor: pointer; padding: 0.5rem; position: relative; z-index: 1001; transition: all 0.3s ease; } .btn-menu:hover { opacity: 0.8; } .btn-menu .menu-icon { display: flex; flex-direction: column; gap: 5px; width: 24px; height: 18px; position: relative; } .btn-menu .menu-line { display: block; width: 100%; height: 2px; background: white; border-radius: 2px; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); transform-origin: center; } .btn-menu.active .menu-line:nth-child(1) { transform: rotate(45deg) translate(7px, 7px); } .btn-menu.active .menu-line:nth-child(2) { opacity: 0; transform: scaleX(0); } .btn-menu.active .menu-line:nth-child(3) { transform: rotate(-45deg) translate(7px, -7px); }   .mobile-menu-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.75); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); z-index: 999; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; } .mobile-menu-overlay.active { opacity: 1; visibility: visible; }   .mobile-menu { position: fixed; top: 0; right: -100%; width: 85%; max-width: 400px; height: 100vh; background: linear-gradient(135deg, rgba(15, 10, 46, 0.98), rgba(15, 10, 46, 0.95)); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: -4px 0 24px rgba(0, 0, 0, 0.5); z-index: 1000; display: flex; flex-direction: column; transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1); overflow-y: auto; overflow-x: hidden; } .mobile-menu.active { right: 0; }   .mobile-menu-header { display: flex; align-items: center; justify-content: space-between; padding: 1.25rem 1.5rem; border-bottom: 1px solid rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.03); } .mobile-menu-logo { display: flex; align-items: center; gap: 0.75rem; } .mobile-menu-logo img { width: 2.5rem; height: 2.5rem; object-fit: cover; border-radius: 0.5rem; } .mobile-menu-logo-text { font-size: 1.25rem; font-weight: 700; color: white; background: linear-gradient(135deg, #28ab88, #013366); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .mobile-menu-close { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 0.5rem; width: 2.5rem; height: 2.5rem; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.3s ease; color: white; } .mobile-menu-close:hover { background: rgba(255, 255, 255, 0.15); border-color: rgba(255, 255, 255, 0.3); transform: rotate(90deg); } .mobile-menu-close svg { width: 1.25rem; height: 1.25rem; stroke: currentColor; }   .mobile-menu-nav { flex: 1; padding: 1rem 0; overflow-y: auto; } .mobile-menu-list { list-style: none; margin: 0; padding: 0; } .mobile-menu-item { margin: 0; padding: 0; opacity: 0; transform: translateX(20px); transition: opacity 0.3s ease, transform 0.3s ease; } .mobile-menu.active .mobile-menu-item { animation: slideInRight 0.4s ease forwards; } .mobile-menu.active .mobile-menu-item:nth-child(1) { animation-delay: 0.05s; } .mobile-menu.active .mobile-menu-item:nth-child(2) { animation-delay: 0.1s; } .mobile-menu.active .mobile-menu-item:nth-child(3) { animation-delay: 0.15s; } .mobile-menu.active .mobile-menu-item:nth-child(4) { animation-delay: 0.2s; } .mobile-menu.active .mobile-menu-item:nth-child(5) { animation-delay: 0.25s; } .mobile-menu.active .mobile-menu-item:nth-child(6) { animation-delay: 0.3s; } .mobile-menu.active .mobile-menu-item:nth-child(7) { animation-delay: 0.35s; } .mobile-menu.active .mobile-menu-item:nth-child(8) { animation-delay: 0.4s; } .mobile-menu.active .mobile-menu-item:nth-child(9) { animation-delay: 0.45s; } .mobile-menu.active .mobile-menu-item:nth-child(10) { animation-delay: 0.5s; } @keyframes slideInRight { to { opacity: 1; transform: translateX(0); } } .mobile-menu-link { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.5rem; color: #d1d5db; text-decoration: none; font-size: 1rem; font-weight: 500; transition: all 0.3s ease; position: relative; border-right: 3px solid transparent; } .mobile-menu-link::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: linear-gradient(135deg, rgba(40, 171, 136, 0.1), rgba(1, 51, 102, 0.1)); opacity: 0; transition: opacity 0.3s ease; } .mobile-menu-link:hover, .mobile-menu-link:active { color: white; background: rgba(255, 255, 255, 0.05); border-right-color: #28ab88; } .mobile-menu-link:hover::before, .mobile-menu-link:active::before { opacity: 1; } .mobile-menu-link svg { width: 1.25rem; height: 1.25rem; stroke: #d1d5db; fill: none ; stroke-width: 2; flex-shrink: 0; transition: all 0.3s ease; color: #d1d5db; } .mobile-menu-link:hover svg, .mobile-menu-link:active svg { transform: scale(1.1); stroke: #28ab88 !important; color: #28ab88 !important; fill: #28ab88 !important; } .mobile-menu-link:hover svg *, .mobile-menu-link:active svg * { stroke: #28ab88; fill: none !important; } .mobile-menu-link span { flex: 1; }   .mobile-menu-actions { padding: 1rem 1.5rem; border-top: 1px solid rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.03); display: flex; flex-direction: column; gap: 0.625rem; opacity: 0; transform: translateY(20px); transition: opacity 0.4s ease 0.3s, transform 0.4s ease 0.3s; } .mobile-menu.active .mobile-menu-actions { opacity: 1; transform: translateY(0); } .mobile-menu-btn { width: 100%; justify-content: center; text-align: center; text-decoration: none !important; padding: 0.625rem 1.25rem; font-size: 0.875rem; font-weight: 500; min-height: auto; border-radius: 0.5rem; transition: all 0.3s ease; } .mobile-menu-btn:hover { text-decoration: none !important; transform: translateY(-1px); } .mobile-menu-btn:active { text-decoration: none !important; transform: translateY(0); }   body.menu-open { overflow: hidden; position: fixed; left: 0; right: 0; width: 100%; }   @media (min-width: 1025px) { .mobile-menu, .mobile-menu-overlay { display: none !important; } }   @media (max-width: 480px) { .mobile-menu { width: 80%; max-width: 100%; } .mobile-menu-link { padding: 0.875rem 1.25rem; font-size: 0.9375rem; } .mobile-menu-link svg { width: 1.125rem; height: 1.125rem; } .mobile-menu-actions { padding: 0.875rem 1.25rem; gap: 0.5rem; } .mobile-menu-btn { font-size: 0.8125rem; padding: 0.5625rem 1.125rem; } }   .hero { position: relative; padding: 3rem 0; overflow: hidden; width: 100%; margin: 0; box-sizing: border-box; } @media (min-width: 768px) { .hero { padding: 4rem 0; } } @media (min-width: 1024px) { .hero { padding: 5rem 0; } }   @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeInRight { from { opacity: 0; transform: translateX(-30px); } to { opacity: 1; transform: translateX(0); } } @keyframes fadeInLeft { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: translateX(0); } } @keyframes scaleIn { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } } .hero-bg-orb { position: absolute; width: 24rem; height: 24rem; border-radius: 50%; filter: blur(80px); opacity: 0.3; } .hero-bg-orb-1 { top: 0; right: 25%; background: #013366; } .hero-bg-orb-2 { bottom: 0; left: 25%; background: #28ab88; } .hero-grid { display: grid; grid-template-columns: 1fr; gap: 3rem; align-items: center; position: relative; } @media (min-width: 1024px) { .hero-grid { grid-template-columns: 1fr 1fr; } } .hero-content { display: flex; flex-direction: column; gap: 2rem; } .badge { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; border-radius: 9999px; border: 1px solid rgba(40, 171, 136, 0.3); background: rgba(40, 171, 136, 0.1); color: #7dd3b0; font-size: 0.875rem; width: fit-content; animation: fadeInUp 0.8s ease-out; } .badge .icon { color: #28ab88; } .hero-title { font-size: clamp(1.75rem, 4vw + 1rem, 2.75rem); font-weight: bold; line-height: 1.2; color: white; animation: fadeInUp 0.8s ease-out 0.2s both; } .gradient-text { background: linear-gradient(to left, #28ab88, #013366); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .hero-description { font-size: 1.25rem; line-height: 1.8; color: #d1d5db; animation: fadeInUp 0.8s ease-out 0.4s both; } .hero-buttons { display: flex; flex-direction: column; flex-wrap: wrap; gap: 1rem; animation: fadeInUp 0.8s ease-out 0.6s both; } @media (min-width: 640px) { .hero-buttons { flex-direction: row; } }   .hero-stats-inline { margin-top: 0.5rem; padding-top: 2rem; border-top: 1px solid rgba(255, 255, 255, 0.08); animation: fadeInUp 0.8s ease-out 0.8s both; } .stats-grid-inline { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1.5rem; } .stat-card-inline { display: flex; align-items: center; gap: 0.875rem; padding: 0; transition: all 0.3s ease; } .stat-card-inline:hover { transform: translateX(-4px); } .stat-icon-inline { width: 2.25rem; height: 2.25rem; display: flex; align-items: center; justify-content: center; border-radius: 0.5rem; flex-shrink: 0; transition: all 0.3s ease; } .stat-icon-inline.stat-icon-green { background: linear-gradient(135deg, #10b981, #059669); } .stat-icon-inline.stat-icon-blue { background: linear-gradient(135deg, #3b82f6, #06b6d4); } .stat-icon-inline.stat-icon-purple { background: linear-gradient(135deg, #28ab88, #013366); } .stat-icon-inline.stat-icon-orange { background: linear-gradient(135deg, #f97316, #dc2626); } .stat-card-inline:hover .stat-icon-inline { transform: scale(1.1); } .stat-icon-inline svg { width: 1.125rem; height: 1.125rem; stroke: white; stroke-width: 2.5; fill: none; } .stat-content-inline { flex: 1; display: flex; flex-direction: column; gap: 0.125rem; } .stat-value-inline { font-size: 1.5rem; font-weight: 600; color: white; line-height: 1.2; } .stat-label-inline { font-size: 0.75rem; color: #9ca3af; font-weight: 400; line-height: 1.3; } @media (max-width: 768px) { .hero-stats-inline { margin-top: 2rem; padding-top: 1.5rem; } .stats-grid-inline { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; } .stat-icon-inline { width: 2rem; height: 2rem; } .stat-icon-inline svg { width: 1rem; height: 1rem; } .stat-value-inline { font-size: 1.25rem; } .stat-label-inline { font-size: 0.6875rem; } } @media (min-width: 1024px) { .stats-grid-inline { grid-template-columns: repeat(4, 1fr); gap: 2rem; } } .hero-image { position: relative; animation: fadeInRight 1s ease-out 0.3s both; } .glow-card { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 1rem; padding: 1rem; backdrop-filter: blur(10px); animation: scaleIn 1s ease-out 0.5s both; } .glow-card img { width: 100%; border-radius: 0.75rem; display: block; } .floating-card { position: absolute; background: rgba(255, 255, 255, 0.09); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 0.625rem; padding: 0.875rem 1rem; backdrop-filter: blur(10px); animation: float3D 7s ease-in-out infinite; } .floating-card-1 { top: -1rem; right: -1rem; animation-delay: 0s; } .floating-card-2 { bottom: -1rem; left: -1rem; animation-delay: 2.5s; } .floating-card-label { font-size: 0.75rem; color: #d1d5db; line-height: 1.2; margin-bottom: 0.25rem; } .floating-card-value { font-size: 1.25rem; font-weight: 600; color: white; line-height: 1.2; }   @keyframes float3D { 0% { transform: translate(0px, 0px) scale(1); } 25% { transform: translate(4px, -4px) scale(1.02); } 50% { transform: translate(-6px, -12px) scale(1.04); } 75% { transform: translate(-8px, -8px) scale(1.02); } 100% { transform: translate(0px, 0px) scale(1); } }   .hero-stats { margin-top: 8rem; padding-top: 0; position: relative; z-index: 2; animation: fadeInUp 0.8s ease-out 1s both; } .hero-stats .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; max-width: 100%; } .hero-stats .stat-card { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 0.75rem; padding: 1rem 0.875rem; transition: all 0.3s ease; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); position: relative; } .hero-stats .stat-card:hover { transform: translateY(-3px); border-color: rgba(40, 171, 136, 0.3); box-shadow: 0 8px 20px rgba(40, 171, 136, 0.15); background: rgba(255, 255, 255, 0.05); } .hero-stats .stat-icon { width: 2.5rem; height: 2.5rem; display: flex; align-items: center; justify-content: center; border-radius: 0.625rem; margin-bottom: 0.75rem; transition: all 0.3s ease; } .hero-stats .stat-card:hover .stat-icon { transform: scale(1.05); } .hero-stats .stat-icon svg { width: 1.25rem; height: 1.25rem; stroke: white; stroke-width: 2; fill: none; } .hero-stats .stat-value { font-size: 1.75rem; font-weight: 600; color: white; margin-bottom: 0.25rem; line-height: 1.2; } .hero-stats .stat-label { margin-top: 0; font-size: 0.8125rem; color: #9ca3af; font-weight: 400; } @media (max-width: 768px) { .hero-stats { margin-top: 4rem; } .hero-stats .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; } .hero-stats .stat-card { padding: 0.875rem 0.75rem; } .hero-stats .stat-icon { width: 2.25rem; height: 2.25rem; margin-bottom: 0.625rem; } .hero-stats .stat-icon svg { width: 1.125rem; height: 1.125rem; } .hero-stats .stat-value { font-size: 1.5rem; } .hero-stats .stat-label { font-size: 0.75rem; } } @media (min-width: 1024px) { .hero-stats .stats-grid { grid-template-columns: repeat(4, 1fr); gap: 1.25rem; } }   .stats { padding: 5rem 0; color: #444; background-color: #0f0a2e; } .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem; }   .stat-card { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 1rem; padding: 1.5rem; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); } .stat-card:hover { transform: translateY(-8px) scale(1.02); border-color: rgba(255, 255, 255, 0.3); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4); } .stat-icon { width: 3rem; height: 3rem; display: flex; align-items: center; justify-content: center; border-radius: 0.75rem; margin-bottom: 1rem; } .stat-icon svg { width: 1.5rem; height: 1.5rem; stroke: white; stroke-width: 2; fill: none; } .stat-icon-green { background: linear-gradient(135deg, #10b981, #059669); } .stat-icon-blue { background: linear-gradient(135deg, #3b82f6, #06b6d4); } .stat-icon-purple { background: linear-gradient(135deg, #28ab88, #013366); } .stat-icon-orange { background: linear-gradient(135deg, #f97316, #dc2626); } .stat-value { font-size: 2.25rem; font-weight: bold; color: white; } .stat-label { margin-top: 0.5rem; font-size: 0.875rem; color: #9ca3af; }   .section-header { text-align: center; margin-bottom: 1.5rem; width: 100%; } @media (min-width: 768px) { .section-header { margin-bottom: 2rem; } } @media (min-width: 1024px) { .section-header { margin-bottom: 2.5rem; } } .section-header .badge { margin: 0 auto 1rem; } .section-title { font-weight: bold; color: white; margin-bottom: 0.75rem; font-size: 1.75rem; } .section-title span { display: block; } .section-description { font-size: 1rem; color: #9ca3af; }   .features { background: linear-gradient( 135deg, rgba(40, 171, 136, 0.03) 0%, transparent 50% ), linear-gradient(225deg, rgba(1, 51, 102, 0.04) 0%, transparent 50%), #0f0a2e; margin: 0 auto; border-radius: 0; padding: 2rem 0; opacity: 0; transform: translateY(50px); transition: opacity 0.8s ease-out, transform 0.8s ease-out; position: relative; overflow: hidden; width: 100%; box-sizing: border-box; } @media (min-width: 768px) { .features { padding: 2.5rem 0; } } @media (min-width: 1024px) { .features { padding: 3rem 0; } } .features::before { content: ""; position: absolute; top: 0; right: 0; width: 100%; height: 100%; background-image:   url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='20' cy='20' r='3' fill='%2328ab88' opacity='0.1'/%3E%3Ccircle cx='50' cy='30' r='2' fill='%2328ab88' opacity='0.08'/%3E%3Ccircle cx='80' cy='20' r='3' fill='%2328ab88' opacity='0.12'/%3E%3Ccircle cx='30' cy='60' r='2.5' fill='%2328ab88' opacity='0.09'/%3E%3Ccircle cx='70' cy='70' r='3' fill='%2328ab88' opacity='0.11'/%3E%3C/svg%3E"),   url("data:image/svg+xml,%3Csvg width='120' height='120' viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 20 L120 20 M0 40 L120 40 M0 60 L120 60 M0 80 L120 80' stroke='%23013366' stroke-width='1' opacity='0.06'/%3E%3Cpath d='M20 0 L20 120 M40 0 L40 120 M60 0 L60 120 M80 0 L80 120' stroke='%23013366' stroke-width='1' opacity='0.06'/%3E%3C/svg%3E"),   url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M40 5 L42 15 L52 15 L44 22 L47 32 L40 26 L33 32 L36 22 L28 15 L38 15 Z' fill='%2328ab88' opacity='0.08'/%3E%3Cpath d='M10 40 L12 50 L22 50 L14 57 L17 67 L10 61 L3 67 L6 57 L-2 50 L8 50 Z' fill='%23013366' opacity='0.07'/%3E%3Cpath d='M70 40 L72 50 L82 50 L74 57 L77 67 L70 61 L63 67 L66 57 L58 50 L68 50 Z' fill='%2328ab88' opacity='0.09'/%3E%3C/svg%3E"),   url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='30 5, 35 15, 30 25, 25 15' fill='%23013366' opacity='0.08'/%3E%3Cpolygon points='30 35, 35 45, 30 55, 25 45' fill='%2328ab88' opacity='0.07'/%3E%3Cpolygon points='5 30, 15 25, 25 30, 15 35' fill='%23013366' opacity='0.09'/%3E%3Cpolygon points='55 30, 45 25, 35 30, 45 35' fill='%2328ab88' opacity='0.08'/%3E%3C/svg%3E"); background-size: 100px 100px, 120px 120px, 80px 80px, 60px 60px; background-position: 0 0, 20px 20px, 40px 40px, 60px 60px; opacity: 0.6; pointer-events: none; z-index: 0; } .features::after { content: ""; position: absolute; top: -30%; right: -15%; width: 500px; height: 500px; background: radial-gradient( circle, rgba(40, 171, 136, 0.12) 0%, rgba(1, 51, 102, 0.08) 40%, transparent 70% ); border-radius: 50%; pointer-events: none; z-index: 0; animation: float 25s ease-in-out infinite; } .features .container { position: relative; z-index: 1; } .features.animate { opacity: 1; transform: translateY(0); } .features.animate .section-header { animation: fadeInUp 0.8s ease-out 0.2s both; } .features.animate .features-slider-container { animation: fadeInUp 0.8s ease-out 0.4s both; }   .features-slider-container { position: relative; width: 100%; padding: 1rem 0; z-index: 1; overflow: hidden; } @media (min-width: 768px) { .features-slider-container { padding: 1.5rem 0; } } @media (min-width: 1024px) { .features-slider-container { padding: 2rem 0; } } .features-swiper { width: 100%; padding-bottom: 2rem; overflow: hidden; } .features-swiper .swiper-wrapper { display: flex; width: 100%; height: auto; } @media (min-width: 640px) { .features-swiper .swiper-wrapper { width: auto; } } .feature-card { background: linear-gradient( 135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02) ); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 1rem; padding: 1.5rem; width: 100%; height: 280px; display: flex; flex-direction: column; position: relative; overflow: hidden; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); } .feature-card::before { content: ""; position: absolute; top: 0; right: 0; width: 100%; height: 100%; background: linear-gradient( 135deg, rgba(40, 171, 136, 0.1), rgba(1, 51, 102, 0.1) ); opacity: 0; transition: opacity 0.4s ease; pointer-events: none; } .feature-card:hover { border-color: rgba(40, 171, 136, 0.3); } .feature-number { position: absolute; top: 1rem; left: 1rem; font-size: 2.5rem; font-weight: 700; color: rgba(255, 255, 255, 0.1); line-height: 1; z-index: 0; pointer-events: none; } .feature-icon { position: relative; width: 3rem; height: 3rem; display: flex; align-items: center; justify-content: center; border-radius: 0.75rem; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); z-index: 3; margin-bottom: 1rem; margin-left: 4rem; flex-shrink: 0; align-self: flex-start; } .feature-content { flex: 1; display: flex; flex-direction: column; position: relative; z-index: 2; min-width: 0; } .feature-icon svg { width: 1.5rem; height: 1.5rem; stroke: white; stroke-width: 2; fill: none; } .feature-icon-blue { background: linear-gradient(135deg, #3b82f6, #06b6d4); } .feature-icon-purple { background: linear-gradient(135deg, #28ab88, #013366); } .feature-icon-pink { background: linear-gradient(135deg, #28ab88, #1a8570); } .feature-icon-green { background: linear-gradient(135deg, #10b981, #059669); } .feature-icon-orange { background: linear-gradient(135deg, #f97316, #f59e0b); } .feature-icon-indigo { background: linear-gradient(135deg, #013366, #28ab88); } .feature-title { font-size: 1.125rem; font-weight: 600; color: white; margin-top: 0; margin-bottom: 0.75rem; line-height: 1.4; position: relative; z-index: 1; } .feature-description { font-size: 0.875rem; line-height: 1.6; color: #d1d5db; position: relative; z-index: 1; margin-bottom: 0; }   .features-slider-navigation { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 1.5rem; position: relative; }   .features-slider-navigation .swiper-button-prev, .features-slider-navigation .swiper-button-next, .features-swiper .swiper-button-prev, .features-swiper .swiper-button-next { width: 3rem; height: 3rem; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 50%; backdrop-filter: blur(10px); transition: all 0.3s ease; position: relative; margin: 0; top: auto; left: auto; right: auto; bottom: auto; } .features-slider-navigation .swiper-button-prev:hover, .features-slider-navigation .swiper-button-next:hover, .features-swiper .swiper-button-prev:hover, .features-swiper .swiper-button-next:hover { background: rgba(40, 171, 136, 0.2); border-color: rgba(40, 171, 136, 0.4); transform: scale(1.1); } .features-slider-navigation .swiper-button-prev::after, .features-slider-navigation .swiper-button-next::after, .features-swiper .swiper-button-prev::after, .features-swiper .swiper-button-next::after { font-size: 1.25rem; color: white; font-weight: 700; }   .features-slider-navigation .swiper-pagination, .features-swiper .swiper-pagination { position: relative; bottom: auto; margin-top: 0; width: auto; } .features-slider-navigation .swiper-pagination-bullet, .features-swiper .swiper-pagination-bullet { width: 0.5rem; height: 0.5rem; background: rgba(255, 255, 255, 0.3); opacity: 1; transition: all 0.3s ease; } .features-slider-navigation .swiper-pagination-bullet-active, .features-swiper .swiper-pagination-bullet-active { background-color: var(--secondary-color); width: 1.5rem; border-radius: 0.25rem; } @media (max-width: 1200px) { .features-swiper .swiper-slide { width: 280px; } .feature-card { height: 280px; } } @media (max-width: 768px) { .features-slider-container { padding: 1rem 0; } .features-swiper .swiper-slide { width: 100% !important; max-width: 100% !important; flex-shrink: 0; } .feature-card { height: auto; min-height: 240px; padding: 1.25rem; } .feature-number { font-size: 2rem; top: 0.75rem; left: 1rem; } .feature-icon { width: 2.75rem; height: 2.75rem; margin-bottom: 0.75rem; margin-top: 0.25rem; margin-left: 3.5rem; } .feature-icon svg { width: 1.25rem; height: 1.25rem; } .feature-title { font-size: 1rem; margin-top: 0; margin-bottom: 0.5rem; } .feature-description { font-size: 0.8125rem; line-height: 1.6; } .features-slider-navigation { gap: 0.75rem; margin-top: 1.5rem; } .features-slider-navigation .swiper-button-prev, .features-slider-navigation .swiper-button-next, .features-swiper .swiper-button-prev, .features-swiper .swiper-button-next { width: 2.25rem; height: 2.25rem; } .features-slider-navigation .swiper-button-prev::after, .features-slider-navigation .swiper-button-next::after, .features-swiper .swiper-button-prev::after, .features-swiper .swiper-button-next::after { font-size: 1rem; } }   .showcase { padding: 5rem 0; } .showcase-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(500px, 1fr)); gap: 1.5rem; } .showcase-card { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 1rem; overflow: hidden; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); } .showcase-card:hover { border-color: rgba(255, 255, 255, 0.3); transform: translateY(-5px); box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3); } .showcase-title { font-size: 1.25rem; font-weight: bold; color: white; padding: 1.5rem 1.5rem 1rem; } .showcase-image { padding: 0 1.5rem 1.5rem; overflow: hidden; border-radius: 0.75rem; } .showcase-image img { width: 100%; border-radius: 0.75rem; transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); } .showcase-card:hover .showcase-image img { transform: scale(1.08); }   .testimonials { background: linear-gradient( 135deg, rgba(40, 171, 136, 0.03) 0%, transparent 50% ), linear-gradient(225deg, rgba(1, 51, 102, 0.04) 0%, transparent 50%), #0f0a2e; margin: 0 auto; border-radius: 0; padding: 3rem 0; opacity: 0; transform: translateY(50px); transition: opacity 0.8s ease-out, transform 0.8s ease-out; position: relative; overflow: hidden; width: 100%; box-sizing: border-box; } @media (min-width: 768px) { .testimonials { padding: 4rem 0; } } @media (min-width: 1024px) { .testimonials { padding: 5rem 0; } } .testimonials::before { content: ""; position: absolute; top: 0; right: 0; width: 100%; height: 100%; background-image:   url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='20' cy='20' r='3' fill='%2328ab88' opacity='0.1'/%3E%3Ccircle cx='50' cy='30' r='2' fill='%2328ab88' opacity='0.08'/%3E%3Ccircle cx='80' cy='20' r='3' fill='%2328ab88' opacity='0.12'/%3E%3Ccircle cx='30' cy='60' r='2.5' fill='%2328ab88' opacity='0.09'/%3E%3Ccircle cx='70' cy='70' r='3' fill='%2328ab88' opacity='0.11'/%3E%3C/svg%3E"),   url("data:image/svg+xml,%3Csvg width='120' height='120' viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 20 L120 20 M0 40 L120 40 M0 60 L120 60 M0 80 L120 80' stroke='%23013366' stroke-width='1' opacity='0.06'/%3E%3Cpath d='M20 0 L20 120 M40 0 L40 120 M60 0 L60 120 M80 0 L80 120' stroke='%23013366' stroke-width='1' opacity='0.06'/%3E%3C/svg%3E"),   url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M40 5 L42 15 L52 15 L44 22 L47 32 L40 26 L33 32 L36 22 L28 15 L38 15 Z' fill='%2328ab88' opacity='0.08'/%3E%3Cpath d='M10 40 L12 50 L22 50 L14 57 L17 67 L10 61 L3 67 L6 57 L-2 50 L8 50 Z' fill='%23013366' opacity='0.07'/%3E%3Cpath d='M70 40 L72 50 L82 50 L74 57 L77 67 L70 61 L63 67 L66 57 L58 50 L68 50 Z' fill='%2328ab88' opacity='0.09'/%3E%3C/svg%3E"),   url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='30 5, 35 15, 30 25, 25 15' fill='%23013366' opacity='0.08'/%3E%3Cpolygon points='30 35, 35 45, 30 55, 25 45' fill='%2328ab88' opacity='0.07'/%3E%3Cpolygon points='5 30, 15 25, 25 30, 15 35' fill='%23013366' opacity='0.09'/%3E%3Cpolygon points='55 30, 45 25, 35 30, 45 35' fill='%2328ab88' opacity='0.08'/%3E%3C/svg%3E"); background-size: 100px 100px, 120px 120px, 80px 80px, 60px 60px; background-position: 0 0, 20px 20px, 40px 40px, 60px 60px; opacity: 0.6; pointer-events: none; z-index: 0; } .testimonials::after { content: ""; position: absolute; top: -30%; right: -15%; width: 500px; height: 500px; background: radial-gradient( circle, rgba(40, 171, 136, 0.12) 0%, rgba(1, 51, 102, 0.08) 40%, transparent 70% ); border-radius: 50%; pointer-events: none; z-index: 0; animation: float 25s ease-in-out infinite; } .testimonials .container { position: relative; z-index: 1; margin-left: 1rem; margin-right: 1rem; } @media (min-width: 768px) { .testimonials .container { margin-left: 1.5rem; margin-right: 1.5rem; } } @media (min-width: 1024px) { .testimonials .container { margin-left: auto; margin-right: auto; } } .testimonials-layout { display: flex; flex-direction: column; align-items: stretch; gap: 1.5rem; position: relative; min-height: auto; } @media (min-width: 1024px) { .testimonials-layout { flex-direction: row; gap: 3rem; min-height: 700px; } } .testimonials-info { display: flex; flex-direction: column; gap: 0.75rem; width: 100%; justify-content: center; margin-top: 0; } @media (min-width: 1024px) { .testimonials-info { width: 67%; margin-top: -20px; } } .cta { background: linear-gradient( 135deg, rgba(40, 171, 136, 0.03) 0%, transparent 50% ), linear-gradient(225deg, rgba(1, 51, 102, 0.04) 0%, transparent 50%), #0f0a2e; margin: 0 auto; border-radius: 0; padding: 2rem 0; transition: opacity 0.8s ease-out, transform 0.8s ease-out; position: relative; overflow: hidden; width: 100%; box-sizing: border-box; } @media (min-width: 768px) { .cta { padding: 2.5rem 0; } } @media (min-width: 1024px) { .cta { padding: 3rem 0; } } .cta::before { content: ""; position: absolute; top: 0; right: 0; width: 100%; height: 100%; background-image:   url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='20' cy='20' r='3' fill='%2328ab88' opacity='0.1'/%3E%3Ccircle cx='50' cy='30' r='2' fill='%2328ab88' opacity='0.08'/%3E%3Ccircle cx='80' cy='20' r='3' fill='%2328ab88' opacity='0.12'/%3E%3Ccircle cx='30' cy='60' r='2.5' fill='%2328ab88' opacity='0.09'/%3E%3Ccircle cx='70' cy='70' r='3' fill='%2328ab88' opacity='0.11'/%3E%3C/svg%3E"),   url("data:image/svg+xml,%3Csvg width='120' height='120' viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 20 L120 20 M0 40 L120 40 M0 60 L120 60 M0 80 L120 80' stroke='%23013366' stroke-width='1' opacity='0.06'/%3E%3Cpath d='M20 0 L20 120 M40 0 L40 120 M60 0 L60 120 M80 0 L80 120' stroke='%23013366' stroke-width='1' opacity='0.06'/%3E%3C/svg%3E"),   url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M40 5 L42 15 L52 15 L44 22 L47 32 L40 26 L33 32 L36 22 L28 15 L38 15 Z' fill='%2328ab88' opacity='0.08'/%3E%3Cpath d='M10 40 L12 50 L22 50 L14 57 L17 67 L10 61 L3 67 L6 57 L-2 50 L8 50 Z' fill='%23013366' opacity='0.07'/%3E%3Cpath d='M70 40 L72 50 L82 50 L74 57 L77 67 L70 61 L63 67 L66 57 L58 50 L68 50 Z' fill='%2328ab88' opacity='0.09'/%3E%3C/svg%3E"),   url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='30 5, 35 15, 30 25, 25 15' fill='%23013366' opacity='0.08'/%3E%3Cpolygon points='30 35, 35 45, 30 55, 25 45' fill='%2328ab88' opacity='0.07'/%3E%3Cpolygon points='5 30, 15 25, 25 30, 15 35' fill='%23013366' opacity='0.09'/%3E%3Cpolygon points='55 30, 45 25, 35 30, 45 35' fill='%2328ab88' opacity='0.08'/%3E%3C/svg%3E"); background-size: 100px 100px, 120px 120px, 80px 80px, 60px 60px; background-position: 0 0, 20px 20px, 40px 40px, 60px 60px; opacity: 0.6; pointer-events: none; z-index: 0; } .testimonials-title span { display: block; line-height: normal; letter-spacing: 0; font-size: 1.75rem; font-weight: 700; color: white; font-family: vazirmatn; } @media (min-width: 768px) { .testimonials-title span { letter-spacing: 10px; font-size: 2.5rem; } } @media (min-width: 1024px) { .testimonials-title span { letter-spacing: 20px; font-size: 3rem; } } .testimonials-coments { display: flex; width: 100%; gap: 1.5rem; flex-wrap: wrap; align-items: center; } .testimonials-badge { display: inline-block; width: auto; min-width: 100px; align-items: center; text-align: center; gap: 0.5rem; padding: 0.35rem 0.9rem; border-radius: 999px; background: rgba(40, 171, 136, 0.12); color: #7dd3b0; font-size: 0.75rem; letter-spacing: 0.5px; } @media (min-width: 768px) { .testimonials-badge { width: 130px; font-size: 0.8125rem; } } .testimonials-title { font-size: 1.5rem; font-weight: 700; color: white; line-height: 1.3; margin-bottom: 0.5rem; } @media (min-width: 768px) { .testimonials-title { font-size: 2.5rem; } } .testimonials-subtitle { color: #c7d2fe; font-size: 0.9375rem; line-height: 1.6; margin-bottom: 0.75rem; } .testimonials-slider { position: absolute; right: -8rem; bottom: 2rem; width: 80%; z-index: 2; } .testimonials.animate { opacity: 1; transform: translateY(0); } .testimonials.animate .testimonials-info { animation: fadeInUp 0.8s ease-out 0.2s both; } .testimonials.animate .testimonials-media { animation: fadeInUp 0.8s ease-out 0.4s both; } .testimonials-swiper { width: 100%; padding-bottom: 2rem; overflow: hidden; transform: translateX(0); margin-top: 20px; position: relative;   } @media (min-width: 1024px) { .testimonials-swiper { transform: translateX(18px); } }   .testimonials-swiper::before, .testimonials-swiper::after { display: none; } .testimonials-swiper .swiper-wrapper { display: flex; align-items: stretch; } .testimonials-swiper .swiper-slide { height: auto; display: flex; width: auto !important;   }   @media (min-width: 768px) { .testimonials-swiper .swiper-slide .testimonial-card { filter: blur(4px); opacity: 0.55; transform: scale(0.94); transition: filter 0.45s ease, opacity 0.45s ease, transform 0.45s ease; } .testimonials-swiper .swiper-slide.swiper-slide-active .testimonial-card, .testimonials-swiper .swiper-slide.swiper-slide-duplicate-active .testimonial-card { filter: none; opacity: 1; transform: scale(1); } } @media (max-width: 767px) { .testimonials-swiper .swiper-slide { width: 100% !important; max-width: 100% !important; flex-shrink: 0; } .testimonials-swiper .swiper-slide .testimonial-card { filter: none; opacity: 1; transform: scale(1); } }   .testimonial-card { width: 100%; max-width: 470px; min-height: 270px;   background-color: #fff; flex-wrap: wrap; border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 0.875rem; padding: 1.5rem; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: hidden; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } @media (min-width: 640px) { .testimonial-card { width: 470px; padding: 2rem; } } .testimonial-card::before { content: ""; position: absolute; top: 0; right: 0; width: 100%; height: 100%; background: linear-gradient( 135deg, rgba(40, 171, 136, 0.1), rgba(1, 51, 102, 0.1) ); opacity: 0; transition: opacity 0.4s ease; pointer-events: none; } .testimonial-card:hover::before { opacity: 1; } .testimonial-quote { position: absolute; top: 1rem; left: 1rem; width: 2.5rem; height: 2.5rem; opacity: 0.4; color: rgba(40, 171, 136, 0.8); } @media (min-width: 640px) { .testimonial-quote { top: 1.5rem; left: 1.5rem; width: 3rem; height: 3rem; } } .testimonial-quote svg { width: 100%; height: 100%; stroke: currentColor; stroke-width: 2; fill: none; } .stars { display: flex; gap: 0.25rem; margin-bottom: 0.75rem; margin-top: 0.25rem; color: #fbbf24; font-size: 1.2rem; } .testimonial-text { line-height: 1.7; color: #333; margin-bottom: 0.75rem; font-size: 0.8125rem; position: relative; z-index: 1; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; line-clamp: 4; overflow: hidden; } @media (min-width: 640px) { .testimonial-text { line-height: 1.8; margin-bottom: 1rem; font-size: 0.875rem; -webkit-line-clamp: 3; line-clamp: 3; } } .testimonial-author { display: flex; align-items: center; gap: 1rem; padding-top: 1rem; border-top: 1px solid rgba(0, 0, 0, 0.06); position: relative; z-index: 1; } .author-avatar { width: 2.25rem; height: 2.25rem; border-radius: 50%; overflow: hidden; border: 2px solid rgba(40, 171, 136, 0.3); flex-shrink: 0; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); transition: all 0.3s ease; } @media (min-width: 640px) { .author-avatar { width: 2.5rem; height: 2.5rem; } } .author-avatar:hover { transform: scale(1.1); border-color: rgba(40, 171, 136, 0.6); } .author-avatar img { width: 100%; height: 100%; object-fit: cover; } .author-name { font-weight: 600; color: #0f172a;   font-size: 0.875rem; margin-bottom: 0.25rem; } @media (min-width: 640px) { .author-name { font-size: 0.9375rem; } } .author-role { font-size: 0.8125rem; color: #6b7280;   } @media (min-width: 640px) { .author-role { font-size: 0.875rem; } } .testimonials-controls { display: flex; align-items: center; justify-content: center; flex-direction: row-reverse; flex-wrap: nowrap; gap: 1rem; margin-top: 0.5rem; z-index: 2; } .swiper-button-prev.testimonials-nav, .swiper-button-next.testimonials-nav { position: static; margin: 0; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.15); color: white; transition: all 0.3s ease; } .swiper-button-prev.testimonials-nav::after, .swiper-button-next.testimonials-nav::after { font-size: 1.1rem; font-weight: 700; } .swiper-button-prev.testimonials-nav:hover, .swiper-button-next.testimonials-nav:hover { background: rgba(40, 171, 136, 0.25); border-color: rgba(40, 171, 136, 0.4); transform: translateY(-2px); } .testimonials-pagination { position: static; display: flex; align-items: center; justify-content: center; gap: 0.35rem; width: auto !important; } .testimonials-pagination .swiper-pagination-bullet { width: 0.5rem; height: 0.5rem; background: rgba(255, 255, 255, 0.3); opacity: 1; transition: all 0.3s ease; } .testimonials-pagination .swiper-pagination-bullet-active { background: var(--secondary-color); width: 1.5rem; border-radius: 999px; } .testimonials-media { position: relative; display: flex; width: 100%; align-items: center; justify-content: center; } @media (min-width: 1024px) { .testimonials-media { width: 30%; } } .testimonials-image { position: relative; border-radius: 24px; height: 100%; overflow: hidden; box-shadow: 0 25px 60px rgba(15, 10, 46, 0.45); } .testimonials-image::before { content: ""; position: absolute; inset: 0; background: linear-gradient( 180deg, rgba(15, 10, 46, 0) 20%, rgba(15, 10, 46, 0.65) 100% ); pointer-events: none; } .testimonials-image img { display: block; width: 100%; height: 100%; object-fit: cover; } .testimonials-media-overlay { position: absolute; inset: auto auto 1rem 50%; transform: translateX(-50%); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.15); padding: 0.5rem 1rem; border-radius: 999px; font-size: 0.75rem; color: #e0e7ff; box-shadow: 0 20px 40px rgba(15, 10, 46, 0.35); white-space: nowrap; } @media (min-width: 768px) { .testimonials-media-overlay { inset: auto auto 2rem 50%; padding: 0.75rem 1.5rem; font-size: 0.875rem; } } @media (max-width: 1024px) { .testimonials-media { order: -1; width: 100%; margin-bottom: 1.5rem; } .testimonials-image { height: 250px; width: 100%; } .testimonials-info { width: 100%; } } @media (max-width: 768px) { .testimonials { padding: 1rem 0; } .testimonials-image { height: 200px; border-radius: 16px; } .testimonials-layout { min-height: auto; gap: 1rem; } .testimonials-controls { display: flex; justify-content: center; align-items: center; margin-top: 0.75rem; flex-wrap: nowrap; flex-direction: row-reverse; gap: 1rem; } .testimonials-swiper { margin-top: 0.75rem; width: 100%; padding-bottom: 1.5rem; } .testimonial-card { min-height: auto; margin: 0 auto; } .testimonials-pagination { width: auto !important; justify-content: center; } }   .faq { width: 100%; margin: 0; background-color: #ffffff; padding: 2rem 0; border-radius: 0; margin-top: 0; margin-bottom: 0; position: relative; opacity: 0; transform: translateY(50px); transition: opacity 0.8s ease-out, transform 0.8s ease-out; } @media (min-width: 768px) { .faq { padding: 5rem 0; margin-top: 0; margin-bottom: 0; } } .faq.animate { opacity: 1; transform: translateY(0); } .faq .section-header { opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease-out 0.2s, transform 0.8s ease-out 0.2s; } .faq.animate .section-header { opacity: 1; transform: translateY(0); } .faq .faq-list { opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease-out 0.4s, transform 0.8s ease-out 0.4s; } .faq.animate .faq-list { opacity: 1; transform: translateY(0); } .faq .faq-item { opacity: 1; transform: translateY(30px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; } .faq.animate .faq-item:nth-child(1) { opacity: 1; transform: translateY(0); transition-delay: 0.5s; } .faq.animate .faq-item:nth-child(2) { opacity: 1; transform: translateY(0); transition-delay: 0.7s; } .faq.animate .faq-item:nth-child(3) { opacity: 1; transform: translateY(0); transition-delay: 0.9s; } .faq.animate .faq-item:nth-child(4) { opacity: 1; transform: translateY(0); transition-delay: 1.1s; } .faq .faq-overlay { position: absolute; top: 50%; right: 0; width: auto; height: auto; z-index: 0; transform: translateY(-50%); opacity: 0; transition: opacity 0.8s ease-out 0.6s; display: none; } .faq .faq-overlay img { width: 100%; height: auto; max-width: 200px; object-fit: contain; } @media (min-width: 768px) { .faq .faq-overlay { display: block; } .faq .faq-overlay img { max-width: 180px; } } @media (min-width: 1024px) { .faq .faq-overlay { display: block; } .faq .faq-overlay img { max-width: 250px; } } @media (min-width: 1280px) { .faq .faq-overlay img { max-width: 300px; } } @media (min-width: 1500px) { .faq .faq-overlay img { max-width: auto; } } .faq.animate .faq-overlay { opacity: 1; } .faq .container { max-width: 100%; margin-bottom: 2rem; padding: 0 1rem; position: relative; z-index: 1; } @media (min-width: 640px) { .faq .container { max-width: 90%; } } @media (min-width: 1024px) { .faq .container { max-width: 50%; } } .faq .section-header { margin-bottom: 1.5rem; } @media (min-width: 768px) { .faq .section-header { margin-bottom: 3rem; } } .faq .section-title { color: var(--primary-color); font-size: 1.5rem; font-weight: 700; margin-bottom: 0.75rem; } @media (min-width: 768px) { .faq .section-title { font-size: 2rem; } } .faq .section-description { color: #666; font-size: 1rem; } .blog .section-title { color: var(--primary-color); font-size: 2rem; font-weight: 700; margin-bottom: 0.75rem; } .blog .section-description { color: #666; font-size: 1rem; }   .blog { background: #0b0a22; padding: 3rem 0; width: 100%; margin: 0 auto; box-sizing: border-box; } @media (min-width: 768px) { .blog { padding: 4rem 0; } } @media (min-width: 1024px) { .blog { padding: 5rem 0; } } .blog .section-header { text-align: center; margin-bottom: 2rem; } @media (min-width: 768px) { .blog .section-header { margin-bottom: 2.5rem; } } @media (min-width: 1024px) { .blog .section-header { margin-bottom: 3rem; } } .blog-grid { display: grid; grid-template-columns: 1fr; gap: 24px; margin-top: 24px; } @media (min-width: 640px) { .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1024px) { .blog-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .blog-card { background: #151236; border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 16px; padding: 16px; color: #e8e8f5; box-shadow: 0 10px 30px rgba(5, 3, 30, 0.25); transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; } .blog-card:hover { transform: translateY(-6px); border-color: rgba(99, 102, 241, 0.35); box-shadow: 0 18px 40px rgba(17, 12, 64, 0.45); } .blog-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } .blog-badge { background: linear-gradient(135deg, #22c55e, #10b981); color: #fff; font-size: 12px; padding: 6px 10px; border-radius: 999px; } .blog-doc-icon { font-size: 16px; opacity: 0.7; } .blog-card-media { position: relative; overflow: hidden; border-radius: 12px; margin-bottom: 14px; background: #0e0b2a; } .blog-card-media img { display: block; width: 100%; height: 180px; object-fit: cover; filter: saturate(1.1); } .blog-card-title { font-size: 1rem; line-height: 1.8rem; font-weight: 700; margin: 6px 0 8px 0; color: #f3f4ff; } .blog-card-excerpt { color: #b7b9d6; font-size: 0.92rem; line-height: 1.7rem; margin-bottom: 12px; } .blog-actions { text-align: center; margin-top: 28px; } .blog-all-link { border-color: rgba(255, 255, 255, 0.18); color: #e5e7eb; } .blog-all-link:hover { color: #ffffff; border-color: rgba(255, 255, 255, 0.35); }       .blog-v2 { background: #ffffff; } .blog-v2 .section-header { text-align: center; margin-bottom: 2rem; } @media (min-width: 768px) { .blog-v2 .section-header { margin-bottom: 2.5rem; } } @media (min-width: 1024px) { .blog-v2 .section-header { margin-bottom: 3rem; } } .blog-v2 .blog-badge-line { display: inline-flex; align-items: center; gap: 8px; color: #ef4444; font-weight: 800; letter-spacing: 0.5px; margin-bottom: 10px; } .blog-v2 .blog-badge-line .dot { width: 8px; height: 8px; background: #ef4444; border-radius: 999px; display: inline-block; } .blog-v2 .badge-text { color: #ef4444; } .blog-v2 .blog-title-large { color: var(--primary-color); font-size: 2rem; font-weight: 700; margin-bottom: 0.75rem; } .blog-v2 .blog-card { background: transparent; border: 0; box-shadow: none; padding: 0; color: #111827; } .blog-v2 .img-aspect { position: relative; border-radius: 22px; overflow: hidden; } .blog-v2 .img-aspect img { width: 100%; height: 350px; object-fit: cover; display: block; border-radius: 22px; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08); } .blog-v2 .blog-meta { display: flex; align-items: center; gap: 12px; color: #6b7280; margin-top: 14px; font-size: 0.9rem; } .blog-v2 .meta-item { display: inline-flex; align-items: center; gap: 6px; } .blog-v2 .meta-item .meta-icon-primary { color: var(--primary-color); } .blog-v2 .meta-sep { color: #cbd5e1; margin: 0 4px; } .blog-v2 .blog-card-title { color: #0b1437; font-weight: 800; font-size: 1.18rem; line-height: 1.9rem; margin: 10px 0 4px 0; } .blog-v2 .blog-card-title::after { content: ""; display: block; width: 38px; height: 3px; margin-top: 6px; border-radius: 999px; background: linear-gradient( 135deg, var(--primary-color), var(--secondary-color) ); opacity: 0.15;   } .blog-v2 .blog-card p { color: #64748b; font-size: 0.94rem; line-height: 1.75rem; margin: 2px 0 10px 0; } .blog-v2 .blog-card-action { color: var(--primary-color);   font-weight: 700; display: inline-flex; align-items: center; gap: 6px; text-decoration: none; padding: 0;   border-radius: 0; border: none; outline: none; box-shadow: none; margin-top: 4px; transition: color 0.25s ease; position: relative; } .blog-v2 .blog-card-action::before { content: ""; position: absolute; left: -22px;   top: 50%; transform: translateY(-50%); width: 16px; height: 16px; display: inline-block; background-repeat: no-repeat; background-position: center; background-size: 16px 16px;   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 17L7 7M7 7v8M7 7h8'/%3E%3C/svg%3E"); transition: transform 0.25s ease; } .blog-v2 .blog-actions .blog-all-link { background: linear-gradient( 135deg, var(--primary-color), var(--secondary-color) ); color: #fff; text-decoration: none; border: none; padding: 12px 20px; font-size: 0.9rem; border-radius: 10px; margin-top: 12px; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08); transition: background 0.25s ease, box-shadow 0.25s ease, transform 0.2s ease; } .blog-v2 .blog-all-link:hover { text-decoration: none; transform: translateY(-1px); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12); } .blog-v2 .blog-card-action:hover { color: var(--secondary-color);   } .blog-v2 .blog-card-action:hover::before { color: var(--secondary-color);   transform: translateY(-50%) rotate(-45deg);   } .blog-v2 .blog-card-action:active { transform: none; } @media (max-width: 1024px) { .blog-v2 .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .blog-v2 .img-aspect img { height: 220px; } } @media (max-width: 640px) { .blog-v2 .blog-grid { grid-template-columns: 1fr; } .blog-v2 .img-aspect img { height: 200px; } } .faq-list { max-width: 100%; margin: 0 auto; display: flex; flex-direction: column; gap: 1rem; } .faq-item { background: #ffffff; border: 1px solid #e8e8e8; border-radius: 0.75rem; padding: 1rem; transition: all 0.3s ease; cursor: pointer; } @media (min-width: 768px) { .faq-item { padding: 1.5rem; } } .faq-item:hover { border-color: rgba(40, 171, 136, 0.3); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); } .faq-item.active { border-color: var(--secondary-color); background: #fafafa; box-shadow: 0 4px 12px rgba(40, 171, 136, 0.1); } .faq-question { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .faq-question h3 { font-size: 0.9375rem; font-weight: 600; color: var(--primary-color); margin: 0; flex: 1; text-align: right; line-height: 1.5; } @media (min-width: 768px) { .faq-question h3 { font-size: 1.125rem; } } .faq-icon { color: var(--secondary-color); font-size: 1.5rem; font-weight: 300; flex-shrink: 0; width: 1.75rem; height: 1.75rem; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(40, 171, 136, 0.1); transition: all 0.3s ease; } @media (min-width: 768px) { .faq-icon { font-size: 1.75rem; width: 2rem; height: 2rem; } } .faq-item.active .faq-icon { background: linear-gradient( 135deg, var(--secondary-color), var(--primary-color) ); color: white; transform: rotate(0deg); } .faq-answer { color: #666; line-height: 1.7; font-size: 0.875rem; margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid #f0f0f0; display: none; } @media (min-width: 768px) { .faq-answer { line-height: 1.8; font-size: 0.9375rem; margin-top: 1rem; padding-top: 1rem; } } .faq-item.active .faq-answer { display: block; animation: fadeInUp 0.3s ease-out; }   .cta-card { position: relative; padding: 1.5rem 1rem; text-align: center; overflow: hidden; } @media (min-width: 768px) { .cta-card { padding: 2rem 1.5rem; } } @media (min-width: 1024px) { .cta-card { padding: 2.5rem 2rem; } } .cta-bg-orb { display: none; } .cta-bg-orb-1 { top: 0; right: 0; background: #013366; } .cta-bg-orb-2 { bottom: 0; left: 0; background: #28ab88; } .cta-content { position: relative; } .cta-title { font-size: 2.25rem; font-weight: bold; color: white; margin-bottom: 0.5rem; } .cta-description { font-size: 1.125rem; color: #d1d5db; max-width: 42rem; margin: 0 auto 0.75rem; line-height: 1.6; } .cta-description + .cta-description { margin-top: 0.5rem; margin-bottom: 1rem; } .cta-buttons { display: flex; flex-direction: column; flex-wrap: wrap; justify-content: center; gap: 0.75rem; margin: 1rem 0 0.75rem; } @media (min-width: 640px) { .cta-buttons { flex-direction: row; } } .cta-features { display: flex; flex-direction: column; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.75rem; font-size: 0.875rem; color: #9ca3af; margin-top: 0.5rem; } @media (min-width: 640px) { .cta-features { flex-direction: row; } } .cta-feature { display: flex; align-items: center; gap: 0.5rem; } .cta-feature .icon { color: #10b981; }   .cta-badges { display: flex; flex-direction: column; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.5rem; margin: 0.75rem 0 0.5rem; } @media (min-width: 640px) { .cta-badges { flex-direction: row; } } .badge { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.45rem 0.8rem; border-radius: 999px; background: rgba(255, 255, 255, 0.05); color: #e5e7eb; border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 8px 18px rgba(0, 0, 0, 0.18); transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease; backdrop-filter: saturate(120%) blur(6px); } .badge:hover { transform: translateY(-2px); background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.14); } .badge .icon { width: 18px; height: 18px; color: #10b981; } .badge-primary { background: linear-gradient( 135deg, rgba(16, 185, 129, 0.18), rgba(59, 130, 246, 0.18) ); border-color: rgba(16, 185, 129, 0.28); } .cta-grid { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.75rem; justify-content: center; align-items: center; } .cta-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem; border-radius: 12px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.06); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 10px 22px rgba(2, 6, 23, 0.3); transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease; flex: 0 1 auto; } .cta-item:hover { transform: translateY(-3px); border-color: rgba(255, 255, 255, 0.14); background: rgba(255, 255, 255, 0.05); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset, 0 14px 30px rgba(2, 6, 23, 0.4); } .cta-icon { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient( 120% 120% at 30% 20%, rgba(16, 185, 129, 0.35), rgba(59, 130, 246, 0.15) 60%, rgba(255, 255, 255, 0.06) 100% ); border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: inset 0 0 24px rgba(16, 185, 129, 0.22), 0 8px 20px rgba(0, 0, 0, 0.35); flex-shrink: 0; } .cta-icon svg { width: 16px; height: 16px; color: #a7f3d0; } .cta-item-text { color: #e5e7eb; font-size: 0.875rem; line-height: 1.5; white-space: nowrap; }   .btn.btn-gradient.btn-lg { box-shadow: 0 10px 24px rgba(16, 185, 129, 0.25), 0 2px 0 rgba(255, 255, 255, 0.1) inset; transition: transform 0.2s ease, box-shadow 0.2s ease; } .btn.btn-gradient.btn-lg:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(16, 185, 129, 0.35), 0 2px 0 rgba(255, 255, 255, 0.14) inset; } .btn.btn-outline.btn-lg { transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; box-shadow: 0 10px 24px rgba(2, 6, 23, 0.35); } .btn.btn-outline.btn-lg:hover { transform: translateY(-2px); border-color: #34d399; box-shadow: 0 14px 30px rgba(2, 6, 23, 0.45); }       .footer { position: relative; margin-top: 3rem; padding-top: 0; background: linear-gradient(135deg, rgba(40, 171, 136, 0.03) 0%, transparent 50%), linear-gradient(225deg, rgba(1, 51, 102, 0.04) 0%, transparent 50%), #0f0a2e; border-top: 1px solid rgba(41, 18, 81, 0.08); overflow: hidden; color: #fdfdff; } .footer::before { content: ""; position: absolute; top: 0; right: 0; width: 100%; height: 100%; background-image:   url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='20' cy='20' r='3' fill='%2328ab88' opacity='0.1'/%3E%3Ccircle cx='50' cy='30' r='2' fill='%2328ab88' opacity='0.08'/%3E%3Ccircle cx='80' cy='20' r='3' fill='%2328ab88' opacity='0.12'/%3E%3Ccircle cx='30' cy='60' r='2.5' fill='%2328ab88' opacity='0.09'/%3E%3Ccircle cx='70' cy='70' r='3' fill='%2328ab88' opacity='0.11'/%3E%3C/svg%3E), /* Pattern 2: خطوط مورب با رنگ آبی */ url(data:image/svg+xml,%3Csvg width='120' height='120' viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 20 L120 20 M0 40 L120 40 M0 60 L120 60 M0 80 L120 80' stroke='%23013366' stroke-width='1' opacity='0.06'/%3E%3Cpath d='M20 0 L20 120 M40 0 L40 120 M60 0 L60 120 M80 0 L80 120' stroke='%23013366' stroke-width='1' opacity='0.06'/%3E%3C/svg%3E), /* Pattern 3: ستاره‌های کوچک */ url(data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M40 5 L42 15 L52 15 L44 22 L47 32 L40 26 L33 32 L36 22 L28 15 L38 15 Z' fill='%2328ab88' opacity='0.08'/%3E%3Cpath d='M10 40 L12 50 L22 50 L14 57 L17 67 L10 61 L3 67 L6 57 L-2 50 L8 50 Z' fill='%23013366' opacity='0.07'/%3E%3Cpath d='M70 40 L72 50 L82 50 L74 57 L77 67 L70 61 L63 67 L66 57 L58 50 L68 50 Z' fill='%2328ab88' opacity='0.09'/%3E%3C/svg%3E), /* Pattern 4: الماس‌های کوچک */ url(data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='30 5, 35 15, 30 25, 25 15' fill='%23013366' opacity='0.08'/%3E%3Cpolygon points='30 35, 35 45, 30 55, 25 45' fill='%2328ab88' opacity='0.07'/%3E%3Cpolygon points='5 30, 15 25, 25 30, 15 35' fill='%23013366' opacity='0.09'/%3E%3Cpolygon points='55 30, 45 25, 35 30, 45 35' fill='%2328ab88' opacity='0.08'/%3E%3C/svg%3E"); background-size: 100px 100px, 120px 120px, 80px 80px, 60px 60px; background-position: 0 0, 20px 20px, 40px 40px, 60px 60px; opacity: 0.6; pointer-events: none; z-index: 0; } .footer-ribbon { position: relative; width: 72%; margin: 30px auto 2rem; z-index: 1; } .footer-ribbon-shape { width: 100%; display: block; filter: drop-shadow(0 6px 20px rgba(41, 18, 81, 0.12)); } .footer-ribbon-logo { position: absolute; top: 60%; left: 50%; transform: translate(-50%, -50%); width: 75px; height: 75px; border-radius: 50%; display: flex; align-items: center; justify-content: center; padding: 12px; } .footer-ribbon-logo img { width: 100%; height: 100%; object-fit: contain; } .footer-content { display: grid; grid-template-columns: minmax(420px, 1.2fr) minmax(320px, 1fr); gap: 2.5rem; padding: 0 0 2.5rem; border-bottom: 1px solid rgba(255, 255, 255, 0.08); position: relative; z-index: 1; } .footer-links-area { display: flex; flex-direction: column; justify-content: space-between; } .footer-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 2rem; } .footer-column h4 { font-size: 1rem; font-weight: 800; background: linear-gradient(135deg, #ffffff, #d1d5f8); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: 0.85rem; letter-spacing: 0.5px; text-transform: uppercase; position: relative; padding-bottom: 0.5rem; } .footer-column h4::after { content: ""; position: absolute; right: 0; bottom: 0; width: 35px; height: 2.5px; border-radius: 999px; background: linear-gradient(90deg, #22c55e, #0ea5e9); opacity: 0.85; } .footer-links-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; font-size: 0.9rem; color: #d1d5e8; } .footer-links-list li { position: relative; padding-right: 0; line-height: 1.9; font-weight: 400; opacity: 0.9; } .footer-links-list li::before { content: none; } .footer-links-list a { color: inherit; text-decoration: none; transition: color 0.2s ease, transform 0.15s ease; display: inline-block; } .footer-links-list a:hover { color: #059669; transform: translateX(-2px); } .footer-meta { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; margin-top: 0.5rem; } .footer-social { display: flex; gap: 0.5rem; margin-bottom: 0.5rem; } .footer-social a { width: 44px; height: 44px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.04); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); display: flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, 0.7); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 4px 16px rgba(0, 0, 0, 0.15); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: hidden; } .footer-social a::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05)); opacity: 0; transition: opacity 0.3s ease; border-radius: 10px; } .footer-social a::after { content: ""; position: absolute; inset: 0; border-radius: 10px; padding: 1px; background: linear-gradient(135deg, rgba(34, 197, 94, 0.3), rgba(5, 150, 105, 0.2)); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity 0.3s ease; } .footer-social svg { width: 18px; height: 18px; stroke-width: 1.8; position: relative; z-index: 1; transition: all 0.3s ease; } .footer-social a:hover { transform: translateY(-2px); border-color: rgba(255, 255, 255, 0.15); background: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.95); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 8px 24px rgba(5, 150, 105, 0.25); } .footer-social a:hover::before { opacity: 1; } .footer-social a:hover::after { opacity: 1; } .footer-social a:hover svg { stroke-width: 2; transform: scale(1.05); } .footer-certificates { display: flex; flex-wrap: wrap; gap: 3rem; align-items: center; margin-top: 0.25rem; } .certificate-label { display: block; font-weight: 600; color: #e5e7eb; } .certificate-desc { font-size: 0.78rem; color: #9ca3af; } .certificate-card img { height: 100px; width: auto; display: block; } .footer-about { text-align: right; } .footer-about h3 { font-size: 1.5rem; font-weight: 800; background: linear-gradient(135deg, #ffffff, #e0e7ff); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: 0.9rem; letter-spacing: -0.3px; position: relative; } .footer-about h3::after { content: ""; position: absolute; right: 0; bottom: -0.4rem; width: 50px; height: 3px; border-radius: 999px; background: linear-gradient(90deg, #22c55e, #0ea5e9); opacity: 0.9; } .footer-about p { font-size: 0.92rem; line-height: 1.9; color: #ededff; margin-bottom: 1rem; } .footer-contact-block { margin-bottom: 1rem; } .footer-contact-block p { margin: 0; color: #f1f2ff; } .footer-contact-block h4 { font-size: 1.05rem; font-weight: 800; background: linear-gradient(135deg, #ffffff, #e0e7ff); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: 0.5rem; letter-spacing: -0.2px; position: relative; padding-bottom: 0.4rem; } .footer-contact-block h4::after { content: ""; position: absolute; right: 0; bottom: 0; width: 40px; height: 2.5px; border-radius: 999px; background: linear-gradient(90deg, #22c55e, #0ea5e9); opacity: 0.85; } .footer-contact-block a { display: block; color: #ffffff; text-decoration: none; margin-bottom: 0.2rem; font-weight: 600; } .footer-contact-block a:hover { color: #059669; } .footer-note { font-size: 0.85rem; color: #f0efff; } .footer-bottom { padding: 1rem 0 2rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; color: #f5f5ff; font-size: 0.85rem; position: relative; z-index: 1; } .footer-backtotop { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.5rem 1.25rem; border-radius: 999px; background: linear-gradient(135deg, #1a8570, #059669); border: 1px solid rgba(255, 255, 255, 0.2); color: #fff; text-decoration: none; font-weight: 600; transition: transform 0.2s ease, box-shadow 0.2s ease; } .footer-backtotop:hover { transform: translateY(-3px); } .footer-backtotop svg { width: 18px; height: 18px; stroke-width: 2.1; }   .back-to-top { position: fixed; bottom: 2rem; right: 2rem; width: 3rem; height: 3rem; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: linear-gradient(135deg, #1a8570, #059669); border: 1px solid rgba(255, 255, 255, 0.2); color: #fff; text-decoration: none; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); transition: transform 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease; z-index: 1000; opacity: 0; visibility: hidden; } .back-to-top.show { opacity: 1; visibility: visible; } .back-to-top:hover { transform: translateY(-5px); box-shadow: 0 6px 20px rgba(26, 133, 112, 0.4); } .back-to-top svg { width: 20px; height: 20px; stroke-width: 2.5; } @media (max-width: 768px) { .back-to-top { bottom: 1.5rem; right: 1.5rem; width: 2.75rem; height: 2.75rem; } .back-to-top svg { width: 18px; height: 18px; } }   @media (max-width: 1024px) { .nav-list { gap: 0.25rem; } .nav-link { padding: 0.4rem 0.75rem; font-size: 0.8125rem; } .footer-content { grid-template-columns: 1fr; display: flex; flex-direction: column; } .footer-about { order: 2; } .footer-links-area { order: 1; display: flex; flex-direction: column; } .footer-columns { order: 1; } .footer-meta { order: 2; flex-direction: column; align-items: flex-start; margin-top: 2rem; } .nav { display: none; } .header-actions #askMeBtn { display: none !important; } .header-actions #themeToggle { display: none !important; } .header-actions .btn-ghost:not(.btn-menu), .header-actions .btn-gradient:not(.btn-menu), .header-actions .btn-gradient-red:not(.btn-menu) { display: none; } .btn-menu { display: block; font-size: 1.25rem; padding: 0.375rem 0.625rem; } body.menu-open .header-actions .btn:not(.btn-menu) { opacity: 0; pointer-events: none; } } @media (max-width: 768px) { .header-content { height: 3.5rem; padding: 0.375rem 0; } .header.is-sticky .header-content { height: 3.25rem; } .logo-icon { width: 2.5rem; height: 2.5rem; } .nav { display: none; } .header-actions #askMeBtn { display: none !important; } .header-actions #themeToggle { display: none !important; } .header-actions .btn-ghost:not(.btn-menu), .header-actions .btn-gradient:not(.btn-menu), .header-actions .btn-gradient-red:not(.btn-menu) { display: none; } .btn-menu { display: block; font-size: 1.25rem; padding: 0.375rem 0.625rem; }   body.menu-open .header-actions .btn:not(.btn-menu) { opacity: 0; pointer-events: none; } .header-actions { gap: 0.5rem; } .header-actions .btn { padding: 0.4rem 0.75rem; font-size: 0.75rem; min-height: 1.875rem; } .section-title { font-size: 1.5rem; } .section-description { font-size: 0.875rem; } .cta-title { font-size: 1.75rem; } .showcase-grid { grid-template-columns: 1fr; } .footer-columns { grid-template-columns: repeat(2, minmax(150px, 1fr)); } .footer-bottom { flex-direction: column; align-items: flex-start; }   section { max-width: 100vw; overflow-x: hidden; } } @media (min-width: 769px) and (max-width: 1024px) { .header-content { height: 3.75rem; padding: 0.375rem 0; } .header.is-sticky .header-content { height: 3.5rem; } .mobile-menu { width: min(72vw, 420px); max-width: 420px; } .mobile-menu-link { font-size: 0.95rem; padding: 0.95rem 1.35rem; } .mobile-menu-btn { font-size: 0.9rem; padding: 0.65rem 1.2rem; } } @media (max-width: 576px) { .footer-columns { grid-template-columns: 1fr; gap: 2rem; } .footer-meta { align-items: center; } .footer-bottom { align-items: center; text-align: center; gap: 0.6rem; } .footer-backtotop { order: -1; } } @media (min-width: 1024px) { .hero-grid { grid-template-columns: 1fr 1fr; } .section-title { font-size: 3rem; } .cta-title { font-size: 3rem; } }   .animate-on-scroll { opacity: 0; transform: translateY(50px); transition: opacity 0.8s ease, transform 0.8s ease; } .animate-on-scroll.animated { opacity: 1; transform: translateY(0); } .animate-fade-in { opacity: 0; transition: opacity 1s ease; } .animate-fade-in.animated { opacity: 1; } .animate-slide-right { opacity: 0; transform: translateX(-50px); transition: opacity 0.8s ease, transform 0.8s ease; } .animate-slide-right.animated { opacity: 1; transform: translateX(0); } .animate-slide-left { opacity: 0; transform: translateX(50px); transition: opacity 0.8s ease, transform 0.8s ease; } .animate-slide-left.animated { opacity: 1; transform: translateX(0); } .animate-scale { opacity: 0; transform: scale(0.9); transition: opacity 0.8s ease, transform 0.8s ease; } .animate-scale.animated { opacity: 1; transform: scale(1); } .animate-delay-1 { transition-delay: 0.1s; } .animate-delay-2 { transition-delay: 0.2s; } .animate-delay-3 { transition-delay: 0.3s; } .animate-delay-4 { transition-delay: 0.4s; } .animate-delay-5 { transition-delay: 0.5s; } .animate-delay-6 { transition-delay: 0.6s; }   @media (max-width: 767px) { * { max-width: 100%; box-sizing: border-box; } section { width: 100%; max-width: 100vw; overflow-x: hidden; box-sizing: border-box; margin-left: 0; margin-right: 0; } img { max-width: 100%; height: auto; } .container { width: 100%; max-width: 100%; padding-left: 1rem; padding-right: 1rem; box-sizing: border-box; margin-left: auto; margin-right: auto; } .hero, .about, .features, .testimonials, .faq, .blog, .cta { width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; border-radius: 0 !important; padding-left: 0 !important; padding-right: 0 !important; padding-top: 2rem !important; padding-bottom: 2rem !important; }   .hero .container, .about .container, .features .container, .testimonials .container, .faq .container, .blog .container, .cta .container { padding-left: 0.75rem; padding-right: 0.75rem; } }   .ai-assistant-btn { position: fixed; bottom: 24px; left: 24px; width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); border: none; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15), 0 8px 30px rgba(1, 51, 102, 0.3); cursor: pointer; z-index: 9998; display: flex; align-items: center; justify-content: center; color: white; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); padding: 0; } .ai-assistant-btn:hover { transform: scale(1.1); box-shadow: 0 6px 25px rgba(0, 0, 0, 0.2), 0 10px 40px rgba(1, 51, 102, 0.4); } .ai-assistant-btn:active { transform: scale(0.95); } .ai-assistant-btn svg { width: 28px; height: 28px; }   .ai-assistant-modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 9999; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; } .ai-assistant-modal-overlay.active { opacity: 1; visibility: visible; pointer-events: auto; }   .ai-assistant-modal-backdrop { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: transparent; z-index: 9999; cursor: pointer; }   .ai-assistant-modal { position: fixed; bottom: 100px; left: 20px; width: 420px; max-width: calc(90vw - 40px); height: 600px; max-height: calc(100vh - 140px); background: white; border-radius: 16px; border: none; display: flex; flex-direction: column; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1), 0 8px 40px rgba(0, 0, 0, 0.15); transform: translateX(-100%); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); overflow: hidden; z-index: 10001; pointer-events: auto; } .ai-assistant-modal-overlay.active .ai-assistant-modal { transform: translateX(0); }   .ai-assistant-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); color: white; border-radius: 16px 16px 0 0; flex-shrink: 0; } .ai-assistant-modal-title { display: flex; align-items: center; gap: 12px; flex: 1; } .ai-assistant-icon-small { width: 36px; height: 36px; border-radius: 8px; object-fit: cover; background: rgba(255, 255, 255, 0.1); padding: 2px; } .ai-assistant-modal-title h2 { margin: 0; font-size: 1.125rem; font-weight: 600; color: white; } .ai-assistant-modal-actions { display: flex; align-items: center; gap: 8px; margin-right: -8px; } .ai-assistant-clear-btn { background: rgba(255, 255, 255, 0.15); border: none; border-radius: 8px; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: white; transition: all 0.2s ease; flex-shrink: 0; } .ai-assistant-clear-btn:hover { background: rgba(255, 255, 255, 0.25); transform: scale(1.05); } .ai-assistant-clear-btn svg { width: 18px; height: 18px; } .ai-assistant-modal-close { background: rgba(255, 255, 255, 0.15); border: none; border-radius: 8px; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: white; transition: all 0.2s ease; flex-shrink: 0; } .ai-assistant-modal-close:hover { background: rgba(255, 255, 255, 0.25); transform: rotate(90deg); } .ai-assistant-modal-close svg { width: 18px; height: 18px; }   .ai-assistant-modal-body { display: flex; flex-direction: column; flex: 1; overflow: hidden; min-height: 0; background: #ffffff; } .ai-assistant-chat-container { flex: 1; overflow: hidden; padding: 20px; display: flex; flex-direction: column; position: relative; min-height: 0; }   .ai-assistant-initial-section { display: flex; flex-direction: column; gap: 20px; flex: 1; justify-content: center; overflow-y: auto; scroll-behavior: smooth; } .ai-assistant-initial-section.hidden { display: none; }   .ai-assistant-messages { display: none; flex-direction: column; gap: 16px; min-height: 50px; padding-bottom: 8px; width: 100%; } .ai-assistant-messages.active { display: flex; flex: 1; overflow-y: auto; min-height: 0; scroll-behavior: smooth; }   .ai-assistant-messages.active::-webkit-scrollbar { width: 6px; } .ai-assistant-messages.active::-webkit-scrollbar-track { background: transparent; } .ai-assistant-messages.active::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 3px; } .ai-assistant-messages.active::-webkit-scrollbar-thumb:hover { background: #9ca3af; }   .ai-assistant-welcome { text-align: center; padding: 24px 20px; background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%); border-radius: 16px; border: 1px solid #e2e8f0; } .ai-assistant-avatar { width: 72px; height: 72px; margin: 0 auto 16px; border-radius: 50%; overflow: hidden; border: 4px solid white; box-shadow: 0 4px 12px rgba(1, 51, 102, 0.15); background: white; display: flex; align-items: center; justify-content: center; } .ai-assistant-avatar img { width: 100%; height: 100%; object-fit: cover; } .ai-assistant-welcome h3 { margin: 0 0 10px 0; font-size: 1.125rem; font-weight: 600; color: #1e293b; line-height: 1.4; } .ai-assistant-welcome p { margin: 0; color: #64748b; font-size: 0.875rem; line-height: 1.6; max-width: 100%; }   .ai-assistant-message { display: flex; gap: 10px; align-items: flex-start; animation: fadeInMessage 0.3s ease; word-wrap: break-word; } @keyframes fadeInMessage { from { opacity: 0; transform: translateY(8px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } } .ai-assistant-message.user { flex-direction: row-reverse; } .ai-assistant-message-avatar { width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; overflow: hidden; background: #f1f5f9; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 0.875rem; color: white; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } .ai-assistant-message.user .ai-assistant-message-avatar { background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); } .ai-assistant-message-avatar img { width: 100%; height: 100%; object-fit: cover; } .ai-assistant-message-bubble { max-width: 75%; padding: 12px 16px; border-radius: 18px; font-size: 0.9375rem; line-height: 1.5; word-wrap: break-word; white-space: pre-wrap; } .ai-assistant-message.user .ai-assistant-message-bubble { background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); color: white; border-bottom-right-radius: 4px; box-shadow: 0 2px 8px rgba(1, 51, 102, 0.2); } .ai-assistant-message.ai .ai-assistant-message-bubble { background: #f1f5f9; color: #1e293b; border-bottom-left-radius: 4px; border: 1px solid #e2e8f0; }   .ai-assistant-suggestions { padding-top: 0; border-top: none; } .ai-assistant-suggestion-title { font-size: 0.8125rem; font-weight: 600; color: #64748b; margin-bottom: 12px; text-align: right; letter-spacing: 0.01em; } .ai-assistant-suggestion-btn { display: block; width: 100%; padding: 12px 16px; margin-bottom: 10px; background: #ffffff; border: 1px solid #e2e8f0; border-radius: 12px; text-align: right; font-size: 0.875rem; color: #1e293b; cursor: pointer; transition: border-color 0.2s ease; } .ai-assistant-suggestion-btn:hover { border-color: var(--primary-color); }   .ai-assistant-input-container { padding: 20px; border-top: 1px solid #e2e8f0; background: #ffffff; flex-shrink: 0; } .ai-assistant-input-wrapper { display: flex; gap: 10px; align-items: flex-end; background: #f8fafc; border: 2px solid #e2e8f0; border-radius: 16px; padding: 10px 14px; transition: all 0.2s ease; } .ai-assistant-input-wrapper:focus-within { border-color: var(--primary-color); background: #ffffff; box-shadow: 0 0 0 3px rgba(1, 51, 102, 0.1); } .ai-assistant-input { flex: 1; border: none; outline: none; resize: none; font-size: 0.9375rem; font-family: inherit; color: #1e293b; max-height: 120px; overflow-y: auto; line-height: 1.5; background: transparent; } .ai-assistant-input::placeholder { color: #94a3b8; } .ai-assistant-input::-webkit-scrollbar { width: 4px; } .ai-assistant-input::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 2px; } .ai-assistant-send-btn { background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); border: none; border-radius: 10px; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: white; flex-shrink: 0; transition: all 0.2s ease; box-shadow: 0 2px 6px rgba(1, 51, 102, 0.2); } .ai-assistant-send-btn:hover:not(:disabled) { transform: scale(1.05); box-shadow: 0 4px 12px rgba(1, 51, 102, 0.3); } .ai-assistant-send-btn:active:not(:disabled) { transform: scale(0.95); } .ai-assistant-send-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; } .ai-assistant-send-btn svg { width: 18px; height: 18px; }   .ai-assistant-loading { display: flex; gap: 6px; padding: 12px 16px; align-items: center; } .ai-assistant-loading-dot { width: 8px; height: 8px; border-radius: 50%; background: #94a3b8; animation: bounceLoading 1.4s infinite ease-in-out both; } .ai-assistant-loading-dot:nth-child(1) { animation-delay: -0.32s; } .ai-assistant-loading-dot:nth-child(2) { animation-delay: -0.16s; } @keyframes bounceLoading { 0%, 80%, 100% { transform: scale(0.6); opacity: 0.5; } 40% { transform: scale(1); opacity: 1; } }   @media (max-width: 768px) { .ai-assistant-btn { width: 56px; height: 56px; bottom: 20px; left: 20px; } .ai-assistant-btn svg { width: 24px; height: 24px; } .ai-assistant-modal { width: calc(100% - 40px); max-width: calc(100% - 40px); bottom: 100px; left: 20px; height: calc(100vh - 140px); max-height: calc(100vh - 140px); } .ai-assistant-modal-header { padding: 16px 20px; } .ai-assistant-modal-title h2 { font-size: 1rem; } .ai-assistant-chat-container { padding: 16px; } .ai-assistant-welcome { padding: 20px 16px; } .ai-assistant-message-bubble { max-width: 85%; font-size: 0.875rem; padding: 10px 14px; } .ai-assistant-input-container { padding: 16px; } } @media (max-width: 480px) { .ai-assistant-modal { width: 100%; top: 0; right: 0; bottom: 0; height: 100vh; max-height: 100vh; border-radius: 0; } .ai-assistant-modal-header { border-radius: 0; } }
/* Source: css/home2_base_inline.css */
footer { padding-bottom: 20px; } .footer-summary { font-size: 0.83em; font-weight: 700; margin-block: 1.67em; } address { font-size: 14px; } .sub_address { font-size: 12px; } .sub_footer { display: flex; flex-direction: column; justify-content: center; align-items: center; margin-top: 40px; border-top: 1px solid #28ab89; padding-top: 20px; } .header_footer { display: flex; justify-content: center; align-items: center; width: 100%; } .header_section2_container { display: flex; justify-content: space-around; align-items: flex-start; margin-top: 40px; } .text_header_footer { border-bottom: 3px solid #28ab89; color: #fff; padding-bottom: 10px; display: block; font-size: 20px; font-weight: bold; } .social_container { display: flex; justify-content: space-between; margin-top: 20px; } .icon_social { width: 25px; height: 25px; } .footer_list_style { list-style: none; margin-top: 20px; } .footer_list_style li a { text-decoration: none; color: #fff; font-size: 14px; } .min-2-220 { min-width: 220px; } .footer_link { font-size: 14px; } .logo_border { border: 2px solid #dedede; border-radius: 100%; padding: 20px; margin-bottom: 20px; width: 100px; height: 100px; object-fit: contain; } .badges_container { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 16px; } .badge_item { display: flex; align-items: center; } .badge_img { width: 75px; height: auto; display: block; border-radius: 8px; transition: transform 0.2s ease, box-shadow 0.2s ease; } .badge_img:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(40, 171, 136, 0.25); } .enamad_img { width: 75px; height: 75px; object-fit: contain; border-radius: 10px; background: rgba(255, 255, 255, 0.05); padding: 4px; } @media (max-width: 768px) { .header_section2_container { display: flex; justify-content: space-around; align-items: flex-start; margin-top: 40px; flex-direction: column; gap: 20px; } .container { flex-direction: column; } footer { padding-bottom: 100px; } .header_footer h5, .header_footer .footer-summary { padding: 10px; text-align: justify; } }
/* Source: css/homepage-swiper.min.css */
/*! Swiper 11.2.10 | Copyright 2014-2025 Vladimir Kharlampidi | MIT | https://swiperjs.com */ @font-face{font-family:swiper-icons;src:url(data:application/font-woff;charset=utf-8;base64,\ d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA);font-weight:400;font-style:normal}:root{--swiper-theme-color: #007aff}:host{position:relative;display:block;margin-left:auto;margin-right:auto;z-index:1}.swiper{margin-left:auto;margin-right:auto;position:relative;overflow:hidden;list-style:none;padding:0;z-index:1;display:block}.swiper-vertical>.swiper-wrapper{flex-direction:column}.swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:flex;transition-property:transform;transition-timing-function:var(--swiper-wrapper-transition-timing-function, initial);box-sizing:content-box}.swiper-android .swiper-slide,.swiper-ios .swiper-slide,.swiper-wrapper{transform:translateZ(0)}.swiper-horizontal{touch-action:pan-y}.swiper-vertical{touch-action:pan-x}.swiper-slide{flex-shrink:0;width:100%;height:100%;position:relative;transition-property:transform;display:block}.swiper-slide-invisible-blank{visibility:hidden}.swiper-autoheight,.swiper-autoheight .swiper-slide{height:auto}.swiper-autoheight .swiper-wrapper{align-items:flex-start;transition-property:transform,height}.swiper-backface-hidden .swiper-slide{transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-3d.swiper-css-mode .swiper-wrapper{perspective:1200px}.swiper-3d .swiper-wrapper{transform-style:preserve-3d}.swiper-3d{perspective:1200px}.swiper-3d .swiper-slide,.swiper-3d .swiper-cube-shadow{transform-style:preserve-3d}.swiper-css-mode>.swiper-wrapper{overflow:auto;scrollbar-width:none;-ms-overflow-style:none}.swiper-css-mode>.swiper-wrapper::-webkit-scrollbar{display:none}.swiper-css-mode>.swiper-wrapper>.swiper-slide{scroll-snap-align:start start}.swiper-css-mode.swiper-horizontal>.swiper-wrapper{scroll-snap-type:x mandatory}.swiper-css-mode.swiper-vertical>.swiper-wrapper{scroll-snap-type:y mandatory}.swiper-css-mode.swiper-free-mode>.swiper-wrapper{scroll-snap-type:none}.swiper-css-mode.swiper-free-mode>.swiper-wrapper>.swiper-slide{scroll-snap-align:none}.swiper-css-mode.swiper-centered>.swiper-wrapper:before{content:"";flex-shrink:0;order:9999}.swiper-css-mode.swiper-centered>.swiper-wrapper>.swiper-slide{scroll-snap-align:center center;scroll-snap-stop:always}.swiper-css-mode.swiper-centered.swiper-horizontal>.swiper-wrapper>.swiper-slide:first-child{margin-inline-start:var(--swiper-centered-offset-before)}.swiper-css-mode.swiper-centered.swiper-horizontal>.swiper-wrapper:before{height:100%;min-height:1px;width:var(--swiper-centered-offset-after)}.swiper-css-mode.swiper-centered.swiper-vertical>.swiper-wrapper>.swiper-slide:first-child{margin-block-start:var(--swiper-centered-offset-before)}.swiper-css-mode.swiper-centered.swiper-vertical>.swiper-wrapper:before{width:100%;min-width:1px;height:var(--swiper-centered-offset-after)}.swiper-3d .swiper-slide-shadow,.swiper-3d .swiper-slide-shadow-left,.swiper-3d .swiper-slide-shadow-right,.swiper-3d .swiper-slide-shadow-top,.swiper-3d .swiper-slide-shadow-bottom{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:10}.swiper-3d .swiper-slide-shadow{background:#00000026}.swiper-3d .swiper-slide-shadow-left{background-image:linear-gradient(to left,#00000080,#0000)}.swiper-3d .swiper-slide-shadow-right{background-image:linear-gradient(to right,#00000080,#0000)}.swiper-3d .swiper-slide-shadow-top{background-image:linear-gradient(to top,#00000080,#0000)}.swiper-3d .swiper-slide-shadow-bottom{background-image:linear-gradient(to bottom,#00000080,#0000)}.swiper-lazy-preloader{width:42px;height:42px;position:absolute;left:50%;top:50%;margin-left:-21px;margin-top:-21px;z-index:10;transform-origin:50%;box-sizing:border-box;border:4px solid var(--swiper-preloader-color, var(--swiper-theme-color));border-radius:50%;border-top-color:transparent}.swiper:not(.swiper-watch-progress) .swiper-lazy-preloader,.swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader{animation:swiper-preloader-spin 1s infinite linear}.swiper-lazy-preloader-white{--swiper-preloader-color: #fff}.swiper-lazy-preloader-black{--swiper-preloader-color: #000}@keyframes swiper-preloader-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.swiper .swiper-notification{position:absolute;left:0;top:0;pointer-events:none;opacity:0;z-index:-1000}:root{--swiper-navigation-size: 44px}.swiper-button-prev,.swiper-button-next{position:absolute;top:var(--swiper-navigation-top-offset, 50%);width:calc(var(--swiper-navigation-size) / 44 * 27);height:var(--swiper-navigation-size);margin-top:calc(0px - (var(--swiper-navigation-size) / 2));z-index:10;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--swiper-navigation-color, var(--swiper-theme-color))}.swiper-button-prev.swiper-button-disabled,.swiper-button-next.swiper-button-disabled{opacity:.35;cursor:auto;pointer-events:none}.swiper-button-prev.swiper-button-hidden,.swiper-button-next.swiper-button-hidden{opacity:0;cursor:auto;pointer-events:none}.swiper-navigation-disabled .swiper-button-prev,.swiper-navigation-disabled .swiper-button-next{display:none!important}.swiper-button-prev svg,.swiper-button-next svg{width:100%;height:100%;object-fit:contain;transform-origin:center}.swiper-rtl .swiper-button-prev svg,.swiper-rtl .swiper-button-next svg{transform:rotate(180deg)}.swiper-button-prev,.swiper-rtl .swiper-button-next{left:var(--swiper-navigation-sides-offset, 10px);right:auto}.swiper-button-lock{display:none}.swiper-button-prev:after,.swiper-button-next:after{font-family:swiper-icons;font-size:var(--swiper-navigation-size);text-transform:none!important;letter-spacing:0;font-variant:initial;line-height:1}.swiper-button-prev:after,.swiper-rtl .swiper-button-next:after{content:"prev"}.swiper-button-next,.swiper-rtl .swiper-button-prev{right:var(--swiper-navigation-sides-offset, 10px);left:auto}.swiper-button-next:after,.swiper-rtl .swiper-button-prev:after{content:"next"}.swiper-pagination{position:absolute;text-align:center;transition:.3s opacity;transform:translateZ(0);z-index:10}.swiper-pagination.swiper-pagination-hidden{opacity:0}.swiper-pagination-disabled>.swiper-pagination,.swiper-pagination.swiper-pagination-disabled{display:none!important}.swiper-pagination-fraction,.swiper-pagination-custom,.swiper-horizontal>.swiper-pagination-bullets,.swiper-pagination-bullets.swiper-pagination-horizontal{bottom:var(--swiper-pagination-bottom, 8px);top:var(--swiper-pagination-top, auto);left:0;width:100%}.swiper-pagination-bullets-dynamic{overflow:hidden;font-size:0}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transform:scale(.33);position:relative}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active,.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main{transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev{transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev{transform:scale(.33)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next{transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next{transform:scale(.33)}.swiper-pagination-bullet{width:var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 8px));height:var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 8px));display:inline-block;border-radius:var(--swiper-pagination-bullet-border-radius, 50%);background:var(--swiper-pagination-bullet-inactive-color, #000);opacity:var(--swiper-pagination-bullet-inactive-opacity, .2)}button.swiper-pagination-bullet{border:none;margin:0;padding:0;box-shadow:none;-webkit-appearance:none;appearance:none}.swiper-pagination-clickable .swiper-pagination-bullet{cursor:pointer}.swiper-pagination-bullet:only-child{display:none!important}.swiper-pagination-bullet-active{opacity:var(--swiper-pagination-bullet-opacity, 1);background:var(--swiper-pagination-color, var(--swiper-theme-color))}.swiper-vertical>.swiper-pagination-bullets,.swiper-pagination-vertical.swiper-pagination-bullets{right:var(--swiper-pagination-right, 8px);left:var(--swiper-pagination-left, auto);top:50%;transform:translate3d(0,-50%,0)}.swiper-vertical>.swiper-pagination-bullets .swiper-pagination-bullet,.swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet{margin:var(--swiper-pagination-bullet-vertical-gap, 6px) 0;display:block}.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{top:50%;transform:translateY(-50%);width:8px}.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{display:inline-block;transition:.2s transform,.2s top}.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{margin:0 var(--swiper-pagination-bullet-horizontal-gap, 4px)}.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{left:50%;transform:translate(-50%);white-space:nowrap}.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s left}.swiper-horizontal.swiper-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s right}.swiper-pagination-fraction{color:var(--swiper-pagination-fraction-color, inherit)}.swiper-pagination-progressbar{background:var(--swiper-pagination-progressbar-bg-color, rgba(0, 0, 0, .25));position:absolute}.swiper-pagination-progressbar .swiper-pagination-progressbar-fill{background:var(--swiper-pagination-color, var(--swiper-theme-color));position:absolute;left:0;top:0;width:100%;height:100%;transform:scale(0);transform-origin:left top}.swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{transform-origin:right top}.swiper-horizontal>.swiper-pagination-progressbar,.swiper-pagination-progressbar.swiper-pagination-horizontal,.swiper-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,.swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite{width:100%;height:var(--swiper-pagination-progressbar-size, 4px);left:0;top:0}.swiper-vertical>.swiper-pagination-progressbar,.swiper-pagination-progressbar.swiper-pagination-vertical,.swiper-horizontal>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,.swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite{width:var(--swiper-pagination-progressbar-size, 4px);height:100%;left:0;top:0}.swiper-pagination-lock{display:none}
/* Source: css/home_ai.css */
html, body { font-family: "Vazirmatn", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-weight: 400; line-height: 1.85; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }   h1, h2, h3, h4, h5, h6, .section-title, .about-feature-title { font-family: "Vazirmatn", sans-serif; font-weight: 800; letter-spacing: -0.2px; }   .section-title { font-size: clamp(1.6rem, 1.2rem + 2vw, 2.2rem); line-height: 1.3; }   p, .section-description, .about-feature-description, .about-tab-pill { font-family: "Vazirmatn", sans-serif; font-weight: 400; }   button, .btn { font-family: "Vazirmatn", sans-serif; font-weight: 600; } .ai-section { padding: 2rem 0; width: 100%; box-sizing: border-box; } @media (min-width: 768px) { .ai-section { padding: 3rem 0; } } .ai-hero { background: linear-gradient( 135deg, rgba(40, 171, 136, 0.03) 0%, transparent 50% ), linear-gradient(225deg, rgba(1, 51, 102, 0.04) 0%, transparent 50%), #0f0a2e; } .ai-solution, .ai-helps, .ai-characters { background: #0f0a2e; } .ai-section .section-header { text-align: center; margin-bottom: 1.75rem; } .ai-cards { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 18px; } .ai-card { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 16px; padding: 16px; color: #e8e8f5; } .ai-card-title { color: #ffffff; font-weight: 800; font-size: 1rem; margin-bottom: 8px; } .ai-card-desc, .ai-muted { color: #b7b9d6; font-size: 0.92rem; line-height: 1.8rem; } .ai-hero-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 18px; } .ai-solution-grid { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 14px; } .ai-solution-item { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 16px; padding: 16px; } .ai-mini-title { color: #ffffff; font-weight: 800; margin-bottom: 10px; font-size: 0.95rem; } .ai-list { margin: 0; padding: 0 18px 0 0; color: #d1d5db; line-height: 1.9rem; } .ai-steps { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 14px; } .ai-step { display: flex; align-items: flex-start; gap: 12px; padding: 14px; border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.03); } .ai-step-num { width: 34px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; background: linear-gradient(135deg, var(--secondary-color), var(--primary-color)); flex-shrink: 0; }   @media (min-width: 768px) { .ai-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ai-solution-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ai-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1024px) { .ai-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }   .fx-showcase { padding: 2.5rem 0; overflow-x: clip; } @media (min-width: 768px) { .fx-showcase { padding: 3.5rem 0; } } .fx-head { text-align: center; margin-bottom: 2rem; padding: 0 1rem; } @media (min-width: 768px) { .fx-head { padding: 0; margin-bottom: 2.5rem; } } .fx-title { font-weight: 900; letter-spacing: -0.3px; line-height: 1.35; margin: 0 0 0.65rem 0; color: #fff; font-size: clamp(1.8rem, 1.4rem + 2.2vw, 3.0rem); } .fx-subtitle { margin: 0 auto; max-width: 860px; color: rgba(255, 255, 255, 0.75); line-height: 1.9; font-size: 0.9rem; padding: 0 1rem; } @media (min-width: 768px) { .fx-subtitle { font-size: 1rem; padding: 0; } } .fx-stage { position: relative; display: flex; justify-content: center; gap: 16px; align-items: start; max-width: 100%; margin: 0 auto; } .fx-preview-group { position: relative; width: 100%; } @media (min-width: 992px) { .fx-stage { display: flex; grid-template-columns: none; gap: 24px; padding-inline-start: clamp(16px, 7vw, 110px); } .fx-preview-group { width: min(100%, 920px); } } .fx-preview { position: relative; border-radius: 22px; padding: 10px; background-color: #ffffff0d; border: 1px solid rgba(255, 255, 255, 0.10); backdrop-filter: blur(100px); width: 100%; min-height: 400px; height: auto; background: rgba(255, 255, 255, 0.03); transition: filter 400ms ease; filter: blur(3px); cursor: pointer; }   .fx-preview-hint { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.85); display: inline-flex; align-items: center; justify-content: center; gap: 10px; background: rgba(0, 0, 0, 0.75); color: #fff; padding: 12px 20px; border-radius: 12px; font-size: 0.85rem; font-weight: 600; opacity: 0; pointer-events: none; transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1); backdrop-filter: blur(16px) saturate(180%); -webkit-backdrop-filter: blur(16px) saturate(180%); white-space: nowrap; z-index: 10; border: 1px solid rgba(255, 255, 255, 0.2); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1); }   .fx-preview-hint:has(.fx-preview-hint-icon:only-child), .fx-preview-hint:not(:has(.fx-preview-hint-text)) { padding: 16px; border-radius: 50%; width: 56px; height: 56px; background: rgba(0, 0, 0, 0.8); border: 2px solid rgba(255, 255, 255, 0.3); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5), 0 4px 16px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 0 0 4px rgba(255, 255, 255, 0.05); } .fx-preview-hint-icon { width: 20px; height: 20px; stroke: currentColor; flex-shrink: 0; stroke-width: 2.5; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); }   .fx-preview-hint:has(.fx-preview-hint-icon:only-child) .fx-preview-hint-icon, .fx-preview-hint:not(:has(.fx-preview-hint-text)) .fx-preview-hint-icon { width: 24px; height: 24px; stroke-width: 2.5; } .fx-preview-hint-text { line-height: 1.4; font-weight: 600; }   .fx-preview:not(.has-active):hover { filter: blur(0px); }   .fx-preview:not(.has-active):hover .fx-caption { filter: blur(0px); }   .fx-preview:hover .fx-preview-hint { opacity: 1; transform: translate(-50%, -50%) scale(1); } .fx-preview:hover .fx-preview-hint-icon { transform: scale(1.05); }   .fx-preview:hover .fx-preview-hint:has(.fx-preview-hint-icon:only-child) .fx-preview-hint-icon, .fx-preview:hover .fx-preview-hint:not(:has(.fx-preview-hint-text)) .fx-preview-hint-icon { transform: scale(1.1) rotate(5deg); }   .fx-stage:has(.fx-item:hover) .fx-preview:hover .fx-preview-hint { opacity: 0; transform: translate(-50%, -50%) scale(0.8); } @media (min-width: 768px) { .fx-preview { height: 500px; } } @media (min-width: 992px) { .fx-preview { height: 600px; } } .fx-preview-img { width: 100%; border-radius: 22px; height: 100%; min-height: 340px; transition: opacity 180ms ease, transform 350ms ease; opacity: 1; object-fit: cover; }   @media (max-width: 768px) { .fx-preview { position: relative; overflow: hidden; }   .fx-preview-hint { display: none !important; } .fx-preview-slider { display: block; width: 100%; height: 100%; position: relative; min-height: 380px; max-height: 500px; overflow: hidden; border-radius: 24px; margin: 0 auto; box-sizing: border-box; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1); background: linear-gradient(135deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.05) 100%); } .fx-preview-slide { width: 100%; height: 100%; opacity: 0; visibility: hidden; transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1), transform 0.7s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.3s ease 0.4s; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; transform: scale(0.95) translateY(8px); pointer-events: none; will-change: opacity, transform; } .fx-preview-slide.active { opacity: 1; visibility: visible; z-index: 2; transform: scale(1) translateY(0); pointer-events: auto; transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1), transform 0.7s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s; } .fx-preview-slide img { width: 100%; height: 100%; object-fit: cover; border-radius: 24px; display: block; user-select: none; -webkit-user-drag: none; pointer-events: none; filter: brightness(1.02) contrast(1.05); transition: filter 0.3s ease; } .fx-preview-slide.active img { filter: brightness(1) contrast(1); }   .fx-preview-slide::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 40%; background: linear-gradient( to top, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.2) 40%, transparent 100% ); border-radius: 0 0 24px 24px; pointer-events: none; z-index: 1; opacity: 0; transition: opacity 0.5s ease; } .fx-preview-slide.active::after { opacity: 1; }   .fx-slider-nav { position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; justify-content: center; gap: 10px; z-index: 20; padding: 16px 24px; background: rgba(0, 0, 0, 0.75); border-radius: 60px; backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); border: 1px solid rgba(255, 255, 255, 0.2); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.15), inset 0 -1px 0 rgba(0, 0, 0, 0.2); min-width: fit-content; max-width: calc(100% - 32px); box-sizing: border-box; transition: all 0.3s ease; } .fx-slider-nav:hover { background: rgba(0, 0, 0, 0.85); border-color: rgba(255, 255, 255, 0.3); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6), 0 4px 12px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2); } .fx-slider-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, 0.25); border: 2px solid rgba(255, 255, 255, 0.35); cursor: pointer; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); padding: 0; margin: 0; flex-shrink: 0; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.1); position: relative; overflow: hidden; } .fx-slider-dot::before { content: ''; position: absolute; top: 50%; left: 50%; width: 0; height: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.3); transform: translate(-50%, -50%); transition: width 0.3s ease, height 0.3s ease; } .fx-slider-dot:hover { background: rgba(255, 255, 255, 0.45); border-color: rgba(255, 255, 255, 0.6); transform: scale(1.2); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4), 0 0 0 2px rgba(255, 255, 255, 0.1), inset 0 1px 1px rgba(255, 255, 255, 0.2); } .fx-slider-dot:hover::before { width: 100%; height: 100%; } .fx-slider-dot.active { background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.85) 100%); border-color: rgba(255, 255, 255, 1); width: 32px; height: 8px; border-radius: 10px; box-shadow: 0 4px 12px rgba(255, 255, 255, 0.5), 0 2px 6px rgba(255, 255, 255, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.2), inset 0 1px 2px rgba(255, 255, 255, 0.4); transform: scale(1); } .fx-slider-dot.active::before { width: 0; height: 0; }   .fx-slider-dot.active::after { content: ''; position: absolute; top: 0; left: 0; height: 100%; width: 100%; background: linear-gradient(90deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0.6) 100%); border-radius: 10px; animation: shimmer 4s infinite; opacity: 0.5; } @keyframes shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }   @media (max-width: 480px) { .fx-preview { padding: 10px; min-height: 360px; } .fx-preview-slider { min-height: 360px; border-radius: 20px; box-shadow: 0 16px 48px rgba(0, 0, 0, 0.25), 0 6px 20px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.1); } .fx-preview-slide img { border-radius: 20px; } .fx-preview-slide::after { border-radius: 0 0 20px 20px; } .fx-slider-nav { bottom: 22px; padding: 14px 20px; gap: 8px; border-radius: 50px; } .fx-slider-dot { width: 7px; height: 7px; border-width: 2px; } .fx-slider-dot.active { width: 28px; height: 7px; } }   @media (max-width: 360px) { .fx-preview { padding: 8px; min-height: 340px; } .fx-preview-slider { min-height: 340px; } .fx-slider-nav { padding: 10px 16px; gap: 8px; bottom: 18px; } .fx-slider-dot { width: 6px; height: 6px; } .fx-slider-dot.active { width: 20px; height: 6px; } } }   .fx-stage:has(.fx-item:hover) .fx-preview, .fx-stage:has(.fx-item:hover) .fx-caption { filter: blur(0px); } .fx-preview.has-active, .fx-preview.has-active .fx-caption { filter: blur(0px); } .fx-preview-overlay { position: absolute; inset: 0; background: none; pointer-events: none; } .fx-hint { position: absolute; top: 16px; left: 16px; right: 16px; display: inline-flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 14px; background: rgba(0, 0, 0, 0.35); border: 1px solid rgba(255, 255, 255, 0.10); color: rgba(255, 255, 255, 0.92); backdrop-filter: blur(10px); } .fx-preview.has-active .fx-hint { opacity: 0; transform: translateY(-6px); transition: 220ms ease; pointer-events: none; } .fx-hint-badge { font-weight: 800; padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.12); font-size: 0.85rem; } .fx-hint-text { font-size: 0.95rem; line-height: 1.7; } .fx-caption { width: auto; position: absolute; bottom: 16px; right: 16px; left: 16px; border-radius: 18px; padding: 12px 14px; background: rgba(0, 0, 0, 0.35); border: 1px solid rgba(255, 255, 255, 0.10); backdrop-filter: blur(12px); transition: filter 400ms ease; filter: blur(8px); } @media (min-width: 768px) { .fx-caption { width: 60%; left: auto; } }   @media (max-width: 768px) { .fx-caption { display: none !important; } } @media (min-width: 992px) { .fx-caption { width: 50%; } } .fx-caption-title { font-weight: 900; color: #fff; margin-bottom: 4px; letter-spacing: -0.2px; } .fx-caption-desc { color: rgba(255, 255, 255, 0.75); font-size: 0.95rem; line-height: 1.7; }   .floating-card { position: absolute; background: rgba(50, 50, 50, 0.369); border: 1px solid rgba(90, 90, 90, 0.344); border-radius: 14px; padding: 10px 14px; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28); min-width: 138px; color: #fff; z-index: 2; display: flex; align-items: center; justify-content: space-between; } .floating-card img{ width: 70px; height: 70px; object-fit: cover; } .floating-card::after { content: ""; position: absolute; inset: -1px; border-radius: 14px; background: linear-gradient(120deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0)); opacity: 0.35; pointer-events: none; } .floating-card-1 { position: absolute; top: 14px; right: auto; left: calc(100% + 10px); animation: float3D 8s ease-in-out infinite; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; filter: none !important; z-index: 10; opacity: 1 !important; background: transparent !important; border: none !important; box-shadow: none !important; will-change: transform; transform: translateZ(0); padding: 10px 14px; border-radius: 14px; min-width: 138px; color: #fff; display: flex; align-items: center; justify-content: space-between; } .fx-preview .floating-card-1 { filter: none !important; } .floating-card-1::after { display: none !important; content: none !important; } .floating-card-1 img { filter: none !important; opacity: 1 !important; width: 70px; height: 70px; object-fit: cover; } .floating-card-1 * { filter: none !important; opacity: 1 !important; }   .floating-card-1:hover, .floating-card-1:hover *, .floating-card-1:hover img, .fx-stage:has(.fx-item:hover) .floating-card-1, .fx-stage:has(.fx-item:hover) .floating-card-1 *, .fx-stage:has(.fx-item:hover) .floating-card-1 img, .fx-preview:hover ~ .floating-card-1, .fx-preview:hover ~ .floating-card-1 *, .fx-preview:hover ~ .floating-card-1 img, .fx-stage:hover .floating-card-1, .fx-stage:hover .floating-card-1 *, .fx-stage:hover .floating-card-1 img { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; filter: none !important; opacity: 1 !important; background: transparent !important; border: none !important; box-shadow: none !important; } .floating-card-2 { bottom: -30px; left: -50px; animation: float3D 9s ease-in-out infinite; animation-delay: 1.6s; } .floating-card-label { font-size: 0.8rem; color: rgba(255, 255, 255, 0.78); letter-spacing: 0.1px; } .floating-card-value { font-size: 1.2rem; font-weight: 800; color: #fff; } @keyframes float3D { 0% { transform: translate3d(0,0,0) scale(1); } 25% { transform: translate3d(6px,-4px,0) scale(1.02); } 50% { transform: translate3d(-6px,-10px,0) scale(1.04); } 75% { transform: translate3d(-8px,-6px,0) scale(1.02); } 100% { transform: translate3d(0,0,0) scale(1); } }   .hero-stats-inline { margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, 0.08); } .stats-grid-inline { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; } @media (min-width: 640px) { .stats-grid-inline { grid-template-columns: repeat(3, 1fr); } } .stat-card-inline { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 6px 2px; transition: transform 160ms ease; } .stat-card-inline:hover { transform: translateX(-3px); } .stat-icon-inline { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; flex-shrink: 0; color: #fff; box-shadow: 0 12px 26px rgba(0, 0, 0, 0.24); } .stat-icon-inline svg { width: 18px; height: 18px; stroke-width: 2.6; } .stat-icon-inline.stat-icon-green { background: linear-gradient(135deg, #10b981, #059669); } .stat-icon-inline.stat-icon-blue { background: linear-gradient(135deg, #3b82f6, #06b6d4); } .stat-icon-inline.stat-icon-purple{ background: linear-gradient(135deg, #28ab88, #013366); } .stat-icon-inline.stat-icon-orange{ background: linear-gradient(135deg, #f97316, #dc2626); } .stat-content-inline { display: flex; flex-direction: column; gap: 2px; flex: none; } .stat-value-inline { font-size: 1.3rem; font-weight: 700; color: #fff; } .stat-label-inline { font-size: 0.8rem; color: rgba(255, 255, 255, 0.75); } @media (max-width: 768px) { .floating-card { padding: 8px 12px; min-width: 120px; } .floating-card-1 { top: 14px; right: 14px; } .floating-card-2 { bottom: 14px; left: 14px; } .hero-stats-inline { margin-top: 16px; padding-top: 12px; } .stats-grid-inline { gap: 12px; grid-template-columns: repeat(2, 1fr); } }   .fx-lightbox { position: fixed; top: 0; left: 0; right: 0; bottom: 0; display: none; align-items: center; justify-content: center; z-index: 9999; background: rgba(0, 0, 0, 0.95); backdrop-filter: blur(20px); animation: fadeIn 0.3s ease; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .fx-lightbox.is-open { display: flex; } .fx-lightbox-backdrop { position: absolute; inset: 0; background: transparent; cursor: pointer; } .fx-lightbox-body { position: relative; max-width: 95%; max-height: 95vh; width: auto; height: auto; border-radius: 18px; overflow: hidden; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); animation: zoomIn 0.3s ease; } @keyframes zoomIn { from { transform: scale(0.9); opacity: 0; } to { transform: scale(1); opacity: 1; } } .fx-lightbox-img { display: block; max-width: 100%; max-height: 95vh; width: auto; height: auto; object-fit: contain; background: transparent; } .fx-lightbox-close { position: absolute; top: 20px; right: 20px; width: 44px; height: 44px; border-radius: 50%; border: none; background: #209b81; color: #fff; font-size: 24px; line-height: 1; cursor: pointer; backdrop-filter: blur(10px); z-index: 10; transition: background 0.2s ease, transform 0.2s ease; display: flex; align-items: center; justify-content: center; }   .fx-card { color: #000; position: relative; left: auto; transform: none; top: auto; border-radius: 22px; padding: 18px 16px; width: 100%; border: 1px solid rgba(255, 255, 255, 0.10); backdrop-filter: blur(100px); margin-top: 16px; } @media (min-width: 992px) { .fx-card { position: absolute; left: -200px; transform: translateY(-50%); top: 50%; width: 31%; margin-top: 0; } } @media (min-width: 1500px) { .fx-card { width: 34%; } } .fx-content{ background: #ffffffcf; padding: 18px 16px; border-radius: 22px; } .fx-card-title { font-weight: 900; color: #222; margin-bottom: 12px; } .fx-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } @media (max-width: 520px) { .fx-grid { grid-template-columns: repeat(2, 1fr); } } .fx-item { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; gap: 6px; cursor: pointer; border-radius: 12px; padding: 12px 8px; border: 1px solid rgba(255, 255, 255, 0.25); color: rgba(255, 255, 255, 0.85); transition: transform 500ms ease, background 500ms ease, border-color 500ms ease, box-shadow 500ms ease; text-align: center; background: rgba(255, 255, 255, 0.10); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2); }   .fx-item:not(.is-active):not(:focus) { border-color: rgba(255, 255, 255, 0.25); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2); transform: translateY(0); } .fx-item:hover { transform: translateY(-1px); background: rgba(255, 255, 255, 0.7); border-color: rgba(58, 143, 89, 0.7); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); }   .fx-item:not(.is-active):not(:focus):not(:hover) { border-color: rgba(255, 255, 255, 0.25); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2); transform: translateY(0); background: rgba(255, 255, 255, 0.10); }   .fx-item:focus { outline: none; background: rgba(255, 255, 255, 0.7); border-color: #1b15b9; box-shadow: 0 4px 16px rgba(100, 116, 255, 0.3), 0 0 0 3px rgba(100, 116, 255, 0.15); transform: translateY(-1px); } .fx-item:focus:hover { background: rgba(255, 255, 255, 0.75); border-color: #1b15b9; box-shadow: 0 4px 20px rgba(100, 116, 255, 0.4), 0 0 0 3px rgba(100, 116, 255, 0.2); }   .fx-item.is-active { background: rgba(255, 255, 255, 0.7); border-color: #1b15b9; box-shadow: 0 4px 16px rgba(100, 116, 255, 0.3), 0 0 0 3px rgba(100, 116, 255, 0.15); transform: translateY(-1px); } .fx-item.is-active:hover { background: rgba(255, 255, 255, 0.75); border-color: #1b15b9; box-shadow: 0 4px 20px rgba(100, 116, 255, 0.4), 0 0 0 3px rgba(100, 116, 255, 0.2); }   .fx-item.is-active:focus { background: rgba(255, 255, 255, 0.7); border-color: #1b15b9; box-shadow: 0 4px 16px rgba(100, 116, 255, 0.3), 0 0 0 3px rgba(100, 116, 255, 0.15); } .fx-item-icon { padding: 10px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; border: none; } .fx-item-icon svg { width: 16px; height: 16px; stroke: white; }   .fx-item:nth-child(1) .fx-item-icon { background: linear-gradient(135deg, #e91e63, #c2185b); } .fx-item:nth-child(2) .fx-item-icon { background: linear-gradient(135deg, #9c27b0, #7b1fa2); } .fx-item:nth-child(3) .fx-item-icon { background: linear-gradient(135deg, #ff6f00, #e65100); } .fx-item:nth-child(4) .fx-item-icon { background: linear-gradient(135deg, #1976d2, #1565c0); } .fx-item:nth-child(5) .fx-item-icon { background: linear-gradient(135deg, #0288d1, #01579b); } .fx-item:nth-child(6) .fx-item-icon { background: linear-gradient(135deg, #7b1fa2, #4a148c); } .fx-item:nth-child(7) .fx-item-icon { background: linear-gradient(135deg, #ffa726, #f57c00); } .fx-item:nth-child(8) .fx-item-icon { background: linear-gradient(135deg, #00897b, #004d40); } .fx-item:nth-child(9) .fx-item-icon { background: linear-gradient(135deg, #ab47bc, #6a1b9a); } .fx-item:nth-child(10) .fx-item-icon { background: linear-gradient(135deg, #29b6f6, #0277bd); } .fx-item:nth-child(11) .fx-item-icon { background: linear-gradient(135deg, #00bcd4, #00838f); } .fx-item:nth-child(12) .fx-item-icon { background: linear-gradient(135deg, #f44336, #c62828); } .fx-item-text { display: flex; flex-direction: column; gap: 0; width: 100%; } .fx-item-name { font-weight: 600; font-size: 10px; line-height: 1.3; color: #222; word-break: break-word; } .fx-item-mini { display: none; } .fx-cta-wrapper { display: flex; gap: 8px; margin-top: 18px; flex-wrap: wrap; } .fx-cta { flex: 1; min-width: 120px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 16px; font-weight: 600; font-size: 0.85rem; border-radius: 8px; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 2px 8px rgba(40, 171, 136, 0.2); } .fx-cta:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(40, 171, 136, 0.3); } .fx-cta:active { transform: translateY(0); box-shadow: 0 2px 6px rgba(40, 171, 136, 0.2); } .fx-cta-register { background: linear-gradient(135deg, #28ab88, #0f766e); } .fx-cta-arrow { display: inline-block; transform: translateY(-1px); transition: transform 0.25s ease; font-size: 0.9em; } .fx-cta:hover .fx-cta-arrow { transform: translateX(-2px) translateY(-1px); } @media (max-width: 520px) { .fx-cta-wrapper { flex-direction: column; gap: 10px; margin-top: 16px; } .fx-cta { width: 100%; min-width: 100%; padding: 10px 14px; font-size: 0.8rem; } } @media (min-width: 992px) and (max-width: 1199px) { .fx-stage { padding-inline-start: 48px; } .iphone-mockup { left: 8px; transform: translateY(-50%) scale(0.78); } .floating-card-1 { display: none; } } @media (min-width: 1200px) and (max-width: 1500px) { .fx-preview-group { width: min(100%, 860px); } .fx-card { left: -72px; } }   @media (min-width: 992px) { .fx-preview-img { min-height: 480px; } }   @media (max-width: 768px) { .fx-preview { min-height: 380px; width: 100%; padding: 12px;   filter: blur(0px) !important; margin: 0 auto; max-width: 100%; } .fx-preview-img { filter: blur(0px) !important; } .fx-caption { filter: blur(0px) !important; } .floating-card { display: none; }   .fx-card { display: none !important; } .fx-stage{ flex-direction: column; gap: 0; padding: 0; width: 100%; max-width: 100%; } .fx-showcase { padding: 2rem 0; } .fx-showcase .container { padding-left: 16px; padding-right: 16px; } .fx-head { padding: 0; margin-bottom: 2rem; } .fx-preview { margin: 0; width: 100%; } } @media (max-width: 1200px) { .floating-card-1 { display: none; } }   @media (max-width: 520px) { .fx-item { padding: 8px 6px; gap: 4px; } .fx-item-icon { width: 32px; height: 32px; } .fx-item-icon svg { width: 16px; height: 16px; } .fx-item-name { font-size: 0.7rem; } .fx-item-mini { display: none; } .floating-card { display: none; } }   .about.about-tabs { background: #fff; padding: 64px 0 80px; } .about-tabs-bar { display: flex; justify-content: center;   gap: 10px; flex-wrap: nowrap; overflow-x: auto; padding: 10px 4px 18px; margin-bottom: 10px; border-bottom: 1px solid rgba(15, 23, 42, 0.08); -webkit-overflow-scrolling: touch; } .about-tab-pill { border: 1px solid rgba(15, 23, 42, 0.12); background: #f8fafc; color: #0f172a; font-weight: 800; font-size: 0.95rem; padding: 10px 18px; border-radius: 999px; cursor: pointer; white-space: nowrap; transition: background .18s ease, border-color .18s ease, transform .18s ease; } .about-tab-pill:hover { transform: translateY(-1px); background: #f1f5f9; border-color: rgba(15, 23, 42, 0.18); } .about-tab-pill.is-active { background: #0f766e; color: #fff; border-color: transparent; } .about-tabs-panels .about-tab-panel { display: none; } .about-tabs-panels .about-tab-panel.is-active { display: block; animation: aboutTabFade .28s ease; } @keyframes aboutTabFade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }   @media (max-width: 768px) { .about-tabs-bar { justify-content: flex-start; } }   .about-tabs-bar{ display: flex; justify-content: center; align-items: center; gap: 8px; margin: 48px auto 40px; padding: 0%; border-radius: 50px; width: fit-content; max-width: 100%; background: #ffffff; border: 1px solid rgba(15, 23, 42, 0.08); overflow-x: auto; -webkit-overflow-scrolling: touch; } .about-tabs-bar::-webkit-scrollbar{ height: 0; }   .about-tab-pill{ border: 0; background: transparent; color: #64748b; font-weight: 600; font-size: 0.9rem; padding: 10px 24px; cursor: pointer; white-space: nowrap; position: relative; border-radius: 50px; transition: all 0.25s ease, flex-grow 0.3s ease; flex-grow: 0; flex-shrink: 0; }   .about-tab-pill:hover:not(.is-active){ background: rgba(15, 23, 42, 0.04); color: #334155; }   .about-tab-pill.is-active{ background: linear-gradient(135deg, var(--secondary-color), var(--primary-color)); color: #fff; font-weight: 700; flex-grow: 1; text-align: center; }   .about-tab-pill.is-active:hover{ box-shadow: 0 6px 16px rgba(15, 23, 42, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.15); transform: scale(1.02); }   @media (max-width: 768px){ .about-tabs-bar{ justify-content: flex-start; width: 100%; gap: 6px; padding: 5px; } .about-tab-pill{ font-size: 0.85rem; padding: 8px 16px; } }   .about.about-tabs .about-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: center; } @media (min-width: 768px) { .about.about-tabs .about-grid { grid-template-columns: 1fr 1fr; gap: 3rem; } } @media (min-width: 1024px) { .about.about-tabs .about-grid { gap: 4rem; } }   .about.about-tabs .about-image { width: 100%; min-width: 0; position: relative; display: flex; align-items: center; justify-content: center; opacity: 1 !important; transform: none !important; }   .about.about-tabs .about-image-background { width: 100%; max-width: 100%; height: auto; filter: brightness(0.9); border-radius: 2rem; box-shadow: 0px 10px 40px rgba(0, 0, 0, 0.3); object-fit: cover; }   .about.about-tabs .about-content { width: 100%; min-width: 0; opacity: 1 !important; transform: none !important; }   @media (min-width: 768px) { .about.about-tabs .about-content { width: 100%; } .about.about-tabs .about-image { width: 100%; } }   .about.about-tabs .about-feature { width: 100%; opacity: 1 !important; transform: none !important; } @media (min-width: 768px) { .about.about-tabs .about-feature { width: 100%; max-width: 100%; } }   .about.about-tabs .about-content .section-header { text-align: right; margin-bottom: 1.5rem; } .about.about-tabs .about-content .section-title { text-align: right; } .about.about-tabs .about-content .section-description { text-align: right; width: 100%; max-width: 100%; }   .ai-teamwork{ position: relative; padding: 3rem 0; color: #eef2ff; overflow: hidden; background-color: #0f0a2e; isolation: isolate;   } @media (min-width: 768px) { .ai-teamwork{ padding: 4rem 0; } } @media (min-width: 1024px) { .ai-teamwork{ padding: 72px 0; } }   .ai-teamwork::before{ content:""; position:absolute; inset:0; pointer-events:none; opacity:.10; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E"); mix-blend-mode: overlay; } .ai-teamwork .ai-teamwork-head{ position: relative; display: grid; grid-template-columns: 1fr; gap: 28px; align-items: center; margin-bottom: 34px; } @media (min-width: 900px) { .ai-teamwork .ai-teamwork-head{ grid-template-columns: 1.15fr 0.85fr; } } .ai-teamwork .ai-teamwork-title{ margin: 0 0 10px 0; font-weight: 900; letter-spacing: -0.3px; line-height: 1.3; font-size: clamp(1.9rem, 1.25rem + 1.9vw, 3.0rem); text-shadow: 0 10px 40px rgba(0,0,0,.35); } .ai-teamwork .ai-teamwork-subtitle{ margin: 0 0 14px 0; color: rgba(238,242,255,.78); line-height: 1.9; max-width: 740px; font-size: clamp(1.02rem, .92rem + .45vw, 1.22rem); } .ai-teamwork .ai-teamwork-steps{ display:grid; grid-template-columns: 1fr; gap: 12px; max-width: 100%; } @media (min-width: 640px) { .ai-teamwork .ai-teamwork-steps{ grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 900px) { .ai-teamwork .ai-teamwork-steps{ grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 760px; } } .ai-teamwork .ai-step-pill{ position: relative; overflow: hidden; display: flex; align-items: center; justify-content: flex-start; gap: 12px; padding: 16px 16px; border-radius: 18px; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.06); backdrop-filter: blur(12px); color: rgba(238,242,255,.90); font-weight: 800; font-size: 1.02rem; line-height: 1.75; min-height: 76px; box-shadow: 0 14px 38px rgba(0,0,0,.18); transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease, background 180ms ease; } .ai-teamwork .ai-step-pill::before{   content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(420px 140px at 20% 20%, rgba(59,130,246,.18), transparent 65%), radial-gradient(420px 140px at 80% 80%, rgba(20,184,166,.14), transparent 65%), linear-gradient(120deg, rgba(255,255,255,.14), rgba(255,255,255,0) 40%); opacity: .32; } .ai-teamwork .ai-step-num{ width: 34px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; color: #fff; background: linear-gradient(135deg, var(--secondary-color), var(--primary-color)); border: 1px solid rgba(255,255,255,.16); font-weight: 900; font-size: 1rem; box-shadow: 0 16px 34px rgba(0,0,0,.28); } .ai-teamwork .ai-step-pill > *{ position: relative; z-index: 1; } .ai-teamwork .ai-step-pill:hover{ transform: translateY(-2px); border-color: rgba(255,255,255,.26); box-shadow: 0 18px 50px rgba(0,0,0,.26); background: rgba(255,255,255,.08); } .ai-teamwork .ai-step-pill:active{ transform: translateY(-1px); }   .ai-teamwork .ai-teamwork-mini{ position: relative; border-radius: 22px; padding: 52px 14px 14px;   border: 1px solid rgba(255,255,255,.14); overflow: hidden; background: linear-gradient(135deg, rgba(9,14,34,.86) 0%, rgba(9,14,34,.34) 55%, rgba(9,14,34,.78) 100%); background-size: cover; background-position: center; box-shadow: 0 24px 70px rgba(0,0,0,.42); } .ai-teamwork .ai-teamwork-mini::before{   content: ""; position: absolute; top: 0; right: 0; left: 0; height: 40px; background: radial-gradient(circle at 28px 20px, rgba(239,68,68,.95) 0 5px, transparent 6px), radial-gradient(circle at 48px 20px, rgba(245,158,11,.95) 0 5px, transparent 6px), radial-gradient(circle at 68px 20px, rgba(34,197,94,.95) 0 5px, transparent 6px), rgba(0,0,0,.35); border-bottom: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(10px); } .ai-teamwork .ai-teamwork-mini > *{ position: relative; z-index: 1; }   .ai-teamwork .ai-mini-card{ border-radius: 18px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.05); backdrop-filter: blur(14px); padding: 14px; } .ai-teamwork .ai-mini-top{ display:flex; justify-content: space-between; align-items:center; margin-bottom: 10px; } .ai-teamwork .ai-mini-badge{ padding: 6px 10px; border-radius: 999px; background: rgba(59,130,246,.18); border: 1px solid rgba(59,130,246,.35); font-weight: 900; font-size: .85rem; } .ai-teamwork .ai-mini-row{ margin-top: 10px; } .ai-teamwork .ai-mini-label{ font-weight: 800; font-size: .85rem; color: rgba(238,242,255,.72); margin-bottom: 6px; } .ai-teamwork .ai-mini-box{ border-radius: 14px; padding: 10px 12px; border: 1px solid rgba(255,255,255,.12); background: rgba(0,0,0,.18); color: rgba(238,242,255,.84); line-height: 1.75; font-size: .92rem; } .ai-teamwork .ai-mini-out{ background: rgba(20,184,166,.12); border-color: rgba(20,184,166,.25); } .ai-teamwork .ai-mini-tags{ display:flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } .ai-teamwork .ai-mini-tag{ padding: 6px 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04); color: rgba(238,242,255,.78); font-weight: 700; font-size: .82rem; }   .ai-teamwork .ai-cards-grid{ position: relative; display: grid; grid-template-columns: 1fr; gap: 24px; } @media (min-width: 640px) { .ai-teamwork .ai-cards-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); gap: 24px; } } @media (min-width: 900px) { .ai-teamwork .ai-cards-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); gap: 28px; } } @media (min-width: 1200px) { .ai-teamwork .ai-cards-grid{ grid-template-columns: repeat(4, minmax(0,1fr)); gap: 28px; } } .ai-teamwork .ai-card{ position: relative; border-radius: 16px; min-height: 460px; height: 460px; perspective: 1000px; outline: none; cursor: pointer; transform: translateZ(0); transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1); } .ai-teamwork .ai-card:hover{ transform: translateY(-8px); } .ai-teamwork .ai-card-face{ position:absolute; inset:0; border-radius: 16px; border: 1px solid rgba(255,255,255,.06); background: linear-gradient(180deg, rgba(20, 20, 28, 0.95) 0%, rgba(15, 15, 22, 0.98) 100%); backdrop-filter: blur(24px); overflow: hidden; box-shadow: 0 4px 20px rgba(0,0,0,.3), 0 0 0 1px rgba(255,255,255,.04) inset, 0 1px 0 rgba(255,255,255,.05) inset; transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1); } .ai-teamwork .ai-card:hover .ai-card-face{ border-color: rgba(255,255,255,.12); box-shadow: 0 12px 40px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.08) inset, 0 1px 0 rgba(255,255,255,.1) inset; } .ai-teamwork .ai-card-front{ display:flex; flex-direction: column; opacity: 1; height: 100%; } .ai-teamwork .ai-card-meta{ padding: 28px 28px 24px; display: flex; flex-direction: column; gap: 10px; flex-shrink: 0; order: 1; position: relative; z-index: 2; } .ai-teamwork .ai-card-photo{ width: 100%; flex: 1; overflow: visible; position: relative; display: flex; align-items: flex-end; justify-content: center; order: 2; padding: 0 24px 24px; min-height: 0; } .ai-teamwork .ai-card-photo::after{ content: ""; position: absolute; inset: -20px; background: radial-gradient(ellipse at center bottom, rgba(59, 130, 246, 0.08) 0%, transparent 70%); opacity: 0; transition: opacity 400ms cubic-bezier(0.4, 0, 0.2, 1); pointer-events: none; z-index: 0; } .ai-teamwork .ai-card:hover .ai-card-photo::after{ opacity: 1; } .ai-teamwork .ai-card-photo::before{ content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 80px; background: linear-gradient(to top, rgba(15, 15, 22, 0.95) 0%, rgba(15, 15, 22, 0.5) 50%, transparent 100%); z-index: 3; pointer-events: none; transition: opacity 400ms cubic-bezier(0.4, 0, 0.2, 1); } .ai-teamwork .ai-card:hover .ai-card-photo::before{ opacity: 0.7; } .ai-teamwork .ai-card-photo img{ width: 100%; height: auto; max-height: 320px; object-fit: contain; object-position: center bottom; transform: scale(1); border-radius: 24px; border: 2px solid rgba(255, 255, 255, 0.08); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.1); filter: contrast(1.12) saturate(1.15) brightness(1.05) blur(0.5px) drop-shadow(0 8px 24px rgba(0, 0, 0, 0.3)) drop-shadow(0 2px 8px rgba(0, 0, 0, 0.2)); transition: transform 400ms cubic-bezier(0.4, 0, 0.2, 1), filter 400ms cubic-bezier(0.4, 0, 0.2, 1), border-color 400ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 400ms cubic-bezier(0.4, 0, 0.2, 1); position: relative; z-index: 2; will-change: transform, filter; background: rgba(255, 255, 255, 0.02); backdrop-filter: blur(8px); } .ai-teamwork .ai-card:hover .ai-card-photo img{ transform: scale(1.05) translateY(-6px); border-color: rgba(255, 255, 255, 0.15); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.15); filter: contrast(1.15) saturate(1.2) brightness(1.08) blur(0.3px) drop-shadow(0 12px 32px rgba(0, 0, 0, 0.4)) drop-shadow(0 4px 12px rgba(0, 0, 0, 0.3)); } .ai-teamwork .ai-card-name{ font-weight: 600; color: #ffffff; line-height: 1.35; font-size: 1.2rem; letter-spacing: -0.015em; margin: 0; } .ai-teamwork .ai-card-role{ color: rgba(238,242,255,.65); font-weight: 400; font-size: .92rem; margin: 0; line-height: 1.6; } .ai-teamwork .ai-card-rating{ display:flex; align-items:center; gap: 8px; margin-top: 4px; } .ai-teamwork .ai-stars{ display:inline-flex; gap: 2px; font-size: 14px; line-height: 1; } .ai-teamwork .ai-star{ opacity:.4; color: #ffc107; } .ai-teamwork .ai-rate-num{ font-weight: 600; color: rgba(238,242,255,.85); font-size: .9rem; } .ai-teamwork .ai-card-hint{ margin-top: 16px; font-size: .78rem; color: rgba(238,242,255,.45); line-height: 1.6; font-weight: 400; }   .ai-teamwork .ai-card-back{ padding: 20px; transform: rotateY(180deg); opacity: 0; display: flex; flex-direction: column; height: 100%; overflow: hidden; } .ai-teamwork .ai-card-back-top{ display:flex; flex-direction: column; gap: 4px; margin-bottom: 12px; flex-shrink: 0; } .ai-teamwork .ai-card-back-title{ font-weight: 700; color: #fff; font-size: 1.15rem; line-height: 1.3; margin: 0; } .ai-teamwork .ai-card-back-sub{ color: rgba(238,242,255,.7); font-weight: 500; font-size: .9rem; line-height: 1.4; margin: 0; } .ai-teamwork .ai-card-bio{ margin: 0 0 14px 0; color: rgba(238,242,255,.75); line-height: 1.65; font-size: .87rem; flex-shrink: 0; } .ai-teamwork .ai-skill-list{ list-style:none; padding:0; margin: 0 0 14px 0; display:grid; gap: 8px; flex: 1; min-height: 0; overflow: hidden; } .ai-teamwork .ai-skill-item{ border-radius: 10px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.04); padding: 10px 12px; flex-shrink: 0; } .ai-teamwork .ai-skill-item strong{ display:block; font-weight: 600; color: rgba(238,242,255,.95); margin-bottom: 4px; font-size: .88rem; line-height: 1.3; } .ai-teamwork .ai-skill-item span{ color: rgba(238,242,255,.7); font-size: .83rem; line-height: 1.5; display: block; } .ai-teamwork .ai-card-close{ margin-top: auto; width: 100%; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.05); color: rgba(238,242,255,.9); border-radius: 10px; padding: 10px 14px; font-weight: 600; font-size: .88rem; cursor: pointer; transition: all 200ms ease; flex-shrink: 0; } .ai-teamwork .ai-card-close:hover{ transform: translateY(-1px); background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); color: #fff; }   .ai-teamwork .ai-card:hover .ai-card-front, .ai-teamwork .ai-card.is-active .ai-card-front{ transform: rotateY(180deg); opacity: 0; } .ai-teamwork .ai-card:hover .ai-card-back, .ai-teamwork .ai-card.is-active .ai-card-back{ transform: rotateY(0deg); opacity: 1; }   .ai-teamwork .ai-card:focus-visible .ai-card-face{ box-shadow: 0 0 0 3px rgba(59,130,246,.35); }   @media (max-width: 1200px){ .ai-teamwork .ai-card{ min-height: 440px; height: 440px; } .ai-teamwork .ai-card-photo img{ max-height: 280px; border-radius: 20px; border-width: 2px; } .ai-teamwork .ai-card-meta{ padding: 24px 24px 20px; } } @media (max-width: 900px){ .ai-teamwork .ai-teamwork-mini{ padding-top: 48px; } .ai-teamwork .ai-card{ min-height: 420px; height: 420px; } .ai-teamwork .ai-card-photo{ padding: 0 20px 20px; } .ai-teamwork .ai-card-photo img{ max-height: 240px; border-radius: 18px; border-width: 1.5px; } .ai-teamwork .ai-card-meta{ padding: 24px 24px 20px; } .ai-teamwork .ai-card-back{ padding: 16px; } .ai-teamwork .ai-card-back-title{ font-size: 1.05rem; } .ai-teamwork .ai-card-back-sub{ font-size: .85rem; } .ai-teamwork .ai-card-bio{ font-size: .83rem; margin-bottom: 10px; } .ai-teamwork .ai-skill-list{ gap: 7px; margin-bottom: 12px; } .ai-teamwork .ai-skill-item{ padding: 9px 11px; } .ai-teamwork .ai-skill-item strong{ font-size: .85rem; } .ai-teamwork .ai-skill-item span{ font-size: .8rem; } } @media (max-width: 640px){ .ai-teamwork .ai-cards-grid{ gap: 18px; padding: 0 4px; } .ai-teamwork .ai-card{ min-height: 400px; height: 400px; } .ai-teamwork .ai-card-photo{ padding: 0 16px 16px; } .ai-teamwork .ai-card-photo img{ max-height: 220px; border-radius: 16px; border-width: 1.5px; } .ai-teamwork .ai-card-meta{ padding: 20px 20px 16px; } .ai-teamwork .ai-card-name{ font-size: 1.1rem; } .ai-teamwork .ai-card-back{ padding: 14px; } .ai-teamwork .ai-card-back-title{ font-size: 1rem; } .ai-teamwork .ai-card-back-sub{ font-size: .83rem; } .ai-teamwork .ai-card-back-top{ margin-bottom: 10px; } .ai-teamwork .ai-card-bio{ font-size: .81rem; margin-bottom: 10px; line-height: 1.6; } .ai-teamwork .ai-skill-list{ gap: 6px; margin-bottom: 10px; } .ai-teamwork .ai-skill-item{ padding: 8px 10px; } .ai-teamwork .ai-skill-item strong{ font-size: .83rem; margin-bottom: 3px; } .ai-teamwork .ai-skill-item span{ font-size: .78rem; line-height: 1.4; } .ai-teamwork .ai-card-close{ padding: 9px 12px; font-size: .85rem; } } @media (max-width: 520px){ .ai-teamwork .ai-cards-grid{ gap: 16px; padding: 0 2px; } .ai-teamwork .ai-card{ min-height: 380px; height: 380px; } .ai-teamwork .ai-card-photo{ padding: 0 12px 12px; } .ai-teamwork .ai-card-photo img{ max-height: 200px; border-radius: 14px; border-width: 1px; } .ai-teamwork .ai-card-meta{ padding: 18px 18px 14px; } .ai-teamwork .ai-card-name{ font-size: 1.05rem; } .ai-teamwork .ai-card-role{ font-size: .88rem; } .ai-teamwork .ai-card-back{ padding: 12px; } .ai-teamwork .ai-card-back-title{ font-size: .95rem; } .ai-teamwork .ai-card-back-sub{ font-size: .8rem; } .ai-teamwork .ai-card-back-top{ margin-bottom: 8px; gap: 3px; } .ai-teamwork .ai-card-bio{ font-size: .79rem; margin-bottom: 8px; line-height: 1.55; } .ai-teamwork .ai-skill-list{ gap: 5px; margin-bottom: 8px; } .ai-teamwork .ai-skill-item{ padding: 7px 9px; } .ai-teamwork .ai-skill-item strong{ font-size: .81rem; margin-bottom: 2px; } .ai-teamwork .ai-skill-item span{ font-size: .76rem; line-height: 1.4; } .ai-teamwork .ai-card-close{ padding: 8px 10px; font-size: .83rem; } } @media (prefers-reduced-motion: reduce){ .ai-teamwork .ai-card, .ai-teamwork .ai-card-face, .ai-teamwork .ai-card-close{ transition: none !important; } .ai-teamwork .ai-card:hover{ transform: none !important; } }   .ai-teamwork .ai-chat-preview{ background: rgba(255,255,255,.92); border-radius: 18px; border: 1px solid rgba(255,255,255,.60); padding: 14px; display: flex; flex-direction: column; gap: 12px; max-width: 100%; backdrop-filter: blur(14px); box-shadow: 0 18px 55px rgba(0,0,0,.28); }   .ai-teamwork .ai-chat-message{ display: flex; align-items: flex-start; gap: 10px; }   .ai-teamwork .ai-chat-preview.ai-chat-animated .ai-chat-message{ opacity: 0; transform: translateY(20px) scale(.98); filter: blur(2px); will-change: transform, opacity, filter; } .ai-teamwork .ai-chat-preview.ai-chat-animated.is-playing .ai-chat-message{ animation: ai-chat-message-in 620ms cubic-bezier(.22,.92,.33,1) forwards; animation-delay: calc((var(--chat-order, 0) * 0.45s) + 0.15s); }   .ai-teamwork .ai-chat-user{ justify-content: flex-end; } .ai-teamwork .ai-chat-user .ai-chat-bubble{ background: linear-gradient(135deg, #2563eb, #1d4ed8); color: #ffffff; border-radius: 14px 14px 4px 14px; }   .ai-teamwork .ai-chat-ai{ justify-content: flex-start; } .ai-teamwork .ai-chat-avatar{ width: 38px; height: 38px; border-radius: 999px; object-fit: cover; flex-shrink: 0; border: 2px solid rgba(255,255,255,.8); box-shadow: 0 10px 24px rgba(0,0,0,.16); }   .ai-teamwork .ai-chat-bubble{ background: #f3f4f6; color: #111827; padding: 10px 12px; border-radius: 14px 14px 14px 4px; font-size: .9rem; line-height: 1.8; max-width: 100%; } .ai-teamwork .ai-chat-bubble strong{ font-weight: 900; } @keyframes ai-chat-message-in{ 0%{ opacity: 0; transform: translateY(24px) scale(.98); filter: blur(2px); } 62%{ opacity: 1; transform: translateY(-3px) scale(1); filter: blur(0); } 100%{ opacity: 1; transform: translateY(0) scale(1); filter: blur(0); } }   @media (max-width: 900px){ .ai-teamwork .ai-chat-preview{ max-width: 100%; } } @media (prefers-reduced-motion: reduce){ .ai-teamwork .ai-chat-preview.ai-chat-animated .ai-chat-message{ animation: none !important; opacity: 1 !important; transform: none !important; filter: none !important; } }   .faq-tabs{ display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 36px auto 28px; padding: 0px; max-width: 980px; border-radius: 50px; overflow: hidden; background: #ffffff; border: 1px solid rgba(15, 23, 42, 0.08); } @media (min-width: 640px) { .faq-tabs{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 900px) { .faq-tabs{ grid-template-columns: repeat(4, minmax(0, 1fr)); } }   .faq-tab{ appearance: none; border: none; background: transparent; padding: 14px 8px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 0; font-weight: 800; color: #64748b; transition: all 0.25s ease; position: relative; min-height: 72px; border-radius: 50px; }   .faq-tab-icon{ display: none;   }   .faq-tab svg{ width: 20px; height: 20px; } .faq-tab-label{ font-size: 0.95rem; }   .faq-tab.is-active{ background: linear-gradient(135deg, var(--secondary-color), var(--primary-color)); color: #ffffff; } .faq-tab.is-active::after{ content: none;   }   .faq-tab:hover:not(.is-active){ background: rgba(15, 23, 42, 0.04); color: #334155; }   .faq-tab.is-active:hover{ transform: scale(1.02); }   @media (max-width: 640px){ .faq-tabs{ display: flex; flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scroll-behavior: smooth; scrollbar-width: none;   padding: 4px 8px; margin: 24px 0 20px; border-radius: 16px; max-width: 100%; width: 100%; } .faq-tabs::-webkit-scrollbar{ display: none;   height: 0; width: 0; } .faq-tab{ min-width: 130px; flex: 0 0 auto; padding: 10px 16px; min-height: 44px; font-size: 0.8rem; white-space: nowrap; font-weight: 700; } .faq-tab-label{ font-size: 0.8rem; }   .faq-tabs::after { content: ''; flex: 0 0 8px; } }   .faq-item.is-hidden{ display: none !important; }     @media (min-width: 768px) and (max-width: 1024px) { .fx-showcase { padding: 3rem 0; } .fx-head { margin-bottom: 2.5rem; padding: 0 1.5rem; } .fx-title { font-size: clamp(2rem, 2.5vw, 2.5rem); } .fx-subtitle { font-size: 0.95rem; padding: 0 1.5rem; } .fx-stage { flex-direction: row; gap: 20px; align-items: flex-start; } .fx-preview { width: 65%; height: 500px; min-height: 500px; filter: blur(2px); } .fx-preview-img { min-height: 480px; } .fx-card { display: block !important; position: relative; width: 35%; margin-top: 0; left: auto; top: auto; transform: none; } .fx-content { padding: 20px 18px; } .fx-card-title { font-size: 1.1rem; margin-bottom: 14px; } .fx-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } .fx-item { padding: 14px 10px; gap: 8px; } .fx-item-icon { padding: 12px; } .fx-item-icon svg { width: 18px; height: 18px; } .fx-item-name { font-size: 0.75rem; } .fx-cta-wrapper { flex-direction: column; gap: 10px; } .fx-cta { width: 100%; padding: 12px 18px; font-size: 0.9rem; } }   @media (min-width: 768px) and (max-width: 1024px) { .about.about-tabs { padding: 48px 0 64px; } .about-tabs-bar { margin: 40px auto 32px; padding: 0 1rem; gap: 6px; } .about-tab-pill { font-size: 0.85rem; padding: 10px 20px; } .about-tabs-panels { padding: 0 1rem; } .about-features-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; } .about-feature { padding: 20px; } .about-feature-icon { width: 48px; height: 48px; } .about-feature-title { font-size: 1.1rem; } .about-feature-description { font-size: 0.9rem; } }   @media (min-width: 768px) and (max-width: 1024px) { .ai-section { padding: 2.5rem 0; } .ai-section .section-header { margin-bottom: 2rem; padding: 0 1rem; } .section-title { font-size: clamp(1.8rem, 3vw, 2.2rem); } .ai-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } .ai-card { padding: 18px; } .ai-card-title { font-size: 1.05rem; margin-bottom: 10px; } .ai-card-desc { font-size: 0.9rem; } .ai-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .ai-teamwork .ai-cards-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } .ai-teamwork .ai-card { min-height: 420px; height: 420px; } .ai-teamwork .ai-card-photo { padding: 0 20px 20px; } .ai-teamwork .ai-card-photo img { max-height: 260px; } .ai-teamwork .ai-card-meta { padding: 22px 22px 18px; } .ai-teamwork .ai-card-name { font-size: 1.15rem; } .ai-teamwork .ai-card-back { padding: 18px; } }   .iphone-mockup { position: absolute; left: -80px; top: 50%; transform: translateY(-50%); display: none; } @media (min-width: 992px) { .iphone-mockup { display: block; } } .iphone-frame { position: relative; width: 260px; height: 530px; background: linear-gradient(135deg, #2d2d2f 0%, #1c1c1e 20%, #2d2d2f 40%, #1c1c1e 60%, #2d2d2f 80%, #1c1c1e 100%); border-radius: 52px; padding: 10px; box-shadow:   0 0 0 1px #4a4a4c, 0 0 0 3px #1c1c1e,   inset 0 1px 1px rgba(255, 255, 255, 0.1), inset 0 -1px 1px rgba(0, 0, 0, 0.3),   0 30px 60px rgba(0, 0, 0, 0.4), 0 15px 25px rgba(0, 0, 0, 0.3), 0 5px 10px rgba(0, 0, 0, 0.2); }   .iphone-button-silent { position: absolute; right: -2px; top: 100px; width: 3px; height: 26px; background: linear-gradient(180deg, #3a3a3c 0%, #2c2c2e 50%, #3a3a3c 100%); border-radius: 2px 0 0 2px; box-shadow: inset 1px 0 1px rgba(255, 255, 255, 0.08); }   .iphone-button-volume-up { position: absolute; right: -2px; top: 145px; width: 3px; height: 45px; background: linear-gradient(180deg, #3a3a3c 0%, #2c2c2e 50%, #3a3a3c 100%); border-radius: 2px 0 0 2px; box-shadow: inset 1px 0 1px rgba(255, 255, 255, 0.08); }   .iphone-button-volume-down { position: absolute; right: -2px; top: 200px; width: 3px; height: 45px; background: linear-gradient(180deg, #3a3a3c 0%, #2c2c2e 50%, #3a3a3c 100%); border-radius: 2px 0 0 2px; box-shadow: inset 1px 0 1px rgba(255, 255, 255, 0.08); }   .iphone-button-power { position: absolute; left: -2px; top: 160px; width: 3px; height: 65px; background: linear-gradient(180deg, #3a3a3c 0%, #2c2c2e 50%, #3a3a3c 100%); border-radius: 0 2px 2px 0; box-shadow: inset -1px 0 1px rgba(255, 255, 255, 0.08); }   .iphone-screen { position: relative; width: 100%; height: 100%; background: linear-gradient(180deg, #f5f5f7 0%, #ffffff 100%); border-radius: 44px; overflow: hidden; display: flex; flex-direction: column; }   .iphone-dynamic-island { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); width: 97px; height: 29px; background: #000000; border-radius: 18px; z-index: 100; display: flex; align-items: center; justify-content: flex-end; padding: 0 12px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 2px 8px rgba(0, 0, 0, 0.3); }   .dynamic-island-camera { width: 10px; height: 10px; background: radial-gradient(circle at 35% 35%, #1a1a2e 0%, #0d0d1a 40%, #000005 70%, #0a0a15 100%); border-radius: 50%; position: relative; box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.15), 0 0 0 1.5px #1a1a2a, 0 0 3px rgba(0, 0, 0, 0.5); }   .dynamic-island-camera::before { content: ''; position: absolute; top: 2px; left: 2px; width: 3px; height: 3px; background: radial-gradient(circle, rgba(100, 100, 180, 0.4) 0%, transparent 70%); border-radius: 50%; }   .iphone-dynamic-island::before { content: ''; position: absolute; left: 12px; width: 6px; height: 6px; background: radial-gradient(circle, #1a1a2e 0%, #0a0a15 100%); border-radius: 50%; box-shadow: inset 0 0 2px rgba(255, 255, 255, 0.1); }   .iphone-status-bar { display: flex; justify-content: space-between; align-items: center; padding: 14px 24px 8px; font-size: 14px; font-weight: 600; color: #000; z-index: 50; } .status-bar-left { display: flex; align-items: center; } .status-time { font-weight: 700; font-size: 15px; } .status-bar-right { display: flex; align-items: center; gap: 6px; } .status-icon { width: 18px; height: 18px; opacity: 0.9; } .status-battery { width: 21px; height: 12px; border: 2px solid #000; border-radius: 3px; position: relative; margin-left: 2px; } .status-battery::after { content: ''; position: absolute; right: -5px; top: 50%; transform: translateY(-50%); width: 2px; height: 5px; background: #000; border-radius: 0 1px 1px 0; } .battery-level { position: absolute; top: 1px; left: 1px; right: 1px; bottom: 1px; background: #bfc3c0; border-radius: 1px; width: calc(100% - 2px); }   .iphone-content { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 5px; padding-top: 3px; scrollbar-width: none; -ms-overflow-style: none; } .iphone-content::-webkit-scrollbar { display: none; }   .iphone-home-indicator { width: 100px; height: 4px; background: #000; border-radius: 100px; margin: 6px auto 10px; opacity: 0.25; }   .fx-card-in-phone { position: relative !important; left: auto !important; top: auto !important; transform: none !important; width: 100% !important; margin: 0 !important; padding: 8px !important; border-radius: 16px !important; background: transparent !important; border: none !important; backdrop-filter: none !important; } .fx-card-in-phone .fx-content { background: rgba(255, 255, 255, 0.98) !important; padding: 12px !important; border-radius: 14px !important; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); } .fx-card-in-phone .fx-card-title { font-size: 0.8rem !important; margin-bottom: 8px !important; text-align: center; } .fx-card-in-phone .fx-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 5px !important; } .fx-card-in-phone .fx-item { padding: 6px 3px !important; border-radius: 10px !important; background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(168, 85, 247, 0.1) 100%) !important; border: 1px solid rgba(99, 102, 241, 0.2) !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important; } .fx-card-in-phone .fx-item:hover { background: linear-gradient(135deg, rgba(99, 102, 241, 0.2) 0%, rgba(168, 85, 247, 0.2) 100%) !important; transform: translateY(-2px) !important; } .fx-card-in-phone .fx-item-icon { width: 27px !important; height: 26px !important; } .fx-card-in-phone .fx-item-icon svg { width: 16px !important; height: 16px !important; stroke: #ffff !important; } .fx-card-in-phone .fx-item-name { font-size: 0.58rem !important; color: #374151 !important; line-height: 1.2 !important; } .fx-card-in-phone .fx-cta-wrapper { margin-top: 10px !important; gap: 6px !important; flex-direction: column !important; } .fx-card-in-phone .fx-cta { padding: 8px 12px !important; font-size: 0.7rem !important; border-radius: 10px !important; width: 100% !important; text-align: center !important; }   @media (min-width: 992px) and (max-width: 1200px) { .iphone-mockup { left: -60px; transform: translateY(-50%) scale(0.85); } } @media (min-width: 1201px) and (max-width: 1400px) { .iphone-mockup { left: -70px; transform: translateY(-50%) scale(0.92); } } @media (min-width: 1401px) { .iphone-mockup { left: -80px; transform: translateY(-50%); } } @media (min-width: 1600px) { .iphone-mockup { left: -90px; transform: translateY(-50%); } }   @media (min-width: 992px) { .fx-stage > .fx-card:not(.fx-card-in-phone) { display: none; } }   @media (max-width: 991px) { .iphone-mockup { display: none !important; } .fx-preview { display: none !important; } }   .fx-card-mobile { display: none; } @media (max-width: 991px) { .fx-card-mobile { display: flex !important; flex-direction: column; align-items: center; justify-content: center; width: 100% !important; max-width: 100% !important; margin: 0 auto !important; padding: 0 !important; position: relative !important; left: auto !important; right: auto !important; top: auto !important; transform: none !important; border: none !important; backdrop-filter: none !important; background: transparent !important; border-radius: 0 !important; } .fx-card-mobile .fx-content { background: transparent !important; padding: 0 !important; width: 100%; max-width: 100%; display: flex; flex-direction: column; align-items: center; border-radius: 0; }   .fx-mobile-slider { width: 100%; padding: 0 0 24px; overflow: hidden; display: flex; justify-content: center; } .fx-screenshots-swiper { --fx-slide-width: min(86vw, 290px); width: 100%; padding-bottom: 50px; overflow: visible; } .fx-screenshots-swiper .swiper-wrapper { align-items: center; display: flex; padding: 10px 0; }   .fx-screenshots-swiper:not(.swiper-initialized) .swiper-wrapper { transform: translateX(calc((var(--fx-slide-width) - 100%) / 2)); } .fx-screenshot-slide { width: var(--fx-slide-width) !important; flex-shrink: 0; height: auto; opacity: 0.45; transform: scale(0.86) translateY(8px); transition: all 0.45s cubic-bezier(0.34, 1.56, 0.64, 1); display: flex; justify-content: center; filter: blur(1px); } .fx-screenshot-card { width: 100%; margin: 0 auto; } .fx-screenshot-slide.swiper-slide-active { opacity: 1; transform: scale(1) translateY(0); z-index: 2; filter: blur(0); } .fx-screenshot-slide.swiper-slide-prev, .fx-screenshot-slide.swiper-slide-next { opacity: 0.55; transform: scale(0.88) translateY(6px); z-index: 1; filter: blur(0.5px); }   .fx-screenshot-card { background: linear-gradient(145deg, rgba(255, 255, 255, 0.98) 0%, rgba(250, 252, 255, 1) 100%); border-radius: 22px; overflow: hidden; box-shadow: 0 12px 45px rgba(0, 0, 0, 0.14), 0 5px 15px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9); border: 1.5px solid rgba(255, 255, 255, 0.95); transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); position: relative; } .fx-screenshot-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(135deg, rgba(40, 171, 136, 0.03) 0%, rgba(13, 148, 136, 0.02) 100%); opacity: 0; transition: opacity 0.35s ease; pointer-events: none; z-index: 0; } .swiper-slide-active .fx-screenshot-card { box-shadow: 0 25px 70px rgba(0, 0, 0, 0.22), 0 10px 30px rgba(0, 0, 0, 0.14), inset 0 1px 0 rgba(255, 255, 255, 1); border-color: rgba(40, 171, 136, 0.3); } .swiper-slide-active .fx-screenshot-card::before { opacity: 1; }   .fx-screenshot-image-wrapper { position: relative; width: 100%; aspect-ratio: 16/10; overflow: hidden; background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%); } .fx-screenshot-img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); position: relative; z-index: 1; } .swiper-slide-active .fx-screenshot-img { transform: scale(1.03); }   .fx-screenshot-info { padding: 20px 22px; text-align: center; position: relative; z-index: 1; background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(250, 252, 255, 0.5) 100%); } .fx-screenshot-title { font-size: 1.05rem; font-weight: 700; color: #1e293b; margin: 0 0 9px; line-height: 1.45; transition: color 0.3s ease; } .swiper-slide-active .fx-screenshot-title { color: #0f172a; } .fx-screenshot-desc { font-size: 0.85rem; color: #64748b; margin: 0; line-height: 1.65; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; transition: color 0.3s ease; } .swiper-slide-active .fx-screenshot-desc { color: #475569; }   .fx-screenshots-pagination { bottom: 0 !important; display: flex; justify-content: center; gap: 10px; padding: 8px 0; } .fx-screenshots-pagination .swiper-pagination-bullet { width: 9px; height: 9px; background: rgba(255, 255, 255, 0.45); opacity: 1; border-radius: 50%; transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); } .fx-screenshots-pagination .swiper-pagination-bullet-active { width: 28px; border-radius: 5px; background: linear-gradient(90deg, #28ab88 0%, #0d9488 100%); box-shadow: 0 3px 10px rgba(40, 171, 136, 0.4); }   .fx-card-mobile .fx-cta-wrapper { display: flex; gap: 14px; padding: 0 20px; margin-top: 12px; width: 100%; max-width: 340px; justify-content: center; } .fx-card-mobile .fx-cta { flex: 1; padding: 15px 22px; font-size: 0.95rem; font-weight: 700; border-radius: 15px; text-align: center; text-decoration: none; transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); position: relative; overflow: hidden; } .fx-card-mobile .fx-cta::before { content: ''; position: absolute; top: 50%; left: 50%; width: 0; height: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.2); transform: translate(-50%, -50%); transition: width 0.6s, height 0.6s; } .fx-card-mobile .fx-cta:active::before { width: 300px; height: 300px; } .fx-card-mobile .fx-cta:not(.fx-cta-register) { background: rgba(255, 255, 255, 0.18); color: #fff; border: 1.5px solid rgba(255, 255, 255, 0.3); backdrop-filter: blur(12px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); } .fx-card-mobile .fx-cta:not(.fx-cta-register):hover { background: rgba(255, 255, 255, 0.25); border-color: rgba(255, 255, 255, 0.4); transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15); } .fx-card-mobile .fx-cta.fx-cta-register { background: linear-gradient(135deg, #28ab88 0%, #0d9488 100%); color: #fff; border: none; box-shadow: 0 6px 20px rgba(40, 171, 136, 0.4); } .fx-card-mobile .fx-cta.fx-cta-register:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(40, 171, 136, 0.5); } .fx-card-mobile .fx-cta:active { transform: scale(0.96) translateY(0); } }   @media (min-width: 600px) and (max-width: 991px) { .fx-screenshots-swiper { --fx-slide-width: min(72vw, 380px); } .fx-screenshot-card { border-radius: 26px; } .fx-screenshot-info { padding: 24px 26px; } .fx-screenshot-title { font-size: 1.2rem; margin-bottom: 10px; } .fx-screenshot-desc { font-size: 0.92rem; line-height: 1.7; } .fx-card-mobile .fx-cta-wrapper { padding: 0 28px; gap: 18px; max-width: 440px; margin-top: 16px; } .fx-card-mobile .fx-cta { padding: 17px 26px; font-size: 1.05rem; border-radius: 17px; } .fx-screenshots-swiper { padding-bottom: 55px; } .fx-screenshots-pagination .swiper-pagination-bullet { width: 10px; height: 10px; } .fx-screenshots-pagination .swiper-pagination-bullet-active { width: 32px; } }   @media (max-width: 480px) { .fx-screenshots-swiper { --fx-slide-width: min(82vw, 270px); } .fx-mobile-slider { padding: 0 0 20px; } .fx-card-mobile .fx-cta-wrapper { flex-direction: column; gap: 11px; padding: 0 16px; max-width: 290px; } .fx-screenshot-card { border-radius: 18px; } .fx-screenshot-info { padding: 16px 18px; } .fx-screenshot-title { font-size: 0.95rem; margin-bottom: 7px; } .fx-screenshot-desc { font-size: 0.8rem; line-height: 1.6; } .fx-card-mobile .fx-cta { padding: 14px 20px; font-size: 0.88rem; border-radius: 13px; } .fx-screenshots-pagination .swiper-pagination-bullet { width: 8px; height: 8px; } .fx-screenshots-pagination .swiper-pagination-bullet-active { width: 26px; } }   @media (max-width: 360px) { .fx-screenshots-swiper { --fx-slide-width: min(84vw, 250px); } .fx-card-mobile .fx-cta-wrapper { max-width: 270px; gap: 10px; padding: 0 12px; } .fx-screenshot-info { padding: 14px 16px; } .fx-screenshot-title { font-size: 0.88rem; margin-bottom: 6px; } .fx-screenshot-desc { font-size: 0.75rem; -webkit-line-clamp: 2; line-height: 1.55; } .fx-card-mobile .fx-cta { padding: 13px 18px; font-size: 0.82rem; border-radius: 12px; } .fx-screenshots-pagination .swiper-pagination-bullet { width: 7px; height: 7px; gap: 8px; } .fx-screenshots-pagination .swiper-pagination-bullet-active { width: 24px; } } @media (min-width: 992px) { .fx-card-mobile { display: none !important; } }