:root { --ink:#17202c; --paper:#f7f5ee; --coral:#ff795c; --sun:#ffd66b; --line:#d9d6cb; --muted:#59616b; --mono:"DM Mono", monospace; --sans:"Manrope", sans-serif; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; color:var(--ink); background:var(--paper); font-family:var(--sans); } a { color:inherit; text-decoration:none; } .wrap { width:min(1120px, calc(100% - 48px)); margin-inline:auto; } .noise { position:fixed; inset:0; pointer-events:none; opacity:.12; z-index:10; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.28'/%3E%3C/svg%3E"); }
.site-header { min-height:92px; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--line); position:relative; z-index:2; } .brand { font-weight:800; letter-spacing:-.05em; font-size:1.12rem; } .brand-mark { color:var(--coral); font-size:1.75rem; margin-right:.3rem; vertical-align:-.12em; } .header-link, footer a { font-family:var(--mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; } .header-link span { color:var(--coral); }
.hero { min-height:680px; position:relative; padding:116px 0 92px; overflow:hidden; } .eyebrow { font: .69rem/1.4 var(--mono); text-transform:uppercase; letter-spacing:.085em; color:var(--muted); margin:0 0 20px; } h1,h2,h3,p { margin-top:0; } h1 { font-size:clamp(3.4rem, 8.5vw, 7.4rem); letter-spacing:-.085em; line-height:.91; max-width:900px; margin-bottom:35px; position:relative; z-index:1; } h1 em { font-weight:400; color:var(--coral); } .hero-copy { max-width:470px; font-size:1.07rem; line-height:1.75; color:var(--muted); position:relative; z-index:1; } .button { display:inline-flex; gap:32px; align-items:center; margin-top:18px; padding:16px 19px; border-radius:100px; background:var(--ink); color:white; font-weight:700; font-size:.88rem; position:relative; z-index:1; transition:transform .2s ease; } .button:hover { transform:translateY(-3px); } .button span { color:var(--sun); font-size:1.1rem; }.hero-orbit { position:absolute; right:-70px; bottom:-110px; width:480px; height:480px; border:1px solid var(--ink); border-radius:50%; } .hero-orbit span { position:absolute; width:42%; height:42%; left:29%; top:29%; border-radius:50%; background:var(--coral); } .hero-orbit i { position:absolute; width:30px; height:30px; background:var(--sun); border-radius:50%; left:7%; top:20%; } .hero-orbit b { position:absolute; width:13px; height:13px; background:var(--ink); border-radius:50%; left:82%; top:18%; }
.principles,.apps { padding:110px 0; border-top:1px solid var(--line); } .section-intro h2 { font-size:clamp(2rem,4vw,3.5rem); letter-spacing:-.07em; line-height:1.03; max-width:680px; }.principle-grid { gap:1px; border:1px solid var(--ink); background:var(--ink); margin-top:50px; }.principle-grid article { background:var(--paper); padding:31px; min-height:245px; }.principle-grid span { color:var(--coral); font: .72rem var(--mono); }.principle-grid h3 { margin:54px 0 11px; font-size:1.2rem; letter-spacing:-.045em; }.principle-grid p,.app-card p { color:var(--muted); line-height:1.62; font-size:.92rem; }
.apps { background:var(--ink); color:var(--paper); max-width:none; width:100%; padding-inline:max(24px, calc((100% - 1120px)/2)); }.apps .section-intro { max-width:1120px; margin:auto; }.apps .eyebrow,.apps .app-card p { color:#c4c7bc; }.apps .app-card { max-width:1120px; margin:48px auto 0; border:1px solid #51606e; display:grid; grid-template-columns:155px 1fr auto; align-items:center; gap:35px; padding:28px; transition:background .2s ease, transform .2s ease; }.app-card:hover { background:#202b39; transform:translateY(-3px); }.app-icon { width:112px; aspect-ratio:1; display:grid; place-items:center; }.app-icon img { width:100%; height:100%; display:block; }.app-card h3 { font-size:2.3rem; letter-spacing:-.075em; margin-bottom:7px; }.card-arrow { color:var(--sun); font-size:2rem; align-self:start; }
footer { min-height:92px; display:flex; align-items:center; gap:24px; color:var(--muted); } footer p { margin:0 auto 0 0; font: .7rem var(--mono); } footer a:hover { color:var(--coral); } .legal { padding:90px 0 120px; max-width:780px; }.legal h1 { font-size:clamp(3rem,6vw,5.5rem); }.legal h2 { margin:52px 0 14px; font-size:1.35rem; letter-spacing:-.04em; }.legal p,.legal li { color:#4b5661; line-height:1.75; }.legal li { margin-bottom:7px; } .legal .lead { font-size:1.08rem; }.app-hero { padding:104px 0 115px; min-height:530px; }.app-hero h1 { max-width:750px; }.app-hero .hero-copy { max-width:600px; }.app-label { color:var(--coral); font: .75rem var(--mono); text-transform:uppercase; letter-spacing:.08em; }.detail-grid { border-top:1px solid var(--line); display:grid; grid-template-columns:1fr 1fr; gap:50px; padding:80px 0; }.detail-grid h2 { font-size:2.2rem; letter-spacing:-.06em; }.detail-grid p { color:var(--muted); line-height:1.7; }
@media (max-width:700px) { .wrap { width:min(100% - 36px, 1120px); } .hero { min-height:620px; padding-top:85px; }.hero-orbit { opacity:.38; right:-180px; }.principle-grid article { min-height:190px; }.principle-grid h3 { margin-top:30px; }.apps { padding-inline:18px; }.apps .app-card { grid-template-columns:76px 1fr; gap:20px; padding:18px; }.app-icon { width:76px; border-radius:20px; font-size:2.4rem; }.card-arrow { display:none; }.app-card h3 { font-size:1.75rem; }.detail-grid { grid-template-columns:1fr; gap:20px; padding:62px 0; } footer { gap:15px; flex-wrap:wrap; padding:26px 0; } footer p { width:100%; } }

.store-actions { display:flex; align-items:center; gap:18px; margin-top:31px; }.store-actions p { color:var(--muted); font-size:.77rem; max-width:150px; margin:0; line-height:1.45; }.play-button { background:var(--ink); border:1px solid var(--ink); color:#fff; min-width:188px; padding:10px 14px; display:flex; align-items:center; gap:10px; border-radius:10px; transition:transform .2s ease, background .2s ease; }.play-button:hover { transform:translateY(-3px); background:#283545; }.play-triangle { color:var(--sun); font-size:1.25rem; }.play-button small { display:block; font-size:.56rem; font-weight:500; letter-spacing:.03em; }.play-button span:not(.play-triangle) { font-size:1.05rem; font-weight:700; line-height:1.04; }.play-button b { margin-left:auto; color:var(--sun); }.ledger-preview { width:min(100%, 365px); justify-self:end; background:#fffdf6; border:1px solid var(--ink); border-radius:26px; padding:20px; box-shadow:12px 13px 0 var(--sun); transform:rotate(2.5deg); }.preview-label { color:var(--muted); font: .6rem var(--mono); text-transform:uppercase; letter-spacing:.08em; }.preview-head { display:flex; gap:11px; align-items:center; margin:20px 0 24px; }.preview-head img { width:43px; height:43px; }.preview-head small,.preview-head strong { display:block; }.preview-head small { color:var(--muted); font-size:.7rem; }.preview-head strong { font-size:.95rem; }.preview-balance { border-block:1px solid var(--line); padding:15px 0; position:relative; }.preview-balance span { color:var(--muted); font-size:.68rem; }.preview-balance strong { display:block; font-size:1.42rem; letter-spacing:-.055em; margin-top:3px; }.preview-balance i { width:54%; height:5px; border-radius:4px; background:var(--coral); display:block; margin-top:10px; }.ledger-preview ul { list-style:none; padding:0; margin:4px 0 0; }.ledger-preview li { display:grid; grid-template-columns:10px 1fr auto; gap:8px; align-items:center; padding:12px 0; border-bottom:1px solid #ebe8df; }.ledger-preview li:last-child { border:0; }.ledger-preview li b,.ledger-preview li small { display:block; }.ledger-preview li b { font-size:.78rem; }.ledger-preview li small { font-size:.63rem; color:var(--muted); margin-top:2px; }.ledger-preview li > strong { font:.7rem var(--mono); }.positive { color:#2f8a67; }.dot { width:8px; height:8px; border-radius:50%; }.dot.coral { background:var(--coral); }.dot.sun { background:var(--sun); }.dot.mint { background:#96dec1; }.feature-section { padding:96px 0 110px; }.feature-grid { border-left:1px solid var(--ink); margin-top:25px; }.feature-grid article { padding:20px 23px 20px; min-height:230px; border-block:1px solid var(--ink); border-right:1px solid var(--ink); }.feature-grid article:nth-child(odd) { background:#fffdf6; }.feature-grid span { color:var(--coral); font: .68rem var(--mono); }.feature-grid h3 { font-size:1.08rem; letter-spacing:-.045em; margin:45px 0 10px; }.feature-grid p { color:var(--muted); font-size:.86rem; line-height:1.6; }.store-cta { max-width:1120px; margin:45px auto 0; padding:17px 0; border-bottom:1px solid #657180; display:flex; justify-content:space-between; color:var(--paper); font-weight:700; }.store-cta span { color:var(--sun); font-size:1.3rem; }.store-cta:hover { color:var(--sun); }
@media (max-width:700px) { .ledger-preview { justify-self:start; transform:rotate(1deg); }.store-actions { align-items:flex-start; flex-direction:column; }.feature-section { padding:65px 0; }.feature-grid article { min-height:210px; padding:17px; }.feature-grid h3 { margin-top:32px; } }
