:root { --ink: #18373c; --ink-2: #284b4e; --teal: #4b887d; --teal-light: #a8ccbb; --orange: #e3a078; --paper: #f4f6f2; --white: #fbfcf8; --muted: #8b9b93; --line: #dce5de; --display: 'Avenir Next', 'Segoe UI', ui-sans-serif, sans-serif; --sans: 'Avenir Next', 'Segoe UI', ui-sans-serif, sans-serif; --mono: 'SFMono-Regular', Consolas, monospace; }
* { box-sizing: border-box; scroll-behavior: smooth; } body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--sans); -webkit-font-smoothing: antialiased; } a:focus-visible { outline: 3px solid var(--orange); outline-offset: 4px; }
.site-header { position: absolute; z-index: 2; top: 0; right: 0; left: 0; display: flex; height: 82px; align-items: center; justify-content: space-between; padding: 0 7vw; border-bottom: 1px solid rgba(223, 233, 225, .17); color: #eef2eb; }.brand { display: flex; align-items: center; gap: 11px; color: inherit; text-decoration: none; }.brand-mark { width: 29px; height: 29px; display: flex; align-items: end; gap: 3px; padding: 4px 5px; border-radius: 8px 8px 8px 3px; background: var(--orange); transform: rotate(-4deg); }.brand-mark i { display: block; width: 4px; border-radius: 2px 2px 0 0; background: var(--ink); transform: rotate(4deg); }.brand-mark i:nth-child(1) { height: 10px; }.brand-mark i:nth-child(2) { height: 16px; }.brand-mark i:nth-child(3) { height: 12px; }.brand strong { display: block; color: #f7f8f3; font-family: var(--display); font-size: 22px; font-weight: 800; letter-spacing: -.9px; line-height: 1; }.brand small { display: block; margin-top: 5px; color: #91aaa2; font: 8px var(--mono); letter-spacing: 1.2px; }.site-header nav { display: flex; align-items: center; gap: 34px; }.site-header nav a { color: #c4d3cb; font-size: 10px; text-decoration: none; }.site-header nav a:hover { color: #fff; }.site-header nav .nav-login { padding: 10px 14px; border: 1px solid #56736f; border-radius: 4px; color: #e8eee8; }.nav-login span { margin-left: 9px; color: var(--orange); }
.hero { position: relative; display: grid; min-height: 650px; grid-template-columns: minmax(430px, .9fr) minmax(370px, 1.1fr); align-items: center; overflow: hidden; padding: 114px 7vw 72px; color: #f0f3ec; background: #17363b; }.hero::before { position: absolute; top: -400px; right: -90px; width: 900px; height: 900px; content: ''; border: 1px solid rgba(198, 221, 206, .08); border-radius: 50%; box-shadow: 0 0 0 48px rgba(198, 221, 206, .017), 0 0 0 115px rgba(198, 221, 206, .014); }.hero-copy { position: relative; z-index: 1; max-width: 590px; }.eyebrow { display: flex; align-items: center; gap: 9px; color: #91aaa2; font: 8px var(--mono); letter-spacing: 1.1px; }.eyebrow > span { width: 18px; height: 1px; background: var(--orange); }.hero h1 { margin: 25px 0 18px; font-family: var(--display); font-size: clamp(54px, 7vw, 88px); font-weight: 600; letter-spacing: -5.8px; line-height: .96; }.hero h1 em, .section-intro h2 em, .closing h2 em { color: var(--teal-light); font-style: normal; font-weight: 400; }.hero-copy > p { max-width: 410px; margin: 0; color: #a7bab2; font-size: 12px; line-height: 1.8; }.hero-actions { display: flex; align-items: center; gap: 25px; margin-top: 27px; }.button-primary, .button-light { display: flex; min-height: 43px; align-items: center; justify-content: space-between; gap: 25px; padding: 0 14px; border-radius: 4px; color: #23464a; background: #dfece3; font-size: 10px; font-weight: 700; text-decoration: none; transition: background .18s ease, transform .18s ease; }.button-primary:hover { background: #fff; transform: translateY(-1px); }.button-primary span { color: #558579; font-size: 15px; }.text-action { color: #b4c6bd; font-size: 9px; text-decoration: none; }.text-action span { margin-left: 7px; color: var(--orange); }.hero-caption { display: flex; align-items: center; gap: 8px; margin-top: 50px; color: #78918b; font: 7px var(--mono); letter-spacing: .55px; }.hero-caption i { width: 6px; height: 6px; border-radius: 50%; background: #77b49e; }.hero-caption b { color: #cd9471; font-weight: 400; }
.hero-visual { position: relative; width: min(100%, 560px); height: 440px; justify-self: end; }.visual-orbit { position: absolute; top: 50%; left: 50%; border: 1px solid rgba(179, 210, 195, .19); border-radius: 50%; transform: translate(-50%, -50%) rotate(-18deg); }.orbit-one { width: 355px; height: 355px; }.orbit-two { width: 480px; height: 270px; border-style: dashed; border-color: rgba(219, 160, 120, .23); transform: translate(-50%, -50%) rotate(31deg); }.visual-center { position: absolute; top: 50%; left: 50%; display: flex; width: 140px; height: 140px; flex-direction: column; align-items: center; justify-content: center; border: 1px solid rgba(179, 210, 195, .32); border-radius: 50%; background: radial-gradient(circle, #285451 0%, #1b3f42 65%); box-shadow: 0 0 0 13px rgba(188, 219, 201, .035), 0 0 45px rgba(14, 39, 39, .3); transform: translate(-50%, -50%); }.visual-center span { color: #a4c4b6; font: 8px var(--mono); letter-spacing: 1.2px; }.visual-center strong { margin: 6px 0 4px; color: #f0f3e9; font: 700 11px var(--display); letter-spacing: .45px; }.visual-center small { color: #91aaa2; font: 7px var(--mono); letter-spacing: 1px; }.signal-card { position: absolute; display: grid; width: 123px; height: 77px; align-content: center; padding: 0 13px; border: 1px solid rgba(188, 215, 198, .24); border-radius: 5px; background: rgba(31, 70, 70, .9); box-shadow: 0 12px 30px rgba(10, 29, 29, .15); }.signal-card span { color: #9dbab0; font: 7px var(--mono); letter-spacing: 1px; }.signal-card i { position: absolute; top: 19px; right: 14px; color: var(--orange); font-size: 15px; font-style: normal; }.signal-card small { margin-top: 6px; color: #e4eee6; font-size: 10px; }.signal-base { top: 51px; left: 50%; transform: translateX(-50%); }.signal-cash { right: 4px; bottom: 67px; }.signal-care { bottom: 63px; left: 16px; }.visual-label { position: absolute; color: #78948c; font: 7px var(--mono); letter-spacing: 1px; }.label-top { top: 29px; left: 8px; }.label-bottom { right: 7px; bottom: 25px; }
.ticker { display: flex; min-height: 51px; align-items: center; justify-content: center; gap: clamp(15px, 3vw, 43px); border-bottom: 1px solid var(--line); color: #6f8780; background: #eef2ed; font: 8px var(--mono); letter-spacing: .55px; }.ticker i { color: #d2936e; font-size: 6px; font-style: normal; }
.platform-section { display: grid; grid-template-columns: minmax(260px, .8fr) minmax(460px, 1.2fr); gap: 7vw; padding: 103px 10vw 102px; }.section-intro { max-width: 450px; }.eyebrow.dark { color: #758982; }.section-intro h2, .method-top h2, .closing h2 { margin: 19px 0 14px; color: #23464a; font-family: var(--display); font-size: clamp(31px, 3.6vw, 45px); font-weight: 600; letter-spacing: -2px; line-height: 1.07; }.section-intro h2 em { color: #57887d; }.section-intro p, .method-top > p { max-width: 400px; margin: 0; color: #778780; font-size: 11px; line-height: 1.85; }.feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-self: center; gap: 12px; }.feature-card { position: relative; min-height: 210px; padding: 17px 14px 21px; border: 1px solid #dfe7e0; border-radius: 5px; background: #f9fbf7; }.feature-mark { color: #c89371; font: 8px var(--mono); }.feature-icon { display: grid; width: 29px; height: 29px; place-items: center; margin: 23px 0 14px; border-radius: 50%; color: #43786c; background: #e7f0e9; font-size: 17px; }.icon-rules { color: #a77153; background: #f4eae0; }.icon-tenant { color: #567481; background: #e6efed; }.feature-card h3 { margin: 0 0 7px; color: #365b59; font-family: var(--display); font-size: 11px; font-weight: 700; }.feature-card p { margin: 0; color: #83918a; font-size: 9px; line-height: 1.7; }.feature-line { position: absolute; right: 14px; bottom: 0; left: 14px; height: 2px; background: linear-gradient(90deg, #6a9d8d, #d8e8df 45%, transparent 45%); }
.method-section { padding: 76px 10vw 79px; background: #e9f0e9; }.method-top { display: flex; align-items: end; justify-content: space-between; gap: 40px; }.method-top h2 { margin-bottom: 0; font-size: 37px; }.method-top > p { max-width: 390px; padding-bottom: 4px; }.flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; align-items: center; gap: 20px; margin-top: 50px; padding: 22px 24px; border: 1px solid #d5e0d7; border-radius: 5px; background: rgba(250, 252, 248, .68); }.flow-step { display: grid; gap: 7px; }.flow-step > span { color: #ca8b67; font: 8px var(--mono); }.flow-step strong { color: #3c625d; font-family: var(--display); font-size: 12px; }.flow-step small { color: #899790; font-size: 8px; }.flow > i { color: #a5b9ad; font-style: normal; }
.closing { display: flex; min-height: 254px; align-items: center; justify-content: space-between; gap: 30px; padding: 53px 10vw; color: #f0f3ea; background: #1a3b3e; }.closing .eyebrow { color: #94aca3; }.closing h2 { margin: 15px 0 0; color: #f0f3ea; font-size: clamp(28px, 3.5vw, 40px); }.closing h2 em { color: #add0bd; }.button-light { flex: 0 0 auto; color: #23464a; background: #e6eee5; }.button-light:hover { background: #fff; }.button-light span { color: #bb7955; font-size: 14px; }
.site-footer { display: flex; min-height: 77px; align-items: center; justify-content: space-between; gap: 20px; padding: 0 7vw; color: #8d9a92; background: #142f33; }.footer-brand strong { font-size: 17px; }.footer-brand .brand-mark { width: 23px; height: 23px; }.footer-brand .brand-mark i { width: 3px; }.footer-brand .brand-mark i:nth-child(1) { height: 8px; }.footer-brand .brand-mark i:nth-child(2) { height: 13px; }.footer-brand .brand-mark i:nth-child(3) { height: 10px; }.footer-brand small { font-size: 6px; }.site-footer > span { font: 7px var(--mono); letter-spacing: .5px; }
@media (max-width: 900px) { .hero { grid-template-columns: 1fr; min-height: auto; padding-top: 145px; }.hero-copy { max-width: 650px; }.hero-visual { width: min(100%, 560px); height: 380px; margin: 20px auto 0; justify-self: center; }.platform-section { grid-template-columns: 1fr; gap: 35px; padding-right: 8vw; padding-left: 8vw; }.feature-grid { max-width: 730px; }.method-top { align-items: flex-start; flex-direction: column; gap: 14px; }.method-top > p { max-width: 570px; } }
@media (max-width: 620px) { .site-header { height: 65px; padding: 0 20px; }.site-header nav { gap: 15px; }.site-header nav a { font-size: 8px; }.site-header nav a:nth-child(2) { display: none; }.site-header nav .nav-login { padding: 8px 10px; }.brand strong { font-size: 19px; }.brand-mark { width: 25px; height: 25px; }.hero { padding: 119px 23px 45px; }.hero h1 { font-size: 56px; letter-spacing: -3.8px; }.hero-copy > p { font-size: 10px; }.hero-actions { gap: 17px; }.button-primary { min-height: 39px; gap: 16px; font-size: 9px; }.text-action { font-size: 8px; }.hero-caption { flex-wrap: wrap; gap: 6px; margin-top: 32px; font-size: 6px; }.hero-visual { height: 320px; margin-top: 23px; }.orbit-one { width: 255px; height: 255px; }.orbit-two { width: 335px; height: 205px; }.visual-center { width: 108px; height: 108px; }.signal-card { width: 100px; height: 64px; padding-left: 10px; }.signal-base { top: 27px; }.signal-cash { right: -2px; bottom: 43px; }.signal-care { bottom: 39px; left: -2px; }.signal-card i { top: 14px; right: 10px; font-size: 12px; }.signal-card small { font-size: 8px; }.visual-label { font-size: 6px; }.label-top { top: 13px; left: -3px; }.label-bottom { right: -3px; bottom: 13px; }.ticker { min-height: 44px; gap: 10px; overflow: hidden; white-space: nowrap; font-size: 6px; }.ticker i { font-size: 5px; }.platform-section { gap: 28px; padding: 67px 23px 65px; }.section-intro h2 { font-size: 34px; }.section-intro p { font-size: 10px; }.feature-grid { grid-template-columns: 1fr; gap: 8px; }.feature-card { display: grid; min-height: 0; grid-template-columns: 26px 30px 1fr; align-items: center; gap: 8px; padding: 12px; }.feature-mark { align-self: start; padding-top: 6px; }.feature-icon { margin: 0; }.feature-card h3 { align-self: end; }.feature-card p { grid-column: 3; align-self: start; }.feature-line { right: 12px; left: 12px; }.method-section { padding: 56px 23px 58px; }.method-top h2 { font-size: 32px; }.method-top > p { font-size: 10px; }.flow { grid-template-columns: 1fr auto 1fr; gap: 17px 10px; margin-top: 30px; padding: 17px 14px; }.flow > i:nth-of-type(2) { display: none; }.flow-step strong { font-size: 10px; }.flow-step small { font-size: 7px; }.closing { min-height: 0; align-items: flex-start; flex-direction: column; padding: 43px 23px; }.closing h2 { font-size: 30px; }.button-light { min-height: 39px; font-size: 9px; }.site-footer { min-height: 67px; padding: 0 18px; }.site-footer > span:nth-child(2) { display: none; }.site-footer > span { font-size: 6px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; } }