:root { --bg: #070b18; --surface: #0d1430; --ink: #eef2ff; --muted: #aab5d1; --blue: #3d8bff; --blue-light: #8cc0ff; --line: rgba(226,232,255,.13); --radius: 18px; color-scheme: dark; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif; font-synthesis: none; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 112px; }
body { margin: 0; color: var(--ink); background: radial-gradient(ellipse 950px 650px at 88% 8%, #10214880, transparent 75%), var(--bg); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }img { height: auto; }
a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
a:focus-visible { outline: 3px solid var(--blue-light); outline-offset: 6px; border-radius: 5px; }
main:focus { outline: none; }::selection { background: #3d8bff80; color: white; }
h1,h2,h3,p,figure { margin: 0; }h1,h2,h3 { line-height: 1.08; letter-spacing: -.045em; }
.skip-link { position: fixed; z-index: 20; top: 12px; left: 12px; transform: translateY(-160%); padding: 12px 18px; color: var(--bg); background: var(--ink); border-radius: 8px; font-weight: 650; }.skip-link:focus { transform: none; }
.header { position: sticky; z-index: 10; top: 0; border-bottom: 1px solid var(--line); background: #070b18ee; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
.nav-shell,main,.footer { width: min(1160px, calc(100% - 64px)); margin-inline: auto; }
.nav-shell { min-height: 88px; display: flex; align-items: center; gap: 36px; }
.brand { display: inline-flex; align-items: center; min-height: 44px; gap: 11px; white-space: nowrap; font-size: 22px; font-weight: 730; letter-spacing: -.04em; }.brand-dot { color: var(--blue); }
.nav-shell nav { display: flex; align-items: center; gap: 30px; margin-left: auto; }
.nav-shell nav a,.footer nav a { display: inline-flex; align-items: center; min-height: 44px; color: var(--muted); font-size: 14px; font-weight: 550; transition: color .2s; }.nav-shell nav a:hover,.footer nav a:hover { color: white; }
.nav-cta { display: inline-flex; align-items: center; justify-content: center; gap: 14px; min-height: 44px; padding: 8px 17px; border: 1px solid var(--line); border-radius: 9px; font-size: 13px; font-weight: 650; transition: border-color .2s,background .2s; }.nav-cta:hover { background: #ffffff08; border-color: #8cc0ff70; }
.hero { display: grid; grid-template-columns: 1fr 1.05fr; gap: 56px; align-items: center; padding-block: 90px 94px; }
.eyebrow { color: var(--blue-light); text-transform: uppercase; font-size: 11px; line-height: 1.6; font-weight: 700; letter-spacing: .13em; }
.hero-copy > .eyebrow { display: flex; align-items: center; gap: 10px; margin-bottom: 23px; }
.status-dot { display: inline-block; width: 6px; height: 6px; flex-shrink: 0; border-radius: 50%; background: var(--blue-light); }
h1 { font-size: clamp(52px,5.6vw,76px); font-weight: 780; }h1 span,.runway-copy h2 span { color: var(--blue-light); }
.hero-lede { max-width: 430px; margin-top: 25px; color: var(--muted); font-size: 18px; line-height: 1.7; }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 24px; margin-top: 28px; }
.button { display: inline-flex; min-height: 50px; align-items: center; justify-content: center; gap: 10px; padding: 12px 20px; border-radius: 10px; font-size: 14px; font-weight: 700; line-height: 1.4; transition: background .2s,box-shadow .2s,transform .2s; }.button svg { width: 18px; height: 18px; fill: currentColor; }
.primary { background: var(--blue); color: #070b18; box-shadow: 0 4px 24px #3d8bff15; }.primary:hover { background: #72aaff; box-shadow: 0 5px 30px #3d8bff30; transform: translateY(-2px); }
.secondary { background: var(--ink); color: var(--bg); }.secondary:hover { transform: translateY(-2px); background: #d8e6ff; }
.arrow { margin-left: 8px; font-size: 18px; font-weight: 500; }
.text-link { display: inline-flex; align-items: center; gap: 13px; min-height: 44px; font-size: 14px; font-weight: 650; }.text-link span { color: var(--blue-light); transition: transform .2s; }.text-link:hover span { transform: translate(2px,-2px); }
.creator { display: flex; align-items: center; gap: 12px; margin-top: 27px; }.creator img { width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 50%; }.creator strong { display: block; font-size: 12px; font-weight: 650; }.creator span { display: block; font-size: 11px; color: #929fbe; }
.featured-video { display: block; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: #0d1430; box-shadow: 0 24px 70px #0000002a; transition: border-color .2s,transform .2s; }.featured-video:hover { border-color: #8cc0ff70; transform: translateY(-4px); }
.featured-image { position: relative; }.featured-image img { width: 100%; aspect-ratio: 16/9; object-fit: contain; }
.play-circle { position: absolute; bottom: 17px; right: 18px; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; border: 1px solid #ffffff55; background: #070b18d9; }.play-circle svg { width: 20px; height: 20px; fill: white; }
.featured-copy { padding: 25px 28px 24px; }.featured-copy .eyebrow { margin-bottom: 11px; }.featured-copy h2 { font-size: 26px; line-height: 1.2; letter-spacing: -.03em; }
.watch-label { display: inline-flex; align-items: center; justify-content: space-between; width: 100%; gap: 12px; color: var(--muted); font-size: 12px; }.featured-copy .watch-label { margin-top: 20px; }.watch-label span { color: var(--blue-light); font-size: 17px; }
.section { padding-top: 51px; border-top: 1px solid var(--line); scroll-margin-top: 112px; }
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 31px; }.section-heading .eyebrow { margin-bottom: 13px; }.section-heading .text-link { flex-shrink: 0; margin-bottom: 2px; }
h2 { font-size: clamp(30px,3.2vw,40px); font-weight: 710; }.section-intro { color: var(--muted); font-size: 15px; max-width: 660px; margin-top: 15px; }
.video-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 21px; }
.video-card { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #0b1123; transition: border-color .2s,transform .2s; }.video-card:hover { border-color: #8cc0ff70; transform: translateY(-3px); }.video-card a { height: 100%; display: flex; flex-direction: column; }
.video-image { position: relative; }.video-image img { width: 100%; aspect-ratio: 720/404; object-fit: contain; }.video-open { position: absolute; right: 12px; bottom: 12px; display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid #ffffff35; border-radius: 50%; background: #070b18d9; font-size: 16px; }
.video-copy { display: flex; flex: 1; flex-direction: column; padding: 21px 23px 19px; }.video-copy .eyebrow { font-size: 9px; margin-bottom: 11px; }.video-copy h3 { font-size: 20px; line-height: 1.3; letter-spacing: -.025em; margin-bottom: 24px; }.video-copy .watch-label { margin-top: auto; }
.channel-note { color: #929fbe; font-size: 12px; margin-top: 20px; }.channel-note a { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; color: var(--blue-light); text-decoration: underline; text-underline-offset: 3px; }
.runway-section { margin-top: 56px; padding-top: 73px; }
.runway-showcase { display: grid; grid-template-columns: .85fr 1.15fr; gap: 66px; align-items: center; }
.runway-copy > .eyebrow { margin-bottom: 22px; }.runway-copy h2 { font-size: 64px; font-weight: 760; }.runway-copy > p:not(.eyebrow) { color: var(--muted); font-size: 15px; line-height: 1.75; margin-top: 15px; }.runway-copy .product-lede { font-size: 20px !important; color: var(--ink) !important; line-height: 1.4 !important; margin-top: 23px !important; }
.feature-list { display: grid; gap: 22px; padding: 0; margin: 30px 0; list-style: none; }.feature-list li { display: flex; gap: 16px; }.feature-list li > span { color: var(--blue-light); font: 10px/1.6 ui-monospace,Menlo,monospace; padding-top: 3px; }.feature-list h3 { font-size: 15px; letter-spacing: -.015em; line-height: 1.4; }.feature-list p { font-size: 13px; color: var(--muted); line-height: 1.7; margin-top: 5px; }.runway-copy .product-note { font-size: 11px !important; color: #929fbe !important; }
.app-gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 17px; align-items: center; padding: 25px 0 0; position: relative; }.app-gallery::before { content: ""; z-index: -1; position: absolute; inset: 15% 0 10%; background: radial-gradient(ellipse,#1c3d7060,transparent 65%); }
.app-shot { min-width: 0; }.app-shot img { width: 100%; border-radius: 15px; box-shadow: 0 15px 40px #00000035; }.app-shot figcaption { text-align: center; font-size: 11px; color: var(--muted); margin-top: 14px; }.activity-shot { transform: translateY(22px); }.gallery-note { grid-column: 1/-1; text-align: center; font-size: 10px; color: #929fbe; margin-top: 16px; }
.share-showcase { display: grid; grid-template-columns: 1.2fr 1fr; gap: 50px; align-items: center; margin-top: 62px; padding: 32px; border: 1px solid var(--line); border-radius: var(--radius); background: #0b1123; }.share-showcase figure { min-width: 0; }.share-showcase img { width: 100%; border: 1px solid #ffffff09; border-radius: 10px; }.share-showcase figcaption { color: #929fbe; font-size: 10px; margin-top: 11px; }.share-showcase .eyebrow { margin-bottom: 13px; }.share-showcase h3 { font-size: 35px; font-weight: 700; }.share-showcase p:not(.eyebrow) { color: var(--muted); font-size: 14px; margin-top: 17px; }.share-showcase .text-link { color: var(--blue-light); margin-top: 15px; }
.soon-section { display: flex; align-items: center; gap: 27px; margin-top: 55px; padding: 32px; border: 1px solid var(--line); border-radius: var(--radius); background: #ffffff02; }.soon-symbol { flex-shrink: 0; display: grid; place-items: center; width: 74px; height: 74px; border: 1px dashed #8cc0ff40; border-radius: 50%; font-size: 42px; font-weight: 200; line-height: 1; color: #8cc0ff99; }.soon-section .eyebrow { margin-bottom: 10px; }.soon-section h2 { font-size: 30px; }.soon-section p:not(.eyebrow) { color: var(--muted); font-size: 13px; margin-top: 10px; }.soon-note { display: flex; align-items: center; gap: 9px; margin-left: auto; font-size: 11px; white-space: nowrap; color: #929fbe; }.soon-note .status-dot { background: #8393b2; }
.closing { display: flex; justify-content: space-between; align-items: center; gap: 30px; padding: 57px 0 62px; margin-top: 53px; border-top: 1px solid var(--line); }.closing .eyebrow { margin-bottom: 11px; }.closing h2 { font-size: 30px; }.closing .button { flex-shrink: 0; }
.footer { display: flex; align-items: center; gap: 30px; min-height: 112px; border-top: 1px solid var(--line); }.footer .brand { font-size: 18px; }.footer > p { color: #929fbe; font-size: 11px; }.footer nav { display: flex; gap: 24px; margin-left: auto; }.footer nav a { font-size: 12px; gap: 8px; }
.not-found { min-height: 90vh; margin-top: 0; border: 0; }.not-found .button { margin-top: 28px; }
@media (min-width: 1600px) { .hero { padding-block: 112px; } }
@media (max-width: 1000px) { .hero { gap: 35px; padding-block: 75px; }.nav-shell { gap: 24px; }.nav-shell nav { gap: 22px; }.brand { font-size: 20px; }.featured-copy { padding: 23px; }.featured-copy h2 { font-size: 24px; }.video-grid { gap: 17px; }.video-copy { padding: 19px; }.video-copy h3 { font-size: 18px; }.runway-showcase { gap: 35px; }.runway-copy h2 { font-size: 58px; }.share-showcase { gap: 30px; padding: 28px; }.soon-note { display: none; }.closing h2 { max-width: 390px; } }
@media (max-width: 760px) { .nav-shell,main,.footer { width: calc(100% - 40px); }.nav-shell { min-height: 76px; gap: 20px; }.nav-shell .brand img { width: 30px; height: 30px; }.nav-shell nav { gap: 19px; }.nav-shell nav a { font-size: 12px; }.nav-cta { display: none; }.hero { grid-template-columns: 1fr; padding-block: 58px 59px; gap: 34px; }.hero-copy { max-width: 530px; }h1 { font-size: clamp(48px,8.5vw,68px); }.hero-lede { max-width: 480px; font-size: 17px; }.hero-actions { gap: 14px 22px; }.creator { margin-top: 22px; }.featured-video { max-width: 600px; width: 100%; }.featured-copy { padding: 22px 24px; }.featured-copy h2 { font-size: 25px; }.section { padding-top: 35px; }.section-heading { flex-direction: column; align-items: flex-start; gap: 13px; margin-bottom: 25px; }.section-heading .eyebrow { margin-bottom: 13px; }.section-intro { font-size: 14px; }.section-heading .text-link { font-size: 13px; }.video-grid { grid-template-columns: 1fr; gap: 21px; }.video-copy { padding: 22px 24px; }.video-copy h3 { font-size: 21px; margin-bottom: 17px; }.video-copy .eyebrow { font-size: 10px; }.channel-note { margin-top: 14px; }.runway-section { margin-top: 36px; padding-top: 44px; }.runway-showcase { grid-template-columns: 1fr; gap: 32px; }.runway-copy h2 { font-size: 57px; }.runway-copy h2 br { display: none; }.runway-copy > p,.feature-list { max-width: 530px; }.feature-list { margin-block: 26px; gap: 19px; }.app-gallery { max-width: 560px; width: 100%; margin-inline: auto; padding-top: 3px; gap: 15px; }.app-shot figcaption { font-size: 10px; }.gallery-note { margin-top: 10px; }.share-showcase { grid-template-columns: 1fr; padding: 22px; gap: 25px; margin-top: 38px; }.share-showcase h3 { font-size: 32px; }.share-showcase h3 br { display: none; }.share-showcase p:not(.eyebrow) { font-size: 14px; }.soon-section { align-items: flex-start; margin-top: 35px; padding: 26px; gap: 20px; }.soon-symbol { width: 44px; height: 44px; font-size: 30px; margin-top: 2px; }.soon-section h2 { font-size: 27px; }.closing { flex-direction: column; align-items: flex-start; padding-block: 40px 45px; margin-top: 35px; gap: 25px; }.closing h2 { max-width: 100%; font-size: 30px; }.footer { flex-wrap: wrap; padding-block: 25px; gap: 10px 24px; }.footer > p { margin-left: auto; }.footer nav { width: 100%; margin-left: 0; } }
@media (max-width: 480px) { .app-gallery { grid-template-columns: 1fr; max-width: 330px; gap: 27px; }.app-shot figcaption { font-size: 12px; }.activity-shot { transform: none; }.gallery-note { margin-top: -8px; }.runway-copy h2 { font-size: 52px; }.soon-section { gap: 16px; padding: 24px; }.soon-symbol { width: 36px; height: 36px; font-size: 26px; } }
@media (max-width: 380px) { .nav-shell,main,.footer { width: calc(100% - 32px); }.brand { font-size: 18px; gap: 8px; }.nav-shell nav { gap: 12px; }.nav-shell nav a { font-size: 11px; }h1 { font-size: 46px; }.hero-actions { gap: 12px; }.featured-copy { padding: 20px; }.video-copy { padding: 21px; }.runway-copy h2 { font-size: 44px; }.share-showcase { padding: 18px; }.share-showcase h3 { font-size: 28px; }.soon-section { flex-direction: column; padding: 24px; }.closing .button { width: 100%; }.footer > p { width: 100%; margin-left: 0; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; }*,*::before,*::after { transition: none !important; }.featured-video:hover,.video-card:hover,.button:hover,.text-link:hover span { transform: none; } }
@media (forced-colors: active) { .featured-video,.video-card,.share-showcase,.soon-section,.button { border: 1px solid CanvasText; }.primary,.secondary { background: ButtonFace; color: ButtonText; }.status-dot { background: CanvasText; }.eyebrow,h1 span,.runway-copy h2 span,.text-link,.channel-note a { color: LinkText; } }