.v4-root { --v4-teal: #10b6a6; --v4-ink: #0e1c2c; --v4-white: #fff; --v4-line: #cfe6e8; --v4-slate: #4f6477; --v4-slate-soft: #5d6f82; --v4-shadow-rgb: 25,73,89; --v4-r-control: 10px; --v4-t-small: 14px; --v4-t-body: 17px; --v4-t-lead: 22px; --v4-shell: 1200px; --v4-gutter: 24px; --v4-display: ui-serif,"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif; --v4-text: "Inter","Segoe UI",system-ui,-apple-system,sans-serif; background: var(--v4-white); min-height: 100vh; } .v4-root *, .v4-root ::before, .v4-root ::after { box-sizing: border-box; } .v4-root .v4-shell { width: 100%; max-width: var(--v4-shell); margin-inline: auto; padding-inline: var(--v4-gutter); } .v4-root .v4-display { font-family: var(--v4-display); font-weight: 600; letter-spacing: 0.02em; line-height: 1.1; margin: 0px; color: var(--v4-ink); } .v4-root .v4-d1 { font-size: clamp(40px, 5.4vw, 80px); line-height: 1.06; } .v4-root .v4-lede { font-size: clamp(16px, 1.35vw, 19px); line-height: 1.55; color: var(--v4-slate); margin: 0px; } .v4-root .v4-micro { font-size: var(--v4-t-small); line-height: 1.45; color: var(--v4-slate-soft); } .v4-root .v4-hero { position: relative; min-height: 100svh; margin-top: -64px; padding-top: 64px; display: flex; flex-direction: column; overflow: hidden; isolation: isolate; } .v4-root .v4-hero__field { position: absolute; inset: 0px; z-index: 0; width: 100%; height: 100%; background: url("assets/hero-field-poster.webp") center bottom / cover no-repeat, radial-gradient(120% 62% at 18% 104%, rgba(63, 127, 245, 0.5) 0%, rgba(63, 127, 245, 0) 62%), radial-gradient(110% 58% at 42% 106%, rgba(36, 150, 223, 0.52) 0%, rgba(36, 150, 223, 0) 60%), radial-gradient(120% 60% at 68% 104%, rgba(16, 182, 166, 0.5) 0%, rgba(16, 182, 166, 0) 62%), radial-gradient(100% 54% at 88% 108%, rgba(103, 96, 237, 0.4) 0%, rgba(103, 96, 237, 0) 58%), linear-gradient(rgb(242, 246, 250) 0%, rgb(255, 255, 255) 46%, rgb(255, 255, 255) 100%); } .v4-root .v4-hero__video { position: absolute; inset: 0px; width: 100%; height: 100%; object-fit: cover; object-position: center bottom; } .v4-root .v4-hero__veil { position: absolute; inset: 0px; z-index: 1; pointer-events: none; background: radial-gradient(84% 58% at 50% 34%, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.94) 52%, rgba(255, 255, 255, 0.84) 72%, rgba(255, 255, 255, 0.42) 88%, rgba(255, 255, 255, 0) 100%); } .v4-root .v4-hero__body { position: relative; z-index: 2; flex: 1 1 0%; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; text-align: center; padding-top: clamp(132px, 17vh, 196px); } .v4-root .v4-hero__title { max-width: 960px; } .v4-root .v4-hero__lede { max-width: 54ch; margin-top: 20px; } .v4-root .v4-intake { width: min(760px, 100%); margin-top: 32px; display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 18px; border-radius: var(--v4-r-control); background: var(--v4-white); border: 1px solid var(--v4-line); box-shadow: 0 2px 6px rgba(var(--v4-shadow-rgb),.07),0 18px 44px rgba(var(--v4-shadow-rgb),.12); } .v4-root .v4-intake__icon { color: var(--v4-teal); font-size: var(--v4-t-lead); line-height: 1; } .v4-root .v4-intake__input { flex: 1 1 0%; min-width: 0px; border: 0px; outline: 0px; background: transparent; font-family: var(--v4-text); font-size: var(--v4-t-body); color: var(--v4-ink); padding-block: 12px; } .v4-root .v4-intake__input::placeholder { color: var(--v4-slate-soft); } .v4-root .v4-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 13px 27px; border: 1px solid transparent; border-radius: var(--v4-r-control); font-family: var(--v4-text); font-size: var(--v4-t-body); font-weight: 600; letter-spacing: -0.01em; cursor: pointer; } .v4-root .v4-btn--signal { background: rgb(11, 125, 117); color: var(--v4-white); box-shadow: rgba(11, 125, 117, 0.22) 0px 2px 6px, rgba(11, 125, 117, 0.18) 0px 12px 28px; } .v4-root .v4-btn__arrow { display: inline-grid; place-items: center; width: 24px; height: 24px; margin-right: -8px; border-radius: 50%; background: rgba(255, 255, 255, 0.16); font-size: var(--v4-t-small); line-height: 1; } .v4-root .v4-hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 22px; } .v4-root .v4-hero__ctas.v4-hero__ctas--quiet { margin-top: 14px; } .v4-root .v4-hero__micro { margin-top: 16px; text-shadow: rgb(255, 255, 255) 0px 0px 12px, rgb(255, 255, 255) 0px 0px 6px, rgba(255, 255, 255, 0.95) 0px 1px 2px; color: rgb(61, 82, 102) !important; } .v4-root .v4-flow { width: 100%; list-style: none; margin: 26px 0px 0px; padding: 0px 0px 4px; display: flex; align-items: stretch; gap: 8px; overflow-x: auto; scrollbar-width: thin; } .v4-root .v4-flow__step { flex: 1 1 0px; min-width: 132px; display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(90, 120, 160, 0.3); background: rgba(255, 255, 255, 0.78); font: 500 12.5px/1.35 var(--cp-font-body,inherit); color: var(--v4-ink); } .v4-root .v4-flow__n { flex: 0 0 auto; width: 18px; height: 18px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font: 700 10.5px/1 var(--mono,ui-monospace,monospace); background: rgba(90, 120, 160, 0.16); color: inherit; } .v4-root .v4-flow__step--hold { border-color: rgba(6, 130, 165, 0.5); color: rgb(6, 105, 127); } .v4-root .v4-flow__step--hold .v4-flow__n { background: rgba(6, 130, 165, 0.16); } .v4-root .v4-flow__step--done { border-color: rgba(13, 107, 74, 0.55); color: rgb(13, 107, 74); } .v4-root .v4-flow__step--done .v4-flow__n { background: rgba(15, 138, 96, 0.16); } .v4-root .v4-flow__note { margin: 10px 0px 0px; font: 500 12px/1.5 var(--cp-font-body,inherit); color: var(--v4-ink) !important; } .v4-root .v4-hero__proof { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font: 600 13px/1 var(--cp-font-body,inherit); color: var(--v4-ink); text-decoration: underline rgba(90, 120, 160, 0.5); text-underline-offset: 4px; padding: 7px 12px; border-radius: 999px; background: rgb(255, 255, 255); border: 1px solid rgba(90, 120, 160, 0.22); } .v4-root .v4-hero__rail { position: relative; z-index: 2; display: flex; align-items: flex-end; gap: 32px; padding: 0px clamp(20px, 4vw, 56px) clamp(24px, 4vh, 44px); } .v4-root .v4-hero__tagline { font-size: var(--v4-t-body); line-height: 1.4; font-weight: 600; max-width: 24ch; flex: 0 0 auto; text-shadow: rgba(255, 255, 255, 0.9) 0px 1px 10px, rgba(255, 255, 255, 0.9) 0px 1px 2px; color: var(--v4-ink) !important; } .v4-root .v4-marquee { flex: 1 1 0%; min-width: 0px; overflow: hidden; mask-image: linear-gradient(90deg, transparent, rgb(0, 0, 0) 12%, rgb(0, 0, 0) 88%, transparent); } .v4-root .v4-marquee__track { display: flex; align-items: center; gap: 44px; width: max-content; } .v4-root .v4-marquee__item { display: inline-flex; align-items: center; gap: 8px; font-size: var(--v4-t-small); font-weight: 600; letter-spacing: -0.01em; color: var(--v4-ink); white-space: nowrap; opacity: 0.78; text-shadow: rgb(255, 255, 255) 0px 0px 12px, rgb(255, 255, 255) 0px 0px 6px, rgba(255, 255, 255, 0.95) 0px 1px 2px; } .v4-root .v4-marquee__logo { width: 26px; height: 26px; display: block; flex: 0 0 auto; fill: currentcolor; opacity: 0.92; } .v4-root .v4-marquee__logo--wide { width: 58px; height: 16px; } .v4-root .v4-marquee__item--word { height: 26px; font-size: 17px; font-weight: 700; letter-spacing: -0.015em; } @media (max-width: 860px){.v4-root .v4-hero__video { display: none; }} @media (max-width: 860px){.v4-root .v4-hero__rail { flex-direction: column; align-items: stretch; gap: 18px; }.v4-root .v4-hero__tagline { max-width: none; }} @media (max-width: 700px){.v4-root .v4-hero__veil { background: radial-gradient(120% 54% at 50% 34%, rgba(255, 255, 255, 0.97) 0%, rgba(255, 255, 255, 0.93) 48%, rgba(255, 255, 255, 0.68) 74%, rgba(255, 255, 255, 0.22) 90%, rgba(255, 255, 255, 0) 100%); }} @media (max-width: 720px){.v4-root .v4-flow__step { min-width: 154px; }} @media (max-width: 560px){.v4-root .v4-hero__body { padding-top: 118px; }.v4-root .v4-intake { padding-left: 14px; }.v4-root .v4-intake__label { display: none; }} @font-face { font-family: Inter; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/inter-400-latin.woff2") format("woff2"); unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: Inter; font-style: normal; font-weight: 500; font-display: swap; src: url("assets/fonts/inter-500-latin.woff2") format("woff2"); unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: Inter; font-style: normal; font-weight: 600; font-display: swap; src: url("assets/fonts/inter-600-latin.woff2") format("woff2"); unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: Inter; font-style: normal; font-weight: 700; font-display: swap; src: url("assets/fonts/inter-700-latin.woff2") format("woff2"); unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/jetbrains-mono-400-latin.woff2") format("woff2"); unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("assets/fonts/jetbrains-mono-500-latin.woff2") format("woff2"); unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 700; font-display: swap; src: url("assets/fonts/jetbrains-mono-700-latin.woff2") format("woff2"); unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/space-grotesk-400-latin.woff2") format("woff2"); unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 500; font-display: swap; src: url("assets/fonts/space-grotesk-500-latin.woff2") format("woff2"); unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 600; font-display: swap; src: url("assets/fonts/space-grotesk-600-latin.woff2") format("woff2"); unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 700; font-display: swap; src: url("assets/fonts/space-grotesk-700-latin.woff2") format("woff2"); unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: Fraunces; font-style: normal; font-weight: 300 600; font-display: swap; src: url("assets/fonts/fraunces-var-300-600-latin.woff2") format("woff2"); unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { --cp-cyan: #00D4FF; --cp-purple: #7C3AED; --cp-deep-space: #0D0D24; --cp-mid-navy: #0A1628; --cp-success: #00FF88; --cp-warning: #FFB627; --cp-danger: #FF4757; --cp-info: #60A5FA; --cp-white: #FFFFFF; --cp-ink: #0F172A; --cp-slate-60: #64748B; --cp-slate-20: #E2E8F0; --cp-gradient: linear-gradient(135deg, #00D4FF 0%, #7C3AED 100%); --cp-font-display: 'Space Grotesk', system-ui, -apple-system, sans-serif; --cp-font-body: 'Inter', system-ui, -apple-system, sans-serif; --cp-font-mono: 'JetBrains Mono', ui-monospace, monospace; --cyber-bg: var(--cp-deep-space); --cyber-card: var(--cp-mid-navy); --cyber-border: rgba(0,212,255,0.18); --cyber-blue: var(--cp-cyan); --cyber-purple: var(--cp-purple); --cyber-green: var(--cp-success); --cyber-pink: var(--cp-danger); --cyber-yellow: var(--cp-warning); --cyber-dark: #050510; --glow-blue: 0 0 10px #00d4ff44, 0 0 20px #00d4ff22; --glow-purple: 0 0 10px #8b5cf644, 0 0 20px #8b5cf622; --glow-green: 0 0 10px #00ff8844, 0 0 20px #00ff8822; --glow-pink: 0 0 10px #ff008044, 0 0 20px #ff008022; --cp-bg: var(--cp-deep-space); --cp-surface: rgba(13,13,36,0.82); --cp-surface-strong: rgba(8,10,28,0.9); --cp-border: rgba(0,212,255,0.16); --cp-text: var(--cp-slate-20); --cp-text-soft: rgba(226,232,240,0.7); --cp-muted: rgba(226,232,240,0.5); } .v4-intake[data-drafting] .v4-btn__arrow { display: inline-block; animation: 0.7s linear 0s infinite normal none running cphDraftSpin; } .v4-intake[data-drafting] .v4-btn--signal { pointer-events: none; opacity: 0.82; } :root { --ch-ink: #05070c; --ch-ink-2: #0b111d; --ch-ink-3: #111827; --ch-panel: rgba(13, 19, 31, 0.82); --ch-panel-strong: rgba(8, 13, 23, 0.92); --ch-panel-soft: rgba(255, 255, 255, 0.055); --ch-line: rgba(148, 163, 184, 0.18); --ch-line-strong: rgba(96, 165, 250, 0.28); --ch-text: #f8fafc; --ch-text-soft: rgba(226, 232, 240, 0.76); --ch-muted: rgba(148, 163, 184, 0.72); --ch-blue: #2f7df6; --ch-blue-soft: #78aefc; --ch-green: #27c77a; --ch-green-soft: #86efac; --ch-warm: #d8dee8; --ch-shadow: 0 28px 80px rgba(0, 0, 0, 0.36); --ch-shadow-soft: 0 18px 48px rgba(15, 23, 42, 0.18); --ch-radius: 8px; --ch-radius-lg: 14px; --cp-bg: var(--ch-ink); --cp-surface: var(--ch-panel); --cp-surface-strong: var(--ch-panel-strong); --cp-border: var(--ch-line); --cp-text: var(--ch-text); --cp-text-soft: var(--ch-text-soft); --cp-muted: var(--ch-muted); --cyber-blue: var(--ch-blue); --cyber-green: var(--ch-green); --cyber-purple: var(--ch-blue); --cyber-pink: var(--ch-blue-soft); --cyber-yellow: var(--ch-green-soft); --cp-gradient: linear-gradient(135deg, #2f7df6 0%, #27c77a 100%); } :root { --ink: #0a0a0b; --ink-2: #17171a; --gray: #5b5b63; --muted: #8a8a93; --faint: #a6a6ad; --line: #e9e9ec; --bg: #ffffff; --bg-alt: #fafafa; --blue: #0070f3; --cyan: #00cfd8; --violet: #7c3aed; --pink: #e0218a; --money: #00a86b; --amber: #e8890c; --danger: #e5484d; --grad-text: linear-gradient(96deg,#0070f3,#7c3aed 55%,#e0218a); --disp: "Space Grotesk","Segoe UI Variable Display",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --body: "Inter",system-ui,-apple-system,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif; --mono: "JetBrains Mono",ui-monospace,"Cascadia Code",Consolas,monospace; --eo: cubic-bezier(0.23,1,0.32,1); --sp: cubic-bezier(0.34,1.4,0.5,1); --maxw: 1120px; } #page-home > :not(.hp-root):not(.v4-root) { display: none !important; } #page-marketplace > :not(.hp-root):not(.v4-root) { display: none !important; } #page-gallery > :not(.hp-root):not(.v4-root) { display: none !important; } #page-community > :not(.hp-root):not(.v4-root) { display: none !important; } #page-live > :not(.hp-root):not(.v4-root) { display: none !important; } #page-wallet > :not(.hp-root):not(.v4-root) { display: none !important; } #page-superclaw > :not(.hp-root):not(.v4-root) { display: none !important; } #page-pay-switch > :not(.hp-root):not(.v4-root) { display: none !important; } #page-dashboard > :not(.hp-root):not(.v4-root) { display: none !important; } #page-docs > :not(.hp-root):not(.v4-root) { display: none !important; } #page-api-docs > :not(.hp-root):not(.v4-root) { display: none !important; } #page-onboarding > :not(.hp-root):not(.v4-root) { display: none !important; } #page-platform-flow > :not(.hp-root):not(.v4-root) { display: none !important; } #page-about > :not(.hp-root):not(.v4-root) { display: none !important; } #page-faq > :not(.hp-root):not(.v4-root) { display: none !important; } #page-contact > :not(.hp-root):not(.v4-root) { display: none !important; } #page-privacy > :not(.hp-root):not(.v4-root) { display: none !important; } #page-terms > :not(.hp-root):not(.v4-root) { display: none !important; } #page-refund > :not(.hp-root):not(.v4-root) { display: none !important; } #page-cookies > :not(.hp-root):not(.v4-root) { display: none !important; } .v4-intake[data-drafting] .v4-btn__arrow { animation: 0.7s linear 0s infinite normal none running cphDraftSpin !important; } .v4-root .v4-marquee__track { animation: 38s linear 0s infinite normal none running v4-marquee !important; } .v4-root .v4-eco__track { animation: 46s linear 0s infinite normal none running v4-eco-run !important; } .v4-root .v4-eco__track--b { animation: 38s linear 0s infinite reverse none running v4-eco-run !important; } .v4-root .v4-eco__track--c { animation: 52s linear 0s infinite normal none running v4-eco-run !important; } .v4-root .v4-eco__track--d { animation: 42s linear 0s infinite reverse none running v4-eco-run !important; } html.is-scrolling .v4-root .v4-marquee__track, html.is-scrolling .v4-root .v4-eco__track, body[data-modal-open] .v4-root .v4-marquee__track, body[data-modal-open] .v4-root .v4-eco__track { animation-play-state: paused !important; } .v4-root .v4-marquee:hover .v4-marquee__track, .v4-root .v4-eco__strip:hover .v4-eco__track, .v4-root .v4-eco__strip:focus-within .v4-eco__track { animation-play-state: paused !important; } .v4-root .v4-marquee__track[data-anim-offscreen], .v4-root .v4-eco__track[data-anim-offscreen] { animation-play-state: paused !important; } @media (prefers-reduced-motion: reduce){.v4-root .v4-marquee__track, .v4-root .v4-eco__track { animation: auto ease 0s 1 normal none running none !important; }} .v4-flow { width: 100%; list-style: none; margin: 26px 0px 0px; padding: 0px 0px 4px; display: flex; align-items: stretch; gap: 8px; overflow-x: auto; scrollbar-width: thin; } .v4-flow__step { flex: 1 1 0px; min-width: 132px; display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(90, 120, 160, 0.3); background: rgba(255, 255, 255, 0.78); font: 500 12.5px/1.35 var(--cp-font-body, inherit); color: var(--v4-ink, #0e1c2c); } .v4-flow__n { flex: 0 0 auto; width: 18px; height: 18px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font: 700 10.5px/1 var(--mono, ui-monospace, monospace); background: rgba(90, 120, 160, 0.16); color: inherit; } .v4-flow__step--hold { border-color: rgba(6, 130, 165, 0.5); color: rgb(6, 105, 127); } .v4-flow__step--hold .v4-flow__n { background: rgba(6, 130, 165, 0.16); } .v4-flow__step--done { border-color: rgba(13, 107, 74, 0.55); color: rgb(13, 107, 74); } .v4-flow__step--done .v4-flow__n { background: rgba(15, 138, 96, 0.16); } .v4-root .v4-hero__tagline { color: var(--v4-ink, #0e1c2c) !important; } .v4-root .v4-hero__micro { color: rgb(61, 82, 102) !important; } .v4-root .v4-card--ink .v4-lede, .v4-root .v4-card--ink p { color: rgb(219, 231, 238) !important; } .v4-root .v4-flow__note { margin: 10px 0px 0px; font: 500 12px/1.5 var(--cp-font-body, inherit); color: var(--v4-ink, #0e1c2c) !important; } .v4-root .v4-hero__ctas.v4-hero__ctas--quiet { margin-top: 14px; } .v4-hero__proof { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font: 600 13px/1 var(--cp-font-body, inherit); color: var(--v4-ink, #0e1c2c); text-decoration: underline rgba(90, 120, 160, 0.5); text-underline-offset: 4px; padding: 7px 12px; border-radius: 999px; background: rgb(255, 255, 255); border: 1px solid rgba(90, 120, 160, 0.22); } .v4-hero__proof:hover { color: var(--cyber-blue, #00d4ff); } @media (max-width: 720px){.v4-flow__step { min-width: 154px; }} :root { --cp-cyan: #2496df; --cp-purple: #10b6a6; --cp-success: #10b6a6; --cp-info: #7fa9f8; --cp-gradient: linear-gradient(135deg, #2496df 0%, #10b6a6 100%); --cyber-border: rgba(36, 150, 223,0.18); --glow-blue: 0 0 10px #2496df44, 0 0 20px #2496df22; --glow-purple: 0 0 10px #10b6a644, 0 0 20px #10b6a622; --glow-green: 0 0 10px #10b6a644, 0 0 20px #10b6a622; --glow-pink: 0 0 10px #2496df44, 0 0 20px #2496df22; --cp-border: rgba(36, 150, 223,0.16); } :root { --ch-line-strong: rgba(127, 169, 248, 0.28); --ch-blue: #3f7ff5; --ch-blue-soft: #8fb6fa; --ch-green: #10b6a6; --ch-green-soft: #c6fdf1; --cp-gradient: linear-gradient(135deg, #3f7ff5 0%, #10b6a6 100%); } :root { --blue: #3f7ff5; --cyan: #2496df; --violet: #10b6a6; --pink: #2496df; --money: #0f9d76; --grad-text: linear-gradient(96deg,#3f7ff5,#10b6a6 55%,#2496df); } :root { --v3-blue: #3f7ff5; --v3-blue-deep: #2496df; --v3-teal: #10b6a6; --v3-mint: #c6fdf1; --v3-ink: #0e1c2c; --v3-paper: #f5fbfc; --v3-mist: #e6f7f4; --v3-aqua: #e5f8fb; --v3-line: #cfe6e8; --v3-slate: #4f6477; --v3-money: #0f9d76; --v3-warn: #c8862a; --v3-danger: #d2494f; --v3-gradient: linear-gradient(135deg, #3f7ff5 0%, #2496df 52%, #10b6a6 100%); --v3-shadow-rgb: 25, 73, 89; } :root { --cp-cyan: var(--v3-blue-deep); --cp-purple: var(--v3-teal); --cp-success: var(--v3-teal); --cp-warning: var(--v3-warn); --cp-danger: var(--v3-danger); --cp-info: var(--v3-blue); --cp-deep-space: var(--v3-ink); --cp-mid-navy: #16293c; --cp-ink: var(--v3-ink); --cp-slate-60: var(--v3-slate); --cp-slate-20: #e2ecef; --cp-gradient: var(--v3-gradient); --cyber-border: rgba(16, 182, 166, 0.18); --cyber-blue: var(--v3-blue); --cyber-purple: var(--v3-teal); --cyber-green: var(--v3-teal); --cyber-pink: var(--v3-blue-deep); --cyber-yellow: var(--v3-warn); --glow-blue: 0 0 0 1px rgba(63, 127, 245, 0.16); --glow-purple: 0 0 0 1px rgba(16, 182, 166, 0.16); --glow-green: 0 0 0 1px rgba(16, 182, 166, 0.16); --glow-pink: 0 0 0 1px rgba(36, 150, 223, 0.16); } :root { --ch-panel: rgba(16, 34, 50, 0.82); --ch-panel-strong: rgba(10, 24, 38, 0.92); --ch-line: rgba(140, 180, 190, 0.20); --ch-line-strong: rgba(16, 182, 166, 0.30); --ch-blue: var(--v3-blue); --ch-blue-soft: #8fb6fa; --ch-green: var(--v3-teal); --ch-green-soft: var(--v3-mint); --ch-shadow: 0 28px 80px rgba(4, 18, 28, 0.42); --ch-shadow-soft: 0 18px 48px rgba(var(--v3-shadow-rgb), 0.18); } :root { --blue: var(--v3-blue); --cyan: var(--v3-blue-deep); --violet: var(--v3-teal); --pink: var(--v3-blue-deep); --money: var(--v3-money); --amber: var(--v3-warn); --danger: var(--v3-danger); --grad-text: linear-gradient(96deg, #3f7ff5, #2496df 52%, #10b6a6); --ink: var(--v3-ink); --ink-2: #16293c; --gray: var(--v3-slate); --muted: #7c8c9c; --faint: #9fb0bd; --line: var(--v3-line); --bg-alt: var(--v3-paper); } .v4-root { background: var(--v4-white); min-height: 100vh; } .v4-root { --v4-blue: #3f7ff5; --v4-blue-deep: #2496df; --v4-teal: #10b6a6; --v4-mint: #c6fdf1; --v4-ink: #0e1c2c; --v4-paper: #f5fbfc; --v4-mist: #e6f7f4; --v4-aqua: #e5f8fb; --v4-line: #cfe6e8; --v4-hairline: #e6ebec; --v4-slate: #4f6477; --v4-slate-soft: #5d6f82; --v4-white: #ffffff; --v4-card: #f1f5f7; --v4-card-2: #e9eff2; --v4-wall-peach: #fcede1; --v4-wall-mint: #eefcef; --v4-wall-lav: #e6def0; --v4-red: #e5484d; --v4-red-deep: #d2494f; --v4-red-soft: #fdecec; --v4-money: #0f9d76; --v4-warn: #c8862a; --v4-danger: #d2494f; --v4-gradient: linear-gradient(135deg, #3f7ff5 0%, #2496df 52%, #10b6a6 100%); --v4-shadow-rgb: 25, 73, 89; --v4-shadow-sm: 0 1px 1px rgba(var(--v4-shadow-rgb), .03); --v4-shadow-md: 0 1px 2px rgba(var(--v4-shadow-rgb), .04); --v4-shadow-lg: 0 2px 4px rgba(var(--v4-shadow-rgb), .05); --v4-shadow-pop: 0 8px 24px rgba(var(--v4-shadow-rgb), .14), 0 2px 6px rgba(var(--v4-shadow-rgb), .08); --v4-r-xl: 12px; --v4-r-lg: 10px; --v4-r-md: 8px; --v4-r-sm: 6px; --v4-r-pill: 999px; --v4-r-control: 10px; --v4-t-micro: 12px; --v4-t-small: 14px; --v4-t-body: 17px; --v4-t-lead: 22px; --v4-t-title: 30px; --v4-r-dot: 999px; --v4-shell: 1200px; --v4-gutter: 24px; --v4-display: ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif; --v4-text: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif; --v4-mono: "JetBrains Mono", "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace; } .v4-root *, .v4-root ::before, .v4-root ::after { box-sizing: border-box; } .v4-root html { text-size-adjust: 100%; } .v4-root body { margin: 0px; background: var(--v4-white); color: var(--v4-ink); font-family: var(--v4-text); font-size: var(--v4-t-body); line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizelegibility; } .v4-root img, .v4-root svg, .v4-root canvas, .v4-root video { display: block; max-width: 100%; height: auto; } .v4-root a { color: inherit; text-decoration: none; } .v4-root .v4-grid > *, .v4-root .v4-card, .v4-root .v4-panel { min-width: 0px; } .v4-root .v4-shell { width: 100%; max-width: var(--v4-shell); margin-inline: auto; padding-inline: var(--v4-gutter); } .v4-root .v4-display { font-family: var(--v4-display); font-weight: 600; letter-spacing: 0.02em; line-height: 1.1; margin: 0px; color: var(--v4-ink); } .v4-root .v4-d1 { font-size: clamp(40px, 5.4vw, 80px); line-height: 1.06; } .v4-root .v4-d2 { font-size: clamp(38px, 4.8vw, 64px); line-height: 1.08; } .v4-root .v4-d3 { font-size: clamp(21px, 2.1vw, 28px); line-height: 1.25; } .v4-root .v4-lede { font-size: clamp(16px, 1.35vw, 19px); line-height: 1.55; color: var(--v4-slate); margin: 0px; } .v4-root .v4-muted { color: var(--v4-slate-soft); } .v4-root .v4-micro { font-size: var(--v4-t-small); line-height: 1.45; color: var(--v4-slate-soft); } .v4-root .v4-eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: var(--v4-r-pill); background: var(--v4-card); border: 1px solid var(--v4-line); font-size: var(--v4-t-small); font-weight: 600; letter-spacing: 0.01em; color: var(--v4-slate); } .v4-root .v4-eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: var(--v4-r-dot); background: var(--v4-red); } .v4-root .v4-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 13px 27px; border: 1px solid transparent; border-radius: var(--v4-r-control); font-family: var(--v4-text); font-size: var(--v4-t-body); font-weight: 600; letter-spacing: -0.01em; cursor: pointer; transition: transform 0.18s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.18s, background-color 0.18s, border-color 0.18s; } .v4-root .v4-btn:active { transform: translateY(1px); } .v4-root .v4-btn--primary { background: var(--v4-ink); color: var(--v4-white); box-shadow: var(--v4-shadow-md); } .v4-root .v4-btn--primary:hover { background: rgb(22, 41, 60); box-shadow: var(--v4-shadow-lg); } .v4-root .v4-btn--signal { background: rgb(11, 125, 117); color: var(--v4-white); box-shadow: rgba(11, 125, 117, 0.22) 0px 2px 6px, rgba(11, 125, 117, 0.18) 0px 12px 28px; } .v4-root .v4-btn--signal:hover { background: rgb(9, 107, 100); } .v4-root .v4-btn--ghost { background: var(--v4-white); color: var(--v4-ink); border-color: var(--v4-line); box-shadow: var(--v4-shadow-sm); } .v4-root .v4-btn--ghost:hover { border-color: rgb(169, 211, 216); box-shadow: var(--v4-shadow-md); } .v4-root .v4-btn--quiet { background: transparent; color: var(--v4-slate); padding-inline: 12px; } .v4-root .v4-btn--quiet:hover { color: var(--v4-ink); } .v4-root .v4-btn--onDark { background: transparent; color: rgba(255, 255, 255, 0.86); padding-inline: 12px; } .v4-root .v4-btn--onDark:hover { color: rgb(255, 255, 255); } .v4-root .v4-btn__arrow { display: inline-grid; place-items: center; width: 24px; height: 24px; margin-right: -8px; border-radius: 50%; background: rgba(255, 255, 255, 0.16); font-size: var(--v4-t-small); line-height: 1; } .v4-root .v4-btn--ghost .v4-btn__arrow { background: var(--v4-card); } .v4-root .v4-nav { position: fixed; top: 18px; left: 50%; transform: translateX(-50%); z-index: 60; width: calc(100% - 32px); max-width: 1120px; } .v4-root .v4-nav__inner { display: flex; align-items: center; gap: 18px; padding: 10px 10px 10px 20px; border-radius: var(--v4-r-control); background: rgba(255, 255, 255, 0.94); border: 1px solid var(--v4-line); box-shadow: var(--v4-shadow-md); } .v4-root .v4-brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--v4-display); font-weight: 700; font-size: var(--v4-t-lead); letter-spacing: -0.05em; } .v4-root .v4-brand__mark { width: 26px; height: 26px; border-radius: 8px; background: var(--v4-gradient); display: grid; place-items: center; color: rgb(255, 255, 255); font-size: var(--v4-t-small); } .v4-root .v4-nav__links { display: flex; align-items: center; gap: 4px; margin-inline: auto; } .v4-root .v4-nav__link { padding: 9px 14px; border-radius: var(--v4-r-control); font-size: var(--v4-t-body); font-weight: 500; color: var(--v4-slate); transition: background-color 0.16s, color 0.16s; } .v4-root .v4-nav__link:hover { background: var(--v4-card); color: var(--v4-ink); } .v4-root .v4-nav__right { display: flex; align-items: center; gap: 8px; } .v4-root .v4-nav__burger { display: none; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--v4-line); background: var(--v4-white); cursor: pointer; } .v4-root .v4-hero { position: relative; min-height: 100svh; display: flex; flex-direction: column; overflow: hidden; isolation: isolate; } .v4-root .v4-hero__field { position: absolute; inset: 0px; z-index: 0; width: 100%; height: 100%; background: url("assets/hero-field-poster.webp") center bottom / cover no-repeat, radial-gradient(120% 62% at 18% 104%, rgba(63, 127, 245, 0.5) 0%, rgba(63, 127, 245, 0) 62%), radial-gradient(110% 58% at 42% 106%, rgba(36, 150, 223, 0.52) 0%, rgba(36, 150, 223, 0) 60%), radial-gradient(120% 60% at 68% 104%, rgba(16, 182, 166, 0.5) 0%, rgba(16, 182, 166, 0) 62%), radial-gradient(100% 54% at 88% 108%, rgba(103, 96, 237, 0.4) 0%, rgba(103, 96, 237, 0) 58%), linear-gradient(rgb(242, 246, 250) 0%, rgb(255, 255, 255) 46%, rgb(255, 255, 255) 100%); } .v4-root .v4-hero__field canvas { width: 100%; height: 100%; } .v4-root .v4-hero__video { position: absolute; inset: 0px; width: 100%; height: 100%; object-fit: cover; object-position: center bottom; } html[data-static-visual] .v4-root .v4-hero__video { display: none; } .v4-root .v4-hero__veil { position: absolute; inset: 0px; z-index: 1; pointer-events: none; background: radial-gradient(84% 58% at 50% 34%, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.94) 52%, rgba(255, 255, 255, 0.84) 72%, rgba(255, 255, 255, 0.42) 88%, rgba(255, 255, 255, 0) 100%); } @media (max-width: 700px){.v4-root .v4-hero__veil { background: radial-gradient(120% 54% at 50% 34%, rgba(255, 255, 255, 0.97) 0%, rgba(255, 255, 255, 0.93) 48%, rgba(255, 255, 255, 0.68) 74%, rgba(255, 255, 255, 0.22) 90%, rgba(255, 255, 255, 0) 100%); }} .v4-root .v4-hero__body { position: relative; z-index: 2; flex: 1 1 0%; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; text-align: center; padding-top: clamp(132px, 17vh, 196px); } .v4-root .v4-hero__title { max-width: 960px; } .v4-root .v4-hero__lede { max-width: 54ch; margin-top: 20px; } .v4-root .v4-intake { width: min(760px, 100%); margin-top: 32px; display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 18px; border-radius: var(--v4-r-control); background: var(--v4-white); border: 1px solid var(--v4-line); box-shadow: 0 2px 6px rgba(var(--v4-shadow-rgb), .07), 0 18px 44px rgba(var(--v4-shadow-rgb), .12); transition: border-color 0.18s, box-shadow 0.18s; } .v4-root .v4-intake:focus-within { border-color: var(--v4-teal); box-shadow: 0 0 0 4px rgba(16,182,166,.14), 0 18px 44px rgba(var(--v4-shadow-rgb), .14); } .v4-root .v4-intake__icon { color: var(--v4-teal); font-size: var(--v4-t-lead); line-height: 1; } .v4-root .v4-intake__input { flex: 1 1 0%; min-width: 0px; border: 0px; outline: 0px; background: transparent; font-family: var(--v4-text); font-size: var(--v4-t-body); color: var(--v4-ink); padding-block: 12px; } .v4-root .v4-intake__input::placeholder { color: var(--v4-slate-soft); } .v4-root .cph-intake-thinking { width: min(760px, 100%); margin: 12px 0px 0px; text-align: left; font-family: var(--v4-text); font-size: var(--v4-t-small); color: var(--v4-slate); animation: 1.4s ease-in-out 0s infinite normal none running cphAskPulse; } .v4-root .cph-intake-chat { width: min(760px, 100%); margin-top: 12px; padding: 16px 18px; border-radius: 18px; background: var(--v4-white); border-top-color: ; border-top-style: ; border-top-width: ; border-right-color: ; border-right-style: ; border-right-width: ; border-bottom-color: ; border-bottom-style: ; border-bottom-width: ; border-image-source: ; border-image-slice: ; border-image-width: ; border-image-outset: ; border-image-repeat: ; border-left: 3px solid var(--v4-teal); box-shadow: 0 2px 6px rgba(var(--v4-shadow-rgb), .07), 0 18px 44px rgba(var(--v4-shadow-rgb), .12); text-align: left; } .v4-root .cph-intake-chat__q { margin: 0px 0px 12px; font-family: var(--v4-text); font-size: var(--v4-t-body); line-height: 1.55; color: var(--v4-ink); } .v4-root .cph-intake-chat__row { display: flex; gap: 8px; align-items: center; } .v4-root .cph-intake-chat__input { flex: 1 1 0%; min-width: 0px; border: 1px solid var(--v4-line); border-radius: 10px; background: transparent; font-family: var(--v4-text); font-size: var(--v4-t-body); color: var(--v4-ink); padding: 10px 12px; outline: 0px; transition: border-color 0.18s, box-shadow 0.18s; } .v4-root .cph-intake-chat__input::placeholder { color: var(--v4-slate-soft); } .v4-root .cph-intake-chat__input:focus { border-color: var(--v4-teal); box-shadow: rgba(16, 182, 166, 0.14) 0px 0px 0px 3px; } .v4-root .cph-intake-chat__skip { border: 0px; background: transparent; font-family: var(--v4-text); font-size: var(--v4-t-small); color: var(--v4-slate); cursor: pointer; padding: 10px 8px; } .v4-root .cph-intake-chat__skip:hover { color: var(--v4-ink); text-decoration: underline; } @media (max-width: 560px){.v4-root .cph-intake-chat__row { flex-wrap: wrap; }.v4-root .cph-intake-chat__input { flex-basis: 100%; }} .v4-root .v4-install { width: min(760px, 100%); margin-top: 16px; display: grid; grid-template-columns: minmax(0px, 1fr) auto; align-items: center; gap: 12px; padding: 10px 10px 10px 16px; background: rgba(255, 255, 255, 0.92); border: 1px solid var(--v4-hairline); border-radius: var(--v4-r-md); text-align: left; } .v4-root .v4-install__k { grid-column: 1 / -1; font-family: var(--v4-mono); font-size: var(--v4-t-micro); letter-spacing: 0.08em; text-transform: uppercase; color: var(--v4-slate-soft); } .v4-root .v4-install__cmd { font-family: var(--v4-mono); font-size: var(--v4-t-micro); line-height: 1.7; color: var(--v4-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; min-width: 0px; background: transparent; border: 0px; padding: 0px; } .v4-root .v4-install__btn { padding: 8px 18px; font-size: var(--v4-t-small); } .v4-root .v4-install__verify { grid-column: 1 / -1; color: var(--v4-slate); font-family: var(--v4-mono); font-size: var(--v4-t-micro); line-height: 1.55; } .v4-root #home-agents .v4-install { width: min(880px, 100%); margin-inline: auto; } .v4-root #home-agents .v4-install__cmd { white-space: normal; overflow-wrap: anywhere; overflow: visible; text-overflow: clip; } .v4-root .v4-install--panel { width: 100%; margin-top: 14px; } .v4-root .v4-install--panel .v4-install__cmd { grid-column: 1 / -1; white-space: normal; overflow-wrap: anywhere; overflow: visible; text-overflow: clip; } .v4-root .v4-install--panel .v4-install__k { grid-area: 1 / 1; min-width: 0px; } .v4-root .v4-install--panel .v4-install__btn { grid-area: 1 / 2; } .v4-root .v4-install__btn { min-height: 44px; } .v4-root .v4-install-note { margin: 12px 2px 0px; color: var(--v4-slate); font-size: var(--v4-t-micro); line-height: 1.65; } @media (max-width: 560px){.v4-root .v4-install { grid-template-columns: minmax(0px, 1fr); }.v4-root .v4-install__cmd { font-size: var(--v4-t-micro); }.v4-root .v4-install--panel .v4-install__btn { grid-area: auto / 1; justify-self: stretch; }} .v4-root .v4-hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 22px; } .v4-root .v4-hero__micro { margin-top: 16px; color: var(--v4-slate); text-shadow: rgb(255, 255, 255) 0px 0px 12px, rgb(255, 255, 255) 0px 0px 6px, rgba(255, 255, 255, 0.95) 0px 1px 2px; } .v4-root .v4-hero__rail { position: relative; z-index: 2; display: flex; align-items: flex-end; gap: 32px; padding: 0px clamp(20px, 4vw, 56px) clamp(24px, 4vh, 44px); } .v4-root .v4-hero__tagline { font-size: var(--v4-t-body); line-height: 1.4; font-weight: 600; color: var(--v4-ink); max-width: 24ch; flex: 0 0 auto; text-shadow: rgba(255, 255, 255, 0.9) 0px 1px 10px, rgba(255, 255, 255, 0.9) 0px 1px 2px; } .v4-root .v4-marquee { flex: 1 1 0%; min-width: 0px; overflow: hidden; mask-image: linear-gradient(90deg, transparent, rgb(0, 0, 0) 12%, rgb(0, 0, 0) 88%, transparent); } .v4-root .v4-marquee__track { display: flex; align-items: center; gap: 44px; width: max-content; animation: 38s linear 0s infinite normal none running v4-marquee; } .v4-root .v4-marquee:hover .v4-marquee__track { animation-play-state: paused; } .v4-root .v4-marquee__item { display: inline-flex; align-items: center; gap: 8px; font-size: var(--v4-t-small); font-weight: 600; letter-spacing: -0.01em; color: var(--v4-ink); white-space: nowrap; opacity: 0.78; text-shadow: rgb(255, 255, 255) 0px 0px 12px, rgb(255, 255, 255) 0px 0px 6px, rgba(255, 255, 255, 0.95) 0px 1px 2px; } .v4-root .v4-marquee__logo { height: 26px; width: 26px; display: block; fill: currentcolor; opacity: 0.92; filter: drop-shadow(rgb(255, 255, 255) 0px 0px 6px) drop-shadow(rgba(255, 255, 255, 0.95) 0px 1px 2px); } .v4-root .v4-marquee__logo--wide { height: 16px; width: 58px; } .v4-root .v4-marquee__item--word { height: 26px; font-size: 17px; font-weight: 700; letter-spacing: -0.015em; } @keyframes v4-marquee { 0% { transform: translateX(0px); } 100% { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce){.v4-root .v4-marquee__track { animation: auto ease 0s 1 normal none running none; }} .v4-root [id] { scroll-margin-top: 84px; } .v4-root .v4-section { padding-block: clamp(72px, 9vw, 128px); } .v4-root .v4-section--tint { background: var(--v4-paper); } #page-home .v4-root .v4-section--tint { background: transparent; } #page-home .v4-root .v4-section:has(.v4-closer) { background: var(--v4-ink); } #page-home .v4-root .v4-closer .v4-d2, #page-home .v4-root .v4-closer h2 { color: var(--v4-white); } #page-home .v4-root .v4-closer p { color: rgba(255, 255, 255, 0.72); } #page-home .v4-root .v4-closer .v4-eyebrow { color: var(--v4-mint); border-color: rgba(255, 255, 255, 0.25); background: rgba(255, 255, 255, 0.06); } .v4-root .v4-section__head { display: grid; grid-template-columns: minmax(0px, 1fr) minmax(0px, 0.8fr); gap: 28px; align-items: end; margin-bottom: clamp(32px, 4vw, 56px); } .v4-root .v4-section__head--center { grid-template-columns: minmax(0px, 1fr); justify-items: center; text-align: center; } .v4-root .v4-section__head--center .v4-lede { max-width: 56ch; } .v4-root .v4-section__title { margin-top: 16px; } .v4-root .v4-grid { display: grid; gap: 16px; } .v4-root .v4-grid--3 { grid-template-columns: repeat(3, minmax(0px, 1fr)); } .v4-root .v4-grid--4 { grid-template-columns: repeat(4, minmax(0px, 1fr)); } .v4-root .v4-grid--2 { grid-template-columns: repeat(2, minmax(0px, 1fr)); } .v4-root .v4-card { position: relative; --v4-card-pad: 32px; padding: var(--v4-card-pad); border-radius: var(--v4-r-xl); background: var(--v4-card); border: 1px solid transparent; overflow: hidden; } .v4-root .v4-card--peach { background: var(--v4-wall-peach); } .v4-root .v4-card--mint { background: var(--v4-wall-mint); } .v4-root .v4-card--lav { background: var(--v4-wall-lav); } .v4-root .v4-card--white { background: var(--v4-white); border-color: var(--v4-line); box-shadow: var(--v4-shadow-sm); } .v4-root .v4-card--ink { background: var(--v4-ink); color: rgb(219, 231, 238); } .v4-root .v4-card--ink::after { content: ""; position: absolute; inset: 0px 0px auto; height: 3px; background: linear-gradient(90deg, var(--v4-red), var(--v4-red-deep) 55%, transparent); } .v4-root .v4-card--ink .v4-display, .v4-root .v4-card--ink strong { color: var(--v4-white); } .v4-root .v4-card--ink .v4-lede { color: rgb(157, 179, 194); } .v4-root .v4-card--signal { background: var(--v4-gradient); color: rgb(255, 255, 255); } .v4-root .v4-card--signal .v4-lede { color: rgba(255, 255, 255, 0.86); } .v4-root .v4-card__label { font-size: var(--v4-t-micro); font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--v4-slate-soft); } .v4-root .v4-card--ink .v4-card__label { color: rgb(127, 155, 173); } .v4-root .v4-card__title { margin: 14px 0px 10px; font-family: var(--v4-display); font-size: var(--v4-t-lead); font-weight: 600; letter-spacing: 0.02em; line-height: 1.2; } .v4-root .v4-stat__value { font-family: var(--v4-display); font-weight: 700; font-size: clamp(30px, 3.4vw, 44px); letter-spacing: -0.055em; line-height: 1; } .v4-root .v4-stat__label { margin-top: 8px; font-size: var(--v4-t-small); color: var(--v4-slate); } .v4-root .v4-card--cost { background: var(--v4-red-soft); } .v4-root .v4-card--cost .v4-stat__value { color: var(--v4-red-deep); } .v4-root .v4-list { border-top: 1px solid var(--v4-line); } .v4-root .v4-list__row { display: grid; grid-template-columns: minmax(190px, 0.85fr) 1.7fr; gap: clamp(14px, 3vw, 44px); padding: 20px 0px; border-bottom: 1px solid var(--v4-line); } .v4-root .v4-list__t { margin: 0px; font-size: var(--v4-t-body); font-weight: 700; line-height: 1.35; color: var(--v4-ink); } .v4-root .v4-list__b { margin: 0px; font-size: var(--v4-t-small); line-height: 1.62; color: var(--v4-slate); } .v4-root .v4-list__label { font: 700 11px/1 var(--v4-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); letter-spacing: 0.08em; text-transform: uppercase; color: var(--v4-slate-soft); margin: 0px 0px 7px; } .v4-root .v4-stats { display: grid; grid-template-columns: repeat(var(--v4-stats-n, 4), minmax(0, 1fr)); border-top: 1px solid var(--v4-line); border-bottom: 1px solid var(--v4-line); } .v4-root .v4-stats > div { padding: 22px clamp(12px, 2vw, 26px); border-left: 1px solid var(--v4-line); } .v4-root .v4-stats > div:first-child { border-left: 0px; } .v4-root .v4-stats--3 { --v4-stats-n: 3; } .v4-root .v4-stats > .v4-card--cost { background: transparent; } @media (max-width: 900px){.v4-root .v4-stats { grid-template-columns: repeat(2, minmax(0px, 1fr)); }.v4-root .v4-stats > div:nth-child(2n+1) { border-left: 0px; }} @media (max-width: 760px){.v4-root .v4-list__row { grid-template-columns: minmax(0px, 1fr); gap: 6px; padding: 16px 0px; }} @media (max-width: 560px){.v4-root .v4-stats { grid-template-columns: minmax(0px, 1fr); }.v4-root .v4-stats > div { border-left: 0px; border-top: 1px solid var(--v4-line); }.v4-root .v4-stats > div:first-child { border-top: 0px; }} .v4-root .v4-plan--cost .v4-plan__price { color: var(--v4-red-deep); } .v4-root .v4-step__index { display: inline-flex; align-items: center; padding: 5px 11px; border-radius: var(--v4-r-pill); background: var(--v4-white); border: 1px solid var(--v4-line); font-family: var(--v4-mono); font-size: var(--v4-t-micro); font-weight: 600; color: var(--v4-slate); } .v4-root .v4-chips { display: flex; flex-wrap: wrap; gap: 8px; } .v4-root .v4-chip { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: var(--v4-r-pill); background: var(--v4-card); font-size: var(--v4-t-small); font-weight: 500; color: var(--v4-slate); } .v4-root .v4-chip--live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--v4-teal); } .v4-root .v4-faq { display: grid; grid-template-columns: minmax(0px, 0.78fr) minmax(0px, 1.22fr); gap: clamp(28px, 4vw, 64px); } .v4-root .v4-faq__list { display: grid; gap: 10px; } .v4-root .v4-faq__item { border-radius: var(--v4-r-lg); background: var(--v4-card); border: 1px solid transparent; overflow: hidden; } .v4-root .v4-faq__item[open] { background: var(--v4-card-2); } .v4-root .v4-faq__q { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 22px; font-size: var(--v4-t-body); font-weight: 600; letter-spacing: -0.02em; cursor: pointer; list-style: none; } .v4-root .v4-faq__q::-webkit-details-marker { display: none; } .v4-root .v4-faq__q::after { content: "+"; flex: 0 0 auto; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--v4-white); color: var(--v4-slate); font-size: var(--v4-t-body); line-height: 1; } .v4-root .v4-faq__item[open] .v4-faq__q::after { content: "−"; background: var(--v4-ink); color: rgb(255, 255, 255); } .v4-root .v4-faq__a { padding: 0px 22px 22px; color: var(--v4-slate); font-size: var(--v4-t-body); } .v4-root .v4-closer { position: relative; border-radius: 32px; overflow: hidden; padding: clamp(48px, 7vw, 92px) clamp(24px, 5vw, 72px); text-align: center; color: rgb(255, 255, 255); background: url("assets/grass-sky.webp") center 60% / cover no-repeat, var(--v4-gradient); } .v4-root .v4-closer::before { content: ""; position: absolute; inset: 0px; background-image: linear-gradient(rgba(11, 58, 74, 0.68) 0%, rgba(11, 58, 74, 0.52) 55%, rgba(11, 58, 74, 0.66) 100%), linear-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.1) 1px, transparent 1px); background-size: auto, 48px 48px, 48px 48px; pointer-events: none; } .v4-root .v4-closer > * { position: relative; } .v4-root .v4-closer .v4-display { color: rgb(255, 255, 255); } .v4-root .v4-closer .v4-lede { color: rgba(255, 255, 255, 0.88); max-width: 56ch; margin-inline: auto; } .v4-root .v4-display, .v4-root .v4-card__title, .v4-root .v4-pagehead__title, .v4-root .v4-case__title { font-family: var(--v4-display) !important; } .v4-root .v4-install__cmd { background: transparent !important; } .v4-root .v4-closer .v4-display, .v4-root .v4-closer h1, .v4-root .v4-closer h2 { color: rgb(255, 255, 255) !important; } .v4-root .v4-card--ink .v4-card__title, .v4-root .v4-card--ink h1, .v4-root .v4-card--ink h2, .v4-root .v4-card--ink h3 { color: rgb(255, 255, 255) !important; } .v4-root .v4-plan--feature .v4-plan__name, .v4-root .v4-plan--feature h1, .v4-root .v4-plan--feature h2, .v4-root .v4-plan--feature h3 { color: rgb(255, 255, 255) !important; } .v4-root .v4-closer .v4-lede { color: rgba(255, 255, 255, 0.92) !important; } .v4-root .v4-footer { padding-bottom: clamp(28px, 4vw, 48px); } .v4-root .v4-footer__card { border-radius: 32px; background: var(--v4-white); border: 1px solid var(--v4-line); box-shadow: var(--v4-shadow-md); padding: clamp(32px, 4vw, 52px); } .v4-root .v4-footer__grid { display: grid; grid-template-columns: minmax(0px, 1.4fr) repeat(3, minmax(0px, 1fr)); gap: 32px; } .v4-root .v4-footer__col h4 { margin: 0px 0px 14px; font-size: var(--v4-t-body); font-weight: 650; letter-spacing: -0.02em; } .v4-root .v4-footer__col ul { margin: 0px; padding: 0px; list-style: none; display: grid; gap: 9px; } .v4-root .v4-footer__col a { font-size: var(--v4-t-small); color: var(--v4-slate); } .v4-root .v4-footer__col a:hover { color: var(--v4-ink); } .v4-root .v4-footer__base { margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--v4-line); display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; font-size: var(--v4-t-small); color: var(--v4-slate-soft); } @media (max-width: 1024px){.v4-root .v4-grid--4 { grid-template-columns: repeat(2, minmax(0px, 1fr)); }.v4-root .v4-faq { grid-template-columns: minmax(0px, 1fr); }.v4-root .v4-footer__grid { grid-template-columns: repeat(2, minmax(0px, 1fr)); }.v4-root .v4-section__head { grid-template-columns: minmax(0px, 1fr); align-items: start; }} @media (max-width: 860px){.v4-root .v4-nav__links { display: none; }.v4-root .v4-nav__burger { display: grid; place-items: center; }.v4-root .v4-nav__right .v4-btn--quiet { display: none; }.v4-root .v4-grid--3, .v4-root .v4-grid--2 { grid-template-columns: minmax(0px, 1fr); }.v4-root .v4-hero__rail { flex-direction: column; align-items: stretch; gap: 18px; }.v4-root .v4-hero__tagline { max-width: none; }} @media (max-width: 560px){.v4-root .v4-grid--4 { grid-template-columns: minmax(0px, 1fr); }.v4-root .v4-footer__grid { grid-template-columns: minmax(0px, 1fr); }.v4-root .v4-hero__body { padding-top: 118px; }.v4-root .v4-intake { padding-left: 14px; }.v4-root .v4-intake__label { display: none; }} .v4-root .v4-sub { padding-top: 104px; } .v4-root .v4-pagehead { position: relative; overflow: hidden; padding-block: clamp(56px, 7vw, 96px); text-align: center; --v4-head-scrim: linear-gradient(180deg, rgba(255,255,255,.62) 0%, rgba(255,255,255,.30) 46%, rgba(255,255,255,.55) 78%, var(--v4-paper) 100%); background-color: var(--v4-paper); background-image: var(--v4-head-scrim), url("assets/grass-sky.webp"); background-position: center top, center 16%; background-size: auto, cover; background-repeat: no-repeat, no-repeat; border-bottom: 1px solid var(--v4-line); } .v4-root .v4-pagehead--dawn { background-image: var(--v4-head-scrim), url("assets/bg-dawn.webp"); } .v4-root .v4-pagehead--meadow { background-image: var(--v4-head-scrim), url("assets/bg-meadow.webp"); } .v4-root .v4-pagehead--coast { background-image: var(--v4-head-scrim), url("assets/bg-coast.webp"); } .v4-root .v4-pagehead--cloudsea { background-image: var(--v4-head-scrim), url("assets/bg-cloudsea.webp"); } .v4-root .v4-pagehead--studio { background-image: var(--v4-head-scrim), url("assets/bg-studio.webp"); } .v4-root .v4-bot { display: block; width: 84px; height: 84px; object-fit: contain; margin-bottom: 4px; } .v4-root .v4-bot--lg { width: 120px; height: 120px; } .v4-root .v4-mascot { display: block; width: min(880px, 88vw); max-width: none; height: auto; margin: -22px auto -58px; } @media (max-width: 860px){.v4-root .v4-mascot { width: 90vw; max-width: none; }} @media (max-width: 560px){.v4-root .v4-mascot { width: 100vw; max-width: none; margin-inline: calc(50% - 50vw); }} .v4-root .v4-pagehead__title { margin-top: 18px; } .v4-root .v4-pagehead .v4-lede { max-width: 58ch; margin-inline: auto; margin-top: 18px; } .v4-root .v4-pagehead__ctas { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 26px; } .v4-root .v4-row { display: grid; grid-template-columns: minmax(0px, 1fr) minmax(0px, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; } .v4-root .v4-row + .v4-row { margin-top: clamp(56px, 7vw, 104px); } .v4-root .v4-row + .v4-grid { margin-top: clamp(40px, 5vw, 72px); } .v4-root .v4-row--flip > :first-child { order: 2; } .v4-root .v4-row__panel { border-radius: var(--v4-r-xl); background: var(--v4-card); padding: clamp(22px, 3vw, 34px); } .v4-root .v4-row__panel.v4-artifact { background: var(--v4-white); padding: 16px; } .v4-root .v4-row__list { margin: 22px 0px 0px; padding: 0px; list-style: none; display: grid; gap: 12px; } .v4-root .v4-row__list li { display: grid; grid-template-columns: 20px minmax(0px, 1fr); gap: 12px; align-items: start; font-size: var(--v4-t-body); color: var(--v4-slate); } .v4-root .v4-row__list li::before { content: ""; margin-top: 7px; width: 8px; height: 8px; border-radius: 2px; background: var(--v4-gradient); } .v4-root .v4-ledger { display: grid; gap: 2px; font-family: var(--v4-mono); font-size: var(--v4-t-small); } .v4-root .v4-ledger__row { display: flex; justify-content: space-between; gap: 16px; padding: 12px 14px; border-radius: var(--v4-r-sm); background: var(--v4-white); color: var(--v4-slate); } .v4-root .v4-ledger__row strong { color: var(--v4-ink); font-weight: 600; } .v4-root .v4-ledger__row--hold { background: var(--v4-aqua); } .v4-root .v4-ledger__row--pay { background: var(--v4-mist); } .v4-root .v4-ledger__row--free { background: var(--v4-white); } .v4-root .v4-artifact { background: var(--v4-white); border-radius: var(--v4-r-lg); border: 1px solid var(--v4-hairline); box-shadow: 0 2px 6px rgba(var(--v4-shadow-rgb), .06), 0 18px 34px rgba(var(--v4-shadow-rgb), .10); padding: 20px; } .v4-root .v4-artifact__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 2px 4px 12px; } .v4-root .v4-artifact__title { font-size: var(--v4-t-small); font-weight: 650; letter-spacing: -0.01em; } .v4-root .v4-artifact__tag { font-size: var(--v4-t-micro); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--v4-slate-soft); padding: 3px 8px; border-radius: var(--v4-r-pill); background: var(--v4-card); } .v4-root .v4-tiles { display: grid; grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: 8px; } .v4-root .v4-tile { padding: 12px; border-radius: var(--v4-r-md); background: var(--v4-card); } .v4-root .v4-tile__k { font-size: var(--v4-t-micro); color: var(--v4-slate-soft); letter-spacing: 0.04em; text-transform: uppercase; } .v4-root .v4-tile__v { margin-top: 6px; font-family: var(--v4-display); font-weight: 700; font-size: var(--v4-t-lead); letter-spacing: -0.04em; line-height: 1; } .v4-root .v4-tile--hold .v4-tile__v { color: rgb(28, 127, 191); } .v4-root .v4-tile--pay .v4-tile__v { color: var(--v4-money); } .v4-root .v4-tile--cost .v4-tile__v { color: var(--v4-red-deep); } .v4-root .v4-bids { margin-top: 10px; display: grid; gap: 6px; } .v4-root .v4-bid { display: grid; grid-template-columns: 26px minmax(0px, 1fr) auto; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--v4-r-md); background: var(--v4-white); box-shadow: inset 0 0 0 1px var(--v4-line); font-size: var(--v4-t-small); } .v4-root .v4-bid--won { background: var(--v4-mist); box-shadow: rgb(185, 228, 220) 0px 0px 0px 1px inset; } .v4-root .v4-bid__av { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--v4-aqua); font-size: var(--v4-t-small); } .v4-root .v4-bid__who { font-weight: 600; letter-spacing: -0.01em; } .v4-root .v4-bid__meta { font-size: var(--v4-t-micro); color: var(--v4-slate-soft); } .v4-root .v4-bid__amt { font-family: var(--v4-mono); font-size: var(--v4-t-small); font-weight: 600; } .v4-root .v4-bid--won .v4-bid__amt { color: rgb(11, 125, 117); } .v4-root .v4-plans { display: grid; grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: 16px; align-items: start; } .v4-root .v4-plan { padding: 28px; border-radius: var(--v4-r-xl); background: var(--v4-card); display: grid; gap: 6px; } .v4-root .v4-plan--feature { background: var(--v4-ink); color: rgb(219, 231, 238); } .v4-root .v4-plan--feature .v4-plan__name, .v4-root .v4-plan--feature .v4-plan__price { color: rgb(255, 255, 255); } .v4-root .v4-plan__name { font-size: var(--v4-t-body); font-weight: 650; letter-spacing: -0.02em; } .v4-root .v4-plan__price { font-family: var(--v4-display); font-weight: 700; font-size: clamp(30px, 3.4vw, 42px); letter-spacing: -0.055em; line-height: 1.05; margin-top: 10px; } .v4-root .v4-plan__note { font-size: var(--v4-t-small); color: var(--v4-slate); } .v4-root .v4-plan--feature .v4-plan__note { color: rgb(157, 179, 194); } .v4-root .v4-plan__list { margin: 18px 0px 0px; padding: 0px; list-style: none; display: grid; gap: 10px; font-size: var(--v4-t-small); } .v4-root .v4-plan__list li { display: grid; grid-template-columns: 16px minmax(0px, 1fr); gap: 10px; color: var(--v4-slate); } .v4-root .v4-plan--feature .v4-plan__list li { color: rgb(185, 203, 215); } .v4-root .v4-plan__list li::before { content: "→"; color: var(--v4-teal); } .v4-root .v4-plan .v4-btn { margin-top: 22px; width: 100%; } .v4-root .v4-log { display: grid; gap: 14px; } .v4-root .v4-log__item { display: grid; grid-template-columns: 160px minmax(0px, 1fr); gap: clamp(16px, 3vw, 40px); padding: 26px; border-radius: var(--v4-r-xl); background: var(--v4-card); } .v4-root .v4-log__meta { display: grid; gap: 10px; align-content: start; } .v4-root .v4-log__date { font-family: var(--v4-mono); font-size: var(--v4-t-small); color: var(--v4-slate); } .v4-root .v4-log__title { margin: 0px 0px 10px; font-size: var(--v4-t-lead); font-weight: 650; letter-spacing: -0.025em; } .v4-root .v4-log__body { margin: 0px; font-size: var(--v4-t-body); color: var(--v4-slate); } .v4-root .v4-cases { display: grid; grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 16px; } .v4-root .v4-case { display: grid; align-content: start; --v4-card-pad: 28px; padding: var(--v4-card-pad); border-radius: var(--v4-r-xl); background: var(--v4-card); overflow: hidden; transition: transform 0.2s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.2s, background-color 0.2s; } .v4-root .v4-case:hover { transform: translateY(-3px); background: var(--v4-white); box-shadow: var(--v4-shadow-md); } .v4-root .v4-case__title { margin: 12px 0px 10px; font-size: var(--v4-t-lead); font-weight: 650; letter-spacing: -0.03em; } .v4-root .v4-case__meta { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 8px; } .v4-root .v4-form { display: grid; gap: 16px; max-width: 620px; } .v4-root .v4-field { display: grid; gap: 8px; } .v4-root .v4-field > label { font-size: var(--v4-t-small); font-weight: 600; letter-spacing: -0.01em; } .v4-root .v4-input, .v4-root .v4-textarea, .v4-root .v4-select { width: 100%; padding: 13px 16px; border-radius: var(--v4-r-md); border: 1px solid var(--v4-line); background: var(--v4-white); font-family: var(--v4-text); font-size: var(--v4-t-body); color: var(--v4-ink); transition: border-color 0.16s, box-shadow 0.16s; } .v4-root .v4-textarea { min-height: 150px; resize: vertical; } .v4-root .v4-input:focus, .v4-root .v4-textarea:focus, .v4-root .v4-select:focus { outline: 0px; border-color: var(--v4-teal); box-shadow: rgba(16, 182, 166, 0.14) 0px 0px 0px 4px; } .v4-root .v4-form__note { font-size: var(--v4-t-small); color: var(--v4-slate-soft); } .v4-root .v4-prose { max-width: 72ch; } .v4-root .v4-prose h2 { font-family: var(--v4-display); font-weight: 700; letter-spacing: -0.045em; font-size: var(--v4-t-title); margin: 44px 0px 14px; } .v4-root .v4-prose h3 { font-size: var(--v4-t-lead); font-weight: 650; letter-spacing: -0.02em; margin: 30px 0px 10px; } .v4-root .v4-prose p, .v4-root .v4-prose li { color: var(--v4-slate); font-size: var(--v4-t-body); } .v4-root .v4-prose ul { padding-left: 20px; display: grid; gap: 8px; } .v4-root .v4-prose a { color: var(--v4-blue); text-decoration: underline; text-underline-offset: 3px; } .v4-root .v4-prose__toc { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 34px; } @media (max-width: 1024px){.v4-root .v4-plans { grid-template-columns: minmax(0px, 1fr); }.v4-root .v4-cases { grid-template-columns: minmax(0px, 1fr); }.v4-root .v4-log__item { grid-template-columns: minmax(0px, 1fr); }} @media (max-width: 860px){.v4-root .v4-row { grid-template-columns: minmax(0px, 1fr); }.v4-root .v4-row--flip > :first-child { order: 0; }.v4-root .v4-sub { padding-top: 92px; }} .v4-root .v4-art { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--v4-r-lg); background: linear-gradient(135deg, var(--v4-aqua), var(--v4-mist)); } .v4-root .v4-card .v4-art, .v4-root .v4-case .v4-art { margin-bottom: 20px; } .v4-root .v4-case .v4-art, .v4-root .v4-card .v4-art { margin: calc(var(--v4-card-pad) * -1) calc(var(--v4-card-pad) * -1) 20px; width: calc(100% + var(--v4-card-pad) * 2); max-width: none; border-radius: var(--v4-r-xl) var(--v4-r-xl) 0 0; } .v4-root .v4-card--white .v4-art { background: var(--v4-paper); } .v4-root .v4-reveal { opacity: 0; transform: translate3d(0px, 18px, 0px); transition: opacity .62s cubic-bezier(.22,.61,.36,1) var(--v4-reveal-delay, 0ms), transform .62s cubic-bezier(.22,.61,.36,1) var(--v4-reveal-delay, 0ms); } .v4-root .v4-in { opacity: 1; transform: none; } .v4-root .v4-nav, .v4-root .v4-nav__inner { transition: top 0.28s cubic-bezier(0.22, 0.61, 0.36, 1), background-color 0.28s, box-shadow 0.28s; } @media (prefers-reduced-motion: reduce){.v4-root .v4-reveal { opacity: 1; transform: none; transition: none; }} .page-section:not(#page-home) .hp-phero { --v4-banner-wash: linear-gradient(135deg, rgba(63, 127, 245, .58) 0%, rgba(36, 150, 223, .52) 52%, rgba(16, 182, 166, .46) 100%); --v4-banner-scrim: linear-gradient(90deg, rgba(6, 20, 34, .52) 0%, rgba(6, 20, 34, .40) 34%, rgba(6, 20, 34, .20) 58%, rgba(6, 20, 34, .06) 80%, rgba(6, 20, 34, 0) 100%); --v4-banner-photo: url("assets/grass-sky.webp"); background-image: var(--v4-banner-scrim), var(--v4-banner-wash), var(--v4-banner-photo) !important; background-size: auto, auto, cover !important; background-position: center center, center center, center 30% !important; background-repeat: no-repeat, no-repeat, no-repeat !important; background-color: rgb(36, 150, 223) !important; } .page-section#page-marketplace .hp-phero { --v4-banner-photo: url("assets/bg-coast.webp"); } .page-section#page-gallery .hp-phero { --v4-banner-photo: url("assets/bg-coast.webp"); } .page-section#page-live .hp-phero { --v4-banner-photo: url("assets/bg-cloudsea.webp"); } .page-section#page-geo .hp-phero { --v4-banner-photo: url("assets/bg-cloudsea.webp"); } .page-section#page-community .hp-phero { --v4-banner-photo: url("assets/bg-meadow.webp"); } .page-section#page-wallet .hp-phero { --v4-banner-photo: url("assets/bg-dawn.webp"); } .page-section#page-api-docs .hp-phero { --v4-banner-photo: url("assets/bg-studio.webp"); } .page-section#page-onboarding .hp-phero { --v4-banner-photo: url("assets/office-bench.webp"); } html.v4-scrolled #main-nav { top: 0px !important; } @media (max-width: 860px){html.v4-scrolled #main-nav { top: 0px !important; }} .v4-root.v4-sub { --v4-sub-clear: 88px; margin-top: -64px; padding-top: var(--v4-sub-clear); } @media (max-width: 860px){.v4-root.v4-sub { --v4-sub-clear: 82px; }} .v4-root.v4-sub > .v4-pagehead:first-child { margin-top: calc(-1 * var(--v4-sub-clear)); padding-top: var(--v4-sub-clear); } .v4-root .v4-hero { margin-top: -64px; padding-top: 64px; } .v4-root .v4-eco { position: relative; isolation: isolate; overflow: hidden; margin-top: clamp(28px, 3.6vw, 44px); padding: clamp(26px, 3.4vw, 44px) 0px; border-radius: var(--v4-r-lg, 28px); background: rgb(6, 7, 12); box-shadow: rgba(2, 6, 23, 0.2) 0px 28px 80px, rgba(255, 255, 255, 0.05) 0px 1px 0px inset; } .v4-root .v4-eco::before { content: ""; position: absolute; inset: 0px; z-index: -1; pointer-events: none; background: radial-gradient(70% 75% at 100% 0%, rgba(63, 127, 245, 0.16), transparent 70%) 0% 0% / auto, radial-gradient(60% 75% at 0% 100%, rgba(16, 182, 166, 0.11), transparent 72%) 0% 0% / auto, linear-gradient(rgba(127, 169, 248, 0.035) 1px, transparent 1px) 0% 0% / 28px 28px, linear-gradient(90deg, rgba(127, 169, 248, 0.035) 1px, transparent 1px) 0% 0% / 28px 28px; } .v4-root .v4-eco__group { margin: 0px 0px clamp(20px, 2.4vw, 30px); } .v4-root .v4-eco__group:last-child { margin-bottom: 0px; } .v4-root .v4-eco__group figcaption { display: flex; align-items: center; gap: 12px; margin: 0px clamp(20px, 3vw, 40px) 12px; font-family: var(--v4-text); font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: rgb(127, 169, 248); } .v4-root .v4-eco__group figcaption::before, .v4-root .v4-eco__group figcaption::after { content: ""; flex: 1 1 auto; height: 1px; background: rgba(127, 169, 248, 0.22); } .v4-root .v4-eco__group:nth-of-type(2) figcaption { color: rgb(36, 150, 223); } .v4-root .v4-eco__group:nth-of-type(3) figcaption { color: rgb(16, 182, 166); } .v4-root .v4-eco__group:nth-of-type(4) figcaption { color: rgb(148, 163, 184); } .v4-root .v4-eco__strip { overflow: hidden; mask-image: linear-gradient(90deg, transparent, rgb(0, 0, 0) 6%, rgb(0, 0, 0) 94%, transparent); } .v4-root .v4-eco__strip:focus-visible { outline: rgb(127, 169, 248) solid 2px; outline-offset: -2px; } .v4-root .v4-eco__strip:focus-within { overflow-x: auto; scrollbar-width: none; } .v4-root .v4-eco__strip:focus-within::-webkit-scrollbar { display: none; } .v4-root .v4-eco__track { display: flex; width: max-content; animation: 46s linear 0s infinite normal none running v4-eco-run; } .v4-root .v4-eco__track--b { animation-duration: 38s; animation-direction: reverse; } .v4-root .v4-eco__track--c { animation-duration: 52s; } .v4-root .v4-eco__track--d { animation-duration: 42s; animation-direction: reverse; } .v4-root .v4-eco__strip:hover .v4-eco__track, .v4-root .v4-eco__strip:focus-within .v4-eco__track { animation-play-state: paused; } .v4-root .v4-eco__track img { display: block; height: clamp(38px, 4.6vw, 62px); width: auto; max-width: none; } @keyframes v4-eco-run { 0% { transform: translateX(0px); } 100% { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce){.v4-root .v4-eco__strip { overflow-x: auto; }.v4-root .v4-eco__track { animation: auto ease 0s 1 normal none running none !important; }.v4-root .v4-eco__track img[aria-hidden="true"] { display: none; }} .v4-root .v4-inv { display: flex; align-items: center; gap: clamp(16px, 2.4vw, 32px); flex-wrap: wrap; margin-top: clamp(18px, 2.2vw, 26px); padding: clamp(20px, 2.6vw, 30px) clamp(22px, 3vw, 36px); border: 1px solid var(--v4-line); border-radius: var(--v4-r-lg, 28px); background: var(--v4-white); box-shadow: var(--v4-shadow-sm); } .v4-root .v4-inv__l { flex: 0 0 auto; } .v4-root .v4-inv__title { margin: 6px 0px 0px; font-family: var(--v4-display); font-size: clamp(22px, 2.4vw, 30px); font-weight: 600; letter-spacing: -0.02em; color: var(--v4-ink); } .v4-root .v4-inv__body { flex: 1 1 260px; margin: 0px; font-family: var(--v4-text); font-size: 15px; line-height: 1.65; color: var(--v4-slate); } .v4-root .v4-inv .v4-btn { flex: 0 0 auto; } @media (max-width: 700px){.v4-root .v4-inv { align-items: flex-start; }.v4-root .v4-inv .v4-btn { width: 100%; }} .v4-root .v4-film { margin: clamp(28px, 3.6vw, 44px) auto 0px; max-width: 1040px; } .v4-root .v4-film__frame { position: relative; overflow: hidden; cursor: pointer; border-radius: var(--v4-r-lg, 28px); background: rgb(6, 7, 12); box-shadow: rgba(2, 6, 23, 0.2) 0px 28px 80px, rgba(255, 255, 255, 0.06) 0px 1px 0px inset; } .v4-root .v4-film__frame:focus-visible { outline: 3px solid var(--v4-blue, #3f7ff5); outline-offset: 3px; } .v4-root .v4-film__video { display: block; width: 100%; aspect-ratio: 16 / 9; background: rgb(6, 7, 12); } .v4-root .v4-film__playbtn { position: absolute; left: 50%; top: 50%; translate: -50% -50%; display: grid; place-items: center; width: 86px; height: 86px; border-radius: 999px; background: rgba(255, 255, 255, 0.92); color: var(--v4-blue, #3f7ff5); box-shadow: rgba(2, 6, 23, 0.35) 0px 18px 48px; pointer-events: none; transition: transform 0.22s, opacity 0.22s, background 0.22s; } .v4-root .v4-film__ic-play { margin-left: 4px; } .v4-root .v4-film__ic-pause { display: none; } .v4-root .v4-film__frame:hover .v4-film__playbtn { transform: scale(1.07); } .v4-root .v4-film__frame.is-playing .v4-film__playbtn { opacity: 0; transform: scale(0.88); } .v4-root .v4-film__frame.is-playing:hover .v4-film__playbtn { opacity: 0.9; transform: scale(1); } .v4-root .v4-film__frame.is-playing .v4-film__ic-play { display: none; } .v4-root .v4-film__frame.is-playing .v4-film__ic-pause { display: block; } .v4-root .v4-film__bar { position: absolute; left: 0px; right: 0px; bottom: 0px; height: 4px; background: rgba(255, 255, 255, 0.18); opacity: 0; transition: opacity 0.3s; } .v4-root .v4-film__frame.is-started .v4-film__bar { opacity: 1; } .v4-root .v4-film__bar-fill { display: block; height: 100%; width: 0%; background: linear-gradient(90deg, var(--v4-blue, #3f7ff5), var(--v4-teal, #10b6a6)); } .v4-root .v4-film__caption { margin: 14px auto 0px; max-width: 760px; text-align: center; font-size: 0.92rem; line-height: 1.6; color: var(--v4-slate, #4f6477); } @media (prefers-reduced-motion: no-preference){#main-nav.v4-dock-enter .desktop-nav > .nav-link, #main-nav.v4-dock-enter .desktop-nav > .nav-dropdown > .nav-link, #main-nav.v4-dock-enter .desktop-nav > .nav-dropdown > .nav-menu-trigger { animation-duration: 0.62s; animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1); animation-iteration-count: 1; animation-direction: normal; animation-fill-mode: both; animation-play-state: running; animation-name: v4-dock-drop; animation-timeline: auto; animation-range: normal; animation-delay: var(--dock-delay, 0ms); }} @keyframes v4-dock-drop { 0% { clip-path: inset(0px 0px 100%); opacity: 0; } 100% { clip-path: inset(0px 0px -40%); opacity: 1; } } .v4-root { background: radial-gradient(120% 42% at 12% 0%, rgba(63, 127, 245, 0.055) 0%, rgba(63, 127, 245, 0) 62%) no-repeat scroll, radial-gradient(110% 38% at 88% 8%, rgba(16, 182, 166, 0.05) 0%, rgba(16, 182, 166, 0) 60%), linear-gradient(rgb(251, 253, 254) 0%, rgb(255, 255, 255) 38%, rgb(255, 255, 255) 100%); } .v4-root .v4-section--tint { background: rgba(230, 247, 244, 0.55); } html.dark .v4-root { --v4-white: #0e1c2c; --v4-paper: #132437; --v4-mist: #102132; --v4-aqua: #0f2030; --v4-card: #14243a; --v4-card-2: #0f1d2e; --v4-ink: #e9f2f7; --v4-slate: #a6bac8; --v4-slate-soft: #859aab; --v4-line: rgba(154, 199, 209, .22); --v4-hairline: rgba(154, 199, 209, .13); --v4-wall-peach: #2a1e18; --v4-wall-mint: #16271d; --v4-wall-lav: #211c2c; --v4-red-soft: rgba(229, 72, 77, .16); --v4-shadow-rgb: 0, 0, 0; } html.dark .v4-root .v4-pagehead { --v4-head-scrim: linear-gradient(180deg, rgba(5, 12, 20, .78) 0%, rgba(5, 12, 20, .64) 46%, rgba(5, 12, 20, .80) 78%, var(--v4-paper) 100%); } html.dark .v4-root { background: radial-gradient(120% 42% at 12% 0%, rgba(63, 127, 245, 0.1) 0%, rgba(63, 127, 245, 0) 62%) no-repeat scroll, radial-gradient(110% 38% at 88% 8%, rgba(16, 182, 166, 0.08) 0%, rgba(16, 182, 166, 0) 60%), linear-gradient(rgb(8, 19, 30) 0%, rgb(5, 7, 12) 38%, rgb(5, 7, 12) 100%); } html.dark .v4-root .v4-section--tint { background: rgba(154, 199, 209, 0.05); } html.dark .v4-root .v4-pagehead .v4-lede, html.dark .v4-root .v4-pagehead p { color: rgb(219, 233, 241); } html.dark .v4-root .v4-hero__title { color: rgb(14, 28, 44) !important; } html.dark .v4-root .v4-hero__lede { color: rgb(79, 100, 119) !important; } html.dark .v4-root .v4-hero__micro, html.dark .v4-root .v4-hero__tagline { color: rgb(79, 100, 119) !important; } html.dark .v4-root .v4-hero__rail .v4-marquee__item { color: rgb(79, 100, 119); } html.dark .v4-root .v4-intake { background: rgb(255, 255, 255); border-color: rgb(230, 235, 236); } html.dark .v4-root .v4-install { background: var(--v4-white); border-color: var(--v4-hairline); } html.dark .v4-root .v4-intake__input { color: rgb(14, 28, 44); } :root { --public-ink: #f5f7fb; --public-muted: #9aa9bc; --public-panel: rgba(13, 21, 35, 0.86); --public-line: rgba(148, 163, 184, 0.18); --public-accent: #00d4ff; --public-success: #48d597; }