:root { --cfs-ink: #edf6ff; --cfs-muted: #acc3de; --cfs-paper: #0b2142; --cfs-canvas: #06152d; --cfs-line: #28456a; --cfs-gold: #1686ff; --cfs-gold-hover: #39a0ff; --cfs-teal: #318df2; --preview-navy: #06152d; --preview-navy-2: #0a2347; --preview-blue: #1686ff; --preview-cyan: #6ab5ff; --preview-ice: #f3f8ff; --preview-ink: #102744; --preview-muted: #526985; } html { scroll-behavior: smooth; } body { margin: 0px; background: var(--preview-navy) !important; } #landing.cfSiteV5 { background: var(--preview-navy) !important; color: rgb(244, 249, 255) !important; } #landing.cfSiteV5 .cfsHeader { background: rgba(5, 18, 39, 0.96) !important; border-bottom: 1px solid rgba(91, 166, 244, 0.22) !important; color: rgb(245, 249, 255) !important; } #landing.cfSiteV5 .cfsHeader .cfsBrand, #landing.cfSiteV5 .cfsHeader .cfsBrand > span, #landing.cfSiteV5 .cfsHeader .cfsNav a { color: rgb(245, 249, 255) !important; } #landing.cfSiteV5 .cfsHeader .cfsNav a:hover { color: var(--preview-cyan) !important; } #landing.cfSiteV5 .cfsButton--primary, #landing.cfSiteV5 #certfactHomeCaptureV8, #landing.cfSiteV5 .cfsHeaderCta { background: var(--preview-blue) !important; border-color: var(--preview-blue) !important; color: white !important; box-shadow: rgba(16, 116, 246, 0.23) 0px 9px 27px !important; } #landing.cfSiteV5 .cfsButton--primary:hover, #landing.cfSiteV5 #certfactHomeCaptureV8:hover, #landing.cfSiteV5 .cfsHeaderCta:hover { background: rgb(57, 160, 255) !important; } #landing.cfSiteV5 .cfsButton--outline { color: rgb(234, 244, 255) !important; border-color: rgba(155, 203, 255, 0.5) !important; background: rgba(12, 40, 77, 0.42) !important; } #landing.cfSiteV5 .cfsHero .cfsButton--outline { color: rgb(245, 249, 255) !important; border-color: rgb(90, 168, 250) !important; background: rgb(11, 44, 89) !important; } #landing.cfSiteV5 .cfsHero .cfsActions a.cfsTextLink { color: rgb(245, 249, 255) !important; border-color: rgb(90, 168, 250) !important; background: rgb(11, 44, 89) !important; } #landing.cfSiteV5 .cfsTextLink { color: rgb(191, 233, 255) !important; } #landing.cfSiteV5 .cfsEyebrow { color: var(--preview-cyan) !important; } #landing.cfSiteV5 #certfactLandingPluginV8.cfsHero { background: radial-gradient(circle at 74% 30%, rgb(11, 61, 120) 0%, rgb(10, 36, 75) 28%, rgb(6, 21, 45) 68%) !important; color: rgb(246, 250, 255) !important; } #landing.cfSiteV5 #certfactLandingPluginV8.cfsHero::before { content: ""; position: absolute; inset: 0px; opacity: 0.24; pointer-events: none; background: repeating-linear-gradient(90deg, transparent 0px, transparent 62px, rgba(58, 156, 255, 0.09) 63px, transparent 64px); display: block !important; } #landing.cfSiteV5 .cfsHero h1, #landing.cfSiteV5 .cfsHero h1 em { color: rgb(255, 255, 255) !important; } #landing.cfSiteV5 .cfsHero h1 em { box-shadow: rgba(32, 138, 255, 0.4) 0px -0.13em 0px inset !important; } #landing.cfSiteV5 .cfsHero .cfsLead { color: rgb(194, 212, 235) !important; } #landing.cfSiteV5 .cfsHeroNote, #landing.cfSiteV5 .cfsRequirements { color: rgb(169, 192, 220) !important; } #landing.cfSiteV5 .cfsRequirements a { color: rgb(111, 213, 255) !important; } #landing.cfSiteV5 .cfsMiniIcon { border-color: rgb(45, 84, 128) !important; color: var(--preview-cyan) !important; } #landing.cfSiteV5 .cfpVisual { color: rgb(239, 248, 255) !important; border: 1px solid rgba(84, 176, 255, 0.3) !important; border-radius: 26px !important; padding: 15px 16px 22px !important; background: radial-gradient(circle at 52% 34%, rgba(24, 134, 255, 0.26), transparent 52%), linear-gradient(145deg, rgb(9, 38, 76), rgb(7, 24, 47)) !important; box-shadow: rgba(0, 7, 22, 0.46) 0px 30px 75px, rgba(67, 163, 255, 0.09) 0px 0px 0px 1px inset !important; overflow: hidden !important; } #landing.cfSiteV5 .cfpVisual::before { content: ""; position: absolute; inset: 0px; pointer-events: none; opacity: 0.27; background-image: radial-gradient(circle, rgb(81, 174, 255) 1px, transparent 1.4px); background-size: 18px 18px; mask-image: linear-gradient(90deg, transparent 5%, rgb(0, 0, 0) 55%, transparent 100%); } #landing.cfSiteV5 .cfpConnections path, #landing.cfSiteV5 .cfpConnections circle { stroke: rgb(58, 171, 255) !important; } #landing.cfSiteV5 .cfpSource > span:last-child { background: rgb(12, 45, 86) !important; box-shadow: rgb(12, 45, 86) 0px 0px 10px 7px !important; color: rgb(231, 245, 255) !important; } #landing.cfSiteV5 .cfpSourceIcon { background: rgb(244, 249, 255) !important; } #landing.cfSiteV5 .cfpSourceIcon::before { border-color: rgb(67, 199, 255) !important; } #landing.cfSiteV5 .cfpBrandNode { background: rgb(9, 44, 88) !important; border: 1px solid rgb(74, 185, 255) !important; color: white !important; box-shadow: rgba(6, 14, 38, 0.45) 0px 12px 30px, rgba(32, 145, 255, 0.2) 0px 0px 25px !important; } #landing.cfSiteV5 .cfpBrandNode > span, #landing.cfSiteV5 .cfpBrandNode small { color: rgb(255, 255, 255) !important; } #landing.cfSiteV5 .cfpDelivery { background: rgba(8, 35, 70, 0.74) !important; border-color: rgba(84, 174, 255, 0.28) !important; } #landing.cfSiteV5 .cfpDeliveryHeading, #landing.cfSiteV5 .cfpOutputs strong { color: rgb(242, 249, 255) !important; } #landing.cfSiteV5 .cfpOutputs small { color: rgb(172, 200, 229) !important; } #landing.cfSiteV5 .cfpOutputs > div { background: rgba(11, 47, 91, 0.68) !important; border-color: rgba(84, 174, 255, 0.24) !important; } #landing.cfSiteV5 .cfpOutputs strong::before { background: rgb(13, 69, 132) !important; border-color: rgb(67, 187, 255) !important; color: rgb(204, 243, 255) !important; } #landing.cfSiteV5 .cfpOutputs > div { min-width: 0px !important; min-height: 218px !important; grid-template-rows: 72px 66px minmax(54px, auto) !important; padding: 10px 5px 14px !important; box-sizing: border-box !important; } #landing.cfSiteV5 .cfpOutputs strong { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: flex-start !important; gap: 5px !important; width: 100% !important; min-height: 0px !important; height: auto !important; white-space: normal !important; text-align: center !important; font-size: clamp(12px, 3.2vw, 16px) !important; line-height: 1.12 !important; overflow-wrap: normal !important; } #landing.cfSiteV5 .cfpOutputs strong::before { width: 18px !important; height: 18px !important; flex: 0 0 18px !important; margin-inline: auto !important; font-size: 11px !important; } #landing.cfSiteV5 .cfpOutputs > div + div { border-left-color: rgb(67, 133, 213) !important; } #landing.cfSiteV5 .cfpOutputIcon { background: rgb(238, 246, 255) !important; border-color: rgb(106, 171, 245) !important; color: rgb(21, 75, 140) !important; } #landing.cfSiteV5 .cfpOutputIcon--files svg { stroke: rgb(21, 75, 140) !important; } #landing.cfSiteV5 .cfpDeliveryHeading { border-color: rgb(67, 133, 213) !important; } #landing.cfSiteV5 .cfpDeliveryHeading::after { background: rgb(67, 133, 213) !important; } #landing.cfSiteV5 .cfpOutputs small { width: 100% !important; min-width: 0px !important; white-space: normal !important; text-align: center !important; font-size: clamp(10px, 2.6vw, 12px) !important; line-height: 1.3 !important; } #landing.cfSiteV5 .cfpOutputs > div strong::before { opacity: 0; transform: translateY(9px) scale(0.5); } #landing.cfSiteV5 .cfpOutputs.checks-visible > div strong::before { animation: 0.52s cubic-bezier(0.2, 1.4, 0.35, 1) 0s 1 normal both running cfpCheckReveal; } #landing.cfSiteV5 .cfpOutputs.checks-visible > div:nth-child(2) strong::before { animation-delay: 0.35s; } #landing.cfSiteV5 .cfpOutputs.checks-visible > div:nth-child(3) strong::before { animation-delay: 0.7s; } @keyframes cfpCheckReveal { 0% { opacity: 0; transform: translateY(9px) scale(0.5); } 100% { opacity: 1; transform: translateY(0px) scale(1); } } #landing.cfSiteV5 .cfsTrust { border-color: rgba(93, 170, 240, 0.25) !important; } #landing.cfSiteV5 .cfsTrust :is(strong, small, b) { color: rgb(207, 222, 240) !important; } #landing.cfSiteV5 .cfsHero .cfsTrust { display: none !important; } #landing.cfSiteV5 .cfsHero > .veratiuEvidenceSeals--bottom > span { border-color: rgb(78, 157, 245) !important; background: linear-gradient(135deg, rgb(16, 45, 96), rgb(23, 69, 129)) !important; color: rgb(245, 249, 255) !important; box-shadow: rgba(8, 29, 75, 0.24) 0px 6px 16px !important; } #landing.cfSiteV5 .cfsHero > .veratiuEvidenceSeals--bottom { display: block !important; position: relative !important; width: calc(100% - 36px) !important; max-width: 620px !important; height: 368px !important; margin: 27px auto 24px !important; padding: 0px !important; overflow: visible !important; } #landing.cfSiteV5 .cfsHero > .veratiuEvidenceSeals--bottom > span { opacity: 0; animation: 48s linear 0s infinite normal none running veratiuSealStack; will-change: transform, opacity; position: absolute !important; inset: 0px 0px auto !important; width: 100% !important; height: 116px !important; padding: 12px 16px !important; justify-content: flex-start !important; gap: 12px !important; white-space: normal !important; line-height: 1.25 !important; } #landing.cfSiteV5 .cfsHero > .veratiuEvidenceSeals--bottom > span:nth-child(1) { animation-delay: -12s; } #landing.cfSiteV5 .cfsHero > .veratiuEvidenceSeals--bottom > span:nth-child(2) { animation-delay: -6s; } #landing.cfSiteV5 .cfsHero > .veratiuEvidenceSeals--bottom > span:nth-child(3) { animation-delay: 0s; } #landing.cfSiteV5 .cfsHero > .veratiuEvidenceSeals--bottom > span:nth-child(4) { animation-delay: -42s; } #landing.cfSiteV5 .cfsHero > .veratiuEvidenceSeals--bottom > span:nth-child(5) { animation-delay: -36s; } #landing.cfSiteV5 .cfsHero > .veratiuEvidenceSeals--bottom > span:nth-child(6) { animation-delay: -30s; } #landing.cfSiteV5 .cfsHero > .veratiuEvidenceSeals--bottom > span:nth-child(7) { animation-delay: -24s; } #landing.cfSiteV5 .cfsHero > .veratiuEvidenceSeals--bottom > span:nth-child(8) { animation-delay: -18s; } @keyframes veratiuSealStack { 0%, 6.25% { transform:translateY(296px); opacity:0; } 12.5% { transform:translateY(248px); opacity:.52; } 18.75% { transform:translateY(186px); opacity:.82; } 25% { transform:translateY(124px); opacity:1; } 31.25% { transform:translateY(62px); opacity:.82; } 37.5% { transform:translateY(0); opacity:.52; } 43.75%, 100% { transform:translateY(-80px); opacity:0; } } #landing.cfSiteV5 .cfsHero > .veratiuEvidenceSeals--bottom .seal-copy { display: grid; gap: 5px; min-width: 0px; } #landing.cfSiteV5 .cfsHero > .veratiuEvidenceSeals--bottom .seal-copy strong { color: rgb(255, 255, 255) !important; font-size: clamp(13px, 3.8vw, 18px) !important; line-height: 1.2 !important; } #landing.cfSiteV5 .cfsHero > .veratiuEvidenceSeals--bottom .seal-copy small { color: rgb(217, 233, 255) !important; font-size: clamp(10px, 2.8vw, 13px) !important; font-weight: 500 !important; line-height: 1.35 !important; } #landing.cfSiteV5 .cfsHero > .veratiuEvidenceSeals--bottom i { background: rgb(37, 137, 247) !important; color: white !important; flex-shrink: 0 !important; } #landing.cfSiteV5 .cfsTrust > div > b, #landing.cfSiteV5 .cfsProofList article > span { border-color: rgb(78, 157, 245) !important; background: linear-gradient(135deg, rgb(19, 64, 128), rgb(29, 104, 187)) !important; color: white !important; box-shadow: rgba(9, 42, 94, 0.19) 0px 6px 14px !important; } #landing.cfSiteV5 #demonstracao.cfsDemoVideo { background: linear-gradient(135deg, rgb(6, 21, 45) 0%, rgb(10, 40, 84) 58%, rgb(7, 26, 56) 100%) !important; } #landing.cfSiteV5 #demonstracao.cfsDemoVideo::before { background: radial-gradient(circle, rgba(37, 137, 255, 0.28), transparent 67%) !important; } #landing.cfSiteV5 .cfsDemoCopy .cfsEyebrow { color: rgb(128, 189, 255) !important; } #landing.cfSiteV5 .cfsDemoCopy > p, #landing.cfSiteV5 .cfsDemoReportLink small, #landing.cfSiteV5 .cfsDemoReportNote { color: rgb(197, 216, 240) !important; } #landing.cfSiteV5 .cfsDemoPoints span::before { background: rgb(22, 134, 255) !important; color: white !important; } #landing.cfSiteV5 .cfsDemoReportLink { border-color: rgb(66, 157, 252) !important; } #landing.cfSiteV5 .cfsDemoReportLink svg { color: rgb(105, 179, 255) !important; } #landing.cfSiteV5 .cfsDemoReportSample .cfsDeliveryFiles > div { border-left-color: rgb(69, 154, 255) !important; } #landing.cfSiteV5 .cfsDemoReportSample dt { border-color: rgb(69, 154, 255) !important; } #landing.cfSiteV5 .cfsDemoFrame::before { background: rgba(5, 25, 55, 0.9) !important; } #landing.cfSiteV5 .cfsDemoFrame video { background: rgb(6, 21, 45) !important; } #landing.cfSiteV5 .cfsDemoFrame figcaption { color: rgb(82, 105, 133) !important; } #landing.cfSiteV5 .cfsDemoFrame figcaption::before { background: rgb(228, 241, 255) !important; color: rgb(8, 117, 216) !important; } #landing.cfSiteV5 .cfsDemoActions .cfsButton--primary { background: rgb(22, 134, 255) !important; border-color: rgb(22, 134, 255) !important; color: white !important; } #landing.cfSiteV5 :is(#modalidades, #resultado, #legalidade, #comparacao, #guias, #faq) { color: var(--preview-ink) !important; background: var(--preview-ice) !important; } #landing.cfSiteV5 :is(#modalidades, #resultado, #legalidade, #comparacao, #guias, #faq) h2, #landing.cfSiteV5 :is(#modalidades, #resultado, #legalidade, #comparacao, #guias, #faq) h3 { color: var(--preview-ink) !important; } #landing.cfSiteV5 :is(#modalidades, #resultado, #legalidade, #comparacao, #guias, #faq) :is(p, small) { color: var(--preview-muted) !important; } #landing.cfSiteV5 :is(#modalidades, #resultado, #legalidade, #comparacao, #guias, #faq) .cfsEyebrow { color: rgb(8, 117, 216) !important; } #landing.cfSiteV5 :is(#modalidades, #resultado, #legalidade, #comparacao, #guias, #faq) .cfsTextLink { color: rgb(8, 107, 197) !important; } #landing.cfSiteV5 .cfsMode, #landing.cfSiteV5 .cfsGuides > a, #landing.cfSiteV5 .cfsDeliveryVisual, #landing.cfSiteV5 .cfsValidationCard { background: rgb(255, 255, 255) !important; border-color: rgb(210, 225, 242) !important; color: var(--preview-ink) !important; box-shadow: rgba(9, 42, 85, 0.06) 0px 14px 35px !important; } #landing.cfSiteV5 .cfsMode :is(h3, .cfsPrice, li) { color: var(--preview-ink) !important; } #landing.cfSiteV5 .cfsMode :is(p, .cfsPerCapture, ul) { color: var(--preview-muted) !important; } #landing.cfSiteV5 .cfsModeIcon, #landing.cfSiteV5 .cfsMode li::before { color: rgb(8, 117, 216) !important; } #landing.cfSiteV5 .cfsMode li { border-color: rgb(226, 235, 246) !important; } #landing.cfSiteV5 .cfsMode:hover { border-color: rgb(114, 182, 246) !important; box-shadow: rgba(15, 103, 200, 0.13) 0px 18px 42px !important; } #landing.cfSiteV5 .cfsSectionFoot > p { color: var(--preview-muted) !important; } #landing.cfSiteV5 .cfsProcessSection { background: linear-gradient(120deg, rgb(7, 27, 56), rgb(11, 50, 100)) !important; color: rgb(245, 249, 255) !important; } html body #landing.cfSiteV5 section#como.cfsProcessSection, html body #landing.cfSiteV5 section#como.cfsProcessSection > .cfsSection { background-color: rgb(10, 36, 80) !important; background-image: linear-gradient(120deg, rgb(7, 27, 56), rgb(11, 50, 100)) !important; color: rgb(245, 249, 255) !important; } #landing.cfSiteV5 #como .cfsEyebrow { color: rgb(132, 189, 255) !important; } #landing.cfSiteV5 .cfsProcessSection .cfsSectionHead > p, #landing.cfSiteV5 .cfsProcessSection .cfsSteps p { color: rgb(188, 208, 231) !important; } #landing.cfSiteV5 .cfsProcessSection .cfsSteps li { border-color: rgba(116, 185, 251, 0.4) !important; } #landing.cfSiteV5 .cfsProcessSection .cfsSteps li > span, #landing.cfSiteV5 .cfsProcessSection .cfsSteps a { color: rgb(85, 202, 255) !important; } #landing.cfSiteV5 .cfsSecuritySection { background: rgb(234, 243, 255) !important; color: var(--preview-ink) !important; } #landing.cfSiteV5 .cfsSecuritySection :is(h2, h3) { color: var(--preview-ink) !important; } #landing.cfSiteV5 .cfsSecuritySection :is(p, small) { color: var(--preview-muted) !important; } #landing.cfSiteV5 .cfsProofList article { border-color: rgb(198, 217, 238) !important; } #landing.cfSiteV5 .cfsDeliverySection { background: rgb(232, 242, 255) !important; color: var(--preview-ink) !important; } #landing.cfSiteV5 .cfsDeliverySection :is(h2, h3, strong) { color: var(--preview-ink) !important; } #landing.cfSiteV5 .cfsDeliverySection p { color: var(--preview-muted) !important; } #landing.cfSiteV5 .cfsDeliveryVisual b { background: rgb(242, 248, 255) !important; border-color: rgb(202, 222, 243) !important; color: var(--preview-ink) !important; } html body #landing.cfSiteV5 #modalidades, html body #landing.cfSiteV5 #resultado { background: rgb(7, 26, 56) !important; color: rgb(244, 249, 255) !important; } html body #landing.cfSiteV5 #resultado { background: linear-gradient(160deg, rgb(11, 43, 88), rgb(7, 26, 56) 75%) !important; } #landing.cfSiteV5 :is(#modalidades, #resultado) :is(h2, h3, strong) { color: rgb(244, 249, 255) !important; } #landing.cfSiteV5 :is(#modalidades, #resultado) :is(p, small) { color: rgb(188, 209, 235) !important; } #landing.cfSiteV5 :is(#modalidades, #resultado) :is(.cfsEyebrow, .eyebrow) { color: rgb(103, 180, 255) !important; } #landing.cfSiteV5 #modalidades .notice, #landing.cfSiteV5 #modalidades .cfsPurchaseTrust, #landing.cfSiteV5 #modalidades > div[style] { background: rgb(16, 47, 94) !important; border: 1px solid rgb(55, 122, 197) !important; color: rgb(222, 237, 255) !important; } #landing.cfSiteV5 #modalidades .notice strong, #landing.cfSiteV5 #modalidades > div[style] strong { color: rgb(255, 255, 255) !important; } #landing.cfSiteV5 #modalidades .cfsPurchaseTrust span { color: rgb(230, 242, 255) !important; } #landing.cfSiteV5 #modalidades .cfsPurchaseTrust span::before { color: rgb(101, 177, 255) !important; } #landing.cfSiteV5 #modalidades .cfsMode, #landing.cfSiteV5 #resultado .bundle-card, #landing.cfSiteV5 #resultado .bundle-images > div { background: rgb(16, 43, 83) !important; border: 1px solid rgb(49, 93, 146) !important; color: rgb(244, 249, 255) !important; box-shadow: rgba(2, 12, 30, 0.17) 0px 18px 40px !important; } #landing.cfSiteV5 #modalidades .cfsMode :is(h3, .cfsPrice, li), #landing.cfSiteV5 #resultado .bundle-card h3 { color: rgb(255, 255, 255) !important; } #landing.cfSiteV5 #modalidades .cfsMode :is(p, .cfsPerCapture, ul), #landing.cfSiteV5 #resultado .bundle-card :is(p, small) { color: rgb(190, 211, 237) !important; } #landing.cfSiteV5 #modalidades .cfsModeIcon, #landing.cfSiteV5 #modalidades .cfsMode li::before { color: rgb(103, 180, 255) !important; } #landing.cfSiteV5 #modalidades .cfsMode li { border-color: rgb(48, 83, 121) !important; } #landing.cfSiteV5 #modalidades .veratiuPurchaseScopeV72 .veratiuPurchaseCheckV72 { color: rgb(105, 183, 255) !important; } #landing.cfSiteV5 #modalidades .cfsMode:hover { border-color: rgb(114, 182, 255) !important; box-shadow: rgba(18, 124, 255, 0.15) 0px 18px 44px !important; } #landing.cfSiteV5 #modalidades .cfsMode .cfsButton--outline, #landing.cfSiteV5 #resultado .bundle-all { background: rgb(22, 134, 255) !important; border: 1px solid rgb(22, 134, 255) !important; color: rgb(255, 255, 255) !important; } #landing.cfSiteV5 #modalidades .cfsMode .cfsButton--outline:hover, #landing.cfSiteV5 #resultado .bundle-all:hover { background: rgb(57, 160, 255) !important; } #landing.cfSiteV5 #resultado .bundle-all small { color: rgb(228, 241, 255) !important; } #landing.cfSiteV5 #resultado .bundle-icon { background: rgb(23, 76, 145) !important; border-color: rgb(76, 155, 236) !important; color: rgb(255, 255, 255) !important; } #landing.cfSiteV5 #resultado .bundle-card a, #landing.cfSiteV5 #modalidades .cfsTextLink, #landing.cfSiteV5 #modalidades .cfsSectionFoot a { color: rgb(129, 197, 255) !important; } #landing.cfSiteV5 #modalidades .cfsSectionFoot > p { color: rgb(188, 209, 235) !important; } #landing.cfSiteV5 #resultado .bundle-images > div { padding: 12px; border-radius: 16px; } #landing.cfSiteV5 #resultado .bundle-images img { border-color: rgb(49, 93, 146) !important; } html body #landing.cfSiteV5 #recursos-tecnicos { background: rgb(237, 245, 255) !important; border-color: rgb(202, 223, 247) !important; color: rgb(16, 39, 68) !important; } #landing.cfSiteV5 #recursos-tecnicos :is(h2, h3) { color: rgb(16, 39, 68) !important; } #landing.cfSiteV5 #recursos-tecnicos :is(p, small) { color: rgb(82, 105, 133) !important; } #landing.cfSiteV5 #recursos-tecnicos .cfsEyebrow { color: rgb(8, 117, 216) !important; } #landing.cfSiteV5 :is(#veratiuTechnicalDetailsV75, #veratiuComparisonDetailsV75) { border-color: rgb(53, 106, 171) !important; background: rgb(12, 36, 73) !important; box-shadow: rgba(7, 34, 76, 0.16) 0px 12px 28px !important; } #landing.cfSiteV5 :is(#veratiuTechnicalDetailsV75, #veratiuComparisonDetailsV75) > summary, #landing.cfSiteV5 :is(#veratiuTechnicalDetailsV75, #veratiuComparisonDetailsV75)[open] > summary { background: linear-gradient(135deg, rgb(11, 40, 86), rgb(22, 76, 145)) !important; border-color: rgb(53, 106, 171) !important; color: rgb(255, 255, 255) !important; } #landing.cfSiteV5 :is(#veratiuTechnicalDetailsV75, #veratiuComparisonDetailsV75) > summary :is(strong, small) { color: rgb(255, 255, 255) !important; } #landing.cfSiteV5 :is(#veratiuTechnicalDetailsV75, #veratiuComparisonDetailsV75) .veratiuHomeDetailsIconV75 { background: rgb(37, 143, 255) !important; color: rgb(255, 255, 255) !important; } #landing.cfSiteV5 #recursos-tecnicos .cfsCapabilitiesV66Contract { background: rgb(223, 238, 255) !important; border-color: rgb(181, 212, 245) !important; } #landing.cfSiteV5 #recursos-tecnicos .cfsCapabilitiesV66Contract span { background: rgb(255, 255, 255) !important; color: rgb(18, 60, 114) !important; box-shadow: rgb(199, 221, 244) 0px 0px 0px 1px inset !important; } #landing.cfSiteV5 #recursos-tecnicos .cfsCapabilitiesV66Contract span::before, #landing.cfSiteV5 #recursos-tecnicos .cfsCapabilitiesV66Icon { background: rgb(22, 134, 255) !important; border-color: rgb(22, 134, 255) !important; color: rgb(255, 255, 255) !important; } #landing.cfSiteV5 #recursos-tecnicos .cfsCapabilitiesV66Card { background: rgb(255, 255, 255) !important; border-color: rgb(199, 220, 243) !important; box-shadow: rgba(12, 57, 110, 0.08) 0px 10px 28px !important; } #landing.cfSiteV5 #recursos-tecnicos .cfsCapabilitiesV66Card code { color: rgb(11, 109, 204) !important; } #landing.cfSiteV5 #recursos-tecnicos .cfsCapabilitiesV66Note { color: rgb(82, 105, 133) !important; } html body #landing.cfSiteV5 #comparacao { background: rgb(234, 243, 255) !important; border-color: rgb(198, 219, 243) !important; } #landing.cfSiteV5 #comparacao .cfsCompareV58Foot { background: rgb(247, 251, 255) !important; border-color: rgb(198, 219, 243) !important; } #landing.cfSiteV5 #comparacao .cfsCompareV58Foot a { color: rgb(8, 107, 197) !important; } #landing.cfSiteV5 #comparacao .cfsCompareV58 thead th, #landing.cfSiteV5 #comparacao .cfsCompareV58 thead th.cfsCompareV58Brand { background: rgb(11, 40, 86) !important; color: rgb(255, 255, 255) !important; } #landing.cfSiteV5 #comparacao .cfsCompareV58 tbody th { color: rgb(16, 39, 68) !important; background: rgb(246, 250, 255) !important; } #landing.cfSiteV5 #comparacao .cfsCompareV58 tbody td.cfsCompareV58Best { background: rgb(232, 243, 255) !important; color: rgb(16, 39, 68) !important; box-shadow: rgb(22, 134, 255) 3px 0px 0px inset !important; } #landing.cfSiteV5 #comparacao .cfsCompareV58Check { background: rgb(22, 134, 255) !important; border-color: rgb(22, 134, 255) !important; color: rgb(255, 255, 255) !important; } #landing.cfSiteV5 .veratiuMobileDesktopNotice { background: linear-gradient(145deg, rgb(16, 47, 96), rgb(13, 69, 125)) !important; border-color: rgb(73, 159, 243) !important; color: rgb(234, 244, 255) !important; box-shadow: rgba(2, 15, 38, 0.23) 0px 14px 32px !important; } #landing.cfSiteV5 .veratiuMobileDesktopNotice strong { color: rgb(255, 255, 255) !important; } #landing.cfSiteV5 .veratiuMobileDesktopNotice span { color: rgb(219, 234, 255) !important; } #landing.cfSiteV5 .veratiuMobileDesktopNotice .veratiuAndroidSoon { margin-top: 14px !important; padding-top: 12px !important; border-top: 1px solid rgba(139, 198, 255, 0.32) !important; color: rgb(255, 255, 255) !important; font-weight: 900 !important; text-decoration: underline rgb(255, 255, 255) !important; text-underline-offset: 4px !important; } #landing.cfSiteV5 .veratiuMobileDesktopNotice a { color: rgb(181, 221, 255) !important; } #landing.cfSiteV5 .cfsFaq details { border-color: rgb(201, 218, 236) !important; } #landing.cfSiteV5 .cfsFaq summary { color: var(--preview-ink) !important; } #landing.cfSiteV5 .cfsFaq summary::after { color: rgb(11, 130, 237) !important; } #landing.cfSiteV5 .cfsContact { background: linear-gradient(120deg, rgb(11, 46, 92), rgb(12, 76, 141)) !important; border-color: rgba(105, 187, 255, 0.37) !important; color: white !important; } #landing.cfSiteV5 .cfsContact :is(h2, p) { color: white !important; } html body #landing.cfSiteV5 .cfsFooter { background: rgb(4, 17, 36) !important; color: rgb(214, 233, 255) !important; } #landing.cfSiteV5 .cfsFooter .cfsBrand, #landing.cfSiteV5 .cfsFooter :is(h2, p, a, button) { color: rgb(214, 233, 255) !important; } #landing.cfSiteV5 .cfsFooterBottom { border-color: rgb(37, 66, 100) !important; color: rgb(155, 180, 208) !important; } #landing.cfSiteV5 .cfsHelp { background: rgb(13, 57, 109) !important; border-color: rgb(52, 138, 220) !important; color: white !important; } #landing.cfSiteV5 .cfsMobileMenu summary span { background: rgb(234, 244, 255) !important; } #landing.cfSiteV5 .cfsMobileMenu nav { background: rgb(8, 29, 59) !important; border-color: rgb(44, 82, 124) !important; } #landing.cfSiteV5 .cfsMobileMenu nav a { color: rgb(245, 250, 255) !important; border-color: rgb(41, 71, 107) !important; } html body #landing.cfSiteV5 :is(#legalidade, #recursos-tecnicos, #comparacao, #guias, #faq) { background: none rgb(9, 31, 64) !important; border-color: rgb(43, 82, 127) !important; color: rgb(243, 248, 255) !important; } html body #landing.cfSiteV5 :is(#recursos-tecnicos, #guias) { background: rgb(13, 42, 83) !important; } #landing.cfSiteV5 :is(#legalidade, #recursos-tecnicos, #comparacao, #guias, #faq) :is(h2, h3, strong, summary) { color: rgb(245, 249, 255) !important; } #landing.cfSiteV5 :is(#legalidade, #recursos-tecnicos, #comparacao, #guias, #faq) :is(p, small, .cfsLegalNote, .cfsCapabilitiesV66Note) { color: rgb(190, 210, 235) !important; } #landing.cfSiteV5 :is(#legalidade, #recursos-tecnicos, #comparacao, #guias, #faq) .cfsEyebrow { color: rgb(135, 196, 255) !important; } #landing.cfSiteV5 :is(#legalidade, #recursos-tecnicos, #comparacao, #guias, #faq) a.cfsTextLink, #landing.cfSiteV5 :is(#legalidade, #recursos-tecnicos, #comparacao, #guias, #faq) p a { color: rgb(156, 209, 255) !important; } #landing.cfSiteV5 #legalidade .veratiuCoreStatement { color: rgb(255, 255, 255) !important; } #landing.cfSiteV5 #legalidade .cfsProofList article { background: rgb(18, 51, 96) !important; border-color: rgb(56, 103, 157) !important; } #landing.cfSiteV5 #recursos-tecnicos .cfsCapabilitiesV66Contract { background: rgb(18, 54, 99) !important; border-color: rgb(57, 106, 158) !important; } #landing.cfSiteV5 #recursos-tecnicos .cfsCapabilitiesV66Contract span { background: rgb(26, 70, 123) !important; color: rgb(245, 249, 255) !important; box-shadow: rgb(82, 134, 191) 0px 0px 0px 1px inset !important; } #landing.cfSiteV5 #recursos-tecnicos .cfsCapabilitiesV66Card { background: rgb(18, 51, 96) !important; border-color: rgb(57, 106, 158) !important; color: rgb(245, 249, 255) !important; } #landing.cfSiteV5 #recursos-tecnicos .cfsCapabilitiesV66Card code { color: rgb(158, 212, 255) !important; } #landing.cfSiteV5 #comparacao .cfsCompareV58Card, #landing.cfSiteV5 #comparacao .cfsCompareV58Foot { background: rgb(16, 46, 89) !important; border-color: rgb(60, 106, 157) !important; color: rgb(245, 249, 255) !important; } #landing.cfSiteV5 #comparacao .cfsCompareV58 :is(th, td) { border-color: rgb(56, 90, 131) !important; } #landing.cfSiteV5 #comparacao .cfsCompareV58 tbody th, #landing.cfSiteV5 #comparacao .cfsCompareV58 tbody td { background: rgb(18, 51, 96) !important; color: rgb(230, 241, 255) !important; } #landing.cfSiteV5 #comparacao .cfsCompareV58 tbody td.cfsCompareV58Best { background: rgb(25, 72, 121) !important; color: rgb(255, 255, 255) !important; } #landing.cfSiteV5 #comparacao .cfsCompareV58 tbody td::before { color: rgb(158, 212, 255) !important; } #landing.cfSiteV5 #comparacao .cfsCompareV58Foot a { color: rgb(158, 212, 255) !important; } #landing.cfSiteV5 #guias .cfsGuides > a { background: rgb(18, 54, 99) !important; border-color: rgb(57, 106, 158) !important; color: rgb(245, 249, 255) !important; } #landing.cfSiteV5 #guias .cfsGuides > a :is(span, b) { color: rgb(135, 196, 255) !important; } #landing.cfSiteV5 #faq .cfsFaq details { background: rgb(18, 51, 96) !important; border-color: rgb(57, 106, 158) !important; } #landing.cfSiteV5 #faq .cfsFaq summary { color: rgb(255, 255, 255) !important; } #landing.cfSiteV5 #faq .cfsFaq summary::after { color: rgb(135, 196, 255) !important; } #landing.cfSiteV5 #faq .cfsFaq details p { color: rgb(190, 210, 235) !important; } #landing.cfSiteV5 #faq .cfsFaq details p a { color: rgb(156, 209, 255) !important; } #landing.cfSiteV5 #faq .cfsFaq { display: grid !important; gap: 14px !important; } #landing.cfSiteV5 #faq .cfsFaq details, #landing.cfSiteV5 #faq .cfsFaq details:first-child { overflow: hidden; transition: opacity 0.6s, transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1), border-color 0.2s; border: 1px solid rgba(255, 255, 255, 0.75) !important; border-radius: 16px !important; background: linear-gradient(145deg, rgb(18, 54, 99), rgb(23, 71, 121)) !important; box-shadow: rgba(2, 15, 38, 0.2) 0px 12px 28px !important; } #landing.cfSiteV5 #faq .cfsFaq details[open] { border-color: rgb(255, 255, 255) !important; } #landing.cfSiteV5 #faq .cfsFaq summary { padding: 20px 52px 20px 20px !important; font-size: clamp(16px, 2vw, 19px) !important; font-weight: 750 !important; } #landing.cfSiteV5 #faq .cfsFaq summary::after { width: 34px; height: 34px; border-radius: 50%; background: rgb(35, 108, 186); text-align: center; line-height: 30px; right: 18px !important; top: calc(50% - 17px) !important; color: rgb(255, 255, 255) !important; } #landing.cfSiteV5 #faq .cfsFaq details p { margin: 0px !important; padding: 0px 20px 20px !important; } #landing.cfSiteV5 #faq.faq-reveal-ready .cfsFaq details:not(.is-visible) { opacity: 0; transform: translateY(28px); } html body, html body #landing.cfSiteV5, html body #landing.cfSiteV5 :is(#certfactLandingPluginV8, #demonstracao, #modalidades, #resultado, #como, #legalidade, #recursos-tecnicos, #comparacao, #guias, #faq, #contato) { background: none rgb(255, 255, 255) !important; color: rgb(16, 39, 68) !important; } html body #landing.cfSiteV5 section#como.cfsProcessSection, html body #landing.cfSiteV5 section#como.cfsProcessSection > .cfsSection { background: none rgb(255, 255, 255) !important; color: rgb(16, 39, 68) !important; } #landing.cfSiteV5 :is(#certfactLandingPluginV8, #demonstracao, #modalidades, #resultado, #como, #legalidade, #recursos-tecnicos, #comparacao, #guias, #faq, #contato) :is(h1, h2, h3, h4, strong, summary) { color: rgb(16, 39, 68) !important; } #landing.cfSiteV5 :is(#certfactLandingPluginV8, #demonstracao, #modalidades, #resultado, #como, #legalidade, #recursos-tecnicos, #comparacao, #guias, #faq, #contato) :is(p, small, li, dt, dd) { color: rgb(82, 105, 133) !important; } #landing.cfSiteV5 :is(#certfactLandingPluginV8, #demonstracao, #modalidades, #resultado, #como, #legalidade, #recursos-tecnicos, #comparacao, #guias, #faq, #contato) .cfsEyebrow { color: rgb(23, 105, 189) !important; } #landing.cfSiteV5 #certfactLandingPluginV8.cfsHero::before, #landing.cfSiteV5 #demonstracao.cfsDemoVideo::before { display: none !important; } #landing.cfSiteV5 .cfsHero h1, #landing.cfSiteV5 .cfsHero h1 em, #landing.cfSiteV5 .cfsDemoCopy :is(h2, p), #landing.cfSiteV5 #como .cfsSteps :is(h3, p) { color: rgb(16, 39, 68) !important; } #landing.cfSiteV5 :is(#modalidades .cfsMode, #resultado .bundle-card, #resultado .bundle-images > div, #legalidade .cfsProofList article, #recursos-tecnicos .cfsCapabilitiesV66Card, #guias .cfsGuides > a, #faq .cfsFaq details, #faq .cfsFaq details:first-child) { background: none rgb(243, 248, 255) !important; border: 1px solid rgb(213, 226, 241) !important; color: rgb(16, 39, 68) !important; box-shadow: rgba(16, 39, 68, 0.06) 0px 8px 22px !important; } #landing.cfSiteV5 :is(#modalidades .cfsMode, #resultado .bundle-card, #legalidade .cfsProofList article, #recursos-tecnicos .cfsCapabilitiesV66Card, #guias .cfsGuides > a, #faq .cfsFaq details) :is(h3, strong, summary) { color: rgb(16, 39, 68) !important; } #landing.cfSiteV5 :is(#modalidades .cfsMode, #resultado .bundle-card, #legalidade .cfsProofList article, #recursos-tecnicos .cfsCapabilitiesV66Card, #guias .cfsGuides > a, #faq .cfsFaq details) :is(p, small, li) { color: rgb(82, 105, 133) !important; } #landing.cfSiteV5 #faq .cfsFaq details[open] { border-color: rgb(75, 155, 236) !important; } #landing.cfSiteV5 #faq .cfsFaq details p { color: rgb(82, 105, 133) !important; } #landing.cfSiteV5 #faq .cfsFaq summary { color: rgb(16, 39, 68) !important; } #landing.cfSiteV5 #modalidades .notice, #landing.cfSiteV5 #modalidades .cfsPurchaseTrust, #landing.cfSiteV5 #modalidades > div[style], #landing.cfSiteV5 #recursos-tecnicos .cfsCapabilitiesV66Contract, #landing.cfSiteV5 #comparacao .cfsCompareV58Foot { background: rgb(243, 248, 255) !important; border-color: rgb(213, 226, 241) !important; color: rgb(16, 39, 68) !important; } #landing.cfSiteV5 #comparacao :is(.cfsCompareV58Card, .cfsCompareV58 tbody th, .cfsCompareV58 tbody td) { background: rgb(243, 248, 255) !important; color: rgb(16, 39, 68) !important; } #landing.cfSiteV5 #comparacao .cfsCompareV58 tbody td.cfsCompareV58Best { background: rgb(226, 240, 255) !important; color: rgb(16, 39, 68) !important; } #landing.cfSiteV5 .veratiuMobileDesktopNotice { background: rgb(243, 248, 255) !important; color: rgb(16, 39, 68) !important; border-color: rgb(213, 226, 241) !important; } #landing.cfSiteV5 .veratiuMobileDesktopNotice :is(strong, span, .veratiuAndroidSoon) { color: rgb(16, 39, 68) !important; } #landing.cfSiteV5 .veratiuMobileDesktopNotice .veratiuAndroidSoon { text-decoration-color: rgb(16, 39, 68) !important; } #landing.cfSiteV5 .cfsContact { background: rgb(243, 248, 255) !important; color: rgb(16, 39, 68) !important; border-color: rgb(213, 226, 241) !important; } #landing.cfSiteV5 .cfsContact :is(h2, p) { color: rgb(16, 39, 68) !important; } #landing.cfSiteV5 .cfsFooter, html body #landing.cfSiteV5 .cfsFooter { background: rgb(255, 255, 255) !important; color: rgb(82, 105, 133) !important; } #landing.cfSiteV5 .cfsFooter .cfsBrand, #landing.cfSiteV5 .cfsFooter :is(h2, p, a, button) { color: rgb(16, 39, 68) !important; } html body #landing.cfSiteV5 section#certfactLandingPluginV8.cfsHero, html body #landing.cfSiteV5 section#demonstracao.cfsDemoVideo { background: linear-gradient(135deg, rgb(6, 21, 45), rgb(11, 40, 84)) !important; color: rgb(255, 255, 255) !important; } #landing.cfSiteV5 :is(#certfactLandingPluginV8, #demonstracao) :is(h1, h2, h3, h4, strong), #landing.cfSiteV5 .cfsHero h1, #landing.cfSiteV5 .cfsHero h1 em, #landing.cfSiteV5 .cfsDemoCopy h2 { color: rgb(255, 255, 255) !important; } #landing.cfSiteV5 :is(#certfactLandingPluginV8, #demonstracao) :is(p, small), #landing.cfSiteV5 .cfsHero .cfsLead, #landing.cfSiteV5 .cfsDemoCopy > p { color: rgb(194, 212, 235) !important; } html body #landing.cfSiteV5 #modalidades .cfsMode :is(h3, .cfsPrice, li, strong), html body #landing.cfSiteV5 #resultado .bundle-card :is(h3, strong), html body #landing.cfSiteV5 #modalidades :is(.notice, .notice strong, .cfsPurchaseTrust span), html body #landing.cfSiteV5 #recursos-tecnicos .cfsCapabilitiesV66Card :is(h3, strong), html body #landing.cfSiteV5 #legalidade .cfsProofList article :is(h3, strong), html body #landing.cfSiteV5 #guias .cfsGuides > a :is(h3, strong), html body #landing.cfSiteV5 #faq .cfsFaq summary { color: rgb(16, 39, 68) !important; } html body #landing.cfSiteV5 #modalidades .cfsMode :is(p, small, ul, .cfsPerCapture), html body #landing.cfSiteV5 #resultado .bundle-card :is(p, small), html body #landing.cfSiteV5 #recursos-tecnicos .cfsCapabilitiesV66Card :is(p, small), html body #landing.cfSiteV5 #legalidade .cfsProofList article :is(p, small), html body #landing.cfSiteV5 #guias .cfsGuides > a :is(p, small), html body #landing.cfSiteV5 #faq .cfsFaq details p { color: rgb(82, 105, 133) !important; } html body #landing.cfSiteV5 #modalidades .cfsMode .cfsButton--outline, html body #landing.cfSiteV5 #resultado .bundle-all { color: rgb(255, 255, 255) !important; } html body #landing.cfSiteV5 :is(#modalidades, #resultado, #como, #legalidade, #recursos-tecnicos, #comparacao, #guias, #faq, #contato) .cfsSectionHead > p, html body #landing.cfSiteV5 :is(#modalidades, #resultado, #como, #legalidade, #recursos-tecnicos, #comparacao, #guias, #faq, #contato) .cfsSectionHead p, html body #landing.cfSiteV5 #como .cfsSteps p { color: rgb(82, 105, 133) !important; } html body #landing.cfSiteV5 :is(#modalidades, #resultado, #como, #legalidade, #recursos-tecnicos, #comparacao, #guias, #faq, #contato) :is(.cfsTextLink, a:not(.cfsButton)) { color: rgb(23, 105, 189) !important; } html body #landing.cfSiteV5 #certfactLandingPluginV8 .cfpDeliveryHeading, html body #landing.cfSiteV5 #certfactLandingPluginV8 .cfpOutputs :is(strong, small), html body #landing.cfSiteV5 #certfactLandingPluginV8 .cfpBrandNode :is(strong, small) { color: rgb(242, 249, 255) !important; } html body #landing.cfSiteV5 :is(#certfactLandingPluginV8, #demonstracao) .cfsEyebrow { color: rgb(139, 197, 255) !important; } html body #landing.cfSiteV5 #faq > div:first-child p { color: rgb(82, 105, 133) !important; } html body #landing.cfSiteV5 :is(#modalidades, #recursos-tecnicos, #guias) { background: none rgb(234, 243, 255) !important; } html body #landing.cfSiteV5 :is(#resultado, #legalidade, #comparacao, #faq) { background: none rgb(255, 255, 255) !important; } html body #landing.cfSiteV5 section#como.cfsProcessSection, html body #landing.cfSiteV5 section#como.cfsProcessSection > .cfsSection, html body #landing.cfSiteV5 #contato.cfsContact, html body #landing.cfSiteV5 .cfsContact, html body #landing.cfSiteV5 .cfsFooter { background: linear-gradient(135deg, rgb(7, 27, 56), rgb(13, 50, 100)) !important; color: rgb(245, 249, 255) !important; } html body #landing.cfSiteV5 :is(#como, #contato) :is(h2, h3, h4, strong), html body #landing.cfSiteV5 .cfsContact :is(h2, h3, strong), html body #landing.cfSiteV5 .cfsFooter :is(h2, h3, strong) { color: rgb(255, 255, 255) !important; } html body #landing.cfSiteV5 :is(#como, #contato) :is(p, small, li), html body #landing.cfSiteV5 .cfsContact :is(p, small), html body #landing.cfSiteV5 .cfsFooter :is(p, small, a) { color: rgb(195, 215, 238) !important; } html body #landing.cfSiteV5 :is(#como, #contato) .cfsEyebrow { color: rgb(139, 197, 255) !important; } html body #landing.cfSiteV5 #modalidades .cfsMode, html body #landing.cfSiteV5 #guias .cfsGuides > a, html body #landing.cfSiteV5 #recursos-tecnicos .cfsCapabilitiesV66Card { background: rgb(255, 255, 255) !important; border-color: rgb(212, 227, 244) !important; } html body #landing.cfSiteV5 #resultado .bundle-card, html body #landing.cfSiteV5 #legalidade .cfsProofList article, html body #landing.cfSiteV5 #faq .cfsFaq details { background: rgb(242, 247, 253) !important; border-color: rgb(211, 225, 240) !important; } html body #landing.cfSiteV5 #faq .cfsFaq details[open] { border-color: rgb(75, 155, 236) !important; } html body #landing.cfSiteV5 #recursos-tecnicos :is(#veratiuTechnicalDetailsV75, #veratiuComparisonDetailsV75), html body #landing.cfSiteV5 #comparacao #veratiuComparisonDetailsV75 { background: rgb(12, 42, 85) !important; border-color: rgb(91, 146, 202) !important; } html body #landing.cfSiteV5 section#como.cfsProcessSection .cfsSectionHead > p, html body #landing.cfSiteV5 section#como.cfsProcessSection .cfsSteps li p, html body #landing.cfSiteV5 #contato.cfsContact p { color: rgb(195, 215, 238) !important; } html body #landing.cfSiteV5 section#como.cfsProcessSection .cfsSteps li h3, html body #landing.cfSiteV5 #contato.cfsContact :is(h2, h3, strong) { color: rgb(255, 255, 255) !important; } html body #landing.cfSiteV5 section#como.cfsProcessSection .cfsSteps li a, html body #landing.cfSiteV5 #contato.cfsContact a { color: rgb(145, 202, 255) !important; } html body #landing.cfSiteV5 #certfactLandingPluginV8 .cfpDeliveryHeading span { color: rgb(242, 249, 255) !important; } html body #landing.cfSiteV5 #recursos-tecnicos .cfsCapabilitiesV66Note { color: rgb(82, 105, 133) !important; } @media (max-width: 680px) { #landing .preview-banner { padding: 8px 18px; font-size: 10px; } #landing.cfSiteV5 .cfpVisual { padding: 8px !important; } #landing.cfSiteV5 #certfactLandingPluginV8.cfsHero { display: flex !important; flex-direction: column !important; align-items: center !important; } #landing.cfSiteV5 #certfactLandingPluginV8 .cfsHeroGrid { display: contents !important; } #landing.cfSiteV5 #certfactLandingPluginV8 .cfpVisual { order: 1 !important; width: calc(100% - 36px) !important; max-width: 620px !important; margin: 30px auto 0px !important; } #landing.cfSiteV5 #certfactLandingPluginV8 .veratiuEvidenceSeals--bottom { order: 2 !important; margin-top: 22px !important; } #landing.cfSiteV5 #certfactLandingPluginV8 .cfsHeroCopy { order: 3 !important; width: calc(100% - 36px) !important; max-width: 620px !important; margin: 16px auto 0px !important; } #landing.cfSiteV5 #resultado > .cfsContainer.cfsSection { display: flex !important; flex-direction: column !important; } #landing.cfSiteV5 #resultado .bundle-delivery-title { order: 1 !important; margin: 26px 0px 0px !important; } #landing.cfSiteV5 #resultado .bundle-images { order: 2 !important; margin: 16px 0px 24px !important; } #landing.cfSiteV5 #resultado .bundle-grid { order: 3 !important; } #landing.cfSiteV5 #resultado .bundle-all { order: 4 !important; } #landing.cfSiteV5 #resultado .bundle-note { order: 5 !important; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } #landing.cfSiteV5 .cfpOutputs > div strong::before { opacity: 1 !important; transform: none !important; animation: auto ease 0s 1 normal none running none !important; } #landing.cfSiteV5 .cfsHero > .veratiuEvidenceSeals--bottom { display: grid !important; height: auto !important; overflow: visible !important; gap: 8px !important; } #landing.cfSiteV5 .cfsHero > .veratiuEvidenceSeals--bottom > span { position: static !important; opacity: 1 !important; transform: none !important; animation: auto ease 0s 1 normal none running none !important; } #landing.cfSiteV5 #faq .cfsFaq details { opacity: 1 !important; transform: none !important; transition: none !important; } }html body #landing.cfSiteV5 .cfsHeader .cfsHeaderCta,html body #landing.cfSiteV5 .cfsButton--primary,html body #cookieBanner36 button.accept{background:#3f86f3!important;border-color:#3f86f3!important;color:#fff!important} html body #landing.cfSiteV5 #cookieBanner36.cf39Cookies button.accept{background:#3f86f3!important;border-color:#3f86f3!important;color:#fff!important} /* VERATIU_BLUE_COMPLETE_V17 — overrides for later inline legacy styles. */ html body #landing.cfSiteV5 #legalidade .cfsProofList article > span, html body #landing.cfSiteV5 .cfsTrust > div > b { background: linear-gradient(135deg, #1769bd, #3f86f3) !important; border-color: #80bbff !important; color: #fff !important; box-shadow: 0 6px 14px rgba(15, 67, 130, .17) !important; } html body #landing.cfSiteV5 #legalidade .veratiuCoreStatement { background: #164276 !important; border-color: #5c99d8 !important; color: #fff !important; } html body #landing.cfSiteV5 .cfsTextLink, html body #landing.cfSiteV5 .cfsButton--outline { border-color: #8dbff7 !important; color: #1769bd !important; } html body #landing.cfSiteV5 #comparacao .cfsCompareV58 thead th, html body #landing.cfSiteV5 #comparacao .cfsCompareV58 thead th.cfsCompareV58Brand { background: #0b2854 !important; border-color: #8dbff7 !important; color: #fff !important; } html body #landing.cfSiteV5 #comparacao .cfsCompareV58Caution { background: #eaf3ff !important; border-color: #b9d8f9 !important; color: #164276 !important; } html body #landing.cfSiteV5 .bundle-all { background: #3f86f3 !important; border-color: #3f86f3 !important; color: #fff !important; } html body #landing.cfSiteV5 .bundle-all :is(strong, small, span) { color: #fff !important; } html body #landing.cfSiteV5 #resultado img[src*="arquivos-entregues.jpg"], html body #landing.cfSiteV5 #resultado img[src*="arquivos-baixados.jpg"] { filter: hue-rotate(170deg) saturate(1.08) !important; } /* VERATIU hero: staged introduction and restrained pointer depth. */ @media (prefers-reduced-motion: no-preference) { #landing.cfSiteV5.vtMotionReady #certfactLandingPluginV8 .cfpVisual { --vt-pitch: 0deg; --vt-yaw: 0deg; --vt-shift-x: 0px; --vt-shift-y: 0px; transform: perspective(1100px) translate3d(var(--vt-shift-x), var(--vt-shift-y), 0) rotateX(var(--vt-pitch)) rotateY(var(--vt-yaw)); transform-style: preserve-3d; transition: transform 90ms ease-out; animation: vtHeroStageIn 950ms cubic-bezier(.19,1,.22,1) both; } #landing.cfSiteV5.vtMotionReady #certfactLandingPluginV8 .cfpVisualTop { animation: vtHeroRise 700ms 180ms both; } #landing.cfSiteV5.vtMotionReady #certfactLandingPluginV8 .cfpSource--whatsapp { animation: vtHeroRise 800ms 380ms both; } #landing.cfSiteV5.vtMotionReady #certfactLandingPluginV8 .cfpSource--site { animation: vtHeroRise 800ms 500ms both; } #landing.cfSiteV5.vtMotionReady #certfactLandingPluginV8 .cfpSource--instagram { animation: vtHeroRise 800ms 620ms both; } #landing.cfSiteV5.vtMotionReady #certfactLandingPluginV8 .cfpConnections path { stroke-dasharray: 800; stroke-dashoffset: 800; animation: vtHeroTrace 1350ms 720ms ease-out both; } #landing.cfSiteV5.vtMotionReady #certfactLandingPluginV8 .cfpBrandNode { animation: vtHeroLight 850ms 1030ms both; } #landing.cfSiteV5.vtMotionReady #certfactLandingPluginV8 .cfpDelivery { animation: vtHeroRise 850ms 1370ms both; } #landing.cfSiteV5.vtMotionReady #certfactLandingPluginV8 .cfpOutputs > div:nth-child(1) { animation: vtHeroRise 620ms 1630ms both; } #landing.cfSiteV5.vtMotionReady #certfactLandingPluginV8 .cfpOutputs > div:nth-child(2) { animation: vtHeroRise 620ms 1780ms both; } #landing.cfSiteV5.vtMotionReady #certfactLandingPluginV8 .cfpOutputs > div:nth-child(3) { animation: vtHeroRise 620ms 1930ms both; } #landing.cfSiteV5.vtMotionReady #certfactLandingPluginV8 .cfpVisual figcaption { animation: vtHeroRise 700ms 2170ms both; } #landing.cfSiteV5.vtMotionReady #certfactLandingPluginV8 .cfsHeroCopy > .cfsEyebrow { animation: vtHeroRise 650ms 90ms both; } #landing.cfSiteV5.vtMotionReady #certfactLandingPluginV8 .cfsHeroCopy > h1 { animation: vtHeroRise 850ms 220ms both; } #landing.cfSiteV5.vtMotionReady #certfactLandingPluginV8 .cfsHeroCopy > .cfsLead { animation: vtHeroRise 700ms 450ms both; } #landing.cfSiteV5.vtMotionReady #certfactLandingPluginV8 .cfsHeroCopy > .cfsActions { animation: vtHeroRise 700ms 620ms both; } @keyframes vtHeroStageIn { from { opacity: 0; filter: blur(7px) brightness(.55); } to { opacity: 1; filter: blur(0) brightness(1); } } @keyframes vtHeroRise { from { opacity: 0; translate: 0 20px; filter: blur(3px); } to { opacity: 1; translate: 0 0; filter: blur(0); } } @keyframes vtHeroTrace { from { stroke-dashoffset: 800; opacity: .15; } to { stroke-dashoffset: 0; opacity: 1; } } @keyframes vtHeroLight { from { opacity: 0; filter: brightness(.3) drop-shadow(0 0 0 rgba(65,175,255,0)); } 65% { opacity: 1; filter: brightness(1.6) drop-shadow(0 0 22px rgba(65,175,255,.6)); } to { opacity: 1; filter: brightness(1) drop-shadow(0 0 0 rgba(65,175,255,0)); } } } @media (prefers-reduced-motion: reduce) { #landing.cfSiteV5 #certfactLandingPluginV8 .cfpVisual, #landing.cfSiteV5 #certfactLandingPluginV8 .cfpVisual * { animation-duration: .01ms !important; animation-delay: 0ms !important; transition-duration: .01ms !important; } } /* VERATIU digital record: particles form a screen, then a scan confirms it. */ #landing.cfSiteV5 #certfactLandingPluginV8 .cfpVisual { position:relative; isolation:isolate; } #landing.cfSiteV5 #certfactLandingPluginV8 .vtSignalIntro { display:none; position:absolute; inset:0; z-index:12; overflow:hidden; border-radius:inherit; pointer-events:none; background:radial-gradient(circle at 50% 42%,#123b72 0%,#0a264d 35%,#06172f 77%); color:#eaf6ff; } html.vtMotionBoot #landing.cfSiteV5 #certfactLandingPluginV8 .vtSignalIntro, #landing.cfSiteV5.vtMotionReady #certfactLandingPluginV8 .vtSignalIntro { display:block; } #landing.cfSiteV5 #certfactLandingPluginV8 .vtSignalGrid { position:absolute; inset:8%; opacity:0; background-image:radial-gradient(circle,rgba(77,170,255,.8) 1px,transparent 1.5px); background-size:20px 20px; mask-image:radial-gradient(ellipse at center,#000 8%,transparent 72%); } #landing.cfSiteV5 #certfactLandingPluginV8 .vtSignalParticles { position:absolute; inset:0; z-index:5; } #landing.cfSiteV5 #certfactLandingPluginV8 .vtSignalParticles i { position:absolute; width:var(--vt-size); height:var(--vt-size); border-radius:50%; background:#a6ddff; box-shadow:0 0 12px 3px rgba(75,184,255,.75); } #landing.cfSiteV5 #certfactLandingPluginV8 .vtSignalLines { position:absolute; inset:0; z-index:4; width:100%; height:100%; overflow:visible; filter:drop-shadow(0 0 8px rgba(52,157,255,.5)); } #landing.cfSiteV5 #certfactLandingPluginV8 .vtSignalLine { opacity:0; stroke:#55b8ff; stroke-width:1.8; vector-effect:non-scaling-stroke; } #landing.cfSiteV5 #certfactLandingPluginV8 .vtSignalScreen { position:absolute; z-index:6; top:9.5%; left:27.5%; width:45%; height:67.5%; overflow:hidden; opacity:0; border:0; border-radius:32px; background:transparent; box-shadow:none; } #landing.cfSiteV5 #certfactLandingPluginV8 .vtSignalScreenTop { height:14%; display:flex; align-items:center; gap:5px; padding:0 8%; border-bottom:0; background:transparent; } #landing.cfSiteV5 #certfactLandingPluginV8 .vtSignalScreenTop i { width:5px; height:5px; border-radius:50%; background:#65bdff; } #landing.cfSiteV5 #certfactLandingPluginV8 .vtSignalScreenTop strong { margin-left:auto; font:800 clamp(12px,1.6vw,20px)/1 system-ui,sans-serif; letter-spacing:.07em; } #landing.cfSiteV5 #certfactLandingPluginV8 .vtSignalScreenTop sup { font-size:.42em; } #landing.cfSiteV5 #certfactLandingPluginV8 .vtSignalScreenBody { padding:10% 11%; } #landing.cfSiteV5 #certfactLandingPluginV8 .vtSignalEyebrow { display:block; color:#85caff; font:700 clamp(7px,.8vw,10px)/1.3 system-ui,sans-serif; letter-spacing:.15em; } #landing.cfSiteV5 #certfactLandingPluginV8 .vtSignalTitle { display:block; margin-top:9%; color:#eff8ff; font:750 clamp(13px,1.55vw,21px)/1.17 system-ui,sans-serif; } #landing.cfSiteV5 #certfactLandingPluginV8 .vtSignalDoc { display:grid; gap:11px; margin-top:15%; } #landing.cfSiteV5 #certfactLandingPluginV8 .vtSignalDoc span { height:3px; border-radius:3px; background:linear-gradient(90deg,#5eb8ff,rgba(95,187,255,.15)); } #landing.cfSiteV5 #certfactLandingPluginV8 .vtSignalDoc span:nth-child(2) { width:76%; } #landing.cfSiteV5 #certfactLandingPluginV8 .vtSignalDoc span:nth-child(3) { width:89%; } #landing.cfSiteV5 #certfactLandingPluginV8 .vtSignalDoc span:nth-child(4) { width:59%; } #landing.cfSiteV5 #certfactLandingPluginV8 .vtSignalFiles { display:flex; gap:8%; margin-top:24%; } #landing.cfSiteV5 #certfactLandingPluginV8 .vtSignalFiles b { display:grid; place-items:center; width:25%; aspect-ratio:1; border:1px solid #58adff; border-radius:9px; background:rgba(60,146,255,.13); color:#bfe6ff; font:800 clamp(9px,1vw,13px)/1 ui-monospace,monospace; } #landing.cfSiteV5 #certfactLandingPluginV8 .vtSignalScan { position:absolute; left:0; top:0; width:100%; height:13%; opacity:0; background:linear-gradient(to bottom,transparent,rgba(72,183,255,.16),rgba(146,225,255,.7) 95%,#ecfbff); box-shadow:0 9px 27px rgba(47,171,255,.48); } #landing.cfSiteV5 #certfactLandingPluginV8 .vtSignalChip { position:absolute; z-index:6; display:inline-flex; align-items:center; min-height:30px; max-width:34%; padding:4px 10px; opacity:0; border:1px solid rgba(96,184,255,.8); border-radius:999px; background:rgba(5,24,52,.94); box-shadow:0 0 18px rgba(20,119,241,.2); color:#d7edff; font:600 clamp(9px,1.08vw,12px)/1.15 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.01em; white-space:nowrap; } #landing.cfSiteV5 #certfactLandingPluginV8 .vtSignalChip--a { left:2%; top:13%; --vt-side:-38px; --vt-delay:.55s; } #landing.cfSiteV5 #certfactLandingPluginV8 .vtSignalChip--b { left:3%; top:46%; --vt-side:-38px; --vt-delay:1.08s; } #landing.cfSiteV5 #certfactLandingPluginV8 .vtSignalChip--c { left:2%; top:72%; --vt-side:-38px; --vt-delay:1.58s; } #landing.cfSiteV5 #certfactLandingPluginV8 .vtSignalChip--d { right:2%; top:17%; --vt-side:38px; --vt-delay:.8s; } #landing.cfSiteV5 #certfactLandingPluginV8 .vtSignalChip--e { right:2%; top:52%; --vt-side:38px; --vt-delay:1.32s; } #landing.cfSiteV5 #certfactLandingPluginV8 .vtSignalChip--f { right:2%; top:73%; --vt-side:38px; --vt-delay:1.82s; } #landing.cfSiteV5 #certfactLandingPluginV8 .vtSignalCheck { position:absolute; z-index:7; right:12%; bottom:22%; display:grid; place-items:center; width:clamp(48px,6vw,76px); aspect-ratio:1; opacity:0; border:3px solid #a1e1ff; border-radius:50%; background:#147ff0; box-shadow:0 0 0 8px rgba(43,155,255,.18),0 0 36px #248df5; color:white; font:900 clamp(27px,3vw,42px)/1 system-ui,sans-serif; } @media (prefers-reduced-motion:no-preference) { #landing.cfSiteV5.vtMotionReady #certfactLandingPluginV8 .vtSignalGrid { animation:vtSignalGridPulse 2.5s .65s ease-out both; } #landing.cfSiteV5.vtMotionReady #certfactLandingPluginV8 .vtSignalParticles i { animation:vtSignalGather var(--vt-duration,2s) var(--vt-delay) cubic-bezier(.14,.73,.22,1) both; } #landing.cfSiteV5.vtMotionReady #certfactLandingPluginV8 .vtSignalLine { stroke-dasharray:1; stroke-dashoffset:1; animation:vtSignalDraw 1.8s linear both; } #landing.cfSiteV5.vtMotionReady #certfactLandingPluginV8 .vtSignalLine--one,#landing.cfSiteV5.vtMotionReady #certfactLandingPluginV8 .vtSignalLine--two { animation-delay:7.25s; } #landing.cfSiteV5.vtMotionReady #certfactLandingPluginV8 .vtSignalLine--three,#landing.cfSiteV5.vtMotionReady #certfactLandingPluginV8 .vtSignalLine--four { animation-delay:7.9s; } #landing.cfSiteV5.vtMotionReady #certfactLandingPluginV8 .vtSignalLine--five,#landing.cfSiteV5.vtMotionReady #certfactLandingPluginV8 .vtSignalLine--six { animation-delay:8.55s; } #landing.cfSiteV5.vtMotionReady #certfactLandingPluginV8 .vtSignalScreen { animation:vtSignalScreenIn .9s 6.4s cubic-bezier(.16,1,.3,1) both; } #landing.cfSiteV5.vtMotionReady #certfactLandingPluginV8 .vtSignalChip { animation:vtSignalChipArrive .68s calc(var(--vt-delay) + 8.2s) cubic-bezier(.2,.9,.2,1) both; } #landing.cfSiteV5.vtMotionReady #certfactLandingPluginV8 .vtSignalScan { animation:vtSignalScanSweep 1.7s 10.5s ease-in-out both; } #landing.cfSiteV5.vtMotionReady #certfactLandingPluginV8 .vtSignalCheck { animation:vtSignalCheckIn .7s 12.3s cubic-bezier(.2,1.5,.4,1) both; } @keyframes vtSignalGather { 0%{opacity:0;translate:var(--vt-dx) var(--vt-dy);scale:.2} 35%{opacity:1} 80%{opacity:.85;translate:0 0;scale:1} 100%{opacity:var(--vt-alpha,.82);translate:0 0;scale:1} } @keyframes vtSignalDraw { from{opacity:1;stroke-dashoffset:1} to{opacity:1;stroke-dashoffset:0} } @keyframes vtSignalGridPulse { from{opacity:0;transform:scale(1.2)} to{opacity:.4;transform:scale(1)} } @keyframes vtSignalScreenIn { from{opacity:0;filter:blur(10px)} to{opacity:1;filter:blur(0)} } @keyframes vtSignalChipArrive { from{opacity:0;translate:var(--vt-side) 0;filter:blur(5px)} to{opacity:1;translate:0 0;filter:blur(0)} } @keyframes vtSignalScanSweep { 0%{opacity:0;transform:translateY(-100%)} 12%{opacity:1} 86%{opacity:1} 100%{opacity:0;transform:translateY(760%)} } @keyframes vtSignalCheckIn { from{opacity:0;transform:scale(.15) rotate(-25deg)} to{opacity:1;transform:scale(1) rotate(0)} } } @media (prefers-reduced-motion:reduce) { #landing.cfSiteV5 #certfactLandingPluginV8 .vtSignalIntro { display:block; } #landing.cfSiteV5 #certfactLandingPluginV8 .vtSignalGrid { opacity:.4; } #landing.cfSiteV5 #certfactLandingPluginV8 .vtSignalLine,#landing.cfSiteV5 #certfactLandingPluginV8 .vtSignalScreen,#landing.cfSiteV5 #certfactLandingPluginV8 .vtSignalChip,#landing.cfSiteV5 #certfactLandingPluginV8 .vtSignalCheck { opacity:1; } } @media (max-width:650px) { #landing.cfSiteV5 #certfactLandingPluginV8 .vtSignalChip { min-height:24px; padding:3px 6px; font-size:8px; } #landing.cfSiteV5 #certfactLandingPluginV8 .vtSignalScreen { left:27.5%; width:45%; } #landing.cfSiteV5 #certfactLandingPluginV8 .vtSignalScreenBody { padding:12% 8%; } #landing.cfSiteV5 #certfactLandingPluginV8 .vtSignalCheck { width:47px; right:6%; } } #landing.cfSiteV5 #certfactLandingPluginV8 .vtSignalScreenTop strong, #landing.cfSiteV5 #certfactLandingPluginV8 .vtSignalTitle, #landing.cfSiteV5 #certfactLandingPluginV8 .vtSignalEyebrow { text-shadow:0 2px 5px #04122b,0 0 13px #04122b,0 0 22px #04122b; } /* The phone is present from the first frame; incoming points fill its surface. */ #landing.cfSiteV5 #certfactLandingPluginV8 .vtSignalPhone { position:absolute; inset:0; z-index:5; transform-origin:50% 43%; } #landing.cfSiteV5 #certfactLandingPluginV8 .vtSignalPhoneFrame { position:absolute; z-index:1; left:26%; top:8%; width:48%; height:70%; box-sizing:border-box; border:2px solid rgba(113,198,255,.68); border-radius:clamp(25px,4vw,48px); background:linear-gradient(145deg,rgba(30,96,161,.17),rgba(7,30,64,.12)); box-shadow:inset 0 0 22px rgba(62,170,255,.12),0 0 27px rgba(42,141,247,.12); } #landing.cfSiteV5 #certfactLandingPluginV8 .vtSignalParticles { z-index:2; } #landing.cfSiteV5 #certfactLandingPluginV8 .vtSignalScreen { z-index:3; } #landing.cfSiteV5 #certfactLandingPluginV8 .vtSignalParticles i { box-shadow:0 0 7px 1px rgba(75,184,255,.57); } @media (prefers-reduced-motion:no-preference) { #landing.cfSiteV5.vtMotionReady #certfactLandingPluginV8 .vtSignalPhone { animation:vtSignalPhoneGrow 1.3s 13.15s cubic-bezier(.19,1,.22,1) both; } @keyframes vtSignalPhoneGrow { from{transform:scale(1)} to{transform:scale(1.14)} } } /* Surrounding certificates continue to float after the phone settles. */ #landing.cfSiteV5 #certfactLandingPluginV8 .vtSignalChip--a { --vt-orbit-phase:0s; --vt-orbit-x:7px; --vt-orbit-y:5px; } #landing.cfSiteV5 #certfactLandingPluginV8 .vtSignalChip--b { --vt-orbit-phase:.8s; --vt-orbit-x:-8px; --vt-orbit-y:6px; } #landing.cfSiteV5 #certfactLandingPluginV8 .vtSignalChip--c { --vt-orbit-phase:1.6s; --vt-orbit-x:6px; --vt-orbit-y:-7px; } #landing.cfSiteV5 #certfactLandingPluginV8 .vtSignalChip--d { --vt-orbit-phase:.4s; --vt-orbit-x:-7px; --vt-orbit-y:5px; } #landing.cfSiteV5 #certfactLandingPluginV8 .vtSignalChip--e { --vt-orbit-phase:1.2s; --vt-orbit-x:8px; --vt-orbit-y:-6px; } #landing.cfSiteV5 #certfactLandingPluginV8 .vtSignalChip--f { --vt-orbit-phase:2s; --vt-orbit-x:-6px; --vt-orbit-y:-5px; } @media (prefers-reduced-motion:no-preference) { #landing.cfSiteV5.vtMotionReady #certfactLandingPluginV8 .vtSignalChip { animation:vtSignalChipArrive .68s calc(var(--vt-delay) + 8.2s) cubic-bezier(.2,.9,.2,1) both,vtSignalOrbit 6s calc(14.5s + var(--vt-orbit-phase)) ease-in-out infinite; } @keyframes vtSignalOrbit { 0%,100%{transform:translate(0,0)} 25%{transform:translate(var(--vt-orbit-x),0)} 50%{transform:translate(var(--vt-orbit-x),var(--vt-orbit-y))} 75%{transform:translate(0,var(--vt-orbit-y))} } } /* Floating dotted phone, without an outer frame. */ #landing.cfSiteV5 #certfactLandingPluginV8 .vtSignalScreen { top:6%; left:25%; width:50%; height:73%; overflow:visible; border:0; background:transparent; box-shadow:none; } #landing.cfSiteV5 #certfactLandingPluginV8 .vtSignalAppLogos { position:absolute; top:12%; left:9%; right:9%; display:flex; align-items:center; justify-content:space-between; gap:10%; color:#7cc8ff; } #landing.cfSiteV5 #certfactLandingPluginV8 .vtSignalAppLogos svg { width:23%; max-width:46px; aspect-ratio:1; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; filter:drop-shadow(0 0 8px rgba(64,170,255,.55)); } #landing.cfSiteV5 #certfactLandingPluginV8 .vtSignalIdentity { position:absolute; top:38%; left:10%; right:10%; display:grid; justify-items:center; gap:8px; color:#f4fbff; text-align:center; text-shadow:0 2px 12px #03142e; } #landing.cfSiteV5 #certfactLandingPluginV8 .vtSignalIdentity strong { font:800 clamp(18px,2.2vw,31px)/1 system-ui,sans-serif; letter-spacing:.06em; } #landing.cfSiteV5 #certfactLandingPluginV8 .vtSignalIdentity sup { font-size:.4em; vertical-align:top; } #landing.cfSiteV5 #certfactLandingPluginV8 .vtSignalIdentity span { color:#9fd7ff; font:700 clamp(7px,.8vw,11px)/1.2 system-ui,sans-serif; letter-spacing:.18em; } #landing.cfSiteV5 #certfactLandingPluginV8 .vtSignalResult { position:absolute; left:3%; right:3%; bottom:9%; display:flex; align-items:center; justify-content:center; gap:11px; min-height:65px; } #landing.cfSiteV5 #certfactLandingPluginV8 .vtSignalCheck { position:relative; inset:auto; flex:none; width:clamp(43px,5vw,65px); height:clamp(43px,5vw,65px); font-size:clamp(25px,2.6vw,36px); } #landing.cfSiteV5 #certfactLandingPluginV8 .vtSignalResultText { opacity:0; color:#d3eeff; font:600 clamp(10px,1.03vw,15px)/1.3 system-ui,sans-serif; text-shadow:0 2px 8px #03142e; } #landing.cfSiteV5 #certfactLandingPluginV8 .vtSignalResultText strong { color:#fff; font-weight:800; } @media (prefers-reduced-motion:no-preference) { #landing.cfSiteV5.vtMotionReady #certfactLandingPluginV8 .vtSignalAppLogos svg { animation:vtLogoDrop .85s calc(6.8s + var(--vt-logo-step,0s)) cubic-bezier(.19,1,.22,1) both; } #landing.cfSiteV5.vtMotionReady #certfactLandingPluginV8 .vtSignalAppLogos svg:nth-child(2) { --vt-logo-step:.24s; } #landing.cfSiteV5.vtMotionReady #certfactLandingPluginV8 .vtSignalAppLogos svg:nth-child(3) { --vt-logo-step:.48s; } #landing.cfSiteV5.vtMotionReady #certfactLandingPluginV8 .vtSignalIdentity { animation:vtSignalScreenIn .7s 8.1s both; } #landing.cfSiteV5.vtMotionReady #certfactLandingPluginV8 .vtSignalResultText { animation:vtSignalScreenIn .7s 12.6s both; } #landing.cfSiteV5.vtMotionReady #certfactLandingPluginV8 .vtSignalPhone { animation:vtSignalPhoneGrow 1.3s 13.15s cubic-bezier(.19,1,.22,1) both; } @keyframes vtLogoDrop { from{opacity:0;transform:translateY(-28px) scale(.7)} to{opacity:1;transform:translateY(0) scale(1)} } @keyframes vtSignalPhoneGrow { from{transform:scale(1)} to{transform:scale(1.17)} } } @media (prefers-reduced-motion:reduce) { #landing.cfSiteV5 #certfactLandingPluginV8 .vtSignalResultText { opacity:1; } } @media (max-width:650px) { #landing.cfSiteV5 #certfactLandingPluginV8 .vtSignalScreen { left:25%; width:50%; } #landing.cfSiteV5 #certfactLandingPluginV8 .vtSignalResult { gap:5px; } #landing.cfSiteV5 #certfactLandingPluginV8 .vtSignalCheck { width:40px; height:40px; font-size:24px; } #landing.cfSiteV5 #certfactLandingPluginV8 .vtSignalResultText { font-size:9px; } } /* Let the phone float against the hero; keep the verification message clear of side labels. */ #landing.cfSiteV5 #certfactLandingPluginV8 .cfpVisual { border:0 !important; box-shadow:none !important; background:transparent !important; } #landing.cfSiteV5 #certfactLandingPluginV8 .vtSignalIntro { border-radius:0; background:radial-gradient(ellipse at 52% 44%,rgba(21,66,123,.42),transparent 68%); } #landing.cfSiteV5 #certfactLandingPluginV8 .vtSignalResult { left:8%; right:8%; bottom:11%; display:grid; justify-items:center; align-content:center; gap:9px; text-align:center; } #landing.cfSiteV5 #certfactLandingPluginV8 .vtSignalResultText { max-width:100%; font-size:clamp(10px,1vw,14px); white-space:nowrap; } @media (max-width:650px) { #landing.cfSiteV5 #certfactLandingPluginV8 .vtSignalResult { bottom:12%; gap:6px; } #landing.cfSiteV5 #certfactLandingPluginV8 .vtSignalResultText { font-size:8px; } } #landing.cfSiteV5 #certfactLandingPluginV8 .vtSignalIntro { background:radial-gradient(ellipse at 52% 44%,#102b55 0%,#071a37 58%,#06172f 100%); } /* Expand the dotted phone into the former frame area and remove frame strokes. */ #landing.cfSiteV5 #certfactLandingPluginV8 .cfpVisual { border:none !important; border-radius:0 !important; padding:0 !important; } #landing.cfSiteV5 #certfactLandingPluginV8 .cfpVisual::before { display:none !important; } #landing.cfSiteV5 #certfactLandingPluginV8 .vtSignalLines { display:none !important; } #landing.cfSiteV5 #certfactLandingPluginV8 .vtSignalScreen { top:3.5%; left:10%; width:80%; height:89%; } #landing.cfSiteV5 #certfactLandingPluginV8 .vtSignalAppLogos { top:11%; left:13%; right:13%; } #landing.cfSiteV5 #certfactLandingPluginV8 .vtSignalIdentity { top:39%; } #landing.cfSiteV5 #certfactLandingPluginV8 .vtSignalResult { bottom:11%; } @media (prefers-reduced-motion:no-preference) { #landing.cfSiteV5.vtMotionReady #certfactLandingPluginV8 .vtSignalPhone { animation:vtSignalPhoneGrow 1.3s 13.15s cubic-bezier(.19,1,.22,1) both; } @keyframes vtSignalPhoneGrow { from{transform:scale(1)} to{transform:scale(1.04)} } } @media (max-width:650px) { #landing.cfSiteV5 #certfactLandingPluginV8 .vtSignalScreen { left:10%; width:80%; } } /* The original diagram keeps the artwork's dimensions but is invisible behind the floating phone. */ html.vtMotionBoot #landing.cfSiteV5 #certfactLandingPluginV8 .cfpVisual > :not(.vtSignalIntro), #landing.cfSiteV5.vtMotionReady #certfactLandingPluginV8 .cfpVisual > :not(.vtSignalIntro) { visibility:hidden !important; } #landing.cfSiteV5 #certfactLandingPluginV8 .vtSignalIntro { background:transparent; } /* Slightly larger dotted screen and a blue V-shaped verification mark inspired by VERATIU. */ #landing.cfSiteV5 #certfactLandingPluginV8 .vtSignalScreen { top:3%; left:8%; width:84%; height:91%; } #landing.cfSiteV5 #certfactLandingPluginV8 .vtSignalCheck { border-color:#5abaff; background:radial-gradient(circle at 50% 40%,#163f85,#0a2657); box-shadow:0 0 0 6px rgba(43,155,255,.12),0 0 34px rgba(36,141,245,.55); } #landing.cfSiteV5 #certfactLandingPluginV8 .vtSignalCheck svg { display:block; width:65%; height:65%; overflow:visible; fill:none; stroke:#78cfff; stroke-width:11; stroke-linecap:round; stroke-linejoin:round; filter:drop-shadow(0 0 5px rgba(144,221,255,.7)); } @media (max-width:650px) { #landing.cfSiteV5 #certfactLandingPluginV8 .vtSignalScreen { left:8%; width:84%; } } /* Use the actual VERATIU emblem in a blue treatment. */ #landing.cfSiteV5 #certfactLandingPluginV8 .vtSignalCheck img { display:block; width:72%; height:72%; object-fit:contain; filter:hue-rotate(169deg) saturate(1.65) brightness(1.25) drop-shadow(0 0 6px rgba(79,184,255,.65)); } /* The genuine emblem's alpha contour, blue front and offset blue depth, stays unfilled. */ #landing.cfSiteV5 #certfactLandingPluginV8 .vtSignalCheck { width:clamp(65px,7vw,96px); height:clamp(52px,5.4vw,76px); border:0; border-radius:0; background:transparent; box-shadow:none; } #landing.cfSiteV5 #certfactLandingPluginV8 .vtSignalCheck img { width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 0 6px rgba(67,173,255,.68)); } @media (max-width:650px) { #landing.cfSiteV5 #certfactLandingPluginV8 .vtSignalCheck { width:64px; height:49px; } } /* A small application screen exists before the particles complete the device. */ #landing.cfSiteV5 #certfactLandingPluginV8 .vtSignalSeed { position:absolute; z-index:4; left:35%; top:29%; width:30%; aspect-ratio:1; display:grid; place-items:center; border:1px solid rgba(112,199,255,.92); border-radius:clamp(16px,2.5vw,28px); background:linear-gradient(150deg,rgba(17,65,132,.96),rgba(4,27,64,.96)); box-shadow:0 0 30px rgba(34,141,251,.35),inset 0 0 26px rgba(46,161,255,.2); } #landing.cfSiteV5 #certfactLandingPluginV8 .vtSignalSeedApps { width:86%; display:flex; justify-content:space-around; align-items:center; gap:7%; color:#9bdaff; } #landing.cfSiteV5 #certfactLandingPluginV8 .vtSignalSeedApps svg { width:28%; max-width:37px; aspect-ratio:1; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; filter:drop-shadow(0 0 7px rgba(58,169,255,.7)); } @media (prefers-reduced-motion:no-preference) { #landing.cfSiteV5.vtMotionReady #certfactLandingPluginV8 .vtSignalSeed { animation:vtSignalSeedMerge .9s 5.9s cubic-bezier(.4,0,.2,1) both; } #landing.cfSiteV5.vtMotionReady #certfactLandingPluginV8 .vtSignalPhone { animation:vtSignalPhoneGrow 1.5s 13.15s cubic-bezier(.19,1,.22,1) both; } @keyframes vtSignalSeedMerge { 0%{opacity:1;transform:translateY(0) scale(1)} 100%{opacity:0;transform:translateY(-75%) scale(.52)} } @keyframes vtSignalPhoneGrow { from{transform:scale(1)} to{transform:scale(1.1)} } } @media (prefers-reduced-motion:reduce) { #landing.cfSiteV5 #certfactLandingPluginV8 .vtSignalSeed { display:none; } } /* The first shape is a compact phone frame. The app symbols fly in separately. */ #landing.cfSiteV5 #certfactLandingPluginV8 .vtSignalSeed { left:39%; top:20%; width:22%; height:43%; aspect-ratio:auto; border:2px solid rgba(112,199,255,.9); border-radius:clamp(18px,3vw,35px); background:linear-gradient(155deg,rgba(12,49,103,.78),rgba(4,24,59,.82)); } #landing.cfSiteV5 #certfactLandingPluginV8 .vtSignalSeed::before { content:""; position:absolute; top:4%; left:37%; width:26%; height:3px; border-radius:3px; background:#8ed6ff; box-shadow:0 0 8px #3caaff; } #landing.cfSiteV5 #certfactLandingPluginV8 .vtSignalSeed::after { content:""; position:absolute; bottom:4%; left:40%; width:20%; height:2px; border-radius:2px; background:rgba(121,203,255,.8); } #landing.cfSiteV5 #certfactLandingPluginV8 .vtSignalSeedApps { width:80%; height:70%; flex-direction:column; justify-content:space-around; gap:5%; } #landing.cfSiteV5 #certfactLandingPluginV8 .vtSignalSeedApps svg { width:32%; min-width:25px; max-width:36px; } #landing.cfSiteV5 #certfactLandingPluginV8 .vtSignalSeedApps svg:nth-child(1) { --seed-x:-190px; --seed-y:90px; --seed-rotation:-285deg; --seed-delay:.15s; } #landing.cfSiteV5 #certfactLandingPluginV8 .vtSignalSeedApps svg:nth-child(2) { --seed-x:145px; --seed-y:-130px; --seed-rotation:310deg; --seed-delay:.55s; } #landing.cfSiteV5 #certfactLandingPluginV8 .vtSignalSeedApps svg:nth-child(3) { --seed-x:210px; --seed-y:105px; --seed-rotation:-395deg; --seed-delay:.95s; } @media (prefers-reduced-motion:no-preference) { #landing.cfSiteV5.vtMotionReady #certfactLandingPluginV8 .vtSignalSeedApps svg { animation:vtSeedAppSpin 1.8s var(--seed-delay) cubic-bezier(.18,.75,.2,1) both; } @keyframes vtSeedAppSpin { 0%{opacity:0;transform:translate(var(--seed-x),var(--seed-y)) rotate(var(--seed-rotation)) scale(.48)} 68%{opacity:1;transform:translate(-7px,8px) rotate(-12deg) scale(1.12)} 100%{opacity:1;transform:translate(0,0) rotate(0) scale(1)} } } @media (max-width:650px) { #landing.cfSiteV5 #certfactLandingPluginV8 .vtSignalSeed { left:37%; width:26%; } } /* Larger opening phone; the arriving particles remain visible through its glass. */ #landing.cfSiteV5 #certfactLandingPluginV8 .vtSignalSeed { left:32%; top:10%; width:36%; height:70%; background:linear-gradient(155deg,rgba(12,49,103,.38),rgba(4,24,59,.42)); box-shadow:0 0 36px rgba(34,141,251,.4),inset 0 0 26px rgba(46,161,255,.13); } #landing.cfSiteV5 #certfactLandingPluginV8 .vtSignalSeedApps svg { width:30%; min-width:32px; max-width:48px; } #landing.cfSiteV5 #certfactLandingPluginV8 .vtSignalScan { height:18%; background:linear-gradient(to bottom,transparent 0%,rgba(222,247,255,.16) 34%,rgba(232,250,255,.48) 72%,#fff 94%,#fff 100%); box-shadow:0 0 24px 7px rgba(220,248,255,.55),0 12px 37px rgba(212,244,255,.65); } @media (prefers-reduced-motion:no-preference) { #landing.cfSiteV5.vtMotionReady #certfactLandingPluginV8 .vtSignalScan { animation:vtSignalScanSweep 3.4s 10.5s ease-in-out both; } #landing.cfSiteV5.vtMotionReady #certfactLandingPluginV8 .vtSignalCheck { animation:vtSignalCheckIn .7s 14.05s cubic-bezier(.2,1.5,.4,1) both; } #landing.cfSiteV5.vtMotionReady #certfactLandingPluginV8 .vtSignalResultText { animation:vtSignalScreenIn .7s 14.3s both; } #landing.cfSiteV5.vtMotionReady #certfactLandingPluginV8 .vtSignalPhone { animation:vtSignalPhoneGrow 1.5s 15.0s cubic-bezier(.19,1,.22,1) both; } } @media (max-width:650px) { #landing.cfSiteV5 #certfactLandingPluginV8 .vtSignalSeed { left:30%; width:40%; top:11%; height:68%; } } /* Final sequence: a large dotted phone exists first; incoming dots fill it, then scanning and expansion. */ #landing.cfSiteV5 #certfactLandingPluginV8 .vtSignalSeed { display:none !important; } #landing.cfSiteV5 #certfactLandingPluginV8 .vtSignalScreen { top:2%; left:4%; width:92%; height:94%; } #landing.cfSiteV5.vtMotionReady #certfactLandingPluginV8 .cfpVisual { overflow:visible !important; } @media (prefers-reduced-motion:no-preference) { #landing.cfSiteV5.vtMotionReady #certfactLandingPluginV8 .vtSignalParticles i.vtSignalRimDot { animation:vtSignalRimAppear .9s 0s ease-out both; } #landing.cfSiteV5.vtMotionReady #certfactLandingPluginV8 .vtSignalPhone { animation:none !important; } #landing.cfSiteV5.vtMotionReady #certfactLandingPluginV8 .vtSignalIntro { animation:vtSignalAllExpand 1.5s 15s cubic-bezier(.19,1,.22,1) both; transform-origin:50% 50%; } @keyframes vtSignalRimAppear { from{opacity:0;scale:.5} to{opacity:var(--vt-alpha,.9);scale:1} } @keyframes vtSignalAllExpand { from{transform:scale(1)} to{transform:scale(1.08)} } } @media (max-width:650px) { #landing.cfSiteV5 #certfactLandingPluginV8 .vtSignalScreen { left:4%; width:92%; } } /* First frame: a clear, full-size phone with scattered applications; dots arrive later. */ #landing.cfSiteV5 #certfactLandingPluginV8 .vtSignalSeed { display:block !important; z-index:4; left:11%; top:3%; width:78%; height:92%; border:2px solid rgba(105,193,255,.82); border-radius:clamp(32px,5vw,62px); background:rgba(5,24,57,.08); box-shadow:0 0 26px rgba(35,144,255,.22),inset 0 0 22px rgba(59,163,255,.08); } #landing.cfSiteV5 #certfactLandingPluginV8 .vtSignalSeedApps { position:absolute; inset:0; display:block; width:auto; height:auto; } #landing.cfSiteV5 #certfactLandingPluginV8 .vtSignalSeedApps svg { position:absolute; width:clamp(29px,3.2vw,45px); min-width:0; max-width:none; } #landing.cfSiteV5 #certfactLandingPluginV8 .vtSignalSeedApps svg:nth-child(1) { left:20%; top:25%; --seed-tilt:-22deg; --seed-wander-x:8px; --seed-wander-y:-11px; --seed-delay:0s; } #landing.cfSiteV5 #certfactLandingPluginV8 .vtSignalSeedApps svg:nth-child(2) { right:18%; top:42%; --seed-tilt:19deg; --seed-wander-x:-10px; --seed-wander-y:9px; --seed-delay:.8s; } #landing.cfSiteV5 #certfactLandingPluginV8 .vtSignalSeedApps svg:nth-child(3) { left:34%; bottom:20%; --seed-tilt:-14deg; --seed-wander-x:9px; --seed-wander-y:7px; --seed-delay:1.5s; } #landing.cfSiteV5 #certfactLandingPluginV8 .vtSignalScreen { top:3%; left:11%; width:78%; height:92%; } #landing.cfSiteV5 #certfactLandingPluginV8 .vtSignalScan { top:0; height:3px; background:#fff; box-shadow:0 0 8px 3px rgba(255,255,255,.95),0 0 24px 8px rgba(157,224,255,.72); } @media (prefers-reduced-motion:no-preference) { #landing.cfSiteV5.vtMotionReady #certfactLandingPluginV8 .vtSignalParticles i.vtSignalRimDot { animation:vtSignalGather var(--vt-duration,2s) var(--vt-delay) cubic-bezier(.14,.73,.22,1) both; } #landing.cfSiteV5.vtMotionReady #certfactLandingPluginV8 .vtSignalSeedApps svg { animation:vtSeedWander 4.2s var(--seed-delay) ease-in-out infinite alternate; } #landing.cfSiteV5.vtMotionReady #certfactLandingPluginV8 .vtSignalScan { animation:vtThinScan 3.4s 10.5s linear both; } @keyframes vtSeedWander { from{transform:translate(0,0) rotate(var(--seed-tilt))} to{transform:translate(var(--seed-wander-x),var(--seed-wander-y)) rotate(6deg)} } @keyframes vtThinScan { 0%{top:0%;opacity:0} 7%{opacity:1} 92%{opacity:1} 100%{top:100%;opacity:0} } } @media (max-width:650px) { #landing.cfSiteV5 #certfactLandingPluginV8 .vtSignalSeed { left:10%; width:80%; top:4%; height:90%; } #landing.cfSiteV5 #certfactLandingPluginV8 .vtSignalScreen { left:10%; width:80%; } } @media (prefers-reduced-motion:reduce) { #landing.cfSiteV5 #certfactLandingPluginV8 .vtSignalSeed { display:none !important; } } /* Keep the handset outline while only the scattered app symbols leave the opening layer. */ @media (prefers-reduced-motion:no-preference) { #landing.cfSiteV5.vtMotionReady #certfactLandingPluginV8 .vtSignalSeed { animation:none !important; opacity:1; } #landing.cfSiteV5.vtMotionReady #certfactLandingPluginV8 .vtSignalSeedApps { animation:vtSeedAppsClear .8s 6s ease-in both; } @keyframes vtSeedAppsClear { from{opacity:1} to{opacity:0} } } /* After the scan, converging signals pass through VERATIU and finish at the seal. */ #landing.cfSiteV5 #certfactLandingPluginV8 .vtSignalTrace { position:absolute; inset:0; z-index:8; width:100%; height:100%; overflow:visible; pointer-events:none; filter:drop-shadow(0 0 7px rgba(91,190,255,.75)); } #landing.cfSiteV5 #certfactLandingPluginV8 .vtSignalTracePath { opacity:0; stroke:#79c9ff; stroke-width:2.2; stroke-linecap:round; stroke-dasharray:1; stroke-dashoffset:1; vector-effect:non-scaling-stroke; } #landing.cfSiteV5 #certfactLandingPluginV8 .vtSignalTracePath--finish { stroke:#d9f4ff; stroke-width:2.8; } #landing.cfSiteV5 #certfactLandingPluginV8 .vtSignalTraceNode { opacity:0; fill:#ecfaff; filter:drop-shadow(0 0 5px #59bdff); } @media (prefers-reduced-motion:no-preference) { #landing.cfSiteV5.vtMotionReady #certfactLandingPluginV8 .vtSignalTracePath--left, #landing.cfSiteV5.vtMotionReady #certfactLandingPluginV8 .vtSignalTracePath--right { animation:vtSignalTraceDraw .9s 14.05s ease-in-out forwards; } #landing.cfSiteV5.vtMotionReady #certfactLandingPluginV8 .vtSignalTraceNode { animation:vtSignalTracePoint .35s 14.9s ease-out forwards; } #landing.cfSiteV5.vtMotionReady #certfactLandingPluginV8 .vtSignalTracePath--finish { animation:vtSignalTraceDraw 1s 15.05s ease-in-out forwards; } #landing.cfSiteV5.vtMotionReady #certfactLandingPluginV8 .vtSignalCheck { animation:vtSignalCheckIn .7s 16.1s cubic-bezier(.2,1.5,.4,1) both; } #landing.cfSiteV5.vtMotionReady #certfactLandingPluginV8 .vtSignalResultText { animation:vtSignalScreenIn .7s 16.35s both; } #landing.cfSiteV5.vtMotionReady #certfactLandingPluginV8 .vtSignalIntro { animation:vtSignalAllExpand 1.5s 17.0s cubic-bezier(.19,1,.22,1) both; transform-origin:50% 50%; } @keyframes vtSignalTraceDraw { from{opacity:1;stroke-dashoffset:1} to{opacity:1;stroke-dashoffset:0} } @keyframes vtSignalTracePoint { from{opacity:0;transform:scale(.3);transform-origin:300px 336px} to{opacity:1;transform:scale(1);transform-origin:300px 336px} } } @media (prefers-reduced-motion:reduce) { #landing.cfSiteV5 #certfactLandingPluginV8 .vtSignalTracePath { opacity:.8;stroke-dashoffset:0; } #landing.cfSiteV5 #certfactLandingPluginV8 .vtSignalTraceNode { opacity:1; } } /* Three app signals meet at the VERATIU identity before reaching the check. */ #landing.cfSiteV5 #certfactLandingPluginV8 .vtSignalLines { display:none; } #landing.cfSiteV5 #certfactLandingPluginV8 .vtSignalTrace { z-index:5; } @media (prefers-reduced-motion:no-preference) { #landing.cfSiteV5.vtMotionReady #certfactLandingPluginV8 .vtSignalTracePath--app-one { animation:vtSignalTraceDraw 1s 14.05s ease-in-out forwards; } #landing.cfSiteV5.vtMotionReady #certfactLandingPluginV8 .vtSignalTracePath--app-two { animation:vtSignalTraceDraw 1s 14.25s ease-in-out forwards; } #landing.cfSiteV5.vtMotionReady #certfactLandingPluginV8 .vtSignalTracePath--app-three { animation:vtSignalTraceDraw 1s 14.45s ease-in-out forwards; } #landing.cfSiteV5.vtMotionReady #certfactLandingPluginV8 .vtSignalTraceNode { animation:vtSignalTracePoint .35s 15.45s ease-out forwards; } #landing.cfSiteV5.vtMotionReady #certfactLandingPluginV8 .vtSignalTracePath--finish { animation:vtSignalTraceDraw 1s 15.65s ease-in-out forwards; } #landing.cfSiteV5.vtMotionReady #certfactLandingPluginV8 .vtSignalCheck { animation:vtSignalCheckIn .7s 16.7s cubic-bezier(.2,1.5,.4,1) both; } #landing.cfSiteV5.vtMotionReady #certfactLandingPluginV8 .vtSignalResultText { animation:vtSignalScreenIn .7s 16.95s both; } #landing.cfSiteV5.vtMotionReady #certfactLandingPluginV8 .vtSignalIntro { animation:vtSignalAllExpand 1.5s 17.6s cubic-bezier(.19,1,.22,1) both; transform-origin:50% 50%; } } /* The visual ends with the scan and check, without connecting lines. */ #landing.cfSiteV5 #certfactLandingPluginV8 .vtSignalLines, #landing.cfSiteV5 #certfactLandingPluginV8 .vtSignalTrace { display:none !important; } @media (prefers-reduced-motion:no-preference) { #landing.cfSiteV5.vtMotionReady #certfactLandingPluginV8 .vtSignalCheck { animation:vtSignalCheckIn .7s 14.05s cubic-bezier(.2,1.5,.4,1) both; } #landing.cfSiteV5.vtMotionReady #certfactLandingPluginV8 .vtSignalResultText { animation:vtSignalScreenIn .7s 14.3s both; } #landing.cfSiteV5.vtMotionReady #certfactLandingPluginV8 .vtSignalIntro { animation:vtSignalAllExpand 1.5s 15s cubic-bezier(.19,1,.22,1) both; transform-origin:50% 50%; } } /* Smaller first frame; the scan reveals another layer of fine points. */ @media (prefers-reduced-motion:no-preference) { #landing.cfSiteV5.vtMotionReady #certfactLandingPluginV8 .vtSignalParticles i.vtSignalScanDot { animation:vtSignalScanDotIn .42s var(--vt-scan-delay) ease-out both; background:#d8f4ff; box-shadow:0 0 8px 2px rgba(137,211,255,.7); } @keyframes vtSignalScanDotIn { from{opacity:0;transform:scale(.2)} to{opacity:.72;transform:scale(1)} } @keyframes vtSignalAllExpand { from{transform:translateY(0) scale(.87) rotate(0deg)} to{transform:translateY(-36px) scale(1.08) rotate(-2deg)} } } /* Keep the header at its compact scrolled height from the first paint. */ @media (min-width:901px) { #landing.cfSiteV5 .cf39Header.cfsHeader { height:70px !important; min-height:70px !important; } } @media (max-width:900px) { #landing.cfSiteV5 .cf39Header.cfsHeader { height:64px !important; min-height:64px !important; } } /* Legible explanatory notes and legal references on light sections. */ #landing.cfSiteV5 #modalidades .cfsSectionFoot p, #landing.cfSiteV5 #comparacao .cfsCompareV58Foot p { color:#294563 !important; font-size:14px !important; line-height:1.6 !important; } #landing.cfSiteV5 #comparacao .cfsCompareV58Foot strong { color:#102744 !important; } #landing.cfSiteV5 #modalidades .cfsSectionFoot a, #landing.cfSiteV5 #comparacao .cfsCompareV58Foot a { color:#075ab0 !important; font-weight:750 !important; text-decoration:underline !important; text-underline-offset:3px; } #landing.cfSiteV5 #modalidades .cfsSectionFoot .cfsTextLink { font-size:14px !important; } /* Downward arrows invite opening the two expandable sections. */ #landing.cfSiteV5 :is(#veratiuTechnicalDetailsV75,#veratiuComparisonDetailsV75) .veratiuHomeDetailsIconV75 { font-size:27px !important; font-weight:800; line-height:1; } @media (prefers-reduced-motion:no-preference) { #landing.cfSiteV5 :is(#veratiuTechnicalDetailsV75,#veratiuComparisonDetailsV75):not([open]) .veratiuHomeDetailsIconV75 { animation:vtDetailsArrowDown 1.8s ease-in-out infinite; } @keyframes vtDetailsArrowDown { 0%,100%{transform:translateY(-2px)} 50%{transform:translateY(3px)} } } #landing.cfSiteV5 :is(#veratiuTechnicalDetailsV75,#veratiuComparisonDetailsV75)[open] .veratiuHomeDetailsIconV75 { animation:none !important; transform:rotate(180deg) !important; } /* Balanced footer columns and a readable cookie settings action. */ @media (min-width:761px) { #landing.cfSiteV5 .cfsFooterGrid { grid-template-columns:minmax(0,27%) repeat(3,minmax(0,24.333%)) !important; column-gap:0 !important; } } #landing.cfSiteV5 .cfsFooterGrid button { background:transparent !important; color:#c3d7ee !important; border:0 !important; padding:0 !important; text-align:left !important; cursor:pointer; font:inherit; } #landing.cfSiteV5 .cfsFooterGrid button:hover { color:#fff !important; text-decoration:underline; } /* Mobile: keep the animated phone, then present the message before the seals. */ @media (max-width:680px) { #landing.cfSiteV5 #certfactLandingPluginV8 .cfpVisual { height:470px !important; min-height:0 !important; } #landing.cfSiteV5 #certfactLandingPluginV8 .cfsHeroCopy { order:2 !important; } #landing.cfSiteV5 #certfactLandingPluginV8 .veratiuEvidenceSeals--bottom { order:3 !important; margin-top:20px !important; } } @media (max-width:680px) and (prefers-reduced-motion:reduce) { #landing.cfSiteV5 #certfactLandingPluginV8 .cfpVisual { height:642px !important; } } /* Remove the last warm glow from the hero. */ html body #landing.cfSiteV5 section#certfactLandingPluginV8.cfsHero::after { background:rgba(44,143,255,.05) !important; } html body #landing.cfSiteV5 img[src*="veratiu-shield-yellow.svg"] { filter:hue-rotate(165deg) saturate(1.32) brightness(1.1) drop-shadow(0 3px 5px rgba(42,135,241,.25)) !important; } /* The inactive cards fade continuously; the selected card gains a larger check. */ #landing.cfSiteV5 .cfsHero > .veratiuEvidenceSeals--bottom > span i { flex:0 0 30px !important; width:30px !important; height:30px !important; font-size:18px !important; transform-origin:center !important; animation:48s linear infinite veratiuSealCheck !important; } #landing.cfSiteV5 .cfsHero > .veratiuEvidenceSeals--bottom > span:nth-child(1) i { animation-delay:-12s !important; } #landing.cfSiteV5 .cfsHero > .veratiuEvidenceSeals--bottom > span:nth-child(2) i { animation-delay:-6s !important; } #landing.cfSiteV5 .cfsHero > .veratiuEvidenceSeals--bottom > span:nth-child(3) i { animation-delay:0s !important; } #landing.cfSiteV5 .cfsHero > .veratiuEvidenceSeals--bottom > span:nth-child(4) i { animation-delay:-42s !important; } #landing.cfSiteV5 .cfsHero > .veratiuEvidenceSeals--bottom > span:nth-child(5) i { animation-delay:-36s !important; } #landing.cfSiteV5 .cfsHero > .veratiuEvidenceSeals--bottom > span:nth-child(6) i { animation-delay:-30s !important; } #landing.cfSiteV5 .cfsHero > .veratiuEvidenceSeals--bottom > span:nth-child(7) i { animation-delay:-24s !important; } #landing.cfSiteV5 .cfsHero > .veratiuEvidenceSeals--bottom > span:nth-child(8) i { animation-delay:-18s !important; } @keyframes veratiuSealCheck { 0%, 22.4% { opacity:0; transform:scale(.15); } 23% { opacity:1; transform:scale(1.6); } 25%, 30% { opacity:1; transform:scale(1.42); } 34%, 100% { opacity:0; transform:scale(.78); } } @media (max-width:680px) { #landing.cfSiteV5 .cfsHero > .veratiuEvidenceSeals--bottom > span i { animation:none !important; opacity:1 !important; transform:none !important; } } @media (prefers-reduced-motion:reduce) { #landing.cfSiteV5 .cfsHero > .veratiuEvidenceSeals--bottom > span i { animation:none !important; transform:none !important; } } /* Bridge from the animated hero to the demo: readable copy on the white section. */ #landing.cfSiteV5 #legalidade .cfsLead, #landing.cfSiteV5 #legalidade .cfsLegalNote { color:#526985 !important; } /* A scanner-like luminous mist follows the line, blooms, then dissolves. */ #landing.cfSiteV5 #certfactLandingPluginV8 .vtSignalScan::before { content:''; position:absolute; left:-9%; bottom:100%; width:118%; height:clamp(86px,15vw,160px); pointer-events:none; border-radius:50%; background: radial-gradient(ellipse 55% 48% at 32% 77%,rgba(169,226,255,.36),transparent 88%), radial-gradient(ellipse 48% 44% at 70% 64%,rgba(83,175,255,.31),transparent 88%), radial-gradient(ellipse 45% 25% at 51% 92%,rgba(202,239,255,.28),transparent 85%); filter:blur(20px); opacity:0; transform-origin:center bottom; } @media (prefers-reduced-motion:no-preference) { #landing.cfSiteV5.vtMotionReady #certfactLandingPluginV8 .vtSignalScan::before { animation:vtScanMistBloom 3.4s 10.5s ease-in-out both; } @keyframes vtScanMistBloom { 0%, 7% { opacity:0; transform:scale(.74,.48); } 30% { opacity:.48; transform:scale(.95,.82); } 62% { opacity:.75; transform:scale(1.05,1); } 88% { opacity:.34; transform:scale(1.14,1.08); } 100% { opacity:0; transform:scale(1.24,1.15); } } } @media (max-width:650px) and (prefers-reduced-motion:no-preference) { @keyframes vtSignalAllExpand { from{transform:scale(.87) rotate(0deg)} to{transform:scale(1.04) rotate(-1deg)} } } /* Persistent blue-logo checks for the rotating evidence cards. */ #landing.cfSiteV5 .cfsHero > .veratiuEvidenceSeals--bottom > span i { background:linear-gradient(135deg,#49e6ff 0%,#168dff 56%,#205fd5 100%) !important; border:1px solid rgba(163,239,255,.75) !important; box-shadow:0 0 16px rgba(48,171,255,.4) !important; animation:vtSealCheckReveal .42s cubic-bezier(.18,1.4,.45,1) 1 both !important; } @keyframes vtSealCheckReveal { 0% { opacity:0; transform:scale(.15); } 60% { opacity:1; transform:scale(1.64); } 100% { opacity:1; transform:scale(1.42); } } #landing.cfSiteV5 .cfsHero > .veratiuEvidenceSeals--bottom > span:nth-child(1) i { animation-delay:0s !important; } #landing.cfSiteV5 .cfsHero > .veratiuEvidenceSeals--bottom > span:nth-child(2) i { animation-delay:5s !important; } #landing.cfSiteV5 .cfsHero > .veratiuEvidenceSeals--bottom > span:nth-child(3) i { animation-delay:11s !important; } #landing.cfSiteV5 .cfsHero > .veratiuEvidenceSeals--bottom > span:nth-child(4) i { animation-delay:17s !important; } #landing.cfSiteV5 .cfsHero > .veratiuEvidenceSeals--bottom > span:nth-child(5) i { animation-delay:23s !important; } #landing.cfSiteV5 .cfsHero > .veratiuEvidenceSeals--bottom > span:nth-child(6) i { animation-delay:29s !important; } #landing.cfSiteV5 .cfsHero > .veratiuEvidenceSeals--bottom > span:nth-child(7) i { animation-delay:35s !important; } #landing.cfSiteV5 .cfsHero > .veratiuEvidenceSeals--bottom > span:nth-child(8) i { animation-delay:41s !important; } @media (max-width:680px), (prefers-reduced-motion:reduce) { #landing.cfSiteV5 .cfsHero > .veratiuEvidenceSeals--bottom > span i { animation:none !important; opacity:1 !important; transform:none !important; } } /* Contrast fixes for pale content cards. */ #landing.cfSiteV5 #modalidades .cfsCaptureHelpPrompt strong { color:#102744 !important; } #landing.cfSiteV5 #recursos-tecnicos .cfsCapabilitiesV66Card code { color:#075eae !important; } #landing.cfSiteV5 #guias .cfsGuides > a :is(span,b) { color:#1769bd !important; } #landing.cfSiteV5 #resultado .eyebrow { color:#1769bd !important; } #landing.cfSiteV5 #modalidades .cfsMode :is(.cfsModeIcon,.veratiuPurchaseCheckV72) { color:#1769bd !important; } #landing.cfSiteV5 .cfsSecurity .cfsTextLink span { color:#1769bd !important; } /* Final readable text on pale callouts. */ html body #landing.cfSiteV5 #modalidades > div.cfsCaptureHelpPrompt[style] strong { color:#102744 !important; } #landing.cfSiteV5 #demonstracao .cfsDemoFrame figcaption strong { color:#102744 !important; } #landing.cfSiteV5 #certfactLandingPluginV8 .veratiuMobileDesktopNotice strong, #landing.cfSiteV5 #certfactLandingPluginV8 .veratiuMobileDesktopNotice .veratiuAndroidSoon { color:#102744 !important; } #landing.cfSiteV5 #certfactLandingPluginV8 .veratiuMobileDesktopNotice a { color:#075eae !important; } /* Readable included items in the dark modality chooser. */ #cfModePage501021 .cfModeCard501021 .veratiuPurchaseScopeV72 { color:#dcecff !important; border-top-color:#7caddf !important; } #cfModePage501021 .cfModeCard501021 .veratiuPurchaseScopeV72 li { color:#dcecff !important; } #cfModePage501021 .cfModeCard501021 .veratiuPurchaseScopeV72 .veratiuPurchaseCheckV72 { color:#46d9ff !important; } #cfModePage501021 .vtModeDemoJump { color:#8ed5ff !important; } /* Mobile Android availability notice. */ #landing.cfSiteV5 #certfactLandingPluginV8 .veratiuMobileDesktopNotice .veratiuAndroidSoon { display:block !important; margin-top:16px !important; padding-top:14px !important; border-top:1px solid #b9d5f3 !important; color:#075eae !important; font-size:15px !important; font-weight:900 !important; text-decoration:underline !important; text-decoration-color:#075eae !important; text-underline-offset:4px !important; } #cfModePage501021 .cfModeAndroidSoon501021 { display:none; } @media (max-width:900px) { #cfModePage501021 .cfModeAndroidSoon501021 { display:block; margin-top:10px; color:#8ed5ff !important; font-size:15px; font-weight:900; line-height:1.45; text-decoration:underline; text-underline-offset:4px; } }