:root { --primary: #0d9488; --primary-dark: #0f766e; --primary-light: #14b8a6; --accent: #0f766e; --accent-hover: #115e59; --accent-soft: rgba(13, 148, 136, 0.12); --dark: #10211f; --dark-soft: #16302c; --dark-card: #142824; --dark-border: rgba(255, 255, 255, 0.1); --white: #ffffff; --bg: #f6faf9; --bg-alt: #eef7f5; --surface: #ffffff; --border: #d7e5e2; --border-strong: #c4d7d3; --text: #12221f; --text-secondary: #3f5652; --text-muted: #7a908c; --text-white: #ffffff; --text-white-muted: rgba(255, 255, 255, 0.78); --gradient-primary: linear-gradient(135deg, #0f766e 0%, #14b8a6 100%); --gradient-hero: linear-gradient(160deg, #ffffff 0%, #f3fbf9 48%, #e6f6f2 100%); --gradient-accent: linear-gradient(135deg, #0f766e 0%, #0d9488 100%); --gradient-dark: linear-gradient(180deg, #0f766e 0%, #10211f 100%); --font-display: 'Outfit', system-ui, -apple-system, sans-serif; --font-body: 'Manrope', system-ui, -apple-system, sans-serif; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 20px; --radius-full: 6px; --shadow-sm: 0 1px 2px rgba(24, 24, 27, 0.05); --shadow-md: 0 8px 30px rgba(13, 148, 136, 0.1); --shadow-lg: 0 20px 50px rgba(24, 24, 27, 0.1); --shadow-primary: 0 8px 24px rgba(13, 148, 136, 0.3); --shadow-accent: 0 8px 24px rgba(15, 118, 110, 0.28); --transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); --header-height: 68px; --header-height-stuck: 60px; --primary-hover: var(--primary-dark); --primary-soft: rgba(13, 148, 136, 0.1); --primary-tint: rgba(13, 148, 136, 0.06); --ink: var(--dark); --paper: var(--bg); --line: var(--border); --text-dark: var(--text); --text-primary: var(--text); --bg-dark: var(--dark); --bg-light: var(--bg); --bg-card-light: var(--surface); --border-light: var(--border); --ink-line: var(--border); --ink-muted: var(--text-muted); } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; font-size: 15.5px; } body { font-family: var(--font-body); color: var(--text); background: var(--white); line-height: 1.58; overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.035em; line-height: 1.15; color: var(--text); } p { line-height: 1.6; } button, input, select, textarea { font-family: inherit; } img { max-width: 100%; height: auto; display: block; } a { text-decoration: none; color: inherit; transition: var(--transition); } ul { list-style: none; } .container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 1.25rem; } .scroll-progress-bar { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: var(--gradient-accent); z-index: 9999; } .top-bar { background: var(--primary); color: rgba(255, 255, 255, 0.92); font-size: 0.8125rem; padding: 0.55rem 0; border-bottom: none; } .top-bar-content { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.75rem; } .top-bar-left, .top-bar-right { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; } .top-bar-item { display: flex; align-items: center; gap: 0.4rem; } .top-bar-item i { color: #fff; font-size: 0.75rem; } .top-bar-item a { color: rgba(255, 255, 255, 0.92); } .top-bar-item a:hover { color: var(--white); } .site-header { position: sticky; top: 0; z-index: 1000; background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(16px); border-bottom: 1px solid var(--border); transition: var(--transition); } .site-header.is-stuck { box-shadow: 0 4px 24px rgba(24, 24, 27, 0.08); background: rgba(255, 255, 255, 0.98); } .site-header.is-stuck .navbar { height: var(--header-height-stuck); } .navbar { display: flex; align-items: center; justify-content: space-between; height: var(--header-height); gap: 1rem; transition: height 0.3s ease; } .brand-logo img { height: 40px; width: auto; background: transparent; } .nav-menu { display: flex; align-items: center; gap: 0.25rem; } .nav-item { position: relative; } .nav-link { display: flex; align-items: center; gap: 0.35rem; padding: 0.5rem 1rem; font-weight: 600; font-size: 0.9375rem; color: var(--text-secondary); border-radius: var(--radius-sm); } .nav-link:hover, .nav-item.active .nav-link { color: var(--primary); } .dropdown-menu { position: absolute; top: 100%; left: 0; min-width: 260px; background: var(--white); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); border: 1px solid var(--border); padding: 0.5rem; opacity: 0; visibility: hidden; transform: translateY(8px); transition: var(--transition); z-index: 100; } .nav-item:hover .dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); } .dropdown-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.65rem 1rem; border-radius: var(--radius-sm); font-size: 0.875rem; color: var(--text-secondary); } .dropdown-item i { color: var(--primary); width: 18px; } .dropdown-item:hover { background: var(--primary-soft); color: var(--primary); } .header-actions { display: flex; align-items: center; gap: 0.75rem; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.75rem 1.5rem; font-family: var(--font-display); font-weight: 600; font-size: 0.9375rem; border-radius: var(--radius-full); border: 2px solid transparent; cursor: pointer; transition: var(--transition); white-space: nowrap; } .btn-primary { background: var(--primary); color: var(--white); box-shadow: var(--shadow-primary); border-radius: var(--radius-sm); } .btn-primary:hover { background: var(--primary-dark); transform: translateY(-2px); } .btn-accent { background: var(--gradient-primary); color: var(--white); box-shadow: var(--shadow-primary); border-radius: var(--radius-sm); } .btn-accent:hover { background: var(--primary-dark); transform: translateY(-2px); } .btn-outline { background: transparent; color: var(--primary); border-color: var(--primary); } .btn-outline:hover { background: var(--primary); color: var(--white); } .btn-glass { background: var(--white); color: var(--text); border: 2px solid var(--border-strong); border-radius: var(--radius-sm); } .btn-glass:hover { border-color: var(--primary); color: var(--primary); background: var(--white); } .btn-white { background: var(--white); color: var(--primary); } .btn-white:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); } .btn-dark { background: var(--dark); color: var(--white); } .btn-paper { background: var(--white); color: var(--dark); } .btn-sm { padding: 0.5rem 1.25rem; font-size: 0.875rem; } .nav-toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; padding: 0.625rem; min-width: 44px; min-height: 44px; z-index: 1200; transition: var(--transition); } .nav-toggle:hover { border-color: var(--primary); background: var(--primary-soft); } .nav-toggle span { display: block; width: 22px; height: 2px; background: var(--text); border-radius: 2px; transition: transform 0.3s ease, opacity 0.3s ease, background 0.3s ease; transform-origin: center; } .nav-toggle.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-toggle.is-active span:nth-child(2) { opacity: 0; transform: scaleX(0); } .nav-toggle.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .nav-overlay { position: fixed; inset: 0; background: rgba(24, 24, 27, 0.5); backdrop-filter: blur(4px); z-index: 1050; opacity: 0; visibility: hidden; transition: opacity 0.35s ease, visibility 0.35s ease; } .nav-overlay.is-visible { opacity: 1; visibility: visible; } body.menu-open { overflow: hidden; } .hero-slider, .hero-modern { position: relative; background: var(--gradient-hero); overflow: hidden; min-height: 580px; border-bottom: 1px solid var(--border); } .hero-modern { min-height: auto; padding: 3rem 0 3.25rem; } .hero-blob { position: absolute; border-radius: 50%; filter: blur(60px); pointer-events: none; } .hero-blob-1 { width: 420px; height: 420px; background: rgba(13, 148, 136, 0.18); top: -80px; right: -60px; } .hero-blob-2 { width: 320px; height: 320px; background: rgba(13, 148, 136, 0.12); bottom: -40px; left: -40px; } .hero-slider::before, .hero-modern::before { display: none; } .hero-slider::after { display: none; } .hero-slides { position: relative; z-index: 2; } .hero-slide { display: none; padding: 5rem 0 6rem; animation: fadeSlide 0.6s ease; } .hero-slide.is-active { display: block; } @keyframes fadeSlide { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; } .hero-badge-pill { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0.875rem; background: var(--white); border: 1px solid var(--border); border-left: 3px solid var(--primary); border-radius: var(--radius-sm); color: var(--primary-dark); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 1.5rem; box-shadow: var(--shadow-sm); } .pulse-dot { width: 8px; height: 8px; background: var(--accent); border-radius: 50%; animation: pulse 2s infinite; } .hero-title { font-family: var(--font-display); font-size: clamp(2rem, 4.2vw, 3.05rem); font-weight: 800; line-height: 1.05; color: var(--text); margin-bottom: 1rem; letter-spacing: -0.04em; } .text-gradient { background: var(--gradient-primary); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; color: var(--primary-dark); } .hero-description { font-size: 1.125rem; color: var(--text-secondary); margin-bottom: 2rem; max-width: 520px; line-height: 1.75; } .hero-cta { display: flex; flex-wrap: wrap; gap: 1rem; } .hero-media { position: relative; } .hero-frame { position: relative; border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-lg); border: 4px solid var(--white); } .hero-floating-card { position: absolute; display: flex; align-items: center; gap: 0.75rem; background: var(--white); padding: 0.875rem 1.125rem; border-radius: var(--radius-md); box-shadow: var(--shadow-lg); border: 1px solid var(--border); animation: float 4s ease-in-out infinite; } .card-top-left { top: 10%; left: -8%; } .card-bottom-right { bottom: 10%; right: -5%; animation-delay: 2s; } @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } .floating-icon { width: 44px; height: 44px; background: var(--primary-soft); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; color: var(--primary); font-size: 1.125rem; } .floating-text h5 { font-size: 1rem; font-weight: 700; color: var(--text); } .floating-text p { font-size: 0.75rem; color: var(--text-muted); } .hero-dots { display: flex; justify-content: center; gap: 0.5rem; padding-bottom: 2rem; position: relative; z-index: 3; } .hero-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--border-strong); border: none; cursor: pointer; transition: var(--transition); } .hero-dot.is-active { background: var(--primary); width: 28px; border-radius: var(--radius-sm); } .page-hero-inner { text-align: center; position: relative; z-index: 2; } .hero { position: relative; background: var(--gradient-hero); padding: 5rem 0; overflow: hidden; } .hero-mesh-bg, .hero-grid-pattern { display: none; } .page-hero { background: var(--gradient-hero); padding: 4rem 0 4.5rem; position: relative; overflow: hidden; border-bottom: 1px solid var(--border); } .page-hero .hero-blob { opacity: 0.45; pointer-events: none; } .page-hero .hero-blob-1 { top: -80px; right: -60px; } .page-hero .hero-blob-2 { bottom: -100px; left: -40px; } .page-hero::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--gradient-primary); } .page-hero .hero-title, .hero .hero-title { color: var(--text); margin-bottom: 1rem; } .page-hero .hero-description, .hero .hero-description { color: var(--text-secondary); max-width: 750px; margin: 0 auto; } .hero-img { width: 100%; aspect-ratio: 4/3; object-fit: cover; } @keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(1.2); } } .stats-section { background: var(--white); padding: 3rem 0; margin-top: 0; position: relative; z-index: 10; border-bottom: 1px solid var(--border); } .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; } .stat-card { text-align: center; padding: 1.5rem; border-right: 1px solid var(--border); } .stat-card:last-child { border-right: none; } .stat-number { font-family: var(--font-display); font-size: 2.75rem; font-weight: 800; color: var(--primary); line-height: 1; margin-bottom: 0.5rem; } .stat-label { font-size: 0.875rem; color: var(--text-secondary); font-weight: 500; } .trust-strip { background: var(--bg); padding: 1.25rem 0; border-bottom: 1px solid var(--border); overflow: hidden; } .trust-track { display: flex; gap: 3rem; align-items: center; flex-wrap: nowrap; } .trust-strip.is-marquee .trust-track { animation: marquee 30s linear infinite; width: max-content; } @keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } .trust-track span { display: flex; align-items: center; gap: 0.5rem; white-space: nowrap; font-size: 0.875rem; font-weight: 600; color: var(--text-secondary); } .trust-track i { color: var(--primary); } .section-padding { padding: 3.25rem 0; } .section-alt { background: var(--bg); } .section-header { text-align: center; max-width: 680px; margin: 0 auto 2rem; } .section-header.is-split { display: flex; justify-content: space-between; align-items: flex-end; text-align: left; max-width: none; flex-wrap: wrap; gap: 1.5rem; } .sub-title { display: inline-block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); margin-bottom: 0.75rem; } .main-title { font-family: var(--font-display); font-size: clamp(1.5rem, 3vw, 2.05rem); font-weight: 700; color: var(--text); line-height: 1.12; margin-bottom: 0.7rem; letter-spacing: -0.035em; } .section-desc { font-size: 1.0625rem; color: var(--text-secondary); line-height: 1.75; font-weight: 500; } .service-cards-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-bottom: 4rem; } .service-card-mini { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 2rem 1.5rem; text-align: center; transition: var(--transition); } .service-card-mini:hover { border-color: var(--primary); box-shadow: var(--shadow-md); transform: translateY(-4px); } .service-card-mini .icon-wrap { width: 64px; height: 64px; margin: 0 auto 1.25rem; background: var(--primary-soft); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: var(--primary); } .service-card-mini h3 { font-family: var(--font-display); font-size: 1.125rem; font-weight: 700; margin-bottom: 0.75rem; } .service-card-mini p { font-size: 0.9375rem; color: var(--text-secondary); } .bento-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } .bento-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 2rem; transition: var(--transition); position: relative; overflow: hidden; } .bento-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--gradient-primary); transform: scaleX(0); transition: var(--transition); } .bento-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); border-color: transparent; } .bento-card:hover::before { transform: scaleX(1); } .bento-icon-box { width: 56px; height: 56px; background: var(--primary); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; color: var(--white); font-size: 1.375rem; margin-bottom: 1.25rem; } .bento-card h3 { font-family: var(--font-display); font-size: 1.125rem; font-weight: 700; margin-bottom: 0.75rem; } .bento-card p { font-size: 0.9375rem; color: var(--text-secondary); margin-bottom: 0; } .service-tabs-section { background: var(--primary-dark); padding: 5rem 0; color: var(--white); } .service-tabs-section .main-title { color: var(--white); } .service-tabs-section .sub-title { color: #99f6e4; } .service-tabs-section .section-desc { color: var(--text-white-muted); } .tab-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin-bottom: 2.5rem; } .tab-btn { padding: 0.65rem 1.25rem; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--radius-full); color: var(--text-white-muted); font-weight: 600; font-size: 0.8125rem; letter-spacing: 0.04em; cursor: pointer; transition: var(--transition); } .tab-btn:hover { background: rgba(255, 255, 255, 0.1); color: var(--white); } .tab-btn.is-active { background: var(--gradient-accent); border-color: transparent; color: var(--white); } .tab-panel { display: none; animation: fadeSlide 0.4s ease; } .tab-panel.is-active { display: block; } .tab-content-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; } .tab-content-grid h3 { font-family: var(--font-display); font-size: 1.75rem; font-weight: 700; margin-bottom: 1.5rem; } .tab-feature-list li { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.65rem 0; font-size: 0.9375rem; color: var(--text-white-muted); border-bottom: 1px solid var(--dark-border); } .tab-feature-list li i { color: var(--primary-light); margin-top: 0.2rem; } .tab-visual { background: rgba(255, 255, 255, 0.05); border: 1px solid var(--dark-border); border-radius: var(--radius-lg); padding: 2rem; text-align: center; } .tab-visual .big-stat { font-family: var(--font-display); font-size: 4rem; font-weight: 800; background: var(--gradient-accent); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .tab-visual p { color: var(--text-white-muted); margin-top: 0.5rem; } .dark-spotlight { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; background: var(--gradient-dark); border-radius: var(--radius-xl); padding: 3rem; color: var(--white); } .spotlight-text h2 { font-family: var(--font-display); font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 700; margin-bottom: 1rem; color: var(--white); } .dark-spotlight .sub-title { color: #99f6e4; } .spotlight-text p { color: var(--text-white-muted); margin-bottom: 1.5rem; line-height: 1.7; } .spotlight-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-bottom: 2rem; } .spotlight-item { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; color: var(--text-white-muted); } .spotlight-item i { color: var(--primary-light); } .dark-spotlight img { border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); } .process-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; } .process-step { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 2rem 1.5rem; text-align: center; position: relative; transition: var(--transition); } .process-step:hover { box-shadow: var(--shadow-md); border-color: var(--primary); transform: translateY(-4px); } .process-num { display: inline-block; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.1em; color: var(--accent); margin-bottom: 1rem; } .process-step h4 { font-family: var(--font-display); font-size: 1.0625rem; font-weight: 700; margin-bottom: 0.75rem; } .process-step p { font-size: 0.875rem; color: var(--text-secondary); } .pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; align-items: stretch; } .pricing-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 2.5rem 2rem; text-align: center; transition: var(--transition); position: relative; } .pricing-card.featured { background: var(--primary); border-color: transparent; color: var(--white); transform: scale(1.03); box-shadow: var(--shadow-primary); } .pricing-card.featured .pricing-features li, .pricing-card.featured .pricing-desc { color: rgba(255, 255, 255, 0.85); } .pricing-badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--white); color: var(--primary-dark); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.08em; padding: 0.35rem 1rem; border-radius: var(--radius-full); box-shadow: var(--shadow-sm); } .pricing-card h3 { font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; margin-bottom: 0.5rem; } .pricing-price { font-family: var(--font-display); font-size: 2.75rem; font-weight: 800; margin: 1rem 0; } .pricing-price span { font-size: 1rem; font-weight: 500; opacity: 0.7; } .pricing-quote { font-size: 1.125rem; font-weight: 700; color: var(--primary); margin-bottom: 0.75rem; } .pricing-desc { font-size: 0.875rem; color: var(--text-secondary); margin-bottom: 1.5rem; } .pricing-features { text-align: left; margin-bottom: 2rem; } .pricing-features li { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0; font-size: 0.875rem; color: var(--text-secondary); border-bottom: 1px solid var(--border); } .pricing-card.featured .pricing-features li { border-color: rgba(255, 255, 255, 0.15); } .pricing-features li i { color: var(--primary); font-size: 0.75rem; } .pricing-card.featured .pricing-features li i { color: #fff; } .comparison-section { background: var(--bg); } .comparison-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; } .comp-card { background: var(--white); border-radius: var(--radius-lg); padding: 2rem; border: 1px solid var(--border); } .comp-before { border-left: 4px solid #ef4444; } .comp-after { border-left: 4px solid #22c55e; box-shadow: var(--shadow-md); } .comp-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; } .comp-header h3 { font-family: var(--font-display); font-size: 1.125rem; font-weight: 700; } .tag-pill { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.08em; padding: 0.25rem 0.75rem; border-radius: var(--radius-full); background: var(--bg); } .comp-list li { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.65rem 0; font-size: 0.9375rem; color: var(--text-secondary); } .comp-before .comp-list i { color: #ef4444; } .comp-after .comp-list i { color: #22c55e; } .portfolio-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } .portfolio-card { background: var(--white); border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border); transition: var(--transition); } .portfolio-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); } .portfolio-img-box { position: relative; overflow: hidden; } .portfolio-img-box img { width: 100%; aspect-ratio: 16/10; object-fit: cover; transition: transform 0.5s ease; } .portfolio-card:hover .portfolio-img-box img { transform: scale(1.05); } .portfolio-badge { position: absolute; top: 1rem; left: 1rem; background: var(--gradient-primary); color: var(--white); font-size: 0.6875rem; font-weight: 700; padding: 0.35rem 0.75rem; border-radius: var(--radius-full); } .portfolio-content { padding: 1.5rem; } .portfolio-content h4 { font-family: var(--font-display); font-size: 1.0625rem; font-weight: 700; margin-bottom: 0.5rem; } .portfolio-content p { font-size: 0.875rem; color: var(--text-secondary); margin-bottom: 1rem; } .portfolio-metric { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.8125rem; font-weight: 600; color: var(--accent); } .testimonial-slider-wrap { position: relative; overflow: hidden; } .testimonial-track { display: flex; transition: transform 0.5s ease; } .testimonial-slide { min-width: 100%; padding: 0 0.5rem; } .testimonial-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } .testimonial-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 2rem; transition: var(--transition); } .testimonial-card:hover { box-shadow: var(--shadow-md); } .testimonial-stars { color: #fbbf24; font-size: 0.875rem; margin-bottom: 1rem; } .testimonial-quote { font-size: 0.9375rem; color: var(--text-secondary); line-height: 1.7; margin-bottom: 1.5rem; font-style: italic; } .testimonial-author { display: flex; align-items: center; gap: 1rem; } .testimonial-avatar { width: 48px; height: 48px; background: var(--gradient-primary); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--white); font-weight: 700; font-size: 0.875rem; } .testimonial-author h5 { font-size: 0.9375rem; font-weight: 700; } .testimonial-author span { font-size: 0.8125rem; color: var(--text-muted); } .slider-controls { display: flex; justify-content: center; gap: 0.75rem; margin-top: 2rem; } .slider-btn { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--border); background: var(--white); color: var(--text); cursor: pointer; transition: var(--transition); display: flex; align-items: center; justify-content: center; } .slider-btn:hover { background: var(--primary); color: var(--white); border-color: var(--primary); } .faq-search-box { position: relative; max-width: 480px; margin: 0 auto 2rem; } .faq-search-box i { position: absolute; left: 1.25rem; top: 50%; transform: translateY(-50%); color: var(--text-muted); } .faq-search-box input { width: 100%; padding: 1rem 1rem 1rem 3rem; border: 1px solid var(--border); border-radius: var(--radius-full); font-size: 0.9375rem; transition: var(--transition); } .faq-search-box input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); } .faq-accordion { max-width: 800px; margin: 0 auto; } .faq-item { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-md); margin-bottom: 0.75rem; overflow: hidden; transition: var(--transition); } .faq-item.active { border-color: var(--primary); box-shadow: var(--shadow-sm); } .faq-header { display: flex; justify-content: space-between; align-items: center; padding: 1.25rem 1.5rem; font-weight: 600; cursor: pointer; font-size: 0.9375rem; } .faq-header i { color: var(--primary); transition: transform 0.3s; } .faq-item.active .faq-header i { transform: rotate(180deg); } .faq-body { max-height: 0; overflow: hidden; transition: max-height 0.35s ease; padding: 0 1.5rem; font-size: 0.9375rem; color: var(--text-secondary); line-height: 1.7; } .faq-item.active .faq-body { max-height: 300px; padding-bottom: 1.25rem; } .newsletter-section { background: var(--primary); padding: 4rem 0; position: relative; overflow: hidden; } .newsletter-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: center; } .newsletter-inner h2 { font-family: var(--font-display); font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 700; color: var(--white); margin-bottom: 0.75rem; } .newsletter-inner p { color: rgba(255, 255, 255, 0.85); } .newsletter-form { display: flex; gap: 0.75rem; } .newsletter-form input { flex: 1; padding: 0.875rem 1.25rem; border: none; border-radius: var(--radius-full); font-size: 0.9375rem; } .newsletter-form input:focus { outline: none; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3); } .cta-band { background: var(--gradient-dark); padding: 4rem 0; } .cta-band-inner { display: flex; justify-content: space-between; align-items: center; gap: 2rem; flex-wrap: wrap; } .cta-band h2 { font-family: var(--font-display); font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 700; color: var(--white); margin-bottom: 0.5rem; } .cta-band p { color: var(--text-white-muted); } .cta-band-actions { display: flex; gap: 1rem; flex-wrap: wrap; } .site-footer { background: var(--dark); color: var(--text-white-muted); padding: 4rem 0 0; } .footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 2.5rem; padding-bottom: 3rem; border-bottom: 1px solid var(--dark-border); } .footer-brand p { margin: 1rem 0 1.5rem; font-size: 0.875rem; line-height: 1.7; } .footer-social { display: flex; gap: 0.75rem; } .footer-social a { width: 40px; height: 40px; background: rgba(255, 255, 255, 0.06); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; color: var(--white); transition: var(--transition); } .footer-social a:hover { background: var(--primary); } .footer-col h4 { color: var(--white); font-family: var(--font-display); font-size: 1rem; font-weight: 700; margin-bottom: 1.25rem; } .footer-links li { margin-bottom: 0.65rem; } .footer-links a { font-size: 0.875rem; color: var(--text-white-muted); } .footer-links a:hover { color: var(--accent); } .footer-contact li { display: flex; align-items: flex-start; gap: 0.75rem; font-size: 0.875rem; margin-bottom: 0.75rem; } .footer-contact i { color: var(--accent); margin-top: 0.2rem; } .footer-hours { font-size: 0.8125rem; margin-top: 1rem; padding: 0.75rem; background: rgba(255, 255, 255, 0.04); border-radius: var(--radius-sm); } .copyright-bar { display: flex; justify-content: space-between; align-items: center; padding: 1.5rem 0; font-size: 0.8125rem; flex-wrap: wrap; gap: 1rem; } .footer-bottom-links { display: flex; gap: 1.5rem; } .footer-bottom-links a:hover { color: var(--accent); } .whatsapp-fab { position: fixed; bottom: 2rem; right: 2rem; width: 56px; height: 56px; background: #25d366; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--white); font-size: 1.75rem; box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4); z-index: 900; transition: var(--transition); } .whatsapp-fab:hover { transform: scale(1.1); } .back-to-top { position: fixed; bottom: 2rem; right: 5.5rem; width: 44px; height: 44px; background: var(--primary); color: var(--white); border: none; border-radius: 50%; cursor: pointer; opacity: 0; visibility: hidden; transition: var(--transition); z-index: 900; display: flex; align-items: center; justify-content: center; } .back-to-top.active { opacity: 1; visibility: visible; } .mobile-action-bar { display: none; position: fixed; bottom: 0; left: 0; right: 0; background: rgba(255, 255, 255, 0.96); backdrop-filter: blur(12px); border-top: 1px solid var(--border); padding: 0.375rem 0.5rem calc(0.375rem + env(safe-area-inset-bottom, 0px)); z-index: 950; box-shadow: 0 -8px 32px rgba(24, 24, 27, 0.1); gap: 0.25rem; } .mobile-action-bar a { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.2rem; padding: 0.625rem 0.25rem; min-height: 52px; font-size: 0.625rem; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; color: var(--text-secondary); border-radius: var(--radius-sm); transition: var(--transition); } .mobile-action-bar a:active { transform: scale(0.96); } .mobile-action-bar a.is-primary { color: var(--white); background: var(--primary); box-shadow: var(--shadow-primary); } .mobile-action-bar a i { font-size: 1.25rem; } .ink-chip { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.35rem 0.75rem; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: var(--radius-full); font-size: 0.8125rem; color: rgba(255, 255, 255, 0.85); } [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; transition-delay: var(--reveal-delay, 0ms); } [data-reveal].is-visible { opacity: 1; transform: translateY(0); } .contact-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 2rem; } .contact-info-card { background: linear-gradient(160deg, var(--dark) 0%, var(--dark-soft) 100%); color: var(--text-white); border: 1px solid var(--dark-border); border-radius: var(--radius-lg); padding: 2.5rem; box-shadow: var(--shadow-md); transition: var(--transition); } .contact-form-box { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 2.5rem; box-shadow: var(--shadow-md); transition: var(--transition); } .contact-info-card:hover, .contact-form-box:hover { box-shadow: var(--shadow-lg); } .form-group { margin-bottom: 1.25rem; } .form-group label { display: block; font-weight: 600; font-size: 0.875rem; margin-bottom: 0.5rem; } .form-group input, .form-group textarea, .form-group select { width: 100%; padding: 0.875rem 1rem; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 0.9375rem; font-family: inherit; transition: var(--transition); } .form-group input:focus, .form-group textarea:focus, .form-group select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); } .calc-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 2.5rem; box-shadow: var(--shadow-md); } .calc-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 2.5rem; align-items: start; } .calc-label { display: block; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--primary); margin-bottom: 1rem; } .calc-radio-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; } .calc-radio-card { border: 2px solid var(--border); border-radius: var(--radius-md); padding: 1.25rem; cursor: pointer; transition: var(--transition); text-align: center; } .calc-radio-card:hover { border-color: var(--primary-light); } .calc-radio-card.active, .calc-radio-card.is-active { border-color: var(--primary); background: var(--primary-soft); box-shadow: var(--shadow-sm); } .calc-radio-card h4 { font-family: var(--font-display); font-size: 0.9375rem; font-weight: 700; margin-bottom: 0.35rem; } .calc-radio-card span { font-size: 0.75rem; color: var(--text-muted); } .calc-checkbox-grid { display: grid; gap: 0.75rem; } .calc-checkbox-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.875rem 1rem; border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; transition: var(--transition); font-size: 0.875rem; } .calc-checkbox-item:hover { border-color: var(--primary); background: var(--primary-soft); } .calc-checkbox-item input { accent-color: var(--primary); width: 18px; height: 18px; } .calc-summary-box { background: var(--gradient-dark); color: var(--white); border-radius: var(--radius-lg); padding: 2rem; display: flex; flex-direction: column; gap: 1.5rem; position: sticky; top: calc(var(--header-height) + 1rem); } .calc-price-amount { font-family: var(--font-display); font-size: 2.5rem; font-weight: 800; background: var(--gradient-accent); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .calc-feature-list li { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0; font-size: 0.875rem; color: var(--text-white-muted); border-bottom: 1px solid var(--dark-border); } .calc-feature-list li i { color: var(--accent); } .service-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin-bottom: 2.5rem; } .service-tabs .tab-btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.25rem; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-full); font-weight: 600; font-size: 0.875rem; color: var(--text-secondary); cursor: pointer; transition: var(--transition); } .service-tabs .tab-btn:hover { border-color: var(--primary); color: var(--primary); } .service-tabs .tab-btn.active, .service-tabs .tab-btn.is-active { background: var(--gradient-primary); border-color: transparent; color: var(--white); box-shadow: var(--shadow-primary); } .tech-chip { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.25rem 0.65rem; background: var(--primary-soft); border-radius: var(--radius-full); font-size: 0.75rem; font-weight: 600; color: var(--primary); } .bento-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--border); } .portfolio-filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin-bottom: 2.5rem; } .filter-btn { padding: 0.6rem 1.25rem; border: 1px solid var(--border); border-radius: var(--radius-full); background: var(--white); font-weight: 600; font-size: 0.875rem; color: var(--text-secondary); cursor: pointer; transition: var(--transition); } .filter-btn:hover { border-color: var(--primary); color: var(--primary); } .filter-btn.active, .filter-btn.is-active { background: var(--gradient-primary); border-color: transparent; color: var(--white); } .modal-overlay { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.65); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; padding: 1.5rem; z-index: 2000; opacity: 0; visibility: hidden; transition: var(--transition); } .modal-overlay.active, .modal-overlay.is-active { opacity: 1; visibility: visible; } .modal-container { background: var(--white); border-radius: var(--radius-lg); padding: 2rem; width: 100%; max-width: 440px; position: relative; box-shadow: var(--shadow-lg); } .modal-close { position: absolute; top: 1rem; right: 1rem; width: 36px; height: 36px; border-radius: 50%; background: var(--bg); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: var(--transition); } .modal-close:hover { background: var(--primary-soft); color: var(--primary); } .form-control { width: 100%; padding: 0.875rem 1rem; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 0.9375rem; font-family: inherit; transition: var(--transition); } .form-control:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .form-feedback { margin-top: 1rem; padding: 1rem; border-radius: var(--radius-sm); font-size: 0.875rem; display: none; } .form-feedback.success, .form-feedback.error { display: block; } .form-feedback.success { background: rgba(34, 197, 94, 0.1); color: #15803d; border: 1px solid rgba(34, 197, 94, 0.3); } .form-feedback.error { background: rgba(239, 68, 68, 0.1); color: #b91c1c; border: 1px solid rgba(239, 68, 68, 0.3); } .hp-field { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; } .contact-info-card h3, .contact-form-box h3 { font-family: var(--font-display); font-size: 1.375rem; font-weight: 700; margin-bottom: 0.75rem; } .contact-info-card h3 { color: var(--text-white); } .contact-info-card > p { color: var(--text-white-muted); } .contact-info-card .contact-details h5 { color: rgba(255, 255, 255, 0.55); } .contact-info-card .contact-details a { color: var(--primary-light); } .contact-info-card .contact-details a:hover { color: var(--white); } .contact-info-card .contact-details span { color: var(--text-white-muted); } .contact-method:hover { transform: translateX(4px); } .contact-method { display: flex; align-items: flex-start; gap: 1rem; padding: 1.25rem 0; border-bottom: 1px solid rgba(255, 255, 255, 0.1); transition: transform 0.25s ease; } .contact-info-card .contact-method { border-bottom-color: rgba(255, 255, 255, 0.1); } .contact-form-box .contact-method, .contact-form-box .form-group { border-color: var(--border); } .contact-method:last-child { border-bottom: none; } .contact-icon { width: 48px; height: 48px; background: rgba(13, 148, 136, 0.2); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; color: var(--primary-light); font-size: 1.125rem; flex-shrink: 0; box-shadow: 0 4px 14px rgba(13, 148, 136, 0.25); } .contact-details h5 { font-size: 0.8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); margin-bottom: 0.25rem; } .contact-details a { color: var(--primary); font-weight: 600; } .contact-details a:hover { color: var(--primary-dark); } .content-block { max-width: 900px; margin: 0 auto; } .feature-list li { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.65rem 0; font-size: 0.9375rem; color: var(--text-secondary); } .feature-list li i { color: var(--accent); margin-top: 0.2rem; } ::selection { background: rgba(13, 148, 136, 0.2); color: var(--text); } ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: var(--bg); } ::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--primary); } .nav-item.active .nav-link { color: var(--primary); background: var(--primary-soft); font-weight: 600; } .brand-logo { display: flex; transition: transform 0.3s ease, opacity 0.3s ease; } .brand-logo:hover { transform: scale(1.03); opacity: 0.9; } .nav-link { position: relative; transition: color 0.2s, background 0.2s; } .nav-link:focus-visible, .btn:focus-visible, .hero-dot:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } .dropdown-menu { border-radius: var(--radius-lg); box-shadow: 0 16px 48px rgba(24, 24, 27, 0.12); padding: 0.625rem; } .dropdown-item { border-radius: var(--radius-sm); transition: background 0.2s, padding-left 0.2s; } .dropdown-item:hover { padding-left: 1.25rem; } .btn { position: relative; overflow: hidden; letter-spacing: 0.01em; } .btn i { transition: transform 0.25s ease; } .btn:hover i { transform: translateX(2px); } .btn-primary:active, .btn-accent:active { transform: translateY(0) scale(0.98); } .hero-modern .container { position: relative; z-index: 2; } .hero-text { animation: heroFadeUp 0.7s ease both; opacity: 1; } .hero-media { animation: heroFadeUp 0.7s 0.15s ease both; opacity: 1; } @keyframes heroFadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } .hero-blob-1 { animation: blobFloat 8s ease-in-out infinite; } .hero-blob-2 { animation: blobFloat 10s 2s ease-in-out infinite reverse; } @keyframes blobFloat { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-20px, 15px) scale(1.05); } } .hero-trust-list { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2.5rem; padding-top: 1.75rem; border-top: 1px solid var(--border); } .hero-trust-item { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.8125rem; font-weight: 600; color: var(--text-secondary); background: var(--white); border: 1px solid var(--border); padding: 0.45rem 0.875rem; border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); transition: var(--transition); } .hero-trust-item i { color: var(--primary); font-size: 0.875rem; } .hero-trust-item:hover { border-color: var(--primary); transform: translateY(-2px); box-shadow: var(--shadow-md); } .hero-frame { transition: transform 0.4s ease, box-shadow 0.4s ease; } .hero-media:hover .hero-frame { transform: translateY(-6px) rotate(0.5deg); box-shadow: 0 28px 60px rgba(13, 148, 136, 0.15); } .hero-img { transition: transform 0.6s ease; } .hero-media:hover .hero-img { transform: scale(1.03); } .floating-icon { transition: transform 0.3s ease, background 0.3s ease; } .hero-floating-card:hover .floating-icon { transform: scale(1.1); background: var(--primary); color: var(--white); } .stats-grid { background: var(--bg); border-radius: var(--radius-xl); border: 1px solid var(--border); overflow: hidden; box-shadow: var(--shadow-sm); } .stat-card { transition: background 0.3s ease; padding: 2rem 1.5rem; } .stat-card:hover { background: var(--white); } .stat-number { transition: transform 0.3s ease; } .stat-card:hover .stat-number { transform: scale(1.05); } .trust-track span { background: var(--white); border: 1px solid var(--border); padding: 0.5rem 1rem; border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); transition: var(--transition); } .trust-track span:hover { border-color: var(--primary); color: var(--primary); transform: translateY(-2px); } .section-header .sub-title { position: relative; padding-left: 2.5rem; } .section-header .sub-title::before { content: ''; position: absolute; left: 0; top: 50%; width: 1.75rem; height: 2px; background: var(--gradient-accent); transform: translateY(-50%); } .section-header.is-split .sub-title { padding-left: 0; } .section-header.is-split .sub-title::before { display: none; } .main-title { letter-spacing: -0.02em; } .service-card-mini, .bento-card, .portfolio-card, .testimonial-card, .process-step, .pricing-card { will-change: transform; } .service-card-mini .icon-wrap { transition: transform 0.35s ease, background 0.35s ease; } .service-card-mini:hover .icon-wrap { transform: scale(1.08) rotate(-3deg); background: var(--primary); color: var(--white); } .bento-card .btn { margin-top: 1.25rem; width: 100%; } .bento-icon-box { transition: transform 0.35s ease, box-shadow 0.35s ease; box-shadow: 0 4px 14px rgba(13, 148, 136, 0.25); } .bento-card:hover .bento-icon-box { transform: scale(1.06); box-shadow: 0 8px 20px rgba(13, 148, 136, 0.35); } .portfolio-img-box::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(24, 24, 27, 0.55) 0%, transparent 55%); opacity: 0; transition: opacity 0.35s ease; } .portfolio-card:hover .portfolio-img-box::after { opacity: 1; } .portfolio-content { transition: padding 0.3s ease; } .testimonial-card { position: relative; padding-top: 2.5rem; } .testimonial-card::before { content: '\201C'; position: absolute; top: 0.75rem; left: 1.5rem; font-family: var(--font-display); font-size: 3rem; line-height: 1; color: var(--primary-soft); font-weight: 800; } .testimonial-avatar { transition: transform 0.3s ease; box-shadow: 0 4px 12px rgba(13, 148, 136, 0.2); } .testimonial-card:hover .testimonial-avatar { transform: scale(1.08); } .process-step { counter-increment: step; } .process-step::after { content: ''; position: absolute; top: 50%; right: -0.75rem; width: 1.5rem; height: 2px; background: var(--border); display: none; } .process-grid .process-step:not(:last-child)::after { display: block; } @media (min-width: 1025px) { .process-grid .process-step:not(:last-child)::after { display: block; } } .process-num { background: var(--primary-soft); padding: 0.35rem 0.75rem; border-radius: var(--radius-sm); } .faq-header { transition: color 0.2s, background 0.2s; } .faq-header:hover { color: var(--primary); background: var(--primary-tint); } .faq-item.active .faq-header { color: var(--primary); background: var(--primary-soft); } .cta-band { position: relative; overflow: hidden; } .cta-band::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 10% 50%, rgba(13, 148, 136, 0.15) 0%, transparent 40%), radial-gradient(circle at 90% 50%, rgba(13, 148, 136, 0.1) 0%, transparent 40%); pointer-events: none; } .cta-band-inner { position: relative; z-index: 1; } .site-footer { position: relative; } .site-footer::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--gradient-primary); } .whatsapp-fab::before { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid rgba(37, 211, 102, 0.4); animation: waPulse 2s ease-out infinite; } @keyframes waPulse { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(1.35); opacity: 0; } } .whatsapp-fab { position: fixed; } .dark-spotlight { box-shadow: var(--shadow-lg); border: 1px solid rgba(255, 255, 255, 0.06); } .dark-spotlight img { transition: transform 0.5s ease; } .dark-spotlight:hover img { transform: scale(1.02); } .tab-btn { transition: transform 0.2s, background 0.2s, border-color 0.2s; } .tab-btn:hover { transform: translateY(-1px); } .tab-btn.is-active { transform: translateY(-2px); } .pricing-card { transition: transform 0.35s ease, box-shadow 0.35s ease; } .pricing-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); } .pricing-card.featured:hover { transform: scale(1.03) translateY(-6px); } .page-hero { animation: heroFadeUp 0.6s ease both; } [data-reveal].is-visible { animation: revealPop 0.55s cubic-bezier(0.22, 1, 0.36, 1) both; animation-delay: var(--reveal-delay, 0ms); } @keyframes revealPop { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .clients-section { padding: 2rem 0 1.5rem; background: var(--white); border-bottom: 1px solid var(--border); } .clients-label { text-align: center; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 1.25rem; } .clients-strip { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .clients-track { display: flex; gap: 1.25rem; align-items: center; width: max-content; } .clients-strip.is-marquee .clients-track { animation: marquee 35s linear infinite; } .client-logo { display: flex; align-items: center; gap: 0.625rem; white-space: nowrap; padding: 0.75rem 1.25rem; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-full); font-size: 0.875rem; font-weight: 600; color: var(--text-secondary); transition: var(--transition); } .client-logo i { color: var(--primary); font-size: 0.9375rem; } .client-logo:hover { border-color: var(--primary); color: var(--text); box-shadow: var(--shadow-sm); } .why-choose-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; } .why-choose-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 2rem 1.5rem; text-align: center; transition: var(--transition); } .why-choose-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: rgba(13, 148, 136, 0.25); } .why-choose-icon { width: 56px; height: 56px; margin: 0 auto 1.25rem; border-radius: var(--radius-md); background: linear-gradient(135deg, rgba(13, 148, 136, 0.12), rgba(13, 148, 136, 0.08)); display: flex; align-items: center; justify-content: center; font-size: 1.375rem; color: var(--primary); } .why-choose-card h3 { font-size: 1.0625rem; font-weight: 700; margin-bottom: 0.625rem; color: var(--text); } .why-choose-card p { font-size: 0.875rem; color: var(--text-secondary); line-height: 1.65; margin: 0; } .team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; margin-top: 2.5rem; } .team-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 2rem 1.5rem; text-align: center; transition: var(--transition); } .team-card:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); } .team-photo { width: 88px; height: 88px; margin: 0 auto 1.25rem; border-radius: 50%; background: var(--gradient-primary); display: flex; align-items: center; justify-content: center; font-size: 1.375rem; font-weight: 800; color: var(--white); box-shadow: 0 0 0 4px var(--white), 0 0 0 6px rgba(13, 148, 136, 0.2); } .team-card h4 { font-size: 1.0625rem; font-weight: 700; margin-bottom: 0.25rem; } .team-role { font-size: 0.8125rem; font-weight: 600; color: var(--primary); margin-bottom: 0.75rem; } .team-bio { font-size: 0.8125rem; color: var(--text-secondary); line-height: 1.65; margin-bottom: 1.25rem; } .team-social { display: flex; justify-content: center; gap: 0.625rem; } .team-social a { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--text-secondary); font-size: 0.8125rem; transition: var(--transition); } .team-social a:hover { background: var(--primary); border-color: var(--primary); color: var(--white); } .blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 2.5rem; } .blog-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; transition: var(--transition); } .blog-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); } .blog-img-link { position: relative; display: block; overflow: hidden; } .blog-img-link img { width: 100%; height: 200px; object-fit: cover; transition: transform 0.4s ease; } .blog-card:hover .blog-img-link img { transform: scale(1.05); } .blog-category { position: absolute; top: 1rem; left: 1rem; padding: 0.35rem 0.75rem; background: var(--primary); color: var(--white); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; border-radius: var(--radius-full); } .blog-content { padding: 1.5rem; } .blog-content time { font-size: 0.75rem; font-weight: 600; color: var(--text-muted); } .blog-content h3 { font-size: 1.0625rem; font-weight: 700; margin: 0.5rem 0 0.75rem; line-height: 1.4; } .blog-content h3 a { color: var(--text); transition: color 0.2s; } .blog-content h3 a:hover { color: var(--primary); } .blog-content > p { font-size: 0.875rem; color: var(--text-secondary); line-height: 1.65; margin-bottom: 1rem; } .blog-read-more { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.875rem; font-weight: 600; color: var(--primary); } .blog-read-more:hover { gap: 0.625rem; } .detail-list { display: grid; gap: 1rem; max-width: 920px; margin: 0 auto; } .detail-item { background: var(--white); border: 1px solid var(--border); border-left: 4px solid var(--primary); border-radius: var(--radius-lg); padding: 1.5rem 1.75rem; box-shadow: var(--shadow-sm); transition: var(--transition); } .detail-item:hover { box-shadow: var(--shadow-md); transform: translateX(4px); } .detail-head { display: flex; align-items: center; gap: 0.875rem; margin-bottom: 0.75rem; } .detail-head i { width: 42px; height: 42px; border-radius: 10px; background: linear-gradient(135deg, rgba(13,148,136,0.12), rgba(13,148,136,0.08)); color: var(--primary); display: grid; place-items: center; font-size: 1.125rem; flex-shrink: 0; } .detail-head h3 { font-size: 1.1875rem; font-weight: 700; margin: 0; } .detail-item p { font-size: 0.9375rem; color: var(--text-secondary); line-height: 1.7; margin: 0; } .industry-chips { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; } .industry-chips span { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.25rem; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-full); font-size: 0.9375rem; font-weight: 600; color: var(--text-secondary); transition: var(--transition); } .industry-chips span:hover { border-color: var(--primary); color: var(--text); box-shadow: var(--shadow-sm); transform: translateY(-2px); } .industry-chips i { color: var(--primary); } @media (max-width: 768px) { .detail-item { padding: 1.125rem 1.25rem; } .detail-head h3 { font-size: 1.0625rem; } .industry-chips span { font-size: 0.8125rem; padding: 0.5rem 0.875rem; } } .case-meta-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; } .case-meta-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.25rem 1.5rem; box-shadow: var(--shadow-sm); } .case-meta-card span { display: block; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 0.35rem; } .case-meta-card strong { font-size: 1.0625rem; font-weight: 700; color: var(--text); } @media (max-width: 768px) { .case-meta-grid { grid-template-columns: 1fr 1fr; gap: 0.75rem; } .case-meta-card { padding: 1rem; } } .section-glow { position: relative; overflow: hidden; } .section-glow::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 50% at 10% 20%, rgba(13, 148, 136, 0.06) 0%, transparent 55%), radial-gradient(ellipse 50% 40% at 90% 80%, rgba(13, 148, 136, 0.05) 0%, transparent 50%); pointer-events: none; } .section-glow > .container { position: relative; z-index: 1; } .inner-cta-panel { text-align: center; margin-top: 3rem; padding: 2rem; background: linear-gradient(135deg, rgba(13, 148, 136, 0.06), rgba(13, 148, 136, 0.04)); border: 1px solid var(--border); border-radius: var(--radius-lg); } .btn-lg { padding: 1rem 2.25rem; font-size: 1.0625rem; } .tech-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 1rem; margin-bottom: 0.5rem; } .calc-card { border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); overflow: hidden; } .calc-radio-card:hover { border-color: var(--primary); transform: translateY(-2px); box-shadow: var(--shadow-sm); } .calc-radio-card.active { box-shadow: var(--shadow-primary); } .process-step { position: relative; overflow: hidden; } .process-step::after { content: ''; position: absolute; top: 0; left: 0; width: 4px; height: 100%; background: var(--gradient-primary); opacity: 0; transition: opacity 0.3s ease; } .process-step:hover::after { opacity: 1; } .portfolio-filters { background: var(--white); padding: 0.5rem; border-radius: var(--radius-full); border: 1px solid var(--border); box-shadow: var(--shadow-sm); margin-bottom: 2rem; } .filter-btn.active { box-shadow: var(--shadow-primary); } @media (max-width: 1024px) { .container { padding: 0 1.5rem; } .hero-grid, .tab-content-grid, .dark-spotlight, .newsletter-inner { grid-template-columns: 1fr; gap: 2.5rem; } .hero-media { order: -1; max-width: 520px; margin: 0 auto; width: 100%; } .hero-text { text-align: center; } .hero-description { margin-left: auto; margin-right: auto; } .hero-cta { justify-content: center; } .hero-trust-list { justify-content: center; } .bento-grid, .portfolio-grid, .pricing-grid { grid-template-columns: repeat(2, 1fr); } .process-grid { grid-template-columns: repeat(2, 1fr); } .why-choose-grid { grid-template-columns: repeat(2, 1fr); } .team-grid { grid-template-columns: repeat(2, 1fr); } .blog-grid { grid-template-columns: repeat(2, 1fr); } .process-grid .process-step::after { display: none !important; } .stats-grid { grid-template-columns: repeat(2, 1fr); } .stat-card:nth-child(2) { border-right: none; } .footer-grid { grid-template-columns: repeat(2, 1fr); gap: 2rem; } .testimonial-grid { grid-template-columns: 1fr; } .hero-floating-card { display: none; } .pricing-card.featured { transform: none; } .service-cards-row { grid-template-columns: 1fr; } .dark-spotlight { padding: 2rem; } .section-padding { padding: 3rem 0; } } @media (max-width: 992px) { .nav-menu { position: fixed; top: 0; right: 0; width: min(340px, 88vw); height: 100dvh; height: 100vh; background: var(--white); flex-direction: column; align-items: stretch; padding: 1.25rem 1.25rem 2rem; box-shadow: -8px 0 40px rgba(24, 24, 27, 0.15); transform: translateX(100%); transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1); z-index: 1100; overflow-y: auto; -webkit-overflow-scrolling: touch; } .nav-menu.is-open { transform: translateX(0); } .nav-menu::before { content: 'Menu'; display: block; font-family: var(--font-display); font-size: 1.125rem; font-weight: 800; color: var(--text); padding: 0.75rem 0 1.25rem; border-bottom: 1px solid var(--border); margin-bottom: 0.5rem; } .nav-link { padding: 1rem 0.75rem; min-height: 48px; border-bottom: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 1rem; } .nav-link:active { background: var(--primary-soft); } .nav-item.active > .nav-link { background: var(--primary-soft); border-color: transparent; } .dropdown-menu { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: none; padding: 0 0 0.5rem 0.5rem; display: none; background: var(--bg); border-radius: var(--radius-sm); margin: 0.25rem 0 0.5rem; } .nav-item.is-open .dropdown-menu { display: block; } .dropdown-item { padding: 0.875rem 1rem; min-height: 44px; font-size: 0.9375rem; } .nav-toggle { display: flex; } .header-actions .btn-primary { display: none; } .tab-nav { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; padding-bottom: 0.5rem; -webkit-overflow-scrolling: touch; scrollbar-width: none; gap: 0.5rem; } .tab-nav::-webkit-scrollbar { display: none; } .tab-btn { flex-shrink: 0; white-space: nowrap; } .service-tabs { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; padding-bottom: 0.75rem; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .service-tabs::-webkit-scrollbar { display: none; } .service-tabs .tab-btn { flex-shrink: 0; } } @media (max-width: 768px) { html { font-size: 14px; } :root { --header-height: 64px; --header-height-stuck: 58px; } .container { padding: 0 1rem; } .top-bar { padding: 0.375rem 0; } .top-bar-content { justify-content: center; } .top-bar-left { gap: 0.5rem; justify-content: center; width: 100%; } .top-bar-right { display: none; } .top-bar-item:nth-child(n+3) { display: none; } .top-bar-item { font-size: 0.6875rem; gap: 0.3rem; } .site-header .navbar { padding: 0.625rem 0; } .brand-logo img { height: 34px; } .hero-modern, .hero-slider { padding: 1.75rem 0 2rem; min-height: auto; } .page-hero { padding: 1.75rem 0 2rem; } .page-hero .hero-blob { opacity: 0.3; } .page-hero .hero-blob-1 { width: 180px; height: 180px; } .page-hero .hero-blob-2 { width: 140px; height: 140px; } .hero-badge-pill { font-size: 0.625rem; padding: 0.35rem 0.75rem; margin-bottom: 0.75rem; } .hero-title { font-size: clamp(1.5rem, 6.5vw, 1.875rem); margin-bottom: 0.625rem; } .hero-description { font-size: 0.9375rem; line-height: 1.6; } .hero-cta { flex-direction: column; width: 100%; gap: 0.625rem; margin-top: 1.25rem; } .hero-cta .btn { width: 100%; justify-content: center; min-height: 44px; padding: 0.75rem 1.25rem; font-size: 0.875rem; } .hero-trust-list { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 0.375rem 0.875rem; margin-top: 1rem; } .hero-trust-item { justify-content: center; font-size: 0.75rem; gap: 0.35rem; } .hero-trust-item i { font-size: 0.6875rem; } .hero-blob-1 { width: 200px; height: 200px; } .hero-blob-2 { width: 160px; height: 160px; } .stats-section { padding: 1.5rem 0; } .stats-grid { grid-template-columns: repeat(2, 1fr); border-radius: var(--radius-md); gap: 1px; background: var(--border); overflow: hidden; } .stat-card { border: none !important; background: var(--white); padding: 0.875rem 0.625rem; } .stat-number { font-size: 1.625rem; margin-bottom: 0.25rem; } .stat-label { font-size: 0.6875rem; line-height: 1.35; } .section-padding { padding: 2.25rem 0; } .section-header { margin-bottom: 1.5rem; max-width: none; } .section-header .sub-title { padding-left: 1.5rem; font-size: 0.625rem; margin-bottom: 0.5rem; } .section-header .sub-title::before { width: 1rem; } .main-title { font-size: clamp(1.375rem, 5vw, 1.625rem); margin-bottom: 0.5rem; } .section-desc { font-size: 0.875rem; line-height: 1.55; } .bento-grid, .portfolio-grid, .pricing-grid, .comparison-grid, .process-grid, .why-choose-grid, .team-grid, .blog-grid, .testimonial-grid, .service-cards-row { gap: 0.875rem; } .service-cards-row, .bento-grid, .portfolio-grid, .pricing-grid, .comparison-grid, .process-grid, .stats-grid, .footer-grid, .contact-grid, .service-card-mini, .why-choose-grid, .team-grid, .blog-grid { grid-template-columns: 1fr; } .contact-grid { gap: 1rem; } .calc-grid { grid-template-columns: 1fr; gap: 1rem; } .calc-radio-grid { grid-template-columns: 1fr; gap: 0.625rem; } .form-row { grid-template-columns: 1fr; gap: 0; } .calc-summary-box { position: static; padding: 1.25rem; } .calc-card { padding: 1.125rem; } .calc-price-amount { font-size: 1.625rem; } .calc-radio-card { padding: 1rem; } .calc-checkbox-item { padding: 0.75rem 0.875rem; font-size: 0.8125rem; } .bento-card, .service-card-mini, .portfolio-card, .testimonial-card, .pricing-card, .process-step, .contact-info-card, .contact-form-box, .why-choose-card, .team-card, .blog-card { padding: 1.125rem; } .bento-icon-box { width: 44px; height: 44px; font-size: 1.125rem; margin-bottom: 0.875rem; } .bento-card h3, .why-choose-card h3 { font-size: 1rem; margin-bottom: 0.5rem; } .bento-card p, .why-choose-card p { font-size: 0.8125rem; line-height: 1.55; } .tech-chip { font-size: 0.6875rem; padding: 0.25rem 0.5rem; } .tech-tags { gap: 0.3rem; margin-top: 0.75rem; margin-bottom: 0.25rem; } .bento-footer { margin-top: 0.75rem; gap: 0.5rem; flex-wrap: wrap; } .inner-cta-panel { margin-top: 1.5rem; padding: 1.25rem; } .btn-lg { padding: 0.75rem 1.5rem; font-size: 0.9375rem; } .dark-spotlight { grid-template-columns: 1fr; padding: 1.125rem; border-radius: var(--radius-md); gap: 1.25rem; } .dark-spotlight img { order: -1; max-height: 220px; object-fit: cover; } .dark-spotlight h2 { font-size: 1.25rem; } .dark-spotlight p { font-size: 0.875rem; } .spotlight-grid { grid-template-columns: 1fr; gap: 0.5rem; } .spotlight-item { font-size: 0.8125rem; padding: 0.5rem 0; } .process-step { padding: 1.125rem; } .process-num { font-size: 0.625rem; margin-bottom: 0.5rem; } .process-step h4 { font-size: 0.9375rem; margin-bottom: 0.375rem; } .process-step p { font-size: 0.8125rem; } .why-choose-icon { width: 44px; height: 44px; font-size: 1.125rem; margin-bottom: 0.875rem; } .team-photo { width: 64px; height: 64px; font-size: 1rem; margin-bottom: 0.875rem; } .team-card h4 { font-size: 0.9375rem; } .team-role { font-size: 0.75rem; margin-bottom: 0.5rem; } .team-bio { font-size: 0.75rem; margin-bottom: 0.875rem; } .team-social a { width: 32px; height: 32px; font-size: 0.75rem; } .blog-img-link img { height: 160px; } .blog-content { padding: 1.125rem; } .blog-content h3 { font-size: 0.9375rem; } .clients-section { padding: 1.25rem 0 1rem; } .clients-label { font-size: 0.6875rem; margin-bottom: 0.75rem; } .client-logo { padding: 0.5rem 0.875rem; font-size: 0.75rem; } .clients-track { gap: 0.75rem; } .trust-strip { padding: 0.75rem 0; } .trust-track { gap: 1.5rem; } .trust-track span { font-size: 0.75rem; } .pricing-quote { font-size: 0.9375rem; margin-bottom: 0.5rem; } .pricing-card h3 { font-size: 1.0625rem; } .pricing-features li { font-size: 0.8125rem; padding: 0.5rem 0; } .pricing-badge { font-size: 0.625rem; padding: 0.25rem 0.625rem; } .portfolio-img-box img { height: 180px; } .portfolio-content { padding: 1.125rem; } .portfolio-content h4 { font-size: 0.9375rem; } .portfolio-metric { font-size: 0.8125rem; } .portfolio-filters { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; padding: 0.375rem; margin-bottom: 1.25rem; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .portfolio-filters::-webkit-scrollbar { display: none; } .filter-btn { flex-shrink: 0; min-height: 36px; padding: 0.5rem 0.875rem; font-size: 0.75rem; } .testimonial-card { padding-top: 2rem; } .testimonial-card::before { font-size: 2rem; left: 1rem; top: 0.5rem; } .testimonial-quote { font-size: 0.8125rem; margin-bottom: 1rem; } .testimonial-avatar { width: 40px; height: 40px; font-size: 0.75rem; } .testimonial-author h5 { font-size: 0.8125rem; } .testimonial-author span { font-size: 0.6875rem; } .comparison-grid .comp-card { padding: 1rem; } .comp-header h3 { font-size: 0.9375rem; } .comp-list li { font-size: 0.8125rem; padding: 0.375rem 0; } .tab-nav, .service-tabs { gap: 0.375rem; padding-bottom: 0.375rem; margin-bottom: 1rem; } .tab-btn { padding: 0.5rem 0.875rem; font-size: 0.6875rem; min-height: 36px; } .service-tabs .tab-btn { font-size: 0.75rem; padding: 0.5rem 0.75rem; } .service-tabs-section { padding: 2.25rem 0; } .tab-content-grid h3 { font-size: 1.125rem; } .tab-feature-list li { font-size: 0.8125rem; padding: 0.375rem 0; } .tab-visual .big-stat { font-size: 2.5rem; } .hero-cta .btn-glass, .cta-band-actions .btn { width: 100%; } .section-header.is-split { flex-direction: column; align-items: stretch; gap: 0.75rem; margin-bottom: 1.25rem; } .section-header.is-split .section-desc { text-align: left !important; margin-top: 0.5rem !important; } .section-header.is-split .btn { width: 100%; justify-content: center; min-height: 40px; font-size: 0.8125rem; } .cta-band { padding: 2rem 0; } .cta-band-inner { flex-direction: column; text-align: center; gap: 1rem; } .cta-band h2 { font-size: 1.25rem; } .cta-band p { font-size: 0.875rem; } .cta-band-actions { flex-direction: column; width: 100%; gap: 0.625rem; } .cta-band-actions .btn { width: 100%; min-height: 44px; justify-content: center; font-size: 0.875rem; } .newsletter-section { padding: 2rem 0; } .newsletter-inner { text-align: center; gap: 1.25rem; } .newsletter-inner h2 { font-size: 1.25rem; } .newsletter-inner p { font-size: 0.875rem; } .newsletter-form { flex-direction: column; gap: 0.625rem; } .newsletter-form input, .newsletter-form .btn { width: 100%; min-height: 44px; } .faq-search-box { margin-bottom: 1.25rem; } .faq-header { padding: 0.875rem 1rem; min-height: 44px; font-size: 0.8125rem; } .faq-body { font-size: 0.8125rem; padding: 0 1rem; line-height: 1.55; } .faq-item.active .faq-body { padding-bottom: 0.875rem; } .faq-search-box input { min-height: 44px; font-size: 16px; padding: 0.75rem 1rem 0.75rem 2.75rem; } .form-control, .form-group input, .form-group textarea, .form-group select { font-size: 16px; min-height: 44px; padding: 0.75rem 0.875rem; } .form-group textarea { min-height: 100px; } .contact-info-card, .contact-form-box { padding: 1.25rem; } .contact-info-card h3, .contact-form-box h3 { font-size: 1.125rem; } .contact-method { padding: 0.875rem 0; gap: 0.75rem; } .contact-icon { width: 40px; height: 40px; font-size: 1rem; } .footer-grid { grid-template-columns: 1fr; gap: 1.5rem; } .footer-col h4 { font-size: 0.9375rem; margin-bottom: 0.75rem; } .footer-links li { font-size: 0.8125rem; } .footer-brand { text-align: center; } .footer-brand p { font-size: 0.8125rem; } .footer-social { justify-content: center; } .copyright-bar { flex-direction: column; text-align: center; gap: 0.75rem; font-size: 0.8125rem; } .footer-bottom-links { flex-wrap: wrap; justify-content: center; gap: 0.75rem; } .mobile-action-bar { padding: 0.25rem 0.375rem calc(0.25rem + env(safe-area-inset-bottom, 0px)); } .mobile-action-bar a { min-height: 46px; padding: 0.375rem 0.2rem; font-size: 0.5625rem; } .mobile-action-bar a i { font-size: 1.125rem; } .mobile-action-bar { display: flex; } body { padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px)); } .whatsapp-fab { bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px)); width: 46px; height: 46px; font-size: 1.375rem; } .back-to-top { bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px)); right: 0.875rem; width: 40px; height: 40px; } .btn { min-height: 40px; font-size: 0.875rem; } .btn-sm { min-height: 36px; padding: 0.5rem 0.875rem; font-size: 0.8125rem; } .modal-container { margin: 0.75rem; max-height: 90dvh; padding: 1.25rem; overflow-y: auto; } .service-card-mini { padding: 1.125rem; } .service-card-mini .icon-wrap { width: 44px; height: 44px; font-size: 1.125rem; } } @media (max-width: 480px) { html { font-size: 13.5px; } .container { padding: 0 0.875rem; } .section-padding { padding: 1.75rem 0; } .page-hero { padding: 1.5rem 0 1.75rem; } .hero-modern { padding: 1.5rem 0 1.75rem; } .page-hero .hero-blob { display: none; } .hero-blob { opacity: 0.25; } .hero-title { font-size: clamp(1.375rem, 6vw, 1.625rem); } .hero-description { font-size: 0.875rem; } .stats-section { padding: 1.125rem 0; } .stat-number { font-size: 1.5rem; } .stat-label { font-size: 0.625rem; } .stat-card { padding: 0.75rem 0.5rem; } .section-header { margin-bottom: 1.125rem; } .main-title { font-size: clamp(1.25rem, 4.8vw, 1.5rem); } .section-desc { font-size: 0.8125rem; } .bento-card, .service-card-mini, .portfolio-card, .testimonial-card, .pricing-card, .process-step, .contact-info-card, .contact-form-box, .why-choose-card, .team-card, .blog-card { padding: 1rem; } .bento-grid, .portfolio-grid, .pricing-grid, .process-grid, .why-choose-grid, .team-grid, .blog-grid, .testimonial-grid { gap: 0.75rem; } .hero-badge-pill { font-size: 0.5625rem; } .pricing-quote { font-size: 0.875rem; } .tab-visual .big-stat { font-size: 2.25rem; } .cta-band { padding: 1.75rem 0; } .cta-band h2 { font-size: 1.125rem; } .clients-section { padding: 1rem 0 0.75rem; } .client-logo { padding: 0.4rem 0.625rem; font-size: 0.6875rem; gap: 0.4rem; } .inner-cta-panel { padding: 1rem; margin-top: 1.25rem; } .calc-card { padding: 1rem; } .calc-price-amount { font-size: 1.375rem; } .dark-spotlight { padding: 1rem; } .dark-spotlight img { max-height: 180px; } .portfolio-img-box img { height: 160px; } .blog-img-link img { height: 140px; } .team-grid { grid-template-columns: repeat(2, 1fr); gap: 0.625rem; } .team-card { padding: 0.875rem; } .team-photo { width: 52px; height: 52px; font-size: 0.875rem; margin-bottom: 0.625rem; } .team-card h4 { font-size: 0.8125rem; } .team-role { font-size: 0.6875rem; } .team-bio { display: none; } .team-social { gap: 0.375rem; } .team-social a { width: 28px; height: 28px; font-size: 0.6875rem; } .why-choose-grid { grid-template-columns: repeat(2, 1fr); gap: 0.625rem; } .why-choose-card { padding: 0.875rem; } .why-choose-icon { width: 36px; height: 36px; font-size: 0.9375rem; margin-bottom: 0.625rem; } .why-choose-card h3 { font-size: 0.8125rem; } .why-choose-card p { font-size: 0.6875rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .top-bar-item { font-size: 0.6875rem; } } .hero-channels { font-weight: 700; font-size: 0.9375rem; letter-spacing: 0.01em; color: var(--primary-dark); margin: 0 0 0.85rem; } .taxonomy-stack { display: grid; gap: 2rem; } .taxonomy-pillar { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.75rem 1.75rem 1.5rem; box-shadow: var(--shadow-sm); } .taxonomy-kicker { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--primary); margin-bottom: 0.5rem; } .taxonomy-pillar h3 { font-size: 1.5rem; margin-bottom: 0.4rem; } .taxonomy-pillar > p { color: var(--text-secondary); max-width: 62ch; margin-bottom: 1.25rem; } .taxonomy-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; } .taxonomy-card { display: block; background: var(--bg); border: 1px solid var(--border); border-radius: 12px; padding: 1.15rem 1.1rem 1.2rem; transition: var(--transition); min-height: 100%; } .taxonomy-card:hover { border-color: var(--primary); box-shadow: var(--shadow-md); transform: translateY(-3px); } .taxonomy-card i { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: linear-gradient(135deg, rgba(13,148,136,0.14), rgba(13,148,136,0.08)); color: var(--primary); margin-bottom: 0.75rem; } .taxonomy-card h4 { font-size: 1rem; margin-bottom: 0.35rem; } .taxonomy-card p { font-size: 0.8125rem; color: var(--text-secondary); margin: 0; } .shot-frame { background: #0f172a; border-radius: 12px 12px 0 0; overflow: hidden; } .shot-chrome { display: flex; align-items: center; gap: 0.35rem; padding: 0.55rem 0.75rem; background: #1e293b; } .shot-chrome i, .shot-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; } .shot-dot:nth-child(1) { background: #f87171; } .shot-dot:nth-child(2) { background: #fbbf24; } .shot-dot:nth-child(3) { background: #34d399; } .shot-url { margin-left: 0.5rem; flex: 1; font-size: 0.6875rem; color: #94a3b8; background: #0f172a; border-radius: 999px; padding: 0.2rem 0.7rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .shot-frame img, .shot-screen { width: 100%; aspect-ratio: 16/10; object-fit: cover; display: block; background: #0f172a; } .portfolio-img-box .shot-frame img { aspect-ratio: 16/10; transform: none; height: auto; } .portfolio-card:hover .portfolio-img-box .shot-frame img { transform: none; } @media (max-width: 980px) { .taxonomy-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .taxonomy-pillar { padding: 1.15rem; } .taxonomy-pillar h3 { font-size: 1.2rem; } .taxonomy-grid { grid-template-columns: 1fr 1fr; gap: 0.65rem; } .taxonomy-card { padding: 0.85rem; } .taxonomy-card h4 { font-size: 0.875rem; } .taxonomy-card p { display: none; } .hero-channels { font-size: 0.8125rem; } } .skip-link { position: absolute; left: -999px; top: 0; z-index: 10000; background: var(--primary); color: #fff; padding: 0.6rem 1rem; font-weight: 700; } .skip-link:focus { left: 0.75rem; top: 0.75rem; } .breadcrumbs { background: var(--bg); border-bottom: 1px solid var(--border); padding: 0.65rem 0; font-size: 0.8125rem; } .breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 0.35rem 0.5rem; align-items: center; color: var(--text-muted); } .breadcrumbs li { display: inline-flex; align-items: center; gap: 0.5rem; } .breadcrumbs li:not(:last-child)::after { content: "/"; color: var(--border); font-weight: 600; } .breadcrumbs a { color: var(--text-secondary); } .breadcrumbs a:hover { color: var(--primary); } .breadcrumbs [aria-current="page"] { color: var(--text); font-weight: 600; } .article-wrap { max-width: 760px; margin: 0 auto; } .article-wrap h2 { font-size: 1.5rem; margin: 2rem 0 0.75rem; } .article-wrap h3 { font-size: 1.15rem; margin: 1.5rem 0 0.5rem; } .article-wrap p, .article-wrap li { color: var(--text-secondary); line-height: 1.8; font-size: 1.02rem; } .article-wrap ul, .article-wrap ol { margin: 0.75rem 0 1.25rem 1.25rem; } .article-wrap ul { list-style: disc; } .article-wrap ol { list-style: decimal; } .article-wrap a { color: var(--primary); font-weight: 600; } .article-meta { display: flex; flex-wrap: wrap; gap: 0.75rem 1.25rem; font-size: 0.875rem; color: var(--text-muted); margin-bottom: 1.5rem; } .related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; } .related-card { display: block; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.25rem; transition: var(--transition); } .related-card:hover { border-color: var(--primary); box-shadow: var(--shadow-md); transform: translateY(-2px); } .related-card h3 { font-size: 1.05rem; margin-bottom: 0.4rem; } .related-card p { font-size: 0.875rem; color: var(--text-secondary); margin: 0; } .sitemap-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; } .sitemap-cols h2 { font-size: 1.1rem; margin-bottom: 0.75rem; } .sitemap-cols a { display: block; padding: 0.35rem 0; color: var(--text-secondary); } .sitemap-cols a:hover { color: var(--primary); } @media (max-width: 800px) { .related-grid, .sitemap-cols { grid-template-columns: 1fr; } } @media (hover: none) and (pointer: coarse) { .bento-card:hover, .portfolio-card:hover, .service-card-mini:hover, .pricing-card:hover { transform: none; } .hero-media:hover .hero-frame, .hero-media:hover .hero-img { transform: none; } } .top-bar { background: linear-gradient(90deg, #0f766e 0%, #0d9488 55%, #0f766e 100%); font-weight: 500; letter-spacing: 0.01em; } .top-bar-item i { opacity: 0.9; width: 14px; text-align: center; } .top-bar-right .top-bar-item { padding: 0.2rem 0.7rem; background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: var(--radius-sm); font-weight: 600; } .brand-logo { align-items: center; flex-shrink: 0; } .brand-logo img { height: 48px; max-width: 220px; object-fit: contain; } .nav-link { font-size: 0.875rem; letter-spacing: 0.01em; } .nav-item.active .nav-link { box-shadow: inset 0 -2px 0 var(--primary); } .header-actions .btn-sm { padding: 0.55rem 1.1rem; box-shadow: var(--shadow-primary); } .hero-modern { padding: 2.75rem 0 3rem; } .hero-grid { gap: 2.5rem; } .hero-badge-pill { box-shadow: 0 1px 2px rgba(24, 24, 27, 0.04), 0 8px 24px rgba(13, 148, 136, 0.08); } .hero-channels { display: flex; flex-wrap: wrap; gap: 0.45rem; list-style: none; margin: 0 0 1.15rem; padding: 0; font-weight: 700; font-size: 0.8125rem; letter-spacing: 0; color: var(--primary-dark); } .hero-channels li { display: inline-flex; align-items: center; padding: 0.35rem 0.75rem; background: var(--primary-soft); border: 1px solid rgba(13, 148, 136, 0.22); border-radius: var(--radius-full); color: var(--primary-dark); box-shadow: none; } .hero-description { margin-bottom: 1.75rem; } .hero-cta .btn { min-height: 48px; padding: 0.8rem 1.4rem; } .hero-frame { border: 6px solid var(--white); box-shadow: 0 0 0 1px var(--border), 0 24px 60px rgba(13, 148, 136, 0.12), 0 8px 24px rgba(24, 24, 27, 0.08); } .hero-floating-card { z-index: 3; backdrop-filter: blur(8px); } .stats-section { padding: 2.25rem 0 2.5rem; } .stats-grid { background: var(--white); border: 1px solid var(--border); box-shadow: 0 12px 40px rgba(13, 148, 136, 0.06); } .stat-card { position: relative; padding: 1.75rem 1.25rem 1.5rem; } .stat-card::before { content: ''; position: absolute; top: 0; left: 20%; right: 20%; height: 3px; background: var(--gradient-primary); border-radius: 0 0 4px 4px; opacity: 0.85; } .stat-label { max-width: 16ch; margin: 0 auto; line-height: 1.4; } .clients-section { padding: 2.25rem 0 2rem; background: var(--bg); border-bottom: 1px solid var(--border); } .clients-label { letter-spacing: 0.1em; font-size: 0.75rem; } .clients-strip { margin-bottom: 1.25rem; } .clients-strip:hover .clients-track { animation-play-state: paused; } .client-logo { background: var(--white); border-radius: var(--radius-sm); } .clients-industries { padding-top: 0.25rem; } .clients-industries span { padding: 0.45rem 0.9rem; font-size: 0.8125rem; background: var(--white); } .section-alt + .section-alt { padding-top: 3.25rem; border-top: 1px solid var(--border); } .why-choose-card { position: relative; overflow: hidden; box-shadow: var(--shadow-sm); } .why-choose-card::after { content: ''; position: absolute; inset: auto 0 0 0; height: 3px; background: var(--gradient-primary); transform: scaleX(0); transform-origin: left; transition: transform 0.3s ease; } .why-choose-card:hover::after { transform: scaleX(1); } .why-choose-icon { transition: transform 0.3s ease, background 0.3s ease, color 0.3s ease; } .why-choose-card:hover .why-choose-icon { transform: scale(1.08); background: var(--primary); color: var(--white); } .taxonomy-stack { gap: 1.5rem; } .taxonomy-pillar { position: relative; padding: 2rem 2rem 1.75rem; box-shadow: var(--shadow-sm); overflow: hidden; } .taxonomy-pillar::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--primary); } .taxonomy-stack .taxonomy-pillar:nth-child(2)::before { background: var(--accent); } .taxonomy-stack .taxonomy-pillar:nth-child(3)::before { background: var(--dark); } .taxonomy-kicker { display: inline-flex; align-items: baseline; gap: 0.55rem; margin-bottom: 0.65rem; } .taxonomy-kicker em { font-style: normal; font-size: 1.375rem; font-weight: 800; letter-spacing: -0.04em; color: var(--primary); font-family: var(--font-display); } .taxonomy-stack .taxonomy-pillar:nth-child(2) .taxonomy-kicker, .taxonomy-stack .taxonomy-pillar:nth-child(2) .taxonomy-kicker em { color: var(--accent); } .taxonomy-stack .taxonomy-pillar:nth-child(3) .taxonomy-kicker, .taxonomy-stack .taxonomy-pillar:nth-child(3) .taxonomy-kicker em { color: var(--dark); } .taxonomy-card { background: var(--white); box-shadow: var(--shadow-sm); } .taxonomy-card i { transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease; } .taxonomy-card:hover i { transform: scale(1.08); background: var(--primary); color: var(--white); } .service-tabs-section { background: radial-gradient(ellipse 70% 80% at 0% 0%, rgba(13, 148, 136, 0.18) 0%, transparent 50%), radial-gradient(ellipse 50% 60% at 100% 100%, rgba(45, 212, 191, 0.16) 0%, transparent 45%), var(--primary-dark); } .tab-nav { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--radius-full); padding: 0.4rem; width: fit-content; margin-left: auto; margin-right: auto; margin-bottom: 2.25rem; } .tab-panel.is-active .tab-content-grid { background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: var(--radius-xl); padding: 2.25rem; } .tab-visual { background: rgba(255, 255, 255, 0.07); border-radius: var(--radius-xl); padding: 2.5rem 2rem; } .dark-spotlight { padding: 3.25rem; gap: 3.25rem; } .spotlight-item { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: var(--radius-sm); padding: 0.65rem 0.85rem; } .dark-spotlight .btn-glass { background: transparent; color: var(--white); border-color: rgba(255, 255, 255, 0.28); } .dark-spotlight .btn-glass:hover { background: var(--white); color: var(--primary-dark); border-color: var(--white); } .process-grid { position: relative; gap: 1.25rem; } .process-step { text-align: left; padding: 1.75rem 1.5rem 1.65rem; box-shadow: var(--shadow-sm); } .process-step::after { display: none !important; } .process-num { display: inline-flex; align-items: center; background: var(--primary); color: var(--white); padding: 0.3rem 0.7rem; border-radius: var(--radius-sm); font-size: 0.625rem; letter-spacing: 0.12em; margin-bottom: 1rem; } .process-step:hover .process-num { background: var(--accent); } .team-card { box-shadow: var(--shadow-sm); } .team-photo { transition: transform 0.3s ease, box-shadow 0.3s ease; } .team-card:hover .team-photo { transform: scale(1.06); box-shadow: 0 0 0 4px var(--white), 0 0 0 7px var(--primary); } .team-role { display: inline-block; padding: 0.2rem 0.65rem; background: var(--primary-soft); border-radius: var(--radius-full); } .pricing-card { box-shadow: var(--shadow-sm); display: flex; flex-direction: column; } .pricing-card .btn { margin-top: auto; } .pricing-quote { font-family: var(--font-display); font-size: 1.375rem; letter-spacing: -0.02em; } .pricing-card.featured { transform: translateY(-8px) scale(1.02); } .pricing-card.featured .pricing-quote { color: var(--white); } .pricing-card.featured .btn-white { background: var(--white); color: var(--primary-dark); font-weight: 700; } .portfolio-card { box-shadow: var(--shadow-sm); } .shot-frame { border-radius: 12px 12px 0 0; } .portfolio-badge { top: auto; bottom: 0.85rem; left: 0.85rem; box-shadow: 0 4px 12px rgba(13, 148, 136, 0.35); } .portfolio-content h4 { letter-spacing: -0.02em; } .portfolio-metric { background: var(--accent-soft); padding: 0.35rem 0.7rem; border-radius: var(--radius-full); } .testimonial-card { box-shadow: var(--shadow-sm); display: flex; flex-direction: column; } .testimonial-author { margin-top: auto; } .blog-card { box-shadow: var(--shadow-sm); } .blog-content time { display: inline-flex; align-items: center; gap: 0.35rem; text-transform: uppercase; letter-spacing: 0.06em; } .faq-search-box input { background: var(--white); box-shadow: var(--shadow-sm); } .faq-item { box-shadow: var(--shadow-sm); } .newsletter-section { background: radial-gradient(ellipse 60% 80% at 0% 50%, rgba(255, 255, 255, 0.12) 0%, transparent 50%), var(--gradient-primary); } .newsletter-form { background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.22); padding: 0.5rem; border-radius: var(--radius-md); backdrop-filter: blur(8px); } .newsletter-form input { border-radius: var(--radius-sm); } .newsletter-form .btn { border-radius: var(--radius-sm); white-space: nowrap; } .cta-band-actions .btn-glass { background: transparent; color: var(--white); border-color: rgba(255, 255, 255, 0.28); } .cta-band-actions .btn-glass:hover { background: var(--white); color: var(--dark); border-color: var(--white); } .footer-logo { height: 44px; width: auto; background: #fff; padding: 6px 12px; border-radius: 8px; display: inline-block; } .footer-brand { display: flex; flex-direction: column; align-items: flex-start; } .copyright-bar { border-top: 1px solid var(--dark-border); } .page-hero { padding: 2.25rem 0 2.5rem; } .page-hero .hero-title { font-size: clamp(1.85rem, 4vw, 2.75rem); max-width: 18ch; margin-left: auto; margin-right: auto; } .page-hero .hero-description { font-size: 1.0625rem; } .breadcrumbs { background: var(--white); padding: 0.7rem 0; } .breadcrumbs a { font-weight: 500; } .contact-info-card { box-shadow: 0 20px 50px rgba(24, 24, 27, 0.18); } .contact-info-card .industry-chips span { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.14); color: rgba(255, 255, 255, 0.92); font-size: 0.8125rem; padding: 0.4rem 0.75rem; } .contact-form-box { box-shadow: var(--shadow-lg); } .form-control, .form-group input, .form-group textarea, .form-group select { background: var(--bg); } .form-control:focus, .form-group input:focus, .form-group textarea:focus, .form-group select:focus { background: var(--white); } .inner-cta-panel { background: var(--white); box-shadow: var(--shadow-md); padding: 2.5rem 2rem; } .article-wrap h2 { letter-spacing: -0.02em; } @media (min-width: 1025px) { .hero-channels { justify-content: flex-start; } } @media (max-width: 1024px) { .hero-channels { justify-content: center; } .tab-nav { width: 100%; justify-content: flex-start; border-radius: var(--radius-md); overflow-x: auto; } .tab-panel.is-active .tab-content-grid { padding: 1.5rem; } .pricing-card.featured { transform: none; } .dark-spotlight { padding: 2rem; } .brand-logo img { height: 42px; } } @media (max-width: 768px) { .hero-modern { padding: 1.75rem 0 2rem; } .hero-channels { justify-content: center; gap: 0.35rem; margin-bottom: 0.85rem; } .hero-channels li { font-size: 0.6875rem; padding: 0.28rem 0.55rem; } .clients-section { padding: 1.35rem 0 1.15rem; } .clients-industries { gap: 0.45rem; } .clients-industries span { padding: 0.35rem 0.65rem; font-size: 0.6875rem; } .taxonomy-pillar { padding: 1.25rem 1.15rem 1.15rem; } .tab-panel.is-active .tab-content-grid { padding: 1.15rem; } .process-step { text-align: left; } .footer-brand { align-items: center; } .page-hero { padding: 1.75rem 0 2rem; } .page-hero .hero-title { max-width: none; } .section-alt + .section-alt { padding-top: 2.25rem; } .newsletter-form { flex-direction: column; } .stats-section .stats-grid { grid-template-columns: repeat(2, 1fr); } .why-choose-section .why-choose-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .hero-channels li { font-size: 0.625rem; } .stat-card::before { left: 28%; right: 28%; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } .clients-strip.is-marquee .clients-track { animation: none; } } .hero-modern .hero-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); max-width: none; margin-inline: 0; justify-items: stretch; align-items: center; text-align: left; gap: 3.5rem; } .page-hero, .page-hero-inner, .section-header:not(.is-split), .why-choose-card, .process-step, .team-card, .pricing-card, .stat-card { text-align: center; } .hero-text { display: flex; flex-direction: column; align-items: flex-start; width: 100%; text-align: left; } .hero-media { width: 100%; max-width: none; margin-inline: 0; order: 0; position: relative; z-index: 2; animation: none; } .hero-modern .hero-frame { background: #134e4a; } .hero-modern .hero-description { margin-left: 0; margin-right: auto; } .hero-modern .hero-channels, .hero-modern .hero-cta, .hero-modern .hero-trust-list { justify-content: flex-start; } .section-header:not(.is-split) .sub-title, .section-header:not(.is-split) .section-desc, .page-hero .hero-description { margin-left: auto; margin-right: auto; } .hero-modern .hero-description, .taxonomy-pillar > p, .spotlight-text p { margin-left: 0; margin-right: 0; } .section-header.is-split { flex-direction: row; align-items: flex-end; text-align: left; max-width: none; margin-left: 0; margin-right: 0; } .section-header.is-split .sub-title { margin-left: 0; margin-right: 0; } .section-header.is-split .section-desc { text-align: left !important; } .cta-band-inner { flex-direction: row; align-items: center; justify-content: space-between; text-align: left; } .cta-band-actions { justify-content: flex-start; } .tab-content-grid, .dark-spotlight, .contact-grid, .newsletter-inner { justify-items: stretch; } .pricing-features, .tab-feature-list, .feature-list, .footer-grid, .footer-brand, .footer-col, .contact-method, .article-wrap, .testimonial-card, .bento-card, .taxonomy-pillar, .faq-item, .form-group { text-align: left; } .pricing-features li, .tab-feature-list li, .feature-list li, .spotlight-item { justify-content: flex-start; } .calc-radio-card { text-align: center; } @media (min-width: 1025px) { .hero-modern .hero-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); } .hero-media { order: 0; max-width: none; } .hero-modern .hero-channels, .hero-modern .hero-cta, .hero-modern .hero-trust-list { justify-content: flex-start; } } @media (max-width: 1024px) { .hero-modern .hero-grid { grid-template-columns: 1fr; max-width: 780px; margin-inline: auto; text-align: center; gap: 2.25rem; } .hero-text { align-items: center; text-align: center; } .hero-media { order: 0; max-width: 560px; margin-inline: auto; } .hero-modern .hero-description { margin-left: auto; margin-right: auto; } .hero-modern .hero-channels, .hero-modern .hero-cta, .hero-modern .hero-trust-list { justify-content: center; } } @media (max-width: 768px) { .process-step { text-align: center; } .newsletter-form { width: 100%; } } .service-tabs-section { padding: 2.75rem 0; } .service-tabs-section .section-header { margin-bottom: 1.5rem; max-width: 640px; } .service-tabs-section .main-title { margin-bottom: 0.5rem; } .service-tabs-section .section-desc { font-size: 0.9375rem; } .service-tabs-section .tab-nav { margin-bottom: 1.25rem; padding: 0.3rem; } .service-tabs-section .tab-btn { padding: 0.5rem 1rem; font-size: 0.75rem; } .service-tabs-section .tab-panel.is-active .tab-content-grid { padding: 1.35rem 1.5rem; border-radius: var(--radius-lg); } .service-tabs-section .tab-content-grid h3 { font-size: 1.25rem; margin-bottom: 0.75rem; } .service-tabs-section .tab-feature-list li { padding: 0.4rem 0; font-size: 0.875rem; justify-content: flex-start; text-align: left; } .service-tabs-section .tab-visual { padding: 1.25rem 1.15rem; border-radius: var(--radius-lg); } .service-tabs-section .tab-visual .big-stat { font-size: 2.5rem; line-height: 1; } .service-tabs-section .tab-visual p { font-size: 0.8125rem; margin-top: 0.4rem; } .service-tabs-section .tab-content-grid .btn { margin-top: 1rem; } @media (min-width: 1025px) { .service-tabs-section .tab-content-grid { grid-template-columns: 1.25fr 0.75fr; gap: 1.5rem; align-items: center; justify-items: stretch; text-align: left; } .service-tabs-section .tab-visual { text-align: center; } } .section-padding:has(.dark-spotlight) { padding-top: 2.5rem; padding-bottom: 2.5rem; } .dark-spotlight { padding: 1.35rem 1.5rem; gap: 1.35rem; border-radius: var(--radius-lg); } .spotlight-text { text-align: left; } .spotlight-text .sub-title { margin-bottom: 0.4rem; } .spotlight-text h2 { font-size: clamp(1.2rem, 2.2vw, 1.55rem); margin-bottom: 0.5rem; letter-spacing: -0.03em; } .spotlight-text p { font-size: 0.9rem; line-height: 1.55; margin-bottom: 0.9rem; margin-left: 0; margin-right: 0; } .spotlight-grid { gap: 0.45rem; margin-bottom: 1.1rem; } .spotlight-item { padding: 0.4rem 0.65rem; font-size: 0.8125rem; justify-content: flex-start; text-align: left; } .dark-spotlight .hero-cta { justify-content: flex-start; gap: 0.65rem; } .dark-spotlight .btn { padding: 0.55rem 1.05rem; min-height: 42px; font-size: 0.875rem; } .spotlight-media { width: 100%; } .spotlight-media img, .dark-spotlight img { width: 100%; max-width: none; margin: 0; height: 100%; max-height: 320px; object-fit: cover; border-radius: var(--radius-md); } @media (min-width: 1025px) { .dark-spotlight { grid-template-columns: 1.15fr 0.85fr; justify-items: stretch; text-align: left; align-items: center; } } .container { max-width: 1140px; } .brand-logo img { height: 40px; } .navbar { height: var(--header-height); } .nav-link { font-size: 0.8125rem; padding: 0.4rem 0.8rem; } .top-bar { padding: 0.4rem 0; font-size: 0.75rem; } .why-choose-card, .taxonomy-pillar, .process-step, .team-card, .pricing-card, .testimonial-card, .bento-card, .service-card-mini { padding: 1.35rem 1.25rem; } .taxonomy-grid { gap: 0.75rem; } .taxonomy-card { padding: 0.95rem 0.9rem; } .stats-section { padding: 1.5rem 0; } .stat-number { font-size: 2.25rem; } .cta-band { padding: 2.5rem 0; } .newsletter-section { padding: 2.5rem 0; } .site-footer { padding: 2.75rem 0 0; } .footer-grid { gap: 1.75rem; padding-bottom: 2rem; } .btn { padding: 0.65rem 1.25rem; font-size: 0.875rem; } .hero-cta { gap: 0.75rem; } .clients-section { padding: 1.5rem 0 1.25rem; } .work-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin-top: 2.25rem; } .work-card { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; text-decoration: none; color: inherit; min-height: 100%; transition: var(--transition); } .work-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: rgba(13, 148, 136, 0.28); } .work-visual { position: relative; min-height: 148px; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; padding: 1.15rem 1.2rem 1rem; color: #fff; } .work-visual--green { background: linear-gradient(145deg, #0d9488 0%, #115e59 100%); } .work-visual--teal { background: linear-gradient(145deg, #0f766e 0%, #134e4a 100%); } .work-visual--navy { background: linear-gradient(145deg, #115e59 0%, #10211f 100%); } .work-visual--rose { background: linear-gradient(145deg, #14b8a6 0%, #0f766e 100%); } .work-visual--gold { background: linear-gradient(145deg, #0d9488 0%, #164e63 100%); } .work-visual--sky { background: linear-gradient(145deg, #0f766e 0%, #0c4a6e 100%); } .work-mark { font-family: var(--font-display); font-size: 1.75rem; font-weight: 800; letter-spacing: -0.04em; line-height: 1; margin-bottom: 0.45rem; } .work-url { font-size: 0.75rem; font-weight: 600; opacity: 0.85; word-break: break-all; } .work-body { display: flex; flex-direction: column; gap: 0.45rem; padding: 1.15rem 1.2rem 1.25rem; flex: 1; } .work-tag { display: inline-flex; align-self: flex-start; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--primary); background: rgba(13, 148, 136, 0.1); border-radius: 999px; padding: 0.25rem 0.6rem; } .work-body h3 { font-size: 1.0625rem; font-weight: 700; margin: 0; color: var(--text); } .work-body p { font-size: 0.875rem; line-height: 1.6; color: var(--text-secondary); margin: 0; flex: 1; } .work-cta { margin-top: 0.35rem; font-size: 0.8125rem; font-weight: 700; color: var(--primary); } .hero-modern .hero-title { color: var(--text); } .hero-modern .hero-description { color: var(--text-secondary); } .work-card:hover .work-cta { color: var(--primary-dark); } .team-photo i { font-size: 1.25rem; } @media (max-width: 1024px) { .work-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .work-grid { grid-template-columns: 1fr; gap: 1rem; margin-top: 1.5rem; } .work-visual { min-height: 128px; } } html body .cv-mixed-light.cv-mixed-light.cv-mixed-light { background: #fff !important; color: #172033 !important; --cv-text-light: #172033; --cv-text-light-muted: #536176; --cv-border-dark: #dce3ed; --cv-bg-dark-card: #f5f7fb; } html body .cv-mixed-panel { padding: clamp(24px, 4vw, 48px); border-radius: 24px; margin-top: 28px; margin-bottom: 36px; } html body .cv-mixed-light.cv-mixed-light.cv-mixed-light :is(h1,h2,h3,h4,h5,h6,p,li,label,blockquote,summary,small,strong,span), html body .cv-mixed-light.cv-mixed-light.cv-mixed-light [class*="title"], html body .cv-mixed-light.cv-mixed-light.cv-mixed-light [class*="heading"], html body .cv-mixed-light.cv-mixed-light.cv-mixed-light [class*="name"], html body .cv-mixed-light.cv-mixed-light.cv-mixed-light [class*="year"], html body .cv-mixed-light.cv-mixed-light.cv-mixed-light [class*="question"] { color: #172033 !important; -webkit-text-fill-color: #172033 !important; } html body .cv-mixed-light.cv-mixed-light.cv-mixed-light :is(p,li,small,blockquote), html body .cv-mixed-light.cv-mixed-light.cv-mixed-light [class*="desc"], html body .cv-mixed-light.cv-mixed-light.cv-mixed-light [class*="subtitle"], html body .cv-mixed-light.cv-mixed-light.cv-mixed-light [class*="role"], html body .cv-mixed-light.cv-mixed-light.cv-mixed-light [class*="sub"], html body .cv-mixed-light.cv-mixed-light.cv-mixed-light [class*="answer"], html body .cv-mixed-light.cv-mixed-light.cv-mixed-light [class*="text"] { color: #536176 !important; -webkit-text-fill-color: #536176 !important; } html body .cv-mixed-light.cv-mixed-light.cv-mixed-light :is([class*="card"],[class*="box"],[class*="pill"],.cv-faq-item,.cv-about-val-pill) { background: #f7f9fc !important; border-color: #dce3ed !important; box-shadow: 0 8px 28px rgba(15,23,42,.05) !important; } html body .cv-mixed-light.cv-mixed-light.cv-mixed-light :is(a,button) { color: #1d4ed8; } html body .cv-mixed-light.cv-mixed-light.cv-mixed-light :is([class*="badge"],[class*="eyebrow"]), html body .cv-mixed-light.cv-mixed-light.cv-mixed-light :is(.cv-heading-accent,.cv-heading-script) { color: #1d4ed8 !important; -webkit-text-fill-color: #1d4ed8 !important; } html body .cv-mixed-light.cv-mixed-light.cv-mixed-light :is(.cv-btn-primary,.btn-primary,[class*="submit"]), html body .cv-mixed-light.cv-mixed-light.cv-mixed-light :is(.cv-btn-primary,.btn-primary,[class*="submit"]) * { color: #fff !important; -webkit-text-fill-color: #fff !important; background-color: #1d4ed8; } html body .cv-mixed-light.cv-mixed-light.cv-mixed-light :is(input,textarea,select) { color: #172033 !important; background: #fff !important; border-color: #cbd5e1 !important; } html body .cv-mixed-light.cv-mixed-light.cv-mixed-light :is(input,textarea)::placeholder { color: #64748b; } html body .cv-mixed-light.cv-mixed-light.cv-mixed-light :is(.cv-btn-outline,.cv-btn-secondary) { color: #1d4ed8 !important; border-color: #1d4ed8 !important; background: #eff6ff !important; } html body .cv-mixed-light.cv-mixed-light.cv-mixed-light .cv-heading-gold { background: none !important; color: #a16207 !important; -webkit-text-fill-color: #a16207 !important; } @media(max-width:640px) { html body .cv-mixed-panel { padding: 22px 16px; border-radius: 16px; } } html body .cv-mixed-light.cv-mixed-light.cv-mixed-light :is(.cv-btn-primary,.btn-primary,[class*="submit"]) { background: #1d4ed8 !important; } html body .cv-mixed-light.cv-mixed-light.cv-mixed-light [class*="social"] a i { color: #fff !important; -webkit-text-fill-color: #fff !important; } :root { --cv-font-sans: 'Sora', sans-serif; --cv-font-body: 'DM Sans', sans-serif; --cv-font-heading: 'Sora', sans-serif; --font-heading: 'Sora', sans-serif; --font-body: 'DM Sans', sans-serif; --cv-gold-1: #fde68a; --cv-gold-2: #f59e0b; --cv-gold-3: #d97706; --cv-gold-gradient: linear-gradient(135deg, #fde68a 0%, #f59e0b 50%, #d97706 100%); --cv-gold-glow: 0 8px 24px rgba(245, 158, 11, 0.38); --cv-blue-glow: 0 8px 24px rgba(37, 99, 235, 0.28); } html { scroll-behavior: smooth; } body.cv-redesign { font-family: 'DM Sans', sans-serif !important; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body :is(h1,h2,h3,h4,h5,h6,[class*="heading"],[class*="title"],[class*="stat-num"],[class*="metric-val"]) { font-family: 'Sora', sans-serif !important; letter-spacing: -0.025em; } body :is(input,textarea,select) { font-size: 16px !important; } body :is(p,li) { line-height: 1.7; } .cv-navbar { transition: all 0.3s ease; } .cv-hero-section { position: relative; overflow: hidden; } .cv-btn-gold { background: linear-gradient(135deg, #fde68a 0%, #f59e0b 50%, #d97706 100%) !important; color: #0b1324 !important; font-weight: 800 !important; border-radius: 999px !important; box-shadow: 0 8px 22px rgba(245, 158, 11, 0.4) !important; transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important; border: none !important; } .cv-btn-gold:hover { transform: translateY(-2px) scale(1.02) !important; box-shadow: 0 12px 30px rgba(245, 158, 11, 0.55) !important; } .cv-btn-gold :is(span, i) { color: #0b1324 !important; -webkit-text-fill-color: #0b1324 !important; } .cv-btn-outline-dark { border: 1px solid rgba(255, 255, 255, 0.18) !important; border-radius: 999px !important; background: rgba(255, 255, 255, 0.04) !important; backdrop-filter: blur(8px) !important; color: #ffffff !important; transition: all 0.28s ease !important; } .cv-btn-outline-dark:hover { background: rgba(255, 255, 255, 0.1) !important; border-color: rgba(255, 255, 255, 0.35) !important; transform: translateY(-2px) !important; } .cv-hero-pillars { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 24px; } .cv-pillar-item { display: flex; align-items: center; gap: 10px; background: rgba(14, 26, 47, 0.6); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 12px; padding: 10px 14px; backdrop-filter: blur(8px); } .cv-pillar-icon { color: #fbbf24 !important; font-size: 16px; } .cv-pillar-text { font-size: 12px; font-weight: 600; color: #cbd5e1; line-height: 1.25; } .cv-hero-metrics-bar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 48px; } .cv-metric-box { background: rgba(11, 23, 42, 0.85) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; border-radius: 18px !important; padding: 22px 20px !important; display: flex; align-items: center; gap: 16px; backdrop-filter: blur(12px) !important; transition: all 0.28s ease !important; } .cv-metric-box:hover { transform: translateY(-3px) !important; border-color: rgba(245, 158, 11, 0.35) !important; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3) !important; } .cv-metric-icon { width: 48px; height: 48px; border-radius: 14px; background: rgba(245, 158, 11, 0.12) !important; color: #fbbf24 !important; display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; } .cv-metric-value { font-family: 'Sora', sans-serif !important; font-size: 24px !important; font-weight: 800 !important; color: #ffffff !important; } .cv-what-section { background: #ffffff !important; padding: clamp(54px, 5.5vw, 76px) 0 !important; position: relative; border-bottom: 1px solid #f1f5f9; } .cv-what-grid { display: grid !important; grid-template-columns: minmax(360px, 400px) 1fr !important; align-items: center !important; gap: clamp(32px, 4.5vw, 64px) !important; } .cv-what-header { display: flex !important; flex-direction: column !important; align-items: flex-start !important; text-align: left !important; } html body .cv-what-badge { display: inline-block !important; font-family: 'Sora', sans-serif !important; font-size: 11.5px !important; font-weight: 800 !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; color: #2563eb !important; -webkit-text-fill-color: #2563eb !important; margin-bottom: 10px !important; } html body .cv-what-heading { font-family: 'Sora', sans-serif !important; font-size: clamp(26px, 2.4vw, 34px) !important; font-weight: 800 !important; line-height: 1.18 !important; color: #0b1324 !important; -webkit-text-fill-color: #0b1324 !important; letter-spacing: -0.03em !important; margin: 0 0 10px 0 !important; } html body .cv-mixed-light.cv-mixed-light.cv-mixed-light .cv-what-highlight, html body .cv-what-highlight { color: #2563eb !important; -webkit-text-fill-color: #2563eb !important; font-weight: 800 !important; } html body .cv-what-subheading { font-family: 'DM Sans', sans-serif !important; font-size: 14px !important; line-height: 1.55 !important; color: #64748b !important; -webkit-text-fill-color: #64748b !important; margin: 0 !important; max-width: 340px !important; } .cv-what-flow { display: flex !important; align-items: flex-start !important; justify-content: space-between !important; gap: 6px !important; width: 100% !important; margin: 0 !important; } .cv-what-step { display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center !important; flex: 1 1 0 !important; min-width: 80px !important; max-width: 135px !important; position: relative !important; transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important; cursor: default !important; } .cv-what-step:hover { transform: translateY(-4px) !important; } .cv-what-icon { width: 56px !important; height: 56px !important; border-radius: 50% !important; background: #091322 !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; box-shadow: 0 8px 20px rgba(9, 19, 34, 0.16) !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 20px !important; margin-bottom: 12px !important; transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important; flex-shrink: 0 !important; } .cv-what-step:hover .cv-what-icon { transform: scale(1.08) !important; } .cv-what-text { display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center !important; } html body .cv-icon-strategy i { color: #fbbf24 !important; -webkit-text-fill-color: #fbbf24 !important; } .cv-what-step:hover .cv-icon-strategy { box-shadow: 0 10px 24px rgba(251, 191, 36, 0.3) !important; border-color: rgba(251, 191, 36, 0.4) !important; } html body .cv-icon-design i { color: #60a5fa !important; -webkit-text-fill-color: #60a5fa !important; } .cv-what-step:hover .cv-icon-design { box-shadow: 0 10px 24px rgba(96, 165, 250, 0.3) !important; border-color: rgba(96, 165, 250, 0.4) !important; } html body .cv-icon-tech i { color: #38bdf8 !important; -webkit-text-fill-color: #38bdf8 !important; } .cv-what-step:hover .cv-icon-tech { box-shadow: 0 10px 24px rgba(56, 189, 248, 0.3) !important; border-color: rgba(56, 189, 248, 0.4) !important; } html body .cv-icon-marketing i { color: #fb923c !important; -webkit-text-fill-color: #fb923c !important; } .cv-what-step:hover .cv-icon-marketing { box-shadow: 0 10px 24px rgba(251, 146, 60, 0.3) !important; border-color: rgba(251, 146, 60, 0.4) !important; } html body .cv-icon-growth i { color: #4ade80 !important; -webkit-text-fill-color: #4ade80 !important; } .cv-what-step:hover .cv-icon-growth { box-shadow: 0 10px 24px rgba(74, 222, 128, 0.3) !important; border-color: rgba(74, 222, 128, 0.4) !important; } html body .cv-what-step-title { font-family: 'Sora', sans-serif !important; font-size: 14.5px !important; font-weight: 700 !important; color: #0f172a !important; -webkit-text-fill-color: #0f172a !important; margin: 0 0 4px 0 !important; letter-spacing: -0.01em !important; white-space: nowrap !important; } html body .cv-what-step-desc { font-family: 'DM Sans', sans-serif !important; font-size: 12px !important; line-height: 1.35 !important; color: #64748b !important; -webkit-text-fill-color: #64748b !important; margin: 0 !important; text-align: center !important; } .cv-what-arrow { display: flex !important; align-items: center !important; justify-content: center !important; color: #94a3b8 !important; font-size: 13px !important; height: 56px !important; padding: 0 2px !important; flex-shrink: 0 !important; opacity: 0.65 !important; transition: transform 0.2s ease, opacity 0.2s ease !important; } .cv-what-step:hover + .cv-what-arrow { transform: translateX(3px) !important; opacity: 1 !important; color: #2563eb !important; } @media (max-width: 1120px) { .cv-what-grid { grid-template-columns: 1fr !important; gap: 36px !important; } .cv-what-header { text-align: center !important; align-items: center !important; margin: 0 auto !important; } .cv-what-subheading { text-align: center !important; max-width: 520px !important; } } @media (max-width: 768px) { .cv-what-arrow { display: none !important; } .cv-what-flow { display: grid !important; grid-template-columns: repeat(5, 1fr) !important; gap: 8px !important; } .cv-what-step { max-width: none !important; min-width: 0 !important; } .cv-what-icon { width: 48px !important; height: 48px !important; font-size: 18px !important; } .cv-what-step-title { font-size: 13px !important; } .cv-what-step-desc { font-size: 11px !important; } } @media (max-width: 560px) { .cv-what-grid { gap: 24px !important; } .cv-what-flow { display: flex !important; flex-direction: column !important; gap: 12px !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; } .cv-what-step { width: 100% !important; max-width: 100% !important; display: flex !important; flex-direction: row !important; align-items: center !important; text-align: left !important; gap: 16px !important; padding: 14px 18px !important; background: #f8fafc !important; border: 1px solid #e2e8f0 !important; border-radius: 16px !important; box-shadow: 0 4px 14px rgba(15, 23, 42, 0.03) !important; box-sizing: border-box !important; } .cv-what-step:hover { transform: translateY(-2px) !important; border-color: #cbd5e1 !important; } .cv-what-icon { width: 44px !important; height: 44px !important; font-size: 16px !important; margin-bottom: 0 !important; flex-shrink: 0 !important; } .cv-what-text { display: flex !important; flex-direction: column !important; align-items: flex-start !important; text-align: left !important; flex: 1 1 auto !important; } .cv-what-step-title { font-size: 14.5px !important; margin-bottom: 2px !important; text-align: left !important; } .cv-what-step-desc { text-align: left !important; font-size: 12px !important; line-height: 1.35 !important; display: block !important; } .cv-what-step-desc br { display: inline !important; } .cv-what-step-desc br::after { content: " "; } } .cv-services-section { background: #070d19 !important; padding: clamp(54px, 5.5vw, 76px) 0 !important; position: relative; border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important; } .cv-services-header { display: flex !important; align-items: flex-end !important; justify-content: space-between !important; margin-bottom: 28px !important; gap: 20px !important; } .cv-services-title-wrap { display: flex !important; flex-direction: column !important; align-items: flex-start !important; text-align: left !important; } html body .cv-services-badge { display: inline-block !important; font-family: 'Sora', sans-serif !important; font-size: 11.5px !important; font-weight: 800 !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; color: #38bdf8 !important; -webkit-text-fill-color: #38bdf8 !important; margin-bottom: 8px !important; } html body .cv-services-heading { font-family: 'Sora', sans-serif !important; font-size: clamp(26px, 2.4vw, 34px) !important; font-weight: 800 !important; line-height: 1.2 !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; letter-spacing: -0.03em !important; margin: 0 !important; } html body .cv-mixed-light.cv-mixed-light.cv-mixed-light .cv-services-highlight, html body .cv-services-highlight { color: #38bdf8 !important; -webkit-text-fill-color: #38bdf8 !important; font-weight: 800 !important; } html body .cv-services-link { font-family: 'Sora', sans-serif !important; font-size: 13.5px !important; font-weight: 600 !important; color: #38bdf8 !important; -webkit-text-fill-color: #38bdf8 !important; text-decoration: none !important; display: inline-flex !important; align-items: center !important; gap: 8px !important; padding-bottom: 4px !important; transition: all 0.22s ease !important; white-space: nowrap !important; } html body .cv-services-link:hover { color: #7dd3fc !important; -webkit-text-fill-color: #7dd3fc !important; transform: translateX(3px) !important; } .cv-services-grid { display: grid !important; grid-template-columns: repeat(5, 1fr) !important; gap: 14px !important; } .cv-service-card { background: #ffffff !important; border: 1px solid rgba(255, 255, 255, 0.25) !important; border-radius: 18px !important; padding: 15px 16px !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; text-decoration: none !important; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.38) !important; transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important; box-sizing: border-box !important; position: relative !important; } .cv-service-card:hover { transform: translateY(-4px) !important; background: #ffffff !important; border-color: #38bdf8 !important; box-shadow: 0 16px 36px rgba(0, 0, 0, 0.5), 0 0 20px rgba(56, 189, 248, 0.2) !important; } .cv-service-left { display: flex !important; align-items: center !important; gap: 14px !important; min-width: 0 !important; flex: 1 1 auto !important; } .cv-service-icon { width: 44px !important; height: 44px !important; border-radius: 14px !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 18px !important; flex-shrink: 0 !important; transition: transform 0.25s ease, box-shadow 0.25s ease !important; } .cv-service-card:hover .cv-service-icon { transform: scale(1.1) !important; } .cv-service-icon.peach { background: #fff7ed !important; border: 1px solid rgba(234, 88, 12, 0.25) !important; box-shadow: 0 4px 12px rgba(234, 88, 12, 0.12) !important; } .cv-service-icon.peach i { color: #ea580c !important; -webkit-text-fill-color: #ea580c !important; } .cv-service-icon.coral { background: #fef2f2 !important; border: 1px solid rgba(239, 68, 68, 0.25) !important; box-shadow: 0 4px 12px rgba(239, 68, 68, 0.12) !important; } .cv-service-icon.coral i { color: #dc2626 !important; -webkit-text-fill-color: #dc2626 !important; } .cv-service-icon.sky { background: #f0f9ff !important; border: 1px solid rgba(2, 132, 199, 0.25) !important; box-shadow: 0 4px 12px rgba(2, 132, 199, 0.12) !important; } .cv-service-icon.sky i { color: #0284c7 !important; -webkit-text-fill-color: #0284c7 !important; } .cv-service-icon.rose { background: #fff1f2 !important; border: 1px solid rgba(244, 63, 94, 0.25) !important; box-shadow: 0 4px 12px rgba(244, 63, 94, 0.12) !important; } .cv-service-icon.rose i { color: #e11d48 !important; -webkit-text-fill-color: #e11d48 !important; } .cv-service-icon.blue { background: #eff6ff !important; border: 1px solid rgba(37, 99, 235, 0.25) !important; box-shadow: 0 4px 12px rgba(37, 99, 235, 0.12) !important; } .cv-service-icon.blue i { color: #2563eb !important; -webkit-text-fill-color: #2563eb !important; } .cv-service-icon.cyan { background: #ecfeff !important; border: 1px solid rgba(8, 145, 178, 0.25) !important; box-shadow: 0 4px 12px rgba(8, 145, 178, 0.12) !important; } .cv-service-icon.cyan i { color: #0891b2 !important; -webkit-text-fill-color: #0891b2 !important; } .cv-service-icon.violet { background: #f5f3ff !important; border: 1px solid rgba(124, 58, 237, 0.25) !important; box-shadow: 0 4px 12px rgba(124, 58, 237, 0.12) !important; } .cv-service-icon.violet i { color: #7c3aed !important; -webkit-text-fill-color: #7c3aed !important; } .cv-service-icon.purple { background: #fdf4ff !important; border: 1px solid rgba(192, 38, 211, 0.25) !important; box-shadow: 0 4px 12px rgba(192, 38, 211, 0.12) !important; } .cv-service-icon.purple i { color: #c026d3 !important; -webkit-text-fill-color: #c026d3 !important; } .cv-service-icon.mint { background: #f0fdf4 !important; border: 1px solid rgba(16, 185, 129, 0.25) !important; box-shadow: 0 4px 12px rgba(16, 185, 129, 0.12) !important; } .cv-service-icon.mint i { color: #059669 !important; -webkit-text-fill-color: #059669 !important; } .cv-service-icon.emerald { background: #f0fdf4 !important; border: 1px solid rgba(5, 150, 105, 0.25) !important; box-shadow: 0 4px 12px rgba(5, 150, 105, 0.12) !important; } .cv-service-icon.emerald i { color: #16a34a !important; -webkit-text-fill-color: #16a34a !important; } .cv-service-texts { display: flex !important; flex-direction: column !important; min-width: 0 !important; flex: 1 1 auto !important; } html body .cv-service-title { font-family: 'Sora', sans-serif !important; font-size: 14px !important; font-weight: 800 !important; color: #0f172a !important; -webkit-text-fill-color: #0f172a !important; line-height: 1.25 !important; margin-bottom: 3px !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; transition: color 0.2s ease !important; } .cv-service-card:hover .cv-service-title { color: #0284c7 !important; -webkit-text-fill-color: #0284c7 !important; } html body .cv-service-sub { font-family: 'DM Sans', sans-serif !important; font-size: 11.5px !important; font-weight: 500 !important; color: #64748b !important; -webkit-text-fill-color: #64748b !important; line-height: 1.3 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } .cv-service-arrow { width: 28px !important; height: 28px !important; border-radius: 50% !important; background: #f1f5f9 !important; border: 1px solid #e2e8f0 !important; color: #475569 !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 10px !important; transition: all 0.24s cubic-bezier(0.16, 1, 0.3, 1) !important; flex-shrink: 0 !important; } .cv-service-card:hover .cv-service-arrow { background: #0f172a !important; color: #ffffff !important; border-color: #0f172a !important; transform: translateX(3px) !important; } @media (max-width: 1240px) { .cv-services-grid { grid-template-columns: repeat(3, 1fr) !important; } } @media (max-width: 820px) { .cv-services-grid { grid-template-columns: repeat(2, 1fr) !important; } .cv-services-header { flex-direction: column !important; align-items: flex-start !important; gap: 12px !important; } } @media (max-width: 540px) { .cv-services-grid { grid-template-columns: 1fr !important; gap: 10px !important; } .cv-service-card { padding: 12px 14px !important; } .cv-service-title { font-size: 13.5px !important; } } .cv-industries-section { background: #ffffff !important; padding: clamp(54px, 5.5vw, 76px) 0 !important; position: relative; border-bottom: 1px solid #f1f5f9 !important; } .cv-industries-header { display: flex !important; align-items: flex-end !important; justify-content: space-between !important; margin-bottom: 26px !important; gap: 20px !important; } .cv-industries-title-wrap { display: flex !important; flex-direction: column !important; align-items: flex-start !important; text-align: left !important; } html body .cv-industries-badge { display: inline-block !important; font-family: 'Sora', sans-serif !important; font-size: 11.5px !important; font-weight: 800 !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; color: #2563eb !important; -webkit-text-fill-color: #2563eb !important; margin-bottom: 8px !important; } html body .cv-industries-heading { font-family: 'Sora', sans-serif !important; font-size: clamp(24px, 2.3vw, 33px) !important; font-weight: 800 !important; line-height: 1.22 !important; color: #0b1324 !important; -webkit-text-fill-color: #0b1324 !important; letter-spacing: -0.03em !important; margin: 0 !important; } html body .cv-ind-gold { color: #d97706 !important; -webkit-text-fill-color: #d97706 !important; font-weight: 800 !important; } html body .cv-ind-blue { color: #2563eb !important; -webkit-text-fill-color: #2563eb !important; font-weight: 800 !important; } html body .cv-industries-link { font-family: 'Sora', sans-serif !important; font-size: 13.5px !important; font-weight: 600 !important; color: #2563eb !important; -webkit-text-fill-color: #2563eb !important; text-decoration: none !important; display: inline-flex !important; align-items: center !important; gap: 8px !important; padding-bottom: 4px !important; transition: all 0.22s ease !important; white-space: nowrap !important; } html body .cv-industries-link:hover { color: #1d4ed8 !important; -webkit-text-fill-color: #1d4ed8 !important; transform: translateX(3px) !important; } .cv-industries-grid, .cv-industries-row { display: grid !important; grid-template-columns: repeat(12, 1fr) !important; gap: 10px !important; margin-top: 0 !important; width: 100% !important; } .cv-industry-pill { background: #ffffff !important; border: 1px solid #e2e8f0 !important; border-radius: 14px !important; padding: 14px 6px 12px 6px !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; text-align: center !important; gap: 8px !important; min-height: 82px !important; box-sizing: border-box !important; transition: all 0.26s cubic-bezier(0.16, 1, 0.3, 1) !important; box-shadow: 0 2px 10px rgba(15, 23, 42, 0.03) !important; cursor: default !important; } .cv-industry-pill:hover { transform: translateY(-4px) !important; background: #f8fafc !important; border-color: #3b82f6 !important; box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08) !important; } .cv-industry-icon, .cv-industry-pill .cv-industry-icon { font-size: 19px !important; color: #d97706 !important; -webkit-text-fill-color: #d97706 !important; transition: transform 0.25s ease !important; } .cv-industry-pill:hover .cv-industry-icon { transform: scale(1.12) !important; } .cv-industry-name, .cv-industry-pill .cv-industry-name { font-family: 'Sora', sans-serif !important; font-size: 11px !important; font-weight: 600 !important; color: #0f172a !important; -webkit-text-fill-color: #0f172a !important; line-height: 1.2 !important; text-align: center !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; } @media (max-width: 1240px) { .cv-industries-grid, .cv-industries-row { grid-template-columns: repeat(6, 1fr) !important; gap: 12px !important; } } @media (max-width: 820px) { .cv-industries-header { flex-direction: column !important; align-items: flex-start !important; gap: 12px !important; } .cv-industries-grid, .cv-industries-row { grid-template-columns: repeat(4, 1fr) !important; gap: 10px !important; } } @media (max-width: 560px) { .cv-industries-grid, .cv-industries-row { grid-template-columns: repeat(3, 1fr) !important; gap: 8px !important; } .cv-industry-pill { padding: 12px 6px !important; min-height: 74px !important; border-radius: 12px !important; } .cv-industry-icon { font-size: 17px !important; } .cv-industry-name { font-size: 10px !important; } } .cv-work-section { background: #070d18 !important; padding: clamp(54px, 5.5vw, 76px) 0 !important; position: relative !important; } .cv-work-header { display: flex !important; align-items: flex-end !important; justify-content: space-between !important; gap: 24px !important; margin-bottom: 28px !important; } .cv-work-title-wrap { display: flex !important; flex-direction: column !important; align-items: flex-start !important; text-align: left !important; } html body .cv-work-badge { display: inline-block !important; font-family: 'Sora', sans-serif !important; font-size: 11.5px !important; font-weight: 800 !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; color: #38bdf8 !important; -webkit-text-fill-color: #38bdf8 !important; margin-bottom: 8px !important; } html body .cv-work-heading { font-family: 'Sora', sans-serif !important; font-size: clamp(24px, 2.3vw, 32px) !important; font-weight: 800 !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; margin: 0 !important; line-height: 1.2 !important; letter-spacing: -0.02em !important; } html body .cv-work-gold { color: #fbbf24 !important; -webkit-text-fill-color: #fbbf24 !important; font-weight: 800 !important; } html body .cv-work-subheading { font-family: 'DM Sans', sans-serif !important; font-size: 13.5px !important; color: #94a3b8 !important; -webkit-text-fill-color: #94a3b8 !important; line-height: 1.45 !important; margin: 0 !important; max-width: 380px !important; } html body .cv-work-btn-all { font-family: 'Sora', sans-serif !important; font-size: 13px !important; font-weight: 600 !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; border: 1px solid rgba(255, 255, 255, 0.3) !important; border-radius: 999px !important; padding: 8px 20px !important; text-decoration: none !important; white-space: nowrap !important; transition: all 0.25s ease !important; display: inline-flex !important; align-items: center !important; gap: 6px !important; } html body .cv-work-btn-all:hover { background: rgba(255, 255, 255, 0.1) !important; border-color: #ffffff !important; transform: translateX(3px) !important; } .cv-work-grid { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 20px !important; margin-top: 0 !important; } .cv-work-card { background: #091322 !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; border-radius: 16px !important; overflow: hidden !important; text-decoration: none !important; transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important; display: flex !important; flex-direction: column !important; box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25) !important; } .cv-work-card:hover { transform: translateY(-4px) !important; border-color: rgba(251, 191, 36, 0.4) !important; box-shadow: 0 16px 36px rgba(0, 0, 0, 0.5) !important; } .cv-work-banner-img { width: 100% !important; aspect-ratio: 16 / 9.5 !important; object-fit: cover !important; display: block !important; transition: transform 0.35s ease !important; } .cv-work-card:hover .cv-work-banner-img { transform: scale(1.03) !important; } .cv-work-details { padding: 18px 20px !important; display: flex !important; flex-direction: column !important; } .cv-work-tags { font-family: 'DM Sans', sans-serif !important; font-size: 11.5px !important; color: #fbbf24 !important; -webkit-text-fill-color: #fbbf24 !important; font-weight: 600 !important; margin-bottom: 8px !important; display: block !important; } .cv-work-title { font-family: 'Sora', sans-serif !important; font-size: 16.5px !important; font-weight: 700 !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; margin: 0 0 12px 0 !important; line-height: 1.3 !important; } .cv-work-link { font-family: 'Sora', sans-serif !important; font-size: 13px !important; font-weight: 600 !important; color: #fbbf24 !important; -webkit-text-fill-color: #fbbf24 !important; display: inline-flex !important; align-items: center !important; gap: 6px !important; transition: transform 0.22s ease !important; } .cv-work-card:hover .cv-work-link { transform: translateX(4px) !important; } @media (max-width: 960px) { .cv-work-header { flex-direction: column !important; align-items: flex-start !important; gap: 14px !important; } .cv-work-grid { grid-template-columns: 1fr !important; gap: 16px !important; } } .cv-process-section { background: #ffffff !important; padding: clamp(54px, 5.5vw, 76px) 0 !important; border-bottom: 1px solid #f1f5f9 !important; position: relative !important; } .cv-process-grid { display: grid !important; grid-template-columns: minmax(240px, 280px) 1fr !important; align-items: flex-start !important; gap: clamp(28px, 4vw, 56px) !important; } .cv-process-header { display: flex !important; flex-direction: column !important; align-items: flex-start !important; text-align: left !important; } html body .cv-process-badge { display: inline-block !important; font-family: 'Sora', sans-serif !important; font-size: 11.5px !important; font-weight: 800 !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; color: #2563eb !important; -webkit-text-fill-color: #2563eb !important; margin-bottom: 8px !important; } html body .cv-process-heading { font-family: 'Sora', sans-serif !important; font-size: clamp(24px, 2.3vw, 32px) !important; font-weight: 800 !important; color: #0b1324 !important; -webkit-text-fill-color: #0b1324 !important; margin: 0 !important; line-height: 1.2 !important; letter-spacing: -0.02em !important; } .cv-process-flow { display: flex !important; align-items: flex-start !important; justify-content: space-between !important; width: 100% !important; gap: 4px !important; } html body .cv-process-section .cv-process-step { background: transparent !important; border: none !important; box-shadow: none !important; border-radius: 0 !important; padding: 0 !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; flex: 1 1 0 !important; min-width: 0 !important; text-align: left !important; transition: transform 0.25s ease !important; } html body .cv-process-section .cv-process-step:hover { background: transparent !important; border: none !important; box-shadow: none !important; transform: translateY(-2px) !important; } .cv-process-circle { width: 36px !important; height: 36px !important; border-radius: 50% !important; background: #1d4ed8 !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; font-family: 'Sora', sans-serif !important; font-size: 13px !important; font-weight: 800 !important; display: flex !important; align-items: center !important; justify-content: center !important; box-shadow: 0 4px 12px rgba(29, 78, 216, 0.25) !important; margin-bottom: 12px !important; flex-shrink: 0 !important; } .cv-process-arrow { display: flex !important; align-items: center !important; justify-content: center !important; color: #94a3b8 !important; font-size: 13px !important; height: 36px !important; padding: 0 4px !important; flex-shrink: 0 !important; opacity: 0.6 !important; } .cv-process-step-title { font-family: 'Sora', sans-serif !important; font-size: 14.5px !important; font-weight: 700 !important; color: #0f172a !important; -webkit-text-fill-color: #0f172a !important; margin: 0 0 3px 0 !important; line-height: 1.2 !important; } .cv-process-step-desc { font-family: 'DM Sans', sans-serif !important; font-size: 11.5px !important; color: #64748b !important; -webkit-text-fill-color: #64748b !important; line-height: 1.35 !important; margin: 0 !important; } @media (max-width: 1024px) { .cv-process-grid { grid-template-columns: 1fr !important; gap: 32px !important; } .cv-process-flow { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 20px !important; } .cv-process-arrow { display: none !important; } } @media (max-width: 640px) { .cv-process-flow { grid-template-columns: repeat(2, 1fr) !important; gap: 16px !important; } } .cv-marketing-section { background: #07152b !important; padding: clamp(48px, 4.5vw, 64px) 0 !important; position: relative !important; } .cv-marketing-grid { display: grid !important; grid-template-columns: minmax(280px, 320px) 1fr !important; align-items: center !important; gap: clamp(24px, 3.5vw, 44px) !important; } .cv-marketing-header { display: flex !important; flex-direction: column !important; align-items: flex-start !important; text-align: left !important; } html body .cv-marketing-badge { display: inline-block !important; font-family: 'Sora', sans-serif !important; font-size: 11px !important; font-weight: 800 !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; color: #38bdf8 !important; -webkit-text-fill-color: #38bdf8 !important; margin-bottom: 8px !important; } html body .cv-marketing-heading { font-family: 'Sora', sans-serif !important; font-size: clamp(22px, 2.1vw, 29px) !important; font-weight: 800 !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; margin: 0 !important; line-height: 1.25 !important; } .cv-numbers-grid { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 12px !important; width: 100% !important; margin-top: 0 !important; } .cv-stat-card { background: rgba(14, 27, 49, 0.75) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; border-radius: 14px !important; padding: 14px 14px !important; display: flex !important; align-items: center !important; gap: 12px !important; backdrop-filter: blur(8px) !important; transition: all 0.25s ease !important; box-sizing: border-box !important; } .cv-stat-card:hover { transform: translateY(-3px) !important; border-color: rgba(255, 255, 255, 0.2) !important; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3) !important; } .cv-stat-icon-wrap { width: 38px !important; height: 38px !important; border-radius: 10px !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 17px !important; flex-shrink: 0 !important; } .cv-stat-icon-wrap.google { background: rgba(56, 189, 248, 0.12) !important; color: #38bdf8 !important; } .cv-stat-icon-wrap.meta { background: rgba(14, 165, 233, 0.12) !important; color: #0ea5e9 !important; } .cv-stat-icon-wrap.seo { background: rgba(34, 197, 94, 0.12) !important; color: #22c55e !important; } .cv-stat-icon-wrap.cart { background: rgba(251, 191, 36, 0.12) !important; color: #fbbf24 !important; } .cv-stat-info { display: flex !important; flex-direction: column !important; min-width: 0 !important; } .cv-stat-label { font-family: 'DM Sans', sans-serif !important; font-size: 11px !important; color: #94a3b8 !important; -webkit-text-fill-color: #94a3b8 !important; font-weight: 600 !important; line-height: 1.2 !important; margin-bottom: 2px !important; } .cv-stat-value { font-family: 'Sora', sans-serif !important; font-size: 20px !important; font-weight: 800 !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; line-height: 1.15 !important; } .cv-stat-sub { font-family: 'DM Sans', sans-serif !important; font-size: 10px !important; color: #64748b !important; -webkit-text-fill-color: #64748b !important; margin-top: 2px !important; white-space: nowrap !important; } @media (max-width: 1024px) { .cv-marketing-grid { grid-template-columns: 1fr !important; gap: 24px !important; } } @media (max-width: 768px) { .cv-numbers-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; } } @media (max-width: 480px) { .cv-numbers-grid { grid-template-columns: 1fr !important; } } .cv-tech-section { background: #ffffff !important; padding: clamp(54px, 5.5vw, 76px) 0 !important; border-bottom: 1px solid #f1f5f9 !important; position: relative !important; } .cv-tech-main-grid { display: grid !important; grid-template-columns: minmax(260px, 300px) 1fr minmax(240px, 280px) !important; align-items: center !important; gap: clamp(20px, 2.5vw, 36px) !important; } .cv-tech-left-col { display: flex !important; flex-direction: column !important; align-items: flex-start !important; text-align: left !important; } html body .cv-tech-heading { font-family: 'Sora', sans-serif !important; font-size: clamp(17px, 1.4vw, 21px) !important; font-weight: 800 !important; color: #0b1324 !important; -webkit-text-fill-color: #0b1324 !important; line-height: 1.25 !important; margin: 0 !important; letter-spacing: -0.02em !important; } html body .cv-tech-subheading { font-family: 'DM Sans', sans-serif !important; font-size: 13px !important; color: #64748b !important; -webkit-text-fill-color: #64748b !important; line-height: 1.45 !important; margin: 10px 0 14px !important; } html body .cv-tech-link { font-family: 'Sora', sans-serif !important; font-size: 13px !important; font-weight: 700 !important; color: #2563eb !important; -webkit-text-fill-color: #2563eb !important; text-decoration: none !important; display: inline-flex !important; align-items: center !important; gap: 6px !important; transition: transform 0.22s ease !important; } html body .cv-tech-link:hover { transform: translateX(3px) !important; color: #1d4ed8 !important; } .cv-tech-pills-row { display: grid !important; grid-template-columns: repeat(6, 1fr) !important; gap: 10px !important; align-items: center !important; margin: 0 !important; } .cv-tech-pill-item { display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center !important; gap: 8px !important; background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; transition: transform 0.22s ease !important; } .cv-tech-pill-item:hover { transform: translateY(-3px) !important; } .cv-tech-pill-icon { font-size: 20px !important; color: #2563eb !important; -webkit-text-fill-color: #2563eb !important; background: transparent !important; box-shadow: none !important; width: auto !important; height: auto !important; display: flex !important; align-items: center !important; justify-content: center !important; } .cv-tech-pill-label { font-family: 'DM Sans', sans-serif !important; font-size: 11px !important; font-weight: 700 !important; color: #0f172a !important; -webkit-text-fill-color: #0f172a !important; line-height: 1.25 !important; text-align: center !important; } .cv-tech-visual-col { border-radius: 12px !important; overflow: hidden !important; background: #000000 !important; box-shadow: 0 12px 30px rgba(15, 23, 42, 0.12) !important; } .cv-tech-robot-wrap { display: block !important; width: 100% !important; } .cv-tech-robot-img { width: 100% !important; height: auto !important; display: block !important; object-fit: cover !important; } @media (max-width: 1100px) { .cv-tech-main-grid { grid-template-columns: 1fr !important; gap: 28px !important; } .cv-tech-pills-row { grid-template-columns: repeat(3, 1fr) !important; gap: 16px !important; } } @media (max-width: 600px) { .cv-tech-pills-row { grid-template-columns: repeat(2, 1fr) !important; gap: 14px !important; } } .cv-clients-section { background: #070d19 !important; padding: clamp(54px, 5.5vw, 76px) 0 !important; border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important; position: relative !important; } .cv-clients-header { display: flex !important; flex-direction: column !important; align-items: flex-start !important; text-align: left !important; margin-bottom: 24px !important; } html body .cv-clients-badge { display: inline-block !important; font-family: 'Sora', sans-serif !important; font-size: 11.5px !important; font-weight: 800 !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; color: #38bdf8 !important; -webkit-text-fill-color: #38bdf8 !important; margin-bottom: 8px !important; } html body .cv-clients-heading { font-family: 'Sora', sans-serif !important; font-size: clamp(24px, 2.3vw, 32px) !important; font-weight: 800 !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; margin: 0 !important; line-height: 1.2 !important; letter-spacing: -0.02em !important; } .cv-clients-cards-grid { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 14px !important; width: 100% !important; } .cv-client-card { background: rgba(255, 255, 255, 0.035) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; border-radius: 14px !important; padding: 22px 14px !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; text-align: center !important; gap: 8px !important; box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25) !important; transition: all 0.26s ease !important; } .cv-client-card:hover { transform: translateY(-3px) !important; background: rgba(255, 255, 255, 0.07) !important; border-color: rgba(56, 189, 248, 0.4) !important; box-shadow: 0 14px 30px rgba(0, 0, 0, 0.45) !important; } .cv-client-logo-icon { font-size: 24px !important; margin-bottom: 2px !important; } .cv-client-name, .cv-client-card .cv-client-name { font-family: 'Sora', sans-serif !important; font-size: 13.5px !important; font-weight: 700 !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } @media (max-width: 900px) { .cv-clients-cards-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; } } @media (max-width: 480px) { .cv-clients-cards-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; } .cv-client-card { padding: 16px 10px !important; } } .cv-testi-section { background: #ffffff !important; padding: clamp(54px, 5.5vw, 76px) 0 !important; border-bottom: 1px solid #f1f5f9 !important; position: relative !important; } .cv-testi-header { display: flex !important; flex-direction: column !important; align-items: flex-start !important; text-align: left !important; margin-bottom: 26px !important; } html body .cv-testi-badge { display: inline-block !important; font-family: 'Sora', sans-serif !important; font-size: 11.5px !important; font-weight: 800 !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; color: #2563eb !important; -webkit-text-fill-color: #2563eb !important; margin-bottom: 8px !important; } html body .cv-testi-heading { font-family: 'Sora', sans-serif !important; font-size: clamp(24px, 2.3vw, 32px) !important; font-weight: 800 !important; color: #0b1324 !important; -webkit-text-fill-color: #0b1324 !important; margin: 0 !important; line-height: 1.2 !important; letter-spacing: -0.02em !important; } .cv-testi-grid { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 20px !important; width: 100% !important; } .cv-testi-card { background: #ffffff !important; border: 1px solid #eef2f6 !important; border-radius: 16px !important; padding: 24px 22px !important; display: flex !important; flex-direction: column !important; justify-content: space-between !important; box-shadow: 0 4px 16px rgba(15, 23, 42, 0.03) !important; transition: all 0.26s ease !important; } .cv-testi-card:hover { transform: translateY(-4px) !important; border-color: #cbd5e1 !important; box-shadow: 0 14px 30px rgba(15, 23, 42, 0.08) !important; } .cv-testi-quote-mark { font-family: 'Georgia', serif !important; font-size: 28px !important; line-height: 1 !important; color: #f59e0b !important; -webkit-text-fill-color: #f59e0b !important; display: block !important; margin-bottom: 8px !important; font-weight: 700 !important; } .cv-testi-text { font-family: 'DM Sans', sans-serif !important; font-size: 13.5px !important; line-height: 1.6 !important; color: #334155 !important; -webkit-text-fill-color: #334155 !important; margin: 0 0 20px 0 !important; } .cv-testi-author { display: flex !important; align-items: center !important; gap: 12px !important; margin-top: auto !important; } .cv-testi-avatar { width: 40px !important; height: 40px !important; border-radius: 50% !important; object-fit: cover !important; flex-shrink: 0 !important; border: 1px solid #e2e8f0 !important; } .cv-testi-author-info { display: flex !important; flex-direction: column !important; } .cv-testi-name { font-family: 'Sora', sans-serif !important; font-size: 13.5px !important; font-weight: 700 !important; color: #0f172a !important; -webkit-text-fill-color: #0f172a !important; line-height: 1.25 !important; } .cv-testi-role { font-family: 'DM Sans', sans-serif !important; font-size: 11.5px !important; color: #64748b !important; -webkit-text-fill-color: #64748b !important; line-height: 1.25 !important; } @media (max-width: 900px) { .cv-testi-grid { grid-template-columns: 1fr !important; gap: 16px !important; } } .cv-faq-section { background: #070d19 !important; padding: clamp(54px, 5.5vw, 76px) 0 !important; border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important; position: relative !important; } .cv-faq-header { display: flex !important; align-items: flex-end !important; justify-content: space-between !important; margin-bottom: 24px !important; gap: 20px !important; } .cv-faq-header-left { display: flex !important; flex-direction: column !important; align-items: flex-start !important; text-align: left !important; } html body .cv-faq-badge { display: inline-block !important; font-family: 'Sora', sans-serif !important; font-size: 11.5px !important; font-weight: 800 !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; color: #38bdf8 !important; -webkit-text-fill-color: #38bdf8 !important; margin-bottom: 8px !important; } html body .cv-faq-heading { font-family: 'Sora', sans-serif !important; font-size: clamp(24px, 2.3vw, 32px) !important; font-weight: 800 !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; margin: 0 !important; line-height: 1.2 !important; letter-spacing: -0.02em !important; } html body .cv-faq-link { font-family: 'Sora', sans-serif !important; font-size: 13.5px !important; font-weight: 600 !important; color: #38bdf8 !important; -webkit-text-fill-color: #38bdf8 !important; text-decoration: none !important; display: inline-flex !important; align-items: center !important; gap: 8px !important; transition: transform 0.22s ease !important; white-space: nowrap !important; } html body .cv-faq-link:hover { transform: translateX(3px) !important; color: #7dd3fc !important; -webkit-text-fill-color: #7dd3fc !important; } .cv-faq-list { width: 100% !important; max-width: 100% !important; margin: 0 !important; } .cv-faq-item { background: rgba(255, 255, 255, 0.035) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; border-radius: 12px !important; margin-bottom: 10px !important; overflow: hidden !important; transition: all 0.22s ease !important; } .cv-faq-item:hover { background: rgba(255, 255, 255, 0.065) !important; border-color: rgba(56, 189, 248, 0.3) !important; box-shadow: 0 4px 18px rgba(0, 0, 0, 0.3) !important; } .cv-faq-item.active { background: rgba(255, 255, 255, 0.065) !important; border-color: rgba(56, 189, 248, 0.5) !important; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important; } .cv-faq-question { padding: 16px 20px !important; display: flex !important; align-items: center !important; justify-content: space-between !important; cursor: pointer !important; user-select: none !important; } .cv-faq-title { font-family: 'Sora', sans-serif !important; font-size: 14.5px !important; font-weight: 700 !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } .cv-faq-icon { font-size: 12px !important; color: #94a3b8 !important; transition: transform 0.25s ease !important; flex-shrink: 0 !important; } .cv-faq-item.active .cv-faq-icon { transform: rotate(180deg) !important; color: #38bdf8 !important; } .cv-faq-answer { display: none !important; padding: 0 20px 18px 20px !important; font-family: 'DM Sans', sans-serif !important; font-size: 13.5px !important; line-height: 1.6 !important; color: #cbd5e1 !important; -webkit-text-fill-color: #cbd5e1 !important; } .cv-faq-item.active .cv-faq-answer { display: block !important; } @media (max-width: 640px) { .cv-faq-header { flex-direction: column !important; align-items: flex-start !important; gap: 12px !important; } } .cv-insights-section { background: #ffffff !important; padding: clamp(54px, 5.5vw, 76px) 0 !important; border-bottom: 1px solid #f1f5f9 !important; position: relative !important; } .cv-insights-header { display: flex !important; align-items: flex-end !important; justify-content: space-between !important; margin-bottom: 24px !important; gap: 20px !important; } .cv-insights-header-left { display: flex !important; flex-direction: column !important; align-items: flex-start !important; text-align: left !important; } html body .cv-insights-badge { display: inline-block !important; font-family: 'Sora', sans-serif !important; font-size: 11.5px !important; font-weight: 800 !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; color: #2563eb !important; -webkit-text-fill-color: #2563eb !important; margin-bottom: 8px !important; } html body .cv-insights-heading { font-family: 'Sora', sans-serif !important; font-size: clamp(24px, 2.3vw, 32px) !important; font-weight: 800 !important; color: #0b1324 !important; -webkit-text-fill-color: #0b1324 !important; margin: 0 !important; line-height: 1.2 !important; letter-spacing: -0.02em !important; } html body .cv-insights-link { font-family: 'Sora', sans-serif !important; font-size: 13.5px !important; font-weight: 600 !important; color: #2563eb !important; -webkit-text-fill-color: #2563eb !important; text-decoration: none !important; display: inline-flex !important; align-items: center !important; gap: 8px !important; transition: transform 0.22s ease !important; white-space: nowrap !important; } html body .cv-insights-link:hover { transform: translateX(3px) !important; color: #1d4ed8 !important; } .cv-insights-grid { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 20px !important; width: 100% !important; margin-top: 0 !important; } .cv-insight-card { background: #ffffff !important; border: 1px solid #eef2f6 !important; border-radius: 14px !important; padding: 0 !important; display: flex !important; align-items: stretch !important; justify-content: space-between !important; gap: 0 !important; box-shadow: 0 4px 16px rgba(15, 23, 42, 0.03) !important; transition: all 0.26s ease !important; text-decoration: none !important; overflow: hidden !important; position: relative !important; min-height: 140px !important; } .cv-insight-card:hover { transform: translateY(-4px) !important; border-color: #cbd5e1 !important; box-shadow: 0 14px 30px rgba(15, 23, 42, 0.08) !important; } .cv-insight-content { display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: space-between !important; flex: 1 1 auto !important; min-width: 0 !important; padding: 20px 14px 18px 20px !important; z-index: 2 !important; } html body .cv-insight-badge { display: inline-block !important; font-family: 'Sora', sans-serif !important; font-size: 10px !important; font-weight: 700 !important; border-radius: 6px !important; padding: 3px 8px !important; line-height: 1.2 !important; margin-bottom: 10px !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; text-transform: capitalize !important; } html body .cv-insight-badge.marketing { background: #1e3a8a !important; } html body .cv-insight-badge.seo { background: #2563eb !important; } html body .cv-insight-badge.branding { background: #dc2626 !important; } .cv-insight-title { font-family: 'Sora', sans-serif !important; font-size: 14.5px !important; font-weight: 700 !important; color: #0f172a !important; -webkit-text-fill-color: #0f172a !important; line-height: 1.35 !important; margin: 0 0 12px 0 !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; } .cv-insight-date { font-family: 'DM Sans', sans-serif !important; font-size: 11px !important; color: #94a3b8 !important; -webkit-text-fill-color: #94a3b8 !important; font-weight: 500 !important; margin-top: auto !important; } .cv-insight-thumb-wrap { width: 140px !important; min-width: 120px !important; align-self: stretch !important; flex-shrink: 0 !important; position: relative !important; overflow: hidden !important; mask-image: linear-gradient(to right, transparent 0%, black 20%) !important; -webkit-mask-image: linear-gradient(to right, transparent 0%, black 20%) !important; } .cv-insight-thumb { width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: right center !important; display: block !important; transition: transform 0.35s ease !important; } .cv-insight-card:hover .cv-insight-thumb { transform: scale(1.05) !important; } @media (max-width: 960px) { .cv-insights-header { flex-direction: column !important; align-items: flex-start !important; gap: 12px !important; } .cv-insights-grid { grid-template-columns: 1fr !important; gap: 16px !important; } } .cv-cta-banner-wrapper { padding: 60px 0 !important; } .cv-cta-banner-container { display: block !important; border-radius: 24px !important; overflow: hidden !important; border: 1px solid rgba(255, 255, 255, 0.12) !important; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5), 0 0 24px rgba(245, 158, 11, 0.18) !important; transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important; } .cv-cta-banner-container:hover { transform: translateY(-5px) scale(1.01) !important; box-shadow: 0 32px 70px rgba(0, 0, 0, 0.6), 0 0 35px rgba(245, 158, 11, 0.35) !important; border-color: rgba(245, 158, 11, 0.5) !important; } .cv-cta-banner-img { width: 100% !important; height: auto !important; display: block !important; transition: transform 0.4s ease !important; } .cv-cta-banner-container:hover .cv-cta-banner-img { transform: scale(1.02) !important; } .cv-footer { background-color: #060c18 !important; border-top: 1px solid rgba(255, 255, 255, 0.08) !important; padding: 64px 0 32px !important; } .cv-footer-social-icon:hover { background: #fbbf24 !important; color: #0b1324 !important; border-color: #fbbf24 !important; transform: translateY(-3px) !important; box-shadow: 0 8px 18px rgba(245, 158, 11, 0.35) !important; } .cv-footer-social-icon:hover i { color: #0b1324 !important; } @media (max-width: 1100px) { body .cv-navbar { position: relative; gap: 16px; } body .cv-mobile-toggle { display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; padding: 10px; flex-shrink: 0; background: #17243b; border: 1px solid #475569; border-radius: 9px; } body .cv-mobile-toggle span { display: block; width: 100%; height: 2px; background: #fff; } body .cv-nav-cta-desktop { display: none !important; } body .cv-nav-links { display: none; position: absolute; top: 100%; left: 0; right: 0; z-index: 100; flex-direction: column; padding: 16px; gap: 6px; background: #091220; border: 1px solid #475569; border-radius: 14px; max-height: calc(100dvh - 100px); overflow-y: auto; } body .cv-nav-links.show { display: flex; } body .cv-nav-item a { display: block; padding: 12px 14px; color: #e2e8f0; } body .cv-nav-cta-mobile { display: block !important; } } @media (max-width: 640px) { .cv-container { padding-left: 20px !important; padding-right: 20px !important; } .cv-hero-title { font-size: clamp(30px, 8.4vw, 42px) !important; line-height: 1.2 !important; } .cv-heading-light, .cv-heading-dark { font-size: clamp(24px, 7vw, 32px) !important; line-height: 1.25 !important; } .cv-hero-metrics-bar { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; } .cv-metric-box { padding: 16px 14px !important; } .cv-metric-value { font-size: 20px !important; } .cv-footer-grid { grid-template-columns: 1fr !important; gap: 28px !important; } } body .cv-icon-scroll-viewport { mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent) !important; -webkit-mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent) !important; padding: 12px 0 20px !important; } body .cv-icon-scroll-track > .cv-industry-pill { background: rgba(14, 26, 47, 0.85) !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; border-radius: 16px !important; padding: 18px 20px !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; text-align: center !important; gap: 10px !important; transition: all 0.28s ease !important; backdrop-filter: blur(8px) !important; } body .cv-icon-scroll-track > .cv-industry-pill:hover { transform: translateY(-4px) !important; background: rgba(22, 38, 68, 0.95) !important; border-color: rgba(245, 158, 11, 0.5) !important; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.4), 0 0 14px rgba(245, 158, 11, 0.2) !important; } body .cv-icon-scroll-track > .cv-industry-pill .cv-industry-icon { font-size: 22px !important; color: #fbbf24 !important; } body .cv-icon-scroll-track > .cv-industry-pill .cv-industry-name { font-family: "Sora", sans-serif !important; font-size: 13px !important; font-weight: 600 !important; color: #f1f5f9 !important; white-space: nowrap !important; } body .cv-icon-scroll-track > .cv-client-card { background: #ffffff !important; border: 1px solid #e2e8f0 !important; border-radius: 18px !important; padding: 24px 22px !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; text-align: center !important; gap: 10px !important; box-shadow: 0 4px 18px rgba(15, 23, 42, 0.04) !important; transition: all 0.28s ease !important; } body .cv-icon-scroll-track > .cv-client-card:hover { transform: translateY(-4px) !important; border-color: #cbd5e1 !important; box-shadow: 0 16px 36px rgba(15, 23, 42, 0.09) !important; } body .cv-icon-scroll-track > .cv-client-card .cv-client-logo-icon { font-size: 28px !important; margin-bottom: 4px !important; } body .cv-icon-scroll-track > .cv-client-card .cv-client-name { font-family: "Sora", sans-serif !important; font-size: 16px !important; font-weight: 700 !important; color: #0f172a !important; } body .cv-icon-scroll-track > .cv-client-card .cv-client-cat { font-size: 12px !important; color: #64748b !important; font-weight: 500 !important; } html body .cv-about-hero-wrap { background: #060c18 !important; padding: 60px 0 36px 0 !important; } html body .cv-about-main-body { background: #060c18 !important; color: #ffffff !important; } html body .cv-about-stats-container { background: rgba(14, 27, 49, 0.75) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; backdrop-filter: blur(8px) !important; border-radius: 16px !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important; } html body .cv-about-stat-num { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; font-family: 'Sora', sans-serif !important; font-weight: 800 !important; } html body .cv-about-stat-lbl { color: #94a3b8 !important; -webkit-text-fill-color: #94a3b8 !important; font-family: 'DM Sans', sans-serif !important; } html body .cv-about-box { background: rgba(14, 27, 49, 0.75) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; border-radius: 16px !important; padding: 28px !important; backdrop-filter: blur(8px) !important; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25) !important; } html body .cv-about-box-title { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; font-family: 'Sora', sans-serif !important; font-weight: 800 !important; font-size: 20px !important; margin-bottom: 12px !important; } html body .cv-about-box-desc { color: #94a3b8 !important; -webkit-text-fill-color: #94a3b8 !important; font-family: 'DM Sans', sans-serif !important; font-size: 14.5px !important; line-height: 1.6 !important; } html body .cv-about-val-pill { background: rgba(22, 38, 68, 0.6) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; border-radius: 12px !important; padding: 14px 10px !important; text-align: center !important; transition: all 0.25s ease !important; } html body .cv-about-val-pill:hover { background: rgba(30, 58, 102, 0.8) !important; border-color: rgba(245, 158, 11, 0.4) !important; transform: translateY(-2px) !important; } html body .cv-about-val-icon { color: #fbbf24 !important; font-size: 20px !important; margin-bottom: 6px !important; } html body .cv-about-val-name { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; font-family: 'Sora', sans-serif !important; font-weight: 600 !important; font-size: 13px !important; } html body .cv-journey-section-title, html body .cv-team-section-title { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; font-family: 'Sora', sans-serif !important; font-weight: 800 !important; font-size: 24px !important; margin-bottom: 24px !important; } html body .cv-journey-track-wrap { background: rgba(14, 27, 49, 0.6) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; border-radius: 16px !important; padding: 32px 24px !important; } html body .cv-journey-line { background: rgba(56, 189, 248, 0.3) !important; } html body .cv-journey-node-dot { background: #0284c7 !important; border: 3px solid #38bdf8 !important; box-shadow: 0 0 16px rgba(56, 189, 248, 0.4) !important; color: #ffffff !important; } html body .cv-journey-year { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; font-family: 'Sora', sans-serif !important; font-weight: 800 !important; } html body .cv-journey-sub { color: #94a3b8 !important; -webkit-text-fill-color: #94a3b8 !important; font-family: 'DM Sans', sans-serif !important; font-size: 12px !important; } html body .cv-team-portrait-card { background: rgba(14, 27, 49, 0.75) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; border-radius: 18px !important; padding: 16px !important; transition: all 0.28s ease !important; } html body .cv-team-portrait-card:hover { transform: translateY(-4px) !important; border-color: rgba(255, 255, 255, 0.2) !important; box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35) !important; } html body .cv-team-photo-frame { border-radius: 14px !important; overflow: hidden !important; aspect-ratio: 1 / 1 !important; background: #111e33 !important; } html body .cv-team-photo-frame img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; } html body .cv-team-name-text { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; font-family: 'Sora', sans-serif !important; font-weight: 700 !important; font-size: 16px !important; margin: 12px 0 4px 0 !important; text-align: center !important; } html body .cv-team-role-text { color: #94a3b8 !important; -webkit-text-fill-color: #94a3b8 !important; font-family: 'DM Sans', sans-serif !important; font-size: 12.5px !important; text-align: center !important; } html body .cv-about-bottom-cta { background: rgba(14, 27, 49, 0.85) !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; border-radius: 18px !important; padding: 20px 24px !important; display: flex !important; align-items: center !important; justify-content: space-between !important; margin-top: 36px !important; backdrop-filter: blur(8px) !important; } html body .cv-about-cta-thumb { width: 50px !important; height: 50px !important; border-radius: 10px !important; overflow: hidden !important; flex-shrink: 0 !important; } html body .cv-about-cta-thumb img { width: 100% !important; height: 100% !important; object-fit: cover !important; } html body .cv-about-cta-msg { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; font-family: 'Sora', sans-serif !important; font-weight: 700 !important; font-size: 18px !important; } html body .cv-srv-hero-wrap { background: #060c18 !important; padding: 60px 0 36px 0 !important; } html body .cv-srv-main-body { background: #060c18 !important; } html body .cv-srv-grid-14 { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 16px !important; margin: 28px 0 44px 0 !important; } html body .cv-srv-card { background: #ffffff !important; border: 1px solid #e2e8f0 !important; border-radius: 16px !important; padding: 22px 18px 20px 18px !important; text-align: center !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; text-decoration: none !important; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12) !important; transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important; position: relative !important; overflow: hidden !important; } html body .cv-srv-card::before { content: "" !important; position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; height: 3px !important; background: linear-gradient(90deg, #f59e0b, #fbbf24) !important; opacity: 0 !important; transition: opacity 0.25s ease !important; } html body .cv-srv-card:hover { transform: translateY(-4px) !important; box-shadow: 0 14px 32px rgba(0, 0, 0, 0.24) !important; border-color: #cbd5e1 !important; } html body .cv-srv-card:hover::before { opacity: 1 !important; } html body .cv-srv-icon-wrap { width: 48px !important; height: 48px !important; border-radius: 14px !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 20px !important; margin: 0 auto 10px auto !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important; transition: transform 0.25s ease !important; } html body .cv-srv-card:hover .cv-srv-icon-wrap { transform: scale(1.08) !important; } html body .cv-srv-card-title { color: #0b1324 !important; -webkit-text-fill-color: #0b1324 !important; font-family: 'Sora', sans-serif !important; font-weight: 700 !important; font-size: 15px !important; line-height: 1.3 !important; margin: 0 0 5px 0 !important; transition: color 0.2s ease !important; } html body .cv-srv-card:hover .cv-srv-card-title { color: #d97706 !important; -webkit-text-fill-color: #d97706 !important; } html body .cv-srv-card-desc { color: #64748b !important; -webkit-text-fill-color: #64748b !important; font-family: 'DM Sans', sans-serif !important; font-size: 12.5px !important; line-height: 1.4 !important; margin: 0 !important; } html body .cv-srv-card:nth-child(13) { grid-column: 2 !important; } @media (max-width: 1024px) { html body .cv-srv-grid-14 { grid-template-columns: repeat(3, 1fr) !important; gap: 14px !important; } html body .cv-srv-card:nth-child(13) { grid-column: auto !important; } } @media (max-width: 768px) { html body .cv-srv-grid-14 { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; } html body .cv-srv-card { padding: 16px 12px 14px 12px !important; } html body .cv-srv-icon-wrap { width: 42px !important; height: 42px !important; font-size: 17px !important; margin-bottom: 8px !important; } html body .cv-srv-card-title { font-size: 13.5px !important; } html body .cv-srv-card-desc { font-size: 11px !important; } } @media (max-width: 480px) { html body .cv-srv-grid-14 { grid-template-columns: 1fr !important; gap: 10px !important; } } html body .cv-srv-custom-banner { background: linear-gradient(135deg, rgba(14, 27, 49, 0.95) 0%, rgba(8, 16, 32, 0.98) 100%) !important; border: 1px solid rgba(56, 189, 248, 0.25) !important; border-radius: 22px !important; padding: 38px 44px !important; margin-top: 40px !important; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), 0 0 30px rgba(14, 165, 233, 0.12) !important; } html body .cv-srv-banner-title { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; font-family: 'Sora', sans-serif !important; font-weight: 800 !important; font-size: clamp(22px, 2.5vw, 32px) !important; margin-bottom: 10px !important; } html body .cv-srv-banner-desc { color: #94a3b8 !important; -webkit-text-fill-color: #94a3b8 !important; font-family: 'DM Sans', sans-serif !important; font-size: 15px !important; margin-bottom: 22px !important; } html body .cv-port-hero-wrap { background: #060c18 !important; padding: 60px 0 24px 0 !important; } html body .cv-port-main-body { background: #060c18 !important; } html body .cv-port-heading { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; font-family: 'Sora', sans-serif !important; font-weight: 800 !important; } html body .cv-port-subhead { color: #94a3b8 !important; -webkit-text-fill-color: #94a3b8 !important; font-family: 'DM Sans', sans-serif !important; } html body .cv-port-pill { background: rgba(14, 27, 49, 0.75) !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; color: #cbd5e1 !important; font-family: 'DM Sans', sans-serif !important; font-weight: 600 !important; font-size: 13.5px !important; border-radius: 20px !important; padding: 8px 18px !important; transition: all 0.25s ease !important; cursor: pointer !important; } html body .cv-port-pill.active { background: #2563eb !important; border-color: #2563eb !important; color: #ffffff !important; } html body .cv-port-card { background: rgba(14, 27, 49, 0.75) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; border-radius: 18px !important; padding: 16px !important; text-decoration: none !important; display: flex !important; flex-direction: column !important; transition: all 0.3s ease !important; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25) !important; } html body .cv-port-card:hover { transform: translateY(-5px) !important; border-color: rgba(255, 255, 255, 0.2) !important; box-shadow: 0 16px 36px rgba(0, 0, 0, 0.4) !important; } html body .cv-port-thumb { border-radius: 12px !important; overflow: hidden !important; margin-bottom: 14px !important; aspect-ratio: 16 / 10 !important; } html body .cv-port-thumb img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; } html body .cv-port-title { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; font-family: 'Sora', sans-serif !important; font-weight: 700 !important; font-size: 16.5px !important; margin: 0 0 4px 0 !important; } html body .cv-port-category { color: #38bdf8 !important; -webkit-text-fill-color: #38bdf8 !important; font-family: 'DM Sans', sans-serif !important; font-size: 12.5px !important; font-weight: 600 !important; margin-bottom: 6px !important; } html body .cv-port-tags { color: #94a3b8 !important; -webkit-text-fill-color: #94a3b8 !important; font-family: 'DM Sans', sans-serif !important; font-size: 12px !important; } html body .cv-cnt-page { background: #060c18 !important; padding: 60px 0 40px 0 !important; } html body .cv-cnt-eyebrow { color: #38bdf8 !important; -webkit-text-fill-color: #38bdf8 !important; font-family: 'Sora', sans-serif !important; font-size: 12px !important; font-weight: 800 !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; } html body .cv-cnt-title { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; font-family: 'Sora', sans-serif !important; font-weight: 800 !important; font-size: clamp(26px, 3.2vw, 42px) !important; margin: 6px 0 10px 0 !important; } html body .cv-cnt-sub { color: #94a3b8 !important; -webkit-text-fill-color: #94a3b8 !important; font-family: 'DM Sans', sans-serif !important; font-size: 15px !important; margin-bottom: 32px !important; } html body .cv-cnt-info-card, html body .cv-cnt-form-card { background: #ffffff !important; border: 1px solid #e2e8f0 !important; border-radius: 18px !important; padding: 32px !important; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25) !important; } html body .cv-cnt-submit-btn { background: linear-gradient(135deg, #f59e0b, #d97706) !important; color: #0b1324 !important; -webkit-text-fill-color: #0b1324 !important; font-family: 'Sora', sans-serif !important; font-weight: 700 !important; font-size: 15px !important; border-radius: 12px !important; border: none !important; width: 100% !important; padding: 14px !important; cursor: pointer !important; transition: all 0.25s ease !important; } html body .cv-cnt-submit-btn:hover { transform: translateY(-2px) !important; box-shadow: 0 8px 20px rgba(245, 158, 11, 0.4) !important; } html body .cv-cnt-map-card { border-radius: 18px !important; overflow: hidden !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; margin-top: 24px !important; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25) !important; } html body .cv-cnt-map-img { width: 100% !important; height: auto !important; max-height: 280px !important; object-fit: cover !important; display: block !important; } html body .cv-ins-page-wrap { background: #060c18 !important; padding: 60px 0 40px 0 !important; } html body .cv-ins-card-item { background: #ffffff !important; border: 1px solid #eef2f6 !important; border-radius: 16px !important; box-shadow: 0 4px 18px rgba(0, 0, 0, 0.15) !important; transition: all 0.28s ease !important; } html body .cv-ins-card-item:hover { transform: translateY(-4px) !important; box-shadow: 0 14px 32px rgba(0, 0, 0, 0.25) !important; } html body .cv-brand-page { background: #060c18 !important; padding: 40px 0 80px 0 !important; min-height: 100vh; } html body .cv-brand-hero { display: grid !important; grid-template-columns: 1.15fr 0.85fr !important; align-items: center !important; gap: 40px !important; margin-bottom: 50px !important; } html body .cv-brand-hero-h1 { font-family: 'Sora', sans-serif !important; font-size: clamp(32px, 3.8vw, 48px) !important; font-weight: 800 !important; line-height: 1.15 !important; margin: 0 0 16px 0 !important; } html body .cv-brand-hero-h1 .h-white { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; display: block !important; } html body .cv-brand-hero-h1 .h-gold { background: linear-gradient(135deg, #fde68a 0%, #f59e0b 60%, #d97706 100%) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; display: block !important; } html body .cv-brand-hero-desc { color: #94a3b8 !important; -webkit-text-fill-color: #94a3b8 !important; font-size: 16px !important; line-height: 1.65 !important; max-width: 520px !important; } html body .cv-brand-hero-img-card { border-radius: 20px !important; overflow: hidden !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5) !important; background: #0d1726 !important; } html body .cv-brand-hero-img-card img { width: 100% !important; height: 100% !important; max-height: 360px !important; object-fit: cover !important; display: block !important; } html body .cv-brand-mid-grid { display: grid !important; grid-template-columns: 0.95fr 1.05fr !important; align-items: stretch !important; gap: 36px !important; margin-bottom: 56px !important; background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; } html body .cv-brand-sec-title { font-family: 'Sora', sans-serif !important; font-size: 22px !important; font-weight: 700 !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; margin: 0 0 20px 0 !important; } html body .cv-brand-pills-list { display: flex !important; flex-direction: column !important; gap: 12px !important; } html body .cv-brand-pill { display: flex !important; align-items: center !important; gap: 16px !important; background: rgba(13, 23, 40, 0.75) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; border-radius: 12px !important; padding: 14px 20px !important; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25) !important; transition: all 0.28s ease !important; } html body .cv-brand-pill:hover { background: rgba(18, 32, 54, 0.9) !important; border-color: rgba(245, 158, 11, 0.5) !important; transform: translateX(6px) !important; box-shadow: 0 6px 20px rgba(245, 158, 11, 0.15) !important; } html body .cv-brand-pill-icon { width: 36px !important; height: 36px !important; border-radius: 8px !important; background: rgba(245, 158, 11, 0.12) !important; border: 1px solid rgba(245, 158, 11, 0.35) !important; display: flex !important; align-items: center !important; justify-content: center !important; color: #f59e0b !important; font-size: 15px !important; flex-shrink: 0 !important; } html body .cv-brand-pill-text { font-family: 'Inter', sans-serif !important; font-size: 15px !important; font-weight: 600 !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } html body .cv-brand-feature-card { background: linear-gradient(145deg, #0d1a2d 0%, #08111e 100%) !important; border: 1px solid rgba(56, 189, 248, 0.18) !important; border-radius: 20px !important; padding: 38px 36px !important; display: flex !important; flex-direction: column !important; justify-content: space-between !important; box-shadow: 0 16px 45px rgba(0, 0, 0, 0.4) !important; } html body .cv-brand-feat-title { font-family: 'Sora', sans-serif !important; font-size: clamp(24px, 2.4vw, 30px) !important; font-weight: 800 !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; margin: 0 0 14px 0 !important; } html body .cv-brand-feat-desc { font-size: 15px !important; line-height: 1.65 !important; color: #94a3b8 !important; -webkit-text-fill-color: #94a3b8 !important; margin: 0 0 24px 0 !important; } html body .cv-brand-check-list { display: flex !important; flex-direction: column !important; gap: 13px !important; margin-bottom: 30px !important; } html body .cv-brand-check-item { display: flex !important; align-items: center !important; gap: 12px !important; font-size: 14.5px !important; font-weight: 600 !important; color: #f1f5f9 !important; -webkit-text-fill-color: #f1f5f9 !important; } html body .cv-brand-check-item i { color: #f59e0b !important; font-size: 14px !important; } html body .cv-brand-work-grid { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 20px !important; margin-bottom: 56px !important; } html body .cv-brand-work-card { background: #0b1526 !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; border-radius: 16px !important; padding: 14px !important; display: flex !important; flex-direction: column !important; text-decoration: none !important; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3) !important; transition: all 0.3s ease !important; } html body .cv-brand-work-card:hover { transform: translateY(-5px) !important; border-color: rgba(56, 189, 248, 0.4) !important; box-shadow: 0 14px 32px rgba(56, 189, 248, 0.15) !important; } html body .cv-brand-work-thumb { width: 100% !important; aspect-ratio: 1 / 1 !important; border-radius: 12px !important; overflow: hidden !important; margin-bottom: 12px !important; background: #060c18 !important; } html body .cv-brand-work-thumb img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; transition: transform 0.4s ease !important; } html body .cv-brand-work-card:hover .cv-brand-work-thumb img { transform: scale(1.06) !important; } html body .cv-brand-work-title { font-family: 'Sora', sans-serif !important; font-size: 16.5px !important; font-weight: 700 !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; margin: 0 0 4px 0 !important; } html body .cv-brand-work-cat { font-size: 13px !important; font-weight: 500 !important; color: #38bdf8 !important; -webkit-text-fill-color: #38bdf8 !important; } html body .cv-brand-bottom-banner { position: relative !important; border-radius: 20px !important; overflow: hidden !important; padding: 44px 40px !important; display: flex !important; align-items: center !important; justify-content: space-between !important; background: linear-gradient(135deg, #091322 0%, #060c18 100%) !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; box-shadow: 0 20px 45px rgba(0, 0, 0, 0.45) !important; } html body .cv-brand-banner-quote { font-family: 'Sora', sans-serif !important; font-size: clamp(17px, 1.8vw, 21px) !important; font-style: italic !important; font-weight: 600 !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; line-height: 1.5 !important; margin: 0 !important; max-width: 650px !important; } html body .cv-dev-page { background: #060c18 !important; padding: 40px 0 80px 0 !important; min-height: 100vh; } html body .cv-dev-hero { display: grid !important; grid-template-columns: 1.15fr 0.85fr !important; align-items: center !important; gap: 40px !important; margin-bottom: 50px !important; } html body .cv-dev-hero-h1 { font-family: 'Sora', sans-serif !important; font-size: clamp(32px, 3.8vw, 48px) !important; font-weight: 800 !important; line-height: 1.15 !important; margin: 0 0 16px 0 !important; } html body .cv-dev-hero-h1 .h-white { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } html body .cv-dev-hero-h1 .h-gold { background: linear-gradient(135deg, #fde68a 0%, #f59e0b 60%, #d97706 100%) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; } html body .cv-dev-hero-desc { color: #94a3b8 !important; -webkit-text-fill-color: #94a3b8 !important; font-size: 16px !important; line-height: 1.65 !important; } html body .cv-dev-hero-img-card { border-radius: 20px !important; overflow: hidden !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5) !important; background: #0d1726 !important; } html body .cv-dev-hero-img-card img { width: 100% !important; height: 100% !important; max-height: 360px !important; object-fit: cover !important; display: block !important; } html body .cv-dev-white-grid { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 24px !important; margin-bottom: 56px !important; background: transparent !important; border: none !important; padding: 0 !important; box-shadow: none !important; } html body .cv-dev-white-card { background: #ffffff !important; border-radius: 18px !important; padding: 34px 24px !important; text-align: center !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important; transition: all 0.3s ease !important; border: 1px solid #eef2f6 !important; } html body .cv-dev-white-card:hover { transform: translateY(-6px) !important; box-shadow: 0 18px 42px rgba(0, 0, 0, 0.45) !important; } html body .cv-dev-white-icon { width: 54px !important; height: 54px !important; border-radius: 14px !important; background: #eff6ff !important; border: 1px solid #dbeafe !important; color: #0284c7 !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 24px !important; margin: 0 auto 16px auto !important; } html body .cv-dev-white-title { font-family: 'Sora', sans-serif !important; font-size: 18.5px !important; font-weight: 700 !important; color: #0f172a !important; -webkit-text-fill-color: #0f172a !important; margin: 0 !important; } html body .cv-dev-sec-title { font-family: 'Sora', sans-serif !important; font-size: 22px !important; font-weight: 700 !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; margin: 0 0 22px 0 !important; } html body .cv-dev-process-grid { display: grid !important; grid-template-columns: repeat(5, 1fr) !important; gap: 16px !important; margin-bottom: 56px !important; } html body .cv-dev-proc-step { background: rgba(13, 23, 40, 0.75) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; border-radius: 14px !important; padding: 22px 18px !important; transition: all 0.28s ease !important; } html body .cv-dev-proc-step:hover { border-color: rgba(56, 189, 248, 0.4) !important; background: rgba(18, 32, 54, 0.9) !important; transform: translateY(-3px) !important; } html body .cv-dev-proc-num { width: 32px !important; height: 32px !important; border-radius: 50% !important; border: 1.5px solid #38bdf8 !important; color: #38bdf8 !important; -webkit-text-fill-color: #38bdf8 !important; font-family: 'Sora', sans-serif !important; font-size: 13px !important; font-weight: 700 !important; display: flex !important; align-items: center !important; justify-content: center !important; margin-bottom: 12px !important; } html body .cv-dev-proc-title { font-family: 'Sora', sans-serif !important; font-size: 16px !important; font-weight: 700 !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; margin: 0 0 4px 0 !important; } html body .cv-dev-proc-desc { font-size: 13px !important; color: #94a3b8 !important; -webkit-text-fill-color: #94a3b8 !important; line-height: 1.5 !important; margin: 0 !important; } html body .cv-dev-tech-grid { display: grid !important; grid-template-columns: repeat(10, 1fr) !important; gap: 12px !important; margin-bottom: 56px !important; } html body .cv-dev-tech-pill { background: rgba(13, 23, 40, 0.75) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; border-radius: 12px !important; padding: 16px 8px !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 8px !important; transition: all 0.25s ease !important; } html body .cv-dev-tech-pill:hover { border-color: rgba(56, 189, 248, 0.4) !important; transform: translateY(-3px) !important; } html body .cv-dev-tech-icon { font-size: 26px !important; } html body .cv-dev-tech-label { font-family: 'Inter', sans-serif !important; font-size: 12px !important; font-weight: 600 !important; color: #cbd5e1 !important; -webkit-text-fill-color: #cbd5e1 !important; } html body .cv-dev-bottom-banner { position: relative !important; border-radius: 20px !important; overflow: hidden !important; padding: 44px 40px !important; display: flex !important; align-items: center !important; justify-content: space-between !important; background: linear-gradient(135deg, #091322 0%, #060c18 100%) !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; box-shadow: 0 20px 45px rgba(0, 0, 0, 0.45) !important; } html body .cv-dev-banner-text { font-family: 'Sora', sans-serif !important; font-size: clamp(20px, 2.2vw, 28px) !important; font-weight: 800 !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; position: relative !important; z-index: 2 !important; } html body .cv-dm-page { background: #060c18 !important; padding: 40px 0 80px 0 !important; min-height: 100vh; } html body .cv-dm-hero { display: grid !important; grid-template-columns: 1.15fr 0.85fr !important; align-items: center !important; gap: 40px !important; margin-bottom: 50px !important; } html body .cv-dm-hero-h1 { font-family: 'Sora', sans-serif !important; font-size: clamp(32px, 3.8vw, 48px) !important; font-weight: 800 !important; line-height: 1.15 !important; margin: 0 0 16px 0 !important; } html body .cv-dm-hero-h1 .h-white { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } html body .cv-dm-hero-h1 .h-gold { background: linear-gradient(135deg, #fde68a 0%, #f59e0b 60%, #d97706 100%) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; } html body .cv-dm-hero-desc { color: #94a3b8 !important; -webkit-text-fill-color: #94a3b8 !important; font-size: 16px !important; line-height: 1.65 !important; } html body .cv-dm-hero-img-card { border-radius: 20px !important; overflow: hidden !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5) !important; background: #0d1726 !important; } html body .cv-dm-hero-img-card img { width: 100% !important; height: 100% !important; max-height: 360px !important; object-fit: cover !important; display: block !important; } html body .cv-dm-services-card { background: #ffffff !important; border-radius: 20px !important; padding: 32px 28px !important; display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 20px !important; margin-bottom: 56px !important; box-shadow: 0 16px 45px rgba(0, 0, 0, 0.35) !important; border: 1px solid #eef2f6 !important; } html body .cv-dm-service-item { text-align: center !important; padding: 20px 14px !important; border-radius: 14px !important; background: #f8fafc !important; border: 1px solid #eef2f6 !important; transition: all 0.28s ease !important; } html body .cv-dm-service-item:hover { background: #eff6ff !important; border-color: #bfdbfe !important; transform: translateY(-4px) !important; box-shadow: 0 8px 24px rgba(37, 99, 235, 0.12) !important; } html body .cv-dm-service-icon { font-size: 32px !important; margin-bottom: 12px !important; } html body .cv-dm-service-title { font-family: 'Sora', sans-serif !important; font-size: 16.5px !important; font-weight: 700 !important; color: #0f172a !important; -webkit-text-fill-color: #0f172a !important; margin: 0 0 4px 0 !important; } html body .cv-dm-service-sub { font-size: 13px !important; color: #64748b !important; -webkit-text-fill-color: #64748b !important; margin: 0 !important; } html body .cv-dm-metrics-sec { margin-bottom: 56px !important; } html body .cv-dm-metrics-heading { font-family: 'Sora', sans-serif !important; font-size: 22px !important; font-weight: 700 !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; margin: 0 0 24px 0 !important; } html body .cv-dm-metrics-grid { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 20px !important; } html body .cv-dm-metric-box { background: linear-gradient(145deg, #0d1a2d 0%, #08111e 100%) !important; border: 1px solid rgba(56, 189, 248, 0.18) !important; border-radius: 16px !important; padding: 30px 20px !important; text-align: center !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important; } html body .cv-dm-metric-val { font-family: 'Sora', sans-serif !important; font-size: clamp(32px, 3.2vw, 42px) !important; font-weight: 800 !important; color: #f59e0b !important; -webkit-text-fill-color: #f59e0b !important; line-height: 1.1 !important; margin-bottom: 8px !important; } html body .cv-dm-metric-lbl { font-size: 13.5px !important; font-weight: 500 !important; color: #94a3b8 !important; -webkit-text-fill-color: #94a3b8 !important; } html body .cv-dm-bottom-banner { position: relative !important; border-radius: 20px !important; overflow: hidden !important; padding: 44px 40px !important; display: flex !important; align-items: center !important; justify-content: space-between !important; background: linear-gradient(135deg, #091322 0%, #060c18 100%) !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; box-shadow: 0 20px 45px rgba(0, 0, 0, 0.45) !important; } html body .cv-dm-banner-text { font-family: 'Sora', sans-serif !important; font-size: clamp(20px, 2.2vw, 28px) !important; font-weight: 800 !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; position: relative !important; z-index: 2 !important; } html body .cv-proc-timeline-sec { background: #ffffff !important; border-radius: 24px !important; padding: 60px 48px !important; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35) !important; margin-bottom: 60px !important; } html body .cv-proc-timeline-wrap { position: relative !important; max-width: 820px !important; margin: 0 auto !important; padding-left: 20px !important; } html body .cv-proc-timeline-line { position: absolute !important; top: 30px !important; bottom: 30px !important; left: 46px !important; width: 2px !important; background: repeating-linear-gradient(to bottom, #d97706, #d97706 6px, transparent 6px, transparent 12px) !important; z-index: 1 !important; } html body .cv-proc-step-item { display: flex !important; align-items: flex-start !important; gap: 32px !important; margin-bottom: 40px !important; position: relative !important; z-index: 2 !important; background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; } html body .cv-proc-step-item:last-child { margin-bottom: 0 !important; } html body .cv-proc-step-num { width: 52px !important; height: 52px !important; border-radius: 50% !important; background: linear-gradient(135deg, #fde68a 0%, #f59e0b 60%, #d97706 100%) !important; color: #0b1324 !important; -webkit-text-fill-color: #0b1324 !important; font-family: 'Sora', sans-serif !important; font-size: 19px !important; font-weight: 800 !important; display: flex !important; align-items: center !important; justify-content: center !important; box-shadow: 0 6px 18px rgba(245, 158, 11, 0.4) !important; flex-shrink: 0 !important; } html body .cv-proc-step-body { padding-top: 6px !important; } html body .cv-proc-step-title { font-family: 'Sora', sans-serif !important; font-size: 21px !important; font-weight: 800 !important; color: #0b1324 !important; -webkit-text-fill-color: #0b1324 !important; margin: 0 0 6px 0 !important; line-height: 1.2 !important; } html body .cv-proc-step-desc { font-family: 'DM Sans', sans-serif !important; font-size: 15.5px !important; color: #475569 !important; -webkit-text-fill-color: #475569 !important; line-height: 1.6 !important; margin: 0 !important; } html body .cv-cs-page { background: #060c18 !important; padding: 40px 0 80px 0 !important; min-height: 100vh; } html body .cv-cs-showcase-split { display: grid !important; grid-template-columns: 1.35fr 0.65fr !important; gap: 32px !important; align-items: stretch !important; margin-bottom: 44px !important; } html body .cv-cs-hero-card { border-radius: 20px !important; overflow: hidden !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; box-shadow: 0 20px 45px rgba(0, 0, 0, 0.45) !important; } html body .cv-cs-hero-card img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; } html body .cv-cs-metrics-box { background: linear-gradient(145deg, #0d1a2d 0%, #08111e 100%) !important; border: 1px solid rgba(56, 189, 248, 0.18) !important; border-radius: 20px !important; padding: 36px 30px !important; display: flex !important; flex-direction: column !important; justify-content: space-around !important; box-shadow: 0 16px 45px rgba(0, 0, 0, 0.4) !important; } html body .cv-cs-metric-item { border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important; padding-bottom: 18px !important; margin-bottom: 18px !important; } html body .cv-cs-metric-item:last-child { border-bottom: none !important; padding-bottom: 0 !important; margin-bottom: 0 !important; } html body .cv-cs-metric-val { font-family: 'Sora', sans-serif !important; font-size: clamp(34px, 3.4vw, 44px) !important; font-weight: 800 !important; color: #f59e0b !important; -webkit-text-fill-color: #f59e0b !important; line-height: 1.1 !important; margin-bottom: 6px !important; } html body .cv-cs-metric-lbl { font-size: 14px !important; font-weight: 500 !important; color: #94a3b8 !important; -webkit-text-fill-color: #94a3b8 !important; } html body .cv-cs-cards-grid { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 20px !important; margin-bottom: 44px !important; background: transparent !important; border: none !important; padding: 0 !important; box-shadow: none !important; } html body .cv-cs-card { background: #ffffff !important; border-radius: 18px !important; padding: 30px 24px !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important; border: 1px solid #eef2f6 !important; transition: all 0.28s ease !important; } html body .cv-cs-card:hover { transform: translateY(-4px) !important; box-shadow: 0 16px 36px rgba(0, 0, 0, 0.4) !important; } html body .cv-cs-card-title { font-family: 'Sora', sans-serif !important; font-size: 19px !important; font-weight: 800 !important; color: #0f172a !important; -webkit-text-fill-color: #0f172a !important; margin: 0 0 16px 0 !important; } html body .cv-cs-card-list { margin: 0 !important; padding: 0 !important; list-style: none !important; } html body .cv-cs-card-list li { position: relative !important; padding-left: 18px !important; list-style: none !important; font-size: 14.5px !important; color: #334155 !important; -webkit-text-fill-color: #334155 !important; line-height: 1.75 !important; margin-bottom: 6px !important; } html body .cv-cs-card-list li::before { content: "•" !important; position: absolute !important; left: 0 !important; top: 0 !important; color: #0284c7 !important; -webkit-text-fill-color: #0284c7 !important; font-weight: 800 !important; font-size: 16px !important; } html body .cv-cs-testimonial { background: linear-gradient(145deg, #0d1a2d 0%, #08111e 100%) !important; border: 1px solid rgba(56, 189, 248, 0.18) !important; border-radius: 20px !important; padding: 32px 36px !important; display: flex !important; align-items: center !important; gap: 24px !important; margin-bottom: 44px !important; box-shadow: 0 16px 45px rgba(0, 0, 0, 0.4) !important; } html body .cv-cs-testi-avatar { width: 64px !important; height: 64px !important; border-radius: 14px !important; object-fit: cover !important; border: 2px solid #f59e0b !important; flex-shrink: 0 !important; } html body .cv-cs-testi-quote { font-family: 'DM Sans', sans-serif !important; font-size: 16px !important; font-style: italic !important; line-height: 1.6 !important; color: #f1f5f9 !important; -webkit-text-fill-color: #f1f5f9 !important; margin: 0 0 10px 0 !important; } html body .cv-cs-testi-name { font-family: 'Sora', sans-serif !important; font-size: 15px !important; font-weight: 700 !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; display: inline-block !important; margin-right: 8px !important; } html body .cv-cs-testi-role { font-size: 13.5px !important; color: #94a3b8 !important; -webkit-text-fill-color: #94a3b8 !important; } html body .cv-cs-testi-stars { color: #f59e0b !important; font-size: 15px !important; margin-left: auto !important; display: flex !important; gap: 4px !important; flex-shrink: 0 !important; } @media (max-width: 991px) { html body .cv-brand-hero, html body .cv-dev-hero, html body .cv-dm-hero, html body .cv-brand-mid-grid, html body .cv-cs-showcase-split { grid-template-columns: 1fr !important; } html body .cv-brand-work-grid, html body .cv-dev-white-grid, html body .cv-dm-services-card, html body .cv-cs-cards-grid { grid-template-columns: repeat(2, 1fr) !important; } html body .cv-dev-process-grid { grid-template-columns: repeat(2, 1fr) !important; } html body .cv-dev-tech-grid { grid-template-columns: repeat(5, 1fr) !important; } html body .cv-dm-metrics-grid { grid-template-columns: repeat(2, 1fr) !important; } html body .cv-cs-testimonial { flex-direction: column !important; align-items: flex-start !important; } html body .cv-cs-testi-stars { margin-left: 0 !important; } } @media (max-width: 640px) { html body .cv-brand-work-grid, html body .cv-dev-white-grid, html body .cv-dm-services-card, html body .cv-cs-cards-grid, html body .cv-dev-process-grid, html body .cv-dm-metrics-grid { grid-template-columns: 1fr !important; } html body .cv-dev-tech-grid { grid-template-columns: repeat(3, 1fr) !important; } html body .cv-brand-bottom-banner, html body .cv-dev-bottom-banner, html body .cv-dm-bottom-banner { flex-direction: column !important; text-align: center !important; gap: 20px !important; padding: 30px 20px !important; } html body .cv-proc-timeline-sec { padding: 40px 20px !important; } html body .cv-proc-timeline-line { left: 26px !important; } html body .cv-proc-timeline-wrap { padding-left: 0 !important; } html body .cv-proc-step-item { gap: 16px !important; } html body .cv-proc-step-num { width: 44px !important; height: 44px !important; font-size: 16px !important; } } .cv-brand-logo, .cv-footer-brand, .cv-footer-logo-row { display: inline-flex; align-items: center; text-decoration: none; background: transparent !important; } .cv-brand-logo-img { height: 40px; width: auto; max-width: 240px; object-fit: contain; display: block; transition: transform 0.25s ease, filter 0.25s ease; } .cv-brand-logo:hover .cv-brand-logo-img, .cv-footer-brand:hover .cv-brand-logo-img { transform: translateY(-1px); filter: drop-shadow(0 4px 12px rgba(225, 56, 60, 0.35)); } .cv-footer .cv-brand-logo-img, footer .cv-brand-logo-img, .cv-footer-brand .cv-brand-logo-img { height: 44px; max-width: 260px; } @media (max-width: 768px) { .cv-brand-logo-img { height: 32px; max-width: 195px; } .cv-footer .cv-brand-logo-img, footer .cv-brand-logo-img, .cv-footer-brand .cv-brand-logo-img { height: 36px; max-width: 210px; } } .cv-what-header, .cv-services-header, .cv-industries-header, .cv-work-header, .cv-process-header, .cv-marketing-header, .cv-tech-left-col, .cv-clients-header, .cv-testi-header, .cv-faq-header, .cv-insights-header { display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center !important; margin-left: auto !important; margin-right: auto !important; margin-bottom: clamp(28px, 3.2vw, 40px) !important; width: 100% !important; max-width: 820px !important; } .cv-what-badge, .cv-services-badge, .cv-industries-badge, .cv-work-badge, .cv-process-badge, .cv-marketing-badge, .cv-tech-badge, .cv-clients-badge, .cv-testi-badge, .cv-faq-badge, .cv-insights-badge { display: inline-block !important; margin: 0 auto 10px auto !important; text-align: center !important; } .cv-what-heading, .cv-services-heading, .cv-industries-heading, .cv-work-heading, .cv-process-heading, .cv-marketing-heading, .cv-tech-heading, .cv-clients-heading, .cv-testi-heading, .cv-faq-heading, .cv-insights-heading { text-align: center !important; margin: 0 auto !important; width: 100% !important; } .cv-what-subheading, .cv-work-subheading, .cv-tech-subheading { text-align: center !important; margin: 10px auto 0 auto !important; max-width: 620px !important; } .cv-services-title-wrap, .cv-industries-title-wrap, .cv-work-title-wrap, .cv-faq-header-left, .cv-insights-header-left { display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center !important; width: 100% !important; margin: 0 auto !important; } .cv-services-link, .cv-industries-link, .cv-work-btn-all, .cv-tech-link, .cv-faq-link, .cv-insights-link { margin: 12px auto 0 auto !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; text-align: center !important; } .cv-what-grid { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 32px !important; } .cv-what-flow { width: 100% !important; max-width: 920px !important; margin: 0 auto !important; justify-content: center !important; } .cv-process-grid { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 32px !important; } .cv-process-flow { width: 100% !important; max-width: 1100px !important; margin: 0 auto !important; justify-content: center !important; } .cv-marketing-grid { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 32px !important; } .cv-numbers-grid { width: 100% !important; max-width: 1100px !important; margin: 0 auto !important; } .cv-tech-main-grid { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 28px !important; } .cv-tech-pills-row { width: 100% !important; max-width: 820px !important; margin: 0 auto !important; justify-content: center !important; } .cv-tech-visual-col { width: 100% !important; max-width: 720px !important; display: flex !important; justify-content: center !important; margin: 0 auto !important; } .cv-what-section { background: #ffffff !important; padding: clamp(54px, 5.5vw, 84px) 0 !important; } .cv-what-flow { display: grid !important; grid-template-columns: repeat(5, 1fr) !important; gap: 16px !important; width: 100% !important; max-width: 1180px !important; margin: 0 auto !important; align-items: stretch !important; } .cv-what-arrow { display: none !important; } .cv-what-step { background: #ffffff !important; border: 1px solid #e2e8f0 !important; border-radius: 20px !important; padding: 22px 14px 18px 14px !important; display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center !important; box-shadow: 0 4px 20px rgba(15, 23, 42, 0.04) !important; position: relative !important; transition: all 0.32s cubic-bezier(0.16, 1, 0.3, 1) !important; max-width: none !important; flex: none !important; cursor: pointer !important; box-sizing: border-box !important; } .cv-what-step:hover { transform: translateY(-8px) !important; box-shadow: 0 16px 36px rgba(15, 23, 42, 0.1) !important; } .cv-what-step-num { display: inline-flex !important; align-items: center !important; justify-content: center !important; font-family: 'Sora', sans-serif !important; font-size: 11px !important; font-weight: 800 !important; letter-spacing: 0.08em !important; padding: 3px 10px !important; border-radius: 999px !important; background: #f1f5f9 !important; color: #475569 !important; margin-bottom: 12px !important; transition: all 0.25s ease !important; } .cv-what-step:hover .cv-what-step-num { background: #2563eb !important; color: #ffffff !important; } .cv-what-icon { width: 60px !important; height: 60px !important; border-radius: 18px !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 23px !important; margin-bottom: 12px !important; transition: all 0.3s ease !important; flex-shrink: 0 !important; } .cv-what-step:hover .cv-what-icon { transform: scale(1.1) !important; } .cv-icon-strategy { background: rgba(245, 158, 11, 0.12) !important; border: 1px solid rgba(245, 158, 11, 0.28) !important; } .cv-icon-strategy i { color: #d97706 !important; -webkit-text-fill-color: #d97706 !important; } .cv-what-step:hover .cv-icon-strategy { box-shadow: 0 10px 24px rgba(245, 158, 11, 0.25) !important; } .cv-icon-design { background: rgba(147, 51, 234, 0.12) !important; border: 1px solid rgba(147, 51, 234, 0.28) !important; } .cv-icon-design i { color: #9333ea !important; -webkit-text-fill-color: #9333ea !important; } .cv-what-step:hover .cv-icon-design { box-shadow: 0 10px 24px rgba(147, 51, 234, 0.25) !important; } .cv-icon-tech { background: rgba(2, 132, 199, 0.12) !important; border: 1px solid rgba(2, 132, 199, 0.28) !important; } .cv-icon-tech i { color: #0284c7 !important; -webkit-text-fill-color: #0284c7 !important; } .cv-what-step:hover .cv-icon-tech { box-shadow: 0 10px 24px rgba(2, 132, 199, 0.25) !important; } .cv-icon-marketing { background: rgba(225, 29, 72, 0.12) !important; border: 1px solid rgba(225, 29, 72, 0.28) !important; } .cv-icon-marketing i { color: #e11d48 !important; -webkit-text-fill-color: #e11d48 !important; } .cv-what-step:hover .cv-icon-marketing { box-shadow: 0 10px 24px rgba(225, 29, 72, 0.25) !important; } .cv-icon-growth { background: rgba(16, 185, 129, 0.12) !important; border: 1px solid rgba(16, 185, 129, 0.28) !important; } .cv-icon-growth i { color: #059669 !important; -webkit-text-fill-color: #059669 !important; } .cv-what-step:hover .cv-icon-growth { box-shadow: 0 10px 24px rgba(16, 185, 129, 0.25) !important; } .cv-what-step-title { font-family: 'Sora', sans-serif !important; font-size: 16px !important; font-weight: 800 !important; color: #0b1324 !important; -webkit-text-fill-color: #0b1324 !important; margin: 0 0 4px 0 !important; } .cv-what-step-desc { font-family: 'DM Sans', sans-serif !important; font-size: 12.5px !important; line-height: 1.35 !important; color: #64748b !important; -webkit-text-fill-color: #64748b !important; margin: 0 !important; } @media (max-width: 1024px) { .cv-what-flow { grid-template-columns: repeat(3, 1fr) !important; gap: 14px !important; } } @media (max-width: 640px) { .cv-what-flow { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; } .cv-what-step:last-child { grid-column: span 2 !important; max-width: 320px !important; margin: 0 auto !important; width: 100% !important; } .cv-what-step { padding: 18px 12px 16px 12px !important; } .cv-what-icon { width: 52px !important; height: 52px !important; font-size: 20px !important; } } .cv-services-section { background: #070d19 !important; padding: clamp(54px, 5.5vw, 84px) 0 !important; } .cv-services-grid { display: grid !important; grid-template-columns: repeat(5, 1fr) !important; gap: 14px !important; width: 100% !important; max-width: 1260px !important; margin: 0 auto !important; } .cv-service-card { background: #ffffff !important; border: 1px solid rgba(255, 255, 255, 0.25) !important; border-radius: 18px !important; padding: 16px 14px !important; min-height: 84px !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 10px !important; text-decoration: none !important; box-shadow: 0 8px 26px rgba(0, 0, 0, 0.35) !important; transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important; box-sizing: border-box !important; position: relative !important; overflow: hidden !important; } .cv-service-card:hover { transform: translateY(-5px) !important; background: #ffffff !important; border-color: #38bdf8 !important; box-shadow: 0 16px 36px rgba(0, 0, 0, 0.5), 0 0 20px rgba(56, 189, 248, 0.25) !important; } .cv-service-left { display: flex !important; align-items: center !important; gap: 12px !important; min-width: 0 !important; flex: 1 1 auto !important; } .cv-service-icon { width: 44px !important; height: 44px !important; border-radius: 13px !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 18px !important; flex-shrink: 0 !important; transition: transform 0.25s ease !important; } .cv-service-card:hover .cv-service-icon { transform: scale(1.1) !important; } .cv-service-texts { display: flex !important; flex-direction: column !important; min-width: 0 !important; } html body .cv-service-title, .cv-service-title { font-family: 'Sora', sans-serif !important; font-size: 14px !important; font-weight: 800 !important; color: #0f172a !important; -webkit-text-fill-color: #0f172a !important; line-height: 1.25 !important; white-space: normal !important; overflow: visible !important; text-overflow: clip !important; word-break: normal !important; transition: color 0.2s ease !important; } .cv-service-card:hover .cv-service-title { color: #0284c7 !important; -webkit-text-fill-color: #0284c7 !important; } html body .cv-service-sub, .cv-service-sub { font-family: 'DM Sans', sans-serif !important; font-size: 11px !important; font-weight: 500 !important; color: #64748b !important; -webkit-text-fill-color: #64748b !important; line-height: 1.3 !important; margin-top: 2px !important; white-space: normal !important; overflow: visible !important; text-overflow: clip !important; } .cv-service-arrow { width: 28px !important; height: 28px !important; border-radius: 50% !important; background: #f1f5f9 !important; border: 1px solid #e2e8f0 !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 10px !important; color: #475569 !important; -webkit-text-fill-color: #475569 !important; transition: all 0.25s ease !important; flex-shrink: 0 !important; } .cv-service-card:hover .cv-service-arrow { background: #0f172a !important; border-color: #0f172a !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; transform: translateX(3px) !important; } @media (max-width: 1200px) { .cv-services-grid { grid-template-columns: repeat(3, 1fr) !important; } } @media (max-width: 768px) { .cv-services-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; } .cv-service-card { padding: 14px 12px !important; } } @media (max-width: 520px) { .cv-services-grid { grid-template-columns: 1fr !important; } } .cv-industries-section { background: #ffffff !important; padding: clamp(54px, 5.5vw, 84px) 0 !important; overflow: hidden !important; } .cv-industries-marquee-container { position: relative !important; width: 100% !important; overflow: hidden !important; padding: 14px 0 24px 0 !important; mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%) !important; -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%) !important; } .cv-industries-marquee-track { display: flex !important; align-items: center !important; gap: 16px !important; width: max-content !important; animation: cvIndustriesMarquee 38s linear infinite !important; will-change: transform !important; } .cv-industries-marquee-container:hover .cv-industries-marquee-track { animation-play-state: paused !important; } @keyframes cvIndustriesMarquee { 0% { transform: translate3d(0, 0, 0); } 100% { transform: translate3d(-50%, 0, 0); } } .cv-industry-pill { flex: 0 0 auto !important; width: 180px !important; min-height: 110px !important; background: #ffffff !important; border: 1px solid #e2e8f0 !important; border-radius: 18px !important; padding: 18px 16px !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 10px !important; box-shadow: 0 4px 18px rgba(15, 23, 42, 0.04) !important; transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important; cursor: pointer !important; box-sizing: border-box !important; } .cv-industry-pill:hover { transform: translateY(-6px) !important; border-color: #2563eb !important; background: #f8fafc !important; box-shadow: 0 14px 30px rgba(37, 99, 235, 0.12) !important; } .cv-industry-icon-box { width: 48px !important; height: 48px !important; border-radius: 14px !important; background: rgba(37, 99, 235, 0.08) !important; display: flex !important; align-items: center !important; justify-content: center !important; transition: all 0.25s ease !important; } .cv-industry-pill:hover .cv-industry-icon-box { background: #2563eb !important; } .cv-industry-icon, .cv-industry-pill .cv-industry-icon { font-size: 22px !important; color: #2563eb !important; -webkit-text-fill-color: #2563eb !important; transition: all 0.25s ease !important; } .cv-industry-pill:hover .cv-industry-icon { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; transform: scale(1.1) !important; } .cv-industry-name, .cv-industry-pill .cv-industry-name { font-family: 'Sora', sans-serif !important; font-size: 13px !important; font-weight: 700 !important; color: #0f172a !important; -webkit-text-fill-color: #0f172a !important; text-align: center !important; line-height: 1.25 !important; margin: 0 !important; } .cv-process-section { background: #ffffff !important; padding: clamp(54px, 5.5vw, 84px) 0 !important; } .cv-process-flow { display: grid !important; grid-template-columns: repeat(6, 1fr) !important; gap: 16px !important; width: 100% !important; max-width: 1200px !important; margin: 0 auto !important; align-items: stretch !important; } .cv-process-arrow { display: none !important; } html body .cv-process-section .cv-process-step { background: #ffffff !important; border: 1px solid #e2e8f0 !important; border-radius: 20px !important; padding: 24px 14px 20px 14px !important; display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center !important; box-shadow: 0 4px 20px rgba(15, 23, 42, 0.04) !important; position: relative !important; transition: all 0.32s cubic-bezier(0.16, 1, 0.3, 1) !important; cursor: pointer !important; flex: none !important; min-width: 0 !important; box-sizing: border-box !important; } html body .cv-process-section .cv-process-step:hover { transform: translateY(-8px) !important; border-color: #2563eb !important; box-shadow: 0 16px 36px rgba(37, 99, 235, 0.12) !important; } .cv-process-circle { width: 50px !important; height: 50px !important; border-radius: 16px !important; background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 100%) !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; font-family: 'Sora', sans-serif !important; font-size: 17px !important; font-weight: 800 !important; display: flex !important; align-items: center !important; justify-content: center !important; box-shadow: 0 8px 22px rgba(37, 99, 235, 0.35) !important; margin-bottom: 12px !important; transition: transform 0.3s ease !important; flex-shrink: 0 !important; } html body .cv-process-section .cv-process-step:hover .cv-process-circle { transform: scale(1.1) !important; } .cv-process-text { display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center !important; } .cv-process-step-title { font-family: 'Sora', sans-serif !important; font-size: 15.5px !important; font-weight: 800 !important; color: #0b1324 !important; -webkit-text-fill-color: #0b1324 !important; margin: 0 0 4px 0 !important; line-height: 1.2 !important; } .cv-process-step-desc { font-family: 'DM Sans', sans-serif !important; font-size: 12px !important; color: #64748b !important; -webkit-text-fill-color: #64748b !important; line-height: 1.35 !important; margin: 0 !important; } @media (max-width: 1100px) { .cv-process-flow { grid-template-columns: repeat(3, 1fr) !important; gap: 14px !important; } } @media (max-width: 640px) { .cv-process-flow { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; } .cv-process-section .cv-process-step { padding: 18px 12px 16px 12px !important; } .cv-process-circle { width: 44px !important; height: 44px !important; font-size: 15px !important; } } .cv-marketing-section { background: #07152b !important; padding: clamp(54px, 5.5vw, 84px) 0 !important; position: relative !important; } .cv-numbers-grid { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 18px !important; width: 100% !important; max-width: 1160px !important; margin: 0 auto !important; } .cv-stat-card { background: linear-gradient(145deg, rgba(14, 27, 49, 0.95) 0%, rgba(8, 16, 32, 0.95) 100%) !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; border-radius: 22px !important; padding: 26px 22px !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 14px !important; backdrop-filter: blur(14px) !important; box-shadow: 0 12px 34px rgba(0, 0, 0, 0.45) !important; position: relative !important; overflow: hidden !important; transition: all 0.32s cubic-bezier(0.16, 1, 0.3, 1) !important; box-sizing: border-box !important; } .cv-stat-card:hover { transform: translateY(-6px) !important; border-color: rgba(56, 189, 248, 0.4) !important; box-shadow: 0 20px 48px rgba(0, 0, 0, 0.55), 0 0 25px rgba(56, 189, 248, 0.15) !important; } .cv-stat-icon-wrap { width: 48px !important; height: 48px !important; border-radius: 14px !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 21px !important; flex-shrink: 0 !important; transition: transform 0.25s ease !important; } .cv-stat-card:hover .cv-stat-icon-wrap { transform: scale(1.1) !important; } .cv-stat-icon-wrap.google { background: rgba(56, 189, 248, 0.15) !important; border: 1px solid rgba(56, 189, 248, 0.3) !important; color: #38bdf8 !important; } .cv-stat-icon-wrap.meta { background: rgba(14, 165, 233, 0.15) !important; border: 1px solid rgba(14, 165, 233, 0.3) !important; color: #0ea5e9 !important; } .cv-stat-icon-wrap.seo { background: rgba(34, 197, 94, 0.15) !important; border: 1px solid rgba(34, 197, 94, 0.3) !important; color: #22c55e !important; } .cv-stat-icon-wrap.cart { background: rgba(251, 191, 36, 0.15) !important; border: 1px solid rgba(251, 191, 36, 0.3) !important; color: #fbbf24 !important; } .cv-stat-info { display: flex !important; flex-direction: column !important; align-items: flex-start !important; width: 100% !important; } .cv-stat-label { font-family: 'DM Sans', sans-serif !important; font-size: 11.5px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.1em !important; color: #94a3b8 !important; -webkit-text-fill-color: #94a3b8 !important; margin-bottom: 3px !important; } .cv-stat-value { font-family: 'Sora', sans-serif !important; font-size: clamp(32px, 3vw, 42px) !important; font-weight: 800 !important; line-height: 1.05 !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; letter-spacing: -0.03em !important; margin: 2px 0 6px 0 !important; } .cv-stat-sub { font-family: 'DM Sans', sans-serif !important; font-size: 12.5px !important; color: #cbd5e1 !important; -webkit-text-fill-color: #cbd5e1 !important; font-weight: 500 !important; line-height: 1.35 !important; } @media (max-width: 992px) { .cv-numbers-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 16px !important; } } @media (max-width: 540px) { .cv-numbers-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; } .cv-stat-card { padding: 18px 14px !important; gap: 10px !important; } .cv-stat-icon-wrap { width: 40px !important; height: 40px !important; font-size: 18px !important; } .cv-stat-value { font-size: 26px !important; } .cv-stat-sub { font-size: 11px !important; } } .cv-hero-visual.cv-hero-slider-wrap { position: relative !important; width: 100% !important; max-width: 580px !important; border-radius: 26px !important; overflow: hidden !important; background: rgba(14, 27, 49, 0.6) !important; border: 1px solid rgba(255, 255, 255, 0.12) !important; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6), 0 0 35px rgba(56, 189, 248, 0.12) !important; aspect-ratio: 562 / 383 !important; display: block !important; user-select: none !important; margin: 0 auto !important; } .cv-hero-slider-track { position: relative !important; width: 100% !important; height: 100% !important; overflow: hidden !important; border-radius: 24px !important; } .cv-hero-slide { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; opacity: 0 !important; visibility: hidden !important; transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1) !important; transform: scale(0.97) !important; display: flex !important; align-items: center !important; justify-content: center !important; pointer-events: none !important; border-radius: 24px !important; overflow: hidden !important; } .cv-hero-slide.active { opacity: 1 !important; visibility: visible !important; transform: scale(1) !important; pointer-events: auto !important; z-index: 2 !important; } .cv-hero-slide-img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; border-radius: 24px !important; transform: translateZ(0) !important; will-change: transform !important; } .cv-hero-slide-badge { position: absolute !important; bottom: 20px !important; left: 20px !important; background: rgba(7, 13, 25, 0.78) !important; backdrop-filter: blur(14px) !important; -webkit-backdrop-filter: blur(14px) !important; border: 1px solid rgba(255, 255, 255, 0.16) !important; border-radius: 999px !important; padding: 7px 16px 7px 12px !important; display: inline-flex !important; align-items: center !important; gap: 8px !important; font-family: 'Sora', sans-serif !important; font-size: 11.5px !important; font-weight: 700 !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5) !important; z-index: 5 !important; pointer-events: none !important; letter-spacing: 0.02em !important; } .cv-slide-badge-dot { width: 7px !important; height: 7px !important; border-radius: 50% !important; background: #38bdf8 !important; box-shadow: 0 0 10px #38bdf8 !important; display: inline-block !important; flex-shrink: 0 !important; } .cv-hero-slider-nav { position: absolute !important; top: 50% !important; transform: translateY(-50%) !important; width: 42px !important; height: 42px !important; border-radius: 50% !important; background: rgba(7, 13, 25, 0.72) !important; backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important; border: 1px solid rgba(255, 255, 255, 0.14) !important; color: #ffffff !important; font-size: 13px !important; display: flex !important; align-items: center !important; justify-content: center !important; cursor: pointer !important; z-index: 10 !important; opacity: 0 !important; transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4) !important; } .cv-hero-slider-wrap:hover .cv-hero-slider-nav { opacity: 1 !important; } .cv-hero-slider-nav.prev { left: 14px !important; } .cv-hero-slider-nav.next { right: 14px !important; } .cv-hero-slider-nav:hover { background: #38bdf8 !important; color: #070d19 !important; border-color: #38bdf8 !important; transform: translateY(-50%) scale(1.1) !important; box-shadow: 0 0 20px rgba(56, 189, 248, 0.5) !important; } .cv-hero-slider-dots { position: absolute !important; bottom: 20px !important; right: 20px !important; display: flex !important; align-items: center !important; gap: 7px !important; z-index: 10 !important; background: rgba(7, 13, 25, 0.6) !important; backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important; border: 1px solid rgba(255, 255, 255, 0.12) !important; padding: 6px 12px !important; border-radius: 999px !important; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4) !important; } .cv-slider-dot { width: 8px !important; height: 8px !important; border-radius: 999px !important; background: rgba(255, 255, 255, 0.35) !important; border: none !important; cursor: pointer !important; padding: 0 !important; transition: all 0.32s cubic-bezier(0.16, 1, 0.3, 1) !important; } .cv-slider-dot.active { width: 24px !important; background: #38bdf8 !important; box-shadow: 0 0 12px rgba(56, 189, 248, 0.7) !important; } @media (max-width: 768px) { .cv-hero-visual.cv-hero-slider-wrap { max-width: 100% !important; border-radius: 20px !important; } .cv-hero-slider-nav { opacity: 0.85 !important; width: 36px !important; height: 36px !important; font-size: 11.5px !important; } .cv-hero-slider-nav.prev { left: 10px !important; } .cv-hero-slider-nav.next { right: 10px !important; } .cv-hero-slide-badge { bottom: 12px !important; left: 12px !important; font-size: 10.5px !important; padding: 5px 12px 5px 9px !important; } .cv-hero-slider-dots { bottom: 12px !important; right: 12px !important; padding: 5px 9px !important; } } .cv-hero-section { position: relative !important; overflow: visible !important; padding-bottom: 0 !important; background-color: #060c18 !important; } .cv-hero-metrics-bar { position: relative !important; margin-top: clamp(38px, 4.2vw, 56px) !important; margin-bottom: -56px !important; z-index: 30 !important; background: #060b14 !important; background: linear-gradient(180deg, #091322 0%, #030710 100%) !important; border: 1px solid rgba(255, 255, 255, 0.14) !important; border-radius: 24px !important; padding: 22px 28px !important; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.65), 0 0 30px rgba(56, 189, 248, 0.08) !important; display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 16px !important; width: 100% !important; max-width: 1200px !important; margin-left: auto !important; margin-right: auto !important; box-sizing: border-box !important; } .cv-metric-box { background: transparent !important; border: none !important; box-shadow: none !important; border-radius: 0 !important; padding: 4px 16px !important; display: flex !important; align-items: center !important; gap: 16px !important; backdrop-filter: none !important; transition: transform 0.28s ease !important; box-sizing: border-box !important; } .cv-metric-box:not(:last-child) { border-right: 1px solid rgba(255, 255, 255, 0.08) !important; } .cv-metric-box:hover { transform: translateY(-3px) !important; } .cv-metric-icon { width: 50px !important; height: 50px !important; border-radius: 14px !important; background: rgba(245, 158, 11, 0.12) !important; border: 1px solid rgba(245, 158, 11, 0.28) !important; color: #fbbf24 !important; -webkit-text-fill-color: #fbbf24 !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 20px !important; flex-shrink: 0 !important; transition: transform 0.25s ease !important; } .cv-metric-box:hover .cv-metric-icon { transform: scale(1.1) !important; } .cv-metric-info { display: flex !important; flex-direction: column !important; min-width: 0 !important; } .cv-metric-value { font-family: 'Sora', sans-serif !important; font-size: 26px !important; font-weight: 800 !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; line-height: 1.15 !important; letter-spacing: -0.02em !important; } .cv-metric-label { font-family: 'DM Sans', sans-serif !important; font-size: 13px !important; font-weight: 700 !important; color: #e2e8f0 !important; -webkit-text-fill-color: #e2e8f0 !important; line-height: 1.25 !important; margin-top: 2px !important; } .cv-metric-sub { font-family: 'DM Sans', sans-serif !important; font-size: 11px !important; color: #94a3b8 !important; -webkit-text-fill-color: #94a3b8 !important; line-height: 1.3 !important; margin-top: 2px !important; } .cv-what-section { padding-top: clamp(96px, 9vw, 130px) !important; position: relative !important; z-index: 1 !important; } @media (max-width: 992px) { .cv-hero-metrics-bar { grid-template-columns: repeat(2, 1fr) !important; gap: 16px 12px !important; padding: 20px 18px !important; margin-bottom: -48px !important; } .cv-metric-box:not(:last-child) { border-right: none !important; } .cv-metric-box:nth-child(1) { border-right: 1px solid rgba(255, 255, 255, 0.08) !important; } .cv-metric-box:nth-child(3) { border-right: 1px solid rgba(255, 255, 255, 0.08) !important; } .cv-what-section { padding-top: 90px !important; } } @media (max-width: 600px) { .cv-hero-metrics-bar { grid-template-columns: repeat(2, 1fr) !important; padding: 16px 12px !important; gap: 12px 8px !important; margin-bottom: -40px !important; } .cv-metric-box { padding: 2px 6px !important; gap: 10px !important; } .cv-metric-icon { width: 38px !important; height: 38px !important; font-size: 16px !important; } .cv-metric-value { font-size: 20px !important; } .cv-metric-label { font-size: 11.5px !important; } .cv-metric-sub { font-size: 10px !important; } .cv-what-section { padding-top: 80px !important; } } .cv-footer-contact-item { align-items: flex-start !important; line-height: 1.45 !important; transition: color 0.2s ease !important; } .cv-footer-contact-item i { margin-top: 3px !important; flex-shrink: 0 !important; } .cv-footer-contact-item:hover { color: #38bdf8 !important; } .cv-cnt-row-val { transition: color 0.2s ease !important; } a.cv-cnt-row-val:hover { color: #f59e0b !important; } .cv-cnt-map-card { position: relative !important; border-radius: 20px !important; overflow: hidden !important; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.15) !important; border: 1px solid rgba(255, 255, 255, 0.15) !important; height: 440px !important; background: #060b14 !important; } .cv-cnt-map-iframe { width: 100% !important; height: 100% !important; border: 0 !important; display: block !important; } .cv-cnt-map-overlay { position: absolute !important; top: 18px !important; left: 18px !important; right: 18px !important; max-width: 540px !important; z-index: 5 !important; background: rgba(10, 15, 29, 0.94) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; padding: 14px 20px !important; border-radius: 14px !important; border: 1px solid rgba(255, 255, 255, 0.18) !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 16px !important; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45) !important; } .cv-cnt-map-info { display: flex !important; flex-direction: column !important; gap: 3px !important; min-width: 0 !important; } .cv-cnt-map-badge { font-size: 13.5px !important; font-weight: 700 !important; color: #fff !important; display: inline-flex !important; align-items: center !important; gap: 8px !important; } .cv-cnt-map-badge i { color: #f59e0b !important; } .cv-cnt-map-sub { font-size: 12px !important; color: rgba(255, 255, 255, 0.75) !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } .cv-cnt-map-btn { background: linear-gradient(135deg, #f59e0b, #d97706) !important; color: #0b0f19 !important; font-weight: 700 !important; font-size: 12.5px !important; padding: 8px 16px !important; border-radius: 8px !important; text-decoration: none !important; white-space: nowrap !important; display: inline-flex !important; align-items: center !important; gap: 6px !important; box-shadow: 0 4px 14px rgba(245, 158, 11, 0.35) !important; transition: transform 0.2s, box-shadow 0.2s !important; flex-shrink: 0 !important; } .cv-cnt-map-btn:hover { transform: translateY(-2px) !important; box-shadow: 0 8px 20px rgba(245, 158, 11, 0.5) !important; color: #000 !important; } @media (max-width: 768px) { .cv-cnt-map-card { height: 360px !important; } .cv-cnt-map-overlay { top: 12px !important; left: 12px !important; right: 12px !important; flex-direction: column !important; align-items: flex-start !important; gap: 10px !important; padding: 12px 16px !important; } .cv-cnt-map-sub { white-space: normal !important; } .cv-cnt-map-btn { width: 100% !important; justify-content: center !important; } } .cv-faq-section { background: #060b14 !important; background-image: radial-gradient(circle at 50% 0%, rgba(56, 189, 248, 0.09) 0%, transparent 60%), radial-gradient(circle at 85% 100%, rgba(245, 158, 11, 0.07) 0%, transparent 50%) !important; padding: 100px 0 !important; position: relative !important; border-top: 1px solid rgba(255, 255, 255, 0.06) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important; } .cv-faq-header-centered { text-align: center !important; margin: 0 auto 40px auto !important; max-width: 800px !important; } .cv-faq-badge-wrap { display: flex !important; justify-content: center !important; margin-bottom: 16px !important; } .cv-faq-badge { background: rgba(245, 158, 11, 0.1) !important; border: 1px solid rgba(245, 158, 11, 0.28) !important; color: #f59e0b !important; font-size: 11.5px !important; font-weight: 700 !important; letter-spacing: 1.5px !important; padding: 6px 16px !important; border-radius: 999px !important; display: inline-flex !important; align-items: center !important; gap: 8px !important; box-shadow: 0 4px 12px rgba(245, 158, 11, 0.12) !important; } .cv-faq-heading { font-size: 38px !important; font-weight: 800 !important; color: #ffffff !important; letter-spacing: -0.025em !important; line-height: 1.25 !important; margin: 0 0 14px 0 !important; } .cv-faq-gradient-text { background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 50%, #38bdf8 100%) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; display: inline !important; } .cv-faq-sub { font-size: 15.5px !important; color: #94a3b8 !important; line-height: 1.65 !important; margin: 0 auto !important; max-width: 640px !important; } .cv-faq-tabs { display: flex !important; justify-content: center !important; flex-wrap: wrap !important; gap: 10px !important; margin: 0 auto 36px auto !important; max-width: 860px !important; } .cv-faq-tab { background: rgba(255, 255, 255, 0.04) !important; border: 1px solid rgba(255, 255, 255, 0.09) !important; color: #94a3b8 !important; padding: 9px 18px !important; border-radius: 999px !important; font-size: 13px !important; font-weight: 600 !important; cursor: pointer !important; transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important; display: inline-flex !important; align-items: center !important; gap: 8px !important; user-select: none !important; } .cv-faq-tab:hover { background: rgba(255, 255, 255, 0.08) !important; color: #ffffff !important; border-color: rgba(255, 255, 255, 0.2) !important; transform: translateY(-1px) !important; } .cv-faq-tab.active { background: linear-gradient(135deg, rgba(245, 158, 11, 0.22), rgba(56, 189, 248, 0.16)) !important; color: #fbbf24 !important; border-color: rgba(245, 158, 11, 0.48) !important; box-shadow: 0 4px 16px rgba(245, 158, 11, 0.18) !important; } .cv-faq-list { max-width: 860px !important; margin: 0 auto !important; display: flex !important; flex-direction: column !important; gap: 14px !important; } .cv-faq-item { background: rgba(13, 20, 36, 0.72) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; border-radius: 16px !important; overflow: hidden !important; margin: 0 !important; padding: 0 !important; transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25) !important; } .cv-faq-item:hover { background: rgba(15, 23, 42, 0.88) !important; border-color: rgba(245, 158, 11, 0.32) !important; transform: translateY(-2px) !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.38) !important; } .cv-faq-item.active { background: rgba(15, 23, 42, 0.96) !important; border-color: rgba(245, 158, 11, 0.5) !important; box-shadow: 0 14px 38px rgba(0, 0, 0, 0.45), 0 0 24px rgba(245, 158, 11, 0.1) !important; } .cv-faq-question { padding: 20px 24px !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 16px !important; cursor: pointer !important; user-select: none !important; transition: background 0.2s ease !important; } .cv-faq-question-left { display: flex !important; align-items: center !important; gap: 12px !important; flex: 1 1 auto !important; min-width: 0 !important; } .cv-faq-num { font-family: 'Space Grotesk', 'Plus Jakarta Sans', sans-serif !important; font-size: 13px !important; font-weight: 800 !important; color: #f59e0b !important; background: rgba(245, 158, 11, 0.12) !important; border: 1px solid rgba(245, 158, 11, 0.28) !important; padding: 3px 8px !important; border-radius: 6px !important; flex-shrink: 0 !important; line-height: 1.2 !important; } .cv-faq-cat-tag { font-size: 11px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.8px !important; color: #38bdf8 !important; background: rgba(56, 189, 248, 0.1) !important; border: 1px solid rgba(56, 189, 248, 0.2) !important; padding: 3px 8px !important; border-radius: 6px !important; flex-shrink: 0 !important; line-height: 1.2 !important; } .cv-faq-title { font-size: 16.5px !important; font-weight: 700 !important; color: #ffffff !important; line-height: 1.4 !important; margin: 0 !important; transition: color 0.2s ease !important; } .cv-faq-item.active .cv-faq-title { color: #fbbf24 !important; } .cv-faq-toggle-btn { width: 36px !important; height: 36px !important; border-radius: 50% !important; background: rgba(255, 255, 255, 0.05) !important; border: 1px solid rgba(255, 255, 255, 0.12) !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; color: #94a3b8 !important; transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important; } .cv-faq-toggle-icon { font-size: 13px !important; transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important; } .cv-faq-item.active .cv-faq-toggle-btn { background: rgba(245, 158, 11, 0.18) !important; border-color: rgba(245, 158, 11, 0.45) !important; color: #f59e0b !important; transform: rotate(45deg) !important; } .cv-faq-answer { padding: 0 24px 24px 24px !important; display: none !important; animation: faqFadeSlide 0.32s cubic-bezier(0.16, 1, 0.3, 1) forwards !important; } .cv-faq-item.active .cv-faq-answer { display: block !important; } @keyframes faqFadeSlide { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } .cv-faq-answer-inner p { font-size: 14.5px !important; color: #cbd5e1 !important; line-height: 1.7 !important; margin: 0 0 12px 0 !important; } .cv-faq-answer-inner p strong { color: #ffffff !important; font-weight: 700 !important; } .cv-faq-answer-inner p:last-child { margin-bottom: 0 !important; } .cv-faq-tags { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; margin-top: 14px !important; padding-top: 14px !important; border-top: 1px solid rgba(255, 255, 255, 0.07) !important; } .cv-faq-tag { font-size: 12px !important; color: #7dd3fc !important; background: rgba(56, 189, 248, 0.08) !important; border: 1px solid rgba(56, 189, 248, 0.2) !important; padding: 4px 11px !important; border-radius: 6px !important; display: inline-flex !important; align-items: center !important; gap: 6px !important; font-weight: 500 !important; } .cv-faq-tag i { color: #38bdf8 !important; font-size: 11px !important; } .cv-faq-cta-banner { max-width: 860px !important; margin: 44px auto 0 auto !important; background: linear-gradient(135deg, rgba(15, 23, 42, 0.88), rgba(30, 41, 59, 0.75)) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; border: 1px solid rgba(245, 158, 11, 0.28) !important; border-radius: 18px !important; padding: 24px 28px !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 20px !important; box-shadow: 0 14px 38px rgba(0, 0, 0, 0.38) !important; } .cv-faq-cta-left { display: flex !important; align-items: center !important; gap: 16px !important; min-width: 0 !important; } .cv-faq-cta-icon-wrap { width: 48px !important; height: 48px !important; border-radius: 14px !important; background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(56, 189, 248, 0.15)) !important; border: 1px solid rgba(245, 158, 11, 0.35) !important; display: flex !important; align-items: center !important; justify-content: center !important; color: #f59e0b !important; font-size: 20px !important; flex-shrink: 0 !important; } .cv-faq-cta-title { font-size: 16.5px !important; font-weight: 700 !important; color: #ffffff !important; margin: 0 0 3px 0 !important; } .cv-faq-cta-desc { font-size: 13px !important; color: #94a3b8 !important; margin: 0 !important; } .cv-faq-cta-actions { display: flex !important; align-items: center !important; gap: 10px !important; flex-shrink: 0 !important; } .cv-btn-wa { background: #25D366 !important; color: #ffffff !important; font-weight: 700 !important; padding: 9px 18px !important; border-radius: 9px !important; font-size: 13px !important; text-decoration: none !important; display: inline-flex !important; align-items: center !important; gap: 7px !important; box-shadow: 0 4px 14px rgba(37, 211, 102, 0.3) !important; transition: all 0.2s ease !important; white-space: nowrap !important; } .cv-btn-wa:hover { background: #20bd5a !important; transform: translateY(-2px) !important; box-shadow: 0 6px 18px rgba(37, 211, 102, 0.45) !important; color: #ffffff !important; } .cv-btn-call { background: rgba(255, 255, 255, 0.07) !important; border: 1px solid rgba(255, 255, 255, 0.16) !important; color: #ffffff !important; font-weight: 600 !important; padding: 9px 16px !important; border-radius: 9px !important; font-size: 13px !important; text-decoration: none !important; display: inline-flex !important; align-items: center !important; gap: 7px !important; transition: all 0.2s ease !important; white-space: nowrap !important; } .cv-btn-call:hover { background: rgba(255, 255, 255, 0.12) !important; border-color: rgba(255, 255, 255, 0.3) !important; transform: translateY(-2px) !important; color: #ffffff !important; } @media (max-width: 860px) { .cv-faq-section { padding: 70px 0 !important; } .cv-faq-heading { font-size: 28px !important; } .cv-faq-question { padding: 16px 18px !important; } .cv-faq-title { font-size: 15px !important; } .cv-faq-answer { padding: 0 18px 20px 18px !important; } .cv-faq-cta-banner { flex-direction: column !important; align-items: flex-start !important; padding: 20px !important; } .cv-faq-cta-actions { width: 100% !important; flex-wrap: wrap !important; } .cv-faq-cta-actions a { flex: 1 1 100% !important; justify-content: center !important; } } @media (max-width: 600px) { .cv-faq-cat-tag { display: none !important; } .cv-faq-num { padding: 2px 6px !important; font-size: 11.5px !important; } .cv-faq-toggle-btn { width: 30px !important; height: 30px !important; } .cv-faq-toggle-icon { font-size: 11px !important; } .cv-faq-tabs { gap: 6px !important; } .cv-faq-tab { padding: 7px 12px !important; font-size: 12px !important; } } .cv-roadmap-track-container { position: relative !important; width: 100% !important; max-width: 1220px !important; margin: 0 auto !important; } .cv-roadmap-timeline-track { position: absolute !important; top: 36px !important; left: 90px !important; right: 90px !important; height: 3px !important; background: linear-gradient(90deg, rgba(245, 158, 11, 0.45) 0%, rgba(139, 92, 246, 0.45) 25%, rgba(2, 132, 199, 0.45) 50%, rgba(225, 29, 72, 0.45) 75%, rgba(16, 185, 129, 0.45) 100% ) !important; z-index: 1 !important; border-radius: 999px !important; pointer-events: none !important; } .cv-roadmap-cards-grid { display: grid !important; grid-template-columns: repeat(5, 1fr) !important; gap: 16px !important; width: 100% !important; position: relative !important; z-index: 2 !important; align-items: stretch !important; } .cv-roadmap-step { background: #ffffff !important; border: 1px solid #e2e8f0 !important; border-radius: 22px !important; padding: 22px 14px 20px 14px !important; display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center !important; box-shadow: 0 6px 24px rgba(15, 23, 42, 0.05) !important; position: relative !important; transition: all 0.32s cubic-bezier(0.16, 1, 0.3, 1) !important; cursor: pointer !important; overflow: visible !important; } .cv-roadmap-step:hover { transform: translateY(-8px) !important; box-shadow: 0 20px 42px rgba(15, 23, 42, 0.12) !important; border-color: #cbd5e1 !important; } .cv-roadmap-step::before { content: "" !important; position: absolute !important; top: 0 !important; left: 18px !important; right: 18px !important; height: 3.5px !important; border-radius: 0 0 4px 4px !important; opacity: 0 !important; transition: opacity 0.28s ease !important; } .cv-roadmap-step[data-step="1"]::before { background: #f59e0b !important; } .cv-roadmap-step[data-step="2"]::before { background: #8b5cf6 !important; } .cv-roadmap-step[data-step="3"]::before { background: #0284c7 !important; } .cv-roadmap-step[data-step="4"]::before { background: #e11d48 !important; } .cv-roadmap-step[data-step="5"]::before { background: #10b981 !important; } .cv-roadmap-step:hover::before { opacity: 1 !important; } .cv-roadmap-node-badge { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 4px !important; margin-bottom: 12px !important; position: relative !important; z-index: 3 !important; } .cv-roadmap-step-pill { width: 28px !important; height: 28px !important; border-radius: 50% !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; font-family: 'Sora', sans-serif !important; font-size: 11px !important; font-weight: 800 !important; background: #ffffff !important; border: 2px solid #e2e8f0 !important; color: #475569 !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important; transition: all 0.25s ease !important; margin-bottom: 14px !important; } .cv-roadmap-step:hover .cv-roadmap-step-pill.pill-strategy { background: #f59e0b !important; border-color: #f59e0b !important; color: #ffffff !important; box-shadow: 0 0 14px rgba(245, 158, 11, 0.45) !important; } .cv-roadmap-step:hover .cv-roadmap-step-pill.pill-design { background: #8b5cf6 !important; border-color: #8b5cf6 !important; color: #ffffff !important; box-shadow: 0 0 14px rgba(139, 92, 246, 0.45) !important; } .cv-roadmap-step:hover .cv-roadmap-step-pill.pill-tech { background: #0284c7 !important; border-color: #0284c7 !important; color: #ffffff !important; box-shadow: 0 0 14px rgba(2, 132, 199, 0.45) !important; } .cv-roadmap-step:hover .cv-roadmap-step-pill.pill-marketing { background: #e11d48 !important; border-color: #e11d48 !important; color: #ffffff !important; box-shadow: 0 0 14px rgba(225, 29, 72, 0.45) !important; } .cv-roadmap-step:hover .cv-roadmap-step-pill.pill-growth { background: #10b981 !important; border-color: #10b981 !important; color: #ffffff !important; box-shadow: 0 0 14px rgba(16, 185, 129, 0.45) !important; } .cv-roadmap-phase-label { font-size: 9.5px !important; font-weight: 800 !important; letter-spacing: 1px !important; color: #94a3b8 !important; text-transform: uppercase !important; } .cv-roadmap-step-arrow { position: absolute !important; top: 50% !important; right: -13px !important; transform: translateY(-50%) !important; width: 24px !important; height: 24px !important; border-radius: 50% !important; background: #ffffff !important; border: 1px solid #e2e8f0 !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 9.5px !important; color: #64748b !important; z-index: 5 !important; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08) !important; transition: all 0.25s ease !important; } .cv-roadmap-step:hover .cv-roadmap-step-arrow { background: #0b1324 !important; color: #ffffff !important; border-color: #0b1324 !important; transform: translateY(-50%) translateX(2px) !important; } .cv-roadmap-chip { font-size: 11px !important; font-weight: 600 !important; padding: 4px 10px !important; border-radius: 999px !important; margin-top: 14px !important; display: inline-flex !important; align-items: center !important; gap: 5px !important; background: #f8fafc !important; border: 1px solid #e2e8f0 !important; color: #475569 !important; transition: all 0.25s ease !important; } .cv-roadmap-chip i { font-size: 10px !important; } .chip-strategy i { color: #f59e0b !important; } .chip-design i { color: #8b5cf6 !important; } .chip-tech i { color: #0284c7 !important; } .chip-marketing i { color: #e11d48 !important; } .chip-growth i { color: #10b981 !important; } .cv-roadmap-step:hover .chip-strategy { background: #fffbeb !important; border-color: rgba(245, 158, 11, 0.3) !important; color: #b45309 !important; } .cv-roadmap-step:hover .chip-design { background: #f5f3ff !important; border-color: rgba(139, 92, 246, 0.3) !important; color: #6d28d9 !important; } .cv-roadmap-step:hover .chip-tech { background: #f0f9ff !important; border-color: rgba(2, 132, 199, 0.3) !important; color: #0369a1 !important; } .cv-roadmap-step:hover .chip-marketing { background: #fff1f2 !important; border-color: rgba(225, 29, 72, 0.3) !important; color: #be123c !important; } .cv-roadmap-step:hover .chip-growth { background: #f0fdf4 !important; border-color: rgba(16, 185, 129, 0.3) !important; color: #047857 !important; } .cv-roadmap-footer-bar { max-width: 980px !important; margin: 36px auto 0 auto !important; background: #f8fafc !important; border: 1px solid #e2e8f0 !important; border-radius: 999px !important; padding: 12px 24px !important; display: flex !important; align-items: center !important; justify-content: space-around !important; gap: 16px !important; flex-wrap: wrap !important; box-shadow: 0 4px 16px rgba(15, 23, 42, 0.03) !important; } .cv-roadmap-footer-item { display: flex !important; align-items: center !important; gap: 8px !important; font-size: 13px !important; font-weight: 600 !important; color: #334155 !important; } .cv-roadmap-footer-item i { font-size: 14px !important; } @media (max-width: 1024px) { .cv-roadmap-timeline-track { display: none !important; } .cv-roadmap-cards-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 14px !important; } .cv-roadmap-step-arrow { display: none !important; } } @media (max-width: 768px) { .cv-roadmap-cards-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; } .cv-roadmap-step[data-step="5"] { grid-column: span 2 !important; max-width: 340px !important; margin: 0 auto !important; width: 100% !important; } .cv-roadmap-footer-bar { border-radius: 16px !important; padding: 14px 18px !important; gap: 10px !important; } .cv-roadmap-footer-item { font-size: 12px !important; } } @media (max-width: 480px) { .cv-roadmap-cards-grid { grid-template-columns: 1fr !important; gap: 12px !important; } .cv-roadmap-step[data-step="5"] { grid-column: auto !important; max-width: none !important; } } #technology.cv-tech-section { background: #ffffff !important; padding: clamp(60px, 6vw, 90px) 0 !important; border-bottom: 1px solid #f1f5f9 !important; position: relative !important; } .cv-tech-header-centered { text-align: center !important; max-width: 780px !important; margin: 0 auto clamp(36px, 4.5vw, 52px) auto !important; display: flex !important; flex-direction: column !important; align-items: center !important; } html body #technology .cv-tech-badge { display: inline-flex !important; align-items: center !important; gap: 8px !important; padding: 6px 16px !important; background: #eff6ff !important; color: #2563eb !important; -webkit-text-fill-color: #2563eb !important; border: 1px solid #bfdbfe !important; border-radius: 999px !important; font-family: 'DM Sans', sans-serif !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; margin: 0 0 14px 0 !important; } html body #technology .cv-tech-heading { font-family: 'Sora', sans-serif !important; font-size: clamp(24px, 2.6vw, 36px) !important; font-weight: 800 !important; color: #0f172a !important; -webkit-text-fill-color: #0f172a !important; line-height: 1.25 !important; letter-spacing: -0.02em !important; margin: 0 0 12px 0 !important; text-align: center !important; } #technology .cv-tech-highlight { color: #2563eb !important; -webkit-text-fill-color: #2563eb !important; } html body #technology .cv-tech-subheading { font-family: 'DM Sans', sans-serif !important; font-size: clamp(14px, 1.1vw, 16px) !important; color: #64748b !important; -webkit-text-fill-color: #64748b !important; line-height: 1.6 !important; margin: 0 !important; max-width: 680px !important; text-align: center !important; } .cv-tech-cards-grid { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 24px !important; margin-bottom: clamp(36px, 4vw, 48px) !important; } .cv-tech-card { background: #ffffff !important; border: 1px solid #e2e8f0 !important; border-radius: 20px !important; padding: clamp(24px, 2.2vw, 30px) !important; display: flex !important; flex-direction: column !important; transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important; box-shadow: 0 4px 18px rgba(15, 23, 42, 0.04) !important; position: relative !important; overflow: hidden !important; } .cv-tech-card::before { content: '' !important; position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; height: 3px !important; background: linear-gradient(90deg, #2563eb, #7c3aed) !important; opacity: 0 !important; transition: opacity 0.3s ease !important; } .cv-tech-card:hover { transform: translateY(-6px) !important; border-color: #cbd5e1 !important; box-shadow: 0 16px 36px rgba(15, 23, 42, 0.09) !important; } .cv-tech-card:hover::before { opacity: 1 !important; } .cv-tech-card-top { display: flex !important; align-items: center !important; justify-content: space-between !important; margin-bottom: 20px !important; } .cv-tech-icon-box { width: 50px !important; height: 50px !important; border-radius: 14px !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 20px !important; transition: transform 0.3s ease !important; } .cv-tech-card:hover .cv-tech-icon-box { transform: scale(1.08) !important; } .cv-tech-icon-box.amber { background: #fffbeb !important; color: #d97706 !important; -webkit-text-fill-color: #d97706 !important; border: 1px solid #fef3c7 !important; } .cv-tech-icon-box.purple { background: #faf5ff !important; color: #9333ea !important; -webkit-text-fill-color: #9333ea !important; border: 1px solid #f3e8ff !important; } .cv-tech-icon-box.blue { background: #eff6ff !important; color: #2563eb !important; -webkit-text-fill-color: #2563eb !important; border: 1px solid #dbeafe !important; } .cv-tech-icon-box.emerald { background: #ecfdf5 !important; color: #059669 !important; -webkit-text-fill-color: #059669 !important; border: 1px solid #d1fae5 !important; } .cv-tech-icon-box.rose { background: #fff1f2 !important; color: #e11d48 !important; -webkit-text-fill-color: #e11d48 !important; border: 1px solid #ffe4e6 !important; } .cv-tech-icon-box.sky { background: #f0f9ff !important; color: #0284c7 !important; -webkit-text-fill-color: #0284c7 !important; border: 1px solid #e0f2fe !important; } .cv-tech-card-num { font-family: 'Sora', sans-serif !important; font-size: 13px !important; font-weight: 800 !important; color: #94a3b8 !important; background: #f8fafc !important; padding: 4px 10px !important; border-radius: 8px !important; border: 1px solid #f1f5f9 !important; } .cv-tech-card-title { font-family: 'Sora', sans-serif !important; font-size: clamp(17px, 1.25vw, 19px) !important; font-weight: 700 !important; color: #0f172a !important; -webkit-text-fill-color: #0f172a !important; line-height: 1.35 !important; margin: 0 0 10px 0 !important; } .cv-tech-card-desc { font-family: 'DM Sans', sans-serif !important; font-size: 13.5px !important; line-height: 1.55 !important; color: #64748b !important; -webkit-text-fill-color: #64748b !important; margin: 0 0 18px 0 !important; flex-grow: 1 !important; } .cv-tech-tags { display: flex !important; flex-wrap: wrap !important; gap: 7px !important; margin-top: auto !important; padding-top: 14px !important; border-top: 1px dashed #e2e8f0 !important; } .cv-tech-tag { font-family: 'DM Sans', sans-serif !important; font-size: 11px !important; font-weight: 600 !important; color: #475569 !important; -webkit-text-fill-color: #475569 !important; background: #f8fafc !important; border: 1px solid #e2e8f0 !important; padding: 3px 9px !important; border-radius: 6px !important; } .cv-tech-frameworks-bar { display: flex !important; align-items: center !important; justify-content: center !important; flex-wrap: wrap !important; gap: 14px 24px !important; background: #f8fafc !important; border: 1px solid #e2e8f0 !important; border-radius: 999px !important; padding: 14px 30px !important; max-width: 960px !important; margin: 0 auto !important; } .cv-tech-frameworks-title { font-family: 'Sora', sans-serif !important; font-size: 12px !important; font-weight: 700 !important; color: #64748b !important; -webkit-text-fill-color: #64748b !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; } .cv-tech-frameworks-list { display: flex !important; align-items: center !important; flex-wrap: wrap !important; gap: 12px 20px !important; } .cv-tech-framework-item { font-family: 'DM Sans', sans-serif !important; font-size: 13px !important; font-weight: 600 !important; color: #1e293b !important; -webkit-text-fill-color: #1e293b !important; display: inline-flex !important; align-items: center !important; gap: 7px !important; } .cv-tech-framework-item i { color: #2563eb !important; font-size: 15px !important; } @media (max-width: 1024px) { .cv-tech-cards-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 18px !important; } .cv-tech-frameworks-bar { border-radius: 18px !important; padding: 16px 22px !important; } } @media (max-width: 640px) { .cv-tech-cards-grid { grid-template-columns: 1fr !important; gap: 14px !important; } .cv-tech-frameworks-bar { flex-direction: column !important; text-align: center !important; border-radius: 16px !important; padding: 16px 18px !important; gap: 10px !important; } .cv-tech-frameworks-list { justify-content: center !important; gap: 10px 14px !important; } .cv-tech-framework-item { font-size: 12px !important; } } .cv-footer-social-wrap { margin-top: 18px !important; display: flex !important; flex-direction: column !important; gap: 8px !important; } .cv-footer-social-heading { font-family: 'Sora', sans-serif !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; color: #94a3b8 !important; } .cv-footer-socials, .cv-footer-social-icons, .cv-footer-social { display: flex !important; align-items: center !important; flex-wrap: wrap !important; gap: 10px !important; margin-top: 6px !important; } .cv-footer-social-icon, .cv-footer-social-icons a, .cv-footer-social a { width: 38px !important; height: 38px !important; border-radius: 10px !important; background: rgba(255, 255, 255, 0.08) !important; border: 1px solid rgba(255, 255, 255, 0.16) !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; text-decoration: none !important; font-size: 16px !important; transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important; } .cv-footer-social-icon i, .cv-footer-social-icons a i, .cv-footer-social a i { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; transition: transform 0.25s ease !important; } .cv-footer-social-icon:hover, .cv-footer-social-icons a:hover, .cv-footer-social a:hover { transform: translateY(-4px) scale(1.08) !important; } .cv-footer-social-icon:hover i, .cv-footer-social-icons a:hover i, .cv-footer-social a:hover i { transform: scale(1.12) !important; } .cv-footer-social-icon.cv-soc-ig:hover, .cv-footer-social-icons a[aria-label*="Instagram"]:hover, .cv-footer-social a[aria-label*="Instagram"]:hover { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%) !important; border-color: transparent !important; box-shadow: 0 8px 20px rgba(225, 48, 108, 0.45) !important; } .cv-footer-social-icon.cv-soc-wa:hover, .cv-footer-social-icons a[aria-label*="WhatsApp"]:hover, .cv-footer-social a[aria-label*="WhatsApp"]:hover { background: #25D366 !important; border-color: #25D366 !important; box-shadow: 0 8px 20px rgba(37, 211, 102, 0.45) !important; } .cv-footer-social-icon.cv-soc-li:hover, .cv-footer-social-icons a[aria-label*="LinkedIn"]:hover, .cv-footer-social a[aria-label*="LinkedIn"]:hover { background: #0A66C2 !important; border-color: #0A66C2 !important; box-shadow: 0 8px 20px rgba(10, 102, 194, 0.45) !important; } .cv-footer-social-icon.cv-soc-fb:hover, .cv-footer-social-icons a[aria-label*="Facebook"]:hover, .cv-footer-social a[aria-label*="Facebook"]:hover { background: #1877F2 !important; border-color: #1877F2 !important; box-shadow: 0 8px 20px rgba(24, 119, 242, 0.45) !important; } .cv-footer-social-icon.cv-soc-yt:hover, .cv-footer-social-icons a[aria-label*="YouTube"]:hover, .cv-footer-social a[aria-label*="YouTube"]:hover { background: #FF0000 !important; border-color: #FF0000 !important; box-shadow: 0 8px 20px rgba(255, 0, 0, 0.45) !important; } .cv-footer-social-icon.cv-soc-x:hover, .cv-footer-social-icons a[aria-label*="Twitter"]:hover, .cv-footer-social a[aria-label*="Twitter"]:hover { background: #000000 !important; border-color: rgba(255, 255, 255, 0.45) !important; box-shadow: 0 8px 20px rgba(255, 255, 255, 0.25) !important; } .cv-seo-breadcrumb{color:#c5d0df}.cv-seo-breadcrumb a{color:#ffd171}