:root { color-scheme: dark; --ink:#f0f3eb; --muted:#9ea89d; --lime:#bafa72; background:#111913; color:var(--ink); font-family:Arial,Helvetica,sans-serif; scroll-behavior:smooth; }
* { box-sizing:border-box; } body { margin:0; } a { color:inherit; text-decoration:none; } button { font:inherit; } a:focus-visible,button:focus-visible { outline:2px solid var(--lime); outline-offset:5px; } .wrap { width:min(1200px,calc(100% - 64px)); margin-inline:auto; }
.skip-link { position:absolute; left:20px; top:-80px; background:var(--lime); color:#111913; padding:12px; z-index:10; } .skip-link:focus { top:12px; }
.site-header { min-height:104px; display:flex; justify-content:space-between; align-items:center; gap:24px; border-bottom:1px solid #ffffff18; } .brand { display:flex; align-items:center; gap:12px; font-weight:700; font-size:23px; letter-spacing:-1px; } .brand img { object-fit:contain; } nav { display:flex; align-items:center; flex-wrap:wrap; gap:28px; font-size:14px; } .sign-in { border:1px solid #ffffff30; padding:12px 20px; border-radius:30px; }
.hero { padding-block:86px 100px; display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; } .eyebrow { font-size:11px; font-weight:700; letter-spacing:2px; color:var(--muted); display:flex; align-items:center; gap:9px; } .eyebrow span { width:7px; height:7px; background:var(--lime); border-radius:50%; } h1 { font-size:clamp(40px,5vw,72px); line-height:1.03; letter-spacing:-3px; font-weight:500; margin:26px 0; } h1 em { font-family:Georgia,serif; color:var(--lime); font-weight:400; } .intro { max-width:440px; color:var(--muted); font-size:16px; line-height:1.75; } .button { display:inline-flex; gap:38px; align-items:center; background:var(--lime); color:#15241b; border-radius:30px; padding:17px 25px; font-weight:700; margin-top:22px; } .demo-note { color:var(--muted); font-size:11px; margin-top:18px; }
.market-visual { background:linear-gradient(145deg,#253526,#19251c); border:1px solid #ffffff18; border-radius:24px; overflow:hidden; padding:28px; box-shadow:0 32px 90px #0003; } .visual-heading,.visual-footer { display:flex; justify-content:space-between; gap:12px; font-size:10px; letter-spacing:1.3px; color:var(--muted); } .demo-label { color:var(--lime); } .visual-title { font-family:Georgia,serif; font-size:35px; margin-top:34px; } .market-visual svg { width:100%; height:auto; display:block; margin-top:28px; } .visual-footer { border-top:1px solid #ffffff18; padding-top:20px; }
h2 { font-size:clamp(28px,3vw,42px); font-weight:500; letter-spacing:-1.5px; line-height:1.2; } .workspace { border-top:1px solid #ffffff18; padding-block:70px; display:grid; grid-template-columns:1fr 1fr; gap:60px; } .workspace-items article { display:flex; gap:26px; border-bottom:1px solid #ffffff18; padding:24px 0; } .workspace-items article:first-child { padding-top:0; } .workspace-items article>span { color:var(--lime); font-size:12px; margin-top:5px; } h3 { font-size:20px; font-weight:500; margin:0 0 10px; } .workspace-items p { color:var(--muted); line-height:1.6; font-size:14px; margin:0; }
.contact { padding-block:55px; border-top:1px solid #ffffff18; } dl { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; margin-top:40px; } dt { color:var(--muted); font-size:12px; margin-bottom:12px; } dd { margin:0; font-size:14px; line-height:1.6; overflow-wrap:anywhere; } address { font-style:normal; white-space:pre-line; } footer { display:flex; justify-content:space-between; gap:24px; border-top:1px solid #ffffff18; padding-block:28px; } footer p { font-weight:700; font-size:14px; } footer p span { display:block; color:var(--muted); font-weight:400; font-size:11px; margin-top:8px; } footer nav { font-size:12px; color:var(--muted); } footer button { border:0; padding:0; background:none; color:inherit; cursor:pointer; }
@media(max-width:850px) { .hero,.workspace { grid-template-columns:1fr; gap:40px; } .hero { padding-block:56px; } h1 { letter-spacing:-3px; } .market-visual { max-width:620px; } dl { grid-template-columns:repeat(2,1fr); } footer { flex-direction:column; } }
@media(max-width:520px) { .wrap { width:calc(100% - 36px); } .site-header { padding-block:20px; flex-wrap:wrap; min-height:0; } .brand { font-size:20px; } nav { gap:20px; } .visual-title { font-size:28px; } .market-visual { padding:20px; } dl { grid-template-columns:1fr; } .workspace { padding-block:44px; } }
@media(prefers-reduced-motion:reduce) { :root { scroll-behavior:auto; } }