{"id":9,"date":"2026-05-28T20:11:34","date_gmt":"2026-05-28T20:11:34","guid":{"rendered":"https:\/\/trinixcompany.com\/?page_id=9"},"modified":"2026-05-28T20:15:49","modified_gmt":"2026-05-28T20:15:49","slug":"home","status":"publish","type":"page","link":"https:\/\/trinixcompany.com\/","title":{"rendered":"Home"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\n\n\n\nTrinix Company \u2014 Estrat\u00e9gia. Execu\u00e7\u00e3o. Escala.<\/title>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700;800;900&family=Instrument+Serif:ital@0;1&display=swap\" rel=\"stylesheet\">\n<style>\n :root {\n --black: #060608;\n --bg: #0A0A0F;\n --surface-1: #111118;\n --surface-2: #16161E;\n --surface-3: #1E1E28;\n --border: rgba(255,255,255,0.07);\n --border-mid: rgba(255,255,255,0.12);\n --white: #FFFFFF;\n --gray-1: #F0F0F4;\n --gray-2: #A0A0B0;\n --gray-3: #60607A;\n --blue: #2563EB;\n --blue-bright:#3B82F6;\n --blue-light: #60A5FA;\n --blue-glow: rgba(37,99,235,0.35);\n --blue-dim: rgba(37,99,235,0.08);\n --blue-mid: rgba(37,99,235,0.15);\n --green: #10B981;\n --green-dim: rgba(16,185,129,0.10);\n --red: #EF4444;\n --red-dim: rgba(239,68,68,0.10);\n }\n\n *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\n html { scroll-behavior: smooth; font-size: 16px; }\n body {\n background: var(--bg); color: var(--gray-1);\n font-family: 'Inter', sans-serif; line-height: 1.6;\n overflow-x: hidden; -webkit-font-smoothing: antialiased;\n }\n\n \/* \u2500\u2500\u2500 BACKGROUND GRID \u2500\u2500\u2500 *\/\n body::before {\n content: '';\n position: fixed; inset: 0; z-index: 0;\n background-image:\n linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),\n linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);\n background-size: 64px 64px;\n pointer-events: none;\n }\n\n \/* \u2500\u2500\u2500 NAV \u2014 scroll-aware \u2500\u2500\u2500 *\/\n nav {\n position: fixed; top: 0; left: 0; right: 0; z-index: 1000;\n display: flex; align-items: center; justify-content: space-between;\n padding: 0 60px; height: 68px;\n background: rgba(6,6,8,0.0);\n backdrop-filter: blur(0px); -webkit-backdrop-filter: blur(0px);\n border-bottom: 1px solid transparent;\n transition: background 0.4s ease, backdrop-filter 0.4s ease, height 0.3s ease, border-color 0.4s ease;\n }\n nav.scrolled {\n background: rgba(6,6,8,0.85);\n backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);\n border-bottom: 1px solid var(--border);\n height: 58px;\n }\n .nav-logo {\n display: flex; align-items: center; gap: 10px;\n text-decoration: none; opacity: 0;\n animation: fadeSlideDown 0.6s 0.1s forwards;\n }\n .nav-logo-icon { width: 28px; height: 28px; }\n .nav-logo-text { font-size: 14px; font-weight: 800; color: var(--white); letter-spacing: -0.3px; }\n .nav-logo-text span { color: var(--blue-bright); }\n .nav-links {\n display: flex; align-items: center; gap: 36px;\n opacity: 0; animation: fadeSlideDown 0.6s 0.2s forwards;\n }\n .nav-links a { font-size: 13px; color: var(--gray-2); text-decoration: none; font-weight: 500; transition: color 0.2s; }\n .nav-links a:hover { color: var(--white); }\n .nav-cta-wrap {\n opacity: 0; animation: fadeSlideDown 0.6s 0.3s forwards;\n }\n\n \/* \u2500\u2500\u2500 HOVER BORDER GRADIENT BUTTON \u2500\u2500\u2500 *\/\n .btn-gradient-border {\n position: relative; display: inline-flex; align-items: center; gap: 8px;\n padding: 10px 24px;\n background: var(--black); color: var(--white);\n font-size: 13px; font-weight: 600; text-decoration: none; border-radius: 8px;\n overflow: hidden; cursor: pointer;\n transition: color 0.2s;\n }\n .btn-gradient-border::before {\n content: '';\n position: absolute; inset: -2px; border-radius: 10px; z-index: -1;\n background: conic-gradient(from var(--angle, 0deg), var(--blue), #7C3AED, var(--blue-bright), #0EA5E9, var(--blue));\n animation: rotateBorder 3s linear infinite;\n }\n .btn-gradient-border::after {\n content: '';\n position: absolute; inset: 1px; border-radius: 7px; z-index: -1;\n background: var(--black);\n }\n @property --angle {\n syntax: '<angle>';\n initial-value: 0deg;\n inherits: false;\n }\n @keyframes rotateBorder {\n to { --angle: 360deg; }\n }\n .btn-gradient-border:hover { color: var(--blue-light); }\n\n \/* Primary + Ghost buttons *\/\n .btn-primary {\n position: relative; display: inline-flex; align-items: center; gap: 8px;\n padding: 14px 28px; background: var(--blue); color: var(--white);\n font-size: 14px; font-weight: 600; text-decoration: none; border-radius: 8px;\n box-shadow: 0 0 24px var(--blue-glow); transition: all 0.25s;\n overflow: hidden;\n }\n .btn-primary::before {\n content: '';\n position: absolute; inset: 0;\n background: linear-gradient(135deg, rgba(255,255,255,0.08) 0%, transparent 60%);\n opacity: 0; transition: opacity 0.25s;\n }\n .btn-primary:hover { background: var(--blue-bright); box-shadow: 0 0 48px var(--blue-glow); transform: translateY(-1px); }\n .btn-primary:hover::before { opacity: 1; }\n .btn-ghost {\n display: inline-flex; align-items: center; gap: 8px;\n padding: 14px 24px;\n border: 1px solid var(--border-mid); color: var(--gray-2);\n font-size: 14px; font-weight: 500; text-decoration: none; border-radius: 8px;\n transition: all 0.2s; background: transparent;\n }\n .btn-ghost:hover { border-color: rgba(255,255,255,0.25); color: var(--white); background: rgba(255,255,255,0.03); }\n\n \/* \u2500\u2500\u2500 HERO \u2500\u2500\u2500 *\/\n .hero {\n position: relative; min-height: 100vh;\n display: flex; align-items: center;\n padding: 120px 60px 80px; overflow: hidden;\n }\n .hero-glow {\n position: absolute; top: -200px; left: 50%; transform: translateX(-50%);\n width: 900px; height: 600px;\n background: radial-gradient(ellipse at center, rgba(37,99,235,0.18) 0%, transparent 70%);\n pointer-events: none;\n animation: glowPulse 6s ease-in-out infinite;\n }\n .hero-glow-right {\n position: absolute; bottom: -100px; right: -100px;\n width: 500px; height: 500px;\n background: radial-gradient(ellipse at center, rgba(37,99,235,0.08) 0%, transparent 70%);\n pointer-events: none;\n }\n @keyframes glowPulse {\n 0%, 100% { opacity: 1; transform: translateX(-50%) scale(1); }\n 50% { opacity: 0.7; transform: translateX(-50%) scale(1.08); }\n }\n .hero-inner {\n position: relative; z-index: 1;\n display: grid; grid-template-columns: 1fr 1fr;\n gap: 60px; align-items: center; max-width: 1200px; margin: 0 auto; width: 100%;\n }\n\n \/* Hero stagger animations *\/\n .hero-badge {\n display: inline-flex; align-items: center; gap: 8px;\n padding: 6px 14px; border-radius: 100px;\n border: 1px solid var(--border-mid);\n background: rgba(37,99,235,0.08);\n font-size: 12px; color: var(--blue-light); font-weight: 500;\n letter-spacing: 0.3px; margin-bottom: 28px;\n opacity: 0; animation: fadeSlideUp 0.6s 0.3s forwards;\n }\n .hero-badge-dot {\n width: 6px; height: 6px; border-radius: 50%; background: var(--blue-bright);\n box-shadow: 0 0 8px var(--blue-bright);\n animation: dotPulse 2s ease-in-out infinite;\n }\n @keyframes dotPulse {\n 0%, 100% { box-shadow: 0 0 8px var(--blue-bright); }\n 50% { box-shadow: 0 0 16px var(--blue-bright), 0 0 32px rgba(59,130,246,0.4); }\n }\n .hero h1 {\n font-size: clamp(44px, 5.5vw, 80px);\n font-weight: 900; line-height: 1.0; letter-spacing: -3px;\n color: var(--white); margin-bottom: 24px;\n opacity: 0; animation: fadeSlideUp 0.7s 0.45s forwards;\n }\n .hero h1 em {\n font-family: 'Instrument Serif', serif;\n font-style: italic; font-weight: 400;\n color: var(--blue-bright); letter-spacing: -1px;\n }\n .hero-sub {\n font-size: 17px; color: var(--gray-2); line-height: 1.75;\n max-width: 480px; margin-bottom: 40px; font-weight: 400;\n opacity: 0; animation: fadeSlideUp 0.7s 0.6s forwards;\n }\n .hero-sub strong { color: var(--white); font-weight: 600; }\n .hero-actions {\n display: flex; gap: 12px; align-items: center; margin-bottom: 56px; flex-wrap: wrap;\n opacity: 0; animation: fadeSlideUp 0.7s 0.72s forwards;\n }\n .hero-stats {\n display: flex; gap: 0;\n opacity: 0; animation: fadeSlideUp 0.7s 0.88s forwards;\n }\n .hero-stat { padding-right: 36px; border-right: 1px solid var(--border); margin-right: 36px; }\n .hero-stat:last-child { border-right: none; margin-right: 0; padding-right: 0; }\n .hero-stat-value { font-size: 28px; font-weight: 900; color: var(--white); letter-spacing: -1.5px; line-height: 1; }\n .hero-stat-label { font-size: 12px; color: var(--gray-3); margin-top: 4px; font-weight: 500; }\n\n \/* Hero right \u2014 dashboard *\/\n .hero-right {\n position: relative;\n opacity: 0; animation: fadeSlideLeft 0.9s 0.5s forwards;\n }\n .hero-dashboard {\n position: relative; z-index: 2;\n background: rgba(22, 22, 30, 0.8);\n border: 1px solid var(--border-mid); border-radius: 16px;\n backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px);\n padding: 24px; overflow: hidden;\n box-shadow: 0 32px 80px rgba(0,0,0,0.5), 0 0 0 1px var(--border), inset 0 1px 0 rgba(255,255,255,0.08);\n }\n .hero-dashboard::before {\n content: '';\n position: absolute; top: 0; left: 0; right: 0; height: 1px;\n background: linear-gradient(90deg, transparent, rgba(37,99,235,0.5), transparent);\n }\n .dashboard-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }\n .dashboard-title { font-size: 12px; font-weight: 600; color: var(--gray-2); letter-spacing: 0.3px; }\n .dashboard-badge {\n font-size: 10px; padding: 3px 10px; border-radius: 100px;\n background: var(--green-dim); color: var(--green); font-weight: 600;\n border: 1px solid rgba(16,185,129,0.2);\n }\n .dashboard-metric { margin-bottom: 20px; }\n .dashboard-metric-value { font-size: 42px; font-weight: 900; color: var(--white); letter-spacing: -2px; line-height: 1; margin-bottom: 4px; }\n .dashboard-metric-label { font-size: 12px; color: var(--gray-3); font-weight: 500; }\n .dashboard-metric-change { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--green); font-weight: 600; margin-top: 6px; }\n .mini-chart { margin-bottom: 20px; }\n .chart-bars { display: flex; align-items: flex-end; gap: 4px; height: 52px; }\n .chart-bar {\n flex: 1; border-radius: 3px 3px 0 0;\n background: var(--surface-3); transition: background 0.2s;\n animation: barRise 1.2s ease-out both;\n }\n .chart-bar.active { background: var(--blue); box-shadow: 0 0 12px rgba(37,99,235,0.4); }\n .chart-bar.highlight { background: linear-gradient(180deg, var(--blue-bright), var(--blue)); box-shadow: 0 0 16px rgba(37,99,235,0.5); }\n @keyframes barRise { from { transform: scaleY(0); transform-origin: bottom; } to { transform: scaleY(1); } }\n .chart-bar:nth-child(1) { animation-delay: 0.7s; }\n .chart-bar:nth-child(2) { animation-delay: 0.78s; }\n .chart-bar:nth-child(3) { animation-delay: 0.86s; }\n .chart-bar:nth-child(4) { animation-delay: 0.94s; }\n .chart-bar:nth-child(5) { animation-delay: 1.02s; }\n .chart-bar:nth-child(6) { animation-delay: 1.1s; }\n .chart-bar:nth-child(7) { animation-delay: 1.18s; }\n .chart-bar:nth-child(8) { animation-delay: 1.26s; }\n .chart-bar:nth-child(9) { animation-delay: 1.34s; }\n .chart-bar:nth-child(10) { animation-delay: 1.42s; }\n .dashboard-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin-bottom: 16px; }\n .dash-kpi { padding: 12px; border-radius: 8px; background: var(--surface-3); border: 1px solid var(--border); }\n .dash-kpi-val { font-size: 18px; font-weight: 800; color: var(--white); letter-spacing: -0.5px; }\n .dash-kpi-lbl { font-size: 10px; color: var(--gray-3); margin-top: 2px; }\n .dash-kpi.blue { background: var(--blue-dim); border-color: rgba(37,99,235,0.25); }\n .dash-kpi.blue .dash-kpi-val { color: var(--blue-bright); }\n .progress-list { display: grid; gap: 8px; }\n .progress-item {}\n .progress-item-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }\n .progress-item-name { font-size: 11px; color: var(--gray-2); font-weight: 500; }\n .progress-item-val { font-size: 11px; color: var(--white); font-weight: 700; }\n .progress-bar-wrap { height: 4px; background: var(--surface-3); border-radius: 2px; overflow: hidden; }\n .progress-bar-fill {\n height: 100%; border-radius: 2px; background: var(--blue);\n width: 0; transition: width 1.4s ease-out;\n }\n .progress-bar-fill.green { background: var(--green); }\n .float-card {\n position: absolute; bottom: -20px; left: -24px; z-index: 3;\n background: rgba(22,22,30,0.9);\n border: 1px solid var(--border-mid); border-radius: 12px;\n padding: 14px 18px;\n backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px);\n box-shadow: 0 16px 40px rgba(0,0,0,0.4);\n display: flex; align-items: center; gap: 12px; min-width: 200px;\n animation: floatBob 4s ease-in-out infinite;\n }\n @keyframes floatBob {\n 0%, 100% { transform: translateY(0px); }\n 50% { transform: translateY(-6px); }\n }\n .float-card-icon {\n width: 36px; height: 36px; border-radius: 8px;\n background: var(--blue-dim); border: 1px solid rgba(37,99,235,0.25);\n display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0;\n }\n .float-card-val { font-size: 15px; font-weight: 800; color: var(--white); letter-spacing: -0.3px; }\n .float-card-lbl { font-size: 10px; color: var(--gray-3); margin-top: 1px; }\n\n \/* \u2500\u2500\u2500 KEYFRAMES \u2500\u2500\u2500 *\/\n @keyframes fadeSlideUp {\n from { opacity: 0; transform: translateY(20px); }\n to { opacity: 1; transform: translateY(0); }\n }\n @keyframes fadeSlideDown {\n from { opacity: 0; transform: translateY(-12px); }\n to { opacity: 1; transform: translateY(0); }\n }\n @keyframes fadeSlideLeft {\n from { opacity: 0; transform: translateX(32px); }\n to { opacity: 1; transform: translateX(0); }\n }\n @keyframes fadeIn {\n from { opacity: 0; }\n to { opacity: 1; }\n }\n\n \/* \u2500\u2500\u2500 SPARKLES \/ PARTICLES canvas \u2500\u2500\u2500 *\/\n #sparkles-canvas {\n position: absolute; inset: 0; width: 100%; height: 100%;\n pointer-events: none; z-index: 0;\n }\n\n \/* \u2500\u2500\u2500 LOGOS BAR \u2500\u2500\u2500 *\/\n .logos-bar {\n position: relative; z-index: 1;\n border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);\n padding: 28px 60px;\n background: rgba(10,10,15,0.5); overflow: hidden;\n }\n .logos-inner { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; gap: 48px; position: relative; z-index: 1; }\n .logos-label { font-size: 11px; color: var(--gray-3); font-weight: 500; letter-spacing: 1px; text-transform: uppercase; white-space: nowrap; }\n .logos-divider { width: 1px; height: 24px; background: var(--border); flex-shrink: 0; }\n .logos-scroll-wrap { overflow: hidden; flex: 1; }\n .logos-items {\n display: flex; align-items: center; gap: 48px;\n animation: scrollLogos 18s linear infinite;\n width: max-content;\n }\n .logos-items:hover { animation-play-state: paused; }\n @keyframes scrollLogos {\n from { transform: translateX(0); }\n to { transform: translateX(-50%); }\n }\n .logo-item { font-size: 14px; font-weight: 700; color: var(--gray-3); letter-spacing: -0.3px; transition: color 0.2s; white-space: nowrap; }\n .logo-item:hover { color: var(--gray-2); }\n\n \/* \u2500\u2500\u2500 SECTION BASE \u2500\u2500\u2500 *\/\n .section { position: relative; z-index: 1; padding: 100px 60px; }\n .section-inner { max-width: 1200px; margin: 0 auto; }\n .section-tag {\n display: inline-flex; align-items: center; gap: 8px;\n font-size: 11px; font-weight: 600; color: var(--blue-light);\n letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 20px;\n }\n .section-tag::before { content: ''; width: 16px; height: 1px; background: var(--blue); }\n .section-title {\n font-size: clamp(32px, 3.5vw, 52px); font-weight: 900;\n letter-spacing: -2px; line-height: 1.05; color: var(--white); margin-bottom: 20px;\n }\n .section-title em { font-family: 'Instrument Serif', serif; font-style: italic; font-weight: 400; color: var(--blue-bright); letter-spacing: 0; }\n .section-sub { font-size: 16px; color: var(--gray-2); line-height: 1.75; max-width: 560px; }\n\n \/* \u2500\u2500\u2500 REVEAL ON SCROLL \u2500\u2500\u2500 *\/\n .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s ease, transform 0.7s ease; }\n .reveal.visible { opacity: 1; transform: translateY(0); }\n .reveal-delay-1 { transition-delay: 0.1s; }\n .reveal-delay-2 { transition-delay: 0.2s; }\n .reveal-delay-3 { transition-delay: 0.3s; }\n .reveal-delay-4 { transition-delay: 0.4s; }\n\n \/* \u2500\u2500\u2500 GLOW CARD (spotlight effect) \u2500\u2500\u2500 *\/\n .glow-card {\n position: relative; overflow: hidden;\n transition: border-color 0.3s, transform 0.2s;\n }\n .glow-card::after {\n content: '';\n position: absolute; inset: 0; border-radius: inherit; z-index: 0;\n background: radial-gradient(\n 300px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),\n rgba(37,99,235,0.12),\n transparent 60%\n );\n opacity: 0; transition: opacity 0.3s;\n pointer-events: none;\n }\n .glow-card:hover::after { opacity: 1; }\n .glow-card > * { position: relative; z-index: 1; }\n\n \/* \u2500\u2500\u2500 PROBLEMA \u2500\u2500\u2500 *\/\n .problema-section { background: var(--surface-1); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }\n .problema-header { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: end; margin-bottom: 56px; }\n .problema-callout {\n padding: 28px 32px;\n background: var(--surface-2); border: 1px solid var(--border);\n border-left: 3px solid var(--blue); border-radius: 0 8px 8px 0;\n font-size: 16px; color: var(--gray-2); line-height: 1.75;\n align-self: end;\n }\n .problema-callout strong { color: var(--white); }\n .problema-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }\n .problema-card {\n padding: 28px 24px; border-radius: 12px;\n background: var(--surface-2); border: 1px solid var(--border);\n }\n .problema-card:hover { border-color: rgba(239,68,68,0.25); transform: translateY(-2px); }\n .problema-card-icon {\n width: 40px; height: 40px; border-radius: 10px;\n background: var(--red-dim); border: 1px solid rgba(239,68,68,0.2);\n display: flex; align-items: center; justify-content: center;\n font-size: 16px; margin-bottom: 20px; color: var(--red); font-weight: 800;\n }\n .problema-card-title { font-size: 15px; font-weight: 700; color: var(--white); margin-bottom: 10px; }\n .problema-card-desc { font-size: 13px; color: var(--gray-3); line-height: 1.7; }\n\n \/* \u2500\u2500\u2500 SOLU\u00c7\u00c3O \u2500\u2500\u2500 *\/\n .solucao-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }\n .solucao-visual { position: relative; padding: 8px; }\n .solucao-card {\n background: rgba(22, 22, 30, 0.8);\n border: 1px solid var(--border-mid); border-radius: 16px;\n padding: 32px;\n backdrop-filter: blur(40px);\n box-shadow: 0 24px 64px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.06);\n position: relative; overflow: hidden;\n }\n .solucao-card::before {\n content: '';\n position: absolute; top: 0; left: 0; right: 0; height: 1px;\n background: linear-gradient(90deg, transparent, rgba(37,99,235,0.6), transparent);\n }\n .solucao-card-label { font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--blue-light); margin-bottom: 16px; font-weight: 600; }\n .solucao-card-title { font-size: 22px; font-weight: 800; color: var(--white); letter-spacing: -0.5px; margin-bottom: 24px; }\n .solucao-list { display: grid; gap: 10px; }\n .solucao-item {\n display: flex; gap: 14px; align-items: flex-start;\n padding: 14px 16px; border-radius: 8px;\n background: var(--surface-3); border: 1px solid var(--border);\n transition: border-color 0.2s, background 0.2s;\n }\n .solucao-item:hover { border-color: rgba(37,99,235,0.25); background: rgba(37,99,235,0.04); }\n .solucao-item-num { font-size: 11px; font-weight: 800; color: var(--blue-bright); min-width: 20px; margin-top: 1px; flex-shrink: 0; }\n .solucao-item-text { font-size: 13px; color: var(--gray-2); line-height: 1.5; }\n .solucao-item-text strong { color: var(--white); font-weight: 600; }\n .solucao-glow {\n position: absolute; bottom: -60px; right: -60px;\n width: 200px; height: 200px;\n background: radial-gradient(circle, rgba(37,99,235,0.2) 0%, transparent 70%);\n pointer-events: none;\n }\n\n \/* \u2500\u2500\u2500 COMO FUNCIONA \u2500\u2500\u2500 *\/\n .como-section { background: var(--surface-1); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }\n .como-header { text-align: center; margin-bottom: 64px; }\n .como-header .section-sub { max-width: 480px; margin: 0 auto; text-align: center; }\n .como-header .section-tag { justify-content: center; }\n .steps-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--border); border-radius: 16px; overflow: hidden; }\n .step-card {\n background: var(--surface-2); padding: 36px 28px;\n position: relative; overflow: hidden; transition: background 0.2s;\n }\n .step-card:hover { background: var(--surface-3); }\n .step-card::after {\n content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;\n background: var(--border); transition: background 0.2s;\n }\n .step-card:nth-child(1)::after { background: var(--blue); }\n .step-card:nth-child(2)::after { background: var(--blue-bright); }\n .step-card:nth-child(3)::after { background: var(--blue-light); }\n .step-card:nth-child(4)::after { background: var(--white); }\n .step-num {\n font-size: 52px; font-weight: 900; line-height: 1; margin-bottom: 20px; letter-spacing: -2px;\n background: linear-gradient(135deg, var(--surface-3), var(--border-mid));\n -webkit-background-clip: text; -webkit-text-fill-color: transparent;\n }\n .step-title { font-size: 17px; font-weight: 800; color: var(--white); margin-bottom: 10px; letter-spacing: -0.3px; }\n .step-desc { font-size: 13px; color: var(--gray-3); line-height: 1.7; }\n\n \/* \u2500\u2500\u2500 FEATURES SECTION \u2500\u2500\u2500 *\/\n .features-section { background: var(--bg); border-top: 1px solid var(--border); }\n .features-inner { max-width: 1200px; margin: 0 auto; }\n .features-header { text-align: center; margin-bottom: 64px; }\n .features-header .section-sub { max-width: 520px; margin: 0 auto; text-align: center; }\n .features-header .section-tag { justify-content: center; }\n .features-dashboard {\n position: relative; border-radius: 16px; overflow: hidden;\n background: rgba(22,22,30,0.9); border: 1px solid var(--border-mid);\n box-shadow: 0 48px 120px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.06);\n margin-bottom: 64px;\n }\n .features-dashboard::before {\n content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;\n background: linear-gradient(90deg, transparent, var(--blue), transparent);\n }\n .features-dashboard-bar {\n display: flex; align-items: center; gap: 8px;\n padding: 14px 20px; border-bottom: 1px solid var(--border);\n background: rgba(17,17,24,0.8);\n }\n .fdb-dot { width: 10px; height: 10px; border-radius: 50%; }\n .fdb-dot:nth-child(1) { background: #EF4444; }\n .fdb-dot:nth-child(2) { background: #F59E0B; }\n .fdb-dot:nth-child(3) { background: #10B981; }\n .fdb-url {\n flex: 1; margin: 0 16px; height: 26px; border-radius: 6px;\n background: var(--surface-3); border: 1px solid var(--border);\n display: flex; align-items: center; padding: 0 12px;\n font-size: 11px; color: var(--gray-3);\n }\n .features-dashboard-body { padding: 32px; }\n .features-dash-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 24px; }\n .features-chart-area {\n background: var(--surface-3); border-radius: 12px;\n border: 1px solid var(--border); padding: 20px; min-height: 220px;\n position: relative; overflow: hidden;\n }\n .features-chart-title { font-size: 12px; font-weight: 600; color: var(--gray-2); margin-bottom: 16px; }\n .features-chart-bars {\n display: flex; align-items: flex-end; gap: 6px;\n height: 140px; padding-top: 20px;\n }\n .fc-bar {\n flex: 1; border-radius: 4px 4px 0 0;\n background: var(--surface-2);\n animation: barRise 1s ease-out both;\n }\n .fc-bar.a { background: linear-gradient(180deg, var(--blue-bright), var(--blue)); box-shadow: 0 0 12px rgba(37,99,235,0.4); }\n .fc-bar.b { background: rgba(37,99,235,0.4); }\n .fc-bar:nth-child(1) { animation-delay: 0.8s; }\n .fc-bar:nth-child(2) { animation-delay: 0.9s; }\n .fc-bar:nth-child(3) { animation-delay: 1.0s; }\n .fc-bar:nth-child(4) { animation-delay: 1.1s; }\n .fc-bar:nth-child(5) { animation-delay: 1.2s; }\n .fc-bar:nth-child(6) { animation-delay: 1.3s; }\n .fc-bar:nth-child(7) { animation-delay: 1.4s; }\n .fc-bar:nth-child(8) { animation-delay: 1.5s; }\n .fc-bar:nth-child(9) { animation-delay: 1.6s; }\n .fc-bar:nth-child(10) { animation-delay: 1.7s; }\n .features-kpis { display: grid; gap: 16px; }\n .fkpi-card {\n background: var(--surface-3); border: 1px solid var(--border);\n border-radius: 12px; padding: 18px 20px;\n transition: border-color 0.2s;\n }\n .fkpi-card:hover { border-color: rgba(37,99,235,0.3); }\n .fkpi-label { font-size: 11px; color: var(--gray-3); font-weight: 500; margin-bottom: 6px; }\n .fkpi-value { font-size: 26px; font-weight: 900; color: var(--white); letter-spacing: -1px; }\n .fkpi-value.blue { color: var(--blue-bright); }\n .fkpi-change { font-size: 11px; color: var(--green); font-weight: 600; margin-top: 4px; }\n .features-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--border); border-radius: 16px; overflow: hidden; }\n .feature-item {\n background: var(--surface-1); padding: 32px 28px;\n border-radius: 0; transition: background 0.2s;\n }\n .feature-item:hover { background: var(--surface-2); }\n .feature-icon {\n width: 44px; height: 44px; border-radius: 10px; margin-bottom: 20px;\n background: var(--blue-dim); border: 1px solid rgba(37,99,235,0.2);\n display: flex; align-items: center; justify-content: center; font-size: 18px;\n }\n .feature-title { font-size: 15px; font-weight: 700; color: var(--white); margin-bottom: 10px; letter-spacing: -0.2px; }\n .feature-desc { font-size: 13px; color: var(--gray-3); line-height: 1.7; }\n\n \/* \u2500\u2500\u2500 STATS \u2500\u2500\u2500 *\/\n .stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; background: var(--border); border-radius: 16px; overflow: hidden; margin-top: 64px; }\n .stat-card {\n background: var(--surface-1); padding: 48px 40px;\n text-align: center; position: relative; overflow: hidden; transition: background 0.2s;\n }\n .stat-card:hover { background: var(--surface-2); }\n .stat-value { font-size: clamp(48px, 5vw, 72px); font-weight: 900; letter-spacing: -3px; color: var(--white); line-height: 1; margin-bottom: 8px; }\n .stat-value span { color: var(--blue-bright); }\n .stat-label { font-size: 14px; color: var(--gray-3); font-weight: 500; }\n .stat-card::before {\n content: ''; position: absolute; inset: 0;\n background: radial-gradient(ellipse at 50% 0%, rgba(37,99,235,0.05) 0%, transparent 60%);\n }\n\n \/* \u2500\u2500\u2500 SERVI\u00c7OS \u2500\u2500\u2500 *\/\n .servicos-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }\n .servico-card {\n padding: 32px; border-radius: 12px;\n background: var(--surface-1); border: 1px solid var(--border);\n position: relative; overflow: hidden; transition: all 0.2s;\n }\n .servico-card:hover { border-color: var(--border-mid); transform: translateY(-2px); }\n .servico-card.featured {\n border-color: rgba(37,99,235,0.35);\n background: linear-gradient(135deg, rgba(37,99,235,0.08) 0%, rgba(37,99,235,0.02) 100%);\n box-shadow: 0 0 40px rgba(37,99,235,0.1), inset 0 1px 0 rgba(37,99,235,0.2);\n }\n .servico-card.featured::before {\n content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;\n background: linear-gradient(90deg, transparent, var(--blue), transparent);\n }\n .servico-card.wide { grid-column: span 2; display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }\n .servico-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 600; color: var(--blue-light); letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 16px; }\n .servico-featured-tag {\n position: absolute; top: 24px; right: 24px;\n font-size: 10px; font-weight: 600; color: var(--blue-bright); letter-spacing: 1px;\n background: var(--blue-dim); border: 1px solid rgba(37,99,235,0.3); padding: 4px 10px; border-radius: 100px;\n }\n .servico-nome { font-size: 20px; font-weight: 800; color: var(--white); letter-spacing: -0.5px; margin-bottom: 10px; }\n .servico-desc { font-size: 13px; color: var(--gray-3); line-height: 1.7; margin-bottom: 24px; }\n .servico-ticket { font-size: 32px; font-weight: 900; color: var(--white); letter-spacing: -1.5px; }\n .servico-ticket.blue { color: var(--blue-bright); }\n .servico-periodo { font-size: 12px; color: var(--gray-3); margin-top: 4px; }\n .servico-includes { display: grid; gap: 8px; }\n .servico-include { display: flex; gap: 10px; align-items: center; font-size: 13px; color: var(--gray-2); }\n .servico-include::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--blue); flex-shrink: 0; }\n\n \/* \u2500\u2500\u2500 PARA QUEM \u2500\u2500\u2500 *\/\n .paraquem-section { background: var(--surface-1); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }\n .paraquem-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 56px; }\n .paraquem-col-header {\n display: flex; align-items: center; gap: 10px;\n font-size: 11px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase;\n margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--border);\n }\n .paraquem-col-header.green { color: var(--green); }\n .paraquem-col-header.red { color: var(--red); }\n .paraquem-col-header-dot { width: 8px; height: 8px; border-radius: 50%; }\n .paraquem-col-header.green .paraquem-col-header-dot { background: var(--green); box-shadow: 0 0 8px var(--green); }\n .paraquem-col-header.red .paraquem-col-header-dot { background: var(--red); box-shadow: 0 0 8px var(--red); }\n .paraquem-list { display: grid; gap: 8px; }\n .paraquem-item {\n display: flex; gap: 14px; align-items: flex-start;\n padding: 16px 18px; border-radius: 8px;\n background: var(--surface-2); border: 1px solid var(--border);\n font-size: 14px; color: var(--gray-2); line-height: 1.5;\n transition: transform 0.2s;\n }\n .paraquem-item:hover { transform: translateX(4px); }\n .paraquem-item.green { background: rgba(16,185,129,0.04); border-left: 2px solid var(--green); border-color: rgba(16,185,129,0.15); }\n .paraquem-item.red { background: rgba(239,68,68,0.04); border-left: 2px solid var(--red); border-color: rgba(239,68,68,0.15); }\n .paraquem-icon { font-weight: 800; font-size: 14px; flex-shrink: 0; margin-top: 1px; }\n .paraquem-item.green .paraquem-icon { color: var(--green); }\n .paraquem-item.red .paraquem-icon { color: var(--red); }\n .paraquem-item strong { color: var(--white); font-weight: 600; }\n\n \/* \u2500\u2500\u2500 CTA \u2500\u2500\u2500 *\/\n .cta-section { position: relative; overflow: hidden; border-top: 1px solid var(--border); }\n .cta-glow {\n position: absolute; top: -100px; left: 50%; transform: translateX(-50%);\n width: 800px; height: 400px;\n background: radial-gradient(ellipse at center, rgba(37,99,235,0.15) 0%, transparent 70%);\n pointer-events: none; animation: glowPulse 8s ease-in-out infinite;\n }\n .cta-inner { position: relative; z-index: 1; max-width: 800px; margin: 0 auto; text-align: center; }\n .cta-inner .section-title { font-size: clamp(36px, 4vw, 60px); }\n .cta-inner .section-sub { margin: 0 auto 40px; text-align: center; }\n .cta-inner .section-tag { justify-content: center; }\n .cta-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }\n .cta-note { font-size: 12px; color: var(--gray-3); margin-top: 20px; }\n\n \/* \u2500\u2500\u2500 FOOTER \u2014 animated, 4 columns \u2500\u2500\u2500 *\/\n footer {\n position: relative; z-index: 1;\n border-top: 1px solid var(--border);\n padding: 72px 60px 40px;\n background: var(--surface-1);\n }\n .footer-top {\n max-width: 1200px; margin: 0 auto;\n display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 64px;\n padding-bottom: 56px; border-bottom: 1px solid var(--border);\n margin-bottom: 32px;\n }\n .footer-brand {}\n .footer-logo-wrap { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }\n .footer-logo-text { font-size: 15px; font-weight: 800; color: var(--white); }\n .footer-logo-text span { color: var(--blue-bright); }\n .footer-tagline { font-size: 14px; color: var(--gray-3); line-height: 1.7; max-width: 240px; margin-bottom: 28px; }\n .footer-socials { display: flex; gap: 10px; }\n .footer-social {\n width: 36px; height: 36px; border-radius: 8px;\n background: var(--surface-2); border: 1px solid var(--border);\n display: flex; align-items: center; justify-content: center;\n color: var(--gray-3); font-size: 13px; font-weight: 700; text-decoration: none;\n transition: all 0.2s;\n }\n .footer-social:hover { background: var(--blue-dim); border-color: rgba(37,99,235,0.3); color: var(--blue-light); transform: translateY(-2px); }\n .footer-col-title { font-size: 11px; font-weight: 700; color: var(--white); letter-spacing: 1px; text-transform: uppercase; margin-bottom: 20px; }\n .footer-col-links { display: grid; gap: 12px; }\n .footer-col-links a { font-size: 13px; color: var(--gray-3); text-decoration: none; transition: color 0.2s; display: inline-flex; align-items: center; gap: 6px; }\n .footer-col-links a:hover { color: var(--gray-2); }\n .footer-col-links a:hover::before { width: 12px; }\n .footer-col-links a::before { content: ''; width: 0; height: 1px; background: var(--blue); transition: width 0.2s; }\n .footer-bottom {\n max-width: 1200px; margin: 0 auto;\n display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px;\n }\n .footer-copy { font-size: 12px; color: var(--gray-3); }\n .footer-copy span { color: var(--gray-2); }\n .footer-legal { display: flex; gap: 24px; }\n .footer-legal a { font-size: 12px; color: var(--gray-3); text-decoration: none; transition: color 0.2s; }\n .footer-legal a:hover { color: var(--gray-2); }\n\n \/* \u2500\u2500\u2500 RESPONSIVE \u2500\u2500\u2500 *\/\n @media (max-width: 1024px) {\n nav { padding: 0 32px; }\n .hero { padding: 100px 32px 64px; }\n .hero-inner { grid-template-columns: 1fr; }\n .hero-right { display: none; }\n .section { padding: 80px 32px; }\n .logos-bar { padding: 24px 32px; }\n .problema-header, .solucao-grid, .servicos-header, .paraquem-grid { grid-template-columns: 1fr; gap: 40px; }\n .problema-grid, .steps-grid { grid-template-columns: 1fr 1fr; }\n .stats-grid { grid-template-columns: 1fr; }\n .servicos-grid { grid-template-columns: 1fr; }\n .servico-card.wide { grid-column: span 1; grid-template-columns: 1fr; }\n .features-grid { grid-template-columns: 1fr 1fr; }\n .features-dash-grid { grid-template-columns: 1fr; }\n .footer-top { grid-template-columns: 1fr 1fr; gap: 48px; }\n footer { padding: 56px 32px 32px; }\n }\n @media (max-width: 640px) {\n .nav-links { display: none; }\n .hero h1 { font-size: 40px; letter-spacing: -2px; }\n .problema-grid, .steps-grid, .features-grid { grid-template-columns: 1fr; }\n .hero-stats { flex-direction: column; gap: 16px; }\n .hero-stat { border-right: none; padding-right: 0; margin-right: 0; }\n .footer-top { grid-template-columns: 1fr; gap: 40px; }\n .footer-bottom { flex-direction: column; align-items: flex-start; }\n }\n\n \/* \u2500\u2500\u2500 SERVICOS HEADER \u2500\u2500\u2500 *\/\n .servicos-header { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: end; margin-bottom: 56px; }\n<\/style>\n<\/head>\n<body>\n\n<!-- NAV -->\n<nav id=\"main-nav\">\n <a href=\"#\" class=\"nav-logo\">\n <svg class=\"nav-logo-icon\" viewBox=\"0 0 28 28\" fill=\"none\">\n <path d=\"M3 4L14 24L25 4\" stroke=\"#2563EB\" stroke-width=\"3.5\" stroke-linecap=\"square\"\/>\n <\/svg>\n <span class=\"nav-logo-text\">TRINIX <span>COMPANY<\/span><\/span>\n <\/a>\n <div class=\"nav-links\">\n <a href=\"#solucao\">O que fazemos<\/a>\n <a href=\"#como\">Como funciona<\/a>\n <a href=\"#servicos\">Servi\u00e7os<\/a>\n <a href=\"#paraquem\">Para quem<\/a>\n <\/div>\n <div class=\"nav-cta-wrap\">\n <a href=\"https:\/\/wa.me\/5516981566161?text=Ol%C3%A1%21%20Vim%20pelo%20site%20da%20Trinix%20Company%20e%20gostaria%20de%20saber%20mais%20sobre%20os%20servi%C3%A7os.%20Podem%20me%20ajudar%3F\" target=\"_blank\" class=\"btn-gradient-border\">Fale com a Trinix<\/a>\n <\/div>\n<\/nav>\n\n<!-- HERO -->\n<section class=\"hero\">\n <div class=\"hero-glow\"><\/div>\n <div class=\"hero-glow-right\"><\/div>\n <div class=\"hero-inner\">\n <div class=\"hero-left\">\n <div class=\"hero-badge\">\n <div class=\"hero-badge-dot\"><\/div>\n Gest\u00e3o de Marketing e Vendas \u00b7 B2B\n <\/div>\n <h1>Assumimos o<br>marketing do<br>seu <em>neg\u00f3cio.<\/em><\/h1>\n <p class=\"hero-sub\">Estrat\u00e9gia, execu\u00e7\u00e3o e gest\u00e3o integrada para empresas que superaram ag\u00eancias e freelancers. <strong>Resultado em escala \u2014 com m\u00e9todo.<\/strong><\/p>\n <div class=\"hero-actions\">\n <a href=\"https:\/\/wa.me\/5516981566161?text=Ol%C3%A1%21%20Vim%20pelo%20site%20da%20Trinix%20Company%20e%20gostaria%20de%20saber%20mais%20sobre%20os%20servi%C3%A7os.%20Podem%20me%20ajudar%3F\" target=\"_blank\" class=\"btn-primary\">\n Fale com a Trinix\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\"><path d=\"M2 7H12M12 7L7 2M12 7L7 12\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"\/><\/svg>\n <\/a>\n <a href=\"#como\" class=\"btn-ghost\">\n Como funciona\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\"><path d=\"M7 2L7 12M7 12L2 7M7 12L12 7\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"\/><\/svg>\n <\/a>\n <\/div>\n <div class=\"hero-stats\">\n <div class=\"hero-stat\">\n <div class=\"hero-stat-value\" style=\"color:var(--blue-bright)\">3<\/div>\n <div class=\"hero-stat-label\">Pilares de entrega<\/div>\n <\/div>\n <div class=\"hero-stat\">\n <div class=\"hero-stat-value\">100%<\/div>\n <div class=\"hero-stat-label\">Orientado a resultado<\/div>\n <\/div>\n <div class=\"hero-stat\">\n <div class=\"hero-stat-value\">0<\/div>\n <div class=\"hero-stat-label\">Pacotes gen\u00e9ricos<\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <!-- Floating Dashboard -->\n <div class=\"hero-right\">\n <div class=\"hero-dashboard\">\n <div class=\"dashboard-header\">\n <div class=\"dashboard-title\">Performance \u00b7 Assessoria<\/div>\n <div class=\"dashboard-badge\">\u2191 Ativo<\/div>\n <\/div>\n <div class=\"dashboard-metric\">\n <div class=\"dashboard-metric-value\">+247%<\/div>\n <div class=\"dashboard-metric-label\">Crescimento em leads qualificados<\/div>\n <div class=\"dashboard-metric-change\">\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\"><path d=\"M6 10V2M6 2L2 6M6 2L10 6\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"\/><\/svg>\n vs. per\u00edodo anterior\n <\/div>\n <\/div>\n <div class=\"mini-chart\">\n <div class=\"chart-bars\">\n <div class=\"chart-bar\" style=\"height:30%\"><\/div>\n <div class=\"chart-bar\" style=\"height:45%\"><\/div>\n <div class=\"chart-bar\" style=\"height:35%\"><\/div>\n <div class=\"chart-bar active\" style=\"height:55%\"><\/div>\n <div class=\"chart-bar\" style=\"height:50%\"><\/div>\n <div class=\"chart-bar active\" style=\"height:70%\"><\/div>\n <div class=\"chart-bar\" style=\"height:65%\"><\/div>\n <div class=\"chart-bar highlight\" style=\"height:90%\"><\/div>\n <div class=\"chart-bar highlight\" style=\"height:85%\"><\/div>\n <div class=\"chart-bar highlight\" style=\"height:100%\"><\/div>\n <\/div>\n <\/div>\n <div class=\"dashboard-row\">\n <div class=\"dash-kpi blue\">\n <div class=\"dash-kpi-val\">R$3.2M<\/div>\n <div class=\"dash-kpi-lbl\">Receita gerada<\/div>\n <\/div>\n <div class=\"dash-kpi\">\n <div class=\"dash-kpi-val\">94%<\/div>\n <div class=\"dash-kpi-lbl\">Convers\u00e3o<\/div>\n <\/div>\n <div class=\"dash-kpi\">\n <div class=\"dash-kpi-val\">28d<\/div>\n <div class=\"dash-kpi-lbl\">Ciclo m\u00e9dio<\/div>\n <\/div>\n <\/div>\n <div class=\"progress-list\">\n <div class=\"progress-item\">\n <div class=\"progress-item-header\">\n <span class=\"progress-item-name\">Tr\u00e1fego pago<\/span>\n <span class=\"progress-item-val\">92%<\/span>\n <\/div>\n <div class=\"progress-bar-wrap\">\n <div class=\"progress-bar-fill\" data-width=\"92\"><\/div>\n <\/div>\n <\/div>\n <div class=\"progress-item\">\n <div class=\"progress-item-header\">\n <span class=\"progress-item-name\">Processo comercial<\/span>\n <span class=\"progress-item-val\">87%<\/span>\n <\/div>\n <div class=\"progress-bar-wrap\">\n <div class=\"progress-bar-fill green\" data-width=\"87\"><\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"float-card\">\n <div class=\"float-card-icon\">\u26a1<\/div>\n <div class=\"float-card-text\">\n <div class=\"float-card-val\">Diagn\u00f3stico ativo<\/div>\n <div class=\"float-card-lbl\">8 eixos mapeados<\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n<\/section>\n\n<!-- LOGOS BAR \u2014 sparkles + scroll -->\n<div class=\"logos-bar\" id=\"logos-bar\">\n <canvas id=\"sparkles-canvas\"><\/canvas>\n <div class=\"logos-inner\">\n <span class=\"logos-label\">Setores atendidos<\/span>\n <div class=\"logos-divider\"><\/div>\n <div class=\"logos-scroll-wrap\">\n <div class=\"logos-items\">\n <span class=\"logo-item\">Ind\u00fastria<\/span>\n <span class=\"logo-item\">Varejo B2B<\/span>\n <span class=\"logo-item\">Servi\u00e7os<\/span>\n <span class=\"logo-item\">Tecnologia<\/span>\n <span class=\"logo-item\">Sa\u00fade<\/span>\n <span class=\"logo-item\">Educa\u00e7\u00e3o<\/span>\n <span class=\"logo-item\">Imobili\u00e1rio<\/span>\n <span class=\"logo-item\">Consultoria<\/span>\n <!-- duplicate for seamless loop -->\n <span class=\"logo-item\">Ind\u00fastria<\/span>\n <span class=\"logo-item\">Varejo B2B<\/span>\n <span class=\"logo-item\">Servi\u00e7os<\/span>\n <span class=\"logo-item\">Tecnologia<\/span>\n <span class=\"logo-item\">Sa\u00fade<\/span>\n <span class=\"logo-item\">Educa\u00e7\u00e3o<\/span>\n <span class=\"logo-item\">Imobili\u00e1rio<\/span>\n <span class=\"logo-item\">Consultoria<\/span>\n <\/div>\n <\/div>\n <\/div>\n<\/div>\n\n<!-- MANIFESTO -->\n<div class=\"section\" id=\"manifesto\" style=\"background:var(--surface-1);border-top:1px solid var(--border);border-bottom:1px solid var(--border)\">\n <div class=\"section-inner\">\n <div style=\"max-width:840px;margin:0 auto\">\n <div class=\"reveal\" style=\"text-align:center;margin-bottom:48px\">\n <div class=\"section-tag\" style=\"justify-content:center\">O que acreditamos<\/div>\n <div class=\"section-title\" style=\"text-align:center\">A barreira que as grandes<br>empresas <em>j\u00e1 romperam.<\/em><\/div>\n <\/div>\n <p class=\"reveal\" style=\"font-size:18px;font-weight:700;color:var(--white);line-height:1.6;margin-bottom:20px\">Por anos, o mercado te vendeu a m\u00e9trica errada.<\/p>\n <p class=\"reveal reveal-delay-1\" style=\"font-size:15px;color:var(--gray-2);line-height:1.9;margin-bottom:20px\">CPL baixo. Volume de lead. Alcance. Impress\u00f5es. Relat\u00f3rios com gr\u00e1ficos que sobem \u2014 e faturamento que fica parado. N\u00e3o \u00e9 culpa sua n\u00e3o ter percebido antes. \u00c9 assim que a ind\u00fastria de marketing aprendeu a se manter relevante: entregando n\u00fameros que parecem resultado, mas n\u00e3o s\u00e3o.<\/p>\n <p class=\"reveal reveal-delay-2\" style=\"font-size:15px;color:var(--gray-2);line-height:1.9;margin-bottom:20px;padding:22px 28px;border-left:3px solid var(--blue);background:var(--blue-dim);border-radius:0 8px 8px 0\"><strong style=\"color:var(--white)\">Enquanto isso, as grandes empresas fizeram algo diferente.<\/strong> As que escalaram de verdade \u2014 em constru\u00e7\u00e3o civil, na ind\u00fastria, nos setores de alto ticket \u2014 n\u00e3o otimizaram para custo por lead. Elas constru\u00edram gest\u00e3o integrada de marketing e vendas. Mediram o que importava: custo por venda, receita gerada, crescimento previs\u00edvel. Elas pararam de comprar execu\u00e7\u00e3o e come\u00e7aram a ter gest\u00e3o.<\/p>\n <p class=\"reveal reveal-delay-1\" style=\"font-size:15px;color:var(--gray-2);line-height:1.9;margin-bottom:20px\">Existe um momento no crescimento de todo neg\u00f3cio onde essa mudan\u00e7a precisa acontecer. Quando o volume j\u00e1 n\u00e3o resolve. Quando a pr\u00f3xima ag\u00eancia n\u00e3o vai mover o ponteiro. Quando voc\u00ea sabe que tem muito mais dinheiro na mesa \u2014 e nenhum parceiro foi fundo o suficiente no seu mercado para acess\u00e1-lo.<\/p>\n <p class=\"reveal\" style=\"font-size:22px;font-weight:800;color:var(--blue-bright);letter-spacing:-0.5px;margin-bottom:20px\">Esse \u00e9 o momento Trinix.<\/p>\n <p class=\"reveal reveal-delay-1\" style=\"font-size:15px;color:var(--gray-2);line-height:1.9\">Assumimos o marketing e as vendas do seu neg\u00f3cio com o mesmo n\u00edvel de conhecimento que voc\u00ea tem do seu mercado. Medimos pelo que realmente importa. E entregamos os n\u00fameros que voc\u00ea nunca viu \u2014 n\u00e3o porque s\u00e3o extraordin\u00e1rios, mas porque nunca foram medidos da forma certa.<\/p>\n <\/div>\n <\/div>\n<\/div>\n\n<!-- PROBLEMA -->\n<div class=\"section problema-section\" id=\"problema\">\n <div class=\"section-inner\">\n <div class=\"problema-header\">\n <div class=\"reveal\">\n <div class=\"section-tag\">O problema<\/div>\n <div class=\"section-title\">Voc\u00ea j\u00e1<br>tentou <em>de tudo.<\/em><\/div>\n <\/div>\n <div class=\"problema-callout reveal reveal-delay-2\">\n O problema n\u00e3o \u00e9 falta de tentativa.<br>\n <strong>\u00c9 falta de gest\u00e3o integrada.<\/strong><br><br>\n Enquanto voc\u00ea tenta montar o quebra-cabe\u00e7a, seu concorrente que resolveu isso est\u00e1 escalando.\n <\/div>\n <\/div>\n <div class=\"problema-grid\">\n <div class=\"problema-card glow-card reveal reveal-delay-1\">\n <div class=\"problema-card-icon\">\u00d7<\/div>\n <div class=\"problema-card-title\">A ag\u00eancia<\/div>\n <div class=\"problema-card-desc\">Entregou relat\u00f3rio bonito, n\u00famero ruim. Pacote sem responsabilidade real por resultado.<\/div>\n <\/div>\n <div class=\"problema-card glow-card reveal reveal-delay-2\">\n <div class=\"problema-card-icon\">\u00d7<\/div>\n <div class=\"problema-card-title\">O freelancer<\/div>\n <div class=\"problema-card-desc\">Dif\u00edcil de gerenciar, sem vis\u00e3o do neg\u00f3cio todo. Entrega tarefa, n\u00e3o entrega crescimento.<\/div>\n <\/div>\n <div class=\"problema-card glow-card reveal reveal-delay-3\">\n <div class=\"problema-card-icon\">\u00d7<\/div>\n <div class=\"problema-card-title\">O funcion\u00e1rio<\/div>\n <div class=\"problema-card-desc\">N\u00e3o escala. Dif\u00edcil cobrar resultado. Custo alto para o que entrega.<\/div>\n <\/div>\n <div class=\"problema-card glow-card reveal reveal-delay-4\">\n <div class=\"problema-card-icon\">\u00d7<\/div>\n <div class=\"problema-card-title\">O improviso<\/div>\n <div class=\"problema-card-desc\">Tomou seu tempo, tirou o foco do neg\u00f3cio. E os resultados ainda n\u00e3o apareceram.<\/div>\n <\/div>\n <\/div>\n <\/div>\n<\/div>\n\n<!-- SOLU\u00c7\u00c3O -->\n<div class=\"section\" id=\"solucao\">\n <div class=\"section-inner\">\n <div class=\"solucao-grid\">\n <div class=\"reveal\">\n <div class=\"section-tag\">A Trinix Company<\/div>\n <div class=\"section-title\">N\u00e3o somos<br>uma <em>ag\u00eancia.<\/em><\/div>\n <p class=\"section-sub\" style=\"margin-bottom:32px\">Somos uma parceira de gest\u00e3o. N\u00e3o vendemos pacote. Selecionamos projetos \u2014 e quando entramos, assumimos de verdade.<\/p>\n <p style=\"font-size:15px;color:var(--gray-2);line-height:1.8;margin-bottom:16px;padding:20px 24px;border-left:3px solid var(--blue);background:var(--blue-dim);border-radius:0 8px 8px 0\">Enquanto ag\u00eancias entregam pacote, <strong style=\"color:var(--white)\">a Trinix entrega gest\u00e3o.<\/strong><\/p>\n <\/div>\n <div class=\"solucao-visual reveal reveal-delay-2\">\n <div class=\"solucao-card glow-card\">\n <div class=\"solucao-card-label\">O que assumimos<\/div>\n <div class=\"solucao-card-title\">Gest\u00e3o integrada de marketing e vendas<\/div>\n <div class=\"solucao-list\">\n <div class=\"solucao-item\"><span class=\"solucao-item-num\">01<\/span><span class=\"solucao-item-text\"><strong>Estrat\u00e9gia<\/strong> \u2014 diagn\u00f3stico, planejamento e metas com dado real<\/span><\/div>\n <div class=\"solucao-item\"><span class=\"solucao-item-num\">02<\/span><span class=\"solucao-item-text\"><strong>Tr\u00e1fego pago<\/strong> \u2014 Meta Ads e Google Ads gerenciados por n\u00f3s<\/span><\/div>\n <div class=\"solucao-item\"><span class=\"solucao-item-num\">03<\/span><span class=\"solucao-item-text\"><strong>Site e landing pages<\/strong> \u2014 presen\u00e7a digital orientada a convers\u00e3o<\/span><\/div>\n <div class=\"solucao-item\"><span class=\"solucao-item-num\">04<\/span><span class=\"solucao-item-text\"><strong>IA e automa\u00e7\u00e3o<\/strong> \u2014 qualifica\u00e7\u00e3o de lead e CRM integrado<\/span><\/div>\n <div class=\"solucao-item\"><span class=\"solucao-item-num\">05<\/span><span class=\"solucao-item-text\"><strong>Processo comercial<\/strong> \u2014 funil, follow-up e cultura de vendas<\/span><\/div>\n <\/div>\n <div class=\"solucao-glow\"><\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n<\/div>\n\n<!-- COMO FUNCIONA -->\n<div class=\"section como-section\" id=\"como\">\n <div class=\"section-inner\">\n <div class=\"como-header reveal\">\n <div class=\"section-tag\">Como funciona<\/div>\n <div class=\"section-title\">Assumimos. <em>Executamos.<\/em> Escalamos.<\/div>\n <p class=\"section-sub\">Diagn\u00f3stico antes de qualquer execu\u00e7\u00e3o. Cada etapa tem respons\u00e1vel, prazo e resultado mensur\u00e1vel.<\/p>\n <\/div>\n <div class=\"steps-grid\">\n <div class=\"step-card reveal reveal-delay-1\">\n <div class=\"step-num\">01<\/div>\n <div class=\"step-title\">Diagn\u00f3stico<\/div>\n <div class=\"step-desc\">Mapeamos o estado real do neg\u00f3cio \u2014 marketing, vendas, processos e tecnologia. Dado antes de execu\u00e7\u00e3o.<\/div>\n <\/div>\n <div class=\"step-card reveal reveal-delay-2\">\n <div class=\"step-num\">02<\/div>\n <div class=\"step-title\">Estrat\u00e9gia<\/div>\n <div class=\"step-desc\">Definimos o caminho com clareza. Prioridades, canais, metas. Sem chute, sem achismo.<\/div>\n <\/div>\n <div class=\"step-card reveal reveal-delay-3\">\n <div class=\"step-num\">03<\/div>\n <div class=\"step-title\">Execu\u00e7\u00e3o<\/div>\n <div class=\"step-desc\">Assumimos e executamos. Tr\u00e1fego, IA, site, CRM \u2014 integrados sob uma gest\u00e3o com responsabilidade real.<\/div>\n <\/div>\n <div class=\"step-card reveal reveal-delay-4\">\n <div class=\"step-num\">04<\/div>\n <div class=\"step-title\">Escala<\/div>\n <div class=\"step-desc\">O neg\u00f3cio cresce com m\u00e9todo. Resultado mensur\u00e1vel, gest\u00e3o cont\u00ednua, evolu\u00e7\u00e3o constante.<\/div>\n <\/div>\n <\/div>\n <\/div>\n<\/div>\n\n<!-- FEATURES \u2014 dashboard mockup + 4-col grid -->\n<div class=\"section features-section\" id=\"features\">\n <div class=\"features-inner\">\n <div class=\"features-header reveal\">\n <div class=\"section-tag\">Plataforma de gest\u00e3o<\/div>\n <div class=\"section-title\">Tudo vis\u00edvel.<br><em>Tudo medido.<\/em><\/div>\n <p class=\"section-sub\">Voc\u00ea acompanha cada n\u00famero em tempo real. Sem relat\u00f3rio mensal surpresa \u2014 resultado transparente toda semana.<\/p>\n <\/div>\n <div class=\"features-dashboard reveal\">\n <div class=\"features-dashboard-bar\">\n <div class=\"fdb-dot\"><\/div><div class=\"fdb-dot\"><\/div><div class=\"fdb-dot\"><\/div>\n <div class=\"fdb-url\">trinix.com.br\/dashboard<\/div>\n <\/div>\n <div class=\"features-dashboard-body\">\n <div class=\"features-dash-grid\">\n <div class=\"features-chart-area\">\n <div class=\"features-chart-title\">Leads qualificados \u2014 \u00faltimos 10 meses<\/div>\n <div class=\"features-chart-bars\">\n <div class=\"fc-bar b\" style=\"height:40%\"><\/div>\n <div class=\"fc-bar b\" style=\"height:52%\"><\/div>\n <div class=\"fc-bar b\" style=\"height:45%\"><\/div>\n <div class=\"fc-bar b\" style=\"height:60%\"><\/div>\n <div class=\"fc-bar b\" style=\"height:55%\"><\/div>\n <div class=\"fc-bar a\" style=\"height:72%\"><\/div>\n <div class=\"fc-bar a\" style=\"height:68%\"><\/div>\n <div class=\"fc-bar a\" style=\"height:85%\"><\/div>\n <div class=\"fc-bar a\" style=\"height:90%\"><\/div>\n <div class=\"fc-bar a\" style=\"height:100%\"><\/div>\n <\/div>\n <\/div>\n <div class=\"features-kpis\">\n <div class=\"fkpi-card\">\n <div class=\"fkpi-label\">CPL m\u00e9dio<\/div>\n <div class=\"fkpi-value blue\">R$ 18<\/div>\n <div class=\"fkpi-change\">\u2193 34% vs. m\u00eas anterior<\/div>\n <\/div>\n <div class=\"fkpi-card\">\n <div class=\"fkpi-label\">Taxa de convers\u00e3o<\/div>\n <div class=\"fkpi-value\">94%<\/div>\n <div class=\"fkpi-change\">\u2191 12 p.p. no per\u00edodo<\/div>\n <\/div>\n <div class=\"fkpi-card\">\n <div class=\"fkpi-label\">ROAS acumulado<\/div>\n <div class=\"fkpi-value blue\">8.3x<\/div>\n <div class=\"fkpi-change\">\u2191 Acima da meta<\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"features-grid\">\n <div class=\"feature-item glow-card reveal reveal-delay-1\">\n <div class=\"feature-icon\">\ud83d\udcca<\/div>\n <div class=\"feature-title\">Relat\u00f3rios semanais<\/div>\n <div class=\"feature-desc\">Todo resultado documentado com dados reais. Nada de surpresa no m\u00eas.<\/div>\n <\/div>\n <div class=\"feature-item glow-card reveal reveal-delay-2\">\n <div class=\"feature-icon\">\ud83c\udfaf<\/div>\n <div class=\"feature-title\">Metas com m\u00e9todo<\/div>\n <div class=\"feature-desc\">Definimos KPIs antes de executar. Cada a\u00e7\u00e3o tem objetivo mensur\u00e1vel.<\/div>\n <\/div>\n <div class=\"feature-item glow-card reveal reveal-delay-3\">\n <div class=\"feature-icon\">\u26a1<\/div>\n <div class=\"feature-title\">IA integrada<\/div>\n <div class=\"feature-desc\">Qualifica\u00e7\u00e3o de lead autom\u00e1tica, CRM inteligente e fluxos que vendem enquanto voc\u00ea dorme.<\/div>\n <\/div>\n <div class=\"feature-item glow-card reveal reveal-delay-4\">\n <div class=\"feature-icon\">\ud83d\udd17<\/div>\n <div class=\"feature-title\">Gest\u00e3o integrada<\/div>\n <div class=\"feature-desc\">Tr\u00e1fego, site, CRM e comercial sob um \u00fanico comando. Sem gap entre \u00e1reas.<\/div>\n <\/div>\n <\/div>\n <\/div>\n<\/div>\n\n<!-- STATS -->\n<div class=\"section stats-section\">\n <div class=\"section-inner\">\n <div class=\"reveal\" style=\"text-align:center\">\n <div class=\"section-tag\" style=\"justify-content:center\">Resultado em escala<\/div>\n <div class=\"section-title\" style=\"text-align:center\">N\u00fameros que<br><em>provam o m\u00e9todo.<\/em><\/div>\n <\/div>\n <div class=\"stats-grid\">\n <div class=\"stat-card reveal reveal-delay-1\">\n <div class=\"stat-value\"><span>5+<\/span><\/div>\n <div class=\"stat-label\">Servi\u00e7os integrados sob uma gest\u00e3o<\/div>\n <\/div>\n <div class=\"stat-card reveal reveal-delay-2\">\n <div class=\"stat-value\">100<span>%<\/span><\/div>\n <div class=\"stat-label\">Orientado a resultado \u2014 n\u00e3o a entrega de tarefa<\/div>\n <\/div>\n <div class=\"stat-card reveal reveal-delay-3\">\n <div class=\"stat-value\"><span>0<\/span><\/div>\n <div class=\"stat-label\">Pacotes gen\u00e9ricos. Cada projeto \u00e9 selecionado.<\/div>\n <\/div>\n <\/div>\n <\/div>\n<\/div>\n\n<!-- SERVI\u00c7OS -->\n<div class=\"section\" id=\"servicos\" style=\"background:var(--surface-1); border-top:1px solid var(--border); border-bottom:1px solid var(--border)\">\n <div class=\"section-inner\">\n <div class=\"servicos-header\">\n <div class=\"reveal\">\n <div class=\"section-tag\">Servi\u00e7os<\/div>\n <div class=\"section-title\">O que<br><em>entregamos.<\/em><\/div>\n <\/div>\n <p class=\"section-sub reveal reveal-delay-2\">Da execu\u00e7\u00e3o pontual \u00e0 gest\u00e3o completa. Cada servi\u00e7o pode ser contratado isoladamente \u2014 ou integrado na Assessoria.<\/p>\n <\/div>\n <div class=\"servicos-grid\">\n <div class=\"servico-card glow-card reveal reveal-delay-1\">\n <div class=\"servico-tag\">Execu\u00e7\u00e3o<\/div>\n <div class=\"servico-nome\">Gest\u00e3o de Tr\u00e1fego<\/div>\n <div class=\"servico-desc\">Meta Ads e Google Ads \u2014 estrat\u00e9gia, cria\u00e7\u00e3o de campanhas e gest\u00e3o orientada a resultado.<\/div>\n <div class=\"servico-ticket\">R$ 2.500<\/div>\n <div class=\"servico-periodo\">a partir de \/ m\u00eas<\/div>\n <\/div>\n <div class=\"servico-card glow-card reveal reveal-delay-2\">\n <div class=\"servico-tag\">Execu\u00e7\u00e3o<\/div>\n <div class=\"servico-nome\">Sites e Landing Pages<\/div>\n <div class=\"servico-desc\">Projeto e desenvolvimento de presen\u00e7a digital orientada a convers\u00e3o. Pagamento \u00fanico.<\/div>\n <div class=\"servico-ticket\">R$ 2.000<\/div>\n <div class=\"servico-periodo\">a partir de \u00b7 pagamento \u00fanico<\/div>\n <\/div>\n <div class=\"servico-card featured glow-card reveal reveal-delay-1\">\n <div class=\"servico-featured-tag\">Oferta principal<\/div>\n <div class=\"servico-tag\">Gest\u00e3o integrada<\/div>\n <div class=\"servico-nome\">Assessoria de Marketing<\/div>\n <div class=\"servico-desc\" style=\"margin-bottom:20px\">Gest\u00e3o completa do marketing e das vendas do seu neg\u00f3cio. Tudo integrado.<\/div>\n <div class=\"servico-includes\">\n <div class=\"servico-include\">Estrat\u00e9gia + diagn\u00f3stico cont\u00ednuo<\/div>\n <div class=\"servico-include\">Tr\u00e1fego pago gerenciado<\/div>\n <div class=\"servico-include\">IA e automa\u00e7\u00e3o de lead<\/div>\n <div class=\"servico-include\">Site e landing pages<\/div>\n <div class=\"servico-include\">CRM e processo comercial<\/div>\n <\/div>\n <div style=\"margin-top:24px\">\n <div class=\"servico-ticket blue\">R$ 5.290<\/div>\n <div class=\"servico-periodo\">a partir de \/ m\u00eas<\/div>\n <\/div>\n <\/div>\n <div class=\"servico-card glow-card reveal reveal-delay-2\">\n <div class=\"servico-tag\">Tecnologia<\/div>\n <div class=\"servico-nome\">Implanta\u00e7\u00e3o de IA<\/div>\n <div class=\"servico-desc\">Automa\u00e7\u00e3o de qualifica\u00e7\u00e3o de lead, integra\u00e7\u00e3o com CRM e fluxos inteligentes para o processo comercial.<\/div>\n <div class=\"servico-ticket\">R$ 5.000<\/div>\n <div class=\"servico-periodo\">a partir de + mensalidade<\/div>\n <\/div>\n <div class=\"servico-card wide glow-card reveal\">\n <div>\n <div class=\"servico-tag\">Transforma\u00e7\u00e3o<\/div>\n <div class=\"servico-nome\">Implanta\u00e7\u00e3o de Cultura Comercial e Marketing<\/div>\n <div class=\"servico-desc\">Para empresas que precisam de mudan\u00e7a estrutural profunda. CRM, processos, t\u00e9cnicas de venda, ferramentas e estrat\u00e9gia \u2014 implantados com in\u00edcio, meio e fim definidos.<\/div>\n <div class=\"servico-ticket\">R$ 20.000<\/div>\n <div class=\"servico-periodo\">a partir de \u00b7 projeto<\/div>\n <\/div>\n <div class=\"servico-includes\" style=\"border-left:1px solid var(--border); padding-left:48px\">\n <div style=\"font-size:12px;color:var(--blue-light);font-weight:600;letter-spacing:1px;text-transform:uppercase;margin-bottom:16px\">O que inclui<\/div>\n <div class=\"servico-include\">CRM implantado e configurado<\/div>\n <div class=\"servico-include\">Processos comerciais estruturados<\/div>\n <div class=\"servico-include\">T\u00e9cnicas de venda e follow-up<\/div>\n <div class=\"servico-include\">Ferramentas de marketing integradas<\/div>\n <div class=\"servico-include\">Estrat\u00e9gia e cultura documentadas<\/div>\n <div class=\"servico-include\">Equipe treinada e aut\u00f4noma<\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n<\/div>\n\n<!-- PARA QUEM -->\n<div class=\"section paraquem-section\" id=\"paraquem\">\n <div class=\"section-inner\">\n <div class=\"reveal\" style=\"text-align:center\">\n <div class=\"section-tag\" style=\"justify-content:center\">Para quem<\/div>\n <div class=\"section-title\" style=\"text-align:center\">N\u00e3o \u00e9 para<br><em>todo mundo.<\/em><\/div>\n <p class=\"section-sub\" style=\"margin:0 auto; text-align:center\">A Trinix seleciona projetos. Por isso cada empresa que atendemos tem aten\u00e7\u00e3o real e resultado concreto.<\/p>\n <\/div>\n <div class=\"paraquem-grid\">\n <div class=\"paraquem-col reveal reveal-delay-1\">\n <div class=\"paraquem-col-header green\">\n <div class=\"paraquem-col-header-dot\"><\/div>\n Trabalhamos com\n <\/div>\n <div class=\"paraquem-list\">\n <div class=\"paraquem-item green\"><span class=\"paraquem-icon\">+<\/span><div><strong>Produto ou servi\u00e7o real<\/strong> com demanda comprovada ou potencial evidente<\/div><\/div>\n <div class=\"paraquem-item green\"><span class=\"paraquem-icon\">+<\/span><div><strong>Empres\u00e1rio que entende<\/strong> marketing como investimento, n\u00e3o como custo<\/div><\/div>\n <div class=\"paraquem-item green\"><span class=\"paraquem-icon\">+<\/span><div><strong>Meta de crescimento<\/strong> \u2014 mesmo que ainda vaga<\/div><\/div>\n <div class=\"paraquem-item green\"><span class=\"paraquem-icon\">+<\/span><div><strong>Abertura real<\/strong> para mudar o que n\u00e3o est\u00e1 funcionando<\/div><\/div>\n <\/div>\n <\/div>\n <div class=\"paraquem-col reveal reveal-delay-2\">\n <div class=\"paraquem-col-header red\">\n <div class=\"paraquem-col-header-dot\"><\/div>\n N\u00e3o trabalhamos com\n <\/div>\n <div class=\"paraquem-list\">\n <div class=\"paraquem-item red\"><span class=\"paraquem-icon\">\u00d7<\/span><div><strong>Quem trata marketing como custo<\/strong>, n\u00e3o como investimento<\/div><\/div>\n <div class=\"paraquem-item red\"><span class=\"paraquem-icon\">\u00d7<\/span><div><strong>Mente fechada<\/strong> para mudar o que n\u00e3o est\u00e1 funcionando<\/div><\/div>\n <div class=\"paraquem-item red\"><span class=\"paraquem-icon\">\u00d7<\/span><div><strong>Sem clareza<\/strong> do que quer \u2014 mesmo ap\u00f3s conversa estruturada<\/div><\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n<\/div>\n\n<!-- CTA -->\n<div class=\"section cta-section\" id=\"cta\">\n <div class=\"cta-glow\"><\/div>\n <div class=\"cta-inner reveal\">\n <div class=\"section-tag\">Pr\u00f3ximo passo<\/div>\n <div class=\"section-title\">Pronto para<br><em>escalar?<\/em><\/div>\n <p class=\"section-sub\">N\u00e3o atendemos todo mundo. Se o seu neg\u00f3cio tem potencial real de crescimento, a conversa come\u00e7a aqui. Sem compromisso.<\/p>\n <div class=\"cta-actions\">\n <a href=\"https:\/\/wa.me\/5516981566161?text=Ol%C3%A1%21%20Vim%20pelo%20site%20da%20Trinix%20Company%20e%20gostaria%20de%20saber%20mais%20sobre%20os%20servi%C3%A7os.%20Podem%20me%20ajudar%3F\" target=\"_blank\" class=\"btn-primary\" style=\"padding:16px 36px; font-size:15px\">\n Fale com a Trinix\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\"><path d=\"M2 7H12M12 7L7 2M12 7L7 12\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"\/><\/svg>\n <\/a>\n <a href=\"#servicos\" class=\"btn-ghost\" style=\"padding:16px 28px; font-size:15px\">Ver servi\u00e7os<\/a>\n <\/div>\n <p class=\"cta-note\">A Trinix decide se o projeto faz sentido para os dois lados.<\/p>\n <\/div>\n<\/div>\n\n<!-- FOOTER -->\n<footer>\n <div class=\"footer-top\">\n <div class=\"footer-brand reveal\">\n <div class=\"footer-logo-wrap\">\n <svg width=\"28\" height=\"28\" viewBox=\"0 0 28 28\" fill=\"none\">\n <path d=\"M3 4L14 24L25 4\" stroke=\"#3B82F6\" stroke-width=\"3.5\" stroke-linecap=\"square\"\/>\n <\/svg>\n <div class=\"footer-logo-text\">TRINIX <span>COMPANY<\/span><\/div>\n <\/div>\n <p class=\"footer-tagline\">Estrat\u00e9gia. Execu\u00e7\u00e3o. Escala.<br>Gest\u00e3o integrada de marketing e vendas para empresas que querem crescer de verdade.<\/p>\n <div class=\"footer-socials\">\n <a href=\"#\" class=\"footer-social\">in<\/a>\n <a href=\"#\" class=\"footer-social\">ig<\/a>\n <a href=\"#\" class=\"footer-social\">wa<\/a>\n <\/div>\n <\/div>\n <div class=\"reveal reveal-delay-1\">\n <div class=\"footer-col-title\">Servi\u00e7os<\/div>\n <div class=\"footer-col-links\">\n <a href=\"#servicos\">Gest\u00e3o de Tr\u00e1fego<\/a>\n <a href=\"#servicos\">Sites e Landing Pages<\/a>\n <a href=\"#servicos\">Assessoria de Marketing<\/a>\n <a href=\"#servicos\">Implanta\u00e7\u00e3o de IA<\/a>\n <a href=\"#servicos\">Cultura Comercial<\/a>\n <\/div>\n <\/div>\n <div class=\"reveal reveal-delay-2\">\n <div class=\"footer-col-title\">Empresa<\/div>\n <div class=\"footer-col-links\">\n <a href=\"#solucao\">O que fazemos<\/a>\n <a href=\"#como\">Como funciona<\/a>\n <a href=\"#paraquem\">Para quem<\/a>\n <a href=\"#features\">Nossa plataforma<\/a>\n <\/div>\n <\/div>\n <div class=\"reveal reveal-delay-3\">\n <div class=\"footer-col-title\">Contato<\/div>\n <div class=\"footer-col-links\">\n <a href=\"https:\/\/wa.me\/5516981566161?text=Ol%C3%A1%21%20Vim%20pelo%20site%20da%20Trinix%20Company%20e%20gostaria%20de%20saber%20mais%20sobre%20os%20servi%C3%A7os.%20Podem%20me%20ajudar%3F\" target=\"_blank\">Fale com a Trinix<\/a>\n <a href=\"https:\/\/wa.me\/5516981566161?text=Ol%C3%A1%21%20Vim%20pelo%20site%20da%20Trinix%20Company%20e%20gostaria%20de%20saber%20mais%20sobre%20os%20servi%C3%A7os.%20Podem%20me%20ajudar%3F\" target=\"_blank\">Agendar diagn\u00f3stico<\/a>\n <a href=\"tel:+5516981566161\">(16) 98156-6161<\/a>\n <a href=\"mailto:contato@trinix.com.br\">contato@trinix.com.br<\/a>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"footer-bottom\">\n <div class=\"footer-copy\">\u00a9 2026 <span>Trinix Company<\/span>. Todos os direitos reservados.<\/div>\n <div class=\"footer-legal\">\n <a href=\"#\">Privacidade<\/a>\n <a href=\"#\">Termos de uso<\/a>\n <\/div>\n <\/div>\n<\/footer>\n\n<script>\n\/* \u2500\u2500 NAV: scroll-aware \u2500\u2500 *\/\n(function () {\n const nav = document.getElementById('main-nav');\n window.addEventListener('scroll', () => {\n nav.classList.toggle('scrolled', window.scrollY > 40);\n }, { passive: true });\n})();\n\n\/* \u2500\u2500 REVEAL ON SCROLL (IntersectionObserver) \u2500\u2500 *\/\n(function () {\n const els = document.querySelectorAll('.reveal');\n const io = new IntersectionObserver((entries) => {\n entries.forEach(e => { if (e.isIntersecting) { e.target.classList.add('visible'); io.unobserve(e.target); } });\n }, { threshold: 0.12 });\n els.forEach(el => io.observe(el));\n})();\n\n\/* \u2500\u2500 GLOW CARDS: pointer-tracking spotlight \u2500\u2500 *\/\n(function () {\n document.querySelectorAll('.glow-card').forEach(card => {\n card.addEventListener('mousemove', (e) => {\n const rect = card.getBoundingClientRect();\n const x = ((e.clientX - rect.left) \/ rect.width) * 100;\n const y = ((e.clientY - rect.top) \/ rect.height) * 100;\n card.style.setProperty('--mouse-x', x + '%');\n card.style.setProperty('--mouse-y', y + '%');\n });\n });\n})();\n\n\/* \u2500\u2500 PROGRESS BARS: animate on load \u2500\u2500 *\/\n(function () {\n setTimeout(() => {\n document.querySelectorAll('.progress-bar-fill[data-width]').forEach(bar => {\n bar.style.width = bar.dataset.width + '%';\n });\n }, 900);\n})();\n\n\/* \u2500\u2500 SPARKLES CANVAS \u2500\u2500 *\/\n(function () {\n const bar = document.getElementById('logos-bar');\n const canvas = document.getElementById('sparkles-canvas');\n if (!canvas) return;\n\n const ctx = canvas.getContext('2d');\n let W, H, particles = [];\n\n function resize() {\n W = canvas.width = bar.offsetWidth;\n H = canvas.height = bar.offsetHeight;\n }\n resize();\n window.addEventListener('resize', resize, { passive: true });\n\n function rand(min, max) { return Math.random() * (max - min) + min; }\n\n function spawn() {\n return {\n x: rand(0, W), y: rand(0, H),\n r: rand(0.8, 2.2),\n alpha: 0,\n maxAlpha: rand(0.3, 0.7),\n speed: rand(0.006, 0.018),\n phase: Math.random() < 0.5 ? 'in' : 'out'\n };\n }\n\n for (let i = 0; i < 36; i++) {\n const p = spawn();\n p.alpha = rand(0, p.maxAlpha);\n p.phase = 'out';\n particles.push(p);\n }\n\n function tick() {\n ctx.clearRect(0, 0, W, H);\n particles.forEach((p, i) => {\n if (p.phase === 'in') {\n p.alpha += p.speed;\n if (p.alpha >= p.maxAlpha) { p.alpha = p.maxAlpha; p.phase = 'out'; }\n } else {\n p.alpha -= p.speed * 0.6;\n if (p.alpha <= 0) { particles[i] = spawn(); return; }\n }\n ctx.beginPath();\n ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2);\n ctx.fillStyle = `rgba(96, 165, 250, ${p.alpha})`;\n ctx.fill();\n });\n requestAnimationFrame(tick);\n }\n tick();\n})();\n<\/script>\n<\/body>\n<\/html>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Trinix Company \u2014 Estrat\u00e9gia. Execu\u00e7\u00e3o. Escala. TRINIX COMPANY O que fazemos Como funciona Servi\u00e7os Para quem Fale com a Trinix Gest\u00e3o de Marketing e Vendas \u00b7 B2B Assumimos omarketing doseu neg\u00f3cio. Estrat\u00e9gia, execu\u00e7\u00e3o e gest\u00e3o integrada para empresas que superaram ag\u00eancias e freelancers. Resultado em escala \u2014 com m\u00e9todo. Fale com a Trinix Como funciona […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-9","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.7 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Home - Trinix<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/trinixcompany.com\/\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Home - Trinix\" \/>\n<meta property=\"og:description\" content=\"Trinix Company \u2014 Estrat\u00e9gia. Execu\u00e7\u00e3o. Escala. TRINIX COMPANY O que fazemos Como funciona Servi\u00e7os Para quem Fale com a Trinix Gest\u00e3o de Marketing e Vendas \u00b7 B2B Assumimos omarketing doseu neg\u00f3cio. Estrat\u00e9gia, execu\u00e7\u00e3o e gest\u00e3o integrada para empresas que superaram ag\u00eancias e freelancers. Resultado em escala \u2014 com m\u00e9todo. Fale com a Trinix Como funciona […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/trinixcompany.com\/\" \/>\n<meta property=\"og:site_name\" content=\"Trinix\" \/>\n<meta property=\"article:modified_time\" content=\"2026-05-28T20:15:49+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. tempo de leitura\" \/>\n\t<meta name=\"twitter:data1\" content=\"8 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/trinixcompany.com\\\/\",\"url\":\"https:\\\/\\\/trinixcompany.com\\\/\",\"name\":\"Home - Trinix\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/trinixcompany.com\\\/#website\"},\"datePublished\":\"2026-05-28T20:11:34+00:00\",\"dateModified\":\"2026-05-28T20:15:49+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/trinixcompany.com\\\/#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/trinixcompany.com\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/trinixcompany.com\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"In\u00edcio\",\"item\":\"https:\\\/\\\/trinixcompany.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Home\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/trinixcompany.com\\\/#website\",\"url\":\"https:\\\/\\\/trinixcompany.com\\\/\",\"name\":\"Trinix\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/trinixcompany.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-BR\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Home - Trinix","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/trinixcompany.com\/","og_locale":"pt_BR","og_type":"article","og_title":"Home - Trinix","og_description":"Trinix Company \u2014 Estrat\u00e9gia. Execu\u00e7\u00e3o. Escala. TRINIX COMPANY O que fazemos Como funciona Servi\u00e7os Para quem Fale com a Trinix Gest\u00e3o de Marketing e Vendas \u00b7 B2B Assumimos omarketing doseu neg\u00f3cio. Estrat\u00e9gia, execu\u00e7\u00e3o e gest\u00e3o integrada para empresas que superaram ag\u00eancias e freelancers. Resultado em escala \u2014 com m\u00e9todo. Fale com a Trinix Como funciona […]","og_url":"https:\/\/trinixcompany.com\/","og_site_name":"Trinix","article_modified_time":"2026-05-28T20:15:49+00:00","twitter_card":"summary_large_image","twitter_misc":{"Est. tempo de leitura":"8 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/trinixcompany.com\/","url":"https:\/\/trinixcompany.com\/","name":"Home - Trinix","isPartOf":{"@id":"https:\/\/trinixcompany.com\/#website"},"datePublished":"2026-05-28T20:11:34+00:00","dateModified":"2026-05-28T20:15:49+00:00","breadcrumb":{"@id":"https:\/\/trinixcompany.com\/#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/trinixcompany.com\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/trinixcompany.com\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"In\u00edcio","item":"https:\/\/trinixcompany.com\/"},{"@type":"ListItem","position":2,"name":"Home"}]},{"@type":"WebSite","@id":"https:\/\/trinixcompany.com\/#website","url":"https:\/\/trinixcompany.com\/","name":"Trinix","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/trinixcompany.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-BR"}]}},"_links":{"self":[{"href":"https:\/\/trinixcompany.com\/index.php?rest_route=\/wp\/v2\/pages\/9","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/trinixcompany.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/trinixcompany.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/trinixcompany.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/trinixcompany.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=9"}],"version-history":[{"count":10,"href":"https:\/\/trinixcompany.com\/index.php?rest_route=\/wp\/v2\/pages\/9\/revisions"}],"predecessor-version":[{"id":21,"href":"https:\/\/trinixcompany.com\/index.php?rest_route=\/wp\/v2\/pages\/9\/revisions\/21"}],"wp:attachment":[{"href":"https:\/\/trinixcompany.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=9"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}