@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,400,0,0&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root { --ink: #08111f; --ink-soft: #10223a; --paper: #f4f7f3; --muted: #7f8d9f; --line: rgba(8, 17, 31, .13); --blue: #3c7dff; --lime: #c8ff52; --white: #fff; --display: 'Space Grotesk', sans-serif; --body: 'DM Sans', sans-serif; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 16px/1.6 var(--body); }
a { color: inherit; text-decoration: none; }
.site-shell { overflow: hidden; }
.site-header { align-items: center; display: flex; justify-content: space-between; margin: 0 auto; max-width: 1280px; padding: 25px 40px; }
.brand { align-items: center; display: inline-flex; font: 700 24px/1 var(--display); letter-spacing: -.06em; }
.brand-mark { align-items: center; background: var(--ink); border-radius: 9px; color: var(--lime); display: inline-flex; font: 700 16px/1 var(--display); height: 30px; justify-content: center; margin-right: 9px; transform: rotate(-7deg); width: 30px; }
.brand-dot, em, h2 span { color: var(--blue); font-style: normal; }
.main-nav { display: flex; gap: 32px; margin-left: 80px; }
.main-nav a { color: #536276; font-size: 14px; font-weight: 600; transition: color .2s ease; }
.main-nav a:hover, .main-nav a.current { color: var(--ink); }
.header-cta { border-bottom: 1px solid var(--ink); font-size: 14px; font-weight: 700; padding-bottom: 2px; }
.header-cta span { color: var(--blue); margin-left: 5px; }
.section-grid, .section, .inner-hero, .legal-heading, .legal-copy { margin-left: auto; margin-right: auto; max-width: 1280px; }
.hero { align-items: center; display: grid; gap: 60px; grid-template-columns: .9fr 1.1fr; min-height: 680px; padding: 55px 40px 100px; }
.eyebrow { align-items: center; color: #5e6d7f; display: flex; font-size: 12px; font-weight: 700; gap: 9px; letter-spacing: .14em; margin: 0 0 23px; text-transform: uppercase; }
.status-dot { background: var(--lime); border-radius: 50%; box-shadow: 0 0 0 5px rgba(200,255,82,.2); display: inline-block; height: 8px; width: 8px; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-family: var(--display); letter-spacing: -.06em; }
h1 { font-size: clamp(52px, 6vw, 87px); line-height: .98; margin-bottom: 27px; max-width: 680px; }
.hero-lead { color: #667689; font-size: 18px; line-height: 1.65; max-width: 530px; }
.hero-actions { align-items: center; display: flex; gap: 28px; margin-top: 37px; }
.button { align-items: center; border-radius: 100px; display: inline-flex; font-size: 14px; font-weight: 700; gap: 26px; justify-content: space-between; padding: 15px 19px 15px 24px; transition: transform .2s ease, box-shadow .2s ease; }
.button:hover { box-shadow: 0 9px 25px rgba(8,17,31,.15); transform: translateY(-2px); }
.button-primary { background: var(--ink); color: var(--white); }
.button-primary span { align-items: center; background: var(--lime); border-radius: 50%; color: var(--ink); display: inline-flex; height: 28px; justify-content: center; width: 28px; }
.button-light { background: var(--paper); color: var(--ink); }
.text-link { border-bottom: 1px solid var(--ink); font-size: 14px; font-weight: 700; padding-bottom: 3px; }
.text-link span { color: var(--blue); margin-left: 7px; }
.hero-visual { min-height: 530px; position: relative; }
.glow { border-radius: 50%; filter: blur(2px); position: absolute; }
.glow-one { background: #c8ff52; height: 300px; left: 5%; opacity: .72; top: 20%; width: 300px; }
.glow-two { background: #4c80ff; bottom: 4%; height: 360px; opacity: .62; right: 2%; width: 360px; }
.phone-card { background: var(--ink); border: 8px solid #d8e2ec; border-radius: 34px; box-shadow: 0 30px 70px rgba(8,17,31,.28); color: var(--white); left: 25%; padding: 17px 16px 13px; position: absolute; top: 12px; transform: rotate(5deg); width: min(360px, 67%); z-index: 2; }
.phone-topline, .phone-heading, .phone-tabs, .mock-user, .mock-actions, .mock-nav { align-items: center; display: flex; justify-content: space-between; }
.phone-topline { color: #91a1b4; font-size: 9px; }
.phone-heading { font: 600 17px var(--display); margin: 24px 0 19px; }
.phone-heading b { color: var(--lime); font-size: 25px; }
.phone-tabs { border-bottom: 1px solid rgba(255,255,255,.15); color: #91a1b4; font-size: 10px; padding-bottom: 10px; }
.phone-tabs .active { color: var(--lime); }
.mock-post { background: #f1f5f1; border-radius: 16px; color: var(--ink); margin-top: 14px; padding: 13px; }
.mock-user { font-size: 10px; justify-content: flex-start; gap: 8px; }
.mock-user small, .mock-user b { display: block; }.mock-user small { color: #8090a2; font-size: 8px; }.mock-user .more { margin-left: auto; }
.avatar { align-items: center; border-radius: 50%; color: white; display: inline-flex; font-weight: 700; height: 28px; justify-content: center; width: 28px; }.avatar-blue { background: #517ff5; }
.mock-post > p { font-size: 11px; line-height: 1.45; margin: 14px 0; }
.mock-media { align-items: flex-end; background: linear-gradient(145deg, #b5e4ff 0%, #5c80ff 60%, #1a254c 100%); border-radius: 10px; color: white; display: flex; height: 115px; justify-content: space-between; overflow: hidden; padding: 12px; position: relative; }
.mock-media:before, .mock-media:after { background: rgba(200,255,82,.75); border-radius: 50%; content: ''; height: 120px; left: 22%; position: absolute; top: -33px; width: 120px; }.mock-media:after { background: rgba(255,255,255,.2); left: auto; right: -30px; top: 50px; }
.mock-media span { font: 700 64px var(--display); position: relative; z-index: 1; }.mock-media small { font-size: 8px; position: relative; z-index: 1; }
.mock-actions { color: #617084; font-size: 10px; margin-top: 11px; }.mock-nav { color: #91a1b4; margin: 18px 5px 2px; text-align: center; }.mock-nav span { min-width: 35px; }.mock-nav i, .app-phone-nav i, .app-phone-title i, .app-phone-user i, .app-phone-post-actions i { font-size: 18px; font-style: normal; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; vertical-align: middle; }.mock-nav small { display: block; font: 8px var(--body); margin-top: 2px; }.mock-nav .selected { color: var(--lime); }
.floating-note { align-items: center; background: var(--white); border-radius: 14px; box-shadow: 0 13px 30px rgba(8,17,31,.13); display: flex; gap: 11px; padding: 12px 15px; position: absolute; z-index: 3; }.floating-note > span { align-items: center; background: var(--lime); border-radius: 50%; display: flex; font-size: 17px; height: 34px; justify-content: center; width: 34px; }.floating-note b, .floating-note small { display: block; }.floating-note b { font: 700 13px var(--display); }.floating-note small { color: #788798; font-size: 10px; }.note-one { left: 4%; top: 20%; }.note-two { bottom: 15%; right: 1%; }.note-two > span { background: var(--blue); color: white; }
.ticker { align-items: center; background: var(--ink); color: var(--white); display: flex; font: 600 12px var(--display); gap: 35px; justify-content: center; letter-spacing: .15em; min-height: 67px; overflow: hidden; white-space: nowrap; }.ticker i { color: var(--lime); font-style: normal; }
.section { padding: 122px 40px; }.split-section { display: grid; gap: 65px; grid-template-columns: 150px 1fr; }.section-label { color: #7d8a99; display: flex; font: 600 11px var(--display); gap: 18px; letter-spacing: .1em; text-transform: uppercase; }.section-label span:first-child { color: var(--blue); }.section-content { min-width: 0; } h2 { font-size: clamp(40px, 4.6vw, 64px); line-height: 1.04; margin-bottom: 0; max-width: 800px; }.about-grid { display: grid; gap: 10%; grid-template-columns: 1.1fr .9fr; }.section-copy { color: #69788a; font-size: 16px; max-width: 430px; }.section-copy p { margin-bottom: 22px; }.section-copy strong { color: var(--ink); }
.services-section { background: #e6eee8; max-width: none; padding-left: max(40px, calc((100% - 1200px)/2)); padding-right: max(40px, calc((100% - 1200px)/2)); }.services-section .section-label { float: left; width: 150px; }.services-section .section-content { margin-left: 215px; }.services-intro { align-items: end; display: flex; gap: 50px; justify-content: space-between; margin-bottom: 54px; }.services-intro p { color: #69788a; margin: 0; max-width: 300px; }.service-list { border-top: 1px solid var(--line); }.service-card { align-items: center; border-bottom: 1px solid var(--line); display: grid; gap: 30px; grid-template-columns: 65px 1fr 35px; padding: 28px 0; }.service-number { color: var(--blue); font: 600 13px var(--display); }.service-card h3 { font-size: 23px; margin-bottom: 7px; }.service-card p { color: #69788a; margin: 0; max-width: 550px; }.service-arrow { color: var(--blue); font-size: 24px; text-align: right; }
.app-banner { background: var(--blue); color: var(--white); margin-bottom: 0; max-width: none; min-height: 485px; overflow: hidden; padding-left: max(40px, calc((100% - 1200px)/2)); position: relative; }.app-banner-copy { max-width: 565px; position: relative; z-index: 2; }.app-banner .eyebrow { color: rgba(255,255,255,.7); }.app-banner h2 { font-size: clamp(58px, 7vw, 100px); line-height: .84; }.app-banner h2 .brand-dot, .app-banner h2 em { color: var(--lime); }.app-banner-copy > p:not(.eyebrow) { color: rgba(255,255,255,.75); margin: 30px 0 28px; max-width: 440px; }.app-orbit { border: 1px solid rgba(255,255,255,.35); border-radius: 50%; position: absolute; }.orbit-one { height: 640px; right: -2%; top: -18%; width: 640px; }.orbit-two { border-color: rgba(200,255,82,.6); height: 440px; right: 7%; top: 4%; width: 440px; }.app-symbol { align-items: center; background: var(--lime); border-radius: 65px; bottom: 12%; color: var(--ink); display: flex; font: 700 125px/.85 var(--display); height: 230px; justify-content: center; position: absolute; right: 20%; transform: rotate(10deg); width: 230px; z-index: 1; }
.inner-hero { align-items: center; display: grid; gap: 40px; grid-template-columns: 1.1fr .9fr; min-height: 500px; padding: 60px 40px 100px; }.inner-hero h1 { font-size: clamp(58px, 7vw, 100px); }.app-page-mark { align-items: center; background: var(--lime); border-radius: 40px; box-shadow: 28px 28px 0 var(--blue); color: var(--ink); display: flex; font: 700 190px/.8 var(--display); height: 320px; justify-content: center; justify-self: center; position: relative; transform: rotate(8deg); width: 320px; }.app-page-mark small { bottom: 47px; font: 700 17px var(--body); left: 55px; letter-spacing: .22em; position: absolute; text-transform: uppercase; }.feature-section { background: #e6eee8; max-width: none; padding-left: max(40px, calc((100% - 1200px)/2)); padding-right: max(40px, calc((100% - 1200px)/2)); }.feature-section .section-label { float: left; width: 150px; }.feature-section .section-content { margin-left: 215px; }.feature-grid { display: grid; gap: 1px; grid-template-columns: repeat(4, 1fr); }.feature-grid article { border-left: 1px solid var(--line); min-height: 220px; padding: 0 23px; }.feature-grid article:first-child { border-left: 0; padding-left: 0; }.feature-icon { color: var(--blue); font: 30px var(--display); }.feature-grid h3 { font-size: 21px; margin: 38px 0 9px; }.feature-grid p { color: #69788a; font-size: 14px; margin: 0; }.quote-section { background: var(--ink); color: var(--white); padding: 100px 30px; text-align: center; }.quote-section p { font: 500 clamp(32px, 4vw, 56px)/1.1 var(--display); letter-spacing: -.06em; margin: 0 auto 25px; max-width: 760px; }.quote-section em { color: var(--lime); }.quote-section span { color: #8a99ab; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }.app-cta-section { padding-bottom: 120px; }.app-cta-card { align-items: center; background: #e6eee8; display: flex; justify-content: space-between; padding: 48px 55px; }.app-cta-card h2 { font-size: clamp(36px, 4vw, 55px); }.app-cta-card .eyebrow { margin-bottom: 14px; }
.support-card { background: var(--ink); border-radius: 22px; color: var(--white); display: flex; flex-direction: column; justify-self: center; padding: 38px; width: min(380px, 100%); }.support-card-icon { align-items: center; background: var(--lime); border-radius: 50%; color: var(--ink); display: flex; font-size: 22px; height: 48px; justify-content: center; margin-bottom: 45px; width: 48px; }.support-card strong { font: 21px var(--display); margin-bottom: 15px; }.support-card a { color: var(--lime); font: 600 19px var(--display); }.support-card small { color: #9aa8b8; line-height: 1.5; margin-top: 16px; }.faq-section { background: #e6eee8; max-width: none; padding-left: max(40px, calc((100% - 1200px)/2)); padding-right: max(40px, calc((100% - 1200px)/2)); }.faq-section .section-label { float: left; width: 150px; }.faq-section .section-content { margin-left: 215px; }.faq-list { border-top: 1px solid var(--line); }.faq-list details { border-bottom: 1px solid var(--line); padding: 24px 0; }.faq-list summary { cursor: pointer; font: 600 21px var(--display); list-style: none; }.faq-list summary::-webkit-details-marker { display: none; }.faq-list summary:after { color: var(--blue); content: '+'; float: right; font-size: 24px; }.faq-list details[open] summary:after { content: '−'; }.faq-list details p { color: #69788a; margin: 17px 0 0; max-width: 650px; }.faq-list a, .legal-copy a { border-bottom: 1px solid currentColor; color: var(--blue); font-weight: 700; }
.legal-page { padding: 70px 40px 125px; }.legal-heading { border-bottom: 1px solid var(--line); padding-bottom: 64px; }.legal-heading h1 { font-size: clamp(55px, 7vw, 90px); }.last-updated { color: #7c8998; font-size: 13px; margin: 28px 0 0; }.legal-copy { color: #657487; max-width: 760px; padding-top: 62px; }.legal-copy h2 { font-size: 26px; margin: 44px 0 13px; }.legal-copy p { margin-bottom: 19px; }.legal-callout { background: #e6eee8; border-left: 4px solid var(--lime); color: var(--ink); margin-top: 47px; padding: 25px 28px; }.legal-callout strong { font: 600 20px var(--display); }.legal-callout p { margin: 7px 0 0; }
.site-footer { background: var(--ink); color: var(--white); padding: 74px max(40px, calc((100% - 1200px)/2)) 25px; }.footer-main { display: grid; gap: 40px; grid-template-columns: 1.7fr 1fr 1fr; padding-bottom: 75px; }.site-footer .brand-mark { background: var(--lime); color: var(--ink); }.site-footer .brand { font-size: 28px; }.footer-main p { color: #8493a5; margin: 17px 0 0; }.footer-contact, .footer-links { display: flex; flex-direction: column; gap: 10px; }.footer-contact > span, .footer-links > span { color: #8493a5; font-size: 11px; letter-spacing: .13em; margin-bottom: 9px; text-transform: uppercase; }.footer-contact a:first-of-type { color: var(--lime); }.footer-contact a, .footer-links a { font-size: 14px; }.legal-bar { align-items: end; border-top: 1px solid rgba(255,255,255,.15); color: #8493a5; display: flex; font-size: 11px; gap: 30px; justify-content: space-between; padding-top: 21px; }.legal-bar > div { display: flex; flex-wrap: wrap; gap: 4px 17px; }.legal-bar strong { color: var(--white); }.legal-bar a { color: var(--lime); }
@media (max-width: 820px) { .site-header { padding: 21px 22px; }.main-nav { gap: 15px; margin-left: 20px; }.main-nav a:nth-child(1), .main-nav a:nth-child(2) { display: none; }.header-cta { display: none; }.hero, .inner-hero { grid-template-columns: 1fr; padding: 55px 22px 80px; }.hero { gap: 30px; }.hero-visual { min-height: 480px; }.phone-card { left: 18%; width: 300px; }.note-one { left: 0; }.note-two { right: 0; }.section { padding: 80px 22px; }.split-section { display: block; }.section-label { margin-bottom: 30px; }.about-grid { gap: 35px; grid-template-columns: 1fr; }.services-section, .feature-section, .faq-section { padding-left: 22px; padding-right: 22px; }.services-section .section-label, .feature-section .section-label, .faq-section .section-label { float: none; width: auto; }.services-section .section-content, .feature-section .section-content, .faq-section .section-content { margin-left: 0; }.services-intro { align-items: start; flex-direction: column; gap: 20px; }.service-card { grid-template-columns: 42px 1fr 20px; gap: 10px; }.service-card h3 { font-size: 19px; }.service-card p { font-size: 14px; }.app-banner { padding-left: 22px; padding-right: 22px; }.app-symbol { bottom: 8%; height: 150px; right: -5%; width: 150px; font-size: 80px; }.app-orbit { right: -20%; }.feature-grid { grid-template-columns: repeat(2, 1fr); row-gap: 40px; }.feature-grid article:nth-child(3) { border-left: 0; padding-left: 0; }.app-cta-card { align-items: start; flex-direction: column; gap: 30px; padding: 32px 25px; }.footer-main { grid-template-columns: 1fr 1fr; }.footer-main > div:first-child { grid-column: span 2; }.legal-bar { align-items: start; flex-direction: column; gap: 17px; } }
@media (max-width: 500px) { h1 { font-size: 48px; }.hero-visual { min-height: 390px; }.phone-card { border-width: 6px; left: 9%; transform: rotate(3deg) scale(.88); transform-origin: top center; }.floating-note { padding: 9px 11px; }.floating-note > span { height: 29px; width: 29px; }.note-one { top: 14%; }.note-two { bottom: 3%; }.ticker { justify-content: flex-start; padding-left: 22px; }.ticker span:nth-of-type(n+3), .ticker i:nth-of-type(n+3) { display: none; }.inner-hero h1 { font-size: 56px; }.app-page-mark { height: 245px; width: 245px; font-size: 145px; }.support-card { margin-top: 10px; }.feature-grid { gap: 28px; grid-template-columns: 1fr; }.feature-grid article, .feature-grid article:nth-child(3) { border-left: 0; border-top: 1px solid var(--line); padding: 25px 0 0; }.feature-grid article:first-child { border-top: 0; padding-top: 0; }.feature-grid h3 { margin-top: 18px; }.footer-main { grid-template-columns: 1fr; }.footer-main > div:first-child { grid-column: auto; }.legal-page { padding: 45px 22px 85px; }.legal-heading { padding-bottom: 45px; }.legal-copy { padding-top: 43px; }.legal-copy h2 { font-size: 23px; } }

.app-phone-preview { background: var(--ink); border: 8px solid #d8e2ec; border-radius: 34px; box-shadow: 24px 24px 0 var(--lime), 0 30px 70px rgba(8,17,31,.2); color: var(--white); justify-self: center; padding: 18px 16px 13px; transform: rotate(5deg); width: min(350px, 100%); }
.app-phone-status, .app-phone-title, .app-phone-tabs, .app-phone-user, .app-phone-post-actions, .app-phone-nav { align-items: center; display: flex; justify-content: space-between; }
.app-phone-status { color: #91a1b4; font-size: 9px; }
.app-phone-title { font: 600 26px var(--display); margin: 24px 0 19px; }.app-phone-title i { color: var(--lime); }
.app-phone-tabs { border-bottom: 1px solid rgba(255,255,255,.15); color: #91a1b4; font-size: 10px; padding-bottom: 10px; }.app-phone-tabs .active { color: var(--lime); }
.app-phone-post { background: #f1f5f1; border-radius: 16px; color: var(--ink); margin-top: 14px; padding: 14px; }.app-phone-user { justify-content: flex-start; gap: 8px; }.app-phone-user b, .app-phone-user small { display: block; }.app-phone-user b { font-size: 11px; }.app-phone-user small { color: #8090a2; font-size: 8px; }.app-phone-user i { color: #8090a2; margin-left: auto; }.avatar-lime { background: #8ebc35; color: var(--ink); }.app-phone-post > p { font-size: 12px; line-height: 1.45; margin: 17px 0 19px; }
.app-phone-post-actions { color: #617084; font-size: 10px; }.app-phone-post-actions span { align-items: center; display: inline-flex; gap: 3px; }.app-phone-post-actions i { font-size: 16px; }
.app-phone-nav { color: #91a1b4; margin: 22px 5px 2px; text-align: center; }.app-phone-nav span { min-width: 35px; }.app-phone-nav small { display: block; font: 8px var(--body); margin-top: 2px; }.app-phone-nav .selected { color: var(--lime); }
@media (max-width: 500px) { .app-phone-preview { box-shadow: 14px 14px 0 var(--lime), 0 25px 50px rgba(8,17,31,.2); transform: rotate(3deg) scale(.9); transform-origin: center; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *:before, *:after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }