@font-face { font-family: Geist; src: url("_vinext_fonts/geist-8ac0455e797f/geist-98bbbccb.woff2") format("woff2"); font-style: normal; font-weight: 100 900; font-display: swap; } :root { --black: #060607; --surface: #121214; --surface-2: #1c1c1e; --paper: #f5f5f7; --white: #ffffff; --ink: #1d1d1f; --secondary: #86868b; --line-dark: rgba(255, 255, 255, 0.12); --line-light: rgba(29, 29, 31, 0.12); --orange: #ff6b3d; --blue: #2997ff; --green: #30d158; --ease: cubic-bezier(.22, 1, .36, 1); font: 100%/1.5 -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Microsoft YaHei", Geist, sans-serif; color-scheme: dark; } * { box-sizing: border-box; } html { scroll-behavior: smooth; background: var(--black); } body { margin: 0; overflow-x: hidden; background: var(--black); color: var(--white); font-family: inherit; -webkit-font-smoothing: antialiased; } a { color: inherit; text-decoration: none; } button { border: 0; color: inherit; font: inherit; } img { display: block; max-width: 100%; } [hidden] { display: none !important; } ::selection { background: var(--orange); color: #fff; } @view-transition { navigation: auto; } ::view-transition-old(root) { animation: page-fade-out .18s ease-in both; } ::view-transition-new(root) { animation: page-fade-in .34s var(--ease) both; } @keyframes page-fade-out { to { opacity: 0; } } @keyframes page-fade-in { from { opacity: 0; } } .skip-link { position: fixed; z-index: 200; top: -5rem; left: 1rem; border-radius: .6rem; padding: .7rem 1rem; background: #fff; color: #111; transition: top .2s; } .skip-link:focus { top: 1rem; } :focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; } /* Floating navigation */ .site-header { position: fixed; z-index: 80; top: .75rem; right: 0; left: 0; opacity: 1; pointer-events: none; will-change: opacity; transition: opacity .26s ease; } .site-header.is-scroll-hidden { opacity: 0; } .site-header.is-scroll-hidden .nav-island { pointer-events: none; } .nav-island { --glass-x: 50%; --glass-y: 0%; position: relative; isolation: isolate; overflow: hidden; width: min(calc(100% - 2rem), 62rem); height: 3.3rem; margin: auto; padding: 0 .55rem 0 .95rem; display: flex; align-items: center; justify-content: space-between; border: 1px solid rgba(255,255,255,.23); border-radius: 999px; background: linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,.025) 48%, rgba(255,255,255,.05)), rgba(18,18,20,.42); box-shadow: 0 1px 0 rgba(255,255,255,.2) inset, 0 -1px 0 rgba(0,0,0,.16) inset, 0 8px 26px rgba(0,0,0,.14), 0 24px 54px rgba(0,0,0,.13); -webkit-backdrop-filter: blur(28px) saturate(190%) contrast(1.05); backdrop-filter: blur(28px) saturate(190%) contrast(1.05); pointer-events: auto; transition: background .32s ease, border-color .32s ease, box-shadow .32s ease, backdrop-filter .32s ease; } .nav-island::before { content: ""; position: absolute; z-index: -2; inset: 0; border-radius: inherit; background: radial-gradient(15rem 4.5rem at var(--glass-x) var(--glass-y), rgba(255,255,255,.24), transparent 70%), linear-gradient(105deg, rgba(255,255,255,.11), transparent 32%, rgba(255,255,255,.07) 58%, transparent 76%), linear-gradient(180deg, rgba(255,255,255,.08), transparent 55%); opacity: .88; pointer-events: none; } .nav-island::after { content: ""; position: absolute; z-index: -1; inset: 0; padding: 1px; border-radius: inherit; background: linear-gradient(105deg, rgba(255,255,255,.72), rgba(100,210,255,.16) 30%, rgba(255,255,255,.12) 50%, rgba(255,107,61,.12) 72%, rgba(255,255,255,.48)); opacity: .72; pointer-events: none; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; } .nav-island > * { position: relative; z-index: 1; } .site-header.is-scrolled .nav-island { border-color: rgba(255,255,255,.26); background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.035) 48%, rgba(255,255,255,.055)), rgba(18,18,20,.62); box-shadow: 0 1px 0 rgba(255,255,255,.24) inset, 0 -1px 0 rgba(0,0,0,.2) inset, 0 10px 30px rgba(0,0,0,.19), 0 28px 60px rgba(0,0,0,.17); -webkit-backdrop-filter: blur(32px) saturate(195%) contrast(1.06); backdrop-filter: blur(32px) saturate(195%) contrast(1.06); } .wordmark { display: inline-flex; align-items: center; gap: .56rem; white-space: nowrap; font-size: .86rem; font-weight: 700; } .wordmark b { margin-left: -.25rem; color: #8e8e93; font-size: .66rem; font-weight: 650; } .wordmark-logo { width: 1.85rem; height: 1.85rem; flex: 0 0 auto; object-fit: contain; } .desktop-nav { display: flex; align-items: center; gap: .18rem; padding: .18rem; border-radius: 999px; } .desktop-nav a { min-width: 3.55rem; padding: .5rem .7rem; border-radius: 999px; color: #d2d2d7; text-align: center; font-size: .76rem; transition: color .2s, background .2s, transform .1s; } .desktop-nav a:hover, .desktop-nav a[aria-current="page"] { background: rgba(255,255,255,.09); color: #fff; } .desktop-nav a:active { transform: scale(.95); } .nav-actions { display: flex; align-items: center; gap: .5rem; } .nav-contact { min-height: 2.25rem; padding: 0 .82rem 0 .92rem; display: inline-flex; align-items: center; gap: .5rem; border-radius: 999px; background: rgba(255,255,255,.92); color: #111113; font-size: .72rem; font-weight: 650; transition: background .18s, transform .1s; } .nav-contact span { color: #6e6e73; font-size: .78rem; transition: transform .18s var(--ease); } .nav-contact:hover { background: #fff; } .nav-contact:hover span { transform: translateX(.12rem); } .nav-contact:active { transform: scale(.96); } .menu-button { display: none; position: relative; width: 2.55rem; height: 2.55rem; border: 1px solid rgba(255,255,255,.1); border-radius: 50%; background: rgba(255,255,255,.08); box-shadow: inset 0 1px rgba(255,255,255,.08); cursor: pointer; transition: background .2s, transform .1s; } .menu-button:hover { background: rgba(255,255,255,.14); } .menu-button:active { transform: scale(.94); } .menu-button span { position: absolute; left: .76rem; right: .76rem; height: 1px; background: #fff; transition: top .28s var(--ease), transform .28s var(--ease); } .menu-button span:first-child { top: 1.03rem; } .menu-button span:last-child { top: 1.48rem; } .menu-button[aria-expanded="true"] span:first-child { top: 1.26rem; transform: rotate(45deg); } .menu-button[aria-expanded="true"] span:last-child { top: 1.26rem; transform: rotate(-45deg); } .mobile-menu { position: absolute; top: 4.15rem; right: 1rem; width: min(20rem, calc(100vw - 2rem)); padding: .55rem; border: 1px solid rgba(255,255,255,.15); border-radius: 1rem; background: rgba(25,25,28,.88); box-shadow: 0 28px 70px rgba(0,0,0,.45), inset 0 1px rgba(255,255,255,.08); -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%); pointer-events: auto; transform-origin: top right; animation: menu-in .34s var(--ease) both; } .mobile-menu a { display: block; padding: .9rem 1rem; border-radius: .8rem; font-size: .94rem; } .mobile-menu a:hover { background: rgba(255,255,255,.08); } @keyframes menu-in { from { opacity: 0; transform: translateY(-.5rem) scale(.95); filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } } /* Hero */ .hero { position: relative; height: calc(100svh - 5.5rem); min-height: 46rem; max-height: 60rem; overflow: hidden; background: #07090b; } .hero-media { position: absolute; inset: 0; background-image: linear-gradient(180deg, rgba(4,5,7,.7) 0%, rgba(4,5,7,.45) 42%, rgba(4,5,7,.88) 100%), linear-gradient(90deg, rgba(3,5,7,.55), transparent 55%), url("../hero-cinema.png"); background-position: center 45%; background-size: cover; animation: hero-materialize 1.35s var(--ease) both; } .hero-media::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 20%, transparent 0, rgba(3,4,6,.22) 48%, rgba(3,4,6,.72) 100%); } @keyframes hero-materialize { from { opacity: .25; transform: scale(1.08); filter: blur(12px) saturate(.5); } to { opacity: 1; transform: scale(1.01); filter: none; } } .hero-inner { position: relative; z-index: 2; width: min(calc(100% - 2rem), 74rem); height: 100%; margin: auto; padding-top: 6.4rem; display: flex; flex-direction: column; align-items: center; } .hero-copy { position: relative; z-index: 3; max-width: 48rem; text-align: center; } .hero-eyebrow { margin: 0 0 .65rem; display: flex; align-items: center; justify-content: center; gap: .55rem; color: #d2d2d7; font-size: .67rem; font-weight: 700; } .hero-eyebrow span { width: .42rem; height: .42rem; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 .25rem rgba(48,209,88,.13); } .hero h1 { margin: 0; font-size: clamp(4.8rem, 9vw, 8.2rem); font-weight: 720; line-height: .9; letter-spacing: -.07em; } .hero-product { margin: .65rem 0 0; color: #d2d2d7; font-size: clamp(1rem, 1.6vw, 1.3rem); font-weight: 600; } .hero-lead { max-width: 34rem; margin: .9rem auto 0; color: #b9b9be; font-size: .98rem; line-height: 1.65; } .hero-actions { margin-top: 1.35rem; display: flex; align-items: center; justify-content: center; gap: .8rem; } .button { min-height: 2.85rem; padding: 0 1.2rem; display: inline-flex; align-items: center; justify-content: center; gap: .72rem; border-radius: 999px; font-size: .8rem; font-weight: 700; transition: transform .12s, box-shadow .25s, background .25s; } .button:active, .text-button:active, .console-tab:active, .feature-rail-controls button:active, .plan-button:active { transform: scale(.96); transition-duration: .08s; } .button-primary { background: rgba(255,255,255,.94); color: #111113; box-shadow: inset 0 1px #fff, 0 10px 24px rgba(0,0,0,.2); -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%); } .button-primary:hover { background: #fff; box-shadow: inset 0 1px #fff, 0 14px 30px rgba(0,0,0,.26); transform: translateY(-1px); } .text-button { min-height: 2.85rem; padding: 0 .4rem; display: inline-flex; align-items: center; gap: .55rem; color: #f5f5f7; font-size: .8rem; font-weight: 650; transition: opacity .2s, transform .1s; } .text-button:hover { opacity: .72; } .product-stage { --stage-width: min(57rem, 78vw); position: relative; width: var(--stage-width); margin-top: 2rem; perspective: 1200px; } .product-window { --rx: 0deg; --ry: 0deg; position: relative; overflow: hidden; height: 24rem; border: 1px solid rgba(255,255,255,.2); border-radius: 1rem; background: rgba(17,18,21,.79); box-shadow: 0 42px 100px rgba(0,0,0,.58), 0 1px 0 rgba(255,255,255,.08), inset 0 1px rgba(255,255,255,.11); -webkit-backdrop-filter: blur(28px) saturate(160%); backdrop-filter: blur(28px) saturate(160%); transform: perspective(1200px) rotateX(var(--rx)) rotateY(var(--ry)); transform-style: preserve-3d; will-change: transform; animation: product-in 1.05s .28s var(--ease) both; } @keyframes product-in { from { opacity: 0; transform: perspective(1200px) translateY(2.4rem) rotateX(4deg) scale(.94); filter: blur(10px); } to { opacity: 1; transform: perspective(1200px) rotateX(var(--rx)) rotateY(var(--ry)); filter: none; } } .window-bar { height: 2.8rem; padding: 0 .9rem; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; border-bottom: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.035); } .traffic-lights { display: flex; gap: .32rem; } .traffic-lights i { width: .48rem; height: .48rem; border-radius: 50%; background: #ff5f57; } .traffic-lights i:nth-child(2) { background: #febc2e; } .traffic-lights i:nth-child(3) { background: #28c840; } .window-title { display: flex; align-items: center; gap: .4rem; color: #a1a1a6; font-size: .62rem; font-weight: 650; } .window-mark { width: .55rem; height: .55rem; border-radius: .18rem .18rem .3rem .3rem; background: var(--orange); box-shadow: 0 0 1rem rgba(255,107,61,.55); } .window-status { justify-self: end; display: flex; align-items: center; gap: .4rem; color: #9bd8ae; font-size: .58rem; } .window-status span { width: .36rem; height: .36rem; border-radius: 50%; background: var(--green); } .window-layout { height: calc(100% - 2.8rem); display: grid; grid-template-columns: 4rem 1fr; } .window-sidebar { padding: .8rem .42rem; display: flex; flex-direction: column; align-items: center; gap: .35rem; border-right: 1px solid rgba(255,255,255,.07); } .console-tab { width: 3.05rem; min-height: 3rem; padding: .35rem 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .16rem; border-radius: .72rem; background: transparent; color: #6e6e73; cursor: pointer; transition: color .2s, background .2s, transform .1s; } .console-tab i { font-style: normal; font-size: .82rem; line-height: 1; } .console-tab span { font-size: .54rem; } .console-tab:hover { color: #fff; background: rgba(255,255,255,.055); } .console-tab.is-active { color: #fff; background: rgba(255,255,255,.11); box-shadow: 0 4px 12px rgba(0,0,0,.16), inset 0 1px rgba(255,255,255,.08); } .window-main { min-width: 0; padding: 1.05rem 1.2rem; } .console-view { height: 100%; animation: view-in .34s var(--ease) both; } @keyframes view-in { from { opacity: 0; transform: translateY(.5rem); filter: blur(5px); } to { opacity: 1; transform: none; filter: none; } } .console-heading { display: flex; align-items: center; justify-content: space-between; } .console-heading small { display: block; color: #6e6e73; font-size: .56rem; } .console-heading h2 { margin: .08rem 0 0; font-size: 1rem; letter-spacing: -.025em; } .view-chip { padding: .3rem .5rem; border: 1px solid rgba(255,255,255,.08); border-radius: 999px; background: rgba(255,255,255,.05); color: #8e8e93; font-size: .53rem; } .metric-row { margin-top: .75rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; } .metric-row article { min-width: 0; padding: .7rem .78rem; border: 1px solid rgba(255,255,255,.065); border-radius: .6rem; background: rgba(255,255,255,.048); } .metric-row small { display: block; color: #77777d; font-size: .54rem; } .metric-row strong { display: block; margin: .2rem 0 .12rem; font-size: 1.15rem; letter-spacing: -.03em; } .metric-row span { color: #77777d; font-size: .49rem; } .metric-row .trend { color: #73d995; } .chart-panel { height: 9.25rem; margin-top: .5rem; padding: .7rem .78rem; border: 1px solid rgba(255,255,255,.065); border-radius: .6rem; background: rgba(255,255,255,.032); } .panel-title { display: flex; justify-content: space-between; font-size: .56rem; } .panel-title small { color: #65656a; } .bar-chart { height: 6.8rem; padding: .6rem .15rem 0; display: flex; align-items: flex-end; gap: .38rem; background: repeating-linear-gradient(to top, transparent 0, transparent 1.55rem, rgba(255,255,255,.042) 1.58rem, rgba(255,255,255,.042) 1.62rem); } .bar-chart i { flex: 1; height: var(--h); min-width: .24rem; border-radius: .18rem .18rem .04rem .04rem; background: var(--orange); opacity: .88; } .media-list { margin-top: .8rem; display: grid; gap: .45rem; } .media-list article { padding: .55rem; display: grid; grid-template-columns: 3.2rem 1fr auto; align-items: center; gap: .7rem; border: 1px solid rgba(255,255,255,.07); border-radius: .55rem; background: rgba(255,255,255,.042); } .poster { height: 2.75rem; border-radius: .35rem; } .poster-one { background: linear-gradient(140deg, #2c5269, #d49b6e); } .poster-two { background: linear-gradient(140deg, #785b4d, #1f2d34); } .poster-three { background: linear-gradient(140deg, #1b2741, #b84d42); } .media-list b { display: block; font-size: .66rem; } .media-list small { display: block; margin-top: .16rem; color: #77777d; font-size: .52rem; } .media-list em { color: #a1a1a6; font-size: .52rem; font-style: normal; } .node-map { position: relative; height: 13.5rem; margin-top: .75rem; overflow: hidden; border: 1px solid rgba(255,255,255,.07); border-radius: .6rem; background: rgba(255,255,255,.035); } .map-grid, .network-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px); background-size: 2rem 2rem; -webkit-mask-image: radial-gradient(circle, #000, transparent 72%); mask-image: radial-gradient(circle, #000, transparent 72%); } .node { position: absolute; display: flex; align-items: center; gap: .32rem; color: #a1a1a6; font-size: .52rem; } .node i { width: .4rem; height: .4rem; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 .28rem rgba(48,209,88,.12), 0 0 1rem rgba(48,209,88,.4); } .node-a { left: 26%; top: 34%; }.node-b { left: 48%; top: 65%; }.node-c { right: 18%; top: 28%; }.node-d { left: 12%; bottom: 15%; } .node-summary { margin-top: .45rem; display: flex; justify-content: space-between; color: #77777d; font-size: .52rem; } .node-summary span { display: flex; align-items: center; gap: .3rem; } .node-summary i { width: .3rem; height: .3rem; border-radius: 50%; background: var(--green); } .node-summary b { color: #b9b9be; } .live-activity { position: absolute; z-index: 4; right: -1rem; bottom: 1rem; min-width: 8.6rem; padding: .58rem .76rem; display: flex; align-items: center; gap: .62rem; border: 1px solid rgba(255,255,255,.2); border-radius: 999px; background: rgba(30,30,33,.66); box-shadow: 0 16px 40px rgba(0,0,0,.4), inset 1px 1px rgba(255,255,255,.13), inset -1px -1px rgba(255,255,255,.04); -webkit-backdrop-filter: blur(24px) saturate(185%); backdrop-filter: blur(24px) saturate(185%); animation: live-in .55s 1.15s var(--ease) both; } .live-activity > span:last-child { display: flex; align-items: baseline; gap: .4rem; } .live-activity small { color: #a1a1a6; font-size: .52rem; } .live-activity strong { font-size: .73rem; } .live-activity-icon { height: .9rem; display: flex; align-items: flex-end; gap: .1rem; } .live-activity-icon i { width: .13rem; border-radius: 1rem; background: var(--orange); } .live-activity-icon i:nth-child(1) { height: .4rem; }.live-activity-icon i:nth-child(2) { height: .8rem; }.live-activity-icon i:nth-child(3) { height: .56rem; } @keyframes live-in { from { opacity: 0; transform: translateX(1rem) scale(.9); filter: blur(7px); } to { opacity: 1; transform: none; filter: none; } } .signal-strip { width: min(calc(100% - 2rem), 70rem); min-height: 5.5rem; margin: 0 auto; display: flex; align-items: center; justify-content: center; gap: 4rem; color: #d2d2d7; } .signal-strip div { display: flex; align-items: baseline; gap: .7rem; } .signal-strip span { color: #6e6e73; font-size: .65rem; } .signal-strip strong { font-size: .9rem; } .signal-strip > i { width: 1px; height: 1.5rem; background: rgba(255,255,255,.13); } /* Content bands */ .section-kicker { margin: 0 0 1rem; color: var(--orange); font-size: .68rem; font-weight: 750; text-transform: uppercase; } .platform { padding: 9rem max(1.25rem, calc((100vw - 70rem) / 2)); background: var(--paper); color: var(--ink); } .platform-intro { max-width: 62rem; } .platform-intro h2, .capabilities-head h2, .delivery-head h2, .closing h2, .plans-heading h2, .comparison-head h2, .pricing-cta h2 { margin: 0; font-size: clamp(3rem, 6vw, 5.8rem); font-weight: 680; line-height: 1; letter-spacing: -.055em; } .platform-intro h2 span { color: #86868b; } .platform-intro > p:last-child { max-width: 38rem; margin: 2rem 0 0 auto; color: #6e6e73; font-size: 1.02rem; line-height: 1.8; } .principle-grid { margin-top: 6rem; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line-light); border-bottom: 1px solid var(--line-light); } .principle-grid article { min-height: 13rem; padding: 2rem 2rem 2rem 0; } .principle-grid article + article { padding-left: 2rem; border-left: 1px solid var(--line-light); } .principle-grid span { color: #a1a1a6; font-size: .66rem; } .principle-grid h3 { margin: 2.2rem 0 .55rem; font-size: 1.55rem; letter-spacing: -.03em; } .principle-grid p { max-width: 17rem; margin: 0; color: #6e6e73; font-size: .82rem; line-height: 1.65; } .capabilities { padding: 9rem max(1.25rem, calc((100vw - 70rem) / 2)); background: #080809; } .capabilities-head { display: grid; grid-template-columns: 1fr 19rem; align-items: end; gap: 4rem; } .capabilities-side { display: grid; gap: 1.25rem; } .capabilities-side > p { margin: 0; color: #86868b; font-size: .88rem; line-height: 1.75; } .feature-rail-controls { display: flex; gap: .45rem; } .feature-rail-controls button { width: 2.45rem; height: 2.45rem; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.11); border-radius: 50%; background: rgba(255,255,255,.07); box-shadow: inset 0 1px rgba(255,255,255,.06); color: #fff; cursor: pointer; transition: background .2s, opacity .2s, transform .1s; } .feature-rail-controls button:hover { background: rgba(255,255,255,.13); } .feature-rail-controls button:disabled { opacity: .28; cursor: default; } .feature-rail { margin-top: 5rem; padding-bottom: .7rem; display: grid; grid-auto-flow: column; grid-auto-columns: min(35rem, calc(92vw - 2rem)); gap: 1rem; overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: none; scrollbar-width: none; cursor: grab; } .feature-rail:active { cursor: grabbing; } .feature-rail::-webkit-scrollbar { display: none; } .feature-card { height: 18.5rem; min-height: 0; padding: 1.35rem; display: grid; grid-template-columns: .92fr 1.08fr; align-items: center; gap: 1.25rem; border: 1px solid rgba(255,255,255,.11); border-radius: 1rem; background: #121214; box-shadow: inset 0 1px rgba(255,255,255,.06), 0 30px 70px rgba(0,0,0,.26); } .feature-card:nth-child(4n + 1) { border-top-color: rgba(255,107,61,.42); } .feature-card:nth-child(4n + 2) { border-top-color: rgba(41,151,255,.42); } .feature-card:nth-child(4n + 3) { border-top-color: rgba(100,210,255,.38); } .feature-card:nth-child(4n + 4) { border-top-color: rgba(48,209,88,.38); } .feature-copy p { margin: 0 0 .85rem; color: var(--orange); font-size: .66rem; font-weight: 750; } .feature-copy p b { margin-right: .42rem; color: #5f5f64; font-weight: 650; } .feature-copy { min-width: 0; } .feature-copy h3 { margin: 0; font-size: clamp(1.55rem, 2.1vw, 2.05rem); font-weight: 650; line-height: 1.08; letter-spacing: 0; } .feature-copy span { display: block; max-width: 24rem; margin-top: 1rem; color: #86868b; font-size: .74rem; line-height: 1.6; } .portal-preview { min-width: 0; height: 15.75rem; padding: .75rem .75rem 0; overflow: hidden; border: 1px solid rgba(255,255,255,.1); border-radius: .8rem; background: #09090a; box-shadow: 0 24px 60px rgba(0,0,0,.35); } .portal-bar { height: 1.6rem; display: flex; align-items: center; justify-content: space-between; }.portal-bar i { width: .55rem; height: .55rem; border-radius: 50%; background: #fff; }.portal-bar span { width: 3.5rem; height: .2rem; border-radius: 1rem; background: #343437; } .portal-hero { height: 7rem; padding: .9rem; display: flex; flex-direction: column; justify-content: flex-end; border-radius: .55rem; background: linear-gradient(90deg, rgba(0,0,0,.85), rgba(0,0,0,.1)), url("../hero-cinema.png") center / cover; } .portal-hero small { color: #b9b9be; font-size: .55rem; }.portal-hero b { margin-top: .15rem; font-size: 1.25rem; }.portal-hero em { margin-top: .35rem; color: #d2d2d7; font-size: .6rem; font-style: normal; } .portal-posters { margin-top: .55rem; display: grid; grid-template-columns: repeat(4, 1fr); gap: .4rem; }.portal-posters i { height: 5.5rem; border-radius: .4rem; background: linear-gradient(145deg, #28364d, #7f9bb0); }.portal-posters i:nth-child(2) { background: linear-gradient(145deg, #3d3f2b, #98a368); }.portal-posters i:nth-child(3) { background: linear-gradient(145deg, #4b3037, #b66f68); }.portal-posters i:nth-child(4) { background: linear-gradient(145deg, #273e3a, #71a597); } .operations-preview { position: relative; min-width: 0; height: 15.75rem; padding: .8rem; border: 1px solid rgba(255,255,255,.1); border-radius: .8rem; background: #0b0b0c; } .op-chart { height: 14rem; padding: 1rem; border-radius: .65rem; background: #18181a; }.op-chart > span { color: #86868b; font-size: .62rem; }.op-chart > strong { display: block; margin-top: .25rem; font-size: 1.5rem; }.op-chart > div { height: 7rem; margin-top: .8rem; display: flex; align-items: flex-end; gap: .45rem; }.op-chart i { flex: 1; height: var(--h); border-radius: .25rem .25rem .08rem .08rem; background: var(--blue); opacity: .86; } .op-event { position: absolute; right: 1.8rem; bottom: 1.4rem; left: 3.5rem; padding: .85rem; display: grid; grid-template-columns: .55rem 1fr auto; align-items: center; gap: .65rem; border: 1px solid rgba(255,255,255,.14); border-radius: .65rem; background: rgba(37,37,40,.8); box-shadow: 0 16px 40px rgba(0,0,0,.35); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }.op-event > i { width: .5rem; height: .5rem; border-radius: 50%; background: var(--green); }.op-event b { display: block; font-size: .68rem; }.op-event small { display: block; margin-top: .1rem; color: #86868b; font-size: .52rem; }.op-event em { color: #a9dfba; font-size: .62rem; font-style: normal; } .pipeline-preview { min-width: 0; min-height: 15.75rem; display: flex; flex-direction: column; justify-content: center; gap: .35rem; } .pipeline-step { min-height: 3.7rem; padding: 0 .8rem; display: flex; align-items: center; gap: .7rem; border: 1px solid rgba(255,255,255,.09); border-radius: .7rem; background: #19191b; }.pipeline-step > i { flex: 0 0 auto; width: 1.6rem; height: 1.6rem; display: grid; place-items: center; border: 1px solid #4b4b50; border-radius: 50%; color: #a1a1a6; font-size: .6rem; font-style: normal; }.pipeline-step b { display: block; font-size: .7rem; }.pipeline-step small { display: block; margin-top: .1rem; color: #77777d; font-size: .52rem; }.pipeline-step.is-done > i { border-color: rgba(48,209,88,.32); background: rgba(48,209,88,.12); color: #83d99c; }.pipeline-step.is-active { border-color: rgba(41,151,255,.3); background: rgba(41,151,255,.07); }.pipeline-step.is-active > i { border: .26rem solid rgba(41,151,255,.2); background: var(--blue); box-shadow: 0 0 1.3rem rgba(41,151,255,.4); }.pipeline-preview > em { width: 1px; height: .65rem; margin-left: 1.58rem; background: #343437; } .network-preview { position: relative; min-width: 0; height: 15.75rem; overflow: hidden; border: 1px solid rgba(255,255,255,.1); border-radius: .8rem; background: #0b0b0c; }.network-card { position: absolute; top: 50%; left: 50%; width: 9rem; padding: 1rem; border: 1px solid rgba(255,255,255,.14); border-radius: .75rem; background: rgba(29,29,32,.8); box-shadow: 0 22px 50px rgba(0,0,0,.4); transform: translate(-50%,-50%); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }.network-card span { color: #86868b; font-size: .58rem; }.network-card strong { display: block; margin-top: .25rem; font-size: 1.55rem; }.network-card small { display: block; margin-top: .25rem; color: #81d89a; font-size: .54rem; }.pulse { position: absolute; width: .55rem; height: .55rem; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 .45rem rgba(48,209,88,.1), 0 0 1.5rem rgba(48,209,88,.42); }.p1 { left: 18%; top: 30%; }.p2 { right: 16%; top: 24%; }.p3 { left: 26%; bottom: 20%; }.p4 { right: 24%; bottom: 24%; } .delivery { padding: 9rem max(1.25rem, calc((100vw - 70rem) / 2)); background: var(--paper); color: var(--ink); } .delivery-head { max-width: 58rem; } .delivery-steps { margin: 5rem 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line-light); } .delivery-steps li { min-height: 7.5rem; display: grid; grid-template-columns: 4rem 1fr 2rem; align-items: center; border-bottom: 1px solid var(--line-light); transition: padding .3s var(--ease), background .3s; } .delivery-steps li:hover { padding: 0 1rem; background: rgba(255,255,255,.7); } .delivery-steps > li > span { color: #a1a1a6; font-size: .65rem; } .delivery-steps h3 { margin: 0; font-size: 1.15rem; letter-spacing: -.025em; } .delivery-steps p { margin: .25rem 0 0; color: #6e6e73; font-size: .78rem; } .delivery-steps i { color: #8e8e93; font-style: normal; text-align: right; } .closing { position: relative; min-height: 44rem; padding: 7rem max(1.25rem, calc((100vw - 70rem) / 2)); display: flex; align-items: center; overflow: hidden; } .closing-media { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(4,5,6,.96), rgba(4,5,6,.72) 48%, rgba(4,5,6,.24)), linear-gradient(0deg, #060607, transparent 52%), url("../hero-cinema.png") center 68% / cover; } .closing-copy { position: relative; z-index: 1; max-width: 48rem; } .closing-copy > p:nth-of-type(2) { max-width: 34rem; margin: 1.5rem 0 0; color: #b9b9be; font-size: .92rem; line-height: 1.75; } .closing .hero-actions { justify-content: flex-start; } .site-footer { padding: 3rem max(1.25rem, calc((100vw - 70rem) / 2)); background: #060607; } .footer-main { padding-bottom: 3rem; display: flex; align-items: center; justify-content: space-between; } .footer-main p { margin: 0; color: #77777d; font-size: .74rem; } .footer-meta { padding-top: 1.35rem; display: flex; justify-content: space-between; border-top: 1px solid rgba(255,255,255,.1); color: #5f5f64; font-size: .66rem; } .footer-meta div { display: flex; gap: 1.4rem; }.footer-meta a { color: #a1a1a6; } /* Pricing */ .pricing-page { background: var(--paper); color: var(--ink); } .pricing-page .site-header { color: #fff; } .pricing-hero { min-height: 43rem; padding: 9rem max(1.25rem, calc((100vw - 70rem) / 2)) 5rem; display: grid; grid-template-columns: 1.25fr .75fr; align-items: center; gap: 2rem; overflow: hidden; background: #070708; color: #fff; } .pricing-hero-copy h1 { margin: 0; font-size: clamp(3.8rem, 6vw, 5.3rem); font-weight: 680; line-height: .95; letter-spacing: -.06em; white-space: nowrap; } .pricing-hero-copy h1 span { color: #86868b; } .pricing-hero-copy > p:last-child { max-width: 38rem; margin: 1.6rem 0 0; color: #a1a1a6; font-size: .92rem; line-height: 1.75; } .pricing-orbit { position: relative; height: 28rem; } .orbit-core { position: absolute; z-index: 3; top: 50%; left: 50%; width: 6.4rem; height: 6.4rem; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.18); border-radius: 1.7rem; background: rgba(35,35,38,.72); box-shadow: 0 28px 70px rgba(0,0,0,.45), inset 0 1px rgba(255,255,255,.1); transform: translate(-50%,-50%); -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px); }.orbit-core i { position: absolute; top: 1rem; width: .48rem; height: .48rem; border-radius: 50%; background: var(--green); box-shadow: 0 0 1rem rgba(48,209,88,.45); }.orbit-core b { font-size: 1.25rem; } .orbit-ring { position: absolute; top: 50%; left: 50%; border: 1px solid rgba(255,255,255,.11); border-radius: 50%; transform: translate(-50%,-50%); }.ring-one { width: 17rem; height: 17rem; }.ring-two { width: 25rem; height: 25rem; } .orbit-node { position: absolute; z-index: 2; min-width: 4.2rem; padding: .65rem .8rem; border: 1px solid rgba(255,255,255,.15); border-radius: 999px; background: rgba(31,31,34,.62); box-shadow: inset 0 1px rgba(255,255,255,.07), 0 12px 28px rgba(0,0,0,.2); color: #d2d2d7; text-align: center; font-size: .62rem; -webkit-backdrop-filter: blur(18px) saturate(165%); backdrop-filter: blur(18px) saturate(165%); }.node-one { top: 17%; left: 15%; }.node-two { top: 25%; right: 8%; }.node-three { right: 18%; bottom: 14%; } .plans { padding: 5rem max(1.25rem, calc((100vw - 70rem) / 2)) 8rem; background: var(--paper); } .plans-heading { display: grid; grid-template-columns: 1fr 19rem; align-items: end; gap: 4rem; } .plans-heading > p { margin: 0; color: #6e6e73; font-size: .85rem; line-height: 1.72; } .plan-grid { margin-top: 4.5rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: .9rem; align-items: stretch; } .plan { position: relative; padding: 2rem; display: flex; flex-direction: column; border: 1px solid rgba(29,29,31,.09); border-radius: .9rem; background: #fff; box-shadow: 0 14px 38px rgba(0,0,0,.045); } .plan-featured { background: #121214; color: #fff; border-color: #121214; box-shadow: 0 28px 70px rgba(0,0,0,.18); transform: translateY(-.65rem); } .plan-recommend { position: absolute; top: 1rem; right: 1rem; padding: .32rem .5rem; border-radius: 999px; background: rgba(255,107,61,.14); color: #ff9c7a; font-size: .55rem; font-weight: 750; } .plan-top { display: flex; align-items: center; justify-content: space-between; } .plan-label { margin: 0; color: var(--orange); font-size: .61rem; font-weight: 750; text-transform: uppercase; } .plan-top > span { color: #a1a1a6; font-size: .58rem; } .plan h3 { margin: 1.3rem 0 0; font-size: 1.45rem; letter-spacing: -.035em; } .plan-desc { min-height: 3.4rem; margin: .55rem 0 0; color: #6e6e73; font-size: .76rem; line-height: 1.6; } .plan-featured .plan-desc { color: #8e8e93; } .plan-price { margin: 1.6rem 0 1.4rem; display: flex; align-items: baseline; gap: .55rem; } .plan-price strong { font-size: 2.55rem; letter-spacing: -.055em; } .plan-price span { color: #8e8e93; font-size: .62rem; } .plan-button { min-height: 2.85rem; padding: 0 1rem; display: flex; align-items: center; justify-content: space-between; border-radius: 999px; background: #1d1d1f; color: #fff; font-size: .75rem; font-weight: 700; transition: background .2s, transform .1s; } .plan-button:hover { background: #303034; } .plan-featured .plan-button { background: #f5f5f7; color: #111; }.plan-featured .plan-button:hover { background: #fff; } .plan ul { margin: 1.7rem 0 0; padding: 1.5rem 0 0; display: grid; gap: .7rem; border-top: 1px solid rgba(29,29,31,.1); list-style: none; } .plan-featured ul { border-color: rgba(255,255,255,.1); } .plan li { display: flex; gap: .55rem; color: #4f4f54; font-size: .7rem; } .plan-featured li { color: #c7c7cc; } .plan li span { color: var(--orange); } .payment-note { width: max-content; max-width: 100%; margin: 2rem auto 0; padding: .62rem .85rem; display: flex; justify-content: center; align-items: center; gap: .5rem; border: 1px solid rgba(29,29,31,.08); border-radius: 999px; background: rgba(255,255,255,.62); box-shadow: 0 8px 24px rgba(0,0,0,.045), inset 0 1px rgba(255,255,255,.85); color: #6e6e73; font-size: .68rem; -webkit-backdrop-filter: blur(18px) saturate(145%); backdrop-filter: blur(18px) saturate(145%); }.payment-note i { flex: 0 0 auto; width: .38rem; height: .38rem; border-radius: 50%; background: var(--green); } .comparison { padding: 8rem max(1.25rem, calc((100vw - 70rem) / 2)); background: #fff; } .comparison-head { max-width: 50rem; }.comparison-head > p:last-child { max-width: 35rem; margin: 1.3rem 0 0; color: #6e6e73; font-size: .86rem; line-height: 1.7; } .comparison-list { margin-top: 4rem; border-top: 1px solid var(--line-light); } .comparison-row { min-height: 4.4rem; display: grid; grid-template-columns: 1.45fr repeat(3, 1fr); align-items: center; border-bottom: 1px solid var(--line-light); } .comparison-row > * { padding: 0 1rem; font-size: .72rem; } .comparison-row > *:first-child { padding-left: 0; } .comparison-header { min-height: 3.4rem; color: #86868b; }.comparison-header span { font-size: .62rem; font-weight: 650; } .comparison-row b { font-weight: 650; }.comparison-row span { color: #55555a; }.comparison-row .positive { color: #16894e; font-weight: 650; }.comparison-row .muted { color: #b1b1b6; } .pricing-cta { position: relative; min-height: 41rem; padding: 7rem max(1.25rem, calc((100vw - 70rem) / 2)); display: flex; align-items: center; overflow: hidden; color: #fff; } .pricing-cta-media { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(4,5,6,.96), rgba(4,5,6,.72) 50%, rgba(4,5,6,.28)), linear-gradient(0deg, #060607, transparent 55%), url("../hero-cinema.png") center 62% / cover; } .pricing-cta-copy { position: relative; z-index: 1; max-width: 48rem; }.pricing-cta-copy > p:nth-of-type(2) { max-width: 36rem; margin: 1.4rem 0 2rem; color: #b9b9be; font-size: .88rem; line-height: 1.75; } .reveal { opacity: 0; transform: translateY(1.6rem); transition: opacity .72s var(--ease), transform .72s var(--ease); } .reveal.is-visible { opacity: 1; transform: none; } @media (max-width: 960px) { .desktop-nav { display: none; } .nav-contact { display: none; } .menu-button { display: block; } .hero { min-height: 48rem; } .hero-inner { padding-top: 6.2rem; } .product-stage { --stage-width: min(44rem, 92vw); } .product-window { height: 23rem; } .platform, .capabilities, .delivery, .plans, .comparison { padding-top: 7rem; padding-bottom: 7rem; } .capabilities-head, .plans-heading { grid-template-columns: 1fr; gap: 1.2rem; } .capabilities-side > p, .plans-heading > p { max-width: 30rem; } .feature-card { gap: 1.1rem; } .feature-copy span { max-width: 34rem; } .plan-grid { grid-template-columns: 1fr; max-width: 40rem; margin-right: auto; margin-left: auto; } .plan-featured { transform: none; } .plan-desc { min-height: auto; } .pricing-hero { grid-template-columns: 1fr; gap: 2rem; padding-top: 8rem; } .pricing-orbit { height: 22rem; } } @media (max-width: 640px) { .site-header { top: .5rem; } .nav-island { width: calc(100% - 1rem); height: 3.45rem; padding-left: .8rem; border-radius: 999px; } .wordmark b { display: none; } .mobile-menu { top: 3.85rem; right: .5rem; left: .5rem; width: auto; } .hero { height: calc(100svh - 5rem); min-height: 45rem; max-height: 54rem; } .hero-inner { width: calc(100% - 1rem); padding-top: 5.5rem; } .hero h1 { font-size: 4.45rem; } .hero-product { font-size: .92rem; } .hero-lead { max-width: 22rem; font-size: .86rem; } .hero-actions { width: min(100%, 22rem); margin-top: 1rem; } .button { flex: 1; } .product-stage { --stage-width: calc(100vw - 1.2rem); margin-top: 1.55rem; } .product-window { height: 18.8rem; border-radius: .8rem; transform: none; } .window-bar { height: 2.5rem; }.window-status { display: none; }.window-title { grid-column: 2; } .window-layout { height: calc(100% - 2.5rem); grid-template-columns: 3.25rem 1fr; } .window-sidebar { padding: .55rem .28rem; }.console-tab { width: 2.55rem; min-height: 2.55rem; }.console-tab span { display: none; } .window-main { padding: .8rem; }.console-heading h2 { font-size: .87rem; }.view-chip { display: none; } .metric-row { gap: .3rem; }.metric-row article { padding: .55rem; }.metric-row strong { font-size: .9rem; }.metric-row span { display: none; } .chart-panel { height: 7.7rem; }.bar-chart { height: 5.6rem; gap: .2rem; } .media-list article { grid-template-columns: 2.6rem 1fr auto; }.poster { height: 2.25rem; }.media-list article { padding: .42rem; } .node-map { height: 10.8rem; } .live-activity { display: none; } .signal-strip { min-height: 4.4rem; gap: 1rem; }.signal-strip div { gap: .32rem; }.signal-strip span { font-size: .55rem; }.signal-strip strong { font-size: .7rem; }.signal-strip > i { height: 1rem; } .platform, .capabilities, .delivery, .plans, .comparison { padding: 5.5rem 1rem; } .platform-intro h2, .capabilities-head h2, .delivery-head h2, .closing h2, .plans-heading h2, .comparison-head h2, .pricing-cta h2 { font-size: 2.75rem; } .platform-intro > p:last-child { margin: 1.4rem 0 0; font-size: .9rem; } .principle-grid { margin-top: 3.5rem; grid-template-columns: 1fr; }.principle-grid article { min-height: auto; padding: 1.5rem 0; }.principle-grid article + article { padding-left: 0; border-top: 1px solid var(--line-light); border-left: 0; }.principle-grid h3 { margin: .9rem 0 .35rem; } .feature-rail { margin-top: 3.5rem; grid-auto-columns: calc(94vw - 1rem); gap: .75rem; }.feature-rail-controls { display: none; }.feature-card { height: 15.5rem; min-height: 0; padding: .9rem; grid-template-columns: .94fr 1.06fr; gap: .7rem; }.feature-copy p { margin-bottom: .55rem; font-size: .58rem; }.feature-copy h3 { font-size: 1.12rem; line-height: 1.12; }.feature-copy span { margin-top: .72rem; font-size: .63rem; line-height: 1.5; }.portal-preview, .operations-preview, .network-preview { height: 13.7rem; border-radius: .65rem; }.portal-preview { padding: .55rem .55rem 0; }.portal-bar { height: 1.15rem; }.portal-bar i { width: .4rem; height: .4rem; }.portal-bar span { width: 2.3rem; }.portal-hero { height: 6.2rem; padding: .65rem; }.portal-hero small { font-size: .44rem; }.portal-hero b { font-size: .88rem; }.portal-hero em { font-size: .48rem; }.portal-posters { gap: .25rem; margin-top: .4rem; }.portal-posters i { height: 4.6rem; }.operations-preview { padding: .55rem; }.op-chart { height: 12.5rem; padding: .7rem; }.op-chart > span { font-size: .5rem; }.op-chart > strong { font-size: 1rem; }.op-chart > div { height: 7rem; margin-top: .65rem; gap: .25rem; }.op-event { right: .8rem; bottom: .8rem; left: 1.2rem; padding: .55rem; grid-template-columns: .4rem 1fr; gap: .4rem; }.op-event > i { width: .4rem; height: .4rem; }.op-event b { font-size: .55rem; }.op-event small { font-size: .45rem; }.op-event em { display: none; }.pipeline-preview { min-height: 13.7rem; gap: .28rem; }.pipeline-step { min-height: 3.25rem; padding: 0 .55rem; gap: .5rem; }.pipeline-step > i { width: 1.35rem; height: 1.35rem; font-size: .5rem; }.pipeline-step b { font-size: .58rem; }.pipeline-step small { font-size: .44rem; }.pipeline-preview > em { height: .45rem; margin-left: 1.2rem; }.network-card { width: 7rem; padding: .72rem; }.network-card strong { font-size: 1.2rem; }.network-card span, .network-card small { font-size: .45rem; }.pulse { width: .42rem; height: .42rem; box-shadow: 0 0 0 .3rem rgba(48,209,88,.1), 0 0 1rem rgba(48,209,88,.42); } .delivery-steps { margin-top: 3.5rem; }.delivery-steps li { min-height: 6.4rem; grid-template-columns: 2.7rem 1fr 1.5rem; }.delivery-steps li:hover { padding: 0 .5rem; }.delivery-steps p { padding-right: .5rem; } .closing, .pricing-cta { min-height: 39rem; padding: 5rem 1rem; }.closing-copy > p:nth-of-type(2), .pricing-cta-copy > p:nth-of-type(2) { font-size: .84rem; }.closing .hero-actions { align-items: flex-start; flex-direction: column; }.closing .button { flex: none; width: 100%; } .footer-main, .footer-meta { align-items: flex-start; flex-direction: column; gap: 1rem; }.footer-meta div { width: 100%; justify-content: space-between; } .pricing-hero { min-height: 45rem; padding: 7.5rem 1rem 4rem; display: block; }.pricing-hero-copy h1 { font-size: 2.55rem; }.pricing-hero-copy > p:last-child { font-size: .84rem; }.pricing-orbit { height: 18rem; margin-top: 1.5rem; }.ring-one { width: 13rem; height: 13rem; }.ring-two { width: 18rem; height: 18rem; }.orbit-core { width: 5rem; height: 5rem; border-radius: 1.35rem; }.node-one { top: 15%; left: 6%; }.node-two { top: 21%; right: 2%; }.node-three { right: 10%; bottom: 8%; } .plans-heading > p { font-size: .8rem; }.plan-grid { margin-top: 3.5rem; }.plan { padding: 1.5rem; }.payment-note { width: 100%; align-items: flex-start; border-radius: 1rem; text-align: left; line-height: 1.5; } .comparison-list { overflow-x: auto; }.comparison-row { min-width: 40rem; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } .reveal { opacity: 1; transform: none; } .hero-media, .product-window { transform: none; } .site-header.is-scroll-hidden { opacity: 1; } ::view-transition-old(root), ::view-transition-new(root) { animation: none; } } @media (prefers-reduced-transparency: reduce) { .nav-island, .mobile-menu, .product-window, .live-activity, .orbit-core, .orbit-node, .op-event, .network-card { background: #171719; -webkit-backdrop-filter: none; backdrop-filter: none; } .button-primary, .payment-note { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; } .nav-island::before, .nav-island::after { display: none; } } @media (prefers-contrast: more) { .nav-island, .mobile-menu, .product-window, .feature-card { border-color: #fff; background: #050506; } .payment-note { border-color: #1d1d1f; background: #fff; } }