@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=Instrument+Serif&display=swap');
:root{--ink:#252a24;--muted:#687166;--blue:#3e5945;--line:#e4e8df;--light:#f5f7f2;background:#fffefa}

.header{width:min(1240px,calc(100% - 80px));height:96px;position:relative;z-index:3}
.brand{font-size:27px}
.brand svg{fill:#344e3c}
.brand-period{color:#344e3c}
nav{font-size:14px}
.nav-action{border:1px solid #9da699;background:transparent;border-radius:30px;color:var(--ink);padding-inline:23px}

.hero{position:relative;isolation:isolate;min-height:850px;padding:54px 24px 0;overflow:hidden;background:#fffefa}
.bridge-landscape{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 57%;z-index:-2}
.hero-copy{max-width:790px;position:relative;z-index:1}
.hero h1{font-family:'DM Serif Display',Georgia,serif;font-weight:400;letter-spacing:-1.8px;font-size:clamp(44px,4.7vw,68px);line-height:1.05;margin-bottom:24px}
.hero-copy>p{max-width:555px;font-size:16px;line-height:1.75;color:#535d51}
.hero-actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}
.button{border-radius:30px;background:#252e24;box-shadow:0 4px 10px #25312315;font-size:14px;min-height:48px;padding:12px 24px;gap:22px}
.button:hover{background:#40523c}
.button-secondary{background:#fffefa;border:1px solid #a9b0a3;color:#30382c;box-shadow:none}
.button-secondary:hover{background:#eff2e9}
.development{color:#63705c;font-size:11px;margin-top:19px}
.development>span{background:#87967b}

.menu-toggle{background:#f1f4e9}

@media(min-width:1600px){.hero{min-height:940px;padding-top:65px}
.hero h1{font-size:76px}
}

@media(max-width:1000px){.hero{min-height:780px}
.bridge-landscape{object-position:center bottom}
.hero h1{font-size:60px}
}

@media(max-width:760px){.header{width:calc(100% - 36px);height:80px}
.hero{min-height:770px;padding:32px 22px 0}
.hero h1{font-size:clamp(39px,9vw,53px);letter-spacing:-.8px;line-height:1.09}
.hero-copy>p{font-size:15px;line-height:1.7;padding:0;max-width:380px}
.hero-actions{gap:10px}
.button{font-size:13px;padding:12px 19px;min-height:46px}
.development{font-size:10px}
.bridge-landscape{object-fit:cover;object-position:center bottom;width:160%;max-width:none;left:-30%;height:75%;top:auto;bottom:0}
.hero:after{content:'';position:absolute;inset:0 0 auto;height:330px;z-index:-1;background:linear-gradient(#fffefa 65%,#fffefa00)}
.workspace-section{padding-top:50px}
.workspace-intro h2{font-size:28px}
.workspace-intro p{font-size:15px}
.section{padding-block:55px}
.hero-diagram{margin-top:25px}
.nav-action{border-radius:24px}
.hero-actions .button-secondary{background:#fffefaee}
}

@media(max-width:370px){.hero{min-height:820px}
.hero-actions{flex-direction:column;align-items:center}
.hero h1{font-size:37px}
.bridge-landscape{height:65%}
}

.hero .development{width:fit-content;margin-inline:auto;padding:5px 11px;border-radius:20px;background:#fffefae8;color:#4e5a46}

.hero:before{content:'';position:absolute;inset:0 0 auto;height:360px;z-index:-1;background:linear-gradient(#fffefa99,#fffefa00);pointer-events:none}


/* Navigation and footer belong to the landscape composition. */
.hero{min-height:980px;padding-top:138px;padding-bottom:105px}
.hero>.header{position:absolute;inset:0 0 auto;width:min(1240px,calc(100% - 80px));margin-inline:auto;height:96px}
.hero .bridge-landscape{object-position:center center}
.hero-footer{position:absolute;bottom:24px;left:40px;right:40px;display:flex;justify-content:space-between;align-items:center;gap:24px;border:0;border-radius:14px;background:#fffefaf0;box-shadow:0 3px 16px #29351c0a;padding:17px 23px;font-size:12px;color:#414d38;z-index:2}
.hero-footer>span{margin:0;color:inherit;font-size:12px}.hero-footer a{display:flex;align-items:center;min-height:44px}.hero-footer a:hover{text-decoration:underline;text-underline-offset:4px}
.platform-strip{text-align:center;padding:44px 0 35px;border-bottom:1px solid var(--line)}
.platform-strip h2{font-family:'DM Sans',sans-serif;font-size:16px;font-weight:500;letter-spacing:0;margin-bottom:30px;color:#5b6654}
.platform-wordmarks{display:flex;align-items:center;justify-content:space-around;gap:35px;flex-wrap:wrap;color:#535e4e}
.platform-wordmarks>span{font-size:29px;line-height:1.2;letter-spacing:-1px;font-weight:600}.platform-wordmarks .wordmark-shopify{font-weight:750;font-style:italic}.platform-wordmarks .wordmark-snowflake{font-size:26px;font-weight:450;letter-spacing:-.7px}.platform-wordmarks .wordmark-claude{font-family:Georgia,serif;font-weight:500}.platform-wordmarks .wordmark-chatgpt{font-size:27px}
.platform-strip>p{font-size:12px;color:#737d6c;margin:25px 0 0}.workspace-section{padding-top:64px}
@media(min-width:1600px){.hero{min-height:1060px;padding-top:145px}}
@media(max-width:1000px){.hero{min-height:940px;padding-top:130px}.hero-footer{left:24px;right:24px;gap:16px;font-size:11px}.hero-footer>span{font-size:11px}.platform-wordmarks{gap:28px}}
@media(max-width:760px){.hero{min-height:970px;padding-top:116px;padding-bottom:180px}.hero>.header{width:calc(100% - 36px);height:80px}.hero .bridge-landscape{height:78%;object-position:center bottom}.hero-footer{bottom:16px;left:18px;right:18px;display:grid;gap:0;padding:13px 18px;border-radius:12px}.hero-footer>span{font-size:12px;margin-bottom:5px}.hero-footer>a{font-size:12px;min-height:36px}.hero:after{height:400px}.platform-strip{padding:32px 0}.platform-strip h2{font-size:15px;margin-bottom:25px}.platform-wordmarks{display:grid;grid-template-columns:repeat(3,1fr);gap:27px 12px}.platform-wordmarks>span{font-size:23px}.platform-wordmarks .wordmark-snowflake,.platform-wordmarks .wordmark-chatgpt{font-size:20px}.platform-strip>p{font-size:11px}.workspace-section{padding-top:50px}}
@media(max-width:370px){.hero{min-height:1020px}.hero .bridge-landscape{height:72%}.platform-wordmarks{grid-template-columns:repeat(2,1fr)}}

/* The sky, bridge, and footer have separate flow rows: content cannot cross the span. */
.hero{--bridge-image:url('/bridge.webp');display:block;min-height:0;padding:0;overflow:hidden;background:#fffefa}
.hero:before,.hero:after{display:none}
.hero-sky{background-image:linear-gradient(#fffefa44,#fffefa22),var(--bridge-image);background-size:100% 100%,100% 400%;background-position:top;background-repeat:no-repeat;padding-bottom:38px}
.hero-sky>.header{position:relative;inset:auto;height:96px;width:min(1240px,calc(100% - 80px));margin-inline:auto}
.hero-copy{margin:35px auto 0;padding-inline:24px;max-width:840px}
.hero h1{font-size:clamp(42px,4.7vw,68px)}
.bridge-scene{position:relative;aspect-ratio:2.25;overflow:hidden;width:100%}
.hero .bridge-landscape{position:static;display:block;width:100%;max-width:none;height:100%;object-fit:cover;object-position:center bottom;inset:auto;z-index:auto}
.hero-footer{position:relative;inset:auto;margin:0;display:flex;border-radius:0;padding:12px 40px;background:#f3f5ef;color:#414d38;box-shadow:none;min-height:70px}
@media(min-width:1600px){.hero{min-height:0;padding:0}.hero-copy{margin-top:45px}.bridge-scene{max-height:800px}}
@media(max-width:1000px){.hero{min-height:0;padding:0}.hero-footer{inset:auto}.hero-copy{margin-top:28px}}
@media(max-width:760px){.hero{min-height:0;padding:0}.hero-sky{padding-bottom:24px;background-size:100% 100%,auto 400%}.hero-sky>.header{height:80px;width:calc(100% - 36px)}.hero-copy{margin-top:28px;padding-inline:22px}.hero h1{font-size:clamp(37px,9vw,53px)}.bridge-scene{aspect-ratio:1.65}.hero .bridge-landscape{width:100%;height:100%;object-fit:cover;object-position:center bottom}.hero-footer{display:grid;inset:auto;margin:0;padding:18px 24px;border-radius:0;gap:0}.hero-footer>a{min-height:40px}}
@media(max-width:370px){.hero{min-height:0}.hero .bridge-landscape{height:100%}}
.hero-sky{background:#eaf2f7;background-image:linear-gradient(#fffefa 0%,#f4f7f8 55%,#eaf2f7 100%)}
.bridge-scene:before{content:'';position:absolute;inset:0 0 auto;height:48px;background:linear-gradient(#eaf2f7,transparent);pointer-events:none;z-index:1}
@media(max-width:760px){.bridge-scene:before{height:24px}}
/* Restore actual photographic sky behind navigation and copy. */
.hero-sky{background-image:linear-gradient(#ffffff18,#ffffff18),var(--bridge-image);background-size:100% 100%,100% 320%;background-position:center top;background-repeat:no-repeat}
.bridge-scene:before{display:none}
@media(max-width:760px){.hero-sky{background-size:100% 100%,auto 340%;background-position:center top}}
/* Feather only the empty sky seam; the bridge remains fully opaque and unobstructed. */
.bridge-scene{margin-top:-28px;mask-image:linear-gradient(to bottom,transparent,#000 28px)}
.hero-sky{padding-bottom:48px}
@media(max-width:760px){.hero-sky{padding-bottom:42px}.bridge-scene{margin-top:-22px;mask-image:linear-gradient(to bottom,transparent,#000 22px)}}

/* Neutral interface: the landscape supplies the colour. */
:root{--ink:#171717;--muted:#343434;--blue:#171717;--line:#e6e6e6;--light:#f7f7f7}
body,.hero h1,.header,.brand,.nav-action{color:var(--ink)}
.brand svg{fill:currentColor}.brand-period{color:inherit}
.hero-copy>p{color:#303030;font-size:17px;font-weight:450;line-height:1.6;max-width:590px;text-wrap:balance;margin-bottom:26px}
.hero .button{background:#171717;color:#fff;border:1px solid #171717;box-shadow:0 2px 4px #00000008,0 6px 16px #0000000a;font-weight:550}
.hero .button:hover{background:#303030}
.hero .button:active{transform:scale(.96)}
.header .nav-action{background:none;border:0;border-radius:0;padding:0;color:inherit;box-shadow:none;min-height:44px}
.header nav a:hover{color:#000;text-decoration:underline;text-underline-offset:5px}
.hero-footer{background:#fafafa;color:#444}
.platform-strip h2,.platform-wordmarks{color:#444}
@media(max-width:760px){.hero-copy>p{font-size:16px;max-width:350px}.header .nav-action{padding:0 12px}}

.hero .button{border-radius:12px;padding:13px 20px;gap:18px;min-height:48px;line-height:20px}
.ecosystem{text-align:center;padding:55px 0 48px;border-bottom:1px solid #ececec}
.ecosystem>p{font-size:14px;margin-bottom:28px}.ecosystem-names{display:flex;justify-content:space-between;align-items:center;gap:28px;font-size:25px;font-weight:600;letter-spacing:-.8px;color:#444}
.ecosystem small{display:block;margin-top:26px;font-size:11px;color:#808080}

/* Brand marks are locally embedded SVGs, optically balanced in one quiet row. */
.ecosystem{padding:48px 0 44px;border-bottom:1px solid #ededed}
.ecosystem>p{font-size:14px;color:#686868;margin:0 0 35px;letter-spacing:.1px}
.ecosystem-logos{display:flex;align-items:center;justify-content:space-between;gap:30px;list-style:none;padding:0;margin:0;color:#343434}
.ecosystem-logos li{display:flex;align-items:center;justify-content:center;gap:10px;white-space:nowrap;min-height:44px;font-size:24px;font-weight:550;letter-spacing:-.8px}
.ecosystem-logos svg{width:31px;height:31px;fill:currentColor;flex-shrink:0}
.ecosystem-logos .logo-shopify{font-style:italic;font-weight:700;letter-spacing:-1px}
.ecosystem-logos .logo-snowflake{font-size:23px;font-weight:450}
.ecosystem-logos .logo-snowflake svg{width:34px;height:34px}
.ecosystem-logos .logo-claude{font-family:Georgia,serif;font-size:28px;letter-spacing:-1px}
.ecosystem-logos .logo-claude svg{width:33px;height:33px}
.ecosystem small{margin-top:30px;font-size:11px;color:#767676}
@media(max-width:1000px){.ecosystem-logos{gap:20px}.ecosystem-logos li{font-size:20px;gap:8px}.ecosystem-logos .logo-snowflake{font-size:20px}.ecosystem-logos .logo-claude{font-size:25px}.ecosystem-logos svg{width:27px;height:27px}}
@media(max-width:760px){.ecosystem{padding:36px 0 32px}.ecosystem>p{font-size:13px;margin-bottom:26px}.ecosystem-logos{justify-content:center;flex-wrap:wrap;column-gap:28px;row-gap:22px}.ecosystem-logos li{font-size:21px}.ecosystem small{font-size:10px;margin-top:26px}}

/* Lighter hero typography and a plain, compact action. */
.hero h1{font-family:'Instrument Serif',Georgia,serif;font-weight:400;letter-spacing:-1px;line-height:1.06}
.hero-copy>p{font-weight:400}
.hero .button{gap:0;padding:13px 23px;min-height:46px;border-radius:10px;font-weight:400;font-size:14px;line-height:20px;box-shadow:none}
/* Blend the landscape into the white integration section. */
.bridge-scene::after{content:'';position:absolute;inset:auto 0 0;height:clamp(90px,12vw,180px);background:linear-gradient(to bottom,rgba(255,255,255,0) 0%,rgba(255,255,255,.12) 25%,rgba(255,255,255,.55) 65%,#fff 100%);pointer-events:none}

/* Brand row sits within the landscape, below the bridge span. */
.hero>.ecosystem{position:absolute;bottom:24px;left:0;right:0;z-index:2;padding:20px 0;border:0;background:none}
.hero>.ecosystem>p{color:#343434;margin-bottom:25px}
.hero>.ecosystem .ecosystem-logos{color:#202020}
.hero>.ecosystem small{color:#505050;margin-top:22px}
.bridge-scene::after{height:65%;background:linear-gradient(to bottom,#ffffff00 0%,#ffffff33 24%,#ffffffbf 65%,#fffffff2 92%,#fff 100%)}
@media(max-width:760px){.hero .bridge-scene{aspect-ratio:auto;height:420px}.hero .bridge-landscape{object-fit:cover;object-position:center bottom}.hero>.ecosystem{bottom:14px;padding:12px 0}.hero>.ecosystem>p{margin-bottom:18px}.hero>.ecosystem .ecosystem-logos{row-gap:14px;column-gap:24px}.hero>.ecosystem small{margin-top:17px}.bridge-scene::after{height:75%}}
@media(max-width:760px){.hero .bridge-scene{background:#edf2f5}.hero .bridge-landscape{height:280px}.bridge-scene::after{height:100%;background:linear-gradient(to bottom,#ffffff00 0%,#ffffff00 26%,#ffffff75 52%,#edf2f5 67%,#fff 100%)}}

/* Fine-tuned hero weight and compact call to action. */
.hero h1{-webkit-text-stroke:.3px currentColor}
.hero .button{min-height:40px;padding:9px 18px;font-size:13px;line-height:20px;border-radius:8px}
.ecosystem-logos .logo-bitrix24 svg{width:132px;height:29px}
.ecosystem-logos .logo-hubspot svg{width:28px;height:28px}
.hero>.ecosystem{bottom:40px}
@media(max-width:760px){.hero>.ecosystem{bottom:26px}.hero .button{min-height:44px;padding:11px 18px}}
/* Keep the landscape unfaded behind the logos; fade only the bottom edge. */
.bridge-scene::after{height:40px;background:linear-gradient(to bottom,#ffffff00,#fff)}
@media(max-width:760px){.hero .bridge-scene{background:#edf2f5}.hero .bridge-landscape{height:100%;object-fit:cover;object-position:center bottom}.hero>.ecosystem{bottom:30px}.bridge-scene::after{height:28px;background:linear-gradient(to bottom,#ffffff00,#fff)}}
.hero>.ecosystem>p,.hero>.ecosystem .ecosystem-logos{color:#fff;text-shadow:0 1px 5px #0009}
.hero>.ecosystem .ecosystem-logos svg{filter:drop-shadow(0 1px 3px #0008)}

/* Smaller partner row and an optional white-typography preview. */
.hero>.ecosystem .ecosystem-logos{justify-content:center;gap:54px}
.hero>.ecosystem .ecosystem-logos li{font-size:19px;gap:9px}
.hero>.ecosystem .ecosystem-logos svg{width:24px;height:24px}
.hero>.ecosystem .logo-bitrix24 svg{width:108px;height:24px}
.white-hero .hero h1{color:#fff;-webkit-text-stroke:.65px currentColor;text-shadow:0 2px 12px #183c5e35}
.white-hero .hero-copy>p{color:#fff;font-weight:500;text-shadow:0 1px 6px #183c5e65}
.white-hero .hero-sky{background-image:linear-gradient(#173a5a40,#173a5a22),var(--bridge-image)}
@media(max-width:760px){.hero>.ecosystem .ecosystem-logos{gap:20px 28px}.hero>.ecosystem .ecosystem-logos li{font-size:18px}.hero>.ecosystem .logo-bitrix24 svg{width:103px}}

/* Final black hero treatment and compact brand row. */
.hero h1{color:#171717;-webkit-text-stroke:.65px currentColor;text-shadow:none}
.hero-copy>p{color:#303030;text-shadow:none}
.hero>.ecosystem>p,.hero>.ecosystem .ecosystem-logos{color:#171717;text-shadow:none}
.hero>.ecosystem .ecosystem-logos{gap:42px}
.hero>.ecosystem .ecosystem-logos li{font-size:16px;gap:7px}
.hero>.ecosystem .ecosystem-logos svg{width:20px;height:20px;filter:none}
.hero>.ecosystem .logo-bitrix24 svg{width:88px;height:20px}
@media(max-width:760px){.hero>.ecosystem .ecosystem-logos{gap:18px 24px}.hero>.ecosystem .ecosystem-logos li{font-size:15px}.hero>.ecosystem .logo-bitrix24 svg{width:84px}}

.hero>.ecosystem .logo-remax svg{width:83px;height:19px}
/* Logo contrast studies, available through ?logos=. */
html[data-logos] .hero>.ecosystem{width:min(850px,calc(100% - 64px));padding:22px 28px;bottom:43px;border-radius:16px}
html[data-logos] .hero>.ecosystem>p{margin-bottom:18px;font-size:12px}
html[data-logos] .hero>.ecosystem .ecosystem-logos{gap:32px}
html[data-logos="paper"] .hero>.ecosystem{background:#fff;box-shadow:0 8px 25px #0000000c}
html[data-logos="glass"] .hero>.ecosystem{background:#ffffffba;backdrop-filter:blur(18px);border:1px solid #ffffffb3;box-shadow:0 8px 25px #0000000a}
html[data-logos="mist"] .hero>.ecosystem{background:none;isolation:isolate}
html[data-logos="mist"] .hero>.ecosystem::before{content:'';position:absolute;inset:-22px -24px;background:#fffffff0;filter:blur(28px);z-index:-1;border-radius:45%}
html[data-logos="dark"] .hero>.ecosystem{background:#18232bd9;backdrop-filter:blur(12px)}
html[data-logos="dark"] .hero>.ecosystem>p,html[data-logos="dark"] .hero>.ecosystem .ecosystem-logos{color:#fff}
@media(max-width:760px){html[data-logos] .hero>.ecosystem{width:calc(100% - 36px);padding:18px 14px;bottom:35px}html[data-logos] .hero>.ecosystem .ecosystem-logos{gap:12px 20px}html[data-logos="mist"] .hero>.ecosystem::before{inset:-12px;filter:blur(18px)}}

/* Unboxed alternatives: landscape treatment, placement, and image-edge alignment. */
html[data-logos="air"] .hero>.ecosystem,html[data-logos="water"] .hero>.ecosystem,html[data-logos="edge"] .hero>.ecosystem{background:none;border:0;box-shadow:none;backdrop-filter:none;border-radius:0}
html[data-logos="air"] .bridge-landscape{filter:brightness(1.12) saturate(.65)}
html[data-logos="air"] .bridge-scene::after{height:60%;background:linear-gradient(to bottom,#e9f1f500,#e9f1f570 35%,#e9f1f5d9 78%,#fff 100%)}
html[data-logos="air"] .hero>.ecosystem{bottom:40px}
html[data-logos="water"] .hero>.ecosystem{width:410px;bottom:44px;padding:18px 0}
html[data-logos="water"] .hero>.ecosystem .ecosystem-logos{flex-wrap:wrap;gap:16px 25px;max-width:400px;margin:auto}
html[data-logos="water"] .hero>.ecosystem>p{margin-bottom:18px;font-size:11px}
html[data-logos="water"] .bridge-landscape{filter:brightness(1.18) saturate(.8)}
html[data-logos="edge"] .bridge-scene::after{height:180px;background:linear-gradient(to bottom,#fff0,#ffffffb3 45%,#fff 76%)}
html[data-logos="edge"] .hero>.ecosystem{bottom:0;padding:10px 0 20px}
html[data-logos="edge"] .hero>.ecosystem>p{margin-bottom:12px}
@media(max-width:760px){html[data-logos="water"] .hero>.ecosystem{width:calc(100% - 50px)}html[data-logos="air"] .bridge-scene::after{height:62%}html[data-logos="edge"] .bridge-scene::after{height:225px}}

/* Selected composition: larger headline with logos at the image edge. */
.hero h1{font-size:clamp(54px,6.3vw,88px);line-height:1.04}
.hero-copy{max-width:960px}
@media(max-width:760px){.hero h1{font-size:clamp(43px,11vw,64px)}.hero-copy{max-width:100%}}

.header nav .header-start{background:#171717;color:#fff;min-height:40px;padding:0 18px;border-radius:8px;font-size:13px;font-weight:500;white-space:nowrap}
.header nav .header-start:hover{background:#303030;color:#fff;text-decoration:none}
#overview{scroll-margin-top:20px}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}