.cdp-hero-flow-static { min-height: 100svh; display: grid; align-content: start; gap: clamp(18px, 2.4vw, 28px); padding-top: clamp(88px, 7vw, 108px); padding-bottom: clamp(30px, 4vw, 52px); text-align: center; } .cdp-hero-flow-static::before { background: linear-gradient(180deg, rgba(5, 16, 24, 0.02), rgba(5, 16, 24, 0.72) 68%, #051018 100%), radial-gradient(circle at 50% 22%, rgba(59, 216, 255, 0.2), transparent 34%), radial-gradient(circle at 18% 42%, rgba(35, 119, 255, 0.14), transparent 26%), radial-gradient(circle at 84% 42%, rgba(52, 215, 255, 0.1), transparent 24%); opacity: 1; filter: none; mask-image: none; } .cdp-flow-scene { position: relative; width: min(1280px, calc(100vw - 48px)); min-height: clamp(540px, 58vw, 690px); margin: 0 auto; isolation: isolate; pointer-events: none; transition: min-height 900ms cubic-bezier(0.22, 1, 0.36, 1), margin-bottom 900ms cubic-bezier(0.22, 1, 0.36, 1), transform 900ms cubic-bezier(0.22, 1, 0.36, 1); transform-origin: top center; } .cdp-flow-skip, .cdp-flow-replay { position: absolute; top: 6px; right: 8px; z-index: 5; min-height: 34px; padding: 7px 14px; border: 1px solid rgba(143, 240, 255, 0.28); border-radius: 999px; color: rgba(235, 249, 255, 0.86); background: rgba(3, 16, 29, 0.58); box-shadow: 0 0 24px rgba(52, 215, 255, 0.08); font: 800 0.72rem/1 "Space Grotesk", "IBM Plex Sans", sans-serif; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; opacity: 0; pointer-events: none; transition: opacity 220ms ease, border-color 220ms ease, color 220ms ease; } .cdp-flow-replay { right: 8px; width: 36px; min-height: 36px; padding: 0; display: grid; place-items: center; border-radius: 50%; font-size: 1.02rem; letter-spacing: 0; opacity: 0; } .cdp-flow-skip:hover, .cdp-flow-skip:focus-visible, .cdp-flow-replay:hover, .cdp-flow-replay:focus-visible { border-color: rgba(143, 240, 255, 0.64); color: #ffffff; outline: none; } .cdp-hero-flow-static.is-intro-playing .cdp-flow-skip { opacity: 1; pointer-events: auto; } .cdp-hero-flow-static.is-intro-complete .cdp-flow-replay { opacity: 0.72; pointer-events: auto; } .cdp-hero-flow-static.is-intro-complete .cdp-flow-replay:hover, .cdp-hero-flow-static.is-intro-complete .cdp-flow-replay:focus-visible { opacity: 1; } .cdp-flow-scene::before { content: ""; position: absolute; inset: 4% 2% 18%; z-index: -1; background: radial-gradient(circle at 50% 38%, rgba(52, 215, 255, 0.16), transparent 28%), radial-gradient(circle at 16% 42%, rgba(35, 119, 255, 0.14), transparent 24%), radial-gradient(circle at 90% 42%, rgba(52, 215, 255, 0.12), transparent 20%); filter: blur(1px); pointer-events: none; } .cdp-flow-scene::after { content: ""; position: absolute; inset: -2% -5% 5%; z-index: 0; background: radial-gradient(ellipse at 50% 39%, rgba(3, 16, 29, 0.74) 0%, rgba(3, 16, 29, 0.58) 48%, rgba(3, 16, 29, 0.18) 72%, rgba(3, 16, 29, 0) 100%); mask-image: radial-gradient(ellipse at 50% 44%, #000 0%, #000 58%, transparent 100%); pointer-events: none; } .cdp-flow-scene__svg { position: absolute; inset: 0 0 auto; z-index: 1; width: 100%; height: min(520px, 48vw); min-height: 390px; overflow: visible; } .cdp-flow-file, .cdp-flow-small-file, .cdp-flow-export path { fill: rgba(3, 16, 29, 0.58); stroke: rgba(52, 215, 255, 0.58); stroke-width: 1.35; } .cdp-flow-file-fold, .cdp-flow-code, .cdp-flow-code-accent, .cdp-flow-small-file path, .cdp-flow-intake, .cdp-flow-guide, .cdp-flow-branch, .cdp-flow-purge path, .cdp-flow-purge-line { fill: none; stroke-linecap: round; stroke-linejoin: round; } .cdp-flow-code, .cdp-flow-code-accent, .cdp-flow-small-file path { stroke: rgba(143, 240, 255, 0.62); stroke-width: 2; } .cdp-flow-code-accent { stroke: rgba(52, 215, 255, 0.82); } .cdp-flow-intake { stroke: rgba(52, 215, 255, 0.52); stroke-width: 2.2; filter: url("#cdp-flow-glow"); } .cdp-flow-intake--inner { opacity: 0.45; } .cdp-flow-guide { stroke: rgba(52, 215, 255, 0.18); stroke-width: 1; stroke-dasharray: 8 14; } .cdp-flow-main { fill: none; stroke: rgba(143, 240, 255, 0.12); stroke-width: 1.15; stroke-dasharray: 2 18; stroke-linecap: round; } .cdp-flow-main-core { fill: none; stroke: url("#cdp-flow-line"); stroke-width: 2.55; stroke-linecap: round; stroke-dasharray: 54 16 8 18 2 18; opacity: 0.94; filter: url("#cdp-flow-glow"); } .cdp-flow-pulse { fill: #f6feff; stroke: rgba(52, 215, 255, 0.95); stroke-width: 2; filter: url("#cdp-flow-glow"); opacity: 0; } .cdp-flow-core__halo { fill: url("#cdp-flow-core"); } .cdp-flow-core circle { fill: none; stroke: rgba(52, 215, 255, 0.5); stroke-width: 1.4; filter: url("#cdp-flow-glow"); } .cdp-flow-core__brain, .cdp-flow-core__trace, .cdp-flow-core__orbit, .cdp-flow-core__micro { fill: none; stroke: rgba(143, 240, 255, 0.88); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; filter: url("#cdp-flow-glow"); } .cdp-flow-core__orbit { stroke: rgba(143, 240, 255, 0.28); stroke-width: 1.15; filter: none; } .cdp-flow-core__orbit--vertical { opacity: 0.74; } .cdp-flow-core__micro { stroke: rgba(143, 240, 255, 0.52); stroke-width: 1.45; filter: none; } .cdp-flow-core__brain { stroke-width: 2.35; } .cdp-flow-core__trace { stroke: rgba(143, 240, 255, 0.78); } .cdp-flow-core__pins { fill: none; stroke: rgba(52, 215, 255, 0.34); stroke-width: 1.15; stroke-linecap: round; } .cdp-flow-branch { stroke: rgba(143, 240, 255, 0.82); stroke-width: 2.45; filter: url("#cdp-flow-glow"); } .cdp-flow-export path { fill: rgba(4, 18, 32, 0.72); stroke: rgba(52, 215, 255, 0.72); stroke-width: 1.45; } .cdp-flow-export text { fill: rgba(248, 253, 255, 0.98); font-family: "Space Grotesk", "IBM Plex Sans", sans-serif; font-size: 14.6px; font-weight: 900; letter-spacing: 0.04em; text-anchor: middle; dominant-baseline: middle; text-shadow: 0 0 12px rgba(52, 215, 255, 0.44); } .cdp-flow-export text:nth-of-type(2) { fill: rgba(180, 246, 255, 0.96); font-size: 15.6px; font-weight: 850; text-anchor: start; } .cdp-flow-purge circle, .cdp-flow-purge path { fill: none; stroke: rgba(52, 215, 255, 0.62); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; filter: url("#cdp-flow-glow"); } .cdp-flow-purge-line { stroke: rgba(143, 240, 255, 0.78); stroke-width: 2.4; filter: url("#cdp-flow-glow"); } .cdp-flow-dust { stroke-dasharray: 1 12; opacity: 0.82; } .cdp-flow-nodes circle { fill: rgba(143, 240, 255, 0.88); stroke: rgba(52, 215, 255, 0.9); stroke-width: 2; filter: url("#cdp-flow-glow"); } .cdp-flow-callouts { position: absolute; left: 0; right: 0; top: min(420px, 39vw); z-index: 2; min-height: 178px; } .cdp-flow-callout { position: absolute; width: min(250px, 21vw); padding-top: 34px; text-align: left; } .cdp-flow-callout::before { content: ""; position: absolute; left: 50%; top: -82px; width: 1px; height: 82px; background: linear-gradient(180deg, rgba(52, 215, 255, 0), rgba(143, 240, 255, 0.72), rgba(52, 215, 255, 0.18)); transform: translateX(-50%); } .cdp-flow-callout::after { content: ""; position: absolute; left: 50%; top: 0; width: 64px; height: 1px; background: linear-gradient(90deg, rgba(143, 240, 255, 0.76), rgba(52, 215, 255, 0)); box-shadow: 0 0 18px rgba(52, 215, 255, 0.22); transform: translateX(-50%); } .cdp-flow-callout__dot { position: absolute; left: 50%; top: -88px; width: 12px; height: 12px; border-radius: 50%; background: #34d7ff; box-shadow: 0 0 22px rgba(52, 215, 255, 0.72); transform: translateX(-50%); } .cdp-flow-callout--import { left: 4.4%; } .cdp-flow-callout--analysis { left: 29.5%; width: min(300px, 24vw); } .cdp-flow-callout--exports { left: 57.2%; } .cdp-flow-callout--purge { right: 1.8%; } .cdp-flow-callout p { display: flex; align-items: baseline; gap: 10px; margin: 0 0 10px; color: #a7f5ff; font-size: 0.76rem; font-weight: 900; letter-spacing: 0.14em; text-transform: uppercase; } .cdp-flow-callout p b { color: #8ff0ff; font-size: 1.36rem; line-height: 1; } .cdp-flow-callout h2 { margin: 0; color: #ffffff; font-size: clamp(1.05rem, 1.26vw, 1.28rem); line-height: 1.12; letter-spacing: 0; } .cdp-flow-callout small { display: block; margin-top: 12px; color: rgba(235, 249, 255, 0.82); font-size: clamp(0.84rem, 0.94vw, 0.96rem); line-height: 1.5; } .cdp-flow-trust { position: absolute; left: 50%; bottom: 0; z-index: 2; width: min(640px, calc(100% - 48px)); min-height: 82px; display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 18px; align-items: center; padding: 14px 26px; border: 1px solid rgba(52, 215, 255, 0.32); background: radial-gradient(circle at 10% 50%, rgba(52, 215, 255, 0.14), transparent 28%), linear-gradient(180deg, rgba(5, 18, 31, 0.68), rgba(2, 10, 20, 0.4)); clip-path: polygon(26px 0, calc(100% - 26px) 0, 100% 50%, calc(100% - 26px) 100%, 26px 100%, 0 50%); box-shadow: 0 0 46px rgba(52, 215, 255, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.08); transform: translateX(-50%); } .cdp-flow-trust::before, .cdp-flow-trust::after { content: ""; position: absolute; top: 50%; width: min(150px, 18vw); height: 1px; background: linear-gradient(90deg, transparent, rgba(52, 215, 255, 0.64)); } .cdp-flow-trust::before { right: calc(100% - 18px); } .cdp-flow-trust::after { left: calc(100% - 18px); transform: rotate(180deg); } .cdp-flow-trust > span { position: relative; width: 42px; height: 42px; justify-self: end; display: grid; place-items: center; background: radial-gradient(circle at 50% 54%, rgba(52, 215, 255, 0.16), rgba(3, 16, 29, 0.06) 62%, transparent 74%); filter: drop-shadow(0 0 16px rgba(52, 215, 255, 0.28)); } .cdp-flow-trust > span::before { content: ""; position: absolute; inset: 8px; border-radius: 50%; background: rgba(52, 215, 255, 0.14); filter: blur(9px); } .cdp-flow-trust > span::after { content: ""; position: absolute; inset: auto 5px 1px; height: 1px; background: linear-gradient(90deg, transparent, rgba(143, 240, 255, 0.42), transparent); } .cdp-flow-trust img { position: relative; z-index: 1; width: 38px; height: 38px; object-fit: contain; filter: drop-shadow(0 0 10px rgba(52, 215, 255, 0.34)); } .cdp-flow-trust strong, .cdp-flow-trust small { grid-column: 2; } .cdp-flow-trust strong { color: #f7fcff; font-size: 0.88rem; font-weight: 900; letter-spacing: 0.18em; text-transform: uppercase; } .cdp-flow-trust small { color: rgba(226, 243, 250, 0.76); font-size: 0.84rem; } .cdp-flow-final { width: min(980px, 100%); margin: clamp(28px, 4vw, 48px) auto 0; } .cdp-hero-flow-static.is-intro-complete .cdp-flow-scene { min-height: clamp(420px, 38vw, 500px); margin-bottom: clamp(-124px, -8vw, -78px); transform: scale(0.84); z-index: 5; } .cdp-hero-flow-static.is-intro-complete .cdp-flow-final { margin-top: clamp(16px, 2.4vw, 28px); } .cdp-flow-final .cdp-hero__actions { justify-content: center; } .cdp-hero-flow-static.is-intro-pending .cdp-flow-callout, .cdp-hero-flow-static.is-intro-pending .cdp-flow-export, .cdp-hero-flow-static.is-intro-pending .cdp-flow-trust, .cdp-hero-flow-static.is-intro-pending .cdp-flow-final, .cdp-hero-flow-static.is-intro-pending .cdp-flow-import, .cdp-hero-flow-static.is-intro-pending .cdp-flow-core, .cdp-hero-flow-static.is-intro-pending .cdp-flow-purge, .cdp-hero-flow-static.is-intro-pending .cdp-flow-nodes { opacity: 0; } .cdp-hero-flow-static.is-intro-pending .cdp-flow-callout, .cdp-hero-flow-static.is-intro-pending .cdp-flow-final, .cdp-hero-flow-static.is-intro-pending .cdp-flow-trust { transform: translateY(14px); } .cdp-hero-flow-static.is-intro-playing .cdp-flow-callout, .cdp-hero-flow-static.is-intro-playing .cdp-flow-export, .cdp-hero-flow-static.is-intro-playing .cdp-flow-import, .cdp-hero-flow-static.is-intro-playing .cdp-flow-core, .cdp-hero-flow-static.is-intro-playing .cdp-flow-purge, .cdp-hero-flow-static.is-intro-playing .cdp-flow-nodes, .cdp-hero-flow-static.is-intro-playing .cdp-flow-trust, .cdp-hero-flow-static.is-intro-playing .cdp-flow-final { transition: opacity 680ms cubic-bezier(0.22, 1, 0.36, 1), transform 680ms cubic-bezier(0.22, 1, 0.36, 1); } .cdp-hero-flow-static.is-intro-playing .cdp-flow-import.is-active, .cdp-hero-flow-static.is-intro-playing .cdp-flow-core.is-active, .cdp-hero-flow-static.is-intro-playing .cdp-flow-purge.is-active, .cdp-hero-flow-static.is-intro-playing .cdp-flow-nodes.is-active, .cdp-hero-flow-static.is-intro-playing .cdp-flow-callout.is-active, .cdp-hero-flow-static.is-intro-playing .cdp-flow-export.is-active, .cdp-hero-flow-static.is-intro-playing .cdp-flow-trust.is-active, .cdp-hero-flow-static.is-intro-playing .cdp-flow-final.is-active, .cdp-hero-flow-static.is-intro-complete .cdp-flow-callout, .cdp-hero-flow-static.is-intro-complete .cdp-flow-export, .cdp-hero-flow-static.is-intro-complete .cdp-flow-trust, .cdp-hero-flow-static.is-intro-complete .cdp-flow-final, .cdp-hero-flow-static.is-intro-complete .cdp-flow-import, .cdp-hero-flow-static.is-intro-complete .cdp-flow-core, .cdp-hero-flow-static.is-intro-complete .cdp-flow-purge, .cdp-hero-flow-static.is-intro-complete .cdp-flow-nodes { opacity: 1; transform: none; } .cdp-hero-flow-static.is-intro-playing .cdp-flow-trust.is-active, .cdp-hero-flow-static.is-intro-complete .cdp-flow-trust { transform: translateX(-50%); } .cdp-hero-flow-static.is-intro-complete .cdp-flow-callout { opacity: 0; transform: translateY(-10px); pointer-events: none; } .cdp-hero-flow-static.is-intro-playing .cdp-flow-core.is-active circle, .cdp-hero-flow-static.is-intro-playing .cdp-flow-core.is-active .cdp-flow-core__brain, .cdp-hero-flow-static.is-intro-playing .cdp-flow-callout.is-active .cdp-flow-callout__dot, .cdp-hero-flow-static.is-intro-playing .cdp-flow-purge.is-active circle { animation: cdp-flow-active-glow 1700ms ease-out 1; } .cdp-hero-flow-static.is-intro-playing .cdp-flow-pulse { opacity: 1; } .cdp-hero-flow-static.is-intro-complete .cdp-flow-pulse { opacity: 0; transition: opacity 360ms ease; } .cdp-hero-flow-static.is-intro-pending [data-cdp-flow-draw] { opacity: 0.92; } @keyframes cdp-flow-active-glow { 0% { filter: url("#cdp-flow-glow"); opacity: 0.76; } 42% { filter: url("#cdp-flow-glow"); opacity: 1; } 100% { filter: url("#cdp-flow-glow"); opacity: 1; } } @media (prefers-reduced-motion: reduce) { .cdp-flow-skip { display: none; } .cdp-flow-replay { display: none; } .cdp-hero-flow-static *, .cdp-hero-flow-static *::before, .cdp-hero-flow-static *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; } .cdp-flow-pulse { display: none; } } @media (max-width: 1100px) { .cdp-flow-scene { min-height: 780px; } .cdp-flow-scene__svg { height: 430px; } .cdp-flow-callouts { top: 410px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; padding: 0 8px; } .cdp-flow-callout, .cdp-flow-callout--analysis { position: relative; left: auto; right: auto; width: auto; } .cdp-flow-callout::before { height: 42px; top: -42px; } .cdp-flow-callout__dot { top: -48px; } .cdp-flow-trust { bottom: 4px; } } @media (max-width: 720px) { .cdp-hero-flow-static { gap: 16px; padding-top: 84px; padding-bottom: 34px; text-align: left; } .cdp-flow-scene { width: min(100%, calc(100vw - 28px)); min-height: 570px; } .cdp-flow-scene__svg { inset: 210px -74px auto; width: calc(100% + 148px); height: 270px; min-height: 270px; opacity: 0.72; } .cdp-flow-callouts { top: 0; display: grid; grid-template-columns: 1fr; gap: 18px; padding: 0; } .cdp-hero-flow-static.is-intro-playing .cdp-flow-callout:not(.is-active) { position: absolute; inset: auto; height: 0; min-height: 0; overflow: hidden; padding: 0; } .cdp-flow-callout { padding: 14px 0 0 46px; } .cdp-flow-callout::before { left: 24px; top: 0; height: 100%; transform: none; } .cdp-flow-callout::after { left: 24px; top: 20px; width: 28px; transform: none; } .cdp-flow-callout__dot { left: 19px; top: 12px; transform: none; } .cdp-flow-callout p { margin-bottom: 7px; font-size: 0.68rem; letter-spacing: 0.11em; } .cdp-flow-callout p b { font-size: 1.1rem; } .cdp-flow-callout h2 { font-size: 0.98rem; } .cdp-flow-callout small { margin-top: 8px; max-width: 34ch; font-size: 0.82rem; line-height: 1.42; } .cdp-flow-trust { bottom: 20px; grid-template-columns: 34px minmax(0, 1fr); width: 100%; padding: 12px 18px; } .cdp-flow-trust::before, .cdp-flow-trust::after { display: none; } .cdp-flow-trust strong { font-size: 0.7rem; letter-spacing: 0.1em; } .cdp-flow-trust small { font-size: 0.78rem; } .cdp-hero-flow-static.is-intro-complete .cdp-flow-scene { min-height: 214px; margin-bottom: -24px; transform: none; } .cdp-hero-flow-static.is-intro-complete .cdp-flow-scene__svg { inset: 0 -82px auto; width: calc(100% + 164px); height: 178px; min-height: 178px; opacity: 0.58; } .cdp-hero-flow-static.is-intro-complete .cdp-flow-trust { bottom: 0; transform: translateX(-50%) scale(0.84); transform-origin: center; } .cdp-flow-final { text-align: center; } .cdp-flow-final .cdp-eyebrow { margin-bottom: 10px; font-size: 0.72rem; } .cdp-flow-final h1 { font-size: clamp(2.1rem, 10.8vw, 2.86rem); line-height: 1.04; } .cdp-flow-final .cdp-hero__lead { font-size: 0.96rem; line-height: 1.42; max-width: 31ch; margin-left: auto; margin-right: auto; } .cdp-flow-final .cdp-hero__actions { justify-content: center; gap: 10px; } .cdp-flow-final .cdp-button { min-height: 42px; padding: 10px 14px; font-size: 0.9rem; } } .cdp-hero-flow-static.is-intro-complete .cdp-flow-import, .cdp-hero-flow-static.is-intro-complete .cdp-flow-core, .cdp-hero-flow-static.is-intro-complete .cdp-flow-exports, .cdp-hero-flow-static.is-intro-complete .cdp-flow-purge { cursor: pointer; pointer-events: auto; outline: none; } .cdp-hero-flow-static.is-intro-complete .cdp-flow-import:hover, .cdp-hero-flow-static.is-intro-complete .cdp-flow-import:focus-visible, .cdp-hero-flow-static.is-intro-complete .cdp-flow-core:hover, .cdp-hero-flow-static.is-intro-complete .cdp-flow-core:focus-visible, .cdp-hero-flow-static.is-intro-complete .cdp-flow-exports:hover, .cdp-hero-flow-static.is-intro-complete .cdp-flow-exports:focus-visible, .cdp-hero-flow-static.is-intro-complete .cdp-flow-purge:hover, .cdp-hero-flow-static.is-intro-complete .cdp-flow-purge:focus-visible { filter: brightness(1.25) drop-shadow(0 0 8px rgba(143, 240, 255, 0.35)); } .cdp-hero-flow-static.is-intro-complete:has(.cdp-flow-import:hover) .cdp-flow-callout--import, .cdp-hero-flow-static.is-intro-complete:has(.cdp-flow-import:focus-visible) .cdp-flow-callout--import, .cdp-hero-flow-static.is-intro-complete:has(.cdp-flow-core:hover) .cdp-flow-callout--analysis, .cdp-hero-flow-static.is-intro-complete:has(.cdp-flow-core:focus-visible) .cdp-flow-callout--analysis, .cdp-hero-flow-static.is-intro-complete:has(.cdp-flow-exports:hover) .cdp-flow-callout--exports, .cdp-hero-flow-static.is-intro-complete:has(.cdp-flow-exports:focus-visible) .cdp-flow-callout--exports, .cdp-hero-flow-static.is-intro-complete:has(.cdp-flow-purge:hover) .cdp-flow-callout--purge, .cdp-hero-flow-static.is-intro-complete:has(.cdp-flow-purge:focus-visible) .cdp-flow-callout--purge { opacity: 1 !important; transform: translateY(0) !important; pointer-events: auto !important; z-index: 10; background: rgba(6, 23, 36, 0.94); backdrop-filter: blur(12px); border: 1px solid rgba(143, 240, 255, 0.36); box-shadow: 0 10px 30px rgba(2, 10, 18, 0.8), 0 0 20px rgba(52, 215, 255, 0.15); }