/* ============================================ BIBlue LP — Hub de Registro de Contratos Veiculares Clean, guided, conversational ============================================ */ /* Fonts loaded via in for performance — Inter, DM Sans, JetBrains Mono */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } :root { --navy: #070B1A; --navy-mid: #0F1D3A; --navy-light: #132040; --primary: #2563EB; --primary-dark: #1E3A5F; --accent: #06B6D4; --accent-light: #67E8F9; --green: #10B981; --green-dark: #059669; --green-glow: rgba(16, 185, 129, 0.2); --cta: #2563EB; --cta-dark: #1D4ED8; --cta-glow: rgba(37, 99, 235, 0.25); --surface: #0A1628; --surface-light: #F8FAFC; --border: rgba(255,255,255,0.06); --border-hover: rgba(255,255,255,0.12); --text-bright: #F1F5F9; --text-dim: rgba(255,255,255,0.55); --text-muted: rgba(255,255,255,0.4); --text-dark: #0F172A; --text-dark-sub: #475569; --gradient-dark: linear-gradient(160deg, #020824 0%, #0A1744 35%, #102362 60%, #0C1A3E 100%); --font-display: 'DM Sans', sans-serif; --font-mono: 'JetBrains Mono', monospace; --font-body: 'DM Sans', sans-serif; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); } html { scroll-behavior: smooth; } /* ── Skip link (acessibilidade) ── */ .skip-link { position: absolute; top: -100%; left: 16px; z-index: 9999; padding: 12px 24px; background: var(--cta); color: #fff; font-weight: 700; border-radius: 0 0 12px 12px; transition: top 0.2s; } .skip-link:focus { top: 0; } body { font-family: var(--font-body); background: var(--navy); color: var(--text-bright); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } img { max-width: 100%; height: auto; display: block; } a { text-decoration: none; color: inherit; } button { font-family: inherit; cursor: pointer; border: none; background: none; } .container { max-width: 1200px; margin: 0 auto; padding: 0 40px; } .mono { font-family: var(--font-mono); } /* ── Section badge ── */ .section-badge { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; padding: 5px 14px; border-radius: 30px; margin-bottom: 18px; background: rgba(37, 99, 235, 0.08); border: 1px solid rgba(37, 99, 235, 0.18); color: var(--primary); } /* Dark sections get light badge */ .testimonials .section-badge, .cta-final .section-badge { background: rgba(103, 232, 249, 0.1); border-color: rgba(103, 232, 249, 0.2); color: var(--accent-light); } /* ── Scroll reveal ── */ .rv { opacity: 0; transform: translateY(24px); transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out); } .rv.vis { opacity: 1; transform: none; } /* ============================================ HERO ============================================ */ .hero { background: var(--gradient-dark); position: relative; overflow: hidden; min-height: 100vh; display: flex; flex-direction: column; } /* Animated grid background */ .hero::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px); background-size: 60px 60px; mask-image: radial-gradient(ellipse 70% 60% at 70% 40%, black, transparent); -webkit-mask-image: radial-gradient(ellipse 70% 60% at 70% 40%, black, transparent); animation: hero-grid-drift 25s linear infinite; } @keyframes hero-grid-drift { from { background-position: 0 0, 0 0; } to { background-position: 60px 60px, 60px 60px; } } /* Decorative shapes */ .hero-shape { position: absolute; border-radius: 50%; pointer-events: none; filter: blur(80px); } .hero-shape--1 { width: 400px; height: 400px; background: rgba(37, 99, 235, 0.1); top: -100px; right: -100px; animation: revealScale 1s var(--ease-out) 0.5s both; } .hero-shape--2 { width: 300px; height: 300px; background: rgba(6, 182, 212, 0.06); bottom: 10%; left: -80px; animation: revealScale 1s var(--ease-out) 0.8s both; } @keyframes revealUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } } @keyframes revealScale { from { opacity: 0; transform: scale(0.85); } to { opacity: 1; transform: none; } } .hero-topbar { display: flex; justify-content: space-between; align-items: center; padding: 24px 64px; position: relative; z-index: 2; } .hero-logo img { width: 120px; height: auto; } .hero-phone { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 0.8rem; color: var(--text-dim); border: 1px solid var(--border); padding: 8px 16px; border-radius: 30px; transition: border-color 0.3s, color 0.3s; } .hero-phone:hover { border-color: var(--border-hover); color: var(--text-bright); } .hero-body { flex: 1; display: flex; min-height: 0; position: relative; z-index: 1; } /* Hero left */ .hero-left { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 48px 48px 48px 64px; position: relative; z-index: 2; } .hero-badge { display: inline-flex; align-self: flex-start; align-items: center; gap: 8px; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cta); background: rgba(37, 99, 235, 0.08); border: 1px solid rgba(37, 99, 235, 0.2); border-radius: 30px; padding: 6px 16px; margin-bottom: 24px; animation: revealScale 0.6s var(--ease-out) 0.1s both; } .hero-badge-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--cta); animation: pulse-dot 2s ease-in-out infinite; } @keyframes pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } .hero-headline { font-family: 'Inter', sans-serif; font-size: clamp(2.4rem, 4.5vw, 3.8rem); font-weight: 300; line-height: 1.08; letter-spacing: -0.03em; color: #FFFFFF; margin-bottom: 20px; animation: revealUp 0.7s var(--ease-out) 0.2s both; } .hero-headline strong { font-weight: 800; } .hero-headline em { font-style: normal; font-weight: 800; color: var(--cta); text-decoration: underline; text-decoration-color: rgba(37, 99, 235, 0.3); text-underline-offset: 4px; } .hero-sub { font-size: 1.05rem; line-height: 1.7; color: var(--text-dim); margin-bottom: 32px; animation: revealUp 0.7s var(--ease-out) 0.3s both; } .hero-features { list-style: none; display: flex; flex-direction: column; gap: 10px; margin-bottom: 24px; animation: revealUp 0.7s var(--ease-out) 0.4s both; } .hero-features li { display: flex; align-items: center; gap: 10px; font-size: 0.92rem; color: rgba(255,255,255,0.75); line-height: 1.4; } .hero-features-icon { color: var(--cta); font-size: 0.7rem; flex-shrink: 0; } .hero-social-proof { display: flex; align-items: center; gap: 8px; font-size: 0.82rem; color: var(--text-muted); animation: revealUp 0.7s var(--ease-out) 0.5s both; } .hero-social-proof strong { color: rgba(255,255,255,0.7); } .hero-social-proof svg { flex-shrink: 0; } /* Hero right / form */ .hero-form-wrapper { flex: 1; position: relative; display: flex; align-items: center; justify-content: center; padding: 48px 64px 48px 48px; animation: revealScale 0.8s var(--ease-out) 0.4s both; } /* Decorative floating rectangles */ .hero-deco-rect { position: absolute; border-radius: 24px; z-index: 0; } .hero-deco-rect--1 { width: 320px; height: 420px; background: var(--primary); opacity: 0.15; transform: rotate(15deg); top: 10%; right: -5%; } .hero-deco-rect--2 { width: 220px; height: 280px; background: var(--accent); opacity: 0.08; border-radius: 20px; transform: rotate(-8deg); bottom: 2%; right: 5%; } .hero-form-card { width: 100%; max-width: 480px; background: rgba(15, 23, 42, 0.6); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border: 1px solid rgba(255,255,255,0.08); border-radius: 22px; overflow: hidden; position: relative; z-index: 2; box-shadow: 0 24px 80px rgba(0,0,0,0.4); } .hero-form-header { display: flex; align-items: center; gap: 14px; padding: 24px 28px; border-bottom: 1px solid var(--border); } .hero-form-header-icon { width: 40px; height: 40px; border-radius: 12px; background: rgba(37, 99, 235, 0.1); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .hero-form-header-text h3 { font-size: 1rem; font-weight: 600; color: var(--text-bright); line-height: 1.3; } .hero-form-header-text p { font-size: 0.78rem; color: var(--text-muted); margin-top: 2px; } .hero-form-body { padding: 24px 28px; } .form-fields { display: flex; flex-direction: column; gap: 16px; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .form-label { display: block; font-size: 0.65rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin-bottom: 6px; } .form-input, .form-select { width: 100%; background: rgba(255,255,255,0.04); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; font-family: var(--font-body); font-size: 0.9rem; color: var(--text-bright); transition: border-color 0.2s, background 0.2s; outline: none; } .form-input::placeholder { color: var(--text-muted); } .form-input:focus, .form-select:focus { border-color: var(--cta); background: rgba(37, 99, 235, 0.04); } .form-select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' fill='none' stroke='%23475569' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; cursor: pointer; } .form-select option { background: var(--navy-mid); color: var(--text-bright); } .form-submit { width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 14px; background: var(--cta); color: #fff; font-size: 0.95rem; font-weight: 600; border-radius: 14px; cursor: pointer; border: none; transition: background 0.2s, transform 0.15s; margin-top: 4px; } .form-submit:hover { background: var(--cta-dark); transform: translateY(-1px); } .form-submit svg { flex-shrink: 0; } /* Form error state */ .form-input--error, .form-input--error:focus { border-color: #EF4444 !important; background: rgba(239, 68, 68, 0.06) !important; animation: shake 0.4s ease; } @keyframes shake { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-4px); } 40%, 80% { transform: translateX(4px); } } /* Form loading state */ .form-submit-spinner { display: none; } .form-submit-loading { display: none; } .form-submit.loading .form-submit-icon { display: none; } .form-submit.loading .form-submit-text { display: none; } .form-submit.loading .form-submit-spinner { display: block; animation: spin 0.8s linear infinite; } .form-submit.loading .form-submit-loading { display: inline; } .form-submit.loading { opacity: 0.7; pointer-events: none; } @keyframes spin { to { transform: rotate(360deg); } } .form-footer { font-size: 0.7rem; color: var(--text-muted); text-align: center; margin-top: 14px; display: flex; align-items: center; justify-content: center; gap: 4px; } /* ============================================ SOCIAL PROOF — Stats + Partner logos unified ============================================ */ .social-proof { background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); position: relative; overflow: hidden; } .social-proof::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 50% 80% at 20% 50%, rgba(37, 99, 235, 0.06) 0%, transparent 70%), radial-gradient(ellipse 50% 80% at 80% 50%, rgba(6, 182, 212, 0.06) 0%, transparent 70%); pointer-events: none; } .social-proof-inner { max-width: 1140px; margin: 0 auto; padding: 0 32px; position: relative; z-index: 1; } /* Stats row */ .sp-stats { display: flex; align-items: center; justify-content: center; gap: 0; padding: 48px 0 40px; } .sp-stat { flex: 1; text-align: center; padding: 0 24px; } .sp-stat-value { display: block; font-family: 'Inter', sans-serif; font-size: clamp(2rem, 3.5vw, 2.8rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1; margin-bottom: 10px; background: linear-gradient(135deg, var(--cta) 0%, var(--accent) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .sp-stat-label { font-family: 'Inter', sans-serif; font-size: 0.82rem; color: var(--text-dim); line-height: 1.45; } .sp-stat-divider { width: 1px; height: 56px; background: linear-gradient(180deg, transparent, var(--border-hover), transparent); flex-shrink: 0; } /* Partner logos row */ .sp-bureaus { display: flex; align-items: center; gap: 24px; padding: 28px 0; border-top: 1px solid var(--border); } .sp-bureaus-label { font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); white-space: nowrap; flex-shrink: 0; } .sp-bureaus-track { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .sp-bureau-chip { font-family: var(--font-mono); font-size: 0.68rem; font-weight: 500; color: var(--text-dim); background: rgba(255,255,255,0.04); border: 1px solid var(--border); padding: 8px 14px; border-radius: 10px; transition: all 0.3s; } .sp-bureau-chip:hover { border-color: var(--border-hover); background: rgba(255,255,255,0.08); } /* ============================================ NARRATIVE — Hoje vs. Com BIBlue (WHITE) ============================================ */ .narrative { position: relative; background: #FFFFFF; overflow: hidden; } .narrative-wrapper { position: relative; min-height: 700px; } .narrative-bg { position: absolute; top: 0; right: 0; width: 42%; height: 100%; z-index: 0; } .narrative-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center center; display: block; } .narrative-content { position: relative; z-index: 1; max-width: 1200px; margin: 0 auto; padding: 80px 40px 72px; } .narrative-text { width: 52%; margin-bottom: 56px; } .narrative-text h2 { font-family: 'Inter', sans-serif; font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 400; line-height: 1.15; letter-spacing: -0.025em; margin-bottom: 18px; color: var(--text-dark); } .narrative-text h2 strong { font-weight: 800; } .narrative-text p { font-size: 1.05rem; line-height: 1.8; color: var(--text-dark-sub); margin: 0; } .narrative-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .narrative-card { padding: 0; background: rgba(255,255,255,0.45); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); border: 1px solid rgba(255,255,255,0.6); border-radius: 16px; box-shadow: 0 4px 24px rgba(15,23,42,0.06), inset 0 1px 0 rgba(255,255,255,0.7); overflow: hidden; transition: all 0.3s var(--ease-out); } .narrative-card:hover { background: rgba(255,255,255,0.65); box-shadow: 0 8px 32px rgba(15,23,42,0.1), inset 0 1px 0 rgba(255,255,255,0.8); transform: translateY(-4px); } .narrative-before { padding: 20px 22px; border-bottom: 1px solid rgba(226,232,240,0.6); background: rgba(248,250,252,0.5); } .narrative-after { padding: 20px 22px; } .narrative-before p, .narrative-after p { font-size: 0.85rem; line-height: 1.6; color: #64748B; margin-top: 8px; } .narrative-before p { color: var(--text-dark); } .narrative-before strong { color: #C2410C; } .narrative-after p { color: var(--text-dark); } .narrative-after strong { color: var(--primary); } .narrative-tag { display: inline-block; font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; padding: 5px 14px; border-radius: 8px; } .narrative-tag--before { color: #C2410C; background: #FFF7ED; } .narrative-tag--after { color: var(--primary); background: rgba(37, 99, 235, 0.1); } /* ============================================ STEPS — Como funciona (GRAY, photo + steps) ============================================ */ .steps { padding: 100px 0; background: #F8FAFC; } .steps-header { text-align: center; margin-bottom: 56px; } .steps-header h2 { font-family: 'Inter', sans-serif; font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 400; line-height: 1.15; letter-spacing: -0.025em; margin-bottom: 18px; color: var(--text-dark); } .steps-header h2 strong { font-weight: 800; } .steps-header p { font-size: 1.05rem; color: var(--text-dark-sub); max-width: 520px; margin: 0 auto; } .steps-layout { display: grid; grid-template-columns: 0.8fr 1fr; gap: 120px; align-items: stretch; } /* Visual side — photo + floating cards */ .steps-visual { position: relative; border-radius: 22px; overflow: visible; margin-top: -5%; margin-bottom: -5%; box-shadow: 0 12px 40px rgba(0,0,0,0.1); } .steps-photo { width: 100%; height: 100%; border-radius: 22px; object-fit: cover; display: block; } /* Flow cards (organogram) */ .steps-flow-card { position: absolute; background: rgba(255,255,255,0.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid #E2E8F0; border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,0.12); padding: 10px 14px; display: flex; align-items: center; gap: 10px; z-index: 5; animation: float 6s ease-in-out infinite; } .steps-flow-card--1 { top: 8%; left: -8%; animation-delay: 0s; } .steps-flow-card--2 { top: 38%; right: -12%; animation-delay: -1.5s; } .steps-flow-card--3 { bottom: 32%; left: -6%; animation-delay: -3s; } .steps-flow-card--4 { bottom: 5%; right: -8%; animation-delay: -4.5s; } @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } .steps-flow-icon { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .steps-flow-icon--blue { background: var(--primary); } .steps-flow-icon--green { background: var(--green); } .steps-flow-icon--cyan { background: var(--accent); } .steps-flow-title { display: block; font-size: 0.78rem; font-weight: 700; color: var(--text-dark); line-height: 1.2; } .steps-flow-sub { display: block; font-size: 0.65rem; color: #64748B; margin-top: 1px; } .steps-flow-lines { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 4; pointer-events: none; } /* Content side — 3 steps stacked */ .steps-content { display: flex; flex-direction: column; gap: 32px; } .step-item { display: flex; gap: 18px; align-items: flex-start; } .step-icon-wrap { width: 48px; height: 48px; border-radius: 14px; background: rgba(37, 99, 235, 0.1); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .step-item h3 { font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; margin-bottom: 8px; color: var(--text-dark); } .step-item p { font-size: 0.92rem; line-height: 1.65; color: var(--text-dark-sub); } .steps-bottom { margin-top: 8px; padding-top: 28px; border-top: 1px solid #E2E8F0; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; } .steps-pricing { display: flex; gap: 24px; flex-wrap: wrap; } .steps-pricing-item { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; color: var(--text-dark-sub); } .steps-cta-btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 28px; background: linear-gradient(135deg, #2563EB, #1D4ED8); color: #FFFFFF; font-family: 'Inter', sans-serif; font-size: 0.9rem; font-weight: 700; border-radius: 12px; transition: all 0.3s var(--ease-out); box-shadow: 0 4px 16px rgba(37, 99, 235, 0.25); text-decoration: none; scroll-behavior: smooth; } .steps-cta-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(37, 99, 235, 0.4); background: linear-gradient(135deg, #3B82F6, #2563EB); } .steps-cta-btn svg { transition: transform 0.3s var(--ease-out); } .steps-cta-btn:hover svg { transform: translateY(-2px); } /* ============================================ COMPARISON — 2 Column Cards (site pattern) ============================================ */ .comparison { padding: 100px 0; background: var(--gradient-dark); position: relative; overflow: hidden; } .comparison::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(99, 102, 241, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(99, 102, 241, 0.03) 1px, transparent 1px); background-size: 40px 40px; -webkit-mask-image: radial-gradient(ellipse 60% 50% at 50% 50%, black, transparent); mask-image: radial-gradient(ellipse 60% 50% at 50% 50%, black, transparent); } .comparison .section-badge { background: rgba(103, 232, 249, 0.1); border-color: rgba(103, 232, 249, 0.2); color: var(--accent-light); } .comparison-header { text-align: center; max-width: 680px; margin: 0 auto 48px; position: relative; } .comparison-header h2 { font-family: 'Inter', sans-serif; font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 400; line-height: 1.15; letter-spacing: -0.025em; color: var(--text-bright); margin-bottom: 12px; } .comparison-header h2 strong { font-weight: 800; } .comparison-header p { font-size: 15px; color: rgba(255,255,255,0.5); line-height: 1.7; } .comparison-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; position: relative; } .comparison-card { border-radius: 22px; padding: 32px 28px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .comparison-market { background: rgba(239, 68, 68, 0.06); border: 1px solid rgba(239, 68, 68, 0.12); } .comparison-biblue { background: rgba(37, 99, 235, 0.06); border: 1px solid rgba(37, 99, 235, 0.12); } .comparison-card-header { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; padding-bottom: 16px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); } .comparison-card-header h3 { font-family: 'Inter', sans-serif; font-size: 17px; font-weight: 700; color: #fff; letter-spacing: -0.01em; } .comparison-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; } .comparison-list li { font-size: 14px; line-height: 1.6; padding-left: 28px; position: relative; } /* Negative (red) */ .comparison-list-negative li { color: rgba(255, 255, 255, 0.5); } .comparison-list-negative li::before { content: ''; position: absolute; left: 0; top: 4px; width: 16px; height: 16px; border-radius: 50%; background: rgba(239, 68, 68, 0.15); border: 1.5px solid rgba(239, 68, 68, 0.4); } .comparison-list-negative li::after { content: '\00d7'; position: absolute; left: 3.5px; top: 1px; font-size: 13px; font-weight: 700; color: #EF4444; line-height: 1; } /* Positive (blue) */ .comparison-list-positive li { color: rgba(255, 255, 255, 0.7); } .comparison-list-positive li strong { color: rgba(255, 255, 255, 0.9); } .comparison-list-positive li::before { content: ''; position: absolute; left: 0; top: 4px; width: 16px; height: 16px; border-radius: 50%; background: rgba(37, 99, 235, 0.15); border: 1.5px solid rgba(37, 99, 235, 0.4); } .comparison-list-positive li::after { content: '\2713'; position: absolute; left: 3px; top: 2px; font-size: 11px; font-weight: 700; color: #3B82F6; line-height: 1; } /* ============================================ NUMBERS SHOWCASE ============================================ */ .numbers-showcase { position: relative; min-height: 620px; display: flex; align-items: flex-end; overflow: hidden; background: var(--navy); } .numbers-showcase-bg { position: absolute; inset: 0; z-index: 0; } .numbers-showcase-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center top; } .numbers-showcase-overlay { position: absolute; inset: 0; background: linear-gradient(to right, rgba(15, 15, 35, 0.88) 0%, rgba(15, 15, 35, 0.55) 45%, rgba(15, 15, 35, 0.1) 75%, rgba(15, 15, 35, 0.05) 100%), linear-gradient(to top, rgba(15, 15, 35, 0.9) 0%, rgba(15, 15, 35, 0.3) 50%, transparent 100%); } .numbers-showcase-inner { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: flex-end; padding-top: 80px; padding-bottom: 56px; gap: 40px; } .numbers-showcase-content { max-width: 640px; } .numbers-showcase-content h2 { font-family: 'Inter', sans-serif; font-size: 2.5rem; font-weight: 400; line-height: 1.15; letter-spacing: -0.025em; color: #fff; margin: 0 0 16px; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.3); } .numbers-showcase-content h2 strong { font-weight: 800; } .numbers-showcase-content p { font-size: 16px; line-height: 1.7; color: rgba(255, 255, 255, 0.75); margin: 0; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4); } .numbers-showcase-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .numbers-showcase-card { position: relative; background: rgba(255, 255, 255, 0.08); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 22px; padding: 32px 24px; display: flex; flex-direction: column; gap: 12px; transition: background 0.3s, border-color 0.3s; } .numbers-showcase-card:hover { background: rgba(255, 255, 255, 0.13); border-color: rgba(255, 255, 255, 0.22); } .numbers-showcase-card::before { content: ''; position: absolute; top: 0; left: 24px; right: 24px; height: 3px; border-radius: 0 0 3px 3px; background: linear-gradient(90deg, var(--primary), var(--accent)); opacity: 0.6; transition: opacity 0.3s; } .numbers-showcase-card:hover::before { opacity: 1; } .numbers-showcase-value { font-family: 'Inter', sans-serif; font-size: 2.75rem; font-weight: 800; line-height: 1; color: #fff; letter-spacing: -0.02em; } .numbers-showcase-label { font-size: 14px; line-height: 1.5; color: rgba(255, 255, 255, 0.6); } /* ============================================ FEATURES — O que a plataforma reúne (WHITE) ============================================ */ .features { padding: 80px 0 100px; background: #FFFFFF; border-top: 1px solid #E2E8F0; border-bottom: 1px solid #E2E8F0; } .features-header { text-align: center; margin-bottom: 48px; } .features-header h2 { font-family: 'Inter', sans-serif; font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 400; line-height: 1.15; letter-spacing: -0.025em; color: var(--text-dark); margin-bottom: 16px; } .features-header h2 strong { font-weight: 800; } .features-header p { font-size: 1.05rem; color: var(--text-dark-sub); max-width: 720px; margin: 0 auto; line-height: 1.7; } .features-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .features-card { background: #FFFFFF; border: 1px solid #E2E8F0; border-radius: 18px; padding: 32px 28px; transition: border-color 0.3s, box-shadow 0.3s; } .features-card:hover { border-color: #CBD5E1; box-shadow: 0 4px 16px rgba(0,0,0,0.06); } .features-card-badge { display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; background: #F8FAFC; border: 1px solid #E2E8F0; border-radius: 30px; margin-bottom: 20px; } .features-card-icon { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .features-card-icon--blue { background: rgba(37, 99, 235, 0.1); color: var(--primary); } .features-card-icon--green { background: rgba(16, 185, 129, 0.1); color: var(--green); } .features-card-icon--cyan { background: rgba(6, 182, 212, 0.1); color: var(--accent); } .features-card-icon--purple { background: rgba(139, 92, 246, 0.1); color: #8B5CF6; } .features-card-label { font-family: 'Inter', sans-serif; font-size: 0.82rem; font-weight: 600; } .features-card-label--blue { color: var(--primary); } .features-card-label--green { color: var(--green-dark); } .features-card-label--cyan { color: #0891B2; } .features-card-label--purple { color: #7C3AED; } .features-card h3 { font-family: 'Inter', sans-serif; font-size: 1.05rem; font-weight: 700; line-height: 1.35; color: var(--text-dark); margin-bottom: 12px; } .features-card p { font-size: 0.88rem; line-height: 1.65; color: var(--text-dark-sub); } /* ============================================ SEGMENTS — Para Quem ============================================ */ .segments { padding: 100px 0; background: #F8FAFC; position: relative; } .segments::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle at 20% 30%, rgba(37, 99, 235, 0.03) 0%, transparent 50%), radial-gradient(circle at 80% 70%, rgba(6, 182, 212, 0.03) 0%, transparent 50%); pointer-events: none; } .segments-header { text-align: center; margin-bottom: 48px; } .segments-header h2 { font-family: 'Inter', sans-serif; font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 400; line-height: 1.15; letter-spacing: -0.025em; color: var(--text-dark); margin-bottom: 16px; } .segments-header h2 strong { font-weight: 800; } .segments-header p { font-size: 1.05rem; color: var(--text-dark-sub); max-width: 640px; margin: 0 auto; line-height: 1.7; } .segments-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; } .segment-card { background: #FFFFFF; border: 1px solid #E2E8F0; border-radius: 18px; padding: 36px 32px; transition: all 0.35s var(--ease-out); position: relative; overflow: hidden; } .segment-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, transparent, var(--primary), transparent); opacity: 0; transition: opacity 0.35s; } .segment-card:hover { border-color: rgba(37, 99, 235, 0.15); box-shadow: 0 8px 32px rgba(37, 99, 235, 0.08), 0 2px 8px rgba(0,0,0,0.04); transform: translateY(-4px); } .segment-card:hover::before { opacity: 1; } .segment-card:nth-child(2):hover { border-color: rgba(16, 185, 129, 0.15); box-shadow: 0 8px 32px rgba(16, 185, 129, 0.08), 0 2px 8px rgba(0,0,0,0.04); } .segment-card:nth-child(2)::before { background: linear-gradient(90deg, transparent, var(--green), transparent); } .segment-card:nth-child(3):hover { border-color: rgba(6, 182, 212, 0.15); box-shadow: 0 8px 32px rgba(6, 182, 212, 0.08), 0 2px 8px rgba(0,0,0,0.04); } .segment-card:nth-child(3)::before { background: linear-gradient(90deg, transparent, var(--accent), transparent); } .segment-card:nth-child(4):hover { border-color: rgba(139, 92, 246, 0.15); box-shadow: 0 8px 32px rgba(139, 92, 246, 0.08), 0 2px 8px rgba(0,0,0,0.04); } .segment-card:nth-child(4)::before { background: linear-gradient(90deg, transparent, #8B5CF6, transparent); } .segment-icon { width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; transition: transform 0.3s, box-shadow 0.3s; } .segment-card:hover .segment-icon { transform: scale(1.08); } .segment-icon--blue { background: rgba(37, 99, 235, 0.08); color: var(--primary); box-shadow: 0 4px 12px rgba(37,99,235,0.1); } .segment-icon--green { background: rgba(16, 185, 129, 0.08); color: var(--green); box-shadow: 0 4px 12px rgba(16,185,129,0.1); } .segment-icon--cyan { background: rgba(6, 182, 212, 0.08); color: var(--accent); box-shadow: 0 4px 12px rgba(6,182,212,0.1); } .segment-icon--purple { background: rgba(139, 92, 246, 0.08); color: #8B5CF6; box-shadow: 0 4px 12px rgba(139,92,246,0.1); } .segment-card h3 { font-family: 'Inter', sans-serif; font-size: 1.12rem; font-weight: 700; color: var(--text-dark); margin-bottom: 10px; letter-spacing: -0.01em; } .segment-card p { font-size: 0.88rem; line-height: 1.7; color: var(--text-dark-sub); margin-bottom: 18px; } .segment-tags { list-style: none; display: flex; gap: 8px; flex-wrap: wrap; } .segment-tags li { font-family: var(--font-mono); font-size: 0.65rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; padding: 5px 14px; border-radius: 20px; background: #F1F5F9; color: var(--text-dark-sub); border: 1px solid #E2E8F0; transition: all 0.2s; } .segment-card:hover .segment-tags li { background: rgba(37, 99, 235, 0.06); border-color: rgba(37, 99, 235, 0.12); color: var(--primary); } .segment-card:nth-child(2):hover .segment-tags li { background: rgba(16,185,129,0.06); border-color: rgba(16,185,129,0.12); color: var(--green-dark); } .segment-card:nth-child(3):hover .segment-tags li { background: rgba(6,182,212,0.06); border-color: rgba(6,182,212,0.12); color: #0891B2; } .segment-card:nth-child(4):hover .segment-tags li { background: rgba(139,92,246,0.06); border-color: rgba(139,92,246,0.12); color: #7C3AED; } /* ============================================ CTA INTERMEDIÁRIO ============================================ */ .cta-mid { padding: 100px 0; background: var(--gradient-dark); position: relative; overflow: hidden; } .cta-mid::before { content: ''; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(2,8,36,0.95) 0%, rgba(10,23,68,0.9) 35%, rgba(16,35,98,0.85) 60%, rgba(12,26,62,0.95) 100%); z-index: 0; } .cta-mid::after { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px); background-size: 60px 60px; mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black, transparent); -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black, transparent); animation: hero-grid-drift 25s linear infinite; z-index: 0; } .cta-mid-content { text-align: center; max-width: 580px; margin: 0 auto; position: relative; z-index: 1; } .cta-mid-content h2 { font-family: 'Inter', sans-serif; font-size: clamp(1.6rem, 2.8vw, 2.2rem); font-weight: 400; line-height: 1.2; letter-spacing: -0.025em; color: #FFFFFF; margin-bottom: 14px; } .cta-mid-content h2 strong { font-weight: 800; } .cta-mid-content p { font-size: 1rem; color: rgba(255,255,255,0.6); margin-bottom: 32px; line-height: 1.7; } .cta-mid-btn { display: inline-flex; align-items: center; gap: 10px; padding: 16px 32px; background: linear-gradient(135deg, #2563EB, #1D4ED8); color: #FFFFFF; font-family: 'Inter', sans-serif; font-size: 0.95rem; font-weight: 700; border-radius: 14px; transition: all 0.3s var(--ease-out); box-shadow: 0 4px 20px rgba(37, 99, 235, 0.3); border: 1px solid rgba(255,255,255,0.15); } .cta-mid-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 32px rgba(37, 99, 235, 0.45); background: linear-gradient(135deg, #3B82F6, #2563EB); } /* ============================================ TESTIMONIALS (DARK with grid) ============================================ */ .testimonials { padding: 100px 0; background: var(--gradient-dark); position: relative; overflow: hidden; } .testimonials::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px); background-size: 60px 60px; mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, black, transparent); -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, black, transparent); animation: hero-grid-drift 25s linear infinite; } .testimonials-header { text-align: center; margin-bottom: 48px; position: relative; } .testimonials-header h2 { font-family: 'Inter', sans-serif; font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 400; line-height: 1.15; letter-spacing: -0.025em; color: var(--text-bright); } .testimonials-header h2 strong { font-weight: 800; } .testimonials-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; position: relative; } .testimonial-card { background: rgba(255,255,255,0.03); border: 1px solid var(--border); border-radius: 18px; padding: 32px 28px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: border-color 0.3s; } .testimonial-card:hover { border-color: var(--border-hover); } .testimonial-card blockquote { font-size: 0.92rem; line-height: 1.7; color: var(--text-dim); font-style: italic; margin-bottom: 20px; } .testimonial-author strong { display: block; font-size: 0.85rem; color: var(--text-bright); font-weight: 600; } .testimonial-author span { font-size: 0.75rem; color: var(--text-muted); } /* ============================================ INFRA — Segurança e Compliance ============================================ */ .infra { padding: 100px 0; background: var(--gradient-dark); position: relative; overflow: hidden; } .infra::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px); background-size: 60px 60px; mask-image: radial-gradient(ellipse 60% 60% at 50% 50%, black, transparent); -webkit-mask-image: radial-gradient(ellipse 60% 60% at 50% 50%, black, transparent); animation: hero-grid-drift 25s linear infinite; } .infra-header { text-align: center; margin-bottom: 48px; position: relative; } .infra-header h2 { font-family: 'Inter', sans-serif; font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 400; line-height: 1.15; letter-spacing: -0.025em; color: var(--text-bright); margin-bottom: 16px; } .infra-header h2 strong { font-weight: 800; } .infra-header p { font-size: 1.05rem; color: var(--text-dim); max-width: 600px; margin: 0 auto; line-height: 1.7; } .infra .section-badge { background: rgba(103, 232, 249, 0.1); border-color: rgba(103, 232, 249, 0.2); color: var(--accent-light); } .infra-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; position: relative; } .infra-card { background: rgba(255,255,255,0.03); border: 1px solid var(--border); border-radius: 18px; padding: 36px 30px; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: all 0.35s var(--ease-out); position: relative; overflow: hidden; } .infra-card::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--accent-light), transparent); opacity: 0; transition: opacity 0.35s; } .infra-card:hover { border-color: rgba(103, 232, 249, 0.15); background: rgba(255,255,255,0.06); transform: translateY(-4px); box-shadow: 0 8px 32px rgba(6, 182, 212, 0.08); } .infra-card:hover::after { opacity: 1; } .infra-card-icon { width: 52px; height: 52px; border-radius: 14px; background: rgba(6, 182, 212, 0.08); color: var(--accent-light); display: flex; align-items: center; justify-content: center; margin-bottom: 20px; border: 1px solid rgba(103, 232, 249, 0.1); transition: transform 0.3s, box-shadow 0.3s; } .infra-card:hover .infra-card-icon { transform: scale(1.08); box-shadow: 0 4px 16px rgba(6, 182, 212, 0.15); } .infra-card h3 { font-family: 'Inter', sans-serif; font-size: 1.08rem; font-weight: 700; color: var(--text-bright); margin-bottom: 10px; letter-spacing: -0.01em; } .infra-card p { font-size: 0.88rem; line-height: 1.7; color: var(--text-dim); } /* ============================================ FAQ DARK ============================================ */ .faq-dark { background: #1C1C1E; padding: 80px 0; } .faq-dark-inner { max-width: 900px; margin: 0 auto; } .faq-dark h2 { font-family: 'Inter', sans-serif; font-size: 2.25rem; font-weight: 400; color: #fff; margin: 0 0 48px; letter-spacing: -0.02em; } .faq-dark h2 strong { font-weight: 800; } .faq-dark-list { list-style: none; padding: 0; margin: 0; } .faq-dark-item { border-top: 1px solid rgba(255, 255, 255, 0.08); } .faq-dark-item:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .faq-dark-question { width: 100%; background: none; border: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px 0; font-family: 'Inter', sans-serif; font-size: 17px; font-weight: 500; color: rgba(255, 255, 255, 0.7); text-align: left; transition: color 0.3s; } .faq-dark-question:hover { color: #fff; } .faq-dark-toggle { flex-shrink: 0; width: 40px; height: 40px; border-radius: 10px; background: #2196f3; display: flex; align-items: center; justify-content: center; transition: background 0.3s; } .faq-dark-toggle svg { width: 18px; height: 18px; color: #fff; transition: transform 0.4s var(--ease-out); } .faq-dark-item.active .faq-dark-toggle { background: var(--primary); } .faq-dark-item.active .faq-dark-toggle svg { transform: rotate(45deg); } .faq-dark-answer { max-height: 0; overflow: hidden; transition: max-height 0.4s var(--ease-out); } .faq-dark-answer-inner { padding: 0 56px 28px 0; font-size: 15px; line-height: 1.75; color: rgba(255, 255, 255, 0.5); } /* ============================================ CTA FINAL (BLUE GRADIENT) ============================================ */ .cta-final { padding: 100px 0; position: relative; overflow: hidden; background: var(--gradient-dark); } .cta-final::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px); background-size: 60px 60px; mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, black, transparent); -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, black, transparent); animation: hero-grid-drift 25s linear infinite; } .cta-final-content { text-align: center; max-width: 560px; margin: 0 auto; position: relative; z-index: 1; } .cta-final-content h2 { font-family: 'Inter', sans-serif; font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 400; line-height: 1.15; letter-spacing: -0.025em; margin-bottom: 16px; color: #FFFFFF; } .cta-final-content h2 strong { font-weight: 800; } .cta-final-content p { font-size: 1rem; line-height: 1.7; color: rgba(255,255,255,0.7); margin-bottom: 32px; } .cta-final-buttons { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; } .cta-btn { display: inline-flex; align-items: center; gap: 8px; padding: 14px 28px; font-size: 0.92rem; font-weight: 600; border-radius: 14px; transition: all 0.2s; } .cta-btn--primary { background: #FFFFFF; color: #1E3A8A; font-weight: 700; } .cta-btn--primary:hover { background: #EFF6FF; transform: translateY(-1px); box-shadow: 0 8px 24px rgba(0,0,0,0.2); } .cta-btn--ghost { border: 1px solid rgba(255,255,255,0.25); color: rgba(255,255,255,0.8); } .cta-btn--ghost:hover { border-color: rgba(255,255,255,0.5); color: #FFFFFF; } .cta-final-email { margin-top: 20px; font-size: 0.82rem; color: rgba(255,255,255,0.4); } .cta-final-email a { color: rgba(255,255,255,0.65); text-decoration: underline; text-underline-offset: 3px; transition: color 0.2s; } .cta-final-email a:hover { color: #fff; } /* ============================================ FOOTER ============================================ */ .footer { padding: 32px 0; border-top: 1px solid var(--border); background: var(--navy); } .footer .container { display: flex; flex-direction: column; gap: 20px; } .footer-top { display: flex; justify-content: space-between; align-items: center; } .footer-top img { height: 28px; width: auto; opacity: 0.5; } .footer-links { display: flex; gap: 24px; } .footer-links a { font-size: 0.75rem; color: var(--text-muted); transition: color 0.2s; } .footer-links a:hover { color: var(--text-dim); } .footer-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 16px; border-top: 1px solid var(--border); } .footer-bottom p { font-size: 0.7rem; color: var(--text-muted); } /* ============================================ STICKY MOBILE BAR ============================================ */ .sticky-bar { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 100; padding: 10px 16px; background: rgba(7, 11, 26, 0.95); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-top: 1px solid var(--border); gap: 8px; } .sticky-bar-btn { display: flex; align-items: center; justify-content: center; gap: 6px; flex: 1; padding: 12px 8px; background: var(--cta); color: #fff; font-size: 0.82rem; font-weight: 600; border-radius: 12px; } .sticky-bar-btn--form { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15); } /* ============================================ RESPONSIVE — TABLET ============================================ */ @media (max-width: 1080px) { .container { padding: 0 28px; } .hero-topbar { padding: 24px 28px; } .hero-left { padding: 32px 28px 32px 28px; } .hero-form-wrapper { padding: 32px 28px 32px 28px; } .hero-headline { font-size: clamp(2rem, 3.5vw, 3rem); } .numbers-showcase { min-height: 540px; } .numbers-showcase-content h2 { font-size: 2rem; } .numbers-showcase-cards { grid-template-columns: repeat(2, 1fr); } .numbers-showcase-value { font-size: 2.25rem; } .hero-shape { display: none; } .hero-deco-rect { display: none; } .narrative-bg { width: 38%; } .narrative-text { width: 55%; } .narrative-cards { gap: 14px; } .narrative-card { padding: 0; } .narrative-before, .narrative-after { padding: 16px 18px; } .comparison-grid { gap: 16px; } .comparison-card { padding: 28px 24px; } .segments-grid { gap: 16px; } .infra-grid { grid-template-columns: repeat(2, 1fr); } } /* ============================================ RESPONSIVE — MOBILE ============================================ */ @media (max-width: 768px) { .container { padding: 0 20px; } .sticky-bar { display: flex; } .hero { min-height: auto; } .hero-body { flex-direction: column; } .hero-left { padding: 20px 20px 16px; } .hero-form-wrapper { padding: 0 20px 32px; } .hero-headline { font-size: 2.5rem; } .hero-sub { font-size: 0.95rem; } .hero-features { gap: 8px; } .hero-features li { font-size: 1rem; } .hero-topbar { padding: 24px 20px; } .hero-phone { display: none; } .hero-shape { display: none; } .hero-deco-rect { display: none; } .hero-form-card { max-width: 100%; } .hero-form-body { padding: 20px; } .form-row { grid-template-columns: 1fr; } .steps-cta-btn { width: 100%; justify-content: center; } .narrative-wrapper { min-height: auto; } .narrative-bg { position: relative; width: 100%; height: 280px; } .narrative-content { padding: 48px 20px 56px; } .narrative-text { width: 100%; margin-bottom: 36px; } .narrative-text h2 { font-size: 1.8rem; } .narrative-cards { grid-template-columns: 1fr; gap: 12px; } .narrative-card { backdrop-filter: none; -webkit-backdrop-filter: none; background: #fff; border-color: #E2E8F0; } .numbers-showcase { min-height: 480px; } .numbers-showcase-inner { padding-top: 60px; padding-bottom: 32px; gap: 28px; } .numbers-showcase-content h2 { font-size: 1.6rem; } .numbers-showcase-content p { font-size: 14px; } .numbers-showcase-cards { grid-template-columns: 1fr 1fr; gap: 12px; } .numbers-showcase-card { padding: 20px 16px; gap: 10px; } .numbers-showcase-value { font-size: 1.75rem; } .numbers-showcase-label { font-size: 13px; } .steps { padding: 64px 0; } .steps-layout { grid-template-columns: 1fr; gap: 40px; } .steps-flow-card { display: none; } .steps-flow-lines { display: none; } .steps-pricing { flex-direction: column; gap: 12px; } .sp-stats { flex-wrap: wrap; gap: 0; padding: 36px 0 28px; } .sp-stat { flex: 1 1 45%; padding: 16px 12px; } .sp-stat-value { font-size: 1.8rem; } .sp-stat-divider { display: none; } .sp-bureaus { flex-direction: column; align-items: flex-start; gap: 14px; padding: 20px 0; } .sp-bureaus-track { gap: 8px; } .features { padding: 64px 0; } .features-cards { grid-template-columns: 1fr; gap: 16px; } .comparison { padding: 64px 0; } .comparison-grid { grid-template-columns: 1fr; gap: 16px; } .comparison-card { padding: 28px 24px; } .comparison-list li { font-size: 0.85rem; padding-left: 36px; } .segments { padding: 64px 0; } .segments-grid { grid-template-columns: 1fr; gap: 16px; } .cta-mid { padding: 48px 0; } .infra { padding: 64px 0; } .infra-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; } .testimonials { padding: 64px 0; } .testimonials-grid { grid-template-columns: 1fr; } .faq-dark { padding: 48px 20px; } .faq-dark h2 { font-size: 1.5rem; margin-bottom: 28px; } .faq-dark-question { font-size: 15px; padding: 22px 0; gap: 16px; } .faq-dark-toggle { width: 36px; height: 36px; border-radius: 8px; } .faq-dark-toggle svg { width: 16px; height: 16px; } .faq-dark-answer-inner { padding: 0 48px 22px 0; font-size: 14px; } .cta-final { padding: 64px 0; } .cta-final-buttons { flex-direction: column; align-items: center; } .cta-btn { width: 100%; justify-content: center; } .footer-top { flex-direction: column; gap: 12px; align-items: center; } .footer-links { gap: 16px; } .footer-bottom { flex-direction: column; gap: 4px; text-align: center; } body { padding-bottom: 72px; } } /* ═══════════════════════════════════════════════════════════════ CRO OVERLAY — Pattern interrupt LARANJA (#F97316) Atualizado em 2026-04-17 — troca de green → hot orange pra maior impacto Ver docs/04-auditorias/2026-04-cro-lp-financeiras.md ═══════════════════════════════════════════════════════════════ */ :root { /* Cor de ATENÇÃO — laranja alto-impacto pra CTA de conversão. Benchmark B2B SaaS (HubSpot, ClickUp, Amazon) — +15-25% lift vs cor institucional */ --cta-hot: #F97316; --cta-hot-dark: #EA580C; --cta-hot-darker: #C2410C; --cta-hot-light: #FED7AA; --cta-hot-glow: 0 4px 20px rgba(249, 115, 22, 0.45); --cta-hot-glow-hover: 0 10px 40px rgba(249, 115, 22, 0.65); /* Verde reservado pra estados de sucesso (checkmark, "aprovado"). Não é cor de CTA. */ --cta-green: #10B981; --cta-green-dark: #059669; --cta-green-light: #A7F3D0; } /* ──────── CTA primário LARANJA (pattern interrupt) ──────── */ .form-submit, .cta-btn--primary.cta-action, .steps-cta-btn.cta-action, .cta-mid-btn.cta-action, .cta-band-btn { background: linear-gradient(135deg, var(--cta-hot), var(--cta-hot-dark)) !important; color: #fff !important; box-shadow: var(--cta-hot-glow) !important; border: none !important; transition: transform .2s ease, box-shadow .25s ease, background .2s ease !important; } .form-submit:hover:not(:disabled), .cta-btn--primary.cta-action:hover, .steps-cta-btn.cta-action:hover, .cta-mid-btn.cta-action:hover, .cta-band-btn:hover { background: linear-gradient(135deg, var(--cta-hot), var(--cta-hot-darker)) !important; box-shadow: var(--cta-hot-glow-hover) !important; transform: translateY(-2px) !important; } /* Pulse marcante no submit — laranja pede atenção */ @keyframes ctaPulse { 0%, 100% { box-shadow: 0 4px 20px rgba(249, 115, 22, 0.45); } 50% { box-shadow: 0 6px 36px rgba(249, 115, 22, 0.85); } } .form-submit:not(:disabled) { animation: ctaPulse 2.4s ease-in-out infinite; } .form-submit:hover:not(:disabled) { animation: none; } .form-submit.loading { animation: none; opacity: .75; } @media (prefers-reduced-motion: reduce) { .form-submit { animation: none !important; } .desktop-fab { animation: none !important; } .desktop-fab, .exit-modal-card { transition: opacity .01ms !important; } } /* ──────── CTA-band (faixa estreita entre seções) — bordas laranja pra fixar atenção ──────── */ .cta-band { background: linear-gradient(135deg, #1A1205 0%, #0F172A 55%, #0F172A 100%); border-top: 2px solid rgba(249, 115, 22, 0.55); border-bottom: 2px solid rgba(249, 115, 22, 0.35); padding: 36px 0; position: relative; overflow: hidden; box-shadow: inset 0 0 80px rgba(249, 115, 22, 0.06); } .cta-band::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 140% at 50% 50%, rgba(249, 115, 22, 0.18), transparent 70%); pointer-events: none; } .cta-band-inner { max-width: 1120px; margin: 0 auto; padding: 0 40px; display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; position: relative; z-index: 1; } .cta-band-text { color: #F1F5F9; font-family: 'Inter', sans-serif; font-size: 1.0625rem; font-weight: 500; line-height: 1.45; letter-spacing: -0.005em; flex: 1; min-width: 280px; margin: 0; } .cta-band-text strong { color: var(--cta-hot-light); font-weight: 700; } .cta-band-btn { display: inline-flex; align-items: center; gap: 10px; padding: 16px 28px; border-radius: 12px; font-family: 'Inter', sans-serif; font-size: 1rem; font-weight: 700; letter-spacing: -0.005em; text-decoration: none; white-space: nowrap; cursor: pointer; } .cta-band-btn svg { flex-shrink: 0; transition: transform .2s ease; } .cta-band-btn:hover svg { transform: translateX(3px); } @media (max-width: 768px) { .cta-band { padding: 28px 0; } .cta-band-inner { flex-direction: column; text-align: center; gap: 18px; padding: 0 24px; } .cta-band-btn { width: 100%; justify-content: center; } .cta-band-text { font-size: 1rem; min-width: 0; } } /* ──────── Desktop FAB (floating action button) — laranja com pulse ring ──────── */ @keyframes fabPulseRing { 0% { box-shadow: 0 8px 32px rgba(249, 115, 22, 0.5), 0 2px 8px rgba(0,0,0,0.25), 0 0 0 0 rgba(249, 115, 22, 0.5); } 70% { box-shadow: 0 8px 32px rgba(249, 115, 22, 0.5), 0 2px 8px rgba(0,0,0,0.25), 0 0 0 18px rgba(249, 115, 22, 0); } 100% { box-shadow: 0 8px 32px rgba(249, 115, 22, 0.5), 0 2px 8px rgba(0,0,0,0.25), 0 0 0 0 rgba(249, 115, 22, 0); } } .desktop-fab { position: fixed; bottom: 32px; right: 32px; z-index: 990; display: none; align-items: center; gap: 10px; padding: 16px 26px; border-radius: 999px; background: linear-gradient(135deg, var(--cta-hot), var(--cta-hot-dark)); color: #fff; font-family: 'Inter', sans-serif; font-size: 0.98rem; font-weight: 700; letter-spacing: -0.005em; text-decoration: none; box-shadow: 0 8px 32px rgba(249, 115, 22, 0.5), 0 2px 8px rgba(0,0,0,0.25); opacity: 0; transform: translateY(20px); transition: opacity .35s ease, transform .35s ease, box-shadow .2s ease, background .2s ease; pointer-events: none; } .desktop-fab.visible { opacity: 1; transform: translateY(0); pointer-events: auto; animation: fabPulseRing 2.6s ease-out infinite; } .desktop-fab:hover { animation: none; background: linear-gradient(135deg, var(--cta-hot), var(--cta-hot-darker)); box-shadow: 0 14px 44px rgba(249, 115, 22, 0.7), 0 4px 14px rgba(0,0,0,0.3); transform: translateY(-2px); } .desktop-fab svg { flex-shrink: 0; transition: transform .2s ease; } .desktop-fab:hover svg { transform: translateX(2px) translateY(-1px); } @media (min-width: 1024px) { .desktop-fab { display: inline-flex; } } /* ──────── Exit intent modal — acentos laranja ──────── */ .exit-modal { position: fixed; inset: 0; z-index: 1000; display: none; align-items: center; justify-content: center; padding: 24px; } .exit-modal.active { display: flex; } .exit-modal-backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, 0.82); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: fadeBackdrop .3s ease; } @keyframes fadeBackdrop { from { opacity: 0; } to { opacity: 1; } } .exit-modal-card { position: relative; background: linear-gradient(160deg, #0F172A 0%, #1E293B 100%); border: 1px solid rgba(249, 115, 22, 0.4); border-radius: 20px; max-width: 480px; width: 100%; padding: 40px 36px 32px; text-align: center; box-shadow: 0 24px 80px rgba(0,0,0,0.5), 0 0 60px rgba(249, 115, 22, 0.15); animation: slideUp .4s cubic-bezier(0.16, 1, 0.3, 1); } @keyframes slideUp { from { opacity: 0; transform: translateY(16px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } .exit-modal-card::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 70% 60% at 50% 0%, rgba(249, 115, 22, 0.22), transparent 70%); pointer-events: none; border-radius: 20px; } .exit-modal-close { position: absolute; top: 14px; right: 14px; background: transparent; border: none; color: rgba(255,255,255,0.45); font-size: 24px; line-height: 1; cursor: pointer; padding: 6px 10px; border-radius: 8px; transition: color .2s, background .2s; z-index: 2; } .exit-modal-close:hover { color: #fff; background: rgba(255,255,255,0.06); } .exit-modal-badge { display: inline-block; background: rgba(249, 115, 22, 0.18); border: 1px solid rgba(249, 115, 22, 0.4); color: var(--cta-hot-light); font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; padding: 6px 14px; border-radius: 999px; margin-bottom: 20px; position: relative; z-index: 1; } .exit-modal-card h3 { color: #fff; font-family: 'Inter', sans-serif; font-size: 1.7rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1.18; margin: 0 0 14px; position: relative; z-index: 1; } .exit-modal-card h3 strong { color: var(--cta-hot-light); font-weight: 800; } .exit-modal-card p { color: rgba(255,255,255,0.75); font-family: 'Inter', sans-serif; font-size: 0.95rem; line-height: 1.6; margin: 0 0 24px; position: relative; z-index: 1; } .exit-modal-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 18px 28px; border-radius: 14px; background: linear-gradient(135deg, var(--cta-hot), var(--cta-hot-dark)); color: #fff; font-family: 'Inter', sans-serif; font-size: 1.05rem; font-weight: 700; letter-spacing: -0.005em; text-decoration: none; box-shadow: var(--cta-hot-glow); transition: transform .2s ease, box-shadow .25s ease, background .2s ease; position: relative; z-index: 1; border: none; cursor: pointer; } .exit-modal-btn:hover { background: linear-gradient(135deg, var(--cta-hot), var(--cta-hot-darker)); box-shadow: var(--cta-hot-glow-hover); transform: translateY(-2px); } .exit-modal-btn svg { flex-shrink: 0; } .exit-modal-fineprint { color: rgba(255,255,255,0.4) !important; font-size: 0.8rem !important; margin: 16px 0 0 !important; position: relative; z-index: 1; } @media (max-width: 480px) { .exit-modal-card { padding: 32px 24px 24px; } .exit-modal-card h3 { font-size: 1.4rem; } } /* ═══════════════════════════════════════════════════════════════ BADGES — overrides em tons de verde (2026-04-17) Libera o indigo/cyan pra marca e mantém verde exclusivo dos badges ═══════════════════════════════════════════════════════════════ */ /* Badge base (seções light bg) — verde médio */ .section-badge { background: rgba(16, 185, 129, 0.10) !important; border: 1px solid rgba(16, 185, 129, 0.28) !important; color: var(--cta-green-dark) !important; } /* Badges em seções dark bg — verde claro pra contraste */ .testimonials .section-badge, .cta-final .section-badge, .comparison .section-badge, .infra .section-badge { background: rgba(16, 185, 129, 0.14) !important; border-color: rgba(16, 185, 129, 0.35) !important; color: var(--cta-green-light) !important; } /* Hero badge (topo da LP) — verde claro com dot pulsante */ .hero-badge { color: var(--cta-green-light) !important; background: rgba(16, 185, 129, 0.12) !important; border: 1px solid rgba(16, 185, 129, 0.32) !important; } .hero-badge-dot { background: var(--cta-green) !important; box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.6); animation: badgeDotPulse 2s ease-in-out infinite !important; } @keyframes badgeDotPulse { 0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.5); } 50% { opacity: 0.55; box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); } } /* Exit modal badge — já estava laranja, manter (é zona de ação, não label de seção) */ /* ═══════════════════════════════════════════════════════════════ FORM — tema LIGHT (2026-04-17) Form card fica branco sobre hero dark — destaque visual forte Submit mantém laranja (CRO) pelo !important do bloco acima ═══════════════════════════════════════════════════════════════ */ .hero-form-card { background: #FFFFFF !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border: 1px solid #E2E8F0 !important; box-shadow: 0 24px 80px rgba(0,0,0,0.35), 0 4px 16px rgba(15, 23, 42, 0.15) !important; } .hero-form-header { background: #F8FAFC; border-bottom: 1px solid #E2E8F0 !important; } .hero-form-header-icon { background: rgba(79, 70, 229, 0.10) !important; border: 1px solid rgba(79, 70, 229, 0.18); } .hero-form-header-icon svg { stroke: #4F46E5 !important; } .hero-form-header-text h3 { color: #0F172A !important; font-weight: 700 !important; } .hero-form-header-text p { color: #64748B !important; } .hero-form-body { background: #FFFFFF; } .form-label { color: #475569 !important; font-weight: 700 !important; } .form-input, .form-select { /* Usa background-color (não shorthand) pra não resetar repeat/position do select */ background-color: #FFFFFF !important; border: 1.5px solid #E2E8F0 !important; color: #0F172A !important; font-weight: 500; } .form-input::placeholder { color: #94A3B8 !important; } .form-input:focus, .form-select:focus { border-color: #4F46E5 !important; background-color: #FFFFFF !important; box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.12) !important; } .form-select { /* Seta escura + garante no-repeat/position que shorthand do select anterior sobrescreveu */ background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' fill='none' stroke='%2364748B' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 14px center !important; padding-right: 38px !important; } .form-select option { background: #FFFFFF !important; color: #0F172A !important; } /* Estado de erro — fundo levemente avermelhado sobre branco */ .form-input--error, .form-input--error:focus { border-color: #DC2626 !important; background-color: #FEF2F2 !important; box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1) !important; } /* Form footer (trust badge "seus dados estão seguros") — muted dark */ .form-footer { color: #64748B !important; background: #F8FAFC; padding: 12px 0 0; border-top: 1px dashed #E2E8F0; margin-top: 18px; } .form-footer svg { stroke: #10B981; } /* ═══════════════════════════════════════════════════════════════ Hero headline — "3 segundos" em verde bandeira (2026-04-17) #009C3B = verde oficial da bandeira brasileira (Pantone 355C) ═══════════════════════════════════════════════════════════════ */ .hero-headline em { color: #00A84F !important; text-decoration-color: rgba(0, 156, 59, 0.4) !important; text-shadow: 0 0 24px rgba(0, 156, 59, 0.25); } /* ═══════════════════════════════════════════════════════════════ Social Proof — fundo verde bandeira (2026-04-17) Cria beat visual forte logo após o hero Ajusta stats + bureaus chips pra legibilidade sobre verde ═══════════════════════════════════════════════════════════════ */ .social-proof { background: linear-gradient(135deg, #007A2F 0%, #009C3B 45%, #00A84F 100%) !important; border-top: 1px solid rgba(0, 60, 20, 0.4) !important; border-bottom: 1px solid rgba(255, 223, 0, 0.18) !important; } .social-proof::before { background: radial-gradient(ellipse 60% 90% at 15% 50%, rgba(255, 223, 0, 0.08) 0%, transparent 70%), radial-gradient(ellipse 60% 90% at 85% 50%, rgba(0, 60, 20, 0.25) 0%, transparent 70%) !important; } /* Stats — valores em BRANCO pra contraste sobre verde */ .social-proof .sp-stat-value { background: none !important; -webkit-text-fill-color: #FFFFFF !important; color: #FFFFFF !important; text-shadow: 0 2px 12px rgba(0, 60, 20, 0.35); } .social-proof .sp-stat-label { color: rgba(255, 255, 255, 0.88) !important; font-weight: 500; } .social-proof .sp-stat-divider { background: linear-gradient(180deg, transparent, rgba(255,255,255,0.28), transparent) !important; } /* Bureaus row — contraste alto em chips brancos translúcidos */ .social-proof .sp-bureaus { border-top: 1px solid rgba(255,255,255,0.18) !important; } .social-proof .sp-bureaus-label { color: rgba(255, 255, 255, 0.75) !important; } .social-proof .sp-bureau-chip { background: rgba(255, 255, 255, 0.12) !important; border: 1px solid rgba(255, 255, 255, 0.22) !important; color: rgba(255, 255, 255, 0.95) !important; } .social-proof .sp-bureau-chip:hover { background: rgba(255, 255, 255, 0.2) !important; border-color: rgba(255, 255, 255, 0.4) !important; color: #FFFFFF !important; } /* ═══════════════════════════════════════════════════════════════ CTA-BAND — inversão: fundo LARANJA + botão BRANCO (2026-04-17) Pattern interrupt mais agressivo — painel inteiro grita laranja, botão branco dentro vira foco absoluto pelo contraste máximo ═══════════════════════════════════════════════════════════════ */ .cta-band { background: linear-gradient(135deg, #C2410C 0%, #EA580C 45%, #F97316 100%) !important; border-top: 2px solid rgba(0, 0, 0, 0.15) !important; border-bottom: 2px solid rgba(0, 0, 0, 0.15) !important; box-shadow: inset 0 0 80px rgba(194, 65, 12, 0.25) !important; } .cta-band::before { background: radial-gradient(ellipse 60% 140% at 20% 50%, rgba(255, 255, 255, 0.08), transparent 70%), radial-gradient(ellipse 60% 140% at 80% 50%, rgba(0, 0, 0, 0.10), transparent 70%) !important; } .cta-band-text { color: #FFFFFF !important; text-shadow: 0 1px 6px rgba(124, 45, 18, 0.35); } .cta-band-text strong { color: #FFFFFF !important; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.45); text-decoration-thickness: 2px; text-underline-offset: 4px; } /* Botão branco sobre fundo laranja — contraste máximo */ .cta-band-btn { background: #FFFFFF !important; color: #C2410C !important; box-shadow: 0 4px 20px rgba(124, 45, 18, 0.35), 0 2px 6px rgba(0, 0, 0, 0.12) !important; border: 2px solid transparent !important; } .cta-band-btn:hover { background: #FFFFFF !important; color: #9A2F08 !important; box-shadow: 0 10px 32px rgba(124, 45, 18, 0.5), 0 4px 10px rgba(0, 0, 0, 0.18) !important; transform: translateY(-2px) !important; } .cta-band-btn svg { stroke: #C2410C !important; } .cta-band-btn:hover svg { stroke: #9A2F08 !important; } /* ═══════════════════════════════════════════════════════════════ Comparison cards — roxo (problemas muted) + verde (solução) (2026-04-17) Opacidade 0.04 (era 0.06) — card de problemas fica visualmente suprimido BIBlue card usa mesma opacidade em tom verde — simetria visual ═══════════════════════════════════════════════════════════════ */ /* ──────── Problemas — roxo com opacidade reduzida ──────── */ .comparison-market { background: linear-gradient(145deg, rgba(139, 92, 246, 0.22) 0%, rgba(139, 92, 246, 0.14) 55%, rgba(139, 92, 246, 0.08) 100%) !important; border: 1px solid rgba(139, 92, 246, 0.28) !important; box-shadow: 0 8px 32px rgba(76, 29, 149, 0.15), inset 0 1px 0 rgba(196, 181, 253, 0.08) !important; } .comparison-market .comparison-card-header svg { stroke: #A78BFA !important; } .comparison-market .comparison-card-header h3 { color: rgba(255, 255, 255, 0.85) !important; } .comparison-list-negative li { color: rgba(255, 255, 255, 0.72) !important; } .comparison-list-negative li::before { background: rgba(139, 92, 246, 0.15) !important; color: #C4B5FD !important; } .comparison-list-negative li::after { background: rgba(139, 92, 246, 0.15) !important; } /* ──────── Solução BIBlue — verde com MESMA opacidade ──────── */ .comparison-biblue { background: linear-gradient(145deg, rgba(16, 185, 129, 0.22) 0%, rgba(16, 185, 129, 0.14) 55%, rgba(16, 185, 129, 0.08) 100%) !important; border: 1px solid rgba(16, 185, 129, 0.28) !important; box-shadow: 0 8px 32px rgba(5, 105, 73, 0.15), inset 0 1px 0 rgba(167, 243, 208, 0.08) !important; } .comparison-biblue .comparison-card-header svg { stroke: var(--cta-green) !important; } .comparison-biblue .comparison-card-header h3 { color: #fff !important; } .comparison-list-positive li::before, .comparison-list-positive li::after { background: rgba(16, 185, 129, 0.18) !important; color: var(--cta-green-light) !important; } /* ═══════════════════════════════════════════════════════════════ CTA-mid — fundo verde bandeira + botão PRETO (2026-04-17) Beat visual forte no meio do scroll — verde BR + botão black pop ═══════════════════════════════════════════════════════════════ */ .cta-mid { background: linear-gradient(135deg, #007A2F 0%, #009C3B 45%, #00A84F 100%) !important; } .cta-mid::before { background: linear-gradient(160deg, rgba(0, 60, 20, 0.25) 0%, transparent 50%, rgba(0, 120, 45, 0.18) 100%) !important; } .cta-mid::after { /* Grid sutil em branco translúcido sobre verde */ background-image: linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px) !important; } /* Botão PRETO — pop máximo sobre verde bandeira */ .cta-mid-btn.cta-action { background: #0A0A0A !important; color: #FFFFFF !important; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(0, 0, 0, 0.2) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; } .cta-mid-btn.cta-action:hover { background: #1A1A1A !important; color: #FFFFFF !important; box-shadow: 0 12px 36px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.15) !important; transform: translateY(-2px) !important; } .cta-mid-btn.cta-action svg { fill: #FFFFFF; }