:root { --ink:#101112; --muted:#5f6367; --line:#dedfdd; --paper:#fbfbf9; --blue:#286bdc; --green:#4b9652; --red:#ec493e; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; background:var(--paper); } body { margin:0; color:var(--ink); background:var(--paper); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; -webkit-font-smoothing:antialiased; } button,input,textarea { font:inherit; } a { color:inherit; text-decoration:none; } .shell { width:min(1140px,calc(100% - 48px)); margin-inline:auto; } .sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; }
.site-header { min-height:88px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line); }.brand { display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:720;letter-spacing:.025em;text-transform:uppercase; }.brand-mark { width:27px;height:27px; }.site-nav { display:flex;align-items:center;gap:32px;font-size:13px;font-weight:570; }.site-nav a:not(.nav-button) { color:#303335; }.site-nav a:not(.nav-button):hover,.site-footer nav a:hover { color:var(--blue); }.nav-button,.button { display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:0 17px;border:1px solid var(--ink);border-radius:7px;font-size:13px;font-weight:650;transition:transform .18s ease,background .18s ease; }.nav-button { min-height:34px;padding:0 13px;background:var(--ink);color:#fff;border-radius:6px;font-size:12px; }.button:hover,.nav-button:hover { transform:translateY(-1px); }.nav-toggle { display:none;width:42px;height:42px;border:0;background:transparent;padding:9px; }.nav-toggle span:not(.sr-only) { display:block;height:1.5px;margin:5px 0;background:var(--ink); }
.hero { display:grid;grid-template-columns:minmax(0,.86fr) minmax(450px,1.14fr);align-items:center;gap:18px;min-height:628px;padding:60px 30px 48px;border-bottom:1px solid var(--line); }.eyebrow { margin:0 0 18px;color:#46494b;font-size:11px;font-weight:760;letter-spacing:.17em;text-transform:uppercase; } h1,h2,h3,p { margin-top:0; } h1,h2,h3 { letter-spacing:-.052em; } h1 { max-width:650px;margin-bottom:25px;font-size:clamp(44px,5.25vw,76px);line-height:.98; } h2 { max-width:650px;margin-bottom:17px;font-size:clamp(30px,3.55vw,51px);line-height:1.02; } h3 { margin-bottom:9px;font-size:17px;line-height:1.1; } p { color:var(--muted);font-size:16px;line-height:1.65; }.hero-description { max-width:490px;margin-bottom:24px;font-size:16px; }.hero-principle { color:var(--ink);font-size:14px;font-weight:700;line-height:1.5; }.button-row { display:flex;flex-wrap:wrap;gap:11px;margin-top:28px; }.button-dark { background:var(--ink);color:#fff; }.button-light { border-color:#c8cbcb;background:#fff; }.hero-art { width:100%;max-width:620px;justify-self:end; }.hero-art svg { display:block;width:100%;height:auto;overflow:visible; }
.section { padding:112px 0; }.problem-section { display:grid;grid-template-columns:1fr 1fr;gap:10%;border-bottom:1px solid var(--line); }.problem-copy { padding-top:7px; }.problem-copy > p { max-width:500px;margin-bottom:38px;font-size:18px; }.coordination-visual { position:relative;width:min(100%,520px);border:1px solid #eceeec;border-radius:12px;background:linear-gradient(90deg,#fbfcfc,#fff 50%,#fbfcfb);overflow:hidden; }.coordination-visual::before { content:"";position:absolute;inset:0;background:radial-gradient(circle at 77% 50%,rgba(238,241,246,.52),transparent 31%);pointer-events:none; }.coordination-visual svg { position:relative;display:block;width:100%;height:auto; }
.center-heading { text-align:center; }.center-heading h2 { margin-inline:auto; }.steps { display:grid;grid-template-columns:repeat(4,1fr);gap:25px;padding:0;margin:64px 0 0;list-style:none; }.steps li { position:relative;text-align:center; }.steps li:not(:last-child)::after { content:"";position:absolute;top:31px;left:calc(50% + 48px);width:calc(100% - 70px);border-top:1px dotted #aeb4b3; }.step-icon { position:relative;z-index:1;display:grid;place-items:center;width:62px;height:62px;margin:0 auto 21px;border:1.5px solid currentColor;border-radius:50%;font-size:28px;font-weight:450;background:var(--paper); }.blue{color:var(--blue)}.green{color:var(--green)}.red{color:var(--red)}.steps h3 { text-transform:uppercase;font-size:15px;letter-spacing:.035em; }.steps p { max-width:190px;margin:auto;font-size:14px;line-height:1.55; }.building-section { border-top:1px solid var(--line); }.building-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:30px;margin-top:62px; }.building-grid article { text-align:center; }.category-icon { display:grid;place-items:center;width:42px;height:42px;margin:0 auto 18px;font-size:31px; }.building-grid h3 { font-size:16px; }.building-grid p { font-size:14px;line-height:1.6; }
.architecture-section { overflow:hidden;background:linear-gradient(135deg,#f8f8f7,#fff 47%,#fafafa);border-block:1px solid var(--line); }.architecture { min-height:390px;display:grid;grid-template-columns:.8fr 1.2fr;align-items:center;gap:65px; }.architecture > div > p:last-child { max-width:510px; }.layers-art { position:relative;min-width:0; }.layers-art::before { content:"";position:absolute;inset:12% 8%;border-radius:50%;background:radial-gradient(ellipse,rgba(232,237,247,.45),transparent 66%);filter:blur(12px); }.layers-art svg { position:relative;display:block;width:100%;height:auto;overflow:visible; }
.real-section { display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:70px; }.real-section > div:last-child p { max-width:490px; }.human-art { position:relative;min-height:270px;border-radius:12px;overflow:hidden;background:linear-gradient(#f8d7a9 0%,#e7c2a1 45%,#627160 46%,#334538); }.human-art::before { content:"";position:absolute;inset:42% 0 0;opacity:.32;background:repeating-linear-gradient(90deg,transparent 0 18px,#14261e 19px 21px); }.human-art .sun { position:absolute;width:54px;height:54px;left:calc(50% - 27px);top:54px;border-radius:50%;background:#fff5d8;box-shadow:0 0 54px 27px #f5cb91; }.human-art span { position:absolute;width:25px;height:25px;border-radius:50%;background:#1b1f1a;bottom:69px; }.human-art span::after { content:"";position:absolute;width:44px;height:64px;background:#1b1f1a;border-radius:24px 24px 5px 5px;top:18px;left:-10px; }.human-art span:nth-of-type(1){left:16%;}.human-art span:nth-of-type(2){left:32%;bottom:51px}.human-art span:nth-of-type(3){left:49%;}.human-art span:nth-of-type(4){right:27%;bottom:50px}.human-art span:nth-of-type(5){right:11%;}.human-art i { position:absolute;width:46px;height:46px;left:calc(50% - 23px);bottom:22px;border-radius:50%;background:#f5b259;box-shadow:0 0 31px #f9bd68; }
.connect-section { display:grid;grid-template-columns:.9fr 1.1fr;gap:80px;margin-bottom:90px;padding:66px 70px;background:#fff;border:1px solid var(--line);border-radius:14px; }.connect-section h2 { margin-bottom:16px; }.connect-section > div > p:last-child { max-width:430px; }.connect-form { display:grid;gap:8px;align-content:start; }.connect-form label { font-size:13px;font-weight:650; }.connect-form label span { color:#7c8183;font-weight:450; }.connect-form input,.connect-form textarea { width:100%;border:1px solid #d8dbdc;border-radius:7px;padding:11px 12px;color:var(--ink);background:#fff;outline-color:var(--blue); }.connect-form textarea { resize:vertical; }.connect-form .check-label { display:flex;align-items:center;gap:3px;margin:5px 0 9px;font-size:12px;font-weight:460; }.check-label input { width:15px;height:15px;accent-color:var(--ink); }.connect-form .button { justify-self:start; }.connect-form .button:disabled { cursor:wait;opacity:.72;transform:none; }.netlify-honeypot { position:absolute!important;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; }.form-note { min-height:1.5em;margin:4px 0 0;color:var(--green);font-size:13px; }.site-footer { min-height:102px;display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line); }.site-footer nav { display:flex;flex-wrap:wrap;gap:22px;color:#555a5b;font-size:13px; }
@media (max-width:800px) { .shell{width:min(100% - 40px,620px)}.site-header{min-height:72px;position:relative}.nav-toggle{display:block}.site-nav{position:absolute;z-index:3;top:65px;left:0;right:0;display:none;padding:18px;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 14px 25px rgba(0,0,0,.08);align-items:stretch;gap:16px}.site-nav.is-open{display:flex}.site-nav a{padding:5px}.site-nav .nav-button{justify-content:center}.hero{grid-template-columns:1fr;min-height:auto;padding:76px 0 48px;gap:16px}.hero-art{max-width:530px;justify-self:center;order:-1}.hero-copy{text-align:center}.hero-description{margin-inline:auto}.hero-principle{font-size:13px}.button-row{justify-content:center}.problem-section,.architecture,.real-section,.connect-section{grid-template-columns:1fr;gap:38px}.section{padding:80px 0}.problem-copy{padding:0}.problem-copy > p{font-size:16px}.coordination-visual{margin:auto}.steps,.building-grid{grid-template-columns:repeat(2,1fr);row-gap:42px}.steps{margin-top:45px}.steps li:nth-child(2)::after{display:none}.architecture{padding:72px 0}.layers-art{width:min(100%,620px);margin-inline:auto}.real-section{padding-top:70px}.human-art{min-height:220px}.connect-section{padding:40px 30px;margin-bottom:55px}.site-footer{min-height:130px;align-items:flex-start;padding-block:30px;gap:24px;flex-direction:column}.site-footer nav{gap:15px 20px} }
@media (max-width:460px) { .shell{width:calc(100% - 32px)}h1{font-size:42px}.hero{padding-top:55px}.hero-art{width:112%;margin-left:-6%}.section{padding:66px 0}.steps,.building-grid{grid-template-columns:1fr}.steps li::after{display:none}.steps{gap:35px}.building-grid{margin-top:42px;gap:35px}.architecture{padding:60px 0}.connect-section{margin-inline:16px;width:auto;padding:32px 20px}.human-art{min-height:185px} }