:root { color-scheme: light; --bg: 220 23% 97%; --fg: 221 39% 11%; --card: 0 0% 100%; --muted: 215 19% 35%; --line: 214 32% 84%; --orange: 25 100% 50%; --ring: 207 76% 38%; --secondary: 210 40% 96%; }
:root[data-theme="dark"] { color-scheme: dark; --bg: 220 49% 8%; --fg: 210 20% 98%; --card: 221 39% 11%; --muted: 216 12% 75%; --line: 215 28% 27%; --ring: 31 100% 65%; --secondary: 215 28% 17%; }
* { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 32px; } body { margin: 0; background: hsl(var(--bg)); color: hsl(var(--fg)); font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; } a { color: inherit; text-decoration: none; } button, select { font: inherit; } img { display: block; max-width: 100%; } h1, h2, h3, p, figure { margin: 0; } :focus-visible { outline: 3px solid hsl(var(--ring)); outline-offset: 5px; } .frame { width: 90%; margin-inline: auto; } .section { padding-block: clamp(72px, 6vw, 160px); } .eyebrow { text-transform: uppercase; letter-spacing: .14em; font-size: clamp(11px, .45vw, 16px); font-weight: 650; line-height: 1.6; margin-bottom: 24px; } .muted { color: hsl(var(--muted)); }
.skip { position: fixed; top: 12px; left: 12px; z-index: 20; background: hsl(var(--card)); padding: 16px; transform: translateY(-200%); }.skip:focus { transform: none; }.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.site-header { display: flex; align-items: center; justify-content: space-between; gap: 32px; min-height: 104px; border-bottom: 1px solid hsl(var(--line) / .65); } .identity { display: flex; align-items: center; gap: 20px; font-weight: 650; letter-spacing: -.03em; font-size: clamp(17px, .7vw, 24px); } .identity img { width: 144px; height: auto; }.identity span { border-left: 1px solid hsl(var(--line)); padding-left: 20px; }.site-header nav, .header-actions { display: flex; align-items: center; gap: 32px; font-size: clamp(14px, .55vw, 19px); }.site-header nav a, .login { padding-block: 12px; }.site-header nav a:hover, .login:hover { text-decoration: underline; text-underline-offset: 6px; }
.button { background: hsl(var(--orange)); color: hsl(221 49% 8%); border-radius: 8px; padding: 18px 28px; display: inline-flex; align-items: center; justify-content: center; gap: 48px; min-height: 52px; font-weight: 650; font-size: clamp(15px, .65vw, 22px); }.button:hover { filter: brightness(.94); }.button.small { padding: 14px 20px; min-height: 44px; font-size: inherit; }.quiet-link { display: inline-flex; align-items: center; gap: 24px; text-decoration: underline; text-underline-offset: 6px; min-height: 44px; font-size: clamp(15px, .65vw, 22px); }
.hero { position: relative; overflow: hidden; isolation: isolate; background: radial-gradient(ellipse at 12% 110%, hsl(var(--orange) / .18), transparent 60%), radial-gradient(ellipse at 95% 65%, hsl(215 50% 50% / .06), transparent 65%); }.hero-content { position: relative; z-index: 1; padding-block: clamp(80px, 6vw, 168px) clamp(124px, 8vw, 220px); }.hero .eyebrow { color: hsl(var(--muted)); }.hero h1 { font-size: clamp(64px, 6.4vw, 180px); line-height: 1.02; font-weight: 600; letter-spacing: -.06em; max-width: 23ch; }.hero-description { font-size: clamp(20px, .95vw, 30px); line-height: 1.6; letter-spacing: -.02em; margin-top: 36px; max-width: 54ch; }.hero-actions { display: flex; gap: 32px; align-items: center; margin-top: 36px; }.hero-note { color: hsl(var(--muted)); margin-top: 20px; font-size: clamp(13px, .55vw, 18px); }.hero-lines { position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent, transparent calc(20% - 1px), hsl(var(--line) / .17) calc(20% - 1px), hsl(var(--line) / .17) 20%); z-index: -1; mask-image: linear-gradient(transparent, black); }.connection-line { position: absolute; bottom: 0; left: 0; width: 100%; height: 128px; opacity: .48; z-index: -1; }.connection-line path { fill: none; stroke: hsl(var(--orange)); stroke-width: 1.5; }.connection-line circle { fill: hsl(var(--orange)); }
.ecosystem-strip { padding-block: 36px 44px; border-bottom: 1px solid hsl(var(--line) / .65); }.ecosystem-strip > .eyebrow { font-size: clamp(10px, .42vw, 15px); margin-bottom: 24px; }.partner-strip { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 40px; list-style: none; margin: 0; padding: 0; }.partner-strip li { display: flex; align-items: center; gap: 20px; min-width: 0; }.partner-art { width: 120px; height: 68px; flex-shrink: 0; border-radius: 8px; padding: 8px 12px; }.partner-art img { height: 100%; width: 100%; object-fit: contain; }.dark-backplate { background: #182231; }.light-backplate { background: white; }.partner-strip li > span { color: hsl(var(--muted)); font-size: clamp(12px, .5vw, 17px); line-height: 1.5; }.partner-note { color: hsl(var(--muted)); font-size: 12px; margin-top: 24px; }
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 72px; margin-bottom: 48px; }.section-heading h2, .direction h2 { font-size: clamp(36px, 3vw, 80px); font-weight: 550; letter-spacing: -.045em; line-height: 1.1; }.section-heading > p { color: hsl(var(--muted)); font-size: clamp(17px, .75vw, 24px); line-height: 1.75; max-width: 44ch; }.product-window { border: 1px solid hsl(var(--line)); border-radius: 12px; overflow: hidden; max-width: 2200px; margin-inline: auto; box-shadow: 0 24px 100px #0000001a; }.window-bar { display: flex; align-items: center; gap: 24px; padding: 20px 24px; background: hsl(var(--card)); color: hsl(var(--muted)); font-size: clamp(12px, .5vw, 17px); }.window-dots { letter-spacing: 4px; font-size: 9px; }.window-divider { margin-inline: 16px; opacity: .65; }.window-bar a { margin-left: auto; text-decoration: underline; text-underline-offset: 4px; }.product-image { width: 100%; height: auto; max-height: 820px; object-fit: contain; background: #f5f6f8; }.product-window figcaption { display: flex; align-items: center; gap: 10px; padding: 18px 24px; background: hsl(var(--card)); color: hsl(var(--muted)); font-size: clamp(12px, .5vw, 16px); }.status-dot { height: 6px; width: 6px; border-radius: 50%; background: hsl(var(--orange)); }
.benefits-section { border-top: 1px solid hsl(var(--line) / .65); }.benefits { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: clamp(40px, 5vw, 160px); margin-top: 64px; }.benefit-number { display: block; color: hsl(var(--muted)); font-size: 13px; padding-top: 24px; margin-bottom: 28px; border-top: 1px solid hsl(var(--line)); }.benefits h3 { font-size: clamp(23px, 1.3vw, 40px); letter-spacing: -.035em; font-weight: 550; }.benefits p { color: hsl(var(--muted)); font-size: clamp(16px, .65vw, 22px); line-height: 1.8; margin: 20px 0 24px; max-width: 48ch; }.benefits a { display: inline-block; padding-block: 10px; font-size: clamp(14px, .55vw, 19px); text-decoration: underline; text-underline-offset: 5px; }
.direction { background: hsl(var(--secondary) / .55); border-block: 1px solid hsl(var(--line) / .65); }.direction-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(64px, 8vw, 240px); }.direction p:not(.eyebrow) { color: hsl(var(--muted)); font-size: clamp(16px, .65vw, 23px); line-height: 1.8; max-width: 58ch; }.direction .direction-lead { color: hsl(var(--fg)); font-size: clamp(21px, 1vw, 32px); line-height: 1.5; margin-bottom: 28px; }.direction .quiet-link { margin-top: 24px; }
.closing { text-align: center; background: radial-gradient(ellipse at 50% 100%,hsl(var(--orange) / .08),transparent 65%); }.closing h2 { font-size: clamp(44px, 4vw, 112px); line-height: 1.04; letter-spacing: -.055em; font-weight: 550; }.closing p:not(.eyebrow) { color: hsl(var(--muted)); font-size: clamp(17px, .75vw, 25px); margin-top: 28px; }.closing .button { margin-top: 36px; }.site-footer { display: flex; gap: 24px; justify-content: space-between; color: hsl(var(--muted)); border-top: 1px solid hsl(var(--line) / .65); padding-block: 28px 96px; font-size: 13px; }.site-footer a { text-decoration: underline; }
.review-toolbar { position: fixed; right: 20px; bottom: 16px; z-index: 10; display: flex; align-items: center; gap: 12px; padding: 8px 12px; border: 1px solid hsl(var(--line)); border-radius: 8px; background: hsl(var(--card)); color: hsl(var(--muted)); box-shadow: 0 4px 24px #00000024; font-size: 12px; }.review-toolbar select { min-height: 36px; border: 1px solid hsl(var(--line)); border-radius: 4px; padding: 6px 8px; background: hsl(var(--card)); color: hsl(var(--fg)); }.review-toolbar a { padding-block: 10px; text-decoration: underline; }
@media (max-width: 1500px) { .partner-strip { gap: 24px; }.partner-strip li { flex-direction: column; align-items: flex-start; gap: 12px; }.partner-art { width: 150px; height: 76px; }.identity img { width: 120px; }.site-header nav, .header-actions { gap: 24px; } }
@media (max-width: 1000px) { .site-header nav { display: none; }.identity { gap: 12px; font-size: 16px; }.identity span { padding-left: 12px; }.section-heading { gap: 40px; }.partner-strip { gap: 16px; }.partner-art { width: 116px; height: 72px; }.hero h1 { font-size: clamp(56px, 7vw, 76px); }.benefits { gap: 32px; }.direction-grid { gap: 40px; } }
@media (max-width: 650px) { .frame { width: calc(100% - 40px); }.section { padding-block: 64px; }.site-header { min-height: 88px; gap: 16px; }.identity img { width: 100px; }.identity span { display: none; }.header-actions { gap: 16px; font-size: 12px; }.button.small { padding: 10px 12px; }.hero-content { padding-block: 64px 112px; }.hero .eyebrow { max-width: 30ch; font-size: 10px; }.hero h1 { font-size: clamp(46px, 11vw, 68px); }.desktop-break { display: none; }.hero-description { font-size: 18px; margin-top: 28px; }.hero-description br { display: none; }.hero-actions { align-items: flex-start; flex-direction: column; gap: 16px; margin-top: 28px; }.hero-note { max-width: 30ch; line-height: 1.6; }.connection-line { height: 72px; }.partner-strip { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 28px 20px; }.partner-art { width: 132px; height: 72px; }.partner-strip li > span { font-size: 12px; }.partner-note { line-height: 1.6; }.section-heading { display: block; margin-bottom: 32px; }.section-heading > p { margin-top: 24px; }.section-heading h2, .direction h2 { font-size: 36px; }.window-bar { padding: 14px; gap: 8px; font-size: 10px; }.window-dots, .window-bar a, .window-divider { display: none; }.product-window figcaption { font-size: 11px; padding: 14px; line-height: 1.5; }.benefits { grid-template-columns: 1fr; gap: 28px; margin-top: 36px; }.benefit-number { margin-bottom: 20px; }.benefits p { margin-top: 16px; }.direction-grid { grid-template-columns: 1fr; gap: 32px; }.closing h2 { font-size: 42px; }.site-footer { flex-wrap: wrap; font-size: 12px; }.review-toolbar { right: 10px; bottom: 10px; gap: 8px; font-size: 10px; max-width: calc(100% - 20px); }.review-toolbar select { font-size: 12px; } }
.product-dark { display: none; }
:root[data-theme="dark"] .product-light { display: none; }
:root[data-theme="dark"] .product-dark { display: block; background: hsl(var(--bg)); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }